/* ⚠️ `hidden` NİTELİĞİ HER ŞEYDEN ÜSTÜN.
   Tarayıcının kendi kuralı `[hidden]{display:none}` en zayıf seviyededir;
   bir sınıfa `display:flex` yazınca SESSİZCE eziliyor. Element JS tarafında
   "gizli" görünür (`el.hidden === true`) ama ekranda durur.

   ÖLÇÜLDÜ (2026-07-29, tarayıcıda): `#besinSerit` `hidden` iken bile
   `display:flex` ve 147px yer kaplıyordu — "Besin analizi" kutusu ilk
   değerlendirmeden ÖNCE boş boş duruyordu. Aynı tuzak yeni bayat şeridinde
   de anında ısırdı. Bu yüzden kural genel ve `!important`:
   `hidden` demek "bu element yok" demektir, pazarlık payı yok. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #efe7e2;

  /* ═══ AGIRLIK SOZLUGU (2026-08-11, Fable'in 1. adimi) ═══════════════════
     ⛔ HAM `font-weight` SAYISI YAZMA. Yalniz bu iki token kullanilir.

     NEDEN: bu depoda ON ayri agirlik yaziliydi (400·500·600·620·640·650·
     700·750·800·850) ama YALNIZ IKI YUZ barindiriliyor (ui/fonts/ altinda
     her aile icin 400 ve 600). OLCULDU: 162 kullanimin 114'u (%70) istedigi
     yuze ULASMIYORDU — 500 -> 400, 620..850 -> 600 diye sessizce dusuyordu.
     Yani yazili merdivende on basamak vardi, ekranda IKI.
     Fable: "on basamaklik talep hayaldi; iki basamak sahada kendini
     kanitladi — %70'i aylardir yanlisti ve DIS INCELEME DAHIL kimse fark
     etmedi." (Inceleme 18 puntoyu, 19 golgeyi, 14 yaricapi yakalamisti.)

     ⛔ 700/800 DOSYASI EKLENMEDI: 400↔600 advance farki %5,4; 600↔700 bunun
        kabaca yarisi olurdu ve deponun kendi kayitli esigiyle ("1,15x kademe
        olarak okunmaz") gun isiginda telefonda AYIRT EDILMEZ.
     ⛔ DEGISKEN FONT DE HAYIR: Plex Mono'nun resmi degisken surumu yok, ve
        asil tehlike 620/640/650 turu buyu sayilarina SONSUZ COZUNURLUK
        vermesi — "arada bant yok" kuralinin tipografi ikizi bu iki basamakli
        ucurumdur.
     → Ucuncu kademe gerektiginde AGIRLIKTA degil MUREKKEPTE kurulur:
       `--murekkep-orta` (yem adi orada). */
  --agirlik-metin: 400;
  --agirlik-vurgu: 600;

  /* ⚠️ SAHTE KALIN KAPALI. 600 dosyasi inmezse tarayici 400'u smearleyip
     "kalin" uydurabiliyor; o hem cirkin hem de tabular hizayi bozuyor.
     Inmezse ince kalsin — yanlis kalin gorunmesin. */
  font-synthesis-weight: none;
  --card: #fdfbf9;
  --card-head: #f7f1ec;
  --input-bg: #fdfbf9;
  --surface-soft: #ede4de;
  --ink: #26211c;
  /* ⚠️ Ölçüldü (2026-07-29, Fable): #64776c beyazda 4,78:1 ile geçiyor ama
     RENKLİ zeminlerde düşüyor — yeşil kutuda 4,26:1, sekme şeridinde
     4,22:1, kadran mikro-yazılarında 3,99:1. Eşik 4,5:1.
     ⚠️ Bu değişkenin İKİ TANIMI var: styles.css'te de duruyor ama bu
     dosya SONRA yükleniyor, kazanan burası. İlk denemede yanlış
     dosyayı düzelttim ve ekranda hiçbir şey değişmedi. */
  --muted: #685e56;
  /* ⭐ ORTA MUREKKEP (2026-08-11, Fable'in onerisi, Gokhan "C"yi secti).
     Bugune kadar IKI kademe vardi ve ARASI BOSTU:
       --ink   #26211c   kartta 15,45:1   sayi · baslik · kg
       (bosluk)
       --muted #685e56   kartta  6,12:1   etiket · birim · dipnot
     Ucuncu kademe AGIRLIKTA kurulamiyordu: depoda yalniz 400 ve 600 yuzu var,
     600 ile 700 ayni yuzu ciziyor (olculdu, canvas measureText). Fable:
     "ucuncu kademe agirlikta degil MUREKKEP PARLAKLIGINDA kurulur."
     ⛔ Hukum butcesine DOKUNMUYOR: bu bir NOTR GRI, doygunlugu sifir.
        "Doygunluk hukmun tekelidir" kurali ayakta.
     ⛔ --metin-2 / #64776c KULLANILMADI (Fable'in acik uyarisi): o yesilimsi
        bir gri, renkli zeminlerde dustugu olculmus ve hukum yesilinin
        ailesine komsu. Orta murekkep kagidin KENDI sicak ailesinden.
     Kapi: en acik zeminde >= 7:1. Olculdu: kartta 10,80 · zeminde 9,13 ✅ */
  --murekkep-orta: #423a32;
  --accent: #5e3c1f;
  --line: #e3d7cf;
  /* ── BOSLUK OLCEGI (2026-08-11) ────────────────────────────────────
     OLCULDU: ekranda 13 ayri padding vardi, kutlesi 5-9px'te; 12px ustu
     TOPLAM 9 oge. Yani nefes yoktu ve olcek de yoktu.
     ⭐ Bu tokenler tek baslarina HICBIR SEYI DEGISTIRMEZ — once sozluk
     kurulur, tasima ayri commit'lerde yapilir. */
  --bosluk-1: 4px;
  --bosluk-2: 8px;
  --bosluk-3: 12px;
  --bosluk-4: 18px;
  --bosluk-5: 28px;

  --oyuk-dolgu: transparent;   /* ⭐ DUZ RENK DEGIL: paneller arasi bosluk
                                  zaten --bg; saydam olunca sekiz panel ve
                                  aralari TEK SUREKLI ALAN olur. Duz renkle
                                  yazilsa orada 1,06'lik bir DIKIS olusurdu. */
  --oyuk-kenar: transparent;
  --oyuk-cizgi: #d6c8b9;       /* oyukta h2 ayraci: bg'ye 1,359 = kartta
                                  olan 1,348'in birebir karsiligi (olculdu) */
  --brand: #2e7d5b;
  --brand-d: #1f5e42;
  --eylem: #302821;      /* birincil EYLEM: parlaklik ucu, ton DEGIL */
  --eylem-metin: #ffffff;
  --focus: rgba(46, 125, 91, 0.2);
  --green: #2e9e5b;
  --green-bg: #e6f6eb;
  --green-ink: #216b41;
  --yellow: #c08300;
  --yellow-bg: #fbefd6;
  --yellow-ink: #855b00;
  --red: #d24444;
  --red-bg: #fbe6e6;
  --red-ink: #8f2b2b;
  --blue: #3170b3;
  --blue-bg: #e6eff9;
  --blue-ink: #1e4d80;
  --hero-1: #153f32;
  --hero-2: #245e48;
  --shadow: 0 1px 2px rgba(24, 44, 34, 0.06),
    0 8px 24px rgba(24, 44, 34, 0.06);
  --shadow-pop: 0 18px 38px rgba(24, 44, 34, 0.16);

  /* SürüNabzı'nın Türkçe değişkenleri aynı palete bağlanır. */
  --zemin: var(--bg);
  --kart: var(--surface-soft);
  --yuzey: var(--card);
  --metin: var(--ink);
  --metin-2: #64776c;
  --metin-3: #819087;
  --cizgi: var(--line);
  --vurgu: #2e7d5b;
  --vurgu-zemin: #e6f6eb;

  /* ⚠️ RENKLER `var()` İLE BAĞLI, ELLE KOPYALANMAZ — sebebi ölçüldü
     (2026-07-31). Eskiden buraya değerler elle yazılıydı ve KOYU TEMADA
     karşılıkları hiç tanımlanmamıştı: sekiz değişken (kırmızı/sarı/yeşil/
     mavi + zeminleri) koyu temada AÇIK TEMA DEĞERİNDE kalıyordu.

     Görünen sonuç: koyu kartın (#161d19) üstünde açık pembe (#fbe6e6) bir
     düğme — kontrast oranı 14,35. Metin okunuyordu, o yüzden kimse
     "bozuk" demedi; ama koyu sayfada göz alan bir lekeydi.
     Etkilenenler: `.btn-kadran-bag` (BÜTÜNLÜK'ün kadran bağı, aynı gün
     canlıya gitmişti) ve SürüNabzı'nın `.kpi-yesil` / `.kpi-kirmizi`
     kutuları.

     `var()` ile bağlanınca ikisi bir daha AYRIŞAMAZ. Değerler zaten
     birebir aynıydı; bu satırlar görünümü değiştirmez. */
  --kirmizi-zemin: var(--red-bg);
  --kirmizi: var(--red-ink);
  --sari-zemin: var(--yellow-bg);
  --sari: var(--yellow-ink);
  --yesil-zemin: var(--green-bg);
  --yesil: var(--green-ink);
  --mavi-zemin: var(--blue-bg);
  --mavi: var(--blue-ink);
}

:root[data-theme="dark"] {
  --bg: #100c0a;
  --card: #1e1915;
  --card-head: #221c17;
  --input-bg: #261e19;
  --surface-soft: #291f18;
  --ink: #efebe7;
  --muted: #a79c93;
  /* Orta murekkep — koyu karsiligi. Gerekce acik temadaki notta.
     ⚠️ Deger UYDURULMADI: acik temada ORTA, ink ile muted arasinda kontrast
        olarak %49,8 noktada duruyor. Ayni oran koyuda aranip bulundu
        (temanin kendi ink+muted karisimi, %44) — boylece sicak aile korunuyor
        ve iki temada AYNI ALGISAL KADEME cikiyor.
     Olculdu: kartta 10,63 (hedef 10,61) · zeminde 11,88 ✅ */
  --murekkep-orta: #d0c9c2;
  --accent: #d6a274;
  --line: #332a23;
  --oyuk-dolgu: transparent;
  --oyuk-kenar: transparent;
  --oyuk-cizgi: var(--line);   /* koyuda ayrac zaten GUCLENIYOR (1,257→1,375) */
  --brand: #287856;   /* beyaz metin 4,25:1 -> 5,4:1 (2026-07-29) */
  --brand-d: #216f4c;
  --eylem: #eae6e2;      /* koyu temada parlaklik ucu TERS YONE gider */
  --eylem-metin: #121a16;
  --focus: rgba(96, 210, 150, 0.26);
  --green: #4fc07e;
  --green-bg: rgba(79, 192, 126, 0.15);
  --green-ink: #7fdca3;
  --yellow: #e0a83e;
  --yellow-bg: rgba(224, 168, 62, 0.15);
  --yellow-ink: #f0c274;
  --red: #e56a6a;
  --red-bg: rgba(229, 106, 106, 0.16);
  --red-ink: #f0a0a0;
  --blue: #5a9bd8;
  --blue-bg: rgba(90, 155, 216, 0.16);
  --blue-ink: #9cc4ec;
  --hero-1: #0e241c;
  --hero-2: #1f3a2c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-pop: 0 20px 44px rgba(0, 0, 0, 0.55);

  --zemin: var(--bg);
  --kart: var(--surface-soft);
  --yuzey: var(--card);
  --metin: var(--ink);
  --metin-2: #93a79b;
  --metin-3: #718078;
  --cizgi: var(--line);
  --vurgu: #74d6a5;
  --vurgu-zemin: rgba(79, 192, 126, 0.15);
  /* ⚠️ BU SEKİZİ EKSİKTİ — koyu temada açık tema rengi kalıyordu.
     Ayrıntı ve ölçüm: `:root` bloğundaki not. */
  --kirmizi-zemin: var(--red-bg);
  --kirmizi: var(--red-ink);
  --sari-zemin: var(--yellow-bg);
  --sari: var(--yellow-ink);
  --yesil-zemin: var(--green-bg);
  --yesil: var(--green-ink);
  --mavi-zemin: var(--blue-bg);
  --mavi: var(--blue-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100c0a;
    --card: #1e1915;
    --card-head: #221c17;
    --input-bg: #261e19;
    --surface-soft: #291f18;
    --ink: #efebe7;
    --muted: #a79c93;
  /* Orta murekkep — koyu karsiligi. Gerekce acik temadaki notta.
     ⚠️ Deger UYDURULMADI: acik temada ORTA, ink ile muted arasinda kontrast
        olarak %49,8 noktada duruyor. Ayni oran koyuda aranip bulundu
        (temanin kendi ink+muted karisimi, %44) — boylece sicak aile korunuyor
        ve iki temada AYNI ALGISAL KADEME cikiyor.
     Olculdu: kartta 10,63 (hedef 10,61) · zeminde 11,88 ✅ */
  --murekkep-orta: #d0c9c2;
    --accent: #d6a274;
    --line: #332a23;
    --oyuk-dolgu: transparent;
    --oyuk-kenar: transparent;
    --oyuk-cizgi: var(--line);
    --brand: #287856;   /* beyaz metin 4,25:1 -> 5,4:1 (2026-07-29) */
    --brand-d: #216f4c;
    --eylem: #eae6e2;
    --eylem-metin: #121a16;
    --focus: rgba(96, 210, 150, 0.26);
    --green: #4fc07e;
    --green-bg: rgba(79, 192, 126, 0.15);
    --green-ink: #7fdca3;
    --yellow: #e0a83e;
    --yellow-bg: rgba(224, 168, 62, 0.15);
    --yellow-ink: #f0c274;
    --red: #e56a6a;
    --red-bg: rgba(229, 106, 106, 0.16);
    --red-ink: #f0a0a0;
    --blue: #5a9bd8;
    --blue-bg: rgba(90, 155, 216, 0.16);
    --blue-ink: #9cc4ec;
    --hero-1: #0e241c;
    --hero-2: #1f3a2c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 10px 28px rgba(0, 0, 0, 0.32);
    --shadow-pop: 0 20px 44px rgba(0, 0, 0, 0.55);

    --zemin: var(--bg);
    --kart: var(--surface-soft);
    --yuzey: var(--card);
    --metin: var(--ink);
    --metin-2: #93a79b;
    --metin-3: #718078;
    --cizgi: var(--line);
    --vurgu: #74d6a5;
    --vurgu-zemin: rgba(79, 192, 126, 0.15);
    /* ⚠️ Sistem koyu temasında da aynı sekiz değişken eksikti — bu blok
       `:root[data-theme="dark"]`in aynası olmak zorunda. Ayrıntı: `:root`. */
    --kirmizi-zemin: var(--red-bg);
    --kirmizi: var(--red-ink);
    --sari-zemin: var(--yellow-bg);
    --sari: var(--yellow-ink);
    --yesil-zemin: var(--green-bg);
    --yesil: var(--green-ink);
    --mavi-zemin: var(--blue-bg);
    --mavi: var(--blue-ink);
  }
}

/* ⛔ DEKORATİF GRADYANLAR KALDIRILDI (2026-08-11) — ölçüldü, kayıtlı kuralı
   çiğniyorlardı. Eski hâli:
     radial-gradient(circle at 10% 6%,  rgba(46,158,91,.1),  transparent 28rem)
     radial-gradient(circle at 92% 16%, rgba(224,168,62,.1), transparent 24rem)

   ⭐ Yeşil gradyanın rengi rgb(46,158,91) = #2e9e5b = `--green` — yani BİREBİR
   "iyi durum" rengi. Sayfanın sol üst çeyreği (448px yarıçap, "Rasyonu Kur"
   panelinin tam üstü) ortada hiçbir hüküm yokken hüküm rengiyle yıkanıyordu.

   ÖLÇÜLDÜ — sıcak kâğıdın tonunu en görünür yerde geri çeviriyordu:
     açık tema  kâğıt  32°  →  sol üstte  86°   (+54°)
     koyu tema  kâğıt  30°  →  sol üstte 114°   (+84°)
   (sağ üstteki amber zararsızdı: +4°/+5° — ama o da dekoratif, o da kalktı.)

   KAYITLI KURAL — bekleme_odasi/arayuz_tasarim_promptu.md:62-64:
     "RENK BÜTÇESİNİ DURUM İÇİN SAKLA. Yeşil/sarı/kırmızı YALNIZ durum
      anlatsın. Dekoratif renk ve dekoratif vurgu kullanma; her şey parlarsa
      hiçbir şey parlamaz."
   Karşı gerekçe ARANDI, YOK: `git log -S` tek sonuç veriyor — a95a788
   "Codex'in görsel sürümünü devral", yani toplu MİRAS, savunulmuş karar değil.
   (19 gölgenin de aynı commit'ten geldiği ölçüldü.)
   ⚠️ Kural üç sayfayı birden kapsıyordu: advisor · hub · herd-page. */

.topbar,
.ust-bar {
  background: rgba(21, 63, 50, 0.96);
  box-shadow: 0 8px 28px rgba(9, 36, 27, 0.18);
  backdrop-filter: blur(14px);
}

.topbar {
  min-height: 70px;
  gap: 12px;

  /* ⭐ BAR ICERIGI SAYFAYLA HIZALI (2026-08-11, Gokhan: "sola dayasak daha
     guzel gorunecek sanki").
     ⚠️ Sorun "ortalanmis olmasi" DEGILDI — YANLIS SUTUNA ortalanmis olmasi.
     OLCULDU (2000px ekran):
       .topbar icerik sol kenari  380px   (1240px'lik sutuna gore)
       .wrap   icerik sol kenari   18px   (2040px'lik sutuna gore)
     Yani bar, ARTIK VAR OLMAYAN bir sutuna capaliydi: icerik sutunu
     1180 → 1276 → 1560 → 2040 diye genislerken (yukaridaki not) barin
     capasi 1240'ta kalmis. Kagit bar bunu gorunur yapti; koyu barda
     zemin tam genislik oldugu icin kaymayi yalniz logo ele veriyordu.
     Formul .wrap'in KENDISI: max-width 2040 + 18px ic bosluk. */
  padding: 12px max(18px, calc((100vw - 2040px) / 2 + 18px));

  /* ⭐ ALT KOSELER YUMUSAK (2026-08-11, Gokhan: "o bar haricinde her sey
     yumusak koseli, sadece o tam dikdortgen").
     ⛔ Dort kosesini birden yuvarlamak YANLIS olurdu: bar `position:sticky;
        top:0` — UST kenari EKRANIN kenarina yapisik, orada kose OLMAMASI
        dogru. Sorun kare olmasi degil, ALT kenarinin kagida donmemesi.
     Deger 16px: ekrandaki kart yaricapiyla ayni (program-theme.css:406).
     Baskin yaricaplar olculdu: 10px (20 kez) · 12px (17) · 8px (12) ·
     14px (10) · 16px (6). 16 secildi cunku bar bir KART degil, kartlarin
     ustunde duran daha buyuk bir yuzey — hero 22px, kartlar 16px, bar 16px.
     ⚠️ Icerik barin ALTINDAN kayiyor; yuvarlak koselerde kagit gorunur,
        bu kasitli — "bar kagidin uzerinde duruyor" hissi oradan gelir. */
  border-radius: 0 0 16px 16px;
}

.homeLink,
.reportBtn,
.themeToggle,
.modeToggle,
.ust-dugme,
.ust-tema {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.11);
}

.logo,
.hub-head .mark {
  background: rgba(255, 255, 255, 0.15);
}

/* Çiftlik Paneli */
.hub-head {
  margin-bottom: 32px;
}

.hub-head .mark {
  width: 66px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--hero-1), var(--hero-2));
  box-shadow: 0 14px 30px rgba(21, 63, 50, 0.18);
}

.hub-head h1 {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.035em;
}

.hub-cards {
  gap: 18px;
}

.hub-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  border-color: rgba(46, 125, 91, 0.13);
  border-radius: 22px;
  padding: 28px 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 242, 0.92));
  box-shadow: var(--shadow);
}

.hub-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 232, 0.92));
}

.hub-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 243, 248, 0.92));
}

.hub-card::after {
  position: absolute;
  right: -38px;
  bottom: -54px;
  width: 150px;
  height: 150px;
  border: 28px solid rgba(46, 125, 91, 0.045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}

.hub-card .emoji {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--surface-soft);
  font-size: 28px;
}

.hub-card:nth-child(2) .emoji {
  background: var(--yellow-bg);
}

.hub-card:nth-child(3) .emoji {
  background: var(--blue-bg);
}

:root[data-theme="dark"] .hub-card,
:root[data-theme="dark"] .hub-card:nth-child(2),
:root[data-theme="dark"] .hub-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(27, 36, 31, 0.98), rgba(22, 29, 25, 0.94));
}

/* Rasyon Asistanı */
/* ÜÇ SÜTUN (2026-07-27 görsel yenileme): sol girdi · orta rasyon · sağ sonuç.
   ⚠️ Bu dosya styles.css'ten SONRA yükleniyor, yani `.wrap` kuralı orada
   değil BURADA belirleniyor. (Üç sütunu önce styles.css'e yazmıştım ve
   uygulanmadı — sebebi buydu.) */
/* ⚠️ ESKİDEN 1180 → 1276 → 1560 idi. Bu, İÇERİK SAYFASI alışkanlığı:
   uzun metin satırı okunmaz diye genişlik kısılır. Ama biz içerik sayfası
   değil VERİ ARACIYIZ — kimse hesap tablosunu 1180px'e sıkıştırmıyor.
   Gökhan (2026-07-27): "Geniş açınca sol ve sağda yer kaldı."
   ÖLÇÜLDÜ (1900px ekran): 1560 sınırında tablo 651px, sınırsızda 801px.
   Üst sınır yalnız ultra-geniş ekranda satırların absürt uzamasını
   engellemek için duruyor. */
/* İKİ SÜTUN (2026-07-29). Üçüncü sütun ("Hayvan & Sürü") üst şeride taşındı;
   gerekçesi index.html'de yazılı. Kazanç: 240px sütun + 18px boşluk = 258px
   ana çalışma alanına döndü. Orta ~800px, sağ ~560px oluyor.
   ⚠️ Yem adı hücresi 170px'ten ~334px'e çıkıyor — "Sığır Süt Yemi,21 HP,
   2750 ME-E..." diye kesilmesi bu yüzden bitiyor.
   ⚠️ Sağ sütun genişleyince `.kd-grid` satır başına 4 yerine 5 kadran alır.
   Bu bir yan etki DEĞİL, dünkü niyetin yerine gelmesi: `.kd-grid`in
   `max-width: 600px` kilidi zaten BEŞ sütun için konmuştu (Lif grubu 5
   kadran, tek satıra sığsın diye). 487px'lik sütun onu 4'e düşürüyordu. */
.wrap {
  max-width: 2040px;
  margin: 24px auto 70px;
  padding: 0 18px;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1.26fr);
  gap: 18px;
}

/* Şerit iki sütunun da üstünde, tam genişlik. */
.hedef-serit {
  grid-column: 1 / -1;
}

/* Açılan formda sekiz alan DÖRT sütuna yayılır (dar sol sütunda iki idi):
   iki satır, hepsi tek bakışta. */
.hedef-govde .io {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ⚠️ 1300px kırılımı KALDIRILDI. Eskiden orada `max-width: 1080px` + üç
   sütundan ikiye iniş vardı; üçüncü sütun gidince ikisi de anlamsız kaldı.
   1280px'lik ekranda artık 1244px kullanılıyor (eskiden 1080'e kısılıyordu)
   ve iki sütun yan yana kalıyor — ana sonuç ilk ekranda.
   Tek sütuna iniş `@media (max-width: 1050px)` blokunda, aşağıda. */

.card {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

/* ⚠️ İNCE BAŞLIK ARTIK VARSAYILAN (2026-07-28, Gökhan: "Diğer panellerdeki
   üst etiketleri ve ikonları da sadeleştir").

   68px'lik taban, 42px'lik ikon KUTUSU ve iki satırlık başlığı (üst etiket
   + ad) tutmak için vardı. On sekiz panelin hepsinden ikisi de kalkınca o
   taban yalnızca boşluk üretiyordu. ÖLÇÜLDÜ: panel başına 27px (68 -> 41).

   Üst etiketlerin çoğu zaten başlığı tekrar ediyordu — "Özet / Rasyon
   Özeti", "Dikkat / Uyarılar", "Bilgilendirme / Bilgi Notları". Bilgi
   taşıyan TEK etiket "Adım 2 · Yaş baz"tı; o silinmedi, başlığın yanına
   `.baslik-not` olarak alındı. */
/* ⭐ BAŞLIK ARTIK ZEMİNLE DEĞİL ÖLÇEKLE VE AYRAÇLA AYRILIYOR
 * (2026-08-10, dış inceleme md. 5 + ÖLÇÜM).
 *
 * ÖLÇÜLDÜ (tarayıcıda, hesaplanan değerlerden — bildirilen değil):
 *     bölüm başlığı 15px / 700   ·   gövde metni 13px / 400
 *     oran 15/13 = 1,15×
 * Tipografide bir kademe olarak OKUNMASI için ~1,25× gerekir. 1,15× algı
 * eşiğinin ALTINDA — incelemenin *"başlıklar içerik metniyle neredeyse aynı
 * boyutta"* şikâyeti tam olarak bu.
 *
 * ⚠️ YÜKSEKLİK KORUNDU — bu şart. 2026-07-28'de Gökhan *"üst etiketleri ve
 * ikonları sadeleştir"* dedi ve başlık 68px'ten 41px'e indi (bkz. yukarıdaki
 * not). Punto büyürken o kazanım geri verilemezdi:
 *     punto 15 -> 17,  dikey iç boşluk 11 -> 9  =>  ÖLÇÜLDÜ 41px -> 39px
 * Yani başlık hem daha okunur hem 2px DAHA KISA.
 *
 * Zemin (`--card-head`) yerine alt AYRAÇ: incelemenin reçetesi
 * *"bölüm ayrımı kart gölgesinden değil, ölçek farkı ve ayraçtan gelsin"*.
 * Ayrıca `.status-*` zeminleri kalkınca dolu başlık şeridi tek başına
 * kalıyordu — o da bir "kutu içinde kutu" idi. */
.card h2 {
  gap: 8px;
  min-height: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

/* Bölüm adının kendisi — 17px. `.baslik-not` (11,5px) ve sağdaki sayaçlar
   kasten büyümez: ölçek farkı ancak yanındaki küçük kalırsa iş görür. */
.section-heading > span:first-child {
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* NOT: `.section-icon` ve `.section-eyebrow` kurallari 2026-07-28'de
   SILINDI — 18 panelin hepsinden markup kalkti, kurallar olu kalmisti.

   Başlığın yanındaki nitelik notu: "Rasyonu Kur · yaş baz, kg/gün" */
.baslik-not {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--agirlik-metin, 400);
  white-space: nowrap;
}

/* ⚠️ ESKİDEN `flex-direction: column`DU — üst etiket ("ADIM 2") başlığın
   ÜSTÜNDE dursun diye. Üst etiketler 2026-07-28'de kalkınca sütun kalmasının
   tek etkisi, yanına konan `.baslik-not`u alt satıra itmek oldu: başlık
   41px yerine 57px ölçüldü. Artık satır. */
.section-heading {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
}

/* ⚠️ Hap zemini SABİT BEYAZ değil, tema değişkeni.
   ÖLÇÜLDÜ (2026-07-29, Fable): `rgba(255,255,255,.62)` koyu temada açık gri
   bir hap üretiyordu; üzerindeki `--muted` de koyu temada AÇIK gri. Sonuç
   1,18:1 — "Öneri hazır / bekliyor" etiketi fiilen görünmezdi. Açık temada
   4,78:1 ile geçtiği için gözden kaçmış.
   Font da 10 → 11px: bu, panelin durumunu söyleyen tek etiket. */
.card h2 .state-text {
  max-width: 42%;
  margin-left: auto;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--surface-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card h2 .idx {
  min-width: 26px;
  min-height: 24px;
  border-radius: 8px;
  padding: 3px 8px;
  background: var(--green-bg);
  color: var(--green-ink);
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card .body {
  padding: 18px;
}

.learning-strip {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
}

.learning-strip.green {
  border-color: rgba(46, 158, 91, 0.12);
  background: var(--green-bg);
  color: var(--green-ink);
}

.learning-strip.amber {
  border-color: rgba(192, 131, 0, 0.12);
  background: var(--yellow-bg);
  color: var(--yellow-ink);
}

.learning-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
  font-size: 17px;
}

.learning-strip strong {
  display: block;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
}

.learning-strip p {
  margin: 3px 0 0;
  color: currentColor;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.88;
}

#animalPanel {
  border-color: rgba(46, 158, 91, 0.16);
}

#animalPanel .body {
  background: linear-gradient(180deg, rgba(230, 246, 235, 0.34), transparent 46%);
}

#rationInputPanel {
  border-color: rgba(192, 131, 0, 0.14);
}

.io {
  gap: 12px;
}

.f label,
.feedtable th,
.rtable th,
.rctable th,
.recommendation-table th {
  color: var(--muted);
  font-weight: var(--agirlik-vurgu, 600);
}

.f input,
.f select,
.feedtable select {
  min-height: 40px;
  border-radius: 11px;
  background: var(--input-bg);
}

.feed-entry {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-menu {
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
}

button.act, a.act {
  /* ⛔ ESKIDEN: background/border = var(--brand) (#2e7d5b, ton 154°).
     "Iyi durum" yesili 144° — arada 10,1° var, AYIRT EDILEMEZ. Yani ekranin
     ANA DUGMESI bir HUKUM gibi okunuyordu; olculmus cakismanin UCUNCU ornegi.
     Kural (Fable, 2026-08-11): "Dolu koyu blok = YALNIZ EYLEM; durum asla dolu
     blok almaz. Eylem = PARLAKLIK ucu, durum = DOYGUNLUK."
     ⭐ --brand'e DOKUNULMADI: o kimlik tasiyor (ust bardaki ad), eylem degil. */
  border-color: var(--eylem);
  background: var(--eylem);
  color: var(--eylem-metin);
}

button.act {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
}

button.act.ghost,
button.act.warn {
  border-color: var(--line);
  background: var(--card);
  color: var(--accent);
}

button.act.danger {
  border-color: transparent;
  background: var(--red-bg);
  color: var(--red-ink);
}

/* ── TEK BIRINCIL EYLEM — duruma bagli, JS'siz ───────────────────────────
   Kural (Fable, 2026-08-11): "Ekrandaki EN KOYU DOLU BLOK birincil eylemdir
   ve ekranda TEKTIR."  Ama bu ekranda uc dolu blok cikiyordu:
     Degerlendir · Guvenligi duzelt · Coz
   Onceki tur bunu gormustu ve dogru teshisi de koymustu (2026-08-10):
     "Dogru duzeltme 'birini sil' degil, BIRINCILLIGI ZAMANA BAGLAMAK."
   ⭐ Mekanizma zaten kodda: applyRebalanceButton `disabled` ile yonetiliyor
   (app.js:3563 her turda sifirliyor). Yani "su an yapilabilir mi" bilgisi
   DOM'da duruyor — kardes secici onu okuyabiliyor, JS degisikligi GEREKMIYOR.

   Sert gecit kirikken motorun dogru hamlesi "gecidi kapat"tir; o an Coz
   ikincildir. Gecit kapaliysa apply disabled olur ve Coz birincil kalir.

   ⛔ `:not([hidden])` SART (2026-09-01, tek-fiil tasimasi): apply dugmesi
   KATLANMIS yazilarda (`SERITTEN_KATLANAN_YAZILAR`) gizli AMA etkin olabilir
   — o an seritte tek dugme Coz'dur ve bu kural onu ikincile dusururdu, yani
   ekranda HIC birincil eylem kalmazdi. Kuralin kendi gerekcesi "ekranda
   ondan daha dogru bir hamle DURUYOR"; gizli dugme ekranda durmuyor.
   ⚠️ Bu, 09-01'den once "Dengele" yazisinda ZATEN boyleydi (o da gizli ve
   etkindi); tasima kusuru gorunur kildi, dogurmadi. Mineral yazisi seritte
   kaldigi icin oradaki hiyerarsi aynen surur. */
#applyRebalanceButton:not(:disabled):not([hidden]) ~ #chainRebalanceButton {
  border-color: var(--line);
  background: var(--card);
  color: var(--accent);
}

/* Pasif eylem dolu blok GORUNMEZ — yoksa "birincil ama basilamaz" der. */
button.act:disabled,
button.act[disabled] {
  border-color: var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: not-allowed;
}

/* ── Ana sonuç kartı ──────────────────────────────────────────────────────
   Gökhan (2026-07-28): "Bu, Fable'ınkinden daha uzun; daraltırsak sağda
   aşağıya doğru yer kazanırız."

   ÖLÇÜLDÜ: kart 341px'ti ve bunun 106px'i ÇERÇEVEYDİ (52px iç boşluk +
   54px ikon kutusu). Rakam ve çubuklar BİLGİ; onlara dokunulmadı.
   Kısalan yalnız çerçeve: ikon kutusu kalktı, başlık tek satıra indi,
   çubuklar 24→20px, iç boşluk 26→22px.
   ⚠️ Kural: yeniden kısaltmak gerekirse ÖNCE çerçeveye bak. */
.milkpanel {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(46, 125, 91, 0.14);
  border-radius: 22px;
  padding: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(129, 226, 171, 0.18), transparent 14rem),
    linear-gradient(135deg, var(--hero-1), var(--hero-2));
  box-shadow: 0 18px 38px rgba(21, 63, 50, 0.2);
}

.hero .big {
  margin-top: 12px;
  font-size: clamp(52px, 5vw, 68px);
  letter-spacing: -0.045em;
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Bardak kalıyor, KUTUSU gidiyor. Ekrandaki 10 bölüm ikonunun onu da
   gizlendiği için bu tek işaret artık süs değil, "cevap burada" demek. */
.hero-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  display: inline-block;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 21px;
  line-height: 1;
}

.hero .hero-title {
  min-width: 0;
  margin-top: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: var(--agirlik-vurgu, 600);
  line-height: 1.3;
}

/* "ANA SONUÇ" artık ayrı satır değil, başlığın önündeki küçük etiket. */
.hero .hero-title .lab {
  margin-right: 7px;
}

.hero .hero-title .lab::after {
  margin-left: 7px;
  color: rgba(255, 255, 255, 0.45);
  content: "·";
}

/* Rozet 68px rakamın yanında çıkartma gibi duruyordu; başlık satırının
   sağ ucu onun doğal yeri. */
.hero-title-row #limtag {
  flex: 0 0 auto;
  margin-left: auto;
}

.hero-title-row #limtag:empty {
  display: none;
}

.hero .why {
  max-width: 52ch;
  margin-top: 8px;
  font-size: 13px;
}

.hero .gauge {
  gap: 8px;
  margin-top: 14px;
}

.hero .gbar {
  height: 20px;
  border-radius: 7px;
}

.hero .gfill {
  border-radius: 7px;
}

/* ⭐⭐ PANEL ZEMİNLERİ NÖTR (2026-08-10, dış inceleme md. 2 + ÖLÇÜM).
 *
 * Dış inceleme: *"Durum rengi üç kez tekrar ediyor — sol şerit + zemin +
 * rozet. Her panel bir alarm gibi bağırınca gerçek alarm kayboluyor."*
 *
 * ⭐ ÖLÇÜLDÜ, İDDİA DEĞİL: `status-green/amber/info/red` sınıfları
 * `index.html` ile `kuru.html`e ELLE yazılı ve JS onlara HİÇ dokunmuyor
 *   grep "status-green\|status-amber\|status-info\|status-red" ui/*.js  ->  0 sonuç
 * Yani bu renkler DURUM BİLDİRMİYOR; panelin türünü söylüyorlar. "Öneri"
 * paneli söyleyecek bir şey olmasa da hep sarı, "Göstergeler" hep maviydi.
 * Renk bütçesi bilgi taşımayan yere harcanıyordu.
 *
 * ⛔ EN AĞIR HÂLİ — YANLIŞ BEYAN: `#guardpanel` sınıfı `status-green`.
 * Sert geçit kırıkken panel KIRMIZI "DÜZELT" rozeti taşırken sol şeridi
 * hâlâ yeşildi. Kart kendi içeriğini yalanlıyordu (incelemenin 1. maddesi,
 * bir kat aşağıda tekrar).
 *
 * ⭐ ŞİMDİ: üç kanaldan (şerit + başlık zemini + gövde yıkaması) üçü de
 * kalktı. Durumu söyleyen ne varsa DİNAMİK olan söyler: başlıktaki sayaç
 * ("3/4 GÜVENDE"), satır rozetleri, kadran iğnesi. Renk yalnız hüküm anında.
 *
 * ⚠️ Sınıflar SİLİNMEDİ, boşaltıldı: `.status-card` konumlandırması
 * (`position:relative`) altındaki kurallarca kullanılıyor ve `data-sekme`
 * seçicileri bu markup'a dayanıyor. Tek kaybolan görsel: bilgi taşımayan
 * renkler. Kaybolan bilgi: yok. */
.status-card {
  position: relative;
  border-color: var(--line);
}

/* ⛔ .expert-detail GOLGESI SILINDI (2026-08-11).
   styles.css:2366 bunu birebir itiraf ediyordu:
     "expert-detail hicbir seyi gizlemiyor, sadece golge veriyor."
   Yani derinlik "bu uzman detayidir" diye ANLAMSAL BIR VURGU tasiyordu —
   ucuncu hukum kanali zaten dogmustu. Ustelik oyuga inen sekiz panelin UCU
   bu sinifi tasiyor (#nasemPanel · #rationpanel · Besin Gereksinimleri),
   silinmeseydi ucu oyugun icinde golgeli kalir ve tam hedeflenen yerde
   patlardi. Kural: derinlik "ne kadar ONEMLI" demez, "NEYIN ICINDE" der. */

/* Bilgi notlari — katlanabilir, notr (uyari degil) */
.note-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.note-toggle .note-caret {
  margin-left: auto;
  font-size: 13px;
  color: var(--metin-2);
  transition: transform 0.15s ease;
}
.note-toggle[aria-expanded="true"] .note-caret {
  transform: rotate(90deg);
}
.note-reassure {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--metin-2);
}
.note-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 8px;
}
.note-item:last-child {
  margin-bottom: 0;
}
.note-item .note-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.note-item .note-text {
  min-width: 0;
}
.note-item .note-name {
  font-weight: var(--agirlik-vurgu, 600);
  font-size: 14px;
}
.note-item .note-msg {
  font-size: 13px;
  color: var(--metin-2);
  margin-top: 2px;
}

.indi,
.summary-box,
.cmp-note,
.empty-state {
  border-radius: 14px;
}

.indi {
  padding: 14px;
  background: var(--card);
}

/* --- Mini kadranlar (2026-07-28) ---------------------------------------
 *
 * Gökhan Promix'in gösterge penceresini gösterip mini kadran biçimini seçti.
 * Promix'ten iki farkı var (gerekçesi app.js `renderKadranlar` başında):
 * renk kodu tutarlı, eksenin uçları belli.
 *
 * ⚠️ Bu dosya styles.css'ten SONRA yükleniyor — buradaki kural oradakini
 * ezer. Kadran stilleri bilerek burada; oraya yazılsa görünmezdi.
 */
/* Satır arası, sütun arasından BELİRGİN biçimde büyük: her hücrede alt alta
   dört metin satırı var, boşluk eşit olunca göz satırı değil sütunu grupluyor
   ve komşu kadranların yayları değiyordu. */
/* ⚠️ 5 SÜTUNDA KİLİTLİ — tesadüf değil (2026-07-28, Fable'ın ölçümü).
   Sağ sütun 1050-1300px arasında ~1044px oluyordu, bu da 9 sütun demekti:
   Temel grubu (3 kadran) dokuz hücrelik satırın soluna sıkışıyor, sağında
   altı boşluk kalıyordu. 600px sınırıyla Temel (3), Lif (5) ve İşkembe (4)
   TEK SATIRA sığar, yalnız Mineral (7) iki satır olur — grup şekli anlamlı
   hale gelir, göz bloğu tek bakışta yutar. Sağda kalan boşluk kusur değil. */
.kd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 18px 10px;
  max-width: 600px;
}

/* --- Üst bölge: cümle + dört durak şeridi ------------------------------- */
.kd-ust {
  margin-bottom: 4px;
}

.kd-ust-not {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.45;
}

/* Dört durak = dört grup. Aynı görsel dil iki ölçekte: kadranda kırmızı
   zarf, grupta kırmızı durak. Temiz durak SESSİZ kalır. */
.kd-durak-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.kd-durak {
  flex: 1 1 auto;
  min-width: 120px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  background: var(--card);
  cursor: pointer;
  font: inherit;
}

.kd-durak:hover {
  border-color: var(--brand);
}

.kd-durak.sorunlu {
  background: var(--red-bg);
  border-color: var(--red);
}

.kd-durak-ad {
  display: block;
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--ink);
}

.kd-durak-say {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
}

.kd-durak.sorunlu .kd-durak-say {
  color: var(--red-ink);
  font-weight: var(--agirlik-vurgu, 600);
}

/* --- Grup bloğu --------------------------------------------------------- */
.kd-blok {
  margin-top: 22px;
}

/* ⚠️ KUTU İÇİNDE KUTU YOK. Panel zaten `.card.panel` çerçevesinde; içine
   dört çerçeve daha koymak gürültü olurdu. Zebra zemin de işe yaramaz:
   `--surface-soft` / `--card` kontrastı karanlık temada 1,13:1 — görünmez.
   Ayrım BOŞLUK + ince çizgiyle. */
.kd-blok-baslik {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  /* Telefonda kaydırırken "hangi duraktayım" kaybolmasın. Zemin ŞART:
     yoksa kadranlar başlığın altından geçer. */
  position: sticky;
  top: 62px;
  background: var(--card);
  z-index: 2;
}

.kd-blok-say {
  margin-left: auto;
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--muted);
}

.kd-blok.sorunlu .kd-blok-say {
  color: var(--red-ink);
}

.kd-blok-not {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 10px;
}

/* Baş cümle: "3 hedef dışında · 15 hedefte" ya da hepsi temizse
   "19 kadranın tamamı hedefte." EYLEM GEREKTİREN SAYI ÖNCE gelir. */
.kd-sayac {
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--red-ink);
}

.kd-sayac.temiz {
  color: var(--green-ink);
}

/* TELEFONDA yalnız TAMAMI TEMİZ grup katlanır — gizlenen bilgi sıfır,
   "hepsi hedefte" zaten başlıkta yazıyor. Hedef dışı olan grup ASLA
   katlanmaz. Kazanç ~450px; 19 kadran telefonda 3,5 ekran sürüyordu. */
@media (max-width: 520px) {
  .kd-blok.temiz .kd-blok-not,
  .kd-blok.temiz .kd-grid {
    display: none;
  }
  .kd-blok.temiz .kd-blok-baslik::after {
    content: " ▸";
    font-size: 10.5px;
    color: var(--muted);
  }
  .kd-blok.temiz.acik .kd-blok-not,
  .kd-blok.temiz.acik .kd-grid {
    display: revert;
  }
  .kd-blok.temiz.acik .kd-grid {
    display: grid;
  }
  .kd-blok.temiz.acik .kd-blok-baslik::after {
    content: " ▾";
  }
  .kd-blok.temiz .kd-blok-baslik {
    cursor: pointer;
  }
}

.kd-sayac.temiz {
  color: var(--green-ink);
}

/* Rasyon henüz değerlendirilmemişken / her şey hedefteyken. */
.kd-temiz {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}

/* Grup başlığı satırın tamamını kaplar — kadranlar dörde ayrılıyor:
   Temel · Lif & karbonhidrat · Mineral · İşkembe sağlığı */
.kd-grup {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 20px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.kd-grup:first-child {
  margin-top: 0;
}

/* Kaynak GRUP BAŞLIĞINDA, kadran altında değil: bir grubun kadranlarının
   neredeyse hepsi aynı kaynaktan geliyor (Mineral'in 7'si NRC gibi).
   19 tekrar yerine 4 satır — ve `title` telefonda çalışmıyordu. */
.kd-grup-kaynak {
  font-size: 10.5px;
  font-weight: var(--agirlik-metin, 400);
  color: var(--muted);
}

/* İSTİSNA ROZETİ: bandı hayvanın kendi ihtiyacından çıkan kadranlar.
   Bu bir dipnot değil — Promix'in bandı 20 litrelik inekle 40 litrelikte
   AYNI, bizimki değil. Ekranda görünmeye değer tek etiket bu. */
.kd-rozet {
  display: inline-block;
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  line-height: 1.4;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue-ink);
  margin-top: 2px;
}

.kd {
  text-align: center;
  padding: 2px 1px 6px;
}

.kd svg {
  display: block;
  width: 100%;
  max-width: 90px;
  margin: 0 auto;
}

/* ⚠️ EKSEN GÖRÜNÜR OLMAK ZORUNDA (2026-07-28, Fable'ın ölçümü).
 *
 * İlk yazımda eksen `--surface-soft` idi ve kart zemininde kontrastı
 * ÖLÇÜLDÜ: açık temada 1,14:1 · karanlıkta 1,13:1. Yani Promix'e karşı öne
 * sürdüğümüz iki farktan biri — "bizde eksenin uçları belli" — ekranda
 * fiilen YOKTU. Kullanıcı yayın nerede bittiğini göremiyorsa iğnenin açısı
 * da bir şey söylemez.
 *
 * ⚠️ KALINLIK DA BİLGİ TAŞIR. Eksen ile bant yalnız RENKLE ayrılıyordu
 * (ikisi de 7px). Kırmızı-yeşil ayırt edemeyen kullanıcı için (erkeklerde
 * ~%8) kadran "gri bir yay + iğne"ye iniyordu. Artık eksen İNCE, bant KALIN:
 * renk görülmese bile hedef bandı biçimden okunur. */
.kd-eksen {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 20%, transparent);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Hedef bandı — HER KADRANDA YEŞİL. Promix'te kırmızı bazen solda bazen
   sağdaydı; orada renk "düşük/yüksek" demek, "iyi/kötü" değil.

   ⛔ DIŞ İNCELEME "hedefte olan kadranların yayı grileşsin" DEDİ — REDDEDİLDİ.
   Bu yay bir HÜKÜM değil, HEDEF BANDININ YERİ. Duruma bağlamak yukarıdaki
   kararı ters çevirir; üstelik 1046'daki not renk körlüğü için "eksen İNCE,
   bant KALIN" diyor — grileşen bant o kanalı da kapatır.

   ⭐ AMA ŞİKÂYETİN HAKLI PAYI VAR: 19-20 doygun yeşil yay gürültü. Çözüm
   yayın YERİNİ ve KALINLIĞINI korumak, yalnız mürekkebini seyreltmek.
   ⚠️ NE KADAR SEYRELECEĞİ SERBEST DEĞİL — iki taban var:
     (1) `.kd.bilgi .kd-eksen` (ink %28) — BANDI OLAN kadranın bandı,
         bandı OLMAYANIN ekseninden ağır kalmalı;
     (2) c1e2e7d (2026-07-28) bu bandı 7px/0,62'den 9px/0,85'e ÇIKARMIŞTI —
         yani 0,62 zaten denenip terk edilmiş bir düzey. Altına inmek
         ölçülmüş bir kararı sessizce geri sarmak olurdu.
   %70 ikisinin arasında: 0,85'ten hissedilir düşük, 0,62'nin üstünde.
   ⛔ Ölçüm yapılmadan %60'ın altına inilmez.

   NOT: `opacity` yerine renk alfası — deponun idiomu bu (bkz. 1050) ve
   `--card` · `--red-bg` · `.kd.yok svg{opacity:.45}` üçünün üstünde de
   doğru bindirir. */
.kd-hedef {
  fill: none;
  stroke: color-mix(in srgb, var(--green) 70%, transparent);
  stroke-width: 9;
  stroke-linecap: butt;
}

.kd-igne {
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.kd-gobek {
  fill: var(--ink);
}

/* Punto TELEFON İÇİN. Eski değerler (9,5-10,5px) güneş altında gözlüksüz
   okunmuyordu; kadran başına ~6px büyüme, 19 kadranda ~1 ekran — değer. */
.kd-deger {
  font-size: 17px;
  font-weight: var(--agirlik-vurgu, 600);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: -6px;
}

.kd-birim {
  font-size: 10.5px;
  font-weight: var(--agirlik-metin, 400);
  color: var(--muted);
  margin-left: 2px;
}

/* İki satırlık adlar ("Kaba yem NDF") tek satırlıkların ("Klor") altındaki
   bant metnini kaydırıyor, ızgara dalgalanıyordu. Sabit yükseklik hepsini
   aynı taban çizgisine oturtur. */
.kd-ad {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.25;
  min-height: 2.5em;
}

.kd-bant {
  font-family: var(--font-num);   /* esik/hamle SAYI tasir -> mono, hizalansin */
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Bant adı — kadranın altındaki kısa kelime ("takas", "kırık").
   ⚠️ NEDEN `title` YETMEDİ: kadranın açıklaması `title`da duruyor ama
   `title` TELEFONDA ÇALIŞMAZ. peNDF'te sayının literatürde nereye düştüğü
   (özellikle «takas») tooltip'e saklanamayacak kadar önemli — ekrana çıkar.
   Renk taşımaz: renk zaten "bant dışı" demek için ayrılmış, bu ise bant
   İÇİNDEYKEN de konuşur. */
.kd-etiket {
  display: block;
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--muted);
}

/* Yön AYRI bir işaret taşır — renkle değil. Promix'in hatası yönü RENGE
   yüklemesiydi (kırmızı bazen düşük bazen yüksek demek). Bizde renk tek
   anlam taşır ("bant dışı"), yönü ok ve kelime söyler. */
.kd-yon {
  display: block;
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--red-ink);
}

/* "Dengele'ye basarsan bu sayı ne olur" — motorun kendi adayından okunur,
   uydurulmaz. Promix'te olmayan fark: kadran kırmızı yanınca susmuyor. */
.kd-hamle {
  display: block;
  font-family: var(--font-num);   /* esik/hamle SAYI tasir -> mono, hizalansin */
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kd-hamle.duzelir {
  color: var(--green-ink);
}

/* KADRANIN NOTU — eşiğin gerekçesi, künyesi, bazen önerisi (2026-08-25).
 *
 * ⚠️ NEDEN EKRANA ÇIKTI: bu metin yalnız `title`da (masaüstü hover) ve
 * `aria-label`da yaşıyordu. `title` TELEFONDA ÇALIŞMAZ ve çiftçi ahırda
 * telefonla bakıyor — yani alan hedef kitlenin çoğuna hiç ulaşmıyordu.
 * Aynı gerekçe `.kd-etiket`i ve `.kd-grup-kaynak`ı da ekrana çıkarmıştı
 * (ikisinin de künyesi bu dosyada, yukarıda); bu blok o kararın üçüncü ve
 * en uzun metinli halkası.
 *
 * ⛔ YALNIZ HEDEF DIŞI KADRANDA BASILIR (`durum !== "ok"` — koşul app.js
 * `kadranKarti`da). Ölçüldü: 22 kadranın 15'i not taşıyor ve BUNLARIN
 * 12'Sİ YEŞİL. Hepsine basmak, bu dosyanın kendi kayıtlı ilkesini
 * çiğnerdi ("İYİ OLANLARA HİÇBİR ŞEY EKLENMEZ… hedefteki kadran
 * kelimenin tam anlamıyla mürekkep harcamaz"). Yeşilin künyesi kaybolmuyor,
 * `title`da duruyor.
 *
 * ⛔ HEP-AÇIK DEĞİL, İKİ SATIR + DOKUNUNCA AÇ. Not uzunluğu 16-263 karakter
 * (en uzunu DCAD), sütun ~96px: hepsini açık bassaydık tek kadran 13 satır
 * metin taşır ve bütün ızgara satırı onun boyuna uzardı — "kart şişer"
 * itirazının haklı olduğu tek yer burası. Sığan not zaten tamamen görünür;
 * kırpma yalnız gerçekten taşanda olur.
 *
 * ⛔ KARAKTER EŞİĞİ YOK: kırpma kararını CSS veriyor, JS değil. Tarayıcı
 * taşan metnin ucuna "…" koyar, sığana koymaz — yani "burada devamı var"
 * işareti ÖLÇÜLMÜŞ bir gerçek, uydurulmuş bir sabit değil.
 *
 * Punto ve renk kardeşlerinden (`.kd-bant`, `.kd-etiket`) kopyalandı; yeni
 * renk uydurulmadı. Hizalama SOLA: kart ortalıdır ama bu blok düzyazıdır ve
 * açık haldeki uzun metin ortalanınca okunmaz hale gelir. */
.kd-not {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-align: left;
  overflow-wrap: anywhere;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 4px;
}

/* Dokunulduğunda tamamı görünür (JS `acik` sınıfını takar) — grup
   katlamasının kadran ölçeğindeki aynısı. */
.kd-not.acik {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Durum yalnız İĞNE ve SAYIYA işler; yay hep yeşil kalır ki
   "hedef nerede" sorusu renkten bağımsız okunsun. */
.kd.dusuk .kd-igne,
.kd.yuksek .kd-igne {
  stroke: var(--red);
  stroke-width: 3.2;
}
.kd.dusuk .kd-gobek,
.kd.yuksek .kd-gobek {
  fill: var(--red);
}
.kd.dusuk .kd-deger,
.kd.yuksek .kd-deger {
  color: var(--red-ink);
}
.kd.iyi .kd-deger {
  color: var(--green-ink);
}

/* HEDEF DIŞINDAKİ ZARF DÜZEYİNDE İŞARETLENİR. 2,2px'lik bir çizginin rengi
   19 kutucuk arasında kol mesafesinden taranamıyordu.
   ⚠️ İYİ OLANLARA HİÇBİR ŞEY EKLENMEZ — ne çerçeve ne zemin. "Yeşil kadran
   bilgi taşımaz" ilkesi böylece görsel olarak da doğrulanır: hedefteki
   kadran kelimenin tam anlamıyla mürekkep harcamaz. */
.kd.dusuk,
.kd.yuksek {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 12px;
  padding: 6px 4px 8px;
}

/* ⚠️ ÖLÇÜLEMEYEN KADRAN SOLDURULMAZ (2026-07-28, Fable yakaladı).
 *
 * İlk yazımda `.kd.yok { opacity: .55 }` vardı ve bu KENDİ İLKEMİZLE
 * ÇELİŞİYORDU: aynı gün "eksik veriyi başarı gibi göstermek yanlış güvendir"
 * diye not düşüp, sonra ölçülemeyen kadranı silikleştirip göz ardı
 * edilebilir kılmışız. Üstelik karanlık temada bant metni kartla 2,97:1'e
 * düşüyordu (4,5:1 eşiğinin altında, 10px puntoda).
 *
 * Doğrusu: SAYI ve YAY solar (ölçüm yok), AD ve durum yazısı tam kontrast
 * kalır (ölçülemediği okunsun). */
.kd.yok {
  opacity: 1;
}
.kd.yok svg {
  opacity: 0.45;
}
.kd.yok .kd-deger {
  color: var(--muted);
}

.oneri-bar,
.minerals,
.warningbox,
.note-box {
  border-radius: 12px;
}

input,
select,
textarea,
.act,
.reportBtn,
.themeToggle {
  border-radius: 11px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus);
}

/* SürüNabzı */
body.herd-page {
  font-size: 15px;
  line-height: 1.5;
}

body.herd-page .ust-bar {
  position: sticky;
  top: 0;
  z-index: 40;
}

body.herd-page .ust-ic {
  width: min(1240px, calc(100% - 36px));
  max-width: 1240px;
  min-height: 70px;
  gap: 18px;
  padding: 12px 0;
}

body.herd-page .sarici {
  width: min(1240px, calc(100% - 36px));
  max-width: 1240px;
  padding: 0 0 70px;
}

body.herd-page .ust-dugme {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
}

body.herd-page .ust-tema {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
}

body.herd-page .ust-marka {
  font-size: 16px;
}

body.herd-page .ust-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 22px;
}

body.herd-page .sekmeler {
  top: 70px;
  overflow: hidden;
  gap: 4px;
  margin: 20px 0 24px;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 6px;
  background: var(--yuzey);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

body.herd-page .sekme {
  min-height: 50px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  transition: background-color 0.18s ease, color 0.18s ease;
}

body.herd-page .sekme.aktif {
  background: var(--vurgu-zemin);
  color: var(--vurgu);
  font-weight: var(--agirlik-vurgu, 600);
}

body.herd-page .sarici h1 {
  margin: 0 0 16px;
  color: var(--metin);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: var(--agirlik-vurgu, 600);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

body.herd-page .sarici h2 {
  margin: 24px 0 10px;
  color: var(--metin);
  font-size: 16px;
  font-weight: var(--agirlik-vurgu, 600);
}

body.herd-page .kart-kutu,
body.herd-page .tablo-kaydir,
body.herd-page .rehber-ornek {
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  background: var(--yuzey);
  box-shadow: var(--shadow);
}

body.herd-page .kart-kutu {
  padding: 18px;
}

body.herd-page .orta.kart-kutu,
body.herd-page .bos-durum.kart-kutu {
  padding: 30px;
}

body.herd-page .orta.kart-kutu h1 {
  margin-bottom: 12px;
}

body.herd-page .kpi,
body.herd-page .kutu,
body.herd-page .panel-net {
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 16px;
  background: var(--yuzey);
}

body.herd-page .kpi-yesil,
body.herd-page .panel-net-yesil {
  background: var(--yesil-zemin);
}

body.herd-page .kpi-kirmizi,
body.herd-page .panel-net-kirmizi {
  background: var(--kirmizi-zemin);
}

body.herd-page .kpi .deger,
body.herd-page .kutu .deger {
  margin: 4px 0;
  font-size: 26px;
  font-weight: var(--agirlik-vurgu, 600);
}

body.herd-page .tip-dugme,
body.herd-page .secim-dugme,
body.herd-page .bilgi-satiri,
body.herd-page .uyari-satir,
body.herd-page .kayit-onayi {
  border-radius: 12px;
}

body.herd-page button,
body.herd-page input,
body.herd-page select,
body.herd-page textarea {
  min-height: 40px;
  border-radius: 11px;
}

body.herd-page button {
  padding: 9px 15px;
  background: var(--yuzey);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
}

body.herd-page .ust-dugme,
body.herd-page .ust-tema {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

body.herd-page button.birincil {
  border-color: var(--vurgu);
  background: var(--vurgu);
  color: #fff;
}

body.herd-page input,
body.herd-page select,
body.herd-page textarea {
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
}

body.herd-page input:focus,
body.herd-page select:focus,
body.herd-page textarea:focus {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--focus);
}

body.herd-page .cip {
  min-height: 36px;
  border-radius: 999px;
  padding: 7px 13px;
  background: var(--yuzey);
  font-size: 13px;
}

body.herd-page .cip.aktif {
  background: var(--vurgu-zemin);
  box-shadow: 0 0 0 2px var(--focus);
}

body.herd-page .tablo-kaydir th {
  padding: 11px 12px;
  background: var(--card-head);
  color: var(--metin-2);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.herd-page .tablo-kaydir td {
  padding: 11px 12px;
}

body.herd-page .tablo-kaydir tbody tr:hover {
  background: var(--vurgu-zemin);
}

body.herd-page .tip-dugme,
body.herd-page .secim-dugme {
  border-radius: 14px;
  padding: 13px;
  background: var(--yuzey);
}

body.herd-page .tip-dugme.aktif,
body.herd-page .secim-dugme.aktif {
  background: var(--vurgu-zemin);
  box-shadow: 0 0 0 2px var(--focus);
}

body.herd-page .uyari-satir,
body.herd-page .bilgi-satiri,
body.herd-page .kayit-onayi {
  padding: 11px 13px;
}

body.herd-page button:not(.sekme):not(.ust-dugme):not(.ust-tema) {
  transition: transform 0.12s ease, border-color 0.18s ease, background-color 0.18s ease;
}

body.herd-page button:not(.sekme):not(.ust-dugme):not(.ust-tema):hover {
  border-color: var(--vurgu);
}

body.herd-page button:not(.sekme):not(.ust-dugme):not(.ust-tema):active {
  transform: translateY(1px);
}

@media (max-width: 1050px) {
  .wrap {
    max-width: 820px;
    grid-template-columns: 1fr;
  }

  .rightcol {
    grid-column: auto;
  }

  /* Tek sütunda hedef formu üç alan yan yana sığar. */
  .hedef-govde .io {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  /* ⚠️ Telefonda dikey uzama MALIYETTIR (olculdu: sayfa 3935px = 4,8 ekran
     kaydirma). Ust iki basamak daraltilir. */
  :root { --bosluk-4: 16px; --bosluk-5: 20px; }

  .hub-card {
    min-height: auto;
  }

  body.herd-page .sarici {
    width: min(100% - 24px, 620px);
  }

  body.herd-page .sekmeler {
    top: 60px;
    margin: 12px 0 18px;
    overflow-x: auto;
    border-radius: 14px;
  }

  body.herd-page .sekme {
    min-width: 76px;
  }

  body.herd-page .ust-ic {
    width: calc(100% - 24px);
    min-height: 60px;
    gap: 8px;
    padding: 10px 0;
  }

  .wrap {
    width: min(100% - 22px, 620px);
    margin-top: 14px;
    padding: 0;
  }

  .topbar {
    min-height: 60px;
  }

  .card h2 {
    min-height: 0;
    padding: 12px 15px;
  }

  .card .body {
    padding: 16px;
  }

  .learning-strip {
    padding: 11px 12px;
  }

  .milkpanel {
    border-radius: 18px;
    padding: 20px;
  }

  .hero .big {
    font-size: 50px;
  }

  .feed-cell {
    min-width: 270px;
  }
}

@media (max-width: 520px) {
  .hero .big {
    font-size: 42px;
  }

  /* Dar ekranda başlık iki satıra sarabilir; bardak ve etiket üst
     satırda kalsın diye hizayı tepeye çekiyoruz. */
  .hero-title-row {
    align-items: flex-start;
  }

  .hero-icon {
    margin-top: 1px;
  }

  .card h2 .state-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-card,
  body.herd-page button {
    transition: none;
  }
}

@media print {
  body.herd-page {
    background: #fff;
    color: #000;
  }

  body.herd-page .kart-kutu,
  body.herd-page .tablo-kaydir,
  body.herd-page .rehber-ornek {
    box-shadow: none;
  }
}

/* ============================================================
   Güvenlik geçidi kartları (İşkembe Bekçisi)
   Kaynak: OYUN_STIL_SPEC 3.5 ("en önemli kazanç") + TOKENLARI 5.4.
   renderChecks bu işaretlemeyi üretir; yalnız görsel — yeni hesap yok.
   ============================================================ */
#hardChecks,
#warnings {
  display: grid;
  /* ⚠️ 228px iken üç sütunlu düzende (sağ sütun ~487px, kart içi 449px)
     iki kart 7px farkla sığmıyor ve tek sıraya düşüyordu. 208'e çekildi;
     maketteki 2×2 ızgara korunuyor. */
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 8px;
}

.gate-score {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gate-score.green {
  background: var(--green-bg);
  color: var(--green-ink);
}
.gate-score.red {
  background: var(--red-bg);
  color: var(--red-ink);
}

.gate-card {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
/* ⭐ GEÇİT KARTINDA ÜÇLÜ KODLAMA İKİYE İNDİ (2026-08-10, dış inceleme md. 2).
   Kart aynı durumu ÜÇ kez söylüyordu: çerçeve rengi + `.gate-state` rozeti +
   `.gate-fill` çubuğu. Çerçeve kalktı; rozet ve çubuk AYNEN duruyor.
   ⛔ Rozete ve çubuğa dokunulmaz: rozet durumu kelimeyle söyler, çubuk
   sınıra ne kadar yakın olunduğunu — ikisi de motorun bilgisi.
   Gerekçe deponun kendi kuralı (ui/styles.css'teki mobil rozet notu):
   *"durum renk + işaretle birlikte anlatılır (yalnız renk yetmez)."*
   ⚠️ `green`/`red` SINIFLARI HTML'DE KALIR — mobil biçim onları ::after
   içeriği (✓ / ! / ✕) için kullanıyor; yalnız bu iki çerçeve kuralı silindi. */

.gate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gate-name {
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  line-height: 1.3;
  color: var(--ink);
}
.gate-state {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gate-state.green {
  background: var(--green-bg);
  color: var(--green-ink);
}
.gate-state.red {
  background: var(--red-bg);
  color: var(--red-ink);
}
.gate-state.amber {
  background: var(--yellow-bg);
  color: var(--yellow-ink);
}
.gate-state.note {
  background: var(--surface-soft);
  color: var(--muted);
}

.gate-meter {
  height: 7px;
  margin: 9px 0 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}
.gate-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--muted);
}
.gate-fill.green {
  background: var(--green);
}
.gate-fill.red {
  background: var(--red);
}
.gate-fill.amber {
  background: var(--yellow);
}

.gate-ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}


/* ════════════════════════════════════════════════════════════════════════
   RASYON TABLOSU RÖTUŞU — Claude Design (Fable) çıktısı, 2026-07-27.
   ⚠️ BU DOSYADA çünkü program-theme.css en son yükleniyor;
   styles.css'e konunca eziliyordu.
   Hedef: maketteki tablo görünümü. Sınıf adlarına dokunulmadı.

   ⚠️ Bu blok kaskatta SON: yukarıdaki kendi genişlik/spinner/rozet
   kurallarım BİLEREK kaldırıldı — iki ayrı doğruluk kaynağı bırakmamak
   için. Genişlikler artık `table-layout: fixed` + thead nth-child ile.

   `.feed-menu` bloğu ALINMADI: bizde zaten var (styles.css ~749) ve
   Fable'ınki `display:none/.open` mantığımızı bozardı.
   ════════════════════════════════════════════════════════════════════════ */

/* ── İskelet: satırlar kart değil, ince çizgiyle ayrılır ── */
.feedtable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;              /* sayı sütunları sabit → 580px'te kırpılma yok */
  font-family:var(--font-ui);
  color:var(--ink);
}
.feedtable th,.feedtable td{padding:6px 5px;vertical-align:middle}
/* `table-layout:fixed` düzeninde içerik hücreyi AŞMAMALI; aşarsa tablo
   kabından taşar (ölçüldü: kural rozeti 7px taşırıyordu).

   ⚠️ AÇILIR PANEL TAŞIYAN HÜCREYE UYGULANMAZ. İçinde `position:absolute`
   bir panel açılan hücreyi kırparsan panel DOM'da doğar, ölçülür, ama
   ekranda görünmez ve tıklanamaz.

   İki hücre böyle ve İKİSİ DE aynı hatayı yedi:
   · `.feed-cell` → açılır yem listesi (`.feed-menu`). Gökhan bildirdi
     (2026-07-27): "Yemler değiştirilemiyor, bastığımda liste gelmiyor."
     O gün düzeltildi.
   · `.lock-cell` → yem kuralı paneli (`.kural-panel`). AYNI GÜN, AYNI
     COMMIT'TE (9e53040) bu hücreye kırpma UYGULANDI — yorumda "kırpma
     yalnız SAYI ve KURAL hücrelerinde" yazıyordu; kural hücresinde de bir
     açılır panel olduğu gözden kaçmış. Yani az önce düzeltilen hatanın
     birebir aynısı bir hücre ötede yeniden yapılmış.
     Gökhan bildirdi (2026-07-29): "Serbest'e basınca eskiden kısıt
     koyabiliyorduk, o ne oldu?"
     ÖLÇÜLDÜ: hücre 82x48, panel 268x294; panelin ortasına
     `elementFromPoint` başka bir hücreyi döndürüyordu.

   ⚠️ Rozetin taşması kırpmayla değil KENDİ kuralıyla çözülür:
   `.kural-rozet{max-width:100%;overflow:hidden;text-overflow:ellipsis}`
   zaten aşağıda duruyor. Hücreyi kırpmaya gerek yok.
   Koruma: tests/test_acilir_panel_kirpilmiyor.py */
.feedtable td.kg-cell,
.feedtable td.km-cell,
.feedtable td.price-cell,
.feedtable td.tl-cell,
.feedtable td.remove-cell{overflow:hidden}
.feedtable td.feed-cell,
.feedtable td.lock-cell{overflow:visible}
.kural-rozet{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.feedtable .r{text-align:right}
.feedtable tbody td{border-top:1px solid var(--line)}   /* satır ayracı: çizgi, kutu değil */
.ration-row:hover{background:var(--card-head)}          /* satırı bulmayı kolaylaştırır, kabartma değil */

/* Sabit sütun genişlikleri (Yem esner, sayılar asla kırpılmaz) */
/* ⚠️ ÖLÇÜLEREK daraltıldı (2026-07-27): Fable'ın değerleri maket
   genişliğine (~1900px) göreydi; bizim orta sütun ~580-660px. Orijinaller
   toplam 408px tutuyordu ve yem adına 68px kalıyordu — okunmuyordu. */
.feedtable thead th:nth-child(2){width:74px}   /* Yaş kg  */
.feedtable thead th:nth-child(3){width:52px}   /* KM kg   */
.feedtable thead th:nth-child(4){width:52px}   /* ₺/kg    */
.feedtable thead th:nth-child(5){width:64px}   /* ₺/gün   */
.feedtable thead th:nth-child(6){width:82px}   /* Kural   */
.feedtable thead th:nth-child(7){width:26px}   /* sil     */

/* ── Sütun başlıkları: küçük, büyük harf, harf aralıklı ── */
.feedtable thead th{
  /* MONO: başlık, altındaki rakamlarla aynı karakter genişliğinde olunca
     sütun hizası görsel olarak da kuvvetleniyor — "alet" hissi buradan
     geliyor (Gökhan makette fark etti, 2026-07-27). */
  font:var(--agirlik-vurgu, 600) 10.5px/1 var(--font-num);   /* 9,5 -> 10,5: styles.css tabanina donus */
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:8px 5px;
  border-bottom:1px solid var(--line);
}
.feedtable thead th.r{text-align:right}

/* ── Rakamlar: mono, tabular, sağa hizalı ── */
.feedtable .num{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  text-align:right;
  font-size:13px;
}

/* KM kg ARA HESAP -> soluk. ₺/gün SONUÇ (bu yem günde ne tutuyor) -> koyu
   ve kalın. Ikisini ayni soluklukta gostermek yanlis bir esitlik kurar
   (Gokhan, 2026-07-27: makette ₺/GUN bold). */
.km-cell{color:var(--muted)}
.tl-cell{color:var(--ink);font-weight:var(--agirlik-vurgu, 600)}

/* ── Yem adı: dinlenmede düz metin, çerçevesiz ── */
.feed-entry,.feed-main{min-width:0}                       /* uzun adlar taşmasın */
/* ⚠️ `.feed-main` dış esnek kabın (`.feed-entry`) bir ÖĞESİ; büyüme
   verilmezse içeriği kadar kalıyor ve sütun genişlese bile yem adı alanı
   147px'de takılıyordu (2026-07-27'de ölçüldü). */
.feed-entry > .feed-main{flex:1 1 auto}
.feed-main{display:flex;align-items:center;gap:8px}       /* ad + tür rozeti AYNI satırda */
.feed-combobox{position:relative;display:flex;align-items:center;flex:1;min-width:0}
/* ⭐ YEM ADI 500 → 600 (2026-08-11, Gokhan: "yemlerin biraz daha koyu
   olmasini oneriyorum ... yas kg 700 ise yemlerin 600 olsun gibi").
   ⚠️ Gokhan yas kg'yi 700 sandi, OLCULDU: 600'du.
   ⭐ AMA ASIL BULGU BASKA: 500 de zaten SAHTEYDI. Yalniz iki yuz
      barindiriliyor (400 ve 600); 500 istegi 400'u cizdiriyordu. Yani bu
      satir 500'den 600'e degil, GERCEKTE 400'den 600'e cikti — Gokhan'in
      "ince duruyor" tespiti tam da bu yuzden dogruydu.
   ⛔ Uc basamakli sira AGIRLIKTA kurulamadi: yas kg 700 denendi, 600 ciziyor
      (gerekce `.feedtable input.num` notunda).
   ⭐ SIRA MUREKKEPTE KURULDU (2026-08-11, Gokhan uc adayi gorup "C"yi secti).
      Uc aday `bekleme_odasi/yem_adi_uc_aday.html` icinde yan yana duruyor:
        A  agirlik 400 · tam murekkep    (eskisi — CSS 500 yaziyordu)
        B  agirlik 600 · tam murekkep    (bir gunlugune canlidaydi)
        C  agirlik 600 · ORTA murekkep   ← SECILEN
      B'nin kusuru: yem adi ile yas kg hem ayni agirlikta hem ayni murekkepte
      kaliyordu, yani Gokhan'in "yas kg kadar DEGIL" sarti karsilanmiyordu.
      C'de yem adi bir kademe geride durur ama A'dan belirgin koyudur.
   ⛔ Ayrim doygunluktan degil PARLAKLIKTAN geliyor — hukum butcesi
      (yesil/sari/kirmizi) el degmeden duruyor. */
.feed-combobox input[data-role="feed"]{
  width:100%;min-width:0;
  border:1px solid transparent;                           /* kutu görünmez… */
  background:transparent;
  font:var(--agirlik-vurgu, 600) 13px/1.25 var(--font-ui);
  color:var(--murekkep-orta);
  padding:5px 6px;margin-left:-6px;                       /* metin hizası hücre kenarıyla aynı kalır */
  border-radius:8px;
  text-overflow:ellipsis;
}
.ration-row:hover .feed-combobox input[data-role="feed"]{border-color:var(--line)}  /* …düzenlenebilirlik hover'da belli olur */
.feed-combobox input[data-role="feed"]:focus{
  outline:none;border-color:var(--brand);background:var(--card);
}
.feed-toggle{
  border:0;background:none;color:var(--muted);
  font-size:10.5px;padding:2px 4px;cursor:pointer;
  opacity:0;                                              /* dinlenmede gizli */
}
.ration-row:hover .feed-toggle,
.feed-combobox:focus-within .feed-toggle{opacity:1}

/* Tür rozeti: nötr — renk bütçesi durum için saklanır */
.feed-type{
  flex:none;
  font:var(--agirlik-vurgu, 600) 10.5px/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;
  border:1px solid var(--line);
  background:transparent;color:var(--muted);
}
/* forage / concentrate / protein / mineral bilinçli olarak AYNI:
   tür bir durum değildir; ayrım etiket metniyle yapılır. */

/* ── MOTORUN İZİ (2026-08-08) ──
   Gökhan: *"Eklediğini müşteri görüyor mu? Listede olmayan bir şeyin
   eklendiğini nasıl belirgin göstereceğiz?"*
   ⭐ Tür rozetinin AKSİNE burada renk HAK EDİLMİŞ: bu bir durum bildirimi —
   "bu satırı sen koymadın". Renk bütçesi tam da bunun için saklanıyordu. */
.iz-rozet{
  flex:none;
  font:var(--agirlik-vurgu, 600) 10.5px/1 var(--font-ui);
  letter-spacing:.05em;
  padding:3px 7px;border-radius:999px;
  border:1px solid var(--warn,#c98a2b);
  background:color-mix(in srgb, var(--warn,#c98a2b) 12%, transparent);
  color:var(--warn,#c98a2b);
  cursor:help;
}
/* ⛔ ROZET ADI EZMEZ (ölçüldü 2026-08-08, tarayıcıda görüldü: eklenen satırın
   adı "M"ye düşmüştü). `.feed-main` tek satırlık esnek kutu; üçüncü öge girince
   ad kutusunu sıfıra sıkıştırıyordu. Rozet ALT SATIRA sarılır ve ad kendi
   genişliğini korur. */
.feed-main{flex-wrap:wrap;row-gap:4px}
.feed-main > .feed-combobox{flex:1 1 120px;min-width:110px}
.motor-izi{
  margin:0 0 10px;padding:10px 12px;
  /* ⚠️ 2026-08-22: sol kenardaki 3px'lik renkli şerit KALDIRILDI (kalın tek
     kenar vurgusu — craft-floor yasağı). Uyarı rengi kaybolmuyor: çerçevenin
     TAMAMI `--warn` oldu, dolgu zaten aynı aileden. Yeni renk eklenmedi. */
  border:1px solid var(--warn,#c98a2b);
  border-radius:10px;
  background:color-mix(in srgb, var(--warn,#c98a2b) 6%, transparent);
  font:var(--agirlik-metin, 400) 13px/1.5 var(--font-ui);color:var(--ink);
}
.motor-izi .iz-baslik{font-weight:var(--agirlik-vurgu, 600);margin-bottom:6px}
.motor-izi .iz-liste{margin:0;padding-left:18px}
.motor-izi .iz-liste li{margin:2px 0}
.motor-izi .iz-liste li.iz-eklendi{margin-top:6px}
.motor-izi .iz-not{
  margin-top:7px;font-size:12px;color:var(--muted);
}
.motor-izi .mini{margin-left:6px}

/* ── GEREKÇE ÖZETİ (2026-08-31, #19): "ne değişti" listesinin altındaki
   KATMANLI ayrıntı — "neden böyle?".
   ⚠️ Yeni renk/sabit YOK: kutunun kendi çerçeve rengi ve mevcut belirteçler
   (`--line`, `--muted`, `--accent`) kullanılıyor (arayuz-tasarimi md.5).
   ⚠️ `font:` kısayolu KULLANILMIYOR — uzun adlar (aynı md.5'in ölçülmüş
   tuzağı: kısayola CSS-wide anahtar girince bildirim sessizce düşüyor). */
.motor-izi .iz-gerekce{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--warn,#c98a2b) 35%, transparent);
}
.motor-izi .iz-gerekce > summary{
  cursor:pointer;
  list-style:none;
  color:var(--accent);
  font-size:13px;
  font-weight:var(--agirlik-vurgu, 600);
  user-select:none;
}
.motor-izi .iz-gerekce > summary::-webkit-details-marker{display:none}
.motor-izi .iz-gerekce > summary::after{content:" ▾";font-size:10.5px}
.motor-izi .iz-gerekce[open] > summary::after{content:" ▴"}
.motor-izi .gerekce-liste{margin:8px 0 0;padding-left:20px}
.motor-izi .gerekce-liste li{margin:0 0 8px}
.motor-izi .gerekce-tekrar{color:var(--muted);font-weight:var(--agirlik-metin, 400)}
.motor-izi .gerekce-bedel,
.motor-izi .gerekce-sinir{
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed var(--line);
  font-size:12.5px;
}

/* ── Sayı girdileri: yuvarlak köşe, ince çerçeve, sağa hizalı ── */
.feedtable input.num{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:8px;
  padding:5px 6px;
  /* ⛔ 700 DENENDI VE GERI ALINDI — sayfada hicbir sey degismiyor.
     OLCULDU (tarayicida, document.fonts hazirken, canvas ile):
       IBM Plex Sans  400 -> 59,01px   500 -> 59,01px   (ayni yuz)
                      600 -> 62,21px   700 -> 62,21px   (ayni yuz)
     Yalniz IKI yuz barindiriliyor (ui/fonts/: 400 ve 600, iki aile icin de).
     700 istemek 600'u cizdirir; yazmak sahte bir basamak uydurmak olur.
     → Bu deger 600'de KALIYOR. Yem adiyla ayni agirlikta ama ayri kanallarda
       ayrisiyor: mono yuz · sagda hizali · cerceveli kutu · --card zemin.
     ⚠️ DAHA BUYUK BULGU (2026-08-11): iki CSS dosyasinda 162 font-weight
        kullanimi var, 114'u (%70) istedigi yuze ULASMIYOR — 500·620·640·650·
        700·750·800·850 hepsi 400 ya da 600'e dusuyor. On basamaklik bir
        merdiven yazili, gercekte IKI basamak var. Yazi tipi sorusuyla
        birlikte Fable'a goturuluyor. */
  font:var(--agirlik-vurgu, 600) 13px/1 var(--font-num);
  font-variant-numeric:tabular-nums;
  text-align:right;color:var(--ink);
  width:100%;max-width:70px;
}
.feedtable input.num:focus{outline:none;border-color:var(--brand)}
.price-cell input.num{max-width:48px;font-weight:var(--agirlik-metin, 400);color:var(--muted)}  /* ₺/kg ikincil */
/* tarayıcı spinner'ları kapalı — adımlama −/+ ile */
.feedtable input.num::-webkit-outer-spin-button,
.feedtable input.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.feedtable input.num[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* ── kg adım düğmeleri: masaüstünde gizli (mobil kart düzenine dokunulmadı) ── */
.kg-adim{display:flex;align-items:center;justify-content:flex-end;gap:6px}
/* ⚠️ 641 -> 721: kart duzeni 720px'e cikarildi (2026-07-29), −/+ dugmeleri
   kart duzeninin parcasi; esik onunla birlikte kaymali. */
@media (min-width:721px){.kg-btn{display:none}}

/* ── Kural rozeti: tek küçük düğme; serbest soluk ── */
.kural-rozet{
  font:var(--agirlik-vurgu, 600) 10.5px/1 var(--font-ui);
  padding:5px 7px;border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-soft);color:var(--ink);
  cursor:pointer;white-space:nowrap;
}
.kural-rozet:hover{border-color:var(--brand)}
.kural-rozet[data-tip="serbest"]{background:transparent;color:var(--muted)}  /* kural yok → geri planda */
.kural-rozet[data-tip="kilit"]{border-color:var(--muted)}                    /* kilit: biraz daha belirgin sınır */

/* ── Sil düğmesi: hover'a kadar sessiz ── */
.remove-cell .mini{
  border:0;background:none;
  color:var(--muted);font-size:15px;line-height:1;
  padding:2px 6px;border-radius:6px;cursor:pointer;
}
.remove-cell .mini:hover{color:var(--red)}   /* kırmızı yalnız yıkıcı eylemde */

/* ── Toplam: üstte ince çizgi, kalın yazı ── */
.feedtable tfoot td{
  border-top:1px solid var(--line);
  background:var(--card-head);
  font-weight:var(--agirlik-vurgu, 600);
  padding:9px 8px;
}
.feedtable tfoot td:first-child{font:var(--agirlik-vurgu, 600) 13px/1 var(--font-ui)}
.feedtable tfoot .num{font-weight:var(--agirlik-vurgu, 600)}


/* ── Hero rakamı: harf aralığı ÇOCUKLARA sızmasın ────────────────────────
   ⚠️ `.big { letter-spacing: -0.045em }` 68px'lik rakamda doğru duruyor ama
   HESAPLANMIŞ PİKSEL olarak (-3,06px) çocuklara miras kalıyor. 16px'lik
   "L/gün" ve 11px'lik "ENERJİ" rozetinde harfler üst üste biniyordu
   (Gökhan, 2026-07-27: "L/gün çok sıkışık, enerji yazısı da öyle").
   em-tabanlı aralık büyük başlıkta kalmalı, küçük metinde sıfırlanmalı. */
.big small,
.big .limtag,
#limtag {
  letter-spacing: normal;
}

/* Rozet nefes alsın: 11px yazıya 3px yatay boşluk yetmiyordu. */
#limtag {
  padding: 3px 9px;
  line-height: 1.5;
}

/* "L/gün" rakamdan biraz ayrılsın; bitişik durunca okuma bozuluyor. */
.big small {
  margin-left: 4px;
  margin-right: 2px;
}

/* ── Hamle çubuğu ORTA sütunda ────────────────────────────────────────────
   2026-07-28. Çubuk sağ sütunun dibine yapışıktı; ÖLÇÜLDÜ: ekran dibinde
   1000px'te duruyordu, İşkembe Bekçisi ise 1039px'e iniyordu — yani
   "kalsiyum ekle / soda ekle"nin göründüğü satırları ÖRTÜYORDU.
   Ayrıca `Değerlendir` ile sırayla basılan iki düğme 650px uzaktaydı.

   Masaüstünde artık AKIŞTA, `Değerlendir`in hemen altında.
   ⚠️ Tek sütuna düşünce (≤1050px) yapışkanlığa geri döner — orada sayfa
   uzuyor ve düğme ekrandan çıkıyor. */
.hamle-cubugu {
  position: static;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 12px;
  background: var(--card-head);
}

/* Tek sütuna düşünce çubuk EKRANA sabitlenir. `sticky` yetmiyor: yapışkanlık
   yalnız kapsayıcı kutunun (rasyon kartı) sınırında çalışıyor, aşağı inince
   çubuk kayboluyordu — ÖLÇÜLDÜ (375px, kaydırma 1200: çubuk 855px'te, ekran
   812px). Mobilde sonucu okurken düğmeye tekrar basılabilmeli.
   ⚠️ Sabit çubuk içeriği ÖRTER — bedeli `body`ye alt boşluk olarak ödendi.
   (Bu turda düzelttiğimiz hatanın ta kendisi; tekrarlamayalım.) */
@media (max-width: 1050px) {
  .hamle-cubugu {
    position: fixed;
    right: 12px;
    bottom: 0;
    left: 12px;
    z-index: 15;
    margin-top: 0;
    border-radius: 12px 12px 0 0;
    background: var(--card);
    box-shadow: 0 -6px 20px rgba(21, 63, 50, 0.16);

    /* ⛔⛔ TELEFONDA GECIT SAYACI KESILIYORDU — OLCUM BULDU, kimse soylemedi.
       375px, canli DOM:  clientWidth 349 · scrollWidth 415 (icerik 66px tasiyor)
       #hamleGecit "3/4 → 4/4 guvende"  sol 312 → sag 428, ekran 375
       → 53px DISARIDA. Ekran goruntusunde dogrulandi: "guvende" kelimesi
         HIC YOK, "4/4" yarim.
       O ogenin CSS'indeki KENDI gerekcesi: "4/5 → 5/5 — dengeleyince
       duzelecegini ONCEDEN soyluyor." Telefonda soylemiyordu.
       Projenin "motorun kararini tasiyan hicbir oge kaybolmaz" kuralinin
       kapsaminda: kaldirilmadi, SESSIZCE KESILDI.
       ⚠️ Ayni cubuktaki hamleSeri/hamleGecis de gorunmuyor AMA display:none,
          yani KASITLI gizli — onlara dokunulmadi. */
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* `body.advisor` sınıfını kan/kuru sayfaları da taşıyor; boşluk yalnız
     çubuğun GERÇEKTEN olduğu sayfada eklensin. */
  body:has(.hamle-cubugu) {
    padding-bottom: 86px;
  }
}

/* ── Çubuktaki geçit sayacı ───────────────────────────────────────────────
   Gökhan (2026-07-27): "Dengelerken göstergelerin yeşile döndüğünü görmesi
   çok önemli; kayan durumunda orası görünmüyor."

   Sorun yapısal: EYLEM aşağıda (yapışkan çubuk), GERİ BİLDİRİM yukarıda.
   Geri bildirimi eylemin yanına getiriyoruz. */
.hamle-gecit {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow-bg);
  color: var(--yellow-ink);
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  white-space: nowrap;
}

.hamle-gecit.tam {
  background: var(--green-bg);
  color: var(--green-ink);
}

/* "4/5 → 5/5" — dengeleyince düzeleceğini önceden söylüyor. */
.hamle-gecit.iyilesiyor {
  background: var(--green-bg);
  color: var(--green-ink);
}

/* Geçit kartı rengi ANİDEN değil, yumuşak geçsin: kullanıcı yukarı
   kaydırdığında "az önce mi değişti?" diye düşünmesin. Hareket bütçesi
   içinde kalır — yalnız renk, konum/boyut değil. */
.gate-card,
.gate-state,
.gate-fill {
  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gate-card,
  .gate-state,
  .gate-fill {
    transition: none;
  }
}

/* "Geçitleri göster" — hepsi güvendeyken kartlar katlanır, yer kalır.
   Yer gerçekten sorun varken harcanmalı. */
.gecit-ac {
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
}

.gecit-ac:hover {
  border-color: var(--brand);
  color: var(--ink);
}

/* Göstergeler orta sütunda: geniş yer var, dört gösterge YAN YANA sığıyor.
   Dar ekranda kendiliğinden ikiye, sonra teke iner. Sağ sütundayken 2×2
   olmak zorundaydı; burada tek satıra inince dikey yer de kazanılıyor. */
/* ⚠️ Göstergeler 2026-07-28'de SAĞ sütuna geri döndü (Gökhan: "Bu görüntüye
   dönelim"). Orta sütundayken tek satıra yayılsın diye `auto-fit` kuralı
   vardı; artık sağ sütunda ve mockup'taki gibi 2 sütun olmalı — o da
   `styles.css`teki taban kuralın kendisi. Kural burada TUTULUYOR ki
   göstergeler bir gün tekrar ortaya taşınırsa hazır olsun. */
.midcol .indi-grid {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

/* ── Yem seçicide ÇİFTLİĞİN KENDİ YEMİ ────────────────────────────────────
   Gökhan (2026-07-28): *"Kendi yemlerinin başına belirleyici bir şey
   koyabiliriz, gözün kolay seçeceği."* İşaret kodun (#123) yerinde duruyor:
   göz zaten oraya bakıyor ve 900001 gibi bir sayı kullanıcıya bir şey
   söylemiyordu. */
.feed-id.kendi {
  color: var(--brand);
  font-size: 15px;
  text-align: center;
}

.feed-option.kendi-yem .feed-name {
  font-weight: var(--agirlik-vurgu, 600);
}

.feed-kendi-not {
  color: var(--brand);
  font-weight: var(--agirlik-vurgu, 600);
}

/* Sahada karşılığı olmayan yem (bkz. pazar.py).
   ⚠️ SOLUKLAŞTIRILMAZ, İŞARETLENİR. Soluk gri "seçilemez" der; oysa
   kullanıcı elinde varsa bunu seçebilir — kapattığımız ÖNERİ, kullanım
   değil. Turuncu: uyarı ama yasak değil (yeşil→sarı→turuncu→kırmızı). */
.feed-onerilmez-not {
  color: var(--turuncu);
  font-weight: var(--agirlik-vurgu, 600);
}

/* ── Kayıtlı yemlerim listesi ─────────────────────────────────────────────
   Satır kart DEĞİL çizgi: yem tablosunun aynı dilini konuşsun (2026-07-28
   tablo rötuşunda alınan karar). */
.kayitli-yemler {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.yemlerim-liste {
  display: grid;
  gap: 0;
}

.yemim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.yemim:first-child {
  border-top: 0;
}

.yemim-ad {
  min-width: 0;
  flex: 1 1 auto;
}

.yemim-ad b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yemim-alt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.yemim-tarih {
  color: var(--muted);
  font-size: 12px;
}

.yemim-eylem {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.yemim-eylem .act {
  padding: 5px 10px;
  font-size: 12px;
}

/* ── Besin analizi şeridi: YANA KAYMASIN ──────────────────────────────────
   Gökhan (2026-07-28): *"Besin analizi orta sütunda altta tam çıkıyor
   Fable'da, bizde ise yana kaydırmak zorunda kalıyorsun."*

   SEBEP ÖLÇÜLDÜ: mockup'ta 8 kutu vardı, bizde 9 — bugün ŞEKER eklendi.
   9 × 62px (kutu tabanı) + 92px başlık + boşluklar ≈ 700px; orta sütun
   bunun altına inince `overflow-x: auto` devreye girip kaydırma çubuğu
   çıkıyordu. Orta sütun ekranın %46,3'ü olduğundan bu, yaklaşık 1550px'in
   altındaki HER ekran demekti — yani çoğu dizüstü.

   İKİ KADEMELİ ÇÖZÜM:
   1. Kutu tabanı ve iç boşluklar daraldı -> geniş ekranda hâlâ TEK SATIR
   2. Yine de sığmazsa ALT SATIRA SARAR, yana kaymaz. Sarmak artık bedava:
      göstergeler sağa taşınınca orta sütun 1068 -> 737px'e indi, yani
      dikey yer bol.  */
.besin-serit-govde {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Taban 62 -> 52px, iç boşluk 10 -> 7px, başlık 92 -> 70px.
   ÖLÇÜLDÜ: bu üçüyle dokuz kutu 1280px ekranda (orta sütun 616px) hâlâ
   TEK SATIRDA. Daha darda sarar — kaydırma çubuğu yine çıkmaz. */
.besin-serit .besin-oge {
  min-width: 52px;
  padding: 0 7px;
}

.besin-serit .besin-serit-basi {
  max-width: 70px;
}

/* `.sade-baslik` sınıfı ARTIK GEREKSİZ: ince başlık `.card h2` içinde
   varsayılan oldu (18 panelin hepsinden ikon ve üst etiket kalktı).
   Sınıf index.html'de duruyor ama bir şey yapmıyor; zararsız. */

/* ── Kendi analizini gir ───────────────────────────────────────────────────
   ⚠️ Bu dosya styles.css'ten SONRA yükleniyor; düzen kuralları BURAYA. */
.analiz-paneli {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 12px;
  background: var(--card-head);
}

.analiz-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.analiz-baslik {
  margin-top: 2px;
  font-size: 15px;
  font-weight: var(--agirlik-vurgu, 600);
}

.analiz-govde { padding: 14px 16px 16px }

.analiz-satir {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 10px;
  margin-bottom: 14px;
}

/* Kılavuzlu seçim satırı İKİ alanlıdır (Sınıf + Çeşit) — üç sütunluk
   ızgarada ikisi de dar kalıyordu ve sınıf adları ("Tahıllar ve tane yan
   ürünleri") kesiliyordu. Kardeşinin desenini kopyalar, yeni sabit yok. */
.analiz-satir.analiz-satir-ikili { grid-template-columns: 1fr 1fr }

.analiz-bolum-basi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 8px;
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.analiz-bolum-basi span {
  font-weight: var(--agirlik-metin, 400);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

/* Dar sütunlarda bile 6 kutu sığsın; taşma OLMAMALI (bu turda öğrenildi). */
.analiz-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.analiz-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

.analiz-alan > span {
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--muted);
}

.analiz-alan > span em {
  margin-left: 4px;
  font-style: normal;
  font-weight: var(--agirlik-metin, 400);
  opacity: 0.72;
}

.analiz-alan input,
.analiz-alan select {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font: var(--agirlik-vurgu, 600) 13px/1.2 var(--font-num);
  color: var(--ink);
}

.analiz-alan input[type="text"] { font-family: var(--font-ui) }
.analiz-alan small { font-size: 10.5px; color: var(--muted) }

/* Tarayıcının sayı okları dar kutuda ~16px yiyordu (bu turda ölçüldü). */
.analiz-alan input[type="number"] { -moz-appearance: textfield }
.analiz-alan input[type="number"]::-webkit-outer-spin-button,
.analiz-alan input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.analiz-eylem {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.analiz-ipucu { font-size: 12px; color: var(--muted) }

.analiz-sonuc {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.analiz-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.koken-rozet {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  white-space: nowrap;
}

.koken-rozet.olculdu { background: var(--blue-bg); color: var(--blue-ink) }
.koken-rozet.hesaplandi { background: var(--green-bg); color: var(--green-ink) }
.koken-rozet.benzerinden { background: var(--card-head); color: var(--muted) }

.analiz-benzer { font-size: 12px; color: var(--muted) }

.analiz-tablo { width: 100%; border-collapse: collapse }

.analiz-tablo th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  font: var(--agirlik-vurgu, 600) 10.5px/1 var(--font-num);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.analiz-tablo td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.analiz-tablo .num {
  font: var(--agirlik-vurgu, 600) 13px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.analiz-tablo .num .u {
  margin-left: 3px;
  font-weight: var(--agirlik-metin, 400);
  color: var(--muted);
}

.analiz-tablo th.num { text-align: right }

.analiz-uyari { margin: 12px 0 0; padding-left: 18px }

.analiz-uyari li {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--muted);
}

.analiz-uyari li.sert { color: var(--red-ink); font-weight: var(--agirlik-vurgu, 600) }

.analiz-not {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .analiz-satir { grid-template-columns: 1fr }
  /* ⚠️ Daha ÖZGÜL seçici olduğu için ayrıca yazılmalı: yoksa telefonda
     iki sütun kalır ve ~347px'lik gerçek viewport'ta iki açılır liste
     birbirini eziyordu. */
  .analiz-satir.analiz-satir-ikili { grid-template-columns: 1fr }
}

.analiz-kaydet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.analiz-hata { color: var(--red-ink); font-weight: var(--agirlik-vurgu, 600) }

/* ── Bayat sonuç şeridi ────────────────────────────────────────────────────
   Otomatik hesap bilerek yok (öneri çözücüsü 1782 ms). Bedeli: girdi değişince
   ekrandaki sayılar eski rasyona ait kalıyor. 2026-07-29'a kadar bunun tek
   işareti üst çubuktaki küçük "Değerlendir'e bas" yazısıydı; panellerde
   hiçbir işaret yoktu. Gerekçenin tamamı app.js `bayatIsaretle` başında.

   ⚠️ YAPIŞKAN: sağ sütun 1400px'e kadar uzuyor; statik bir uyarı kaydırınca
   görüş alanından çıkardı — tam da uyarının işe yarayacağı anda.
   ⚠️ Opaklık DÜŞÜRÜLMÜYOR. Sayıları soluklaştırmak kontrastı bozar ve
   Fable'ın dün ölçtüğü kusurun aynısını üretir (.kd.yok opacity:.55).
   Sayılar eski ama OKUNAKLI kalmalı; söyleyen şey şerittir. */
.bayat-serit {
  position: sticky;
  top: 78px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid var(--yellow);
  border-radius: 11px;
  background: var(--yellow-bg);
  color: var(--yellow-ink);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  line-height: 1.35;
  box-shadow: var(--shadow);
}

.bayat-ikon { flex: 0 0 auto; font-size: 14px }
.bayat-metin { flex: 1 1 auto; min-width: 0 }
.bayat-serit strong { font-weight: var(--agirlik-vurgu, 600) }

.bayat-serit .bayat-dugme {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
}

/* Şerit görünürken sonuç başlıklarındaki "şu an geçerli" hissini kır:
   kart kenarlığı nötrleşir, renk iddiası şeride devredilir. */
.karar-kolonu.bayat .card.status-card,
#results.bayat .card.status-card {
  border-color: var(--line);
}

@media (max-width: 720px) {
  .bayat-serit {
    top: 0;
    flex-wrap: wrap;
  }
  .bayat-serit .bayat-dugme { margin-left: auto }
}

/* ── Hedef şeridi ──────────────────────────────────────────────────────────
   Sekiz hayvan alanı 2026-07-29'a kadar 240px'lik ayrı bir sütundu; gerekçe
   ve ölçümler index.html'de. Burada yalnız görünüm var.

   ⚠️ Şerit DEĞERLERİ YAZAR, "Hayvan bilgisi ▸" demez. Bu bilinçli: bu sekiz
   sayı ekrandaki her sayının varsayımı. Gizlenirse yanlış girdi sessiz
   kalır — bu projede aynı aileden üç kusur çıktı ("sessiz varsayılan").
   Çipler tıklanabilir ve doğrudan kendi alanına odaklanır: 26 L yanlışsa
   ona basıp düzeltirsin, formda alan aramazsın. */
.hedef-serit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 18px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.hedef-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.hedef-ikon { font-size: 15px; line-height: 1 }

.hedef-etiket {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hedef-cipler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hedef-cip {
  min-height: 26px;              /* dokunma payı padding'le büyütülüyor */
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font: var(--agirlik-metin, 400) 12px/1.2 var(--font-num);
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}

.hedef-cip b { font-weight: var(--agirlik-vurgu, 600) }

.hedef-cip:hover,
.hedef-cip:focus-visible {
  border-color: var(--brand);
  background: var(--card);
}

.hedef-ac {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  cursor: pointer;
}

.hedef-ac:hover { border-color: var(--brand) }

.hedef-caret {
  font-size: 10.5px;
  transition: transform var(--ease);
}

.hedef-serit.acik .hedef-caret { transform: rotate(180deg) }

.hedef-govde {
  flex: 1 1 100%;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.hedef-govde .learning-strip { margin-bottom: 12px }

@media (max-width: 720px) {
  .hedef-serit { padding: 8px 10px }
  .hedef-etiket { display: none }   /* dar ekranda 🐄 ikonu zaten söylüyor */
  .hedef-govde .io { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  /* ⚠️ Çipler KALIYOR, yalnız küçülüyor. Telefonda üç-dördünü gizlemek
     yeri daha çok açardı ama gizlenen değer sessizce yanlış kalır — bu
     şeridin tek var oluş sebebi buna engel olmak. Ölçüldü: 12px/9px ile
     şerit 174px sürüyordu, 11px/7px ile iki satıra iniyor. */
  .hedef-cip {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 12px;
  }
  .hedef-cipler { gap: 4px }
  .hedef-serit { gap: 8px }
}

/* ── "Diğer" katlanır menüsü ───────────────────────────────────────────────
   Gerekçe ve ölçümler index.html'de. Burada yalnız görünüm var.
   ⚠️ `<details>` yerel öğe: aç/kapa, klavye ve Esc tarayıcıdan geliyor.
   Elle yazılmış bir menüde bunların hepsi ayrı ayrı kodlanır ve ayrı ayrı
   bozulur. */
.addrow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diger {
  position: relative;
}

.diger > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 37px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.diger > summary::-webkit-details-marker { display: none }
.diger > summary::after { content: "▾"; font-size: 10.5px }
.diger[open] > summary { border-color: var(--brand) }
.diger[open] > summary::after { content: "▴" }
.diger > summary:hover { border-color: var(--brand) }

/* Menü ÜSTE açılıyor: eylem şeridinin altında hemen "Dengele" çubuğu ve
   besin şeridi var; aşağı açılsa onları örterdi. */
/* ⚠️ AYNI TUZAK, İKİNCİ KEZ (aynı gün): tarayıcı kapalı `<details>`in
   içeriğini kendi `display:none` kuralıyla gizler; ona `display:flex`
   yazınca o kural SESSİZCE eziliyor ve menü kapalıyken de ekranda duruyor.
   Ölçüldü: `m.open === false` iken liste 156px yer kaplıyordu.
   Yukarıdaki `[hidden]` kuralının kardeşi — ikisi de "tarayıcının gizleme
   kuralı en zayıf seviyededir" gerçeğinden çıkıyor. */
.diger:not([open]) > .diger-liste {
  display: none;
}

/* Menü YUKARI açılıyor: eylem şeridinin hemen altında "Dengele" çubuğu ve
   besin şeridi var; aşağı açılsaydı onları örterdi. */
.diger-liste {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: max-content;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
}

.diger-ogesi {
  min-height: 38px;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.diger-ogesi + .diger-ogesi { border-top: 1px solid var(--line) }

/* ⚠️ AYIRICI CIZGI DOM KOMSULUGUNU okur, GORUNURLUGU degil: `+` secicisi
   gizli kardesi de sayar. Listenin basindaki kosullu oge ("Güvenliği
   düzelt", 2026-09-01) gizliyken bir sonraki oge listenin USTUNDE bos bir
   cizgi tasiyordu. */
.diger-ogesi[hidden] + .diger-ogesi { border-top: 0 }
.diger-ogesi:hover { background: var(--surface-soft) }

/* Geri alınamaz eylem: menünün DİBİNDE, kırmızı, ve onay soruyor.
   Eskiden "Değerlendir"in 47px üstündeydi. */
.diger-ogesi.tehlikeli {
  border-top: 1px solid var(--line);
  color: var(--red-ink);
}

.diger-ogesi.tehlikeli:hover { background: var(--red-bg) }

@media (max-width: 520px) {
  .addrow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .diger { grid-column: 1 / -1 }
}

/* Senaryo B'nin eylem bağı — gerekçe app.js `senaryolariCiz` içinde. */
.senaryo-uygula {
  margin-left: 10px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--accent);
  font-size: 12px;
  font-weight: var(--agirlik-vurgu, 600);
  white-space: nowrap;
  cursor: pointer;
}

.senaryo-uygula:hover { border-color: var(--brand); background: var(--surface-soft) }

/* Reddetme sebebi — düğmenin DİBİNDE, sarı, çünkü hata değil "şimdi olmaz".
   Kırmızı olsaydı kullanıcı bir şeyi bozduğunu sanırdı. */
.senaryo-neden {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--yellow-bg);
  color: var(--yellow-ink);
  font-size: 12px;
  line-height: 1.35;
}

/* ── Senaryo önizlemesi (2026-08-22) ──────────────────────────────────────
   Karta tıklayınca o senaryonun ÇÖZÜLMÜŞ hâli — Uygula'ya basmadan.

   YERLEŞİM TEK YERDE (burada) TANIMLI: geniş ekranda `.senaryo-alan` iki
   sütuna açılır (solda kartlar, sağdaki boşlukta panel); dar ekranda düz
   akıştır ve panel tıklanan kartın ALTINA girer. app.js kırılım noktasını
   TEKRARLAMAZ, `display`i okuyup ona göre yerleştirir.
   ⚠️ Kırılım 1050px: sayfanın zaten tek sütuna indiği yer (yukarıdaki
   `.wrap` bloku) — yeni sabit uydurulmadı. */
.senaryo-alan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: start;
  /* Kartlar «Senaryoları hesapla» düğmesinin dibine yapışıyordu (ölçüldü:
     düğme altı = kart üstü, 0px). Düğme kartların SEBEBİ, parçası değil. */
  margin-top: 10px;
}

@media (max-width: 1050px) {
  .senaryo-alan { display: block }
  /* ⚠️ 347px'te ad hücresi birimle/rozetle paylaşınca ad üç noktaya
     düşüyordu ("Fizikse… kg KM" — ölçüldü, kutu düzeninde ad TAM
     görünüyordu, yani rötuş kendi kusurunu doğurmuştu). Birim ve rozet
     alt satıra iner; ad tam genişliği alır. Bedeli iki satırın biraz
     uzaması, kazancı ölçünün adının okunması. */
  .oz-ad { flex-wrap: wrap }
  .oz-birim,
  .oz-not { flex-basis: 100% }
  .oz-not { align-self: flex-start }
  /* Akordeon: panel kartın hemen altında, araya nefes. */
  #senaryoKartlari > .senaryo-onizleme { margin: 2px 0 4px }
}

.senaryo[role="button"] { cursor: pointer }

/* Klavye odağı: kart artık bir düğme gibi davranıyor, o hâlde düğmenin
   odak dilini konuşmalı (styles.css `button:focus-visible` ile aynı üçlü).
   `div` olduğu için o kural onu kendiliğinden kapsamıyor. */
.senaryo[role="button"]:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus);
}

/* Seçili kart: durum GÖRÜLEBİLİR olmalı, ama "etkin" (bugünkü) kartın
   yeşil dolgusuyla yarışmamalı — halka kullanıyoruz, dolgu değil. */
.senaryo[aria-expanded="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--focus);
}

.senaryo-onizleme {
  padding: 12px 13px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-head);
}

.oz-basi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.oz-baslik {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
}

/* Kapat: 44px'lik dokunma eşiği görünmez ::before ile sağlanır (rozet
   dersi, 2026-07-29) — görsel boyut 26px kalır. */
.oz-kapat {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.oz-kapat::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.oz-kapat:hover { border-color: var(--brand); color: var(--ink) }

.oz-etiket {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oz-etiket span {
  font-weight: var(--agirlik-metin, 400);
  letter-spacing: 0;
  text-transform: none;
}

.oz-satirlar {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

/* ⭐ İKİ TABLONUN ORTAK IZGARASI (2026-08-22 rötuşu — Gökhan: "gönyede
   değil"). Sütunlar SATIRDA değil ŞABLONDA tanımlı; sayı sütunları `ch`
   ile ölçülüyor çünkü sayılar zaten eşit genişlikli (`.num` mono). Böylece
   rasyon tablosuyla besin tablosu AYNI hatta oturur — hizayı sayının
   uzunluğu değil ızgara belirler.
   ⚠️ Eski hâli flex'ti: her satır kendi genişliğini seçiyordu, kutu
   ızgarasında da satır başına 5/4 hücre düşüyordu; ayraçlar kayıyordu. */
.oz-satir {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)      /* ad (+ birim / rozet) — daralınca kısalan tek sütun */
    minmax(5ch, auto)   /* bugünkü */
    auto                /* ok */
    minmax(5ch, auto)   /* senaryo */
    minmax(5ch, auto);  /* fark */
  align-items: baseline;
  gap: 0 8px;
  padding: 6px 10px;
  font-size: 12.5px;
}

.oz-satir + .oz-satir { border-top: 1px solid var(--line) }

.oz-ad {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

/* Dar ekranda KISALAN ad olur; birim ve "çıkıyor" rozeti satırda kalır —
   ikisi de bilgidir, üç noktaya kurban gitmez. */
.oz-ad-metin {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oz-birim {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

/* ⭐ SATIR İÇİ HİYERARŞİ: bugünkü SOLUK, ok soluk, senaryo KOYU. Göz her
   satırda tek koyu sayıya iner — yeni değer. İki değer aynı ağırlıktayken
   "eski ile yeni ayrımı net değil"di (Gökhan, canlı inceleme). */
.oz-once,
.oz-ok {
  color: var(--muted);
}

.oz-once,
.oz-simdi,
.oz-delta {
  text-align: right;
  white-space: nowrap;
}

.oz-ok {
  text-align: center;
  font-size: 11px;
}

.oz-simdi {
  color: var(--ink);
  font-weight: var(--agirlik-vurgu, 600);
}

/* Fark: DEĞİŞTİ mi diye bakılır, iyi/kötü diye değil. Motor "bu artış
   iyidir" demiyor; renk hüküm verirse ekran motordan fazlasını söylemiş
   olur. O yüzden yeşil/kırmızı YOK — değişen koyu, değişmeyen soluk.
   ⚠️ KALIN DEĞİL: satırın tek kalın sayısı senaryo değeridir; fark da
   kalın olsaydı hiyerarşi yine ikiye bölünürdü. */
.oz-delta {
  color: var(--muted);
  font-size: 11.5px;
}

.oz-delta.degisti {
  color: var(--ink);
}

.oz-not {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}

.oz-bos {
  margin: 0;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.oz-uygula {
  margin: 14px 0 0;
  padding: 8px 12px;
  width: 100%;
}

/* ── Dokunma hedefleri ─────────────────────────────────────────────────────
   ÖLÇÜLDÜ (2026-07-29, Fable): kural rozeti 54x23, yem seçici oku 32x29 —
   ikisi de 44px'lik dokunma eşiğinin altında. (Stepper −/+ zaten 44x44,
   satır kartı 146px: onlar doğru ölçülmüş, dokunulmadı.)

   ⚠️ GÖRSEL boyut büyütülmüyor, yalnız DOKUNMA alanı. Rozeti büyütmek
   tabloyu bozardı; görünmez bir ::before yeterli.
   ⚠️ Yalnız DİKEYDE genişletiliyor. Yatayda 44px'e çıkarsa komşu hücreye
   (satır silme ×) taşar ve yanlışlıkla satır silinir — dar hücrelerde
   yatay büyütme çözüm değil, yeni kusur olur. */
@media (max-width: 720px) {
  .kural-rozet,
  .feed-toggle {
    position: relative;
  }

  .kural-rozet::before,
  .feed-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* `sonucaKaydir()` hero'yu ekranın tepesine hizalıyor; birkaç piksel nefes
   payı olmazsa kart kenarı ekran kenarına yapışık düşüyor. */
#hero {
  scroll-margin-top: 12px;
}

/* ── Bandı olmayan kadran ("bilgi") ────────────────────────────────────────
   Değer ölçülür, hakkında hüküm verilmez. NE YEŞİL NE KIRMIZI: dayanağı
   olmayan yeşil de bir iddiadır ve kırmızı kadar yanlıştır.
   Gerekçe: gostergeler.py `_durum` ve enerji kadranının başındaki not.
   ⚠️ Opaklık DÜŞÜRÜLMÜYOR — 28 Temmuz'da `.kd.yok { opacity:.55 }` ile
   öğrendik: soluklaştırmak kontrastı bozuyor ve "önemsiz" diye okunuyor.
   Bu sayı önemsiz değil, yalnız yargısız. */
.kd.bilgi .kd-deger {
  color: var(--ink);
}

.kd.bilgi .kd-igne {
  stroke: var(--muted);
}

.kd.bilgi .kd-gobek {
  fill: var(--muted);
}

/* Yeşil hedef yayı yok (bant yok), o yüzden eksen tek başına kalıyor;
   biraz belirginleşsin ki iğnenin nereye göre durduğu okunsun. */
.kd.bilgi .kd-eksen {
  stroke: color-mix(in srgb, var(--ink) 28%, transparent);
}

/* ── ⚠️ AÇILIR PANEL TAŞIYAN KART KIRPILMAZ ────────────────────────────────
   `.card{overflow:hidden}` (styles.css) yuvarlak köşelerin içini temiz
   tutmak için var. Ama "Rasyonu Kur" kartının İÇİNDE üç ayrı açılır panel
   doğuyor: yem listesi (`.feed-menu`), yem kuralı (`.kural-panel`) ve
   "Diğer" menüsü (`.diger-liste`). Kart kırpınca bunlar kesiliyor.

   ÖLÇÜLDÜ (2026-07-29, Gökhan bildirdi: *"menü altta kalıyor"*):
   son satırın yem listesi 320x320, alt kenarı y=874; kart y=770'te
   bitiyor → **104px kesiliyor** ve o kısım tıklanamıyor.

   ⚠️ BU AYNI HATANIN DÖRDÜNCÜ ÜYESİ (hepsi 27-29 Temmuz):
     1. `td.feed-cell`  kırpıyordu → yem listesi görünmüyordu
     2. `td.lock-cell`  kırpıyordu → kural paneli görünmüyordu
     3. `[hidden]` ezilmişti       → gizli şerit 147px yer kaplıyordu
     4. `.card`         kırpıyor   → liste kartın dibinde kesiliyor
   Hepsi tek cümle: BİR KAPSAYICININ KIRPMA/GİZLEME DAVRANIŞI, İÇİNDE
   DOĞAN MUTLAK KONUMLU PANELİ DE GÖTÜRÜR. Panel DOM'da vardır, ölçülür,
   ama görünmez ve tıklanamaz — konsol tertemizdir.

   ⚠️ YALNIZ BU KART. `.card`ın geneline dokunulmuyor: öbür on panelde
   açılır bir şey yok ve yuvarlak köşe kırpması işlerine yarıyor.
   Bu kartta köşeye taşan bir çocuk zemin de yok (`.card h2` zemini
   şeffaf), o yüzden görsel bedeli sıfır.
   Koruma: tests/test_acilir_panel_kirpilmiyor.py */
#rationInputPanel {
  overflow: visible;
}

/* Menü aşağı sığmıyorsa yukarı açılır — gerekçe app.js `menuyuKonumlandir`. */
.feed-menu.yukari {
  top: auto;
  bottom: calc(100% + 4px);
}

/* "Aradığın yem listede yok" — çıkmaz sokak değil, çıkışı var. */
.feed-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.feed-empty-eylem {
  padding: 7px 12px;
  border: 1px solid var(--brand);
  border-radius: 9px;
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  cursor: pointer;
}

.feed-empty-eylem:hover {
  background: var(--surface-soft);
}

/* Eylem şeridi dört düğme oldu ("Kendi yemini tanımla" menüden çıktı). */
.addrow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .addrow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ⚠️ Telefonda tablo KIRPMASIN — gerekçe styles.css'teki `overflow-x: auto`
   notunda. Özet: o kural dikeyi de kırpıcı yapıyor ve ≤640px'te satırlar
   zaten karta döndüğü için yatayda kaydıracak bir şey yok.
   Bu dosya styles.css'ten SONRA yükleniyor, o yüzden düzeltme burada. */
@media (max-width: 720px) {
  .feedtable {
    overflow: visible;
  }
}

/* --- Çiftliğe kaydet penceresi (danışman modülü, 2026-07-30) -------------
   `<dialog>` kullanıldı: odak tuzağı, ESC ve arka plan kilidi tarayıcıdan
   gelir. Elle yazılan modal'larda bu üçü hep eksik kalır. */
.kaydet-pencere {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  padding: 18px 20px;
  max-width: 420px;
  width: calc(100vw - 32px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.kaydet-pencere::backdrop { background: rgba(0, 0, 0, 0.38); }
.kaydet-pencere .kaydet-alt {
  margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5;
}
.kaydet-etiket {
  display: block; margin: 10px 0 4px; font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600); color: var(--muted);
}
.kaydet-etiket small { font-weight: var(--agirlik-metin, 400); }
.kaydet-pencere select,
.kaydet-pencere input,
.kaydet-pencere textarea {
  width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.kaydet-pencere textarea { resize: vertical; }
.kaydet-hata { margin: 10px 0 0; color: #c0392b; font-size: 13px; min-height: 1em; }
.kaydet-dugmeler {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap;
}

/* --- BÜTÜNLÜK: bileşik gösterge halkası (2026-07-31) --------------------
   Tasarım: Fable · `bekleme_odasi/bilesik_kadran_tasarim.md`

   ⚠️ RENK DİLİ ÜRÜNÜN KENDİ DİLİ. Önizlemede kendi tonlarımı uydurmuştum
   (#2e7d46 gibi) ve Gökhan yakaladı: "normalde biz yeşili olumlu olarak
   kullanmıyor muyduk?" Haklıydı — burada `--yesil/--sari/--kirmizi`
   kullanılıyor. Dört basamak için tek yeni renk eklendi (turuncu) ve o da
   var olan üçüyle aynı doygunlukta seçildi.

   ⚠️ BU BİR KADRAN DEĞİL, TAM HALKA. Ötekilerle aynı biçimde (yarım daire
   yay) çizilseydi kullanıcı onu "20. kadran" diye okur ve aralarında
   kaybolurdu. Aynı alfabe, farklı punto. */
:root {
  --turuncu: #9c4a12;
  --turuncu-zemin: #fbeade;
}
:root[data-theme="dark"] {
  --turuncu: #e08a4c;
  --turuncu-zemin: #3a2314;
}

.hero-ic { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-sag { flex: 1 1 220px; min-width: 0; }
.btn-halka { flex: 0 0 132px; width: 132px; }
.btn-halka svg { display: block; width: 100%; height: auto; }
.btn-halka .btn-yuzde { font-size: 27px; font-weight: var(--agirlik-vurgu, 600); text-anchor: middle; }
.btn-halka .btn-alt { font-size: 12px; text-anchor: middle; fill: var(--metin-3, #6b6b6b); }
.btn-halka .btn-kapali { font-size: 15px; font-weight: var(--agirlik-vurgu, 600); text-anchor: middle; }
.btn-rozet {
  display: inline-block; color: #fff; font-size: 12px; font-weight: var(--agirlik-vurgu, 600);
  padding: 2px 10px; border-radius: 999px; letter-spacing: .02em; margin-bottom: 4px;
}
.btn-sebep { color: var(--metin-3, #6b6b6b); font-size: 13px; margin-top: 2px; }
@media (max-width: 560px) {
  .hero-ic { gap: 12px; }
  .btn-halka { flex: 0 0 104px; width: 104px; }
}

/* Bütünlük → Kadranlar bağı. Gökhan (2026-07-31): "kırmızı kadran sayısına
   tıklayınca kadranlar bölümüne gitsin." */
.btn-kadran-bag {
  display: inline-block; margin-top: 7px; padding: 3px 10px;
  font: inherit; font-size: 13px; font-weight: var(--agirlik-vurgu, 600);
  color: var(--kirmizi); background: var(--kirmizi-zemin);
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.btn-kadran-bag:hover { border-color: currentColor; }
.btn-kadran-bag.temiz { color: var(--yesil); background: var(--yesil-zemin); }


/* ═══════════════════════════════════════════════════════════════════════
   DERINLIK: OYUK — "sekmeye ait olan" ile "kalici olan"i AYIRIR
   ═══════════════════════════════════════════════════════════════════════
   Dis incelemenin 6. maddesi: "sekme degisince neyin degisip neyin KALDIGI
   okunmuyor." Bu bir AYRAC sorunu degil DERINLIK sorunudur — ayrac ayni
   duzlemde ayirir, derinlik KAPSAMA anlatir.

   ⭐ COZUM: sekmeli alani YUKSELTMEK yerine ZEMINE INDIRMEK. Boylece hicbir
   oge terfi etmez ("dikkat!" okumasi icin malzeme dogmaz) ve motorun bir
   sonraki hamlesini tasiyan #recommendationPanel geri itilmez.
   (Bu, 2026-08-11 kaydindaki yonun TERSIDIR ve bilerek oyle — gerekcesi
    bekleme_odasi/GOZE_HOSLUK_BES_EKSEN.md'de yazili.)

   UC DUZLEM (dorduncusu OLCULEREK reddedildi: koyu temada 4. adim --line'i
   asiyor ve cerceve TERS DONUYOR):
     D0 ZEMIN    "bu bir yuzey degil, ustunde yuzey durabilen tabandir"
     D1 YUZEY    "sayfanin kalici parcasi; sekmeye ait DEGIL"
     D2 GECICI   "akistan koptu ve altindakini ortuyor"

   ✅ CAKISMA TESTINI DORT KANITLA GECTI:
   1. Cokme YALNIZ dolgudan gelir — ink/muted/kalinlik/punto/OPAKLIK sabit.
      (Kayitli ders program-theme.css'te: "Opaklik DUSURULMUYOR"; gercek
       vakasi `.kd.yok{opacity:.55}` 28 Temmuz'da geri alinmisti.)
   2. Duzlem TOPLU: sekiz panel birden iner. Bir HUKUM tekil olmak zorundadir.
   3. ⭐ Uyelik olcutu MEKANIK: `data-sekme` niteligi var mi? Nitelik markup'ta
      sabit, JS ona dokunmuyor → duzlem RASYONUN DURUMUNA GORE DEGISEMEZ.
      Degisemeyen sey hukum tasiyamaz.
   4. ⭐ #hamleCubugu: sticky → static → fixed, PENCERE GENISLIGINE gore
      duzlem degistiriyor. Hukum pencere genisligine gore degismez.

   ⚠️ Oyugun ICINDE kartlar durur ve bu KASITLIDIR: .gate-card (hangi kisit
   bagliyor) · .kd-durak (hangi olcum hedef disi) · .indi · .note-item.
   Ebeveyn-cocuk farki mesru; yasak olan KARDESLER arasinda varyans, ve
   oyugun icindeki kartlarin hepsi ayni duzlemde.

   GERI ALMA: --oyuk-dolgu tek basina geri alinirsa oyuk kaybolur ama
   cerceveler eksik kalir. Durustcesi: tek satirla ETKISIZLESTIRILIR,
   uc satirla TAM GERI ALINIR.                                            */

#results > [data-sekme] {
  background: var(--oyuk-dolgu);
  border-color: var(--oyuk-kenar);
  box-shadow: none;
}

#results > [data-sekme] > h2 {
  border-bottom-color: var(--oyuk-cizgi);
}

/* Yapiskan kadran basligi oyukla ayni boyada olmali; yoksa kaydirirken
   uyumsuz bir serit birakir. */
#results > [data-sekme] .kd-blok-baslik {
  background: var(--oyuk-dolgu);
}


/* ── ORTA SUTUN NEFESI (2026-08-11) ─────────────────────────────────────
   ⭐ Bu ekranda dikey uzama MALIYET DEGIL KAZANC. Olculdu (1440px):
     orta sutun alt=1116 · sag sutun alt=1633  →  517px OLU ALAN,
     sayfanin %31,7'si. Dis inceleme md. 9: "sol sutun kisa, alt yari bos,
     BITMEMIS SAYFA hissi." Orta sutun uzayinca iki sutun dengelenir.
   ⛔ Yalniz .midcol — sag sutuna DOKUNULMAZ; o uzarsa olu alan BUYUR.
   ⚠️ Telefonda ters yone calisir; --bosluk-5 orada 28 -> 20px'e iniyor
      (yukaridaki @media 720px). */
.midcol .card > .body {
  padding: var(--bosluk-5) var(--bosluk-4);
}

/* Kartlar arasi ayrim, kart ICI nefesten BUYUK olmali — yoksa hiyerarsi
   tersine doner ("ayni karttaymis" gibi okunur). :not(:last-child): son
   kartin altina bosluk eklemek sutunu bosuna uzatir. */
.midcol > .card:not(:last-child) {
  margin-bottom: var(--bosluk-5);
}


/* ⛔ "HERO KAGIDA INDI" DENEMESI GERI ALINDI (2026-08-11)
   Gokhan once "bence hos duruyor" dedi, sonra 8894 onizlemesiyle
   karsilastirinca: "beyaz olmasi gozu yoruyor sanirim, onu yine yesil
   birakacagiz." ⭐ OLCUM ONU DOGRULADI:
     ekran ortalama parlakligi   koyu hero 0,709  →  kagit hero 0,863
     hero'nun kendisi            L 0,060          →  L 0,967   (ekranin %17'si)
     kiyas: Codex'in 8894 onizlemesi (koyu hero)  0,723
   Yani %17'lik bir alanin parlakligi 16 KAT artinca ekran toplamda parliyor.
   📌 Fable'in "hero'yu kagida indir" hukmu bu olcumu gormeden verilmisti;
      dort gerekcesinden ucu hala gecerli ama GOZ YORGUNLUGU onlari basiyor.
   ⚠️ Kalan gerekce not edildi: hero hala ekrandaki EN KOYU DOLU BLOK, yani
      "en koyu dolu blok = birincil eylem" kurali ihlal olmaya devam ediyor.
      Cozumu hero'yu acmak DEGIL — eylem dugmesini baska bir kanaldan
      ayirmak. AYRI KARAR.
   ⭐ SEcENEK ACIK: hero KOYU kalmali ama ille YESIL olmak zorunda degil.
      Sicak-koyu karsiligi hesaplandi: #153f32 → #3f2915 (ton 28°, ayni
      doygunluk/parlaklik, beyaz metin 13,64:1, ekran ortalamasi 0,703).
      Marka kisiti kalktigi icin ikisi de secilebilir. */

/* ⭐ KORUNAN: asagidaki dort duzeltme DENEMEDEN BAGIMSIZ olarak gecerli —
   uc metin KOYU hero'da da esik altindaydi degil, AMA kagit denemesinde
   goruldukleri icin burada kaldilar. Koyu hero geri gelince eski beyaz
   renkleri yeniden dogru oluyor, bu yuzden bu blok da kaldirildi.
   (Gecmisi: commit 2913146 ve onun duzeltmesi.) */


/* ═══════════════════════════════════════════════════════════════════════
   ⚠️ DENEME — KAGIT UST BAR + MODUL SERIDI   (2026-08-11)
   ═══════════════════════════════════════════════════════════════════════
   Gokhan'in maketi. ⭐ GERI ALMA: BU BLOGU SIL. Kapsam `body.kagit-bar`
   oldugu icin YALNIZ rasyon sayfasini etkiler — kan.html ve kuru.html de
   `body.advisor` tasiyor, onlar DOKUNULMAMIS kalir.

   NEDEN KAGIT: olculdu (1440x900) — ust bar ekranin %7,7'si, hero %17,3;
   ikisi de koyu yesil = ekranin %25'i IKI AYRI KOYU KUTLE. Biri gitmeli,
   ve giden bar olmali: hero motorun kararini tasiyor, bar yalnizca kimlik
   ve gezinme. Boylece ekranda TEK KOYU CAPA kaliyor.
   ⚠️ Gokhan'in "beyaz gozu yoruyor" itiraziyla CELISMIYOR: kalkan sey
      PARLAYAN bir yuzey degil, IKINCI KOYU KUTLE.                        */

body.kagit-bar .topbar {
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(38, 33, 28, 0.04);
}

/* "Ana Sayfa" dugmesi kalkti — yerine LOGO hub linki oldu. Boylece bardan
   bir oge duser ve kimlik ile gezinme tek yerde toplanir.
   ⚠️ Erisim KAYBOLMUYOR: Ciftlik Kayitlari ve Oyun serit disinda ve
      hub'da; logo onlara giden kapi. */
body.kagit-bar .homeLink { display: none; }

body.kagit-bar .logo {
  background: var(--hero-1);
  color: #fff;
  text-decoration: none;
}
body.kagit-bar .logo:hover { filter: brightness(1.25); }

body.kagit-bar .brand h1 { color: var(--ink); }
body.kagit-bar .brand p  { color: var(--muted); }

/* ── MODUL SERIDI ────────────────────────────────────────────────────────
   Oyuk bir kap, icinde bolmeler; aktif olan KABARIK.
   Gokhan: "kabartma bence harika olur, kabarmis tus gorunumunu cok
   seviyorum." Kabartma uc kanaldan kuruluyor ve HICBIRI TON DEGIL:
     · yuzey parlakligi  (kagit, oyugun uzerinde)
     · ust ic kenar      (isik) + alt golge (gomlek)
     · yazi kalinligi    (600 → 700)
   ⛔ Aktif bolme KOYU DOLU DEGIL — "en koyu dolu blok = BIRINCIL EYLEM ve
      ekranda TEKTIR" kurali (Fable) ayakta kalsin diye. Secim ayri kanal. */
body.kagit-bar .modul-serit {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-soft);
  box-shadow: inset 0 1px 2px rgba(38, 33, 28, 0.07);
}

/* ⛔ KOYU TEMADA KABARTMA TERS DONUYORDU — olculdu ve duzeltildi.
   Koyu temada --surface-soft (#291f18) --card'DAN (#1e1915) DAHA ACIK.
   Yani "oyuk kap" acik, "kabaran bolme" koyu kaliyordu: metafor tersine
   donmus, ayrim da 1,082 (yok gibi).
   Fable'in kurali: "yukselen yuzey ACIKTIR — tek kural, iki tema."
   → koyuda kap --bg olur (en koyu), aktif --card kalir:
       kap ↔ aktif  1,082  →  1,117  ve YON DOGRU
   Acik temada degisiklik yok: --surface-soft ↔ --card = 1,214 ✅ */
:root[data-theme="dark"] body.kagit-bar .modul-serit,
:root[data-theme="dark"] body.kagit-bar .modeToggle {
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.kagit-bar .modul-serit,
  :root:not([data-theme="light"]) body.kagit-bar .modeToggle {
    background: var(--bg);
  }
}

body.kagit-bar .modul {
  /* 12 → 10px yatay: bes bolme x 2 kenar = 20px kazanc. Kalan 13px'lik
     tasmayi kapatiyor. ⛔ Barin genel `gap`ine DOKUNULMADI — o butun
     ogeleri etkiler; ayar YENI eklenen ogeden alindi. */
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
body.kagit-bar .modul:hover { color: var(--ink); }

body.kagit-bar .modul.aktif {
  background: var(--card);
  color: var(--ink);
  font-weight: var(--agirlik-vurgu, 600);
  box-shadow:
    0 1px 2px rgba(38, 33, 28, 0.10),
    0 2px 6px rgba(38, 33, 28, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Duve henuz yok — yeri belli, tiklanmaz. ⛔ Opaklik DUSURULMUYOR (kayitli
   yasak); ayrim yalniz imlecte ve kesik alt cizgide. */
body.kagit-bar .modul.yakinda {
  color: var(--muted);
  cursor: default;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ⛔ TELEFON: bes bolme sarinca ust bar 70 → 213px'e cikiyordu, yani
   ekranin DORTTE BIRI. Bu deponun kendi kalibi var — #sekmeSerit dar
   ekranda `overflow-x:auto` ile KAYIYOR. Aynisi:
   serit tek satirda kalir, parmakla kaydirilir, bar kisa kalir.
   ⚠️ Kaydirilabilir olmak "gizli" demek DEGIL (bu turda olculdu: bir oge
      "tasiyor" sanilmisti, kaydirilabilir kabin icindeydi ve kusur degildi).
      Aktif bolme SOLDA ilk sirada oldugu icin acilista gorunur. */
@media (max-width: 1050px) {
  body.kagit-bar .modul-serit {
    order: 9;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.kagit-bar .modul-serit::-webkit-scrollbar { display: none; }
  body.kagit-bar .modul { flex: 0 0 auto; }
}

/* ⭐ `.spacer` OLU BIR OGEYDI (2026-08-11). ciftlikler.html ust barinda
   `<div class="spacer">` var ama HICBIR YERDE CSS'i yoktu — yani sag obegi
   itmesi gerekirken 0 genislikte duruyordu. Kagit bara gecerken goruldu.
   ⛔ `body.kagit-bar` kapsamina ALINMADI: kusur kagitla ilgili degil, oge
      bastan beri isini yapmiyordu. */
.topbar .spacer { flex: 1 1 auto; }

/* ── Sag taraf: kagit uzerinde ─────────────────────────────────────────── */
/* ⭐ SAG GRUP SAGA YASLI (2026-08-11, Gokhan). `.ready` bardaki son obegin
   ILK ogesi; ona verilen `margin-left:auto` kendisinden SONRAKI her seyi
   (mod anahtari · Ozet Al · ? · gorus · tema) sag kenara iter.
   ⚠️ Ortada kalan bosluk BILINEREK birakildi — Gokhan: "arasi bos kaliyor,
      ileride degerlendiririz." Doldurmak icin oge UYDURULMADI.
   ⛔ Serit'e `margin-right:auto` verilmedi: dar ekranda serit kendi satirina
      dusuyor (order:9) ve o zaman bu obek YINE sagda kalmali. Itmeyi sag
      obege baglamak iki duzende de dogru sonucu veriyor. */
body.kagit-bar .ready { color: var(--muted); margin-left: auto; }

body.kagit-bar .modeToggle {
  background: var(--surface-soft);
  box-shadow: inset 0 1px 2px rgba(38, 33, 28, 0.07);
}
body.kagit-bar .modeToggle button { color: var(--muted); }
body.kagit-bar .modeToggle button.active {
  background: var(--card);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(38, 33, 28, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ⛔ TASMA OLCULDU: modul seridi 400px alinca ust bar 1315px istiyor,
   1225px var → 90px TASMA (bar 70 → 119px'e cikti, "Gorus bildir" alt
   satira dustu).
   Kayitli recete (dis inceleme md. 10) "Motor hazir yalniz sorun varken
   gorunsun" diyor ve 103px kazandirirdi — AMA durum yalniz METINDE
   ("Motor hazir" · "Hesaplaniyor" · "Yem secimi eksik" · "Hata"), #selfdot
   statik. CSS metne bakamaz; kucuk bir JS gerekir → AYRI KARAR.
   ⛔ `.ready`yi tamamen gizlemek de olmaz: "Yem secimi eksik" ve "Hata"
      motorun bilgisi, kaybolamaz.
   → 95px en az kritik yerden alindi: gorus bildirme dugmesi genis ekranda
     IKON kaliyor. Bilgi kaybi YOK — 💬 + title + aria-label duruyor, ve
     telefonda etiket zaten gizliydi (2026-08-10'da ikon tam bu yuzden
     eklenmisti: ikonsuz dugme BOS KAPSUL oluyordu). */
@media (min-width: 1051px) {
  body.kagit-bar #geriBildirimButton .btn-label,
  body.kagit-bar #tourButton .btn-label { display: none; }
}

/* ⚠️ `.ust-ikon` BU LISTEDE DURMAZ (2026-08-25, Gokhan yakaladi):
   o bir DUGME degil, dugmenin ICINDEKI "?" karakterinin span'i. Listedeyken
   kendi zemin+cerceve+golgesini aliyor ve cerceve icinde cerceve cıkıyordu.
   Ikon, kapsayan dugmenin murekkebini MIRAS ALIR — kendi kutusu olmaz. */
body.kagit-bar .reportBtn,
body.kagit-bar #tourButton,
body.kagit-bar #geriBildirimButton,
body.kagit-bar .themeBtn {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(38, 33, 28, 0.06);
}


/* ── SURU SAYFASI: AYNI BAR, BASKA ISKELET ───────────────────────────────
   suru.html'in kendi ust bari var (`.ust-bar`) ve `styles.css`i HIC
   yuklemiyor — `.topbar` / `.logo` / `.brand` temel kurallari orada duruyor,
   bu sayfaya ULASMIYOR.
   ⛔ Bu yuzden markup `.topbar` ailesine CEVRILMEDI. Alternatif olculdu ve
      birakildi: styles.css'i suru.html'e eklemek gerekirdi, o da sayfanin
      kendi ~280 satirlik gomulu stil bloguyla ayni secicilerde carpisiyor
      (.kart · .sekme · .rozet ...) ve link gomulu bloktan SONRA geldigi icin
      styles.css KAZANIRDI. Tek bar icin butun sayfayi riske atmak degmez.
   → Iskelet duruyor, KAGIDA boyandi. Serit zaten `body.kagit-bar` kapsamli,
     sinif eklenince oldugu gibi calisiyor. */
body.kagit-bar .ust-bar {
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(38, 33, 28, 0.04);
  border-radius: 0 0 16px 16px;
}
body.kagit-bar .ust-ic { flex-wrap: wrap; }

/* "Ana Sayfa" dugmesi dustu, logo hub kapisi oldu — index/kuru/kan ile ayni
   karar (bkz. `body.kagit-bar .homeLink` notu). */
body.kagit-bar .ust-ana { display: none; }

body.kagit-bar .ust-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--hero-1);
  color: #fff;
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: 17px;
  font-weight: var(--agirlik-vurgu, 600);
  line-height: 1;
  text-decoration: none;
}
body.kagit-bar .ust-logo:hover { filter: brightness(1.25); }

body.kagit-bar .ust-marka {
  flex: 0 1 auto;
  justify-content: flex-start;
  color: var(--ink);
}
body.kagit-bar .ust-sag { margin-left: auto; }

body.kagit-bar .ust-dugme,
body.kagit-bar .ust-tema {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(38, 33, 28, 0.06);
}
body.kagit-bar .ust-dugme:hover,
body.kagit-bar .ust-tema:hover { background: var(--surface-soft); }

/* Serit KENDI SATIRINDA — genis ekranda da. Bu sayfanin bari 760px'lik
   icerik sutununa hizali (kendi `.ust-ic` kurali, `.sarici` ile ayni),
   serit oraya yan yana sigmiyor. Kural ayni, piksel farkli. */
body.kagit-bar .ust-ic .modul-serit {
  order: 9;
  flex: 1 0 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.kagit-bar .ust-ic .modul-serit::-webkit-scrollbar { display: none; }
body.kagit-bar .ust-ic .modul { flex: 0 0 auto; }


/* ── "Siradaki hamle" IS YOKKEN TEK SATIR ────────────────────────────────
   Bkz. app.js `updateRecommendation` not_needed dali — gerekce orada.
   Govde katlanir, baslik + rozet kalir. Metin DOM'da durur (okunuyor). */
#recommendationPanel.bos > .body { display: none; }

/* ⛔ DAR EKRANDA HUKUM KAYBOLUYORDU (2026-08-23, ressam denetimi XIII/2).
   Yukaridaki katlama "baslikta rozet kaliyor, hukum bir kez soyleniyor"
   varsayimina dayaniyor — ama ≤520px'te `.card h2 .state-text` GIZLI
   (program-theme.css ~1771). Ikisi ust uste binince kart telefonda
   BOMBOS bir basliktan ibaret kaliyordu: "Rasyon dengede" hukmu hicbir
   yerde yazmiyordu.
   Katlanmis kart ISTISNADIR: govdesi gizliyse rozet gorunur kalir. */
@media (max-width: 520px) {
  /* ⚠️ `max-width: 42%` DE GEVSER: olculdu (347px, canli DOM) — rozet
     123px'e kirpiliyor, metin 138px, yani hukum "Degisiklik gerekmi…"
     diye YARIM okunuyordu. Yarim hukum, gorunur hukum degildir.
     Katlanmis kartta baslik ("Oneri") kisa; yer var. */
  #recommendationPanel.bos h2 .state-text {
    display: inline;
    max-width: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   KANIT ALANI — ust satirda KARAR, altta TAM GENISLIKTE DAYANAKLAR
   ═══════════════════════════════════════════════════════════════════════
   Dis incelemenin md. 9'u: "sol sutun kisa, sayfanin alt yarisi bos,
   BITMEMIS SAYFA hissi." Bosluk kademelendirmesi olu alani 517 → 467px
   indirmisti; bu SEKIL degistirerek cozuyor.

   ⛔ #results'un COCUK YAPISI KORUNDU: 8 panel hala DOGRUDAN cocuk.
      styles.css:2382-2386 (`#results[data-sekme-acik] > [data-sekme]`) ve
      tests/test_sekme_kapsami.py saglam — kosuldu, 7 test yesil.
   ⭐ Tasinan yalniz UC blok (#bayatSerit · #hero · #recommendationPanel)
      ve onlar zaten sekme tasimiyordu.
   ⚠️ IKI BAG DA TASINDI (yoksa sessizce kopardi):
      · aria-busy → app.js artik .karar-kolonu'na da yaziyor
      · .bayat    → hem sinif hem CSS secicisi genisletildi
   ⚠️ #results'un KENDI KUTUSU YOK (zemin saydam, cerceve 0, padding 0),
      bu yuzden cocuk tasimak gorsel bir bedel getirmedi.                */

@media (min-width: 1051px) {
  .karar-kolonu {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-4, 18px);
    min-width: 0;
  }
  /* Kanit alani IKI SUTUNU DA kapsar — emsali .hedef-serit (grid-column:1/-1) */
  #results {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bosluk-4, 18px);
    align-items: start;
  }
  #results > .kanit-basi,
  #results > .sekme-serit { grid-column: 1 / -1; }

  /* Tek panel acikken sag sutun bos kalmasin — sayimi app.js
     `tekPanelIsaretle` yapiyor, gerekce orada. */
  #results.tek-panel > [data-sekme] { grid-column: 1 / -1; }

  /* ── KADRAN BLOKLARI IKI SUTUN (2026-08-11, Gokhan: "kadranlar asagiya
     gidecegine yana yayilsa, sagda zaten yer var") ─────────────────────
     ⚠️ KAYITLI KARARA DOKUNULMADI. `.kd-grid { max-width: 600px }` bir
     KILIT ve gerekcesi program-theme.css:911-916'da: bir GRUBUN kadranlari
     dokuz sutunluk satirin soluna sikismasin. O kural GRUP ICI genislikle
     ilgili; BLOKLARIN alt alta dizilmesiyle degil. Kisit sinirindan bolundu:
       · gruplarin IC olcegi        -> aynen korunuyor (kilit yerinde)
       · gruplarin BIRBIRINE gore   -> iki sutun (bu blok)

     ⭐ KILIDIN VARSAYIMI ESKIMISTI, olculdu: kayit "Temel (3), Lif (5) ve
        Iskembe (4) TEK SATIRA sigar" diyor. Lif grubu O GUNDEN BERI 6 kadrana
        cikti (NDF · Kaba yem NDF · peNDF · ADF · Nisasta · NFC) ve 600px'te
        5+1'e boluniyordu — yani kaydin KENDI amaci coktan bozulmustu.
        636px = tam 6 sutun (6x96 + 5x10 = 626 sigar, 7 sutun 732 sigmaz).
        Mineral (7) IKI SATIR kaliyor — kayit bunu ISTIYOR, degismedi.
     ⛔ 600px degeri SILINMEDI: yalniz genis ekranda eziliyor. Telefon ve
        dar ekran kayitli degerde kalir. */
  #kadranlar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--bosluk-5, 28px);
    align-items: start;
  }
  #kadranlar > .kd-ust { grid-column: 1 / -1; }
  #kadranlar .kd-grid { max-width: 636px; }
}

/* Kanit basi: kutu DEGIL — ayrac + olcek farki (incelemenin kendi recetesi) */
.kanit-basi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--bosluk-5, 28px);
  padding-top: var(--bosluk-4, 18px);
  border-top: 1px solid var(--line);
}
.kanit-etiket {
  font-size: 10.5px;
  font-weight: var(--agirlik-vurgu, 600);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kanit-baslik { margin: 0; font-size: 17px; font-weight: var(--agirlik-vurgu, 600); color: var(--ink); }
.kanit-not    { margin-left: auto; font-size: 12px; color: var(--muted); }


/* ═══════════════════════════════════════════════════════════════════════
   MODULLER ARASI GECIS — UST BAR YERINDEN KIMILDAMAZ   (2026-08-11)
   ═══════════════════════════════════════════════════════════════════════
   Gokhan: "ust bar sabit kalsa ve modullere tiklandiginda baska sayfaya
   yonlendirmek yerine alt taraf degisse daha hos olmaz mi? cok zor mu?"

   ⛔ GERCEK SPA YAPILMADI. Bedeli OLCULDU, tahmin edilmedi:
        dosya         HTML satir   gomulu JS   gomulu CSS
        index.html         883          13           0
        kuru.html          769         489         125
        kan.html           433         253          52
        suru.html         2675        2242         359
      Cakisan `id`: index x kuru 6 (animalForm · engineStatus · feedcount ·
      indicators · notes · themeToggle) · kuru x kan 2 · index x kan 1.
      Tek belgede hepsi ayni kuresel kapsama duser; ~3000 satir gomulu JS
      elle ayristirilir ve arayuz icin test agi YOK.
   ⛔ VE KAN KAPISI KIRILIRDI — asil engel bu: kan.html sunucuda fail-closed
      (sifresiz 404 doner). Tek belgeye birlesirse kan'in isaretlemesi
      HERKESE gonderilir ve kapinin bastan yazilmasi gerekir. Kapi su an
      GERCEK koruma; dosyanin kendi notu eski istemci-tarafli perdenin
      "gercek koruma DEGILDI" oldugunu yaziyor. Onu tekrar kurmayiz.

   → AYNI HIS, MIMARIYE DOKUNMADAN. Tarayici eski sayfanin anlik goruntusunu
     tutar, yeni sayfayi yukler, AYNI ADI tasiyan ogeleri ust uste bindirip
     donusturur. Ust bar iki belgede de ayni adi tasidigi icin ekranda
     YERINDEN KIMILDAMAZ; yalniz altindaki govde degisir. Sayfalar ayri
     kalir, her sayfa kendi JS'ini yuklemeye devam eder, kan kapisi durur.

   OLCULDU (bu makinede, Chrome 148 — hepsi VAR):
     document.startViewTransition · @view-transition (belgeler arasi)
     view-transition-name · speculationrules
   ⚠️ Desteklemeyen tarayicida HICBIR SEY BOZULMAZ: gecis atlanir, gezinme
      bugunku gibi calisir. Yedek yol = MEVCUT davranis.
   ⛔ Giris sayfasi ETKILENMEZ: giris.html bu dosyayi yuklemiyor (server.py
      `_GIRIS_SERBEST_YOLLAR` yalniz styles.css ve fonts.css'i serbest
      birakiyor) — kimlik akisi gecise girmez.
   ⭐ GERI ALMA: BU BLOGU SIL. Baska hicbir yere dokunulmadi.               */

@view-transition { navigation: auto; }

/* ⚠️ Ad tasiyan oge kendi anlik goruntusune ayrilir ve eski-yeni ESLESIR.
   Bir ad bir belgede TEK olmali — `.topbar` ile `.ust-bar` ayni sayfada hic
   bulunmuyor (suru'de biri, digerlerinde oteki), carpisma yok.
   ⛔ Ic ogelere (logo · serit) AYRI ad VERILMEDI: adli oge atasinin anlik
      goruntusunden CIKARILIR, yani seridin `overflow-x:auto` kirpmasi gecis
      suresince kaybolurdu. Bar tek parca yakalaninca serit de icinde gelir
      ve aktif bolme yumusakca yerine gecer — ayni sonuc, daha az kirilma. */
.topbar,
.ust-bar { view-transition-name: ust-bar; }

/* Govde degisimi kisa: capa (bar) yerinde durdugu icin uzun gecis gereksiz. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

/* ⛔ Hareket hassasiyeti: gecis TAMAMEN kapanir, sayfa aninda degisir. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}