/* global.css — İDx Trading */

:root {
    --idx-surface-dark: rgba(255, 255, 255, 0.05);
    --idx-surface-light: rgba(255, 255, 255, 0.9);
    --idx-border-dark: rgba(255, 255, 255, 0.1);
    --idx-border-light: rgba(15, 23, 42, 0.12);
}

/* ── Bağlantı renkleri (dark varsayılan, light override aşağıda) ── */
a { color: #60c4de; }
a:hover { color: #93d9ec; text-decoration: underline; }
a:visited { color: #a78bca; }

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.container {
    width: min(1200px, 100%) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* ── Logo küçültme ───────────────────────────────────────────── */
.header img {
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
}

/* Header overflow fix — dropdown'ların kırpılmaması için */
.header {
    overflow: visible !important;
    position: relative;
    z-index: 5;
}

/* ════════════════════════════════════════════════════════════════
   ACCORDION — section-header tıklanabilir başlık, section-body
   help.html ve vps_setup.html tarafından kullanılır
   ════════════════════════════════════════════════════════════════ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 10px;
    padding: 2px 4px;
    border-radius: 8px;
    transition: background 0.15s;
}
.section-header:hover { background: rgba(79, 195, 247, 0.08); }
.section-header h2    { margin-bottom: 0; flex: 1; }
.section-toggle {
    font-size: 16px;
    color: #4fc3f7;
    transition: transform 0.22s;
    flex-shrink: 0;
}
.section.open .section-toggle { transform: rotate(180deg); }
.section-body          { display: none; margin-top: 18px; }
.section.open .section-body { display: block; }

/* ════════════════════════════════════════════════════════════════
   YARDIM / VPS — üst sekme butonları (.help-tabs)
   ════════════════════════════════════════════════════════════════ */
.help-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.help-tab-btn {
    padding: 10px 24px;
    border: 1px solid rgba(79, 195, 247, 0.25);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
    color: #7a8fa8;
    flex: 1;
    min-width: 120px;
    text-align: center;
}
.help-tab-btn:hover  { background: rgba(79, 195, 247, 0.1);  color: #81d4fa; }
.help-tab-btn.active { background: rgba(79, 195, 247, 0.15); color: #4fc3f7; border-color: #4fc3f7; }

@media (max-width: 768px), (pointer: coarse) {
    .help-tab-btn { padding: 10px 14px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   BRAND BAR — Sol üst sabit logo çubuğu (tüm sayfalarda)
   nav.js tarafından body'e enjekte edilir; login sayfasında yok.
   ════════════════════════════════════════════════════════════════ */
.site-brand-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 58px;
    background: rgba(9, 18, 34, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(79, 195, 247, 0.10);
    z-index: 500;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.site-brand-bar a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 10px;
    transition: background .2s;
}
.site-brand-bar a:hover {
    background: rgba(79, 195, 247, 0.09);
}
.site-brand-bar img {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}
.site-brand-bar .logo-text {
    font-size: .9rem;
    font-weight: 700;
    color: #c8d8e8;
    white-space: nowrap;
    line-height: 1;
}
.site-brand-bar .logo-i {
    color: #ffd166;
    font-style: italic;
    font-weight: 900;
    font-size: 1.12em;
    letter-spacing: -0.05em;
}
body.has-brand-bar {
    padding-top: 58px !important;
}

/* ── Sayfa başlığı — tüm şablonlarda standart ─────────────── */
.header h1 {
    text-align: center !important;
    color: #4fc3f7 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.header p {
    text-align: center;
    color: #7a8fa8;
    font-size: .86rem;
    margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════════════
   SİTE NAV — Modern menü sistemi
   ════════════════════════════════════════════════════════════════ */

.site-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    position: static;   /* stacking-context oluşturma — drawer z-index sorununu önler */
}

/* Hamburger — sadece mobilde görünür */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 10px 22px;
    background: rgba(79, 195, 247, 0.12);
    color: #4fc3f7;
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    letter-spacing: 0.4px;
    transition: background 0.2s, color 0.2s;
}
.nav-toggle:hover {
    background: rgba(79, 195, 247, 0.28);
    color: #81d4fa;
}

/* Ana menü satırı */
.nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

/* ── Ortak buton stili ────────────────────────────────────────── */
.nav-link,
.nav-group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(79, 195, 247, 0.12);
    color: #90d8f9;
    text-decoration: none;
    border: 1px solid rgba(79, 195, 247, 0.25);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}

.nav-link:hover,
.nav-group-title:hover {
    background: rgba(79, 195, 247, 0.24);
    border-color: rgba(79, 195, 247, 0.45);
    color: #e0f7fe;
    transform: translateY(-1px);
}

.nav-link.active,
.nav-group-title.active {
    background: rgba(2, 136, 209, 0.32);
    border-color: #0288d1;
    color: #fff;
}

/* ── Ziyaret edilmiş bağlantı renkleri (a:visited override'ını iptal et) ── */
.nav-link:visited,
.nav-group-title:visited { color: #90d8f9; }
.nav-link.active:visited,
.nav-group-title.active:visited { color: #fff; }
.nav-link.nav-logout:visited { color: #ff8a80; }

.nav-link.nav-logout {
    background: rgba(244, 67, 54, 0.10);
    border-color: rgba(244, 67, 54, 0.28);
    color: #ff8a80;
}
.nav-link.nav-logout:hover {
    background: rgba(244, 67, 54, 0.22);
    border-color: rgba(244, 67, 54, 0.55);
    color: #ffcdd2;
}

/* ── İkon sistemi ────────────────────────────────────────────── */
.idx-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.idx-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.nav-link .idx-icon,
.nav-group-title .idx-icon,
.nav-sub a .idx-icon {
    width: 16px;
    height: 16px;
    opacity: 0.95;
    padding: 2px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.idx-icon-heading {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
}

.header h1 .idx-icon,
.section h2 .idx-icon,
.section h3 .idx-icon,
.card h2 .idx-icon,
.card h3 .idx-icon {
    background: transparent;
    border: none;
}

.idx-icon-home     { color: #47c1ff; }
.idx-icon-users    { color: #7cc4ff; }
.idx-icon-chart    { color: #60a5fa; }
.idx-icon-calendar { color: #34d399; }
.idx-icon-mail     { color: #a78bfa; }
.idx-icon-x        { color: #94a3b8; }
.idx-icon-logs     { color: #f59e0b; }
.idx-icon-pending  { color: #facc15; }
.idx-icon-server   { color: #22d3ee; }
.idx-icon-settings { color: #38bdf8; }
.idx-icon-backup   { color: #fb7185; }
.idx-icon-help     { color: #a78bfa; }
.idx-icon-info     { color: #60a5fa; }
.idx-icon-tools    { color: #f97316; }
.idx-icon-logout   { color: #fb7185; }

/* ── Dropdown grup ───────────────────────────────────────────── */
.nav-group {
    position: relative;
}
.nav-arrow {
    font-size: 9px;
    opacity: 0.5;
    transition: transform 0.22s;
    display: inline-block;
    margin-left: 2px;
}

/* Sub-menü panel — desktop hover ile açılır */
.nav-sub {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #0d1b2a;
    border: 1px solid rgba(79, 195, 247, 0.28);
    border-radius: 12px;
    min-width: 190px;
    z-index: 99999;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(79, 195, 247, 0.06);
    transition: opacity 0.18s ease,
                visibility 0s linear 0.22s,
                pointer-events 0s linear 0.22s;
}
.nav-sub::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(79, 195, 247, 0.28);
}
.nav-sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: #aac8d8;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav-sub a:hover {
    background: rgba(79, 195, 247, 0.12);
    color: #4fc3f7;
}
.nav-sub a.active {
    color: #4fc3f7;
    font-weight: 700;
    background: rgba(79, 195, 247, 0.08);
}

/* Desktop dropdown — JS tarafından .open sınıfıyla açılır/kapanır */
.nav-sub.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.18s ease;
}
.nav-group.sub-open .nav-arrow {
    transform: rotate(180deg);
}

/* ── Backdrop (JS tarafından body'e eklenir) ─────────────────── */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}


/* ✕ Kapat butonu — masaüstünde gizli, mobil/tablet'te görünür */
.nav-close-btn {
    display: none;
}

/* ════════════════════════════════════════════════════════════════
   MOBİL + TABLET TOUCH (≤768px veya pointer:coarse) — Sağdan açılan drawer
   pointer:coarse = dokunmatik birincil giriş (tablet, telefon)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (pointer: coarse) {
    .header img {
        width: 175px !important;
        max-width: 175px !important;
    }

    /* Brand bar — mobilde metin gizle, sadece ikon */
    .site-brand-bar { height: 52px; }
    .site-brand-bar img { width: 38px; height: 38px; border-radius: 8px; }
    .site-brand-bar .logo-text { display: none; }
    body.has-brand-bar { padding-top: 52px !important; }

    /* Hamburger butonunun üstündeki boşluğu sıfırla */
    .site-nav {
        margin-top: 2px;
    }

    .nav-toggle {
        display: flex;
    }

    /* ── Drawer panel ──────────────────────────────────────────── */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        height: 100vh; /* fallback */
        width: min(300px, 85vw);
        background: #060f1a;
        border-left: 1px solid rgba(79, 195, 247, 0.18);
        z-index: 10001;    /* backdrop (10000) üstünde */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.65);
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.28s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .nav-menu.open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
    }

    /* ── ✕ Kapat butonu — ilk nav öğesinin sağında ─────────────── */
    .nav-link.nav-first-item {
        justify-content: space-between;
    }
    .nav-close-btn {
        width: 30px;
        align-self: stretch;   /* satır yüksekliğine uy — Ana Sayfa'yı diğerlerinden farklı yapma */
        flex-shrink: 0;
        border-radius: 6px;
        border: 1px solid rgba(79, 195, 247, 0.2);
        background: rgba(255, 255, 255, 0.05);
        color: #aac8d8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
        transition: background 0.15s, color 0.15s;
    }
    .nav-close-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    /* ── Nav öğeleri ───────────────────────────────────────────── */
    .nav-link,
    .nav-group-title {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: transparent;
        color: #f2f8ff;
        white-space: normal;
        transform: none !important;
    }
    .nav-link:hover,
    .nav-group-title:hover {
        background: rgba(79, 195, 247, 0.2);
        color: #fff;
        transform: none !important;
    }
    .nav-link.active {
        color: #4fc3f7;
        background: rgba(79, 195, 247, 0.12);
        border-left: 3px solid #4fc3f7;
        padding-left: 11px;
    }
    .nav-group-title.active {
        color: #4fc3f7;
        background: rgba(79, 195, 247, 0.08);
    }
    .nav-group-title {
        font-size: 13px !important;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        color: #deefff !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        border-top: 1px solid rgba(79, 195, 247, 0.08) !important;
    }
    .nav-group:first-child .nav-group-title {
        border-top: none !important;
    }
    .nav-group-title.active {
        color: #4fc3f7 !important;
    }
    .nav-group {
        width: 100%;
    }

    /* ── Sub-menüler: daima görünür, statik ───────────────────── */
    .nav-sub {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.03);
        border: none;
        border-left: 2px solid rgba(79, 195, 247, 0.18);
        border-radius: 0;
        box-shadow: none;
        padding: 4px 0 8px;
        min-width: unset;
        margin-left: 20px;
    }
    .nav-sub::before { display: none; }
    .nav-sub a {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 0;
        color: #e6f4ff;
        white-space: normal;
    }
    .nav-sub a:hover {
        background: rgba(79, 195, 247, 0.10);
        color: #4fc3f7;
    }
    .nav-sub a.active {
        color: #4fc3f7;
        font-weight: 600;
        background: rgba(79, 195, 247, 0.10);
    }

    .nav-arrow { display: none; }

    /* Sticky alt çubuk — logout + tema daima görünür */
    .nav-bottom-wrap {
        position: sticky;
        bottom: 0;
        background: #0d1b2a;
        z-index: 2;
        flex-shrink: 0;
        border-top: 1px solid rgba(79, 195, 247, 0.15);
    }
    .nav-bottom-wrap .nav-link.nav-logout {
        width: 100%;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(244, 67, 54, 0.2);
        margin: 0;
    }

    /* Theme wrap — nav-bottom-wrap içinde */
    .nav-theme-wrap {
        margin-left: 0;
        margin-top: 0;
        padding: 12px 16px;
        display: flex;
        justify-content: center;
        flex-shrink: 0;
    }

    .nav-link .idx-icon,
    .nav-group-title .idx-icon,
    .nav-sub a .idx-icon {
        width: 14px;
        height: 14px;
        padding: 1px;
        border-radius: 4px;
    }
    .idx-icon-heading {
        width: 16px;
        height: 16px;
    }

    /* ── Mobil tablo: yatay kaydırma (son sütun gizlenmesin) ──── */
    .card,
    .section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tablo başlıkları sarmasın → tablo kendi genişliğini korusun */
    th {
        white-space: nowrap;
    }

    /* Aksiyon butonları: dokunma hedefi iyileştirmesi */
    td .btn,
    td a.btn {
        padding: 7px 9px !important;
        font-size: 12px !important;
        min-height: 34px;
        display: inline-flex !important;
        align-items: center;
        white-space: nowrap;
    }

    /* Form elemanları inline kalabilsin */
    td form {
        display: inline-flex !important;
        align-items: center;
    }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — Copyright
   ════════════════════════════════════════════════════════════════ */
.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: #2e4358;
    color: #f5f7fa;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.site-footer p { margin: 0; }
/* Evrensel marka İ stili — başlık, footer ve brand bar'da ortak */
.idx-brand-i {
    font-size: 1.18em;
    font-weight: 900;
    color: #ffd166;
    letter-spacing: -0.12em;
    font-style: italic;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.site-footer .footer-brand {
    color: #f5f7fa;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.site-footer .footer-i {
    font-size: 1.18em;
    font-weight: 900;
    color: #ffd166;
    letter-spacing: -0.05em;
    font-style: italic;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* ════════════════════════════════════════════════════════════════
   TEMA DEĞİŞTİRİCİ
   ════════════════════════════════════════════════════════════════ */
.nav-theme-toggle,
.floating-theme-toggle {
    display: inline-flex;
    align-items: center;
}
.floating-theme-toggle {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 100000;
    display: none;
}
.theme-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(14, 21, 35, 0.65);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 10px;
    overflow: hidden;
}
.theme-mode-btn {
    width: 44px;
    height: 36px;
    border: none;
    background: transparent;
    color: #8f9caf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-mode-btn:hover {
    color: #e0f7fe;
    background: rgba(255, 255, 255, 0.06);
}
.theme-mode-btn.active {
    background: rgba(0, 0, 0, 0.6);
    color: #f5f8ff;
}
.theme-switcher .theme-mode-btn + .theme-mode-btn {
    border-left: 1px solid rgba(79, 195, 247, 0.14);
}
.nav-theme-wrap {
    margin-left: 6px;
}

/* ════════════════════════════════════════════════════════════════
   AÇIK TEMA (LIGHT MODE)
   ════════════════════════════════════════════════════════════════ */
html[data-theme='light'] body {
    background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%) !important;
    color: #0f172a !important;
}

html[data-theme='light'] .site-brand-bar {
    background: rgba(240, 246, 252, 0.94);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
html[data-theme='light'] .site-brand-bar .logo-text {
    color: #1e2d40;
}
html[data-theme='light'] .site-brand-bar .logo-i {
    color: #b8860b;
}

html[data-theme='light'] .header,
html[data-theme='light'] .section,
html[data-theme='light'] .card,
html[data-theme='light'] .login-container,
html[data-theme='light'] .table-container,
html[data-theme='light'] .calendar-section {
    background: var(--idx-surface-light) !important;
    border-color: var(--idx-border-light) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

html[data-theme='light'] .header h1 {
    color: #1a6fa8 !important;
}
html[data-theme='light'] .idx-brand-i {
    color: #b8860b;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
html[data-theme='light'] .header p {
    color: #4a6080;
}

html[data-theme='light'] .header h1,
html[data-theme='light'] .section h2,
html[data-theme='light'] .section h3,
html[data-theme='light'] .form-group label,
html[data-theme='light'] .muted,
html[data-theme='light'] p,
html[data-theme='light'] td,
html[data-theme='light'] th,
html[data-theme='light'] li,
html[data-theme='light'] span,
html[data-theme='light'] div,
html[data-theme='light'] label,
html[data-theme='light'] small,
html[data-theme='light'] strong,
html[data-theme='light'] em {
    color: #1e293b;
}

/* Bilinçli renkli öğeleri (buton, badge, ikon, link) geri al */
html[data-theme='light'] a { color: #1d4ed8; }
html[data-theme='light'] a:hover { color: #1e40af; }
html[data-theme='light'] a:visited { color: #6d28d9; }
html[data-theme='light'] .btn,
html[data-theme='light'] button { color: inherit; }
html[data-theme='light'] .idx-icon { color: inherit; }
html[data-theme='light'] .site-footer,
html[data-theme='light'] .site-footer * { color: #334155; }
html[data-theme='light'] .footer-brand { color: #0f172a; }

/* ── Inline style renk override'ları (template hardcoded) ── */
/* Soluk koyu-tema renkleri → okunaklı açık tema renkleri */
html[data-theme='light'] [style*="color:#aaa"],
html[data-theme='light'] [style*="color: #aaa"],
html[data-theme='light'] [style*="color:#888"],
html[data-theme='light'] [style*="color: #888"],
html[data-theme='light'] [style*="color:#999"],
html[data-theme='light'] [style*="color:#9e9e9e"],
html[data-theme='light'] [style*="color: #9e9e9e"] { color: #64748b !important; }

html[data-theme='light'] [style*="color:#ccc"],
html[data-theme='light'] [style*="color: #ccc"],
html[data-theme='light'] [style*="color:#eee"],
html[data-theme='light'] [style*="color: #eee"],
html[data-theme='light'] [style*="color:#e0e0e0"] { color: #374151 !important; }

html[data-theme='light'] [style*="color:#4fc3f7"],
html[data-theme='light'] [style*="color: #4fc3f7"] { color: #0369a1 !important; }

html[data-theme='light'] [style*="color:#81d4fa"],
html[data-theme='light'] [style*="color: #81d4fa"] { color: #0284c7 !important; }

html[data-theme='light'] [style*="color:#79c0ff"],
html[data-theme='light'] [style*="color:#90caf9"] { color: #1e40af !important; }

/* Seans pill kırmızı/turuncu → koyu kırmızı */
html[data-theme='light'] [style*="color:#ff8a80"],
html[data-theme='light'] [style*="color:#ff8a65"] { color: #b91c1c !important; }

/* Seans pill yeşil → koyu yeşil */
html[data-theme='light'] [style*="color:#69f0ae"] { color: #16a34a !important; }

/* Seans pill altın/amber/turuncu → koyu amber */
html[data-theme='light'] [style*="color:#ffd54f"],
html[data-theme='light'] [style*="color:#ffca28"],
html[data-theme='light'] [style*="color:#ffb74d"] { color: #b45309 !important; }

/* Seans pill mor/indigo → koyu mor */
html[data-theme='light'] [style*="color:#9fa8da"] { color: #4338ca !important; }

/* Seans pill sarı-yeşil → koyu lime */
html[data-theme='light'] [style*="color:#d4e157"] { color: #65a30d !important; }

html[data-theme='light'] [style*="color:#fff176"],
html[data-theme='light'] [style*="color:#ffd166"],
html[data-theme='light'] [style*="color:#ffcc80"],
html[data-theme='light'] [style*="color:#ef9a9a"],
html[data-theme='light'] [style*="color:#a5d6a7"],
html[data-theme='light'] [style*="color:#ce93d8"],
html[data-theme='light'] [style*="color:#4db6ac"] { color: #1e293b !important; }

/* Dark inline backgrounds → transparent/light */
html[data-theme='light'] [style*="background:rgba(0,0,0,"],
html[data-theme='light'] [style*="background: rgba(0,0,0,"],
html[data-theme='light'] [style*="background:#21262d"],
html[data-theme='light'] [style*="background: #21262d"],
html[data-theme='light'] [style*="background:#0d1117"],
html[data-theme='light'] [style*="background: #0d1117"] {
    background: rgba(37, 99, 235, 0.06) !important;
}

/* Dark inline borders → light borders */
html[data-theme='light'] [style*="border:1px solid rgba(255,255,255"],
html[data-theme='light'] [style*="border: 1px solid rgba(255,255,255"] {
    border-color: rgba(15, 23, 42, 0.18) !important;
}

html[data-theme='light'] .btn,
html[data-theme='light'] .btn-primary,
html[data-theme='light'] .btn-info,
html[data-theme='light'] .btn-success,
html[data-theme='light'] .btn-danger,
html[data-theme='light'] .btn-warning {
    color: #0f172a;
}

html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea {
    background: #f8fbff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

html[data-theme='light'] table tr:hover {
    background: rgba(30, 41, 59, 0.04);
}

html[data-theme='light'] pre {
    background: #f8fbff !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
}

html[data-theme='light'] code {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1e40af !important;
}

html[data-theme='light'] .inline-code {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1e3a8a !important;
}

html[data-theme='light'] th {
    background: #edf4ff !important;
    color: #1e3a8a !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme='light'] td {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme='light'] .warning,
html[data-theme='light'] .success,
html[data-theme='light'] .info,
html[data-theme='light'] .info-box,
html[data-theme='light'] .vps-banner {
    color: #1e293b !important;
}

html[data-theme='light'] .warning {
    background: rgba(245, 158, 11, 0.16) !important;
    border-left-color: #d97706 !important;
}

html[data-theme='light'] .success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-left-color: #16a34a !important;
}

html[data-theme='light'] .info,
html[data-theme='light'] .info-box,
html[data-theme='light'] .vps-banner {
    background: rgba(56, 189, 248, 0.14) !important;
    border-left-color: #0284c7 !important;
}

html[data-theme='light'] .file-name {
    background: #eef5ff !important;
    color: #1e3a8a !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme='light'] .copy-btn {
    background: #1d4ed8 !important;
    color: #fff !important;
}

html[data-theme='light'] .copy-btn:hover {
    background: #1e40af !important;
}

html[data-theme='light'] .step-number {
    background: #38bdf8 !important;
    color: #0f172a !important;
}

html[data-theme='light'] .status-ok {
    color: #15803d !important;
}

html[data-theme='light'] .status-error {
    color: #b91c1c !important;
}

html[data-theme='light'] .nav-link,
html[data-theme='light'] .nav-group-title {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.2);
}

html[data-theme='light'] .nav-link:visited,
html[data-theme='light'] .nav-group-title:visited { color: #1d4ed8; }
html[data-theme='light'] .nav-link.active:visited,
html[data-theme='light'] .nav-group-title.active:visited { color: #fff; }

html[data-theme='light'] .nav-link .idx-icon,
html[data-theme='light'] .nav-group-title .idx-icon,
html[data-theme='light'] .nav-sub a .idx-icon {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.15);
}

html[data-theme='light'] .nav-sub {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.2);
}

html[data-theme='light'] .nav-sub a {
    color: #334155;
}

html[data-theme='light'] .nav-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(37, 99, 235, 0.2);
}

html[data-theme='light'] .nav-toggle {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.25);
}

html[data-theme='light'] .nav-backdrop {
    background: rgba(0, 0, 0, 0.4);
}

/* Açık tema — mobil + tablet touch özel */
@media (max-width: 768px), (pointer: coarse) {
    .floating-theme-toggle {
        display: inline-flex;
        right: max(10px, env(safe-area-inset-right));
        top: max(10px, env(safe-area-inset-top));
        bottom: auto;
    }

    body.nav-drawer-open .floating-theme-toggle {
        display: none !important;
    }

    .theme-mode-btn {
        width: 40px;
        height: 34px;
    }

    .nav-link .idx-icon,
    .nav-group-title .idx-icon,
    .nav-sub a .idx-icon {
        width: 14px;
        height: 14px;
        padding: 1px;
        border-radius: 4px;
    }

    .idx-icon-heading {
        width: 16px;
        height: 16px;
    }

    .nav-theme-wrap {
        margin-left: 0;
        margin-top: 6px;
        display: flex;
        justify-content: center;
    }

    html[data-theme='light'] .nav-menu {
        background: #f8faff;
        border-color: rgba(37, 99, 235, 0.18);
    }
    html[data-theme='light'] .nav-close-btn {
        border-color: rgba(37, 99, 235, 0.2);
        color: #64748b;
        background: rgba(37, 99, 235, 0.05);
    }
    html[data-theme='light'] .nav-link,
    html[data-theme='light'] .nav-group-title {
        color: #1e293b;
        border-bottom-color: rgba(37, 99, 235, 0.06);
        background: transparent;
    }
    html[data-theme='light'] .nav-link:hover,
    html[data-theme='light'] .nav-group-title:hover {
        background: rgba(37, 99, 235, 0.06);
    }
    html[data-theme='light'] .nav-link.active {
        color: #1d4ed8;
        background: rgba(37, 99, 235, 0.08);
        border-left-color: #1d4ed8;
    }
    html[data-theme='light'] .nav-group-title {
        color: rgba(29, 78, 216, 0.75) !important;
    }
    html[data-theme='light'] .nav-group-title.active {
        color: #1d4ed8 !important;
    }
    html[data-theme='light'] .nav-sub {
        background: rgba(37, 99, 235, 0.04);
        border-color: rgba(37, 99, 235, 0.15);
    }
    html[data-theme='light'] .nav-sub a {
        color: #475569;
    }
    html[data-theme='light'] .nav-sub a.active {
        color: #1d4ed8;
        background: rgba(37, 99, 235, 0.08);
    }
    html[data-theme='light'] .nav-bottom-wrap {
        background: #f8faff;
        border-top-color: rgba(37, 99, 235, 0.15);
    }
    html[data-theme='light'] .nav-theme-wrap {
        border-top-color: rgba(37, 99, 235, 0.15);
    }
}

/* Light tema — takvim */
html[data-theme='light'] .day-btn {
    background: rgba(37, 99, 235, 0.08);
    color: #334155;
}
html[data-theme='light'] .day-btn:hover {
    background: rgba(37, 99, 235, 0.16);
    color: #0f172a;
}
html[data-theme='light'] .day-btn.active {
    background: #38bdf8;
    color: #0b1320;
}

html[data-theme='light'] #economicCalendar,
html[data-theme='light'] #economicCalendar .event-name,
html[data-theme='light'] #economicCalendar .calendar-header,
html[data-theme='light'] #economicCalendar .calendar-footer,
html[data-theme='light'] #economicCalendar a {
    color: #1e293b;
}
html[data-theme='light'] #economicCalendar .event-row {
    background: rgba(2, 6, 23, 0.04);
}
html[data-theme='light'] #economicCalendar .event-row.low {
    background: rgba(34, 197, 94, 0.12);
}
html[data-theme='light'] #economicCalendar .event-row.medium {
    background: rgba(245, 158, 11, 0.17);
}
html[data-theme='light'] #economicCalendar .event-row.high {
    background: rgba(239, 68, 68, 0.14);
}
html[data-theme='light'] #economicCalendar .event-time {
    color: #0284c7;
}
html[data-theme='light'] #economicCalendar .event-translation {
    background: rgba(234, 179, 8, 0.16);
    color: #854d0e;
    border-color: rgba(202, 138, 4, 0.45);
}

/* Light tema — tema switcher & footer */
html[data-theme='light'] .theme-switcher {
    background: rgba(210, 227, 247, 0.9);
    border-color: rgba(37, 99, 235, 0.25);
}
html[data-theme='light'] .theme-mode-btn {
    color: #64748b;
}
html[data-theme='light'] .theme-mode-btn.active {
    background: rgba(255, 255, 255, 0.95);
    color: #1d4ed8;
}

html[data-theme='light'] .site-footer {
    background: #d4e5f6;
    border-top-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}
html[data-theme='light'] .site-footer .footer-brand {
    color: #0f172a;
}

/* ── Section başlığı / accordion ── */
html[data-theme='light'] .section-header h2 { color: #1a6fa8 !important; }
html[data-theme='light'] .section-toggle { color: #1a6fa8 !important; }
html[data-theme='light'] .section-header:hover { background: rgba(26,111,168,0.05); border-radius: 8px; }

/* ── Bölüm sol borduru ── */
html[data-theme='light'] .section { border-left-color: #38bdf8 !important; }

/* ── Tablo overflow wrapper ── */
html[data-theme='light'] .card,
html[data-theme='light'] .table-container { background: #ffffff !important; }

/* ── Form elemanları (settings inline style override) ── */
html[data-theme='light'] input[style],
html[data-theme='light'] select[style],
html[data-theme='light'] textarea[style] {
    background: #f8fbff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

/* ── Bilgi kutusu başlıkları ── */
html[data-theme='light'] .info-box h4,
html[data-theme='light'] .info-box p { color: #1e293b !important; }

/* ── settings.html özel öğeler ── */
html[data-theme='light'] .settings-grid .setting-item { border-color: rgba(15,23,42,0.1) !important; }
html[data-theme='light'] .key { color: #1a6fa8 !important; }
html[data-theme='light'] .value { color: #0f172a !important; }
html[data-theme='light'] .description { color: #64748b !important; }
html[data-theme='light'] .add-form { background: rgba(37,99,235,0.05) !important; border-color: rgba(37,99,235,0.15) !important; }
html[data-theme='light'] .modal-content { background: #f0f6ff !important; border-color: rgba(37,99,235,0.2) !important; }
html[data-theme='light'] .modal-content h3 { color: #1a6fa8 !important; }

/* ── Logs sayfası ── */
html[data-theme='light'] .log-entry { border-color: rgba(15,23,42,0.1) !important; }
html[data-theme='light'] .log-entry:hover { background: rgba(37,99,235,0.04) !important; }

/* ── Message/flash ── */
html[data-theme='light'] .message { color: #1e293b !important; }
html[data-theme='light'] .message.success { background: rgba(34,197,94,0.12) !important; border-color: #16a34a !important; }
html[data-theme='light'] .message.error { background: rgba(239,68,68,0.1) !important; border-color: #dc2626 !important; }

/* ════════════════════════════════════════════════════════════════
   TABLET OVERRIDE — Logo boyutu (pointer:coarse geniş ekranlarda)
   Tablette drawer açılır ama logo masaüstü boyutunda kalır (≥769px)
   ════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (min-width: 769px) {
    .header img {
        width: 220px !important;
        max-width: 220px !important;
    }
    /* Tablette menü öğeleri daha sık — daha fazlası ekrana sığar */
    .nav-link,
    .nav-group-title {
        padding: 10px 16px;
    }
    .nav-link.active {
        padding-left: 13px;
    }
    .nav-sub a {
        padding: 8px 14px;
    }
    .nav-theme-wrap {
        padding: 10px 16px;
    }
}

/* ════════════════════════════════════════════════════════════════
   YARDIM SAYFASI — Tab + Accordion light theme + mobil
   ════════════════════════════════════════════════════════════════ */
html[data-theme='light'] .help-tab-btn {
    background: rgba(0,0,0,0.05);
    color: #5a7a99;
    border-color: rgba(26,111,168,0.25);
}
html[data-theme='light'] .help-tab-btn:hover {
    background: rgba(26,111,168,0.1);
    color: #1a6fa8;
}
html[data-theme='light'] .help-tab-btn.active {
    background: rgba(26,111,168,0.12);
    color: #1a6fa8;
    border-color: #1a6fa8;
}

@media (max-width: 768px), (pointer: coarse) {
    .help-tab-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ════════════════════════════════════════════════════════════════
   AÇIK TEMA — Ek inline renk + border + sınıf override'ları
   ════════════════════════════════════════════════════════════════ */

/* ── #666 / #777 inline renk düzeltme ── */
html[data-theme='light'] [style*="color:#666"],
html[data-theme='light'] [style*="color: #666"] { color: #475569 !important; }
html[data-theme='light'] [style*="color:#777"],
html[data-theme='light'] [style*="color: #777"] { color: #64748b !important; }

/* ── Koyu inline border-bottom (mail_summary.html) ── */
html[data-theme='light'] [style*="border-bottom:1px solid #334"],
html[data-theme='light'] [style*="border-bottom: 1px solid #334"],
html[data-theme='light'] [style*="border-bottom:1px solid #2a2f45"],
html[data-theme='light'] [style*="border-bottom: 1px solid #2a2f45"] {
    border-bottom-color: rgba(15,23,42,0.15) !important;
}

/* ── Koyu inline background + border (scheduled_tasks.html) ── */
html[data-theme='light'] [style*="background:#2a2a2a"],
html[data-theme='light'] [style*="background: #2a2a2a"] {
    background: rgba(37,99,235,0.05) !important;
}
html[data-theme='light'] [style*="border:1px solid #444"],
html[data-theme='light'] [style*="border: 1px solid #444"] {
    border-color: rgba(15,23,42,0.18) !important;
}
html[data-theme='light'] [style*="border-left:3px solid #444"],
html[data-theme='light'] [style*="border-left: 3px solid #444"] {
    border-left-color: rgba(15,23,42,0.25) !important;
}

/* ── Form input border (şablon <style> bloklarında #30363d border var) ── */
html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea {
    border-color: rgba(15,23,42,0.2) !important;
}

/* ── backup_restore.html: .stats ve .list-table sınıf override'ı ── */
html[data-theme='light'] .stats th,
html[data-theme='light'] .stats td,
html[data-theme='light'] .list-table th,
html[data-theme='light'] .list-table td {
    border-color: rgba(15,23,42,0.15) !important;
    color: #1e293b !important;
}
html[data-theme='light'] .stats th,
html[data-theme='light'] .list-table th {
    background: rgba(37,99,235,0.07) !important;
    color: #1e3a8a !important;
}

/* ── Açılış Ekranı (Splash Screen) ──────────────────────────────────── */
#idx-trading-splash {
    position: fixed; inset: 0; z-index: 99999;
    background: #1a1a2e;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.2rem;
    transition: opacity .4s ease, visibility .4s ease;
}
#idx-trading-splash.splash-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#idx-trading-splash-logo {
    width: 96px; height: 96px; border-radius: 20px;
    animation: idx-t-splash-pop .55s cubic-bezier(.3,1.4,.5,1) both;
    box-shadow: 0 8px 36px rgba(79,195,247,.25);
}
#idx-trading-splash-title {
    font-size: 1.35rem; font-weight: 700; color: #8eb8cc;
    letter-spacing: .04em; font-family: system-ui, sans-serif;
    opacity: 0; animation: idx-t-splash-fadein .4s .35s ease both;
}
#idx-trading-splash-title .idx-mark { color: #4fc3f7; }
#idx-trading-splash-dots {
    display: flex; gap: 8px;
    opacity: 0; animation: idx-t-splash-fadein .3s .6s ease both;
}
#idx-trading-splash-dots span {
    width: 7px; height: 7px; background: #4fc3f7; border-radius: 50%;
    animation: idx-t-splash-dot 1.2s .6s ease-in-out infinite;
}
#idx-trading-splash-dots span:nth-child(2) { animation-delay: .8s; }
#idx-trading-splash-dots span:nth-child(3) { animation-delay: 1s; }
@keyframes idx-t-splash-pop {
    from { transform: scale(.55); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@keyframes idx-t-splash-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes idx-t-splash-dot {
    0%, 80%, 100% { transform: scale(.55); opacity: .35; }
    40%           { transform: scale(1);  opacity: 1; }
}
#idx-trading-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    z-index: 100000; pointer-events: none;
    background: linear-gradient(90deg, #4fc3f7, #38bdf8, #7dd3fc);
    border-radius: 0 2px 2px 0;
    transition: width .3s ease, opacity .3s ease;
    opacity: 0;
}
#idx-trading-progress.active { opacity: 1; }