/* ==========================================================================
   KURANAS Design System — token, glassmorphism, animasi
   Ditulis sebagai CSS biasa (bukan kelas Tailwind baru) supaya tidak perlu
   menjalankan ulang build Tailwind saat berkas ini diubah.
   Dimuat SETELAH tailwind.min.css agar bisa menimpa utilitas bawaan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root {
    /* Warna merek — nilai asli ditimpa oleh blok <style> tenant di index.php */
    --brand-500-rgb: 22 163 74;
    --brand-600-rgb: 21 128 61;
    --accent-500-rgb: 245 158 11;

    --ds-brand: rgb(var(--brand-500-rgb));
    --ds-brand-strong: rgb(var(--brand-600-rgb));
    --ds-accent: rgb(var(--accent-500-rgb));

    /* Warna semantik */
    --ds-success: #16a34a;
    --ds-warning: #f59e0b;
    --ds-danger: #dc2626;
    --ds-info: #2563eb;

    /* Permukaan & teks */
    --ds-surface: #ffffff;
    --ds-surface-muted: #f8fafc;
    --ds-text: #0f172a;
    --ds-text-muted: #64748b;
    --ds-text-subtle: #94a3b8;
    --ds-border: #e2e8f0;

    /* Kaca (glassmorphism) */
    --ds-glass-bg: rgba(255, 255, 255, 0.72);
    --ds-glass-bg-strong: rgba(255, 255, 255, 0.86);
    --ds-glass-bg-dark: rgba(15, 23, 42, 0.55);
    --ds-glass-border: rgba(255, 255, 255, 0.55);
    --ds-glass-blur: 16px;
    --ds-glass-blur-lg: 28px;
    --ds-glass-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.18);
    --ds-glass-shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.28);
    /* Garis tipis bercahaya di tepi atas kartu */
    --ds-glass-sheen: inset 0 1px 0 0 rgba(255, 255, 255, 0.65);

    /* Spacing (skala 4px) */
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-space-10: 2.5rem;
    --ds-space-12: 3rem;
    --ds-space-16: 4rem;
    --ds-space-24: 6rem;

    /* Radius */
    --ds-radius-sm: 0.5rem;
    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 1rem;
    --ds-radius-xl: 1.25rem;
    --ds-radius-2xl: 1.5rem;
    --ds-radius-full: 9999px;

    /* Tipografi */
    --ds-font-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
    --ds-text-xs: 0.6875rem;
    --ds-text-sm: 0.8125rem;
    --ds-text-base: 0.9375rem;
    --ds-text-lg: 1.125rem;
    --ds-text-xl: 1.375rem;
    --ds-text-2xl: 1.75rem;
    --ds-text-3xl: 2.25rem;
    --ds-text-4xl: 3rem;
    --ds-leading-tight: 1.15;
    --ds-leading-normal: 1.6;
    --ds-tracking-tight: -0.02em;

    /* Elevasi non-kaca */
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ds-shadow-md: 0 4px 16px -4px rgba(15, 23, 42, 0.12);
    --ds-shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.2);

    /* Gerak */
    --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ds-duration-fast: 140ms;
    --ds-duration: 260ms;
    --ds-duration-slow: 460ms;

    /* Lapisan */
    --ds-z-backdrop: 0;
    --ds-z-nav: 50;
    --ds-z-toast: 100;
    --ds-z-confetti: 9999;
}

/* --------------------------------------------------------------------------
   2. LATAR AURORA — memberi "sesuatu" untuk diburamkan oleh kartu kaca
   -------------------------------------------------------------------------- */
body.ds-glass-ui {
    position: relative;
    background-color: #f6f8fb;
}

body.ds-glass-ui::before {
    content: '';
    position: fixed;
    inset: -20vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 12% 8%, rgb(var(--brand-500-rgb) / 0.16), transparent 62%),
        radial-gradient(32vmax 32vmax at 88% 12%, rgb(var(--accent-500-rgb) / 0.13), transparent 60%),
        radial-gradient(42vmax 42vmax at 70% 88%, rgb(var(--brand-600-rgb) / 0.14), transparent 62%),
        radial-gradient(30vmax 30vmax at 22% 82%, rgba(56, 189, 248, 0.12), transparent 60%);
    animation: ds-aurora 24s var(--ds-ease) infinite alternate;
}

@keyframes ds-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

/* --------------------------------------------------------------------------
   3. GLASSMORPHISM
   -------------------------------------------------------------------------- */
.glass,
.ds-glass {
    background: var(--ds-glass-bg);
    -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(165%);
    backdrop-filter: blur(var(--ds-glass-blur)) saturate(165%);
}

.ds-glass-strong {
    background: var(--ds-glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--ds-glass-blur-lg)) saturate(180%);
    backdrop-filter: blur(var(--ds-glass-blur-lg)) saturate(180%);
}

/* Kartu kaca: transparansi lembut + border tipis bercahaya */
.ds-card {
    position: relative;
    background: var(--ds-glass-bg);
    -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(165%);
    backdrop-filter: blur(var(--ds-glass-blur)) saturate(165%);
    border: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-glass-shadow), var(--ds-glass-sheen);
    transition: transform var(--ds-duration) var(--ds-ease),
                box-shadow var(--ds-duration) var(--ds-ease),
                border-color var(--ds-duration) var(--ds-ease);
}

/* Cahaya tipis mengelilingi tepi kartu */
.ds-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgb(var(--brand-500-rgb) / 0.28) 38%,
        rgba(255, 255, 255, 0.12) 62%,
        rgb(var(--accent-500-rgb) / 0.22) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.75;
    transition: opacity var(--ds-duration) var(--ds-ease);
}

.ds-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-glass-shadow-lg), var(--ds-glass-sheen);
}

.ds-card-hover:hover::after { opacity: 1; }

.ds-card-dark {
    background: var(--ds-glass-bg-dark);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--ds-glass-shadow-lg), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Kartu kaca berbentuk pil (badge) */
.ds-card.ds-pill { border-radius: var(--ds-radius-full); }

/* Teks sekunder di atas latar gradient gelap */
.ds-on-gradient { color: rgba(255, 255, 255, 0.85); }

/* Upgrade menyeluruh: kartu putih bawaan Tailwind ikut jadi kaca.
   Hanya aktif bila <body> memakai kelas ds-glass-ui.
   Tombol/tautan dikecualikan agar kontrasnya tetap tegas. */
body.ds-glass-ui .bg-white.rounded-xl:not(a):not(button),
body.ds-glass-ui .bg-white.rounded-2xl:not(a):not(button),
body.ds-glass-ui .bg-white.rounded-3xl:not(a):not(button) {
    background-color: var(--ds-glass-bg);
    -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--ds-glass-blur)) saturate(160%);
    border-color: var(--ds-glass-border);
    box-shadow: var(--ds-glass-shadow), var(--ds-glass-sheen);
}

/* Elemen yang wajib solid (menu dropdown, modal, area cetak) tetap buram penuh */
body.ds-glass-ui .ds-solid,
body.ds-glass-ui .bg-white.rounded-xl.shadow-xl,
body.ds-glass-ui [x-cloak] .bg-white {
    background-color: var(--ds-glass-bg-strong);
}

/* Section berlatar solid dibuat semi-transparan supaya aurora tembus
   dan efek kaca pada kartu di dalamnya benar-benar terlihat. */
body.ds-glass-ui .ds-page > section.bg-white,
body.ds-glass-ui .ds-page > section.bg-gray-50:not(.mesh-gradient),
body.ds-glass-ui .ds-page > section.bg-gradient-to-b {
    background-color: rgba(255, 255, 255, 0.42);
    background-image: none;
}

/* --------------------------------------------------------------------------
   4. GRADIENT ANIMASI (hero / CTA)
   -------------------------------------------------------------------------- */
.ds-gradient-animated {
    position: relative;
    isolation: isolate;
    background: linear-gradient(120deg,
        rgb(var(--brand-600-rgb)) 0%,
        rgb(var(--brand-500-rgb)) 26%,
        #0ea5e9 50%,
        rgb(var(--accent-500-rgb)) 74%,
        rgb(var(--brand-600-rgb)) 100%);
    background-size: 320% 320%;
    animation: ds-gradient-shift 18s ease infinite;
}

@keyframes ds-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Lapisan aurora untuk ditempel di dalam section hero (posisi absolute) */
.ds-aurora-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ds-aurora-blob {
    position: absolute;
    border-radius: var(--ds-radius-full);
    filter: blur(70px);
    opacity: 0.55;
    animation: ds-blob 20s var(--ds-ease) infinite alternate;
}

.ds-aurora-blob:nth-child(2) { animation-duration: 26s; animation-delay: -6s; }
.ds-aurora-blob:nth-child(3) { animation-duration: 32s; animation-delay: -12s; }

@keyframes ds-blob {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6%, -8%, 0) scale(1.15); }
    100% { transform: translate3d(-7%, 6%, 0) scale(0.95); }
}

/* Teks bergradasi bergerak */
.ds-text-gradient {
    background: linear-gradient(100deg,
        rgb(var(--brand-600-rgb)),
        rgb(var(--brand-500-rgb)) 35%,
        rgb(var(--accent-500-rgb)) 60%,
        rgb(var(--brand-600-rgb)));
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ds-gradient-shift 12s ease infinite;
}

/* --------------------------------------------------------------------------
   5. TRANSISI HALAMAN
   -------------------------------------------------------------------------- */
/* ⚠️ Animasi DITERAPKAN PADA ANAK, bukan pada .ds-page.
   Elemen ber-transform menjadi containing block bagi position:fixed, sehingga
   header atas & bottom nav mobile akan lepas dari viewport bila wrapper-nya
   ikut dianimasikan. Anak ber-kelas .fixed/.sticky dikecualikan, dan fill-mode
   "backwards" dipakai agar transform hilang lagi setelah animasi selesai. */
.ds-page > *:not(.fixed):not(.sticky) {
    animation: ds-page-in var(--ds-duration-slow) var(--ds-ease) backwards;
}

@keyframes ds-page-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.ds-leaving .ds-page > *:not(.fixed):not(.sticky) {
    animation: ds-page-out 200ms var(--ds-ease) forwards;
}

/* Elemen melayang cukup memudar agar posisinya tidak pernah bergeser */
html.ds-leaving .ds-page > .fixed,
html.ds-leaving .ds-page > .sticky {
    animation: ds-fade-out 200ms var(--ds-ease) forwards;
}

/* Opt-out untuk pembungkus yang berisi elemen position:fixed (mis. bottom nav mobile) */
.ds-page > .ds-no-transition,
html.ds-leaving .ds-page > .ds-no-transition {
    animation: none !important;
}

@keyframes ds-page-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -10px, 0); }
}

@keyframes ds-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Muncul bertahap saat digulir ke layar */
.ds-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity var(--ds-duration-slow) var(--ds-ease),
                transform var(--ds-duration-slow) var(--ds-ease);
}

.ds-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   6. MICRO-INTERACTION
   -------------------------------------------------------------------------- */
#ds-confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--ds-z-confetti);
}

.ds-press {
    transition: transform var(--ds-duration-fast) var(--ds-ease),
                box-shadow var(--ds-duration-fast) var(--ds-ease);
}

.ds-press:active { transform: scale(0.97); }

.ds-counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. TIPOGRAFI & UTILITAS RINGKAS
   -------------------------------------------------------------------------- */
.ds-h1 { font-size: var(--ds-text-4xl); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); font-weight: 800; color: var(--ds-text); }
.ds-h2 { font-size: var(--ds-text-3xl); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); font-weight: 800; color: var(--ds-text); }
.ds-h3 { font-size: var(--ds-text-xl); line-height: 1.3; font-weight: 700; color: var(--ds-text); }
.ds-body { font-size: var(--ds-text-base); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
.ds-caption { font-size: var(--ds-text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ds-text-subtle); }
.ds-stack-4 > * + * { margin-top: var(--ds-space-4); }
.ds-stack-6 > * + * { margin-top: var(--ds-space-6); }

/* --------------------------------------------------------------------------
   8. AKSESIBILITAS — hormati "kurangi gerak"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ds-glass-ui::before,
    .ds-gradient-animated,
    .ds-aurora-blob,
    .ds-text-gradient {
        animation: none !important;
    }

    .ds-page,
    .ds-page > *,
    html.ds-leaving .ds-page > * {
        animation: none !important;
    }

    .ds-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Peramban tanpa backdrop-filter (mis. Firefox lama) tetap terbaca */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass,
    .ds-glass,
    .ds-card,
    body.ds-glass-ui .bg-white.rounded-xl:not(a):not(button),
    body.ds-glass-ui .bg-white.rounded-2xl:not(a):not(button),
    body.ds-glass-ui .bg-white.rounded-3xl:not(a):not(button) {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

@media print {
    body.ds-glass-ui::before { display: none; }
    .ds-card,
    body.ds-glass-ui .bg-white.rounded-xl:not(a):not(button),
    body.ds-glass-ui .bg-white.rounded-2xl:not(a):not(button),
    body.ds-glass-ui .bg-white.rounded-3xl:not(a):not(button) {
        background: #fff !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    #ds-confetti-canvas { display: none !important; }
}