:root {
    --lgs-bg: #f4f6fb;
    --lgs-sidebar: #1e2a4a;
    --lgs-sidebar-2: #2a3a63;
    --lgs-primary: #4e73df;
    --lgs-primary-d: #2e59d9;
    --lgs-text: #2b3245;
    --lgs-muted: #7b8397;
    --lgs-card: #ffffff;
    --lgs-border: #e7ebf3;
    --lgs-radius: 16px;
    --lgs-shadow: 0 6px 24px rgba(31, 45, 80, .07);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--lgs-bg);
    color: var(--lgs-text);
}

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

/* ---------- Sidebar ---------- */
.lgs-sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: linear-gradient(180deg, var(--lgs-sidebar), var(--lgs-sidebar-2));
    color: #cdd5ea;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.lgs-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 22px 22px 18px;
    font-size: 1.25rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lgs-brand i { color: #ffd451; font-size: 1.5rem; }
.lgs-nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 4px; flex: 1; }
.lgs-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    color: #cdd5ea; text-decoration: none; font-weight: 500;
    transition: all .15s;
}
.lgs-nav a i { font-size: 1.15rem; width: 22px; text-align: center; }
.lgs-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lgs-nav a.active { background: var(--lgs-primary); color: #fff; box-shadow: 0 4px 12px rgba(78,115,223,.4); }
.lgs-sidebar-foot { padding: 16px 22px; font-size: .8rem; color: #8b95b3; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- Main ---------- */
.lgs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lgs-topbar {
    display: flex; align-items: center; gap: 14px;
    background: #fff; padding: 14px 26px;
    border-bottom: 1px solid var(--lgs-border);
    position: sticky; top: 0; z-index: 20;
}
.lgs-topbar-title { font-size: 1.15rem; font-weight: 700; flex: 1; }
.lgs-burger { display: none; background: none; border: none; font-size: 1.5rem; color: var(--lgs-text); cursor: pointer; }
.lgs-user { display: flex; align-items: center; gap: 10px; }
.lgs-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--lgs-primary); color: #fff;
    display: grid; place-items: center; font-weight: 700;
}
.lgs-user-name { font-weight: 600; }
.lgs-logout { background: #f0f2f8; border: none; color: #e74a3b; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; }
.lgs-logout:hover { background: #fdeeec; }
.lgs-content { padding: 26px; }

/* ---------- Kartlar ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 22px; }
.stat-card {
    background: var(--lgs-card); border-radius: var(--lgs-radius);
    padding: 20px; box-shadow: var(--lgs-shadow);
    display: flex; align-items: center; gap: 16px;
    border-left: 5px solid var(--lgs-primary);
}
.stat-card .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; }
.stat-card .label { color: var(--lgs-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-card .value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat-card .sub { font-size: .8rem; color: var(--lgs-muted); }

.card-lgs {
    background: var(--lgs-card); border-radius: var(--lgs-radius);
    box-shadow: var(--lgs-shadow); border: none; margin-bottom: 20px;
}
.card-lgs .card-head {
    padding: 16px 20px; border-bottom: 1px solid var(--lgs-border);
    font-weight: 700; display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.card-lgs .card-body-lgs { padding: 20px; }
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 260px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid-profil { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 992px) {
    .grid-2, .grid-3, .grid-profil { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .lgs-sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s; }
    .lgs-sidebar.open { left: 0; }
    .lgs-burger { display: block; }
}

/* ---------- Rozet / tablo ---------- */
.ders-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.net-badge { font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #eef1fb; color: var(--lgs-primary-d); }
.table-lgs { width: 100%; border-collapse: collapse; }
.table-lgs th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--lgs-muted); padding: 10px 12px; border-bottom: 2px solid var(--lgs-border); }
.table-lgs td { padding: 11px 12px; border-bottom: 1px solid var(--lgs-border); vertical-align: middle; }
.table-lgs tbody tr:hover, .table-lgs tr:hover { background: #fafbff; }

.aktivite { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lgs-border); }
.aktivite:last-child { border-bottom: none; }
.aktivite .ai { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #eef1fb; color: var(--lgs-primary); flex: 0 0 38px; }
.aktivite .at { font-size: .78rem; color: var(--lgs-muted); }

.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.empty-state { text-align: center; color: var(--lgs-muted); padding: 40px 20px; }
.empty-state i { font-size: 2.6rem; opacity: .4; display: block; margin-bottom: 10px; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #1e2a4a, #4e73df); padding: 20px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.auth-head { text-align: center; padding: 30px 30px 10px; }
.auth-head i { font-size: 2.6rem; color: var(--lgs-primary); }
.auth-head h1 { font-size: 1.5rem; margin: 10px 0 4px; }
.auth-head p { color: var(--lgs-muted); margin: 0; font-size: .9rem; }
.auth-body { padding: 20px 30px 30px; }
.auth-demo { background: #eef1fb; border-radius: 12px; padding: 10px 14px; font-size: .85rem; color: var(--lgs-primary-d); margin-bottom: 16px; text-align: center; }
.yukle-kutu { margin-top: 14px; padding: 14px; border: 1px dashed #cfd8ef; border-radius: 14px; background: #f7f9ff; }
.yukle-baslik { font-weight: 700; font-size: .9rem; margin-bottom: 10px; color: var(--lgs-text); text-align: center; }
.yukle-ios { font-size: .85rem; color: var(--lgs-muted); line-height: 1.5; text-align: center; }

/* ---------- Mini geri sayım (üst bar) ---------- */
.lgs-mini-timer {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef1fb; color: var(--lgs-primary-d);
    padding: 7px 12px; border-radius: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums; text-decoration: none; margin-right: 10px;
    border: 1px solid #dbe3fb;
}
.lgs-mini-timer:hover { background: #e2e8fb; }
.lgs-mini-timer i { font-size: 1.05rem; }

/* ---------- PDF kartları ---------- */
.pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pdf-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--lgs-border); border-radius: 12px; padding: 12px 14px; }
.pdf-card:hover { background: #fafbff; }
.pdf-ico { width: 44px; height: 44px; border-radius: 10px; background: #fdeeec; color: #e74a3b; display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 44px; }
.pdf-info { flex: 1; min-width: 0; }
.pdf-title { font-weight: 700; }
.pdf-sub { font-size: .8rem; color: var(--lgs-muted); }
.pdf-actions { display: flex; gap: 6px; }

/* ---------- Ek responsive ---------- */
@media (max-width: 576px) {
    .lgs-content { padding: 16px 14px; }
    .lgs-topbar { padding: 12px 14px; }
    .lgs-topbar-title { font-size: 1rem; }
    .lgs-user-name { display: none; }
    .lgs-mini-timer span { min-width: 42px; text-align: center; }
    .stat-card { padding: 16px; }
    .stat-card .value { font-size: 1.4rem; }
    .card-lgs .card-body-lgs { padding: 16px; }
    #saat { font-size: 3.2rem !important; }
    h2.fw-bold { font-size: 1.4rem; }
}
/* Tablolar dar ekranda kaydırılabilir alanda dursun */
.tbl-scroll { overflow-x: auto; }
.tbl-scroll .table-lgs { min-width: 520px; }