/* ==========================================================================
   Büyükbaş Projeksiyon Web Uygulaması — Tasarım Sistemi
   ==========================================================================
   Tek marka rengi (yeşil) + nötr gri ölçeği + durum renkleri (başarı/hata/
   uyarı). Tüm renk/boşluk/köşe/gölge değerleri :root token'ları üzerinden
   kullanılır. Motor/form-işleme mantığına dokunulmamıştır — bu dosya
   yalnızca görünümü tanımlar.

   İçindekiler:
   1. Font (opsiyonel Google Fonts — CDN engellenirse sistem fontuna düşer)
   2. Token'lar (:root)
   3. Sıfırlama ve temel tipografi
   4. Sayfa iskeleti (header / main / footer)
   5. Butonlar
   6. Kartlar / banner'lar
   7. Sekme navigasyonu (proje formu) + :target vurgusu
   8. Formlar (etiket, girdi, form-grid)
   9. Tablolar (düzenlenebilir + sonuç) ve mobil kaydırma sarıcısı
   10. KPI kartları
   11. Proje paneli (kart ızgarası)
   12. Grafik kutuları
   13. Giriş / Kayıt (auth) ekranı
   14. Rozetler
   15. Duyarlı (responsive) ayarlamalar
   16. Erişilebilirlik: azaltılmış hareket
   ========================================================================== */

/* 1. Font -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

/* 2. Token'lar -----------------------------------------------------------
   2026-09-28: kullanıcının onayladığı yeni tasarım şemasına (hesapla-anasayfa-
   masaustu-dolu.md / hesapla-anasayfa-mobil.md) göre marka rengi/font sitenin
   TAMAMINDA değiştirildi. Değişken ADLARI korunuyor (yüzlerce kullanım yeri
   var), yalnızca DEĞERLERİ yeni şemayla eşleşecek şekilde güncellendi. */
:root {
    /* Sadece açık tema destekleniyor — bazı tarayıcıların otomatik koyu tema
       (force-dark) ile rengi bozmasını (kullanıcıda pembe leke) önler. */
    color-scheme: light;

    /* Marka (yeşil) — tek vurgu rengi, tonları (şema: --brand / --brand-soft) */
    --renk-vurgu: #1B4D35;
    --renk-vurgu-koyu: #123626;
    --renk-vurgu-zemin: #DDEBE2;
    --renk-vurgu-kenar: #C3D6CB;

    /* Nötr gri ölçeği (şema: --bg / --surface / --surface-2 / --line / --ink / --muted) */
    --renk-zemin: #EDF0EC;
    --renk-kart: #FFFFFF;
    --renk-kart-alt: #F6F8F5;
    --renk-metin: #16201A;
    --renk-metin-soluk: #5A6660;
    --renk-metin-ikincil: #5A6660;
    --renk-kenar: #D9E0DA;
    --renk-kenar-guclu: #B7C2BB;
    --renk-kenar-soluk: #EDF0EC;

    /* Durum renkleri */
    --renk-hata: #b3261e;
    --renk-hata-zemin: #fdecea;
    --renk-hata-kenar: #f2b8b5;
    --renk-uyari-metin: #7a5210;
    --renk-uyari-zemin: #fdf3e0;
    --renk-uyari-kenar: #eecf8f;
    --renk-basari-zemin: #DDEBE2;

    /* Tipografi */
    --font-sans: "Onest", "Segoe UI", Arial, sans-serif;

    /* Boşluk ölçeği (4px tabanlı) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* Köşe yarıçapı */
    --radius-sm: 7px;
    --radius: 12px;
    --radius-lg: 18px;

    /* Gölge */
    --golge-sm: 0 1px 2px rgba(23, 42, 31, 0.07);
    --golge: 0 2px 10px rgba(23, 42, 31, 0.08);
    --golge-lg: 0 12px 28px rgba(23, 42, 31, 0.14);

    /* Geçiş süresi */
    --gecis: 160ms ease;

    /* Mobil alt gezinme çubuğunun yüksekliği — form-aksiyonlari gibi sayfa altına
       yapışkan diğer öğelerin bununla çakışmaması için referans alınır. */
    --alt-sekme-yukseklik: 72px;
}

/* 3. Sıfırlama ve temel tipografi ---------------------------------------- */
* { box-sizing: border-box; }

/* Sekme çubuğundaki (#ozet, #karlilik…) çapa linkleri öncesinde anında zıplıyordu —
   kullanıcı tıklayınca aşağı doğru akıcı bir kayma istedi. prefers-reduced-motion'da
   aşağıda "auto"ya döndürülüyor (bkz. 16. bölüm). */
html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--renk-zemin);
    color: var(--renk-metin);
    font-family: var(--font-sans);
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum' 1;
}
/* body tek çocuğu (.app-kabuk ya da giriş/kayıt gibi sayfalarda doğrudan main) dikey
   olarak tam yüksekliği kaplasın diye flex kutusu; main{flex:1 0 auto} .govde içindeki
   (sidebar düzeninde) ya da body içindeki (auth sayfalarında) kalan alanı dolduruyor. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

img, svg, canvas { max-width: 100%; }

a {
    color: var(--renk-vurgu-koyu);
    text-decoration: none;
    transition: color var(--gecis);
}
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible {
    outline: 2px solid var(--renk-vurgu);
    outline-offset: 2px;
    border-radius: 4px;
}

h1 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
h2 {
    font-size: 19px;
    font-weight: 700;
    margin: var(--sp-8) 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--renk-kenar);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
h2::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--renk-vurgu);
    flex: 0 0 auto;
}
h3 {
    font-size: 15px;
    font-weight: 700;
    margin: var(--sp-5) 0 var(--sp-2);
    color: var(--renk-vurgu-koyu);
}
p { margin: 0 0 var(--sp-3); }
p.aciklama { color: var(--renk-metin-soluk); margin-top: 0; font-size: 14px; }

/* Konum bildirimi (breadcrumb) — panel/proje formu/sonuç sayfalarında tutarlı "neredeyim"
   hissi verir (bkz. konsey UX denetimi, bulgu #8). */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--renk-metin-soluk);
    margin: 0 0 var(--sp-4);
}
.breadcrumb a { color: var(--renk-metin-soluk); text-decoration: none; }
.breadcrumb a:hover { color: var(--renk-vurgu-koyu); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--renk-metin); font-weight: 600; }
.breadcrumb-ayrac { color: var(--renk-metin-ikincil); }

/* 4. Sayfa iskeleti — sol sabit menü (masaüstü) + üst çubuk/alt gezinme (mobil) ------
   2026-09-28: kullanıcının onayladığı yeni tasarım şemasına göre kuruldu (bkz.
   hesapla-anasayfa-masaustu-dolu.md / hesapla-anasayfa-mobil.md). Eski hamburger +
   kayan çekmece menü tamamen kaldırıldı — gezinme artık her zaman görünür (sidebar/
   alt-nav) olduğu için çekmeceye gerek kalmadı. */
.gorunmez-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app-kabuk { display: flex; align-items: stretch; min-height: 100vh; }

.yan-menu {
    width: 248px;
    flex-shrink: 0;
    background: var(--renk-vurgu);
    color: #E6EFE9;
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: var(--sp-6) var(--sp-4);
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}
.yan-menu-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--sp-2);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.yan-menu-logo:hover { text-decoration: none; opacity: 0.92; }
/* Marka simgesi düz bir çizgi ikonu olarak koyu zeminde soluk kalıyordu — beyaz bir
   rozet/kutu içine alınıp profesyonel SaaS ürünlerindeki "logomark" desenine getirildi
   (bkz. kullanıcı geri bildirimi: "logo daha profesyonel olsun"). */
.marka-rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    flex-shrink: 0;
}
.marka-ikon { width: 20px; height: 20px; color: var(--renk-vurgu); }
.btn-ikon { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; }

.yan-menu-nav { display: flex; flex-direction: column; gap: 4px; }
.yan-menu-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 var(--sp-3);
    border-radius: 10px;
    color: #C9DBD0;
    font-size: 15px;
    font-weight: 500;
    transition: background var(--gecis), color var(--gecis);
}
.yan-menu-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.yan-menu-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.yan-menu-nav a.aktif { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }

.yan-menu-kullanici {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--sp-3);
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
    color: inherit;
    transition: background var(--gecis);
}
.yan-menu-kullanici:hover { background: rgba(0, 0, 0, .28); text-decoration: none; }
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #CFE3D6;
    color: var(--renk-vurgu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.yan-menu-kullanici-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yan-menu-kullanici-bilgi strong { font-size: 14px; font-weight: 600; color: #fff; }
.yan-menu-kullanici-bilgi span { font-size: 12px; color: #B7CCBF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

.govde { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.masaustu-ust-cubuk {
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-8);
    border-bottom: 1px solid var(--renk-kenar);
    background: var(--renk-kart-alt);
    gap: var(--sp-4);
}
.arama-kutu {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 420px;
    max-width: 42vw;
    height: 44px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: 10px;
    background: #fff;
    color: var(--renk-metin-soluk);
    box-sizing: border-box;
}
.arama-kutu svg { width: 18px; height: 18px; flex-shrink: 0; }
.arama-kutu input {
    border: 0;
    outline: none;
    flex-grow: 1;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--renk-metin);
    background: transparent;
    padding: 0;
    min-height: 0;
}

.mobil-ust-cubuk { display: none; }
.mobil-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 18px; font-weight: 700; }
.mobil-logo:hover { text-decoration: none; }
.mobil-logo .marka-rozet { width: 32px; height: 32px; border-radius: 9px; }
.mobil-logo .marka-ikon { width: 18px; height: 18px; }
.mobil-ust-aksiyon { display: flex; gap: 4px; }
.mobil-ikon-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.mobil-ikon-btn:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.mobil-ikon-btn svg { width: 20px; height: 20px; }
.avatar-kucuk { width: 32px; height: 32px; font-size: 12px; }

main {
    flex-grow: 1;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-8) 80px;
    box-sizing: border-box;
}
main.main-tam-genislik { max-width: none; padding: var(--sp-6) var(--sp-5) 80px; }

/* Alt gezinme çubuğu (mobil) — masaüstünde sol menü zaten yeterli olduğundan gizli,
   yalnızca mobilde (bkz. 15. Duyarlı ayarlamalar) görünür. */
.alt-nav { display: none; }

/* 5. Butonlar ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--renk-kenar-guclu);
    background: #fff;
    color: var(--renk-metin);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
    min-height: 42px;
}
.btn:hover { background: var(--renk-kart-alt); border-color: var(--renk-metin-ikincil); transform: translateY(-1px); box-shadow: var(--golge-sm); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn:disabled:hover {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-birincil { background: var(--renk-vurgu); border-color: var(--renk-vurgu); color: #fff; }
.btn-birincil:hover { background: var(--renk-vurgu-koyu); border-color: var(--renk-vurgu-koyu); }

/* PDF dışa aktarma butonu — kullanıcı: "pdf rengi kırmızıdır ona göre ayarla", yaygın
   PDF simgesi rengiyle eşleşsin diye marka yeşili değil kırmızı (mevcut --renk-hata
   tokenı) kullanılıyor. */
.btn-pdf { background: var(--renk-hata); border-color: var(--renk-hata); color: #fff; }
.btn-pdf:hover { background: #8c1d17; border-color: #8c1d17; }

.btn-tehlike { color: var(--renk-hata); border-color: var(--renk-hata-kenar); background: #fff; }
.btn-tehlike:hover { background: var(--renk-hata-zemin); border-color: var(--renk-hata); }

.btn-sil {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--renk-hata);
    border: 1px solid var(--renk-hata-kenar);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
    min-height: 34px;
    white-space: nowrap;
}
.btn-sil:hover { background: var(--renk-hata); color: #fff; border-color: var(--renk-hata); }

.btn-ekle { margin: var(--sp-1) 0 var(--sp-5); font-size: 13px; }

/* Form/panel/sonuç sayfalarındaki aksiyon çubukları. Önceden iki .aksiyon-grubu (gezinme:
   Düzenle/Panele Dön, dışa aktarma: Excel/Word/PDF) sade birer düz div'di — kendi CSS'i
   olmadığından dar ekranlarda öngörülemez şekilde kırılıyor, aralarında görsel bir ayrım da
   olmuyordu (kullanıcı: "burayı düzenle insanın kafası karışıyor"). Artık tek bir kart
   içinde, iki grup arasında net bir ayırıcıyla gösteriliyor. */
.aksiyon-cubugu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--renk-kart-alt);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
}
.aksiyon-grubu { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.form-aksiyonlari {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--golge-lg);
    margin-top: var(--sp-2);
}

/* 6. Kartlar / banner'lar ------------------------------------------------- */
.kart {
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
    box-shadow: var(--golge-sm);
}

/* 6b. Hesabım sayfası ---------------------------------------------------- */
.hesabim-kart { max-width: 480px; }
.hesabim-satir {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--renk-kenar);
}
.hesabim-satir:last-child { border-bottom: none; padding-bottom: 0; }
.hesabim-etiket { color: var(--renk-metin-soluk); font-weight: 600; }

.disa-aktarim-secim { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.disa-aktarim-secenek {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
}
.disa-aktarim-secenek input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--renk-vurgu); cursor: pointer; }

.banner {
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    font-size: 14px;
    border: 1px solid transparent;
    border-left-width: 4px;
    box-shadow: var(--golge-sm);
    line-height: 1.5;
}
.banner-hata { background: var(--renk-hata-zemin); color: var(--renk-hata); border-color: var(--renk-hata-kenar); border-left-color: var(--renk-hata); }
.banner-basari { background: var(--renk-basari-zemin); color: var(--renk-vurgu-koyu); border-color: var(--renk-vurgu-kenar); border-left-color: var(--renk-vurgu); }
.banner-bilgi { background: var(--renk-uyari-zemin); color: var(--renk-uyari-metin); border-color: var(--renk-uyari-kenar); border-left-color: #c9932f; }
/* <details>/<summary> tabanlı daraltılabilir banner (bkz. kullanıcı isteği: uzun uyarı
   metni önce kısa özet gösterip tıklanınca açılsın). Tarayıcının varsayılan üçgen işareti
   kaldırılıp kendi ok simgemiz eklendi, açıkken 90° dönüyor. */
details.banner summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
details.banner summary::-webkit-details-marker { display: none; }
details.banner summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform var(--gecis);
}
details.banner[open] summary::before { transform: rotate(90deg); }
details.banner p { margin: var(--sp-2) 0 0; font-weight: 400; }

/* 7. Sekme navigasyonu (proje formu) -------------------------------------- */
.sekme-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-5);
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    font-size: 14px;
    box-shadow: var(--golge);
    counter-reset: sekme-adim;
}
.sekme-nav a {
    counter-increment: sekme-adim;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    transition: background var(--gecis), color var(--gecis);
}
.sekme-nav a::before {
    content: counter(sekme-adim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--renk-zemin);
    color: var(--renk-metin-soluk);
    font-size: 11.5px;
    font-weight: 700;
    transition: background var(--gecis), color var(--gecis);
}
.sekme-nav a:hover {
    background: var(--renk-vurgu-zemin);
    color: var(--renk-vurgu-koyu);
    text-decoration: none;
}
.sekme-nav a:hover::before { background: var(--renk-vurgu); color: #fff; }
.sekme-nav a.aktif {
    background: var(--renk-vurgu);
    color: #fff;
    text-decoration: none;
}
.sekme-nav a.aktif::before { background: #fff; color: var(--renk-vurgu-koyu); }

/* Sonuç sayfası mini-navigasyonu — sekme-nav'a görsel olarak benzer ama basit #anchor
   linkleri (içerik gizlenmiyor, wizard değil, bkz. konsey UX denetimi bulgu #14). */
.mini-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-5);
    font-size: 13.5px;
    box-shadow: var(--golge);
}
.mini-nav a {
    font-weight: 600;
    color: var(--renk-metin-soluk);
    padding: 6px 12px;
    border-radius: 999px;
    transition: background var(--gecis), color var(--gecis);
}
.mini-nav a:hover { background: var(--renk-vurgu-zemin); color: var(--renk-vurgu-koyu); text-decoration: none; }

/* mini-nav/sekme-nav sticky (top:0) olduğu için #anchor ile zıplanan başlıklar bu çubuğun
   altında kalmasın diye üstte boşluk bırakılır. */
h2[id] { scroll-margin-top: 76px; }

.sekme-adim-cubugu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.sekme-adim-gosterge { font-size: 13.5px; color: var(--renk-metin-soluk); font-weight: 600; }
#sekmeGeri, #sekmeIleri { min-width: 92px; }
#sekmeGeri:disabled, #sekmeIleri:disabled { opacity: .45; cursor: not-allowed; }

/* Bölüme atlanınca (adres çubuğu #genel vb.) o kartı görsel olarak vurgula. */
section.kart:target {
    box-shadow: 0 0 0 3px var(--renk-vurgu-kenar), var(--golge);
    transition: box-shadow 300ms ease;
}

/* Bölüm başlıklarını da adım numarasıyla eşleştir (JS gerekmez). */
form { counter-reset: bolum-adim; }
section.kart > h2 { counter-increment: bolum-adim; }
section.kart > h2::before {
    content: counter(bolum-adim);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--renk-vurgu);
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 8. Formlar --------------------------------------------------------------- */
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    margin-bottom: 5px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--renk-metin);
    font-family: var(--font-sans);
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--gecis), box-shadow var(--gecis);
    min-height: 42px;
}
input::placeholder { color: var(--renk-metin-ikincil); }
input:hover { border-color: var(--renk-metin); }
input:focus {
    outline: none;
    border-color: var(--renk-vurgu);
    box-shadow: 0 0 0 3px var(--renk-vurgu-zemin);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4) var(--sp-5);
}
.form-row { margin-bottom: var(--sp-3); }
.form-row .yardim { font-size: 12.5px; color: var(--renk-metin-ikincil); margin-top: 4px; line-height: 1.4; }

/* 8b. İl/İlçe aranabilir seçim kutusu ------------------------------------------ */
.secim-kutu { position: relative; }
.secim-tetik {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--renk-metin);
    font-family: var(--font-sans);
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    min-height: 42px;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.secim-tetik:hover { border-color: var(--renk-metin); }
.secim-tetik[aria-expanded="true"] {
    outline: none;
    border-color: var(--renk-vurgu);
    box-shadow: 0 0 0 3px var(--renk-vurgu-zemin);
}
.secim-tetik:disabled { cursor: not-allowed; background: var(--renk-kart-alt); color: var(--renk-metin-ikincil); }
.secim-goster { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-goster.secim-placeholder { color: var(--renk-metin-ikincil); }
.secim-ok { flex-shrink: 0; font-size: 11px; color: var(--renk-metin-ikincil); }

.secim-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--radius-sm);
    box-shadow: var(--golge-lg);
    padding: var(--sp-2);
}
.secim-arama {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: var(--sp-2);
    min-height: 38px;
}
.secim-arama:focus { outline: none; border-color: var(--renk-vurgu); box-shadow: 0 0 0 3px var(--renk-vurgu-zemin); }
.secim-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}
.secim-secenek {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
}
.secim-secenek:hover { background: var(--renk-vurgu-zemin); color: var(--renk-vurgu-koyu); }
.secim-secenek.secili { background: var(--renk-vurgu); color: #fff; font-weight: 600; }
.secim-bos { padding: 8px 10px; font-size: 13.5px; color: var(--renk-metin-ikincil); }

/* 9. Tablolar --------------------------------------------------------------- */
.tablo-sarici {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    margin: var(--sp-2) 0 var(--sp-2);
    border: 1px solid var(--renk-kenar);
    /* Mobilde dar tablolar yatay kaydırma gerektiriyor ama mobil tarayıcılarda kaydırma
       çubuğu varsayılan olarak gizli olduğundan bunu fark etmek zordu (bkz. konsey UX
       denetimi, bulgu #4). "local" arka planlar içerikle birlikte kayar, "scroll" olanlar
       kenarda sabit kalır — sağda/solda daha fazla içerik varken ince bir gölge belirir,
       kayan uca ulaşınca kaybolur (klasik CSS "scroll shadow" tekniği, JS gerekmez). */
    background:
        linear-gradient(to right, var(--renk-kart) 30%, rgba(255, 255, 255, 0)) 0 0,
        linear-gradient(to left, var(--renk-kart) 30%, rgba(255, 255, 255, 0)) 100% 0,
        linear-gradient(to right, rgba(30, 41, 36, .12), rgba(30, 41, 36, 0)) 0 0,
        linear-gradient(to left, rgba(30, 41, 36, .12), rgba(30, 41, 36, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--renk-kart);
    background-size: 28px 100%, 28px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}
.tablo-sarici::-webkit-scrollbar { height: 8px; }
.tablo-sarici::-webkit-scrollbar-thumb { background: var(--renk-kenar-guclu); border-radius: 4px; }
.tablo-sarici table { margin: 0; border: none; border-radius: 0; }

table.veri-tablo {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}
table.veri-tablo th, table.veri-tablo td {
    border-bottom: 1px solid var(--renk-kenar);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: middle;
}
table.veri-tablo th {
    background: var(--renk-vurgu-zemin);
    color: var(--renk-vurgu-koyu);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}
table.veri-tablo td input { min-width: 100px; }
table.veri-tablo td:last-child, table.veri-tablo th:last-child { width: 1%; }
table.veri-tablo tbody tr:hover { background: var(--renk-kart-alt); }
table.veri-tablo tbody tr:last-child td { border-bottom: none; }

/* Sayı girdileri için +/- adım butonları (bkz. public/sayi-adim.js, kullanıcı isteği:
   "burada + - butonları eklenebilir"). Tarayıcının kendi yukarı/aşağı oklarını gizliyoruz
   — zaten kendi +/- butonlarımız var, ikisi bir arada kafa karıştırırdı. */
.sayi-adim-sarici { display: flex; align-items: stretch; width: 100%; min-width: 100px; }
.sayi-adim-sarici input[type=number] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    -moz-appearance: textfield;
}
.sayi-adim-sarici input[type=number]::-webkit-outer-spin-button,
.sayi-adim-sarici input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sayi-adim-btn {
    flex: 0 0 auto;
    width: 32px;
    min-height: 42px;
    border: 1px solid var(--renk-kenar-guclu);
    background: var(--renk-kart-alt);
    color: var(--renk-metin);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
}
.sayi-adim-btn:hover { background: var(--renk-vurgu-zemin); color: var(--renk-vurgu-koyu); }
.sayi-adim-btn:active { background: var(--renk-vurgu-kenar); }
.sayi-adim-eksi { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.sayi-adim-arti { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

table.sonuc-tablo {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14px;
}
table.sonuc-tablo th, table.sonuc-tablo td {
    border-bottom: 1px solid var(--renk-kenar);
    padding: 10px 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.sonuc-tablo th:first-child, table.sonuc-tablo td:first-child { text-align: left; font-variant-numeric: normal; }
table.sonuc-tablo th {
    background: var(--renk-vurgu-zemin);
    color: var(--renk-vurgu-koyu);
    font-weight: 700;
    font-size: 13px;
    position: sticky;
    top: 0;
}
table.sonuc-tablo tbody tr:nth-child(even) { background: var(--renk-kart-alt); }
table.sonuc-tablo tbody tr:hover { background: var(--renk-vurgu-zemin); }
table.sonuc-tablo tr.uyarili { background: var(--renk-uyari-zemin) !important; }
table.sonuc-tablo tr.uyarili td:first-child { font-weight: 600; }
table.sonuc-tablo tr.uyarili td:first-child::after {
    /* ⚠ emoji platforma göre tutarsız görünüyordu; aynı Ikonlar.php "uyari" ikonuyla
       birebir aynı SVG, CSS content:url() ile gömüldü (bkz. konsey denetimi). */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237a5210' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    margin-left: 4px;
    vertical-align: -2px;
}

/* Sayısal girdi hücrelerini sağa hizala (destekleyen tarayıcılarda). */
table.veri-tablo td:has(input[type=number]) { text-align: right; }

/* Yıllık Gelir-Gider Tablosu — Net Sonuç hücresi: değer + gelir/gider oranını gösteren
   küçük çubuk. Ayrı bir "mobil" ya da "masaüstü" versiyonu YOK — aynı işaretleme masaüstü
   tablo hücresinde de, mobilde data-label ile karta dönüşmüş satırda da (bkz. table.sonuc-
   tablo mobil dönüşümü) kendiliğinden doğru görünüyor (kullanıcı isteği: mobil/masaüstü
   aynı mantıkla, her ekrana uygun boyutta). */
.net-sonuc-hucre { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.net-sonuc-deger { font-weight: 700; }
.net-sonuc-deger.net-sonuc-pozitif { color: var(--renk-vurgu-koyu); }
.net-sonuc-deger.net-sonuc-negatif { color: var(--renk-hata); }
.gelir-gider-bar {
    display: flex;
    width: 100%;
    max-width: 120px;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--renk-kenar);
}
.gelir-gider-bar .bar-gelir { background: var(--renk-vurgu); height: 100%; }
.gelir-gider-bar .bar-gider { background: var(--renk-hata); height: 100%; }

/* 10 yıllık özet tabloları — ilk birkaç yıl dışındaki satırlar varsayılan gizli, bir
   düğmeyle açılıyor (bkz. kullanıcı geri bildirimi: "10 yıl en aşağı kadar iniyor
   bitmiyor, isteğe bağlı görünmeli"). display değeri masaüstü/mobil için ayrı ayrı
   tekrarlanıyor ki mobildeki table.sonuc-tablo tr{display:block} kuralıyla çakışmasın
   (bkz. .menu-panel[hidden] özgüllük dersi — konsey denetimi). */
.yil-gizli { display: none; }
.tablo-sarici.tum-yillar-acik .yil-gizli { display: table-row; }
.yillar-genislet-btn { margin: calc(-1 * var(--sp-3)) 0 var(--sp-6); font-size: 13px; }

/* 10. KPI kartları ---------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.kpi-kart {
    background: var(--renk-vurgu-zemin);
    border: 1px solid var(--renk-vurgu-kenar);
    border-top: 3px solid var(--renk-vurgu);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.kpi-kart:hover { transform: translateY(-2px); box-shadow: var(--golge); }
.kpi-kart .baslik {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--renk-vurgu-koyu);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.01em;
}
.kpi-kart .deger {
    font-size: 27px;
    font-weight: 700;
    color: var(--renk-metin);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* En önemli iki metriği (Net Kâr, Kârlılık Oranı) öne çıkaran vurgulu kart. */
.kpi-kart--vurgu {
    background: var(--renk-vurgu-koyu);
    border-color: var(--renk-vurgu-koyu);
    border-top-color: #0f4229;
}
.kpi-kart--vurgu .baslik { color: rgba(255, 255, 255, 0.82); }
.kpi-kart--vurgu .deger { color: #fff; }

/* 11. Proje paneli (kart ızgarası) ------------------------------------------- */
.proje-sayisi { color: var(--renk-metin-soluk); font-size: 14px; margin-top: -6px; }

.proje-listesi {
    display: grid;
    /* .uygulama-grid ile aynı gerekçe: az proje varken auto-fill'in bıraktığı boş sütun
       izlerini önlemek için auto-fit + üst sınırlı (360px) sütun genişliği kullanılıyor.
       justify-content:center: kart sayısı sütunları doldurmadığında (ör. tek proje)
       dolu sütunlar konteynerin SOLUNA yaslanıp kalan boşluk sağda kalıyordu — kullanıcı
       bunu "sayfanın tümü kullanılmamış ve ortalı değil" diye bildirdi. Artık dolu
       sütun grubu container içinde ortalanıyor. Üst sınır 360'tan 460'a çıkarıldı —
       kullanıcı ortalamanın yeterli olmadığını, kartın ekranı daha çok kaplamasını
       (yine ortalı kalarak) istedi ("daha iyi görünmesi için ekranın daha çok kaplasın
       yine ortalı olsun"). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
    justify-content: center;
    gap: var(--sp-4);
}
.proje-satiri {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--golge-sm);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.proje-satiri:hover { transform: translateY(-2px); box-shadow: var(--golge); border-color: var(--renk-vurgu-kenar); }
.proje-satiri strong { font-size: 16px; }
.proje-satiri .tarih { font-size: 12.5px; color: var(--renk-metin-soluk); }
.proje-satiri .eylemler { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
/* Raporlarım kartı: en çok kullanılan iki aksiyon (Sonuçları Gör, PDF) üst satırda eşit
   genişlikte, Excel/Word alt satırda — kullanıcı isteği ("PDF, sonuçları göster butonunun
   yanında onun kadar genişlikte olsun, diğerleri aşağıda olsun"). flex:1 1 100% ile her
   satır .eylemler'in (flex-wrap:wrap) tam genişliğini kaplayıp bir sonrakini yeni satıra
   itiyor; .proje-satiri .eylemler'i kullanan diğer sayfalar (panel/anasayfa, tek satır
   buton grubu) bu yeni sınıfı hiç kullanmadığı için etkilenmiyor. */
.eylemler-satir { display: flex; gap: var(--sp-2); flex: 1 1 100%; }
.eylemler-satir .btn { flex: 1 1 0; justify-content: center; }

/* 11b. Uygulama kataloğu (giriş sonrası ilk sayfa) --------------------------- */
.uygulama-grid {
    display: grid;
    /* auto-fill (önceki hali) az sayıda kart varken (şu an tek uygulama) sağda boş,
       görünmez "hayalet" sütun izleri bırakıyordu — mobilde tek sütuna düştüğü için
       fark edilmiyor, geniş masaüstü ekranında kartın sağında büyük bir boşluk olarak
       görünüyordu (kullanıcı: "masaüstünde farklı mobil görünümde farklı olur").
       auto-fit boş sütunları çökertip mevcut kart(lar)ı doldurur; üst sınır (320px)
       kart sayısı azken tek bir kartın tüm genişliğe abartılı şekilde gerilmesini önler.
       justify-content:center: .proje-listesi ile aynı gerekçe — dolu sütun grubu az
       kartken sola değil, container içinde ortaya yaslanıyor. Üst sınır .proje-listesi
       ile aynı gerekçeyle 320'den 460'a çıkarıldı (kullanıcı: "ekranın daha çok kaplasın
       yine ortalı olsun"). */
    grid-template-columns: repeat(auto-fit, minmax(240px, 460px));
    justify-content: center;
    gap: var(--sp-5);
}
.uygulama-kart {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sp-6);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    background: var(--renk-kart);
    box-shadow: var(--golge-sm);
    text-decoration: none;
    color: inherit;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.uygulama-kart:hover { transform: translateY(-2px); box-shadow: var(--golge); border-color: var(--renk-vurgu-kenar); text-decoration: none; }
.uygulama-ikon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--renk-vurgu-koyu);
    background: var(--renk-vurgu-zemin);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
}
.uygulama-ikon svg { width: 26px; height: 26px; }
.uygulama-govde { flex: 1; }
.uygulama-baslik { font-size: 17px; font-weight: 600; color: var(--renk-vurgu-koyu); margin-bottom: var(--sp-2); }
.uygulama-aciklama { font-size: 13.5px; color: var(--renk-metin-soluk); line-height: 1.5; }
.uygulama-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--renk-kenar);
    font-size: 12.5px;
}
.uygulama-proje-sayisi { color: var(--renk-metin-ikincil); }
.uygulama-git {
    font-weight: 700;
    color: var(--renk-vurgu-koyu);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--gecis), transform var(--gecis);
}
.uygulama-kart:hover .uygulama-git { opacity: 1; transform: translateX(0); }

.uygulama-arama-kutu { max-width: 900px; margin-bottom: var(--sp-5); }
.uygulama-arama-kutu input {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: 999px;
    font-size: 14px;
    min-height: 42px;
}
.uygulama-arama-kutu input:focus { outline: none; border-color: var(--renk-vurgu); box-shadow: 0 0 0 3px var(--renk-vurgu-zemin); }
.uygulama-bos-sonuc { max-width: 900px; color: var(--renk-metin-soluk); font-size: 14px; padding: var(--sp-5) 0; }

/* 11c. Anasayfa (yeni tasarım şeması) ----------------------------------------- */
.anasayfa-basligi {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}
.anasayfa-basligi h1 { margin: 0 0 6px; font-size: 32px; letter-spacing: -0.02em; }
.anasayfa-basligi .aciklama { margin: 0; }
.anasayfa-istatistik-grubu { display: flex; align-items: center; gap: var(--sp-6); }
.anasayfa-istatistik { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.anasayfa-istatistik .deger { font-size: 28px; font-weight: 700; color: var(--renk-vurgu); line-height: 1; }
.anasayfa-istatistik .etiket { font-size: 13px; color: var(--renk-metin-soluk); white-space: nowrap; }
.anasayfa-istatistik-ayirac { width: 1px; align-self: stretch; background: var(--renk-kenar-guclu); }

.anasayfa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.arac-listesi-karti { grid-column: span 2; }
.kart-baslik-satiri { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.kart-baslik-satiri h2 { margin: 0; font-size: 18px; }
.kart-baslik-satiri a { font-size: 14px; font-weight: 600; }

.arac-kart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.arac-kart {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    background: var(--renk-kart-alt);
}
.arac-kart-ikon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--renk-vurgu-zemin);
    color: var(--renk-vurgu);
    display: flex;
    align-items: center;
    justify-content: center;
}
.arac-kart-ikon svg { width: 24px; height: 24px; }
.arac-kart-govde { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.arac-kart-ad { font-size: 16px; font-weight: 600; }
.arac-kart-sayi { font-size: 13px; color: var(--renk-metin-soluk); }
.arac-kart-bos {
    background: none;
    border-style: dashed;
    border-color: var(--renk-kenar-guclu);
    color: var(--renk-metin-soluk);
    font-size: 14px;
    line-height: 1.45;
}
.arac-kart-bos .arac-kart-ikon { background: var(--renk-zemin); color: var(--renk-metin-soluk); }

.raporlar-karti { display: flex; flex-direction: column; gap: var(--sp-3); }
.raporlar-karti-baslik { display: flex; align-items: center; gap: var(--sp-3); }
.raporlar-karti-baslik h2 { margin: 0; font-size: 18px; }
.raporlar-karti-ikon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--renk-vurgu-zemin);
    color: var(--renk-vurgu);
    display: flex;
    align-items: center;
    justify-content: center;
}
.raporlar-karti .aciklama { margin: 0; }
.raporlar-karti-btn { margin-top: auto; justify-content: center; }
.raporlar-karti-alt { font-size: 12px; color: var(--renk-metin-soluk); }

.son-projeler-karti .aciklama { margin: 0; }
table.son-projeler-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
table.son-projeler-tablo th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    padding: 10px 12px;
    background: var(--renk-kart-alt);
    border-top: 1px solid var(--renk-kenar-soluk);
    border-bottom: 1px solid var(--renk-kenar-soluk);
}
table.son-projeler-tablo td { padding: 12px; border-bottom: 1px solid var(--renk-kenar-soluk); vertical-align: middle; }
table.son-projeler-tablo tr:last-child td { border-bottom: none; }
.son-projeler-islem-basligi, .son-projeler-islem { text-align: right; }
.son-projeler-ad { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.son-projeler-ad-ikon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--renk-zemin);
    color: var(--renk-vurgu);
    display: flex;
    align-items: center;
    justify-content: center;
}
.son-projeler-ad-ikon svg { width: 16px; height: 16px; }

/* Mobilde tablo yerine tamamı tıklanabilir, tek satırlık kart listesi (bkz. tasarım
   şeması — masaüstü/mobil aynı veriyi farklı, her ekrana uygun bileşenle gösteriyor). */
.son-projeler-satirlar { display: none; }
.son-projeler-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--renk-kenar-soluk);
    color: var(--renk-metin);
}
.son-projeler-satir:last-child { border-bottom: none; }
.son-projeler-satir:hover { text-decoration: none; background: var(--renk-kart-alt); }
.son-projeler-satir-ikon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--renk-zemin);
    color: var(--renk-vurgu);
    display: flex;
    align-items: center;
    justify-content: center;
}
.son-projeler-satir-ikon svg { width: 17px; height: 17px; }
.son-projeler-satir-govde { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.son-projeler-satir-ad { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.son-projeler-satir-alt { font-size: 12px; color: var(--renk-metin-soluk); }
.son-projeler-satir > svg { width: 18px; height: 18px; color: var(--renk-metin-soluk); flex-shrink: 0; }

/* 12. Grafik kutuları --------------------------------------------------------- */
.grafik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-3);
}
.grafik-kutu {
    background: var(--renk-kart);
    border: 1px solid var(--renk-kenar);
    border-radius: var(--radius);
    padding: var(--sp-5);
    box-shadow: var(--golge-sm);
}
.grafik-baslik {
    margin: 0 0 var(--sp-3);
    font-size: 15px;
    color: var(--renk-vurgu-koyu);
}
.grafik-canvas-sarici {
    position: relative;
    height: 260px;
}

/* 13. Giriş / Kayıt (auth) ekranı --------------------------------------------- */
/* auth sayfaları kendi ikon+başlık bloğunu çiziyor; _header.php'nin genel <h1>'i
   burada tekrar/gereksiz olurdu (bkz. "Hesapla" markalama turu — reference: kullanıcının
   paylaştığı "Hesabım" ekranı örneği). */
.sayfa-auth main > h1 { display: none; }
/* Anasayfa kendi başlık+istatistik satırını (.anasayfa-basligi > h1) çiziyor. */
.sayfa-anasayfa main > h1 { display: none; }

.auth-sayfa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56vh;
    text-align: center;
}
.auth-ikon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--renk-vurgu-koyu);
    background: var(--renk-vurgu-zemin);
    border-radius: 999px;
    margin-bottom: var(--sp-4);
}
.auth-ikon svg { width: 30px; height: 30px; }
.auth-baslik {
    /* .auth-baslik bir <h2>, ama genel h2 stili (bölüm ayracı çizgisi + renkli
       kare işaret, bkz. üstteki genel "h2" kuralı) içerik bölümleri için — burada
       istenmiyor, sıfırlanıyor. */
    margin: 0 0 var(--sp-2);
    padding-bottom: 0;
    border-bottom: none;
    font-size: 24px;
    display: block;
}
.auth-baslik::before { content: none; }
.auth-alt-yazi {
    color: var(--renk-metin-soluk);
    font-size: 14.5px;
    margin-bottom: var(--sp-5);
    max-width: 380px;
}
.giris-kutu {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--sp-6);
    box-shadow: var(--golge-lg);
    text-align: left;
}
.giris-kutu .btn-birincil { width: 100%; justify-content: center; margin-top: var(--sp-2); }
.giris-kutu .aciklama { text-align: center; margin-top: var(--sp-5); margin-bottom: 0; }
.auth-alt-not {
    text-align: center;
    margin: var(--sp-5) 0 0;
    font-size: 12.5px;
    color: var(--renk-metin-ikincil);
    line-height: 1.5;
}
.auth-sifre-unuttum { text-align: right; margin: -6px 0 var(--sp-3); font-size: 13px; }
.auth-sifre-unuttum a { color: var(--renk-metin-soluk); }
.auth-sifre-unuttum a:hover { color: var(--renk-vurgu-koyu); }

.auth-sekmeler {
    display: flex;
    background: var(--renk-zemin);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: var(--sp-6);
}
.auth-sekme {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: calc(var(--radius-sm) - 2px);
    font-weight: 700;
    font-size: 14px;
    color: var(--renk-metin-soluk);
    transition: background var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.auth-sekme:hover { text-decoration: none; color: var(--renk-metin); }
.auth-sekme.aktif { background: #fff; color: var(--renk-vurgu-koyu); box-shadow: var(--golge-sm); }

/* 14. Rozetler ---------------------------------------------------------------- */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.rozet-basarili { background: var(--renk-vurgu-zemin); color: var(--renk-vurgu-koyu); border: 1px solid var(--renk-vurgu-kenar); }
.rozet-hata { background: var(--renk-hata-zemin); color: var(--renk-hata); border: 1px solid var(--renk-hata-kenar); }

/* 15. Duyarlı (responsive) ayarlamalar ---------------------------------------- */
@media (max-width: 640px) {
    main { padding: var(--sp-4) var(--sp-3) 90px; }
    h1 { font-size: 22px; }

    /* Masaüstünde sol sabit menü + üst arama çubuğu; mobilde bunların yerini tek bir
       üst çubuk (logo + ara + hesap) ve sabit bir alt gezinme çubuğu alıyor. */
    .yan-menu { display: none; }
    .masaustu-ust-cubuk { display: none; }
    .mobil-ust-cubuk { display: flex; height: 60px; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 0 var(--sp-4); background: var(--renk-vurgu); }

    .alt-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        height: var(--alt-sekme-yukseklik);
        background: var(--renk-kart);
        border-top: 1px solid var(--renk-kenar);
        box-shadow: 0 -2px 10px rgba(23, 42, 31, 0.08);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: content-box;
    }
    .alt-nav a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--renk-metin-soluk);
        font-size: 11px;
        font-weight: 600;
    }
    .alt-nav a:hover { text-decoration: none; color: var(--renk-vurgu); }
    .alt-nav a svg { width: 21px; height: 21px; }
    .alt-nav a.aktif { color: var(--renk-vurgu); }
    main { padding-bottom: calc(90px + var(--alt-sekme-yukseklik)); }
    .form-aksiyonlari { bottom: var(--alt-sekme-yukseklik); }

    /* Sayı rozetli sekme çubuğu mobilde yatay kaydırmalı hâle geliyordu ve son 2 adım
       (Besi Sığırcılığı, İşletme Planı) ekran dışında kalıp kaydırma ipucu da olmadığı
       için "kullanması çok zor" bulunuyordu (bkz. kullanıcı geri bildirimi). Mobilde bu
       çubuk tamamen kaldırılıp tek gezinme yolu olarak Geri/İleri çubuğu bırakılıyor —
       her genişliğe sığar, kaydırma gerektirmez.
       */
    .sekme-nav { display: none; }

    .kart { padding: var(--sp-4); }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .kpi-kart { padding: var(--sp-3) var(--sp-4); }
    .kpi-kart .deger { font-size: 22px; }

    /* Anasayfa — mobil düzen şemaya göre masaüstünden belirgin şekilde farklı: sağa yaslı
       tek satır istatistik yerine 2 sütunlu, ayrı kutulu kartlar; 3 sütunlu kart ızgarası
       yerine tek sütun yığın; masaüstü tablosu yerine tıklanabilir satır listesi (bkz.
       kullanıcı isteği: "masaüstünde büyük olanı mobilde uygun göstermenin yolunu bul"). */
    .anasayfa-basligi { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .anasayfa-basligi h1 { font-size: 24px; }
    .anasayfa-istatistik-grubu { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .anasayfa-istatistik {
        align-items: flex-start;
        background: var(--renk-kart);
        border: 1px solid var(--renk-kenar);
        border-radius: var(--radius);
        padding: var(--sp-3) var(--sp-4);
    }
    .anasayfa-istatistik-ayirac { display: none; }
    .anasayfa-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .arac-listesi-karti { grid-column: auto; }
    .arac-kart-grid { grid-template-columns: 1fr; }
    table.son-projeler-tablo { display: none; }
    .son-projeler-satirlar { display: flex; flex-direction: column; }

    /* 4 tam genişlik + tam yükseklik buton üst üste yığılınca ekranın çoğunu kaplıyordu
       ("koskocaman 4 tane buton" — bkz. kullanıcı geri bildirimi). Geri/İleri ikincil
       gezinme aksiyonları olduğu için küçültülüp yan yana tek satıra alındı; Kaydet ve
       Hesapla (birincil aksiyon) ve Vazgeç tam genişlikte ama daha az dolgulu kaldı. */
    .form-aksiyonlari { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); }
    .form-aksiyonlari .btn { justify-content: center; min-height: 36px; padding: 7px 12px; font-size: 13px; }
    .form-aksiyonlari #sekmeGeri, .form-aksiyonlari #sekmeIleri { flex: 1 1 0; width: auto; }
    .form-aksiyonlari #kaydetBtn, .form-aksiyonlari #vazgecLink { flex: 1 1 100%; width: 100%; }

    /* sonuc.php aksiyon çubuğu: dar ekranda iki grup alt alta, her grup kendi içinde eşit
       genişlikte butonlarla düzenli sıralanıyor — PDF butonu (birincil, en çok tercih
       edilen dışa aktarma) kendi satırında öne çıkarılıyor, Excel/Word altında yarı yarıya. */
    .aksiyon-cubugu { flex-direction: column; align-items: stretch; padding: var(--sp-3); }
    .aksiyon-grubu .btn { flex: 1 1 0; justify-content: center; }
    .aksiyon-grubu + .aksiyon-grubu { padding-top: var(--sp-3); border-top: 1px dashed var(--renk-kenar); }
    .aksiyon-grubu:last-child .btn-pdf { flex: 1 1 100%; }

    .auth-sayfa { min-height: 0; padding-top: var(--sp-6); }

    /* Geri/İleri artık alt aksiyon çubuğunda (bkz. kullanıcı geri bildirimi: "ileri geri
       butonlarının yeri çok saçma") — üstteki bu çubukta artık sadece adım göstergesi
       kalıyor, yine de yapışkan (sticky) tutuluyor ki kullanıcı hangi adımda olduğunu
       kaydırırken de görsün. */
    .sekme-adim-cubugu {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--renk-kart);
        border: 1px solid var(--renk-kenar);
        border-radius: var(--radius);
        padding: var(--sp-2) var(--sp-3);
        box-shadow: var(--golge);
        justify-content: center;
    }
    .sekme-adim-gosterge { font-size: 12px; text-align: center; }

    /* Yem/inşaat/makine/personel gibi dinamik tablolar mobilde yatay kaydırmalıydı;
       kaydırma çubuğu/gölge ipucu yeterince fark edilmiyordu ("yana kaydırıp bakmak"
       çok zor bulundu — bkz. kullanıcı geri bildirimi). Her satır dikey bir karta
       dönüştürülüyor, sütun adları her hücrenin üstünde data-label'dan geliyor —
       kaydırma tamamen ortadan kalkıyor. */
    .tablo-sarici { overflow-x: visible; background: none; border: none; }
    table.veri-tablo { min-width: 0; }
    table.veri-tablo thead { display: none; }
    table.veri-tablo, table.veri-tablo tbody, table.veri-tablo tr { display: block; width: 100%; }
    table.veri-tablo tr {
        border: 1px solid var(--renk-kenar);
        border-radius: var(--radius-sm);
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
    }
    table.veri-tablo tr:last-child { margin-bottom: 0; }
    table.veri-tablo td {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        border-bottom: none;
        padding: var(--sp-1) 0;
    }
    table.veri-tablo td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        width: 40%;
        font-weight: 700;
        font-size: 12.5px;
        color: var(--renk-vurgu-koyu);
    }
    table.veri-tablo td input { flex: 1 1 auto; min-width: 0; width: auto; }
    table.veri-tablo td .sayi-adim-sarici { flex: 1 1 auto; min-width: 0; max-width: 160px; }
    /* Masaüstü kuralı (satır 591) son hücreyi table.veri-tablo td:last-child { width:1% }
       ile daraltıyor — bu, masaüstünde Sil sütununu içeriğe göre daraltmak içindi ama
       mobildeki kart düzeninde Sil butonunun hücresini neredeyse sıfır genişliğe
       sıkıştırıyordu. Burada açıkça geçersiz kılınıyor. */
    table.veri-tablo td:last-child { width: auto; justify-content: flex-end; padding-top: var(--sp-2); }
    table.veri-tablo td:has(input[type=number]) { text-align: left; }

    /* Sonuç sayfasındaki salt-okunur özet tabloları (Yıllık Gelir-Gider, Süt/Besi 10 Yıllık
       Özet) 620px min-width ile mobilde yatay taşıyordu — sadece taşan kısım değil, min-width
       hiçbir üst öğede sınırlanmadığı için SAYFANIN TAMAMI yana kayıyordu ("şu sayfanın
       saçmalığına bak", "devamı neden görünmüyor telefona" — bkz. kullanıcı geri bildirimi).
       veri-tablo ile aynı yöntemle dikey karta çevrildi; ilk sütun (Yıl) kart başlığı gibi
       gösteriliyor, geri kalanı etiket:değer satırları. */
    .tablo-sarici { overflow-x: visible; background: none; border: none; }
    table.sonuc-tablo { min-width: 0; }
    table.sonuc-tablo thead { display: none; }
    table.sonuc-tablo, table.sonuc-tablo tbody, table.sonuc-tablo tr { display: block; width: 100%; }
    table.sonuc-tablo tr {
        border: 1px solid var(--renk-kenar);
        border-radius: var(--radius-sm);
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
        background: var(--renk-kart) !important;
    }
    table.sonuc-tablo tr:last-child { margin-bottom: 0; }
    table.sonuc-tablo tr.uyarili { background: var(--renk-uyari-zemin) !important; }
    table.sonuc-tablo td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--sp-2);
        border-bottom: none;
        padding: 6px 0;
        text-align: right;
    }
    table.sonuc-tablo td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 12.5px;
        color: var(--renk-vurgu-koyu);
        text-align: left;
    }
    table.sonuc-tablo td:first-child {
        display: block;
        text-align: left;
        font-weight: 700;
        font-size: 15px;
        color: var(--renk-metin);
        border-bottom: 1px solid var(--renk-kenar);
        padding-bottom: var(--sp-2);
        margin-bottom: 4px;
    }
    table.sonuc-tablo td:first-child::before { content: attr(data-label) ": "; font-size: inherit; color: inherit; }
    .tablo-sarici.tum-yillar-acik .yil-gizli { display: block; }
}

@media (max-width: 420px) {
    /* Çok dar ekranlarda 2 sütunlu KPI kartları sıkışıp başlıkların 2-3 satıra
       bölünmesine, kartların dengesiz yükseklikte görünmesine yol açıyordu
       (bkz. konsey UX denetimi, bulgu #13). */
    .kpi-grid { grid-template-columns: 1fr; }
}

/* 15b. Satır silme "Geri Al" bildirimi (proje formu) -------------------------- */
.geri-al-konteyner {
    position: fixed;
    left: 50%;
    /* proje formundaki sticky "Kaydet ve Hesapla" çubuğunun (bottom:0, ~76px yükseklik)
       üzerine binmesin diye yeterli boşluk bırakılıyor. */
    bottom: 92px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sp-2);
    width: min(360px, calc(100vw - 2 * var(--sp-4)));
}
.geri-al-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: var(--renk-metin);
    color: #fff;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    box-shadow: var(--golge-lg);
    font-size: 14px;
    animation: geri-al-belir .15s ease-out;
}
@keyframes geri-al-belir {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.geri-al-btn {
    background: none;
    border: none;
    color: #9fe0bd;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}
.geri-al-btn:hover { text-decoration: underline; }

/* 16. Erişilebilirlik: azaltılmış hareket ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}