/* =============================================================================
   Biosmyrna — Site çerçevesi v2: header · footer · başa dön (2026-09-22)

   Şirket kararı: header ve footer, referans alınan Blocksy "charity"
   demosunun düzenini ve davranışını izler; içerik ve renk Biosmyrna'nındır.
   Bu dosya layout.css'teki önceki header/footer kurallarının ÜZERİNE yazar;
   geri almak için _main.php'deki tek bağlantı satırı kaldırılır.
   Kayıt: PHASE_7_KNOWN_ISSUES §39. Önceki ölçüler: LAYOUT_SYSTEM §8A/§8B.
   ============================================================================= */

:root { --header-top: 60px; }
@media (min-width: 1024px) { :root { --header-top: 96px; } }

/* =============================================================================
   HEADER — hep görünür; kaydırınca küçülür (96 → 72 px) ve zemine geçer
   Dış kutu sayfa başındaki yüksekliği SABİT tutar: küçülme içerikte kayma
   yaratmaz. Zemin, gölge ve çizgi `::before` katmanındadır ve iç yükseklikle
   birlikte küçülür. Dış kutunun alt boşluğu tıklamayı geçirir.
   ============================================================================= */

.header {
	--header-now: var(--header-top);
	block-size: var(--header-top);
	background: none;
	border-block-end: 0;
	pointer-events: none;
	transform: none !important;           /* eski gizlenme davranışı kalktı */
}
.header.is-scrolled { --header-now: var(--header-height); }
.header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: var(--header-now);
	background: var(--surface);
	border-block-end: 0;   /* şirket: "Header en altında ince bir çizgi var, kaldır" */
	transition: block-size 260ms var(--motion-ease), background-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
	pointer-events: none;
	z-index: -1;
}
.header.is-scrolled::before { background: var(--surface); box-shadow: 0 10px 24px rgba(14, 21, 18, 0.08); }
/* 🔄 2026-09-22 · şirket: "Sayfa aşağı kayarken header şeffaf değil beyaz
   olmalı. Alttaki yazılarla header menü bilgileri karışıyor." — buzlu cam
   (Canlılık 15) kaldırıldı; kaydırınca zemin TAM OPAK. */
/* motion.css'teki eski buzlu cam kuralı dış kutudaydı — artık katmanda */
.header:not(.is-top) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Ana sayfa başı: şeffaf, hero'nun üzerinde */
/* 🔄 2026-09-22 · şirket: "Menü kısmına %50 gradyan siyah background
   ekleyelim; aşağı kayınca kalksın. Maksat ilk açılışta logonun ve menü
   başlıklarının görünür olması." Geçiş header'ın 48 px altına uzanıp söner. */
.header--transparent.is-top::before {
	block-size: calc(var(--header-now) + 48px);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) calc(100% - 48px), rgba(0, 0, 0, 0) 100%);
	border-block-end-color: transparent;
	box-shadow: none;
}

.header__inner,
.header__search { pointer-events: auto; }
.header__inner {
	position: relative;
	block-size: var(--header-now);
	transition: block-size 260ms var(--motion-ease);
}
/* Arama paneli artık akışı itmez; header'ın altında açılır */
.header__search {
	position: absolute;
	inset-inline: 0;
	inset-block-start: var(--header-now);
	box-shadow: var(--elev-2);
}

/* Ana sayfada içerik, sayfa başındaki header yüksekliği kadar yukarı çekilir */
body.tpl-home > main { margin-block-start: calc(var(--header-top) * -1); }

/* ── Logo — Logo-Transparan-5 (dikey kilit, şeffaf) · yüksekliğe göre ────
   Plaka yok: logo koyu hero üzerinde de okunur. Kaydırınca küçülür. */
.header__logo { order: -1; background: none !important; padding: 0 !important; }
.header__logo picture { display: block; }
.header__logo-img {
	inline-size: auto !important;
	block-size: 44px;
	max-inline-size: none;
	transition: block-size 260ms var(--motion-ease);
}
@media (min-width: 1024px) {
	.header__logo-img { block-size: 78px; }
	.header.is-scrolled .header__logo-img { block-size: 58px; }
}

/* ── Yan gruplar — dar düzende: sol grup gizli, sağda yalnız eylemler ─── */
.header__side { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.header__side--start { display: none; }
.header__side--end { margin-inline-start: auto; }
.header__side .header__nav { display: none; }

/* ── Üç kademe (betik ölçerek seçer · main.js fitHeaderNav) ────────────
   1 · ORTALANMIŞ  .header--wide.header--centered — logo ortada, menü 4 + 4,
       solda sosyal medya. Header tam genişlik kullanır.
   2 · İKİ SATIR   .header--stacked — üst satır: sosyal · LOGO (ortada) ·
       eylemler; alt satır: menü, logonun ekseninde ikiye bölünmüş.
   3 · ÇEKMECE     sınıf yok — logo solda + menü düğmesi (dar ekran).
   🔄 2026-09-22 · şirket: logo ORTADA — "logo solda + tek satır" kademesi
      kaldırıldı; masaüstünde logo her durumda ortadadır. */
@media (min-width: 1024px) {
	.header--wide .header__side .header__nav { display: block; margin: 0; }
	.header--wide .header__side--start { display: flex; }
	.header--wide .header__side--end { flex: 1; }
	.header--wide .header__side--end .header__actions { margin-inline-start: auto; }
	.header--wide:not(.header--centered) .header__social { display: none; }

	.header--centered .header__inner {
		max-inline-size: none;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: var(--space-5);
	}
	.header--centered .header__side--start { justify-content: flex-start; }
	.header--centered .header__side--end { justify-content: flex-end; margin: 0; }
	.header--centered .header__side--end .header__actions { margin-inline-start: var(--space-2); }

	.header--centered .header__logo { order: 0; justify-self: center; }
}
.header__social { flex: none; flex-wrap: nowrap; }
@media (max-width: 1023px) { .header__social { display: none; } }

/* ── 2 · İKİ SATIR  .header--stacked (şirket kararı 2026-09-22) ─────────
   Şirket: "Bu alanı gizli 2 satırlı bir alan olarak hayal et. Aralarında
   ayırıcı bir çizgi olmasın. Üst kısımda logo hem dikey hem yatay ortalı.
   Solunda ve sağında bulunan menü alanları hem dikey olarak ortalı hem de
   yatayda kendi aralarında ortalı. Alt satır bu yapıdan bağımsız gibi —
   solda ikonlar, sağda diğer bilgiler."
       üst satır  →  menü yarısı │ LOGO │ menü yarısı   (hepsi dikeyde ortalı)
       alt satır  →  sosyal medya ……………………… arama · tema · dil · buton
   Kaydırınca iki satır da incelir; logo ve "Talebinizi İletin" kaybolmaz. */
/* 🔄 2026-10-08 · kullanıcı: "Kataloglar satırını yukarı çekelim, arada çok boşluk
   var — logoyu bozmadan." Logo artık İKİ SATIRA YAYILIR (boyu aynı); satırlar
   inceldi: 100 + 52 = 152 px → 60 + 50 = 110 px (kaydırınca 120 → 92 px). */
:root:has(.header--stacked) { --header-top: 110px; }
@media (min-width: 1024px) {
	.header--stacked { --satir-1: 60px; --satir-2: 50px; --header-scrolled: 92px; }
	.header--stacked.is-scrolled { --satir-1: 48px; --satir-2: 44px; --header-now: var(--header-scrolled); }
	.header--stacked .header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-rows: var(--satir-1) var(--satir-2);
		column-gap: var(--space-6);
		row-gap: 0;
		max-inline-size: none;
		transition: none;
	}
	.header--stacked .header__inner::after { content: none; }
	.header--stacked .header__side { display: contents; }
	.header--stacked .header__logo { grid-column: 2; grid-row: 1 / span 2; justify-self: center; align-self: center; display: flex; align-items: center; justify-content: center; }
	.header--stacked .header__side--start .header__nav { grid-column: 1; grid-row: 1; justify-self: stretch; align-self: center; display: block; margin: 0; }
	.header--stacked .header__side--end .header__nav   { grid-column: 3; grid-row: 1; justify-self: stretch; align-self: center; display: block; margin: 0; }
	/* 🔄 2026-09-22 · 5 + 5 başlık (şirket): her yarı kendi alanını kaplar,
	   başlıklar bu alana EŞİT dağılır — "logonun soluna sağına eşit dağıt". */
	.header--stacked .header__nav .nav { inline-size: 100%; justify-content: space-evenly; }
	.header--stacked .header__social  { grid-column: 1; grid-row: 2; justify-self: start; align-self: center; display: flex; }
	.header--stacked .header__actions { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; margin: 0; }
	.header--stacked .header__burger { display: none !important; }
	/* Alt satırdaki her öğe dikeyde ortada; buton daha ince (şirket: "Talebinizi
	   İletin alt kısma yapışık duruyor… dış çerçevesini biraz daraltabiliriz") */
	.header--stacked .header__actions,
	.header--stacked .header__social { align-items: center; block-size: 100%; }
	.header--stacked .header__cta { min-block-size: 36px; padding: 7px 16px; font-size: 14px; line-height: 1.2; }
	.header--stacked .header__logo-img { block-size: clamp(76px, 5.2vw, 90px); }   /* şirket: "logoyu biraz büyütebilir" — dar ekranda 76 px */
	.header--stacked.is-scrolled .header__logo-img { block-size: 62px; }
}

/* ── 2B · MENÜ ALTTA  .header--stacked.header--menu-alt ──────────────────
   Menünün logonun iki yanına bölünmüş hâli sığmadığında (≈1280–1365 px ya
   da Windows %125 ölçekli 1600 px ekranlar) çekmeceye düşmeden önce:
       üst satır  →  sosyal medya ……  LOGO  …… arama · tema · dil · buton
       alt satır  →  sekiz başlık ortada tek sıra
   Aynı iki satırlı çerçeve; yalnız menünün yeri değişir. */
/* 🔄 şirket: "satır bilgileri üstte, menü başlıkları 2. satırda görünüyor" —
   sıra ana düzenle aynı olsun: ÜSTTE menü, ALTTA sosyal · LOGO · eylemler. */
@media (min-width: 1024px) {
	.header--menu-alt .header__inner { display: flex; flex-wrap: wrap; align-content: stretch; column-gap: var(--space-4); }
	.header--menu-alt .header__side--start .header__nav { order: 1; margin: 0 0 0 auto; block-size: var(--satir-2); display: flex; align-items: center; }
	.header--menu-alt .header__side--end .header__nav { order: 2; margin: 0 auto 0 var(--nav-aralik); block-size: var(--satir-2); display: flex; align-items: center; }
	[dir="rtl"] .header--menu-alt .header__side--start .header__nav { margin: 0 auto 0 0; }
	[dir="rtl"] .header--menu-alt .header__side--end .header__nav { margin: 0 var(--nav-aralik) 0 auto; }
	.header--menu-alt .header__inner::after { content: ""; order: 3; flex-basis: 100%; block-size: 0; }
	.header--menu-alt .header__social { order: 4; flex: 1 1 0; block-size: var(--satir-1); }
	.header--menu-alt .header__logo { order: 5; flex: none; block-size: var(--satir-1); }
	.header--menu-alt .header__actions { order: 6; flex: 1 1 0; justify-content: flex-end; block-size: var(--satir-1); }
	.header--menu-alt .header__logo-img { block-size: 72px; }
	.header--menu-alt.is-scrolled .header__logo-img { block-size: 54px; }
}

/* ── Menü: bulunulan sayfa koyu, diğerleri soluk (şirket isteği) ───────── */
.nav__link {
	color: var(--text-muted);
	border-block-end-color: transparent !important;
	transition: color var(--motion-fast) var(--motion-ease);
}
.nav__link:hover,
.nav__link[aria-expanded="true"] { color: var(--heading); }
.nav__link[aria-current] { color: var(--heading); font-weight: 600; }
/* 🔄 2026-09-22 · şirket onayı: masaüstü menü başlıkları 14,5 → 16 px
   (COMPONENT_LIBRARY §8'deki 14,5 px ölçüsü tek satırlı eski header içindi).
   Geri almak için bu satırı silin. Çekmece menüsü etkilenmez. */
@media (min-width: 1024px) { .header__nav .nav__link { font-size: clamp(13.5px, calc(0.5vw + 7.1px), 16px); } }   /* 10 başlık · 1280 → 13,5 · 1366 → 13,9 · 1600 → 15,1 · ≥1780 → 16 px */
.header--transparent.is-top .nav__link { color: rgba(255, 255, 255, 0.74); }
.header--transparent.is-top .nav__link:hover,
.header--transparent.is-top .nav__link[aria-expanded="true"],
.header--transparent.is-top .nav__link[aria-current] { color: var(--white); }

/* ── EŞİT HÜCRELİ MENÜ (şirket, 2026-09-22) ────────────────────────────
   "En uzun başlık 'Tedarik ve Ticaret'. Bu başlığın genişliğini referans
   alalım; sol ve sağdaki menü sekmelerini aynı genişliğe getirip logoya
   yanaştıralım. Logo da diğer başlıklar kadar bir alan kullanmalı."
   Hücre genişliği (--nav-cell) betikte en uzun başlıktan ölçülür — dile
   göre kendiliğinden değişir. Logo da bir hücre genişliğindedir; iki
   yarı logoya yapışık durur, böylece logonun iki yanı eşit görünür. */
@media (min-width: 1024px) {
	/* Eşit hücre yalnızca sığdığında (.header--equal); sığmıyorsa başlıklar
	   kendi genişliğinde logoya yanaşır — menü çekmeceye düşmez. */
	.header--equal .header__inner {
		grid-template-columns: minmax(0, 1fr) var(--nav-cell) minmax(0, 1fr);
		column-gap: 0;
	}
	.header--equal .header__logo { inline-size: var(--nav-cell); justify-content: center; }
	.header--equal .header__nav .nav {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: var(--nav-cell);
	}
	.header--equal .nav__item { display: flex; justify-content: center; }
	/* Tek satır: sosyal medya en solda, eylemler en sağda; menü yarıları logoya yapışık */
	.header--centered .header__side--start { justify-content: space-between; }
	.header--centered .header__side--end { justify-content: space-between; }
	.header--centered .header__side--end .header__actions { margin-inline-start: 0; }
}

/* ── EŞİT ARALIKLI MENÜ (şirket, 2026-09-22 — eşit hücrenin yerine) ────
   "Menülerin kendi aralarındaki mesafe eşit fakat aralıkları çok açık
   duruyor. Logoya yakınlaştırmamız lazım; birbirleriyle olan düzenleri
   bozulmamalı." Eşit HÜCRE, kısa başlıkların çevresinde büyük boşluk
   bırakıyordu. Artık her başlık kendi genişliğinde; başlıklar arasında ve
   logoya olan mesafe AYNI sabit aralıktır (--nav-aralik). */
@media (min-width: 1024px) {
	.header--stacked,
	.header--centered { --nav-aralik: clamp(8px, calc(2.8vw - 28px), 28px); }   /* 1280 → 8 · 1366 → 10 · 1600 → 17 · 1920 → 26 px */
	.header--stacked .header__nav .nav,
	.header--centered .header__side .nav { display: flex; gap: var(--nav-aralik); }
	.header--stacked .nav__link,
	.header--centered .header__side .nav__link { padding-inline: 0; }
	.header--stacked .header__inner { column-gap: var(--nav-aralik); }
	/* 🔄 SİMETRİ (şirket: "soldakileri referans alarak onları da simetrik hâle
	   getirelim"): sol yarının her başlığı bir yuva kaplar (başlık + aralık);
	   sağ yarıda aynı yuvalar TERS sırayla kurulur ve başlıklar yuva ortasına
	   oturur. Böylece iki yarı logoya göre aynadır. Yuvalar betikte ölçülür. */
	.header--stacked.is-simetrik .header__side--start .header__nav .nav { display: grid; grid-template-columns: var(--sol-yuvalar); gap: 0; }
	.header--stacked.is-simetrik .header__side--end .header__nav .nav { display: grid; grid-template-columns: var(--sag-yuvalar); gap: 0; }
	.header--stacked.is-simetrik .header__nav .nav__item { display: flex; justify-content: center; }
	.header--stacked.is-simetrik .header__inner { column-gap: calc(var(--nav-aralik) / 2); }
}

/* ── Açılır paneller — logonun solundakiler SAĞA, sağındakiler SOLA açılır
   (şirket: "Ürünler sekmesine gelince açılan pencere sola açılıyor ve ekrana
   sığmadığı için alt bölümlerin bir kısmı okunmuyor"). Eski kural "son üç
   başlık sola açılır" tek satırlı menüye göreydi; bölünmüş menüde sol
   yarının başlıklarını ekran dışına itiyordu. Betik ayrıca paneli ekran
   kenarından içeri kaydırır (main.js · panelSigdir). */
.header__side--start .nav__panel,
.header__side--start .nav__item--has-menu:nth-last-child(-n + 3) .nav__panel--mega { inset-inline-start: 0; inset-inline-end: auto; }
.header__side--end .nav__panel,
.header__side--end .nav__item--has-menu:nth-last-child(-n + 3) .nav__panel--mega { inset-inline-start: auto; inset-inline-end: 0; }

/* ── Ürünler mega paneli — derli toplu (şirket, 2026-09-22) ────────────
   "Organik Ürünler sekmesinin alt menüsü çok yayılmış… genişlik ve uzunluk
   olarak çok yer kaplıyor." Önce 960 × 409 px. İç boşluk, satır aralığı ve
   Bioyem kutusu sıkılaştırıldı; içerik ve sıra değişmedi. */
/* 🔄 aynı gün, şirket: "ürün gruplarını 2 sütun hâlinde değil alt alta tek
   sütuna toparla, en alta Tüm Ürünler linkini ekle; sağda Bioyem Organik
   Yemler listelensin." Panel içeriği kadar geniştir. */
.nav__panel--mega { padding: var(--space-4); inline-size: max-content; max-inline-size: calc(100vw - 32px); }
.nav__panel--mega .nav__panel-inner { grid-template-columns: max-content max-content; gap: var(--space-4); }
.nav__cols { grid-template-columns: 1fr; gap: 0; }
.nav__cols a,
.nav__featured-list a { padding: 6px var(--space-2); line-height: 1.35; white-space: nowrap; }
.nav__cols-all { grid-column: auto; padding-block-start: var(--space-2); margin-block-start: var(--space-2); border-block-start: var(--border-width) solid var(--divider); }
.nav__cols-all .arrow-link { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px var(--space-2); font-size: var(--text-body-sm); }
.nav__featured { padding: var(--space-3) var(--space-4); }
.nav__featured-title { font-size: 16px; margin-block-end: var(--space-2); }
/* şirket: "Bioyem tarafı 2 sıra olarak kalabilir… genişletirsen hepsi tek satıra sığacaktır" */
.nav__featured-list { grid-template-columns: repeat(2, max-content); margin-block-end: var(--space-2); gap: 0 var(--space-3); }
.nav__featured-list a { font-size: var(--text-body-sm); white-space: nowrap; }
.nav__featured .arrow-link { font-size: var(--text-body-sm); }

/* ── Sosyal medya ikonları (header · footer · mobil menü) ─────────────── */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--radius-full);
	color: var(--text-muted);
	transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.social__link .icon { inline-size: 18px; block-size: 18px; }
a.social__link:hover,
a.social__link:focus-visible { color: var(--link); background: var(--action-soft-bg); transform: translateY(-2px); }
.header--transparent.is-top .social__link { color: rgba(255, 255, 255, 0.8); }
.header--transparent.is-top a.social__link:hover,
.header--transparent.is-top a.social__link:focus-visible { color: var(--white); background: rgba(255, 255, 255, 0.14); }
/* Geliştirme yer tutucusu — yayında basılmaz (bioSocialLinks) */
.social__link--pending { opacity: 0.45; outline: 1px dashed currentColor; outline-offset: -3px; }

/* ── Çerçeveli "Talebinizi İletin" — şeffaf header'da beyaz ───────────── */
.header__cta { white-space: nowrap; }
.header--transparent.is-top .header__cta {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.72);
	background: transparent;
}
.header--transparent.is-top .header__cta::before { background: rgba(255, 255, 255, 0.16); }

/* ── Dil seçici: bayrak + kısaltma ─────────────────────────────────────── */
.flag {
	inline-size: 20px;
	block-size: 14px;
	flex: none;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(14, 21, 18, 0.12);
}
.flag--none { display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.flag--none .icon { inline-size: 16px; block-size: 16px; }
.lang__trigger { gap: var(--space-2); }
.lang__list a,
.lang__list span { display: flex; align-items: center; gap: var(--space-2); }
.lang__code { font-weight: 600; min-inline-size: 2ch; }
.lang__name { color: var(--text-muted); }
.lang__list a[aria-current] .lang__name { color: inherit; }

/* =============================================================================
   ANA SAYFA AÇILIŞI — header'ın altında başlar (şirket, 2026-09-22)
   "Menünün hemen altında kalan resim ve üzerindeki yazı menüyü perdeliyor.
   Başlığı 1 punto küçültüp alt satıra taşıyalım." Hero içeriği ekran
   ortasına göre değil, header'ın ALTINDAKİ alana göre ortalanır; başlık
   bir kademe küçülür (96 → 84 px, dar ekranda orantılı).
   ============================================================================= */

.hero__inner { padding-block-start: calc(var(--header-top) + var(--space-6)); }
.hero__title { font-size: clamp(40px, 5.4vw, 84px); line-height: 1.08; }

/* ── Sayı şeridi ────────────────────────────────────────────────────────
   Beş rakam (şirket, 2026-09-22) → 🔄 altı rakam (şirket, 2026-09-23:
   "bir kolon daha açıp 8 hayvan grubu için hazır organik yem ibaresini
   de ekleyelim"). İki düzen de korunur; sütun sayısı içeriğe göre seçilir. */
@media (min-width: 768px) {
	.numbers:has(> :nth-child(5):last-child),
	.numbers:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.numbers:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
	.numbers:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.numbers__value { display: flex; align-items: baseline; gap: 0.12em; white-space: nowrap; }
.numbers__unit { font-size: 0.5em; font-weight: 600; letter-spacing: 0; }
/* Ana sayfa rakam şeridi — ince bant (şirket: "bölümler arası dengeyi
   gözeterek"). İçerik ~80 px iken 96 px'lik bölüm boşlukları şeridi boş,
   altındaki katalog başlığını uzak gösteriyordu (192 px). */
.home-numbers { padding-block: var(--space-8); }
@media (min-width: 1024px) { .home-numbers { padding-block: 56px; } }
.home-numbers + .section { padding-block-start: 72px; }
@media (max-width: 767px) { .home-numbers + .section { padding-block-start: var(--space-8); } }

/* ── Hareketli ok'lu buton (Bilgi Merkezi yönlendirmesi, 2026-09-22) ─── */
.btn--nudge .icon { transition: transform 320ms var(--motion-ease-out); }
.btn--nudge:hover .icon,
.btn--nudge:focus-visible .icon { transform: translateX(5px); }
[dir="rtl"] .btn--nudge:hover .icon--directional,
[dir="rtl"] .btn--nudge:focus-visible .icon--directional { transform: scaleX(-1) translateX(5px); }
@media (prefers-reduced-motion: no-preference) {
	.btn--nudge .icon { animation: bio-nudge 2.4s var(--motion-ease) infinite; }
	.btn--nudge:hover .icon, .btn--nudge:focus-visible .icon { animation: none; }
}
@keyframes bio-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } 90% { transform: translateX(0); } }
[dir="rtl"] .btn--nudge .icon--directional { animation-name: bio-nudge-rtl; }
@keyframes bio-nudge-rtl { 0%, 70%, 100% { transform: scaleX(-1); } 80% { transform: scaleX(-1) translateX(4px); } 90% { transform: scaleX(-1); } }

/* =============================================================================
   BAŞA DÖN — sağ alt (RTL'de sol alt), kaydırınca belirir
   ============================================================================= */

.floating { pointer-events: none; }
.floating > * { pointer-events: auto; }
.to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--action-primary-bg);
	color: var(--action-primary-text);
	box-shadow: 0 6px 18px rgba(14, 21, 18, 0.22);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.9);
	transition: opacity 300ms var(--motion-ease), transform 300ms var(--motion-ease-out), visibility 300ms, background-color var(--motion-fast) var(--motion-ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover,
.to-top:focus-visible { background: var(--action-primary-hover); transform: translateY(-3px); }
.to-top .icon { inline-size: 20px; block-size: 20px; }

/* =============================================================================
   FOOTER — üç sütun (2 : 1 : 1): marka · bağlantılar · iletişim
   Zemin görseli ve %50 örtü layout.css'te (şirket: "bizdeki kalsın").
   ============================================================================= */

.footer__inner { gap: var(--space-8) var(--space-6); }
@media (min-width: 768px) {
	.footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.footer__col--brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	/* 🔄 2026-09-23 · dört kolon: marka · Ürünler · Yasal metinler · İletişim */
	.footer__inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.2fr); gap: var(--space-8) var(--space-7); }
	.footer__col--brand { grid-column: auto; }
}

/* Marka sütunu — çerçevesiz logo, vurgu cümlesi, kısa tanıtım, sosyal medya */
.footer__logo { display: inline-block; margin-block-end: var(--space-5); }
.footer__logo img { inline-size: 200px; block-size: auto; }
.footer__tagline {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--text-h4, 20px);
	color: var(--band-heading);
	margin-block-end: var(--space-4);
}
.footer__intro { max-inline-size: 58ch; color: var(--band-text); }
.footer__intro p + p { margin-block-start: var(--space-3); }
.footer .social { margin-block-start: var(--space-5); gap: var(--space-2); }
.footer .social__link {
	inline-size: 40px;
	block-size: 40px;
	color: var(--band-text);
	border: var(--border-width) solid rgba(239, 239, 228, 0.28);
}
.footer a.social__link:hover,
.footer a.social__link:focus-visible { color: var(--ink-950, #0E1512); background: var(--band-accent); border-color: var(--band-accent); }

/* Bağlantı sütunu — iki liste alt alta */
.footer__block + .footer__block { margin-block-start: var(--space-7); }
.footer__title { color: var(--band-heading); font-family: var(--font-heading); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.footer__list li + li { margin-block-start: var(--space-2); }
/* 🔄 2026-09-22 · şirket: "linkli satırların rengi sarı görünüyor, beyaza
   çevirelim; ADRES gibi başlıklar soluk yeşil, koyu beyaz yapalım."
   Koyu bantta bağlantılar vurgu rengini (accent-400) alıyordu. */
.footer a:not(.btn):not(.social__link) { color: var(--white); }
.footer__list a,
.footer__list span { color: var(--white); }
.footer__list a:hover,
.footer__list a:focus-visible { color: var(--white); text-decoration-color: currentColor; }
.footer__list .is-pending { opacity: 0.8; }

/* İletişim sütunu — yuvarlak çerçeveli ikon + metin */
.footer__contact { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.footer__contact li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--radius-full);
	border: var(--border-width) solid rgba(239, 239, 228, 0.28);
	color: var(--band-text);
	transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.footer__contact-icon .icon { inline-size: 18px; block-size: 18px; }
.footer__contact-text { color: var(--band-text); font-size: var(--text-body-sm); line-height: 1.5; }
.footer__contact-label { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.footer__contact a { color: var(--white); }
/* Satırın üzerine gelince ikon marka tonuna döner (şirket isteği) */
.footer__contact li:hover .footer__contact-icon,
.footer__contact li:focus-within .footer__contact-icon { color: var(--ink-950, #0E1512); background: var(--band-accent); border-color: var(--band-accent); }
.footer__contact a:hover,
.footer__contact a:focus-visible { color: var(--white); }

/* Alt şerit — solda telif, sağda bayraklı dil bağlantıları */
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.footer__langs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.footer__langs a,
.footer__langs span { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 36px; color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: var(--text-body-sm); font-weight: 600; }
.footer__langs a:hover,
.footer__langs a:focus-visible,
.footer__langs a[aria-current] { color: var(--white); }
.footer__langs .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.footer__langs .flag--none { box-shadow: none; }

/* ── Sıkıştırma (şirket, 2026-09-22) ─────────────────────────────────────
   "Footer'da üstte bir border kullanmışız, onu kaldıralım. Footer dikey
   olarak hâlâ çok yer kaplıyor… metin, linkler oturduktan sonra oluşan net
   ölçülere göre resmi uyarlamak gerekir." Çuval bezi şeridi kalktı; iç
   boşluklar ve aralıklar küçüldü. Görsel `cover` ile footer'ın NET
   yüksekliğine uyar — footer görsele göre değil, içeriğine göre boylanır. */
.footer__texture { display: none; }
.footer { margin-block-start: var(--space-8); }
.footer__inner { padding-block: var(--space-7) var(--space-6); gap: var(--space-6) var(--space-6); }
@media (min-width: 1024px) {
	.footer__inner { padding-block: var(--space-7) var(--space-6); gap: var(--space-6) var(--space-8); }
}
.footer__logo { margin-block-end: var(--space-3); }
.footer__logo img { inline-size: 132px; }
.footer__tagline { font-size: 18px; margin-block-end: var(--space-2); }
.footer__intro p + p { margin-block-start: var(--space-2); }
.footer .social { margin-block-start: var(--space-4); }
.footer .social__link { inline-size: 36px; block-size: 36px; }
.footer__title { font-size: 17px; margin-block-end: var(--space-3); }
.footer__list li + li { margin-block-start: 6px; }
.footer__block + .footer__block { margin-block-start: var(--space-5); }
.footer__contact { gap: var(--space-3); }
.footer__contact li { grid-template-columns: 36px minmax(0, 1fr); }
.footer__contact-icon { inline-size: 36px; block-size: 36px; }
.footer__contact li + li { margin-block-start: 0; }
/* Faz 10: telefonda iletişim sütunu da tam genişlik — yarım sütunda numaralar ikiye, e-posta
   kelime ortasından bölünüyordu ("info@biosmyrn / a.com"). */
@media (max-width: 767.98px) { .footer__col--contact { grid-column: 1 / -1; } }
.footer__bottom-inner { padding-block: var(--space-3); }

/* Yayında olmayan yasal metin adları bağlantılarla aynı boyutta */
.footer__list span { font-size: var(--text-body-sm); }

/* Mobil menü — dil listesi ve sosyal medya */
.mobile-nav__langs a,
.mobile-nav__langs span { display: inline-flex; align-items: center; gap: var(--space-2); }
.mobile-nav .social { margin-block: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
	.header::before, .header__inner, .header__logo-img, .to-top, .social__link, .footer__contact-icon { transition: none !important; }
}

/* =============================================================================
   İNSAN KAYNAKLARI (careers.php · 2026-09-22 · §40)
   ============================================================================= */

.ik-bos { color: var(--text-secondary); max-inline-size: 66ch; margin-block-start: var(--space-4); display: grid; gap: var(--space-3); }
.ik-pozisyonlar { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .ik-pozisyonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ik-pozisyon {
	display: grid; gap: var(--space-2); align-content: start;
	padding: var(--space-5);
	background: var(--surface-raised);
	border: var(--border-width) solid var(--card-border);
	border-radius: var(--radius-md);
}
.ik-pozisyon__meta { color: var(--text-muted); }

.ik-form-alani { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 1024px) {
	.ik-form-alani { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-9); }
	/* 🔄 2026-09-23 · sabitleme kaldırıldı: aydınlatma metni formun altına
	   taşınınca sabit sütun metnin üstüne biniyordu. */
}
.ik-form-alani__giris .t-h2 { margin-block-end: var(--space-3); }

.ik-aydinlatma {
	margin-block-start: var(--space-5);
	border: var(--border-width) solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
}
.ik-aydinlatma summary {
	cursor: pointer;
	padding: var(--space-3) var(--space-4);
	min-block-size: var(--touch-min);
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	font-weight: 600;
	color: var(--link);
}
/* Açılır olduğunu gösteren ok — yerleşik ▶ işareti gizli olduğundan çizilir */
.ik-aydinlatma summary::-webkit-details-marker { display: none; }
.ik-aydinlatma summary { list-style: none; }
.ik-aydinlatma summary::after {
	content: ""; flex: none;
	inline-size: 9px; block-size: 9px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--motion-fast, 180ms) ease;
}
.ik-aydinlatma[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .ik-aydinlatma summary::after { transition: none; } }
.ik-aydinlatma__metin { padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); }
/* 🔄 2026-09-23 · onay kutusunun ALTINDA açılır; kutunun etiket hizasına
   çekilir ki metnin hangi onaya ait olduğu bakışta anlaşılsın. */
.field > .ik-aydinlatma {
	margin-block-start: var(--space-2);
	margin-inline-start: calc(var(--space-4) + 12px);
}
@media (max-width: 560px) { .field > .ik-aydinlatma { margin-inline-start: 0; } }
.ik-aydinlatma__metin { max-block-size: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.ik-aydinlatma__metin ul { margin-block: var(--space-2); }
.ik-aydinlatma__metin p + p,
.ik-aydinlatma__metin ul + p { margin-block-start: var(--space-3); }
.ik-aydinlatma__metin .ik-aydinlatma__baslik {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--heading);
	margin-block: var(--space-4) var(--space-2);
}
.ik-aydinlatma__metin > :first-child { margin-block-start: 0; }

.input--file { padding-block: 10px; block-size: auto; cursor: pointer; }
.input--file::file-selector-button {
	margin-inline-end: var(--space-3);
	padding: 8px 14px;
	border: var(--border-width) solid var(--action-secondary-border);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--action-secondary-text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}
.input--file::file-selector-button:hover { background: var(--action-soft-bg); }

/* =============================================================================
   ANA SAYFA TEKLİF BANDI — zemin görseli (şirket, 2026-09-23)
   "İhtiyaçlarınızı birlikte planlayalım bölümünün arkasındaki jüt dokusunu
   yok edelim; Ihtiyaclarinizi_Planlayalim görselini kullanalım. Sayfadaki
   ölçüleri değiştirmeyelim, resmi gerekirse kırparak oturtalım."
   Bölümün yüksekliği ve iç boşlukları AYNI; görsel `cover` ile kırpılır.
   Yazılar beyaz olduğu için üstünde koyu geçiş var (kontrast ölçüldü).
   ⚠️ Görselde okunaksız el yazılı belgeler var — "AI görselde yazı yok"
      kuralından şirket kararıyla ayrılındı (Uluslararası Ticaret örneği).
   ============================================================================= */

.quote-cta.band { position: relative; isolation: isolate; overflow: hidden; background-color: var(--band); }
.quote-cta::before {
	background-image: var(--cta-bg, image-set(   /* --cta-bg: panelden (home.php, "Teklif bölümü — zemin görseli") */
		url("../assets/section/ihtiyac-1600.webp") type("image/webp") 1x,
		url("../assets/section/ihtiyac-2400.webp") type("image/webp") 2x,
		url("../assets/section/ihtiyac-1600.jpg") type("image/jpeg") 1x,
		url("../assets/section/ihtiyac-2400.jpg") type("image/jpeg") 2x));
	background-size: cover;
	background-position: center 62%;
	opacity: 1;
}
/* Faz 10: telefonda 2400 px'lik kare inmesin (yüksek çözünürlüklü ekran 2x istiyordu: 210 KB) —
   bant koyu geçişin altında; 1600 px telefon için yeterli. Görünüm aynı. */
@media (max-width: 767px) {
	.quote-cta::before {
		background-image: var(--cta-bg, image-set(
			url("../assets/section/ihtiyac-1600.webp") type("image/webp") 1x,
			url("../assets/section/ihtiyac-1600.jpg") type("image/jpeg") 1x));
	}
}
/* Faz 10: zemin görseli bant ekrana yaklaşınca iner (main.js · bg-hazir) */
html:not(.no-js) .quote-cta:not(.bg-hazir)::before { background-image: none; }
.quote-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(4, 22, 13, 0.72) 0%, rgba(4, 22, 13, 0.66) 55%, rgba(4, 22, 13, 0.76) 100%);
	pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   HUKUKİ METİNLER · 2026-09-23
   Şirketin gönderdiği dokuz metin uzun, tablolu ve çok başlıklıdır.
   Kaynak: tools/pw/setup/data/legal/ · kayıt: PHASE_7_KNOWN_ISSUES §41
   ══════════════════════════════════════════════════════════════════════════ */

/* Yürürlük / versiyon künyesi — metnin başında ve sonunda */
.legal-meta {
	margin-block: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-inline-start: 3px solid var(--brand);
	background: var(--surface-raised);
	font-size: var(--fs-sm, 14px);
	color: var(--text-secondary);
}
.legal-lead { font-size: var(--fs-lg, 18px); color: var(--text-secondary); }

/* Doldurulmamış alan — gözden kaçmaması gerekir */
.legal-gap {
	padding: 1px 6px;
	border-radius: var(--radius-sm, 4px);
	background: #fde68a;
	color: #7c2d12;
	font-weight: 600;
	box-decoration-break: clone;
}
:root:not([data-theme="light"]) .legal-gap,
:root[data-theme="dark"] .legal-gap { background: #a16207; color: #fff7ed; }

.legal-warning {
	margin-block-start: var(--space-5);
	padding: var(--space-4);
	border: var(--border-width) solid var(--warning-border, #f59e0b);
	border-radius: var(--radius-md);
	background: var(--warning-surface, rgba(245, 158, 11, .10));
	color: var(--text-primary);
	font-weight: 600;
}

.legal-note {
	padding: var(--space-3) var(--space-4);
	border-inline-start: 3px solid var(--border);
	background: var(--surface-raised);
	color: var(--text-secondary);
}
.legal-consent {
	padding: var(--space-4);
	border: var(--border-width) solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
	font-weight: 600;
}

/* Tablolar — dar ekranda yatay kayar, sayfa gövdesi kaymaz */
.table-scroll { overflow-x: auto; margin-block: var(--space-4); }
.legal-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm, 14px);
	min-inline-size: 30rem;
}
.legal-table th,
.legal-table td {
	padding: var(--space-3);
	border: var(--border-width) solid var(--border);
	text-align: start;
	vertical-align: top;
}
.legal-table thead th { background: var(--surface-raised); font-weight: 600; }
.legal-table tbody th { inline-size: 34%; font-weight: 600; background: var(--surface-raised); }

/* Uzun metinde başlık aralıkları */
.legal-body h2 { margin-block-start: var(--space-7); }
.legal-body h3 { margin-block-start: var(--space-5); }
.legal-body h2:first-child { margin-block-start: 0; }

/* Hukuki metin İK formunun içinde açıldığında başlıklar bölüm başlığı
   ölçüsünde geliyordu; panel ölçeğine indirilir (2026-09-23). */
.ik-aydinlatma__metin h2 {
	font-size: var(--text-h4, 20px);
	line-height: 1.3;
	margin-block: var(--space-5) var(--space-2);
}
.ik-aydinlatma__metin h3 {
	font-size: var(--text-body, 16px);
	font-weight: 600;
	margin-block: var(--space-4) var(--space-2);
}
.ik-aydinlatma__metin > :first-child { margin-block-start: 0; }
.ik-aydinlatma__metin .legal-meta { margin-block: 0 var(--space-4); }
.ik-aydinlatma__metin .table-scroll { font-size: var(--text-body-sm, 14px); }

/* ══════════════════════════════════════════════════════════════════════════
   GERÇEK TESİS FOTOĞRAFLARI · 2026-09-23
   Şirketin gönderdiği üretim kareleri DİKEY (1792×2390 · 1536×2728).
   Metin sütunu kısa kaldığı için görsel iki kat uzuyor ve yanında büyük
   boşluk bırakıyordu (ölçüm: 690×920 ve 690×1225 px, sayfa 6374 px).
   Çözüm: metin yanındaki görsel en fazla 4/5 oranında; taşan kısım kırpılır.
   Kaynak görsel dosyası değiştirilmez — yalnızca sunum kırpılır.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
	.block-split__media--dikey img {
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: center;
		inline-size: 100%;
		block-size: auto;
		max-block-size: 620px;
	}
	.block-split__media picture { display: block; }
	/* Yatay görsel kendi oranını korur; yalnız aşırı yükseklik sınırlanır */
	.block-split__media:not(.block-split__media--dikey) img { max-block-size: 620px; object-fit: cover; }
}
@media (max-width: 899px) {
	/* Dar ekranda tam boy dikey görsel ekranı kaplıyordu */
	.block-split__media--dikey img { aspect-ratio: 3 / 4; object-fit: cover; inline-size: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TESİS VİDEOSU · 2026-09-23 (şirket kapsam kararı · §41.12)
   🔴 SES ÇALMAZ. Kısa klip sessiz döner; uzun video poster ile durur ve
      ancak kullanıcı basınca yüklenir.
   ══════════════════════════════════════════════════════════════════════════ */
.block-video { position: relative; border-radius: var(--radius-md); overflow: clip; }
.block-video video {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	max-block-size: 620px;
	background: var(--surface-raised);
}
@media (max-width: 899px) { .block-video video { aspect-ratio: 3 / 4; } }

/* Oynat / duraklat düğmesi — her zaman erişilebilir (WCAG 2.2.2) */
.block-video__btn {
	position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3);
	inline-size: 44px; block-size: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .58);
	color: var(--white);
	cursor: pointer;
	transition: background var(--motion-fast, 180ms) ease;
}
.block-video__btn:hover,
.block-video__btn:focus-visible { background: rgba(0, 0, 0, .78); }
.block-video__btn:focus-visible { outline: var(--focus-width) solid var(--white); outline-offset: 2px; }

/* Üçgen = oynat · iki çubuk = duraklat */
.block-video__icon {
	inline-size: 0; block-size: 0;
	border-block: 8px solid transparent;
	border-inline-start: 13px solid currentColor;
	border-inline-end: 0;
	margin-inline-start: 3px;
}
.block-video.is-playing .block-video__icon {
	inline-size: 12px; block-size: 14px;
	border: 0; margin: 0;
	background: currentColor;
	clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

/* Büyük başlat düğmesi — henüz oynamamış uzun videoda ortada durur */
.block-video:not(.is-playing):not(.block-video--auto) .block-video__btn {
	inset: 0; margin: auto;
	inline-size: 72px; block-size: 72px;
	background: rgba(0, 0, 0, .52);
}
.block-video:not(.is-playing):not(.block-video--auto) .block-video__icon {
	border-block-width: 13px; border-inline-start-width: 21px; margin-inline-start: 5px;
}


/* 2026-10-01 · kullanıcı: footer sosyal ikonları üzerine gelince kararıp
   okunmuyordu. Cam daire + beyaz ikon; üzerine gelince beyaz dolgu,
   marka yeşili ikon, hafif kalkış ve ışıma. */
.footer.band a.social__link:not(.btn):not(.icon-btn) {
	inline-size: 44px; block-size: 44px; border-radius: 50%;
	color: var(--white);
	background: rgba(255, 255, 255, 0.07);
	text-decoration: none;
	border: var(--border-width) solid rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease),
		border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease),
		box-shadow var(--motion-fast) var(--motion-ease);
}
.footer.band a.social__link:not(.btn):not(.icon-btn) .icon { inline-size: 19px; block-size: 19px; }
.footer.band a.social__link:not(.btn):not(.icon-btn):hover,
.footer.band a.social__link:not(.btn):not(.icon-btn):focus-visible {
	color: var(--primary-700); background: var(--white); border-color: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(140, 176, 43, 0.22);
}
.footer.band a.social__link:not(.btn):not(.icon-btn):focus-visible { outline: 2px solid var(--band-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .footer.band a.social__link:not(.btn):not(.icon-btn):hover { transform: none; } }

/* =============================================================================
   İNSAN KAYNAKLARI — 2026-10-02 (kullanıcı brifi)
   Boş durum paneli · numaralı form grupları · ZORUNLU / İSTEĞE BAĞLI onaylar.
   Mevcut form bileşenleri (input, select, checkbox) aynen kullanılır.
   ============================================================================= */

/* Açık pozisyon yok — boş durum paneli */
.ik-acik .t-h2 { margin-block-end: var(--space-5); }
.ik-bos {
	max-inline-size: none; margin-block-start: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); align-items: start;
	padding: var(--space-7); border: var(--border-width) dashed var(--border); border-radius: 6px; background: var(--surface);
}
.ik-bos__ico { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border: var(--border-width) solid var(--divider); border-radius: 6px; color: var(--heading-brand); }
.ik-bos__ico .icon { inline-size: 26px; block-size: 26px; }
.ik-bos__body { display: grid; gap: var(--space-3); max-inline-size: 64ch; }
.ik-bos__body p { margin: 0; }
.ik-bos__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--heading); }
.ik-bos__cta { align-self: center; white-space: nowrap; }
@media (max-width: 899px) {
	.ik-bos { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); gap: var(--space-4); }
	.ik-bos__cta { justify-self: start; }
}

/* Başvuru alanı — sol: giriş + adım listesi, sağ: form */
.ik-form-alani__giris { display: grid; gap: var(--space-3); align-content: start; color: var(--text-secondary); }
.ik-form-alani__giris p { margin: 0; }
@media (min-width: 1024px) { .ik-form-alani__giris { position: sticky; inset-block-start: 150px; } }
.ik-adimlar { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; border-block-start: var(--border-width) solid var(--divider); }
.ik-adimlar li { display: flex; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--border-width) solid var(--divider); font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--heading); }
.ik-adimlar span { font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; color: var(--heading-brand); }
@media (max-width: 1023px) { .ik-adimlar { display: none; } }

.ik-form-kutu { display: grid; gap: var(--space-5); }
.ik-notice__title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 600; font-size: 20px; }
.ik-form { display: grid; gap: var(--space-5); }
.ik-grup { margin: 0; padding: var(--space-6); border: var(--border-width) solid var(--divider); border-radius: 6px; background: var(--surface); min-inline-size: 0; }
.ik-grup__baslik { display: flex; align-items: baseline; gap: var(--space-3); padding: 0; margin-block-end: var(--space-5); font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--heading); }
.ik-grup__no { font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; color: var(--heading-brand); }
@media (max-width: 599px) { .ik-grup { padding: var(--space-5) var(--space-4); } }

/* CV dosyası */
.ik-dosya__alan { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1.5px dashed var(--border); border-radius: 6px; background: var(--surface-alt); }
.ik-dosya.is-error .ik-dosya__alan { border-color: var(--danger, #b42318); }
.ik-dosya__ico { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 6px; background: var(--surface); color: var(--heading-brand); border: var(--border-width) solid var(--divider); }
.ik-dosya__alan .input--file { flex: 1; min-inline-size: 0; border: 0; background: transparent; padding: 0; }
/* Faz 10: telefonda simge yer kaplıyor, tarayıcının "Dosya seçilmedi" yazısı "Dosy...medi" diye kırpılıyordu */
@media (max-width: 480px) { .ik-dosya__ico { display: none; } .ik-dosya__alan { padding: var(--space-3); } .ik-dosya__alan .input--file { font-size: 14px; } }

/* Onaylar — zorunlu ve isteğe bağlı birbirinden ayrı */
.ik-kvkk { margin-block-end: var(--space-4); display: grid; gap: var(--space-2); color: var(--text-secondary); }
.ik-kvkk p { margin: 0; }
.ik-kvkk__baslik { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--heading); }
.ik-onay { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--divider); border-radius: 6px; }
.ik-onay + .ik-onay { margin-block-start: var(--space-3); }
.ik-onay--zorunlu { border-inline-start: 3px solid var(--heading-brand); }
.ik-onay--istege { border-style: dashed; }
.ik-onay.is-error { border-color: var(--danger, #b42318); }
.ik-onay__etiket { justify-self: start; padding: 3px 10px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ik-onay--zorunlu .ik-onay__etiket { background: var(--heading-brand); color: var(--surface); }
.ik-onay--istege .ik-onay__etiket { border: var(--border-width) solid var(--border); color: var(--text-secondary); }
.ik-onay__not { margin: 0; color: var(--text-muted); }
.ik-onay .ik-aydinlatma { margin: 0; }
.ik-onay__sayfa { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--heading-brand); }
.ik-gonder { padding-block-start: var(--space-2); }
.ik-gonder .btn { min-inline-size: 240px; justify-content: center; }
@media (max-width: 599px) { .ik-gonder .btn { inline-size: 100%; } }
/* Grup başlığı çerçevenin içinde (tarayıcı varsayılanı çizginin üstüne koyar) */
.ik-grup__baslik { float: left; inline-size: 100%; }
.ik-grup__baslik + * { clear: both; }
.ik-onay__sayfa { min-block-size: 44px; }

/* ── Alt satır bağlantıları · .header__util (2026-10-08, kullanıcı) ───────
   Kataloglar, iki satırlı düzende alt satırın başında, sosyal medya
   ikonlarından ÖNCE durur (Site Ayarları → menu_utility). Diğer düzenlerde
   kap şeffaftır (display: contents) ve bağlantı çekmecenin içindedir. */
.header__util { display: contents; }
@media (min-width: 1024px) {
	.header--stacked .header__util {
		grid-column: 1; grid-row: 2; justify-self: start; align-self: center;
		display: flex; align-items: center; gap: var(--space-3); block-size: 100%;
	}
	.header--stacked .header__nav--util .nav { inline-size: auto; justify-content: flex-start; }
	.header--stacked .header__nav--util .nav__link { padding-block: 0; border-block-end-width: 0; }
	/* sosyal ikonlarla ayrım — ince dikey çizgi (yazı boyunda) */
	.header--stacked .header__nav--util {
		padding-inline-end: var(--space-3);
		border-inline-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	}
}

/* ── Mega menü · Bioyem ana grupları (2026-10-09, kullanıcı) ──
   Kanatlı · Büyükbaş · Küçükbaş yan yana sütunlar; her sütunda alt gruplar alt alta. */
.nav__ana-gruplar { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--space-2) var(--space-6); margin-block-end: var(--space-3); }
.nav__ana-baslik { margin: 0 0 var(--space-1); padding-inline: var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.nav__ana-grup .nav__featured-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }

/* 2026-10-16 · kullanıcı: "alttaki bilgileri hiç göremeyecek" + "kabul ya da ret sonrası footer
   normal hâline dönsün, boşluk çirkin durur". Dar ekranda yüzen düğmeler (sağ alt, ~76 px sütun)
   dil kısayollarının üstüne biniyordu. Footer'a kalıcı boşluk AÇILMAZ; yalnız dil listesi iki
   yandan daralır (ortalı kalır) ve düğme sütununa girmez. Bant boşluğu (--cookie-h) ayrıdır,
   seçim yapılınca sıfırlanır. */
@media (max-width: 767px) {
	.footer .footer__langs { padding-inline: 72px; justify-content: center; }
}