/* ============================================================
   Vyral — Tema
   Renkler logodan: mor #8A3DFF · indigo #5433FD · lila #B167FD
   mavi #359BFF · camgöbeği #34C6FF · koyu indigo #212DB6
   Yapı AtmoSpaceWeb ile aynı: :root değişkenleri + [data-theme].
   Bootstrap bileşenleri [data-bs-theme] ile aynı anda uyarlanır.
   ============================================================ */

:root {
    --brand-violet:  #8a3dff;
    --brand-indigo:  #5433fd;
    --brand-lilac:   #b167fd;
    --brand-blue:    #359bff;
    --brand-cyan:    #34c6ff;
    --brand-deep:    #212db6;
    --brand-gradient: linear-gradient(135deg, #8a3dff 0%, #5433fd 48%, #34c6ff 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(138, 61, 255, .16), rgba(52, 198, 255, .12));

    --radius:    18px;
    --radius-sm: 10px;
    --font-display: "Sora", -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
}

/* ===== Koyu tema (varsayılan) ===== */
:root,
:root[data-theme="dark"] {
    --bg-deep:      #08070e;
    --bg-base:      #0d0b1a;
    --bg-surface:   #14112a;
    --bg-surface-2: #1b1736;
    --bg-elevated:  #241e46;

    --accent:       #7c5cff;
    --accent-hover: #9178ff;
    --accent-soft:  rgba(124, 92, 255, .16);
    --link:         #5cc8ff;
    --link-hover:   #8ad8ff;

    --text-primary:   #f3f1ff;
    --text-secondary: #aaa4cc;
    --text-muted:     #706a94;

    --border:        rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .14);
    --topbar-bg:     rgba(13, 11, 26, .78);
    --shadow:        0 14px 36px rgba(0, 0, 0, .45);
    --focus-ring:    rgba(124, 92, 255, .45);
}

/* ===== Açık tema ===== */
:root[data-theme="light"] {
    --bg-deep:      #f4f3fa;
    --bg-base:      #ffffff;
    --bg-surface:   #ffffff;
    --bg-surface-2: #f7f6fc;
    --bg-elevated:  #ecebf6;

    --accent:       #5433fd;
    --accent-hover: #4423e6;
    --accent-soft:  rgba(84, 51, 253, .10);
    --link:         #2d62d8;
    --link-hover:   #1d4bb3;

    --text-primary:   #0e0b1f;
    --text-secondary: #4d4868;
    --text-muted:     #8a85a3;

    --border:        rgba(14, 11, 31, .10);
    --border-strong: rgba(14, 11, 31, .18);
    --topbar-bg:     rgba(255, 255, 255, .85);
    --shadow:        0 10px 30px rgba(40, 24, 110, .10);
    --focus-ring:    rgba(84, 51, 253, .30);
}

/* ===== Bootstrap değişkenlerini temaya bağla ===== */
[data-bs-theme] {
    --bs-body-bg: var(--bg-deep);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-secondary-bg: var(--bg-elevated);
    --bs-tertiary-bg: var(--bg-surface-2);
    --bs-border-color: var(--border-strong);
    --bs-border-color-translucent: var(--border);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 92, 200, 255;
    --bs-link-hover-color: var(--link-hover);
    --bs-link-hover-color-rgb: 138, 216, 255;
    --bs-primary: var(--accent);
    --bs-primary-rgb: 124, 92, 255;
    --bs-primary-bg-subtle: var(--accent-soft);
    --bs-primary-text-emphasis: var(--accent-hover);
    --bs-primary-border-subtle: var(--accent);
    --bs-info: var(--brand-cyan);
    --bs-info-rgb: 52, 198, 255;
    --bs-focus-ring-color: var(--focus-ring);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-font-sans-serif: var(--font-body);
}
[data-bs-theme="light"] {
    --bs-link-color-rgb: 45, 98, 216;
    --bs-link-hover-color-rgb: 29, 75, 179;
    --bs-primary-rgb: 84, 51, 253;
}

/* ===== Tipografi (AtmoSpaceWeb ölçeği) =====
   Gövde 15px sabit; Bootstrap'in rem tabanlı aralıkları da buna göre ölçeklenir.
   Başlıklar Sora, metin Plus Jakarta Sans. */
html { font-size: 15px; }

body {
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(138, 61, 255, .10), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(52, 198, 255, .07), transparent 60%),
        var(--bg-deep);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] body {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(138, 61, 255, .07), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(52, 198, 255, .06), transparent 60%),
        var(--bg-deep);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-4, .display-5, .display-6, .fs-1, .fs-2, .fs-3, .fs-4 {
    font-family: var(--font-display);
    color: var(--text-primary);
}
/* Değerler atmospace.com.tr'den ölçüldü (Sora başlık / Plus Jakarta Sans metin). */
h1, .h1 { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
/* Bölüm başlığı (AtmoSpace h2: 32.8px/800, -0.8px) */
h2, .h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
/* Sayfa başlıkları görünümlerde h1.h3 olarak kullanılıyor (AtmoSpace .page-title: 28px/700) */
h3, .h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; }
h4, .h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
/* Kart başlığı (AtmoSpace kart h3: 19px/700) */
h5, .h5 { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }
/* Kart içi alt başlık */
h6, .h6 { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; }
@media (max-width: 640px) {
    h1, .h1 { font-size: 28px; }
    h2, .h2 { font-size: 25px; }
    h3, .h3 { font-size: 23px; }
}

/* Vitrin başlığı (AtmoSpace hero: clamp(34px, 6vw, 62px)/800, -1.5px, lh 1.06) */
.display-4, .display-5 { font-weight: 800; font-size: clamp(34px, 6vw, 60px); letter-spacing: -1.5px; line-height: 1.06; }
.display-6 { font-weight: 800; font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -1px; line-height: 1.1; }
/* Vitrin alt metni (AtmoSpace .mk-hero-sub: 18px, lh 1.6) */
.lead { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; font-weight: 400; color: var(--text-secondary); }
p { line-height: 1.6; }

/* Üst etiket (AtmoSpace .mk-badge: 13.5px/600, yuvarlak) */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(124, 92, 255, .28);
    color: var(--accent);
    font-size: 13.5px; font-weight: 600;
}
:root[data-theme="dark"] .eyebrow { color: #b8a8ff; }

/* Büyük sayılar (skor, bakiye) — AtmoSpaceWeb .stat-card .val: 30px/700 */
.fs-1 { font-size: 40px !important; font-weight: 800; letter-spacing: -1px; }
.fs-2 { font-size: 34px !important; letter-spacing: -0.8px; }
.fs-3 { font-size: 30px !important; letter-spacing: -0.6px; line-height: 1.1; }
.fs-4 { font-size: 24px !important; letter-spacing: -0.4px; line-height: 1.15; }
.fs-5 { font-size: 17px !important; }
.fs-6 { font-size: 15px !important; }

/* İkincil metin (AtmoSpace kart metni 14px, notlar 13.5px) */
small, .small { font-size: 13.5px; line-height: 1.55; }
.text-muted, .text-body-secondary { color: var(--text-secondary) !important; }
.form-text { font-size: 13px; color: var(--text-muted); }

/* Form (AtmoSpace .field label: 13px/600; alan 14px, 12px köşe) */
.form-label, legend.fs-6 { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.form-control, .form-select { font-size: 14.5px; padding: .72rem .95rem; border-radius: 12px; }
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { font-size: 13px; padding: .4rem .7rem; border-radius: 10px; }
.form-check-label { font-size: 14.5px; }
.form-check-label.small { font-size: 13.5px; }

/* Rozet ve tablo başlıkları (küçük, aralıklı) */
.badge { font-size: 11.5px; letter-spacing: .2px; }
.table { font-size: 14px; }
.table.small, .table-sm { font-size: 13px; }
.table > thead th { font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .4px; }
dl dt { font-weight: 600; color: var(--text-secondary); }

a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:hover, .nav-link:hover, .list-group-item-action:hover, .navbar-brand:hover { text-decoration: none; }

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

::selection { background: rgba(124, 92, 255, .35); }

/* ===== Üst bar ===== */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--topbar-bg);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.app-topbar .nav-link {
    color: var(--text-secondary);
    font-size: 14.5px;
    font-weight: 500;
    border-radius: 10px;
    padding: .45rem .8rem !important;
}
.app-topbar .nav-link:hover,
.app-topbar .nav-link.active { color: var(--text-primary); background: var(--accent-soft); }
.app-topbar .navbar-toggler { border-color: var(--border-strong); border-radius: 12px; padding: 7px 10px; }

/* Logo: temaya göre doğru sürüm */
.brand-logo { height: 30px; width: auto; display: block; }
.brand-logo-lg { height: auto; width: min(520px, 90%); }
.logo-for-light { display: none; }
:root[data-theme="light"] .logo-for-dark { display: none; }
:root[data-theme="light"] .logo-for-light { display: block; }

.theme-toggle {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: color .15s, border-color .15s, transform .15s;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--accent); }

.credit-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}
.credit-chip:hover { text-decoration: none; color: var(--text-primary); }

/* ===== Yüzeyler ===== */
.card {
    --bs-card-bg: var(--bg-surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    box-shadow: var(--shadow);
}
.list-group {
    --bs-list-group-bg: var(--bg-surface);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-hover-bg: var(--bg-surface-2);
    --bs-list-group-action-hover-color: var(--text-primary);
    --bs-list-group-color: var(--text-primary);
    --bs-list-group-border-radius: var(--radius);
}
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border);
}
.table > thead th { color: var(--text-secondary); font-weight: 600; font-size: .85em; }
.table .row-emphasis > * { background: var(--bg-surface-2); }
.dropdown-menu { --bs-dropdown-bg: var(--bg-surface); --bs-dropdown-border-color: var(--border-strong); }
.alert { border-radius: var(--radius-sm); }
.progress { --bs-progress-bg: var(--bg-elevated); }
.progress-bar:not([class*="bg-"]) { background: var(--brand-gradient); }
.badge { font-weight: 600; }
.border-top, .border-bottom { border-color: var(--border) !important; }

/* ===== Düğmeler ===== */
/* Düğmeler (AtmoSpace .mk-btn: Sora 14.5px/600, 11px 20px, 12px köşe; -lg: 16px, 15px 28px, 14px köşe) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; padding: 11px 20px; line-height: 1.2; transition: transform .16s, box-shadow .16s, background-position .3s, border-color .16s, color .16s; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-sm { font-size: 13px; padding: 7px 14px; border-radius: 10px; gap: 6px; }
.btn-lg { font-size: 16px; padding: 15px 28px; border-radius: 14px; }
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-indigo);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--brand-deep);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--brand-indigo);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--brand-gradient);
    background-size: 160% 100%;
    background-position: 0 0;
    box-shadow: 0 6px 18px rgba(84, 51, 253, .32);
    transition: background-position .3s, box-shadow .2s, transform .1s;
}
.btn-primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(84, 51, 253, .42); }
.btn-primary:active { transform: translateY(1px); }
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--brand-indigo);
    --bs-btn-active-border-color: var(--brand-indigo);
}
:root[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #b8a8ff; }
.btn-outline-secondary {
    --bs-btn-color: var(--text-primary);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: var(--bg-surface-2);
    --bs-btn-hover-border-color: var(--border-strong);
}
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-of-type { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.btn-group > .btn:last-of-type { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-indigo); --bs-nav-pills-border-radius: 999px; }
.nav-pills .nav-link.active { background-image: var(--brand-gradient); }
.pagination { --bs-pagination-active-bg: var(--brand-indigo); --bs-pagination-active-border-color: var(--brand-indigo); }

/* ===== Formlar ===== */
.form-control, .form-select {
    background-color: var(--bg-surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-surface-2);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 .25rem var(--focus-ring);
}
.form-control::placeholder { color: var(--text-muted); }
.form-check-input:checked { background-color: var(--brand-indigo); border-color: var(--brand-indigo); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .25rem var(--focus-ring); }
.btn:focus-visible { box-shadow: 0 0 0 .25rem var(--focus-ring); }
.btn-check:checked + .btn-outline-primary { background-image: var(--brand-gradient); border-color: transparent; color: #fff; }

/* ===== Ana sayfa ===== */
.hero { padding: 4.5rem 0 3rem; }
.hero .lead { color: var(--text-secondary); }
.feature {
    height: 100%;
    padding: 26px 22px;
    border-radius: var(--radius);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.feature-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--brand-gradient-soft);
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 14px;
}
.feature p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ===== Alt bilgi ===== */
.app-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    padding: 1.25rem 0;
}
.app-footer a { color: var(--text-secondary); }
.app-footer a:hover { color: var(--text-primary); }

/* ===== Kaydırma çubuğu ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 8px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}