/*!
 * QRapor · clu-theme
 * Bağımsız tasarım katmanı — yalnızca frontend/pagesv3 ekranları ve /login içindir.
 * Bootstrap 5 (grid, modal, dropdown, form doğrulama) alt katman olarak kalır;
 * bu dosya görsel dili baştan tanımlar. Hiçbir API/PHP mantığına bağımlılığı yoktur.
 */

/* ============================== 1. DESIGN TOKENS ============================== */
:root {
    --clu-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Marka rengi: teal -> indigo dinamik gradyan */
    --clu-primary-h: 172;
    --clu-primary: #0d9488;
    --clu-primary-600: #0f766e;
    --clu-primary-700: #115e59;
    --clu-primary-ink: #115e59; /* yumuşak/şeffaf zeminler üzerindeki marka rengi metin — dark modda daha açık tona döner */
    --clu-primary-soft: #ccfbf1;
    --clu-accent: #6366f1;
    --clu-accent-soft: #e0e7ff;
    --clu-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 45%, #6366f1 120%);
    --clu-gradient-radial: radial-gradient(circle at 20% 20%, rgba(20,184,166,.35), transparent 55%), radial-gradient(circle at 85% 0%, rgba(99,102,241,.28), transparent 50%);

    --clu-success: #16a34a;
    --clu-success-soft: #dcfce7;
    --clu-warning: #d97706;
    --clu-warning-soft: #fef3c7;
    --clu-danger: #dc2626;
    --clu-danger-soft: #fee2e2;
    --clu-info: #0284c7;
    --clu-info-soft: #e0f2fe;
    --clu-secondary: #64748b;
    --clu-secondary-soft: #e2e8f0;

    --clu-bg: #f3f6f8;
    --clu-bg-alt: #eef2f4;
    --clu-surface: #ffffff;
    --clu-surface-alt: #f8fafc;
    --clu-border: #e2e8ee;
    --clu-border-soft: #edf1f4;
    --clu-text: #0f2626;
    --clu-text-muted: #5b6b74;
    --clu-text-faint: #93a3ab;

    --clu-sidebar-bg: var(--clu-surface);
    --clu-sidebar-text: var(--clu-text-muted);
    --clu-sidebar-text-strong: var(--clu-text);
    --clu-sidebar-border: var(--clu-border-soft);
    --clu-sidebar-hover-bg: var(--clu-surface-alt);
    --clu-sidebar-active-bg: var(--clu-primary-soft);
    --clu-sidebar-active-text: var(--clu-primary-ink);

    --clu-radius-sm: .6rem;
    --clu-radius: 1rem;
    --clu-radius-lg: 1.35rem;
    --clu-radius-xl: 1.75rem;

    --clu-shadow-sm: 0 2px 8px rgba(15, 45, 45, .05);
    --clu-shadow: 0 10px 30px rgba(15, 45, 45, .07);
    --clu-shadow-lg: 0 24px 60px rgba(15, 45, 45, .12);
    --clu-shadow-primary: 0 14px 30px rgba(13, 148, 136, .24);

    --clu-topbar-h: 72px;
    --clu-sidebar-w: 276px;
    --clu-sidebar-w-collapsed: 84px;

    --clu-ease: cubic-bezier(.22, .82, .32, 1);
}

:root[data-clu-theme="dark"] {
    --clu-bg: #0b1220;
    --clu-bg-alt: #0d1526;
    --clu-surface: #121b2e;
    --clu-surface-alt: #16213a;
    --clu-border: #223252;
    --clu-border-soft: #1b2740;
    --clu-text: #eef3f6;
    --clu-text-muted: #9fb0bd;
    --clu-text-faint: #6b7c90;
    --clu-primary-soft: rgba(20, 184, 166, .16);
    --clu-primary-ink: #5eead4;
    --clu-accent-soft: rgba(99, 102, 241, .18);
    --clu-success-soft: rgba(22, 163, 74, .16);
    --clu-warning-soft: rgba(217, 119, 6, .18);
    --clu-danger-soft: rgba(220, 38, 38, .18);
    --clu-info-soft: rgba(2, 132, 199, .18);
    --clu-secondary-soft: rgba(148, 163, 184, .16);
    --clu-shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
    --clu-shadow: 0 12px 34px rgba(0, 0, 0, .34);
    --clu-shadow-lg: 0 28px 70px rgba(0, 0, 0, .45);
}

/* ============================== 2. BASE / RESET ============================== */
.clu-scope {
    font-family: var(--clu-font);
    color: var(--clu-text);
    background: var(--clu-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.clu-scope, .clu-scope *, .clu-scope *::before, .clu-scope *::after { box-sizing: border-box; }
.clu-scope a { text-decoration: none; }
.clu-scope ::selection { background: var(--clu-primary); color: #fff; }
.clu-scope img { max-width: 100%; }
/* Taban ikon boyutu: her cluIcon() çıktısı bu sınıfı taşır. Metinle aynı satırda
   1em ile ölçeklenir; daha büyük bağlamlar (nav, topbar, stat, hero...) kendi
   kapsayıcı seçicileriyle bunu ezer (daha yüksek özgüllük). */
.clu-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.clu-scope :focus-visible { outline: 2px solid var(--clu-accent); outline-offset: 2px; border-radius: .35rem; }
.clu-scope h1, .clu-scope h2, .clu-scope h3, .clu-scope h4, .clu-scope h5, .clu-scope h6 { color: var(--clu-text); letter-spacing: -.02em; font-weight: 700; }
.clu-scope .text-secondary { color: var(--clu-text-muted) !important; }
.clu-scope .text-danger { color: var(--clu-danger) !important; }
.clu-scope hr { border-color: var(--clu-border); opacity: 1; }
.clu-scope .small, .clu-scope small { color: var(--clu-text-muted); }

@keyframes clu-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clu-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* scale(...) BİLEREK transform: scale() değil, bağımsız `scale` CSS özelliği ile veriliyor:
   .dropdown-menu gibi Popper.js tarafından transform: translate3d(...) satır-içi stille
   konumlandırılan elemanlarda, animasyon transform'u da hedef alırsa (inline stille aynı
   özellik) animasyon bitiminde Popper'ın gerçek konumu aniden geri döner ("tık" diye kayma).
   scale/translate/rotate ayrı özellikler olduğundan Popper'ın transform'uyla asla çakışmaz. */
@keyframes clu-pop { 0% { opacity: 0; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes clu-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, .35); } 50% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); } }
@keyframes clu-spin { to { transform: rotate(360deg); } }
@keyframes clu-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .clu-scope * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================== 3. APP SHELL / LAYOUT ============================== */
.clu-app { position: relative; min-height: 100vh; background: var(--clu-bg); }
.clu-app::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--clu-gradient-radial);
    opacity: .55;
}

.clu-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1035;
    width: var(--clu-sidebar-w);
    display: flex; flex-direction: column;
    background: var(--clu-sidebar-bg);
    border-right: 1px solid var(--clu-sidebar-border);
    box-shadow: var(--clu-shadow-sm);
    transition: transform .28s var(--clu-ease), width .22s var(--clu-ease);
}
.clu-sidebar-brand { display: flex; align-items: center; gap: .8rem; padding: 1.5rem 1.4rem 1.1rem; }
.clu-brand-mark {
    flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 13px; background: var(--clu-gradient);
    color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: -.03em;
    box-shadow: 0 8px 20px rgba(20, 184, 166, .28);
}
.clu-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.clu-brand-text strong { color: var(--clu-sidebar-text-strong); font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.clu-brand-text span { color: var(--clu-text-faint); font-size: .68rem; font-weight: 600; letter-spacing: .03em; }

.clu-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: .4rem .95rem 1rem; }
.clu-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.clu-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--clu-border); border-radius: 999px; }

.clu-nav-heading { margin: 1.35rem .6rem .45rem; color: var(--clu-text-faint); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.clu-nav-heading:first-child { margin-top: .3rem; }
.clu-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.clu-nav-link {
    position: relative; display: flex; align-items: center; gap: .8rem;
    padding: .68rem .9rem; border-radius: .85rem;
    color: var(--clu-sidebar-text); font-size: .89rem; font-weight: 600;
    transition: background .16s var(--clu-ease), color .16s var(--clu-ease), transform .16s var(--clu-ease);
}
.clu-nav-link svg { flex: 0 0 auto; width: 19px; height: 19px; opacity: .8; }
.clu-nav-link:hover { color: var(--clu-sidebar-text-strong); background: var(--clu-sidebar-hover-bg); transform: translateX(2px); }
.clu-nav-link.is-active { color: var(--clu-sidebar-active-text); background: var(--clu-sidebar-active-bg); font-weight: 700; }
.clu-nav-link.is-active svg { opacity: 1; }
.clu-nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 .4rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--clu-secondary-soft); color: var(--clu-text-muted); font-size: .68rem; font-weight: 800; }
.clu-nav-link.is-active .clu-nav-badge { background: rgba(255,255,255,.6); color: var(--clu-primary-ink); }

.clu-sidebar-footer { flex: 0 0 auto; padding: 1rem .95rem 1.15rem; border-top: 1px solid var(--clu-sidebar-border); }
.clu-user-card { display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem; border-radius: .9rem; cursor: pointer; transition: background .16s var(--clu-ease); }
.clu-user-card:hover { background: var(--clu-sidebar-hover-bg); }
.clu-avatar { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--clu-gradient); color: #fff; font-weight: 800; font-size: .82rem; }
.clu-user-meta { min-width: 0; line-height: 1.2; }
.clu-user-meta strong { display: block; color: var(--clu-sidebar-text-strong); font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clu-user-meta span { display: block; color: var(--clu-text-faint); font-size: .72rem; }
.clu-sidebar-collapse { display: none; }

/* Mobil çekmece kapatma düğmesi: sidebar açıkken kendisi de topbar'daki hamburger
   düğmesinin üzerini kapladığı için (bkz. aşağıdaki backdrop notu), kapatma işlemi
   için sidebar'ın kendi içinde her zaman görünür/tıklanabilir bir kontrol gerekir. */
.clu-sidebar-close {
    display: none; position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
    width: 34px; height: 34px; align-items: center; justify-content: center;
    border: 1px solid var(--clu-border); border-radius: .7rem;
    background: var(--clu-surface); color: var(--clu-text-muted); transition: all .16s var(--clu-ease);
}
.clu-sidebar-close svg { width: 16px; height: 16px; }
.clu-sidebar-close:hover { color: var(--clu-danger); border-color: var(--clu-danger-soft); background: var(--clu-danger-soft); }

.clu-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1030; background: rgba(6, 12, 20, .55); backdrop-filter: blur(2px); }
.clu-sidebar-backdrop.is-open { display: block; animation: clu-fade-in .18s var(--clu-ease); }
/* Çekmece açıkken arkadaki sayfa gövdesinin kaymasını engeller (bkz. clu-theme.js toggleSidebar). */
body.clu-no-scroll { overflow: hidden; }

/* z-index BİLEREK verilmiyor: bir değer vermek burada yeni bir "stacking context" açar ve
   içindeki modaller, <body>'ye eklenen .modal-backdrop'un kök seviyesindeki z-index'ine
   asla erişemeyip altında hapsolur (karanlık perde tıklanamaz hâle gelir). */
.clu-main-wrap { margin-left: var(--clu-sidebar-w); display: flex; flex-direction: column; min-height: 100vh; position: relative; transition: margin .28s var(--clu-ease); }

.clu-topbar {
    position: sticky; top: 0; z-index: 1020; min-height: var(--clu-topbar-h);
    display: flex; align-items: center; gap: 1rem; padding: 0 1.75rem;
    background: color-mix(in srgb, var(--clu-surface) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--clu-border-soft);
}
.clu-topbar-toggle { display: inline-grid; }
.clu-topbar-titles { min-width: 0; }
.clu-topbar-eyebrow { display: flex; align-items: center; gap: .4rem; color: var(--clu-primary-ink); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.clu-topbar-title { margin: .1rem 0 0; font-size: 1.28rem; font-weight: 800; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clu-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

.clu-icon-btn {
    width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 auto;
    border: 1px solid var(--clu-border); border-radius: .9rem; background: var(--clu-surface);
    color: var(--clu-text-muted); transition: all .16s var(--clu-ease); position: relative;
}
.clu-icon-btn svg { width: 19px; height: 19px; }
.clu-icon-btn:hover { color: var(--clu-primary-ink); border-color: var(--clu-primary); background: var(--clu-primary-soft); transform: translateY(-1px); }
.clu-icon-btn .clu-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--clu-danger); border: 2px solid var(--clu-surface); }
.clu-topbar-org { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; background: var(--clu-primary-soft); color: var(--clu-primary-ink); font-size: .78rem; font-weight: 700; }

.clu-content { flex: 1 1 auto; padding: 1.6rem 1.75rem 2.5rem; max-width: 1560px; width: 100%; margin: 0 auto; }
.clu-footer { padding: 1.1rem 1.75rem 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; color: var(--clu-text-faint); font-size: .78rem; font-weight: 600; }

/* ============================== 4. PAGE HEAD ============================== */
.clu-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; animation: clu-fade-up .35s var(--clu-ease); }
.clu-page-head .clu-eyebrow { color: var(--clu-primary-ink); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .35rem; }
.clu-page-head h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.clu-page-head p { color: var(--clu-text-muted); margin-bottom: 0; max-width: 60ch; }
.clu-page-head-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ============================== 5. BUTTONS ============================== */
.clu-scope .btn { border-radius: .8rem; font-weight: 700; font-size: .87rem; padding: .58rem 1.05rem; transition: all .16s var(--clu-ease); }
.clu-scope .btn-sm { border-radius: .65rem; padding: .38rem .75rem; font-size: .8rem; }
.clu-scope .btn:focus { box-shadow: none; }
.clu-scope .btn-brand { color: #fff; border: 0; background: var(--clu-primary); box-shadow: var(--clu-shadow-primary); }
.clu-scope .btn-brand:hover, .clu-scope .btn-brand:focus { color: #fff; background: var(--clu-primary-600); box-shadow: 0 16px 34px rgba(13,148,136,.3); transform: translateY(-1px); }
.clu-scope .btn-brand:active { transform: translateY(0); }
.clu-scope .btn-brand:disabled { opacity: .65; box-shadow: none; transform: none; }
.clu-scope .btn-outline-primary { color: var(--clu-primary-ink); border: 1px solid var(--clu-border); background: var(--clu-surface); }
.clu-scope .btn-outline-primary:hover { color: var(--clu-primary-ink); border-color: var(--clu-primary); background: var(--clu-primary-soft); }
.clu-scope .btn-outline-secondary { color: var(--clu-text-muted); border: 1px solid var(--clu-border); background: var(--clu-surface); }
.clu-scope .btn-outline-secondary:hover { color: var(--clu-text); border-color: var(--clu-text-faint); background: var(--clu-surface-alt); }
.clu-scope .btn-outline-danger { color: var(--clu-danger); border: 1px solid var(--clu-danger-soft); background: var(--clu-surface); }
.clu-scope .btn-outline-danger:hover { color: #fff; background: var(--clu-danger); border-color: var(--clu-danger); }
.clu-scope .btn-outline-success { color: var(--clu-success); border: 1px solid var(--clu-success-soft); background: var(--clu-surface); }
.clu-scope .btn-outline-success:hover { color: #fff; background: var(--clu-success); border-color: var(--clu-success); }
.clu-scope .btn-outline-warning { color: #92610a; border: 1px solid var(--clu-warning-soft); background: var(--clu-surface); }
.clu-scope .btn-outline-warning:hover { color: #fff; background: var(--clu-warning); border-color: var(--clu-warning); }
.clu-scope .btn-light { color: var(--clu-text); border: 1px solid var(--clu-border); background: var(--clu-surface-alt); }
.clu-scope .btn-light:hover { background: var(--clu-border-soft); }
.clu-scope .btn .spinner-border { width: .95rem; height: .95rem; border-width: .16rem; }

/* ============================== 6. CARDS / PANELS ============================== */
.clu-scope .card { border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius); background: var(--clu-surface); box-shadow: var(--clu-shadow-sm); }
.clu-panel { border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius); background: var(--clu-surface); box-shadow: var(--clu-shadow-sm); animation: clu-fade-up .4s var(--clu-ease) backwards; transition: box-shadow .2s var(--clu-ease); }
.clu-panel:hover { box-shadow: var(--clu-shadow); }
.clu-panel-pad { padding: 1.5rem; }
.clu-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1.4rem 1.5rem 0; }
.clu-panel-head h2 { font-size: 1.02rem; margin-bottom: .2rem; }
.clu-panel-head p { margin: 0; color: var(--clu-text-muted); font-size: .82rem; }
.clu-panel-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--clu-border-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Hero / welcome banner */
.clu-hero { position: relative; overflow: hidden; border-radius: var(--clu-radius-lg); background: var(--clu-gradient); color: #fff; padding: 2.1rem 2.3rem; box-shadow: var(--clu-shadow-lg); animation: clu-fade-up .4s var(--clu-ease); }
.clu-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 45%), radial-gradient(circle at 10% 100%, rgba(255,255,255,.12), transparent 50%); }
.clu-hero-body { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.clu-hero-badge { display: inline-block; padding: .35rem .85rem; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9rem; }
.clu-hero h2 { color: #fff; font-size: 1.65rem; margin-bottom: .55rem; }
.clu-hero p { color: rgba(255,255,255,.86); max-width: 46ch; margin-bottom: 1.1rem; }
.clu-hero .btn-light { color: var(--clu-primary-700); background: #fff; border: 0; box-shadow: 0 12px 24px rgba(0,0,0,.16); }
.clu-hero .btn-light:hover { background: #f0fdfa; }
.clu-hero-glyph { flex: 0 0 auto; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 28px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.clu-hero-glyph svg { width: 46px; height: 46px; }

/* ============================== 7. STAT TILES ============================== */
.clu-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.clu-stat { position: relative; overflow: hidden; border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius); background: var(--clu-surface); box-shadow: var(--clu-shadow-sm); padding: 1.3rem 1.4rem; transition: transform .2s var(--clu-ease), box-shadow .2s var(--clu-ease); animation: clu-fade-up .4s var(--clu-ease) backwards; }
.clu-stat:hover { transform: translateY(-3px); box-shadow: var(--clu-shadow); }
.clu-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.clu-stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: .9rem; }
.clu-stat-icon svg { width: 21px; height: 21px; }
.clu-stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: .4rem; }
.clu-stat-label { color: var(--clu-text-muted); font-size: .84rem; font-weight: 600; }
.clu-stat-note { display: inline-flex; align-items: center; gap: .3rem; margin-top: .55rem; font-size: .74rem; font-weight: 700; }

.clu-tone-primary .clu-stat-icon { background: var(--clu-primary-soft); color: var(--clu-primary-ink); }
.clu-tone-primary .clu-stat-note { color: var(--clu-primary-ink); }
.clu-tone-success .clu-stat-icon { background: var(--clu-success-soft); color: var(--clu-success); }
.clu-tone-success .clu-stat-note { color: var(--clu-success); }
.clu-tone-warning .clu-stat-icon { background: var(--clu-warning-soft); color: var(--clu-warning); }
.clu-tone-warning .clu-stat-note { color: var(--clu-warning); }
.clu-tone-danger .clu-stat-icon { background: var(--clu-danger-soft); color: var(--clu-danger); }
.clu-tone-danger .clu-stat-note { color: var(--clu-danger); }
.clu-tone-info .clu-stat-icon { background: var(--clu-info-soft); color: var(--clu-info); }
.clu-tone-info .clu-stat-note { color: var(--clu-info); }
.clu-tone-accent .clu-stat-icon { background: var(--clu-accent-soft); color: var(--clu-accent); }
.clu-tone-accent .clu-stat-note { color: var(--clu-accent); }

/* ============================== 8. FORMS ============================== */
.clu-scope .form-label { color: var(--clu-text); font-size: .82rem; font-weight: 700; margin-bottom: .4rem; }
.clu-scope .form-control, .clu-scope .form-select {
    color: var(--clu-text); background: var(--clu-surface); border: 1px solid var(--clu-border);
    border-radius: .75rem; padding: .58rem .85rem; font-size: .89rem; transition: all .15s var(--clu-ease);
}
.clu-scope .form-control:focus, .clu-scope .form-select:focus { border-color: var(--clu-primary); box-shadow: 0 0 0 .2rem var(--clu-primary-soft); background: var(--clu-surface); color: var(--clu-text); }
.clu-scope .form-control::placeholder { color: var(--clu-text-faint); }
.clu-scope .form-control:disabled, .clu-scope .form-select:disabled { background: var(--clu-surface-alt); color: var(--clu-text-faint); }
.clu-scope .form-text { color: var(--clu-text-faint); font-size: .76rem; }
.clu-scope .form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid var(--clu-border); margin-top: .15em; }
.clu-scope .form-check-input:checked { background-color: var(--clu-primary); border-color: var(--clu-primary); }
.clu-scope .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--clu-primary-soft); }
.clu-scope .form-check-label { font-size: .87rem; color: var(--clu-text); }
.clu-scope .form-switch .form-check-input { width: 2.4em; }
.clu-scope .invalid-feedback { font-size: .76rem; font-weight: 600; }
.clu-scope .is-invalid { border-color: var(--clu-danger) !important; }
.clu-scope select[multiple] { min-height: 160px; }
.clu-password-policy { margin-top: .55rem; padding: .7rem .8rem; border: 1px solid var(--clu-border-soft); border-radius: .75rem; background: var(--clu-surface-alt); }
.clu-password-policy > strong { display: block; margin-bottom: .35rem; color: var(--clu-text); font-size: .75rem; }
.clu-password-policy ul { display: flex; flex-wrap: wrap; gap: .35rem .85rem; margin: 0; padding: 0; list-style: none; }
.clu-password-policy li { color: var(--clu-text-muted); font-size: .73rem; font-weight: 650; transition: color .15s var(--clu-ease); }
.clu-password-policy li span { display: inline-grid; width: 1rem; place-items: center; margin-right: .15rem; font-weight: 900; }
.clu-password-policy li.is-valid { color: var(--clu-success); }
.clu-password-policy li.is-invalid { color: var(--clu-danger); }
.clu-password-recommendation, .clu-password-empty-note { margin: .45rem 0 0; color: var(--clu-text-faint); font-size: .7rem; line-height: 1.45; }
.clu-password-empty-note { color: var(--clu-text-muted); font-weight: 600; }

.clu-setting-switch { min-height: 100%; padding: 1rem 1rem 1rem 3.3rem; border: 1px solid var(--clu-border); border-radius: .9rem; background: var(--clu-surface-alt); position: relative; }
.clu-setting-switch .form-check-input { position: absolute; left: 1rem; top: 1.15rem; margin: 0; }

.clu-filter-bar { border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius); background: var(--clu-surface); box-shadow: var(--clu-shadow-sm); padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; position: relative; z-index: 2; animation: clu-fade-up .35s var(--clu-ease); }
.clu-filter-bar .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--clu-text-muted); }
.clu-filter-bar details summary { cursor: pointer; color: var(--clu-primary-ink); font-weight: 700; }

/* ============================== 9. TABLES ============================== */
.clu-scope .table { color: var(--clu-text); margin-bottom: 0; }
.clu-scope .table > :not(caption) > * > * { padding: .95rem 1.1rem; border-bottom-color: var(--clu-border-soft); vertical-align: middle; }
.clu-scope .table thead th { background: var(--clu-surface-alt); color: var(--clu-text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--clu-border); }
.clu-scope .table tbody tr { transition: background .14s var(--clu-ease); }
.clu-scope .table tbody tr:hover { background: var(--clu-surface-alt); }
.clu-scope .table-success { background: var(--clu-primary-soft) !important; }
.clu-table-wrap { border-radius: var(--clu-radius); overflow: hidden; border: 1px solid var(--clu-border-soft); background: var(--clu-surface); box-shadow: var(--clu-shadow-sm); animation: clu-fade-up .4s var(--clu-ease); }
.clu-action-cell { min-width: 160px; }
.clu-code { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: .8rem; color: var(--clu-primary-ink); background: var(--clu-primary-soft); padding: .1rem .45rem; border-radius: .4rem; overflow-wrap: anywhere; }

/* ============================== 10. BADGES / STATUS ============================== */
.clu-scope .badge { font-weight: 700; font-size: .72rem; letter-spacing: .01em; padding: .4em .68em; border-radius: 999px; }
.clu-scope .text-bg-success { background: var(--clu-success-soft) !important; color: var(--clu-success) !important; }
.clu-scope .text-bg-secondary { background: var(--clu-secondary-soft) !important; color: var(--clu-text-muted) !important; }
.clu-scope .text-bg-danger { background: var(--clu-danger-soft) !important; color: var(--clu-danger) !important; }
.clu-scope .text-bg-warning { background: var(--clu-warning-soft) !important; color: var(--clu-warning) !important; }
.clu-scope .text-bg-info { background: var(--clu-info-soft) !important; color: var(--clu-info) !important; }
.clu-scope .text-bg-primary { background: var(--clu-primary-soft) !important; color: var(--clu-primary-ink) !important; }
.clu-scope .badge.border { border-color: var(--clu-border) !important; background: var(--clu-surface-alt) !important; color: var(--clu-text-muted) !important; }

/* ============================== 11. ALERTS ============================== */
.clu-scope .alert { border: 1px solid transparent; border-radius: var(--clu-radius-sm); font-size: .87rem; font-weight: 500; animation: clu-fade-up .25s var(--clu-ease); }
.clu-scope .alert-danger { color: #7f1d1d; background: var(--clu-danger-soft); border-color: rgba(220,38,38,.18); }
.clu-scope .alert-success { color: #14532d; background: var(--clu-success-soft); border-color: rgba(22,163,74,.18); }
.clu-scope .alert-warning { color: #78350f; background: var(--clu-warning-soft); border-color: rgba(217,119,6,.18); }
.clu-scope .alert-info, .clu-scope .alert-light { color: var(--clu-text); background: var(--clu-surface-alt); border-color: var(--clu-border); }
.clu-scope .alert-link { font-weight: 700; }

/* ============================== 12. MODALS / DROPDOWNS ============================== */
.clu-scope .modal-content { border: 0; border-radius: var(--clu-radius-lg); box-shadow: var(--clu-shadow-lg); overflow: hidden; background: var(--clu-surface); animation: clu-pop .22s var(--clu-ease); }
.clu-scope .modal-header { border-bottom: 1px solid var(--clu-border-soft); padding: 1.3rem 1.5rem; }
.clu-scope .modal-title { font-weight: 800; }
.clu-scope .modal-footer { border-top: 1px solid var(--clu-border-soft); padding: 1.1rem 1.5rem; flex: 0 0 auto; }
.clu-scope .modal-header { flex: 0 0 auto; }
/* Başlık/altbilgi hep görünür kalsın, uzun formlarda yalnızca gövde iç kaydırma alsın —
   .modal-dialog-scrollable eklenmiş olsun ya da olmasın, her modal için garanti altına
   alınır (bir sonraki modal dosyasında sınıf unutulsa bile kırılmaz). */
.clu-scope .modal-body { padding: 1.5rem; max-height: 70vh; overflow-y: auto; }
@media (max-width: 575.98px) { .clu-scope .modal-body { max-height: 62vh; } }
.clu-scope .modal .form-alert:not(.d-none) { margin-bottom: 1.1rem; }
.clu-scope .btn-close { background-size: .8em; opacity: .5; }
.clu-scope .btn-close:hover { opacity: 1; }
.clu-scope .dropdown-menu { border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius-sm); box-shadow: var(--clu-shadow-lg); padding: .5rem; background: var(--clu-surface); animation: clu-pop .16s var(--clu-ease); }
.clu-scope .dropdown-item { border-radius: .55rem; padding: .55rem .7rem; font-size: .86rem; font-weight: 600; color: var(--clu-text); }
.clu-scope .dropdown-item:hover, .clu-scope .dropdown-item:focus { background: var(--clu-primary-soft); color: var(--clu-primary-ink); }
.clu-scope .dropdown-item.text-danger:hover { background: var(--clu-danger-soft); color: var(--clu-danger) !important; }
.clu-scope .dropdown-divider { border-color: var(--clu-border-soft); }

/* ============================== 13. PAGINATION ============================== */
.clu-scope .pagination { gap: .3rem; }
.clu-scope .page-link { border: 1px solid var(--clu-border); border-radius: .6rem !important; color: var(--clu-text-muted); font-weight: 700; font-size: .82rem; margin: 0; }
.clu-scope .page-item.active .page-link { background: var(--clu-primary); border-color: transparent; color: #fff; }
.clu-scope .page-link:hover { background: var(--clu-primary-soft); color: var(--clu-primary-ink); border-color: var(--clu-primary); }

/* ============================== 14. EMPTY / DETAIL / MISC ============================== */
.clu-empty { border: 1px dashed var(--clu-border); border-radius: var(--clu-radius); background: var(--clu-surface-alt); padding: 3rem 1.5rem; text-align: center; color: var(--clu-text-muted); animation: clu-fade-up .3s var(--clu-ease); }
.clu-empty svg { width: 44px; height: 44px; color: var(--clu-text-faint); margin-bottom: .8rem; }
.clu-empty h2 { font-size: 1rem; margin-bottom: .3rem; }

.clu-detail-list dt { color: var(--clu-text-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.clu-detail-list dd { margin-bottom: .95rem; overflow-wrap: anywhere; font-weight: 500; }

.clu-definition-item { height: 100%; padding: .95rem 1.1rem; border-radius: .9rem; background: var(--clu-surface-alt); border: 1px solid var(--clu-border-soft); }
.clu-definition-item span { display: block; margin-bottom: .25rem; color: var(--clu-text-muted); font-size: .74rem; font-weight: 600; }
.clu-definition-item strong { display: block; overflow-wrap: anywhere; }

.clu-nav-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.clu-nav-pills a { padding: .5rem 1.05rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--clu-text-muted); background: var(--clu-surface); border: 1px solid var(--clu-border-soft); transition: all .15s var(--clu-ease); }
.clu-nav-pills a:hover { border-color: var(--clu-primary); color: var(--clu-primary-ink); }
.clu-nav-pills a.is-active { color: #fff; background: var(--clu-primary); border-color: transparent; box-shadow: var(--clu-shadow-primary); }

/* Area / task cards (staff dashboard + saha işi) */
.clu-area-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem; border-radius: var(--clu-radius); border: 1px solid var(--clu-border-soft); background: var(--clu-surface); color: var(--clu-text); transition: all .18s var(--clu-ease); }
.clu-area-card:hover { color: var(--clu-primary-ink); border-color: var(--clu-primary); box-shadow: var(--clu-shadow); transform: translateY(-2px); }
.clu-area-card strong { font-size: .95rem; }
.clu-area-card span, .clu-area-card small { color: var(--clu-text-muted); }
.clu-area-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: .8rem; background: var(--clu-primary-soft); color: var(--clu-primary-ink); margin-bottom: .3rem; }
.clu-area-card-icon svg { width: 18px; height: 18px; }

.clu-server-clock { min-width: 210px; padding: .7rem 1rem; border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius-sm); background: var(--clu-surface); box-shadow: var(--clu-shadow-sm); }
.clu-server-clock span, .clu-server-clock small { display: block; color: var(--clu-text-muted); font-size: .68rem; font-weight: 600; }
.clu-server-clock strong { display: block; color: var(--clu-primary-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 1.02rem; }

/* Not: .task-card / .status-badge / .task-result-row / .task-explanation sınıf adları
   clu-theme.js (eski app.js'ten taşınan saha-işi mantığı) tarafından JS seçici olarak
   birebir kullanılır — bu yüzden burada "clu-" öneki eklenmez. Bu dosya yalnızca
   pagesv3 ekranlarında yüklendiği için pages/pagesv2'nin app.css'iyle çakışma olmaz. */
[data-task-section="live"] { border-left: 4px solid var(--clu-primary) !important; }
[data-task-section="upcoming"] { border-left: 4px solid var(--clu-info) !important; }
[data-task-section="history"] { border-left: 4px solid var(--clu-text-faint) !important; }
.task-card { padding: .9rem 1.05rem; border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius-sm); background: var(--clu-surface); transition: all .18s var(--clu-ease); }
.task-card.is-completed { border-color: #6ee7d3; background: var(--clu-success-soft); }
.task-card.is-not-completed { border-color: #fca5a5; background: var(--clu-danger-soft); }
.task-card.is-persisted { border-color: #86efac; background: var(--clu-success-soft); }
.task-card.is-locked { opacity: .78; }
.clu-task-time { font-size: .74rem; line-height: 1.4; }
.task-result-row { min-height: 36px; }
.clu-task-completed-option { min-height: 36px; padding: .4rem .8rem; border: 1px solid var(--clu-border); border-radius: .7rem; background: var(--clu-surface); cursor: pointer; transition: all .15s var(--clu-ease); }
.task-card.is-completed .clu-task-completed-option { color: var(--clu-success); border-color: #6ee7d3; background: #fff; }
.clu-task-completed-option .form-check-input { width: 1.2rem; height: 1.2rem; cursor: pointer; }
.task-explanation textarea { min-height: 66px; }
.clu-job-submit-row { position: sticky; bottom: .8rem; z-index: 2; padding: 1rem; border-radius: var(--clu-radius); background: color-mix(in srgb, var(--clu-surface) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--clu-shadow); }
.clu-task-final-note { color: var(--clu-text-muted); font-size: .82rem; font-weight: 600; }

.status-badge { display: inline-flex; align-items: center; justify-content: center; align-self: center; min-height: 24px; line-height: 1.25; text-align: center; color: var(--clu-text-muted); background: var(--clu-secondary-soft); }
.status-badge[data-status="due"] { color: var(--clu-warning); background: var(--clu-warning-soft); animation: clu-pulse 1.8s ease infinite; }
.status-badge[data-status="missed"], .status-badge[data-status="not_completed"] { color: var(--clu-danger); background: var(--clu-danger-soft); }
.status-badge[data-status="completed_on_time"], .status-badge[data-status="completed_late"] { color: var(--clu-success); background: var(--clu-success-soft); }
.status-badge[data-status="upcoming"] { color: var(--clu-info); background: var(--clu-info-soft); }

.clu-image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
.clu-image-preview-item { overflow: hidden; border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius-sm); background: var(--clu-surface); animation: clu-pop .2s var(--clu-ease); }
.clu-image-preview-item img { width: 100%; height: 104px; display: block; object-fit: cover; }
.clu-image-preview-item figcaption { overflow: hidden; padding: .45rem .6rem; color: var(--clu-text-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }

.clu-notification-item { position: relative; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--clu-border-soft); transition: background .15s var(--clu-ease); }
.clu-notification-item:last-child { border-bottom: 0; }
.clu-notification-item:hover { background: var(--clu-surface-alt); }
.clu-notification-item.is-unread { background: var(--clu-primary-soft); }
.clu-notification-item.is-unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--clu-gradient); }
.clu-notification-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: .9rem; background: var(--clu-surface); border: 1px solid var(--clu-border-soft); flex: 0 0 auto; }
.clu-notification-icon svg { width: 18px; height: 18px; color: var(--clu-primary-ink); }
.clu-notification-count { position: absolute; top: -.28rem; right: -.28rem; min-width: 1.22rem; height: 1.22rem; padding: 0 .26rem; display: grid; place-items: center; border: 2px solid var(--clu-surface); border-radius: 999px; background: var(--clu-danger); color: #fff; font-size: .61rem; font-weight: 800; line-height: 1; }
.clu-notification-dropdown { width: min(410px, calc(100vw - 1.25rem)); max-height: min(620px, calc(100vh - 5rem)); overflow: hidden; border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius); background: var(--clu-surface); box-shadow: var(--clu-shadow-lg); }
.clu-notification-dropdown-head, .clu-notification-dropdown-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--clu-border-soft); }
.clu-notification-dropdown-head > div { display: flex; flex-direction: column; min-width: 0; }
.clu-notification-dropdown-head strong { color: var(--clu-text); font-size: .92rem; }
.clu-notification-dropdown-head span { color: var(--clu-text-faint); font-size: .72rem; }
.clu-notification-dropdown-head a, .clu-notification-dropdown-foot a { color: var(--clu-primary-ink); font-size: .76rem; font-weight: 700; text-decoration: none; }
.clu-notification-dropdown-list { max-height: 430px; overflow-y: auto; }
.clu-notification-dropdown-item { display: flex; align-items: center; border-bottom: 1px solid var(--clu-border-soft); background: var(--clu-primary-soft); }
.clu-notification-dropdown-item:last-child { border-bottom: 0; }
.clu-notification-dropdown-link { min-width: 0; flex: 1; display: flex; align-items: flex-start; gap: .7rem; padding: .82rem .5rem .82rem 1rem; color: inherit; text-decoration: none; }
.clu-notification-dropdown-link:hover { background: color-mix(in srgb, var(--clu-primary-soft) 55%, var(--clu-surface)); color: inherit; }
.clu-notification-dropdown-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: .7rem; background: var(--clu-surface); color: var(--clu-primary-ink); }
.clu-notification-dropdown-icon svg { width: 15px; height: 15px; }
.clu-notification-dropdown-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: .16rem; }
.clu-notification-dropdown-copy strong { color: var(--clu-text); font-size: .8rem; }
.clu-notification-dropdown-copy > span { display: -webkit-box; overflow: hidden; color: var(--clu-text-muted); font-size: .73rem; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.clu-notification-dropdown-copy small { color: var(--clu-text-faint); font-size: .66rem; }
.clu-notification-read { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; margin-right: .7rem; border: 1px solid var(--clu-border); border-radius: 999px; background: var(--clu-surface); color: var(--clu-text-faint); }
.clu-notification-read:hover { border-color: var(--clu-success); color: var(--clu-success); }
.clu-notification-read svg { width: 14px; height: 14px; }
.clu-notification-dropdown-empty { padding: 2rem 1rem; color: var(--clu-text-faint); font-size: .78rem; text-align: center; }
.clu-notification-dropdown-alert { padding: .65rem 1rem; background: var(--clu-danger-soft); color: var(--clu-danger); font-size: .74rem; }
.clu-notification-dropdown-foot { justify-content: center; border-top: 1px solid var(--clu-border-soft); border-bottom: 0; }

/* ============================== 14b. DATATABLES ENTEGRASYONU ============================== */
/* Veriler PHP tarafından HTML olarak basılır; DataTables yalnızca istemci-taraflı
   arama/sıralama katmanı ekler (bkz. clu-theme.js). Arama kutusu "clu-dt-toolbar"
   sarmalayıcısına (dom seçeneğiyle) yerleştirilir, böylece görünümü tamamen kontrol
   edebiliyoruz; DataTables sürüm/yapı farkına duyarlı olmayan güvenli seçiciler kullanılır. */
.clu-table-wrap .clu-dt-toolbar { display: flex; justify-content: flex-end; padding: 1rem 1.3rem 0; }
.clu-dt-toolbar label { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--clu-text-muted); font-size: .78rem; font-weight: 600; }
.clu-dt-toolbar input[type="search"] { min-width: 220px; border-radius: .7rem !important; }
.clu-scope table.dataTable { border-collapse: collapse !important; }
.clu-scope table.dataTable thead th { cursor: pointer; white-space: nowrap; }
.clu-scope table.dataTable thead th.no-sort { cursor: default; }
.clu-scope div.dataTables_wrapper div.dataTables_filter,
.clu-scope div.dt-container div.dt-search { margin: 0; }
.clu-scope table.dataTable > tbody > tr.odd, .clu-scope table.dataTable > tbody > tr.even { background: transparent; }
/* CDN'den gelen datatables.bootstrap5 CSS'inin iç değişken/sınıf yapısını tam kontrol
   edemediğimizden (data-bs-theme senkronu asıl çözüm — bkz. clu-theme.js), satır/başlık
   renklerini burada da doğrudan ve öncelikli olarak sabitliyoruz; her iki katman birlikte
   dark modda "beyaz kalan satır" ihtimalini ortadan kaldırır. */
.clu-scope table.dataTable,
.clu-scope table.dataTable > tbody > tr > td,
.clu-scope table.dataTable > tbody > tr > th {
    color: var(--clu-text) !important;
    background-color: transparent !important;
    border-bottom-color: var(--clu-border-soft) !important;
}
.clu-scope table.dataTable > thead > tr > th,
.clu-scope table.dataTable > thead > tr > td {
    color: var(--clu-text-muted) !important;
    background-color: var(--clu-surface-alt) !important;
    border-bottom-color: var(--clu-border) !important;
}
.clu-scope table.dataTable > tbody > tr:hover > * { background-color: var(--clu-surface-alt) !important; }
.clu-scope table.dataTable > tbody > tr.table-success > * { background-color: var(--clu-primary-soft) !important; }
.clu-scope div.dataTables_wrapper, .clu-scope div.dt-container { color: var(--clu-text); }
.clu-scope table.dataTable thead .dt-column-order::before, .clu-scope table.dataTable thead .dt-column-order::after,
.clu-scope table.dataTable thead th.sorting::before, .clu-scope table.dataTable thead th.sorting::after,
.clu-scope table.dataTable thead th.sorting_asc::before, .clu-scope table.dataTable thead th.sorting_asc::after,
.clu-scope table.dataTable thead th.sorting_desc::before, .clu-scope table.dataTable thead th.sorting_desc::after {
    color: var(--clu-text-faint) !important;
}

/* ============================== 14c. SELECT2 ============================== */
/* Select2'nin kendi CDN CSS'i hiç CSS değişkeni kullanmıyor (sabit beyaz/gri renkler) —
   DataTables'ın aksine data-bs-theme senkronundan otomatik faydalanmıyor. Bu yüzden
   tamamen kendi tokenlarımızla, açık/koyu her iki modda da çalışacak şekilde yeniden
   derileniyor (clu-theme.js içinde .form-select öğelerine uygulanır). */
.clu-scope .select2-container { width: 100% !important; font-family: var(--clu-font); }
.clu-scope .select2-container--default .select2-selection--single {
    height: auto; min-height: 42px; padding: .34rem .85rem; display: flex; align-items: center;
    border: 1px solid var(--clu-border); border-radius: .75rem; background: var(--clu-surface);
    transition: all .15s var(--clu-ease);
}
.clu-scope .select2-container--default .select2-selection--multiple {
    min-height: 42px; padding: .2rem .5rem; border: 1px solid var(--clu-border); border-radius: .75rem;
    background: var(--clu-surface); transition: all .15s var(--clu-ease);
}
.clu-scope .select2-container--default.select2-container--open .select2-selection--single,
.clu-scope .select2-container--default.select2-container--open .select2-selection--multiple,
.clu-scope .select2-container--default.select2-container--focus .select2-selection--single,
.clu-scope .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--clu-primary); box-shadow: 0 0 0 .2rem var(--clu-primary-soft);
}
.clu-scope .select2-selection__rendered { padding: 0 !important; color: var(--clu-text) !important; font-size: .89rem; line-height: 1.4 !important; }
.clu-scope .select2-selection--single .select2-selection__rendered { display: flex; align-items: center; }
.clu-scope .select2-selection__placeholder { color: var(--clu-text-faint) !important; }
.clu-scope .select2-selection__arrow { height: 40px !important; right: .6rem !important; }
.clu-scope .select2-selection__arrow b { border-color: var(--clu-text-faint) transparent transparent transparent !important; }
.clu-scope .select2-container--open .select2-selection__arrow b { border-color: transparent transparent var(--clu-text-faint) transparent !important; }
.clu-scope .select2-selection__clear { color: var(--clu-text-faint); margin-right: .4rem; }
.clu-scope .select2-selection--multiple .select2-selection__choice {
    display: flex; align-items: center; gap: .3rem; margin: .2rem .3rem .2rem 0; padding: .2rem .3rem .2rem .65rem;
    border: 0; border-radius: 999px; background: var(--clu-primary-soft); color: var(--clu-primary-ink);
    font-size: .8rem; font-weight: 650;
}
.clu-scope .select2-selection__choice__remove { order: 2; color: var(--clu-primary-ink) !important; opacity: .7; border: 0 !important; margin: 0 !important; padding: 0 .15rem !important; }
.clu-scope .select2-selection__choice__remove:hover { opacity: 1; background: transparent !important; color: var(--clu-danger) !important; }
.clu-scope .select2-selection__choice__display { padding-left: 0 !important; }
.clu-scope .select2-dropdown {
    border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius-sm); box-shadow: var(--clu-shadow-lg);
    background: var(--clu-surface); overflow: hidden; animation: clu-pop .16s var(--clu-ease); z-index: 2000;
}
.clu-scope .select2-search--dropdown { padding: .6rem; background: var(--clu-surface); }
.clu-scope .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--clu-border); border-radius: .6rem; padding: .45rem .7rem; background: var(--clu-surface-alt);
    color: var(--clu-text); font-size: .85rem; outline: none;
}
.clu-scope .select2-search--dropdown .select2-search__field:focus { border-color: var(--clu-primary); }
.clu-scope .select2-results__options { max-height: 260px; }
.clu-scope .select2-results__option { padding: .55rem .85rem; color: var(--clu-text); font-size: .87rem; }
.clu-scope .clu-select-option { display: flex; flex-direction: column; gap: .12rem; }
.clu-scope .clu-select-option-label { color: inherit; font-weight: 650; }
.clu-scope .clu-select-option-context { color: var(--clu-text-faint); font-size: .74rem; line-height: 1.35; }
.clu-scope .select2-results__option--highlighted .clu-select-option-context { color: var(--clu-primary-ink); opacity: .72; }
.clu-scope .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--clu-primary-soft) !important; color: var(--clu-primary-ink) !important; }
.clu-scope .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--clu-surface-alt); color: var(--clu-text); }
.clu-scope .select2-results__option .select2-results__option { padding-left: 1.4rem; }
.clu-scope .select2-results__group { color: var(--clu-text-faint); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .5rem .85rem .2rem; }
.clu-scope .select2-container--default .select2-results__option--disabled { color: var(--clu-text-faint); }
.clu-scope .select2-container--disabled .select2-selection--single,
.clu-scope .select2-container--disabled .select2-selection--multiple { background: var(--clu-surface-alt); color: var(--clu-text-faint); cursor: not-allowed; }
.clu-scope .select2-container .select2-search--inline .select2-search__field { color: var(--clu-text); font-family: var(--clu-font); }
/* Bootstrap doğrulama sınıfları select2'nin sardığı orijinal <select>'e uygulanır (görünmez);
   is-invalid durumunu görünür kutuya da yansıtıyoruz. */
.clu-scope select.is-invalid + .select2-container--default .select2-selection--single,
.clu-scope select.is-invalid + .select2-container--default .select2-selection--multiple { border-color: var(--clu-danger); }

/* ============================== 15. AUTH / LOGIN ============================== */
.clu-auth-body { min-height: 100vh; background: var(--clu-bg); color: var(--clu-text); font-family: var(--clu-font); }
.clu-auth-shell { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 2rem; }
.clu-auth-shell::before, .clu-auth-shell::after { position: absolute; border-radius: 999px; content: ''; pointer-events: none; filter: blur(4px); }
.clu-auth-shell::before { top: -18rem; left: -14rem; width: 42rem; height: 42rem; background: radial-gradient(circle, rgba(20,184,166,.22), transparent 68%); }
.clu-auth-shell::after { right: -15rem; bottom: -20rem; width: 46rem; height: 46rem; background: radial-gradient(circle, rgba(99,102,241,.18), transparent 70%); }
.clu-auth-stage { position: relative; z-index: 1; width: min(1180px, 100%); min-height: 700px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); overflow: hidden; border: 1px solid var(--clu-border-soft); border-radius: var(--clu-radius-xl); background: var(--clu-surface); box-shadow: var(--clu-shadow-lg); animation: clu-fade-up .45s var(--clu-ease); }
.clu-auth-story { position: relative; display: flex; flex-direction: column; padding: 3.5rem; color: #fff; background: linear-gradient(195deg, #0a1f1d 0%, #0f2e2b 46%, #101b33 100%); isolation: isolate; }
.clu-auth-story::before { position: absolute; inset: 0; z-index: -1; content: ''; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom right, #000, transparent 75%); }
.clu-auth-brand, .clu-auth-mobile-brand { display: inline-flex; align-items: center; gap: .9rem; color: inherit; }
.clu-auth-story-copy { max-width: 34rem; margin: auto 0 2.5rem; }
.clu-auth-kicker { color: #7dd3c8; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.clu-auth-story-copy h1 { max-width: 32rem; margin: .85rem 0 1.25rem; font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 800; line-height: 1.03; letter-spacing: -.05em; color: #fff; }
.clu-auth-story-copy > p:last-child { max-width: 31rem; margin: 0; color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.75; }
.clu-auth-feature-grid { display: grid; gap: .7rem; }
.clu-auth-feature { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .8rem; padding: .9rem 1.05rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(255,255,255,.06); transition: background .2s var(--clu-ease); }
.clu-auth-feature:hover { background: rgba(255,255,255,.1); }
.clu-auth-feature-number { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .7rem; background: rgba(125,211,200,.14); color: #7dd3c8; }
.clu-auth-feature-number svg { width: 18px; height: 18px; }
.clu-auth-feature strong { display: block; margin-bottom: .18rem; font-size: .87rem; color: #fff; }
.clu-auth-feature small { display: block; color: rgba(255,255,255,.62); font-size: .77rem; line-height: 1.5; }
.clu-auth-story-footer { display: flex; align-items: center; gap: .55rem; margin-top: 1.5rem; color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 700; }
.clu-auth-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #7dd3c8; box-shadow: 0 0 0 4px rgba(125,211,200,.15); animation: clu-pulse 2.2s ease infinite; }
.clu-auth-form-col { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 4rem 2rem; }
.clu-auth-mobile-brand { display: none; margin-bottom: 2.25rem; color: var(--clu-text); }
.clu-auth-card { width: 100%; max-width: 430px; margin: auto; }
.clu-auth-card-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 1.5rem; border-radius: 16px; color: var(--clu-primary-ink); background: var(--clu-primary-soft); }
.clu-auth-card-icon svg { width: 24px; height: 24px; }
.clu-auth-card h2 { margin-bottom: .65rem; font-size: clamp(1.7rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; }
.clu-auth-card > p { margin: 0; color: var(--clu-text-muted); line-height: 1.65; }
.clu-auth-field { position: relative; }
.clu-auth-field-icon { position: absolute; z-index: 2; top: 50%; left: 1rem; display: grid; place-items: center; color: var(--clu-text-faint); transform: translateY(-50%); pointer-events: none; }
.clu-auth-input { min-height: 54px; padding-left: 3rem !important; border-radius: .9rem !important; }
.clu-auth-password-input { padding-right: 3.2rem !important; }
.clu-auth-password-toggle { position: absolute; z-index: 3; top: 50%; right: .7rem; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--clu-text-faint); border: 0; border-radius: .65rem; background: transparent; transform: translateY(-50%); }
.clu-auth-password-toggle:hover { color: var(--clu-primary); background: var(--clu-primary-soft); }
.clu-auth-submit { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: .75rem; border-radius: .9rem !important; font-weight: 800; }
.clu-auth-submit-arrow { font-size: 1.25rem; line-height: 1; transition: transform .15s var(--clu-ease); }
.clu-auth-submit:hover .clu-auth-submit-arrow { transform: translateX(3px); }
.clu-auth-help { display: flex; gap: .7rem; margin-top: 1.5rem; padding: .9rem 1.05rem; border-radius: .9rem; color: var(--clu-text-muted); background: var(--clu-surface-alt); }
.clu-auth-help > span { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--clu-border); border-radius: 50%; color: var(--clu-primary); font-size: .7rem; font-weight: 800; }
.clu-auth-help p { margin: 0; font-size: .78rem; line-height: 1.55; }
.clu-auth-footer { width: 100%; max-width: 430px; display: flex; justify-content: space-between; margin: 2rem auto 0; color: var(--clu-text-faint); font-size: .7rem; font-weight: 600; }

/* ============================== 16. RESPONSIVE ============================== */
@media (max-width: 1199.98px) {
    :root { --clu-sidebar-w: 252px; }
    .clu-content { padding: 1.3rem 1.2rem 2rem; }
    .clu-topbar { padding: 0 1.2rem; }
}

@media (max-width: 991.98px) {
    .clu-topbar-org { display: none; }
    .clu-auth-story { display: none; }
    .clu-auth-stage { width: min(560px, 100%); min-height: auto; display: block; }
    .clu-auth-form-col { min-height: calc(100vh - 4rem); padding: 3rem; }
    .clu-auth-mobile-brand { display: inline-flex; }
}

/* Tablet ve masaüstünde (>=768px) sidebar her zaman ekranda sabit durur; #cluSidebarToggle
   burada bir "daralt/genişlet" (ikon rayı) anahtarıdır — karanlık perdeli çekmece YOKTUR.
   data-clu-sidebar niteliği clu-theme.js tarafından yönetilir (bkz. applySidebarCollapse). */
@media (min-width: 768px) {
    :root[data-clu-sidebar="collapsed"] .clu-sidebar { width: var(--clu-sidebar-w-collapsed); }
    :root[data-clu-sidebar="collapsed"] .clu-main-wrap { margin-left: var(--clu-sidebar-w-collapsed); }
    :root[data-clu-sidebar="collapsed"] .clu-brand-text,
    :root[data-clu-sidebar="collapsed"] .clu-nav-heading,
    :root[data-clu-sidebar="collapsed"] .clu-nav-link span,
    :root[data-clu-sidebar="collapsed"] .clu-nav-badge,
    :root[data-clu-sidebar="collapsed"] .clu-user-meta { display: none; }
    :root[data-clu-sidebar="collapsed"] .clu-sidebar-brand,
    :root[data-clu-sidebar="collapsed"] .clu-nav-link,
    :root[data-clu-sidebar="collapsed"] .clu-user-card { justify-content: center; }
}

/* Yalnızca telefon genişliğinde (<768px) sidebar ekran dışına gizlenir ve buton onu
   karanlık perdeli bir çekmece olarak açar/kapatır (bkz. clu-theme.js toggleSidebar). */
@media (max-width: 767.98px) {
    .clu-sidebar { transform: translateX(-100%); box-shadow: 22px 0 48px rgba(6,12,20,.25); }
    .clu-sidebar.is-open { transform: translateX(0); }
    .clu-main-wrap { margin-left: 0; }
    .clu-sidebar-close { display: inline-flex; }
    .clu-sidebar-brand { padding-right: 3.4rem; }
}

@media (max-width: 575.98px) {
    .clu-topbar { padding: 0 .9rem; gap: .6rem; }
    .clu-topbar-title { font-size: 1.05rem; }
    .clu-content { padding: 1rem .8rem 1.8rem; }
    .clu-page-head .btn { width: 100%; }
    .clu-stat-value { font-size: 1.6rem; }
    .clu-hero { padding: 1.6rem 1.4rem; }
    .clu-hero-glyph { display: none; }
    .clu-auth-shell { padding: 0; }
    .clu-auth-stage { width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .clu-auth-form-col { min-height: 100vh; padding: 2rem 1.25rem 1.25rem; }
    .clu-auth-card-icon { display: none; }
    .task-result-row:not(.d-none) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .clu-task-completed-option, .task-not-completed { width: 100%; justify-content: center; }
    .clu-job-submit-row .btn { width: 100%; }
}

/* Reveal-on-scroll helper (JS toggles .is-visible) */
.clu-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--clu-ease), transform .5s var(--clu-ease); }
.clu-reveal.is-visible { opacity: 1; transform: translateY(0); }