/* afbazada :: token bersama untuk hub publik dan dashboard */
/* Bricolage Grotesque dipakai di seluruh berkas ini tapi tidak pernah
   ikut dimuat -- selama ini ia diam-diam jatuh ke font bawaan sistem.
   Empat font tambahan di bawahnya untuk gaya tulisan hook: Anton dan
   Bebas Neue yang padat dan tinggi, Archivo Black yang berat, dan DM
   Serif Display untuk yang anggun. Semuanya satu permintaan. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Anton&family=Bebas+Neue&family=Archivo+Black&family=DM+Serif+Display:ital@0;1&family=Poppins:wght@400;600;700;800&family=Montserrat:wght@600;700;800&family=Oswald:wght@500;600;700&family=Bungee&family=Righteous&family=Fredoka:wght@500;600;700&family=Caveat:wght@600;700&family=Lobster&family=Space+Grotesk:wght@500;700&family=Barlow+Condensed:wght@600;700&display=swap");

/* ── Palet: biru tinta dengan aksen emas ──────────────────────
   Satu palet untuk semua halaman, sama dengan halaman jualannya.
   Gelap dipakai sebagai keadaan tetap, bukan sebagai pilihan tema —
   itu sebabnya blok prefers-color-scheme dan [data-theme] tidak lagi
   menimpa apa pun di sini: halaman terang dan gelap yang berselang
   membuat satu produk terasa seperti dua produk.

   Beberapa token sengaja berupa rgba, bukan warna pekat. Di atas
   dasar segelap ini, bidang lembut yang tembus pandang menyatu
   dengan latarnya; warna pekat justru terlihat seperti tambalan. */
/* ── Palet: biru tinta dengan aksen emas ──────────────────────
   Satu palet untuk semua halaman, sama dengan halaman jualannya.
   Gelap dipakai sebagai keadaan tetap, bukan sebagai pilihan tema:
   halaman terang dan gelap yang berselang membuat satu produk
   terasa seperti dua produk.

   EMPAT LAPIS, bukan satu warna biru berulang. Kalau latar, kartu,
   dan kolom isian punya terang yang hampir sama, matanya tidak
   punya pegangan — semuanya melebur jadi satu bidang. Karena itu
   tiap lapis diberi jarak terang yang benar-benar terasa:

     ground   dasar halaman, paling gelap
     surface  kartu dan panel, jelas lebih terang dari dasar
     sunk     kolom isian, lebih gelap lagi supaya terbaca cekung
     well     bidang pengelompokan, putih tembus pandang tipis

   Teksnya sengaja hangat, bukan kebiruan. Teks biru muda di atas
   dasar biru membuat mata bekerja lebih keras tanpa alasan; nada
   krem dan pasir memberi kontras warna, bukan sekadar kontras
   terang. */
/* ── PALET: diambil dari 101 tema AutoLanding, bukan karangan ──
   Dasarnya tema "Biru Tinta" (key: biru-tinta) -- dipilih dari 20
   tema biru di sana karena jarak terang antara latar dan kartunya
   paling lebar, dan itulah keluhan yang berulang: kartunya tidak
   terlihat terpisah dari latarnya.

     latar  #1c2542   kartu #2c3966   (selisih +16/+20/+36)

   Delapan warna komponen diambil dari aksen tema-tema lain di
   berkas yang sama, dipilih satu per rentang warna dengan syarat
   kontras >= 4.5:1 di atas kartu itu dan kejenuhan tinggi supaya
   tidak ada yang kusam:

     emas    #f0c53f  dari biru-emas
     toska   #00d9ff  dari infinity-glow
     biru    #a0b1ff  dari indigo-noir
     ungu    #b69ae7  dari ungu-nila
     magenta #f292f2  dari magenta-noir
     jingga  #f5c155  dari amber-noir
     hijau   #34d399  dari emerald-noir
     merah   #f78894  dari crimson-noir

   Semua nilai warna teks di bawah juga berasal dari tema biru-tinta,
   jadi seluruh kombinasinya sudah pernah lolos pemeriksaan kontras
   di proyek AutoLanding -- bukan warna yang saya cocokkan sendiri. */
:root {
  /* Jarak antar lapisan diperbesar setelah diukur, bukan dikira.
     Palet lama terlalu rapat sampai tidak bisa dibedakan:

       blok vs latar halaman   1,35 -> 1,73
       blok-dalam vs blok      1,08 -> 1,47   (praktis satu warna)
       garis tepi vs blok      1,30 -> 2,03
       teks redup di blok      4,61 -> 6,45
       teks redup di kolom     4,99 -> 9,51

     Angka 1,08 itu yang paling parah: dua permukaan yang berbeda
     maksudnya, tapi mata tidak punya cara membedakannya. Warna
     birunya tetap; yang berubah cuma jaraknya. */
  --ground:#0a1a2f;                  /* latar halaman -- disamakan dengan
                                         --tinta di halaman jualan (autovideo.html) */
  --surface:#2b3b62;                 /* kartu & panel   */
  --sunk:#332a56;                    /* kolom isian -- ungu-biru gelap, bukan lagi
                                         abu-abu/hitam netral seperti sebelumnya.
                                         Dipilih agar senada dengan --surface yang
                                         biru, tapi tetap beda bahan dari bagian
                                         dalam kolom -- keluarga warna yang sama,
                                         bukan permukaan yang identik. */
  --well:#423569;                    /* sumur terdalam -- ungu-biru yang sama
                                         keluarganya dengan --sunk, sedikit lebih
                                         terang supaya blok yang lebih besar
                                         (naskah, pratinjau teks) tetap terasa
                                         beda lapisan dari kolom isian. */
  --ink:#F7F3EA;                     /* judul -- disamakan dengan --terang
                                         di halaman jualan */
  --body:#D6CEC0;                    /* teks isi -- krim hangat, disamakan
                                         dengan --kertas di halaman jualan
                                         (dulu putih polos) */
  --muted:#c9bda3;                   /* keterangan -- versi redup dari --body,
                                         keluarga warna yang sama (dulu biru muda) */
  --rule:#55689f;                    /* garis pemisah   */
  --amber:#e8c87a;                   /* aksen utama -- disamakan dengan --emas
                                         di halaman jualan (dulu emas terang) */
  --amber-soft:rgba(232,200,122,.14);
  --amber-edge:rgba(232,200,122,.40);
  --stop:#f78894; --stop-soft:rgba(247,136,148,.15);
  --go:#34d399;   --go-soft:rgba(52,211,153,.15);
  --shopee:#F0855A; --tiktok:#ffffff;
  --r:14px;

  --ink-gelap:#F7F3EA;
  --muted-gelap:#c9bda3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--body);
  background: var(--ground);
  background-image:
    radial-gradient(1000px 440px at 50% -200px, rgba(232,200,122,.10), transparent 72%),
    linear-gradient(180deg, #0b1e36 0%, #0a1a2f 45%, #091728 100%);
  background-attachment: fixed;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.012em; }
a { color: var(--amber); text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
.mono, .num { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.badge {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
  border: 1px solid currentColor; display: inline-block;
}
.badge.shopee { color: var(--shopee); }
.badge.tiktok { color: var(--muted); }

button, .btn {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 14.5px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--rule);
  /* Isian dinaikkan dari 6% ke 20% -- pada opasitas lama tombol ini
     nyaris tak berbeda dari latar biru di belakangnya (itulah keluhan
     "serba biru"): sekarang warna hangatnya benar-benar terlihat,
     bukan cuma menjiplak warna panel di baliknya. */
  background: rgba(247,243,232,.20); color: var(--ink); cursor: pointer; line-height: 1.3;
  text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .btn:hover { border-color: var(--amber-edge); background: rgba(247,243,232,.30); }
button.utama, .btn.utama {
  background: linear-gradient(135deg,#e0a80f 0%,#f0c53f 100%);
  border-color: transparent; color: #111111; font-weight: 700;
  box-shadow: 0 8px 22px -12px rgba(232,200,122,.5);
}
/* Penanda "Anda sedang di sini". Halaman yang sedang dibuka tetap
   muncul di barisan tombol, bukan dihilangkan -- kalau dihilangkan,
   satu-satunya petunjuk tinggal tulisan kecil di bawah logo, dan itu
   terlalu mudah terlewat. Warnanya emas seperti tombol utama, tapi
   tidak bisa diklik ke mana-mana karena memang sudah di sini. */
.btn.disini, a.btn.disini:hover {
  background: linear-gradient(135deg,#e0a80f 0%,#f0c53f 100%);
  border-color: transparent; color: #111111; font-weight: 700;
  box-shadow: 0 8px 22px -12px rgba(232,200,122,.5);
  cursor: default;
}

button.utama:hover, .btn.utama:hover {
  background: linear-gradient(135deg,#f0c53f 0%,#f7d876 100%);
}
/* ── TINGKATAN TOMBOL ──────────────────────────────────────────
   Dalam satu bagian bisa ada empat-lima tombol. Kalau semuanya
   seragam, tidak ada yang menunjukkan mana yang harus ditekan --
   itu keluhan yang muncul langsung dari pemakaian.

   Empat tingkat, dibedakan oleh BENTUK dan BOBOT, bukan hanya
   warna, supaya tetap terbaca oleh yang sulit membedakan warna:

     .utama     emas pekat, tebal   -- aksi utama, satu per kelompok
     bawaan     bergaris warna bagian -- aksi pendukung
     .tenang    tanpa bingkai, redup  -- aksi kecil (lihat, coba)
     .bahaya    merah bergaris        -- menghentikan/menghapus
   ────────────────────────────────────────────────────────────── */
button.bahaya, .btn.bahaya {
  color: var(--stop);
  border-color: color-mix(in srgb, var(--stop) 45%, transparent);
  background: color-mix(in srgb, var(--stop) 10%, transparent);
  font-weight: 600;
}
button.bahaya:hover, .btn.bahaya:hover {
  border-color: var(--stop);
  background: color-mix(in srgb, var(--stop) 18%, transparent);
}

button.tenang, .btn.tenang {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
  padding-left: 8px; padding-right: 8px;
}
button.tenang:hover, .btn.tenang:hover {
  background: transparent;
  color: var(--ink);
  text-decoration-color: currentColor;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

input, select, textarea {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 14.5px;
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--sunk); color: var(--ink); width: 100%;
}
input:focus, select:focus { border-color: var(--amber); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
::placeholder { color: var(--muted); opacity: .62; }

/* Isian otomatis Chrome memaksa latar terang dan mengabaikan
   background biasa. Satu-satunya cara menahannya adalah bayangan
   dalam setebal kolomnya sendiri; transisi yang sangat panjang
   mencegah warna bawaannya sempat berkedip lebih dulu. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--sunk) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

.kartu { /* Dulu flat var(--surface) -- semua kartu di semua halaman jadi
   biru yang sama persis, tak peduli konteksnya. Sekarang ikut warna
   bagian (--w) kalau ada, di atas dasar netral (--sunk) -- kartu di
   bagian emas terasa keemasan, di bagian toska terasa toska. */
  background: color-mix(in srgb, var(--w, var(--surface)) 22%, var(--sunk));
  border: 1px solid var(--rule); border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   WARNA PER KOMPONEN

   Percobaan pertama memakai rona 7% dan hasilnya tidak terlihat sama
   sekali -- semuanya tetap terbaca sebagai navy. Percobaan menaikkan
   ronanya sampai 24% ternyata punya masalah lain: warna hangat (emas,
   koral, amber) yang diaduk ke navy berubah jadi lumpur zaitun, bukan
   warna yang jelas.

   Jadi pendekatannya dibalik. Warna dibuat MENYALA di aksennya --
   batang tebal di puncak kartu, judul bagian, dan cip nomor langkah --
   sementara bidang kartunya hanya diberi rona tipis. Warna murni di
   atas navy tetap jernih; warna yang diaduk ke navy tidak.

   Delapan warna dipilih yang tetap hidup di atas gelap (bukan pastel,
   bukan tua). Rasio kontras teks krem di atas kartu bernuansa ini
   berada di 8-9:1, jauh di atas ambang yang dibutuhkan.
   ══════════════════════════════════════════════════════════════ */
:root{
  --w1:#f0c53f;   /* emas    -- biru-emas      */
  --w2:#00d9ff;   /* toska   -- infinity-glow  */
  --w3:#a0b1ff;   /* biru    -- indigo-noir    */
  --w4:#b69ae7;   /* ungu    -- ungu-nila      */
  --w5:#f292f2;   /* magenta -- magenta-noir   */
  --w6:#f5c155;   /* jingga  -- amber-noir     */
  --w7:#34d399;   /* hijau   -- emerald-noir   */
  --w8:#f78894;   /* merah   -- crimson-noir   */
}

/* Warna dipasang lewat --w pada tiap bagian; sisanya mengikuti. */
section[style*="--w"], section.panel[style*="--w"]{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--w) 13%, transparent), transparent 240px),
    var(--surface);
  border-color: color-mix(in srgb, var(--w) 26%, var(--rule));
  position: relative;
  overflow: hidden;
}

/* Batang tebal di puncak kartu -- ini yang paling terlihat, dan
   warnanya murni jadi tidak pernah jadi lumpur. */
section[style*="--w"]::before, section.panel[style*="--w"]::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: var(--w);
}

/* Judul bagian ikut berwarna. Inilah yang membuat tiap bagian
   langsung terbaca berbeda saat halaman digulir. */
section[style*="--w"] h2{ color: var(--w); }

/* Cip nomor: warna pekat, teks navy -- terbaca dari jauh. */
section[style*="--w"] .nomor{
  color:#1c2542;
  background: var(--w);
  border-color: transparent;
  font-weight:800;
  width:26px; height:26px; flex:0 0 26px;
  border-radius:7px; font-size:12px;
}

/* Kolom isian: rona sangat tipis saja, supaya tetap terbaca cekung
   dan teks di dalamnya tidak berat dibaca. */
section[style*="--w"] input,
section[style*="--w"] select,
section[style*="--w"] textarea{
  background: color-mix(in srgb, var(--w) 5%, var(--sunk));
  border-color: color-mix(in srgb, var(--w) 20%, var(--rule));
}
section[style*="--w"] input:focus,
section[style*="--w"] select:focus,
section[style*="--w"] textarea:focus{
  border-color: var(--w);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 22%, transparent);
}

/* Tautan dan penanda di dalam bagian ikut warnanya. */
section[style*="--w"] .langkah{ align-items:center; }

/* Tombol pendukung mengambil warna bagiannya sendiri. Dua akibatnya:
   tombol di bagian berbeda tidak lagi terlihat sama, dan di dalam
   satu bagian ia jelas berbeda dari tombol utama yang emas. */
section[style*="--w"] button:not(.utama):not(.bahaya):not(.tenang):not(.salin),
section[style*="--w"] .btn:not(.utama):not(.bahaya):not(.tenang),
section[style*="--w"] .tombol-berkas{
  color: var(--w);
  border-color: color-mix(in srgb, var(--w) 45%, transparent);
  background: color-mix(in srgb, var(--w) 10%, transparent);
  font-weight: 600;
}
section[style*="--w"] button:not(.utama):not(.bahaya):not(.tenang):not(.salin):hover,
section[style*="--w"] .btn:not(.utama):not(.bahaya):not(.tenang):hover,
section[style*="--w"] .tombol-berkas:hover{
  border-color: var(--w);
  background: color-mix(in srgb, var(--w) 20%, transparent);
}

/* Tombol utama tetap emas di mana pun, supaya "yang harus ditekan"
   selalu terlihat sama di seluruh aplikasi. */
section[style*="--w"] button.utama{
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--amber) 60%, transparent);
}

/* ── Pemilih gaya video ────────────────────────────────────────
   Kartu, bukan dropdown. Tiap gaya perlu satu kalimat penjelas
   supaya pengguna tahu mana yang cocok untuk produknya tanpa harus
   merender kesepuluhnya lebih dulu. */
.gaya-pilih{
  display:grid; gap:9px; margin:14px 0 18px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.kartu-gaya{
  display:block; text-align:left; padding:12px 14px;
  border-radius:var(--rp,10px); cursor:pointer;
  background:var(--sunk); border:1px solid var(--rule);
  transition:border-color .15s, background .15s, transform .1s;
}
.kartu-gaya b{
  display:block; font-size:13.5px; font-weight:700;
  color:var(--ink); margin-bottom:4px;
}
.kartu-gaya span{
  display:block; font-size:11.5px; line-height:1.55;
  color:var(--muted); font-weight:400;
}
.kartu-gaya:hover{
  border-color:color-mix(in srgb, var(--w,var(--amber)) 55%, transparent);
  background:color-mix(in srgb, var(--w,var(--amber)) 8%, var(--sunk));
}
.kartu-gaya[aria-pressed="true"]{
  border-color:var(--w,var(--amber));
  background:color-mix(in srgb, var(--w,var(--amber)) 15%, var(--sunk));
}
.kartu-gaya[aria-pressed="true"] b{ color:var(--w,var(--amber)); }
.kartu-gaya[aria-pressed="true"] span{ color:var(--body); }

/* Menandai langkah yang boleh dilewati. Tanpa ini, pengguna mengira
   tiap langkah wajib dan berhenti di langkah yang sebenarnya
   opsional. */
.opsional{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; vertical-align:middle;
  margin-left:9px; padding:3px 9px; border-radius:999px;
  color:var(--muted); background:var(--sunk);
  border:1px solid var(--rule);
}

/* Tombol buang di pojok thumbnail video. Thumbnail foto memakai
   <button> polos; yang video perlu kelasnya sendiri karena ia
   bersaing dengan kontrol pemutar di bawahnya. */
.thumbs .tb button.x{
  position:absolute; top:5px; right:5px; z-index:2;
  width:23px; height:23px; padding:0; line-height:1;
  border-radius:50%; font-size:15px;
  background:rgba(12,17,32,.82); color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
.thumbs .tb button.x:hover{ background:var(--bahaya,#c0392b); }

/* ── Kolom kode akses ──────────────────────────────────────────
   Sengaja BUKAN type="password". Kalau ada satu saja kolom sandi di
   halaman, Chrome menganggap halaman ini formulir masuk dan menawarkan
   mengisi nama pengguna ke kolom teks terdekat sebelumnya -- yang di
   sini kebetulan "Target pembeli". autocomplete="off" tidak menolongnya;
   tebakan itu memang mengabaikannya.

   Jadi kolomnya teks biasa, dan penyamarannya lewat CSS. Isinya juga
   memang bukan sandi: ia kode akses API yang cuma tersimpan di
   perangkat pengguna sendiri. */
input.rahasia{
  -webkit-text-security: disc;
  text-security: disc;
  font-family:"JetBrains Mono",monospace; letter-spacing:.08em;
}
input.rahasia.terbuka{
  -webkit-text-security: none;
  text-security: none;
  letter-spacing:normal;
}
button.lihat-rahasia{
  margin-top:8px; padding:6px 13px; font-size:12px;
}

/* ── Kartu hook ────────────────────────────────────────────────
   Status klaim ditampilkan besar dan berwarna, di atas kalimatnya.
   Letaknya disengaja: pengguna harus melihat penilaiannya sebelum
   membaca kalimat yang menggoda, bukan sesudah. */
.hook-papan{
  display:grid; gap:11px; margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.hook-kartu{
  border:1px solid var(--rule); border-radius:var(--rp,10px);
  background:var(--sunk); padding:13px 15px;
  transition:border-color .15s, background .15s;
}
.hook-kartu.dipilih{
  border-color:var(--w,var(--amber));
  background:color-mix(in srgb, var(--w,var(--amber)) 12%, var(--sunk));
}
.hook-atas{display:flex; justify-content:space-between; align-items:center; gap:8px}
.hook-kat{
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.tanda-status{
  font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.tanda-status.go{background:var(--go-soft); color:var(--go); border:1px solid var(--go)}
.tanda-status.amber{background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-edge)}
.tanda-status.stop{background:var(--stop-soft); color:var(--stop); border:1px solid var(--stop)}

.hook-teks{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:16px; line-height:1.3; color:var(--ink); margin:10px 0 8px;
}
.hook-suara,.hook-visual{font-size:11.5px; line-height:1.55; color:var(--muted); margin-bottom:5px}
.hook-alasan{
  margin:9px 0; padding:9px 11px; border-radius:var(--rp,8px);
  background:var(--well); border:1px solid var(--rule);
  font-size:11.5px; line-height:1.6;
}
.hook-alasan b{color:var(--ink); font-weight:600}
.hook-alasan span{color:var(--muted)}
.hook-alasan div+div{margin-top:7px; padding-top:7px; border-top:1px solid var(--rule)}
.hook-skor{
  display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;
  margin-top:9px; font-family:"JetBrains Mono",monospace;
}
.hook-skor b{font-size:17px; color:var(--w,var(--amber))}
.hook-skor span{font-size:11px; color:var(--muted)}
.hook-skor i{font-style:normal; font-size:9.5px; color:var(--muted); flex:1 1 100%; line-height:1.6}
.hook-butuh{
  margin-top:9px; padding-top:8px; border-top:1px solid var(--rule);
  font-size:10.5px; line-height:1.6; color:var(--muted);
}
#janji-jujur{margin-top:16px}

/* ── Pemilih efek ──────────────────────────────────────────────
   Kartu kecil dan padat: jumlahnya banyak, dan yang dicari pengguna
   adalah nama efeknya, bukan hiasan di sekelilingnya. */
.pilih-efek h3{
  font-family:"Bricolage Grotesque",sans-serif; font-size:13px; font-weight:700;
  color:var(--ink); margin:18px 0 3px; display:flex; align-items:baseline;
  gap:9px; flex-wrap:wrap;
}
.pilih-efek h3 span{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; font-weight:400;
  color:var(--muted);
}
.petak-efek{
  display:grid; gap:7px; margin-top:9px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.kartu-efek{
  display:block; text-align:left; padding:9px 11px; cursor:pointer;
  border-radius:var(--rp,8px); background:var(--sunk);
  border:1px solid var(--rule);
  transition:border-color .12s, background .12s;
}
.kartu-efek b{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3;
}
.kartu-efek em{
  display:block; font-family:"JetBrains Mono",monospace; font-style:normal;
  font-size:9px; color:var(--muted); margin-top:3px; letter-spacing:.02em;
}
.kartu-efek span{
  display:block; font-size:10.5px; line-height:1.5; color:var(--muted);
  margin-top:4px; font-weight:400;
}
.kartu-efek:hover{
  border-color:color-mix(in srgb, var(--w,var(--amber)) 55%, transparent);
  background:color-mix(in srgb, var(--w,var(--amber)) 8%, var(--sunk));
}
.kartu-efek.aktif{
  border-color:var(--w,var(--amber));
  background:color-mix(in srgb, var(--w,var(--amber)) 16%, var(--sunk));
}
.kartu-efek.aktif b{ color:var(--w,var(--amber)); }

#pratinjau-efek{
  display:block; margin-top:14px; border-radius:var(--rp,8px);
  border:1px solid var(--rule); background:#000;
}

/* ── Kolom hook sendiri, di paling atas ────────────────────── */
.kotak-sendiri{
  margin-top:16px; padding:15px 17px; border-radius:var(--rp,10px);
  background:var(--sunk); border:1px solid var(--rule);
  border-left:3px solid var(--w,var(--amber));
}
.kotak-sendiri label strong{ color:var(--ink); font-size:14.5px; }

/* Kartu hook yang butuh angka dari pengguna. */
.hook-kartu.terkunci{ opacity:.92; border-style:dashed; }
.hook-kartu.waspada{ border-color:color-mix(in srgb, var(--amber) 55%, var(--rule)); }
.hook-teks.pudar{ color:var(--muted); font-weight:600; }
.hook-isian-label{
  display:block; font-size:11px; font-weight:600; color:var(--muted);
  margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em;
}
.hook-isian{ display:flex; gap:7px; flex-wrap:wrap; }
.hook-isian input{ flex:1 1 120px; min-width:0; font-size:13px; padding:7px 10px; }
.hook-isian button{ padding:7px 13px; font-size:12px; white-space:nowrap; }

/* ── Pemilih gaya tulisan hook ─────────────────────────────────
   Kartunya menampilkan pratinjau sungguhan, bukan nama saja: gaya
   tulisan mustahil dinilai dari namanya. "Serif anggun" tidak
   berarti apa-apa sampai terlihat. */
.sub-judul{
  font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;
  font-size:15px; font-weight:700; color:var(--ink); margin:24px 0 3px;
}
.petak-teks{
  display:grid; gap:10px; margin-top:11px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
}
.kartu-teks{
  display:block; text-align:left; padding:0 0 10px; cursor:pointer;
  border-radius:var(--rp,9px); overflow:hidden;
  background:var(--sunk); border:1px solid var(--rule);
  transition:border-color .12s, background .12s;
}
.kartu-teks canvas{
  display:block; width:100%; height:auto; background:#12182a;
  border-bottom:1px solid var(--rule);
}
.kartu-teks b{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  padding:9px 11px 0; line-height:1.3;
}
.kartu-teks span{
  display:block; font-size:10.5px; line-height:1.5; color:var(--muted);
  padding:4px 11px 0; font-weight:400;
}
.kartu-teks:hover{
  border-color:color-mix(in srgb, var(--w,var(--amber)) 55%, transparent);
}
.kartu-teks.aktif{
  border-color:var(--w,var(--amber));
  background:color-mix(in srgb, var(--w,var(--amber)) 14%, var(--sunk));
}
.kartu-teks.aktif b{ color:var(--w,var(--amber)); }

.petak-font{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.kartu-font{
  cursor:pointer; font-size:15px; padding:9px 15px;
  border-radius:var(--rp,9px); background:var(--sunk);
  border:1px solid var(--rule); color:var(--body);
  transition:border-color .12s, background .12s;
}
.kartu-font:hover{border-color:color-mix(in srgb, var(--w,var(--amber)) 55%, transparent)}
.kartu-font.aktif{
  border-color:var(--w,var(--amber));
  background:color-mix(in srgb, var(--w,var(--amber)) 14%, var(--sunk));
  color:var(--ink);
}

.petak-warna{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.kartu-warna{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12px; font-weight:600; padding:6px 12px 6px 7px;
  border-radius:999px; background:var(--sunk);
  border:1px solid var(--rule); color:var(--muted);
}
.kartu-warna:hover{border-color:var(--amber-edge); color:var(--body)}
.kartu-warna.aktif{
  border-color:var(--w,var(--amber));
  background:color-mix(in srgb, var(--w,var(--amber)) 14%, var(--sunk));
  color:var(--ink);
}
.contoh-warna{
  display:flex; align-items:center; justify-content:center; gap:2px;
  width:34px; height:20px; border-radius:999px; flex:0 0 34px;
  border:1px solid rgba(255,255,255,.14);
}
.contoh-warna i{display:block; width:7px; height:7px; border-radius:50%}


/* ── Tombol hapus di thumbnail ─────────────────────────────────
   Aturan warna tombol per bagian di atas menimpa gaya lokal
   .tb button, sehingga tanda silang di thumbnail foto jadi ungu
   samar 10% di atas fotonya sendiri -- ada, tapi tidak terlihat.
   Pengguna melaporkannya sebagai "tidak ada cara menghapus gambar",
   dan itu memang yang terjadi: tombol yang tidak terlihat sama
   dengan tombol yang tidak ada.

   Aturan ini dibuat lebih kuat dari aturan per bagian itu, dan
   berlaku untuk semua thumbnail -- foto maupun video. */
section[style*="--w"] .thumbs .tb button,
.thumbs .tb button{
  position:absolute; top:5px; right:5px; z-index:2;
  width:23px; height:23px; padding:0; line-height:1;
  border-radius:50%; font-size:15px; font-weight:700;
  background:rgba(10,14,26,.86) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.34) !important;
  display:grid; place-items:center; cursor:pointer;
}
section[style*="--w"] .thumbs .tb button:hover,
.thumbs .tb button:hover{
  background:var(--stop,#e0524a) !important;
  border-color:var(--stop,#e0524a) !important;
}

/* Baris centang di dalam grid-form. Tanpa ini, kotak centangnya
   melayang di tengah kolom dan tulisannya jatuh ke baris bawah --
   terbaca seperti dua hal yang tidak berhubungan. */
.grid-form label.centang{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; color:var(--ink);
  cursor:pointer; text-transform:none; letter-spacing:normal;
}
.grid-form label.centang input[type="checkbox"]{
  width:17px; height:17px; margin:0; flex:0 0 17px; accent-color:var(--amber);
}


/* ── Blok yang bisa diklik harus terangkat dari halaman ────────
   Kontras warna saja tidak cukup di latar gelap: rasio luminans
   memampat di ujung gelap, jadi 1,73 adalah batas praktis tanpa
   membuat blok terlihat pucat. Bayangan mengerjakan sisanya --
   ia memisahkan blok dari halaman tanpa mengubah warnanya. */
.kartu-gaya, .hook-kartu, .kartu-efek, .kartu-teks, .kartu,
.jalur-kartu, .kotak-alat, .kotak-sendiri{
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 3px 12px -6px rgba(0,0,0,.6);
}
.kartu-gaya:hover, .hook-kartu:hover, .kartu-efek:hover,
.kartu-teks:hover, .kartu:hover, .jalur-kartu:hover{
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset,
              0 6px 20px -8px rgba(0,0,0,.75);
}

/* Yang sedang terpilih dinaikkan lagi, supaya "mana yang aktif"
   terbaca dari jauh tanpa harus mencari garis tepinya. */
.kartu-gaya[aria-pressed="true"], .kartu-efek.aktif,
.kartu-teks.aktif, .kartu-warna.aktif, .hook-kartu.dipilih{
  box-shadow: 0 0 0 1px var(--w, var(--amber)) inset,
              0 4px 16px -6px color-mix(in srgb, var(--w, var(--amber)) 40%, transparent);
}

/* ── Jendela coba tulisan ──────────────────────────────────────
   Sebesar video sungguhan. Kartu kecil cukup untuk memilih, tidak
   cukup untuk memutuskan -- dan tulisan hook adalah hal yang paling
   mustahil dinilai dari ukuran kecil. */
.tirai-teks{
  position:fixed; inset:0; z-index:70; background:rgba(4,7,14,.86);
  display:none; padding:18px; overflow-y:auto;
}
.tirai-teks.buka{display:block}
.jendela-teks{
  max-width:820px; margin:20px auto; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.8);
}
.jt-kepala{
  padding:15px 18px; border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
}
.jt-kepala b{display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-size:16px; color:var(--ink)}
.jt-kepala .stat{display:block; margin-top:3px}
.jt-isi{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:18px}
.jt-layar{position:relative; flex:0 0 auto}
#jt-kanvas{
  display:block; width:340px; height:auto; background:#000;
  border-radius:var(--rp,9px); border:1px solid var(--rule);
}
/* Garis zona aman: bagian yang tertutup tombol TikTok. Ditampilkan
   supaya pengguna tahu kenapa tulisannya tidak boleh turun lebih
   jauh, bukan sekadar menurut. */
.jt-zona{position:absolute; left:0; right:0; pointer-events:none;
  top:10%; bottom:14%; border-top:1px dashed rgba(245,205,78,.45);
  border-bottom:1px dashed rgba(245,205,78,.45)}
.jt-zona span{
  position:absolute; bottom:-19px; right:4px;
  font-family:"JetBrains Mono",monospace; font-size:9px;
  color:rgba(245,205,78,.75);
}
.jt-atur label{display:block; font-size:12px; font-weight:600;
  color:var(--muted); margin-bottom:5px}
/* Baris centang harus tetap sebaris. Aturan display:block di atas
   membuat kotak centangnya melayang di tengah dan tulisannya jatuh
   ke baris bawah -- terbaca seperti dua hal yang tidak berhubungan. */
.jt-atur label.centang{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--ink); cursor:pointer;
}
.jt-atur label.centang input[type="checkbox"]{
  width:17px; height:17px; margin:0; flex:0 0 17px; accent-color:var(--amber);
}
.jt-atur select,.jt-atur textarea{width:100%}
.jt-atur .aksi{margin-top:18px}

@media (max-width:720px){
  .jt-isi{grid-template-columns:1fr}
  #jt-kanvas{width:100%; max-width:300px; margin:0 auto}
  .jt-layar{display:flex; justify-content:center}
  .jt-zona{left:50%; transform:translateX(-50%); width:100%; max-width:300px}
}

/* ── Pemutar audio bawaan browser (Voice Over) ────────────────────
   Tanpa ini, elemen <audio controls> tampil dengan bilah bawaan
   peramban yang sering gelap pekat/hitam -- pas menabrak aturan
   "jangan ada warna dasar blok warna hitam" yang berlaku di semua
   komponen lain. color-scheme dark supaya ikon bawaannya (putih di
   atas gelap) tetap terbaca, latar & bingkainya mengikuti token yang
   sama dengan kartu-kartu lain. */
audio{
  color-scheme: dark;
  background: var(--sunk, #26252b);
  border: 1px solid var(--rule, #55689f);
  border-radius: var(--rp, var(--r, 10px));
  padding: 2px 6px;
}

/* ── Tombol Keluar -- selalu di pojok kanan atas halaman ──────────
   position:absolute terhadap header.atas (semua halaman sudah punya
   position:relative) -- jadi tidak pernah ikut terlipat ke bawah
   betapapun banyak tombol navigasi yang ada. Posisi ini SENGAJA sama
   di HP maupun laptop -- tidak lagi dilipat ke bawah logo di layar
   sempit, supaya pojoknya konsisten di semua ukuran layar. */
.btn-keluar{
  position:absolute; top:18px; right:-8px;
  background:#dc2626; color:#fff; border:1px solid #dc2626;
  font-weight:700; padding:9px 16px; font-size:15px; border-radius:var(--rp,10px);
  cursor:pointer;
}
.btn-keluar:hover{
  background:#b91c1c;
  border-color:#b91c1c;
}
@media(max-width:640px){
  .btn-keluar{padding:6px 10px; font-size:12.5px; top:14px; right:-4px}
}

/* ── Label "Studio" -- selalu di pojok kiri atas halaman ──────────
   Menandai bagian aplikasi (studio) ini beda dari halaman jualan
   publik (autovideo.html), yang tombol "Buka studio"-nya membawa ke
   sini. Sama seperti .btn-keluar: position:absolute terhadap
   header.atas, dan pojoknya SENGAJA sama di HP maupun laptop. */
.studio-label{
  position:absolute; top:18px; left:0;
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--amber);
}
@media(min-width:641px){
  .studio-label{font-size:16px; top:22px}
}

/* ── Navigasi kepala: kartu ikon+label ─────────────────────────────
   Setiap tombol kepala (Dashboard, tiga "Buat Video", dua Prompt,
   Panduan) adalah kartu persegi kecil: ikon di atas, label di bawah
   -- bukan lagi pil teks datar. ".btn-nav" sengaja TERPISAH dari
   ".btn" biasa (dipakai di isi halaman untuk tombol lain) supaya
   perubahan gaya di sini tidak ikut menimpa tombol-tombol itu. */
:root{
  --kilat:#d9691f;    --kilat-terang:#f4924c;
  --utama:#1f6fd6;    --utama-terang:#5aa8ff;
  --variasi:#1c8f42;  --variasi-terang:#3ecc6a;
}
.jalur-kepala{display:flex;align-items:flex-end;gap:10px;row-gap:16px;flex-wrap:wrap;padding-right:110px}
.btn-nav{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-width:120px;padding:18px 14px;border-radius:16px;
  background:var(--surface);color:#fff;text-decoration:none;
  font-weight:700;font-size:14.5px;text-align:center;line-height:1.25;
  border:1px solid transparent;transition:transform .1s,filter .15s;
}
.btn-nav:hover{filter:brightness(1.12)}
.btn-nav svg{width:26px;height:26px;flex:0 0 auto}
/* Tiga tombol inti -- warna tetap permanen per fitur (bukan berubah
   ikut halaman aktif), supaya orang cepat hafal "orange = kilat, biru
   = utama, hijau = variasi" di mana pun mereka berada. Status
   "sedang di halaman ini" ditandai TERPISAH lewat cincin cahaya
   (lihat .disini di bawah), bukan lewat warna latarnya. */
.btn-nav.kilat{background:var(--kilat)}
.btn-nav.utama{background:var(--utama)}
.btn-nav.variasi{background:var(--variasi)}
.btn-nav.kilat.disini{box-shadow:0 0 0 3px var(--kilat-terang),0 0 16px rgba(244,146,76,.6)}
.btn-nav.utama.disini{box-shadow:0 0 0 3px var(--utama-terang),0 0 16px rgba(90,168,255,.6)}
.btn-nav.variasi.disini{box-shadow:0 0 0 3px var(--variasi-terang),0 0 16px rgba(62,204,106,.6)}
/* Empat tombol navigasi biasa (bukan bagian grup "Buat Video") --
   warna netral, dan yang aktif dipakai gaya emas standar situs. */
.btn-nav.disini:not(.kilat):not(.utama):not(.variasi){background:var(--amber);color:#171308}

.baris-nav-lain{display:flex;gap:10px;flex-wrap:wrap}
.pemisah-kepala{align-self:stretch;width:1px;background:var(--rule);margin:0 2px}

/* ── Grup "Buat Video" -- fitur paling utama AutoVideo ────────────
   Label besar + tiga panah, masing-masing mengarah lurus ke satu
   tombol di bawahnya -- menegaskan ini INTI produknya. */
/* align-items:stretch (bukan center) supaya label dan baris panah
   ikut selebar .tombol-grup persis -- lebar kontainer ini ditentukan
   oleh .tombol-grup (anak dengan lebar wajar), lalu dua anak lain
   melebar mengikutinya. Ini yang membuat panel labelnya selebar
   ketiga tombol di reference, bukan cuma sepanjang teksnya. */
.grup-buat-video{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.grup-buat-video .label-buat-video{
  background:rgba(255,255,255,.06);border:none;box-shadow:none;
  color:#fff;font-weight:800;font-size:26px;text-align:center;
  padding:14px 0;border-radius:16px;
}
.grup-buat-video .panah-baris{display:flex;justify-content:space-around;padding:0 6px;box-sizing:border-box}
.grup-buat-video .panah-baris svg{width:18px;height:18px;color:#fff}
.grup-buat-video .tombol-grup{display:flex;gap:8px}

/* Logo + subtitle (eyebrow) -- baris pertama header, SELALU di paling
   atas dan center, ikon di atas tulisan "AutoVideo", pada semua
   ukuran layar (HP maupun laptop) -- bukan cuma di layar sempit
   seperti sebelumnya. Selektor "header.atas > div:first-child" dan
   "header.atas .logo-baris/.logo-icon" sengaja dipakai (bukan cuma
   .logo-baris/.logo-icon polos) supaya spesifisitasnya menang atas
   aturan header.atas milik tiap halaman (ditulis di <style> tiap
   halaman, dimuat SESUDAH app.css -- tanpa selektor yang lebih
   spesifik ini, urutan itu membuat aturan halaman menang meski
   app.css seharusnya jadi dasar). Ini juga yang membuat baris tombol
   navigasi di sebelahnya turun ke bawah logo (bukan disamping) --
   karena div logo mengambil lebar penuh, flex-wrap pada header.atas
   otomatis melipat sisanya ke baris baru. */
header.atas > div:first-child{width:100%;text-align:center}
header.atas .logo-baris{flex-direction:column;justify-content:center;gap:8px}
header.atas .logo-icon{width:52px;height:52px}

/* Baris tombol navigasi (Dashboard, Buat Video, Prompt, Panduan) --
   dipaksa selebar penuh header lalu di-center DI DALAM dirinya
   sendiri. Tanpa width:100% di sini, justify-content:center tidak
   ada artinya: header.atas mewarisi justify-content:space-between
   dari tiap halaman, dan satu-satunya item yang tersisa di baris ini
   (sesudah baris logo melipat ke bawah) akan didorong rata kiri oleh
   aturan itu, bukan ke tengah. */
header.atas .jalur-kepala{width:100%;justify-content:center;padding-right:0}
/* Tombol Dashboard: satu-satunya <a class="btn-nav"> yang jadi anak
   LANGSUNG .jalur-kepala (tiga tombol Kilat/Utama/Variasi ada di
   dalam .tombol-grup, tiga tombol Prompt/Panduan ada di dalam
   .baris-nav-lain) -- flex-basis:100% TANPA max-width memaksanya
   sendirian di baris paling atas (kalau dibatasi max-width, ukurannya
   yang dipakai untuk hitungan "muat tidaknya satu baris" ikut
   mengecil, jadi tombol lain tetap muat di sampingnya dan baris tidak
   pernah pecah -- ini yang bikin percobaan pertama gagal), sama
   seperti susunannya di HP, pada semua ukuran layar. */
header.atas .jalur-kepala > a.btn-nav{flex-basis:100%;margin-bottom:4px}

@media(min-width:641px){
  header.atas .logo-icon{width:120px;height:120px}
  header.atas .logo-baris{gap:12px}
  header.atas .logo{font-size:56px}
}

@media(max-width:640px){
  .jalur-kepala{flex-direction:column;align-items:stretch;padding-right:0;gap:14px}
  header.atas .jalur-kepala > a.btn-nav{margin-bottom:0}
  .grup-buat-video{width:100%}
  .grup-buat-video .label-buat-video{width:100%;text-align:center;font-size:21px}
  .grup-buat-video .tombol-grup{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
  .btn-nav{min-width:0;padding:12px 6px;font-size:11.5px}
  .pemisah-kepala{display:none}
  .baris-nav-lain{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
}

/* ── Notifikasi mengambang -- "Berhasil tersimpan" dsb ────────────
   Beda dari pesan biasa (.pesan, ditulis ke dalam alur halaman):
   ini position:fixed supaya tetap terlihat berapa pun jauhnya
   pengguna sudah menggulir halaman saat menekan tombol Simpan --
   pesan biasa yang ditaruh di atas halaman gampang terlewat kalau
   tombolnya ada jauh di bawah, dan terasa seperti "tidak ada aksi". */
.toast-sukses{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:var(--go);color:#062018;font-weight:700;font-size:13.5px;
  padding:10px 20px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999;
}
.toast-sukses.tampil{opacity:1;transform:translateX(-50%) translateY(0)}