@import url('https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800&family=amiri:400,700');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   DESIGN TOKENS — "Sakinah" (Material 3 + brand coral #F0562D)
   Disimpan sebagai RGB channel agar utility opacity Tailwind jalan.
   ============================================================ */
@layer base {
    :root {
        /* Light "Parchment" — premium SaaS, hangat */
        --qr-primary: 240 86 45;          /* #F0562D coral (logo) */
        --qr-primary-light: 245 132 104;
        --qr-primary-dark: 198 62 30;
        --qr-primary-container: 253 230 222;
        --qr-on-primary: 255 255 255;
        --qr-surface: 250 248 244;         /* parchment background */
        --qr-surface-1: 255 254 251;       /* card / elevated */
        --qr-surface-2: 244 240 233;       /* variant / inset */
        --qr-ink: 41 35 30;                /* on-surface text */
        --qr-muted: 112 101 91;            /* secondary text (AA) */
        --qr-outline: 226 219 209;
        --qr-secondary: 24 116 116;        /* deep teal (Islamic accent) */
        --qr-amber: 199 145 64;
        --qr-shadow: 60 40 20;
        color-scheme: light;
    }

    [data-theme='dark'] {
        /* Dark "Cinematic" — Netflix islami, warm-black */
        --qr-primary: 248 124 94;
        --qr-primary-light: 251 154 130;
        --qr-primary-dark: 224 92 60;
        --qr-primary-container: 92 42 28;
        --qr-on-primary: 28 16 10;
        --qr-surface: 18 16 15;
        --qr-surface-1: 28 25 23;
        --qr-surface-2: 38 33 30;
        --qr-ink: 245 242 238;
        --qr-muted: 170 159 150;
        --qr-outline: 60 54 49;
        --qr-secondary: 88 198 192;
        --qr-amber: 224 178 92;
        --qr-shadow: 0 0 0;
        color-scheme: dark;
    }

    [x-cloak] { display: none !important; }
    html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
    body {
        @apply bg-surface text-ink font-sans antialiased;
        transition: background-color .25s ease, color .25s ease;
    }
    ::selection { background: rgb(var(--qr-primary) / .22); }

    /* Fokus keyboard terlihat untuk semua kontrol interaktif (WCAG 2.4.7).
       :focus-visible hanya muncul saat navigasi keyboard, tak mengganggu pointer/tap. */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
    [tabindex]:focus-visible, summary:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible,
    .btn:focus-visible, .tab:focus-visible {
        outline: 2px solid rgb(var(--qr-primary));
        outline-offset: 2px;
        border-radius: 8px;
    }

    ::-webkit-scrollbar { height: 8px; width: 8px; }
    ::-webkit-scrollbar-thumb { background: rgb(var(--qr-outline)); border-radius: 9999px; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
}

/* ============================================================
   TYPOGRAPHY SCALE (Material 3 → skala bernama, fluid)
   ============================================================ */
@layer components {
    .text-display { font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
    .text-h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 800; }
    .text-h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; }
    .text-h3 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); line-height: 1.25; font-weight: 700; }
    .text-h4 { font-size: 1.0625rem; line-height: 1.4; font-weight: 700; letter-spacing: .005em; }
    .text-body-lg { font-size: 1rem; line-height: 1.6; }
    .text-body { font-size: .9375rem; line-height: 1.55; }
    .text-small { font-size: .8125rem; line-height: 1.5; }
    .text-caption { font-size: .75rem; line-height: 1.4; letter-spacing: .02em; }
    .text-label { font-size: .75rem; line-height: 1.3; letter-spacing: .03em; font-weight: 600; text-transform: uppercase; }
    .prose-body { max-width: 70ch; }
}

/* ============================================================
   MATERIAL SYMBOLS
   ============================================================ */
@layer base {
    .material-symbols-rounded {
        font-family: 'Material Symbols Rounded';
        font-weight: normal; font-style: normal;
        line-height: 1; letter-spacing: normal; text-transform: none;
        display: inline-flex; white-space: nowrap; word-wrap: normal; direction: ltr;
        -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle; user-select: none;
    }
    .material-symbols-rounded.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
}

/* ============================================================
   KOMPONEN
   ============================================================ */
@layer components {
    /* ---- Buttons (Material 3) ---- */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold
               transition-all duration-200 ease-emphasized active:scale-[.97] select-none;
    }
    .btn-filled, .btn-accent { @apply btn bg-primary text-on-primary hover:bg-primary-light shadow-e2 hover:shadow-e3; }
    .btn-tonal { @apply btn bg-primary-container text-primary-dark hover:brightness-95; }
    .btn-outline { @apply btn border border-outline text-ink hover:border-primary hover:text-primary; }
    .btn-ghost { @apply btn bg-ink/5 text-ink hover:bg-ink/10; }
    .btn-text { @apply btn px-3 text-primary hover:bg-primary/10; }

    /* ---- Cards ---- */
    .card { @apply rounded-2xl bg-surface-1 border border-outline/70 shadow-card; }
    .card-flat { @apply rounded-2xl bg-surface-2; }
    .chip { @apply inline-flex items-center gap-1 rounded-full bg-ink/5 px-3 py-1 text-xs font-medium text-muted; }
    .chip-primary { @apply inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary; }

    /* ---- Rail / poster (Netflix) ---- */
    .rail-track { @apply flex gap-3 overflow-x-auto pb-2 -mx-5 px-5 snap-x snap-mandatory scroll-pl-5; }
    .poster {
        @apply relative shrink-0 snap-start overflow-hidden rounded-xl bg-surface-2 border border-outline/60
               transition-transform duration-300 ease-out-expo hover:-translate-y-1 hover:shadow-e3;
    }
    .poster-16x9 { @apply w-[270px] aspect-video; }
    .poster-2x3  { @apply w-[150px] aspect-[2/3]; }

    /* ---- Bottom nav ---- */
    .tabbar {
        @apply fixed inset-x-0 bottom-0 z-40 border-t border-outline bg-surface/95 backdrop-blur
               supports-[backdrop-filter]:bg-surface/80;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tab { @apply flex flex-1 flex-col items-center justify-center gap-1 py-2 text-[11px] font-semibold text-muted transition-colors; }
    .tab-active { @apply text-primary; }

    /* ---- Forms (M3-ish) ---- */
    .field {
        @apply w-full rounded-xl border-outline bg-surface-1 text-ink placeholder-muted/70
               focus:border-primary focus:ring-2 focus:ring-primary/30;
    }
    .label { @apply block text-sm font-medium text-muted mb-1.5; }

    /* ---- Skeleton ---- */
    .skeleton { @apply relative overflow-hidden bg-surface-2 rounded-lg; }
    .skeleton::after {
        content: ''; @apply absolute inset-0;
        background: linear-gradient(90deg, transparent, rgb(var(--qr-ink) / .06), transparent);
        animation: qr-shimmer 1.4s infinite;
    }
    @keyframes qr-shimmer { 100% { transform: translateX(100%); } }

    /* ---- Admin nav ---- */
    .admin-link { @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted hover:bg-ink/5 hover:text-ink transition-colors; }
    .admin-link-active { @apply bg-primary/10 text-primary; }

    /* ---- Panduan Owner (guide prose) ---- */
    .g-toc-link { @apply flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-muted hover:bg-ink/5 hover:text-ink transition-colors; }
    .g-toc-active { @apply bg-primary/10 font-semibold text-primary; }
    .guide-prose { @apply text-[15px] leading-relaxed text-ink/90; }
    .guide-prose h2 { @apply mt-9 mb-3 text-xl font-extrabold tracking-tight text-ink; }
    .guide-prose h2:first-child { @apply mt-0; }
    .guide-prose h3 { @apply mt-6 mb-2 text-base font-bold text-ink; }
    .guide-prose p { @apply mb-3; }
    .guide-prose ul { @apply mb-4 ml-5 list-disc space-y-1.5 marker:text-primary/60; }
    .guide-prose ol { @apply mb-4 ml-5 list-decimal space-y-1.5 marker:text-muted; }
    .guide-prose a { @apply font-semibold text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary; }
    .guide-prose strong { @apply font-semibold text-ink; }
    .guide-prose code { @apply rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[13px] text-primary; }
    .guide-prose table { @apply mb-4 w-full overflow-hidden rounded-xl border border-outline/60 text-sm; }
    .guide-prose thead { @apply bg-ink/5; }
    .guide-prose th { @apply px-3 py-2 text-left font-semibold; }
    .guide-prose td { @apply border-t border-outline/50 px-3 py-2 align-top; }
    /* Callout boxes */
    .g-note  { @apply my-4 rounded-xl border border-outline/60 bg-surface-2 p-4 text-sm; }
    .g-tip   { @apply my-4 rounded-xl border border-primary/25 bg-primary/5 p-4 text-sm; }
    .g-warn  { @apply my-4 rounded-xl border border-amber/30 bg-amber/10 p-4 text-sm; }
    .g-step  { @apply mb-3 flex gap-3; }
    .g-step-n { @apply grid h-7 w-7 shrink-0 place-items-center rounded-full bg-primary/15 text-sm font-bold text-primary; }
    .g-flow  { @apply my-4 flex flex-wrap items-center gap-2 text-sm; }
    .g-flow-step { @apply rounded-lg border border-outline/60 bg-surface-2 px-3 py-1.5 font-medium; }

    /* ---- Pattern background (tekstur Islam halus) ---- */
    .surface-pattern { position: relative; }
    .surface-pattern::before {
        content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23F0562D' stroke-width='1'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3Cpath d='M30 12l18 18-18 18-18-18z'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 60px 60px;
    }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    /* Clearance tabbar (fixed) — !important agar tidak terkalahkan utility pb-* per-halaman. */
    .safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + 5.5rem) !important; }
    /* Zona media selalu gelap (Netflix immersive) terlepas dari theme */
    .cinema { --qr-ink: 245 242 238; --qr-muted: 180 175 170; color: rgb(var(--qr-ink)); }
}