/* 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 {
  /* 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; }
}