:root {
color-scheme: light;
/* ═══ 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;
/* Surfaces */
--bg: #efe7e2;
--card: #fdfbf9;
--card-head: #f7f1ec;
--input-bg: #fdfbf9;
--surface-soft: #ede4de;
/* Text */
--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.
#56685e her üçünde de ≥5,2:1; "soluk etiket" hissi korunuyor
(mürekkep #1c2621 ile arasında hâlâ 6 kat parlaklık farkı var). */
--muted: #685e56;
--accent: #5e3c1f;
/* Lines */
--line: #e3d7cf;
/* Brand (gradients) */
--brand: #2e7d5b;
--brand-d: #1f5e42;
--focus: rgba(46, 125, 91, 0.2);
/* Status */
--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 panel */
--hero-1: #1f3b2e;
--hero-2: #274d3a;
/* Effects */
--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);
--ease: 0.18s ease;
--ico-moon: url('data:image/svg+xml;utf8,');
--ico-sun: url('data:image/svg+xml;utf8,');
/* fonts.css tanimliyor; inmezse yedek yigina duser. */
font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #100c0a;
--card: #1e1915;
--card-head: #221c17;
--input-bg: #261e19;
--surface-soft: #291f18;
--ink: #efebe7;
--muted: #a79c93;
--accent: #d6a274;
--line: #332a23;
/* ⚠️ Koyu temada marka yeşili BİR TON KOYU. Ölçüldü (2026-07-29, Fable):
#2f8a63 üzerinde beyaz metin 4,25:1 — 12,5px yazı için eşik 4,5:1.
"Değerlendir" ve "Güvenliği düzelt" bu düğmeler. Açık temada
(#2e7d5b) 4,95:1 ile geçtiği için fark edilmemişti. #287856 → 5,4:1. */
--brand: #287856;
--brand-d: #216f4c;
--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: #16261e;
--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);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #100c0a;
--card: #1e1915;
--card-head: #221c17;
--input-bg: #261e19;
--surface-soft: #291f18;
--ink: #efebe7;
--muted: #a79c93;
--accent: #d6a274;
--line: #332a23;
--brand: #2f8a63;
--brand-d: #216f4c;
--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: #16261e;
--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);
}
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: var(--bg);
color: var(--ink);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background-color var(--ease), color var(--ease);
}
button,
input,
select {
font: inherit;
}
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
/* Rakamlar es genislikli: kullanici tabloda SUTUNU dikey tarayabilsin.
Plex Mono inmezse hem yedek mono yigini hem tabular-nums devrede. */
.num {
font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding: 16px 22px;
background: linear-gradient(135deg, var(--brand), var(--brand-d));
color: #fff;
box-shadow: var(--shadow);
}
.homeLink {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 14px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1;
text-decoration: none;
}
.homeLink svg {
flex: 0 0 auto;
}
.homeLink:hover {
background: rgba(255, 255, 255, 0.28);
}
/* ⭐ OTURUM KUTUSU — üst barın SAĞ ucunda kullanıcı + çıkış (2026-08-13).
Gökhan: "hiçbirinde çıkış seçeneği yok, çıkış yapabilmem gerekiyor."
⛔ Bu blok yalnız `common.js` tarafından ENJEKTE edilen kutu için; HTML'de
karşılığı YOK ve olmamalı (yedi sayfada yedi kopya olurdu).
`margin-left:auto` barın kendi flex akışını bozmadan sağa iter. */
.oturumKutusu {
margin-left: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.oturumEposta {
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
opacity: 0.85;
}
.cikisBtn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1;
cursor: pointer;
}
.cikisBtn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.28);
}
.cikisBtn:disabled {
opacity: 0.6;
cursor: default;
}
/* ⚠️ ÜST BAR ZATEN DOLU. Ölçüldü (2026-08-13, /rasyon): 1680px'de kutu
barın ilk satırına sığıyor (bar 70px); 1265px'de sarıp barı 117px'e
ÇIKARIYOR. Dizüstülerin çoğu 1280-1440 arasında, yani sarma istisna
değil KURAL olurdu.
Çözüm kademeli: önce e-posta düşer (ikinci derece bilgi), sonra düğme
yazısı. ⭐ Düğmenin KENDİSİ hiçbir genişlikte kaybolmaz — çıkış her
ekranda erişilebilir olmalı. */
@media (max-width: 1439px) {
.oturumEposta {
display: none;
}
}
@media (max-width: 560px) {
.cikisBtn .btn-label {
display: none;
}
.cikisBtn {
padding: 0 10px;
}
}
/* ⭐ ÜST BARI OLMAYAN SAYFA (Çiftlik Paneli, `body.hub`): kutu sağ üstte
yüzer, tema düğmesinin (`.hub-theme`, 40px + 16px sağ boşluk) SOLUNA.
Renkler bardakinden farklı: orada zemin marka gradyanı (beyaz metin
doğru), burada sayfa zemini — kart renkleri kullanılır. */
.oturumKutusu--serbest {
position: fixed;
top: 16px;
right: 68px;
z-index: 30;
}
.oturumKutusu--serbest .oturumEposta {
color: var(--ink);
}
.oturumKutusu--serbest .cikisBtn {
height: 40px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
color: var(--ink);
}
.oturumKutusu--serbest .cikisBtn:hover:not(:disabled) {
border-color: var(--brand);
background: var(--card);
}
/* ⭐ HARF KIMLIGI (2026-08-11, Gokhan onayladi: "R uygun").
Emoji yerine harf, cunku:
· Fable'in kimlik kurali: "Kimlik bir ISARET degil, zeminin karakteridir —
harf + kagit + kose dili." Emoji koymak kimligi yine bir isarete baglar.
· ⚠️ OLCULMUS RISK: bu projede ❓ ikonu KIRMIZI ciziliyordu ve "kirmizi
asla tiklanabilir degil" kuralini ihlal ediyordu (2026-08-10, telefonda
goruldu, duz karaktere cevrildi). Emoji her platformda kendi renginde
cizilir — yani RENK DISIPLININDEN KACAN TEK OGE olur.
· Mono yuz, ekranin rakam yuzuyle ayni: "alet" hissi oradan geliyor.
⛔ Yalniz `.logo.harf`e uygulanir; kuru/kan/ciftlikler sayfalarindaki
emoji logolar ETKILENMEZ (onlar ayri karar — ve orada bir cakisma var:
Kuru ve Kan ikisi de K). */
.logo.harf {
font-family: var(--font-num, ui-monospace, monospace);
font-size: 19px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.02em;
padding-left: 0.02em; /* mono harfin optik ortalamasi */
}
.logo {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 24px;
line-height: 1;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0;
}
.brand {
min-width: 0;
}
.brand h1 {
margin: 0;
font-size: 19px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.15;
letter-spacing: 0;
}
.brand p {
margin: 2px 0 0;
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
}
.ready {
margin-left: auto;
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 20px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
white-space: nowrap;
}
.dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
}
.dot.on {
background: #7ee2a8;
}
.modeToggle {
display: inline-flex;
overflow: hidden;
border-radius: 9px;
background: rgba(255, 255, 255, 0.15);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
.modeToggle button {
min-height: 32px;
border: 0;
padding: 6px 13px;
background: transparent;
color: #fff;
opacity: 0.74;
}
.modeToggle button.active {
background: #fff;
color: var(--brand-d);
opacity: 1;
}
.themeToggle {
width: 36px;
min-height: 34px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 9px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
transition: background-color var(--ease);
}
.themeToggle:hover {
background: rgba(255, 255, 255, 0.28);
}
.theme-ico {
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: var(--ico-moon) center / contain no-repeat;
mask: var(--ico-moon) center / contain no-repeat;
}
:root[data-theme="dark"] .theme-ico {
-webkit-mask-image: var(--ico-sun);
mask-image: var(--ico-sun);
}
.wrap {
max-width: 1180px;
margin: 18px auto;
padding: 0 18px 60px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 18px;
align-items: start;
}
.leftcol,
.rightcol {
min-width: 0;
}
.card {
min-width: 0;
overflow: hidden;
margin-bottom: 18px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
transition: background-color var(--ease), border-color var(--ease),
box-shadow var(--ease);
}
.card h2 {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--card-head);
color: var(--accent);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0;
transition: background-color var(--ease), border-color var(--ease),
color var(--ease);
}
.card h2 .idx {
min-width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
padding: 1px 6px;
background: var(--green-bg);
color: var(--accent);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.card .body {
padding: 14px 16px 16px;
}
.soft-title,
.state-text {
color: var(--muted);
font-weight: var(--agirlik-vurgu, 600);
}
.io {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.f {
min-width: 0;
}
label {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
input,
select {
width: 100%;
min-height: 37px;
border: 1px solid var(--line);
border-radius: 9px;
padding: 8px 10px;
background: var(--input-bg);
color: var(--ink);
font-size: 14px;
transition: border-color var(--ease), box-shadow var(--ease),
background-color var(--ease);
}
input:hover,
select:hover {
border-color: var(--muted);
}
input:focus,
select:focus,
button:focus-visible {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--focus);
}
.feedtable,
.rtable,
.rctable,
.recommendation-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.feedtable th,
.rtable th,
.rctable th,
.recommendation-table th {
padding: 5px 6px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.04em;
text-align: left;
text-transform: uppercase;
}
.feedtable td,
.rtable td,
.rctable td,
.recommendation-table td {
padding: 6px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.feedtable th.r,
.feedtable td.r,
.rtable th:not(:first-child),
.rtable td:not(:first-child),
.rctable th.r,
.rctable td.r,
.recommendation-table th.r,
.recommendation-table td.r {
text-align: right;
}
.remove-cell {
width: 34px;
text-align: right;
}
/* Yem kuralı paneli: min/max/kilit tek yerde, çiftçinin cümleleriyle.
Hücreye göre konumlanır; sağa taşmasın diye sağ kenara yaslanır. */
.lock-cell {
position: relative;
overflow: visible;
}
.kural-panel {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 40;
width: 268px;
max-width: min(268px, calc(100vw - 32px));
padding: 10px;
text-align: left;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.kural-baslik {
margin-bottom: 8px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.35;
}
.kural-baslik span {
font-weight: var(--agirlik-metin, 400);
color: var(--muted);
}
.kural-secenek {
display: grid;
grid-template-columns: 14px 18px minmax(0, 1fr);
align-items: center;
gap: 6px;
padding: 5px 4px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
}
.kural-secenek:hover {
background: var(--green-bg);
}
.kural-secenek input[type="radio"] {
min-height: 0;
margin: 0;
}
.kural-secenek .kural-deger {
grid-column: 3;
width: 74px;
margin-top: 3px;
padding: 4px 6px;
min-height: 0;
}
.kural-not {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 12px;
}
/* KURAL KARTI — kısıt tanısı ve kural bedeli TEK kartta (2026-07-27).
Sarı = BİLGİ, kırmızı değil: kural koymak bilinçli bir tercih olabilir
(kanola/üreme örneği). Suçlama değil, bilgilendirme. */
.kural-kart {
margin-top: 10px;
padding: 11px 13px;
border-radius: 10px;
background: var(--yellow-bg);
color: var(--yellow-ink);
font-size: 13px;
line-height: 1.55;
}
.kural-kart-baslik {
font-weight: var(--agirlik-vurgu, 600);
}
.kural-kart-liste {
margin: 8px 0 10px;
padding-left: 18px;
}
.kural-kart-liste li + li {
margin-top: 5px;
}
.kural-kart-not {
margin-top: 8px;
color: var(--muted);
font-size: 12px;
}
.kural-kart .act.primary {
margin-top: 4px;
max-width: 100%;
white-space: normal;
text-align: left;
}
/* Yem kuralı paneli: min/max/kilit tek yerde, çiftçinin cümleleriyle.
Hücreye göre konumlanır; sağa taşmasın diye sağ kenara yaslanır. */
.lock-cell {
position: relative;
overflow: visible;
}
.kural-panel {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 40;
width: 268px;
max-width: min(268px, calc(100vw - 32px));
padding: 10px;
text-align: left;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.kural-baslik {
margin-bottom: 8px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.35;
}
.kural-baslik span {
font-weight: var(--agirlik-metin, 400);
color: var(--muted);
}
.kural-secenek {
display: grid;
grid-template-columns: 14px 18px minmax(0, 1fr);
align-items: center;
gap: 6px;
padding: 5px 4px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
}
.kural-secenek:hover {
background: var(--green-bg);
}
.kural-secenek input[type="radio"] {
min-height: 0;
margin: 0;
}
.kural-secenek .kural-deger {
grid-column: 3;
width: 74px;
margin-top: 3px;
padding: 4px 6px;
min-height: 0;
}
.kural-not {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 12px;
}
/* "Bu kural sana X litreye mal oluyor" — uyarı değil BİLGİ; o yüzden
kırmızı değil nötr/sarımsı. Bilinçli bir takas olabilir. */
.feedtable input,
.feedtable select {
min-height: 35px;
padding: 7px 8px;
}
.feed-combobox {
position: relative;
}
.feed-combobox input {
padding-right: 42px;
}
.feed-toggle {
position: absolute;
top: 3px;
right: 3px;
width: 32px;
min-height: 29px;
border: 0;
border-left: 1px solid var(--line);
border-radius: 0 7px 7px 0;
background: var(--input-bg);
color: var(--muted);
transition: background-color var(--ease), color var(--ease);
}
.feed-toggle:hover {
background: var(--surface-soft);
color: var(--accent);
}
.feed-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: auto;
width: max(100%, 320px);
max-width: min(440px, 92vw);
z-index: 30;
display: none;
max-height: 320px;
overflow: auto;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
box-shadow: var(--shadow-pop);
}
.feed-menu.open {
display: block;
}
.feed-option {
width: 100%;
min-height: 42px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
align-items: start;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
padding: 8px 10px;
background: var(--card);
color: var(--ink);
text-align: left;
transition: background-color var(--ease);
}
.feed-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.feed-option:last-child {
border-bottom: 0;
}
.feed-option:hover,
.feed-option.active {
background: var(--green-bg);
}
.feed-id {
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
padding-top: 1px;
}
.feed-name {
min-width: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
font-weight: var(--agirlik-vurgu, 600);
}
.feed-meta {
color: var(--muted);
font-size: 12px;
white-space: nowrap;
}
/* Benzeşen adlarda ortak kısım geri çekilir, FARK öne çıkar.
⚠️ Renk taşımaz (yeşil/kırmızı anlam yükler); yalnız soluk/koyu karşıtlığı.
⚠️ `opacity` DEĞİL `color`: opacity satırın vurgulu (active) hâlinde de
soluklaşıp okunmaz hâle geliyordu. */
.feed-ad-ortak {
color: var(--muted);
font-weight: var(--agirlik-metin, 400);
}
.feed-ad-fark {
color: inherit;
font-weight: var(--agirlik-vurgu, 600);
}
/* Kırpma notu — TIKLANMAZ. Seçenek gibi görünmemeli, yoksa kullanıcı
üstüne basıp hiçbir şey olmayınca arayüze güveni azalır. */
.feed-kirpma {
padding: 7px 10px;
border-top: 1px solid var(--line, #e4e4e4);
color: var(--muted);
font-size: 12px;
line-height: 1.35;
cursor: default;
user-select: none;
}
.feed-empty {
padding: 10px;
color: var(--muted);
font-size: 13px;
}
.addrow {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: var(--bosluk-4, 18px); /* 12 -> 18: eylem seridi tablodan ayrilsin */
}
button.act, a.act {
/* ⛔ ESKIDEN var(--brand) IDI. program-theme.css bunu eziyordu ama o dosyayi
YUKLEMEYEN sayfalarda (game.html) marka yesili gorunmeye devam ediyordu —
bugun orada `.act` dugmesi yok, yani CANLI SONUCU YOKTU, ama cift tanim
tuzagi acikti. Deponun kendi dersi: "yanlis dosyayi duzelttim, ekranda
hicbir sey degismedi" — bu onun TERSI: dogru dosyayi duzelttim, oteki
dosyada eski deger kaldi. Kaynakta kapatildi. */
min-height: 37px;
border: 1px solid var(--eylem);
border-radius: 9px;
padding: 9px 12px;
background: var(--eylem);
color: var(--eylem-metin, #fff);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
transition: background-color var(--ease), border-color var(--ease),
color var(--ease), filter var(--ease), transform var(--ease);
}
button.act.primary:hover, a.act.primary:hover {
filter: brightness(1.35); /* eylem rengi TON degil PARLAKLIK; hover da oyle */
}
button.act.ghost, a.act.ghost {
border-color: transparent;
background: var(--surface-soft);
color: var(--accent);
}
button.act.warn, a.act.warn {
border-color: var(--line);
background: var(--card);
color: var(--accent);
}
button.act.danger, a.act.danger {
border-color: transparent;
background: var(--red-bg);
color: var(--red);
}
button.act:hover, a.act:hover {
filter: brightness(1.03);
}
button.act:active, a.act:active {
transform: translateY(1px);
}
button.act:disabled, a.act:disabled {
opacity: 0.52;
filter: grayscale(0.1);
transform: none;
}
button.mini {
width: 28px;
height: 28px;
border: 0;
border-radius: 9px;
background: var(--red-bg);
color: var(--red);
font-size: 18px;
line-height: 1;
padding: 0;
}
.formerr {
min-height: 18px;
margin-top: 8px;
color: var(--red);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
/* Nötr bilgi mesajı — hata değil (ör. "Standart yemler hazır...") */
.forminfo {
min-height: 18px;
margin-top: 8px;
color: var(--muted);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
.milkpanel {
overflow: hidden;
margin-bottom: 18px;
border-radius: 14px;
padding: 18px;
background: linear-gradient(135deg, var(--hero-1), var(--hero-2));
color: #fff;
box-shadow: var(--shadow);
transition: background var(--ease), box-shadow var(--ease);
}
.hero .lab {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero .big {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
font-size: 44px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1;
letter-spacing: 0;
}
.hero .big small {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
font-weight: var(--agirlik-vurgu, 600);
}
/* Boş durum: sonuç yokken sayı soluk "—", kutu görünümü yok */
.hero .big.is-empty #milkmax {
color: rgba(255, 255, 255, 0.4);
font-weight: var(--agirlik-vurgu, 600);
}
.why {
min-height: 21px;
margin-top: 8px;
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
}
.limtag {
display: inline-flex;
align-items: center;
min-height: 21px;
border-radius: 20px;
padding: 2px 9px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
text-transform: uppercase;
}
/* ⭐⭐ "SINIRLAYAN" ROZETİ — ÜÇ RENK YERİNE BİR ANAHTAR KELİME
* (2026-08-10, dış inceleme md. 1).
*
* İnceleme şunu gördü: *"Sağ üstte 'GÜVENLİK' etiketi, hemen altında kırmızı
* 'GÜVENLİ DEĞİL' rozeti. Kart hem güvenli hem güvensiz diyor."* — ve
* *"'GÜVENLİK' etiketi kalksın, bilgi taşımıyor"* dedi.
*
* ⛔ ÖNERİ YANLIŞ, ŞİKÂYET DOĞRU. Bu rozet ekrandaki EN BİLGİ YOĞUN öğe:
* `decision.limiting` değerini gösteriyor — sütü neyin sınırladığını
* (protein / enerji / güvenlik). Kaldırmak motorun kararını körleştirirdi.
*
* ⭐ Gerçek kusur: DEĞER yazılıyordu, ANAHTARI yazılmıyordu. Ekranda tek
* başına duran "Güvenlik" kelimesi bir DURUM iddiası gibi okunuyor ve
* altındaki "GÜVENLİ DEĞİL" ile çelişiyordu. Aynı deponun rapor görünümü
* bunu ZATEN doğru yazıyor (app.js ~4767: `Sınırlayıcı: ...`);
* yalnız hero'da anahtar düşmüştü. Artık "SINIRLAYAN: GÜVENLİK".
* Çelişki gitti, bilgi ARTTI, tek kelime eklendi.
*
* Renk de kalktı: mavi/sarı/pembe üçlüsü aynı bilgiyi ikinci kez söylüyordu
* (üstelik "iyi"nin rengi olmaz kuralına aykırı biçimde). Nötr hap:
* yazı kontrastı 7,46:1 — eşik 4,5:1 (ÖLÇÜLDÜ). */
.limtag.p,
.limtag.e,
.limtag.gate {
background: rgba(255, 255, 255, 0.16);
color: #fff;
letter-spacing: 0.02em;
}
.verdictsub {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.vsub {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
}
.vsub .vdot {
width: 9px;
height: 9px;
flex: none;
border-radius: 50%;
background: #e0a23a;
}
.vsub.ok .vdot {
background: #7ee2a8;
}
.vsub.stop .vdot {
background: #f1b1b1;
}
.gauge {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 12px;
}
/* 💰 HERO EKONOMİ SATIRI (2026-08-19, Gökhan: süt fiyatı + maliyetler +
cebe kalan hero'da). Hero zemini koyu yeşil degrade — metinler beyaz
ailesi, ayraç üstte ince beyaz çizgi (verdictsub ile aynı dil). */
.hero-ekonomi {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.22);
font-size: 13px;
}
.hero-ekonomi .he-fiyat {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.9);
}
/* 💰 Yağ primi bloğu (2026-08-21) — süt fiyatının küçük kardeşi. */
.hero-ekonomi .he-prim {
color: rgba(255, 255, 255, 0.85);
font-size: 0.85em;
}
.hero-ekonomi .he-prim summary {
cursor: pointer;
user-select: none;
}
.hero-ekonomi .he-prim label {
display: inline-flex;
align-items: center;
gap: 4px;
margin-right: 10px;
}
.hero-ekonomi .he-prim input {
width: 58px;
}
.hero-ekonomi input {
width: 72px;
padding: 4px 6px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 7px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font: inherit;
text-align: right;
}
.hero-ekonomi input::placeholder { color: rgba(255, 255, 255, 0.5); }
.hero-ekonomi .he-sayilar {
display: inline-flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-left: auto;
}
.hero-ekonomi .he-kalem {
color: rgba(255, 255, 255, 0.8);
}
.hero-ekonomi .he-kalem b {
color: #fff;
font-weight: var(--agirlik-vurgu, 600);
margin-left: 4px;
}
.hero-ekonomi .he-iofc b { font-size: 15px; }
.gline {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 58px; /* 56 -> 58: 19px rakam sigsin */
align-items: center;
gap: 10px;
}
.gline .gl {
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
}
/* ⚠️ RAY 0,14 -> 0,06 (2026-08-10). Çubuk dolgusu hero ZEMİNİNE değil BU RAYA
oturuyor; çubuğun UZUNLUĞU buradaki farktan okunuyor. Dolgular nötrleşince
(aşağıya bkz.) fark 1,55:1'e düşmüştü — çubuk "bar" olmaktan çıkıyordu.
⭐ Bu, kendi eklediğim gerilemeydi ve İLK ÖLÇÜMÜM YANLIŞ REFERANSA GÖREYDİ
(dolgu ↔ hero zemini = 2,37:1 diye yazmıştım; göz oraya bakmıyor).
Üç oranı birden ≥3,0 yapan tek kombinasyon: ray 0,06 · nötr 0,45. */
.gbar {
position: relative;
height: 22px;
overflow: hidden;
border-radius: 7px;
background: rgba(255, 255, 255, 0.06);
}
.gfill {
width: 0%;
position: absolute;
inset: 0 auto 0 0;
height: 100%;
border-radius: 7px;
transition: width 0.35s ease;
}
/* ⭐⭐ SÜT ÇUBUKLARI — RENK DEĞİL PARLAKLIK (2026-08-10, dış inceleme md. 3).
*
* İnceleme: *"Proteinden / Enerjiden / Hedef üç ayrı renkte ama renkler bir
* KOD taşımıyor. Kullanıcının öğrenmesi gereken keyfi bir palet."* Haklı:
* mavi neden protein, sarı neden enerji? Hiçbir yerde karşılığı yok.
*
* ⛔ ÇUBUKLAR KALDIRILMADI VE KALDIRILAMAZ. Motor sütü İKİ kanaldan hesaplayıp
* küçüğünü alır (`limiting_milk_l = min(protein_milk_l, energy_milk_l)`).
* Bu üç çubuk o kararı görünür kılan TEK öğedir; onlarsız ekran "25,0 L" der
* ve kullanıcı hangi kolu çekeceğini bilmez. (Karar: bekleme_odasi/
* TASARIM_KARARLARI_2026_08_10.md — *"o bilgiyi taşıyan hiçbir öğe
* sadeleştirme adına kaldırılmaz"*.)
*
* ⭐ Yeni dil: arz kanalları AYNI renk; DARBOĞAZ olan parlar.
*
* ⚠️ ÖLÇÜM DÜZELTMESİ (dış denetim yakaladı). İlk yazdığım "nötr çubuk
* 2,37:1" sayısı YANLIŞ REFERANSA göreydi — dolguyu hero zeminiyle
* karşılaştırmıştım, oysa dolgu `.gbar` RAYINA oturuyor ve göz oraya bakıyor.
* Doğru hesapla üç oran birden tutmak zorunda:
* nötr ↔ ray 3,15:1 ← çubuğun UZUNLUĞU bundan okunur
* darboğaz ↔ nötr 3,21:1 ← "hangisi bağlıyor" bundan okunur
* darboğaz ↔ ray 10,14:1
* 30 kombinasyon tarandı; ikisini birden ≥3,0 yapan TEK çözüm ray 0,06 +
* nötr 0,45 (bkz. .gbar). Eski 0,14/0,28 ikilisinde nötr↔ray 1,55:1 idi.
*
* ⭐ Renk körlüğüne dayanıklı: ayrım tonda değil PARLAKLIKTA. */
.gfill.p,
.gfill.e {
background: rgba(255, 255, 255, 0.45);
}
.gfill.darbogaz {
background: #fff;
}
/* ⭐ HEDEF BİR ARZ KANALI DEĞİL, ÖLÇÜ — o yüzden DOLGU değil ÇERÇEVE.
⚠️ Gerekçe sadece kavramsal değil: `app.js:2504` hedef yokken
`target = limiting_milk_l`e düşüyor; dolu çizilseydi Hedef çubuğu ile
darboğaz çubuğu BİREBİR aynı görünürdü. Çerçeve ikisini ayırır. */
.gfill.t {
background: transparent;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
/* Darboğazın adı ve sayısı da koyulaşır — çubuk tek başına kalmasın. */
.gline.darbogaz .gl,
.gline.darbogaz .gv {
color: #fff;
font-weight: var(--agirlik-vurgu, 600);
}
.gline .gv {
/* ⭐ 12 -> 19px (2026-08-11). Bu ekran bir OLCUM ARACI; rakam icerigin
kendisi. Fable: "rakam olcegi kurmak ekranin NEYI soyledigini degistirir;
sicak zemin/bosluk/kose yalniz NASIL soyledigini."
Kalinlik 800 -> 600: punto buyuyunce agirlik gerekmiyor, ustelik
fonts.css yalniz 400 ve 600 bildiriyor (800 sentetik kalinlasiyordu). */
color: #fff;
text-align: right;
font-size: 19px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1;
}
.gsum {
margin: 0 0 12px;
border-radius: 10px;
padding: 11px 13px;
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.35;
}
.gsum.green {
background: var(--green-bg);
color: var(--green-ink);
}
.gsum.amber {
background: var(--yellow-bg);
color: var(--yellow-ink);
}
.gsum.red {
background: var(--red-bg);
color: var(--red-ink);
}
.gsum.none {
border: 1px dashed var(--line);
background: var(--card);
color: var(--muted);
}
.grow {
display: grid;
grid-template-columns: 13px minmax(92px, 0.78fr) auto minmax(82px, auto);
align-items: center;
gap: 10px;
padding: 9px 2px;
border-bottom: 1px solid var(--line);
}
.grow:last-child {
border-bottom: 0;
}
.glight {
width: 11px;
height: 11px;
border-radius: 50%;
}
.glight.green {
background: var(--green);
}
.glight.amber {
background: var(--yellow);
}
.glight.note {
background: var(--blue);
}
.glight.red {
background: var(--red);
}
.gkey {
min-width: 0;
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
.gmsg {
display: inline-flex;
justify-self: start;
border-radius: 10px;
padding: 1px 8px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
white-space: nowrap;
}
.gmsg.green {
background: var(--green-bg);
color: var(--green);
}
.gmsg.amber {
background: var(--yellow-bg);
color: var(--yellow);
}
.gmsg.note {
background: var(--blue-bg);
color: var(--blue);
}
.gmsg.red {
background: var(--red-bg);
color: var(--red);
}
.gval {
color: var(--muted);
font-size: 12px;
text-align: right;
white-space: nowrap;
}
.empty-state,
.rc-empty {
color: var(--muted);
font-size: 13px;
padding: 8px 2px;
}
.oneri-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 0 0 12px;
}
.oneri-hint {
flex: 1;
min-width: 220px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.recommendation-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.recommendation-table td.up {
color: var(--green);
font-weight: var(--agirlik-vurgu, 600);
}
.recommendation-table td.up::before {
content: "▲ ";
}
.recommendation-table td.dn {
color: var(--red);
font-weight: var(--agirlik-vurgu, 600);
}
.recommendation-table td.dn::before {
content: "▼ ";
}
.type-material {
border-radius: 10px;
padding: 11px 13px;
background: var(--yellow-bg);
color: var(--yellow-ink);
font-size: 13px;
line-height: 1.45;
}
.ca-suggest {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
border-radius: 10px;
padding: 12px 14px;
background: var(--yellow-bg);
}
.ca-suggest .ca-msg {
flex: 1;
min-width: 200px;
color: var(--yellow-ink);
font-size: 13px;
line-height: 1.45;
}
.ca-suggest .act {
flex: 0 0 auto;
}
.rctable tfoot td {
border-top: 2px solid var(--line);
border-bottom: 0;
font-weight: var(--agirlik-vurgu, 600);
}
.rc-split {
margin-top: 10px;
color: var(--muted);
font-size: 13px;
}
.rc-split b {
color: var(--ink);
}
.rtable td:first-child {
font-weight: var(--agirlik-vurgu, 600);
text-align: left;
}
.st {
display: inline-flex;
justify-content: center;
min-width: 48px;
border-radius: 10px;
padding: 1px 8px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
text-transform: uppercase;
}
.st.ok {
background: var(--green-bg);
color: var(--green);
}
.st.lo,
.st.low {
background: var(--yellow-bg);
color: var(--yellow);
}
.st.hi,
.st.high {
background: var(--red-bg);
color: var(--red);
}
.indi-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.indi {
border-radius: 12px;
padding: 12px 14px;
border: 1px solid var(--line);
background: var(--card);
}
.indi-k {
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
color: var(--muted);
}
.indi-v {
margin-top: 5px;
font-size: 23px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.1;
color: var(--ink);
}
.indi-v .u {
margin-left: 5px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
color: var(--muted);
}
.indi-s {
margin-top: 6px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
color: var(--muted);
}
/* ⭐ "İYİ"NİN ZEMİNİ YOK (2026-08-10, dış inceleme md. 2).
Bu kutucuk hedefteyken YEŞİL bir zemin alıyordu — ama hedefte olmak
söylenecek bir şey değil, SESSİZLİKTİR. Kutunun kendi çerçevesi ve
`.indi-s` metni (mürekkep yeşili, altta) durumu zaten söylüyor.
⛔ `.indi.lo` / `.indi.hi` zeminleri KALIYOR — onlar "hangi ölçüm hedef
dışı" bilgisini taşıyor, yani ürünün kendisi. Renk yalnız hüküm anında. */
.indi.ok {
border-color: var(--line);
}
/* ⚠️ Durum metinleri PARLAK renk değil MÜREKKEP rengi kullanır.
ÖLÇÜLDÜ (2026-07-29, Fable): renkli zeminde `--yellow` 2,84:1,
`--green` 3,04:1, `--red` 3,78:1 çıkıyordu; 12px metin için eşik 4,5:1.
Tam da "ne yanlış" cevabını taşıyan satırlar bunlar — güneşli ahırda
telefonda ilk kaybolacak metin. `-ink` değişkenleri zaten bu iş için
vardı ve kullanılmıyordu: sırasıyla 5,3 · 5,8 · 6,9:1 veriyorlar. */
.indi.ok .indi-s {
color: var(--green-ink);
}
.indi.lo {
background: var(--yellow-bg);
border-color: transparent;
}
.indi.lo .indi-s {
color: var(--yellow-ink);
}
.indi.hi {
background: var(--red-bg);
border-color: transparent;
}
.indi.hi .indi-s {
color: var(--red-ink);
}
.indi.na {
border-style: dashed;
}
.chips {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.chip {
min-width: 0;
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px 11px;
background: var(--card);
transition: border-color var(--ease), background-color var(--ease);
}
.chip .k {
color: var(--muted);
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.chip .v {
margin-top: 2px;
font-size: 19px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0;
}
.chip .u {
margin-left: 3px;
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.cmp-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.cmp-table th {
padding: 5px 6px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.04em;
text-align: right;
text-transform: uppercase;
}
.cmp-table th:first-child {
text-align: left;
}
.cmp-table td {
padding: 7px 6px;
border-bottom: 1px solid var(--line);
}
.cmp-table td:first-child {
font-weight: var(--agirlik-vurgu, 600);
}
.cmp-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: var(--agirlik-vurgu, 600);
}
.cmp-table tbody tr:last-child td {
border-bottom: 0;
}
.cmp-table td:last-child {
color: var(--accent);
}
/* Boş not 10px ölü boşluk bırakıyordu (İkinci Görüş cilası, 31-08) */
.cmp-note:empty { display: none; }
.cmp-note {
margin-top: 10px;
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.cmp-note.ok {
color: var(--green-ink);
}
.cmp-note.warn {
color: var(--yellow-ink);
}
#ikinciGorusPanel .idx {
background: var(--blue-bg);
color: var(--blue);
}
/* ── İKİNCİ GÖRÜŞ katmanları (2026-08-31) ────────────────────────────────
⚠️ YENİ RENK/SABİT UYDURULMADI: hepsi styles.css'te zaten yaşayan
değişkenler ve kardeş desenler (.cmp-table / .cmp-note / .he-prim
bloğu). */
/* ⛔ OKUNUR GENİŞLİK (Gökhan, 2026-09-01: *"terazi yok, düzen yok"*).
Kusur ölçüldü: sağ sütun masaüstünde 1400px'e kadar uzuyor, `.cmp-table`
`width:100%` olduğu için etiket sol uçta, sayı sağ uçta kalıyor ve arada
göz bağı kopuyordu. Sayı, etiketinin YANINDA olsun diye panel gövdesi
tipografik bir ölçüye alındı (piksel değil `ch` — yazı tipi büyürse ölçü
de büyür). Kardeş desen: `.hedef-yardim { max-width: 22ch }`. */
#ikinciGorusPanel .body {
max-width: 74ch;
}
.ig-ozet {
margin-bottom: 12px;
}
/* ── TERAZİ: iki kefe + ortada fark rozeti ──────────────────────────────
⛔ YENİ RENK/SABİT UYDURULMADI: `--card-head` / `--line` / `--green-ink`
/ `--muted` zaten yaşayan değişkenler; köşe yarıçapı ve iç boşluk
`.cmp-table` + kart ailesiyle aynı ölçekte.
⚠️ Kefe bir KADRAN DEĞİLDİR: bandı yok, hüküm vermez (md.3). Yalnız iki
sayıyı göz hizasına getirir. */
.ig-terazi {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 8px;
}
.ig-kefe {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card-head);
padding: 10px 12px;
min-width: 0;
}
/* Yönü RENK/ÇERÇEVE söyler — badge'e işaret yazmak yerine yüksek olan kefe
işaretlenir. "Daha iyi" demez, "daha yüksek söylüyor" der (İG kuralı). */
.ig-kefe.yuksek {
border-color: var(--green);
background: var(--green-bg);
}
.ig-kefe-ad {
color: var(--muted);
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ig-kefe-sayi {
margin-top: 2px;
font-size: 26px;
font-weight: var(--agirlik-vurgu, 600);
font-variant-numeric: tabular-nums;
line-height: 30px;
}
.ig-kefe.yuksek .ig-kefe-sayi {
color: var(--green-ink);
}
.ig-kefe-birim {
margin-left: 3px;
color: var(--muted);
font-size: 13px;
font-weight: var(--agirlik-metin, 400);
}
.ig-rozet {
align-self: center;
border: 1px dashed var(--line);
border-radius: 999px;
padding: 5px 10px;
text-align: center;
white-space: nowrap;
}
.ig-rozet-etiket {
display: block;
color: var(--muted);
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ig-rozet-sayi {
font-size: 14px;
font-weight: var(--agirlik-vurgu, 600);
font-variant-numeric: tabular-nums;
}
/* 375px: kefeler alt alta, rozet ARALARINDA kalır (grid sırası korunur). */
@media screen and (max-width: 560px) {
.ig-terazi {
grid-template-columns: 1fr;
}
.ig-rozet {
justify-self: center;
}
}
/* Hedef bir REFERANS değerdir, hüküm cümlesi değil (Fable hükmü 31-08).
Bu yüzden bir kefenin İÇİNDE değil, İKİSİNİN ALTINDA ortak bir çizgi:
iki kefe de aynı referansa göre okunur. */
.ig-hedef {
margin: 8px 0 0;
padding-top: 7px;
border-top: 1px dashed var(--line);
color: var(--muted);
font-size: 12px;
text-align: center;
}
.ig-fark {
margin: 10px 0 0;
font-size: 13px;
}
/* ⭐ MANŞET UZLAŞMADIR (Fable hükmü 2026-09-01). Hiyerarşinin ikinci
basamağı: kefelerden küçük, gövde metninden büyük. */
.ig-manset {
margin: 12px 0 0;
font-size: 14px;
line-height: 20px;
}
/* Savunma cümlesi rozete YAPIŞIK gelir — farkı gören göz hemen altında
sebebini bulsun. Sol kenar çizgisi "bu bir yan not" der. */
.ig-savunma {
margin: 8px 0 0;
padding-left: 9px;
border-left: 2px solid var(--green);
color: var(--muted);
font-size: 12px;
line-height: 17px;
}
/* İG'nin NE OLMADIĞI — üst katmanda ve görünür. */
.ig-carpraz {
margin: 10px 0 0;
border-radius: 10px;
background: var(--card-head);
padding: 8px 10px;
font-size: 12px;
line-height: 17px;
}
/* Kazma modundaki alt başlıklar: tabloların hangi soruyu cevapladığı. */
.ig-alt-baslik {
margin: 14px 0 6px;
color: var(--muted);
font-size: 11px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ig-alt-baslik:first-child {
margin-top: 0;
}
/* Kademe-1: eksen başına TEK isimli satır. ⛔ Tablo değil liste — tablo
sütunları çıplak sayı çiftini geri getirirdi. */
.ig-eksen-ozet {
margin: 0;
padding-left: 16px;
font-size: 13px;
line-height: 19px;
}
.ig-eksen-ozet li + li {
margin-top: 6px;
}
/* "En çok ayrışan eksen" — YUKARIDAKİNDEN AYRI bir soru olduğu için ayrı
kutu. Aynı listeye konsaydı iki bilgi tek soru gibi okunurdu. */
.ig-ayrisan {
margin: 10px 0 0;
border-left: 2px solid var(--line);
padding-left: 9px;
color: var(--muted);
font-size: 12px;
line-height: 17px;
}
/* Öğretici cümleler. Varsayılan öğreticilik (Gökhan kuralı 2026-08-23):
"bilen zaten bakmaz ama bilmeyen öğrenir." */
.ig-sebep {
margin: 8px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 17px;
}
.ig-katman {
margin-top: 12px;
border-top: 1px solid var(--line);
padding-top: 10px;
}
.ig-katman > summary {
cursor: pointer;
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.ig-katman > summary::marker {
color: var(--line);
}
.ig-katman > div {
margin-top: 10px;
}
/* L2 birim sütunu: başlık, altındaki hücreyle aynı yana hizalanır.
`.cmp-table th` genel kuralı sağa yaslıyor; sayıdan SONRA gelen birim
hücresi ise sola — başlık sütunundan kopuk duruyordu (tarayıcı provası). */
#igKazma .cmp-table th:last-child {
text-align: left;
}
/* Künye listesi — her sayının kaynağını taşır (tarif §3 künye zorunluluğu). */
.ig-kunye {
margin: 10px 0 0;
padding-left: 16px;
color: var(--muted);
font-size: 11.5px;
line-height: 16px;
}
.ig-kunye li + li {
margin-top: 5px;
}
/* ── MİNERAL-VİTAMİN PANELİ (v1) ────────────────────────────────────────
⛔ Bayrak kapalıyken bu blok DOM'a HİÇ girmez (app.js yaratır).
Yeni renk/ölçü UYDURULMADI: gövde `.cmp-table` ailesinden, mürekkep
kademeleri (--ink → --muted) ve durum renkleri (--red-ink/--green-ink)
ürünün kendi token'larından. Buradaki kurallar yalnız o ailenin
yetmediği üç yeri kapatıyor: künye sütunu, davet hücresi, alt başlık. */
.mv-table {
table-layout: auto;
}
/* `.cmp-table td:last-child` son sütunu vurgu rengine boyuyor; burada son
sütun KÜNYE — vurgu değil, üçüncü mürekkep kademesi. */
.mv-table td.mv-kunye {
color: var(--muted);
font-family: var(--font-num, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 10.5px;
font-weight: 400;
text-align: right;
white-space: nowrap;
}
.mv-table td.mv-davet {
color: var(--muted);
font-size: 11.5px;
}
/* Eksik satır sayıyla konuşur; renk yalnız DURUM anlatır, süs değil. */
.mv-table tr.mv-eksik td:first-child {
color: var(--red-ink);
}
.mv-table tr.mv-gereksinim_hazirlaniyor td {
color: var(--muted);
}
/* Motorun kendi hedefi — aynı besinin ikinci künyesi. Girintili durur ki
ayrı bir besin sanılmasın; ikisi de kendi adıyla yazılı. */
.mv-table tr.mv-motor td:first-child {
padding-left: 16px;
color: var(--muted);
font-weight: 400;
}
.mv-alt-baslik {
margin: 16px 0 0;
color: var(--ink);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
/* ── İKİNCİ GÖRÜŞ · KURUCU BÖLÜMÜ (C3, 2026-09-01) ──────────────────────
⛔ Bayrak kapalıyken bu blok DOM'a HİÇ girmez (app.js yaratır). Görsel
aile terazininkiyle AYNI: kefe kartı deseni burada da işler — solda
kullanıcının mevcut rasyonu, sağda kurgu. Yeni renk/sabit yok. */
.igk-durum {
margin: 8px 0 0;
color: var(--muted);
font-size: 12px;
}
.igk-durum.warn {
color: var(--yellow-ink);
}
/* Kurgunun kendi terazisi: mevcut ↔ kurgu, her biri İKİ ölçüyle. */
.igk-kefe-cift {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.igk-satir {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
font-size: 12px;
}
.igk-satir + .igk-satir {
border-top: 1px solid var(--line);
padding-top: 4px;
}
.igk-satir b {
font-variant-numeric: tabular-nums;
}
/* Karışım tablosu: fark sütunu yönü RENKLE değil İŞARETLE söyler —
artı/eksi bir hüküm değil, yön bilgisidir. */
#igKurucuSonuc .cmp-table td.fark {
color: var(--muted);
}
@media screen and (max-width: 560px) {
.igk-kefe-cift {
grid-template-columns: 1fr;
}
}
body.basic .expert-only {
display: none;
}
/* Kural paneli bilerek HER İKİ MODDA da açık (Gökhan, 2026-07-27): bir ara
"sınırlar uzman moduna" denmişti, ama ekranı görünce karar geri alındı —
dört cümle jargonsuz olduğu için çiftçi de anlıyor. Gizli kısıt riskine
de girilmemiş oluyor. */
/* ⚠️ EKRAN SORGULARI `screen and` ILE YALITILDI (2026-08-04).
Baskida viewport KAGIT KUTUSUDUR. Chrome'da `@page { margin: 0 }` sayesinde
genislik 794 px kaliyor ve telefon bloklari devreye girmiyor; Safari `@page`i
uygulamadigi icin genislik "kagit - kullanicinin kenar bosluklari" oluyor
(~698 px) ve BUTUN telefon stilleri baskiya siziyor: rapor tek sutuna
dusuyor, yazi boyu degisiyor, A4'e sigmiyor.
Teshis: Fable (2026-08-04). Ekran davranisi DEGISMEZ — `screen` zaten esler. */
@media screen and (max-width: 980px) {
.wrap {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 720px) {
.topbar {
position: static;
align-items: stretch;
flex-wrap: wrap;
}
.brand {
flex: 1 1 calc(100% - 60px);
}
.ready {
margin-left: 0;
}
.ready,
.modeToggle {
flex: 1 1 auto;
justify-content: center;
}
.wrap {
margin-top: 14px;
padding-inline: 12px;
}
.io,
.chips {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.addrow {
grid-template-columns: 1fr;
}
/* ⚠️ `overflow-x: auto` DİKEYİ DE KIRPAR. CSS'te bir eksen `visible`
değilse öteki eksen de otomatik olarak kırpıcıya döner — yalnız yatay
kaydırma istenir, dikey kırpma bedava gelir.
ÖLÇÜLDÜ (2026-07-29, Gökhan: *"menü altta kalıyor"*): 375px'te yem
listesi 384→704'e uzanıyordu, tablo 489'da bitiyordu → 215px kesildi.
Kırpma `.feedtable`ın hesaplanan `overflow: auto`sundan geliyordu ve
CSS'te overflow yazan hiçbir kural `.feedtable`a eşleşmiyordu; yalnız
bu `overflow-x` vardı.
Aşağıdaki 640px bloğunda satırlar KARTA dönüşüyor (display:block),
yani orada yatayda kaydıracak bir şey yok ve kırpma saf zarar. */
.feedtable {
display: block;
overflow-x: auto;
}
/* Yem adı artık kısa (kod + sınıf/KM eki gösterilmiyor) ve KM sütunu kalktı;
230px yerine 150px yetiyor. min-width olmazsa sayı sütunları sığmak için
büzülüyor (kg girdisi 23px'e kadar iniyordu). */
.feed-cell {
min-width: 150px;
}
.kg-cell,
.price-cell {
min-width: 72px;
}
/* 💰 KM-fiyat karşılığı (2026-08-21, yaş-fiyat körlüğü): fiyat girilince
kutunun altında "≈ 16,7 ₺ KM" — kuru madde kilosu başına gerçek fiyat.
Kart düzeninde (mobil) flex akışına kendiliğinden oturur. */
.price-cell .km-fiyat {
display: block;
font-size: 11px;
line-height: 1.2;
color: var(--ink);
opacity: 0.8;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.grow {
grid-template-columns: 13px minmax(0, 1fr);
align-items: start;
}
.gmsg,
.gval {
grid-column: 2;
text-align: left;
}
}
@media screen and (max-width: 520px) {
.io,
.chips {
grid-template-columns: 1fr;
}
.hero .big {
font-size: 38px;
}
.gline {
grid-template-columns: 88px minmax(0, 1fr) 58px; /* 46 -> 58: telefonda TASMASIN */
gap: 8px;
}
}
/* ---- Özet Al butonu + rapor modalı ---- */
.reportBtn {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
border-radius: 10px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
cursor: pointer;
transition: background-color var(--ease);
}
.reportBtn:hover {
background: rgba(255, 255, 255, 0.28);
}
/* ⭐ ÜST BAR İKONU — EMOJİ DEĞİL, DÜZ KARAKTER (2026-08-10).
Emoji ikonlar kendi renklerini getiriyor (❓ kırmızı çiziliyor) ve bu ürünün
kuralı *"kırmızı asla tıklanabilir değil"*. Düz karakter üst barın beyaz
mürekkebini miras alır. Emoji ikonların yanında küçük kalmasın diye punto
bir tık büyütülür. */
.ust-ikon {
font-size: 15px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1;
}
/* Mobilde header sıkışmasın: etiketler gizlenir, ikon kalır; ~2 satır */
@media screen and (max-width: 640px) {
.btn-label {
display: none;
}
.reportBtn {
padding: 8px 11px;
gap: 0;
}
.homeLink {
padding: 0 11px;
gap: 0;
}
.topbar {
gap: 6px;
padding: 10px 12px;
}
/* Marka tek satırda logo/ok ile; alt başlık mobilde gizli */
.brand {
flex: 1 1 auto;
}
.brand p {
display: none;
}
.brand h1 {
font-size: 17px;
}
/* Durum çipi + mod anahtarı + ikonlar ikinci satırda, esnemeden */
.ready,
.modeToggle {
flex: 0 0 auto;
}
.ready {
margin-left: 0;
padding: 5px 9px;
font-size: 12px;
min-height: 30px;
}
.modeToggle button {
padding: 6px 9px;
font-size: 12px;
}
.reportBtn {
padding: 7px 9px;
}
.themeToggle {
min-height: 30px;
}
}
.report-overlay {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
background: rgba(15, 30, 22, 0.55);
backdrop-filter: blur(2px);
overflow: auto;
}
.report-overlay[hidden] {
display: none;
}
.report-modal {
width: min(820px, 100%);
margin: auto;
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.report-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #12603c;
flex-wrap: wrap;
}
.report-name-input {
flex: 1;
min-width: 160px;
border: 0;
border-radius: 9px;
padding: 9px 12px;
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
background: rgba(255, 255, 255, 0.92);
color: #1a2b22;
}
.report-toolbar-actions {
display: flex;
gap: 8px;
}
.report-scroll {
max-height: calc(100vh - 140px);
overflow: auto;
padding: 18px;
background: #eef2ef;
}
/* Rapor sayfası — daima açık tema (temiz PNG için) */
.report-sheet {
width: 760px;
max-width: 100%;
margin: 0 auto;
background: #fff;
color: #22302a;
padding: 26px 28px;
border-radius: 10px;
font-size: 13px;
line-height: 1.4;
}
.report-sheet .rep-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 2px solid #12603c;
margin-bottom: 16px;
}
.report-sheet .rep-title {
display: flex;
align-items: center;
gap: 12px;
}
.report-sheet .rep-logo {
width: 42px;
height: 42px;
border-radius: 10px;
background: #12603c;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--agirlik-vurgu, 600);
font-size: 15px;
}
.report-sheet h1 {
margin: 0;
font-size: 20px;
font-weight: var(--agirlik-vurgu, 600);
color: #12603c;
}
.report-sheet .rep-date {
color: #6a7a72;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.report-sheet .rep-name {
max-width: 44%;
text-align: right;
font-weight: var(--agirlik-vurgu, 600);
font-size: 14px;
color: #22302a;
}
.report-sheet .rep-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: start;
}
.report-sheet .rep-col {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.report-sheet .rep-block {
border: 1px solid #e2e8e4;
border-radius: 10px;
padding: 12px 13px;
background: #fbfdfc;
}
.report-sheet .rep-block h3 {
margin: 0 0 8px;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
text-transform: uppercase;
letter-spacing: 0.03em;
color: #12603c;
}
.report-sheet .rep-kv {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 3px 0;
border-bottom: 1px dashed #eceff0;
}
.report-sheet .rep-kv:last-child {
border-bottom: 0;
}
.report-sheet .rep-kv span {
color: #6a7a72;
}
.report-sheet .rep-table {
width: 100%;
border-collapse: collapse;
}
.report-sheet .rep-table th,
.report-sheet .rep-table td {
padding: 4px 6px;
text-align: left;
border-bottom: 1px solid #eef2ef;
}
.report-sheet .rep-table th {
color: #6a7a72;
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.report-sheet .rep-table .r {
text-align: right;
}
.report-sheet .rep-table tfoot td {
border-top: 2px solid #d9e2dc;
border-bottom: 0;
font-weight: var(--agirlik-vurgu, 600);
}
.report-sheet .num {
font-variant-numeric: tabular-nums;
}
.report-sheet .rep-result {
background: #12603c;
color: #fff;
border-color: #12603c;
}
.report-sheet .rep-result-lab {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.85;
}
.report-sheet .rep-result-big {
font-size: 34px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.1;
}
.report-sheet .rep-result-big span {
font-size: 14px;
font-weight: var(--agirlik-vurgu, 600);
opacity: 0.85;
}
.report-sheet .rep-result-sub {
font-size: 12px;
margin-top: 2px;
opacity: 0.95;
}
.report-sheet .rep-line {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
border-bottom: 1px dashed #eceff0;
}
.report-sheet .rep-line:last-child {
border-bottom: 0;
}
.report-sheet .rep-line span:nth-child(2) {
flex: 1;
}
.report-sheet .rep-line b small {
font-weight: var(--agirlik-vurgu, 600);
color: #6a7a72;
}
.report-sheet .rep-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
background: #9aa8a1;
}
.report-sheet .rep-dot.ok { background: #1f9d57; }
.report-sheet .rep-dot.lo { background: #d99a12; }
.report-sheet .rep-dot.warn { background: #d99a12; }
.report-sheet .rep-dot.hi,
.report-sheet .rep-dot.bad { background: #d64545; }
.report-sheet .rep-dot.na { background: #9aa8a1; }
.report-sheet b.ok { color: #1f9d57; }
.report-sheet b.warn { color: #d99a12; }
.report-sheet b.bad { color: #d64545; }
.report-sheet .rep-pill {
display: inline-block;
border-radius: 8px;
padding: 1px 8px;
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
}
.report-sheet .rep-pill.ok { background: #e2f3ea; color: #1f9d57; }
.report-sheet .rep-pill.lo,
.report-sheet .rep-pill.low { background: #fbf0d8; color: #c78a0e; }
.report-sheet .rep-pill.hi,
.report-sheet .rep-pill.high { background: #fbe3e3; color: #d64545; }
.report-sheet .rep-chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.report-sheet .rep-chip {
border: 1px solid #e2e8e4;
border-radius: 8px;
padding: 6px 8px;
background: #fff;
}
.report-sheet .rep-chip span {
display: block;
font-size: 10.5px;
color: #6a7a72;
font-weight: var(--agirlik-vurgu, 600);
}
.report-sheet .rep-chip b {
font-size: 14px;
}
/* Rapordaki karşılığı: bir çipin neden boş olduğunu söyleyen satır.
Raporun kendi paleti (`.rep-chip span` ile aynı soluk yeşil-gri). */
.report-sheet .rep-chips-not {
margin-top: 8px;
font-size: 11px;
line-height: 1.4;
color: #6a7a72;
}
.report-sheet .rep-foot {
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid #e2e8e4;
font-size: 12px;
color: #8a978f;
text-align: center;
}
@media screen and (max-width: 720px) {
.report-sheet {
width: 100%;
padding: 18px;
}
.report-sheet .rep-grid {
grid-template-columns: 1fr;
}
.report-sheet .rep-chips {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Onboarding tanıtım turu ---- */
.tour-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(10, 22, 16, 0.55);
}
.tour-spot {
position: fixed;
border-radius: 12px;
box-shadow: 0 0 0 4px var(--brand), 0 0 0 9999px rgba(10, 22, 16, 0.55);
transition: left var(--ease), top var(--ease), width var(--ease),
height var(--ease);
pointer-events: none;
}
.tour-pop {
position: fixed;
width: min(360px, calc(100vw - 24px));
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow-pop);
padding: 16px 18px;
transition: left var(--ease), top var(--ease);
}
.tour-step {
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
color: var(--brand);
letter-spacing: 0.02em;
}
.tour-title {
margin: 4px 0 6px;
font-size: 17px;
line-height: 1.3;
}
.tour-text {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
.tour-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tour-nav {
display: flex;
gap: 8px;
}
.tour-pop button {
font: inherit;
cursor: pointer;
border-radius: 9px;
padding: 8px 14px;
border: 1px solid var(--line);
background: var(--surface-soft);
color: var(--ink);
transition: background var(--ease), border-color var(--ease);
}
.tour-pop button:hover {
border-color: var(--brand);
}
.tour-pop .tour-next {
background: var(--brand);
border-color: var(--brand);
color: #fff;
font-weight: var(--agirlik-vurgu, 600);
}
.tour-pop .tour-skip {
background: transparent;
border-color: transparent;
color: var(--muted);
padding-left: 4px;
}
.tour-media {
margin: 2px 0 10px;
padding: 8px;
background: var(--surface-soft);
border: 1px solid var(--line);
border-radius: 10px;
}
.tour-media[hidden] {
display: none;
}
.tour-media svg {
display: block;
width: 100%;
height: auto;
}
.tour-demo {
display: block;
width: 100%;
margin: 0 0 12px;
font: inherit;
font-weight: var(--agirlik-vurgu, 600);
cursor: pointer;
border-radius: 10px;
padding: 10px 14px;
border: 1px solid var(--green);
background: var(--green-bg);
color: var(--green-ink);
transition: filter var(--ease);
}
.tour-demo:hover {
filter: brightness(0.97);
}
.tour-demo:disabled {
cursor: default;
opacity: 0.85;
}
.tour-demo[hidden] {
display: none;
}
/* ---- "Nasıl kullanılır?" yazılı kılavuz ---- */
.guide-overlay {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
background: rgba(15, 30, 22, 0.55);
backdrop-filter: blur(2px);
overflow: auto;
}
.guide-overlay[hidden] {
display: none;
}
.guide-modal {
width: min(720px, 100%);
margin: auto;
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.guide-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, var(--brand), var(--brand-d));
color: #fff;
}
.guide-head h2 {
margin: 0;
font-size: 17px;
}
.guide-scroll {
max-height: calc(100vh - 150px);
overflow: auto;
padding: 18px;
}
.guide-scroll h3 {
margin: 18px 0 8px;
font-size: 15px;
color: var(--accent);
}
.guide-card {
background: var(--surface-soft);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
font-size: 14px;
line-height: 1.5;
}
.guide-card p {
margin: 6px 0 0;
color: var(--muted);
}
.guide-lead strong {
font-size: 15px;
}
.guide-step {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 8px 0;
border-bottom: 1px solid var(--line);
}
.guide-step:first-child {
padding-top: 0;
}
.guide-step:last-child {
border-bottom: none;
padding-bottom: 0;
}
.guide-num {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--agirlik-vurgu, 600);
font-size: 13px;
}
.guide-step p {
margin: 2px 0 0;
}
.guide-list {
list-style: none;
margin: 0;
padding: 4px 0;
}
.guide-list li {
padding: 8px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
line-height: 1.45;
}
.guide-list li:last-child {
border-bottom: none;
}
.guide-tour-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
/* ── Gösterge sekmeleri ───────────────────────────────────────────────────
NEDEN (2026-07-27): sağ sütun 5 sert geçit + 4 gösterge + NASEM + özet +
notlar taşıyor. Alt alta koyunca ekran kayıyordu ve en çok basılan düğme
(Dengele) aşağıda kalıyordu.
ÖNERİ PANELİ SEKMELERİN DIŞINDA: o bir eylem, inceleme değil. Hero de
dışarıda — karar için gereken şey her zaman görünür kalsın; detay
incelemesi bilinçli bir tıklama olsun.
Sıralama `order` ile yapılıyor, DOM sırası değiştirilmedi: böylece
mevcut JS'in tuttuğu bütün kimlikler ve `hidden` mantığı aynen çalışır. */
.rightcol {
display: flex;
flex-direction: column;
}
.sekme-serit {
display: flex;
gap: 4px;
margin-bottom: 14px;
padding-bottom: 2px;
border-bottom: 1px solid var(--line);
overflow-x: auto;
}
.sekme-serit button {
flex: 0 0 auto;
padding: 9px 14px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 8px 8px 0 0;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
cursor: pointer;
}
.sekme-serit button:hover {
color: var(--ink);
background: var(--surface-soft);
}
/* ⭐ SEÇİLİ SEKME: RENKLE DEĞİL KALINLIKLA (2026-08-10, dış inceleme md. 6).
*
* İnceleme: *"Sekmeler küçük ve zayıf; sekme değişince neyin değişip neyin
* kaldığı okunmuyor."* Kodda alt çizgi ZATEN vardı — ama iki kusurla:
* (1) rengi `--brand` idi. Marka rengi (154°) ile "iyi durum" yeşili (144°)
* arasında ÖLÇÜLEN fark 10,1° — ayırt edilemez. Seçili sekme bir
* HÜKÜM taşıyormuş gibi okunuyordu. (Karar: marka rengi hüküm rengi
* olamaz — TASARIM_KARARLARI_2026_08_10.md md. 3)
* (2) seçili ile seçilmemiş arasındaki TEK fark renkti; ikisi de 600
* kalınlıktaydı. Renk körlüğünde sekme şeridi düzleşiyordu.
*
* Şimdi üç kanal var, hiçbiri ton değil: mürekkep rengi · 700 kalınlık ·
* mürekkep alt çizgi. */
.sekme-serit button[aria-selected="true"] {
color: var(--ink);
border-bottom-color: var(--ink);
font-weight: var(--agirlik-vurgu, 600);
}
/* Sayaç rozeti: notlar/uyarılar sekmede olduğu için "bir şey var" sinyali
görünür kalmalı — gizli bilgi bırakmıyoruz. */
.sekme-rozet {
display: inline-block;
min-width: 17px;
margin-left: 6px;
padding: 0 5px;
border-radius: 999px;
background: var(--yellow-bg);
color: var(--yellow-ink);
font-size: 12px;
line-height: 17px;
text-align: center;
}
/* Aktif olmayan sekmenin panelleri gizlenir. Her durum AÇIKÇA yazılıyor;
CSS'te "kapsayıcının niteliğiyle eşleşmeyen" diye genel bir kural yok. */
/* ⚠️ `>` ŞART: sekme şeridi de `#results` içinde ve düğmeleri de
`data-sekme` taşıyor. Torun seçici kullanınca kendi DÜĞMELERİMİZİ
gizliyordu — şeritte yalnız aktif sekme görünüyordu (2026-07-27'de
canlı denemede yakalandı). Paneller `#results`'ın DOĞRUDAN çocuğu. */
/* ⚠️ YENİ SEKME EKLERKEN BURAYA DA SATIR EKLE. Liste elle yazıldığı için
sessizce eksik kalır: "Kadranlar" sekmesi eklendiğinde (2026-07-28) satır
unutuldu ve sekmeye basınca HİÇBİR panel gizlenmedi — hepsi alt alta
göründü. `tests/test_sekme_kapsami.py` artık bu eksiği yakalar. */
#results[data-sekme-acik="saglik"] > [data-sekme]:not([data-sekme="saglik"]),
#results[data-sekme-acik="teknik"] > [data-sekme]:not([data-sekme="teknik"]),
#results[data-sekme-acik="kadranlar"] > [data-sekme]:not([data-sekme="kadranlar"]),
#results[data-sekme-acik="ikinci-gorus"] > [data-sekme]:not([data-sekme="ikinci-gorus"]),
#results[data-sekme-acik="notlar"] > [data-sekme]:not([data-sekme="notlar"]) {
display: none;
}
/* Çiftçi modunda BOŞ sekmenin DÜĞMESİ gizlenir — şeridin tamamı değil.
⚠️ Eskiden burada `body.basic .sekme-serit{display:none}` vardı. Yazıldığı
gün doğruydu: çiftçi modunda geriye tek sekme (Sağlık) kalıyordu. Sonra
"Kadranlar" eklendi (2026-07-28) ve o sekme `expert-only` DEĞİL — ama şerit
gizli olduğu ve `setMode("basic")` sekmeyi "saglik"e zorladığı için çiftçi
19 kadranın hiçbirini göremiyordu. Oysa kadran tam da onun için: biyolojiyi
görselleştirip güven veriyor.
⚠️ Eski yorum ayrıca YANLIŞTI: Teknik ve NASEM panelleri `expert-only`
değil, yalnız `expert-detail` taşıyordu — ve `expert-detail` hiçbir şeyi
gizlemiyor, sadece gölge veriyor. Sınıflar 2026-07-29'da gerçeğe uyduruldu.
Düğmeler `expert-only` taşır, gizlemeyi yukarıdaki genel kural yapar;
koruma: tests/test_sekme_kapsami.py */
/* Gizlenen geçidin YOKLUĞUNU açıklayan not. Sessizce yutmak "5 geçit vardı,
neden 4?" sorusunu doğuruyordu (2026-07-27). */
.gecit-gizli-not {
margin-top: 8px;
color: var(--muted);
font-size: 12px;
}
/* Tavan AŞIMI öğretici bloğu (2026-09-01) — doluluk ve KM kapasitesi aynı
kalıbı paylaşır: ikisi de "inek bunu yiyemez" ailesinden.
Renk emsali UYDURULMADI: bütünlük rozetinin ZORLANIYOR basamağı zaten
`--turuncu` (yeşil→sarı→turuncu→kırmızı merdiveninin üçüncü basamağı) ve
bu blok tam o basamağın cümlesi. Sol kenar çubuğu emsali `.gecit-gizli-not`
ailesinden değil, kart içi vurgu bloklarından. */
.asim-notu {
margin-top: 12px;
border-left: 3px solid var(--turuncu);
border-radius: 0 6px 6px 0;
background: var(--turuncu-zemin);
padding: 10px 12px;
}
.asim-notu-baslik {
margin-bottom: 4px;
color: var(--turuncu);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
.asim-notu p {
margin: 0;
color: var(--metin, inherit);
font-size: 12.5px;
line-height: 18px;
}
/* ── Besin analizi şeridi ─────────────────────────────────────────────────
Sekiz sayı, tek satır, sıfır tıklama. Rasyon tablosunun HEMEN ALTINDA:
kg değiştirince ilk bakılan yer burası; sağ sütuna koymak gözü ekranın
öbür ucuna yolluyordu (2026-07-27 tasarım turu). */
.besin-serit {
display: flex;
align-items: stretch;
gap: 14px;
margin-bottom: 18px;
padding: 12px 14px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
overflow-x: auto;
}
.besin-serit-basi {
flex: 0 0 auto;
align-self: center;
max-width: 92px;
color: var(--muted);
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.35;
}
.besin-serit-basi span {
display: block;
font-weight: var(--agirlik-metin, 400);
text-transform: none;
letter-spacing: 0;
}
.besin-serit-govde {
display: flex;
flex: 1 1 auto;
gap: 0;
}
.besin-oge {
flex: 1 1 0;
min-width: 62px;
padding: 0 10px;
border-left: 1px solid var(--line);
}
.besin-oge:first-child {
border-left: 0;
}
.besin-k {
color: var(--muted);
font-size: 10.5px;
font-weight: var(--agirlik-vurgu, 600);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.besin-v {
font-size: 17px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.25;
}
/* Şeridin ALTINDAKİ açıklama satırı — bir sayının YOKLUĞUNU anlatır.
Renk/punto emsali `.gecit-gizli-not` (aynı iş: eksik olanı sessizce
yutmak "neden boş?" sorusunu doğuruyor).
⚠️ Negatif üst boşluk BİLEREK: şeridin kendi 18px alt boşluğundan 12px
geri alınıyor ki açıklama, açıkladığı şeritten kopmasın. */
.besin-serit-not {
margin: -12px 0 18px;
padding: 0 14px;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.besin-u {
/* ⭐ Birim SAYIDAN AYRILIR: alt satira iner, kucuk ve soluk kalir.
Fable: "sayi ile birimi ayni puntoda olmasin." Boylece 10 sayi tek
bakista okunur, birimler gurultu yapmaz. */
display: block;
margin-left: 0;
color: var(--muted);
font-family: var(--font-ui, inherit);
font-size: 10.5px;
font-weight: var(--agirlik-metin, 400);
line-height: 1.2;
}
/* ── Yapışkan hamle çubuğu ────────────────────────────────────────────────
"Dengele"ye ARKA ARKAYA basılıyor: rasyon tek hamlede değil 3-6 turda
dengeleniyor. Sağ sütun uzayınca düğme aşağıda kalıyor ve kullanıcı her
turda onu arıyordu. Sabit koordinat = kas hafızası.
Sağ sütunun İÇİNDE kalır (tüm pencereyi kaplamaz), yoksa masaüstünde
rasyon tablosunu örterdi. Gölgesiz; üst sınırı kontrast çizgiyle. */
.hamle-cubugu {
position: sticky;
bottom: 0;
z-index: 15;
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding: 12px 14px;
border-top: 2px solid var(--brand);
border-radius: 12px 12px 0 0;
background: var(--card);
}
.hamle-cubugu .act.primary {
flex: 0 0 auto;
min-width: 132px;
}
.hamle-kazanc {
flex: 0 0 auto;
color: var(--green-ink);
font-size: 13px;
font-weight: var(--agirlik-vurgu, 600);
}
.hamle-seri {
flex: 1 1 auto;
min-width: 0;
color: var(--muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hamle-gecis {
flex: 0 0 auto;
color: var(--muted);
font-size: 13px;
}
/* SAKİN DURUM: öneri yokken yeşil düğme bağırmasın. */
.hamle-cubugu.sakin {
border-top-color: var(--line);
}
.hamle-cubugu.sakin .act.primary {
background: transparent;
border: 1px solid var(--line);
color: var(--muted);
box-shadow: none;
}
/* Çubuğun örttüğü kadar nefes payı + telefonda güvenli alan. */
.rightcol {
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
/* Dar ekranda önce SERİ bilgisi, sonra geçiş düşer; düğme ve kazanç kalır. */
@media screen and (max-width: 720px) {
.hamle-seri {
display: none;
}
}
/* ⭐ 520px ALTINDA SEVİYE KALIR, KAZANÇ DÜŞER (2026-08-23, ressam denetimi
XIII/1). Eskiden tersiydi: telefonda (gerçek viewport ~347px) "25,2 → 25,9 L"
gizleniyor, yalnız "≈ +0,7 L" kalıyordu — çiftçi sütün NEREDE olduğunu
görmek için yukarı kaydırmak zorundaydı.
Seviye, kazancın taşıdığı bilgiyi ZATEN içerir (fark = kazanç); tersi doğru
değil. Dar ekranda daha çok bilgi taşıyan kalır. */
@media screen and (max-width: 520px) {
.hamle-kazanc {
display: none;
}
}
/* Ölçer çubukları yeni genişliğe KAYSIN — hero rakamıyla aynı ritim.
Hareket bütçesi: yalnız bu iki şey oynar (bkz. app.js sayiyiCanlandir). */
.gfill {
transition: width 0.4s cubic-bezier(0, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.gfill {
transition: none;
}
}
/* ── Mobil: − / + adım düğmeleri ──────────────────────────────────────────
Ahırda, ayakta, eldivenle, telefonda sayı klavyesiyle uğraşmak zulüm.
Adım MOTORUN adımı (0,25 kg) — başka bir adım kullanılırsa kullanıcı
motorun bulduğu değerlere elle ulaşamaz.
Masaüstünde gizli: orada klavye daha hızlı ve yer değerli. */
.kg-adim {
display: flex;
align-items: center;
gap: 4px;
}
.kg-btn {
display: none;
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--input-bg);
color: var(--ink);
font-size: 20px;
line-height: 1;
}
.kg-btn:active {
background: var(--surface-soft);
}
@media screen and (max-width: 720px) {
.kg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.kg-cell {
width: auto;
}
/* ⚠️ FİYAT TELEFONDA ARTIK GÖRÜNÜR (2026-08-20, Gökhan telefondan
bildirdi: "fiyatları nereye giriyoruz?"). Eski gizleme kuralının
gerekçesi ("çiftçi telefonda fiyat girmiyor") fiyat katmanından
ÖNCE yazılmıştı; fiyat tiebreak + Cebe kalan + senaryo maliyeti
hep bu girişe bağlı — varsayım eskidi, kural kaldırıldı.
Kart düzenindeki biçimi aşağıdaki 720px bloğunda (etiketli satır). */
.feedtable thead th:nth-child(3) {
display: none;
}
}
/* Telefonda sert geçitler KART değil ROZET. Dört geçit iki satıra sığar;
durum renk + işaretle birlikte anlatılır (yalnız renk yetmez). Ölçer
çubuğu ve hedef satırı burada gizlenir — ahırda gereken bilgi
"tamam mı, değil mi". Detay için Danışman moduna geçilir. */
@media screen and (max-width: 980px) {
body.basic #hardChecks {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.basic #hardChecks .gate-card {
flex: 0 0 auto;
margin: 0;
padding: 7px 12px;
border-radius: 999px;
}
body.basic #hardChecks .gate-meter,
body.basic #hardChecks .gate-ends {
display: none;
}
body.basic #hardChecks .gate-head {
gap: 6px;
}
body.basic #hardChecks .gate-state {
font-size: 0;
}
/* Durum yalnız renkle değil, İŞARETLE de anlatılsın. */
body.basic #hardChecks .gate-state::after {
font-size: 12px;
}
body.basic #hardChecks .gate-card.green .gate-state::after { content: "✓"; }
body.basic #hardChecks .gate-card.amber .gate-state::after { content: "!"; }
body.basic #hardChecks .gate-card.red .gate-state::after { content: "✕"; }
}
/* ════════════════════════════════════════════════════════════════════════
GÖRSEL YENİLEME (2026-07-27) — Claude Design maketinin uygulanması.
Gökhan: "Ben o görsel tasarımı istiyorum; kime gösterdiysem beğendi."
Üç değişiklik: üç sütunlu düzen · sade kart başlıkları · tabloda türetilen
sütunlar. Davranış hiç değişmiyor; DOM kimlikleri korunuyor.
════════════════════════════════════════════════════════════════════════ */
/* ── Üç sütun ──────────────────────────────────────────────────────────
sol: hayvan + senaryolar (dar) · orta: rasyon (geniş) · sağ: sonuç.
Maketteki ferahlığın çoğu bu ayrımdan geliyor: girdi, çalışma alanı ve
sonuç birbirine karışmıyor. */
/* ⚠️ Sütun düzeni BURADA DEĞİL `program-theme.css`'te: o dosya styles.css'ten
sonra yükleniyor ve `.wrap`'i eziyor. Buraya yazınca uygulanmıyor. */
.midcol {
min-width: 0;
}
/* ── Sade kart başlıkları ──────────────────────────────────────────────
Emoji ikonlar ve renkli durum şeritleri kaldırıldı. Gerekçe: renk ve
vurgu bütçesi DURUM için (güvende/uyarı/ihlal) saklanmalı; her kartın
kendi ikonu ve rengi olunca gerçekten önemli olan şey öne çıkmıyor.
2026-07-28 GÜNCELLEME (Gökhan: "Diğer panellerdeki üst etiketleri ve
ikonları da sadeleştir"): üst etiket de kalktı. Çoğu zaten başlığı
tekrar ediyordu ("Özet / Rasyon Özeti", "Dikkat / Uyarılar"). Bilgi
taşıyan tek etiket "Adım 2 · Yaş baz"tı; `.baslik-not` olarak başlığın
yanına alındı. İkon ve üst etiket MARKUP'TAN silindi — bu dosyadaki
gizleme kuralları da gereksiz kaldı.
⚠️ NOT: buradaki `display:none`, program-theme.css SONRA yüklendiği ve
`.section-icon`a display verdiği için zaten çalışmıyordu. Kaskat sırası
yine ısırmıştı. */
.card.status-card {
border-left-width: 1px;
border-left-color: var(--line);
}
.card h2 {
padding-top: 14px;
padding-bottom: 12px;
background: transparent;
border-bottom: 1px solid var(--line);
}
/* ── Rasyon tablosu: türetilen sütunlar ───────────────────────────────── */
.rasyon-ozet {
margin-left: auto;
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-metin, 400);
}
.feedtable tfoot td {
padding-top: 10px;
border-top: 1px solid var(--line);
font-weight: var(--agirlik-vurgu, 600);
font-size: 13px;
}
/* ── Senaryolar ───────────────────────────────────────────────────────── */
.senaryo-sayi {
margin-left: auto;
color: var(--muted);
font-size: 12px;
}
.senaryo-liste {
display: flex;
flex-direction: column;
gap: 8px;
}
.senaryo {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
}
.senaryo.etkin {
border-color: var(--brand);
background: var(--green-bg);
}
.senaryo-harf {
flex: 0 0 auto;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: var(--surface-soft);
color: var(--muted);
font-size: 12px;
font-weight: var(--agirlik-vurgu, 600);
}
.senaryo.etkin .senaryo-harf {
background: var(--brand);
color: #fff;
}
.senaryo-ad {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.senaryo-sut {
flex: 0 0 auto;
font-size: 14px;
font-weight: var(--agirlik-vurgu, 600);
}
/* ⭐ SENARYO V1 kartları (2026-08-16): A/B satırlarıyla aynı dil —
yalnız ikinci satırda özet (nişasta · ticari pay · maliyet). Kart
satırı sarabilsin diye flex-wrap; detay tam genişlik alır. */
#senaryoKartlari .senaryo {
flex-wrap: wrap;
}
/* ⭐⭐ MANŞET = AİLENİN KİMLİK EKSENİ (2026-08-23, XVI-2 — app.js
`SENARYO_METNI`). Kartın en büyük yazısı, kartları AYIRAN sayıyı taşır:
"ticari yem 40% → 22%". Tam satır alır (üstündeki ad/süt satırından
ayrılsın), sarabilir — 347px'te "en az dokunuş: 3 kalem değişiyor" gibi
uzun manşet kırpılmadan iki satıra düşer. */
.senaryo-manset {
flex: 1 1 100%;
font-size: 16px;
font-weight: var(--agirlik-vurgu, 600);
line-height: 1.25;
color: var(--ink);
}
/* Süt kartın manşeti DEĞİL: dört kartın birbirine en yakın sayısı oydu
(yayılım 0,5 L, ölçüldü). Metni ve "gidebildiği kadar" etiketi aynen
duruyor — yalnız boyu özet satırının boyuna iniyor. ⛔ Kapsam
#senaryoKartlari: A/B senaryo listesinin (`.senaryo-liste`) süt sütunu
bu değişiklikten etkilenmez. */
#senaryoKartlari .senaryo-sut {
font-size: 12px;
font-weight: 400;
}
.senaryo-detay {
flex: 1 1 100%;
font-size: 12px;
color: var(--muted);
}
/* Danışman gerekçesi: kartın "neden bunu seçeyim?" sorusuna verdiği tek
cümlelik cevap. Özet satırının kardeşi ama SOLUK DEĞİL — okunması istenen
bir cümle (takas kartındaki `.takas-danisman` ile aynı hüküm), dipnot
değil. Cümle sarar; kırpılmaz. */
.senaryo-gerekce {
flex: 1 1 100%;
font-size: 12px;
line-height: 1.45;
color: var(--ink);
}
/* "Neden daha ileri gidemedi": motorun kendi durma kodundan türeyen tek
satır (app.js `SENARYO_DURUS_METNI` / `MOTOR_KURAL_METINLERI`). Gerekçe
satırının kardeşi — aynı ölçü, aynı mürekkep; okunması istenen bir cümle,
dipnot değil. Yeni renk YOK: kart bir hüküm vermiyor, olgu bildiriyor.
Cümle sarar (347px'te iki satıra düşer); kırpılmaz. */
.senaryo-durus {
flex: 1 1 100%;
font-size: 12px;
line-height: 1.45;
color: var(--ink);
}
/* Yemliğe giren yeni kalem: özet satırının kardeşi ama SOLUK DEĞİL —
satın alma iması taşıyan bir olgu, dipnot değil (motor izi rozetiyle
aynı hüküm, 2026-08-08). Mürekkep tam tonda, ağırlık sözlüğünden. */
.senaryo-yeni {
flex: 1 1 100%;
font-size: 12px;
color: var(--ink);
font-weight: var(--agirlik-vurgu, 600);
}
/* Telefonda türetilen sütunlar gizli: yer yok ve çiftçinin oradaki işi
kg girmek. Toplamlar besin analizi şeridinde zaten var. */
@media screen and (max-width: 720px) {
.feedtable td.km-cell,
.feedtable td.tl-cell,
.feedtable tfoot {
display: none;
}
}
/* Telefonda kart düzenine dönüldüğü için genişlik kuralları geri alınır. */
@media screen and (max-width: 720px) {
.feedtable td.feed-cell,
.feedtable td.kg-cell,
.feedtable td.lock-cell {
width: auto;
white-space: normal;
}
.kg-adim input {
width: auto;
text-align: center;
}
}
/* Rasyon tablosu rötuşu `program-theme.css`'in SONUNDA:
o dosya bu dosyadan SONRA yükleniyor, buraya yazılan tablo
kuralları eziliyordu (2026-07-27'de ölçüldü). */
/* ⚠️ SIRA ÖNEMLİ: bu blok Fable'ın tablo kurallarından SONRA gelmeli.
Aksi hâlde `table-layout:fixed` ve `.feedtable td{padding}` telefondaki
kart düzenini eziyor (ölçüldü). Taşındı, kopya bırakılmadı. */
/* ── Telefonda rasyon tablosu SATIR değil KART ────────────────────────────
ÖLÇÜLDÜ (2026-07-27): − / + düğmeleri eklenince satır 375px'e sığmadı ve
MİKTAR ekranın dışında kaldı — düğmeleri koymak, koymamaktan kötü hâle
geldi. Tablo düzeni telefonda bırakılıyor: yem adı bir satır, miktar
kontrolü altında.
`display: block` ile hücreler kutuya dönüşür; masaüstünde tablo aynen
kalır (orada sütun hizası değerli). */
@media screen and (max-width: 720px) {
.feedtable,
.feedtable tbody,
.feedtable tr,
.feedtable td {
display: block;
width: auto;
}
.feedtable thead {
display: none; /* kart düzeninde sütun başlığının anlamı yok */
}
.feedtable tr.ration-row {
position: relative;
margin-bottom: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card-head);
}
.feedtable td.feed-cell {
min-width: 0;
padding: 0 34px 8px 0; /* sağda silme düğmesine yer */
}
.feedtable td.kg-cell {
padding: 0;
}
/* ⭐ FİYAT, kart düzeninde ETİKETLİ satır (2026-08-20). Kart düzeninde
sütun başlığı yok — çıplak bir sayı kutusu ne olduğunu söyleyemez;
etiket ::before ile hücrede (girdinin kendi aria-label'ı app.js'te). */
.feedtable td.price-cell {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 0;
}
.feedtable td.price-cell::before {
content: "₺/kg";
font-size: 12px;
color: var(--muted);
}
.feedtable td.price-cell input {
width: 96px;
max-width: 96px; /* masaüstü sütun tavanı (48px) burada geçersiz */
min-height: 40px; /* dokunma hedefi */
flex: 0 0 auto;
}
.kg-adim {
justify-content: space-between;
}
.kg-adim input {
flex: 1 1 auto;
min-width: 0;
text-align: center;
font-size: 17px;
}
.feedtable td.lock-cell {
width: auto;
padding: 8px 0 0;
text-align: left;
}
/* Silme düğmesi kartın sağ üst köşesine. */
.feedtable td.remove-cell {
position: absolute;
top: 8px;
right: 8px;
width: auto;
padding: 0;
}
}
/* WhatsApp bağlantısı düğme gibi görünsün (2026-08-04).
`.act` kuralları `button.act` diye ELEMENTE bağlıydı; görüş kutusundaki
"WhatsApp'tan da gönder" bir olduğu için hiçbirine uymuyor ve düz mavi
bağlantı gibi duruyordu. Seçiciler `a.act` ile genişletildi — depoda başka
`a.act` yok, yani hiçbir mevcut görünüm etkilenmiyor.
olarak KALIYOR (button değil): gerçekten bir yere gidiyor, yeni sekmede
açılmalı ve telefonda uzun basma menüsü çalışmalı. */
a.act {
text-decoration: none;
}
/* ══ BASKI / PDF (2026-08-04) ═══════════════════════════════════════════════
Gökhan: *"Raporlama işine PDF çıktısını da ekleyebilir miyiz, PNG yanına?"*
(Kaynak: Mehmet Erdem.)
⭐ PDF için KÜTÜPHANE EKLENMEDİ. Tarayıcının kendi "PDF olarak kaydet"i
kullanılıyor (`window.print()`). jsPDF ~350 KB'lık yeni bir bağımlılık
olurdu; bu depoda kural *"gerçekten gerekmedikçe yeni kütüphane ekleme"*.
⚠️ Bu blok olmadan yazdırma TÜM uygulamayı basar (üst çubuk, yem satırları,
kadranlar…). Burada yalnız rapor sayfası bırakılır. */
@media print {
/* Rapor dışında hiçbir şey basılmaz. `#reportOverlay` body'nin doğrudan
çocuğu; buton bu pencere açıkken tıklanabildiği için başka hâl yok. */
body > *:not(#reportOverlay) { display: none !important; }
/* ⭐⭐ KUCULTME EN DIS ELEMANDA (2026-08-04, ikinci deneme).
Once `zoom` rapor sayfasina veriliyordu ve OLCULDU: sayfa 978 px, onu
saran modal ve overlay 732 px — cocuk ebeveyninden 246 px tasiyordu ve
tarayici bundan BOS bir ikinci sayfa uretiyordu. Kucultme en dis
elemanda olunca butun agac birlikte olcekleniyor, tasma kalmiyor.
⚠️ `overflow: auto` DA sifirlanmali: overlay kaydirma kabi olarak
kaliyordu ve sayfalama onu ayri bir kutu sayiyordu. */
#reportOverlay {
position: static !important;
display: block !important;
background: none !important;
padding: 0 !important;
inset: auto !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
zoom: var(--baski-olcek, 1);
}
/* Sayfanin kendisi bos bir alt bosluk birakip ikinci sayfa acmasin. */
html, body {
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #fff !important;
}
.report-modal {
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
max-height: none !important;
max-width: none !important;
width: 100% !important;
overflow: visible !important;
}
/* Araç çubuğu (isim kutusu + düğmeler) çıktıda işe yaramaz. */
.report-toolbar { display: none !important; }
.report-sheet {
box-shadow: none !important;
border: 0 !important;
margin: 0 !important;
/* Kenar boşluğunu BURASI verir, `@page` değil — bkz. aşağıdaki not. */
padding: 10mm !important;
width: 100% !important;
max-width: none !important;
/* ⚠️ Küçültme BURADA DEĞİL, `#reportOverlay`de (yukarıdaki nota bak):
burada olunca ebeveynler takip etmiyor ve boş ikinci sayfa çıkıyordu. */
zoom: 1;
overflow: visible !important;
height: auto !important;
}
/* ⭐⭐ TELEFON DÜZELTMESİ (2026-08-04). `@media (max-width: 720px)` raporu
TEK SÜTUNA düşürüyor; telefondan basılınca rapor iki katı uzuyor ve
A4'e sığmıyordu. Mehmet Erdem: *"telefonda hiç olmuyor."*
Baskıda sayfa genişliği her zaman A4 — düzen ekrana değil KÂĞIDA göre. */
.report-sheet .rep-grid { grid-template-columns: 1fr 1fr !important; }
.report-sheet .rep-chips { grid-template-columns: repeat(4, 1fr) !important; }
/* Bloklar sayfa ortasından İKİYE BÖLÜNMESİN — çiftçi yarım tablo okumasın. */
.report-sheet .rep-block,
.report-sheet .rep-result,
.report-sheet table { break-inside: avoid; page-break-inside: avoid; }
/* Renkli rozetler (OK / Yüksek / Düşük) baskıda da renkli kalsın; yoksa
hepsi griye düşüp ayırt edilemez hâle geliyor. */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
/* ⚠️ margin: 0 — BİLEREK. Tarayıcı üstbilgi/altbilgisini (tarih ·
"Sayfa 1 / 2" · uzun uygulama adresi) ancak kenar boşluğu sıfırken
gizliyor. Gökhan'ın ürettiği ilk PDF'te o satırlar raporun üstünde
duruyordu. Sayfanın gerçek kenar boşluğunu `.report-sheet` dolgusu
veriyor (10mm), yani görünüm değişmiyor. */
@page { size: A4 portrait; margin: 0; }
}
/* Baskı ölçümü için geçici düzen (2026-08-04).
⚠️ `baskiOlceginiOlc()` küçültme oranını bulmak için raporun BASKI
yüksekliğini bilmek zorunda. Ekran genişliğinde ölçmek yanlış sonuç
veriyordu: telefonda rapor tek sütuna düşüp iki katı uzun görünüyor, oran
da gereğinden küçük çıkıyordu. Bu sınıf ölçüm anında baskı düzenini
kurar, ölçüm biter bitmez kaldırılır. Ekranda ASLA görünmez. */
.report-sheet.baski-olcumu {
width: 718px !important;
max-width: none !important;
padding: 10mm !important;
box-sizing: border-box !important;
zoom: 1 !important;
}
.report-sheet.baski-olcumu .rep-grid { grid-template-columns: 1fr 1fr !important; }
.report-sheet.baski-olcumu .rep-chips { grid-template-columns: repeat(4, 1fr) !important; }
/* KURAL KARTI VURGUSU (2026-08-06, Gökhan).
*
* Gökhan: *"«1 kg yaparsan çözülür» diyordu, hoşuma gitti — ama bunu görmek
* için Notlar sekmesine tıklayıp aşağıdaki uyarıyı okumam gerekti."*
*
* ⚠️ Ölçüldü: kart görünür ama sayfa kaydırılmışken gözün gittiği yerde
* değil. `scrollIntoView` onu getiriyor; bu vurgu da "işte burada" diyor.
*
* ⭐ POPUP DEĞİL: tıklama istemez, 1,2 sn sonra kendiliğinden söner.
* ⛔ Yalnız kullanıcının KENDİ kuralı çözümü engellediğinde eklenir. */
@keyframes kuralVurgusu {
0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
15% { box-shadow: 0 0 0 6px rgba(217, 119, 6, .35); }
100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}
.kural-vurgu {
animation: kuralVurgusu 1.2s ease-out 1;
border-radius: 12px;
}
/* Hareketi azalt tercihine saygı: vurgu yerine sabit bir çerçeve kalsın. */
@media (prefers-reduced-motion: reduce) {
.kural-vurgu { animation: none; box-shadow: 0 0 0 3px rgba(217, 119, 6, .35); }
}
/* ⭐⭐ SÖYLEMEDİĞİM — programın kendi sınırlarını söylediği yer.
*
* Desen DÜVE modülünde doğdu (`duve.html`, Fable'ın maketindeki en dürüst
* öğe) ve 2026-08-13'te Gökhan'ın isteğiyle SÜTE taşındı:
* *"Söylemediğim kısmını süte taşıyalım; düvedeki açıklamalar bence çok
* hoş, uyarılar çok hoş, hem de öğretici."*
*
* ⛔ ORTAK DOSYAYA yazıldı, `index.html`in içine değil: düve bugün kendi
* kopyasını (`.duve-soylemedigim`) taşıyor ve ikisi ayrı ayrı bakım
* isterdi. Bugün ölçüldü — düvenin süt sayfasından "ayrı program" gibi
* görünmesinin sebebi tam olarak buydu: ortak bileşen varken yerel kopya
* yazmak. Aynı hatayı desen taşınırken TEKRARLAMAMAK için burada.
*
* Görsel dil bilerek SESSİZ: küçük punto, `--muted` renk, "—" işareti.
* Bu bölüm alarm değil DİPNOT; dikkat çekerse ana hükmü bastırır. */
.soylemedigim {
list-style: none;
padding: 0;
margin: 0;
}
.soylemedigim li {
position: relative;
padding-left: 16px;
font-size: 12.5px;
line-height: 1.6;
color: var(--muted);
}
.soylemedigim li + li {
margin-top: 6px;
}
.soylemedigim li::before {
content: "—";
position: absolute;
left: 0;
}
/* Motordan gelen "şu yemde şu alan eksik" satırları: aynı dilde ama yem adı
* vurgulu — çünkü kullanıcı o yemi DÜZELTEBİLİR, ötekiler sistemin sabit
* sınırları. */
.soylemedigim li strong {
color: var(--ink);
font-weight: var(--agirlik-vurgu, 600);
}
/* ⭐ Sıcak dönem düğmesi + kartı (2026-08-16). Alarm dili YOK — yön kartı. */
.sicak-donem-secim {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 4px;
font-size: 0.95rem;
cursor: pointer;
user-select: none;
}
.sicak-donem-secim input {
accent-color: #e8a13c;
/* ⛔ Genel input-genişlik kuralı checkbox'ı 598px yapıyordu (ölçüldü):
kutu solda, etiket ekranın öbür ucunda kesik kalıyordu (Gökhan
ekran görüntüsüyle yakaladı, 08-21). Kutu kendi boyunda kalır. */
width: 18px;
height: 18px;
flex: 0 0 auto;
margin: 0;
}
.sicak-donem-secim { max-width: max-content; }
#sicakDonemKarti .sicak-satirlar { display: grid; gap: 4px; }
#sicakDonemKarti .sicak-not { margin-top: 6px; opacity: 0.85; font-size: 0.9rem; }
#sicakDonemKarti .kaynak-notu { margin-top: 8px; font-size: 0.8rem; opacity: 0.65; }
/* ⭐ Kompozisyon önerisi (2026-08-17): dengedeki rasyonda isteğe bağlı
saman→kaba takası kutusu — yeşil hükmün altında, ayrık vurgu. */
.gsum.kompozisyon-oneri { margin-top: 8px; border-left: 3px solid #e8a13c; }
.gsum.kompozisyon-oneri .kaynak-notu { margin-top: 6px; font-size: 0.8rem; opacity: 0.65; }
/* ⭐ Danışman paragrafı (2026-08-23, XVI — Gökhan varyant B): HEP AÇIK,
açılır-kapanır değil. Manşetten bir tık sönük ama okunur (kaynak-notu
kadar silik DEĞİL: burası kartın asıl öğreten yeri).
⚠️ 347px telefonda taşmasın diye kendi kutusu yok, salt akan metin —
`overflow-wrap` uzun yem adlarını kırar. */
.gsum.kompozisyon-oneri .takas-danisman { margin-top: 8px; font-size: 0.86rem; line-height: 1.5; opacity: 0.9; overflow-wrap: anywhere; }
.gsum.kompozisyon-oneri .takas-danisman p { margin: 0 0 6px; }
.gsum.kompozisyon-oneri .takas-danisman p:last-child { margin-bottom: 0; }
.gsum.kompozisyon-oneri button { margin-top: 8px; padding: 6px 18px; border: 1px solid #e8a13c; border-radius: 8px; background: #fff7ec; color: #7a4d09; font-weight: 600; cursor: pointer; }
.gsum.kompozisyon-oneri button:hover { background: #ffe9c9; }
/* Kurucu kartı (karar #5): uçurum eşiği aşılınca «çöz» akışının içinde.
Mavi sol kenar — kompozisyonun turuncusundan ayrışsın (iki kart ayrı iş). */
.gsum.kurucu-kart { margin-bottom: 8px; border-left: 3px solid #3c7de8; }
.gsum.kurucu-kart .kaynak-notu { margin-top: 6px; font-size: 0.8rem; opacity: 0.65; }
.gsum.kurucu-kart button,
.kural-kart-not #sifirdanKurBtn { margin-top: 8px; padding: 6px 18px; border: 1px solid #3c7de8; border-radius: 8px; background: #eef4ff; color: #123c7a; font-weight: 600; cursor: pointer; }
.gsum.kurucu-kart button:hover,
.kural-kart-not #sifirdanKurBtn:hover { background: #dbe8ff; }
.gsum.kurucu-kart button:disabled,
.kural-kart-not #sifirdanKurBtn:disabled { opacity: 0.6; cursor: wait; }