/* =============================================================================
   Finans Yönetimi — Ana Stil Dosyası (Sphere / yeşil tema)
   Modern, sade ve mobil uyumlu (responsive) arayüz.
   ========================================================================== */

:root {
    --renk-ana: #34a45c;         /* ana yeşil */
    --renk-ana-koyu: #2b8c4d;
    --renk-ana-acik: #e9f6ef;    /* açık yeşil (aktif menü, ikon kutusu) */
    --renk-yesil: #16a34a;
    --renk-kirmizi: #e5484d;
    --renk-kirmizi-acik: #fdecec;
    --renk-turuncu: #f5a524;
    --renk-turuncu-acik: #fef6e7;
    --renk-mavi-acik: #eaf2fe;
    --renk-gri: #64748b;
    --zemin: #f4f6f8;
    --kart: #ffffff;
    --metin: #1f2937;
    --metin-acik: #6b7280;
    --kenar: #edf0f3;
    --golge: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
    --golge-buyuk: 0 8px 24px rgba(16,24,40,.08);
    --yaricap: 16px;
    --yaricap-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--zemin);
    color: var(--metin);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--renk-ana); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------------------- YERLEŞİM -------------------- */
.uygulama { display: flex; min-height: 100vh; }

.yan-menu {
    width: 256px;
    background: var(--kart);
    color: var(--metin);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    border-right: 1px solid var(--kenar);
    transition: transform .25s ease;
}
.yan-menu .logo {
    padding: 22px 20px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff;
    background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu));
}
.yan-menu nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.yan-menu nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 3px;
    color: #475467;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--yaricap-sm);
    transition: background .15s, color .15s;
}
.yan-menu nav a:hover { background: #f6f8fa; color: var(--metin); text-decoration: none; }
.yan-menu nav a.aktif {
    background: var(--renk-ana-acik);
    color: var(--renk-ana-koyu);
    font-weight: 600;
}
.menu-ayrac { padding: 14px 14px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; }
.menu-alt { padding: 14px; border-top: 1px solid var(--kenar); }
.menu-alt .kullanici { font-size: 13px; margin-bottom: 10px; color: var(--metin-acik); display: flex; align-items: center; gap: 8px; }
.cikis-btn {
    display: block; text-align: center; color: var(--renk-kirmizi);
    font-size: 13px; font-weight: 600; padding: 9px; border-radius: var(--yaricap-sm);
    background: var(--renk-kirmizi-acik);
}
.cikis-btn:hover { text-decoration: none; opacity: .85; }

.icerik { flex: 1; margin-left: 256px; min-width: 0; }

.ust-bar {
    background: var(--kart);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--kenar);
    position: sticky; top: 0; z-index: 50;
}
.ust-bar h1 { font-size: 20px; font-weight: 700; flex: 1; }
.menu-ac {
    display: none; background: var(--renk-ana); color: #fff; border: none;
    width: 40px; height: 40px; border-radius: var(--yaricap-sm); font-size: 20px; cursor: pointer;
}
.ust-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu));
    color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.icerik-govde { padding: 28px; }

/* -------------------- ÖZET KARTLAR -------------------- */
.kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}
.kart-ozet {
    background: var(--kart);
    border-radius: var(--yaricap);
    padding: 20px;
    box-shadow: var(--golge);
    border: 1px solid var(--kenar);
    display: flex;
    align-items: center;
    gap: 14px;
}
.kart-ikon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: var(--renk-ana-acik);
}
.kart-ozet .baslik { font-size: 13px; color: var(--metin-acik); margin-bottom: 4px; }
.kart-ozet .deger { font-size: 23px; font-weight: 800; line-height: 1.1; }
.kart-ozet.kirmizi .kart-ikon { background: var(--renk-kirmizi-acik); }
.kart-ozet.kirmizi .deger { color: var(--renk-kirmizi); }
.kart-ozet.yesil .kart-ikon { background: var(--renk-ana-acik); }
.kart-ozet.yesil .deger { color: var(--renk-yesil); }
.kart-ozet.turuncu .kart-ikon { background: var(--renk-turuncu-acik); }
.kart-ozet.turuncu .deger { color: #d98a06; }
.kart-ozet.mavi .kart-ikon { background: var(--renk-mavi-acik); }
.kart-ozet.mavi .deger { color: #1d4ed8; }
.kart-ozet.mor .kart-ikon { background: #f3e8ff; }
.kart-ozet.mor .deger { color: #7c3aed; }

/* -------------------- KUTU / PANEL -------------------- */
.kutu {
    background: var(--kart);
    border-radius: var(--yaricap);
    box-shadow: var(--golge);
    border: 1px solid var(--kenar);
    margin-bottom: 24px;
    overflow: hidden;
}
.kutu-baslik {
    padding: 18px 22px;
    border-bottom: 1px solid var(--kenar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.kutu-baslik h2 { font-size: 16px; font-weight: 700; }
.kutu-govde { padding: 22px; }
.kutu-govde.sifir-dolgu { padding: 0; }

/* -------------------- TABLO -------------------- */
.tablo-sar { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--kenar); white-space: nowrap; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--metin-acik); background: #fafbfc; font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
td.tutar, th.tutar { text-align: right; font-variant-numeric: tabular-nums; }
.satir-gecikti { background: var(--renk-kirmizi-acik); }
.satir-gecikti:hover { background: #fbe0e1; }
.secili-satir { background: var(--renk-ana-acik) !important; box-shadow: inset 3px 0 0 var(--renk-ana); }

/* Ödemeler yandan detay paneli */
.odeme-panel { position: sticky; top: 88px; }
@media (max-width: 1000px) { .pano-split { grid-template-columns: 1fr !important; } .odeme-panel { position: static; } }
.detay-blok { background: #f7f9f8; border: 1px solid var(--kenar); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.detay-blok-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.btn-ikon-sil { border: none; background: transparent; color: var(--renk-kirmizi); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.btn-ikon-sil:hover { color: #a00; }
/* Ödenmiş taksit satırı: No / Vade / Tutar üstü çizili ve soluk */
.taksit-odendi td:nth-child(2),
.taksit-odendi td:nth-child(3),
.taksit-odendi td:nth-child(4) { text-decoration: line-through; color: var(--metin-acik); }
/* Aylık faturalar: en fazla ~6 satır, kendi içinde dikey kaydırma + sabit başlık */
.fatura-kaydir { max-height: 25rem; overflow-y: auto; }
.fatura-kaydir thead th { position: sticky; top: 0; background: #fff; z-index: 2; }

/* -------------------- ROZETLER -------------------- */
.rozet {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.rozet-bekliyor { background: var(--renk-mavi-acik); color: #1d4ed8; }
.rozet-yaklasiyor { background: var(--renk-turuncu-acik); color: #b45309; }
.rozet-gecikti { background: var(--renk-kirmizi-acik); color: #b42318; }
.rozet-tamamlandi { background: var(--renk-ana-acik); color: var(--renk-ana-koyu); }
.etiket { display:inline-block; padding:3px 9px; border-radius:6px; font-size:12px; background:#f0f4f8; color:#475467; font-weight:500; }

/* -------------------- BUTONLAR -------------------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: var(--renk-ana);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, opacity .15s;
}
.btn:hover { background: var(--renk-ana-koyu); text-decoration: none; color:#fff; }
.btn-kucuk { padding: 6px 13px; font-size: 13px; }
.btn-yesil { background: var(--renk-yesil); }
.btn-yesil:hover { background: #15803d; }
.btn-kirmizi { background: var(--renk-kirmizi); }
.btn-kirmizi:hover { background: #c93a3f; }
.btn-gri { background: #eef1f4; color: var(--metin); }
.btn-gri:hover { background: #e2e7ec; color: var(--metin); }
.btn-cizgi { background:#fff; border:1px solid var(--kenar); color:var(--metin); }
.btn-cizgi:hover { background:#f6f8fa; color:var(--metin); }

/* -------------------- FORM -------------------- */
.form-grup { margin-bottom: 16px; }
.form-grup label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input, select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #dfe4ea;
    border-radius: var(--yaricap-sm);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--metin);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--renk-ana); box-shadow: 0 0 0 3px rgba(52,164,92,.14); }
textarea { resize: vertical; min-height: 70px; }
.form-ipucu { font-size: 12px; color: var(--metin-acik); margin-top: 4px; }

/* Arama kutusu (üst bar) */
.arama-kutu { position: relative; flex: 1; max-width: 380px; }
.arama-kutu input { padding-left: 38px; border-radius: 999px; background: #f6f8fa; border-color: transparent; }
.arama-kutu::before { content: "🔍"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .5; }

/* -------------------- UYARILAR -------------------- */
.uyari { padding: 13px 16px; border-radius: var(--yaricap-sm); margin-bottom: 16px; font-size: 14px; }
.uyari-basari { background: var(--renk-ana-acik); color: var(--renk-ana-koyu); }
.uyari-hata { background: var(--renk-kirmizi-acik); color: #b42318; }
.uyari-bilgi { background: var(--renk-mavi-acik); color: #1e40af; }
.uyari-buyuk-kirmizi {
    background: var(--renk-kirmizi-acik); color: #b42318; border: 1px solid #f5c2c3;
    padding: 18px; border-radius: var(--yaricap); margin-bottom: 24px; font-weight: 600;
}

/* -------------------- ARAÇ ÇUBUĞU / FİLTRE -------------------- */
.arac-cubugu { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 22px; }
.arac-cubugu .form-grup { margin-bottom: 0; }
.arac-cubugu input, .arac-cubugu select { min-width: 150px; width: auto; }
.sekmeler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.sekmeler a { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--kenar); font-size: 14px; font-weight: 500; color: var(--metin); }
.sekmeler a.aktif { background: var(--renk-ana); color: #fff; border-color: var(--renk-ana); }
.sekmeler a:hover { text-decoration: none; }

/* "Tamamlananları göster" gibi filtre anahtarı (chip) */
.tamam-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px;
    border: 1px solid var(--kenar); border-radius: 999px; background: #fff;
    cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; user-select: none;
}
.tamam-toggle:hover { background: #f6f8fa; }
.tamam-toggle input { width: auto; margin: 0; accent-color: var(--renk-ana); }
.tamam-toggle.acik { background: var(--renk-ana-acik); border-color: var(--renk-ana); color: var(--renk-ana-koyu); }

/* -------------------- MODAL -------------------- */
.modal-arkaplan {
    display: none; position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 200;
}
.modal-arkaplan.acik { display: block; }
.modal {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: #fff; border-radius: var(--yaricap); width: 92%; max-width: 560px;
    max-height: 90vh; overflow-y: auto; z-index: 210; box-shadow: var(--golge-buyuk);
}
.modal.acik { display: block; }
.modal-baslik { padding: 18px 22px; border-bottom: 1px solid var(--kenar); font-weight: 700; font-size: 17px; display:flex; justify-content:space-between; align-items:center; }
.modal-kapat { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--metin-acik); width:auto; }
.modal-govde { padding: 22px; }
.modal-alt { padding: 16px 22px; border-top: 1px solid var(--kenar); display: flex; justify-content: flex-end; gap: 10px; }

/* -------------------- DETAY (2 kolon) -------------------- */
.detay-izgara { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .detay-izgara { grid-template-columns: 1fr; } }
.bilgi-satir { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--kenar); font-size: 14px; }
.bilgi-satir:last-child { border-bottom: none; }
.bilgi-satir .etiket-ad { color: var(--metin-acik); }
.bilgi-satir .deger-ad { font-weight: 600; text-align: right; }
.firma-logo { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg,var(--renk-ana),var(--renk-ana-koyu)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; flex:0 0 auto; }
.dort-kutu { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.mini-kutu { border:1px solid var(--kenar); border-radius:12px; padding:14px; }
.mini-kutu .ust { font-size:12px; color:var(--metin-acik); margin-bottom:4px; }
.mini-kutu .alt { font-weight:700; }
.zaman-akis { position:relative; }
.zaman-oge { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--kenar); }
.zaman-oge:last-child { border-bottom:none; }
.zaman-ikon { width:34px;height:34px;border-radius:50%;background:var(--renk-ana-acik);display:flex;align-items:center;justify-content:center;flex:0 0 auto; }

/* -------------------- GRAFİK -------------------- */
.grafik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.grafik-kutu { background: var(--kart); border-radius: var(--yaricap); box-shadow: var(--golge); border: 1px solid var(--kenar); padding: 22px; }
.grafik-kutu h2 { font-size: 16px; margin-bottom: 18px; }
.grafik-kutu canvas { max-height: 320px; }

/* -------------------- YARDIMCI -------------------- */
.metin-kirmizi { color: var(--renk-kirmizi); }
.metin-yesil { color: var(--renk-yesil); }
.metin-turuncu { color: #d98a06; }
.metin-gri { color: var(--metin-acik); }
.kucuk { font-size: 13px; }
.sag { text-align: right; }
.orta { text-align: center; }
.bos-durum { text-align: center; padding: 44px 20px; color: var(--metin-acik); }
.gizli { display: none !important; }
.kalin { font-weight: 700; }
.mt { margin-top: 16px; }
.progress { background:#eaeef2; border-radius:999px; height:6px; overflow:hidden; min-width:90px; }
.progress > span { display:block; height:100%; background:var(--renk-ana); }

/* -------------------- MOBİL -------------------- */
@media (max-width: 1100px) {
    .pano-orta { grid-template-columns: 1fr !important; }
    .pano-alt { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
    .yan-menu { transform: translateX(-100%); box-shadow: var(--golge-buyuk); }
    .yan-menu.acik { transform: translateX(0); }
    .icerik { margin-left: 0; }
    .menu-ac { display: block; }
    .form-satir { grid-template-columns: 1fr; }
    .arama-kutu { display: none; }
    th, td { padding: 11px 13px; }
    .icerik-govde { padding: 18px; }
}

/* -------------------- GİRİŞ SAYFASI -------------------- */
.giris-sayfa { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #2b8c4d, #34a45c); padding: 20px; }
.giris-kutu { background: #fff; border-radius: 20px; padding: 34px; width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(16,24,40,.25); }
.giris-kutu h1 { text-align: center; font-size: 22px; margin-bottom: 4px; }
.giris-kutu .alt { text-align: center; color: var(--metin-acik); font-size: 14px; margin-bottom: 24px; }
.hatirla-satir { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.hatirla-satir input { width: auto; }
.hatirla-satir label { margin: 0; font-weight: 400; }

/* -------------------- YAZDIRMA -------------------- */
@media print {
    .yan-menu, .ust-bar, .arac-cubugu, .btn, .sekmeler, .menu-ac { display: none !important; }
    .icerik { margin-left: 0; }
    .icerik-govde { padding: 0; }
    .kutu { box-shadow: none; border: 1px solid #ccc; }
    body { background: #fff; }
}