/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

html, body{
  height:100%;
  overflow: hidden; /* Mencegah scroll pada body utama */
}

body{
  display:flex;
  background:#f4f6fb;
}

.sidebar{
  width:240px;
  background: linear-gradient(180deg, #1f5fbf, #174a94);
  color:white;
  display:flex;
  flex-direction:column;
  padding:20px 15px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  z-index: 100; 
  position: relative; 
  flex-shrink: 0;
}

.logo-area{
  text-align:center;
  margin-bottom:30px;
}

.logo-area img{
  width:60px;
  margin-bottom:10px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y: auto; /* Agar menu sidebar bisa scroll jika kepanjangan */
}

.nav button{
  background:transparent;
  border:none;
  color:white;
  padding:12px;
  text-align:left;
  border-radius:8px;
  cursor:pointer;
  transition:0.3s;
}

.nav button:hover{
  background:rgba(255,255,255,0.2);
}

.nav button.active{
  background:white;
  color:#1f5fbf;
  font-weight:600;
}

/* MAIN */
.main{
  display:flex;
  flex-direction:column;
  flex-grow: 1;
  height: 100vh;
  overflow: hidden;
}

/* HEADER */
.header{
  background:white;
  padding:15px 20px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  font-weight:600;
  flex-shrink: 0;
}

/* CONTENT */
.content{
  flex:1;
  overflow-y: auto; /* Memberikan scroll hanya jika konten (Home/Petunjuk) panjang */
  display: flex;
  flex-direction: column;
}

/* CARD */
.card{
  background:white;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  padding:30px;
  margin: 20px;
}

.fade-out{
  opacity:0;
}

#homePage {
  text-align: center;
  padding: 40px 20px;
}

.home-title {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}

.main-title {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
  position: relative; 
  color: #1f5fbf; 
}

.main-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #007bff;
  margin: 12px auto 0;
  border-radius: 2px;
}

.subtitle-ar {
  font-size: 24px;
  font-family: 'Amiri', serif;
  margin: 10px 0;
  direction: rtl;
  unicode-bidi: embed;
  letter-spacing: 0.5px;
}

.subtitle-id {
  font-size: 20px;
  color: #555;
  margin-bottom: 20px;
}

.author {
  font-size: 14px;
  color: #999;
  margin-bottom: 25px;
}

.home-text {
  max-width: 650px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.7;
  color: #444;
}

/* SUBMENU */
.menu-group{
  display:flex;
  flex-direction:column;
}

.submenu {
  display: none; 
  flex-direction: column;
  margin-left: 10px;
}

.submenu button{
  font-size:13px;
  padding:10px;
  background:rgba(255,255,255,0.05);
  border-radius:6px;
}

.menu-group.active .submenu {
  display: flex; 
}

/* BUTTON */
.start-btn{
  display:block;
  margin:20px auto 0;
  padding:12px 25px;
  background:#1f5fbf;
  color:white;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.start-btn:hover{
  background:#174a94;
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.btn-group{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:30px;
  flex-wrap:wrap; 
}

/* IFRAME - PERBAIKAN UTAMA */
#iframePage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}

iframe {
  width: 100%;
  flex: 1; /* Iframe akan mengambil seluruh sisa tinggi yang ada */
  border: none;
  display: block;
}

.content:has(#iframePage:not(.hidden)) {
  overflow: hidden; /* Matikan scroll .content jika iframe sedang tampil */
  padding: 0; /* Menghilangkan padding luar agar iframe mentok ke pinggir */
}

/* FOOTER */
.footer{
  text-align:center;
  padding:10px;
  font-size:13px;
  color:#666;
  flex-shrink: 0;
}

/* HIDDEN */
.hidden{
  display:none !important;
}

/* OVERLAY */
#overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  z-index:90;
  display:none;
}

#overlay.active{
  display:block;
}

/* RESPONSIVE */
@media(max-width:768px){
  .sidebar{
    position:fixed;
    left:-240px;
    top:0;
    height:100%;
    transition:0.3s;
  }
  .sidebar.active{
    left:0;
  }
}

@media(min-width:769px){
  #overlay{
    display:none !important;
  }
}

#homePage,
#iframePage,
#petunjukPage,
#petunjukLayananPage{
  transition: opacity 0.2s ease;
}

.loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(255,255,255,0.65);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  z-index:9999;

  backdrop-filter: blur(2px);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:0.2s ease;
}

.loader.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.spinner{
  will-change: transform;
  width:60px;
  height:60px;
  border:6px solid #dbe7ff;
  border-top:6px solid #1f5fbf;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:15px;
  
}

.loader p{
  font-size:15px;
  color:#1f5fbf;
  font-weight:600;
}

@keyframes spin{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}