/* ═══════════════════════════════════════════════════════════════
   REVION — Unified Design System (Plus Jakarta Sans)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ── Media Settings — Drag & Drop dropzone aktif durumu ──────── */
#cover-dropzone.cover-dropzone-active {
    border-color: #60a5fa;
    background-color: rgba(96,165,250,0.08);
}
html.dark #cover-dropzone.cover-dropzone-active {
    border-color: #3b82f6;
    background-color: rgba(59,130,246,0.12);
}
#gallery-dropzone.gallery-dropzone-active {
    border-color: #60a5fa;
    background-color: rgba(96,165,250,0.05);
}
html.dark #gallery-dropzone.gallery-dropzone-active {
    border-color: #3b82f6;
    background-color: rgba(59,130,246,0.08);
}
.gallery-empty-state {
    color: #9ca3af;
}
html.dark .gallery-empty-state {
    color: #6b7280;
}

/* ── Auth/VerifyPhone — Standalone Page Styles ──────────────── */
.verify-phone-btn-primary {
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    background: linear-gradient(to right, #2563eb, #4f46e5);
    color: white;
}
.verify-phone-btn-primary:hover {
    background: linear-gradient(to right, #3b82f6, #6366f1);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15);
}
.verify-phone-btn-primary:active { transform: scale(0.95); }

.verify-phone-input-field {
    width: 100%;
    padding: 1rem;
    background: rgba(249,250,251,0.5);
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    outline: none;
    text-align: center;
    font-size: 2.25rem;
    font-weight: 900;
    color: #111827;
    letter-spacing: 0.5em;
    transition: all 0.2s ease;
}
.verify-phone-input-field:focus {
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.1);
}
html.dark .verify-phone-input-field {
    background: rgba(30,41,59,0.5);
    border-color: #334155;
    color: #fff;
}
html.dark .verify-phone-input-field:focus {
    background: #1e293b;
}

@keyframes verifyFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.verify-animate-fade-in-up {
    opacity: 0;
    animation: verifyFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.verify-delay-100 { animation-delay: 100ms; }
.verify-delay-200 { animation-delay: 200ms; }

/* ── Toggle switch — peer-checked pattern (Tailwind JIT fallback) ── */
/* input.peer:checked ~ div => yeşil (enabled) + thumb sağa kayar. */
/* Tailwind'in peer-checked:bg-blue-600 kuralını override etmek için !important */
input[type="checkbox"].sr-only.peer:checked ~ div {
    background-color: #16a34a !important; /* green-600 */
}
input[type="checkbox"].sr-only.peer:checked ~ div::after {
    transform: translateX(1.25rem) !important; /* translate-x-5 */
    border-color: #fff !important;
}
html.dark input[type="checkbox"].sr-only.peer:checked ~ div {
    background-color: #22c55e !important; /* green-500 */
}
html.dark input[type="checkbox"].sr-only.peer:checked ~ div::after {
    transform: translateX(1.25rem) !important;
    border-color: #fff !important;
}
input[type="checkbox"].sr-only.peer:focus-visible ~ div {
    box-shadow: 0 0 0 3px rgba(34,197,94,.28);
}

/* ═════════════════════════════════════════════════════════════
   UPGRADE NUDGE — plan limit / "paketini yükselt" bilgi kartı
   Premium, dostane, aspirational. Kırmızı "hata" değil, altın "fırsat"
   ═════════════════════════════════════════════════════════════ */
.upgrade-nudge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 1rem; /* rounded-2xl */
    position: relative;
    overflow: hidden;
    max-width: 32rem;
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.04);
}
html.dark .upgrade-nudge {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.28) 0%, rgba(146, 64, 14, 0.18) 100%);
    border-color: rgba(251, 191, 36, 0.22);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Dekoratif sağ üst ışık halesi — subtle premium feel */
.upgrade-nudge::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 65%);
    pointer-events: none;
}
html.dark .upgrade-nudge::before {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 65%);
}

.upgrade-nudge__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}
html.dark .upgrade-nudge__icon {
    box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.upgrade-nudge__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    position: relative;
    z-index: 1;
}
.upgrade-nudge__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #78350f;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0;
}
html.dark .upgrade-nudge__title { color: #fcd34d; }
.upgrade-nudge__desc {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(120, 53, 15, 0.82);
    letter-spacing: 0.005em;
    line-height: 1.45;
    margin: 0;
}
html.dark .upgrade-nudge__desc { color: rgba(251, 191, 36, 0.82); }

.upgrade-nudge__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: 0;
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.upgrade-nudge__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    filter: brightness(1.05);
    text-decoration: none;
    color: #fff;
}
.upgrade-nudge__cta:active { transform: translateY(0); }
.upgrade-nudge__cta:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 2px 8px -2px rgba(245, 158, 11, 0.5);
}

/* Kompakt varyant — modal içi / dar alanlar için CTA'yı kaldırır, aşağı kaydırır */
.upgrade-nudge--compact {
    padding: 0.75rem 0.875rem;
    gap: 0.75rem;
    max-width: none;
}
.upgrade-nudge--compact .upgrade-nudge__icon { width: 36px; height: 36px; border-radius: 0.5rem; /* rounded-lg */ }
.upgrade-nudge--compact .upgrade-nudge__title { font-size: 0.8125rem; }
.upgrade-nudge--compact .upgrade-nudge__desc { font-size: 0.6875rem; }

/* Mobil: stack */
@media (max-width: 520px) {
    .upgrade-nudge { flex-wrap: wrap; }
    .upgrade-nudge__body { flex-basis: calc(100% - 58px); }
    .upgrade-nudge__cta { flex-basis: 100%; justify-content: center; margin-top: 0.25rem; }
}

/* ═════════════════════════════════════════════════════════════
   UPGRADE CARD — list grid'inde "kilitli kart" varyantı
   Kullanıcı: Staff/Patients/Users grid sonunda görünür, "+1 daha"
   ekleme isteğine doğal yerleştirilmiş aspirational CTA.
   ═════════════════════════════════════════════════════════════ */
.upgrade-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.8125rem 0.875rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px dashed rgba(245, 158, 11, 0.35);
    border-radius: 0.75rem; /* rounded-xl */
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    color: inherit;
    cursor: pointer;
    min-height: 100%;
}
html.dark .upgrade-card {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.32) 0%, rgba(146, 64, 14, 0.18) 100%);
    border-color: rgba(251, 191, 36, 0.32);
}
.upgrade-card:hover {
    border-style: solid;
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 2px 10px -2px rgba(245, 158, 11, 0.3);
    text-decoration: none;
}
html.dark .upgrade-card:hover {
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 0 24px -8px rgba(245, 158, 11, 0.35);
}
.upgrade-card:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4);
    border-style: solid;
}

/* Sağ üst dekoratif ışık halesi — animated on hover */
.upgrade-card__halo {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, transparent 65%);
    pointer-events: none;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s;
    opacity: .8;
}
.upgrade-card:hover .upgrade-card__halo {
    transform: scale(1.4) rotate(15deg);
    opacity: 1;
}
html.dark .upgrade-card__halo {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.16) 0%, transparent 65%);
}

.upgrade-card__icon {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 3px 10px -2px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}
.upgrade-card__icon i { width: 14px; height: 14px; }
.upgrade-card:hover .upgrade-card__icon {
    transform: rotate(-6deg) scale(1.05);
}

.upgrade-card__body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}
.upgrade-card__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #78350f;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0 0 0.1875rem;
}
html.dark .upgrade-card__title { color: #fcd34d; }
.upgrade-card__desc {
    font-size: 0.6875rem;
    font-weight: 400;
    color: rgba(120, 53, 15, 0.78);
    line-height: 1.4;
    margin: 0;
}
html.dark .upgrade-card__desc { color: rgba(251, 191, 36, 0.78); }

.upgrade-card__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.375rem 0.6875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 0.375rem; /* rounded-md */
    letter-spacing: -0.005em;
    box-shadow: 0 3px 10px -2px rgba(245, 158, 11, 0.5);
    transition: filter .15s;
    margin-top: auto;
    align-self: flex-start;
}
.upgrade-card__cta i { width: 12px; height: 12px; }
.upgrade-card:hover .upgrade-card__cta {
    filter: brightness(1.08);
    box-shadow: 0 5px 14px -2px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.upgrade-card__cta i { transition: transform .15s; }
.upgrade-card:hover .upgrade-card__cta i {
    transform: translateX(2px);
}

/* ═════════════════════════════════════════════════════════════
   QUOTA CARD — Plan kapasitesi/kullanım gösterim kartı
   Industrial-grade: SVG ring + editorial tipografi + hint line
   ═════════════════════════════════════════════════════════════ */
.quota-card {
    --q-accent: #3b82f6;
    --q-accent-soft: rgba(59, 130, 246, 0.14);
    --q-track: rgba(148, 163, 184, 0.22);
    --q-surface: #ffffff;
    --q-text: #0f172a;
    --q-muted: #64748b;
    --q-border: rgba(15, 23, 42, 0.08);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: 1rem; /* rounded-2xl */
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html.dark .quota-card {
    --q-accent: #60a5fa;
    --q-accent-soft: rgba(96, 165, 250, 0.16);
    --q-track: rgba(148, 163, 184, 0.14);
    --q-surface: #0f172a;
    --q-text: #f1f5f9;
    --q-muted: #94a3b8;
    --q-border: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Warn state — sınıra yaklaşıldığında amber */
.quota-card--warn {
    --q-accent: #f59e0b;
    --q-accent-soft: rgba(245, 158, 11, 0.14);
}
html.dark .quota-card--warn { --q-accent: #fbbf24; }

/* Full state — tam dolduğunda red */
.quota-card--full {
    --q-accent: #dc2626;
    --q-accent-soft: rgba(220, 38, 38, 0.14);
}
html.dark .quota-card--full { --q-accent: #f87171; }

/* Sol dekoratif accent strip (tam dik çizgi) */
.quota-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    background: var(--q-accent);
    border-radius: 0 0.25rem 0.25rem 0;
    opacity: .85;
}

/* Sağ üst dekoratif dokuma gürültü — premium dokunuş */
.quota-card::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--q-accent-soft) 0%, transparent 60%);
    pointer-events: none;
    opacity: .7;
}

/* ── Sol: SVG ring ── */
.quota-ring {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    position: relative;
    z-index: 1;
}
.quota-ring__bg {
    fill: none;
    stroke: var(--q-track);
    stroke-width: 8;
}
.quota-ring__fg {
    fill: none;
    stroke: var(--q-accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 0 6px var(--q-accent-soft));
}
.quota-ring-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quota-ring__center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--q-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.quota-ring__center--infinity { font-size: 1.375rem; }

/* ── Orta: metin bloku ── */
.quota-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    position: relative;
    z-index: 1;
}
.quota-card__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--q-muted);
    margin: 0;
}
.quota-card__kicker-dot {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--q-accent);
    box-shadow: 0 0 6px var(--q-accent);
}
.quota-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--q-text);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.quota-card__title-sep {
    color: var(--q-muted);
    font-weight: 500;
    margin: 0 .1875rem;
}
.quota-card__title-total { color: var(--q-muted); font-weight: 600; }
.quota-card__hint {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--q-muted);
    letter-spacing: -0.005em;
    line-height: 1.4;
    margin: 0;
}
.quota-card__hint strong { color: var(--q-text); font-weight: 700; }

/* ── Sağ: percent badge ── */
.quota-card__pct {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.125rem;
    padding: 0.3125rem 0.625rem;
    background: var(--q-accent-soft);
    color: var(--q-accent);
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.quota-card__pct-sign { font-size: 0.6875rem; font-weight: 700; opacity: .7; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .quota-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1rem; padding: 1rem; }
    .quota-card__pct { grid-column: 2; grid-row: 2; justify-self: start; }
    .quota-ring { width: 64px; height: 64px; }
    .quota-card__title { font-size: 1rem; }
}

/* ═════════════════════════════════════════════════════════════
   NAV PULSE BADGE — Sidebar nav item'larına iliştirilen
   minimal pulse dot (sayı vermez, sadece dikkat çeker).
   ═════════════════════════════════════════════════════════════ */
.nav-pulse-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.nav-pulse-badge__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #f97316;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
    animation: navPulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.nav-pulse-badge__dot::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: rgba(249, 115, 22, 0.25);
    filter: blur(2px);
    z-index: -1;
}
@keyframes navPulse {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
html.dark .nav-pulse-badge__dot { background: #fb923c; box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.6); }
html.dark .nav-pulse-badge__dot::before { background: rgba(251, 146, 60, 0.3); }
@keyframes navPulseDark {
    0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.6); }
    70% { box-shadow: 0 0 0 7px rgba(251, 146, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
}
html.dark .nav-pulse-badge__dot { animation-name: navPulseDark; }

/* ═════════════════════════════════════════════════════════════
   QUOTA PILL — Page header içinde inline kapasite göstergesi
   Ring + count + hint. Minimalist, title'ın sağında yaşar.
   ═════════════════════════════════════════════════════════════ */
.quota-pill {
    --qp-accent: #3b82f6;
    --qp-soft: rgba(59, 130, 246, 0.14);
    --qp-track: rgba(148, 163, 184, 0.22);
    --qp-text: #0f172a;
    --qp-muted: #64748b;
    --qp-border: rgba(15, 23, 42, 0.08);
    --qp-surface: rgba(59, 130, 246, 0.03);

    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem 0.5rem 0.5rem;
    background: var(--qp-surface);
    border: 1px solid var(--qp-border);
    border-radius: 0.75rem; /* rounded-xl */
    transition: border-color .15s, background .15s;
}
html.dark .quota-pill {
    --qp-accent: #60a5fa;
    --qp-soft: rgba(96, 165, 250, 0.16);
    --qp-track: rgba(148, 163, 184, 0.14);
    --qp-text: #f1f5f9;
    --qp-muted: #94a3b8;
    --qp-border: rgba(148, 163, 184, 0.14);
    --qp-surface: rgba(96, 165, 250, 0.06);
}

.quota-pill--warn { --qp-accent: #f59e0b; --qp-soft: rgba(245,158,11,.14); --qp-surface: rgba(245,158,11,.05); }
html.dark .quota-pill--warn { --qp-accent: #fbbf24; --qp-soft: rgba(251,191,36,.16); --qp-surface: rgba(251,191,36,.06); }

.quota-pill--full { --qp-accent: #dc2626; --qp-soft: rgba(220,38,38,.14); --qp-surface: rgba(220,38,38,.05); }
html.dark .quota-pill--full { --qp-accent: #f87171; --qp-soft: rgba(248,113,113,.16); --qp-surface: rgba(248,113,113,.06); }

/* Mini ring (44px) */
.quota-pill__ring-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quota-pill__ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.quota-pill__ring-bg {
    fill: none;
    stroke: var(--qp-track);
    stroke-width: 5;
}
.quota-pill__ring-fg {
    fill: none;
    stroke: var(--qp-accent);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 0 4px var(--qp-soft));
}
.quota-pill__ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--qp-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.quota-pill__ring-center--infinity { font-size: 1.125rem; }

/* Body: count + hint */
.quota-pill__body {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
    line-height: 1.2;
}
.quota-pill__count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--qp-text);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.quota-pill__count-sep { color: var(--qp-muted); font-weight: 500; margin: 0 0.125rem; }
.quota-pill__count-total { color: var(--qp-muted); font-weight: 600; }
.quota-pill__hint {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--qp-muted);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
}
.quota-pill--full .quota-pill__hint { color: var(--qp-accent); font-weight: 600; }

/* Responsive: küçük ekranda hint gizlenir */
@media (max-width: 640px) {
    .quota-pill { padding: 0.4375rem 0.75rem 0.4375rem 0.4375rem; }
    .quota-pill__hint { display: none; }
    .quota-pill__ring-wrap { width: 36px; height: 36px; }
    .quota-pill__ring-center { font-size: 0.625rem; }
}

/* ═════════════════════════════════════════════════════════════
   CAPACITY RAIL — Page title altında tek satır kapasite hikayesi
   Slot dots + bağlamsal CTA. Her şey tek yerde, yarışmıyor.
   ═════════════════════════════════════════════════════════════ */
.capacity-rail {
    --cr-accent: #3b82f6;
    --cr-track: rgba(148, 163, 184, 0.2);
    --cr-slot-empty: rgba(148, 163, 184, 0.25);
    --cr-surface: #ffffff;
    --cr-soft: rgba(59, 130, 246, 0.03);
    --cr-text: #0f172a;
    --cr-muted: #64748b;
    --cr-border: rgba(15, 23, 42, 0.08);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9375rem 1.125rem;
    background: var(--cr-surface);
    border: 1px solid var(--cr-border);
    border-radius: 0.75rem; /* rounded-xl */
    position: relative;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
/* Sağ tarafta radial gradient aksan — accent renginden yumuşak geçiş */
.capacity-rail::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    background:
        radial-gradient(ellipse at 100% 50%,
            color-mix(in srgb, var(--cr-accent) 14%, transparent) 0%,
            color-mix(in srgb, var(--cr-accent) 5%, transparent) 40%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}
/* Sağ üst köşede küçük parıltı — karakter */
.capacity-rail::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--cr-accent) 10%, transparent) 0%,
        transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
}
html.dark .capacity-rail::before {
    background:
        radial-gradient(ellipse at 100% 50%,
            color-mix(in srgb, var(--cr-accent) 18%, transparent) 0%,
            color-mix(in srgb, var(--cr-accent) 7%, transparent) 40%,
            transparent 70%);
}
html.dark .capacity-rail::after {
    background: radial-gradient(circle,
        color-mix(in srgb, var(--cr-accent) 14%, transparent) 0%,
        transparent 60%);
}
.capacity-rail > * { position: relative; z-index: 1; }
html.dark .capacity-rail {
    --cr-accent: #60a5fa;
    --cr-track: rgba(148, 163, 184, 0.14);
    --cr-slot-empty: rgba(148, 163, 184, 0.18);
    --cr-surface: rgba(15, 23, 42, 0.5);
    --cr-soft: rgba(96, 165, 250, 0.06);
    --cr-text: #f1f5f9;
    --cr-muted: #94a3b8;
    --cr-border: rgba(148, 163, 184, 0.12);
}

.capacity-rail--warn { --cr-accent: #f59e0b; --cr-soft: rgba(245,158,11,.05); }
html.dark .capacity-rail--warn { --cr-accent: #fbbf24; --cr-soft: rgba(251,191,36,.06); }
.capacity-rail--full { --cr-accent: #dc2626; --cr-soft: rgba(220,38,38,.05); }
html.dark .capacity-rail--full { --cr-accent: #f87171; --cr-soft: rgba(248,113,113,.07); }

/* Sol: ikon + minik label */
.capacity-rail__lead {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.capacity-rail__icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cr-accent);
    color: #fff;
    border-radius: 0.5rem; /* rounded-lg */
    flex-shrink: 0;
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--cr-accent) 50%, transparent);
}
.capacity-rail__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.capacity-rail__kicker {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cr-muted);
}
.capacity-rail__count {
    font-size: 1rem;
    font-weight: 800;
    color: var(--cr-text);
    letter-spacing: -0.015em;
    margin-top: 0.125rem;
}
.capacity-rail__count-sep { color: var(--cr-muted); font-weight: 500; margin: 0 0.125rem; }
.capacity-rail__count-total { color: var(--cr-muted); font-weight: 600; }

/* Orta: slot visualization — nokta / bar / infinity */
.capacity-rail__slots {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    min-width: 0;
    padding: 0 0.25rem;
}
.capacity-rail__slot {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--cr-slot-empty);
    transition: background .3s, transform .25s;
    flex-shrink: 0;
    position: relative;
}
.capacity-rail__slot--filled {
    background: var(--cr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-accent) 18%, transparent);
}
.capacity-rail__slot--filled::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 9999px;
    background: color-mix(in srgb, #ffffff 35%, transparent);
    pointer-events: none;
}
/* Tek/iki slot durumunda dot viz anlamsız — visibility:hidden ile gizle ama grid alanını koru */
/* Bu sayede sağdaki status text yerinden kaymaz */
.capacity-rail__slots:has(.capacity-rail__slot:nth-child(-n+2):last-child) { visibility:hidden; }

/* ─────────────────────────────────────────────────────────
   CR-PROGRESS — Premium kapasite progress bar (3 sayfada ortak)
   Segmented track + gradient fill + glass highlight + grow anim
   ───────────────────────────────────────────────────────── */
.cr-progress {
    position: relative;
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 32px;
}
.cr-progress__track {
    flex: 1;
    position: relative;
    height: 10px;
    border-radius: 9999px; /* rounded-full */
    background: rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
html.dark .cr-progress__track {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
}
.cr-progress__fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--cr-pct, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg,
        var(--cr-accent) 0%,
        color-mix(in srgb, var(--cr-accent) 82%, white) 100%);
    animation: crProgressGrow 1.1s cubic-bezier(.22, 1, .36, 1) both;
    transform-origin: left center;
}
/* 0% durumda fill görünmez */
.cr-progress__fill[style*="--cr-pct: 0%"] { display: none; }

/* Sağ: yüzde gösterimi */
.cr-progress__pct {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cr-muted);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: right;
    flex-shrink: 0;
    animation: crPctFade 1.1s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: 0.4s;
}
.capacity-rail--warn .cr-progress__pct,
.capacity-rail--full .cr-progress__pct { color: var(--cr-accent); }
@keyframes crProgressGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes crProgressShimmer {
    0%   { transform: translateX(-120%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(420%); opacity: 0; }
}
@keyframes crPctFade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Warn/full state'de shimmer durur — dikkat çekmesin */
.capacity-rail--warn .cr-progress__fill::after,
.capacity-rail--full .cr-progress__fill::after { animation: none; opacity: 0.3; }
.capacity-rail--full .cr-progress__fill::before { background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, transparent 100%); }

@media (prefers-reduced-motion: reduce) {
    .cr-progress__fill,
    .cr-progress__fill::after,
    .cr-progress__pct { animation: none !important; }
}
@media (max-width: 640px) {
    .cr-progress__pct { display: none; }
}
/* Çok slotlu (>12) durum için compact bar fallback */
.capacity-rail__bar {
    flex: 1;
    min-width: 80px;
    height: 10px;
    background: var(--cr-track);
    border-radius: 9999px; /* rounded-full */
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    /* Tick marks — her %25'te hafif işaret */
    background-image:
        linear-gradient(180deg, transparent 0 2px, rgba(15,23,42,0.10) 2px 8px, transparent 8px),
        linear-gradient(180deg, transparent 0 2px, rgba(15,23,42,0.10) 2px 8px, transparent 8px),
        linear-gradient(180deg, transparent 0 2px, rgba(15,23,42,0.10) 2px 8px, transparent 8px);
    background-size: 1px 10px, 1px 10px, 1px 10px;
    background-position: 25% 0, 50% 0, 75% 0;
    background-repeat: no-repeat;
    background-color: var(--cr-track);
}
html.dark .capacity-rail__bar {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    background-image:
        linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.08) 2px 8px, transparent 8px),
        linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.08) 2px 8px, transparent 8px),
        linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.08) 2px 8px, transparent 8px);
}
.capacity-rail__bar-fill {
    position: relative;
    height: 100%;
    background:
        linear-gradient(90deg,
            var(--cr-accent) 0%,
            color-mix(in srgb, var(--cr-accent) 70%, white) 100%);
    border-radius: 9999px; /* rounded-full */
    box-shadow:
        0 0 12px color-mix(in srgb, var(--cr-accent) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transform-origin: left center;
    animation: capRailGrow 1.1s cubic-bezier(.22, 1, .36, 1) both;
    overflow: hidden;
}
.capacity-rail__bar-fill::before {
    /* Stripe pattern — progress bar hissi */
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,0.14) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.14) 75%,
        transparent 75%,
        transparent 100%
    );
    background-size: 14px 14px;
    animation: capRailStripes 1.6s linear infinite;
    opacity: 0.7;
    mix-blend-mode: overlay;
}
.capacity-rail__bar-fill::after {
    /* Leading edge glow */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 14px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45));
    animation: capRailGlowPulse 2.2s ease-in-out infinite;
}
@keyframes capRailGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes capRailStripes {
    from { background-position: 0 0; }
    to   { background-position: 28px 0; }
}
@keyframes capRailGlowPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
/* Full durumda stripe animasyonu durur — sabit "kilitli" hissi */
.capacity-rail--full .capacity-rail__bar-fill::before {
    animation: none;
    opacity: 0.5;
}
.capacity-rail--full .capacity-rail__bar-fill::after {
    animation: none;
    opacity: 0.6;
}
/* Motion tercih eden kullanıcılar için animasyonları durdur */
@media (prefers-reduced-motion: reduce) {
    .capacity-rail__bar-fill,
    .capacity-rail__bar-fill::before,
    .capacity-rail__bar-fill::after {
        animation: none !important;
    }
}
.capacity-rail__infinity {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cr-accent);
    line-height: 1;
    opacity: .7;
}

/* Sağ: status mesajı + CTA */
.capacity-rail__right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}
.capacity-rail__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cr-muted);
    letter-spacing: -0.005em;
}
.capacity-rail__status-dot { display: none; } /* gereksiz noise — status text yeterli */
.capacity-rail--full .capacity-rail__status { color: var(--cr-accent); }
.capacity-rail__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--cr-accent);
    border-radius: 0.5rem; /* rounded-lg */
    text-decoration: none;
    letter-spacing: -0.005em;
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--cr-accent) 50%, transparent);
    transition: transform .12s, filter .12s, box-shadow .12s;
    white-space: nowrap;
}
.capacity-rail__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 5px 14px -2px color-mix(in srgb, var(--cr-accent) 60%, transparent);
}
.capacity-rail__cta i { transition: transform .15s; }
.capacity-rail__cta:hover i { transform: translateX(2px); }

/* ═════════════════════════════════════════════════════════════
   PAGE TOOLBAR — header + sağ üst CTA bölgesi
   ═════════════════════════════════════════════════════════════ */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-toolbar__lead {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 auto;
}
.page-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.page-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
    text-decoration: none;
}
.page-toolbar__btn i { transition: transform .15s ease; }
.page-toolbar__btn:hover:not(.is-disabled) { transform: translateY(-1px); }
.page-toolbar__btn:hover:not(.is-disabled) i { transform: scale(1.06); }

.page-toolbar__btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.42), inset 0 1px 0 rgba(255,255,255,0.18);
}
.page-toolbar__btn--primary:hover:not(.is-disabled) {
    box-shadow: 0 6px 18px -2px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.20);
    color: #fff;
}

.page-toolbar__btn--ghost {
    color: #334155;
    background: #fff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.page-toolbar__btn--ghost:hover:not(.is-disabled) {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.18);
    color: #0f172a;
}
html.dark .page-toolbar__btn--ghost {
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
html.dark .page-toolbar__btn--ghost:hover:not(.is-disabled) {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(148, 163, 184, 0.30);
    color: #f1f5f9;
}

.page-toolbar__btn--danger {
    color: #ef4444;
    background: #fff;
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.08);
}
.page-toolbar__btn--danger:hover:not(.is-disabled) {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.55);
    color: #dc2626;
}
html.dark .page-toolbar__btn--danger {
    color: #f87171;
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(239, 68, 68, 0.40);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
html.dark .page-toolbar__btn--danger:hover:not(.is-disabled) {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.60);
    color: #fca5a5;
}

.page-toolbar__btn.is-disabled {
    opacity: 0.50;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 640px) {
    .page-toolbar { flex-direction: column; align-items: stretch; }
    .page-toolbar__actions { width: 100%; }
    .page-toolbar__btn { flex: 1 1 auto; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════
   TABLE HEADER — card-premium içinde yerleşen toolbar
   ═════════════════════════════════════════════════════════════ */
.ct-tableheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* card-premium'un 1.5rem padding'ini emer — kendi simetrik padding'i kullan */
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
html.dark .ct-tableheader {
    border-bottom-color: rgba(148, 163, 184, 0.10);
}
.ct-tableheader__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}
.ct-tableheader__count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.ct-tableheader__count strong {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.875rem;
    margin-right: 0.25rem;
}
html.dark .ct-tableheader__count { color: #94a3b8; }
html.dark .ct-tableheader__count strong { color: #f1f5f9; }

@media (max-width: 640px) {
    .ct-tableheader { flex-direction: column; align-items: stretch; padding: 0.75rem 1rem; }
    .ct-tableheader__meta { justify-content: flex-end; }
}

/* ═════════════════════════════════════════════════════════════
   CT-INPUT-GROUP — Icon + Input (leading/trailing) kanonik pattern
   Kural: `.ct-f__i` ve `.input-premium` kendi padding'lerini dayatır;
   Tailwind `pl-10/11/12` utility'leri specificity nedeniyle EZİLİR → ikon
   placeholder metniyle çakışır (2026-04-18: "Ürün ara..." bug'ı).
   Çözüm: bu sarmalayıcıyı kullan, padding component seviyesinde garanti.
   Kullanım:
       <div class="ct-input-group ct-input-group--leading">
           <i data-lucide="search" class="ct-input-group__icon"></i>
           <input type="text" class="ct-f__i" placeholder="..." />
       </div>
   Trailing ikon için `ct-input-group--trailing`, her ikisi için iki modifier.
   ═════════════════════════════════════════════════════════════ */
.ct-input-group {
    position: relative;
    display: block;
    width: 100%;
}
.ct-input-group__icon {
    position: absolute;
    top: 50%;
    width: 1rem;
    height: 1rem;
    color: var(--ct-t3, #94a3b8);
    pointer-events: none;
    transform: translateY(-50%);
    z-index: 1;
}
.ct-input-group--leading > .ct-input-group__icon { left: 0.875rem; }
.ct-input-group--trailing > .ct-input-group__icon { right: 0.875rem; }

/* Specificity: `.ct-input-group > input.ct-f__i` (0,2,1) > `input.ct-f__i` (0,1,1) */
.ct-input-group--leading > input.ct-f__i,
.ct-input-group--leading > select.ct-f__i,
.ct-input-group--leading > textarea.ct-f__i,
.ct-input-group--leading > input.input-premium,
.ct-input-group--leading > select.input-premium,
.ct-input-group--leading > textarea.input-premium {
    padding-left: 2.5rem;
}
.ct-input-group--trailing > input.ct-f__i,
.ct-input-group--trailing > select.ct-f__i,
.ct-input-group--trailing > textarea.ct-f__i,
.ct-input-group--trailing > input.input-premium,
.ct-input-group--trailing > select.input-premium,
.ct-input-group--trailing > textarea.input-premium {
    padding-right: 2.5rem;
}

/* ═════════════════════════════════════════════════════════════
   CT-SEARCH — Basit sarmalayıcı: absolute icon + .ct-f__i input
   Eski label-based versiyon dark mode'da ikon etrafında box ilüzyonu
   yaratıyordu. Şimdi input tüm alana yayılıyor, icon üzerinde overlay.
   ═════════════════════════════════════════════════════════════ */
.ct-search {
    position: relative;
    width: 100%;
    max-width: 28rem;
}
.ct-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    color: var(--ct-t3, #94a3b8);
    z-index: 1;
    transition: color .18s ease;
}
.ct-search:focus-within .ct-search__icon { color: var(--ct, #3b82f6); }

/* .ct-search içindeki .ct-f__i: pill shape, icon için sol padding, clear button için sağ padding */
.ct-search .ct-f__i.ct-search__input {
    height: 44px;
    padding-left: 2.5rem;
    padding-right: 2.25rem;
    border-radius: 9999px; /* rounded-full */
    font-size: .875rem;
    font-weight: 500;
}

.ct-search__clear {
    display: none;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background: transparent;
    border: 0;
    color: var(--ct-t3, #94a3b8);
    cursor: pointer;
    z-index: 2;
    transition: background .14s ease, color .14s ease;
}
.ct-search__clear:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
html.dark .ct-search__clear:hover {
    background: rgba(248, 113, 113, 0.18);
    color: #fca5a5;
}
.ct-search.is-filled .ct-search__clear { display: inline-flex; }

@media (max-width: 640px) {
    .ct-search { max-width: 100%; }
}

/* Ghost variant — secondary action (Toplu Yükle gibi) */
.capacity-rail__cta--ghost {
    color: var(--cr-text);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--cr-text) 14%, transparent);
    box-shadow: none;
}
.capacity-rail__cta--ghost:hover {
    background: color-mix(in srgb, var(--cr-text) 6%, transparent);
    color: var(--cr-text);
    border-color: color-mix(in srgb, var(--cr-text) 22%, transparent);
    box-shadow: none;
    filter: none;
}
html.dark .capacity-rail__cta--ghost {
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.22);
}
html.dark .capacity-rail__cta--ghost:hover {
    background: rgba(148,163,184,0.10);
    color: #f1f5f9;
    border-color: rgba(148,163,184,0.32);
}

@media (max-width: 720px) {
    .capacity-rail { grid-template-columns: 1fr; gap: 0.75rem; }
    .capacity-rail__right { justify-content: flex-start; flex-wrap: wrap; }
}

/* ═════════════════════════════════════════════════════════════
   USER CARD — Premium identity card (full interior redesign)
   ═════════════════════════════════════════════════════════════ */
.user-card {
    --uc-accent: #3b82f6;
    --uc-accent-soft: rgba(59, 130, 246, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem 1rem 0.875rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem; /* rounded-2xl */
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    position: relative;
    min-width: 0;
    overflow: visible; /* tooltip'ler dışarı taşabilsin */
    isolation: isolate;
}

/* Tüm dekoratif katmanlar (top gradient + bg icon) burada clip'lenir.
   Card overflow:visible olduğu için decorate kendi overflow:hidden'ını üstlenir. */
.user-card__decorate {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.user-card__decorate::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 56px;
    background: linear-gradient(180deg, var(--uc-accent-soft) 0%, transparent 100%);
    pointer-events: none;
}
html.dark .user-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.55) 100%);
    border-color: rgba(148, 163, 184, 0.14);
}
html.dark .user-card::before {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.10) 0%, transparent 100%);
}
.user-card:hover {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.20), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}
html.dark .user-card:hover {
    border-color: rgba(96, 165, 250, 0.40);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
}

/* Role variants — --uc-accent override: gradient hat + bg icon rolün rengi */
.user-card--role-admin {
    --uc-accent: #f59e0b;
    --uc-accent-soft: rgba(245, 158, 11, 0.09);
}
.user-card--role-staff {
    --uc-accent: #3b82f6;
    --uc-accent-soft: rgba(59, 130, 246, 0.08);
}
/* Staff sayfasındaki personel card'ı — teal accent (kullanıcı rolleri mavi/amber'den ayrışsın) */
.user-card--staff {
    --uc-accent: #0891b2;
    --uc-accent-soft: rgba(8, 145, 178, 0.08);
}

/* Dekoratif bg icon — "mood lighting" yaklaşımı.
   İkon heavy blur ile renk bulutu olur; şekil belli belirsiz, content'i bastırmaz.
   Ortalanmış + large scale + high blur = premium atmospheric glow.
   Role rengi card'a subtil bir aydınlatma katar. */
.user-card__bg {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
    color: var(--uc-accent);
    opacity: 0.18;
    filter: blur(10px);
    transition: opacity .35s ease, filter .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform, opacity;
}

html.dark .user-card__bg { opacity: 0.26; }

.user-card__bg svg,
.user-card__bg i {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
    display: block;
}

.user-card:hover .user-card__bg {
    opacity: 0.26;
    filter: blur(6px);
    transform: translate(-50%, -50%) scale(1.05);
}

html.dark .user-card:hover .user-card__bg {
    opacity: 0.36;
}

/* Head: gradient avatar + identity stack */
.user-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
}
.user-card__avatar {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 6px 14px -4px rgba(59, 130, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
html.dark .user-card__avatar {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.user-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-card__status {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 14px; height: 14px;
    border-radius: 9999px;
    border: 2.5px solid #fff;
    background: #94a3b8;
}
html.dark .user-card__status { border-color: rgb(15, 23, 42); }
.user-card__status--active { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }

.user-card__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}
.user-card__role {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
}

/* Right column stack — pill'ler label'sız, sadece tooltip'li */
.user-card__tags {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    padding-top: 1px;
}
.user-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .user-card__name { color: #f1f5f9; }
.user-card__email {
    font-size: 0.75rem;
    color: #64748b;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
    font-weight: 500;
}
html.dark .user-card__email { color: #94a3b8; }

/* Meta row: role pills */
.user-card__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    align-items: center;
    min-height: 1.25rem;
}

/* ── Role pill v2 — refined, flat, premium (Linear/Vercel/Stripe tarzı) ── */
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.002em;
    line-height: 1;
    border-radius: 0.375rem;
    white-space: nowrap;
    text-transform: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    max-width: 100%;
    /* overflow visible — tooltip pseudo-elementleri kırpılmasın.
       Truncation gerekirse child .role-pill__text kullanılır. */
}
.role-pill i {
    width: 11px; height: 11px;
    stroke-width: 2.25;
    flex-shrink: 0;
    opacity: 0.92;
}
/* Truncate uzun metinler için iç span — pill'in kendisi overflow visible kalır */
.role-pill__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: inline-block;
    max-width: 100%;
}

/* Admin — amber, restrained tint */
.role-pill--admin {
    color: #92400e;
    background: rgba(245, 158, 11, 0.09);
    border: 1px solid rgba(245, 158, 11, 0.22);
}
html.dark .role-pill--admin {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.11);
    border-color: rgba(251, 191, 36, 0.26);
}

/* Staff role — blue */
.role-pill--staff {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.20);
}
html.dark .role-pill--staff {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.26);
}

/* Linked staff — emerald, "aktif bağlantı" hissi */
.role-pill--linked {
    color: #065f46;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
    max-width: 180px;
}
html.dark .role-pill--linked {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.13);
    border-color: rgba(16, 185, 129, 0.28);
}

/* Inactive — neutral slate */
.role-pill--inactive {
    color: #475569;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.22);
}
html.dark .role-pill--inactive {
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.13);
    border-color: rgba(100, 116, 139, 0.28);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TOOLTIP SYSTEM — sistem genelinde kullanılan ortak dil
   Kullanım: <button data-tooltip="Açıklama">...</button>
   Opsiyonel yön:  data-tooltip-pos="bottom" | "right" | "left"
   CSS-only, zero JS. Dark mode otomatik.
   ═══════════════════════════════════════════════════════════════ */

[data-tooltip] { position: relative; }

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease 0ms, transform 160ms ease 0ms;
    z-index: 9999;
}

/* Ana tooltip kutusu */
[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    padding: 6px 10px;
    background: #0f172a;
    color: #f8fafc;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.003em;
    border-radius: 0.375rem;
    white-space: nowrap;
    max-width: 280px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.28), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
}

/* Arrow (döndürülmüş kare) */
[data-tooltip]::after {
    content: '';
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, 4px) rotate(45deg);
    width: 7px; height: 7px;
    background: #0f172a;
    border-radius: 1px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
}

/* Hover / keyboard focus ile aktif */
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transition-delay: 380ms;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    transform: translate(-50%, 0);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    transform: translate(-50%, 0) rotate(45deg);
}

/* Dark mode — ters renk (light tooltip on dark bg) */
html.dark [data-tooltip]::before {
    background: #f1f5f9;
    color: #0f172a;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.35);
}

html.dark [data-tooltip]::after {
    background: #f1f5f9;
}

/* Variant: bottom (tooltip below) */
[data-tooltip][data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 8px);
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 4px);
}

/* Variant: right */
[data-tooltip][data-tooltip-pos="right"]::before {
    bottom: 50%;
    left: calc(100% + 8px);
    transform: translate(-4px, 50%);
}

[data-tooltip][data-tooltip-pos="right"]::after {
    bottom: 50%;
    left: calc(100% + 4px);
    transform: translate(-4px, 50%) rotate(45deg);
}

[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::before {
    transform: translate(0, 50%);
}

[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
    transform: translate(0, 50%) rotate(45deg);
}

/* Variant: left */
[data-tooltip][data-tooltip-pos="left"]::before {
    bottom: 50%;
    left: auto;
    right: calc(100% + 8px);
    transform: translate(4px, 50%);
}

[data-tooltip][data-tooltip-pos="left"]::after {
    bottom: 50%;
    left: auto;
    right: calc(100% + 4px);
    transform: translate(4px, 50%) rotate(45deg);
}

[data-tooltip][data-tooltip-pos="left"]:hover::before,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::before {
    transform: translate(0, 50%);
}

[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after {
    transform: translate(0, 50%) rotate(45deg);
}

/* Accessibility: uzun metin için multi-line */
[data-tooltip][data-tooltip-wrap]::before {
    white-space: normal;
    min-width: 160px;
    max-width: 240px;
    text-align: left;
}

/* Native browser tooltip'ini data-tooltip olduğunda tamamen suppress etmek için:
   HTML'de data-tooltip kullanıldığında title attr'ı bırakılmaz (veya aria-label kullanılır).
   Bu kural dokümantasyon amaçlı. */

/* Actions: full-width grid, equal columns, gerçek presence */
.user-card__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
html.dark .user-card__actions { border-top-color: rgba(148, 163, 184, 0.12); }
.user-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 100%;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid transparent;
    color: #64748b;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
    text-decoration: none;
}
.user-card__action i { width: 15px; height: 15px; }
html.dark .user-card__action {
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
}
.user-card__action:hover {
    background: rgba(59, 130, 246, 0.10);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.24);
    transform: translateY(-1px);
}
.user-card__action--danger:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.24);
}
html.dark .user-card__action:hover {
    background: rgba(96, 165, 250, 0.16);
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.32);
}
html.dark .user-card__action--danger:hover {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.32);
}

/* ── Admin Panel — Sidebar & Topbar ────────────────────────── */
.admin-sidebar {
    background-color: var(--admin-sidebar);
    border-right: 1px solid var(--admin-sidebar-border);
}

.admin-topbar {
    background-color: rgba(20, 16, 9, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--admin-sidebar-border);
}

/* ── Nav Items ───────────────────────────────────────────────── */
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.admin-nav-active {
    background-color: var(--admin-accent-bg);
    color: var(--admin-accent-light);
    border: 1px solid var(--admin-accent-border);
}

.admin-nav-inactive {
    color: var(--admin-text-muted);
    border: 1px solid transparent;
}
.admin-nav-inactive:hover {
    background-color: rgba(212, 163, 82, 0.05);
    color: var(--admin-text-sub);
}

.admin-nav-danger {
    color: var(--admin-text-muted);
    border: 1px solid transparent;
}
.admin-nav-danger:hover {
    background-color: rgba(239, 68, 68, 0.07);
    color: #f87171;
}

.admin-nav-section-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--admin-text-muted);
    padding: 1rem 0.75rem 0.375rem;
    opacity: 0.5;
}

/* ── Admin Panel — Mobile Sidebar ──────────────────────────── */
.sidebar-overlay.open { display: block; }
@media (max-width: 767px) {
    .admin-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    .admin-body aside {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.3s ease,
                    opacity 0.3s ease;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background-color: var(--admin-sidebar);
        box-shadow: 4px 0 32px rgba(0,0,0,0.6);
        will-change: transform;
    }
    .admin-body aside.mobile-open {
        display: flex !important;
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Admin Panel — Select Dark Mode ────────────────────────── */
body.admin-body select,
body.admin-body select * {
    background-color: #1c1810 !important;
    color: #ede8de !important;
    color-scheme: dark !important;
}
body.admin-body select option,
body.admin-body select option:checked,
body.admin-body select option:hover,
body.admin-body select optgroup,
body.admin-body select optgroup option {
    background-color: #1c1810 !important;
    color: #ede8de !important;
}
body.admin-body select:focus,
body.admin-body select:active {
    background-color: #111009 !important;
    color: #ede8de !important;
    outline: none !important;
}

/* ── Admin Panel — Autofill Dark Overrride ──────────────────── */
body.admin-body input:-webkit-autofill,
body.admin-body input:-webkit-autofill:hover,
body.admin-body input:-webkit-autofill:focus,
body.admin-body input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px #1c1810 inset !important;
    -webkit-text-fill-color: #ede8de !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* ── Admin Panel — Translation Row Inputs ──────────────────── */
.trans-input {
    background: transparent !important;
    color: #e2e8f0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
}

/* ── Lokal Fontlar — Türkçe karakter tam desteği (OFL lisanslı) ────────── */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/fonts/oswald-var.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/fonts/roboto-condensed-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans-var.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-var.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Miranda Sans';
    src: url('/fonts/miranda-sans-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('/fonts/caveat-var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dancing Script';
    src: url('/fonts/dancing-script-var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Varsayılan font CSS değişkeni — font-init.js tarafından override edilir */
:root {
    --app-font: 'Plus Jakarta Sans';
}

body,
button,
input,
textarea,
select {
    font-family: var(--app-font), sans-serif !important;
}

/* ── Kompakt Mod ────────────────────────────────────────────────────────── */
html.compact .nav-item {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

html.compact .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
html.compact .py-4 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
html.compact .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
html.compact .p-6  { padding: 1rem !important; }
html.compact .p-4  { padding: 0.75rem !important; }
html.compact .gap-4 { gap: 0.625rem !important; }
html.compact .gap-3 { gap: 0.5rem !important; }
html.compact table td, html.compact table th { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

/* ── Animasyon Kapalı ───────────────────────────────────────────────────── */
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* ── Yazı Boyutu ────────────────────────────────────────────────────────── */
/* font-init.js, html element'e inline style ile --app-font-size değişkenini yazar.
   Sadece metin elementlerine uygulanır — rem tabanlı spacing/layout etkilenmez.
   sm=13px | md=15px | lg=17px */
body,
p, span, a, li, td, th, label, input, textarea, select, button {
    font-size: var(--app-font-size, 15px) !important;
}
/* Tailwind text-xs / text-sm gibi explicit boyutlar korunur — sadece unsized elemanlar etkilenir */
.text-xs   { font-size: calc(var(--app-font-size, 15px) * 0.8)  !important; }
.text-sm   { font-size: calc(var(--app-font-size, 15px) * 0.933) !important; }
.text-base { font-size: var(--app-font-size, 15px)               !important; }
.text-lg   { font-size: calc(var(--app-font-size, 15px) * 1.2)  !important; }
.text-xl   { font-size: calc(var(--app-font-size, 15px) * 1.333) !important; }
.text-2xl  { font-size: calc(var(--app-font-size, 15px) * 1.6)  !important; }
.text-3xl  { font-size: calc(var(--app-font-size, 15px) * 2)    !important; }

/* ── Sidebar Genişliği ──────────────────────────────────────────────────── */
/* font-init.js tarafından --sidebar-width CSS değişkeni override edilir */
/* narrow: 13rem | normal: 16rem (varsayılan) | wide: 19rem */

/* ── Accent Rengi ───────────────────────────────────────────────────────── */
/* font-init.js tarafından --accent, --accent-hover, --accent-light set edilir */
a.text-blue-600, a.text-blue-500 {
    color: var(--accent, #3b82f6);
}
.border-blue-500 {
    border-color: var(--accent, #3b82f6) !important;
}
.bg-blue-50 {
    background-color: var(--accent-light, rgba(59,130,246,0.1)) !important;
}
.text-blue-600 {
    color: var(--accent, #3b82f6) !important;
}
.text-blue-500 {
    color: var(--accent, #3b82f6) !important;
}

/* Admin panel için Geist — body.admin-body class'ı ile override */
body.admin-body,
body.admin-body button,
body.admin-body input,
body.admin-body textarea,
body.admin-body select {
    font-family: 'Geist', 'ui-sans-serif', 'system-ui', sans-serif !important;
}

body {
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01";
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.022em;
    line-height: 1.2;
}

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    --input-bg: #f9fafb;
    --input-border: #e5e7eb;
    --input-radius: 0.75rem;
    /* 12px — rounded-xl */
    --input-px: 1rem;
    /* 16px */
    --input-py: 0.625rem;
    /* 10px */
    --input-font-size: 0.875rem;
    /* 14px */
    --input-line-height: 1.5;
    --input-color: #111827;
    --input-placeholder: #9ca3af;
    --input-focus-border: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, .15);
    --input-focus-bg: #ffffff;
    --input-icon-color: #9ca3af;
    --input-icon-focus: #3b82f6;
    --input-transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html.dark {
    --input-color: #f1f5f9;
    --input-placeholder: #64748b;
    --input-focus-bg: #1e293b;
    --input-focus-border: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, .25);
}

/* ── Base: every interactive field ─────────────────────────── */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    display: block;
    width: 100%;
    padding: var(--input-py) var(--input-px);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    font-family: inherit;
    color: var(--text-main, var(--ct-t1, #0f172a));
    background-color: var(--bg-page, var(--ct-bg, #ffffff));
    border: 1px solid var(--border-main, var(--ct-brd, #e2e8f0));
    border-radius: var(--input-radius);
    transition: var(--input-transition);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus-border);
    background-color: var(--input-focus-bg);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}


/* ── Select Option Text Color Issue Fix ──────────────────────── */
select option {
    color: #111827;
    font-weight: 500;
    background-color: #ffffff;
}

html.dark select option { color: #f1f5f9; background-color: #1e293b; }

/* ── Container / Card Styles ──────────────────────────────────── */

/* glass-card: dashboard onboarding, SMS durumu, Google Maps banner gibi highlight paneller */
.glass-card {
    background: var(--ct-bg, #ffffff);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ct-brd, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    border-radius: 1rem; /* rounded-2xl = 16px */
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.glass-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border-color: var(--ct-brd2, #cbd5e1);
}
html.dark .glass-card {
    background: var(--ct-bg2, #1e293b);
    border-color: var(--ct-brd, #334155);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
}
html.dark .glass-card:hover {
    border-color: var(--ct-brd2, #475569);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* card-premium: tüm modül kartları için standart kart */
.card-premium {
    background: var(--ct-bg, #ffffff);
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid var(--ct-brd, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    color: var(--ct-t1, #0f172a);
}

.card-premium:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border-color: var(--ct-brd2, #cbd5e1);
}

html.dark .card-premium {
    background: var(--ct-bg2, #1e293b);
    border-color: var(--ct-brd, #334155);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
}

html.dark .card-premium:hover {
    border-color: var(--ct-brd2, #475569);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* card-glass: özel vurgu/highlight kartlar (gradient arka plan) */
.card-glass {
    background: linear-gradient(135deg, var(--ct-bg, #ffffff) 0%, var(--ct-bg2, #f8fafc) 100%);
    border: 1px solid var(--ct-brd, #e2e8f0);
    border-radius: 1rem; /* rounded-2xl */
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
html.dark .card-glass {
    background: linear-gradient(135deg, var(--ct-bg2, #1e293b) 0%, var(--ct-bg3, #334155) 100%);
    border-color: var(--ct-brd, #334155);
}

/* ── Stat Box — dashboard istatistik kartları ────────────────── */
.stat-box {
    background: var(--ct-bg, #ffffff);
    border: 1px solid var(--ct-brd, #e2e8f0);
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.stat-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border-color: var(--ct-brd2, #cbd5e1);
}
html.dark .stat-box {
    background: var(--ct-bg2, #1e293b);
    border-color: var(--ct-brd, #334155);
}
html.dark .stat-box:hover {
    border-color: var(--ct-brd2, #475569);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.stat-box__icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-box__value {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--ct-t1, #0f172a);
    letter-spacing: -0.02em;
}
.stat-box__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ct-t3, #94a3b8);
}
.stat-box__trend {
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}
.stat-box__trend--up   { color: #059669; background: #d1fae5; }
.stat-box__trend--down { color: #dc2626; background: #fee2e2; }
html.dark .stat-box__trend--up   { color: #34d399; background: rgba(52,211,153,0.1); }
html.dark .stat-box__trend--down { color: #f87171; background: rgba(248,113,113,0.1); }

/* ── Section Divider ─────────────────────────────────────────── */
.section-divider {
    border: none;
    border-top: 1px solid var(--ct-brd, #e2e8f0);
    margin: 1.5rem 0;
}

/* ─────────────────────────────────────────────────────────
   LIMIT CARD — kullanıcı/personel/kayıt limit göstergesi
   Users, Staff, Patients sayfalarında ortak bileşen
   ───────────────────────────────────────────────────────── */
.limit-card {
    background: var(--ct-bg, #ffffff);
    border: 1px solid var(--ct-brd, #e2e8f0);
    border-radius: 1rem; /* rounded-2xl */
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
html.dark .limit-card {
    background: var(--ct-bg, #0f172a);
    border-color: var(--ct-brd, #334155);
}
.limit-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.limit-card__body {
    flex: 1;
    min-width: 0;
}
.limit-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.limit-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-t1, #0f172a);
}
html.dark .limit-card__title { color: var(--ct-t1, #f8fafc); }
.limit-card__remaining {
    font-size: 0.75rem;
    color: var(--ct-t3, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
}
.limit-card__bar {
    height: 6px;
    background: var(--ct-bg3, #f1f5f9);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.375rem;
}
html.dark .limit-card__bar { background: var(--ct-bg3, #334155); }
.limit-card__bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--ct, #3b82f6);
    transition: width 0.4s ease;
}
.limit-card__bar-fill.warning { background: #f59e0b; }
.limit-card__bar-fill.danger  { background: #ef4444; }

.badge-premium {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.1);
}

/* ── Custom Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0.75rem;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

html.dark ::-webkit-scrollbar-thumb { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Scrollbar taşma notu ────────────────────────────────────── */
/* rounded parent içinde scrollable child varsa scrollbar köşeden taşar.
   Çözüm: parent'a overflow:hidden ekle (HTML'de). Global kural uygulanamaz
   çünkü rounded+scrollable kombinasyonuna hidden yazılırsa scroll kırılır. */

/* ── Modal Transitions ───────────────────────────────────────── */
.modal {
    display: none;
}

.modal.active {
    display: flex;
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-content {
    transform: scale(0.95);
    opacity: 0;
    animation: modalContentShow 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Modal açıkken tüm data-tooltip pseudo'ları gizlensin — tooltip z-index'i modal overlay'den
   yüksek olduğu için blur/opak'ı deler. Modal içinde aria-label yeterli, tooltip kaybı kritik değil. */
body:has(.modal-overlay.open) [data-tooltip]::before,
body:has(.modal-overlay.open) [data-tooltip]::after {
    display: none !important;
}

/* Modal overlay: tam ekran ortada — position fixed inset 0, flex center center.
   Güçlü blur + opak backdrop. Soldurma kuralı yok — tek fokus nokta modal kutusu.
   !important zorunlu: HTML'deki Tailwind utility (.flex, .hidden vb.) ile çakışma önlenir.
   Mobil padding: view'larda p-4 class'ı ile sağlanır. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60; /* navbar z-20, mobile sidebar z-50'nin üstünde */
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: none !important;
    align-items: center;
    justify-content: center;
}

html.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-overlay.open {
    display: flex !important;
    animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.open>div {
    animation: modalContentShow 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

@keyframes modalContentShow {
    from {
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* The user's provided code ends here */

input[type="text"]:disabled,
input[type="tel"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

html.dark input[type="text"]:disabled,
html.dark input[type="tel"]:disabled,
html.dark input[type="email"]:disabled,
html.dark input[type="number"]:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
    background-color: #1e293b;
}

/* ── Dark mode: input/select/textarea text rengi ──────────── */
/* !important: Tailwind CDN runtime stillerini override etmek için gerekli */
html.dark input[type="text"],
html.dark input[type="tel"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="date"],
html.dark textarea,
html.dark select {
    color: #f1f5f9 !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

/* ── Select: custom dropdown arrow — ESKİ BLOK (3509'daki yeni blok geçerli) ── */

/* ── Icon-prefixed input wrapper ───────────────────────────── */
/*
   Usage:
   <div class="input-icon-group">
     <i data-lucide="search" class="input-icon"></i>
     <input type="text" class="input-with-icon" ... />
   </div>
*/
.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-group .input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--input-icon-color);
    pointer-events: none;
    transition: color .15s ease;
    flex-shrink: 0;
    z-index: 2;
}

.input-icon-group:focus-within .input-icon {
    color: var(--input-icon-focus);
}

.input-icon-group input,
.input-icon-group .input-with-icon {
    padding-left: 2.5rem !important;
}

/* Trailing icon (e.g. password toggle) */
.input-icon-trail {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--input-icon-color);
    cursor: pointer;
    transition: color .15s ease;
    z-index: 2;
}

.input-icon-trail:hover {
    color: #6b7280;
}

/* ── Textarea ───────────────────────────────────────────────── */
textarea {
    resize: vertical;
    min-height: 6rem;
}

/* ── Form Label ─────────────────────────────────────────────── */
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main, var(--ct-t1, #0f172a));
    margin-bottom: 0.375rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   DARK / ADMIN PANEL INPUT SYSTEM
   Single canonical class: .input-admin
   Applied to ALL admin modals, forms, toolbars uniformly.
   ═══════════════════════════════════════════════════════════════ */

/*
   .input-admin  — Standard dark input for admin pages
   .input-dark   — Alias kept for backward-compat (maps to same styles)

   Usage:
     <input type="text" class="input-admin" placeholder="..." />
     <select class="input-admin">...</select>
     <textarea class="input-admin"></textarea>
*/
/* ── SPECIFICITY OVERRIDE ───────────────────────────────────────────
   Global base uses input[type="text"] -> specificity (0,1,1).
   Plain .input-admin is only (0,1,0) so the white bg/dark text wins.
   Fix: use element.class selectors -> (0,1,1) + !important on 3 props.
   ─────────────────────────────────────────────────────────────────── */

/* Structural (no color — no specificity war needed) */
.input-admin,
.input-dark {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.5;
    border-radius: 0.75rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Color overrides win because of element.class specificity (0,1,1) + !important */
input.input-admin,
input.input-dark,
textarea.input-admin,
textarea.input-dark,
button.input-admin,
button.input-dark {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #f1f5f9 !important;
    border: 1.5px solid rgba(255, 255, 255, .15) !important;
}

input.input-admin::placeholder,
input.input-dark::placeholder,
textarea.input-admin::placeholder,
textarea.input-dark::placeholder {
    color: rgba(255, 255, 255, .30) !important;
    font-weight: 400;
}

input.input-admin:focus,
input.input-dark:focus,
textarea.input-admin:focus,
textarea.input-dark:focus,
select.input-admin:focus,
select.input-dark:focus,
button.input-admin:focus,
button.input-dark:focus {
    background-color: rgba(255, 255, 255, .09) !important;
    border-color: rgba(59, 130, 246, .55) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important;
}

/* Select — no [type] attr so class alone (0,1,0) beats element (0,0,1)
   but we still add !important as insurance */
select.input-admin,
select.input-dark {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #f1f5f9 !important;
    border: 1.5px solid rgba(255, 255, 255, .15) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
    color-scheme: dark;
}

select.input-admin:focus,
select.input-dark:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

select.input-admin option,
select.input-dark option {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* Textarea */
textarea.input-admin,
textarea.input-dark {
    resize: vertical;
    min-height: 5rem;
}

/* Form label for dark panels */
.form-label-dark {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

/* input-addon-field color fix (same specificity issue) */
input.input-addon-field {
    color: #f1f5f9 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

input.input-addon-field::placeholder {
    color: rgba(255, 255, 255, .25) !important;
}

/* ── Addon (prefix/suffix) input group — Finance panel ─────── */
/*
   Usage:
   <div class="input-addon-group">
     <span class="input-addon">₺</span>
     <input type="number" class="input-addon-field" ... />
   </div>
*/
.input-addon-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid rgba(255, 255, 255, .15);
    border-radius: 0.875rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input-addon-group:focus-within {
    border-color: rgba(59, 130, 246, .6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.input-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    min-width: 3rem;
    background: rgba(255, 255, 255, .08);
    border-right: 1.5px solid rgba(255, 255, 255, .12);
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    user-select: none;
}

.input-addon-field {
    /* Reset all global input styles for this context */
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #f1f5f9;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.input-addon-field::placeholder {
    color: rgba(255, 255, 255, .25);
    font-weight: 400;
}

/* Remove spin buttons on number inputs inside addon group */
.input-addon-field[type="number"]::-webkit-inner-spin-button,
.input-addon-field[type="number"]::-webkit-outer-spin-button {
    opacity: 0.4;
    height: auto;
}

/* ── Table Row Transitions ──────────────────────────────────── */
tr.hover-row:hover {
    background-color: var(--nav-hover);
}

table {
    color: var(--text-main, var(--ct-t1, #0f172a));
}

thead th {
    background-color: var(--bg-page);
    color: var(--text-muted);
}

tbody td {
    border-bottom: 1px solid var(--border-main, var(--ct-brd, #e2e8f0));
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-success {
    background: #f0fdf4;
    color: #16a34a;
}

.badge-pending {
    background: #fffbeb;
    color: #d97706;
}

.badge-fail {
    background: #fef2f2;
    color: #dc2626;
}

.badge-info {
    background: #eff6ff;
    color: #2563eb;
}

html.dark .badge-success { background: rgba(22, 163, 74, 0.15); color: #4ade80; }
html.dark .badge-pending { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
html.dark .badge-fail { background: rgba(220, 38, 38, 0.15); color: #f87171; }
html.dark .badge-info { background: rgba(37, 99, 235, 0.15); color: #60a5fa; }

/* ── Link Animations ────────────────────────────────────────── */
.nav-link {
    transition: all 0.15s;
}

/* ── Locked Feature Overlays ────────────────────────────────── */
.locked-container {
    position: relative;
    cursor: not-allowed !important;
    user-select: none;
    display: block;
    width: 100%;
    overflow: visible !important;
}

.locked-container:hover {
    z-index: 10;
}

/* Blur only application-level components, NOT menus or buttons */
.locked-container>*:not(.lock-overlay):not(.locked-tooltip):not(.locked-nav-item):not(.locked-btn) {
    filter: blur(2px);
    opacity: 0.75;
    pointer-events: none !important;
    transition: all 0.3s ease;
}

/* Nav item + button: muted okunabilir state (2026-04-17 redesign) */
.locked-nav-item,
.locked-btn {
    position: relative;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.locked-nav-item {
    width: 100%;
    /* Light mode: subtle slate wash, daha okunabilir */
    /* Disabled wash — stripe daha belirgin, slate hue (blue değil → active ≠ locked) */
    background-color: rgba(100, 116, 139, 0.11) !important;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(100, 116, 139, 0.10) 0px,
        rgba(100, 116, 139, 0.10) 2px,
        transparent 2px,
        transparent 6px
    ) !important;
    border: 1px dashed rgba(100, 116, 139, 0.40) !important;
    /* Icon-only pill için dar alan (22px pill + 10px buffer) */
    padding-right: 2.5rem !important;
    /* 2-satır wrap önleme (settings submenu gibi markup'lar için) */
    min-width: 0;
    flex-wrap: nowrap !important;
}

/* Text ellipsis — tüm non-icon direct child'lara uygulanır (settings submenu dahil) */
.locked-nav-item .sidebar-text,
.locked-nav-item > span,
.locked-nav-item > div,
.locked-nav-item > p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.locked-nav-item i,
.locked-nav-item svg {
    color: #94a3b8 !important;
    opacity: 0.85;
}
.locked-nav-item .sidebar-text {
    color: #64748b !important;  /* daha okunabilir — eski #94a3b8 solgundu */
    font-weight: 500;
}

html.dark .locked-nav-item {
    /* Dark: daha güçlü stripe + slate hue (blue değil — active bg-blue-900/30'dan ayrışır) */
    background-color: rgba(148, 163, 184, 0.07) !important;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(148, 163, 184, 0.11) 0px,
        rgba(148, 163, 184, 0.11) 2px,
        transparent 2px,
        transparent 6px
    ) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html.dark .locked-nav-item i,
html.dark .locked-nav-item svg {
    color: #94a3b8 !important;
}
html.dark .locked-nav-item .sidebar-text {
    color: #cbd5e1 !important;
}

/* Collapsed sidebar: sağ padding sıfır (pill gizleniyor) */
aside.collapsed .locked-nav-item {
    padding-right: 0.75rem !important;
}

/* Locked button (ayrı konu): muted grayscale korundu */
.locked-btn {
    opacity: 0.68 !important;
    filter: grayscale(42%) saturate(0.72) !important;
}

/* ── Lock Overlay: dikey merkezli, sağa yaslı ───────────────── */
.lock-overlay {
    position: absolute;
    top: 0; right: 0.5rem; bottom: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;       /* dikey merkez — artık flex-start değil */
    justify-content: flex-end;
}

/* ── Button Lock Overlay (nav'dan farklı) ── */
.locked-btn~.lock-overlay,
.locked-container:has(.locked-btn) .lock-overlay {
    top: 0.25rem; right: 0.25rem; bottom: auto;
    align-items: flex-start;
}

/* ───────────────────────────────────────────────────────────────
   LOCK BADGE (pill) — nav item sağında
   Legacy class: .lock-circle korunuyor (DOM değişmeden override).
   ─────────────────────────────────────────────────────────────── */
.locked-nav-item~.lock-overlay .lock-circle,
.locked-container:has(.locked-nav-item) .lock-overlay .lock-circle {
    /* Icon-only kare pill (label yok, sadece tip-ikonu) */
    width: 22px !important;
    height: 22px !important;
    min-height: unset;
    padding: 0 !important;
    border-radius: 0.375rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
    /* Temel (plan) stili */
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(245, 158, 11, 0.12) 100%) !important;
    color: #b45309 !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(251, 191, 36, 0.08);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.locked-nav-item~.lock-overlay .lock-circle i,
.locked-container:has(.locked-nav-item) .lock-overlay .lock-circle i,
.locked-nav-item~.lock-overlay .lock-circle svg,
.locked-container:has(.locked-nav-item) .lock-overlay .lock-circle svg {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    stroke-width: 2.5;
    color: currentColor !important;
    opacity: 0.95;
}

/* ─── VARIANT OVERRIDES ────────────────────────────────────
   Label yok (::after kaldırıldı), sadece icon + renk.
   İcon tipi markup'tan geliyor:
     lock-plan   → sparkles (plan ikonu — dinamik hale getirilecek)
     lock-verify → badge-check
     lock-perm   → lock
   Renk = kilit tipini anlatır; hover'da tooltip detay verir.
   ──────────────────────────────────────────────────────── */

/* lock-verify — Doğrulama eksik/warning (orange hue — pozitif mavi-tik algısını önler) */
.locked-container.lock-verify .lock-overlay .lock-circle {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.14) 0%, rgba(194, 65, 12, 0.11) 100%) !important;
    color: #9a3412 !important;
    border-color: rgba(234, 88, 12, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(234, 88, 12, 0.08) !important;
}

/* lock-perm — Yetki/slate */
.locked-container.lock-perm .lock-overlay .lock-circle {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #475569 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* ── Dark mode variant overrides ── */
html.dark .locked-nav-item~.lock-overlay .lock-circle,
html.dark .locked-container:has(.locked-nav-item) .lock-overlay .lock-circle,
html.dark .locked-container.lock-plan .lock-overlay .lock-circle {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(245, 158, 11, 0.12) 100%) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
html.dark .locked-container.lock-verify .lock-overlay .lock-circle {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.18) 0%, rgba(234, 88, 12, 0.14) 100%) !important;
    color: #fdba74 !important;
    border-color: rgba(251, 146, 60, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
html.dark .locked-container.lock-perm .lock-overlay .lock-circle {
    background: rgba(71, 85, 105, 0.40) !important;
    color: #cbd5e1 !important;
    border-color: rgba(100, 116, 139, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Hover — hafif elevate */
.locked-container:hover .lock-circle {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* Active state (mousedown) */
.locked-container:active .lock-circle {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* ── Collapsed sidebar: sadece ikon, label yok ── */
aside.collapsed .locked-container .lock-overlay {
    top: 0; right: 0.3rem; bottom: 0;
    align-items: center;
}
aside.collapsed .locked-container .lock-circle {
    min-height: 16px !important;
    padding: 2px 4px !important;
    gap: 0 !important;
}
aside.collapsed .locked-container .lock-circle::after {
    display: none;   /* label gizle */
}

/* ── Button lock: pill yerine eski circle kalıyor (ayrı bağlam) ── */
.locked-btn~.lock-overlay .lock-circle,
.locked-container:has(.locked-btn) .lock-overlay .lock-circle {
    width: 20px !important;
    height: 20px !important;
    min-height: unset;
    padding: 0 !important;
    border-radius: 9999px !important;
    gap: 0 !important;
    background: #1e293b !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    margin-top: -4px;
    margin-right: -4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
}
.locked-btn~.lock-overlay .lock-circle::after,
.locked-container:has(.locked-btn) .lock-overlay .lock-circle::after {
    display: none;
}
html:not(.dark) .locked-btn~.lock-overlay .lock-circle,
html:not(.dark) .locked-container:has(.locked-btn) .lock-overlay .lock-circle {
    background: #f8fafc !important;
}

/* ── Tooltip — Redesigned ── */
.locked-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px 14px 8px 17px;
    border-radius: 0.75rem;
    font-size: 11px;
    font-weight: 600;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 30;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.06);
    pointer-events: none;
    letter-spacing: 0.01em;
    line-height: 1.4;
    overflow: hidden;
}
html:not(.dark) .locked-tooltip {
    background: #0f172a;
    color: #e2e8f0;
}

/* Accent bar — left edge (lock tipine göre renk) */
.locked-tooltip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #fbbf24;  /* default = lock-plan amber */
}
.lock-plan .locked-tooltip::before   { background: #fbbf24; }
.lock-verify .locked-tooltip::before { background: #f97316; }
.lock-perm .locked-tooltip::before   { background: #94a3b8; }

aside.collapsed .locked-tooltip {
    top: 50%;
    left: calc(100% + 0.75rem);
    transform: translateY(-50%) translateX(-6px);
}

.locked-container:hover .locked-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

aside.collapsed .locked-container:hover .locked-tooltip {
    transform: translateY(-50%) translateX(0);
}

/* ── Unified Badge System ─────────────────────────────────── */
.badge-revion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 1.5rem;
    /* 24px - Fixed Height */
    padding: 0 0.75rem;
    border-radius: 0.625rem;
    /* ~10px - Perfect rounded */
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    /* Zero vertical offset */
}

/* Variants */
.badge-revion-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

.badge-revion-danger {
    background-color: rgba(244, 63, 94, 0.1) !important;
    color: #f43f5e !important;
    border-color: rgba(244, 63, 94, 0.2) !important;
}

.badge-revion-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.badge-revion-blue {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.badge-revion-purple {
    background-color: rgba(139, 92, 246, 0.1) !important;
    color: #a78bfa !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

.badge-revion-neutral {
    background-color: rgba(148, 163, 184, 0.1) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.discount-target-badges > span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 1.5rem;
    padding: 0 0.75rem;
    border-radius: 0.625rem;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Dot for status badges */
.badge-revion .dot {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background-color: currentColor;
}

.badge-revion .dot-animate {
    animation: badge-pulse 1.5s infinite;
}

@keyframes badge-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Finance Page UI Fixes - No more white shadows/borders in Dark Theme */
.card-dark-fix {
    background-color: rgba(13, 17, 23, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4) !important;
}

.btn-secondary-dark {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

.btn-secondary-dark:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* ── Dashboard Stats ────────────────────────────────────────── */
.stat-card-premium {
    position: relative;
    background: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 2rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}



.stat-card-premium:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(30, 41, 59, 0.6);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3);
}

.stat-card-bg-icon {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    width: 6rem;
    height: 6rem;
    opacity: 0.03;
    transform: rotate(-15deg);
    transition: all 0.4s ease;
}

.stat-card-premium:hover .stat-card-bg-icon {
    opacity: 0.06;
    transform: rotate(0deg) scale(1.1);
}

.stat-label-premium {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

.stat-value-premium {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: white;
    line-height: 1;
    margin-top: 0.5rem;
}

/* ── Premium Buttons ───────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--accent, #2563eb);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.12);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: var(--accent-hover, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.18);
}

.btn-primary:active {
    transform: scale(0.98);
}

html.dark .btn-primary {
    background-color: var(--accent, #2563eb);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
html.dark .btn-primary:hover {
    background-color: var(--accent-hover, #3b82f6);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.25);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #ffffff;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

html.dark .btn-secondary {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
html.dark .btn-secondary:hover {
    background-color: #334155;
    border-color: #475569;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.btn-ghost:hover {
    background-color: rgba(241, 245, 249, 0.5);
    color: #1e293b;
}

html.dark .btn-ghost { color: #94a3b8; }
html.dark .btn-ghost:hover { background-color: rgba(30, 41, 59, 0.5); color: #e2e8f0; }

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #dc2626;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid rgba(220, 38, 38, 0.1);
    box-shadow: 0 2px 4px -1px rgba(220, 38, 38, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
}
.btn-danger:hover {
    background-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(220, 38, 38, 0.25);
}
.btn-danger:active { transform: scale(0.98); }

.btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #d97706;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid rgba(217, 119, 6, 0.1);
    box-shadow: 0 2px 4px -1px rgba(217, 119, 6, 0.12);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
}
.btn-warning:hover {
    background-color: #b45309;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(217, 119, 6, 0.2);
}
.btn-warning:active { transform: scale(0.98); }

/* Size modifiers — add alongside base btn class */
.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    gap: 0.375rem;
}
.btn-xs {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    gap: 0.25rem;
}
.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
    gap: 0.625rem;
}

/* ── Premium Inputs ────────────────────────────────────── */
.input-premium {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border: 1.5px solid #d1d5db;
    /* Bit darker border for better contrast */
    border-radius: 1rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #0f172a;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
}

.input-premium::placeholder {
    color: #64748b !important;
    /* Slate-500 for much better placeholder contrast */
}

html.dark .input-premium {
    /* --ct-bg2 ile hizalı (.ct-f__i / .ct-search ile aynı ton). Önceden #1e293b idi */
    background-color: var(--ct-bg2, #172033) !important;
    border-color: var(--ct-brd, #2a3c56) !important;
    color: var(--ct-t1, #f1f5f9) !important;
}

select.input-premium {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1rem 1rem;
    padding-right: 2.5rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.input-premium:focus,
select.input-premium:focus {
    background-color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

html.dark .input-premium:focus,
html.dark select.input-premium:focus {
    background-color: #0f172a !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}

select.input-premium:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Ensure padding-left utilities work with input-premium */
.input-premium.pl-8 {
    padding-left: 2rem !important;
}

.input-premium.pl-9 {
    padding-left: 2.25rem !important;
}

.input-premium.pl-10 {
    padding-left: 2.5rem !important;
}

.input-premium.pl-11 {
    padding-left: 2.75rem !important;
}

.input-premium.pl-12 {
    padding-left: 3rem !important;
}

.input-premium.pl-14 {
    padding-left: 3.5rem !important;
}

html.dark .input-premium::placeholder {
    color: #64748b !important;
}

/* ── Select & Option Dark Mode Fix ────────────────────── */
/* color-scheme:dark → browser native dropdown'u dark yapar */
html.dark select {
    color-scheme: dark;
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

html.dark select option {
    background-color: #1e293b;
    color: #f1f5f9;
}

html.dark select option:checked {
    background-color: #2d3f55;
    color: #f1f5f9;
}

html.dark select option:hover {
    background-color: #2d3f55;
}

/* Select elements without input-premium — temel dark stil   */
html.dark select:not(.input-premium) {
    background-color: #1e293b;
    border: 1.5px solid #334155;
    border-radius: 0.75rem;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    color: #f1f5f9;
    outline: none;
}

html.dark select:not(.input-premium):focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ── Select ok ikonu — tüm select'ler için standart konum ── */
/* appearance:none sonrası custom ok SVG. Sağdan 0.875rem    */
/* boşluk → ok sıkışmaz, padding-right 2.5rem ile hizalı.   */
/* ── Select ok ikonu — tek yetkili blok ─────────────────────── */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    background-size: 1rem 1rem !important;
    padding-right: 2.5rem !important;
}

select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

html.dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    color-scheme: dark !important;
}

html.dark select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Native date/time inputs — dark mode                      */
html.dark input[type="date"],
html.dark input[type="time"] {
    color-scheme: dark;
    background-color: #1e293b;
    color: #f1f5f9;
    border: 1.5px solid #334155;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
}

html.dark input[type="date"]:focus,
html.dark input[type="time"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ── Layout Tweaks ─────────────────────────────────────── */
/* glass-card ve card-glass tanımları yukarıda (2309 bölümü) — !important override kaldırıldı */

/* ── Theme Compatible Hover ────────────────────────── */
.row-hover {
    transition: background-color 0.2s;
}

.row-hover:hover {
    background-color: var(--nav-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   REVION — Premium Design Upgrade v2
   Landing-v2 ile tutarlı: Plus Jakarta Sans typography, indigo accent,
   her iki tema (light + dark) için kontrast doğrulanmış.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sayfa Reveal Animasyonu ───────────────────────────────── */
/* Light & dark her ikisinde aynı şekilde çalışır (opacity/transform) */
@keyframes revionPageReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dashboard-main-content {
    animation: revionPageReveal 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Nav Active Indicator (her iki tema) ───────────────────── */
/*
 * Light mode:  #4f46e5 (indigo-600) üzerinde #eef2ff (indigo-50) bg
 *              Kontrast: ~6.5:1 — WCAG AA ✓
 * Dark mode:   #818cf8 (indigo-400) üzerinde rgba(99,102,241,0.12) bg
 *              Kontrast: ~7.2:1 — WCAG AA ✓
 *
 * inset box-shadow kullanıyoruz — nav-item'ların overflow:hidden'ından
 * etkilenmez, ::before pseudo-element gerektirmez.
 */
.nav-item.bg-blue-50 {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent, #4f46e5) 10%, transparent) 0%,
        color-mix(in srgb, var(--accent, #4f46e5) 5%, transparent) 100%) !important;
    color: var(--accent, #4f46e5) !important;
    box-shadow: inset 3px 0 0 var(--accent, #4f46e5) !important;
}

/* Dark mode override */
html.dark .nav-item.bg-blue-50 {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent, #818cf8) 16%, transparent) 0%,
        color-mix(in srgb, var(--accent, #818cf8) 8%, transparent) 100%) !important;
    color: var(--accent, #818cf8) !important;
    box-shadow: inset 3px 0 0 var(--accent, #818cf8) !important;
}

/* Nav active icon rengi */
.nav-item.bg-blue-50 i,
.nav-item.bg-blue-50 svg {
    color: var(--accent, #4f46e5);
}

html.dark .nav-item.bg-blue-50 i,
html.dark .nav-item.bg-blue-50 svg {
    color: var(--accent, #818cf8);
}

/* ── Logo Metni Sıkılaştırma ───────────────────────────────── */
/* Plus Jakarta Sans için tight tracking */
.logo-text {
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
}

/* ── Başlık Refinement ─────────────────────────────────────── */
/* h1-h6 için ekstra sıkılaştırma — genel kural olduğundan
   spesifik overridelar (varsa) hâlâ önceliklidir */
.page-title,
[class*="text-2xl"].font-bold,
[class*="text-3xl"].font-bold,
[class*="text-xl"].font-semibold {
    letter-spacing: -0.025em;
}


/* ── Plan Badge Premium ────────────────────────────────────── */
/* PRO badge'ini landing accent'iyle uyumlu yap */
.plan-badge {
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
}

/* ── Sidebar Footer Kullanıcı Kartı ───────────────────────── */
/* Subtitle text sıkılaştırma */
.user-profile-card p {
    letter-spacing: -0.008em;
}

/* ── Form Label Refinement ─────────────────────────────────── */
/* Modal ve form label'larında slight tracking düzeltmesi */
label {
    letter-spacing: -0.005em;
}

/* ── Table Header Refinement ───────────────────────────────── */
/* thead th — landing'in "label-small" ruhuna uygun */
thead th {
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* ── FullCalendar: Eski override'lar kaldırıldı ─────────────── */
/* Tüm takvim stilleri artık DashboardAppointments/Index.cshtml  */
/* içindeki <style> bloğunda yönetilir (.rv-cal-fc scope'lu)    */

/* ── Bekleyen Randevu Talepleri: Kart Arkaplan Stilleri ──────── */
/* CSS sınıfları → dark mod tepkisi her zaman doğru             */

.pcard {
    padding: 14px 16px;
    border-radius: 1rem;
    margin-bottom: 0;
}

.pcard-ayla {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}
html.dark .pcard-ayla {
    background: rgba(76, 29, 149, 0.18);
    border-color: rgba(109, 40, 217, 0.3);
}

.pcard-online {
    background: rgba(255, 251, 235, 0.85);
    border: 1px solid #fde68a;
}
html.dark .pcard-online {
    background: rgba(92, 54, 0, 0.2);
    border-color: rgba(161, 80, 0, 0.3);
}

/* Kart içi metin elemanları */
.pcard-name {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}
html.dark .pcard-name {
    color: #f1f5f9;
}

.pcard-meta {
    font-size: 11px;
    color: #9ca3af;
}
html.dark .pcard-meta {
    color: #94a3b8;
}

.pcard-notes {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .pcard-notes {
    color: #64748b;
}

.pcard-metarow {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    margin-top: 4px;
}
html.dark .pcard-metarow {
    color: #94a3b8;
}

.pcard-badge-online {
    display: inline-flex;
    padding: 2px 7px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
    border-radius: 0.375rem;
}
html.dark .pcard-badge-online {
    background: rgba(37, 99, 235, 0.22);
    color: #93c5fd;
}

/* ── Bildirim Dropdown: Okunmuş / Okunmamış Ayrımı ────────────── */

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 0.75rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.notif-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
html.dark .notif-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Okunmamış — sol mavi çizgi + açık mavi zemin */
.notif-item.notif-unread {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.07);
}
html.dark .notif-item.notif-unread {
    border-left-color: #60a5fa;
    background: rgba(96, 165, 250, 0.09);
}

.notif-item.notif-unread:hover {
    background: rgba(59, 130, 246, 0.12);
}
html.dark .notif-item.notif-unread:hover {
    background: rgba(96, 165, 250, 0.15);
}

/* Okunmamış nokta göstergesi */
.notif-unread-dot {
    position: absolute;
    top: 12px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    flex-shrink: 0;
}
html.dark .notif-unread-dot {
    background: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* İkon kabı */
.notif-icon-wrap {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
html.dark .notif-icon-wrap {
    background: #1e293b;
    border-color: #334155;
}

/* Metin grubu */
.notif-body { min-width: 0; flex: 1; padding-right: 14px; }

.notif-title {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .notif-title {
    color: #64748b;
}

/* Okunmamışta başlık daha belirgin */
.notif-unread .notif-title {
    font-weight: 700;
    color: #111827;
}
html.dark .notif-unread .notif-title {
    color: #f1f5f9;
}

.notif-msg {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.dark .notif-msg {
    color: #475569;
}
.notif-unread .notif-msg {
    color: #4b5563;
}
html.dark .notif-unread .notif-msg {
    color: #94a3b8;
}

.notif-time {
    font-size: 10px;
    color: #d1d5db;
    margin-top: 3px;
}
html.dark .notif-time {
    color: #334155;
}
.notif-unread .notif-time {
    color: #9ca3af;
}
html.dark .notif-unread .notif-time {
    color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════
   REVION — Premium Toast System
   Light + Dark tema, stacking, progress bar, Lucide icons.
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────── */
#toastContainer {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    width: 360px;
    max-width: calc(100vw - 2.5rem);
}

/* ── Toast Card ─────────────────────────────────────────────── */
.toast-item {
    pointer-events: all;
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left-width: 3px;          /* accent left border — tip rengi ile override edilir */
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
}

html.dark .toast-item {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left-width: 3px;          /* border shorthand'ı ezmesin */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* ── Animasyonlar ───────────────────────────────────────────── */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(calc(100% + 1.5rem)); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(calc(100% + 1.5rem)); }
}

.toast-item.toast-enter {
    animation: toastSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.toast-item.toast-exit {
    animation: toastSlideOut 0.28s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/* ── Body Layout ────────────────────────────────────────────── */
.toast-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.75rem 0.75rem 1.125rem;
}

/* ── İkon ───────────────────────────────────────────────────── */
.toast-icon-wrap {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon {
    width: 1rem;
    height: 1rem;
}

/* ── İçerik ─────────────────────────────────────────────────── */
.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #0f172a;
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

html.dark .toast-title { color: #f1f5f9; }

.toast-msg {
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.008em;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

html.dark .toast-msg { color: #94a3b8; }

/* ── Kapat Butonu ───────────────────────────────────────────── */
.toast-close-btn {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: #94a3b8;
    transition: background-color 0.15s, color 0.15s;
    margin-top: -0.125rem;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.toast-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
}

html.dark .toast-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.toast-close-btn i,
.toast-close-btn svg {
    width: 0.75rem;
    height: 0.75rem;
    display: block;
}

/* ── Progress Bar ───────────────────────────────────────────── */
.toast-progress-wrap {
    height: 2px;
    background: rgba(0, 0, 0, 0.04);
}

html.dark .toast-progress-wrap {
    background: rgba(255, 255, 255, 0.04);
}

@keyframes toastProgressShrink {
    from { width: 100%; }
    to   { width: 0%; }
}

.toast-progress {
    height: 100%;
    animation: toastProgressShrink linear forwards;
}

/* ── Tip Renkleri (light & dark kontrast doğrulandı) ─────────
   Sol accent: border-left-color ile sağlanır (overflow:hidden dışında kalır,
   border-radius köşelerini doğal olarak yönetir — progress bar ile çakışma yok)
   ──────────────────────────────────────────────────────────── */
/* success: #10b981 */
.toast-success                  { border-left-color: #10b981; }
.toast-success .toast-icon-wrap { background: rgba(16, 185, 129, 0.10); }
.toast-success .toast-icon      { color: #10b981; }
.toast-success .toast-progress  { background: #10b981; }
html.dark .toast-success .toast-icon-wrap { background: rgba(16, 185, 129, 0.15); }

/* error: #f43f5e */
.toast-error                    { border-left-color: #f43f5e; }
.toast-error .toast-icon-wrap   { background: rgba(244, 63, 94, 0.10); }
.toast-error .toast-icon        { color: #f43f5e; }
.toast-error .toast-progress    { background: #f43f5e; }
html.dark .toast-error .toast-icon-wrap { background: rgba(244, 63, 94, 0.15); }

/* warning: ikon için daha koyu ton (amber-600/400) */
.toast-warning                  { border-left-color: #f59e0b; }
.toast-warning .toast-icon-wrap { background: rgba(245, 158, 11, 0.10); }
.toast-warning .toast-icon      { color: #d97706; }
.toast-warning .toast-progress  { background: #f59e0b; }
html.dark .toast-warning .toast-icon-wrap { background: rgba(245, 158, 11, 0.15); }
html.dark .toast-warning .toast-icon      { color: #fbbf24; }

/* info: marka indigo */
.toast-info                     { border-left-color: #6366f1; }
.toast-info .toast-icon-wrap    { background: rgba(99, 102, 241, 0.10); }
.toast-info .toast-icon         { color: #6366f1; }
.toast-info .toast-progress     { background: #6366f1; }
html.dark .toast-info .toast-icon-wrap { background: rgba(99, 102, 241, 0.15); }
html.dark .toast-info .toast-icon      { color: #818cf8; }

/* ── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #toastContainer {
        bottom: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Z-Index Haritası ────────────────────────────────────────
   z-20  : admin header (sticky)
   z-30  : desktop sidebar (flex flow, fixed değil)
   z-40  : mobile sidebar overlay (backdrop)
   z-50  : mobile sidebar
   z-60  : modals / drawers
   z-70  : confirm modal (en üst katman)
   ─────────────────────────────────────────────────────────── */

/* ── Admin Renk Tokens — Warm Dark ──────────────────────────── */
:root {
    --admin-success:  #10b981;
    --admin-warning:  #f59e0b;
    --admin-danger:   #ef4444;
    --admin-info:     #3b82f6;
    --admin-purple:   #8b5cf6;

    /* Temel renkler — hafif sıcak, göze batmayan */
    --admin-bg:             #111009;   /* siyahdan 1 ton sıcağa, fark zor anlaşılır */
    --admin-sidebar:        #19160f;   /* arka plandan net ayrım, ama dramatik değil */
    --admin-sidebar-border: rgba(255, 255, 255, 0.05); /* nötr border, altın değil */
    --admin-card:           rgba(25, 22, 15, 0.97);
    --admin-card-hover:     rgba(30, 26, 18, 0.98);
    --admin-border:         rgba(255, 255, 255, 0.06);
    --admin-border-hover:   rgba(255, 255, 255, 0.10);

    /* Aksan — sadece active item + primary buton */
    --admin-accent:         #c28020;   /* koyu amber, ışıl ışıl değil, mat */
    --admin-accent-light:   #e8a83c;   /* hover için biraz açık */
    --admin-accent-bg:      rgba(194, 128, 32, 0.10);
    --admin-accent-border:  rgba(194, 128, 32, 0.18);

    /* Metin — hafif sıcak beyaz, cold white değil */
    --admin-text:       #ede8de;   /* kırık beyaz, amber-50'den daha nötr */
    --admin-text-muted: #6b6355;   /* inactive nav, label */
    --admin-text-sub:   #9b9080;   /* ikincil metin */
}

/* ── card-admin (canonical admin card) ──────────────────────── */
.card-admin {
    background-color: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.card-admin:hover {
    border-color: var(--admin-border-hover);
}

/* ── card-dark-fix (kullanılan alias — card-admin ile eşdeğer) ── */
.card-dark-fix {
    background-color: var(--admin-card);
    border: 1px solid var(--admin-border);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}

/* ── btn-admin-primary ───────────────────────────────────────── */
.btn-admin-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background-color: var(--admin-accent);
    color: #0d0900;
    border-radius: 1.5rem;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background-color 0.15s ease, transform 0.1s ease;
    cursor: pointer;
    border: none;
}
.btn-admin-primary:hover {
    background-color: var(--admin-accent-light);
}
.btn-admin-primary:active {
    transform: scale(0.97);
}
.btn-admin-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ── badge-revion sistemi ────────────────────────────────────── */
.badge-revion {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;  /* 11px */
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-revion .dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
}
.badge-revion .dot-animate {
    animation: dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
}

.badge-revion-success {
    background-color: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.25);
}
.badge-revion-success .dot { background-color: #34d399; }

.badge-revion-blue {
    background-color: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.25);
}

.badge-revion-purple {
    background-color: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.25);
}

.badge-revion-warning {
    background-color: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.25);
}

.badge-revion-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}

.badge-revion-neutral {
    background-color: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.10);
}

/* ── stat-card-premium ───────────────────────────────────────── */
.stat-card-premium {
    position: relative;
    overflow: hidden;
    background-color: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stat-card-premium:hover {
    border-color: var(--admin-border-hover);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
    background-color: var(--admin-card-hover);
}

.stat-card-bg-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    opacity: 0.06;
    color: #ffffff;
    transition: opacity 0.2s ease;
}
.stat-card-premium.group:hover .stat-card-bg-icon {
    opacity: 0.10;
}

.stat-label-premium {
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6b7280;
}

.stat-value-premium {
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legal Acceptance Modal (LAM)
   Yasal güncelleme onay modalı — sıfırdan tasarlanmış, enterprise seviye
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.lam-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    z-index: 9998;
    animation: lamOverlayIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lamOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lam-overlay-exit {
    animation: lamOverlayOut 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes lamOverlayOut {
    to { opacity: 0; transform: scale(1.02); }
}

/* ── Kart ────────────────────────────────────────────────────────────────── */
.lam-card {
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1.75rem;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 24px 64px -12px rgba(15, 23, 42, 0.28),
        0 8px 24px -4px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    animation: lamCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

html.dark .lam-card {
    background: #0f172a;
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.08),
        0 24px 64px -12px rgba(0, 0, 0, 0.6),
        0 8px 24px -4px rgba(0, 0, 0, 0.3);
}

@keyframes lamCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.lam-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.75rem 1.75rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
    flex-shrink: 0;
}

html.dark .lam-header {
    border-bottom-color: rgba(148, 163, 184, 0.1);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.lam-header-icon {
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.lam-header-icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    stroke-width: 2;
}

.lam-header-text {
    flex: 1;
    min-width: 0;
}

.lam-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0 0 0.2rem;
    line-height: 1.3;
}

html.dark .lam-title {
    color: #f1f5f9;
}

.lam-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

html.dark .lam-subtitle {
    color: #94a3b8;
}

.lam-header-count {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.lam-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

html.dark .lam-count-badge {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
}

/* ── Progress ────────────────────────────────────────────────────────────── */
.lam-progress-track {
    height: 3px;
    background: #f1f5f9;
    flex-shrink: 0;
}

html.dark .lam-progress-track {
    background: rgba(148, 163, 184, 0.1);
}

.lam-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 0 0.25rem 0.25rem 0;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Body / Liste ────────────────────────────────────────────────────────── */
.lam-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.75rem;
}

.lam-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ── Sözleşme kartı ──────────────────────────────────────────────────────── */
.lam-item {
    border-radius: 1rem;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    padding: 1rem 1.125rem 0.875rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

html.dark .lam-item {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(30, 41, 59, 0.5);
}

.lam-item:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

html.dark .lam-item:hover {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.lam-item-checked {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

html.dark .lam-item-checked {
    border-color: rgba(37, 99, 235, 0.5) !important;
    background: rgba(37, 99, 235, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Üst satır: ikon+bilgi ve sağ aksiyonlar */
.lam-item-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
}

.lam-item-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* lam-item-left ve lam-item-right'ı yan yana tut */
.lam-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0;
    align-items: start;
}

.lam-item-confirm-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.125rem;
}

html.dark .lam-item-confirm-row {
    border-top-color: rgba(148, 163, 184, 0.1);
}

/* ── İkon wrap ───────────────────────────────────────────────────────────── */
.lam-item-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lam-item-icon-svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
}

/* İkon renk sınıfları */
.lam-icon-blue    { background: #eff6ff; }
.lam-icon-blue    .lam-item-icon-svg { color: #2563eb; }
.lam-icon-emerald { background: #ecfdf5; }
.lam-icon-emerald .lam-item-icon-svg { color: #059669; }
.lam-icon-violet  { background: #f5f3ff; }
.lam-icon-violet  .lam-item-icon-svg { color: #7c3aed; }
.lam-icon-orange  { background: #fff7ed; }
.lam-icon-orange  .lam-item-icon-svg { color: #ea580c; }
.lam-icon-cyan    { background: #ecfeff; }
.lam-icon-cyan    .lam-item-icon-svg { color: #0891b2; }
.lam-icon-pink    { background: #fdf2f8; }
.lam-icon-pink    .lam-item-icon-svg { color: #db2777; }
.lam-icon-amber   { background: #fffbeb; }
.lam-icon-amber   .lam-item-icon-svg { color: #d97706; }
.lam-icon-rose    { background: #fff1f2; }
.lam-icon-rose    .lam-item-icon-svg { color: #e11d48; }
.lam-icon-teal    { background: #f0fdfa; }
.lam-icon-teal    .lam-item-icon-svg { color: #0d9488; }
.lam-icon-yellow  { background: #fefce8; }
.lam-icon-yellow  .lam-item-icon-svg { color: #ca8a04; }
.lam-icon-slate   { background: #f8fafc; }
.lam-icon-slate   .lam-item-icon-svg { color: #475569; }

html.dark .lam-icon-blue    { background: rgba(37, 99, 235, 0.12); }
html.dark .lam-icon-emerald { background: rgba(5, 150, 105, 0.12); }
html.dark .lam-icon-violet  { background: rgba(124, 58, 237, 0.12); }
html.dark .lam-icon-orange  { background: rgba(234, 88, 12, 0.12); }
html.dark .lam-icon-cyan    { background: rgba(8, 145, 178, 0.12); }
html.dark .lam-icon-pink    { background: rgba(219, 39, 119, 0.12); }
html.dark .lam-icon-amber   { background: rgba(217, 119, 6, 0.12); }
html.dark .lam-icon-rose    { background: rgba(225, 29, 72, 0.12); }
html.dark .lam-icon-teal    { background: rgba(13, 148, 136, 0.12); }
html.dark .lam-icon-yellow  { background: rgba(202, 138, 4, 0.12); }
html.dark .lam-icon-slate   { background: rgba(71, 85, 105, 0.15); }

/* ── Belge bilgisi ───────────────────────────────────────────────────────── */
.lam-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.lam-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

html.dark .lam-item-title {
    color: #e2e8f0;
}

.lam-item-version {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

html.dark .lam-item-version {
    color: #64748b;
}

/* ── İncele butonu ───────────────────────────────────────────────────────── */
.lam-btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.lam-btn-preview:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

html.dark .lam-btn-preview {
    border-color: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

html.dark .lam-btn-preview:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.4);
    color: #93c5fd;
}

.lam-btn-preview-icon {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.lam-toggle-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.lam-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.lam-toggle-track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background: #e2e8f0;
    border-radius: 999px;
    transition: background 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
}

html.dark .lam-toggle-track {
    background: rgba(148, 163, 184, 0.2);
}

.lam-toggle-wrap:hover .lam-toggle-track {
    background: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.lam-toggle-input:checked ~ .lam-toggle-track {
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.lam-toggle-thumb {
    position: absolute;
    left: 3px;
    width: 1.125rem;
    height: 1.125rem;
    background: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lam-toggle-input:checked ~ .lam-toggle-track .lam-toggle-thumb {
    transform: translateX(1.25rem);
}

.lam-toggle-check-icon {
    width: 0.625rem;
    height: 0.625rem;
    color: #2563eb;
    stroke-width: 3;
    opacity: 0;
    transition: opacity 0.15s 0.1s;
}

.lam-toggle-input:checked ~ .lam-toggle-track .lam-toggle-check-icon {
    opacity: 1;
}

/* ── Onay satırı ─────────────────────────────────────────────────────────── */
.lam-check-indicator {
    display: flex;
    align-items: center;
}

.lam-check-pending-icon,
.lam-check-done-icon {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
    transition: opacity 0.2s;
}

.lam-check-pending-icon {
    color: #cbd5e1;
    opacity: 1;
}

.lam-check-done-icon {
    color: #2563eb;
    opacity: 0;
    position: absolute;
}

html.dark .lam-check-pending-icon {
    color: #475569;
}

.lam-check-indicator {
    position: relative;
    width: 0.875rem;
    height: 0.875rem;
}

.lam-item-checked .lam-check-pending-icon { opacity: 0; }
.lam-item-checked .lam-check-done-icon   { opacity: 1; }

.lam-check-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.2s;
}

html.dark .lam-check-label {
    color: #64748b;
}

.lam-item-checked .lam-check-label {
    color: #2563eb;
}

html.dark .lam-item-checked .lam-check-label {
    color: #93c5fd;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lam-footer {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem 1.75rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
}

html.dark .lam-footer {
    border-top-color: rgba(148, 163, 184, 0.1);
    background: rgba(15, 23, 42, 0.6);
}

.lam-btn-select-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    letter-spacing: 0.01em;
}

.lam-btn-select-all:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

html.dark .lam-btn-select-all {
    border-color: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

html.dark .lam-btn-select-all:hover {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

.lam-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.9375rem 1.5rem;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    position: relative;
    overflow: hidden;
}

.lam-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.lam-btn-primary:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

html.dark .lam-btn-primary:disabled {
    background: rgba(148, 163, 184, 0.1);
    color: #475569;
}

.lam-btn-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.lam-btn-primary:not(:disabled):active {
    transform: translateY(0) scale(0.99);
}

.lam-btn-primary-active {
    animation: lamBtnPulse 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lamBtnPulse {
    0%   { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); }
    50%  { box-shadow: 0 6px 24px rgba(37, 99, 235, 0.55); }
    100% { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); }
}

.lam-btn-icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.lam-btn-arrow {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s;
}

.lam-btn-primary:not(:disabled):hover .lam-btn-arrow {
    transform: translateX(3px);
}

.lam-footer-note {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

html.dark .lam-footer-note {
    color: #475569;
}

/* ── Spin animasyonu (loading) ───────────────────────────────────────────── */
.lam-spin {
    animation: lamSpinAnim 0.8s linear infinite;
}

@keyframes lamSpinAnim {
    to { transform: rotate(360deg); }
}

/* ── Mini toast (JS fallback) ────────────────────────────────────────────── */
.lam-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding: 0.75rem 1.25rem;
    border-radius: 0.625rem;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.lam-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lam-toast-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legal Belge Önizleme Paneli (LAM Preview)
   ═══════════════════════════════════════════════════════════════════════════ */

#legalPreviewModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

#legalPreviewModal.lam-preview-open {
    display: flex;
}

.lam-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: lamOverlayIn 0.25s ease both;
}

.lam-preview-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 1.5rem 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lamPanelSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

html.dark .lam-preview-panel {
    background: #0f172a;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
}

@keyframes lamPanelSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.lam-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

html.dark .lam-preview-header {
    border-bottom-color: rgba(148, 163, 184, 0.1);
}

.lam-preview-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lam-preview-icon-wrap {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 0.625rem;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark .lam-preview-icon-wrap {
    background: rgba(37, 99, 235, 0.12);
}

.lam-preview-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #2563eb;
    stroke-width: 2;
}

.lam-preview-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

html.dark .lam-preview-title {
    color: #f1f5f9;
}

.lam-preview-version {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 0.1rem;
}

.lam-preview-close {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: background 0.15s, color 0.15s;
}

.lam-preview-close:hover {
    background: #f1f5f9;
    color: #475569;
}

html.dark .lam-preview-close:hover {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
}

.lam-preview-close svg,
.lam-preview-close i {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
}

.lam-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.lam-preview-html {
    font-size: 0.85rem;
    line-height: 1.75;
    color: #334155;
}

html.dark .lam-preview-html {
    color: #94a3b8;
}

.lam-preview-html h1,
.lam-preview-html h2,
.lam-preview-html h3 {
    font-weight: 700;
    color: #0f172a;
    margin: 1.25em 0 0.5em;
    line-height: 1.3;
}

html.dark .lam-preview-html h1,
html.dark .lam-preview-html h2,
html.dark .lam-preview-html h3 {
    color: #e2e8f0;
}

.lam-preview-html p { margin: 0 0 0.75em; }

.lam-preview-loading,
.lam-preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.lam-preview-error-icon {
    width: 2rem;
    height: 2rem;
    color: #f59e0b;
    stroke-width: 1.5;
}

.lam-preview-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

html.dark .lam-preview-footer {
    border-top-color: rgba(148, 163, 184, 0.1);
}

.lam-preview-btn-external {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.lam-preview-btn-external:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

html.dark .lam-preview-btn-external {
    border-color: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.lam-preview-btn-external svg,
.lam-preview-btn-external i {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
}

.lam-preview-btn-close {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: #0f172a;
    border: none;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.lam-preview-btn-close:hover {
    background: #1e293b;
}

html.dark .lam-preview-btn-close {
    background: #f1f5f9;
    color: #0f172a;
}

html.dark .lam-preview-btn-close:hover {
    background: #e2e8f0;
}

.lam-preview-btn-close svg,
.lam-preview-btn-close i {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAM — Disabled toggle & yeni preview panel stilleri
   ═══════════════════════════════════════════════════════════════════════════ */

/* Disabled toggle: kilitli görünüm */
.lam-toggle-input:disabled ~ .lam-toggle-track {
    background: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.55;
}

html.dark .lam-toggle-input:disabled ~ .lam-toggle-track {
    background: rgba(148, 163, 184, 0.1);
}

.lam-toggle-wrap:has(.lam-toggle-input:disabled) {
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Yeni Preview Panel (lam-prv-*) ─────────────────────────────────────── */

#legalPreviewModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

#legalPreviewModal.lam-prv-open {
    display: flex;
}

.lam-prv-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: lamOverlayIn 0.25s ease both;
}

.lam-prv-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    height: 88vh;
    background: #ffffff;
    border-radius: 1.5rem 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lamPrvSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

html.dark .lam-prv-panel {
    background: #0f172a;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
}

@keyframes lamPrvSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.lam-prv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

html.dark .lam-prv-header {
    border-bottom-color: rgba(148, 163, 184, 0.1);
}

.lam-prv-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lam-prv-icon-wrap {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 0.625rem;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark .lam-prv-icon-wrap {
    background: rgba(37, 99, 235, 0.12);
}

.lam-prv-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #2563eb;
    stroke-width: 2;
}

.lam-prv-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

html.dark .lam-prv-title {
    color: #f1f5f9;
}

.lam-prv-version {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 0.1rem;
}

.lam-prv-close-x {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: background 0.15s, color 0.15s;
}

.lam-prv-close-x:hover {
    background: #f1f5f9;
    color: #475569;
}

html.dark .lam-prv-close-x:hover {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
}

.lam-prv-close-x i,
.lam-prv-close-x svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
}

.lam-prv-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    scroll-behavior: smooth;
}

.lam-prv-html {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #334155;
}

html.dark .lam-prv-html {
    color: #94a3b8;
}

.lam-prv-html h1,
.lam-prv-html h2,
.lam-prv-html h3 {
    font-weight: 700;
    color: #0f172a;
    margin: 1.25em 0 0.5em;
    line-height: 1.3;
}

html.dark .lam-prv-html h1,
html.dark .lam-prv-html h2,
html.dark .lam-prv-html h3 {
    color: #e2e8f0;
}

.lam-prv-html p  { margin: 0 0 0.75em; }
.lam-prv-html ul,
.lam-prv-html ol { padding-left: 1.5rem; margin: 0 0 0.75em; }
.lam-prv-html li { margin-bottom: 0.25em; }

.lam-prv-html h1 { font-size: 1.2rem; }
.lam-prv-html h2 { font-size: 1.05rem; }
.lam-prv-html h3 { font-size: 0.95rem; }
.lam-prv-html h4,
.lam-prv-html h5,
.lam-prv-html h6 { font-size: 0.875rem; }

.lam-prv-html hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1rem 0;
}
html.dark .lam-prv-html hr { border-top-color: rgba(148, 163, 184, 0.15); }

.lam-prv-html code {
    font-family: ui-monospace, monospace;
    font-size: 0.8em;
    background: #f1f5f9;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    color: #0f172a;
}
html.dark .lam-prv-html code {
    background: rgba(148, 163, 184, 0.1);
    color: #e2e8f0;
}

.lam-prv-html a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
}
.lam-prv-html a:hover { text-decoration-color: #2563eb; }
html.dark .lam-prv-html a { color: #93c5fd; }

.lam-prv-loading,
.lam-prv-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.lam-prv-error-icon {
    width: 2rem;
    height: 2rem;
    color: #f59e0b;
    stroke-width: 1.5;
}

/* Scroll hint — başlangıçta gizli, JS ile gösterilir */
.lam-prv-scroll-hint {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    white-space: nowrap;
    z-index: 2;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0.375rem 0.75rem 0.25rem;
    border-radius: 0.5rem;
}

html.dark .lam-prv-scroll-hint {
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.75);
}

.lam-prv-scroll-hint i,
.lam-prv-scroll-hint svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
    animation: lamBounce 1.4s ease infinite;
}

@keyframes lamBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(3px); }
}

/* Footer */
.lam-prv-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

html.dark .lam-prv-footer {
    border-top-color: rgba(148, 163, 184, 0.1);
}

.lam-prv-btn-ext {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.lam-prv-btn-ext:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

html.dark .lam-prv-btn-ext {
    border-color: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.lam-prv-btn-ext i,
.lam-prv-btn-ext svg {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
}

/* "Okudum Anladım, Kapat" — başta disabled */
.lam-prv-btn-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: #e2e8f0;
    border: none;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: not-allowed;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}

html.dark .lam-prv-btn-confirm {
    background: rgba(148, 163, 184, 0.1);
    color: #475569;
}

/* Scroll tamamlanınca aktif */
.lam-prv-btn-confirm-ready,
.lam-prv-btn-confirm:not(:disabled) {
    background: #0f172a;
    color: #ffffff;
    cursor: pointer;
}

.lam-prv-btn-confirm-ready:hover,
.lam-prv-btn-confirm:not(:disabled):hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

html.dark .lam-prv-btn-confirm-ready,
html.dark .lam-prv-btn-confirm:not(:disabled) {
    background: #f1f5f9;
    color: #0f172a;
}

html.dark .lam-prv-btn-confirm-ready:hover,
html.dark .lam-prv-btn-confirm:not(:disabled):hover {
    background: #e2e8f0;
}

.lam-prv-btn-confirm i,
.lam-prv-btn-confirm svg {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2.5;
}

/* ── lam-prv-html içerik sıfırlama ──────────────────────────────────────── */
/* Sayfadan gelen büyük ikonları ve görselleri panele uygun boyuta çek */
.lam-prv-html img,
.lam-prv-html svg:not([class]) {
    max-width: 100%;
    height: auto;
    max-height: 120px;
}

.lam-prv-html * {
    font-family: inherit;
    box-sizing: border-box;
}

/* Tailwind/Bootstrap class'larından gelen büyük boyutları ezip */
.lam-prv-html [class*="text-"] { font-size: inherit; }
.lam-prv-html [class*="font-"] { font-weight: inherit; }

/* Gereksiz padding/margin blokları */
.lam-prv-html > div:first-child { margin-top: 0; }

/* ── Kart okundu badge ──────────────────────────────────────────────────── */
.lam-item-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lam-item-status-badge {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.lam-status-pending,
.lam-status-done {
    position: absolute;
    inset: 0;
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
    transition: opacity 0.2s;
}

.lam-status-pending { color: #cbd5e1; opacity: 1; }
.lam-status-done    { color: #22c55e; opacity: 0; }

html.dark .lam-status-pending { color: #475569; }
html.dark .lam-status-done    { color: #4ade80; }

.lam-item-checked .lam-status-pending { opacity: 0; }
.lam-item-checked .lam-status-done    { opacity: 1; }

/* İncele butonunu okundu sonrası "Okundu" moda al */
.lam-item-checked .lam-btn-preview {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
}

html.dark .lam-item-checked .lam-btn-preview {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

/* ── Footer alt satır (not + çıkış) ────────────────────────────────────── */
.lam-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lam-logout-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.lam-logout-link:hover {
    color: #ef4444;
    background: #fef2f2;
}

html.dark .lam-logout-link {
    color: #64748b;
}

html.dark .lam-logout-link:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.08);
}

.lam-logout-link i,
.lam-logout-link svg {
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 2.5;
}

/* ── Appearance: Font List ──────────────────────────────────────────────── */
.appearance-font-list {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
}
html.dark .appearance-font-list {
    border-color: rgb(51 65 85);
}
.font-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: none;
    border-bottom: 1.5px solid #e5e7eb;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
}
html.dark .font-card {
    background: rgb(15 23 42 / 0.3);
    border-bottom-color: rgb(51 65 85);
}
.font-card:last-child {
    border-bottom: none;
}
.font-card:hover {
    background: #f8fafc;
}
html.dark .font-card:hover {
    background: rgb(30 41 59 / 0.6);
}
.font-card--active {
    background: var(--accent-light, rgba(59,130,246,0.07)) !important;
}
html.dark .font-card--active {
    background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent) !important;
}
.font-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.font-card__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .font-card__name {
    color: #f1f5f9;
}
.font-card__desc {
    font-size: 0.6875rem;
    color: #9ca3af;
    font-weight: 500;
}
.font-card__preview {
    font-size: 1.125rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}
html.dark .font-card__preview {
    color: #cbd5e1;
}
.font-card--active .font-card__preview {
    color: var(--accent, #3b82f6);
}
.font-card__check {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
html.dark .font-card__check {
    border-color: rgb(71 85 105);
}
.font-card__check--active {
    background-color: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
}

/* ── Toggle Switch — after:h-5/w-5 Tailwind JIT'te derlenmiyor; buradan fix ── */
/* Toggle track: .peer sibling olan rounded-full div'in ::after pseudo-elementi */
.peer:is(input[type="checkbox"]) ~ .rounded-full::after {
    width: 1.25rem;
    height: 1.25rem;
}
/* Küçük switch varyantı (w-10 h-5) */
.peer:is(input[type="checkbox"]) ~ .h-5.rounded-full::after {
    width: 1rem;
    height: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY DATA ALERT — Sistem Geneli Pattern
   Formlarda/modallarda veri eksikliği uyarısı için kullanılır
   Varsayılan: warning (amber) — veri eksikliği olumsuz bir durum
   ═══════════════════════════════════════════════════════════════ */
.empty-data-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(217,119,6,0.08), rgba(217,119,6,0.03));
    border: 1px solid rgba(217,119,6,0.3);
    margin-bottom: 0.875rem;
}
html.dark .empty-data-alert {
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(251,191,36,0.04));
    border-color: rgba(251,191,36,0.28);
}
.empty-data-alert__icon {
    width: 28px;
    height: 28px;
    border-radius: 0.75rem;
    background: rgba(217,119,6,0.18);
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html.dark .empty-data-alert__icon {
    background: rgba(251,191,36,0.22);
    color: #fbbf24;
}
.empty-data-alert__body { flex: 1; min-width: 0; }
.empty-data-alert__title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #78350f;
    margin-bottom: 0.3125rem;
    line-height: 1.3;
}
html.dark .empty-data-alert__title { color: #fef3c7; }
.empty-data-alert__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}
.empty-data-alert__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
    padding: 0.125rem 0;
    transition: color 0.12s ease, transform 0.12s ease;
}
html.dark .empty-data-alert__link { color: #fbbf24; }
.empty-data-alert__link:hover {
    color: #92400e;
    transform: translateX(2px);
}
html.dark .empty-data-alert__link:hover { color: #fde68a; }
.empty-data-alert__link i { flex-shrink: 0; opacity: 0.7; }

/* Varyant: info tonu (mavi) — bilgilendirici durumlar için */
.empty-data-alert--info {
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(59,130,246,0.03));
    border-color: rgba(59,130,246,0.2);
}
html.dark .empty-data-alert--info {
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.04));
    border-color: rgba(59,130,246,0.25);
}
.empty-data-alert--info .empty-data-alert__icon {
    background: rgba(59,130,246,0.15);
    color: #2563eb;
}
html.dark .empty-data-alert--info .empty-data-alert__icon {
    background: rgba(59,130,246,0.2);
    color: #60a5fa;
}
.empty-data-alert--info .empty-data-alert__title { color: var(--ct-t1, #0f172a); }
html.dark .empty-data-alert--info .empty-data-alert__title { color: #f1f5f9; }
.empty-data-alert--info .empty-data-alert__link { color: #2563eb; }
html.dark .empty-data-alert--info .empty-data-alert__link { color: #60a5fa; }
.empty-data-alert--info .empty-data-alert__link:hover { color: #1d4ed8; }
html.dark .empty-data-alert--info .empty-data-alert__link:hover { color: #93c5fd; }

/* Varyant: danger tonu (kırmızı) — kritik hatalar için */
.empty-data-alert--danger {
    background: linear-gradient(135deg, rgba(220,38,38,0.07), rgba(220,38,38,0.03));
    border-color: rgba(220,38,38,0.25);
}
html.dark .empty-data-alert--danger {
    background: linear-gradient(135deg, rgba(248,113,113,0.08), rgba(248,113,113,0.03));
    border-color: rgba(248,113,113,0.22);
}
.empty-data-alert--danger .empty-data-alert__icon {
    background: rgba(220,38,38,0.15);
    color: #b91c1c;
}
html.dark .empty-data-alert--danger .empty-data-alert__icon {
    background: rgba(248,113,113,0.2);
    color: #fca5a5;
}
.empty-data-alert--danger .empty-data-alert__title { color: #7f1d1d; }
html.dark .empty-data-alert--danger .empty-data-alert__title { color: #fee2e2; }
.empty-data-alert--danger .empty-data-alert__link { color: #b91c1c; }
html.dark .empty-data-alert--danger .empty-data-alert__link { color: #fca5a5; }

/* ── Empty Select (is-empty) — Sistem Geneli Pattern ── */
/* Boş select disabled olduğunda: görsel olarak "devre dışı" + "uyarı" hissi */
select.is-empty,
select.is-empty:disabled {
    border-color: rgba(217,119,6,0.35) !important;
    background-color: rgba(217,119,6,0.04) !important;
    color: #b45309 !important;
    cursor: not-allowed;
    opacity: 0.85;
}
html.dark select.is-empty,
html.dark select.is-empty:disabled {
    border-color: rgba(251,191,36,0.3) !important;
    background-color: rgba(251,191,36,0.05) !important;
    color: #fbbf24 !important;
}

/* ══════════════════════════════════════════════════════════════
   REVION TAKVİM v4 + MODAL STİLLERİ (.ct-*, .tb__*, .rc-*)
   DashboardAppointments/Index.cshtml inline <style> bloğundan
   taşındı (2026-04-16). Modal class'ları (.ct-modal, .ct-f, .ct-btn,
   .ct-alert, .ct-sum, .ct-sp, .ct-conf, .ct-datetime-group, .ct-fab)
   artık tüm sayfalarda global erişilebilir.
   ══════════════════════════════════════════════════════════════ */

        /* ═══════════════════════════════════════════════════════
           REVION TAKVİM v4 — İyileştirilmiş Kontrast & UX
           ═══════════════════════════════════════════════════════ */
        :root {
            --ct: var(--accent, #3b82f6);
            --ct-h: var(--accent-hover, #2563eb);
            --ct-bg: var(--bg-card, #ffffff);
            --ct-bg2: #f7f8fa;
            --ct-bg3: #eef0f4;
            --ct-brd: #dde1e8;
            --ct-brd2: #c8cdd6;
            --ct-t1: #111827;
            --ct-t2: #374151;
            --ct-t3: #6b7280;
            --ct-grn: #059669;
            --ct-red: #dc2626;
            --ct-amb: #d97706;
            --ct-pur: #7c3aed;
        }
        html.dark {
            --ct-bg: var(--bg-card, #0f172a);
            --ct-bg2: #172033;
            --ct-bg3: #1f2f4a;
            --ct-brd: #2a3c56;
            --ct-brd2: #3d5478;
            --ct-t1: #f1f5f9;
            --ct-t2: #d1d9e6;
            --ct-t3: #9babc4;
            --ct-grn: #34d399;
            --ct-red: #f87171;
            --ct-amb: #fbbf24;
            --ct-pur: #a78bfa;
        }

        /* ═══════════════════════════════════════════════════════
           TOOLBAR — Premium Segmented Design
           ═══════════════════════════════════════════════════════ */
        .tb {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .625rem 0 .875rem;
            flex-wrap: wrap;
        }
        .tb__group {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex-wrap: wrap;
        }

        /* ── Navigasyon segmented ── */
        .tb__nav {
            display: inline-flex;
            align-items: center;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            padding: 2px;
            gap: 1px;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }
        html.dark .tb__nav { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
        .tb__icon-btn {
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 0.375rem;
            background: transparent;
            border: none;
            color: var(--ct-t3);
            cursor: pointer;
            transition: all .12s ease;
        }
        .tb__icon-btn:hover { background: var(--ct-bg3); color: var(--ct-t1); }
        .tb__today {
            height: 28px;
            padding: 0 .75rem;
            border-radius: 0.375rem;
            background: transparent;
            border: none;
            color: var(--ct-t2);
            font-size: .75rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .12s ease;
            letter-spacing: -.01em;
        }
        .tb__today:hover { background: var(--ct-bg3); color: var(--ct-t1); }

        /* ── Tarih başlığı ── */
        .tb__title {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            height: 30px;
            padding: 0 .625rem 0 .75rem;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            color: var(--ct-t1);
            font-size: .8125rem;
            font-weight: 800;
            cursor: pointer;
            transition: all .12s ease;
            letter-spacing: -.015em;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }
        html.dark .tb__title { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
        .tb__title:hover { border-color: var(--ct); color: var(--ct); }
        .tb__title:hover .tb__title-caret { transform: translateY(1px); }
        .tb__title-caret { color: var(--ct-t3); transition: transform .2s ease; }

        /* ── Stats (Bugün / Bekleyen) ── */
        .tb__stats {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
        }
        .tb__stat {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            height: 30px;
            padding: 0 .625rem;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            color: var(--ct-t2);
            cursor: pointer;
            transition: all .15s ease;
            font-size: .75rem;
            font-weight: 600;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }
        html.dark .tb__stat { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
        .tb__stat:hover { border-color: var(--ct-brd2); transform: translateY(-1px); }
        .tb__stat-ico { color: var(--ct-t3); flex-shrink: 0; }
        .tb__stat-val { font-weight: 800; color: var(--ct-t1); font-variant-numeric: tabular-nums; }
        .tb__stat-lbl { color: var(--ct-t3); font-weight: 600; }

        .tb__stat--warn { background: linear-gradient(135deg, rgba(217,119,6,.08), rgba(217,119,6,.04)); border-color: rgba(217,119,6,.25); }
        .tb__stat--warn .tb__stat-ico { color: var(--ct-amb); }
        .tb__stat--warn .tb__stat-val { color: var(--ct-amb); }
        .tb__stat--warn:hover { border-color: var(--ct-amb); background: linear-gradient(135deg, rgba(217,119,6,.12), rgba(217,119,6,.06)); }
        html.dark .tb__stat--warn { background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(251,191,36,.04)); border-color: rgba(251,191,36,.2); }

        /* ── Görünüm sekmeleri ── */
        .tb__views {
            display: inline-flex;
            align-items: center;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            padding: 2px;
            gap: 1px;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }
        html.dark .tb__views { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
        .tb__view {
            padding: .3125rem .75rem;
            border-radius: 0.375rem;
            border: none;
            background: transparent;
            color: var(--ct-t3);
            font-size: .75rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .12s ease;
            white-space: nowrap;
            letter-spacing: -.005em;
        }
        .tb__view:hover { color: var(--ct-t1); background: var(--ct-bg3); }
        .tb__view--on {
            background: var(--ct);
            color: #fff;
            box-shadow: 0 1px 3px rgba(59,130,246,.3);
        }
        .tb__view--on:hover { background: var(--ct-h); color: #fff; }

        /* Müsaitlik yönetim butonu — görünüm sekmelerinden konseptçe ayrı, premium ghost outline */
        .tb__avail {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            padding: .3125rem .625rem .3125rem .5rem;
            font-size: .6875rem;
            font-weight: 700;
            letter-spacing: .01em;
            color: var(--ct-t2);
            background: transparent;
            border: 1px solid var(--ct-brd2);
            border-radius: 0.75rem;
            text-decoration: none;
            cursor: pointer;
            position: relative;
            transition: all .15s cubic-bezier(.4,0,.2,1);
            white-space: nowrap;
        }
        .tb__avail::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 16px;
            background: var(--ct-brd);
        }
        .tb__avail-ico { color: var(--ct-t3); transition: color .15s; }
        .tb__avail:hover {
            color: var(--ct);
            border-color: var(--ct);
            background: rgba(59,130,246,.06);
            transform: translateY(-1px);
            box-shadow: 0 2px 6px -2px rgba(59,130,246,.25);
            text-decoration: none;
        }
        .tb__avail:hover .tb__avail-ico { color: var(--ct); }
        .tb__avail:active { transform: translateY(0); box-shadow: none; }
        .tb__avail:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 3px rgba(59,130,246,.2);
            border-color: var(--ct);
        }
        @media (max-width: 768px) {
            .tb__avail-txt { display: none; }
            .tb__avail { padding: .3125rem; width: 28px; justify-content: center; }
            .tb__avail::before { display: none; }
        }

        /* ── Mesai Toggle ── */
        .tb__toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            height: 30px;
            padding: 0 .75rem;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            color: var(--ct-t2);
            font-size: .75rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .15s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
            letter-spacing: -.005em;
        }
        html.dark .tb__toggle { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
        .tb__toggle:hover { border-color: var(--ct-brd2); color: var(--ct-t1); }
        .tb__toggle i { color: var(--ct-t3); transition: color .15s ease; }
        .tb__toggle:hover i { color: var(--ct-t1); }
        /* Aktif (mesai modu açık) */
        .tb__toggle--on {
            background: var(--ct);
            border-color: var(--ct);
            color: #fff;
            box-shadow: 0 1px 3px rgba(59,130,246,.3);
        }
        .tb__toggle--on i,
        .tb__toggle--on:hover i { color: #fff; }
        .tb__toggle--on:hover {
            background: var(--ct-h);
            border-color: var(--ct-h);
            color: #fff;
        }
        /* Disabled (mesai tanımlı değil) */
        .tb__toggle:disabled,
        .tb__toggle[aria-disabled="true"] {
            opacity: .45;
            cursor: not-allowed;
            pointer-events: auto;
            background: var(--ct-bg2);
            border-style: dashed;
            color: var(--ct-t3);
        }
        .tb__toggle:disabled i,
        .tb__toggle[aria-disabled="true"] i { color: var(--ct-t3); }
        .tb__toggle:disabled:hover,
        .tb__toggle[aria-disabled="true"]:hover {
            border-color: var(--ct-brd);
            color: var(--ct-t3);
            transform: none;
        }
        /* Badge — mesai dışı randevu var: amber pulse dot */
        .tb__toggle-badge {
            display: block;
            position: absolute;
            top: -4px;
            right: -4px;
            width: 10px;
            height: 10px;
            border-radius: 9999px;
            background: var(--ct-amb);
            border: 2px solid var(--ct-bg);
            box-sizing: content-box;
            animation: tb-pulse 1.6s cubic-bezier(.4,0,.6,1) infinite;
            pointer-events: none;
            z-index: 1;
        }
        .tb__toggle-badge.hidden { display: none; }
        html.dark .tb__toggle-badge { animation-name: tb-pulse-dark; }
        @keyframes tb-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.7); }
            70%  { box-shadow: 0 0 0 8px rgba(217,119,6,0); }
            100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
        }
        @keyframes tb-pulse-dark {
            0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.65); }
            70%  { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
            100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
        }

        /* ── Personel filtre (select) ── */
        .tb__select-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .tb__select-ico {
            position: absolute;
            left: .5rem;
            pointer-events: none;
            color: var(--ct-t3);
            z-index: 1;
        }
        .tb__select {
            height: 30px;
            padding: 0 1.5rem 0 1.75rem;
            border-radius: 0.75rem;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            font-size: .75rem;
            font-weight: 600;
            color: var(--ct-t2);
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right .5rem center;
            min-width: 130px;
            transition: all .12s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }
        html.dark .tb__select { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
        .tb__select:hover { border-color: var(--ct-brd2); }
        .tb__select:focus { outline: none; border-color: var(--ct); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

        /* ── CTA (Yeni Randevu) ── */
        .tb__cta {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            height: 30px;
            padding: 0 .875rem;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, var(--ct), var(--ct-h));
            border: none;
            color: #fff;
            font-size: .75rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .15s ease;
            letter-spacing: -.005em;
            box-shadow: 0 2px 6px rgba(59,130,246,.25), 0 1px 2px rgba(59,130,246,.1);
        }
        .tb__cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59,130,246,.35), 0 2px 4px rgba(59,130,246,.15);
            filter: brightness(1.05);
        }
        .tb__cta:active { transform: translateY(0); }
        .tb__cta i { flex-shrink: 0; }

        /* ── Mini Takvim Dropdown ── */
        .ct-mc-drop { display:none; position:fixed; z-index:30; background:var(--ct-bg); border:1px solid var(--ct-brd); border-radius: 0.75rem; padding:.625rem; box-shadow:0 8px 24px rgba(0,0,0,.1); width:240px; }
        html.dark .ct-mc-drop { box-shadow:0 8px 24px rgba(0,0,0,.35); }
        .ct-mc-drop.open { display:block; }
        .ct-mc__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; }
        .ct-mc__t { font-size:.75rem; font-weight:800; color:var(--ct-t1); }
        .ct-mc__arr { width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius: 0.375rem; background:transparent; color:var(--ct-t3); border:none; cursor:pointer; }
        .ct-mc__arr:hover { background:var(--ct-bg3); color:var(--ct-t1); }
        .ct-mc__dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }
        .ct-mc__dow span { font-size:.5rem; font-weight:700; color:var(--ct-t3); text-transform:uppercase; padding:.125rem 0; }
        .ct-mc__days { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
        .ct-mc__d { width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.625rem; font-weight:600; color:var(--ct-t2); border-radius: 0.375rem; cursor:pointer; border:none; background:transparent; position:relative; transition:background .08s; }
        .ct-mc__d:hover { background:var(--ct-bg3); }
        .ct-mc__d--today { background:var(--ct); color:#fff; font-weight:800; }
        .ct-mc__d--off { opacity:.25; cursor:default; }
        .ct-mc__d--dot::after { content:''; position:absolute; bottom:1px; width:3px; height:3px; border-radius: 9999px; background:var(--ct); }
        .ct-mc__d--today.ct-mc__d--dot::after { background:rgba(255,255,255,.5); }
        .ct-mc__d--holiday { color:var(--ct-red); font-weight:800; }
        .ct-mc__d--today.ct-mc__d--holiday { color:#fff; }
        /* Seçili gün (mevcut görüntülenen tarih) — çerçeveli, içi boş */
        .ct-mc__d--current {
            color: var(--ct);
            font-weight: 800;
            box-shadow: inset 0 0 0 2px var(--ct);
        }
        .ct-mc__d--current:hover { background: rgba(59,130,246,.08); }

        /* ── Hafta Picker ── */
        .ct-mc__weeks { display:flex; flex-direction:column; gap:2px; }
        .ct-mc__wk {
            display:flex; align-items:center; gap:.5rem;
            padding:.375rem .5rem; border-radius: 0.375rem;
            border:none; background:transparent;
            color:var(--ct-t2); cursor:pointer;
            transition:background .1s ease;
            text-align:left;
        }
        .ct-mc__wk:hover { background:var(--ct-bg3); }
        .ct-mc__wk-num {
            font-size:.5625rem; font-weight:800;
            color:var(--ct-t3);
            min-width:24px;
            letter-spacing:.02em;
        }
        .ct-mc__wk-range { font-size:.6875rem; font-weight:600; }
        .ct-mc__wk--current {
            background:transparent;
            box-shadow:inset 0 0 0 2px var(--ct);
        }
        .ct-mc__wk--current .ct-mc__wk-num,
        .ct-mc__wk--current .ct-mc__wk-range { color:var(--ct); font-weight:800; }
        .ct-mc__wk--today { background:var(--ct); }
        .ct-mc__wk--today .ct-mc__wk-num,
        .ct-mc__wk--today .ct-mc__wk-range { color:#fff; font-weight:800; }
        .ct-mc__wk--today.ct-mc__wk--current { box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }

        /* ── Ay Picker ── */
        .ct-mc__months { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
        .ct-mc__mo {
            padding:.5rem 0; border-radius: 0.375rem;
            border:none; background:var(--ct-bg2);
            color:var(--ct-t2); cursor:pointer;
            font-size:.6875rem; font-weight:700;
            transition:all .1s ease;
        }
        .ct-mc__mo:hover { background:var(--ct-bg3); color:var(--ct-t1); }
        .ct-mc__mo--today { background:var(--ct); color:#fff; font-weight:800; }
        .ct-mc__mo--current { color:var(--ct); font-weight:800; box-shadow:inset 0 0 0 2px var(--ct); background:transparent; }

        /* ── Yıl Picker ── */
        .ct-mc__years { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
        .ct-mc__yr {
            padding:.5rem 0; border-radius: 0.375rem;
            border:none; background:var(--ct-bg2);
            color:var(--ct-t2); cursor:pointer;
            font-size:.6875rem; font-weight:700;
            transition:all .1s ease;
            font-variant-numeric:tabular-nums;
        }
        .ct-mc__yr:hover { background:var(--ct-bg3); color:var(--ct-t1); }
        .ct-mc__yr--today { background:var(--ct); color:#fff; font-weight:800; }
        .ct-mc__yr--current { color:var(--ct); font-weight:800; box-shadow:inset 0 0 0 2px var(--ct); background:transparent; }

        /* Dropdown genişliği — mod bazlı */
        .ct-mc-drop[data-mode="week"] { width:260px; }
        .ct-mc-drop[data-mode="month"],
        .ct-mc-drop[data-mode="year"] { width:220px; }

        /* ── TAKVİM — Sayfa scroll ile, takvim içeriği ne kadarsa o kadar yükseklik ── */
        .ct-cal-wrap { position:relative; }
        .ct-cal { background:var(--ct-bg); border:1px solid var(--ct-brd2); border-radius: 0.75rem; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); }
        html.dark .ct-cal { box-shadow:0 1px 4px rgba(0,0,0,.15); }

        /* Zoom — yatay, sağ alt köşe floating */
        .ct-zoom { position:fixed; bottom:1rem; right:1rem; z-index:30; display:flex; align-items:center; gap:.375rem; padding:.375rem .5rem; background:var(--ct-bg); border:1px solid var(--ct-brd2); border-radius: 0.75rem; box-shadow:0 4px 16px rgba(0,0,0,.12); opacity:.7; transition:opacity .2s; }
        .ct-zoom:hover { opacity:1; }
        html.dark .ct-zoom { box-shadow:0 4px 16px rgba(0,0,0,.45); }
        .ct-zoom__btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius: 0.375rem; background:var(--ct-bg2); border:1px solid var(--ct-brd); color:var(--ct-t2); cursor:pointer; transition:all .1s; }
        .ct-zoom__btn:hover { background:var(--ct-bg3); color:var(--ct); border-color:var(--ct); }
        .ct-zoom__range { width:100px; height:28px; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; margin:0; }
        .ct-zoom__range::-webkit-slider-runnable-track { height:4px; background:var(--ct-brd2); border-radius: 0.25rem; }
        .ct-zoom__range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius: 9999px; background:var(--ct); cursor:pointer; border:2px solid var(--ct-bg); box-shadow:0 1px 4px rgba(0,0,0,.2); margin-top:-6px; }
        .ct-zoom__range::-moz-range-track { height:4px; background:var(--ct-brd2); border-radius: 0.25rem; border:none; }
        .ct-zoom__range::-moz-range-thumb { width:16px; height:16px; border-radius: 9999px; background:var(--ct); cursor:pointer; border:2px solid var(--ct-bg); box-shadow:0 1px 4px rgba(0,0,0,.2); }

        /* Ayırıcı */
        .ct-zoom__sep { width:1px; height:18px; background:var(--ct-brd2); margin:0 .125rem; }

        /* Saat aralığı toggle butonu */
        .ct-zoom__hr-btn { width:auto !important; padding:0 .5rem; gap:.25rem; font-size:.6875rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
        .ct-zoom__hr-btn[aria-expanded="true"] { background:var(--ct); color:#fff; border-color:var(--ct); }
        .ct-zoom__hr-val { letter-spacing:.02em; }

        /* Pulse dot — görünen aralık dışında randevu varsa animasyonlu nokta */
        .ct-zoom__hr-btn { position:relative; }
        .ct-zoom__hr-dot { position:absolute; top:-3px; right:-3px; width:8px; height:8px; background:#f59e0b; border:1.5px solid var(--ct-bg); border-radius: 9999px; box-shadow:0 0 0 0 rgba(245,158,11,.7); opacity:0; pointer-events:none; transition:opacity .2s; }
        .ct-zoom__hr-btn--pulse .ct-zoom__hr-dot { opacity:1; animation:ctHrPulse 1.6s cubic-bezier(.4,0,.2,1) infinite; }
        .ct-zoom__hr-btn[aria-expanded="true"] .ct-zoom__hr-dot { border-color:var(--ct); }
        @keyframes ctHrPulse {
            0% { box-shadow:0 0 0 0 rgba(245,158,11,.55); transform:scale(1); }
            70% { box-shadow:0 0 0 7px rgba(245,158,11,0); transform:scale(1.05); }
            100% { box-shadow:0 0 0 0 rgba(245,158,11,0); transform:scale(1); }
        }

        /* Saat aralığı popover — zoom widget'ın üstünde açılır */
        .ct-zoom__pop { position:absolute; bottom:calc(100% + .5rem); right:0; width:280px; padding:.75rem .875rem; background:var(--ct-bg); border:1px solid var(--ct-brd2); border-radius: 0.75rem; box-shadow:0 10px 32px -8px rgba(15,23,42,.25), 0 4px 12px -2px rgba(15,23,42,.1); animation:ctZoomPopIn .16s cubic-bezier(.4,0,.2,1); transform-origin:bottom right; }
        html.dark .ct-zoom__pop { box-shadow:0 16px 40px -8px rgba(0,0,0,.6); }
        .ct-zoom__pop.hidden { display:none; }
        @keyframes ctZoomPopIn { from { opacity:0; transform:translateY(4px) scale(.98); } to { opacity:1; transform:none; } }
        .ct-zoom__pop-head { margin-bottom:.625rem; padding-bottom:.5rem; border-bottom:1px solid var(--ct-brd); }
        .ct-zoom__pop-title { display:block; font-size:.8125rem; font-weight:700; color:var(--ct-t1); letter-spacing:-.01em; }
        .ct-zoom__pop-sub { display:block; margin-top:.125rem; font-size:.6875rem; color:var(--ct-t3); font-weight:400; }
        .ct-zoom__pop-row { display:grid; grid-template-columns:60px 1fr 50px; align-items:center; gap:.5rem; padding:.3125rem 0; }
        .ct-zoom__pop-lbl { font-size:.6875rem; font-weight:600; color:var(--ct-t2); letter-spacing:.01em; }
        .ct-zoom__pop-val { font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ct); text-align:right; letter-spacing:.01em; }
        .ct-zoom__pop-range { width:100%; height:22px; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; }
        .ct-zoom__pop-range::-webkit-slider-runnable-track { height:4px; background:var(--ct-brd2); border-radius: 0.25rem; }
        .ct-zoom__pop-range::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius: 9999px; background:var(--ct); cursor:grab; border:2px solid var(--ct-bg); box-shadow:0 1px 4px rgba(0,0,0,.2); margin-top:-5px; transition:transform .12s; }
        .ct-zoom__pop-range::-webkit-slider-thumb:hover { transform:scale(1.2); }
        .ct-zoom__pop-range::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.15); }
        .ct-zoom__pop-range::-moz-range-track { height:4px; background:var(--ct-brd2); border-radius: 0.25rem; border:none; }
        .ct-zoom__pop-range::-moz-range-thumb { width:14px; height:14px; border-radius: 9999px; background:var(--ct); cursor:grab; border:2px solid var(--ct-bg); box-shadow:0 1px 4px rgba(0,0,0,.2); }
        .ct-zoom__pop-foot { display:flex; gap:.375rem; padding-top:.5rem; margin-top:.375rem; border-top:1px solid var(--ct-brd); }
        .ct-zoom__pop-btn { flex:1; padding:.3125rem .5rem; font-size:.6875rem; font-weight:600; color:var(--ct-t2); background:var(--ct-bg2); border:1px solid var(--ct-brd); border-radius: 0.375rem; cursor:pointer; transition:all .12s; }
        .ct-zoom__pop-btn:hover { color:var(--ct); border-color:var(--ct); background:var(--ct-bg3); }

        /* Slot aralığı satırı (Aralık) */
        .ct-zoom__pop-slot { display:grid; grid-template-columns:60px 1fr; align-items:center; gap:.5rem; padding:.3125rem 0; margin-top:.25rem; padding-top:.5rem; border-top:1px dashed var(--ct-brd); }
        .ct-zoom__pop-chips { display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; }
        .ct-zoom__pop-chip { padding:.3125rem .25rem; font-size:.65rem; font-weight:700; color:var(--ct-t2); background:var(--ct-bg2); border:1px solid var(--ct-brd); border-radius: 0.375rem; cursor:pointer; transition:all .12s; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
        .ct-zoom__pop-chip:hover { color:var(--ct); border-color:var(--ct); }
        .ct-zoom__pop-chip--on { background:var(--ct); color:#fff; border-color:var(--ct); box-shadow:0 1px 3px rgba(59,130,246,.3); }
        .ct-zoom__pop-chip--on:hover { color:#fff; }

        /* ── TIME GRID (Hafta/Gün) ── Scroll container yok, sayfa scroll'u kullanır */
        .rc-tg { display:block; }
        .rc-tg__header { display:flex; border-bottom:2px solid var(--ct-brd2); position:sticky; top:0; z-index:5; background:var(--ct-bg); }
        .rc-tg__timelabel { width:48px; flex-shrink:0; background:var(--ct-bg2); }
        .rc-tg__hcell { flex:1; text-align:center; padding:.5rem 0 .375rem; background:var(--ct-bg2); border-left:1px solid var(--ct-brd); }
        .rc-tg__hcell:first-of-type { border-left:none; }
        .rc-tg__hcell--today { background:rgba(59,130,246,.06); }
        .rc-tg__hday { display:block; font-size:.5625rem; font-weight:700; color:var(--ct-t3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:1px; }
        .rc-tg__hcell--today .rc-tg__hday { color:var(--ct); }
        .rc-tg__hdate { display:inline-flex; align-items:center; justify-content:center; font-size:.8125rem; font-weight:800; color:var(--ct-t1); line-height:1; font-variant-numeric:tabular-nums; }
        .rc-tg__hcell--today .rc-tg__hdate {
            background:var(--ct); color:#fff;
            width:26px; height:26px; border-radius: 9999px;
            line-height:26px;
            padding:0 0 1px 0;
        }
        /* Tatil başlığı — kırmızı badge */
        .rc-tg__hcell--holiday { background:rgba(220,38,38,.05); }
        html.dark .rc-tg__hcell--holiday { background:rgba(248,113,113,.06); }

        /* Kapalı gün — müsaitlik kuralı */
        .rc-tg__hcell--closed { background:repeating-linear-gradient(-45deg, rgba(239,68,68,.08) 0 8px, rgba(239,68,68,.14) 8px 16px); border-top:2px solid #ef4444; }
        html.dark .rc-tg__hcell--closed { background:repeating-linear-gradient(-45deg, rgba(248,113,113,.10) 0 8px, rgba(248,113,113,.18) 8px 16px); border-top-color:#f87171; }
        .rc-tg__hbadge--closed { display:inline-block; padding:.0625rem .4375rem; font-size:.625rem; font-weight:800; letter-spacing:.04em; color:#fff; background:#ef4444; border-radius:.25rem; margin-top:.125rem; text-transform:uppercase; }

        .rc-tg__cell--closed { background:repeating-linear-gradient(-45deg, rgba(239,68,68,.05) 0 6px, rgba(239,68,68,.09) 6px 12px); }
        html.dark .rc-tg__cell--closed { background:repeating-linear-gradient(-45deg, rgba(248,113,113,.08) 0 6px, rgba(248,113,113,.12) 6px 12px); }

        .rc-tg__ev-col--closed { position:relative; background:repeating-linear-gradient(-45deg, rgba(239,68,68,.04) 0 4px, rgba(239,68,68,.06) 4px 10px); }
        html.dark .rc-tg__ev-col--closed { background:repeating-linear-gradient(-45deg, rgba(248,113,113,.06) 0 4px, rgba(248,113,113,.08) 4px 10px); }
        .rc-tg__closed-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; pointer-events:none; z-index:2; }

        /* Müsaitlik yükleme chip'i — sağ üst köşede subtle */
        .rc-loading-chip {
            position: fixed;
            top: 5.25rem;
            right: 1rem;
            z-index: 25;
            display: inline-flex;
            align-items: center;
            gap: .4375rem;
            padding: .4375rem .75rem;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 999px;
            box-shadow: 0 4px 14px -3px rgba(15,23,42,.12);
            font-size: .6875rem;
            font-weight: 600;
            color: var(--ct-t2);
            letter-spacing: -.005em;
            opacity: 0;
            transform: translateY(-6px);
            pointer-events: none;
            transition: opacity .18s, transform .18s;
        }
        html.dark .rc-loading-chip { box-shadow: 0 4px 14px -3px rgba(0,0,0,.4); }
        .rc-loading-chip.is-visible { opacity: 1; transform: none; }
        .rc-loading-chip__spinner {
            width: 12px; height: 12px;
            border: 2px solid var(--ct-brd2);
            border-top-color: var(--ct);
            border-radius: 9999px;
            animation: rcSpin .7s linear infinite;
        }
        @keyframes rcSpin { to { transform: rotate(360deg); } }
        /* İlk render'da yumuşak fade — sonraki render'larda kapalı, flash önler */
        body.rc-fresh .rc-tg__closed-overlay { animation:rcClosedFirstIn .4s cubic-bezier(.4,0,.2,1) both; }
        body.rc-fresh .rc-tg__hcell--closed,
        body.rc-fresh .rc-tg__cell--closed,
        body.rc-fresh .rc-tg__ev-col--closed,
        body.rc-fresh .rc-mg__cell--closed { animation:rcClosedTintFirst .35s ease-out both; }
        @keyframes rcClosedFirstIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
        @keyframes rcClosedTintFirst { from { opacity:0; } to { opacity:1; } }
        .rc-tg__closed-label { font-size:1.125rem; font-weight:800; letter-spacing:.1em; color:#dc2626; background:rgba(255,255,255,.92); padding:.4375rem .875rem; border-radius:.5rem; border:2px solid #ef4444; box-shadow:0 4px 12px -2px rgba(239,68,68,.25); }
        html.dark .rc-tg__closed-label { color:#fca5a5; background:rgba(15,23,42,.92); border-color:#f87171; }
        .rc-tg__closed-reason { font-size:.75rem; color:#991b1b; background:rgba(255,255,255,.8); padding:.125rem .4375rem; border-radius:.25rem; max-width:160px; text-align:center; }
        html.dark .rc-tg__closed-reason { color:#fecaca; background:rgba(15,23,42,.8); }
        .rc-tg__hholiday {
            position:absolute; top:2px; right:4px;
            font-size:.5rem; font-weight:800;
            color:var(--ct-red);
            line-height:1;
        }
        .rc-tg__hcell { position:relative; }
        .rc-tg__scroll { position:relative; background:var(--ct-bg); }
        .rc-tg__filler { display:none; }
        .rc-tg__body { position:relative; background:var(--ct-bg); contain:layout style; }
        .rc-tg__row { display:flex; }
        /* Border row yerine hücre bazında — mesai dışı hücrelerde tek blok için */
        .rc-tg__row > .rc-tg__cell,
        .rc-tg__row > .rc-tg__time { border-bottom:1px solid var(--ct-brd); }
        .rc-tg__row--hour > .rc-tg__cell,
        .rc-tg__row--hour > .rc-tg__time { border-bottom-color:var(--ct-brd2); }
        /* Saat etiketi — çizginin tam üzerinde (saatin başlangıcı) */
        .rc-tg__time {
            width:48px; flex-shrink:0; position:relative;
            user-select:none; overflow:visible;
        }
        .rc-tg__time-lbl {
            position: absolute;
            top: -.5em;
            right: .5rem;
            font-size: .625rem;
            font-weight: 700;
            color: var(--ct-t3);
            line-height: 1;
            background: var(--ct-bg);
            padding: 0 4px;
            font-variant-numeric: tabular-nums;
            letter-spacing: -.02em;
        }
        /* İlk saat sticky header'la çakışmasın */
        .rc-tg__row:first-child .rc-tg__time-lbl { top: 2px; }
        /* Saat başı olmayan ara etiketler — daha ince + muted */
        .rc-tg__time-lbl--sub { font-size:.5625rem; font-weight:500; color:var(--ct-t4, #94a3b8); opacity:.75; }
        html.dark .rc-tg__time-lbl--sub { color:#64748b; }
        .rc-tg__cell { flex:1; border-left:1px solid var(--ct-brd); cursor:pointer; transition:background .08s; }
        .rc-tg__cell:hover { background:rgba(59,130,246,.05); }
        .rc-tg__cell--today { background:rgba(59,130,246,.04); }
        /* Mesai dışı hücre görünümü — belirgin nötr, tıklanamaz görünüm */
        .rc-tg__cell--off {
            background-color: var(--ct-bg3);
            background-image: repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 5px,
                rgba(100, 116, 139, 0.2) 5px,
                rgba(100, 116, 139, 0.2) 7px
            );
            cursor: default;
            border-bottom-color: transparent;
        }
        html.dark .rc-tg__cell--off {
            background-color: rgba(15, 23, 42, 0.9);
            background-image: repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 5px,
                rgba(148, 163, 184, 0.18) 5px,
                rgba(148, 163, 184, 0.18) 7px
            );
        }
        .rc-tg__cell--off:hover { background-color: var(--ct-bg3); }
        html.dark .rc-tg__cell--off:hover { background-color: rgba(15, 23, 42, 0.9); }
        /* Günler arası dikey ayraç KORUNSUN (border-left cell'de var) — sadece yatay saat ayraçları gizli */
        .rc-tg__cell--drop { background:rgba(59,130,246,.1); }
        .rc-tg__events { display:flex; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; }
        .rc-tg__ev-spacer { width:48px; flex-shrink:0; }
        .rc-tg__ev-col { flex:1; position:relative; }
        .rc-tg__now { position:absolute; left:48px; right:0; height:2px; background:var(--ct-red); z-index:4; pointer-events:none; opacity:.7; }
        .rc-tg__now::before { content:''; position:absolute; left:-1px; top:-4px; width:10px; height:10px; border-radius: 9999px; background:var(--ct-red); box-shadow:0 0 6px rgba(220,38,38,.4); }

        /* ── EVENT KARTI ── */
        .rc-ev { border-radius: 0.375rem; border-left:3px solid var(--ct); padding:3px 5px; cursor:pointer; pointer-events:auto; overflow:hidden; transition:transform .1s ease, box-shadow .1s ease; user-select:none; touch-action:none; backdrop-filter:blur(1px); }
        .rc-ev:hover { transform:translateY(-1px) scale(1.01); box-shadow:0 3px 12px rgba(0,0,0,.12); z-index:5; }
        html.dark .rc-ev:hover { box-shadow:0 3px 12px rgba(0,0,0,.35); }
        .rc-ev--ghost { border-radius: 0.375rem; opacity:.8; box-shadow:0 8px 24px rgba(0,0,0,.2); }
        .rc-ev__top { display:flex; align-items:center; gap:3px; }
        .rc-ev__dot { width:5px; height:5px; border-radius: 9999px; flex-shrink:0; }
        .rc-ev__name { font-size:.6875rem; font-weight:700; color:var(--ct-t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .rc-ev__bot { display:flex; align-items:center; justify-content:space-between; margin-top:1px; }
        .rc-ev__svc { font-size:.5625rem; color:var(--ct-t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; }
        .rc-ev__staff { min-width:22px; height:22px; padding:0 7px; padding-top:1px; box-sizing:border-box; border-radius:999px; font-size:10px; font-weight:800; color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:0.03em; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,0.25); font-variant-numeric:tabular-nums; }

        /* ── GIRIŞ ANIMASYONU — randevular + kapalı gün + tatil hücreleri ── */
        @keyframes rcEvIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
        .rc-ev--enter,
        .rc-tg__closed-overlay,
        .rc-tg__hholiday,
        .rc-tg__hcell--holiday,
        .rc-tg__hcell--closed,
        .rc-tg__cell--closed,
        .rc-tg__ev-col--closed,
        .rc-mg__hday,
        .rc-mg__cell--closed,
        .rc-mg__cell--holiday { animation: rcEvIn .28s cubic-bezier(.22,.61,.36,1) both; }
        .rc-ev--enter { animation-delay: var(--rc-ev-delay, 0ms); }
        @media (prefers-reduced-motion: reduce) {
            .rc-ev--enter, .rc-tg__closed-overlay, .rc-tg__hholiday,
            .rc-tg__hcell--holiday, .rc-tg__hcell--closed,
            .rc-tg__cell--closed, .rc-tg__ev-col--closed,
            .rc-mg__hday, .rc-mg__cell--closed, .rc-mg__cell--holiday { animation:none; }
        }

        /* ── LOADING PROGRESS BAR — üst kenarda indeterminate ── */
        [data-loading="true"] { position:relative; }
        [data-loading="true"]::before {
            content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:50;
            background:linear-gradient(90deg, transparent 0%, var(--ct-blu,#3b82f6) 50%, transparent 100%);
            background-size:40% 100%; background-repeat:no-repeat;
            animation: rcLoadSlide 1.1s ease-in-out infinite;
        }
        @keyframes rcLoadSlide { 0% { background-position:-40% 0; } 100% { background-position:140% 0; } }
        @media (prefers-reduced-motion: reduce) { [data-loading="true"]::before { animation:none; opacity:.5; } }

        /* ── AY GÖRÜNÜMÜ ── */
        .rc-mg { height:100%; display:flex; flex-direction:column; }
        .rc-mg__header { display:flex; border-bottom:1px solid var(--ct-brd); background:var(--ct-bg); }
        .rc-mg__hdow { flex:1; text-align:center; padding:.375rem 0; font-size:.5625rem; font-weight:700; color:var(--ct-t3); text-transform:uppercase; }
        .rc-mg__grid { flex:1; display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; }
        .rc-mg__cell { border-right:1px solid var(--ct-brd); border-bottom:1px solid var(--ct-brd); padding:.25rem; cursor:pointer; overflow:hidden; min-height:60px; transition:background .08s; }
        .rc-mg__cell:hover { background:rgba(59,130,246,.02); }
        .rc-mg__cell--today { background:rgba(59,130,246,.03); }
        .rc-mg__cell--holiday { background:rgba(220,38,38,.05); }
        html.dark .rc-mg__cell--holiday { background:rgba(248,113,113,.06); }

        .rc-mg__cell--closed { background:repeating-linear-gradient(-45deg, rgba(239,68,68,.08) 0 8px, rgba(239,68,68,.14) 8px 16px) !important; }
        html.dark .rc-mg__cell--closed { background:repeating-linear-gradient(-45deg, rgba(248,113,113,.12) 0 8px, rgba(248,113,113,.2) 8px 16px) !important; }
        .rc-mg__closed { display:inline-block; margin-top:.1875rem; padding:.0625rem .375rem; font-size:.625rem; font-weight:800; letter-spacing:.04em; color:#fff; background:#ef4444; border-radius:.25rem; text-transform:uppercase; line-height:1.2; }
        .rc-mg__holiday {
            display:block;
            font-size:.5625rem; font-weight:700;
            color:var(--ct-red);
            padding:1px 4px; margin:2px 0;
            background:rgba(220,38,38,.1); border-radius: 0.25rem;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        }
        html.dark .rc-mg__holiday { background:rgba(248,113,113,.12); }
        .rc-mg__cell--off { opacity:.35; }
        .rc-mg__num { font-size:.6875rem; font-weight:600; color:var(--ct-t2); display:block; margin-bottom:2px; line-height:1; }
        .rc-mg__num--today {
            background:var(--ct); color:#fff; font-weight:800;
            width:24px; height:24px; border-radius: 9999px;
            display:inline-flex; align-items:center; justify-content:center;
            font-size:.75rem;
            line-height:24px;
            padding:0 0 1px 0;
            margin-bottom:2px;
            text-align:center;
            font-variant-numeric:tabular-nums;
            box-sizing:content-box;
        }
        .rc-mg__pills { display:flex; flex-direction:column; gap:1px; }
        .rc-mg__pill { font-size:.5625rem; font-weight:600; color:var(--ct-t2); padding:1px 3px; border-radius: 0.25rem; background:var(--ct-bg3); border-left:2px solid var(--ct); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
        .rc-mg__pill:hover { background:var(--ct-bg2); }
        .rc-mg__more { font-size:.5625rem; color:var(--ct); font-weight:700; padding:1px 3px; cursor:pointer; }

        /* ── YIL GÖRÜNÜMÜ ── */
        .rc-yr { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; padding:.5rem; height:100%; overflow-y:auto; }
        .rc-yr__month { background:var(--ct-bg); border:1px solid var(--ct-brd); border-radius: 0.375rem; padding:.375rem; }
        .rc-yr__title { font-size:.6875rem; font-weight:800; color:var(--ct-t1); text-align:center; margin-bottom:.25rem; cursor:pointer; padding:.125rem; border-radius: 0.375rem; transition:background .08s; }
        .rc-yr__title:hover { background:var(--ct-bg3); }
        .rc-yr__dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }
        .rc-yr__dow span { font-size:8px; color:var(--ct-t3); font-weight:600; }
        .rc-yr__days { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center; }
        .rc-yr__d { font-size:9px; color:var(--ct-t2); padding:1px; border-radius: 0.25rem; border:none; background:transparent; cursor:pointer; transition:background .1s ease; }
        .rc-yr__d:hover { background:var(--ct-bg3); }
        .rc-yr__d--today { background:var(--ct); color:#fff; font-weight:800; }
        .rc-yr__d--has { font-weight:700; color:var(--ct); }
        .rc-yr__d--holiday { color:var(--ct-red); font-weight:800; position:relative; }
        .rc-yr__d--holiday::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius: 9999px; background:var(--ct-red); }
        .rc-yr__d--today.rc-yr__d--holiday { color:#fff; }
        .rc-yr__d--today.rc-yr__d--holiday::after { background:rgba(255,255,255,.7); }

        .rc-yr__d--closed { background:repeating-linear-gradient(-45deg, rgba(239,68,68,.18) 0 3px, rgba(239,68,68,.28) 3px 6px); color:#991b1b !important; font-weight:700; }
        html.dark .rc-yr__d--closed { color:#fecaca !important; }
        .rc-yr__d--empty { visibility:hidden; }

        /* ── AJANDA GÖRÜNÜMÜ ── */
        .rc-ag { padding:.75rem; overflow-y:auto; height:100%; }
        .rc-ag__dhead { font-size:.75rem; font-weight:800; color:var(--ct-t1); padding:.5rem 0 .25rem; border-bottom:1px solid var(--ct-brd); margin-bottom:.375rem; }
        .rc-ag__dhead--today { color:var(--ct); }
        .rc-ag__row { display:flex; align-items:center; gap:.5rem; padding:.375rem .5rem; border-radius: 0.375rem; border-left:3px solid var(--ct); margin-bottom:.25rem; cursor:pointer; transition:background .08s; background:var(--ct-bg2); }
        .rc-ag__row:hover { background:var(--ct-bg3); }
        .rc-ag__time { font-size:.625rem; font-weight:800; color:var(--ct); min-width:70px; }
        .rc-ag__title { font-size:.75rem; font-weight:600; color:var(--ct-t1); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .rc-ag__svc { font-size:.625rem; color:var(--ct-t3); }
        .rc-ag__staff { width:16px; height:16px; border-radius: 9999px; font-size:7px; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .rc-ag__empty { text-align:center; padding:2rem; color:var(--ct-t3); font-size:.8125rem; }
        /* Ajanda tatil satırı */
        .rc-ag__holiday {
            display:flex; align-items:center; gap:.5rem;
            padding:.5rem .625rem; margin-bottom:.375rem;
            border-radius: 0.375rem; border-left:3px solid var(--ct-red);
            background:rgba(220,38,38,.06);
        }
        html.dark .rc-ag__holiday { background:rgba(248,113,113,.08); }
        .rc-ag__holiday-icon { font-size:.875rem; }
        .rc-ag__holiday-name { flex:1; font-size:.75rem; font-weight:700; color:var(--ct-red); }
        html.dark .rc-ag__holiday-name { color:#fca5a5; }
        .rc-ag__holiday-type {
            font-size:.5625rem; font-weight:700;
            padding:2px 6px; border-radius:999px;
            background:rgba(220,38,38,.15); color:var(--ct-red);
            text-transform:uppercase; letter-spacing:.04em;
        }

        /* ── Drawer ── */
        .ct-dbg { display:none; position:fixed; top:4rem; left:0; right:0; bottom:0; background:rgba(0,0,0,.25); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:48; }
        .ct-dbg.open { display:block; }
        .ct-drawer { position:fixed; top:4rem; right:-320px; bottom:0; width:300px; background:var(--ct-bg); border-left:1px solid var(--ct-brd); z-index:49; transition:right .2s ease; display:flex; flex-direction:column; box-shadow:-4px 0 16px rgba(0,0,0,.06); }
        html.dark .ct-drawer { box-shadow:-4px 0 16px rgba(0,0,0,.25); }
        .ct-drawer.open { right:0; }
        .ct-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:.75rem; border-bottom:1px solid var(--ct-brd); }
        .ct-drawer__ht { display:flex; align-items:center; gap:.25rem; font-size:.75rem; font-weight:700; color:var(--ct-t1); }
        .ct-drawer__x { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius: 0.375rem; background:transparent; color:var(--ct-t3); border:none; cursor:pointer; }
        .ct-drawer__x:hover { background:var(--ct-bg3); }
        .ct-drawer__body { flex:1; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.375rem; }
        .ct-drawer__empty { text-align:center; padding:1.5rem; color:var(--ct-t3); font-size:.75rem; }

        /* Bekleyen Kart */
        .ct-pk { padding:.375rem .5rem; border-radius: 0.375rem; background:var(--ct-bg2); border-left:3px solid var(--ct-amb); }
        .ct-pk--ayla { border-left-color:var(--ct-pur); }
        .ct-pk__top { display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; margin-bottom:.1875rem; }
        .ct-pk__name { font-size:.6875rem; font-weight:700; color:var(--ct-t1); }
        .ct-pk__tag { font-size:.5rem; font-weight:800; padding:0 3px; border-radius: 0.25rem; color:#fff; line-height:1.5; }
        .ct-pk__tag--ayla { background:var(--ct-pur); }
        .ct-pk__tag--online { background:var(--ct-amb); }
        .ct-pk__meta { font-size:.5625rem; color:var(--ct-t3); display:flex; flex-wrap:wrap; gap:0 .375rem; margin-bottom:.25rem; }
        .ct-pk__acts { display:flex; gap:.25rem; }
        .ct-pk__ab { padding:.125rem .375rem; border-radius: 0.375rem; font-size:.5625rem; font-weight:700; border:none; cursor:pointer; color:#fff; transition:filter .08s; }
        .ct-pk__ab:hover { filter:brightness(1.1); }
        .ct-pk__ab--ok { background:var(--ct-grn); }
        .ct-pk__ab--no { background:var(--ct-red); }

        /* ── Modal ── Refined editorial: top stripe + inner highlight + accented title rail
           Flex column: header + footer sabit, body scroll eder → scroll-bar border-radius içinde kalır,
           scroll-corner (sağ alt beyaz nokta) yok olur. */
        .ct-modal {
            background:var(--ct-bg, #ffffff);
            border-radius:1.5rem; /* rounded-3xl — 24px, modal canonical */
            padding:1.5rem 1.625rem 1.25rem;
            width:100%;
            max-width:430px;
            position:relative;
            border:1px solid var(--ct-brd, #e2e8f0);
            max-height:90vh;
            display:flex;
            flex-direction:column;
            overflow:hidden; /* scroll body içinde, scrollbar border-radius içinde kalır */
            box-shadow:0 25px 50px -12px rgba(0,0,0,.25), 0 4px 16px -4px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.6);
        }
        html.dark .ct-modal {
            background:var(--ct-bg, #0f172a);
            border-color:#334155; /* slate-700 */
        }
        .ct-modal > .ct-modal__head,
        .ct-modal > .ct-modal__foot { flex-shrink:0; }
        .ct-modal > .ct-modal__body {
            flex:1 1 auto;
            min-height:0;
            overflow-y:auto;
            overflow-x:hidden;
            /* Negatif margin ile parent padding'den taşırıp sadece body içi scrollbar kalır */
            margin-left:-1.625rem;
            margin-right:-1.625rem;
            padding-left:1.625rem;
            padding-right:1.625rem;
            /* Dark-uyumlu custom scrollbar */
            scrollbar-width:thin;
            scrollbar-color:var(--ct-brd) transparent;
        }
        .ct-modal > .ct-modal__body::-webkit-scrollbar { width:8px; height:8px; }
        .ct-modal > .ct-modal__body::-webkit-scrollbar-track { background:transparent; }
        .ct-modal > .ct-modal__body::-webkit-scrollbar-thumb {
            background:var(--ct-brd);
            border-radius:999px;
            border:2px solid transparent;
            background-clip:padding-box;
        }
        .ct-modal > .ct-modal__body::-webkit-scrollbar-thumb:hover { background:var(--ct-brd2); background-clip:padding-box; }
        .ct-modal > .ct-modal__body::-webkit-scrollbar-corner { background:transparent; }
        /* Modal içindeki textarea'lar resize handle göstermesin (sağ alt beyaz nokta sebebi) */
        .ct-modal textarea { resize:vertical; }
        .ct-modal textarea.ct-f__i--ta { resize:none; }
        /* dark .ct-modal: background+border satır 7030 bloğundaki dark rule'a taşındı; sadece shadow override kalır */
        html.dark .ct-modal { box-shadow:0 25px 50px -12px rgba(0,0,0,.55), 0 4px 16px -4px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04); }
        /* (Top brand stripe kaldırıldı — kullanıcı isteği) */
        /* Premium modal header — gradient divider + title block left accent rail */
        .ct-modal__head { display:flex; align-items:flex-start; gap:.875rem; padding:0 0 1rem; margin-bottom:1.5rem; border-bottom:0; position:relative; }
        .ct-modal__head::after {
            content:'';
            position:absolute;
            bottom:0; left:0; right:0; height:1px;
            background:linear-gradient(90deg, transparent, var(--ct-brd) 18%, var(--ct-brd) 82%, transparent);
        }
        html.dark .ct-modal__head::after { background:linear-gradient(90deg, transparent, var(--ct-brd2) 18%, var(--ct-brd2) 82%, transparent); }
        .ct-modal__head-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
        .ct-modal__title { font-size:1.125rem; font-weight:700; color:var(--ct-t1); letter-spacing:-.022em; line-height:1.15; margin:0; }
        .ct-modal__sub { margin:0; font-size:.75rem; font-weight:400; color:var(--ct-t3); letter-spacing:.005em; line-height:1.4; }
        .ct-modal__x { position:static; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius: 0.75rem; background:transparent; color:var(--ct-t3); border:1px solid var(--ct-brd); cursor:pointer; flex-shrink:0; transition:all .15s cubic-bezier(.4,0,.2,1); }
        .ct-modal__x:hover { color:var(--ct-t1); background:var(--ct-bg3); border-color:var(--ct-brd2); }
        .ct-modal__x:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
        /* Tarih + saat + uyarıları bağlam olarak birleştiren grup — body'nin 1.5rem gap'inden kopuk, tight stack */
        .ct-datetime-group { display:flex; flex-direction:column; gap:.375rem; }
        /* Alert → alan arasına küçük visual connector */
        .ct-datetime-group .ct-alert:not(.hidden) { margin-top:.125rem; }

        /* Compact inline alert: sol accent + küçük ikon + tek satır text (strong + normal) */
        .ct-alert {
            display:flex;
            align-items:center;
            gap:.4375rem;
            padding:.3125rem .5rem .3125rem .625rem;
            border-radius: 0.375rem;
            font-size:.6875rem;
            line-height:1.35;
            border-left:2px solid #94a3b8;
            background:rgba(148,163,184,.06);
            letter-spacing:.005em;
        }
        html.dark .ct-alert { background:rgba(148,163,184,.08); }
        .ct-alert.hidden { display:none; }
        .ct-alert__icon { width:11px; height:11px; flex-shrink:0; color:#64748b; }
        html.dark .ct-alert__icon { color:#94a3b8; }
        .ct-alert__text { display:inline-flex; align-items:center; gap:.4375rem; min-width:0; flex:1; flex-wrap:wrap; color:#64748b; font-weight:400; line-height:1; }
        .ct-alert__text > span { display:inline-flex; align-items:center; height:16px; line-height:1; }
        html.dark .ct-alert__text { color:#94a3b8; }
        /* Strong → mini chip-style label, açıklamadan bariz ayrılır */
        .ct-alert__text strong {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            height:16px;
            padding:0 6px;
            font-size:.625rem;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.045em;
            border-radius: 0.25rem;
            line-height:1;
            background:rgba(100,116,139,.18);
            color:#334155;
            vertical-align:middle;
        }
        html.dark .ct-alert__text strong { background:rgba(148,163,184,.22); color:#e2e8f0; }

        /* Amber — mesai uyarısı */
        .ct-alert--warn { border-left-color:#f59e0b; background:rgba(245,158,11,.07); }
        html.dark .ct-alert--warn { background:rgba(251,191,36,.08); }
        .ct-alert--warn .ct-alert__icon { color:#b45309; }
        html.dark .ct-alert--warn .ct-alert__icon { color:#fbbf24; }
        .ct-alert--warn .ct-alert__text { color:#a16207; }
        html.dark .ct-alert--warn .ct-alert__text { color:#fde68a; opacity:.7; }
        .ct-alert--warn .ct-alert__text strong { background:rgba(245,158,11,.22); color:#7c2d12; }
        html.dark .ct-alert--warn .ct-alert__text strong { background:rgba(251,191,36,.32); color:#fef3c7; }

        /* Danger — kapalı gün vb. */
        .ct-alert--danger { border-left-color:#dc2626; background:rgba(220,38,38,.07); }
        html.dark .ct-alert--danger { background:rgba(248,113,113,.08); }
        .ct-alert--danger .ct-alert__icon { color:#b91c1c; }
        html.dark .ct-alert--danger .ct-alert__icon { color:#fca5a5; }
        .ct-alert--danger .ct-alert__text { color:#991b1b; }
        html.dark .ct-alert--danger .ct-alert__text { color:#fecaca; opacity:.7; }
        .ct-alert--danger .ct-alert__text strong { background:rgba(220,38,38,.22); color:#7f1d1d; }
        html.dark .ct-alert--danger .ct-alert__text strong { background:rgba(248,113,113,.32); color:#fee2e2; }

        /* Kırmızı — kapalı gün */
        .ct-alert--danger { border-left-color:#dc2626; background:rgba(239,68,68,.07); }
        html.dark .ct-alert--danger { background:rgba(248,113,113,.09); }
        .ct-alert--danger .ct-alert__icon { color:#b91c1c; }
        html.dark .ct-alert--danger .ct-alert__icon { color:#fca5a5; }
        .ct-alert--danger .ct-alert__text { color:#b91c1c; }
        html.dark .ct-alert--danger .ct-alert__text { color:#fecaca; opacity:.9; }
        .ct-alert--danger .ct-alert__text strong { color:#7f1d1d; }
        html.dark .ct-alert--danger .ct-alert__text strong { color:#fca5a5; }
        .ct-modal__body { display:flex; flex-direction:column; gap:1.375rem; }
        .ct-modal__pay { border-top:1px solid var(--ct-brd); padding-top:.375rem; margin-top:.375rem; }
        .ct-modal__foot { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding-top:1rem; border-top:0; position:relative; }
        .ct-modal__foot::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--ct-brd) 18%, var(--ct-brd) 82%, transparent); }
        html.dark .ct-modal__foot::before { background:linear-gradient(90deg, transparent, var(--ct-brd2) 18%, var(--ct-brd2) 82%, transparent); }
        .ct-modal__foot-r { display:flex; gap:.5rem; margin-left:auto; }
        .ct-modal__del { display:inline-flex; align-items:center; gap:.25rem; font-size:.6875rem; font-weight:700; color:var(--ct-red); background:transparent; border:none; cursor:pointer; padding:.375rem .5rem; border-radius: 0.375rem; }
        .ct-modal__del.hidden { display:none; }
        .ct-modal__del:hover { background:rgba(220,38,38,.06); }
        .ct-f { display:flex; flex-direction:column; }
        .ct-f__row { display:flex; gap:.375rem; }
        .ct-f--half { flex:1; }
        .ct-f__l { font-size:.5625rem; font-weight:800; color:var(--ct-t3); margin-bottom:.5rem; padding-left:0; text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:.375rem; position:relative; }
        /* Leading accent dot — visible precision marker */
        .ct-f__l::before { content:''; width:5px; height:5px; border-radius: 9999px; background:var(--ct); opacity:.85; flex-shrink:0; box-shadow:0 0 6px color-mix(in srgb, var(--ct) 60%, transparent); }
        /* Required marker — label sonuna asterisk. Algoritma: label-dot dekoratif (mavi),
           asterisk zorunluluk semantiği (kırmızı). İki ayrı visual kanal. */
        .ct-f__l-req {
            margin-left:.25rem;
            color:#ef4444;
            font-weight:700;
            line-height:1;
        }
        html.dark .ct-f__l-req { color:#f87171; }

        /* Input error state — live validation uyarı rengi */
        input.ct-f__i--error,
        input.ct-f__i--error:focus,
        select.ct-f__i--error,
        select.ct-f__i--error:focus,
        textarea.ct-f__i--error,
        textarea.ct-f__i--error:focus {
            border-color:#ef4444;
            box-shadow:inset 2px 0 0 #ef4444, 0 0 0 3px rgba(239,68,68,.12);
        }
        .ct-f__err {
            display:block;
            margin-top:.375rem;
            font-size:.6875rem;
            font-weight:600;
            color:#ef4444;
            line-height:1.4;
        }
        html.dark .ct-f__err { color:#f87171; }
        .ct-f__err.hidden { display:none; }

        /* Checkbox + label: modal formlarda toggle alanı */
        .ct-f__check {
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            font-size:.8125rem;
            color:var(--ct-t2);
            cursor:pointer;
            -webkit-user-select:none;
            user-select:none;
        }
        .ct-f__check input[type="checkbox"] {
            -webkit-appearance:none;
            appearance:none;
            width:16px; height:16px;
            border:1.5px solid var(--ct-brd);
            border-radius: 0.375rem;
            background-color:var(--ct-bg);
            cursor:pointer;
            position:relative;
            transition:background .15s, border-color .15s;
            flex-shrink:0;
            margin:0;
        }
        .ct-f__check input[type="checkbox"]:checked {
            background-color:var(--ct);
            border-color:var(--ct);
        }
        .ct-f__check input[type="checkbox"]:checked::after {
            content:"";
            position:absolute;
            left:4px; top:1px;
            width:5px; height:9px;
            border:solid #fff;
            border-width:0 2px 2px 0;
            transform:rotate(45deg);
        }

        /* Modal header icon slot (ör. destructive confirm modal'ları için) */
        .ct-modal__icon {
            width:36px; height:36px;
            border-radius: 0.75rem;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
            margin-bottom:.5rem;
            background:var(--ct-bg2);
            color:var(--ct-t2);
        }
        .ct-modal__icon--danger {
            background:rgba(239,68,68,.12);
            color:#ef4444;
        }
        html.dark .ct-modal__icon--danger {
            background:rgba(248,113,113,.15);
            color:#f87171;
        }

        /* Legal / informational document inside modal body */
        .legal-doc { display:flex; flex-direction:column; gap:1.125rem; font-size:.8125rem; line-height:1.6; color:var(--ct-t2); max-height:55vh; overflow-y:auto; }
        .legal-doc section { display:flex; flex-direction:column; gap:.375rem; }
        .legal-doc__h {
            font-size:.6875rem;
            font-weight:800;
            color:var(--ct-t1);
            text-transform:uppercase;
            letter-spacing:.08em;
            margin:0;
        }
        .legal-doc p { margin:0; }

        /* OTP-style single input — büyük, tracked, ortalı */
        input.ct-otp-input {
            text-align:center;
            font-size:1.5rem !important;
            font-weight:800;
            letter-spacing:.4em;
            font-variant-numeric:tabular-nums;
        }

        /* Inline link button — metin içi aksiyon (ör. "Tekrar Gönder") */
        .ct-link {
            background:transparent;
            border:0;
            padding:0;
            color:var(--ct);
            font-weight:700;
            cursor:pointer;
            font-size:inherit;
            font-family:inherit;
        }
        .ct-link:hover { text-decoration:underline; }

        /* SMS Preview component (Reviews modal) */
        .sms-preview { display:flex; flex-direction:column; gap:1.25rem; }
        .sms-preview__head { display:flex; align-items:flex-start; gap:.875rem; }
        .sms-preview__icon {
            width:40px; height:40px;
            border-radius: 0.75rem;
            background:rgba(59,130,246,.12);
            color:#3b82f6;
            display:flex; align-items:center; justify-content:center;
            flex-shrink:0;
        }
        html.dark .sms-preview__icon { background:rgba(96,165,250,.16); color:#93c5fd; }
        .sms-preview__meta { display:flex; flex-direction:column; gap:.125rem; min-width:0; }
        .sms-preview__label {
            font-size:.625rem;
            font-weight:700;
            color:var(--ct-t3);
            text-transform:uppercase;
            letter-spacing:.07em;
        }
        .sms-preview__phone { font-size:1rem; font-weight:700; color:var(--ct-t1); }
        .sms-preview__date {
            display:inline-flex; align-items:center; gap:.25rem;
            font-size:.75rem; color:var(--ct-t3);
            margin-top:.125rem;
        }
        .sms-preview__bubble-wrap { display:flex; flex-direction:column; gap:.5rem; }
        .sms-preview__bubble {
            background:var(--ct-bg2);
            border:1px solid var(--ct-brd);
            border-radius: 0.75rem;
            padding:1rem 1.125rem;
            position:relative;
        }
        .sms-preview__bubble p {
            margin:0;
            font-size:.875rem;
            line-height:1.55;
            color:var(--ct-t1);
            word-break:break-word;
        }
        .sms-preview__footer {
            display:flex; align-items:center; justify-content:center; gap:.375rem;
            padding:.625rem 1rem;
            background:var(--ct-bg2);
            border:1px solid var(--ct-brd);
            border-radius: 0.75rem;
            font-size:.6875rem;
            font-weight:700;
            color:var(--ct-t3);
            text-transform:uppercase;
            letter-spacing:.08em;
        }

        .ct-f__hint { font-size:.625rem; font-weight:500; color:var(--ct-t3); text-transform:none; letter-spacing:0; opacity:.75; }
        .ct-f__hint--block { display:block; margin-top:.25rem; font-size:.6875rem; color:var(--ct-t3); opacity:.7; line-height:1.4; }

        /* Randevu modal grup ayırıcı */
        .ct-appt-sep {
            height:1px;
            margin:.25rem 0 .125rem;
            background:linear-gradient(90deg, transparent, var(--ct-brd) 20%, var(--ct-brd) 80%, transparent);
        }
        html.dark .ct-appt-sep { background:linear-gradient(90deg, transparent, rgba(148,163,184,.15) 20%, rgba(148,163,184,.15) 80%, transparent); }

        /* datetime row — label satır hizalama garantisi */
        .ct-f__row--datetime { align-items:flex-start; }
        .ct-f__row--datetime .ct-f { display:flex; flex-direction:column; }
        .ct-f__row--datetime .ct-f__l { min-height:1.25rem; }

        /* Ödeme yöntemi grid */
        .ct-pay-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
        .ct-pay-opt {
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            gap:5px; padding:8px 4px 7px;
            border:1px solid var(--ct-brd);
            border-radius: 0.75rem;
            cursor:pointer;
            font-size:.6875rem; font-weight:600;
            color:var(--ct-t2);
            background:var(--ct-bg2);
            transition:border-color .15s, background .15s, color .15s;
            -webkit-user-select:none;
            user-select:none;
        }
        .ct-pay-opt:hover { border-color:var(--ct-accent, #3b82f6); color:var(--ct-accent, #3b82f6); }
        .ct-pay-opt:has(.ct-pay-opt__radio:checked) {
            border-color:var(--ct-accent, #3b82f6);
            background:rgba(59,130,246,.07);
            color:var(--ct-accent, #3b82f6);
        }
        html.dark .ct-pay-opt { background:rgba(255,255,255,.03); }
        html.dark .ct-pay-opt:has(.ct-pay-opt__radio:checked) { background:rgba(96,165,250,.10); color:#60a5fa; border-color:#60a5fa; }
        .ct-pay-opt__radio { position:absolute; opacity:0; pointer-events:none; }
        .ct-pay-opt__icon { width:15px; height:15px; flex-shrink:0; }

        /* ── Chip-based Service Picker ── */
        /* ═══════════════════════════════════════════════════════
           SERVICE PICKER — FULL REDESIGN (2026-04-15)
           Linear/Attio-inspired clean tag input. Metadata chip'te değil,
           dropdown list'te. Chip sadece isim + X. Nefes alabilen spacing.
           ═══════════════════════════════════════════════════════ */
        .ct-sp {
            display: flex;
            align-items: center;
            gap: .5rem;
            min-height: 44px;
            padding: .3125rem .375rem .3125rem .625rem;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            transition: border-color .15s, box-shadow .15s, background .15s;
            position: relative;
            cursor: text;
        }
        html.dark .ct-sp { background: var(--ct-bg2); }
        .ct-sp:hover { border-color: var(--ct-brd2); }
        .ct-sp:focus-within {
            border-color: var(--ct);
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }

        /* Field: chips + input aynı flex satırında akar */
        .ct-sp__field {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .375rem;
            padding: .1875rem 0;
        }
        .ct-sp__chips { display: contents; }

        /* Chip — pill shape, sadece isim + X. Meta YOK (dropdown'da gösterilir) */
        .ct-sp__chip {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            padding: .25rem .1875rem .25rem .5625rem;
            background: rgba(59,130,246,.1);
            color: #1d4ed8;
            border: 1px solid rgba(59,130,246,.18);
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: -.005em;
            max-width: 100%;
            transition: background .12s, border-color .12s;
            animation: ctChipIn .16s cubic-bezier(.4,0,.2,1);
        }
        @keyframes ctChipIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
        html.dark .ct-sp__chip { background: rgba(96,165,250,.16); color: #dbeafe; border-color: rgba(96,165,250,.28); }
        .ct-sp__chip:hover { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.3); }
        html.dark .ct-sp__chip:hover { background: rgba(96,165,250,.22); }

        .ct-sp__chip--nullprice {
            background: rgba(148,163,184,.12);
            color: #475569;
            border: 1px dashed var(--ct-brd2);
        }
        html.dark .ct-sp__chip--nullprice { background: rgba(148,163,184,.14); color: #cbd5e1; border-color: #475569; }

        .ct-sp__chip-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px;
            padding-right: .125rem;
        }

        .ct-sp__chip-x {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px; height: 18px;
            border-radius: 9999px;
            background: transparent;
            color: inherit;
            border: none;
            cursor: pointer;
            opacity: .55;
            transition: all .12s;
        }
        .ct-sp__chip-x:hover {
            opacity: 1;
            background: rgba(59,130,246,.2);
        }
        html.dark .ct-sp__chip-x:hover { background: rgba(96,165,250,.3); }
        .ct-sp__chip--nullprice .ct-sp__chip-x:hover { background: rgba(148,163,184,.25); }

        /* Search input — inline, esnek, borderless. Tag prefix ile global input[type="text"] kuralını yen. */
        input.ct-sp__search,
        input.ct-sp__search:hover,
        input.ct-sp__search:focus,
        input.ct-sp__search:active {
            flex: 1;
            min-width: 120px;
            width: auto;
            height: auto;
            margin: 0;
            padding: .25rem .125rem;
            border: 0;
            border-radius: 0;
            background-color: transparent;
            background-image: none;
            box-shadow: none;
            outline: none;
            font-size: .875rem;
            font-family: inherit;
            color: var(--ct-t1);
            font-weight: 500;
            letter-spacing: -.005em;
            line-height: 1.4;
            -webkit-appearance: none;
            appearance: none;
        }
        input.ct-sp__search::placeholder {
            color: var(--ct-t3);
            font-weight: 400;
            letter-spacing: 0;
            opacity: 1;
        }

        /* Chevron — compact, rotate on open */
        .ct-sp__toggle {
            width: 30px; height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--ct-t3);
            cursor: pointer;
            border-radius: 0.75rem;
            transition: background .12s, transform .2s cubic-bezier(.4,0,.2,1), color .12s;
            flex-shrink: 0;
            align-self: center;
        }
        .ct-sp__toggle:hover { background: var(--ct-bg3); color: var(--ct); }
        .ct-sp[aria-expanded="true"] .ct-sp__toggle { transform: rotate(180deg); color: var(--ct); }
        .ct-sp__list {
            position: absolute;
            top: calc(100% + 2px);
            left: 0; right: 0;
            max-height: 200px;
            overflow-y: auto;
            background: var(--ct-bg);
            border: 1px solid var(--ct-brd);
            border-radius: 0.75rem;
            box-shadow: 0 4px 16px rgba(0,0,0,.1);
            z-index: 5;
            padding: .25rem;
        }
        html.dark .ct-sp__list { box-shadow: 0 4px 16px rgba(0,0,0,.3); }
        .ct-sp__list.hidden { display: none; }
        .ct-sp__item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .375rem .5rem;
            border-radius: 0.375rem;
            cursor: pointer;
            font-size: .75rem;
            color: var(--ct-t1);
            transition: background .08s;
        }
        .ct-sp__item:hover, .ct-sp__item.is-focused { background: var(--ct-bg3); }
        .ct-sp__item--selected { background: rgba(59,130,246,.08); color: var(--ct); font-weight: 600; }
        .ct-sp__item--selected:hover { background: rgba(59,130,246,.12); }
        .ct-sp__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex:1; }
        .ct-sp__item-meta { display:inline-flex; gap:.375rem; align-items:center; flex-shrink:0; font-size:.625rem; font-weight:600; color:var(--ct-t3); }
        .ct-sp__item-price--nullprice { color: var(--ct-amb); font-style: italic; }
        .ct-sp__empty { padding: .5rem; text-align: center; color: var(--ct-t3); font-size: .6875rem; }
        .ct-sp__check { color: var(--ct); flex-shrink: 0; }

        /* ── Toplam Özet Satırı ── */
        .ct-sum {
            background: linear-gradient(135deg, rgba(59,130,246,.04), rgba(59,130,246,.01));
            border: 1px solid rgba(59,130,246,.2);
            border-radius: 0.75rem;
            padding: .5rem .625rem;
            display: flex;
            flex-direction: column;
            gap: .25rem;
        }
        html.dark .ct-sum { background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(59,130,246,.02)); border-color: rgba(59,130,246,.25); }
        .ct-sum.hidden { display: none; }
        .ct-sum__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
        .ct-sum__lbl {
            font-size: .625rem; font-weight: 700;
            color: var(--ct-t2);
            text-transform: uppercase; letter-spacing: .04em;
        }
        .ct-sum__vals { display: flex; align-items: baseline; gap: .625rem; }
        .ct-sum__price { font-size: .9375rem; font-weight: 800; color: var(--ct-t1); font-variant-numeric: tabular-nums; }
        .ct-sum__dur { font-size: .6875rem; font-weight: 600; color: var(--ct-t3); font-variant-numeric: tabular-nums; }
        .ct-sum__note {
            font-size: .625rem;
            color: var(--ct-amb);
            margin: 0;
            line-height: 1.3;
        }
        .ct-sum__note.hidden { display: none; }

        /* Mobile — chip picker */
        @media (max-width: 479px) {
            .ct-sp__chip-name { max-width: 140px; }
            .ct-sp__search { font-size: .8125rem; /* mobile — prevent iOS zoom */ }
        }
        /* Canonical form field — tag prefix ile global input kuralından (0,0,1,1) yüksek specificity (0,0,1,1 eşit ama sonra gelir → kazanır).
           Tüm input type'ları (text, number, date, tel, email, textarea, select) aynı dark bg kullanır. */
        input.ct-f__i,
        select.ct-f__i,
        textarea.ct-f__i {
            display:block;
            width:100%;
            padding:.5rem .625rem;
            margin:0;
            border-width:1px;
            border-style:solid;
            border-color:var(--ct-brd);
            border-radius: 0.75rem;
            background-color:var(--ct-bg2);
            background-image:none;
            color:var(--ct-t1);
            font-size:.8125rem;
            font-family:inherit;
            line-height:1.3;
            outline:none;
            box-shadow:inset 0 1px 1px rgba(15,23,42,.04);
            transition:border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
            color-scheme:light dark;
        }
        html.dark input.ct-f__i,
        html.dark select.ct-f__i,
        html.dark textarea.ct-f__i { box-shadow:inset 0 1px 1px rgba(0,0,0,.25); }
        input.ct-f__i::placeholder,
        textarea.ct-f__i::placeholder { color:var(--ct-t3); opacity:1; }
        input.ct-f__i:hover:not(:focus):not(:disabled),
        select.ct-f__i:hover:not(:focus):not(:disabled),
        textarea.ct-f__i:hover:not(:focus):not(:disabled) { border-color:var(--ct-brd2); }
        select.ct-f__i {
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat:no-repeat;
            background-position:right .625rem center;
            padding-right:1.875rem;
            cursor:pointer;
        }
        /* Native date/time widget'ların kendi background'unu bastır — Chrome dark-scheme uyumu */
        input.ct-f__i[type="date"]::-webkit-calendar-picker-indicator,
        input.ct-f__i[type="time"]::-webkit-calendar-picker-indicator { opacity:.55; cursor:pointer; }
        html.dark input.ct-f__i[type="date"]::-webkit-calendar-picker-indicator,
        html.dark input.ct-f__i[type="time"]::-webkit-calendar-picker-indicator { filter:invert(.85); }
        /* Number input spin button — görsel temizlik */
        input.ct-f__i[type="number"]::-webkit-inner-spin-button,
        input.ct-f__i[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
        /* Premium focus — sol kenarda 2px accent rule (inset) + soft glow */
        input.ct-f__i:focus,
        select.ct-f__i:focus,
        textarea.ct-f__i:focus {
            outline:none;
            border-color:var(--ct);
            background-color:var(--ct-bg);
            box-shadow:inset 2px 0 0 var(--ct), inset 0 1px 1px rgba(15,23,42,.04), 0 0 0 4px color-mix(in srgb, var(--ct) 12%, transparent);
        }
        html.dark input.ct-f__i:focus,
        html.dark select.ct-f__i:focus,
        html.dark textarea.ct-f__i:focus {
            background-color:var(--ct-bg2);
            box-shadow:inset 2px 0 0 var(--ct), inset 0 1px 1px rgba(0,0,0,.25), 0 0 0 4px color-mix(in srgb, var(--ct) 18%, transparent);
        }
        input.ct-f__i:disabled,
        select.ct-f__i:disabled,
        textarea.ct-f__i:disabled { opacity:.4; cursor:not-allowed; }
        .ct-f__i--ta { resize:none; }
        .ct-conf { display:flex; align-items:center; gap:.25rem; height:28px; padding:0 .375rem; border-radius: 0.375rem; background:var(--ct-bg2); border:1px solid var(--ct-brd); }
        .ct-conf__dot { width:5px; height:5px; border-radius: 9999px; }
        .ct-conf__dot--wait { background:var(--ct-amb); }
        .ct-conf__dot--ok { background:var(--ct-grn); animation:ct-p 2s infinite; }
        .ct-conf__dot--no { background:var(--ct-red); }
        .ct-conf__txt { font-size:.625rem; font-weight:600; color:var(--ct-t3); }
        @keyframes ct-p { 0%,100%{opacity:1} 50%{opacity:.4} }
        .ct-btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; height:34px; padding:0 1rem; border-radius: 0.75rem; font-size:.75rem; font-weight:700; letter-spacing:-.005em; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
        .ct-btn--fill { color:#fff; background:linear-gradient(180deg, var(--ct) 0%, var(--ct-h) 100%); box-shadow:0 4px 12px -2px color-mix(in srgb, var(--ct) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
        .ct-btn--fill:hover { transform:translateY(-1px); box-shadow:0 6px 18px -2px color-mix(in srgb, var(--ct) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.20); }
        .ct-btn--fill:active { transform:translateY(0); }
        .ct-btn--ghost { background:transparent; color:var(--ct-t2); border-color:var(--ct-brd); }
        .ct-btn--ghost:hover { background:var(--ct-bg2); border-color:var(--ct-brd2); color:var(--ct-t1); }
        .ct-fab { display:none; position:fixed; bottom:1rem; right:1rem; width:48px; height:48px; align-items:center; justify-content:center; border-radius: 0.75rem; background:var(--ct); color:#fff; border:none; box-shadow:0 4px 16px rgba(59,130,246,.3); cursor:pointer; z-index:40; }
        .ct-fab:active { transform:scale(.93); }

        /* ── Responsive ── */
        @media (max-width:1023px) {
            .tb__stat-lbl { display:none; }  /* sadece ikon + sayı */
        }
        @media (max-width:767px) {
            .tb { gap:.375rem; padding:.5rem 0 .625rem; }
            .tb__group { justify-content:flex-start; width:100%; }
            .tb__group--actions { justify-content:space-between; }
            .tb__cta-txt { display:none; }
            .tb__cta { padding:0; width:30px; justify-content:center; }
            .tb__toggle-txt { display:none; }
            .tb__toggle { padding:0 .5rem; gap:0; }
            .ct-fab { display:flex; }
            .ct-zoom { bottom:.75rem; left:.75rem; right:auto; }
            .ct-zoom__range { width:60px; }
            .ct-drawer { width:100%; right:-100%; }
            .rc-yr { grid-template-columns:repeat(3,1fr); }
        }
        @media (max-width:479px) {
            .tb__view { padding:.25rem .5rem; font-size:.6875rem; }
            .tb__select-wrap { display:none; }  /* Mobilde personel filtre gizle */
            .tb__title-txt { font-size:.75rem; }
            .rc-yr { grid-template-columns:repeat(2,1fr); }
        }

/* ═══════════════════════════════════════════════════════════════
   USER MODAL — Premium Role Cards + Staff Link + Password Reset
   2026-04-16: rol seçimi dropdown -> radio cards + reset link akışı
   ═══════════════════════════════════════════════════════════════ */

.role-hint { font-size:11.5px; color:rgb(107 114 128); line-height:1.5; margin:4px 0 10px 0; font-weight:400; letter-spacing:.005em; }
html.dark .role-hint { color:rgb(148 163 184); }
.role-hint-inline { font-size:11px; font-weight:400; color:rgb(156 163 175); margin-left:4px; letter-spacing:.02em; }
html.dark .role-hint-inline { color:rgb(100 116 139); }

.role-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }

.role-card {
    position:relative; display:flex; align-items:flex-start; gap:12px;
    padding:14px 34px 14px 14px;
    background:rgb(249 250 251); border:1.5px solid rgb(229 231 235); border-radius: 0.75rem;
    cursor:pointer; transition:all 220ms cubic-bezier(0.4,0,0.2,1); overflow:hidden;
}
.role-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.04));
    opacity:0; transition:opacity 220ms; pointer-events:none;
}
html.dark .role-card { background:rgb(30 41 59 / 0.5); border-color:rgb(51 65 85); }
.role-card:hover { border-color:rgb(147 197 253); transform:translateY(-1px); box-shadow:0 4px 12px -2px rgba(59,130,246,0.12); }
html.dark .role-card:hover { border-color:rgb(59 130 246 / 0.5); box-shadow:0 4px 14px -2px rgba(59,130,246,0.25); }
.role-card--active { border-color:rgb(59 130 246); box-shadow:0 0 0 3px rgba(59,130,246,0.14), 0 4px 14px -2px rgba(59,130,246,0.18); }
.role-card--active::before { opacity:1; }
html.dark .role-card--active { box-shadow:0 0 0 3px rgba(59,130,246,0.3), 0 4px 18px -2px rgba(59,130,246,0.3); }

.role-card__icon {
    position:relative; z-index:1; flex-shrink:0;
    width:34px; height:34px; border-radius: 0.75rem;
    display:flex; align-items:center; justify-content:center;
    background:rgb(243 244 246); color:rgb(107 114 128); transition:all 220ms;
}
html.dark .role-card__icon { background:rgb(51 65 85); color:rgb(148 163 184); }
.role-card--active .role-card__icon {
    background:linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241));
    color:white; box-shadow:0 4px 10px -2px rgba(59,130,246,0.45);
}

.role-card__body { position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.role-card__title { font-size:13.5px; font-weight:700; color:rgb(17 24 39); line-height:1.2; letter-spacing:-.01em; }
html.dark .role-card__title { color:rgb(241 245 249); }
.role-card__desc { font-size:11px; color:rgb(107 114 128); line-height:1.4; }
html.dark .role-card__desc { color:rgb(148 163 184); }

.role-card__check {
    position:absolute; top:10px; right:10px;
    width:18px; height:18px; border-radius: 9999px;
    background:linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241));
    color:white; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(0.6); transition:all 220ms cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 2px 6px -1px rgba(59,130,246,0.55); z-index:2;
}
.role-card--active .role-card__check { opacity:1; transform:scale(1); }

/* Staff Link dropdown with icon prefix */
.staff-link-wrap { position:relative; margin-top:6px; }
.staff-link-wrap__ico {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:rgb(107 114 128); pointer-events:none; z-index:1; transition:color 180ms;
}
html.dark .staff-link-wrap__ico { color:rgb(148 163 184); }
.staff-link-wrap:focus-within .staff-link-wrap__ico { color:rgb(59 130 246); }
.staff-link-wrap__select { padding-left:40px !important; }

/* Password Reset Link Flow — Admin endüstri standardı A akışı */
.pw-reset-action {
    display:flex; align-items:flex-start; gap:12px;
    padding:14px; background:rgb(249 250 251);
    border:1.5px solid rgb(229 231 235); border-radius: 0.75rem; margin-top:4px;
}
html.dark .pw-reset-action { background:rgb(30 41 59 / 0.5); border-color:rgb(51 65 85); }

.pw-reset-action__ico {
    flex-shrink:0; width:34px; height:34px; border-radius: 0.75rem;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgb(6 182 212), rgb(99 102 241));
    color:white; box-shadow:0 3px 8px -2px rgba(6,182,212,0.35);
}

.pw-reset-action__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pw-reset-action__title { font-size:13px; font-weight:700; color:rgb(17 24 39); line-height:1.2; }
html.dark .pw-reset-action__title { color:rgb(241 245 249); }
.pw-reset-action__desc { font-size:11.5px; color:rgb(107 114 128); line-height:1.45; }
html.dark .pw-reset-action__desc { color:rgb(148 163 184); }

.pw-reset-link-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 14px; margin-top:4px;
    background:linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241));
    border:0; border-radius: 0.75rem;
    font-size:12px; font-weight:700; color:white; cursor:pointer;
    transition:all 200ms; font-family:inherit; align-self:flex-start;
    box-shadow:0 4px 12px -2px rgba(59,130,246,0.45);
}
.pw-reset-link-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px -2px rgba(59,130,246,0.55); }
.pw-reset-link-btn:disabled { opacity:0.6; cursor:wait; transform:none; }

/* Password input (sadece CREATE mode) — visibility toggle + generator */
.pw-input-wrap { position:relative; }
.pw-input { padding-right:40px !important; font-family:'JetBrains Mono', 'Consolas', monospace !important; letter-spacing:.04em; }

/* Kısa sayısal input modifier'ları — .ct-f__i üzerine width + hizalama ekler.
   Renk/dark-mode .ct-f__i'den geldiği için tutarlı. */
input.ct-f__i.apt-num,
input.ct-f__i.svc-num {
    width: 5.5rem;
    text-align: center;
    font-weight: 700;
    padding-left: .5rem;
    padding-right: .5rem;
}
input.ct-f__i.svc-num { width: 100%; }

/* Çalışma saatleri time input modifier'ı — sabit genişlik + kompakt font */
input.ct-f__i.wh-time {
    width: 6rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .5rem;
    text-align: center;
}

.pw-vis {
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius: 0.75rem;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; color:rgb(107 114 128); cursor:pointer; transition:all 160ms;
}
.pw-vis:hover { background:rgb(243 244 246); color:rgb(59 130 246); }
html.dark .pw-vis { color:rgb(148 163 184); }
html.dark .pw-vis:hover { background:rgb(51 65 85); color:rgb(96 165 250); }

.pw-meter { margin-top:10px; display:none; }
.pw-meter[data-active="true"] { display:block; }
.pw-meter__track { display:flex; gap:4px; height:4px; }
.pw-meter__seg { flex:1; height:100%; background:rgb(229 231 235); border-radius: 0.25rem; transition:background 240ms cubic-bezier(0.4,0,0.2,1); }
html.dark .pw-meter__seg { background:rgb(51 65 85); }
.pw-meter__label { display:block; margin-top:6px; font-size:10.5px; font-weight:600; letter-spacing:.04em; color:rgb(107 114 128); text-transform:uppercase; }
html.dark .pw-meter__label { color:rgb(148 163 184); }

.pw-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.pw-gen-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 12px; background:white;
    border:1px solid rgb(209 213 219); border-radius: 0.75rem;
    font-size:11.5px; font-weight:600; color:rgb(55 65 81);
    cursor:pointer; transition:all 180ms; font-family:inherit;
}
html.dark .pw-gen-btn { background:rgb(30 41 59); border-color:rgb(71 85 105); color:rgb(203 213 225); }
.pw-gen-btn:hover { border-color:rgb(139 92 246); color:rgb(124 58 237); background:rgb(245 243 255); }
html.dark .pw-gen-btn:hover { background:rgba(139,92,246,0.15); border-color:rgb(139 92 246); color:rgb(196 181 253); }

@media (max-width: 480px) { .role-cards { grid-template-columns:1fr; } }

/* ═══ USER MODAL v2 — Spacing, Minimal Reset, Staff Picker, Perm Chips ═══ */

/* Hint text — label ile content arasında nefes alma alanı */
.ct-f > .role-hint { margin:2px 0 8px 0; }

/* Role cards üst-alt spacing (hint'in altında çok ferah durmasın) */
.ct-f > .role-cards { margin-top:0; }

/* PASSWORD RESET — minimal button (card degil) */
.pw-reset-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px;
    background:rgb(239 246 255);
    border:1px solid rgb(191 219 254);
    border-radius: 0.75rem;
    font-size:12.5px; font-weight:600;
    color:rgb(29 78 216);
    cursor:pointer; transition:all 180ms; font-family:inherit;
}
.pw-reset-btn:hover {
    background:rgb(219 234 254);
    border-color:rgb(59 130 246);
    transform:translateY(-1px);
}
.pw-reset-btn:disabled { opacity:.6; cursor:wait; transform:none; }
html.dark .pw-reset-btn {
    background:rgba(59,130,246,.1);
    border-color:rgba(59,130,246,.3);
    color:rgb(147 197 253);
}
html.dark .pw-reset-btn:hover { background:rgba(59,130,246,.2); border-color:rgb(59 130 246); }

.pw-reset-hint {
    display:block;
    font-size:10.5px; line-height:1.5;
    color:rgb(107 114 128);
    margin-top:6px;
    letter-spacing:.01em;
}
html.dark .pw-reset-hint { color:rgb(148 163 184); }

/* STAFF PICKER — custom dropdown with avatars */
.staff-picker { position:relative; }

.sp-trigger {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 12px;
    background:var(--ct-bg2); border:1px solid var(--ct-brd); border-radius: 0.75rem;
    cursor:pointer; transition:border-color 150ms, box-shadow 180ms, background 150ms;
    font-family:inherit; font-size:13px; color:var(--ct-t1);
    box-shadow:inset 0 1px 1px rgba(15,23,42,.04);
    text-align:left;
}
html.dark .sp-trigger { box-shadow:inset 0 1px 1px rgba(0,0,0,.25); }
.sp-trigger:hover { border-color:rgb(147 197 253); }
.sp-trigger[aria-expanded="true"] {
    border-color:rgb(59 130 246);
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

.sp-trigger__current { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.sp-trigger__text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-trigger__chev { flex-shrink:0; color:rgb(148 163 184); transition:transform 200ms; }
.sp-trigger[aria-expanded="true"] .sp-trigger__chev { transform:rotate(180deg); color:rgb(59 130 246); }

.sp-panel {
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
    max-height:280px; overflow-y:auto;
    background:var(--ct-bg1); border:1px solid var(--ct-brd); border-radius: 0.75rem;
    box-shadow:0 12px 30px -8px rgba(0,0,0,.15), 0 4px 12px -2px rgba(0,0,0,.08);
    padding:4px;
    animation:spPanelIn 180ms cubic-bezier(.4,0,.2,1);
}
html.dark .sp-panel {
    background:rgb(30 41 59);
    border-color:rgb(51 65 85);
    box-shadow:0 12px 30px -8px rgba(0,0,0,.6), 0 4px 12px -2px rgba(0,0,0,.4);
}
@keyframes spPanelIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.sp-opt {
    width:100%; display:flex; align-items:center; gap:10px;
    padding:8px 10px;
    background:transparent; border:0; border-radius: 0.75rem;
    cursor:pointer; transition:background 140ms;
    font-family:inherit; font-size:13px; color:var(--ct-t1);
    text-align:left;
}
.sp-opt:hover { background:var(--ct-bg2); }
html.dark .sp-opt:hover { background:rgb(51 65 85 / .5); }
.sp-opt--selected { background:rgba(59,130,246,.08); }
html.dark .sp-opt--selected { background:rgba(59,130,246,.15); }

.sp-opt__text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sp-opt__name { font-weight:600; font-size:13px; line-height:1.2; color:var(--ct-t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-opt__sub { font-size:10.5px; color:rgb(107 114 128); line-height:1.3; }
html.dark .sp-opt__sub { color:rgb(148 163 184); }

/* Avatar — image veya initials */
.sp-avatar {
    flex-shrink:0; width:28px; height:28px; border-radius: 9999px;
    background:linear-gradient(135deg, rgb(99 102 241), rgb(139 92 246));
    color:white;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; letter-spacing:.02em;
    overflow:hidden;
    box-shadow:0 2px 4px -1px rgba(0,0,0,.1);
}
.sp-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.sp-avatar__initials { font-family:inherit; }

.sp-avatar--none {
    background:rgb(243 244 246); color:rgb(107 114 128);
    box-shadow:none;
}
html.dark .sp-avatar--none { background:rgb(51 65 85); color:rgb(148 163 184); }

/* PERMISSION CHIPS — grid with smaller, tidier chips */
.perm-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:6px;
}

.perm-chip {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px;
    background:var(--ct-bg2); border:1px solid var(--ct-brd); border-radius: 0.75rem;
    cursor:pointer; transition:all 160ms;
    font-size:11.5px; font-weight:500; color:rgb(75 85 99);
    position:relative;
}
html.dark .perm-chip { color:rgb(203 213 225); }
.perm-chip:hover { border-color:rgb(147 197 253); }
.perm-chip input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }

.perm-chip__dot {
    flex-shrink:0; width:14px; height:14px; border-radius: 0.375rem;
    border:1.5px solid rgb(209 213 219);
    background:white;
    display:flex; align-items:center; justify-content:center;
    transition:all 180ms;
}
html.dark .perm-chip__dot { border-color:rgb(71 85 105); background:rgb(30 41 59); }

.perm-chip input[type="checkbox"]:checked ~ .perm-chip__dot {
    border-color:rgb(59 130 246);
    background:linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241));
}
.perm-chip input[type="checkbox"]:checked ~ .perm-chip__dot::after {
    content:'';
    width:7px; height:4px;
    border-left:2px solid white; border-bottom:2px solid white;
    transform:rotate(-45deg) translateY(-1px);
}

.perm-chip input[type="checkbox"]:checked ~ .perm-chip__label {
    color:var(--ct-t1); font-weight:600;
}
html.dark .perm-chip input[type="checkbox"]:checked ~ .perm-chip__label { color:rgb(241 245 249); }

/* ACTIVE TOGGLE — premium switch */
.user-active-toggle {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    background:var(--ct-bg2); border:1px solid var(--ct-brd); border-radius: 0.75rem;
    cursor:pointer;
    transition:background 160ms, border-color 160ms;
    margin-top:4px;
}
.user-active-toggle:hover { border-color:rgb(147 197 253); }

.user-active-toggle__sw {
    position:relative; flex-shrink:0;
    width:34px; height:18px; border-radius:9999px;
    background:rgb(209 213 219);
    transition:background 200ms;
}
html.dark .user-active-toggle__sw { background:rgb(71 85 105); }

.user-active-toggle__sw::after {
    content:''; position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius: 9999px;
    background:white;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    transition:left 200ms cubic-bezier(.4,0,.2,1), background 200ms;
}

.user-active-toggle input:checked ~ .user-active-toggle__sw {
    background:linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105));
}

.user-active-toggle input:checked ~ .user-active-toggle__sw::after {
    left:18px;
}

.user-active-toggle__label {
    font-size:12px; font-weight:600; color:var(--ct-t1);
    letter-spacing:.01em;
}

/* Permissions container — Yönetici seçiliyken tamamen gizlenir */
#permissions_container[hidden] { display:none !important; }

/* ═══ USER CARD — Avatar (image fallback) + Staff Link Chip premium ═══ */

/* Avatar: personel resmi varsa image, yoksa initials */
.user-card__avatar {
    position:relative;
    overflow:visible;
}

.user-card__avatar--img {
    background:transparent !important;
    padding:0;
}

.user-card__avatar--img img {
    width:100%; height:100%;
    object-fit:cover;
    border-radius:inherit;
    display:block;
}

.user-card__avatar-initials {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
}

/* Link rozeti — avatar köşesinde küçük bir işaret, personel bağlı olduğunu gösterir */
.user-card__avatar-link {
    position:absolute;
    bottom:-2px; right:-2px;
    width:16px; height:16px;
    border-radius: 9999px;
    background:linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241));
    color:white;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--ct-bg1, #fff);
    box-shadow:0 2px 4px -1px rgba(0,0,0,.15);
    z-index:2;
}

html.dark .user-card__avatar-link {
    border-color:rgb(15 23 42);
}

/* STAFF CHIP — bağlı personeli gösteren premium rozet */
.staff-chip {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px 6px 6px;
    background:linear-gradient(135deg, rgba(59,130,246,0.06), rgba(99,102,241,0.04));
    border:1px solid rgba(59,130,246,0.18);
    border-radius: 0.75rem;
    transition:all 180ms cubic-bezier(.4,0,.2,1);
    max-width:100%;
    position:relative;
    overflow:hidden;
}

html.dark .staff-chip {
    background:linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.06));
    border-color:rgba(59,130,246,0.3);
}

.staff-chip::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 60%);
    opacity:0;
    transition:opacity 200ms;
    pointer-events:none;
}

.staff-chip:hover {
    border-color:rgba(59,130,246,0.4);
    transform:translateY(-1px);
    box-shadow:0 4px 10px -2px rgba(59,130,246,0.18);
}

.staff-chip:hover::before { opacity:1; }

.staff-chip__ico {
    position:absolute;
    top:-3px; right:-3px;
    width:14px; height:14px;
    border-radius: 9999px;
    background:linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241));
    color:white;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 4px -1px rgba(59,130,246,0.4);
    z-index:1;
}

.staff-chip__ico i { width:9px; height:9px; stroke-width:2.5; }

.staff-chip__avatar {
    flex-shrink:0;
    width:28px; height:28px;
    border-radius: 9999px;
    overflow:hidden;
    background:linear-gradient(135deg, rgb(99 102 241), rgb(139 92 246));
    color:white;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px -1px rgba(0,0,0,.15), 0 0 0 2px rgba(59,130,246,0.2);
    position:relative;
    z-index:1;
}

.staff-chip__avatar img {
    width:100%; height:100%;
    object-fit:cover;
}

.staff-chip__avatar-initials {
    font-size:10px; font-weight:700;
    letter-spacing:.02em;
    font-family:inherit;
}

.staff-chip__body {
    display:flex; flex-direction:column;
    min-width:0;
    line-height:1.15;
    position:relative; z-index:1;
}

.staff-chip__label {
    font-size:8.5px; font-weight:700;
    letter-spacing:.12em;
    color:rgb(37 99 235);
    text-transform:uppercase;
    line-height:1;
}

html.dark .staff-chip__label {
    color:rgb(147 197 253);
}

.staff-chip__name {
    font-size:11.5px; font-weight:600;
    color:var(--ct-t1);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:180px;
    margin-top:1px;
}

/* ═══════════════════════════════════════════════════════════════
   Kasa Defteri — ledger-* bileşenleri
   Radius scale: 2xl=16 card, xl=12 input/button/nav, md=6 chip
   ═══════════════════════════════════════════════════════════════ */

/* ── Semantic tokens ───────────────────────────────────────── */
:root {
    --ledger-income: #10b981;
    --ledger-income-bg: rgba(16,185,129,.10);
    --ledger-income-bg-strong: rgba(16,185,129,.14);
    --ledger-income-text: #047857;
    --ledger-expense: #ef4444;
    --ledger-expense-bg: rgba(239,68,68,.10);
    --ledger-expense-bg-strong: rgba(239,68,68,.14);
    --ledger-expense-text: #b91c1c;
    --ledger-balance: #6366f1;
    --ledger-balance-bg: rgba(99,102,241,.10);
}
html.dark {
    --ledger-income: #34d399;
    --ledger-income-bg: rgba(52,211,153,.12);
    --ledger-income-bg-strong: rgba(52,211,153,.18);
    --ledger-income-text: #34d399;
    --ledger-expense: #f87171;
    --ledger-expense-bg: rgba(248,113,113,.12);
    --ledger-expense-bg-strong: rgba(248,113,113,.18);
    --ledger-expense-text: #f87171;
    --ledger-balance: #818cf8;
    --ledger-balance-bg: rgba(129,140,248,.14);
}

/* ── Tarih aralığı (page-toolbar içinde) ─────────────────── */
.ledger-date-range {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 8px;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    height:40px;
}
/* Nested — global input[type="date"] kuralını yen */
.ledger-date-range input.ledger-date-input,
.ledger-date-range input.ledger-date-input:focus {
    display:inline-block;
    width:auto;
    height:30px;
    padding:0 8px;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--ct-t1);
    font-size:13px; font-weight:500;
    font-family:inherit;
    line-height:1.5;
    outline:none;
    box-shadow:none;
    font-variant-numeric:tabular-nums;
    cursor:pointer;
    min-width:0;
    color-scheme:light dark;
    -webkit-appearance:none;
    appearance:none;
}
.ledger-date-input::-webkit-calendar-picker-indicator {
    opacity:.55;
    cursor:pointer;
    transition:opacity .15s;
}
.ledger-date-input::-webkit-calendar-picker-indicator:hover { opacity:1; }
html.dark .ledger-date-input::-webkit-calendar-picker-indicator { filter:invert(.85); }
.ledger-date-sep { color:var(--ct-t3); font-size:12px; -webkit-user-select:none; user-select:none; }

/* ── Özet Kartları ───────────────────────────────────────── */
.ledger-summary-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-bottom:24px;
}
@media (max-width: 900px) {
    .ledger-summary-grid { grid-template-columns:1fr; }
}
.ledger-summary-card {
    position:relative;
    display:flex; align-items:flex-start; gap:14px;
    padding:18px 20px;
    border-radius: 1rem;
    border:1px solid var(--ct-brd, #dde1e8);
    background:var(--ct-bg2);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.ledger-summary-card::before {
    content:"";
    position:absolute; inset:0 auto 0 0;
    width:3px;
    background:var(--_card-accent, var(--ct-brd, #dde1e8));
    border-radius: 1rem 0 0 1rem;
    transition:opacity .2s ease;
}
/* Modal açıkken arkadaki accent şeritler backdrop blur'u delmesin */
/* Modal açıkken soldurma kuralı global olarak modal-overlay tanımının yanına taşındı (custom.css:2421-2437) */
.ledger-summary-card:hover {
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(15,23,42,.05);
}
html.dark .ledger-summary-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.25); }
.ledger-summary-card.ledger-income   { --_card-accent: var(--ledger-income); }
.ledger-summary-card.ledger-expense  { --_card-accent: var(--ledger-expense); }
.ledger-summary-card.ledger-balance  { --_card-accent: var(--ledger-balance); }
.ledger-summary-card.ledger-balance-positive { --_card-accent: var(--ledger-income); }
.ledger-summary-card.ledger-balance-negative { --_card-accent: var(--ledger-expense); }

.ledger-card-icon {
    width:36px; height:36px;
    border-radius: 0.75rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.ledger-card-icon--income   { background:var(--ledger-income-bg);  color:var(--ledger-income); }
.ledger-card-icon--expense  { background:var(--ledger-expense-bg); color:var(--ledger-expense); }
.ledger-card-icon--balance  { background:var(--ledger-balance-bg); color:var(--ledger-balance); }
.ledger-summary-card.ledger-balance-positive .ledger-card-icon--balance { background:var(--ledger-income-bg); color:var(--ledger-income); }
.ledger-summary-card.ledger-balance-negative .ledger-card-icon--balance { background:var(--ledger-expense-bg); color:var(--ledger-expense); }

.ledger-card-body { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.ledger-card-label {
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ct-t3);
}
.ledger-card-amount {
    font-size:24px; font-weight:800; letter-spacing:-.02em;
    color:var(--ct-t1);
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}
.ledger-summary-card.ledger-income .ledger-card-amount   { color:var(--ledger-income-text); }
.ledger-summary-card.ledger-expense .ledger-card-amount  { color:var(--ledger-expense-text); }
.ledger-summary-card.ledger-balance-positive .ledger-card-amount { color:var(--ledger-income-text); }
.ledger-summary-card.ledger-balance-negative .ledger-card-amount { color:var(--ledger-expense-text); }
.ledger-card-sub { font-size:12px; font-weight:500; color:var(--ct-t3); }

/* ── Sekmeler ────────────────────────────────────────────── */
.ledger-tabs {
    display:flex; gap:4px;
    padding:4px;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    margin-bottom:20px;
    width:fit-content;
    max-width:100%;
    overflow-x:auto;
}
.ledger-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px;
    font-size:13px; font-weight:600;
    color:var(--ct-t3);
    border:none; background:transparent;
    border-radius: 0.75rem;
    cursor:pointer;
    transition:color .15s, background .15s;
    white-space:nowrap;
}
.ledger-tab:hover { color:var(--ct-t1); background:var(--ct-hover); }
.ledger-tab.active {
    color:#fff;
    background:var(--ct, #3b82f6);
    box-shadow:0 1px 2px rgba(59,130,246,.25);
}
.ledger-tab-content { animation:ledgerFade .18s ease; }
@keyframes ledgerFade { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:none; } }

.ledger-subtab-head {
    display:flex; justify-content:flex-end;
    margin-bottom:16px;
}

/* ── Filtre Çubuğu ───────────────────────────────────────── */
.ledger-filter-bar {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap;
    padding:12px 14px;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 1rem;
    margin-bottom:16px;
}
.ledger-filter-group {
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap;
    flex:1 1 auto;
    min-width:0;
}

/* Compact filter select — native <select>, chevron SADECE background-image ile.
   Wrapper ve lucide icon YOK (çift chevron bug'ının kaynağı). */
select.ledger-select-compact {
    display:inline-block;
    width:auto;
    min-width:150px;
    max-width:100%;
    height:36px;
    padding:0 34px 0 12px;
    margin:0;
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    background-color:var(--ct-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    color:var(--ct-t1);
    font-size:13px; font-weight:500;
    font-family:inherit;
    line-height:1.5;
    outline:none;
    box-shadow:none;
    cursor:pointer;
    transition:border-color .15s, background-color .15s, box-shadow .15s;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    color-scheme:light dark;
}
select.ledger-select-compact::-ms-expand { display:none; }
select.ledger-select-compact:hover { border-color:var(--ct-t3); }
select.ledger-select-compact:focus {
    border-color:var(--ct, #3b82f6);
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
    background-color:var(--ct-bg);
}
select.ledger-select-compact option {
    background:var(--ct-bg);
    color:var(--ct-t1);
    padding:6px;
}

.ledger-filter-check {
    display:inline-flex; align-items:center; gap:8px;
    padding:0 10px;
    height:36px;
    font-size:13px; font-weight:500;
    color:var(--ct-t2);
    cursor:pointer;
    user-select:none;
    border-radius: 0.75rem;
    transition:background .15s, color .15s;
}

/* Segmented voided filter (Normal / Hepsi / Sadece İptal) */
.ledger-segment {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    padding: 3px;
    background: var(--ct-bg2, #f1f5f9);
    border: 1px solid var(--ct-brd, #e5e7eb);
    border-radius: 0.75rem;
    gap: 2px;
}
html.dark .ledger-segment {
    background: rgba(0,0,0,.25);
    border-color: rgba(255,255,255,.08);
}
.ledger-segment__btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ct-t2, #475569);
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 12px;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.ledger-segment__btn:hover {
    color: var(--ct-t1, #0f172a);
}
html.dark .ledger-segment__btn:hover { color: #f1f5f9; }
.ledger-segment__btn--active {
    background: var(--ct-bg, #ffffff);
    color: var(--ct-t1, #0f172a);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
html.dark .ledger-segment__btn--active {
    background: #1e293b;
    color: #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ledger-filter-check:hover { background:var(--ct-hover); color:var(--ct-t1); }
.ledger-filter-check input[type="checkbox"] {
    -webkit-appearance:none;
    appearance:none;
    width:16px; height:16px;
    border:1.5px solid var(--ct-brd, #dde1e8);
    border-radius: 0.375rem;
    background:var(--ct-bg);
    cursor:pointer;
    position:relative;
    transition:background .15s, border-color .15s;
    flex-shrink:0;
}
.ledger-filter-check input[type="checkbox"]:checked {
    background:var(--ct, #3b82f6);
    border-color:var(--ct, #3b82f6);
}
.ledger-filter-check input[type="checkbox"]:checked::after {
    content:"";
    position:absolute; left:4px; top:1px;
    width:5px; height:9px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

/* Arama */
.ledger-search-wrap {
    display:flex;
    align-items:center;
    gap:10px;
    height:36px;
    padding:0 12px;
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    background:var(--ct-bg);
    flex:0 1 280px;
    min-width:220px;
    transition:border-color .15s, box-shadow .15s;
}
.ledger-search-wrap:focus-within {
    border-color:var(--ct, #3b82f6);
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.ledger-search-icon {
    width:16px; height:16px;
    color:var(--ct-t3);
    flex-shrink:0;
    pointer-events:none;
}
/* Global input[type="text"] kuralını yenmek için nested selector specificity gerekli */
.ledger-search-wrap input.ledger-search-input,
.ledger-search-wrap input.ledger-search-input:focus {
    flex:1 1 auto;
    min-width:0;
    width:auto;
    height:100%;
    padding:0;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--ct-t1);
    font-size:13px;
    font-family:inherit;
    line-height:1.5;
    outline:none;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
}
.ledger-search-wrap input.ledger-search-input::placeholder { color:var(--ct-t3); }

/* ── Tablo ───────────────────────────────────────────────── */
.ledger-table-wrap {
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 1rem;
    overflow:hidden;
    background:var(--ct-bg);
}
.ledger-table { width:100%; border-collapse:collapse; }
.ledger-table thead { background:var(--ct-bg2); }
.ledger-table th {
    padding:12px 14px;
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ct-t3);
    text-align:left;
    border-bottom:1px solid var(--ct-brd, #dde1e8);
    white-space:nowrap;
}
.ledger-td {
    padding:12px 14px;
    font-size:13px;
    color:var(--ct-t2);
    border-bottom:1px solid var(--ct-brd, #dde1e8);
    vertical-align:middle;
}
.ledger-td-primary {
    color:var(--ct-t1);
    font-weight:600;
    font-size:13.5px;
}
.ledger-td-secondary {
    font-size:11.5px;
    color:var(--ct-t3);
    margin-top:2px;
}
.ledger-td-payment { color:var(--ct-t3); font-size:12.5px; }
.ledger-td-amount {
    text-align:right;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.ledger-td-vat {
    font-size:10.5px;
    font-weight:500;
    color:var(--ct-t3);
    margin-top:2px;
}
.ledger-amount-income  { color:var(--ledger-income-text); }
.ledger-amount-expense { color:var(--ledger-expense-text); }

.ledger-entry-row:last-child .ledger-td { border-bottom:none; }
.ledger-entry-row:hover { background:var(--ct-hover); }
.ledger-entry-row.ledger-voided { opacity:.55; background:var(--ct-bg2); }

.ledger-loading-row td,
.ledger-loading { color:var(--ct-t3); padding:48px 0; text-align:center; font-size:13px; }
.ledger-loading-span2 { grid-column:1 / -1; }

/* Empty state */
.ledger-empty-state {
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:24px 0;
}
.ledger-empty-icon {
    width:48px; height:48px;
    border-radius: 1rem;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    display:flex; align-items:center; justify-content:center;
    color:var(--ct-t3);
}
.ledger-empty-text {
    font-size:13px; color:var(--ct-t3); font-weight:500;
}

/* Tür Badge (tablo) */
.ledger-type-badge {
    display:inline-flex; align-items:center; justify-content:center;
    padding:3px 9px;
    border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:.04em;
}
.ledger-badge-income  { background:var(--ledger-income-bg);  color:var(--ledger-income-text); }
.ledger-badge-expense { background:var(--ledger-expense-bg); color:var(--ledger-expense-text); }

/* Kategori chip */
.ledger-cat-chip {
    display:inline-flex; align-items:center;
    padding:3px 9px 3px 10px;
    border-radius: 0.375rem;
    background:var(--ct-bg2);
    font-size:11.5px;
    font-weight:600;
    color:var(--ct-t2);
    border:1px solid var(--ct-brd, #dde1e8);
    white-space:nowrap;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ── Sayfalama ───────────────────────────────────────────── */
.ledger-pagination { margin-top:16px; }
.ledger-pagination-row {
    display:flex; align-items:center; gap:4px; justify-content:center;
}
.ledger-page-btn {
    min-width:34px; height:34px; padding:0 8px;
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    background:var(--ct-bg2);
    color:var(--ct-t2);
    font-size:12.5px; font-weight:600;
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .12s, color .12s, border-color .12s;
    font-variant-numeric:tabular-nums;
}
.ledger-page-btn:hover:not(:disabled) { background:var(--ct-hover); color:var(--ct-t1); border-color:var(--ct-t3); }
.ledger-page-btn.active {
    background:var(--ct, #3b82f6); color:#fff; border-color:var(--ct, #3b82f6);
    box-shadow:0 1px 2px rgba(59,130,246,.25);
}
.ledger-page-btn:disabled { opacity:.4; cursor:default; }
.ledger-page-ellipsis { padding:0 6px; color:var(--ct-t3); font-weight:600; }

/* ── Form / Modal ────────────────────────────────────────── */
/* ct-modal varyantları: ledger modalları için genişlik override */
.ct-modal.ledger-modal       { max-width:580px; }
.ct-modal.ledger-modal--sm   { max-width:440px; }
.ct-modal.ledger-modal--xs   { max-width:400px; }

/* ct-btn danger varyantı (global yoksa eklendi) */
.ct-btn.ct-btn--danger {
    color:#fff;
    background:linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-color:transparent;
    box-shadow:0 4px 12px -2px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.16);
}
.ct-btn.ct-btn--danger:hover {
    transform:translateY(-1px);
    background:linear-gradient(180deg, #f05454 0%, #c51e1e 100%);
    box-shadow:0 6px 18px -2px rgba(220,38,38,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.ct-btn.ct-btn--danger:active { transform:translateY(0); }

.ledger-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 16px;
}
.ledger-form-grid .col-span-2 { grid-column:span 2; }
.ledger-form-grid .form-group { margin:0; }

/* Modal yardımcıları */
.ledger-required { color:var(--ledger-expense); font-weight:700; }
.ledger-void-note {
    padding:12px 14px;
    border-radius: 0.75rem;
    background:rgba(234,179,8,.08);
    border:1px solid rgba(234,179,8,.25);
    color:var(--ct-t2);
    font-size:13px;
    line-height:1.5;
}
html.dark .ledger-void-note {
    background:rgba(234,179,8,.10);
    border-color:rgba(234,179,8,.22);
    color:var(--ct-t2);
}
.ledger-void-note strong { color:#a16207; font-weight:700; }
html.dark .ledger-void-note strong { color:#fbbf24; }

.ledger-vat-text {
    font-size:12px;
    color:var(--ct-t3);
}
.ledger-vat-text strong { color:var(--ct-t1); font-weight:700; font-variant-numeric:tabular-nums; }

.ledger-input-hint {
    display:block;
    margin-top:6px;
    font-size:11.5px;
    color:var(--ct-t3);
    line-height:1.4;
}
.ledger-label {
    display:block; margin-bottom:6px;
    font-size:12px; font-weight:600;
    color:var(--ct-t2);
    letter-spacing:.02em;
}
/* Modal form — global input[type="..."] kuralını yen.
   Tüm type'lar (text, number, date, tel, email...) için aynı görünüm.
   background-color/border-color explicit (shorthand yerine) ki global rule patch edemesin. */
input.ledger-input,
input.ledger-input:hover,
input.ledger-input:focus,
input.ledger-input:active {
    display:block;
    width:100%; height:40px;
    padding:0 12px;
    margin:0;
    border-width:1px;
    border-style:solid;
    border-color:var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    background-color:var(--ct-bg);
    background-image:none;
    color:var(--ct-t1);
    font-size:13.5px;
    font-family:inherit;
    line-height:1.5;
    outline:none;
    box-shadow:none;
    transition:border-color .15s, box-shadow .15s;
    color-scheme:light dark;
    -webkit-appearance:none;
    -moz-appearance:textfield;
    appearance:none;
}
input.ledger-input::placeholder { color:var(--ct-t3); opacity:1; }
input.ledger-input:focus {
    border-color:var(--ct, #3b82f6);
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
/* type="number" spin button kaldır (cross-browser) */
input.ledger-input[type="number"]::-webkit-inner-spin-button,
input.ledger-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0;
}
input.ledger-input[type="date"]::-webkit-calendar-picker-indicator { opacity:.55; cursor:pointer; }
html.dark input.ledger-input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(.85); }

select.ledger-select,
select.ledger-select:focus {
    display:block;
    width:100%; height:40px;
    padding:0 36px 0 12px;
    margin:0;
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    background:var(--ct-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance:none;
    appearance:none;
    color:var(--ct-t1);
    font-size:13.5px;
    font-family:inherit;
    line-height:1.5;
    outline:none;
    box-shadow:none;
    transition:border-color .15s, box-shadow .15s;
    cursor:pointer;
    color-scheme:light dark;
}
select.ledger-select:focus {
    border-color:var(--ct, #3b82f6);
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
select.ledger-select option { background:var(--ct-bg); color:var(--ct-t1); }

/* Global textarea kuralını yen — explicit props, tüm state'ler aynı blokta */
textarea.ledger-textarea,
textarea.ledger-textarea:hover,
textarea.ledger-textarea:focus,
textarea.ledger-textarea:active {
    display:block;
    width:100%;
    padding:10px 12px;
    margin:0;
    border-width:1px;
    border-style:solid;
    border-color:var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    background-color:var(--ct-bg);
    background-image:none;
    color:var(--ct-t1);
    font-size:13.5px;
    font-family:inherit;
    line-height:1.5;
    outline:none;
    box-shadow:none;
    resize:vertical;
    transition:border-color .15s, box-shadow .15s;
    min-height:64px;
    -webkit-appearance:none;
    appearance:none;
}
textarea.ledger-textarea::placeholder { color:var(--ct-t3); opacity:1; }
textarea.ledger-textarea:focus {
    border-color:var(--ct, #3b82f6);
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

/* Tür Toggle */
.ledger-type-toggle {
    display:inline-flex; gap:4px;
    padding:4px;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    width:fit-content;
    max-width:100%;
}
.ledger-type-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px;
    border-radius: 0.75rem;
    border:none; background:transparent;
    color:var(--ct-t3); font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s, color .12s;
    white-space:nowrap;
}
.ledger-type-btn:hover { color:var(--ct-t1); background:var(--ct-hover); }
.ledger-type-btn.active {
    background:var(--ct, #3b82f6); color:#fff;
    box-shadow:0 1px 2px rgba(59,130,246,.25);
}

/* KDV Önizleme */
.ledger-vat-preview {
    margin-top:10px; padding:10px 14px;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
}
.ledger-vat-preview strong { color:var(--ct-t1); font-weight:700; }

.ledger-icon-btn {
    width:30px; height:30px;
    border:none; background:transparent;
    border-radius: 0.75rem;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ct-t3); cursor:pointer;
    transition:background .12s, color .12s;
}
.ledger-icon-btn:hover { background:var(--ct-hover); color:var(--ct-t1); }
.ledger-icon-btn.text-red-400:hover { color:var(--ledger-expense); background:var(--ledger-expense-bg); }

/* ── Renk Seçici ─────────────────────────────────────────── */
.ledger-color-picker {
    display:flex; flex-wrap:wrap; gap:8px;
    padding:10px;
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
}
.ledger-color-swatch {
    width:26px; height:26px;
    border-radius: 9999px;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .12s, box-shadow .12s;
    outline:none;
    padding:0;
}
.ledger-color-swatch:hover { transform:scale(1.15); }
.ledger-color-swatch.selected {
    border-color:var(--ct-bg);
    box-shadow:0 0 0 2px var(--ct, #3b82f6);
}
.ledger-color-dot {
    width:12px; height:12px; border-radius: 9999px; flex-shrink:0;
    box-shadow:0 0 0 2px var(--ct-bg2);
}

/* ── Kategori Listesi ────────────────────────────────────── */
.ledger-cat-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
@media (max-width: 880px) {
    .ledger-cat-grid { grid-template-columns:1fr; }
}
.ledger-cat-group {
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 1rem;
    overflow:hidden;
}
.ledger-cat-group-title {
    display:flex; align-items:center; gap:8px;
    padding:12px 16px;
    font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--ct-t3);
    background:var(--ct-bg);
    border-bottom:1px solid var(--ct-brd, #dde1e8);
}
.ledger-cat-list { display:flex; flex-direction:column; }
.ledger-cat-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--ct-brd, #dde1e8);
    transition:background .12s;
    position:relative;
}
.ledger-cat-item:last-child { border-bottom:none; }
.ledger-cat-item:hover { background:var(--ct-hover); }
.ledger-cat-item:hover .ledger-cat-actions { opacity:1; }
.ledger-cat-name {
    flex:1; min-width:0;
    font-size:13.5px; font-weight:600;
    color:var(--ct-t1);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ledger-cat-actions {
    display:flex; gap:2px;
    opacity:0;
    transition:opacity .12s;
}
.ledger-system-badge {
    font-size:10px; font-weight:700; letter-spacing:.05em;
    padding:2px 7px; border-radius: 0.375rem;
    background:var(--ct-brd, #dde1e8); color:var(--ct-t3);
    text-transform:uppercase;
}

/* ── Tekrarlayan Kart ────────────────────────────────────── */
.ledger-recurring-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
.ledger-recurring-card {
    background:var(--ct-bg2);
    border:1px solid var(--ct-brd, #dde1e8);
    border-radius: 1rem;
    padding:16px 18px;
    transition:border-color .15s, box-shadow .15s;
}
.ledger-recurring-card:hover {
    border-color:var(--ct-t3);
    box-shadow:0 2px 14px rgba(15,23,42,.05);
}
html.dark .ledger-recurring-card:hover { box-shadow:0 2px 14px rgba(0,0,0,.25); }
.ledger-recurring-paused { opacity:.65; }
.ledger-recurring-head {
    display:flex; align-items:flex-start; gap:14px;
}
.ledger-recurring-icon {
    width:40px; height:40px;
    border-radius: 0.75rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.ledger-recurring-icon--income  { background:var(--ledger-income-bg);  color:var(--ledger-income); }
.ledger-recurring-icon--expense { background:var(--ledger-expense-bg); color:var(--ledger-expense); }
.ledger-recurring-body { flex:1; min-width:0; }
.ledger-recurring-title-row {
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap;
}
.ledger-recurring-title {
    font-size:14px; font-weight:700;
    color:var(--ct-t1);
}
.ledger-recurring-meta {
    display:flex; align-items:center; gap:14px;
    flex-wrap:wrap;
    margin-top:6px;
    font-size:12px;
    color:var(--ct-t3);
}
.ledger-recurring-meta i { vertical-align:-2px; margin-right:2px; }
.ledger-recurring-amount { text-align:right; flex-shrink:0; }
.ledger-recurring-amount-value {
    font-size:15px; font-weight:800;
    font-variant-numeric:tabular-nums;
}
.ledger-recurring-vat { font-size:11px; color:var(--ct-t3); margin-top:2px; }
.ledger-recurring-actions {
    display:flex; justify-content:flex-end; gap:8px;
    margin-top:14px; padding-top:14px;
    border-top:1px solid var(--ct-brd, #dde1e8);
}

.ledger-badge-paused {
    font-size:10px; font-weight:700; padding:2px 8px; border-radius: 0.375rem;
    background:rgba(234,179,8,.15); color:#a16207;
    text-transform:uppercase; letter-spacing:.05em;
}
html.dark .ledger-badge-paused { background:rgba(234,179,8,.16); color:#fbbf24; }

/* ============================================================
   StaffWorkingHours (swh-*) + ct-modal--wide
   ============================================================ */

/* Wide modal variant */
.ct-modal--wide { max-width: 620px; }

/* Tab navigation */
.swh-tab-nav {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--ct-brd, #dde1e8);
    background: var(--ct-bg);
}
.swh-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-t3, #6b7280);
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    border-radius: 0;
}
.swh-tab-btn:hover { color: var(--ct-t1, #111827); }
.swh-tab-btn--active {
    color: var(--brand-500, #3b82f6);
    border-bottom-color: var(--brand-500, #3b82f6);
}
html.dark .swh-tab-btn--active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* Panel header */
.swh-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.swh-panel-desc {
    font-size: 12px;
    color: var(--ct-t3, #6b7280);
    line-height: 1.5;
    flex: 1;
}
.swh-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-500, #3b82f6);
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.swh-preset-btn:hover {
    background: rgba(59,130,246,.15);
    border-color: rgba(59,130,246,.35);
}
html.dark .swh-preset-btn {
    color: #60a5fa;
    background: rgba(96,165,250,.1);
    border-color: rgba(96,165,250,.2);
}
html.dark .swh-preset-btn:hover {
    background: rgba(96,165,250,.18);
    border-color: rgba(96,165,250,.35);
}

/* Schedule grid */
.swh-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Loading state */
.swh-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--ct-t3, #6b7280);
    font-size: 13px;
}
.swh-spin {
    animation: swh-spin 1s linear infinite;
}
@keyframes swh-spin { to { transform: rotate(360deg); } }

/* Day row */
.swh-day-row {
    display: grid;
    grid-template-columns: 28px 88px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 0.75rem;
    background: var(--ct-bg2);
    border: 1px solid var(--ct-brd, #dde1e8);
    transition: border-color .15s, background .15s;
}
.swh-day-row--closed {
    background: var(--ct-bg);
    opacity: .7;
}
html.dark .swh-day-row { background: rgba(255,255,255,.03); }
html.dark .swh-day-row--closed { background: transparent; opacity: .6; }

/* Toggle */
.swh-toggle {
    position: relative;
    width: 28px;
    height: 16px;
    flex-shrink: 0;
}
.swh-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.swh-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--ct-brd, #dde1e8);
    cursor: pointer;
    transition: background .2s;
}
.swh-toggle input:checked + .swh-toggle-track { background: #22c55e; }
html.dark .swh-toggle input:checked + .swh-toggle-track { background: #16a34a; }
.swh-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 9999px;
    background: #fff;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.swh-toggle input:checked + .swh-toggle-track::after { transform: translateX(12px); }

/* Day label */
.swh-day-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-t1, #111827);
    user-select: none;
}
.swh-day-row--closed .swh-day-label {
    color: var(--ct-t3, #6b7280);
    text-decoration: line-through;
    text-decoration-color: var(--ct-brd, #dde1e8);
}

/* Time inputs area */
.swh-time-area {
    display: flex;
    align-items: center;
    gap: 8px;
}
.swh-time-sep {
    font-size: 11px;
    color: var(--ct-t3, #6b7280);
    flex-shrink: 0;
}
.swh-time-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-t1, #111827);
    background: var(--ct-bg);
    border: 1px solid var(--ct-brd, #dde1e8);
    border-radius: 0.75rem;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.swh-time-input:focus {
    outline: none;
    border-color: var(--brand-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
html.dark .swh-time-input {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
    color: #f1f5f9;
}
html.dark .swh-time-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.12);
}
.swh-time-input:disabled,
.swh-day-row--closed .swh-time-input {
    opacity: .35;
    pointer-events: none;
}

/* Closed label shown in place of time inputs */
.swh-closed-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-t3, #6b7280);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Save hint */
.swh-save-hint {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #f59e0b;
    text-align: center;
}
html.dark .swh-save-hint { color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════
   PAZARLAMA MERKEZİ — .mkt-* bileşenleri
   ═══════════════════════════════════════════════════════════════ */

:root {
    --mkt-accent:        #7c3aed;
    --mkt-accent-hover:  #6d28d9;
    --mkt-accent-light:  #ede9fe;
    --mkt-accent-text:   #5b21b6;
    --mkt-accent-mid:    #a78bfa;
    --mkt-success:       #059669;
    --mkt-success-light: #d1fae5;
    --mkt-success-text:  #065f46;
    --mkt-warn:          #d97706;
    --mkt-warn-light:    #fef3c7;
    --mkt-info:          #2563eb;
    --mkt-info-light:    #dbeafe;
    --mkt-danger:        #dc2626;
    --mkt-danger-light:  #fee2e2;
    --mkt-sms-bubble:    #d1fae5;
    --mkt-sms-text:      #065f46;
    --mkt-card-bg:       #ffffff;
    --mkt-card-border:   #e5e7eb;
    --mkt-surface:       #f9fafb;
    --mkt-phone-bg:      #f3f4f6;
    --mkt-text-1:        #111827;
    --mkt-text-2:        #374151;
    --mkt-text-3:        #6b7280;
    --mkt-text-4:        #9ca3af;
}
html.dark {
    --mkt-accent:        #a855f7;
    --mkt-accent-hover:  #9333ea;
    --mkt-accent-light:  #2d1b69;
    --mkt-accent-text:   #c4b5fd;
    --mkt-accent-mid:    #c4b5fd;
    --mkt-success:       #10b981;
    --mkt-success-light: #064e3b;
    --mkt-success-text:  #a7f3d0;
    --mkt-warn:          #f59e0b;
    --mkt-warn-light:    rgba(217,119,6,.2);
    --mkt-info:          #60a5fa;
    --mkt-info-light:    rgba(37,99,235,.2);
    --mkt-danger:        #f87171;
    --mkt-danger-light:  rgba(220,38,38,.2);
    --mkt-sms-bubble:    #064e3b;
    --mkt-sms-text:      #a7f3d0;
    --mkt-card-bg:       #1e293b;
    --mkt-card-border:   #334155;
    --mkt-surface:       #0f172a;
    --mkt-phone-bg:      #0f172a;
    --mkt-text-1:        #f9fafb;
    --mkt-text-2:        #e2e8f0;
    --mkt-text-3:        #9ca3af;
    --mkt-text-4:        #6b7280;
}

@media (prefers-reduced-motion: reduce) {
    .mkt-group-card, .mkt-campaign-card, .mkt-template-item,
    .mkt-schedule-opt, .mkt-wizard-step__num, .mkt-toggle-slider { transition: none !important; }
}

/* ── İkon wrap ── */
.mkt-icon-wrap {
    width: 36px; height: 36px;
    border-radius: 0.75rem;
    background: var(--mkt-accent-light);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Butonlar ── */
/* .mkt-btn-primary / .mkt-btn-ghost global .page-toolbar__btn + --primary/--ghost varyantları ile değiştirildi */

/* ── Özet Kartları (liste sayfası) ── */
.mkt-summary-card {
    background: var(--mkt-card-bg);
    border: 1px solid var(--mkt-card-border);
    border-radius: 0.75rem;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    transition: box-shadow .15s;
}
.mkt-summary-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

.mkt-summary-icon {
    width: 42px; height: 42px;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mkt-summary-icon--all    { background: var(--mkt-accent-light);  color: var(--mkt-accent); }
.mkt-summary-icon--active { background: var(--mkt-warn-light);    color: var(--mkt-warn); }
.mkt-summary-icon--sent   { background: var(--mkt-success-light); color: var(--mkt-success); }
.mkt-summary-icon--appt   { background: var(--mkt-info-light);    color: var(--mkt-info); }

.mkt-summary-label { font-size: 11px; color: var(--mkt-text-3); font-weight: 500; letter-spacing: .02em; }
.mkt-summary-value { font-size: 22px; font-weight: 700; color: var(--mkt-text-1); line-height: 1.2; margin-top: 1px; }

/* ── Kampanya kartları ── */
.mkt-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.mkt-campaign-card {
    background: var(--mkt-card-bg);
    border: 1px solid var(--mkt-card-border);
    border-radius: 1rem;
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
    transition: box-shadow .15s, border-color .15s;
}
.mkt-campaign-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); border-color: #d1d5db; }
html.dark .mkt-campaign-card:hover { border-color: #475569; box-shadow: 0 4px 16px rgba(0,0,0,.3); }

.mkt-campaign-card__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.mkt-campaign-card__info { min-width: 0; flex: 1; }
.mkt-campaign-card__name {
    font-size: 14px; font-weight: 600; color: var(--mkt-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-campaign-card__segment { font-size: 11px; color: var(--mkt-text-3); font-weight: 500; display: block; margin-top: 3px; }

/* Durum rozetleri */
.mkt-status {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 1rem;
    font-size: 11px; font-weight: 600;
    white-space: nowrap;
}
.mkt-status--draft     { background: #f3f4f6;               color: #6b7280; }
.mkt-status--scheduled { background: var(--mkt-accent-light); color: var(--mkt-accent); }
.mkt-status--sending   { background: var(--mkt-warn-light);   color: var(--mkt-warn); }
.mkt-status--completed { background: var(--mkt-success-light); color: var(--mkt-success); }
.mkt-status--cancelled { background: var(--mkt-danger-light);  color: var(--mkt-danger); }
html.dark .mkt-status--draft { background: #374151; color: #9ca3af; }

/* Metrik satırı */
.mkt-campaign-card__metrics {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--mkt-surface);
    border-radius: 0.75rem;
    padding: 10px 8px;
    gap: 4px;
}
.mkt-metric { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mkt-metric__label { font-size: 10px; color: var(--mkt-text-4); font-weight: 500; }
.mkt-metric__value { font-size: 15px; font-weight: 700; color: var(--mkt-text-2); margin-top: 2px; }
.mkt-metric__value--highlight { color: var(--mkt-accent) !important; }

.mkt-campaign-card__footer { display: flex; align-items: center; justify-content: space-between; }
.mkt-campaign-card__date { font-size: 11px; color: var(--mkt-text-4); }

/* .mkt-btn--cancel global .page-toolbar__btn--danger modifier ile değiştirildi */

/* Boş durum */
.mkt-empty-state {
    display: flex; flex-direction: column; align-items: center;
    padding: 72px 24px; text-align: center;
}
.mkt-empty-icon {
    width: 80px; height: 80px;
    border-radius: 1rem;
    background: var(--mkt-surface);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mkt-card-border);
}

/* ── Wizard adım göstergesi ── */
.mkt-wizard-steps {
    display: flex; align-items: center;
    margin-bottom: 24px; padding: 0 4px;
}
.mkt-wizard-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mkt-wizard-step__num {
    width: 30px; height: 30px;
    border-radius: 9999px;
    background: #e5e7eb; color: #9ca3af;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
html.dark .mkt-wizard-step__num { background: #374151; color: #6b7280; }
.mkt-wizard-step__label { font-size: 12px; font-weight: 500; color: var(--mkt-text-4); transition: color .2s; }
.mkt-wizard-step.active .mkt-wizard-step__num { background: var(--mkt-accent); color: #fff; }
.mkt-wizard-step.active .mkt-wizard-step__label { color: var(--mkt-accent); font-weight: 600; }
.mkt-wizard-step.done .mkt-wizard-step__num { background: var(--mkt-success); color: #fff; }
.mkt-wizard-step__connector { flex: 1; height: 2px; background: #e5e7eb; margin: 0 10px; }
html.dark .mkt-wizard-step__connector { background: #374151; }

/* ── Wizard body / paneller ── */
.mkt-wizard-body {
    background: var(--mkt-card-bg);
    border: 1px solid var(--mkt-card-border);
    border-radius: 1rem; overflow: hidden;
}
.mkt-wizard-panel { display: none; }
.mkt-wizard-panel.active { display: block; }

/* Adım 1 ve 3: normal tek kolon */
#wiz-panel-1, #wiz-panel-3 { padding: 28px 32px 32px; }

/* Adım 2: split-screen */
#wiz-panel-2 {
    display: none;
    grid-template-columns: 1fr 1fr;
}
#wiz-panel-2.active { display: grid; }
@media (max-width: 767px) {
    #wiz-panel-2.active { grid-template-columns: 1fr; }
}

.mkt-editor-left {
    padding: 28px 28px 32px;
    border-right: 1px solid var(--mkt-card-border);
    display: flex; flex-direction: column; gap: 0;
}
html.dark .mkt-editor-left { border-right-color: var(--mkt-card-border); }

.mkt-editor-right {
    padding: 28px 28px 32px;
    background: var(--mkt-surface);
    display: flex; flex-direction: column; align-items: center;
}
html.dark .mkt-editor-right { background: var(--mkt-phone-bg); }

@media (max-width: 767px) {
    .mkt-editor-right { display: none; }
    .mkt-wizard-footer--split { padding: 20px 28px 32px; border-top: 1px solid var(--mkt-card-border); }
}

.mkt-wizard-panel__header { margin-bottom: 20px; }
.mkt-wizard-panel__header h2 { font-size: 16px; font-weight: 700; color: var(--mkt-text-1); }
.mkt-wizard-panel__header p  { font-size: 13px; color: var(--mkt-text-3); margin-top: 4px; }
.mkt-wizard-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 20px; border-top: 1px solid var(--mkt-surface); margin-top: 20px;
}
html.dark .mkt-wizard-footer { border-top-color: var(--mkt-card-border); }
.mkt-wizard-footer--split {
    grid-column: 1 / -1;
    padding: 16px 32px 28px;
    border-top: 1px solid var(--mkt-card-border);
    display: flex; align-items: center; justify-content: space-between;
}

/* ── Form elemanları ── */
.mkt-form-group { margin-bottom: 20px; }
.mkt-label { display: block; font-size: 13px; font-weight: 600; color: var(--mkt-text-2); margin-bottom: 8px; }
.mkt-input {
    width: 100%; padding: 10px 13px;
    border: 1px solid #d1d5db; border-radius: 0.75rem;
    background: #fff; color: var(--mkt-text-1); font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
html.dark .mkt-input { background: var(--mkt-surface); border-color: #475569; }
.mkt-input:focus { outline: none; border-color: var(--mkt-accent); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.mkt-textarea { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.6; }
.mkt-input--datetime { max-width: 280px; }

/* Değişken chip'leri */
.mkt-variable-hints { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mkt-var-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; background: var(--mkt-accent-light); color: var(--mkt-accent);
    border-radius: 0.375rem; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; transition: background .12s;
    touch-action: manipulation;
}
.mkt-var-chip:hover { filter: brightness(.94); }

/* Şablon kategori sekmeleri */
.mkt-template-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.mkt-template-tab {
    padding: 4px 12px;
    border-radius: 1rem; border: 1px solid var(--mkt-card-border);
    background: transparent; color: var(--mkt-text-3);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.mkt-template-tab.active {
    background: var(--mkt-accent-light); color: var(--mkt-accent);
    border-color: transparent; font-weight: 600;
}
.mkt-template-tab:hover:not(.active) { background: var(--mkt-surface); }

/* Kupon toggle — geliştirilmiş */
.mkt-coupon-section {
    border: 1px solid var(--mkt-card-border);
    border-radius: 0.75rem; padding: 14px 16px;
    transition: border-color .15s, background .15s;
}
.mkt-coupon-section.active { border-color: var(--mkt-accent); background: var(--mkt-accent-light); }
html.dark .mkt-coupon-section.active { background: rgba(124,58,237,.08); }
.mkt-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; cursor: pointer; }
.mkt-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.mkt-toggle-switch { position: relative; flex-shrink: 0; margin-top: 2px; }
.mkt-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.mkt-toggle-slider {
    display: block; width: 42px; height: 24px;
    background: #d1d5db; border-radius: 0.75rem;
    position: relative; transition: background .2s; cursor: pointer;
}
.mkt-toggle-slider::after {
    content: ""; position: absolute; top: 4px; left: 4px;
    width: 16px; height: 16px; background: #fff; border-radius: 9999px;
    transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.mkt-toggle-input:checked + .mkt-toggle-slider { background: var(--mkt-accent); }
.mkt-toggle-input:checked + .mkt-toggle-slider::after { transform: translateX(18px); }

/* Kupon parametreleri */
.mkt-coupon-params {
    display: none; margin-top: 14px;
    grid-template-columns: 1fr 1fr; gap: 12px;
}
.mkt-coupon-params.visible { display: grid; }
.mkt-coupon-param-label { font-size: 11px; color: var(--mkt-text-3); font-weight: 500; margin-bottom: 5px; }
.mkt-coupon-param-input {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--mkt-card-border); border-radius: 0.75rem;
    background: var(--mkt-card-bg); color: var(--mkt-text-1); font-size: 14px; font-weight: 600;
    box-sizing: border-box;
}
html.dark .mkt-coupon-param-input { background: var(--mkt-surface); }
.mkt-coupon-param-input:focus { outline: none; border-color: var(--mkt-accent); }
.mkt-coupon-param-suffix { font-size: 12px; color: var(--mkt-text-3); margin-top: 4px; }

/* ── Telefon önizleme ── */
.mkt-phone-preview {
    width: 220px;
    background: var(--mkt-card-bg);
    border-radius: 1rem;
    border: 6px solid #1a1a2e;
    box-shadow: 0 20px 60px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.1);
    overflow: hidden; flex-shrink: 0;
    position: sticky; top: 24px;
}
html.dark .mkt-phone-preview { border-color: #0d0d15; }
.mkt-phone-preview__notch {
    height: 20px; background: #1a1a2e;
    display: flex; align-items: center; justify-content: center;
}
html.dark .mkt-phone-preview__notch { background: #0d0d15; }
.mkt-phone-preview__notch-pill {
    width: 60px; height: 6px;
    background: #2d2d4a; border-radius: 0.25rem;
}
.mkt-phone-preview__screen {
    min-height: 320px;
    background: var(--mkt-phone-bg);
    padding: 12px;
}
.mkt-phone-preview__header {
    text-align: center; margin-bottom: 10px;
    font-size: 10px; font-weight: 600; color: var(--mkt-text-3); letter-spacing: .06em;
}
.mkt-phone-preview__bubble {
    background: var(--mkt-sms-bubble);
    color: var(--mkt-sms-text);
    border-radius: 1rem 1rem 0.375rem 1rem;
    padding: 10px 12px;
    font-size: 11px; line-height: 1.55; word-break: break-word;
    white-space: pre-wrap;
    max-width: 92%;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.mkt-phone-preview__empty {
    display: flex; flex-direction: column; align-items: center;
    padding-top: 40px; color: var(--mkt-text-4); text-align: center;
}
.mkt-phone-preview__time {
    text-align: right; font-size: 9px; color: var(--mkt-text-4); margin-top: 4px;
}

/* Sms sayısı göstergesi */
.mkt-char-info {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--mkt-text-4); margin-top: 5px;
}
.mkt-char-info__sms { font-weight: 600; color: var(--mkt-text-3); }
.mkt-char-info__warn { color: #ef4444; }

/* ── Segment seçim kartları ── */
.mkt-group-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.mkt-group-card {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px;
    border: 2px solid var(--mkt-card-border); border-radius: 0.75rem;
    background: var(--mkt-card-bg); cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
    touch-action: manipulation;
    min-height: 44px;
}
.mkt-group-card:hover { border-color: var(--mkt-accent-mid); background: #faf5ff; }
html.dark .mkt-group-card:hover { background: rgba(124,58,237,.08); }
.mkt-group-card.selected { border-color: var(--mkt-accent); background: #faf5ff; }
html.dark .mkt-group-card.selected { background: rgba(124,58,237,.12); }
.mkt-group-card__icon {
    width: 38px; height: 38px; border-radius: 0.75rem;
    background: var(--mkt-accent-light); color: var(--mkt-accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mkt-group-card__text { flex: 1; min-width: 0; }
.mkt-group-card__name { display: block; font-size: 13px; font-weight: 600; color: var(--mkt-text-1); }
.mkt-group-card__desc { display: block; font-size: 11px; color: var(--mkt-text-4); margin-top: 2px; }
.mkt-group-card__check { color: var(--mkt-accent); opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.mkt-group-card.selected .mkt-group-card__check { opacity: 1; }

/* Segment preview */
.mkt-group-preview {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--mkt-accent-light);
    border: 1px solid rgba(124,58,237,.25);
    border-radius: 0.75rem;
    font-size: 13px; font-weight: 500; color: var(--mkt-accent-text);
    margin-top: -8px; margin-bottom: 4px;
}
html.dark .mkt-group-preview { color: var(--mkt-accent-text); }

/* ── Şablon listesi ── */
.mkt-template-list {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--mkt-card-border); border-radius: 0.75rem;
}
.mkt-template-loading { display: flex; align-items: center; gap: 8px; padding: 14px; font-size: 13px; color: var(--mkt-text-4); }
.mkt-template-item {
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid var(--mkt-surface); transition: background .12s;
}
html.dark .mkt-template-item { border-bottom-color: rgba(255,255,255,.05); }
.mkt-template-item:last-child { border-bottom: none; }
.mkt-template-item:hover { background: var(--mkt-surface); }
.mkt-template-item__name { font-size: 13px; font-weight: 600; color: var(--mkt-text-1); }
.mkt-template-item__cat  { font-size: 11px; color: var(--mkt-text-4); margin-top: 2px; }
.mkt-template-item__sys  {
    font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 0.375rem;
    background: var(--mkt-accent-light); color: var(--mkt-accent); margin-left: 6px;
}

/* ── Zamanlama seçenekleri ── */
.mkt-schedule-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.mkt-schedule-opt {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border: 2px solid var(--mkt-card-border); border-radius: 0.75rem;
    cursor: pointer; transition: border-color .15s, background .15s;
    touch-action: manipulation; min-height: 44px;
}
.mkt-schedule-radio { display: none; }
.mkt-schedule-opt:has(.mkt-schedule-radio:checked) { border-color: var(--mkt-accent); background: #faf5ff; }
html.dark .mkt-schedule-opt:has(.mkt-schedule-radio:checked) { background: rgba(124,58,237,.08); }
.mkt-schedule-opt__content { display: flex; align-items: flex-start; gap: 12px; }
.mkt-schedule-opt__icon {
    width: 38px; height: 38px; border-radius: 0.75rem;
    background: var(--mkt-accent-light); color: var(--mkt-accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mkt-schedule-datetime { margin-bottom: 20px; }

/* Özet kutusu (wizard step 3) */
.mkt-summary-box {
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-card-border);
    border-radius: 0.75rem; padding: 16px; margin-bottom: 4px;
}
.mkt-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--mkt-card-border);
}
html.dark .mkt-summary-row { border-bottom-color: rgba(255,255,255,.06); }
.mkt-summary-row:last-child { border-bottom: none; }
.mkt-summary-row__label { font-size: 12px; color: var(--mkt-text-4); font-weight: 500; }
.mkt-summary-row__val   { font-size: 13px; font-weight: 600; color: var(--mkt-text-2); }

/* ================================================================
   PLAN EDITOR — Split Canvas (.pe-*)
   Industrial data terminal estetiği: koyu zemin, mono sayılar, amber aksanlar.
   Her iki temada da koyu arkaplan kullanılır (admin-only sayfa).
   ================================================================ */

:root {
    --pe-bg-left:    #0c0c0d;
    --pe-bg-right:   #111113;
    --pe-bg-section: rgba(255,255,255,0.025);
    --pe-border:     rgba(255,255,255,0.07);
    --pe-accent:     #f59e0b;
    --pe-accent-dim: rgba(245,158,11,0.10);
    --pe-accent-hover: #fbbf24;
    --pe-text-1:     #f0ede8;
    --pe-text-2:     #8a8680;
    --pe-text-3:     #4a4845;
    --pe-danger:     #ef4444;
    --pe-danger-dim: rgba(239,68,68,0.10);
    --pe-green:      #22c55e;
    --pe-font-mono:  'IBM Plex Mono', 'Fira Code', 'Cascadia Code', monospace;
    --pe-font-sans:  'IBM Plex Sans', 'DM Sans', system-ui, sans-serif;
}
html.dark {
    --pe-bg-left:    #090909;
    --pe-bg-right:   #0d0d0f;
    --pe-bg-section: rgba(255,255,255,0.02);
    --pe-border:     rgba(255,255,255,0.055);
}

/* Root */
.pe-root {
    font-family: var(--pe-font-sans);
    color: var(--pe-text-1);
    min-height: 100%;
    padding: 24px 28px 48px;
}

/* Breadcrumb */
.pe-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--pe-text-2);
    margin-bottom: 24px; letter-spacing: 0.02em;
}
.pe-breadcrumb__link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--pe-text-2); text-decoration: none;
    transition: color 0.15s;
}
.pe-breadcrumb__link:hover { color: var(--pe-accent); }
.pe-breadcrumb__sep { color: var(--pe-text-3); }
.pe-breadcrumb__current { color: var(--pe-text-1); font-weight: 600; }

/* Layout */
.pe-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 767px) {
    .pe-root { padding: 16px 16px 48px; }
    .pe-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.pe-sidebar {
    position: sticky; top: 80px;
    background: var(--pe-bg-left);
    border: 1px solid var(--pe-border);
    border-radius: 0.75rem;
    overflow: hidden;
}
.pe-sidebar__inner { padding: 20px; display: flex; flex-direction: column; gap: 0; }

/* Identity */
.pe-identity {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 18px;
}
.pe-identity__icon {
    width: 52px; height: 52px;
    background: var(--pe-accent-dim);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--pe-accent); flex-shrink: 0;
}
.pe-identity__label { font-size: 9px; letter-spacing: 0.18em; color: var(--pe-text-3); font-weight: 600; text-transform: uppercase; }
.pe-identity__name  { font-size: 18px; font-weight: 700; color: var(--pe-text-1); line-height: 1.2; margin-top: 2px; }
.pe-identity__price { font-family: var(--pe-font-mono); font-size: 13px; color: var(--pe-accent); margin-top: 4px; }

/* Status row */
.pe-status-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0;
}
.pe-status-row__label { font-size: 11px; color: var(--pe-text-2); flex: 1; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.pe-status-row__badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 9999px;
    background: var(--pe-accent-dim); color: var(--pe-accent);
    border: 1px solid rgba(245,158,11,0.2);
    transition: all 0.2s;
}
.pe-status-row__badge[data-active="0"] { background: var(--pe-bg-section); color: var(--pe-text-3); border-color: var(--pe-border); }

/* Toggle switch */
.pe-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pe-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pe-switch__track {
    width: 36px; height: 20px; border-radius: 0.75rem;
    background: var(--pe-bg-section); border: 1px solid var(--pe-border);
    transition: background 0.2s, border-color 0.2s; display: block;
}
.pe-switch__thumb {
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; border-radius: 9999px;
    background: var(--pe-text-3); transition: left 0.2s, background 0.2s;
}
.pe-switch input:checked + .pe-switch__track { background: var(--pe-accent-dim); border-color: rgba(245,158,11,0.35); }
.pe-switch input:checked + .pe-switch__track .pe-switch__thumb { left: 19px; background: var(--pe-accent); }
.pe-switch input:focus-visible + .pe-switch__track { outline: 2px solid var(--pe-accent); outline-offset: 2px; }

/* Divider */
.pe-divider { height: 1px; background: var(--pe-border); margin: 0; }

/* Summary */
.pe-summary { padding: 16px 0; }
.pe-summary__label { font-size: 9px; letter-spacing: 0.18em; color: var(--pe-text-3); font-weight: 600; text-transform: uppercase; margin-bottom: 12px; display: block; }
.pe-summary__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pe-summary__item { text-align: center; background: var(--pe-bg-section); border: 1px solid var(--pe-border); border-radius: 0.75rem; padding: 10px 4px; }
.pe-summary__num { display: block; font-family: var(--pe-font-mono); font-size: 20px; font-weight: 600; color: var(--pe-accent); line-height: 1; }
.pe-summary__sub { font-size: 9px; color: var(--pe-text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; display: block; }

/* Actions */
.pe-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.pe-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 0.75rem; padding: 11px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.18s; text-decoration: none;
    letter-spacing: 0.02em; font-family: var(--pe-font-sans);
}
.pe-btn:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 2px; }
.pe-btn--save {
    background: var(--pe-accent); color: #000;
}
.pe-btn--save:hover { background: var(--pe-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(245,158,11,0.25); }
.pe-btn--save:disabled, .pe-btn--loading { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.pe-btn--delete {
    background: var(--pe-danger-dim); color: var(--pe-danger);
    border: 1px solid rgba(239,68,68,0.2);
}
.pe-btn--delete:hover { background: rgba(239,68,68,0.18); }
.pe-btn--cancel {
    background: var(--pe-bg-section); color: var(--pe-text-2);
    border: 1px solid var(--pe-border); text-align: center;
}
.pe-btn--cancel:hover { color: var(--pe-text-1); border-color: rgba(255,255,255,0.15); }

/* ── MAIN PANEL ── */
.pe-main {
    background: var(--pe-bg-right);
    border: 1px solid var(--pe-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Tabs */
.pe-tabs {
    display: flex; align-items: center; gap: 0;
    border-bottom: 1px solid var(--pe-border);
    padding: 0 4px;
    background: rgba(0,0,0,0.15);
}
.pe-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 14px 20px; font-size: 12px; font-weight: 600;
    color: var(--pe-text-2); cursor: pointer; background: none; border: none;
    letter-spacing: 0.05em; text-transform: uppercase; position: relative;
    transition: color 0.15s; font-family: var(--pe-font-sans);
}
.pe-tab::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
    background: var(--pe-accent); border-radius: 0.25rem 2px 0 0; opacity: 0; transition: opacity 0.15s;
}
.pe-tab:hover { color: var(--pe-text-1); }
.pe-tab--active { color: var(--pe-accent); }
.pe-tab--active::after { opacity: 1; }
.pe-tab:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: -2px; }
.pe-tab__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--pe-accent-dim); color: var(--pe-accent);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 9999px; font-size: 9px; font-weight: 700;
}
.pe-tab--active .pe-tab__badge { background: rgba(245,158,11,0.2); }

/* Tab panels */
.pe-tab-panel { padding: 24px; }
.pe-tab-panel--hidden { display: none; }

/* Section */
.pe-section {
    background: var(--pe-bg-section);
    border: 1px solid var(--pe-border);
    border-radius: 0.75rem; padding: 20px;
    margin-bottom: 16px;
}
.pe-section:last-child { margin-bottom: 0; }
.pe-section__head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.pe-section__title { font-size: 11px; font-weight: 700; color: var(--pe-text-2); text-transform: uppercase; letter-spacing: 0.15em; }
.pe-section__desc  { font-size: 11px; color: var(--pe-text-3); }

/* Report actions */
.pe-report-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pe-report-action-btn {
    font-size: 11px; color: var(--pe-accent); background: none; border: none;
    cursor: pointer; font-weight: 600; letter-spacing: 0.04em; padding: 2px 0;
    transition: opacity 0.15s; font-family: var(--pe-font-sans);
}
.pe-report-action-btn:hover { opacity: 0.75; }
.pe-report-actions__sep { color: var(--pe-text-3); font-size: 11px; }

/* Field grid */
.pe-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pe-field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .pe-field-grid { grid-template-columns: 1fr; } }

.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-label { font-size: 10px; font-weight: 700; color: var(--pe-text-2); text-transform: uppercase; letter-spacing: 0.1em; }
.pe-input {
    background: rgba(0,0,0,0.3); border: 1px solid var(--pe-border);
    border-radius: 0.75rem; padding: 10px 12px; font-size: 13px;
    color: var(--pe-text-1); outline: none; width: 100%;
    font-family: var(--pe-font-sans); transition: border-color 0.15s;
    -webkit-appearance: none;
}
.pe-input:focus { border-color: rgba(245,158,11,0.4); box-shadow: 0 0 0 3px rgba(245,158,11,0.07); }
.pe-input::placeholder { color: var(--pe-text-3); }
.pe-input--mono { font-family: var(--pe-font-mono); font-size: 13px; }
.pe-input--lg   { font-size: 16px; padding: 12px 14px; }
.pe-input:disabled { opacity: 0.4; cursor: not-allowed; }

.pe-limit-row { display: flex; align-items: center; gap: 10px; }
.pe-limit-row .pe-input { flex: 1; }
.pe-unlim-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--pe-text-2); white-space: nowrap; cursor: pointer; }
.pe-unlim-label input { accent-color: var(--pe-accent); }

/* Icon picker */
.pe-icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-icon-opt {
    width: 36px; height: 36px; border-radius: 0.75rem;
    border: 1px solid var(--pe-border); background: rgba(0,0,0,0.25);
    color: var(--pe-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.pe-icon-opt:hover { border-color: rgba(245,158,11,0.35); color: var(--pe-accent); }
.pe-icon-opt--active { border-color: var(--pe-accent); background: var(--pe-accent-dim); color: var(--pe-accent); }
.pe-icon-opt:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 2px; }

/* Color picker */
.pe-color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-color-opt {
    width: 28px; height: 28px; border-radius: 9999px;
    background: var(--pe-color-swatch, #888);
    border: 2px solid transparent;
    cursor: pointer; transition: all 0.15s; position: relative;
}
.pe-color-opt::after {
    content: ''; position: absolute; inset: -4px;
    border: 2px solid transparent; border-radius: 9999px; transition: border-color 0.15s;
}
.pe-color-opt--active::after { border-color: var(--pe-accent); }
.pe-color-opt:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 3px; }

/* Toggle grid (feature checkboxes as toggle-items) */
.pe-toggle-grid { display: flex; flex-direction: column; gap: 2px; }
.pe-toggle-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 0.75rem;
    cursor: pointer; transition: background 0.12s;
    border: 1px solid transparent;
}
.pe-toggle-item:hover { background: rgba(255,255,255,0.025); border-color: var(--pe-border); }
.pe-toggle-item__text { flex: 1; min-width: 0; }
.pe-toggle-item__name { font-size: 13px; font-weight: 500; color: var(--pe-text-1); display: block; }
.pe-toggle-item__desc { font-size: 11px; color: var(--pe-text-3); display: block; margin-top: 2px; }

/* Toggle (reuse pe-switch styles but as part of label) */
.pe-toggle-item input[type="checkbox"] { display: none; }
.pe-toggle-item__track {
    width: 38px; height: 22px; border-radius: 0.75rem; flex-shrink: 0;
    background: rgba(0,0,0,0.4); border: 1px solid var(--pe-border);
    position: relative; transition: background 0.2s, border-color 0.2s;
}
.pe-toggle-item__thumb {
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 9999px;
    background: var(--pe-text-3); transition: left 0.2s, background 0.2s;
}
.pe-toggle-item input:checked ~ .pe-toggle-item__track { background: var(--pe-accent-dim); border-color: rgba(245,158,11,0.35); }
.pe-toggle-item input:checked ~ .pe-toggle-item__track .pe-toggle-item__thumb { left: 19px; background: var(--pe-accent); }

/* Report groups */
.pe-report-group { margin-bottom: 20px; }
.pe-report-group:last-child { margin-bottom: 0; }
.pe-report-group__label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pe-text-3); padding: 0 2px; margin-bottom: 8px; display: block;
}

/* Report grid */
.pe-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 1100px) { .pe-report-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pe-report-grid { grid-template-columns: 1fr; } }

.pe-report-item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; border-radius: 0.75rem;
    border: 1px solid var(--pe-border); background: rgba(0,0,0,0.2);
    cursor: pointer; transition: all 0.12s;
}
.pe-report-item:hover { border-color: rgba(245,158,11,0.25); background: var(--pe-accent-dim); }
.pe-report-item input { display: none; }
.pe-report-item__check {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
    border-radius: 0.375rem; border: 1px solid var(--pe-border);
    background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;
    color: transparent; transition: all 0.15s;
}
.pe-report-item input:checked ~ .pe-report-item__check {
    background: var(--pe-accent); border-color: var(--pe-accent); color: #000;
}
.pe-report-item input:checked ~ .pe-report-item__text .pe-report-item__name { color: var(--pe-accent); }
.pe-report-item__text { flex: 1; min-width: 0; }
.pe-report-item__name { font-size: 12px; font-weight: 600; color: var(--pe-text-1); display: block; line-height: 1.35; transition: color 0.15s; }
.pe-report-item__desc { font-size: 10px; color: var(--pe-text-3); display: block; margin-top: 2px; line-height: 1.4; }

/* Pricing note */
.pe-pricing-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 14px; padding: 10px 14px; border-radius: 0.75rem;
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15);
    font-size: 11px; color: var(--pe-text-2); line-height: 1.5;
}
.pe-pricing-note svg { flex-shrink: 0; color: var(--pe-accent); margin-top: 1px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pe-btn--save, .pe-switch__thumb, .pe-toggle-item__thumb,
    .pe-tab::after, .pe-icon-opt, .pe-color-opt, .pe-report-item { transition: none !important; }
}

/* ================================================================
   MARKETING — Özel Grup (Custom Group) Paneli
   .mkt-custom-panel / .mkt-filter-* / .mkt-multi-select / .mkt-chip-list / .mkt-manual-*
   ================================================================ */

.mkt-group-card.mkt-group-card--custom {
    border-style: dashed;
    border-color: var(--mkt-accent-mid, #a78bfa);
}
.mkt-group-card.mkt-group-card--custom.selected {
    border-style: solid;
}

/* Özel Grup paneli — segment grid altında nested kart */
.mkt-custom-panel {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--mkt-surface, #f9fafb);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: 1rem; /* rounded-2xl */
    animation: mkt-fade-in .18s ease-out;
}
html.dark .mkt-custom-panel {
    background: var(--mkt-surface, #0f172a);
    border-color: rgba(255,255,255,.08);
}
.mkt-custom-panel.hidden { display: none !important; }

@keyframes mkt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mkt-custom-panel__header { margin-bottom: 1rem; }
.mkt-custom-panel__header h3 {
    font-size: .95rem; font-weight: 700;
    color: var(--mkt-text-1, #111827);
    margin: 0;
}
html.dark .mkt-custom-panel__header h3 { color: #f1f5f9; }
.mkt-custom-panel__header p {
    font-size: .8125rem;
    color: var(--mkt-text-3, #6b7280);
    margin: .25rem 0 0 0;
}
html.dark .mkt-custom-panel__header p { color: #94a3b8; }

.mkt-custom-panel__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .mkt-custom-panel__body { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .mkt-custom-panel__body { grid-template-columns: 1fr 1fr 1fr; }
}

.mkt-filter-row {
    display: flex; flex-direction: column; gap: .4rem;
}
.mkt-filter-row--full { grid-column: 1 / -1; }

.mkt-filter-label {
    font-size: .8125rem; font-weight: 600;
    color: var(--mkt-text-2, #374151);
}
html.dark .mkt-filter-label { color: #cbd5e1; }

/* Custom multi-select listbox */
.mkt-multi-select {
    position: relative;
}
.mkt-multi-select__trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem; /* rounded-xl */
    font-size: .875rem;
    color: var(--mkt-text-1, #111827);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
html.dark .mkt-multi-select__trigger {
    background: #1e293b; border-color: rgba(255,255,255,.08); color: #f1f5f9;
}
.mkt-multi-select__trigger:hover { border-color: var(--mkt-accent-mid, #a78bfa); }
.mkt-multi-select__trigger:focus,
.mkt-multi-select.open .mkt-multi-select__trigger {
    outline: none;
    border-color: var(--mkt-accent, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.mkt-multi-select__placeholder {
    flex: 1; text-align: left; color: var(--mkt-text-2, #374151);
}
html.dark .mkt-multi-select__placeholder { color: #cbd5e1; }
.mkt-multi-select__chevron {
    color: var(--mkt-text-3, #6b7280); flex-shrink: 0;
    transition: transform .15s;
}
.mkt-multi-select.open .mkt-multi-select__chevron { transform: rotate(180deg); }

.mkt-multi-select__panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 30;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    max-height: 280px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
/* feedback_tailwind_hidden_collision: display:flex class'ı [hidden] attribute'unu eziyor — explicit override */
.mkt-multi-select__panel[hidden] { display: none !important; }

/* Açık olan dropdown'ın z-index'i yükselsin ki komşu panellerin üstünde kalsın */
.mkt-multi-select.open { z-index: 40; }
.mkt-multi-select.open .mkt-multi-select__panel { z-index: 41; }
html.dark .mkt-multi-select__panel {
    background: #1e293b; border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.mkt-multi-select__search {
    padding: .5rem; border-bottom: 1px solid var(--mkt-card-border, #e5e7eb);
}
html.dark .mkt-multi-select__search { border-color: rgba(255,255,255,.08); }
.mkt-multi-select__searchinput {
    width: 100%; padding: .375rem .5rem;
    background: var(--mkt-surface, #f9fafb);
    border: 1px solid transparent;
    border-radius: .5rem;
    font-size: .8125rem;
    color: var(--mkt-text-1, #111827);
}
html.dark .mkt-multi-select__searchinput {
    background: rgba(0,0,0,.3); color: #f1f5f9;
}
.mkt-multi-select__searchinput:focus {
    outline: none; border-color: var(--mkt-accent, #7c3aed);
}

.mkt-multi-select__options { overflow-y: auto; flex: 1; padding: .25rem; }

.mkt-multi-select__option {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .625rem;
    font-size: .875rem;
    color: var(--mkt-text-2, #374151);
    border-radius: .5rem;
    cursor: pointer;
    transition: background .1s;
}
html.dark .mkt-multi-select__option { color: #cbd5e1; }
.mkt-multi-select__option:hover {
    background: rgba(124,58,237,.06);
    color: var(--mkt-text-1, #111827);
}
html.dark .mkt-multi-select__option:hover {
    background: rgba(168,85,247,.15); color: #f1f5f9;
}
.mkt-multi-select__option[aria-selected="true"] {
    background: var(--mkt-accent-light, #ede9fe);
    color: var(--mkt-accent-text, #5b21b6);
    font-weight: 600;
}
html.dark .mkt-multi-select__option[aria-selected="true"] {
    background: rgba(168,85,247,.25); color: #ddd6fe;
}
.mkt-multi-select__option input[type=checkbox] {
    accent-color: var(--mkt-accent, #7c3aed);
    width: 16px; height: 16px; flex-shrink: 0;
}
.mkt-multi-select__empty {
    padding: .75rem; font-size: .8125rem; text-align: center;
    color: var(--mkt-text-4, #9ca3af);
}

/* Chip list (multi-select altında seçili görünümü + manuel dahil/hariç) */
.mkt-chip-list {
    display: flex; flex-wrap: wrap; gap: .375rem;
    margin-top: .125rem;
    min-height: 1rem;
}
.mkt-chip-list__item {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .5rem .25rem .625rem;
    background: rgba(124,58,237,.08);
    color: var(--mkt-accent-text, #5b21b6);
    border-radius: .375rem; /* rounded-md */
    font-size: .75rem; font-weight: 500;
}
html.dark .mkt-chip-list__item {
    background: rgba(168,85,247,.2); color: #ddd6fe;
}
.mkt-chip-list__item--include {
    background: rgba(5,150,105,.1); color: var(--mkt-success-text, #065f46);
}
html.dark .mkt-chip-list__item--include {
    background: rgba(16,185,129,.18); color: #a7f3d0;
}
.mkt-chip-list__item--exclude {
    background: rgba(220,38,38,.1); color: #991b1b;
}
html.dark .mkt-chip-list__item--exclude {
    background: rgba(239,68,68,.18); color: #fecaca;
}
.mkt-chip-list__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    background: transparent; border: none; cursor: pointer;
    color: inherit; opacity: .7;
    padding: 0;
}
.mkt-chip-list__remove:hover { opacity: 1; }
.mkt-chip-list__empty {
    font-size: .75rem;
    color: var(--mkt-text-4, #9ca3af);
    font-style: italic;
}

/* Sayısal input ikilisi (yaş/ziyaret/harcama aralığı) */
.mkt-range-input {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
}
.mkt-range-input .mkt-input {
    flex: 1; min-width: 80px;
    padding: .5rem .625rem;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem;
    font-size: .875rem;
    color: var(--mkt-text-1, #111827);
}
html.dark .mkt-range-input .mkt-input {
    background: #1e293b; border-color: rgba(255,255,255,.08); color: #f1f5f9;
}
.mkt-range-input .mkt-input:focus {
    outline: none;
    border-color: var(--mkt-accent, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.mkt-range-input__sep {
    color: var(--mkt-text-4, #9ca3af); font-weight: 500;
}
.mkt-range-input__suffix {
    font-size: .75rem; color: var(--mkt-text-3, #6b7280);
    white-space: nowrap;
}
html.dark .mkt-range-input__suffix { color: #94a3b8; }

/* Manuel müşteri arama ve dahil/hariç bucket */
.mkt-manual-search { position: relative; }
.mkt-manual-search__input {
    width: 100%;
    padding: .5rem .75rem;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem;
    font-size: .875rem;
    color: var(--mkt-text-1, #111827);
}
html.dark .mkt-manual-search__input {
    background: #1e293b; border-color: rgba(255,255,255,.08); color: #f1f5f9;
}
.mkt-manual-search__input:focus {
    outline: none;
    border-color: var(--mkt-accent, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.mkt-manual-search__results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 30;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    max-height: 300px;
    overflow-y: auto;
}
html.dark .mkt-manual-search__results {
    background: #1e293b; border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.mkt-manual-search__result {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--mkt-card-border, #e5e7eb);
    cursor: default;
}
html.dark .mkt-manual-search__result { border-color: rgba(255,255,255,.05); }
.mkt-manual-search__result:last-child { border-bottom: none; }
.mkt-manual-search__result:hover { background: rgba(124,58,237,.04); }
html.dark .mkt-manual-search__result:hover { background: rgba(168,85,247,.08); }

.mkt-manual-search__result-info {
    display: flex; flex-direction: column; min-width: 0;
}
.mkt-manual-search__result-name {
    font-size: .875rem; font-weight: 500;
    color: var(--mkt-text-1, #111827);
}
html.dark .mkt-manual-search__result-name { color: #f1f5f9; }
.mkt-manual-search__result-phone {
    font-size: .75rem;
    color: var(--mkt-text-3, #6b7280);
    font-family: ui-monospace, Menlo, Monaco, monospace;
}
html.dark .mkt-manual-search__result-phone { color: #94a3b8; }

.mkt-manual-search__actions {
    display: flex; gap: .25rem;
}
.mkt-manual-search__add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: rgba(5,150,105,.1);
    color: var(--mkt-success-text, #065f46);
    border: 1px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
html.dark .mkt-manual-search__add {
    background: rgba(16,185,129,.2); color: #a7f3d0;
}
.mkt-manual-search__add:hover { transform: scale(1.05); }
.mkt-manual-search__add--exclude {
    background: rgba(220,38,38,.1); color: #991b1b;
}
html.dark .mkt-manual-search__add--exclude {
    background: rgba(239,68,68,.2); color: #fecaca;
}
.mkt-manual-search__empty {
    padding: .75rem; font-size: .8125rem; text-align: center;
    color: var(--mkt-text-4, #9ca3af);
}

/* Manuel include/exclude iki sütun */
.mkt-manual-bucket {
    display: grid; grid-template-columns: 1fr; gap: .75rem;
    margin-top: .75rem;
}
@media (min-width: 640px) {
    .mkt-manual-bucket { grid-template-columns: 1fr 1fr; }
}
.mkt-manual-bucket__col {
    padding: .75rem;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem;
}
html.dark .mkt-manual-bucket__col {
    background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.06);
}
.mkt-manual-bucket__title {
    display: flex; align-items: center; gap: .375rem;
    font-size: .75rem; font-weight: 600;
    color: var(--mkt-text-2, #374151);
    margin-bottom: .5rem;
    text-transform: uppercase; letter-spacing: .04em;
}
html.dark .mkt-manual-bucket__title { color: #cbd5e1; }

/* ================================================================
   MARKETING — Etiket Sistemi (Tag Manager + Tag Chip)
   ================================================================ */

/* Tag chip — klinik etiketi görünümü (8 sabit palet) */
.mkt-tag-chip {
    display: inline-flex; align-items: center;
    padding: .25rem .625rem;
    font-size: .75rem; font-weight: 600;
    border-radius: .375rem; /* rounded-md */
    background: var(--tag-bg, rgba(100,116,139,.12));
    color: var(--tag-text, #334155);
}

/* 8 sabit renk paleti — light + dark her biri */
.mkt-tag-palette-emerald { --tag-bg: rgb(236 253 245); --tag-text: rgb(6 95 70); }
html.dark .mkt-tag-palette-emerald { --tag-bg: rgb(6 78 59 / .4); --tag-text: rgb(167 243 208); }
.mkt-tag-palette-blue    { --tag-bg: rgb(219 234 254); --tag-text: rgb(30 64 175); }
html.dark .mkt-tag-palette-blue    { --tag-bg: rgb(30 58 138 / .4); --tag-text: rgb(191 219 254); }
.mkt-tag-palette-violet  { --tag-bg: rgb(237 233 254); --tag-text: rgb(91 33 182); }
html.dark .mkt-tag-palette-violet  { --tag-bg: rgb(76 29 149 / .4); --tag-text: rgb(221 214 254); }
.mkt-tag-palette-rose    { --tag-bg: rgb(255 228 230); --tag-text: rgb(159 18 57); }
html.dark .mkt-tag-palette-rose    { --tag-bg: rgb(136 19 55 / .4); --tag-text: rgb(254 205 211); }
.mkt-tag-palette-amber   { --tag-bg: rgb(254 243 199); --tag-text: rgb(146 64 14); }
html.dark .mkt-tag-palette-amber   { --tag-bg: rgb(120 53 15 / .4); --tag-text: rgb(253 230 138); }
.mkt-tag-palette-slate   { --tag-bg: rgb(241 245 249); --tag-text: rgb(51 65 85); }
html.dark .mkt-tag-palette-slate   { --tag-bg: rgb(51 65 85 / .5); --tag-text: rgb(226 232 240); }
.mkt-tag-palette-cyan    { --tag-bg: rgb(207 250 254); --tag-text: rgb(14 116 144); }
html.dark .mkt-tag-palette-cyan    { --tag-bg: rgb(22 78 99 / .4); --tag-text: rgb(165 243 252); }
.mkt-tag-palette-pink    { --tag-bg: rgb(252 231 243); --tag-text: rgb(157 23 77); }
html.dark .mkt-tag-palette-pink    { --tag-bg: rgb(131 24 67 / .4); --tag-text: rgb(251 207 232); }

/* Tag Manager modal içi */
.mkt-tag-palette {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .25rem;
}
.mkt-tag-color-swatch {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--tag-bg, #cbd5e1);
    color: var(--tag-text, #334155);
    border: 2px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s, transform .1s, box-shadow .15s;
    padding: 0;
}
.mkt-tag-color-swatch:hover { transform: scale(1.08); }
.mkt-tag-color-swatch__tick {
    display: none;
    width: 14px; height: 14px;
    stroke-width: 3;
}
.mkt-tag-color-swatch.selected .mkt-tag-color-swatch__tick {
    display: inline-block;
}
.mkt-tag-color-swatch.selected {
    border-color: var(--mkt-accent, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124,58,237,.22);
}

.mkt-tag-manager-list {
    display: flex; flex-direction: column; gap: .5rem;
    max-height: 320px; overflow-y: auto;
    margin-top: 1rem;
}
.mkt-tag-manager-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem;
    background: var(--mkt-card-bg, #ffffff);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .75rem;
}
html.dark .mkt-tag-manager-item {
    background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.06);
}
.mkt-tag-manager-usage {
    flex: 1; font-size: .75rem;
    color: var(--mkt-text-3, #6b7280);
}
html.dark .mkt-tag-manager-usage { color: #94a3b8; }
.mkt-tag-manager-delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    color: var(--mkt-danger, #dc2626);
    border: 1px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
    transition: background .15s;
}
.mkt-tag-manager-delete:hover {
    background: rgba(220,38,38,.1);
}
html.dark .mkt-tag-manager-delete:hover {
    background: rgba(239,68,68,.18);
}
.mkt-tag-manager-loading {
    padding: 1.5rem; text-align: center;
    font-size: .875rem;
    color: var(--mkt-text-4, #9ca3af);
}
.mkt-tag-editor-row { margin-bottom: 1rem; }

/* Tag create row — 3 sütun düzeni (ad / palet / aksiyon) */
.mkt-tag-create {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .75rem;
    align-items: end;
    padding: .75rem;
    background: var(--mkt-surface, #f9fafb);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: .875rem;
}
html.dark .mkt-tag-create {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
}
.mkt-tag-create .ct-f { margin: 0; }
.mkt-tag-create__action { display: flex; align-items: stretch; }
.mkt-tag-create__action .ct-btn { height: 44px; }

@media (max-width: 720px) {
    .mkt-tag-create {
        grid-template-columns: 1fr;
    }
    .mkt-tag-create__action .ct-btn { width: 100%; justify-content: center; }
}

/* Tag manager separator */
.mkt-tag-manager-sep {
    height: 1px;
    margin: 1.25rem 0 .75rem;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--mkt-card-border, #e5e7eb) 20%,
        var(--mkt-card-border, #e5e7eb) 80%,
        transparent 100%);
}
html.dark .mkt-tag-manager-sep {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.08) 20%,
        rgba(255,255,255,.08) 80%,
        transparent 100%);
}

/* Patient detay tag editörü */
.mkt-tag-editor {
    display: flex; flex-direction: column; gap: .5rem;
}
.mkt-tag-editor__list {
    display: flex; flex-wrap: wrap; gap: .375rem;
}
.mkt-tag-editor__toggle {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .625rem;
    font-size: .75rem; font-weight: 500;
    background: var(--tag-bg, rgb(241 245 249));
    color: var(--tag-text, #334155);
    border: 1px solid transparent;
    border-radius: .375rem;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, box-shadow .15s;
}
.mkt-tag-editor__toggle:hover { opacity: 1; }
.mkt-tag-editor__toggle.selected {
    opacity: 1;
    box-shadow: inset 0 0 0 2px currentColor;
}
html.dark .mkt-tag-editor__toggle { opacity: .6; }
html.dark .mkt-tag-editor__toggle.selected { opacity: 1; }

.mkt-tag-editor__empty {
    font-size: .8125rem; font-style: italic;
    color: var(--mkt-text-4, #9ca3af);
    padding: .375rem 0;
}
.mkt-tag-editor__hint {
    font-size: .6875rem;
    color: var(--mkt-text-4, #9ca3af);
    margin-top: .5rem;
}
.mkt-tag-editor__link {
    color: var(--mkt-accent, #7c3aed);
    font-weight: 600;
    text-decoration: none;
}
.mkt-tag-editor__link:hover { text-decoration: underline; }

/* ================================================================
   MARKETING — Kayıtlı Gruplar (Favoriler) + Custom panel header
   ================================================================ */

.mkt-saved-groups {
    padding: .75rem 1rem;
    background: var(--mkt-surface, #f9fafb);
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    border-radius: 1rem;
}
html.dark .mkt-saved-groups {
    background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.06);
}
.mkt-saved-groups__head {
    display: flex; align-items: baseline; gap: .75rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.mkt-saved-groups__hint {
    font-size: .6875rem;
    color: var(--mkt-text-4, #9ca3af);
    font-style: italic;
}
.mkt-saved-groups__list {
    display: flex; flex-wrap: wrap; gap: .375rem;
}

.mkt-saved-group-chip {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--mkt-card-border, #e5e7eb);
    background: var(--mkt-card-bg, #ffffff);
    border-radius: .5rem;
    overflow: hidden;
    transition: border-color .15s;
}
html.dark .mkt-saved-group-chip {
    background: #1e293b; border-color: rgba(255,255,255,.08);
}
.mkt-saved-group-chip:hover { border-color: var(--mkt-accent, #7c3aed); }

.mkt-saved-group-chip__apply {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .375rem .625rem;
    font-size: .8125rem; font-weight: 500;
    color: var(--mkt-text-2, #374151);
    background: transparent;
    border: none;
    cursor: pointer;
}
html.dark .mkt-saved-group-chip__apply { color: #cbd5e1; }
.mkt-saved-group-chip__apply:hover { color: var(--mkt-accent, #7c3aed); }

.mkt-saved-group-chip__delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--mkt-card-border, #e5e7eb);
    background: transparent;
    color: var(--mkt-text-4, #9ca3af);
    cursor: pointer;
    transition: background .15s, color .15s;
}
html.dark .mkt-saved-group-chip__delete { border-left-color: rgba(255,255,255,.08); }
.mkt-saved-group-chip__delete:hover {
    background: rgba(220,38,38,.08);
    color: var(--mkt-danger, #dc2626);
}
html.dark .mkt-saved-group-chip__delete:hover {
    background: rgba(239,68,68,.15);
    color: #fecaca;
}

/* Custom panel header'ındaki "Kaydet" butonu için layout */
.mkt-custom-panel__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

#saveGroupModal .ct-modal { max-width: 480px; }
#tagManagerModal .ct-modal { max-width: 620px; }

/* ── B · Bold Navigation Shell tokens ── */
:root {
  --sidebar-bg-light:       #f4f2ed;
  --sidebar-bg-light-alt:   #ece9e2;
  --sidebar-border-light:   #e4e0d8;
  --sidebar-text-light:     #2a2720;
  --sidebar-muted-light:    #6b6558;
  --sidebar-kicker-light:   #928c7e;

  --topbar-bg-light:        rgba(250,249,247,0.78);
}

html.dark {
  --sidebar-bg:         #06060a;
  --sidebar-bg-alt:     #0c0c14;
  --sidebar-border:     #1a1a24;
  --sidebar-text:       #d4d4db;
  --sidebar-muted:      #7a7a87;
  --sidebar-kicker:     #52525c;

  --topbar-bg:          rgba(7,7,11,0.72);
}

/* ── Accent Color Override — --ct variable ile primary buton rengi güncellenir ── */
/* ThemeProvider applyAppearance() html style'ına --ct setiyle çağrılır            */
.page-toolbar__btn--primary {
    background: linear-gradient(180deg, var(--ct, #3b82f6) 0%, color-mix(in srgb, var(--ct, #3b82f6) 85%, #000) 100%);
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--ct, #3b82f6) 42%, transparent), inset 0 1px 0 rgba(255,255,255,0.18);
}
.page-toolbar__btn--primary:hover:not(.is-disabled) {
    box-shadow: 0 6px 18px -2px color-mix(in srgb, var(--ct, #3b82f6) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary {
    background-color: var(--ct, #3b82f6);
    border-color: color-mix(in srgb, var(--ct, #3b82f6) 80%, #000);
}
.btn-primary:hover {
    background-color: color-mix(in srgb, var(--ct, #3b82f6) 85%, #000);
}
.input-premium:focus, .ct-f__i:focus {
    border-color: color-mix(in srgb, var(--ct, #3b82f6) 50%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct, #3b82f6) 20%, transparent) !important;
}

/* ── Sidebar Overflow Fix (Madde 26 / yatay scroll önleme) ── */
aside#mainSidebar {
    overflow-x: hidden;
}
aside#mainSidebar.collapsed {
    overflow: hidden;
}
aside#mainSidebar.collapsed .nav-item span,
aside#mainSidebar.collapsed .sidebar-label,
aside#mainSidebar.collapsed .sidebar-section-title {
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* ── Active Nav Item — accent rengi ile vurgu ── */
/* Not: Razor view'da inline Tailwind class ile active durum ayarlanıyor.
   Bu stil JS veya data-active ile dinamik active set edildiğinde devreye girer. */
.nav-item.active,
.nav-item[data-active="true"] {
    background: rgba(var(--ct-rgb, 59, 130, 246), 0.1);
    color: var(--ct, #3b82f6);
    border-left: 2px solid var(--ct, #3b82f6);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL COMPONENT SYSTEM — Madde 18
   Tasarım dili bileşenleri: stat-card · data-table · empty-state · section-header
   ═══════════════════════════════════════════════════════════════ */

/* ── Stat Card ───────────────────────────────────────────────── */
.stat-card {
    background: var(--ct-bg, #ffffff);
    border: 1px solid var(--ct-brd, #e2e8f0);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
.stat-card__value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ct-t1, #0f172a);
    line-height: 1;
}
.stat-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ct-t3, #94a3b8);
    margin-top: 0.25rem;
}
.stat-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Data Table ──────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table thead tr {
    border-bottom: 1px solid var(--ct-brd, #e2e8f0);
}
.data-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ct-t3, #94a3b8);
}
.data-table tbody tr {
    border-bottom: 1px solid var(--ct-brd, #e2e8f0);
    transition: background 0.1s;
}
.data-table tbody tr:hover {
    background: var(--ct-bg2, #f8fafc);
}
.data-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--ct-t1, #0f172a);
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
html.dark .data-table thead tr {
    border-bottom-color: var(--ct-brd, #334155);
}
html.dark .data-table thead th {
    color: var(--ct-t3, #64748b);
}
html.dark .data-table tbody tr {
    border-bottom-color: var(--ct-brd, #334155);
}
html.dark .data-table tbody tr:hover {
    background: var(--ct-bg2, #1e293b);
}
html.dark .data-table tbody td {
    color: var(--ct-t1, #f8fafc);
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}
.empty-state__icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: var(--ct-t3, #94a3b8);
}
.empty-state__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ct-t1, #0f172a);
}
.empty-state__desc {
    font-size: 0.8125rem;
    color: var(--ct-t3, #94a3b8);
    margin-top: 0.25rem;
}
html.dark .empty-state__icon {
    color: var(--ct-t3, #64748b);
}
html.dark .empty-state__title {
    color: var(--ct-t1, #f8fafc);
}
html.dark .empty-state__desc {
    color: var(--ct-t3, #64748b);
}

/* ── Section Header (tab / bölüm içi H2) ────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.section-header__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--ct-bg2, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.section-header__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ct-t1, #0f172a);
}
.section-header__sub {
    font-size: 0.8125rem;
    color: var(--ct-t3, #94a3b8);
}
html.dark .section-header__icon {
    background: var(--ct-bg2, #1e293b);
}
html.dark .section-header__title {
    color: var(--ct-t1, #f8fafc);
}
html.dark .section-header__sub {
    color: var(--ct-t3, #64748b);
}