/* gate.css — halaman gerbang "/" (pilih jalur) + tautan pindah jalur di form.
   Dimuat SETELAH menfess.css (dan theme-menfess.css di /menfess). Tidak
   menimpa aturan menfess.css — hanya menambah kelas .gate-* dan .switch-*.
   Warna dasar (latar, teks, fokus) memakai variabel :root yang sudah ada.
   Warna kartu menfess di gerbang sengaja ditulis hex: satu halaman harus
   menampilkan dua brand sekaligus, sedangkan :root cuma memuat satu palet
   (nilainya disamakan dengan theme-menfess.css). */

/* ── Gerbang (/): latar netral dari palet yang sudah ada ─────── */
body.gate{
  background-image:
    radial-gradient(900px 500px at 12% -10%, rgba(47,84,255,.16), transparent 60%),
    radial-gradient(900px 500px at 88% 110%, rgba(225,29,72,.14), transparent 60%);
  display:flex;flex-direction:column;
}
.gate-wrap{max-width:920px;width:100%;margin:auto;text-align:center;}
.gate-badge{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);
  padding:8px 16px;border-radius:999px;font-family:'Unbounded';font-weight:900;font-size:14px;
  box-shadow:4px 4px 0 rgba(143,168,255,.45);}
.gate-badge .dot{width:10px;height:10px;border-radius:50%;background:var(--ink);}
.gate-head h1{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(28px,6vw,44px);
  color:var(--paper);margin:22px 0 8px;line-height:1.15;}
.gate-head p{color:var(--orchid);font-size:15px;}

.gate-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:32px 0 24px;text-align:left;}
@media(max-width:700px){.gate-cards{grid-template-columns:1fr;gap:16px;margin-top:26px;}}

/* Kartu = <a> utuh; warna per kartu lewat custom property --card-* */
.gate-card{
  display:flex;flex-direction:column;gap:12px;min-height:44px;padding:26px 24px;border-radius:22px;
  background:var(--card-bg);color:var(--card-text);text-decoration:none;
  border:1px solid var(--card-line);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.gate-card.gate-ask{
  --card-bg:var(--deep); --card-accent:var(--violet); --card-cta:var(--acid); --card-cta-ink:var(--ink);
  --card-text:var(--lilac); --card-line:rgba(143,168,255,.25);
}
.gate-card.gate-menfess{
  --card-bg:#3a0a18; --card-accent:#e11d48; --card-cta:#ff3b5c; --card-cta-ink:#fff;
  --card-text:#ffe1e8; --card-line:rgba(244,166,184,.25);
}
.gate-card:hover{transform:translateY(-3px);border-color:var(--card-accent);
  box-shadow:0 0 0 1px var(--card-accent), 0 30px 60px -30px rgba(0,0,0,.9);}
.gate-card:focus-visible{outline:3px solid var(--card-cta);outline-offset:4px;}
.gate-card:active{transform:translateY(0);}
.gate-icon{font-size:36px;line-height:1;}
.gate-name{font-family:'Unbounded';font-weight:700;font-size:18px;color:#fff;}
.gate-desc{font-size:14px;line-height:1.6;color:var(--card-text);flex:1;}
.gate-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:12px 20px;margin-top:6px;border-radius:12px;align-self:flex-start;
  background:var(--card-cta);color:var(--card-cta-ink);
  font-family:'Bricolage Grotesque';font-weight:800;font-size:14px;
  box-shadow:4px 4px 0 var(--card-accent);transition:transform .12s, box-shadow .12s;}
.gate-card:active .gate-cta{transform:translate(2px,2px);box-shadow:none;}
.gate-cta .arr{transition:transform .15s;}
.gate-card:hover .gate-cta .arr{transform:translateX(3px);}
@media(max-width:400px){.gate-card{padding:22px 18px;}.gate-cta{width:100%;}}

.gate-help{font-size:14px;color:var(--orchid);line-height:1.7;}
.gate-help b{color:var(--paper);}
.gate-by{margin-top:26px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orchid);opacity:.6;}

/* ── Tautan pindah jalur (dipakai di /tanya & /menfess) ────────
   Warnanya ikut variabel :root halaman itu, jadi otomatis ungu di /tanya
   dan marun di /menfess tanpa aturan tambahan. */
.switch-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:4px;
  font-size:13px;font-weight:700;color:var(--orchid);text-decoration:none;border-radius:8px;}
.switch-back:hover{color:var(--acid);text-decoration:underline;text-underline-offset:3px;}
.switch-back:focus-visible{outline:2px solid var(--acid);outline-offset:3px;color:var(--acid);}
.switch-line{margin-top:16px;font-size:13px;color:var(--orchid);line-height:1.6;}
.switch-line::before{content:"";display:block;height:1px;background:var(--orchid);opacity:.3;margin-bottom:14px;}
.switch-line a{display:inline-block;padding:4px 0;color:var(--acid);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;border-radius:4px;}
.switch-line a:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}

/* ── Pilihan tujuan tayang di form (/tanya & /menfess) ── */
.targets{margin-top:18px;padding:12px 14px 10px;border:1px dashed var(--orchid);border-radius:12px;min-width:0;}
.targets legend{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orchid);padding:0 6px;}
.targets .target{display:inline-flex;align-items:center;gap:8px;margin:4px 18px 4px 0;font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--paper);cursor:pointer;min-height:44px;}
.targets input[type=checkbox]{width:18px;height:18px;accent-color:var(--acid);cursor:pointer;}
.target-hint{display:block;font-size:11.5px;color:var(--orchid);opacity:.8;}

/* Ada foto → tab foto ditampilkan lebih dulu (foto = slide 1 saat tayang) */
.tabs.photo-first #tab2{order:-1;}
.tag-me{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer;}
.tag-me input[type=checkbox]{width:18px;height:18px;accent-color:var(--acid);cursor:pointer;margin:0;}