/*
 * Dijitsu tasarım sistemi değişkenleri.
 *
 * Değerler onaylı PDF export'larından ve Adobe XD kaynağından çıkarılmıştır.
 * Tasarım tuvali 1920 px, içerik genişliği 1710 px, kenar boşluğu 105 px.
 */

:root {
	/*
	 * Akışkan tasarım birimi. XD tuvali 1920 px olduğu için 1920 ve
	 * üzerinde 1 tasarım px'i = 1 CSS px'idir. 1200–1919 arasında tüm
	 * geometri (genişlik, yükseklik, boşluk, punto) aynı katsayıyla
	 * küçülür; böylece bileşenler yatayda daralırken dikeyde 1920
	 * ölçüsünde kalmaz. `transform: scale()` değildir — her değer
	 * gerçek CSS ölçüsü olarak hesaplanır.
	 *
	 * İki birim vardır: `--dj-u` geometri içindir ve viewport'u birebir
	 * takip eder (1710u + 210u = 1920u = 100vw olduğu için kap, kenar
	 * boşluğu ve bileşen ölçüleri tuvalin tam oranını korur). `--dj-ut`
	 * tipografi içindir ve okunabilirlik için 0.75'te taban yapar.
	 */
	--dj-u: 1px;
	--dj-ut: 1px;

	/*
	 * Haber görseli oranı: ana sayfa haber kartının görsel alanı (XD 537 × 580).
	 * Haber görselleri aynı oranda hazırlanır (1073 × 1160), `cover` kırpmaz.
	 * Ana sayfa kartı, haber manşeti ve haber ızgara kartı bunu kullanır.
	 */
	--dj-news-img-ratio: 537 / 580;

	/* --- Tipografi --- */
	--dj-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--dj-fw-regular: 400;
	--dj-fw-medium: 500;
	--dj-fw-semibold: 600;
	--dj-fw-bold: 700;
	--dj-fw-extrabold: 800;

	/* 12–16 okunabilirlik tabanıdır, ölçeklenmez. */
	--dj-fs-12: 0.75rem;
	/* 13 ve 15, sabit genişlikli yoğun arayüzlerin (filtre çekmecesi) ara
	   adımlarıdır; taban gibi ölçeklenmezler. */
	--dj-fs-13: 0.8125rem;
	--dj-fs-14: 0.875rem;
	--dj-fs-15: 0.9375rem;
	--dj-fs-16: 1rem;
	/*
	 * Ürün kartındaki 14 px'ler tasarımın kendi ölçüsüdür (kategori etiketi,
	 * belge bağlantısı): sabit rem kullanıldığında 1470'te 18.3 tasarım px'e
	 * çıkıyordu. Bu değişken 18+ ailesiyle aynı kuralı izler; `--dj-fs-14`
	 * sabit kalır, böylece başlık/altbilgi gibi kilitli alanlar etkilenmez.
	 */
	/* Aynı gerekçe 12 için: alt bilgi imza satırı tasarımda 12 px. */
	/*
	 * Yardımcı / küçük metin tabanı 14 px: akışkan küçük ölçüler (12–16)
	 * 1024–1919 aralığında 14 px'in altına inmez.
	 */
	--dj-fs-12-fluid: max(0.875rem, calc(12 * var(--dj-ut)));
	--dj-fs-13-fluid: max(0.875rem, calc(13 * var(--dj-ut)));
	--dj-fs-14-fluid: max(0.875rem, calc(14 * var(--dj-ut)));
	/* Aynı gerekçe 16 için: destek kartı gövdesi tasarımda 16 px. */
	--dj-fs-16-fluid: max(0.875rem, calc(16 * var(--dj-ut)));
	/* 18 ve üzeri display tipografisi tasarımla orantılı küçülür. */
	--dj-fs-18: max(14px, calc(18 * var(--dj-ut)));
	--dj-fs-20: max(15px, calc(20 * var(--dj-ut)));
	--dj-fs-22: max(16px, calc(22 * var(--dj-ut)));
	--dj-fs-24: max(17px, calc(24 * var(--dj-ut)));
	--dj-fs-26: max(18px, calc(26 * var(--dj-ut)));
	--dj-fs-28: max(19px, calc(28 * var(--dj-ut)));
	--dj-fs-32: max(21px, calc(32 * var(--dj-ut)));
	--dj-fs-36: max(23px, calc(36 * var(--dj-ut)));
	--dj-fs-42: max(26px, calc(42 * var(--dj-ut)));
	--dj-fs-52: max(32px, calc(52 * var(--dj-ut)));
	--dj-fs-64: max(40px, calc(64 * var(--dj-ut))); /* Sayfa başlığı (H1) — ölçeğin bir üst kademesi */
	--dj-fs-80: max(48px, calc(80 * var(--dj-ut))); /* Vitrin başlığı — en üst kademe */

	/*
	 * Gövde metni (içerik sayfası paragrafı, yasal metin): 1920'de 18 px,
	 * tasarımla birlikte küçülür ama 16 px'in altına inmez; mobilde 16 px.
	 * Akışkan değer kullanan diğer gövde metinleri aynı tabanı
	 * `max(1rem, …)` ile alır. Yardımcı / küçük metin tabanı 14 px'tir.
	 */
	--dj-fs-body: max(1rem, var(--dj-fs-18));

	--dj-lh-tight: 1.2;
	--dj-lh-snug: 1.35;
	--dj-lh-normal: 1.5;
	--dj-lh-relaxed: 1.65;

	/* --- Renk --- */
	--dj-ink: #101213;          /* Ana metin ve koyu yüzeyler */
	--dj-ink-soft: #131718;     /* Footer / üst şerit alternatifi */
	--dj-ink-deep: #231f20;     /* Koyu grafik dolgusu */
	--dj-ink-700: #27272a;
	--dj-white: #ffffff;

	--dj-muted: #71717a;        /* İkincil metin */
	--dj-gray-600: #666666;     /* Puan rozeti sayısı (XD rgb(102,102,102)) */
	--dj-gray-400: #b5b5b5;     /* Pasif metin, eski fiyat */
	--dj-tab-idle: #a1a1aa;     /* Pasif sekme metni (XD) */
	--dj-gray-300: #cccccc;     /* Koyu zemin üzeri ikincil metin */
	--dj-dot-idle: #989898;     /* Hero slayt noktası (XD ölçümü) */
	--dj-line: #dee2e6;         /* Ayırıcı çizgi ve form kenarı */
	--dj-line-field: #d4d4d8;   /* İçerik sayfası form alanı kenarı (Fynode iletişim formu) */
	--dj-surface: #f4f4f5;      /* Kart ve chip zemini */
	--dj-surface-2: #fafafa;
	--dj-surface-promo: #beb8a8; /* Kategori tanıtım paneli kum zemini (XD Rectangle 496) */

	--dj-surface-tile: #efefef;   /* Tanıtım kutusu zemini (XD Rectangle 699/700) */

	--dj-red: #bc0000;          /* İndirim rozeti */
	--dj-red-bright: #ed1c24;   /* Vurgulu kırmızı */
	--dj-amber: #fdb913;        /* Puan yıldızı */
	--dj-star: #f3ce49;         /* Kart puan rozeti yıldızı (XD Path 3499) */
	--dj-green: #1f9d55;
	--dj-focus: #0b5fff;

	--dj-overlay: rgba(16, 18, 19, 0.45);

	/* CTA oku (`dijitsu_cta_caret()` çizimi) — SVG basılamayan düğmelerde maske. */
	--dj-cta-caret-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12' fill='none' stroke='%23000' stroke-width='2.26' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.4 1L6 6l-4.6 5'/%3E%3C/svg%3E");

	/* --- Ölçek --- */
	--dj-space-4: 4px;
	--dj-space-8: calc(8 * var(--dj-u));
	--dj-space-12: calc(12 * var(--dj-u));
	--dj-space-16: calc(16 * var(--dj-u));
	--dj-space-20: calc(20 * var(--dj-u));
	--dj-space-24: calc(24 * var(--dj-u));
	--dj-space-30: calc(30 * var(--dj-u));
	--dj-space-40: calc(40 * var(--dj-u));
	--dj-space-50: calc(50 * var(--dj-u));
	--dj-space-60: calc(60 * var(--dj-u));
	--dj-space-80: calc(80 * var(--dj-u));
	--dj-space-100: calc(100 * var(--dj-u));
	--dj-space-120: calc(120 * var(--dj-u));

	/* --- Yerleşim --- */
	/*
	 * Sayfa içeriğinin sonu ile ortak güven bandı arasındaki **tek** boşluk.
	 * Sayfa başına ek alt boşluk üretilmez; bu değer her sayfada aynıdır ve
	 * yalnız kırılım noktasında değişir (bkz. `footer.css` → `.dj-trust`).
	 */
	--dj-content-trust-gap: 40px;

	--dj-container: calc(1710 * var(--dj-u));
	--dj-gutter: calc(30 * var(--dj-u));
	--dj-carousel-pad-b: 4px;   /* Karusel kaydırma payı */
	--dj-page-padding: calc(105 * var(--dj-u));
	--dj-grid-columns: 12;

	--dj-topbar-height: calc(50 * var(--dj-u));
	--dj-header-height: calc(110 * var(--dj-u)); /* XD Rectangle 849: 1920x110 */
	--dj-mega-height: calc(680 * var(--dj-u));  /* Üç mega menü için paylaşılan dış yükseklik: en uzun içerik (Beyaz Eşya, 11 satır) taşmadan sığar */

	/* --- Kenarlık ve köşe --- */
	--dj-radius-sm: calc(8 * var(--dj-u));
	--dj-radius-md: calc(16 * var(--dj-u));
	--dj-radius-lg: calc(24 * var(--dj-u));
	--dj-radius-pill: 999px;
	--dj-border: 1px solid var(--dj-line);

	/* --- Buton --- */
	--dj-button-height: calc(60 * var(--dj-u));
	--dj-button-height-sm: calc(50 * var(--dj-u));
	--dj-button-padding: 0 calc(32 * var(--dj-u));

	/* --- Ürün kartı --- */
	--dj-card-width: calc(537 * var(--dj-u));
	--dj-card-gap: calc(50 * var(--dj-u));
	--dj-card-padding: calc(30 * var(--dj-u));
	/*
	 * Alt iç boşluk kutu ölçüsüdür; belirleyici olan fiyat mürekkebinin kart
	 * alt kenarına uzaklığıdır — onaylı tasarımda 51.75 (PDF: mürekkep 698.25).
	 * Fiyat satır kutusu mürekkebin altında ~5.3 px daha sürdüğü için kutu
	 * değeri 47.72'dir.
	 */
	--dj-card-padding-b: calc(47.72 * var(--dj-u));
	--dj-card-radius: var(--dj-radius-md);
	/*
	 * Ürün kartı görsel kutusu.
	 *
	 * XD `Component 26` Hover State ölçümü: ürün görseli 141, 110 · 255 × 350
	 * — normal state ile birebir aynı, hover'da küçülmüyor. Eylem şeridi
	 * (`Rectangle 1004`) 118, 399 · 300 × 60, yani **ürünün alt bölümünün
	 * üstüne biniyor**. Tasarımda şerit için sahnede yer ayrılmaz; görselin
	 * ölçüsünü şeridin yüksekliği belirlemez.
	 *
	 * `--dj-card-image-rise`: sahne, başlık satırının altından bu kadar
	 * yukarı çekilir — tasarımda rozet ile görsel aynı bandı paylaşır.
	 * `--dj-card-image-height`: görselin kutusu sahnenin bu kadarını kaplar;
	 * kalan alt pay hover'daki şeridin okunur kalmasını sağlar.
	 *
	 * `--dj-card-image-lift`: hover'daki %2 büyümenin üst payı; sahnedeki
	 * `overflow: hidden` görselin üst kenarını kesmesin diye ayrılır.
	 */
	--dj-card-image-rise: calc(22 * var(--dj-u));
	--dj-card-image-lift: calc(6 * var(--dj-u));
	--dj-card-image-height: 92%;

	/*
	 * Yardımcı sayfaların (Favoriler, Karşılaştır, Sepet, Hesabım) kırıntı
	 * yolundan sonraki ortak üst payı. Referans Favoriler ve Sepet'in
	 * ölçülen ritmidir; sayfa başına ayrı değer üretilmez.
	 */
	--dj-utility-content-gap: calc(78 * var(--dj-u));

	/* --- Hareket --- */
	/*
	 * Etkileşim ilkelleri. Aynı tip kontrol aynı hareketi kullanır; süre ve
	 * yumuşatma tek yerden yönetilir. Mevcut `--dj-transition` adları
	 * korunur, yalnız değerleri bu ilkellerden türetilir.
	 */
	--dj-motion-fast: 140ms;
	--dj-motion-base: 200ms;
	--dj-motion-slow: 320ms;
	/* Slider geçişi — Fynode ölçümü: 600 ms, ease. */
	--dj-motion-slide: 600ms;
	--dj-ease-standard: ease;

	--dj-transition: var(--dj-motion-base) var(--dj-ease-standard);
	--dj-transition-fast: var(--dj-motion-fast) var(--dj-ease-standard);
	--dj-transition-slow: var(--dj-motion-slow) var(--dj-ease-standard);
	--dj-transition-slide: var(--dj-motion-slide) var(--dj-ease-standard);

	--dj-shadow-sm: 0 1px 2px rgba(16, 18, 19, 0.06);
	--dj-shadow-md: 0 8px 24px rgba(16, 18, 19, 0.10);
	--dj-shadow-lg: 0 24px 60px rgba(16, 18, 19, 0.18);

	--dj-z-header: 100;
	--dj-z-drawer: 200;
	--dj-z-overlay: 190;
}

/*
 * Masaüstü akışkan aralık: 1200–1919.
 * 1920'de birim 1 px (XD birebir). Aşağı doğru viewport oranında küçülür,
 * Geometri viewport'la birebir; tipografi 1440 ve altında 0.75'te
 * sabitlenir — daha fazlası okunabilirliği bozar.
 * Alt sınır 1024: masaüstü kompozisyonunun (4/3 kolon, yan yana paneller)
 * korunduğu son aralık. 1023 ve altında birim tekrar 1 px olur; orada
 * düzen zaten yeniden diziliyor ve mevcut mobil kuralları değişmez.
 */
@media (min-width: 1024px) and (max-width: 1919px) {
	:root {
		--dj-u: calc(100vw / 1920);
		--dj-ut: clamp(0.75px, 100vw / 1920, 1px);
	}
}

/* Tablet: kenar boşlukları ve başlık ölçeği küçülür. */
@media (max-width: 1199px) {
	:root {
		--dj-page-padding: 40px;
		--dj-gutter: 24px;
		--dj-card-gap: 24px;
		--dj-header-height: 84px;
		--dj-fs-42: 2rem;
		--dj-fs-52: 2.5rem;
		--dj-fs-64: 3rem;
		--dj-fs-80: 3.5rem;
		--dj-fs-36: 1.875rem;
		--dj-fs-32: 1.75rem;
	}
}

/* Mobil */
@media (max-width: 767px) {
	:root {
		--dj-page-padding: 20px;
		--dj-gutter: 16px;
		--dj-card-gap: 16px;
		--dj-header-height: 72px;
		--dj-topbar-height: 44px;
		--dj-button-height: 54px;
		--dj-card-padding: 20px;
		--dj-card-padding-b: 20px;
		--dj-fs-42: 1.75rem;
		--dj-fs-52: 2rem;
		--dj-fs-64: 2.25rem;
		--dj-fs-80: 2.5rem;
		--dj-fs-36: 1.625rem;
		--dj-fs-32: 1.5rem;
		--dj-fs-28: 1.375rem;

		/*
		 * Mobil semantik tipografi ölçeği. Masaüstü değerleri 1023 altında
		 * birim 1 px'e döndüğü için birebir px olarak kalıyordu (bölüm
		 * gözcüsü 22, gövde 18, alt bilgi 16) ve telefon ekranında
		 * masaüstünün küçültülmemiş kopyası gibi okunuyordu. Bölümler kendi
		 * değerini üretmez; bu beş kademeden birine bağlanır.
		 */
		--dj-m-fs-title: 22px;     /* Tanıtım / kutu / servis başlığı */
		--dj-m-lh-title: 1.22;
		--dj-m-fs-card: 16px;      /* Kart ve madde başlığı */
		--dj-m-lh-card: 1.35;
		--dj-m-fs-body: 16px;      /* Bölüm gövde metni (gövde tabanı) */
		--dj-m-lh-body: 1.55;
		--dj-m-fs-small: 14px;     /* İkincil gövde: alt bilgi, madde listesi (yardımcı taban) */
		--dj-m-lh-small: 1.55;
		--dj-m-fs-eyebrow: 14px;   /* Gözcü, meta (yardımcı taban) */
		--dj-fs-body: 1rem;

		/*
		 * Bölüm CTA'ları (tanıtım, kutular, servis, haberler) tek ölçü:
		 * 44 px dokunma yüksekliği, 15 px metin. Ürün kartının "Sepete Ekle"
		 * düğmesi ticari birincil eylem olarak kendi ölçüsünde kalır.
		 */
		--dj-m-cta-h: 44px;
		--dj-m-fs-button: 15px;
	}
}

/* İçerik → güven bandı ritmi: tek yerde, kırılım başına tek değer. */
@media (min-width: 768px) {
	:root {
		--dj-content-trust-gap: 56px;
	}
}

@media (min-width: 1024px) {
	:root {
		--dj-content-trust-gap: 64px;
	}
}

@media (min-width: 1280px) {
	:root {
		--dj-content-trust-gap: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dj-transition: 0ms;
		--dj-transition-slow: 0ms;
	}
}