/* ============================================================
   ROOT Genesis — Tasarım Sistemi (TEK kaynak)
   ------------------------------------------------------------
   Estetik: koyu lacivert (navy) zemin + altın (gold) TEK vurgu.
   Felsefe: vurgu cimriliği (altın yalnız CTA + aktif işaret + focus),
   boşluk = lüks, net hiyerarşi, sakin yüzeyler, gölge yalnız yükselen
   öğede. Tüm renk/boşluk/yarıçap/gölge BURADAKİ token'lardan gelir;
   bileşen içinde sabit-kod yoktur (Canon M2 — öngörülebilir + temiz).

   Katmanlar:
     1) TOKENS         5) Form
     2) Reset + taban  6) Bileşenler (kart/pill/banner/modal/drawer…)
     3) Tipografi      7) Sayfa parçaları (auth · cockpit · agreement)
     4) Kabuk (shell)  8) Responsive + erişilebilirlik
   ============================================================ */

/* ====================== 1) TOKENS ====================== */
:root {
    /* — Zemin & yüzeyler (koyu lacivert katmanlı) — */
    --bg:        #0b1326;
    --bg-deep:   #070d1c;
    --panel:     #111c33;
    --panel-2:   #16223d;
    --panel-3:   #1b2a49;
    --overlay:   rgba(4, 8, 18, 0.62);

    /* — Kenarlıklar — */
    --border:        #21304f;
    --border-2:      #2c3f63;
    --border-strong: #3a4f78;

    /* — Metin hiyerarşisi — */
    --text:      #e8ecf4;
    --text-dim:  #8a99b5;
    --text-mute: #5d6c89;
    --text-on-gold: #1a1206;

    /* — TEK vurgu: ALTIN — */
    --accent:      #d4a847;
    --accent-dk:   #b8902f;
    --accent-soft: rgba(212, 168, 71, 0.12);
    --accent-line: rgba(212, 168, 71, 0.30);

    /* — Durum renkleri — */
    --ok:     #6fce8f;  --ok-soft:     rgba(111, 206, 143, 0.12);  --ok-bd:     rgba(111, 206, 143, 0.32);
    --warn:   #e6b860;  --warn-soft:   rgba(230, 184, 96, 0.12);   --warn-bd:   rgba(230, 184, 96, 0.32);
    --danger: #d96b6b;  --danger-soft: rgba(217, 107, 107, 0.12);  --danger-bd: rgba(217, 107, 107, 0.32);
    --info:   #6aa6e6;  --info-soft:   rgba(106, 166, 230, 0.12);  --info-bd:   rgba(106, 166, 230, 0.32);

    /* — Çalışma Alanı türü işaret rengi — */
    --kind-commercial: #6aa6e6;
    --kind-foundation: #c79be0;
    --kind-group:      #6fce8f;
    --kind-personal:   #d4a847;

    /* — Boşluk ölçeği (4px tabanlı) — */
    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;

    /* — Yarıçap — */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

    /* — Gölge (yalnız yükselen yüzeyler) — */
    --sh-card:   0 1px 0 rgba(255, 255, 255, 0.02) inset;
    --sh-pop:    0 10px 28px rgba(0, 0, 0, 0.5);
    --sh-modal:  0 24px 70px rgba(0, 0, 0, 0.5);
    --sh-drawer: 18px 0 48px rgba(0, 0, 0, 0.4);

    /* — Yerleşim ölçüleri — */
    --topbar-h: 60px; --drawer-w: 320px; --content-max: 1180px;
    --z-shell: 1; --z-drawer-bd: 45; --z-drawer: 50; --z-pop: 100; --z-modal: 1000; --z-toast: 1100;

    /* — Hareket — */
    --t-fast: 0.12s ease; --t-base: 0.18s ease; --t-drawer: 0.22s ease;

    /* — Yazı aileleri — */
    --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --serif: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
    --mono:  'SF Mono', Menlo, Monaco, monospace;
}

/* ====================== 2) RESET + TABAN ====================== */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ====================== 3) TİPOGRAFİ ====================== */
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--text); }

.eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}
.mono { font-family: var(--mono); }
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }

/* ====================== 4) KABUK (shell) ====================== */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--topbar-h);
    padding: 0 var(--sp-5);
    background: linear-gradient(180deg, #0e1830, #0b1326);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar .brand {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--serif);
    letter-spacing: 0.04em;
    color: var(--text);
}
.topbar .brand .mark { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.topbar .brand .name {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.topbar .spacer { flex: 1; }
.topbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--r-sm);
    transition: background var(--t-fast), color var(--t-fast);
}
.topbar .nav-link:hover { color: var(--text); background: var(--panel-2); }
.topbar form { margin: 0; }
.topbar .logout-btn {
    background: transparent;
    border: 1px solid var(--border-2);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    min-height: 36px;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.topbar .logout-btn:hover { color: var(--text); border-color: var(--accent); }

/* ===== Firma Çalışma Alanı üst barı (shell_mode=workspace) ===== */
/* Çalışma Alanı seçici (pill + dropdown) */
.tenant-switcher { position: relative; }
.tenant-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 220px;
    padding: 0.4rem 0.7rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 38px;
    transition: border-color var(--t-fast);
}
.tenant-pill:hover { border-color: var(--accent); }
.tenant-pill .tenant-pill-name {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}
.tenant-pill .caret { color: var(--text-dim); font-size: 0.7rem; }
.tenant-pill .ws-dot { width: 9px; height: 9px; flex-shrink: 0; }

.tenant-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 268px;
    max-width: 320px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    z-index: var(--z-pop);
    padding: 0.5rem;
}
.tenant-menu[hidden] { display: none; }
.tenant-menu-head {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    font-weight: 600;
    padding: 0.4rem 0.6rem 0.5rem;
}
.tenant-menu form { margin: 0; }
.tenant-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast);
}
.tenant-menu-item:hover { background: var(--panel-2); }
.tenant-menu-item .ws-dot { width: 9px; height: 9px; flex-shrink: 0; }
.tenant-menu-item .tmi-name {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tenant-menu-item.active { color: var(--accent); font-weight: 600; }
.tenant-menu-item .tmi-check { color: var(--accent); font-weight: 700; }
.tenant-menu-sep { height: 1px; background: var(--border); margin: 0.4rem 0.2rem; }
.tenant-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: 0.9rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.tenant-menu-link:hover { background: var(--panel-2); color: var(--text); }

/* Üst bar arama kutusu */
.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 420px;
    padding: 0.4rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin: 0;
    transition: border-color var(--t-fast);
}
.search-box:focus-within { border-color: var(--accent); }
.search-box .search-ico { color: var(--text-mute); font-size: 0.9rem; }
.search-box input[type="search"] {
    flex: 1;
    width: auto;
    padding: 0.1rem 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
}
.search-box input[type="search"]:focus { outline: none; box-shadow: none; border: none; }

/* Avatar menüsü (sağ) */
.avatar-menu { position: relative; }
.avatar-trigger {
    display: inline-flex;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}
.avatar.avatar-sm { width: 38px; height: 38px; font-size: 0.9rem; }
.avatar.avatar-md { width: 48px; height: 48px; font-size: 1.05rem; }
.avatar-trigger:hover .avatar { border-color: var(--accent); }
.avatar-pop {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 240px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    z-index: var(--z-pop);
    padding: 0.5rem;
}
.avatar-pop[hidden] { display: none; }
.avatar-pop-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.4rem;
}
.avatar-pop-head .apc { min-width: 0; }
.avatar-pop-head .apc-name { font-weight: 600; color: var(--text); font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-pop-head .apc-mail { font-size: 0.78rem; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-pop form { margin: 0; }
.avatar-pop-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.avatar-pop-item:hover { background: var(--panel-2); color: var(--text); }
.avatar-pop-item.danger { color: var(--danger); }
.avatar-pop-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Sol başlatıcı: Gelen Kutusu */
.launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--t-fast), color var(--t-fast);
}
.launcher:hover { color: var(--text); background: var(--panel-2); }
.launcher .ico { font-size: 1.05rem; }
/* okunmamış kırmızı nokta (ileride aktive) */
.launcher .unread {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 8px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--danger);
}

/* İçerik kabı */
.shell { min-height: calc(100vh - var(--topbar-h)); }
.content-inner { max-width: var(--content-max); margin: 0 auto; }

/* Bölüm başlığı (imza: eyebrow + altın rule + sayaç) */
.sec-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
}
.sec-head .ico { font-size: 1.05rem; }
.sec-head .label {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}
.sec-head .rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-line), transparent);
}
.sec-head .count {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 0.1rem 0.6rem;
}

/* ====================== 5) FORM ====================== */
label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
    margin: 1.1rem 0 0.4rem;
}
label .req { color: var(--accent); margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 0.98rem;
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Honeypot — görünmez (insan boş bırakır; bot doldurursa kayıt sessizce reddedilir) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ====================== 6) BİLEŞENLER ====================== */

/* — Butonlar — */
.btn-primary {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: var(--accent);
    color: var(--text-on-gold);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--r-sm);
    padding: 0.8rem 1.6rem;
    min-height: 46px;
    transition: background var(--t-fast);
}
.btn-primary:hover { background: var(--accent-dk); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary {
    cursor: pointer;
    font-family: inherit;
    background: var(--panel-2);
    color: var(--text-dim);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 0.8rem 1.4rem;
    min-height: 46px;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--text); }

.btn-ghost {
    cursor: pointer;
    font-family: inherit;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.85rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-ghost.danger { color: var(--danger); }

.btn-block { display: block; width: 100%; text-align: center; }

/* Google (federated — STUB; env boşsa şablonda gizli) */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.7rem;
    min-height: 46px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 0.9rem;
    transition: border-color var(--t-fast);
}
.btn-google:hover { border-color: var(--accent); color: var(--text); }

/* — Kart — */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.15rem 1.25rem;
    transition: border-color var(--t-base), transform 0.08s, box-shadow var(--t-base);
}
a.card:hover, .card.clickable:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--sh-pop);
}
.card-title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 0.35rem; }
.card-meta  { font-size: 0.74rem; color: var(--text-mute); font-family: var(--mono); }

/* — Çalışma Alanı kartı (Kişisel Alanım ızgarası) — */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 0.9rem;
}
.ws-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.1rem 1.15rem 1rem;
    transition: border-color var(--t-base), transform 0.08s, box-shadow var(--t-base);
    overflow: hidden;
}
.ws-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--dotc, var(--accent)); opacity: 0.9;
}
.ws-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--sh-pop); }
.ws-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ws-top { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.ws-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--dotc, var(--text-mute)); flex-shrink: 0;
    box-shadow: 0 0 8px var(--dotc, transparent);
}
.dot-community     { --dotc: var(--kind-personal); }
.dot-ticari_firma  { --dotc: var(--kind-commercial); }
.dot-vakif_dernek  { --dotc: var(--kind-foundation); }
.dot-grup          { --dotc: var(--kind-group); }
.dot-internal      { --dotc: var(--danger); }
.ws-name {
    font-size: 1.02rem; font-weight: 600; color: var(--text); flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-kind { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 0.85rem; }
.ws-here {
    font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 0.7rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.ws-act { margin-top: auto; }
.ws-act form { margin: 0; }
.ws-btn {
    width: 100%; display: block; text-align: center;
    padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
    font-family: inherit; font-size: 0.88rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ws-btn:hover { border-color: var(--accent); color: var(--accent); }
.ws-card.active .ws-btn-here {
    background: var(--accent); border-color: var(--accent);
    color: var(--text-on-gold); font-weight: 600; cursor: default;
}

/* — Rozet / Pill — */
.pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pill-ok     { background: var(--ok-soft);     color: var(--ok); }
.pill-warn   { background: var(--warn-soft);   color: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-info   { background: var(--info-soft);   color: var(--info); }
.pill-gold   { background: var(--accent-soft); color: var(--accent); }
.pill-muted  { background: var(--panel-2);     color: var(--text-mute); }

/* — Banner — */
.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    text-align: center;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    font-size: 0.9rem;
}
.banner.ok     { background: var(--ok-soft);     border: 1px solid var(--ok-bd);     color: #bff5cc; }
.banner.warn   { background: var(--warn-soft);   border: 1px solid var(--warn-bd);   color: #f5e0a0; }
.banner.info   { background: var(--info-soft);   border: 1px solid var(--info-bd);   color: #bcd8f7; }
.banner.danger { background: var(--danger-soft); border: 1px solid var(--danger-bd); color: #f5c4c4; }
.banner.lock   { background: var(--accent-soft); border: 1px solid var(--accent-line); color: #f0d79a; }
.banner button {
    background: transparent;
    border: 1px solid var(--accent-line);
    color: #e7c878;
    padding: 0.35rem 0.85rem;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--t-fast);
}
.banner button:hover { background: var(--accent-soft); }

/* — Boş durum / yer-tutucu — */
.empty-state, .placeholder {
    border-radius: var(--r-md);
    padding: 1.5rem 1.3rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.012);
}
.placeholder { border: 1px dashed var(--border-2); }
.empty-state { border: 1px solid var(--border); }
.ph-ico { font-size: 1.5rem; opacity: 0.6; }
.ph-ttl { font-size: 0.96rem; color: var(--text); margin: 0.55rem 0 0.35rem; font-weight: 500; }
.ph-txt { font-size: 0.85rem; line-height: 1.55; max-width: 60ch; }
.ph-badge {
    display: inline-block; margin-top: 0.7rem;
    font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent-line);
    border-radius: var(--r-pill); padding: 0.12rem 0.6rem;
}

/* — Drawer (Gelen Kutusu, soldan) — */
.drawer {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--drawer-w);
    max-width: 86vw;
    background: var(--panel);
    border-right: 1px solid var(--border);
    box-shadow: var(--sh-drawer);
    transform: translateX(-105%);
    transition: transform var(--t-drawer);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--serif);
    font-size: 1.05rem;
}
.drawer-head .close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}
.drawer-head .close:hover { color: var(--text); }
.drawer-body { padding: 1.2rem; flex: 1; overflow-y: auto; }
.drawer-empty { text-align: center; color: var(--text-dim); padding: 2.4rem 0.6rem; }
.drawer-empty .ico { font-size: 2rem; opacity: 0.5; display: block; margin-bottom: 0.7rem; }
.drawer-empty .ttl { color: var(--text); font-size: 0.95rem; margin-bottom: 0.35rem; }
.drawer-empty .hint { font-size: 0.82rem; line-height: 1.5; max-width: 30ch; margin: 0 auto; }
.drawer-backdrop {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-drawer);
    z-index: var(--z-drawer-bd);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* — Modal — */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--overlay);
    z-index: var(--z-modal);
}
.modal.open { display: flex; }
.modal-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--sh-modal);
}

/* — Avatar — */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    width: 42px; height: 42px;
    font-size: 0.95rem;
}

/* — Bildirim/notice/error kutucukları (auth + form geri-besleme) — */
.notice {
    margin-bottom: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-sm);
    font-size: 0.86rem;
    background: var(--ok-soft);
    border: 1px solid var(--ok-bd);
    color: #bff5cc;
}
.error {
    margin-top: 1.1rem;
    padding: 0.7rem 0.85rem;
    background: var(--danger-soft);
    border: 1px solid var(--danger-bd);
    border-radius: var(--r-sm);
    color: var(--danger);
    font-size: 0.86rem;
}

/* ====================== 7) SAYFA PARÇALARI ====================== */

/* — Giriş / Kayıt tek-kart — */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.4rem;
    background:
        radial-gradient(1100px 620px at 50% -8%, var(--accent-soft), transparent 60%),
        radial-gradient(900px 700px at 50% 120%, #0e1830, transparent 55%),
        var(--bg-deep);
}
.auth-card {
    width: 100%;
    max-width: 392px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2.4rem 2rem 2rem;
    box-shadow: var(--sh-modal);
}
.auth-brand { text-align: center; margin-bottom: 1.6rem; }
.auth-brand .mark { display: inline-block; font-size: 1.5rem; color: var(--accent); margin-bottom: 0.5rem; }
.auth-brand h1 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
    color: var(--text);
}
.auth-brand .sub { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.4rem; }
.auth-brand::after {
    content: "";
    display: block;
    width: 54px; height: 2px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.auth-card .btn-primary { margin-top: 1.5rem; width: 100%; }
.auth-or {
    text-align: center;
    margin: 0.9rem 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.auth-foot {
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-dim);
    text-align: center;
}
.auth-foot a { font-weight: 600; }
/* küçük yardım metni (kayıtta sözleşme bilgisi vb.) */
.auth-hint {
    margin-top: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-mute);
    text-align: center;
}
.auth-hint a { font-weight: 600; }

/* — Hata sayfası (404/403/401/500 — kabuk) — */
.error-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.4rem;
}
.err { text-align: center; max-width: 440px; }
.err .code { font-family: var(--serif); font-size: 4rem; font-weight: 600; color: var(--accent); line-height: 1; }
.err h1 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0.6rem 0 0.5rem; color: var(--text); }
.err p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.6rem; }
.err a {
    display: inline-block; padding: 0.7rem 1.4rem; min-height: 44px;
    background: var(--accent); color: var(--text-on-gold); border-radius: var(--r-sm);
    font-weight: 600; font-size: 0.92rem;
}
.err a:hover { background: var(--accent-dk); color: var(--text-on-gold); }

/* — Kişisel Alanım (cockpit) — */
.cockpit {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.8rem 1.4rem 3.2rem;
}
.cockpit .banner { margin: 0 0 1.3rem; }

.hero {
    padding: 0.4rem 0.2rem 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.9rem;
}
.hero .greet { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: var(--text); }
.hero .greet strong { font-weight: 600; color: var(--accent); }
.hero .sub { font-size: 0.92rem; color: var(--text-dim); margin-top: 0.5rem; max-width: 72ch; }

.sec { margin-bottom: 2.3rem; }

.vitrin {
    background: linear-gradient(135deg, var(--accent-soft), rgba(212, 168, 71, 0.02));
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    padding: 1.7rem 1.6rem;
    margin-bottom: 2rem;
}
.vitrin h2 { font-family: var(--serif); margin: 0 0 0.6rem; font-size: 1.3rem; font-weight: 600; color: var(--text); }
.vitrin p { margin: 0 0 0.4rem; font-size: 0.92rem; line-height: 1.65; color: var(--text-dim); max-width: 66ch; }

/* — Firma Çalışma Alanı kabuğu (/workspace içeriği) — */
.ws-shell {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 1.8rem 1.4rem 3.2rem;
}
.ws-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.ws-hero-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.ws-hero-dot { width: 14px; height: 14px; flex-shrink: 0; }
.ws-hero-text { min-width: 0; }
.ws-hero-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.ws-hero-title {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.15;
    word-break: break-word;
}
.ws-hero-side {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.ws-owner-tools { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.ws-owner-tools .btn-ghost {
    border-color: var(--border-2);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.ws-owner-tools .btn-ghost:hover { border-color: var(--accent); color: var(--text); }

.ws-welcome-sub {
    font-size: 0.92rem;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 74ch;
    margin: 0 0 2.1rem;
}
.ws-modules-empty { text-align: left; }
.ws-modules-empty .ph-badge { margin-top: 0.9rem; }

.ws-desk-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.ws-desk-ico {
    font-size: 1.5rem;
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.ws-desk-body { flex: 1; min-width: 0; }
.ws-desk-body .ph-txt { color: var(--text-dim); margin-top: 0.2rem; }
.ws-desk-go { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }

/* — Sözleşme Kapısı (KVKK / Üyelik — Canon M14) — */
.gate-body {
    min-height: 100vh;
    padding: 2.4rem 1.4rem 3.2rem;
    background:
        radial-gradient(1100px 620px at 50% -8%, var(--accent-soft), transparent 60%),
        var(--bg-deep);
}
.gate-wrap { max-width: 720px; margin: 0 auto; }
.gate-brand { text-align: center; margin-bottom: 1.4rem; }
.gate-brand .mark { font-size: 1.4rem; color: var(--accent); }
.gate-brand h1 {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0.4rem 0 0;
    color: var(--text);
}
.gate-intro {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 58ch;
    margin: 0.6rem auto 1.6rem;
}
.gate-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 1.2rem;
}
.gate-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    background: var(--panel-3);
    border-bottom: 1px solid var(--border);
}
.gate-card-head .ttl { font-weight: 600; font-size: 1.02rem; color: var(--text); }
.gate-card-head .ver { font-family: var(--mono); font-size: 0.74rem; color: var(--text-mute); }
.gate-card-head .pill { margin-left: auto; }
.gate-text {
    max-height: 240px;
    overflow-y: auto;
    padding: 1.1rem 1.3rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.gate-text h1, .gate-text h2, .gate-text h3 { color: var(--text); margin: 0.6rem 0 0.4rem; font-size: 1.02rem; }
.gate-text p { margin: 0 0 0.7rem; }
.gate-text ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.gate-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem 1.3rem;
}
.gate-consent input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.gate-consent label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    line-height: 1.5;
}
.gate-consent .scroll-hint {
    font-size: 0.78rem;
    color: var(--warn);
    margin-top: 0.3rem;
    display: none;
}
.gate-card.locked .gate-consent label { color: var(--text-mute); cursor: default; }
.gate-card.locked .gate-consent .scroll-hint { display: block; }
.gate-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

/* — Hesabım / Sözleşmelerim listesi (KVKK görünürlük hakkı, M14.4) — */
.agr-list { display: flex; flex-direction: column; gap: 0.8rem; }
.agr-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.9rem 1.1rem;
}
.agr-row .ttl { font-weight: 600; color: var(--text); }
.agr-row .ver { font-family: var(--mono); font-size: 0.74rem; color: var(--text-mute); }
.agr-row .when { font-size: 0.8rem; color: var(--text-dim); }
.agr-row .pill { margin-left: auto; }

/* — Küçük yardımcı sınıflar (inline style= yerine; tek kaynak korunur) — */
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.page-narrow { max-width: 820px; margin: 0 auto; padding: 1.8rem 1.4rem 3rem; }
.lead { font-size: 0.9rem; line-height: 1.55; max-width: 62ch; margin: 0 0 1.4rem; }

/* ====================== GELEN KUTUSU (gerçek akış) ====================== */
/* Üst bar okunmamış rozeti — sayı taşıyan kırmızı hap (eski boş nokta yerine) */
.launcher .unread {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid var(--panel);
}
.launcher .unread[hidden] { display: none; }

/* Çekmece başlık eylemi (tümünü okundu yap) */
.drawer-action {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-2);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.74rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.drawer-action:hover { border-color: var(--accent); color: var(--text); }
.drawer-head .drawer-action + .close { margin-left: 0.5rem; }

/* Bildirim listesi */
.inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.inbox-list[hidden] { display: none; }
.inbox-item-link {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.7rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.inbox-item-link:hover { border-color: var(--border-strong); background: var(--panel-3); color: var(--text); }
.inbox-item.unread .inbox-item-link { border-left: 3px solid var(--accent); }
.inbox-item-ico {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.95rem;
}
.inbox-item-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.inbox-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.inbox-item.unread .inbox-item-title { color: var(--text); }
.inbox-item-body {
    font-size: 0.8rem; color: var(--text-dim); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox-item-when { font-size: 0.72rem; color: var(--text-mute); margin-top: 0.1rem; }
.inbox-item-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.4rem; }
.inbox-item.unread .inbox-item-dot { background: var(--accent); box-shadow: 0 0 7px var(--accent); }

/* Kişisel Alanım — Gelen Kutusu özet kartı */
.inbox-summary-card {
    display: flex; align-items: center; gap: 1rem; width: 100%;
    text-align: left; cursor: pointer; font-family: inherit;
}
.inbox-summary-ico {
    font-size: 1.4rem; width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.inbox-summary-body { flex: 1; min-width: 0; }
.inbox-summary-body .ph-txt { color: var(--text-dim); margin-top: 0.2rem; }
.inbox-summary-go { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }
.count-unread { color: var(--danger); border-color: var(--danger-bd); }

/* ====================== ÇALIŞMA MASAM (tuval) ====================== */
.desk-page { max-width: var(--content-max); margin: 0 auto; padding: 1.8rem 1.4rem 3.2rem; }
.desk-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.2rem; flex-wrap: wrap;
    padding-bottom: 1.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.8rem;
}
.desk-eyebrow {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 600; margin-bottom: 0.25rem;
}
.desk-title { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--text); }
.desk-sub { font-size: 0.9rem; color: var(--text-dim); margin: 0.45rem 0 0; max-width: 64ch; line-height: 1.55; }
.desk-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.desk-tools .btn-primary { min-height: 40px; padding: 0.55rem 1.1rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.desk-tools .btn-ghost { border: 1px solid var(--border-2); display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.desk-tools .btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.desk-saved {
    font-size: 0.74rem; color: var(--ok); letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.desk-saved::before { content: "✓"; }

/* Kısayollar şeridi */
.desk-shortcuts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.desk-shortcut {
    position: relative;
    display: flex; align-items: center;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding-right: 0.3rem;
    transition: border-color var(--t-fast);
}
.desk-shortcut:hover { border-color: var(--border-strong); }
.desk-shortcut-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.4rem 0.5rem 0.9rem; color: var(--text);
    font-size: 0.88rem; text-decoration: none; max-width: 220px;
}
.desk-shortcut-link.no-url { color: var(--text-dim); cursor: default; }
.desk-shortcut-link:hover { color: var(--accent); }
.desk-shortcut-ico { font-size: 0.85rem; opacity: 0.8; }
.desk-shortcut-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-shortcut-del {
    background: transparent; border: none; color: var(--text-mute);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.45rem;
    border-radius: 50%;
}
.desk-shortcut-del:hover { color: var(--danger); background: var(--danger-soft); }
.desk-shortcuts-empty { margin-top: 0.2rem; }

/* Yapışkan not tuvali */
.desk-canvas {
    position: relative;
    min-height: 420px;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle at 14px 14px, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--bg-deep);
    padding: 1rem;
    overflow: hidden;
}
.desk-canvas-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--text-dim); pointer-events: none; padding: 1.5rem;
}
.desk-canvas-empty[hidden] { display: none; }
.desk-canvas-empty .ph-ico { font-size: 2rem; }
.desk-shortcuts-empty[hidden] { display: none; }

/* Post-it */
.sticky {
    width: 184px; min-height: 168px;
    background: var(--c, #fde68a);
    border-radius: 3px 3px 6px 3px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    color: #1a1206;
    display: flex; flex-direction: column;
    transform: rotate(-1.4deg);
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.sticky[data-color="yellow"] { --c: #fde68a; }
.sticky[data-color="coral"]  { --c: #fca5a5; }
.sticky[data-color="mint"]   { --c: #a7f3d0; }
.sticky[data-color="blue"]   { --c: #bae6fd; }
.sticky[data-color="lilac"]  { --c: #ddd6fe; }
.sticky[data-color="peach"]  { --c: #fed7aa; }
.sticky:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
.sticky.dragging { transform: rotate(0deg) scale(1.03); box-shadow: var(--sh-modal); }
.sticky:focus-within { transform: rotate(0deg); }
.sticky-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.45rem 0.2rem; cursor: grab;
}
.sticky.dragging .sticky-bar { cursor: grabbing; }
.sticky-colors { display: flex; gap: 0.2rem; }
.sticky-color {
    width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.25); background: var(--c); cursor: pointer; padding: 0;
}
.sticky-color.on { box-shadow: 0 0 0 2px rgba(0,0,0,0.45); }
.sticky-del {
    background: transparent; border: none; color: rgba(26,18,6,0.55);
    font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; border-radius: 3px;
}
.sticky-del:hover { color: #8a1c1c; }
.sticky-text {
    flex: 1; resize: none; border: none; outline: none; background: transparent;
    color: #1a1206; font-family: var(--sans); font-size: 0.9rem; line-height: 1.45;
    padding: 0.2rem 0.7rem 0.7rem; width: 100%;
}
.sticky-text::placeholder { color: rgba(26,18,6,0.4); }
.sticky-text:focus { box-shadow: none; border: none; }
.sticky-pin {
    position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f7f7f7, #c92a2a 70%);
    box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}

/* Kısayol ekleme modalı */
.desk-modal-card { max-width: 440px; }
.desk-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem; background: var(--panel-3);
    border-bottom: 1px solid var(--border);
    font-family: var(--serif); font-size: 1.05rem; color: var(--text);
}
.desk-modal-head .close {
    background: none; border: none; color: var(--text-dim);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.desk-modal-head .close:hover { color: var(--text); }
.desk-modal-body { padding: 1.1rem 1.3rem 0.4rem; }
.desk-modal-body label:first-child { margin-top: 0; }
.desk-modal-hint { font-size: 0.78rem; color: var(--text-mute); margin: 0.7rem 0 0; line-height: 1.5; }
.desk-modal-actions {
    display: flex; gap: 0.7rem; justify-content: flex-end;
    padding: 1.1rem 1.3rem 1.3rem;
}
.desk-modal-actions .btn-primary, .desk-modal-actions .btn-secondary { min-height: 42px; padding: 0.6rem 1.2rem; }

/* ====================== 8) RESPONSIVE ====================== */
@media (max-width: 760px) {
    /* Üst bar dar: arama kutusu ve başlatıcı etiketi gizlenir; ikonlar kalır */
    .search-box { display: none; }
    .launcher .launcher-label { display: none; }
    .tenant-pill { max-width: 150px; }
}
@media (max-width: 600px) {
    .topbar { padding: 0 var(--sp-4); gap: var(--sp-3); }
    .topbar .nav-link span:not([aria-hidden]) { display: none; }
    .cockpit { padding: 1.2rem 1rem 2.6rem; }
    .hero .greet { font-size: 1.4rem; }
    .ws-grid { grid-template-columns: 1fr; }
    .gate-card-head .pill { margin-left: 0; }
    .gate-actions { flex-direction: column-reverse; }
    .gate-actions .btn-primary, .gate-actions .btn-secondary { width: 100%; }
    /* Çalışma Alanı kabuğu */
    .ws-shell { padding: 1.2rem 1rem 2.6rem; }
    .ws-hero { flex-direction: column; gap: 0.9rem; }
    .ws-hero-title { font-size: 1.4rem; }
    .ws-hero-side { width: 100%; }
    .tenant-menu { min-width: 220px; }
    .avatar-pop { min-width: 210px; }

    /* Çalışma Masam — mobilde dikey akış, sürükleme kapalı (JS de kapatır) */
    .desk-page { padding: 1.2rem 1rem 2.6rem; }
    .desk-head { flex-direction: column; gap: 0.8rem; }
    .desk-title { font-size: 1.4rem; }
    .desk-tools { width: 100%; }
    .desk-canvas {
        display: flex; flex-direction: column; gap: 1rem; align-items: center;
        min-height: auto; padding: 1.2rem 1rem;
    }
    .desk-canvas-empty { position: static; }
    .sticky { position: relative !important; left: auto !important; top: auto !important;
        transform: rotate(0deg); width: 100%; max-width: 320px; }
    .sticky-bar { cursor: default; }
    .desk-shortcut-link { max-width: 70vw; }
}