:root{
    --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:88px;
    --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
  }
  html[data-theme="light"]{
    --paper:#FAF8F4; --paper-2:#F1ECE3; --card:#FFFFFF;
    /* --ink-soft dulu #8A8375, tapi itu cuma 3.55:1 di atas --paper —
       di bawah ambang WCAG AA 4.5:1 untuk teks ukuran biasa, padahal
       token ini dipakai untuk keterangan yang memang dibaca (catatan
       hero, label statistik, deskripsi paket & tema). Digelapkan ke
       nilai yang lolos di ketiga permukaan terang: 5.22 di --paper,
       4.70 di --paper-2, 5.54 di --card, dan tetap lebih terang dari
       --ink-mid sehingga hierarkinya utuh. Versi gelapnya sudah lolos,
       jadi tidak diubah. */
    --ink:#2B2822; --ink-mid:#5C574C; --ink-soft:#6F6857;
    --accent:#A9754C; --accent-dark:#845B39; --accent-tint:#F1E4D6;
    --line:#E6DFD1; --line-soft:#F0EAE0;
    --shadow:0 20px 44px -18px rgba(43,40,34,0.20);
  }
  html[data-theme="dark"]{
    --paper:#1A1916; --paper-2:#221F1A; --card:#262421;
    --ink:#F2EFE8; --ink-mid:#C5BFB2; --ink-soft:#928B7B;
    --accent:#C89968; --accent-dark:#DDB183; --accent-tint:#312920;
    --line:#38342B; --line-soft:#2C2922;
    --shadow:0 20px 44px -18px rgba(0,0,0,0.55);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;font-size:16px;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;line-height:1.25;color:var(--ink);}
  h1{font-size:clamp(29px,5.4vw,46px);letter-spacing:-0.01em;}
  h2{font-size:clamp(23px,3.6vw,31px);}
  h3{font-size:17px;}
  .script{font-style:italic;color:var(--accent);}
  p{color:var(--ink-mid);}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
  ul{list-style:none;}

  .wrap{max-width:1120px;margin:0 auto;padding-left:var(--s3);padding-right:var(--s3);}
  section{padding-top:var(--s6);padding-bottom:var(--s6);}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

  .eyebrow{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dark);font-weight:600;margin-bottom:var(--s2);}
  .section-head{max-width:600px;margin-bottom:var(--s5);}
  .section-head h2{margin-bottom:var(--s2);}
  .section-head p{font-size:16px;}
  .section-head.center{text-align:center;margin-left:auto;margin-right:auto;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;font-size:14.5px;font-weight:500;border-radius:var(--r-full);border:1.5px solid transparent;transition:transform .18s,background .18s;white-space:nowrap;}
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-outline{border-color:var(--accent);color:var(--accent-dark);}
  .btn-outline:hover{background:var(--accent-tint);}
  .btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink);}
  .btn-danger{background:#C0503D;color:#fff;}
  .btn-danger:hover{background:#A8432F;}
  html[data-theme="dark"] .btn-danger{background:#E08A78;color:#2B2822;}
  html[data-theme="dark"] .btn-danger:hover{background:#D67862;}
  .btn-sm{padding:9px 18px;font-size:13.5px;}
  .btn-block{width:100%;}
  .btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;}

  header{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--line-soft);}
  nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:13px 0;}
  .logo{font-family:'Fraunces',serif;font-size:18px;font-weight:600;white-space:nowrap;flex-shrink:0;}
  .nav-primary{display:flex;gap:var(--s3);font-size:14px;}
  .nav-primary a{color:var(--ink-mid);}
  .nav-primary a:hover{color:var(--accent-dark);}
  .nav-primary a.active{color:var(--ink);font-weight:600;}
  .drawer-links a.active{color:var(--accent-dark);}
  .nav-right{display:flex;align-items:center;gap:10px;}
  .nav-login{font-size:14px;color:var(--ink-mid);}
  .nav-login:hover{color:var(--accent-dark);}
  .nav-account{position:relative;display:inline-flex;align-items:center;}
  .nav-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:14px;flex-shrink:0;}
  .nav-avatar-sm{width:28px;height:28px;font-size:12.5px;margin-right:8px;vertical-align:middle;}
  .nav-account-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow);padding:6px;display:none;flex-direction:column;z-index:130;}
  .nav-account-menu.open{display:flex;}
  .nav-account-item{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-mid);background:none;border:none;font-family:inherit;cursor:pointer;}
  .nav-account-item:hover{background:var(--paper);color:var(--ink);}
  .icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-mid);border:1px solid var(--line);flex-shrink:0;}
  .icon-btn:hover{background:var(--paper-2);}
  .desktop-only{display:inline-flex;}
  .burger{display:none;width:36px;height:36px;align-items:center;justify-content:center;color:var(--ink);}

  .drawer{position:fixed;inset:0;background:var(--paper);z-index:95;display:none;flex-direction:column;padding:var(--s3);}
  .drawer.open{display:flex;}
  .drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5);}
  .drawer-links{display:flex;flex-direction:column;gap:4px;}
  .drawer-links a{font-family:'Fraunces',serif;font-size:22px;padding:10px 0;border-bottom:1px solid var(--line-soft);}
  .drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;}

  .hero{display:grid;grid-template-columns:1.05fr 0.95fr;column-gap:var(--s6);align-items:center;padding-top:var(--s6);padding-bottom:var(--s7);
    grid-template-areas:
      "intro  slider"
      "cta    slider"
      "trust  slider";}
  .hero-intro{grid-area:intro;}
  .hero-cta{grid-area:cta;}
  .hero-trust{grid-area:trust;}
  .hero-slider{grid-area:slider;}
  .hero h1{margin-bottom:var(--s3);}
  .hero-lead{font-size:17px;max-width:440px;margin-bottom:var(--s4);}
  .hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);}
  .hero-note{font-size:13px;color:var(--ink-soft);}
  .hero-trust{display:flex;gap:var(--s4);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);flex-wrap:wrap;}
  .trust-item .n{font-family:'Fraunces',serif;font-size:21px;font-weight:600;}
  .trust-item .l{font-size:12px;color:var(--ink-soft);line-height:1.4;}

  .slider-frame{position:relative;height:400px;}
  .slider-viewport{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y;}
  .slide-card{position:absolute;top:50%;left:50%;width:230px;aspect-ratio:3/4;background:var(--card);border-radius:var(--r-lg);padding:var(--s5) var(--s3);display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:var(--shadow);border:1px solid var(--line-soft);transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;cursor:grab;user-select:none;-webkit-user-select:none;}
  .slide-card:active{cursor:grabbing;}
  .slide-card .ec{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);}
  .slide-card .names{font-family:'Fraunces',serif;font-size:25px;line-height:1.3;margin:var(--s2) 0 var(--s1);color:var(--ink);}
  .slide-card .divider{width:26px;height:1px;background:var(--accent);opacity:0.5;margin:var(--s2) auto;}
  .slide-card .date{font-size:11.5px;color:var(--ink-soft);letter-spacing:0.08em;}
  .slide-card[data-pos="active"]{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:3;}
  .slide-card[data-pos="prev"]{transform:translate(calc(-50% - 122px),-50%) scale(.82);opacity:.45;z-index:2;}
  .slide-card[data-pos="next"]{transform:translate(calc(-50% + 122px),-50%) scale(.82);opacity:.45;z-index:2;}
  .slide-card[data-pos="hidden"]{transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:1;pointer-events:none;}
  .slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:var(--shadow);}
  .slider-arrow:hover{background:var(--paper-2);}
  .slider-arrow.prev{left:4px;}
  .slider-arrow.next{right:4px;}
  .slider-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--s3);}
  .slider-dot{width:8px;height:8px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s;}
  .slider-dot.active{background:var(--accent);transform:scale(1.3);}

  .band{background:var(--paper-2);}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);}

  /* ---------- kartu tema ----------
     Kartu potret penuh gambar: foto mengisi seluruh kartu, keterangan
     duduk di atasnya, dipisahkan gradasi gelap yang menebal ke bawah.

     Gradasinya bukan hiasan. Dua dari tiga sampul tema berlatar TERANG
     (Ivory Gold dan Sage Rose), jadi tanpa lapisan gelap ini tulisan
     putihnya lenyap. Pekat di kaki kartu, bening di kepala, supaya
     desain temanya tetap terlihat utuh di bagian atas. */
  .tpl-card{
    position:relative;
    aspect-ratio:3/4.35;
    border-radius:22px;
    overflow:hidden;
    background:var(--paper-2);
    box-shadow:0 18px 38px -22px rgba(60,40,25,.45);
    isolation:isolate;
  }
  .tpl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .tpl-scrim{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(20,15,11,0) 0%,
      rgba(20,15,11,.12) 32%,
      rgba(20,15,11,.62) 58%,
      rgba(20,15,11,.92) 100%);
  }
  .tpl-isi{position:absolute;left:0;right:0;bottom:0;padding:var(--s3) var(--s3) calc(var(--s3) + 2px);color:#fff;}
  .tpl-baris{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px;}
  .tpl-nama{font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:#fff;line-height:1.2;margin:0;}
  .tpl-harga{flex-shrink:0;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:600;color:#fff;white-space:nowrap;}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tpl-harga{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
  }
  .tpl-ringkas{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.9);margin:0 0 10px;}
  .tpl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
  .tpl-tag{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;border-radius:999px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
    font-size:11px;font-weight:600;color:#fff;white-space:nowrap;
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tpl-tag{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
  }
  .tpl-tag[hidden]{display:none;}
  /* Lencana paket. Warnanya TETAP, bukan var(--accent) — kartu tema
     duduk di atas foto sampul tema yang bisa terang atau gelap, dan
     token aksen sendiri berbalik terang/gelap antar tema situs (lihat
     catatan token warna di memori project). Yang dibutuhkan di sini
     adalah dua warna yang selalu sama di mana pun kartunya muncul. */
  .tpl-tag-paket-standar{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);}
  .tpl-tag-paket-pro{
    background:linear-gradient(135deg,#C9962F,#E7C06A 55%,#B07E22);
    border-color:rgba(255,255,255,.45);color:#2A1B06;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
  }

  .tpl-aksi{display:flex;gap:8px;}
  .tpl-ikon{width:17px;height:17px;flex-shrink:0;display:none;}
  .tpl-btn{
    flex:1;min-width:0;
    display:inline-flex;align-items:center;justify-content:center;
    height:40px;padding:0 12px;border-radius:999px;
    font-size:13px;font-weight:600;font-family:inherit;
    cursor:pointer;text-align:center;white-space:nowrap;
    transition:transform .18s ease,background .18s ease;
  }
  .tpl-btn:hover{transform:translateY(-1px);}
  /* Tombol utama putih pekat, seperti referensinya: di atas foto apa pun,
     putih solid adalah satu-satunya yang pasti terbaca. */
  .tpl-btn-utama{background:#fff;color:#231C14;border:0;}
  .tpl-btn-utama:hover{background:#F3EDE4;}
  .tpl-btn-kaca{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;}
  .tpl-btn-kaca:hover{background:rgba(255,255,255,.24);}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tpl-btn-kaca{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  }

  .step-card{background:var(--card);border-radius:var(--r-md);padding:var(--s4);border:1px solid var(--line-soft);}
  .step-num{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent-tint);margin-bottom:var(--s3);}
  .step-card h3{margin-bottom:6px;}
  .step-card p{font-size:14px;margin-bottom:var(--s2);}
  .step-detail{font-size:12.5px;color:var(--ink-soft);padding-top:var(--s2);border-top:1px solid var(--line-soft);margin-bottom:0;}

  .why-card{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);}
  .why-card:first-child{border-top:none;padding-top:0;}
  .why-icon{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;color:var(--accent-dark);}
  .why-card h3{margin-bottom:5px;font-size:16px;}
  .why-card p{font-size:14px;}

  .path-card{background:var(--card);border-radius:var(--r-md);padding:var(--s4);border:1px solid var(--line-soft);display:flex;flex-direction:column;}
  .path-card.accent{background:var(--accent-tint);}
  /* Jalur kedua ke layanan "Dibuatin admin": email.
     Sengaja dibuat lebih lirih dari tombol WhatsApp di atasnya — WhatsApp
     tetap jalur utama karena paling cepat dibalas, dan email ada untuk
     orang yang belum mau menyerahkan nomor HP-nya hanya untuk bertanya.
     Latarnya transparan, bukan var(--card) bawaan .btn-ghost: kartu ini
     berlatar accent-tint, dan kotak putih di atasnya membuat tombol
     sekunder justru terlihat lebih menonjol daripada tombol utamanya. */
  .path-card-email{
    margin-top:8px;
    background:transparent;
    border:1px solid var(--accent);
    color:var(--accent-dark);
    font-size:13.5px;
  }
  .path-card-email:hover{background:rgba(255,255,255,.55);}
  html[data-theme="dark"] .path-card-email:hover{background:rgba(255,255,255,.08);}
  /* ---- Bidang "Rancangan khusus" di section Dibuatin Admin ----
     Dua kolom di layar lebar (teks + aksi yang menempel di kanan), satu
     kolom di HP. Latarnya lebih pekat dari .path-card supaya terbaca
     sebagai penawaran yang berbeda jenisnya, bukan kartu ketiga. */
  .khusus-band{
    margin-top:var(--s4);
    display:grid;grid-template-columns:1.6fr .9fr;gap:var(--s5);
    align-items:center;
    padding:var(--s5);
    border-radius:var(--r-lg);
    border:1px solid var(--accent-tint);
    background:
      radial-gradient(circle at 88% 0%,var(--accent-tint),transparent 60%),
      var(--card);
    box-shadow:0 24px 60px -46px rgba(90,60,40,.65);
  }
  .khusus-band h3{margin:0 0 8px;}
  .khusus-band > .khusus-teks > p{font-size:14px;margin:0 0 var(--s3);}
  .khusus-list{margin-bottom:var(--s3);}
  .khusus-nota{font-size:13px;color:var(--ink-soft);border-left:2px solid var(--accent-tint);padding-left:12px;margin:0;}
  .khusus-aksi{display:flex;flex-direction:column;gap:10px;}
  .khusus-tag{background:var(--accent-tint);}

  .tag{display:inline-block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;background:var(--card);color:var(--accent-dark);padding:5px 14px;border-radius:var(--r-full);font-weight:600;margin-bottom:var(--s2);align-self:flex-start;}
  .path-card h3{margin-bottom:6px;}
  .path-card > p{font-size:14px;margin-bottom:var(--s3);}
  .path-list{margin-bottom:var(--s3);}
  .path-list li{font-size:13.5px;color:var(--ink-mid);padding:5px 0;display:flex;gap:8px;}
  .ico-yes{color:var(--accent);flex-shrink:0;margin-top:3px;}
  .ico-no{color:var(--ink-soft);opacity:0.45;flex-shrink:0;margin-top:3px;}
  .path-card .btn{margin-top:auto;}

  .toggle-wrap{display:flex;justify-content:center;align-items:center;gap:var(--s2);margin-bottom:var(--s5);}
  .toggle-label{font-size:14px;color:var(--ink-soft);font-weight:500;}
  .toggle-label.active{color:var(--ink);}
  .switch{position:relative;width:48px;height:26px;background:var(--accent);border-radius:var(--r-full);flex-shrink:0;}
  .switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;}
  .switch.on .knob{transform:translateX(22px);}

  .price-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);align-items:start;}
  .price-card{background:var(--card);border-radius:var(--r-md);border:1px solid var(--line-soft);padding:var(--s4) var(--s3);display:flex;flex-direction:column;height:100%;}
  .price-card.popular{border:2px solid var(--accent);position:relative;}
  .price-card.soon{position:relative;opacity:.78;}
  .pop-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:600;padding:3px 14px;border-radius:var(--r-full);white-space:nowrap;}
  .pop-badge.badge-soon{background:var(--ink-soft);}
  .tier-name{font-family:'Fraunces',serif;font-size:20px;font-weight:600;margin-bottom:4px;}
  .tier-desc{font-size:13px;color:var(--ink-soft);margin-bottom:var(--s3);min-height:38px;}
  .price-amount{display:flex;align-items:baseline;gap:4px;padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
  .price-amount .cur{font-size:14px;color:var(--ink-soft);}
  .price-amount .num{font-family:'Fraunces',serif;font-size:31px;font-weight:600;line-height:1;}
  .price-amount .per{font-size:12.5px;color:var(--ink-soft);}
  .feat-list{margin-bottom:var(--s3);}
  .feat-list li{font-size:13.5px;padding:6px 0;display:flex;gap:8px;align-items:flex-start;line-height:1.5;}
  .feat-list li.no{color:var(--ink-soft);}
  .price-card .btn{margin-top:auto;}
  .pricing-note{font-size:14px;color:var(--ink-mid);text-align:center;max-width:640px;margin:0 auto var(--s4);}
  .pricing-note a{color:var(--accent-dark);}

  .reseller{background:var(--card);border-radius:var(--r-lg);padding:var(--s5);border:1px solid var(--line-soft);display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--s5);align-items:center;}
  .reseller h2{margin-bottom:var(--s2);}
  .reseller p{font-size:15px;margin-bottom:var(--s3);}
  .reseller-points li{font-size:14px;padding:6px 0;display:flex;gap:8px;color:var(--ink-mid);}

  .faq-wrap{max-width:760px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;font-size:16px;font-weight:500;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item .mark{color:var(--accent);font-size:20px;flex-shrink:0;transition:transform .2s;}
  .faq-item[open] .mark{transform:rotate(45deg);}
  .faq-item .answer{padding-bottom:var(--s3);font-size:14.5px;color:var(--ink-mid);max-width:660px;}
  .faq-item .answer p + p{margin-top:var(--s2);}

  .final-cta{background:var(--accent);border-radius:var(--r-lg);padding:var(--s6) var(--s4);text-align:center;}
  .final-cta h2{color:#fff;margin-bottom:var(--s2);}
  .final-cta p{color:rgba(255,255,255,0.88);max-width:460px;margin:0 auto var(--s4);}
  .final-cta .btn-primary{background:#fff;color:var(--accent-dark);}
  .final-cta .btn-outline{border-color:rgba(255,255,255,0.7);color:#fff;}
  .final-cta .btn-outline:hover{background:rgba(255,255,255,0.14);}
  .cta-actions{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;}

  /* ---------- halaman dokumen (syarat.html, privasi.html) ----------
     Kolom teks sempit disengaja: ini dokumen untuk dibaca, bukan
     dipindai, dan baris sepanjang 1120px membuat mata kehilangan
     barisnya. */
  .legal{padding-top:var(--s6);padding-bottom:var(--s6);}
  .legal-wrap{max-width:720px;}
  .legal h1{font-size:clamp(28px,6vw,38px);margin-bottom:var(--s2);}
  .legal-tanggal{font-size:13px;color:var(--ink-soft);margin-bottom:var(--s5);}
  .legal-lead{font-size:16.5px;line-height:1.75;color:var(--ink-mid);padding-bottom:var(--s4);border-bottom:1px solid var(--line-soft);margin-bottom:var(--s5);}
  .legal h2{font-size:19px;margin-top:var(--s5);margin-bottom:var(--s2);}
  .legal h3{font-size:15px;margin-top:var(--s4);margin-bottom:var(--s2);color:var(--ink-mid);}
  .legal p{margin-bottom:var(--s3);line-height:1.75;}
  /* list-style dikembalikan eksplisit: reset global menyetel semua <ul>
     jadi tanpa bulatan, dan di dokumen sepanjang ini daftar tanpa
     penanda terbaca seperti paragraf yang menggantung. */
  .legal ul{margin:0 0 var(--s3);padding-left:22px;list-style:disc;}
  .legal li{margin-bottom:8px;line-height:1.7;color:var(--ink-mid);}
  .legal a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}
  .legal-terkait{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-soft);font-size:14px;}

  footer{background:var(--paper-2);padding-top:var(--s6);padding-bottom:var(--s4);margin-top:var(--s6);}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s4);margin-bottom:var(--s5);}
  .foot-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);font-weight:600;font-family:'Inter',sans-serif;margin-bottom:var(--s2);}
  .foot-col li{padding:5px 0;font-size:13.5px;color:var(--ink-mid);}
  .foot-col li a:hover{color:var(--accent-dark);}
  .foot-about p{font-size:13.5px;margin-top:var(--s2);max-width:290px;}
  /* Kontak lengkap di kolom pertama footer. Barisnya memakai grid dua
     kolom (ikon + isi) supaya baris alamat yang jatuh ke dua baris tetap
     rata terhadap ikonnya — dengan flex, teks baris kedua akan menggantung
     di bawah ikon. */
  .foot-kontak{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:290px;}
  .foot-kontak li{display:grid;grid-template-columns:26px 1fr;align-items:start;gap:9px;padding:0;font-size:13.5px;line-height:1.5;color:var(--ink-mid);}
  .foot-kontak-ikon{
    width:26px;height:26px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-tint);color:var(--accent-dark);
  }
  .foot-kontak-ikon svg{width:14px;height:14px;}
  .foot-kontak a{color:inherit;overflow-wrap:anywhere;}
  .foot-kontak a:hover{color:var(--accent-dark);}
  /* ---------- metode pembayaran di footer ----------
     Tujuannya kepercayaan, bukan hiasan: orang perlu tahu bisa bayar
     pakai apa SEBELUM mendaftar, bukan baru saat popup terbuka. Karena
     itu tiap metode diberi keterangan singkat — "QRIS" saja tidak
     memberi tahu bahwa itu bisa dipindai semua e-wallet. */
  .foot-pay{padding-top:var(--s4);padding-bottom:var(--s4);border-top:1px solid var(--line);}
  .foot-pay-judul{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:var(--s3);}
  /* Dikelompokkan per jenis, bukan satu deret panjang berisi dua belas
     logo. Deret rata tanpa jeda terbaca sebagai tumpukan tanpa arti,
     sementara yang sebetulnya ditanyakan orang — "cara bayar yang biasa
     saya pakai ada tidak" — adalah pertanyaan per kelompok. */
  .pay-grup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
  .pay-grup-judul{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:8px;}
  /* Kisi metode pembayaran: kotak putih kecil berisi logo, mengikuti
     pola yang lazim di footer toko online. Ukurannya seragam supaya logo
     yang bentuknya berbeda-beda tetap terbaca sebagai satu deret. */
  /* Lebarnya ditahan di 400px supaya kelompok bank yang berisi tujuh
     logo pecah jadi 4+3, bukan 6+1. Satu logo yang berdiri sendiri di
     baris kedua terbaca seperti kesalahan, bukan seperti daftar. */
  .pay-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-width:400px;}
  .pay-chip{display:flex;align-items:center;justify-content:center;height:52px;padding:7px 12px;border:1px solid var(--line-soft);border-radius:10px;background:#fff;}

  /* max-height membatasi tinggi KANVAS SVG, bukan tinggi gambarnya. Tiga
     berkas datang dengan kanvas bermargin lebar — GoPay yang paling parah:
     kanvas 2540x2540 untuk logo setinggi 526 unit, jadi pada 34px logonya
     digambar setinggi 7px. viewBox ketiganya sudah DIPANGKAS ke batas
     tintanya (lihat assets/pembayaran/README.md), sehingga semua logo
     kembali tunduk pada satu aturan yang sama dan tidak perlu tinggi
     khusus per merek.
     Yang tersisa cuma satu pembedaan yang sah: logo mendekati persegi
     (BRI 1.18, BSI 1.14, Mastercard 1.29) tidak pernah mentok di lebar
     chip, jadi pada tinggi yang sama luasnya terbaca lebih kecil daripada
     wordmark melebar seperti CIMB (6.64) atau Permata (4.05). */
  .pay-logo-img{max-width:100%;max-height:24px;width:auto;height:auto;object-fit:contain;display:block;}
  .pay-logo-img[data-metode="bri"],
  .pay-logo-img[data-metode="bsi"],
  .pay-logo-img[data-metode="mastercard"]{max-height:34px;}
  /* Cadangan teks. Hanya tampil kalau logonya belum ada, jadi footer tidak
     pernah terlihat rusak selama berkas logonya belum dilengkapi. */
  .pay-teks{display:none;font-size:12px;font-weight:600;color:#4A4438;letter-spacing:.01em;text-align:center;line-height:1.2;}
  .pay-teks.tampil{display:block;}
  /* Chip-nya sengaja tetap putih di tema gelap: logo merek dirancang untuk
     latar terang, dan menaruhnya di kotak gelap membuat sebagian hilang. */
  html[data-theme="dark"] .pay-chip{border-color:rgba(255,255,255,.12);}

  .foot-bottom{padding-top:var(--s3);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

  .modal-overlay{position:fixed;inset:0;background:rgba(43,40,34,0.55);backdrop-filter:blur(2px);z-index:120;display:none;align-items:center;justify-content:center;padding:var(--s3);}
  html[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.65);}
  .modal-overlay.open{display:flex;}
  .modal-card{position:relative;width:100%;max-width:400px;max-height:calc(100vh - var(--s5));overflow-y:auto;background:var(--card);border-radius:var(--r-lg);border:1px solid var(--line-soft);box-shadow:var(--shadow);padding:var(--s5) var(--s4) var(--s4);}
  .modal-card-sm{max-width:340px;}
  #confirmOverlay{z-index:130;}
  .modal-close{position:absolute;top:var(--s3);right:var(--s3);}

  .workspace-msg{text-align:center;color:var(--ink-mid);font-size:14px;margin-top:var(--s4);min-height:18px;}
  .workspace-placeholder{text-align:center;padding:var(--s7) 0;}
  .workspace-placeholder h2{margin-bottom:var(--s2);}

  .dash-view{display:none;}
  .dash-view.active{display:block;}
  .dash-empty{text-align:center;max-width:420px;margin:0 auto;padding:var(--s7) var(--s3);}
  .dash-empty-icon{width:64px;height:64px;border-radius:50%;background:var(--accent-tint);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);}
  .dash-empty h2{margin-bottom:var(--s2);}
  .dash-empty p{margin-bottom:var(--s4);}

  .home-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap;}
  .home-head h2{margin:0;}
  .home-public-link{display:inline-block;font-size:13.5px;color:var(--accent-dark);text-decoration:underline;word-break:break-all;margin-bottom:var(--s2);}
  .home-stat-row{margin-top:var(--s3);}
  .invitation-card{position:relative;padding-right:52px;}
  .invitation-card .ucapan-admin-delete{position:absolute;top:var(--s3);right:var(--s3);}

  /* Dashboard shell: sidebar (desktop/tablet) + tabbar (mobile) liquid navigation */
  .app-shell main.wrap{margin:0 0 0 236px;}

  .sidebar{position:fixed;top:0;left:0;bottom:0;width:236px;background:var(--card);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--s4) var(--s2);z-index:100;}
  .sidebar-logo{display:block;margin-bottom:var(--s4);padding-left:12px;cursor:pointer;transition:opacity .2s ease;}
  .sidebar-logo:hover{opacity:.7;}
  .side-nav{position:relative;display:flex;flex-direction:column;gap:4px;}
  .side-item{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:48px;padding:0 12px;border-radius:var(--r-md);color:var(--ink-mid);font-size:14.5px;width:100%;text-align:left;background:none;transition:color .25s;}
  .side-item .nav-icon{display:flex;flex-shrink:0;}
  .side-item.active{color:#fff;}
  #sidePill{width:100%;height:48px;top:0;left:0;transform:translateY(calc(var(--active-index,0) * 52px));}

  .nav-pill{position:absolute;background:var(--accent);border-radius:var(--r-md);z-index:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),width .4s cubic-bezier(.34,1.56,.64,1);}

  .nav-avatar-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:11px;flex-shrink:0;}
  .side-item.active .nav-avatar-badge,.tab-item.active .nav-avatar-badge{outline:2px solid rgba(255,255,255,.7);}

  .tabbar{display:none;}

  .profile-block{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s3);}
  /* Blok yang di-toggle lewat atribut hidden (mis. gerbang link personal
     per tamu). Aturan [hidden] bawaan browser kalah dari display milik
     class, dan pola itu sudah berkali-kali menggigit di project ini —
     dipasang eksplisit supaya tetap aman kalau .profile-block suatu saat
     diberi display sendiri. */
  .profile-block[hidden]{display:none;}
  /* .profile-block tidak menyetel display, jadi [hidden] bawaan browser
     sebenarnya sudah bekerja di sini. Ditulis eksplisit supaya tetap
     benar kalau suatu saat ada yang menambahkan display ke aturan di
     atas — pola itu sudah pernah membuat zona unggah tidak mau hilang. */
  .profile-block[hidden]{display:none;}
  .profile-block-head{display:flex;align-items:center;gap:var(--s3);}
  .profile-block h3{margin-bottom:6px;}
  .profile-block p{margin-bottom:var(--s2);}
  .profile-block-head p{margin-bottom:0;color:var(--ink-soft);font-size:14px;}
  .profile-block > .btn,.profile-block > p:last-child{margin-bottom:0;}
  .hadiah-note{font-size:12.5px;color:var(--ink-soft);margin-bottom:var(--s3);}
  .hadiah-bukti-btn{margin-top:8px;}
  .profile-avatar-lg{width:56px;height:56px;font-size:20px;}
  .profile-block .toggle-wrap{justify-content:flex-start;margin:4px 0 0;}

  /* Kartu identitas: nama + lencana admin sebaris, email di bawahnya. */
  .profile-ident{min-width:0;}
  .profile-ident-baris{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .profile-ident-baris h3{margin-bottom:0;}
  /* Lencana admin sengaja KECIL. Sebelumnya ia satu kartu penuh berisi
     paragraf penjelas — tiga kalimat untuk menyampaikan satu kata, dan
     salah satu kalimatnya bahkan sudah tidak berlaku sejak kunci kata
     sandi Panel Admin dibuang. */
  .badge-admin-sm{padding:2px 9px;font-size:11px;letter-spacing:.04em;}
  .badge-admin-sm[hidden]{display:none;}

  /* Judul kelompok di dalam Profil (Akun / Tampilan / Bantuan). Beda dari
     h3 biasa: ia menamai SEKUMPULAN kolom di bawahnya, bukan satu blok,
     jadi diberi garis pemisah supaya batas kelompoknya terbaca. */
  .profile-grup-judul{
    font-size:12px;font-family:'Inter',sans-serif;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
    padding-bottom:var(--s2);margin-bottom:var(--s3);
    border-bottom:1px solid var(--line-soft);
  }
  /* Keterangan di bawah label — menjelaskan apa yang akan terjadi sebelum
     tombolnya ditekan, bukan sesudahnya. */
  .profile-ket{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:-2px 0 10px;}
  .profile-block label + .profile-ket{margin-top:2px;}
  /* Label di kartu Profil harus MEMULAI barisnya sendiri. Tanpa ini ia
     inline dan menempel di kanan elemen sebelumnya — "Metode masuk
     terhubung" sempat berdiri sebaris dengan tombol Ganti Kata Sandi,
     sehingga terbaca seperti keterangan tombol itu. Sebelumnya tidak
     kelihatan karena tiap label kebetulan didahului elemen blok. */
  .profile-block label{display:block;}
  /* Jarak antar kolom di dalam satu kartu. Label kedua dan seterusnya
     diberi napas supaya kelompoknya terbaca sebagai daftar, bukan sebagai
     satu tumpukan rapat. */
  .profile-block label:not(:first-of-type){margin-top:var(--s3);}
  .profile-block > .btn + label{margin-top:var(--s3);}
  .profile-msg{font-size:13px;color:var(--ink-mid);margin-top:var(--s2);min-height:18px;}
  .profile-msg.err{color:#C0503D;}
  html[data-theme="dark"] .profile-msg.err{color:#E08A78;}
  .profile-msg.ok{color:var(--accent-dark);}

  .ws-head{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4);align-items:flex-start;}
  .ws-head-title h2{margin-top:4px;}
  .ws-tabs{display:flex;background:var(--paper-2);border-radius:var(--r-full);padding:4px;margin-bottom:var(--s5);gap:4px;overflow-x:auto;}
  .ws-tab{flex:1;border:none;background:transparent;padding:10px 14px;border-radius:var(--r-full);font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;white-space:nowrap;}
  .ws-tab.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
  .ws-panel{display:none;}
  .ws-panel.active{display:block;}
  .ws-subhead{font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.06em;margin:var(--s3) 0 0;}
  .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3);}
  .field label{display:block;font-size:13px;color:var(--ink-mid);margin-bottom:6px;font-weight:500;}
  .field input,.field textarea{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:15px;font-family:inherit;}
  .field textarea{resize:vertical;min-height:80px;}
  .field-full{grid-column:1/-1;}
  .field-error{font-size:12.5px;color:#C0503D;margin-top:6px;min-height:0;display:none;}
  html[data-theme="dark"] .field-error{color:#E08A78;}
  .field.invalid input,.field.invalid textarea{border-color:#C0503D;}
  html[data-theme="dark"] .field.invalid input,html[data-theme="dark"] .field.invalid textarea{border-color:#E08A78;}
  .field.invalid .field-error{display:block;}
  /* [hidden] hanya diatur stylesheet bawaan browser, dan aturan bawaan itu
     KALAH dari .foto-upload-zone{display:flex} di bawah. Akibatnya zona
     "Klik atau seret ... ke sini" tetap tampil di bawah foto/lagu yang sudah
     diunggah — persis hal yang disembunyikan dashboard.js lewat
     zone.hidden = true. Aturan ini yang membuat penyembunyian itu benar-benar
     berlaku, jadi jangan dihapus saat merapikan CSS. */
  .foto-upload-zone[hidden],.foto-upload-actions[hidden]{display:none !important;}
  .foto-upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:var(--s4) var(--s3);border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--paper-2);color:var(--ink-mid);font-size:13.5px;cursor:pointer;transition:border-color .2s,background .2s;}
  .foto-upload-zone svg{width:26px;height:26px;color:var(--ink-soft);}
  .foto-upload-zone:hover,.foto-upload-zone:focus-visible{border-color:var(--accent);background:var(--accent-tint);}
  .foto-upload-zone.dragover{border-color:var(--accent);background:var(--accent-tint);}
  .foto-upload-zone.disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
  .foto-upload-hint{font-size:11.5px;color:var(--ink-soft);}
  .foto-upload-preview{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--paper-2);}
  .foto-upload-preview img{display:block;width:100%;max-height:220px;object-fit:cover;}
  .foto-upload-actions{display:flex;gap:8px;padding:var(--s2);background:var(--card);}
  /* Pilihan dua-kartu (dipakai "Sapaan di Sampul"): radio-nya disembunyikan
     dan seluruh kartunya yang jadi target klik, dengan contoh hasilnya
     ditulis langsung di dalam kartu supaya user tidak perlu menebak
     bedanya. */
  .opsi-radio{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s2);}
  .opsi-radio-item{position:relative;display:flex;gap:10px;align-items:flex-start;padding:var(--s3);border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper-2);cursor:pointer;transition:border-color .2s,background .2s;}
  .opsi-radio-item:hover{border-color:var(--accent);}
  .opsi-radio-item input{margin-top:2px;accent-color:var(--accent);flex-shrink:0;}
  .opsi-radio-item:has(input:checked){border-color:var(--accent);background:var(--accent-tint);}
  .opsi-radio-item input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .opsi-radio-teks{display:block;min-width:0;}
  .opsi-radio-teks b{display:block;font-size:14px;font-weight:600;margin-bottom:4px;}
  .opsi-radio-teks em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
  .foto-upload-status{font-size:12.5px;color:var(--ink-mid);margin-top:6px;min-height:16px;}
  .foto-upload-status.err{color:#C0503D;}
  html[data-theme="dark"] .foto-upload-status.err{color:#E08A78;}
  .foto-upload-status.ok{color:var(--accent-dark);}

  /* Musik latar memakai kerangka .foto-upload yang sama (zone, status,
     tombol), cuma pratinjaunya pemutar audio, bukan gambar. */
  .musik-upload-preview{border-radius:var(--r-md);overflow:hidden;background:var(--paper-2);}
  .musik-upload-preview audio{display:block;width:100%;padding:var(--s2) var(--s2) 0;}
  .musik-upload-preview .foto-upload-actions{background:transparent;}

  /* Bentuk ringkas zona unggah galeri: satu baris, bukan kotak besar.
     Dipakai begitu galeri sudah berisi minimal satu foto. */
  .foto-upload-zone.is-compact{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px var(--s3);gap:4px 10px;font-size:13px;}
  .foto-upload-zone.is-compact svg{width:17px;height:17px;}
  .foto-galeri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);}
  .foto-galeri-grid:not(:empty){margin-bottom:var(--s3);}
  .foto-galeri-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-2);}
  .foto-galeri-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .foto-galeri-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;}
  .foto-galeri-remove:hover{background:rgba(0,0,0,.75);}

  .ws-save-row{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap;}
  .ws-save-msg{font-size:13.5px;color:var(--ink-mid);}
  .ws-save-msg.err{color:#C0503D;}
  html[data-theme="dark"] .ws-save-msg.err{color:#E08A78;}
  .ws-save-msg.ok{color:var(--accent-dark);}

  .palette-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s3);}
  .palette-card{position:relative;display:block;width:100%;text-align:left;border:1.5px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s3);background:var(--paper);transition:border-color .2s,transform .15s;}
  .palette-card:hover{transform:translateY(-2px);}
  .palette-card.selected{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent);}
  .palette-swatches{display:flex;gap:6px;margin-bottom:var(--s2);}
  .palette-swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex-shrink:0;}
  .palette-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .palette-name{font-size:14px;font-weight:500;color:var(--ink);}
  .palette-check{display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;flex-shrink:0;}
  .palette-card.selected .palette-check{display:flex;}

  .pratinjau-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap;}
  .pratinjau-note{font-size:13px;color:var(--ink-soft);}
  .pratinjau-frame-wrap{border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;height:75vh;min-height:520px;background:var(--paper-2);}
  .pratinjau-frame{width:100%;height:100%;border:none;display:block;}

  .slug-input-row{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--paper);}
  .slug-prefix{padding:11px 0 11px 14px;color:var(--ink-soft);font-size:14px;white-space:nowrap;align-self:center;}
  .slug-input-row input{flex:1 1 160px;min-width:120px;border:none;background:transparent;padding:11px 8px;font-size:15px;color:var(--ink);font-family:inherit;}
  .slug-input-row input:focus{outline:none;}
  .slug-input-row .btn{margin:4px 4px 4px 0;flex-shrink:0;}

  .status-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2);}
  /* [hidden] harus disebut eksplisit: .badge punya display sendiri, dan
     aturan [hidden] bawaan browser kalah dari itu. Pola yang sama pernah
     membuat zona unggah tetap tampil padahal sudah di-hidden. */
  .badge-admin{background:var(--accent-tint);color:var(--accent-dark);border-color:var(--accent);}
  .badge[hidden]{display:none;}
  .badge-aktif{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-dark);font-weight:600;}
  .activate-checklist{margin:var(--s3) 0 0;padding-left:20px;color:#C0503D;font-size:13.5px;}
  .activate-checklist li{margin-bottom:4px;}
  html[data-theme="dark"] .activate-checklist{color:#E08A78;}

  /* ---------- kartu pembayaran ----------
     Memakai token yang sama dengan kartu harga di halaman depan supaya
     layar bayar tidak terasa seperti bagian lain dari situs yang berbeda.
     Nominalnya pakai Fraunces, huruf yang sama dengan judul — di layar
     tempat orang memutuskan mengeluarkan uang, angkanya yang harus
     paling dulu terbaca. */
  .bayar-kartu{
    margin-top:var(--s4);
    padding:var(--s4);
    border:1px solid var(--accent-tint);
    border-radius:var(--r-lg);
    background:
      radial-gradient(circle at 100% 0%,var(--accent-tint),transparent 62%),
      var(--card);
    box-shadow:0 18px 40px -28px rgba(90,60,40,.5);
  }
  .bayar-kartu[hidden]{display:none;}
  .bayar-kartu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);}
  .bayar-kartu-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);font-weight:600;margin-bottom:6px;}
  .bayar-kartu-harga{font-family:'Fraunces',serif;font-size:34px;line-height:1.1;font-weight:600;color:var(--ink);margin:0;}
  .bayar-kartu-paket{
    display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;
    background:var(--accent-tint);color:var(--accent-dark);
    font-size:11.5px;font-weight:700;letter-spacing:.04em;
  }
  .bayar-kartu-paket:empty{display:none;}
  .bayar-kartu-sekali{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
  .bayar-kartu-ikon{flex-shrink:0;width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent-dark);}
  .bayar-kartu-ikon svg{width:21px;height:21px;}
  .bayar-kartu-fitur{list-style:none;margin:var(--s4) 0;padding:0;display:flex;flex-direction:column;gap:9px;}
  .bayar-kartu-fitur li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:var(--ink-mid);}
  .bayar-kartu-fitur li::before{
    content:'';position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;
    background:var(--accent-tint);
    /* Centang digambar sebagai mask supaya warnanya ikut token aksen dan
       tetap benar di tema gelap — SVG dengan warna tetap tidak akan. */
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .bayar-kartu-fitur li::after{
    content:'';position:absolute;left:4.5px;top:8px;width:5px;height:2.5px;
    border-left:1.6px solid var(--accent-dark);border-bottom:1.6px solid var(--accent-dark);
    transform:rotate(-45deg);
  }
  .bayar-kanal{margin-top:var(--s3);font-size:12px;color:var(--ink-soft);line-height:2;}
  .bayar-kanal-tag{display:inline-block;padding:2px 8px;margin:0 2px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-soft);color:var(--ink-mid);font-size:11.5px;font-weight:500;white-space:nowrap;}
  .bayar-aman{display:flex;align-items:flex-start;gap:7px;margin-top:var(--s2);font-size:11.5px;line-height:1.55;color:var(--ink-soft);}
  .bayar-aman svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;color:var(--accent);}

  /* Tanda lunas. Sengaja bukan sekadar teks abu-abu: ini satu-satunya
     konfirmasi visual bahwa uang yang sudah keluar benar-benar tercatat. */
  .bayar-lunas{
    display:flex;align-items:center;gap:10px;
    margin-top:var(--s4);padding:var(--s3);
    border:1px solid var(--accent);
    border-radius:var(--r-md);
    background:var(--accent-tint);
    font-size:13.5px;color:var(--ink-mid);
  }
  .bayar-lunas[hidden]{display:none;}
  .bayar-lunas svg{flex-shrink:0;width:20px;height:20px;color:var(--accent-dark);}
  .bayar-lunas strong{color:var(--ink);}

  /* ---------- panel admin (view "admin" di app.html) ---------- */
  /* .side-item dan .tab-item punya display sendiri, jadi aturan [hidden]
     bawaan browser kalah dari keduanya — tanpa baris ini menu Admin tetap
     tampil untuk semua orang. Pola yang sama pernah membuat zona unggah
     tidak mau hilang. */
  .side-item[hidden],.tab-item[hidden]{display:none;}
  .admin-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);}
  .admin-head-aksi{display:flex;gap:8px;flex-wrap:wrap;}
  .admin-sub{font-size:13px;color:var(--ink-soft);}

  /* ---------- baris atas: angka pahlawan + kotak ringkas ----------
     Blok ini sempat HILANG sama sekali. Markup, JS, dan penyesuaian
     layar HP-nya sudah ada, tapi aturan dasarnya tidak pernah ikut
     masuk — akibatnya .admin-atas dan .admin-tiles jatuh jadi tumpukan
     blok tanpa kisi, dan SVG ikon dompet (yang sekarang sudah dibuang
     dari markup) melar memenuhi lebar kartu karena tidak punya ukuran.
     Gejalanya berupa tata letak berantakan, bukan error, jadi tidak ada
     yang mengeluh selain matanya. */
  .admin-atas{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:var(--s3);margin-bottom:var(--s3);align-items:stretch;}

  /* Kartu pendapatan memakai NILAI WARNA TETAP, bukan var(--accent).
     Token itu BERBALIK di tema gelap (terang jadi #A9754C, gelap jadi
     #C89968 yang justru lebih muda), dan blok berwarna bertulisan putih
     yang mengandalkannya sudah pernah turun ke kontras ~2:1 di sini. */
  .admin-hero{
    display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);
    padding:var(--s4);border-radius:var(--r-md);
    background:linear-gradient(150deg,#8A5F3D 0%,#6E4A2E 100%);
    color:#fff;box-shadow:0 14px 30px -20px rgba(60,40,25,.7);
  }
  .admin-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);}
  /* Semua teks di kartu ini dihitung kontrasnya terhadap latar tetap
     #8A5F3D, bukan dikira-kira: putih penuh 5,6:1, dan yang di bawah ini
     4,8:1 — masih di atas 4,5:1 untuk teks sekecil ini. Putih 78% yang
     sempat dipakai jatuh ke 4,1:1. */
  .admin-hero-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.9);}
  .admin-hero-nilai{font-family:'Fraunces',serif;font-size:32px;font-weight:600;line-height:1.1;color:#fff;margin:0;word-break:break-word;}
  .admin-hero-kaki{display:flex;flex-direction:column;gap:6px;}
  .admin-hero-ket{font-size:12px;color:rgba(255,255,255,.9);line-height:1.5;}
  /* Latar pil-nya GELAP, bukan putih transparan. Putih transparan justru
     menaikkan terang latarnya sehingga tulisan putih di atasnya turun ke
     ~4:1; menggelapkannya membuat kontrasnya naik, bukan turun. */
  .admin-delta{align-self:flex-start;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(0,0,0,.22);color:#fff;}
  .admin-delta[hidden]{display:none;}
  .admin-delta.naik{color:#B9F0CE;}
  .admin-delta.turun{color:#FFC9BC;}

  /* Kotak ringkas: kisi seragam, bukan deret yang panjangnya berbeda tiap
     baris. Tinggi tiap kotak dibuat sama lewat align-content supaya
     angkanya berbaris rata — label yang melipat dua baris tidak boleh
     ikut menggeser angka di sebelahnya. */
  .admin-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
  .admin-tile{
    display:flex;flex-direction:column;justify-content:center;gap:3px;
    padding:var(--s3);border-radius:var(--r-md);
    background:var(--card);border:1px solid var(--line-soft);
  }
  .admin-tile-nilai{font-family:'Fraunces',serif;font-size:24px;font-weight:600;line-height:1;color:var(--ink);}
  .admin-tile-label{font-size:11.5px;color:var(--ink-soft);line-height:1.35;}

  .admin-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
  .admin-kartu{display:flex;flex-direction:column;}
  .admin-blok-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;}

  /* ---------- grafik ----------
     Satu rona aksen penuh untuk semua batang. Langkah yang lebih muda
     tidak dipakai karena kontrasnya di bawah 3:1 terhadap kartu putih
     (diukur: 1.63:1 dan 2.52:1) — batangnya nyaris lenyap. */
  .chart-wrap{position:relative;margin-top:var(--s3);}
  .chart-svg{width:100%;height:auto;display:block;overflow:visible;}
  .chart-bar{fill:var(--accent);}
  .chart-bar-nol{fill:var(--line);}
  .chart-grid{stroke:var(--line-soft);stroke-width:1;}
  .chart-tick{font-size:11px;fill:var(--ink-soft);font-family:'Inter',sans-serif;}
  .chart-label-langsung{font-size:12px;font-weight:600;fill:var(--ink);font-family:'Inter',sans-serif;}
  .chart-hit{fill:transparent;cursor:default;}
  .chart-hit:hover{fill:var(--accent);fill-opacity:.07;}
  .chart-kosong{font-size:13px;color:var(--ink-soft);padding:var(--s4) 0;text-align:center;line-height:1.6;}
  /* Latar tooltip juga warna tetap. var(--ink) di tema gelap adalah warna
     TERANG (#F2EFE8) — tulisan putih di atasnya jadi tidak terlihat sama
     sekali. Garis tepi tipis menahannya tetap terpisah dari latar gelap. */
  .chart-tip{position:absolute;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:var(--r-sm);background:#2B2822;border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;line-height:1.4;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);white-space:nowrap;}
  .chart-tip[hidden]{display:none;}
  .chart-tip strong{font-size:12.5px;font-weight:600;}
  .chart-tip span{color:rgba(255,255,255,.8);}

  /* Batang mendatar: nilainya selalu tertulis, jadi tidak bergantung warna */
  .bar-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
  .bar-baris{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;}
  .bar-nama{font-size:13.5px;font-weight:500;color:var(--ink);}
  .bar-nilai{font-size:12.5px;color:var(--ink-mid);white-space:nowrap;font-weight:600;}
  .bar-rel{height:8px;border-radius:999px;background:var(--paper-2);overflow:hidden;}
  .bar-rel-tebal{height:12px;}
  .bar-isi{height:100%;border-radius:999px;background:var(--accent);transition:width .5s cubic-bezier(.34,1.2,.64,1);}
  .bar-ket{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:5px;}

  .konversi{padding-top:var(--s2);}
  .konversi-angka{font-family:'Fraunces',serif;font-size:38px;font-weight:600;line-height:1;color:var(--ink);margin-bottom:var(--s3);}
  .konversi-ket{font-size:13px;color:var(--ink-mid);margin-top:10px;}
  .konversi-catatan{font-size:11.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}

  .admin-aktivitas{display:flex;flex-direction:column;gap:2px;margin-top:var(--s3);}
  .aktivitas-item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
  .aktivitas-item:last-child{border-bottom:0;}
  .aktivitas-ikon{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent-dark);}
  .aktivitas-ikon svg{width:15px;height:15px;}
  .aktivitas-teks{display:flex;flex-direction:column;min-width:0;}
  .aktivitas-judul{font-size:13px;font-weight:500;color:var(--ink);}
  .aktivitas-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

  .admin-blok-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3);}
  .admin-hitung{font-size:12px;color:var(--ink-soft);white-space:nowrap;}
  /* Tabel lebar wajib bisa digulir DI DALAM wadahnya sendiri — kalau
     tidak, seluruh halaman ikut bisa digeser ke samping di HP. */
  .admin-tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--s3));padding:0 var(--s3);}
  .admin-tabel{width:100%;border-collapse:collapse;font-size:13px;min-width:760px;}
  .admin-tabel th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:0 10px 8px;white-space:nowrap;}
  .admin-tabel td{padding:10px;border-top:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-mid);}
  .admin-tabel tbody tr:hover{background:var(--paper-2);}
  .admin-kuat{color:var(--ink);font-weight:600;white-space:nowrap;}
  .admin-lirih{color:var(--ink-soft);font-size:12px;white-space:nowrap;}
  .admin-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;white-space:nowrap;}
  .admin-pil{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--line-soft);color:var(--ink-mid);}
  .admin-pil.ok{background:var(--accent-tint);color:var(--accent-dark);}
  .admin-pil.warn{background:#F6E7CE;color:#8A6216;}
  .admin-pil.err{background:#F6DDD7;color:#A2402F;}
  html[data-theme="dark"] .admin-pil.warn{background:rgba(214,166,74,.18);color:#E3BE72;}
  html[data-theme="dark"] .admin-pil.err{background:rgba(192,80,61,.18);color:#E08A78;}
  .admin-catatan{font-size:12px;line-height:1.6;color:var(--ink-soft);margin-top:var(--s4);}
  .admin-tabel .btn{padding:5px 11px;font-size:12px;}

  /* Riwayat pembayaran. Nomor pesanan sengaja monospace dan bisa
     diseleksi — itu satu-satunya pegangan user kalau harus menghubungi
     admin soal pembayarannya. */
  .bayar-riwayat{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3);}
  .bayar-riwayat-item{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s3);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--paper-2);}
  .bayar-riwayat-kanan{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
  .bayar-riwayat-kanan .btn{padding:6px 12px;font-size:12.5px;white-space:nowrap;}
  .bayar-riwayat-jumlah{font-size:15px;font-weight:600;}
  .bayar-riwayat-meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .bayar-riwayat-order{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--ink-soft);margin-top:5px;word-break:break-all;user-select:all;}
  .bayar-riwayat-badge{flex-shrink:0;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--line-soft);color:var(--ink-mid);}
  .bayar-riwayat-badge.ok{background:var(--accent-tint);color:var(--accent-dark);}
  .bayar-riwayat-badge.warn{background:#F6E7CE;color:#8A6216;}
  .bayar-riwayat-badge.err{background:#F6DDD7;color:#A2402F;}
  html[data-theme="dark"] .bayar-riwayat-badge.warn{background:rgba(214,166,74,.18);color:#E3BE72;}
  html[data-theme="dark"] .bayar-riwayat-badge.err{background:rgba(192,80,61,.18);color:#E08A78;}
  .bayar-nota{margin-top:var(--s3);font-size:13px;line-height:1.6;color:var(--ink-soft);}

  .share-link-row{display:flex;gap:var(--s2);margin:var(--s3) 0;flex-wrap:wrap;}
  .share-link-row input{flex:1 1 220px;min-width:0;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper-2);color:var(--ink-mid);font-size:14px;font-family:inherit;}

  .stat-row{display:flex;gap:var(--s3);flex-wrap:wrap;}
  .stat-tile{flex:1 1 140px;text-align:center;padding:var(--s4) var(--s3);border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line-soft);}
  .stat-num{display:block;font-family:'Fraunces',serif;font-size:28px;font-weight:600;color:var(--ink);}
  .stat-label{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px;}

  /* Penanda "tersimpan otomatis" — dipakai di blok yang menyimpan
     seketika (foto, galeri, musik, palet), supaya bedanya dengan tab
     Isi Data yang butuh tombol Simpan terbaca langsung. */
  .hint-autosave{color:var(--accent-dark);font-size:13px;}

  /* Link personal per tamu */
  .tamu-add-form{display:flex;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap;}
  .tamu-add-form input{flex:1 1 220px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-family:inherit;font-size:14px;}
  .tamu-add-form input:focus{outline:none;border-color:var(--accent);}
  .tamu-add-form .btn{flex:0 0 auto;}
  .tamu-list{display:flex;flex-direction:column;gap:var(--s1);}
  .tamu-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--paper-2);}
  .tamu-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 180px;}
  .tamu-nama{font-weight:500;font-size:14.5px;overflow-wrap:anywhere;}
  .tamu-status{font-size:12px;color:var(--ink-soft);}
  .tamu-status.is-opened{color:var(--accent-dark);}
  /* Aksi per tamu: satu tombol berteks (Kirim) diapit dua tombol ikon.
     Sebelumnya tiga tombol berteks penuh berjejer di TIAP baris — dengan
     lima puluh tamu itu seratus lima puluh tombol berteks di satu halaman,
     dan tidak ada satu pun yang terbaca lebih penting dari yang lain.
     Padahal urutan pemakaiannya jelas: mengirim lewat WhatsApp hampir
     selalu, menyalin link sesekali, menghapus jarang sekali. */
  .tamu-aksi{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .tamu-aksi .btn.is-disabled{opacity:.5;pointer-events:none;}
  .tamu-kirim-btn{padding:6px 14px;font-size:13px;}
  .tamu-ikon-btn{
    width:32px;height:32px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border:0;border-radius:8px;background:transparent;
    color:var(--ink-soft);cursor:pointer;
    transition:background .15s ease,color .15s ease;
  }
  .tamu-ikon-btn svg{width:16px;height:16px;}
  .tamu-ikon-btn:hover{background:var(--card);color:var(--ink);}
  .tamu-ikon-btn:disabled{opacity:.4;cursor:not-allowed;}
  .tamu-ikon-btn:disabled:hover{background:transparent;color:var(--ink-soft);}
  .tamu-ikon-btn.is-ok{color:var(--accent-dark);}
  .tamu-hapus-btn:hover{color:#C0503D;}
  html[data-theme="dark"] .tamu-hapus-btn:hover{color:#E08A78;}

  /* Kepala tab Rekap. Panel ini dulu bernama "Tamu & Ucapan" dan berisi
     dua hal yang berbeda tugas: alat MEMBAGIKAN link dan tampilan HASIL
     yang masuk. Alatnya sudah pindah ke tab Bagikan; kepala ini yang
     menegaskan bahwa yang tersisa cuma hasil. */
  .ws-rekap-head{margin-bottom:var(--s4);}
  .ws-rekap-head h3{font-size:19px;margin-bottom:6px;}
  .ws-rekap-head p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:62ch;}

  .rsvp-table-wrap{overflow-x:auto;margin-top:var(--s3);}
  .rsvp-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;}
  .rsvp-table th,.rsvp-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;}
  .rsvp-table th{color:var(--ink-soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;}
  .rsvp-table td{color:var(--ink);}
  .rsvp-badge{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:12px;font-weight:600;}
  .rsvp-badge-hadir{background:var(--accent-tint);color:var(--accent-dark);}
  .rsvp-badge-tidak{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);}

  .ucapan-admin-list{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3);}
  .ucapan-admin-item{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s3);border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line-soft);}
  .ucapan-admin-body{flex:1;min-width:0;}
  .ucapan-admin-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  .ucapan-admin-name{font-size:14px;font-weight:600;color:var(--ink);}
  .ucapan-admin-time{font-size:11.5px;color:var(--ink-soft);}
  .ucapan-admin-text{font-size:13.5px;color:var(--ink-mid);line-height:1.6;}
  .ucapan-admin-delete{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
  .ucapan-admin-delete:hover{background:var(--card);color:#C0503D;}
  html[data-theme="dark"] .ucapan-admin-delete:hover{color:#E08A78;}

  @media(max-width:768px){
    .sidebar{display:none;}
    .app-shell main.wrap{margin-left:0;padding-bottom:calc(76px + env(safe-area-inset-bottom));}
    .tabbar{display:flex;align-items:stretch;justify-content:flex-start;position:fixed;left:0;right:0;bottom:0;height:64px;padding:6px 0 calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line-soft);z-index:100;}
    .tab-item{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-mid);height:100%;transition:color .25s;}
    .tab-item .nav-icon{display:flex;flex-shrink:0;}
    .tab-item .nav-label{font-size:10.5px;line-height:1.2;font-weight:600;text-align:center;white-space:nowrap;max-width:100%;}
    .tab-item.active{color:#fff;}
    /* Lebar dibagi rata sebanyak menu yang TAMPIL, bukan angka tetap 20%.
       Menu Admin muncul hanya untuk admin, jadi jumlahnya bisa 5 atau 6 —
       dengan 20% yang di-hardcode, pil penandanya melenceng dari menunya
       begitu yang keenam muncul. --nav-count disetel dashboard.js. */
    #tabPill{width:calc(100% / var(--nav-count,5) - 12px);height:44px;top:10px;left:calc(var(--active-index,0) * 100% / var(--nav-count,5) + 6px);transition:left .4s cubic-bezier(.34,1.56,.64,1),width .4s cubic-bezier(.34,1.56,.64,1);}
    .field-grid{grid-template-columns:1fr;}
    .palette-grid{grid-template-columns:1fr;}
  }

  .modal-head{text-align:center;margin-bottom:var(--s4);}
  .modal-head .logo{display:block;margin-bottom:var(--s3);}
  .modal-head h3{margin-bottom:6px;}
  .modal-sub{font-size:13.5px;}
  .google-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:var(--s3);}
  .modal-divider{display:flex;align-items:center;gap:10px;margin:var(--s3) 0;font-size:12px;letter-spacing:0.04em;color:var(--ink-soft);}
  .modal-divider::before,.modal-divider::after{content:"";flex:1;height:1px;background:var(--line);}
  .auth-form label{display:block;font-size:13px;color:var(--ink-mid);margin-bottom:6px;font-weight:500;}
  .auth-form input{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:15px;font-family:inherit;margin-bottom:var(--s3);}
  .auth-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
  .auth-form input.code-input{letter-spacing:0.5em;text-align:center;font-family:'Fraunces',serif;font-size:20px;padding:11px 8px;}
  .pw-field{position:relative;margin-bottom:var(--s3);}
  .pw-field input{padding-right:42px;margin-bottom:0;}
  .pw-field input::-ms-reveal,
  .pw-field input::-ms-clear{display:none;}
  .pw-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-soft);}
  .pw-toggle:hover{color:var(--ink-mid);background:var(--paper-2);}
  .pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .pw-toggle .icon-eye-off{display:none;}
  .pw-toggle.is-visible .icon-eye{display:none;}
  .pw-toggle.is-visible .icon-eye-off{display:block;}
  .otp-info{font-size:13px;color:var(--ink-mid);margin-bottom:var(--s3);}
  .badge{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:12px;background:var(--paper);border:1px solid var(--line);color:var(--ink-mid);margin-right:6px;}
  .profile-badges{margin-bottom:var(--s3);}
  .profile-name-row{display:flex;gap:8px;margin-bottom:var(--s3);}
  .profile-name-row input{flex:1;margin-bottom:0;}
  .profile-readonly{padding:11px 14px;border-radius:var(--r-sm);background:var(--paper);border:1.5px solid var(--line-soft);color:var(--ink-mid);font-size:15px;margin-bottom:var(--s3);}
  .profile-actions{display:flex;flex-direction:column;gap:var(--s2);}
  .auth-msg{font-size:13px;text-align:center;margin-top:var(--s3);min-height:18px;color:var(--ink-mid);}
  .auth-msg.err{color:#C0503D;}
  html[data-theme="dark"] .auth-msg.err{color:#E08A78;}
  .auth-msg.ok{color:var(--accent-dark);}
  .auth-legal{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:var(--s3);line-height:1.6;}
  .auth-legal a{color:var(--ink-mid);text-decoration:underline;text-underline-offset:2px;}
  .auth-tabs{display:flex;background:var(--paper-2);border-radius:var(--r-full);padding:4px;margin-bottom:var(--s4);gap:4px;}
  .auth-tab{flex:1;border:none;background:transparent;padding:9px 0;border-radius:var(--r-full);font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;}
  .auth-tab.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
  .auth-forgot{display:block;text-align:right;font-size:13px;margin:-10px 0 var(--s3);}
  .auth-forgot a{color:var(--accent-dark);font-weight:500;}
  .auth-switch{font-size:13.5px;text-align:center;color:var(--ink-mid);margin-top:var(--s3);}
  .auth-switch a{color:var(--accent-dark);font-weight:600;}

  .wa-float{position:fixed;bottom:20px;right:20px;background:#25D366;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,0.25);z-index:75;transition:bottom .2s ease;}
  /* Bilah sticky muncul di HP tepat di sudut yang sama dengan tombol
     WhatsApp, dan z-index-nya lebih rendah (74 vs 75). Akibatnya tombol
     WhatsApp menindih tombol "Daftar" di bilah itu: klik di tengah
     tombolnya mengenai ikon WhatsApp, bukan CTA-nya — tombol pendaftaran
     utama di HP praktis tidak bisa ditekan. Jadi begitu bilahnya tampil,
     tombol WhatsApp naik ke atasnya. */
  body:has(.sticky-cta.show) .wa-float{bottom:84px;}
  .sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:10px var(--s2);display:none;align-items:center;gap:10px;z-index:74;}
  .sticky-cta.show{display:flex;}
  .sticky-cta .info{flex:1;min-width:0;}
  .sticky-cta .p1{font-size:12.5px;font-weight:600;}
  .sticky-cta .p2{font-size:11px;color:var(--ink-soft);}

  @media(max-width:960px){
    .wrap{padding-left:var(--s2);padding-right:var(--s2);}
    section{padding-top:var(--s5);padding-bottom:var(--s5);}
    .nav-primary,.desktop-only,.nav-login{display:none;}
    .burger{display:flex;}
    .hero{grid-template-columns:1fr;grid-template-areas:"intro" "slider" "cta" "trust";row-gap:var(--s4);column-gap:0;padding-top:var(--s4);padding-bottom:var(--s5);}
    .hero-lead{margin-bottom:0;}
    .hero-trust{margin-top:0;}
    .hero-slider{width:100%;max-width:280px;margin:0 auto;}
    .slider-frame{height:300px;}
    .slide-card{width:190px;padding:var(--s4) var(--s3);}
    .slide-card[data-pos="prev"]{transform:translate(calc(-50% - 92px),-50%) scale(.82);}
    .slide-card[data-pos="next"]{transform:translate(calc(-50% + 92px),-50%) scale(.82);}
    .grid-3,.grid-2,.price-rail{grid-template-columns:1fr;}
    .reseller{grid-template-columns:1fr;padding:var(--s4) var(--s3);gap:var(--s3);}
    .section-head{margin-bottom:var(--s4);}
    .why-card{flex-direction:column;gap:var(--s2);}
    .hero-trust{gap:var(--s3);}
    .hero-actions{flex-direction:column;}
    .hero-actions .btn,.cta-actions .btn{width:100%;}
    .cta-actions{flex-direction:column;}
    /* Grid tema di HP: DUA kolom, bukan satu. Satu kolom membuat tiap
       kartu setinggi hampir satu layar penuh, jadi menelusuri tema terasa
       seperti kerja berat — dan itu makin parah begitu temanya bertambah
       banyak. Dua kolom membuat empat tema terlihat dalam satu layar. */
    #landingThemeGrid,#themeTemplateGrid{grid-template-columns:1fr 1fr;gap:10px;}
    /* Kartu dipendekkan dari 3/4.9: tinggi tambahan itu dulu disediakan
       untuk dua tombol yang bertumpuk dan satu baris penanda, yang
       dua-duanya sudah tidak ada lagi. */
    .tpl-card{aspect-ratio:3/4.4;border-radius:18px;}
    .tpl-isi{padding:9px 9px 10px;}
    /* Nama dibiarkan melipat sampai dua baris, TIDAK dipotong ellipsis.
       Percobaan memotongnya membuat "Emerald Dusk" tampil sebagai
       "Emerald ..." — dan nama tema justru satu-satunya label yang tidak
       boleh hilang di kartu ini. Ruang untuk baris keduanya sudah
       disediakan lewat rasio kartu yang lebih tinggi. */
    .tpl-nama{font-size:14.5px;line-height:1.15;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .tpl-harga{font-size:10px;padding:2px 7px;}
    .tpl-ringkas{font-size:10.5px;line-height:1.4;margin-bottom:7px;
      /* Dipangkas dua baris supaya tinggi isi seragam di kisi sempit */
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    /* Tag kategori DULU disembunyikan di HP karena ketiga tema sama-sama
       "Elegan Klasik" sehingga barisnya tidak membedakan apa pun.
       Katalognya sekarang lima kategori dan DUA tingkat harga, jadi baris
       inilah yang paling menentukan pilihan — dikembalikan, dengan ukuran
       yang lebih kecil. */
    .tpl-tags{gap:4px;margin-bottom:8px;}
    .tpl-tag{font-size:9.5px;padding:3px 7px;}

    /* Aksi jadi SEBARIS, bukan bertumpuk. Dua tombol selebar kartu yang
       ditumpuk memakan hampir sepertiga tinggi kartu — di kartu yang
       memang menjual fotonya, itu ruang paling mahal yang dipakai untuk
       hal paling tidak penting. Pratinjau menyusut jadi lingkaran berikon
       mata, dan "Gunakan" mengambil sisa lebarnya. */
    .tpl-aksi{flex-direction:row;gap:6px;align-items:center;}
    .tpl-btn{height:34px;font-size:11.5px;border-radius:999px;padding:0 10px;}
    .tpl-btn-lihat{flex:0 0 34px;width:34px;padding:0;}
    .tpl-btn-lihat .tpl-btn-teks{display:none;}
    .tpl-ikon{display:block;}
    .final-cta{padding:var(--s5) var(--s3);}
    .tier-desc{min-height:auto;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);}
    .khusus-band{grid-template-columns:1fr;gap:var(--s4);}
    body{padding-bottom:0;}
    .sticky-cta.show ~ footer{padding-bottom:var(--s6);}
  }
  @media(max-width:480px){
    section{padding-top:var(--s4);padding-bottom:var(--s4);}
    .hero{padding-top:var(--s3);padding-bottom:var(--s4);gap:var(--s4);}
    .hero-lead{max-width:none;}
    .hero-trust{gap:var(--s3) var(--s4);margin-top:0;padding-top:var(--s3);}
    .hero-slider{max-width:220px;}
    .slider-frame{height:250px;}
    .slide-card{width:150px;padding:var(--s3) var(--s2);}
    .slide-card .names{font-size:19px;}
    .slide-card[data-pos="prev"]{transform:translate(calc(-50% - 72px),-50%) scale(.82);}
    .slide-card[data-pos="next"]{transform:translate(calc(-50% + 72px),-50%) scale(.82);}
    .slider-arrow{width:32px;height:32px;}
    .btn{padding:12px 18px;}
    .step-card,.path-card,.price-card{padding:var(--s3);}
    /* Panel admin: dua kolom jadi satu, dan petak ringkasan mengecil
       supaya empat angka masih muat sebaris di layar HP. */
    .admin-atas{grid-template-columns:1fr;}
    .admin-duo{grid-template-columns:1fr;}
    .admin-tiles{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));}
    .admin-tile-nilai{font-size:21px;}
    .reseller{padding:var(--s3);}
    .final-cta{padding:var(--s4) var(--s2);}
    .modal-overlay{padding:var(--s2);}
    .modal-card{padding:var(--s4) var(--s3) var(--s3);}
    .foot-grid{grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s4);}
    .khusus-band{padding:var(--s4);gap:var(--s4);}
    .foot-bottom{flex-direction:column;align-items:flex-start;}
    .price-amount .num{font-size:27px;}
    .faq-item summary{font-size:15px;gap:var(--s2);}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }