/**
 * responsive.css — breakpoint duzeltmeleri. EN SON yuklenir.
 *
 * Test edilen genislikler: 1920 1440 1280 1024 768 430 390 360
 * Mobil-oncelikli yazilmadi (masaustu tasarim temel alindi), bu yuzden
 * max-width sorgulari kullanilir ve kaskad sirasi onemlidir.
 */

/* =============================================================================
   1280px ve alti — orta masaustu / kucuk laptop
   ========================================================================== */

@media (max-width: 1280px) {
	:root {
		--wd-wrap: 1120px;
	}
}

/* =============================================================================
   1150px ve alti — header'da yer daraliyor
   Tam menu + 4 eylem ogesi birlikte sigmiyordu ve header viewport'u
   tasiriyordu (1024px'te 69px yatay tasma). Ikincil eylemler burada
   gizlenir; ikisi de menuden erisilebilir kaldigi icin islev kaybi yok:
   CTA'nin hedefi ana menude "Kişiye Özel" olarak, Instagram ise
   footer'da duruyor.
   ========================================================================== */

@media (max-width: 1150px) {
	.wd-hide-sm {
		display: none !important;
	}
}

/* =============================================================================
   1024px ve alti — tablet yatay
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--wd-header-h: 66px;
	}

	/* Hero tek kolona duser, gorsel altta */
	.wd-hero__body {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 1rem + 3vw, 3rem);
	}

	.wd-hero__title {
		max-width: 24ch;
	}

	.wd-hero__line--2 {
		margin-left: clamp(0.5rem, 2vw, 1.5rem);
	}

	/* Bento 2 kolona iner, ritim korunur */
	.wd-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"a a"
			"b c"
			"d e"
			"f f";
		/* 4 satir — ilk satir (buyuk hucre) daha yuksek kalir */
		grid-template-rows: clamp(180px, 26vw, 260px) repeat(3, clamp(130px, 18vw, 180px));
	}

	/* Isik gosterimi tek kolon */
	.wd-lightdemo__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Atolye izgarasi tek kolon */
	.wd-atelier {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-atelier__side {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Urun sayfasi: sticky bilgi kolonu kalkar, tek kolon olur */
	.wd-product__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-product__info {
		position: static;
		top: auto;
	}

	.wd-story {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Urun izgarasi 2 kolon */
	.wd-products,
	.wd-grid--3,
	.wd-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Iki kolonlu sayfa duzenleri (iletisim, kisiye ozel) tek kolona iner */
	.wd-custom-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Footer 2x2 */
	.wd-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =============================================================================
   860px ve alti — masaustu menuden mobil drawer'a gecis
   ========================================================================== */

@media (max-width: 860px) {
	/* Masaustu menu gizlenir, hamburger gorunur */
	.wd-nav {
		display: none;
	}

	.wd-burger {
		display: inline-flex;
	}

	/* Isik anahtarinin metni gizlenir, yalnizca ampul kalir */
	.wd-lightswitch__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.wd-lightswitch {
		width: 42px;
		padding-inline: 0;
		justify-content: center;
	}
}

/* =============================================================================
   768px ve alti — tablet dikey / buyuk telefon
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		/* Bolum bosluklari kisalir, dikey ritim sikisir */
		--wd-section-y: clamp(3rem, 2rem + 4vw, 4.5rem);
		--wd-section-y-sm: clamp(2rem, 1.5rem + 2vw, 3rem);
	}

	/* Bolum basligi ve baglantisi dikey siralanir */
	.wd-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wd-s-4);
	}

	/* Surec adimlarinda numara ustte */
	.wd-process__step {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wd-s-2);
	}

	/* Ozellik izgarasi tek kolon degil, 2 kolon kalabilir */
	.wd-features {
		grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	}

	/* CTA seridi dikey */
	.wd-ctaband__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Galeri: kucuk resimler yerine noktalar */
	.wd-gallery__thumbs {
		display: none;
	}

	.wd-gallery__dots {
		display: flex;
	}

	/* Filtre cubugu: filtreler alt sayfaya taşınır */
	.wd-filters {
		display: none;
	}

	.wd-filterbar__toggle {
		display: inline-flex;
	}

	.wd-filtersheet .wd-filters {
		display: grid;
	}

	.wd-filters__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wd-s-2);
	}

	.wd-filters__label {
		min-width: 0;
	}

	/* Mobil urun CTA'si yapiskan olur */
	.wd-stickycta {
		display: flex;
	}

	/* Yapiskan CTA icerigi kapatmasin */
	body.wd-single-product {
		padding-bottom: 78px;
	}

	/* Teklif paneli tam ekran */
	.wd-modal__panel {
		width: 100vw;
	}

	/* Footer alt seridi dikey */
	.wd-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wd-s-3);
	}
}

/* =============================================================================
   560px ve alti — telefon
   ========================================================================== */

@media (max-width: 560px) {
	:root {
		--wd-header-h: 60px;
	}

	/* Urun izgarasi 2 kolon KALIR — kartlar kucuk ama kesif hizli */
	.wd-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wd-s-4) var(--wd-s-3);
	}

	/* Kucuk kartlarda etiket ve alt bilgi sadelesir */
	.wd-card__badges {
		top: 0.4rem;
		left: 0.4rem;
	}

	.wd-card__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	/* Blog / proje kartlari tek kolon */
	.wd-grid--2,
	.wd-grid--3,
	.wd-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Bento tek kolon — hepsi esit yukseklikte olmasin */
	.wd-bento {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"a"
			"b"
			"c"
			"d"
			"e"
			"f";
		/* Ilk hucre daha uzun kalir — hiyerarsi tek kolonda da korunur */
		grid-template-rows: 260px repeat(5, 168px);
	}

	.wd-atelier__side {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Hero: alt gorsel kucuk kare kaldirilir (kalabalik yapiyor) */
	.wd-hero__inset {
		display: none;
	}

	.wd-hero__actions .wd-btn {
		flex: 1 1 100%;
	}

	/* Footer tek kolon */
	.wd-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wd-s-6);
	}

	/* Yer tutucu etiketi cok kucuk alanlarda gizlenir */
	.wd-ph__label {
		font-size: 0.625rem;
		bottom: 0.6rem;
	}

	/* Ozellik satirlari tek kolon */
	.wd-specs__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	/* Galeri isik anahtari daha kucuk */
	.wd-lighttoggle {
		right: 0.6rem;
		bottom: 0.6rem;
		padding: 0.45rem 0.8rem;
	}
}

/* =============================================================================
   400px ve alti — 390 / 375 / 360 px cihazlar
   ========================================================================== */

@media (max-width: 400px) {
	:root {
		--wd-gutter: 1rem;
	}

	/* Cok dar ekranda urun izgarasi tek kolona duser */
	.wd-products {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Yer tutucu etiketi bu boyutta okunmuyor */
	.wd-ph__label {
		display: none;
	}

	.wd-features {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Etiketler sarmayi engellemek icin kucultulur */
	.wd-badge {
		font-size: 0.625rem;
		padding: 0.2rem 0.5rem;
	}
}

/* =============================================================================
   1680px ve uzeri — buyuk ekranlar (1920)
   ========================================================================== */

@media (min-width: 1680px) {
	:root {
		--wd-wrap: 1400px;
		--wd-wrap-wide: 1640px;
	}

	/* Cok genis ekranda satir uzunlugu okunabilir kalsin */
	.wd-hero__lede {
		max-width: 46ch;
	}

	/* 4 kolon urun izgarasi */
	.wd-products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =============================================================================
   DOKUNMATIK CIHAZLAR — dokunma hedefi boyutu
   Fare ile 40–42 piksel yeterli, ama parmakla degil. Kaba isaretleyici
   (parmak) kullanan cihazlarda ikon butonlari ve cipler 44 piksele cikar.
   Yalnizca pointer:coarse'ta uygulanir; masaustunde header kompakt kalir.
   ========================================================================== */

@media (pointer: coarse) {
	.wd-iconbtn,
	.wd-lightswitch {
		width: 44px;
		height: 44px;
	}

	.wd-lightswitch:not(.wd-btn) {
		min-width: 44px;
	}

	.wd-chip {
		min-height: 44px;
	}

	.wd-gallery__thumb {
		min-width: 56px;
	}

	.wd-gallery__dot {
		/* Gorsel olarak kucuk kalir, dokunma alani buyur */
		padding: 8px;
		background-clip: content-box;
	}
}

/* Isik anahtari metinli haldeyken sabit genislik uygulanmamali */
@media (pointer: coarse) and (min-width: 861px) {
	.wd-lightswitch {
		width: auto;
		padding-inline: 0.55rem 0.85rem;
	}
}

/* =============================================================================
   YAZDIRMA
   ========================================================================== */

@media print {
	.wd-header,
	.wd-footer,
	.wd-drawer,
	.wd-modal,
	.wd-searchpanel,
	.wd-stickycta,
	.wd-filtersheet,
	.wd-lightswitch,
	.wd-cta-group,
	.wd-ctaband {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.wd-ph {
		border: 1px solid #999;
		background: none;
	}
}