/* ------------------------------------------------------------------
   RUSLAN - tasarim sistemi
   Revolut/Wise estetigi: yumusak yuzeyler, dusuk kontrastli kenarliklar,
   tek vurgu rengi, genis bosluk. Mobil oncelikli yazilmistir.
   ------------------------------------------------------------------ */

/* --- Tasarim belirtecleri (koyu tema varsayilan) ------------------- */
:root {
    --bg: #0b0e14;
    --surface: #141922;
    --surface-2: #1c2230;
    --border: #262d3b;
    --text: #eef2f8;
    --text-muted: #93a0b5;
    --accent: #2f7bff;
    --accent-contrast: #ffffff;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Grafik paleti: JS tarafindan okunur (charts.js), tema ile degisir. */
    --chart-1: #2f7bff;
    --chart-2: #22c55e;
    --chart-3: #f59e0b;
    --chart-4: #a855f7;
    --chart-5: #06b6d4;
    --chart-6: #ef4444;
    --chart-7: #84cc16;
    --chart-8: #ec4899;
    --chart-9: #f97316;
    --chart-10: #64748b;

    --topbar-h: 60px;
    --bottomnav-h: 64px;
    --sidebar-w: 232px;
    --tap: 44px; /* asgari dokunma hedefi */

    color-scheme: dark;
}

/* --- Acik tema ----------------------------------------------------- */
[data-theme="light"] {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef2f8;
    --border: #dfe5ee;
    --text: #0e1420;
    --text-muted: #5c6880;
    --accent: #1a5fe0;
    --accent-contrast: #ffffff;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --shadow: 0 8px 24px rgba(16, 24, 40, .08);

    /* Acik zeminde yeterli kontrast icin koyulastirilmis palet */
    --chart-1: #1a5fe0;
    --chart-2: #16a34a;
    --chart-3: #d97706;
    --chart-4: #7e22ce;
    --chart-5: #0e7490;
    --chart-6: #dc2626;
    --chart-7: #4d7c0f;
    --chart-8: #be185d;
    --chart-9: #c2410c;
    --chart-10: #475569;

    color-scheme: light;
}

/* --- Temel --------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 650;
    letter-spacing: -.01em;
}

h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }

p { margin: 0 0 var(--space-3); }

small,
.muted {
    color: var(--text-muted);
}

.numeric {
    font-variant-numeric: tabular-nums;
}

/* `hidden` niteligi sinif tabanli display kurallarini EZMELIDIR;
   aksi halde .filters__row gibi flex kutular gizlenmez. */
[hidden] { display: none !important; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Ust bar ------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--topbar-h);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar__brand {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-inline-end: auto;
    min-width: 0;
}

.topbar__title {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --- Form ogeleri -------------------------------------------------- */
.select,
.input,
.btn {
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    line-height: 1.2;
}

.input,
.select {
    width: 100%;
}

.select {
    appearance: none;
    padding-inline-end: var(--space-5);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: right 14px center, right 9px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.select--compact {
    width: auto;
    min-width: 76px;
}

.input:focus-visible,
.select:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: var(--tap);
    cursor: pointer;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn:hover { background: var(--surface-2); }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.btn--primary:hover { opacity: .92; background: var(--accent); }

.btn--block { width: 100%; }

.btn--ghost { background: transparent; }

.btn[disabled],
.btn[aria-busy="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.field {
    display: block;
    margin-bottom: var(--space-4);
}

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* --- Rozetler ------------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.badge--success { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.badge--danger  { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.badge--warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Yerlesim ------------------------------------------------------ */
.shell {
    display: block;
}

.sidebar { display: none; }

.content {
    padding: var(--space-4);
    padding-bottom: calc(var(--bottomnav-h) + var(--space-6));
    max-width: 1180px;
    margin: 0 auto;
    /* Izgara ogesi olarak icerige gore buyumesin: `margin:auto` esnemeyi
       kapatir ve genislik icerige gore hesaplanirdi; `width:100%` ile
       genislik daima sutuna baglanir (yatay tasma korumasi). */
    width: 100%;
    min-width: 0;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.page-head__actions {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-2);
}

/* --- Kart ve izgara ------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow);
}

.card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.card__head h2,
.card__head h3 { margin-inline-end: auto; }

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat__label {
    font-size: .8rem;
    color: var(--text-muted);
}

.stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* --- Bos durum / yukleniyor ---------------------------------------- */
.empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.skeleton {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: skeleton 1.3s ease infinite;
}

@keyframes skeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    * { transition: none !important; }
}

/* --- Tablo --------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-2);
    text-align: start;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table td.amount,
.table th.amount {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td { border-bottom: 0; }

/* --- Sekmeler ------------------------------------------------------ */
.tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    margin-bottom: var(--space-4);
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
    min-height: var(--tap);
    padding: 0 var(--space-4);
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tab[aria-selected="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.tab-panel[hidden] { display: none; }

/*
 * DIKEY RITIM - TEK KURAL, tum sekmelerde ayni.
 *
 * Ritim daha once `.card + .card` ile veriliyordu. `#summary-stats` bir
 * `.card` DEGIL (izgara kapsayicisi) oldugu icin komsu-kardes secici onda
 * kiriliyordu: hem kendisi hem ondan SONRAKI kart ustten boslugunu
 * kaybediyordu. Tarayicida olculen durum: bakiye 16px, yatirma 16px,
 * stats 0px, butce 0px, son islemler 16px.
 *
 * Yeni kural kart olup olmadigina BAKMAZ; bolumun TUM dogrudan cocuklarina
 * uygulanir. Boylece araya kart-olmayan bir oge eklemek ritmi bozamaz ve
 * sekme basina ayri kural yazmak gerekmez (#tab-summary, #tab-transactions,
 * #tab-analytics, #tab-settings ayni kurali paylasir).
 *
 * `[hidden]` ogeler kutu uretmez; onlardan sonraki oge boslugunu korur.
 *
 * Mobilde 16px KALIR: dar ekranda 24px gorunur alandan gercek kayip demek.
 * >= 768px'te ferahlatmak icin 24px'e cikar (asagidaki masaustu blogu).
 */
.tab-panel > * + * { margin-top: var(--space-4); }

/* --- Alt navigasyon (mobil) ---------------------------------------- */
.bottomnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
}

.bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--tap);
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
}

.bottomnav__item[aria-selected="true"] { color: var(--accent); }

.bottomnav__icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* --- Giris sayfasi ------------------------------------------------- */
.auth {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.auth__card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow);
}

.auth__brand {
    text-align: center;
    margin-bottom: var(--space-5);
}

.auth__logo {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-3);
    border-radius: 12px;
    background: var(--accent);
    color: var(--accent-contrast);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.alert {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .88rem;
    margin-bottom: var(--space-4);
}

.alert--danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

/* --- Hata sayfalari ------------------------------------------------ */
.errorpage {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    text-align: center;
}

.errorpage__code {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent);
}

/* --- Grafik kapsayicisi -------------------------------------------- */
.chart-box {
    position: relative;
    width: 100%;
    height: 240px;
}

/* --- Masaustu (>= 768px) ------------------------------------------- */
@media (min-width: 768px) {
    body { font-size: 15.5px; }

    /* Genis ekranda kartlar arasi ritim ferahlar (16px -> 24px). */
    .tab-panel > * + * { margin-top: var(--space-5); }

    .shell {
        display: grid;
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
        align-items: start;
    }

    .sidebar {
        display: block;
        position: sticky;
        top: var(--topbar-h);
        height: calc(100dvh - var(--topbar-h));
        padding: var(--space-4) var(--space-3);
        border-inline-end: 1px solid var(--border);
    }

    .sidebar__item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        min-height: var(--tap);
        margin-bottom: var(--space-1);
        padding: 0 var(--space-3);
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--text-muted);
        font: inherit;
        font-weight: 600;
        text-align: start;
        cursor: pointer;
    }

    .sidebar__item:hover { background: var(--surface-2); color: var(--text); }

    .sidebar__item[aria-selected="true"] {
        background: var(--surface-2);
        color: var(--accent);
    }

    .bottomnav { display: none; }

    .content {
        padding: var(--space-5);
        padding-bottom: var(--space-6);
    }

    /* Ozet satirinda iki kart var; kartlar satiri tam doldurur. */
    .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .chart-box { height: 300px; }
}

@media (min-width: 1200px) {
    .grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==================================================================
   M5 - Bolum bilesenleri
   Tumu mobil onceliklidir; 400px genislikte yatay tasma OLMAZ.
   Sabit renk YOKTUR, her deger belirtecten (token) okunur.
   ================================================================== */

/* --- Yardimcilar --------------------------------------------------- */
.btn--small {
    min-height: 36px;
    padding: 0 var(--space-3);
    font-size: .85rem;
}

.note {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .85rem;
}

.note--warning {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.note--danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.skeleton-box {
    display: grid;
    gap: var(--space-3);
}

.deflist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 0;
    font-size: .9rem;
}

.deflist dt { color: var(--text-muted); min-width: 0; }
.deflist dd { margin: 0; text-align: end; }

/* --- Ilerleme cubugu ----------------------------------------------- */
.progress {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.progress__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .25s ease;
}

.progress--warning .progress__fill { background: var(--warning); }
.progress--danger .progress__fill  { background: var(--danger); }

.progress-block { margin-top: var(--space-3); }

.progress-block__caption {
    margin-top: var(--space-2);
    font-size: .82rem;
}

/* --- Bakiye karti (Revolut tarzi) ---------------------------------- */
.card--balance {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%,
        var(--surface) 62%);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.balance__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.balance__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
}

.balance__card {
    margin-inline-start: auto;
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.balance__body { margin-top: var(--space-3); }

.balance__amount {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.balance__converted {
    margin-top: var(--space-1);
    font-size: .95rem;
}

.balance__footer {
    margin-top: var(--space-3);
    font-size: .78rem;
}

/* --- Istatistik kartlari ------------------------------------------- */
.grid--stats .card.stat { padding: var(--space-3); }

/*
 * "Kazanilan puan" karti kaldirildi; izgarada tek kart kalabilir.
 *
 * KARAR: Izgara iki kolonlu KALIR, boylece tek kart dogal olarak SOL kolona
 * oturur (tam genisilige yayilmaz). Genis ekranda yarim satir bile devasa bir
 * bos kutu olacagi icin ayrica ustten sinirlanir. `grid--stats` sinifi
 * korunur: ileride ikinci bir sayac eklenirse yerlesim kendiliginden dogru
 * olur ve `#summary-stats` kimligine bakan kod etkilenmez.
 */
.grid--stats .card.stat:only-child { max-width: 320px; }

/* --- Butce ---------------------------------------------------------- */
.budget__amounts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.budget__spent {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.budget__meta,
.budget__daily {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: .85rem;
}

/* --- Islem listesi ------------------------------------------------- */
.txlist {
    display: flex;
    flex-direction: column;
}

.txrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
}

button.txrow { cursor: pointer; }
button.txrow:hover { background: var(--surface-2); }

.txlist .txrow:last-of-type { border-bottom: 0; }

.txrow__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 1.05rem;
}

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

.txrow__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Beklemede / reddedildi rozeti. Basligin ICINDE degil, altindaki ayri
   durum satirinda durur: .txrow__title `overflow: hidden` ile kirpildigindan
   basligin sonuna eklenen rozet dar ekranda (360-400px) hic gorunmuyordu.
   Satir yalnizca durum varken olusturulur; dar ekranda tasmamasi icin
   rozet kucultulmez, gerekirse alt satira sarar. */
.txrow__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 2px 0;
    min-width: 0;
}

.txrow__badge {
    flex: 0 0 auto;
    font-size: .68rem;
    line-height: 1.2;
}

/* "x beklemede dahil" bilgi satiri: kartlarda toplamin altinda kucuk,
   soluk bir satir. Dar ekranda (390px) kirpilmaz, sarar. */
.txnote {
    margin-top: var(--space-1);
    font-size: .78rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.txrow__meta {
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txrow__right {
    flex: 0 0 auto;
    text-align: end;
}

.txrow__amount {
    font-weight: 650;
    white-space: nowrap;
}

/* Satirin altindaki ikincil tutarlar: USD asli ve tahmini USDT.
   Puan gosterimi satirdan kaldirildi (veri korunuyor, bkz. tx.cashback);
   yerine tahmini USDT geldigi icin .txrow__points kurali da kalkti. */
.txrow__original,
.txrow__estimate {
    font-size: .75rem;
    white-space: nowrap;
}

/* --- Reddedilen yetkilendirme satiri -------------------------------
   Serit YOK: durum yalnizca rozet + ustu cizili tutarla anlatilir; kok
   sinifa gorsel kural verilmez. Satir geneline opacity VERILMEZ; rozetin
   kontrasti dusmesin diye yalnizca metin renkleri soluklastirilir. */
.txrow--declined .txrow__title {
    color: var(--text-muted);
}

.txrow--declined .txrow__amount,
.txrow--declined .txrow__original,
.txrow--declined .txrow__estimate {
    text-decoration: line-through;
    color: var(--text-muted);
    font-weight: 500;
}

.txrow--declined .txrow__badge {
    /* Duz var(--danger) uzerinde beyaz metin koyu temada 3.8:1 kaliyordu
       (AA 4.5:1 altinda); %18 siyah karistirilarak iki temada da 4.5:1
       ustune cikarilir. Metin beyaz kalir, opacity KULLANILMAZ. */
    background: color-mix(in srgb, var(--danger) 82%, #000);
    color: #fff;
    border-color: color-mix(in srgb, var(--danger) 82%, #000);
    font-weight: 700;
}

/* --- Beklemede (provizyon) satiri -----------------------------------
   Serit YOK: durum rozet + italik tutarla anlatilir. Tutar henuz kesin
   degil: italik ve soluk. Rozet koyu metinli dolu uyari rengi; iki temada
   da okunur (sari uzerine acik metin yetersiz). */
.txrow--pending .txrow__amount,
.txrow--pending .txrow__original,
.txrow--pending .txrow__estimate {
    font-style: italic;
    color: var(--text-muted);
}

.txrow--pending .txrow__badge {
    background: var(--warning);
    color: #0e1420;
    border-color: var(--warning);
    font-weight: 700;
}

/* --- Masaustu duzenlemeleri ---------------------------------------- */
@media (min-width: 768px) {
    .balance__amount { font-size: 2.4rem; }

    .settings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .settings__grid .btn { width: auto; min-width: 160px; }

    .grid--stats .card.stat { padding: var(--space-4); }

    .deflist { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* --- Filtre cubugu ve cipler --------------------------------------- */
.filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.filters__row > * { flex: 1 1 160px; min-width: 0; }

.field--inline { margin-bottom: 0; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Kategori cipleri dar ekranda kendi seridinde kaydirilir;
   sayfa yatay olarak KAYMAZ. */
.chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* min-width:0 olmadan izgara/esnek kapsayicilar icerige gore genisler
       ve masaustunde sayfayi yatay olarak tasirir. */
    min-width: 0;
    max-width: 100%;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
}

.chips--scroll::-webkit-scrollbar { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.chip:hover { color: var(--text); }

.chip--on,
.chip--active {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: var(--accent);
}

.chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Liste alt bilgisi --------------------------------------------- */
.listfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: .85rem;
}

/* --- Islem detayi -------------------------------------------------- */
.txitem { border-bottom: 1px solid var(--border); }
.txitem:last-child { border-bottom: 0; }
.txitem .txrow { border-bottom: 0; }

.txdetail {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.txdetail .deflist { margin-top: 0; }
/* Uzun txn_id / tutar 390px genislikte kutuyu tasirmasin, kirilsin. */
.txdetail .deflist dd { overflow-wrap: anywhere; }

.txdetail__edit { margin-top: var(--space-3); }

.txdetail__edit-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.txdetail__edit-row .select { flex: 1 1 160px; min-width: 0; }

/* --- Bolumlu anahtar (gun/hafta/ay) -------------------------------- */
.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.seg__item {
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.seg__item--on {
    background: var(--accent);
    color: var(--accent-contrast);
}

.seg__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Pay listesi (kategori / ulke) --------------------------------- */
.listrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
}

.listrow:last-child { border-bottom: 0; }

.listrow--action { cursor: pointer; }
.listrow--action:hover { background: var(--surface-2); }

.listrow--action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.listrow__icon {
    flex: 0 0 auto;
    width: 28px;
    text-align: center;
    font-size: 1.05rem;
}

.listrow__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

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

.listrow__label {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listrow__sub { font-size: .78rem; }

.listrow__right { flex: 0 0 auto; text-align: end; }

.listrow__value { font-weight: 650; white-space: nowrap; }
.listrow__share { font-size: .78rem; }

/* --- Yatay cubuk satiri (isyerleri) -------------------------------- */
.barrow {
    display: block;
    width: 100%;
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
}

.barrow:last-child { border-bottom: 0; }

.barrow--action { cursor: pointer; }
.barrow--action:hover .barrow__label { color: var(--accent); }

.barrow--action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.barrow__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.barrow__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.barrow__value { flex: 0 0 auto; font-weight: 650; }

/* Donem toplamina gore gercek pay; cubuk genisliginden bagimsizdir. */
.barrow__share { flex: 0 0 auto; font-size: .78rem; }

.barrow__track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.barrow__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.barrow__sub { margin-top: var(--space-1); font-size: .78rem; }

/* --- Donut kutusu -------------------------------------------------- */
.chart-box--donut { height: 220px; }

/* --- Para yatirma adresi karti -------------------------------------- */
.deposit__coin { margin-bottom: var(--space-3); }

.deposit__network {
    margin-bottom: var(--space-3);
    font-size: .9rem;
}

.deposit__body { margin-top: var(--space-3); }

.deposit__label {
    font-size: .8rem;
    margin-bottom: var(--space-1);
}

/*
 * Adres tek satirda okunabilir olmali ama mobilde TASMAMALI:
 * tabular-nums karakter genisligini sabitler, break-all uzun adresi
 * kutunun icinde kirar.
 */
.deposit__address {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
    overflow-wrap: anywhere;
    user-select: all;
}

.deposit__address + .btn { margin-top: var(--space-3); }

.deposit__tag {
    margin-top: var(--space-3);
    word-break: break-all;
}

.deposit__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-3);
    font-size: .85rem;
}

.deposit__meta {
    margin-top: var(--space-3);
    font-size: .78rem;
}

/* --- Ayarlar ------------------------------------------------------- */
.settings__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.settings__grid .field { margin-bottom: 0; }

.settings__grid .btn { width: 100%; }

.settings__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.settings__logout { margin-top: var(--space-4); }

/* --- Sifre degistirme formu ------------------------------------------ */
.settings__password {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    max-width: 32rem;
}

.settings__subhead {
    margin: 0 0 var(--space-4);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.settings__password .btn { margin-top: var(--space-3); }

/* --- Mobil ust bar: 400px'de yatay tasmayi onler --------------------
   Dil secimi ve senkron metni Ayarlar sekmesinde de bulundugu icin dar
   ekranda gizlenir; dokunma hedefleri 44px korunur. */
@media (max-width: 767px) {
    .topbar { padding-inline: var(--space-3); }

    .topbar__actions { min-width: 0; }

    /* Dil secimi ve cikis dugmesi Ayarlar sekmesinde de bulundugundan
       dar ekranda ust bardan kaldirilir. */
    .topbar__actions #language-select,
    .topbar__actions form { display: none; }

    .topbar__actions .btn { white-space: nowrap; }

    #sync-badge [data-role="sync-label"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    #refresh-button { padding-inline: var(--space-3); }
}

/* --- Erisim gecmisi popup'i (gizli tetikleyiciyle acilir) ---------- */
/*
   Tetikleyici (Ayarlar -> Senkronizasyon altindaki `asset-records` notu)
   BILINCLI OLARAK stillenmemistir: imlec degismez, hover efekti yoktur.
   Kullanici bu yolun gizli kalmasini istedi; gorsel bir ipucu vermek
   amaci bozardi. Bu yuzden burada `.note` icin hicbir kural yoktur.

   Mobil oncelikli: 768px altinda panel TAM EKRAN gibi davranir.
*/
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, .55);
}

/* Arka plan kaydirmasi popup acikken kilitlenir. */
body.modal-open {
    overflow: hidden;
}

.modal__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    /* Dar ekranda tam ekran: yalnizca ust kose yuvarlanir. */
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.modal__title {
    margin: 0;
    font-size: 1.05rem;
    /* Uzun baslik dar ekranda kapatma dugmesini itmesin. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.modal__close {
    flex: 0 0 auto;
    min-width: 40px;
    padding-inline: var(--space-2);
}

.modal__body {
    padding: var(--space-4);
    overflow-y: auto;
    /* Yatay tasma OLMAMALI: uzun IP/User-Agent degerleri sarilir. */
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

.activity__list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.activity__row {
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    text-align: left;
    font: inherit;
    color: inherit;
    min-width: 0;
}

/* Yalnizca oturum ozeti OLAN satirlar tiklanabilir; ipucu burada verilir. */
.activity__row--action {
    cursor: pointer;
}

.activity__row--action:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.activity__row--action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.activity__row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.activity__when {
    font-weight: 600;
    font-size: .9rem;
}

/* Zaman satirinin sag tarafi: sebep metni + rozet. */
.activity__badges {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Basarisizlik sebebi: rozetin yaninda, sessiz bir yardimci metin. */
.activity__reason {
    font-size: .75rem;
    color: var(--text-muted);
}

.activity__event {
    font-size: .85rem;
    color: var(--accent);
}

.activity__meta {
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.activity__subhead {
    margin: var(--space-3) 0 var(--space-1);
    font-size: .95rem;
}

.activity__back {
    min-height: 36px;
    padding-inline: var(--space-3);
    font-size: .85rem;
}

.activity__total {
    margin-top: var(--space-3);
    font-size: .8rem;
}

/* Oturum kullanim ozeti: "son etkinlik · N olay" ve aktif gunler. */
.activity__summary {
    display: grid;
    gap: 2px;
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px dashed var(--border);
}

/* Sayfalama: alt bilginin iki yaninda Onceki/Sonraki. */
.activity__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.activity__pager .btn {
    min-height: 36px;
    padding-inline: var(--space-3);
    font-size: .85rem;
}

.activity__pager .activity__total {
    margin-top: 0;
}

@media (min-width: 768px) {
    /* Genis ekranda ortalanmis, kenarlardan bosluklu panel. */
    .modal {
        align-items: center;
        padding: var(--space-5);
    }

    .modal__panel {
        max-height: min(80vh, 720px);
        border-radius: var(--radius);
    }
}