/* teknos.css — Design layer "sekufu" dengan teknosaceh.com
   Fondasi redesign app `to`: token warna hijau, typografi Plus Jakarta Sans/Sora,
   sistem ikon (.ic), dan komponen reusable (.tk-*). Dimuat setelah main.css. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap');

:root {
  /* ── Token semantik warna (untuk light + dark mode; diisi oleh migrasi hex) ── */
  --c-surface:#ffffff; --c-surface-2:#f8fafc; --c-surface-3:#f1f5f9;
  --c-ink:#0f172a; --c-ink-2:#475569; --c-ink-3:#94a3b8;
  --c-border:#e2e8f0; --c-border-2:#cbd5e1;
  --c-ok-bg:#dcfce7; --c-ok-fg:#166534;
  --c-warn-bg:#fef3c7; --c-warn-fg:#92400e;
  --c-bad-bg:#fee2e2; --c-bad-fg:#991b1b;
  --c-info-bg:#dbeafe; --c-info-fg:#1e40af;

  /* Palet teknosaceh — hijau tinta + aksen hijau cerah */
  --tk-green-900:#1A6B2E; --tk-green-800:#22913A; --tk-green-700:#28A544;
  --tk-green-600:#3ABF52; --tk-green-500:#54D468; --tk-green-400:#78E486; --tk-green-300:#A6EE96;
  --tk-navy:#1E3358; --tk-navy-700:#243A5E;
  --tk-gold-600:#B4842E; --tk-gold-500:#C99A3C;

  --tk-bg:#FFFFFF;
  --tk-bg-2:#F3F5F8;
  --tk-surface:#FFFFFF;
  --tk-surface-2:#EFF1F4;
  --tk-sage:#F3F8EF;              /* wash hijau muda utk highlight */
  --tk-ink:#15271B;              /* teks utama (tinta hijau tua) */
  --tk-ink-muted:#526155;       /* teks sekunder */
  --tk-border:rgba(24,54,38,.13);
  --tk-border-strong:rgba(24,54,38,.24);
  --tk-accent:var(--tk-green-700);
  --tk-accent-ink:#0f5a24;
  --tk-ring:var(--tk-green-500);

  --tk-shadow:0 14px 34px -20px rgba(24,54,38,.35);
  --tk-shadow-sm:0 8px 22px -16px rgba(24,54,38,.30);
  --tk-radius:16px;
  --tk-radius-lg:22px;
  --tk-radius-sm:11px;
  --tk-ease:cubic-bezier(.22,.61,.36,1);

  --tk-font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tk-font-head:'Sora', var(--tk-font);
}

/* Typografi global — refresh modern di seluruh app */
body { font-family: var(--tk-font); color: var(--tk-ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,.tk-head { font-family: var(--tk-font-head); letter-spacing:-.01em; }

/* Sistem ikon — sejajar teks, tak menggeser layout */
.ic { display:inline-block; vertical-align:-.14em; flex:0 0 auto; }
.ic-mr { margin-right:6px; }

/* ── Komponen reusable (dipakai lintas halaman saat migrasi) ── */
.tk-card {
  background:var(--tk-surface); border:1px solid var(--tk-border);
  border-radius:var(--tk-radius); box-shadow:var(--tk-shadow-sm);
}
.tk-card-p { padding:18px 20px; }

.tk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:12px; border:1px solid transparent;
  font-family:var(--tk-font); font-size:14px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:transform .15s var(--tk-ease), box-shadow .15s var(--tk-ease), background .15s;
  line-height:1;
}
.tk-btn:active { transform:translateY(1px); }
.tk-btn-primary { background:linear-gradient(135deg,var(--tk-green-700),var(--tk-green-600)); color:#fff; box-shadow:0 8px 20px -10px rgba(40,165,68,.7); }
.tk-btn-primary:hover { box-shadow:0 12px 26px -10px rgba(40,165,68,.85); }
.tk-btn-primary:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.25); box-shadow:none; }
.tk-btn-ghost { background:var(--tk-surface); border-color:var(--tk-border-strong); color:var(--tk-ink); }
.tk-btn-ghost:hover { background:var(--tk-bg-2); }

.tk-badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.tk-badge-green { background:var(--tk-sage); color:var(--tk-accent-ink); }
.tk-badge-navy  { background:#e8edf6; color:var(--tk-navy); }
.tk-badge-gold  { background:#fbf1dc; color:var(--tk-gold-600); }

.tk-chip {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  font-size:12px; font-weight:600;
}

/* Section heading kecil dgn ikon */
.tk-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--tk-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .tk-btn { transition:none; }
}

/* ── Aksesibilitas global (Fase 3) ── */
/* Focus ring terlihat untuk navigasi keyboard. :where() = specificity 0,
   jadi tak menimpa focus-style komponen yang lebih spesifik (fallback aman). */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tk-ring);
  outline-offset: 2px;
  border-radius: 5px;
}
/* Hormati preferensi "kurangi gerak" — matikan animasi/transisi berlebih. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ DARK MODE (opt-in via data-theme="dark") ══
   Token semantik + token tema DB + token teknos di-flip ke nilai gelap.
   Warna hardcoded yang sudah dimigrasi ke var(--c-*) otomatis ikut. */
:root[data-theme="dark"] {
  --c-surface:#1b2334; --c-surface-2:#151c2b; --c-surface-3:#212a3d;
  --c-ink:#e8edf6; --c-ink-2:#aeb9cc; --c-ink-3:#7c8798;
  --c-border:#2c3850; --c-border-2:#3a4966;
  --c-ok-bg:#12331f; --c-ok-fg:#6ee7a0;
  --c-warn-bg:#382c11; --c-warn-fg:#fbbf24;
  --c-bad-bg:#3a1b1b; --c-bad-fg:#fca5a5;
  --c-info-bg:#182740; --c-info-fg:#93c5fd;

  /* token tema DB (dipakai lintas app) */
  --t-bg:#0f1523; --t-border:#2c3850;
  --t-aksen-muda:#173a25; --t-aksen-text:#7fe0a0;
  /* teknos tokens */
  --tk-bg:#0f1523; --tk-bg-2:#151c2b; --tk-surface:#1b2334; --tk-surface-2:#212a3d;
  --tk-sage:#173a25; --tk-ink:#e8edf6; --tk-ink-muted:#aeb9cc;
  --tk-border:#2c3850; --tk-border-strong:#3a4966; --tk-accent-ink:#7fe0a0;
  --au-on:none; /* matikan aurora di dark */
}
:root[data-theme="dark"] body { background:var(--tk-bg-2); color:var(--c-ink); }

/* ── Kontrol form di mode gelap ───────────────────────────────────────────
   Dilaporkan Batra 7 Sep 2026: di mode gelap, teks di dalam kotak isian
   gelap-di-atas-gelap dan nyaris tak terbaca (laman Konfigurasi Ujian TKA).

   Sebabnya blok dark di atas hanya membalik TOKEN warna, dan hampir semua
   input di aplikasi ini ditulis dengan gaya sebaris yang menetapkan border
   saja — tidak background, tidak color. Jadi warnanya diserahkan ke peramban,
   dan peramban tak pernah diberi tahu halaman ini sedang gelap.

   `color-scheme` yang memberi tahu: ia mengubah rendering bawaan peramban
   untuk kotak isian, menu pilihan, bilah gulir, sampai isian otomatis. Tanpa
   itu, mewarnai input satu per satu tetap menyisakan bagian yang tak bisa
   disentuh CSS (mis. daftar <option> di beberapa peramban, dan latar kuning
   autofill yang menimpa warna teks).

   Aturan eksplisit di bawahnya tetap dipasang supaya hasilnya tidak
   bergantung pada tafsir masing-masing peramban. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  /* --c-surface-3 sengaja LEBIH TERANG dari latar halaman: dengan
     --c-surface-2 kotaknya sewarna persis dengan halaman dan hanya terlihat
     dari garis tepinya. Yang bisa diisi harus menonjol, yang terkunci
     mundur. */
  background-color: var(--c-surface-3);
  color: var(--c-ink);
  border-color: var(--c-border-2);
}
:root[data-theme="dark"] option { background-color: var(--c-surface-2); color: var(--c-ink); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--c-ink-3); opacity: 1; }
/* Yang dikunci tetap harus TERBACA — bedanya cukup dari latarnya, bukan dari
   teks yang dipudarkan sampai hilang. Isian seperti Token Akses dan Nama Paket
   justru sering readonly, dan itu yang paling perlu dibaca orang. */
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] input[readonly],
:root[data-theme="dark"] select:disabled,
:root[data-theme="dark"] textarea:disabled,
:root[data-theme="dark"] textarea[readonly] {
  background-color: var(--c-surface-2);
  color: var(--c-ink-2);
  -webkit-text-fill-color: var(--c-ink-2);   /* Safari/iOS mengabaikan `color` di kontrol mati */
}
/* Autofill Chrome memaksa latar kuning terang berikut teks gelap, dan
   keduanya tak bisa ditimpa `background`/`color` biasa. */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface-2) inset;
  caret-color: var(--c-ink);
}
/* Kartu/aurora bawaan yg pakai putih transparan → redupkan di dark */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .admin-main,
:root[data-theme="dark"] .admin-topbar { background:var(--c-surface); border-color:var(--c-border); color:var(--c-ink); }

/* Tombol pengalih tema (floating) */
.theme-toggle {
  position:fixed; right:18px; bottom:18px; z-index:9000;
  width:50px; height:50px; border-radius:50%; border:none;
  background:linear-gradient(135deg,var(--tk-green-700,#28A544),var(--tk-green-600,#3ABF52));
  color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -6px rgba(40,165,68,.6); transition:transform .15s var(--tk-ease), box-shadow .15s;
}
.theme-toggle:hover { transform:scale(1.1) rotate(-8deg); box-shadow:0 12px 28px -6px rgba(40,165,68,.75); }
:root[data-theme="dark"] .theme-toggle {
  background:linear-gradient(135deg,#f59e0b,#fbbf24); box-shadow:0 8px 22px -6px rgba(245,158,11,.55);
}
.theme-toggle .ic-moon { display:inline; }
.theme-toggle .ic-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display:inline; }
@media print { .theme-toggle { display:none; } }

/* ── Paragraf rata kanan-kiri di layar sempit ─────────────────────────────
   Naskah ujian sering ditulis rata kanan-kiri: sumbernya dokumen Word 2 kolom,
   dan di atas kertas bentuk itu memang rapi. Di layar HP ia runtuh — satu baris
   cuma memuat sekitar empat kata, sehingga sisa ruangnya dibagi ke tiga celah
   saja dan celahnya melar.

   DIUKUR ULANG 7 Sep 2026 atas 40 paragraf soal SUNGGUHAN (bukan satu contoh),
   font 15px seperti .tka-soal-konten, lebar teks = lebar layar dikurangi 48px
   (padding .tka-layout + .tka-main). Spasi normal 4,1px di semua lebar:

     layar   celah rerata   celah terlebar   rasio   % celah > 3x normal
     320px       11,6px          28,8px       7,0x         36 %
     360px       10,3px          23,5px       5,7x         29 %
     412px        9,1px          19,0px       4,6x         21 %
     430px        9,3px          17,0px       4,1x         21 %
     480px        8,4px          14,7px       3,6x         15 %
     540px        7,5px          11,8px       2,9x          7 %
     560px        7,3px          11,3px       2,7x          8 %
     768px        6,2px           8,2px       2,0x        0,5 %

   Tebingnya ada di antara 480px dan 540px — bukan di 430px. Jadi menurunkan
   ambang ini supaya HP besar (Galaxy 412px, iPhone Pro Max 430px) ikut rata
   kanan-kiri berarti mengembalikan keluhan "baris lompat-lompat" itu sendiri:
   satu dari lima celah masih lebih dari tiga kali spasi normal. 560px sudah
   dekat dengan titik amannya, jadi DIBIARKAN.

   `hyphens:auto` sudah dicoba sebagai jalan ketiga (rata kanan-kiri di HP,
   celah dipendekkan oleh pemenggalan kata) dan HASILNYA NOL — angkanya sama
   persis sampai desimal, karena Chrome tak punya kamus penggalan bahasa
   Indonesia. Jangan diulang tanpa memastikan kamusnya ada dulu.

   Jadi yang dimatikan bukan perataannya, melainkan perataan DI LAYAR SEMPIT
   saja: di tablet dan monitor, bentuk yang diminta penyusun soal tetap dipakai.
   `!important` memang perlu — perataannya ditulis sebagai gaya sebaris oleh
   SoalFormatter, dan gaya sebaris tak bisa dikalahkan CSS biasa. */
@media (max-width: 560px) {
  .fmt-rata-justify { text-align: left !important; }
}