/**
 * Terpa Müzik — Karanlık / Açık mod (data-color-mode on html)
 */

/* ── Karanlık mod — koyu lacivert tonlar ── */
html[data-color-mode="dark"],
html:not([data-color-mode]) {
    color-scheme: dark;

    --cm-bg: #0A1224;
    --cm-bg-soft: #0F1A2E;
    --cm-bg-elevated: #152238;
    --cm-surface: rgba(18, 30, 50, 0.92);
    --cm-text: #E8EEF7;
    --cm-text-soft: #CBD5E1;
    --cm-heading: #F8FAFC;
    --cm-muted: #8FA0B8;
    --cm-border: rgba(148, 163, 184, 0.14);
    --cm-border-soft: rgba(255, 255, 255, 0.05);
    --cm-border-accent: rgba(201, 162, 39, 0.2);
    --cm-topbar-bg: #070E1C;
    --cm-navbar-bg: rgba(10, 18, 36, 0.97);
    --cm-footer-bg: #070E1C;
    --cm-input-bg: rgba(12, 22, 40, 0.95);
    --cm-input-focus-bg: rgba(18, 30, 50, 0.98);
    --cm-hero-start: #0A1224;
    --cm-hero-end: #12203A;
    --cm-card-shadow: 0 10px 36px rgba(0, 0, 0, 0.34);
    --cm-dropdown-bg: #121E32;
    --cm-dropdown-border: rgba(148, 163, 184, 0.12);
    --cm-overlay: rgba(10, 18, 36, 0.82);
    --cm-nav-text: #94A3B8;
    --cm-nav-text-active: var(--terpa-amber, #C9A227);
    --cm-toggle-bg: rgba(255, 255, 255, 0.06);
    --cm-toggle-border: rgba(148, 163, 184, 0.16);
    --cm-toggle-active: rgba(201, 162, 39, 0.18);
}

/* ── Açık mod — temiz açık zemin, koyu tipografi ── */
html[data-color-mode="light"] {
    color-scheme: light;

    --cm-bg: #F4F7FB;
    --cm-bg-soft: #EEF2F8;
    --cm-bg-elevated: #FFFFFF;
    --cm-surface: #FFFFFF;
    --cm-text: #1E293B;
    --cm-text-soft: #334155;
    --cm-heading: #0F172A;
    --cm-muted: #64748B;
    --cm-border: rgba(15, 23, 42, 0.09);
    --cm-border-soft: rgba(15, 23, 42, 0.06);
    --cm-border-accent: rgba(166, 133, 31, 0.28);
    --cm-topbar-bg: #F8FAFC;
    --cm-navbar-bg: rgba(255, 255, 255, 0.98);
    --cm-footer-bg: #0C1529;
    --cm-input-bg: #F8FAFC;
    --cm-input-focus-bg: #FFFFFF;
    --cm-hero-start: #E8EEF6;
    --cm-hero-end: #DDE5F0;
    --cm-card-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
    --cm-dropdown-bg: #FFFFFF;
    --cm-dropdown-border: rgba(15, 23, 42, 0.08);
    --cm-overlay: rgba(248, 250, 252, 0.92);
    --cm-nav-text: #475569;
    --cm-nav-text-active: #92680F;
    --cm-toggle-bg: rgba(15, 23, 42, 0.05);
    --cm-toggle-border: rgba(15, 23, 42, 0.1);
    --cm-toggle-active: rgba(201, 162, 39, 0.16);
}

/* Terpa token köprüsü */
html[data-color-mode="dark"],
html:not([data-color-mode]),
html[data-color-mode="light"] {
    --terpa-dark: var(--cm-bg);
    --terpa-dark-light: var(--cm-bg-soft);
    --terpa-dark-elevated: var(--cm-bg-elevated);
    --terpa-text: var(--cm-text);
    --terpa-muted: var(--cm-muted);
    --terpa-glass: var(--cm-surface);
    --terpa-glass-border: var(--cm-border-accent);
    --terpa-section-bg: var(--cm-bg);
    --terpa-section-alt: var(--cm-bg-soft);
    --terpa-panel-bg: var(--cm-bg-elevated);
    --terpa-input-bg: var(--cm-input-bg);
    --terpa-input-focus-bg: var(--cm-input-focus-bg);
    --terpa-footer-bg: var(--cm-footer-bg);
    --terpa-hero-start: var(--cm-hero-start);
    --terpa-hero-end: var(--cm-hero-end);
    --terpa-navbar-bg: var(--cm-navbar-bg);
}

html[data-color-mode="dark"] body,
html:not([data-color-mode]) body {
    background-color: var(--cm-bg);
    color: var(--cm-text);
}

html[data-color-mode="light"] body {
    background-color: var(--cm-bg);
    color: var(--cm-text);
}

html[data-color-mode="light"] h1,
html[data-color-mode="light"] h2,
html[data-color-mode="light"] h3,
html[data-color-mode="light"] h4,
html[data-color-mode="light"] h5,
html[data-color-mode="light"] h6,
html[data-color-mode="light"] .display-font {
    color: var(--cm-heading);
}

/* Üst bar & navbar */
html[data-color-mode="light"] .top-bar {
    background: var(--cm-topbar-bg);
    border-bottom-color: var(--cm-border);
    color: var(--cm-muted);
}
html[data-color-mode="light"] .top-bar a {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .top-bar a:hover {
    color: var(--terpa-amber-dark, #A6851F);
}

html[data-color-mode="light"] .terpa-navbar.navbar-dark .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(0.25);
}
html[data-color-mode="light"] .terpa-navbar {
    background: var(--cm-navbar-bg);
    border-bottom-color: var(--cm-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
html[data-color-mode="light"] .brand-name {
    color: var(--cm-heading);
}
html[data-color-mode="light"] .brand-sub {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .nav-link {
    color: var(--cm-nav-text) !important;
}
html[data-color-mode="light"] .nav-link:hover,
html[data-color-mode="light"] .nav-link.active {
    color: var(--cm-nav-text-active) !important;
}
html[data-color-mode="light"] .terpa-dropdown {
    background: var(--cm-dropdown-bg);
    border: 1px solid var(--cm-dropdown-border);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .terpa-dropdown .dropdown-item {
    color: var(--cm-text);
}
html[data-color-mode="light"] .terpa-dropdown .dropdown-item:hover,
html[data-color-mode="light"] .terpa-dropdown .dropdown-item.active {
    background: rgba(201, 162, 39, 0.1);
    color: var(--cm-heading);
}

/* Hero — açık modda koyu metin */
html[data-color-mode="light"] .hero-bg {
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(201, 162, 39, 0.12) 0%, transparent 55%),
        linear-gradient(160deg, var(--cm-hero-start) 0%, var(--cm-hero-end) 45%, var(--cm-hero-start) 100%);
}
html[data-color-mode="light"] .hero-bg::before {
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 79px,
        rgba(15, 23, 42, 0.025) 79px,
        rgba(15, 23, 42, 0.025) 80px
    );
}
html[data-color-mode="light"] .hero-eyebrow {
    color: var(--terpa-amber-dark, #A6851F);
    border-bottom-color: var(--cm-border-accent);
}
html[data-color-mode="light"] .hero-title {
    color: var(--cm-heading);
}
html[data-color-mode="light"] .hero-title span {
    color: var(--terpa-amber-dark, #A6851F);
}
html[data-color-mode="light"] .hero-lead {
    color: var(--cm-text-soft);
}
html[data-color-mode="light"] .hero-desc {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .hero-panel {
    background: var(--cm-bg-elevated);
    border-color: var(--cm-border);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .hero-panel-head .display-font,
html[data-color-mode="light"] .hero-panel-head h3 {
    color: var(--cm-heading) !important;
}
html[data-color-mode="light"] .hero-panel-list li {
    color: var(--cm-muted);
    border-bottom-color: var(--cm-border-soft);
}
html[data-color-mode="light"] .hero-panel .stat-card-pro {
    background: var(--cm-bg-soft, #F8FAFC);
}
html[data-color-mode="light"] .hero-panel .stat-number {
    color: var(--cm-heading);
}
html[data-color-mode="light"] .hero-trust {
    border-top-color: var(--cm-border);
}
html[data-color-mode="light"] .hero-trust-label {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .hero-slider-nav {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--cm-border);
    color: var(--terpa-amber-dark, #A6851F);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .hero-slider-nav:hover {
    background: rgba(201, 162, 39, 0.12);
}

/* Bölümler & kartlar */
html[data-color-mode="light"] .section-dark {
    background: var(--cm-bg-soft);
    border-block-color: var(--cm-border-soft);
}
html[data-color-mode="light"] .glass-card {
    background: var(--cm-surface);
    border-color: var(--cm-border);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .glass-card:hover {
    border-color: var(--cm-border-accent);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
}
html[data-color-mode="light"] .home-trust-bar {
    background: var(--cm-bg-soft);
    border-bottom-color: var(--cm-border);
}
html[data-color-mode="light"] .home-trust-item {
    border-color: var(--cm-border-soft);
}
html[data-color-mode="light"] .home-section-head {
    border-bottom-color: var(--cm-border);
}
html[data-color-mode="light"] .home-section-lead,
html[data-color-mode="light"] .section-subtitle {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .home-cta-inner {
    background: var(--cm-bg-elevated);
    border-color: var(--cm-border);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .paket-features li {
    color: var(--cm-muted);
    border-bottom-color: var(--cm-border-soft);
}

/* Formlar */
html[data-color-mode="light"] .form-control,
html[data-color-mode="light"] .form-select {
    background: var(--cm-input-bg);
    border-color: var(--cm-border);
    color: var(--cm-text);
}
html[data-color-mode="light"] .form-control:focus,
html[data-color-mode="light"] .form-select:focus {
    background: var(--cm-input-focus-bg);
    color: var(--cm-text);
}
html[data-color-mode="light"] .form-control::placeholder {
    color: rgba(100, 116, 139, 0.65);
}
html[data-color-mode="light"] .form-label {
    color: var(--cm-text-soft);
}
html[data-color-mode="light"] .kayit-form-panel,
html[data-color-mode="light"] .kayit-sidebar-card {
    background: var(--cm-bg-elevated);
    border-color: var(--cm-border);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .kayit-form-intro,
html[data-color-mode="light"] .kayit-form-footer {
    border-color: var(--cm-border-soft);
}
html[data-color-mode="light"] .kayit-form-desc,
html[data-color-mode="light"] .kayit-form-overview li {
    color: var(--cm-muted);
}

/* Accordion, tablo, misc */
html[data-color-mode="light"] .accordion-terpa .accordion-item {
    background: var(--cm-surface);
    border-color: var(--cm-border);
}
html[data-color-mode="light"] .accordion-terpa .accordion-button {
    color: var(--cm-heading);
}
html[data-color-mode="light"] .accordion-terpa .accordion-button:not(.collapsed) {
    background: rgba(201, 162, 39, 0.08);
}
html[data-color-mode="light"] .accordion-terpa .accordion-button::after {
    filter: none;
}
html[data-color-mode="light"] .accordion-terpa .accordion-body {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .map-container {
    border-color: var(--cm-border);
}
html[data-color-mode="light"] .stat-card-pro {
    background: var(--cm-bg-soft);
    border-color: var(--cm-border);
}
html[data-color-mode="light"] .hizmet-card,
html[data-color-mode="light"] .home-hizmet-card,
html[data-color-mode="light"] .home-paket-card,
html[data-color-mode="light"] .home-etkinlik-card {
    background: var(--cm-surface);
    border-color: var(--cm-border);
    box-shadow: var(--cm-card-shadow);
}
html[data-color-mode="light"] .hizmet-card-desc,
html[data-color-mode="light"] .hizmet-card-subtitle,
html[data-color-mode="light"] .home-hizmet-card p {
    color: var(--cm-muted);
}
html[data-color-mode="light"] .timeline::before {
    background: var(--cm-border);
}
html[data-color-mode="light"] .timeline-item::before {
    border-color: var(--cm-bg);
    background: var(--terpa-amber);
}

/* Footer açık modda da koyu kalır — kontrast */
html[data-color-mode="light"] .terpa-footer {
    background:
        radial-gradient(ellipse 85% 55% at 12% -10%, rgba(201, 162, 39, 0.1) 0%, transparent 52%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #070E1C 0%, var(--cm-footer-bg) 48%, #050A14 100%);
}
html[data-color-mode="light"] .footer-content {
    background: transparent;
}
html[data-color-mode="light"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-color-mode="light"] body[data-theme="can"] .terpa-footer {
    background:
        radial-gradient(ellipse 75% 55% at 10% 0%, rgba(245, 166, 35, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 58% 48% at 95% 100%, rgba(0, 102, 204, 0.18) 0%, transparent 58%),
        linear-gradient(168deg, #001428 0%, #002D5B 38%, #001a33 72%, #001020 100%);
}

/* CAN teması + açık mod uyumu */
html[data-color-mode="light"] body[data-theme="can"] {
    background: var(--cm-bg);
}
html[data-color-mode="light"] body[data-theme="can"] .section,
html[data-color-mode="light"] body[data-theme="can"] .section-kayit {
    background: var(--cm-bg);
}
html[data-color-mode="light"] body[data-theme="can"] .glass-card,
html[data-color-mode="light"] body[data-theme="can"] .home-paket-card,
html[data-color-mode="light"] body[data-theme="can"] .home-hizmet-card,
html[data-color-mode="light"] body[data-theme="can"] .kayit-form-panel {
    background: #fff;
    border-color: var(--cm-border);
}
html[data-color-mode="light"] body[data-theme="can"] .terpa-navbar,
html[data-color-mode="light"] body[data-theme="can"] .top-bar {
    background: var(--can-navy, #002D5B);
}
html[data-color-mode="light"] body[data-theme="can"] .brand-name,
html[data-color-mode="light"] body[data-theme="can"] .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
}
html[data-color-mode="light"] body[data-theme="can"] .nav-link:hover,
html[data-color-mode="light"] body[data-theme="can"] .nav-link.active {
    color: var(--can-orange, #F5A623) !important;
}

/* Karanlık mod — hero derinlik (CAN teması hariç) */
html[data-color-mode="dark"] body:not([data-theme="can"]) .hero-bg,
html:not([data-color-mode]) body:not([data-theme="can"]) .hero-bg {
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(201, 162, 39, 0.08) 0%, transparent 55%),
        linear-gradient(160deg, var(--cm-hero-start) 0%, var(--cm-hero-end) 48%, var(--cm-hero-start) 100%);
}

/* CAN hero — renk modundan bağımsız kurumsal mavi + müzik deseni */
html[data-color-mode="dark"] body[data-theme="can"] .hero-bg,
html:not([data-color-mode]) body[data-theme="can"] .hero-bg,
html[data-color-mode="light"] body[data-theme="can"] .hero-bg {
    background:
        radial-gradient(ellipse 68% 52% at 6% 94%, rgba(245, 166, 35, 0.24) 0%, transparent 58%),
        radial-gradient(ellipse 42% 36% at 94% 6%, rgba(255, 255, 255, 0.14) 0%, transparent 54%),
        radial-gradient(ellipse 55% 42% at 72% 78%, rgba(0, 119, 216, 0.28) 0%, transparent 62%),
        linear-gradient(128deg, #003D7A 0%, #0056A8 36%, #0078E0 68%, #004E96 100%);
}
html[data-color-mode="dark"] body[data-theme="can"] .hero-bg::before,
html:not([data-color-mode]) body[data-theme="can"] .hero-bg::before,
html[data-color-mode="light"] body[data-theme="can"] .hero-bg::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='380' viewBox='0 0 520 380'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='0.55' opacity='0.22'%3E%3Cpath d='M-30 72 C90 58 190 86 310 68 S460 52 550 74'/%3E%3Cpath d='M-30 108 C90 94 190 122 310 104 S460 88 550 110'/%3E%3Cpath d='M-30 144 C90 130 190 158 310 140 S460 124 550 146'/%3E%3Cpath d='M-30 180 C90 166 190 194 310 176 S460 160 550 182'/%3E%3Cpath d='M-30 216 C90 202 190 230 310 212 S460 196 550 218'/%3E%3C/g%3E%3Cg fill='%23F5A623' opacity='0.08'%3E%3Ccircle cx='140' cy='86' r='3'/%3E%3Ccircle cx='360' cy='156' r='2.5'/%3E%3Ccircle cx='240' cy='198' r='2'/%3E%3C/g%3E%3Cpath d='M420 250 Q448 210 430 170 Q412 132 448 98' stroke='%23FFFFFF' stroke-width='1.8' fill='none' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 520px 380px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.28) 100%);
}
html[data-color-mode="dark"] body[data-theme="can"] .hero-staff,
html:not([data-color-mode]) body[data-theme="can"] .hero-staff,
html[data-color-mode="light"] body[data-theme="can"] .hero-staff {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23FFFFFF' opacity='0.075'%3E%3Cellipse cx='48' cy='196' rx='9' ry='6.5' transform='rotate(-18 48 196)'/%3E%3Crect x='55' y='128' width='2.2' height='70' rx='1'/%3E%3Cellipse cx='148' cy='108' rx='8' ry='5.5' transform='rotate(12 148 108)'/%3E%3Crect x='154' y='52' width='2' height='58' rx='1'/%3E%3Cellipse cx='208' cy='152' rx='7' ry='5'/%3E%3Crect x='213' y='98' width='1.8' height='56' rx='1'/%3E%3C/g%3E%3Cg stroke='%23FFFFFF' fill='none' opacity='0.12'%3E%3Cpath d='M154 54 Q182 48 214 54' stroke-width='2'/%3E%3Cpath d='M92 210 Q108 168 98 132 Q88 98 104 62 Q114 42 98 34' stroke-width='2.2'/%3E%3Cpath d='M30 80 Q70 120 110 90 T190 110' stroke-width='1.2' opacity='0.55'/%3E%3C/g%3E%3C/svg%3E") repeat;
    background-size: 260px 260px;
    mask-image: linear-gradient(105deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, rgba(0, 0, 0, 0.22) 72%, transparent 100%);
}
html[data-color-mode="light"] body[data-theme="can"] .hero-title,
html[data-color-mode="light"] body[data-theme="can"] .hero-lead,
html[data-color-mode="light"] body[data-theme="can"] .hero-desc {
    color: #fff;
}
html[data-color-mode="light"] body[data-theme="can"] .hero-title span {
    color: var(--can-orange, #F5A623);
}

/* CAN — Online Kayıt sayfası renk modundan bağımsız kurumsal görünüm */
html[data-color-mode="dark"] body[data-theme="can"] .section-kayit,
html:not([data-color-mode]) body[data-theme="can"] .section-kayit,
html[data-color-mode="light"] body[data-theme="can"] .section-kayit {
    background: var(--can-surface, #F4F7FA);
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-form-panel,
html:not([data-color-mode]) body[data-theme="can"] .kayit-form-panel,
html[data-color-mode="light"] body[data-theme="can"] .kayit-form-panel,
html[data-color-mode="dark"] body[data-theme="can"] .kayit-sidebar-card,
html:not([data-color-mode]) body[data-theme="can"] .kayit-sidebar-card,
html[data-color-mode="light"] body[data-theme="can"] .kayit-sidebar-card {
    background: #fff;
    border-color: rgba(0, 45, 91, 0.08);
    box-shadow: 0 8px 32px rgba(0, 45, 91, 0.08);
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-paket-inner,
html:not([data-color-mode]) body[data-theme="can"] .kayit-paket-inner,
html[data-color-mode="light"] body[data-theme="can"] .kayit-paket-inner,
html[data-color-mode="dark"] body[data-theme="can"] .kayit-odeme-inner,
html:not([data-color-mode]) body[data-theme="can"] .kayit-odeme-inner,
html[data-color-mode="light"] body[data-theme="can"] .kayit-odeme-inner {
    background: #F4F7FA;
    border-color: rgba(0, 45, 91, 0.1);
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-form-footer,
html:not([data-color-mode]) body[data-theme="can"] .kayit-form-footer,
html[data-color-mode="light"] body[data-theme="can"] .kayit-form-footer {
    background: linear-gradient(180deg, rgba(0, 86, 168, 0.03) 0%, rgba(0, 45, 91, 0.02) 100%);
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-sozlesme-box,
html:not([data-color-mode]) body[data-theme="can"] .kayit-sozlesme-box,
html[data-color-mode="light"] body[data-theme="can"] .kayit-sozlesme-box {
    background: #F8FAFC;
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-section-title,
html:not([data-color-mode]) body[data-theme="can"] .kayit-section-title,
html[data-color-mode="light"] body[data-theme="can"] .kayit-section-title {
    color: var(--can-navy, #002D5B);
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-paket-info strong,
html:not([data-color-mode]) body[data-theme="can"] .kayit-paket-info strong,
html[data-color-mode="light"] body[data-theme="can"] .kayit-paket-info strong {
    color: var(--can-navy, #002D5B);
}
html[data-color-mode="dark"] body[data-theme="can"] .kayit-sozlesme-item .form-check-label,
html:not([data-color-mode]) body[data-theme="can"] .kayit-sozlesme-item .form-check-label,
html[data-color-mode="light"] body[data-theme="can"] .kayit-sozlesme-item .form-check-label {
    color: var(--can-navy, #002D5B);
}
html[data-color-mode="dark"] body[data-theme="can"] .page-header--kayit,
html:not([data-color-mode]) body[data-theme="can"] .page-header--kayit,
html[data-color-mode="light"] body[data-theme="can"] .page-header--kayit {
    background:
        radial-gradient(ellipse 55% 45% at 8% 92%, rgba(245, 166, 35, 0.2) 0%, transparent 58%),
        radial-gradient(ellipse 40% 35% at 92% 8%, rgba(255, 255, 255, 0.1) 0%, transparent 52%),
        linear-gradient(128deg, #003D7A 0%, #0056A8 36%, #0078E0 68%, #004E96 100%);
}
html[data-color-mode="dark"] body[data-theme="can"] .page-header--kayit h1,
html:not([data-color-mode]) body[data-theme="can"] .page-header--kayit h1,
html[data-color-mode="light"] body[data-theme="can"] .page-header--kayit h1 {
    color: #fff;
}

/* Mod geçiş anahtarı */
.terpa-color-mode {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--cm-toggle-bg);
    border: 1px solid var(--cm-toggle-border);
}
.terpa-color-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--cm-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.terpa-color-mode-btn:hover {
    color: var(--cm-text);
}
.terpa-color-mode-btn.active {
    background: var(--cm-toggle-active);
    color: var(--terpa-amber, #C9A227);
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.22);
}
.terpa-color-mode-btn:focus-visible {
    outline: 2px solid var(--terpa-amber, #C9A227);
    outline-offset: 2px;
}
.terpa-color-mode-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cm-muted);
    margin-right: 0.35rem;
    white-space: nowrap;
}
.terpa-color-mode--compact .terpa-color-mode-label {
    display: none;
}
.terpa-color-mode--compact .terpa-color-mode-btn {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.78rem;
}

/* Yumuşak geçiş (toggle sırasında) */
html.color-mode-transition,
html.color-mode-transition *,
html.color-mode-transition *::before,
html.color-mode-transition *::after {
    transition:
        background-color 0.38s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.38s ease !important;
}

@media (max-width: 991px) {
    .terpa-color-mode--topbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.color-mode-transition,
    html.color-mode-transition *,
    html.color-mode-transition *::before,
    html.color-mode-transition *::after {
        transition: none !important;
    }
}
