/* ==== apps/modules/web/0000/30_hesap_hareketleri.php dosyasindan tasindi ==== */
:root {
    --bg:     #0f1117;
    --bg2:    #161b27;
    --bg3:    #1e2536;
    --border: #2a3147;
    --accent: #6aa3ff;
    --purple: #c4a8ff;
    --green:  #4ade9a;
    --red:    #ff8585;
    --yellow: #fcd34d;
    --orange: #fb923c;
    --text:   #f0f4ff;
    --muted:  #94a3b8;
    --r:      14px;
}
.hh-wrap {
    background: var(--bg);
    min-height: 100vh;
    padding: 10px;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--text);
}
.hh-header { text-align:center; padding:24px 20px 16px; }
.hh-header h1 { font-size:1.95rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0; color:var(--text); }
.badge-plan {
    display:inline-flex; align-items:center; gap:6px;
    margin-top:8px; padding:4px 14px; border-radius:20px;
    font-size:1.125rem; font-weight:600; letter-spacing:.04em;
}
.badge-plan { background:var(--paket-grad,#1e2536); border-color:var(--paket-bdr,var(--border)) !important; color:#fff; }

.hh-section { font-size:1.11rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); padding:16px 18px 7px; }

.hh-card {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:var(--r); margin:0 14px 14px; overflow:hidden;
}
.hh-card-head {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px 12px; border-bottom:1px solid var(--border);
}
.hh-card-head .icon {
    width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; flex-shrink:0;
}
.hh-card-head h2 { font-size:1.5rem; font-weight:600; margin:0; color:var(--text); }
.hh-card-head small { display:block; font-size:1.14rem; color:var(--muted); margin-top:1px; }
.hh-card-body { padding:16px; }

/* stat grid */
.sg3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sg2 { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.stat-box { background:var(--bg3); border-radius:10px; padding:12px; text-align:center; }
.stat-box-accent { border-top:2px solid var(--box-accent, var(--border)); }
.stat-box .sv { font-size:2.25rem; font-weight:800; line-height:1.1; }
.stat-box .sl { font-size:1.11rem; color:var(--muted); margin-top:3px; }

/* soru grup başlığı */
.soru-grup-label {
    display:flex; align-items:center; gap:7px;
    font-size:1.08rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted);
    margin-bottom:8px;
}
.soru-grup-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* progress */
.hh-prog { height:7px; border-radius:4px; background:var(--bg3); overflow:hidden; margin:10px 0 6px; }
.hh-prog-bar { height:100%; border-radius:4px; }
.prog-meta { display:flex; justify-content:space-between; font-size:1.14rem; color:var(--muted); }

/* qtoken tipler */
.qt-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 0; border-bottom:1px solid var(--border);
}
.qt-row:last-child { border-bottom:none; }
.qt-row .qt-label { display:flex; align-items:center; gap:8px; font-size:1.29rem; }
.qt-row .qt-dot   { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.qt-row .qt-val   { font-size:1.35rem; font-weight:700; }
.qt-total {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:12px; padding:10px 14px;
    background:var(--bg3); border-radius:9px;
    font-size:1.275rem;
}
.qt-total .tv { font-size:1.65rem; font-weight:800; color:var(--accent); }

/* donut */
.donut-wrap { display:flex; align-items:center; gap:16px; padding:4px 0 12px; }
.donut-legend .dl-row {
    display:flex; align-items:center; gap:8px;
    margin-bottom:7px; font-size:1.23rem;
}
.dl-dot  { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.dl-val  { font-weight:700; margin-left:auto; }

/* günlük accordion */
.gun-row {
    border-bottom:1px solid var(--border);
}
.gun-row:last-child { border-bottom:none; }
.gun-toggle {
    display:flex; align-items:center; gap:10px;
    padding:11px 0; cursor:pointer; user-select:none;
}
.gun-toggle .gt-date { font-size:1.245rem; font-weight:600; width:52px; flex-shrink:0; }
.gun-bar-wrap { flex:1; height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.gun-bar      { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--purple),var(--accent)); }
.gun-toggle .gt-qt   { font-size:1.2rem; font-weight:700; width:68px; text-align:right; flex-shrink:0; }
.gun-toggle .gt-arr  { font-size:1.14rem; color:var(--muted); flex-shrink:0; transition:transform .2s; }
.gun-toggle.open .gt-arr { transform:rotate(90deg); }
.gun-detail { display:none; padding:0 0 10px 62px; }
.gun-detail.open { display:block; }
.baglam-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; border-bottom:1px solid var(--border);
    font-size:1.2rem;
}
.baglam-item:last-child { border-bottom:none; }
.baglam-item .bi-name { color:var(--text); }
.baglam-item .bi-id   { color:var(--muted); font-size:1.095rem; margin-top:1px; }
.baglam-item .bi-qt   { font-weight:700; color:var(--purple); flex-shrink:0; }

/* plan hareketleri */
.plan-item {
    display:flex; gap:12px; padding:11px 0;
    border-bottom:1px solid var(--border); align-items:flex-start;
}
.plan-item:last-child { border-bottom:none; }
.plan-item .pi-icon {
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:19px; flex-shrink:0; margin-top:1px;
}
.plan-item .pi-name { font-size:1.32rem; font-weight:600; }
.plan-item .pi-meta { font-size:1.14rem; color:var(--muted); margin-top:3px; }

/* info box */
.info-box {
    margin-top:12px; padding:9px 12px;
    border-radius:8px; font-size:1.2rem; font-weight:600;
    border-left:3px solid;
}
.info-warn  { background:#2d1a1a; border-color:var(--red);    color:var(--red); }
.info-ok    { background:#1a2d1a; border-color:var(--green);  color:var(--green); }
.info-note  { background:#2a2200; border-color:var(--yellow); color:var(--yellow); }

.c-green  { color:var(--green); }
.c-red    { color:var(--red); }
.c-blue   { color:var(--accent); }
.c-yellow { color:var(--yellow); }
.c-purple { color:var(--purple); }
.c-orange { color:var(--orange); }
.c-muted  { color:var(--muted); }

/* tabs */
.hh-tabs {
    display:flex; gap:6px; margin:4px 14px 8px;
    background:var(--bg2); border:1px solid var(--border);
    border-radius:12px; padding:4px;
}
.hh-tab {
    flex:1; text-align:center; padding:11px 8px; border-radius:9px;
    font-size:1.13rem; font-weight:700; letter-spacing:.02em;
    color:var(--muted); cursor:pointer; user-select:none;
    transition:background .15s,color .15s;
}
.hh-tab.active { background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; }
.hh-tab-panel { display:none; }
.hh-tab-panel.active { display:block; }

/* puan hareketleri */
.puan-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 0; border-bottom:1px solid var(--border);
}
.puan-row:last-child { border-bottom:none; }
.puan-row .pr-icon {
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
}
.puan-row .pr-info  { flex:1; min-width:0; }
.puan-row .pr-desc  { font-size:1.2rem; color:var(--text); }
.puan-row .pr-meta  { font-size:1.05rem; color:var(--muted); margin-top:2px; }
.puan-row .pr-val   { font-weight:800; font-size:1.35rem; flex-shrink:0; }

/* geçmiş (bakiyesi tükenmiş paketler) — kendi kutusu olan, gözden kaçmayan
   bir "buton" gibi görünsün diye gun-toggle'dan daha belirgin stillendirildi
   (düz metin satırı hâlindeyken fark edilmediği bildirildi). */
.gecmis-wrap   { margin-top:16px; }
.gecmis-toggle {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; cursor:pointer; user-select:none;
    font-size:1.2rem; font-weight:700; color:var(--text);
    background:var(--bg3); border:1px solid var(--border); border-radius:10px;
    transition:border-color .15s;
}
.gecmis-toggle:hover { border-color:var(--accent); }
.gecmis-say {
    background:var(--bg2); color:var(--muted);
    font-size:1rem; font-weight:600;
    padding:2px 9px; border-radius:20px;
}
.gecmis-arr { margin-left:auto; font-size:1.2rem; color:var(--muted); transition:transform .2s; }
.gecmis-toggle.open .gecmis-arr { transform:rotate(90deg); }
.gecmis-body { display:none; opacity:.75; margin-top:10px; }
.gecmis-body.open { display:block; }