/**
 * Dijiticaret — Tasarım sistemi tokenları.
 *
 * Bu dosya temanın tasarım dilini tanımlar ve diğer tüm stillerden
 * ÖNCE yüklenir. Renkler yönetim panelinden gelir (satır içi basılır);
 * burada ölçek, ritim, köşe, katman ve hareket sistemi tanımlıdır.
 *
 * Kural: bileşen CSS'inde sabit px/renk yazılmaz — hep token kullanılır.
 */

:root {
	/* ==================================================================
	   TİPOGRAFİ ÖLÇEĞİ — akışkan (clamp)
	   Alt sınır 390px, üst sınır 1440px viewport için ayarlandı.
	   ================================================================== */
	--fs-display: clamp(2.75rem, 1.42rem + 5.45vw, 5.75rem);
	/* Hero başlığı display'den ayrı: display ölçeği 92px'e kadar çıkıyor
	   ve mağaza hero'sunda ürünü bastırıyor. Hedef 36 → 68px. */
	--fs-hero:    clamp(2.25rem, 1.40rem + 3.40vw, 4.25rem);
	--fs-h1:      clamp(2rem, 1.42rem + 2.38vw, 3.375rem);
	--fs-h2:      clamp(1.5rem, 1.22rem + 1.14vw, 2.25rem);
	--fs-h3:      clamp(1.1875rem, 1.09rem + 0.38vw, 1.5rem);
	--fs-h4:      clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
	--fs-body-lg: clamp(1.0625rem, 1.03rem + 0.14vw, 1.1875rem);
	--fs-body:    1rem;
	--fs-sm:      0.9375rem;
	/* Yoğun arayüz adımları: tablo hücresi, filtre satırı, ürün üstverisi
	   ve rozet gibi veri yoğun alanlar için. Mağaza/ürün/sepet/hesap
	   sayfaları bu iki boyutu yoğun kullandığı için ölçeğe eklendi;
	   bileşen CSS'inde sabit rem yazılmaması kuralı ancak böyle tutuyor. */
	--fs-ui:      0.875rem;
	--fs-xs:      0.8125rem;
	--fs-meta:    0.75rem;
	--fs-label:   0.6875rem;

	--lh-tight: 1.05;
	--lh-snug:  1.18;
	--lh-base:  1.6;
	--lh-loose: 1.75;

	--ls-display: -0.03em;
	--ls-heading: -0.02em;
	--ls-body:     0;
	--ls-label:    0.09em;
	--ls-wide:     0.16em;

	--fw-light: 300;
	--fw-body:  400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ==================================================================
	   SPACING — 8px tabanlı
	   ================================================================== */
	--sp-0:  0;
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  24px;
	--sp-6:  32px;
	--sp-7:  40px;
	--sp-8:  48px;
	--sp-9:  64px;
	--sp-10: 80px;
	--sp-11: 96px;
	--sp-12: 120px;

	/* Bölüm ritmi — her bölüm aynı ağırlıkta olmasın diye 3 kademe */
	--rhythm-sm: clamp(var(--sp-7), 4vw, var(--sp-9));
	--rhythm-md: clamp(var(--sp-9), 7vw, var(--sp-11));
	--rhythm-lg: clamp(var(--sp-10), 9vw, var(--sp-12));

	/* ==================================================================
	   GRID
	   ================================================================== */
	--grid-cols: 12;
	--gutter: clamp(16px, 2.4vw, 32px);
	--content-max: 1560px;
	--wide-max: 1760px;
	/* 12 kolonluk ızgaranın tek kaynağı: bölümler kendi kolon sayısını
	   uydurmak yerine bu ızgaraya oturur. */
	--grid-gap: var(--gutter);
	--col: calc((min(100vw - var(--gutter) * 2, var(--content-max)) - var(--grid-gap) * 11) / 12);

	/* ==================================================================
	   KÖŞE YUVARLAKLIĞI — tek değer değil, sistem
	   ================================================================== */
	--r-xs:   4px;
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   16px;
	--r-xl:   24px;
	--r-full: 999px;

	/* Sepet ikonu: mask olarak kullanılır, ayrıca ikon paketi yüklenmez. */
	--icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.4a2 2 0 0 0 2 1.6h7.5a2 2 0 0 0 2-1.5L21 7H6'/%3E%3Ccircle cx='10' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='20' r='1.2'/%3E%3C/svg%3E");

	/* Bileşen bazlı eşlemeler (stil modları bunları ezer) */
	--r-button: var(--r-sm);
	--r-input:  var(--r-sm);
	--r-card:   var(--r-md);
	--r-media:  var(--r-lg);
	--r-sheet:  var(--r-xl);

	/* ==================================================================
	   KATMAN (ELEVATION) — ölçülü kullanılır
	   Modern tasarımda derinlik gölgeyle değil, boşluk ve tipografiyle
	   kurulur; gölge yalnızca gerçekten yüzen katmanlarda.
	   ================================================================== */
	--shadow-0: none;
	--shadow-1: 0 1px 2px rgba(23, 23, 23, 0.03);
	--shadow-2: 0 4px 16px rgba(23, 23, 23, 0.06);
	--shadow-3: 0 16px 48px rgba(23, 23, 23, 0.10);
	--shadow-focus: 0 0 0 3px rgba(var(--djt-primary-rgb, 17 24 39), 0.14);

	/* İnce ayırıcı — border yerine tercih edilir */
	--hairline: 1px solid var(--djt-border);

	/* ==================================================================
	   HAREKET
	   ================================================================== */
	--ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:  cubic-bezier(0.55, 0, 1, 0.45);
	--dur-fast: 160ms;
	--dur:      220ms;
	--dur-slow: 320ms;

	/* ==================================================================
	   BİLEŞEN ÖLÇÜLERİ
	   ================================================================== */
	--control-h:    46px;   /* input / normal buton */
	--control-h-sm: 38px;
	--control-h-lg: 52px;   /* birincil CTA */
	--touch-min:    44px;   /* dokunma hedefi alt sınırı */
	--header-h:     80px;
	--header-h-sm:  60px;
	--announce-h:   38px;

	/* Ürün görsel oranı — kategoriye göre ezilebilir */
	--ratio-product: 4 / 5;
	--ratio-media:   16 / 10;
	--hero-h:        clamp(540px, 44vw, 640px);
}

/* ======================================================================
   STİL MODLARI
   Renkten bağımsız karakter. Yalnızca token ezer; bileşen CSS'i
   değişmez — bu sayede altı mod tek kod tabanından çıkar.
   ====================================================================== */

/* Editoryal — büyük tipografi, çerçevesiz, geniş nefes */
body.djt-style--editorial {
	--r-button: var(--r-xs);
	--r-input:  var(--r-xs);
	--r-card:   var(--r-xs);
	--r-media:  var(--r-xs);
	--ls-heading: -0.035em;
	--card-border: none;
	--card-pad: 0;
	--rhythm-md: clamp(var(--sp-10), 8vw, var(--sp-12));
}

/* Minimal — keskin, gölgesiz, ince çizgiler */
body.djt-style--minimal {
	--r-button: var(--r-xs);
	--r-input:  var(--r-xs);
	--r-card:   0px;
	--r-media:  0px;
	--shadow-1: none;
	--shadow-2: none;
	--card-border: none;
	--card-pad: 0;
}

/* Modern — dengeli, yumuşak köşeler (varsayılan) */
body.djt-style--modern {
	--r-button: var(--r-sm);
	--r-card:   var(--r-md);
	--r-media:  var(--r-lg);
	--card-border: none;
	--card-pad: 0;
}

/* Lüks — geniş harf aralığı, ince çizgi, bol boşluk */
body.djt-style--luxury {
	--r-button: 0px;
	--r-input:  0px;
	--r-card:   0px;
	--r-media:  0px;
	--ls-heading: 0.01em;
	--ls-label: var(--ls-wide);
	--fw-heading-display: var(--fw-light);
	--rhythm-md: clamp(var(--sp-10), 9vw, var(--sp-12));
	--rhythm-lg: clamp(var(--sp-11), 11vw, 160px);
	--card-border: none;
	--card-pad: 0;
}

/* Butik — editoryal ticaret: rafine serif başlık, ölçülü yuvarlaklık,
   ürünün öne çıktığı çerçevesiz kart. Varsayılan tasarım dili. */
body.djt-style--boutique {
	--r-button: 10px;
	--r-input:  10px;
	--r-card:   12px;
	--r-media:  14px;
	--ls-heading: -0.015em;
	--card-border: none;
	--card-pad: 0;
	/* Yoğun ticari ritim: bölümler birbirini takip eder, sayfa akar.
	   Önceki değerler (64–96px) editoryal bir derginin nefesiydi; bir
	   mağazada ürünü ekrandan uzaklaştırıyordu. */
	--rhythm-sm: clamp(var(--sp-6), 2.4vw, var(--sp-7));
	--rhythm-md: clamp(var(--sp-7), 3.2vw, var(--sp-8));
	--rhythm-lg: clamp(var(--sp-8), 4vw, var(--sp-9));
}

/* Retail — kompakt, çerçeveli kart, güçlü fiyat */
body.djt-style--retail {
	--r-button: var(--r-sm);
	--r-card:   var(--r-md);
	--r-media:  var(--r-sm);
	--rhythm-md: clamp(var(--sp-8), 5vw, var(--sp-10));
	--rhythm-lg: clamp(var(--sp-9), 6vw, var(--sp-11));
	--card-border: var(--hairline);
	--card-pad: var(--sp-3);
	--ratio-product: 1 / 1;
}

/* Pazaryeri — yoğun, bilgi öncelikli */
body.djt-style--marketplace {
	--r-button: var(--r-sm);
	--r-card:   var(--r-sm);
	--r-media:  var(--r-sm);
	--rhythm-sm: var(--sp-6);
	--rhythm-md: clamp(var(--sp-7), 4vw, var(--sp-9));
	--rhythm-lg: clamp(var(--sp-8), 5vw, var(--sp-10));
	--card-border: var(--hairline);
	--card-pad: var(--sp-3);
	--ratio-product: 1 / 1;
	--fs-h2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
}

/* Varsayılan kart değişkenleri (stil modu seçilmemişse) */
:root {
	--card-border: none;
	--card-pad: 0;
	--fw-heading-display: var(--fw-semibold);
}

/* ======================================================================
   DÜZEN YARDIMCILARI
   ====================================================================== */

.u-container {
	width: 100%;
	max-width: calc(var(--content-max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.u-container--wide { max-width: calc(var(--wide-max) + var(--gutter) * 2); }
.u-container--narrow { max-width: calc(760px + var(--gutter) * 2); }
.u-container--flush { max-width: 100%; padding-inline: 0; }

/* 12 kolon grid — bileşenler span ile yerleşir */
.u-grid12 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gutter);
}

@media (min-width: 768px) {
	.u-grid12 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.u-grid12 { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }
}

/* Tipografi yardımcıları */
.u-display {
	font-family: var(--djt-font-heading);
	font-size: var(--fs-display);
	font-weight: var(--fw-heading-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	margin: 0;
}

.u-label {
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	line-height: 1.4;
}

.u-eyebrow {
	display: inline-block;
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--djt-muted);
	margin-bottom: var(--sp-3);
}

.u-measure { max-width: 62ch; }
.u-measure-sm { max-width: 46ch; }