/* ==========================================================================
   EMKA FOOD — Uygulama Stilleri
   Tailwind (CDN) üzerine özel bileşenler, animasyonlar ve geçişler.
   ========================================================================== */

/* ===========================================================================
   KURUMSAL PALET — tüm oranlar contrast.ps1 ile ölçüldü, tahmin yok.

     #3d8348  koyu yeşil   dolgu / border / ikon      beyaz 4.63:1 · mint 4.34:1
     #accb4c  açık yeşil   dolgu + KOYU tema metni    koyu 8.22:1 · mint 1.73:1
     #316F39  koyu türev   AÇIK zeminde metin/link    mint 5.68:1 · bg-3 5.19:1
     #2e2e2e  koyu gri     gövde metni                mint 12.73:1

   #accb4c açık zeminde 1.73:1 verir; orada metin, border, ikon veya focus
   halkası olarak KULLANILMAZ — yalnızca dolgu, üstünde #2e2e2e yazıyla (7.37:1).
   #3d8348 mint zeminde 4.34:1 ile metin eşiğini geçemez; açık zeminde metin
   gerektiğinde --gold-700 (#316F39) kullanılır. Bu, eski --gold/--gold-700
   ayrımının aynısıdır; yalnızca değerler kurumsal renklerle değişti.
   =========================================================================== */
:root{
  /* ===== AÇIK TEMA ===== */
  --ink:#262626; --ink-800:#2e2e2e; --cream:#F4F9F2; --gold:#accb4c; --gold-700:#316F39;
  --primary:#3d8348; --accent:#accb4c;             /* Primary: Kurumsal Koyu Yeşil · Secondary: Kurumsal Açık Yeşil */
  --bg:#F4F9F2; --bg-2:#ffffff; --bg-3:#E7F0E3;    /* Zemin: Hafif Mint Beyaz */
  --text:#2e2e2e; --text-muted:#5a5a5a;            /* 12,73:1 · 6,46:1 */
  --border:#DDE8D8; --card:#ffffff; --card-border:#DDE8D8;
  --field-border:#5f7359;                          /* WCAG 1.4.11 — form kenarı, mint üzerinde 4,82:1 */
  /* Bildirim kutuları — yarı saydam sabit renkler koyu temada kanıyordu, opak token oldu.
     Uyarı 6,64:1 · Başarı zemininde --gold-700 (#316F39) 4,76:1 */
  --warn-bg:#FBEFE3; --warn-text:#8A3F0B; --ok-bg:#DCE7DA;
  --header-solid:rgba(244,249,242,.94); --header-shadow:0 6px 30px -12px rgba(38,38,38,.22);
  --scrollbar-track:#E7F0E3;
}
html.dark{
  /* ===== KOYU TEMA ===== */
  --ink:#262626; --ink-800:#2e2e2e; --cream:#F4F9F2; --gold:#accb4c; --gold-700:#accb4c;
  --primary:#accb4c; --accent:#bcd66f;             /* Koyu temada açık yeşil öne geçer: 8,22:1 */
  --bg:#262626; --bg-2:#2e2e2e; --bg-3:#343434;    /* Zemin: Kurumsal Koyu Gri */
  --text:#F4F9F2; --text-muted:rgba(244,249,242,.72);  /* 14,18:1 */
  --border:#3d3d3d; --card:#2e2e2e; --card-border:#3d3d3d;
  --field-border:#8a9c85;                          /* koyu zeminde 4,64:1 */
  --warn-bg:#3E322A; --warn-text:#F0B978; --ok-bg:#2A3327;   /* 7,03:1 · --gold-700 (#accb4c) 7,12:1 */
  --header-solid:rgba(38,38,38,.94); --header-shadow:0 6px 30px -12px rgba(0,0,0,.6);
  --scrollbar-track:#343434;
}

[x-cloak]{ display:none !important; }
html{ -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; background:var(--bg); color:var(--text); transition:background-color .4s ease, color .4s ease; }
::selection{ background:var(--gold); color:#2e2e2e; }

/* WCAG 1.4.3 — Açık temada --gold (#accb4c) mint üzerinde yalnızca 1,73:1 verir; metin okunmaz.
   Açık zeminlerde metin için --gold-700 kullanılır (açık tema #316F39 = 5,68:1,
   koyu tema #accb4c = 8,22:1 — ikisi de eşiği geçer). Koyu bantlardaki gold metin
   (hero, footer, CTA) etkilenmez; orada #accb4c zaten 8:1 üzeri veriyor. */
.bg-surface .text-gold, .bg-surface-2 .text-gold, .bg-surface-3 .text-gold,
.card .text-gold, .filter-box .text-gold, .menu-panel .text-gold,
.bg-surface .text-gold-600, .bg-surface-2 .text-gold-600, .bg-surface-3 .text-gold-600,
.card .text-gold-600, .filter-box .text-gold-600{
  color:var(--gold-700) !important;
}

/* Tema-duyarlı yardımcı sınıflar */
.bg-surface{ background:var(--bg) !important; }
.bg-surface-2{ background:var(--bg-2) !important; }
.bg-surface-3{ background:var(--bg-3) !important; }
.text-body{ color:var(--text) !important; }
.text-muted{ color:var(--text-muted) !important; }
.border-surface{ border-color:var(--border) !important; }
.divide-surface > * + *{ border-color:var(--border) !important; }

/* Zarif kaydırma çubuğu */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:9px; border:2px solid var(--scrollbar-track); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-700); }

/* Tipografi kilidi: yalnizca Montserrat. Hiyerarsi boyut + agirlik + bosluk ile kurulur.
   Montserrat Roboto'dan genis; baslikta letter-spacing negatif tutulur. */
.font-display{ font-family:Montserrat,system-ui,sans-serif; font-weight:700; letter-spacing:-.02em; }

/* Logo FOUC önleme — Tailwind yüklenmeden önce logo boyutunu sabitle.
   app.css render'ı bloklar; Tailwind sonradan yüklenip h-* sınıflarıyla ince ayar yapar.
   NOT: Bu kural eskiden img[alt="EMKA FOOD"] seçicisiyle çalışıyordu. Alt metni
   erişilebilirlik için değiştiği anda sessizce devre dışı kalıyordu; sınıfa taşındı. */
/* Logo ölçüsü CSS'ten yönetilir, Tailwind h-* utility'sinden DEĞİL.
   Sebep cascade: app.css, tw.css'ten sonra yükleniyor; `.brand-logo{height:…}`
   ile `.h-28` aynı özgüllükte olduğu için sonra gelen kazanıyordu ve header
   logosu, işaretlemede ne yazarsa yazsın 3rem'de kilitli kalıyordu.
   Varsayılan 3.5rem footer logosunun ölçüsüdür (footer.php'deki h-14 ile aynı);
   header kendi ölçüsünü aşağıda .site-header ile alır. */
.brand-logo{ height:3.5rem; width:auto; max-width:190px; object-fit:contain; }
/* Sayfa başındayken logo menü şeridinin boyunu doldurur:
   şerit h-24 (96px) / lg:h-32 (128px), logo 80px / 112px. */
.site-header .brand-logo{ height:5rem; }
@media (min-width:1024px){ .site-header .brand-logo{ height:7rem; } }
/* Aşağı kaydırınca şerit h-20'ye (80px) iner, logo da küçülür.
   data-scrolled Alpine'dan gelir; Alpine yüklenmezse öznitelik hiç basılmaz ve
   logo büyük halde kalır — sayfa zaten en üstteyken açılıyor, doğru geri düşüş. */
.site-header[data-scrolled="true"] .brand-logo{ height:3.5rem; }
img.brand-logo, img.brand-logo-lg{ max-height:132px; width:auto; }

/* Logo sarmalayıcı — artık kendi altlığı yok, şerit header'ın tamamında (.header-ghost). */
.logo-plate{ display:inline-flex; align-items:center; justify-content:center; }

/* ---------------- Kategori kartı (kategoriler.php) ----------------
   Kart tamamen <a> ile sarılır: erişilebilir ad kısadır ("Peynirler 24 ürün")
   ve en büyük dokunma hedefini verir (2.5.8). Ürün kartındaki .card-link
   deseni buraya taşınmaz — orada sarmalayıcı ad çok uzuyordu, burada uzamıyor.
   Kenarlık --field-border kullanır: --border (#DDE8D8) mint zeminde 1,18:1 ile
   1.4.11'i geçemiyordu; --field-border 4,82:1 veriyor. */
.cat-card{
  display:flex; flex-direction:column; position:relative; height:100%;
  border:1px solid var(--field-border); border-radius:1rem; overflow:hidden;
  background:var(--card); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -22px rgba(0,0,0,.4); border-color:var(--gold-700); }
.cat-card:focus-visible{ outline:3px solid var(--gold-700); outline-offset:3px; }
.cat-media{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); }
.cat-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.cat-card:hover .cat-media img{ transform:scale(1.06); }
/* Görseli olmayan kategori: logo hayaleti, kart yüksekliği değişmez */
.cat-media.ph img{ width:56%; height:auto; margin:auto; position:absolute; inset:0; object-fit:contain; opacity:.3; filter:grayscale(.25); }
.cat-body{ display:flex; flex-direction:column; gap:.15rem; padding:1rem 1.15rem 1.15rem; }
.cat-name{ font-weight:700; color:var(--text); line-height:1.3; }
.cat-card:hover .cat-name{ color:var(--gold-700); }
.cat-count{ color:var(--text-muted); font-size:1rem; }
.cat-go{
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  display:grid; place-items:center; height:2rem; width:2rem; border-radius:999px;
  background:var(--primary); color:#ffffff; font-size:1rem;
  opacity:0; transform:translateX(-.4rem); transition:opacity .25s ease, transform .25s ease;
}
html.dark .cat-go{ color:var(--ink); }   /* koyu temada --primary açık yeşil */
.cat-card:hover .cat-go, .cat-card:focus-visible .cat-go{ opacity:1; transform:translateX(0); }

/* Tema varyantı: açık temada koyu yazılı, koyu temada beyaz yazılı logo.
   prefers-color-scheme KULLANILMAZ — tema localStorage + html.dark ile yönetiliyor. */
.logo-dark{ display:none; }
html.dark .logo-light{ display:none; }
html.dark .logo-dark{ display:block; }

/* Anasayfa alıntı bloğu — logo yazının ARKASINDA filigran olarak durur.
   Küçük bir ikon olarak hiçbir şey okunmuyordu. Dekoratif olduğu için
   kontrast eşiğine tabi değil; metin kendi zemininde tam kontrastını korur. */
.alinti-blok{ position:relative; }
.alinti-filigran{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:min(105%, 320px); width:auto; opacity:.4;
  pointer-events:none; user-select:none; z-index:0;
}
.alinti-icerik{ position:relative; z-index:1; }

/* Logo linkinde görünür focus göstergesi yoktu. */
.brand-link:focus-visible{ outline:3px solid var(--gold-700); outline-offset:4px; border-radius:.9rem; }

/* ---------------- Header ---------------- */
/* Hero üzerindeki menü şeridi — boydan boya %50 saydam bant.
   Slider fotoğrafı logoyu ve menü yazılarını yutuyordu.
   Bant temaya göre renk değiştirir: açık temada beyaz, koyu temada kurumsal koyu gri.
   Böylece hem logo varyantı hem yazı rengi (text-body) banda uyumlu kalır.
   blur, altındaki fotoğrafı yumuşatarak yazıyı ayrıca okunur kılar.
   ÖLÇÜM (en kötü hero karesi, contrast.ps1):
     açık tema — %50 beyaz bant, siyah fotoğraf üstünde #2e2e2e yazı ..... 3,44:1
                 %60 beyaz .. 4,77:1 (AA geçer) · %75 .. 7,38:1 · %85 .. 9,62:1
     koyu tema  — %50 koyu bant, beyaz fotoğraf üstünde #F4F9F2 yazı ..... 2,88:1
                 %63 koyu ... 4,78:1 (AA geçer)
   AA metin eşiği 4,5:1. İstenen görünüm %50 olduğu için o değerle bırakıldı;
   eşiği geçmek isterseniz iki satırdaki .5 değerini .6 ve .63 yapmanız yeterli. */
.header-ghost{
  background:rgba(255,255,255,.5);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
html.dark .header-ghost{ background:rgba(38,38,38,.5); }
.header-solid{
  background:var(--header-solid);
  backdrop-filter:saturate(160%) blur(12px);
  box-shadow:var(--header-shadow);
}
.nav-link{
  position:relative; padding:.5rem .9rem; border-radius:.6rem;
  transition:color .25s ease;
}
.nav-link::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }
/* --gold açık zeminde 1,73:1 — hover rengi olarak okunmuyordu. --gold-700 her iki
   temada da eşiği geçer (açık #316F39 = 5,68:1 · koyu #accb4c = 8,22:1). */
.nav-link:hover{ color:var(--gold-700); }

/* DİKKAT — cascade tuzağı: app.css, tw.css'ten SONRA yükleniyor. Buradaki
   `display` bildirimi Tailwind'in .hidden / .lg:hidden utility'leriyle aynı
   özgüllükte (0,1,0) olduğu için onları eziyordu; hamburger masaüstünde,
   "Teklif Al" mobilde görünüyordu. Çözüm: display'i utility'lere bırak. */
.icon-btn{ display:grid; place-items:center; height:2.5rem; width:2.5rem; border-radius:.7rem; transition:.25s; }
.icon-btn:hover{ background:rgba(61,131,72,.14); color:var(--gold-700); }

/* Tailwind'in gizleme utility'lerini geri kazandır. Aynı özgüllükte oldukları ve
   tw.css önce yüklendiği için yukarıdaki display:grid onları eziyordu.
   Yeni bir gizleme utility'si kullanılacaksa buraya da eklenmeli. */
.icon-btn.hidden, .btn-gold.hidden{ display:none; }
@media (min-width:640px){
  .icon-btn.sm\:hidden, .btn-gold.sm\:hidden{ display:none; }
  .btn-gold.sm\:inline-flex{ display:inline-flex; }
}
@media (min-width:1024px){ .icon-btn.lg\:hidden, .btn-gold.lg\:hidden{ display:none; } }

.menu-panel{
  background:var(--card); border:1px solid var(--card-border); border-radius:1rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45); overflow:hidden; padding:.5rem;
}
.menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem .9rem; border-radius:.6rem; color:var(--text); font-size:.95rem; transition:.2s;
}
.menu-item:hover{ background:var(--bg-3); color:var(--gold-700); padding-left:1.1rem; }
.menu-panel .text-ink\/80{ color:var(--text-muted) !important; }

.mob-link{ padding:.85rem .5rem; border-bottom:1px solid rgba(255,255,255,.08); transition:.2s; }
.mob-link:hover{ color:var(--gold); padding-left:1rem; }

/* ---------------- Butonlar ---------------- */
/* Eski gradyan (#a6cd6e -> #5f8a34) buton içinde kontrastı 9,00:1'den 4,02:1'e
   düşürüyordu: aynı buton solda geçip sağda kalıyordu. Düz kurumsal koyu yeşil +
   beyaz yazı her noktada 4,63:1 verir; Flat 2.0 kuralına da uygun. */
.btn-gold{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; border-radius:999px;
  background:var(--primary); color:#ffffff; font-weight:700;
  box-shadow:0 8px 24px -8px rgba(61,131,72,.55); transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  position:relative; overflow:hidden;
}
html.dark .btn-gold{ background:var(--gold); color:#2e2e2e; }  /* koyu temada 7,37:1 */
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(61,131,72,.7); }
.btn-gold::before{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.btn-gold:hover::before{ animation:shimmer .8s ease; }
@keyframes shimmer{ to{ transform:translateX(100%); } }

.btn-outline-cream{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; border-radius:999px;
  border:1.5px solid rgba(244,249,242,.5); color:var(--cream); font-weight:600; transition:.25s;
}
.btn-outline-cream:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* Açık zeminlerde kullanılan çerçeveli buton (btn-outline-cream yalnızca koyu bantlar içindir).
   --gold-700 her iki temada da eşiği geçer: açık #316F39 = 5,68:1 · koyu #accb4c = 8,22:1
   (metin 1.4.3 ve kenarlık 1.4.11 için yeterli). */
.btn-outline{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; border-radius:999px;
  border:1.5px solid var(--gold-700); color:var(--gold-700); background:transparent;
  font-weight:600; transition:.25s;
}
.btn-outline:hover{ background:var(--gold-700); color:var(--bg); border-color:var(--gold-700); }

/* Kart-link: erişilebilir ad yalnızca başlıktan gelir, tıklama alanı tüm karttır.
   (Tüm kartı <a> ile sarmak link adını sayfalarca uzatıyordu — WCAG 2.4.4) */
/* Kartın tamamını tıklanabilir yapan örtü. z-index:4 gerekli: kart görselinin
   üstündeki marka rozeti ve etiketler z-index:3 taşıyor, örtü onların altında
   kalsaydı o köşelerde ölü tıklama alanı oluşurdu. */
.card-link::after{ content:""; position:absolute; inset:0; z-index:4; }
.card-link:focus-visible{ outline:3px solid var(--gold-700); outline-offset:3px; border-radius:.25rem; }

.btn-ink{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; border-radius:999px;
  background:var(--ink); color:var(--cream); font-weight:600; transition:.25s;
}
.btn-ink:hover{ background:var(--ink-800); transform:translateY(-2px); }

.chip-ghost{ padding:.4rem .9rem; border-radius:999px; border:1px solid rgba(244,249,242,.35); color:var(--cream); font-size:.85rem; transition:.2s; }
.chip-ghost:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

.social-btn{ display:grid; place-items:center; height:2.5rem; width:2.5rem; border-radius:.7rem; background:rgba(255,255,255,.06); color:var(--cream); transition:.25s; }
.social-btn:hover{ background:var(--gold); color:var(--ink); transform:translateY(-3px); }

.footer-title{ color:var(--cream); font-weight:700; letter-spacing:.02em; margin-bottom:1rem; }
.footer-link{ transition:.2s; }
.footer-link:hover{ color:var(--gold); padding-left:.25rem; }

/* ---------------- Sayfa geçiş perdesi ---------------- */
.page-veil{
  position:fixed; inset:0; z-index:100; background:var(--ink); pointer-events:none;
  transform:scaleY(0); transform-origin:bottom; transition:transform .6s cubic-bezier(.76,0,.24,1);
}
.page-veil.active{ transform:scaleY(1); transform-origin:top; pointer-events:all; }

/* ---------------- Reveal (scroll animasyonları) ---------------- */
/* Gizleme SADECE JS çalışıyorsa (html.js) uygulanır; JS yoksa içerik doğrudan görünür. */
html.js [data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
html.js [data-reveal="left"]{ transform:translateX(-40px); }
html.js [data-reveal="right"]{ transform:translateX(40px); }
html.js [data-reveal="zoom"]{ transform:scale(.92); }
[data-reveal].in{ opacity:1 !important; transform:none !important; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.4s; }
[data-reveal-delay="6"]{ transition-delay:.48s; }

/* ---------------- HERO SLIDER ---------------- */
/* Hero yığması: slaytlar mutlak konumlu DEĞİL, tek gridin aynı hücresinde.
   Eskiden `position:absolute; inset:0` idi; bu yüzden .hero'nun içerik yüksekliği
   sıfırdı ve kutu `height` ile sabitlenmek zorundaydı. Sonuç: metin %200
   büyütüldüğünde (1.4.4) veya satır aralığı artırıldığında (1.4.12) başlık
   `justify-center` yüzünden iki uçtan taşıyor, üst taşma `overflow:hidden` ile
   ERİŞİLEMEZ biçimde kırpılıyordu — kaydırma yolu da yoktu.
   Grid hücresinde slaytlar yine üst üste biner (opacity/translateX geçişleri
   aynen çalışır) ama artık en uzun slayt satır yüksekliğini belirler, yani
   `min-height` anlam kazanır ve kutu içerikle birlikte büyür.
   `overflow:hidden` kalıyor — Ken Burns scale(1.25)'i ve effect-slide'ın
   translateX'ini kırpması gerekiyor; kutu büyüdüğü için kesilecek metin kalmaz. */
.hero{ position:relative; display:grid; min-height:max(38rem, 100vh); overflow:hidden; background:var(--bg); }
.hero{ min-height:max(38rem, 100svh); }
.hero-slide{
  grid-area:1/1; position:relative; display:grid; opacity:0; visibility:hidden;
  transition:opacity 1s ease; will-change:opacity;
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide.effect-slide{ transform:translateX(100%); transition:transform 1s cubic-bezier(.76,0,.24,1), opacity 1s ease; }
.hero-slide.effect-slide.active{ transform:translateX(0); }
.hero-slide.effect-slide.prev{ transform:translateX(-100%); }

.hero-media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-media.placeholder{
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, #343434 0, #262626 70%);
}
.hero-media.placeholder img{ width:min(38vw,320px); opacity:.14; filter:grayscale(1) brightness(1.6); }

/* Ken Burns hareketi */
.hero-slide.active .kb.anim-kenburns{ animation:kenburns 8s ease-out forwards; }
.hero-slide.active .kb.anim-zoom-out{ animation:zoomout 8s ease-out forwards; }
.hero-slide.active .kb.anim-pan-right{ animation:panright 9s linear forwards; }
@keyframes kenburns{ 0%{ transform:scale(1.15) translate(2%,1%);} 100%{ transform:scale(1) translate(0,0);} }
@keyframes zoomout{ 0%{ transform:scale(1.25);} 100%{ transform:scale(1.02);} }
@keyframes panright{ 0%{ transform:scale(1.2) translateX(-3%);} 100%{ transform:scale(1.2) translateX(3%);} }

.hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,32,16,.82) 0%, rgba(22,36,18,.42) 48%, rgba(24,40,20,.12) 100%); z-index:1; }
.hero-overlay.center{ background:linear-gradient(0deg, rgba(20,32,16,.82) 0%, rgba(22,36,18,.28) 60%, rgba(20,32,16,.45) 100%); }

/* Sabit header (mobil 6rem, masaüstü 8rem) hero'nun üstünü örtüyor. İçerik tüm
   hero yüksekliğine göre ortalandığı için görsel merkez header yüksekliğinin
   yarısı kadar yukarı kayıyordu — başlık header'a sıkışıp altta boşluk kalıyordu.
   Üst dolgu bunu sıfırlar. Alt dolgu nokta şeridine ayrılmış bant. */
.hero-content{ grid-area:1/1; position:relative; z-index:3; height:100%;
               padding-top:6rem; padding-bottom:4.5rem; }
@media (min-width:1024px){ .hero-content{ padding-top:8rem; } }

/* Başlık: 320px'de Montserrat bold 48px ile satır başına ~9 karakter sığıyor ve
   uzun Türkçe başlıklar 4 satıra çıkıyordu (CLAUDE.md §1 bu genişlik farkını
   uyarıyor). clamp tabanı `rem` — `vw` tek belirleyici olsaydı tarayıcı metin
   büyütmesi çalışmaz, 1.4.4 kırılırdı. Tavan bugünkü lg:text-7xl ile aynı. */
.hero-baslik{ font-size:clamp(2rem, 7.5vw, 4.5rem); line-height:1.08; letter-spacing:-.02em; }
/* Aktif slide içeriği kademeli girsin (gizleme yalnızca JS varsa) */
html.js .hero-slide .reveal-item{ opacity:0; transform:translateY(30px); }
.hero-slide.active .reveal-item{ animation:heroIn .9s cubic-bezier(.22,1,.36,1) forwards; }
.hero-slide.active .reveal-item:nth-child(1){ animation-delay:.2s; }
.hero-slide.active .reveal-item:nth-child(2){ animation-delay:.35s; }
.hero-slide.active .reveal-item:nth-child(3){ animation-delay:.5s; }
.hero-slide.active .reveal-item:nth-child(4){ animation-delay:.65s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; height:3rem; width:3rem; border-radius:999px; display:grid; place-items:center; color:var(--cream); background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); transition:.25s; }
.hero-arrow:hover{ background:var(--gold); color:var(--ink); }
.hero-dots{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:.6rem; }
/* WCAG 2.5.8: görünen nokta küçük kalsın ama dokunma alanı en az 24x24 olsun */
.hero-dot{ height:1.75rem; width:1.75rem; padding:0; border:0; background:none; border-radius:999px;
           display:grid; place-items:center; cursor:pointer; }
.hero-dot::before{ content:""; display:block; height:.55rem; width:.55rem; border-radius:999px;
                   background:rgba(244,249,242,.45); transition:.3s; }
.hero-dot.active::before{ width:2rem; background:var(--gold); }
.hero-progress{ position:absolute; bottom:0; left:0; height:3px; background:var(--gold); z-index:5; width:0; }

/* Slider duraklat/oynat (WCAG 2.2.2, A seviyesi).
   Nokta şeridiyle aynı bantta, sağ tarafta. Kendi koyu zeminini taşır: hero
   fotoğrafı slayta göre değiştiği için sadece blur'a güvenilemez.
   --cream bu zemin üzerinde 14,9:1. */
.hero-play{ position:absolute; bottom:1.1rem; right:1.1rem; z-index:6;
            height:2.5rem; width:2.5rem; border-radius:999px; display:grid; place-items:center;
            color:var(--cream); background:rgba(29,36,27,.72); backdrop-filter:blur(6px);
            border:1px solid rgba(244,249,242,.35); font-size:1.05rem; cursor:pointer; }
.hero-play:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
/* SVG rengi düğmeden miras alır (currentColor), böylece hover'da da doğru renk. */
.hero-play-ikon{ width:1.15rem; height:1.15rem; display:block; fill:currentColor; }
/* Odak halkası: fotoğraf + blur üzerinde tarayıcı varsayılanı 3:1 garanti
   etmiyor. --gold koyu hero zemininde 8,6-9,6:1 veriyor; --gold-700 açık temada
   #316F39 olduğu için burada kullanılamaz. */
.hero-arrow:focus-visible, .hero-dot:focus-visible, .hero-play:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px;
}

/* Yatay ve kısa viewport (ör. yatay çevrilmiş telefon, ~375px yükseklik):
   piksel/rem tabanı burada zararlı — içerik zaten sığıyor ama kutu zorla
   şişiyor ve hero ekranın 1,4 katına çıkıyordu. İçerik ne kadarsa o kadar. */
@media (orientation:landscape) and (max-height:480px){
  .hero{ min-height:auto; }
  .hero-content{ padding-top:5rem; padding-bottom:3.5rem; }
}

/* Particle canvas */
.particle-canvas{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* ---------------- Kartlar ---------------- */
/* Kart artık <div>; odak, içindeki .card-link'te. Halkayı kartın tamamına
   taşımak liste görünümünde odağın nerede olduğunu net gösteriyor. */
.card:has(.card-link:focus-visible){ outline:3px solid var(--gold-700); outline-offset:3px; }
/* Yapışkan header odaklanan kartı örtmesin (2.4.11) */
.card{ scroll-margin-top:7rem; }
/* Başlık bağlantısı kartın kendi rengini alır; alt çizgi kart genelinde zaten yok */
.card-link{ color:inherit; text-decoration:none; scroll-margin-top:7rem; }
.card{
  position:relative; background:var(--card); border:1px solid var(--card-border); border-radius:1.1rem; overflow:hidden;
  color:var(--text); transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, background .3s;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px -20px rgba(0,0,0,.45); }
.card-media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--bg-3); display:grid; place-items:center; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.card:hover .card-media img{ transform:scale(1.07); }
.card-media.ph img{ width:58%; height:auto; object-fit:contain; opacity:.35; filter:grayscale(.2); }
.badge-gold{ display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .7rem; border-radius:999px; background:rgba(61,131,72,.14); color:var(--gold-700,#316F39); font-size:.72rem; font-weight:700; letter-spacing:.02em; }
/* Etiket rozetleri — koyu solid zemin, beyaz yazı (görsel üzerinde okunur) */
.badge-tag{ display:inline-flex; align-items:center; gap:.3rem; padding:.24rem .62rem; border-radius:999px; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.01em; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.28); white-space:nowrap; }

/* Marka rozeti */
.brand-pill{ display:inline-block; padding:.2rem .6rem; border-radius:999px; background:var(--ink-800); color:#F4F9F2; font-size:.7rem; font-weight:600; }

/* Bölüm başlığı */
.eyebrow{ color:var(--gold-700); font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:.78rem; }
/* WCAG 1.4.3 — KOYU zeminde eyebrow.
   `--gold-700` açık temada #316F39; koyu hero bandı (#262626 + %5 yeşil overlay
   ≈ #2E3028) üzerinde yalnızca 2,21:1 veriyor, yani yazı okunmuyordu. Aynı
   zeminde --gold (#accb4c) 7,26:1 veriyor. Koyu temada --gold-700 zaten
   #accb4c olduğu için orada bir değişiklik olmuyor.
   Kapsam: sayfa başlığı bantları (.bg-ink), hero slider ve CTA/footer gibi
   koyu bloklar. Açık zeminlerdeki eyebrow --gold-700 ile kalıyor — orada
   #accb4c yalnızca 1,73:1 verir (dosya başındaki palet notu). */
.bg-ink .eyebrow, .hero .eyebrow, .bg-ink-800 .eyebrow{ color:var(--gold); }
.section-title{ font-family:Montserrat,system-ui,sans-serif; font-weight:700; line-height:1.15; letter-spacing:-.02em; }

/* Değer önerisi ikon kutusu */
.value-ico{ height:3.5rem; width:3.5rem; border-radius:1rem; display:grid; place-items:center; background:linear-gradient(135deg,#2e2e2e,#3d3d3d); color:var(--gold); font-size:1.6rem; box-shadow:inset 0 0 0 1px rgba(172,203,76,.28); }

/* Galeri */
.gallery-item{ position:relative; overflow:hidden; border-radius:1rem; background:var(--bg-3); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item.ph{ display:grid; place-items:center; }
.gallery-item.ph img{ width:50%; object-fit:contain; opacity:.3; }
.gallery-item .cap{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:1rem; background:linear-gradient(0deg,rgba(26,34,24,.7),transparent 60%); color:#fff; opacity:0; transition:.35s; }
.gallery-item:hover .cap{ opacity:1; }

/* Ana sayfa galeri blokları (includes/GalleryLayoutService.php).
   MOBİL ÖNCE: taban 2 sütunlu akış; --ms (1|2) kutunun mobil genişliği.
   Satır yüksekliği ekran genişliğine bağlı ama 260px'te tavan yapıyor
   (640-767px arası tabletlerde kutular dev kalmasın).
   md ve üstü: şablonun kendi ızgarası. Satırlar 1fr, blok yüksekliği
   aspect-ratio ile genişliğe bağlı — şablon her genişlikte oranını korur.
   Kutu yeri --ga (grid-area) ile; satır içi stil olarak basılıyor çünkü
   şablonlar dinamik ve Tailwind derlemesine giremez. */
.gw{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:min(42vw,260px); grid-auto-flow:row dense; gap:.75rem; }
.gw + .gw{ margin-top:.75rem; }
.gw-tile{ grid-column:span var(--ms,1); }
@media (min-width:768px){
  .gw{ grid-template-columns:repeat(var(--cols),minmax(0,1fr)); grid-template-rows:repeat(var(--rows),minmax(0,1fr)); grid-auto-rows:auto; grid-auto-flow:row; aspect-ratio:var(--ar); gap:1rem; }
  .gw + .gw{ margin-top:1rem; }
  .gw-tile{ grid-area:var(--ga); }
}

/* İnce ayraç çizgisi */
.divider-gold{ height:1px; background:linear-gradient(90deg,transparent,rgba(140,184,80,.5),transparent); }

/* İş ortağı logoları */
/* İş ortağı logoları — hepsi aynı ölçüde kutuya oturur.
   Önce yalnızca yükseklik sabitti (h-14/h-16), genişlik serbestti. Bu yüzden
   geniş yazı logoları (swissôtel ~8:1) şeridi kaplarken dikey logolar
   (EMKA FOOD 206×320) küçücük kalıyor ve "logosu büyük olan firma daha önemli"
   izlenimi doğuyordu. Sabit kutu + object-fit:contain ile her logo aynı
   sınırlayıcı alana oturur; en-boy oranı korunur, hiçbir görsel sündürülmez.
   Ölçü CSS'te tutuluyor, Tailwind h-*/w-* utility'sinde değil — app.css
   tw.css'ten sonra yüklendiği için aynı özgüllükte çakışma yaşanıyordu. */
/* Kutu `grid` + `place-items:center` ile kuruluyor; görsel de kutuyu birebir
   dolduruyor ve içindeki çizim `object-fit:contain` + `object-position:center`
   ile hem yatay hem dikey ortalanıyor. Eskiden `width:auto/height:auto` +
   `max-*:100%` vardı; sonuç aynı olsa da görselin kendi kutusu değişken
   kalıyor ve yükleme öncesi ölçü belirsiz oluyordu. Şimdi kutu sabit,
   ortalama tek bir kuralda ve tartışmasız. */
.partner-logo{ display:grid; place-items:center; padding:0; }
.partner-logo img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }

/* Kutu ORANI, logoların görünen yüksekliğini belirliyor: geniş yazı logoları
   genişlikten sınırlandığı için kutu ne kadar dar olursa o kadar kısa çıkıyor.
   Eski 12rem×5.5rem (oran 2,18) kutuda görünen yükseklikler 26px ile 88px
   arasında saçılıyordu — swissôtel bir şerit gibi kalırken Marriott kutuyu
   dolduruyor, aradaki boşluk "ortalanmamış" izlenimi veriyordu.
   14rem×4rem (oran 3,50) ile aralık 30-64px'e iniyor: hem dikey boşluk azalıyor
   hem logolar birbirine yakın ağırlıkta görünüyor. Kimse sündürülmüyor. */
.partner-logo{ width:8rem; height:2.75rem; }
@media (min-width:640px){ .partner-logo{ width:11rem; height:3.25rem; } }
@media (min-width:1024px){ .partner-logo{ width:14rem; height:4rem; } }
@media (max-width:640px){
  /* Telefonda öğe başına 128 + 32 = 160px, 390px ekranda ~2,4 logo akar */
  .marquee-x.mq-serit > *{ margin-right:2rem; }
}

/* Ürün görsel zoom */
.zoom-wrap{ cursor:zoom-in; }
.zoom-img{ transition:transform .18s ease-out; will-change:transform; }

/* ---------------- Ürün açıklama bölümleri + SSS akordiyonu ----------------
   Akordiyon native <details name="..."> üzerine kurulu:
   · JS kapalıyken / Alpine CDN'i engellendiğinde de açılır kapanır. Alpine
     defer ile geliyor; x-show ile gizlenen cevaplar o durumda kaybolurdu.
   · name özniteliği "biri açılınca diğeri kapansın" davranışını sıfır JS ile
     verir. Desteklemeyen eski tarayıcıda birden fazla panel açılabilir —
     bozulma değil, zarif gerileme.
   · Kapalı panel DOM'da durduğu için Ctrl+F cevabı bulur ve paneli açar.
   Kenarlık --card-border DEĞİL --field-border: kart kenarı burada ayrı
   tıklanabilir satırları belirleyen tek gösterge, yani 1.4.11 kapsamında
   3:1 gerekiyor. --card-border #DDE8D8 mint üzerinde 1,18:1, koyu temada
   #3d3d3d 1,39:1 ile kalıyor; --field-border 4,82:1 / 5,17:1 ile geçiyor. */
.urun-bolum{ margin-bottom:2.6rem; }
.urun-bolum:last-child{ margin-bottom:0; }
.bolum-basligi{ font-family:Montserrat,system-ui,sans-serif; font-weight:700; font-size:1.35rem; line-height:1.3; letter-spacing:-.01em; color:var(--text); margin-bottom:.9rem; }
.bolum-metin{ color:var(--text-muted); line-height:1.7; font-size:1rem; }
.bolum-liste{ list-style:disc; padding-left:1.35rem; display:grid; gap:.55rem; color:var(--text-muted); line-height:1.65; font-size:1rem; }
.bolum-liste li::marker{ color:var(--gold-700); }

.sss-liste{ display:grid; gap:.6rem; }
/* scroll-margin-top: sabit header (h-20 = 5rem) klavyeyle gelen odağı örtmesin (2.4.11) */
.sss-ogesi{ border:1px solid var(--field-border); border-radius:.9rem; background:var(--card); scroll-margin-top:6.5rem; }
/* min-height 3.25rem = 52px, dokunma hedefi 24×24'ün üstünde (2.5.8).
   Sabit height değil — 1.4.12 line-height:1.5 testinde satır patlamasın. */
.sss-ogesi > summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.25rem; padding:.85rem 1.1rem; cursor:pointer; list-style:none; border-radius:.9rem; }
.sss-ogesi > summary::-webkit-details-marker{ display:none; }   /* Safari'nin kendi üçgeni */
.sss-ogesi > summary:hover{ background:var(--bg-3); }
.sss-ogesi > summary:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; }
.sss-ogesi[open] > summary{ border-bottom:1px solid var(--field-border); border-radius:.9rem .9rem 0 0; }
.sss-soru{ font-family:Montserrat,system-ui,sans-serif; font-weight:600; font-size:1rem; line-height:1.45; color:var(--text); margin:0; }
/* Durum göstergesi renk değil ŞEKİL: artı 45° dönünce çarpı olur (1.4.1).
   Yalnızca transform — CLAUDE.md §5. --gold (#accb4c) burada kullanılamaz,
   beyaz kart üzerinde 1,73:1; --text-muted 6,9:1 veriyor. */
.sss-ikon{ flex:0 0 auto; font-size:1.3rem; color:var(--text-muted); transition:transform .18s ease; }
.sss-ogesi[open] > summary .sss-ikon{ transform:rotate(45deg); }
.sss-cevap{ padding:.95rem 1.1rem 1.15rem; color:var(--text-muted); line-height:1.7; font-size:1rem; }
.sss-cevap p{ margin:0; }

/* Sosyal paylaşım butonları */
.share-btn{ display:grid; place-items:center; height:2.4rem; width:2.4rem; border-radius:.7rem; border:1px solid var(--border); color:var(--text-muted); background:var(--bg-2); transition:.2s; }
.share-btn:hover{ background:var(--gold); color:#14210f; border-color:var(--gold); transform:translateY(-2px); }

/* Miktar sayacı (stepper) */
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:.8rem; overflow:hidden; background:var(--bg); }
.stepper button{ width:2.6rem; height:2.8rem; display:grid; place-items:center; color:var(--text); background:transparent; transition:.15s; font-size:1.05rem; }
.stepper button:hover{ background:var(--gold); color:#14210f; }
.stepper-input{ width:4rem; height:2.8rem; text-align:center; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); background:transparent; color:var(--text); font-weight:700; font-size:1rem; }
.stepper-input:focus{ outline:none; background:var(--bg-2); box-shadow:0 0 0 3px var(--gold-700); }

/* ---------------- Varyant seçici (ürün sayfası) ----------------
   Gerçek radio grubu: JS kapalıyken de seçilir ve `form=` özniteliğiyle
   sepete ekle formuna gider. .izgara-secici ile aynı desen — input görsel
   olarak gizli (display:none DEĞİL, yoksa odak alamaz ve erişilebilirlik
   ağacından düşer), stil ve odak halkası label'ın span'ında.

   Renkler contrast.ps1 ile ölçüldü:
     açık tema  seçili: #FFFFFF / --primary #3d8348 = 4,63:1
     koyu tema  seçili: --ink #262626 / --primary #accb4c = 8,22:1
   Koyu temada BEYAZ yazı kullanılamaz: #FFFFFF / #accb4c yalnızca 1,84:1.
   Kenarlık --field-border: açık 4,82:1 · koyu 5,17:1 (1.4.11 için 3:1 gerekir).
   min-height 2.75rem = 44px, dokunma hedefi 24×24'ün üstünde (2.5.8);
   sabit height değil — 1.4.12 line-height:1.5 testinde satır patlamasın. */
.varyant-secici{ position:relative; border:0; padding:0; margin:0; }
.varyant-secici legend{ padding:0; margin-bottom:.5rem; color:var(--text-muted); font-size:1rem; font-weight:500; }
.varyant-liste{ display:flex; flex-wrap:wrap; gap:.5rem; }
.varyant-liste label{ display:inline-flex; }
.varyant-secici input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.varyant-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.75rem; min-width:3.5rem; padding:0 1rem;
  border:1px solid var(--field-border); border-radius:.7rem;
  background:var(--bg); color:var(--text);
  font-size:1rem; font-weight:600; line-height:1.3; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.varyant-btn:hover{ background:var(--bg-3); border-color:var(--gold-700); }
/* Koyu temada --gold-700 ve --primary aynı renk (#accb4c). Halka ile dolgunun
   birbirine karışmaması için araya --bg kalınlığında bir ayraç konur. */
.varyant-secici input:focus-visible + .varyant-btn{
  outline:3px solid var(--gold-700); outline-offset:2px; box-shadow:0 0 0 2px var(--bg);
}
.varyant-secici input:checked + .varyant-btn{
  background:var(--primary); color:#ffffff; border-color:var(--primary); border-width:2px;
}
html.dark .varyant-secici input:checked + .varyant-btn{ color:var(--ink); }
/* Zorunlu renk modunda (Windows Yüksek Kontrast) dolgu işletim sistemi tarafından
   eziliyor; radio görsel olarak gizli olduğu için seçili/seçili değil ayrımı
   kalmıyordu. Sistem renkleriyle yeniden kurulur (1.4.1 / 1.4.11). */
@media (forced-colors: active){
  .varyant-secici input:checked + .varyant-btn{
    forced-color-adjust:none; background:Highlight; color:HighlightText;
    outline:2px solid Highlight; outline-offset:-4px;
  }
}

/* Ürün sayfası bildirim kutuları — sabit renk yerine token.
   Uyarı  : açık #8A3F0B/#FBEFE3 = 6,64:1 · koyu #F0B978/#3E322A = 7,03:1
   Başarı : açık --gold-700 #316F39 üzerinde 4,76:1 · koyu #accb4c 7,12:1
   Eski sabit değerler (color:#8a3f0b ve color:var(--primary)) sırasıyla
   koyu ve açık temada 1.4.3'ü geçemiyordu. */
.bildirim{
  display:flex; align-items:center; gap:.5rem;
  border-radius:.75rem; padding:.75rem 1rem; font-size:1rem; line-height:1.5;
}
.bildirim-uyari{ background:var(--warn-bg); color:var(--warn-text); }
.bildirim-basari{ background:var(--ok-bg); color:var(--gold-700); }

/* Sepet ikonu rozeti */
.cart-badge{ position:absolute; top:-4px; right:-4px; min-width:1.05rem; height:1.05rem; padding:0 .28rem; border-radius:999px; background:var(--gold); color:#14210f; font-size:.62rem; font-weight:800; display:grid; place-items:center; line-height:1; }

/* ---------------- Ürün ızgarası ve yoğunluk seçici ----------------
   Sütun sayısı Tailwind `grid-cols-*` utility'siyle DEĞİL, tek bir CSS
   değişkeniyle yönetiliyor. Sebep CLAUDE.md §11'deki cascade tuzağı:
   app.css, tw.css'ten sonra yükleniyor; ikisi de tek sınıf özgüllüğünde
   `grid-template-columns` yazarsa sonra gelen sessizce kazanıyor ve hangi
   kuralın geçerli olduğu okunamaz hâle geliyor. Tek kaynak burası.

   Kırılımlar:  <768px = 2 sütun  ·  768-1279px = 3 sütun
                ≥1280px = kullanıcının seçtiği görünüm (liste | 3 | 4)
   Seçici yalnızca ≥1280px'te görünür; altındaki genişliklerde 4 sütun ve
   liste görünümü kartı okunamayacak kadar daraltırdı. */
.urun-izgara{ display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:480px){ .urun-izgara{ gap:1.25rem; } }
@media (min-width:768px){ .urun-izgara{ gap:1.5rem; grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* Liste görünümü HER genişlikte geçerli — medya sorgusu içinde DEĞİL.
   Sebep 1.4.4: 1280px'lik masaüstünde %200 yakınlaştıran kullanıcının CSS
   viewport'u 640px'e düşüyor; kural yalnızca ≥1280px'te olsaydı bu kullanıcı
   işlevi tamamen kaybederdi. Üstelik "küçük görsel + tek sütun" düzeni, az
   gören ve yakınlaştıran kullanıcının en çok işine yarayan düzen.
   Kapsam `.urun-izgara` ile SINIRLI ve bu zorunlu: aynı ürün kartı partial'ı
   anasayfa carousel'inde, ürün detayında ve aramada da kullanılıyor; kapsam
   düşerse oradaki kartlar da yataya döner. */
html[data-izgara="liste"] .urun-izgara{ grid-template-columns:1fr; gap:.75rem; }
html[data-izgara="liste"] .urun-izgara .card{ flex-direction:row; align-items:stretch; }
html[data-izgara="liste"] .urun-izgara .card-media{ flex:0 0 5.5rem; }
/* min-width:0 — flex öğesinin varsayılan min-width:auto'su uzun bölünemez
   kelimede (ürün kodu, "PARMİGİANO-REGGİANO") satırı taşırıp yatay kaydırma
   doğuruyordu (1.4.10). */
html[data-izgara="liste"] .urun-izgara .kart-govde{ min-width:0; justify-content:center; padding:.85rem 1rem; }
html[data-izgara="liste"] .urun-izgara .kart-ambalaj{ margin-top:.4rem; }
/* Özet sütunu ızgara görünümünde ve dar ekranda hiç gösterilmez.
   `display:none` erişilebilirlik ağacından da çıkarır — bilgi kaybı değil,
   aynı metnin tamamı ürün sayfasında zaten var; burada yalnızca bir önizleme. */
.kart-ozet{ display:none; }
@media (min-width:1024px){
  html[data-izgara="liste"] .urun-izgara .card-media{ flex:0 0 8rem; }
  html[data-izgara="liste"] .urun-izgara .kart-govde{ padding:1.15rem 1.5rem; }
  html[data-izgara="liste"] .urun-izgara .kart-baslik{ font-size:1.35rem; }
  /* Sol blok (görsel + bilgi) %40, sağ blok (özet) %60.
     Görsel 8rem sabit olduğu için .kart-govde kalan %40'ı dolduruyor. */
  html[data-izgara="liste"] .urun-izgara .kart-ozet{
    display:flex; align-items:center; flex:0 0 60%; min-width:0;
    padding:1.15rem 1.5rem;
    border-left:1px solid var(--field-border);
    color:var(--text-muted); font-size:1rem; line-height:1.7;
  }
  html[data-izgara="liste"] .urun-izgara .kart-ozet p{
    margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}
@media (min-width:640px){
  html[data-izgara="liste"] .urun-izgara .card-media{ flex:0 0 8rem; }
  html[data-izgara="liste"] .urun-izgara .kart-govde{ padding:1.15rem 1.5rem; }
  html[data-izgara="liste"] .urun-izgara .kart-baslik{ font-size:1.35rem; }
}

/* Görünüm tercihi <html data-izgara="liste|3|4"> özniteliğinden okunur.
   Öznitelik <head>'deki satır içi script tarafından yazılır (tema tercihiyle
   aynı yerde) — app.js `defer` ile geldiği için oradan yazılsaydı sayfa önce
   3 sütun boyanıp sonra seçime atlardı. Alpine yalnızca seçim değişince
   günceller; tek doğruluk kaynağı kök öznitelik. */
@media (min-width:1280px){
  html[data-izgara="4"] .urun-izgara{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }

}

/* Ürün listesi kapsayıcısı geniş ekranda büyür.
   Neden gerekli: max-w-7xl (1280px) − lg:px-8 (64) − filtre çubuğu (280) −
   sütun boşluğu (40) = ızgaraya 896px kalıyor. 4 sütunda kart 212px'e
   düşüyordu; o genişlikte ürün adı iki satırda ~22 karaktere kırpılıyor ve
   köşelerdeki marka rozeti ile etiket üst üste biniyordu. Üstelik 1920px'lik
   ekranda da aynı 896px kullanılıyordu, yani boş alan boşa gidiyordu.
   1536px üstünde kapsayıcı 1600px'e çıkıyor: ızgara 1216px, 4 sütunda kart
   292px, liste satırı tam genişlik. */
@media (min-width:1536px){ .urunler-kap{ max-width:100rem; } }

/* Kart iç ölçüleri sütun daraldıkça küçülür. Mobilde iki sütunda kart ~155px
   kalıyor; eski p-5 (20px) + text-xl (20px) ile ürün adına satır başına
   6 karakter düşüyordu. Başlık tabanı 1rem — CLAUDE.md §1 alt sınırı. */
.kart-govde{ padding:.85rem .9rem 1rem; display:flex; flex-direction:column; flex:1 1 auto; }
.kart-baslik{ font-size:1rem; line-height:1.35; }
@media (min-width:640px){
  .kart-govde{ padding:1.25rem; }
  .kart-baslik{ font-size:1.25rem; line-height:1.4; }
}
@media (min-width:1280px){
  html[data-izgara="4"] .kart-govde{ padding:1rem; }
}

/* Yoğunluk seçici — üç düğmeli bir grup.
   Ad sabit ("3 sütun"), yalnızca aria-pressed değişir. Değişen ad + aria-pressed
   birlikte kullanılmaz; ikisi birden değişince ekran okuyucu "basılı 5 sütun"
   deyip hangisinin etkin olduğunu belirsiz bırakıyor. */
/* Sarmalayıcı gizliyken hiç yer kaplamaz — aksi hâlde mobilde boş bir
   20px'lik boşluk bırakıyordu. Sağa yaslama burada yapılır; .izgara-secici
   inline-flex olduğu için üzerinde `ml-auto` çalışmazdı. */
.izgara-secici-sar{ display:none; }
/* Seçici 640px'ten itibaren görünür. 1280px olsaydı, 1280px'lik masaüstünde
   %200 yakınlaştıran kullanıcıda (CSS viewport 640px) kontrol tamamen kaybolur
   ve 1.4.4'ün "işlev kaybı olmadan" şartı çiğnenirdi. 640px altında ızgara
   zaten 2 sütun; orada "3" etiketi yanıltıcı olacağı için seçici gizli kalıyor,
   liste tercihi ise CSS'te her genişlikte geçerli. */
@media (min-width:640px){
  html.js .izgara-secici-sar{ display:flex; justify-content:flex-end; margin-bottom:1.25rem; }
}
/* 4 sütun yalnızca gerçekten yer bulduğu genişlikte sunulur */
.izgara-4{ display:none; }
@media (min-width:1280px){ .izgara-4{ display:contents; } }
.izgara-secici{ position:relative; display:inline-flex; align-items:center; gap:.25rem; padding:.25rem;
                border:1px solid var(--field-border); border-radius:.7rem; background:var(--bg-2);
                margin:0; }
.izgara-secici legend{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
                       overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Radyo düğmesi görsel olarak gizli; stil <label> üzerinde.
   appearance:none ile input boyanmıyor — gizli input'un kendi odak halkası
   görünmez olurdu (2.4.7). Halka label'a taşınıyor (input:focus-visible + label). */
.izgara-secici input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.izgara-btn{ display:flex; align-items:center; gap:.35rem; min-width:2.5rem; height:2.25rem;
             padding:0 .55rem; border-radius:.5rem; color:var(--text-muted);
             font-weight:700; font-size:1rem; line-height:1; cursor:pointer;
             transition:background .15s ease, color .15s ease; }
.izgara-btn:hover{ background:var(--bg-3); color:var(--gold-700); }
.izgara-secici input:focus-visible + .izgara-btn{ outline:3px solid var(--gold-700); outline-offset:2px; }
.izgara-secici input:checked + .izgara-btn{ background:var(--primary); color:#ffffff; }
html.dark .izgara-secici input:checked + .izgara-btn{ color:var(--ink); }
/* Sütun sayısını gösteren çubuklar. Rakam/harf de görünür metin olarak duruyor:
   ikon alt kümesinde ph-columns/ph-rows yok, ayrı ikonlar çizilemiyor;
   çubuk + etiket ikilisi seçenekleri görsel olarak ayırt edilebilir kılıyor. */
.izgara-ikon{ display:flex; gap:2px; align-items:center; }
.izgara-ikon i{ display:block; width:3px; height:13px; border-radius:1px; background:currentColor; }
/* Liste ikonu: aynı üç çubuk 90° döndürülmüş — dikey yerine üst üste yatay.
   `transform:rotate()` yerine yön değiştirmek tercih edildi; döndürme
   kutunun sınırlayıcı alanını değiştirmediği için düğme hizası kayıyordu. */
.izgara-ikon.yatay{ flex-direction:column; gap:2px; }
.izgara-ikon.yatay i{ width:13px; height:3px; }

/* Dar kartta köşe rozetleri. 320px ekranda iki sütunda kart 136px kalıyor;
   sol üstteki etiket (~85px) ile sağ üstteki marka rozeti (~62px) o genişlikte
   üst üste biniyordu. Görsel sayacı ise 10px punto ile zaten okunmuyor ve
   tamamen dekoratif (aria-hidden) — dar kartta hiç basılmıyor. */
@media (max-width:479px){
  .gorsel-sayaci{ display:none; }
  /* Marka rozeti alt sola iner. Punto KÜÇÜLTÜLMÜYOR — rozet yazıları zaten
     1rem tabanının altında (CLAUDE.md §1 açık işi), daha da küçültmek mevcut
     ihlali derinleştirirdi. Çakışma konum değiştirilerek çözülüyor: üst satırda
     yalnızca etiketler, alt satırda marka. */
  .card-media .brand-pill{ top:auto; bottom:.5rem; right:auto; left:.5rem; }
}

/* Ürün kartı — çoklu görselde ikinci görsel (hover geçişi) */
/* Ürün görseli flip — fareyle üzerine gelince ikinci görsele çapraz geçiş.
   Tamamen CSS; JS'e bağlı değil. İki görsel üst üste duruyor, yalnızca opacity
   değişiyor (CLAUDE.md §5: mikro animasyon sadece transform/opacity).
   Süre 450ms, `ease-in-out` ile iki uçta da yumuşak.
   Odakla da çalışır: klavye kullanıcısı karta Tab ile geldiğinde aynı geçiş
   olur (:focus-within), yoksa özellik yalnızca fareye özel kalırdı. */
.card-media .img-first,
.card-media .img-second{ transition:opacity .45s ease-in-out; }
.card-media .img-second{ position:absolute; inset:0; opacity:0; }
/* Hover .card ÜZERİNDE dinleniyor, .card-media üzerinde DEĞİL.
   Sebep: .card-link::after tıklama örtüsü (z-index:4) tüm kartı, dolayısıyla
   görseli de kaplıyor. Fare oradayken :hover zinciri
   .card-link -> h3 -> .kart-govde -> .card şeklinde ilerliyor; .card-media bu
   zincirde OLMADIĞI için `.card-media:hover` hiçbir zaman eşleşmiyordu.
   Zaten çalışan zoom kuralı (`.card:hover .card-media img`) da aynı sebeple
   .card üzerinden yazılmış. */
.card:hover .card-media.has-second .img-first,
.card:focus-within .card-media.has-second .img-first{ opacity:0; }
.card:hover .card-media.has-second .img-second,
.card:focus-within .card-media.has-second .img-second{ opacity:1; }
/* Hareket azaltma: geçiş anında olur, çapraz solma yapılmaz.
   Global bastırma bloğu (dosya sonu) süreyi zaten .001ms'e indiriyor;
   bu kural niyeti açıkça yazıyor ve o blok değişirse de korunur. */
@media (prefers-reduced-motion: reduce){
  .card-media .img-first, .card-media .img-second{ transition:none; }
}

/* ---------------- Filtre paneli ---------------- */
.filter-box{ background:var(--card); border:1px solid var(--card-border); border-radius:1rem; padding:.9rem 1rem; }
/* font-size .95rem yalnizca kutu basligi icin; govde metni degil, bolum etiketi. */
.filter-head{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1rem; color:var(--text); margin-bottom:.6rem; }
/* Satir yuksekligi 40px -> 32px: line-height 1.5 (1.4.12 alt siniri) korunur,
   kazanc dolgudan gelir. 32px dokunma hedefi 24px sinirinin (2.5.8) uzerinde.
   font-weight acikca 400 -- kalitim zinciri degisirse 300'e dusmesin. */
.filter-item{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.25rem .6rem; border-radius:.55rem; color:var(--text-muted); font-weight:400; line-height:1.5; transition:.2s; }
.filter-item:hover{ background:var(--bg-3); color:var(--gold-700); }
/* Açık temada --primary #3d8348 → beyaz yazı 4,63:1 (geçer).
   Koyu temada --primary #accb4c olduğu için beyaz yazı 1,84:1'e düşüyordu;
   orada koyu yazı kullanılır → 8,22:1. Aynı düzeltme .btn-gold'da da var. */
.filter-item.active{ background:var(--primary); color:#ffffff; font-weight:700; }
/* SAYI KUTUSUNUN YARI SAYDAM ZEMİNİ KALDIRILDI (1.4.3).
   rgba(255,255,255,.22) etkin filtrenin #3d8348 zemini üzerine binince sonuç
   #689E70 oluyor ve beyaz yazı 3,13:1'e düşüyor — eşik 4,5:1. Sayı okunması
   gereken bilgi, dekorasyon değil.
   Çözüm blogdaki etiket rozetiyle aynı: kutu kalkıyor, yazı filtrenin kendi
   doğrulanmış zemini üzerinde duruyor (beyaz / #3d8348 = 4,63:1). Ayırıcı
   çizgi dekoratif olduğu için 3:1 aranmıyor.
   Koyu tema zaten geçiyordu (#262626 / #8FA744 = 5,61:1) ama aynı desende
   tutuldu; kutusuz hâli orada da daha iyi: 8,22:1. */
.filter-item.active .filter-count{
  background:transparent; color:#ffffff;
  min-width:0; padding:0 0 0 .45rem; border-radius:0;
  border-left:1px solid rgba(255,255,255,.5);
}
html.dark .filter-item.active{ color:var(--ink); }
html.dark .filter-item.active .filter-count{
  background:transparent; color:var(--ink);
  border-left-color:rgba(38,38,38,.45);
}
/* Sayilar okunmasi gereken bilgi; 1rem alt sinirinin altina inilmez.
   Satir yuksekligini artirmaz: 24px satir + 1.6px dolgu = ~26px < 32px. */
.filter-count{ font-size:1rem; font-weight:700; line-height:1.5; background:var(--bg-3); color:var(--text-muted); padding:0 .45rem; border-radius:999px; min-width:2rem; text-align:center; }
.filter-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:1rem; padding:.4rem .8rem; border-radius:999px; background:var(--ink); color:var(--cream); }
.filter-chip:hover{ background:var(--gold); color:var(--ink); }

/* Mobil filtre çekmecesi: liste tek ekrana sığsın diye dolgular daraltılır.
   Satır yüksekliği 40px -> 36px; line-height 1.5 korunur (1.4.12) ve dokunma
   hedefi 24px alt sınırının (2.5.8) üstünde kalır. Yalnızca lg altında geçerli;
   masaüstü kenar çubuğu değişmez. */
@media (max-width:1023.98px){
  .filter-box{ padding:.8rem .85rem; }
  .filter-head{ margin-bottom:.5rem; }
  /* Mobilde parmakla dokunuluyor: satir 32px yerine 36px. */
  .filter-item{ padding:.375rem .55rem; }
  .filter-count{ min-width:1.5rem; padding:.05rem .4rem; }
}

/* Kategori sekmeleri (marka sayfası) */
.cat-tab{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-2); color:var(--text-muted); font-size:1rem; font-weight:600; transition:.2s; }
.cat-tab:hover{ border-color:var(--gold); color:var(--gold); }
.cat-tab.active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* Form alanları (tema-duyarlı) */
.field{ width:100%; border-radius:.75rem; border:1px solid var(--border); background:var(--bg-2); color:var(--text); padding:.75rem 1rem; transition:.2s; }
/* WCAG 1.4.11 + 2.4.7 — eski halka (rgba .18) beyaz zeminde 1,15:1 idi, gorunmuyordu.
   --gold-700 acik temada 5,37:1 / koyu temada 7,07:1 verir. */
.field:focus{ outline:none; border-color:var(--gold-700); box-shadow:0 0 0 3px var(--gold-700); }
.field:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; }
.field::placeholder{ color:var(--text-muted); }
.field-label{ display:block; font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:.4rem; }

/* ---------------- Sayfalama ---------------- */
.page-btn{ display:inline-grid; place-items:center; min-width:2.4rem; height:2.4rem; padding:0 .5rem; border-radius:.6rem; border:1px solid var(--border); color:var(--text-muted); font-weight:600; transition:.2s; }
.page-btn:hover{ border-color:var(--gold); color:var(--gold); }
.page-btn.active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* Marka logolarının aktığı şerit — kesintisiz döngü için boşluk yerine kenar boşluğu
   (flex gap, translateX(-50%) ile yarım-boşluk kayması yapıp döngüde sıçrama yaratıyordu) */
.marquee{ display:flex; animation:marquee 28s linear infinite; }
.marquee > *{ margin-right:4rem; }
.marquee:hover{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
/* Ürün carousel — yavaş, sürekli dönen */
.marquee-products{ align-items:stretch; animation-duration:60s; }
.marquee-products > div{ display:flex; margin-right:1.5rem; }
.marquee-products .card{ width:100%; }

/* İş ortakları şeridi — JS ölçümlü, her ekran genişliğinde kesintisiz.
   JS orijinal seti ekranı dolduracak kadar klonlar, tam bir set (--mqx-shift) kadar kaydırır. */
/* Varsayılan hâl SARMALAYAN IZGARA, akan şerit değil.
   Şerit yalnızca JS animasyonu gerçekten başlattığında (.on) devreye girer.
   Sebep: animasyon yokken — mobilde, `prefers-reduced-motion` açıkken veya JS
   hiç çalışmazken — tek satırlık şerit `overflow:hidden` altında kırpılıyor ve
   ekrana sığmayan logolara ulaşmanın hiçbir yolu kalmıyordu (içerik kaybı).
   Izgara hâlinde hepsi görünür, taşma olmaz, yatay kaydırma gerekmez. */
.marquee-x{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.25rem 1.5rem; }
.marquee-x > *{ flex:0 0 auto; }
/* Akan şerit iki sınıfa ayrılmış: `mq-serit` DÜZEN, `on` HAREKET.
   Ayrım zorunlu — app.js bir tam setin genişliğini `offsetWidth + marginRight`
   toplayarak ölçüyor. Ölçüm, şerit düzeni uygulanmadan yapılırsa öğeler hâlâ
   sarmalı yerleşimde olur, marginRight 0 okunur ve `--mqx-shift` bir set
   genişliğinden küçük çıkar; döngü başa sardığında görünür bir sıçrama olur.
   O yüzden JS önce `mq-serit`i ekler, sonra ölçer, en son `on` ile başlatır.
   Boşluk `gap` ile DEĞİL `margin-right` ile veriliyor: gap ölçüme girmez. */
.marquee-x.mq-serit{ flex-wrap:nowrap; justify-content:flex-start; gap:0; width:max-content; }
.marquee-x.mq-serit > *{ margin-right:4rem; }
.marquee-x.on{ will-change:transform; animation:mqx var(--mqx-sure, 30s) linear infinite; }
/* Duraklatma CSS'te: Alpine'in @mouseenter'ı yalnızca fare içindi ve Alpine
   engellenirse hiç çalışmıyordu. :focus-within klavyeyle şeride girildiğinde
   de durdurur — aksi hâlde odaklanan bağlantı elin altından kayıyordu. */
.marquee-kap:hover .marquee-x.on,
.marquee-kap:focus-within .marquee-x.on{ animation-play-state:paused; }
/* Şerit uzunluğu ne olursa olsun akış hızı sabit kalsın diye süre JS'te
   bir set genişliğinden hesaplanıyor (--mqx-sure). 6 ortakla da 30 ortakla da
   logolar aynı hızda geçer; ortak eklenince şerit hızlanmaz. */
/* Kenar geçiş maskeleri yalnızca akan şeritte anlamlı; sarmalı yedek düzende
   kenardaki logoların üstüne binip onları soldururlardı.
   Genişlik CSS'te: Tailwind `w-24` (96px) iki yanda 192px yapıyordu ve 390px
   ekranda maskesiz alan 198px'e düşüyordu — tek bir logo kutusu bile sığmıyordu. */
.kenar-maske{ display:none; width:2rem; }
@media (min-width:1024px){ .kenar-maske{ width:6rem; } }
.kenar-maske:has(~ .marquee-x.mq-serit){ display:block; }
@keyframes mqx{ from{ transform:translateX(0); } to{ transform:translateX(calc(-1 * var(--mqx-shift, 100px))); } }

/* Sonsuz kaydırma: JS varsa numaralı sayfalamayı gizle, sentinel'i göster */
.infinite-wrap{ display:none; }
html.js .infinite-wrap{ display:block; }
html.js .numbered-pager{ display:none; }
/* Sonsuz kaydırma başarısız olursa numaralı sayfalama geri gelir — aksi hâlde
   kullanıcının daha fazla ürüne ulaşacak hiçbir yolu kalmıyordu. */
html.js.infinite-failed .numbered-pager{ display:flex; }
.infinite-spinner{ display:none; color:var(--gold); font-size:1.7rem; padding:.5rem 0; }
.infinite-spinner.on{ display:block; }
.infinite-spinner.on i{ display:inline-block; animation:infspin .8s linear infinite; }
/* Hareket azaltma isteğinde dönüş TAMAMEN durur. Genel bastırma kuralı
   (animation-duration:.001ms) döndürmeyi durdurmuyor, rastgele bir açıda
   donduruyor; niyeti açıkça yazmak bu dosyanın alışkanlığı. Simge görünür
   kalıyor, yani "yükleniyor" göstergesi kaybolmuyor. */
@media (prefers-reduced-motion: reduce){
  .infinite-spinner.on i{ animation:none; }
}
@keyframes infspin{ to{ transform:rotate(360deg); } }

/* ---------------- Responsive ince ayarlar ---------------- */
@media (max-width: 1024px){
  .menu-panel .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  /* Mobil hero yüksekliği — "Dengeli" ölçü: iPhone 14'te 492px (%66),
     iPhone SE'de 400px (%72). Bir sonraki bölümün başlığı ve ilk kartı ilk
     ekrana giriyor, yani aşağıda içerik olduğu görülüyor.
     Birim `vh` DEĞİL `svh`: vh, adres çubuğu gizliyken ölçtüğü için sayfa
     açılışında hero görünür alandan taşıyordu ve nokta şeridiyle ilerleme
     çubuğu ilk ekranda hiç görünmüyordu. svh çubuk açıkkenki garanti
     yüksekliktir ve kaydırırken değişmez (dvh olsaydı her kaydırmada hero
     yeniden boyutlanır, Ken Burns ortasında layout zıplardı).
     İlk satır svh bilmeyen tarayıcı için geri düşüş; bilen tarayıcı ikinci
     satırı uygular, bilmeyen onu geçersiz sayıp tamamen atar. */
  .hero{ min-height:clamp(25rem, 66vh,  40rem); }
  .hero{ min-height:clamp(25rem, 66svh, 40rem); }
  .hero-content{ padding-bottom:4rem; }
  .hero-overlay{ background:linear-gradient(0deg, rgba(16,22,15,.9) 0%, rgba(16,22,15,.45) 70%, rgba(16,22,15,.55) 100%) !important; }
  /* Oklar mobilde gizli: sol ok x=8-48px bandını kaplıyor, içerik ise px-6 ile
     x=24'ten başlıyor ve ok z-index:5 > içerik z-index:3. Yani CTA butonunun
     sol kenarına dokunmak "sonraki slayt"ı tetikliyordu. İşlev kaybı yok —
     parmakla kaydırma (app.js) ve nokta düğmeleri duruyor. */
  .hero-arrow{ display:none; }
  .hero-dots{ bottom:1.25rem; }
  .btn-gold, .btn-outline-cream, .btn-ink{ padding:.65rem 1.15rem; font-size:.95rem; }
  .card:hover{ transform:none; }             /* dokunmatikte titremeyi önle */
  .card:hover .card-media img{ transform:none; }
  /* Dokunmatikte hover "yapışıyor"; geri tuşuyla dönüldüğünde kart ikinci
     görselde takılı kalıyordu. Zoom zaten kapalı, flip de kapatılıyor. */
  .card:hover .card-media.has-second .img-first{ opacity:1; }
  .card:hover .card-media.has-second .img-second{ opacity:0; }
}
/* Dokunmatik cihazlarda hover'a bağlı içerikleri her zaman görünür yap */
@media (hover: none){
  .gallery-item .cap{ opacity:1; background:linear-gradient(0deg,rgba(26,34,24,.55),transparent 55%); }
}

/* Erişilebilirlik: hareketi azalt */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  /* <html class="scroll-smooth"> hiçbir yerde kapatılmıyordu; sayfa içi her
     çapa (İçeriğe geç, blog içindekiler listesi, ürün SSS) hareket azaltma
     isteyen kullanıcıda bile yumuşak kaydırma üretiyordu. CLAUDE.md §5 bu
     desteği zorunlu kılıyor ve yönetim paneli (admin/inc/head.php) zaten
     aynı kuralı taşıyor. */
  html{ scroll-behavior:auto !important; }
}

/* ---------------- Sayfa başlığı bandı — fotoğraf zemini ----------------
   Yönetim > Kategoriler ekranından yüklenen kategori görselleri, koyu başlık
   bandının (bg-ink) arkasında rastgele gösterilir (includes/page_hero_photo.php).

   Fotoğraf zemin oluyor ama metin rengi değişmiyor; bu yüzden zeminin
   AYDINLANABİLECEĞİ TAVAN ölçüyle kilitli. Hesap en kötü hâl üzerinden yapıldı:
   bembeyaz (#ffffff) bir fotoğraf karesi.

     görsel opaklığı .40 x perde .55  ->  zemin en fazla #4D4D4D

   Perde bilerek DÜZ (dikey degrade değil). Önceki sürümde perde aşağı doğru
   .86'ya koyulaşıyordu; bandın alt yarısı neredeyse düz siyah kalıyor, fotoğraf
   yalnızca üst şeritte seçiliyordu. Tavan zaten her piksel için geçerli olduğuna
   göre degradenin okunurluğa katkısı yok, sadece fotoğrafı yutuyordu.

   ÖLÇÜM (#4D4D4D üstünde, contrast.ps1):
     #F4F9F2  (text-cream) ................. 7,92:1
     cream %70 (alt başlık, site yolu) ..... 4,85:1
     cream %60 -> %80'e çekildi (aşağıda) .. 5,80:1   ham hâli 4,04:1 ile KALIYORDU
     #accb4c  (.eyebrow, hover:text-gold) .. 4,59:1
   AA metin eşiği 4,5:1 — dördü de geçiyor.

   TAVANI BELİRLEYEN .eyebrow YEŞİLİDİR: zemin #505050'ye açıldığında #accb4c
   4,38:1'e düşer ve AA kırılır. Yani .40/.55 çarpımı keyfi değil, sınırın
   kendisi. Bandı daha da açmak istenirse tek yol yeşil eyebrow'u bu bantlarda
   krem yapmaktır (o zaman tavan ~#707070'e çıkar); değerleri contrast.ps1 ile
   yeniden ölçmeden büyütmeyin. */
.page-hero-photo{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none; user-select:none;
}
.page-hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:.4;
}
/* Düz perde; yalnızca en alt %18'de hafif koyulaşır — bandın açık renkli bir
   sonraki bölümle birleştiği kenarı ayırmak için. Tavan (.55) aşılmıyor. */
.page-hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(38,38,38,.55) 0%, rgba(38,38,38,.55) 82%, rgba(38,38,38,.63) 100%);
}
/* Bantlardaki %5'lik yeşil radyal ışık, fotoğraf varken hem gereksiz hem zararlı:
   zemini ~5 birim açıp yukarıdaki tavanı yiyordu. Fotoğraf yoksa kural işlemez,
   düz zemindeki özgün görünüm korunur. */
.page-hero-photo ~ .hero-glow{ display:none; }
/* Bandın en soluk metni (markalar.php girişi) fotoğraf üstünde 4,04:1'e
   düşüyordu; fotoğraf VARSA %80 opaklığa çekiliyor (5,80:1). */
.page-hero-photo ~ .text-cream\/60,
.page-hero-photo ~ * .text-cream\/60{ color:rgba(244,249,242,.8); }

/* ---------------- Slider üst etiketi (eyebrow) rozeti ----------------
   Anasayfa slider'ında üst etiket, fotoğrafın üstünde krem bir rozetin içinde
   duruyor. Yalnızca ETİKET — başlık ve alt başlık fotoğrafın üstünde kalır.

   Boyut içeriğe göre: inline-block + padding. Sabit genişlik/yükseklik YOK,
   uzun İngilizce/Türkçe etiketler rozeti kendiliğinden büyütür, satır kırılırsa
   rozet iki satırı da sarar.

   RENK TUZAĞI — rozetin içindeki yeşil #accb4c OLAMAZ: krem üzerinde 1,73:1
   verir (CLAUDE.md §renk kilidi). Açık zeminin karşılığı #316F39 -> 5,68:1.
   Değer var(--gold-700) ile YAZILMADI, çünkü koyu temada o token #accb4c'ye
   dönüyor; rozet ise iki temada da krem kaldığı için renk sabit olmak zorunda.
   Rozet zemini de var(--cream) ile sabit (#F4F9F2, iki temada aynı). */
.hero-content .eyebrow{
  display:inline-block;
  background:var(--cream);
  color:#316F39;                 /* krem üzerinde 5,68:1 — contrast.ps1 ile ölçüldü */
  /* Sol dolgu .22em fazla: letter-spacing son harften SONRA da boşluk bırakıyor,
     simetrik dolguda yazı rozetin içinde sola kaçık duruyor. */
  padding:.42rem 1rem .42rem calc(1rem + .22em);
  border-radius:999px;           /* .btn-gold ile aynı — oval kenar */
  box-shadow:0 2px 12px -4px rgba(38,38,38,.45);
}

/* ==========================================================================
   BLOG MODÜLÜ
   ==========================================================================

   RENK KURALI (bu bloğun tamamında geçerli):
     - Metin, kenarlık, ikon ve odak halkası için AÇIK zeminde #accb4c
       (--gold) KULLANILMAZ; krem üzerinde 1,73:1 verir. Karşılığı
       var(--gold-700) — açık temada #316F39 (5,68:1), koyu temada #accb4c.
     - Tek başına anlam taşıyan kenarlıklar (çip, kart, içindekiler işareti,
       kaydırılabilir bölge) var(--border) DEĞİL var(--field-border) kullanır:
       --border #DDE8D8 krem üzerinde 1,18:1 ve WCAG 1.4.11'i (3:1) geçemez.
     - Punto tabanı 1rem; bu blokta 1rem altı hiçbir değer yok (CLAUDE.md §1).

   ODAK KURALI: app.css'te genel bir :focus-visible kuralı YOK, her bileşen
   kendi halkasını çizmek zorunda. Aşağıdaki her etkileşimli sınıfın kendi
   :focus-visible kuralı var.

   ÇAPA KURALI: header position:fixed ve kaydırıldığında 5rem yüksekliğinde.
   Sayfa içi bağlantıyla gelinen her hedef 7rem scroll-margin-top taşır,
   aksi hâlde başlık header'ın altında kalır (WCAG 2.4.11).
   ========================================================================== */

/* ---------- Ortak ---------- */
.blog-kirinti{ margin-bottom:1rem; }
.blog-kirinti ol{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem; font-size:1rem; color:rgba(244,249,242,.75);
}
.blog-kirinti li{ display:inline-flex; align-items:center; gap:.5rem; }
.blog-kirinti a{ color:rgba(244,249,242,.85); text-decoration:underline; text-underline-offset:.2em; }
.blog-kirinti a:hover{ color:var(--gold); }
.blog-kirinti a:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:.25rem; }
.blog-kirinti [aria-current="page"]{ color:var(--cream); font-weight:600; }

.blog-bolum-baslik{
  display:flex; align-items:center; gap:.6rem;
  font-family:Montserrat, system-ui, sans-serif; font-weight:700;
  font-size:1.5rem; letter-spacing:-.01em; color:var(--text);
  margin-bottom:1.25rem; scroll-margin-top:7rem;
}
.blog-bolum-baslik i{ color:var(--gold-700); font-size:1.4rem; }
.blog-bolum-baslik-orta{ justify-content:center; text-align:center; }

.blog-alt-baslik{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:1.15rem; color:var(--text); margin-bottom:.75rem;
}
.blog-alt-baslik i{ color:var(--gold-700); }

/* ---------- Rozetler ----------
   Yazı beyaz; zemin sunucuda beyaza karşı >=4,5:1 doğrulanıyor (1.4.3). */
.blog-rozet{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .75rem; border-radius:999px;
  font-size:1rem; font-weight:600; line-height:1.35; color:#ffffff;
}
.blog-rozet i{ font-size:1rem; }
.blog-rozet-link{ transition:transform .15s ease; }
.blog-rozet-link:hover{ transform:translateY(-1px); }
/* ODAK HALKASI İÇERİDEN ÇİZİLİYOR — dışarıdan değil.
   Rozet bağlantısı farklı zeminlerde bulunuyor:
     blog_yazi.php:204  koyu başlık bandı (bg-ink, #262626)
     blog_yazi.php:309  yazı gövdesi (--card: #ffffff / #2e2e2e)
     kenar çubuğu kartı ise --card (#ffffff / #2e2e2e) üzerinde duruyordu
   Halka DIŞARIDAN çizilseydi rengini zemine göre seçmek gerekirdi ve tek bir
   değer üçünü birden karşılayamazdı: krem halka açık kartta 1,08:1, koyu yeşil
   halka koyu bantta 1,6:1 kalıyor.
   İÇERİDEN çizilen BEYAZ halka bu sorunu kökten kaldırıyor: rozet zemini,
   sunucuda beyaza karşı en az 4,5:1 verecek şekilde zaten doğrulanmış
   (BlogRepository::ETIKET_MIN_KONTRAST). Yani halka nerede olursa olsun
   kendi zeminine karşı 4,5:1'in altına inemez — 1.4.11'in 3:1 eşiğinin
   epey üstünde. Ek kazanç: halka rozetin dışına taşmadığı için yan yana
   dizilmiş etiketlerin üstüne binmiyor, bulut aralığını büyütmek gerekmiyor. */
.blog-rozet-link:focus-visible{
  outline:2px solid #ffffff; outline-offset:-2px;
}
/* İç halka dolgunun içine giriyor; bağlantı rozetlerinde dolgu bir tık geniş
   ki halka yazıya değmesin. Yükseklik yine içeriğe bağlı (1.4.12). */
.blog-rozet-link{ padding:.34rem .85rem; }

/* .blog-rozet-sayi KALDIRILDI (2026-09-05): yazı sayısını yalnızca kenar
   çubuğundaki etiket bulutu basıyordu, o blok da kaldırıldı. Yazı sayfasının
   sonundaki etiket rozetleri sayı taşımıyor. */

/* ---------- Arama kutusu (başlık bandı içinde) ---------- */
.blog-ara-form{
  position:relative; display:flex; align-items:center; gap:.5rem;
  max-width:34rem; margin:1.75rem auto 0; flex-wrap:wrap;
}
.blog-ara-ikon{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  font-size:1.35rem; color:var(--gold); pointer-events:none;
}
.blog-ara-input{
  flex:1 1 16rem; min-width:0;
  border:1px solid transparent; border-radius:.9rem;
  background:var(--cream); color:var(--ink);
  padding:.9rem 1rem .9rem 3rem; font-size:1rem; font-family:inherit;
}
.blog-ara-input::placeholder{ color:#5a5a5a; }
.blog-ara-input:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.blog-ara-btn{
  flex:0 0 auto; border-radius:.9rem; padding:.9rem 1.4rem;
  background:var(--gold); color:#2e2e2e; font-weight:700; font-size:1rem;
  transition:background-color .15s ease;
}
.blog-ara-btn:hover{ background:#bcd66f; }
.blog-ara-btn:focus-visible{ outline:3px solid var(--cream); outline-offset:3px; }

/* ---------- Kategori süzgeci ----------
   KALDIRILDI (2026-09-05). Başlık bandının altındaki çip şeridi site
   sahibinin isteğiyle kaldırıldı; kategoriler kenar çubuğundaki
   "Kategoriler" kutusunda zaten listeleniyordu.
   Birlikte giden ölü kurallar: .blog-suzgec, .blog-suzgec-serit,
   .blog-cip, .blog-cip-sayi — hiçbiri başka yerde kullanılmıyordu.
   .blog-etiket-bulut DURUYOR: yazı sayfasındaki etiket rozetleri hâlâ
   onu kullanıyor (blog_yazi.php). */

/* ---------- Izgara ve kartlar ---------- */
.blog-duzen{ display:grid; gap:2rem; align-items:start; }
@media (min-width:1024px){
  .blog-duzen{ grid-template-columns:minmax(0,1fr) 20rem; }
}
.blog-izgara{ display:grid; gap:1.5rem; }
@media (min-width:640px){ .blog-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .blog-izgara-3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.blog-kart{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--card); border:1px solid var(--field-border); border-radius:1rem;
  overflow:hidden; scroll-margin-top:7rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-kart:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(38,38,38,.45); }
/* Odak halkası kartın kendisinde: gerçek bağlantı başlıkta ama tıklama
   yüzeyi tüm kart, kullanıcının hangi kartta olduğu görünmeli (2.4.7). */
.blog-kart:focus-within{ outline:3px solid var(--gold-700); outline-offset:3px; }
.blog-kart-medya{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); }
.blog-kart-medya img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.blog-kart:hover .blog-kart-medya img{ transform:scale(1.04); }
.blog-kart-medya.bos img{ object-fit:contain; padding:2rem; opacity:.35; }
/* Rozet sütunu: kategori üstte, etiketler altında. Ürün kartındaki
   .badge-tag yığınıyla aynı desen — ama punto 1rem, .7rem DEĞİL:
   .badge-tag CLAUDE.md §1'in altında kalan eski bir kural, blog onu
   devralmıyor. */
.blog-rozet-sutun{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.4rem;
  max-width:calc(100% - 1.7rem);
}
.blog-rozet-sutun .blog-rozet{ box-shadow:0 2px 10px rgba(0,0,0,.28); }
/* Etiket rozeti kategoriden bir tık küçük durur ama 1rem'in altına İNMEZ;
   ayrım punto ile değil, dolgu ve gölge ile kuruluyor. */
.blog-rozet-etiket{ padding:.2rem .6rem; }

.blog-kart-govde{ display:flex; flex-direction:column; gap:.6rem; padding:1.25rem; flex:1 1 auto; }
.blog-kart-baslik{
  font-family:Montserrat, system-ui, sans-serif; font-weight:700;
  font-size:1.2rem; line-height:1.35; letter-spacing:-.01em; color:var(--text);
}
/* Kartın tamamı tıklanabilir ama erişilebilir ad yalnızca başlık.
   Aynı desen product_card.php / .card-link icinde de var. */
.blog-kart-link{ color:inherit; text-decoration:none; }
.blog-kart-link::after{ content:''; position:absolute; inset:0; z-index:1; }
.blog-kart-link:hover{ color:var(--gold-700); }
.blog-kart-ozet{ color:var(--text-muted); font-size:1rem; line-height:1.6; }
.blog-kart-alt{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  flex-wrap:wrap; margin-top:auto; padding-top:.5rem; font-size:1rem;
}
.blog-sure{ display:inline-flex; align-items:center; gap:.35rem; color:var(--text-muted); }
.blog-sure i{ color:var(--gold-700); }
.blog-kart-git{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--gold-700); }
.blog-kart-git i{ transition:transform .2s ease; }
.blog-kart:hover .blog-kart-git i{ transform:translateX(3px); }

/* ---------- Manşet ---------- */
.blog-manset-sarmal{ margin-bottom:3rem; }
.blog-manset{
  position:relative; display:grid; gap:0; align-items:stretch;
  background:var(--card); border:1px solid var(--field-border); border-radius:1.25rem; overflow:hidden;
  transition:box-shadow .2s ease;
}
@media (min-width:900px){ .blog-manset{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.blog-manset:hover{ box-shadow:0 24px 60px -32px rgba(38,38,38,.5); }
.blog-manset:focus-within{ outline:3px solid var(--gold-700); outline-offset:3px; }
.blog-manset-medya{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.blog-manset-medya img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-manset:hover .blog-manset-medya img{ transform:scale(1.03); }
.blog-manset-govde{ display:flex; flex-direction:column; gap:.85rem; padding:1.75rem; justify-content:center; }
.blog-rozet-duz{ align-self:flex-start; }
.blog-manset-baslik{
  font-family:Montserrat, system-ui, sans-serif; font-weight:700;
  font-size:1.75rem; line-height:1.25; letter-spacing:-.02em; color:var(--text);
}
@media (min-width:1024px){ .blog-manset-baslik{ font-size:2.1rem; } }
.blog-manset-ozet{ color:var(--text-muted); font-size:1.05rem; line-height:1.65; }

/* ---------- Boş durum ---------- */
.blog-bos{
  display:flex; flex-direction:column; align-items:center; gap:.75rem; text-align:center;
  padding:3.5rem 1.5rem; border:1px dashed var(--field-border); border-radius:1rem; background:var(--bg-2);
}
.blog-bos > i{ font-size:2.5rem; color:var(--gold-700); }
.blog-bos-baslik{ font-weight:700; font-size:1.25rem; color:var(--text); }
.blog-bos-metin{ color:var(--text-muted); font-size:1rem; max-width:28rem; }

/* ---------- Kenar çubuğu ---------- */
.blog-kenar-sabit, .blog-yan-sabit{ display:flex; flex-direction:column; gap:1.25rem; }
/* YAPIŞKAN DEĞİL, KENDİ KAYDIRMA ALANI DA YOK.
   Önceden `position:sticky` + `max-height:calc(100vh - 9rem)` + `overflow-y:auto`
   vardı. max-height/overflow ikilisi bir erişilebilirlik özelliği değildi,
   sticky'nin yan etkisini onaran bir yamaydı; sticky kalkınca yama da gereksiz.
   Kaldırmanın kazançları:
     1.4.10  iç içe kaydırma kutusu yok, içerik normal akıyor
     1.4.4   %200 yazı büyütmede 100vh kutusu büyümüyor, içerik sıkışıyordu
     2.4.11  overflow pozitif outline-offset'i kırpıyor; kutunun en üst ve en
             alt bağlantısının odak halkası tıraşlanıyordu
   İçindekiler listesi (.blog-toc-sarmal) bilerek DIŞARIDA: o bileşen okunan
   bölümü izliyor, yapışkanlık işlevinin parçası ve uzun bir listede iç
   kaydırma orada doğru çözüm. */
.blog-kutu{
  background:var(--card); border:1px solid var(--field-border);
  border-radius:1rem; padding:1.25rem;
}
.blog-kutu-baslik{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:1.1rem; color:var(--text); margin-bottom:.9rem;
}
.blog-kutu-baslik i{ color:var(--gold-700); }
.blog-kutu-cta{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.blog-kutu-baslik-acik{ color:var(--cream); }
.blog-kutu-baslik-acik i{ color:var(--gold); }
.blog-cta-metin{ color:rgba(244,249,242,.8); font-size:1rem; line-height:1.6; margin-bottom:1rem; }
.blog-cta-alt{
  display:block; margin-top:.75rem; text-align:center;
  color:var(--gold); font-weight:600; font-size:1rem; text-decoration:underline;
  text-underline-offset:.2em;
}
.blog-cta-alt:hover{ color:#ffffff; }
.blog-cta-alt:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:.35rem; }

.blog-populer{ display:flex; flex-direction:column; gap:.85rem; }
.blog-populer li{ display:flex; gap:.75rem; align-items:flex-start; }
.blog-populer-no{
  flex:0 0 auto; display:grid; place-items:center;
  width:1.9rem; height:1.9rem; border-radius:.5rem;
  background:var(--bg-3); color:var(--gold-700); font-weight:700; font-size:1rem;
}
.blog-populer-link{
  color:var(--text); font-size:1rem; font-weight:600; line-height:1.45;
  text-decoration:none;
}
.blog-populer-link:hover{ color:var(--gold-700); text-decoration:underline; }
.blog-populer-link:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; border-radius:.25rem; }

.blog-kenar-liste{ display:flex; flex-direction:column; gap:.15rem; }
.blog-kenar-link{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .35rem;
  border-radius:.5rem; color:var(--text); font-size:1rem; min-height:2.5rem;
}
.blog-kenar-link:hover{ background:var(--bg-3); color:var(--gold-700); }
.blog-kenar-link:focus-visible{ outline:3px solid var(--gold-700); outline-offset:-1px; }
.blog-kenar-nokta{ flex:0 0 auto; width:.7rem; height:.7rem; border-radius:999px; }
.blog-kenar-sayi{ margin-left:auto; color:var(--text-muted); font-size:1rem; font-weight:600; }

/* Etkin kategori — çip şeridi kalkınca durumu gösterme işi bu listeye geçti.
   Renk TEK sinyal değil: ph-check ikonu (nokta yerine) ve kalın yazı da var
   (1.4.1). Zemin --bg-3, yazı --text: açık temada 12,73:1, koyuda 14,18:1. */
.blog-kenar-link.etkin{ background:var(--bg-3); color:var(--text); font-weight:700; }
.blog-kenar-link.etkin .blog-kenar-sayi{ color:var(--text); }
/* Tik, yerini aldığı noktayla AYNI genişlikte kutuda duruyor (.7rem).
   Serbest bırakılsaydı ~1em'lik glif noktadan geniş olur ve ETKİN satırın
   yazısı diğerlerine göre birkaç piksel sağa kayardı. */
.blog-kenar-tik{
  flex:0 0 .7rem; width:.7rem; font-size:.95rem; line-height:1;
  text-align:center; color:var(--gold-700);
}

/* Etiket bulutu — YALNIZCA yazı sayfasının sonunda (blog_yazi.php).
   Kenar çubuğundaki kopya 2026-09-05'te kaldırıldı.
   Punto POPÜLERLİĞE GÖRE DEĞİŞMEZ. Değişseydi en az okunan
   etiket 1rem altına düşerdi (CLAUDE.md §1). Ağırlık farkı sayı rozetinde. */
.blog-etiket-bulut{ display:flex; flex-wrap:wrap; gap:.5rem; }
/* KOYU TEMA SINIRI. Etiket rengi yalnızca BEYAZA karşı doğrulanıyor (rozet
   yazısı beyaz olduğu için doğru ölçüt bu). Ama koyu temada kart zemini
   #2e2e2e ve koyu bir etiket rengi rozetin kenarını karta karıştırıyor —
   yan yana 18 rozetin durduğu bulutta bu göze batıyor.
   Yazının okunurluğu etkilenmiyor (beyaz metin hâlâ >=4,5:1), bu yüzden bu bir
   1.4.11 ihlali değil; yalnızca sınırı geri getiren görsel bir düzeltme.
   box-shadow kullanılıyor, border DEĞİL: kenarlık rozeti 2px büyütür ve
   kartlardaki ölçüyle uyumsuz hale getirirdi. */
html.dark .blog-etiket-bulut .blog-rozet{ box-shadow:inset 0 0 0 1px rgba(244,249,242,.32); }
/* .blog-etiket ve .blog-etiket-sayi KALDIRILDI: kenar çubuğundaki düz çipler
   de renkli rozete (.blog-rozet) döndü, kuralların kullanıcısı kalmadı.
   .blog-etiket-bulut (kap) duruyor — hem kenar çubuğu hem yazı sonu kullanıyor. */

.blog-mini-liste{ display:flex; flex-direction:column; gap:.75rem; }
.blog-mini{ display:flex; gap:.75rem; align-items:center; color:var(--text); border-radius:.6rem; padding:.25rem; }
.blog-mini:hover{ background:var(--bg-3); }
.blog-mini:focus-visible{ outline:3px solid var(--gold-700); outline-offset:-1px; }
.blog-mini img{ flex:0 0 auto; width:3.25rem; height:4.3rem; object-fit:cover; border-radius:.4rem; background:var(--bg-3); }
.blog-mini-ad{ display:block; font-size:1rem; font-weight:600; line-height:1.35; }
.blog-mini-alt{ display:block; font-size:1rem; color:var(--text-muted); }

/* ---------- Sayfalayıcı ---------- */
.blog-sayfalayici{ margin-top:2.5rem; }
/* Sonsuz kaydırma devraldığında numaralı sayfalayıcı gizlenir; hata olursa
   geri gelir. Genel kural (html.js.infinite-failed .numbered-pager) display:flex
   veriyor — o, ürün listesinin <nav>'ı için doğru ama blogda sayfalayıcının
   içindeki <ol> zaten flex; nav'ın kendisi blok kalmalı. İki sınıflı seçici
   genel kuraldan daha özgül olduğu için kazanıyor. */
html.js.infinite-failed .blog-sayfalayici.numbered-pager{ display:block; }
.blog-sayfa-liste{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem; }
.blog-sayfa-btn{
  display:inline-grid; place-items:center; min-width:2.75rem; height:2.75rem;
  padding:0 .6rem; border-radius:.6rem;
  border:1px solid var(--field-border); color:var(--text);
  font-size:1rem; font-weight:600;
  transition:background-color .15s ease, color .15s ease;
}
.blog-sayfa-btn:hover{ background:var(--bg-3); color:var(--gold-700); }
.blog-sayfa-btn:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; }
/* Geçerli sayfa: aria-current="page" var; renk yanında dolgu ve kalınlık da
   değişiyor, renk tek sinyal değil (1.4.1). */
.blog-sayfa-btn.etkin{ background:var(--ink); border-color:var(--ink); color:var(--cream); font-weight:700; }
.blog-sayfa-btn.pasif{ opacity:.4; }
.blog-sayfa-bosluk{ padding:0 .35rem; color:var(--text-muted); font-size:1rem; }

/* ==========================================================================
   TEKİL YAZI
   ========================================================================== */

/* Okuma ilerlemesi — tamamen dekoratif, aria-hidden. transform:scaleX
   kullanılıyor: düzen yeniden hesaplanmıyor, yalnızca birleştirme katmanı. */
.blog-ilerleme{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:transparent; pointer-events:none;
}
.blog-ilerleme-dolgu{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--gold); will-change:transform;
}

.blog-yazi-hero .blog-yazi-baslik{ margin-top:.25rem; }
.blog-yazi-spot{
  margin:1.15rem auto 0; max-width:44rem;
  font-size:1.15rem; line-height:1.7; color:rgba(244,249,242,.85);
}
.blog-yazi-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.25rem; margin-top:1.5rem; font-size:1rem; color:rgba(244,249,242,.8);
}
.blog-meta-oge{ display:inline-flex; align-items:center; gap:.45rem; }
.blog-meta-oge i{ color:var(--gold); }
.blog-okuyan-sayi{ color:var(--cream); font-weight:700; }
/* Canlı nokta: yeşil daire + yumuşak nabız. prefers-reduced-motion altında
   animasyon duruyor ama nokta görünür kalıyor. */
.blog-canli-nokta{
  position:relative; display:inline-block; width:.6rem; height:.6rem;
  border-radius:999px; background:#5fd68a; flex:0 0 auto;
}
.blog-canli-nokta::after{
  content:''; position:absolute; inset:0; border-radius:999px;
  background:#5fd68a; opacity:.6; animation:blog-nabiz 2s ease-out infinite;
}
@keyframes blog-nabiz{
  0%{ transform:scale(1); opacity:.6; }
  70%{ transform:scale(2.6); opacity:0; }
  100%{ transform:scale(2.6); opacity:0; }
}

/* Sütunlar: içindekiler · yazı · yan kutular */
.blog-yazi-duzen{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:1024px){
  .blog-yazi-duzen{ grid-template-columns:16rem minmax(0,1fr); }
  .blog-yan{ grid-column:1 / -1; }
}
@media (min-width:1400px){
  .blog-yazi-duzen{ grid-template-columns:16rem minmax(0,1fr) 19rem; }
  .blog-yan{ grid-column:auto; }
}

/* ---------- İçindekiler ---------- */
@media (min-width:1024px){
  .blog-toc-sarmal{
    position:sticky; top:7rem; max-height:calc(100vh - 9rem); overflow-y:auto; padding-right:.25rem;
  }
}
.blog-toc{
  background:var(--card); border:1px solid var(--field-border);
  border-radius:1rem; padding:1.15rem;
}
.blog-toc-baslik{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:1.05rem; color:var(--text); margin-bottom:.75rem;
}
.blog-toc-baslik i{ color:var(--gold-700); }
.blog-toc-liste{ display:flex; flex-direction:column; gap:.1rem; }
.blog-toc-s3{ padding-left:1rem; }
.blog-toc-link{
  display:block; padding:.45rem .6rem; border-radius:.45rem;
  border-left:3px solid transparent;
  color:var(--text-muted); font-size:1rem; line-height:1.4;
  text-decoration:none; min-height:2.25rem;
}
.blog-toc-link:hover{ background:var(--bg-3); color:var(--text); }
.blog-toc-link:focus-visible{ outline:3px solid var(--gold-700); outline-offset:-1px; }
/* Okunan bölüm: aria-current="location" ile bildiriliyor. Renk TEK sinyal
   değil — sol kenar çizgisi ve kalınlık da değişiyor (1.4.1). */
.blog-toc-link.etkin{
  border-left-color:var(--gold-700); background:var(--bg-3);
  color:var(--text); font-weight:700;
}

/* ---------- Yazı gövdesi ---------- */
.blog-yazi-govde{ max-width:46rem; color:var(--text); font-size:1.0625rem; line-height:1.8; }
.blog-yazi-govde > p{ margin-bottom:1.35rem; }
.blog-yazi-govde > p:first-of-type{ font-size:1.15rem; line-height:1.75; }
.blog-h2, .blog-h3, .blog-h4{
  font-family:Montserrat, system-ui, sans-serif; font-weight:700;
  letter-spacing:-.015em; color:var(--text);
  /* Sabit header + çapa bağlantısı: hedef başlık şeridin altında kalmasın (2.4.11) */
  scroll-margin-top:7rem;
}
.blog-h2{ font-size:1.65rem; line-height:1.3; margin:2.75rem 0 1rem; }
.blog-h3{ font-size:1.3rem; line-height:1.35; margin:2rem 0 .75rem; }
.blog-h4{ font-size:1.1rem; margin:1.5rem 0 .6rem; }
/* Başlıkların üstünde ince bir ayraç: bölümler gözle ayrılsın */
.blog-h2::before{
  content:''; display:block; width:2.5rem; height:3px; border-radius:2px;
  background:var(--gold-700); margin-bottom:.85rem;
}
.blog-liste{ margin:0 0 1.35rem; padding-left:1.35rem; }
.blog-liste li{ margin-bottom:.5rem; }
ul.blog-liste{ list-style:disc; }
ol.blog-liste{ list-style:decimal; }
ul.blog-liste li::marker{ color:var(--gold-700); }
ol.blog-liste li::marker{ color:var(--gold-700); font-weight:700; }
.blog-alinti{
  margin:2rem 0; padding:1.15rem 1.35rem;
  border-left:4px solid var(--gold-700); border-radius:0 .75rem .75rem 0;
  background:var(--bg-3); color:var(--text); font-size:1.1rem; line-height:1.7;
}
.blog-ayrac{ margin:2.5rem 0; border:0; border-top:1px solid var(--field-border); }
.blog-kod{
  padding:.1rem .4rem; border-radius:.3rem;
  background:var(--bg-3); border:1px solid var(--field-border);
  font-family:ui-monospace, monospace; font-size:1rem;
}
/* Gövde bağlantıları ALTI ÇİZİLİ olmak zorunda: metin #2e2e2e, bağlantı
   #316F39 ve ikisi arasındaki kontrast 3:1'in altında — renk tek başına
   bağlantıyı belli edemez (1.4.1). */
.blog-link{
  color:var(--gold-700); text-decoration:underline;
  text-underline-offset:.18em; text-decoration-thickness:.08em;
}
.blog-link:hover{ text-decoration-thickness:.14em; }
.blog-link:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; border-radius:.2rem; }
.blog-link-ikon{ font-size:.9em; margin-left:.15em; vertical-align:baseline; }

.blog-figur{ margin:2.25rem 0; }
.blog-figur img{
  display:block; width:100%; height:auto; border-radius:1rem;
  border:1px solid var(--field-border); background:var(--bg-3);
}
.blog-figur figcaption{
  margin-top:.65rem; color:var(--text-muted); font-size:1rem; line-height:1.5;
  padding-left:.85rem; border-left:3px solid var(--gold-700);
}
.blog-figur-orta img{ aspect-ratio:16/9; object-fit:cover; }
.blog-satir-gorsel{ display:inline-block; max-width:100%; height:auto; border-radius:.5rem; }

/* Tablo yatayda taşabilir: kaydırma alanı odaklanabilir ve adlandırılmış
   (2.1.1). Gövde asla yatay kaymaz. Hücrelerde SABİT YÜKSEKLİK YOK:
   line-height:1.5 uygulandığında kırpılmasın (1.4.12). */
.blog-tablo-kaydir{ overflow-x:auto; margin:2rem 0; border:1px solid var(--field-border); border-radius:.85rem; }
.blog-tablo-kaydir:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; }
.blog-tablo{ width:100%; border-collapse:collapse; font-size:1rem; }
.blog-tablo th, .blog-tablo td{
  padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--field-border);
}
.blog-tablo thead th{ background:var(--bg-3); font-weight:700; color:var(--text); }
.blog-tablo tbody th{ font-weight:600; color:var(--text); }
.blog-tablo tbody tr:last-child th, .blog-tablo tbody tr:last-child td{ border-bottom:0; }

.blog-yazi-etiketler{ margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--field-border); }
.blog-paylas{ margin-top:2rem; }
.blog-paylas-liste{ display:flex; flex-wrap:wrap; gap:.6rem; }
/* 2,75rem = 44px, 2.5.8'in 24px eşiğini fazlasıyla geçer */
.blog-paylas-btn{
  display:grid; place-items:center; width:2.75rem; height:2.75rem;
  border-radius:.7rem; border:1px solid var(--field-border);
  color:var(--text); font-size:1.25rem;
  transition:background-color .15s ease, color .15s ease;
}
/* Aynı kontrast tuzağı (yarı saydam zemin): sabit #3d8348, beyaz ikonla 4,63:1. */
.blog-paylas-btn:hover{ background:#3d8348; border-color:#3d8348; color:#ffffff; }
.blog-paylas-btn:focus-visible{ outline:3px solid var(--gold-700); outline-offset:2px; }
.blog-gizli-adres{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.blog-sss-bolum{ padding:3.5rem 0; background:var(--bg-2); }
.blog-sss{ display:flex; flex-direction:column; gap:.75rem; }
.blog-ilgili{ padding:3.5rem 0 4.5rem; background:var(--bg); }

/* ---------- Alt bilgideki blog bağlantıları ---------- */
.footer-blog-link{ display:block; line-height:1.45; }

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce){
  /* Nabız tamamen durur; nokta görünür kalır — bilgi kaybı yok. */
  .blog-canli-nokta::after{ animation:none; opacity:0; }
  .blog-kart:hover, .blog-rozet-link:hover{ transform:none; }
  .blog-kart:hover .blog-kart-medya img,
  .blog-manset:hover .blog-manset-medya img{ transform:none; }
  .blog-kart-git i{ transition:none; }
  /* İlerleme çubuğu konum bilgisi taşır: geçiş süresi sıfırlanır ama
     ölçek güncellemesi çalışmaya devam eder. */
  .blog-ilerleme-dolgu{ transition:none; }
}

/* ==========================================================================
   İÇERİĞE GEÇ (skip link) — WCAG 2.4.1
   ==========================================================================

   Belgedeki ilk odaklanabilir öge (bkz. includes/header.php). Görünmez durur,
   Sekme ile odaklanınca sol üstte belirir.

   NEDEN ELLE YAZILDI: Tailwind'in `focus:not-sr-only` varyantı tw.css
   derlemesinde YOK ve eklemek yeniden derleme ister; admin panelinde de aynı
   sebeple .skip-admin elle yazılmıştı.

   GİZLEME YÖNTEMİ clip-path, `left:-9999px` DEĞİL: 9999px'lik konumlandırma
   bazı tarayıcılarda belgeyi yatayda genişletip kaydırma çubuğu doğuruyor.
   clip yöntemi ögeyi ölçüsüz bırakır ama odaklanabilir tutar.

   ÖLÇÜ SABİT DEĞİL: genişlik ve yükseklik içeriğe göre. Sabit yükseklik
   verilseydi `line-height:1.5` uygulandığında (1.4.12) ya da 400% yakınlaştırmada
   (1.4.10) metin kutudan taşardı. max-width ile de uzun etiket sarmalanıyor.

   z-index 90 — BİLİNÇLİ olarak perdenin (.page-veil, 100) ALTINDA, ama arama
   katmanının (70), mobil çekmecenin (61) ve header'ın (50) ÜSTÜNDE. Header'ın
   altında kalsaydı "görünür" sayılmazdı (2.4.11); perdenin üstüne çıksaydı
   sayfa geçişi sırasında kapanan perdenin önünde asılı kalırdı.

   RENK: zemin --bg-2 (#ffffff / #2e2e2e), yazı --text — iki temada da yüksek
   kontrast. Kenarlık --field-border, kutunun sınırı arkadaki içerikten ayrılsın
   diye (1.4.11). Odak halkası --gold-700: açık temada #316F39 (beyaz üzerinde
   6,06:1), koyu temada #accb4c. --gold (#accb4c) açık zeminde 1,73:1 verdiği
   için halka olarak KULLANILAMAZ.
   ========================================================================== */
.skip-link{
  position:absolute; width:1px; height:1px; padding:0; margin:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:.75rem; left:.75rem; z-index:90;
  width:auto; height:auto; clip:auto; clip-path:none; overflow:visible;
  display:inline-flex; align-items:center;
  min-height:44px; padding:.6rem 1.1rem; max-width:calc(100vw - 1.5rem);
  white-space:normal;
  background:var(--card); color:var(--text);
  border:1px solid var(--field-border); border-radius:.6rem;
  font-size:1rem; font-weight:700; line-height:1.5; text-decoration:none;
  box-shadow:0 12px 32px -14px rgba(38,38,38,.55);
  outline:3px solid var(--gold-700); outline-offset:2px;
}
/* Zorlanmis renk kipinde (Windows Yuksek Kontrast) background atilir; kenarlik
   olmadan kutu arkadaki icerikten ayrilmiyordu. */
@media (forced-colors: active){
  .skip-link:focus{ border:1px solid ButtonText; }
}

/* ---- Hedef: <main id="icerik" tabindex="-1"> ----
   ODAK HALKASI SADECE KLAVYEDE. tabindex="-1" tasiyan bir oge FARE
   TIKLAMASIYLA DA odaklanir; duz `:focus` kurali birakilsaydi, gövde metnine
   yapilan her tiklamada sayfanin tamamini saran bir halka yanip sonerdi.
   `outline:none` yalnizca :focus icin; klavye odagi :focus-visible ile
   gorunur kaliyor, yani 2.4.7 korunuyor.
   outline-offset NEGATIF: halka iceriden ciziliyor, sabit header kirpamiyor. */
#icerik{ scroll-margin-top:7rem; }
#icerik:focus{ outline:none; }
#icerik:focus-visible{ outline:3px solid var(--gold-700); outline-offset:-3px; }