/* ============================================================
 * Apartman · UI Polish Layer (loaded after glass.css)
 * ============================================================
 * Goals (in priority order):
 *  1. Topbar: bell stays inline with search at every viewport.
 *  2. Modals: scrollable when content > viewport, never half-cut.
 *  3. Form controls: time/date/select/checkbox/radio all on-brand.
 *  4. Notification drawer: dense premium glass, mobile-safe, the
 *     unread count in the header clears live (paired w/ JS patch).
 *  5. Tables / cards / page header: no horizontal overflow at any
 *     viewport, action buttons stack gracefully.
 * ============================================================ */

/* ── 0. EZAR.TR SATIN AL BARI · en üstte sabit, mobil + masaüstü ─
   Login dahil tüm sayfalarda görünür. Site içeriğine girmez —
   body padding-top ile yer açılır, içerik altta sıfırdan başlar. */

.ezar-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 30px;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .005em;
    color: #e9d5ff;
    background:
        linear-gradient(90deg, #2d1b69 0%, #3b0764 50%, #2d1b69 100%);
    border-bottom: 1px solid rgba(124, 58, 237, .35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}
.ezar-bar__shield { font-size: 12px; flex: 0 0 auto; opacity: .9; }
.ezar-bar__brand {
    flex: 0 0 auto;
    color: #fff;
}
.ezar-bar__brand strong {
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: .01em;
}
.ezar-bar__sep { opacity: .4; }
.ezar-bar__label {
    flex: 0 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: .8;
}
.ezar-bar__cta {
    margin-left: 6px;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px 3px 12px;
    border-radius: 99px;
    background: rgba(124, 58, 237, .25);
    border: 1px solid rgba(167, 139, 250, .5);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.ezar-bar__cta:hover { background: rgba(167, 139, 250, .4); border-color: #c4b5fd; transform: translateY(-1px); }
.ezar-bar__cta:active { transform: scale(.96); }

/* Body push: ezar-bar her zaman 30px yer kaplar */
body.has-ezar-bar {
    padding-top: 30px;
    /* ezar-bar fixed, demo banner statik — alt üste binmesinler */
}
/* Mobilde label'ı kısalt, ana eleman + CTA göster */
@media (max-width: 720px) {
    .ezar-bar { padding: 0 10px; font-size: 11px; gap: 6px; }
    .ezar-bar__label { display: none; }
    .ezar-bar__sep { display: none; }
}
@media (max-width: 380px) {
    .ezar-bar__brand { font-size: 10.5px; }
    .ezar-bar__cta { padding: 3px 8px; font-size: 10px; }
}

/* Demo banner: ezar-bar'ın altında doğal akışta — sticky'i kaldırıyoruz
   (ezar-bar fixed olduğu için yine üstte gözüküyor; demo-banner içerikle
   beraber kayıyor, chrome sticky pozisyonuna çatışmıyor). */
.demo-banner {
    position: static !important;
    z-index: auto !important;
}
body.has-ezar-bar.has-demo-banner { padding-top: 30px; }

/* ── 1. CHROME HEADER · sticky single bar ──────────────────
   Yeni layout: hamburger | başlık | (esnek boşluk) | search | bell | profile
   Demo banner aktifken üst boşluk için sticky offset 32px.
   Eski .topbar artık sadece sayfa başlığı için ikincil banner. */

.chrome {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px clamp(12px, 2vw, 18px);
    background: rgba(20, 18, 16, .72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    /* edge-to-edge sticky: pull into main padding without exceeding viewport */
    margin: calc(-1 * var(--sp-6, 24px)) calc(-1 * var(--sp-7, 28px)) var(--sp-5);
    box-sizing: border-box;
    width: auto;
    min-width: 0;
}
/* Chrome ezar-bar (30px) altından başlar; demo-banner statik akışta üstte
   olduğu için chrome onun altında doğal şekilde sticky kalır. */
.chrome { top: 30px; }
body.has-demo-banner .chrome { top: 30px; }   /* demo-banner statik akışta */
@media (max-width: 900px) {
    /* On mobile main padding is var(--sp-3) (~12px) so the negative margin
       must not exceed that or we get viewport overflow. */
    .chrome {
        margin-left: calc(-1 * var(--sp-3, 12px));
        margin-right: calc(-1 * var(--sp-3, 12px));
        margin-top: 0;
        padding: 8px 12px;
        gap: 6px;
        top: 30px;
    }
}

.chrome__btn {
    appearance: none;
    -webkit-appearance: none;
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    color: var(--text-primary, #e8e6e3);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    position: relative;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.chrome__btn svg { display: block; pointer-events: none; }
.chrome__btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.chrome__btn:active { transform: scale(.96); }

/* Hamburger butonu masaüstünde gizli (sidebar zaten açık), mobilde belirgin */
.chrome__menu { display: none; }
@media (max-width: 900px) {
    .chrome__menu {
        display: inline-flex;
        background: linear-gradient(135deg, rgba(210,156,105,.18), rgba(210,156,105,.08));
        border-color: rgba(210,156,105,.32);
        color: var(--accent, #d29c69);
    }
    .chrome__menu:hover { background: linear-gradient(135deg, rgba(210,156,105,.28), rgba(210,156,105,.14)); }
}

.chrome__title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    margin-left: 4px;
    flex: 0 1 auto;
    overflow: hidden;
}
.chrome__eyebrow {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-faint, rgba(255, 255, 255, .36));
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.chrome__heading {
    font-family: var(--font-display, 'Fraunces'), serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-primary, #e8e6e3);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) {
    .chrome__title { display: none; }   /* küçük ekranda yer yok, .topbar aşağıda gösteriyor */
}

.chrome__spacer { flex: 1 1 auto; min-width: 8px; }

.chrome__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

/* Search button — kompakt arama ikonu, masaüstünde ⌘K rozeti gösterir */
.chrome__search {
    width: auto;
    padding: 0 12px 0 12px;
    gap: 8px;
}
.chrome__search .chrome__kbd {
    font-family: var(--font-mono, ui-monospace), monospace;
    font-size: .68rem;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text-muted, #a8a39a);
    line-height: 1;
}
@media (max-width: 720px) {
    .chrome__search .chrome__kbd { display: none; }
    .chrome__search { width: 40px; padding: 0; }
}

/* Bell — base styling already provided by polish.css later, override sizing */
.chrome__bell { width: 40px; height: 40px; }
.chrome__bell .bell-count {
    /* polish.css'teki badge stili buraya da uygulanır, ekstra konum */
    top: -3px; right: -3px;
}

/* Profile button + dropdown */
.chrome__profile {
    width: auto;
    height: 40px;
    padding: 0 10px 0 6px;
    gap: 8px;
    border-radius: 99px;
}
.chrome__avatar {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d29c69, #b07d54);
    color: #1a120c;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .02em;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.chrome__profile-meta {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1.05;
    text-align: left;
}
.chrome__profile-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary, #e8e6e3);
    max-width: 14ch;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrome__profile-role {
    font-size: .65rem;
    color: var(--text-faint, rgba(255, 255, 255, .36));
    text-transform: uppercase;
    letter-spacing: .1em;
}
.chrome__profile-chev { color: var(--text-faint, rgba(255, 255, 255, .36)); transition: transform .15s; }
.chrome__profile[aria-expanded="true"] .chrome__profile-chev { transform: rotate(180deg); }
@media (max-width: 720px) {
    .chrome__profile-meta { display: none; }
    .chrome__profile-chev { display: none; }
    /* Mobilde profil butonu = sadece avatar; içerik mükemmel ortalı */
    .chrome__profile {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .chrome__profile .chrome__avatar {
        margin: 0 !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.chrome__profile-wrap { position: relative; }

/* "Satın al" pill — sağ tarafta sabit kalır, mobil + masaüstü */
.chrome__buy {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px;
    height: 40px;
    border-radius: 99px;
    background: linear-gradient(135deg, #d29c69, #b07d54);
    color: #1a120c;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    text-decoration: none;
    border: 1px solid rgba(210,156,105,.6);
    box-shadow: 0 4px 14px rgba(210,156,105,.32);
    transition: transform .15s, box-shadow .15s, filter .15s;
    flex: 0 0 auto;
    white-space: nowrap;
}
.chrome__buy:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(210,156,105,.42); filter: brightness(1.05); }
.chrome__buy:active { transform: scale(.96); }
.chrome__buy svg { width: 14px; height: 14px; }
.chrome__buy-label { line-height: 1; }
@media (max-width: 720px) {
    .chrome__buy { width: 40px; padding: 0; justify-content: center; border-radius: 12px; }
    .chrome__buy-label { display: none; }
    .chrome__buy svg { width: 18px; height: 18px; }
}

/* ── 1c. SIDEBAR (mobil) — chrome'un altında açılır ───────────── */

@media (max-width: 900px) {
    /* Old layout had a floating hamburger (56px) — sol pad'i temizle.
       Üstte ezar-bar (30px) + chrome (56px) var, sidebar onların altından başlasın. */
    .sidebar {
        padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 24px) 16px !important;
        top: 86px !important;            /* 30 ezar-bar + 56 chrome */
        bottom: 0 !important;            /* viewport altına kadar uzansın */
        height: auto !important;         /* glass.css'teki bottom:0 ile birlikte 100vh-86 yüksekliği */
        max-height: calc(100vh - 86px) !important;
        z-index: 55 !important;          /* chrome (60) altında */
        max-width: 88vw !important;
        width: 320px !important;
        background: linear-gradient(180deg, rgba(28,24,20,.98), rgba(20,18,16,.99)) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: 1px solid rgba(255,255,255,.06);
        box-shadow: 24px 0 64px rgba(0,0,0,.5);
        animation: chromeSidebarIn .25s cubic-bezier(.16,1,.3,1);
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-backdrop {
        z-index: 50 !important;          /* sidebar (55) altında */
        top: 86px;
    }

    .sidebar.open { transform: translateX(0); }

    /* Eski ".main" 64px üst padding'i artık gerekmiyor (floating hamburger yok) */
    .main { padding: 0 var(--sp-3) var(--sp-5) !important; max-width: 100vw; }
    /* Eski .topbar üst boşluğunu chrome'a göre ayarla — ikincil banner */
    .topbar { padding-top: var(--sp-4); padding-right: 0; }
}
@keyframes chromeSidebarIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
.sidebar.open { animation: chromeSidebarIn .25s cubic-bezier(.16,1,.3,1); }
.chrome__menu-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(28, 24, 20, .96);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
    z-index: 80;
    animation: chromeMenuIn .14s ease-out;
}
@keyframes chromeMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chrome__menu-pop[hidden] { display: none; }
.chrome__menu-head {
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    margin-bottom: 4px;
}
.chrome__menu-name { font-size: .9rem; font-weight: 600; color: var(--text-primary, #e8e6e3); }
.chrome__menu-mail { font-size: .72rem; color: var(--text-muted, #a8a39a); margin-top: 2px; word-break: break-all; }
.chrome__menu-item, .chrome__menu-logout {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text-primary, #e8e6e3);
    text-decoration: none;
    font-size: .86rem;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background .12s, color .12s;
    font-family: inherit;
}
.chrome__menu-item:hover, .chrome__menu-logout:hover { background: rgba(255, 255, 255, .05); }
.chrome__menu-sep { height: 1px; background: rgba(255, 255, 255, .05); margin: 4px 0; }
.chrome__menu-item--danger .chrome__menu-logout { color: #d2725f; }
.chrome__menu-item--danger .chrome__menu-logout:hover { background: rgba(210, 114, 95, .1); color: #e08773; }
.chrome__menu-item--danger { padding: 0; margin: 0; }

/* ── 1b. .topbar (eski) — şimdi sadece ikincil sayfa başlık banner'ı ─ */

.topbar {
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: flex-end;
    margin-bottom: var(--sp-5);
}
.topbar > :first-child { min-width: 0; flex: 1 1 auto; }
.topbar h1 { min-width: 0; word-break: break-word; }
/* Eski .topbar içindeki standalone search/bell artık layout'tan kaldırıldı,
   ama defansif: bir sayfa elle koyduysa düzgün görünmeye devam etsin. */
.topbar .search { display: none; }   /* yerini chrome aldı */
.bell-mobile { display: none !important; }   /* eski floating bell kullanılmıyor */

/* ── 2. MODAL · SCROLLABLE & ROBUST ───────────────────────── */

.modal-backdrop {
    /* Was: display:grid; place-items:center → modal could exceed viewport.
       Switch to flex column with overflow:auto so a tall modal scrolls. */
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(8px, 4vh, 56px) clamp(8px, 4vw, 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal {
    width: min(580px, 100%);
    max-width: 100%;
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: clamp(20px, 4vw, 32px);
    border-radius: var(--r-3, 20px);
    overflow: hidden;
}
.modal > h2,
.modal > h3 {
    flex: 0 0 auto;
    margin-bottom: var(--sp-4);
    padding-right: 36px;       /* leave room for an absolute close button if any */
}
.modal > .modal-body,
.modal > form,
.modal > .col,
.modal > .row {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* breathing room on the inner scroll edge so the last field isn't
       glued to the action bar */
    padding-bottom: 4px;
    /* slim premium scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.modal > form::-webkit-scrollbar,
.modal > .modal-body::-webkit-scrollbar,
.modal > .col::-webkit-scrollbar { width: 6px; }
.modal > form::-webkit-scrollbar-thumb,
.modal > .modal-body::-webkit-scrollbar-thumb,
.modal > .col::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }

/* Sticky action bar at the bottom of the modal —
   .actions çoğunlukla form içinde (form sticky-y scroll context).
   Form scroll edilirken actions altta sabit duruyor. */
.modal form, .modal .modal-body, .modal .col, .modal .row { position: relative; }
.modal .actions {
    position: sticky;
    bottom: 0;
    /* form padding'siz, kart kenarına dayanan tam genişlik bar */
    margin-top: var(--sp-4);
    padding: var(--sp-4) 0 0;
    background: linear-gradient(180deg, transparent 0%, rgba(20,18,16,.85) 35%, rgba(20,18,16,.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.modal .actions::before {
    /* incelikli ayırıcı çizgi — gradient'in üstünden geçer */
    content: "";
    position: absolute;
    left: -2px; right: -2px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
    pointer-events: none;
}
.modal .actions .btn { min-width: 0; }
@media (max-width: 480px) {
    .modal .actions { gap: var(--sp-2); justify-content: stretch; }
    .modal .actions .btn { flex: 1 1 auto; }
}

/* ── 3. FORM CONTROLS · POLISHED ──────────────────────────── */

/* All native form fields share the field aesthetic */
input, textarea, select,
.field input, .field textarea, .field select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="search"],
input[type="url"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="month"], input[type="week"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: var(--bg-veil-2, rgba(255,255,255,.04));
    border: 1px solid var(--bg-glass-edge, rgba(255,255,255,.08));
    color: var(--text-primary, #e8e6e3);
    padding: 11px 14px;
    border-radius: var(--r-2, 12px);
    font: inherit;
    font-size: .92rem;
    line-height: 1.4;
    transition: border-color var(--d-base, .18s) var(--ease-linear, ease),
                background var(--d-base, .18s) var(--ease-linear, ease),
                box-shadow var(--d-base, .18s) var(--ease-linear, ease);
    color-scheme: dark;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent, #d29c69);
    background: var(--bg-glass, rgba(255,255,255,.05));
    box-shadow: 0 0 0 3px rgba(210,156,105,.14);
}
input::placeholder, textarea::placeholder { color: var(--text-faint, rgba(255,255,255,.32)); }

/* Inline time inputs (the ones in "Sessiz saatler") */
input[type="time"], input[type="date"], input[type="datetime-local"] {
    width: auto;
    min-width: 110px;
    padding: 9px 12px;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace), monospace;
    letter-spacing: .02em;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(.7) sepia(.4) saturate(2) hue-rotate(360deg);
    opacity: .7;
    cursor: pointer;
    margin-left: 4px;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* SELECT — custom chevron */
select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a5a097' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
select option { background: #1a1612; color: #e8e6e3; }

/* TEXTAREA */
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* CHECKBOX & RADIO — custom paint */
input[type="checkbox"], input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    flex: 0 0 auto;
    border: 1.5px solid var(--bg-glass-edge, rgba(255,255,255,.18));
    background: var(--bg-veil-2, rgba(255,255,255,.04));
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: 0;
    transition: background var(--d-base, .18s) var(--ease-linear, ease),
                border-color var(--d-base, .18s) var(--ease-linear, ease);
    vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent, #d29c69); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: var(--accent, #d29c69);
    border-color: var(--accent, #d29c69);
}
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23120e0a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,7 6,11 12,3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #120e0a;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(210,156,105,.22);
    outline: none;
}

/* checkbox row ergonomics — make the whole row clickable look */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 6px 4px;
    border-radius: 8px;
}
label:has(> input[type="checkbox"]):hover,
label:has(> input[type="radio"]):hover { background: rgba(255,255,255,.03); }

/* ── 4. NOTIFICATION DRAWER · ULTRA REDESIGN ─────────────── */

.notif-drawer-back {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(210,156,105,.08), transparent 50%),
                rgba(8,8,12,.55);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    z-index: 200;
    animation: notif-back-in .25s var(--ease-linear, ease) both;
}
@keyframes notif-back-in { from { opacity: 0 } to { opacity: 1 } }

.notif-drawer {
    position: fixed;
    top: 30px;            /* ezar-bar (30px) altından başlasın */
    right: 0; bottom: 0;
    width: min(420px, 100vw);
    background: linear-gradient(180deg, rgba(28,24,20,.96), rgba(20,18,16,.98));
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-left: 1px solid rgba(255,255,255,.06);
    box-shadow: -24px 0 64px rgba(0,0,0,.5),
                inset 1px 0 0 rgba(255,255,255,.04);
    display: flex;
    flex-direction: column;
    z-index: 210;
    animation: notif-drawer-in .32s cubic-bezier(.16,1,.3,1) both;
    color: var(--text-primary, #e8e6e3);
    overflow: hidden;
}
.notif-drawer-back {
    top: 30px;            /* drawer ile aynı offset */
}
@keyframes notif-drawer-in { from { transform: translateX(40px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

.notif-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: clamp(14px, 3vw, 20px) clamp(16px, 3vw, 24px);
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.notif-drawer__head h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: -.01em;
}
.notif-drawer__head .row { gap: 6px; }

.notif-unread-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    border-radius: 99px;
    background: linear-gradient(135deg, #e0a572, #d29c69);
    color: #120e0a;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(210,156,105,.35);
}

.notif-drawer__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    flex: 0 0 auto;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.notif-drawer__close:hover {
    background: rgba(210,156,105,.16);
    border-color: rgba(210,156,105,.5);
    color: var(--accent, #d29c69);
    transform: rotate(90deg);
}
.notif-drawer__close:active { transform: rotate(90deg) scale(.92); }
@media (max-width: 540px) {
    .notif-drawer__close { width: 40px; height: 40px; font-size: 1.1rem; }
}

#mark-all {
    font-size: .78rem !important;
    padding: 6px 10px !important;
    border-radius: 99px !important;
    background: rgba(210,156,105,.08) !important;
    color: var(--accent, #d29c69) !important;
    border: 1px solid rgba(210,156,105,.18) !important;
    transition: background .15s, border-color .15s !important;
}
#mark-all:hover { background: rgba(210,156,105,.16) !important; text-decoration: none !important; }

.notif-drawer__list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
.notif-drawer__list::-webkit-scrollbar { width: 6px; }
.notif-drawer__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }

.notif-day {
    padding: 12px clamp(16px, 3vw, 24px) 4px;
}
.notif-day__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-faint, rgba(255,255,255,.34));
    font-weight: 600;
    margin-bottom: 8px;
    padding: 0 4px;
}

.notif-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 -2px 4px;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .15s;
    border: 1px solid transparent;
    position: relative;
}
.notif-item:hover {
    background: rgba(255,255,255,.04);
    transform: translateX(2px);
}
.notif-item.unread {
    background: linear-gradient(90deg, rgba(210,156,105,.10), rgba(210,156,105,.02) 60%);
    border-color: rgba(210,156,105,.18);
}
.notif-item.unread::before {
    content: "";
    position: absolute;
    left: -1px; top: 50%;
    width: 3px; height: 22px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #e0a572, #d29c69);
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(210,156,105,.5);
}
.notif-item__icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    font-size: 1rem;
    line-height: 1;
}
.notif-item.unread .notif-item__icon {
    background: linear-gradient(135deg, rgba(210,156,105,.20), rgba(210,156,105,.06));
    border-color: rgba(210,156,105,.28);
}
.notif-item__body { min-width: 0; flex: 1 1 auto; }
.notif-item__title {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--text-primary, #e8e6e3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.notif-item__text {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-muted, #a8a39a);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.notif-item__time {
    font-size: .7rem;
    color: var(--text-faint, rgba(255,255,255,.32));
    font-family: var(--font-mono, ui-monospace), monospace;
    margin-top: 6px;
    letter-spacing: .02em;
}

.notif-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-muted, #a8a39a);
}
.notif-empty .ico {
    font-size: 2.4rem;
    margin-bottom: 14px;
    color: var(--text-faint, rgba(255,255,255,.28));
}

.notif-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px clamp(16px, 3vw, 24px) calc(env(safe-area-inset-bottom, 0px) + 12px);
    border-top: 1px solid rgba(255,255,255,.05);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.2));
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.notif-foot .btn-link { font-size: .82rem; }

/* Mobile drawer = full screen */
@media (max-width: 540px) {
    .notif-drawer {
        width: 100vw;
        border-left: 0;
    }
    .notif-drawer__head { padding: 14px 16px; }
    .notif-day { padding: 10px 14px 4px; }
    .notif-item { padding: 12px 12px; gap: 10px; }
    .notif-item__title { font-size: .9rem; }
}

/* ── 5. BELL BADGE · subtle scale + readable on small ────── */

.bell-count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: linear-gradient(135deg, #e0a572, #d29c69);
    color: #120e0a;
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-veil, rgba(20,18,16,.9));
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── 6. ACTION BUTTONS / PAGE HEADERS · responsive ───────── */

.row.between {
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.row.between > * { min-width: 0; }
.row.between > .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
    .row.between > p { flex: 1 1 100%; }
    .row.between > .btn { width: 100%; }
}

/* Forms inside cards: stack the rows (`.row` wraps fine but force gap) */
.card form .row { gap: var(--sp-3); }
.card form .row > .field { flex: 1 1 220px; min-width: 0; }

/* ── 6b. CMD-K (arama) overlay · mobil + masaüstü düzgün ortalanır ─ */

/* .modal-backdrop polish.css'te flex; .cmdk eski tanımı position:fixed ve
   transform:translateX(-50%) ile bunu boz uyor → mobilde sağa kayıyor.
   Burada flex çocuğu olarak normalleştir. */
.modal-backdrop > .cmdk {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(640px, 100%) !important;
    max-width: 100% !important;
    margin: clamp(8px, 6vh, 80px) auto !important;
    padding: 0 !important;
    border-radius: clamp(14px, 2vw, 20px) !important;
    overflow: hidden !important;
}
.modal-backdrop > .cmdk input {
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 16px 18px !important;
    font-size: 16px !important;            /* iOS auto-zoom önler */
    color: var(--text-primary, #e8e6e3) !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}
.modal-backdrop > .cmdk input:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.modal-backdrop > .cmdk ul {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-backdrop > .cmdk li {
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .92rem;
    line-height: 1.3;
    transition: background .12s, transform .12s;
}
.modal-backdrop > .cmdk li.active,
.modal-backdrop > .cmdk li:hover {
    background: var(--bg-glass-hi, rgba(255,255,255,.08));
    transform: translateX(2px);
}
.modal-backdrop > .cmdk .cmdk-icon {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    line-height: 1;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    margin-top: 1px;
}
.modal-backdrop > .cmdk .cmdk-body {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; flex: 1 1 auto;
}
.modal-backdrop > .cmdk .cmdk-title {
    font-weight: 600;
    color: var(--text-primary, #e8e6e3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-backdrop > .cmdk .cmdk-sub {
    font-size: .76rem;
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-muted, #9aa3b2);
}
.modal-backdrop > .cmdk .cmdk-section-label {
    font-size: .64rem !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint, rgba(255,255,255,.36));
    padding: 10px 14px 4px !important;
    background: transparent !important;
    transform: none !important;
    cursor: default !important;
}
.modal-backdrop > .cmdk .cmdk-section-label:hover {
    background: transparent !important;
    transform: none !important;
}
.modal-backdrop > .cmdk .cmdk-empty {
    color: var(--text-muted, #9aa3b2);
}
.modal-backdrop > .cmdk-status {
    color: var(--text-faint, rgba(255,255,255,.4)) !important;
    font-size: .72rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
/* Lumen — cmdk gruplandırılmış sonuçlar */
:root[data-theme="lumen"] .modal-backdrop > .cmdk .cmdk-icon {
    background: rgba(176, 125, 84, .08) !important;
    color: var(--accent, #b07d54) !important;
}
:root[data-theme="lumen"] .modal-backdrop > .cmdk .cmdk-title { color: #0b0d12 !important; }
:root[data-theme="lumen"] .modal-backdrop > .cmdk .cmdk-sub { color: #6e7388 !important; }
:root[data-theme="lumen"] .modal-backdrop > .cmdk .cmdk-section-label { color: var(--accent, #b07d54) !important; }

/* Lumen modunda cmd-k beyaz cam + koyu yazı */
:root[data-theme="lumen"] .modal-backdrop > .cmdk {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 250, 245, .96)) !important;
    border: 1px solid rgba(60, 40, 20, .10) !important;
    box-shadow: 0 24px 60px rgba(60, 40, 20, .22) !important;
}
:root[data-theme="lumen"] .modal-backdrop > .cmdk input {
    color: #0b0d12 !important;
    -webkit-text-fill-color: #0b0d12 !important;
    border-bottom-color: rgba(60, 40, 20, .10) !important;
}
:root[data-theme="lumen"] .modal-backdrop > .cmdk input::placeholder { color: #8a90a4 !important; }
:root[data-theme="lumen"] .modal-backdrop > .cmdk li { color: #1a1714 !important; }
:root[data-theme="lumen"] .modal-backdrop > .cmdk li.active,
:root[data-theme="lumen"] .modal-backdrop > .cmdk li:hover {
    background: rgba(176, 125, 84, .10) !important;
    color: #0b0d12 !important;
}

/* Mobil — cmdk üstten 16px boşlukla başlasın */
@media (max-width: 640px) {
    .modal-backdrop > .cmdk {
        margin: 16px auto !important;
        width: 100% !important;
        border-radius: 16px !important;
    }
    .modal-backdrop > .cmdk ul { max-height: calc(100vh - 200px); }
}

/* ── 6c. DAIRE / GENEL DRAWER · ezar-bar offset + premium close ── */

.drawer {
    top: 30px !important;     /* ezar-bar altından başlasın */
}
.drawer-backdrop {
    top: 30px;
}
@media (max-width: 540px) {
    .drawer { top: 30px !important; }
    .drawer-backdrop { top: 30px; }
}

/* data-close veya data-cancel butonları drawer/modal'da premium ✕ */
.drawer [data-close],
.modal [data-close],
.modal [data-cancel].close-x,
.drawer .close-x {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    transition: background .15s, border-color .15s, color .15s, transform .15s !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.drawer [data-close]:hover,
.modal [data-close]:hover {
    background: rgba(210, 156, 105, .18) !important;
    border-color: rgba(210, 156, 105, .55) !important;
    color: var(--accent, #d29c69) !important;
    transform: rotate(90deg) !important;
}
.drawer [data-close]:active,
.modal [data-close]:active { transform: rotate(90deg) scale(.92) !important; }

@media (max-width: 540px) {
    .drawer [data-close], .modal [data-close] {
        width: 40px !important; height: 40px !important;
        font-size: 1.15rem !important;
    }
}

/* ── 6d. STRUCTURE — rename / yeni blok / yeni kat modal mobil ─── */

.modal .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
@media (max-width: 540px) {
    .modal .field-row { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* "Yeni blok / yeni kat / yeniden adlandır" gibi kısa modal'lar mobilde
   sıkışmasın — daha cömert padding + buton genişliği */
@media (max-width: 540px) {
    .modal h3 { font-size: 1.1rem; line-height: 1.3; }
    .modal .field label { font-size: .82rem; margin-bottom: 4px; }
    .modal .field input,
    .modal .field select,
    .modal .field textarea { font-size: 1rem; padding: 12px 14px; } /* iOS zoom önler */
}

/* Yapı modülü — blok kartında "rename" + apt grid mobilde okunaklı */
.block-card .row.between { flex-wrap: wrap; gap: 8px; }
.block-card .row.between > * { min-width: 0; }
@media (max-width: 540px) {
    .block-card { padding: var(--sp-4); }
    .block-card h3 { font-size: 1rem; }
    .floor-row { flex-wrap: wrap; }
    .floor-label { width: auto; flex: 1 1 100%; font-size: .72rem; margin-bottom: 2px; }
    .apt { width: 36px; height: 36px; }
    .apt-grid { gap: 5px; }
}

/* ── 7a. EXPORT MODAL · column picker, filters, format cards ──── */
.export-form { display: flex; flex-direction: column; gap: 18px; }
.export-section { display: flex; flex-direction: column; gap: 10px; }
.export-section-title {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--text-faint, rgba(255,255,255,.36));
    font-weight: 600;
}
.export-filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.export-cols { display: flex; flex-direction: column; gap: 8px; }
.export-col-toolbar { display: flex; gap: 4px; flex-wrap: wrap; }
.export-col-toolbar .btn-link {
    font-size: .72rem; padding: 4px 8px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
}
.export-col-toolbar .btn-link:hover {
    background: rgba(210,156,105,.10); border-color: rgba(210,156,105,.22);
    color: var(--accent, #d29c69); text-decoration: none;
}
.export-col-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 4px;
    padding: 10px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
    max-height: 240px; overflow-y: auto;
}
.export-col {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px;
    cursor: pointer; user-select: none;
    font-size: .82rem;
}
.export-col:hover { background: rgba(255,255,255,.04); }
.export-col input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 16px; }
.export-format { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.export-format-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255,255,255,.02);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.export-format-card:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.export-format-card:has(input:checked) {
    background: rgba(210,156,105,.06);
    border-color: rgba(210,156,105,.32);
    box-shadow: 0 0 0 3px rgba(210,156,105,.08);
}
.export-format-card input[type=radio] { margin-top: 4px; flex: 0 0 18px; }
.export-format-card > div { display: flex; flex-direction: column; gap: 2px; }
.export-format-card strong { font-size: .92rem; }
.export-format-card .muted { font-size: .72rem; }

/* ── 7b. MOBİL UYGULAMA showcase ──────────────────────────────── */
.mobil-hero {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 48px);
    padding: clamp(28px, 5vw, 56px);
    border-radius: clamp(20px, 3vw, 32px);
    background:
        radial-gradient(circle at 90% 20%, rgba(210,156,105,.12), transparent 50%),
        linear-gradient(160deg, rgba(28,24,20,.92), rgba(20,18,16,.92));
    border: 1px solid rgba(255,255,255,.06);
    align-items: center;
    overflow: hidden;
    position: relative;
}
@media (max-width: 760px) { .mobil-hero { grid-template-columns: 1fr; } }
.mobil-hero h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 14px; line-height: 1.1; }
.mobil-hero .muted { font-size: .98rem; line-height: 1.6; max-width: 52ch; margin-bottom: 22px; }
.mobil-cta {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.mobil-cta .store-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: #0a0a0a;
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .15s, border-color .15s;
}
.mobil-cta .store-btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.mobil-cta .store-btn small {
    display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.mobil-cta .store-btn strong { font-size: .98rem; font-weight: 600; }
.mobil-phones {
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
}
.mobil-phone {
    position: absolute;
    width: 56%; aspect-ratio: 9 / 19.5;
    border-radius: 30px;
    background: linear-gradient(160deg, #1a1612, #0f0d0a);
    border: 1.5px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    overflow: hidden;
    padding: 8px;
}
.mobil-phone::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 64px; height: 14px; background: #0a0807; border-radius: 99px;
}
.mobil-phone-screen {
    width: 100%; height: 100%; border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(210,156,105,.10), transparent 30%),
        linear-gradient(180deg, #1c1814, #0f0d0a);
    border: 1px solid rgba(255,255,255,.04);
    padding: 28px 14px 14px;
    display: flex; flex-direction: column; gap: 8px;
    color: #e8e6e3;
    font-size: .68rem;
}
.mobil-phone--left  { transform: rotate(-6deg) translate(-22%, 0); }
.mobil-phone--right { transform: rotate( 6deg) translate( 22%, 0); z-index: 1; }
.mobil-phone-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 9px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.04);
}
.mobil-phone-dot {
    width: 8px; height: 8px; border-radius: 99px; background: var(--accent, #d29c69); flex: 0 0 8px;
    box-shadow: 0 0 6px rgba(210,156,105,.6);
}
.mobil-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-top: 24px;
}
.mobil-feature {
    padding: 18px; border-radius: 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
}
.mobil-feature .ico { font-size: 1.4rem; margin-bottom: 8px; display: block; }
.mobil-feature h4 { font-size: 1rem; margin: 0 0 6px; font-weight: 600; }
.mobil-feature p  { font-size: .82rem; color: var(--text-muted, #a8a39a); line-height: 1.5; margin: 0; }

/* ── 7c. PAGE HEADER · row.between robust ────────────────────── */
@media (max-width: 540px) {
    .row.between {
        flex-direction: row; flex-wrap: wrap; align-items: center;
    }
    .row.between > .row { flex: 1 1 100%; justify-content: stretch; }
    .row.between > .row > .btn { flex: 1 1 auto; }
}

/* ── 7d. LUMEN (cam efektli aydınlık mod) — premium glassmorphism ── */

:root[data-theme="lumen"] body {
    background:
        radial-gradient(ellipse 1300px 800px at 8% -5%,  rgba(176, 125, 84, .18), transparent 55%),
        radial-gradient(ellipse 1000px 700px at 100% 25%, rgba(91, 138, 138, .14), transparent 55%),
        radial-gradient(ellipse 1100px 800px at 50% 115%, rgba(176, 125, 84, .12), transparent 60%),
        linear-gradient(160deg, #f7f6f1 0%, #efeae0 40%, #e6dfd1 100%) !important;
    background-attachment: fixed !important;
    color: #0b0d12 !important;
}
/* Tüm temel metin: koyu lacivert/siyah, yüksek kontrast */
:root[data-theme="lumen"] {
    color: #0b0d12;
}
:root[data-theme="lumen"] body,
:root[data-theme="lumen"] h1,
:root[data-theme="lumen"] h2,
:root[data-theme="lumen"] h3,
:root[data-theme="lumen"] h4,
:root[data-theme="lumen"] h5,
:root[data-theme="lumen"] p,
:root[data-theme="lumen"] li,
:root[data-theme="lumen"] td,
:root[data-theme="lumen"] th,
:root[data-theme="lumen"] strong,
:root[data-theme="lumen"] em,
:root[data-theme="lumen"] span,
:root[data-theme="lumen"] label,
:root[data-theme="lumen"] .topbar h1,
:root[data-theme="lumen"] .card .value,
:root[data-theme="lumen"] .value {
    color: #0b0d12;
}
:root[data-theme="lumen"] .muted,
:root[data-theme="lumen"] .card .label,
:root[data-theme="lumen"] .card .value small {
    color: #4a5066 !important;
}
:root[data-theme="lumen"] .faint,
:root[data-theme="lumen"] .eyebrow {
    color: #6e7388 !important;
}

/* Glass kartları aydınlık modda parlak cam efektli — daha güçlü blur */
:root[data-theme="lumen"] .glass,
:root[data-theme="lumen"] .glass.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .48)) !important;
    border: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 -1px 0 rgba(255, 255, 255, .35) inset,
        0 14px 40px -16px rgba(60, 40, 20, .14),
        0 2px 6px rgba(60, 40, 20, .05) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    color: #0b0d12;
}
/* Stat kartları premium: değerler büyük + koyu, kintsugi accent çizgisi */
:root[data-theme="lumen"] .card .value {
    color: #0b0d12 !important;
    font-weight: 600;
    background: linear-gradient(135deg, #1a1714, #4a3a2a);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
:root[data-theme="lumen"] .card .label {
    color: #6e7388 !important;
    font-weight: 600;
}
:root[data-theme="lumen"] .glass.kintsugi {
    background:
        radial-gradient(circle at 100% 0%, rgba(176, 125, 84, .12), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .54)) !important;
    border: 1px solid rgba(176, 125, 84, .25) !important;
}

/* Sidebar — beyaz cam, daha güçlü blur */
:root[data-theme="lumen"] .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(250, 246, 238, .56)) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    border-right: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow:
        1px 0 0 rgba(255, 255, 255, .9) inset,
        4px 0 24px rgba(60, 40, 20, .06) !important;
    color: #0b0d12;
}
:root[data-theme="lumen"] .sidebar .brand strong { color: #0b0d12; font-weight: 600; }
:root[data-theme="lumen"] .sidebar nav a {
    color: #4a5066 !important;
    font-weight: 500;
}
:root[data-theme="lumen"] .sidebar nav a .nav-icon { opacity: .8; }
:root[data-theme="lumen"] .sidebar nav a:hover {
    background: rgba(176, 125, 84, .10) !important;
    color: #1a1714 !important;
}
:root[data-theme="lumen"] .sidebar nav a:hover .nav-icon { opacity: 1; }
:root[data-theme="lumen"] .sidebar nav a.active {
    background: linear-gradient(135deg, rgba(176, 125, 84, .20), rgba(176, 125, 84, .08)) !important;
    color: #1a1714 !important;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 8px rgba(176, 125, 84, .12) !important;
}
:root[data-theme="lumen"] .sidebar nav a.active .nav-icon { color: var(--accent, #b07d54); }
:root[data-theme="lumen"] .sidebar .nav-section { color: #6e7388 !important; }
:root[data-theme="lumen"] .nav-icon svg { stroke: currentColor; }

/* Chrome bar — premium beyaz cam */
:root[data-theme="lumen"] .chrome {
    background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .48)) !important;
    border-bottom: 1px solid rgba(60, 40, 20, .08) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 4px 24px rgba(60, 40, 20, .05),
        0 1px 0 rgba(60, 40, 20, .04) !important;
}
:root[data-theme="lumen"] .chrome__btn {
    border: 1px solid rgba(60, 40, 20, .14) !important;
    background: rgba(255, 255, 255, .75) !important;
    color: #1a1714 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(60,40,20,.04);
}
:root[data-theme="lumen"] .chrome__btn:hover {
    background: #fff !important;
    border-color: rgba(60, 40, 20, .22) !important;
    color: #0b0d12 !important;
}
/* SVG ikonları (search, bell, profile chev, hamburger) lumen modda görünür siyah */
:root[data-theme="lumen"] .chrome__btn svg,
:root[data-theme="lumen"] .chrome__btn svg * {
    stroke: #1a1714 !important;
}
:root[data-theme="lumen"] .chrome__menu svg,
:root[data-theme="lumen"] .chrome__menu svg * {
    stroke: var(--accent, #b07d54) !important;   /* hamburger accent */
}
/* Bell badge hâlâ accent, ama sayı koyu okunsun */
:root[data-theme="lumen"] .bell-count {
    background: linear-gradient(135deg, #c08a5e, #9e6e48) !important;
    color: #fff !important;
}
:root[data-theme="lumen"] .chrome__menu {
    background: linear-gradient(135deg, rgba(176, 125, 84, .14), rgba(176, 125, 84, .06)) !important;
    border-color: rgba(176, 125, 84, .35) !important;
    color: var(--accent, #b07d54) !important;
}
:root[data-theme="lumen"] .chrome__avatar {
    background: linear-gradient(135deg, #c08a5e, #9e6e48) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    font-weight: 700;
}
:root[data-theme="lumen"] .chrome__heading { color: #0b0d12 !important; font-weight: 600; }
:root[data-theme="lumen"] .chrome__eyebrow { color: #6e7388 !important; }
:root[data-theme="lumen"] .chrome__profile-name { color: #0b0d12 !important; font-weight: 600; }
:root[data-theme="lumen"] .chrome__profile-role { color: #6e7388 !important; }
:root[data-theme="lumen"] .chrome__profile-chev { color: #4a5066 !important; }
:root[data-theme="lumen"] .chrome__profile-chev * { stroke: #4a5066 !important; }

/* Profil dropdown popover — beyaz cam, koyu yazı */
:root[data-theme="lumen"] .chrome__menu-pop {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 250, 245, .96)) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border: 1px solid rgba(60, 40, 20, .10) !important;
    box-shadow: 0 24px 48px rgba(60, 40, 20, .18), 0 1px 0 rgba(255,255,255,.95) inset !important;
}
:root[data-theme="lumen"] .chrome__menu-head {
    border-bottom: 1px solid rgba(60, 40, 20, .08) !important;
}
:root[data-theme="lumen"] .chrome__menu-name { color: #0b0d12 !important; font-weight: 600; }
:root[data-theme="lumen"] .chrome__menu-mail { color: #6e7388 !important; }
:root[data-theme="lumen"] .chrome__menu-item,
:root[data-theme="lumen"] .chrome__menu-logout {
    color: #1a1714 !important;
}
:root[data-theme="lumen"] .chrome__menu-item svg,
:root[data-theme="lumen"] .chrome__menu-item svg *,
:root[data-theme="lumen"] .chrome__menu-logout svg,
:root[data-theme="lumen"] .chrome__menu-logout svg * {
    stroke: #4a5066 !important;
}
:root[data-theme="lumen"] .chrome__menu-item:hover,
:root[data-theme="lumen"] .chrome__menu-logout:hover {
    background: rgba(176, 125, 84, .10) !important;
    color: #0b0d12 !important;
}
:root[data-theme="lumen"] .chrome__menu-item:hover svg *,
:root[data-theme="lumen"] .chrome__menu-logout:hover svg * {
    stroke: var(--accent, #b07d54) !important;
}
:root[data-theme="lumen"] .chrome__menu-sep { background: rgba(60, 40, 20, .08) !important; }
:root[data-theme="lumen"] .chrome__menu-item--danger .chrome__menu-logout {
    color: #b6493b !important;
}
:root[data-theme="lumen"] .chrome__menu-item--danger .chrome__menu-logout svg * {
    stroke: #b6493b !important;
}
:root[data-theme="lumen"] .chrome__menu-item--danger .chrome__menu-logout:hover {
    background: rgba(182, 73, 59, .10) !important;
    color: #8b342a !important;
}
:root[data-theme="lumen"] .chrome__kbd {
    background: rgba(60, 40, 20, .06) !important;
    border-color: rgba(60, 40, 20, .12) !important;
    color: var(--text-muted, #50556b) !important;
}

/* Modal + drawer */
:root[data-theme="lumen"] .modal-backdrop {
    background: rgba(60, 50, 35, .25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="lumen"] .modal,
:root[data-theme="lumen"] .drawer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(252, 250, 245, .94)) !important;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 80px -20px rgba(60, 40, 20, .25);
}
:root[data-theme="lumen"] .modal h2,
:root[data-theme="lumen"] .modal h3,
:root[data-theme="lumen"] .drawer h2,
:root[data-theme="lumen"] .drawer h3 { color: var(--text-primary, #0b0d12); }

/* Input/select/textarea — aydınlık glass; YAZARKEN net siyah görünür */
:root[data-theme="lumen"] input,
:root[data-theme="lumen"] textarea,
:root[data-theme="lumen"] select,
:root[data-theme="lumen"] input[type="text"],
:root[data-theme="lumen"] input[type="email"],
:root[data-theme="lumen"] input[type="tel"],
:root[data-theme="lumen"] input[type="password"],
:root[data-theme="lumen"] input[type="number"],
:root[data-theme="lumen"] input[type="search"],
:root[data-theme="lumen"] input[type="date"],
:root[data-theme="lumen"] input[type="time"],
:root[data-theme="lumen"] input[type="datetime-local"] {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(60, 40, 20, .14) !important;
    color: #0b0d12 !important;
    caret-color: #0b0d12;
    -webkit-text-fill-color: #0b0d12;          /* iOS otomatik beyaz override yapmasın */
    color-scheme: light;
}
:root[data-theme="lumen"] input::placeholder,
:root[data-theme="lumen"] textarea::placeholder {
    color: #8a90a4 !important;
    -webkit-text-fill-color: #8a90a4 !important;
    opacity: 1;
}
:root[data-theme="lumen"] input:-webkit-autofill,
:root[data-theme="lumen"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0b0d12 !important;
    box-shadow: 0 0 0 30px #fff inset !important;
}

/* "Hızlı eylem" btn-ghost'lar ve genel butonlar */
:root[data-theme="lumen"] .btn { color: #0b0d12 !important; }
:root[data-theme="lumen"] .btn-ghost {
    background: rgba(255, 255, 255, .76) !important;
    border: 1px solid rgba(60, 40, 20, .14) !important;
    color: #1a1714 !important;
}
:root[data-theme="lumen"] .btn-ghost:hover {
    background: #fff !important;
    border-color: rgba(60, 40, 20, .25) !important;
    color: #0b0d12 !important;
}
:root[data-theme="lumen"] .btn-link { color: var(--accent, #b07d54) !important; }
:root[data-theme="lumen"] .btn-primary {
    background: linear-gradient(135deg, #c08a5e, #9e6e48) !important;
    color: #fff !important;
    border-color: rgba(176, 125, 84, .6) !important;
    box-shadow: 0 4px 14px rgba(176, 125, 84, .28);
}
:root[data-theme="lumen"] .btn-primary:hover { filter: brightness(1.06); }
:root[data-theme="lumen"] .btn-danger { color: #b6493b !important; border-color: rgba(182, 73, 59, .35) !important; background: rgba(182, 73, 59, .06) !important; }

/* Form label'ları net koyu */
:root[data-theme="lumen"] .field label,
:root[data-theme="lumen"] form label,
:root[data-theme="lumen"] label {
    color: #1a1714 !important;
    font-weight: 500;
}
:root[data-theme="lumen"] .field .hint { color: #6e7388 !important; }
:root[data-theme="lumen"] input:focus,
:root[data-theme="lumen"] textarea:focus,
:root[data-theme="lumen"] select:focus {
    background: #fff !important;
    border-color: var(--accent, #b07d54) !important;
    box-shadow: 0 0 0 3px rgba(176, 125, 84, .14) !important;
}
:root[data-theme="lumen"] select option { background: #fff !important; color: var(--text-primary, #0b0d12) !important; }
:root[data-theme="lumen"] input::placeholder,
:root[data-theme="lumen"] textarea::placeholder { color: var(--text-faint, #8a90a4) !important; }
:root[data-theme="lumen"] input[type="checkbox"],
:root[data-theme="lumen"] input[type="radio"] {
    background: #fff !important;
    border-color: rgba(60, 40, 20, .22) !important;
}
:root[data-theme="lumen"] input[type="checkbox"]:checked,
:root[data-theme="lumen"] input[type="radio"]:checked {
    background: var(--accent, #b07d54) !important;
    border-color: var(--accent, #b07d54) !important;
}
:root[data-theme="lumen"] input[type="checkbox"]:checked::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,7 6,11 12,3'/></svg>") !important; }

/* Table + button */
:root[data-theme="lumen"] table.tbl th,
:root[data-theme="lumen"] table.tbl td { color: var(--text-primary, #0b0d12); border-color: rgba(60, 40, 20, .08); }
:root[data-theme="lumen"] table.tbl th { color: var(--text-muted, #50556b); }
:root[data-theme="lumen"] table.tbl tr:hover td { background: rgba(176, 125, 84, .04); }
:root[data-theme="lumen"] .btn-primary { background: var(--accent, #b07d54); color: #fff; border-color: var(--accent, #b07d54); }
:root[data-theme="lumen"] .btn-ghost {
    background: rgba(255, 255, 255, .6); color: var(--text-primary, #0b0d12);
    border: 1px solid rgba(60, 40, 20, .12);
}
:root[data-theme="lumen"] .btn-ghost:hover { background: #fff; border-color: rgba(60, 40, 20, .22); }

/* Notif drawer */
:root[data-theme="lumen"] .notif-drawer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(252, 250, 245, .94)) !important;
    color: var(--text-primary, #0b0d12) !important;
    border-left: 1px solid rgba(60, 40, 20, .08);
}
:root[data-theme="lumen"] .notif-drawer-back {
    background: radial-gradient(circle at 70% 30%, rgba(176, 125, 84, .08), transparent 50%), rgba(60, 50, 35, .25) !important;
}
:root[data-theme="lumen"] .notif-drawer__close {
    background: rgba(60, 40, 20, .06) !important;
    border-color: rgba(60, 40, 20, .14) !important;
    color: var(--text-primary, #0b0d12) !important;
}
:root[data-theme="lumen"] .notif-item.unread {
    background: linear-gradient(90deg, rgba(176, 125, 84, .12), rgba(176, 125, 84, .04) 60%) !important;
    border-color: rgba(176, 125, 84, .28) !important;
}

/* Demo banner ve topbar başlık alanı */
:root[data-theme="lumen"] .demo-banner {
    background: linear-gradient(90deg, rgba(176, 125, 84, .14), rgba(176, 125, 84, .04)) !important;
    border-bottom: 1px solid rgba(176, 125, 84, .28) !important;
    color: #1a1714 !important;
}
:root[data-theme="lumen"] .demo-banner strong { color: #0b0d12; }
:root[data-theme="lumen"] .demo-banner__text { color: #1a1714; }
:root[data-theme="lumen"] .topbar h1,
:root[data-theme="lumen"] h1, :root[data-theme="lumen"] h2,
:root[data-theme="lumen"] h3, :root[data-theme="lumen"] h4 {
    color: #0b0d12 !important;
}

/* Pill / badge — etiket koyu zeminli aydınlıkta */
:root[data-theme="lumen"] .pill {
    background: rgba(176, 125, 84, .10) !important;
    color: #1a1714 !important;
    border: 1px solid rgba(176, 125, 84, .30) !important;
}
:root[data-theme="lumen"] .pill.success { background: rgba(47, 122, 79, .10) !important; color: #1f5a35 !important; border-color: rgba(47, 122, 79, .35) !important; }
:root[data-theme="lumen"] .pill.warn    { background: rgba(182, 125, 36, .12) !important; color: #6f4715 !important; border-color: rgba(182, 125, 36, .35) !important; }
:root[data-theme="lumen"] .pill.danger  { background: rgba(182, 73, 59, .10)  !important; color: #7a2a1c !important; border-color: rgba(182, 73, 59, .35) !important; }
:root[data-theme="lumen"] .pill.info    { background: rgba(91, 138, 138, .10) !important; color: #1c4a4a !important; border-color: rgba(91, 138, 138, .35) !important; }

/* Topbar (eski h1 banner) — accent bar'ı da düzelt */
:root[data-theme="lumen"] .topbar h1 {
    color: #0b0d12 !important;
    font-weight: 500;
}
:root[data-theme="lumen"] .topbar .eyebrow {
    color: var(--accent, #b07d54) !important;
}

/* Mono code/kbd */
:root[data-theme="lumen"] .mono,
:root[data-theme="lumen"] code,
:root[data-theme="lumen"] kbd,
:root[data-theme="lumen"] .kbd {
    color: #0b0d12;
}

/* Card heading */
:root[data-theme="lumen"] .card h3,
:root[data-theme="lumen"] .glass.card h3 { color: #0b0d12; font-weight: 600; }

/* Footer küçük metinler + login sol panel */
:root[data-theme="lumen"] .auth-side {
    background:
        radial-gradient(900px 600px at 80% 30%, rgba(176, 125, 84, .14), transparent 60%) !important,
        radial-gradient(700px 500px at 20% 90%, rgba(91, 138, 138, .10), transparent 55%) !important,
        linear-gradient(160deg, #f7f6f1 0%, #ece5d6 100%) !important;
    border-right: 1px solid rgba(60, 40, 20, .08) !important;
    color: #1a1714 !important;
}
:root[data-theme="lumen"] .auth-side .pitch,
:root[data-theme="lumen"] .auth-side .foot { color: #1a1714 !important; }
:root[data-theme="lumen"] .auth-side .brand-mark { color: #0b0d12 !important; }
:root[data-theme="lumen"] .auth-side .pitch em { color: var(--accent, #b07d54) !important; }
:root[data-theme="lumen"] .auth-form { color: #0b0d12; }
:root[data-theme="lumen"] .auth-form .panel { color: #0b0d12; }
:root[data-theme="lumen"] .auth-form .desc { color: #4a5066 !important; }

/* Quote / italic large text */
:root[data-theme="lumen"] em { color: var(--accent, #b07d54); font-style: normal; }

/* Tablo border + hover */
:root[data-theme="lumen"] table.tbl {
    background: transparent;
}
:root[data-theme="lumen"] table.tbl thead th {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(60, 40, 20, .15) !important;
}

/* Theme toggle button */
.chrome__theme {
    width: 40px;
    height: 40px;
}
.chrome__theme .icon-sun  { display: none; }
.chrome__theme .icon-moon { display: block; }
:root[data-theme="lumen"] .chrome__theme .icon-sun  { display: block; }
:root[data-theme="lumen"] .chrome__theme .icon-moon { display: none; }

/* ── 8. NO HORIZONTAL OVERFLOW EVER ──────────────────────── */

html, body { overflow-x: hidden; max-width: 100vw; }
.main { max-width: 100%; box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }
.glass.card { max-width: 100%; box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════
   POPUP / MODAL — POLISH (mobile-first, theme-aware, sticky-bar)
   v2 — Adds: close button, theme tints, bottom-sheet on mobile
   ═══════════════════════════════════════════════════════════ */

/* Close button — auto-injected by openModal() into top-right of every modal */
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text, #e8e7e5);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* prevent absolute close from getting eaten by header padding */
    padding: 0;
    line-height: 0;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.20);
    transform: scale(1.05);
}
.modal-close:active { transform: scale(0.96); }
.modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
}

/* Lumen (light) overrides for close button */
:root[data-theme="lumen"] .modal-close {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(20, 18, 16, 0.10);
    color: #1a1714;
}
:root[data-theme="lumen"] .modal-close:hover {
    background: #fff;
    border-color: rgba(20, 18, 16, 0.18);
}

/* Make sure modal padding doesn't crowd close button on mobile */
.modal { padding-top: 60px !important; }
@media (min-width: 481px) {
    .modal { padding-top: clamp(20px, 4vw, 32px) !important; }
}

/* If modal has h2 with right-padding for close (existing rule), strengthen for sm */
.modal > h2,
.modal > h3 { padding-right: 48px; }

/* Sticky actions — theme-aware fade gradient (was hardcoded dark) */
.modal .actions {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(20, 18, 16, 0.78) 30%,
        rgba(20, 18, 16, 0.96) 70%,
        rgba(20, 18, 16, 1) 100%) !important;
    /* leave a margin so save button stays comfortable above safe-area */
    padding: var(--sp-3) 2px var(--sp-2) !important;
    margin-top: var(--sp-3) !important;
}
:root[data-theme="lumen"] .modal .actions {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(250, 247, 242, 0.78) 30%,
        rgba(250, 247, 242, 0.96) 70%,
        rgba(250, 247, 242, 1) 100%) !important;
}
:root[data-theme="kintsugi-mono"] .modal .actions {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(20, 17, 14, 0.78) 30%,
        rgba(20, 17, 14, 0.96) 70%,
        rgba(20, 17, 14, 1) 100%) !important;
}
:root[data-theme="clay"] .modal .actions {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(248, 240, 230, 0.78) 30%,
        rgba(248, 240, 230, 0.96) 70%,
        rgba(248, 240, 230, 1) 100%) !important;
}

/* Mobile (<= 640px): floating sheet — vertically centered, slight margins */
@media (max-width: 640px) {
    .modal-backdrop {
        align-items: center !important;        /* center vertically, not bottom-glued */
        justify-content: center !important;
        padding: clamp(40px, 8vh, 80px) 10px clamp(24px, 6vh, 60px) 10px !important;
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(78vh, 660px) !important;
        margin: 0 !important;
        border-radius: 22px !important;        /* all corners rounded — floating card */
        padding: 56px 18px calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) 18px !important;
        animation: sheet-rise .3s cubic-bezier(.16, 1, .3, 1) both;
        /* premium drop shadow so card visually lifts off the page */
        box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    :root[data-theme="lumen"] .modal {
        box-shadow: 0 24px 60px -20px rgba(20, 18, 16, 0.32), 0 0 0 1px rgba(20, 18, 16, 0.08);
    }
    /* drag handle at top */
    .modal::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        z-index: 4;
    }
    :root[data-theme="lumen"] .modal::before { background: rgba(20, 18, 16, 0.18); }
    :root[data-theme="clay"] .modal::before { background: rgba(80, 50, 30, 0.20); }

    .modal-close {
        top: 16px;
        right: 14px;
        width: 34px;
        height: 34px;
    }

    .modal .actions {
        gap: var(--sp-2) !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .modal .actions .btn {
        flex: 1 1 calc(50% - var(--sp-2)) !important;
        min-width: 100px;
    }
    .modal .actions .btn:only-child { flex: 1 1 100% !important; }
}

@keyframes sheet-rise {
    from { transform: translateY(40px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Pop-ups that lack standard `.actions` div (raw form/.modal-body) — also get safe bottom */
.modal > .modal-body { padding-bottom: var(--sp-4); }

/* Cmdk popup — also gets close button room */
.modal-backdrop > .cmdk { padding-top: 14px; }

/* Hide cmdk close button (cmdk has its own ESC + esc-icon) — only main modal gets it */
.modal-backdrop > .cmdk .modal-close { display: none; }

/* Sade demo hint satırı (demo-zone yerine) */
.demo-hint-line {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.16);
    font-size: 12px;
    text-align: center;
    color: var(--text-secondary, #94a3b8);
}
.demo-hint-line code.mono {
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 6px;
    border-radius: 6px;
    color: var(--text, #e8e7e5);
    font-family: var(--font-mono);
    font-size: 11.5px;
    white-space: nowrap;
}
:root[data-theme="lumen"] .demo-hint-line {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.14);
}
:root[data-theme="lumen"] .demo-hint-line code.mono {
    background: #fff;
    color: #1a1714;
    border: 1px solid rgba(20, 18, 16, 0.08);
}