:root{
    --deep:      #051428;
    --trench:    #071c38;
    --navy:      #0c3466;
    --ocean:     #145a9e;
    --aqua:      #2f9bc9;
    --foam:      #a9e6df;
    --pearl:     #eef8fb;
    --gleam:     #f2cf8e;
    --ink:       #06172c;
    --line:      rgba(169,230,223,0.18);
    --shadow:    0 20px 60px rgba(2,12,26,0.45);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Manrope', sans-serif;
    background:var(--deep);
    color:var(--pearl);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  img,svg{ display:block; max-width:100%; }
  ::selection{ background:var(--gleam); color:var(--ink); }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gleam); font-weight:700;
  }
  .eyebrow::before{ content:""; width:26px; height:1px; background:var(--gleam); display:inline-block; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }


  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:18px 0;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  header.nav.scrolled{
    background:rgba(5,20,40,0.88);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding:12px 0; box-shadow:0 10px 30px rgba(0,0,0,0.25);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:700; font-size:1.2rem; letter-spacing:0.03em; }
  .logo .mark{
    width:32px; height:32px; border-radius:50%; flex:none; position:relative;
    background:conic-gradient(from 200deg, var(--aqua), var(--foam), var(--gleam), var(--aqua));
  }
  .logo .mark::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--deep); }
  .logo small{ display:block; font-family:'Manrope',sans-serif; font-weight:600; font-size:0.6rem; letter-spacing:0.1em; color:var(--foam); text-transform:uppercase; }
  .logo-img{
    width:34px; height:34px; border-radius:50%; flex:none; object-fit:cover;
    box-shadow:0 0 0 2px rgba(169,230,223,0.35), 0 4px 14px rgba(20,90,158,0.5);
  }
  footer .logo-img{ width:40px; height:40px; }

  nav.links{ display:flex; gap:6px; align-items:center; }
  nav.links a{
    padding:9px 16px; font-size:0.82rem; font-weight:600; letter-spacing:0.01em;
    color:var(--foam); border-radius:999px; transition:color .3s ease, background .3s ease;
  }
  nav.links a:hover{ color:var(--pearl); background:rgba(169,230,223,0.08); }
  nav.links a.active{ color:var(--ink); background:var(--gleam); }
  nav.links a.cta{ background:var(--aqua); color:var(--pearl); box-shadow:0 6px 20px rgba(47,155,201,0.4); }
  nav.links a.cta:hover{ background:var(--ocean); }

  .burger{
    display:none; width:40px; height:40px; border-radius:50%;
    background:rgba(169,230,223,0.1); align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
  }
  .burger span{ width:18px; height:2px; background:var(--pearl); border-radius:2px; transition:.3s; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


  #beranda{
    position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
    background:
      radial-gradient(ellipse 120% 60% at 50% 0%, #1c6ba8 0%, transparent 60%),
      linear-gradient(180deg, #0d3f74 0%, #082347 55%, var(--deep) 100%);
  }
  .sun-glow{
    position:absolute; top:-10%; left:50%; transform:translateX(-50%);
    width:900px; height:900px;
    background:radial-gradient(circle, rgba(242,207,142,0.22) 0%, rgba(242,207,142,0) 65%);
    filter:blur(10px); pointer-events:none;
  }

  .panda-motif{
    position:absolute; top:70px; left:50%; transform:translateX(-50%);
    width:180px; height:90px; pointer-events:none; opacity:0.9; z-index:1;
  }
  .panda-motif .ear{
    position:absolute; top:0; width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(6,23,44,0.85) 72%);
    box-shadow:0 0 0 3px rgba(242,207,142,0.35);
  }
  .panda-motif .ear.l{ left:6px; }
  .panda-motif .ear.r{ right:6px; }

  .bubbles{ position:absolute; inset:0; pointer-events:none; }
  .bubble{
    position:absolute; bottom:-40px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(169,230,223,0.05));
    border:1px solid rgba(255,255,255,0.25); animation:rise linear infinite;
  }
  @keyframes rise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.8; } 90%{ opacity:0.5; }
    100%{ transform:translateY(-115vh) translateX(20px); opacity:0; }
  }

  .hero-inner{ position:relative; z-index:2; width:100%; text-align:center; padding-top:130px; }
  .hero-inner .eyebrow{ justify-content:center; }
  .hero-title{
    font-size:clamp(2.7rem, 8vw, 6rem); line-height:0.98; color:var(--pearl);
    text-shadow:0 10px 50px rgba(0,0,0,0.35); margin-top:18px;
  }
  .hero-title em{ font-style:italic; color:var(--gleam); }
  .hero-sub{ max-width:560px; margin:22px auto 0; font-size:1.02rem; line-height:1.75; color:rgba(238,248,251,0.82); }


  .hero-carousel{ position:relative; z-index:2; width:100%; }
  .hero-viewport{ overflow:hidden; }
  .hero-track{ display:flex; align-items:flex-start; transition:transform .65s cubic-bezier(.65,0,.35,1); will-change:transform; }
  .hero-slide{ flex:0 0 100%; max-width:100%; padding-bottom:10px; position:relative; min-height:660px; }
  @media (max-width:900px){ .hero-slide{ min-height:auto; } }

  .hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.22);
    display:flex; align-items:center; justify-content:center; transition:background .3s ease, transform .3s ease;
    backdrop-filter:blur(6px);
  }
  .hero-arrow:hover{ background:rgba(255,255,255,0.16); transform:translateY(-52%); }
  .hero-arrow svg{ width:18px; height:18px; stroke:var(--pearl); fill:none; stroke-width:2; }
  .hero-arrow.prev{ left:14px; }
  .hero-arrow.next{ right:14px; }

  .hero-dots{ display:flex; gap:10px; justify-content:center; margin-top:36px; position:relative; z-index:4; }
  .hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.28); border:1px solid rgba(255,255,255,0.4); transition:all .3s ease; cursor:pointer; padding:0; }
  .hero-dot.active{ width:26px; border-radius:6px; background:var(--gleam); border-color:var(--gleam); }


  .info-slide{ padding-top:38px; padding-bottom:6px; }
  .info-card{
    max-width:820px; margin:0 auto; text-align:left;
    display:grid; grid-template-columns:380px 1fr; gap:30px; align-items:center;
    background:linear-gradient(155deg, rgba(255,255,255,0.07), rgba(7,28,56,0.35));
    border:1px solid var(--line); border-radius:26px; padding:32px 40px;
    backdrop-filter:blur(8px); box-shadow:var(--shadow);
  }
  .info-card-media{
    position:relative;
    display:flex; align-items:flex-end; justify-content:center;
    z-index:2;
    overflow:hidden; /* masker: foto disembunyikan di bawah sebelum naik */
  }
  /* Posisi awal foto diatur oleh JS (halaman.js) lewat inline style
     supaya arah animasi "naik dari bawah" pasti benar dan tidak
     tercampur animasi keluar/masuk slide lain. Baris di bawah ini
     cuma fallback kalau JS belum sempat jalan. */
  .info-card-media img{
    opacity:0;
    transform:translateY(120%);
  }
  .info-card-media img{
    width:100%; height:100%; object-fit:contain; object-position:bottom center;
    filter:drop-shadow(0 18px 26px rgba(2,12,26,0.55));
  }

  
  .photo-2, .photo-3, .photo-4, .photo-5{
    transform:scale(var(--photo-scale, 1));
    transform-origin:center bottom; 
  }

  .photo-2{ width:380px; height:440px; margin:0 0 -30px -20px; --photo-scale:1.2; }
  .photo-4{ width:380px; height:440px; margin:0 0 -30px -30px; --photo-scale:1.3; }
  .photo-5{ width:380px; height:440px; margin:0 0 -30px -20px; --photo-scale:1.2; }

  .info-card-body .eyebrow{ justify-content:flex-start; }
  .info-card h3{ font-size:1.4rem; color:var(--pearl); margin-top:14px; line-height:1.25; }
  .info-card .meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
  .info-pill{
    display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
    background:rgba(242,207,142,0.1); border:1px solid rgba(242,207,142,0.32);
    font-size:0.76rem; font-weight:700; color:var(--gleam); letter-spacing:0.02em;
  }
  .info-pill svg{ width:13px; height:13px; stroke:var(--gleam); fill:none; stroke-width:2; }
  .info-card p{ margin-top:16px; font-size:0.92rem; line-height:1.7; color:rgba(238,248,251,0.82); }
  .info-card .btn{ margin-top:20px; padding:12px 24px; font-size:0.82rem; }
  @media (max-width:750px){
    .info-card{ grid-template-columns:1fr; text-align:center; padding:30px 26px; }
    .photo-2, .photo-3, .photo-4, .photo-5{ width:280px; height:320px; margin:0 auto -30px; }
    .info-card-body .eyebrow{ justify-content:center; }
    .info-card .meta-row{ justify-content:center; }
  }
  @media (max-width:600px){
    .hero-arrow{ display:none; }
  }

  
  .countdown{
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
    margin:40px auto 0; max-width:520px;
  }
  .cd-box{
    background:rgba(255,255,255,0.05); border:1px solid var(--line);
    border-radius:16px; padding:16px 20px; min-width:78px; backdrop-filter:blur(6px);
  }
  .cd-box b{ display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--gleam); }
  .cd-box span{ font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(238,248,251,0.6); }
  .cd-label{ margin-top:14px; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--foam); }

  .hero-actions{ display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap; }
  .btn{
    padding:15px 30px; border-radius:999px; font-weight:700; font-size:0.88rem; letter-spacing:0.02em;
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-primary{ background:var(--gleam); color:var(--ink); box-shadow:0 10px 30px rgba(242,207,142,0.35); }
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(242,207,142,0.5); }
  .btn-ghost{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.3); color:var(--pearl); }
  .btn-ghost:hover{ background:rgba(255,255,255,0.16); transform:translateY(-3px); }

 
  .stat-strip{
    position:relative; z-index:2; display:flex; justify-content:center; gap:60px;
    margin-top:64px; flex-wrap:wrap;
  }
  .stat-strip .item{ text-align:center; }
  .stat-strip b{ font-family:'Fraunces',serif; font-size:2.4rem; color:var(--pearl); display:block; }
  .stat-strip span{ font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--foam); }

  .wave-divider{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:3; }
  .wave-divider svg{ width:100%; height:auto; display:block; }


  section{ position:relative; padding:130px 0; }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
  .section-head h2{ font-size:clamp(2rem, 4.5vw, 3rem); margin-top:16px; color:var(--pearl); }
  .section-head p{ margin-top:16px; color:rgba(238,248,251,0.7); line-height:1.7; font-size:1rem; }

  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.show{ opacity:1; transform:translateY(0); }

 
  .nachia-bg-fixed{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(5,20,40,0.88) 0%, rgba(7,30,56,0.78) 40%, rgba(8,32,65,0.88) 100%),
      url('banner-foto/nachia-bg.jpg') center center / cover no-repeat;
  }
  #nachia{ background:transparent; position:relative; }

  .nachia-video-wrap{
    position:relative; max-width:820px; margin:36px auto 0;
    z-index:2;
  }
  .nachia-video-frame{
    border-radius:26px; overflow:hidden;
    box-shadow:var(--shadow); border:1px solid var(--line);
  }
  .nachia-video-wrap video{ display:block; width:100%; height:auto; aspect-ratio:22/9; object-fit:cover; background:#000; }
  .nachia-social-bar{
    position:absolute; left:50%; bottom:0; transform:translate(-50%, 45%);
    display:flex; gap:8px; padding:9px; border-radius:14px;
    background:#f3f0f7; box-shadow:0 14px 34px rgba(2,12,26,0.35);
  }
  .nachia-social-bar a{
    width:42px; height:42px; border-radius:9px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--navy); transition:.25s;
  }
  .nachia-social-bar a:hover{ background:var(--ocean); transform:translateY(-3px); }
  .nachia-social-bar svg{ width:19px; height:19px; stroke:#fff; fill:none; }
  .nachia-social-bar a.badge{
    font-family:'Manrope', sans-serif; font-weight:800; font-size:0.68rem;
    letter-spacing:0.02em; color:#fff;
  }
  @media(max-width:560px){
    .nachia-social-bar{ gap:5px; padding:7px; }
    .nachia-social-bar a{ width:34px; height:34px; }
    .nachia-social-bar svg{ width:16px; height:16px; }
    .nachia-social-bar a.badge{ font-size:0.58rem; }
  }

  .profile-card{
    display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:center;
    background:linear-gradient(155deg, rgba(20,90,158,0.22), rgba(7,28,56,0.4));
    border:1px solid var(--line); border-radius:28px; padding:48px; box-shadow:var(--shadow);
    margin-bottom:36px;
  }
  .avatar-ring{
    width:210px; height:210px; margin:0 auto; border-radius:50%; position:relative;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5), transparent 40%),
      conic-gradient(from 210deg, var(--navy), var(--aqua), var(--foam), var(--gleam), var(--navy));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px rgba(20,90,158,0.4);
  }
  .avatar-ring::before{ content:""; position:absolute; inset:12px; border-radius:50%; background:var(--deep); }
  .avatar-ring .ears{ position:absolute; top:-6px; width:100%; }
  .avatar-ring .ears i{
    position:absolute; top:0; width:46px; height:46px; border-radius:50%;
    background:var(--deep); box-shadow:0 0 0 4px rgba(242,207,142,0.4);
  }
  .avatar-ring .ears i.l{ left:6px; } .avatar-ring .ears i.r{ right:6px; }
  .avatar-ring span{ position:relative; font-family:'Fraunces',serif; font-size:2.2rem; font-weight:700; color:var(--gleam); }
  .avatar-ring img{
    position:relative; width:calc(100% - 24px); height:calc(100% - 24px);
    border-radius:50%; object-fit:cover; object-position:center 18%;
  }

  .profile-info .tag{ color:var(--aqua); font-weight:700; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; display:block; }
  .profile-info h3{ font-size:1.8rem; color:var(--pearl); margin-bottom:14px; }
  .profile-info p{ color:rgba(238,248,251,0.78); line-height:1.85; margin-bottom:18px; font-size:0.96rem; }
  .quote-tag{
    display:inline-block; margin-top:4px; padding:10px 18px; border-radius:999px;
    background:rgba(242,207,142,0.1); border:1px solid rgba(242,207,142,0.35);
    font-size:0.85rem; color:var(--gleam); font-style:italic;
  }

  .biodata{
    background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(7,28,56,0.5));
    border:1px solid var(--line); border-radius:24px; padding:40px; margin-bottom:36px;
  }
  .biodata h4{ font-size:1.1rem; color:var(--pearl); margin-bottom:22px; }
  .biodata h4 span{ color:var(--gleam); }
  .bio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 40px; }
  .bio-row{
    display:flex; justify-content:space-between; gap:14px; padding:13px 0;
    border-bottom:1px dashed var(--line); font-size:0.88rem;
  }
  .bio-row span{ color:rgba(238,248,251,0.55); }
  .bio-row b{ color:var(--foam); font-weight:700; text-align:right; }

  .teaser-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
  .teaser{
    display:flex; flex-direction:column; gap:10px; padding:26px;
    background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:18px;
    transition:transform .3s ease, background .3s ease, border-color .3s ease;
  }
  .teaser:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.06); border-color:rgba(169,230,223,0.4); }
  .teaser .ic{ width:38px; height:38px; border-radius:10px; background:rgba(242,207,142,0.14); display:flex; align-items:center; justify-content:center; }
  .teaser .ic svg{ width:18px; height:18px; stroke:var(--gleam); fill:none; }
  .teaser h5{ font-size:1.02rem; color:var(--pearl); }
  .teaser p{ font-size:0.83rem; color:rgba(238,248,251,0.6); line-height:1.6; }
  .teaser .go{ font-size:0.76rem; color:var(--aqua); font-weight:700; letter-spacing:0.03em; }


  #jadwal{ background:linear-gradient(180deg, #082041 0%, #071c38 100%); }
  .sched-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
  .sched-card{
    background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(7,28,56,0.5));
    border:1px solid var(--line); border-radius:22px; padding:32px;
  }
  .sched-card .ic{
    width:46px; height:46px; border-radius:12px; margin-bottom:18px;
    background:rgba(47,155,201,0.16); display:flex; align-items:center; justify-content:center;
  }
  .sched-card .ic svg{ width:22px; height:22px; stroke:var(--aqua); fill:none; }
  .sched-card h4{ font-size:1.15rem; color:var(--pearl); margin-bottom:8px; }
  .sched-card p{ font-size:0.86rem; color:rgba(238,248,251,0.62); line-height:1.65; margin-bottom:16px; }
  .sched-card a{ font-size:0.8rem; font-weight:700; color:var(--gleam); }
  .sched-note{
    margin-top:36px; text-align:center; font-size:0.85rem; color:rgba(238,248,251,0.55);
    padding:18px; border:1px dashed var(--line); border-radius:16px;
  }
  .sched-note a{ color:var(--gleam); font-weight:700; }


  #yokinachia{ background:linear-gradient(180deg, #071c38 0%, #061933 100%); }
  .fb-card{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
    background:linear-gradient(155deg, rgba(20,90,158,0.2), rgba(7,28,56,0.4));
    border:1px solid var(--line); border-radius:28px; padding:48px; box-shadow:var(--shadow);
    margin-bottom:56px;
  }
  .fb-card p{ color:rgba(238,248,251,0.78); line-height:1.85; font-size:0.96rem; margin-bottom:10px; }
  .fb-badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
    background:rgba(169,230,223,0.1); border:1px solid var(--line); font-size:0.76rem;
    letter-spacing:0.04em; color:var(--foam); margin-bottom:18px;
  }
  .fb-badge i{ width:8px; height:8px; border-radius:50%; background:var(--gleam); }

  .wave-art{ position:relative; height:220px; border-radius:22px; overflow:hidden; }
  .wave-art svg{ position:absolute; inset:0; width:100%; height:100%; }


  #gabung{
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(47,155,201,0.12), transparent 60%),
      linear-gradient(180deg, #061933 0%, var(--trench) 40%, #030d1c 100%);
    overflow:hidden;
  }
  .particles{ position:absolute; inset:0; pointer-events:none; }
  .dot{
    position:absolute; width:4px; height:4px; border-radius:50%; background:var(--gleam);
    box-shadow:0 0 10px 2px rgba(242,207,142,0.7); animation:glow 4s ease-in-out infinite;
  }
  @keyframes glow{ 0%,100%{ opacity:0.15; transform:scale(1);} 50%{ opacity:0.9; transform:scale(1.6);} }

  .social-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; position:relative; z-index:2; }
  .social-card{
    background:linear-gradient(160deg, rgba(20,90,158,0.26), rgba(6,23,44,0.6));
    border:1px solid var(--line); border-radius:24px; padding:38px;
  }
  .social-card h3{ font-size:1.3rem; color:var(--pearl); margin-bottom:6px; }
  .social-card .sub{ font-size:0.82rem; color:rgba(238,248,251,0.55); margin-bottom:24px; }
  .social-list{ display:flex; flex-direction:column; gap:10px; }
  .social-list a{
    display:flex; align-items:center; gap:12px; padding:13px 16px;
    background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:14px;
    font-size:0.87rem; font-weight:600; transition:.3s;
  }
  .social-list a:hover{ background:var(--aqua); transform:translateX(4px); }
  .social-list svg{ width:17px; height:17px; stroke:var(--pearl); fill:none; flex:none; }

  footer{ background:#030d1c; padding:44px 0 30px; text-align:center; border-top:1px solid var(--line); }
  footer .logo{ justify-content:center; margin-bottom:14px; }
  footer p{ font-size:0.78rem; color:rgba(238,248,251,0.45); line-height:1.7; }
  footer .fandom{ color:var(--gleam); font-weight:700; }

  @media (max-width: 900px){
    .profile-card, .fb-card{ grid-template-columns:1fr; text-align:center; padding:36px 26px; }
    .social-grid{ grid-template-columns:1fr; }
    .bio-row b{ text-align:right; }
    nav.links{
      position:fixed; top:70px; right:20px; left:20px; flex-direction:column; align-items:stretch;
      background:rgba(5,20,40,0.97); border:1px solid var(--line); border-radius:20px;
      padding:14px; display:none; backdrop-filter:blur(14px);
    }
    nav.links.open{ display:flex; }
    nav.links a{ text-align:center; padding:12px; }
    .burger{ display:flex; }
  }
  @media (max-width:480px){
    section{ padding:96px 0; }
    .wrap{ padding:0 20px; }
    .stat-strip{ gap:34px; }
    .biodata{ padding:26px; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }
.org-tree-wrap{
  margin-top:30px; background:linear-gradient(155deg, rgba(20,90,158,0.2), rgba(7,28,56,0.4));
  border:1px solid var(--line); border-radius:28px; padding:40px 32px; box-shadow:var(--shadow);
}
.org-tree-wrap .ot-head{
  position:relative; text-align:center; margin-bottom:0; cursor:pointer; padding:0 54px 0 0; user-select:none;
}
.org-tree-wrap .ot-head h3{font-size:clamp(1.3rem,3vw,1.6rem); color:var(--pearl); margin:0 0 8px;}
.org-tree-wrap .ot-head p{font-family:'Manrope',sans-serif; color:rgba(238,248,251,0.6); font-size:.9rem; margin:0;}
.ot-toggle-icon{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.org-tree-wrap .ot-head:hover .ot-toggle-icon{ background:rgba(255,255,255,0.12); border-color:rgba(169,230,223,0.4); }
.ot-toggle-icon::before{
  content:""; width:9px; height:9px; border-right:2px solid var(--gleam); border-bottom:2px solid var(--gleam);
  transform:rotate(45deg); transition:transform .3s ease; margin-top:-4px;
}
.org-tree-wrap.ot-collapsed .ot-toggle-icon::before{ transform:rotate(-135deg); margin-top:4px; }
 
.ot-body{ overflow:hidden; max-height:6000px; transition:max-height .45s ease, opacity .35s ease, margin-top .35s ease; margin-top:24px; opacity:1; }
.org-tree-wrap.ot-collapsed .ot-body{ max-height:0 !important; opacity:0; margin-top:0; }
 
.ot-controls{display:flex;justify-content:center;gap:10px;margin:0 0 26px;}
.ot-controls button{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.78rem;
  border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); color:var(--pearl);
  padding:8px 18px; border-radius:999px; cursor:pointer; transition:.2s;
}
.ot-controls button:hover{background:rgba(255,255,255,0.16); transform:translateY(-2px);}
 
/* ---------- Pohon HORIZONTAL (melebar ke samping) ---------- */
/* Bungkus scroll: karena melebar, kotak ini scroll ke samping saat kontennya lebih lebar dari layar */
.org-tree{
  overflow-x:auto; overflow-y:hidden;
  padding:6px 10px 34px;
}
.org-tree::-webkit-scrollbar{ height:8px; }
.org-tree::-webkit-scrollbar-track{ background:rgba(255,255,255,0.04); border-radius:999px; }
.org-tree::-webkit-scrollbar-thumb{ background:rgba(169,230,223,0.35); border-radius:999px; }
 
.org-tree ul{
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:28px; position:relative;
  width:max-content; margin:0 auto;
}
.org-tree > ul{ padding-top:0; width:max-content; }
 
.org-tree li{
  list-style:none; position:relative;
  padding:28px 14px 0 14px;
  text-align:center;
}
.org-tree > ul > li{ padding-top:0; }
 
/* garis penghubung antar-saudara (horizontal) + turunan ke kotak (vertikal) */
.org-tree li::before,
.org-tree li::after{
  content:"";
  position:absolute; top:0; right:50%;
  width:50%; height:28px;
  border-top:2px dashed var(--line);
}
.org-tree li::after{
  right:auto; left:50%;
  border-left:2px dashed var(--line);
}
.org-tree li:only-child::before,
.org-tree li:only-child::after{ display:none; }
.org-tree li:only-child{ padding-top:0; }
.org-tree li:first-child::before,
.org-tree li:last-child::after{ border:0 none; }
.org-tree li:last-child::before{ border-right:2px dashed var(--line); border-radius:0 8px 0 0; }
.org-tree li:first-child::after{ border-radius:8px 0 0 0; }
 
/* garis turun dari kotak induk menuju baris anak-anaknya */
.org-tree ul ul{ position:relative; }
.org-tree ul ul::before{
  content:"";
  position:absolute; top:0; left:50%;
  width:0; height:28px;
  border-left:2px dashed var(--line);
}
 
/* ---------- Kotak / node ---------- */
.ot-node summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; flex-direction:column; align-items:center; gap:5px;
  min-width:130px; max-width:210px;
  background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:14px;
  padding:13px 16px 11px; font-family:'Manrope',sans-serif; transition:.2s;
  position:relative; z-index:1;
}
.ot-node summary::-webkit-details-marker{display:none;}
.ot-node summary:hover{border-color:rgba(169,230,223,0.4); background:rgba(255,255,255,0.06);}
 
/* panah buka/tutup di bawah kotak */
.ot-node summary::after{
  content:"›"; display:block; font-size:1rem; font-weight:800; color:var(--gleam);
  transform:rotate(90deg); transition:transform .2s; line-height:1; margin-top:1px;
}
.ot-node[open]>summary::after{transform:rotate(-90deg);}
 
.ot-node.ot-ketum>summary{background:linear-gradient(135deg,var(--ocean),var(--navy)); border-color:var(--ocean);}
.ot-node.ot-waketum>summary{background:rgba(20,90,158,0.35); border-color:var(--aqua);}
.ot-node.ot-ketum>summary .ot-name,.ot-node.ot-waketum>summary .ot-name{color:var(--pearl);}
.ot-node.ot-ketum>summary::after,.ot-node.ot-waketum>summary::after{color:var(--gleam);}
.ot-node.ot-ketum>summary .ot-role,.ot-node.ot-waketum>summary .ot-role{background:rgba(255,255,255,.18); color:var(--gleam);}
.ot-node.ot-ketum>summary .ot-ig,.ot-node.ot-waketum>summary .ot-ig{color:var(--foam);}
 
.ot-role{font-weight:800;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gleam);background:rgba(242,207,142,0.14);padding:3px 9px;border-radius:999px;white-space:nowrap;}
.ot-name{font-weight:700;font-size:.88rem;color:var(--pearl);}
.ot-ig{font-size:.76rem;color:var(--aqua);font-weight:500;}
.ot-count{font-size:.66rem;color:var(--foam);background:rgba(169,230,223,0.1);padding:2px 8px;border-radius:999px;font-weight:700;white-space:nowrap;}
 
/* ---------- Kotak anggota / info (bukan details, tanpa panah) ---------- */
.ot-member{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  min-width:110px; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:14px;
  padding:11px 14px; position:relative; z-index:1;
}
.ot-empty{
  display:inline-flex; align-items:center; min-height:20px;
  font-size:.8rem; color:rgba(238,248,251,0.5); font-style:italic;
  background:rgba(255,255,255,0.03); border:1px dashed var(--line); border-radius:14px;
  padding:10px 16px; position:relative; z-index:1;
}
.ot-pj-row{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:14px;
  padding:10px 14px; font-size:.8rem; color:rgba(238,248,251,0.78);
  position:relative; z-index:1; white-space:nowrap;
}
.ot-pj-row b{color:var(--gleam);}
 
@media (max-width:560px){
  .org-tree-wrap{padding:26px 16px;}
  .org-tree-wrap .ot-head{padding-right:46px;}
  .org-tree ul{padding-top:22px; gap:0;}
  .org-tree li{padding:22px 8px 0 8px;}
  .org-tree li::before,.org-tree li::after,.org-tree ul ul::before{height:22px;}
  .ot-node summary{min-width:112px; padding:11px 12px 9px;}
  .ot-member{min-width:96px; padding:9px 11px;}
}