/*
 * Havara — theme.json'in ifade edemedigi kurallar.
 *
 * Buraya yalnizca su ucu girer:
 *   1. WooCommerce'in kendi isaretlemesine ait siniflar
 *   2. Etkilesim durumlari, izgara duzenleri, kucuk arayuz parcalari
 *   3. Hareket: hover tepkileri ve kaydirinca giris animasyonlari
 *
 * Renk, tipografi ve bosluk degerleri theme.json'dan gelen CSS
 * degiskenleriyle yazilir. Buraya sabit renk kodu yazma.
 */

/* =========================================================================
   Temel
   ====================================================================== */

:root {
	--havara-r-sm:   var(--wp--custom--radius--sm, 10px);
	--havara-r-md:   var(--wp--custom--radius--md, 16px);
	--havara-r-lg:   var(--wp--custom--radius--lg, 24px);
	--havara-r-xl:   var(--wp--custom--radius--xl, 34px);
	--havara-r-pill: var(--wp--custom--radius--pill, 999px);

	--havara-hizli:  var(--wp--custom--gecis--hizli, 140ms cubic-bezier(.2,0,.2,1));
	--havara-normal: var(--wp--custom--gecis--normal, 260ms cubic-bezier(.2,.7,.25,1));
	--havara-yayli:  var(--wp--custom--gecis--yayli, 420ms cubic-bezier(.34,1.4,.5,1));

	/* Yapiskan basligin altina kayan icerik bunun kadar bosluk birakir. */
	--havara-baslik-yuksekligi: 8.5rem;

	/* Basliktaki dokunma hedefleri: hesap, sepet ve hamburger. Uc dugme de
	   bu olcuyu kullaniyor, boylece dar ekranda birbiriyle hizali kaliyor. */
	--havara-ikon-alani: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--havara-baslik-yuksekligi); }

img { max-width: 100%; height: auto; }

/* Klavyeyle gezenler nerede olduklarini gormeli. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary-deep);
	outline-offset: 2px;
	border-radius: var(--havara-r-sm);
}

/* Ekran okuyucular icin; gorsel olarak gizli ama erisilebilir. */
.havara-gizli {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Tipografi ince ayari

   Fraunces degisken bir font. opsz ekseni harf boyutuna gore harflerin
   kontrastini degistirir; iri basliklarda yuksek, kucuk metinde dusuk
   deger daha okunakli duruyor.
   ====================================================================== */

:is(h1, h2, h3, .wp-block-site-title, .havara-serif) {
	font-variation-settings: "opsz" 96;
	text-wrap: balance;
}

:is(h4, h5, h6) { font-variation-settings: "opsz" 20; }

.has-display-font-size { font-variation-settings: "opsz" 144; }

/* =========================================================================
   Hareket

   Kaydirinca giris: JS her bolume .havara-goster ekler, gorunur alana
   girince .havara-gorundu gelir. JS calismazsa hicbir sey gizlenmez,
   cunku baslangic durumu yalnizca .havara-goster sinifiyla tanimli.
   ====================================================================== */

.havara-goster {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(.2,.7,.25,1), transform 620ms cubic-bezier(.2,.7,.25,1);
}

.havara-goster.havara-gorundu { opacity: 1; transform: none; }

/* Ard arda gelen kartlar sirayla girsin, hepsi ayni anda degil. Bu durumda
   gizlenen kap degil, kabin icindeki her kart oluyor. */
.havara-sirali > .havara-goster { transition-delay: calc(var(--havara-sira, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.havara-goster { opacity: 1; transform: none; }
}

/* =========================================================================
   Duyuru seridi ve baslik
   ====================================================================== */

/* Serit: kargo ve iade gibi tek cumlelik guven mesaji. */
.havara-serit {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .01em;
	overflow: hidden;
}

.havara-serit p { margin: 0; padding: .6rem 0; text-align: center; }

.havara-serit strong { color: var(--wp--preset--color--accent); font-weight: 700; }
/* Mobilde uc parca tek satira sigmiyor; kargo esigi ve isme ozel kalir. */
@media (max-width: 640px) { .havara-serit-genis { display: none; } }

.havara-baslik {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 2px solid transparent;
	transition: border-color var(--havara-normal), box-shadow var(--havara-normal),
	            padding var(--havara-normal), background var(--havara-normal);
}

/* Sayfa kaydirilinca baslik daralir ve zeminden ayrilir. */
.havara-baslik.havara-kaydi {
	padding-top: var(--wp--preset--spacing--10) !important;
	padding-bottom: var(--wp--preset--spacing--10) !important;
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--soft);
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
}

/* Marka adi iki kelime (Havara Hobi); dar ekranda alt alta dusmesin. */
.havara-baslik .wp-block-site-title,
.havara-altbilgi .wp-block-site-title { white-space: nowrap; }

.havara-baslik .wp-block-site-title a { transition: color var(--havara-hizli); }
.havara-baslik .wp-block-site-title a:hover { color: var(--wp--preset--color--primary-deep); }

/* Logo, ustune gelince hafifce sallanir. Kucuk bir selam. */
.havara-baslik .wp-block-site-logo img { transition: transform var(--havara-yayli); }
.havara-baslik:hover .wp-block-site-logo img { transform: rotate(-6deg) scale(1.06); }

/* -------- Arama kutusu -------- */

/* selfStretch:fill kutuyu basligin tamamina yayiyordu. */
.havara-baslik .wp-block-search { max-inline-size: 24rem; }

.havara-baslik .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--surface);
	padding: 2px 2px 2px 6px;
	transition: border-color var(--havara-hizli), box-shadow var(--havara-hizli);
}

.havara-baslik .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent);
}

.havara-baslik .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: .5rem .75rem;
	font-size: var(--wp--preset--font-size--small);
}

.havara-baslik .wp-block-search__input:focus { outline: none; }

.havara-baslik .wp-block-search__button {
	border-radius: var(--havara-r-pill);
	border-width: 2px;
	padding: .5rem 1.25rem;
	box-shadow: none;
}

/* -------- Gezinti -------- */

.havara-baslik .wp-block-navigation-item__content {
	position: relative;
	padding: .4rem .1rem;
	transition: color var(--havara-hizli);
}

/* Alt cizgi yerine ortadan acilan renkli seker cizgisi. */
.havara-baslik .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--havara-normal);
}

.havara-baslik .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary-deep); }

.havara-baslik .wp-block-navigation-item__content:hover::after,
.havara-baslik .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Acilir alt menu: kutu degil, yumusak kart. */
.havara-baslik .wp-block-navigation__submenu-container {
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: .4rem;
	min-width: 15rem;
}

.havara-baslik .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--havara-r-sm);
	padding: .5rem .75rem;
	transition: background var(--havara-hizli), color var(--havara-hizli);
}

.havara-baslik .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }

.havara-baslik .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--muted);
}

/* -------- Hesap ve sepet -------- */

.havara-baslik .wc-block-mini-cart__button,
.havara-baslik .wc-block-customer-account__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--havara-ikon-alani);
	block-size: var(--havara-ikon-alani);
	padding: 0;
	border-radius: var(--havara-r-pill);
	transition: background var(--havara-hizli), transform var(--havara-yayli);
}

/* Hamburger ayni olcude ama display buraya yazilmiyor. Cekirdek dugmeyi
   genis ekranda display: none ile gizliyor; buradan bir display degeri
   vermek onu masaustunde de gorunur yapiyordu. */
.havara-baslik .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	inline-size: var(--havara-ikon-alani);
	block-size: var(--havara-ikon-alani);
	padding: 0;
	border-radius: var(--havara-r-pill);
	transition: background var(--havara-hizli);
}

.havara-baslik .wc-block-mini-cart__button:hover,
.havara-baslik .wc-block-customer-account__link:hover,
.havara-baslik .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--muted);
}

.havara-baslik .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--base);
	font-weight: 700;
}

/* =========================================================================
   Butonlar

   Bicim dili: hap sekli, kalin koyu kenar, altinda sert bir govde golgesi.
   Ustune gelince yukselir, basilinca govdenin uzerine oturur. Duz gri
   WordPress butonundan ayrisan en belirgin parca bu.
   ====================================================================== */

.wp-element-button,
.wp-block-button__link,
button.single_add_to_cart_button,
.wc-block-components-button {
	box-shadow: 0 3px 0 0 var(--wp--preset--color--contrast);
	transition: transform var(--havara-yayli), box-shadow var(--havara-yayli),
	            background-color var(--havara-hizli), color var(--havara-hizli);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
button.single_add_to_cart_button:hover,
.wc-block-components-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 0 0 var(--wp--preset--color--contrast);
}

.wp-element-button:active,
.wp-block-button__link:active,
button.single_add_to_cart_button:active,
.wc-block-components-button:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 0 var(--wp--preset--color--contrast);
}

/* Ikincil buton: dolgusuz ama ayni kalin kenar ve golge. */
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   Vitrin (ana sayfa ust bolumu)
   ====================================================================== */

.havara-vitrin {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--gradient--sicak);
}

/* Zemine yumusak renk lekeleri. Gorsel degil, saf CSS. */
.havara-vitrin::before,
.havara-vitrin::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .36;
	pointer-events: none;
	z-index: 0;
}

.havara-vitrin::before {
	inline-size: 30rem; block-size: 30rem;
	inset-block-start: -12rem; inset-inline-end: -8rem;
	background: var(--wp--preset--color--primary);
	animation: havara-suzul 14s ease-in-out infinite alternate;
}

.havara-vitrin::after {
	inline-size: 24rem; block-size: 24rem;
	inset-block-end: -10rem; inset-inline-start: -6rem;
	background: var(--wp--preset--color--secondary);
	animation: havara-suzul 18s ease-in-out infinite alternate-reverse;
}

@keyframes havara-suzul {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-3rem, 2.5rem, 0) scale(1.14); }
}

.havara-vitrin > * { position: relative; z-index: 1; }

.havara-vitrin-metin { max-width: 44ch; }

/* Ust satirdaki kucuk etiket: hap seklinde, kenarli. */
.havara-etiket {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .9rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Basligin icinde vurgulanan kelime, altinda el cizimi hissi veren bant. */
.havara-alti-cizili {
	position: relative;
	white-space: nowrap;
}

.havara-alti-cizili::after {
	content: "";
	position: absolute;
	inset-inline: -.1em;
	inset-block-end: .04em;
	block-size: .32em;
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--accent);
	z-index: -1;
}

/* Vitrin gorseli: hafif egik, kalin kenarli, renkli govde golgeli. */
/* Gorsel sinirsiz buyuyunce sutunu tasiyordu; egim ve govde golgesi de
   sagdan disari cikiyordu. Genislik burada sinirlaniyor. */
.havara-vitrin-gorsel figure {
	max-inline-size: 25rem;
	margin-inline: auto;
}

.havara-vitrin-gorsel img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-xl);
	box-shadow: 10px 10px 0 0 var(--wp--preset--color--secondary);
	transform: rotate(1.6deg);
	transition: transform var(--havara-yayli), box-shadow var(--havara-yayli);
}

.havara-vitrin-gorsel:hover img {
	transform: rotate(0deg) scale(1.015);
	box-shadow: 14px 14px 0 0 var(--wp--preset--color--accent);
}

/* =========================================================================
   Kategori mozaigi
   ====================================================================== */

/* Dort kategori var (2026-09-15, Cocuk kalkti). 2 sutunda "2 + 2" dizilir.
   3 sutunda ilk ve son kart iki sutun kaplar: "2 genis + 1 / 1 + 2 genis";
   hic kart yalniz kalmaz, hic bosluk kalmaz. Kategori sayisi degisirse bu
   dizilim yeniden hesaplanmali. */
.havara-mozaik {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.havara-mozaik { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.havara-mozaik > :first-child,
	.havara-mozaik > :last-child:nth-child(4) { grid-column: span 2; }

	/* Genis kartin gorseli satir yuksekligini belirlemesin, yanindaki dar
	   kartin yuksekligine uysun. block-size 0 + flex 1 bunu yapar. */
	.havara-mozaik > :first-child img,
	.havara-mozaik > :first-child .havara-kategori-bos,
	.havara-mozaik > :last-child:nth-child(4) img,
	.havara-mozaik > :last-child:nth-child(4) .havara-kategori-bos {
		flex: 1 1 0;
		block-size: 0;
		min-block-size: 0;
	}
}

.havara-mozaik > * { margin-block: 0; }

.havara-kategori {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-lg);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: inherit;
	transition: transform var(--havara-yayli), box-shadow var(--havara-yayli);
}

.havara-kategori:hover,
.havara-kategori:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 10px 0 0 var(--wp--preset--color--contrast);
}

.havara-kategori img {
	inline-size: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	display: block;
	transition: transform 520ms cubic-bezier(.2,.7,.25,1);
}

.havara-kategori:hover img { transform: scale(1.06); }

.havara-kategori-govde {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .95rem 1.15rem;
	border-block-start: 2px solid var(--wp--preset--color--contrast);
}

/* Govdenin ilk cocugu ad ve urun sayisini tasiyan sarmalayici. */
.havara-kategori-govde > span:first-child {
	display: grid;
	gap: .1rem;
	min-inline-size: 0;
}

.havara-kategori-govde strong {
	display: block;
	overflow-wrap: anywhere;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 40;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.havara-kategori-govde strong + span {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Gorseli olmayan kategori de izgarayi bozmasin. */
.havara-kategori-bos {
	display: block;
	inline-size: 100%;
	aspect-ratio: 5 / 4;
	background: var(--wp--preset--gradient--serin);
}

/* Ok isareti, ustune gelince ilerler. */
.havara-ok {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.1rem;
	block-size: 2.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--havara-yayli), background var(--havara-hizli);
}

.havara-kategori:hover .havara-ok {
	transform: translateX(4px);
	background: var(--wp--preset--color--accent);
}

/* Her kartin zemini sirayla farkli bir pastel ton alsin. Kategori adedi
   degisse de desen bozulmaz cunku dortlu bir dongude tekrarliyor. */
.havara-mozaik > :nth-child(4n+1) .havara-kategori-govde { background: var(--wp--preset--color--muted); }
.havara-mozaik > :nth-child(4n+2) .havara-kategori-govde { background: var(--wp--preset--color--mint); }
.havara-mozaik > :nth-child(4n+3) .havara-kategori-govde { background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, var(--wp--preset--color--base)); }
.havara-mozaik > :nth-child(4n+4) .havara-kategori-govde { background: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--base)); }

/* =========================================================================
   Bolum basliklari ve renkli bantlar
   ====================================================================== */

.havara-bolum-basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}

.havara-bolum-basi > * { margin-block: 0; }
.havara-bolum-basi p { margin: 0; }

/* Sayfayi bolen renkli serit. Icindeki metin yatay olarak akar. */
.havara-akan {
	background: var(--wp--preset--color--primary);
	border-block: 3px solid var(--wp--preset--color--contrast);
	overflow: hidden;
	padding-block: .85rem;
}

.havara-akan-ic {
	display: flex;
	inline-size: max-content;
	/* Bosluk flex gap ile degil oge dolgusuyla veriliyor. gap kullanilsaydi
	   iki yarinin genisligi yarim gap kadar farkli olur, dongu basa donerken
	   goze carpan bir ziplama olurdu. */
	gap: 0;
	animation: havara-ak 34s linear infinite;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 40;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.havara-akan-ic > span { padding-inline: 1.25rem; }

.havara-akan:hover .havara-akan-ic { animation-play-state: paused; }

@keyframes havara-ak {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Guven vaatleri */
.havara-vaat {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.havara-vaat > * { margin-block: 0; }

.havara-vaat > div {
	padding: var(--wp--preset--spacing--30);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-lg);
	background: var(--wp--preset--color--surface);
	transition: transform var(--havara-yayli), box-shadow var(--havara-yayli);
}

.havara-vaat > div:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 0 0 var(--wp--preset--color--contrast);
}

.havara-vaat strong {
	display: block;
	margin-bottom: .3rem;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 30;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.havara-vaat p {
	margin: 0;
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--small);
}

.havara-vaat .havara-simge {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-bottom: .8rem;
	border-radius: var(--havara-r-md);
	border: 2px solid var(--wp--preset--color--contrast);
	font-size: 1.35rem;
	line-height: 1;
	transition: transform var(--havara-yayli);
}

.havara-vaat > div:hover .havara-simge { transform: rotate(-8deg) scale(1.08); }

.havara-vaat > :nth-child(4n+1) .havara-simge { background: var(--wp--preset--color--muted); }
.havara-vaat > :nth-child(4n+2) .havara-simge { background: var(--wp--preset--color--mint); }
.havara-vaat > :nth-child(4n+3) .havara-simge { background: var(--wp--preset--color--accent); }
.havara-vaat > :nth-child(4n+4) .havara-simge { background: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--base)); }

/* =========================================================================
   Urun kartlari
   ====================================================================== */

.wc-block-product-template,
.wp-block-woocommerce-product-template {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* position: relative sart. Kategori etiketi gorsel blogunun disina, kartin
   dogrudan cocugu olarak basiliyor; konumlu bir ata olmazsa sayfanin sol
   ustune kaciyor. */
.wc-block-product-template li,
.wp-block-woocommerce-product-template li,
li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	transition: transform var(--havara-yayli);
}

.wc-block-product-template li:hover,
.wp-block-woocommerce-product-template li:hover { transform: translateY(-4px); }

/* Gorsel cercevesi: tum urunler ayni oranda dursun ki izgara hizali kalsin. */
.wc-block-components-product-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--havara-r-lg);
	border: 2px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--muted);
	margin: 0;
	transition: box-shadow var(--havara-yayli);
}

li:hover > .wc-block-components-product-image { box-shadow: 0 8px 0 0 var(--wp--preset--color--contrast); }

.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 520ms cubic-bezier(.2,.7,.25,1);
}

li:hover > .wc-block-components-product-image img { transform: scale(1.07); }

/* Kategori etiketi, gorselin ustune. Hangi daldan geldigi bir bakista belli olsun. */
.havara-kart-etiketler {
	position: absolute;
	inset-block-start: .7rem;
	inset-inline-start: .7rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
}

.havara-kart-etiket {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .7rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
}

/* Renk secimi rozeti: uc ust uste binen renk noktasi. Renkler paletten. */
.havara-kart-etiket--renk i {
	inline-size: .7rem;
	block-size: .7rem;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--primary);
}
.havara-kart-etiket--renk i + i { margin-inline-start: -.35rem; background: var(--wp--preset--color--secondary); }
.havara-kart-etiket--renk i + i + i { background: var(--wp--preset--color--accent); margin-inline-end: .15rem; }
/* Renk kodu girilmis urunde noktalar gercek renkler (renk-secici.php). */
.havara-kart-etiket--renk i[style] { background: var(--havara-renk); }

/* Urun sayfasi bilgi satirlari: fiyatin altinda, iki sutun */
.havara-bilgi-satirlari {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .5rem .75rem;
}
.havara-bilgi-satirlari li {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .55rem .8rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
}
.havara-bilgi-satirlari span {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--subtle);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.havara-bilgi-satirlari strong { font-size: var(--wp--preset--font-size--small); }
/* Degerin yaninda ayni satirda, geri planda: "Kosullar gecerlidir". */
.havara-bilgi-satirlari .havara-bilgi-baglanti {
	margin-inline-start: .4rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--subtle);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: .2em;
	white-space: nowrap;
}
.havara-bilgi-satirlari .havara-bilgi-baglanti:hover { color: var(--wp--preset--color--contrast); text-decoration-color: currentColor; }
/* Bildirim bandindaki "Sepetim" baglantisi .wp-element-button sinifiyla geliyor:
   tema golgesini aliyor, WooCommerce bant stili dolguyu ve zemini sifirliyor;
   altinda golge olan alti cizili bir yazi kaliyordu (2026-09-14). Kucuk buton olsun.
   !important zorunlu: WooCommerce padding, background ve color'u !important ile yaziyor. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button {
	margin: 0 0 0 1rem;
	padding: .4rem 1rem !important;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--contrast) !important;
	opacity: 1;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 0 var(--wp--preset--color--contrast);
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button:hover,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button:focus-visible { background: var(--wp--preset--color--accent) !important; }
/* Odeme sayfasi (odeme-iframe.php): her adim bir kart. Odeme adimi, sozlesme
   kutusu ve kart formu tek kart gibi birlesir; "Siparis ver" dugmesi yok,
   script sozlesme onayinda gizli dugmeye kendisi basiyor. Siniflar script
   calisinca govdeye eklenir; script yoksa eski gorunum ve dugme kalir. */
.wc-block-checkout__main .wc-block-components-checkout-step {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 1.1rem 1.25rem 1.25rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
}
.wc-block-checkout__main .wc-block-components-checkout-step::after { display: none; }
.wc-block-checkout__main .wc-block-components-checkout-step__heading { margin-block-start: 0; }
.havara-odeme-iframe .wc-block-checkout__payment-method { display: none; } /* tek yontem, secim gosterilmez */
.havara-odeme-iframe .wc-block-checkout__terms {
	margin: 0;
	padding: 1.1rem 1.25rem .9rem;
	border: 2px solid var(--wp--preset--color--line);
	border-block-end: 0;
	border-start-start-radius: var(--havara-r-md);
	border-start-end-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
}
.havara-odeme-iframe .wc-block-checkout__terms::before {
	content: "Ödeme";
	display: block;
	margin-block-end: .75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}
.havara-odeme-iframe .wc-block-checkout__actions { display: none; }
#havara-odeme-alani {
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 0 1.25rem 1.25rem;
	border: 2px solid var(--wp--preset--color--line);
	border-block-start: 0;
	border-end-start-radius: var(--havara-r-md);
	border-end-end-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
}
.havara-odeme-bos {
	display: grid;
	justify-items: center;
	gap: .6rem;
	padding: 1.6rem 1rem;
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: var(--havara-r-md);
	text-align: center;
}
.havara-odeme-bos p { margin: 0; max-inline-size: 26rem; font-weight: 600; }
.havara-odeme-bos > span:not(.havara-odeme-donen) {
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--accent);
	font-weight: 800;
}
#havara-odeme-alani.is-uyari .havara-odeme-bos { border-color: var(--wp--preset--color--primary); }
.havara-odeme-donen {
	inline-size: 2rem;
	block-size: 2rem;
	border: 3px solid var(--wp--preset--color--line);
	border-block-start-color: var(--wp--preset--color--secondary);
	border-radius: var(--havara-r-pill);
	animation: havara-don 0.8s linear infinite;
}
@keyframes havara-don { to { transform: rotate(360deg); } }
.havara-odeme-baslik { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--subtle); text-transform: uppercase; letter-spacing: .06em; }
#havara-odeme-cercevesi { display: block; inline-size: 100%; block-size: 640px; border: 0; }
/* Taksit tablosu (taksit-tablosu.php): fiyatin altinda kapali tek satir,
   acilinca bilgi kartlariyla ayni kenar dili. */
.havara-taksit {
	margin-block-start: var(--wp--preset--spacing--20);
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}
.havara-taksit summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .55rem .8rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}
.havara-taksit summary::-webkit-details-marker { display: none; }
.havara-taksit summary::after { content: "+"; font-size: 1.2em; line-height: 1; color: var(--wp--preset--color--secondary-deep); }
.havara-taksit[open] summary::after { content: "−"; }
.havara-taksit summary:focus-visible { outline: 2px solid var(--wp--preset--color--secondary-deep); outline-offset: 2px; border-radius: var(--havara-r-md); }
.havara-taksit-ic { padding: 0 .8rem .7rem; }
.havara-taksit table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.havara-taksit th { text-align: start; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--subtle); font-weight: 500; padding: .35rem 0; }
.havara-taksit td { padding: .3rem 0; border-block-start: 1px solid var(--wp--preset--color--line); }
.havara-taksit th:not(:first-child), .havara-taksit td:not(:first-child) { text-align: end; }
.havara-taksit p { margin: .5rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--subtle); }
/* WooCommerce select'e sabit 3em yukseklik + 0.9em dikey dolgu veriyor; satir
   yuksekligiyle toplaninca metin alttan kesiliyordu. Yukseklik iceriğe kalir. */
.woocommerce table.variations tr td select {
	height: auto;
	min-height: 3rem;
	padding-block: .6rem;
	line-height: 1.4;
}

/* Cumle olan satirlar (Hazirlik, Iade) tek basina tam satir kaplasin, yarim kalmasin. */
.havara-bilgi-satirlari li.is-genis { grid-column: 1 / -1; }

/* Isme ozel metin alani */
.havara-isim-alani {
	margin: var(--wp--preset--spacing--30) 0;
	padding: .9rem 1rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--muted);
}
.havara-isim-alani label { display: block; font-weight: 700; margin-block-end: .4rem; }
.havara-isim-alani input {
	inline-size: 100%;
	padding: .6rem .8rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-sm);
	background: var(--wp--preset--color--surface);
	font: inherit;
}
.havara-isim-alani input:disabled { opacity: .6; }
.havara-isim-alani small { display: block; margin-block-start: .4rem; color: var(--wp--preset--color--subtle); }

/* Hediye paketi: onay kutusu, isaretlenince not alani acilir */
.havara-hediye-alani {
	margin: var(--wp--preset--spacing--30) 0;
	padding: .9rem 1rem;
	border: 2px dashed var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
}
.havara-hediye-secim { display: flex; align-items: center; gap: .6rem; font-weight: 700; cursor: pointer; }
.havara-hediye-secim input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--wp--preset--color--primary); }
.havara-hediye-alani small { display: block; margin: .35rem 0 0 1.75rem; color: var(--wp--preset--color--subtle); }
.havara-hediye-not { display: none; margin-block-start: .75rem; }
.havara-hediye-alani:has(input:checked) .havara-hediye-not { display: block; }
.havara-hediye-not label { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 700; margin-block-end: .3rem; }
.havara-hediye-not textarea {
	inline-size: 100%;
	padding: .6rem .8rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-sm);
	background: var(--wp--preset--color--surface);
	font: inherit;
	resize: vertical;
}
.havara-hediye-alani input:disabled, .havara-hediye-alani textarea:disabled { opacity: .6; }

/* Tamamlayicilar: "Yanina ne gider?" */
.havara-tamamlayici { margin-block-start: var(--wp--preset--spacing--60); }
.havara-tamamlayici .havara-bolum-basi { display: block; margin-block-end: var(--wp--preset--spacing--30); }
.havara-tamamlayici .havara-bolum-basi p { margin: .25rem 0 0; color: var(--wp--preset--color--subtle); }
.havara-tamamlayici-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.havara-tamamlayici-kart {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: .9rem;
	padding: .9rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-lg);
	background: var(--wp--preset--color--surface);
	transition: transform var(--havara-yayli), box-shadow var(--havara-yayli);
}
.havara-tamamlayici-kart:hover { transform: translateY(-4px); box-shadow: 0 8px 0 0 var(--wp--preset--color--contrast); }
.havara-tamamlayici-kart img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--havara-r-md); display: block; }
.havara-tamamlayici-kart strong { display: block; font-size: var(--wp--preset--font-size--small); }
.havara-tamamlayici-kart a { text-decoration: none; color: inherit; }
.havara-tamamlayici-kart p { margin: .3rem 0 .4rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--subtle); }
.havara-tamamlayici-fiyat { font-weight: 700; }

/* Kart alt satiri: fiyat solda, tek urunluk "Sepete ekle" sagda. Kucuk hap
   buton, tema butonuyla ayni kenar ve sert golge; WooCommerce ajax ekleme
   sirasinda .loading, bitince .added sinifi verir. */
.havara-tamamlayici-alt { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; }
.havara-tamamlayici-kart .havara-tamamlayici-ekle {
	display: inline-block;
	padding: .3rem .8rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	box-shadow: 0 3px 0 0 var(--wp--preset--color--contrast);
	white-space: nowrap;
	transition: transform var(--havara-yayli), box-shadow var(--havara-yayli), opacity var(--havara-hizli);
}
.havara-tamamlayici-kart .havara-tamamlayici-ekle:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--wp--preset--color--contrast); }
.havara-tamamlayici-kart .havara-tamamlayici-ekle:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--wp--preset--color--contrast); }
.havara-tamamlayici-kart .havara-tamamlayici-ekle.is-pasif { background: var(--wp--preset--color--surface); }
.havara-tamamlayici-kart .havara-tamamlayici-ekle.loading { opacity: .55; pointer-events: none; }
.havara-tamamlayici-kart .havara-tamamlayici-ekle.added::after { content: " ✓"; }
/* Ucretsiz kargo cubugu (sepet-buyut.php): tek satir metin, altinda ince ray.
   Mini sepette dar alan, ayni bilesen kucuk boyda. */
.havara-kargo-cubugu {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding: .7rem .9rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}
.havara-kargo-cubugu p { margin: 0 0 .45rem; }
.havara-kargo-ray { block-size: .55rem; border-radius: var(--havara-r-pill); background: var(--wp--preset--color--line); overflow: hidden; }
.havara-kargo-dolgu { display: block; block-size: 100%; background: var(--wp--preset--color--secondary); transition: width var(--havara-yayli); }
.havara-kargo-cubugu.is-tamam .havara-kargo-dolgu { background: var(--wp--preset--color--accent); }
.havara-kargo-cubugu[data-yer="mini"] { margin: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-small); padding: .55rem .75rem; }
.havara-kargo-cubugu[data-yer="urun"] { margin-block-start: var(--wp--preset--spacing--30); }
.wp-block-woocommerce-cart .havara-capraz-not { margin: -.5rem 0 1rem; color: var(--wp--preset--color--subtle); font-size: var(--wp--preset--font-size--small); }

.havara-tamamlayici-kart .added_to_cart { font-size: var(--wp--preset--font-size--x-small); text-decoration: underline; color: var(--wp--preset--color--subtle); }
.havara-tamamlayici-form, .havara-tamamlayici-not { margin-block-start: var(--wp--preset--spacing--30); }
.havara-tamamlayici-not { color: var(--wp--preset--color--subtle); font-size: var(--wp--preset--font-size--small); }

/* Baslik sosyal ikonlari: hesap simgesiyle ayni kutu boyutu ve renk */
.havara-sosyal-ikonlar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
}
.havara-sosyal-ikonlar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--havara-ikon-alani);
	block-size: var(--havara-ikon-alani);
	border-radius: 50%;
	color: var(--wp--preset--color--secondary-deep);
	transition: background var(--havara-hizli), color var(--havara-hizli);
}
.havara-sosyal-ikonlar a:hover,
.havara-sosyal-ikonlar a:focus-visible { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--primary-deep); }
/* Kisa kod paragrafa sarilabiliyor; bosluk birakmasin. */
.havara-baslik .wp-block-shortcode { margin: 0; }
/* Dar ekranda baslikta hamburger, hesap ve sepet zaten yan yana; uc ikon daha
   sigmaz. Mobilde sosyal ikonlar alt bilgide, WhatsApp sag alttaki dugmede. */
@media (max-width: 899px) {
	.havara-baslik .havara-sosyal-ikonlar { display: none; }
}

/* Alt bilgi: marka satiri, sosyal ikonlar koyu zeminde, sicil satiri */
.havara-altbilgi .havara-altbilgi-marka .custom-logo { inline-size: 40px; block-size: auto; }
.havara-altbilgi .havara-altbilgi-takip { margin-block: var(--wp--preset--spacing--30) .25rem; opacity: .7; }
.havara-altbilgi .havara-sosyal-ikonlar { margin-inline-start: calc(var(--havara-ikon-alani) / -4); }
.havara-altbilgi .havara-sosyal-ikonlar a { color: var(--wp--preset--color--accent); }
.havara-altbilgi .havara-sosyal-ikonlar a:hover,
.havara-altbilgi .havara-sosyal-ikonlar a:focus-visible { background: rgb(255 255 255 / .08); color: var(--wp--preset--color--primary); }
.havara-altbilgi .wp-block-shortcode { margin: 0; }
.havara-sicil {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
	opacity: .8;
}
.havara-sicil span { margin-inline: .25rem; opacity: .5; }
.havara-sicil a { color: inherit; }

/* Alt bilgi sosyal baglantilari */
.havara-sosyal { list-style: none; margin: var(--wp--preset--spacing--30) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.havara-sosyal a {
	display: inline-flex;
	flex-direction: column;
	padding: .45rem .8rem;
	border: 2px solid currentColor;
	border-radius: var(--havara-r-md);
	text-decoration: none;
	color: inherit;
	line-height: 1.2;
}
.havara-sosyal a:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.havara-sosyal strong { font-size: var(--wp--preset--font-size--small); }
.havara-sosyal span { font-size: var(--wp--preset--font-size--x-small); opacity: .8; }

/* Sag altta WhatsApp dugmesi */
.havara-whatsapp {
	position: fixed;
	inset-block-end: 1.1rem;
	inset-inline-end: 1.1rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	box-shadow: 0 4px 0 0 var(--wp--preset--color--contrast);
	transition: transform var(--havara-hizli), box-shadow var(--havara-hizli);
}
.havara-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--wp--preset--color--contrast); }
@media (max-width: 600px) {
	.havara-whatsapp span { display: none; }
	.havara-whatsapp { padding: .7rem; }
}

li:hover .havara-kart-etiket { transform: rotate(-4deg) translateY(-2px); }

/* Urun basligi core/post-title blogu olarak isleniyor. Baslik ogesi oldugu
   icin Fraunces'i ve bag rengini miras aliyordu; kart baslikligi govde
   fontuyla ve murekkep rengiyle daha okunur. */
.wc-block-components-product-title,
.wp-block-woocommerce-product-title,
li.wc-block-product > .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0;
}

.wc-block-components-product-title a,
li.wc-block-product > .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-product-title a:hover,
li.wc-block-product > .wp-block-post-title a:hover { color: var(--wp--preset--color--primary-deep); }

.wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.wc-block-components-product-price del {
	color: var(--wp--preset--color--subtle);
	font-weight: 400;
	margin-inline-end: .35rem;
}

.wc-block-components-product-price ins { text-decoration: none; color: var(--wp--preset--color--primary-deep); }

/* Indirim rozeti */
.wc-block-components-product-sale-badge {
	position: absolute;
	inset-block-start: .7rem;
	inset-inline-end: .7rem;
	z-index: 2;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	padding: .25rem .7rem;
	font-size: .72rem;
	font-weight: 700;
	transform: rotate(4deg);
}

/* Buton kart genisligini alsin ve kartin altina yaslansin. WooCommerce'in
   kendi kurali (.wp-block-button.wc-block-components-product-button
   .wp-block-button__link) width: auto diyor ve iki sinifli oldugu icin
   daha ozgul; bu yuzden kart secicisi one ekleniyor. */
li.wc-block-product .wp-block-button.wc-block-components-product-button {
	margin-block-start: auto;
	justify-content: stretch;
}

li.wc-block-product .wp-block-button.wc-block-components-product-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
}

/* =========================================================================
   Magaza ve filtreler

   WooCommerce filtre bloklari kendi varsayilan gorunumleriyle geliyor ve
   temanin geri kalanindan kopuk duruyor. Buradaki kurallar onlari ayni
   bicim diline sokuyor: kalin koyu kenar, yuvarlak kose, mercan vurgu.
   ====================================================================== */

.havara-magaza-duzen {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.havara-filtreler {
	position: sticky;
	top: calc(var(--havara-baslik-yuksekligi) - 2rem);
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--30);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-lg);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 900px) {
	.havara-magaza-duzen { grid-template-columns: 1fr; }
	.havara-filtreler { position: static; }
}

.havara-filtreler h2,
.havara-filtreler h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
	margin: 0 0 .7rem;
}

/* Filtre gruplari arasina ince bir ayrac. */
.havara-filtreler .wp-block-woocommerce-product-filter + .wp-block-woocommerce-product-filter {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--line);
}

/* -------- Onay kutulu listeler -------- */

.havara-filtreler fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

.havara-filtreler .wc-block-product-filter-checkbox-list__items {
	max-block-size: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline-end: .25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
}

.havara-filtreler .wc-block-product-filter-checkbox-list__item { margin: 0; }

.havara-filtreler .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: .55rem;
	inline-size: 100%;
	padding: .35rem .5rem;
	border-radius: var(--havara-r-sm);
	cursor: pointer;
	transition: background var(--havara-hizli);
}

.havara-filtreler .wc-block-product-filter-checkbox-list__label:hover {
	background: var(--wp--preset--color--muted);
}

/* Onay kutusunun renkleri WooCommerce'in kendi degiskenleriyle veriliyor;
   blogun genisletme noktasi bu. Boyut ve kose icin ayrica kural gerekiyor,
   cunku WooCommerce onlari input[type=checkbox].sinif seklinde yaziyor ve
   o secici tek sinifli bir kuraldan daha ozgul. */
.havara-filtreler {
	--wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--surface);
	--wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--contrast);
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--primary);
}

.havara-filtreler input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	border-width: 2px;
	border-radius: 6px;
	transition: background var(--havara-hizli);
}

.havara-filtreler input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--primary);
}

/* Kutunun arkasindaki soluk gri dolgu. Kendi zeminimizi verdigimiz icin
   gereksiz ve kenarligi bulaniklastiriyor. */
.havara-filtreler .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none; }

.havara-filtreler .wc-block-product-filter-checkbox-list__input-wrapper {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	flex: none;
}

/* Tik isareti WooCommerce'in ayri bir ogesi; mercan dolgunun uzerinde
   okunur kalsin diye murekkep rengini aliyor. */
.havara-filtreler .wc-block-product-filter-checkbox-list__mark {
	color: var(--wp--preset--color--contrast);
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.havara-filtreler .wc-block-product-filter-checkbox-list__text-wrapper {
	min-inline-size: 0;
	line-height: 1.35;
}

/* Parantez icindeki urun sayisi metinden geri planda dursun. */
.havara-filtreler .wc-block-product-filter-checkbox-list__count {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--x-small);
}

/* "15 tane daha goster" dugmesi. WooCommerce'in varsayilani alti cizili
   duz bir metin; hap bicimine sokuluyor. */
.havara-filtreler .wc-block-product-filter-checkbox-list__show-more-button {
	display: inline-block;
	margin-block-start: .7rem;
	padding: .3rem .85rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--havara-hizli), border-color var(--havara-hizli);
}

.havara-filtreler .wc-block-product-filter-checkbox-list__show-more-button:hover,
.havara-filtreler .wc-block-product-filter-checkbox-list__show-more-button:focus {
	background: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* -------- Fiyat araligi -------- */

/* Izgara cocuklarinin varsayilan min-width degeri auto. Icerideki iki sayi
   kutusu sutundan genis oldugu icin filtre sutunundan tasiyordu. */
.havara-filtreler .wc-block-product-filter-price-slider__content > * { min-inline-size: 0; }

.havara-filtreler .wc-block-product-filter-price-slider__range {
	inline-size: 100%;
	margin-block: .4rem 1rem;
}

/* Dolu bolum mercan, bos bolum cizgi rengi. --low ve --high degerlerini
   WooCommerce kendi betigi ile guncelliyor. */
.havara-filtreler .range-bar {
	block-size: 6px;
	border-radius: var(--havara-r-pill);
	background: linear-gradient(
		to right,
		var(--wp--preset--color--line) 0%,
		var(--wp--preset--color--line) var(--low),
		var(--wp--preset--color--primary) var(--low),
		var(--wp--preset--color--primary) var(--high),
		var(--wp--preset--color--line) var(--high),
		var(--wp--preset--color--line) 100%
	) !important;
}

.havara-filtreler .wc-block-product-filter-price-slider__range input[type="range"] {
	appearance: none;
	background: transparent;
	padding: 0;
	border: 0;
}

.havara-filtreler .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	cursor: grab;
	pointer-events: auto;
}

.havara-filtreler .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	cursor: grab;
	pointer-events: auto;
}

.havara-filtreler .wc-block-product-filter-price-slider__left,
.havara-filtreler .wc-block-product-filter-price-slider__right { min-inline-size: 0; }

.havara-filtreler .wc-block-product-filter-price-slider__right { text-align: end; }

.havara-filtreler .wc-block-product-filter-price-slider__content input[type="text"],
.havara-filtreler .wc-block-product-filter-price-slider__content input[type="number"] {
	inline-size: 100%;
	min-inline-size: 0;
	padding: .45rem .6rem;
	border-radius: var(--havara-r-sm);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
}

/* -------- Secili filtre etiketleri -------- */

.wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0 0 .6rem;
	padding: 0;
}

.wc-block-product-filter-removable-chips__item {
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--muted);
	padding: .18rem .6rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.wc-block-product-filter-clear-button {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	color: var(--wp--preset--color--primary-deep);
}

/* -------- Ust satir: sonuc sayisi ve siralama -------- */

.wp-block-woocommerce-product-results-count,
.woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-catalog-sorting select,
.woocommerce-ordering select {
	max-inline-size: 15rem;
	padding: .5rem 2.2rem .5rem .9rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-pill);
	font-weight: 600;
	cursor: pointer;
}

/* -------- Sayfalama -------- */

.wp-block-query-pagination { gap: .4rem; }

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.4rem;
	padding: .35rem .75rem;
	border: 2px solid transparent;
	border-radius: var(--havara-r-pill);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--havara-hizli), border-color var(--havara-hizli);
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--contrast);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   Tek urun sayfasi
   ====================================================================== */

.havara-urun-duzen {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

@media (max-width: 900px) {
	.havara-urun-duzen { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.havara-urun-bilgi { position: static; }
}

.havara-urun-bilgi {
	position: sticky;
	top: var(--havara-baslik-yuksekligi);
}

.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery__image img {
	border: 3px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-xl);
}

/* Yalnizca tek urun sayfasindaki fiyat iri. Kapsam daraltilmazsa kural
   magaza izgarasina da siziyor ve fiyat urun adindan buyuk cikiyor. */
.havara-urun-bilgi .wp-block-woocommerce-product-price,
.havara-urun-bilgi .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

/* Secilen varyasyon: fiyat ve stok sepete ekle dugmesinin hemen ustunde tek
   satir ("₺95,00  ● Stokta"). Ustteki buyuk fiyat da app.js ile guncellenir;
   kullanici alttaki satirin da fiyat gostermesini istedi (2026-09-15). */
/* Kap WooCommerce'in slideDown'u ile satir ici display:block aliyor, flex
   yazilamiyor; cocuklar yan yana satir ici dizilir. */
.single_variation:not(:empty) { margin: 0 0 .9rem; }
.single_variation > div {
	display: inline-block;
	vertical-align: middle;
	margin-inline-end: 1rem;
}
.single_variation .woocommerce-variation-description:empty { display: none; }
.single_variation .woocommerce-variation-price .price {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.single_variation .woocommerce-variation-availability p { margin: 0; }

/* Stok notu: duz metin yerine kucuk, noktali. */
.woocommerce-variation-availability .stock {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--secondary-deep);
}
.woocommerce-variation-availability .stock::before {
	content: "";
	inline-size: .5rem;
	block-size: .5rem;
	border-radius: 50%;
	background: currentColor;
}
.woocommerce-variation-availability .stock.out-of-stock { color: var(--wp--preset--color--primary-deep); }

/* Secicilerle fiyat satiri arasi: tablonun alt boslugu ve "Temizle" satiri
   fiyati asagi itiyordu. */
/* WooCommerce kurali: .woocommerce div.product form.cart .variations (margin 1em, td alt dolgu). */
.woocommerce div.product form.cart table.variations { margin-block-end: 0; }
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th { padding-block-end: 0; }
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-block-start: .35rem;
	line-height: 1.2;
}

/* Varyasyon secicileri: kucuk acilir kutu yerine dolgun, tiklanabilir alanlar. */
.variations {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 .75rem;
}

.variations th.label {
	text-align: start;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	padding-inline-end: 1rem;
	vertical-align: middle;
	white-space: nowrap;
}

.variations select {
	width: 100%;
	min-height: 3rem;
	padding: .6rem 1rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: border-color var(--havara-hizli), box-shadow var(--havara-hizli);
}

.variations select:focus {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent);
	outline: none;
}

/* Renk secici: acilir kutu gizli ama formda; dugmeler onu dolduruyor
   (renk-secici.php). Nokta rengi terimden inline --havara-renk ile gelir. */
/* Secici .woocommerce table.variations tr td select kuralini yenmek icin uzun. */
.woocommerce table.variations tr td .havara-renk-secici select {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.havara-renkler {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.havara-renk {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: .35rem 1rem .35rem .4rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--havara-hizli), box-shadow var(--havara-hizli), transform var(--havara-hizli);
}

.havara-renk:not(:has(.havara-renk__nokta)) { padding-inline-start: 1rem; }

.havara-renk:hover { border-color: var(--wp--preset--color--subtle); }

.havara-renk:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent);
}

.havara-renk[aria-pressed="true"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--muted);
	box-shadow: 0 3px 0 var(--wp--preset--color--contrast);
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	font-weight: 700;
	transform: translateY(-2px);
}

/* Bir renk secilince digerleri geri cekilir; hover ile tam gorunur.
   Yalniz siyah kenar hover'dan ayirt edilmiyordu (2026-09-15). */
.havara-renkler:has([aria-pressed="true"]) .havara-renk[aria-pressed="false"] {
	opacity: .5;
	transition: opacity var(--havara-hizli), border-color var(--havara-hizli);
}
.havara-renkler:has([aria-pressed="true"]) .havara-renk[aria-pressed="false"]:hover,
.havara-renkler:has([aria-pressed="true"]) .havara-renk[aria-pressed="false"]:focus-visible { opacity: 1; }

.havara-renk__nokta {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--contrast);
	background: var(--havara-renk);
	flex: none;
}

/* Parlak ve simli filament (renk-secici.php 1.1.0). Isik ve sim tonu
   kart renginden turetilir; zemin rengi ya da gradyan altta kalir. */
.havara-renk__nokta--ipek {
	background:
		radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--wp--preset--color--surface) 85%, transparent) 0 14%, transparent 42%),
		var(--havara-renk);
}
.havara-renk__nokta--isiltili {
	background:
		radial-gradient(circle at 30% 30%, var(--wp--preset--color--surface) 0 1px, transparent 1.5px),
		radial-gradient(circle at 68% 42%, var(--wp--preset--color--surface) 0 1px, transparent 1.5px),
		radial-gradient(circle at 45% 70%, var(--wp--preset--color--surface) 0 .8px, transparent 1.3px),
		radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent) 0 .8px, transparent 1.3px),
		radial-gradient(circle at 22% 58%, color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent) 0 .7px, transparent 1.2px),
		radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--wp--preset--color--surface) 35%, transparent) 0 10%, transparent 40%),
		var(--havara-renk);
}

/* Secili dugmede noktanin icinde onay halkasi. */
.havara-renk[aria-pressed="true"] .havara-renk__nokta {
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--surface);
}

/* Bu renk secili diger niteliklerle birlikte yok. */
.havara-renk.is-gecersiz {
	opacity: .45;
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	.havara-renk { transition: none; }
	.havara-renk[aria-pressed="true"] { transform: none; }
}

.reset_variations {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--subtle);
}

/* Katalog modu notu */
.havara-catalog-notice {
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--mint);
	opacity: 1 !important;
	color: var(--wp--preset--color--contrast);
}

/* Urun ozellikleri tablosu */
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	text-align: start;
	padding: .75rem .6rem;
	border-bottom: 2px solid var(--wp--preset--color--line);
}

.woocommerce-product-attributes th { font-weight: 700; width: 34%; }
.woocommerce-product-attributes td { color: var(--wp--preset--color--subtle); }
.woocommerce-product-attributes td p { margin: 0; }

/* Sekmeler: alt cizgi yerine hap seklinde secim. WooCommerce "minimal" stili
   aktif sekmenin li'sine masaustunde alt, mobilde sol siyah kenar veriyor;
   hap zaten secimi gosteriyor. Sinif tekrari onun secicisini yenmek icin. */
html body .wp-block-woocommerce-product-details.is-style-minimal.is-style-minimal ul.tabs.wc-tabs li {
	border-width: 0;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: .4rem;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	flex-wrap: wrap;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .55rem 1.1rem;
	text-decoration: none;
	color: var(--wp--preset--color--subtle);
	border: 2px solid transparent;
	border-radius: var(--havara-r-pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	transition: background var(--havara-hizli), color var(--havara-hizli), border-color var(--havara-hizli);
}

.woocommerce-tabs ul.tabs li a:hover { background: var(--wp--preset--color--muted); }

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   Ekmek kirintisi, bildirimler, formlar
   ====================================================================== */

.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--subtle);
}

.wp-block-woocommerce-breadcrumbs a,
.woocommerce-breadcrumb a { color: inherit; text-decoration: none; }

.wp-block-woocommerce-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--primary-deep); text-decoration: underline; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--surface);
	padding: 1rem 1.2rem;
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.woocommerce-message { background: var(--wp--preset--color--mint); }
.woocommerce-info    { background: var(--wp--preset--color--muted); }
.woocommerce-error   { background: color-mix(in srgb, var(--wp--preset--color--primary) 18%, var(--wp--preset--color--base)); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"], textarea, select {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: .75rem 1rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--havara-r-sm);
	background: var(--wp--preset--color--surface);
	color: inherit;
	max-width: 100%;
	transition: border-color var(--havara-hizli), box-shadow var(--havara-hizli);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent);
	outline: none;
}

/* =========================================================================
   Mobil ve acilir menu
   ====================================================================== */

/* Acilir menu position: fixed ile tum ekrani kaplamak ister. Ama basliktaki
   backdrop-filter, icindeki fixed ogeler icin yeni bir kapsayici blok
   yaratiyor; menu ekrani degil yalnizca basligin kutusunu kapliyordu ve
   maddeler kirpiliyordu. Menu acilinca WordPress html ogesine
   has-modal-open sinifini ekliyor, filtreyi o sirada kaldiriyoruz. */
html.has-modal-open .havara-baslik {
	backdrop-filter: none;
	background: var(--wp--preset--color--base);
}

/* Menu acikken govde yerinde sabitleniyor. Cekirdegin overflow: hidden
   kurali kaydirma kutusunu daraltip sayfayi basa donduruyordu; app.js konumu
   kaydedip burada sabitliyor ve menu kapaninca geri yukluyor. */
body.havara-kaydirma-kilitli {
	position: fixed;
	inset-inline: 0;
	inline-size: 100%;
}

/* WordPress gezintiyi 600 pikselin altinda hamburgere ceviriyor. Sekiz
   kategorili menu 600 ile 900 arasinda iki satira tasiyor, bu yuzden esik
   yukari cekildi. Kurallar cekirdegin kendi kurallariyla ayni ozgullukte,
   app.css sonra yuklendigi icin kazaniyor. */
@media (max-width: 899px) {
	.havara-baslik .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.havara-baslik .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }

	/* Hamburger kendi satirini israf etmesin; logo satirinin sagina oturuyor. */
	.havara-baslik > .wp-block-group {
		position: relative;
		padding-inline-end: 3rem;
	}

	/* Dikey ortalama transform ile yapilmiyor. transform da tipki
	   backdrop-filter gibi icindeki fixed ogeler icin kapsayici blok
	   yaratir ve acilir menuyu bu kutuya hapseder. */
	/* Arama kutusu kendi satirina gectigi icin kap iki satir yuksekliginde.
	   Hamburger tum kaba gore ortalanirsa iki satirin arasina duser; bu yuzden
	   yuksekligi ilk satirin yuksekligine, yani ikon olcusune sabitleniyor.
	   Hesap ikonu da ayni olcude oldugu icin ikisi birebir hizali. */
	/* Yalnizca nav ogesi. .wp-block-navigation sinifi acilir menudeki
	   listeye de veriliyor; gevsek bir secici o listeyi de mutlak konumlu
	   yapip menunun ust boslugunu bozuyordu.

	   Konumlu ata baslik oldugu icin olcu onun kenar kutusundan basliyor.
	   Hesap ikonu ise basligin ust dolgusunun altindaki grupta duruyor;
	   hamburger o kadar asagi kaydirilinca ikisi ayni bandi paylasiyor.
	   Deger, header.html icindeki ust dolgu ile ayni belirteci kullaniyor. */
	.havara-baslik > nav.wp-block-navigation {
		position: absolute;
		inset-block-start: var(--wp--preset--spacing--30);
		inset-inline-end: 0;
		block-size: var(--havara-ikon-alani);
		display: flex;
		align-items: center;
		margin: 0 !important;
		transition: inset-block-start var(--havara-normal);
	}

	/* Baslik kaydirinca daraliyor ve ust dolgusu kuculuyor; hamburger de
	   ayni kadar yukari geliyor. */
	.havara-baslik.havara-kaydi > nav.wp-block-navigation {
		inset-block-start: var(--wp--preset--spacing--10);
	}

	/* Arama kutusu dar ekranda kendi satirina gecsin. */
	.havara-baslik .wp-block-search {
		order: 3;
		flex-basis: 100%;
		max-inline-size: none;
		margin-block-start: var(--wp--preset--spacing--20);
	}
}

.havara-baslik .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--havara-ikon-alani);
	block-size: var(--havara-ikon-alani);
	border-radius: var(--havara-r-pill);
	color: var(--wp--preset--color--contrast);
	transition: background var(--havara-hizli);
}

.havara-baslik .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--muted);
}

/* -------- Acik menunun ici -------- */

.havara-baslik .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Ust bosluk kapatma dugmesinin altina denk gelecek kadar; ilk madde
   carpi isaretinin altinda kalmasin. */
.havara-baslik .is-menu-open .wp-block-navigation__responsive-container-content {
	inline-size: 100%;
}

/* Kapatma dugmesi mutlak konumlu ve cekirdegin dialog kutusuna gore
   yerlesiyor; ilk menu maddesiyle ayni banda dusuyordu. Dugme bandin en
   ustune alindi. Altindaki bosluk cekirdegin icerik kutusuna verdigi ust
   dolgudan geliyor, ayrica bosluk eklenmiyor. */
.havara-baslik .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
}

/* Gezinti blogunun kendi duzen kurali (flex, satir yonunde) blok basina
   uretilen bir sinifla geliyor ve sinif adi her kurulusta degisebiliyor.
   Ona gore secici yazmak kirilgan olurdu, bu yuzden acik menude yon
   !important ile dikeye ceviriliyor. Kural yalnizca menu acikken gecerli. */
.havara-baslik .is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	inline-size: 100%;
}

/* Ust seviye maddeler: iri, baslik fontuyla, aralarinda ince ayrac. */
.havara-baslik .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	inline-size: 100%;
	align-items: flex-start;
	padding-block: .5rem;
	border-block-end: 2px solid var(--wp--preset--color--line);
}

.havara-baslik .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 40;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* Acik menude alt menu bir kart degil, girintili bir liste.
   Cekirdek burada 2rem yan bosluk veriyor ve secicisi bes sinifli; ayni
   uzunlukta yazilmasa kural gecmiyor. */
.havara-baslik .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	inline-size: 100%;
	min-inline-size: 0;
	padding: .2rem 0 .5rem .9rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	gap: 0;
}

.havara-baslik .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	inline-size: 100%;
}

.havara-baslik .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding: .4rem .5rem;
	border-radius: var(--havara-r-sm);
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

/* Ust seviyedeki seker cizgisi acik menude yer kaplamasin. */
.havara-baslik .is-menu-open .wp-block-navigation-item__content::after { content: none; }

/* -------- Akordiyon -------- */

/* Sekiz kategori ve 22 alt kategori acik menude tek ekrana sigmiyordu.
   Her kategori artik kapali basliyor, yanindaki ok listeyi aciyor.
   Kategori adi bag olarak kaliyor; dokununca kategori sayfasina gider.

   Butun kurallar .havara-akordiyon sinifina bagli ve o sinifi app.js
   ekliyor. JS calismazsa hicbiri devreye girmez, alt menuler acik kalir:
   menu uzun olur ama tam islevlidir.

   Secicilerin uzunlugu tesaduf degil. Cekirdek acik menudeki bu ogeleri
   bes sinifli kurallarla biciyor; daha kisa bir secici gecmiyor. */

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* Satirlar min-content, dagitim kapali. Ilk satir auto birakilir ve
	   align-content varsayilanda kalirsa acilma sirasinda ilk satirin
	   yuksekligi degisiyor; alt liste asagi acilacagina 14 piksel yukari
	   kayiyordu. */
	grid-template-rows: min-content 0fr;
	align-content: start;
	align-items: start;
	column-gap: .5rem;
	transition: grid-template-rows 320ms cubic-bezier(.2, .7, .25, 1);
}

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child.havara-alt-acik {
	grid-template-rows: min-content 1fr;
}

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}

/* Cekirdek acik menude ok dugmesini gizliyor; akordiyonun tek acma yolu o
   oldugu icin geri getiriliyor.

   Gorunurde yalnizca kucuk bir chevron var; cerceve ve dolgu yok. Dokunma
   hedefi yine de 2.4 rem, yani parmak icin yeterli. Isaretin cizgisi
   currentColor kullaniyor, renk buradan geliyor. */
.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--subtle);
	cursor: pointer;
	transition: background var(--havara-hizli), color var(--havara-hizli);
}

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon svg {
	inline-size: 13px;
	block-size: 13px;
}

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon:hover {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child.havara-alt-acik > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--primary-deep);
}

/* Ok yonu kendi sinifimizdan suruluyor, cekirdegin aria-expanded kuralindan
   degil. Cekirdek acik menude o degeri her zaman true tutuyor; ona baglansak
   butun oklar acik gorunurdu. Isaretin kendisi asagi bakan bir chevron,
   acikken 180 derece donuyor. */
.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon svg {
	transform: rotate(0deg);
	transition: transform var(--havara-normal);
}

.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child.havara-alt-acik > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Alt liste ikinci izgara satirinda.

   align-self: stretch sart. Kap align-items: center kullaniyor (bag ile ok
   ayni hizada dursun diye) ve ortalanan bir izgara ogesi satir yuksekligine
   zorlanmaz, kendi icerigi kadar buyur. Kapali durumda liste gorunmeye
   devam ediyordu.

   Dolgu da sifirlaniyor: 0fr satirin taban yuksekligi ogenin en kucuk
   olcusu kadar oluyor ve dolgu bunun icinde sayiliyor, yani kapaliyken
   birkac piksel acik kaliyordu. Bosluk alt maddelerin kendi dolgusundan
   geliyor. */
.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: stretch;
	min-block-size: 0;
	padding: 0;
	overflow: hidden;
}

/* Acikken listenin altina biraz nefes payi. */
.havara-baslik .havara-akordiyon.is-menu-open .wp-block-navigation__responsive-container-content .has-child.havara-alt-acik > .wp-block-navigation__submenu-container {
	padding-block-end: .45rem;
}

/* -------- Dar ekran duzeltmeleri -------- */

@media (max-width: 600px) {
	.havara-mozaik { gap: var(--wp--preset--spacing--20); }

	.havara-kategori-govde { padding: .65rem .75rem; }

	.havara-kategori-govde strong { font-size: var(--wp--preset--font-size--medium); }

	.havara-ok {
		inline-size: 1.6rem;
		block-size: 1.6rem;
		font-size: .8rem;
	}

	/* Akan seritte yazi biraz kuculsun ki bir bakista birkac urun okunsun. */
	.havara-akan-ic { font-size: var(--wp--preset--font-size--medium); }
	.havara-akan-ic > span { padding-inline: .9rem; }

	/* Vitrin gorseli dar ekranda metnin altinda; fazla yer kaplamasin. */
	.havara-vitrin-gorsel figure { max-inline-size: 20rem; }

	/* Urun izgarasi ikili. */
	.wc-block-product-template,
	.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}

	.wc-block-components-product-image { border-radius: var(--havara-r-md); }

	.havara-kart-etiket {
		inset-block-start: .45rem;
		inset-inline-start: .45rem;
		padding: .15rem .5rem;
		font-size: .64rem;
	}

	/* -------- Acilir menu, dar ekran -------- */

	/* Sekiz kategori ve 22 alt kategori tek sutunda cok uzun bir liste
	   yapiyordu; ekrana ancak iki kategori sigiyordu. Alt kategoriler ikili
	   izgaraya alinip olculer kuculunce menu yari yariya kisaliyor. */
	.havara-baslik .wp-block-navigation__responsive-container.is-menu-open {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.havara-baslik .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		padding-block: .3rem .5rem;
	}

	.havara-baslik .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--medium);
		padding-block: .25rem;
	}

	.havara-baslik .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 .4rem;
		padding: .15rem 0 .45rem .3rem;
	}

	.havara-baslik .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: .3rem .4rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* =========================================================================
   Alt bilgi
   ====================================================================== */

.havara-altbilgi {
	position: relative;
	background: var(--wp--preset--color--contrast);
	color: color-mix(in srgb, var(--wp--preset--color--base) 76%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.havara-altbilgi h2, .havara-altbilgi h3 {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: .9rem;
}

.havara-altbilgi .wp-block-site-title,
.havara-altbilgi .wp-block-site-title a { color: var(--wp--preset--color--base); }

.havara-altbilgi a { color: inherit; text-decoration: none; transition: color var(--havara-hizli); }
.havara-altbilgi a:hover { color: var(--wp--preset--color--accent); }

.havara-altbilgi .wp-block-separator { border-color: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent); }

.havara-altbilgi ul { list-style: none; padding: 0; margin: 0; }
.havara-altbilgi li + li { margin-block-start: .55rem; }

/* =========================================================================
   Izgara duzeltmeleri
   WordPress akis duzeni kardes ogelere ust kenar boslugu ekler. Grid
   kullandigimiz yerlerde bosluk zaten gap ile yonetiliyor, ikisi ust uste
   binmesin diye sifirlaniyor.
   ====================================================================== */

.havara-magaza-duzen > *,
.havara-urun-duzen > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Stokta yok: "Gelince haber ver" (stok-haberi.php). Stok satirinin altinda. */
.havara-stok-haberi { margin: var(--wp--preset--spacing--30) 0; }
.havara-stok-haberi-form {
	padding: .9rem 1rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-md);
	background: var(--wp--preset--color--muted);
}
.havara-stok-haberi-form label { display: block; font-weight: 700; margin-block-end: .4rem; }
.havara-stok-haberi-satir { display: flex; flex-wrap: wrap; gap: .6rem; }
.havara-stok-haberi-satir input {
	flex: 1 1 14rem;
	padding: .6rem .8rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--havara-r-sm);
	background: var(--wp--preset--color--surface);
	font: inherit;
}
/* Bal kupu: insan gormez, bot doldurur. display:none bazi botlarca atlanir. */
.havara-stok-haberi-bal { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; }
.havara-stok-haberi-form small { display: block; margin-block-start: .5rem; color: var(--wp--preset--color--subtle); }
.havara-stok-haberi-sonuc { margin: .6rem 0 0; font-weight: 700; }
.havara-stok-haberi-sonuc:empty { display: none; }
/* Varyasyon stokta degilse WooCommerce sepet dugmesini sadece devre disi birakir; haber ver dugmesinin yanina gerek yok. */
.single_add_to_cart_button.wc-variation-is-unavailable { display: none; }

/* Galeri buyuteci: WooCommerce z-index 99 veriyor, yapisik baslik 40'ta.
   Menu acilinca simge menunun ustune biniyordu; galeri icinde 2 yeter. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger { z-index: 2; }