/*
 * Dijitsu — tablet kompozisyon katmanı (768–1199).
 *
 * İlke: tablet, masaüstünün küçültülmüşü ya da mobilin büyütülmüşü değil,
 * kendi yoğunluk kademesi olan ayrı bir bant. Viewport büyüdükçe bileşenler
 * yalnız orantılı büyümez; her bölüm bir sonraki **kompozisyon yoğunluğuna**
 * geçer (3 kart → 4 kart, 1 kolon → 2 kolon, 2×2 → 4×1).
 *
 * İki alt bant:
 *   A) 768–899   dikey / kompakt tablet
 *   B) 900–1199  yatay / geniş tablet
 *
 * Marka dili, bölüm içerikleri, renkler, tipografi ölçeği ve bileşen
 * sistemi korunur; değişen yalnız sarmalayıcı ızgara/şerit geometrisidir.
 * Ürün kartının, ürün detayının ve arşiv ızgarasının onaylı geometrisine
 * dokunulmaz. ≤767 ve ≥1200 bu dosyadan etkilenmez.
 *
 * Yükleme sırası: bölüm stillerinin tamamından sonra (`inc/assets.php`),
 * böylece eşit özgüllükte son söz bu katmandadır.
 */

/* ------------------------------------------------------------------ */
/* 1. Bant tokenları                                                   */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199px) {
	:root {
		/*
		 * Aynı seviyedeki bölümler arası tek ritim. Sabit 56 px yerine
		 * akışkan: dar tablette sıkışmaz, geniş tablette masaüstü ritmine
		 * yaklaşır. Bölüm İÇİ dolgu bu değerden ayrıdır.
		 */
		--dj-tablet-gap: clamp(48px, 5.5vw, 64px);

		/*
		 * Kap yan boşluğu. Referans tablette içerik ekranı neredeyse tam
		 * kullanıyor (~16 px); Dijitsu 40–48 px ile masaüstü ritmini
		 * taşıyordu ve her bölüm dar kalıyordu. Marka dili korunacak kadar
		 * pay bırakılıp içerik belirgin genişletilir: 768'de içerik
		 * 688 → 720, 1024'te 912 → 960 px.
		 */
		--dj-page-padding: 24px;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	:root {
		--dj-page-padding: 32px;
	}
}

/*
 * 1024–1199'da tasarım birimi masaüstü tuvaline bağlı olduğu için 0.53'e
 * düşüyor ve kabuk + anasayfa %53 ölçekte çiziliyordu (ölçüldü: logo
 * 225u → 96 px). Bant boyunca tablet tabanına oturtulur. Kapsam bilinçli
 * olarak dar: arşiv ızgarası ve ürün detayı kendi onaylı ölçeğinde kalır.
 */
@media (min-width: 1024px) and (max-width: 1199px) {
	.dj-header,
	.dj-footer,
	.dj-home .dj-main {
		--dj-u: 0.8px;
		--dj-ut: 0.8px;
	}
}

/* ------------------------------------------------------------------ */
/* 2. Başlık — bant boyunca tek kompakt sistem                         */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199px) {
	.dj-topbar {
		--dj-topbar-height: 44px;
		font-size: var(--dj-fs-14);
	}

	.dj-topbar__inner,
	.dj-topbar a,
	.dj-topbar button,
	.dj-announce {
		font-size: var(--dj-fs-14);
	}

	/*
	 * Menü etiketleri kendi kuralından 16 px geliyordu; şerit içinde iki
	 * ayrı ölçek oluşuyor ve duyuru metni yer bulamayıp kırpılıyordu.
	 */
	.dj-topbar .dj-menu__label,
	.dj-topbar .dj-lang__label {
		font-size: var(--dj-fs-14);
	}

	.dj-header {
		--dj-header-height: 76px;
	}

	/*
	 * Üst şerit paneli tetikleyicinin optik merkezine hizalı; kap boşluğu
	 * daraldığında tetikleyici sağa kaydığı için panel görünüm alanını
	 * taşıyordu (ölçüldü: 768'de 8.5 px). Bantta panel merkeze değil kap
	 * kenarına hizalanır; içeriği ve genişliği değişmez.
	 */
	.dj-menu--topbar .dj-menu__item--parent:last-child > .dj-menu__submenu {
		inset-inline-start: auto;
		inset-inline-end: 0;
		translate: none;
	}

	/*
	 * Logo bant boyunca kademesiz büyür ve 1200'deki masaüstü köprüsünün
	 * başladığı değere (160) varır — sınırda sıçrama olmaz.
	 */
	.dj-logo {
		width: clamp(156px, 13.4vw, 160px);
	}

	/*
	 * Referans tablette başlık üç çapaya iner: menü · marka · sepet.
	 * Arama, hesap, favori ve karşılaştırma alt gezinme çubuğunda zaten
	 * var (Ara · Favoriler · Karşılaştır · Hesabım) — başlıkta ikinci kez
	 * durmaları ikon kalabalığı yaratıyordu. Bileşenler kaldırılmaz,
	 * yalnız bu bantta başlıktan gizlenir; işlevin tamamı çubukta sürer.
	 */
	.dj-navbar__actions > [data-dj-search-open],
	.dj-navbar__actions .dj-action--wishlist,
	.dj-navbar__actions .dj-action--compare,
	.dj-navbar__actions .dj-action--account {
		display: none;
	}

	.dj-navbar__actions {
		gap: var(--dj-space-8);
	}

	.dj-action,
	.dj-navbar__burger {
		min-width: 44px;
		min-height: 44px;
	}

	.dj-action svg,
	.dj-navbar__burger svg {
		width: 24px;
		height: 24px;
	}
}

/*
 * Masaüstü gezinmesi 1100–1199'da sığıyor ama sıkışıyordu. Bant boyunca
 * çekmece gezinmesi kullanılır — aynı bileşen, ikinci bir menü yok.
 */
@media (min-width: 1100px) and (max-width: 1199px) {
	.dj-navbar__nav {
		display: none;
	}

	.dj-navbar__burger {
		display: inline-flex;
	}

	/*
	 * Gezinme gizlenince `1fr auto 1fr` ızgarasının orta sütunu araçlara
	 * kalıyor ve araç grubu ortaya itiliyordu; ≤1099'daki düzeltmenin
	 * aynısı uygulanır.
	 */
	.dj-navbar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--dj-space-12);
	}

	.dj-navbar__brand {
		min-width: 0;
	}

	.dj-navbar .dj-logo {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* 3. Hero                                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199px) {
	.dj-hero__viewport {
		height: auto;
		aspect-ratio: auto;
		min-height: 0;
	}
}

/*
 * Kenar okları kabın 30 px dışında duruyor; kap boşluğu 24 px'e indiğinde
 * görünüm alanını 6 px taşıyorlardı (ölçüldü). Ok, kap boşluğu kadar
 * dışarı alınır: dış kenarı tam ekran kenarına oturur, kontrol kalır.
 */
@media (min-width: 768px) and (max-width: 899px) {
	.dj-carousel--edge .dj-carousel__arrow--prev {
		inset-inline-start: calc(-1 * var(--dj-page-padding));
	}

	.dj-carousel--edge .dj-carousel__arrow--next {
		inset-inline-end: calc(-1 * var(--dj-page-padding));
	}
}

/* Dikey tablet: hero portre orana yakın, ilk ekranı tek başına doldurmaz. */
@media (min-width: 768px) and (max-width: 899px) {
	.dj-hero__viewport {
		height: 420px;
	}
}

/* Yatay tablet: daha yatay çalışır, masaüstü kompozisyonuna yaklaşır. */
@media (min-width: 900px) and (max-width: 1199px) {
	.dj-hero__viewport {
		height: 400px;
	}

	.dj-hero__image {
		min-height: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* 4. Ana kategoriler — 3 kart → 4 kart                                */
/* ------------------------------------------------------------------ */

/*
 * Yoğunluk kademesi: dar tablette üç TAM kart, geniş tablette dört.
 * Yarım kart bırakılmaz; şerit kap kenarında biter, devamı oklarla
 * gezilir. Kart genişliği sütun formülünden gelir, ürüne özel ölçü yok.
 */
@media (min-width: 768px) and (max-width: 899px) {
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - 2 * var(--dj-gutter)) / 3);
		gap: var(--dj-gutter);
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - 3 * var(--dj-gutter)) / 4);
		gap: var(--dj-gutter);
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

/* ------------------------------------------------------------------ */
/* 5. Popüler ürünler — 2 kart + pay → 3 tam kart                      */
/* ------------------------------------------------------------------ */

/*
 * Ürün kartının kendi geometrisi (rozet, puan, enerji, belge, başlık,
 * fiyat, CTA) product.css'te onaylıdır; burada yalnız şeridin sütun
 * ölçüsü verilir, kart yeniden tasarlanmaz.
 *
 * Kaç kart gösterileceği viewport genişliğine değil kartın okunabilir en
 * küçük genişliğine bağlıdır — tiles bloğundaki ilkenin aynısı. Ölçüldü:
 *
 *   285 px ve üstü  → başlık iki satırda tam, fiyat tek satır, belge
 *                     bağlantısı tek satır  (sağlıklı)
 *   257 px          → belge bağlantısı iki satıra düşüyor
 *   231 px          → fiyat da iki satıra düşüyor
 *   213 px          → başlık üç noktayla kırpılıyor
 *
 * Üç tam kart 285 px eşiğini ancak ~1000 px viewport'tan sonra tutuyor
 * (3 × 285 + 2 × boşluk + kap dolgusu). Altında üç karta zorlamak kartın
 * onaylı iç yerleşimini bozacağı için iki tam kart + pay sürdürülür.
 */
@media (min-width: 768px) and (max-width: 999px) {
	.dj-popular .dj-popular__panel {
		grid-auto-columns: calc((100% + var(--dj-page-padding) - 2 * var(--dj-card-gap)) / 2.18);
	}
}

@media (min-width: 1000px) and (max-width: 1199px) {
	.dj-popular .dj-popular__panel {
		grid-auto-columns: calc((100% - 2 * var(--dj-card-gap)) / 3);
	}
}

/* ------------------------------------------------------------------ */
/* 6. Haberler — gerçek ızgara, yarım kart yok                         */
/* ------------------------------------------------------------------ */

/*
 * Şerit tablette karusel olmaktan çıkıp ızgaraya döner: dar tablette iki,
 * geniş tablette üç kolon. Kartlar satırda eşit yükseklikte kalır.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.dj-news .dj-news__grid {
		display: grid;
		grid-auto-flow: row;
		gap: var(--dj-card-gap);
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* Izgaraya dönen şeritte ok ve nokta gezinmesinin işi kalmaz. */
	.dj-news .dj-carousel__arrow,
	.dj-news .dj-carousel__dots {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 899px) {
	.dj-news .dj-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.dj-news .dj-news__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* 7. Editoryal ürün blokları (beyaz eşya + iklimlendirme)             */
/* ------------------------------------------------------------------ */

/*
 * Bu bloklar büyük editoryal anlatımdır; dar tablette iki yan yana
 * kutuya sıkıştırılmaz. İki kolona geçiş viewport genişliğine değil,
 * bloğun okunabilir en küçük genişliğine bağlıdır. Referans tablette bu
 * bloklar 1536 px'te bile tam genişlik tek kolon kalıyor: editoryal
 * anlatım iki dar kutuya bölünmüyor. Dijitsu'da da bant boyunca tek
 * kolon sürer; görsel ve metin bölümün tamamını kullanır.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.dj-tiles__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ */
/* 8. Güven bandı — 2×2 → 4×1                                          */
/* ------------------------------------------------------------------ */

/*
 * Referansta bu bölümün yalnız sütun sayısı değil **yerleşimi** de
 * değişiyor: dar tablette ikon metnin üstünde ve blok ortalı, geniş
 * tablette ikon solda ve blok sola yaslı. Dijitsu'da da aynı kademe
 * uygulanır — dar bantta madde kendi içinde dikey okunur, geniş bantta
 * yatay satıra döner.
 */
@media (min-width: 768px) and (max-width: 899px) {
	.dj-trust__item {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: var(--dj-space-12);
	}

	.dj-trust__body {
		max-width: 34ch;
	}
}

/*
 * 900–1199: 2 × 2. Dört sütunda metin ikonun dibine yapışıyor (1084'te
 * 9 px) ve açıklamalar üç satıra kırılıyordu. İkon–metin aralığı en az
 * 16 px (`--dj-space-16` bu aralıkta 16u ≈ 9–10 px'e iniyor).
 */
@media (min-width: 900px) and (max-width: 1199px) {
	.dj-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dj-space-30) var(--dj-space-40);
	}

	.dj-trust__item {
		grid-template-columns: auto minmax(0, 1fr);
		justify-items: start;
		column-gap: max(16px, var(--dj-space-16));
		text-align: start;
	}
}

/* ------------------------------------------------------------------ */
/* 9. Alt bilgi — bağlantı sütunları 2 → 4                             */
/* ------------------------------------------------------------------ */

/*
 * Üst alan (marka + bülten) iki blok olarak kalır; geniş tablette
 * bağlantı grupları dört sütuna yayılır ve alt bilgi gereksiz uzamaz.
 */
@media (min-width: 900px) and (max-width: 1199px) {
	.dj-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* 10. Tablet → masaüstü geçişinde logo                                */
/* ------------------------------------------------------------------ */

/*
 * Masaüstü bandının kendi içinde iki sıçraması vardı (`.dj-logo` ≤1279
 * kuralı `180 * --dj-u`, üstü `225 * --dj-u`): 1200'de 112.5, 1280'de
 * 150, 1440'ta 168.75. 1200–1439 köprülenir; tabletin bıraktığı 160'tan
 * başlar ve 1440'taki onaylı değere varır. 1440 ve üzeri değişmez.
 */
@media (min-width: 1200px) and (max-width: 1439px) {
	.dj-logo {
		width: clamp(160px, 11.8vw, 168.75px);
	}
}