/* =========================================================================
   Barazaki Konveksi — Design System
   Modern Corporate Premium + Modern E-commerce
   ========================================================================= */

:root{
    --radius-card: 14px;
    --radius-input: 10px;
    --radius-btn: 9px;
    --shadow-soft: 0 1px 2px rgba(16,42,67,.04), 0 2px 8px rgba(16,42,67,.05);
    --shadow-lift: 0 4px 16px rgba(16,42,67,.08);
    --border-subtle: #e7e9ee;
}

*{ scroll-behavior:smooth; }

body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    letter-spacing:-0.011em;
}

h1,h2,h3,h4,h5{ letter-spacing:-0.02em; }

[data-animate]{ opacity:0; }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-weight:600; font-size:.875rem; line-height:1.2;
    border-radius:var(--radius-btn);
    padding:.75rem 1.5rem;
    transition:background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:#f59e0b; color:#0c0a09; box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:#fbbf24; }
.btn-secondary{ background:#fff; color:#0c0a09; border:1px solid var(--border-subtle); }
.btn-secondary:hover{ background:#f7f8fa; border-color:#d7dbe3; }
.btn-outline-inverse{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-outline-inverse:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); }
.btn-ghost{ background:transparent; color:#292524; }
.btn-ghost:hover{ background:#f0f4f8; }
.btn-danger{ background:#fef2f2; color:#dc2626; }
.btn-danger:hover{ background:#fee2e2; }
.btn-sm{ padding:.5rem 1rem; font-size:.8125rem; }

/* ---------- Card ---------- */
.card{
    background:#fff;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-soft);
}
.card-hover{ transition:box-shadow .2s ease, transform .2s ease; }
.card-hover:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); }

/* ---------- Input ---------- */
.field{
    width:100%;
    padding:.7rem 1rem;
    border-radius:var(--radius-input);
    border:1px solid var(--border-subtle);
    font-size:.875rem;
    background:#fff;
    color:#0c0a09;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus{ outline:none; border-color:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.12); }
.field-error{ border-color:#f87171; }

/* ---------- Badge / Status ---------- */
.badge{
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.3rem .7rem; border-radius:9999px;
    font-size:.6875rem; font-weight:700; letter-spacing:.01em;
    white-space:nowrap;
}
.badge-dot::before{ content:''; width:5px; height:5px; border-radius:9999px; background:currentColor; }
.badge-success{ background:#ecfdf5; color:#059669; }
.badge-warning{ background:#fffbeb; color:#b45309; }
.badge-info{ background:#eff6ff; color:#2563eb; }
.badge-neutral{ background:#f1f4f8; color:#44403c; }
.badge-danger{ background:#fef2f2; color:#dc2626; }
.badge-primary{ background:#fff1e7; color:#b45309; }

/* ---------- Nav link (public navbar) ---------- */
.nav-link{
    position:relative; font-size:.875rem; font-weight:500; color:#292524;
    padding:.35rem 0; transition:color .15s ease;
}
.nav-link::after{
    content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:#d97706; transition:right .2s ease; border-radius:2px;
}
.nav-link:hover{ color:#0c0a09; }
.nav-link:hover::after,
.nav-link.is-active::after{ right:0; }
.nav-link.is-active{ color:#b45309; font-weight:600; }

/* ---------- Sidebar link (dashboard) ---------- */
.side-link{
    display:flex; align-items:center; gap:.75rem;
    padding:.6rem .85rem; border-radius:10px;
    font-size:.8125rem; font-weight:500; color:#44403c;
    border-left:3px solid transparent;
    transition:background-color .15s ease, color .15s ease;
}
.side-link:hover{ background:#f4f6f9; color:#0c0a09; }
.side-link.is-active{ background:#fff1e7; color:#b45309; border-left-color:#d97706; font-weight:600; }
.dark .side-link{ color:#a8a29e; }
.dark .side-link:hover{ background:#1c1917; color:#f5f5f4; }
.dark .side-link.is-active{ background:rgba(217,119,6,.16); color:#fbbf24; }

.side-group-label{
    font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#78716c; padding:1.1rem .85rem .4rem;
}
.dark .side-group-label{ color:#78716c; }

/* ---------- Table ---------- */
.table-modern{ width:100%; border-collapse:separate; border-spacing:0; font-size:.8125rem; }
.table-modern thead th{
    text-align:left; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:#8496ab; padding:.85rem 1rem; border-bottom:1px solid var(--border-subtle);
}
.table-modern tbody td{ padding:.9rem 1rem; border-bottom:1px solid var(--border-subtle); color:#1c1917; }
.table-modern tbody tr:last-child td{ border-bottom:none; }
.table-modern tbody tr{ transition:background-color .12s ease; }
.table-modern tbody tr:hover{ background:#fafbfc; }
.dark .table-modern tbody td{ color:#e7e5e4; border-color:#292524; }
.dark .table-modern thead th{ color:#a8a29e; border-color:#292524; }
.dark .table-modern tbody tr:hover{ background:#171310; }

/* ---------- Stat card ---------- */
.stat-card{
    background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-card);
    padding:1.25rem; box-shadow:var(--shadow-soft);
}
.dark .stat-card{ background:#1c1917; border-color:#292524; }

/* ---------- Skeleton / loading ---------- */
.skeleton{ background:linear-gradient(90deg,#eef1f4 25%,#f5f5f4 37%,#eef1f4 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:8px; }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.dark .skeleton{ background:linear-gradient(90deg,#1c1917 25%,#262119 37%,#1c1917 63%); background-size:400% 100%; }

.spinner{ width:1rem; height:1rem; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:9999px; animation:spin .6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================================
   DARK THEME — Tema Gelap Hitam + Kuning (default aktif di seluruh halaman)
   Override token warna dasar Tailwind (bg/text/border) untuk halaman publik
   yang belum memakai varian dark: per elemen (home, marketplace, auth, dll).
   Halaman dashboard sudah punya varian dark: sendiri di tiap komponen;
   blok ini menyelaraskan warnanya (hitam pekat + aksen kuning/amber).
   ========================================================================= */
.dark{ color-scheme: dark; }
.dark body{ background:#0c0a09; }

/* Permukaan (surface) */
.dark .bg-white{ background-color:#1c1917 !important; }
.dark .bg-white\/95{ background-color:rgba(28,25,23,.92) !important; }
.dark .bg-white\/90{ background-color:rgba(28,25,23,.9) !important; }
.dark .bg-gray-50{ background-color:#141110 !important; }
.dark .bg-gray-100{ background-color:#201b18 !important; }
.dark .bg-navy-50{ background-color:#0c0a09 !important; }

/* Teks */
.dark .text-navy-900,
.dark .text-navy-800,
.dark .text-navy-700{ color:#f5f5f4 !important; }
.dark .text-navy-600{ color:#e7e5e4 !important; }
.dark .text-navy-500,
.dark .text-navy-400,
.dark .text-navy-300{ color:#a8a29e !important; }
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700{ color:#f5f5f4 !important; }
.dark .text-gray-600,
.dark .text-gray-500{ color:#a8a29e !important; }

/* Aksen kuning/amber — cerahkan varian gelap supaya tetap kontras di atas hitam */
.dark .text-primary-800,
.dark .text-primary-700,
.dark .text-primary-600{ color:#fbbf24 !important; }
.dark .bg-primary-50{ background-color:rgba(217,119,6,.15) !important; }
.dark .bg-primary-100{ background-color:rgba(217,119,6,.2) !important; }

/* Badge/status berwarna (emerald, amber literal, red, blue) — sebelumnya
   dibiarkan terang (mis. bg-emerald-50, bg-red-50) sehingga jadi "titik
   terlalu terang" yang mencolok di tengah tema gelap (contoh: kartu
   WhatsApp Support di halaman Bantuan, pil status di dashboard, dsb).
   Diselaraskan dengan pola yang sama seperti primary di atas: bg pekat
   bertransparansi rendah, teks dicerahkan supaya tetap kontras. */
.dark .bg-emerald-50{ background-color:rgba(5,150,105,.15) !important; }
.dark .bg-emerald-100{ background-color:rgba(5,150,105,.22) !important; }
.dark .text-emerald-800,
.dark .text-emerald-700,
.dark .text-emerald-600{ color:#34d399 !important; }
.dark .border-emerald-200,
.dark .border-emerald-300{ border-color:rgba(5,150,105,.4) !important; }

.dark .bg-amber-50{ background-color:rgba(217,119,6,.15) !important; }
.dark .bg-amber-100{ background-color:rgba(217,119,6,.2) !important; }
.dark .text-amber-800,
.dark .text-amber-700,
.dark .text-amber-600{ color:#fbbf24 !important; }
.dark .border-amber-200,
.dark .border-amber-300{ border-color:rgba(217,119,6,.4) !important; }

.dark .bg-red-50{ background-color:rgba(220,38,38,.15) !important; }
.dark .bg-red-100{ background-color:rgba(220,38,38,.22) !important; }
.dark .text-red-800,
.dark .text-red-700,
.dark .text-red-600{ color:#f87171 !important; }
.dark .border-red-200,
.dark .border-red-300{ border-color:rgba(220,38,38,.4) !important; }

.dark .bg-blue-50{ background-color:rgba(37,99,235,.15) !important; }
.dark .bg-blue-100{ background-color:rgba(37,99,235,.22) !important; }
.dark .text-blue-800,
.dark .text-blue-700,
.dark .text-blue-600{ color:#60a5fa !important; }
.dark .border-blue-200,
.dark .border-blue-300{ border-color:rgba(37,99,235,.4) !important; }

/* Border */
.dark .border-gray-50,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-navy-100,
.dark .border-navy-200,
.dark .border-navy-300{ border-color:#292524 !important; }

/* Komponen umum */
.dark .card{ background:#1c1917; border-color:#292524; }
.dark .field{ background:#1c1917; color:#f5f5f4; border-color:#292524; }
.dark .field::placeholder{ color:#78716c; }
.dark .btn-secondary{ background:#1c1917; color:#f5f5f4; border-color:#292524; }
.dark .btn-secondary:hover{ background:#201b18; border-color:#44403c; }
.dark .btn-ghost{ color:#e7e5e4; }
.dark .btn-ghost:hover{ background:#201b18; }
.dark .nav-link{ color:#a8a29e; }
.dark .nav-link:hover{ color:#f5f5f4; }
.dark ::-webkit-scrollbar-thumb{ background:#44403c; }

/* ---------- Navbar transparan (khusus homepage, di atas hero) ---------- */
.nav-transparent{ background:transparent; border-bottom-color:transparent; }
.nav-transparent .nav-link{ color:#fff; }
.nav-transparent .nav-link:hover{ color:#fde68a; }
.nav-transparent .nav-link.is-active{ color:#fcd34d; }
.nav-transparent .nav-link::after{ background:#fcd34d; }
.nav-transparent .brand-title{ color:#fff; }
.nav-transparent .btn-ghost{ color:#fff; }
.nav-transparent .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.nav-transparent #mobile-menu-btn{ color:#fff; }
.nav-transparent .navbar-icon{ color:#fff; }
.nav-transparent .navbar-icon:hover{ color:#fde68a; }

/* ---------- Logo klien bergerak (marquee) ---------- */
.client-marquee-track{
    animation: client-marquee 28s linear infinite;
}
.client-marquee-track:hover{ animation-play-state: paused; }
@keyframes client-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

/* ---------- Bento Gallery (halaman /galeri) ---------- */
.bento-card{
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.bento-card:hover{
    transform: scale(1.02);
    box-shadow: 0 12px 28px -8px rgba(12,10,9,.45);
}
#bento-viewport{ padding-bottom: 4px; }
.gallery-filter-btn.is-active{
    background:#d97706; color:#fff; border-color:#d97706;
}