/* =======================================================================
   Asoka Landing Styles – FULL PATCH FINAL (Dark Blue & Yellow Theme, Aesthetic, FIX Menu Seluler)
   ======================================================================= */

:root{
  /* NEW THEME: Dark Blue & Yellow/Orange */
  --bg:#ffffff; 
  --bg-alt:#f8f9fa; 
  --surface:#ffffff;

  --text:#ffc107;
  --muted:#667085; /* Soft Muted Gray */

  --ink:#1d2939; 
  --ink-2:#475467; 
  --card:#ffffff; 
  --card-brd:#eaecf0;

  --primary:#2962ff; /* Blue Primary */
  --primary-700:#1e56ed; /* Darker Blue */
  --outline:#c0d5ff; 
  
  --secondary-accent: #ffc107; /* Kuning/Aksen Orange untuk highlight */

  /* Softer, more subtle shadows (Menggunakan warna Dark Blue) */
  --shadow-lg:0 18px 45px rgba(29,41,57,.15);
  --shadow-md:0 10px 30px rgba(29,41,57,.1);
  --shadow-sm:0 5px 15px rgba(29,41,57,.06);
}

/* ================== GLOBAL STYLES & FONT ================== */
*{box-sizing:border-box; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x: hidden; 
}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin-inline:auto}
.subtle{color:var(--muted)}

/* =============== BUTTONS & LINKS (Aesthetic Soft Hover + Gradient) =============== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.2rem;border-radius:100px; 
  border:1px solid var(--outline);
  background:transparent;color:var(--text);
  font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-sm); 
  transition:transform .2s, border-color .2s, box-shadow .2s, background-color .2s;
}
.btn:hover{ 
  transform:translateY(-2px); 
  border-color:var(--primary); 
  box-shadow:var(--shadow-md); 
}
.btn i{ font-size: 18px; width: auto; height: auto; }
.btn-primary{ 
  /* Gradasi */
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  border-color:var(--primary-700); 
  color:var(--card); 
  background-size: 200% 200%;
}
.btn-primary:hover{ 
  /* Efek gerak pada gradasi saat hover */
  background-position: bottom right; 
  background: var(--primary-700);
  border-color:var(--primary-700); 
  box-shadow:var(--shadow-lg); 
}
.btn-outline{ 
  background:transparent; 
  color:inherit; 
  border-color:var(--primary); 
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

/* =============== PRELOADER (Full Effect) =============== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--surface); 
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}
.preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader__spinner {
    border: 4px solid var(--outline);
    border-top: 4px solid var(--primary); 
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.preloader__text {
    color: var(--ink);
    font-weight: 600;
}

/* =============== HEADER (transparan di hero) - SLIM HEADER FIX =============== */
.header{
  position:absolute; top:0; left:0; right:0; z-index:40;
  background:transparent; border-bottom:0;
  transition:background .3s, box-shadow .3s, color .3s;
}
.header .container{ width:min(1400px,98%); }
.nav{ 
  display:grid; 
  grid-template-columns:auto 1fr auto auto; 
  align-items:center; 
  gap:1rem; 
  padding:.35rem 0; /* Padding header ramping */
}

.brand{ display:inline-flex; align-items:center; gap:.5rem; }
.brand__logo{ 
    width:150px; 
    height:150px; 
    object-fit:contain; background:transparent; 
    border-radius:.5rem; margin-top:-15px; 
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); 
}
.brand__logo--sm{ width:120px; height:120px; }
.brand__name{ font-weight:800; letter-spacing:.3px; color:#fff; }

.menu{ display:inline-flex; gap:1.5rem; margin-left: auto; }
.menu a{ color:#e7ebff; text-decoration:none; font-weight:600; transition:color .2s, transform .1s; }
.menu a:hover{ color:var(--card); transform:translateY(-1px); }

.hamburger-button {
    display: none; 
    border: none;
    background: transparent;
    color: var(--card); /* Warna putih di hero state */
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    z-index: 50;
    transition: transform .2s;
}
.hamburger-button:hover { transform: scale(1.1); }
.hamburger-button i { font-size: 28px; width: auto; height: auto; }

#btn-wa-top{ display:none !important; }

/* =============== STICKY STATE (scroll) - White Background FIX =============== */
.header--sticky{
  position:fixed;
  background:var(--surface); /* Menggunakan variabel putih */
  color:var(--ink); /* Teks menjadi Dark Ink */
  box-shadow:0 8px 20px rgba(29,41,57,.1); /* Shadow yang sedikit lebih gelap */
}
.header--sticky .brand__name{ 
    color:var(--ink); /* Nama brand menjadi gelap */
}
.header--sticky .menu a{ 
    color:var(--ink-2); /* Link menu menjadi dark muted */
}
.header--sticky .menu a:hover{ 
    color:var(--ink); /* Hover menjadi dark ink */
}
.header--sticky .hamburger-button {
    /* Ikon hamburger menjadi dark ink di mobile */
    color: var(--ink); 
}
.header--sticky .nav{
  padding: 0.15rem 0; 
}
.header--sticky .brand__logo {
    width: 80px; 
    height: 80px;
    margin-top: -5px;
}
@media (max-width: 900px){
  .header--sticky .nav{ padding: 6px 0; }
  .header--sticky .brand__logo{ width: 60px; height: 60px; margin-top: -5px;}
  .header--sticky .brand__name{ font-size: 16px; }
}


/* ****************************************************** */
/* RESPONSIVE: MOBILE NAVIGATION (HAMBURGER MENU) FIX */
/* ****************************************************** */

@media (max-width: 900px) {
    .nav {
        grid-template-columns: auto 1fr auto auto; 
        gap: 0.75rem;
    }
    


    /* Ikon Hamburger muncul */
    .hamburger-button {
        display: block;
        color: var(--card); 
    }
    .header--sticky .hamburger-button {
        color: var(--card); 
    }
    
    /* Menu Utama disembunyikan di HP */
    .menu { display: none; }
    
    /* Overlay Menu (Sidebar) - FIX Kebocoran Menu */
    .mobile-menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(29,41,57, 0.7); 
        z-index: 90; 
        display: none;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    /* FIX KRITIS: Tampilkan overlay saat menu terbuka */
    body.menu-open .mobile-menu-overlay { 
        display: block; 
        opacity: 1; 
    }

    .mobile-menu {
        position: fixed; top: 0; right: 0;
        width: 80%; 
        max-width: 320px;
        height: 100%;
        background: var(--surface);
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
        box-shadow: -6px 0 15px rgba(29,41,57, 0.15);
        /* FIX: Tambahkan padding top untuk ruang tombol close */
        padding: 20px 24px; 
    }
    
    /* State AKTIF */
    body.menu-open .mobile-menu { transform: translateX(0); } 
    
    /* Styling Tombol Tutup (The FIX) */
    .mobile-menu .menu-close-btn {
        position: absolute; /* KRITIS: Posisi absolut */
        top: 10px; 
        right: 10px;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 10px; 
        color: var(--ink); /* Warna tombol close */
        font-size: 24px;
        z-index: 110; 
        opacity: 0.8;
    }
    .mobile-menu .menu-close-btn:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    /* Styling Konten Navigasi (Mencegah tumpang tindih dengan tombol tutup) */
    .mobile-menu #mobile-nav-content {
        padding-top: 40px; /* Jarak untuk tombol close di atas */
        display: flex;
        flex-direction: column;
    }
    
    /* Styling Daftar Menu */
    .mobile-menu .menu-item {
        border-bottom: 1px solid var(--card-brd);
        color: var(--ink);
        padding: 12px 0; 
        text-decoration: none;
        font-weight: 600;
        font-size: 1.15rem;
    }
    .mobile-menu .menu-item:last-child {
        border-bottom: none;
    }
    .mobile-menu .menu-item:hover {
        background: var(--bg-alt);
        padding-left: 5px; 
    }
}
/* FIX KRITIS: Pastikan mobile-menu-overlay tidak mengganggu di desktop */
@media (min-width: 901px) {
    .mobile-menu-overlay { display: none !important; }
}


/* =============== HERO FULL-BLEED + CTA CENTER =============== */
.hero{ padding:0; }
.hero--full{
  position:relative; width:100%;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  height:clamp(520px,78vh,640px);
}
@media (min-width:1200px){ .hero--full{ height:600px; } } 
@media (min-width:1600px){ .hero--full{ height:680px; } } 

.hero__slider{ position:relative; width:100%; height:100%; overflow:hidden; background:#1d2939; } 
.slider__track{ display:flex; width:100%; height:100%; transition:transform .6s ease-in-out; }
.slide{ min-width:100%; height:100%; }
.slide img{ width:100%; height:100%; object-fit:cover; transition: transform 6s linear; } 

.slider__track:hover .slide img { transform: scale(1.05); }

.slider__nav{ display: none !important; }
.slider__dots{ display: none !important; }

.hero__scrim{
  position:absolute; inset:0; z-index:1;
  /* Darker gradient overlay */
  background:linear-gradient(180deg,rgba(29,41,57,.15) 0%,rgba(29,41,57,.45) 50%,rgba(29,41,57,.8) 100%);
}

.hero__overlay{ position:absolute; inset:0; z-index:2; display:grid; align-items:center; text-align:center; }
.hero__overlay .container{ width:min(1400px,98%); }
.hero__content{ 
  max-width:900px; 
  margin-inline:auto; 
  transform:translateY(3vh); 
}
.hero__title{ margin:0 0 .5rem; 
  font-size:clamp(38px,6vw,60px); color:var(--card); font-weight:800; 
  text-shadow: 0 4px 10px rgba(0,0,0,0.2); 
}
.hero__subtitle{ margin:0 0 2rem; 
  color:#f0f8f9; opacity:.95; font-size: 1.15rem; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.ref-badge{ display: none !important; } 

/* =============== MAIN CONTENT (Putih) =============== */
.main-white{ background:var(--bg-alt); color:var(--ink); }
.section.section-white{ background:var(--surface); color:var(--ink); padding:64px 0; border-bottom: 1px solid var(--card-brd); }
.section__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; }
.section__title{ margin:0; font-size:clamp(24px,3vw,34px); color:var(--ink); font-weight: 700; }
.link-muted{ 
    color:var(--primary-700); 
    opacity:1; 
    text-decoration: none; 
    font-weight: 600;
    transition: color .2s, transform .2s; 
} 
.link-muted:hover{ color:var(--primary); text-decoration: underline; transform:translateX(3px); }

/* PERBAIKAN: Style untuk Tentang Kami */
.section-about-us { padding: 80px 0; }

#about-us-content {
  display: grid;
  gap: 2rem;
  padding-right: 1.5rem; 
}
.about__paragraph {
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
  font-size: 1.05rem; 
}
@media (min-width: 720px) {
  #about-us-content {
    grid-template-columns: 1fr 1fr; 
    border-left: 2px solid var(--outline); 
    padding-left: 2.5rem; 
    padding-right: 0;
    margin-left: -2.5rem; 
  }
  .section-about-us .section__title {
    margin-left: 0;
    padding-left: 2.5rem;
  }
}

/* =============== GRID & CARDS (Aesthetic) =============== */
.grid{ display:grid; gap:1.5rem; }
.cards-3{ grid-template-columns:repeat(1,1fr); }
@media (min-width:720px){ .cards-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cards-3{ grid-template-columns:repeat(3,1fr); } }

.card{
  position:relative;
  border:1px solid var(--card-brd);
  background:var(--card);
  border-radius:1.25rem; 
  padding:1.5rem; 
  box-shadow:var(--shadow-md);
  color:var(--ink);
  transition:transform .25s, box-shadow .3s, border-color .3s;
}
.card::after{ content:""; position:absolute; inset:0; border-radius:1.25rem; pointer-events:none;
  box-shadow:0 0 0 0 rgba(41,98,255,.0); transition:box-shadow .3s; } 
.card--hover:hover{ 
  transform:translateY(-5px); 
  box-shadow:var(--shadow-lg); 
  border-color:rgba(41,98,255,.5); 
}
.card--hover:hover::after{ box-shadow:0 0 0 4px rgba(41,98,255,.1); } 

.card__media img{ 
    width:100%; height:200px; object-fit:cover; 
    border-radius:1rem; 
    margin-bottom:1rem; 
    box-shadow:var(--shadow-sm); 
}
.card__title{ margin:.25rem 0 .5rem; font-size:1.15rem; font-weight:700; color:var(--ink); }
.card__text{ color:var(--ink-2); font-size:1rem; line-height:1.6; }
.card__actions{ margin-top:1.2rem; display:flex; gap:.75rem; }

/* REVERT: Ikon Why Us (Large Icon) */
.icon {
  width: 70px; 
  height: 70px; 
  color: var(--primary); 
  margin-bottom: 1rem;
  display: grid; 
  place-items: center;
  border-radius: 50%; 
  background: rgba(41,98,255, 0.08); 
  transition: all .2s ease;
}

.icon i {
  width: 40px; 
  height: 40px;
  font-size: 36px;
}
.card--hover:hover .icon {
    transform: rotate(5deg) scale(1.05); 
    background: rgba(41,98,255, 0.15);
}

/* =============== FAQ (Clean & Primary Highlight) =============== */
.accordion{ display:grid; gap:1rem; } 
.accordion__item{
  border:1px solid var(--card-brd); 
  border-radius:.85rem; 
  padding:1rem 1.2rem; 
  background:var(--card); 
  box-shadow:var(--shadow-sm); 
  transition: box-shadow 0.3s, border-color 0.3s;
}
.accordion__item[open] {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.accordion__item summary{ 
    list-style:none; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content: space-between; 
    gap:1rem; 
    font-weight:600; 
    color: var(--ink);
    font-size: 1.05rem;
}
.accordion__item summary::-webkit-details-marker{ display:none; }

/* Styling Ikon Dinamis di FAQ */
.accordion__item summary i {
    color: var(--primary);
    font-size: 20px; 
    width: auto;
    height: auto;
    transition: transform 0.2s;
}

/* Ikon Chevron untuk FAQ */
.accordion__item summary::after {
    content: "\f078"; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--primary-700);
    transition: transform 0.2s;
}
.accordion__item[open] summary::after {
    transform: rotate(180deg);
}


.accordion__content{ 
    color:var(--ink-2); 
    padding-top:12px; 
    padding-bottom: 5px;
    margin-top: 10px;
    border-top: 1px solid var(--card-brd); 
}


/* =============== TESTIMONIALS (Yellow Accent Quote) =============== */
.card--quote{
    border-left: 4px solid var(--secondary-accent); /* Highlight Yellow */
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: var(--bg-alt); 
    box-shadow: none;
}
.card--quote blockquote{ 
    margin:0 0 .8rem; 
    color:var(--ink); 
    font-weight:500; 
    font-style: italic;
    font-size: 1.1rem;
}
.quote__meta{ color:var(--ink-2); display:flex; gap:.5rem; align-items:baseline; }

.t-slider{ position:relative; overflow:hidden; }
.t-track{ display:flex; transition:transform .4s cubic-bezier(0.25, 1, 0.5, 1); } 
.t-slide{ min-width:100%; padding:.5rem; }

.t-slider .t-dots {
  display: none; 
}

/* Footer gelap + map + socials (Dark Blue/Navy) FIX */
.footer{ 
    --footer-bg: #1d2939; /* Dark Blue/Navy Footer */
    border-top:1px solid rgba(255,255,255,.06); 
    background:var(--footer-bg); 
    color:var(--text); 
    animation: none; 
    color: #f0f8f9; /* Text color in dark footer */
}

.footer__grid{ display:grid; gap:2.5rem; padding:3rem 0; grid-template-columns:repeat(1,1fr); }
@media (min-width: 720px){ 
    .footer__grid{ grid-template-columns:repeat(3,1fr); }
}

.footer__title{ margin:0 0 .8rem; color:var(--secondary-accent); /* Judul Footer Yellow/Accent */ font-weight: 700; } 
.footer__bottom{ 
    position: relative;
    z-index: 1; 
    border-top:1px solid rgba(255,255,255,.15); 
    padding:1rem 0; 
    color:#a1c7c4; 
    background: var(--footer-bg); 
    font-size: 0.9rem;
}
.footer .brand__name { color: #fff; }

.footer__map iframe {
    width: 100%;
    height: 200px;
    border-radius: 0.75rem;
    margin-top: 1rem;
    border: 0;
}
.link--map-cta {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--secondary-accent); /* Link Peta Yellow/Accent */
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.link--map-cta:hover {
    color: #fff;
    text-decoration: underline;
}

/* Socials (Vertical Dark Blue Buttons) */
.socials{ 
    display: grid; 
    gap: .75rem; 
    margin-top:.75rem; 
    grid-template-columns: 1fr; 
}
.social--block {
    display: flex; 
    width: 100%; 
    padding: .8rem 1.2rem; 
    margin-bottom: 0; 
    /* Background default dark blue yang terang */
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: .5rem; 
    align-items: center;
    gap: 12px; 
    color: #fff;
    font-weight: 500;
    transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
    text-decoration: none; 
}
.social--block:hover {
    /* Efek hover: Full Primary Blue */
    background: var(--primary); 
    border-color: var(--primary);
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(41,98,255, 0.4);
    color: #fff; 
}

.social--block i {
    width: 20px; 
    height: 20px;
    font-size: 20px;
    /* Ikon default warna Kuning/Secondary Accent */
    color: var(--secondary-accent); 
    transition: color .2s;
}

.social--block:hover i {
    color: #fff; /* Ikon berubah menjadi putih saat hover */
}