/* ============================================
   DARK MODE CSS
   ============================================ */

/* Dark mode için CSS değişkenleri */
[data-theme="dark"] {
    /* Arka plan renkleri */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-card: #252525;
    
    /* Metin renkleri */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    
    /* Border renkleri */
    --border-color: #404040;
    
    /* Mevcut astro renklerini dark mode'a uyarla */
    --astro-soft-beige: #1e1e1e;
    --astro-light-wood: #404040;
    --astro-wood: #b0b0b0;
}

/* ============================================
   TÜM ANA KAPSAYICILARI SİYAH ZORLA
   ============================================ */

/* HTML ve Body - En üst seviye zorlama (Öncelik: En yüksek) */
[data-theme="dark"],
[data-theme="dark"] html {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tüm ana kapsayıcılar */
[data-theme="dark"] #app,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .main-content,
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .page-wrapper,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] section,
[data-theme="dark"] .section,
[data-theme="dark"] main,
[data-theme="dark"] .main {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Container'lar - Transparent yap (üst kapsayıcı rengi görünsün) */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-xxl {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Sayfa içerik alanları */
[data-theme="dark"] .page-content,
[data-theme="dark"] .content-body,
[data-theme="dark"] .profile-wrapper,
[data-theme="dark"] .profile-container {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Row ve Col - Transparent */
[data-theme="dark"] .row,
[data-theme="dark"] [class*="col-"] {
    background-color: transparent !important;
}

/* Tüm Bootstrap utility class'larını override et */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] [class*="bg-white"],
[data-theme="dark"] [class*="bg-light"] {
    background-color: var(--bg-primary) !important;
}

/* Padding ve margin class'ları için arka plan kontrolü */
[data-theme="dark"] [class*="p-"],
[data-theme="dark"] [class*="m-"],
[data-theme="dark"] [class*="px-"],
[data-theme="dark"] [class*="py-"] {
    background-color: transparent !important;
}

/* ============================================
   PROFİL SAYFASI ÖZEL - DARK MODE
   ============================================ */

/* Profil sayfası ana kapsayıcıları */
[data-theme="dark"] .profile-container,
[data-theme="dark"] .profile-wrapper,
[data-theme="dark"] .py-5,
[data-theme="dark"] .container.py-5 {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Profil sayfası içindeki tüm div'ler */
[data-theme="dark"] .profile-container > *,
[data-theme="dark"] .profile-container .row,
[data-theme="dark"] .profile-container .col {
    background-color: transparent !important;
}

/* Tab content alanı */
[data-theme="dark"] .tab-content {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Tab pane'ler */
[data-theme="dark"] .tab-pane {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Dark mode HTML ve body arka planı - Kenarlarda beyazlık kalmasın */
[data-theme="dark"] html {
    background-color: var(--bg-primary) !important;
    height: 100%;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Dark mode kartlar */
[data-theme="dark"] .form-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark mode input'lar */
[data-theme="dark"] .form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-secondary);
    border-color: var(--astro-deep-teal);
    color: var(--text-primary);
}

/* Dark mode butonlar */
[data-theme="dark"] .btn-primary {
    background-color: var(--astro-deep-teal);
    border-color: var(--astro-deep-teal);
}

/* Dark mode tab'lar */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--text-primary);
}

/* Dark mode alert'ler */
[data-theme="dark"] .alert {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================
   PANEL SAYFASI - DARK MODE
   ============================================ */

/* Dark mode panel sayfaları - Kenarlarda beyazlık kalmasın */
[data-theme="dark"] body.panel-page,
[data-theme="dark"] .panel-page {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

[data-theme="dark"] body.panel-page .container-fluid {
    background-color: transparent !important;
}

/* Dark mode panel kartlar */
[data-theme="dark"] .thumb-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

/* Dark mode panel tablo - Yazılar görünsün */
[data-theme="dark"] .table,
[data-theme="dark"] table {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] table th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] table td {
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table tbody tr,
[data-theme="dark"] table tbody tr {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-light th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode panel butonlar - Yazılar görünsün */
[data-theme="dark"] .btn,
[data-theme="dark"] button,
[data-theme="dark"] .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary.btn-soft {
    color: white !important;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary.btn-soft {
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary.btn-soft:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .btn-soft,
[data-theme="dark"] .btn-soft-two,
[data-theme="dark"] .btn-action,
[data-theme="dark"] .btn-color-three {
    color: var(--text-primary) !important;
}

/* Dark mode nav-link butonlar */
[data-theme="dark"] .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--astro-deep-teal) !important;
    color: white !important;
}

/* Dark mode right-tabs-bar container - Beyazlık kalmasın */
[data-theme="dark"] .right-tabs-bar {
    background-color: transparent !important;
    background: transparent !important;
}

[data-theme="dark"] .right-tabs-bar * {
    background-color: transparent !important;
}

[data-theme="dark"] .right-tabs-bar .nav,
[data-theme="dark"] .right-tabs-bar .nav-pills {
    background-color: transparent !important;
    background: transparent !important;
}

[data-theme="dark"] .right-tabs-bar .nav-item {
    background-color: transparent !important;
    background: transparent !important;
}

[data-theme="dark"] .right-tabs-bar .nav-link {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .right-tabs-bar .nav-link:hover {
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .right-tabs-bar .nav-link.active {
    background-color: var(--astro-deep-teal) !important;
    background: var(--astro-deep-teal) !important;
    color: white !important;
    border-color: var(--astro-deep-teal);
}

/* Gap ve margin class'ları için arka plan kontrolü */
[data-theme="dark"] .right-tabs-bar .gap-2,
[data-theme="dark"] .right-tabs-bar .mb-3 {
    background-color: transparent !important;
    background: transparent !important;
}

/* Dark mode tablo içindeki tüm metinler */
[data-theme="dark"] .table *,
[data-theme="dark"] table * {
    color: var(--text-primary) !important;
}

/* Dark mode tablo içindeki semboller ve ikonlar */
[data-theme="dark"] .table .text-planet,
[data-theme="dark"] .table .planet-glyph,
[data-theme="dark"] .table tspan {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .thumb-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .thumb-card.active {
    outline-color: var(--astro-deep-teal);
}

/* Dark mode chart badge */
[data-theme="dark"] .chart-badge {
    background: var(--astro-deep-teal);
    color: white;
}

/* Dark mode chart container */
[data-theme="dark"] .chart-container {
    background-color: var(--bg-card) !important;
}

/* Dark mode kartlar (panel içindeki) */
[data-theme="dark"] .card,
[data-theme="dark"] .mychart-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark mode modal'lar */
[data-theme="dark"] .astro-modal,
[data-theme="dark"] .modal-modern {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .modal-modern__header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-modern__footer {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color);
}

/* Dark mode butonlar (panel) */
[data-theme="dark"] .btn-outline-secondary.btn-soft {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-secondary.btn-soft:hover {
    background: var(--bg-card) !important;
}

/* Dark mode nav linkler (panel) - Yukarıdaki genel kurallar zaten var */
[data-theme="dark"] .right-tabs-bar .nav-link:hover {
    background: var(--astro-dark-teal) !important;
    color: white !important;
}

/* Dark mode tablo içindeki tüm text elementleri */
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .table-responsive * {
    color: var(--text-primary) !important;
}

/* Dark mode tablo içindeki span, div, p elementleri */
[data-theme="dark"] .table span,
[data-theme="dark"] .table div,
[data-theme="dark"] .table p,
[data-theme="dark"] .table td span,
[data-theme="dark"] .table td div {
    color: var(--text-primary) !important;
}

/* Dark mode tablo içindeki retrograde (R) işareti */
[data-theme="dark"] .table .text-danger,
[data-theme="dark"] .table [style*="color: red"],
[data-theme="dark"] .table [style*="color: #dc3545"] {
    color: #ff6b6b !important; /* Kırmızı ama daha açık ton */
}

/* Dark mode form-select (dropdown) */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-select-modern,
[data-theme="dark"] .house-system-select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-select option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dark mode tablo sticky header */
[data-theme="dark"] .sticky-top,
[data-theme="dark"] .table-light.sticky-top {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode input'lar (panel) */
[data-theme="dark"] .form-control-modern,
[data-theme="dark"] .input-group-modern .form-control-modern {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark mode dropzone */
[data-theme="dark"] .dropzone {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .dropzone.dragover {
    background: var(--bg-secondary) !important;
}

/* Dark mode transit stepper */
[data-theme="dark"] .transit-stepper .ts-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .transit-stepper .ts-btn:hover {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .transit-stepper .ts-date {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .transit-stepper .ts-date:focus {
    border-color: var(--border-color);
}

[data-theme="dark"] .transit-stepper .ts-time {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .transit-stepper .ts-time:focus {
    border-color: var(--border-color);
}

/* Dark mode aspect table */
[data-theme="dark"] .aspect-table-container {
    background-color: var(--bg-card) !important;
}

/* Dark mode ring backgrounds */
[data-theme="dark"] .ring-zodiac-bg {
    fill: var(--bg-card);
    stroke: var(--border-color);
}

[data-theme="dark"] .ring-houses-bg {
    fill: var(--bg-secondary);
    stroke: var(--border-color);
}

/* Dark mode profil header */
[data-theme="dark"] .profile-header {
    background: linear-gradient(135deg, #1a3a35 0%, #0d4a42 100%);
}

/* ============================================
   GENEL SAYFA ELEMENTLERİ - DARK MODE
   ============================================ */

/* Dark mode HTML ve body - Kenarlarda beyazlık kalmasın */
[data-theme="dark"] html {
    background-color: var(--bg-primary) !important;
    height: 100%;
    width: 100%;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* Dark mode tüm sayfalar için arka plan - Yukarıdaki genel kurallar zaten var */
[data-theme="dark"] .page-main,
[data-theme="dark"] .page-wrapper {
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   HEADER / NAVBAR - DARK MODE
   ============================================ */

/* Dark mode navbar */
[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-brand {
    color: var(--text-primary) !important;
}

/* Dark mode nav linkler */
[data-theme="dark"] .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:focus {
    color: var(--astro-deep-teal) !important;
}

[data-theme="dark"] .nav-link.active {
    color: var(--astro-deep-teal) !important;
}

/* Dark mode dropdown menüler */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item.active {
    background-color: var(--astro-deep-teal) !important;
    color: white !important;
}

/* Dark mode navbar toggler */
[data-theme="dark"] .navbar-toggler {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* ============================================
   FOOTER - DARK MODE
   ============================================ */

[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer-link {
    color: var(--astro-deep-teal) !important;
}

[data-theme="dark"] .footer-link:hover {
    color: var(--astro-deep-teal) !important;
    opacity: 0.8;
}

/* ============================================
   BUTONLAR - DARK MODE
   ============================================ */

[data-theme="dark"] .btn {
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--astro-deep-teal);
    border-color: var(--astro-deep-teal);
    color: white;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--astro-dark-teal);
    border-color: var(--astro-dark-teal);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-astro-wood {
    border-color: var(--astro-deep-teal);
    color: var(--astro-deep-teal);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-astro-wood:hover {
    background-color: var(--astro-deep-teal);
    border-color: var(--astro-deep-teal);
    color: white;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-primary);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================
   LİNKLER - DARK MODE
   ============================================ */

[data-theme="dark"] a {
    color: var(--astro-deep-teal);
}

[data-theme="dark"] a:hover {
    color: var(--astro-dark-teal);
    opacity: 0.9;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* ============================================
   KARTLAR VE CONTAINER'LAR - DARK MODE
   ============================================ */

[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* ============================================
   FORM ELEMENTLERİ - DARK MODE
   ============================================ */

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-secondary);
    border-color: var(--astro-deep-teal);
    color: var(--text-primary);
}

[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--astro-deep-teal);
    border-color: var(--astro-deep-teal);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

/* ============================================
   MODAL - DARK MODE
   ============================================ */

[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   TABLO - DARK MODE
   ============================================ */

[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: var(--bg-card);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--border-color);
}

/* ============================================
   BREADCRUMB - DARK MODE
   ============================================ */

[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--astro-deep-teal);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* ============================================
   BADGE - DARK MODE
   ============================================ */

[data-theme="dark"] .badge {
    color: white;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary);
}

/* ============================================
   LIST GROUP - DARK MODE
   ============================================ */

[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--astro-deep-teal);
    border-color: var(--astro-deep-teal);
    color: white;
}

/* ============================================
   HEADER MOBİL MENÜ - DARK MODE
   ============================================ */

@media (max-width: 991.98px) {
    [data-theme="dark"] .navbar-collapse {
        background-color: var(--bg-card) !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================
   GENEL SAYFA ELEMENTLERİ - DARK MODE (DEVAM)
   ============================================ */

/* Dark mode section'lar */
[data-theme="dark"] section {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Dark mode tüm div'ler için varsayılan arka plan */
[data-theme="dark"] div {
    background-color: transparent;
}

/* Dark mode wrapper'lar */
[data-theme="dark"] .wrapper,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .main-content {
    background-color: var(--bg-primary) !important;
}

/* Dark mode container içeriği */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    color: var(--text-primary);
}

/* Dark mode h1-h6 başlıklar */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Dark mode paragraph */
[data-theme="dark"] p {
    color: var(--text-secondary);
}

/* Dark mode hr (yatay çizgi) */
[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.3;
}

/* ============================================
   PROFİL SAYFASI ÖZEL - DARK MODE
   ============================================ */

/* Profil sayfası ana kapsayıcıları - Tüm beyazlıkları kapat */
[data-theme="dark"] .container.py-5,
[data-theme="dark"] .py-5 {
    background-color: var(--bg-primary) !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

[data-theme="dark"] .profile-container {
    background-color: transparent !important;
}

/* Profil sayfası içindeki tüm boşluklar */
[data-theme="dark"] .profile-container > *,
[data-theme="dark"] .profile-container .row,
[data-theme="dark"] .profile-container .col,
[data-theme="dark"] .profile-container [class*="col-"] {
    background-color: transparent !important;
}

/* Tab content ve pane'ler */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-pane {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Scrollbar - Dark mode */
[data-theme="dark"] .right-panel-scroll-area {
    scrollbar-color: rgba(71, 148, 131, 0.35) transparent;
}

[data-theme="dark"] .right-panel-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(71, 148, 131, 0.3);
}

[data-theme="dark"] .right-panel-scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 148, 131, 0.5);
}

/* Sabit Yıldızlar Bar - Dark mode */
[data-theme="dark"] .fixed-stars-bar {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
}

[data-theme="dark"] .fixed-star-row-name {
    color: #818cf8;
}

[data-theme="dark"] .fixed-star-row-planet {
    color: var(--text-primary);
}

[data-theme="dark"] .fixed-star-row-orb {
    color: var(--text-secondary, #9ca3af);
}

[data-theme="dark"] .fixed-stars-more {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

/* Profil sayfasındaki tüm div'ler */
[data-theme="dark"] .profile-container div {
    background-color: transparent !important;
}

/* Özel beyaz arka planlı elementleri override et */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: #fff"] {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
}