/* =====================================================================
   tohum.net — Ön Yüz Tasarım Sistemi
   Derleme adımı yok. Tek dosya, düz CSS.

   Görsel kaynak: eski tohum paketleri ve çiftçi takvimi.
   İmza öğesi: 12 aylık ekim şeridi (.serit). Sayfadaki tek "yüksek
   sesli" bileşen odur; gerisi kasıtlı olarak sakin tutulmuştur.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONLAR
   ------------------------------------------------------------------- */
:root {
    /* Marka paleti — şartnamede sabitlenmiş */
    --yesil:        #1B4D3E;
    --toprak:       #8B5A2B;
    --altin:        #E8A838;
    --krem:         #F9FBF8;
    --fume:         #2C3E50;

    /* Türetilmiş tonlar */
    --yesil-koyu:   #123328;
    --yesil-orta:   #2A6B55;
    --yesil-sis:    #E7EFEA;
    --toprak-acik:  #A97544;
    --toprak-sis:   #F2E9E0;
    --altin-sis:    #FBF1DC;

    --kagit:        #FFFFFF;
    --kagit-2:      #F2F6F1;
    --cizgi:        #DCE5DA;
    --cizgi-koyu:   #BFCDBC;

    --metin:        #2C3E50;
    --metin-soluk:  #64756B;
    --metin-ters:   #F0F5EE;

    /* Tipografi
       Serif: başlıklar ve makale gövdesi — katalog/almanak karakteri.
       Sans : arayüz, etiket ve veri.
       Dosya indirmeyi gerektirmeyen yığınlar seçildi; kendi woff2
       dosyanı eklemek istersen aşağıdaki @font-face bloğunu aç. */
    --serif: "Iowan Old Style", "Hoefler Text", "Palatino Linotype",
             Palatino, "Book Antiqua", Georgia, serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

    /* Tip ölçeği — 1.25 (majör üçlü), akışkan */
    --t--1: .8125rem;
    --t-0:  1rem;
    --t-1:  1.1875rem;
    --t-2:  clamp(1.3rem, 1.15rem + .55vw, 1.55rem);
    --t-3:  clamp(1.6rem, 1.35rem + 1vw, 2.05rem);
    --t-4:  clamp(2rem, 1.55rem + 1.9vw, 2.9rem);

    /* Boşluk */
    --b1: .25rem;  --b2: .5rem;   --b3: .75rem;
    --b4: 1rem;    --b5: 1.5rem;  --b6: 2rem;
    --b7: 3rem;    --b8: 4.5rem;

    /* Köşe — bilinçli olarak küçük. Baskı işi hissi için. */
    --r-s: 2px;
    --r:   3px;
    --r-l: 5px;

    --kap: 1180px;      /* genel kapsayıcı */
    --okuma: 66ch;      /* makale satır uzunluğu */

    --gecis: 150ms cubic-bezier(.4, 0, .2, 1);
}

/* Kendi fontunu eklemek istersen woff2 dosyalarını
   varliklar/font/ içine at ve bu bloğu aç:

@font-face {
    font-family: "Tohum Serif";
    src: url("/varliklar/font/tohum-serif.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
:root { --serif: "Tohum Serif", Georgia, serif; }
*/

/* ---------------------------------------------------------------------
   2. TEMEL
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--krem);
    color: var(--metin);
    font-family: var(--sans);
    font-size: var(--t-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--yesil); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--yesil-koyu); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }

p { margin: 0 0 1em; }

:focus-visible {
    outline: 2px solid var(--toprak);
    outline-offset: 2px;
    border-radius: var(--r-s);
}

.gizli-erisim {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.atla {
    position: absolute; top: -100%; left: var(--b4); z-index: 100;
    background: var(--yesil); color: var(--metin-ters);
    padding: var(--b3) var(--b4); border-radius: 0 0 var(--r) var(--r);
}
.atla:focus { top: 0; }

/* Sayılar hizalansın — takvim ve teknik tablolar için */
.sayi, table, .veri { font-variant-numeric: tabular-nums; }

.kap {
    width: 100%;
    max-width: var(--kap);
    margin-inline: auto;
    padding-inline: var(--b5);
}

/* ---------------------------------------------------------------------
   3. ÜST BÖLÜM
   ------------------------------------------------------------------- */

/* Mevsim şeridi: sayfanın en üstünde, o ayın işini gösterir.
   Süs değil — sitenin ana aracına giden en kısa yol. */
.mevsim {
    background: var(--yesil);
    color: var(--metin-ters);
    font-size: var(--t--1);
}

.mevsim__ic {
    display: flex;
    align-items: center;
    gap: var(--b3);
    min-height: 38px;
    flex-wrap: wrap;
}

.mevsim__soz { flex: 1; }

.mevsim a { color: var(--altin); text-decoration: none; font-weight: 600; }
.mevsim a:hover { text-decoration: underline; }

.tepe {
    background: var(--kagit);
    border-bottom: 1px solid var(--cizgi);
    position: sticky;
    top: 0;
    z-index: 50;
}

.tepe__ic {
    display: flex;
    align-items: center;
    gap: var(--b5);
    min-height: 68px;
}

/* Sözcük markası: tohum tanesi + ad. Yazının kendisi işaret. */
.marka {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--yesil);
    text-decoration: none;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.marka:hover { color: var(--yesil); }
.marka svg { margin-right: .4rem; align-self: center; }
.marka__nokta { color: var(--toprak); }

.gezinme { display: flex; align-items: center; gap: var(--b2); margin-left: auto; }

.gezinme a {
    padding: .45rem .7rem;
    border-radius: var(--r);
    color: var(--metin);
    text-decoration: none;
    font-size: .94rem;
    transition: background var(--gecis), color var(--gecis);
}

.gezinme a:hover { background: var(--yesil-sis); color: var(--yesil-koyu); }

.gezinme a[aria-current="page"] {
    color: var(--yesil);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--altin);
    border-radius: var(--r) var(--r) 0 0;
}

/* Arama — üstte küçük, sayfa içinde büyük */
.arama { display: flex; }

.arama input {
    border: 1px solid var(--cizgi-koyu);
    border-right: none;
    border-radius: var(--r) 0 0 var(--r);
    padding: .45rem .7rem;
    font: inherit;
    font-size: .9rem;
    background: var(--kagit);
    color: var(--metin);
    min-width: 0;
    width: 11rem;
}

.arama input:focus { outline: none; border-color: var(--yesil-orta); }

.arama button {
    border: 1px solid var(--yesil);
    background: var(--yesil);
    color: var(--metin-ters);
    border-radius: 0 var(--r) var(--r) 0;
    padding: .45rem .7rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.arama button:hover { background: var(--yesil-koyu); }
.arama svg { width: 16px; height: 16px; }

.menu-dugme { display: none; }

/* ---------------------------------------------------------------------
   4. AY ŞERİDİ  — sitenin imza bileşeni
   12 hücre, her biri bir ay. Renk = o ayki iş.
   ------------------------------------------------------------------- */
.serit {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.serit__ay {
    position: relative;
    text-align: center;
    background: var(--kagit-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-s);
    padding: .4rem .1rem .3rem;
    font-size: .7rem;
    line-height: 1.1;
    color: var(--metin-soluk);
}

.serit__harf { display: block; font-weight: 600; font-size: .75rem; letter-spacing: -.01em; }

/* Faaliyet durumları */
.serit__ay--ic-ekim   { background: var(--yesil-sis);  border-color: var(--yesil-orta); color: var(--yesil-koyu); }
.serit__ay--dis-ekim  { background: var(--yesil);      border-color: var(--yesil);      color: var(--metin-ters); }
.serit__ay--dikim     { background: var(--toprak-sis); border-color: var(--toprak);     color: #5E3B18; }
.serit__ay--hasat     { background: var(--altin);      border-color: #C98D24;           color: #4A3208; }

/* İçinde bulunulan ay.
   Kenarlık yerine çift halka: içte beyaz ayırıcı, dışta koyu füme.
   Böylece dört dolgu renginin de üstünde görünür kalır — düz kenarlık
   koyu yeşil "toprağa ekim" hücresinde kayboluyordu. */
.serit__ay--simdi {
    box-shadow: 0 0 0 1.5px var(--krem), 0 0 0 3px var(--fume);
    z-index: 1;
}

.serit--mini {
    gap: 1px;
    margin-top: var(--b3);
}

.serit--mini .serit__ay {
    padding: .2rem 0 .15rem;
    font-size: .58rem;
    border-radius: 1px;
}

.serit--mini .serit__harf { font-size: .6rem; font-weight: 500; }
.serit--mini .serit__ay--simdi { box-shadow: 0 0 0 1px var(--krem), 0 0 0 2px var(--fume); }

.serit-anahtar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b2) var(--b4);
    margin-top: var(--b3);
    font-size: var(--t--1);
    color: var(--metin-soluk);
}

.serit-anahtar span { display: inline-flex; align-items: center; gap: .35rem; }

.serit-anahtar i {
    width: 12px; height: 12px;
    border-radius: 2px;
    border: 1px solid var(--cizgi-koyu);
    flex: none;
}

/* ---------------------------------------------------------------------
   5. ANA SAYFA GİRİŞİ
   Asimetrik: solda söz, sağda araç.
   ------------------------------------------------------------------- */
/* Izgara alanlari: mobilde araci paragrafin ustune alabilmek icin.
   Telefonda gelen kullanici "ne ekeyim" sorusuyla geliyor; uzun bir
   giris metnini kaydirip aracı aramak zorunda kalmamali. */
.giris {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas:
        "baslik secici"
        "soz    secici";
    gap: 0 var(--b8);
    align-items: start;
    padding-block: var(--b8) var(--b7);
}

.giris__baslik { grid-area: baslik; }
.giris__soz    { grid-area: soz; }
.giris .secici { grid-area: secici; }

.giris__baslik h1 {
    font-size: var(--t-4);
    max-width: 15ch;
    margin-bottom: var(--b4);
}

.giris__soz p {
    font-family: var(--serif);
    font-size: var(--t-1);
    line-height: 1.65;
    color: var(--metin-soluk);
    max-width: 42ch;
}

.giris__sayilar {
    display: flex;
    gap: var(--b6);
    margin-top: var(--b6);
    padding-top: var(--b5);
    border-top: 1px solid var(--cizgi);
}

.giris__sayi b {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-3);
    font-weight: 600;
    color: var(--yesil);
    line-height: 1;
}

.giris__sayi span { font-size: var(--t--1); color: var(--metin-soluk); }

/* Şehir/ay seçici — tohum paketi gibi çerçeveli */
.secici {
    background: var(--kagit);
    border: 1px solid var(--cizgi-koyu);
    border-top: 3px solid var(--toprak);
    border-radius: var(--r-l);
    padding: var(--b5);
}

.secici h2 { font-size: var(--t-2); margin-bottom: var(--b2); }

.secici > p {
    font-size: var(--t--1);
    color: var(--metin-soluk);
    margin-bottom: var(--b5);
}

.secici__satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--b3);
    margin-bottom: var(--b4);
}

/* ---------------------------------------------------------------------
   6. FORM ÖĞELERİ
   ------------------------------------------------------------------- */
label { display: block; font-size: var(--t--1); font-weight: 600; margin-bottom: var(--b2); }

select, input[type=text], input[type=search], input[type=email], textarea {
    width: 100%;
    padding: .58rem .7rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r);
    background: var(--kagit);
    color: var(--metin);
    font: inherit;
    font-size: .94rem;
}

select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: var(--yesil-orta);
    box-shadow: 0 0 0 3px rgba(42, 107, 85, .12);
}

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b2);
    padding: .62rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    font: inherit;
    font-size: .94rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--gecis), border-color var(--gecis);
}

.dugme--ana { background: var(--yesil); color: var(--metin-ters); }
.dugme--ana:hover { background: var(--yesil-koyu); color: var(--metin-ters); }

.dugme--sade { background: var(--kagit); color: var(--metin); border-color: var(--cizgi-koyu); }
.dugme--sade:hover { background: var(--kagit-2); color: var(--metin); }

.dugme--tam { width: 100%; }

/* ---------------------------------------------------------------------
   7. BÖLÜM BAŞLIĞI
   Başlık solda, bağlantı sağda, aralarında ince bir çizgi.
   ------------------------------------------------------------------- */
.bolum { padding-block: var(--b7); }
.bolum + .bolum { padding-top: 0; }

.bolum__bas {
    display: flex;
    align-items: baseline;
    gap: var(--b4);
    margin-bottom: var(--b5);
}

.bolum__bas h2 {
    flex: none;
    order: 0;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

/* Başlık önündeki tohum işareti: bölüm başlangıcını sessizce
   işaretler. Süs değil, ritim öğesi — göz nereye bakacağını bulur. */
.bolum__bas h2::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50% 50% 50% 0;
    background: var(--toprak);
    transform: rotate(-45deg) translateY(-2px);
}

.bolum__bas::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cizgi);
    order: 1;
}

.bolum__bas a { flex: none; order: 2; font-size: .92rem; text-decoration: none; font-weight: 600; }

/* Dar ekranda başlık ile bağlantı tek satıra sığmıyordu ve
   taşıyordu. Sarma açılıp bağlantı alt satıra iniyor; aradaki
   çizgi o düzende anlamsız kaldığı için gizleniyor. */
@media (max-width: 620px) {
    .bolum__bas { flex-wrap: wrap; row-gap: var(--b2); }
    .bolum__bas h2 { flex: 1 1 100%; min-width: 0; }
    .bolum__bas::after { display: none; }
    .bolum__bas a { order: 3; }
}
.bolum__bas a:hover { text-decoration: underline; }

.bolum__aciklama {
    font-family: var(--serif);
    color: var(--metin-soluk);
    max-width: var(--okuma);
    margin-top: calc(var(--b5) * -1 + var(--b2));
    margin-bottom: var(--b5);
}

/* ---------------------------------------------------------------------
   8. BİTKİ KARTI  — tohum paketi arkası mantığı
   Görsel, ad, latince ad, sonra teknik satırlar.
   ------------------------------------------------------------------- */
.izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--b5);
}

.izgara--genis { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.bitki {
    display: flex;
    flex-direction: column;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--gecis);
}

.bitki:hover { border-color: var(--yesil-orta); color: inherit; }
.bitki:hover .bitki__ad { text-decoration: underline; text-underline-offset: 2px; }

.bitki__gorsel {
    aspect-ratio: 4 / 3;
    background: var(--yesil-sis);
    object-fit: cover;
    width: 100%;
    border-bottom: 1px solid var(--cizgi);
}

/* Görseli olmayan kayıt. Boş gri blok yerine filiz damgası:
   kartın yüksekliği korunur, eksiklik kasıtlı görünür. */
.bitki__yer {
    display: grid;
    place-items: center;
    /* Tram noktası: görselsiz alan da baskı diliyle konuşsun */
    background-image: radial-gradient(var(--murekkep) 1px, transparent 1.1px);
    background-size: 7px 7px;
    background-color: var(--yesil-sis);
    color: var(--murekkep);
}

.bitki__yer svg { width: 40px; height: 40px; opacity: .55; }

/* Damga artık görselin üstünde — kart içerikleri aynı hizadan başlar */
.bitki__ust { position: relative; }

.bitki__ust .damga {
    position: absolute;
    left: var(--b3);
    top: var(--b3);
    margin: 0;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(2px);
}

.bitki__govde { padding: var(--b4); display: flex; flex-direction: column; flex: 1; }

.bitki__ad {
    font-family: var(--serif);
    font-size: var(--t-1);
    font-weight: 600;
    line-height: 1.25;
}

.bitki__latin {
    font-family: var(--serif);
    font-style: italic;
    font-size: .85rem;
    color: var(--metin-soluk);
    margin-top: 1px;
}

/* Teknik satırlar — nokta çizgili, katalog gibi */
.veri {
    margin: var(--b4) 0 0;
    padding-top: var(--b3);
    border-top: 1px solid var(--cizgi);
    font-size: var(--t--1);
    display: grid;
    gap: .3rem;
}

.veri > div { display: flex; align-items: baseline; gap: .4rem; }
.veri dt { color: var(--metin-soluk); flex: none; margin: 0; }

.veri dt::after {
    content: "";
    display: inline-block;
    width: 0;
}

.veri > div::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: 1px dotted var(--cizgi-koyu);
    transform: translateY(-3px);
}

.veri dd { order: 2; margin: 0; font-weight: 600; flex: none; }

/* Ata tohumu işareti — buğday başağı damgası */
.damga {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--toprak);
    background: var(--toprak-sis);
    border: 1px solid rgba(139, 90, 43, .25);
    border-radius: 999px;
    padding: .12rem .5rem;
    margin-bottom: var(--b2);
    align-self: flex-start;
}

.damga svg { width: 11px; height: 11px; }

/* ---------------------------------------------------------------------
   9. YAZI KARTI
   ------------------------------------------------------------------- */
.yazi-kart {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--b4);
    padding-block: var(--b4);
    border-bottom: 1px solid var(--cizgi);
    text-decoration: none;
    color: inherit;
}

.yazi-kart:first-child { padding-top: 0; }
.yazi-kart:hover .yazi-kart__ad { text-decoration: underline; text-underline-offset: 2px; }

.yazi-kart__gorsel {
    width: 92px; height: 92px;
    object-fit: cover;
    border-radius: var(--r);
    background: var(--yesil-sis);
    flex: none;
}

.yazi-kart__yer {
    display: grid;
    place-items: center;
    color: var(--yesil-orta);
    background:
        repeating-linear-gradient(135deg,
            transparent 0 9px,
            rgba(27, 77, 62, .035) 9px 10px),
        var(--yesil-sis);
}

.yazi-kart__yer svg { width: 24px; height: 24px; opacity: .45; }

.yazi-kart__ad { font-family: var(--serif); font-size: var(--t-1); font-weight: 600; line-height: 1.3; }

.yazi-kart__ozet {
    font-size: .9rem;
    color: var(--metin-soluk);
    margin-top: .3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yazi-kart__ust { font-size: var(--t--1); color: var(--toprak); font-weight: 600; margin-bottom: .2rem; }

/* ---------------------------------------------------------------------
   10. KIRINTI NAVİGASYON
   ------------------------------------------------------------------- */
.kirinti {
    font-size: var(--t--1);
    color: var(--metin-soluk);
    padding-block: var(--b4);
}

.kirinti ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.kirinti li { display: flex; align-items: center; gap: .35rem; }
.kirinti li + li::before { content: "/"; color: var(--cizgi-koyu); }
.kirinti a { text-decoration: none; }
.kirinti a:hover { text-decoration: underline; }
.kirinti [aria-current] { color: var(--metin); }

/* ---------------------------------------------------------------------
   11. MAKALE
   ------------------------------------------------------------------- */
.makale { max-width: var(--okuma); }

.makale p, .makale li {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.makale h2 { margin: var(--b7) 0 var(--b3); }
.makale h3 { margin: var(--b6) 0 var(--b3); }
.makale ul, .makale ol { padding-left: 1.3rem; }
.makale li { margin-bottom: .4rem; }
.makale img { border-radius: var(--r); margin-block: var(--b5); }

.makale blockquote {
    margin: var(--b5) 0;
    padding-left: var(--b4);
    border-left: 3px solid var(--altin);
    font-family: var(--serif);
    font-style: italic;
    color: var(--metin-soluk);
}

.makale table { width: 100%; border-collapse: collapse; margin-block: var(--b5); font-size: .94rem; }
.makale th, .makale td { padding: .55rem .7rem; border-bottom: 1px solid var(--cizgi); text-align: left; }
.makale th { background: var(--kagit-2); font-weight: 650; }

/* ---------------------------------------------------------------------
   12. SAYFALAMA
   ------------------------------------------------------------------- */
.sayfalama {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--b2);
    margin-top: var(--b7);
    font-size: .92rem;
}

.sayfalama a, .sayfalama span {
    padding: .4rem .7rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    text-decoration: none;
    background: var(--kagit);
    min-width: 2.2rem;
    text-align: center;
}

.sayfalama a:hover { border-color: var(--yesil-orta); background: var(--yesil-sis); }
.sayfalama [aria-current] { background: var(--yesil); color: var(--metin-ters); border-color: var(--yesil); font-weight: 600; }
.sayfalama .bosluk { border: none; background: none; color: var(--metin-soluk); min-width: auto; padding-inline: .2rem; }

/* ---------------------------------------------------------------------
   13. BOŞ DURUM
   ------------------------------------------------------------------- */
.bos {
    border: 1px dashed var(--cizgi-koyu);
    border-radius: var(--r-l);
    padding: var(--b7) var(--b5);
    text-align: center;
    background: var(--kagit);
}

.bos h3 { margin-bottom: var(--b2); }
.bos p { color: var(--metin-soluk); max-width: 46ch; margin-inline: auto; }

/* ---------------------------------------------------------------------
   14. ALT BÖLÜM
   ------------------------------------------------------------------- */
.dip {
    background: var(--yesil);
    color: var(--metin-ters);
    margin-top: var(--b8);
    padding-block: var(--b7) var(--b5);
}

.dip__izgara {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--b5);
}

.dip h2, .dip h3 { font-size: 1rem; margin-bottom: var(--b3); color: #fff; }

.dip__soz {
    font-family: var(--serif);
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(240, 245, 238, .72);
    max-width: 34ch;
}

.dip ul { list-style: none; margin: 0; padding: 0; }
.dip li { margin-bottom: .4rem; }
.dip a { color: rgba(240, 245, 238, .85); text-decoration: none; font-size: .92rem; }
.dip a:hover { color: var(--altin); text-decoration: underline; }

.dip__alt {
    margin-top: var(--b6);
    padding-top: var(--b4);
    border-top: 1px solid rgba(255, 255, 255, .13);
    display: flex;
    justify-content: space-between;
    gap: var(--b4);
    flex-wrap: wrap;
    font-size: var(--t--1);
    color: rgba(240, 245, 238, .55);
}

/* ---------------------------------------------------------------------
   15. UYARLANABİLİRLİK
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
    .giris {
        grid-template-columns: 1fr;
        grid-template-areas: "baslik" "secici" "soz";
        gap: var(--b5);
        padding-block: var(--b6) var(--b5);
    }
    .giris__baslik h1 { max-width: 100%; }
    .giris__soz p { max-width: 100%; }
    .giris__sayilar { margin-top: var(--b4); }
    .dip__izgara { grid-template-columns: 1fr 1fr; gap: var(--b5); }
}

@media (max-width: 760px) {
    .kap { padding-inline: var(--b4); }

    /* Dar ekranda mevsim sözü düşer; ad ve bağlantı kalır */
    .mevsim__soz { display: none; }
    .mevsim__ic { justify-content: space-between; }

    .menu-dugme {
        display: grid;
        place-items: center;
        margin-left: auto;
        width: 40px; height: 40px;
        background: none;
        border: 1px solid var(--cizgi-koyu);
        border-radius: var(--r);
        cursor: pointer;
        color: var(--metin);
    }

    .menu-dugme svg { width: 20px; height: 20px; }

    .gezinme {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--kagit);
        border-bottom: 1px solid var(--cizgi);
        padding: var(--b3);
        margin: 0;
        box-shadow: 0 8px 20px rgba(27, 77, 62, .09);
    }

    .gezinme[data-acik="evet"] { display: flex; }
    .gezinme a { padding: .65rem .7rem; }
    .gezinme a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--altin); border-radius: var(--r); }

    .tepe__ic { position: relative; }
    .arama { order: 10; width: 100%; margin-top: var(--b2); }
    .arama input { width: 100%; }

    /* Şerit 12 sütunda sıkışıyor — 6'ya iki sıra */
    .serit { grid-template-columns: repeat(6, 1fr); }

    .yazi-kart { grid-template-columns: 72px 1fr; }
    .yazi-kart__gorsel { width: 72px; height: 72px; }

    .giris__sayilar { gap: var(--b5); flex-wrap: wrap; }
}

@media (max-width: 520px) {
    .secici__satir { grid-template-columns: 1fr; }
    .dip__izgara { grid-template-columns: 1fr; }
    .izgara { grid-template-columns: 1fr 1fr; gap: var(--b4); }
    .bitki__govde { padding: var(--b3); }
    .veri { display: none; }        /* dar ekranda teknik satırlar gizlenir */
    .serit--mini { display: grid; }  /* ama takvim şeridi kalır — asıl bilgi o */
    .serit--mini .serit__harf { font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    .tepe, .mevsim, .dip, .arama, .sayfalama { display: none; }
    body { background: #fff; }
    .kap { max-width: none; padding: 0; }
}

/* =====================================================================
   16. MODÜL SAYFALARI (FAZ 5)
   ===================================================================== */

/* --- Sayfa başlığı --- */
.sayfa-bas { padding-block: var(--b4) var(--b6); max-width: var(--okuma); }
.sayfa-bas h1 { margin-bottom: var(--b3); }
.sayfa-bas p { font-family: var(--serif); font-size: var(--t-1); color: var(--metin-soluk); margin: 0; }

/* --- Liste + süzgeç düzeni --- */
.liste-duzen {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--b7);
    align-items: start;
}

.suzgec { position: sticky; top: 88px; }
.suzgec__grup { margin-bottom: var(--b5); }
.suzgec__grup h2 { font-family: var(--sans); font-size: .82rem; font-weight: 650; margin-bottom: var(--b3); }
.suzgec__grup h2 label { margin: 0; font-size: inherit; font-weight: inherit; }

.suzgec__liste { list-style: none; margin: 0; padding: 0; }
.suzgec__liste li { margin-bottom: 1px; }

.suzgec__liste a {
    display: flex;
    justify-content: space-between;
    gap: var(--b2);
    padding: .35rem .5rem;
    border-radius: var(--r);
    text-decoration: none;
    font-size: .9rem;
    color: var(--metin);
}

.suzgec__liste a:hover { background: var(--yesil-sis); }
.suzgec__liste a[aria-current] { background: var(--yesil); color: var(--metin-ters); font-weight: 600; }
.suzgec__liste .sayi { color: var(--metin-soluk); font-size: .82rem; }
.suzgec__liste a[aria-current] .sayi { color: rgba(240,245,238,.7); }

.onay { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 400; margin-bottom: .4rem; }
.onay input { width: 15px; height: 15px; accent-color: var(--yesil); }

.suzgec__temizle { display: block; text-align: center; margin-top: var(--b3); font-size: .85rem; }

.liste-ust { margin-bottom: var(--b4); }
.liste-sayi { margin: 0; font-size: .9rem; color: var(--metin-soluk); }
.liste-sayi strong { color: var(--metin); }

/* --- Bitki detay --- */
.detay-bas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    gap: var(--b7);
    align-items: start;
    padding-block: var(--b3) var(--b5);
}

/* Görsel yoksa sağ sütunu ayırmıyoruz — boş ızgara hücresi
   başlıkla içerik arasında kocaman bir boşluk bırakıyordu. */
.detay-bas--gorselsiz { grid-template-columns: minmax(0, 1fr); }

.detay-bas h1 { margin-bottom: var(--b2); }

.detay-latin {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-1);
    color: var(--metin-soluk);
    margin: 0 0 var(--b4);
}

.detay-ozet { font-family: var(--serif); font-size: var(--t-1); line-height: 1.65; max-width: 46ch; margin-bottom: 0; }
.detay-diger { font-size: .9rem; color: var(--metin-soluk); margin: 0; }

.detay-gorsel { width: 100%; border-radius: var(--r-l); border: 1px solid var(--cizgi); }

/* --- Künye tablosu (teknik veriler) --- */
.kunye {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 var(--b6);
    margin: 0;
}

.kunye > div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--cizgi);
}

.kunye dt { color: var(--metin-soluk); flex: none; margin: 0; font-size: .9rem; }

.kunye > div::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: 1px dotted var(--cizgi-koyu);
    transform: translateY(-3px);
}

.kunye dd { order: 2; margin: 0; font-weight: 600; flex: none; font-size: .92rem; }

/* --- Bölgesel takvim tablosu --- */
/* Başlık bloğunun alt boşluğu ile ilk bölümün üst boşluğu üst üste
   biniyordu (2rem + 3rem = 5rem). İlk bölümde üst boşluğu kısıyoruz. */
.detay-bas + .bolum,
.sayfa-bas + .bolum,
.sayfa-bas + .liste-duzen,
.detay-bas + section.bolum { padding-top: var(--b3); }

.takvim-tablo { border-top: 1px solid var(--cizgi); }

.takvim-satir {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--b5);
    align-items: center;
    padding: var(--b3) 0;
    border-bottom: 1px solid var(--cizgi);
}

.takvim-satir h3 { font-family: var(--sans); font-size: .92rem; font-weight: 600; margin: 0; }
.takvim-satir--bos h3 { color: var(--metin-soluk); font-weight: 400; }
.takvim-yok { margin: 0; font-size: .85rem; color: var(--metin-soluk); }

/* --- Komşu bitkiler --- */
.komsu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--b5); }

.komsu > div { padding: var(--b4); border-radius: var(--r); border: 1px solid var(--cizgi); background: var(--kagit); }
.komsu h3 { font-family: var(--sans); font-size: .9rem; margin-bottom: var(--b2); }
.komsu p { margin: 0; font-size: .92rem; color: var(--metin-soluk); }
.komsu__iyi { border-left: 3px solid var(--yesil) !important; }
.komsu__kotu { border-left: 3px solid var(--toprak) !important; }

/* --- Ay gezinmesi ---
   Takvim sonuç sayfasında artık kullanılmıyor: yıl şeridi aynı işi
   hem sayı hem yoğunluk hem don bilgisiyle yapıyor. Sınıf, ileride
   başka bir yerde gerekirse diye duruyor. --- */
.ay-gezinme {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--b2);
    margin-bottom: var(--b6);
}

.ay-gezinme a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .3rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    background: var(--kagit);
    text-decoration: none;
    font-size: .88rem;
    color: var(--metin);
}

.ay-gezinme a:hover { border-color: var(--yesil-orta); background: var(--yesil-sis); }

.ay-gezinme--aktif {
    background: var(--yesil) !important;
    border-color: var(--yesil) !important;
    color: var(--metin-ters) !important;
    font-weight: 600;
}

.ay-gezinme .sayi {
    font-size: .72rem;
    background: var(--yesil-sis);
    color: var(--yesil-koyu);
    border-radius: 999px;
    padding: 0 .35rem;
}

.ay-gezinme--aktif .sayi { background: rgba(255,255,255,.2); color: var(--metin-ters); }

/* --- Bölge kartları --- */
.bolge-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--b5); }

.bolge-kart {
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-top: 3px solid var(--toprak);
    border-radius: var(--r);
    padding: var(--b4);
}

.bolge-kart h3 { font-size: var(--t-1); margin-bottom: var(--b2); }
.bolge-kart p { font-size: .9rem; color: var(--metin-soluk); margin-bottom: var(--b3); }
.bolge-don { font-size: .85rem !important; color: var(--toprak) !important; font-weight: 600; }

.bolge-iller { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.bolge-iller a { font-size: .84rem; text-decoration: none; background: var(--kagit-2); padding: .18rem .5rem; border-radius: var(--r); }
.bolge-iller a:hover { background: var(--yesil-sis); }
.bolge-iller__fazla { font-size: .84rem; color: var(--metin-soluk); padding: .18rem .3rem; }

/* --- Etiket bulutu --- */
.etiket-bulut { display: flex; flex-wrap: wrap; gap: .4rem; }

.etiket-bulut a {
    font-size: .88rem;
    text-decoration: none;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    padding: .28rem .65rem;
    border-radius: 999px;
}

.etiket-bulut a:hover { border-color: var(--yesil-orta); background: var(--yesil-sis); }

/* --- Yazı detayı --- */
.yazi-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--b7);
    align-items: start;
    padding-block: var(--b3) 0;
}

.yazi-bas { max-width: var(--okuma); margin-bottom: var(--b5); }
.yazi-bas h1 { margin-bottom: var(--b3); }
.yazi-bas__kategori { margin: 0 0 var(--b3); font-size: .88rem; font-weight: 600; }
.yazi-bas__kategori a { color: var(--toprak); text-decoration: none; }
.yazi-bas__kategori a:hover { text-decoration: underline; }

.yazi-bas__ozet {
    font-family: var(--serif);
    font-size: var(--t-1);
    line-height: 1.65;
    color: var(--metin-soluk);
}

.yazi-bas__kunye {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b4);
    font-size: .85rem;
    color: var(--metin-soluk);
    padding-top: var(--b3);
    border-top: 1px solid var(--cizgi);
    margin: 0;
}

.yazi-kapak {
    width: 100%;
    max-width: var(--okuma);
    border-radius: var(--r-l);
    border: 1px solid var(--cizgi);
    margin-bottom: var(--b5);
}

.yazi-yan { position: sticky; top: 88px; }

.yan-kutu {
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    padding: var(--b4);
    margin-bottom: var(--b4);
}

.yan-kutu h2 { font-family: var(--sans); font-size: .88rem; font-weight: 650; margin-bottom: var(--b3); }

.yan-liste { list-style: none; margin: 0; padding: 0; }
.yan-liste li { padding: .4rem 0; border-bottom: 1px solid var(--cizgi); font-size: .9rem; }
.yan-liste li:last-child { border-bottom: none; }
.yan-liste a { text-decoration: none; font-weight: 600; }
.yan-liste a:hover { text-decoration: underline; }
.yan-liste em { display: block; font-family: var(--serif); font-size: .82rem; color: var(--metin-soluk); }

/* --- Geniş seçici ve büyük arama --- */
.secici--genis { border-top-width: 3px; }
.secici--genis .secici__satir { grid-template-columns: 1fr 1fr auto; margin-bottom: 0; }

.arama--buyuk { max-width: 34rem; margin-bottom: var(--b6); }
.arama--buyuk input { width: 100%; padding: .7rem .9rem; font-size: 1rem; }
.arama--buyuk button { padding: .7rem 1.2rem; font-weight: 600; }

/* --- Modül sayfaları: uyarlanabilirlik --- */
@media (max-width: 900px) {
    .liste-duzen { grid-template-columns: 1fr; gap: var(--b5); }
    .suzgec { position: static; }
    .suzgec form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--b4); align-items: end; }
    .suzgec__grup { margin-bottom: 0; }
    .yazi-duzen { grid-template-columns: 1fr; }
    .yazi-yan { position: static; }
    .detay-bas { grid-template-columns: 1fr; gap: var(--b5); }
    .takvim-satir { grid-template-columns: 1fr; gap: var(--b2); }
    .secici--genis .secici__satir { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .ay-gezinme { grid-template-columns: repeat(3, 1fr); }
    .kunye { grid-template-columns: 1fr; }
}

/* =====================================================================
   17. ŞEHİR SEÇİCİ (yazarak filtreleme)
   ===================================================================== */
.sehir-secici { position: relative; }
.sehir-secici__gizli { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }

.sehir-secici__liste {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--kagit);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r);
    box-shadow: 0 10px 28px rgba(27, 77, 62, .14);
}

.sehir-secici__liste li {
    padding: .42rem .6rem;
    border-radius: var(--r-s);
    cursor: pointer;
    font-size: .93rem;
}

.sehir-secici__liste li:hover,
.sehir-secici__liste li[aria-selected="true"] {
    background: var(--yesil-sis);
    color: var(--yesil-koyu);
}

.sehir-secici__yok { color: var(--metin-soluk); cursor: default !important; font-style: italic; }
.sehir-secici__yok:hover { background: none !important; }

/* =====================================================================
   18. MEVSİM VURGUSU
   Renk değişkenleri PHP tarafından <style> ile veriliyor.
   Marka paleti sabit kalır; yalnızca küçük yüzeyler kayar.
   ===================================================================== */
.mevsim { border-bottom: 2px solid var(--vurgu, var(--altin)); }
.mevsim a { color: var(--vurgu, var(--altin)); }
.mevsim__ad { font-weight: 700; letter-spacing: .02em; color: var(--vurgu, var(--altin)); }
.mevsim__soz { color: rgba(240, 245, 238, .72); }

/* Geçerli ay halkası mevsim rengini alır */
.serit__ay--simdi { box-shadow: 0 0 0 1.5px var(--krem), 0 0 0 3px var(--vurgu, var(--fume)); }
.serit--mini .serit__ay--simdi { box-shadow: 0 0 0 1px var(--krem), 0 0 0 2px var(--vurgu, var(--fume)); }

.gezinme a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--vurgu, var(--altin)); }

/* =====================================================================
   19. YIL ŞERİDİ
   ===================================================================== */
.yil {
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-l);
    padding: var(--b5);
    margin-bottom: var(--b6);
}

.yil__baslik { margin-bottom: var(--b4); }
.yil__baslik h2 { font-size: var(--t-2); margin-bottom: .2rem; }
.yil__baslik p { margin: 0; font-size: var(--t--1); color: var(--metin-soluk); }

.yil__serit {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--b1);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: end;
}

.yil__ay a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    color: var(--metin-soluk);
    padding-bottom: .3rem;
    border-radius: var(--r-s);
    border-bottom: 2px solid transparent;
}

.yil__ay a:hover { background: var(--yesil-sis); color: var(--yesil-koyu); }

/* Sütun: yükseklik o aydaki iş sayısıyla orantılı */
.yil__sutun {
    display: block;
    width: 100%;
    max-width: 34px;
    height: 68px;
    border-radius: 3px 3px 0 0;
    /* Dolgu üstte, boş kısım şeffaf: don taraması yalnızca boş
       bölümde görünür. Tarama tüm sütunun üstüne binince dolu aylar
       okunmuyordu. */
    background:
        linear-gradient(to top,
            var(--yesil) 0,
            var(--yesil) var(--oran, 0%),
            transparent var(--oran, 0%),
            transparent 100%),
        var(--kagit-2);
    border: 1px solid var(--cizgi);
    position: relative;
}

/* Don riski taşıyan aylar: tarama dolgunun ALTINDAKİ katmanda */
.yil__ay--don .yil__sutun {
    background:
        linear-gradient(to top,
            var(--yesil) 0,
            var(--yesil) var(--oran, 0%),
            transparent var(--oran, 0%),
            transparent 100%),
        repeating-linear-gradient(45deg,
            var(--kagit-2) 0 4px, rgba(107, 142, 138, .30) 4px 7px);
}

.yil__ay--aktif a {
    color: var(--metin);
    font-weight: 650;
    border-bottom-color: var(--vurgu, var(--altin));
}

.yil__ay--aktif .yil__sutun { border-color: var(--fume); }

.yil__etiket { font-size: .72rem; }
.yil__adet { font-size: .68rem; color: var(--metin-soluk); }

.yil__don {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: var(--b4) 0 0;
    font-size: var(--t--1);
    color: var(--metin-soluk);
}

.yil__don-kutu {
    width: 22px;
    height: 12px;
    flex: none;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 2px;
    background: repeating-linear-gradient(45deg,
        var(--kagit-2) 0 4px, rgba(107, 142, 138, .30) 4px 7px);
}

.bolum__sayi {
    flex: none;
    order: 0;
    font-size: .78rem;
    font-weight: 650;
    color: var(--metin-soluk);
    background: var(--kagit-2);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: .05rem .5rem;
    margin-left: .1rem;
}

@media (max-width: 620px) {
    .yil { padding: var(--b4); }
    .yil__serit { grid-template-columns: repeat(6, 1fr); gap: var(--b2); }
    .yil__sutun { height: 52px; }
    .yil__adet { display: none; }
}

/* =====================================================================
   20. İLETİŞİM FORMU
   ===================================================================== */
.iletisim-form { max-width: var(--okuma); margin-top: var(--b6); }
.iletisim-form label { margin-top: var(--b4); }
.iletisim-form > label:first-of-type { margin-top: 0; }
.iletisim-form .ikili-alan { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b4); }
.iletisim-form .ikili-alan label { margin-top: 0; }
.iletisim-form button { margin-top: var(--b5); }

/* Bal küpü: ekran okuyucudan da gizli, sekme sırasında da yok.
   display:none bazı botlar tarafından tanınır; konumlandırma daha iyi. */
.bal-kupu {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-bildirim {
    padding: var(--b4) var(--b5);
    border-radius: var(--r);
    border: 1px solid;
    margin-top: var(--b5);
    max-width: var(--okuma);
    font-size: .94rem;
}

.form-bildirim--basarili { background: #EDF6F0; border-color: #BFDECB; color: #1F5637; }
.form-bildirim--hata     { background: #FBEFED; border-color: #EBC6C0; color: #7E2A20; }
.form-bildirim--bilgi    { background: var(--yesil-sis); border-color: var(--cizgi-koyu); color: var(--yesil-koyu); }

@media (max-width: 520px) {
    .iletisim-form .ikili-alan { grid-template-columns: 1fr; }
}

/* =====================================================================
   21. İL SAYFASI — yıllık ekim çizelgesi
   ===================================================================== */

.il-ozet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b6);
    padding: var(--b4) 0 var(--b5);
    border-bottom: 1px solid var(--cizgi);
    margin-bottom: var(--b6);
}

.il-ozet__oge b {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-2);
    font-weight: 600;
    color: var(--yesil);
    line-height: 1.1;
}

.il-ozet__oge span { font-size: var(--t--1); color: var(--metin-soluk); }

.il-ozet__simdi {
    margin-left: auto;
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    border-bottom: 2px solid var(--vurgu, var(--altin));
    padding-bottom: 2px;
}

.il-ozet__simdi:hover { border-bottom-color: var(--yesil); }

/* --- Çizelge filtreleri --- */
.cizelge-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b2);
    margin-bottom: var(--b4);
}

.suzgec-dugme {
    border: 1px solid var(--cizgi-koyu);
    background: var(--kagit);
    color: var(--metin);
    border-radius: 999px;
    padding: .32rem .85rem;
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis);
}

.suzgec-dugme:hover { background: var(--yesil-sis); border-color: var(--yesil-orta); }

.suzgec-dugme[aria-pressed="true"] {
    background: var(--yesil);
    border-color: var(--yesil);
    color: var(--metin-ters);
    font-weight: 600;
}

.cizelge-arac__sayi { margin-left: auto; font-size: var(--t--1); color: var(--metin-soluk); }

/* Geniş tabloyu saran kutu. Bu sınıf yalnızca yonetim.css'te
   tanımlıydı; ön yüzde kullanılınca kural uygulanmıyor ve tablo
   sayfayı yatay kaydırıyordu. */
.tablo-sarmal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* --- Çizelge tablosu --- */
.cizelge {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
    min-width: 620px;
}

.cizelge thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--kagit-2);
    border-bottom: 1px solid var(--cizgi-koyu);
    padding: .45rem .3rem;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 650;
    color: var(--metin-soluk);
    text-align: center;
    white-space: nowrap;
}

.cizelge thead th:first-child { text-align: left; padding-left: .6rem; min-width: 190px; }

/* İçinde bulunulan ay sütunu boydan boya vurgulu */
.cizelge th.cizelge__simdi { color: var(--metin); background: var(--altin-sis); }
.cizelge td.cizelge__simdi { background: rgba(232, 168, 56, .09); }

.cizelge tbody th {
    text-align: left;
    font-weight: 500;
    padding: .4rem .6rem .4rem 0;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: middle;
    background: var(--krem);
}

.cizelge tbody th a { font-weight: 600; text-decoration: none; }
.cizelge tbody th a:hover { text-decoration: underline; }

.cizelge tbody th em {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: .78rem;
    color: var(--metin-soluk);
}

.cizelge__ata {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--toprak);
    background: var(--toprak-sis);
    border-radius: 2px;
    padding: 0 .28rem;
    vertical-align: 1px;
}

.cizelge td {
    border-bottom: 1px solid var(--cizgi);
    border-left: 1px solid var(--cizgi);
    padding: 0;
    height: 30px;
    text-align: center;
}

.cizelge tbody tr:hover td { background: var(--kagit-2); }
.cizelge tbody tr:hover td.cizelge__simdi { background: rgba(232, 168, 56, .16); }

/* Dolu hücre: içinde renkli bir blok */
.cizelge__isaret {
    display: block;
    width: 100%;
    height: 18px;
    margin: 0 auto;
    border-radius: 2px;
}

.cizelge__hucre--ic-ekim  .cizelge__isaret { background: var(--yesil-sis); box-shadow: inset 0 0 0 1px var(--yesil-orta); }
.cizelge__hucre--dis-ekim .cizelge__isaret { background: var(--yesil); }
.cizelge__hucre--dikim    .cizelge__isaret { background: var(--toprak-sis); box-shadow: inset 0 0 0 1px var(--toprak); }
.cizelge__hucre--hasat    .cizelge__isaret { background: var(--altin); }

/* --- Ay kartları --- */
.ay-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--b3);
}

.ay-kart {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: var(--b4);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--gecis);
}

.ay-kart:hover { border-color: var(--yesil-orta); color: inherit; }
.ay-kart--simdi { border-color: var(--vurgu, var(--altin)); box-shadow: inset 0 2px 0 var(--vurgu, var(--altin)); }
.ay-kart--bos { background: var(--kagit-2); }

.ay-kart__ad { font-family: var(--serif); font-size: var(--t-1); font-weight: 600; }
.ay-kart__sayi { font-size: var(--t--1); color: var(--metin-soluk); }
.ay-kart__bos { font-size: var(--t--1); color: var(--metin-soluk); font-style: italic; }

.ay-kart__noktalar { display: flex; gap: 3px; margin: .15rem 0; }

.nokta { width: 9px; height: 9px; border-radius: 2px; display: block; }
.nokta--ic-ekim  { background: var(--yesil-sis); box-shadow: inset 0 0 0 1px var(--yesil-orta); }
.nokta--dis-ekim { background: var(--yesil); }
.nokta--dikim    { background: var(--toprak-sis); box-shadow: inset 0 0 0 1px var(--toprak); }
.nokta--hasat    { background: var(--altin); }

.ay-kart__ornek {
    font-size: .8rem;
    color: var(--metin-soluk);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 760px) {
    .il-ozet { gap: var(--b5); }
    .il-ozet__simdi { margin-left: 0; width: 100%; }
    .ay-kartlar { grid-template-columns: 1fr 1fr; }
    .cizelge thead th:first-child { min-width: 140px; }
    .cizelge tbody th em { display: none; }
}

/* =====================================================================
   22. GÜNÜN BİLGİSİ
   Tohum paketi arkasındaki not kartı gibi: kesik kenar, hafif eğik.
   ===================================================================== */
.bilgi-kutu {
    position: relative;
    max-width: var(--kap);
    margin: var(--b6) auto 0;
    padding: var(--b5) var(--b6);
    background: var(--kagit);
    border: 1px solid var(--cizgi-koyu);
    border-left: 4px solid var(--vurgu, var(--altin));
    border-radius: var(--r);
}

/* Sağ üst köşede kıvrılmış kâğıt ucu */
.bilgi-kutu::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 26px;
    height: 26px;
    background: linear-gradient(225deg, var(--krem) 50%, var(--cizgi-koyu) 50%, var(--kagit-2) 52%);
    border-left: 1px solid var(--cizgi-koyu);
    border-bottom: 1px solid var(--cizgi-koyu);
    border-radius: 0 var(--r) 0 3px;
}

.bilgi-kutu__ust {
    display: flex;
    align-items: baseline;
    gap: var(--b3);
    margin-bottom: var(--b2);
}

.bilgi-kutu__etiket {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--toprak);
}

.bilgi-kutu__kategori {
    font-size: .74rem;
    color: var(--metin-soluk);
    background: var(--kagit-2);
    border-radius: 999px;
    padding: .08rem .5rem;
}

.bilgi-kutu__baslik { font-size: var(--t-2); margin-bottom: var(--b2); }

.bilgi-kutu__metin {
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 62ch;
    margin: 0;
}

.bilgi-kutu__baglar { margin: var(--b3) 0 0; display: flex; gap: var(--b4); flex-wrap: wrap; font-size: .9rem; }
.bilgi-kutu__kaynak { margin: var(--b2) 0 0; font-size: .78rem; color: var(--metin-soluk); }

/* =====================================================================
   23. ARAÇLAR
   ===================================================================== */
.arac-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--b4);
    padding-bottom: var(--b6);
}

.arac-kart {
    display: flex;
    flex-direction: column;
    gap: var(--b2);
    padding: var(--b5);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-top: 3px solid var(--yesil);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--gecis), transform var(--gecis);
}

.arac-kart:hover { border-color: var(--yesil-orta); border-top-color: var(--toprak); color: inherit; }
.arac-kart__ikon { color: var(--yesil); }
.arac-kart__ikon svg { width: 26px; height: 26px; }
.arac-kart__ad { font-family: var(--serif); font-size: var(--t-1); font-weight: 600; }
.arac-kart__ozet { font-size: .88rem; color: var(--metin-soluk); line-height: 1.5; }

.arac-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--b7);
    align-items: start;
}

.arac-yan { position: sticky; top: 88px; padding-top: var(--b5); }

/* --- Form --- */
.arac-form {
    background: var(--kagit);
    border: 1px solid var(--cizgi-koyu);
    border-top: 3px solid var(--toprak);
    border-radius: var(--r-l);
    padding: var(--b5);
    max-width: var(--okuma);
}

/* FAZ 10'dan kalan ".arac-form button { margin-top }" kuralı kaldırıldı.
   Kapsayıcıya bağlı öğe seçicisiydi ve sonradan eklenen artı/eksi
   düğmelerini de yakalayıp 24px aşağı itiyordu. Öğe seçicisi yerine
   sınıf kullanmak bu tür sızıntıyı baştan engeller. */

.onay-satir {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: var(--b4);
    font-size: .92rem;
    font-weight: 400;
}

.onay-satir input { width: 16px; height: 16px; accent-color: var(--yesil); }

/* --- Sonuç --- */
.arac-sonuc {
    margin-top: var(--b5);
    padding: var(--b5);
    background: var(--yesil-sis);
    border: 1px solid var(--yesil-orta);
    border-radius: var(--r-l);
    max-width: var(--okuma);
}

.sonuc-vurgu { text-align: center; padding-bottom: var(--b4); }
.sonuc-vurgu__etiket { display: block; font-size: .8rem; color: var(--metin-soluk); letter-spacing: .04em; }

.sonuc-vurgu__deger {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-3);
    color: var(--yesil-koyu);
    line-height: 1.2;
    margin: .2rem 0;
}

.sonuc-vurgu__alt { font-size: .85rem; color: var(--metin-soluk); }

.sonuc-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--b4); }

.sonuc-oge {
    text-align: center;
    padding: var(--b3);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
}

.sonuc-oge--vurgu { border-color: var(--yesil); box-shadow: inset 0 2px 0 var(--yesil); }
.sonuc-oge strong { display: block; font-family: var(--serif); font-size: var(--t-2); color: var(--yesil-koyu); line-height: 1.1; }
.sonuc-oge span { font-size: .78rem; color: var(--metin-soluk); }

.arac-sonuc__aciklama { margin: var(--b4) 0 0; font-size: .92rem; line-height: 1.6; }
.arac-sonuc__bag { margin: var(--b4) 0 0; font-size: .9rem; }

.arac-sonuc__uyari {
    margin: var(--b4) 0 0;
    padding-top: var(--b3);
    border-top: 1px solid var(--cizgi-koyu);
    font-size: .8rem;
    color: var(--metin-soluk);
    line-height: 1.55;
}

/* --- Zaman çizgisi (ekim zamanı) --- */
.zaman-cizgi { list-style: none; margin: var(--b4) 0 0; padding: 0 0 0 var(--b5); position: relative; }

.zaman-cizgi::before {
    content: "";
    position: absolute;
    left: 5px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--cizgi-koyu);
}

.zaman-cizgi li { position: relative; padding: .45rem 0; display: flex; gap: var(--b4); align-items: baseline; }

.zaman-cizgi li::before {
    content: "";
    position: absolute;
    left: calc(var(--b5) * -1 + 1px);
    top: .8rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--kagit);
    border: 2px solid var(--yesil-orta);
}

.zaman-cizgi__son::before { background: var(--altin) !important; border-color: #C98D24 !important; }
.zaman-cizgi__tarih { flex: none; width: 4.5rem; font-weight: 650; font-size: .9rem; font-variant-numeric: tabular-nums; }
.zaman-cizgi__olay { font-size: .92rem; color: var(--metin-soluk); }

/* --- Oran göstergesi (çimlenme) --- */
.oran-gosterge { text-align: center; }
.oran-gosterge__sayi { font-family: var(--serif); font-size: 3rem; line-height: 1; font-weight: 600; }
.oran-gosterge__sayi small { font-size: 1.4rem; opacity: .6; }

.oran-gosterge__cubuk {
    height: 8px;
    background: var(--kagit);
    border: 1px solid var(--cizgi-koyu);
    border-radius: 999px;
    overflow: hidden;
    margin: var(--b3) 0 var(--b2);
}

.oran-gosterge__cubuk span { display: block; height: 100%; border-radius: 999px; }
.oran-gosterge__etiket { font-weight: 650; font-size: .95rem; }

.oran-gosterge--iyi  .oran-gosterge__sayi,
.oran-gosterge--iyi  .oran-gosterge__etiket { color: var(--yesil); }
.oran-gosterge--iyi  .oran-gosterge__cubuk span { background: var(--yesil); }
.oran-gosterge--orta .oran-gosterge__sayi,
.oran-gosterge--orta .oran-gosterge__etiket { color: #B8791C; }
.oran-gosterge--orta .oran-gosterge__cubuk span { background: var(--altin); }
.oran-gosterge--kotu .oran-gosterge__sayi,
.oran-gosterge--kotu .oran-gosterge__etiket { color: #A63D2F; }
.oran-gosterge--kotu .oran-gosterge__cubuk span { background: #A63D2F; }

/* --- Karışım çubuğu (toprak) --- */
.karisim-cubugu {
    display: flex;
    height: 26px;
    border-radius: var(--r-s);
    overflow: hidden;
    margin: var(--b4) 0;
    border: 1px solid var(--cizgi-koyu);
}

.karisim-cubugu__parca { display: block; height: 100%; }
.karisim-cubugu__parca--torf    { background: #6B4A2F; }
.karisim-cubugu__parca--perlit  { background: #E6E9E4; }
.karisim-cubugu__parca--kompost { background: #3D2E1E; }

@media (max-width: 900px) {
    .arac-duzen { grid-template-columns: 1fr; }
    .arac-yan { position: static; }
}

.sonuc-uyari {
    background: #FDF6E9;
    border: 1px solid #F0DCB4;
    border-left: 4px solid var(--altin);
    border-radius: var(--r);
    padding: var(--b3) var(--b4);
    margin-bottom: var(--b4);
    font-size: .9rem;
    line-height: 1.55;
    color: #7A5210;
}

.sonuc-uyari strong { color: #5E3F0C; }

/* =====================================================================
   24. ARAÇ FORMLARI — erişilebilirlik öncelikli
   Kullanıcı kitlesi yaşça büyük olduğu için ölçüler bilinçli olarak
   sitenin geri kalanından büyük tutuldu.
   ===================================================================== */
.arac-duzen { --arac-yazi: 1.0625rem; }

.arac-bas { padding-block: var(--b4) var(--b5); max-width: var(--okuma); }
.arac-bas h1 { font-size: var(--t-3); margin-bottom: var(--b3); }
.arac-bas p { font-family: var(--serif); font-size: var(--t-1); color: var(--metin-soluk); margin: 0; }

.arac-hata-ozet {
    background: #FBEFED;
    border: 1px solid #EBC6C0;
    border-left: 4px solid var(--hata, #A63D2F);
    border-radius: var(--r);
    padding: var(--b4);
    margin-bottom: var(--b5);
    max-width: var(--okuma);
    font-size: .95rem;
    color: #7E2A20;
}

.arac-form {
    background: var(--kagit);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r-l);
    padding: 0;
    max-width: var(--okuma);
    overflow: hidden;
}

/* --- Numaralı adımlar --- */
.arac-adim {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--b4);
    padding: var(--b5);
    border-bottom: 1px solid var(--cizgi);
}

.arac-adim:last-of-type { border-bottom: none; }

.arac-adim__no {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yesil);
    color: var(--metin-ters);
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.arac-adim__govde { min-width: 0; }
.arac-adim__govde > h2 { font-size: var(--t-1); margin-bottom: var(--b4); }

/* --- Alan ---
   Yan yana duran alanlarda etiket veya yardım metni farklı sayıda
   satıra sarınca girdiler farklı yükseklikte başlıyordu. Alanı dikey
   esnek kutuya çevirip girdiyi "margin-top:auto" ile aşağı iterek
   hizayı metnin uzunluğundan bağımsız hale getiriyoruz. */
.salan {
    margin-bottom: var(--b4);
    display: flex;
    flex-direction: column;
}

.salan:last-child { margin-bottom: 0; }
.salan .sayi-girdi,
.salan .buyuk-secim,
.salan .buyuk-girdi { margin-top: auto; }

.salan__etiket {
    display: block;
    font-size: 1rem;
    font-weight: 650;
    color: var(--metin);
    margin-bottom: .25rem;
}

.salan__birim { font-weight: 400; color: var(--metin-soluk); font-size: .92rem; }

.salan__yardim {
    margin: 0 0 .5rem;
    font-size: .88rem;
    color: var(--metin-soluk);
    line-height: 1.45;
}

.salan__hata {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .45rem 0 0;
    font-size: .9rem;
    line-height: 1.45;
    color: #A63D2F;
    font-weight: 500;
}

.salan__hata svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* --- Büyük sayı girdisi --- */
.sayi-girdi { display: flex; align-items: stretch; max-width: 22rem; }

/* Yükseklik AÇIKÇA veriliyor.
   align-items:stretch'in <button> öğelerini esnetmesine güvenmek
   yanlıştı: tarayıcı içerik yüksekliğini kullanıyor ve düğme
   girdiden alçak kalıp hizasız görünüyordu. */
.sayi-girdi__dugme {
    width: 52px;
    height: 52px;
    padding: 0;
    flex: none;
    border: 1px solid var(--cizgi-koyu);
    background: var(--kagit-2);
    color: var(--yesil);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--gecis);
    -webkit-user-select: none;
    user-select: none;
}

.sayi-girdi__dugme:first-child { border-radius: var(--r) 0 0 var(--r); border-right: none; }
.sayi-girdi__dugme:last-child  { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.sayi-girdi__dugme:hover  { background: var(--yesil-sis); }
.sayi-girdi__dugme:active { background: var(--yesil); color: var(--metin-ters); }

.sayi-girdi input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 .6rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 0;
    background: var(--kagit);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--metin);
}

.sayi-girdi input:focus {
    outline: none;
    border-color: var(--yesil-orta);
    box-shadow: 0 0 0 3px rgba(42, 107, 85, .16);
    position: relative;
    z-index: 1;
}

.buyuk-secim, .buyuk-girdi {
    width: 100%;
    max-width: 26rem;
    height: 52px;
    padding: 0 .75rem;
    font-size: 1.02rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r);
    background: var(--kagit);
    color: var(--metin);
}

.salan--hatali .sayi-girdi input,
.salan--hatali .buyuk-secim,
.salan--hatali .buyuk-girdi { border-color: #C2705F; background: #FEF9F8; }

.salan--hatali .salan__etiket { color: #7E2A20; }

.buyuk-onay {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: var(--b4);
    padding: .8rem 1rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    background: var(--kagit-2);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
}

.buyuk-onay:hover { border-color: var(--yesil-orta); }
.buyuk-onay input { width: 22px; height: 22px; flex: none; accent-color: var(--yesil); }

.arac-form__satir {
    display: grid;
    /* 150px taban: üç alanlı satırlar (çap/yükseklik/adet) tek
       satıra sığsın, 2+1 gibi dengesiz bir kırılma oluşmasın. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--b4);
    align-items: stretch;   /* alanlar aynı yüksekliğe uzasın */
}

/* Izgara içindeki alanların kendi alt boşluğu KALDIRILIR: boşluğu
   zaten "gap" veriyor. Bırakılırsa son öğe hariç hepsi 16px daha
   kısa kalır ve girdiler farklı hizada başlar — ekran görüntüsünde
   görülen kayma tam olarak buydu. */
.arac-form__satir > .salan { margin-bottom: 0; }

.arac-form__gonder {
    display: flex;
    gap: var(--b3);
    padding: var(--b5);
    background: var(--kagit-2);
    border-top: 1px solid var(--cizgi);
}

.dugme--buyuk { height: 54px; padding-inline: 1.8rem; font-size: 1.05rem; }

/* --- Sonuç --- */
.arac-sonuc__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b4);
    margin-bottom: var(--b4);
    padding-bottom: var(--b3);
    border-bottom: 1px solid var(--yesil-orta);
}

.arac-sonuc__bas h2 { font-size: var(--t-2); margin: 0; }

.arac-bilgi .makale p { font-size: 1.02rem; }

@media (max-width: 620px) {
    .arac-adim { grid-template-columns: 34px 1fr; gap: var(--b3); padding: var(--b4); }
    .arac-adim__no { width: 30px; height: 30px; font-size: .9rem; }
    .arac-form__satir { grid-template-columns: 1fr; }
    .sayi-girdi { max-width: none; }
    .arac-form__gonder { flex-direction: column; padding: var(--b4); }
    .dugme--buyuk { width: 100%; }
}

/* --- Yazdırma: sadece sonuç --- */
@media print {
    .arac-form, .arac-yan, .arac-bilgi, .kirinti, .arac-hata-ozet,
    .arac-sonuc__bas button { display: none !important; }

    .arac-duzen { display: block; }
    .arac-sonuc { border: 1px solid #999; background: #fff; break-inside: avoid; }
    .arac-bas h1 { font-size: 18pt; }
    .sonuc-vurgu__deger { font-size: 22pt; }
}

/* Bitki seçiminden dolan alanı kısa süre vurgula */
.salan--doldu, input.salan--doldu {
    animation: doldu 900ms ease-out;
}

@keyframes doldu {
    0%   { background: var(--altin-sis); }
    100% { background: var(--kagit); }
}

@media (prefers-reduced-motion: reduce) {
    .salan--doldu, input.salan--doldu { animation: none; }
}

/* =====================================================================
   25. GÖRSEL DERİNLİK (FAZ 12)

   Site "sade" değil "boş" görünüyordu. Eksik olan süs değil, derinlikti:
   yüzeyler arasında fark yoktu, her şey aynı düzlemdeydi.

   Derinlik üç kaynaktan geliyor — doku, katman ve ton. Hiçbiri
   dekoratif değil: doku baskı hissi verir, katman neyin üstte
   olduğunu söyler, ton sitenin neresinde olduğunu belirtir.
   ===================================================================== */

/* ---------------------------------------------------------------------
   25.1 KÂĞIT DOKUSU
   Tek renk zemin ekranda "boş" durur. Çok düşük yoğunlukta bir gürültü
   katmanı yüzeye kâğıt hissi verir. SVG olarak gömülü: ek istek yok,
   ölçekten bağımsız, birkaç yüz bayt.
   ------------------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* İçerik dokunun üstünde kalsın */
.mevsim, .tepe, main, .dip { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   25.2 BÖLÜM TONLARI
   Aynı palet içinde kalarak her bölüme kendi zemin sıcaklığı.
   Fark bilinçli olarak küçük: ayırt edilir ama dikkat çekmez.
   ------------------------------------------------------------------- */
body[data-bolum="kutuphane"] { --krem: #F9FBF8; }
body[data-bolum="takvim"]    { --krem: #F5F9F4; }
body[data-bolum="arac"]      { --krem: #FAF8F4; }
body[data-bolum="rehber"]    { --krem: #FBFAF6; }
body[data-bolum="ana"]       { --krem: #F8FAF6; }

/* ---------------------------------------------------------------------
   25.3 KATMANLI YÜZEYLER
   Kartlar yalnızca çizgiyle tanımlanıyordu; hepsi aynı düzlemdeydi.
   İki katmanlı çok yumuşak gölge kâğıdın zeminden ayrıldığını
   hissettirir. Değerler kasıtlı olarak düşük — "kutu gölgesi" değil,
   "kâğıt kalınlığı".
   ------------------------------------------------------------------- */
:root {
    --katman-1: 0 1px 1px rgba(27, 77, 62, .04),
                0 2px 6px rgba(27, 77, 62, .045);
    --katman-2: 0 1px 2px rgba(27, 77, 62, .05),
                0 6px 18px rgba(27, 77, 62, .07);
    --katman-3: 0 2px 4px rgba(27, 77, 62, .06),
                0 14px 40px rgba(27, 77, 62, .10);
}

.bitki, .arac-kart, .ay-kart, .bolge-kart, .yan-kutu,
.secici, .yil, .arac-form, .bilgi-kutu, .medya {
    box-shadow: var(--katman-1);
}

.bitki:hover, .arac-kart:hover, .ay-kart:hover, .bolge-kart:hover {
    box-shadow: var(--katman-2);
    transform: translateY(-1px);
}

.bitki, .arac-kart, .ay-kart, .bolge-kart {
    transition: box-shadow var(--gecis), border-color var(--gecis), transform var(--gecis);
}

.secici, .arac-form { box-shadow: var(--katman-2); }
.tepe { box-shadow: 0 1px 0 var(--cizgi), 0 4px 14px rgba(27, 77, 62, .035); }

/* ---------------------------------------------------------------------
   25.4 TİPOGRAFİ İNCELİKLERİ
   ------------------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }          /* tek kelimelik son satırı önler */

h1 { letter-spacing: -.018em; }
h2 { letter-spacing: -.012em; }

/* Bağlantı altı çizgisi harflerin altından geçmesin */
.makale a, .bilgi-kutu a, .arac-sonuc__bag a {
    text-decoration-skip-ink: auto;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--yesil) 45%, transparent);
    transition: text-decoration-color var(--gecis);
}

.makale a:hover, .bilgi-kutu a:hover { text-decoration-color: var(--yesil); }

/* Makale girişi: ilk paragraf biraz daha büyük — okuma davetiyesi */
.makale > p:first-of-type {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--metin);
}

/* Rakamlar her yerde aynı genişlikte olsun */
.veri dd, .kunye dd, .sonuc-oge strong, .olcum__sayi,
.yil__adet, .ay-kart__sayi { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   25.5 BOTANİK BOŞ DURUM
   Boş kutu, içeriğin eksik olduğunu değil sitenin bozuk olduğunu
   hissettiriyordu. Çizgi motif boşluğu kasıtlı hale getirir.
   ------------------------------------------------------------------- */
.bos { position: relative; overflow: hidden; }

.bos::before {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 170px;
    height: 170px;
    opacity: .07;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4D3E' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M12 23V9'/%3E%3Cpath d='M12 9c0-5 3.2-9 8.5-10.4C19.8 5.2 16.6 8.6 12 9z'/%3E%3Cpath d='M12 14c0-4-2.6-7.4-7-8.6.6 5.4 3.2 8.2 7 8.6z'/%3E%3C/svg%3E");
}

.bos > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   25.6 ÖLÇÜLÜ HAREKET
   Yalnızca imleç etkileşiminde; sayfa açılışında hiçbir şey oynamaz.
   ------------------------------------------------------------------- */
.dugme { transition: background var(--gecis), border-color var(--gecis), transform 80ms ease; }
.dugme:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .bitki:hover, .arac-kart:hover, .ay-kart:hover, .bolge-kart:hover { transform: none; }
    .dugme:active { transform: none; }
}

/* =====================================================================
   26. ANA SAYFA AÇILIŞI

   Eski hali düz bir iki sütundu ve sayfanın geri kalanından
   ayrışmıyordu. Yeni hali mevsim renginde bir zemin bandı üzerinde
   duruyor; seçici kart bandın alt kenarını AŞARAK aşağı taşıyor.
   Bu taşma gerçek bir derinlik yaratıyor — gölge taklidi değil,
   öğelerin gerçekten farklı düzlemlerde olması.
   ===================================================================== */
.acilis { position: relative; padding-bottom: var(--b7); }

.acilis__zemin {
    /* Bant, bölümün ALT DOLGUSUNDA biter. Sabit yüzde vermek
       içeriğin ortasından kesiyordu; kenar artık içeriğin sonuna
       oturuyor ve seçici kart onu aşabiliyor. */
    position: absolute;
    inset: 0 0 var(--b7) 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--vurgu, var(--altin)) 9%, transparent) 0%,
            color-mix(in srgb, var(--vurgu, var(--altin)) 3%, transparent) 60%,
            transparent 100%),
        var(--yesil-sis);
    border-bottom: 1px solid var(--cizgi);
}

/* Zeminde soluk bir tohum sırası — baskılı kâğıt kenarı gibi */
.acilis__zemin::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 10px;
    opacity: .28;
    background-image: radial-gradient(circle at 5px 5px, var(--toprak) 1.5px, transparent 1.6px);
    background-size: 22px 10px;
}

.acilis__ic {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--b8);
    align-items: start;
    padding-top: var(--b7);
    /* Bant kenarındaki tohum sırası metnin üstünden geçmesin */
    padding-bottom: var(--b5);
}

.acilis__mevsim {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--toprak);
    margin-bottom: var(--b3);
}

.acilis__soz h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
    max-width: 14ch;
    margin-bottom: var(--b4);
}

.acilis__metin {
    font-family: var(--serif);
    font-size: var(--t-1);
    line-height: 1.68;
    color: var(--metin-soluk);
    max-width: 44ch;
}

.acilis__sayilar {
    display: flex;
    gap: var(--b6);
    margin-top: var(--b6);
    padding-top: var(--b5);
    border-top: 1px solid var(--cizgi-koyu);
}

.acilis__sayi b {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-3);
    font-weight: 600;
    color: var(--yesil);
    line-height: 1;
}

.acilis__sayi span { font-size: var(--t--1); color: var(--metin-soluk); }

/* Seçici kart: bandın dışına taşar.
   align-self:end olmadan kart sol sütundan kısa kaldığı için
   bandın içinde kalıyor ve taşma hiç oluşmuyordu. */
.secici--acilis {
    align-self: end;
    margin-bottom: calc(var(--b7) * -1);
    box-shadow: var(--katman-3);
    background: var(--kagit);
}

.secici__alt {
    margin: var(--b4) 0 0;
    text-align: center;
    font-size: .88rem;
    color: var(--metin-soluk);
}

/* Açılıştan sonraki ilk bölüm, taşan kartın altında kalmasın */
.acilis + .bilgi-kutu,
.acilis + .bolum { margin-top: var(--b6); }

@media (max-width: 900px) {
    .acilis { padding-bottom: var(--b6); }
    .acilis__zemin { height: 62%; }
    .acilis__ic {
        grid-template-columns: 1fr;
        grid-template-areas: "soz" "secici";
        gap: var(--b5);
        padding-top: var(--b5);
    }
    .acilis__soz { grid-area: soz; }
    .secici--acilis { grid-area: secici; margin-bottom: 0; align-self: stretch; }
    .acilis__zemin { inset: 0 0 auto 0; height: 58%; }
    .acilis__metin { max-width: none; }
    .acilis + .bilgi-kutu, .acilis + .bolum { margin-top: var(--b5); }
}

/* =====================================================================
   27. ZİRAAT BÜLTENİ — GÖRSEL KİMLİK

   Önceki hal genel geçerdi: krem zemin, yuvarlak köşeli kartlar,
   yumuşak gölgeler, Georgia başlıklar. Bunlar herhangi bir sitenin
   varsayılanı; tohum.net'e ait değil.

   Yeni yön somut bir kaynağa dayanıyor: eski Türk ziraat bülteni ve
   tohum paketi baskısı. İki renk ofset, kaba kâğıt, kalın-ince çift
   çizgi, köşe işaretleri, kauçuk damga.

   Baskıda yuvarlak köşe yoktur, gölge yoktur, mürekkep üst üste
   binince koyulaşır. Aşağıdaki kurallar bunu taklit ediyor.
   ===================================================================== */

/* ---------------------------------------------------------------------
   27.1 SIFIR YUVARLAKLIK
   Yuvarlak köşe, "bu bir yazılım arayüzü" demenin en hızlı yolu.
   Kaldırınca yüzey kâğıda dönüşüyor. Yalnızca damga ve etiket
   gibi gerçekten yuvarlak basılan öğeler istisna.
   ------------------------------------------------------------------- */
:root {
    --r-s: 0;
    --r:   0;
    --r-l: 0;

    /* Mürekkep renkleri — ikisi de baskıda kullanılan tonlar */
    /* Kâğıt sıcaklaşınca eski soluk metin tonu (#64756B) WCAG AA
       eşiğinin altına düştü: 4,33:1. Tonu koruyup koyulaştırıldı,
       yeni oran 5,01:1. */
    --metin-soluk:   #5A6B61;

    --murekkep:      #17362B;   /* koyu yeşil mürekkep */
    --murekkep-2:    #8B5A2B;   /* toprak mürekkebi */
    --kagit-ham:     #F4F1E8;   /* kaba kâğıt */
}

/* ---------------------------------------------------------------------
   27.2 KÂĞIT
   Krem yerine gerçek kâğıt tonu: hafif sarıya çalan, soğuk değil.
   ------------------------------------------------------------------- */
body {
    background-color: var(--kagit-ham);
}

body[data-bolum="kutuphane"] { --krem: #F4F1E8; }
body[data-bolum="takvim"]    { --krem: #F1F0E4; }
body[data-bolum="arac"]      { --krem: #F5F1E6; }
body[data-bolum="rehber"]    { --krem: #F5F2EA; }
body[data-bolum="ana"]       { --krem: #F4F1E8; }

/* Kâğıt gürültüsü. .9 fazla kaçıyordu — metnin üstünde kir gibi
   duruyordu. .6 kâğıt hissini veriyor ama okunurluğa dokunmuyor. */
body::before { opacity: .6; }

/* ---------------------------------------------------------------------
   27.3 MASTHEAD
   Üst bölüm artık bir "gezinme çubuğu" değil, basılı bir yayının
   künyesi. Üstte kalın, altta ince çizgi — bültenin klasik başlığı.
   ------------------------------------------------------------------- */
.tepe {
    background: var(--kagit-ham);
    border-top: 3px solid var(--murekkep);
    border-bottom: 1px solid var(--murekkep);
    box-shadow: none;
    position: relative;
}

/* Kalın çizginin hemen altındaki ince ikinci çizgi */
.tepe::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: var(--murekkep);
    opacity: .45;
}

.marka {
    font-size: 1.55rem;
    letter-spacing: -.03em;
    color: var(--murekkep);
}

.marka svg { color: var(--murekkep-2); }

.gezinme a {
    border-radius: 0;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .5rem .55rem;
}

.gezinme a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--murekkep-2);
    background: none;
}

.gezinme a:hover { background: none; box-shadow: inset 0 -3px 0 var(--cizgi-koyu); }

/* Mevsim şeridi: künye satırı gibi, aralıklı büyük harf */
.mevsim {
    background: var(--murekkep);
    border-bottom: none;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mevsim__ad { color: var(--altin); }
.mevsim a { letter-spacing: .08em; }

/* ---------------------------------------------------------------------
   27.4 ÇİFT ÇİZGİ BAŞLIK
   Bülten bölüm başlığı: üstte kalın, altta ince kural. Tek çizgi
   herhangi bir sitede var; çift çizgi baskıya ait.
   ------------------------------------------------------------------- */
.bolum__bas {
    align-items: flex-end;
    padding-bottom: .45rem;
    border-bottom: 3px solid var(--murekkep);
    position: relative;
    margin-bottom: calc(var(--b5) + 4px);
}

.bolum__bas::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: var(--murekkep);
}

/* Aradaki dolgu çizgisi artık gereksiz */
.bolum__bas::after { display: none; }

.bolum__bas h2 {
    font-size: var(--t-2);
    letter-spacing: -.01em;
}

.bolum__bas h2::before {
    width: 0; height: 0;
    border-radius: 0;
    background: none;
    border-left: 6px solid var(--murekkep-2);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: none;
    align-self: center;
}

.bolum__bas a {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--murekkep-2);
}

/* ---------------------------------------------------------------------
   27.5 KARTLAR = BASILI FİŞ
   Gölge yok, yuvarlaklık yok. Bunun yerine mürekkep çerçeve ve
   köşe işaretleri — matbaada kesim payını gösteren işaretler.
   ------------------------------------------------------------------- */
.bitki, .arac-kart, .ay-kart, .bolge-kart, .yan-kutu,
.secici, .yil, .arac-form, .medya {
    box-shadow: none;
    border-color: var(--murekkep);
    background: var(--kagit);
}

.bitki:hover, .arac-kart:hover, .ay-kart:hover, .bolge-kart:hover {
    box-shadow: 3px 3px 0 var(--murekkep);
    transform: none;
    border-color: var(--murekkep);
}

/* Kart üstünde mürekkep bandı */
.bitki { position: relative; border-width: 1px; }

.bitki::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--murekkep);
    z-index: 2;
}

.arac-kart { border-top: 4px solid var(--murekkep); }

/* Köşe işaretleri — kesim payı damgası */
.secici, .arac-form, .yil {
    position: relative;
    border: 1px solid var(--murekkep);
}

.secici::before, .secici::after,
.arac-form::before, .arac-form::after,
.yil::before, .yil::after {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    border: 2px solid var(--murekkep-2);
    pointer-events: none;
}

.secici::before, .arac-form::before, .yil::before {
    top: 5px; left: 5px;
    border-right: none; border-bottom: none;
}

.secici::after, .arac-form::after, .yil::after {
    bottom: 5px; right: 5px;
    border-left: none; border-top: none;
}

/* ---------------------------------------------------------------------
   27.6 ATA TOHUMU DAMGASI
   Etiket değil, kauçuk damga: çift halka, eğik, mürekkep taşmış gibi.
   ------------------------------------------------------------------- */
.damga {
    border-radius: 0;
    background: none;
    border: 2px solid var(--murekkep-2);
    box-shadow: 0 0 0 1px var(--kagit), 0 0 0 3px var(--murekkep-2);
    color: var(--murekkep-2);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    transform: rotate(-4deg);
    opacity: .92;
}

.bitki__ust .damga { background: var(--kagit); }

/* ---------------------------------------------------------------------
   27.7 VERİ SATIRLARI = BASILI TABLO
   Nokta çizgi yerine düz hairline; her satır kendi kuralına oturur.
   ------------------------------------------------------------------- */
.veri { border-top: 2px solid var(--murekkep); padding-top: .45rem; gap: 0; }

.veri > div {
    padding: .28rem 0;
    border-bottom: 1px solid var(--cizgi);
}

.veri > div:last-child { border-bottom: none; }
.veri > div::after { border-bottom-style: dotted; opacity: .45; }
.veri dt { font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }

/* ---------------------------------------------------------------------
   27.8 AÇILIŞ = BÜLTEN KAPAĞI
   ------------------------------------------------------------------- */
.acilis__zemin {
    background: var(--kagit-ham);
    border-bottom: 3px solid var(--murekkep);
}

/* Tram noktası dokusu — ucuz ofset baskının en tanınır izi */
.acilis__zemin::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: radial-gradient(var(--murekkep) .8px, transparent .9px);
    background-size: 6px 6px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%);
}

.acilis__zemin::after {
    height: 8px;
    bottom: -11px;
    opacity: 1;
    background-image: radial-gradient(circle at 4px 4px, var(--murekkep-2) 1.6px, transparent 1.7px);
    background-size: 18px 8px;
}

.acilis__mevsim {
    color: var(--murekkep-2);
    border-bottom: 1px solid var(--murekkep-2);
    display: inline-block;
    padding-bottom: .2rem;
    letter-spacing: .18em;
}

.acilis__soz h1 {
    font-size: clamp(2.4rem, 1.6rem + 3.2vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--murekkep);
}

.acilis__sayilar { border-top: 2px solid var(--murekkep); }
.acilis__sayi b { color: var(--murekkep); font-size: var(--t-4); }

.acilis__sayi span {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
}

.secici--acilis { box-shadow: 5px 5px 0 var(--murekkep); }
.secici h2 { text-transform: none; }

/* ---------------------------------------------------------------------
   27.9 DÜĞMELER = MÜREKKEP BLOK
   ------------------------------------------------------------------- */
.dugme {
    border-radius: 0;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .82rem;
    font-weight: 700;
}

.dugme--ana {
    background: var(--murekkep);
    border-color: var(--murekkep);
    box-shadow: 3px 3px 0 var(--murekkep-2);
}

.dugme--ana:hover { background: var(--murekkep-2); box-shadow: 3px 3px 0 var(--murekkep); }
.dugme--ana:active { box-shadow: 1px 1px 0 var(--murekkep-2); transform: translate(2px, 2px); }
.dugme--sade { border-color: var(--murekkep); box-shadow: 3px 3px 0 var(--cizgi-koyu); }

/* ---------------------------------------------------------------------
   27.10 GÜNÜN BİLGİSİ = KENAR NOTU
   ------------------------------------------------------------------- */

/* Kutu .kap ile aynı genişlikteydi ama .kap'ın yan dolgusunu
   hesaba katmıyordu; içerik sütunundan 48px taşıyordu. */
.bilgi-kutu { max-width: calc(var(--kap) - var(--b5) * 2); }

.bilgi-kutu {
    border: 1px solid var(--murekkep);
    border-left: 6px solid var(--murekkep-2);
    box-shadow: none;
    background: var(--kagit);
}

.bilgi-kutu::after { display: none; }
.bilgi-kutu__etiket { letter-spacing: .16em; color: var(--murekkep-2); }
.bilgi-kutu__kategori { border-radius: 0; border: 1px solid var(--cizgi-koyu); background: none; }

/* ---------------------------------------------------------------------
   27.11 DİP = KÜNYE
   ------------------------------------------------------------------- */
.dip { background: var(--murekkep); border-top: 4px solid var(--murekkep-2); }
.dip h3 { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }

/* ---------------------------------------------------------------------
   27.12 KÜÇÜK AYARLAR
   ------------------------------------------------------------------- */
.sayfa-bas h1, .detay-bas h1, .arac-bas h1, .yazi-bas h1 {
    color: var(--murekkep);
    letter-spacing: -.025em;
}

.rozet, .etiket-bulut a, .damga { border-radius: 0; }
.etiket-bulut a { border-color: var(--murekkep); }
.serit__ay { border-radius: 0; }
.sayi-girdi input, .sayi-girdi__dugme, .buyuk-secim, .buyuk-girdi { border-radius: 0; }
.arac-adim__no { border-radius: 0; background: var(--murekkep); }
.olcum, .sonuc-oge { border-radius: 0; }
input, select, textarea { border-radius: 0; }

/* ---------------------------------------------------------------------
   27.13 TUTARLILIK: HAP BİÇİMİ KALDIRILDI
   Baskı dilinde hap yoktur. Kalan 999px yuvarlaklıklar da düz kenara
   çevrildi; tek istisna oran çubuğu gibi gerçekten yuvarlak biten
   ölçek göstergeleri.
   ------------------------------------------------------------------- */
.suzgec-dugme,
.bolum__sayi,
.bilgi-kutu__kategori,
.serit-anahtar i,
.nokta,
.yil__adet,
.ay-kart__sayi { border-radius: 0; }

.suzgec-dugme {
    border-color: var(--murekkep);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .76rem;
    font-weight: 700;
}

.suzgec-dugme[aria-pressed="true"] {
    background: var(--murekkep);
    border-color: var(--murekkep);
    box-shadow: 2px 2px 0 var(--murekkep-2);
}

.bolum__sayi {
    border-color: var(--murekkep);
    background: none;
    color: var(--murekkep);
}

/* Sıralama göstergeleri yuvarlak kalır — ölçek çubuğu baskıda da
   yuvarlak biter, hap değil çizgi olarak okunur. */
.oran-gosterge__cubuk, .oran-gosterge__cubuk span,
.sifre-olcer__cubuk { border-radius: 999px; }

/* =====================================================================
   28. ÜYELİK
   ===================================================================== */
.uye-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--b7);
    align-items: start;
}

.uye-dar { max-width: 46rem; }
.uye-alt { text-align: center; margin-top: var(--b5); font-size: .92rem; }

/* Üyelik tipi seçimi — iki basılı kart */
.tip-secim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--b3);
    margin-bottom: var(--b5);
    max-width: var(--okuma);
}

.tip-secim a {
    display: block;
    padding: var(--b4);
    border: 1px solid var(--murekkep);
    background: var(--kagit);
    text-decoration: none;
    color: inherit;
}

.tip-secim a:hover { box-shadow: 3px 3px 0 var(--cizgi-koyu); }

.tip-secim a[aria-current="page"] {
    background: var(--murekkep);
    color: var(--metin-ters);
    box-shadow: 3px 3px 0 var(--murekkep-2);
}

.tip-secim strong { display: block; font-family: var(--serif); font-size: var(--t-1); }
.tip-secim span { font-size: .84rem; opacity: .8; }

.sozlesme-surum {
    font-style: normal;
    font-size: .72rem;
    color: var(--metin-soluk);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: .3rem;
}

.buyuk-onay a { font-weight: 600; }

@media (max-width: 900px) {
    .uye-duzen { grid-template-columns: 1fr; }
}

/* Tek aralıklı yazı — kod, adres, IP, kimlik numarası gibi değerler.
   Bu sınıf yalnızca yonetim.css'te tanımlıydı; ön yüzde kullanılınca
   sessizce uygulanmıyordu. */
.tek {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .92em;
    letter-spacing: -.01em;
}

/* =====================================================================
   29. PAKETLER VE SİPARİŞ
   ===================================================================== */
.paket-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--b4);
}

.paket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--b2);
    padding: var(--b5);
    background: var(--kagit);
    border: 1px solid var(--murekkep);
    border-top: 4px solid var(--murekkep);
}

.paket--one { border-top-color: var(--altin); box-shadow: 4px 4px 0 var(--murekkep); }

.paket__damga {
    position: absolute;
    top: -11px;
    right: var(--b4);
    background: var(--altin);
    color: #4A3208;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border: 1px solid #C98D24;
}

.paket__ad { font-size: var(--t-1); margin: 0; }

.paket__fiyat { display: flex; align-items: baseline; gap: .3rem; margin: .2rem 0; }
.paket__fiyat b { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--murekkep); line-height: 1; }
.paket__fiyat span { font-size: .9rem; color: var(--metin-soluk); }

.paket__kapsam {
    margin: 0;
    font-size: .86rem;
    font-weight: 650;
    color: var(--murekkep-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.paket__aciklama { margin: 0; font-size: .88rem; color: var(--metin-soluk); line-height: 1.5; flex: 1; }

.paket__not {
    font-size: .82rem;
    color: var(--metin-soluk);
    text-align: center;
    padding: .6rem 0;
    border-top: 1px solid var(--cizgi);
}

.paket form { margin-top: auto; }

/* --- Hak durumu şeridi --- */
.hak-durumu {
    background: var(--yesil-sis);
    border: 1px solid var(--yesil-orta);
    border-left: 5px solid var(--yesil);
    padding: var(--b3) var(--b4);
    margin-bottom: var(--b5);
    font-size: .94rem;
}

/* --- Sipariş durumu --- */
.siparis-durum {
    padding: var(--b4) var(--b5);
    border: 1px solid;
    border-left-width: 5px;
    margin-bottom: var(--b6);
    font-size: .95rem;
    line-height: 1.55;
}

.siparis-durum strong { display: block; margin-bottom: .2rem; }
.siparis-durum--uyari    { background: #FDF6E9; border-color: var(--altin); color: #7A5210; }
.siparis-durum--bilgi    { background: var(--yesil-sis); border-color: var(--yesil-orta); color: var(--yesil-koyu); }
.siparis-durum--basarili { background: #EDF6F0; border-color: var(--yesil); color: #1F5637; }
.siparis-durum--hata     { background: #FBEFED; border-color: #A63D2F; color: #7E2A20; }
.siparis-durum--notr     { background: var(--kagit-2); border-color: var(--cizgi-koyu); color: var(--metin-soluk); }

/* --- Sipariş kodu vurgusu --- */
.kod-vurgu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: var(--b4);
    margin: var(--b4) 0;
    background: var(--murekkep);
    color: var(--metin-ters);
    max-width: var(--okuma);
}

.kod-vurgu span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }

.kod-vurgu strong {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.7rem;
    letter-spacing: .08em;
    -webkit-user-select: all;
    user-select: all;
}

.iban-deger { -webkit-user-select: all; user-select: all; font-size: 1.02rem; letter-spacing: .02em; }

@media (max-width: 620px) {
    .paket-izgara { grid-template-columns: 1fr; }
    .kod-vurgu strong { font-size: 1.35rem; }
}

/* Dosya bırakma alanı ve dar künye — bu iki sınıf yalnızca
   yonetim.css'te tanımlıydı; sipariş sayfasında kullanılınca
   sessizce uygulanmıyordu. */
.birak {
    border: 2px dashed var(--murekkep);
    background: var(--kagit-2);
    text-align: center;
    padding: var(--b6) var(--b4);
    transition: border-color var(--gecis), background var(--gecis);
}

.birak[data-uzerinde] { border-color: var(--yesil); background: var(--yesil-sis); }
.birak input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.birak label { display: block; cursor: pointer; margin: 0; }

.birak label strong {
    display: block;
    color: var(--murekkep);
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.birak label span { font-size: .88rem; color: var(--metin-soluk); font-weight: 400; }

.kunye--dar { grid-template-columns: 1fr; gap: 0; }

.kunye--dar > div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--cizgi);
}

.kunye--dar > div:last-child { border-bottom: none; }
.kunye--dar dt { flex: none; margin: 0; }
.kunye--dar > div::after { content: ""; flex: 1; }
.kunye--dar dd { margin: 0; }

/* =====================================================================
   30. İLANLAR
   ===================================================================== */
.ilan-sekme {
    display: flex;
    gap: 0;
    border-bottom: 3px solid var(--murekkep);
    margin-bottom: var(--b5);
}

.ilan-sekme a {
    padding: .6rem 1.1rem;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    border: 1px solid transparent;
    border-bottom: none;
}

.ilan-sekme a:hover { color: var(--murekkep); background: var(--kagit-2); }

.ilan-sekme a[aria-current="page"] {
    background: var(--murekkep);
    color: var(--metin-ters);
}

.liste-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b4);
    margin-bottom: var(--b4);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--cizgi-koyu);
}

.ilan-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: var(--b4);
}

/* --- İlan kartı --- */
.ilan-kart {
    border: 1px solid var(--murekkep);
    background: var(--kagit);
    transition: box-shadow var(--gecis);
}

.ilan-kart:hover { box-shadow: 3px 3px 0 var(--murekkep); }
.ilan-kart__bag { display: block; text-decoration: none; color: inherit; }

.ilan-kart__gorsel {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--murekkep);
    background: var(--yesil-sis);
}

.ilan-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ilan-kart__yer {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    color: var(--murekkep);
    background-image: radial-gradient(var(--murekkep) 1px, transparent 1.1px);
    background-size: 7px 7px;
}

.ilan-kart__yer svg { width: 38px; height: 38px; opacity: .5; }

.ilan-kart__tur {
    position: absolute;
    top: 0; left: 0;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .2rem .5rem;
}

.ilan-kart__tur--satilik  { background: var(--murekkep); color: var(--metin-ters); }
.ilan-kart__tur--araniyor { background: var(--altin); color: #4A3208; }

.ilan-kart__govde { display: block; padding: var(--b3) var(--b4) var(--b4); }

.ilan-kart__baslik {
    display: block;
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--murekkep);
    margin-bottom: .35rem;
    /* İki satırdan uzun başlıkları kes — kart yükseklikleri eşitlensin */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ilan-kart__satir { display: block; margin-bottom: .2rem; }
.ilan-kart__fiyat { font-size: 1.05rem; font-weight: 700; color: var(--murekkep); }
.ilan-kart__fiyat--yok { font-size: .88rem; font-weight: 600; color: var(--metin-soluk); }
.ilan-kart__birim { font-size: .8rem; color: var(--metin-soluk); }

.ilan-kart__alt {
    display: block;
    font-size: .8rem;
    color: var(--metin-soluk);
    margin-bottom: .4rem;
}

.ilan-kart__isaretler { display: flex; gap: .35rem; flex-wrap: wrap; }
.ilan-kart__isaretler .damga { transform: none; font-size: .58rem; }

/* --- İlan detayı --- */
.ilan-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: var(--b7);
    align-items: start;
}

.ilan-bas { padding-block: var(--b4) var(--b5); }
.ilan-bas .ilan-kart__tur { position: static; display: inline-block; margin-bottom: .6rem; }
.ilan-bas h1 { font-size: var(--t-3); margin-bottom: var(--b3); }
.ilan-bas__kunye { font-size: .88rem; color: var(--metin-soluk); margin: 0; }

.ilan-gorseller {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--b3);
    margin-bottom: var(--b5);
}

.ilan-gorseller img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--murekkep);
    display: block;
}

.ilan-kunye { margin-bottom: var(--b5); }
.ilan-aciklama { max-width: var(--okuma); }
.ilan-satici { font-weight: 650; margin: 0 0 .75rem; color: var(--murekkep); }

.yan-kutu--uyari {
    background: #FDF6E9;
    border-color: var(--altin);
    border-left: 5px solid var(--altin);
}

.yan-kutu--uyari p { font-size: .86rem; line-height: 1.55; margin: 0; color: #6B4A12; }

.sikayet-kutu {
    border: 1px solid var(--cizgi-koyu);
    background: var(--kagit);
    padding: 0;
    font-size: .88rem;
}

.sikayet-kutu summary {
    padding: .6rem var(--b4);
    cursor: pointer;
    font-weight: 600;
    color: var(--metin-soluk);
}

.sikayet-kutu[open] summary { border-bottom: 1px solid var(--cizgi); }
.sikayet-kutu form { padding: var(--b4); }
.sikayet-kutu label { display: block; font-size: .82rem; font-weight: 650; margin: .5rem 0 .25rem; }
.sikayet-kutu select, .sikayet-kutu textarea { width: 100%; }

.ilan-gorsel-oge img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--murekkep);
    display: block;
}

/* --- Bitki sayfasındaki satıcı bölümü --- */
.satici-cagri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b5);
    flex-wrap: wrap;
    padding: var(--b5);
    border: 2px dashed var(--murekkep-2);
    background: var(--kagit);
}

.satici-cagri strong { display: block; font-family: var(--serif); font-size: var(--t-1); color: var(--murekkep); }
.satici-cagri p { margin: .35rem 0 0; font-size: .92rem; color: var(--metin-soluk); max-width: 52ch; }
.satici-cagri--alt { margin-top: var(--b4); padding: var(--b4); border-width: 1px; }

.satici-liste { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--murekkep); }

.satici-liste li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .2rem var(--b4);
    padding: var(--b3) 0;
    border-bottom: 1px solid var(--cizgi);
}

.satici-liste__ad { grid-column: 1; font-weight: 650; text-decoration: none; }
.satici-liste__ad:hover { text-decoration: underline; }
.satici-liste__bilgi { grid-column: 1; font-size: .85rem; color: var(--metin-soluk); }

.satici-liste__fiyat {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-weight: 700;
    color: var(--murekkep);
    white-space: nowrap;
}

.arayan-serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b4);
    flex-wrap: wrap;
    margin-top: var(--b4);
    padding: var(--b3) var(--b4);
    background: var(--yesil-sis);
    border-left: 5px solid var(--yesil);
    font-size: .9rem;
}

@media (max-width: 900px) {
    .ilan-duzen { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .ilan-izgara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--b3); }
    .ilan-sekme { overflow-x: auto; }
    .satici-cagri { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   31. ORTAK YARDIMCI SINIFLAR

   Bu sınıflar hem panelde hem ön yüzde geçiyor. Şimdiye kadar yalnızca
   yonetim.css'te tanımlıydılar ve ön yüzde kullanılınca sessizce
   uygulanmıyorlardı — bu hata beş kez tekrarlandı.

   Denetim aracı artık yakalıyor; buraya taşıyarak kaynağını da
   kurutuyoruz.
   ===================================================================== */
.tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }

.tablo th, .tablo td {
    padding: .6rem .7rem;
    text-align: left;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: top;
}

.tablo thead th {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    border-bottom: 2px solid var(--murekkep);
    white-space: nowrap;
}

.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover { background: var(--kagit-2); }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tekboslukyok { white-space: nowrap; font-variant-numeric: tabular-nums; }

.medya__bilgi { font-size: .78rem; color: var(--metin-soluk); margin-top: .15rem; }

.posta-hata {
    margin-top: .3rem;
    font-size: .8rem;
    color: #7E2A20;
    background: #FBEFED;
    border-left: 3px solid #A63D2F;
    padding: .3rem .5rem;
}

.dugme--kucuk { height: 32px; padding-inline: .7rem; font-size: .74rem; }

.secim-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--b3);
}

.rozet {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border: 1px solid var(--cizgi-koyu);
    color: var(--metin-soluk);
}

.rozet--bilgi  { border-color: var(--yesil); color: var(--yesil); background: var(--yesil-sis); }
.rozet--uyari  { border-color: var(--altin); color: #7A5210; background: #FDF6E9; }
.rozet--kritik { border-color: #A63D2F; color: #7E2A20; background: #FBEFED; }
.rozet--notr   { border-color: var(--cizgi-koyu); color: var(--metin-soluk); }

.ilan-yan { display: flex; flex-direction: column; gap: var(--b4); }

/* Tehlike düğmesi — silme/kapatma gibi geri alınamaz işlemler.
   Bu da yalnızca yonetim.css'te tanımlıydı. */
.dugme--tehlike {
    background: #A63D2F;
    border-color: #A63D2F;
    color: var(--metin-ters);
    box-shadow: 3px 3px 0 #7E2A20;
}

.dugme--tehlike:hover { background: #7E2A20; border-color: #7E2A20; }
.dugme--tehlike:active { box-shadow: 1px 1px 0 #7E2A20; transform: translate(2px, 2px); }

/* =====================================================================
   32. TOHUM SATIŞ SAYFALARI
   ===================================================================== */
.satis-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: var(--b7);
    align-items: start;
}

.satis-yan { display: flex; flex-direction: column; gap: var(--b4); }

.satis-bas { padding-block: var(--b4) var(--b6); }
.satis-bas .damga { display: inline-block; margin-bottom: .6rem; }
.satis-bas h1 { font-size: var(--t-3); margin-bottom: .2rem; }

.satis-bas__latince {
    font-family: var(--serif);
    font-style: italic;
    color: var(--metin-soluk);
    margin: 0 0 var(--b4);
}

.satis-bas__ozet {
    font-family: var(--serif);
    font-size: var(--t-1);
    line-height: 1.6;
    color: var(--metin);
    margin: 0;
    max-width: 52ch;
}

.satis-bas__ozet strong { color: var(--murekkep); }

/* Satın alma rehberi — bitkiye özgü, sayfaların birbirinin kopyası
   olmasını engelleyen içerik */
.rehber-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--b4);
}

.rehber-kutu {
    padding: var(--b4);
    background: var(--kagit);
    border: 1px solid var(--murekkep);
    border-left: 4px solid var(--murekkep-2);
}

.rehber-kutu h3 {
    font-size: 1rem;
    margin: 0 0 .4rem;
    color: var(--murekkep);
}

.rehber-kutu p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--metin); }

.satis-tablo td:first-child .damga { margin-left: .4rem; font-size: .56rem; }

@media (max-width: 900px) {
    .satis-duzen { grid-template-columns: 1fr; }
}