:root{
    --accent: #8FA36B;
    --accent-2: #4A6B63;
    --accent-3: #A9B34F;
    --accent-4: #3E5850;
    --accent-rgb: 143,163,107;
    --radius-lg: 32px;
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
  }

  html[data-theme="dark"]{
    color-scheme: dark; /* UI browser (kolom URL, scrollbar, kontrol form) ikut gelap */
    --bg: #101210;
    --surface: #191B15;
    --surface-2: #1F2119;
    --nav-bg: rgba(16,18,16,0.72);
    --text: #F4F3EC;
    --muted: #A6AA98;
    --border: rgba(244,243,236,0.10);
    --pop-bg: #F3F1E7;
    --pop-text: #14150F;
  }
  html[data-theme="light"]{
    color-scheme: light; /* UI browser (kolom URL, scrollbar, kontrol form) ikut terang */
    --bg: #F6F4EA;
    --surface: #FFFFFF;
    --surface-2: #EFEDDF;
    --nav-bg: rgba(246,244,234,0.78);
    --text: #14150F;
    --muted: #5B5F52;
    --border: rgba(20,21,15,0.10);
    --pop-bg: #181A14;
    --pop-text: #F3F1E7;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }
  body{
    background:var(--bg); color:var(--text);
    font-family:'Plus Jakarta Sans', sans-serif;
    line-height:1.6; overflow-x:hidden;
    overflow-wrap:anywhere; /* teks/URL panjang tanpa spasi dipaksa turun baris, tidak melebarkan halaman di mobile */
    transition:background .4s var(--ease-out), color .4s var(--ease-out);
  }
  h1,h2,h3{ font-family:'Sora', sans-serif; letter-spacing:-0.01em; }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
  ::selection{ background:var(--accent); color:#101210; }

  .wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }

  /* ---------- Blob placeholder visuals (no external photos) ---------- */
  .blob-media{
    position:relative; overflow:hidden;
    background:
      radial-gradient(120% 140% at 20% 15%, rgba(var(--accent-rgb),0.55), transparent 60%),
      linear-gradient(155deg, #23291d, #12140f);
    display:flex; align-items:center; justify-content:center;
  }
  .blob-media::after{
    content:''; position:absolute; inset:0; z-index:1;
    background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size:14px 14px; opacity:.5; mix-blend-mode:overlay;
    pointer-events:none; /* lapisan dekoratif tidak boleh menelan klik ke kontrol video/iframe di bawahnya */
  }
  .blob-media svg{ position:relative; z-index:1; opacity:.9; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.55rem;
    font-weight:700; font-size:.92rem;
    padding:.9rem 1.6rem;
    border-radius:999px;
    transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease-out), background .3s;
    white-space:nowrap;
  }
  .btn-solid{ background:var(--accent); color:#12140F; }
  .btn-solid:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(var(--accent-rgb),0.35); }
  .btn-outline{ border:1.5px solid var(--border); color:var(--text); }
  .btn-outline:hover{ background:var(--surface-2); }
  .btn-icon-circle{
    width:2rem; height:2rem; border-radius:50%; background:rgba(var(--accent-rgb),0.18);
    display:inline-flex; align-items:center; justify-content:center; color:var(--accent);
    flex-shrink:0;
  }

  .eyebrow-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:.5rem .9rem; border-radius:999px;
    background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
  }
  .eyebrow-dot{
    display:inline-flex; align-items:center; gap:.55rem;
    font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  }
  .eyebrow-dot::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:200;
    padding:1rem clamp(1.25rem,4vw,3rem);
    background:var(--nav-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{ display:flex; align-items:center; gap:.65rem; font-weight:800; font-size:1.05rem; }
  .brand-mark{ width:34px; height:34px; }
  .brand small{ display:block; font-size:.6rem; font-weight:700; letter-spacing:.1em; color:var(--muted); }

  .nav-links{ display:none; list-style:none; gap:.3rem; align-items:center; }
  .nav-links a{
    font-size:.9rem; font-weight:600; padding:.6rem 1rem; border-radius:999px; color:var(--muted);
    transition:background .25s, color .25s;
  }
  .nav-links a.active, .nav-links a:hover{ background:var(--surface-2); color:var(--text); }

  .nav-right{ display:flex; align-items:center; gap:.6rem; }
  .theme-toggle{
    width:2.6rem; height:2.6rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--text);
    transition:transform .3s var(--ease-spring);
  }
  .theme-toggle:hover{ transform:rotate(20deg); }
  .theme-toggle svg{ width:18px; height:18px; }
  html[data-theme="dark"] .icon-sun{ display:block; } html[data-theme="dark"] .icon-moon{ display:none; }
  html[data-theme="light"] .icon-sun{ display:none; } html[data-theme="light"] .icon-moon{ display:block; }

  .menu-toggle{
    display:flex; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    align-items:center; justify-content:center;
  }
  /* Tombol Let's Connect di nav hanya muat di layar desktop; di mobile fungsinya digantikan tombol di overlay menu */
  #letsConnectDesktop{ display:none; }
  @media (min-width: 960px){ #letsConnectDesktop{ display:inline-flex; } }

  /* ---------- Switcher bahasa (Google Translate) ---------- */
  .lang-switch{ position:relative; }
  .lang-toggle img{ width:20px; height:15px; border-radius:3px; object-fit:cover; display:block; }
  .lang-menu{
    position:absolute; top:calc(100% + .65rem); right:0; z-index:450;
    width:240px; max-height:min(68vh, 30rem); overflow-y:auto;
    background:var(--surface); border:1px solid var(--border); border-radius:18px;
    padding:.5rem; box-shadow:0 20px 44px rgba(0,0,0,.28);
  }
  .lang-menu[hidden]{ display:none; }
  .lang-label{
    font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
    color:var(--muted); padding:.45rem .7rem .25rem;
  }
  .lang-item{
    display:flex; align-items:center; gap:.65rem; width:100%;
    padding:.55rem .7rem; border-radius:12px;
    font-size:.88rem; font-weight:600; text-align:left; color:var(--text);
    transition:background .2s;
  }
  .lang-item:hover{ background:var(--surface-2); }
  .lang-item img{ width:20px; height:15px; border-radius:3px; object-fit:cover; flex-shrink:0; }
  .lang-item.active{ background:rgba(var(--accent-rgb),.16); color:var(--accent); }
  .lang-item.active::after{ content:'✓'; margin-left:auto; font-weight:800; }
  .lang-more-toggle .chev{ margin-left:auto; transition:transform .35s var(--ease-spring); display:flex; }
  .lang-more-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .lang-more{ border-top:1px solid var(--border); margin-top:.35rem; padding-top:.35rem; }
  .lang-more[hidden]{ display:none; }

  /* Sembunyikan seluruh artefak bawaan widget Google Translate (banner atas, tooltip, badge) */
  #google_translate_element, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt,
  .goog-te-gadget-icon, .goog-tooltip, .goog-tooltip:hover, body > .skiptranslate{ display:none !important; }
  body{ top:0 !important; }
  font[style]{ background:transparent !important; box-shadow:none !important; }

  /* ---------- Mobile full nav overlay ---------- */
  .mobile-overlay{
    position:fixed; inset:0; z-index:300; background:var(--bg);
    padding:1.25rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .45s var(--ease-out);
  }
  .mobile-overlay.open{ transform:translateX(0); }
  .mobile-overlay-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
  .mobile-nav-list{ list-style:none; display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.5rem; }
  .mobile-nav-list a{
    display:flex; align-items:center; gap:.8rem; padding:.95rem 1rem; border-radius:16px;
    font-weight:700; font-size:1.02rem; color:var(--text);
  }
  .mobile-nav-list a.active{ background:var(--accent); color:#12140F; }
  .mobile-nav-list a svg{ width:20px; height:20px; opacity:.85; }
  .mobile-socials{ display:flex; gap:.6rem; margin:1.25rem 0; }
  .mobile-socials a{
    width:2.6rem; height:2.6rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  .mobile-contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:1.25rem; margin-bottom:1.25rem; }
  .mobile-contact-row{ display:flex; gap:.9rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
  .mobile-contact-row:last-child{ border-bottom:none; }
  .mobile-contact-row svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:.15rem; }
  .mobile-contact-row .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }

  .studio-tour-card{
    position:relative; border-radius:24px; overflow:hidden; height:180px; margin-bottom:1.5rem;
  }
  .studio-tour-card .caption{
    position:absolute; left:1.1rem; bottom:1.1rem; right:1.1rem;
    display:flex; align-items:center; justify-content:space-between;
  }
  .studio-tour-card .caption strong{ display:block; color:#fff; font-size:1.05rem; }
  .studio-tour-card .caption span{ color:rgba(255,255,255,.75); font-size:.8rem; }
  .play-dot{
    width:2.6rem; height:2.6rem; border-radius:50%; background:var(--accent);
    display:flex; align-items:center; justify-content:center; color:#12140F; flex-shrink:0;
  }

  /* ---------- Easter egg menu mobile: tombol rahasia muncul setelah HP didiamkan ---------- */
  .mobile-egg{ margin-bottom:1.5rem; }
  .mobile-egg-trigger{
    display:flex; align-items:center; gap:.7rem; width:100%;
    background:var(--surface); border:1px dashed var(--border); border-radius:18px;
    padding:.9rem 1.1rem; font-weight:700; font-size:.92rem; color:var(--text);
  }
  .mobile-egg-icon{ display:inline-block; font-size:1.15rem; animation:eggIconShake 3.6s ease-in-out .8s infinite; }
  @keyframes eggIconShake{
    0%, 78%, 100%{ transform:rotate(0deg) scale(1); }
    81%{ transform:rotate(-12deg) scale(1.08); }
    84%{ transform:rotate(11deg) scale(1.1); }
    87%{ transform:rotate(-9deg) scale(1.08); }
    90%{ transform:rotate(7deg) scale(1.05); }
    93%{ transform:rotate(-4deg) scale(1.02); }
    96%{ transform:rotate(0deg) scale(1); }
  }
  .mobile-egg-trigger[aria-expanded="true"] .mobile-egg-icon{ animation:none; }
  .mobile-egg-panel{
    margin-top:.7rem; background:var(--surface-2); border:1px solid var(--border); border-radius:18px;
    padding:1rem 1.1rem; overflow:hidden;
  }
  .mobile-egg-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.5rem 0; }
  .mobile-egg-row + .mobile-egg-row{ border-top:1px solid var(--border); }
  .mobile-egg-panel-label{ font-size:.8rem; color:var(--muted); font-weight:600; }
  .mobile-egg-row strong{ font-family:'Sora', sans-serif; color:var(--accent); font-size:.98rem; }
  .mobile-egg-username-row{ flex-direction:column; align-items:stretch; gap:.5rem; }
  .mobile-egg-username-edit{ display:flex; gap:.5rem; }
  .mobile-egg-username-edit input{
    flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:.55rem .75rem; font-size:.88rem; font-weight:700; color:var(--text);
  }
  .mobile-egg-username-edit input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .mobile-egg-username-edit button{
    background:var(--accent); color:#12140F; font-weight:700; font-size:.84rem;
    padding:.55rem 1rem; border-radius:12px; flex-shrink:0;
  }
  .mobile-egg-username-edit button.saved{ background:var(--surface-2); color:var(--accent); border:1px solid var(--accent); }

  /* ---------- Notifikasi "masih di sana?" setelah lama tidak scroll - popup window (bukan toast) ---------- */
  .egg-nag-modal{ z-index:560; }
  .egg-nag-panel{ width:min(380px,100%); text-align:center; }
  .egg-nag-text{ font-size:.96rem; line-height:1.55; margin-bottom:1.1rem; }
  .egg-nag-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
  .egg-nag-actions .btn{ flex:1; justify-content:center; padding:.7rem 1rem; font-size:.84rem; white-space:nowrap; }

  /* ---------- Kartu "Install app" (PWA) di menu mobile, di bawah easter egg ---------- */
  .pwa-install-card{
    margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.7rem;
    background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1rem 1.1rem;
  }
  .pwa-install-body{ display:flex; align-items:flex-start; gap:.7rem; }
  .pwa-install-icon{ font-size:1.3rem; line-height:1; flex-shrink:0; }
  .pwa-install-body strong{ display:block; font-family:'Sora', sans-serif; font-size:.94rem; margin-bottom:.15rem; }
  .pwa-install-body span{ display:block; font-size:.82rem; color:var(--muted); line-height:1.4; }
  .pwa-install-actions{ display:flex; gap:.6rem; }
  .pwa-install-actions .btn{ flex:1; justify-content:center; padding:.6rem 1rem; font-size:.82rem; white-space:nowrap; }

  @media (min-width: 960px){
    .nav-links{ display:flex; }
    .menu-toggle{ display:none; }
    .mobile-overlay{ display:none; }
  }

  /* ---------- Hero ---------- */
  .hero{ padding:8.5rem 0 4rem; }
  .hero-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
  .hero-copy .eyebrow-pill{ margin-bottom:1.3rem; }
  .hero h1{ font-size:clamp(2.4rem,7vw,3.9rem); font-weight:800; line-height:1.03; margin-bottom:1.2rem; }
  .hero h1 .accent-word{ color:var(--accent); }
  .hero p.lead{ color:var(--muted); font-size:1.05rem; max-width:480px; margin-bottom:2rem; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.8rem; }
  .trust-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
  .avatar-stack{ display:flex; }
  .avatar-stack span{
    width:2.2rem; height:2.2rem; border-radius:50%; border:2px solid var(--bg);
    margin-left:-.6rem; display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-weight:700; color:#12140F;
  }
  .avatar-stack span:first-child{ margin-left:0; }
  /* Avatar berisi logo brand (3 teratas dari "Daftar brand" di Studio, menggantikan inisial S/P/R) */
  .avatar-stack .avatar-brand{ background:var(--surface-2); overflow:hidden; }
  .avatar-stack .avatar-brand img{ width:100%; height:100%; object-fit:contain; padding:4px; }
  .trust-text{ font-size:.82rem; color:var(--muted); max-width:170px; }
  .rating-pill{
    display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700;
    padding:.5rem .8rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border);
    font-family:inherit; color:inherit; cursor:default; /* elemen <button>: samakan tampilannya dengan pill lama */
    transition: transform .5s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;
  }
  .rating-pill svg{ width:15px; height:15px; color:#E8C547; }
  /* Pill baru bisa diklik kalau daftar brand di Studio terisi (class dipasang oleh JS) */
  .rating-pill.has-brands{ cursor:pointer; }
  .rating-pill.has-brands:hover, .rating-pill.has-brands:focus-visible{
    transform:translateY(-2px) scale(1.04);
    border-color:rgba(var(--accent-rgb),.55);
    box-shadow:0 6px 18px rgba(var(--accent-rgb),.18);
  }

  /* ---------- Isi pop-up daftar brand (dibuka dari pill rating di hero) ---------- */
  .brand-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.9rem; margin-top:.6rem; }
  .brand-item{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:.65rem;
    padding:1.15rem .9rem 1rem; background:var(--surface-2); border:1px solid var(--border); border-radius:18px;
    color:inherit; text-decoration:none;
    transition: transform .5s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;
  }
  a.brand-item:hover, a.brand-item:focus-visible{
    transform:translateY(-4px) scale(1.02);
    border-color:rgba(var(--accent-rgb),.55);
    box-shadow:0 8px 22px rgba(var(--accent-rgb),.16);
  }
  .brand-logo{
    width:64px; height:64px; border-radius:16px; overflow:hidden; flex:none;
    background:var(--bg); border:1px solid var(--border); /* mengikuti background tema, bukan chip terang permanen */
    display:flex; align-items:center; justify-content:center;
  }
  .brand-logo img{ width:100%; height:100%; object-fit:contain; padding:7px; }
  /* Logo brand per tema (diatur dari Studio): "logo-dark" = field Logo brand (mode gelap),
     "logo-light" = field Logo brand (mode terang). Wrapper dapat class .has-light-logo kalau versi terangnya diisi. */
  .brand-logo img.logo-light, .avatar-stack .avatar-brand img.logo-light{ display:none; }
  html[data-theme="light"] .has-light-logo img.logo-light{ display:block; }
  html[data-theme="light"] .has-light-logo img.logo-dark{ display:none; }
  /* Fallback light mode untuk brand TANPA logo mode terang: bagian putih logo gelapnya dibalik jadi hitam
     (invert + hue-rotate menjaga warna lain tetap di rona aslinya). Dark mode dibiarkan apa adanya. */
  html[data-theme="light"] .brand-logo:not(.has-light-logo) img,
  html[data-theme="light"] .avatar-stack .avatar-brand:not(.has-light-logo) img{ filter:invert(1) hue-rotate(180deg); }
  .brand-logo.brand-initial{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.35rem; color:#12140F; }
  .brand-item strong{ font-family:'Sora',sans-serif; font-size:.92rem; line-height:1.25; }
  .brand-item .brand-note{ font-size:.76rem; color:var(--muted); margin-top:-.25rem; }

  .hero-visual{ position:relative; }
  .hero-blob{
    aspect-ratio:1/1; border-radius:46% 54% 62% 38% / 44% 40% 60% 56%;
    min-height:320px;
    isolation:isolate; /* z-index lapisan slide terkurung di dalam blob - tidak pernah menimpa floating cards saat transisi */
  }
  /* ---------- Slideshow banner hero (beberapa foto/video, transisi sinematik acak) ---------- */
  .hero-slide{ position:absolute; inset:0; opacity:0; will-change:transform,opacity; }
  .hero-slide img, .hero-slide video, .hero-slide iframe{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
  }
  .float-badge{
    position:absolute; z-index:2; background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:.85rem 1.1rem; display:flex; align-items:center; gap:.7rem;
    box-shadow:0 16px 34px rgba(0,0,0,.28); font-size:.82rem; font-weight:700;
    animation:floaty 7s ease-in-out infinite;
  }
  @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  /* Tombol X penutup floating card */
  .badge-close{
    position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%;
    background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
    opacity:.85; z-index:1;
    transition:transform .35s var(--ease-spring), opacity .2s ease, color .2s ease, border-color .2s ease;
  }
  .badge-close:hover, .badge-close:focus-visible{
    transform:scale(1.18) rotate(90deg); opacity:1; color:var(--text); border-color:rgba(var(--accent-rgb),.55);
  }
  .badge-close svg{ width:9px; height:9px; }
  /* Animasi menghilang saat X diklik: mengembang sekejap lalu mengecil sambil turun & memudar */
  .float-badge.closing{ animation:badge-pop-out .5s var(--ease-out) forwards; pointer-events:none; }
  @keyframes badge-pop-out{
    0%{ transform:scale(1) rotate(0); opacity:1; }
    22%{ transform:scale(1.09) rotate(2.5deg); opacity:1; }
    100%{ transform:scale(.25) rotate(-10deg) translateY(30px); opacity:0; }
  }
  .badge-award{ top:12%; right:-4%; }
  .badge-quality{ bottom:16%; right:-6%; animation-delay:1.5s; }
  .badge-icon{
    width:2.3rem; height:2.3rem; border-radius:50%; background:rgba(var(--accent-rgb),.18);
    display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;
  }
  .scroll-dot{
    position:absolute; bottom:-1.3rem; left:1.5rem;
    width:3.2rem; height:3.2rem; border-radius:50%; background:var(--accent); color:#12140F;
    display:flex; align-items:center; justify-content:center;
    animation:bob 2.4s ease-in-out infinite;
  }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

  @media (min-width: 960px){
    .hero-grid{ grid-template-columns:.95fr 1.05fr; gap:3rem; }
  }

  /* ---------- Pop card (team/dreams) ---------- */
  .pop-section{ padding:1rem 0 4rem; }
  .pop-card{
    background:var(--pop-bg); color:var(--pop-text);
    border-radius:var(--radius-lg); padding:clamp(1.75rem,4vw,3rem);
    display:grid; grid-template-columns:1fr; gap:2rem;
  }
  .pop-card .eyebrow-dot{ margin-bottom:.7rem; }
  .pop-card h2{ font-size:clamp(1.7rem,3.6vw,2.3rem); margin-bottom:.9rem; }
  .pop-card h2 .accent-word{ color:var(--accent); }
  .pop-card p{ opacity:.75; max-width:380px; margin-bottom:1.4rem; }
  .pop-card .btn-outline{ border-color:rgba(0,0,0,.18); }
  html[data-theme="dark"] .pop-card .btn-outline{ border-color:rgba(0,0,0,.18); color:#12140F; background:rgba(0,0,0,.06); }
  html[data-theme="light"] .pop-card .btn-outline{ border-color:rgba(255,255,255,.22); color:#F3F1E7; background:rgba(255,255,255,.06); }

  /* Feature cards jadi tumpukan DI MOBILE saja: semua kartu menumpuk di sel grid yang sama,
     kartu di belakang mengintip di atas lewat offset --si (stack index, 0 = paling depan).
     Di desktop (>=960px) ketiganya berjajar seperti biasa - interaksi runtuhnya tetap sama. */
  .pop-features{ display:grid; grid-template-columns:1fr; padding-top:1.9rem; }
  .pop-feature{
    grid-area:1/1; border-radius:20px; padding:1.4rem;
    background:#E9E6D9; border:1px solid rgba(0,0,0,.08);
    box-shadow:0 14px 30px rgba(0,0,0,.10);
    /* --gyro-shift/--gyro-rot diisi sensor orientasi di mobile: tumpukan ikut miring ke arah
       gravitasi, kartu makin belakang makin bergeser (dikali kedalaman tumpukan) */
    transform:
      translate(calc(var(--gyro-shift, 0px) * (var(--si, 0) + 1)), calc(var(--si, 0) * -14px))
      rotate(var(--gyro-rot, 0deg))
      scale(calc(1 - var(--si, 0) * .05));
    z-index:calc(8 - var(--si, 0));
    transition:transform .6s var(--ease-spring), opacity .3s;
  }
  html[data-theme="light"] .pop-feature{ background:#22241C; border-color:rgba(255,255,255,.10); }
  /* Cuma kartu terdepan yang bisa diklik - sisanya masih "mengantri" di belakang */
  .pop-feature:not(.is-top){ pointer-events:none; }
  .pop-feature .feature-next{ cursor:pointer; transition:transform .3s var(--ease-spring); }
  .pop-feature .feature-next:hover{ transform:scale(1.15) rotate(90deg); }
  /* Kartu runtuh: lompat kecil dulu (anticipation) lalu jatuh berputar keluar tumpukan.
     --fall-x/--fall-rot diisi dari sensor orientasi: kartu jatuh mengikuti arah kemiringan HP */
  @keyframes popFall{
    0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
    18%{ transform:translate(0,-18px) rotate(calc(var(--fall-rot, -12deg) * .25)); opacity:1; }
    100%{ transform:translate(var(--fall-x, 0px), 140%) rotate(var(--fall-rot, -12deg)); opacity:0; }
  }
  .pop-feature.falling{
    animation:popFall .68s cubic-bezier(.45,.05,.85,.4) forwards;
    z-index:9; pointer-events:none;
  }
  .pop-feature-icon{
    width:2.6rem; height:2.6rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; margin-bottom:.9rem;
  }
  .pop-feature h3{ font-size:1.02rem; margin-bottom:.4rem; }
  .pop-feature p{ font-size:.85rem; opacity:.7; margin-bottom:.8rem; max-width:none; }

  @media (min-width: 960px){
    .pop-card{ grid-template-columns:.85fr 1.15fr; align-items:start; }
    .pop-features{ grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:0; }
    .pop-feature{ grid-area:auto; transform:none; z-index:auto; }
    .pop-feature:hover{ transform:translateY(-4px); }
    .pop-feature:not(.is-top){ pointer-events:auto; }
    .pop-feature.falling{ pointer-events:none; }
  }

  /* ---------- Finale blockbuster section About ---------- */
  @keyframes finaleShake{
    0%,100%{ transform:translate(0,0) rotate(0); }
    12%{ transform:translate(-8px,3px) rotate(-.6deg); }
    25%{ transform:translate(7px,-4px) rotate(.7deg); }
    38%{ transform:translate(-9px,2px) rotate(-.8deg); }
    52%{ transform:translate(8px,4px) rotate(.6deg); }
    66%{ transform:translate(-6px,-3px) rotate(-.5deg); }
    82%{ transform:translate(5px,2px) rotate(.4deg); }
  }
  .pop-card.finale-shake{ animation:finaleShake .55s linear; }
  .pop-card.finale-fall{
    transition:transform .8s cubic-bezier(.55,0,.85,.36), opacity .8s ease-in;
    transform:translateY(70vh) rotate(7deg) scale(.94);
    opacity:0;
  }
  .cut-overlay{
    position:fixed; inset:0; z-index:400; background:#000;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .35s ease; pointer-events:none;
  }
  .cut-overlay.show{ opacity:1; }
  .cut-overlay span{
    font-family:'Sora', sans-serif; font-weight:800; letter-spacing:.05em;
    font-size:clamp(2rem,7vw,4rem); color:#fff;
    animation:cutZoom .9s var(--ease-spring);
  }
  @keyframes cutZoom{ 0%{ transform:scale(.55); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

  /* ---------- CTA sekunder hero: wobble sesekali minta diperhatikan ---------- */
  @keyframes ctaWobble{
    0%, 84%, 100%{ transform:rotate(0deg) scale(1); }
    86%{ transform:rotate(-2.6deg) scale(1.04); }
    88%{ transform:rotate(2.2deg) scale(1.06); }
    90%{ transform:rotate(-1.8deg) scale(1.05); }
    92%{ transform:rotate(1.2deg) scale(1.03); }
    94%{ transform:rotate(-.6deg) scale(1.01); }
    96%{ transform:rotate(0deg) scale(1); }
  }
  .hero-ctas .btn-outline:not(:hover):not(:active){ animation:ctaWobble 7s ease-in-out 3s infinite; }

  /* ---------- Services ---------- */
  .section{ padding:4rem 0; }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.2rem; flex-wrap:wrap; }
  .section-head h2{ font-size:clamp(1.7rem,3.6vw,2.3rem); margin-top:.6rem; }
  .link-arrow{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; color:var(--text); padding:.7rem 1.2rem; border:1px solid var(--border); border-radius:999px; }

  .service-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
  .service-card{
    background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:1.5rem;
    transition:transform .35s var(--ease-spring), border-color .3s;
    opacity:0; transform:translateY(20px);
  }
  .service-card.revealed{ opacity:1; transform:translateY(0); }
  .service-card:hover{ transform:translateY(-6px); border-color:rgba(var(--accent-rgb),.5); }
  .service-icon{ width:2.7rem; height:2.7rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:1.3rem; }
  .service-card h3{ font-size:1.05rem; margin-bottom:.4rem; }
  .service-card p{ font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
  /* Animasi liquid kartu layanan: pola sama dengan kartu story - lelehan sudut, apungan idle
     (berhenti saat hover supaya lift + tilt tetap mulus), dan sapuan highlight acak per kartu */
  .service-card{ position:relative; overflow:hidden; }
  .service-card.revealed{
    animation:svcLiquid var(--liquid-dur, 12s) ease-in-out var(--liquid-delay, 0s) infinite;
  }
  .service-card.revealed:not(:hover){
    animation:
      svcLiquid var(--liquid-dur, 12s) ease-in-out var(--liquid-delay, 0s) infinite,
      svcFloat var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite;
  }
  /* Lelehan dibuat kalem (radius maks 30px) supaya sudut kartu solid tidak tampak "terpotong",
     dan apungan idle bergerak KE BAWAH tanpa rotasi: kotak kartu tidak pernah naik di atas posisi
     layout-nya, jadi tepi atas mustahil terpotong container di renderer/scaling mana pun */
  @keyframes svcLiquid{
    0%,100%{ border-radius:24px; }
    25%{ border-radius:29px 21px 30px 22px / 25px 29px 21px 28px; }
    50%{ border-radius:21px 30px 22px 30px / 29px 22px 28px 21px; }
    75%{ border-radius:30px 22px 27px 21px / 22px 28px 24px 29px; }
  }
  @keyframes svcFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(4px); }
  }
  .service-card::after{
    content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
    background:linear-gradient(105deg, transparent, rgba(var(--accent-rgb),.16), transparent);
    transform:skewX(-16deg); pointer-events:none; opacity:0;
  }
  .service-card.revealed::after{ animation:workShine var(--hl-dur, 8s) ease-in-out var(--hl-delay, 0s) infinite; }

  .services-head-actions{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
  /* Stat "N Services We Offer" - sama persis gaya .awards-stats supaya konsisten di seluruh situs */
  .services-stats{ margin:0 0 1.4rem; }
  .services-stat{ display:inline-flex; align-items:baseline; gap:.6rem; }
  .services-counter{
    font-family:'Sora', sans-serif; font-size:clamp(2.2rem,5vw,3rem); font-weight:800;
    color:var(--accent); line-height:1;
  }
  .services-stat span{ font-size:.95rem; color:var(--muted); }

  /* Crossfade singkat saat bertukar tata letak (carousel <-> daftar penuh) lewat tombol See/Close all */
  .service-grid{ transition:opacity .22s ease; }
  .service-grid.grid-fading{ opacity:0; }

  /* Mobile: saat ringkas (collapsed, default), semua kartu tetap ada tapi jadi carousel swipe-horizontal
     (bukan cuma 3 kartu lalu berhenti) - "See all services" beralih ke daftar vertikal penuh, dan tombolnya
     berubah jadi "Close all services" untuk kembali ke carousel ringkas.
     Selector digandakan (.gallery-nav.services-nav) supaya menang dari display:flex milik .gallery-nav
     yang dideklarasikan lebih bawah di stylesheet. */
  .gallery-nav.services-nav{ display:none; }
  .services-more{ display:flex; margin:1.2rem auto 0; }
  .services-more svg{ transition:transform .3s var(--ease-spring); }
  .services-more.is-open svg{ transform:rotate(180deg); }
  @media (max-width: 699.98px){
    .service-grid.collapsed{
      display:flex; gap:1.1rem; overflow-x:auto;
      scroll-snap-type:x proximity; scrollbar-width:none;
      padding:1.2rem; margin:-1.2rem -1.2rem -.6rem;
      scroll-padding-inline:1.2rem;
    }
    .service-grid.collapsed::-webkit-scrollbar{ display:none; }
    .service-grid.collapsed .service-card{ flex:0 0 78vw; scroll-snap-align:start; }
  }
  @media (min-width: 700px){
    /* Desktop: carousel menyamping dengan scroll-snap + tombol panah di header section.
       Padding + margin negatif memberi ruang untuk apungan/lift/tilt kartu tanpa terpotong container
       (tilt 3D + lift menonjol sampai ~14px dari tepi kartu) */
    .service-grid{
      display:flex; gap:1.1rem; overflow-x:auto;
      scroll-snap-type:x proximity;
      scrollbar-width:none;
      padding:1.2rem;
      margin:-1.2rem -1.2rem -.6rem;
      scroll-padding-inline:1.2rem; /* posisi snap mengikuti padding visual, bukan tepi border container */
    }
    .service-grid::-webkit-scrollbar{ display:none; }
    .service-card{ flex:0 0 250px; scroll-snap-align:start; }
    .services-more{ display:none; }
    .gallery-nav.services-nav{ display:flex; margin-top:0; }
  }

  /* ---------- Work gallery ---------- */
  /* Ruang napas di dalam scroller + margin negatif penyeimbang: kartu yang mengapung/tilt/lift
     tidak lagi terpotong tepi container (overflow-x:auto ikut memotong arah vertikal).
     Ukurannya dihitung dari tonjolan terburuk tilt 3D: rotateY 3deg pada kartu selebar ~900px
     dengan perspective 700px menonjol ~15px ke samping - 1.4rem (22px) aman.
     Snap tetap rapi karena posisi snap mengikuti padding container. */
  .gallery-scroller{
    display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:1.4rem;
    margin:-1.4rem -1.4rem -.9rem;
    scroll-padding-inline:1.4rem; /* posisi snap mengikuti padding visual, bukan tepi border container */
  }
  .gallery-scroller::-webkit-scrollbar{ display:none; }
  .work-card{
    position:relative; flex:0 0 78%; scroll-snap-align:start; border-radius:24px; overflow:hidden;
    aspect-ratio:4/5; min-height:280px;
  }
  /* Caption & badge status murni teks - jangan halangi klik ke kontrol video; tombol play tetap bisa diklik */
  .work-card .caption, .studio-tour-card .caption, .status-tag{ pointer-events:none; }
  .play-dot{ pointer-events:auto; }
  /* Saat video sedang diputar: sembunyikan tekstur/caption & matikan efek hover supaya kontrol player
     (pause, seek, fullscreen) tidak tertutup apa pun dan tidak "lari" dari kursor */
  .blob-media.is-playing::after{ display:none; }
  .is-playing .caption, .is-playing .status-tag, .is-playing .work-desc{ opacity:0; visibility:hidden; }
  .work-card.is-playing:hover{ transform:none; }
  .work-card .caption{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:2; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.35); }
  .work-card .caption strong{ display:block; font-size:1.05rem; }
  .work-card .caption span{ font-size:.8rem; color:rgba(255,255,255,.75); }
  .work-card .play-dot{ position:absolute; right:1.1rem; bottom:1.1rem; z-index:2; }
  .status-tag{
    position:absolute; top:1.1rem; left:1.1rem; z-index:2;
    font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    padding:.35rem .7rem; border-radius:999px;
    background:rgba(var(--accent-rgb),.9); color:#12140F;
  }
  .work-desc{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden;
    margin-top:.5rem; font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.85);
    max-height:0; opacity:0;
    transition:max-height .4s var(--ease-out), opacity .3s var(--ease-out);
  }
  .work-card:hover .work-desc, .work-card:focus-within .work-desc{ max-height:8rem; opacity:1; }
  /* ---------- Animasi liquid kartu story (Featured Work) ----------
     Tiga lapis gerak, semuanya dijadwalkan acak per kartu lewat CSS var yang di-seed dari JS
     (durasi + delay beda-beda) supaya galeri terasa hidup tapi tidak serempak:
     - workLiquid: border-radius "meleleh" organik ala liquid blob
     - workFloat: apungan idle pelan (berhenti saat hover supaya tilt 3D tetap mulus, dan saat video main)
     - workShine: sapuan highlight sesekali untuk menarik perhatian */
  .work-card.revealed:not(.is-playing){
    animation:workLiquid var(--liquid-dur, 12s) ease-in-out var(--liquid-delay, 0s) infinite;
  }
  .work-card.revealed:not(.is-playing):not(:hover){
    animation:
      workLiquid var(--liquid-dur, 12s) ease-in-out var(--liquid-delay, 0s) infinite,
      workFloat var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite;
  }
  @keyframes workLiquid{
    0%,100%{ border-radius:24px; }
    25%{ border-radius:36px 22px 40px 24px / 30px 38px 22px 36px; }
    50%{ border-radius:22px 38px 24px 40px / 38px 24px 36px 22px; }
    75%{ border-radius:38px 24px 32px 22px / 24px 36px 26px 38px; }
  }
  /* Apungan ke bawah tanpa rotasi: rotasi .5deg pada kartu selebar ~900px mengangkat sudutnya
     ~4px ke atas - itulah sumber tepi atas yang tercukur di beberapa renderer */
  @keyframes workFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(6px); }
  }
  .work-card::before{
    content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:2;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
    transform:skewX(-16deg); pointer-events:none; opacity:0;
  }
  .work-card.revealed::before{ animation:workShine var(--hl-dur, 7.5s) ease-in-out var(--hl-delay, 0s) infinite; }
  .work-card.is-playing::before{ display:none; }
  @keyframes workShine{
    0%,74%{ left:-60%; opacity:0; }
    76%{ opacity:1; }
    92%,100%{ left:130%; opacity:0; }
  }
  .gallery-nav{ display:flex; gap:.6rem; margin-top:1.2rem; justify-content:flex-end; }
  .gallery-nav button{
    width:2.6rem; height:2.6rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  @media (min-width: 700px){ .work-card{ flex-basis:44%; } }
  @media (min-width: 1100px){ .work-card{ flex-basis:23.5%; } }

  /* ---------- Studio teaser ---------- */
  .studio-section .wrap{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; }
  .studio-media{ border-radius:28px; aspect-ratio:16/10; }
  .studio-copy h2{ font-size:clamp(1.6rem,3.2vw,2.1rem); margin:.6rem 0 .8rem; }
  .studio-copy p{ color:var(--muted); max-width:420px; margin-bottom:1.2rem; }
  @media (min-width: 900px){ .studio-section .wrap{ grid-template-columns:1fr 1fr; } }

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--accent); color:#12140F; border-radius:var(--radius-lg);
    padding:clamp(2rem,5vw,3rem); display:flex; align-items:center; justify-content:space-between;
    gap:1.5rem; flex-wrap:wrap; position:relative; overflow:hidden;
  }
  .cta-banner h2{ font-size:clamp(1.5rem,3.6vw,2.2rem); font-weight:700; opacity:.92; }
  .cta-banner .cta-actions{ display:flex; align-items:center; gap:.8rem; }
  .cta-banner .btn-solid{ background:#12140F; color:var(--accent); }
  .cta-plus{ width:3.2rem; height:3.2rem; border-radius:50%; background:rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; }

  /* ---------- Footer ---------- */
  footer{ padding:4rem 0 2rem; }
  .footer-intro{ margin-bottom:2.5rem; max-width:520px; }
  .footer-intro h3{ font-size:clamp(1.3rem,2.6vw,1.7rem); margin-bottom:.5rem; }
  .footer-intro p{ color:var(--muted); font-size:.92rem; }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
  /* Kartu kontak (Studio/Email/Phone) selalu tersusun ke bawah dalam satu kolom */
  .footer-contact{ display:grid; gap:.85rem; }
  .footer-brand p{ color:var(--muted); font-size:.88rem; max-width:280px; margin-top:.8rem; }
  .footer-brand .footer-socials{ margin-top:1.2rem; }
  .footer-col .label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:.5rem; }
  .footer-col p, .footer-col a{ font-size:.9rem; }
  /* ---------- Kartu kontak interaktif (alamat / email / telepon) ----------
     Layout kompak: ikon di kiri, label + isi + hint bertumpuk di kanan -
     tinggi kartu jadi pendek dan kolom footer terlihat seimbang tanpa ruang kosong */
  .contact-card{
    position:relative; overflow:hidden; cursor:pointer;
    background:var(--surface-2); border:1px solid var(--border); border-radius:20px;
    padding:.95rem 1.1rem;
    display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center;
    transition: transform .55s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;
  }
  .contact-card .contact-card-icon{ grid-row:1 / span 3; margin-bottom:0; }
  .contact-card .label{ grid-column:2; margin-bottom:.1rem; }
  .contact-card p, .contact-card a, .contact-card .contact-card-hint{ grid-column:2; }
  .contact-card p, .contact-card a{ position:relative; z-index:1; }
  .contact-card a{ pointer-events:none; } /* klik ditangani kartunya: animasi dulu, baru menuju mailto/tel */
  .contact-card:hover, .contact-card:focus-visible{
    transform:translateY(-5px) scale(1.02);
    border-color:rgba(var(--accent-rgb),.55);
    box-shadow:0 10px 26px rgba(var(--accent-rgb),.16);
  }
  .contact-card-icon{
    width:2.5rem; height:2.5rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),.16); color:var(--accent); margin-bottom:.65rem; position:relative; z-index:1;
  }
  .contact-card-icon svg{ width:19px; height:19px; }
  /* Sapuan kilau berkala - pemicu halus supaya kartu terasa bisa diklik (delay berjenjang per kartu) */
  .contact-card::after{
    content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%; pointer-events:none;
    background:linear-gradient(105deg, transparent, rgba(var(--accent-rgb),.15), transparent);
    transform:skewX(-18deg); animation:contact-shine 6.6s ease-in-out infinite;
  }
  .contact-card[data-contact="email"]::after{ animation-delay:2.2s; }
  .contact-card[data-contact="phone"]::after{ animation-delay:4.4s; }
  @keyframes contact-shine{ 0%{ left:-70%; } 22%,100%{ left:120%; } }
  /* Animasi idle unik per field: pin melompat, amplop menggoda, telepon berdering + cincin sonar */
  .contact-card[data-contact="address"] .contact-card-icon svg{ animation:contact-pin-bob 3.4s ease-in-out infinite; }
  @keyframes contact-pin-bob{
    0%,40%,100%{ transform:translateY(0); }
    8%{ transform:translateY(-5px) scale(1.06); } 16%{ transform:translateY(0); }
    24%{ transform:translateY(-2px); } 32%{ transform:translateY(0); }
  }
  .contact-card[data-contact="email"] .contact-card-icon svg{ transform-origin:50% 40%; animation:contact-mail-tilt 5.2s ease-in-out infinite; }
  @keyframes contact-mail-tilt{
    0%,80%,100%{ transform:rotate(0) scale(1); }
    84%{ transform:rotate(-10deg) scale(1.1); } 88%{ transform:rotate(9deg) scale(1.1); }
    92%{ transform:rotate(-6deg) scale(1.05); } 96%{ transform:rotate(0) scale(1); }
  }
  .contact-card[data-contact="phone"] .contact-card-icon{ animation:contact-ring-pulse 4.2s ease-out infinite; }
  .contact-card[data-contact="phone"] .contact-card-icon svg{ animation:contact-phone-ring 4.2s ease-in-out infinite; }
  @keyframes contact-ring-pulse{
    0%,52%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); }
    58%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5); }
    82%{ box-shadow:0 0 0 14px rgba(var(--accent-rgb),0); }
    100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); }
  }
  @keyframes contact-phone-ring{
    0%,54%,82%,100%{ transform:rotate(0); }
    58%{ transform:rotate(-16deg); } 62%{ transform:rotate(13deg); }
    66%{ transform:rotate(-11deg); } 70%{ transform:rotate(9deg); } 74%{ transform:rotate(-5deg); } 78%{ transform:rotate(0); }
  }
  .contact-card-hint{
    display:inline-flex; align-items:center; gap:.3rem; margin-top:.3rem; font-size:.74rem; font-weight:700;
    color:var(--accent); opacity:0; transform:translateY(5px);
    transition:opacity .3s ease, transform .45s var(--ease-spring); position:relative; z-index:1;
  }
  .contact-card:hover .contact-card-hint, .contact-card:focus-visible .contact-card-hint{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .contact-card::after, .contact-card .contact-card-icon, .contact-card .contact-card-icon svg{ animation:none; }
  }

  .footer-socials{ display:flex; gap:.6rem; }
  .footer-socials a{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
  .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.8rem; color:var(--muted); }
  /* Di mobile, seluruh isi footer dibungkus card supaya konsisten dengan gaya section lain */
  @media (max-width: 899px){
    .footer-card{
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:1.75rem 1.4rem;
    }
  }
  @media (min-width: 900px){ .footer-grid{ grid-template-columns:1.05fr 1fr; align-items:center; gap:3rem; } }

  /* ---------- Splash ---------- */
  .splash{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }
  .splash.splash-hidden{ opacity:0; transform:scale(1.04); pointer-events:none; }
  .splash-mark{ position:relative; width:64px; height:64px; }
  .splash-mark svg{ position:relative; z-index:1; width:100%; height:100%; }
  .splash-ring{
    position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(var(--accent-rgb),.4);
    animation:splash-pulse 1.8s var(--ease-out) infinite;
  }
  .splash-ring:nth-child(2){ animation-delay:.6s; }
  @keyframes splash-pulse{
    0%{ transform:scale(.7); opacity:.9; }
    100%{ transform:scale(1.9); opacity:0; }
  }

  /* ---------- Generalized scroll/entrance reveal ---------- */
  .reveal-item{
    opacity:0; transform:translateY(28px);
    transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  }
  .reveal-item.revealed{ opacity:1; transform:translateY(0); }

  /* ---------- Button ripple + press (Material 3 Expressive) ---------- */
  .btn{ position:relative; overflow:hidden; }
  .btn:active{ transform:scale(.95); }
  .btn .ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,.45);
    transform:scale(0); opacity:.6; pointer-events:none;
    animation:ripple-expand .65s var(--ease-out);
  }
  html[data-theme="light"] .btn-outline .ripple{ background:rgba(0,0,0,.15); }
  /* pop-card selalu berlatar kebalikan dari tema halaman, jadi warna ripple tombolnya juga perlu dibalik */
  html[data-theme="dark"] .pop-card .btn-outline .ripple{ background:rgba(0,0,0,.18); }
  html[data-theme="light"] .pop-card .btn-outline .ripple{ background:rgba(255,255,255,.25); }
  @keyframes ripple-expand{ to{ transform:scale(1); opacity:0; } }

  /* ---------- Tombol "Watch Showreel": highlight memancing klik + efek magic saat diklik ---------- */
  @media (prefers-reduced-motion: no-preference){
    .btn-magic{ animation:magic-glow 2.8s var(--ease-out) infinite; }
    .btn-magic::before{
      content:''; position:absolute; top:0; bottom:0; width:45%; left:-70%;
      transform:skewX(-20deg);
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      animation:magic-sweep 3.6s ease-in-out infinite;
      pointer-events:none;
    }
  }
  @keyframes magic-glow{
    0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55); }
    60%,100%{ box-shadow:0 0 0 14px rgba(var(--accent-rgb),0); }
  }
  @keyframes magic-sweep{
    0%, 55%{ left:-70%; }
    85%, 100%{ left:140%; }
  }
  /* Ledakan magic saat tombol diklik: cincin cahaya + bintang menyebar dari titik klik */
  .magic-burst{ position:fixed; inset:0; z-index:9250; pointer-events:none; transition:opacity .45s var(--ease-out); }
  .magic-burst.out{ opacity:0; }
  .magic-burst .magic-flash{
    position:absolute; inset:0; opacity:0;
    background:radial-gradient(circle at var(--mx) var(--my), rgba(var(--accent-rgb),.4), transparent 55%);
    animation:magic-flash .9s var(--ease-out) both;
  }
  @keyframes magic-flash{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }
  .magic-burst .magic-ring{
    position:absolute; left:var(--mx); top:var(--my); width:14px; height:14px;
    border-radius:50%; border:2px solid rgba(var(--accent-rgb),.9);
    transform:translate(-50%,-50%) scale(0);
    animation:magic-ring 1s var(--ease-out) both;
  }
  @keyframes magic-ring{
    0%{ transform:translate(-50%,-50%) scale(0); opacity:1; border-width:8px; }
    100%{ transform:translate(-50%,-50%) scale(28); opacity:0; border-width:1px; }
  }
  .magic-burst .magic-star{
    position:absolute; left:var(--mx); top:var(--my); color:var(--accent);
    font-size:14px; line-height:1; transform:translate(-50%,-50%);
    text-shadow:0 0 12px rgba(var(--accent-rgb),.9);
  }

  /* ---------- Nav sliding active pill ---------- */
  .nav-links{ position:relative; }
  .nav-pill{
    position:absolute; top:0; height:100%; left:0; width:0;
    background:var(--surface-2); border-radius:999px; z-index:0;
    transition:transform .5s var(--ease-spring), width .5s var(--ease-spring), opacity .3s;
    opacity:0;
  }
  .nav-links a{ position:relative; z-index:1; }
  .nav-links a.active{ background:none; }

  /* ---------- Theme toggle expressive spin ---------- */
  .theme-toggle.spin{ animation:theme-spin .55s var(--ease-spring); }
  @keyframes theme-spin{ from{ transform:rotate(0); } to{ transform:rotate(180deg); } }

  /* ---------- Play-dot invite-to-play pulse (only on genuinely playable media) ---------- */
  .play-dot{ position:relative; }
  .play-dot--active::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid var(--accent); opacity:0;
    animation:play-pulse 2.2s var(--ease-out) infinite;
  }
  @keyframes play-pulse{
    0%{ transform:scale(.8); opacity:.7; }
    100%{ transform:scale(1.5); opacity:0; }
  }

  /* ---------- Anti overflow horizontal: konten panjang (URL dsb) dipaksa wrap, viewport tidak melebar ---------- */
  html{ overflow-x:clip; }
  img, video, iframe{ max-width:100%; }
  .mobile-contact-row > div{ min-width:0; flex:1; }

  /* Nav desktop dengan 8 link: rapatkan sedikit di lebar menengah supaya tidak meluber */
  @media (min-width: 960px) and (max-width: 1199px){
    .nav-links a{ font-size:.82rem; padding:.55rem .7rem; }
  }

  /* ---------- Prestasi (accordion) ---------- */
  .prestasi-list{ display:flex; flex-direction:column; gap:.9rem; }
  .prestasi-item{
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    overflow:hidden; transition:border-color .3s;
  }
  .prestasi-item.open{ border-color:rgba(var(--accent-rgb),.55); }
  .prestasi-head{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.15rem 1.3rem; text-align:left;
  }
  .prestasi-title{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-family:'Sora', sans-serif; }
  .prestasi-title strong{ font-size:1rem; }
  .prestasi-year{
    font-size:.72rem; font-weight:700; color:var(--accent);
    background:rgba(var(--accent-rgb),.14); padding:.25rem .6rem; border-radius:999px;
  }
  .prestasi-head .chevron{
    width:2.1rem; height:2.1rem; border-radius:50%; flex-shrink:0;
    background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition:transform .4s var(--ease-spring), background .3s, color .3s;
  }
  .prestasi-item.open .chevron{ transform:rotate(180deg); background:var(--accent); color:#12140F; border-color:transparent; }
  .prestasi-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
  .prestasi-item.open .prestasi-body{ grid-template-rows:1fr; }
  .prestasi-body-inner{ overflow:hidden; }
  .prestasi-content{ padding:0 1.3rem 1.3rem; color:var(--muted); font-size:.92rem; }
  .prestasi-photos{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
  .prestasi-photos img{
    width:150px; height:105px; object-fit:cover; border-radius:12px;
    border:1px solid var(--border); transition:transform .3s var(--ease-spring);
  }
  .prestasi-photos a:hover img{ transform:scale(1.05); }

  /* Tombol "Discuss this Project" + "Terms and Conditions" berdampingan di dalam popup detail layanan */
  .service-cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
  .service-cta-row .btn{ margin-top:0; }

  /* Carousel video "contoh karya" di dalam popup detail layanan (service.contohKarya) - kartu lebih
     kecil dari .work-card karena hidup di dalam modal yang sudah scrollable secara vertikal. */
  .service-karya-carousel{ margin-top:1.1rem; }
  .service-karya-rail{
    display:flex; gap:.8rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:.3rem; scrollbar-width:none;
  }
  .service-karya-rail::-webkit-scrollbar{ display:none; }
  .service-karya-card{
    position:relative; flex:0 0 auto; width:150px; aspect-ratio:9/12; scroll-snap-align:start;
    border-radius:14px; overflow:hidden; border:1px solid var(--border);
  }
  .service-karya-card .play-dot{
    position:absolute; right:.6rem; bottom:.6rem; z-index:2;
    width:2rem; height:2rem;
  }
  .service-karya-card .play-dot svg{ width:11px; height:11px; }
  .service-karya-caption{
    position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.6rem .6rem .5rem;
    font-size:.72rem; font-weight:700; color:#fff; line-height:1.25;
    background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  }
  .service-karya-card.is-playing .service-karya-caption,
  .service-karya-card.is-playing .play-dot{ display:none; }
  .service-karya-nav{ margin-top:.7rem; }
  .service-karya-nav button{ width:2.2rem; height:2.2rem; }
  .service-karya-nav button svg{ width:12px; height:12px; }

  /* ---------- Terms & Conditions: SATU kartu pembungkus, baris di dalamnya memakai accordion Prestasi
     tapi tanpa border/radius sendiri-sendiri (cukup garis pemisah) supaya tampak sebagai satu kartu utuh ---------- */
  .terms-intro{ color:var(--muted); font-size:.92rem; max-width:42rem; margin:-.6rem 0 1.4rem; }
  .terms-card{
    background:var(--surface); border:1px solid var(--border); border-radius:24px;
    padding:.4rem clamp(.4rem,2vw,.9rem);
  }
  .terms-list{ gap:0; }
  .terms-list .prestasi-item{
    background:transparent; border:none; border-radius:0;
    border-bottom:1px solid var(--border);
  }
  .terms-list .prestasi-item:last-child{ border-bottom:none; }
  .terms-list .prestasi-item.open{ border-color:var(--border); }
  .terms-list .prestasi-head{ padding:1.05rem .5rem; }
  .terms-list .prestasi-content{ padding:0 .5rem 1.2rem; }
  @keyframes termsFlash{
    0%,100%{ background:transparent; }
    30%{ background:rgba(var(--accent-rgb),.16); }
  }
  .terms-list .prestasi-item.terms-flash{ animation:termsFlash 1.4s var(--ease-out); border-radius:14px; }

  /* ---------- Tombol "Back to where you were" - muncul MENEMPEL di baris Terms & Conditions yang baru
     saja dibuka lewat tombol di popup layanan (bukan mengambang lepas di layar), supaya tetap kontekstual
     dengan kartu yang sedang dibuka. Mengembalikan pengunjung persis ke posisi scroll sebelumnya. ---------- */
  .terms-back-up-slot{ display:flex; justify-content:flex-end; margin-bottom:.9rem; }
  .terms-back-up{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem 1rem; border-radius:999px;
    background:var(--accent); color:#12140F; font-weight:700; font-size:.78rem; white-space:nowrap;
    box-shadow:0 8px 18px rgba(var(--accent-rgb),.28);
    opacity:0; pointer-events:none; transform:translateX(10px) scale(.92);
    transition:opacity .3s var(--ease-out), transform .4s var(--ease-spring), box-shadow .3s;
  }
  .terms-back-up svg{ flex-shrink:0; }
  .terms-back-up.show{
    opacity:1; pointer-events:auto; transform:translateX(0) scale(1);
    animation:termsBackUpNudge 2.2s ease-in-out .6s infinite;
  }
  .terms-back-up.show:hover, .terms-back-up.show:focus-visible{
    animation-play-state:paused; transform:translateX(0) scale(1.04);
    box-shadow:0 10px 22px rgba(var(--accent-rgb),.38);
  }
  .terms-back-up:active{ transform:scale(.95); }
  @keyframes termsBackUpNudge{
    0%, 55%, 100%{ transform:translateX(0) scale(1); box-shadow:0 8px 18px rgba(var(--accent-rgb),.28), 0 0 0 0 rgba(var(--accent-rgb),0); }
    64%{ transform:translateX(-5px) scale(1.06); box-shadow:0 10px 20px rgba(var(--accent-rgb),.34), 0 0 0 0 rgba(var(--accent-rgb),.4); }
    74%{ transform:translateX(0) scale(1); box-shadow:0 8px 18px rgba(var(--accent-rgb),.28), 0 0 0 12px rgba(var(--accent-rgb),0); }
  }
  @media (prefers-reduced-motion: reduce){
    .terms-back-up.show{ animation:none; }
  }

  /* ---------- Awards: stat counter + kartu trofi ala infografis ---------- */
  .awards-stats{ margin:0 0 1.4rem; }
  .awards-stat{ display:inline-flex; align-items:baseline; gap:.6rem; }
  .awards-counter{
    font-family:'Sora', sans-serif; font-size:clamp(2.2rem,5vw,3rem); font-weight:800;
    color:var(--accent); line-height:1;
  }
  .awards-stat span{ font-size:.95rem; color:var(--muted); }

  .awards-grid{ display:grid; grid-template-columns:1fr; gap:.9rem; }
  @media (min-width:760px){ .awards-grid{ grid-template-columns:repeat(2,1fr); } }

  .award-head{ align-items:flex-start; gap:.9rem; }
  .award-badge{
    width:2.7rem; height:2.7rem; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:#12140F;
    transition:transform .4s var(--ease-spring);
  }
  .prestasi-item.open .award-badge{ transform:rotate(-8deg) scale(1.06); }
  .award-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }
  .award-rank{
    align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.02em;
    color:var(--accent); background:rgba(var(--accent-rgb),.14);
    padding:.2rem .55rem; border-radius:999px; text-transform:uppercase;
  }
  .award-rank-intl{ color:#C9A227; background:rgba(201,162,39,.16); }
  .award-title{ font-family:'Sora', sans-serif; font-size:.98rem; line-height:1.35; }
  .award-meta{ font-size:.78rem; color:var(--muted); }
  /* Sapuan highlight sesekali, gaya sama dengan service-card/work-card supaya konsisten */
  .award-card{ position:relative; }
  .award-card::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(105deg, transparent, rgba(var(--accent-rgb),.14), transparent);
    transform:skewX(-16deg); opacity:0;
  }
  .award-card.revealed::after{ animation:workShine var(--hl-dur, 9s) ease-in-out var(--hl-delay, 0s) infinite; }

  /* ---------- FAQ: timeline visual bernomor (opsional, per-FAQ lewat field "Langkah" di Studio) ---------- */
  .faq-timeline{
    display:flex; gap:1.4rem; margin-top:1.2rem; padding:.3rem .1rem 1rem;
    overflow-x:auto;
  }
  .faq-timeline-step{
    position:relative; flex:1 0 110px; min-width:110px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
  }
  .faq-timeline-step:not(:last-child)::after{
    content:''; position:absolute; top:18px; left:50%; width:100%; height:2px;
    background:var(--border); z-index:0;
  }
  .faq-timeline-num{
    position:relative; z-index:1; width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#12140F; font-weight:700; font-family:'Sora', sans-serif; font-size:.9rem;
  }
  .faq-timeline-step strong{ font-family:'Sora', sans-serif; font-size:.84rem; color:var(--text); }
  .faq-timeline-step span{ font-size:.74rem; color:var(--muted); line-height:1.35; }

  /* ---------- Updates (kartu blog/berita) ---------- */
  .update-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
  /* Mobile: carousel swipe-horizontal (sama seperti pola .service-grid.collapsed) alih-alih
     ditumpuk vertikal - kartu Updates/News jadi lebih cepat dijelajahi lewat swipe di layar sempit. */
  @media (max-width: 699.98px){
    .update-grid{
      display:flex; gap:1.1rem; overflow-x:auto;
      scroll-snap-type:x proximity; scrollbar-width:none;
      padding:0 1.2rem; margin:0 -1.2rem;
      scroll-padding-inline:1.2rem;
    }
    .update-grid::-webkit-scrollbar{ display:none; }
    .update-card{ flex:0 0 82vw; scroll-snap-align:start; }
  }
  @media (min-width: 700px){ .update-grid{ grid-template-columns:repeat(3,1fr); } }
  .update-card{
    background:var(--surface); border:1px solid var(--border); border-radius:24px;
    overflow:hidden; cursor:pointer;
    transition:transform .35s var(--ease-spring), border-color .3s;
  }
  .update-card:hover{ transform:translateY(-6px); border-color:rgba(var(--accent-rgb),.5); }
  .update-thumb{ aspect-ratio:16/10; position:relative; }
  .update-body{ padding:1.2rem 1.3rem 1.4rem; }
  .update-date{
    font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
  }
  .update-body h3{ font-size:1.02rem; margin:.4rem 0 .45rem; }
  .update-body p{
    font-size:.85rem; color:var(--muted); margin-bottom:.8rem;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  }
  .update-read{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; }

  /* ---------- Modal baca update ---------- */
  .update-modal{
    position:fixed; inset:0; z-index:500;
    display:flex; align-items:center; justify-content:center; padding:1.25rem;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease-out), visibility .35s;
  }
  .update-modal.open{ opacity:1; visibility:visible; }
  .update-modal-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.6);
    backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); /* blur ikut fade, tidak muncul mendadak */
    transition:backdrop-filter .45s var(--ease-out), -webkit-backdrop-filter .45s var(--ease-out);
  }
  .update-modal.open .update-modal-backdrop{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .update-modal-panel{
    position:relative; width:min(720px,100%); max-height:min(85vh,52rem); overflow-y:auto;
    background:var(--surface); border:1px solid var(--border); border-radius:28px;
    padding:clamp(1.4rem,4vw,2.2rem);
    transform:translateY(18px) scale(.97);
    transition:transform .4s var(--ease-spring);
  }
  .update-modal.open .update-modal-panel{ transform:translateY(0) scale(1); }
  .update-modal-close{
    position:absolute; top:1rem; right:1rem; z-index:2;
    width:2.4rem; height:2.4rem; border-radius:50%;
    background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  .update-modal-panel h2{ font-size:clamp(1.3rem,3vw,1.7rem); margin:.5rem 2.6rem .9rem 0; }
  .update-modal-media{ aspect-ratio:16/9; border-radius:18px; overflow:hidden; position:relative; margin-bottom:1.1rem; }
  .update-modal-body{ color:var(--muted); font-size:.95rem; }
  .update-modal-body p{ margin-bottom:.9rem; }
  .update-modal-body h3{ color:var(--text); margin:1.1rem 0 .5rem; }
  .update-modal-body a{ color:var(--accent); text-decoration:underline; }
  .update-modal-body blockquote{ border-left:3px solid var(--accent); padding-left:1rem; margin:.9rem 0; }
  .update-modal-body ul, .update-modal-body ol{ padding-left:1.3rem; margin-bottom:.9rem; }

  /* ---------- Popup persetujuan "I agree with Terms and Conditions" sebelum ke WhatsApp ---------- */
  .agree-panel{ width:min(460px,100%); }
  .agree-panel #agreeModalSubtitle{ color:var(--muted); font-size:.9rem; margin-bottom:1.3rem; }
  .agree-check{
    display:flex; align-items:flex-start; gap:.8rem; cursor:pointer;
    padding:.9rem 1rem; background:var(--surface-2); border:1px solid var(--border); border-radius:16px;
    font-size:.86rem; color:var(--text); line-height:1.4;
  }
  .agree-check input{ position:absolute; opacity:0; width:1px; height:1px; }
  .agree-check-box{
    flex-shrink:0; width:1.35rem; height:1.35rem; margin-top:.05rem; border-radius:7px;
    border:1.5px solid var(--border); background:var(--surface); position:relative;
    transition:background .2s, border-color .2s;
  }
  .agree-check-box::after{
    content:''; position:absolute; inset:0; margin:auto; width:.55rem; height:.32rem;
    border-left:2px solid #12140F; border-bottom:2px solid #12140F; transform:rotate(-45deg) translateY(-1px);
    opacity:0; transition:opacity .15s;
  }
  .agree-check input:checked ~ .agree-check-box{ background:var(--accent); border-color:var(--accent); }
  .agree-check input:checked ~ .agree-check-box::after{ opacity:1; }
  .agree-check input:focus-visible ~ .agree-check-box{ outline:2px solid var(--accent); outline-offset:2px; }
  .agree-actions{ display:flex; justify-content:flex-end; gap:.7rem; margin-top:1.3rem; flex-wrap:wrap; }
  .agree-actions .btn-solid:disabled{ opacity:.45; pointer-events:none; }

  /* ---------- Isi modal list: kartu project / layanan / profil anggota tim ---------- */
  .modal-list{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:.6rem; }
  @media (min-width: 640px){ .modal-list{ grid-template-columns:repeat(2,1fr); } }
  .modal-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
  .modal-card-media{ aspect-ratio:16/9; position:relative; }
  .modal-card-body{ padding:.9rem 1rem 1.1rem; }
  .modal-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; }
  .modal-card-head strong{ font-family:'Sora', sans-serif; font-size:.98rem; display:block; }
  .modal-card-head .meta{ font-size:.76rem; color:var(--muted); display:block; margin-top:.15rem; }
  .modal-card-body p{ font-size:.84rem; color:var(--muted); margin-top:.45rem; }
  .modal-expand{
    width:2.3rem; height:2.3rem; border-radius:50%; flex-shrink:0;
    background:rgba(var(--accent-rgb),.16); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s var(--ease-spring), background .3s;
  }
  .modal-expand:hover{ transform:scale(1.12); background:rgba(var(--accent-rgb),.3); }
  /* Ikon layanan versi kecil untuk accordion di popup services */
  .service-icon-sm{ width:2.1rem; height:2.1rem; margin:0; flex-shrink:0; }
  /* Profil anggota tim di dalam popup */
  .member-profile{ display:flex; gap:1.1rem; align-items:flex-start; margin-top:.6rem; }
  .member-avatar-lg{ width:84px; height:84px; font-size:1.7rem; }
  .member-profile .member-info p{ color:var(--muted); font-size:.95rem; }
  .member-title{ color:var(--muted); font-size:.92rem; margin-top:.2rem; line-height:1.4; }
  /* Statistik ala infografis (angka besar + label) - field "Statistik" di Studio, opsional */
  .member-stats{
    display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem;
    padding:1rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .member-stat{ flex:1 1 90px; text-align:center; }
  .member-stat strong{ display:block; font-family:'Sora', sans-serif; font-size:1.25rem; color:var(--accent); line-height:1.2; }
  .member-stat span{ display:block; font-size:.7rem; color:var(--muted); margin-top:.25rem; line-height:1.35; }
  /* Highlight pencapaian - field "Highlight" di Studio, opsional */
  .member-highlights{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.55rem; }
  .member-highlights li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--text); }
  .member-highlights li svg{ flex-shrink:0; margin-top:.2rem; color:var(--accent); }
  .member-bio-text{ margin-top:1.1rem; color:var(--muted); font-size:.92rem; line-height:1.65; }
  .member-socials{ display:flex; gap:.6rem; margin-top:1.2rem; }
  .member-socials a{
    width:2.4rem; height:2.4rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s var(--ease-spring), border-color .3s;
  }
  .member-socials a:hover{ transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.5); }

  /* ---------- Logo brand dari Sanity (mengganti svg .brand-mark) ---------- */
  img.brand-mark{ object-fit:contain; }
  .splash-mark img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }

  /* ---------- Avatar bulat (dipakai popup bio anggota tim) ---------- */
  .team-avatar{
    width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1rem; color:#12140F;
  }
  .team-avatar img{ width:100%; height:100%; object-fit:cover; }

  /* ---------- NAKAMA: carousel nametag kru (Material 3 Expressive) ---------- */
  .nakama-section{ overflow:hidden; }
  .nakama-nav{ margin-top:0; }
  .nakama-rail{
    --tag-w: 246px;
    --swing: 0deg;
    display:flex; align-items:flex-start; gap:1.5rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    /* Padding samping selebar setengah rel supaya kartu pertama/terakhir tetap bisa berhenti tepat di tengah
       (pola hero carousel MD3); padding atas cukup lega supaya goyangan/bayangan tag tidak terpotong */
    padding:.9rem max(calc(50vw - var(--tag-w) / 2), 1.25rem) 2.4rem;
    margin-top:-.5rem;
    scrollbar-width:none;
  }
  .nakama-rail::-webkit-scrollbar{ display:none; }
  .nakama-item{ flex:0 0 var(--tag-w); scroll-snap-align:center; }
  /* Hanya kartu dengan data dari Studio (punya bio/medsos) yang bisa diklik */
  .nakama-item[data-member-index]{ cursor:pointer; }
  /* Lapisan transform sengaja dipisah per elemen supaya tidak saling menimpa:
     .nakama-item = reveal, .nametag = skala jarak-dari-tengah, .tag-swing = ayunan scroll, .tag-card = goyangan idle */
  .nametag{ transform:scale(var(--tag-scale,1)); transform-origin:50% 0; transition:transform .45s var(--ease-out); }
  .tag-swing{
    position:relative; padding-top:3.3rem;
    transform:rotate(calc(var(--swing, 0deg) * var(--swing-mul, 1)));
    transform-origin:50% 1rem;
    transition:transform .6s var(--ease-spring);
  }
  /* Variasi kecil antar kartu biar ayunannya terasa organik, bukan seragam kayak barisan */
  .nakama-item:nth-child(2n) .tag-swing{ --swing-mul:1.3; }
  .nakama-item:nth-child(3n) .tag-swing{ --swing-mul:.75; }
  .tag-strap{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:.95rem; height:3.1rem; border-radius:0 0 4px 4px;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 5px, transparent 5px 10px),
      var(--tag-accent, var(--accent));
  }
  .tag-clip{
    position:absolute; top:2.55rem; left:50%; transform:translateX(-50%);
    width:1.55rem; height:1.3rem; border-radius:6px 6px 4px 4px; z-index:2;
    background:linear-gradient(180deg, #E4E4DC, #9C9C92);
    box-shadow:0 2px 3px rgba(0,0,0,.28);
  }
  .tag-card{
    position:relative; background:var(--surface); border:1px solid var(--border);
    border-radius:22px; padding:1.9rem 1.05rem 1.05rem; text-align:center;
    box-shadow:0 20px 44px rgba(0,0,0,.16);
    transform-origin:50% -2rem;
    animation:tagSway 5.6s ease-in-out infinite;
  }
  .nakama-item:nth-child(2n) .tag-card{ animation-duration:6.4s; animation-delay:-2.1s; }
  .nakama-item:nth-child(3n) .tag-card{ animation-duration:7.2s; animation-delay:-3.4s; }
  .nakama-item[data-member-index]:hover .tag-card,
  .nakama-item[data-member-index]:focus-visible .tag-card{
    animation:tagWiggle .9s var(--ease-spring);
    border-color:rgba(var(--accent-rgb),.55);
    box-shadow:0 26px 52px rgba(0,0,0,.22);
  }
  .tag-slot{
    position:absolute; top:.8rem; left:50%; transform:translateX(-50%);
    width:2.5rem; height:.5rem; border-radius:999px;
    background:var(--bg); box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
  }
  .tag-top{
    display:flex; justify-content:space-between; gap:.5rem;
    font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
    color:var(--muted); margin-bottom:.75rem;
  }
  .tag-photo{
    width:100%; aspect-ratio:1/1.06; border-radius:16px; overflow:hidden;
    background:var(--tag-accent, var(--accent));
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora', sans-serif; font-weight:800; font-size:3.2rem; color:var(--tag-ink, #12140F);
  }
  .tag-photo img{ width:100%; height:100%; object-fit:cover; }
  .tag-name{ display:block; font-family:'Sora', sans-serif; font-weight:800; font-size:1.02rem; margin-top:.85rem; }
  .tag-role{
    display:inline-block; margin-top:.4rem; padding:.26rem .7rem; border-radius:999px;
    font-size:.6rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    background:var(--tag-accent, var(--accent)); color:var(--tag-ink, #12140F);
  }
  .tag-foot{
    display:flex; align-items:center; justify-content:space-between; gap:.6rem;
    margin-top:1rem; padding-top:.75rem; border-top:1px dashed var(--border);
  }
  .tag-barcode{
    width:4.9rem; height:1.35rem; opacity:.65; color:var(--text);
    background:repeating-linear-gradient(90deg,
      currentColor 0 2px, transparent 2px 4px,
      currentColor 4px 5px, transparent 5px 9px,
      currentColor 9px 12px, transparent 12px 14px);
  }
  .tag-foot small{ font-size:.55rem; font-weight:800; letter-spacing:.13em; color:var(--muted); white-space:nowrap; }
  @keyframes tagSway{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(1.3deg); } 70%{ transform:rotate(-1.2deg); } }
  @keyframes tagWiggle{
    0%{ transform:rotate(0deg); } 25%{ transform:rotate(5deg); }
    55%{ transform:rotate(-4deg); } 80%{ transform:rotate(2deg); } 100%{ transform:rotate(0deg); }
  }
  @media (max-width: 480px){ .nakama-rail{ --tag-w: 216px; gap:1.1rem; } }

  /* ---------- Easter egg: badge melayang di hero ---------- */
  .float-badge{ cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
  .float-badge .badge-icon{ transition:transform .3s var(--ease-spring); }
  .float-badge:hover .badge-icon{ transform:scale(1.14) rotate(-8deg); }
  .take-card{
    position:fixed; z-index:9100; pointer-events:none;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:.6rem .95rem; box-shadow:0 14px 32px rgba(0,0,0,.32);
    font-family:'Sora', sans-serif; font-size:.82rem; font-weight:800; text-align:center; white-space:nowrap;
  }
  .take-card small{
    display:block; font-family:'Plus Jakarta Sans', sans-serif; font-weight:600;
    color:var(--muted); margin-top:.2rem; white-space:normal; max-width:240px; font-size:.72rem;
  }
  .cinema-egg{ position:fixed; inset:0; z-index:9200; display:none; align-items:center; justify-content:center; }
  .cinema-egg.show{ display:flex; }
  .cinema-egg-backdrop{ position:absolute; inset:0; background:rgba(5,6,5,.8); opacity:0; transition:opacity .4s var(--ease-out); }
  .cinema-egg.show .cinema-egg-backdrop{ opacity:1; }
  .cinema-egg-bar{ position:absolute; left:0; right:0; height:0; background:#000; transition:height .55s var(--ease-out); z-index:1; }
  .cinema-egg-bar.top{ top:0; }
  .cinema-egg-bar.bottom{ bottom:0; }
  .cinema-egg.show .cinema-egg-bar{ height:11vh; }
  .cinema-egg-grain{
    position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:overlay;
    background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size:11px 11px;
  }
  .cinema-egg-count{
    position:relative; width:150px; height:150px; border-radius:50%;
    display:none; align-items:center; justify-content:center;
    font-family:'Sora', sans-serif; font-size:4rem; font-weight:800; color:#F4F3EC;
    border:3px solid rgba(244,243,236,.85);
  }
  .cinema-egg.counting .cinema-egg-count{ display:flex; }
  .cinema-egg-sweep{
    position:absolute; left:50%; top:50%; width:2px; height:50%;
    transform:translateX(-50%); transform-origin:top center; background:rgba(244,243,236,.6);
  }
  .cinema-egg-card{
    position:relative; text-align:center; max-width:min(480px, 86vw); padding:0 1rem;
    display:none; opacity:0; transform:translateY(24px) scale(.94);
    transition:opacity .5s var(--ease-out), transform .6s var(--ease-spring);
  }
  .cinema-egg.reveal .cinema-egg-card{ display:block; opacity:1; transform:translateY(0) scale(1); }
  .cinema-egg-card .slate{ font-size:2.6rem; display:block; margin-bottom:.6rem; }
  .cinema-egg-card h3{
    font-size:clamp(1.4rem,4.5vw,2rem); color:#F4F3EC;
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:.7rem;
  }
  .cinema-egg-card p{ color:rgba(244,243,236,.82); font-size:.95rem; margin-bottom:.9rem; }
  .cinema-egg-card small{ color:rgba(244,243,236,.55); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }

  /* ---------- Gerbang sinematik: transisi sebelum menuju WhatsApp (link Studio) ---------- */
  .studio-gate{ position:fixed; inset:0; z-index:9300; display:none; align-items:center; justify-content:center; overflow:hidden; }
  .studio-gate.show{ display:flex; }
  .studio-gate-door{
    position:absolute; top:0; bottom:0; width:50.5%; z-index:1;
    background:linear-gradient(160deg, #14150F 0%, #1E2117 55%, #101210 100%);
    transition:transform .75s var(--ease-out);
  }
  .studio-gate-door.left{ left:0; transform:translateX(-101%); border-right:1px solid rgba(var(--accent-rgb),.4); }
  .studio-gate-door.right{ right:0; transform:translateX(101%); border-left:1px solid rgba(var(--accent-rgb),.4); }
  .studio-gate.close .studio-gate-door{ transform:translateX(0); }
  /* Garis cahaya di tengah menyala begitu kedua pintu gerbang bertemu */
  .studio-gate-seam{
    position:absolute; left:50%; top:0; bottom:0; width:2px; z-index:2;
    transform:translateX(-50%) scaleY(0);
    background:linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.95), transparent);
    box-shadow:0 0 26px 7px rgba(var(--accent-rgb),.45);
    transition:transform .55s var(--ease-out) .6s;
  }
  .studio-gate.close .studio-gate-seam{ transform:translateX(-50%) scaleY(1); }
  .studio-gate-grain{
    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:overlay;
    background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size:11px 11px;
    transition:opacity .5s .5s;
  }
  .studio-gate.close .studio-gate-grain{ opacity:.45; }
  .studio-gate-card{
    position:relative; z-index:3; text-align:center; max-width:min(520px,86vw); padding:0 1rem;
    opacity:0; transform:scale(.92);
    transition:opacity .5s var(--ease-out), transform .65s var(--ease-spring);
  }
  .studio-gate.reveal .studio-gate-card{ opacity:1; transform:scale(1); }
  .studio-gate-card .slate{ font-size:2.4rem; display:block; margin-bottom:.6rem; }
  .studio-gate-card h3{
    font-size:clamp(1.4rem,4.5vw,2rem); color:#F4F3EC; text-transform:uppercase; margin-bottom:.6rem;
  }
  .studio-gate.reveal .studio-gate-card h3{ animation:gate-title-in .9s var(--ease-out) both; }
  @keyframes gate-title-in{
    from{ letter-spacing:.55em; opacity:0; filter:blur(6px); }
    to{ letter-spacing:.18em; opacity:1; filter:blur(0); }
  }
  .studio-gate-card p{ color:rgba(244,243,236,.8); font-size:.95rem; margin-bottom:1.1rem; }
  .studio-gate-loader{
    display:block; width:min(240px,60vw); height:2px; margin:0 auto; border-radius:99px;
    background:rgba(244,243,236,.18); overflow:hidden; position:relative;
  }
  .studio-gate-loader::after{
    content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
    background:var(--accent); border-radius:99px;
  }
  .studio-gate.reveal .studio-gate-loader::after{ transition:transform 1.45s var(--ease-out) .15s; transform:scaleX(1); }
  /* Kilatan cahaya menutup animasi tepat sebelum berpindah ke WhatsApp */
  .studio-gate-flash{
    position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(var(--accent-rgb),.55) 45%, transparent 80%);
    transition:opacity .4s var(--ease-out);
  }
  .studio-gate.exit .studio-gate-flash{ opacity:1; }

  /* ---------- Popup showreel: panel lebar berisi media player, tersingkap dari balik gerbang bioskop ---------- */
  .reel-panel{ width:min(940px,100%); }
  .reel-panel .update-modal-media{ margin-bottom:0; margin-top:.4rem; background:#0B0C0A; }

  /* ---------- FX kartu kontak: overlay sinematik unik per field (email / telepon / alamat) ---------- */
  .contact-fx{ position:fixed; inset:0; z-index:9300; display:none; align-items:center; justify-content:center; overflow:hidden; }
  .contact-fx.show{ display:flex; }
  /* Blur dianimasikan dari 0 (bukan opacity saja) - backdrop-filter tidak ikut memudar bersama opacity,
     jadi tanpa ini blur-nya muncul mendadak sebelum lapisan gelapnya selesai fade. */
  .contact-fx-backdrop{
    position:absolute; inset:0; background:rgba(8,9,8,.88); opacity:0;
    backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
    transition:opacity .45s var(--ease-out), backdrop-filter .55s var(--ease-out), -webkit-backdrop-filter .55s var(--ease-out);
  }
  .contact-fx.play .contact-fx-backdrop{ opacity:1; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .contact-fx-stage{ position:relative; z-index:2; width:min(430px,82vw); height:250px; display:flex; align-items:center; justify-content:center; }
  .contact-fx-caption{
    position:absolute; z-index:2; bottom:16vh; left:1rem; right:1rem; text-align:center; color:#F4F3EC;
    opacity:0; transform:translateY(12px); transition:opacity .4s ease .45s, transform .6s var(--ease-spring) .45s;
  }
  .contact-fx.play .contact-fx-caption{ opacity:1; transform:translateY(0); }
  .contact-fx-caption strong{ font-family:'Sora',sans-serif; font-size:1.02rem; letter-spacing:.02em; }
  .fx-dots{ display:inline-flex; gap:4px; margin-left:8px; vertical-align:middle; }
  .fx-dots i{ width:5px; height:5px; border-radius:50%; background:var(--accent); animation:fx-dot 1s ease-in-out infinite; }
  .fx-dots i:nth-child(2){ animation-delay:.15s; }
  .fx-dots i:nth-child(3){ animation-delay:.3s; }
  @keyframes fx-dot{ 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(-5px); opacity:1; } }
  .contact-fx-flash{
    position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .3s ease;
    background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(var(--accent-rgb),.35) 45%, transparent 75%);
  }
  .contact-fx.exit .contact-fx-flash{ opacity:1; }

  /* FX Email: amplop muncul, surat menyembul, lalu pesawat kertas meluncur melintasi layar */
  .fx-email{ position:relative; width:170px; height:150px; }
  .fx-email .fx-paper{
    position:absolute; left:50%; bottom:40px; width:46px; height:56px; margin-left:-23px;
    background:#F4F3EC; border-radius:5px; transform:translateY(26px) scaleY(0); transform-origin:bottom;
  }
  .contact-fx.play .fx-email .fx-paper{ animation:fx-paper-rise .5s var(--ease-out) .5s forwards, fx-email-away .35s ease 1.15s forwards; }
  @keyframes fx-paper-rise{ to{ transform:translateY(-14px) scaleY(1); } }
  .fx-email .fx-envelope{ position:absolute; left:50%; bottom:0; transform:translateX(-50%) scale(0); color:var(--accent); }
  .fx-email .fx-envelope svg{ width:92px; height:92px; display:block; }
  .contact-fx.play .fx-email .fx-envelope{ animation:fx-env-in .55s var(--ease-spring) forwards, fx-email-away .35s ease 1.15s forwards; }
  @keyframes fx-env-in{ to{ transform:translateX(-50%) scale(1); } }
  @keyframes fx-email-away{ to{ opacity:0; transform:translateX(-50%) translateY(26px) scale(.6); } }
  .fx-email .fx-plane{ position:absolute; left:50%; top:40%; margin-left:-21px; color:#F4F3EC; opacity:0; transform:translate(0,0) rotate(12deg) scale(.5); }
  .fx-email .fx-plane svg{ width:42px; height:42px; display:block; }
  .contact-fx.play .fx-email .fx-plane{ animation:fx-plane-fly 1s cubic-bezier(.45,0,.6,1) 1.15s forwards; }
  @keyframes fx-plane-fly{
    0%{ opacity:1; transform:translate(0,0) rotate(12deg) scale(.9); }
    30%{ transform:translate(9vw,-6vh) rotate(-4deg) scale(1.05); }
    100%{ opacity:1; transform:translate(58vw,-34vh) rotate(-14deg) scale(.7); }
  }
  .fx-email .fx-trail{ position:absolute; left:50%; top:46%; width:7px; height:2.5px; border-radius:2px; background:rgba(var(--accent-rgb),.85); opacity:0; }
  .contact-fx.play .fx-email .fx-trail{ animation:fx-trail 1s ease-out forwards; }
  @keyframes fx-trail{ 0%,20%{ opacity:0; transform:translate(0,0) scaleX(1); } 35%{ opacity:1; } 100%{ opacity:0; transform:translate(34vw,-20vh) scaleX(9); } }

  /* FX Telepon: layar memanggil - ikon bergetar dengan cincin sonar yang memancar */
  .fx-phone{ position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
  .fx-phone .fx-phone-avatar{
    width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#12140F; transform:scale(0); position:relative; z-index:1;
  }
  .fx-phone .fx-phone-avatar svg{ width:38px; height:38px; }
  .contact-fx.play .fx-phone .fx-phone-avatar{ animation:fx-call-in .55s var(--ease-spring) forwards, fx-call-shake .7s ease-in-out .6s infinite; }
  @keyframes fx-call-in{ to{ transform:scale(1); } }
  @keyframes fx-call-shake{
    0%,100%{ transform:scale(1) rotate(0); }
    15%{ transform:scale(1.04) rotate(-9deg); } 30%{ transform:scale(1.04) rotate(8deg); }
    45%{ transform:scale(1.02) rotate(-6deg); } 60%{ transform:scale(1.02) rotate(5deg); } 75%{ transform:scale(1) rotate(-2deg); }
  }
  .fx-phone .fx-ring{ position:absolute; width:88px; height:88px; border-radius:50%; border:2px solid rgba(var(--accent-rgb),.7); opacity:0; }
  .contact-fx.play .fx-phone .fx-ring{ animation:fx-sonar 1.6s ease-out infinite; }
  .contact-fx.play .fx-phone .fx-ring.r2{ animation-delay:.4s; }
  .contact-fx.play .fx-phone .fx-ring.r3{ animation-delay:.8s; }
  @keyframes fx-sonar{ 0%{ opacity:.85; transform:scale(1); } 100%{ opacity:0; transform:scale(2.6); } }

  /* FX Alamat: bidang peta miring muncul, pin jatuh memantul, riak menyebar di titik jatuhnya */
  .fx-map{ position:relative; width:230px; height:170px; display:flex; align-items:flex-end; justify-content:center; }
  .fx-map .fx-map-plane{
    position:absolute; left:0; right:0; bottom:12px; height:110px; border-radius:16px;
    background:
      linear-gradient(rgba(var(--accent-rgb),.12) 1.5px, transparent 1.5px) 0 0/100% 26px,
      linear-gradient(90deg, rgba(var(--accent-rgb),.12) 1.5px, transparent 1.5px) 0 0/38px 100%,
      rgba(244,243,236,.06);
    border:1px solid rgba(var(--accent-rgb),.35);
    transform:perspective(500px) rotateX(58deg) scale(.4); opacity:0;
  }
  .contact-fx.play .fx-map .fx-map-plane{ animation:fx-map-in .6s var(--ease-out) forwards; }
  @keyframes fx-map-in{ to{ transform:perspective(500px) rotateX(58deg) scale(1); opacity:1; } }
  .fx-map .fx-pin{ position:absolute; left:50%; bottom:52px; margin-left:-19px; color:var(--accent); opacity:0; transform:translateY(-140px); z-index:1; }
  .fx-map .fx-pin svg{ width:38px; height:38px; display:block; filter:drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
  .contact-fx.play .fx-map .fx-pin{ animation:fx-pin-drop .75s var(--ease-spring) .5s forwards; }
  @keyframes fx-pin-drop{ 0%{ opacity:1; transform:translateY(-140px); } 62%{ transform:translateY(0); } 78%{ transform:translateY(-12px); } 100%{ opacity:1; transform:translateY(0); } }
  .fx-map .fx-pin-ripple{
    position:absolute; left:50%; bottom:44px; width:52px; height:18px; margin-left:-26px; border-radius:50%;
    border:2px solid rgba(var(--accent-rgb),.75); opacity:0;
  }
  .contact-fx.play .fx-map .fx-pin-ripple{ animation:fx-pin-ripple 1s ease-out 1.05s infinite; }
  @keyframes fx-pin-ripple{ 0%{ opacity:.9; transform:scale(.4); } 100%{ opacity:0; transform:scale(2.1); } }

  /* ---------- Ucapan selamat datang (kunjungan pertama) ---------- */
  .welcome-overlay{
    position:fixed; inset:0; z-index:9350;
    display:flex; align-items:center; justify-content:center; padding:1.25rem;
    background:rgba(8,9,8,.62);
    backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); /* blur ikut fade, tidak muncul mendadak */
    opacity:0;
    transition:opacity .5s var(--ease-out), backdrop-filter .6s var(--ease-out), -webkit-backdrop-filter .6s var(--ease-out);
  }
  .welcome-overlay.show{ opacity:1; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .welcome-card{
    position:relative; text-align:center; max-width:min(440px,92vw); overflow:hidden;
    background:var(--surface); border:1px solid var(--border); border-radius:28px;
    padding:2.1rem 1.7rem 1.8rem;
    transform:translateY(28px) scale(.9); opacity:0;
    transition:transform .7s var(--ease-spring), opacity .45s var(--ease-out);
  }
  .welcome-overlay.show .welcome-card{ transform:translateY(0) scale(1); opacity:1; }
  .welcome-mark{ position:relative; width:58px; height:58px; margin:0 auto 1.1rem; }
  .welcome-mark svg, .welcome-mark img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }
  .welcome-card h2{ font-size:clamp(1.25rem,4.5vw,1.5rem); margin-bottom:.55rem; }
  /* Judul muncul huruf demi huruf */
  .welcome-card h2 .w-word{ display:inline-block; white-space:nowrap; }
  .welcome-card h2 .w-char{ display:inline-block; opacity:0; transform:translateY(16px) rotate(4deg); animation:w-char-in .55s var(--ease-spring) forwards; }
  @keyframes w-char-in{ to{ opacity:1; transform:translateY(0) rotate(0); } }
  .welcome-card > p{ color:var(--muted); font-size:.92rem; margin-bottom:1.5rem; }
  .welcome-actions{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
  .welcome-spark{
    position:absolute; color:var(--accent); pointer-events:none; line-height:1;
    text-shadow:0 0 12px rgba(var(--accent-rgb),.85);
  }

  /* ---------- Tur berpemandu: spotlight + kartu petunjuk ---------- */
  .tour-spotlight{
    position:fixed; z-index:9330; pointer-events:none; border-radius:22px;
    box-shadow:0 0 0 200vmax rgba(8,9,8,.72);
    border:2px solid rgba(var(--accent-rgb),.7);
  }
  .tour-tip{
    position:fixed; z-index:9331; width:min(320px, calc(100vw - 2rem));
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:1.05rem 1.15rem; box-shadow:0 18px 44px rgba(0,0,0,.38);
  }
  .tour-step-count{ font-size:.66rem; font-weight:800; letter-spacing:.09em; color:var(--accent); text-transform:uppercase; }
  .tour-tip h3{ font-size:1rem; margin:.3rem 0 .3rem; }
  .tour-tip p{ font-size:.84rem; color:var(--muted); margin-bottom:.85rem; }
  .tour-nav{ display:flex; align-items:center; gap:.5rem; }
  .tour-nav .btn{ padding:.5rem 1rem; font-size:.78rem; }
  .tour-skip{ margin-left:auto; font-size:.76rem; font-weight:700; color:var(--muted); }
  .tour-skip:hover{ color:var(--text); }

/* Google Translate suka membuang spasi asli di sekitar "Simpul Project" begitu widget aktif
   (mis. "Simpul Project berdiri" -> "simpulprojectstand") karena elemen notranslate diperlakukan
   sebagai token utuh saat teks di sekitarnya diterjemahkan ulang. Beri margin visual pengganti,
   tapi HANYA saat halaman sedang diterjemahkan (html.translated-ltr/rtl, class yang disematkan
   widget itu sendiri) supaya tampilan bahasa sumber (id) tidak ikut berubah. */
html.translated-ltr .brand-nt,
html.translated-rtl .brand-nt{ margin-inline:.22em; }