/* ===== CFIT – Light UI (white & modern) ===== */
:root{
  --primary:#1747A6;          /* tombol & aksen */
  --primary-600:#123A86;
  --primary-100:#E7EEF9;
  --bg:#ffffff;               /* latar halaman */
  --panel:#ffffff;            /* kartu/panel */
  --text:#0F172A;             /* slate-900 */
  --muted:#6B7280;            /* gray-500 */
  --border:#E5E7EB;           /* gray-200 */
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --radius:14px;

  /* Ukuran yang mudah diatur */
  --prompt-maxw:700px;  /* max lebar gambar soal */
  --opt-minh:150px;     /* tinggi minimal tile opsi */
  --opt-maxw:80%;       /* skala gambar opsi */
  --opt-maxh:80%;
}

/* Root container */
#cfit-app{ color:var(--text); background:var(--bg); padding:20px; border-radius:var(--radius); }

/* Card/panel */
#cfit-app .cfit-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}

/* Headings & text */
#cfit-app h2{ margin:0 0 10px; letter-spacing:.2px; }
#cfit-app p, #cfit-app .note{ color:var(--muted); }

/* Buttons */
#cfit-app .cfit-btn{
  appearance:none; -webkit-tap-highlight-color:transparent;
  background:var(--primary); color:#fff;
  border:none; border-radius:12px; padding:12px 18px;
  font-weight:700; letter-spacing:.2px; cursor:pointer;
  transition:transform .06s, filter .2s, box-shadow .2s;
  box-shadow:0 6px 14px rgba(23,71,166,.18);
}
#cfit-app .cfit-btn:hover{ filter:brightness(1.05); }
#cfit-app .cfit-btn:active{ transform:translateY(1px); }
#cfit-app .cfit-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
#cfit-app .cfit-btn.ghost{
  background:#fff; color:var(--primary); border:1px solid var(--primary); box-shadow:none;
}
#cfit-app .cfit-btn.ghost:hover{ background:var(--primary-100); }

/* Pills (subtest & timer) */
#cfit-app .cfit-pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:var(--primary-100); border:1px solid rgba(23,71,166,.25);
  color:var(--primary); font-size:13px; font-weight:600;
}
#cfit-app .cfit-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }

/* Progress bar (progres soal terjawab) */
#cfit-app .cfit-progress{
  height:10px; background:#F1F5F9; border-radius:999px; overflow:hidden; border:1px solid #EEF2F7;
}
#cfit-app .cfit-bar{ height:100%; width:0%; background:var(--primary); transition:width .3s ease; }

/* ===== Soal (prompt) ===== */
#cfit-app .cfit-q-title{
  text-align:center; margin-bottom:10px;
}
#cfit-app .cfit-q-title img{
  display:block; margin:10px auto;
  max-width: var(--prompt-maxw, 700px) !important;
  width:100%;
  height:auto;
  border:none; border-radius:8px;
}

/* Nomor soal badge */
#cfit-app .cfit-qhead{ margin-bottom:10px; display:flex; align-items:center; gap:8px; justify-content:center; }
#cfit-app .cfit-badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#0ea5e9; color:#fff; font-weight:700; font-size:12px;
}

/* ===== Opsi bergambar (grid) & opsi teks (vertikal) ===== */

/* Kontainer opsi – default grid 2 kolom */
#cfit-app .cfit-opts{
  display:grid;
  grid-template-columns:repeat(2, minmax(120px,1fr));
  gap:12px;
  counter-reset:cfitopt; /* untuk A, B, C, ... */
}
@media (min-width:640px){  #cfit-app .cfit-opts{ grid-template-columns:repeat(3, minmax(150px,1fr)); } }
@media (min-width:1024px){ #cfit-app .cfit-opts{ grid-template-columns:repeat(4, minmax(160px,1fr)); } }

/* Tile opsi (bergambar) */
#cfit-app .cfit-opt{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--opt-minh);
  padding:34px 10px 10px; /* ruang atas untuk label A,B,... */
  border-radius:12px; background:#fff; cursor:pointer;
  border:1px solid var(--border);
  transition:.15s border-color, .15s box-shadow, .06s transform, .15s background;
  color:var(--text);
}
#cfit-app .cfit-opt:hover{
  border-color:rgba(23,71,166,.45);
  box-shadow:0 8px 18px rgba(23,71,166,.08);
  background:#FAFCFF;
}
/* Sembunyikan radio; seluruh tile jadi klik-area */
#cfit-app .cfit-opt input[type="radio"]{ position:absolute; inset:0; opacity:0; }

/* Kontainer gambar dalam tile */
#cfit-app .cfit-opt .cfit-opt-body{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#cfit-app .cfit-opt .cfit-opt-body img{
  max-width:var(--opt-maxw);
  max-height:var(--opt-maxh);
  object-fit:contain; display:block; border-radius:8px;
}

/* Label teks kecil (kalau ada) */
#cfit-app .cfit-opt .cfit-caption{ margin-top:8px; font-size:12px; color:var(--muted); text-align:center; }

/* Label A,B,C,D,E di atas gambar */
#cfit-app .cfit-opt::before{
  counter-increment:cfitopt;
  content:counter(cfitopt, upper-alpha);
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:999px;
  font-weight:700; font-size:12px; color:var(--primary);
  background:#fff; border:1px solid #e5e7eb;
}

/* Status terpilih (garis biru saja; tanpa fill) */
#cfit-app .cfit-opt.selected,
#cfit-app .cfit-opt:has(input:checked){
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(23,71,166,.15) inset;
  background:#fff;
}

/* ===== Variasi opsi teks (vertikal) untuk soal non-gambar ===== */
#cfit-app .cfit-opts.text-list{
  display:flex; flex-direction:column; gap:10px;
}
#cfit-app .cfit-opts.text-list .cfit-opt{
  min-height:auto; padding:12px 14px;
  display:flex; align-items:flex-start; gap:10px; text-align:left;
}
#cfit-app .cfit-opts.text-list .cfit-opt::before{
  /* tetap A,B,C,... di badge atas tengah */
}
#cfit-app .cfit-opts.text-list .key{ min-width:26px; font-weight:800; color:var(--primary); }

/* Meta di bawah soal */
#cfit-app .cfit-meta{ color:var(--muted); font-size:13px; margin-top:6px; text-align:center; }

/* Actions */
#cfit-app .cfit-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

/* Grid stats */
#cfit-app .cfit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px; }
#cfit-app .cfit-stat{ padding:14px; border:1px solid var(--border); background:#fff; border-radius:12px; }
#cfit-app .cfit-stat .k{ font-size:22px; font-weight:800; }
#cfit-app .cfit-stat .l{ font-size:12px; color:var(--muted); }

/* Helper */
#cfit-app .cfit-hide{ display:none !important; }
#cfit-app .note{ font-size:13px; margin-top:8px; }

/* Accessibility: focus ring */
#cfit-app .cfit-btn:focus,
#cfit-app .cfit-opt:focus-within{
  outline:3px solid rgba(23,71,166,.25);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 6px rgba(23,71,166,.25);
}

/* Responsive tweak */
@media (max-width:480px){
  #cfit-app .cfit-actions{ flex-direction:column; align-items:stretch; }
}

/* ===== Grid opsi A–E responsif (3/4/5 kolom) ===== */
#cfit-app .cfit-opts{
  display:grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr)); /* HP: A–C sebaris */
  gap:12px;
  counter-reset: cfitopt; /* tetap untuk label A,B,C,... */
}
@media (min-width:640px){
  #cfit-app .cfit-opts{
    grid-template-columns: repeat(4, minmax(130px, 1fr)); /* Tablet: A–D sebaris, E turun */
  }
}
@media (min-width:1024px){
  #cfit-app .cfit-opts{
    grid-template-columns: repeat(5, minmax(140px, 1fr)); /* Laptop/desktop: A–E sebaris */
  }
}

/* ===== Swap urutan tombol di HP ===== */
@media (max-width:639.98px){
  #cfit-app .cfit-actions{
    flex-direction: column;           /* jadi vertikal */
    align-items: stretch;             /* tombol full-width */
    gap:10px;
  }
  #cfit-next{ order:1; }  /* Jawab & Lanjut di atas */
  #cfit-skip{ order:2; }  /* Lewati di bawah */
}

/* ===== Break Section (instruksi & contoh) ===== */
#cfit-app #cfit-break .break-content p{ margin:0 0 8px; }
#cfit-app #cfit-break img{ display:block; margin:8px auto; max-width: min(760px, 100%); height:auto; border-radius:10px; }

/* ===== Auth tabs ===== */
#cfit-app .cfit-auth-tabs{ display:flex; gap:8px; margin-bottom:12px; }
#cfit-app .cfit-tab{
  background:#fff; border:1px solid var(--border); color:var(--primary);
  padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:700;
}
#cfit-app .cfit-tab-active{ background:var(--primary-100); border-color:rgba(23,71,166,.35); }

#cfit-app .cfit-auth-panel label{ display:block; margin-bottom:10px; color:var(--text); font-weight:600; }
#cfit-app .cfit-auth-panel input{
  width:100%; margin-top:6px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#fff;
}
#cfit-app #auth-msg{ color:var(--muted); margin-top:10px; }

/* ===== Review mode (opsional jika kamu punya layar tinjau) ===== */
#cfit-app .cfit-review .cfit-opt.correct{
  border-color:#16a34a;
  box-shadow:0 0 0 2px rgba(22,163,74,.18) inset;
}
#cfit-app .cfit-review .cfit-opt.wrong{
  border-color:#b91c1c;
  box-shadow:0 0 0 2px rgba(185,28,28,.18) inset;
}

/* ===== CFIT – Intro Hero (seperti Gambar 2) ===== */
#cfit-app .cfit-hero{
  --primary:#1747A6;
  --primary-600:#123A86;
  --ring:#e5e7eb;
  --ring-strong:#d1d5db;
  --muted:#6b7280;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  padding: 4px;
}

#cfit-app .cfit-hero-title{
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 10px 0 8px;
  letter-spacing: .2px;
}

#cfit-app .cfit-hero-desc{
  color:#334155;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 14px;
}

#cfit-app .cfit-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:#0f172a;
  background:#f3f4f6; border:1px solid var(--ring);
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
}
#cfit-app .cfit-hero-badge svg{ width:18px; height:18px; }

#cfit-app .cfit-hero-chips{
  display:flex; flex-wrap:wrap; gap:12px;
  margin: 12px 0 18px;
}
#cfit-app .cfit-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef2ff; border:1px dashed #c7d2fe;
  padding:8px 10px; border-radius:10px; white-space:nowrap;
  color:#1f2937; font-size:14px;
}
#cfit-app .cfit-chip svg{ width:18px; height:18px; }

#cfit-app .cfit-hero-actions .cfit-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px;
  background:var(--primary); border:1px solid var(--primary);
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 14px rgba(23,71,166,.18);
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
#cfit-app .cfit-hero-actions .cfit-btn:hover{
  background:var(--primary-600); border-color:var(--primary-600);
}
#cfit-app .cfit-hero-actions .cfit-btn:active{ transform: translateY(1px); }
#cfit-app .cfit-hero-actions .cfit-btn svg{ width:18px; height:18px; }

/* Sedikit polish panel intro agar mirip kartu pada gambar 2 */
#cfit-app #cfit-intro.cfit-card{
  border-radius:18px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08));
  border-color: var(--ring, #e5e7eb);
}
#cfit-app #cfit-intro.cfit-card:hover{
  border-color: var(--ring-strong, #d1d5db);
}

/* ===== CFIT — Atur lebar gambar SOAL khusus Subtes 3–4 ===== */
/* Desktop / default */
#cfit-app[data-sub="3"] .cfit-q-title img,
#cfit-app[data-sub="4"] .cfit-q-title img{
  width:20% !important;        /* 20% pada PC */
  max-width:none !important;    /* override aturan global max-width */
  height:auto !important;
  display:block;
  margin-left:auto; margin-right:auto; /* tetap center */
}

/* Tablet (≤1024px) */
@media (max-width:1024px){
  #cfit-app[data-sub="3"] .cfit-q-title img,
  #cfit-app[data-sub="4"] .cfit-q-title img{
    width:35% !important;      /* 35% pada tablet */
  }
}

/* HP (≤640px) */
@media (max-width:640px){
  #cfit-app[data-sub="3"] .cfit-q-title img,
  #cfit-app[data-sub="4"] .cfit-q-title img{
    width:50% !important;      /* 50% pada HP */
  }
}

/* Penting:
   – Hanya memengaruhi gambar di PROMPT soal (bukan gambar opsi).
   – Subtes 1 dibiarkan mengikuti aturan default: 100% lebar kontainer. */