body {
	margin: 0;
	padding: 0;
}
header {
	background: rgb(0, 180, 215);
	padding: 0 2vw;
}
main {
	background: rgb(145, 224, 239);
	min-height: 90vh;
	display: flex;
    flex-direction: column;
    align-items: center;
	gap: 1rem;
}
#main {
	.main-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 1vh;
		text-align: center;
	}
}
#language {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 1.25rem;
	position: absolute;
	margin-top: 4vh;
	
	div {
		background: rgba(144,224,239,1);
		border: 1px solid black;
		display: none;
	}
	
	ul {
		padding: 1vh 2.5vw;
		list-style-type: none;
		margin: 0;
		
		li {
			border-top: 1px solid rgb(0, 180, 215);
			padding: 1vh;
			cursor: pointer;
		}
		li:first-of-type {
			border: none;
		}
	}
}
.show {
	display: flex !important;
}
#translator {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.translator-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: white;
		width: fit-content;
		
		div {
			display: flex;
			gap: 1.25rem;
		}
		
		button {
			border: none;
			background: none;
		}
		
		textarea {
			background: none;
			resize: none;
			border: none;
			overflow: hidden;
			border-radius: 1vh 1vh;
			width: 15vw;
			height: 7.5vh;
		}
		textarea#input {
			padding-left: 1vw;
		}
		textarea:focus {
			border: none;
			outline: none;
		}
		
		.text-area-extra {
			width: 100%;
			flex-direction: column;
			gap: 0;
			padding-left: 1vw;
		}
		
		span .blue {
			color: rgb(0, 180, 215);
			font-weight: bold;
		}
	}
	.translator-extra {
		display: flex;
		flex-direction: column;
		gap: 1vh;
		
		.title {
			justify-content: center;
		}
		
		.translator-box {
			
			padding: 1vh 2.5vw;
			display: grid;
			grid-template-areas: 
			"a"
			"b"
			"c";
			
			.title {
				color: rgb(0, 180, 215);
			}
			.domain {
				color: red;
			}
			.codomain {
				color: green;
			}
		}
	}
}
.help-section, .about-section, .faq-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 90%;

	p {
		text-align: center;
	}
}
#pengajuan {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.pengajuan-content {
		background: white;
		width: 90vw;
		border-radius: 5vw;
		padding: 2.5vh 2.5vw;
		
		.row {
			display: grid;
			grid-template-areas: "title subtitle"
												 "hl hl"
												 "box1 box1"
												 "box2 box2"
												 "box3 box3";
			gap: 0.5rem;
			justify-content: center;
			.title {
				grid-area: title;
				font-size: 15pt;
				font-weight: bold;
			}
			.subtitle {
				grid-area: subtitle;
				font-size: 12pt;
			}
			hl {
				grid-area: hl;
			}
			.box {
				display: grid;
				grid-area: box;
				grid-row: none;
				grid-template-areas: "title required"
													 ". .";
				width: fit-content;
				.title {
					font-size: 12pt;
					font-weight: 500;
					grid-area: title;
					width: 35vw;
				}
				.required {
					grid-area: required;
					color: red;
				}
				.field {
					width: 45vw;
				}
			}
			
		}
	}
}
footer {
	background: rgb(0, 180, 215);
	min-height: 10vh;
	
	.footer-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 10vh;
		
		p {
			margin: 0;
		}
	}
}
hl {
	width: 100%;
	height: 1px;
	border: 1px solid black;
}
vl {
	width: 1px;
	border: 1px solid black;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .faq-item {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .faq-item:hover {
    background: #e6f7fb;
  }

  .faq-item .item-title {
    font-weight: bold;
  }

  .faq-item .item-subtitle {
    display: none;
    margin-top: 8px;
    color: #444;
  }

  .faq-item.active .item-subtitle {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }


@media (max-width: 768px){
	#main {
		.main-title {
			font-size: 17pt;
		}
		.main-subtitle {
			font-size: 12pt;
		}
	}
	#translator {
		.translator-container {
			span {
				font-size: 10pt;
			}
			
			textarea {
				width: 40vw;
			}
		}
	}
}