/* ═══════════════════════════════════════════════════════════════
   FİYAT LİSTESİ — Design Tokens
   ───────────────────────────────────────────────────────────────
   Premium phone retail · Turkish red as character accent
   Foundations: surface · ink · accent · signal · motion · scale
   Every visible choice lives here. Edit token → ripple to every page.
   ═══════════════════════════════════════════════════════════════ */

:root {

    /* ─────────────────────────────────────────────
       1 · SURFACES
       Stack reads top-down: page → card → elevated → glass
       Dark variants (void/deep/elev) used for trustbar/announce
    ───────────────────────────────────────────── */
    --bg-page:          #f7f6f4;      /* warm-paper, not flat white */
    --bg-page-2:        #efeee9;      /* subtle band — sidebar bg, footer */
    --surface:          #ffffff;
    --surface-2:        #f4f4f7;      /* hover · subtle row · skel base */
    --surface-3:        #e7e7ee;      /* skel highlight · disabled */
    --surface-sunken:   #f9f9fb;      /* inside cards, before content */
    --surface-glass:    rgba(255, 255, 255, .68);
    --surface-glass-2:  rgba(255, 255, 255, .82);
    --surface-frosted:  rgba(247, 246, 244, .76);

    --bg-void:          #07070b;
    --bg-deep:          #0d0d14;
    --bg-elev:          #16161f;
    --bg-elev-2:        #1f1f2a;

    /* ─────────────────────────────────────────────
       2 · INK (text on light)
       Hand-tuned cool-warm grays — never pure neutral
    ───────────────────────────────────────────── */
    --ink:              #0a0a14;      /* display / strong */
    --ink-2:            #2e2e3e;      /* body */
    --ink-3:            #5a5a6e;      /* meta / label */
    --ink-4:            #8e8ea4;      /* hint / placeholder */
    --ink-5:            #c2c2cf;      /* divider strong */
    --ink-6:            #dcdce4;      /* divider quiet */

    --ink-on-dark:      #fafafd;
    --ink-on-dark-2:    #c4c4d6;
    --ink-on-dark-3:    #8b8ba3;
    --ink-on-dark-4:    #5e5e74;

    /* ─────────────────────────────────────────────
       3 · LINES
       Use line for borders, line-strong for emphasis edges
    ───────────────────────────────────────────── */
    --line:             rgba(10, 10, 20, .075);
    --line-strong:      rgba(10, 10, 20, .14);
    --line-bold:        rgba(10, 10, 20, .22);
    --line-dark:        rgba(255, 255, 255, .08);
    --line-dark-2:      rgba(255, 255, 255, .14);

    /* ─────────────────────────────────────────────
       4 · ACCENT — Turkish red
       Three-stop ladder + soft/mid/glow alpha layers
       Used on customer page; admin overrides to indigo
    ───────────────────────────────────────────── */
    --accent:           #e30a17;
    --accent-2:         #c10812;
    --accent-3:         #8a0510;
    --accent-deep:      #5e0309;
    --accent-tint:      #fff5f6;      /* nearly-white wash */
    --accent-soft:      rgba(227, 10, 23, .07);
    --accent-mid:       rgba(227, 10, 23, .16);
    --accent-strong:    rgba(227, 10, 23, .28);
    --accent-glow:      rgba(227, 10, 23, .32);

    --accent-grad:      linear-gradient(135deg, #e30a17 0%, #b80511 100%);
    --accent-grad-r:    linear-gradient(135deg, #b80511 0%, #e30a17 100%);
    --accent-grad-deep: linear-gradient(135deg, #c10812 0%, #5e0309 100%);
    --accent-sheen:     linear-gradient(115deg,
                            #e30a17 0%, #d9091a 35%,
                            #b80511 65%, #8a0510 100%);

    /* ─────────────────────────────────────────────
       5 · SECONDARY — Indigo (admin override)
    ───────────────────────────────────────────── */
    --indigo:           #5b5bf5;
    --indigo-2:         #7c3aed;
    --indigo-3:         #4338ca;
    --indigo-soft:      rgba(91, 91, 245, .09);
    --indigo-mid:       rgba(91, 91, 245, .18);
    --indigo-glow:      rgba(91, 91, 245, .32);
    --indigo-grad:      linear-gradient(135deg, #5b5bf5 0%, #7c3aed 100%);

    /* ─────────────────────────────────────────────
       6 · SIGNAL — positive / negative / warning / info
       Each: base · deep (text on light) · soft (fill bg)
    ───────────────────────────────────────────── */
    --positive:         #10b981;
    --positive-deep:    #047857;
    --positive-soft:    rgba(16, 185, 129, .10);
    --positive-mid:     rgba(16, 185, 129, .22);

    --negative:         #ef4444;
    --negative-deep:    #b91c1c;
    --negative-soft:    rgba(239, 68, 68, .10);
    --negative-mid:     rgba(239, 68, 68, .22);

    --warning:          #f59e0b;
    --warning-deep:     #b45309;
    --warning-soft:     rgba(245, 158, 11, .14);
    --warning-mid:      rgba(245, 158, 11, .26);

    --info:             #0ea5e9;
    --info-deep:        #0369a1;
    --info-soft:        rgba(14, 165, 233, .12);
    --info-mid:         rgba(14, 165, 233, .22);

    /* ─────────────────────────────────────────────
       7 · BRAND CUES (badges · dots · sidestripes)
    ───────────────────────────────────────────── */
    --brand-apple:      #1d1d1f;
    --brand-samsung:    #1428a0;
    --brand-xiaomi:     #ff6900;
    --brand-huawei:     #c9000c;
    --brand-oppo:       #00a040;
    --brand-vivo:       #415fff;
    --brand-realme:     #ffc915;
    --brand-honor:      #000a3c;
    --brand-tecno:      #0066ff;
    --brand-infinix:    #0050b3;
    --brand-default:    #6a6a7e;

    /* Harf paleti — bilinmeyen markalar ilk harfinden (data-letter) renk alır.
       Tek değer; soft/glow/açık varyantlar color-mix ile türetilir. */
    --lt-a: hsl(  0 62% 48%);
    --lt-b: hsl( 14 62% 48%);
    --lt-c: hsl( 28 64% 46%);
    --lt-d: hsl( 42 66% 44%);
    --lt-e: hsl( 55 60% 42%);
    --lt-f: hsl( 69 52% 40%);
    --lt-g: hsl( 83 50% 40%);
    --lt-h: hsl( 97 48% 40%);
    --lt-i: hsl(111 48% 40%);
    --lt-j: hsl(125 50% 38%);
    --lt-k: hsl(138 52% 38%);
    --lt-l: hsl(152 56% 38%);
    --lt-m: hsl(166 60% 38%);
    --lt-n: hsl(180 58% 38%);
    --lt-o: hsl(194 62% 42%);
    --lt-p: hsl(208 64% 48%);
    --lt-q: hsl(222 64% 52%);
    --lt-r: hsl(236 60% 56%);
    --lt-s: hsl(249 56% 56%);
    --lt-t: hsl(263 54% 56%);
    --lt-u: hsl(277 52% 54%);
    --lt-v: hsl(291 52% 52%);
    --lt-w: hsl(305 54% 50%);
    --lt-x: hsl(318 58% 50%);
    --lt-y: hsl(332 60% 50%);
    --lt-z: hsl(346 62% 50%);

    /* ─────────────────────────────────────────────
       8 · RADIUS
       Sized to feel — never random
    ───────────────────────────────────────────── */
    --r-xs:             6px;
    --r-sm:             10px;
    --r-md:             14px;
    --r-lg:             20px;
    --r-xl:             28px;
    --r-2xl:            36px;
    --r-3xl:            44px;
    --r-pill:           999px;
    --r-circle:         50%;

    /* ─────────────────────────────────────────────
       9 · SPACING LADDER (4px base)
       Use s-1 .. s-12 for vertical rhythm
    ───────────────────────────────────────────── */
    --s-0:              0;
    --s-px:             1px;
    --s-half:           2px;
    --s-1:              4px;
    --s-2:              8px;
    --s-3:              12px;
    --s-4:              16px;
    --s-5:              20px;
    --s-6:              24px;
    --s-7:              32px;
    --s-8:              40px;
    --s-9:              48px;
    --s-10:             64px;
    --s-11:             80px;
    --s-12:             96px;
    --s-13:             128px;

    /* ─────────────────────────────────────────────
       10 · SHADOW LADDER
       Multi-layer (ambient + key) per Material/Apple guidance
       Never use a single rgba shadow — always paired.
    ───────────────────────────────────────────── */
    --shadow-xs:        0 1px 2px rgba(10, 10, 20, .04);
    --shadow-sm:        0 2px 4px rgba(10, 10, 20, .05),
                        0 1px 2px rgba(10, 10, 20, .04);
    --shadow-md:        0 4px 12px rgba(10, 10, 20, .07),
                        0 2px 4px rgba(10, 10, 20, .04);
    --shadow-lg:        0 12px 32px rgba(10, 10, 20, .10),
                        0 4px 10px rgba(10, 10, 20, .05);
    --shadow-xl:        0 24px 56px rgba(10, 10, 20, .13),
                        0 8px 18px rgba(10, 10, 20, .06);
    --shadow-2xl:       0 32px 80px rgba(10, 10, 20, .18),
                        0 12px 26px rgba(10, 10, 20, .08);
    --shadow-pop:       0 36px 96px rgba(10, 10, 20, .24),
                        0 14px 28px rgba(10, 10, 20, .10);

    /* Glow variants — for focus / hover-accent */
    --glow-accent:      0 0 0 4px var(--accent-soft),
                        0 10px 28px var(--accent-glow);
    --glow-accent-sm:   0 0 0 3px var(--accent-soft);
    --glow-indigo:      0 0 0 4px var(--indigo-soft),
                        0 10px 28px var(--indigo-glow);
    --glow-positive:    0 0 0 3px var(--positive-soft);
    --glow-negative:    0 0 0 3px var(--negative-soft);

    /* Inner highlights for raised surfaces */
    --inset-top:        inset 0 1px 0 rgba(255, 255, 255, .65);
    --inset-bot:        inset 0 -1px 0 rgba(10, 10, 20, .04);
    --inset-frame:      inset 0 0 0 1px rgba(255, 255, 255, .04);

    /* Card lift recipe — used on hover everywhere */
    --lift-md:          0 20px 40px -12px rgba(10, 10, 20, .18),
                        0 8px 16px -6px rgba(10, 10, 20, .08);
    --lift-lg:          0 30px 60px -16px rgba(10, 10, 20, .22),
                        0 12px 24px -8px rgba(10, 10, 20, .10);

    /* ─────────────────────────────────────────────
       11 · TYPOGRAPHY
    ───────────────────────────────────────────── */
    --font-display:     'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type scale — display sizes */
    --fs-display-xl:    clamp(36px, 5.6vw, 52px);
    --fs-display-lg:    clamp(28px, 3.6vw, 36px);
    --fs-display-md:    clamp(22px, 2.6vw, 28px);
    --fs-display-sm:    clamp(18px, 1.8vw, 20px);

    --fs-body-lg:       16px;
    --fs-body:          15px;
    --fs-body-sm:       13.5px;
    --fs-caption:       12.5px;
    --fs-micro:         11px;
    --fs-eyebrow:       10.5px;

    /* Line-heights */
    --lh-tight:         1.15;
    --lh-snug:          1.3;
    --lh-normal:        1.5;
    --lh-relaxed:       1.65;

    /* Letter-spacing presets */
    --ls-display:       -.6px;
    --ls-tight:         -.3px;
    --ls-normal:        0;
    --ls-wide:          .4px;
    --ls-eyebrow:       1.6px;
    --ls-eyebrow-strong:2.2px;

    /* ─────────────────────────────────────────────
       12 · MOTION
       Eases curated. Durations stepped. Compose: --dur-N + --ease-X
    ───────────────────────────────────────────── */
    --ease-out:         cubic-bezier(.16, 1, .3, 1);            /* default ease-out */
    --ease-in-out:      cubic-bezier(.65, 0, .35, 1);           /* page transitions */
    --ease-spring:      cubic-bezier(.34, 1.56, .64, 1);        /* squishy bounce */
    --ease-snap:        cubic-bezier(.5, .8, .3, 1);            /* crisp pop */
    --ease-glide:       cubic-bezier(.22, .61, .36, 1);         /* soft long motion */

    --dur-0:            0ms;
    --dur-1:            120ms;
    --dur-2:            220ms;
    --dur-3:            360ms;
    --dur-4:            520ms;
    --dur-5:            780ms;
    --dur-orb:          22s;          /* slow ambient drift */

    /* ─────────────────────────────────────────────
       13 · LAYOUT
    ───────────────────────────────────────────── */
    --container:        1280px;
    --container-wide:   1440px;
    --container-narrow: 760px;
    --container-page:   1180px;

    --header-h:         104px;
    --header-h-md:      84px;
    --header-h-sm:      68px;

    --sidebar-w:        272px;

    /* ─────────────────────────────────────────────
       14 · Z-INDEX LADDER
    ───────────────────────────────────────────── */
    --z-base:           0;
    --z-rise:           10;
    --z-sticky:         100;
    --z-overlay:        1000;
    --z-drawer:         1050;
    --z-modal:          1100;
    --z-toast:          1200;
    --z-tooltip:        1300;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES (tied to tokens)
   ═══════════════════════════════════════════════════════════════ */

/* Tabular numerals — for prices, counts, timers */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Display font + tracking */
.display { font-family: var(--font-display); letter-spacing: var(--ls-display); }

/* Eyebrow label — mono uppercase */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow-strong);
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Brand color class (replaces inline style) */
.bd-default        { background: var(--brand-default); }
.bd-apple          { background: var(--brand-apple); }
.bd-samsung        { background: var(--brand-samsung); }
.bd-xiaomi         { background: var(--brand-xiaomi); }
.bd-huawei         { background: var(--brand-huawei); }
.bd-oppo           { background: var(--brand-oppo); }
.bd-vivo           { background: var(--brand-vivo); }
.bd-realme         { background: var(--brand-realme); }
.bd-honor          { background: var(--brand-honor); }
.bd-tecno          { background: var(--brand-tecno); }
.bd-infinix        { background: var(--brand-infinix); }
.bd-casper         { background: var(--brand-default); }
.bd-general-mobile { background: var(--brand-default); }
.bd-accent         { background: var(--accent); }

/* Brand color as foreground (for tinted gradients) */
.bf-apple    { color: var(--brand-apple); }
.bf-samsung  { color: var(--brand-samsung); }
.bf-xiaomi   { color: var(--brand-xiaomi); }
.bf-huawei   { color: var(--brand-huawei); }

/* Sheen sweep — used as ::before overlay on premium surfaces */
.sheen {
    position: relative;
    overflow: hidden;
}
.sheen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, .12) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform var(--dur-5) var(--ease-glide);
    pointer-events: none;
}
.sheen:hover::before { transform: translateX(100%); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}