/* =====================================================================
   MetaTraderKit — Halaman FAQ (faq.css)

   Dipakai HANYA oleh faq.php. Dipasang lewat:
     <body class="fq">
     <link rel="stylesheet" href="/assets/faq.css?v=1">

   SEMUA aturan dilingkupi ".fq" — pola yang sama dengan .kt (katalog),
   .ts (testimoni), .tt (tentang), .kb (kabar), .pd (produk).

   Ditulis sebagai BERKAS sejak awal, bukan <style> di dalam halaman. Dua
   halaman sebelumnya (testimoni build 1001, tentang build 1012) harus
   dipisahkan belakangan setelah ketahuan ukuran hurufnya melenceng —
   `tipografi_test` cuma memindai assets/*.css, jadi CSS yang hidup di
   dalam halaman tidak dijaga siapa pun.

   Seluruh ukuran huruf memakai token tangga. Tidak ada satu pun angka px
   pada font-size.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Jangkar cahaya. Halaman ini panjang dan seluruhnya gelap; tanpa penanda
   ia terbaca sebagai satu bidang hitam datar.
   --------------------------------------------------------------------- */
.fq main{position:relative}
.fq main::before{content:'';position:absolute;pointer-events:none;z-index:-1;
  left:0;right:0;top:0;height:520px;
  background:radial-gradient(820px 420px at 82% -8%,rgba(31,227,116,.06),transparent 60%),
             radial-gradient(660px 380px at 4% 6%,rgba(212,178,92,.045),transparent 62%)}

/* ---------------------------------------------------------------------
   KEPALA + PENCARIAN
   --------------------------------------------------------------------- */
/* Dua kolom: kiri judul + pencarian, kanan lambang menyala.

   align-items:center, bukan end. Dengan `end`, kolom kiri didorong ke dasar
   baris setinggi lambang — dan itu yang membuat ruang di ATAS judul menganga
   sementara di bawahnya rapat.

   Padding atas turun dari --s16 ke --s10: kepala halaman ini tidak membawa
   sub-judul, jadi ia tidak butuh ruang napas sebanyak halaman yang membawa. */
.fq .fq-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--s10);align-items:center;padding:var(--s10) 0 0}
.fq .fq-hero h1{font-family:var(--disp);font-size:var(--t-l2);font-weight:700;
  letter-spacing:-.022em;line-height:1.18;margin:var(--s4) 0 0}

/* Kotak pencarian sengaja LEBAR dan tinggi 52px.

   Halaman FAQ tugasnya menemukan, bukan menyampaikan. Kotak yang kecil
   membuat orang menggulir dan menebak — dan daftar yang panjang jadi
   terasa berantakan padahal isinya rapi. */
.fq .cari{position:relative;margin-top:var(--s7);max-width:560px}
.fq .fq-hero-kiri{min-width:0}
.fq .cari input{appearance:none;-webkit-appearance:none;width:100%;height:52px;border-radius:999px;border:1px solid var(--line-2);
  background:linear-gradient(160deg,var(--ink-2),#0B1811);color:var(--paper);
  font-family:var(--body);font-size:var(--t-l6);padding:0 var(--s12)}
.fq .cari input::placeholder{color:var(--muted-2)}
.fq .cari input:focus{outline:none;border-color:rgba(31,227,116,.5);
  box-shadow:0 0 0 3px rgba(31,227,116,.09)}
.fq .cari > .icon{position:absolute;left:var(--s5);top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted-2);pointer-events:none}
.fq .cari-hapus{position:absolute;right:var(--s3b);top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;border:0;background:rgba(135,170,145,.14);
  color:var(--muted);cursor:pointer;display:grid;place-items:center;
  font-size:var(--t-l6);line-height:1;font-family:var(--body)}
.fq .cari-hapus:hover{background:rgba(135,170,145,.24);color:var(--paper)}
.fq .cari-hapus[hidden]{display:none}

/* ---------------------------------------------------------------------
   SUSUNAN DUA KOLOM
   --------------------------------------------------------------------- */
.fq .fq-isi{position:relative;display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:var(--s12);margin-top:var(--s12);padding-bottom:var(--s20)}

/* Rel kategori. Menempel supaya tetap terjangkau di daftar yang panjang —
   itu justru gunanya. */
.fq .rel{position:sticky;top:calc(66px + var(--s5));align-self:start}
.fq .rel h6{font-family:var(--disp);font-size:var(--t-l9);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:var(--s3)}
/* justify-content dibuang bersama angkanya: tanpa elemen kedua, ia tidak
   melakukan apa pun, dan menyisakannya menyesatkan pembaca berikutnya. */
.fq .rel a{display:flex;align-items:center;gap:var(--s2);
  padding:9px var(--s3);border-radius:10px;font-size:var(--t-l7);color:var(--muted);
  border-left:2px solid transparent;transition:color .16s,background .16s,border-color .16s}
.fq .rel a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq .rel a:hover{color:var(--paper);background:rgba(255,255,255,.025)}
.fq .rel a.on{color:var(--green);background:rgba(31,227,116,.07);border-left-color:var(--green)}

/* Pengganti rel untuk HP. <details> bawaannya display:block — itu merusak
   baris flex, jadi harus inline-block. */
.fq .pilih-kat{display:none;position:relative}
.fq .pilih-kat > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);height:46px;padding:0 var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r);font-size:var(--t-l7);
  color:var(--paper);background:linear-gradient(160deg,var(--ink-2),#0B1811)}
.fq .pilih-kat > summary::-webkit-details-marker{display:none}
.fq .pilih-kat[open] > summary,.fq .pilih-kat.aktif > summary{
  border-color:rgba(31,227,116,.45);color:var(--green)}
.fq .pilih-kat > summary .icon{width:13px;height:13px;transition:transform .18s;flex:none}
.fq .pilih-kat[open] > summary .icon{transform:rotate(180deg)}
.fq .pilih-nama{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq .pilih-isi{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  max-height:300px;overflow-y:auto;
  background:linear-gradient(180deg,#0E1D16,#0A150F);border:1px solid var(--line-2);
  border-radius:var(--r);padding:var(--s1b);box-shadow:0 22px 48px rgba(0,0,0,.6)}
.fq .pilih-isi a{display:flex;align-items:center;gap:var(--s2);
  padding:11px var(--s3);border-radius:9px;font-size:var(--t-l7);color:var(--muted)}
.fq .pilih-isi a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq .pilih-isi a:hover{background:rgba(31,227,116,.08);color:var(--paper)}


/* ---------------------------------------------------------------------
   LAMBANG DI KOLOM KANAN.

   Gerak dan tampilannya dari mtk.css; di sini hanya ukurannya. Lambang
   memakai min(100%,360px), jadi yang membatasi adalah pembungkusnya.

   Dibuat lebih kecil daripada di halaman Tentang: di sana ia tokoh utama
   halaman, di sini ia menemani judul dan tidak boleh mengalahkannya.
   --------------------------------------------------------------------- */
.fq .fq-lambang{display:grid;place-items:center;pointer-events:none}
.fq .fq-lambang .lambang-pentas{width:min(100%,300px)}

/* ---------------------------------------------------------------------
   PEMISAH ANTARA REL DAN ISI.

   Dua kolom yang cuma dipisah jarak terbaca sebagai satu bidang yang
   kebetulan renggang. Garis tegak yang memudar di kedua ujung memisahkan
   keduanya tanpa memotong halaman.

   Ditaruh pada .fq-isi, bukan pada relnya: rel menempel (sticky) dan ikut
   bergerak, sedangkan pemisahnya harus setinggi seluruh isi.
   --------------------------------------------------------------------- */
.fq .fq-isi::before{content:'';position:absolute;top:0;bottom:var(--s20);
  left:calc(250px + (var(--s12) / 2));width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--line-2) 8%,var(--line-2) 78%,transparent)}

/* ---------------------------------------------------------------------
   KATEGORI & PERTANYAAN
   --------------------------------------------------------------------- */
.fq .kat{position:relative;scroll-margin-top:90px}
.fq .kat[hidden]{display:none}
.fq .kat > h2{display:flex;align-items:center;gap:var(--s3);
  font-family:var(--disp);font-size:var(--t-l4);font-weight:700;
  letter-spacing:-.02em;margin-bottom:var(--s4)}

.fq .qa{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:
    radial-gradient(115% 82% at 0% 0%,rgba(31,227,116,.07),transparent 56%),
    radial-gradient(100% 80% at 100% 100%,rgba(0,0,0,.28),transparent 62%),
    linear-gradient(152deg,#1B3327 0%,#132720 46%,#0C1A13 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .2s}
.fq .qa + .qa{margin-top:var(--s2b)}
.fq .qa[open]{border-color:rgba(31,227,116,.3);box-shadow:inset 0 1px 0 rgba(31,227,116,.22)}
.fq .qa[hidden]{display:none}
.fq .qa > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  gap:var(--s3);padding:var(--s4) var(--s5);
  font-family:var(--body);font-size:var(--t-l6);font-weight:600;line-height:1.5;color:var(--paper)}
.fq .qa > summary::-webkit-details-marker{display:none}
.fq .qa > summary:hover{color:var(--green)}
/* Tanda lipat: + menjadi −. Batangnya digambar CSS di blok 1014 di bawah;
   di sini hanya kotak bulatnya. */
.fq .qa-tanda{position:relative;flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  border:1px solid var(--line-2);color:var(--muted);display:grid;place-items:center;
  font-size:var(--t-l6);line-height:1;transition:background .18s,color .18s,border-color .18s}
.fq .qa[open] .qa-tanda{background:rgba(31,227,116,.14);border-color:rgba(31,227,116,.45);
  color:var(--green)}
.fq .qa-teks{flex:1;min-width:0}
/* Jejak induk: hanya muncul pada butir yang aslinya cucu di pohon, supaya
   asal pertanyaan tetap terbaca setelah diratakan. */
.fq .qa-jejak{display:block;font-size:var(--t-l9);font-weight:500;
  color:var(--muted-2);margin-bottom:3px}
.fq .qa-jwb{padding:0 var(--s5) var(--s5) calc(var(--s5) + 22px + var(--s3));
  font-size:var(--t-l7);line-height:1.8;color:#CFDCD5}

/* ---------------------------------------------------------------------
   KEADAAN KOSONG — dua keadaan berbeda, satu bentuk.
     .kosong-awal  : belum ada topik yang disetel publik
     #fqKosong     : pencarian tidak menemukan apa pun
   --------------------------------------------------------------------- */
.fq .kosong{border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:var(--s12) var(--s6);text-align:center;color:var(--muted)}
.fq .kosong[hidden]{display:none}
.fq .kosong .icon{width:30px;height:30px;color:var(--muted-2);margin-bottom:var(--s3)}
.fq .kosong b{display:block;font-family:var(--disp);font-size:var(--t-l5);font-weight:700;
  color:var(--paper);margin-bottom:var(--s2)}
.fq .kosong p{font-size:var(--t-l7);max-width:46ch;margin:0 auto}
.fq .kosong .btn{margin-top:var(--s5)}
.fq .kosong-awal{margin:var(--s12) 0 var(--s20)}

/* ---------------------------------------------------------------------
   AJAKAN PENUTUP
   --------------------------------------------------------------------- */
.fq .fq-cta{margin-top:var(--s16);border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--panel2),var(--ink-2));padding:var(--s7) var(--s8);
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;position:relative;overflow:hidden}
.fq .fq-cta::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.5),transparent)}
.fq .fq-cta > *{position:relative;z-index:1}
.fq .fq-cta h3{font-family:var(--disp);font-size:var(--t-l5);font-weight:700;letter-spacing:-.015em}
.fq .fq-cta p{color:var(--muted);font-size:var(--t-l8);margin-top:var(--s1b);max-width:50ch}
.fq .fq-cta .btn{margin-left:auto}

/* ---------------------------------------------------------------------
   HP
   --------------------------------------------------------------------- */
@media (max-width:920px){
  /* Satu kolom di HP. Lambang disembunyikan: di layar sempit ia mendorong
     kotak pencarian turun setengah layar, dan hiasan tidak boleh mendahului
     alat. */
  .fq .fq-hero{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding:var(--s8) 0 0}
  .fq .fq-lambang{display:none}
  .fq .fq-isi::before{display:none}
  .fq .fq-hero h1{font-size:var(--t-l3)}
  .fq .cari{margin-top:var(--s5);max-width:none}
  .fq .cari input{height:48px;font-size:var(--t-l7);padding:0 var(--s10)}
  .fq .cari > .icon{left:var(--s4);width:16px;height:16px}

  .fq .fq-isi{grid-template-columns:minmax(0,1fr);gap:var(--s5);
    margin-top:var(--s8);padding-bottom:var(--s12)}
  /* Rel diganti dropdown: rel menempel di layar sempit akan memakan
     sepertiga tinggi layar tanpa menampilkan isi apa pun. */
  .fq .rel{display:none}
  .fq .pilih-kat{display:inline-block;width:100%;margin-bottom:var(--s2)}

  .fq .kat + .kat{margin-top:var(--s12);padding-top:var(--s8)}
  .fq .kat > h2{font-size:var(--t-l5);margin-bottom:var(--s3)}
  .fq .qa > summary{font-size:var(--t-l7);padding:var(--s3b) var(--s4);gap:var(--s2b)}
  .fq .qa-jwb{padding:0 var(--s4) var(--s4) calc(var(--s4) + 22px + var(--s2b));
    font-size:var(--t-l8)}

  .fq .kosong{padding:var(--s10) var(--s5)}
  .fq .fq-cta{padding:var(--s5);gap:var(--s4);margin-top:var(--s10)}
  .fq .fq-cta .btn{margin-left:0;width:100%}
}

/* =====================================================================
   BUILD 1014 — tombol hapus ganda, tanda lipat, dan pemisah antarbagian.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOMBOL HAPUS GANDA.

   input[type=search] punya tombol silang BAWAAN di WebKit
   (::-webkit-search-cancel-button). Ia muncul otomatis begitu kotaknya
   berisi, dan menumpuk tepat di sebelah tombol hapus milik kita — dua
   silang berdampingan, yang kecil pucat dan yang besar berbingkai.

   Tidak bisa dipakai begitu saja: bentuknya ditentukan sistem, tidak ikut
   tema, dan tidak ada di Firefox. Disembunyikan, tombol kita yang dipakai.
   --------------------------------------------------------------------- */
.fq .cari input::-webkit-search-cancel-button,
.fq .cari input::-webkit-search-decoration,
.fq .cari input::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none}

/* ---------------------------------------------------------------------
   TANDA LIPAT: + menjadi −, bukan + diputar jadi ×.

   Versi lama memakai huruf "+" lalu memutarnya 45 derajat. Hasilnya "×",
   dan × terbaca sebagai "tutup" atau "batal" — bukan "lipat". Di kartu
   berbingkai hijau ia malah mirip tanda kesalahan.

   Sekarang dua batang digambar CSS: yang tegak menyusut saat terbuka,
   menyisakan yang mendatar. Satu bentuk, dua arti, tanpa huruf yang
   bergantung pada font.
   --------------------------------------------------------------------- */
.fq .qa-tanda::before{content:'';position:absolute;top:50%;left:50%;
  width:10px;height:1.5px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%)}
/* Batang tegak = putaran 90 derajat dari yang mendatar. Ditulis LENGKAP di
   satu aturan, bukan mewarisi lalu ditimpa: dua aturan untuk satu selektor
   membuat siapa pun yang membacanya harus menghitung mana yang menang. */
.fq .qa-tanda::after{content:'';position:absolute;top:50%;left:50%;
  width:10px;height:1.5px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%) rotate(90deg);transition:transform .18s}
.fq .qa[open] .qa-tanda::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}

/* ---------------------------------------------------------------------
   PEMISAH ANTARBAGIAN.

   Halaman ini terasa datar karena semua bagian berbagi satu bidang gelap
   yang sama: judul kategori mengambang tanpa alas, dan kartu-kartunya
   isian gradien polos.

   Tiga lapis, sama seperti yang dipakai halaman testimoni:
     1. jangkar cahaya per kategori   — mata dapat penanda "bagian baru"
     2. garis pemisah yang memudar    — memisah tanpa memotong
     3. permukaan kartu bergrain      — kartu tidak lagi kotak kosong
   --------------------------------------------------------------------- */

/* 1 & 2 — kepala kategori diberi alas dan penanda. */
.fq .kat + .kat{margin-top:var(--s16);padding-top:var(--s10)}
.fq .kat + .kat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}
/* Cahaya lemah di belakang tiap kepala kategori. z-index -1 dan
   pointer-events:none: ia murni latar. */
.fq .kat::after{content:'';position:absolute;pointer-events:none;z-index:-1;
  left:calc(var(--s10) * -1);right:calc(var(--s10) * -1);top:0;height:220px;
  background:radial-gradient(560px 220px at 12% 0,rgba(31,227,116,.05),transparent 70%)}
.fq .kat:nth-child(even)::after{
  background:radial-gradient(560px 220px at 88% 0,rgba(212,178,92,.045),transparent 70%)}

/* Batang penanda di kiri judul — memberi kepala kategori titik mulai yang
   tegas, dan itu yang membuat batas antarbagian terbaca. */
.fq .kat > h2::before{content:'';flex:none;width:3px;height:1.05em;border-radius:2px;
  background:linear-gradient(180deg,var(--green),rgba(31,227,116,.25))}
.fq .kat:nth-child(even) > h2::before{
  background:linear-gradient(180deg,var(--gold),rgba(212,178,92,.25))}

/* 3 — permukaan kartu. Gradien lama var(--panel2) -> var(--ink-2) selisihnya
   lima langkah: itu warna rata dengan langkah tambahan. Tiga henti + cahaya
   tepi atas + grain membuatnya terbaca sebagai benda, bukan lubang. */
.fq{--grain-terang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.fq .qa::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:var(--grain-terang);background-size:150px 150px;
  opacity:.08;mix-blend-mode:screen}
/* Isi kartu harus DI ATAS lapis grain. */
.fq .qa > summary,.fq .qa-jwb{position:relative;z-index:2}
/* Kartu yang terbuka diberi cahaya tepi atas — menandai mana yang sedang
   dibaca tanpa menambah warna. */

/* Ajakan penutup dijauhkan supaya tidak menempel pada kategori terakhir. */

@media (max-width:920px){
  .fq .kat::after{left:calc(var(--s5) * -1);right:calc(var(--s5) * -1);height:170px}
}

/* ---------------------------------------------------------------------
   TAUTAN AKSI DI DALAM JAWABAN.

   Gaya dasarnya di mtk.css — di sini hanya penyesuaian supaya tombolnya
   menyatu dengan kartu, bukan menempel di atasnya.

   Tombolnya muncul TEPAT DI TEMPAT penulis menaruhnya di dalam teks. Kalau
   ia berdiri sendiri di satu baris, ia jadi blok; kalau di tengah kalimat,
   ia mengalir bersama kata di sekitarnya. Itu sudah ditangani inline-flex
   di mtk.css — yang perlu diatur di sini cuma jaraknya.
   --------------------------------------------------------------------- */
.fq .qa-jwb .jawab-btn{
  /* Jarak atas lebih lega daripada jarak antarbaris biasa: tombol yang
     menempel pada kalimat di atasnya terbaca sebagai bagian kalimat itu. */
  margin:var(--s3b) 0 var(--s1);
  /* Sudutnya diselaraskan dengan kartu tempat ia berada. */
  border-radius:10px}
/* Tombol yang berdiri sendiri di baris terakhir tidak perlu jarak bawah —
   padding kartunya sudah menyediakan. */
.fq .qa-jwb .jawab-btn:last-child{margin-bottom:0}
/* Dua tombol berdampingan diberi jarak; tanpa ini keduanya menempel. */
.fq .qa-jwb .jawab-btn + .jawab-btn{margin-left:var(--s2)}
.fq .qa-jwb .jawab-tautan{color:var(--green)}