/* ============================================================
   LAYOUT — Strip atas, header, menu mobile, hero, section,
   page head, footer
   ============================================================ */

/* ---------- Strip atas ---------- */
.topstrip{background:var(--green-dark); color:#fff; font-size:13px; padding:6px 0;}
.topstrip .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.topstrip span{opacity:.9;}

/* ---------- Header ---------- */
header.site{background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; transition:box-shadow .2s ease;}
header.site.scrolled{box-shadow:0 4px 16px rgba(0,0,0,.07);}
.header-in{display:flex; align-items:center; gap:16px; padding:14px 0;}
.logo{width:46px; height:46px; object-fit:contain; flex:none;}
.brand b{display:block; font-size:16px; line-height:1.25;}
.brand small{color:var(--ink2); font-size:13px;}
nav.main{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap;}
nav.main a{padding:9px 14px; border-radius:var(--radius); color:var(--ink); font-size:15px; font-weight:500; transition:background .15s ease, color .15s ease;}
nav.main a:hover{background:var(--soft2);}
nav.main a.active{background:var(--green-soft); color:var(--green-dark); font-weight:600;}

/* ---------- Tombol hamburger (mobile) ---------- */
.nav-toggle{display:none; margin-left:auto; background:#fff; border:1px solid var(--border); border-radius:var(--radius); width:44px; height:44px; padding:0; flex:none;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Hero (beranda) ---------- */
.hero{background:linear-gradient(135deg,#0A5697 0%,#0D6FC2 55%,#2F86CF 100%); color:#fff; padding:64px 0; position:relative; overflow:hidden;}
/* Hiasan lingkaran lembut di latar hero */
.hero::before{content:""; position:absolute; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); top:-180px; right:-100px;}
.hero::after{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); bottom:-160px; right:200px;}
.hero .wrap{position:relative; z-index:1;}
.hero .kicker{display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:4px 12px; border-radius:999px; font-size:13px; margin-bottom:16px;}
.hero h1{font-size:38px; line-height:1.2; max-width:640px; letter-spacing:-.5px;}
.hero p{margin-top:14px; max-width:560px; color:rgba(255,255,255,.85);}
.hero .actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}

/* Animasi masuk konten hero */
.hero .wrap > *{animation:heroFadeUp .6s ease both;}
.hero .wrap > *:nth-child(2){animation-delay:.08s;}
.hero .wrap > *:nth-child(3){animation-delay:.16s;}
.hero .wrap > *:nth-child(4){animation-delay:.24s;}
@keyframes heroFadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* ---------- Section ---------- */
section.block{padding:56px 0;}
section.block.alt{background:var(--soft);}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap;}
.sec-head h2{font-size:26px; letter-spacing:-.3px;}
.sec-head .sub{color:var(--ink2); margin-top:4px; font-size:15px;}
.sec-head a.more{font-weight:600; font-size:15px; white-space:nowrap; transition:opacity .15s ease;}
.sec-head a.more:hover{opacity:.75;}

/* ---------- Judul halaman ---------- */
.page-head{background:var(--soft); border-bottom:1px solid var(--border); padding:40px 0;}
.page-head h1{font-size:30px; letter-spacing:-.4px;}
.page-head p{color:var(--ink2); margin-top:6px;}

/* ---------- Footer ---------- */
footer.site{background:#12304F; color:rgba(255,255,255,.8); padding:48px 0 32px;}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px;}
footer h4{color:#fff; font-size:15px; margin-bottom:12px;}
footer p, footer a{font-size:14px; color:rgba(255,255,255,.75); line-height:1.7;}
footer a:hover{color:#fff;}
footer .bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:32px; padding-top:18px; font-size:13px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
footer ul{list-style:none;}
footer li{margin-bottom:6px;}

/* ---------- Responsif ---------- */
@media (max-width:900px){
  footer .cols{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
}
@media (max-width:700px){
  /* Menu berubah jadi hamburger + dropdown */
  .nav-toggle{display:block;}
  nav.main{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); flex-direction:column; padding:8px 16px 16px; gap:4px; box-shadow:0 16px 28px rgba(0,0,0,.08);}
  nav.main.open{display:flex; animation:navDrop .2s ease;}
  nav.main a{padding:12px 14px;}
  @keyframes navDrop{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
}
@media (max-width:560px){
  section.block{padding:40px 0;}
  .hero{padding:44px 0;}
}
@media (prefers-reduced-motion: reduce){
  .hero .wrap > *{animation:none;}
  nav.main.open{animation:none;}
}

/* ---------- Hero dua kolom: teks kiri, foto banner kanan ---------- */
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
.hero-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; border:4px solid rgba(255,255,255,.22); box-shadow:0 22px 44px rgba(0,0,0,.28);}
/* Placeholder saat foto banner belum diunggah dari Panel Admin */
.hero-ph{aspect-ratio:4/3; border-radius:16px; border:1px dashed rgba(255,255,255,.35); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:64px;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:28px;}
  .hero-media{max-width:440px;}
}

/* ---------- Logo di footer (di samping alamat) ---------- */
.foot-addr{display:flex; align-items:flex-start; gap:16px;}
.foot-logos{display:flex; align-items:center; gap:10px; flex:none; padding-top:4px;}
.foot-logos img{height:52px; width:auto; object-fit:contain;}
.foot-lines{display:flex; flex-direction:column; gap:8px; min-width:0;}
.foot-lines p{display:flex; align-items:flex-start; gap:8px; margin:0;}
.foot-lines svg{width:15px; height:15px; flex:none; margin-top:3px; fill:currentColor; opacity:.85;}
.foot-lines a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.foot-lines a:hover{opacity:.85;}