/* ==========================================================================
   ATELIER — Manaliza · Reji design system
   A light, cinematic shell that sits ON TOP of main.css.
   No existing selectors are removed. New elements live under .atelier-* / .atl-*
   and the existing .page-body wrappers gain the additive class .atelier-page.
   --------------------------------------------------------------------------
   Layers:
     1. Tokens (light + dark)
     2. Reset deltas
     3. Aurora + grain + cursor spotlight
     4. Topbar
     5. Dock (overrides .menu-card)
     6. Cmd+K palette
     7. Toasts
     8. Page transitions
     9. Atelier-page wrapper
     10. Glass primitives
     11. Credit ring + waveform + status pulse
     12. Bento dashboard
     13. Reji Live studio
     14. Reji+ Shorts atelier
     15. Existing pages elevated (.atelier-page .data-editor-section etc.)
     16. Login page elevation
     17. Responsive
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Aurora color stops */
    --atl-aurora-1: #7C5CFF;
    --atl-aurora-2: #3DD9D6;
    --atl-aurora-3: #FFB85C;
    --atl-aurora-4: #FF7DAA;
    --atl-aurora-5: #5AE2A6;

    /* Surface (light) */
    --atl-surface-0: #FAFAF7;
    --atl-surface-1: rgba(255, 255, 255, 0.62);
    --atl-surface-2: rgba(255, 255, 255, 0.78);
    --atl-surface-3: rgba(255, 255, 255, 0.92);
    --atl-glass-stroke: rgba(15, 23, 42, 0.08);
    --atl-glass-stroke-strong: rgba(15, 23, 42, 0.16);

    --atl-ink: #0B0B14;
    --atl-ink-soft: #2A2A3A;
    --atl-mute: #5C5C6E;
    --atl-faint: #9A9AA8;
    --atl-line: rgba(11, 11, 20, 0.08);

    --atl-live: #FF3B5C;
    --atl-success: #2EBE7E;
    --atl-warn: #F2A93B;
    --atl-danger: #E5484D;

    /* Vurgu: aurora paletinin moru. Planlama, entegrasyonlar ve tarih/saat
       secici bunu kullaniyordu ama token HIC TANIMLI DEGILDI -- secili gun,
       "varsayilan" rozeti ve "bende" karti sessizce renksiz kaliyordu. */
    --atl-accent: var(--atl-aurora-1);
    --atl-accent-ink: #FFFFFF;
    --atl-shadow-1: 0 6px 20px rgba(11, 11, 20, .08);

    /* Type */
    --atl-font-display: 'Manrope', 'productSans', system-ui, sans-serif;
    --atl-font-body: 'Manrope', 'productSans', system-ui, sans-serif;
    --atl-font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --atl-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    --atl-tx-0: clamp(40px, 6vw, 88px);   /* hero */
    --atl-tx-1: clamp(28px, 3vw, 44px);   /* section */
    --atl-tx-2: clamp(20px, 1.6vw, 26px); /* card title */
    --atl-tx-3: 16px;                      /* body lg */
    --atl-tx-4: 14px;                      /* body */
    --atl-tx-5: 12px;                      /* meta */
    --atl-tx-6: 10.5px;                    /* micro/eyebrow */

    /* Motion */
    --atl-ease: cubic-bezier(.22, 1, .36, 1);
    --atl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --atl-d-1: 150ms;
    --atl-d-2: 280ms;
    --atl-d-3: 480ms;
    --atl-d-4: 720ms;

    /* Geometry */
    --atl-r-1: 10px;
    --atl-r-2: 18px;
    --atl-r-3: 28px;
    --atl-r-4: 40px;

    /* Blur */
    --atl-blur-1: 12px;
    --atl-blur-2: 24px;
    --atl-blur-3: 36px;
}

body.dark-mode {
    --atl-aurora-1: #9B7CFF;
    --atl-aurora-2: #5DEDEA;
    --atl-aurora-3: #FFCC85;
    --atl-aurora-4: #FF9CC1;
    --atl-aurora-5: #6FE9B6;

    --atl-surface-0: #06060E;
    --atl-surface-1: rgba(20, 20, 32, 0.55);
    --atl-surface-2: rgba(20, 20, 32, 0.72);
    --atl-surface-3: rgba(20, 20, 32, 0.88);
    --atl-glass-stroke: rgba(255, 255, 255, 0.08);
    --atl-glass-stroke-strong: rgba(255, 255, 255, 0.16);

    --atl-ink: #F4F4F8;
    --atl-ink-soft: #DADAE4;
    --atl-mute: #8E8EA2;
    --atl-faint: #5E5E72;
    --atl-line: rgba(255, 255, 255, 0.08);

    --atl-danger: #FF6369;
    /* Koyu zeminde mor biraz aciliyor: ayni renk daha az okunur oluyordu. */
    --atl-accent: #9A80FF;
    --atl-accent-ink: #0B0B14;
    --atl-shadow-1: 0 6px 20px rgba(0, 0, 0, .38);
}

/* ---------- 2. RESET DELTAS ---------- */
html, body {
    height: auto;
    min-height: 100%;
    background-color: var(--atl-surface-0);
    color: var(--atl-ink);
    font-family: var(--atl-font-body);
    font-feature-settings: 'ss01', 'ss02', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

body.atl-active {
    /* anchor for atelier-only state without breaking existing styles */
}

/* Existing .page-body uses display:none/block; keep that.
   But we set the atelier-page wrapper transparent so aurora shows. */
.page-body.atelier-page {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* ---------- 3. AURORA + GRAIN + CURSOR SPOTLIGHT ---------- */
.atl-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
}

.atl-aurora::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(60% 60% at 20% 20%, color-mix(in oklab, var(--atl-aurora-1) 45%, transparent) 0%, transparent 60%),
        radial-gradient(50% 60% at 85% 30%, color-mix(in oklab, var(--atl-aurora-2) 38%, transparent) 0%, transparent 65%),
        radial-gradient(55% 55% at 70% 85%, color-mix(in oklab, var(--atl-aurora-3) 32%, transparent) 0%, transparent 60%),
        radial-gradient(45% 50% at 18% 78%, color-mix(in oklab, var(--atl-aurora-4) 30%, transparent) 0%, transparent 55%);
    filter: blur(60px) saturate(1.1);
    opacity: 0.55;
    animation: atl-aurora-orbit 90s linear infinite;
    transform-origin: center;
}

.atl-aurora::after {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(40% 50% at 50% 50%, color-mix(in oklab, var(--atl-aurora-5) 22%, transparent) 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.4;
    animation: atl-aurora-drift 60s ease-in-out infinite alternate;
}

body.dark-mode .atl-aurora::before { opacity: 0.42; }
body.dark-mode .atl-aurora::after { opacity: 0.32; }

@keyframes atl-aurora-orbit {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes atl-aurora-drift {
    0%   { transform: translate(-3%, -2%); }
    100% { transform: translate(4%, 3%); }
}

.atl-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
}
body.dark-mode .atl-grain { mix-blend-mode: overlay; opacity: 0.09; }

.atl-cursor-spot {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--atl-mx, 50%) var(--atl-my, 50%),
                color-mix(in oklab, var(--atl-aurora-2) 14%, transparent) 0%,
                transparent 60%);
    transition: background-position 80ms linear;
    mix-blend-mode: screen;
    opacity: 0.85;
}
body.dark-mode .atl-cursor-spot { mix-blend-mode: lighten; opacity: 0.7; }

/* When the swarm cursor mounts, hide the native cursor entirely — the trails
   become the primary pointer affordance. The I-beam is restored for text
   inputs (where the canvas already dims to 0.18 anyway) so typing remains
   usable. If JS never loads (touch device, reduced-motion, parse error)
   the html.atl-cursor-on flag is never set and the native cursor stays. */
html.atl-cursor-on,
html.atl-cursor-on body,
html.atl-cursor-on a,
html.atl-cursor-on button,
html.atl-cursor-on [role="button"],
html.atl-cursor-on .menuitem,
html.atl-cursor-on .atl-tile,
html.atl-cursor-on .atl-clip,
html.atl-cursor-on .atl-palette__item,
html.atl-cursor-on .button-model,
html.atl-cursor-on .dx-button,
html.atl-cursor-on .tab-button,
html.atl-cursor-on .card,
html.atl-cursor-on label,
html.atl-cursor-on select,
html.atl-cursor-on .dx-widget,
html.atl-cursor-on [data-atl-magnetic],
html.atl-cursor-on .app-theme-toggle {
    cursor: none !important;
}

/* Restore the I-beam in text editors so the caret position is legible. */
html.atl-cursor-on input,
html.atl-cursor-on textarea,
html.atl-cursor-on [contenteditable="true"],
html.atl-cursor-on .dx-texteditor-input {
    cursor: text !important;
}

/* Resize handles, scrollbars and disabled controls keep their semantic cursor */
html.atl-cursor-on [disabled],
html.atl-cursor-on .dx-state-disabled {
    cursor: not-allowed !important;
}

html.atl-cursor-on #atlCursorCanvas { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .atl-aurora::before, .atl-aurora::after { animation: none; }
}

/* ---------- 4. TOPBAR ---------- */
.atl-topbar {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 18px;
    border-radius: 999px;
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.4);
    border: 1px solid var(--atl-glass-stroke);
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 24px 60px -28px rgba(11,11,20,.32);
    color: var(--atl-ink);
    font-family: var(--atl-font-display);
    transition: transform var(--atl-d-2) var(--atl-ease), opacity var(--atl-d-2) var(--atl-ease);
}
body.dark-mode .atl-topbar {
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 24px 60px -28px rgba(0,0,0,.7);
}

/* Topbar logosu. Eskiden "Manaliza" yazisiyla birlikte Anasayfa'ya goturen bir
   butondu; soldaki dock'un en ustunde ayni isi yapan .atl-dock__brand oldugu
   icin buton kaldirildi (kullanici, 2026-09-12), geriye sadece simge kaldi. */
.atl-brandwrap__logo {
    width: 26px; height: 26px; flex: none;
    border-radius: 8px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px color-mix(in oklab, var(--atl-aurora-1) 30%, transparent));
}
/* Aktif ekibin kendi logosu buraya basiliyor (bkz. teams.js paintWorkspaceLabel).
   Manaliza favicon'u kare-seffaf bir simge oldugu icin "contain" + aurora
   golgesi ona yakisiyor; ekip logolari ise genelde genis/dikdortgen ya da
   fotograf -- 26px'lik kutuda ince bir serit halinde ortada asili kaliyor,
   ustune de mora calan golge biniyordu ("su an kotu gorunuyor", 2026-09-12).
   Ekip logosu artik yuvarlak alani TAMAMEN dolduruyor. */
.atl-brandwrap__logo.is-team-logo {
    border-radius: 50%;
    object-fit: cover;
    background: var(--atl-surface-1);
    border: 1px solid var(--atl-glass-stroke);
    filter: none;
}

/* ==================== Calisma alani (ekip) anahtari ====================
   Marka blogunun ALTINDA duran kucuk cip. Tiklayinca kisisel alan + tum
   ekipler listelenir, secince aninda gecis olur. Onceden ekip degistirmek
   icin Ayarlar > Ekip > detay cekmecesi gerekiyordu -- kullanici geri
   bildirimi: "takim gecisleri cok zor oluyor" (2026-09-10).
   Marka butonunun icine YERLESTIRILEMEZ (buton icinde buton gecersiz),
   bu yuzden ikisi .atl-brandwrap altinda kardes. */
/* Marka yazisi kalkinca iki satira gerek kalmadi: logo ve calisma alani
   etiketi artik YAN YANA. */
.atl-brandwrap {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding-right: 12px; border-right: 1px solid var(--atl-line);
}

.atl-ws { position: relative; }
.atl-ws__btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 0;                      /* eskiden 36px: etiketi ustteki marka yazisiyla hizalamak icindi */
    padding: 3px 8px 3px 7px;
    border: 1px solid transparent; border-radius: 999px;
    background: none; cursor: pointer; font-family: inherit;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--atl-mute); max-width: 240px;
    transition: background var(--atl-d-1) var(--atl-ease),
                border-color var(--atl-d-1) var(--atl-ease), color var(--atl-d-1) var(--atl-ease);
}
.atl-ws__btn:hover, .atl-ws__btn[aria-expanded="true"] {
    background: rgba(127,127,127,.10);
    border-color: var(--atl-glass-stroke);
    color: var(--atl-ink);
}
.atl-ws__btn > span:not(.atl-ws__dot) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kucuk renk noktasi: kisisel alan notr, ekipteyken aurora -- baglami bir
   bakista belli eder. */
.atl-ws__dot {
    width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: var(--atl-line);
}
.atl-ws.is-team .atl-ws__dot {
    background: var(--atl-aurora-1);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--atl-aurora-1) 20%, transparent);
}
.atl-ws__chev { font-size: 8px; opacity: .6; transition: transform var(--atl-d-1) var(--atl-ease); }
.atl-ws__btn[aria-expanded="true"] .atl-ws__chev { transform: rotate(180deg); }

.atl-ws__menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 260px; max-width: 320px;
    background: var(--atl-surface-3);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-2);
    box-shadow: 0 24px 60px -20px rgba(11,11,20,.35);
    padding: 6px; z-index: 130;
    animation: atl-dropdown-in .16s var(--atl-ease);
}
.atl-ws__menu[hidden] { display: none !important; }
.atl-ws__head {
    padding: 8px 10px 6px; font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--atl-faint);
    font-family: var(--atl-font-mono);
}
.atl-ws__item {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border: 0; border-radius: var(--atl-r-1);
    background: none; cursor: pointer; text-align: left; font-family: inherit;
    color: var(--atl-ink); font-size: 13px;
    transition: background var(--atl-d-1) var(--atl-ease);
}
.atl-ws__item:hover { background: rgba(127,127,127,.10); }
.atl-ws__item.is-active { background: color-mix(in oklab, var(--atl-aurora-1) 10%, transparent); }
.atl-ws__avatar {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    display: grid; place-items: center; overflow: hidden;
    background: rgba(127,127,127,.14);
    font-size: 11px; font-weight: 700; color: var(--atl-mute);
}
.atl-ws__avatar img { width: 100%; height: 100%; object-fit: cover; }
.atl-ws__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atl-ws__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-ws__sub { font-size: 11px; color: var(--atl-faint); }
.atl-ws__check { flex: none; color: var(--atl-aurora-1); font-size: 12px; }
.atl-ws__sep { height: 1px; margin: 6px 4px; background: var(--atl-line); }
.atl-ws__foot {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 0; border-radius: var(--atl-r-1);
    background: none; cursor: pointer; font-family: inherit;
    color: var(--atl-mute); font-size: 12px;
}
.atl-ws__foot:hover { background: rgba(127,127,127,.10); color: var(--atl-ink); }

.atl-topbar__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--atl-mute);
    cursor: pointer;
    padding: 6px 10px 6px 12px;
    border-radius: 999px;
    transition: background-color var(--atl-d-1) var(--atl-ease), color var(--atl-d-1) var(--atl-ease);
}
.atl-topbar__hint:hover { background: var(--atl-line); color: var(--atl-ink); }
.atl-topbar__hint kbd {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--atl-surface-3);
    border: 1px solid var(--atl-glass-stroke);
    color: var(--atl-ink);
    line-height: 1;
}

.atl-topbar__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--atl-live);
    background: color-mix(in oklab, var(--atl-live) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--atl-live) 25%, transparent);
}
.atl-topbar__live::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--atl-live);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--atl-live) 60%, transparent);
    animation: atl-pulse 1.6s ease-out infinite;
}

@keyframes atl-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--atl-live) 60%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--atl-live) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--atl-live) 0%, transparent); }
}

/* Profil avatar (isim bas harfi) — topbar'daki canli rozetinden hemen sonra,
   tiklaninca profilePage'i acar (bkz. teams.js: wireProfileAvatar). */
.atl-topbar__avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    font-family: var(--atl-font-mono); font-size: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--atl-aurora-1), var(--atl-aurora-2));
    border: 1px solid var(--atl-glass-stroke);
    cursor: pointer;
}
.atl-topbar__avatar:hover { filter: brightness(1.08); }

/* Cikis Yap artik sidebar'da yok — .app-profile-avatar/#appAccountDropdown
   uzerinden erisiliyor. permissions() kosulsuz $(this).show() cagirsa bile
   kalici gizli kalsin diye !important. */
.menu-card .menuitem[data-pagename="backPage"] { display: none !important; }

/* Ust bar hesap menusu (avatar tiklaninca acilan Ayarlar/Cikis Yap lookup'i) */
.atl-account-menu { position: relative; }
.atl-account-dropdown {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 220px;
    background: var(--atl-surface-3);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-2);
    box-shadow: 0 24px 60px -20px rgba(11,11,20,.35);
    padding: 8px;
    z-index: 120;
}
.atl-account-dropdown.show { display: block; animation: atl-dropdown-in .16s var(--atl-ease); }
@keyframes atl-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.atl-account-dropdown__email {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--atl-line);
    font-size: 12px; color: var(--atl-mute);
    font-family: var(--atl-font-mono);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atl-account-dropdown__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px;
    border: none; background: transparent; border-radius: 10px;
    color: var(--atl-ink); font-size: 13.5px; font-family: var(--atl-font-display);
    text-align: left; cursor: pointer;
}
.atl-account-dropdown__item i { width: 16px; text-align: center; color: var(--atl-mute); }
.atl-account-dropdown__item:hover { background: var(--atl-surface-2); }
.atl-account-dropdown__item--danger:hover { background: color-mix(in oklab, var(--atl-live) 12%, transparent); color: var(--atl-live); }
.atl-account-dropdown__item--danger:hover i { color: var(--atl-live); }

@media (max-width: 720px) {
    /* right:114px — .app-theme-toggle (right:22, width:44 => 22-66px) VE .app-lang-toggle-wrap
       (mobilde right:66, width:38 => 66-104px) ikisi birden bu araliği kapliyor; topbar sadece
       theme-toggle'a gore (right:70px) hesaplanmisti, dil secici topbar'in ustune biniyordu. */
    /* right:114px, sag ustte yuzen tema + dil butonlari icin ayrilmisti; ikisi de
       artik topbar'in ICINDE, o yuzden bu rezerv kaldirildi (2026-09-12). */
    .atl-topbar { left: 12px; right: 12px; transform: none; gap: 8px; padding: 8px 10px; }
    .atl-topbar__tools { padding-right: 6px; gap: 2px; }
    .atl-topbar__hint span:not(.kbd-wrap) { display: none; }
    /* "Search anything" metni gizlenince bile topbar'in TOPLAM icerigi (marka+etiket,
       arama ikonu, canli rozeti, avatar) 264px'lik mobil genislige sigmiyordu -- kutu
       kendi siniri icinde kaliyor ama IÇERIĞI tasip dil/tema butonlarinin ustune
       biniyordu (overflow:visible varsayilan). Canli rozeti mobilde ikincil bir
       durum gostergesi, yer acmak icin gizleniyor -- gercekten yayin acilinca
       zaten Reji Live sayfasinin kendi durumu gorunur. */
    .atl-topbar__live { display: none; }
}

/* ---------- 5. DOCK (overrides .menu-card) ---------- */
.menu-card.atl-dock {
    background: var(--atl-surface-2) !important;
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    border: 1px solid var(--atl-glass-stroke);
    border-left: none;
    color: var(--atl-ink) !important;
    width: 78px !important;
    height: auto !important;
    /* Menu item sayisi arttikca (bkz. Shorts eklenmesi) toplam yukseklik ~500px'e ulasti --
       top:50%+translateY(-50%) kisa viewport'larda (kucuk laptop penceresi, browser chrome
       dahil) icerigi container'in disina tasiriyordu, cunku hicbir max-height/scroll guvenlik
       agi yoktu. max-height + overflow-y ile kisa viewport'larda tasma yerine ic scroll'a duser. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: 0 var(--atl-r-3) var(--atl-r-3) 0;
    padding: 14px 8px;
    box-shadow:
        1px 0 0 rgba(255,255,255,.6) inset,
        24px 24px 60px -28px rgba(11,11,20,.32);
}
.menu-card.atl-dock::-webkit-scrollbar { display: none; }
body.dark-mode .menu-card.atl-dock {
    box-shadow:
        1px 0 0 rgba(255,255,255,.04) inset,
        24px 24px 60px -28px rgba(0,0,0,.6);
}

.menu-card.atl-dock ul { width: 100%; margin: 0; }

/* ATTENTION: do NOT force display here. main.css hides items by default
   and jQuery (.show/.hide) controls per-permission visibility after auth.
   We just style how they look WHEN visible. atelier.js pins our 4 new
   items to be visible after auth via a MutationObserver. */
.menu-card.atl-dock ul > li {
    width: 62px;
    height: 56px;
    margin: 4px auto;
    padding: 8px 0 6px;
    border-radius: 16px;
    cursor: pointer;
    color: var(--atl-mute);
    text-align: center;
    transition: color var(--atl-d-1) var(--atl-ease),
                background-color var(--atl-d-1) var(--atl-ease),
                transform var(--atl-d-1) var(--atl-ease);
    position: relative;
    user-select: none;
}

.menu-card.atl-dock ul > li > i {
    font-size: 16px;
    margin: 0 0 5px;
    line-height: 1;
    display: block;
    transition: transform var(--atl-d-1) var(--atl-ease);
}
.menu-card.atl-dock ul > li > span {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    line-height: 1;
    display: block;
}

.menu-card.atl-dock ul > li:hover {
    background-color: var(--atl-line) !important;
    color: var(--atl-ink);
    transform: translateX(2px);
}
.menu-card.atl-dock ul > li:hover > i { transform: scale(1.1) translateY(-1px); }

.menu-card.atl-dock ul > li.active {
    background-color: transparent !important;
    color: var(--atl-ink);
}
.menu-card.atl-dock ul > li.active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, var(--atl-aurora-1), var(--atl-aurora-2), var(--atl-aurora-4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.menu-card.atl-dock ul > li.active::after {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    width: 4px; height: 22px;
    margin-top: -11px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--atl-aurora-1), var(--atl-aurora-4));
    box-shadow: 0 0 18px color-mix(in oklab, var(--atl-aurora-1) 45%, transparent);
}

/* Brand + divider are NOT .menuitem so the auth code never touches them.
   But main.css's `.menu-card ul > li { display: none }` still hides them.
   Override with !important so they're always visible. */
.menu-card.atl-dock ul > li.atl-dock__divider {
    height: 1px !important;
    margin: 8px 12px !important;
    padding: 0 !important;
    background: var(--atl-line);
    list-style: none;
    display: block !important;
    cursor: default;
    pointer-events: none;
}

.menu-card.atl-dock ul > li.atl-dock__brand {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    background: none;
    cursor: pointer;
    transition: transform var(--atl-d-1) var(--atl-ease);
}
.menu-card.atl-dock ul > li.atl-dock__brand:hover { background-color: transparent !important; transform: scale(1.08); }
.menu-card.atl-dock ul > li.atl-dock__brand:active { transform: scale(0.96); }
.menu-card.atl-dock .atl-dock__brand img {
    width: 30px; height: 30px;
    filter: drop-shadow(0 4px 14px color-mix(in oklab, var(--atl-aurora-1) 35%, transparent));
}

/* hide the default avatar/spacer if present */
.menu-card.atl-dock ul > li.atl-dock__spacer { background: transparent !important; height: 8px; pointer-events: none; }
.menu-card.atl-dock ul > li.atl-dock__spacer:hover { background: transparent !important; transform: none; }

/* ---------- 6. CMD+K PALETTE ---------- */
.atl-palette {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    background: color-mix(in oklab, var(--atl-surface-0) 60%, transparent);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    animation: atl-fade-in var(--atl-d-2) var(--atl-ease);
}
.atl-palette[data-open="true"] { display: flex; }

.atl-palette__panel {
    width: min(640px, 92vw);
    background: var(--atl-surface-3);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-3);
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 50px 120px -40px rgba(11,11,20,.45);
    overflow: hidden;
    animation: atl-rise var(--atl-d-3) var(--atl-ease);
}
body.dark-mode .atl-palette__panel {
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 50px 120px -40px rgba(0,0,0,.7);
}

.atl-palette__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--atl-line);
}
.atl-palette__search i { color: var(--atl-mute); }
.atl-palette__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--atl-font-display);
    font-size: 17px;
    font-weight: 400;
    color: var(--atl-ink);
}
.atl-palette__search input::placeholder { color: var(--atl-faint); }
.atl-palette__search kbd {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--atl-line);
    color: var(--atl-mute);
}

.atl-palette__list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px 8px 14px;
}
.atl-palette__group-title {
    padding: 10px 14px 6px;
    font-family: var(--atl-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--atl-faint);
}
.atl-palette__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--atl-ink);
    transition: background-color var(--atl-d-1) var(--atl-ease);
}
.atl-palette__item:hover,
.atl-palette__item[data-active="true"] {
    background: var(--atl-line);
}
.atl-palette__item i {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--atl-aurora-1) 22%, transparent),
        color-mix(in oklab, var(--atl-aurora-2) 22%, transparent));
    color: var(--atl-ink);
    font-size: 13px;
    flex-shrink: 0;
}
.atl-palette__item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.atl-palette__item-text strong { font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.atl-palette__item-text span { font-size: 12px; color: var(--atl-mute); margin-top: 2px; }
.atl-palette__item-shortcut {
    font-family: var(--atl-font-mono);
    font-size: 10.5px;
    color: var(--atl-mute);
    letter-spacing: 0.04em;
}

.atl-palette__footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid var(--atl-line);
    font-family: var(--atl-font-mono);
    font-size: 10.5px;
    color: var(--atl-mute);
}
.atl-palette__footer span { display: inline-flex; align-items: center; gap: 6px; }

@keyframes atl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes atl-rise {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 7. TOASTS ---------- */
.atl-toasts {
    position: fixed;
    right: 24px;
    bottom: 80px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.atl-toast {
    background: var(--atl-surface-3);
    backdrop-filter: blur(var(--atl-blur-2));
    border: 1px solid var(--atl-glass-stroke);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 24px 60px -24px rgba(11,11,20,.3);
    color: var(--atl-ink);
    font-size: 13.5px;
    pointer-events: auto;
    animation: atl-toast-in var(--atl-d-3) var(--atl-ease);
    max-width: 360px;
}
@keyframes atl-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 8. PAGE TRANSITIONS ---------- */
.page-body.atelier-page.active {
    animation: atl-page-in var(--atl-d-4) var(--atl-ease);
}

@keyframes atl-page-in {
    0%   { opacity: 0; transform: translateY(8px); filter: blur(8px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}

.atl-reveal { opacity: 0; transform: translateY(14px); }
.atl-reveal.is-in { opacity: 1; transform: none; transition: opacity var(--atl-d-4) var(--atl-ease), transform var(--atl-d-4) var(--atl-ease); }
.atl-reveal[data-stagger="1"].is-in { transition-delay: 60ms; }
.atl-reveal[data-stagger="2"].is-in { transition-delay: 120ms; }
.atl-reveal[data-stagger="3"].is-in { transition-delay: 180ms; }
.atl-reveal[data-stagger="4"].is-in { transition-delay: 240ms; }
.atl-reveal[data-stagger="5"].is-in { transition-delay: 300ms; }
.atl-reveal[data-stagger="6"].is-in { transition-delay: 360ms; }
.atl-reveal[data-stagger="7"].is-in { transition-delay: 420ms; }
.atl-reveal[data-stagger="8"].is-in { transition-delay: 480ms; }

/* ---------- 9. ATELIER PAGE WRAPPER ---------- */
.atelier-page {
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 110px 32px 100px 110px;
    color: var(--atl-ink);
    position: relative;
    z-index: 2;
}

.atl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--atl-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--atl-mute);
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-1));
    border: 1px solid var(--atl-glass-stroke);
}
.atl-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--atl-aurora-1), var(--atl-aurora-4));
}

.atl-hero-title {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: var(--atl-tx-0);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--atl-ink);
    margin: 18px 0 14px;
    max-width: 18ch;
}
.atl-hero-title em {
    font-family: var(--atl-font-serif);
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(120deg, var(--atl-aurora-1), var(--atl-aurora-2), var(--atl-aurora-4));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.atl-hero-sub {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.55;
    color: var(--atl-mute);
    max-width: 60ch;
    margin: 0 0 36px;
}

.atl-section-title {
    font-family: var(--atl-font-display);
    font-weight: 400;
    font-size: var(--atl-tx-1);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--atl-ink);
    margin: 0 0 8px;
}
.atl-section-sub {
    font-size: 14px;
    color: var(--atl-mute);
    margin: 0 0 24px;
    max-width: 60ch;
}

/* ---------- 10. GLASS PRIMITIVES ---------- */
.atl-glass {
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-3);
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 24px 60px -28px rgba(11,11,20,.18);
    transition: transform var(--atl-d-2) var(--atl-ease), box-shadow var(--atl-d-2) var(--atl-ease), border-color var(--atl-d-2) var(--atl-ease);
    position: relative;
    overflow: hidden;
}
body.dark-mode .atl-glass {
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 24px 60px -28px rgba(0,0,0,.5);
}
.atl-glass:hover {
    transform: translateY(-2px);
    border-color: var(--atl-glass-stroke-strong);
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 30px 70px -28px rgba(11,11,20,.24);
}

.atl-glass--ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--atl-aurora-1), var(--atl-aurora-2), var(--atl-aurora-4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .55;
}

.atl-btn {
    --atl-btn-bg: var(--atl-ink);
    --atl-btn-fg: var(--atl-surface-0);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--atl-btn-bg);
    color: var(--atl-btn-fg);
    font-family: var(--atl-font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: transform var(--atl-d-1) var(--atl-ease), box-shadow var(--atl-d-1) var(--atl-ease), background-color var(--atl-d-1) var(--atl-ease);
    text-decoration: none;
}
.atl-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--atl-btn-bg) 80%, transparent); }
.atl-btn:active { transform: translateY(0); }

.atl-btn--ghost {
    --atl-btn-bg: var(--atl-surface-2);
    --atl-btn-fg: var(--atl-ink);
    border-color: var(--atl-glass-stroke);
    backdrop-filter: blur(var(--atl-blur-1));
}
.atl-btn--aurora {
    background: linear-gradient(120deg, var(--atl-aurora-1), var(--atl-aurora-4));
    color: white;
    border-color: transparent;
    box-shadow: 0 12px 32px -12px color-mix(in oklab, var(--atl-aurora-1) 60%, transparent);
}
.atl-btn--aurora:hover { box-shadow: 0 18px 44px -12px color-mix(in oklab, var(--atl-aurora-1) 70%, transparent); }

.atl-btn .kbd {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.18);
    color: inherit;
    line-height: 1;
}

/* ---------- 11. CREDIT RING + WAVEFORM + STATUS ---------- */
.atl-ring {
    --p: 62; /* percent */
    --size: 168px;
    width: var(--size); height: var(--size);
    border-radius: 50%;
    display: grid; place-items: center;
    background:
        conic-gradient(from -90deg,
            var(--atl-aurora-1) 0%,
            var(--atl-aurora-2) calc(var(--p) * 0.6%),
            var(--atl-aurora-4) calc(var(--p) * 1%),
            color-mix(in oklab, var(--atl-line) 100%, transparent) calc(var(--p) * 1%) 100%);
    position: relative;
    animation: atl-ring-rot 12s linear infinite;
    flex-shrink: 0;
}
.atl-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--atl-surface-3);
    backdrop-filter: blur(8px);
}
.atl-ring__inner {
    position: relative;
    text-align: center;
    z-index: 1;
}
.atl-ring__value {
    display: block;
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: 38px;
    letter-spacing: -0.04em;
    color: var(--atl-ink);
    line-height: 1;
}
.atl-ring__unit {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--atl-mute);
}
@keyframes atl-ring-rot {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

.atl-waveform {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
}
.atl-waveform span {
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--atl-aurora-2), var(--atl-aurora-1));
    animation: atl-wave 1.4s ease-in-out infinite;
    transform-origin: bottom;
}
.atl-waveform span:nth-child(1) { animation-delay: -.1s; }
.atl-waveform span:nth-child(2) { animation-delay: -.4s; }
.atl-waveform span:nth-child(3) { animation-delay: -.7s; }
.atl-waveform span:nth-child(4) { animation-delay: -.2s; }
.atl-waveform span:nth-child(5) { animation-delay: -.5s; }
.atl-waveform span:nth-child(6) { animation-delay: -.8s; }
.atl-waveform span:nth-child(7) { animation-delay: -.3s; }
.atl-waveform span:nth-child(8) { animation-delay: -.6s; }
.atl-waveform span:nth-child(9) { animation-delay: -.1s; }
.atl-waveform span:nth-child(10) { animation-delay: -.4s; }
.atl-waveform span:nth-child(11) { animation-delay: -.7s; }
.atl-waveform span:nth-child(12) { animation-delay: -.2s; }

@keyframes atl-wave {
    0%, 100% { height: 18%; }
    50%      { height: 100%; }
}

.atl-pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--atl-success);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--atl-success) 60%, transparent);
    animation: atl-pulse 2s ease-out infinite;
}
.atl-pulse-dot--live { background: var(--atl-live); animation-name: atl-pulse; }
.atl-pulse-dot--warn { background: var(--atl-warn); }

/* ---------- 12. BENTO DASHBOARD ---------- */
.atl-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 18px;
}

.atl-tile {
    grid-column: span 4;
    padding: 26px 28px;
    min-height: 220px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--atl-ink);
    text-decoration: none;
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-3);
    transition: transform var(--atl-d-2) var(--atl-ease), box-shadow var(--atl-d-2) var(--atl-ease), border-color var(--atl-d-2) var(--atl-ease);
    position: relative;
    overflow: hidden;
}
.atl-tile:hover {
    transform: translateY(-3px);
    border-color: var(--atl-glass-stroke-strong);
    box-shadow: 0 30px 70px -28px rgba(11,11,20,.24);
}
.atl-tile:hover .atl-tile__shine { opacity: 1; }

.atl-tile__shine {
    position: absolute;
    inset: -40%;
    background: radial-gradient(40% 50% at var(--atl-mx, 50%) var(--atl-my, 50%),
        color-mix(in oklab, var(--atl-aurora-2) 30%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--atl-d-2) var(--atl-ease);
    pointer-events: none;
    mix-blend-mode: screen;
}

.atl-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.atl-tile__icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--atl-aurora-1) 22%, transparent),
        color-mix(in oklab, var(--atl-aurora-4) 22%, transparent));
    color: var(--atl-ink);
    font-size: 18px;
    border: 1px solid var(--atl-glass-stroke);
}
.atl-tile__badge {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--atl-mute);
    border: 1px solid var(--atl-line);
    background: var(--atl-surface-2);
}
.atl-tile__badge--new {
    color: var(--atl-aurora-1);
    border-color: color-mix(in oklab, var(--atl-aurora-1) 30%, transparent);
    background: color-mix(in oklab, var(--atl-aurora-1) 10%, transparent);
}

.atl-tile__title {
    font-family: var(--atl-font-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 18px 0 6px;
}
.atl-tile__sub {
    font-size: 13.5px;
    color: var(--atl-mute);
    line-height: 1.5;
    margin: 0;
}

.atl-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--atl-line);
}
.atl-tile__metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atl-tile__metric-value {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
}
.atl-tile__metric-label {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--atl-faint);
}
.atl-tile__arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--atl-ink);
    color: var(--atl-surface-0);
    transition: transform var(--atl-d-1) var(--atl-ease);
}
.atl-tile:hover .atl-tile__arrow { transform: translateX(3px) rotate(-8deg); }

/* Tile spans */
.atl-tile--xl { grid-column: span 8; min-height: 320px; }
.atl-tile--lg { grid-column: span 6; min-height: 260px; }
.atl-tile--md { grid-column: span 4; }
.atl-tile--sm { grid-column: span 3; min-height: 160px; padding: 22px; }
.atl-tile--full { grid-column: span 12; min-height: 200px; }

/* Hero / Studio tile (large) */
.atl-tile--studio {
    background:
        radial-gradient(60% 80% at 100% 0%, color-mix(in oklab, var(--atl-aurora-1) 22%, transparent) 0%, transparent 60%),
        radial-gradient(60% 80% at 0% 100%, color-mix(in oklab, var(--atl-aurora-4) 18%, transparent) 0%, transparent 60%),
        var(--atl-surface-3);
    color: var(--atl-ink);
}
.atl-tile--studio .atl-tile__title { font-size: 38px; max-width: 14ch; }

.atl-tile--shorts {
    background:
        radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--atl-aurora-2) 22%, transparent) 0%, transparent 60%),
        radial-gradient(60% 80% at 100% 100%, color-mix(in oklab, var(--atl-aurora-3) 18%, transparent) 0%, transparent 60%),
        var(--atl-surface-3);
}

.atl-tile__viewer {
    position: relative;
    width: 100%;
    height: 110px;
    margin-top: 18px;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--atl-ink) 0%, color-mix(in oklab, var(--atl-aurora-1) 60%, var(--atl-ink)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--atl-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
}
.atl-tile__viewer::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.04) 8px 9px);
}

@media (max-width: 1100px) {
    .atl-tile { grid-column: span 6; }
    .atl-tile--xl, .atl-tile--lg { grid-column: span 12; }
    .atl-tile--sm { grid-column: span 6; }
}
@media (max-width: 720px) {
    .atl-tile, .atl-tile--md, .atl-tile--sm, .atl-tile--xl, .atl-tile--lg { grid-column: span 12; }
}

.atl-marquee {
    overflow: hidden;
    margin: 30px 0 10px;
    padding: 14px 0;
    border-top: 1px solid var(--atl-line);
    border-bottom: 1px solid var(--atl-line);
    mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.atl-marquee__track {
    display: flex;
    gap: 56px;
    animation: atl-marquee 38s linear infinite;
    width: max-content;
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: 14px;
    color: var(--atl-mute);
}
.atl-marquee__track span {
    display: inline-flex; align-items: center; gap: 14px;
    white-space: nowrap;
}
.atl-marquee__track span::after {
    content: '◇';
    color: var(--atl-aurora-1);
    margin-left: 56px;
}
@keyframes atl-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- 13. REJI LIVE STUDIO ---------- */
.atl-studio {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
}
@media (max-width: 1100px) {
    .atl-studio { grid-template-columns: 1fr; }
}

.atl-stage {
    aspect-ratio: 16 / 9;
    border-radius: var(--atl-r-3);
    background:
        radial-gradient(60% 60% at 30% 30%, color-mix(in oklab, var(--atl-aurora-1) 32%, transparent) 0%, transparent 60%),
        radial-gradient(60% 60% at 70% 70%, color-mix(in oklab, var(--atl-aurora-4) 32%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, #0B0B14, #1B1B2C);
    border: 1px solid var(--atl-glass-stroke);
    position: relative;
    overflow: hidden;
    color: white;
}
.atl-stage__overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
    pointer-events: none;
}
.atl-stage__chip {
    position: absolute;
    top: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 12px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: 11.5px;
    color: white;
    backdrop-filter: blur(10px);
    font-weight: 500;
}
.atl-stage__chip .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--atl-live);
    animation: atl-pulse 1.6s ease-out infinite;
}
.atl-stage__cta {
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    text-align: center;
}
.atl-stage__cta h3 {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: white;
    margin: 0 0 14px;
    max-width: 18ch;
}
.atl-stage__cta h3 em {
    font-family: var(--atl-font-serif);
    font-style: italic;
    background: linear-gradient(120deg, var(--atl-aurora-2), var(--atl-aurora-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.atl-stage__cta p {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin: 0 0 24px;
    max-width: 48ch;
}

.atl-stage__participants {
    position: absolute;
    bottom: 16px; left: 16px; right: 16px;
    display: flex;
    gap: 10px;
}
.atl-stage__pchip {
    width: 110px;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    position: relative;
    backdrop-filter: blur(10px);
    overflow: hidden;
}
.atl-stage__pchip[data-active="true"] {
    border-color: color-mix(in oklab, var(--atl-aurora-2) 60%, white);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--atl-aurora-2) 40%, transparent);
}
.atl-stage__pchip span {
    position: absolute;
    bottom: 6px; left: 8px;
    font-size: 10px;
    color: white;
    font-weight: 500;
}

.atl-director {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.atl-director__panel {
    padding: 18px 20px;
}
.atl-director__panel h4 {
    font-family: var(--atl-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--atl-mute);
    margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
}
.atl-director__decision {
    font-family: var(--atl-font-display);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.35;
    color: var(--atl-ink);
    margin: 0 0 10px;
}
.atl-director__decision em {
    font-family: var(--atl-font-serif);
    font-style: italic;
    color: var(--atl-aurora-1);
}
.atl-director__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.atl-director__meta span {
    font-family: var(--atl-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--atl-mute);
    padding: 4px 8px;
    border: 1px solid var(--atl-line);
    border-radius: 6px;
}

.atl-timeline {
    margin-top: 18px;
    padding: 18px 20px;
}
.atl-timeline__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--atl-line);
    position: relative;
    overflow: hidden;
}
.atl-timeline__bar::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 38%;
    background: linear-gradient(90deg, var(--atl-aurora-1), var(--atl-aurora-2));
    border-radius: inherit;
}
.atl-timeline__marks {
    position: relative;
    height: 28px;
    margin-top: 10px;
}
.atl-timeline__mark {
    position: absolute;
    top: 0;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--atl-aurora-3);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--atl-aurora-3) 30%, transparent);
    cursor: pointer;
    transition: transform var(--atl-d-1) var(--atl-ease);
}
.atl-timeline__mark:hover { transform: scale(1.2); }
.atl-timeline__mark::after {
    content: attr(data-label);
    position: absolute;
    top: 22px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--atl-font-mono);
    font-size: 10px;
    color: var(--atl-mute);
    white-space: nowrap;
}

/* ---------- 14. REJI+ SHORTS ATELIER ---------- */
.atl-shorts-source {
    padding: 36px;
    text-align: center;
    border: 1.5px dashed var(--atl-glass-stroke-strong);
    border-radius: var(--atl-r-3);
    background:
        radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--atl-aurora-2) 16%, transparent) 0%, transparent 60%),
        var(--atl-surface-2);
    transition: border-color var(--atl-d-2) var(--atl-ease), background var(--atl-d-2) var(--atl-ease);
}
.atl-shorts-source:hover {
    border-color: var(--atl-aurora-2);
    background:
        radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--atl-aurora-2) 24%, transparent) 0%, transparent 60%),
        var(--atl-surface-3);
}
.atl-shorts-source h3 {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: clamp(24px, 2.4vw, 36px);
    letter-spacing: -0.025em;
    margin: 14px 0 10px;
    color: var(--atl-ink);
}
.atl-shorts-source h3 em {
    font-family: var(--atl-font-serif);
    font-style: italic;
}
.atl-shorts-source p {
    font-size: 14px;
    color: var(--atl-mute);
    max-width: 50ch;
    margin: 0 auto 24px;
}

.atl-clips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 28px;
}
.atl-clip {
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    overflow: hidden;
    background: var(--atl-ink);
    position: relative;
    cursor: pointer;
    transition: transform var(--atl-d-2) var(--atl-ease), box-shadow var(--atl-d-2) var(--atl-ease);
    border: 1px solid var(--atl-glass-stroke);
}
.atl-clip:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow: 0 30px 70px -24px rgba(11,11,20,.4);
}
.atl-clip__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--atl-aurora-1) 30%, var(--atl-ink)),
        var(--atl-ink));
}
.atl-clip__bg--b { background: linear-gradient(180deg, color-mix(in oklab, var(--atl-aurora-2) 30%, var(--atl-ink)), var(--atl-ink)); }
.atl-clip__bg--c { background: linear-gradient(180deg, color-mix(in oklab, var(--atl-aurora-3) 30%, var(--atl-ink)), var(--atl-ink)); }
.atl-clip__bg--d { background: linear-gradient(180deg, color-mix(in oklab, var(--atl-aurora-4) 30%, var(--atl-ink)), var(--atl-ink)); }
.atl-clip__bg--e { background: linear-gradient(180deg, color-mix(in oklab, var(--atl-aurora-5) 30%, var(--atl-ink)), var(--atl-ink)); }
.atl-clip::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.04) 6px 7px);
    pointer-events: none;
}

.atl-clip__overlay {
    position: absolute;
    inset: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    z-index: 1;
}
.atl-clip__top {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.atl-clip__score {
    font-family: var(--atl-font-mono);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
}
.atl-clip__heart {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    transition: background var(--atl-d-1) var(--atl-ease);
}
.atl-clip__heart:hover { background: var(--atl-live); }
.atl-clip__heart i { font-size: 11px; }

.atl-clip__caption {
    font-family: var(--atl-font-display);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.atl-clip__meta {
    font-family: var(--atl-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.7);
    display: flex; gap: 10px;
}

/* Smart Reframe (AI konusmaci takibi) rozeti + islenmemis/render-bekleniyor placeholder'lari */
.atl-clip__badge {
    font-family: var(--atl-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    border: 1px solid color-mix(in oklab, var(--atl-aurora-2) 50%, transparent);
    color: color-mix(in oklab, var(--atl-aurora-2) 70%, white);
    backdrop-filter: blur(8px);
    display: inline-flex; align-items: center; gap: 4px;
}
.atl-clip--rejected { opacity: .45; }
.atl-clip__pending {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: rgba(255,255,255,.55); font-size: 11px; text-align: center; padding: 0 12px;
}
.atl-clip__pending i { font-size: 20px; }
.atl-clip__meta .atl-waveform { height: 14px; }
.atl-clip__meta .atl-waveform span { width: 2px; }

/* ---------- 14.5 MODAL (Shorts uretim + ayarlar) ---------- */
.atl-modal {
    position: fixed; inset: 0; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.atl-modal[hidden] { display: none; }
.atl-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(8,8,14,.6);
    backdrop-filter: blur(6px);
}
.atl-modal__panel {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: 86vh; overflow-y: auto;
    background: var(--atl-surface-3, #0e0e16);
    backdrop-filter: blur(var(--atl-blur-2, 24px));
    -webkit-backdrop-filter: blur(var(--atl-blur-2, 24px));
    border: 1px solid var(--atl-glass-stroke, rgba(255,255,255,.14));
    border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
    color: var(--atl-ink, #fff);
    padding: 22px;
}
.atl-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.atl-modal__head h3 { margin: 0; font-family: var(--atl-font-display, inherit); font-size: 20px; }
.atl-modal__x {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(127,127,127,.12); border: 1px solid var(--atl-glass-stroke, rgba(255,255,255,.14));
    color: var(--atl-ink, #fff); cursor: pointer;
}
.atl-modal__x:hover { background: rgba(127,127,127,.22); }
.atl-modal__body { display: flex; flex-direction: column; gap: 16px; }
.atl-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 20px;
}

.atl-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.atl-field[hidden] { display: none; }
.atl-field > span:first-child { color: var(--atl-mute, rgba(255,255,255,.7)); font-weight: 500; }
.atl-field input[type="text"],
.atl-field textarea,
.atl-field select {
    background: rgba(127,127,127,.08);
    border: 1px solid var(--atl-glass-stroke, rgba(255,255,255,.14));
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--atl-ink, #fff); font-size: 14px;
    font-family: inherit;
    outline: none;
}
.atl-field input[type="text"]:focus,
.atl-field textarea:focus,
.atl-field select:focus { border-color: var(--atl-aurora-2, #7c6cf0); }
.atl-field input[type="color"] {
    width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--atl-glass-stroke, rgba(255,255,255,.14));
    background: transparent; cursor: pointer; padding: 2px;
}
.atl-field input[type="range"] { width: 100%; accent-color: var(--atl-aurora-2, #7c6cf0); }
.atl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.atl-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.atl-chip {
    padding: 7px 14px; border-radius: 999px;
    background: rgba(127,127,127,.08); border: 1px solid var(--atl-glass-stroke, rgba(255,255,255,.14));
    color: var(--atl-mute, rgba(255,255,255,.8)); font-size: 12.5px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.atl-chip:hover { background: rgba(127,127,127,.16); }
.atl-chip.is-active {
    background: var(--atl-aurora-2, #7c6cf0); border-color: var(--atl-aurora-2, #7c6cf0); color: #fff;
}

.atl-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px; color: var(--atl-ink, rgba(255,255,255,.85));
    padding: 4px 0;
}
.atl-toggle-row input[type="checkbox"] {
    width: 40px; height: 22px; appearance: none; -webkit-appearance: none;
    background: rgba(127,127,127,.25); border-radius: 999px; position: relative;
    cursor: pointer; outline: none; transition: background .15s ease;
}
.atl-toggle-row input[type="checkbox"]::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    transition: transform .15s ease;
}
.atl-toggle-row input[type="checkbox"]:checked { background: var(--atl-aurora-2, #7c6cf0); }
.atl-toggle-row input[type="checkbox"]:checked::before { transform: translateX(18px); }

/* Uretim modalindaki "bu uretime ozel ayarlar" bolumu: normalde kapali, acilinca
   hesap ayarlarindan on-dolu gelir ve sadece o job'i etkiler. Kapali kalmasi
   varsayilan akisi ("link yapistir - uret") sade tutuyor. */
.atl-adv-panel {
    display: flex; flex-direction: column; gap: 14px;
    padding: 14px; border-radius: var(--atl-r-2, 14px);
    border: 1px solid var(--atl-glass-stroke); background: rgba(127,127,127,.06);
    animation: atl-adv-in .22s var(--atl-ease, cubic-bezier(.16,1,.3,1));
}
.atl-adv-panel[hidden] { display: none !important; }
/* Onemli bir uyari tasidigi icin ipucu metinlerinden bir ton daha okunur. */
.atl-adv-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--atl-mute); }
@keyframes atl-adv-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
/* Acma/kapama satiri: solda ikon+etiket, sagda ok. */
.atl-adv-toggle { width: 100%; justify-content: flex-start; gap: 8px; }
.atl-adv-toggle .fa-chevron-down { margin-left: auto; }
.atl-adv-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.atl-adv-toggle .fa-chevron-down { transition: transform .2s var(--atl-ease, ease); font-size: 10px; }

/* Ayarlar: sagdan acilan cekmece (drawer) -- merkezde degil, panel sag kenara yasli,
   tam yukseklik, kaymali giris animasyonu. */
.atl-modal--drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.atl-modal--drawer .atl-modal__panel {
    max-width: 420px; width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border-top: none; border-bottom: none; border-right: none;
    animation: atl-drawer-in .28s cubic-bezier(.16,1,.3,1);
}
@keyframes atl-drawer-in {
    from { transform: translateX(100%); opacity: .6; }
    to { transform: translateX(0); opacity: 1; }
}

/* Genis panel (orn. haber kutuphanesi) -- "tum popuplar sagdan+animasyonlu
   acilsin" (kullanici talebi, 2026-08-24) uzerine .atl-modal--drawer ile ayni
   sag-yasli/tam-yukseklik/kaymali giris davranisina gecti, sadece genislik
   standart 420px yerine parametrik (genis icerik icin daha fazla alan). */
.atl-modal--wide { justify-content: flex-end; align-items: stretch; padding: 0; }
.atl-modal--wide .atl-modal__panel {
    max-width: 70vw; width: 70vw; height: 100%; max-height: 100%;
    border-radius: 0; border-top: none; border-bottom: none; border-right: none;
    animation: atl-drawer-in .28s cubic-bezier(.16,1,.3,1);
}
@media (max-width: 760px) {
    .atl-modal--wide .atl-modal__panel { max-width: 100%; width: 100%; }
    .atl-modal--drawer .atl-modal__panel { max-width: 100%; }
}
.atl-modal--wide .atl-clips { margin-top: 0; }
.atl-modal--wide .atl-clips { margin-top: 0; }

/* ---------- 14.6 SHORTS: KAYNAK VIDEO KARTLARI ---------- */
.atl-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 28px;
}
.atl-jobcard {
    border-radius: 20px;
    overflow: hidden;
    background: var(--atl-ink, #0e0e16);
    border: 1px solid var(--atl-glass-stroke, rgba(255,255,255,.14));
    cursor: pointer;
    transition: transform var(--atl-d-2, .2s) var(--atl-ease, ease), box-shadow var(--atl-d-2, .2s) var(--atl-ease, ease);
}
.atl-jobcard:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -24px rgba(11,11,20,.4); }
.atl-jobcard__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000 center/cover no-repeat;
}
.atl-jobcard__status {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--atl-font-mono, monospace);
    font-size: 10px; font-weight: 600; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16);
    color: #fff; text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.atl-jobcard__status--done { color: #6ee7b7; border-color: rgba(110,231,183,.4); }
.atl-jobcard__status--failed { color: #ff8a8a; border-color: rgba(255,138,138,.4); }
.atl-jobcard__status--busy { color: #ffd166; border-color: rgba(255,209,102,.4); }
/* Sil: kartin sag ust kosesi. Sadece kartin uzerine gelince goruntuye girer --
   kaza ile tiklanmasin (kullanici talebi, 2026-09-12: "videolari da
   silebileyim, cunku hata yaziyor mesela"). z-index ZORUNLU: .atl-jobcard__play
   inset:0 ile tum kapagi kapliyor ve DOM'da sonra geldigi icin ustte boyanir,
   z-index olmadan tiklamalari o yutar. */
.atl-jobcard__del {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85); font-size: 11px; cursor: pointer;
    backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.atl-jobcard:hover .atl-jobcard__del, .atl-jobcard__del:focus-visible { opacity: 1; }
.atl-jobcard__del:hover { background: rgba(248,113,113,.35); border-color: rgba(248,113,113,.7); color: #fff; }
.atl-jobcard__del:disabled { opacity: .5; cursor: default; }
[dir="rtl"] .atl-jobcard__del { right: auto; left: 8px; }

.atl-jobcard__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85); font-size: 30px;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
    opacity: 0; transition: opacity .15s ease;
}
.atl-jobcard:hover .atl-jobcard__play { opacity: 1; }
.atl-jobcard__body { padding: 12px 14px 14px; }
/* Kaynak videonun gercek basligi: kart artik "Je4XgoS62RA" degil, adiyla
   taniniyor. Iki satirda kesiliyor -- kart yuksekligi sabit kalsin. */
.atl-jobcard__title {
    font-size: 12.5px; font-weight: 600; line-height: 1.35;
    color: rgba(255, 255, 255, .95);
    margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.atl-jobcard__count {
    font-family: var(--atl-font-mono, monospace);
    font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600;
}
.atl-jobcard__date {
    font-family: var(--atl-font-mono, monospace);
    font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 3px;
}

/* Klip sayfasi: tam-ekran iframe overlay (bkz. #rejiShortsClipsFrameOverlay, shorts-clips.html).
   Popup yerine gercek "sayfa" hissi -- kullanici istegi geregi. */
.atl-frame-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: #0b0b12;
}
.atl-frame-overlay[hidden] { display: none; }
.atl-frame-overlay iframe {
    width: 100%; height: 100%; border: none; display: block;
}

/* ---------- 14.7 SHORTS MOBIL DUZENLEMELER ----------
   Onceki surumde bu bilesenler (jobs grid, modal field'lari, chip grubu) icin hic
   mobil-ozel kural yoktu -- masaustu duzeni dar ekranda sikismis/kucuk dokunma
   alanlariyla kaliyordu. */
@media (max-width: 640px) {
    .atl-jobs { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
    .atl-jobcard__thumb { aspect-ratio: 16 / 10; }

    .atl-modal { padding: 0; }
    .atl-modal:not(.atl-modal--drawer) .atl-modal__panel {
        max-width: 100%; width: 100%; height: 100%; max-height: 100%;
        border-radius: 0; display: flex; flex-direction: column;
    }
    .atl-modal__body { flex: 1; overflow-y: auto; }

    .atl-field-row { grid-template-columns: 1fr; gap: 14px; }
    .atl-chip-group { gap: 6px; }
    .atl-chip { padding: 9px 14px; font-size: 13px; }

    /* Dokunma hedefleri buyusun (Apple/Material min. 44px onerisi). */
    .atl-jobcard__heart, .atl-modal__x { width: 40px; height: 40px; }
    .atl-toggle-row input[type="checkbox"] { width: 46px; height: 26px; }
    .atl-toggle-row input[type="checkbox"]::before { width: 22px; height: 22px; }
    .atl-toggle-row input[type="checkbox"]:checked::before { transform: translateX(20px); }
}

/* ---------- 15. EXISTING PAGES ELEVATED ---------- */

/* Tab buttons in atelier-page get glass tab-bar */
.atelier-page .tab-buttons-section {
    background: transparent;
    border-bottom: none;
    margin-bottom: 8px;
}
.atelier-page .tab-buttons-section .scroll-area {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-2));
    -webkit-backdrop-filter: blur(var(--atl-blur-2));
    border: 1px solid var(--atl-glass-stroke);
    width: auto;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
body.dark-mode .atelier-page .tab-buttons-section .scroll-area {
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.atelier-page .tab-buttons-section .tab-button {
    padding: 8px 18px;
    border-radius: 999px;
    border: none !important;
    color: var(--atl-mute);
    font-family: var(--atl-font-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.005em;
    transition: color var(--atl-d-1) var(--atl-ease), background-color var(--atl-d-1) var(--atl-ease);
    cursor: pointer;
}
.atelier-page .tab-buttons-section .tab-button:hover { color: var(--atl-ink); }
.atelier-page .tab-buttons-section .tab-button.active {
    background: var(--atl-ink);
    color: var(--atl-surface-0);
}
.atelier-page .tab-buttons-section .tab-button.active::after { display: none; }

/* hide static area (logo) inside top-bar tabs since topbar already shows brand */
.atelier-page .tab-buttons-section .static-area { display: none; }
.atelier-page .tab-buttons-section .scroll-area-shadow { display: none; }

/* Tab body wrapper: floats over aurora */
.atelier-page .tab-bodies-section {
    background: transparent;
    margin-top: 18px;
}
.atelier-page .tab-bodies-section .swiper-slide {
    padding: 0;
}

/* Data editor section: glass card */
.atelier-page .data-editor-section {
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-3);
    padding: 32px 36px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 24px 60px -28px rgba(11,11,20,.18);
    margin: 0;
    display: flex;
    gap: 36px;
}
body.dark-mode .atelier-page .data-editor-section {
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 24px 60px -28px rgba(0,0,0,.5);
}
.atelier-page .data-editor-label {
    flex: 1.05;
    width: auto;
    padding: 0;
}
.atelier-page .data-editor-control {
    flex: 1;
    padding: 0;
}
.atelier-page .data-editor-title {
    font-family: var(--atl-font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--atl-ink);
    display: block;
    margin-bottom: 10px;
}
.atelier-page .data-editor-subtitle {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--atl-mute);
    display: block;
    margin-bottom: 22px;
}

/* user-option-model rows */
.atelier-page .user-option-model {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--atl-surface-1);
    border: 1px solid var(--atl-line);
    transition: background var(--atl-d-1) var(--atl-ease), border-color var(--atl-d-1) var(--atl-ease);
}
.atelier-page .user-option-model:hover {
    background: var(--atl-surface-2);
    border-color: var(--atl-glass-stroke);
}
.atelier-page .user-option-model .dx-field-label {
    font-family: var(--atl-font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--atl-mute) !important;
    margin-bottom: 6px;
    display: block;
}

/* button-model wrapper as glass pill */
.atelier-page .add-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}
.atelier-page .add-button-container .button-model {
    flex: 1 1 140px;
    min-width: 140px;
}

/* gallery container subtle */
.atelier-page .contract-control.gallery {
    margin-top: 20px;
    border-radius: var(--atl-r-2);
    overflow: hidden;
    border: 1px solid var(--atl-line);
}

/* help container as poetic note */
.atelier-page .help-manaliza-container {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--atl-r-2);
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--atl-aurora-2) 8%, transparent),
        color-mix(in oklab, var(--atl-aurora-1) 8%, transparent));
    border: 1px solid var(--atl-glass-stroke);
}

/* DevExtreme widget surface harmonisation inside atelier-page */
.atelier-page .dx-texteditor.dx-editor-underlined,
.atelier-page .dx-texteditor.dx-editor-outlined,
.atelier-page .dx-texteditor.dx-editor-filled {
    background-color: transparent;
    border-radius: 10px;
}
.atelier-page .dx-button-mode-contained {
    border-radius: 10px;
}

/* cards container — keep but breathe */
.atelier-page #cards-container {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.atelier-page .card {
    margin: 0;
    border-radius: var(--atl-r-2);
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-1));
    border: 1px solid var(--atl-glass-stroke);
    box-shadow: 0 12px 30px -18px rgba(11,11,20,.18);
}
.atelier-page .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -18px rgba(11,11,20,.28);
}

/* responsive collapse for editor split */
@media (max-width: 1100px) {
    .atelier-page .data-editor-section { flex-direction: column; padding: 26px; }
}

/* ---------- 15b. AYARLAR (Settings/profilePage) — ozel yeniden tasarim ---------- */
/* Duz panel sekmeleri: Swiper degil, her panel kendi icerik yuksekligini
   alir. Ekip sekmesi async doldugunda da otomatik dogru boy alir. */
.atl-settings-panels { position: relative; }
.atl-settings-panel { display: none; }
.atl-settings-panel.active { display: block; animation: atlSettingsPanelIn .22s var(--atl-ease); }
@keyframes atlSettingsPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.atl-settings-tabs .tab-button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px !important;
    font-size: 13.5px;
}
.atl-settings-tabs .tab-button i { font-size: 12px; opacity: .7; }
.atl-settings-tabs .tab-button.active i { opacity: 1; }

.atl-account-fields {
    align-items: stretch !important;
    gap: 4px;
}
.atl-account-fields .atl-field {
    width: 100%; margin-top: 14px;
}
.atl-account-fields .atl-field > span:first-child {
    font-family: var(--atl-font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--atl-mute);
    margin-bottom: 6px;
}
.atl-account-fields #save-personal-button { margin-top: 22px; }

/* Kredi karti: duz metin degil, buyuk/vurgulu bir "hero stat" karti */
.atl-credit-card {
    padding: 30px 26px !important;
    border-radius: var(--atl-r-3);
    background: linear-gradient(160deg,
        color-mix(in oklab, var(--atl-aurora-1) 12%, transparent),
        color-mix(in oklab, var(--atl-aurora-2) 6%, transparent)),
        var(--atl-surface-2);
    border: 1px solid var(--atl-glass-stroke);
    text-align: center;
}
.atl-credit-card__eyebrow {
    font-family: var(--atl-font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--atl-mute);
}
.atl-credit-card__value {
    font-family: var(--atl-font-display); font-weight: 300;
    font-size: 40px !important; letter-spacing: -.02em;
    color: var(--atl-ink) !important;
    margin: 10px 0 2px !important;
    background: none !important;
}
.atl-credit-card__hint { font-size: 12px; color: var(--atl-faint); display: block; margin-bottom: 20px; }
.atl-credit-card #addCreditBalanceButton { display: inline-flex; }
.atl-credit-card__billing-btn { display: inline-flex; margin-top: 12px; }

.atl-billing-section .contract-control { margin-top: 20px; }

/* ---------- 16. LOGIN PAGE ELEVATION ---------- */
#loginPage.atelier-page {
    padding: 0 !important;
    min-height: 100vh !important;
    display: none;
    align-items: center;
    justify-content: center;
}
#loginPage.atelier-page.active { display: flex; }

#loginPage.atelier-page .pageContent.split-layout,
#loginPage.atelier-page .pageContent {
    box-shadow: 0 60px 140px -40px rgba(11,11,20,.5) !important;
    border: 1px solid var(--atl-glass-stroke);
    border-radius: 28px !important;
    background: var(--atl-surface-3) !important;
    overflow: hidden !important;
    position: relative;
}

#loginPage.atelier-page .brand-panel {
    position: relative;
    overflow: hidden;
}
#loginPage.atelier-page .brand-panel .brand-bg {
    background-image: none !important;
    background:
        radial-gradient(60% 70% at 25% 25%, color-mix(in oklab, var(--atl-aurora-1) 80%, transparent) 0%, transparent 60%),
        radial-gradient(70% 70% at 80% 80%, color-mix(in oklab, var(--atl-aurora-4) 65%, transparent) 0%, transparent 60%),
        radial-gradient(50% 60% at 75% 25%, color-mix(in oklab, var(--atl-aurora-3) 50%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, #0B0B14 0%, #1B1B2C 100%) !important;
    animation: atl-aurora-orbit 60s linear infinite;
}
#loginPage.atelier-page .brand-panel .brand-overlay {
    background: linear-gradient(180deg, rgba(11,11,20,.35) 0%, rgba(11,11,20,.55) 100%) !important;
}

#loginPage.atelier-page .brand-panel .hero-text h1 {
    font-family: var(--atl-font-display) !important;
    font-weight: 200 !important;
    font-size: clamp(40px, 4.4vw, 60px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: white !important;
}
#loginPage.atelier-page .brand-panel .hero-text h1 br + * { display: none; }

#loginPage.atelier-page .brand-panel .hero-text::after {
    content: '';
    display: block;
    width: 56px; height: 1px;
    margin-top: 24px;
    background: linear-gradient(90deg, var(--atl-aurora-2), transparent);
}

#loginPage.atelier-page .brand-panel .hero-text p {
    font-family: var(--atl-font-display) !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.78) !important;
    max-width: 38ch !important;
}

#loginPage.atelier-page .brand-panel .logo-area h2 {
    font-family: var(--atl-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: white !important;
}
#loginPage.atelier-page .brand-panel .logo-area span {
    font-family: var(--atl-font-mono) !important;
    color: rgba(255,255,255,.6) !important;
}

#loginPage.atelier-page .brand-panel .brand-footer {
    font-family: var(--atl-font-mono) !important;
    color: rgba(255,255,255,.55) !important;
}

#loginPage.atelier-page .form-panel {
    background: var(--atl-surface-3) !important;
    backdrop-filter: blur(var(--atl-blur-2));
}
body.dark-mode #loginPage.atelier-page .form-panel { background: rgba(20,20,32,.85) !important; }

#loginPage.atelier-page .form-header h3 {
    font-family: var(--atl-font-display) !important;
    font-weight: 300 !important;
    font-size: 36px !important;
    letter-spacing: -0.03em !important;
    color: var(--atl-ink) !important;
}
#loginPage.atelier-page .form-header p {
    font-family: var(--atl-font-display) !important;
    color: var(--atl-mute) !important;
}
#loginPage.atelier-page label {
    font-family: var(--atl-font-mono) !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    color: var(--atl-mute) !important;
}
#loginPage.atelier-page #forgotPassword,
#loginPage.atelier-page #showLogin,
#loginPage.atelier-page #showSignup {
    font-family: var(--atl-font-display) !important;
    font-weight: 500 !important;
}
#loginPage.atelier-page #showSignup,
#loginPage.atelier-page #showLogin {
    background: linear-gradient(120deg, var(--atl-aurora-1), var(--atl-aurora-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 980px) {
    /* alt dock mobilde bottom:14px + ~94px yükseklik = ~108px kaplıyor; 96px yetersizdi
       ve son butonların (ör. "Yeni Video Ekle") altını kırpıyordu. */
    .atelier-page { padding: 100px 18px 126px; }
    /* #loginPage.atelier-page{padding:0!important} (bkz. bölüm 16) sabit topbar'ın
       login kartının üstüne binmesine yol açıyordu — aynı özgüllükte, sonradan gelen bir
       !important ile mobilde payı geri veriyoruz. align-items:flex-start — dikey ortalama,
       kart viewport'tan uzun olduğunda taşmayı üste/alta eşit dağıtıp içeriği
       sabit topbar'ın arkasına itiyordu. Dock'u zaten aşağıda ayrıca gizliyoruz
       (login öncesi tek öğesi "Login" = zaten üzerinde olduğun sayfa, işlevsiz). */
    #loginPage.atelier-page {
        padding: 84px 14px 32px !important;
        align-items: flex-start !important;
    }
    #loginPage.atelier-page .form-header h3 {
        font-size: 26px !important;
        margin-top: 0 !important;
    }
    /* split-layout hicbir yerde flex-direction:column'a dusmuyordu -- pro.html'deki
       inline stil (.brand-panel flex:1.1 + 50px padding + 3rem baslik, .form-panel flex:1)
       dar ekranda iki paneli yan yana sikistirmaya calisiyor, min-content genisligi
       viewport'u astigi icin pageContent'in overflow:hidden'i marka panelini kirpip
       gorunmez/tutarsiz hale getiriyordu (cihaza gore farkli davranabiliyordu).
       Mobilde marka panelini tamamen gizleyip formu tek sutun + tam genislik yapiyoruz. */
    #loginPage.atelier-page .pageContent.split-layout {
        flex-direction: column !important;
        width: 100% !important;
    }
    #loginPage.atelier-page .brand-panel {
        display: none !important;
    }
    #loginPage.atelier-page .form-panel {
        flex: none !important;
        width: 100% !important;
        padding: 32px 22px !important;
        box-sizing: border-box !important;
    }
    #loginPage.atelier-page .form-wrapper {
        max-width: 100% !important;
    }
    /* Dock login sayfasında işlevsiz (tek öğesi zaten-görüntülenen "Login") ve dar
       ekranlarda formun altına biniyordu — login aktifken tamamen gizle. */
    body:has(#loginPage.atelier-page.active) #menu.atl-dock {
        display: none !important;
    }
    .menu-card.atl-dock {
        top: auto !important;
        bottom: 14px;
        left: 50% !important;
        right: auto;
        transform: translateX(-50%);
        width: auto !important;
        height: auto !important;
        flex-direction: row;
        border-radius: var(--atl-r-3);
        padding: 10px;
    }
    .menu-card.atl-dock ul {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }
    .menu-card.atl-dock ul > li { margin: 0; width: 56px; height: 52px; }
    .menu-card.atl-dock ul > li.active::after { display: none; }
    /* Section 5'teki tanım (.menu-card.atl-dock ul > li.atl-dock__brand/__divider,
       her ikisi de !important) bu selector'dan daha özgüldü (ul > li.X vs .X),
       bu yüzden "gizle" kuralı hiç kazanamıyordu — dock 7+ öğeyle 390px genişliğe
       sığmayıp iki kenardan da ekran dışına taşıyordu. Aynı özgüllükle eşitleyip
       sonradan gelen kuralın kazanmasını sağlıyoruz. */
    .menu-card.atl-dock ul > li.atl-dock__brand,
    .menu-card.atl-dock ul > li.atl-dock__divider { display: none !important; }
}

/* ---------- Topbar araclari: dil + tema ----------
   Bu iki buton eskiden ekranin sag ust kosesinde position:fixed olarak
   duruyordu; sayfa iceriginin ustune biniyorlardi (Shorts toplu zamanlama
   butonu bunun yuzunden yer degistirmisti) ve her ekranda ayri bir yuzen
   katman gibi gorunuyorlardi. Artik topbar'in icinde, profil avatarinin
   solunda akis icinde duruyorlar (kullanici talebi, 2026-09-12).

   Asagidaki kurallarin !important'i sus degil: main.css (.app-theme-toggle
   position:fixed), i18n.css (.app-lang-toggle-wrap position:fixed + [dir=rtl]
   left/right !important) ve mobil media query'ler hep fiziksel konum
   yaziyor. inset:auto hepsini tek kalemde etkisizlestiriyor. */
.atl-topbar__tools {
    display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
    padding-right: 8px; margin-right: 2px;
    border-right: 1px solid var(--atl-line);
}
[dir="rtl"] .atl-topbar__tools { border-right: none; border-left: 1px solid var(--atl-line); padding-right: 0; padding-left: 8px; }

.atl-topbar .app-lang-toggle-wrap {
    position: relative !important;
    inset: auto !important;
    z-index: auto;
}
.atl-topbar .app-lang-toggle,
.atl-topbar .app-theme-toggle {
    position: static !important;
    inset: auto !important;
    width: 30px !important; height: 30px !important;
    flex: 0 0 auto;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
    color: var(--atl-mute) !important;
    font-size: 12px;
    transition: background var(--atl-d-1) var(--atl-ease), color var(--atl-d-1) var(--atl-ease);
}
.atl-topbar .app-lang-toggle:hover,
.atl-topbar .app-theme-toggle:hover {
    background: var(--atl-surface-3) !important;
    border-color: var(--atl-glass-stroke) !important;
    color: var(--atl-ink) !important;
    transform: none;
}
.atl-topbar .app-lang-toggle { font-size: 10.5px; font-weight: 700; gap: 0; }
.atl-topbar .app-lang-toggle i { display: none; }   /* 30px daire icinde globe + "TR" birlikte sigmiyor; dil kodu daha okunur */
.atl-topbar .app-theme-toggle i { font-size: 13px; }
.atl-topbar .app-lang-toggle-wrap .lang-dropdown { top: calc(100% + 12px); right: 0; margin-top: 0; }
[dir="rtl"] .atl-topbar .app-lang-toggle-wrap .lang-dropdown { right: auto; left: 0; }

/* Hide existing logo-preview which collides with new topbar (in tab-buttons-section) */
.atelier-page .logo-preview { display: none; }

/* Section frame for the new pages */
.atl-section {
    margin: 50px 0 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.atl-section__head { flex: 1; }
.atl-section__head .atl-eyebrow { margin-bottom: 14px; }
.atl-section__cta { display: flex; gap: 10px; flex-shrink: 0; }

/* Stat row */
.atl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 26px 0 0;
}
.atl-stat {
    padding: 18px 20px;
    border-radius: var(--atl-r-2);
    background: var(--atl-surface-2);
    backdrop-filter: blur(var(--atl-blur-1));
    border: 1px solid var(--atl-glass-stroke);
}
.atl-stat__value {
    font-family: var(--atl-font-display);
    font-weight: 300;
    font-size: 32px;
    letter-spacing: -0.03em;
    color: var(--atl-ink);
    line-height: 1;
}
.atl-stat__label {
    font-family: var(--atl-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--atl-faint);
    margin-top: 8px;
}
.atl-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--atl-success);
    margin-top: 6px;
}
.atl-stat__delta--down { color: var(--atl-live); }

/* Inline icon-text pill row */
.atl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.atl-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--atl-surface-2);
    border: 1px solid var(--atl-line);
    font-size: 12px;
    color: var(--atl-mute);
    font-family: var(--atl-font-display);
}
.atl-pill i { font-size: 10px; }

/* ---------- 13. EKIP (TEAM) — profil paneli + secim ekrani ---------- */
.atl-team-panel { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.atl-team-section {
    padding: 18px 20px;
    background: var(--atl-surface-2);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-2);
}
.atl-team-section h4, .atl-team-section h3 { margin: 0 0 12px; font-family: var(--atl-font-display); font-weight: 500; color: var(--atl-ink); }
.atl-team-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.atl-team-header h3 { margin: 0; font-size: 19px; }
.atl-team-title-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.atl-team-title-row h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

.atl-team-logo-wrap { position: relative; flex: none; width: 52px; height: 52px; }
.atl-team-logo, .atl-team-logo--placeholder {
    width: 52px; height: 52px; border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--atl-glass-stroke);
    background: var(--atl-surface-1);
}
.atl-team-logo--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--atl-mute); font-size: 18px;
}
.atl-team-logo-edit {
    position: absolute; right: -4px; bottom: -4px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--atl-ink); color: var(--atl-surface-0);
    border: 2px solid var(--atl-surface-2);
    font-size: 9px; cursor: pointer;
    transition: transform var(--atl-d-1) var(--atl-ease);
}
.atl-team-logo-edit:hover { transform: scale(1.1); }

.atl-team-rename-btn {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--atl-mute); background: transparent; border: none;
    cursor: pointer; font-size: 11px;
    transition: background var(--atl-d-1) var(--atl-ease), color var(--atl-d-1) var(--atl-ease);
}
.atl-team-rename-btn:hover { background: var(--atl-surface-1); color: var(--atl-ink); }
.atl-team-hint { font-size: 13px; color: var(--atl-mute); line-height: 1.5; margin: 0 0 14px; }
.atl-team-loading { font-size: 13px; color: var(--atl-faint); padding: 8px 0; }
.atl-team-meta { font-size: 12px; color: var(--atl-faint); }

.atl-team-create-row, .atl-team-invite-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.atl-team-input, .atl-team-select {
    flex: 1 1 200px; min-width: 140px;
    background: rgba(127,127,127,.08);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-1);
    padding: 9px 12px;
    color: var(--atl-ink);
    font-size: 13.5px;
    font-family: var(--atl-font-body);
    outline: none;
}
.atl-team-select { flex: 0 0 auto; min-width: 110px; }
.atl-team-input:focus, .atl-team-select:focus { border-color: var(--atl-aurora-2); }

.atl-team-members { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.atl-team-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--atl-r-1);
    background: var(--atl-surface-1);
}
.atl-team-member-row.is-pending { opacity: .65; }
.atl-team-member-email { flex: 1; font-size: 13px; color: var(--atl-ink); }
.atl-team-member-email em { font-style: normal; color: var(--atl-faint); font-size: 11.5px; }
.atl-team-role-select {
    background: var(--atl-surface-2); border: 1px solid var(--atl-glass-stroke); border-radius: 8px;
    padding: 5px 8px; font-size: 12px; color: var(--atl-ink);
}
.atl-team-member-remove {
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    display: grid; place-items: center; font-size: 11px;
    background: rgba(127,127,127,.12); color: var(--atl-mute);
}
.atl-team-member-remove:hover { background: color-mix(in oklab, var(--atl-live) 16%, transparent); color: var(--atl-live); }
.atl-team-perm-toggle {
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    display: grid; place-items: center; font-size: 11px;
    background: rgba(127,127,127,.12); color: var(--atl-mute);
}
.atl-team-perm-toggle:hover { background: var(--atl-surface-2); color: var(--atl-ink); }

/* Erisim izinleri: davet formunda VE her uye satirinda ayni bicimde -- SEO/
   Reji Live/Shorts/Editor Masasi icin 4 checkbox, mevcut client_accessibility
   yapisini yeniden kullanir (bkz. teams.js: permissionCheckboxesHtml). */
.atl-team-permissions {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    padding: 10px 12px;
    margin-top: 6px;
    background: rgba(127,127,127,.06);
    border: 1px solid var(--atl-glass-stroke);
    border-radius: var(--atl-r-1);
}
.atl-team-perm-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--atl-mute); cursor: pointer; }
.atl-team-perm-item input { accent-color: var(--atl-aurora-1); }
.atl-team-perm-item i { font-size: 10px; opacity: .8; width: 12px; text-align: center; }
.atl-team-member-perms { margin: 4px 0 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.atl-team-member-perms .atl-team-permissions { width: 100%; box-sizing: border-box; }

.atl-team-danger { margin-top: 14px; color: var(--atl-live); border-color: color-mix(in oklab, var(--atl-live) 30%, transparent); }

.atl-team-pending-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 8px;
    background: color-mix(in oklab, var(--atl-aurora-2) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--atl-aurora-2) 25%, transparent);
    border-radius: var(--atl-r-1);
}
.atl-team-pending-card strong { display: block; color: var(--atl-ink); font-size: 13.5px; }
.atl-team-pending-by { display: block; font-size: 11.5px; color: var(--atl-mute); margin-top: 2px; }
.atl-team-pending-actions { display: flex; gap: 8px; }

.atl-team-other-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--atl-line);
}
.atl-team-other-row:first-of-type { border-top: none; padding-top: 0; }
.atl-team-other-row > button { margin-left: auto; }
.atl-team-other-logo, .atl-team-other-logo--placeholder {
    flex: none; width: 32px; height: 32px; border-radius: 9px;
    object-fit: cover;
    border: 1px solid var(--atl-glass-stroke);
    background: var(--atl-surface-1);
}
.atl-team-other-logo--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--atl-mute); font-size: 12px;
}

.atl-tile--pending-invite { cursor: default; }
.atl-tile--pending-invite .atl-tile__foot { gap: 8px; }

/* Ana Ekip sekmesi: sadece isim+uye-sayisi listesi, tiklayinca #teamDetailDrawer
   acilir (kullanici talebi, 2026-08-25) -- once .atl-team-other-row'un ayni
   satir-tasarimi, sadece sag ok + tiklanabilirlik eklendi. */
.atl-team-list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 10px; margin: 0 -10px;
    border-top: 1px solid var(--atl-line);
    cursor: pointer; border-radius: var(--atl-r-1);
    transition: background var(--atl-d-1) var(--atl-ease);
}
.atl-team-list-row:first-of-type { border-top: none; }
.atl-team-list-row:hover { background: rgba(127,127,127,.06); }
.atl-team-list-row.is-active .atl-team-meta em { color: var(--atl-aurora-4); font-style: normal; font-weight: 600; }
.atl-team-list-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atl-team-list-info strong { color: var(--atl-ink); font-size: 14px; }
.atl-team-list-chevron { margin-left: auto; color: var(--atl-faint); font-size: 12px; flex: none; }



/* ---------- Entegrasyon kayit karti (Ayarlar > Baglantilar) ----------
   "YouTube'u entegre etmisim, nerede bunu yaptigima dair kayit?" (kullanici,
   2026-09-12). Onceden tek satirlik bir metindi; kanal, baglanma tarihi ve
   durum gorunmuyordu. */
.atl-integration {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin-top: 12px;
    border: 1px solid var(--atl-glass-stroke); border-radius: var(--atl-r-2);
    background: var(--atl-surface-2);
}
.atl-integration__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden;
    display: grid; place-items: center; background: rgba(127,127,127,.14);
    color: var(--atl-mute); font-size: 17px;
}
.atl-integration__avatar img { width: 100%; height: 100%; object-fit: cover; }
.atl-integration__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atl-integration__title {
    font-size: 14px; font-weight: 600; color: var(--atl-ink);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.atl-integration__meta { font-size: 12px; color: var(--atl-faint); }
.atl-integration__badge {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    background: color-mix(in oklab, var(--atl-success) 18%, transparent); color: var(--atl-success);
}
.atl-integration__badge--warn {
    background: color-mix(in oklab, var(--atl-warn) 22%, transparent); color: #B4761B;
}
.atl-integration__badge--off {
    background: rgba(127,127,127,.16); color: var(--atl-mute);
}
.atl-integration__actions { flex: none; display: flex; gap: 8px; }