/* ============================================================
   RESTONOM — Taşkapı Lara
   Premium tasarım sistemi · Koyu & Açık tema · Responsive
   ============================================================ */

/* ============================================================
   1. TASARIM DEĞİŞKENLERİ (DESIGN TOKENS)
   ============================================================ */
:root {
    --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    'Helvetica Neue', Helvetica, Arial, sans-serif;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    --sidebar-w: 268px;
    --sidebar-w-collapsed: 78px;
    --topbar-h:  72px;

    --ease:       cubic-bezier(.2, .7, .2, 1);
    --ease-out:   cubic-bezier(.16, 1, .3, 1);
    --transition: 180ms var(--ease);

    --whatsapp:      #25D366;
    --whatsapp-dark: #1DA851;
    --purple: #8B5CF6;
    --pink:   #EC4899;
}

/* ---------- KOYU TEMA (varsayılan) ---------- */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg-base:     #09090D;
    --bg-surface:  #0D0D12;
    --bg-card:     #141419;
    --bg-card-2:   #111116;
    --bg-elevated: #1A1A21;
    --bg-input:    #0F0F14;
    --bg-hover:    rgba(255,255,255,.045);
    --bg-active:   rgba(255,255,255,.075);
    --sidebar-bg:  #0B0B0F;

    --accent:        #D2AE6D;
    --accent-light:  #EDD29C;
    --accent-dark:   #9C7A3E;
    --accent-text:   #E4C88F;
    --accent-ink:    #1A1408;
    --accent-glow:   rgba(210,174,109,.14);
    --accent-soft:   rgba(210,174,109,.09);
    --accent-gradient: linear-gradient(135deg, #F4DDA8 0%, #D2AE6D 45%, #A07C3C 100%);

    --text-primary:   #ECEBF1;
    --text-secondary: #A4A4B6;
    --text-muted:     #707085;

    --border:        rgba(255,255,255,.065);
    --border-light:  rgba(255,255,255,.1);
    --border-strong: rgba(255,255,255,.17);
    --border-accent: rgba(210,174,109,.36);

    --success: #34D399;  --success-soft: rgba(52,211,153,.12);  --success-text: #6EE7B7;
    --warning: #FBBF24;  --warning-soft: rgba(251,191,36,.12);  --warning-text: #FCD34D;
    --danger:  #F87171;  --danger-soft:  rgba(248,113,113,.12); --danger-text:  #FCA5A5;
    --info:    #60A5FA;  --info-soft:    rgba(96,165,250,.12);  --info-text:    #93C5FD;

    --overlay: rgba(4,4,7,.72);
    --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
    --shadow:      0 8px 30px rgba(0,0,0,.45);
    --shadow-lg:   0 24px 70px rgba(0,0,0,.6);
    --shadow-card: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 40px -26px rgba(0,0,0,.8);
    --shadow-accent: 0 10px 34px rgba(210,174,109,.22);
    --ring: 0 0 0 3px rgba(210,174,109,.32);

    --wa-screen: #0B141A;
    --wa-bubble: #005C4B;
    --wa-bubble-text: #E9EDEF;
    --chart-bar: #D2AE6D;
    --chart-bar-dim: rgba(210,174,109,.38);
    --chart-track: rgba(255,255,255,.05);
}

/* ---------- AÇIK TEMA ---------- */
[data-theme="light"] {
    color-scheme: light;

    --bg-base:     #F3F0E9;
    --bg-surface:  #F6F4EF;
    --bg-card:     #FFFFFF;
    --bg-card-2:   #FCFBF8;
    --bg-elevated: #FFFFFF;
    --bg-input:    #FFFFFF;
    --bg-hover:    rgba(30,24,10,.045);
    --bg-active:   rgba(30,24,10,.075);
    --sidebar-bg:  #FBFAF6;

    --accent:        #B08A45;
    --accent-light:  #8A6424;
    --accent-dark:   #7A5A22;
    --accent-text:   #85601F;
    --accent-ink:    #1A1408;
    --accent-glow:   rgba(176,138,69,.14);
    --accent-soft:   rgba(176,138,69,.09);
    --accent-gradient: linear-gradient(135deg, #E9CC8E 0%, #C9A25C 45%, #9E7837 100%);

    --text-primary:   #1C1B22;
    --text-secondary: #55546A;
    --text-muted:     #85849A;

    --border:        rgba(28,24,40,.085);
    --border-light:  rgba(28,24,40,.12);
    --border-strong: rgba(28,24,40,.2);
    --border-accent: rgba(176,138,69,.45);

    --success: #059669;  --success-soft: rgba(5,150,105,.1);   --success-text: #047857;
    --warning: #D97706;  --warning-soft: rgba(217,119,6,.1);   --warning-text: #B45309;
    --danger:  #DC2626;  --danger-soft:  rgba(220,38,38,.08);  --danger-text:  #B91C1C;
    --info:    #2563EB;  --info-soft:    rgba(37,99,235,.08);  --info-text:    #1D4ED8;

    --overlay: rgba(28,24,20,.42);
    --shadow-sm:   0 1px 2px rgba(28,24,20,.06);
    --shadow:      0 10px 30px rgba(28,24,20,.1);
    --shadow-lg:   0 28px 70px rgba(28,24,20,.18);
    --shadow-card: 0 1px 2px rgba(28,24,20,.04), 0 12px 32px -20px rgba(28,24,20,.16);
    --shadow-accent: 0 10px 28px rgba(176,138,69,.28);
    --ring: 0 0 0 3px rgba(176,138,69,.28);

    --wa-screen: #EFEAE2;
    --wa-bubble: #D9FDD3;
    --wa-bubble-text: #111B21;
    --chart-bar: #B08A45;
    --chart-bar-dim: rgba(176,138,69,.4);
    --chart-track: rgba(28,24,40,.05);
}

/* ============================================================
   2. TEMEL (RESET & BASE)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03";
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
input:focus, select:focus, textarea:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
code { font-family: var(--font-mono); font-size: .85em; }
kbd {
    font-family: var(--font-body);
    font-size: .68rem; font-weight: 600;
    padding: .1rem .38rem;
    border-radius: 5px;
    border: 1px solid var(--border-light);
    border-bottom-width: 2px;
    background: var(--bg-card-2);
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
}
::selection { background: var(--accent-glow); color: var(--text-primary); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.form-control:focus-visible, .search-wrap input:focus-visible { outline: none; }

/* KAYDIRMA ÇUBUĞU */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* YARDIMCI SINIFLAR */
.hidden { display: none !important; }
.flex-grow, .toolbar-spacer { flex: 1; }
.text-muted { color: var(--text-muted); }
.text-gold { color: var(--accent-text); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.mt-lg { margin-top: 1.25rem; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link {
    position: fixed; top: -100px; left: 1rem; z-index: 10000;
    background: var(--accent); color: var(--accent-ink);
    padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Gizlilik modu: telefon numaraları maskelenir */
.phone-mask { font-variant-numeric: tabular-nums; }

/* ============================================================
   3. MARKA ÖĞELERİ
   ============================================================ */
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--accent-gradient);
    color: var(--accent-ink);
    box-shadow: 0 8px 24px -8px rgba(210,174,109,.55), inset 0 1px 0 rgba(255,255,255,.4);
    flex-shrink: 0;
}
.brand-mark i, .brand-mark svg { width: 20px; height: 20px; stroke-width: 2.2; }
.brand-mark-lg { width: 60px; height: 60px; border-radius: 18px; }
.brand-mark-lg i, .brand-mark-lg svg { width: 28px; height: 28px; }
/* Yüklenen logo */
.brand-mark.has-logo { background: transparent; box-shadow: none; overflow: hidden; }
.brand-mark.has-logo > :not(.brand-logo-img) { display: none; }
.brand-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
em { font-style: italic; }

/* ============================================================
   4. AÇILIŞ EKRANI
   ============================================================ */
.boot-screen {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse 60% 40% at 50% 38%, var(--accent-soft), transparent 70%),
        var(--bg-base);
    transition: opacity .35s var(--ease), visibility .35s;
}
.boot-screen.is-done { opacity: 0; visibility: hidden; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 1rem; }
.boot-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; }
.boot-title em, .auth-brand-title em, .sidebar-logo-name em { color: var(--accent-text); }
.boot-bar { width: 160px; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.boot-bar span { display: block; width: 40%; height: 100%; background: var(--accent-gradient); border-radius: 3px; animation: bootSlide 1.2s var(--ease) infinite; }
.boot-text { font-size: .8rem; color: var(--text-muted); max-width: 340px; }
.boot-text.is-error { color: var(--danger-text); }
@keyframes bootSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* ============================================================
   5. GİRİŞ & 2FA EKRANLARI
   ============================================================ */
.auth-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-base);
    overflow-y: auto;
}
.auth-shell {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}
.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center;
    padding: 3.5rem clamp(2rem, 5vw, 5rem);
    background:
        radial-gradient(ellipse 80% 60% at 0% 100%, rgba(210,174,109,.22), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(210,174,109,.10), transparent 60%),
        linear-gradient(160deg, #15130F 0%, #0B0A08 55%, #080808 100%);
    color: #F3EFE6;
    border-right: 1px solid rgba(210,174,109,.14);
}
.auth-brand::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 60%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 70% at 30% 60%, #000 0%, transparent 75%);
    pointer-events: none;
}
.auth-brand-glow {
    position: absolute; width: 520px; height: 520px; right: -180px; top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237,210,156,.16), transparent 65%);
    filter: blur(10px);
    animation: floatGlow 14s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes floatGlow { from { transform: translate(0,0); } to { transform: translate(-60px, 70px); } }
.auth-brand-inner { position: relative; max-width: 520px; animation: fadeSlideUp .8s var(--ease-out); }
.auth-eyebrow {
    margin-top: 2rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: #D9BD86;
}
.auth-brand-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4.6vw, 4.1rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.03em;
    margin-top: .6rem;
}
.auth-brand-title em { color: #E8CD93; }
.auth-brand-text { margin-top: 1.1rem; font-size: 1.02rem; color: rgba(243,239,230,.66); max-width: 420px; line-height: 1.65; }
.auth-features { list-style: none; margin-top: 2.2rem; display: grid; gap: .85rem; }
.auth-features li { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: rgba(243,239,230,.82); }
.auth-feature-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(210,174,109,.1); border: 1px solid rgba(210,174,109,.22); color: #E8CD93;
    flex-shrink: 0;
}
.auth-feature-icon i, .auth-feature-icon svg { width: 16px; height: 16px; }
.equalizer { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 2.8rem; opacity: .75; }
.equalizer span {
    width: 4px; border-radius: 3px;
    background: linear-gradient(180deg, #F4DDA8, #A07C3C);
    animation: eq 1.4s ease-in-out infinite;
}
.equalizer span:nth-child(1)  { animation-delay: -.2s; }
.equalizer span:nth-child(2)  { animation-delay: -.9s; }
.equalizer span:nth-child(3)  { animation-delay: -.5s; }
.equalizer span:nth-child(4)  { animation-delay: -1.2s; }
.equalizer span:nth-child(5)  { animation-delay: -.3s; }
.equalizer span:nth-child(6)  { animation-delay: -.7s; }
.equalizer span:nth-child(7)  { animation-delay: -1.1s; }
.equalizer span:nth-child(8)  { animation-delay: -.1s; }
.equalizer span:nth-child(9)  { animation-delay: -.6s; }
.equalizer span:nth-child(10) { animation-delay: -1.3s; }
.equalizer span:nth-child(11) { animation-delay: -.4s; }
.equalizer span:nth-child(12) { animation-delay: -.8s; }
.equalizer span:nth-child(13) { animation-delay: -1s; }
.equalizer span:nth-child(14) { animation-delay: -.25s; }
@keyframes eq { 0%, 100% { height: 18%; } 50% { height: 100%; } }

.auth-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--accent-soft), transparent 70%),
        var(--bg-surface);
    gap: 1.5rem;
}
.auth-legal {
    display: flex; align-items: center; gap: .45rem;
    font-size: .74rem; color: var(--text-muted);
}
.auth-legal i, .auth-legal svg { width: 13px; height: 13px; }

.auth-screen-center {
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, var(--accent-glow), transparent 70%),
        var(--bg-base);
}
.auth-bg-ornament {
    position: fixed; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000, transparent 75%);
    opacity: .6;
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2.25rem 2.1rem;
    box-shadow: var(--shadow-lg);
    animation: fadeSlideUp .6s var(--ease-out);
}
.auth-screen-center .login-card { margin: auto; }
.login-card::before {
    content: '';
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 96px; height: 2px;
    background: var(--accent-gradient);
    border-radius: 0 0 3px 3px;
}
.otp-card { max-width: 440px; }
.login-logo { text-align: center; margin-bottom: 1.9rem; }
.login-logo-icon { margin: 0 auto 1.1rem; width: 52px; height: 52px; border-radius: 16px; }
.login-logo-icon i, .login-logo-icon svg { width: 24px; height: 24px; }
.login-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text-primary);
}
.login-subtitle { color: var(--text-secondary); font-size: .88rem; margin-top: .45rem; }
.login-error {
    display: flex; gap: .5rem; align-items: flex-start;
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger-text);
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    margin-bottom: 1rem;
    animation: shake .4s var(--ease);
}
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.login-footer {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    text-align: center; margin-top: 1.5rem; font-size: .78rem; color: var(--text-muted);
}
.login-footer i, .login-footer svg { width: 13px; height: 13px; }

.input-with-icon { position: relative; }
.input-with-icon > i, .input-with-icon > svg {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); width: 16px; height: 16px; pointer-events: none;
    transition: color var(--transition);
}
.input-with-icon:focus-within > i, .input-with-icon:focus-within > svg { color: var(--accent-text); }
.input-with-icon input { padding-left: 2.6rem; }
.input-with-icon.has-trailing input { padding-right: 2.8rem; }
.input-trailing-btn {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition);
}
.input-trailing-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.input-trailing-btn i, .input-trailing-btn svg { width: 16px; height: 16px; }

.check-row {
    display: flex; align-items: center; gap: .6rem;
    font-size: .82rem; color: var(--text-secondary);
    cursor: pointer; user-select: none;
    margin: -.15rem 0 1.1rem;
}
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid var(--border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all var(--transition);
    background: var(--bg-input);
}
.check-box i, .check-box svg { width: 12px; height: 12px; stroke-width: 3; opacity: 0; color: var(--accent-ink); }
.check-row input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check-row input:checked + .check-box i, .check-row input:checked + .check-box svg { opacity: 1; }
.check-row input:focus-visible + .check-box { box-shadow: var(--ring); }

.field-hint { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--text-muted); margin-top: .4rem; }
.field-hint i, .field-hint svg { width: 13px; height: 13px; }
.field-hint-warn { color: var(--warning-text); }
.field-hint-error { color: var(--danger-text); }
.field-hint-ok { color: var(--success-text); }

/* 2FA: kod kutuları */
.otp-label { display: flex !important; align-items: center; justify-content: space-between; }
.otp-field { position: relative; }
.otp-code-field {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.001;
    font-size: 16px;
    letter-spacing: 2.4em;
    color: transparent; caret-color: transparent;
    background: transparent; border: none;
    z-index: 2;
}
.otp-slots { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.otp-slot {
    width: 52px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-input);
    font-family: var(--font-display);
    font-size: 1.7rem; font-weight: 600;
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.otp-slot.filled { border-color: var(--border-strong); animation: popIn .18s var(--ease-out); }
.otp-slot.active { border-color: var(--accent); box-shadow: var(--ring); }
.otp-slot.active:empty::after {
    content: ''; width: 2px; height: 26px; background: var(--accent); border-radius: 2px;
    animation: caret 1s steps(1) infinite;
}
.otp-slot-sep { width: 10px; height: 2px; background: var(--border-strong); border-radius: 2px; }
.otp-field.has-error .otp-slot { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
@keyframes caret { 50% { opacity: 0; } }
@keyframes popIn { from { transform: scale(.88); } to { transform: none; } }

.totp-timer { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.form-group .totp-timer svg, .totp-timer svg { position: absolute; inset: 0; width: 30px; height: 30px; max-width: none; margin: 0; transform: rotate(-90deg); }
.totp-timer-track { fill: none; stroke: var(--border-light); stroke-width: 3; }
.totp-timer-ring { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 97.4; transition: stroke-dashoffset 1s linear, stroke .3s; }
.totp-timer.is-low .totp-timer-ring { stroke: var(--warning); }
#totp-timer-sec { font-size: .66rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

.otp-info {
    font-size: .8rem; color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: .65rem .9rem; margin-bottom: .75rem;
}
.otp-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; gap: .5rem; }
.otp-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--text-muted); }
.otp-hint i, .otp-hint svg { width: 14px; height: 14px; }

.totp-steps { list-style: none; margin: 0 0 1.25rem; display: grid; gap: .6rem; font-size: .84rem; color: var(--text-secondary); line-height: 1.5; }
.totp-steps li { display: flex; gap: .7rem; align-items: flex-start; }
.totp-steps strong { color: var(--text-primary); }
.step-num, .step-chip {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
    background: var(--accent-soft); color: var(--accent-text);
    border: 1px solid var(--border-accent);
    flex-shrink: 0;
}
.totp-qr {
    width: fit-content; margin: 0 auto 1rem;
    padding: 14px; background: #fff; /* QR okunabilirliği için beyaz zemin şart */
    border-radius: var(--radius);
    min-width: 212px; min-height: 212px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px var(--border-light), var(--shadow);
}
.totp-qr img, .totp-qr canvas { display: block; }
.totp-manual { font-size: .76rem; color: var(--text-secondary); text-align: center; margin-bottom: 1.4rem; }
.totp-manual-row { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .45rem; }
.totp-manual code {
    font-size: .8rem; white-space: nowrap; letter-spacing: .04em;
    color: var(--accent-text);
    background: var(--bg-input);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    padding: .4rem .7rem;
    user-select: all;
}

/* ============================================================
   6. UYGULAMA İSKELETİ
   ============================================================ */
#app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
    transition: grid-template-columns .25s var(--ease);
}
html.sidebar-collapsed #app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* ---------- KENAR ÇUBUĞU ---------- */
#sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    min-width: 0; height: 100dvh;
    z-index: 100;
    transition: transform .28s var(--ease-out), background-color .3s;
}
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: 1.2rem 1rem 1rem 1.15rem;
    min-height: var(--topbar-h);
}
.sidebar-logo { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sidebar-logo-icon { width: 38px; height: 38px; border-radius: 11px; }
.sidebar-logo-icon i, .sidebar-logo-icon svg { width: 18px; height: 18px; }
.sidebar-logo-text { min-width: 0; }
.sidebar-logo-name {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.22rem;
    letter-spacing: -.02em; line-height: 1.1;
    white-space: nowrap;
}
.sidebar-logo-sub { font-size: .66rem; color: var(--text-muted); margin-top: .2rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
/* Sol üst marka görünümü (Ayarlar → Marka): both · logo · text */
.sidebar-logo[data-brand-mode="logo"] .sidebar-logo-text { display: none; }
.sidebar-logo[data-brand-mode="text"] .sidebar-logo-icon { display: none; }
.sidebar-logo[data-brand-mode="text"] .sidebar-logo-name { white-space: normal; overflow-wrap: anywhere; }
/* Sadece logo: yüklenen logo daha büyük ve yatay (geniş) logolara uygun */
.sidebar-logo[data-brand-mode="logo"] .sidebar-logo-icon { width: 44px; height: 44px; border-radius: 12px; }
.sidebar-logo[data-brand-mode="logo"] .sidebar-logo-icon.has-logo { width: auto; min-width: 44px; max-width: 180px; height: 48px; border-radius: 12px; }
.sidebar-logo[data-brand-mode="logo"] .sidebar-logo-icon.has-logo .brand-logo-img { width: auto; max-width: 180px; height: 100%; }
/* Ayarlar önizlemesi */
.brand-preview {
    display: flex; align-items: center; min-height: 72px;
    padding: .9rem 1rem;
    background: var(--bg-card-2);
    border: 1px dashed var(--border-light, var(--border));
    border-radius: 12px;
}
.segmented-brand { display: flex; flex-wrap: wrap; }
.segmented-brand .segmented-opt { flex: 1; }
.segmented-brand .segmented-opt i, .segmented-brand .segmented-opt svg { width: 15px; height: 15px; }
.sidebar-collapse-btn {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); flex-shrink: 0;
    transition: all var(--transition);
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-collapse-btn i, .sidebar-collapse-btn svg { width: 16px; height: 16px; }

.sidebar-search {
    margin: 0 .85rem .5rem;
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-muted);
    font-size: .8rem;
    transition: all var(--transition);
}
.sidebar-search:hover { border-color: var(--border-light); color: var(--text-secondary); }
.sidebar-search i, .sidebar-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-search span { flex: 1; text-align: left; }

.sidebar-nav {
    flex: 1;
    padding: .5rem .75rem 1rem;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto; overflow-x: hidden;
}
.nav-section-label {
    font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
    padding: 1rem .75rem .4rem;
    white-space: nowrap;
}
.nav-item {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .62rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: .875rem; font-weight: 500;
    width: 100%; text-align: left;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.nav-item > i, .nav-item > svg { width: 18px; height: 18px; flex-shrink: 0; transition: color var(--transition); }
.nav-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active {
    background: linear-gradient(90deg, var(--accent-glow), var(--accent-soft) 70%, transparent);
    color: var(--text-primary);
    font-weight: 600;
}
.nav-item.active::before {
    content: '';
    position: absolute; left: -.75rem; top: 20%; bottom: 20%;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--accent-gradient);
}
.nav-item.active > i, .nav-item.active > svg { color: var(--accent-text); }
.nav-badge {
    font-style: normal;
    font-size: .68rem; font-weight: 700;
    padding: .05rem .45rem;
    border-radius: var(--radius-pill);
    background: var(--bg-active);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.nav-badge:empty { display: none; }
.nav-badge-accent { background: var(--accent); color: var(--accent-ink); }

.sidebar-footer { padding: .85rem; border-top: 1px solid var(--border); }
.sidebar-user {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem; border-radius: var(--radius);
    background: var(--bg-card-2); border: 1px solid var(--border);
}
.user-avatar {
    width: 36px; height: 36px; border-radius: 11px;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem; font-weight: 700; color: var(--accent-ink);
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .68rem; color: var(--text-muted); display: flex; align-items: center; gap: .25rem; }

/* Daraltılmış kenar çubuğu (masaüstü) */
html.sidebar-collapsed .sidebar-logo-text,
html.sidebar-collapsed .nav-item > span,
html.sidebar-collapsed .nav-section-label,
html.sidebar-collapsed .sidebar-search span,
html.sidebar-collapsed .sidebar-search kbd,
html.sidebar-collapsed .user-info,
html.sidebar-collapsed .sidebar-user .btn-icon-sm[data-action="openSettingsModal"] { display: none; }
html.sidebar-collapsed .sidebar-header { flex-direction: column; padding: 1rem .5rem; gap: .6rem; }
/* Daraltılmış menüde yazı gizlenir → logo her modda görünür ve kare kalır */
html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode] .sidebar-logo-icon { display: inline-flex; width: 38px; height: 38px; min-width: 0; max-width: none; border-radius: 11px; }
html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode] .sidebar-logo-icon .brand-logo-img { width: 100%; max-width: none; }
html.sidebar-collapsed .sidebar-search { margin: 0 .75rem .5rem; justify-content: center; padding: .6rem; }
html.sidebar-collapsed .nav-item { justify-content: center; padding: .7rem; }
html.sidebar-collapsed .nav-badge { position: absolute; top: 3px; right: 5px; font-size: .58rem; padding: 0 .3rem; }
html.sidebar-collapsed .sidebar-user { flex-direction: column; padding: .5rem .25rem; }
html.sidebar-collapsed .nav-item[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-light);
    padding: .35rem .65rem; border-radius: 8px;
    font-size: .76rem; font-weight: 500; white-space: nowrap;
    box-shadow: var(--shadow); z-index: 300; pointer-events: none;
}
html.sidebar-collapsed .sidebar-nav { overflow: visible; }

#sidebar-toggle { display: none; }
#sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(3px);
    z-index: 99;
    opacity: 0; transition: opacity .25s;
}

/* ---------- ANA İÇERİK ---------- */
#main-content {
    display: flex; flex-direction: column;
    min-width: 0; height: 100dvh;
    overflow: hidden;
    background: var(--bg-surface);
    outline: none;
}
#page-container { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }

/* ---------- ÜST ÇUBUK ---------- */
#topbar {
    height: var(--topbar-h); min-height: var(--topbar-h);
    padding: 0 2rem;
    display: flex; align-items: center; gap: 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    z-index: 50;
}
.topbar-titles { min-width: 0; }
.page-title {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 600;
    letter-spacing: -.02em; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-subtitle { font-size: .76rem; color: var(--text-muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-subtitle:empty { display: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.topbar-search {
    display: flex; align-items: center; gap: .55rem;
    width: 300px;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: .8rem;
    transition: all var(--transition);
}
.topbar-search:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.topbar-search i, .topbar-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.topbar-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-date { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
#topbar-actions { display: flex; align-items: center; gap: .35rem; }
#privacy-toggle.is-on { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-soft); }

/* ---------- SAYFALAR ---------- */
.page {
    display: none;
    max-width: 1480px;
    margin: 0 auto;
    padding: 1.75rem 2rem 3rem;
}
.page.active { display: block; animation: pageIn .35s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ============================================================
   7. KARTLAR
   ============================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color var(--transition), background-color .3s;
    min-width: 0;
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: .75rem; min-height: 58px;
}
.card-title {
    font-size: .9rem; font-weight: 600;
    display: flex; align-items: center; gap: .55rem;
    min-width: 0;
}
.card-title > i, .card-title > svg { width: 16px; height: 16px; color: var(--accent-text); flex-shrink: 0; }
.card-footer {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap;
}
.footer-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.footer-note i, .footer-note svg { width: 13px; height: 13px; }
.card-list-scroll { max-height: 420px; overflow-y: auto; }

/* ============================================================
   8. BUTONLAR
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .56rem 1.05rem;
    border-radius: var(--radius-sm);
    font-size: .855rem; font-weight: 600;
    line-height: 1.3;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), filter var(--transition);
    white-space: nowrap;
    border: 1px solid transparent;
    user-select: none;
}
.btn i, .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none !important; filter: none !important; }
.btn-primary {
    background: var(--accent-gradient);
    color: var(--accent-ink);
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px -8px rgba(210,174,109,.6);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, var(--shadow-accent); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(.97); }
.btn-secondary { background: var(--bg-card-2); color: var(--text-primary); border-color: var(--border-light); }
.btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-hover); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-hover); }
.btn-glass {
    background: rgba(255,255,255,.08); color: #F3EFE6;
    border-color: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255,255,255,.14); }
.btn-danger { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 20%, transparent); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { filter: brightness(1.08); }
.btn-whatsapp { background: var(--whatsapp); color: #06230F; box-shadow: 0 6px 18px -8px rgba(37,211,102,.7); }
.btn-whatsapp:hover:not(:disabled) { background: #2EE575; transform: translateY(-1px); }
.btn-full { width: 100%; }
.btn-lg { padding: .78rem 1.4rem; font-size: .92rem; border-radius: 12px; }
.btn-sm { padding: .36rem .7rem; font-size: .78rem; gap: .35rem; }
.btn-sm i, .btn-sm svg { width: 14px; height: 14px; }
.btn-icon { padding: .56rem; aspect-ratio: 1; }
.btn-sm.btn-icon { padding: .38rem; }
.btn-icon-sm {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    transition: all var(--transition);
    flex-shrink: 0;
}
.btn-icon-sm:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-hover); }
.btn-icon-sm i, .btn-icon-sm svg { width: 16px; height: 16px; }
.sidebar-user .btn-icon-sm { width: 32px; height: 32px; border-color: transparent; }
.sidebar-user .btn-icon-sm:hover { border-color: var(--border-light); }
.btn-close {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; color: var(--text-secondary);
    transition: all var(--transition);
}
.btn-close:hover { background: var(--danger-soft); color: var(--danger-text); }
.btn-close i, .btn-close svg { width: 17px; height: 17px; }
.btn .spin, .spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   9. FORMLAR
   ============================================================ */
.form-group { margin-bottom: 1.05rem; }
.form-group > label, .form-label {
    display: block;
    font-size: .78rem; font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .45rem;
}
.form-group label i, .form-group label svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: .2rem; color: var(--accent-text); }
.label-row { display: flex !important; align-items: center; justify-content: space-between; gap: .5rem; }
.label-row > span { display: inline-flex; align-items: center; gap: .25rem; }
.req { color: var(--accent-text); }
.form-control {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: .66rem .9rem;
    font-size: .875rem;
    transition: border-color var(--transition), box-shadow var(--transition), background-color .3s;
    min-height: 42px;
}
.form-control:hover { border-color: var(--border-strong); }
.form-control:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
textarea.form-control { resize: vertical; min-height: 90px; line-height: 1.55; }
select.form-control {
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    padding-right: 2.2rem;
    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='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
}
select.form-control option { background: var(--bg-elevated); color: var(--text-primary); }
input[type="date"].form-control, input[type="time"].form-control { font-variant-numeric: tabular-nums; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
.hint { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; display: block; }
.select-sm { padding-top: .45rem; padding-bottom: .45rem; font-size: .8rem; min-height: 38px; width: auto; min-width: 150px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: .4rem 0 .8rem; }

.color-options { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .25rem; }
.color-opt {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
}
.color-opt:hover { transform: scale(1.1); }
.color-opt.selected { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px currentColor; transform: scale(1.05); }

.var-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.var-chips-label { font-size: .72rem; color: var(--text-muted); margin-right: .15rem; }
.var-chip {
    font-family: var(--font-mono); font-size: .72rem;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: var(--accent-soft);
    border: 1px solid var(--border-accent);
    color: var(--accent-text);
    transition: all var(--transition);
    text-transform: none; letter-spacing: 0;
}
.var-chip:hover { background: var(--accent-glow); transform: translateY(-1px); }
.char-count { font-size: .72rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.char-count.is-warn { color: var(--warning-text); }

/* Şifre gücü göstergesi */
.strength { display: flex; gap: 4px; margin-top: .5rem; }
.strength span { flex: 1; height: 4px; border-radius: 4px; background: var(--border-light); transition: background var(--transition); }
.strength[data-level="1"] span:nth-child(-n+1) { background: var(--danger); }
.strength[data-level="2"] span:nth-child(-n+2) { background: var(--warning); }
.strength[data-level="3"] span:nth-child(-n+3) { background: #A3E635; }
.strength[data-level="4"] span:nth-child(-n+4) { background: var(--success); }

/* ============================================================
   10. ARAÇ ÇUBUĞU & ARAMA
   ============================================================ */
.toolbar, .page-actions {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 460px; }
.search-wrap > i, .search-wrap > svg {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); width: 16px; height: 16px; pointer-events: none;
}
.search-wrap input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: .56rem 2.4rem .56rem 2.45rem;
    font-size: .86rem;
    min-height: 38px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-wrap input:hover { border-color: var(--border-strong); }
.search-wrap input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.search-wrap input::placeholder { color: var(--text-muted); }
.search-wrap input::-webkit-search-cancel-button { cursor: pointer; }
.search-kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-wrap input:focus ~ .search-kbd, .search-wrap input:not(:placeholder-shown) ~ .search-kbd { display: none; }
.search-wrap-sm { min-width: 0; }
.search-wrap-sm input { min-height: 34px; padding-top: .4rem; padding-bottom: .4rem; font-size: .8rem; padding-right: .6rem; }

/* Segment kontrol (sekme) */
.segmented {
    display: inline-flex; gap: 3px;
    padding: 4px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.segmented-full { display: flex; margin: 1rem 1.25rem .25rem; }
.segmented-full .segmented-opt { flex: 1; }
.segmented-opt { position: relative; cursor: pointer; }
.segmented-opt input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-opt span, .tab {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 9px;
    font-size: .82rem; font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
    white-space: nowrap;
}
.tab i, .tab svg { width: 15px; height: 15px; }
.segmented-opt:hover span, .tab:hover { color: var(--text-primary); }
.segmented-opt input:checked + span, .tab.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-light);
}
.segmented-opt input:focus-visible + span { box-shadow: var(--ring); }
.tab-count {
    font-style: normal; font-size: .68rem; font-weight: 700;
    min-width: 20px; padding: 0 .35rem; border-radius: var(--radius-pill);
    background: var(--bg-active); color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.tab.active .tab-count { background: var(--accent); color: var(--accent-ink); }
.tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; }

/* ============================================================
   11. TABLO
   ============================================================ */
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th {
    padding: .75rem 1.1rem;
    text-align: left;
    font-size: .7rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .09em;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card-2);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.th-actions { text-align: right !important; }
.table td {
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text-primary);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover td { background: var(--bg-hover); }
.table td.td-actions { text-align: right; }
.empty-cell { text-align: center; color: var(--text-muted); padding: 3rem 1rem !important; }
.table-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border);
    font-size: .8rem;
}
.table-count { font-size: .8rem; color: var(--text-muted); }

.cell-person { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cell-person-text { min-width: 0; }
.cell-person-name { font-weight: 600; white-space: nowrap; }
.cell-person-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.avatar {
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; letter-spacing: .02em;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar-sm { width: 28px; height: 28px; border-radius: 8px; font-size: .68rem; }
.phone-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--text-primary);
    padding: .25rem .55rem; margin-left: -.55rem;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: all var(--transition);
}
.phone-btn i, .phone-btn svg { width: 14px; height: 14px; color: var(--whatsapp); }
.phone-btn:hover { background: color-mix(in srgb, var(--whatsapp) 12%, transparent); color: var(--text-primary); }
.date-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.soon-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    margin-left: .35rem;
    font-size: .66rem; font-weight: 700;
    padding: .05rem .4rem; border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--border-accent);
}
.soon-badge.is-today { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.note-cell { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .8rem; }

.pager { display: flex; align-items: center; gap: .3rem; }
.pager-btn {
    min-width: 32px; height: 32px; padding: 0 .5rem;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    transition: all var(--transition);
}
.pager-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.pager-btn.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-accent); }
.pager-btn:disabled { opacity: .35; cursor: not-allowed; }
.pager-btn i, .pager-btn svg { width: 15px; height: 15px; }

.skeleton-rows { display: grid; gap: .7rem; max-width: 520px; margin: 0 auto; }
.skeleton-rows span, .skeleton {
    display: block; height: 14px; border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-hover) 0%, var(--bg-active) 50%, var(--bg-hover) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-rows span:nth-child(2) { width: 80%; }
.skeleton-rows span:nth-child(3) { width: 60%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   12. ROZETLER
   ============================================================ */
.badge-group {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .55rem;
    border-radius: var(--radius-pill);
    font-size: .7rem; font-weight: 600;
    margin: .12rem .2rem .12rem 0;
    white-space: nowrap;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}
.badge-group .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.badge-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: .15rem .6rem;
    border-radius: var(--radius-pill);
    font-size: .74rem; font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.badge-pill.is-accent { background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-accent); }
.badge-pill.is-success { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.action-btns { display: inline-flex; gap: .3rem; justify-content: flex-end; }

/* ============================================================
   13. PANEL (DASHBOARD)
   ============================================================ */
.hero-card {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.9rem 2rem;
    border-radius: var(--radius-xl);
    margin-bottom: 1.25rem;
    color: #F5F1E8;
    background:
        radial-gradient(ellipse 60% 120% at 100% 0%, rgba(237,210,156,.28), transparent 60%),
        radial-gradient(ellipse 50% 90% at 0% 100%, rgba(160,124,60,.35), transparent 65%),
        linear-gradient(120deg, #1B1710 0%, #120F0A 45%, #0D0C0A 100%);
    border: 1px solid rgba(210,174,109,.22);
    box-shadow: var(--shadow-card);
}
.hero-content { position: relative; z-index: 1; min-width: 0; }
.hero-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #D9BD86; }
.hero-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-top: .35rem; }
.hero-title em { color: #E8CD93; }
.hero-text { margin-top: .5rem; font-size: .92rem; color: rgba(245,241,232,.7); max-width: 560px; }
.hero-text strong { color: #F5F1E8; }
.hero-actions { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-ornament {
    position: absolute; right: -40px; bottom: -60px;
    width: 340px; height: 340px; border-radius: 50%;
    border: 1px solid rgba(237,210,156,.12);
    box-shadow: 0 0 0 40px rgba(237,210,156,.03), 0 0 0 80px rgba(237,210,156,.02);
    pointer-events: none;
}

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card {
    position: relative; overflow: hidden;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.3rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    min-width: 0;
}
.stat-card::after {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, var(--stat-glow, transparent), transparent 70%);
    pointer-events: none;
}
button.stat-card:hover { transform: translateY(-2px); border-color: var(--border-light); box-shadow: var(--shadow); }
.stat-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-icon i, .stat-icon svg { width: 21px; height: 21px; }
.stat-blue   { --stat-glow: rgba(96,165,250,.14); }
.stat-purple { --stat-glow: rgba(167,139,250,.14); }
.stat-gold   { --stat-glow: rgba(210,174,109,.16); }
.stat-pink   { --stat-glow: rgba(244,114,182,.14); }
.stat-blue .stat-icon   { background: rgba(96,165,250,.13);  color: #60A5FA; }
.stat-purple .stat-icon { background: rgba(167,139,250,.13); color: #A78BFA; }
.stat-gold .stat-icon   { background: var(--accent-soft);    color: var(--accent-text); }
.stat-pink .stat-icon   { background: rgba(244,114,182,.13); color: #F472B6; }
[data-theme="light"] .stat-blue .stat-icon   { color: #2563EB; }
[data-theme="light"] .stat-purple .stat-icon { color: #7C3AED; }
[data-theme="light"] .stat-pink .stat-icon   { color: #DB2777; }
.stat-body { min-width: 0; }
.stat-val { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .78rem; color: var(--text-secondary); margin-top: .4rem; font-weight: 500; }
.stat-sub { font-size: .7rem; color: var(--text-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dashboard-grid + .dashboard-grid { margin-top: 1rem; }

/* Liste satırları */
.empty-sm {
    padding: 2rem 1.25rem; text-align: center; color: var(--text-muted); font-size: .85rem;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.empty-sm i, .empty-sm svg { width: 26px; height: 26px; opacity: .55; }
.empty-state {
    padding: 3rem 1.5rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    color: var(--text-muted);
}
.empty-state-icon {
    width: 64px; height: 64px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-text);
    border: 1px solid var(--border-accent);
    margin-bottom: .4rem;
}
.empty-state-icon i, .empty-state-icon svg { width: 28px; height: 28px; }
.empty-state h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text-primary); }
.empty-state p { font-size: .85rem; max-width: 360px; }
.empty-state .btn { margin-top: .6rem; }

.sd-item, .ev-item, .cust-item, .list-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    min-width: 0;
}
.sd-item:hover, .list-row:hover { background: var(--bg-hover); }
.sd-item:last-child, .ev-item:last-child, .cust-item:last-child, .list-row:last-child { border-bottom: none; }
.sd-avatar {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0;
}
.sd-info { flex: 1; min-width: 0; }
.sd-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.when-chip {
    font-size: .7rem; font-weight: 700;
    padding: .15rem .5rem; border-radius: var(--radius-pill);
    background: var(--bg-active); color: var(--text-secondary);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.when-chip.is-today { background: var(--success-soft); color: var(--success-text); }
.when-chip.is-soon { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- GRAFİKLER ---------- */
.chart-box { padding: 1.1rem 1.25rem 1rem; }
.bar-chart {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    height: 170px;
    padding-top: 1.4rem;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}
.bar-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; }
.bar-col::before { content: ''; position: absolute; inset: 0 -3px; border-radius: 6px; transition: background var(--transition); }
.bar-col:hover::before, .bar-col:focus-visible::before { background: var(--bg-hover); }
.bar {
    position: relative;
    width: 100%; max-width: 22px;
    border-radius: 4px 4px 0 0;
    background: var(--chart-bar-dim);
    transition: height .6s var(--ease-out), background var(--transition);
    min-height: 2px;
}
.bar-col.is-current .bar { background: var(--chart-bar); }
.bar-col.is-zero .bar { background: var(--chart-track); }
.bar-value {
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    font-size: .68rem; font-weight: 700; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bar-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: .45rem; }
.bar-labels span { text-align: center; font-size: .64rem; color: var(--text-muted); font-weight: 500; }
.bar-labels span.is-current { color: var(--text-primary); font-weight: 700; }
.chart-tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    padding: .35rem .6rem; border-radius: 8px;
    font-size: .72rem; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 5;
}
.chart-tip strong { font-variant-numeric: tabular-nums; }
.bar-col:hover .chart-tip, .bar-col:focus-visible .chart-tip, .hbar-row:hover .chart-tip, .hbar-row:focus-visible .chart-tip { opacity: 1; transform: translate(-50%, 0); }
.chart-caption { font-size: .74rem; color: var(--text-muted); margin-top: .8rem; }

.hbar-list { display: grid; gap: .8rem; }
.hbar-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center; outline: none; }
.hbar-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 500; min-width: 0; }
.hbar-label span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-label .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hbar-val { font-size: .78rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hbar-track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 0 4px 4px 0; transition: width .7s var(--ease-out); }
.hbar-row .chart-tip { bottom: calc(100% + 2px); }

/* ============================================================
   14. GRUPLAR
   ============================================================ */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.group-card {
    position: relative; overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1.15rem;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex; flex-direction: column;
}
.group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-light); }
.group-card::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
    background: var(--group-color, var(--accent));
}
.group-card::after {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--group-color, var(--accent)) 18%, transparent), transparent 70%);
    pointer-events: none;
}
.group-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; position: relative; z-index: 1; }
.group-card-title { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.group-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--group-color, var(--accent)) 16%, transparent);
    color: var(--group-color, var(--accent));
    flex-shrink: 0;
}
.group-icon i, .group-icon svg { width: 18px; height: 18px; }
.group-card-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.group-card-count { font-size: .76rem; color: var(--text-muted); margin-top: .15rem; }
.group-members { display: flex; align-items: center; min-height: 32px; position: relative; z-index: 1; flex: 1; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--bg-card); margin-left: -6px; font-size: .62rem; letter-spacing: 0; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-more { background: var(--bg-active); color: var(--text-secondary); }
.group-card-footer { margin-top: 1rem; display: flex; gap: .5rem; position: relative; z-index: 1; }
.group-dot, .group-dot-sm { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   15. TAKVİM
   ============================================================ */
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; min-width: 170px; text-align: center; letter-spacing: -.01em; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-left: .5rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text-secondary); }
.cal-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.cal-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.cal-header-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--bg-card-2); border-bottom: 1px solid var(--border); }
.cal-header-row > div { padding: .7rem; text-align: center; font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day {
    position: relative;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-height: 112px;
    padding: .5rem .5rem .45rem;
    cursor: pointer;
    transition: background var(--transition);
    min-width: 0;
    display: flex; flex-direction: column;
    outline: none;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--bg-hover); }
.cal-day:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.other-month .cal-day-num, .cal-day.other-month .cal-events { opacity: .35; }
.cal-day.is-weekend:not(.other-month) { background: color-mix(in srgb, var(--bg-hover) 50%, transparent); }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.cal-day-num {
    font-size: .8rem; font-weight: 600;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}
.cal-day.today .cal-day-num { background: var(--accent-gradient); color: var(--accent-ink); font-weight: 700; box-shadow: 0 4px 12px -4px rgba(210,174,109,.6); }
.cal-day.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--border-accent); }
.cal-day-special { font-size: .7rem; display: inline-flex; align-items: center; gap: .15rem; color: var(--text-muted); font-weight: 600; }
.cal-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ev-dot {
    font-size: .68rem; font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 2px solid currentColor;
}
.cal-ev-more { font-size: .66rem; color: var(--text-muted); padding-left: 4px; font-weight: 600; }

/* ETKİNLİK LİSTESİ */
.ev-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    min-width: 0;
}
.ev-row:last-child { border-bottom: none; }
.ev-row:hover { background: var(--bg-hover); }
.ev-date-box {
    width: 48px; flex-shrink: 0; text-align: center;
    border-radius: 12px; padding: .35rem 0;
    background: var(--bg-card-2); border: 1px solid var(--border-light);
}
.ev-date-box .d { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ev-date-box .m { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ev-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ev-info { flex: 1; min-width: 0; }
.ev-title { font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.ev-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.ev-meta i, .ev-meta svg { width: 12px; height: 12px; }
.ev-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.ev-desc { font-size: .78rem; color: var(--text-secondary); margin-top: .3rem; overflow-wrap: anywhere; }
.ev-badge { padding: .18rem .6rem; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 600; white-space: nowrap; }

/* ============================================================
   16. WHATSAPP
   ============================================================ */
.wa-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.wa-pad { padding: .75rem 1.25rem 0; }
.wa-manual-tools { display: flex; align-items: center; gap: .3rem; padding: .75rem 1.25rem .5rem; }
.wa-manual-tools .search-wrap { flex: 1; }
.customer-check-list { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--border); }
.check-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 1.25rem;
    font-size: .82rem; color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.check-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.check-item input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.check-item .ci-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-item .ci-phone { color: var(--text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.check-item.is-disabled { opacity: .5; }
.recipient-count {
    display: flex; align-items: center; gap: .5rem;
    margin-top: 1rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: .82rem; font-weight: 600;
    color: var(--accent-text);
    background: var(--accent-soft);
}
.recipient-count i, .recipient-count svg { width: 15px; height: 15px; }
.wa-compose-body { padding: 1.1rem 1.25rem 1.25rem; }
.template-row { display: flex; gap: .45rem; }
.template-row .form-control { flex: 1; }
.wa-preview {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.wa-preview-head {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem .85rem;
    font-size: .74rem; font-weight: 600; color: var(--text-secondary);
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
}
.wa-preview-head i, .wa-preview-head svg { width: 14px; height: 14px; }
.wa-preview-screen {
    padding: 1rem;
    min-height: 120px;
    display: flex; justify-content: flex-end; align-items: flex-start;
    background-color: var(--wa-screen);
    background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 16%, transparent) 1px, transparent 1px);
    background-size: 14px 14px;
}
.wa-bubble {
    position: relative;
    max-width: 88%;
    background: var(--wa-bubble);
    color: var(--wa-bubble-text);
    padding: .5rem .65rem .35rem;
    border-radius: 10px 0 10px 10px;
    font-size: .84rem; line-height: 1.45;
    white-space: pre-wrap; overflow-wrap: anywhere;
    box-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.wa-bubble::after {
    content: ''; position: absolute; right: -7px; top: 0;
    border-left: 8px solid var(--wa-bubble); border-bottom: 8px solid transparent;
}
.wa-bubble img { border-radius: 8px; margin-bottom: .4rem; max-height: 180px; width: 100%; object-fit: cover; background: rgba(0,0,0,.1); }
.wa-bubble-time { display: block; text-align: right; font-size: .62rem; opacity: .6; margin-top: .15rem; }
.wa-bubble .text-muted { color: inherit; opacity: .55; }

.progress { height: 4px; background: var(--border); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--whatsapp), #7CF0A8); transition: width .35s var(--ease); }
.send-actions { padding: 1rem 1.25rem; display: grid; gap: .5rem; border-bottom: 1px solid var(--border); }
.send-note { display: block; font-size: .72rem; line-height: 1.45; }
.send-list { max-height: 520px; overflow-y: auto; }
.send-row {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
    transition: background var(--transition);
}
.send-row:last-child { border-bottom: none; }
.send-row.is-sent { background: color-mix(in srgb, var(--success) 5%, transparent); }
.send-row.is-failed { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.send-row-info { flex: 1; min-width: 0; }
.send-row-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-row-phone { color: var(--text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.send-row-error { color: var(--danger-text); font-size: .7rem; margin-top: .1rem; overflow-wrap: anywhere; }
.btn-send-wa {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .34rem .75rem;
    background: var(--whatsapp); color: #06230F;
    border-radius: var(--radius-pill);
    font-size: .74rem; font-weight: 700;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-send-wa:hover:not(:disabled) { background: #2EE575; transform: translateY(-1px); }
.btn-send-wa:disabled { cursor: default; }
.btn-send-wa.sent { background: var(--success-soft); color: var(--success-text); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.btn-send-wa.is-loading { opacity: .7; }
.btn-send-wa i, .btn-send-wa svg { width: 13px; height: 13px; }
.no-phone { color: var(--danger-text); font-size: .72rem; font-weight: 600; white-space: nowrap; }

/* ============================================================
   17. ÖZEL GÜNLER
   ============================================================ */
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sd-list-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    min-width: 0;
}
.sd-list-item:hover { background: var(--bg-hover); }
.sd-list-item:last-child { border-bottom: none; }
.sd-emoji {
    font-size: 1.3rem; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card-2); border: 1px solid var(--border-light);
}
.sd-date { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sd-actions { margin-left: auto; display: flex; gap: .35rem; flex-shrink: 0; }
.templates-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem 1.25rem .25rem; }

/* ============================================================
   18. KULLANICILAR & GÜVENLİK
   ============================================================ */
.admin-banner, .banner {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius);
    font-size: .84rem;
    margin-bottom: 1.1rem;
    line-height: 1.5;
}
.admin-banner { background: color-mix(in srgb, var(--purple) 10%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 26%, transparent); color: var(--text-primary); }
.admin-banner > i, .admin-banner > svg { width: 18px; height: 18px; color: #A78BFA; flex-shrink: 0; margin-top: .1rem; }
.banner > i, .banner > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .1rem; }
.banner strong { display: block; }
.banner-warning { background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.banner-warning > i, .banner-warning > svg { color: var(--warning); }
.banner-info { background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); }
.banner-info > i, .banner-info > svg { color: var(--info); }
.banner code { background: var(--bg-active); padding: .05rem .35rem; border-radius: 5px; }

.role-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .7rem;
    border-radius: var(--radius-pill);
    font-size: .74rem; font-weight: 600;
    white-space: nowrap;
}
.role-badge i, .role-badge svg { width: 13px; height: 13px; }
.role-admin   { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--border-accent); }
.role-yetkili { background: var(--info-soft); color: var(--info-text); border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); }
.role-select {
    appearance: none; -webkit-appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    padding: .3rem 1.9rem .3rem .8rem;
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center;
    transition: border-color var(--transition);
}
.role-select:hover { border-color: var(--border-strong); }
.role-select:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.you-badge {
    display: inline-flex; align-items: center;
    padding: .1rem .5rem;
    border-radius: var(--radius-pill);
    font-size: .64rem; font-weight: 700; letter-spacing: .02em;
    background: var(--success-soft); color: var(--success-text);
    border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
    margin-left: .4rem; vertical-align: middle;
}
.you-badge.is-super { background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-accent); }

.security-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
.audit-row { display: flex; gap: .8rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); font-size: .8rem; }
.audit-row:last-child { border-bottom: none; }
.audit-icon {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-active); color: var(--text-secondary);
}
.audit-icon i, .audit-icon svg { width: 14px; height: 14px; }
.audit-icon.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.audit-icon.is-success { background: var(--success-soft); color: var(--success-text); }
.audit-icon.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.audit-main { flex: 1; min-width: 0; }
.audit-title { font-weight: 600; }
.audit-meta { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; overflow-wrap: anywhere; }
.sec-row { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--border); }
.sec-row:last-child { border-bottom: none; }
.sec-status {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.sec-status i, .sec-status svg { width: 14px; height: 14px; stroke-width: 2.6; }
.sec-status.ok   { background: var(--success-soft); color: var(--success); }
.sec-status.warn { background: var(--warning-soft); color: var(--warning); }
.sec-status.bad  { background: var(--danger-soft);  color: var(--danger); }
.sec-title { font-size: .84rem; font-weight: 600; }
.sec-desc { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; line-height: 1.45; }

/* ============================================================
   19. MODAL & DİYALOG
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(6px) saturate(1.2);
    display: flex; align-items: center; justify-content: center;
    z-index: 500;
    padding: 1rem;
    animation: fadeIn .2s var(--ease);
}
.dialog-overlay { z-index: 700; }
.modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    width: 100%; max-width: 580px;
    max-height: min(90dvh, 860px);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalIn .28s var(--ease-out);
    overflow: hidden;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
.modal-lg { max-width: 720px; }
.modal-sm { max-width: 440px; }
.modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.modal-body { padding: 1.4rem 1.5rem 1.5rem; overflow-y: auto; }
.modal-footer {
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: .6rem;
    flex-shrink: 0;
}
.modal-body .modal-footer {
    position: sticky; bottom: -1.5rem;
    margin: 1.25rem -1.5rem -1.5rem !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--border) !important;
    background: var(--bg-elevated);
}
.dialog { max-width: 440px; }
.dialog-body { display: flex; gap: 1rem; padding: 1.5rem 1.5rem 1.1rem; }
.dialog-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-text);
}
.dialog-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.dialog-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.dialog-icon i, .dialog-icon svg { width: 22px; height: 22px; }
.dialog-content { flex: 1; min-width: 0; }
.dialog-title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.25; }
.dialog-message { font-size: .86rem; color: var(--text-secondary); margin-top: .4rem; white-space: pre-line; overflow-wrap: anywhere; }
#dialog-input-wrap { margin-top: .85rem; }
.dialog-footer { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem 1.35rem; }

.group-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .4rem; margin-top: .35rem; }
.group-check-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition);
    font-size: .82rem;
    min-width: 0;
}
.group-check-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-check-item:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.group-check-item:has(input:checked) { border-color: var(--border-accent); background: var(--accent-soft); }
.group-check-item input { accent-color: var(--accent); }

.info-box {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--info-soft);
    border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem; margin-bottom: 1.2rem;
    font-size: .82rem; color: var(--text-primary);
}
.info-box i, .info-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .1rem; color: var(--info); }
.warn-box { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.warn-box i, .warn-box svg { color: var(--warning); }

.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.radio-card {
    position: relative; display: flex; gap: .6rem; align-items: flex-start;
    padding: .75rem .85rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border-light); cursor: pointer;
    transition: all var(--transition);
}
.radio-card:hover { border-color: var(--border-strong); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring); }
.radio-card input { accent-color: var(--accent); margin-top: .2rem; }
.radio-card strong { display: block; font-size: .85rem; }
.radio-card small { display: block; color: var(--text-muted); font-size: .74rem; line-height: 1.4; }

/* NOTLAR (etkinlik modalı) */
.notes-section { margin-top: .4rem; }
.note-item {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .55rem .6rem .55rem .8rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .4rem;
    font-size: .82rem; color: var(--text-secondary);
}
.note-item-text { flex: 1; overflow-wrap: anywhere; padding-top: .15rem; }
.add-note-row { display: flex; gap: .45rem; margin-top: .45rem; }
.add-note-row input { flex: 1; }

/* Ayarlar */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.settings-row:last-of-type { border-bottom: none; }
.settings-row strong { display: block; font-size: .88rem; }
.settings-row small { display: block; font-size: .76rem; color: var(--text-muted); }
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; margin: 0; }
.switch span {
    position: absolute; inset: 0; border-radius: 24px;
    background: var(--border-strong); transition: background var(--transition);
}
.switch span::after {
    content: ''; position: absolute; left: 3px; top: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--transition);
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }
.shortcut-list { display: grid; gap: .1rem; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.shortcut-row:last-child { border-bottom: none; }
.shortcut-row span:last-child { display: inline-flex; gap: .25rem; }

/* ============================================================
   20. KOMUT PALETİ
   ============================================================ */
.cmdk-overlay {
    position: fixed; inset: 0; z-index: 800;
    background: var(--overlay);
    backdrop-filter: blur(6px);
    display: flex; justify-content: center; align-items: flex-start;
    padding: 12vh 1rem 1rem;
    animation: fadeIn .15s var(--ease);
}
.cmdk {
    width: 100%; max-width: 640px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn .2s var(--ease-out);
}
.cmdk-input-row { display: flex; align-items: center; gap: .75rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--border); }
.cmdk-input-row i, .cmdk-input-row svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
#cmdk-input { flex: 1; background: none; border: none; font-size: 1rem; color: var(--text-primary); min-width: 0; }
#cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-list { max-height: 380px; overflow-y: auto; padding: .4rem; }
.cmdk-group { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding: .7rem .75rem .35rem; }
.cmdk-item {
    display: flex; align-items: center; gap: .75rem;
    width: 100%; text-align: left;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .88rem;
    color: var(--text-primary);
    cursor: pointer;
}
.cmdk-item i, .cmdk-item svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.cmdk-item .cmdk-sub { margin-left: auto; font-size: .74rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmdk-item.is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--border-accent); }
.cmdk-item.is-active i, .cmdk-item.is-active svg { color: var(--accent-text); }
.cmdk-empty { padding: 2rem; text-align: center; color: var(--text-muted); font-size: .86rem; }
.cmdk-footer { display: flex; gap: 1rem; padding: .6rem 1rem; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text-muted); background: var(--bg-card-2); }
.cmdk-footer span { display: inline-flex; align-items: center; gap: .25rem; }

/* ============================================================
   21. BİLDİRİMLER (TOAST)
   ============================================================ */
#toast-container {
    position: fixed; bottom: 1.25rem; right: 1.25rem;
    z-index: 10002;
    display: flex; flex-direction: column; gap: .5rem;
    align-items: flex-end;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
}
.toast {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem .9rem .9rem 1rem;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    width: 380px; max-width: 100%;
    animation: toastIn .35s var(--ease-out);
    font-size: .85rem; font-weight: 500;
    color: var(--text-primary);
    pointer-events: auto;
}
.toast.is-leaving { animation: toastOut .25s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px) scale(.97); } }
.toast > i, .toast > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .05rem; }
.toast-msg { flex: 1; line-height: 1.45; overflow-wrap: anywhere; }
.toast-close { color: var(--text-muted); width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.toast-close i, .toast-close svg { width: 14px; height: 14px; }
.toast-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; animation: toastProgress linear forwards; opacity: .7; }
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.success > i, .toast.success > svg { color: var(--success); } .toast.success .toast-progress { background: var(--success); }
.toast.error   > i, .toast.error   > svg { color: var(--danger); }  .toast.error   .toast-progress { background: var(--danger); }
.toast.info    > i, .toast.info    > svg { color: var(--info); }    .toast.info    .toast-progress { background: var(--info); }
.toast.warning > i, .toast.warning > svg { color: var(--warning); } .toast.warning .toast-progress { background: var(--warning); }
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--info); }
.toast.warning { border-left: 3px solid var(--warning); }

[data-theme="light"] .stat-card::after { opacity: .4; }
[data-theme="light"] .group-card::after { opacity: .5; }

/* Müşteri tablosu: işlem sütunu her zaman görünür (yatay kaydırmada sağa sabit) */
@media (min-width: 721px) {
    .table-customers th, .table-customers td { padding-left: .85rem; padding-right: .85rem; }
    .table-customers th.th-actions, .table-customers td.td-actions {
        position: sticky; right: 0; z-index: 2;
        background: var(--bg-card);
        box-shadow: -10px 0 14px -12px rgba(0,0,0,.35);
    }
    .table-customers th.th-actions { background: var(--bg-card-2); z-index: 3; }
    .table-customers tbody tr:hover td.td-actions { background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-card)); }
}
@media (max-width: 1380px) and (min-width: 721px) {
    .table-customers .note-cell { max-width: 120px; }
}

/* Ek bileşenler */
.link-btn { font-size: .76rem; font-weight: 600; color: var(--accent-text); padding: 0; text-transform: none; letter-spacing: 0; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-error.is-info {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
    color: var(--text-primary);
    animation: fadeIn .3s var(--ease);
}
.role-pending { background: var(--warning-soft); color: var(--warning-text); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }

/* ============================================================
   22. YÖNETİCİYE ÖZEL GÖRÜNÜRLÜK
   ============================================================ */
.admin-only { display: none !important; }
#app.is-admin .admin-only { display: inline-flex !important; }
#app.is-admin .nav-item.admin-only { display: flex !important; }
#app.is-admin .nav-section-label.admin-only { display: block !important; }
.nav-divider { height: 1px; background: var(--border); margin: .6rem .75rem .1rem; }
#app.is-admin .nav-divider.admin-only { display: block !important; }
html.sidebar-collapsed #app.is-admin .nav-section-label.admin-only { display: none !important; }

/* ============================================================
   22b. ANKETLER — panel (liste, sonuçlar, oluşturucu) + form
   --sv-accent: anket başına seçilen tema rengi
   ============================================================ */
:root { --sv-accent: var(--accent); --sv-star: #F5B83D; --sv-heart: #F43F5E; }
.stat-val-sm { font-size: 1.3rem; line-height: 1.15; }
.stat-val-sub { font-size: .9rem; color: var(--text-muted); font-weight: 500; }
.stat-card.static { cursor: default; }
.modal-xl { max-width: 920px; }
.segmented-wrap { display: flex; flex-wrap: wrap; }
.segmented-opt span i, .segmented-opt span svg { width: 14px; height: 14px; }
.switch-sm { width: 36px; height: 20px; }
.switch-sm span::after { width: 14px; height: 14px; }
.switch-sm input:checked + span::after { transform: translateX(16px); }

/* ---------- Durum rozeti ---------- */
.sv-status {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .2rem .65rem; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--border-light); background: var(--bg-hover); color: var(--text-secondary);
}
.sv-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-status.is-active { color: var(--success-text); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.sv-status.is-active .sv-status-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); animation: svPulse 2s infinite; }
.sv-status.is-draft { color: var(--warning-text); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
@keyframes svPulse { 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---------- Anket kartları ---------- */
.surveys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.survey-card {
    position: relative; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem 1.1rem; box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: .75rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.survey-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-light); }
.survey-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sv-accent); }
.survey-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.survey-card-main { text-align: left; display: block; min-width: 0; }
.survey-card-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.survey-card-main:hover .survey-card-title { color: var(--accent-text); }
.survey-card-desc { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.survey-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .7rem 0 0; border-top: 1px solid var(--border); margin-top: auto; }
.survey-card-stats strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.survey-card-stats strong small { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.survey-card-stats span { font-size: .7rem; color: var(--text-muted); }
.survey-card-quota { height: 4px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.survey-card-quota span { display: block; height: 100%; background: var(--sv-accent); border-radius: 4px; }
.survey-card-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.survey-card-actions .btn:first-child { flex: 1; }

/* ---------- Detay ---------- */
.sv-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sv-detail-actions { flex-wrap: wrap; }
.sv-detail-head { padding: 1.3rem 1.4rem 1.1rem; margin-bottom: 1rem; position: relative; }
.sv-detail-head::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sv-accent); }
.sv-detail-title-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sv-detail-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.sv-detail-desc { color: var(--text-secondary); font-size: .88rem; margin-top: .35rem; white-space: pre-line; }
.sv-link-box {
    display: flex; align-items: center; gap: .4rem; margin-top: 1rem;
    padding: .35rem .35rem .35rem .8rem;
    background: var(--bg-input); border: 1px solid var(--border-accent); border-radius: 12px;
}
.sv-link-box > i, .sv-link-box > svg { width: 16px; height: 16px; color: var(--accent-text); flex-shrink: 0; }
.sv-link-input { flex: 1; min-width: 0; background: transparent; border: 0; font-size: .84rem; color: var(--text-primary); font-family: var(--font-mono); text-overflow: ellipsis; }
.sv-link-note { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text-muted); margin-top: .55rem; }
.sv-link-note i, .sv-link-note svg { width: 13px; height: 13px; color: var(--success); }
#survey-detail > .banner { margin-bottom: 1rem; align-items: center; }
#survey-detail > .banner > div { flex: 1; }
.sv-stats { margin-bottom: 1rem; }

/* Özet kartları */
.sv-sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sv-sum-title { overflow-wrap: anywhere; }
.sv-sum .card-header { align-items: flex-start; }
.sv-sum .badge-pill i, .sv-sum .badge-pill svg { width: 12px; height: 12px; }
.sv-sum-body { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.sv-q-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 22px; height: 22px; padding: 0 .3rem; border-radius: 7px;
    background: color-mix(in srgb, var(--sv-accent) 16%, transparent); color: var(--sv-accent);
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.card-title .sv-q-num { color: var(--accent-text); background: var(--accent-soft); }
.sv-sum-hint { display: flex; align-items: center; gap: .4rem; font-size: .76rem; margin-top: .9rem; }
.sv-sum-hint i, .sv-sum-hint svg { width: 14px; height: 14px; }
.sv-bar-row {
    display: block; width: 100%; text-align: left;
    padding: .5rem .6rem; margin: 0 -.6rem; width: calc(100% + 1.2rem);
    border-radius: 10px; transition: background var(--transition);
}
.sv-bar-row:not(:disabled):hover { background: var(--bg-hover); }
.sv-bar-row:disabled { cursor: default; opacity: .6; }
.sv-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .3rem; }
.sv-bar-label { font-size: .84rem; font-weight: 500; overflow-wrap: anywhere; }
.sv-bar-val { font-size: .8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-bar-val small { color: var(--text-muted); font-weight: 500; }
.sv-bar-track { display: block; height: 8px; border-radius: 5px; background: var(--chart-track); overflow: hidden; }
.sv-bar-track > span { display: block; height: 100%; border-radius: 5px; background: var(--chart-bar); transition: width .6s var(--ease-out); min-width: 0; }
.sv-bar-row.is-other .sv-bar-track > span { background: var(--chart-bar-dim); }
.sv-bar-people { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--text-muted); margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-bar-people i, .sv-bar-people svg { width: 12px; height: 12px; flex-shrink: 0; }
.sv-level-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.sv-rate-avg { display: flex; align-items: baseline; gap: .35rem; }
.sv-rate-avg strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sv-rate-avg span { font-size: .74rem; color: var(--text-muted); }
.sv-nps { text-align: right; }
.sv-nps strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-text); }
.sv-nps span { font-size: .7rem; color: var(--text-muted); }
.sv-rate-sum { padding: .35rem 0 .7rem; border-bottom: 1px solid var(--border); }
.sv-rate-sum:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-rate-sum-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.sv-rate-sum-label { font-size: .86rem; font-weight: 600; }
.sv-rate-sum-stars { position: relative; display: inline-flex; margin-top: .2rem; }
.sv-rate-sum-stars svg { width: 15px; height: 15px; fill: var(--border-strong); flex-shrink: 0; }
.sv-rate-sum-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); display: inline-flex; overflow: hidden; }
.sv-rate-sum-fill svg { fill: var(--sv-star); }
.sv-rate-sum-stars[data-icon="heart"] .sv-rate-sum-fill svg { fill: var(--sv-heart); }
.sv-dist { display: grid; gap: .1rem; }
.sv-dist-row { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: .5rem; padding: .15rem .3rem; border-radius: 6px; font-size: .74rem; }
.sv-dist-row:not(:disabled):hover { background: var(--bg-hover); }
.sv-dist-row:disabled { cursor: default; opacity: .55; }
.sv-dist-row .sv-bar-track { height: 6px; }
.sv-dist-n { color: var(--text-secondary); font-weight: 600; }
.sv-dist-c { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-quotes, .sv-others { display: flex; flex-direction: column; gap: .4rem; max-height: 340px; overflow-y: auto; }
.sv-others { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--border-light); }
.sv-others-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sv-quote { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .55rem .7rem; border-radius: 10px; background: var(--bg-card-2); border: 1px solid var(--border); font-size: .84rem; }
.sv-quote > span { overflow-wrap: anywhere; white-space: pre-line; }
.sv-quote .link-btn { white-space: nowrap; flex-shrink: 0; }

/* Katılımcılar */
.sv-filter-chip {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .6rem .9rem; margin-bottom: .9rem; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--border-accent); font-size: .84rem;
}
.sv-filter-chip i, .sv-filter-chip svg { width: 15px; height: 15px; color: var(--accent-text); }
.sv-filter-chip em { font-style: normal; margin-left: auto; font-weight: 700; color: var(--accent-text); }
.sv-resp-row { cursor: pointer; }
.sv-cust-badge { font-size: .66rem; padding: .05rem .45rem; }
.sv-cust-badge i, .sv-cust-badge svg { width: 11px; height: 11px; }
.sv-resp-table .note-cell { max-width: 280px; }
.sv-resp-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.sv-resp-head .avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 1rem; }
.sv-resp-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.sv-resp-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.sv-resp-meta > span, .sv-resp-meta .link-btn { display: inline-flex; align-items: center; gap: .3rem; }
.sv-resp-meta i, .sv-resp-meta svg { width: 13px; height: 13px; }
.sv-ans-list { display: flex; flex-direction: column; gap: .6rem; }
.sv-ans { padding: .75rem .9rem; border-radius: 12px; background: var(--bg-card-2); border: 1px solid var(--border); }
.sv-ans-q { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.sv-ans-a { margin: .45rem 0 0 1.9rem; font-size: .9rem; }
.sv-ans-val { font-weight: 600; }
.sv-ans-text { white-space: pre-line; overflow-wrap: anywhere; }
.sv-ans-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.sv-ans-rate { display: flex; align-items: center; gap: .6rem; padding: .15rem 0; }
.sv-ans-rate > span:first-child:not(.sv-mini-stars) { min-width: 110px; color: var(--text-secondary); font-size: .84rem; }
.sv-ans-rate b { font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sv-mini-stars { display: inline-flex; gap: 1px; }
.sv-mini-star svg { width: 16px; height: 16px; fill: var(--border-strong); }
.sv-mini-star.is-on svg { fill: var(--sv-star); }
.sv-mini-stars[data-icon="heart"] .sv-mini-star.is-on svg { fill: var(--sv-heart); }
.sv-resp-footer { align-items: center; }
.sv-resp-pos { font-size: .78rem; font-variant-numeric: tabular-nums; }

/* QR / paylaş */
.sv-share { text-align: center; }
.sv-share .info-box { text-align: left; }
.sv-share-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: .9rem; }
.sv-qr { display: inline-flex; padding: 14px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); }
.sv-qr img, .sv-qr canvas { width: 220px; height: 220px; }
.sv-share-note { font-size: .78rem; margin: .8rem auto 0; max-width: 320px; }
.sv-share .sv-link-box { text-align: left; }

/* ---------- Oluşturucu ---------- */
.sv-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.sv-preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left;
    padding: 1.1rem; border-radius: 16px; border: 1px solid var(--border-light); background: var(--bg-card-2);
    transition: all var(--transition);
}
.sv-preset:hover { border-color: var(--border-accent); background: var(--accent-soft); transform: translateY(-2px); }
.sv-preset-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: .3rem; }
.sv-preset-icon i, .sv-preset-icon svg { width: 19px; height: 19px; }
.sv-preset strong { font-size: .92rem; }
.sv-preset small { font-size: .76rem; color: var(--text-muted); }
.svb-tabs { display: flex; margin-bottom: 1.1rem; }
.svb-tabs .tab { flex: 1; }
.svb-title-input { font-size: 1rem; font-weight: 600; }
.svb-questions { display: flex; flex-direction: column; gap: .8rem; }
.svb-empty { border: 1px dashed var(--border-light); border-radius: 14px; }
.svb-q {
    position: relative; padding: .9rem 1rem 1rem; border-radius: 14px;
    background: var(--bg-card-2); border: 1px solid var(--border-light);
    display: flex; flex-direction: column; gap: .5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.svb-q:focus-within { border-color: var(--border-accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.svb-q-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.svb-q-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.svb-q-type { position: relative; display: inline-flex; align-items: center; }
.svb-q-type > i, .svb-q-type > svg { position: absolute; left: .65rem; width: 14px; height: 14px; color: var(--accent-text); pointer-events: none; }
.svb-q-type select { padding-left: 2rem; min-width: 190px; }
.svb-req { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-secondary); cursor: pointer; }
.svb-q-title { font-weight: 600; }
.svb-q-desc { font-size: .8rem; min-height: 36px; padding-top: .45rem; padding-bottom: .45rem; }
.svb-q-body { padding-top: .2rem; }
.svb-opts { display: flex; flex-direction: column; gap: .35rem; }
.svb-opt { display: flex; align-items: center; gap: .45rem; }
.svb-opt .form-control { min-height: 38px; padding-top: .45rem; padding-bottom: .45rem; font-size: .84rem; }
.svb-opt-mark { width: 16px; height: 16px; flex-shrink: 0; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: var(--text-muted); }
.svb-opt-mark.is-circle { border-radius: 50%; }
.svb-opt-mark.is-square { border-radius: 4px; }
.svb-opt-mark.is-num { border: 0; width: 16px; }
.svb-opt-mark.is-star { border: 0; }
.svb-opt-mark.is-star::before { content: '★'; font-size: .95rem; color: var(--sv-star); }
.svb-inline { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; margin-top: .5rem; }
.svb-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; }
.svb-check input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.svb-num { width: 74px !important; min-width: 0 !important; min-height: 34px; padding: .3rem .5rem; }
select.svb-num { padding-right: 1.8rem; }
.svb-icon-seg .segmented-opt span { padding: .3rem .7rem; font-size: .78rem; }
.svb-help { font-size: .76rem; color: var(--text-muted); margin-bottom: .45rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.svb-help i, .svb-help svg { width: 13px; height: 13px; }
.svb-emoji-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.svb-emoji { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.svb-emoji > span { font-size: 1.6rem; line-height: 1; }
.svb-emoji .form-control { text-align: center; font-size: .76rem; padding: .35rem .3rem; min-height: 34px; }
.svb-scale { display: grid; grid-template-columns: auto 1fr; gap: .45rem .7rem; align-items: center; }
.svb-datetime { display: grid; grid-template-columns: 1fr 120px; gap: .45rem; }
.svb-add { margin-top: 1.1rem; padding: 1rem; border-radius: 14px; border: 1px dashed var(--border-strong); }
.svb-add-title { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: .65rem; }
.svb-add-title i, .svb-add-title svg { width: 15px; height: 15px; color: var(--accent-text); }
.svb-add-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.svb-add-btn {
    display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .4rem;
    border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-card-2);
    font-size: .72rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.2;
    transition: all var(--transition);
}
.svb-add-btn i, .svb-add-btn svg { width: 18px; height: 18px; color: var(--accent-text); }
.svb-add-btn:hover { border-color: var(--border-accent); background: var(--accent-soft); color: var(--text-primary); transform: translateY(-1px); }
.svb-footer-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; }
.svb-footer-note i, .svb-footer-note svg { width: 13px; height: 13px; }
#svb-pane-settings .settings-row { border-bottom: 1px solid var(--border); }
#svb-pane-settings .form-section-title { margin-top: 1.2rem; }
#svb-pane-settings .form-section-title:first-child { margin-top: 0; }
.sv-preview { display: flex; flex-direction: column; gap: .9rem; }
.sv-preview-badge { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--info-text); background: var(--info-soft); border-radius: 10px; padding: .5rem .75rem; }
.sv-preview-badge i, .sv-preview-badge svg { width: 14px; height: 14px; }
.sv-row-preview { margin-top: 1rem; }

/* ---------- Sonuç raporu ---------- */
.sv-report { display: flex; flex-direction: column; gap: 1rem; }
.sv-rep-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.6rem 1.8rem; border-radius: var(--radius-xl); color: #F5F1E8;
    background:
        radial-gradient(ellipse 60% 120% at 100% 0%, color-mix(in srgb, var(--sv-accent) 38%, transparent), transparent 60%),
        linear-gradient(120deg, #1B1710 0%, #120F0A 50%, #0D0C0A 100%);
    border: 1px solid color-mix(in srgb, var(--sv-accent) 30%, transparent);
}
.sv-rep-hero-main { min-width: 0; }
.sv-rep-eyebrow { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D9BD86; }
.sv-rep-eyebrow i, .sv-rep-eyebrow svg { width: 14px; height: 14px; }
.sv-rep-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-top: .35rem; overflow-wrap: anywhere; }
.sv-rep-range { font-size: .82rem; color: rgba(245,241,232,.65); margin-top: .4rem; }
.sv-rep-ring {
    width: 128px; height: 128px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(closest-side, #15120C 78%, transparent 80% 100%), conic-gradient(var(--sv-accent) calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
}
.sv-rep-ring strong { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.sv-rep-ring span { font-size: .62rem; color: rgba(245,241,232,.65); margin-top: .25rem; max-width: 80px; line-height: 1.2; }
.sv-rep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.sv-rep-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-card); }
.sv-rep-kpi strong { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sv-rep-kpi span { font-size: .76rem; color: var(--text-muted); }
.sv-rep-kpi small { font-size: .7rem; }
.sv-rep-h { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-top: .6rem; }
.sv-rep-h i, .sv-rep-h svg { width: 18px; height: 18px; color: var(--accent-text); }
.sv-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.sv-rep-hl { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-card); break-inside: avoid; }
.sv-rep-hl::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sv-accent); }
.sv-rep-hl-q { display: flex; align-items: flex-start; gap: .45rem; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.sv-rep-hl-q i, .sv-rep-hl-q svg { width: 15px; height: 15px; color: var(--accent-text); flex-shrink: 0; margin-top: .1rem; }
.sv-rep-hl-big { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; margin-top: .45rem; line-height: 1.2; overflow-wrap: anywhere; }
.sv-rep-hl-sub { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.sv-rep-bars { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.sv-rep-bar { display: grid; grid-template-columns: minmax(70px, 38%) 1fr 42px; align-items: center; gap: .5rem; font-size: .76rem; }
.sv-rep-bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.sv-rep-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.sv-rep-bar .sv-bar-track { height: 7px; }
.sv-rep-bar .sv-bar-track > span { background: var(--sv-accent); }
.sv-timeline { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding: 1rem 1.1rem .8rem; overflow-x: auto; }
.sv-tl-col { flex: 1; min-width: 26px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.sv-tl-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: var(--sv-accent); opacity: .85; }
.sv-tl-val { font-size: .68rem; font-weight: 700; color: var(--text-secondary); }
.sv-tl-lbl { font-size: .6rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 1180px) { .sv-rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .sv-rep-hero { padding: 1.3rem; }
    .sv-rep-ring { width: 104px; height: 104px; }
    .sv-rep-kpi strong { font-size: 1.4rem; }
}
@media print {
    html.printing-survey .sv-detail-bar, html.printing-survey .sv-link-box, html.printing-survey .sv-link-note,
    html.printing-survey #survey-detail > .banner, html.printing-survey .sv-stats, html.printing-survey .sv-sum-hint,
    html.printing-survey .sv-detail-head { display: none !important; }
    html.printing-survey .sv-rep-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html.printing-survey .sv-bar-track > span, html.printing-survey .sv-tl-bar, html.printing-survey .sv-rep-ring { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html.printing-survey .sv-sum-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ANKET FORMU (herkese açık sayfa + önizleme)
   ============================================================ */
body.sv-public {
    background:
        radial-gradient(ellipse 70% 40% at 50% -5%, color-mix(in srgb, var(--sv-accent) 16%, transparent), transparent 70%),
        var(--bg-base);
    min-height: 100dvh;
}
.sv-page { max-width: 680px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.sv-brand { display: flex; align-items: center; justify-content: center; gap: .65rem; padding: .5rem 0 .25rem; }
.sv-brand .brand-mark { width: 44px; height: 44px; }
.sv-brand .brand-mark.has-logo { width: auto; min-width: 44px; max-width: 160px; }
.sv-brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.sv-card {
    position: relative; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); padding: 1.5rem 1.4rem;
}
.sv-accent-bar { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sv-accent); }
.sv-title { font-family: var(--font-display); font-size: clamp(1.4rem, 4.5vw, 1.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.sv-title-sm { font-size: 1.1rem; }
.sv-desc { color: var(--text-secondary); font-size: .92rem; margin-top: .5rem; white-space: pre-line; overflow-wrap: anywhere; }
.sv-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.sv-meta span { font-size: .74rem; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-secondary); }
.sv-state { text-align: center; padding: 2.5rem 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.sv-state .boot-bar { margin: .5rem auto; }
.sv-state-icon { font-size: 2.6rem; line-height: 1; }
.sv-done-icon {
    width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; color: #fff; background: var(--sv-accent);
    box-shadow: 0 12px 34px -10px var(--sv-accent); animation: svPop .5s var(--ease-out);
}
@keyframes svPop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.sv-identity { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.sv-identity-lead { font-size: .86rem; font-weight: 600; margin-bottom: .8rem; }
.sv-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sv-field { margin-bottom: .85rem; min-width: 0; }
.sv-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .4rem; }
.sv-req { color: var(--sv-accent); }
.sv-input {
    width: 100%; min-height: 46px; padding: .7rem .9rem;
    background: var(--bg-input); border: 1px solid var(--border-light); border-radius: 12px;
    color: var(--text-primary); font-size: 1rem;   /* 16px: iOS yakınlaştırmasını önler */
    transition: border-color var(--transition), box-shadow var(--transition);
}
.sv-input:focus { border-color: var(--sv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-accent) 25%, transparent); outline: none; }
.sv-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.sv-input:disabled { opacity: .7; }
.sv-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.sv-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.3rem;
    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='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; }
.sv-select option { background: var(--bg-elevated); }
[data-theme="dark"] .sv-date::-webkit-calendar-picker-indicator { filter: invert(.75); }
.sv-btn { background: var(--sv-accent); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); box-shadow: 0 8px 22px -10px var(--sv-accent); margin-top: .3rem; }
.sv-btn:hover:not(:disabled) { filter: brightness(1.07); }
.sv-form-error { color: var(--danger-text); font-size: .84rem; margin-bottom: .6rem; background: var(--danger-soft); border-radius: 10px; padding: .55rem .8rem; }
.sv-head-mini { padding: 1.1rem 1.2rem .9rem; }
.sv-head-mini-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sv-who { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }
.sv-progress { height: 6px; border-radius: 4px; background: var(--chart-track); overflow: hidden; margin-top: .85rem; }
.sv-progress span { display: block; height: 100%; width: 0; background: var(--sv-accent); border-radius: 4px; transition: width .35s var(--ease-out); }
.sv-progress-text { font-size: .72rem; color: var(--text-muted); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.sv-form { display: flex; flex-direction: column; gap: .9rem; }
.sv-q {
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
    padding: 1.2rem 1.25rem 1.25rem; min-width: 0; box-shadow: var(--shadow-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.sv-q.has-error { border-color: color-mix(in srgb, var(--danger) 60%, transparent); box-shadow: 0 0 0 3px var(--danger-soft); }
.sv-q-title { display: flex; align-items: flex-start; gap: .6rem; font-size: 1rem; font-weight: 600; line-height: 1.4; padding: 0; width: 100%; float: left; }
.sv-q-desc, .sv-q-body, .sv-q-error { clear: both; }
.sv-q::after { content: ''; display: block; clear: both; }
.sv-q-title .sv-q-num { margin-top: .05rem; }
.sv-q-text { overflow-wrap: anywhere; }
.sv-q-desc { font-size: .84rem; color: var(--text-muted); padding: .3rem 0 0 1.95rem; white-space: pre-line; }
.sv-q-body { padding-top: .9rem; }
.sv-q-error { color: var(--danger-text); font-size: .8rem; margin-top: .6rem; font-weight: 500; }
.sv-hint { font-size: .76rem; color: var(--text-muted); margin: -.3rem 0 .5rem; }
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Seçenekler */
.sv-opts { display: flex; flex-direction: column; gap: .45rem; }
.sv-opt {
    position: relative; display: flex; align-items: center; gap: .7rem;
    padding: .75rem .9rem; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border-light); background: var(--bg-card-2);
    transition: border-color var(--transition), background var(--transition);
}
.sv-opt:hover { border-color: var(--border-strong); }
.sv-opt > input[type="radio"], .sv-opt > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.sv-opt-mark { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--border-strong); border-radius: 50%; transition: all var(--transition); position: relative; }
.sv-opt > input[type="checkbox"] + .sv-opt-mark { border-radius: 6px; }
.sv-opt > input:checked + .sv-opt-mark { border-color: var(--sv-accent); background: var(--sv-accent); box-shadow: inset 0 0 0 3px var(--bg-card-2); }
.sv-opt > input[type="checkbox"]:checked + .sv-opt-mark { box-shadow: none; }
.sv-opt > input[type="checkbox"]:checked + .sv-opt-mark::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sv-opt > input:focus-visible + .sv-opt-mark { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-accent) 35%, transparent); }
.sv-opt:has(> input:checked) { border-color: var(--sv-accent); background: color-mix(in srgb, var(--sv-accent) 9%, var(--bg-card-2)); }
.sv-opt-label { font-size: .92rem; overflow-wrap: anywhere; }
.sv-opt-other { flex-wrap: wrap; }
.sv-other-input { flex: 1; min-width: 150px; min-height: 38px; padding: .45rem .7rem; font-size: .92rem; }

/* Yıldızlar */
.sv-rate-rows { display: flex; flex-direction: column; gap: .5rem; }
.sv-rate-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .55rem .8rem; border-radius: 12px; background: var(--bg-card-2); border: 1px solid var(--border); }
.sv-rate-row.no-label { justify-content: center; background: transparent; border: 0; padding: 0; }
.sv-rate-label { font-size: .92rem; font-weight: 500; overflow-wrap: anywhere; }
.sv-stars { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.sv-star { position: relative; cursor: pointer; padding: 3px; border-radius: 8px; line-height: 0; }
.sv-star input { position: absolute; opacity: 0; pointer-events: none; }
.sv-star svg { width: 30px; height: 30px; fill: transparent; stroke: var(--border-strong); stroke-width: 1.5; stroke-linejoin: round; transition: transform .12s var(--ease), fill .12s; }
.sv-rate-row.no-label .sv-star svg { width: 38px; height: 38px; }
.sv-star.is-on svg { fill: var(--sv-star); stroke: var(--sv-star); }
.sv-stars[data-icon="heart"] .sv-star.is-on svg { fill: var(--sv-heart); stroke: var(--sv-heart); }
.sv-stars.is-hovering .sv-star svg { fill: transparent; stroke: var(--border-strong); }
.sv-stars.is-hovering .sv-star.is-hover svg { fill: color-mix(in srgb, var(--sv-star) 70%, transparent); stroke: var(--sv-star); transform: scale(1.1); }
.sv-stars[data-icon="heart"].is-hovering .sv-star.is-hover svg { fill: color-mix(in srgb, var(--sv-heart) 70%, transparent); stroke: var(--sv-heart); }
.sv-star:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--sv-accent); }

/* Emoji */
.sv-emojis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.sv-emoji { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .2rem .55rem; border-radius: 14px; cursor: pointer; border: 1px solid var(--border-light); background: var(--bg-card-2); transition: all var(--transition); }
.sv-emoji input { position: absolute; opacity: 0; pointer-events: none; }
.sv-emoji-face { font-size: 2rem; line-height: 1; filter: grayscale(.85); opacity: .65; transition: all var(--transition); }
.sv-emoji-label { font-size: .7rem; color: var(--text-muted); text-align: center; line-height: 1.2; }
.sv-emoji:hover .sv-emoji-face { filter: none; opacity: 1; transform: scale(1.08); }
.sv-emoji:has(input:checked) { border-color: var(--sv-accent); background: color-mix(in srgb, var(--sv-accent) 10%, var(--bg-card-2)); }
.sv-emoji:has(input:checked) .sv-emoji-face { filter: none; opacity: 1; transform: scale(1.15); }
.sv-emoji:has(input:checked) .sv-emoji-label { color: var(--text-primary); font-weight: 600; }
.sv-emoji:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-accent) 35%, transparent); }

/* Sayısal ölçek */
.sv-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: .35rem; }
.sv-num { position: relative; cursor: pointer; }
.sv-num input { position: absolute; opacity: 0; pointer-events: none; }
.sv-num span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--bg-card-2); font-weight: 700; font-variant-numeric: tabular-nums; transition: all var(--transition); }
.sv-num:hover span { border-color: var(--border-strong); }
.sv-num input:checked + span { background: var(--sv-accent); border-color: var(--sv-accent); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); transform: translateY(-1px); }
.sv-num input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-accent) 35%, transparent); }
.sv-scale-labels { display: flex; justify-content: space-between; gap: 1rem; font-size: .74rem; color: var(--text-muted); margin-top: .4rem; }

/* Evet / Hayır */
.sv-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sv-yn { position: relative; cursor: pointer; }
.sv-yn input { position: absolute; opacity: 0; pointer-events: none; }
.sv-yn span { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-card-2); font-weight: 600; transition: all var(--transition); }
.sv-yn:hover span { border-color: var(--border-strong); }
.sv-yn input:checked + span { border-color: var(--sv-accent); background: color-mix(in srgb, var(--sv-accent) 12%, var(--bg-card-2)); box-shadow: 0 0 0 1px var(--sv-accent); }
.sv-yn input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-accent) 35%, transparent); }

.sv-submit-card { padding: 1.2rem 1.25rem; }
.sv-privacy { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .72rem; color: var(--text-muted); margin-top: .75rem; text-align: center; }
.sv-privacy i, .sv-privacy svg { width: 12px; height: 12px; flex-shrink: 0; }
.sv-footer { text-align: center; font-size: .72rem; color: var(--text-muted); padding-top: .5rem; }

@media (max-width: 1180px) {
    .sv-sum-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .surveys-grid { grid-template-columns: 1fr; }
    .sv-presets { grid-template-columns: 1fr; }
    .svb-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svb-q-type select { min-width: 0; }
    .svb-q-head .toolbar-spacer { display: none; }
    .svb-emoji-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
    .svb-scale { grid-template-columns: 1fr; }
    .sv-link-box { flex-wrap: wrap; }
    .sv-link-input { flex-basis: calc(100% - 30px); padding: .3rem 0; }
    .sv-detail-title { font-size: 1.2rem; }
    .sv-row { grid-template-columns: 1fr; gap: 0; }
    .sv-card { padding: 1.25rem 1.1rem; }
    .sv-q { padding: 1rem 1rem 1.1rem; }
    .sv-q-desc { padding-left: 0; }
    .sv-star svg { width: 28px; height: 28px; }
    .sv-rate-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .sv-emoji-face { font-size: 1.65rem; }
    .sv-emoji-label { font-size: .62rem; }
    .sv-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sv-head-mini-row { flex-direction: column; }
    .sv-filter-chip em { margin-left: 0; }
    .sv-ans-a { margin-left: 0; }
}

/* ============================================================
   23. RESPONSIVE
   ============================================================ */
@media (max-width: 1380px) {
    .wa-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .wa-sendlist { grid-column: 1 / -1; }
    .topbar-date { display: none; }
}
@media (max-width: 1180px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .security-grid { grid-template-columns: 1fr; }
    .topbar-search { width: 220px; }
}
@media (max-width: 960px) {
    #app, html.sidebar-collapsed #app { grid-template-columns: minmax(0, 1fr); }
    #sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: min(300px, 86vw);
        transform: translateX(-105%);
        box-shadow: var(--shadow-lg);
    }
    #sidebar.open { transform: translateX(0); }
    html.sidebar-collapsed #sidebar .sidebar-logo-text,
    html.sidebar-collapsed #sidebar .nav-item > span,
    html.sidebar-collapsed #sidebar .nav-section-label,
    html.sidebar-collapsed #sidebar .sidebar-search span,
    html.sidebar-collapsed #sidebar .user-info { display: revert; }
    html.sidebar-collapsed #sidebar .nav-item { justify-content: flex-start; padding: .62rem .75rem; }
    html.sidebar-collapsed #sidebar .sidebar-header { flex-direction: row; padding: 1.2rem 1rem 1rem 1.15rem; }
    html.sidebar-collapsed #sidebar .sidebar-user { flex-direction: row; padding: .5rem; }
    /* Mobilde daraltma yok: seçilen marka görünümü aynen uygulanır */
    html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode="logo"] .sidebar-logo-text { display: none; }
    html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode="text"] .sidebar-logo-icon { display: none; }
    html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode="logo"] .sidebar-logo-icon { width: 44px; height: 44px; }
    html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode="logo"] .sidebar-logo-icon.has-logo { width: auto; min-width: 44px; max-width: 180px; height: 48px; border-radius: 12px; }
    html.sidebar-collapsed #sidebar .sidebar-logo[data-brand-mode="logo"] .sidebar-logo-icon.has-logo .brand-logo-img { width: auto; max-width: 180px; }
    html.sidebar-collapsed .nav-item[data-tip]:hover::after { display: none; }
    .sidebar-collapse-btn { display: none; }
    #sidebar-toggle { display: inline-flex; }
    #sidebar-backdrop { display: block; pointer-events: none; }
    #sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
    #topbar { padding: 0 1rem; gap: .75rem; }
    .topbar-search { width: auto; padding: .5rem; }
    .topbar-search span, .topbar-search kbd { display: none; }
    .page { padding: 1.1rem 1rem 2.5rem; }
    .wa-layout { grid-template-columns: 1fr; }
    .sd-grid, .templates-two-col { grid-template-columns: 1fr; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .hide-mobile { display: none !important; }
}
@media (max-width: 720px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .groups-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 1.2rem; }
    .page-subtitle { display: none; }
    .hero-card { padding: 1.4rem 1.3rem; }
    .hero-actions .btn { flex: 1; }
    .search-wrap { max-width: none; min-width: 100%; }
    .toolbar .select-sm { flex: 1; min-width: 0; }
    .toolbar-spacer { display: none; }
    .cal-legend { display: none; }
    .cal-title { min-width: 0; font-size: 1.1rem; }
    .cal-day { min-height: 64px; padding: .3rem; }
    .cal-ev-dot { font-size: 0; padding: 0; height: 5px; border-left: none; background: currentColor !important; border-radius: 3px; }
    .cal-ev-more { display: none; }
    .cal-day-special { display: none; }
    .radio-cards { grid-template-columns: 1fr; }

    /* Araç çubuğu: seçimler yan yana, butonlar tam genişlik */
    .toolbar .select-sm { flex: 1 1 calc(50% - .3rem); min-width: 0; }
    .toolbar > .btn { flex: 1 1 auto; }
    .toolbar .segmented { width: 100%; }
    .toolbar .segmented .tab { flex: 1; padding: .45rem .5rem; }
    /* Müşteri kartları: boş alanlar gizli, işlemler sağ üstte */
    .table-responsive td.is-empty { display: none !important; }
    .table-customers tr { position: relative; }
    .table-customers td.td-primary { padding-right: 88px !important; }
    .table-customers td.td-actions { position: absolute; top: .85rem; right: 1rem; width: auto; padding: 0 !important; }
    /* Etkinlik satırları */
    #events-list .ev-row { flex-wrap: wrap; gap: .6rem .9rem; }
    #events-list .ev-row .ev-info { flex: 1 1 calc(100% - 70px); }
    #events-list .ev-row .ev-badge { margin-left: 64px; }
    #events-list .ev-row .action-btns { margin-left: auto; }
    .sd-list-item { flex-wrap: wrap; }

    /* Tablolar → kart görünümü */
    .table-responsive thead { display: none; }
    .table-responsive, .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block; width: 100%; }
    .table-responsive tr { padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
    .table-responsive tbody tr:last-child { border-bottom: none; }
    .table-responsive td { border: none !important; padding: .28rem 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .table-responsive td[data-label]::before {
        content: attr(data-label);
        font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
        color: var(--text-muted); flex-shrink: 0;
    }
    .table-responsive td.td-primary { padding-bottom: .5rem !important; }
    .table-responsive td.td-primary::before { display: none; }
    .table-responsive td.td-actions { justify-content: flex-end; padding-top: .55rem !important; }
    .table-responsive td.td-actions::before { display: none; }
    .table-responsive td.empty-cell { display: block; }
    .table-responsive .note-cell { max-width: 60%; }
    .table .phone-btn { margin-left: 0; }
    .table tbody tr:hover td { background: transparent; }

    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92dvh; animation: sheetIn .3s var(--ease-out); }
    .dialog-overlay { align-items: center; padding: 1rem; }
    .dialog { border-radius: var(--radius-xl); }
    @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    #toast-container { left: 1rem; right: 1rem; bottom: 1rem; align-items: stretch; }
    .toast { width: 100%; }
    .cmdk-overlay { padding-top: 1rem; }
}
@media (max-width: 480px) {
    .login-card { padding: 2rem 1.35rem 1.6rem; border-radius: var(--radius-lg); }
    .login-title { font-size: 1.6rem; }
    .stats-grid, .stats-grid-3 { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .stat-card { padding: .95rem; gap: .7rem; flex-direction: column; align-items: flex-start; }
    .stat-icon { width: 38px; height: 38px; }
    .stat-val { font-size: 1.6rem; }
    .otp-slot { width: 42px; height: 52px; font-size: 1.4rem; }
    .otp-slots { gap: .35rem; }
    .topbar-date { display: none; }
    #topbar-actions .btn-icon-sm { width: 34px; height: 34px; }
}

/* ============================================================
   24. ERİŞİLEBİLİRLİK & YAZDIRMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .btn, .nav-item.active, .tab.active { border: 1px solid CanvasText; }
}
@media print {
    #sidebar, #topbar, .toolbar, .hero-actions, .action-btns, #toast-container { display: none !important; }
    #app { display: block; height: auto; }
    #main-content, #page-container { height: auto; overflow: visible; }
    .card { box-shadow: none; break-inside: avoid; }
}


/* ============================================================
   PROFİL FOTOĞRAFI & LOGO DÜZENLEME
   ============================================================ */
.avatar.has-photo, .user-avatar.has-photo { background: var(--bg-card-2); overflow: hidden; padding: 0; }
.avatar.has-photo img, .user-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-xl { width: 64px; height: 64px; border-radius: 18px; font-size: 1.4rem; }
.photo-edit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.photo-edit-actions { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1; }
.avatar-edit { position: relative; padding: 0; border-radius: 11px; flex-shrink: 0; }
.avatar-edit:focus-visible { outline: 2px solid var(--accent, #D2AE6D); outline-offset: 2px; }
.avatar-edit-badge {
    position: absolute; right: -4px; bottom: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); opacity: 0; transition: opacity .15s;
}
.avatar-edit-badge svg, .avatar-edit-badge i { width: 11px; height: 11px; }
.avatar-edit:hover .avatar-edit-badge, .avatar-edit:focus-visible .avatar-edit-badge { opacity: 1; }
@media (hover: none) { .avatar-edit-badge { opacity: 1; } }

/* Kaldırılan süper yöneticiler (Ekip & Güvenlik tablosu) */
tr.is-revoked td:not(.td-actions) { opacity: .6; }


/* ============================================================
   KVKK — Açık rıza kutucukları, aydınlatma metni, analiz paneli
   ============================================================ */
.kvkk-consent {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: .75rem 1rem .85rem;
    margin: .25rem 0 1rem;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    min-width: 0;
}
.kvkk-consent legend { padding: 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.kvkk-consent.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.kvkk-check { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem 0; }
.kvkk-check + .kvkk-check { border-top: 1px dashed var(--border); }
.kvkk-check input { width: 18px; height: 18px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.kvkk-check label { font-size: .8rem; line-height: 1.55; color: var(--text-primary); cursor: pointer; font-weight: 400; }
.kvkk-link {
    display: inline; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 600; color: var(--accent-text);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.kvkk-link:hover { text-decoration-thickness: 2px; }
.kvkk-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.kvkk-legacy-note { display: flex; gap: .4rem; align-items: flex-start; margin: 0 0 .35rem; color: var(--warning-text); }
.kvkk-legacy-note i, .kvkk-legacy-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: .1rem; }
.kvkk-consent.is-given {
    display: flex; align-items: flex-start; gap: .7rem;
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.kvkk-consent.is-given > i, .kvkk-consent.is-given > svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: .1rem; }
.kvkk-consent.is-given strong { font-size: .84rem; }

.kvkk-overlay { z-index: 800; }   /* müşteri formunun (500) ve onay diyaloğunun (700) üstünde */
.kvkk-text { font-size: .86rem; line-height: 1.65; color: var(--text-secondary); }
.kvkk-text h4 { font-size: .9rem; line-height: 1.45; color: var(--text-primary); margin: 0 0 1rem; text-align: center; }
.kvkk-text ol { padding-left: 1.3rem; margin: 0; display: grid; gap: .65rem; }
.kvkk-text strong { color: var(--text-primary); }
.kvkk-text a { color: var(--accent-text); }

.kvkk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kvkk-muted { font-size: .74rem; white-space: nowrap; }
.stat-green { --stat-glow: rgba(37,211,102,.14); }
.stat-green .stat-icon { background: rgba(37,211,102,.13); color: var(--whatsapp); }
[data-theme="light"] .stat-green .stat-icon { color: #15803D; }
@media (max-width: 960px) { .kvkk-grid { grid-template-columns: 1fr; } }

/* KVKK — herkese açık kayıt linki */
.kvkk-link-card { margin-bottom: 1.25rem; }
.kvkk-link-body { padding: 1rem 1.25rem 1.1rem; display: grid; gap: .8rem; }
.kvkk-link-note { font-size: .82rem; margin: 0; }
.kvkk-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kvkk-link-actions .toolbar-spacer { flex: 1; }
.kvkk-dup { color: var(--warning-text); font-weight: 600; }
.kv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.sv-public .kvkk-consent { margin: .35rem 0 1rem; }
body.sv-public .kvkk-check label { font-size: .86rem; }

/* KVKK — linkten gelen başvurular */
.kvkk-apps-card { margin-bottom: 1.25rem; }
.kvkk-app-actions { display: flex; gap: .45rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.btn-add { background: #16A34A; color: #fff; border-color: transparent; font-weight: 600; }
.btn-add:hover:not(:disabled) { background: #15803D; transform: translateY(-1px); }
.kvkk-app-detail { display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.kvkk-app-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; font-size: .84rem; }
.kvkk-app-row + .kvkk-app-row { border-top: 1px solid var(--border); }
.kvkk-app-row > span { color: var(--text-muted); }
.kvkk-app-row > strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.kvkk-yes { display: inline-flex; align-items: center; gap: .3rem; color: var(--success-text); }
.kvkk-yes i, .kvkk-yes svg { width: 14px; height: 14px; }
.kvkk-app-note { margin-top: .9rem; }
.kvkk-app-note > span { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.kvkk-app-note p { margin-top: .35rem; padding: .7rem .9rem; border-radius: var(--radius-lg); background: var(--bg-hover); font-size: .86rem; white-space: pre-line; overflow-wrap: anywhere; }
.kvkk-warn { margin-bottom: .9rem; }
.kvkk-version-note { display: flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .76rem; }
.kvkk-version-note i, .kvkk-version-note svg { width: 14px; height: 14px; }
.kv-note-label { display: flex !important; justify-content: space-between; align-items: baseline; gap: .5rem; }
.kv-note { resize: vertical; min-height: 76px; font-family: inherit; }
@media (max-width: 560px) { .kvkk-app { flex-wrap: wrap; } .kvkk-app-actions { width: 100%; } .kvkk-app-actions .btn { flex: 1; } }

/* KVKK — kayıtlı onaylar + kanıt belgesi */
.kvkk-log-card { margin-bottom: 1.25rem; }
.kvkk-log-head { flex-wrap: wrap; }
.kvkk-log-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kvkk-log-tools .search-wrap { min-width: 220px; }
.kvkk-log-sub { display: block; font-size: .72rem; color: var(--text-muted); margin-top: .15rem; font-weight: 400; }
.kvkk-log-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kvkk-proof { font-size: .84rem; line-height: 1.55; }
.kvkk-proof-head { text-align: center; padding-bottom: .8rem; border-bottom: 2px solid var(--border-strong); margin-bottom: .6rem; }
.kvkk-proof-title { font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; }
.kvkk-proof-meta { font-size: .74rem; color: var(--text-muted); margin-top: .2rem; }
.kvkk-proof h4 { font-size: .86rem; margin: 1rem 0 .45rem; }
.kvkk-proof-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); }
.kvkk-proof-table th, .kvkk-proof-table td { text-align: left; vertical-align: top; padding: .45rem .65rem; border-bottom: 1px solid var(--border); }
.kvkk-proof-table th { width: 38%; font-weight: 500; color: var(--text-muted); }
.kvkk-proof-table code { font-size: .72rem; word-break: break-all; }
.kvkk-proof-decl { padding-left: 1.2rem; display: grid; gap: .4rem; }
.kvkk-proof-text { font-size: .78rem; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; }
.kvkk-proof-text h4 { margin-top: 0; font-size: .8rem; text-align: center; }
.kvkk-proof-text ol { padding-left: 1.2rem; display: grid; gap: .35rem; }
.kvkk-proof-foot { font-size: .72rem; color: var(--text-muted); margin-top: 1rem; border-top: 1px dashed var(--border); padding-top: .6rem; }
#kvkk-print { display: none; }
@media print {
    html.printing-kvkk body > *:not(#kvkk-print) { display: none !important; }
    html.printing-kvkk body { background: #fff !important; }
    html.printing-kvkk #kvkk-print { display: block !important; color: #000; padding: 0; }
    html.printing-kvkk #kvkk-print * { color: #000 !important; border-color: #999 !important; }
    html.printing-kvkk .kvkk-proof { font-size: 10.5pt; }
}

/* KVKK — sadeleştirilmiş analiz alanı */
.kvkk-stats-one { grid-template-columns: repeat(2, minmax(0, 320px)); }
@media (max-width: 640px) { .kvkk-stats-one { grid-template-columns: minmax(0, 1fr); } }
.kvkk-grid-one { grid-template-columns: 1fr; }

/* 2FA: bilgisayar saati uyarısı */
.totp-clock-warn { font-size: .74rem; color: var(--warning-text); background: var(--warning-soft); border-radius: 10px; padding: .5rem .7rem; margin-top: .6rem; line-height: 1.45; }


/* ============================================================
   🚫 KVKK — onay geri çekme  ·  📬 WhatsApp webhook (gelen kutusu, durumlar)
   ============================================================ */
.badge-pill.is-danger { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.badge-pill i, .badge-pill svg { width: 12px; height: 12px; }
.ci-tag {
    display: inline-flex; align-items: center;
    margin-left: .4rem; padding: .05rem .45rem;
    border-radius: var(--radius-pill);
    font-size: .66rem; font-weight: 600; line-height: 1.5;
    background: var(--bg-hover); color: var(--text-muted);
    border: 1px solid var(--border-light);
    vertical-align: middle; white-space: nowrap;
}
.ci-tag.is-danger { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.phone-btn.is-blocked { opacity: .6; }
.phone-btn.is-blocked i, .phone-btn.is-blocked svg { color: var(--danger); }

.kvkk-consent.is-muted { opacity: .7; }
.kvkk-consent.is-withdrawn {
    display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap;
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.kvkk-consent.is-withdrawn > i, .kvkk-consent.is-withdrawn > svg { width: 18px; height: 18px; color: var(--danger); flex-shrink: 0; margin-top: .1rem; }
.kvkk-consent.is-withdrawn strong { font-size: .84rem; color: var(--danger-text); }
.kvkk-wd-body { flex: 1; min-width: 180px; display: grid; gap: .15rem; }
.kvkk-wd-note { font-style: italic; }
.kvkk-wd-row {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    margin: -.5rem 0 1rem; padding: 0 .25rem;
}
.btn-wd { color: var(--danger-text); }
.btn-wd:hover:not(:disabled) { background: var(--danger-soft); }

/* Mesaj durumu çipi */
.wa-st {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; font-weight: 600; white-space: nowrap;
    color: var(--text-muted);
    padding: .1rem .45rem; border-radius: var(--radius-pill);
    background: var(--bg-hover);
}
.wa-st i, .wa-st svg { width: 13px; height: 13px; }
.wa-st.is-delivered { color: var(--text-secondary); }
.wa-st.is-read { color: #34B7F1; background: rgba(52,183,241,.12); }
.wa-st.is-failed { color: var(--danger-text); background: var(--danger-soft); }
.send-row-info .wa-st { margin-top: .25rem; }

/* Gelen kutusu kartı */
.wa-activity { margin-top: 1.25rem; }
.wa-act-head { flex-wrap: wrap; gap: .5rem; }
.wa-act-body { min-width: 0; }
.wa-act-hint { display: flex; align-items: center; gap: .35rem; padding: 0 1.25rem 1rem; }
.wa-act-hint i, .wa-act-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.wa-inbox, .wa-status-list { max-height: 460px; }
.wa-in-row {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.wa-in-row:last-child { border-bottom: none; }
.wa-in-row.is-unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.wa-in-row.is-optout { box-shadow: inset 3px 0 0 var(--danger); }
.wa-in-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-hover); color: var(--text-muted); flex-shrink: 0; }
.wa-in-avatar i, .wa-in-avatar svg { width: 16px; height: 16px; }
.wa-in-main { flex: 1; min-width: 0; }
.wa-in-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.wa-in-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wa-in-time { margin-left: auto; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.wa-in-sub { font-size: .74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-in-text { margin-top: .3rem; font-size: .84rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-in-text.is-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; color: var(--text-secondary); }
.wa-in-note { margin-top: .3rem; font-size: .72rem; color: var(--danger-text); }
.wa-in-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex-shrink: 0; }
.wa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: .25rem 1.25rem 1rem; }
.wa-kpi { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: .6rem .75rem; display: grid; gap: .1rem; background: var(--bg-card-2); min-width: 0; }
.wa-kpi strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wa-kpi span { font-size: .7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-kpi.is-read strong { color: #34B7F1; }
.wa-kpi.is-failed strong { color: var(--danger-text); }
@media (max-width: 640px) {
    .wa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .25rem 1rem 1rem; }
    .wa-in-row { padding: .75rem 1rem; flex-wrap: wrap; }
    .wa-in-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* ============================================================
   🎂 Otomatik kutlama kartı  ·  ⭐ anket otomatik teşekkürü
   ============================================================ */
.cel-body { padding: .25rem 1.25rem 1rem; }
.cel-lead { font-size: .84rem; line-height: 1.55; margin: .25rem 0 .75rem; }
.cel-today { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; font-size: .8rem; padding: .6rem .75rem; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card-2); margin-bottom: .25rem; }
.cel-today > span:first-child { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.cel-today i, .cel-today svg { width: 14px; height: 14px; }
.cel-today small { margin-left: auto; }
.cel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.cel-block { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: .85rem 1rem .75rem; min-width: 0; }
.cel-block-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem; margin-bottom: .6rem; }
.cel-block-title i, .cel-block-title svg { width: 16px; height: 16px; color: var(--accent-text); }
.cel-row { grid-template-columns: minmax(0, 1fr) 84px; }
.cel-row .form-group, .sv-at-fields .form-group { margin-bottom: .6rem; }
.cel-lang { max-width: 96px; }
.cel-check { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 400; color: var(--text-secondary); cursor: pointer; }
.cel-check input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.cel-help { margin-top: 1rem; border: 1px dashed var(--border-light); border-radius: var(--radius-lg); padding: .6rem .85rem; }
.cel-help summary { cursor: pointer; font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; list-style: none; }
.cel-help summary::-webkit-details-marker { display: none; }
.cel-help summary i, .cel-help summary svg { width: 15px; height: 15px; color: var(--accent-text); }
.cel-help-body { font-size: .8rem; line-height: 1.55; color: var(--text-secondary); padding-top: .6rem; }
.cel-help-body ol { padding-left: 1.2rem; margin: .4rem 0 .8rem; display: grid; gap: .25rem; }
.cel-sug { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: .65rem .8rem; margin: .6rem 0; background: var(--bg-card-2); min-width: 0; }
.cel-sug-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cel-sug-actions { display: inline-flex; gap: .2rem; flex-wrap: wrap; }
.cel-sug-name { font-size: .74rem; color: var(--text-muted); margin: .2rem 0 .45rem; }
.cel-sug-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: .8rem; line-height: 1.55; margin: 0; color: var(--text-primary); }
.cel-sug-body em { color: var(--text-muted); font-size: .74rem; }
.sd-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.sv-at-fields { transition: opacity var(--transition); }
.sv-at-fields.is-off { opacity: .45; pointer-events: none; }
.sv-at-fields .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; }
.sv-at-hint { display: flex; gap: .4rem; align-items: flex-start; margin-top: .6rem; line-height: 1.5; }
.sv-at-hint i, .sv-at-hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: .15rem; color: var(--success); }
.sv-at-note code { font-size: .78em; }
.sv-at-counts { margin-left: .35rem; }
.sv-kvkk-details { margin-top: .4rem; font-size: .8rem; }
.sv-kvkk-details summary { cursor: pointer; color: var(--accent-text); font-weight: 600; padding: .3rem 0; }
.sv-kvkk-details .kvkk-text { max-height: 260px; overflow: auto; padding: .5rem .25rem 0; }
@media (max-width: 760px) {
    .cel-grid { grid-template-columns: 1fr; }
    .sv-at-fields .form-row { grid-template-columns: 1fr; }
    .cel-lang { max-width: none; }
    .cel-body { padding: .25rem 1rem 1rem; }
    .cel-today small { margin-left: 0; width: 100%; }
}