/* =====================================================================
   BURAK ÖZCAN GYM CENTER — Salon Yönetim Paneli
   Ana CSS — v2 (Stripe/Vercel tarzı, mobil hamburger desteği)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
    --siyah-001: #0D0D0D;
    --siyah-002: #161616;
    --siyah-003: #1F1F1F;
    --siyah-004: #2A2A2A;
    --siyah-005: #3A3A3A;
    --lime: #A8C800;
    --lime-koyu: #8FAB00;
    --lime-acik: #C5E63F;
    --beyaz: #FFFFFF;
    --gri-001: #FAFAFA;
    --gri-002: #F0F0F0;
    --gri-003: #E5E5E5;
    --gri-004: #BBBBBB;
    --gri-005: #888888;
    --gri-006: #555555;
    --gri-007: #333333;

    --basari: #16A34A;
    --basari-bg: #ECFDF5;
    --uyari: #F59E0B;
    --uyari-bg: #FFFBEB;
    --hata: #DC2626;
    --hata-bg: #FEF2F2;
    --bilgi: #0EA5E9;
    --bilgi-bg: #EFF6FF;

    --kenar-yuvarlama: 10px;
    --kenar-yuvarlama-buyuk: 14px;
    --golge-001: 0 1px 2px rgba(0,0,0,0.04);
    --golge-002: 0 2px 8px rgba(0,0,0,0.06);
    --golge-003: 0 8px 24px rgba(0,0,0,0.10);
    --golge-drawer: 8px 0 32px rgba(0,0,0,0.25);

    --gecis: all 0.18s ease;

    --kenar-genislik: 240px;
}

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

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gri-001);
    color: var(--siyah-001);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--siyah-001); text-decoration: none; }
a:hover { color: var(--lime-koyu); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.2px; }

/* =====================================================================
   ANA YAPILAR
   ===================================================================== */

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

/* SIDEBAR */
.kenar-cubuk {
    width: var(--kenar-genislik);
    background: var(--siyah-001);
    color: var(--beyaz);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: transform 0.25s ease;
}

.kenar-cubuk-baslik {
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--siyah-003);
    display: flex; align-items: center; gap: 10px;
    position: relative;
}
.kenar-cubuk-baslik .logo-amblem {
    width: 34px; height: 34px;
    background: var(--lime);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--siyah-001);
    font-weight: 700;
    font-size: 17px;
}
.kenar-cubuk-baslik .marka-adi {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.1px;
}
.kenar-cubuk-baslik .marka-alt {
    font-size: 10px;
    color: var(--gri-005);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3px;
    font-weight: 500;
}

.kenar-cubuk-kapat {
    display: none;
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--siyah-003);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    color: var(--beyaz);
}
.kenar-cubuk-kapat:hover { background: var(--siyah-004); }

.kenar-cubuk-menu {
    flex: 1;
    padding: 8px 0 16px;
    overflow-y: auto;
}
.kenar-cubuk-menu::-webkit-scrollbar { width: 4px; }
.kenar-cubuk-menu::-webkit-scrollbar-thumb { background: var(--siyah-004); border-radius: 4px; }

.kenar-cubuk-bolum-baslik {
    padding: 14px 18px 5px;
    font-size: 10px;
    color: var(--gri-005);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.kenar-cubuk-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 18px;
    color: #BBB;
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: var(--gecis);
}
.kenar-cubuk-link:hover {
    background: var(--siyah-003);
    color: var(--beyaz);
}
.kenar-cubuk-link.aktif {
    background: var(--siyah-003);
    color: var(--lime);
    border-left-color: var(--lime);
}
.kenar-cubuk-link svg, .kenar-cubuk-link .ikon {
    width: 16px; height: 16px;
    flex-shrink: 0;
}

.kenar-cubuk-alt {
    padding: 14px 18px;
    border-top: 1px solid var(--siyah-003);
    display: flex; align-items: center; gap: 10px;
}
.kenar-cubuk-alt .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--siyah-001);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 12px;
}
.kenar-cubuk-alt .ad { font-size: 12px; font-weight: 600; }
.kenar-cubuk-alt .rol { font-size: 10px; color: var(--gri-005); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }

/* Drawer overlay (mobile) */
.kenar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.kenar-overlay.acik { display: block; opacity: 1; }

/* CONTENT */
.icerik-alani {
    margin-left: var(--kenar-genislik);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Top bar */
.ust-cubuk {
    background: var(--beyaz);
    border-bottom: 1px solid var(--gri-003);
    padding: 11px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.ust-cubuk-sol {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.menu-buton {
    display: none;
    width: 36px; height: 36px;
    background: var(--gri-001);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    color: var(--siyah-001);
    flex-shrink: 0;
}
.menu-buton:hover { background: var(--gri-002); }

.ust-cubuk-baslik h1 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 0;
}
.ust-cubuk-baslik .alt-yazi {
    font-size: 12px;
    color: var(--gri-005);
    margin-top: 1px;
}

/* Global arama */
.ust-arama {
    flex: 1;
    max-width: 360px;
    position: relative;
    display: none;
}
.ust-arama svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gri-005);
    pointer-events: none;
}
.ust-arama input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    font-size: 13px;
    border: 1px solid var(--gri-003);
    border-radius: 8px;
    background: var(--gri-001);
    transition: var(--gecis);
}
.ust-arama input:focus {
    outline: none;
    background: var(--beyaz);
    border-color: var(--siyah-001);
    box-shadow: 0 0 0 3px rgba(168,200,0,0.12);
}

.ust-cubuk-sag { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.bildirim-buton {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--gri-001);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    color: var(--siyah-001);
    transition: var(--gecis);
}
.bildirim-buton:hover { background: var(--gri-002); }
.bildirim-buton .nokta {
    position: absolute; top: 7px; right: 8px;
    width: 7px; height: 7px;
    background: var(--hata);
    border: 2px solid var(--gri-001);
    border-radius: 50%;
}

.kullanici-rozet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--gri-003);
    border-radius: 99px;
    background: var(--beyaz);
    transition: var(--gecis);
}
.kullanici-rozet:hover { border-color: var(--siyah-001); }
.kullanici-rozet .avatar-mini {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--siyah-001);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 600;
}
.kullanici-rozet .ad-mini {
    font-size: 12px;
    font-weight: 500;
}
.kullanici-rozet .ad-mini-rol {
    font-size: 10px;
    color: var(--gri-005);
    margin-left: 2px;
}

/* Sayfa içerik */
.sayfa-icerik {
    padding: 24px;
    flex: 1;
}

/* =====================================================================
   KARTLAR
   ===================================================================== */

.kart {
    background: var(--beyaz);
    border-radius: var(--kenar-yuvarlama);
    border: 1px solid var(--gri-003);
    box-shadow: var(--golge-001);
    overflow: hidden;
}
.kart-baslik {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gri-003);
    display: flex; align-items: center; justify-content: space-between;
}
.kart-baslik h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
}
.kart-baslik .alt {
    font-size: 12px;
    color: var(--gri-005);
    margin-top: 2px;
}
.kart-govde { padding: 20px; }

/* =====================================================================
   KPI KARTLAR (yeni stil — ikonlu, trendli)
   ===================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kpi-kart {
    background: var(--beyaz);
    border: 1px solid var(--gri-003);
    border-radius: var(--kenar-yuvarlama);
    padding: 16px;
    transition: var(--gecis);
    position: relative;
}
.kpi-kart:hover {
    border-color: var(--gri-004);
    box-shadow: var(--golge-002);
}

.kpi-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.kpi-ikon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-ikon.bilgi  { background: #E6F1FB; color: #185FA5; }
.kpi-ikon.basari { background: #EAF3DE; color: #3B6D11; }
.kpi-ikon.uyari  { background: #FAEEDA; color: #854F0B; }
.kpi-ikon.hata   { background: #FCEBEB; color: #A32D2D; }
.kpi-ikon.mor    { background: #EEEDFE; color: #534AB7; }
.kpi-ikon.lime   { background: rgba(168,200,0,0.15); color: var(--lime-koyu); }

.kpi-trend {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.kpi-trend.yukari { background: var(--basari-bg); color: var(--basari); }
.kpi-trend.asagi  { background: var(--hata-bg); color: var(--hata); }
.kpi-trend.notr   { background: var(--gri-002); color: var(--gri-006); }

.kpi-etiket {
    font-size: 12px;
    color: var(--gri-005);
    margin-bottom: 3px;
    font-weight: 500;
}
.kpi-deger {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.kpi-alt {
    font-size: 11px;
    color: var(--gri-005);
    margin-top: 4px;
    font-weight: 500;
}

.kpi-kart.koyu {
    background: var(--siyah-001);
    color: var(--beyaz);
    border-color: var(--siyah-001);
    overflow: hidden;
}
.kpi-kart.koyu::before {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 90px; height: 90px;
    background: var(--lime);
    opacity: 0.08;
    border-radius: 50%;
}
.kpi-kart.koyu .kpi-etiket { color: var(--gri-005); }
.kpi-kart.koyu .kpi-alt { color: var(--gri-005); }
.kpi-kart.koyu .kpi-deger { color: var(--lime); }
.kpi-kart.koyu .kpi-ikon.lime { background: rgba(168,200,0,0.18); color: var(--lime); }

/* =====================================================================
   GRAFİK KARTI
   ===================================================================== */

.grafik-kart {
    background: var(--beyaz);
    border: 1px solid var(--gri-003);
    border-radius: var(--kenar-yuvarlama);
    padding: 18px;
}
.grafik-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.grafik-buton-grup {
    display: flex;
    gap: 4px;
    background: var(--gri-001);
    padding: 3px;
    border-radius: 8px;
}
.grafik-buton {
    padding: 5px 12px;
    font-size: 11px;
    background: transparent;
    border-radius: 6px;
    font-weight: 600;
    color: var(--gri-006);
    transition: var(--gecis);
}
.grafik-buton:hover { color: var(--siyah-001); }
.grafik-buton.aktif {
    background: var(--siyah-001);
    color: var(--lime);
}

.grafik-svg-sarici {
    position: relative;
    width: 100%;
    height: 200px;
}
.grafik-svg-sarici svg {
    width: 100%;
    height: 100%;
}

.grafik-ozet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--gri-003);
    margin-top: 12px;
}
.grafik-ozet-kutu {
    text-align: center;
}
.grafik-ozet-kutu .etiket {
    font-size: 11px;
    color: var(--gri-005);
    font-weight: 500;
    margin-bottom: 2px;
}
.grafik-ozet-kutu .deger {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* =====================================================================
   HIZLI İŞLEMLER (yeni stil — ikonlu kart liste)
   ===================================================================== */

.hizli-kart {
    background: var(--beyaz);
    border: 1px solid var(--gri-003);
    border-radius: var(--kenar-yuvarlama);
    padding: 18px;
}
.hizli-kart-baslik {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}
.hizli-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px;
    border: 1px solid var(--gri-003);
    border-radius: 9px;
    transition: var(--gecis);
    margin-bottom: 8px;
}
.hizli-link:last-child { margin-bottom: 0; }
.hizli-link:hover {
    border-color: var(--siyah-001);
    transform: translateX(2px);
}
.hizli-link .h-ikon {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hizli-link .h-ikon.koyu { background: var(--siyah-001); color: var(--lime); }
.hizli-link .h-ikon.lime { background: var(--lime); color: var(--siyah-001); }
.hizli-link .h-ikon.bilgi { background: var(--bilgi-bg); color: var(--bilgi); }
.hizli-link .h-ikon.uyari { background: var(--uyari-bg); color: var(--uyari); }
.hizli-link .h-ikon.mor { background: #EEEDFE; color: #534AB7; }
.hizli-link .h-baslik {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.hizli-link .h-alt {
    font-size: 11px;
    color: var(--gri-005);
    margin-top: 2px;
}

/* =====================================================================
   DASHBOARD KARŞILAMA
   ===================================================================== */

.kar-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
    gap: 16px;
    flex-wrap: wrap;
}
.kar-sol .tarih {
    font-size: 11px;
    color: var(--lime-koyu);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 4px;
}
.kar-sol h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.4px;
}
.kar-sol .alt {
    font-size: 13px;
    color: var(--gri-005);
    margin-top: 2px;
}
.kar-sag {
    display: flex;
    gap: 8px;
}

/* =====================================================================
   FORMLAR
   ===================================================================== */

.form-grup {
    margin-bottom: 14px;
}
.form-grup label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--siyah-002);
}
.form-grup .zorunlu { color: var(--hata); }

.form-girdi, .form-secim, .form-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--gri-003);
    border-radius: 8px;
    background: var(--beyaz);
    font-size: 13px;
    transition: var(--gecis);
}
.form-girdi:focus, .form-secim:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--siyah-001);
    box-shadow: 0 0 0 3px rgba(168,200,0,0.12);
}
.form-textarea { resize: vertical; min-height: 70px; }
.form-yardim { font-size: 11px; color: var(--gri-005); margin-top: 4px; }
.form-hata { font-size: 11px; color: var(--hata); margin-top: 4px; }

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

/* =====================================================================
   BUTONLAR
   ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: var(--gecis);
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.2;
}
.btn-birincil {
    background: var(--lime);
    color: var(--siyah-001);
}
.btn-birincil:hover {
    background: var(--lime-koyu);
}

.btn-koyu {
    background: var(--siyah-001);
    color: var(--lime);
}
.btn-koyu:hover {
    background: var(--siyah-003);
}

.btn-gri {
    background: var(--gri-001);
    color: var(--siyah-001);
    border-color: var(--gri-003);
}
.btn-gri:hover {
    background: var(--gri-002);
    border-color: var(--gri-004);
}

.btn-tehlike {
    background: var(--hata);
    color: var(--beyaz);
}
.btn-tehlike:hover { opacity: 0.92; }

.btn-cizgili {
    background: transparent;
    color: var(--siyah-001);
    border-color: var(--gri-003);
}
.btn-cizgili:hover { border-color: var(--siyah-001); }

.btn-kucuk { padding: 6px 11px; font-size: 12px; }
.btn-buyuk { padding: 11px 22px; font-size: 14px; }
.btn-tam { width: 100%; }

/* =====================================================================
   TABLOLAR
   ===================================================================== */

.tablo-sarici {
    background: var(--beyaz);
    border-radius: var(--kenar-yuvarlama);
    border: 1px solid var(--gri-003);
    overflow: hidden;
}
.tablo {
    width: 100%;
    border-collapse: collapse;
}
.tablo thead th {
    background: var(--gri-001);
    padding: 11px 14px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gri-006);
    font-weight: 600;
    border-bottom: 1px solid var(--gri-003);
}
.tablo tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gri-003);
    font-size: 13px;
}
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover { background: var(--gri-001); }

/* =====================================================================
   ROZETLER
   ===================================================================== */

.rozet {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.rozet-aktif { background: rgba(22,163,74,0.10); color: var(--basari); }
.rozet-pasif { background: rgba(85,85,85,0.10); color: var(--gri-006); }
.rozet-uyari { background: rgba(245,158,11,0.10); color: var(--uyari); }
.rozet-hata  { background: rgba(220,38,38,0.10); color: var(--hata); }
.rozet-bilgi { background: rgba(14,165,233,0.10); color: var(--bilgi); }
.rozet-marka { background: rgba(168,200,0,0.18); color: var(--siyah-001); }

/* =====================================================================
   UYARI KUTULARI
   ===================================================================== */

.uyari-kutu {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    border-left: 3px solid;
}
.uyari-basari { background: var(--basari-bg); border-left-color: var(--basari); color: #166534; }
.uyari-hata   { background: var(--hata-bg); border-left-color: var(--hata); color: #991B1B; }
.uyari-uyari  { background: var(--uyari-bg); border-left-color: var(--uyari); color: #92400E; }
.uyari-bilgi  { background: var(--bilgi-bg); border-left-color: var(--bilgi); color: #075985; }

/* =====================================================================
   GİRİŞ EKRANI (aynı kalsın)
   ===================================================================== */

.giris-govde {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--siyah-001) 0%, var(--siyah-003) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.giris-govde::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 500px; height: 500px;
    background: var(--lime);
    border-radius: 50%;
    opacity: 0.08;
    filter: blur(80px);
}
.giris-govde::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 500px; height: 500px;
    background: var(--lime);
    border-radius: 50%;
    opacity: 0.05;
    filter: blur(80px);
}
.giris-kart {
    background: var(--beyaz);
    border-radius: var(--kenar-yuvarlama-buyuk);
    padding: 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--golge-003);
    position: relative;
    z-index: 1;
}
.giris-logo {
    width: 56px; height: 56px;
    background: var(--siyah-001);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    color: var(--lime);
    font-size: 26px;
    font-weight: 700;
}
.giris-baslik {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.3px;
}
.giris-alt-baslik {
    font-size: 12px;
    color: var(--gri-005);
    text-align: center;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* =====================================================================
   YARDIMCILAR
   ===================================================================== */

.boslukli > * + * { margin-top: 14px; }
.satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex { display: flex; }
.flex-arasi { display: flex; align-items: center; justify-content: space-between; }
.flex-orta { display: flex; align-items: center; gap: 10px; }
.metin-orta { text-align: center; }
.metin-sag { text-align: right; }
.metin-kalin { font-weight: 700; }
.metin-yari-kalin { font-weight: 600; }
.metin-soluk { color: var(--gri-005); }
.metin-marka { color: var(--lime-koyu); }
.metin-buyuk { font-size: 16px; }
.metin-kucuk { font-size: 12px; }
.metin-cok-kucuk { font-size: 11px; }
.gizli { display: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Tablet ve büyük telefonlar */
@media (min-width: 768px) {
    .ust-arama { display: block; }
    .ust-cubuk-baslik { display: none; }
}

/* Sadece desktop */
@media (min-width: 1024px) {
    .kullanici-rozet .ad-mini-rol { display: inline; }
}

/* Tablet altı (mobile) */
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --kenar-genislik: 0px; }

    .kenar-cubuk {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: var(--golge-drawer);
    }
    .kenar-cubuk.acik {
        transform: translateX(0);
    }
    .kenar-cubuk-kapat {
        display: flex;
    }

    .icerik-alani {
        margin-left: 0;
    }

    .menu-buton {
        display: flex;
    }

    .ust-arama { display: none; }
    .ust-cubuk-baslik { display: block; flex: 1; min-width: 0; }
    .ust-cubuk-baslik h1 { font-size: 15px; }
    .ust-cubuk-baslik .alt-yazi { display: none; }
    .ust-cubuk { padding: 10px 14px; gap: 10px; }

    .kullanici-rozet .ad-mini { display: none; }
    .kullanici-rozet { padding: 4px; }

    .sayfa-icerik { padding: 16px; }

    .kar-bar { flex-direction: column; align-items: stretch; }
    .kar-sag { justify-content: stretch; }
    .kar-sag .btn { flex: 1; }

    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-kart { padding: 12px; }
    .kpi-deger { font-size: 19px; }

    .grafik-ozet { gap: 8px; }
    .grafik-ozet-kutu .deger { font-size: 13px; }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kullanici-rozet { display: none; }
}

/* Print için */
@media print {
    .kenar-cubuk, .ust-cubuk, .menu-buton { display: none; }
    .icerik-alani { margin-left: 0; }
    .sayfa-icerik { padding: 0; }
}
/* =====================================================================
   DASHBOARD v2.1 — KPI grid yeniden düzenleme
   Bu kuralları ana.css dosyasının SONUNA ekleyin (üzerine yazmayın)
   ===================================================================== */

/* ---- ESKİ kpi-grid'i devre dışı bırak (artık 2 ayrı grid kullanıyoruz) ---- */
/* (zaten yeni adlar — kpi-grid-ana ve kpi-grid-yan — kullanıyor) */

/* ANA KPI'LAR — 4 sütun, eşit genişlik */
.kpi-grid-ana {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

/* Tablet — 2 sütun */
@media (max-width: 1100px) {
    .kpi-grid-ana { grid-template-columns: repeat(2, 1fr); }
}

/* Mobil — 1 sütun (siyah ciro ve canlı kart yan yana 2'li olabilir) */
@media (max-width: 600px) {
    .kpi-grid-ana { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-grid-ana .kpi-deger { font-size: 19px; }
    .kpi-grid-ana .kpi-kart { padding: 13px; }
}

/* CANLI KART — Şu An Salonda için özel vurgu */
.kpi-kart.canli {
    background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
    border: 1px solid var(--gri-003);
    position: relative;
    overflow: hidden;
}
.kpi-kart.canli::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--lime) 0%, var(--lime-koyu) 100%);
}
.kpi-kart.canli .kpi-deger {
    color: var(--siyah-001);
    font-size: 28px;
}
.kpi-kart.canli .kpi-ikon.canli-ikon {
    background: rgba(168,200,0,0.18);
    color: var(--lime-koyu);
}
.canli-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(220,38,38,0.10);
    color: var(--hata);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.canli-nokta {
    width: 6px; height: 6px;
    background: var(--hata);
    border-radius: 50%;
    animation: canli-yan 1.5s ease-in-out infinite;
}
@keyframes canli-yan {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ---- İKİNCİL KPI'LAR (mini, yatay) ---- */
.kpi-grid-yan {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .kpi-grid-yan { grid-template-columns: 1fr; gap: 8px; }
}

.kpi-mini {
    background: var(--beyaz);
    border: 1px solid var(--gri-003);
    border-radius: var(--kenar-yuvarlama);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--gecis);
    text-decoration: none;
    color: inherit;
}
.kpi-mini:hover {
    border-color: var(--gri-004);
    transform: translateY(-1px);
    box-shadow: var(--golge-002);
}
.kpi-mini.aksiyon {
    border-color: rgba(220,38,38,0.25);
    background: linear-gradient(180deg, rgba(220,38,38,0.02) 0%, var(--beyaz) 100%);
}
.kpi-mini.firsat {
    border-color: rgba(168,200,0,0.35);
    background: linear-gradient(180deg, rgba(168,200,0,0.03) 0%, var(--beyaz) 100%);
}

.kpi-mini-ikon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-mini-ikon.bilgi  { background: #E6F1FB; color: #185FA5; }
.kpi-mini-ikon.basari { background: #EAF3DE; color: #3B6D11; }
.kpi-mini-ikon.uyari  { background: #FAEEDA; color: #854F0B; }
.kpi-mini-ikon.hata   { background: #FCEBEB; color: #A32D2D; }
.kpi-mini-ikon.mor    { background: #EEEDFE; color: #534AB7; }
.kpi-mini-ikon.lime   { background: rgba(168,200,0,0.15); color: var(--lime-koyu); }

.kpi-mini-icerik {
    flex: 1;
    min-width: 0;
}
.kpi-mini-etiket {
    font-size: 12px;
    font-weight: 600;
    color: var(--siyah-001);
    margin-bottom: 1px;
}
.kpi-mini-alt {
    font-size: 11px;
    color: var(--gri-005);
}

.kpi-mini-deger {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--siyah-001);
    flex-shrink: 0;
}
.kpi-mini.aksiyon .kpi-mini-deger { color: var(--hata); }

/* ---- GRAFİK + HIZLI İŞLEMLER GRID ---- */
.dashboard-alt-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) {
    .dashboard-alt-grid { grid-template-columns: 1fr; }
}

/* GRAFİK İYİLEŞTİRME */
.grafik-svg-sarici {
    position: relative;
    width: 100%;
    height: 240px;  /* 200 → 240 (daha rahat görünüm) */
    display: flex;
    align-items: center;
    justify-content: center;
}
.grafik-svg-sarici svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Boş grafik durumu */
.grafik-bos {
    text-align: center;
    padding: 30px 20px;
    color: var(--gri-005);
}