/*
 * Kerjaya.co — assets/css/app.css
 * Static CSS pengganti Tailwind CDN
 * Mengandungi: Design System + semua Tailwind utilities yang digunakan + Dark Mode
 *
 * Cara penggunaan:
 *   wp_enqueue_style('kerjaya-app', .../assets/css/app.css)
 *   Buang wp_enqueue_script('tailwindcss', ...) dari functions.php
 */

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--warm-sand);
    color: var(--slate-ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; }
ul, ol { list-style: none; }


/* ============================================================
   CSS VARIABLES — Design Tokens
============================================================ */
:root {
    --warm-sand:    #fcfaf2;
    --soft-indigo:  #4f46e5;
    --slate-ink:    #0f172a;
    --border-color: #000;

    /* Dark mode tokens (overridden in .dark) */
    --bg-primary:   var(--warm-sand);
    --bg-surface:   #ffffff;
    --bg-subtle:    #fdfcf8;
    --text-primary: var(--slate-ink);
    --text-muted:   #64748b;
    --border-main:  #e2e8f0;
}

/* ── Dark Mode tokens ─────────────────────────────────────── */
.dark {
    --warm-sand:   #0f172a;
    --bg-primary:  #0f172a;
    --bg-surface:  #1e293b;
    --bg-subtle:   #162032;
    --text-primary:#f1f5f9;
    --text-muted:  #94a3b8;
    --border-main: #334155;
    color-scheme:  dark;
}

.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

.dark .glass-nav {
    background: rgba(15, 23, 42, 0.92);
    border-bottom-color: #334155;
}

.dark .brutal-card,
.dark .job-row,
.dark .intel-card,
.dark .stat-block,
.dark .search-box {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #475569;
}

.dark .job-row { border-bottom-color: #334155; }
.dark .job-row:hover { background: #1e293b; }

.dark #hero-section { background: #0f172a; }
.dark #main-content { background: #1e293b; }
.dark #discovery-sidebar { background: #162032; }

.dark .prose-zone,
.dark .prose-zone p { color: #cbd5e1; }
.dark .prose-zone h2 { color: #f1f5f9; }

.dark .site-footer { background: #1e293b; border-top-color: #334155; }
.dark .footer-tagline { color: #64748b; }


/* ============================================================
   TAILWIND UTILITY REPLACEMENTS
   (semua class yang digunakan dalam templates)
============================================================ */

/* ── Display ─────────────────────────────────────────────── */
.block       { display: block; }
.inline-block{ display: inline-block; }
.flex        { display: flex; }
.grid        { display: grid; }
.hidden      { display: none; }
.inline-flex { display: inline-flex; }

/* ── Flex ────────────────────────────────────────────────── */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-shrink-0  { flex-shrink: 0; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.self-center    { align-self: center; }

/* ── Grid ────────────────────────────────────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.col-span-1  { grid-column: span 1 / span 1; }
.gap-0  { gap: 0; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* ── Spacing — Padding ───────────────────────────────────── */
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-24{ padding-top: 6rem;     padding-bottom: 6rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pt-8 { padding-top: 2rem; }
.pt-10{ padding-top: 2.5rem; }

/* ── Spacing — Margin ────────────────────────────────────── */
.mx-auto  { margin-left: auto; margin-right: auto; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }

/* ── Sizing ──────────────────────────────────────────────── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-24   { width: 6rem; }
.h-24   { height: 6rem; }
.max-w-4xl      { max-width: 56rem; }
.max-w-\[1550px\]{ max-width: 1550px; }
.max-w-\[1600px\]{ max-width: 1600px; }

/* ── Aspect ratio ────────────────────────────────────────── */
.aspect-\[16\/10\]  { aspect-ratio: 16/10; }
.aspect-\[2\.2\/1\] { aspect-ratio: 2.2/1; }
.aspect-video       { aspect-ratio: 16/9; }

/* ── Position ────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-32   { top: 8rem; }
.bottom-12{ bottom: 3rem; }
.left-12  { left: 3rem; }
.right-12 { right: 3rem; }

/* ── Overflow ────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Pointer events ──────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }

/* ── Z-index ─────────────────────────────────────────────── */
.z-10 { z-index: 10; }

/* ── Typography ──────────────────────────────────────────── */
.uppercase    { text-transform: uppercase; }
.italic       { font-style: italic; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.font-black   { font-weight: 900; }
.font-bold    { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-medium  { font-weight: 500; }

.text-xs   { font-size: 0.75rem;   line-height: 1rem; }
.text-sm   { font-size: 0.875rem;  line-height: 1.25rem; }
.text-lg   { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;   line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;    line-height: 2rem; }
.text-4xl  { font-size: 2.25rem;   line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;      line-height: 1; }

.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

.leading-none     { line-height: 1; }
.leading-tight    { line-height: 1.25; }
.leading-relaxed  { line-height: 1.625; }
.leading-\[0\.95\]{ line-height: 0.95; }

.tracking-tighter  { letter-spacing: -0.05em; }
.tracking-wider    { letter-spacing: 0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }
.tracking-\[0\.3em\]{ letter-spacing: 0.3em; }

/* ── Colours — Text ──────────────────────────────────────── */
.text-white       { color: #ffffff; }
.text-black       { color: #000000; }
.text-slate-400   { color: #94a3b8; }
.text-slate-500   { color: #64748b; }
.text-slate-900   { color: #0f172a; }
.text-indigo-200  { color: #c7d2fe; }
.text-indigo-600  { color: #4f46e5; }

/* ── Colours — Background ───────────────────────────────── */
.bg-white       { background-color: #ffffff; }
.bg-black       { background-color: #000000; }
.bg-slate-100   { background-color: #f1f5f9; }
.bg-indigo-600  { background-color: #4f46e5; }
.bg-\[\#ccff00\]{ background-color: #ccff00; }
.bg-\[\#fdfcf8\]{ background-color: #fdfcf8; }

/* ── Colours — Border ───────────────────────────────────── */
.border-2     { border-width: 2px; border-style: solid; }
.border-4     { border-width: 4px; border-style: solid; }
.border-black { border-color: #000; }
.border-white { border-color: #fff; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-r     { border-right-width: 1px; border-right-style: solid; border-right-color: #e2e8f0; }
.border-b     { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e2e8f0; }
.border-b-2   { border-bottom-width: 2px; border-bottom-style: solid; }
.border-t-2   { border-top-width: 2px; border-top-style: solid; border-top-color: #e2e8f0; }
.border-t-4   { border-top-width: 4px; border-top-style: solid; }

/* ── Border Radius ───────────────────────────────────────── */
.rounded      { border-radius: 0.25rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-\[3rem\] { border-radius: 3rem; }

/* ── Box Shadow ──────────────────────────────────────────── */
.shadow-\[10px_10px_0px_0px_\#000\]                       { box-shadow: 10px 10px 0 #000; }
.shadow-\[20px_20px_0px_0px_rgba\(15\,23\,42\,0\.1\)\]    { box-shadow: 20px 20px 0 rgba(15,23,42,0.1); }
.shadow-\[6px_6px_0px_0px_\#000\]                         { box-shadow: 6px 6px 0 #000; }

/* ── Transform ───────────────────────────────────────────── */
.rotate-3      { transform: rotate(3deg); }

/* ── Gradient ────────────────────────────────────────────── */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/80 { --tw-gradient-from: rgba(0,0,0,.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/20  { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,.2), var(--tw-gradient-to); }
.to-transparent { --tw-gradient-to: transparent; }

/* ── Image filters ───────────────────────────────────────── */
.grayscale         { filter: grayscale(1); }
.object-cover      { object-fit: cover; }
.transition-all    { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-colors { transition-property: color,background-color,border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.duration-1000     { transition-duration: 1000ms; }

/* ── Space utilities ─────────────────────────────────────── */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-12> * + * { margin-top: 3rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 768px) {
    .md\:aspect-\[2\.2\/1\]  { aspect-ratio: 2.2/1; }
    .md\:flex-row            { flex-direction: row; }
    .md\:grid-cols-3         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:p-10                { padding: 2.5rem; }
    .md\:px-10               { padding-left: 2.5rem; padding-right: 2.5rem; }
    .md\:px-16               { padding-left: 4rem;   padding-right: 4rem; }
    .md\:text-4xl            { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-6xl            { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .lg\:block               { display: block; }
    .lg\:flex                { display: flex; }
    .lg\:col-span-2          { grid-column: span 2 / span 2; }
    .lg\:col-span-3          { grid-column: span 3 / span 3; }
    .lg\:col-span-7          { grid-column: span 7 / span 7; }
    .lg\:col-span-9          { grid-column: span 9 / span 9; }
    .lg\:col-span-12         { grid-column: span 12 / span 12; }
    .lg\:grid-cols-12        { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:hidden              { display: none; }
}

/* ── Hover states ────────────────────────────────────────── */
.hover\:bg-white:hover       { background-color: #fff; }
.hover\:text-black:hover     { color: #000; }
.hover\:text-indigo-600:hover{ color: #4f46e5; }

/* ── Group hover ─────────────────────────────────────────── */
.group:hover .group-hover\:grayscale-0   { filter: grayscale(0); }
.group:hover .group-hover\:text-indigo-600{ color: #4f46e5; }
.group:hover .group-hover\:shadow-\[10px_10px_0px_0px_\#4f46e5\] {
    box-shadow: 10px 10px 0 #4f46e5;
}

/* ── Screen reader ───────────────────────────────────────── */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px; width: 1px; overflow: hidden;
}


/* ============================================================
   DARK MODE SWITCH — UI Component
============================================================ */
.dark-mode-toggle {
    position: fixed;
    bottom: 9.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: var(--bg-surface, #fff);
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1020;
    transition: background 0.2s, box-shadow 0.15s;
}

.dark-mode-toggle:hover {
    box-shadow: 1px 1px 0 #000;
    transform: translate(2px, 2px);
}

.dark .dark-mode-toggle {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 3px 3px 0 #475569;
}

/* Icon swap */
.dark-mode-toggle .icon-sun  { display: block; }
.dark-mode-toggle .icon-moon { display: none;  }
.dark .dark-mode-toggle .icon-sun  { display: none;  }
.dark .dark-mode-toggle .icon-moon { display: block; }