/* =========================================================
   BRAND THEME - PT Surabaya Mekabox Career Portal
   Tema: Navy industri + Amber kraft (karton/corrugated)
   Dimuat SETELAH Tailwind CDN; selector diawali "html body" agar mengalahkan utility Tailwind.
   ========================================================= */
/* Font lokal: Plus Jakarta Sans (static). Simpan file di assets/fonts/ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
}

:root {
    --navy-950: #04121f;
    --navy-900: #061a2b;
    --navy-800: #0b2d47;
    --navy-700: #0f3854;
    --navy-600: #17537c;
    --sky-400: #38bdf8;
    --amber-300: #ffd27a;
    --amber-400: #ffb52e;
    --amber-500: #f39c12;
    --amber-600: #d9840a;
    --kraft-50: #fbf7f0;
    --kraft-100: #f5ecdc;
    --kraft-200: #eadcc0;
    --ink: #14263a;
    --muted: #5b6b7c;
    --radius: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 56, 84, .06), 0 4px 12px rgba(15, 56, 84, .06);
    --shadow-md: 0 2px 6px rgba(15, 56, 84, .08), 0 12px 28px rgba(15, 56, 84, .10);
    --shadow-lg: 0 8px 20px rgba(15, 56, 84, .12), 0 28px 60px rgba(15, 56, 84, .18);
    --ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- Dasar ---------- */
html {
    scroll-behavior: smooth;
    background-color: var(--kraft-50);
    background-image:
        radial-gradient(900px 500px at 100% 0%, rgba(243, 156, 18, .08), transparent 60%),
        radial-gradient(800px 500px at 0% 100%, rgba(23, 83, 124, .07), transparent 60%),
        repeating-linear-gradient(90deg, rgba(15, 56, 84, .025) 0 2px, transparent 2px 22px);
    background-attachment: fixed;
}
html body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    animation: page-in .55s var(--ease) both;
}
html body h1, html body h2, html body h3, html body h4 { letter-spacing: -.01em; color: var(--navy-800); }
html body ::selection { background: var(--amber-500); color: var(--navy-900); }
html body :focus-visible { outline: 3px solid rgba(243, 156, 18, .55); outline-offset: 2px; }

@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes shine { to { transform: translateX(260%) skewX(-20deg); } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, .7); } 100% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes gradient-move { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes logo-glow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 14px rgba(236, 29, 37, .45); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .2), 0 0 28px rgba(236, 29, 37, .8); } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Scroll reveal (diaktifkan oleh brand.js); pakai animation agar transisi hover kartu tetap normal */
.js .reveal { opacity: 0; }
.js .reveal.in { opacity: 1; animation: fade-up .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* =========================================================
   KOMPONEN UMUM (berlaku di semua halaman)
   ========================================================= */

/* ----- Card ----- */
html body .bg-white.rounded.shadow-sm,
html body .bg-white.rounded-lg.shadow-sm,
html body .bg-white.rounded-lg.shadow-xl {
    border-radius: 20px;
    border: 1px solid rgba(15, 56, 84, .08);
    box-shadow: var(--shadow-md);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
html body .bg-white.rounded.shadow-sm:hover,
html body .bg-white.rounded-lg.shadow-sm:hover { box-shadow: var(--shadow-lg); border-color: rgba(243, 156, 18, .35); }
html body .bg-white h1.font-bold, html body .bg-white h2.font-bold, html body .bg-white h3.font-bold {
    display: flex; align-items: center; gap: .6rem;
}
html body .bg-white h1.font-bold::before, html body .bg-white h2.font-bold::before, html body .bg-white h3.font-bold::before {
    content: ""; flex: none; width: 5px; height: 1.15em; border-radius: 4px;
    background: linear-gradient(180deg, var(--amber-400), var(--amber-600));
}

/* ----- Label ----- */
html body label.block { color: var(--navy-700); font-weight: 700; font-size: .8rem; letter-spacing: .02em; margin-bottom: .4rem; }
html body label.block + p, html body p.text-xs.text-gray-500 { color: var(--muted); }

/* ----- Textbox / Combo / Textarea / File ----- */
html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
html body select,
html body textarea {
    width: 100%;
    background-color: #fff;
    color: var(--ink);
    border: 2px solid #e6dcc8;
    border-radius: 12px;
    padding: .7rem .95rem;
    font: inherit;
    font-size: .92rem;
    transition: border-color .2s, box-shadow .25s, background-color .2s, transform .2s;
    box-shadow: inset 0 1px 2px rgba(15, 56, 84, .04);
}
html body input::placeholder, html body textarea::placeholder { color: #a39d90; }
html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):hover,
html body select:hover, html body textarea:hover { border-color: #d2c3a3; background-color: #fffdf8; }
html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):focus,
html body select:focus, html body textarea:focus {
    outline: none; border-color: var(--amber-500); background-color: #fff;
    box-shadow: 0 0 0 4px rgba(243, 156, 18, .22), 0 6px 16px rgba(243, 156, 18, .12);
}
html body input:disabled, html body select:disabled { background-color: var(--kraft-100); color: var(--muted); cursor: not-allowed; border-style: dashed; }
html body textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
html body select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f3854' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.1rem;
}
html body input[type=file] {
    width: 100%; padding: .55rem; background: var(--kraft-50); color: var(--muted);
    border: 2px dashed #d2c3a3; border-radius: 12px; font-size: .85rem; cursor: pointer; transition: border-color .2s, background .2s;
}
html body input[type=file]:hover { border-color: var(--amber-500); background: #fff8e8; }
html body input[type=file]::file-selector-button {
    margin-right: .9rem; border: 0; cursor: pointer; padding: .55rem 1rem; border-radius: 9px;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-600)); color: #fff; font-weight: 700; font-family: inherit;
    transition: filter .2s, transform .2s;
}
html body input[type=file]::file-selector-button:hover { filter: brightness(1.15); }
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--amber-500); width: 1.1rem; height: 1.1rem; cursor: pointer; }
html body input[type=password] { padding-right: 2.8rem; }
html body [data-toggle-password] { color: var(--muted); border-radius: 0 12px 12px 0; transition: color .2s, background .2s; }
html body [data-toggle-password]:hover { color: var(--amber-600); background: rgba(243, 156, 18, .08); }

/* ----- Tombol (dasar + ripple) ----- */
html body button[type=submit], html body a.bg-amber-500, html body a.bg-red-600, html body a.bg-blue-600,
html body a.bg-green-600, html body a.bg-slate-700, html body a.bg-gray-200 { position: relative; overflow: hidden; }
html body button[type=submit], html body a.bg-amber-500, html body a.bg-red-600, html body a.bg-blue-600,
html body a.bg-green-600, html body a.bg-slate-700, html body a.bg-gray-200 {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: 12px; font-weight: 700; letter-spacing: .01em; cursor: pointer; border: 0;
    transition: transform .2s var(--ease), box-shadow .25s, filter .2s;
}
html body button[type=submit]:hover, html body a.bg-amber-500:hover, html body a.bg-red-600:hover, html body a.bg-blue-600:hover,
html body a.bg-green-600:hover, html body a.bg-slate-700:hover, html body a.bg-gray-200:hover { transform: translateY(-2px); }
html body button[type=submit]:active, html body a.bg-amber-500:active, html body a.bg-red-600:active, html body a.bg-blue-600:active,
html body a.bg-green-600:active, html body a.bg-slate-700:active, html body a.bg-gray-200:active { transform: translateY(0) scale(.97); }

/* kilau saat hover */
html body button[type=submit]::after, html body a.bg-amber-500::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg); pointer-events: none;
}
html body button[type=submit]:hover::after, html body a.bg-amber-500:hover::after { animation: shine .75s var(--ease); }

/* Primer (amber) */
html body .bg-amber-500 {
    background: linear-gradient(135deg, var(--amber-400), var(--amber-500) 55%, var(--amber-600));
    color: var(--navy-900);
    box-shadow: 0 6px 16px rgba(243, 156, 18, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
html body .bg-amber-500:hover, html body .hover\:bg-amber-600:hover, html body .hover\:bg-amber-400:hover {
    background: linear-gradient(135deg, #ffc247, var(--amber-500) 55%, #e58e07);
    box-shadow: 0 10px 24px rgba(243, 156, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* Bahaya */
html body .bg-red-600 { background: linear-gradient(135deg, #ef4444, #c81e1e); color: #fff; box-shadow: 0 6px 14px rgba(200, 30, 30, .28); }
html body .bg-red-600:hover, html body .hover\:bg-red-700:hover { background: linear-gradient(135deg, #f25a5a, #b91c1c); box-shadow: 0 10px 22px rgba(200, 30, 30, .4); }
/* Info */
html body .bg-blue-600 { background: linear-gradient(135deg, #2f80ed, #1d5fc4); color: #fff; box-shadow: 0 6px 14px rgba(29, 95, 196, .28); }
html body .bg-blue-600:hover, html body .hover\:bg-blue-700:hover { background: linear-gradient(135deg, #4a93f5, #184fa6); box-shadow: 0 10px 22px rgba(29, 95, 196, .4); }
/* Sukses */
html body .bg-green-600 { background: linear-gradient(135deg, #22b573, #14895a); color: #fff; box-shadow: 0 6px 14px rgba(20, 137, 90, .28); }
html body .bg-green-600:hover, html body .hover\:bg-green-700:hover { background: linear-gradient(135deg, #2fcb86, #107a50); box-shadow: 0 10px 22px rgba(20, 137, 90, .4); }
/* Netral gelap */
html body .bg-slate-700 { background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); color: #fff; box-shadow: 0 6px 14px rgba(11, 45, 71, .3); }
html body .bg-slate-700:hover, html body .hover\:bg-slate-800:hover { background: linear-gradient(135deg, var(--navy-600), var(--navy-700)); box-shadow: 0 10px 22px rgba(11, 45, 71, .42); }
/* Netral terang (Batal) */
html body .bg-gray-200 { background: #fff; color: var(--navy-700); border: 2px solid #e1d6bf; box-shadow: var(--shadow-sm); }
html body .bg-gray-200:hover, html body .hover\:bg-gray-300:hover { background: var(--kraft-100); border-color: var(--amber-500); }

/* Ukuran tombol kecil di tabel (text-xs px-2 py-1) */
html body .text-xs.px-2.py-1.rounded { padding: .42rem .8rem; border-radius: 9px; font-weight: 700; }
html body button[type=submit]:not(.text-xs) { padding-top: .8rem; padding-bottom: .8rem; }
html body button:disabled { filter: grayscale(.4); }

/* Ripple (brand.js) */
.ripple-dot { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: ripple .6s linear; pointer-events: none; }

/* ----- Link ----- */
html body a { transition: color .2s, background .2s, transform .2s; }
html body a.text-amber-600.font-semibold.text-sm { /* "Kembali ke ..." */
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; width: fit-content;
    background: rgba(255, 255, 255, .95); color: var(--navy-700); padding: .55rem 1rem; border-radius: 999px;
    box-shadow: var(--shadow-sm); text-decoration: none; border: 1px solid rgba(15, 56, 84, .08);
}
html body a.text-amber-600.font-semibold.text-sm:hover { background: #fff; color: var(--amber-600); transform: translateX(-4px); box-shadow: var(--shadow-md); text-decoration: none; }

/* ----- Alert / flash ----- */
html body .p-3.bg-green-100, html body .p-3.bg-red-100, html body .px-4.py-2.bg-red-100 {
    border-radius: 14px; font-weight: 600; border: 0; border-left: 5px solid; box-shadow: var(--shadow-sm);
    animation: slide-in .45s var(--ease) both;
}
html body .bg-green-100.p-3 { background: #e7f8ef; color: #0f6b44; border-left-color: #22b573; }
html body .bg-red-100.p-3, html body .bg-red-100.px-4.py-2 { background: #fdeaea; color: #a61b1b; border-left-color: #ef4444; }

/* ----- Badge status (di tabel) ----- */
html body td .text-xs.rounded.font-bold { border-radius: 999px; padding: .25rem .7rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .4rem; }
html body td .text-xs.rounded.font-bold::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html body td .bg-green-100.text-green-700 { background: #e1f7ec; color: #107a50; }
html body td .bg-green-100.text-green-700::before { animation: pulse-dot 1.6s infinite; }
html body td .bg-red-100.text-red-700 { background: #fde6e6; color: #b91c1c; }
html body td .bg-gray-200.text-gray-600 { background: #ece8df; color: #6b6558; }

/* ----- Tabel ----- */
html body table { border-collapse: separate; border-spacing: 0; width: 100%; border: 0; font-size: .9rem; }
html body table thead th {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: .95rem 1rem; border: 0; white-space: nowrap; transition: background .2s;
}
html body table thead th:first-child { border-top-left-radius: 14px; }
html body table thead th:last-child { border-top-right-radius: 14px; }
html body table thead th:hover { background: linear-gradient(135deg, var(--navy-600), var(--navy-700)); }
html body table thead th .sort-ind { color: var(--amber-300) !important; font-size: .7rem; opacity: .85; }
html body table tbody td { padding: .9rem 1rem; border: 0; border-bottom: 1px solid #efe5d1; vertical-align: middle; transition: background .2s, box-shadow .2s; }
html body table tbody tr { animation: row-in .4s var(--ease) both; }
html body table tbody tr:nth-child(even) td { background: #fcf9f2; }
html body table tbody tr:hover td { background: #fff4dc; }
html body table tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--amber-500); }
html body table tbody tr:last-child td { border-bottom: 0; }
html body table td[colspan] { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }

/* ----- Pagination (table.js & index.php) ----- */
html body .pg {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .85rem;
    border: 2px solid #e6dcc8; border-radius: 10px; background: #fff; color: var(--navy-700); font-weight: 700; font-size: .85rem;
    cursor: pointer; text-decoration: none; transition: all .2s var(--ease);
}
html body a.pg:hover, html body button.pg:not(:disabled):not(.pg-active):hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
html body .pg-active { background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); border-color: transparent; color: var(--navy-900); box-shadow: 0 6px 14px rgba(243, 156, 18, .35); cursor: default; }
html body .pg-off { color: #b9b2a3; background: var(--kraft-50); cursor: not-allowed; }
/* ----- Pencarian tabel (table.js) ----- */
.dt-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
/* Judul tabel + kotak pencarian dalam satu baris */
.dt-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.dt-head > h1, .dt-head > h2, .dt-head > h3 { margin: 0 !important; flex: 0 1 auto; }
.dt-head > .dt-toolbar { margin-bottom: 0; flex: 1 1 14rem; }
@media (max-width: 640px) { .dt-head { flex-wrap: wrap; } .dt-head > .dt-toolbar { flex-basis: 100%; } }
.dt-search { position: relative; width: 100%; max-width: 22rem; }
.dt-search > svg { position: absolute; left: .95rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--navy-600); pointer-events: none; z-index: 1; transition: color .2s, transform .3s var(--ease); }
.dt-search:focus-within > svg { color: var(--amber-600); transform: translateY(-50%) scale(1.15); }
html body .dt-search input { padding-left: 2.8rem !important; padding-right: 2.4rem !important; border-radius: 999px; background-color: #fff; }
html body .dt-search input::-webkit-search-cancel-button { display: none; }
.dt-clear { position: absolute; right: .5rem; top: 50%; width: 1.7rem; height: 1.7rem; transform: translateY(-50%) scale(.6); opacity: 0; pointer-events: none; border-radius: 50%; border: 0; background: var(--kraft-100); color: var(--navy-700); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: all .2s var(--ease); }
.dt-search.has-text .dt-clear { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.dt-clear:hover { background: var(--amber-500); color: var(--navy-900); }
@media (max-width: 640px) { .dt-search { max-width: none; } }

html body .field-sm { width: auto; padding: .35rem 2rem .35rem .7rem; border-radius: 10px; font-weight: 600; }

/* =========================================================
   HALAMAN PUBLIK (index.php, detail.php)
   ========================================================= */
.site-nav {
    position: sticky; top: 0; z-index: 50; background: rgba(6, 26, 43, .78); backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background .3s, box-shadow .3s;
}
.site-nav.scrolled { background: rgba(6, 26, 43, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.nav-inner { max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-link { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 18px rgba(236, 29, 37, .55); animation: logo-glow 3.2s ease-in-out infinite; transition: transform .5s var(--ease); }
.brand-link:hover .brand-logo { transform: rotate(-10deg) scale(1.1); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { color: #fff; font-weight: 800; letter-spacing: .08em; font-size: 1.02rem; }
.brand-text small { color: var(--amber-400); font-weight: 700; letter-spacing: .3em; font-size: .62rem; }
.nav-links { display: flex; align-items: center; gap: .5rem; }
.nav-link { position: relative; color: #dbe7f1; font-weight: 600; font-size: .9rem; padding: .5rem .9rem; text-decoration: none; }
.nav-link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .15rem; height: 2px; background: var(--amber-500); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }
.btn-nav {
    color: var(--navy-900); font-weight: 800; font-size: .85rem; padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); box-shadow: 0 6px 16px rgba(243, 156, 18, .4);
    transition: transform .25s var(--ease), box-shadow .25s;
}
.btn-nav:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(243, 156, 18, .55); }

/* ----- Hero ----- */
.hero {
    position: relative; overflow: hidden; color: #fff; padding: 4.5rem 1rem 7rem;
    background: var(--navy-800) url('../img/hero-bg.svg') center / cover no-repeat;
}
.hero-inner { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 1.25fr .75fr; } }
.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .95rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    color: var(--amber-300); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-500); animation: pulse-dot 1.6s infinite; }
.hero h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.1; margin: 1rem 0 .9rem; }
.grad-text {
    background: linear-gradient(90deg, var(--amber-300), var(--amber-500), #fff2c9, var(--amber-500)); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-move 5s linear infinite;
}
.hero p.lead { color: #c9d9e6; font-size: 1.05rem; line-height: 1.7; max-width: 38rem; margin-bottom: 1.6rem; }
.hero-art { display: none; justify-content: center; }
@media (min-width: 1024px) { .hero-art { display: flex; } }
.art-box { width: 100%; max-width: 430px; aspect-ratio: 520 / 460; background: url('../img/box-illustration.svg') center / contain no-repeat; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); animation: float-y 7s ease-in-out infinite; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; z-index: 3; display: block; }

/* kotak pencarian */
.search-card {
    display: flex; flex-direction: column; gap: .5rem; padding: .55rem; border-radius: 18px; max-width: 46rem;
    background: rgba(255, 255, 255, .96); box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .4);
}
@media (min-width: 768px) { .search-card { flex-direction: row; align-items: stretch; } }
.search-card .field-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.search-card .field-wrap svg { position: absolute; left: .9rem; width: 1.15rem; height: 1.15rem; color: var(--navy-600); pointer-events: none; z-index: 1; }
html body .search-card input[type=text], html body .search-card select { border-color: transparent !important; background-color: var(--kraft-50); padding-left: 2.7rem !important; height: 100%; }
html body .search-card select { min-width: 12rem; }
.search-card button { padding-left: 1.7rem; padding-right: 1.7rem; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2rem; }
.hero-stats > div { display: flex; flex-direction: column; padding-left: .9rem; border-left: 3px solid var(--amber-500); }
.hero-stats strong { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.hero-stats span { font-size: .78rem; color: #aac3d6; margin-top: .3rem; font-weight: 600; }

/* ----- Fitur ----- */
.features { max-width: 72rem; margin: -3.2rem auto 0; padding: 0 1rem; display: grid; gap: 1rem; position: relative; z-index: 4; }
@media (min-width: 768px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
    display: flex; gap: .9rem; align-items: flex-start; padding: 1.3rem; border-radius: 18px; background: #fff;
    border: 1px solid rgba(15, 56, 84, .07); box-shadow: var(--shadow-md); transition: transform .35s var(--ease), box-shadow .35s;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-ico {
    flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); box-shadow: 0 8px 18px rgba(15, 56, 84, .3); transition: transform .4s var(--ease), background .3s;
}
.feature:hover .feature-ico { transform: rotate(-8deg) scale(1.1); background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color: var(--navy-900); }
.feature h4 { font-weight: 800; font-size: 1rem; margin-bottom: .2rem; }
.feature p { color: var(--muted); font-size: .85rem; line-height: 1.55; }

/* ----- Section judul ----- */
.section-title { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; font-size: 1.4rem; font-weight: 800; color: var(--navy-800); }
.section-title .count { font-size: .85rem; font-weight: 800; color: var(--navy-900); background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); padding: .2rem .75rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(243, 156, 18, .35); }
.section-title::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--kraft-200), transparent); }

/* ----- Kartu lowongan ----- */
.job-card {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem; border-radius: 20px; overflow: hidden;
    background: #fff url('../img/card-mark.svg') no-repeat right -18px bottom -22px / 150px; border: 1px solid rgba(15, 56, 84, .08);
    box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.job-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--amber-400), var(--amber-600)); transition: width .3s var(--ease); }
.job-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(243, 156, 18, .55); }
.job-card:hover::before { width: 9px; }
.job-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .32rem .75rem; border-radius: 999px; }
.chip-amber { color: #8a5200; background: #fff1d6; border: 1px solid #ffd98f; }
.job-date { font-size: .74rem; color: #8a95a1; font-weight: 600; }
.job-title { font-size: 1.2rem; font-weight: 800; color: var(--navy-800); line-height: 1.3; transition: color .25s; }
.job-card:hover .job-title { color: var(--amber-600); }
.job-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.job-meta span { font-size: .78rem; font-weight: 600; color: var(--navy-700); background: var(--kraft-100); padding: .3rem .7rem; border-radius: 999px; }
.job-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-top: .9rem; border-top: 1px dashed #e4d8bf; }
.deadline { font-size: .75rem; font-weight: 700; color: #c2410c; }
.job-cta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .85rem; color: var(--navy-700); text-decoration: none; }
.job-cta::after { content: ""; position: absolute; inset: 0; } /* seluruh kartu bisa diklik */
.job-cta svg { width: 1.05rem; height: 1.05rem; transition: transform .3s var(--ease); }
.job-card:hover .job-cta { color: var(--amber-600); }
.job-card:hover .job-cta svg { transform: translateX(6px); }

/* ----- Kosong ----- */
.empty-state { text-align: center; padding: 3rem 1rem; background: #fff; border-radius: 22px; box-shadow: var(--shadow-md); border: 1px dashed #dccfb2; }
.art-empty { width: 220px; aspect-ratio: 6 / 5; margin: 0 auto 1rem; background: url('../img/empty.svg') center / contain no-repeat; animation: float-y 6s ease-in-out infinite; }
.empty-state p { color: var(--muted); font-weight: 600; }

/* ----- Navigasi halaman (index) ----- */
.pager-bar { display: flex; flex-direction: column; gap: .8rem; margin-top: 2rem; padding: 1rem 1.2rem; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); color: var(--muted); font-size: .85rem; font-weight: 600; }
@media (min-width: 640px) { .pager-bar { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ----- Footer ----- */
.site-footer { position: relative; margin-top: 4rem; padding: 2.4rem 1rem; color: #9db4c7; text-align: center; font-size: .85rem; background: var(--navy-900) url('../img/admin-banner.svg') center / cover; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber-600), var(--amber-300), var(--amber-600)); background-size: 200% auto; animation: gradient-move 4s linear infinite; }
.site-footer img { width: 44px; height: 44px; margin: 0 auto .6rem; border-radius: 50%; background: #fff; box-shadow: 0 0 18px rgba(236, 29, 37, .55); }
.site-footer strong { color: #fff; letter-spacing: .1em; }

/* ----- Halaman detail ----- */
.page-hero { position: relative; overflow: hidden; color: #fff; padding: 2.6rem 1rem 5.5rem; background: var(--navy-800) url('../img/hero-bg.svg') center / cover no-repeat; }
.page-hero-inner { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; }
.page-hero h1 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.15; margin: .9rem 0 1rem; }
.page-hero .back { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: #dbe7f1; text-decoration: none; padding: .4rem .9rem .4rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); transition: all .25s var(--ease); }
.page-hero .back:hover { background: rgba(255, 255, 255, .2); color: #fff; transform: translateX(-4px); }
.page-hero .meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.page-hero .meta span { font-size: .8rem; font-weight: 600; padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.page-hero .meta span.warn { background: rgba(243, 156, 18, .22); color: var(--amber-300); border-color: rgba(243, 156, 18, .5); }
.page-hero .chip-amber { background: rgba(243, 156, 18, .2); color: var(--amber-300); border-color: rgba(243, 156, 18, .45); }
.detail-grid { position: relative; z-index: 4; max-width: 72rem; margin: -3.2rem auto 0; padding: 0 1rem; display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: 1.6fr 1fr; } .apply-sticky { position: sticky; top: 5.5rem; } }
.detail-section { padding: 1.4rem 0; border-bottom: 1px dashed #e4d8bf; }
.detail-section:first-child { padding-top: 0; }
.detail-section:last-child { border-bottom: 0; padding-bottom: 0; }
/* Teks deskripsi/kualifikasi: bullet & nomor dengan hanging indent */
.rich-text .rt-li { display: flex; align-items: flex-start; gap: .5rem; margin: .15rem 0; }
.rich-text .rt-mark { flex: none; min-width: 1.25rem; color: var(--amber-600); font-weight: 700; }
.rich-text .rt-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rich-text .rt-p { margin: .15rem 0; overflow-wrap: anywhere; }
.rich-text .rt-gap { height: .6rem; }
.apply-card { border-top: 5px solid var(--amber-500) !important; }
.apply-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.apply-head img { width: 46px; height: 46px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(236, 29, 37, .4); }
.apply-head h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.25; }

/* =========================================================
   HALAMAN ADMIN
   ========================================================= */
body.brand-admin { padding-top: 1.5rem; min-height: 100vh; }
body.brand-admin::before {
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 300px;
    background: var(--navy-800) url('../img/admin-banner.svg') center / cover no-repeat; border-radius: 0 0 44px 44px;
    box-shadow: 0 20px 40px rgba(6, 26, 43, .25);
}
/* Header dashboard (kartu putih ber-border kiri amber) */
html body .border-l-4.border-amber-500.bg-white { border-left: 0; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--shadow-lg); gap: 1rem; flex-wrap: wrap; position: relative; overflow: hidden; }
html body .border-l-4.border-amber-500.bg-white::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--amber-400), var(--amber-600)); }
html body .border-l-4.border-amber-500.bg-white h1 { display: flex; align-items: center; gap: .7rem; padding-left: .3rem; font-weight: 800; }
html body .border-l-4.border-amber-500.bg-white h1::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: url('../img/logo.svg') center / cover; box-shadow: 0 0 0 2px #fff, 0 4px 16px rgba(236, 29, 37, .5); flex: none; }
html body .border-l-4.border-amber-500.bg-white p { padding-left: 3.2rem; }
html body .border-l-4.border-amber-500.bg-white a { padding: .5rem .85rem; border-radius: 999px; text-decoration: none; background: rgba(15, 56, 84, .05); transition: all .25s var(--ease); }
html body .border-l-4.border-amber-500.bg-white a:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Menu header dashboard: bentuk & tinggi seragam, termasuk tombol Logout (form) */
html body .border-l-4.border-amber-500.bg-white .flex.flex-wrap.gap-3 { align-items: center; }
html body .border-l-4.border-amber-500.bg-white form { margin: 0; display: flex; }
html body .border-l-4.border-amber-500.bg-white a,
html body .border-l-4.border-amber-500.bg-white form button {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; box-sizing: border-box;
    height: 2.2rem; padding: 0 .85rem; line-height: 1; border: 0; border-radius: 999px; text-decoration: none;
    background: rgba(15, 56, 84, .05); font: inherit; cursor: pointer; transition: all .25s var(--ease);
}
html body .border-l-4.border-amber-500.bg-white form button:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }

/* Kartu statistik dashboard */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid rgba(15, 56, 84, .07); box-shadow: var(--shadow-md); transition: transform .35s var(--ease), box-shadow .35s; }
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.stat-card::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 156, 18, .18), transparent 70%); }
.stat-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(135deg, var(--kraft-100), #ffe6b3); }
.stat-card strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.stat-card span.lbl { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; }

/* =========================================================
   HALAMAN LOGIN
   ========================================================= */
body.brand-auth { min-height: 100vh; background: var(--navy-900) url('../img/auth-bg.svg') center / cover no-repeat fixed !important; }
.auth-wrap { width: 100%; max-width: 68rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .auth-wrap { grid-template-columns: 1.1fr .9fr; } }
.auth-hero { display: none; color: #fff; }
@media (min-width: 1024px) { .auth-hero { display: block; } }
.auth-hero h2 { color: #fff; font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin: 1.2rem 0 .8rem; }
.auth-hero p { color: #b9cde0; line-height: 1.7; max-width: 28rem; }
.auth-hero .art-box { max-width: 380px; margin-top: 1.4rem; }
.auth-card { animation: fade-up .8s var(--ease) both; background: rgba(255, 255, 255, .97) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .5) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, .45) !important; position: relative; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--amber-600), var(--amber-300), var(--amber-600)); background-size: 200% auto; animation: gradient-move 4s linear infinite; }
.auth-logo { width: 76px; height: 76px; margin: 0 auto .8rem; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 10px 30px rgba(236, 29, 37, .5); animation: float-y 5s ease-in-out infinite; }

/* ----- Responsif & aksesibilitas ----- */
@media (max-width: 640px) {
    .hero { padding-top: 3rem; }
    body.brand-admin::before { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .js .reveal { opacity: 1; }
}

/* =========================================================
   SCENE ACAK: carton box (default), paper mill, atau paper roll
   html[data-scene] diisi acak oleh assets/js/scene.js setiap halaman dimuat
   ========================================================= */
html[data-scene="mill"] .hero,
html[data-scene="mill"] .page-hero { background-image: url('../img/hero-mill.svg'); }
html[data-scene="mill"] body.brand-admin::before,
html[data-scene="mill"] .site-footer { background-image: url('../img/admin-mill.svg'); }
html[data-scene="mill"] body.brand-auth { background-image: url('../img/auth-mill.svg') !important; }
html[data-scene="mill"] .art-box { background-image: url('../img/mill-illustration.svg'); }
html[data-scene="mill"] .art-empty { background-image: url('../img/empty-mill.svg'); }

/* Scene paper roll (hasil produksi paper mill) */
html[data-scene="roll"] .hero,
html[data-scene="roll"] .page-hero { background-image: url('../img/hero-roll.svg'); }
html[data-scene="roll"] body.brand-admin::before,
html[data-scene="roll"] .site-footer { background-image: url('../img/admin-roll.svg'); }
html[data-scene="roll"] body.brand-auth { background-image: url('../img/auth-roll.svg') !important; }
html[data-scene="roll"] .art-box { background-image: url('../img/roll-illustration.svg'); }
html[data-scene="roll"] .art-empty { background-image: url('../img/empty-roll.svg'); }

/* Daftar pelamar: tebal = belum dilihat, normal = sudah dilihat */
html body table tbody tr.row-unread > td { font-weight: 700; color: var(--navy-900); }
html body table tbody tr.row-read > td { font-weight: 400; }