/* =======================================================================
   TILBE HOME - PREMIUM DESIGN TOKEN SYSTEM v5.0
   =======================================================================

   tilbehome.com | E-Ticaret Premium Tasarim Altyapisi
   ~2125 TOKEN - W3C Design Token Standard Uyumlu
   Referans: Shopify Polaris, IBM Carbon, Material Design 3

   MIMARI: 3 Katmanli Token Yapisi
   KATMAN 1: PRIMITIVE (Ham Palet)
   KATMAN 2: SEMANTIC (Anlam Katmani)
   KATMAN 3: COMPONENT (Bilesen Katmani)

   MARKA KIMLIGI (v5)
   Primary : Pure Black (#111111)
   Accent  : Vibrant Orange (#FF6B2C)

   ======================================================================= */


:root {


/* =====================================================================
   KATMAN 1: PRIMITIVE TOKENS - Ham Renk Paleti
   ===================================================================== */


/* -- INK/BLACK - Yeni Primary Marka (v5) ------------------------------ */
--th-ink-50:    #F5F5F5;    /* Hover bg acik            - 1.2:1  */
--th-ink-100:   #E8E8E8;    /* Disabled bg              - 1.4:1  */
--th-ink-200:   #D1D1D1;    /* Disabled border          - 1.7:1  */
--th-ink-300:   #B0B0B0;    /* Placeholder, muted icon  - 2.3:1  */
--th-ink-400:   #888888;    /* Secondary icon, helper   - 3.5:1  */
--th-ink-500:   #555555;    /* Secondary text           - 7.5:1 AA */
--th-ink-600:   #3D3D3D;    /* Body text koyu           - 10.5:1 AA */
--th-ink-700:   #2A2A2A;    /* Strong heading           - 13.9:1 AA */
--th-ink-800:   #1A1A1A;    /* Primary heading          - 16.3:1 AA */
--th-ink-900:   #111111;    /* NAV BG, primary metin    - 18.4:1 AAA */
--th-ink-950:   #0A0A0A;    /* Ultra koyu overlay       - 19.5:1 AAA */


/* -- ORANGE - Accent / CTA (v5: #FF6B2C bazli) ----------------------- */
--th-orange-50:  #FFF4ED;    /* CTA contrast bg          - 1.1:1 */
--th-orange-100: #FFE4D2;    /* Hover bg, badge bg light - 1.2:1 */
--th-orange-200: #FFC9A6;    /* Active bg, selected brd  - 1.4:1 */
--th-orange-300: #FFA872;    /* Emphasis, progress fill  - 1.8:1 */
--th-orange-400: #FF8A45;    /* Hover variant            - 2.3:1 */
--th-orange-500: #FF6B2C;    /* ANA CTA - Sepete Ekle   - 3.2:1 large */
--th-orange-600: #E55A1F;    /* CTA hover               - 4.1:1 AA lg */
--th-orange-700: #C44A18;    /* CTA active / pressed    - 5.5:1 AA */
--th-orange-800: #9A3A13;    /* Dark text on orange bg  - 7.8:1 AA */
--th-orange-900: #7A2E0F;    /* Badge text dark         - 9.8:1 AA */
--th-orange-950: #4D1C08;    /* Ultra koyu accent       - 14.5:1 AAA */


/* -- NEUTRAL - Sicak Gri (v5: soguk->sicak gecis) -------------------- */
--th-neutral-0:   #FFFFFF;
--th-neutral-50:  #FDFCFA;    /* Sicak sayfa bg (krem) */
--th-neutral-100: #F5F4F1;
--th-neutral-150: #EDECE8;
--th-neutral-200: #E5E3DF;    /* Default border */
--th-neutral-250: #DBD9D4;
--th-neutral-300: #CFCDC7;
--th-neutral-350: #BFBDB6;
--th-neutral-400: #A5A39C;    /* Placeholder */
--th-neutral-450: #908E87;
--th-neutral-500: #7A7872;    /* Muted text */
--th-neutral-550: #686661;
--th-neutral-600: #565451;    /* Secondary text */
--th-neutral-650: #464441;
--th-neutral-700: #383632;    /* Body text */
--th-neutral-750: #2C2A27;
--th-neutral-800: #211F1D;
--th-neutral-850: #191714;
--th-neutral-900: #121110;
--th-neutral-950: #080808;


/* -- RED - Tehlike / Hata / Indirim ----------------------------------- */
--th-red-50:  #FEF2F2;
--th-red-100: #FEE2E2;
--th-red-200: #FECACA;
--th-red-300: #FCA5A5;
--th-red-400: #F87171;
--th-red-500: #EF4444;
--th-red-600: #DC2626;
--th-red-700: #B91C1C;
--th-red-800: #991B1B;
--th-red-900: #7F1D1D;
--th-red-950: #450A0A;


/* -- AMBER - Uyari / Dikkat / Stok Azaliyor --------------------------- */
--th-amber-50:  #FFFBEB;
--th-amber-100: #FEF3C7;
--th-amber-200: #FDE68A;
--th-amber-300: #FCD34D;
--th-amber-400: #FBBF24;
--th-amber-500: #F59E0B;
--th-amber-600: #D97706;
--th-amber-700: #B45309;
--th-amber-800: #92400E;
--th-amber-900: #78350F;
--th-amber-950: #451A03;


/* -- EMERALD - Basari / Onay / Ucretsiz Kargo ------------------------- */
--th-emerald-50:  #ECFDF5;
--th-emerald-100: #D1FAE5;
--th-emerald-200: #A7F3D0;
--th-emerald-300: #6EE7B7;
--th-emerald-400: #34D399;
--th-emerald-500: #10B981;
--th-emerald-600: #059669;
--th-emerald-700: #047857;
--th-emerald-800: #065F46;
--th-emerald-900: #064E3B;
--th-emerald-950: #022C22;


/* -- BLUE - Bilgi / Link / Yeni Urun ---------------------------------- */
--th-blue-50:  #EFF6FF;
--th-blue-100: #DBEAFE;
--th-blue-200: #BFDBFE;
--th-blue-300: #93C5FD;
--th-blue-400: #60A5FA;
--th-blue-500: #3B82F6;
--th-blue-600: #2563EB;
--th-blue-700: #1D4ED8;
--th-blue-800: #1E40AF;
--th-blue-900: #1E3A8A;
--th-blue-950: #172554;


/* -- ROSE - Favori / Kalp / Ozel Gun ---------------------------------- */
--th-rose-50:  #FFF1F2;
--th-rose-100: #FFE4E6;
--th-rose-200: #FECDD3;
--th-rose-300: #FDA4AF;
--th-rose-400: #FB7185;
--th-rose-500: #F43F5E;
--th-rose-600: #E11D48;
--th-rose-700: #BE123C;
--th-rose-800: #9F1239;
--th-rose-900: #881337;
--th-rose-950: #4C0519;


/* -- PURPLE - Flash Sale / Sinirli / Luks ----------------------------- */
--th-purple-50:  #FAF5FF;
--th-purple-100: #F3E8FF;
--th-purple-200: #E9D5FF;
--th-purple-300: #D8B4FE;
--th-purple-400: #C084FC;
--th-purple-500: #A855F7;
--th-purple-600: #9333EA;
--th-purple-700: #7E22CE;
--th-purple-800: #6B21A8;
--th-purple-900: #581C87;
--th-purple-950: #3B0764;


/* -- GOLD - Premium / Rating Yildiz / Odul ---------------------------- */
--th-gold-50:  #FEFCE8;
--th-gold-100: #FEF9C3;
--th-gold-200: #FEF08A;
--th-gold-300: #FDE047;
--th-gold-400: #FACC15;
--th-gold-500: #EAB308;
--th-gold-600: #CA8A04;
--th-gold-700: #A16207;
--th-gold-800: #854D0E;
--th-gold-900: #713F12;
--th-gold-950: #422006;


/* -- GREEN - Kucultulmus (v5: 11->5 ton, dogal urun badge) ----------- */
--th-green-50:  #E8F5EE;
--th-green-100: #C6E7D4;
--th-green-200: #9FD4B5;
--th-green-500: #14613A;
--th-green-700: #0F4D2E;
--th-green-800: #0B3D24;
--th-green-900: #08301C;


/* -- TEAL - Kucultulmus (v5: 11->5 ton, premium/VIP) ----------------- */
--th-teal-50:  #F0FDFA;
--th-teal-100: #CCFBF1;
--th-teal-200: #99F6E4;
--th-teal-500: #14B8A6;
--th-teal-600: #0D9488;
--th-teal-700: #0F766E;
--th-teal-900: #134E4A;


/* -- INDIGO - Kucultulmus (v5: 11->5 ton, B2B/kurumsal) -------------- */
--th-indigo-50:  #EEF2FF;
--th-indigo-200: #C7D2FE;
--th-indigo-500: #6366F1;
--th-indigo-700: #4338CA;
--th-indigo-900: #312E81;


/* -- CYAN - Kucultulmus (v5: 11->5 ton, kargo takip) ----------------- */
--th-cyan-50:  #ECFEFF;
--th-cyan-200: #A5F3FC;
--th-cyan-500: #06B6D4;
--th-cyan-600: #0891B2;
--th-cyan-700: #0E7490;
--th-cyan-900: #164E63;


/* -- LIME - Kucultulmus (v5: 11->5 ton, organik badge) --------------- */
--th-lime-50:  #F7FEE7;
--th-lime-200: #D9F99D;
--th-lime-500: #84CC16;
--th-lime-700: #4D7C0F;
--th-lime-900: #365314;


/* -- SLATE - Kucultulmus (v5: 11->5 ton, footer dark/code) ----------- */
--th-slate-50:  #F8FAFC;
--th-slate-200: #E2E8F0;
--th-slate-500: #64748B;
--th-slate-600: #475569;
--th-slate-700: #334155;
--th-slate-800: #1E293B;
--th-slate-900: #0F172A;



/* =====================================================================
   KATMAN 2: SEMANTIC TOKENS - Anlam Katmani
   ===================================================================== */


/* -- BRAND (Marka Kimligi = Ink/Black) -------------------------------- */
--th-color-brand:            var(--th-ink-900);
--th-color-brand-hover:      var(--th-ink-800);
--th-color-brand-active:     var(--th-ink-950);
--th-color-brand-subtle:     var(--th-ink-50);
--th-color-brand-muted:      var(--th-ink-100);
--th-color-brand-emphasis:   var(--th-ink-700);
--th-color-brand-border:     var(--th-ink-200);
--th-color-brand-border-strong: var(--th-ink-300);
--th-color-brand-text:       var(--th-ink-900);
--th-color-brand-on:         var(--th-neutral-0);


/* -- PRIMARY (Ana Aksiyon = Brand alias) ------------------------------ */
--th-color-primary:            var(--th-color-brand);
--th-color-primary-hover:      var(--th-color-brand-hover);
--th-color-primary-active:     var(--th-color-brand-active);
--th-color-primary-subtle:     var(--th-color-brand-subtle);
--th-color-primary-muted:      var(--th-color-brand-muted);
--th-color-primary-emphasis:   var(--th-color-brand-emphasis);
--th-color-primary-border:     var(--th-color-brand-border);
--th-color-primary-on:         var(--th-color-brand-on);
--th-color-primary-dark:       var(--th-ink-950);


/* -- ACCENT (CTA = Orange) -------------------------------------------- */
--th-color-accent:             var(--th-orange-500);
--th-color-accent-hover:       var(--th-orange-600);
--th-color-accent-active:      var(--th-orange-700);
--th-color-accent-subtle:      var(--th-orange-50);
--th-color-accent-muted:       var(--th-orange-100);
--th-color-accent-emphasis:    var(--th-orange-400);
--th-color-accent-border:      var(--th-orange-200);
--th-color-accent-on:          var(--th-neutral-0);
--th-color-accent-bg:          var(--th-orange-50);
--th-color-accent-dark:        var(--th-orange-800);
--th-accent-bg:                var(--th-color-accent-bg);
--th-accent-light:             var(--th-orange-50);


/* -- SUCCESS (Emerald) ------------------------------------------------ */
--th-color-success:            var(--th-emerald-600);
--th-color-success-hover:      var(--th-emerald-700);
--th-color-success-active:     var(--th-emerald-800);
--th-color-success-subtle:     var(--th-emerald-50);
--th-color-success-muted:      var(--th-emerald-100);
--th-color-success-emphasis:   var(--th-emerald-400);
--th-color-success-border:     var(--th-emerald-200);
--th-color-success-on:         var(--th-neutral-0);
--th-color-success-bg:         var(--th-emerald-50);
--th-color-success-dark:       var(--th-emerald-800);
--th-success-bg:               var(--th-color-success-bg);
--th-color-success-accent:     var(--th-emerald-500);


/* -- DANGER (Red) ----------------------------------------------------- */
--th-color-danger:             var(--th-red-500);
--th-color-danger-hover:       var(--th-red-600);
--th-color-danger-active:      var(--th-red-700);
--th-color-danger-subtle:      var(--th-red-50);
--th-color-danger-muted:       var(--th-red-100);
--th-color-danger-emphasis:    var(--th-red-400);
--th-color-danger-border:      var(--th-red-200);
--th-color-danger-on:          var(--th-neutral-0);
--th-color-danger-bg:          var(--th-red-50);
--th-color-danger-dark:        var(--th-red-800);
--th-color-error-hot:          var(--th-red-600);


/* -- WARNING (Amber) -------------------------------------------------- */
--th-color-warning:            var(--th-amber-500);
--th-color-warning-hover:      var(--th-amber-600);
--th-color-warning-active:     var(--th-amber-700);
--th-color-warning-subtle:     var(--th-amber-50);
--th-color-warning-muted:      var(--th-amber-100);
--th-color-warning-emphasis:   var(--th-amber-400);
--th-color-warning-border:     var(--th-amber-200);
--th-color-warning-on:         var(--th-neutral-0);
--th-color-warning-bg:         var(--th-amber-50);
--th-color-warning-dark:       var(--th-amber-800);


/* -- INFO (Blue) ------------------------------------------------------ */
--th-color-info:               var(--th-blue-500);
--th-color-info-hover:         var(--th-blue-600);
--th-color-info-active:        var(--th-blue-700);
--th-color-info-subtle:        var(--th-blue-50);
--th-color-info-muted:         var(--th-blue-100);
--th-color-info-emphasis:      var(--th-blue-400);
--th-color-info-border:        var(--th-blue-200);
--th-color-info-on:            var(--th-neutral-0);
--th-color-info-bg:            var(--th-blue-50);
--th-color-info-dark:          var(--th-blue-800);


/* -- TEXT (Metin Renkleri - 28 token) --------------------------------- */
/* Temel */
--th-color-text:               var(--th-ink-800);
--th-color-text-secondary:     var(--th-neutral-700);
--th-color-text-tertiary:      var(--th-neutral-600);
--th-color-text-muted:         var(--th-neutral-500);
--th-color-text-caption:       var(--th-neutral-450);
--th-color-text-disabled:      var(--th-neutral-300);
--th-color-text-placeholder:   var(--th-neutral-400);
/* Inverse */
--th-color-text-inverse:       var(--th-neutral-0);
--th-color-text-inverse-muted: rgba(255, 255, 255, 0.7);
--th-color-text-inverse-subtle: rgba(255, 255, 255, 0.5);
/* Link */
--th-color-text-link:          var(--th-blue-600);
--th-color-text-link-hover:    var(--th-blue-700);
--th-color-text-link-visited:  var(--th-purple-600);
--th-color-text-link-active:   var(--th-blue-800);
/* Fiyat */
--th-color-text-price:         var(--th-ink-800);
--th-color-text-price-sale:    var(--th-red-600);
--th-color-text-price-old:     var(--th-neutral-400);
--th-color-text-price-installment: var(--th-neutral-500);
--th-color-text-discount:      var(--th-red-600);
/* Marka / On */
--th-color-text-brand:         var(--th-color-brand);
--th-color-text-accent:        var(--th-orange-600);
--th-color-text-on-primary:    var(--th-neutral-0);
--th-color-text-on-accent:     var(--th-neutral-0);
--th-color-text-on-dark:       var(--th-neutral-100);
--th-color-text-on-success:    var(--th-neutral-0);
/* Semantic */
--th-color-text-success:       var(--th-emerald-700);
--th-color-text-danger:        var(--th-red-700);
--th-color-text-warning:       var(--th-amber-700);
--th-color-text-info:          var(--th-blue-700);
/* Compat (v4) */
--th-color-text-light:         var(--th-neutral-400);
--th-color-text-default:       var(--th-color-text);
--th-color-text-primary:       var(--th-color-brand);
--th-color-text-faded:         var(--th-neutral-350);
--th-color-text-2:             var(--th-neutral-600);
--th-color-text-3:             var(--th-neutral-500);


/* -- BACKGROUND (Arka Plan - 32 token) -------------------------------- */
/* Notr */
--th-color-bg:                 var(--th-neutral-0);
--th-color-bg-page:            var(--th-neutral-50);
--th-color-bg-secondary:       var(--th-neutral-100);
--th-color-bg-tertiary:        var(--th-neutral-150);
--th-color-bg-muted:           var(--th-neutral-200);
--th-color-bg-strong:          var(--th-neutral-300);
--th-color-bg-inverse:         var(--th-ink-900);
--th-color-bg-inverse-subtle:  var(--th-ink-800);
--th-color-bg-hover:           var(--th-neutral-100);
--th-color-bg-active:          var(--th-neutral-150);
--th-color-bg-disabled:        var(--th-neutral-100);
/* Overlay */
--th-color-bg-overlay:         rgba(0, 0, 0, 0.50);
--th-color-bg-overlay-light:   rgba(0, 0, 0, 0.30);
--th-color-bg-overlay-heavy:   rgba(0, 0, 0, 0.70);
--th-color-bg-scrim:           rgba(0, 0, 0, 0.05);
--th-color-bg-glass:           rgba(255, 255, 255, 0.85);
/* Skeleton */
--th-color-bg-skeleton:        var(--th-neutral-200);
--th-color-bg-skeleton-shine:  var(--th-neutral-100);
/* Secim / Vurgu */
--th-color-bg-highlight:       var(--th-amber-50);
--th-color-bg-selected:        var(--th-color-accent-subtle);
/* Semantic */
--th-color-bg-accent:          var(--th-orange-50);
--th-color-bg-success:         var(--th-emerald-50);
--th-color-bg-danger:          var(--th-red-50);
--th-color-bg-warning:         var(--th-amber-50);
--th-color-bg-info:            var(--th-blue-50);
/* Branded */
--th-color-bg-branded:         var(--th-ink-900);
--th-color-bg-branded-subtle:  var(--th-ink-50);
/* Compat (v4) */
--th-color-bg-primary:         var(--th-neutral-0);
--th-color-bg-soft:            var(--th-neutral-50);
--th-color-bg-subtle:          var(--th-neutral-100);
--th-color-bg-wash:            var(--th-neutral-50);
--th-color-surface:            var(--th-neutral-0);
/* Overlay compat */
--th-overlay-light:            rgba(0, 0, 0, 0.30);
--th-overlay-white:            rgba(255, 255, 255, 0.85);


/* -- BORDER (Kenar Cizgileri - 24 token) ------------------------------ */
/* Notr */
--th-color-border:             var(--th-neutral-200);
--th-color-border-light:       var(--th-neutral-150);
--th-color-border-strong:      var(--th-neutral-300);
--th-color-border-heavy:       var(--th-neutral-400);
--th-color-border-hover:       var(--th-neutral-300);
--th-color-border-active:      var(--th-neutral-400);
--th-color-border-inverse:     var(--th-neutral-700);
--th-color-border-divider:     var(--th-neutral-150);
/* State */
--th-color-border-focus:       var(--th-color-primary);
--th-color-border-disabled:    var(--th-neutral-200);
--th-color-border-selected:    var(--th-color-primary);
/* Semantic */
--th-color-border-error:       var(--th-red-500);
--th-color-border-success:     var(--th-emerald-500);
--th-color-border-accent:      var(--th-orange-300);
--th-color-border-warning:     var(--th-amber-400);
--th-color-border-info:        var(--th-blue-300);
--th-color-border-brand:       var(--th-ink-300);
/* Ozel */
--th-color-border-glass:       rgba(255, 255, 255, 0.18);
--th-color-border-dark-subtle: rgba(255, 255, 255, 0.08);
--th-color-border-dark:        rgba(255, 255, 255, 0.15);
/* Compat (v4 - deprecated alias) */
--th-color-border-default:     var(--th-neutral-300);
--th-color-border-subtle:      var(--th-neutral-150);
--th-color-border-muted:       var(--th-neutral-200);
--th-color-border-medium:      var(--th-neutral-300);


/* -- SURFACE (Yuzey Katmanlari - 9 token) ----------------------------- */
--th-surface-base:             var(--th-neutral-0);
--th-surface-raised:           var(--th-neutral-0);
--th-surface-sunken:           var(--th-neutral-100);
--th-surface-elevated:         var(--th-neutral-0);
--th-surface-nested:           var(--th-neutral-100);
--th-surface-glass:            rgba(255, 255, 255, 0.85);
--th-surface-dark:             var(--th-ink-900);
--th-surface-dark-raised:      var(--th-ink-800);
--th-surface-dark-nested:      var(--th-ink-700);
--th-surface-overlay:          var(--th-neutral-0);
--th-surface-inset:            var(--th-neutral-100);
--th-color-surface-dark:       var(--th-slate-700);


/* -- MISC SEMANTIC ---------------------------------------------------- */
--th-color-rating-star:        var(--th-gold-400);
--th-color-primary-ring:       rgba(17, 17, 17, 0.1);
--th-color-whatsapp:           #25D366;
--th-color-selection-bg:       var(--th-orange-100);



/* =====================================================================
   TYPOGRAPHY SYSTEM - Tipografi
   ===================================================================== */

/* -- Font Family -- */
--th-font-primary:       'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--th-font-display:       'Poppins', system-ui, sans-serif;
--th-font-mono:          'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace;

/* -- Font Size (Major Third - 1.25 ratio) -- */
--th-text-2xs:     10px;
--th-text-xs:      11px;
--th-text-xs-plus: 12px;
--th-text-sm:      13px;
--th-text-base:    14px;
--th-text-base-plus: 15px;
--th-text-md:      16px;
--th-text-lg:      18px;
--th-text-xl:      20px;
--th-text-2xl:     24px;
--th-text-3xl:     30px;
--th-text-4xl:     36px;
--th-text-5xl:     48px;
--th-text-6xl:     60px;
--th-text-7xl:     72px;

/* Compat aliases (v4 naming) */
--th-font-size-sm:    var(--th-text-sm);
--th-font-size-lg:    var(--th-text-lg);
--th-font-size-xl:    var(--th-text-xl);

/* -- Font Weight -- */
--th-font-thin:        100;
--th-font-extralight:  200;
--th-font-light:       300;
--th-font-regular:     400;
--th-font-medium:      500;
--th-font-semibold:    600;
--th-font-bold:        700;
--th-font-extrabold:   800;
--th-font-black:       900;

/* -- Line Height -- */
--th-leading-none:     1;
--th-leading-tight:    1.25;
--th-leading-snug:     1.375;
--th-leading-normal:   1.5;
--th-leading-relaxed:  1.625;
--th-leading-loose:    2;

/* -- Letter Spacing -- */
--th-tracking-tighter:   -0.05em;
--th-tracking-tight:     -0.025em;
--th-tracking-normal:    0em;
--th-tracking-wide:      0.025em;
--th-tracking-wider:     0.05em;
--th-tracking-widest:    0.1em;


/* -- Typography Composite Recipes (v5 - YENI) -- */

/* Display */
--th-type-display-2xl-size:     48px;
--th-type-display-2xl-height:   1.1;
--th-type-display-2xl-weight:   700;
--th-type-display-2xl-spacing:  -0.02em;
--th-type-display-xl-size:      36px;
--th-type-display-xl-height:    1.15;
--th-type-display-xl-weight:    700;
--th-type-display-xl-spacing:   -0.015em;
--th-type-display-lg-size:      30px;
--th-type-display-lg-height:    1.2;
--th-type-display-lg-weight:    700;
--th-type-display-lg-spacing:   -0.01em;

/* Heading */
--th-type-h1-size:    24px;
--th-type-h1-height:  1.25;
--th-type-h1-weight:  700;
--th-type-h1-spacing: -0.01em;
--th-type-h2-size:    20px;
--th-type-h2-height:  1.3;
--th-type-h2-weight:  600;
--th-type-h2-spacing: 0;
--th-type-h3-size:    18px;
--th-type-h3-height:  1.35;
--th-type-h3-weight:  600;
--th-type-h4-size:    16px;
--th-type-h4-height:  1.4;
--th-type-h4-weight:  600;

/* Body */
--th-type-body-lg-size:    16px;
--th-type-body-lg-height:  1.6;
--th-type-body-lg-weight:  400;
--th-type-body-md-size:    14px;
--th-type-body-md-height:  1.5;
--th-type-body-md-weight:  400;
--th-type-body-sm-size:    13px;
--th-type-body-sm-height:  1.45;
--th-type-body-sm-weight:  400;

/* UI / Utility */
--th-type-label-size:       13px;
--th-type-label-weight:     500;
--th-type-label-sm-size:    11px;
--th-type-label-sm-weight:  500;
--th-type-caption-size:     12px;
--th-type-caption-height:   1.35;
--th-type-caption-sm-size:  11px;
--th-type-overline-size:    11px;
--th-type-overline-weight:  600;
--th-type-overline-spacing: 0.06em;
--th-type-overline-transform: uppercase;

/* Fiyat */
--th-type-price-xl-size:    28px;
--th-type-price-xl-weight:  700;
--th-type-price-lg-size:    24px;
--th-type-price-lg-weight:  700;
--th-type-price-md-size:    16px;
--th-type-price-md-weight:  700;
--th-type-price-sm-size:    13px;
--th-type-price-sm-weight:  600;

/* Badge */
--th-type-badge-size:       10px;
--th-type-badge-weight:     700;
--th-type-badge-spacing:    0.04em;
--th-type-badge-transform:  uppercase;


/* -- Text Decoration & Truncation (v5 - YENI) -- */
--th-text-decoration-none:          none;
--th-text-decoration-underline:     underline;
--th-text-decoration-strikethrough: line-through;
--th-text-underline-offset:         0.15em;
--th-text-line-clamp-1:             1;
--th-text-line-clamp-2:             2;
--th-text-line-clamp-3:             3;
--th-text-truncate:                 ellipsis;
--th-text-word-break:               break-word;
--th-text-hyphens:                  auto;



/* =====================================================================
   SPACING SYSTEM - Aralik (4px tabanli)
   ===================================================================== */

/* -- Primitive Spacing -- */
--th-space-0:      0;
--th-space-px:     1px;
--th-space-0-5:    2px;
--th-space-1:      4px;
--th-space-1-5:    6px;
--th-space-2:      8px;
--th-space-2-5:    10px;
--th-space-3:      12px;
--th-space-3-5:    14px;
--th-space-4:      16px;
--th-space-5:      20px;
--th-space-6:      24px;
--th-space-7:      28px;
--th-space-8:      32px;
--th-space-9:      36px;
--th-space-10:     40px;
--th-space-11:     44px;
--th-space-12:     48px;
--th-space-14:     56px;
--th-space-16:     64px;
--th-space-18:     72px;
--th-space-20:     80px;
--th-space-24:     96px;
--th-space-28:     112px;
--th-space-32:     128px;
--th-space-36:     144px;
--th-space-40:     160px;
--th-space-44:     176px;
--th-space-48:     192px;
--th-space-56:     224px;
--th-space-64:     256px;
--th-space-72:     288px;
--th-space-80:     320px;
--th-space-96:     384px;

/* -- Semantic Spacing (v5 - YENI) -- */

/* Inline gap (yatay) */
--th-gap-inline-2xs:    2px;
--th-gap-inline-xs:     4px;
--th-gap-inline-sm:     8px;
--th-gap-inline-md:     12px;
--th-gap-inline-lg:     16px;
--th-gap-inline-xl:     24px;

/* Stack gap (dikey) */
--th-gap-stack-2xs:     2px;
--th-gap-stack-xs:      4px;
--th-gap-stack-sm:      6px;
--th-gap-stack-md:      8px;
--th-gap-stack-lg:      16px;
--th-gap-stack-xl:      24px;
--th-gap-stack-2xl:     32px;

/* Inset (ic padding) */
--th-inset-2xs:         2px;
--th-inset-xs:          4px;
--th-inset-sm:          8px;
--th-inset-md:          12px;
--th-inset-lg:          16px;
--th-inset-xl:          20px;
--th-inset-2xl:         24px;
--th-inset-3xl:         32px;

/* Section gap */
--th-section-gap-sm:    24px;
--th-section-gap-md:    32px;
--th-section-gap-lg:    48px;
--th-section-gap-xl:    64px;
--th-section-gap-2xl:   80px;
--th-section-gap-3xl:   96px;

/* Page gutter */
--th-page-gutter-xs:    12px;
--th-page-gutter-sm:    16px;
--th-page-gutter-md:    24px;
--th-page-gutter-lg:    32px;
--th-page-gutter-xl:    40px;

/* -- Negative Spacing (v5 - YENI) -- */
--th-space-n-1:    -4px;
--th-space-n-2:    -8px;
--th-space-n-3:    -12px;
--th-space-n-4:    -16px;
--th-space-n-6:    -24px;

/* -- Grid Gap (v5 - YENI) -- */
--th-grid-gap-xs:       4px;
--th-grid-gap-sm:       8px;
--th-grid-gap-md:       12px;
--th-grid-gap-lg:       16px;
--th-grid-gap-xl:       24px;
--th-grid-gap-2xl:      32px;
--th-grid-row-gap-sm:   8px;
--th-grid-row-gap-lg:   16px;



/* =====================================================================
   BORDER / OUTLINE / DIVIDER / SHADOW / GLASS SYSTEM
   ===================================================================== */

/* -- Border Width (v5 - YENI) -- */
--th-border-width-0:           0;
--th-border-width-thin:        0.5px;
--th-border-width-default:     1px;
--th-border-width-medium:      1.5px;
--th-border-width-thick:       2px;
--th-border-width-heavy:       3px;
--th-border-width-xheavy:      4px;

/* -- Border Style (v5 - YENI) -- */
--th-border-style-solid:       solid;
--th-border-style-dashed:      dashed;
--th-border-style-dotted:      dotted;

/* -- Border Composite Presets (v5 - YENI) -- */
--th-border-none:              none;
--th-border-hairline:          0.5px solid var(--th-color-border-light);
--th-border-default:           1px solid var(--th-color-border);
--th-border-strong:            1px solid var(--th-color-border-strong);
--th-border-hover:             1px solid var(--th-color-border-hover);
--th-border-focus:             2px solid var(--th-color-border-focus);
--th-border-selected:          2px solid var(--th-color-accent);
--th-border-error:             1px solid var(--th-color-border-error);
--th-border-success:           1px solid var(--th-color-border-success);
--th-border-dashed:            1px dashed var(--th-color-border);
--th-border-accent:            2px solid var(--th-color-accent);
--th-border-brand:             3px solid var(--th-color-brand);
--th-border-glass:             0.5px solid rgba(255, 255, 255, 0.18);
--th-border-dark:              0.5px solid rgba(255, 255, 255, 0.1);

/* -- Divider (v5 - YENI) -- */
--th-divider-color:            var(--th-color-border-light);
--th-divider-color-strong:     var(--th-color-border);
--th-divider-color-inverse:    rgba(255, 255, 255, 0.08);
--th-divider-width:            1px;
--th-divider-width-thick:      2px;
--th-divider-style:            solid;
--th-divider-spacing:          var(--th-space-4);
--th-divider-spacing-lg:       var(--th-space-8);

/* -- Outline / Focus Ring -- */
--th-outline-width:            2px;
--th-outline-offset:           2px;
--th-outline-color:            var(--th-color-primary);
--th-outline-style:            solid;
--th-focus-ring:               0 0 0 2px var(--th-color-bg), 0 0 0 4px var(--th-color-primary);
--th-focus-ring-error:         0 0 0 2px var(--th-color-bg), 0 0 0 4px var(--th-color-danger);
--th-focus-ring-accent:        0 0 0 2px var(--th-color-bg), 0 0 0 4px var(--th-color-accent);
--th-focus-ring-inset:         inset 0 0 0 2px var(--th-color-primary);

/* -- Border Radius -- */
--th-radius-none:    0;
--th-radius-xs:      2px;
--th-radius-sm:      4px;
--th-radius-md:      6px;
--th-radius-lg:      8px;
--th-radius-xl:      12px;
--th-radius-2xl:     16px;
--th-radius-3xl:     24px;
--th-radius-4xl:     32px;
--th-radius-full:    9999px;
--th-radius-circle:  50%;
--th-radius-squircle: 30%;

/* -- Shadow System -- */
/* Notr */
--th-shadow-none:      0 0 0 0 transparent;
--th-shadow-xs:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
--th-shadow-sm:        0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
--th-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--th-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
--th-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
--th-shadow-2xl:       0 25px 50px -12px rgba(0, 0, 0, 0.20);
--th-shadow-inner:     inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
--th-shadow-inner-lg:  inset 0 4px 8px 0 rgba(0, 0, 0, 0.06);
/* Renkli (v5: yeni marka renkleriyle) */
--th-shadow-primary:      0 4px 14px rgba(17, 17, 17, 0.15);
--th-shadow-primary-lg:   0 8px 25px rgba(17, 17, 17, 0.20);
--th-shadow-accent:       0 4px 14px rgba(255, 107, 44, 0.25);
--th-shadow-accent-lg:    0 8px 25px rgba(255, 107, 44, 0.30);
--th-shadow-danger:       0 4px 14px rgba(239, 68, 68, 0.20);
--th-shadow-danger-lg:    0 8px 25px rgba(239, 68, 68, 0.25);
--th-shadow-success:      0 4px 14px rgba(5, 150, 105, 0.20);
--th-shadow-info:         0 4px 14px rgba(59, 130, 246, 0.20);
/* Ozel (v5 - YENI) */
--th-shadow-sticky:       0 2px 8px rgba(0, 0, 0, 0.06);
--th-shadow-glass:        0 4px 30px rgba(0, 0, 0, 0.08);
--th-shadow-card-hover:   0 8px 24px rgba(0, 0, 0, 0.10);
--th-shadow-bottom-sheet: 0 -4px 20px rgba(0, 0, 0, 0.10);

/* -- Glassmorphism / Backdrop (v5 - YENI) -- */
--th-glass-bg:             rgba(255, 255, 255, 0.85);
--th-glass-bg-dark:        rgba(17, 17, 17, 0.80);
--th-glass-blur:           12px;
--th-glass-blur-heavy:     20px;
--th-glass-saturate:       1.2;
--th-glass-border:         0.5px solid rgba(255, 255, 255, 0.18);
--th-glass-shadow:         0 4px 30px rgba(0, 0, 0, 0.08);
--th-glass-radius:         var(--th-radius-xl);



/* =====================================================================
   TRANSITION / ANIMATION SYSTEM
   ===================================================================== */

/* -- Easing Functions -- */
--th-ease-linear:      linear;
--th-ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
--th-ease-in:          cubic-bezier(0.4, 0, 1, 1);
--th-ease-out:         cubic-bezier(0, 0, 0.2, 1);
--th-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
--th-ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);
--th-ease-spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
--th-ease-elastic:     cubic-bezier(0.68, -0.6, 0.32, 1.6);
--th-ease-snappy:      cubic-bezier(0.2, 0, 0, 1);

/* -- Semantic Easing (v5 - YENI) -- */
--th-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
--th-ease-entrance:    cubic-bezier(0, 0, 0.2, 1);
--th-ease-exit:        cubic-bezier(0.4, 0, 1, 1);
--th-ease-productive:  cubic-bezier(0.2, 0, 0.38, 0.9);
--th-ease-expressive:  cubic-bezier(0.4, 0.14, 0.3, 1);

/* -- Duration -- */
--th-duration-instant:   0ms;
--th-duration-fastest:   50ms;
--th-duration-fast:      100ms;
--th-duration-normal:    200ms;
--th-duration-slow:      300ms;
--th-duration-slower:    500ms;
--th-duration-slowest:   700ms;
--th-duration-crawl:     1000ms;

/* -- Semantic Duration (v5 - YENI) -- */
--th-duration-micro:     70ms;
--th-duration-tooltip:   150ms;
--th-duration-dropdown:  250ms;
--th-duration-modal:     350ms;
--th-duration-page:      500ms;
--th-duration-complex:   700ms;

/* -- Preset Transitions -- */
--th-transition-instant:  100ms var(--th-ease-default);
--th-transition-fast:     150ms var(--th-ease-default);
--th-transition-normal:   250ms var(--th-ease-default);
--th-transition-slow:     350ms var(--th-ease-default);
--th-transition-bounce:   500ms var(--th-ease-bounce);
--th-transition-spring:   500ms var(--th-ease-spring);
--th-transition-elastic:  600ms var(--th-ease-elastic);
--th-transition-default:  250ms var(--th-ease-default);

/* -- Stagger (v5 - YENI) -- */
--th-stagger-offset:      60ms;
--th-stagger-max-items:   8;
--th-stagger-max-delay:   480ms;

/* -- Delay (v5 - YENI) -- */
--th-delay-none:     0ms;
--th-delay-short:    50ms;
--th-delay-medium:   100ms;
--th-delay-long:     200ms;

/* -- Reduced Motion -- */
--th-motion-reduce-factor: 1;

/* -- Transition Property (v5 - YENI) -- */
--th-transition-colors:    color, background-color, border-color, fill, stroke;
--th-transition-opacity:   opacity;
--th-transition-transform: transform;
--th-transition-shadow:    box-shadow;
--th-transition-all:       all;



/* =====================================================================
   SIZING / DIMENSION SYSTEM
   ===================================================================== */

/* -- Icon Sizes -- */
--th-icon-2xs:      12px;
--th-icon-xs:       14px;
--th-icon-sm:       16px;
--th-icon-md:       20px;
--th-icon-lg:       24px;
--th-icon-xl:       32px;
--th-icon-2xl:      48px;
--th-icon-3xl:      64px;

/* -- Touch Target -- */
--th-touch-min:         44px;
--th-touch-comfortable: 48px;
--th-touch-spacious:    56px;

/* -- Avatar Sizes -- */
--th-avatar-2xs:    24px;
--th-avatar-xs:     32px;
--th-avatar-sm:     40px;
--th-avatar-md:     48px;
--th-avatar-lg:     64px;
--th-avatar-xl:     96px;

/* -- Thumbnail Sizes -- */
--th-thumb-xs:      40px;
--th-thumb-sm:      60px;
--th-thumb-md:      80px;
--th-thumb-lg:      120px;

/* -- Logo Sizes (height) -- */
--th-logo-sm:       24px;
--th-logo-md:       32px;
--th-logo-lg:       40px;

/* -- Content Width -- */
--th-content-narrow:   480px;
--th-content-medium:   640px;
--th-content-default:  720px;
--th-content-wide:     960px;
--th-content-full:     1240px;

/* -- Sidebar -- */
--th-sidebar-compact:  220px;
--th-sidebar-default:  280px;
--th-sidebar-wide:     320px;


/* =====================================================================
   LAYOUT SYSTEM
   ===================================================================== */

/* -- Container -- */
--th-container-xs:       320px;
--th-container-sm:       576px;
--th-container-md:       768px;
--th-container-lg:       992px;
--th-container-xl:       1240px;
--th-container-2xl:      1440px;
--th-container-full:     100%;
--th-container-max-width: 1240px;
--th-container-padding:  var(--th-space-4);
--th-spacing-container:  var(--th-container-padding);

/* -- Grid -- */
--th-grid-columns:       12;
--th-grid-column-gap:    var(--th-grid-gap-xl);
--th-grid-row-gap:       var(--th-grid-row-gap-lg);

/* -- Sidebar Layout -- */
--th-sidebar-width:         var(--th-sidebar-default);
--th-sidebar-width-compact: var(--th-sidebar-compact);
--th-sidebar-gap:           var(--th-space-6);

/* -- Sticky Offsets -- */
--th-sticky-header-offset:  0px;
--th-sticky-bottom-offset:  0px;
--th-sticky-filter-top:     140px;
--th-sticky-pdp-top:        140px;

/* -- Scroll -- */
--th-scroll-behavior:       smooth;
--th-scroll-snap-type:      x mandatory;
--th-scroll-padding-top:    var(--th-space-4);
--th-scroll-overscroll:     contain;
--th-scroll-indicator-color: var(--th-neutral-300);

/* -- Breakpoints (referans) -- */
--th-screen-xs:    320px;
--th-screen-sm:    576px;
--th-screen-md:    768px;
--th-screen-lg:    992px;
--th-screen-xl:    1240px;
--th-screen-2xl:   1440px;
--th-screen-3xl:   1920px;


/* =====================================================================
   Z-INDEX SYSTEM
   ===================================================================== */

--th-z-deep:          -1;
--th-z-base:          0;
--th-z-raised:        1;
--th-z-dropdown:      100;
--th-z-sticky:        200;
--th-z-banner:        250;
--th-z-fixed:         300;
--th-z-header:        400;
--th-z-sidebar:       450;
--th-z-drawer:        500;
--th-z-overlay:       500;
--th-z-modal:         600;
--th-z-popover:       700;
--th-z-tooltip:       800;
--th-z-toast:         900;
--th-z-max:           9999;


/* =====================================================================
   OPACITY SYSTEM
   ===================================================================== */

--th-opacity-0:      0;
--th-opacity-5:      0.05;
--th-opacity-10:     0.1;
--th-opacity-15:     0.15;
--th-opacity-20:     0.2;
--th-opacity-25:     0.25;
--th-opacity-30:     0.3;
--th-opacity-40:     0.4;
--th-opacity-50:     0.5;
--th-opacity-60:     0.6;
--th-opacity-70:     0.7;
--th-opacity-75:     0.75;
--th-opacity-80:     0.8;
--th-opacity-90:     0.9;
--th-opacity-95:     0.95;
--th-opacity-100:    1;


/* =====================================================================
   ASPECT RATIO
   ===================================================================== */

--th-aspect-auto:       auto;
--th-aspect-square:     1 / 1;
--th-aspect-portrait:   3 / 4;
--th-aspect-landscape:  4 / 3;
--th-aspect-wide:       16 / 9;
--th-aspect-ultrawide:  21 / 9;
--th-aspect-banner:     3 / 1;
--th-aspect-hero:       2 / 1;
--th-aspect-thumb:      1 / 1;
--th-aspect-card-image: 3 / 4;
--th-aspect-video:      16 / 9;
--th-aspect-story:      9 / 16;


/* =====================================================================
   GLOBAL STATE TOKENS
   ===================================================================== */

/* -- Hover -- */
--th-state-hover-bg:         var(--th-neutral-100);
--th-state-hover-bg-dark:    rgba(255, 255, 255, 0.08);
--th-state-hover-opacity:    0.85;
--th-state-hover-transform:  translateY(-2px);
--th-state-hover-shadow:     var(--th-shadow-md);

/* -- Active -- */
--th-state-active-bg:        var(--th-neutral-150);
--th-state-active-scale:     0.97;
--th-state-active-shadow:    var(--th-shadow-xs);
--th-state-active-duration:  var(--th-duration-fast);

/* -- Focus -- */
--th-state-focus-ring:        var(--th-focus-ring);
--th-state-focus-ring-error:  var(--th-focus-ring-error);
--th-state-focus-ring-inset:  var(--th-focus-ring-inset);
--th-state-focus-ring-offset: 2px;

/* -- Disabled -- */
--th-state-disabled-opacity: 0.5;
--th-state-disabled-bg:      var(--th-neutral-100);
--th-state-disabled-text:    var(--th-neutral-400);
--th-state-disabled-border:  var(--th-neutral-200);
--th-state-disabled-cursor:  not-allowed;

/* -- Loading -- */
--th-state-loading-opacity:  0.6;
--th-state-loading-cursor:   wait;
--th-state-loading-bg:       var(--th-neutral-100);

/* -- Selected -- */
--th-state-selected-bg:      var(--th-color-accent-subtle);
--th-state-selected-border:  var(--th-color-accent);
--th-state-selected-text:    var(--th-color-accent-dark);

/* -- Dragging -- */
--th-state-dragging-bg:      var(--th-neutral-50);
--th-state-dragging-border:  var(--th-color-accent);
--th-state-dragging-shadow:  var(--th-shadow-lg);
--th-state-dragging-opacity: 0.8;
--th-state-dragging-cursor:  grabbing;


/* =====================================================================
   DIGER SISTEM TOKENLARI
   ===================================================================== */

/* -- Gradient (v5 - YENI) -- */
--th-gradient-brand:          linear-gradient(135deg, var(--th-ink-900), var(--th-ink-700));
--th-gradient-accent:         linear-gradient(135deg, var(--th-orange-500), var(--th-orange-600));
--th-gradient-campaign-flash: linear-gradient(135deg, var(--th-purple-600), var(--th-rose-600));
--th-gradient-campaign-season: linear-gradient(135deg, var(--th-emerald-600), var(--th-teal-500));
--th-gradient-skeleton:       linear-gradient(90deg, var(--th-neutral-200) 25%, var(--th-neutral-100) 50%, var(--th-neutral-200) 75%);
--th-gradient-hero-overlay:   linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
--th-gradient-card-shine:     linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 60%);
--th-gradient-announcement:   linear-gradient(90deg, var(--th-ink-900), var(--th-ink-800));
--th-gradient-glass:          linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
--th-gradient-progress:       linear-gradient(90deg, var(--th-emerald-500), var(--th-emerald-400));

/* -- Cursor -- */
--th-cursor-default:    default;
--th-cursor-pointer:    pointer;
--th-cursor-grab:       grab;
--th-cursor-grabbing:   grabbing;
--th-cursor-zoom-in:    zoom-in;
--th-cursor-not-allowed: not-allowed;

/* -- Scrollbar -- */
--th-scrollbar-width:       8px;
--th-scrollbar-track:       var(--th-neutral-100);
--th-scrollbar-thumb:       var(--th-neutral-300);
--th-scrollbar-thumb-hover: var(--th-neutral-400);
--th-scrollbar-radius:      var(--th-radius-full);

/* -- Focus Ring (compat) -- */
--th-focus-ring-color:   var(--th-color-primary);
--th-focus-ring-width:   2px;
--th-focus-ring-offset:  2px;
--th-focus-ring-style:   solid;
--th-focus-ring-shadow:  0 0 0 var(--th-focus-ring-offset) var(--th-color-bg), 0 0 0 calc(var(--th-focus-ring-offset) + var(--th-focus-ring-width)) var(--th-focus-ring-color);



/* =====================================================================
   KATMAN 3: COMPONENT TOKENS - Bilesen Katmani
   ===================================================================== */


/* -- BUTTON - Primary ------------------------------------------------- */
--th-btn-primary-bg:             var(--th-color-primary);
--th-btn-primary-bg-hover:       var(--th-color-primary-hover);
--th-btn-primary-bg-active:      var(--th-color-primary-active);
--th-btn-primary-text:           var(--th-color-text-on-primary);
--th-btn-primary-border:         var(--th-color-primary);
--th-btn-primary-shadow:         var(--th-shadow-primary);
--th-btn-primary-shadow-hover:   var(--th-shadow-primary-lg);
--th-btn-primary-hover:          var(--th-color-primary-hover);

/* -- BUTTON - Accent (CTA) ------------------------------------------- */
--th-btn-accent-bg:              var(--th-color-accent);
--th-btn-accent-bg-hover:        var(--th-color-accent-hover);
--th-btn-accent-bg-active:       var(--th-color-accent-active);
--th-btn-accent-text:            var(--th-color-text-on-accent);
--th-btn-accent-border:          var(--th-color-accent);
--th-btn-accent-shadow:          var(--th-shadow-accent);
--th-btn-accent-shadow-hover:    var(--th-shadow-accent-lg);
--th-btn-accent-hover:           var(--th-color-accent-hover);

/* -- BUTTON - Secondary (Outline) ------------------------------------ */
--th-btn-secondary-bg:           transparent;
--th-btn-secondary-bg-hover:     var(--th-color-primary-subtle);
--th-btn-secondary-bg-active:    var(--th-color-primary-muted);
--th-btn-secondary-text:         var(--th-color-primary);
--th-btn-secondary-text-hover:   var(--th-color-primary-hover);
--th-btn-secondary-border:       var(--th-color-primary);
--th-btn-secondary-border-hover: var(--th-color-primary-hover);

/* -- BUTTON - Tertiary (Ghost) ---------------------------------------- */
--th-btn-ghost-bg:               transparent;
--th-btn-ghost-bg-hover:         var(--th-color-bg-hover);
--th-btn-ghost-bg-active:        var(--th-color-bg-active);
--th-btn-ghost-text:             var(--th-color-text);
--th-btn-ghost-text-hover:       var(--th-color-primary);

/* -- BUTTON - Danger -------------------------------------------------- */
--th-btn-danger-bg:              var(--th-color-danger);
--th-btn-danger-bg-hover:        var(--th-color-danger-hover);
--th-btn-danger-bg-active:       var(--th-color-danger-active);
--th-btn-danger-text:            var(--th-color-text-inverse);
--th-btn-danger-shadow:          var(--th-shadow-danger);

/* -- BUTTON - Disabled ------------------------------------------------ */
--th-btn-disabled-bg:            var(--th-neutral-100);
--th-btn-disabled-text:          var(--th-neutral-400);
--th-btn-disabled-border:        var(--th-neutral-200);

/* -- BUTTON - Sizing -------------------------------------------------- */
--th-btn-height-xs:              28px;
--th-btn-height-sm:              32px;
--th-btn-height-md:              40px;
--th-btn-height-lg:              48px;
--th-btn-height-xl:              56px;
--th-btn-padding-xs:             var(--th-space-2) var(--th-space-3);
--th-btn-padding-sm:             var(--th-space-2) var(--th-space-4);
--th-btn-padding-md:             var(--th-space-3) var(--th-space-5);
--th-btn-padding-lg:             var(--th-space-3-5) var(--th-space-6);
--th-btn-padding-xl:             var(--th-space-4) var(--th-space-8);
--th-btn-font-xs:                var(--th-text-xs);
--th-btn-font-sm:                var(--th-text-sm);
--th-btn-font-md:                var(--th-text-base);
--th-btn-font-lg:                var(--th-text-md);
--th-btn-font-xl:                var(--th-text-lg);
--th-btn-radius:                 var(--th-radius-lg);
/* v5 extensions */
--th-btn-icon-only-size:         var(--th-btn-height-md);
--th-btn-icon-only-padding:      0;
--th-btn-pill-radius:            var(--th-radius-full);
--th-btn-loading-spinner-size:   16px;
--th-btn-loading-spinner-color:  currentColor;
--th-btn-group-gap:              var(--th-space-px);
--th-btn-group-radius:           var(--th-radius-lg);
--th-btn-transition:             var(--th-transition-fast);
--th-btn-font-weight:            var(--th-font-semibold);


/* -- BADGE ------------------------------------------------------------ */
--th-badge-discount-bg:          var(--th-red-600);
--th-badge-discount-text:        var(--th-neutral-0);
--th-badge-new-bg:               var(--th-blue-600);
--th-badge-new-text:             var(--th-neutral-0);
--th-badge-stock-bg:             var(--th-amber-500);
--th-badge-stock-text:           var(--th-neutral-0);
--th-badge-freecargo-bg:         var(--th-emerald-600);
--th-badge-freecargo-text:       var(--th-neutral-0);
--th-badge-bestseller-bg:        var(--th-orange-500);
--th-badge-bestseller-text:      var(--th-neutral-0);
--th-badge-campaign-bg:          var(--th-rose-600);
--th-badge-campaign-text:        var(--th-neutral-0);
--th-badge-limited-bg:           var(--th-purple-600);
--th-badge-limited-text:         var(--th-neutral-0);
--th-badge-organic-bg:           var(--th-lime-500);
--th-badge-organic-text:         var(--th-neutral-0);
--th-badge-premium-bg:           var(--th-gold-500);
--th-badge-premium-text:         var(--th-neutral-900);
--th-badge-b2b-bg:               var(--th-indigo-500);
--th-badge-b2b-text:             var(--th-neutral-0);
--th-badge-delivery-bg:          var(--th-cyan-500);
--th-badge-delivery-text:        var(--th-neutral-0);
--th-badge-radius:               var(--th-radius-sm);
--th-badge-padding:              var(--th-space-1) var(--th-space-2);
--th-badge-font:                 var(--th-text-2xs);
--th-badge-font-weight:          var(--th-font-bold);
/* v5 extensions */
--th-badge-outline-border-width: 1px;
--th-badge-outline-bg:           transparent;
--th-badge-dot-size:             8px;
--th-badge-dot-color:            var(--th-color-accent);
--th-badge-pulse-shadow:         0 0 0 4px rgba(255, 107, 44, 0.3);
--th-badge-icon-size:            var(--th-icon-xs);
--th-badge-icon-gap:             var(--th-gap-inline-2xs);
--th-badge-count-min-width:      20px;
--th-badge-count-height:         20px;
--th-badge-count-font:           var(--th-text-2xs);
--th-badge-count-radius:         var(--th-radius-full);
--th-badge-count-bg:             var(--th-color-accent);
--th-badge-count-text:           var(--th-neutral-0);


/* -- PRODUCT CARD ----------------------------------------------------- */
--th-card-bg:                    var(--th-surface-raised);
--th-card-bg-hover:              var(--th-neutral-0);
--th-card-border:                var(--th-color-border-light);
--th-card-border-hover:          var(--th-color-border);
--th-card-radius:                var(--th-radius-xl);
--th-card-padding:               var(--th-space-0);
--th-card-body-padding:          var(--th-space-3);
--th-card-shadow:                var(--th-shadow-xs);
--th-card-shadow-hover:          var(--th-shadow-md);
--th-card-transition:            var(--th-transition-normal);
--th-card-title-color:           var(--th-color-text);
--th-card-title-font:            var(--th-text-sm);
--th-card-title-weight:          var(--th-font-medium);
--th-card-title-lines:           2;
--th-card-price-color:           var(--th-color-text-price);
--th-card-price-font:            var(--th-text-md);
--th-card-price-weight:          var(--th-font-bold);
--th-card-old-price-color:       var(--th-color-text-price-old);
--th-card-old-price-font:        var(--th-text-sm);
--th-card-discount-color:        var(--th-color-text-discount);
--th-card-discount-font:         var(--th-text-xs);
--th-card-image-ratio:           var(--th-aspect-square);
--th-card-image-radius:          var(--th-radius-xl) var(--th-radius-xl) 0 0;
--th-card-fav-color:             var(--th-neutral-400);
--th-card-fav-color-active:      var(--th-rose-500);
--th-card-outofstock-opacity:    0.5;
/* v5 extensions */
--th-card-compact-padding:       var(--th-space-2);
--th-card-compact-gap:           var(--th-space-1);
--th-card-list-height:           120px;
--th-card-list-image-width:      100px;
--th-card-list-gap:              var(--th-space-3);
--th-card-quickview-z:           var(--th-z-modal);
--th-card-quickview-bg:          var(--th-neutral-0);
--th-card-skeleton-bg:           var(--th-neutral-200);
--th-card-skeleton-shine:        var(--th-neutral-100);
--th-card-campaign-overlay:      rgba(0, 0, 0, 0.6);
--th-card-campaign-text:         var(--th-neutral-0);
--th-card-ribbon-bg:             var(--th-color-accent);
--th-card-ribbon-text:           var(--th-neutral-0);
--th-card-ribbon-font:           var(--th-text-2xs);
--th-card-installment-color:     var(--th-neutral-500);
--th-card-installment-font:      var(--th-text-xs);
--th-card-rating-size:           12px;


/* -- HEADER ----------------------------------------------------------- */
--th-header-height:              136px;
--th-header-height-compact:      64px;
--th-header-bg:                  var(--th-neutral-0);
--th-header-shadow:              var(--th-shadow-sm);
--th-header-border:              var(--th-color-border-light);

--th-header-topbar-height:       36px;
--th-header-topbar-bg:           var(--th-neutral-50);
--th-header-topbar-text:         var(--th-neutral-600);
--th-header-topbar-text-hover:   var(--th-color-primary);
--th-header-topbar-border:       var(--th-color-border-light);
--th-header-topbar-font:         var(--th-text-xs);

--th-header-main-height:         64px;
--th-header-main-bg:             var(--th-neutral-0);
--th-header-main-text:           var(--th-color-text);

--th-header-nav-height:          44px;
--th-header-nav-bg:              var(--th-color-primary);
--th-header-nav-text:            var(--th-color-text-inverse);
--th-header-nav-text-hover:      var(--th-neutral-0);
--th-header-nav-hover-bg:        rgba(255, 255, 255, 0.15);
--th-header-nav-font:            var(--th-text-sm);
--th-header-nav-font-weight:     var(--th-font-medium);

--th-header-search-bg:           var(--th-neutral-100);
--th-header-search-bg-focus:     var(--th-neutral-0);
--th-header-search-border:       var(--th-neutral-200);
--th-header-search-border-focus: var(--th-color-primary);
--th-header-search-text:         var(--th-color-text);
--th-header-search-placeholder:  var(--th-neutral-400);
--th-header-search-radius:       var(--th-radius-xl);
--th-header-search-height:       44px;

--th-header-icon-color:          var(--th-neutral-700);
--th-header-icon-hover:          var(--th-color-primary);
--th-header-icon-size:           22px;

--th-header-cart-badge-bg:       var(--th-color-accent);
--th-header-cart-badge-text:     var(--th-neutral-0);
--th-header-cart-badge-size:     18px;
--th-header-cart-badge-font:     var(--th-text-2xs);

--th-header-mega-bg:             var(--th-neutral-0);
--th-header-mega-shadow:         var(--th-shadow-xl);
--th-header-mega-border:         var(--th-color-border-light);
--th-header-mega-heading:        var(--th-color-text);
--th-header-mega-link:           var(--th-neutral-600);
--th-header-mega-link-hover:     var(--th-color-primary);
--th-header-mega-highlight-bg:   var(--th-color-accent-subtle);
--th-header-mega-highlight-text: var(--th-color-accent);

--th-header-whatsapp:            #15803D;
--th-header-whatsapp-hover:      #166534;
--th-header-accent:              var(--th-color-accent);
--th-header-accent-hover:        var(--th-color-accent-hover);

/* v5 extensions */
--th-header-glass-bg:            var(--th-glass-bg);
--th-header-glass-blur:          var(--th-glass-blur);
--th-header-glass-border:        var(--th-glass-border);
--th-header-autocomplete-bg:     var(--th-neutral-0);
--th-header-autocomplete-shadow: var(--th-shadow-xl);
--th-header-autocomplete-radius: var(--th-radius-xl);
--th-header-autocomplete-item-hover: var(--th-neutral-50);
--th-header-category-dropdown-bg: var(--th-neutral-0);
--th-header-category-dropdown-shadow: var(--th-shadow-lg);
--th-header-category-icon-size:  var(--th-icon-md);
--th-header-announce-extend-bg:  var(--th-gradient-announcement);
--th-header-mobile-menu-bg:      var(--th-neutral-0);
--th-header-mobile-menu-shadow:  var(--th-shadow-2xl);
--th-header-mobile-menu-width:   85%;
--th-header-mobile-overlay:      var(--th-color-bg-overlay);
--th-header-mobile-close-size:   var(--th-icon-lg);
--th-header-sticky-shadow:       var(--th-shadow-sticky);
--th-header-sticky-bg:           var(--th-neutral-0);


/* -- FOOTER ----------------------------------------------------------- */
--th-footer-bg:                  var(--th-neutral-0);
--th-footer-bg-top:              var(--th-neutral-50);
--th-footer-bg-bottom:           var(--th-neutral-900);
--th-footer-text:                var(--th-neutral-700);
--th-footer-text-muted:          var(--th-neutral-500);
--th-footer-heading:             var(--th-neutral-900);
--th-footer-heading-font:        var(--th-text-sm);
--th-footer-link:                var(--th-neutral-600);
--th-footer-link-hover:          var(--th-color-accent);
--th-footer-border:              var(--th-neutral-200);
--th-footer-icon:                var(--th-neutral-500);
--th-footer-icon-hover:          var(--th-color-accent);
--th-footer-social-bg:           var(--th-neutral-100);
--th-footer-social-bg-hover:     var(--th-color-accent);
--th-footer-social-text:         var(--th-neutral-600);
--th-footer-social-text-hover:   var(--th-neutral-0);
--th-footer-newsletter-bg:       var(--th-neutral-100);
--th-footer-newsletter-border:   var(--th-neutral-300);
--th-footer-newsletter-text:     var(--th-neutral-700);
--th-footer-newsletter-btn-bg:   var(--th-color-accent);
--th-footer-newsletter-btn-text: var(--th-neutral-0);
--th-footer-copyright-text:      var(--th-neutral-400);
--th-footer-copyright-font:      var(--th-text-xs);
/* v5 extensions */
--th-footer-newsletter-focus-border: var(--th-color-accent);
--th-footer-newsletter-error-border: var(--th-color-danger);
--th-footer-newsletter-success-bg: var(--th-emerald-50);
--th-footer-newsletter-radius:   var(--th-radius-lg);
--th-footer-accordion-icon-size: var(--th-icon-sm);
--th-footer-accordion-transition: var(--th-transition-normal);
--th-footer-accordion-border:    var(--th-neutral-200);
--th-footer-app-badge-height:    40px;
--th-footer-app-badge-radius:    var(--th-radius-md);
--th-footer-payment-logo-height: 28px;
--th-footer-payment-logo-gap:    var(--th-space-2);
--th-footer-payment-logo-opacity: 0.7;
--th-footer-payment-logo-hover:  1;
--th-footer-bottom-text:         var(--th-neutral-400);
--th-footer-bottom-link:         var(--th-neutral-400);
--th-footer-bottom-link-hover:   var(--th-neutral-0);
--th-footer-section-gap:         var(--th-section-gap-lg);
--th-footer-heading-weight:      var(--th-font-semibold);


/* -- INPUT / FORM ----------------------------------------------------- */
--th-input-height-sm:            32px;
--th-input-height-md:            40px;
--th-input-height-lg:            48px;
--th-input-bg:                   var(--th-neutral-0);
--th-input-bg-hover:             var(--th-neutral-0);
--th-input-bg-focus:             var(--th-neutral-0);
--th-input-bg-disabled:          var(--th-neutral-100);
--th-input-bg-readonly:          var(--th-neutral-50);
--th-input-border:               var(--th-neutral-300);
--th-input-border-hover:         var(--th-neutral-400);
--th-input-border-focus:         var(--th-color-primary);
--th-input-border-error:         var(--th-color-danger);
--th-input-border-success:       var(--th-color-success);
--th-input-border-disabled:      var(--th-neutral-200);
--th-input-text:                 var(--th-color-text);
--th-input-text-disabled:        var(--th-color-text-disabled);
--th-input-placeholder:          var(--th-color-text-placeholder);
--th-input-label:                var(--th-color-text-secondary);
--th-input-label-font:           var(--th-text-sm);
--th-input-label-weight:         var(--th-font-medium);
--th-input-helper:               var(--th-color-text-muted);
--th-input-helper-font:          var(--th-text-xs);
--th-input-error-text:           var(--th-color-danger);
--th-input-error-font:           var(--th-text-xs);
--th-input-success-text:         var(--th-color-success);
--th-input-radius:               var(--th-radius-lg);
--th-input-shadow-focus:         0 0 0 3px rgba(17, 17, 17, 0.15);
--th-input-shadow-error:         0 0 0 3px rgba(239, 68, 68, 0.15);
--th-input-transition:           var(--th-transition-fast);
/* v5 extensions */
--th-input-textarea-min-height:  100px;
--th-input-textarea-resize:      vertical;
--th-input-file-drop-bg:         var(--th-neutral-50);
--th-input-file-drop-border:     var(--th-color-border);
--th-input-file-drop-border-active: var(--th-color-accent);
--th-input-file-drop-text:       var(--th-color-text-muted);
--th-input-file-drop-icon:       var(--th-neutral-400);
--th-input-date-icon-color:      var(--th-neutral-500);
--th-input-range-track-bg:       var(--th-neutral-200);
--th-input-range-track-fill:     var(--th-color-primary);
--th-input-range-track-height:   4px;
--th-input-range-thumb-size:     20px;
--th-input-range-thumb-bg:       var(--th-color-primary);
--th-input-range-thumb-shadow:   var(--th-shadow-sm);
--th-input-password-toggle-color: var(--th-neutral-500);
--th-input-strength-height:      4px;
--th-input-strength-weak:        var(--th-red-500);
--th-input-strength-medium:      var(--th-amber-500);
--th-input-strength-strong:      var(--th-emerald-500);
--th-input-counter-color:        var(--th-neutral-400);
--th-input-counter-font:         var(--th-text-xs);
--th-input-group-gap:            var(--th-space-0);
--th-input-group-radius:         var(--th-radius-lg);
--th-input-padding-x:            var(--th-space-3);

/* -- SELECT / DROPDOWN ------------------------------------------------ */
--th-select-arrow-color:         var(--th-neutral-400);
--th-select-option-hover:        var(--th-color-bg-hover);
--th-select-option-selected:     var(--th-color-primary-subtle);
--th-select-option-selected-text: var(--th-color-primary);
/* v5 extensions */
--th-select-search-bg:           var(--th-neutral-50);
--th-select-search-border:       var(--th-neutral-200);
--th-select-multi-tag-bg:        var(--th-color-primary-subtle);
--th-select-multi-tag-text:      var(--th-color-primary);
--th-select-multi-tag-radius:    var(--th-radius-sm);
--th-select-multi-tag-remove:    var(--th-color-primary);
--th-select-group-header-color:  var(--th-color-text-muted);
--th-select-group-header-font:   var(--th-text-xs);
--th-select-group-header-weight: var(--th-font-semibold);
--th-select-max-height:          240px;
--th-select-empty-text:          var(--th-color-text-muted);
--th-select-empty-icon:          var(--th-neutral-300);

/* -- CHECKBOX / RADIO ------------------------------------------------- */
--th-check-size:                 18px;
--th-check-border:               var(--th-neutral-300);
--th-check-border-hover:         var(--th-color-primary);
--th-check-checked-bg:           var(--th-color-primary);
--th-check-checked-border:       var(--th-color-primary);
--th-check-checked-icon:         var(--th-neutral-0);
--th-check-disabled-bg:          var(--th-neutral-100);
--th-check-disabled-border:      var(--th-neutral-200);
--th-check-radius:               var(--th-radius-sm);
--th-radio-radius:               var(--th-radius-full);
/* v5 extensions */
--th-check-toggle-width:         40px;
--th-check-toggle-height:        22px;
--th-check-toggle-bg:            var(--th-neutral-300);
--th-check-toggle-bg-checked:    var(--th-color-primary);
--th-check-toggle-thumb:         var(--th-neutral-0);
--th-check-indeterminate-bg:     var(--th-color-primary);
--th-check-label-color:          var(--th-color-text);
--th-check-label-disabled:       var(--th-color-text-disabled);
--th-check-error-border:         var(--th-color-danger);
--th-check-transition:           var(--th-transition-fast);



/* -- TRUST / GUVEN MODULLERI ------------------------------------------ */
--th-trust-bg:                   var(--th-ink-50);
--th-trust-bg-alt:               var(--th-neutral-50);
--th-trust-border:               var(--th-ink-200);
--th-trust-icon-color:           var(--th-color-primary);
--th-trust-icon-size:            24px;
--th-trust-title-color:          var(--th-ink-800);
--th-trust-title-font:           var(--th-text-sm);
--th-trust-title-weight:         var(--th-font-semibold);
--th-trust-desc-color:           var(--th-ink-600);
--th-trust-desc-font:            var(--th-text-xs);
--th-trust-radius:               var(--th-radius-lg);
--th-trust-padding:              var(--th-space-4);
--th-trust-gap:                  var(--th-space-3);
/* v5 extensions */
--th-trust-icon-bg:              var(--th-color-primary-subtle);
--th-trust-icon-radius:          var(--th-radius-full);
--th-trust-icon-padding:         var(--th-space-2);
--th-trust-mobile-cols:          2;
--th-trust-mobile-gap:           var(--th-space-2);
--th-trust-pdp-padding:          var(--th-space-3);
--th-trust-pdp-font:             var(--th-text-xs);
--th-trust-checkout-bg:          var(--th-emerald-50);
--th-trust-checkout-border:      var(--th-emerald-200);


/* -- CAMPAIGN / KAMPANYA ---------------------------------------------- */
--th-campaign-bg:                var(--th-orange-50);
--th-campaign-bg-intense:        var(--th-orange-500);
--th-campaign-border:            var(--th-orange-200);
--th-campaign-text:              var(--th-orange-800);
--th-campaign-text-inverse:      var(--th-neutral-0);
--th-campaign-accent:            var(--th-color-accent);
--th-campaign-radius:            var(--th-radius-xl);

--th-campaign-timer-bg:          var(--th-neutral-900);
--th-campaign-timer-text:        var(--th-neutral-0);
--th-campaign-timer-accent:      var(--th-color-accent);
--th-campaign-timer-digit-bg:    var(--th-neutral-800);
--th-campaign-timer-digit-text:  var(--th-neutral-0);
--th-campaign-timer-separator:   var(--th-color-accent);
--th-campaign-timer-label:       var(--th-neutral-400);
--th-campaign-timer-radius:      var(--th-radius-md);

--th-campaign-flash-bg:          var(--th-gradient-campaign-flash);
--th-campaign-flash-text:        var(--th-neutral-0);
--th-campaign-season-bg:         var(--th-gradient-campaign-season);
--th-campaign-season-text:       var(--th-neutral-0);
/* v5 extensions */
--th-campaign-countdown-size:    36px;
--th-campaign-countdown-font:    var(--th-text-xl);
--th-campaign-countdown-weight:  var(--th-font-bold);
--th-campaign-progress-bg:       var(--th-neutral-200);
--th-campaign-progress-fill:     var(--th-color-accent);
--th-campaign-progress-height:   6px;
--th-campaign-progress-radius:   var(--th-radius-full);
--th-campaign-ribbon-width:      120px;
--th-campaign-ribbon-height:     28px;
--th-campaign-ribbon-bg:         var(--th-red-600);
--th-campaign-ribbon-text:       var(--th-neutral-0);
--th-campaign-card-overlay:      rgba(0, 0, 0, 0.5);
--th-campaign-card-radius:       var(--th-radius-xl);
--th-campaign-info-bg:           var(--th-blue-700);
--th-campaign-gift-bg:           var(--th-emerald-600);
--th-campaign-doc-bg:            var(--th-indigo-700);


/* -- CART / SEPET ----------------------------------------------------- */
--th-cart-bg:                    var(--th-neutral-0);
--th-cart-item-border:           var(--th-color-border-light);
--th-cart-item-bg-hover:         var(--th-neutral-50);
--th-cart-remove-color:          var(--th-neutral-400);
--th-cart-remove-hover:          var(--th-color-danger);
--th-cart-quantity-border:       var(--th-neutral-300);
--th-cart-quantity-bg:           var(--th-neutral-0);
--th-cart-quantity-btn-bg:       var(--th-neutral-100);
--th-cart-quantity-btn-hover:    var(--th-neutral-200);

--th-cart-summary-bg:            var(--th-neutral-50);
--th-cart-summary-border:        var(--th-neutral-200);
--th-cart-summary-radius:        var(--th-radius-xl);
--th-cart-summary-label:         var(--th-color-text-secondary);
--th-cart-summary-value:         var(--th-color-text);
--th-cart-summary-total-color:   var(--th-color-text);
--th-cart-summary-total-font:    var(--th-text-xl);
--th-cart-summary-total-weight:  var(--th-font-bold);
--th-cart-summary-discount:      var(--th-color-success);
--th-cart-summary-shipping:      var(--th-color-success);

--th-cart-progress-bg:           var(--th-neutral-200);
--th-cart-progress-fill:         var(--th-color-success);
--th-cart-progress-complete:     var(--th-color-success);
--th-cart-progress-text:         var(--th-color-text-muted);
--th-cart-progress-text-success: var(--th-color-success);
--th-cart-progress-height:       6px;
--th-cart-progress-radius:       var(--th-radius-full);

--th-cart-coupon-bg:             var(--th-neutral-0);
--th-cart-coupon-border:         var(--th-neutral-300);
--th-cart-coupon-border-focus:   var(--th-color-primary);
--th-cart-coupon-btn-bg:         var(--th-color-primary);
--th-cart-coupon-btn-text:       var(--th-neutral-0);
--th-cart-coupon-success-bg:     var(--th-emerald-50);
--th-cart-coupon-success-text:   var(--th-emerald-700);

--th-cart-empty-icon-color:      var(--th-neutral-300);
--th-cart-empty-text:            var(--th-color-text-muted);
--th-cart-empty-cta-bg:          var(--th-color-primary);
--th-cart-empty-cta-text:        var(--th-neutral-0);
/* v5 extensions */
--th-cart-undo-bg:               var(--th-neutral-800);
--th-cart-undo-text:             var(--th-neutral-0);
--th-cart-undo-btn-bg:           var(--th-color-accent);
--th-cart-qty-stepper-size:      32px;
--th-cart-qty-stepper-radius:    var(--th-radius-md);
--th-cart-cross-sell-bg:         var(--th-neutral-50);
--th-cart-cross-sell-border:     var(--th-color-border-light);
--th-cart-cross-sell-radius:     var(--th-radius-xl);
--th-cart-milestone-size:        24px;
--th-cart-milestone-active-bg:   var(--th-color-success);
--th-cart-milestone-inactive-bg: var(--th-neutral-200);
--th-cart-milestone-text:        var(--th-color-text-muted);
--th-cart-empty-icon-size:       64px;
--th-cart-empty-animation:       var(--th-transition-slow);
--th-cart-item-image-size:       80px;
--th-cart-item-radius:           var(--th-radius-lg);

/* -- MINI CART (Side Drawer) ------------------------------------------ */
--th-minicart-width:             380px;
--th-minicart-bg:                var(--th-neutral-0);
--th-minicart-header-bg:         var(--th-neutral-50);
--th-minicart-header-border:     var(--th-neutral-200);
--th-minicart-footer-bg:         var(--th-neutral-0);
--th-minicart-footer-border:     var(--th-neutral-200);
--th-minicart-shadow:            var(--th-shadow-2xl);
/* v5 extensions */
--th-minicart-item-hover:        var(--th-neutral-50);
--th-minicart-remove-color:      var(--th-neutral-400);
--th-minicart-remove-hover:      var(--th-color-danger);
--th-minicart-empty-icon:        var(--th-neutral-300);
--th-minicart-empty-text:        var(--th-color-text-muted);
--th-minicart-loading-bg:        rgba(255, 255, 255, 0.7);
--th-minicart-footer-sticky:     sticky;
--th-minicart-badge-bg:          var(--th-color-accent);
--th-minicart-badge-text:        var(--th-neutral-0);
--th-minicart-badge-size:        20px;
--th-minicart-transition:        var(--th-transition-normal);
--th-minicart-overlay:           var(--th-color-bg-overlay);
--th-minicart-close-size:        var(--th-icon-lg);
--th-minicart-item-image-size:   64px;
--th-minicart-item-gap:          var(--th-space-3);
--th-minicart-padding:           var(--th-space-4);
--th-minicart-max-items:         5;
--th-minicart-scroll:            auto;

/* -- Checkout Steps --------------------------------------------------- */
--th-checkout-step-bg:           var(--th-neutral-100);
--th-checkout-step-border:       var(--th-neutral-300);
--th-checkout-step-active-bg:    var(--th-color-primary);
--th-checkout-step-complete-bg:  var(--th-color-success);
--th-checkout-step-line:         var(--th-neutral-300);
/* v5 extensions */
--th-checkout-step-text:         var(--th-color-text-muted);
--th-checkout-step-active-text:  var(--th-neutral-0);
--th-checkout-step-complete-text: var(--th-neutral-0);
--th-checkout-step-size:         36px;
--th-checkout-step-font:         var(--th-text-sm);
--th-checkout-step-weight:       var(--th-font-semibold);
--th-checkout-step-icon-size:    var(--th-icon-sm);
--th-checkout-step-line-width:   2px;
--th-checkout-step-gap:          var(--th-space-4);
--th-checkout-address-bg:        var(--th-neutral-0);
--th-checkout-address-border:    var(--th-color-border);
--th-checkout-address-radius:    var(--th-radius-xl);
--th-checkout-address-selected:  var(--th-color-accent);
--th-checkout-payment-bg:        var(--th-neutral-0);
--th-checkout-payment-border:    var(--th-color-border);
--th-checkout-payment-radius:    var(--th-radius-lg);
--th-checkout-payment-selected:  var(--th-color-primary);
--th-checkout-summary-bg:        var(--th-neutral-50);
--th-checkout-summary-border:    var(--th-neutral-200);
--th-checkout-summary-radius:    var(--th-radius-xl);
--th-checkout-confirmation-icon: var(--th-color-success);
--th-checkout-confirmation-size: 64px;
--th-checkout-trust-bg:          var(--th-emerald-50);
--th-checkout-trust-border:      var(--th-emerald-200);
--th-checkout-trust-text:        var(--th-emerald-700);
--th-checkout-trust-icon:        var(--th-emerald-600);

/* -- Exit Intent ------------------------------------------------------ */
--th-exit-overlay-bg:            rgba(0,0,0,.55);
--th-exit-dialog-bg:             var(--th-neutral-0);
--th-exit-dialog-radius:         var(--th-radius-2xl);
/* v5 extensions */
--th-exit-dialog-shadow:         var(--th-shadow-2xl);
--th-exit-dialog-max-width:      480px;
--th-exit-cta-bg:                var(--th-color-accent);
--th-exit-cta-text:              var(--th-neutral-0);
--th-exit-cta-radius:            var(--th-radius-lg);
--th-exit-countdown-color:       var(--th-color-accent);
--th-exit-countdown-font:        var(--th-text-xl);
--th-exit-backdrop-blur:         var(--th-glass-blur);
--th-exit-image-radius:          var(--th-radius-xl);
--th-exit-close-color:           var(--th-neutral-400);
--th-exit-close-hover:           var(--th-color-text);


/* -- PDP (Urun Detay Sayfasi) ----------------------------------------- */
--th-pdp-gallery-bg:             var(--th-neutral-0);
--th-pdp-gallery-border:         var(--th-color-border-light);
--th-pdp-gallery-radius:         var(--th-radius-xl);
--th-pdp-gallery-thumb-size:     64px;
--th-pdp-gallery-thumb-border:   var(--th-neutral-200);
--th-pdp-gallery-thumb-active:   var(--th-color-primary);
--th-pdp-gallery-zoom-bg:        var(--th-neutral-0);
--th-pdp-gallery-counter-bg:     rgba(0, 0, 0, 0.5);
--th-pdp-gallery-counter-text:   var(--th-neutral-0);

--th-pdp-title-color:            var(--th-color-text);
--th-pdp-title-font:             var(--th-text-xl);
--th-pdp-title-weight:           var(--th-font-semibold);
--th-pdp-brand-color:            var(--th-color-text-link);
--th-pdp-sku-color:              var(--th-color-text-muted);

--th-pdp-price-color:            var(--th-color-text);
--th-pdp-price-font:             var(--th-text-2xl);
--th-pdp-price-weight:           var(--th-font-bold);
--th-pdp-price-sale-color:       var(--th-color-text-price-sale);
--th-pdp-price-old-color:        var(--th-color-text-price-old);
--th-pdp-price-old-font:         var(--th-text-md);
--th-pdp-price-installment:      var(--th-color-text-muted);

--th-pdp-variant-chip-border:    var(--th-neutral-300);
--th-pdp-variant-chip-hover:     var(--th-color-primary-border);
--th-pdp-variant-chip-selected:  var(--th-color-primary);
--th-pdp-variant-chip-selected-bg: var(--th-color-primary-subtle);
--th-pdp-variant-chip-disabled:  var(--th-neutral-200);
--th-pdp-variant-chip-disabled-text: var(--th-neutral-400);
--th-pdp-variant-chip-radius:    var(--th-radius-md);
--th-pdp-variant-color-size:     32px;
--th-pdp-variant-color-border:   var(--th-neutral-200);
--th-pdp-variant-color-selected: var(--th-color-primary);

--th-pdp-sticky-bg:              var(--th-neutral-0);
--th-pdp-sticky-shadow:          0 -2px 10px rgba(0, 0, 0, 0.1);
--th-pdp-sticky-height:          64px;
--th-pdp-sticky-z:               var(--th-z-sticky);

--th-pdp-tab-border:             var(--th-color-border);
--th-pdp-tab-text:               var(--th-color-text-muted);
--th-pdp-tab-text-active:        var(--th-color-primary);
--th-pdp-tab-indicator:          var(--th-color-primary);
--th-pdp-tab-font:               var(--th-text-base);
--th-pdp-tab-weight:             var(--th-font-medium);

--th-pdp-delivery-bg:            var(--th-emerald-50);
--th-pdp-delivery-border:        var(--th-emerald-200);
--th-pdp-delivery-icon:          var(--th-color-success);
--th-pdp-delivery-text:          var(--th-emerald-800);

/* v5 extensions */
--th-pdp-lightbox-bg:            rgba(0, 0, 0, 0.92);
--th-pdp-lightbox-close:         var(--th-neutral-0);
--th-pdp-lightbox-counter:       var(--th-neutral-0);
--th-pdp-lightbox-z:             var(--th-z-modal);
--th-pdp-video-play-bg:          rgba(0, 0, 0, 0.6);
--th-pdp-video-play-icon:        var(--th-neutral-0);
--th-pdp-video-play-size:        56px;
--th-pdp-360-indicator-bg:       var(--th-neutral-800);
--th-pdp-360-indicator-text:     var(--th-neutral-0);
--th-pdp-zoom-cursor:            var(--th-cursor-zoom-in);
--th-pdp-zoom-overlay-bg:        var(--th-neutral-0);
--th-pdp-sticky-mobile-height:   72px;
--th-pdp-sticky-mobile-padding:  var(--th-space-3);
--th-pdp-share-icon-color:       var(--th-neutral-500);
--th-pdp-share-icon-hover:       var(--th-color-primary);
--th-pdp-share-icon-size:        var(--th-icon-md);
--th-pdp-bottom-sheet-bg:        var(--th-neutral-0);
--th-pdp-bottom-sheet-radius:    var(--th-radius-xl);
--th-pdp-bottom-sheet-handle:    var(--th-neutral-300);


/* -- RATING / DEGERLENDIRME ------------------------------------------- */
--th-rating-star-filled:         var(--th-gold-400);
--th-rating-star-half:           var(--th-gold-300);
--th-rating-star-empty:          var(--th-neutral-300);
--th-rating-star-size:           16px;
--th-rating-star-gap:            2px;
--th-rating-count-color:         var(--th-color-text-muted);
--th-rating-count-font:          var(--th-text-sm);
--th-rating-bar-bg:              var(--th-neutral-200);
--th-rating-bar-fill:            var(--th-gold-400);
--th-rating-bar-height:          8px;
/* v5 extensions */
--th-rating-write-bg:            var(--th-neutral-50);
--th-rating-write-border:        var(--th-color-border);
--th-rating-write-radius:        var(--th-radius-xl);
--th-rating-star-size-sm:        12px;
--th-rating-star-size-lg:        24px;
--th-rating-distribution-height: 6px;


/* -- BREADCRUMB ------------------------------------------------------- */
--th-breadcrumb-text:            var(--th-color-text-muted);
--th-breadcrumb-link:            var(--th-color-text-muted);
--th-breadcrumb-link-hover:      var(--th-color-primary);
--th-breadcrumb-separator:       var(--th-neutral-300);
--th-breadcrumb-current:         var(--th-color-text);
--th-breadcrumb-font:            var(--th-text-xs);
/* v5 extensions */
--th-breadcrumb-mobile-scroll:   auto;
--th-breadcrumb-ellipsis:        "...";
--th-breadcrumb-home-icon-size:  var(--th-icon-sm);
--th-breadcrumb-home-icon-color: var(--th-neutral-400);
--th-breadcrumb-gap:             var(--th-gap-inline-xs);
--th-breadcrumb-separator-font:  var(--th-text-xs);


/* -- PAGINATION ------------------------------------------------------- */
--th-pagination-bg:              var(--th-neutral-0);
--th-pagination-bg-hover:        var(--th-neutral-50);
--th-pagination-bg-active:       var(--th-color-primary);
--th-pagination-text:            var(--th-color-text-secondary);
--th-pagination-text-active:     var(--th-neutral-0);
--th-pagination-border:          var(--th-color-border);
--th-pagination-radius:          var(--th-radius-md);
--th-pagination-size:            36px;
/* v5 extensions */
--th-pagination-load-more-bg:    var(--th-color-primary);
--th-pagination-load-more-text:  var(--th-neutral-0);
--th-pagination-infinite-color:  var(--th-color-primary);
--th-pagination-infinite-size:   24px;
--th-pagination-compact-gap:     var(--th-space-1);
--th-pagination-font:            var(--th-text-sm);


/* -- FILTER / FILTRE -------------------------------------------------- */
--th-filter-bg:                  var(--th-neutral-0);
--th-filter-border:              var(--th-color-border);
--th-filter-heading:             var(--th-color-text);
--th-filter-heading-font:        var(--th-text-sm);
--th-filter-heading-weight:      var(--th-font-semibold);
--th-filter-option-text:         var(--th-color-text-secondary);
--th-filter-option-hover:        var(--th-color-primary);
--th-filter-count:               var(--th-color-text-muted);
--th-filter-chip-bg:             var(--th-color-primary-subtle);
--th-filter-chip-text:           var(--th-color-primary);
--th-filter-chip-border:         var(--th-color-primary-border);
--th-filter-chip-remove:         var(--th-color-primary);
--th-filter-chip-radius:         var(--th-radius-full);
--th-filter-price-track:         var(--th-neutral-200);
--th-filter-price-fill:          var(--th-color-primary);
--th-filter-price-thumb:         var(--th-color-primary);
--th-filter-drawer-width:        320px;
--th-filter-drawer-bg:           var(--th-neutral-0);
--th-filter-drawer-shadow:       var(--th-shadow-2xl);
/* v5 extensions */
--th-filter-price-dual-gap:      var(--th-space-2);
--th-filter-color-swatch-size:   28px;
--th-filter-color-swatch-border: var(--th-neutral-200);
--th-filter-color-swatch-selected: var(--th-color-primary);
--th-filter-color-swatch-radius: var(--th-radius-full);
--th-filter-size-grid-gap:       var(--th-space-2);
--th-filter-size-cell-size:      36px;
--th-filter-size-cell-radius:    var(--th-radius-md);
--th-filter-active-chip-bg:      var(--th-color-primary);
--th-filter-active-chip-text:    var(--th-neutral-0);
--th-filter-mobile-handle-bg:    var(--th-neutral-300);
--th-filter-mobile-handle-width: 40px;
--th-filter-mobile-handle-height: 4px;
--th-filter-section-gap:         var(--th-space-4);
--th-filter-collapse-icon:       var(--th-neutral-400);


/* -- MODAL / DIALOG --------------------------------------------------- */
--th-modal-bg:                   var(--th-neutral-0);
--th-modal-border:               var(--th-color-border-light);
--th-modal-shadow:               var(--th-shadow-2xl);
--th-modal-radius:               var(--th-radius-2xl);
--th-modal-header-border:        var(--th-color-border-light);
--th-modal-footer-border:        var(--th-color-border-light);
--th-modal-close-color:          var(--th-neutral-400);
--th-modal-close-hover:          var(--th-color-text);
--th-modal-overlay:              var(--th-color-bg-overlay);
--th-modal-z:                    var(--th-z-modal);
--th-modal-width-sm:             400px;
--th-modal-width-md:             560px;
--th-modal-width-lg:             720px;
--th-modal-width-xl:             960px;
/* v5 extensions */
--th-modal-bottom-sheet-radius:  var(--th-radius-2xl) var(--th-radius-2xl) 0 0;
--th-modal-bottom-sheet-handle:  var(--th-neutral-300);
--th-modal-confirm-icon-size:    48px;
--th-modal-confirm-icon-bg:      var(--th-color-accent-subtle);
--th-modal-lightbox-bg:          rgba(0, 0, 0, 0.92);
--th-modal-fullscreen-z:         var(--th-z-max);
--th-modal-animation-enter:      var(--th-ease-entrance);
--th-modal-animation-exit:       var(--th-ease-exit);
--th-modal-animation-duration:   var(--th-duration-modal);
--th-modal-padding:              var(--th-space-6);
--th-modal-header-padding:       var(--th-space-4) var(--th-space-6);
--th-modal-footer-padding:       var(--th-space-4) var(--th-space-6);
--th-modal-body-padding:         var(--th-space-6);
--th-modal-gap:                  var(--th-space-4);


/* -- TOAST / BILDIRIM ------------------------------------------------- */
--th-toast-bg:                   var(--th-neutral-900);
--th-toast-text:                 var(--th-neutral-0);
--th-toast-shadow:               var(--th-shadow-lg);
--th-toast-radius:               var(--th-radius-lg);
--th-toast-z:                    var(--th-z-toast);
--th-toast-success-bg:           var(--th-emerald-600);
--th-toast-danger-bg:            var(--th-red-600);
--th-toast-warning-bg:           var(--th-amber-500);
--th-toast-info-bg:              var(--th-blue-600);
/* v5 extensions */
--th-toast-action-color:         var(--th-color-accent);
--th-toast-action-font:          var(--th-text-sm);
--th-toast-action-weight:        var(--th-font-semibold);
--th-toast-stack-gap:            var(--th-space-2);
--th-toast-progress-height:      3px;
--th-toast-progress-bg:          rgba(255, 255, 255, 0.3);
--th-toast-padding:              var(--th-space-3) var(--th-space-4);
--th-toast-icon-size:            var(--th-icon-md);
--th-toast-max-width:            420px;


/* -- TOOLTIP ---------------------------------------------------------- */
--th-tooltip-bg:                 var(--th-neutral-800);
--th-tooltip-text:               var(--th-neutral-0);
--th-tooltip-font:               var(--th-text-xs);
--th-tooltip-radius:             var(--th-radius-md);
--th-tooltip-padding:            var(--th-space-2) var(--th-space-3);
--th-tooltip-shadow:             var(--th-shadow-md);
--th-tooltip-z:                  var(--th-z-tooltip);
--th-tooltip-arrow-size:         6px;
/* v5 extensions */
--th-tooltip-max-width:          240px;
--th-tooltip-interactive-bg:     var(--th-neutral-0);
--th-tooltip-interactive-text:   var(--th-color-text);
--th-tooltip-interactive-shadow: var(--th-shadow-xl);
--th-tooltip-interactive-border: var(--th-color-border-light);
--th-tooltip-delay:              var(--th-delay-medium);


/* -- ANNOUNCEMENT BAR ------------------------------------------------- */
--th-announce-bg:                var(--th-color-primary);
--th-announce-bg-alt:            var(--th-color-accent);
--th-announce-text:              var(--th-neutral-0);
--th-announce-link:              var(--th-neutral-0);
--th-announce-link-underline:    rgba(255, 255, 255, 0.5);
--th-announce-close:             rgba(255, 255, 255, 0.7);
--th-announce-close-hover:       var(--th-neutral-0);
--th-announce-height:            40px;
--th-announce-font:              var(--th-text-sm);
--th-announce-font-weight:       var(--th-font-medium);
/* v5 extensions */
--th-announce-countdown-color:   var(--th-color-accent);
--th-announce-countdown-font:    var(--th-font-bold);
--th-announce-dismiss-duration:  var(--th-transition-normal);
--th-announce-mobile-height:     36px;
--th-announce-mobile-font:       var(--th-text-xs);
--th-announce-link-font:         var(--th-font-semibold);
--th-announce-gradient:          var(--th-gradient-announcement);
--th-announce-icon-size:         var(--th-icon-sm);


/* -- SKELETON LOADING ------------------------------------------------- */
--th-skeleton-bg:                var(--th-neutral-200);
--th-skeleton-shine:             var(--th-neutral-100);
--th-skeleton-radius:            var(--th-radius-md);
--th-skeleton-animation-duration: 1.5s;
/* v5 extensions */
--th-skeleton-card-radius:       var(--th-radius-xl);
--th-skeleton-text-height:       14px;
--th-skeleton-text-radius:       var(--th-radius-sm);
--th-skeleton-circle-size:       48px;


/* -- SCROLL TO TOP ---------------------------------------------------- */
--th-scrolltop-bg:               var(--th-color-primary);
--th-scrolltop-bg-hover:         var(--th-color-primary-hover);
--th-scrolltop-text:             var(--th-neutral-0);
--th-scrolltop-shadow:           var(--th-shadow-lg);
--th-scrolltop-radius:           var(--th-radius-full);
--th-scrolltop-size:             44px;
--th-scrolltop-z:                var(--th-z-fixed);
/* v5 extensions */
--th-scrolltop-threshold:        300px;
--th-scrolltop-animation:        var(--th-transition-normal);
--th-scrolltop-icon-size:        var(--th-icon-md);


/* -- WHATSAPP WIDGET -------------------------------------------------- */
--th-whatsapp-bg:                #25D366;
--th-whatsapp-bg-hover:          #20BD5A;
--th-whatsapp-text:              var(--th-neutral-0);
--th-whatsapp-shadow:            0 4px 14px rgba(37, 211, 102, 0.4);
--th-whatsapp-size:              56px;
--th-whatsapp-radius:            var(--th-radius-full);
--th-whatsapp-z:                 var(--th-z-fixed);
/* v5 extensions */
--th-whatsapp-tooltip-bg:        var(--th-neutral-800);
--th-whatsapp-tooltip-text:      var(--th-neutral-0);
--th-whatsapp-pulse-color:       rgba(37, 211, 102, 0.4);
--th-whatsapp-mobile-size:       48px;
--th-whatsapp-mobile-bottom:     var(--th-space-4);
--th-whatsapp-hover:             #20BD5A;


/* -- EMPTY STATE ------------------------------------------------------ */
--th-empty-icon-color:           var(--th-neutral-300);
--th-empty-icon-size:            64px;
--th-empty-title-color:          var(--th-color-text);
--th-empty-title-font:           var(--th-text-lg);
--th-empty-desc-color:           var(--th-color-text-muted);
--th-empty-desc-font:            var(--th-text-base);
/* v5 extensions */
--th-empty-illustration-size:    160px;
--th-empty-cta-bg:               var(--th-color-primary);
--th-empty-cta-text:             var(--th-neutral-0);
--th-empty-cta-radius:           var(--th-radius-lg);
--th-empty-cross-sell-bg:        var(--th-neutral-50);
--th-empty-cross-sell-radius:    var(--th-radius-xl);
--th-empty-animation:            var(--th-transition-slow);
--th-empty-padding:              var(--th-space-12);


/* -- TABLE ------------------------------------------------------------ */
--th-table-header-bg:            var(--th-neutral-50);
--th-table-header-text:          var(--th-color-text-secondary);
--th-table-header-font:          var(--th-text-xs);
--th-table-header-weight:        var(--th-font-semibold);
--th-table-row-bg:               var(--th-neutral-0);
--th-table-row-bg-alt:           var(--th-neutral-50);
--th-table-row-hover:            var(--th-color-bg-hover);
--th-table-border:               var(--th-color-border-light);
--th-table-text:                 var(--th-color-text);
--th-table-text-font:            var(--th-text-sm);
/* v5 extensions */
--th-table-sortable-icon:        var(--th-neutral-400);
--th-table-sortable-active:      var(--th-color-primary);
--th-table-sticky-bg:            var(--th-neutral-0);
--th-table-sticky-shadow:        var(--th-shadow-sm);
--th-table-mobile-card-bg:       var(--th-neutral-0);
--th-table-mobile-card-border:   var(--th-color-border-light);
--th-table-mobile-card-radius:   var(--th-radius-lg);
--th-table-zebra-bg:             var(--th-neutral-50);
--th-table-compact-padding:      var(--th-space-2);
--th-table-padding:              var(--th-space-3) var(--th-space-4);


/* -- ALERT / MESAJ KUTUSU --------------------------------------------- */
--th-alert-radius:               var(--th-radius-lg);
--th-alert-padding:              var(--th-space-4);
--th-alert-font:                 var(--th-text-sm);

--th-alert-success-bg:           var(--th-emerald-50);
--th-alert-success-border:       var(--th-emerald-200);
--th-alert-success-text:         var(--th-emerald-800);
--th-alert-success-icon:         var(--th-emerald-600);

--th-alert-danger-bg:            var(--th-red-50);
--th-alert-danger-border:        var(--th-red-200);
--th-alert-danger-text:          var(--th-red-800);
--th-alert-danger-icon:          var(--th-red-600);

--th-alert-warning-bg:           var(--th-amber-50);
--th-alert-warning-border:       var(--th-amber-200);
--th-alert-warning-text:         var(--th-amber-800);
--th-alert-warning-icon:         var(--th-amber-600);

--th-alert-info-bg:              var(--th-blue-50);
--th-alert-info-border:          var(--th-blue-200);
--th-alert-info-text:            var(--th-blue-800);
--th-alert-info-icon:            var(--th-blue-600);
/* v5 extensions */
--th-alert-dismiss-color:        currentColor;
--th-alert-dismiss-opacity:      0.5;
--th-alert-dismiss-hover:        0.8;
--th-alert-action-font:          var(--th-text-sm);
--th-alert-action-weight:        var(--th-font-semibold);
--th-alert-icon-size:            var(--th-icon-md);
--th-alert-gap:                  var(--th-gap-inline-sm);
--th-alert-banner-radius:        0;



/* =====================================================================
   KATMAN 3: YENI COMPONENT TOKENLARI (v5)
   ===================================================================== */


/* -- AUTH / LOGIN ----------------------------------------------------- */
--th-auth-card-bg:               var(--th-neutral-0);
--th-auth-card-shadow:           var(--th-shadow-lg);
--th-auth-card-radius:           var(--th-radius-2xl);
--th-auth-card-padding:          var(--th-space-8);
--th-auth-card-max-width:        420px;
--th-auth-social-btn-height:     44px;
--th-auth-social-btn-radius:     var(--th-radius-lg);
--th-auth-social-btn-border:     var(--th-color-border);
--th-auth-social-btn-bg:         var(--th-neutral-0);
--th-auth-social-btn-hover:      var(--th-neutral-50);
--th-auth-social-btn-gap:        var(--th-space-2);
--th-auth-social-icon-size:      var(--th-icon-md);
--th-auth-divider-text:          var(--th-color-text-muted);
--th-auth-divider-color:         var(--th-color-border);
--th-auth-remember-color:        var(--th-color-text-secondary);
--th-auth-remember-font:         var(--th-text-sm);
--th-auth-error-bg:              var(--th-red-50);
--th-auth-error-border:          var(--th-red-200);
--th-auth-error-text:            var(--th-red-700);
--th-auth-error-radius:          var(--th-radius-lg);
--th-auth-link-color:            var(--th-color-text-link);
--th-auth-link-hover:            var(--th-color-text-link-hover);
--th-auth-title-font:            var(--th-text-xl);


/* -- BLOG ------------------------------------------------------------- */
--th-blog-card-bg:               var(--th-neutral-0);
--th-blog-card-radius:           var(--th-radius-xl);
--th-blog-card-shadow:           var(--th-shadow-xs);
--th-blog-card-hover-shadow:     var(--th-shadow-md);
--th-blog-featured-bg:           var(--th-neutral-50);
--th-blog-featured-radius:       var(--th-radius-2xl);
--th-blog-author-color:          var(--th-color-text-secondary);
--th-blog-author-font:           var(--th-text-sm);
--th-blog-date-color:            var(--th-color-text-muted);
--th-blog-date-font:             var(--th-text-xs);
--th-blog-category-bg:           var(--th-color-primary-subtle);
--th-blog-category-text:         var(--th-color-primary);
--th-blog-category-radius:       var(--th-radius-full);
--th-blog-category-font:         var(--th-text-xs);
--th-blog-share-icon-color:      var(--th-neutral-400);
--th-blog-share-icon-hover:      var(--th-color-primary);


/* -- SEARCH AUTOCOMPLETE --------------------------------------------- */
--th-search-auto-bg:             var(--th-neutral-0);
--th-search-auto-shadow:         var(--th-shadow-xl);
--th-search-auto-radius:         var(--th-radius-xl);
--th-search-auto-border:         var(--th-color-border-light);
--th-search-auto-item-hover:     var(--th-neutral-50);
--th-search-auto-item-padding:   var(--th-space-3);
--th-search-auto-recent-icon:    var(--th-neutral-400);
--th-search-auto-recent-text:    var(--th-color-text-secondary);
--th-search-auto-popular-bg:     var(--th-neutral-100);
--th-search-auto-popular-text:   var(--th-color-text);
--th-search-auto-popular-radius: var(--th-radius-full);
--th-search-auto-product-image:  48px;
--th-search-auto-product-title:  var(--th-text-sm);
--th-search-auto-product-price:  var(--th-color-text-price);
--th-search-auto-category-icon:  var(--th-neutral-500);
--th-search-auto-max-height:     480px;


/* -- STEPPER ---------------------------------------------------------- */
--th-stepper-size:               36px;
--th-stepper-bg:                 var(--th-neutral-100);
--th-stepper-active-bg:          var(--th-color-primary);
--th-stepper-complete-bg:        var(--th-color-success);
--th-stepper-text:               var(--th-color-text-muted);
--th-stepper-active-text:        var(--th-neutral-0);
--th-stepper-complete-text:      var(--th-neutral-0);
--th-stepper-line-color:         var(--th-neutral-200);
--th-stepper-line-active:        var(--th-color-primary);
--th-stepper-line-width:         2px;
--th-stepper-label-color:        var(--th-color-text-secondary);
--th-stepper-label-font:         var(--th-text-xs);
--th-stepper-error-bg:           var(--th-color-danger);
--th-stepper-gap:                var(--th-space-2);


/* -- TABS ------------------------------------------------------------- */
--th-tabs-border:                var(--th-color-border);
--th-tabs-text:                  var(--th-color-text-muted);
--th-tabs-text-active:           var(--th-color-primary);
--th-tabs-indicator:             var(--th-color-primary);
--th-tabs-indicator-height:      2px;
--th-tabs-font:                  var(--th-text-sm);
--th-tabs-weight:                var(--th-font-medium);
--th-tabs-padding:               var(--th-space-3) var(--th-space-4);
--th-tabs-pill-bg:               var(--th-neutral-100);
--th-tabs-pill-active-bg:        var(--th-color-primary);
--th-tabs-pill-active-text:      var(--th-neutral-0);
--th-tabs-pill-radius:           var(--th-radius-full);
--th-tabs-badge-bg:              var(--th-color-accent);
--th-tabs-badge-text:            var(--th-neutral-0);


/* -- ACCORDION -------------------------------------------------------- */
--th-accordion-border:           var(--th-color-border);
--th-accordion-bg:               var(--th-neutral-0);
--th-accordion-header-padding:   var(--th-space-4);
--th-accordion-body-padding:     var(--th-space-4);
--th-accordion-chevron-color:    var(--th-neutral-400);
--th-accordion-chevron-size:     var(--th-icon-sm);
--th-accordion-transition:       var(--th-transition-normal);
--th-accordion-header-hover:     var(--th-neutral-50);
--th-accordion-nested-bg:        var(--th-neutral-50);
--th-accordion-title-font:       var(--th-text-sm);
--th-accordion-title-weight:     var(--th-font-medium);
--th-accordion-radius:           var(--th-radius-lg);


/* -- PROGRESS BAR ----------------------------------------------------- */
--th-progress-height:            6px;
--th-progress-bg:                var(--th-neutral-200);
--th-progress-fill:              var(--th-color-primary);
--th-progress-radius:            var(--th-radius-full);
--th-progress-indeterminate-bg:  var(--th-color-primary);
--th-progress-circular-size:     40px;
--th-progress-circular-width:    4px;
--th-progress-label-color:       var(--th-color-text-secondary);
--th-progress-label-font:        var(--th-text-xs);
--th-progress-transition:        var(--th-transition-slow);


/* -- CHIP / TAG ------------------------------------------------------- */
--th-chip-bg:                    var(--th-neutral-100);
--th-chip-text:                  var(--th-color-text);
--th-chip-border:                var(--th-color-border);
--th-chip-radius:                var(--th-radius-full);
--th-chip-padding:               var(--th-space-1) var(--th-space-3);
--th-chip-font:                  var(--th-text-sm);
--th-chip-remove-color:          var(--th-neutral-500);
--th-chip-remove-hover:          var(--th-color-danger);
--th-chip-selected-bg:           var(--th-color-primary);
--th-chip-selected-text:         var(--th-neutral-0);
--th-chip-filter-bg:             var(--th-color-primary-subtle);
--th-chip-filter-text:           var(--th-color-primary);


/* -- AVATAR ----------------------------------------------------------- */
--th-avatar-bg:                  var(--th-neutral-200);
--th-avatar-text:                var(--th-neutral-600);
--th-avatar-font:                var(--th-text-sm);
--th-avatar-font-weight:         var(--th-font-semibold);
--th-avatar-radius:              var(--th-radius-full);
--th-avatar-border:              2px solid var(--th-neutral-0);
--th-avatar-badge-bg:            var(--th-color-success);
--th-avatar-badge-size:          12px;
--th-avatar-group-overlap:       var(--th-space-n-2);
--th-avatar-group-border:        2px solid var(--th-neutral-0);


/* -- DRAWER ----------------------------------------------------------- */
--th-drawer-bg:                  var(--th-neutral-0);
--th-drawer-shadow:              var(--th-shadow-2xl);
--th-drawer-width:               380px;
--th-drawer-width-lg:            480px;
--th-drawer-overlay:             var(--th-color-bg-overlay);
--th-drawer-header-border:       var(--th-color-border-light);
--th-drawer-close-color:         var(--th-neutral-400);
--th-drawer-close-hover:         var(--th-color-text);
--th-drawer-handle-bg:           var(--th-neutral-300);
--th-drawer-handle-width:        40px;
--th-drawer-animation-enter:     var(--th-ease-entrance);
--th-drawer-animation-duration:  var(--th-duration-modal);


/* -- BOTTOM NAV ------------------------------------------------------- */
--th-bottom-nav-height:          56px;
--th-bottom-nav-bg:              var(--th-neutral-0);
--th-bottom-nav-shadow:          0 -1px 6px rgba(0, 0, 0, 0.08);
--th-bottom-nav-border:          var(--th-color-border-light);
--th-bottom-nav-z:               var(--th-z-fixed);
--th-bottom-nav-text:            var(--th-neutral-500);
--th-bottom-nav-text-active:     var(--th-color-primary);
--th-bottom-nav-icon-size:       var(--th-icon-lg);
--th-bottom-nav-font:            var(--th-text-2xs);
--th-bottom-nav-badge-bg:        var(--th-color-accent);
--th-bottom-nav-badge-text:      var(--th-neutral-0);
--th-bottom-nav-badge-size:      16px;
--th-bottom-nav-safe-area:       env(safe-area-inset-bottom, 0px);
--th-bottom-nav-items:           5;
--th-bottom-nav-active-bg:       var(--th-color-primary-subtle);
--th-bottom-nav-active-radius:   var(--th-radius-lg);
--th-bottom-nav-gap:             var(--th-space-1);
--th-bottom-nav-padding:         var(--th-space-1) 0;


/* -- CAROUSEL --------------------------------------------------------- */
--th-carousel-arrow-size:        40px;
--th-carousel-arrow-bg:          var(--th-neutral-0);
--th-carousel-arrow-shadow:      var(--th-shadow-md);
--th-carousel-arrow-color:       var(--th-color-text);
--th-carousel-arrow-hover:       var(--th-neutral-50);
--th-carousel-arrow-radius:      var(--th-radius-full);
--th-carousel-dot-size:          8px;
--th-carousel-dot-color:         var(--th-neutral-300);
--th-carousel-dot-active:        var(--th-color-primary);
--th-carousel-dot-gap:           var(--th-space-2);
--th-carousel-progress-height:   3px;
--th-carousel-progress-bg:       var(--th-neutral-200);
--th-carousel-progress-fill:     var(--th-color-primary);
--th-carousel-gap:               var(--th-grid-gap-lg);
--th-carousel-swipe-threshold:   50px;


/* -- STORY BAR -------------------------------------------------------- */
--th-story-circle-size:          68px;
--th-story-image-size:           60px;
--th-story-ring-width:           2px;
--th-story-ring-color:           var(--th-neutral-300);
--th-story-ring-active:          var(--th-gradient-accent);
--th-story-label-font:           var(--th-text-2xs);
--th-story-label-color:          var(--th-color-text-secondary);
--th-story-gap:                  var(--th-space-3);
--th-story-active-scale:         1.05;
--th-story-transition:           var(--th-transition-fast);


/* -- COUPON INPUT ----------------------------------------------------- */
--th-coupon-bg:                  var(--th-neutral-0);
--th-coupon-border:              var(--th-color-border);
--th-coupon-border-focus:        var(--th-color-primary);
--th-coupon-radius:              var(--th-radius-lg);
--th-coupon-btn-bg:              var(--th-color-primary);
--th-coupon-btn-text:            var(--th-neutral-0);
--th-coupon-applied-bg:          var(--th-emerald-50);
--th-coupon-applied-border:      var(--th-emerald-200);
--th-coupon-applied-text:        var(--th-emerald-700);
--th-coupon-remove-color:        var(--th-neutral-500);


/* -- ADDRESS CARD ----------------------------------------------------- */
--th-address-bg:                 var(--th-neutral-0);
--th-address-border:             var(--th-color-border);
--th-address-radius:             var(--th-radius-xl);
--th-address-padding:            var(--th-space-4);
--th-address-default-badge-bg:   var(--th-color-primary-subtle);
--th-address-default-badge-text: var(--th-color-primary);
--th-address-edit-color:         var(--th-color-text-link);
--th-address-delete-color:       var(--th-color-danger);
--th-address-radio-size:         20px;
--th-address-radio-checked:      var(--th-color-primary);
--th-address-selected-border:    var(--th-color-primary);
--th-address-compact-padding:    var(--th-space-3);


/* -- PAYMENT METHOD --------------------------------------------------- */
--th-payment-bg:                 var(--th-neutral-0);
--th-payment-border:             var(--th-color-border);
--th-payment-radius:             var(--th-radius-lg);
--th-payment-padding:            var(--th-space-4);
--th-payment-icon-height:        24px;
--th-payment-radio-size:         20px;
--th-payment-radio-checked:      var(--th-color-primary);
--th-payment-selected-border:    var(--th-color-primary);
--th-payment-selected-bg:        var(--th-color-primary-subtle);
--th-payment-form-bg:            var(--th-neutral-50);
--th-payment-3d-badge-bg:        var(--th-emerald-50);
--th-payment-3d-badge-text:      var(--th-emerald-700);


/* -- ORDER STATUS ----------------------------------------------------- */
--th-order-timeline-line:        var(--th-neutral-200);
--th-order-timeline-line-active: var(--th-color-success);
--th-order-timeline-dot-size:    16px;
--th-order-timeline-dot-bg:      var(--th-neutral-200);
--th-order-timeline-dot-active:  var(--th-color-success);
--th-order-timeline-dot-current: var(--th-color-primary);
--th-order-carrier-logo-height:  28px;
--th-order-tracking-bg:          var(--th-neutral-50);
--th-order-tracking-border:      var(--th-color-border);
--th-order-tracking-radius:      var(--th-radius-xl);
--th-order-status-font:          var(--th-text-sm);
--th-order-status-weight:        var(--th-font-semibold);
--th-order-date-color:           var(--th-color-text-muted);
--th-order-date-font:            var(--th-text-xs);
--th-order-card-radius:          var(--th-radius-xl);


/* -- REVIEW CARD ------------------------------------------------------ */
--th-review-bg:                  var(--th-neutral-0);
--th-review-border:              var(--th-color-border-light);
--th-review-radius:              var(--th-radius-xl);
--th-review-padding:             var(--th-space-4);
--th-review-star-input-size:     28px;
--th-review-star-input-gap:      var(--th-space-1);
--th-review-photo-size:          80px;
--th-review-photo-radius:        var(--th-radius-md);
--th-review-helpful-color:       var(--th-color-text-muted);
--th-review-helpful-active:      var(--th-color-primary);
--th-review-reply-bg:            var(--th-neutral-50);
--th-review-reply-border-left:   3px solid var(--th-color-primary);


/* -- SOCIAL PROOF ----------------------------------------------------- */
--th-social-proof-bg:            var(--th-neutral-900);
--th-social-proof-text:          var(--th-neutral-0);
--th-social-proof-accent:        var(--th-color-accent);
--th-social-proof-font:          var(--th-text-sm);
--th-social-proof-radius:        var(--th-radius-lg);
--th-social-proof-shadow:        var(--th-shadow-lg);
--th-social-proof-z:             var(--th-z-toast);
--th-social-proof-ticker-speed:  3000ms;
--th-social-proof-view-icon:     var(--th-neutral-400);
--th-social-proof-padding:       var(--th-space-3) var(--th-space-4);


/* -- BANNER / HERO ---------------------------------------------------- */
--th-banner-bg:                  var(--th-neutral-100);
--th-banner-radius:              var(--th-radius-2xl);
--th-banner-padding:             var(--th-space-12);
--th-banner-title-font:          var(--th-type-display-xl-size);
--th-banner-title-weight:        var(--th-type-display-xl-weight);
--th-banner-title-color:         var(--th-color-text);
--th-banner-desc-color:          var(--th-color-text-secondary);
--th-banner-overlay:             var(--th-gradient-hero-overlay);
--th-banner-cta-bg:              var(--th-color-accent);
--th-banner-cta-text:            var(--th-neutral-0);
--th-banner-cta-radius:          var(--th-radius-lg);
--th-banner-video-play-size:     64px;
--th-banner-split-gap:           var(--th-space-8);
--th-banner-min-height:          360px;


/* -- CATEGORY GRID ---------------------------------------------------- */
--th-category-circle-size:       80px;
--th-category-circle-bg:         var(--th-neutral-100);
--th-category-circle-radius:     var(--th-radius-full);
--th-category-icon-size:         var(--th-icon-xl);
--th-category-icon-color:        var(--th-color-primary);
--th-category-label-font:        var(--th-text-xs);
--th-category-label-color:       var(--th-color-text);
--th-category-hover-bg:          var(--th-color-primary-subtle);
--th-category-active-border:     var(--th-color-primary);
--th-category-gap:               var(--th-space-4);


/* -- FLASH SALE ------------------------------------------------------- */
--th-flash-bg:                   var(--th-gradient-campaign-flash);
--th-flash-text:                 var(--th-neutral-0);
--th-flash-countdown-bg:         rgba(0, 0, 0, 0.3);
--th-flash-countdown-text:       var(--th-neutral-0);
--th-flash-countdown-font:       var(--th-text-xl);
--th-flash-progress-bg:          rgba(255, 255, 255, 0.3);
--th-flash-progress-fill:        var(--th-neutral-0);
--th-flash-progress-height:      6px;
--th-flash-stock-text:           var(--th-neutral-0);
--th-flash-urgency-bg:           var(--th-red-600);
--th-flash-urgency-text:         var(--th-neutral-0);
--th-flash-urgency-radius:       var(--th-radius-sm);


/* -- NOTIFICATION ----------------------------------------------------- */
--th-notification-bell-color:    var(--th-neutral-600);
--th-notification-bell-hover:    var(--th-color-primary);
--th-notification-dropdown-bg:   var(--th-neutral-0);
--th-notification-dropdown-shadow: var(--th-shadow-xl);
--th-notification-dropdown-radius: var(--th-radius-xl);
--th-notification-dropdown-width: 360px;
--th-notification-unread-bg:     var(--th-color-accent);
--th-notification-unread-size:   8px;
--th-notification-card-hover:    var(--th-neutral-50);
--th-notification-dismiss-color: var(--th-neutral-400);



/* =====================================================================
   E-TICARET SPESIFIK TOKENLAR
   ===================================================================== */

/* -- Price -- */
--th-price-color:              var(--th-ink-800);
--th-price-font:               var(--th-text-md);
--th-price-weight:             var(--th-font-bold);
--th-price-sale-color:         var(--th-red-600);
--th-price-old-color:          var(--th-neutral-400);
--th-price-old-decoration:     line-through;
--th-price-installment-color:  var(--th-neutral-500);
--th-price-installment-font:   var(--th-text-xs);
--th-price-range-separator:    " - ";
--th-price-currency-position:  after;
--th-price-currency-font:      var(--th-text-sm);
--th-price-format:             "tr-TR";

/* -- Stock -- */
--th-stock-in-color:           var(--th-emerald-600);
--th-stock-low-color:          var(--th-amber-600);
--th-stock-out-color:          var(--th-red-500);
--th-stock-threshold:          5;
--th-stock-pulse-color:        var(--th-amber-500);
--th-stock-bar-height:         4px;
--th-stock-bar-bg:             var(--th-neutral-200);
--th-stock-bar-fill:           var(--th-emerald-500);

/* -- Shipping -- */
--th-shipping-free-color:      var(--th-emerald-600);
--th-shipping-free-bg:         var(--th-emerald-50);
--th-shipping-free-icon:       var(--th-emerald-500);
--th-shipping-paid-color:      var(--th-neutral-600);
--th-shipping-paid-bg:         var(--th-neutral-50);
--th-shipping-progress-bg:     var(--th-neutral-200);
--th-shipping-progress-fill:   var(--th-emerald-500);
--th-shipping-progress-height: 4px;
--th-shipping-threshold:       150;
--th-shipping-text-font:       var(--th-text-sm);

/* -- Discount -- */
--th-discount-badge-bg:        var(--th-red-600);
--th-discount-badge-text:      var(--th-neutral-0);
--th-discount-badge-radius:    var(--th-radius-sm);
--th-discount-ribbon-bg:       var(--th-red-600);
--th-discount-ribbon-text:     var(--th-neutral-0);
--th-discount-countdown-bg:    var(--th-neutral-900);
--th-discount-countdown-text:  var(--th-neutral-0);
--th-discount-countdown-digit: var(--th-neutral-800);
--th-discount-timer-separator: var(--th-color-accent);
--th-discount-timer-label:     var(--th-neutral-400);

/* -- Quantity -- */
--th-quantity-height:          36px;
--th-quantity-btn-size:        36px;
--th-quantity-btn-bg:          var(--th-neutral-100);
--th-quantity-btn-hover:       var(--th-neutral-200);
--th-quantity-btn-color:       var(--th-color-text);
--th-quantity-input-width:     48px;
--th-quantity-border:          var(--th-color-border);
--th-quantity-radius:          var(--th-radius-md);

/* -- Wishlist -- */
--th-wishlist-color:           var(--th-neutral-400);
--th-wishlist-color-active:    var(--th-rose-500);
--th-wishlist-size:            24px;
--th-wishlist-bg:              rgba(255, 255, 255, 0.9);
--th-wishlist-bg-hover:        var(--th-neutral-0);
--th-wishlist-radius:          var(--th-radius-full);
--th-wishlist-shadow:          var(--th-shadow-sm);


} /* :root sonu */


/* =====================================================================
   RESPONSIVE TOKEN OVERRIDELARI
   ===================================================================== */

/* -- XSMALL: Kucuk telefon (< 576px) -- */
@media (max-width: 576px) {
  :root {
    --th-container-padding:      var(--th-space-4);
    --th-text-5xl:               32px;
    --th-text-4xl:               26px;
    --th-text-3xl:               22px;
    --th-text-2xl:               20px;
    --th-text-xl:                18px;
    --th-text-sm:                12px;
    --th-header-height:          56px;
    --th-header-topbar-height:   0px;
    --th-header-nav-height:      0px;
    --th-pdp-gallery-thumb-size: 48px;
    --th-filter-drawer-width:    100%;
    --th-minicart-width:         100%;
    --th-card-body-padding:      var(--th-space-2);
    --th-card-title-font:        var(--th-text-xs);
    --th-card-price-font:        var(--th-text-sm);
    --th-trust-padding:          var(--th-space-3);
    --th-modal-width-sm:         calc(100% - 32px);
    --th-modal-width-md:         calc(100% - 32px);
    --th-scrolltop-size:         40px;
    --th-whatsapp-size:          48px;
    --th-announce-height:        36px;
    --th-announce-font:          var(--th-text-xs);
    /* v5 extensions */
    --th-page-gutter-xs:         12px;
    --th-section-gap-lg:         32px;
    --th-section-gap-xl:         48px;
    --th-grid-gap-xl:            16px;
    --th-type-display-2xl-size:  30px;
    --th-type-display-xl-size:   24px;
    --th-type-display-lg-size:   20px;
    --th-type-h1-size:           20px;
    --th-type-h2-size:           18px;
    --th-type-h3-size:           16px;
    --th-bottom-nav-height:      56px;
    --th-banner-padding:         var(--th-space-6);
    --th-banner-min-height:      240px;
    --th-drawer-width:           100%;
    --th-auth-card-padding:      var(--th-space-5);
    --th-category-circle-size:   64px;
  }
}

/* -- SMALL: Buyuk telefon (576px - 767px) -- */
@media (min-width: 576px) and (max-width: 768px) {
  :root {
    --th-container-padding:      var(--th-space-4);
    --th-text-5xl:               36px;
    --th-text-4xl:               28px;
    --th-text-3xl:               24px;
    --th-header-height:          56px;
    --th-header-topbar-height:   0px;
    --th-header-nav-height:      0px;
    --th-pdp-gallery-thumb-size: 48px;
    --th-filter-drawer-width:    100%;
    --th-minicart-width:         100%;
    --th-card-body-padding:      var(--th-space-2);
    --th-card-title-font:        var(--th-text-xs);
    --th-card-price-font:        var(--th-text-sm);
    --th-trust-padding:          var(--th-space-3);
    --th-modal-width-sm:         calc(100% - 32px);
    --th-modal-width-md:         calc(100% - 32px);
    --th-scrolltop-size:         40px;
    --th-whatsapp-size:          48px;
    --th-announce-height:        36px;
    --th-announce-font:          var(--th-text-xs);
    /* v5 extensions */
    --th-page-gutter-sm:         16px;
    --th-section-gap-lg:         40px;
    --th-grid-gap-xl:            16px;
    --th-type-display-2xl-size:  36px;
    --th-type-display-xl-size:   28px;
    --th-type-h1-size:           22px;
    --th-bottom-nav-height:      56px;
    --th-drawer-width:           380px;
  }
}

/* -- MEDIUM: Tablet (768px - 991px) -- */
@media (min-width: 768px) and (max-width: 992px) {
  :root {
    --th-container-padding:      var(--th-space-6);
    --th-text-5xl:               42px;
    --th-text-4xl:               32px;
    --th-text-3xl:               26px;
    --th-header-height:          100px;
    --th-header-topbar-height:   32px;
    --th-filter-drawer-width:    360px;
    --th-minicart-width:         400px;
    /* v5 extensions */
    --th-page-gutter-md:         24px;
    --th-section-gap-lg:         48px;
    --th-section-gap-xl:         64px;
    --th-grid-gap-xl:            20px;
    --th-type-display-2xl-size:  40px;
    --th-type-display-xl-size:   32px;
    --th-type-h1-size:           24px;
    --th-sidebar-width:          var(--th-sidebar-compact);
    --th-banner-padding:         var(--th-space-8);
    --th-category-circle-size:   72px;
    --th-bottom-nav-height:      0px;
  }
}

/* -- LARGE: Kucuk masaustu (992px - 1239px) -- */
@media (min-width: 992px) and (max-width: 1240px) {
  :root {
    --th-container-padding:      var(--th-space-6);
    /* v5 extensions */
    --th-page-gutter-lg:         32px;
    --th-section-gap-xl:         64px;
    --th-grid-gap-xl:            24px;
    --th-sidebar-width:          var(--th-sidebar-default);
    --th-type-display-2xl-size:  44px;
    --th-type-display-xl-size:   34px;
    --th-banner-padding:         var(--th-space-10);
    --th-bottom-nav-height:      0px;
    --th-filter-drawer-width:    280px;
    --th-card-body-padding:      var(--th-space-3);
  }
}

/* -- XXLARGE: Buyuk masaustu (>= 1400px) -- */
@media (min-width: 1400px) {
  :root {
    --th-container-padding:      var(--th-space-8);
    --th-text-5xl:               56px;
    --th-text-4xl:               42px;
    --th-text-3xl:               34px;
    --th-text-6xl:               72px;
    --th-text-7xl:               84px;
    /* v5 extensions */
    --th-page-gutter-xl:         40px;
    --th-section-gap-xl:         80px;
    --th-section-gap-2xl:        96px;
    --th-grid-gap-xl:            32px;
    --th-type-display-2xl-size:  56px;
    --th-type-display-xl-size:   42px;
    --th-sidebar-width:          var(--th-sidebar-wide);
    --th-banner-padding:         var(--th-space-16);
    --th-banner-min-height:      420px;
    --th-category-circle-size:   96px;
    --th-card-body-padding:      var(--th-space-4);
  }
}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --th-motion-reduce-factor:       0;
    --th-duration-fastest:           0ms;
    --th-duration-fast:              0ms;
    --th-duration-normal:            0ms;
    --th-duration-slow:              0ms;
    --th-duration-slower:            0ms;
    --th-duration-slowest:           0ms;
    --th-duration-crawl:             0ms;
    --th-transition-instant:         0ms linear;
    --th-transition-fast:            0ms linear;
    --th-transition-normal:          0ms linear;
    --th-transition-slow:            0ms linear;
    --th-transition-bounce:          0ms linear;
    --th-transition-spring:          0ms linear;
    --th-transition-elastic:         0ms linear;
    --th-transition-default:         0ms linear;
    --th-skeleton-animation-duration: 0s;
  }
}


/* =====================================================================
   PRINT TOKENLARI
   ===================================================================== */
@media print {
  :root {
    --th-color-text:               #000000;
    --th-color-text-secondary:     #333333;
    --th-color-bg:                 #FFFFFF;
    --th-color-border:             #CCCCCC;
    --th-shadow-none:              none;
    --th-shadow-xs:                none;
    --th-shadow-sm:                none;
    --th-shadow-md:                none;
    --th-shadow-lg:                none;
    --th-shadow-xl:                none;
    --th-shadow-2xl:               none;
  }
}