/* ==========================================================================
   Mobil katman
   style.css'ten SONRA yuklenir. Buradaki her kural olculmus bir sorunu
   kapatir; olcumler gercek sayfalar uzerinde 4-araclar/goz ile
   metin genisligi hesaplanarak yapildi. Hedef kirilma noktalari: 360, 390,
   768, 1024. !important yok; gerektiginde secici ozgullugu artirildi.

   Olculen kap genislikleri (.wrap ic genisligi, --gutter dusulmus):
     360px  -> 328px      768px  -> 722px
     390px  -> 358px     1024px -> 963px
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Genel emniyet
   Izgara ogeleri varsayilan olarak min-width:auto tasir; icerigi kaptan
   genis olan bir sutun tum sayfayi yana kaydirir. Sayfanin ana izgara
   kaplarinda bu davranis kapatilir.
   -------------------------------------------------------------------------- */

.shop-layout > *,
.single-layout > *,
.cart-layout > *,
.hero .wrap > *,
.corp .wrap > *,
.footer-top > * {
	min-width: 0;
}

/* Uzun urun kodu, e-posta veya URL dar sutunda kutudan tasmasin.
   Olculen en uzun bolunemez parca: "info@meryasart.com" = 138px; 360px'te
   kart ici genislik 126px, yani bu satir tek basina tasabiliyordu. */
body {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   1. Baslik · 1000px alti
   style.css bu olcude arama cubugunu 3. satira aliyor (.searchbar order:3).
   Ancak .header-main hala 3 sutunlu (auto 1fr auto) oldugu icin otomatik
   yerlesim .header-actions'i ORTA sutuna koyuyor: hesap ve sepet ikonlari
   logonun hemen sagina yapisip sag tarafta bos alan kaliyordu. Yerlesim
   burada acikca kuruluyor.
   Ayrica yapisik baslik yuksekligi olculdu: 14px dolgu x2 + 46px ikon
   satiri + 12px aralik + 46px arama = 147px. 640px'lik bir telefon
   ekraninin dortte birinden fazlasi. Dolgu ve aralik kisilarak ~113px'e
   indirildi; dokunma hedefleri 44px'in altina dusurulmedi.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

	.header .header-main {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.5rem;
		padding-block: 0.5rem;
	}

	.header .header-main .logo {
		grid-column: 1;
		grid-row: 1;
	}

	.header .header-main .header-actions {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	/* Arama tam genislikte ikinci satira. order yerine acik satir/sutun
	   verilir ki yerlesim tarayiciya birakilmasin. */
	.header .header-main .searchbar {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* iOS Safari, yazi boyutu 16px'in altinda olan alanlara odaklaninca
	   sayfayi buyutur ve kullanici yatay kaydirmada kalir. Formdaki tum
	   metin alanlari 16px'e cikarilir. Gorsel yukseklik degismez. */
	.header .searchbar input[type="search"],
	.woocommerce-ordering select,
	.quantity input.qty,
	#coupon_code {
		font-size: 1rem;
	}

}

/* Yapisik basligin altinda kalan yapisik kutular (magaza kenari, sepet
   ozeti) style.css'te top:120px ile hizalanmis. Mobilde baslik daha
   kisa ve bu kutular zaten tam genislige gectigi icin yapiskanlik
   birakilir; yoksa kutu kaydirma sirasinda icerigin uzerine biniyor. */
@media (max-width: 900px) {
	.shop-layout .shop-side,
	.cart-layout .cart-summary {
		position: static;
		top: auto;
	}
}

/* Ust serit metni 360px'te olculdu: 322px, kap 328px. Sinirda oldugu icin
   yazi tipine gore iki satira dusebiliyor; satir araligi ve dolgu
   sikilastirilarak iki satirda da makul yukseklikte kaliyor. */
@media (max-width: 720px) {
	.topbar .wrap {
		min-height: 0;
		padding-block: 0.375rem;
		line-height: 1.35;
	}
}

/* --------------------------------------------------------------------------
   2. Magaza kenar filtresi · 900px alti
   Olcum: 17 kok kategori, satir basina ~38px = 684px dikey liste, ustune
   "Toplu alim" kutusu. 900px altinda kenar sutunu tam genislige gecip
   urun izgarasini yaklasik bir tam ekran asagi itiyordu.
   Cozum: liste yatay kaydirilan bir etiket seridine donusur (~52px).
   Kaydirma kabin icinde kalir, sayfayi yana acmaz.
   Olculen en genis etiket: "Vip Hediyelik Set ve Kutulari" ~217px.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	/* .shop-side bir izgara; sutunu max-content'e gore olcerse icindeki
	   yatay kaydirmali serit (toplam 2629px olculdu) tum sayfayi yana
	   aciyor. Sutun ve ara sarmalayici acikca 0'a sikistirilir, kaydirma
	   serit kutusunun icinde kalir. */
	.shop-layout .shop-side {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		min-width: 0;
	}

	.shop-layout .shop-side > div {
		min-width: 0;
	}

	.shop-layout .shop-side h3 {
		margin-bottom: 0.375rem;
	}

	.shop-layout .shop-side ul {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* Kenar bosluguna kadar kayabilsin ki son etiket kesik durmasin. */
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		padding-bottom: 0.25rem;
	}

	.shop-layout .shop-side ul::-webkit-scrollbar {
		display: none;
	}

	/* Dusey listenin alt cizgisi yatay seritte anlamsiz; etiket cercevesi
	   alir. */
	.shop-layout .shop-side ul li {
		border-bottom: 0;
		flex: none;
	}

	.shop-layout .shop-side ul li a {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		min-height: 44px;            /* dokunma hedefi */
		padding: 0 0.875rem;
		border: 1px solid var(--line);
		border-radius: 100px;
		font-size: var(--fs-sm);
		white-space: nowrap;
	}

	.shop-layout .shop-side li.current-cat > a {
		border-color: var(--gold-deep);
		background: var(--gold-soft);
	}

	/* Toplu alim kutusu urunlerin onunde duruyor; mobilde sadelestirilip
	   tek satirlik bir eylem kutusuna indirilir (yaklasik 200px -> 96px). */
	.shop-layout .shop-side .cart-summary {
		gap: 0.5rem;
		padding: 0.875rem;
	}

	.shop-layout .shop-side .cart-summary small {
		display: none;
	}
}

/* Magaza sayfasinda kenar sutunu 260px + 2rem bosluk yiyor. 1024px'te
   4 sutunlu izgarada kart ici genislik 126px'e dusuyordu; baslik, urun
   kodu, fiyat ve buton sikisiyordu. Bu aralikta 3 sutun daha nefes
   aldiriyor: 1024px'te kart ici 182px.
   Alt sinir 781px verildi ki style.css'in 2 sutunluk mobil kurali
   ezilmesin. */
@media (min-width: 781px) and (max-width: 1180px) {
	.shop-layout ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Magaza ust cubugu: sonuc sayaci (olculen 225px) ile siralama kutusu
   (171px) 360px'te yan yana sigmaz. Zaten flex-wrap acik; alt alta
   dusunce ikisi de tam genislige yayilsin ki secim kutusu dokunulabilir
   olsun. */
@media (max-width: 620px) {
	.shop-bar {
		gap: 0.625rem;
	}

	.shop-bar .woocommerce-ordering,
	.shop-bar .woocommerce-ordering select {
		width: 100%;
	}

	.woocommerce-ordering select {
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   3. Tekil urun
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	/* Tek sutuna gecen duzende galeri gorseli ekranin tamamini kaplamasin;
	   dolgusu kisilir, yoksa 360px'te gercek gorsel alani 328-48=280px'e
	   duser. */
	.single-layout .pgallery-main {
		padding: 1rem;
	}
}

@media (max-width: 620px) {

	/* Sekme cubugu olculdu: uc sekme toplam 372px, 360px'te kap 328px.
	   Sarmak yerine yatay kaydirilir; alt cizgi tek satirda kalir. */
	.ptabs .ptabs-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.ptabs .ptabs-nav::-webkit-scrollbar {
		display: none;
	}

	.ptabs .ptabs-nav button {
		flex: none;
		padding-inline: 0.75rem;
		white-space: nowrap;
	}

	/* Ozellik tablosu iki sutunlu; dar ekranda baslik sutunu metni
	   harf harf kiriyordu. Alt alta alinir. */
	.ptabs-panel table th,
	.ptabs-panel table td {
		display: block;
		width: 100%;
	}

	.ptabs-panel table th {
		border-bottom: 0;
		padding-bottom: 0;
		color: var(--text);
	}

	/* Satin alma kutusu: adet alani 84px, buton flex-basis 200px.
	   360px'te kutu ici 294px kaliyor ve sigiyor, ama buton kalan 202px'e
	   sikisiyor. Buton tam satira alinip dokunma alani buyutulur. */
	.pbuy form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.pbuy .quantity input {
		width: 96px;
	}
}

/* Adet kirilimi: style.css 520px altinda 2 sutuna geciyor ve olcum bunu
   dogruluyor (360px'te 4 sutun olsaydi kutu ici 56px kalirdi, en genis
   fiyat metni 57px, yani tasardi; 2 sutunda 140px kaliyor). Burada yalniz
   dolgu sikilastirilir. */
@media (max-width: 520px) {
	.ptiers .ptier {
		padding: 0.5rem 0.375rem;
	}
}

/* Galeri kucuk gorselleri. Bu kurulumda hicbir urunun galerisi yok, yani
   dogrudan olculemedi; kural savunma amacli: 74px kareler dar ekranda
   sarmak yerine yatay seride alinir, boylece dortten fazla gorselde
   galeri sayfayi asagi uzatmaz. */
@media (max-width: 620px) {
	.pgallery .pgallery-thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.pgallery .pgallery-thumbs::-webkit-scrollbar {
		display: none;
	}

	.pgallery .pgallery-thumb {
		flex: none;
	}
}

/* --------------------------------------------------------------------------
   4. Sepet · 620px alti
   Olcum: 360px'te satirin sag seridine 248px alan kaliyor, gereken
   74 (adet) + 16 + 60 (tutar) + 16 + 44 (sil) = 210px. Sigiyor, ancak
   silme butonu style.css'te 36x36 idi; dokunma hedefi 44'e cikarildi ve
   olcum yeni degerle tekrarlandi.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {

	.cart-line .cart-line-right {
		gap: 0.625rem;
	}

	.cart-line .cart-remove {
		width: 44px;
		height: 44px;
	}

	.cart-line .quantity input {
		min-height: 44px;
	}

	/* Kupon alani ve guncelleme butonlari tek satira sigmiyor; kupon
	   kutusu tam genislige alinir. */
	.woocommerce-cart-form #coupon_code {
		flex: 1 1 100%;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   5. Urun karti ve izgara
   360px'te 2 sutun, sutun genisligi 156px, kart ici 126px. Olculen en uzun
   baslik parcasi 79px, en uzun urun kodu 60px, en genis fiyat 65px,
   "Sepete ekle" butonu 95px: hicbiri tasmiyor. Bu blok yalniz dolguyu
   sikistirir ve dokunma hedeflerini buyutur.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {

	ul.products,
	.product-grid {
		gap: 0.75rem;
	}

	.card .card-body {
		padding: 0.75rem;
		gap: 0.1rem;
	}

	/* Gorsel alani kartin en degerli parcasi; ic dolgu kisilinca 360px'te
	   gorsel 126px'ten 140px'e cikiyor. */
	.card .card-img {
		padding: 0.5rem;
	}

	/* Sepete ekle butonu 38px idi; dokunma hedefi 44px. */
	.card .add_to_cart_button,
	.card .added_to_cart {
		min-height: 44px;
	}

	/* Ana sayfadaki kategori sekmeleri de 38px idi. */
	.tabs .tab {
		min-height: 44px;
	}
}

/* 480px altinda baslik uc satira kadar cikabiliyor; sabit 2.6em alt sinir
   iki satirlik yer ayirdigi icin kart yuksekligi zaten dengeli. Yalniz
   satir sayisi ustten sinirlanir ki cok uzun adlar karti asiri uzatmasin. */
@media (max-width: 480px) {
	.card .card-title {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
   6. Hero, guven seridi, kayan serit
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	/* Iki buton 360px'te yan yana sigmiyor (ikincisi "Toplu alim icin
	   teklif" ~231px). Alt alta ve tam genislikte. */
	.hero-cta .btn {
		flex: 1 1 100%;
	}

	/* Gorsel tek sutunlu duzende oransizca uzuyordu; 4/3 yerine daha
	   basik bir oran mobil ekranda kaydirma maliyetini dusurur. */
	.hero .hero-img {
		aspect-ratio: 16 / 10;
	}

	.assurance .wrap {
		gap: 0.75rem;
		padding-block: 1rem;
	}

	/* Kayan serit yuksekligi mobilde kazanc getirmiyor; dolgu kisilir.
	   .marquee zaten overflow:hidden, yani sayfayi yana acmiyor. */
	.marquee span {
		gap: 1rem;
		padding: 0.5rem 1rem;
		font-size: var(--fs-xs);
	}
}

/* --------------------------------------------------------------------------
   7. Alt alan
   Izgara 520px altinda tek sutuna dusuyor. Baglanti listeleri o olcude
   dokunma hedefi olarak cok sik (satir araligi 0.4rem, yazi 13px).
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.footer .footer-top {
		gap: 1.5rem;
		padding-block: 2rem 1.5rem;
	}

	.footer .footer-top li + li {
		margin-top: 0;
	}

	.footer .footer-bottom {
		gap: 0.5rem;
	}

	.footer .footer-legal {
		gap: 0.25rem 1rem;
	}
}

/* --------------------------------------------------------------------------
   8. Dokunma hedefleri ve WooCommerce parcalari
   Kalan 44px alti hedefler tek yerde toplandi.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

	/* Bildirim kutusundaki buton dar ekranda metnin yanina sikisiyordu;
	   alt satira alinir. */
	.woocommerce-message .button,
	.woocommerce-info .button {
		margin-left: 0;
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   9. Dokunma hedefleri · Playwright olcumunden gelenler
   Asagidaki degerler tahmin degil, tarayicida getBoundingClientRect ile
   olculdu (goz-raporu/rapor.json, 390 / 768 / 1280 piksel):

     a.logo                     149x28
     .searchbar button           42x38
     .section-head a             98x23   ("Tumunu gor")
     .woocommerce-breadcrumb a   59x14   ("Ana Sayfa")
     a.card-title               141x39
     .topbar-links a             68x19
     .footer-legal a            135x19
     .tab                       180x38
     .page-numbers               42x42

   Kural, genislik esigi VEYA kaba isaretleyici (parmak) ile acilir:
   1024px alti telefon ve tabletleri, (pointer: coarse) ise genis
   dokunmatik ekranlari kapsar. Yazi boyutlari degistirilmez, yalnizca
   kutu yuksekligi ve dikey dolgu buyur.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px), (pointer: coarse) {

	/* Logo: satir kutusu 28px idi. align-items baseline oldugu icin
	   min-height tek basina yetmez, dikey ortalama gerekir. */
	.header .header-main .logo {
		align-items: center;
		min-height: 44px;
	}

	/* Arama butonu 42x38 idi: girisin icine 4px iceriden oturtulmus.
	   Giris 48px'e cikarilip buton 2px iceriye alininca 44x44 oluyor. */
	.header .searchbar input[type="search"] {
		min-height: 48px;
	}

	.header .searchbar button {
		top: 2px;
		bottom: 2px;
		width: 44px;
	}

	/* Ust seritteki yardimci baglantilar 68x19 idi. Serit 720px altinda
	   zaten gizli; bu kural tablet ve dokunmatik genis ekranlar icin. */
	.topbar .topbar-links a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Bolum basligindaki "Tumunu gor" baglantisi 98x23 idi. */
	.section-head a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Ekmek kirintisi baglantisi 59x14 idi; satir ici kalarak yukselir. */
	.woocommerce-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Kart basligi 141x39 idi: style.css'teki min-height:2.6em, 15px yazi
	   ile tam 39px ediyor. Piksel esigi konur; iki satirlik yer ayirma
	   amaci bozulmaz, 5px eklenir. */
	.card .card-title {
		min-height: 46px;
	}

	/* Magaza kenar listesi 900-1024 arasinda hala dusey; satir 260x39 idi. */
	.shop-side ul li a {
		min-height: 44px;
	}

	/* Sepete ekle butonu ve filtre sekmeleri 38px idi. */
	.card .add_to_cart_button,
	.card .added_to_cart,
	.tabs .tab {
		min-height: 44px;
	}

	/* Sayfalama baglantilari 42x42 idi. */
	.woocommerce-pagination a,
	.woocommerce-pagination span {
		min-width: 44px;
		min-height: 44px;
	}

	/* Alt alandaki yasal baglantilar 135x19 idi. */
	.footer .footer-legal a,
	.footer .footer-top li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Sepet satirindaki silme butonu 36x36 idi. */
	.cart-line .cart-remove {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   Ödeme sayfası dokunma hedefleri
   Ölçüm (4-araclar/goz, 390px): ödeme yöntemi radyoları ve teslimat
   adresi onay kutusu 20x20 piksel; kupon ve "sepeti düzenle" bağlantıları
   20 piksel yüksek. Parmakla tıklanmıyorlar.
   Çözüm kutuyu büyütmek değil: kutu görsel olarak aynı kalır, TIKLAMA
   ALANI etiketle genişletilir. Böylece tasarım bozulmadan hedef 44'e çıkar.
   ========================================================================== */

/* Ödeme yöntemi: satırın tamamı tıklanabilir olur */
.wc_payment_methods li label,
li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 44px;
	padding-block: 0.5rem;
	cursor: pointer;
}

/* Onay kutusu ve radyo görünürde aynı kalır, dokunma alanı büyür */
.wc_payment_methods input[type="radio"],
#ship-to-different-address-checkbox,
.woocommerce-form__input-checkbox {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 12px;
	margin-inline-start: 0;
}

#ship-to-different-address span,
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	cursor: pointer;
}

/* Metin bağlantıları: kupon aç, sepeti düzenle */
.odeme-kupon-cagri a.showcoupon,
a.ozet-geri,
.woocommerce-info a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0.5rem;
}

/* Sepet satırı görseli: kutu 64 piksel, indirilen dosya 300 piksel.
   Ölçüm 5,9 kat fazla dedi. Küçük boyut istenir. */
@media (max-width: 620px) {
	.cart-line-img img { image-rendering: auto; }
}