/* kevi - tasarım dili
   Finsight (mobil, sade palet, büyük radius, Manrope) +
   Finora (masaüstü dashboard yapısı, sidebar, kart grid, cash-flow renkleri) sentezi. */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
    --renk-beyaz: #FFFFFF;
    --renk-gri-zemin: #F6F6F6;
    --renk-gri-kenar: #E7E8EC;
    --renk-mavi: #6A92FC;
    --renk-mavi-koyu: #4A6FE0;
    --renk-koyu: #14161A;
    --renk-antrasit: #1E2128;
    --renk-metin: #14161A;
    --renk-metin-soluk: #8A8D96;
    /* Kart alt satırı gibi ikincil ama gerçekten okunması gereken metinler için: soluktan koyu, ana metinden açık. */
    --renk-metin-ikincil: #6B6F7A;

    /* Brief kuralı: mavi-gelir, turuncu-gider, siyah-yatırım */
    --renk-gelir: #6A92FC;
    --renk-gider: #F2994A;
    --renk-yatirim: #14161A;
    --renk-basari: #34C759;
    --renk-tehlike: #EB5757;

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --golge-yumusak: 0 8px 24px rgba(20, 22, 26, 0.06);
    --golge-kart: 0 2px 8px rgba(20, 22, 26, 0.04);

    /* Koyu kart temel dili: üst köşede cam parlaması + ince diyagonal çizgi dokusu + ince halka (çember) dokusu, hepsi koyu bir taban üzerinde. */
    --sheen-parlama: radial-gradient(130% 150% at 100% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
    --doku-halka: repeating-radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 7px);
    --doku-cizgi: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 5px);
    --taban-koyu-kart: linear-gradient(160deg, #23262E 0%, #101216 55%, #07080A 100%);

    --gradient-koyu-kart: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), var(--taban-koyu-kart);

    /* Hesap kategorisi / kredi kartı ağı renkleri — koyu tabanın üstünde, üst köşeden yumuşak bir renk parıltısı (tam kart boyu doygun degrade değil) */
    --gradient-nakit: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(34, 189, 130, 0.5) 0%, transparent 70%), var(--taban-koyu-kart);
    --gradient-banka: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(76, 116, 242, 0.5) 0%, transparent 70%), var(--taban-koyu-kart);
    --gradient-doviz: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(139, 92, 246, 0.5) 0%, transparent 70%), var(--taban-koyu-kart);
    --gradient-visa: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(51, 87, 222, 0.55) 0%, transparent 70%), var(--taban-koyu-kart);
    --gradient-mastercard: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(235, 120, 60, 0.5) 0%, transparent 70%), var(--taban-koyu-kart);
    --gradient-troy: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(14, 165, 160, 0.5) 0%, transparent 70%), var(--taban-koyu-kart);
    --gradient-amex: var(--sheen-parlama), var(--doku-halka), var(--doku-cizgi), radial-gradient(60% 70% at 88% 14%, rgba(84, 120, 172, 0.45) 0%, transparent 70%), var(--taban-koyu-kart);

    --kenar-cubuk-genislik: 84px;
    --ust-header-yukseklik: 72px;
    --mobil-alt-nav-yukseklik: 64px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--renk-gri-zemin);
    color: var(--renk-metin);
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select {
    font-family: inherit;
    font-size: inherit;
}

/* Açılır listeler: öğenin kendisi native <select> kalıyor — klavye gezinmesi, ekran okuyucu ve
   telefondaki tekerlek seçici bedava geliyor; yalnızca işletim sisteminin görünümü kaldırılıp
   (appearance: none) kendi okumuz çiziliyor. Ok, ikon setindeki Lucide chevron-down ile aynı çizim.
   Not: bu kuralı ezen sınıflar `background-color` kullanmalı — `background` kısayolu oku siler. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--renk-beyaz);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B6F7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    padding: 13px 38px 13px 16px;
    color: var(--renk-metin);
    cursor: pointer;
}

select:hover {
    border-color: #D3D6DE;
}

select:focus {
    outline: none;
    border-color: var(--renk-mavi);
}

select:disabled {
    background-color: var(--renk-gri-zemin);
    color: var(--renk-metin-soluk);
    cursor: default;
}

h1, h2, h3, h4, p {
    margin: 0;
}

/* --- Genel uygulama iskeleti --- */

.uygulama {
    display: flex;
    min-height: 100vh;
}

.kenar-cubugu {
    width: calc(var(--kenar-cubuk-genislik) + env(safe-area-inset-left));
    background: var(--renk-antrasit);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    gap: 8px;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
}

.kenar-cubugu__logo {
    height: 30px;
    width: auto;
    display: block;
    margin-bottom: 24px;
}

.kenar-cubugu__link {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9599A6;
}

.kenar-cubugu__link svg {
    width: 22px;
    height: 22px;
}

.kenar-cubugu__link.aktif,
.kenar-cubugu__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--renk-beyaz);
}

.icerik-alani {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ust-header {
    height: var(--ust-header-yukseklik);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(28px + env(safe-area-inset-right)) 0 calc(28px + env(safe-area-inset-left));
    position: sticky;
    top: 0;
    background: var(--renk-gri-zemin);
    z-index: 10;
}

.ust-header__logo {
    height: 20px;
    width: auto;
    display: block;
}

.ust-header__sag {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ust-header__ikon-buton {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--renk-beyaz);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--golge-kart);
    color: var(--renk-metin);
}

.ust-header__ikon-buton svg {
    width: 18px;
    height: 18px;
}

.ust-header__profil {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--renk-beyaz);
    border-radius: var(--radius-pill);
    padding: 6px 14px 6px 6px;
    box-shadow: var(--golge-kart);
}

.ust-header__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--renk-mavi);
    color: var(--renk-beyaz);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.ust-header__profil-adi {
    font-weight: 600;
    font-size: 13px;
}

.sayfa-govde {
    flex: 1;
    padding: 8px calc(28px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(28px + env(safe-area-inset-left));
}

/* Form sayfalarının ortak kabı. Kural: tek sütunlu form dar kalır (uzun satır gözü yorar),
   yalnızca çok sütunlu içerik (ör. Transfer'in kaynak → tutar → hedef şeridi) geniş varyantı kullanır. */
.form-sayfa-ortala {
    max-width: 560px;
    margin: 0 auto;
}

.form-sayfa-ortala--genis {
    max-width: 820px;
}

/* Formun tamamının şeklini belirleyen seçim (ör. Hesap Türü) açılır listede saklanmıyor, seçenekler açıkta. */
.tur-secici {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tur-secici__ogo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-md);
    background: var(--renk-beyaz);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tur-secici__ogo:hover {
    border-color: var(--renk-mavi);
    color: var(--renk-mavi-koyu);
}

.tur-secici__ogo--aktif {
    border-color: var(--renk-mavi);
    background: rgba(106, 146, 252, 0.1);
    color: var(--renk-mavi-koyu);
}

/* Bağlantı olarak da kullanılıyor (Ayarlar > Kategoriler tür seçimi). */
a.tur-secici__ogo {
    text-decoration: none;
}

.tur-secici__ogo small {
    font-size: 11px;
    font-weight: 500;
    color: var(--renk-metin-ikincil);
}

.tur-secici--iki {
    grid-template-columns: repeat(2, 1fr);
}

.tur-secici--uc {
    grid-template-columns: repeat(3, 1fr);
}

/* Birden fazla satır taşıyan koşullu alan grupları (ör. Kredi Kartı) — eskiden satır aralıkları
   her satıra elle `margin-top` yazılarak kuruluyordu. */
.hesap-form-yigin {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-alt-baslik {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--renk-metin-soluk);
    padding-top: 14px;
    border-top: 1px solid var(--renk-gri-kenar);
}

@media (max-width: 560px) {
    .tur-secici {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Kart temel bileşeni --- */

.kart {
    background: var(--renk-beyaz);
    border-radius: var(--radius-lg);
    box-shadow: var(--golge-kart);
    padding: 22px;
}

.kart--koyu {
    background: var(--gradient-banka);
    color: var(--renk-beyaz);
}

/* --- Butonlar --- */

.buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .15s ease;
}

.buton:hover {
    opacity: 0.9;
}

.buton--birincil {
    background: var(--renk-koyu);
    color: var(--renk-beyaz);
}

.buton--ikincil {
    background: var(--renk-beyaz);
    color: var(--renk-metin);
    border: 1px solid var(--renk-gri-kenar);
}

.buton--tam-genislik {
    width: 100%;
}

/* --- Mobil alt navigasyon --- */

.mobil-alt-nav {
    display: none;
}

.mobil-hamburger {
    display: none;
}

@media (max-width: 900px) {
    .kenar-cubugu {
        display: none;
    }

    .mobil-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-pill);
        background: var(--renk-beyaz);
        box-shadow: var(--golge-kart);
    }

    .sayfa-govde {
        padding: 8px calc(16px + env(safe-area-inset-right))
                 calc(var(--mobil-alt-nav-yukseklik) + 24px + env(safe-area-inset-bottom))
                 calc(16px + env(safe-area-inset-left));
    }

    .ust-header {
        padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
    }

    .mobil-alt-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--mobil-alt-nav-yukseklik) + env(safe-area-inset-bottom));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--renk-beyaz);
        box-shadow: 0 -2px 12px rgba(20, 22, 26, 0.06);
        z-index: 20;
    }

    .mobil-alt-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-size: 11px;
        color: #9599A6;
        /* 5 öğe (v0.70.0'da Listeler eklendi) dar ekranda taşmasın diye eşit paylaşıyor. */
        flex: 1;
        min-width: 0;
    }

    .mobil-alt-nav__link span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobil-alt-nav__link svg {
        width: 20px;
        height: 20px;
    }

    .mobil-alt-nav__link.aktif {
        color: var(--renk-mavi-koyu);
    }
}

/* --- Mobil hamburger tam menü (off-canvas) --- */

.mobil-menu-ortu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, 0.4);
    z-index: 30;
}

.mobil-menu-ortu.acik {
    display: block;
}

.mobil-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 300px;
    background: var(--renk-beyaz);
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
    padding-left: calc(18px + env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobil-menu-panel__baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mobil-menu-panel__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    border-radius: var(--radius-sm);
    color: var(--renk-metin);
    font-weight: 600;
    font-size: 14px;
}

.mobil-menu-panel__link.aktif {
    background: var(--renk-gri-zemin);
    color: var(--renk-mavi-koyu);
}

/* --- Giriş / kurulum sayfaları (tek sütun, ortalanmış) --- */

.tek-sutun-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
             calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}

.tek-sutun-kutu {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tek-sutun-logo {
    display: flex;
    justify-content: center;
}

.tek-sutun-logo img {
    height: 30px;
    width: auto;
}

.form-alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-alan label {
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
}

.form-alan input {
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    background: var(--renk-beyaz);
}

.form-alan input:focus {
    outline: none;
    border-color: var(--renk-mavi);
}

.telefon-girdi {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--renk-beyaz);
}

.telefon-girdi__on-ek {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--renk-gri-zemin);
    color: var(--renk-metin-soluk);
    font-weight: 700;
    font-size: 14px;
    border-right: 1px solid var(--renk-gri-kenar);
    flex-shrink: 0;
}

.telefon-girdi input {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
    background: transparent;
}

.telefon-girdi input:focus {
    outline: none;
}

.tarih-girdi {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--renk-beyaz);
    position: relative;
}

.tarih-girdi .tarih-metin-alani {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
    /* Dolgu, .form-alan input ile aynı: yan yana duran tarih ve tutar kutuları 41px/49px diye
       farklı yükseklikte kalıyordu (Gelir Ekle'de aynı satırda oldukları için göze çarpıyordu).
       Dis kenarlık .tarih-girdi'de olduğu için iç dolgu 1px fazla. */
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
}

.tarih-girdi .tarih-metin-alani:focus {
    outline: none;
}

/* Native date input, takvim butonunun üstünde saydam duruyor. Önceden 1px'lik, pointer-events:none
   bir kutuydu ve seçici yalnızca showPicker() ile açılıyordu; iOS/iPadOS'ta görünmeyen bir alan için
   seçici açılmadığından ikon dokunmatikte ölü kalıyordu. Artık dokunulan şey gerçek date input. */
.tarih-girdi .tarih-gizli-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: transparent;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Chromium'da date input'un gövdesine tıklamak seçiciyi açmaz, yalnızca kendi takvim göstergesi açar;
   göstergeyi tüm alana yayınca dokunulan her nokta seçiciyi açıyor. */
.tarih-girdi .tarih-gizli-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.tarih-takvim-buton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    background: var(--renk-gri-zemin);
    border: none;
    border-left: 1px solid var(--renk-gri-kenar);
    color: var(--renk-metin-soluk);
    cursor: pointer;
    flex-shrink: 0;
    /* Tıklamayı üstteki native date input alıyor; buton yalnızca ikonu çiziyor. */
    pointer-events: none;
}

.tarih-girdi:has(.tarih-gizli-input:focus) .tarih-takvim-buton {
    color: var(--renk-mavi);
}

.hata-mesaji {
    background: #FDEDED;
    color: #C0392B;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
}

.basari-mesaji {
    background: #EAF7EC;
    color: #1E7B34;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
}

/* --- Anasayfa --- */

.karsilama-baslik {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.karsilama-alt {
    color: var(--renk-metin-soluk);
    font-size: 14px;
    margin-top: 4px;
}

/* Izgara sütunları içlerindeki geniş içeriğe (ör. çok sütunlu tablolar) göre genişlemesin: grid öğelerinin varsayılan
   min-width:auto değeri sütunu tablonun tam genişliğine itip sayfayı yana taşırıyordu; tablo kendi kaydırma kutusunda kalmalı. */
.grid-2 > *,
.grid-3 > *,
.gider-govde > * {
    min-width: 0;
}

.stat-kartlari {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 700px) {
    .stat-kartlari {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-kart__etiket {
    color: var(--renk-metin);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.stat-kart__deger {
    font-size: 22px;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: -0.01em;
}

.stat-kart__alt {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 6px;
}

.stat-kart__ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* Finora referansındaki dolgulu, renkli ikon rozeti — etiket solda, rozet sağda; kartın boş kalan sağ üstünü dengeler. */
.stat-kart__ikon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat-kart__ikon--koyu { background: rgba(20, 22, 26, 0.07); color: var(--renk-koyu); }
.stat-kart__ikon--mavi { background: rgba(106, 146, 252, 0.14); color: var(--renk-mavi); }
.stat-kart__ikon--turuncu { background: rgba(242, 153, 74, 0.16); color: var(--renk-gider); }
.stat-kart__ikon--yesil { background: rgba(52, 199, 89, 0.14); color: var(--renk-basari); }

/* Üstteki 5'li varlık/borç kartları: yazı boyutu kartın kendi genişliğine göre ölçekleniyor (container query) —
   geniş ekranda rakam büyüyüp okunaklı oluyor, kart daraldığında kendiliğinden küçülüp taşmıyor.
   cqi birimini desteklemeyen tarayıcılarda bir önceki (sabit px) tanım geçerli kalır. */
.stat-kartlari--varlik .kart {
    container-type: inline-size;
    padding: 18px;
}

.stat-kartlari--varlik .stat-kart__deger {
    font-size: 22px;
    font-size: clamp(20px, 17cqi, 32px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: 5px;
}

.stat-kartlari--varlik .stat-kart__ikon {
    width: 38px;
    height: 38px;
}

.stat-kartlari--varlik .stat-kart__ikon svg {
    width: 19px;
    height: 19px;
}

/* Anasayfa'nın 6'lı kart grubu (5 varlık/borç kartı + Kişisel Hesap Özeti). Yıllık tablo kendi tam genişlikte
   kartına taşındığı için bu satır da tüm sayfa genişliğini kullanıyor. Taban .stat-kartlari başka 4 sayfada
   kullanıldığından ayrı değiştirici. */
.stat-kartlari--varlik {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 20px;
}

/* 6 kart, kart başına ~160px'in altına düşünce tam TL rakamını sığdıramıyor: 3'lü (2 satır) düzene geçiliyor. */
@media (max-width: 1359px) {
    .stat-kartlari--varlik {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet/telefon: Kişisel Hesap Özeti tam genişlikte ve en üstte. */
@media (max-width: 900px) {
    .stat-kartlari--varlik .stat-kart--kisisel {
        order: -1;
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .stat-kartlari--varlik {
        grid-template-columns: repeat(2, 1fr);
    }
}


.kart-baslik-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 16px;
}

.sayfa-basligi {
    font-size: 20px;
    margin: 0;
}

.sayfa-aksiyonlari {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Telefon: başlık kendi satırında kalır, butonlar satıra ikişerli yerleşir. `flex: 1` (taban 0) üç butonu
   tek satıra sıkıştırıp içeriğin altına indiriyordu — taban %50 olunca sığmayan buton alt satıra geçiyor. */
/* Bazı sayfalarda buton bir <form> içinde (POST gerektiren eylemler); flex öğesi o zaman form oluyor. */
.sayfa-aksiyonlari > form {
    display: flex;
    margin: 0;
}

@media (max-width: 560px) {
    .sayfa-aksiyonlari {
        width: 100%;
    }

    .sayfa-aksiyonlari > .buton,
    .sayfa-aksiyonlari > form {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .sayfa-aksiyonlari .buton {
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sayfa-aksiyonlari > form > .buton {
        width: 100%;
    }

    /* Yalnızca ikon taşıyan eylemler (ör. listeyi sil) satırı paylaşmasın, kendi boyunda kalsın. */
    .sayfa-aksiyonlari > form:has(> .sayfa-ust-aksiyon) {
        flex: 0 0 auto;
    }
}

.kart-baslik-satiri h3 {
    font-size: 15px;
    font-weight: 700;
}

.donem-secici-pill {
    background-color: var(--renk-beyaz);
    border-radius: var(--radius-pill);
    padding: 8px 34px 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--renk-metin-soluk);
    text-align: center;
    font-size: 13px;
}

.bos-durum svg {
    opacity: 0.4;
}

.ozet-kart__etiket {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
}

/* Kişisel Hesap Özeti artık 6. kart: diğer kartlarla aynı ölçüde, yalnızca koyu zeminli.
   Koyu zeminde okunur olması için etiket/ikon renkleri ayrıca eziliyor. */
.stat-kart--kisisel .stat-kart__etiket {
    color: rgba(255, 255, 255, 0.82);
}

.stat-kart--kisisel .stat-kart__ikon--beyaz {
    background: rgba(255, 255, 255, 0.14);
    color: var(--renk-beyaz);
}

.ozet-kart__ay {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 8px;
}

.ozet-kart__satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.25;
    margin-top: 2px;
}

.ozet-kart__satir-etiket {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 600;
}

.ozet-kart__satir-deger {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


.islem-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 700px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Hesap detayı başlık satırı: solda hesap adı + kısa künye, sağda o hesaba özgü eylemler. */
.hesap-ust {
    align-items: flex-start;
    margin-top: 4px;
}

.hesap-ust__meta {
    font-size: 12px;
    color: var(--renk-metin-soluk);
    margin-top: 4px;
}

/* Özet bloğu: solda kartın kendisi, sağda dönem rakamları + bakiye/borç eğrisi.
   Tek satır; sağ sütun yüksekliği belirliyor, kart kendi oranında dikeyde ortalanıyor
   (eski iki sütunlu bandda sağdaki grafik gerilip altta büyük bir boşluk bırakıyordu).
   İşlem listesi bunun altında, tam genişlikte — sayfanın asıl içeriği o. */
.hesap-ozet {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    background: var(--renk-beyaz);
    border-radius: var(--radius-lg);
    box-shadow: var(--golge-kart);
    padding: 20px;
    margin-top: 16px;
}

.hesap-ozet__kart {
    width: 100%;
}

.hesap-ozet__govde {
    min-width: 0;
}

/* Dönem rakamları: ayrı ayrı kartlar yerine ince dikey ayraçlı tek şerit. */
.ozet-serit {
    display: flex;
}

.ozet-serit__oge {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    border-left: 1px solid var(--renk-gri-kenar);
}

.ozet-serit__oge:first-child {
    border-left: 0;
    padding-left: 0;
}

.ozet-serit__etiket {
    font-size: 11px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ozet-serit__deger {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    margin-top: 4px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.ozet-serit__alt {
    font-size: 11px;
    line-height: 1.45;
    color: var(--renk-metin-soluk);
    margin-top: 4px;
}

.hesap-trend {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.hesap-trend__baslik {
    font-size: 13px;
    font-weight: 700;
}

.hesap-trend__baslik span {
    font-size: 11px;
    font-weight: 500;
    color: var(--renk-metin-soluk);
    margin-left: 6px;
}

.hesap-trend svg {
    width: 100%;
}

.hesap-trend__bos {
    font-size: 13px;
    color: var(--renk-metin-soluk);
    padding: 28px 0;
    text-align: center;
}

@media (max-width: 900px) {
    .hesap-ozet {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hesap-ozet__kart {
        max-width: 380px;
    }
}

@media (max-width: 560px) {
    .ozet-serit {
        flex-direction: column;
    }

    .ozet-serit__oge {
        border-left: 0;
        padding: 0;
    }

    .ozet-serit__oge + .ozet-serit__oge {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--renk-gri-kenar);
    }
}

/* İşlem geçmişi: başlık + dönem gezinmesi, altında arama/tür süzgeci ve satırlar. */
.islem-gecmisi {
    margin-top: 24px;
}

.islem-gecmisi__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    margin-bottom: 16px;
}

.islem-suzgec {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.islem-suzgec__arama {
    flex: 1;
    min-width: 220px;
    padding: 9px 14px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 14px;
}

.islem-suzgec__aralik {
    font-size: 12px;
    color: var(--renk-metin-soluk);
}

/* Bakiye Düzeltme: seçilen hesabın mevcut bakiyesi ve girilen tutarla arasındaki fark. */
.duzeltme-ozet {
    background: var(--renk-gri-zemin);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.duzeltme-ozet__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--renk-metin-soluk);
}

.duzeltme-ozet__satir strong {
    font-size: 15px;
    color: var(--renk-metin);
    font-variant-numeric: tabular-nums;
}

.islem-suzgec__not {
    color: var(--renk-metin-soluk);
    font-size: 12px;
    padding-top: 12px;
    text-align: center;
}

.islem-suzgec__bos {
    color: var(--renk-metin-soluk);
    font-size: 13px;
    padding: 18px 0;
    text-align: center;
}

.islem-listesi__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bakiyeye henüz işlenmemiş (ileri tarihli/tekrarlayan) kayıtlar — gizlenmek yerine işaretleniyor. */
.islem-rozet {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--renk-mavi-koyu);
    background: rgba(106, 146, 252, 0.14);
    border-radius: 999px;
    padding: 2px 7px;
}

/* Anasayfa alt kart grubu (Nakit Akışı + Bütçe Hedefi + Harcama Dağılımı). Sağdaki 320px'lik sütun kalktığı için
   bu satır tüm sayfa genişliğini kullanıyor; align-items:start ile kısa kartlar en uzunun boyuna gerilmiyor. */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}

/* Üç kart da aynı aya ait: ay gezinmesi, grubu sahiplenen bir bölüm başlığının içinde duruyor —
   altındaki ince ayraç (hesaplar.php'deki kategori başlığı deseniyle aynı) başlık ile kartları tek blok yapıyor. */
.donem-grubu {
    margin-top: 24px;
}

.donem-grubu .grid-3 {
    margin-top: 0;
}

.donem-grubu__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    margin-bottom: 16px;
}

.donem-grubu__baslik {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

.donem-grubu__araclar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Oklar ve ay adı tek bir kontrol gibi görünsün diye ortak bir pil içinde. */
.donem-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-kenar);
    border-radius: 999px;
    padding: 3px;
}

.donem-nav__ok {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--renk-metin);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donem-nav__ok:hover:not(:disabled) {
    background: var(--renk-gri-zemin);
    color: var(--renk-mavi);
}

.donem-nav__ok:disabled {
    opacity: 0.3;
    cursor: default;
}

.donem-nav__etiket {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    min-width: 96px;
    text-align: center;
}

/* Anasayfa, Gelir, Gider ve Takvim'de ay oklarının yanındaki ortak "Bu ay" kısayolu.
   Üç sayfada üç farklı görünümdeydi (küçük pil / büyük buton / kendi stili) — tek bileşende birleşti.
   Hem <button> hem <a> olarak kullanıldığı için hizalama ve alt çizgi burada sıfırlanıyor. */
.donem-nav__bugun {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--renk-gri-kenar);
    background: var(--renk-beyaz);
    color: var(--renk-metin-soluk);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.donem-nav__bugun:hover {
    border-color: var(--renk-mavi);
    color: var(--renk-mavi);
}

.donem-nav__hata {
    color: var(--renk-tehlike);
    font-size: 12px;
}

/* Yeni ay yüklenirken kartlar soluyor — yerleşim değişmediği için sayfa zıplamıyor. */
.donem-kartlari--yukleniyor {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

/* Telefon: başlık üstte, gezinme araçları altında tam genişlikte. */
@media (max-width: 560px) {
    .donem-grubu__araclar {
        width: 100%;
        justify-content: space-between;
    }
}

/* Kart başlığındaki ay bilgisi: başlıkla aynı satırda, daha küçük ve soluk. */
.kart-baslik-donem {
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
}

/* 3 sütun kart başına ~280px'in altına düşünce donut ve bütçe çubukları okunaksızlaşıyor. */
@media (max-width: 1000px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Hesaplar --- */

.hesap-kategori-kart {
    background: var(--renk-beyaz);
    border-radius: var(--radius-lg);
    box-shadow: var(--golge-kart);
    padding: 22px;
    margin-top: 20px;
}

.hesap-kategori-kart:first-child {
    margin-top: 0;
}

.hesap-kategori-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hesap-kategori-toplam {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Hesap satırı: 18 hesabı 19 fiziki kart yerine taranabilir bir listede gösteriyor.
   Kart figürü, gerçekten öne çıktığı yerde — hesap detayında — duruyor (Finora'nın "My Card" deseni). */
.hesap-listesi {
    margin-top: 10px;
}

.hesap-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.hesap-satir:first-child {
    border-top: 0;
}

.hesap-satir__ana {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

.hesap-satir__ana:hover {
    background: var(--renk-gri-zemin);
}

/* Rozet, hesabın kendi kart görselinin minyatürü: aynı degrade, aynı marka logosu. */
.hesap-satir__rozet {
    width: 46px;
    height: 32px;
    border-radius: 7px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--renk-beyaz);
    background: var(--gradient-koyu-kart);
}

.hesap-satir__isim {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hesap-satir__ad {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hesap-satir__meta {
    font-size: 12px;
    color: var(--renk-metin-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hesap-satir__ilerleme {
    height: 4px;
    border-radius: 999px;
    background: var(--renk-gri-zemin);
    overflow: hidden;
    margin-top: 4px;
    max-width: 220px;
}

.hesap-satir__ilerleme-dolu {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--renk-mavi);
}

.hesap-satir__tutar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.hesap-satir__bakiye {
    font-size: 15px;
    font-weight: 700;
}

.hesap-satir__alt {
    font-size: 11px;
    color: var(--renk-metin-soluk);
}

/* Kredi kartında kullanılan limit oranı — bakiyenin yanında ince dikey çubuk. */
.hesap-satir__limit {
    width: 4px;
    height: 34px;
    border-radius: 999px;
    background: var(--renk-gri-kenar);
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hesap-satir__limit-dolu {
    width: 100%;
    background: var(--renk-gider);
    border-radius: 999px;
}

.hesap-satir__aksiyon button {
    border: 0;
    background: transparent;
    color: var(--renk-metin-soluk);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.hesap-satir__aksiyon button:hover {
    background: var(--renk-gri-zemin);
    color: var(--renk-metin);
}

/* Pasif hesaplar: bakiyesi/borcu olmayan ve hareket görmeyenler + elle arşivlenenler. */
.hesap-pasif {
    background: var(--renk-beyaz);
    border-radius: var(--radius-lg);
    box-shadow: var(--golge-kart);
    padding: 18px 22px;
    margin-top: 20px;
}

.hesap-pasif__ust {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.hesap-pasif__ust::-webkit-details-marker {
    display: none;
}

.hesap-pasif__ust::after {
    content: '⌄';
    margin-left: auto;
    color: var(--renk-metin-soluk);
}

.hesap-pasif[open] .hesap-pasif__ust::after {
    content: '⌃';
}

.hesap-pasif__baslik {
    font-size: 13px;
    font-weight: 700;
}

.hesap-pasif__not {
    font-size: 12px;
    color: var(--renk-metin-soluk);
}

.hesap-satir--pasif {
    opacity: 0.65;
}

.hesap-kategori-baslik {
    font-size: 13px;
    font-weight: 700;
    color: var(--renk-metin-soluk);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hesap-kart {
    background: var(--gradient-koyu-kart);
    color: var(--renk-beyaz);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    aspect-ratio: 1.85 / 1;
    box-shadow: 0 12px 28px rgba(16, 18, 22, 0.22);
    position: relative;
}

.hesap-kart--nakit { background: var(--gradient-nakit); }
.hesap-kart--banka { background: var(--gradient-banka); }
.hesap-kart--doviz { background: var(--gradient-doviz); }
.hesap-kart--visa { background: var(--gradient-visa); }
.hesap-kart--mastercard { background: var(--gradient-mastercard); }
.hesap-kart--troy { background: var(--gradient-troy); }
.hesap-kart--amex { background: var(--gradient-amex); }
.hesap-kart--varsayilan { background: var(--gradient-koyu-kart); }

/* Satır rozeti, kartın kendi degradesini minyatür olarak taşıyor. */
.hesap-satir__rozet--nakit { background: var(--gradient-nakit); }
.hesap-satir__rozet--banka { background: var(--gradient-banka); }
.hesap-satir__rozet--doviz { background: var(--gradient-doviz); }
.hesap-satir__rozet--visa { background: var(--gradient-visa); }
.hesap-satir__rozet--mastercard { background: var(--gradient-mastercard); }
.hesap-satir__rozet--troy { background: var(--gradient-troy); }
.hesap-satir__rozet--amex { background: var(--gradient-amex); }
.hesap-satir__rozet--varsayilan { background: var(--gradient-koyu-kart); }

.hesap-kart__ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
}

.hesap-kart__isim {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hesap-kart__logo {
    flex-shrink: 0;
}

.hesap-kart__banka {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.hesap-kart__hesap-adi {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.hesap-kart__bakiye {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hesap-kart__alt {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
    min-height: 15px;
}

.ekle-detay {
    margin-top: 20px;
}

.ekle-detay > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
}

.ekle-detay > summary::-webkit-details-marker {
    display: none;
}

.ekle-detay[open] > summary {
    margin-bottom: 16px;
}

.form-satir-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 600px) {
    .form-satir-2 {
        grid-template-columns: 1fr;
    }
}

.form-satir-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 600px) {
    .form-satir-3 {
        grid-template-columns: 1fr;
    }
}

.tablo-aksiyonlar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.tablo-aksiyonlar form {
    margin: 0;
}

.form-alan select {
    padding: 13px 38px 13px 16px;
    width: 100%;
}

.geri-linki {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--renk-metin-soluk);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.buton-grubu {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.islem-listesi__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
}

.islem-listesi__satir:last-child {
    border-bottom: none;
}

.islem-listesi__tutar--pozitif {
    color: var(--renk-basari);
    font-weight: 700;
}

.islem-listesi__tutar--negatif {
    color: var(--renk-tehlike);
    font-weight: 700;
}

/* --- Transfer --- */

/* Akış soldan sağa tek şeritte: kaynak → tutar → hedef. Iki satır tek ızgarada olduğu için seçiciler ile
   yer değiştirme butonu, özetler ile tutar alanı kendiliğinden aynı hizada duruyor. */
.transfer-serit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
        "kaynak-sec  degistir hedef-sec"
        "kaynak-ozet tutar    hedef-ozet";
    gap: 12px 16px;
    align-items: start;
}

.transfer-serit__kaynak-sec { grid-area: kaynak-sec; }
.transfer-serit__hedef-sec { grid-area: hedef-sec; }
.transfer-serit__kaynak-ozet { grid-area: kaynak-ozet; }
.transfer-serit__hedef-ozet { grid-area: hedef-ozet; }
.transfer-serit__tutar { grid-area: tutar; width: 180px; }

/* Tutar transferin asıl kararı: şeridin ortasında ve sayfadaki en büyük giriş alanı. */
.transfer-tutar-alani {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.transfer-serit__tutar label {
    text-align: center;
}

.transfer-degistir {
    grid-area: degistir;
    align-self: end;
    /* Orta sütunun genişliğini tutar alanı belirliyor (180px); sabit genişlikli buton varsayılan
       yerleşimde sola yaslanıyordu — altındaki tutar alanına göre ortalanıyor. */
    justify-self: center;
    width: 38px;
    height: 38px;
    margin-bottom: 3px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: 50%;
    background: var(--renk-beyaz);
    color: var(--renk-mavi-koyu);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.transfer-degistir:hover {
    background: var(--renk-mavi);
    border-color: var(--renk-mavi);
    color: var(--renk-beyaz);
}

/* Seçim özeti: fiziki kart figürü yerine Hesaplar listesindeki rozetle aynı dil. */
.transfer-ozet {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: var(--renk-gri-zemin);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.transfer-ozet__govde {
    min-width: 0;
}

.transfer-ozet__ad {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transfer-ozet__bakiye {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12px;
    color: var(--renk-metin-soluk);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.transfer-ozet__bakiye strong {
    font-size: 14px;
    color: var(--renk-metin);
}

.transfer-ozet__yeni--yetersiz {
    color: var(--renk-tehlike);
}

.transfer-ozet__uyari {
    font-size: 11px;
    font-weight: 700;
    color: var(--renk-tehlike);
    margin-top: 3px;
}

/* Transferlerin neredeyse hepsi bugün; tarih alanı kapalı başlayıp istendiğinde açılıyor. */
.transfer-tarih__ozet {
    font-size: 13px;
    color: var(--renk-metin-soluk);
}

.transfer-tarih__ac {
    border: 0;
    background: none;
    padding: 0 0 0 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-mavi-koyu);
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 700px) {
    /* Tek sütunda tutar iki hesap bloğunun arasına sıkışıyordu; kaynak-hedef ikilisi bozulmadan
       okunsun diye tutar alanı ikisinin altına, kendi tam genişlikli alanına iniyor. */
    .transfer-serit {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kaynak-sec"
            "kaynak-ozet"
            "degistir"
            "hedef-sec"
            "hedef-ozet"
            "tutar";
    }

    .transfer-serit__tutar {
        width: 100%;
        margin-top: 4px;
    }

    /* Tam genişlikte tutar alanı, formun diğer alanlarıyla aynı hizada okunuyor. */
    .transfer-serit__tutar label,
    .transfer-tutar-alani {
        text-align: left;
    }

    .transfer-degistir {
        align-self: center;
        justify-self: center;
        margin-bottom: 0;
        transform: rotate(90deg);
    }
}

/* Tekrarlayan kayıt silme penceresi: kapsam seçenekleri alt alta. */
.tekrar-sil__ad {
    font-size: 13px;
    color: var(--renk-metin-ikincil);
    margin-bottom: 16px;
}

.tekrar-sil-secenekler {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tekrar-sil-secenekler .buton {
    justify-content: center;
}

.tekrar-sil__adet {
    font-weight: 500;
    color: var(--renk-metin-soluk);
}

/* Gelirin kişi bazında dağılımı — ad + tutar + pay çubuğu. */
/* Ad + tutar + pay çubuğu satırı: Gelir "Kime Geldi", Gider "Kim Harcadı" ve kategori detayındaki
   Alt Kategoriler / Satıcılar kırılımları aynı bileşeni paylaşıyor. Satır bir bağlantı da olabilir. */
.kirilim-liste {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kirilim-satir {
    display: block;
    border-radius: var(--radius-sm);
}

.kirilim-satir--link {
    color: inherit;
    text-decoration: none;
    margin: -6px -8px;
    padding: 6px 8px;
    transition: background 0.15s ease;
}

.kirilim-satir--link:hover {
    background: var(--renk-gri-zemin);
}

.kirilim-satir--secili {
    background: var(--renk-gri-zemin);
    box-shadow: inset 0 0 0 1px var(--renk-gri-kenar);
}

.kirilim-satir__ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.kirilim-satir__ad {
    font-size: 13px;
    font-weight: 600;
}

.kirilim-satir__tutar {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kirilim-satir__pay {
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-soluk);
    margin-left: 4px;
}

.kirilim-satir__meta {
    margin-top: 5px;
    font-size: 11px;
    color: var(--renk-metin-ikincil);
}

/* Anapara / maliyet gibi iki parçalı oranlar için tek çubuk. */
.oran-cubugu {
    display: flex;
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--renk-gri-zemin);
}

.oran-cubugu__parca {
    height: 100%;
}

.oran-lejant {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--renk-metin-soluk);
}

.oran-lejant__nokta {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

/* Dönem gezinmesi: oklar açılır listelerin iki yanında, "Bu ay" kısayolu yalnızca başka aydayken. */
.donem-filtresi__secimler {
    display: flex;
    gap: 8px;
}

.donem-filtresi .donem-nav__ok {
    text-decoration: none;
    flex-shrink: 0;
}

/* Harcamalarda arama: kutu + kapsam pilleri (bu ay / tüm yıl). */
.gider-arama {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.gider-arama__alan {
    flex: 1;
    min-width: 200px;
    padding: 9px 14px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 14px;
}

.gider-arama__temizle {
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-mavi-koyu);
}

/* O ay harcaması olmayan kategoriler de listede duruyor (detay sayfasına tek giriş burası), ama soluk. */
.donut-legend__satir--bos {
    opacity: 0.5;
}

.donut-legend__sol a {
    color: inherit;
}

/* Analiz kartları (Kredi Detayı, Gider): özet şeridi + oran çubuğu + tek satırlık kalemler. */
.analiz-bolum {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.analiz-satirlar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analiz-satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--renk-metin-soluk);
}

.analiz-satir strong {
    color: var(--renk-metin);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.analiz-satir--baslik {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--renk-metin-soluk);
    margin-bottom: 2px;
}

.analiz-ek {
    font-weight: 500;
    color: var(--renk-metin-soluk);
}

.analiz-uyari {
    color: var(--renk-tehlike);
    font-weight: 700;
    margin-left: 6px;
}

/* --- Krediler --- */

.sayfa-ayirici {
    border-top: 1px solid var(--renk-gri-kenar);
    margin-top: 40px;
    padding-top: 28px;
}

.kredi-kart {
    background: var(--gradient-koyu-kart);
    color: var(--renk-beyaz);
    border-radius: 24px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 28px rgba(16, 18, 22, 0.22);
}

.kredi-kart__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kredi-kart__banka {
    font-weight: 700;
    font-size: 15px;
}

.kredi-kart__miktar {
    font-size: 24px;
    font-weight: 800;
}

.kredi-kart__alt-etiket {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

.yasam-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.yasam-bar__dolu {
    height: 100%;
    background: var(--renk-mavi);
    border-radius: var(--radius-pill);
}

.yasam-bar--acik {
    background: var(--renk-gri-kenar);
}

.yasam-bar--acik .yasam-bar__dolu {
    background: var(--renk-basari);
}

.kredi-kart__taksit-satiri {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.kredi-kart--kapandi {
    opacity: 0.5;
}

.kredi-kart__kapandi-etiket {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

.taksit-takvimi {
    display: flex;
    flex-direction: column;
}

.taksit-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
}

.taksit-satir:last-child {
    border-bottom: none;
}

.taksit-satir__no {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--renk-gri-zemin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--renk-metin-soluk);
    flex-shrink: 0;
}

.taksit-satir--odendi .taksit-satir__no {
    background: var(--renk-basari);
    color: var(--renk-beyaz);
}

.taksit-satir__orta {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 12px;
}

.taksit-satir__durum {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

.taksit-satir__durum--odendi {
    background: #EAF7EC;
    color: #1E7B34;
}

.taksit-satir__durum--bekliyor {
    background: var(--renk-gri-zemin);
    color: var(--renk-metin-soluk);
}

/* --- Gelir / Gider ortak: dönem filtresi, donut grafik, kategori rozetleri --- */

.donem-filtresi {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 20px;
}

.donem-filtresi select {
    padding: 9px 34px 9px 12px;
}

.donut-kart {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 180px;
}

.donut-legend__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.donut-legend__sol {
    display: flex;
    align-items: center;
    gap: 8px;
}

.donut-legend__nokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kategori-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.gelir-listesi__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
    gap: 10px;
}

.gelir-listesi__satir:last-child {
    border-bottom: none;
}

.gelir-listesi__sil {
    background: none;
    border: none;
    color: var(--renk-metin-soluk);
    cursor: pointer;
    padding: 4px;
}

.gelir-listesi__sil:hover {
    color: var(--renk-tehlike);
}

.checkbox-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.checkbox-satir input {
    width: 16px;
    height: 16px;
}

/* --- Kiler & Ecza Dolabı (ortak envanter sayfası: includes/envanter_sayfa.php) --- */

/* Yalnızca işlem gerektiren durumların sayıları; dokununca liste o duruma süzülür. */
.dikkat-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
}

.dikkat-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    background: var(--renk-beyaz);
    color: var(--renk-metin);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.dikkat-cip strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dikkat-cip--gecmis { background: #FDEDED; border-color: #F5C2C2; color: #B42318; }
.dikkat-cip--yakin { background: #FFF3E0; border-color: #FAD9A8; color: #9A5B00; }
.dikkat-cip--azaliyor { background: #EEF3FF; border-color: #CFDBFB; color: var(--renk-mavi-koyu); }
.dikkat-cip--tukendi { color: var(--renk-metin-ikincil); }

.dikkat-cip[aria-pressed="true"] {
    background: var(--renk-koyu);
    border-color: var(--renk-koyu);
    color: var(--renk-beyaz);
}

.dikkat-tamam {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    font-size: 13px;
    font-weight: 600;
    color: #1E7B34;
}

.envanter-govde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.envanter-yan {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--ust-header-yukseklik) + 8px);
}

.envanter-liste-kart {
    padding: 0 0 6px;
}

/* Arama çubuğu başlığın altına, grup başlıkları da arama çubuğunun altına yapışır. */
.envanter-arac {
    position: sticky;
    top: var(--ust-header-yukseklik);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 12px;
    background: var(--renk-beyaz);
    border-bottom: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.envanter-arama {
    flex: 1 1 220px;
    min-width: 0;
}

.gorunum-secici {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--renk-gri-zemin);
    border-radius: var(--radius-pill);
}

.gorunum-secici button {
    min-height: 34px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--renk-metin-ikincil);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.gorunum-secici button[aria-pressed="true"] {
    background: var(--renk-beyaz);
    color: var(--renk-metin);
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.12);
}

.gorunum-secici--tam {
    display: flex;
}

/* Radyo düğmeli varyant (Kiler Detayı "Stoktan Düş" formu): gerçek radyo görünmez ama odaklanabilir. */
.gorunum-secici__radyo {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.detay-tur {
    flex: 1;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    color: var(--renk-metin-ikincil);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.gorunum-secici__radyo:checked + .detay-tur {
    background: var(--renk-beyaz);
    color: var(--renk-metin);
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.12);
}

.gorunum-secici__radyo:focus-visible + .detay-tur {
    outline: 2px solid var(--renk-mavi);
}

.gorunum-secici--tam button {
    flex: 1;
}

.envanter-suzgec-bilgi {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-ikincil);
}

.envanter-suzgec-bilgi button {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--renk-mavi-koyu);
    font: inherit;
    cursor: pointer;
}

.envanter-grup__baslik {
    position: sticky;
    top: calc(var(--ust-header-yukseklik) + var(--envanter-arac-yukseklik, 64px));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px 8px;
    background: #F7F8FA;
    color: var(--renk-metin-ikincil);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    list-style: none;
}

.envanter-grup__baslik::-webkit-details-marker {
    display: none;
}

.envanter-grup__sayi {
    padding: 0 7px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    background: var(--renk-beyaz);
    font-size: 11px;
    letter-spacing: 0;
}

[data-envanter-grup="gecmis"] > .envanter-grup__baslik { color: #B42318; }
[data-envanter-grup="yakin"] > .envanter-grup__baslik { color: #9A5B00; }

.envanter-grup--katli > summary {
    cursor: pointer;
}

.envanter-grup--katli > summary::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.envanter-grup--katli[open] > summary::after {
    transform: rotate(-135deg);
}

/* Satırın tamamı tek bir düğme: dokununca hızlı eylem penceresi açılır. Durum sol kenar çizgisi + yazıyla. */
.envanter-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 10px 18px 10px 15px;
    border: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--renk-gri-kenar);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.envanter-grup__liste > .envanter-satir:last-child {
    border-bottom: 0;
}

.envanter-satir:hover {
    background: #F8F9FB;
}

.envanter-satir:focus-visible {
    outline: 2px solid var(--renk-mavi);
    outline-offset: -2px;
}

.envanter-satir--gecmis { border-left-color: var(--renk-tehlike); }
.envanter-satir--yakin { border-left-color: var(--renk-gider); }

.envanter-satir::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-top: 2px solid #C4C7CF;
    border-right: 2px solid #C4C7CF;
    transform: rotate(45deg);
}

.envanter-satir__ikon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.envanter-satir__govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.envanter-satir__ad {
    overflow: hidden;
    color: var(--renk-metin);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.envanter-satir--tukendi .envanter-satir__ad {
    color: var(--renk-metin-ikincil);
}

.envanter-satir__meta {
    overflow: hidden;
    color: var(--renk-metin-ikincil);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.envanter-satir__durum { font-weight: 700; }
.envanter-satir--gecmis .envanter-satir__durum,
.envanter-modal[data-durum="gecmis"] .envanter-satir__durum { color: #B42318; }
.envanter-satir--yakin .envanter-satir__durum,
.envanter-modal[data-durum="yakin"] .envanter-satir__durum { color: #9A5B00; }

.envanter-satir__azaliyor {
    color: var(--renk-mavi-koyu);
    font-weight: 700;
}

.envanter-satir__miktar {
    flex-shrink: 0;
    color: var(--renk-metin);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.envanter-satir__miktar small {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
    font-weight: 600;
}

.envanter-arama-bos {
    padding: 28px 18px;
}

.envanter-hareketler {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.envanter-hareket {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
}

.envanter-hareket__ad {
    color: var(--renk-metin);
    font-weight: 600;
}

.envanter-hareket__meta,
.envanter-hareket__bos {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
}

.envanter-hareket__atik {
    color: var(--renk-tehlike);
    font-weight: 600;
}

.envanter-diger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--renk-gri-kenar);
    border-radius: var(--radius-md);
    color: var(--renk-mavi-koyu);
    font-size: 13px;
    font-weight: 600;
}

/* Hızlı eylem penceresi; telefonda alttan açılan panel. */
.envanter-modal__stok {
    margin-top: -8px;
    color: var(--renk-metin-ikincil);
    font-size: 14px;
}

.envanter-modal__stok strong {
    color: var(--renk-metin);
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.envanter-modal__meta {
    margin: 4px 0 16px;
    color: var(--renk-metin-ikincil);
    font-size: 12px;
}

.envanter-modal__hizli {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.envanter-eylem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-md);
    background: var(--renk-beyaz);
    color: var(--renk-metin);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.envanter-eylem strong { font-size: 15px; }
.envanter-eylem small { color: var(--renk-metin-ikincil); font-size: 12px; }
.envanter-eylem:hover { border-color: var(--renk-mavi); background: #F5F8FF; }
.envanter-eylem--atik strong { color: var(--renk-tehlike); }
.envanter-eylem--atik:hover { border-color: #F5C2C2; background: #FDEDED; }

.envanter-modal__miktar {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.envanter-modal__miktar > summary {
    padding: 4px 0;
    color: var(--renk-mavi-koyu);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.envanter-modal__miktar-govde {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.envanter-modal .hata-mesaji {
    margin-top: 12px;
}

.envanter-modal__detay {
    display: block;
    margin-top: 16px;
    color: var(--renk-mavi-koyu);
    font-size: 13px;
    font-weight: 600;
}

.envanter-modal-katman--bekliyor .envanter-modal {
    opacity: 0.6;
    pointer-events: none;
}

.envanter-bildirim {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px 12px 18px;
    border-radius: 14px;
    background: var(--renk-koyu);
    color: var(--renk-beyaz);
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(20, 22, 26, 0.25);
    transform: translateX(-50%);
}

.envanter-bildirim button {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: #9DB8FF;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 900px) {
    .envanter-govde {
        grid-template-columns: minmax(0, 1fr);
    }

    .envanter-yan {
        position: static;
    }

    .envanter-bildirim {
        bottom: calc(var(--mobil-alt-nav-yukseklik) + 12px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 600px) {
    .envanter-arac {
        padding: 12px 14px 10px;
    }

    .envanter-grup__baslik {
        padding-left: 14px;
        padding-right: 14px;
    }

    .envanter-satir {
        padding: 10px 14px 10px 11px;
    }

    .envanter-satir__meta {
        white-space: normal;
    }

    .envanter-modal-katman {
        align-items: flex-end;
        padding: 0;
    }

    .envanter-modal {
        max-width: none;
        border-radius: 22px 22px 0 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* --- Kiler / Ecza Dolabı ürün detayı (liste sayfasıyla aynı iskelet) --- */

.dikkat-cip--bilgi {
    cursor: default;
}

a.envanter-hareket__ad {
    color: var(--renk-metin);
}

.envanter-detay-baslik {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.envanter-detay-baslik__ikon {
    width: 46px;
    height: 46px;
}

.envanter-detay-baslik__metin {
    min-width: 0;
}

.envanter-detay-baslik__meta {
    margin-top: 2px;
    color: var(--renk-metin-ikincil);
    font-size: 13px;
}

.envanter-detay-ana {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.envanter-detay-serit {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.envanter-detay-serit__oge {
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--renk-gri-kenar);
}

.envanter-detay-serit__oge:first-child {
    padding-left: 0;
    border-left: 0;
}

.envanter-detay-serit .ozet-serit__deger small {
    color: var(--renk-metin-ikincil);
    font-size: 13px;
    font-weight: 600;
}

.envanter-detay-serit .ozet-serit__alt,
.envanter-detay-serit .ozet-serit__etiket {
    color: var(--renk-metin-ikincil);
}

.envanter-detay-serit__oge--gecmis .ozet-serit__deger,
.envanter-detay-serit__oge--gecmis .ozet-serit__alt { color: #B42318; }
.envanter-detay-serit__oge--yakin .ozet-serit__deger,
.envanter-detay-serit__oge--yakin .ozet-serit__alt { color: #9A5B00; }

.fiyat-artis { color: #B42318; font-weight: 700; }
.fiyat-dusus { color: #1E7B34; font-weight: 700; }

.envanter-kart-baslik {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.envanter-kart-baslik h2 {
    margin: 0;
    font-size: 16px;
}

.envanter-kart-baslik span {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
    font-weight: 600;
}

/* Paket (alış lotu) satırı: kalan oranı çubukla, durum sol kenar çizgisiyle ve yazıyla. */
.paket-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 15px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.envanter-grup__liste > .paket-satir:last-child {
    border-bottom: 0;
}

.paket-satir--gecmis { border-left-color: var(--renk-tehlike); }
.paket-satir--yakin { border-left-color: var(--renk-gider); }

.paket-satir__govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.paket-satir__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.paket-satir__ad {
    color: var(--renk-metin);
    font-size: 14px;
    font-weight: 600;
}

.paket-satir--bitti .paket-satir__ad {
    color: var(--renk-metin-ikincil);
}

.paket-rozet {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #EEF3FF;
    color: var(--renk-mavi-koyu);
    font-size: 11px;
    font-weight: 700;
}

.paket-satir__meta {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
}

.paket-satir--gecmis .envanter-satir__durum { color: #B42318; }
.paket-satir--yakin .envanter-satir__durum { color: #9A5B00; }

.paket-cubuk {
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--renk-gri-zemin);
}

.paket-cubuk span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--renk-mavi);
}

.paket-satir--gecmis .paket-cubuk span { background: var(--renk-tehlike); }
.paket-satir--yakin .paket-cubuk span { background: var(--renk-gider); }

.paket-satir__miktar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--renk-metin);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.paket-satir__miktar small {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
    font-weight: 600;
}

.paket-satir__toplam {
    color: var(--renk-metin-ikincil);
    font-size: 11px;
    font-weight: 600;
}

.paket-satir__aksiyon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.paket-satir__aksiyon form {
    margin: 0;
}

/* Düzenle / sil ikonları dokunmada en az 32px hedef alanı taşısın. */
.paket-satir__aksiyon .liste-maddesi__duzenle,
.paket-satir__aksiyon .liste-maddesi__sil,
.hareket-satir .liste-maddesi__sil {
    padding: 8px;
}

/* Hareket geçmişi: aylara göre gruplu, grup başlıkları sayfa başlığının altına yapışır. */
.hareket-grup .envanter-grup__baslik {
    top: var(--ust-header-yukseklik);
}

.hareket-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.hareket-grup .hareket-satir:last-child {
    border-bottom: 0;
}

.hareket-satir__ikon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EAF7EC;
    color: #1E7B34;
    font-size: 16px;
    font-weight: 800;
}

.hareket-satir--tuketildi .hareket-satir__ikon { background: #EEF3FF; color: var(--renk-mavi-koyu); }
.hareket-satir--atildi .hareket-satir__ikon { background: #FDEDED; color: #B42318; }

.hareket-satir__govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hareket-satir__ad {
    color: var(--renk-metin);
    font-size: 14px;
    font-weight: 600;
}

.hareket-satir--atildi .hareket-satir__ad { color: #B42318; }

.hareket-satir__meta {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
}

.hareket-satir__miktar {
    flex-shrink: 0;
    color: var(--renk-metin);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hareket-satir--alis .hareket-satir__miktar { color: #1E7B34; }

.hareket-satir__miktar small {
    color: var(--renk-metin-ikincil);
    font-size: 12px;
    font-weight: 600;
}

/* Satın alma satırında sil düğmesi yok; miktarlar alt alta hizalı kalsın diye aynı genişlikte boşluk. */
.hareket-satir__bosluk {
    width: 32px;
    flex-shrink: 0;
}

.envanter-tumunu-goster {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid var(--renk-gri-kenar);
    background: none;
    color: var(--renk-mavi-koyu);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .envanter-detay-serit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 14px;
    }

    .envanter-detay-serit__oge:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .envanter-detay-baslik__ikon {
        width: 40px;
        height: 40px;
    }

    .paket-satir {
        flex-wrap: wrap;
        padding: 12px 12px 12px 11px;
    }

    .paket-satir__govde {
        flex-basis: calc(100% - 110px);
    }

    .paket-satir__aksiyon {
        margin-left: auto;
    }

    .hareket-satir {
        padding: 10px 10px 10px 14px;
        gap: 10px;
    }
}

/* Genel süzgeç pilleri (Gelir/Gider arama kapsamı, Hesap Detayı, Araç Detayı). */
.filtre-pilleri {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filtre-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--renk-gri-kenar);
    background: var(--renk-beyaz);
    color: var(--renk-metin-ikincil);
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.filtre-pill:hover {
    border-color: var(--renk-mavi);
    color: var(--renk-mavi-koyu);
}

.filtre-pill--aktif,
.filtre-pill--aktif:hover {
    border-color: var(--renk-koyu);
    background: var(--renk-koyu);
    color: var(--renk-beyaz);
}

.durum-rozet {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.durum-rozet--tukendi {
    background: var(--renk-gri-zemin);
    color: var(--renk-metin-soluk);
}

.lot-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
}

.lot-satir:last-child {
    border-bottom: none;
}

/* --- Listeler --- */

.liste-ekle-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.liste-ekle-form input[type="text"] {
    flex: 1;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    background: var(--renk-beyaz);
}

.liste-maddesi__sil,
.liste-maddesi__duzenle {
    background: none;
    border: none;
    color: var(--renk-metin-soluk);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
}

.liste-maddesi__sil:hover {
    color: var(--renk-tehlike);
}

.liste-maddesi__duzenle:hover {
    color: var(--renk-mavi);
}

/* --- Listeler (çoklu liste görünümü) --- */

.liste-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.liste-kart {
    background: var(--renk-beyaz);
    border-radius: var(--radius-lg);
    box-shadow: var(--golge-kart);
    padding: 22px;
    color: inherit;
    display: block;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.liste-kart:hover {
    box-shadow: var(--golge-yumusak);
    transform: translateY(-1px);
}

.liste-kart--kapali {
    opacity: 0.5;
}

.liste-kart__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.liste-kart__ad {
    font-size: 16px;
    font-weight: 700;
}

.liste-kart__meta {
    color: var(--renk-metin-soluk);
    font-size: 12px;
    margin-top: 6px;
}

.liste-kart__ilerleme {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--renk-metin-soluk);
    margin-top: 8px;
}

/* --- Ayarlar --- */

/* --- Ayarlar: sol sekme menüsü + sağda seçili sekmenin içeriği --- */
/* SKT eşiği: özet panelinin altında, uyarıyı üreten sayıların yanında duran küçük ayar satırı. */
/* --- Değişiklik Geçmişi (kayit_gecmisi görünümü) --- */

.kg-suzgec-kart {
    margin-bottom: 20px;
}

.kg-suzgec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.kg-suzgec .form-alan label {
    font-size: 12px;
}

.kg-suzgec__butonlar {
    display: flex;
    gap: 8px;
}

.kg-suzgec__butonlar .buton {
    flex: 1 1 auto;
    justify-content: center;
}

/* Gün başlığı, Kiler/Listeler'deki yapışkan grup başlığıyla aynı dil. */
.kg-gun {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0 8px;
    margin-top: 6px;
    background: var(--renk-beyaz);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--renk-metin-ikincil);
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.kg-gun span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.kg-satir {
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.kg-satir:last-of-type {
    border-bottom: none;
}

.kg-satir__ust {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}

.kg-satir__ust::-webkit-details-marker {
    display: none;
}

.kg-satir__ust:hover .kg-satir__baslik {
    color: var(--renk-mavi);
}

.kg-satir__ikon {
    flex-shrink: 0;
}

/* İşlem türü renkle de, yazıyla da veriliyor (WCAG 1.4.1: yalnız renge dayanmıyor). */
.kg-satir__ikon--ekle {
    background: rgba(34, 189, 130, 0.14);
    color: #1E7B34;
}

.kg-satir__ikon--duzenle {
    background: rgba(106, 146, 252, 0.14);
    color: var(--renk-mavi-koyu);
}

.kg-satir__ikon--sil {
    background: rgba(235, 87, 87, 0.14);
    color: var(--renk-tehlike);
}

.kg-satir__govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kg-satir__baslik {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.kg-rozet {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.kg-rozet--ekle {
    background: rgba(34, 189, 130, 0.16);
    color: #1E7B34;
}

.kg-rozet--duzenle {
    background: rgba(106, 146, 252, 0.16);
    color: var(--renk-mavi-koyu);
}

.kg-rozet--sil {
    background: rgba(235, 87, 87, 0.16);
    color: var(--renk-tehlike);
}

.kg-satir__ozet {
    font-size: 13px;
    color: var(--renk-metin);
    overflow-wrap: anywhere;
}

.kg-satir__meta {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.kg-satir__ok {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--renk-metin-ikincil);
    transition: transform .15s;
    padding-top: 8px;
}

.kg-satir[open] .kg-satir__ok {
    transform: rotate(180deg);
}

.kg-detay {
    padding: 0 0 14px 54px;
}

/* .veri-tablo dosyanın ilerisinde min-width:640px veriyor; eleman+sınıf seçicisi sırayı beklemeden kazanıyor. */
table.kg-detay-tablo {
    min-width: 0;
    width: 100%;
}

/* Fark tablosu sayı tablosu değil: .veri-tablo'nun sağa hizalama kuralı burada okumayı zorlaştırıyor. */
table.kg-detay-tablo th:not(:first-child),
table.kg-detay-tablo td:not(:first-child) {
    text-align: left;
}

table.kg-detay-tablo th:first-child,
table.kg-detay-tablo td:first-child {
    width: 34%;
    color: var(--renk-metin-ikincil);
}

.kg-detay-tablo td {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.kg-detay-tablo__degisti td {
    background: rgba(106, 146, 252, 0.07);
    font-weight: 600;
}

.kg-detay__bos,
.kg-detay__kunye {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    margin-top: 8px;
}

.kg-detay__git {
    margin-top: 10px;
    padding: 7px 14px;
    font-size: 12px;
}

.kg-sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.kg-sayfalama__bilgi {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

@media (max-width: 560px) {
    .kg-detay {
        padding-left: 0;
    }
}

/* Bütçe hedefi satırı: ad solda, "harcanan / hedef" sağda; hedef doğrudan düzenlenebiliyor. */
.butce-satir {
    margin-bottom: 16px;
}

.butce-satir__ust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}

.butce-satir__ad {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.butce-satir__hedef {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.butce-satir__harcanan {
    color: var(--renk-metin-ikincil);
    font-variant-numeric: tabular-nums;
}

.butce-hedef-girdi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-kenar);
    border-radius: 999px;
    font-weight: 700;
}

.butce-hedef-girdi:focus-within {
    border-color: var(--renk-mavi);
}

.butce-hedef-girdi input {
    width: 72px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--renk-metin);
}

.butce-hedef-girdi input:focus {
    outline: none;
}

.butce-satir__kaydet {
    padding: 6px 12px;
    font-size: 12px;
}

.butce-satir__alt {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    margin-top: 5px;
}

/* Sayı adım kontrolü: - [deger] + — paylaşılan bileşen.
   Native number spinner bilinçli olarak kapatıldı; okları küçük ve üst üste olduğu için
   ıskalanıyor, üstelik her tarayıcıda farklı görünüyor. */
.sayi-adim {
    display: inline-flex;
    align-items: center;
    background: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-kenar);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.sayi-adim:focus-within {
    border-color: var(--renk-mavi);
}

.sayi-adim__dugme {
    width: 30px;
    height: 32px;
    border: none;
    background: none;
    color: var(--renk-metin-ikincil);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sayi-adim__dugme:hover {
    background: var(--renk-gri-zemin);
    color: var(--renk-mavi);
}

.sayi-adim__dugme:disabled {
    opacity: 0.35;
    cursor: default;
}

.sayi-adim__dugme:disabled:hover {
    background: none;
    color: var(--renk-metin-ikincil);
}

.sayi-adim__girdi {
    /* Ecza Dolabı eşiği 365'e kadar çıkabiliyor: üç hane rahat sığsın. */
    width: 46px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--renk-metin);
    -moz-appearance: textfield;
    appearance: textfield;
}

.sayi-adim__girdi:focus {
    outline: none;
}

/* `.form-alan input` (sınıf + eleman) bu bileşenin kendi kurallarından daha özgül olduğu için
   dolgusunu ve kenarlığını eziyordu: Gelir Ekle'de .sayi-adim bir .form-alan içinde durduğundan
   rakam 13px/16px dolguyla kutuya sığmıyor, kırpılmış görünüyordu. */
.form-alan .sayi-adim__girdi {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

/* .form-alan dikey bir flex kutusu: içindeki pill tam genişliğe gerilip sağında koca bir boşluk
   bırakıyordu. Kendi içeriği kadar yer kaplasın. */
.form-alan .sayi-adim {
    align-self: flex-start;
}

.sayi-adim__girdi::-webkit-outer-spin-button,
.sayi-adim__girdi::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* SKT eşiği: özet panelinin altında, uyarıyı üreten sayıların yanındaki ayar satırı. */
.envanter-esik {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--renk-gri-kenar);
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.envanter-esik__etiket {
    flex: 1 1 auto;
    min-width: 0;
}

.envanter-esik__birim {
    flex-shrink: 0;
}

/* Yalnızca değer değişince beliriyor; o an kendi satırına geçiyor. */
.envanter-esik__kaydet {
    flex: 1 1 100%;
    margin-top: 4px;
    padding: 8px 12px;
    font-size: 12px;
}

/* --- Ayarlar: başlıklar kutucuk ızgarası, detay ortalanmış tek sütun --- */

.ayar-kutular {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    /* Uygulamanın her yerindeki gibi ortalı: tüm ekrana yayılmıyor. */
    max-width: 900px;
    margin: 20px auto 0;
}

.ayar-kutu {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--renk-beyaz);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 18px;
    color: var(--renk-metin);
    box-shadow: var(--golge-kart);
    transition: border-color .15s, transform .15s;
}

.ayar-kutu:hover {
    border-color: var(--renk-mavi);
    transform: translateY(-2px);
}

.ayar-kutu__ikon {
    background: rgba(106, 146, 252, 0.12);
    color: var(--renk-mavi-koyu);
    flex-shrink: 0;
}

.ayar-kutu__ad {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ayar-kutu__ad > span {
    font-weight: 700;
    font-size: 14px;
}

.ayar-kutu__ad small {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detay: uygulamanın her yerindeki gibi ortalanmış tek sütun (sola yaslı değil). */
.ayar-detay {
    max-width: 720px;
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ayar-detay > .geri-linki {
    align-self: flex-start;
    margin-bottom: -10px;
}

.ayar-detay > .sayfa-basligi {
    margin-bottom: -6px;
}


.kullanici-satir, .arac-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    gap: 10px;
}

.kullanici-satir:last-of-type {
    border-bottom: none;
}

.kullanici-satir__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.kullanici-satir__bilgi {
    flex: 1;
    min-width: 0;
}

.kullanici-satir__ad-satiri {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kullanici-satir__ad {
    font-weight: 700;
    font-size: 14px;
}

.kullanici-satir__meta {
    color: var(--renk-metin-soluk);
    font-size: 12px;
    margin-top: 3px;
}

.kullanici-satir:last-child, .arac-satir:last-child {
    border-bottom: none;
}

.rol-rozet {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--renk-gri-zemin);
    color: var(--renk-metin-soluk);
}

.rol-rozet--kurucu {
    background: #EAF2FF;
    color: var(--renk-mavi-koyu);
}

.tanilama-satir {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.tanilama-satir:last-child {
    border-bottom: none;
}

.durum-noktasi {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.durum-noktasi--basarili {
    background: var(--renk-basari);
}

.durum-noktasi--hatali {
    background: var(--renk-tehlike);
}

.durum-pili {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.durum-pili--basarili {
    background: #E6F7EF;
    color: var(--renk-basari);
}

.durum-pili--uyari {
    background: #FDF1E6;
    color: var(--renk-gider);
}

.durum-pili--hatali {
    background: #FDEDED;
    color: var(--renk-tehlike);
}

.kategori-onizleme {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
}

.bilgi-notu {
    font-size: 12px;
    color: var(--renk-metin-soluk);
    background: var(--renk-gri-zemin);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 10px;
}

/* Bilgilendirme değil uyarı: kayıt engellenmiyor ama kullanıcının görmesi gereken bir sonuç var. */
.bilgi-notu--uyari {
    color: #8A4B12;
    background: rgba(242, 153, 74, 0.14);
}

/* --- Takvim --- */

.takvim-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

@media (max-width: 1000px) {
    .takvim-izgara {
        grid-template-columns: 1fr;
    }
}

.takvim-haftaBaslik {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--renk-metin-soluk);
    margin-bottom: 8px;
}

.takvim-gunler {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.takvim-gun {
    min-height: 110px;
    border-radius: var(--radius-sm);
    background: var(--renk-gri-zemin);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin);
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
}

.takvim-gun:hover {
    background: var(--renk-gri-kenar);
}

.takvim-gun--bos {
    background: none;
    cursor: default;
}

.takvim-gun--bugun {
    border-color: var(--renk-mavi);
}

.takvim-gun--secili {
    background: var(--renk-koyu);
    color: var(--renk-beyaz);
}

.takvim-gun__noktalar {
    display: flex;
    gap: 3px;
}

.takvim-gun__nokta {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.takvim-legend {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--renk-metin-soluk);
    flex-wrap: wrap;
}

.takvim-legend__oge {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Uzun kategori adı ya da açıklama sarınca rozet ve tutar ortada asılı kalıyordu; artık
   üç sütun da üstten hizalı ve yalnızca metin sütunu daralıyor. */
.takvim-gun-detay__satir {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
    gap: 10px;
}

.takvim-gun-detay__satir > span:last-child {
    flex-shrink: 0;
}

/* Sabit genişlik: tüm satırlarda metin aynı noktadan başlıyor. */
.takvim-gun-detay__ikon {
    width: 36px;
    height: 36px;
}

.takvim-gun-detay__baslik {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-weight: 600;
}

.takvim-gun-detay__satir:last-child {
    border-bottom: none;
}

.takvim-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.takvim-nav__buton {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--renk-gri-kenar);
    background: var(--renk-beyaz);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--renk-metin);
}

.takvim-nav__buton:hover {
    background: var(--renk-gri-zemin);
}

/* --- Gider sayfası: 2 sütunlu yerleşim, günlük harcama listesi, kategori rozetleri --- */

.gider-govde {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 20px;
    align-items: start;
}

.gider-govde__sol,
.gider-govde__sag {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.gider-ikon-rozet {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gider-liste {
    display: flex;
    flex-direction: column;
}

.gider-liste__satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.gider-liste__satir:last-child {
    border-bottom: none;
}

.gider-liste__orta {
    flex: 1;
    min-width: 0;
}

.gider-liste__ad {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gider-liste__alt-satir {
    color: var(--renk-metin-soluk);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gider-liste__sag {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.gider-liste__tutar {
    color: var(--renk-gider);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}
/* --- Ayarlar > Kategoriler: grup kartı + satırlar (satır başına tek düğme) --- */

/* Kart içinde kart değil: tek liste, gruplar arasında ince ayraç. */
.kategori-liste {
    display: flex;
    flex-direction: column;
}

.kategori-grubu {
    padding: 4px 0;
    border-top: 1px solid var(--renk-gri-kenar);
}

.kategori-grubu:first-child {
    border-top: none;
}

.kategori-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    min-height: 44px;
}

/* Kategorinin kendi rengi: rozet dolgulu — grafiklerdeki/lejanttaki renkle aynı. */
.kategori-rozet {
    background: var(--kat-renk, var(--renk-mavi));
    color: var(--renk-beyaz);
}

.kategori-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kat-renk, var(--renk-mavi));
    opacity: 0.55;
    flex-shrink: 0;
    /* Ana kategori adı rozetten sonra 50px'te başlıyor; alt ad 16px içeride (66px) başlasın. */
    margin-left: 46px;
}

.kategori-satir--pasif {
    opacity: 0.55;
}

.kategori-satir__ad {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-weight: 600;
}

.kategori-satir__sayi {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    white-space: nowrap;
    text-align: right;
}

/* Alt kategoriler: rozet yerine üstünün renginde nokta, satır biraz daha sessiz. */
.kategori-satir--alt {
    min-height: 38px;
    padding: 4px 0;
}

.kategori-satir--alt .kategori-satir__ad {
    font-weight: 500;
    font-size: 13px;
}

.kategori-ekle-satir {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

/* Her grupta duran açık kutu yerine katlanmış satır: liste sakin kalıyor. */
.kategori-alt-ekle {
    padding-left: 66px;
}

.kategori-alt-ekle > summary {
    cursor: pointer;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-ikincil);
}

.kategori-alt-ekle > summary:hover {
    color: var(--renk-mavi);
}

.kategori-alt-ekle form {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
}

.kategori-alt-ekle input,
.kategori-ekle-satir input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
}

.kategori-alt-ekle .buton,
.kategori-ekle-satir .buton {
    padding: 9px 16px;
    font-size: 13px;
}

.kategori-bos-bolum {
    margin-top: 14px;
}

.kategori-bos-bolum > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-ikincil);
    padding: 8px 0;
}

.kategori-bos-bolum .kategori-liste {
    margin-top: 8px;
}

.kategori-modal-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.kategori-modal-alt .buton {
    padding: 9px 16px;
    font-size: 13px;
}

@media (max-width: 560px) {
    /* Dokunma hedefi: telefonda adım düğmeleri büyüyor. */
    .sayi-adim__dugme {
        width: 38px;
        height: 38px;
    }

    .kategori-alt-ekle {
        padding-left: 24px;
    }

    .kategori-nokta {
        margin-left: 12px;
    }

    /* Dar ekranda alan ve düğme yan yana sıkışmasın: alt alta, ikisi de tam genişlikte.
       (flex-basis 100% tek başına yetmiyor — öğe min-width:0 ile aynı satıra sıkışabiliyor.) */
    .kategori-ekle-satir,
    .kategori-alt-ekle form {
        flex-direction: column;
        align-items: stretch;
    }

    .kategori-ekle-satir .buton,
    .kategori-alt-ekle form .buton {
        width: 100%;
    }

    .tur-secici__ogo {
        padding: 10px 6px;
    }

    /* Dar ekranda sayı sarabilsin, satırı taşırmasın. */
    .kategori-satir__sayi {
        white-space: normal;
        max-width: 45%;
    }
}

/* --- Finsight tarzı toggle anahtar (Tekrarlayan işlem vb.) --- */

.anahtar-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.anahtar {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.anahtar input {
    opacity: 0;
    width: 0;
    height: 0;
}

.anahtar__gosterge {
    position: absolute;
    inset: 0;
    background: var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s ease;
}

.anahtar__gosterge::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background: var(--renk-beyaz);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(20, 22, 26, 0.25);
    transition: transform 0.2s ease;
}

.anahtar input:checked + .anahtar__gosterge {
    background: var(--renk-mavi);
}

.anahtar input:checked + .anahtar__gosterge::before {
    transform: translateX(20px);
}

/* --- Gider Ekle: Market/Eczane çoklu ürün (fiş) satırları --- */

.urun-satirlari-kart {
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.urun-satirlari-baslik {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.urun-satirlari-aciklama {
    font-size: 12px;
    color: var(--renk-metin-soluk);
    margin-bottom: 14px;
}

.urun-satirlari {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.urun-satiri {
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.urun-satiri__ust {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.urun-satiri__ust .form-alan {
    flex: 1;
    min-width: 0;
}

.urun-satiri .form-satir-2 {
    gap: 10px;
}

.urun-satiri input,
.urun-satiri select {
    padding: 10px 32px 10px 10px;
    background-position: right 10px center;
    font-size: 13px;
    width: 100%;
}

.urun-satiri input:disabled,
.urun-satiri select:disabled {
    background-color: var(--renk-gri-zemin);
    color: var(--renk-metin-soluk);
}

.urun-satiri-sil {
    flex-shrink: 0;
    margin-bottom: 2px;
}

.urun-ekle-buton {
    margin-top: 12px;
}

.urun-fis-toplami {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
    color: var(--renk-metin-soluk);
}

.urun-fis-toplami strong {
    font-size: 18px;
    color: var(--renk-metin);
}

/* --- Finsight tarzı işlem başarı ekranı --- */

.basari-ekrani {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px 24px;
}

.basari-ekrani__rozet {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.basari-ekrani__rozet-ic {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--renk-basari);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(52, 199, 89, 0.35);
}

.basari-ekrani h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.basari-ekrani p {
    color: var(--renk-metin-soluk);
    font-size: 14px;
    max-width: 360px;
    margin: 0 0 28px;
    line-height: 1.5;
}

.basari-ekrani__detay {
    width: 100%;
}

.basari-ekrani__detay-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
}

.basari-ekrani__detay-satir span {
    color: var(--renk-metin-soluk);
}

.basari-ekrani__detay-satir:last-child {
    border-bottom: none;
}

/* --- Paylaşılan modal/pencere bileşeni (hesap işlemleri formları için) --- */

.modal-katman {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-katman.acik {
    display: flex;
}

.modal-kutu {
    background: var(--renk-beyaz);
    border-radius: 22px;
    padding: 24px;
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-kutu h3 {
    margin-bottom: 16px;
    padding-right: 24px;
}

.modal-kapat {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--renk-metin-soluk);
    padding: 4px;
}

.modal-kapat:hover {
    color: var(--renk-metin);
}

/* --- Sayfa üstü minimal aksiyon ikonları (Düzenle/Sil vb.) --- */

.sayfa-ust-aksiyon {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: -8px;
}

.sayfa-ust-aksiyon a,
.sayfa-ust-aksiyon button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--renk-gri-kenar);
    background: var(--renk-beyaz);
    color: var(--renk-metin-soluk);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.sayfa-ust-aksiyon a:hover,
.sayfa-ust-aksiyon button:hover {
    color: var(--renk-metin);
    border-color: var(--renk-metin-soluk);
}

.sayfa-ust-aksiyon .sayfa-ust-aksiyon--tehlike:hover {
    color: var(--renk-tehlike);
    border-color: var(--renk-tehlike);
}

/* --- Paylaşılan veri tablosu (Yakıt Analizi vb. çok sütunlu listeler için) --- */

.veri-tablo-sarici {
    overflow-x: auto;
}

.veri-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}

.veri-tablo th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--renk-metin-soluk);
    padding: 10px 12px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    white-space: nowrap;
}

.veri-tablo td {
    padding: 12px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    white-space: nowrap;
}

/* Yakıt Alım Geçmişi ve Aylık Döküm katlanan ikinci bir <tbody> taşıyor (v0.85.0). "tr:last-child"
   her iki gövdenin de son satırını yakaladığı için, tablo açıldığında iki gövdenin sınırındaki satır
   alt çizgisiz kalıyordu. Çizgi yalnızca gerçekten en son görünen satırda kaldırılıyor: kapalıyken
   birinci gövdenin son satırı, açıkken son gövdenin son satırı. */
.veri-tablo tbody:last-child tr:last-child td,
.veri-tablo tbody:has(+ tbody[hidden]) tr:last-child td {
    border-bottom: none;
}

.veri-tablo th:not(:first-child),
.veri-tablo td:not(:first-child) {
    text-align: right;
}

/* --- Anasayfa yıllık aylık özet tablosu (.veri-tablo üzerine; çok sütunlu, yatayda kayar) --- */

/* Tablo 20+ sütunlu olduğu için kendi tam genişlikte kartında duruyor (ızgaranın dar sol sütununda değil). */
.yillik-ozet-kart {
    margin-top: 20px;
}

.yillik-ozet {
    font-size: 11px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.yillik-ozet th,
.yillik-ozet td {
    padding: 6px 7px;
}

/* Kategori/kişi başlıkları normal yazımda — büyük harf 20 sütunda tabloyu gereksiz genişletiyordu.
   Ayrıca sarmalanabilir: uzun kategori adları sütunu gereksiz genişletmesin, genişliği rakamlar belirlesin. */
.yillik-ozet thead th {
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    vertical-align: bottom;
}

.yillik-ozet .yillik-ozet__grup th {
    text-align: center;
    color: var(--renk-metin);
    font-size: 11px;
    border-bottom-width: 2px;
}

.yillik-ozet .yillik-ozet__grup .yillik-ozet__grup--gelir { border-bottom-color: var(--renk-gelir); }
.yillik-ozet .yillik-ozet__grup .yillik-ozet__grup--yatirim { border-bottom-color: var(--renk-yatirim); }
.yillik-ozet .yillik-ozet__grup .yillik-ozet__grup--gider { border-bottom-color: var(--renk-gider); }

.yillik-ozet thead tr:nth-child(2) th {
    text-align: right;
}

/* Ay sütunu yatay kaydırmada sabit kalır. */
.yillik-ozet .yillik-ozet__ay {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--renk-beyaz);
    text-align: left;
    font-weight: 600;
}

.yillik-ozet .yillik-ozet__ayrac {
    border-left: 1px solid var(--renk-gri-kenar);
}

.yillik-ozet .yillik-ozet__vurgu {
    font-weight: 700;
}

.yillik-ozet__sifir {
    color: var(--renk-gri-kenar);
}

.yillik-ozet__negatif {
    color: var(--renk-tehlike);
}

.yillik-ozet tr.yillik-ozet__bu-ay td {
    background: #EEF2FF;
}

/* Gelecek aylar yalnızca girilmiş planlı/tekrarlayan kayıtları gösterir. */
.yillik-ozet tr.yillik-ozet__gelecek td {
    color: var(--renk-metin-soluk);
}

.yillik-ozet tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--renk-gri-kenar);
    border-bottom: none;
}

/* Mobil: geniş tablo yerine Ay | Gelir | Gider | Kalan listesi; aya dokununca o ayın ayrıntısı açılır. */
.yillik-ozet-mobil {
    display: none;
}

@media (max-width: 700px) {
    .yillik-ozet-sarici {
        display: none;
    }

    .yillik-ozet-mobil {
        display: block;
        font-size: 13px;
    }
}

.yillik-ozet-mobil__satir {
    display: grid;
    grid-template-columns: 40px 1fr 1fr 1fr 12px;
    gap: 6px;
    align-items: center;
    padding: 10px 6px;
    font-variant-numeric: tabular-nums;
}

.yillik-ozet-mobil__satir > span:not(:first-child) {
    text-align: right;
}

.yillik-ozet-mobil__satir--baslik {
    font-size: 11px;
    font-weight: 700;
    color: var(--renk-metin-soluk);
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.yillik-ozet-mobil__ay > summary {
    list-style: none;
    cursor: pointer;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.yillik-ozet-mobil__ay > summary::-webkit-details-marker {
    display: none;
}

.yillik-ozet-mobil__ay > summary::after {
    content: '›';
    text-align: right;
    color: var(--renk-metin-soluk);
    transition: transform 0.15s;
}

.yillik-ozet-mobil__ay[open] > summary::after {
    transform: rotate(90deg);
}

.yillik-ozet-mobil__ay > summary > span:first-child {
    font-weight: 600;
}

.yillik-ozet-mobil__kalan {
    font-weight: 700;
}

.yillik-ozet-mobil__ay--bu-ay > summary {
    background: #EEF2FF;
    border-radius: 8px;
}

.yillik-ozet-mobil__ay--gelecek > summary {
    color: var(--renk-metin-soluk);
}

.yillik-ozet-mobil__ay--toplam > summary {
    font-weight: 700;
    border-top: 2px solid var(--renk-gri-kenar);
    border-bottom: none;
}

.yillik-ozet-mobil__detay {
    padding: 6px 6px 12px 52px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.yillik-ozet-mobil__grup {
    font-size: 11px;
    font-weight: 700;
    color: var(--renk-metin-soluk);
    margin-top: 6px;
}

.yillik-ozet-mobil__kalem {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.yillik-ozet-mobil__kalem--vurgu {
    font-weight: 700;
}

.yillik-ozet-mobil__bos {
    color: var(--renk-metin-soluk);
    font-size: 12px;
}

/* --- Liste detayı (alışveriş modu) --- */

.liste-tur-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.liste-baslik {
    min-width: 0;
}

.liste-baslik__kunye {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.liste-kart-govde {
    margin-top: 16px;
}

.liste-arac {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 2px;
}

.liste-arama {
    flex: 1;
    min-width: 0;
}

.liste-temizle {
    white-space: nowrap;
    flex-shrink: 0;
}

.liste-tamam-kart {
    margin-top: 16px;
    background: #EAF7EC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.liste-tamam-kart > span {
    color: #1E7B34;
    font-weight: 700;
    font-size: 13px;
}

/* Reyon başlıkları markette kaydırırken görünür kalsın diye yapışkan (Kiler listesindeki aynı desen). */
.liste-grup__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 12px 0 7px;
    background: var(--renk-beyaz);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--renk-metin-ikincil);
}

.liste-grup__baslik span {
    background: var(--renk-gri-zemin);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    letter-spacing: 0;
}

.liste-grup--tamam .liste-grup__baslik {
    color: var(--renk-basari);
}

.liste-maddeler {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-maddeler--bekliyor {
    opacity: 0.55;
    pointer-events: none;
}

.liste-maddeler--bos-arama::after {
    content: "Aramanla eşleşen madde yok.";
    display: block;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: var(--renk-metin-soluk);
}

.liste-madde {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

/* Şablonda tik düğmesi yok; satır başı diğer listelerle aynı hizada dursun. */
.liste-madde--tiksiz {
    padding-left: 2px;
}

.liste-madde:last-child {
    border-bottom: none;
}

/* Dokunma hedefi 44px; görünen daire içerideki kutu. */
.liste-madde__tik {
    width: 44px;
    height: 44px;
    margin-left: -10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.liste-madde__kutu {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--renk-gri-kenar);
    background: var(--renk-beyaz);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.12s, border-color 0.12s;
}

.liste-madde__tik:hover .liste-madde__kutu {
    border-color: var(--renk-mavi);
}

.liste-madde--tamam .liste-madde__kutu {
    background: var(--renk-basari);
    border-color: var(--renk-basari);
    color: var(--renk-beyaz);
}

.liste-madde__govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.liste-madde__ad {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.liste-madde--tamam .liste-madde__ad {
    text-decoration: line-through;
    font-weight: 500;
    color: var(--renk-metin-soluk);
}

.liste-madde__meta {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.liste-madde__gecikmis {
    color: var(--renk-tehlike);
    font-weight: 700;
}

.liste-madde__oncelik {
    color: var(--renk-gider);
    font-weight: 700;
}

.liste-madde__tutar {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.liste-madde--tamam .liste-madde__tutar {
    color: var(--renk-metin-soluk);
}

.liste-madde__aksiyon {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.liste-madde__tasi {
    background: none;
    border: none;
    color: var(--renk-metin-soluk);
    cursor: pointer;
    width: 24px;
    height: 32px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.liste-madde__tasi:hover {
    color: var(--renk-mavi);
}

.liste-modal .form-alan,
.liste-modal .form-satir-2 {
    margin-top: 12px;
}

.ozet-serit__uyari {
    color: var(--renk-tehlike);
    font-weight: 700;
}

.liste-kapanmis {
    margin-top: 24px;
}

.liste-kapanmis > summary {
    cursor: pointer;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--renk-metin-ikincil);
}

.liste-kapanmis .liste-izgara {
    margin-top: 12px;
}

@media (max-width: 560px) {
    /* Dar ekranda satırı kalabalıklaştırmamak için elle sıralama gizleniyor;
       alışveriş listesi zaten reyona göre gruplu geliyor. */
    .liste-madde__tasi {
        display: none;
    }

    .liste-arac {
        flex-wrap: wrap;
    }

    .liste-temizle {
        width: 100%;
    }
}

/* Kiler / Ecza Dolabı → Listeler köprüsü */

.dikkat-cip--listeye {
    border-color: var(--renk-mavi);
    color: var(--renk-mavi-koyu);
    background: #6A92FC14;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dikkat-cip--listeye:hover {
    background: #6A92FC26;
}

.envanter-modal__listeye {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--renk-gri-kenar);
}

.envanter-modal__listeye > label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--renk-metin-ikincil);
    margin-bottom: 7px;
}

.envanter-modal__listeye-satir {
    display: flex;
    gap: 8px;
}

.envanter-modal__listeye-satir select {
    flex: 1;
    min-width: 0;
    padding: 11px 34px 11px 14px;
    font-size: 13px;
}

.envanter-modal__listeye-satir .buton {
    flex-shrink: 0;
}

/* --- Yeni Liste formu --- */

/* Beş seçenekli tür seçici (Listeler); hesap türü seçicisiyle aynı öğe, yalnızca sütun sayısı farklı. */
.tur-secici--bes {
    grid-template-columns: repeat(5, 1fr);
}

.liste-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Türe göre açılıp kapanan alanlar: gizlenenler ızgaradan tamamen çıktığı için
   kalan alanlar boşluk bırakmadan yeniden diziliyor. */
.liste-form-satir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.madde-kurucu {
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-md);
    background: var(--renk-beyaz);
    overflow: hidden;
}

.madde-kurucu__giris {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.madde-kurucu__giris input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 6px 0;
    font-family: inherit;
    font-size: 14px;
    background: none;
}

.madde-kurucu__giris input:focus {
    outline: none;
}

.madde-kurucu__ekle {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--renk-mavi);
    color: var(--renk-beyaz);
    cursor: pointer;
}

.madde-kurucu__ekle:hover {
    background: var(--renk-mavi-koyu);
}

.madde-kurucu__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.madde-kurucu__satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 14px;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.madde-kurucu__satir:last-child {
    border-bottom: none;
}

.madde-kurucu__metin {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.madde-kurucu__sil {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--renk-metin-soluk);
    cursor: pointer;
}

.madde-kurucu__sil:hover {
    color: var(--renk-tehlike);
}

.madde-kurucu__alt {
    padding: 8px 14px;
    background: var(--renk-gri-zemin);
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

@media (max-width: 900px) {
    .tur-secici--bes {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .tur-secici--bes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Takvim: tutar taşıyan gün hücresi, vadeler, projeksiyon --- */

.takvim-izgara > * {
    min-width: 0;
}

.takvim-ozet {
    margin-top: 16px;
}

.takvim-nav__ay {
    font-size: 14px;
    font-weight: 700;
    min-width: 120px;
    text-align: center;
}

.takvim-gun__no {
    font-size: 12px;
    line-height: 1;
    color: var(--renk-metin-soluk);
}

.takvim-gun--secili .takvim-gun__no,
.takvim-gun--secili .takvim-gun__tutar {
    color: var(--renk-beyaz);
}

/* Günün net tutarı: hücre dar olduğu için kısaltılmış (99,4B) ve tek satır. */
.takvim-gun__tutar {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.takvim-gun__tutar--notr {
    color: var(--renk-metin-soluk);
    font-weight: 600;
}

.takvim-gun__vadeler {
    display: flex;
    gap: 3px;
    margin-top: 1px;
}

.takvim-gun__vade {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    display: inline-block;
}

.takvim-legend__kutu {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.takvim-yan {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Vade listesi (seçili gün) --- */

.takvim-vade-liste {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.takvim-vade {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    color: var(--renk-metin);
}

.takvim-vade:hover .takvim-vade__baslik {
    color: var(--renk-mavi-koyu);
}

.takvim-vade--tamam {
    opacity: 0.55;
}

.takvim-vade__ikon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.takvim-vade__govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.takvim-vade__baslik {
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.takvim-vade__alt {
    font-size: 11px;
    color: var(--renk-metin-ikincil);
}

/* --- Gün detayı satırı (artık ilgili kayda gidiyor) --- */

.takvim-gun-detay__ad {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.takvim-gun-detay__ad small {
    font-size: 11px;
    color: var(--renk-metin-ikincil);
}

.takvim-gun-detay__satir:hover .takvim-gun-detay__ad {
    color: var(--renk-mavi-koyu);
}

/* --- Tahmini bakiye --- */

.takvim-projeksiyon__sonuc {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.takvim-projeksiyon__alt {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    margin-top: 4px;
}

.takvim-projeksiyon__satirlar {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--renk-gri-kenar);
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
}

.takvim-projeksiyon__satirlar > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.takvim-projeksiyon__satirlar span {
    color: var(--renk-metin-ikincil);
}

.takvim-ics__aciklama {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    line-height: 1.5;
    margin-bottom: 10px;
}

.takvim-ics__adres {
    width: 100%;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 10px;
}

@media (max-width: 560px) {
    .takvim-gun {
        min-height: 58px;
        gap: 2px;
    }

    .takvim-gun__tutar {
        font-size: 10px;
    }

    .takvim-gunler {
        gap: 4px;
    }

    .takvim-nav__ay {
        min-width: 0;
    }
}

/* --- Onay penceresi (tarayıcının confirm() kutusunun yerine) --- */

.onay-katman {
    display: none;
    position: fixed;
    inset: 0;
    /* .modal-katman 1000'de; bu pencere tekrarlayan kayıt silme penceresinin de üstünde açılıyor. */
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 22, 26, 0.55);
}

.onay-katman.acik {
    display: flex;
}

.onay-kutu {
    width: 100%;
    max-width: 400px;
    background: var(--renk-beyaz);
    border-radius: var(--radius-lg);
    box-shadow: var(--golge-yumusak);
    padding: 26px 24px 22px;
    text-align: center;
    animation: onay-gir .16s ease-out;
}

@keyframes onay-gir {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .onay-kutu { animation: none; }
}

.onay-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    background: rgba(235, 87, 87, 0.12);
    color: var(--renk-tehlike);
    margin-bottom: 14px;
}

.onay-katman--normal .onay-ikon {
    background: rgba(106, 146, 252, 0.14);
    color: var(--renk-mavi);
}

.onay-baslik {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.onay-mesaj {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--renk-metin-ikincil);
}

.onay-butonlar {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.onay-butonlar .buton {
    flex: 1 1 0;
    min-width: 0;
}

.onay-butonlar .buton:focus-visible {
    /* Koyu halka hem beyaz hem kırmızı düğmede okunuyor. */
    outline: 2px solid var(--renk-koyu);
    outline-offset: 2px;
}

.buton--tehlike {
    background: var(--renk-tehlike);
    color: var(--renk-beyaz);
}

@media (max-width: 380px) {
    /* Dar ekranda alt alta; onay düğmesi üstte kalsın. */
    .onay-butonlar { flex-direction: column-reverse; }
}

/* --- Kategori / alt kategori / satıcı detay sayfası --- */

/* Başlık altındaki tek satırlık künye: kapsamın ne olduğunu ve kaç kaydı kapsadığını söylüyor. */
.detay-kunye {
    margin-top: 6px;
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.detay-kunye__rozet {
    display: inline-block;
    background: var(--renk-gri-zemin);
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-weight: 700;
    color: var(--renk-metin);
    margin-right: 6px;
}

.detay-ust-link {
    color: var(--renk-metin-soluk);
    text-decoration: none;
}

.detay-ust-link:hover {
    color: var(--renk-mavi);
}

.detay-ayrac {
    color: var(--renk-metin-soluk);
    margin: 0 2px;
}

/* Aylık seyir tablosu dar bir kartın içinde duruyor; .veri-tablo'nun 640px taban genişliği burada
   yatay kaydırma yaratırdı (aynı düzeltme v0.79.0'da fark tablosunda da yapılmıştı). */
table.seyir-tablo {
    min-width: 0;
}

.seyir-tablo__bos td {
    color: var(--renk-metin-soluk);
}

.seyir-tablo__artis {
    color: var(--renk-gider);
    font-weight: 700;
}

.seyir-tablo__azalis {
    color: var(--renk-basari);
    font-weight: 700;
}

.seyir-tablo__yuzde {
    font-weight: 600;
    opacity: 0.75;
}

/* Uzun listelerin kalanını katlayan ortak açılır blok. */
.tum-kayitlar {
    margin-top: 12px;
}

.tum-kayitlar > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--renk-mavi);
    padding: 6px 0;
}

.tum-kayitlar > summary::marker {
    color: var(--renk-metin-soluk);
}

@media (max-width: 700px) {
    /* Dar ekranda grafik 80px'e kadar basılıyordu; kendi genişliğini koruyup yatay kaydırılıyor
       (aynı çözüm geniş tablolarda da kullanılıyor). */
    .seyir-grafik {
        overflow-x: auto;
    }

    .seyir-grafik svg {
        min-width: 560px;
    }
}

@media (max-width: 560px) {
    /* Telefonda dört sütun sığmıyor; "Kayıt" adedi en az kritik olanı. */
    .seyir-tablo th:nth-child(3),
    .seyir-tablo td:nth-child(3) {
        display: none;
    }

    .seyir-tablo th,
    .seyir-tablo td {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* --- Alt kategori çipleri (Gelir Ekle): ana kategori ikonlu seçicide, altı burada --- */
.alt-kategori-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.alt-cip {
    background: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--renk-metin-ikincil);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.alt-cip:hover {
    border-color: var(--renk-mavi);
    color: var(--renk-mavi);
}

.alt-cip--aktif {
    background: var(--renk-koyu);
    border-color: var(--renk-koyu);
    color: var(--renk-beyaz);
}

/* Alan altındaki küçük açıklama/önizleme satırı (ör. tekrar serisinin bitiş tarihi). */
.form-alan__ipucu {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-ikincil);
}

/* Başarı ekranı: otomatik yönlendirme artık geri sayımlı ve iki seçenekli. */
.basari-ekrani__aksiyonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.basari-ekrani__aksiyonlar .buton {
    flex: 1 1 200px;
    justify-content: center;
}

.basari-ekrani__sayac {
    margin-top: 12px;
    font-size: 12px;
    color: var(--renk-metin-soluk);
    min-height: 18px;
}


/* JS ile gizlenen öğeler: `display` veren herhangi bir sınıf kuralı tarayıcının kendi [hidden] kuralını
   ezdiği için öğeler gizlenmiyordu (işlem listesi süzgeci ve Transfer'in tarih alanı bu yüzden bozulmuştu).
   Dosyanın sonunda, aynı özgüllükteki sınıf kurallarını geçecek şekilde tek bir güvence olarak duruyor. */
/* Anahtar satırının altındaki açıklama (ör. "Ürünleri tek tek gir" → ne olacağını söyleyen satır). */
.anahtar-satir__not {
    margin-top: 3px;
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    line-height: 1.4;
}

/* Gider Ekle kategori seçici — iki adım: ana kategori ızgarası + alt kategori çipleri.
   Tek bir 34 satırlık açılır liste yerine, her kategori kendi rengiyle görünüyor. */
.kat-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 6px;
}

.kat-ogo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 5px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--renk-metin);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kat-ogo:hover {
    border-color: var(--kat-renk, var(--renk-mavi));
}

.kat-ogo--aktif {
    border-color: var(--kat-renk, var(--renk-mavi));
    box-shadow: 0 0 0 1px var(--kat-renk, var(--renk-mavi)) inset;
}

.kat-ogo__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--kat-renk, #6A92FC) 14%, #fff);
    color: var(--kat-renk, var(--renk-mavi));
}

.kat-ogo--aktif .kat-ogo__ikon {
    background: var(--kat-renk, var(--renk-mavi));
    color: #fff;
}

/* Kategori seçilmeden gönderilmeye çalışılırsa ızgara kısaca vurgulanıyor. */
.kat-izgara--uyari .kat-ogo {
    border-color: var(--renk-hata);
}

/* 2. adım: seçilen kategorinin renginde bir alan. */
.kat-alt {
    margin-top: 12px;
    padding: 12px 14px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--kat-renk, #6A92FC) 32%, var(--renk-gri-kenar));
    background: color-mix(in srgb, var(--kat-renk, #6A92FC) 5%, #fff);
}

.kat-alt__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.kat-alt__baslik strong {
    color: var(--renk-metin);
    font-weight: 700;
}

.kat-alt__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--kat-renk, var(--renk-mavi));
    color: #fff;
}

.kat-alt__ikon svg {
    width: 13px;
    height: 13px;
}

.kat-alt__cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kat-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--renk-metin);
}

.kat-cip:hover {
    border-color: var(--kat-renk, var(--renk-mavi));
    color: var(--kat-renk, var(--renk-mavi));
}

.kat-cip--aktif,
.kat-cip--aktif:hover {
    background: var(--kat-renk, var(--renk-mavi));
    border-color: var(--kat-renk, var(--renk-mavi));
    color: #fff;
}

.kat-cip__adet {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.55;
}

@media (max-width: 420px) {
    .kat-izgara {
        grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    }

    .kat-ogo {
        font-size: 10px;
        padding: 9px 3px;
    }
}

/* Araç sayfası alt sırası: Diğer Giderler + Garaj yan yana. Garaj katlanmış olduğu için kısa
   kalıyor, bu yüzden ızgara hücreleri gerilmiyor (align-items: start). */
.arac-alt-kartlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
}

@media (max-width: 900px) {
    .arac-alt-kartlar {
        grid-template-columns: 1fr;
    }
}

/* Uzun tabloların katlanan bölümünü açan düğme (Araç sayfası aylık döküm / yakıt geçmişi). */
.tablo-daha {
    display: block;
    width: 100%;
    margin-top: 12px;
    font-size: 13px;
}

/* Garaj kartı: günlük bir ekran değil, ara sıra girilen bir yönetim bölümü — katlanmış duruyor. */
.garaj-katlama > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    font-weight: 800;
    color: var(--renk-metin);
}

.garaj-katlama > summary::-webkit-details-marker {
    display: none;
}

.garaj-katlama__baslik > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.garaj-katlama__sayi {
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-ikincil);
}

.garaj-katlama[open] > summary {
    margin-bottom: 14px;
}

/* --- Bildirim zili, rozeti ve paneli (v0.89.0) --- */

.bildirim-kabuk {
    position: relative;
}

/* Rozet yalnızca ilgilenilmesi gereken bir şey varken basılıyor; sıfırken markup'ta hiç yok. */
.bildirim-rozet {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--renk-tehlike);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--renk-gri-zemin);
}

.bildirim-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 380px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    background: var(--renk-beyaz);
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(20, 22, 26, 0.14);
    overflow: hidden;
}

.bildirim-panel__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 14px;
}

.bildirim-panel__ust button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-mavi);
}

.bildirim-panel__ust button:hover {
    text-decoration: underline;
}

/* Panel tarama için: uzun listede kaydırılıyor, satırlar sabit yükseklikte kalıyor. */
.bildirim-panel__liste {
    max-height: min(420px, 60vh);
    overflow-y: auto;
}

.bildirim-satir {
    display: flex;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
}

.bildirim-satir:last-child {
    border-bottom: 0;
}

.bildirim-satir:hover {
    background: var(--renk-gri-zemin);
}

/* Aciliyet sol kenar çizgisiyle veriliyor ama tek başına renge bırakılmıyor —
   her satırda ayrıca yazılı etiket var (WCAG 1.4.1). */
.bildirim-satir--gecikmis { border-left-color: var(--renk-tehlike); }
.bildirim-satir--yaklasan { border-left-color: var(--renk-gider); }
.bildirim-satir--bilgi    { border-left-color: var(--renk-gri-kenar); }

.bildirim-satir--okundu {
    opacity: 0.55;
}

.bildirim-satir__ikon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--renk-gri-zemin);
    color: var(--renk-metin-ikincil);
}

.bildirim-satir__govde {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bildirim-satir__baslik {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.bildirim-satir__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.bildirim-etiket {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bildirim-etiket--gecikmis { background: rgba(235, 87, 87, 0.12); color: #B3342F; }
.bildirim-etiket--yaklasan { background: rgba(242, 153, 74, 0.16); color: #8A5116; }
.bildirim-etiket--bilgi    { background: var(--renk-gri-zemin); color: var(--renk-metin-ikincil); }

.bildirim-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--renk-metin-ikincil);
}

.bildirim-bos svg {
    color: var(--renk-basari);
}

/* Telefonda açılır panel dar kalıyor: alttan tam genişlikte bir tabaka olarak açılıyor
   (Kiler'in hızlı eylem penceresiyle aynı desen). Tabaka alt navigasyonun ÜSTÜNDE duruyor —
   üstünü kapatsa hem gezinme bloke olur hem son satırlar navigasyonun altında kalırdı. */
@media (max-width: 600px) {
    .bildirim-panel {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: calc(var(--mobil-alt-nav-yukseklik) + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .bildirim-panel__liste {
        max-height: 55vh;
    }
}

/* --- Planlı ödeme projeksiyonu: Hesaplar listesi + hesap detayı (v0.90.0) --- */

.hesap-satir__alt--uyari {
    color: var(--renk-tehlike);
    font-weight: 600;
}

/* Üstündeki özet bloğuyla bitişmesin — altındaki İşlem Geçmişi ile aynı ayrım. */
.planli-kart {
    margin-top: 24px;
}

.planli-kart__not {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
}

.planli-basliklar,
.planli-satir {
    display: grid;
    grid-template-columns: 92px 1fr 120px 140px;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
}

.planli-basliklar {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--renk-metin-ikincil);
}

.planli-basliklar span:nth-child(3),
.planli-basliklar span:nth-child(4),
.planli-satir__tutar,
.planli-satir__bakiye {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.planli-satir {
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 13px;
}

.planli-satir:last-child {
    border-bottom: 0;
}

.planli-satir__tarih {
    color: var(--renk-metin-ikincil);
    font-variant-numeric: tabular-nums;
}

.planli-satir__ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planli-satir__bakiye {
    font-weight: 600;
}

/* Eksiye düşen satır yalnızca renkle değil, yazılı "eksi" rozetiyle de işaretleniyor (WCAG 1.4.1). */
.planli-satir--eksi .planli-satir__bakiye {
    color: var(--renk-tehlike);
}

.planli-satir__uyari {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(235, 87, 87, 0.12);
    color: #B3342F;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.planli-bos {
    padding: 14px 0;
    font-size: 13px;
    color: var(--renk-metin-ikincil);
}

@media (max-width: 700px) {
    .planli-basliklar {
        display: none;
    }

    .planli-satir {
        grid-template-columns: 1fr auto;
        gap: 2px 10px;
        padding: 11px 0;
    }

    .planli-satir__tarih { order: 1; font-size: 12px; }
    .planli-satir__tutar { order: 2; }
    .planli-satir__ad    { order: 3; }
    .planli-satir__bakiye { order: 4; font-size: 12px; }
}


/* Düzenleme formlarında kapsam seçimi (yalnızca bu kayıt / bu ve sonrakiler). */
.kapsam-secenek {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid var(--renk-gri-kenar);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

.kapsam-secenek:has(input:checked) {
    border-color: var(--renk-mavi);
    background: rgba(106, 146, 252, 0.06);
}

.kapsam-secenek input {
    width: auto;
    margin: 0;
    accent-color: var(--renk-mavi);
}


/* Gelir/Gider listesinde satır başına düzenleme düğmesi (silme düğmesinin eşi). */
.gelir-listesi__duzenle {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    color: var(--renk-metin-soluk);
    line-height: 0;
}

.gelir-listesi__duzenle:hover {
    color: var(--renk-mavi);
}

/* --- Yaklaşan Ödemeler (v0.94.0) --- */

.yaklasan-liste {
    margin-top: 16px;
}

/* Ay grupları arasına nefes payı: yapışkan başlık bir önceki ayın son satırına yapışmasın. */
.yaklasan-ay + .yaklasan-ay {
    margin-top: 22px;
}

/* Ay başlıkları yapışkan: uzun listede hangi ayda olduğun kaybolmuyor (Kiler/Değişiklik Geçmişi deseni). */
.yaklasan-ay__baslik {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--renk-beyaz);
    padding: 10px 72px 8px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--renk-metin-ikincil);
}

.yaklasan-ay__toplam {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--renk-metin-soluk);
}

.yaklasan-ay__toplam strong {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Satır sütunlu: ikon / kalem / durum / hesap / işlemi yapan / tutar / sonrasında bakiye.
   Başlık satırı ile kayıt satırları aynı ızgara tanımını paylaşıyor, böylece sütunlar hizalı kalıyor. */
.yaklasan-basliklar,
.yaklasan-satir {
    display: grid;
    grid-template-columns: 46px 40px minmax(0, 1fr) 100px minmax(0, 150px) 88px 112px 58px;
    align-items: center;
    gap: 14px;
}

.yaklasan-basliklar {
    padding: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--renk-metin-ikincil);
}

.yaklasan-basliklar > span:nth-child(7) {
    text-align: right;
}

.yaklasan-satir {
    padding: 11px 0;
    border-bottom: 1px solid var(--renk-gri-kenar);
}

.yaklasan-satir:last-child {
    border-bottom: none;
}

.yaklasan-satir:hover {
    background: var(--renk-gri-zemin);
}

.yaklasan-satir__gun {
    font-size: 12px;
    font-weight: 700;
    color: var(--renk-metin-ikincil);
    font-variant-numeric: tabular-nums;
}

.yaklasan-satir__ikon {
    display: flex;
}

.yaklasan-satir__ad {
    min-width: 0;
}

.yaklasan-satir__baslik {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yaklasan-satir__baslik:hover {
    color: var(--renk-mavi);
}

.yaklasan-satir__islem {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.yaklasan-satir__ad small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Masaüstünde üç orta sütun doğrudan dış ızgaraya katılıyor; dar ekranda tek meta satırına iniyor. */
.yaklasan-satir__orta {
    display: contents;
}

.yaklasan-satir__rozet {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.yaklasan-satir__hesap,
.yaklasan-satir__kisi {
    font-size: 12px;
    color: var(--renk-metin-ikincil);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yaklasan-satir__tutar {
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Vadesi geçtiği hâlde hâlâ işlenmemiş kalem — renge ek olarak satırda "gecikmiş" rozeti de var. */
.yaklasan-satir--gecikmis .yaklasan-satir__gun {
    color: var(--renk-tehlike);
}

.islem-rozet--uyari {
    color: var(--renk-tehlike);
    background: rgba(235, 87, 87, 0.14);
}

.yaklasan-bos {
    padding: 22px 0;
    text-align: center;
    font-size: 14px;
    color: var(--renk-metin-ikincil);
}

/* Orta genişlikte önce "işlemi yapan" sütunu düşüyor: hesap adı zaten sahibini büyük ölçüde belli ediyor. */
@media (max-width: 1150px) {
    .yaklasan-basliklar,
    .yaklasan-satir {
        grid-template-columns: 46px 40px minmax(0, 1fr) 96px minmax(0, 140px) 112px 58px;
    }

    .yaklasan-basliklar__kisi,
    .yaklasan-satir__kisi {
        display: none;
    }

    .yaklasan-basliklar > span:nth-child(7) {
        text-align: right;
    }
}

/* Telefon: iki satırlık düzen — üstte kalem ve tutar, altında durum/hesap ve sonrasında bakiye. */
@media (max-width: 760px) {
    .yaklasan-basliklar {
        display: none;
    }

    .yaklasan-ay__baslik {
        padding-right: 38px;
    }

    .yaklasan-satir {
        grid-template-columns: 46px 40px minmax(0, 1fr) auto 28px;
        grid-template-areas:
            "gun ikon ad tutar islem"
            "gun ikon meta meta islem";
        column-gap: 10px;
        row-gap: 4px;
    }

    .yaklasan-satir__gun {
        grid-area: gun;
    }

    .yaklasan-satir__ikon {
        grid-area: ikon;
    }

    .yaklasan-satir__ad {
        grid-area: ad;
    }

    .yaklasan-satir__ad small {
        display: none;
    }

    /* Ad sütunu telefonda dar; başlık tek satırda kesilmek yerine en fazla iki satıra sarıyor. */
    .yaklasan-satir__baslik {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
    }

    .yaklasan-satir__tutar {
        grid-area: tutar;
    }

    /* Dar ekranda ad sütununu yemesin diye ikonlar alt alta. */
    .yaklasan-satir__islem {
        grid-area: islem;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }

    .yaklasan-satir__orta {
        grid-area: meta;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .yaklasan-satir__kisi {
        display: inline;
    }
}

/* Beş kalemli özet şeridi (Araç sayfası) 760px altında sıkışıyor — telefon düzenine biraz
   daha erken geçiyor. Üç kalemli şeritler eskisi gibi 560px'e kadar satırda kalıyor. */
@media (max-width: 760px) {
    .ozet-serit--coklu {
        flex-direction: column;
    }

    .ozet-serit--coklu .ozet-serit__oge {
        border-left: 0;
        padding: 0;
    }

    .ozet-serit--coklu .ozet-serit__oge + .ozet-serit__oge {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--renk-gri-kenar);
    }
}

[hidden] {
    display: none;
}