/* =============================================================================
   Biosmyrna — Düzen katmanı: header · menü · footer · yüzen öğeler · katmanlar

   🔴 Tüm yatay değerler yön-bağımsızdır (`inline-start` / `inline-end`).
      Arapça sürüm ayrı kural yazılmadan aynalanır.
   ============================================================================= */

/* =============================================================================
   HEADER — LAYOUT_SYSTEM §8A
   72 px masaüstü · 60 px mobil · gölge YOK, ince alt çizgi
   ============================================================================= */

.header {
	position: sticky;
	inset-block-start: 0;
	z-index: 90;
	background: var(--surface);
	border-block-end: var(--border-width) solid var(--divider);
	transition: transform var(--motion-base) var(--motion-ease),
	            background-color var(--motion-base) var(--motion-ease),
	            border-color var(--motion-base) var(--motion-ease);
}

/* Ana sayfa başı: şeffaf, hero üzerinde.
   H-2 — kontrast için hero'nun üstüne koyu geçiş katmanı konur (bkz. .hero__scrim) */
.header--transparent.is-top {
	background: transparent;
	border-block-end-color: transparent;
	color: var(--white);
}
.header--transparent.is-top .nav__link,
.header--transparent.is-top .icon-btn,
.header--transparent.is-top .lang__trigger { color: var(--white); }

/* Aşağı kaydırılırken gizlenir — 🔴 yalnızca ilk 100vh'den SONRA (B3).
   JS `is-hidden` sınıfını ancak eşiği geçince ekler. */
.header.is-hidden { transform: translateY(-100%); }

/* H-3 — odak header içindeyken gizlenmez */
.header:focus-within { transform: none !important; }

/* H-4 — hareketi azalt açıkken header her zaman görünür */
@media (prefers-reduced-motion: reduce) {
	.header { transition: none; }
	.header.is-hidden { transform: none; }
}

.header__inner {
	block-size: var(--header-height);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.header__logo { display: flex; align-items: center; flex: none; }
/* 🔴 `logo-min-lockup` = 160 px GENİŞLİK asgari sınırdır (DESIGN_TOKENS §8).
   Yatay kilidin oranı 638,64 × 205 ≈ 3,11:1 → 160 px genişlik ≈ 52 px yükseklik.
   Mobilde kilit yerine daha dar bir oran kullanılmaz; ölçek korunur. */
.header__logo-img {
	inline-size: 160px;
	block-size: auto;
	max-inline-size: none;
}

/* 🔴 F13 — logo AYNALANMAZ (marka varlığıdır) */
[dir="rtl"] .header__logo-img { transform: none; }

/* ⚠️ GEÇİCİ KURAL — LOGO_GUIDELINES §5
   Renkli logo koyu zeminde AA eşiğini geçmiyor (ölçüldü: 2,10:1) ve logonun
   TEK RENK sürümü henüz üretilmedi (COMPONENT_LIBRARY_V1 §15.1/R4).
   Ana sayfanın şeffaf header'ı koyu hero üzerindedir; bu yüzden logo AÇIK
   RENKLİ ZEMİN PLAKASI üzerine konur — footer'daki çözümün aynısı.
   🔴 Tek renk sürüm geldiğinde bu kural KALDIRILIR. */
.header--transparent.is-top .header__logo,
:root[data-theme="dark"] .header__logo,
:root[data-theme="dark"] .header--transparent.is-top .header__logo {
	background: var(--parchment);
	border-radius: var(--radius-sm);
	padding: var(--space-1) var(--space-2);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .header__logo {
		background: var(--parchment);
		border-radius: var(--radius-sm);
		padding: var(--space-1) var(--space-2);
	}
}

/* ── Ana menü ───────────────────────────────────────────────────────────── */

/* 🔴 UYGULAMA NOTU — yatay menü ÖLÇÜLEREK açılır, sabit bir piksele göre değil.

   Ölçüm (2026-09-07, gerçek metinle):
     Türkçe   · logo 160 + menü 1011 + eylemler 230 = 1281 px
     Almanca  · aynı sıra 1401 px — "Angebot anfordern" çevrildiğinde ~1481 px
   Sekiz ana başlık + dil seçici + arama + tema + "Teklif Al" tek satırda
   **hiçbir yaygın masaüstü genişliğinde beş dilde birden sığmıyor.**

   Menü puntosunu 14,5 px'in (🔒 ölçü kaynağı) altına indirmek, başlık sayısını
   azaltmak veya etiketleri kısaltmak TASARIM/İÇERİK kararıdır — burada
   verilmez, rapora işlenir (PHASE_7_KNOWN_ISSUES).

   Uygulanan çözüm YENİ BİR UX DEĞİLDİR: Faz 6'da zaten iki durum tasarlandı —
   yatay menü ve tam ekran çekmece. Betik, o dilde menünün fiilen sığıp
   sığmadığını ÖLÇER ve uygun olanı gösterir. JavaScript yoksa çekmece çalışır;
   tüm bağlantılar erişilebilir kalır (M-4 · A11).
   Alt sınır `bp-xl` (1280) — mevcut token, yeni kırılma noktası üretilmedi. */
.header__nav { display: none; margin-inline-end: auto; }
@media (min-width: 1280px) {
	.header--wide .header__nav { display: block; }
}

/* Ölçüm anı — menü görünmeden genişliği hesaplanır, düzen kaymaz */
.header__nav.is-measuring {
	display: block;
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	inset-block-start: 0;
	inset-inline-start: 0;
	white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 0; }
.nav__item { position: relative; }

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	/* Ölçü kaynağı: COMPONENT_LIBRARY §8 — menü öğesi 14,5 px / 500 ağırlık */
	padding: var(--space-3) 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-secondary);
	text-decoration: none;
	white-space: nowrap;
	border-block-end: var(--border-width-strong) solid transparent;
}
.nav__link:hover { color: var(--link); border-block-end-color: var(--link); }
.nav__link[aria-current] { color: var(--link); border-block-end-color: var(--link); }

.nav__chevron { transition: transform var(--motion-fast) var(--motion-ease); }
.nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* Açılır panel — elev-2 */
.nav__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 260px;
	background: var(--surface-raised);
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-md);
	box-shadow: var(--elev-2);
	padding: var(--space-4);
	z-index: 30;
}
.nav__panel[hidden] { display: none; }

.nav__list li + li { margin-block-start: var(--space-1); }
.nav__list a,
.nav__cols a,
.nav__featured-list a {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: var(--radius-sm);
}
.nav__list a:hover,
.nav__cols a:hover,
.nav__featured-list a:hover { background: var(--action-soft-bg); color: var(--link); }

/* Mega menü — X8. 🔴 Bioyem SAĞ SÜTUNDA, görsel olarak ayrı durur.

   🔴 2026-09-09 · DÜZELTME — panel tam ekrandı, ölçüldü ve daraltıldı.
      Ölçüm (1600×900): 1585 × 551 px = ekranın %99 genişliği, %61 yüksekliği.
      Yükseklik SOL sütundan gelmiyordu: sol sütun 205 px, sağdaki Bioyem
      sütunu 485 px — yani panelin 280 px'i boş alandı.

      İki neden vardı:
      1. `position: fixed; inset-inline: 0` — panel viewport'a yapışıp
         kenardan kenara uzanıyordu.
      2. Bioyem listesi 8 öğeyi TEK sütunda basıyordu (NAVIGATION §1.1'in
         şemasında 4 grup görünür; içerik modelinde 8 yaprak sayfa var).

      🔴 Bu YENİ BİR UX DEĞİLDİR. NAVIGATION §1.1'in şeması zaten iki sütunlu,
      içeriği kadar yer kaplayan bir açılır paneldir; tam ekran yayılma
      belgede hiçbir yerde istenmemişti — uygulama fazlasıydı. Geri alınıyor.

      🔴 `max-block-size` eklendi: kısa ekranlarda panel viewport'u taşarsa
      kendi içinde kayar, sayfayı kaplamaz. */
.nav__panel--mega {
	/* Tetiğe bağlı kalır (.nav__item position:relative) — viewport'a değil */
	inline-size: max-content;
	max-inline-size: min(960px, calc(100vw - var(--space-8) * 2));
	padding: var(--space-6);
	max-block-size: calc(100vh - var(--header-height) - var(--space-6));
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Sağa taşmasın — menünün sağ ucundaki başlıklarda panel sola hizalanır */
.nav__item--has-menu:nth-last-child(-n + 3) .nav__panel--mega {
	inset-inline-start: auto;
	inset-inline-end: 0;
}
.nav__panel--mega .nav__panel-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: var(--space-6);
	align-items: start;
}
.nav__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-1) var(--space-5);
}
.nav__cols-all { grid-column: 1 / -1; padding-block-start: var(--space-3); }

.nav__featured {
	padding: var(--space-5);
	background: var(--surface-warm);
	border: var(--border-width) solid var(--surface-warm-line);
	border-radius: var(--radius-md);
}
.nav__featured-title { margin-block-end: var(--space-3); color: var(--heading); }
/* 8 öğe tek sütunda paneli 485 px'e uzatıyordu — iki sütun yüksekliği yarılar.
   🔴 Sütun genişliği "Kanatlı — Yumurta Tavuğu" gibi en uzun etiketin tek
   satıra sığmasına göre seçildi (360 px kutu → ~155 px sütun); dar bırakılırsa
   etiketler sarar ve iki sütun yüksekliği DÜŞÜRMEZ, artırır. */
.nav__featured-list {
	margin-block-end: var(--space-3);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-2);
}
.nav__featured-list a { padding-inline: var(--space-2); }

/* ── Header eylemleri ───────────────────────────────────────────────────── */

.header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-inline-start: auto;
}

/* 🔴 Seçici `.header` ile başlar: `.icon-btn` temel kuralı components.css'te
   ve DAHA SONRA yükleniyor; eşit özgüllükte olsaydı onu ezerdi. */
.header .header__icon-btn { display: none; }
@media (min-width: 768px) { .header .header__icon-btn { display: inline-flex; } }

/* 🔴 H-1 / N-1 — Teklif Al mobilde de görünür kalır */
.header__cta { flex: none; }

.header .header__burger { display: inline-flex; }
@media (min-width: 1280px) {
	.header--wide .header__burger { display: none; }
}

/* Tema düğmesi ikonları */
.theme-icon { display: none; }
:root:not([data-theme="dark"]) .theme-icon--moon { display: block; }
:root[data-theme="dark"] .theme-icon--sun { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-icon--moon { display: none; }
	:root:not([data-theme="light"]) .theme-icon--sun { display: block; }
}
:root[data-theme="light"] .theme-icon--sun { display: none; }
:root[data-theme="light"] .theme-icon--moon { display: block; }

/* ── Dil seçici — C4 ────────────────────────────────────────────────────── */

.lang { position: relative; display: none; }
@media (min-width: 768px) { .lang { display: block; } }
.lang__trigger { white-space: nowrap; }

.lang__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-block-size: var(--touch-min);
	padding-inline: var(--space-2);
	background: none;
	border: 0;
	color: var(--text-secondary);
	font-size: var(--text-body-sm);
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}
.lang__list {
	position: absolute;
	inset-block-start: calc(100% + var(--space-1));
	inset-inline-end: 0;
	min-inline-size: 180px;
	background: var(--surface-raised);
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-md);
	box-shadow: var(--elev-2);
	padding: var(--space-2);
	z-index: 30;
}
.lang__list[hidden] { display: none; }
.lang__list a,
.lang__list span {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-body-sm);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--text-secondary);
}
.lang__list a:hover { background: var(--action-soft-bg); color: var(--link); }
.lang__list a[aria-current] { font-weight: 600; color: var(--link); }

/* 🔴 Karşılığı olmayan dil PASİF görünür — kırık bağlantı bırakılmaz */
.lang__unavailable { color: var(--text-muted); opacity: 0.55; cursor: not-allowed; }

/* ── Arama alanı ────────────────────────────────────────────────────────── */

.header__search {
	border-block-start: var(--border-width) solid var(--divider);
	background: var(--surface);
	padding-block: var(--space-4);
}
.header__search[hidden] { display: none; }

.search-form { display: flex; gap: var(--space-3); align-items: center; }
.search-form__input { flex: 1; }

/* =============================================================================
   MOBİL MENÜ — C8 · COMPONENT_LIBRARY §13G
   Tam ekran katman · arkadaki sayfa kaymaz · RTL'de sağdan açılır
   ============================================================================= */

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--surface);
	display: flex;
	flex-direction: column;
}
.mobile-nav[hidden] { display: none; }

/* 🔴 2026-09-09 · GENİŞ EKRANDA ÇEKMECE TAM EKRAN OLMAZ.
   NAVIGATION §2 "tam ekran çekmece" der ama o başlık **MOBİL menü**dür.
   Çekmece masaüstünde de görünüyor — çünkü yatay menü beş dilde sığmıyor ve
   ölçüm sonucu çekmeceye düşülüyor (KI-1). Mobil için tasarlanmış tam ekran
   kaplama 1600 px'lik bir ekranda yanlış duruyordu; kullanıcı bunu bildirdi.

   🔴 Yeni bir UX üretilmedi: aynı çekmece, aynı içerik, aynı davranış.
   Yalnızca geniş ekranda GENİŞLİĞİ sınırlanıp kenara yaslanıyor ve arkasına
   karartma konuyor. Mobilde hiçbir şey değişmez.

   🔴 Asıl çözüm bu değildir. Asıl çözüm KI-1'in kararıdır: menü sığarsa
   masaüstünde çekmece hiç açılmaz. Bu, karar verilene kadarki hâli
   katlanılabilir kılar. */
@media (min-width: 768px) {
	.mobile-nav {
		inline-size: min(420px, 92vw);
		inset-inline-start: auto;          /* sağa yasla (RTL'de sola) */
		box-shadow: var(--elev-3, 0 0 40px rgba(14, 21, 18, 0.28));
		border-inline-start: var(--border-width) solid var(--divider);
	}
	/* Arka karartma — çekmecenin bittiği yer belli olsun */
	.mobile-nav::before {
		content: "";
		position: fixed;
		inset: 0;
		inset-inline-end: min(420px, 92vw);
		background: rgba(14, 21, 18, 0.44);
		z-index: -1;
		pointer-events: none;
	}
}

.mobile-nav__bar {
	block-size: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--gutter);
	border-block-end: var(--border-width) solid var(--divider);
	flex: none;
}
.mobile-nav__scroll {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-5) var(--gutter) var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.mobile-nav__cta,
.mobile-nav__cta-bottom { inline-size: 100%; justify-content: center; }

.mobile-nav__search { gap: var(--space-2); }
.mobile-nav__search .input { flex: 1; }

.mobile-nav__list { border-block-start: var(--border-width) solid var(--divider); }
.mobile-nav__item { border-block-end: var(--border-width) solid var(--divider); }

.mobile-nav__link,
.mobile-nav__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-block-size: var(--touch-min);
	padding-block: var(--space-3);
	font-size: var(--text-body-lg);
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}
.mobile-nav__summary::-webkit-details-marker { display: none; }
.mobile-nav__group[open] .mobile-nav__chevron { transform: rotate(180deg); }
.mobile-nav__chevron { transition: transform var(--motion-fast) var(--motion-ease); }

.mobile-nav__sub { padding-block-end: var(--space-3); }
.mobile-nav__sub a {
	display: block;
	min-block-size: var(--touch-min);
	padding: var(--space-2) 0 var(--space-2) 0;
	padding-inline-start: var(--space-4);
	font-size: var(--text-body);
	color: var(--text-secondary);
	text-decoration: none;
}

.mobile-nav__langs ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.mobile-nav__langs a,
.mobile-nav__langs span {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
	font-size: var(--text-body-sm);
	text-decoration: none;
	color: var(--text-secondary);
}

/* Menü açıkken sayfa kaymaz */
body.is-nav-open { overflow: hidden; }

/* =============================================================================
   FOOTER — X9 · LAYOUT_SYSTEM §8B
   Derin zemin · çuval bezi dokusu şeridi · 4 sütun · mobilde 2 sütun
   ============================================================================= */

.footer { position: relative; margin-block-start: var(--space-10); }

/* 2026-09-22 · şirket isteği: footer arkasında görsel (Footer_Background),
   üstünde %50 koyu, renksiz geçiş — ana sayfa kapanış bandıyla aynı dil.
   Görsel dekoratif; yüklenmezse bant rengi (--band) kalır. */
.footer {
	/* 2026-10-15 · kullanıcı: "gradyanın opaklığını biraz azaltırsak görünüm sorununu aşmış oluruz" — 0,58–0,68 → 0,44–0,54 */
	background-color: var(--band);
	background-image:
		linear-gradient(180deg, rgba(6, 8, 7, 0.44) 0%, rgba(6, 8, 7, 0.48) 50%, rgba(6, 8, 7, 0.54) 100%),
		url("../assets/footer/footer-bg.jpg");
	background-image:
		linear-gradient(180deg, rgba(6, 8, 7, 0.44) 0%, rgba(6, 8, 7, 0.48) 50%, rgba(6, 8, 7, 0.54) 100%),
		var(--footer-bg, image-set(url("../assets/footer/footer-bg.webp") type("image/webp"), url("../assets/footer/footer-bg.jpg") type("image/jpeg")));   /* --footer-bg: panelden (footer.php) */
	background-size: cover;
	background-position: center center;   /* görsel footer oranına (3,2:1) hazırlandı — yanlar dar ekranda kırpılır */
}

/* Faz 10: zemin görseli bölüm ekrana yaklaşınca iner (main.js · bg-hazir); o zamana kadar yalnız geçiş + bant rengi */
html:not(.no-js) .footer:not(.bg-hazir) {
	background-image: linear-gradient(180deg, rgba(6, 8, 7, 0.44) 0%, rgba(6, 8, 7, 0.48) 50%, rgba(6, 8, 7, 0.54) 100%);
}

/* Üst kenar dokusu — sıcaklık ve fiziksel dünya.
   Dekoratif: `repeating-linear-gradient` ile, ek dosya indirmeden. */
.footer__texture {
	block-size: 10px;
	background:
		repeating-linear-gradient(90deg,
			rgba(239, 239, 228, 0.16) 0 2px, transparent 2px 4px),
		repeating-linear-gradient(0deg,
			rgba(239, 239, 228, 0.10) 0 2px, transparent 2px 4px);
	border-block-end: var(--border-width) solid rgba(239, 239, 228, 0.18);
}

.footer__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-7) var(--space-5);
	padding-block: var(--space-8);
}
@media (min-width: 768px) {
	.footer__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-8) var(--space-6);
		padding-block: var(--space-9);
	}
}

.footer__col--brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .footer__col--brand { grid-column: auto; } }

/* ⚠️ Geçici kural: renkli logo koyu zeminde 2,10:1 verir. Tek renk beyaz
   sürüm gelene kadar AÇIK RENKLİ ZEMİN PLAKASI kullanılır (LOGO_GUIDELINES §5). */
.footer__logo-plate {
	display: inline-block;
	background: var(--parchment);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-block-end: var(--space-4);
}
.footer__logo-plate img { block-size: auto; inline-size: 150px; }

.footer__intro { color: var(--band-text); max-inline-size: 34ch; }

.footer__title { color: var(--primary-300); margin-block-end: var(--space-4); }

/* F-4 — bağlantılar sıkıştırılmaz; nefes alan tipografi */
.footer__list li + li,
.footer__contact li + li { margin-block-start: var(--space-3); }

.footer__list a,
.footer__contact a,
.footer__social a {
	color: var(--band-text);
	font-size: var(--text-body-sm);
	text-decoration: none;
}
.footer__list a:hover,
.footer__contact a:hover,
.footer__social a:hover { color: var(--band-accent); text-decoration: underline; }

.footer__contact { font-size: var(--text-body-sm); color: var(--band-text); }

.footer .arrow-link { color: var(--band-accent); margin-block-start: var(--space-3); }

.footer__social {
	margin-block-start: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.footer__social a { display: inline-flex; align-items: center; gap: var(--space-1); }

.footer__bottom { border-block-start: var(--border-width) solid rgba(239, 239, 228, 0.16); }
.footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	padding-block: var(--space-5);
}
.footer__copy { color: var(--primary-300); }
.footer__legal,
.footer__langs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer__legal a,
.footer__langs a,
.footer__langs span {
	font-size: var(--text-caption);
	color: var(--primary-300);
	text-decoration: none;
}
.footer__legal a:hover,
.footer__langs a:hover { color: var(--band-accent); text-decoration: underline; }
.footer__langs { margin-inline-start: auto; }

/* =============================================================================
   YÜZEN EYLEMLER — C57
   Sağ altta (RTL'de sol altta). Birincil eylemle yarışmaz.
   ============================================================================= */

.floating {
	position: fixed;
	inset-block-end: calc(var(--space-5) + var(--cookie-h, 0px));
	inset-inline-end: var(--space-5);
	z-index: 95;   /* 🔄 2026-10-08 · 80 → 95: WhatsApp paneli bu kabın içinde; başlık şeridinin (90) üstünde kalmalı */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}
.floating__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: var(--radius-full);
	background: var(--action-primary-bg);
	color: var(--action-primary-text);
	box-shadow: var(--elev-2);
	text-decoration: none;
}
.floating__btn:hover { background: var(--action-primary-hover); }
.floating__hours {
	background: var(--surface-raised);
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-sm);
	padding: var(--space-1) var(--space-2);
	max-inline-size: 160px;
	text-align: center;
}
@media (max-width: 767px) { .floating__hours { display: none; } }

/* 2026-10-08 · WhatsApp destek paneli (floating-actions.php). Yüzen düğmenin
   üstünde açılır; mobilde ekran genişliğine yayılır. Tema renkleri token'dan. */
.wa-panel {
	position: fixed;
	inset-block-end: calc(var(--space-5) + 64px + var(--cookie-h, 0px));
	inset-inline-end: var(--space-5);
	/* 🔄 2026-10-08 · başlık şeridi (z 90) panelin üstüne biniyor, kapat düğmesi
	   altında kalıyordu (kullanıcı). Panel şeridin ÜSTÜNDE; mobil menü (120) ve
	   görüntüleyicinin (130+) altında. Yükseklik ekrana sığar, taşarsa içi kayar. */
	z-index: 95;
	max-block-size: calc(100dvh - var(--space-5) - 64px - var(--space-4));
	display: flex; flex-direction: column;
	inline-size: min(340px, 100vw - 2 * var(--gutter));
	background: var(--surface-raised, var(--surface));
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-lg);
	box-shadow: var(--elev-3, var(--elev-2));
	overflow: hidden;
	text-align: start;
}
.wa-panel[hidden] { display: none; }
.wa-panel__head {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
	background: var(--action-primary-bg); color: var(--action-primary-text);
}
.wa-panel__logo { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.wa-panel__logo .icon { inline-size: 20px; block-size: 20px; }
.wa-panel__who { flex: 1; min-inline-size: 0; }
.wa-panel__title { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; }
.wa-panel__sub { margin: 0; font-size: 12px; opacity: .85; }
.wa-panel__close {
	display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px;
	border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.wa-panel__close:hover, .wa-panel__close:focus-visible { background: rgba(255, 255, 255, .16); }
.wa-panel__body { display: grid; gap: var(--space-3); padding: var(--space-4); overflow-y: auto; min-block-size: 0; }
.wa-panel__head { flex: none; }
.wa-panel__bubble {
	margin: 0; padding: var(--space-3) var(--space-4);
	background: var(--surface-alt); color: var(--text-primary, var(--text));
	border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
	font-size: 15px; line-height: 1.5;
}
.wa-panel__form { display: grid; gap: var(--space-2); margin: 0; }
.wa-panel__text {
	inline-size: 100%; resize: vertical; min-block-size: 76px;
	padding: var(--space-2) var(--space-3);
	border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
	background: var(--surface); color: var(--text-primary, var(--text));
	font: inherit; font-size: 16px; line-height: 1.45;   /* 16 px: iOS odaklanınca yakınlaştırmasın */
}
.wa-panel__send {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-block-size: 44px; padding: 0 var(--space-4);
	border: 0; border-radius: var(--radius-md);
	background: var(--action-primary-bg); color: var(--action-primary-text);
	font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.wa-panel__send:hover { background: var(--action-primary-hover); }
.wa-panel__note { margin: 0; font-size: 12px; color: var(--text-secondary); }
.wa-panel__hours { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.wa-panel__hours .icon { flex: none; margin-block-start: 1px; color: var(--heading-brand); }
@media (max-width: 767px) {
	.wa-panel { inset-inline: var(--gutter); inline-size: auto; inset-block-end: calc(var(--space-5) + 60px); }
}

/* =============================================================================
   ÇEREZ BANDI — C63
   🔴 Üç düğme EŞİT görünürlükte. Bant içeriği kapatmaz.
   ============================================================================= */

.cookie {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 130;
	background: var(--surface-raised);
	border-block-start: var(--border-width-strong) solid var(--divider);
	box-shadow: var(--elev-3);
}
.cookie[hidden] { display: none; }
/* 2026-10-16 · kullanıcı: bant açıkken footer'ın son satırlarını (çerez tercihleri, dil
   kısayolları) ve yüzen düğmeleri kapatıyordu. Bant görünürken yüksekliği --cookie-h olarak
   yazılır (main.js): sayfanın altına o kadar boşluk açılır, yüzen düğmeler bandın üstüne çıkar. */
body { padding-block-end: var(--cookie-h, 0px); }
.cookie__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-4);
}
.cookie__text { flex: 1 1 320px; color: var(--text-secondary); }
.cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* =============================================================================
   BELGE GÖRÜNTÜLEYİCİ — X7
   🔴 İndirme yok · yazdırma yok · dosya adresi görünmez.
   ============================================================================= */

.viewer { position: fixed; inset: 0; z-index: 140; display: flex; }
.viewer[hidden] { display: none; }
.viewer__backdrop { position: absolute; inset: 0; background: rgba(14, 21, 18, 0.82); }
.viewer__panel {
	position: relative;
	margin: auto;
	inline-size: min(960px, calc(100% - var(--space-6)));
	max-block-size: calc(100dvh - var(--space-6));
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.viewer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-block-end: var(--border-width) solid var(--divider);
	flex: none;
}
.viewer__tools { display: flex; gap: var(--space-1); }
.viewer__stage {
	flex: 1;
	overflow: auto;
	background: var(--surface-alt);
	padding: var(--space-4);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* Kolay kaydetmeyi zorlaştırır — mutlak koruma değildir */
	-webkit-user-select: none;
	user-select: none;
}
.viewer__stage img,
.viewer__stage iframe {
	max-inline-size: 100%;
	transform-origin: top center;
	pointer-events: none;
}
.viewer__stage iframe { inline-size: 100%; block-size: 78vh; border: 0; pointer-events: auto; }

body.is-viewer-open { overflow: hidden; }

/* =============================================================================
   ANA SAYFA — header hero'nun ÜZERİNDE durur
   LAYOUT_SYSTEM §8A: "Sayfa başı — ana sayfa: ŞEFFAF, hero görselinin üzerinde."
   Header akışta yer kapladığı için ana içerik header yüksekliği kadar yukarı
   çekilir; hero tam ekran kalır ve header onun üzerine biner.
   🔴 Yalnızca ana sayfada — diğer sayfalarda header opak ve akışta durur.
   ============================================================================= */

body.tpl-home > main {
	margin-block-start: calc(var(--header-height) * -1);
}