/* ═══════════════════════════════════════════════════════════════════
   TOKEN SITUS PUBLIK — pramatoserba.co.id
   Sumber kebenaran tunggal untuk warna, huruf, spasi, radius, bayangan.

   Arah visual terkunci 10 Sep 2026 (Fase 0):
     Cangkang  = arah B "Rak & Harga" — Barlow Condensed + Barlow,
                 sudut tajam, navbar putih bergaris tebal, footer navy.
     Halaman   = kepala halaman pita navy + aksen miring dari arah C.
     Beranda   = hero banner slider (isi dari /panel/banner).

   DIMUAT SEBELUM style.css di resources/views/main/header.blade.php.
   Blok :root yang dulu ada di style.css sudah DIPINDAH ke sini — jangan
   dibuat lagi di sana, nanti ada dua sumber kebenaran.

   Area admin /panel TIDAK memakai berkas ini (dia Tailwind, tokennya di
   resources/css/app.css). Sengaja terpisah — beda penonton, beda tugas.
   Yang sama cuma merek: oranye #FF5E14 + navy #02245B + logo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Merek ─────────────────────────────────────────────────── */
    --brand: #ff5e14;          /* oranye Prama Borma */
    --brand-press: #d14a0b;    /* oranye ditekan / teks di atas terang */
    --brand-deep: #a33707;
    --brand-soft: #fff0e7;     /* latar lembut oranye */
    --brand-line: #ffcbb0;
    --navy: #02245b;           /* navy Prama Borma */
    --navy-2: #0a3a82;
    --navy-deep: #061a3d;
    --on-brand: #ffffff;
    --on-navy: #ffffff;

    /* Hijau LAYAR / WhatsApp — aksi "pesan", bukan warna merek */
    --layar: #1c6b47;
    --layar-soft: #e8f5ee;

    /* ── Netral ────────────────────────────────────────────────── */
    --ink: #14181f;            /* teks utama */
    --ink-2: #5a6270;          /* teks sekunder */
    --ink-3: #8a94a3;          /* teks tersier / keterangan */
    --ink-4: #9aa3b0;          /* harga coret, placeholder */
    /* 10 Sep 2026: latar dihangatkan mengikuti panel (#faf6f1). Kartu tetap
       putih murni supaya "mengambang" di atas latar hangat. */
    --bg: #faf6f1;             /* latar halaman (body) */
    --surface: #ffffff;        /* kartu / permukaan menonjol */
    --surface-2: #f5f0e9;      /* pita section berselang (hangat) */
    --line: #e6e1d9;           /* garis (sedikit hangat, senada) */
    --line-strong: #14181f;    /* garis bawah navbar 2px */

    /* Netral di atas navy */
    --on-navy-2: #b9c7e0;
    --on-navy-3: #8fa2c4;
    --on-navy-4: #7e93bc;
    --on-navy-line: rgba(255, 255, 255, 0.16);

    /* ── Status ────────────────────────────────────────────────── */
    --ok: #1c7c54;
    --ok-soft: #e0f2e8;
    --warn: #b26a00;
    --warn-soft: #fdefd8;
    --bad: #c0342b;
    --bad-soft: #fbe6e3;

    /* ── Huruf ─────────────────────────────────────────────────── */
    /* Cadangan untuk --font-display sengaja diisi huruf SEMPIT lebih dulu.
       Sebelumnya cadangan pertamanya "Barlow" (tidak condensed) yang jauh
       lebih lebar, jadi saat Barlow Condensed selesai dimuat menu navbar
       menyusut dan seluruh baris bergeser — terukur sebagai CLS 0,013 di
       Lighthouse, dan #navbarCollapse penyumbang terbesarnya. */
    --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed",
        "Liberation Sans Narrow", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Skala fluid — angka kedua clamp() memakai vw supaya ikut lebar layar.
       Dipakai lewat var(), jangan tulis px langsung di style.css. */
    --fs-100: 0.78rem;                              /* 12.5px — label kecil */
    --fs-200: 0.85rem;                              /* 13.5px — keterangan */
    --fs-300: 0.94rem;                              /* 15px   — isi kecil */
    --fs-400: 1rem;                                 /* 16px   — isi */
    --fs-500: clamp(1.05rem, 0.98rem + 0.3vw, 1.19rem);
    --fs-600: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-700: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
    --fs-800: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);   /* judul halaman */
    --fs-900: clamp(2.6rem, 1.7rem + 4vw, 4.9rem);   /* judul hero */

    --lh-tight: 0.95;
    --lh-heading: 1.12;
    --lh-body: 1.62;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --tracking-label: 0.12em;   /* label huruf besar */
    --tracking-display: 0.01em;

    /* ── Spasi ─────────────────────────────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-y: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);  /* jarak antar section */

    /* ── Bentuk ────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius: 6px;      /* kartu & tombol — arah B: tajam, bukan membulat */
    --radius-lg: 10px;
    --radius-pill: 999px;
    --skew: -9deg;      /* aksen miring dari arah C */

    /* ── Bayangan ──────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05);
    --shadow: 0 4px 16px -6px rgba(20, 24, 31, 0.16);
    --shadow-lg: 0 18px 42px -18px rgba(20, 24, 31, 0.32);
    --shadow-pop: 0 24px 50px -20px rgba(0, 0, 0, 0.4);

    /* ── Gerak ─────────────────────────────────────────────────── */
    --dur-fast: 0.14s;
    --dur: 0.24s;
    --dur-slow: 0.5s;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ── Tata letak ────────────────────────────────────────────── */
    --container-max: 1320px;
    --gutter: clamp(1rem, 0.5rem + 2vw, 3rem);

    /* ═══ Jembatan ke Bootstrap 5.3 ═══
       Bootstrap membaca var ini sendiri, jadi menimpanya di sini membuat
       .btn-primary, .text-primary, link, dsb. ikut merek tanpa menulis
       ulang komponennya. Nilainya menunjuk token di atas. */
    --primary: var(--brand);
    --secondary: var(--ink-2);
    --light: var(--surface-2);
    --dark: var(--navy);

    --bs-primary: #ff5e14;
    --bs-primary-rgb: 255, 94, 20;
    /* .bg-light / .bg-body-tertiary ikut hangat, bukan abu-abu dingin. */
    --bs-light: #f5f0e9;
    --bs-light-rgb: 245, 240, 233;
    --bs-tertiary-bg: #f5f0e9;
    --bs-secondary-bg: #ece5db;
    --bs-link-color: #ff5e14;
    --bs-link-color-rgb: 255, 94, 20;
    --bs-link-hover-color: #d14a0b;
    --bs-secondary-color: #5a6270;

    --bs-body-bg: var(--bg);
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--ink);
    --bs-body-font-size: var(--fs-400);
    --bs-body-line-height: var(--lh-body);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
}

/* ── Dasar tipografi ───────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: var(--fs-400);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--navy);
    text-wrap: balance;
}

/* Barlow Condensed sempit — judul besar butuh line-height lebih rapat. */
h1, .display-1, .display-2, .display-3, .display-4, .display-5 {
    line-height: var(--lh-tight);
}

p { text-wrap: pretty; }

/* ── Kelas pembantu yang dipakai lintas halaman ────────────────── */

/* Huruf display di luar heading (tombol, label, angka harga). */
.u-cond {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
}

/* Label kecil huruf besar di atas judul section. */
.u-eyebrow {
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--brand);
}

/* Aksen miring arah C. Anak langsung dimiringkan balik supaya teks tegak. */
.u-skew {
    transform: skewX(var(--skew));
}
.u-skew > * {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1));
}

/* Harga promo. */
.u-price {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--brand-press);
    line-height: 1;
}
.u-price-old {
    font-size: var(--fs-200);
    color: var(--ink-4);
    text-decoration: line-through;
}

/* ── Muncul saat digulir — pengganti WOW.js + animate.css ──────────
   Mesinnya IntersectionObserver di public/js/main.js. Kelas .wow dan
   atribut data-wow-delay LAMA tetap dipakai sebagai pengait, jadi ~20
   berkas Blade lain tidak perlu disentuh sama sekali.

   Elemen hanya disembunyikan kalau JS sudah menandai <html> dengan
   .js-reveal — tanpa JS semua tetap tampil (dan tetap terbaca Google). */
.js-reveal .wow {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
}
.js-reveal .wow.is-revealed {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal .wow {
        opacity: 1;
        transform: none;
    }
    .js-reveal .wow.is-revealed {
        transition: none;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}