/* ==========================================================================
   Çalışana Sor — Tasarım Sistemi (Sakin Kurumsal, indigo marka korundu)
   Yön: Linear/Stripe benzeri sadelik + tek tutarlı accent + amaçlı hareket
   ========================================================================== */
        :root {
            /* Güven odaklı tek mavi accent (indigo/mor kaldırıldı) */
            --accent: #1f5fe0;          /* signal blue — güven + netlik */
            --accent-strong: #1546b3;   /* hover / basılı */
            --accent-soft: #eaf1ff;     /* mavi-tonlu zemin/rozet */
            --accent-2: #0f2c5c;        /* derin lacivert — seyrek yapısal vurgu (gradient DEĞİL) */

            /* Mavi-fısıltılı nötr ölçek (güven psikolojisi, renk cümbüşü yok) */
            --ink: #0e1524;             /* başlık — near-black navy */
            --body: #48505f;            /* gövde metni */
            --muted: #8891a1;           /* ikincil metin */
            --line: #e5e8ee;            /* ince ayraç/çeper (hairline) */
            --surface: #ffffff;
            --surface-2: #f7f8fb;
            --bg: #f3f5f9;              /* temiz, hafif mavi-gri zemin */

            /* Yarıçap ölçeği (daha ölçülü) */
            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --radius-xl: 22px;

            /* NÖTR yumuşak gölgeler (offset + blur; renkli glow YOK) */
            --shadow-sm: 0 1px 2px rgba(14,21,36,.05), 0 1px 3px rgba(14,21,36,.07);
            --shadow-md: 0 14px 32px -16px rgba(14,21,36,.22);
            --shadow-lg: 0 30px 60px -24px rgba(14,21,36,.30);
            --shadow-accent: 0 12px 26px -14px rgba(14,21,36,.28);

            --ease: cubic-bezier(.16, 1, .3, 1);
            --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
            --font-body: 'Inter', system-ui, -apple-system, sans-serif;
            --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
        }

        /* ===== KARANLIK MOD (deep ink-navy) ===== */
        :root[data-theme="dark"] {
            --accent: #4f86ff;          /* koyu zeminde okunur mavi */
            --accent-strong: #6f9dff;
            --ink: #eaeef6;
            --body: #a7b0c1;
            --muted: #6c7788;
            --line: #1e2a3d;
            --surface: #111826;
            --surface-2: #0c1220;
            --bg: #0a0f1a;
            --accent-soft: #14213b;
            --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.55);
            --shadow-md: 0 16px 36px -18px rgba(0,0,0,.72);
            --shadow-lg: 0 30px 60px -24px rgba(0,0,0,.78);
            --shadow-accent: 0 14px 30px -16px rgba(0,0,0,.7);
        }
        /* Token kullanan bileşenler (container/card/input/btn-secondary/header) otomatik uyum sağlar.
           Aşağıda inline Tailwind renk sınıfları için koyu mod eşlemeleri var. */
        [data-theme="dark"] body { background-color: var(--bg) !important; color: var(--body); }
        [data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
        [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-50\/50, [data-theme="dark"] .bg-slate-50 { background-color: var(--surface-2) !important; }
        [data-theme="dark"] .bg-gray-100, [data-theme="dark"] .bg-gray-200 { background-color: #1b2534 !important; }
        [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800 { color: var(--ink) !important; }
        [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-600 { color: var(--body) !important; }
        [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-300 { color: var(--muted) !important; }
        [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300 { border-color: var(--line) !important; }
        [data-theme="dark"] .divide-gray-100 > * + *, [data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--line) !important; }
        [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-xl { box-shadow: var(--shadow-md) !important; }
        /* Pastel bölüm zeminleri -> koyu tonlar */
        [data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-50\/60, [data-theme="dark"] .bg-purple-50 { background-color: #1a2033 !important; }
        [data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-emerald-50 { background-color: #10241d !important; }
        [data-theme="dark"] .bg-red-50 { background-color: #2a1618 !important; }
        [data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-yellow-50 { background-color: #2a2113 !important; }
        [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-900, [data-theme="dark"] .text-blue-800 { color: #93b4ff !important; }
        [data-theme="dark"] .skeleton { background: #1b2534; }
        [data-theme="dark"] .cd-salary-track, [data-theme="dark"] .msg-search-wrap input { background: #0f1521; }
        [data-theme="dark"] .emp-dropzone { border-color: #2a3648; }
        [data-theme="dark"] .app-header { background-color: rgba(15, 21, 33, 0.82); }
        [data-theme="dark"] .app-header.scrolled { background-color: rgba(15, 21, 33, 0.92); }
        /* Mobil media-query'deki !important beyaz header'ı koyu modda ez */
        @media (max-width: 768px) {
            [data-theme="dark"] .app-header { background-color: rgba(15, 21, 33, 0.92) !important; border-bottom-color: var(--line) !important; }
            [data-theme="dark"] #mobileMenuContainer { background: rgba(13, 18, 28, 0.96) !important; }
        }
        [data-theme="dark"] img.premium-logo, [data-theme="dark"] #detailCompanyLogo { filter: none; }
        /* Yorum/mesaj balonu vb. beyaz kartlar token'a bağlı değilse yakalansın */
        [data-theme="dark"] .message-list-item, [data-theme="dark"] .notification-item { background-color: transparent !important; }

        /* Header ikon butonları (tema + dil) */
        .header-icon-btn {
            width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
            background: var(--surface); color: var(--body); cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .95rem; font-weight: 800; transition: all .2s var(--ease);
        }
        .header-icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
        #langToggleLabel { font-size: .8rem; letter-spacing: .02em; }

        body {
            font-family: var(--font-body);
            background-color: var(--bg) !important;
            color: var(--body);
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        /* Başlıklar: modern display font + sıkı tracking */
        h1, h2, h3, h4, .font-display {
            font-family: var(--font-display);
            color: var(--ink);
            letter-spacing: -0.02em;
        }

        .main-content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 1160px;
            margin: 2rem auto;
            padding: 2.5rem;
            background-color: var(--surface);
            border-radius: var(--radius-xl) !important;
            box-shadow: var(--shadow-md) !important;
            border: 1px solid var(--line);
            position: relative;
            /* NOT: z-index verilmedi — verildiğinde .container bir stacking context
               oluşturup içindeki position:fixed modalları header'ın (z:9999) ALTINA
               hapsediyordu. Ambient katman body::before z:-1 olduğundan container
               içeriği zaten onun üstünde; z-index gereksiz. */
        }

        /* ===== AMBIENT ARKA PLAN — sürekli, yavaş yayvan ışıltı katmanı =====
           Kart-hover parıltısına benzer ama sabit; container'ın arkasında akar. */
        body::before {
            content: "";
            position: fixed;
            inset: -15%;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(42% 46% at 18% 22%, rgba(31,95,224,0.14), transparent 68%),
                radial-gradient(38% 44% at 84% 26%, rgba(14, 21, 36,0.12), transparent 68%),
                radial-gradient(46% 50% at 72% 84%, rgba(59,130,246,0.10), transparent 70%),
                radial-gradient(40% 46% at 26% 88%, rgba(14, 21, 36,0.10), transparent 70%);
            filter: blur(28px);
            /* PERFORMANS: Tam ekran bulanık katmanın sürekli animasyonu (transform+scale+
               rotate) GPU'yu her karede meşgul edip dizüstülerde fan çalıştırıyordu.
               Statik gradyan görsel olarak aynı kalıyor; animasyon kaldırıldı. */
        }
        /* Koyu modda biraz daha belirgin, marka tonlu */
        [data-theme="dark"] body::before {
            background:
                radial-gradient(42% 46% at 18% 22%, rgba(14, 21, 36,0.22), transparent 66%),
                radial-gradient(38% 44% at 84% 26%, rgba(14, 21, 36,0.20), transparent 66%),
                radial-gradient(46% 50% at 72% 84%, rgba(56,120,246,0.16), transparent 68%),
                radial-gradient(40% 46% at 26% 88%, rgba(31,95,224,0.18), transparent 68%);
        }
        @media (prefers-reduced-motion: reduce) {
            body::before { animation: none; }
        }

        /* PERFORMANS: Ekran dışındaki ağır bölümleri boyama/animasyon dışı bırak.
           Görünür alana gelince çizilir; ekran dışındayken infinite animasyonları
           da durur (CPU/GPU tasarrufu → dizüstü fanı sorunu). */
        .guide-section  { content-visibility: auto; contain-intrinsic-size: auto 520px; }
        .levels-section { content-visibility: auto; contain-intrinsic-size: auto 420px; }
        .trust-section  { content-visibility: auto; contain-intrinsic-size: auto 640px; }
        .main-footer    { content-visibility: auto; contain-intrinsic-size: auto 420px; }

        /* ---- Butonlar: tek tutarlı indigo accent (siyah→mor gimmick kaldırıldı) ---- */
        .btn-primary {
            background: var(--accent) !important;
            color: #fff !important;
            padding: 0.9rem 1.6rem !important;
            border-radius: var(--radius) !important;
            font-weight: 700 !important;
            letter-spacing: 0 !important;
            transition: transform .25s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease) !important;
            border: none !important;
            box-shadow: var(--shadow-accent) !important;
            display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem;
        }
        .btn-primary:hover {
            transform: translateY(-2px) !important;
            background: var(--accent-strong) !important;
            box-shadow: 0 18px 34px -12px rgba(31,95,224,.5) !important;
        }
        .btn-primary:active { transform: translateY(0) scale(.985) !important; }

        .btn-secondary {
            background-color: var(--surface) !important;
            color: var(--ink) !important;
            border: 1px solid var(--line) !important;
            padding: 0.85rem 1.4rem !important;
            border-radius: var(--radius) !important;
            font-weight: 700 !important;
            transition: transform .25s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease) !important;
            box-shadow: var(--shadow-sm) !important;
        }
        .btn-secondary:hover {
            background-color: var(--surface-2) !important;
            color: var(--accent) !important;
            border-color: #cdd3de !important;
            transform: translateY(-2px) !important;
        }
        .btn-secondary:active { transform: translateY(0) scale(.985) !important; }

        .btn-analyze {
            background-color: #059669 !important;
            color: white !important;
            border-radius: var(--radius) !important;
            font-weight: 700 !important;
            padding: 0.75rem 1.5rem !important;
            transition: transform .25s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease) !important;
        }
        .btn-analyze:hover {
            background-color: #047857 !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 14px 26px -12px rgba(5, 150, 105, 0.5) !important;
        }

        .input-field {
            border: 1px solid var(--line) !important;
            border-radius: var(--radius) !important;
            padding: 0.95rem 1.15rem !important;
            background-color: var(--surface-2) !important;
            font-weight: 500 !important;
            color: var(--ink) !important;
            transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease) !important;
            width: 100%;
        }
        .input-field:focus {
            background-color: var(--surface) !important;
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 4px rgba(14, 21, 36, 0.14) !important;
            outline: none !important;
        }
        .input-field::placeholder { color: var(--muted) !important; font-weight: 500; }

        /* ===== POZİSYON SEÇİCİ (arama + kategori + Diğer) ===== */
        .jt-combo { position: relative; }
        .jt-trigger {
            display: flex !important; align-items: center; justify-content: space-between;
            gap: 0.5rem; cursor: pointer; text-align: left;
        }
        .jt-trigger .jt-placeholder { color: var(--muted); font-weight: 500; }
        .jt-trigger .jt-placeholder.has-value { color: var(--ink); font-weight: 600; }
        .jt-caret { color: var(--muted); font-size: 0.8rem; transition: transform .2s var(--ease); }
        .jt-combo.open .jt-caret { transform: rotate(180deg); }
        .jt-back {
            margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--accent);
            background: none; border: none; cursor: pointer; padding: 0.15rem 0;
        }
        .jt-dropdown {
            position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
            background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); box-shadow: var(--shadow-lg);
            overflow: hidden; padding-bottom: 0.35rem;
        }
        .jt-search-wrap {
            display: flex; align-items: center; gap: 0.55rem;
            padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
            position: sticky; top: 0; background: var(--surface);
        }
        .jt-search-wrap i { color: var(--muted); font-size: 0.85rem; }
        .jt-search-wrap input {
            flex: 1; border: none; outline: none; background: transparent;
            color: var(--ink); font-weight: 500; font-size: 0.95rem;
        }
        .jt-search-wrap input::placeholder { color: var(--muted); }
        .jt-options { max-height: 240px; overflow-y: auto; padding: 0.3rem; }
        .jt-option {
            display: block; width: 100%; text-align: left; cursor: pointer;
            padding: 0.6rem 0.8rem; border: none; background: none; border-radius: 0.6rem;
            color: var(--body); font-weight: 600; font-size: 0.92rem;
        }
        .jt-option:hover, .jt-option.jt-active { background: var(--accent-soft); color: var(--accent); }
        .jt-group-label {
            padding: 0.5rem 0.85rem 0.25rem; font-size: 0.7rem; font-weight: 800;
            letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
        }
        .jt-empty { padding: 0.9rem; text-align: center; color: var(--muted); font-size: 0.88rem; }
        .jt-other-btn {
            display: flex; align-items: center; gap: 0.5rem; width: calc(100% - 0.7rem);
            margin: 0.25rem 0.35rem 0; padding: 0.65rem 0.8rem; cursor: pointer;
            border: 1px dashed var(--line); border-radius: 0.6rem; background: none;
            color: var(--accent); font-weight: 800; font-size: 0.9rem;
        }
        .jt-other-btn:hover { background: var(--accent-soft); }

        .card {
            background-color: var(--surface) !important;
            border-radius: var(--radius-lg) !important;
            padding: 1.75rem !important;
            border: 1px solid var(--line) !important;
            box-shadow: var(--shadow-sm) !important;
            transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s var(--ease) !important;
            position: relative;
        }
        .card:hover {
            transform: translateY(-4px) !important;
            box-shadow: var(--shadow-md) !important;
            border-color: #dbe0ea !important;
            z-index: 10;
        }

        /* ---- Hareket: yönlü scroll-reveal (Emil ilkeleri, güvenli JS-gated) ---- */
        /* JS yoksa içerik görünür kalır; sadece .js-motion varken gizlenir */
        .js-motion [data-reveal] {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .75s var(--ease), transform .75s var(--ease);
            will-change: opacity, transform;
        }
        /* Yön varyantları: kaydırdıkça soldan/sağdan/aşağıdan/ölçekle gelir */
        .js-motion [data-reveal="left"]  { transform: translateX(-46px); }
        .js-motion [data-reveal="right"] { transform: translateX(46px); }
        .js-motion [data-reveal="up"]    { transform: translateY(34px); }
        .js-motion [data-reveal="scale"] { transform: scale(.93); }
        .js-motion [data-reveal="fade"]  { transform: none; }
        .js-motion [data-reveal].is-visible {
            opacity: 1;
            transform: none;
        }
        .js-motion [data-reveal][data-reveal-delay="1"] { transition-delay: .09s; }
        .js-motion [data-reveal][data-reveal-delay="2"] { transition-delay: .18s; }
        .js-motion [data-reveal][data-reveal-delay="3"] { transition-delay: .27s; }
        .js-motion [data-reveal][data-reveal-delay="4"] { transition-delay: .36s; }
        .js-motion [data-reveal][data-reveal-delay="5"] { transition-delay: .45s; }
        @media (prefers-reduced-motion: reduce) {
            .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
            * { scroll-behavior: auto !important; }
        }

        /* ---- Sayfa (bölüm) geçişi: yumuşak fade ---- */
        /* Sadece opacity kullanılır (transform yok) — position:fixed/sticky çocukları etkilemez */
        @media (prefers-reduced-motion: no-preference) {
            .js-motion .content-section.active { animation: sectionFade .45s var(--ease) both; }
        }
        @keyframes sectionFade { from { opacity: 0; } to { opacity: 1; } }

        /* ---- Şık boş durum (empty state) bileşeni ---- */
        .empty-state {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; padding: 3rem 1.5rem; gap: .6rem;
            background: var(--surface-2);
            border: 1px dashed #d9dee8;
            border-radius: var(--radius-lg);
        }
        .empty-state .es-icon {
            width: 64px; height: 64px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--accent-soft); color: var(--accent);
            font-size: 1.55rem; margin-bottom: .25rem;
        }
        .empty-state .es-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.05rem; letter-spacing: -.01em; }
        .empty-state .es-text { font-size: .9rem; color: var(--muted); max-width: 42ch; font-weight: 500; line-height: 1.55; }
        .empty-state .es-action { margin-top: .4rem; }

        /* ---- Bildirim rozeti: yumuşak pop (belirdiğinde) ---- */
        @media (prefers-reduced-motion: no-preference) {
            .notification-badge:not(.hidden) { animation: badgeSoftPop .4s var(--ease); }
        }
        @keyframes badgeSoftPop {
            0% { transform: scale(.4); opacity: 0; }
            60% { transform: scale(1.18); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* ---- Skeleton (iskelet) yükleyiciler — spinner yerine şekil-eşleşen shimmer ---- */
        .skeleton {
            position: relative;
            overflow: hidden;
            background: #eef1f5;
            border-radius: var(--radius);
        }
        .skeleton::after {
            content: "";
            position: absolute; inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
            animation: shimmer 1.4s infinite;
        }
        @keyframes shimmer { 100% { transform: translateX(100%); } }
        .sk-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; background: var(--surface); margin-bottom: 1rem; }
        .sk-line { height: 12px; border-radius: 6px; margin: .55rem 0; }
        .sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
        @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

        /* ---- Mesaj balonu giriş animasyonu (gönderen sağdan, alıcı soldan) ---- */
        @media (prefers-reduced-motion: no-preference) {
            .js-motion .message-container.justify-start { animation: msgInLeft .34s var(--ease) both; }
            .js-motion .message-container.justify-end { animation: msgInRight .34s var(--ease) both; }
        }
        @keyframes msgInLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
        @keyframes msgInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

        /* ---- Profil kariyer zaman çizelgesi (timeline) ---- */
        .cs-timeline-item { position: relative; padding-left: 2.6rem; }
        .cs-timeline-item::before {
            content: ""; position: absolute; left: 13px; top: 20px; bottom: -1rem;
            width: 2px; background: var(--line);
        }
        .cs-timeline-item:last-child::before { display: none; }
        .cs-timeline-item .cs-dot {
            position: absolute; left: 5px; top: 6px;
            width: 18px; height: 18px; border-radius: 50%;
            background: #fff; border: 3px solid var(--accent);
            box-shadow: 0 0 0 4px var(--accent-soft);
        }
        .cs-timeline-item .cs-tl-card {
            background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); padding: .85rem 1.1rem; box-shadow: var(--shadow-sm);
            transition: transform .25s var(--ease), box-shadow .25s var(--ease);
        }
        .cs-timeline-item .cs-tl-card:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
        .exp-delete-btn {
            width: 32px; height: 32px; border-radius: 9999px; border: none; cursor: pointer;
            background: transparent; color: #cbd2dc; font-size: .9rem;
            display: flex; align-items: center; justify-content: center;
            transition: background .18s var(--ease), color .18s var(--ease);
        }
        .exp-delete-btn:hover { background: #fef2f2; color: #ef4444; }

        /* ===== KAYIT SİHİRBAZI (3 KADEMELİ) ===== */
        .reg-stepper { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; margin-bottom: 1.9rem; }
        .reg-step-dot { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 78px; }
        .reg-dot-num {
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display); font-weight: 800; font-size: .95rem;
            background: var(--surface-2); color: var(--muted); border: 2px solid var(--line);
            transition: all .35s var(--ease);
        }
        .reg-dot-label { font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
        .reg-step-dot.is-active .reg-dot-num { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-accent); transform: scale(1.08); }
        .reg-step-dot.is-active .reg-dot-label { color: var(--accent); }
        .reg-step-dot.is-done .reg-dot-num { background: #059669; color: #fff; border-color: #059669; }
        .reg-step-dot.is-done .reg-dot-label { color: #059669; }
        .reg-step-line { flex: 1; max-width: 46px; height: 2px; background: var(--line); margin-top: 17px; border-radius: 2px; transition: background .35s var(--ease); }
        .reg-step-line.is-done { background: #059669; }

        .reg-step { display: none; }
        .reg-step.is-active { display: block; }
        @media (prefers-reduced-motion: no-preference) {
            .reg-step.is-active { animation: regStepIn .42s var(--ease) both; }
        }
        @keyframes regStepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

        /* Başarı (3. kademe) */
        .reg-success { text-align: center; padding: 1rem .5rem 1.5rem; }
        .reg-check {
            width: 92px; height: 92px; border-radius: 50%;
            background: #ecfdf5; display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1.4rem;
        }
        .reg-check svg { width: 52px; height: 52px; }
        .reg-check .rc-circle { fill: none; stroke: #059669; stroke-width: 3; }
        .reg-check .rc-check { fill: none; stroke: #059669; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
        @media (prefers-reduced-motion: no-preference) {
            .reg-check .rc-circle { stroke-dasharray: 166; stroke-dashoffset: 166; animation: rcCircle .55s var(--ease) forwards; }
            .reg-check .rc-check { stroke-dasharray: 48; stroke-dashoffset: 48; animation: rcCheck .4s .5s var(--ease) forwards; }
            .reg-success .reg-success-body { opacity: 0; animation: regFadeUp .5s .35s var(--ease) forwards; }
        }
        @keyframes rcCircle { to { stroke-dashoffset: 0; } }
        @keyframes rcCheck { to { stroke-dashoffset: 0; } }
        @keyframes regFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
        .reg-success h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: .6rem; letter-spacing: -.02em; }
        .reg-success p { color: var(--body); font-size: .95rem; line-height: 1.6; max-width: 40ch; margin: 0 auto 1.5rem; }
        .reg-success .reg-mail-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--accent-soft); color: var(--accent); font-weight: 700; padding: .3rem .8rem; border-radius: 9999px; font-size: .88rem; }

        /* ===== "Çalışanım" doğrulama bölümü (sadeleştirilmiş) ===== */
        .emp-verify { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
        .emp-verify.hidden { display: none !important; }
        .emp-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.15rem 1.2rem; }
        .emp-block-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .95rem; }
        .emp-num {
            width: 26px; height: 26px; border-radius: 50%;
            background: var(--accent); color: #fff; font-weight: 800; font-size: .82rem;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            font-family: var(--font-display);
        }
        .emp-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
        .emp-sub { font-size: .82rem; color: var(--muted); font-weight: 500; margin-top: .15rem; line-height: 1.45; }
        .emp-badge { background: var(--accent-soft); color: var(--accent); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 9999px; }
        .emp-dropzone {
            display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
            gap: .4rem; border: 2px dashed #d9dee8; border-radius: var(--radius);
            padding: 1.5rem 1rem; cursor: pointer; background: var(--surface);
            transition: border-color .2s var(--ease), background .2s var(--ease);
        }
        .emp-dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
        .emp-dz-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .emp-dz-title { font-weight: 700; color: var(--ink); font-size: .9rem; }
        .emp-dz-file { font-size: .8rem; color: var(--muted); font-weight: 600; }

        /* ===== ŞİRKET SAYFASI: Hakkında + Maaş Eğilimleri kartları ===== */
        .cd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.25rem 1.35rem; }
        .cd-card-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; letter-spacing: -.01em; }

        /* Hakkında satırları */
        .cd-about-row { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
        .cd-about-row:last-child { border-bottom: none; }
        .cd-about-ic { width: 34px; height: 34px; border-radius: .6rem; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
        .cd-about-label { font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
        .cd-about-val { font-size: .92rem; font-weight: 700; color: var(--ink); word-break: break-word; }
        .cd-about-val a { color: var(--accent); }
        /* satırların kademeli girişi */
        .cd-about-row { opacity: 0; transform: translateY(8px); animation: cdRowIn .5s var(--ease) forwards; }
        .cd-about-row:nth-child(1) { animation-delay: .05s; }
        .cd-about-row:nth-child(2) { animation-delay: .13s; }
        .cd-about-row:nth-child(3) { animation-delay: .21s; }
        .cd-about-row:nth-child(4) { animation-delay: .29s; }
        @keyframes cdRowIn { to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .cd-about-row { opacity: 1 !important; transform: none !important; animation: none !important; } }

        /* Maaş eğilimleri barları (sayfa açılınca dolar) */
        .cd-salary-row { margin-bottom: .85rem; }
        .cd-salary-row:last-child { margin-bottom: 0; }
        .cd-salary-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
        .cd-salary-band { font-size: .82rem; font-weight: 700; color: var(--ink); }
        .cd-salary-count { font-size: .72rem; font-weight: 700; color: var(--muted); }
        .cd-salary-track { height: 10px; border-radius: 9999px; background: #eef1f5; overflow: hidden; }
        /* Dolum animasyonu transform:scaleX ile (layout thrash yok, GPU dostu) */
        .cd-salary-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left center; transition: transform 1.3s var(--ease); }
        @media (prefers-reduced-motion: reduce) { .cd-salary-fill { transition: none; transform: scaleX(1); } }

        /* Sektör etiketleri */
        .cd-tag { display: inline-flex; align-items: center; gap: .35rem; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 800; padding: .3rem .7rem; border-radius: 9999px; letter-spacing: .01em; }

        /* ===== MESAJ ARAMA (sohbet + sohbet içi) ===== */
        .msg-search-wrap { position: relative; padding: .75rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
        .msg-search-wrap i { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; pointer-events: none; }
        .msg-search-wrap input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9999px; padding: .6rem .9rem .6rem 2.4rem; font-size: .9rem; font-weight: 500; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
        .msg-search-wrap input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(31,95,224,.12); }
        .chat-search-bar { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface); }
        .chat-search-bar.hidden { display: none !important; }
        .chat-search-bar i { color: var(--muted); font-size: .85rem; }
        .chat-search-bar input { flex: 1; border: none; background: transparent; font-size: .92rem; color: var(--ink); }
        .chat-search-bar input:focus { outline: none; }
        .chat-search-bar button { width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
        .chat-search-bar button:hover { background: #f1f5f9; color: var(--ink); }
        .msg-hidden-by-search { display: none !important; }
        mark.msg-hl { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }

        /* ---- Micro-interaction: buton ripple (tıklama dalgası) ---- */
        .btn-primary, .btn-secondary, .btn-analyze, .lookup-act { position: relative; overflow: hidden; }
        .cs-ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            pointer-events: none;
            opacity: .6;
            animation: cs-ripple .6s var(--ease);
        }
        @keyframes cs-ripple { to { transform: scale(2.6); opacity: 0; } }
        @media (prefers-reduced-motion: reduce) { .cs-ripple { display: none !important; } }

        /* ---- Micro-interaction: kartlarda imleç takipli spotlight ---- */
        .card, .stat-card, .chart-card, .spot { --mx: 50%; --my: 50%; }
        .card::after, .stat-card::after, .chart-card::after, .spot::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(240px circle at var(--mx) var(--my), rgba(31,95,224,.10), transparent 62%);
            opacity: 0;
            transition: opacity .3s var(--ease);
            pointer-events: none;
            z-index: 0;
        }
        .card:hover::after, .stat-card:hover::after, .chart-card:hover::after, .spot:hover::after { opacity: 1; }
        .card > *, .stat-card > *, .chart-card > *, .spot > * { position: relative; z-index: 1; }
        @media (prefers-reduced-motion: reduce) {
            .card::after, .stat-card::after, .chart-card::after, .spot::after { display: none; }
        }

        /* ---- Bölüm panelleri: pastel Tailwind zeminleri yerine sakin nötr kart ---- */
        .section-panel {
            background: var(--surface) !important;
            border: 1px solid var(--line) !important;
            border-radius: var(--radius-lg) !important;
            box-shadow: var(--shadow-sm) !important;
        }
        /* Ana arama paneli: temiz yükseltilmiş kart (accent şerit kaldırıldı — AI-tell) */
        .search-panel {
            position: relative;
            background: var(--surface) !important;
            border: 1px solid var(--line) !important;
            border-radius: var(--radius-lg) !important;
            box-shadow: var(--shadow-md) !important;
        }
        /* Bölüm başlığı yardımcı sınıfı (Sora + ink) */
        .section-title {
            font-family: var(--font-display);
            color: var(--ink) !important;
            letter-spacing: -0.02em;
            font-weight: 800;
        }

        /* ---- Giriş / Kayıt: sakin kurumsal merkez kart ---- */
        #authSection.content-section.active {
            display: block;
            max-width: 500px;
            margin: 2.5rem auto;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            padding: 2.25rem;
        }
        #authSection .section-title { text-align: center; }
        /* Giriş/Kayıt sekme düğmeleri: tek accent dili */
        #showLoginBtn, #showRegisterBtn {
            border-radius: var(--radius) !important;
            transition: all .2s var(--ease);
        }
        #showLoginBtn { background: var(--accent) !important; }
        #showLoginBtn:hover { background: var(--accent-strong) !important; }
        #showRegisterBtn { background: var(--surface-2) !important; color: var(--body) !important; border: 1px solid var(--line); }
        #showRegisterBtn:hover { background: #eef0f4 !important; }
        .rating-star {
            color: #d1d5db;
            cursor: pointer;
            font-size: 1.65rem;
            transition: transform .18s var(--ease), color .2s var(--ease);
            transform-origin: center;
        }
        .rating-star:hover { transform: scale(1.22); }
        .rating-star.selected {
            color: #f59e0b; /* amber-500 — daha dolu, canlı sarı */
        }
        @media (prefers-reduced-motion: no-preference) {
            .rating-star.selected { animation: starPop .32s var(--ease); }
        }
        @keyframes starPop {
            0% { transform: scale(1); }
            45% { transform: scale(1.4); }
            100% { transform: scale(1); }
        }

        /* ===== YENİ: YORUM FİLTRE ÇUBUĞU ===== */
        .review-filter-btn {
            padding: 0.5rem 0.9rem;
            border-radius: 0.85rem;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: #4b5563;
            background: #f3f4f6;
            border: 1px solid transparent;
            transition: all 0.18s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            white-space: nowrap;
            cursor: pointer;
        }
        .review-filter-btn:hover {
            background: #e5e7eb;
            transform: translateY(-1px);
        }
        .review-filter-btn.active {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            box-shadow: 0 6px 14px -4px rgba(31,95,224,0.45);
            border-color: rgba(255,255,255,0.2);
        }
        .review-filter-btn.active .text-yellow-400 { color: #fde047 !important; }
        .review-filter-btn.active .text-gray-300 { color: rgba(255,255,255,0.4) !important; }

        /* Çalışma türü rozeti (yorum kartında) */
        .emp-type-badge {
            display: inline-flex; align-items: center; gap: 0.3rem;
            font-size: 0.7rem; font-weight: 800; letter-spacing: .01em;
            color: var(--accent); background: var(--accent-soft);
            border: 1px solid var(--line); padding: 0.12rem 0.5rem; border-radius: 9999px;
        }
        .emp-type-badge i { font-size: 0.62rem; opacity: .85; }

        /* Şirket (kurumsal) yanıtı */
        .company-reply { margin-top: 0.9rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); }
        .company-reply-head { font-size: 0.78rem; font-weight: 800; color: var(--accent); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
        .company-reply p { font-size: 0.9rem; color: var(--body); line-height: 1.55; font-weight: 500; margin: 0; }
        .corp-reply-box { margin-top: 0.6rem; }
        .corp-reply-box .corp-reply-input { width: 100%; }
        .corp-reply-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
        .corp-reply-actions .btn-primary { padding: 0.55rem 1rem !important; font-size: 0.85rem; }

        /* ŞİRKET ANALİZİM (kurumsal) */
        .ca-co { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
        .ca-co-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--ink); }
        .ca-co-sub { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
        .ca-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.6rem; margin-bottom: 1.1rem; }
        @media (max-width: 560px) { .ca-stats { grid-template-columns: repeat(2,1fr); } }
        .ca-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; text-align: center; }
        .ca-stat-num { font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
        .ca-stat-lbl { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin-top: 0.2rem; }
        .ca-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
        @media (max-width: 560px) { .ca-grid2 { grid-template-columns: 1fr; } }
        .ca-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; }
        .ca-panel h4 { font-size: 0.85rem; font-weight: 800; color: var(--ink); margin-bottom: 0.6rem; }
        .ca-dist-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
        .ca-dist-star { font-size: 0.72rem; font-weight: 800; color: #f59e0b; width: 30px; flex-shrink: 0; }
        .ca-dist-bar { flex: 1; height: 8px; border-radius: 9999px; background: var(--line); overflow: hidden; }
        .ca-dist-fill { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
        .ca-dist-num { font-size: 0.75rem; font-weight: 800; color: var(--body); width: 24px; text-align: right; flex-shrink: 0; }
        .ca-etype { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; font-size: 0.85rem; font-weight: 700; color: var(--body); border-bottom: 1px dashed var(--line); }
        .ca-etype i { color: var(--accent); margin-right: 0.3rem; }
        .ca-etype b { color: var(--ink); }
        .ca-job-row { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0; font-size: 0.82rem; font-weight: 600; color: var(--body); }
        .ca-job-count { font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 0.05rem 0.5rem; border-radius: 9999px; font-size: 0.72rem; }
        .ca-note { margin-top: 1rem; font-size: 0.75rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
        .ca-note i { color: #10b981; }

        /* ===== YENİ: YORUM BEĞENİ (KALP) BUTONU ===== */
        .review-like-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.4rem 0.9rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-weight: 800;
            color: #6b7280;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            transition: all 0.18s ease;
            cursor: pointer;
        }
        .review-like-btn:hover { background: #fef2f2; border-color: #fecaca; color: #ef4444; transform: translateY(-1px); }
        .review-like-btn.liked { background: #fef2f2; border-color: #fecaca; color: #ef4444; }
        .review-like-btn.liked i { animation: likePop 0.32s ease; }
        .review-like-btn i { font-size: 0.95rem; }
        @keyframes likePop {
            0% { transform: scale(1); }
            45% { transform: scale(1.45); }
            100% { transform: scale(1); }
        }
        /* Header styles */
        /* Header styles */
        .app-header {
            background-color: rgba(255, 255, 255, 0.78);
            -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
            padding: 0.85rem 2rem;
            box-shadow: none;
            margin-bottom: 2rem;
            border-radius: 0;
            border-bottom: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            position: sticky; /* modern yapışkan header */
            top: 0;
            z-index: 9999;
            transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
        }
        /* Sayfa kaydırılınca ince gölge (motion.js .scrolled ekler) */
        .app-header.scrolled {
            box-shadow: var(--shadow-sm);
            background-color: rgba(255, 255, 255, 0.9);
        }
        .app-header .logo a,
        .app-header .logo {
            font-family: var(--font-display);
            font-size: 1.55rem;
            font-weight: 800;
            color: var(--ink);
            letter-spacing: -0.03em;
            white-space: nowrap;
        }
        .app-header nav a {
            color: var(--body);
            font-weight: 600;
            margin: 0 0.7rem;
            font-size: 0.95rem;
            transition: color 0.2s var(--ease);
            white-space: nowrap;
        }
        .app-header nav a:hover {
            color: var(--accent);
        }
        .app-header .auth-links {
            display: flex;
            align-items: center;
            gap: 0.9rem;
        }
        .app-header .auth-links a {
            color: var(--body);
            font-weight: 600;
            white-space: nowrap;
            transition: color 0.2s var(--ease);
        }
        .app-header .auth-links a:hover {
            color: var(--accent);
            text-decoration: none;
        }
        /* ===== "Kayıt Ol" — CAM (glassmorphism) BUTON =====
           İnce ışıklı kenar (maske hilesi) + üst parıltı + backdrop blur.
           Kurumsal indigo; açık modda dolu indigo cam, koyu modda şeffaf dark-glass. */
        #registerLinkDesktop, .cs-glass-btn {
            position: relative;
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            height: 40px; padding: 0 20px; border: 0; border-radius: 11px; isolation: isolate;
            font-weight: 600; font-size: 14.5px; letter-spacing: -.004em; white-space: nowrap; cursor: pointer;
            color: #fff !important; text-decoration: none;
            background: linear-gradient(180deg, var(--accent), var(--accent) 55%, var(--accent-strong));
            box-shadow: 0 10px 26px -12px rgba(31,95,224,.55);
            -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
            transition: transform .5s cubic-bezier(.22,1,.36,1), background .4s ease, box-shadow .5s cubic-bezier(.22,1,.36,1) !important;
        }
        #registerLinkDesktop::before, .cs-glass-btn::before {           /* ışıklı ince kenar */
            content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
            background: linear-gradient(148deg, rgba(255,255,255,.85), rgba(255,255,255,.25) 42%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.55));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
            pointer-events: none; transition: filter .45s cubic-bezier(.22,1,.36,1);
        }
        #registerLinkDesktop::after, .cs-glass-btn::after {             /* üst parıltı */
            content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
            background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 48%); pointer-events: none;
        }
        #registerLinkDesktop:hover, .cs-glass-btn:hover {
            transform: translateY(-1px); color: #fff !important;
            background: linear-gradient(180deg, var(--accent), var(--accent-strong) 55%, var(--accent-strong));
            box-shadow: 0 12px 30px -12px rgba(31,95,224,.65);
        }
        #registerLinkDesktop:hover::before, .cs-glass-btn:hover::before { filter: brightness(1.35); }
        #registerLinkDesktop:active, .cs-glass-btn:active { transform: translateY(0); }

        /* Koyu mod — gerçek "dark glass": indigo tonlu şeffaf cam */
        [data-theme="dark"] #registerLinkDesktop, [data-theme="dark"] .cs-glass-btn {
            background: rgba(79,134,255,.14);
            box-shadow: 0 12px 34px -18px rgba(79,134,255,.5);
        }
        [data-theme="dark"] #registerLinkDesktop::before, [data-theme="dark"] .cs-glass-btn::before {
            background: linear-gradient(148deg, rgba(199,205,255,.7), rgba(79,134,255,.35) 42%, rgba(31,95,224,.15) 62%, rgba(199,205,255,.45));
        }
        [data-theme="dark"] #registerLinkDesktop::after, [data-theme="dark"] .cs-glass-btn::after {
            background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 46%);
        }
        [data-theme="dark"] #registerLinkDesktop:hover, [data-theme="dark"] .cs-glass-btn:hover {
            background: rgba(79,134,255,.24);
            box-shadow: 0 10px 28px -12px rgba(79,134,255,.6);
        }
        @media (prefers-reduced-motion: reduce) {
            #registerLinkDesktop, .cs-glass-btn,
            #registerLinkDesktop::before, .cs-glass-btn::before { transition-duration: .01ms !important; }
        }

        /* Profile dropdown styles */
        .profile-dropdown {
            position: relative;
            display: inline-block;
        }
        .profile-dropdown-content {
            display: none; /* Keep this for initial hiding, but JS or :focus-within will change it */
            position: absolute;
            background-color: #f9fafb;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            right: 0; /* Align to the right */
            border-radius: 8px;
            overflow: hidden;

            /* Add transitions for a smoother effect if you decide to use opacity/visibility */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .profile-dropdown-content a, .profile-dropdown-content button {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            white-space: nowrap;
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
        }
        .profile-dropdown-content a:hover, .profile-dropdown-content button:hover {
            background-color: #f1f1f1;
        }
        .profile-dropdown:hover .profile-dropdown-content {
            display: block; /* This will make it appear on hover */
            opacity: 1;
            visibility: visible;
        }
        .profile-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ccc; /* Placeholder background */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #fff;
            overflow: hidden; /* Ensure image fits */
            cursor: pointer; /* Make it clickable */
            position: relative; /* For the edit icon */
        }
        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .profile-avatar .edit-icon {
            position: absolute;
            bottom: 4px; /* Avatarın alt kenarından biraz yukarıda */
            right: 4px;  /* Avatarın sağ kenarından biraz solda */
            background-color: var(--accent);
            color: white;
            border-radius: 50%;
            padding: 4px;
            font-size: 0.8rem; /* İkon boyutunu ayarlayın */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            cursor: pointer;
            z-index: 2; /* Avatar resminin üstünde kalmasını sağlar */
        }
        .profile-name-display {
            font-weight: 600;
            color: var(--accent);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .profile-name-display svg {
            transition: transform 0.2s ease;
        }
        .profile-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}
        /* ===== BİLDİRİM BUTONU — dil/tema butonlarıyla aynı tasarım ===== */
        .notification-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            color: var(--body);
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 50%;
            cursor: pointer;
            transition: all .2s var(--ease);
        }

        .notification-icon:hover {
            color: var(--accent);
            border-color: var(--accent);
            transform: translateY(-1px);
        }

        .notification-icon svg {
            width: 19px;
            height: 19px;
            transition: transform 0.3s var(--ease);
        }

        .notification-icon:hover svg {
            /* Fare üzerine gelince zil çalma sallanması */
            animation: bell-ring 0.6s ease-in-out both;
        }

        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #dc2626; /* bildirim rozeti — düz kırmızı (anlamlı, gradyan yok)zı */
            color: white;
            border-radius: 50%;
            width: 19px;
            height: 19px;
            display: flex !important; /* İçindeki rakamı tam ortaya kilitler */
            align-items: center;
            justify-content: center;
            font-size: 0.72rem;
            font-weight: 800;
            border: 2px solid var(--surface); /* Zeminle uyumlu çerçeve (koyu/açık) */
            box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
            transform-origin: center;
            animation: badge-pop 0.4s var(--ease) forwards;
        }
        
        /* Tailwind'in "hidden" sınıfıyla kusursuz çalışması için */
        .notification-badge.hidden {
            display: none !important;
        }

        /* Yeni bildirim varken arkadan yayılan radar (nabız) efekti */
        .notification-badge::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #ef4444;
            border-radius: 50%;
            z-index: -1;
            animation: badge-pulse 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* Sallanma (Zil) Animasyonu */
        @keyframes bell-ring {
            0% { transform: rotate(0); }
            20% { transform: rotate(20deg); }
            40% { transform: rotate(-15deg); }
            60% { transform: rotate(10deg); }
            80% { transform: rotate(-5deg); }
            100% { transform: rotate(0); }
        }

        /* Ekrana zıplayarak gelme animasyonu */
        @keyframes badge-pop {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Arkadaki kırmızı dalganın (radar) animasyonu */
        @keyframes badge-pulse {
            0% { transform: scale(1); opacity: 0.8; }
            70% { transform: scale(2.5); opacity: 0; }
            100% { transform: scale(3); opacity: 0; }
        }


        /* Hamburger menu styles */
        .hamburger-menu-button {
            display: none; /* Hidden by default */
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 999px;
            width: 42px;
            height: 42px;
            cursor: pointer;
            color: var(--body);
            padding: 0;
            box-shadow: none;
            transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
        }
        .hamburger-menu-button:hover,
        .hamburger-menu-button.active {
            color: var(--accent);
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .hamburger-menu-button .bar {
            display: block;
            width: 18px;
            height: 2px;
            background: currentColor;
            border-radius: 999px;
            margin: 3px auto;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }
        .hamburger-menu-button.active .bar:nth-child(1) {
            transform: translateY(5px) rotate(45deg);
        }
        .hamburger-menu-button.active .bar:nth-child(2) {
            opacity: 0;
        }
        .hamburger-menu-button.active .bar:nth-child(3) {
            transform: translateY(-5px) rotate(-45deg);
        }
        .mobile-menu-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(3px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
            z-index: 1000;
        }
        .mobile-menu-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .app-header {
                background-color: rgba(255, 255, 255, 0.95) !important;
                backdrop-filter: blur(10px); /* Cam efekti */
                border-bottom: 1px solid #f3f4f6;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
                border-radius: 0 0 1.5rem 1.5rem !important;
                z-index: 9999 !important; /* YENİ EKLENDİ */
            }
            /* Hide desktop navigation and auth links on mobile */
            #mainNavDesktop, #authLinksDesktop {
                display: none;
            }
            /* Show hamburger menu button on mobile */
            .hamburger-menu-button {
                display: block;
            }
            /* 3 ikonu (EN/tema/bildirim) sağa, hamburger'in hemen yanına yaklaştır */
            #headerActions {
                margin-left: auto;
                gap: 0.4rem;
            }
            /* Header tek satır: logo solda, [3 ikon + hamburger] sağda birlikte */
            .app-header { gap: 0.5rem; flex-wrap: nowrap; }
            .app-header .logo a { font-size: 1.15rem; }
            .app-header > div:first-child { min-width: 0; flex-shrink: 1; }
            #companiesLinkMobile { display: none; } /* Hamburger menüde zaten var; taşmayı önle */
            /* Mobile menu container styling */
            #mobileMenuContainer {
                display: none;
                flex-direction: column;
                width: min(88vw, 360px);
                max-width: 360px;
                height: 100dvh;
                max-height: 100dvh;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(22px);
                -webkit-backdrop-filter: blur(22px);
                box-shadow: -20px 0 60px rgba(15, 23, 42, 0.2);
                border-left: 1px solid rgba(229, 231, 235, 0.95);
                border-radius: 1.5rem 0 0 1.5rem;
                position: fixed;
                top: 0;
                right: 0;
                z-index: 1100;
                padding: 1.25rem 1rem 1.5rem;
                gap: 0.5rem;
                transform: translateX(110%);
                opacity: 0;
                visibility: hidden;
                transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            #mobileMenuContainer.active {
                display: flex;
                transform: translateX(0);
                opacity: 1;
                visibility: visible;
            }
            #mobileMenuContainer .mobile-menu-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.25rem 0 1rem;
                border-bottom: 1px solid #e5e7eb;
                margin-bottom: 0.75rem;
            }
            #mobileMenuContainer .mobile-menu-eyebrow {
                margin: 0;
                font-size: 0.72rem;
                text-transform: uppercase;
                letter-spacing: 0.14em;
                color: var(--accent);
                font-weight: 700;
            }
            #mobileMenuContainer .mobile-menu-title {
                margin: 0.15rem 0 0;
                font-size: 1rem;
                font-weight: 700;
                color: #111827;
            }
            #mobileMenuContainer .mobile-menu-close {
                border: none;
                background: #f3f4f6;
                color: #4b5563;
                border-radius: 999px;
                width: 36px;
                height: 36px;
                cursor: pointer;
                font-size: 1rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                transition: background .18s var(--ease), color .18s var(--ease);
            }
            /* Koyu mod: başlık ve çarpı butonu */
            [data-theme="dark"] #mobileMenuContainer .mobile-menu-title { color: var(--ink); }
            [data-theme="dark"] #mobileMenuContainer .mobile-menu-eyebrow { color: #a5b4fc; }
            [data-theme="dark"] #mobileMenuContainer .mobile-menu-close {
                background: var(--surface-2);
                color: var(--body);
                border: 1px solid var(--line);
            }
            [data-theme="dark"] #mobileMenuContainer .mobile-menu-close:hover {
                background: #3a1c1f;
                color: #fca5a5;
            }
            #mobileMenuContainer .mobile-menu-body {
                display: flex;
                flex-direction: column;
                gap: 0.35rem;
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding-bottom: 0.75rem;
            }
            #mobileMenuContainer a, #mobileMenuContainer button {
                margin: 0;
                width: auto;
                text-align: left;
                padding: 0.8rem 0.9rem;
                border-radius: 0.9rem;
                transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
            }
            #mobileMenuContainer a:hover, #mobileMenuContainer button:hover {
                background-color: #eef2ff;
                color: #3730a3;
                transform: translateX(2px);
            }
            #mobileMenuContainer .profile-dropdown-content {
                background: transparent;
                box-shadow: none;
                padding-left: 0.25rem;
            }
            #mobileMenuContainer .profile-dropdown-content a,
            #mobileMenuContainer .profile-dropdown-content button {
                padding: 0.7rem 0.8rem;
                margin: 0.1rem 0;
            }
            /* Mobile dropdown toggle for when profile-name-display is clicked */
            #mobileMenuContainer .profile-dropdown-content {
                position: static; /* Remove absolute positioning on mobile */
                width: 100%;
                box-shadow: none;
                border-top: 1px solid #e5e7eb;
                margin-top: 0.5rem;
                display: none; /* Keep display:none for JS toggling on mobile */
            }
            #mobileMenuContainer .profile-dropdown.active .profile-dropdown-content {
                display: flex; /* Show when active class is added by JS */
                flex-direction: column;
                opacity: 1;
                visibility: visible;
            }
            #mobileMenuContainer .auth-links {
                flex-direction: column; /* Stack auth links/profile on mobile */
                align-items: flex-start;
            }
            #mobileMenuContainer .auth-links > div { /* Target profile dropdown container */
                width: 100%;
                text-align: left;
            }
        }
        /* Hide/show content sections */
        .content-section {
            display: none !important;
        }
        .content-section.active {
            display: block !important;
        }
        /* messagesSection flex layout gerektiriyor */
        #messagesSection.active {
            display: flex !important;
            flex-direction: column !important;
        }
        .auth-form {
            display: none;
        }
        .auth-form.active {
            display: block;
        }
        .auth-message {
            margin-top: 1rem;
            padding: 0.75rem;
            border-radius: 8px;
            text-align: center;
        }

        /* Text color updates - reverted to original */
        .text-gray-700 { color: #4b5563; } /* gray-700 */
        .text-gray-800 { color: #333; } /* Dark grey */
        .text-gray-500 { color: #6b7280; } /* gray-500 */
        .text-gray-600 { color: #4b5563; } /* gray-600 */
        .text-gray-400 { color: #9ca3af; } /* gray-400 - For date, title, salary range */
        .text-gray-300 { color: #d1d5db; } /* gray-300 */
        .text-gray-200 { color: #e5e7eb; } /* gray-200 */


        /* Section backgrounds - reverted to original */
        .bg-blue-50 { background-color: #f8fafc !important; border: 1px solid #f1f5f9 !important; border-radius: 1.5rem !important; }
        .bg-green-50 { background-color: #f0fdf4 !important; border: 1px solid #dcfce7 !important; border-radius: 1.5rem !important; }
        .bg-purple-50 { background-color: #faf5ff !important; border: 1px solid #f3e8ff !important; border-radius: 1.5rem !important; }
        .bg-red-50 { background-color: #fef2f2 !important; border: 1px solid #fee2e2 !important; border-radius: 1.5rem !important; }
        .bg-gray-50 { background-color: #f9fafb !important; border: 1px solid #f3f4f6 !important; border-radius: 1.5rem !important; }

        /* ========================================================= */
        /* === ÖNE ÇIKANLAR: MASAÜSTÜ YAPIŞKAN & MOBİL ÇEKMECE ==== */
        /* ========================================================= */
        
        

        /* MOBİL EKRANLAR (Aşağıdan Kayan Akıllı Çekmece) */
        @media (max-width: 767px) {
            .ai-analysis-container {
                position: fixed !important;
                bottom: 0;
                left: 0;
                width: 100% !important;
                height: 85vh !important; /* Ekranın %85'ini kaplar */
                background-color: #ffffff !important;
                z-index: 1000;
                border-radius: 2rem 2rem 0 0 !important;
                box-shadow: 0 -20px 40px -10px rgba(0,0,0,0.2) !important;

                /* Çekmeceyi başlangıçta ekranın aşağısına gizle.
                   !important: scroll-reveal (data-reveal) transform'unun bu gizlemeyi
                   ezip çekmeceyi kendiliğinden açmasını engeller. */
                transform: translateY(120%) !important;
                transition: transform 0.5s var(--ease);
                overflow-y: auto;
                margin: 0 !important;
                padding: 1.5rem 1.5rem 3rem 1.5rem !important;
            }
            /* KRİTİK: reveal (is-visible) transform'unu mobilde bu çekmece için nötrle */
            .js-motion .ai-analysis-container[data-reveal],
            .js-motion .ai-analysis-container[data-reveal].is-visible {
                transform: translateY(120%) !important;
                opacity: 1 !important;
            }
            /* JavaScript ile bu sınıf eklendiğinde çekmece yukarı fırlar */
            .ai-analysis-container.active-mobile-sheet,
            .js-motion .ai-analysis-container.active-mobile-sheet {
                transform: translateY(0) !important;
            }
        }


        /* Yorum sayısını ve yıldızları içeren div için yeni stil */
.featured-companies-list-container .card .rating-info {
    display: flex;
    flex-direction: column; /* Yorum sayısını yıldızların altına al */
}

/* Sadece mobil cihazlarda geçerli olacak ek düzenlemeler */
@media (max-width: 767px) {
    .featured-companies-list-container .card {
        flex-direction: column; /* Mobil için dikey düzeni koru */
    }

    .featured-companies-list-container .card .rating-info {
        flex-direction: column; /* Yorum sayısını yıldızların altına al */
        margin-top: 0.5rem; /* Üstten biraz boşluk bırak */
    }

    .featured-companies-list-container .card .rating-info .review-count {
        margin-top: 0.25rem; /* Yorum sayısını yıldızların altına hizala */
    }

    .featured-companies-list-container .card .btn-analyze,
    .featured-companies-list-container .card .view-company-detail-btn {
        width: 100%; /* Mobil butonları tam genişlikte yap */
        margin-top: 0.5rem; /* Butonlar arasına boşluk bırak */
    }
}
        /* AI Overlay style */
        .ai-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px; /* Match container's rounded corners */
            backdrop-filter: blur(5px); /* Blur effect */
            z-index: 10; /* Above other content */
            padding: 1rem;
            text-align: center;
        }

        

        /* Profile Tabs */
        .profile-tabs button, .company-detail-tabs button, .admin-panel-tabs button {
            padding: 0.75rem 1.25rem;
            border-radius: 8px 8px 0 0;
            font-weight: 600;
            background-color: #e5e7eb; /* Light grey */
            color: #4b5563; /* Darker grey */
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .profile-tabs button.active, .company-detail-tabs button.active, .admin-panel-tabs button.active {
            background-color: var(--accent); /* Primary color */
            color: white;
        }
        .profile-tabs button:hover:not(.active), .company-detail-tabs button:hover:not(.active), .admin-panel-tabs button:hover:not(.active) {
            background-color: #d1d5db;
        }
        .profile-tab-content, .admin-tab-content {
            padding: 1.5rem;
            background-color: #f9fafb;
            border-radius: 0 0 12px 12px;
            border: 1px solid #e5e7eb;
            border-top: none;
        }

        /* ===== YENİ: MODERN YÖNETİCİ ODASI ===== */
        .admin-shell {
            background: #ffffff;
            border: 1px solid #eef0f4;
            border-radius: 1.75rem;
            box-shadow: 0 20px 50px -25px rgba(30,41,59,0.25);
            overflow: hidden;
        }
        .admin-hero {
            background: linear-gradient(135deg, #1e1b4b 0%, var(--accent-strong) 55%, var(--accent-2) 100%);
            padding: 1.75rem 1.75rem 1.5rem;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .admin-hero::after {
            content: ""; position: absolute; top: -60px; right: -40px;
            width: 220px; height: 220px; border-radius: 50%;
            background: rgba(255,255,255,0.08);
        }
        /* Hero her zaman koyu gradyan → başlık/metin daima beyaz (açık+koyu mod) */
        .admin-hero h1, .admin-hero h2, .admin-hero h3, .admin-hero h4,
        .admin-hero p, .admin-hero span { color: #fff !important; }
        [data-theme="dark"] .admin-hero h1, [data-theme="dark"] .admin-hero h2,
        [data-theme="dark"] .admin-hero h3, [data-theme="dark"] .admin-hero h4,
        [data-theme="dark"] .admin-hero p { color: #fff !important; }
        /* Modern sekme çubuğu — eski grey stilini geçersiz kılar */
        .admin-panel-tabs.admin-tabs-modern {
            display: flex; flex-wrap: wrap; gap: 0.5rem;
            border: none !important; padding: 1rem 1.25rem 0; background: transparent;
        }
        .admin-panel-tabs.admin-tabs-modern button {
            padding: 0.6rem 1.05rem !important;
            border-radius: 0.9rem !important;
            font-size: 0.85rem; font-weight: 800;
            background: #f1f5f9 !important; color: #475569 !important;
            border: 1px solid transparent !important;
            display: inline-flex; align-items: center; gap: 0.45rem;
            transition: all 0.18s ease;
        }
        .admin-panel-tabs.admin-tabs-modern button:hover:not(.active) {
            background: #e2e8f0 !important; transform: translateY(-1px);
        }
        .admin-panel-tabs.admin-tabs-modern button.active {
            background: linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
            color: #fff !important;
            box-shadow: 0 8px 18px -6px rgba(31,95,224,0.5);
        }
        .admin-panel-tabs.admin-tabs-modern button .tab-badge {
            background: #ef4444; color:#fff; font-size:0.65rem; font-weight:900;
            min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
            display: inline-flex; align-items:center; justify-content:center;
        }
        .admin-panel-tabs.admin-tabs-modern button.active .tab-badge { background: rgba(255,255,255,0.25); }
        /* İçerik alanı modern görünüm */
        .admin-tabs-modern ~ .admin-tab-content,
        #adminPanelSection .admin-tab-content {
            border: none !important; border-radius: 0 !important;
            background: #f8fafc !important; padding: 1.5rem 1.75rem 1.9rem !important;
        }

        /* Analitik istatistik kartları */
        .stat-card {
            background: #fff; border: 1px solid #eef0f4; border-radius: 1.25rem;
            padding: 1.15rem 1.25rem; position: relative; overflow: hidden;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(30,41,59,0.35); }
        .stat-card .stat-ic {
            width: 44px; height: 44px; border-radius: 0.85rem;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.15rem; margin-bottom: 0.75rem;
        }
        .stat-card .stat-value { font-size: 1.9rem; font-weight: 900; line-height: 1; color: #0f172a; letter-spacing: -0.02em; }
        .stat-card .stat-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-top: 0.4rem; }
        .chart-card {
            background:#fff; border:1px solid #eef0f4; border-radius:1.25rem; padding:1.25rem 1.35rem;
        }
        .chart-card h4 { font-size: 0.95rem; font-weight: 900; color:#0f172a; margin-bottom: 0.25rem; }
        .chart-card p.sub { font-size: 0.75rem; color:#94a3b8; font-weight:600; margin-bottom: 0.9rem; }
        .chart-holder { position: relative; width: 100%; }

        /* ===== CANLI AKTİF KULLANICI BANNERI ===== */
        .live-active-banner {
            display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
            padding: 1.1rem 1.4rem; border-radius: 1.25rem;
            background: linear-gradient(135deg, #0e1524 0%, var(--accent-2) 100%);   /* ink→lacivert (palet içi) */
            color: #fff; position: relative; overflow: hidden;
            box-shadow: 0 16px 34px -18px rgba(14, 21, 36,0.6);
        }
        .live-active-main { display: flex; align-items: center; gap: 0.85rem; }
        .live-dot {
            width: 12px; height: 12px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
            box-shadow: 0 0 0 0 rgba(34,197,94,0.7); animation: liveDotPulse 1.8s ease-out infinite;
        }
        .live-active-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
        .live-active-num2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #c7d2fe; }
        .live-active-lbl { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.72); margin-top: 0.3rem; }
        .live-active-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.15); }
        .live-active-hint { margin-left: auto; font-size: 0.72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.12); padding: 0.4rem 0.75rem; border-radius: 9999px; }
        .live-active-hint i { color: #fde047; animation: liveBolt 2.2s ease-in-out infinite; }
        @keyframes liveDotPulse {
            0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
            70% { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
            100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
        }
        @keyframes liveBolt { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
        @media (prefers-reduced-motion: reduce) { .live-dot, .live-active-hint i { animation: none; } }

        /* ===== YORUM GÖNDERME MODU + ANONİM GÜVENCE ===== */
        .send-mode-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
        .send-mode-title { display: block; font-size: 0.85rem; font-weight: 800; color: var(--body); margin-bottom: 0.7rem; }
        .send-mode-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
        @media (max-width: 520px) { .send-mode-opts { grid-template-columns: 1fr; } }
        .send-opt { cursor: pointer; display: block; }
        .send-opt input { position: absolute; opacity: 0; pointer-events: none; }
        .send-opt-body {
            display: flex; align-items: center; gap: 0.65rem;
            padding: 0.8rem 0.9rem; border-radius: 12px;
            background: var(--surface); border: 2px solid var(--line);
            transition: all .18s var(--ease);
        }
        .send-opt-body > i:first-child { font-size: 1.1rem; color: var(--muted); width: 22px; text-align: center; flex-shrink: 0; }
        .send-opt-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
        .send-opt-text b { font-size: 0.9rem; color: var(--ink); font-weight: 800; }
        .send-opt-text small { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
        .send-opt-tick { color: var(--accent); opacity: 0; font-size: 1.05rem; transition: opacity .18s var(--ease); }
        .send-opt:hover .send-opt-body { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
        .send-opt input:checked + .send-opt-body { border-color: var(--accent); background: var(--accent-soft); }
        .send-opt input:checked + .send-opt-body > i:first-child { color: var(--accent); }
        .send-opt input:checked + .send-opt-body .send-opt-tick { opacity: 1; }

        /* Anonim güvence paneli — yalnızca anonim seçilince (:has) */
        .anon-assure { display: none; margin-top: 0.85rem; border-radius: 12px; padding: 0.9rem 1rem;
            background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(31,95,224,0.08));
            border: 1px solid color-mix(in srgb, #10b981 30%, var(--line)); animation: anonAssureIn .3s var(--ease) both; }
        .send-mode-card:has(#sendAsAnonymous:checked) .anon-assure { display: block; }
        .anon-assure-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--ink); font-size: 0.92rem; }
        .anon-assure-lock { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#10b981,#059669); color: #fff; font-size: 0.8rem; box-shadow: 0 4px 10px -3px rgba(16,185,129,0.6); }
        .anon-assure-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0; }
        .anon-assure-badges span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 800; color: var(--body); background: var(--surface); border: 1px solid var(--line); padding: 0.35rem 0.6rem; border-radius: 9999px; }
        .anon-assure-badges i { color: #10b981; }
        .anon-assure-note { font-size: 0.78rem; color: var(--body); line-height: 1.55; font-weight: 500; }
        @keyframes anonAssureIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

        /* ===== KAYIT: GİZLİLİK BANDI + BİREYSEL/KURUMSAL SEKMELER ===== */
        .privacy-assure-banner {
            display: flex; gap: 0.75rem; align-items: flex-start; max-width: 560px;
            margin: 0 auto 1.25rem; padding: 0.9rem 1.1rem; border-radius: 14px;
            background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(31,95,224,0.08));
            border: 1px solid color-mix(in srgb, #10b981 30%, var(--line));
        }
        .pab-lock { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#10b981,#059669); color: #fff; box-shadow: 0 4px 10px -3px rgba(16,185,129,0.6); }
        .pab-text { font-size: 0.82rem; line-height: 1.55; color: var(--body); font-weight: 500; }
        .pab-text b { color: var(--ink); }

        .reg-type-tabs { display: flex; gap: 0.5rem; max-width: 480px; margin: 0 auto 1.25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.35rem; }
        .reg-type-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.65rem; border: none; background: transparent; border-radius: 9px; font-weight: 800; font-size: 0.9rem; color: var(--muted); cursor: pointer; transition: all .18s var(--ease); }
        .reg-type-tab.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
        .reg-type-tab:hover:not(.is-active) { color: var(--body); }

        .corp-reg-intro { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1.25rem; }
        .corp-reg-intro > i { color: var(--accent); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
        .corp-reg-intro p { font-size: 0.82rem; line-height: 1.6; color: var(--body); font-weight: 500; }
        .corp-reg-intro b { color: var(--ink); }

        /* ===================== MARKETPLACE (İş İlanları / İş Ortağım) ===================== */
        .mp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
        .mp-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.6rem; }
        .mp-title i { color: var(--accent); }
        .mp-sub { color: var(--body); font-size: 0.95rem; margin-top: 0.35rem; max-width: 620px; line-height: 1.6; font-weight: 500; }
        .mp-head-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
        .mp-head-actions .btn-primary, .mp-head-actions .btn-secondary { padding: 0.7rem 1.1rem !important; font-size: 0.9rem; }

        .mp-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
        .mp-chip { font-size: 0.85rem; font-weight: 700; color: var(--body); background: var(--surface); border: 1px solid var(--line); padding: 0.45rem 1rem; border-radius: 9999px; cursor: pointer; transition: all .18s var(--ease); }
        .mp-chip:hover { border-color: var(--accent); color: var(--accent); }
        .mp-chip.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }

        .mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
        @media (max-width: 900px) { .mp-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .mp-grid { grid-template-columns: 1fr; } }

        .mp-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .2s var(--ease); }
        .mp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
        .mp-card-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
        .mp-tag { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); padding: 0.25rem 0.65rem; border-radius: 9999px; }
        .mp-loc { font-size: 0.78rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
        .mp-card-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height: 1.3; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
        .mp-card-desc { font-size: 0.88rem; color: var(--body); line-height: 1.55; font-weight: 500; flex: 1; }
        .mp-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.85rem; }
        .mp-card-meta span { font-size: 0.8rem; font-weight: 700; color: var(--body); display: inline-flex; align-items: center; gap: 0.35rem; }
        .mp-card-meta i { color: var(--accent); }
        .mp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
        .mp-by { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
        .mp-detail-btn { font-size: 0.82rem; font-weight: 800; color: var(--accent); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.35rem; border-radius: 8px; transition: gap .18s var(--ease); }
        .mp-detail-btn:hover { gap: 0.6rem; }

        .mp-logo-sm { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 900; font-size: 1.05rem; }
        .mp-job-co { min-width: 0; }
        .mp-job-coname { font-size: 0.9rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mp-job-type { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
        .mp-job-salary { font-size: 0.9rem; font-weight: 800; color: #059669; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
        [data-theme="dark"] .mp-job-salary { color: #6ee7b7; }

        .mp-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; }
        .mp-empty-ic { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; }
        .mp-empty-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink); }
        .mp-empty-text { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; font-weight: 500; }

        /* Formlar */
        .mp-form { display: flex; flex-direction: column; gap: 0.35rem; }
        .mp-form label { font-size: 0.8rem; font-weight: 800; color: var(--body); margin-top: 0.6rem; }
        .mp-form .input-field { width: 100%; }
        .mp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
        @media (max-width: 520px) { .mp-form-row { grid-template-columns: 1fr; } }
        .mp-form .btn-primary { margin-top: 1rem; }
        .mp-form-msg { margin-top: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.85rem; font-weight: 700; text-align: center; }
        .mp-form-msg.ok { background: #ecfdf5; color: #059669; }
        .mp-form-msg.no { background: #fef2f2; color: #dc2626; }
        [data-theme="dark"] .mp-form-msg.ok { background: #123527; color: #6ee7b7; }
        [data-theme="dark"] .mp-form-msg.no { background: #3a1c1f; color: #fca5a5; }
        .mp-corp-intro { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.5rem; }
        .mp-corp-intro p { font-size: 0.85rem; color: var(--body); line-height: 1.6; font-weight: 500; }
        .mp-corp-intro i { color: var(--accent); }

        /* Detay */
        .mp-d-co { display: flex; align-items: center; gap: 0.75rem; }
        .mp-d-coname { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--ink); }
        .mp-d-line { font-size: 0.88rem; color: var(--body); margin-top: 0.75rem; }
        .mp-d-desc { font-size: 0.92rem; color: var(--body); line-height: 1.7; margin-top: 1rem; white-space: normal; }
        .mp-d-by { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-top: 1rem; }
        .mp-d-actions { margin-top: 1.25rem; }
        .mp-d-actions .btn-primary { width: 100%; }
        .mp-own-note { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
        .mp-admin-del { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; margin-top: 0.6rem; padding: 0.7rem 1rem; border-radius: 12px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; font-weight: 800; font-size: 0.9rem; cursor: pointer; transition: all .18s var(--ease); }
        .mp-admin-del:hover { background: #fee2e2; transform: translateY(-1px); }
        [data-theme="dark"] .mp-admin-del { background: #3a1c1f; border-color: #4a2226; color: #fca5a5; }
        [data-theme="dark"] .mp-admin-del:hover { background: #4a2226; }

        /* Marketplace modallarının ekranda dengeli durması */
        #createJobModal .notification-modal-content,
        #createPartnerModal .notification-modal-content,
        #corporateRequestModal .notification-modal-content,
        #mpDetailModal .notification-modal-content {
            max-width: 540px !important; width: 92%;
            padding: 1.4rem 1.6rem !important; max-height: 86vh;
        }
        #corporateDashModal .notification-modal-content { max-width: 660px !important; width: 92%; padding: 1.4rem 1.6rem !important; max-height: 86vh; }
        #createJobModal .notification-header, #createPartnerModal .notification-header,
        #corporateRequestModal .notification-header, #mpDetailModal .notification-header,
        #corporateDashModal .notification-header { margin-bottom: 1rem; padding-bottom: 0.9rem; }
        #createJobModal .notification-header h3, #createPartnerModal .notification-header h3,
        #corporateRequestModal .notification-header h3, #mpDetailModal .notification-header h3,
        #corporateDashModal .notification-header h3 { font-size: 1.3rem; }
        @media (max-width: 600px) {
            #createJobModal .notification-modal-content,
            #createPartnerModal .notification-modal-content,
            #corporateRequestModal .notification-modal-content,
            #mpDetailModal .notification-modal-content,
            #corporateDashModal .notification-modal-content {
                width: 94%; padding: 1.1rem 1.15rem !important; max-height: 90vh;
            }
            #createJobModal .notification-header h3, #createPartnerModal .notification-header h3,
            #corporateRequestModal .notification-header h3, #mpDetailModal .notification-header h3,
            #corporateDashModal .notification-header h3 { font-size: 1.15rem; }
        }

        /* Kurumsal panel (analiz) */
        .mp-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
        .mp-dash-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; text-align: center; }
        .mp-dash-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
        .mp-dash-lbl { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-top: 0.25rem; }
        .mp-dash-list { display: flex; flex-direction: column; gap: 0.6rem; }
        .mp-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
        .mp-dash-rowtitle { font-weight: 800; color: var(--ink); font-size: 0.92rem; }
        .mp-dash-rowtype { font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--surface); padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--line); margin-left: 0.4rem; }
        .mp-dash-rowstats { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
        .mp-dash-rowstats span { font-size: 0.82rem; font-weight: 800; color: var(--body); display: inline-flex; align-items: center; gap: 0.3rem; }
        .mp-dash-rowstats i { color: var(--accent); }

        /* Kurumsal panel — gelen başvurular */
        .mp-dash-h { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin: 1.4rem 0 0.7rem; }
        .mp-app-list { display: flex; flex-direction: column; gap: 0.7rem; }
        .mp-app-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem; }
        .mp-app-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
        .mp-app-name { font-weight: 800; color: var(--ink); font-size: 0.98rem; }
        .mp-app-for { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
        .mp-app-contact { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.4rem; }
        .mp-app-contact a { font-size: 0.84rem; font-weight: 600; color: var(--body); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
        .mp-app-contact a:hover { color: var(--accent); }
        .mp-app-contact i { color: var(--accent); }
        .mp-app-msg { margin-top: 0.55rem; font-size: 0.88rem; color: var(--body); line-height: 1.55; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; }
        .mp-app-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
        .mp-app-cv { padding: 0.5rem 0.9rem !important; font-size: 0.82rem !important; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
        .mp-app-nocv { font-size: 0.78rem; color: var(--muted); font-style: italic; }
        .mp-app-date { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
        .mp-app-cvwrap { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }

        /* Hesap ayarları — silme butonunu gizleyen 3-nokta menüsü */
        .acct-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
        .acct-danger-label { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
        .acct-menu-btn { width: 40px; height: 40px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease); }
        .acct-menu-btn:hover { background: var(--surface); color: var(--ink); }
        .acct-menu-panel { margin-top: 0.75rem; }
        .acct-del-btn { width: 100%; background: rgba(220,38,38,0.08); color: #dc2626; font-weight: 800; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid rgba(220,38,38,0.25); cursor: pointer; transition: background .2s var(--ease); }
        .acct-del-btn:hover { background: rgba(220,38,38,0.15); }
        [data-theme="dark"] .acct-del-btn { color: #f87171; }

        /* ===== KURUMSAL PANEL (tam sayfa) ===== */
        .corp-room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1.75rem; }
        .corp-room-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); padding: 0.35rem 0.85rem; border-radius: 9999px; }
        .corp-room-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--ink); margin: 0.7rem 0 0.35rem; letter-spacing: -0.02em; }
        .corp-room-sub { color: var(--body); font-size: 0.98rem; font-weight: 500; max-width: 640px; }
        .corp-room-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; flex-shrink: 0; }
        .corp-room-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.4rem; margin-bottom: 1.5rem; }
        .corp-room-h { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 1.1rem; }
        .corp-room-h i { color: var(--accent); }
        @media (max-width: 600px) { .corp-room-actions { width: 100%; } .corp-room-actions .btn-primary, .corp-room-actions .btn-secondary { flex: 1; } }
        .mp-del-job { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0.3rem; border-radius: 6px; transition: color .15s; }
        .mp-del-job:hover { color: #ef4444; }

        /* Admin: kurumsal başvurular */
        .mp-admin-req { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.85rem; background: var(--surface); }
        .mp-admin-req-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
        .mp-admin-req-head b { font-size: 1.02rem; color: var(--ink); }
        .mp-admin-req-status { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 9999px; }
        .mp-admin-req-status.wait { background: #fff7ed; color: #ea580c; }
        .mp-admin-req-status.ok { background: #ecfdf5; color: #059669; }
        .mp-admin-req-status.no { background: #fef2f2; color: #dc2626; }
        [data-theme="dark"] .mp-admin-req-status.wait { background: #3a2a12; color: #fdba74; }
        [data-theme="dark"] .mp-admin-req-status.ok { background: #123527; color: #6ee7b7; }
        [data-theme="dark"] .mp-admin-req-status.no { background: #3a1c1f; color: #fca5a5; }
        .mp-admin-req-body { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--body); font-weight: 600; }
        .mp-admin-req-body i { color: var(--muted); margin-right: 0.25rem; }
        .mp-admin-req-msg { width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.75rem; background: var(--surface-2); border-radius: 8px; font-weight: 500; color: var(--body); }
        .mp-admin-req-actions { display: flex; gap: 0.6rem; margin-top: 0.9rem; }

        /* Kullanıcı sorgulama işlem barı butonları */
        .lookup-act {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.5rem 0.85rem; border-radius: 0.75rem;
            font-size: 0.8rem; font-weight: 800; border: none; cursor: pointer;
            transition: all 0.16s ease;
        }
        .lookup-act:hover:not([disabled]) { transform: translateY(-1px); }
        .lookup-act[disabled] { cursor: not-allowed; }

        /* Notification Modal */
        .notification-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            /* Üstten hizala: uzun formlarda başlık asla kesilmez; taşarsa overlay kayar.
               (Ortalamada içerik viewport'tan uzun olunca üst kısım erişilemez oluyordu.) */
            align-items: flex-start;
            justify-content: center;
            /* KRİTİK: sticky header z-index:9999 idi ve modalın üstünü örtüyordu. */
            z-index: 10001;
            padding: 4.5vh 16px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        /* Yatay ortala; dikeyde üstten hizalı (tam kaydırılabilir, üst asla kesilmez) */
        .notification-modal > .notification-modal-content { margin: 0 auto; }
        /* KRİTİK: styles.css harici dosyaya taşınınca cascade sırası değişti ve
           .notification-modal{display:flex} Tailwind'in .hidden'ını ezip TÜM modalları
           sayfaya bindiriyordu. Aşağıdaki kural gizli modalların gizli kalmasını garantiler. */
        .notification-modal.hidden { display: none !important; }
        /* Aynı cascade sorunundan etkilenen diğer bileşenler (JS ile .hidden toggle edilir) */
        .emoji-picker.hidden,
        .attachment-preview.hidden,
        .chat-header.hidden,
        .chat-input-area.hidden { display: none !important; }
        .notification-modal-content {
            background-color: #ffffff;
            padding: 2rem;
            border-radius: 12px;
            width: 90%;
            max-width: 700px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            max-height: 90vh; /* Max height for scrollable content */
            overflow-y: auto; /* Added for scrollability */
        }
        /* Bildirim listesi popup'ı — daha kompakt (diğer modallar etkilenmez) */
        #notificationModal .notification-modal-content {
            max-width: 560px;
            padding: 1.4rem 1.6rem;
            max-height: 74vh;
        }
        #notificationModal .notification-header { margin-bottom: 1rem; padding-bottom: 1rem; }
        #notificationModal .notification-header h3 { font-size: 1.35rem; }
        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem; /* Increased padding */
            border-bottom: 1px solid #e5e7eb;
        }
        .notification-header h3 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #333;
        }
        .notification-close-btn {
            width: 38px; height: 38px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--body);
            font-size: 1.5rem; line-height: 1;
            cursor: pointer;
            transition: all .2s var(--ease);
            flex-shrink: 0;
        }
        .notification-close-btn:hover {
            color: #ef4444;
            border-color: #ef4444;
            transform: translateY(-1px) rotate(90deg);
        }
        .notification-body {
            display: flex;
            flex-grow: 1;
            overflow: hidden; /* Ensure content within is scrollable */
        }
        .notification-list-panel {
            flex: 1;
            border-right: 1px solid #e5e7eb;
            padding-right: 1.5rem;
            overflow-y: auto; /* Scrollable list */
        }
        .notification-detail-panel {
            flex: 2;
            padding-left: 1.5rem;
            overflow-y: auto; /* Scrollable detail */
        }
        .notification-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid #f3f4f6;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .notification-item:last-child {
            border-bottom: none;
        }
        .notification-item:hover {
            background-color: #f9fafb;
        }
        .notification-item.unread {
            font-weight: 700;
            color: var(--accent);
        }
        .notification-detail-panel h4 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
        }
        .notification-detail-panel p {
            color: #4b5563;
            line-height: 1.6;
        }
        .notification-detail-panel .date {
            font-size: 0.85rem;
            color: #9ca3af;
            margin-top: 0.5rem;
        }
        .no-notification-selected {
            text-align: center;
            color: #6b7280;
            margin-top: 2rem;
        }
        /* Company Logo in detail view */
        .company-logo {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 1.5rem;
            border: 1px solid #e5e7eb;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        /* Profile editable fields */
        .profile-field-display {
            display: inline-block;
        }
        .profile-field-input {
            display: none;
        }
        .profile-field-input.active {
            display: inline-block;
        }
        .profile-edit-buttons {
            margin-top: 1rem;
            text-align: right;
        }
        /* Employee/Non-Employee Buttons */
        .btn-account-type {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid #d1d5db;
            background-color: #e5e7eb;
            color: #4b5563;
        }
        .btn-account-type.selected {
            border-color: var(--accent);
            background-color: #e0e7ff;
            color: var(--accent);
        }
        .btn-account-type:hover:not(.selected) {
            background-color: #d1d5db;
        }
        /* Badge for verified users - UPDATED STYLES */
        .verified-badge-container {
            display: inline-flex; /* Use flex to center SVG */
            align-items: center;
            justify-content: center;
            width: 1.25rem; /* 20px */
            height: 1.25rem; /* 20px */
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 0.25rem;
            position: relative; /* For tooltip */
            cursor: pointer; /* Make it clickable for mobile */
        }
        .verified-badge-container.verified {
            background-color: #10b981; /* emerald-500 */
        }
        .verified-badge-container.unverified {
            background-color: #ef4444; /* red-500 */
        }
        .verified-badge-container svg {
            width: 0.875rem; /* 14px */
            height: 0.875rem; /* 14px */
            color: white; /* Icon color */
        }
        .badge-tooltip {
            position: absolute;
            top: -2.2rem; /* Position above badge */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 0.375rem; /* 6px */
            font-size: 0.75rem; /* 12px */
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            z-index: 20; /* Ensure tooltip is above other elements */
        }
        .verified-badge-container:hover .badge-tooltip {
            opacity: 1;
            visibility: visible;
        }
        /* Mobile specific tooltip display */
        .badge-tooltip.active-mobile {
            opacity: 1;
            visibility: visible;
        }

/* ===== MESAJLAR BÖLÜMÜ ===== */
#messagesSection {
    height: calc(100vh - 200px); /* Sayfa boşluklarına göre optimal yükseklik */
    min-height: 600px;
    overflow: hidden;
    padding: 0 !important;
}
#messagesSection > h2 {
    padding: 1rem 1.5rem 0.5rem;
    margin: 0;
    flex-shrink: 0;
}
/* ===== KUSURSUZ MESAJLAR BÖLÜMÜ ===== */
#messagesSection {
    height: calc(100vh - 150px); /* Ekranın büyük kısmını kaplar */
    min-height: 640px;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    /* .container'ın 2.5rem iç boşluğunu kısmen kır: mesajlar daha ferah alsın */
    margin: -1rem -1rem 0;
}

#messagesSection > h2 {
    padding: 0.25rem 0.5rem 0.9rem;
    margin: 0;
    flex-shrink: 0;
    font-size: 1.6rem;
    font-weight: 800;
}

/* Ana Taşıyıcı: Sol ve Sağ Paneli Yan Yana Tutar */
.message-section-container {
    display: flex !important; /* YAN YANA DURMANIN ANAHTARI */
    flex: 1; /* Kalan tüm yüksekliği kaplar */
    border-radius: 1.25rem !important;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
    overflow: hidden; /* Taşmaları keser */
    margin: 0;
}

/* --- SOL PANEL (Kişi Listesi) --- */
.message-list-panel {
    flex: 0 0 340px; /* Sabit genişlik */
    border-right: 1px solid var(--line);
    background-color: var(--surface);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.message-list-item {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;
}

.message-list-item:hover { background-color: #f9fafb; }
.message-list-item.active { background-color: #eff6ff; border-left-color: #3b82f6 !important; }


/* --- SAĞ PANEL (Sohbet Ekranı) --- */
.message-chat-panel {
    flex: 1;
    display: flex !important;          
    flex-direction: column !important; 
    background-color: #f8fafc; /* Ferah arka plan */
    min-width: 0; 
}

/* Sohbet Üst Bilgisi (Kiminle konuşuyoruz) */
.chat-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.chat-header-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1f2937;
}

/* Mesaj Baloncuklarının Aktığı Alan */
.chat-messages-scrollable {
    flex: 1; 
    overflow-y: auto !important; 
    overscroll-behavior: contain !important; 
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.no-chat-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- YAZI YAZMA VE GÖNDER BUTONU ALANI --- */
.chat-input-area {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 1rem 1.5rem !important;
    display: flex !important; /* Input ve butonu yatayda kusursuz hizalar */
    align-items: center !important;
    gap: 0.75rem !important; /* Aralarındaki boşluk */
    flex-shrink: 0;
}

/* Mesaj Input Kutusu */
.chat-input-area input {
    flex: 1 !important; /* Kalan tüm genişliği otomatik doldurur */
    border-radius: 9999px !important;
    padding: 0.85rem 1.25rem !important; /* Fazla abartılı olmayan kibar iç boşluk */
    border: 1px solid #d1d5db !important;
    background-color: #f9fafb !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}

.chat-input-area input:focus {
    border-color: var(--accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14, 21, 36, 0.1) !important;
    outline: none !important;
}

/* Gönder Butonu */
.chat-input-area button {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important; /* Butonun ezilip bozulmasını engeller */
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 6px -1px rgba(14, 21, 36, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.chat-input-area button:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 12px -2px rgba(14, 21, 36, 0.4) !important;
}

/* Butonun içindeki Ok İkonunun ortalanması */
.chat-input-area button svg {
    width: 20px !important;
    height: 20px !important;
    margin-left: 2px !important; /* Optik dengeleme */
}

/* ===== YENİ: EMOJI & DOSYA EKLEME ARAÇ BUTONLARI ===== */
.chat-input-area { position: relative !important; }

/* Yüksek özgüllük: .chat-input-area button (gradient) kuralını geçersiz kılar.
   İstek üzerine mor arka plan kaldırıldı; sadece ikon görünür. */
.chat-input-area button.chat-tool-btn {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.25rem !important;
    box-shadow: none !important;
    transition: color 0.18s, transform 0.18s !important;
}
.chat-input-area button.chat-tool-btn:hover {
    background: transparent !important;
    background-image: none !important;
    color: var(--accent) !important;
    transform: translateY(-1px) scale(1.08) !important;
    box-shadow: none !important;
}
.chat-input-area button.chat-tool-btn.active {
    background: transparent !important;
    background-image: none !important;
    color: var(--accent) !important;
}

/* Emoji Seçici Paneli */
.emoji-picker {
    position: absolute;
    bottom: 72px;
    left: 12px;
    width: 300px;
    max-width: calc(100% - 24px);
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.2);
    padding: 0.6rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
    z-index: 50;
}
/* Yüksek özgüllük: .chat-input-area button (gradient + 44px daire) kuralını ezer.
   Emoji hücrelerinin arkasındaki mor daire tamamen kaldırıldı. */
.chat-input-area .emoji-picker button.emoji-cell {
    width: auto !important;
    height: auto !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    padding: 0.3rem !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background 0.12s, transform 0.12s !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1;
}
.chat-input-area .emoji-picker button.emoji-cell:hover {
    background: #f3f4f6 !important;
    background-image: none !important;
    transform: scale(1.18) !important;
    box-shadow: none !important;
}

/* Ekli Dosya Önizleme */
.attachment-preview {
    position: absolute;
    bottom: 72px;
    left: 12px;
    right: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.18);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 40;
}
.attachment-preview img {
    width: 48px; height: 48px; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0;
}
.attachment-preview .att-icon {
    width: 48px; height: 48px; border-radius: 0.5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: var(--accent); font-size: 1.3rem;
}
.attachment-preview .att-name {
    flex: 1; font-size: 0.85rem; font-weight: 700; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attachment-preview .att-remove {
    width: 30px !important; height: 30px !important; border-radius: 50% !important;
    background: #fef2f2 !important; color: #ef4444 !important; flex-shrink: 0 !important;
    box-shadow: none !important; font-size: 0.85rem !important;
}
.attachment-preview .att-remove:hover { background: #fee2e2 !important; transform: none !important; }

/* Mesaj balonundaki ek görsel/dosya */
.msg-attachment-img {
    max-width: 240px; max-height: 260px; width: 100%; border-radius: 0.75rem;
    margin-bottom: 0.4rem; cursor: pointer; display: block; object-fit: cover;
}
.msg-attachment-file {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem;
    border-radius: 0.65rem; margin-bottom: 0.4rem; text-decoration: none;
    background: rgba(0,0,0,0.06); font-weight: 700; font-size: 0.85rem;
}

/* ===== YENİ: MESAJ / KİŞİ ŞİKAYET MENÜSÜ (dikey 3 nokta) ===== */
.msg-menu { position: absolute; top: 4px; z-index: 5; }
.msg-menu.on-left { left: 4px; }
.msg-menu.on-right { right: 4px; }
.msg-menu-btn {
    width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
    background: transparent; color: inherit; opacity: 0; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s, background 0.15s;
}
.message-container:hover .msg-menu-btn { opacity: 0.65; }
.msg-menu-btn:hover { opacity: 1 !important; background: rgba(0,0,0,0.12); }
.msg-menu-dropdown {
    position: absolute; top: 26px; min-width: 172px; background: #fff;
    border: 1px solid #eef0f4; border-radius: 0.75rem; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.25);
    overflow: hidden; z-index: 60; padding: 0.25rem;
}
.msg-menu.on-left .msg-menu-dropdown { left: 0; }
.msg-menu.on-right .msg-menu-dropdown { right: 0; }
.msg-menu-dropdown button {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
    padding: 0.6rem 0.75rem; font-size: 0.82rem; font-weight: 700; color: #374151;
    background: transparent; border: none; cursor: pointer; border-radius: 0.5rem;
}
.msg-menu-dropdown button:hover { background: #f3f4f6; }
.msg-menu-dropdown button.danger { color: #dc2626; }
.msg-menu-dropdown button.danger:hover { background: #fef2f2; }

/* Sohbet başlığı 3 nokta */
.chat-header-menu { margin-left: auto; position: relative; }
.chat-header-menu-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: transparent; color: #6b7280; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.chat-header-menu-btn:hover { background: #f3f4f6; color: #111827; }

@media (max-width: 768px) {
    .chat-tool-btn { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .emoji-picker { grid-template-columns: repeat(6, 1fr); }
}


/* --- MOBİL UYUM (TELEFON EKRANLARI İÇİN) --- */
@media (max-width: 768px) {
    .message-section-container {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        height: calc(100vh - 140px);
    }
    
    .message-list-panel {
        width: 100% !important;
        flex: 1 !important;
        border-right: none !important;
    }

    .message-chat-panel {
        width: 100% !important;
        flex: 1 !important;
    }
    
    /* JavaScript ile kontrol edilen mobil görünüm sınıfları */
    .hidden-on-mobile { display: none !important; }
    
    /* Mobilde biraz daha kompakt boyutlar */
    .chat-messages-scrollable { padding: 1rem !important; }
    .chat-input-area { padding: 0.75rem 1rem !important; gap: 0.5rem !important; }
    .chat-input-area button { width: 40px !important; height: 40px !important; }
}

        /* Ellipsis Menu Styles */
        .ellipsis-menu {
            position: relative;
            display: inline-block;
            margin-left: auto; /* Push to the right */
        }
        .ellipsis-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: background-color 0.2s ease;
        }
        .ellipsis-button:hover {
            background-color: #f1f1f1;
        }
        .ellipsis-dropdown {
            position: absolute;
            right: 0;
            background-color: #ffffff;
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 10;
            border-radius: 8px;
            overflow: hidden;
            display: none; /* Hidden by default */
        }
        .ellipsis-dropdown.active {
            display: block;
        }
        .ellipsis-dropdown button {
            color: #333;
            padding: 10px 15px;
            text-decoration: none;
            display: block;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .ellipsis-dropdown button:hover {
            background-color: #f1f1f1;
        }
        .ellipsis-dropdown button.delete-btn:hover {
            background-color: #fee2e2; /* Red-100 */
            color: #dc2626; /* Red-600 */
        }
        /* ===== PREMIUM MESLEK BLOGU (DİJİTAL DERGİ KONSEPTİ) ===== */
        .premium-blog-header {
            background: var(--accent-2);   /* düz derin lacivert — editoryal, gradyan yok */
            border-radius: 1.5rem;
            padding: 3rem 2rem;
            color: white;
            position: relative;
            overflow: hidden;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px -10px rgba(14, 21, 36, 0.5);
        }
        
        .premium-blog-header::before {
            content: '';
            position: absolute;
            top: -50%; right: -10%; width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            border-radius: 50%;
        }

        .blog-container {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        @media (min-width: 1024px) {
            .blog-container { flex-direction: row; align-items: flex-start; }
            .blog-left-panel { width: 320px; position: sticky; top: 90px; flex-shrink: 0; }
            .blog-right-panel { flex: 1; min-width: 0; }
        }

        /* Modern Dergi Kartı */
        .modern-blog-card {
            background: #ffffff;
            border-radius: 1.5rem;
            padding: 2rem;
            margin-bottom: 1.5rem;
            border: 1px solid #f3f4f6;
            box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.02), 0 2px 5px -2px rgba(0, 0, 0, 0.02);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
        }

        .modern-blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(14, 21, 36, 0.1), 0 10px 10px -5px rgba(14, 21, 36, 0.04);
            border-color: #e0e7ff;
            z-index: 2;
        }
        /* 3 nokta menü açıkken kart, sonraki kartların ÜSTÜNE çıksın (menü arkada kalmasın) */
        .modern-blog-card.dropdown-open { z-index: 60; }
        .modern-blog-card.dropdown-open:hover { transform: none; }

        /* Hap (Pill) Şeklinde Popüler Meslekler Menüsü */
        .pop-profession-pill {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.85rem 1.25rem;
            background: #ffffff;
            border: 1px solid #f3f4f6;
            border-radius: 1rem;
            margin-bottom: 0.75rem;
            font-weight: 700;
            color: #4b5563;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.01);
        }

        .pop-profession-pill:hover {
            background: #e0e7ff;
            color: var(--accent);
            border-color: #c7d2fe;
            transform: translateX(6px);
        }

        .pop-profession-count {
            background: #f3f4f6;
            color: #6b7280;
            padding: 0.2rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 800;
            transition: all 0.2s ease;
        }

        .pop-profession-pill:hover .pop-profession-count {
            background: #c7d2fe;
            color: var(--accent);
        }

        /* Footer CSS */
        .main-footer {
            background-color: #f0f2f5;
            color: #f0f2f5; 
            padding: 2rem 0;
            font-family: var(--font-body);
            margin-top: auto; /* Bu, footer'ı sayfanın en altına iter */
        }

        .main-footer h4 {
            font-weight: 700;
            font-size: 1.125rem;
            margin-bottom: 1rem;
            color: var(--accent);
        }

        .main-footer ul {
            list-style: none;
            padding: 0;
            
        }

        .main-footer a {
            color: #612c8a;
            text-decoration: none;
            transition: color 0.2s ease;
            font-size: 0.95rem;
        }

        .main-footer a:hover {
            color: var(--accent);
            text-decoration: underline;
        }

        .main-footer .social-icons a {
            font-size: 1.5rem;
        }

        .main-footer .copyright {
            border-top: 1px solid #4b5563;
            padding-top: 1.5rem;
            margin-top: 2rem;
            text-align: center;
            font-size: 0.875rem;
            color: #6b7280;
        }


        .main-footer p {
             color: black;

        }

/* YORUM ROZETLERİ İÇİN YENİ STİL */
.rozet-card {
    display: flex;
    align-items: center; /* İçeriklerin dikeyde ortalanmasını sağlar */
    padding: 1.5rem;
    background-color: #f9fafb; /* Açık gri arkaplan */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}
/* SADECE MOBİL İÇİN YENİ KOD: Rozet kartlarının padding'ini azalt */
@media (max-width: 639px) {
    .rozet-card {
        padding: 1rem; /* Mobil ekranlarda dikey padding'i azaltır */
    }
}



        /* Yorumlardaki rozet stilini ana sayfaya uyarlamak için yeni stil */
/* Yorumlardaki rozet stilini ana sayfaya uyarlamak için yeni stil */
.rozet-card .verified-badge-container {
    width: 3rem; /* Daha büyük rozet simgesi */
    height: 2.5rem; /* Daha büyük rozet simgesi */
    vertical-align: middle;
    margin-right: 0.75rem;
}

.rozet-card .verified-badge-container svg {
    width: 2.25rem;
    height: 2.25rem;
}

.rozet-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
}

.rozet-card p {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.5;
}

/* Ana sayfa karşılama bölümü için özel stiller */
.welcome-section {
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.welcome-section-image {
    max-width: 300px; /* Mobil için varsayılan boyut */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.welcome-title {
    font-size: 1.75rem; /* Mobil için varsayılan başlık boyutu (text-2xl) */
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}


/* Büyük ekranlar için duyarlı ayarlar */
@media (min-width: 768px) {
    .welcome-section-image {
        max-width: 570px; /* Masaüstü için yeni boyut (yarıya indirildi) */
    }

    .welcome-title {
        font-size: 2.25rem; /* Masaüstü için başlık boyutunu artır */
    }
}

/* YENİ: Başlıklar için ortak stil */
.centered-header-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* YENİ: Scroll simgesi stilleri güncellendi */
.scroll-icon {
    position: relative; /* Normal akışta kalması için */
    margin: 2rem auto; /* Üstten boşluk bırak ve ortala */
    animation: scroll-float 2.4s ease-in-out infinite;
    color: var(--accent);
    font-size: 1.5rem;
    cursor: pointer;
}
/* Sakin, yumuşak süzülme (eski tacky bounce yerine) */
@keyframes scroll-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-icon { animation: none; }
}


/* ===== PROFİL SAYFASI YENİ MODERN TASARIM ===== */
        .profile-header-card {
            background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
            border-radius: 1.5rem;
            padding: 3rem 2rem;
            color: white;
            text-align: center;
            box-shadow: 0 10px 25px rgba(14, 21, 36, 0.25);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        /* Arka plan süslemesi */
        .profile-header-card::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%; width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
            pointer-events: none;
        }
        .profile-avatar-wrapper {
            width: 120px;
            height: 120px;
            margin: 0 auto 1rem auto;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.3);
            position: relative;
            background-clip: padding-box;
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }
        .profile-avatar-wrapper img {
            width: 100%; height: 100%;
            border-radius: 50%; object-fit: cover;
            background-color: white;
        }
        .profile-avatar-wrapper .edit-icon {
            position: absolute;
            bottom: 0px; right: 0px;
            background-color: #ffffff;
            color: var(--accent);
            border-radius: 50%;
            padding: 8px;
            font-size: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .profile-avatar-wrapper .edit-icon:hover {
            transform: scale(1.1);
        }
        .profile-tabs-modern {
            display: flex;
            gap: 0.5rem;
            background: #f3f4f6;
            padding: 0.5rem;
            border-radius: 1rem;
            overflow-x: auto; /* Mobilde yana kaydırılabilir */
            -ms-overflow-style: none;
            scrollbar-width: none;
            margin-bottom: 1.5rem;
        }
        .profile-tabs-modern::-webkit-scrollbar { display: none; }
        .profile-tabs-modern button {
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
            border-radius: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            transition: all 0.3s ease;
            background: transparent;
            white-space: nowrap;
            border: none;
        }
        .profile-tabs-modern button.active {
            background: white;
            color: var(--accent);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        /* Profil sekmelerinin içi */
        #profileSection .profile-tab-content {
            background-color: #ffffff;
            border-radius: 1.25rem;
            padding: 2rem;
            border: 1px solid #f3f4f6;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            border-top: 1px solid #f3f4f6; /* Eskiden none idi, artık tam kart */
        }

        /* ===== MOBİL EKRAN İÇİN FERAHLATICI (UNCRAMPED) DÜZENLEMELER ===== */
        @media (max-width: 768px) {
            body {
                background-color: #ffffff; /* Mobilde gri arkaplan daraltır, beyaz ferahlatır */
            }
            /* Koyu modda mobilde beyaz zemini geri al */
            [data-theme="dark"] body { background-color: var(--bg) !important; }
            .container {
                margin: 0 !important;
                padding: 1rem !important;
                max-width: 100% !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }
            .app-header {
            background-color: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px); /* Cam efekti */
            border-bottom: 1px solid #f3f4f6;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
            border-radius: 0 0 1.5rem 1.5rem !important;
        }
            /* Başlıkları çok az küçült (Ekrandan taşmayı engeller) */
            h2.text-2xl, h2.text-3xl, .centered-header-title {
            font-weight: 900 !important; /* Çok kalın (Black) */
            letter-spacing: -0.025em !important; /* Harfleri biraz sıkıştır */
            color: #111827 !important;
        }
            /* Koyu mod: mobilde başlıklar siyah kalmasın (yukarıdaki !important'ı ez) */
            [data-theme="dark"] h2.text-2xl,
            [data-theme="dark"] h2.text-3xl,
            [data-theme="dark"] .centered-header-title { color: var(--ink) !important; }
            /* Kartların iç boşluklarını optimize et */
            .card, .p-6 {
                padding: 1.25rem !important;
            }
            /* Gridler ve Flexler arasındaki abartı boşlukları kıs */
            .gap-6, .gap-8 {
                gap: 1rem !important;
            }
            /* Dokunmatik hedefleri (Touch Targets) büyüt */
            .input-field {
                padding: 0.85rem 1rem !important;
                font-size: 16px !important; /* iOS klavye zoomunu engeller */
            }
            .btn-primary, .btn-secondary, .btn-analyze {
                padding: 0.85rem 1rem !important;
                width: 100%; /* Mobilde butonlar tam satır kaplasın */
                display: flex;
                align-items: center;   /* ikon + metni dikeyde ortala (ikon kaymasını önler) */
                justify-content: center;
                gap: 0.5rem;           /* ikon ile metin arası tutarlı boşluk */
                margin-bottom: 0.5rem;
            }
            .btn-primary i, .btn-secondary i, .btn-analyze i { flex-shrink: 0; }
            /* İSTİSNA: hero arama kutusundaki Ara butonu tam satır olmasın (input'u ezmesin) */
            .hero-search-box .btn-primary {
                width: auto !important;
                flex: 0 0 auto;
                margin-bottom: 0 !important;
            }
            /* Profil Header'ı mobilde devasa olmasın */
            .profile-header-card {
                padding: 1.5rem 1rem;
                border-radius: 1rem;
            }
            .profile-avatar-wrapper {
                width: 90px;
                height: 90px;
            }
            /* Öne Çıkanlar (Featured) kartları iç içe girmesin */
            .featured-content {
                flex-direction: column !important;
            }
            .ai-analysis-container {
                width: 100% !important;
                margin-top: 1rem;
                padding: 1.25rem !important;
            }
        }

        /* ===== GOOGLE ARAMA KUTUSU (AUTOCOMPLETE) ÖZELLEŞTİRMESİ ===== */
        /* ===== GOOGLE ARAMA KUTUSU (ESKİ LOGOLU GÖRÜNÜM) ===== */
        .pac-container {
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border: 1px solid #e5e7eb;
            margin-top: 8px;
            font-family: var(--font-body);
            padding: 8px 0;
        }
        .pac-item {
            padding: 10px 16px;
            cursor: pointer;
            border-top: 1px solid #f3f4f6;
            transition: background-color 0.2s;
            display: flex !important;
            align-items: center;
        }
        .pac-item:first-child { border-top: none; }
        .pac-item:hover { background-color: #f3f4f6; }
        
        /* Adresi tamamen gizle */
        .pac-item > span:not(.pac-item-query) {
            display: none !important;
        }
        
        /* ESKİ GÖRÜNÜM: Sol taraftaki yuvarlak logo alanı */
        .pac-icon {
            display: flex !important;
            width: 32px !important;
            height: 32px !important;
            background-image: none !important;
            background-color: var(--accent); /* Sitenin ana indigo rengi */
            border-radius: 50%;
            margin-right: 12px !important;
            margin-top: 0 !important;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
        }
        /* Logonun içine şık bir bina ikonu (FontAwesome) */
        .pac-icon::before {
            content: '\f1ad'; 
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: #ffffff;
            font-size: 14px;
        }

        /* Şirket ismi tipografisi */
        .pac-item-query {
            font-size: 15px;
            font-weight: 600;
            color: #1f2937;
            display: block;
        }


        /* ===== MOBİL UX İYİLEŞTİRMELERİ ===== */
        /* 1. iOS'ta arama kutusuna tıklayınca ekranın saçma bir şekilde yakınlaşmasını engeller */
        input, textarea, select {
            font-size: 16px !important; 
        }
        /* 2. Mobilde butonlara tıklayınca çıkan o çirkin mavi/gri dikdörtgen efekti siler */
        * {
            -webkit-tap-highlight-color: transparent;
        }
        /* 3. Mobilde sayfayı aşağı kaydırırken daha pürüzsüz (yağ gibi) akmasını sağlar */
        html {
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        /* 4. Arama sonuçlarının mobilde ekran dışına taşmasını engeller */
        .max-h-60 {
            max-height: 50vh !important; /* Mobilde klavye açılınca listeyi daraltır */
        }

        /* ===== PROFİL SEVİYE (TIER) RENKLERİ ===== */
        /* Tier renkleri anlamlı (gem sırası) — gradyan yerine DÜZ renk */
        .tier-standard { background: var(--accent) !important; }
        .tier-verified { background: #0f9d70 !important; } /* Zümrüt */
        .tier-gold     { background: #c98a12 !important; } /* Altın */
        .tier-ruby     { background: #d63a5b !important; } /* Yakut */
        .tier-legend   { background: #1f2937 !important; } /* Koyu Karbon */

/* ===== PREMIUM PROFESYONEL LOGO EFEKTİ (TAM HİZALI VERSİYON) ===== */
        .premium-hero-container {
            position: relative;
            width: 100%;
            max-width: 280px; /* Mobilde ekrandan taşmaması için */
            aspect-ratio: 1 / 1; /* Kusursuz yuvarlak olması için yüksekliği genişliğine kilitler */
            margin: 0 auto;
            perspective: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            z-index: 10;
        }

        .premium-logo {
            width: 70%;
            height: 70%;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 
                0 20px 40px -10px rgba(14, 21, 36, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.1); 
            transform-style: preserve-3d;
            animation: float-premium 6s ease-in-out infinite;
            transition: transform 0.1s ease-out, box-shadow 0.3s ease;
        }

        @keyframes float-premium {
            0%, 100% { transform: translateY(0); }
            50% { 
                transform: translateY(-12px); 
                box-shadow: 
                    0 30px 50px -12px rgba(14, 21, 36, 0.5), 
                    0 0 0 1px rgba(255, 255, 255, 0.2); 
            }
        }

        @media (min-width: 1024px) {
            .premium-hero-container {
                max-width: 480px;
                margin: 0; /* Ekstra boşlukları sıfırladık */
                /* YENİ: Logoyu kutunun EN ÜSTÜNE ve EN SOLUNA kilitler */
                align-items: flex-start;
                justify-content: flex-start;
            }
        }

        /* ===== ORTALANMIŞ HERO + HIZLI ARAMA + POPÜLER ARAMALAR ===== */
        .hero-centered {
            justify-content: flex-start;
            padding-top: 1rem;
            padding-bottom: 2.5rem;
        }
        /* Logo her ekranda ortalı ve makul boyutta (bir tık büyütüldü) */
        .hero-logo-centered { max-width: 185px; margin-bottom: 0.25rem; }
        @media (min-width: 1024px) {
            .hero-centered .premium-hero-container.hero-logo-centered {
                max-width: 200px;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
            }
        }
        .hero-centered .hero-quick { margin-top: 1.75rem !important; }
        .hero-search-box {
            display: flex; align-items: center; gap: 0.6rem;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 9999px;
            padding: 0.4rem 0.5rem 0.4rem 1.25rem;
            box-shadow: var(--shadow-md);
            transition: box-shadow .25s var(--ease), border-color .2s var(--ease);
        }
        .hero-search-box:focus-within { border-color: var(--accent); box-shadow: var(--shadow-accent); }
        .hero-search-ic { color: var(--muted); font-size: 1rem; flex-shrink: 0; }
        #heroCompanySearchInput {
            flex: 1; border: none; outline: none; background: transparent;
            font-size: 1rem; color: var(--ink); padding: 0.65rem 0; min-width: 0;
        }
        #heroCompanySearchInput::placeholder { color: var(--muted); }
        .hero-search-box .btn-primary {
            padding: 0.75rem 1.7rem !important; border-radius: 9999px !important; flex-shrink: 0;
        }
        .hero-popular {
            display: flex; align-items: center; justify-content: center;
            flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;
        }
        .hero-popular-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-right: 0.25rem; }
        .hero-chip {
            font-size: 0.85rem; font-weight: 700; color: var(--body);
            background: var(--surface); border: 1px solid var(--line);
            padding: 0.4rem 0.9rem; border-radius: 9999px; cursor: pointer;
            transition: all .18s var(--ease);
        }
        .hero-chip:hover {
            color: var(--accent); border-color: var(--accent);
            background: var(--accent-soft); transform: translateY(-1px);
        }
        .hero-stats-row {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
        }
        /* Sayaç titremesini önle: sabit genişlikli rakamlar + hizayı sabitle */
        #statUsers, #statCompanies, #statReviews {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1;
        }
        .hero-stats-row .spot > div:last-child { min-width: 0; }

        /* ===== NEDEN ÇALIŞANA SOR? — GÜVEN & ÖZELLİKLER (animasyonlu) ===== */
        .trust-section { max-width: 1080px; margin: 4.5rem auto 1rem; padding: 0 1rem; }
        .trust-head { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }
        .trust-eyebrow {
            display: inline-flex; align-items: center; gap: 0.45rem;
            font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            color: var(--accent); background: var(--accent-soft);
            border: 1px solid var(--line); padding: 0.4rem 0.9rem; border-radius: 9999px;
        }
        .trust-eyebrow i { animation: trustPulse 2.6s var(--ease) infinite; }
        .trust-title {
            font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
            font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ink); margin: 1rem 0 0.6rem;
        }
        .trust-grad {
            color: var(--accent);   /* redesign: gradyan/shimmer yazı kaldırıldı → düz mavi */
        }
        .trust-sub { color: var(--body); font-size: 1.02rem; line-height: 1.7; font-weight: 500; }

        .trust-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
        }
        @media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr; } }

        .trust-card {
            position: relative; overflow: hidden;
            background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius-lg); padding: 1.5rem 1.35rem;
            box-shadow: var(--shadow-sm);
            transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s var(--ease);
        }
        .trust-card::before {
            content: ""; position: absolute; inset: 0; opacity: 0;
            background: radial-gradient(120% 90% at 0% 0%, rgba(31,95,224,0.10), transparent 55%);
            transition: opacity .3s var(--ease); pointer-events: none;
        }
        .trust-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
        .trust-card:hover::before { opacity: 1; }
        .trust-ic {
            width: 52px; height: 52px; border-radius: 14px; display: inline-flex;
            align-items: center; justify-content: center; color: #fff; font-size: 1.25rem;
            margin-bottom: 1rem; box-shadow: 0 10px 22px -10px rgba(0,0,0,0.4);
            animation: trustFloat 5.5s ease-in-out infinite;
        }
        .trust-card:nth-child(2n) .trust-ic { animation-delay: -1.6s; }
        .trust-card:nth-child(3n) .trust-ic { animation-delay: -3s; }
        .tic-indigo  { background: linear-gradient(135deg,var(--accent),var(--accent-strong)); }
        .tic-emerald { background: linear-gradient(135deg,#34d399,#0f9d70); }
        .tic-rose    { background: linear-gradient(135deg,#fb7185,#e11d63); }
        .tic-amber   { background: linear-gradient(135deg,#fbbf24,#d97706); }
        .tic-sky     { background: linear-gradient(135deg,#38bdf8,#0284c7); }
        .tic-violet  { background: linear-gradient(135deg,#a78bfa,var(--accent-2)); }
        .trust-card h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--ink); margin-bottom: 0.45rem; letter-spacing: -0.01em; }
        .trust-card p { color: var(--body); font-size: 0.92rem; line-height: 1.65; font-weight: 500; }

        .trust-bar {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
            margin-top: 2.25rem;
        }
        .trust-pill {
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-size: 0.85rem; font-weight: 800; color: var(--body);
            background: var(--surface); border: 1px solid var(--line);
            padding: 0.6rem 1.05rem; border-radius: 9999px; box-shadow: var(--shadow-sm);
        }
        .trust-pill i { color: var(--accent); }
        .trust-pill:nth-child(2) i { color: #10b981; }
        .trust-pill:nth-child(3) i { color: #f59e0b; }
        .trust-pill:nth-child(4) i { color: #ec4899; }

        @keyframes trustFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        @keyframes trustPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }
        @keyframes trustShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
        @media (prefers-reduced-motion: reduce) {
            .trust-ic, .trust-eyebrow i, .trust-grad { animation: none; }
        }

        /* ===== HIZLI REHBER (KAYDIRMALI KILAVUZ) ===== */
        .guide-section { max-width: 1080px; margin: 4rem auto 1rem; padding: 0 1rem; }
        .guide-head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
        .guide-eyebrow {
            display: inline-flex; align-items: center; gap: 0.45rem;
            font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            color: var(--accent); background: var(--accent-soft);
            border: 1px solid var(--line); padding: 0.4rem 0.9rem; border-radius: 9999px;
        }
        .guide-title {
            font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
            font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--ink); margin: 1rem 0 0.5rem;
        }
        .guide-sub { color: var(--body); font-size: 1rem; line-height: 1.7; font-weight: 500; }

        .guide-shell {
            background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
            padding: 1.4rem; overflow: hidden;
        }
        .guide-viewport { overflow: hidden; width: 100%; }
        .guide-track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
        .guide-slide {
            flex: 0 0 100%; min-width: 100%; box-sizing: border-box;
            padding: 1.6rem 1.4rem; text-align: center;
        }
        .guide-ic {
            width: 62px; height: 62px; border-radius: 18px; display: inline-flex;
            align-items: center; justify-content: center; color: #fff; font-size: 1.5rem;
            margin-bottom: 1rem; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.45);
        }
        .guide-step-no {
            font-size: 0.72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            color: var(--muted); margin-bottom: 0.4rem;
        }
        .guide-slide h3 {
            font-family: var(--font-display); font-size: clamp(1.25rem,3vw,1.6rem); font-weight: 800;
            color: var(--ink); margin-bottom: 0.6rem; letter-spacing: -0.01em;
        }
        .guide-slide p {
            color: var(--body); font-size: 0.98rem; line-height: 1.7; font-weight: 500;
            max-width: 520px; margin: 0 auto 1.3rem;
        }
        .guide-cta {
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-weight: 800; font-size: 0.92rem; color: #fff;
            background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
            border: none; padding: 0.7rem 1.35rem; border-radius: 9999px; cursor: pointer;
            box-shadow: 0 10px 22px -12px var(--accent);
            transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
        }
        .guide-cta:hover { transform: translateY(-2px); opacity: .95; }
        .guide-cta i { transition: transform .2s var(--ease); }
        .guide-cta:hover i { transform: translateX(3px); }

        .guide-nav {
            display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; margin-top: 0.4rem; padding: 0 0.4rem;
        }
        .guide-dots { display: flex; gap: 0.5rem; }
        .guide-dot {
            width: 9px; height: 9px; border-radius: 9999px; border: none; cursor: pointer;
            background: var(--line); transition: all .25s var(--ease); padding: 0;
        }
        .guide-dot.is-active { background: var(--accent); width: 26px; }
        .guide-arrows { display: flex; gap: 0.6rem; }
        .guide-arrow {
            width: 46px; height: 46px; border-radius: 9999px; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--surface-2, var(--surface)); border: 1px solid var(--line);
            color: var(--ink); font-size: 1rem;
            transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
        }
        .guide-arrow:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
        .guide-arrow:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
        .guide-arrow-primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
            border-color: transparent; color: #fff;
            box-shadow: 0 10px 22px -12px var(--accent);
        }
        @media (max-width: 600px) {
            .guide-slide { padding: 1.2rem 0.6rem; }
            .guide-nav { flex-direction: column-reverse; gap: 0.9rem; }
            .guide-arrows { width: 100%; justify-content: center; }
        }

        /* ===== PROFİL SEVİYELERİ — ANİMASYONLU YOLCULUK ===== */
        .levels-section { max-width: 1080px; margin: 3.5rem auto 1rem; padding: 0 1rem; }
        .levels-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
        .levels-eyebrow {
            display: inline-flex; align-items: center; gap: 0.45rem;
            font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            color: var(--accent); background: var(--accent-soft);
            border: 1px solid var(--line); padding: 0.4rem 0.9rem; border-radius: 9999px;
        }
        .levels-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--ink); margin: 1rem 0 0.5rem; }
        .levels-accent { color: var(--accent); }
        .levels-sub { color: var(--body); font-size: 1rem; line-height: 1.7; font-weight: 500; }

        .levels-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; max-width: 820px; margin: 0 auto; padding-top: 0.5rem; }
        /* Soldan sağa noktalı, akan bağlantı çizgisi */
        .levels-line {
            position: absolute; top: calc(0.5rem + 30px); left: 9%; right: 9%; height: 4px; z-index: 1;
            background-image: radial-gradient(circle, var(--accent) 42%, transparent 46%);
            background-size: 14px 4px; background-repeat: repeat-x; opacity: .55;
            animation: lvlDots 1.1s linear infinite;
        }
        @keyframes lvlDots { to { background-position: 14px 0; } }

        .level-node { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; }
        .level-info { display: flex; flex-direction: column; align-items: center; }
        .level-dot {
            width: 60px; height: 60px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 1.35rem; margin-bottom: 1rem; position: relative;
            box-shadow: 0 10px 24px -10px rgba(0,0,0,0.45); border: 3px solid var(--surface);
        }
        .level-dot::after {
            content: ''; position: absolute; inset: -6px; border-radius: 9999px;
            border: 2px solid currentColor; opacity: .35; animation: lvlPulse 2.4s var(--ease) infinite;
        }
        .level-node:nth-child(3) .level-dot::after { animation-delay: -0.5s; }
        .level-node:nth-child(4) .level-dot::after { animation-delay: -1s; }
        .level-node:nth-child(5) .level-dot::after { animation-delay: -1.5s; }
        .level-node:nth-child(6) .level-dot::after { animation-delay: -2s; }
        @keyframes lvlPulse { 0% { transform: scale(1); opacity: .4; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }

        .level-name { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; }
        .level-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 0.2rem 0.6rem; border-radius: 9999px; margin: 0.4rem 0 0.6rem; }
        .level-desc { color: var(--body); font-size: 0.85rem; line-height: 1.6; font-weight: 500; max-width: 190px; }

        /* Seviye renkleri */
        /* Tier renkleri anlamlı (gem sırası) — gradyan yerine DÜZ renk */
        .lv-standard .level-dot { background: var(--accent); color: var(--accent); }
        .lv-verified .level-dot { background: #0f9d70; color: #0f9d70; }
        .lv-gold     .level-dot { background: #c98a12; color: #c98a12; }
        .lv-ruby     .level-dot { background: #d63a5b; color: #d63a5b; }
        .lv-legend   .level-dot { background: #1f2937; color: #1f2937; }
        .lv-standard .level-dot > i, .lv-verified .level-dot > i, .lv-gold .level-dot > i, .lv-ruby .level-dot > i, .lv-legend .level-dot > i { color: #fff; }
        [data-theme="dark"] .lv-legend .level-dot { color: #9ca3af; }

        /* Mobil: dikey timeline (dot solda, bilgi sağda; noktalı dikey çizgi) */
        @media (max-width: 720px) {
            .levels-section { margin-top: 2.5rem; }
            .levels-head { margin-bottom: 1.8rem; }
            .levels-track { grid-template-columns: 1fr; gap: 0; max-width: 440px; padding-top: 0.25rem; }
            .levels-line { display: none; }
            .level-node { flex-direction: row; align-items: flex-start; text-align: left; gap: 1.1rem; padding-bottom: 1.9rem; }
            .level-dot { margin-bottom: 0; flex-shrink: 0; width: 50px; height: 50px; font-size: 1.1rem; }
            .level-info { align-items: flex-start; text-align: left; padding-top: 0.15rem; }
            .level-info .level-desc { max-width: none; }
            .level-name { font-size: 1.02rem; }
            .level-tag { margin: 0.3rem 0 0.45rem; }
            .level-desc { font-size: 0.86rem; }
            /* dot merkezinden bir sonraki dot'a uzanan dikey noktalı çizgi */
            .level-node::before {
                content: ''; position: absolute; left: 23.5px; top: 56px; bottom: -8px; width: 3px;
                background-image: radial-gradient(circle, currentColor 40%, transparent 44%);
                background-size: 3px 11px; background-repeat: repeat-y; opacity: .45;
            }
            .level-node:last-child::before { display: none; }
            /* çizgi rengi bir önceki seviyenin rengiyle uyumlu */
            .lv-standard { color: #2563eb; } .lv-verified { color: #059669; }
            .lv-gold { color: #d97706; } .lv-ruby { color: #e11d48; }
        }
        @media (prefers-reduced-motion: reduce) {
            .levels-line { animation: none; }
            .level-dot::after { animation: none; opacity: 0; }
        }

        @media (max-width: 768px) {
            .hero-centered { padding-top: 0.5rem; }
            .hero-stats-row { grid-template-columns: 1fr; }
            /* Mobilde arama: input ve Ara üst üste binmesin — güvenli tek satır */
            .hero-search-box { flex-wrap: nowrap; gap: 0.4rem; padding: 0.35rem 0.35rem 0.35rem 0.9rem; }
            #heroCompanySearchInput { font-size: 0.9rem; padding: 0.6rem 0; }
            .hero-search-box .btn-primary { padding: 0.7rem 1.15rem !important; font-size: 0.9rem; }
            .hero-search-ic { display: none; }
        }

        /* ===== KULLANICININ ŞİRKETİ — HIZLI ERİŞİM (Yorum Yap / Şirketler) ===== */
        .my-company-quick { margin: -0.25rem 0 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
        .my-company-quick .mcq-label { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
        .my-company-chip {
            display: inline-flex; align-items: center; gap: 0.6rem;
            background: var(--accent-soft); border: 1px solid var(--line);
            color: var(--ink); padding: 0.5rem 0.85rem; border-radius: 12px;
            font-weight: 700; cursor: pointer; transition: all .18s var(--ease);
        }
        .my-company-chip:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
        .my-company-chip .mcq-logo {
            width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--accent); color: #fff; font-weight: 800; font-size: 0.85rem;
        }
        .my-company-chip .mcq-go { color: var(--accent); font-size: 0.8rem; }

        /* ŞİRKETLER: çalıştığın şirket kartı */
        #companiesMyCompanyQuick.my-company-quick { display: block; margin: 0 0 1.25rem; }
        .mcq-card {
            border: 1px solid var(--line); border-radius: var(--radius-lg);
            background: var(--surface); box-shadow: var(--shadow-sm);
            padding: 1.1rem 1.25rem; overflow: hidden;
        }
        .mcq-card-head { display: flex; align-items: center; gap: 0.9rem; }
        .mcq-logo-lg {
            width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff; font-weight: 900; font-size: 1.3rem;
        }
        .mcq-card-titlewrap { flex: 1; min-width: 0; }
        .mcq-card-sub { font-size: 0.72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }
        .mcq-card-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mcq-rating { text-align: right; flex-shrink: 0; }
        .mcq-stars { color: #f59e0b; font-size: 0.85rem; letter-spacing: 1px; }
        .mcq-rating-num { font-weight: 800; color: var(--ink); font-size: 0.95rem; }
        .mcq-rating-num span { color: var(--muted); font-weight: 700; font-size: 0.8rem; }
        .mcq-card-stats {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
            margin: 1rem 0; padding: 0.85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
        }
        .mcq-stat { display: flex; flex-direction: column; gap: 0.15rem; text-align: center; }
        .mcq-stat-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
        .mcq-stat-val { font-size: 1.05rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
        .mcq-card-actions { display: flex; gap: 0.6rem; }
        .mcq-card-actions .btn-secondary, .mcq-card-actions .btn-primary { flex: 1; padding: 0.7rem 1rem !important; font-size: 0.9rem; }
        @media (max-width: 600px) {
            .mcq-card-actions { flex-direction: column; }
            .mcq-rating { display: none; }
        }

/* ==========================================================================
   KARANLIK MOD — KAPSAMLI ÖRTME KATMANI (v2)
   Dosyanın sonunda: cascade'de tüm bileşen varsayılanlarını yener.
   Amaç: rozetler, bildirimler, sekmeler, dropdown, açılır paneller ve
   sabit (hardcoded) açık renkler dahil TÜM site koyu modda tutarlı olsun.
   ========================================================================== */

/* --- 1) Pastel rozet/uyarı zeminleri (bg-*-100 / -200) -> koyu ton --- */
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-red-200 { background-color: #3a1c1f !important; }
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-green-200,
[data-theme="dark"] .bg-emerald-100 { background-color: #123527 !important; }
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-orange-200,
[data-theme="dark"] .bg-amber-100 { background-color: #3a2a12 !important; }
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-yellow-200 { background-color: #35300f !important; }
[data-theme="dark"] .bg-indigo-100,
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-sky-100,
[data-theme="dark"] .bg-sky-200,
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-violet-100 { background-color: #23294a !important; }
[data-theme="dark"] .bg-rose-50,
[data-theme="dark"] .bg-rose-200,
[data-theme="dark"] .bg-rose-300 { background-color: #351824 !important; }
[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .bg-gray-400 { background-color: #2a3648 !important; }
/* Koyu blok zeminler (gray-800/900, indigo-800/900) biraz daha yumuşasın */
[data-theme="dark"] .bg-gray-800,
[data-theme="dark"] .bg-gray-900 { background-color: #0f1521 !important; }
[data-theme="dark"] .bg-indigo-800,
[data-theme="dark"] .bg-indigo-900 { background-color: #1e2547 !important; }

/* --- 2) Doygun metin renkleri -> koyu zeminde okunur açık ton --- */
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-400 { color: #fca5a5 !important; }
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; }
[data-theme="dark"] .text-orange-800,
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-orange-500,
[data-theme="dark"] .text-orange-300 { color: #fdba74 !important; }
[data-theme="dark"] .text-yellow-800,
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-500 { color: #fcd34d !important; }
[data-theme="dark"] .text-indigo-900,
[data-theme="dark"] .text-indigo-800,
[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-500,
[data-theme="dark"] .text-indigo-400,
[data-theme="dark"] .text-indigo-300,
[data-theme="dark"] .text-indigo-200 { color: #a5b4fc !important; }
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-300 { color: #93c5fd !important; }
[data-theme="dark"] .text-purple-600 { color: #c4b5fd !important; }
/* Marka rengi sabit metinler (var(--accent) vb.) çok koyu kalanları düzelt */
[data-theme="dark"] .notification-item.unread { color: #a5b4fc !important; }

/* --- 3) Kenarlıklar: renkli ince çizgiler yumuşasın --- */
[data-theme="dark"] .border-red-100, [data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-green-100, [data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-indigo-100, [data-theme="dark"] .border-indigo-200,
[data-theme="dark"] .border-blue-100, [data-theme="dark"] .border-orange-100,
[data-theme="dark"] .border-yellow-100 { border-color: var(--line) !important; }

/* --- 4) BİLDİRİM MODALI (sabit renkler) --- */
[data-theme="dark"] .notification-modal-content { background-color: var(--surface) !important; box-shadow: var(--shadow-lg) !important; }
[data-theme="dark"] .notification-header { border-bottom-color: var(--line) !important; }
[data-theme="dark"] .notification-header h3 { color: var(--ink) !important; }
[data-theme="dark"] .notification-close-btn { color: var(--muted) !important; }
[data-theme="dark"] .notification-list-panel { border-right-color: var(--line) !important; }
[data-theme="dark"] .notification-item { border-bottom-color: var(--line) !important; }
[data-theme="dark"] .notification-item:hover { background-color: var(--surface-2) !important; }
[data-theme="dark"] .notification-detail-panel h4 { color: var(--ink) !important; }
[data-theme="dark"] .notification-detail-panel p { color: var(--body) !important; }
[data-theme="dark"] .notification-detail-panel .date { color: var(--muted) !important; }
[data-theme="dark"] .no-notification-selected { color: var(--muted) !important; }
[data-theme="dark"] .company-logo { border-color: var(--line) !important; }

/* --- 5) PROFİL DROPDOWN (header menüsü) --- */
[data-theme="dark"] .profile-dropdown-content { background-color: var(--surface) !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; border: 1px solid var(--line); }
[data-theme="dark"] .profile-dropdown-content a,
[data-theme="dark"] .profile-dropdown-content button { color: var(--body) !important; }
[data-theme="dark"] .profile-dropdown-content a:hover,
[data-theme="dark"] .profile-dropdown-content button:hover { background-color: var(--surface-2) !important; color: var(--ink) !important; }

/* --- 6) SEKMELER (profil / şirket detay / admin) --- */
[data-theme="dark"] .profile-tabs button,
[data-theme="dark"] .company-detail-tabs button,
[data-theme="dark"] .admin-panel-tabs button { background-color: #1b2534; color: var(--body); }
[data-theme="dark"] .profile-tabs button:hover:not(.active),
[data-theme="dark"] .company-detail-tabs button:hover:not(.active),
[data-theme="dark"] .admin-panel-tabs button:hover:not(.active) { background-color: #232f42; }
[data-theme="dark"] .profile-tab-content,
[data-theme="dark"] .admin-tab-content { background-color: var(--surface-2); border-color: var(--line); }
/* Profil modern pill sekmeleri — koyu mod (id/çift-sınıf specificity'sini yener) */
[data-theme="dark"] .profile-tabs-modern { background: var(--surface-2) !important; }
[data-theme="dark"] .profile-tabs.profile-tabs-modern button { background: transparent !important; color: var(--muted); }
[data-theme="dark"] .profile-tabs.profile-tabs-modern button:hover:not(.active) { background: var(--surface) !important; color: var(--ink); }
[data-theme="dark"] .profile-tabs.profile-tabs-modern button.active { background: var(--surface) !important; color: #a5b4fc !important; box-shadow: var(--shadow-sm); }
[data-theme="dark"] #profileSection .profile-tab-content { background-color: var(--surface) !important; border-color: var(--line) !important; }
[data-theme="dark"] #profileSection .profile-tab-content h3 { border-color: var(--line) !important; }
[data-theme="dark"] .admin-panel-tabs.admin-tabs-modern button { background: #1b2534 !important; color: var(--body) !important; }
[data-theme="dark"] .admin-panel-tabs.admin-tabs-modern button:hover:not(.active) { background: #232f42 !important; }
[data-theme="dark"] .admin-tabs-modern ~ .admin-tab-content,
[data-theme="dark"] #adminPanelSection .admin-tab-content { background: var(--surface-2) !important; }
[data-theme="dark"] .profile-tabs-modern,
[data-theme="dark"] .company-detail-tabs.profile-tabs-modern { background-color: var(--surface) !important; border-color: var(--line) !important; }

/* --- 7) ADMIN KABUĞU / STAT KARTLARI --- */
[data-theme="dark"] .admin-shell { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--line); }
/* Yönetici odası — sabit metin/grafik renklerini koyu moda taşı */
[data-theme="dark"] .stat-card .stat-value { color: var(--ink); }
[data-theme="dark"] .stat-card .stat-label { color: var(--muted); }
[data-theme="dark"] .chart-card { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .chart-card h4 { color: var(--ink); }
[data-theme="dark"] .chart-card p.sub { color: var(--muted); }
[data-theme="dark"] .admin-tab-content .text-gray-900,
[data-theme="dark"] .admin-tab-content .text-gray-800,
[data-theme="dark"] .admin-shell .text-gray-900,
[data-theme="dark"] .admin-shell .text-gray-800 { color: var(--ink) !important; }
[data-theme="dark"] .admin-tab-content .text-gray-700,
[data-theme="dark"] .admin-tab-content .text-gray-600,
[data-theme="dark"] .admin-shell .text-gray-700,
[data-theme="dark"] .admin-shell .text-gray-600 { color: var(--body) !important; }

/* --- 8) HESAP TİPİ BUTONLARI (kayıt) --- */
[data-theme="dark"] .btn-account-type { background-color: var(--surface-2); border-color: var(--line); color: var(--body); }
[data-theme="dark"] .btn-account-type.selected { background-color: var(--accent-soft); border-color: var(--accent); color: #a5b4fc; }
[data-theme="dark"] .btn-account-type:hover:not(.selected) { background-color: #232f42; }

/* --- 9) EMOJİ PANELİ + DOSYA ÖNİZLEME --- */
[data-theme="dark"] .emoji-picker { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 30px -8px rgba(0,0,0,.55); }
[data-theme="dark"] .chat-input-area .emoji-picker button.emoji-cell:hover { background: #232f42 !important; }
[data-theme="dark"] .attachment-preview { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 30px -8px rgba(0,0,0,.5); }
[data-theme="dark"] .attachment-preview .att-icon { background: var(--accent-soft); color: #a5b4fc; }
[data-theme="dark"] .attachment-preview .att-name { color: var(--body); }
[data-theme="dark"] .attachment-preview .att-remove { background: #3a1c1f !important; color: #fca5a5 !important; }
[data-theme="dark"] .attachment-preview .att-remove:hover { background: #4a2226 !important; }

/* --- 10) MESAJLAR / SOHBET PANELİ (sabit renkler) --- */
[data-theme="dark"] .message-list-panel { background-color: var(--surface); border-right-color: var(--line); }
[data-theme="dark"] .message-list-item { border-bottom-color: var(--line); }
[data-theme="dark"] .message-list-item:hover { background-color: var(--surface-2) !important; }
[data-theme="dark"] .message-list-item.active { background-color: #1a2033 !important; border-left-color: var(--accent) !important; }
[data-theme="dark"] .message-chat-panel { background-color: var(--bg); }
[data-theme="dark"] .chat-header { background-color: var(--surface); border-bottom-color: var(--line); }
[data-theme="dark"] .chat-header-name { color: var(--ink); }
[data-theme="dark"] .no-chat-selected { color: var(--muted); }
[data-theme="dark"] .chat-input-area { background: var(--surface) !important; border-top-color: var(--line) !important; }
[data-theme="dark"] .chat-input-area input { background-color: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink) !important; }
[data-theme="dark"] .chat-input-area input::placeholder { color: var(--muted) !important; }
[data-theme="dark"] .chat-input-area input:focus { background-color: #0f1521 !important; border-color: var(--accent) !important; }
[data-theme="dark"] .chat-input-area button.chat-tool-btn { color: var(--muted) !important; }
[data-theme="dark"] .chat-input-area button.chat-tool-btn:hover,
[data-theme="dark"] .chat-input-area button.chat-tool-btn.active { color: #a5b4fc !important; }
[data-theme="dark"] .msg-attachment-file { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .msg-menu-dropdown { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 30px -8px rgba(0,0,0,.55); }
[data-theme="dark"] .msg-menu-dropdown button { color: var(--body); }
[data-theme="dark"] .msg-menu-dropdown button:hover { background: var(--surface-2); }
[data-theme="dark"] .msg-menu-dropdown button.danger { color: #fca5a5; }
[data-theme="dark"] .msg-menu-dropdown button.danger:hover { background: #3a1c1f; }
[data-theme="dark"] .msg-menu-btn:hover { background: rgba(255,255,255,0.14); }
[data-theme="dark"] .chat-header-menu-btn { color: var(--muted); }
[data-theme="dark"] .chat-header-menu-btn:hover { background: var(--surface-2); color: var(--ink); }

/* --- 11) GENEL EMNİYET: sabit beyaz/açık zeminler --- */
[data-theme="dark"] .bg-slate-100 { background-color: #1b2534 !important; }

/* --- 12) SABİT KOYU METİNLER (global) — koyu modda görünmez kalanlar --- */
[data-theme="dark"] .centered-header-title { color: var(--ink) !important; }
[data-theme="dark"] .main-footer p,
[data-theme="dark"] .main-footer li,
[data-theme="dark"] .main-footer a { color: var(--body) !important; }
[data-theme="dark"] .main-footer h4 { color: var(--ink) !important; }
[data-theme="dark"] .pac-item-query,
[data-theme="dark"] .pac-item { color: var(--ink) !important; }
[data-theme="dark"] .pac-item span { color: var(--muted) !important; }
[data-theme="dark"] .ellipsis-dropdown { background-color: var(--surface) !important; border-color: var(--line) !important; }
[data-theme="dark"] .ellipsis-dropdown button { color: var(--body) !important; }
[data-theme="dark"] .ellipsis-dropdown button:hover { background-color: var(--surface-2) !important; }
[data-theme="dark"] .ellipsis-dropdown button.delete-btn:hover,
[data-theme="dark"] .ellipsis-dropdown button.delete-blog-post-btn:hover { background-color: rgba(220,38,38,0.15) !important; color: #f87171 !important; }

/* --- 13) MESLEK BLOGU KOYU MOD --- */
[data-theme="dark"] #professionBlogSection .modern-blog-card { background: var(--surface) !important; border-color: var(--line) !important; }
[data-theme="dark"] #professionBlogSection .modern-blog-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important; }
[data-theme="dark"] #professionBlogSection .pop-profession-pill { background: var(--surface) !important; border-color: var(--line) !important; color: var(--body) !important; }
[data-theme="dark"] #professionBlogSection .pop-profession-pill:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important; }
[data-theme="dark"] #professionBlogSection input,
[data-theme="dark"] #professionBlogSection textarea { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
[data-theme="dark"] #professionBlogSection .bg-gray-50 { background-color: var(--surface-2) !important; }
[data-theme="dark"] #professionBlogSection .bg-orange-50 { background-color: rgba(249,115,22,0.12) !important; }
[data-theme="dark"] #professionBlogSection .border-gray-100,
[data-theme="dark"] #professionBlogSection .border-gray-200 { border-color: var(--line) !important; }
[data-theme="dark"] #professionBlogSection .ellipsis-button.bg-gray-50 { background-color: var(--surface-2) !important; }
/* Makale okuma paneli: sabit renkli şeritler koyu modda da kalsın (gradient) */
[data-theme="dark"] #blogPostDetail { background: var(--surface) !important; border-color: var(--line) !important; }
[data-theme="dark"] #blogPostContent { color: var(--body) !important; }
/* Genel emniyet: koyu zeminlerde kalan sabit koyu metinleri yakala */
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #111"] { color: var(--ink) !important; }
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"] { background-color: var(--surface) !important; }



/* ===== AI Site Dedektörü — footer erişim kartı ===== */
.ai-detector-card{
    display:flex; align-items:center; gap:18px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px; padding:20px 22px; margin-bottom:44px;
    text-decoration:none; transition:border-color .18s ease;
}
.ai-detector-card:hover{ border-color:var(--muted); }
.ai-detector-ic{
    flex-shrink:0; width:48px; height:48px; border-radius:9px;
    display:grid; place-items:center; font-size:20px; color:#fff;
    background:var(--accent);
}
.ai-detector-txt{ flex:1; min-width:0; }
.ai-detector-tag{
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent); margin-bottom:5px;
}
.ai-detector-title{ font-size:16px; font-weight:700; color:var(--ink); margin:0 0 4px; line-height:1.3; }
.ai-detector-sub{ font-size:14px; color:var(--body); margin:0; line-height:1.55; }
.ai-detector-btn{
    flex-shrink:0; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    background:var(--accent); color:#fff; font-weight:700; font-size:14px;
    padding:11px 18px; border-radius:8px; transition:background .15s;
}
.ai-detector-card:hover .ai-detector-btn{ background:var(--accent-strong); }
@media (max-width:640px){
    .ai-detector-card{ flex-direction:column; align-items:flex-start; text-align:left; gap:14px; }
    .ai-detector-btn{ width:100%; justify-content:center; }
}

/* ===== YORUM KART DESTESİ (Card Stack / Deck Effect) — koyu, eğik, sert ===== */
/* Sekme açılınca deste sayfada tam ortalansın (yatay + dikey) */
#reviewDeckSection.active{
    display:flex !important; flex-direction:column; align-items:center; justify-content:center;
    min-height:calc(100vh - 200px);
}
.deck-wrap{ width:100%; max-width:640px; margin:0 auto; padding:20px; }
.deck-head{ text-align:center; margin-bottom:22px; }
.deck-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.deck-title{ font-size:clamp(24px,3.6vw,34px); font-weight:800; color:var(--ink); margin:8px 0 6px; letter-spacing:-.01em; }
.deck-sub{ color:var(--body); font-size:15px; max-width:460px; margin:0 auto; line-height:1.6; }

/* Açık/beyaz sahne — beyaz kartlar, ince koyu çerçeve (görsele göre) */
.deck-stage{
    display:flex; flex-direction:column; align-items:center;
    background:radial-gradient(120% 120% at 50% 25%, #f5f6f8 0%, #ebedf0 65%, #e6e8ec 100%);
    border:1px solid rgba(15,23,42,.05);
    border-radius:28px; padding:60px 16px 40px; margin-top:8px; width:100%;
}
.deck{ position:relative; width:min(340px,100%); height:238px; margin:0 auto; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.deck:focus-visible{ outline:2px solid var(--accent); outline-offset:10px; border-radius:26px; }
.deck-card{
    position:absolute; left:0; right:0; top:0; height:210px;
    border-radius:26px; padding:24px 24px 22px; color:#0f172a;
    display:flex; flex-direction:column; gap:14px;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.22);   /* ince koyu çerçeve */
    box-shadow:0 22px 50px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
    transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    will-change:transform,opacity; transform-origin:center center;
}
.deck-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.deck-company{ font-weight:800; font-size:22px; letter-spacing:-.01em; line-height:1.15; color:#0f172a; max-width:64%;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.deck-stars{ letter-spacing:2px; color:#f59e0b; font-size:15px; flex-shrink:0; white-space:nowrap; margin-top:4px; }
.deck-body{ margin:0; font-size:15.5px; line-height:1.5; font-weight:400; color:#64748b; flex:1;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.deck-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:12.5px; font-weight:600; color:#94a3b8; }
.deck-foot .who{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-foot .meta{ flex-shrink:0; }
.deck-empty{ color:#94a3b8; text-align:center; padding-top:86px; font-weight:600; }
.deck-cta .deck-body{ color:#475569; font-weight:500; }
.deck-dots{ display:flex; gap:6px; justify-content:center; margin-top:26px; }
.deck-dot{ width:7px; height:7px; border-radius:50%; background:rgba(15,23,42,.16); transition:.3s; }
.deck-dot.on{ background:#0f172a; width:20px; border-radius:4px; }
.deck-hint{ margin-top:12px; color:#94a3b8; font-size:12.5px; font-weight:600; transition:opacity .4s; }
.deck-hint i{ margin-right:5px; }
@media (prefers-reduced-motion: reduce){ .deck-card{ transition:opacity .25s ease; } }

/* ===== Logo giriş animasyonu (Gmail tarzı: her harf noktadan yaylanarak açılır) ===== */
.cs-letter{ display:inline-block; white-space:pre; transform-origin:center 62%; }
.logo-animate .cs-letter{ animation: csLetterIn .58s cubic-bezier(.2,.75,.25,1.28) both; }
@keyframes csLetterIn{
    0%   { transform: scale(.12) translateY(3px); opacity:0; filter: blur(3px); }
    55%  { opacity:1; }
    100% { transform: scale(1) translateY(0); opacity:1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce){
    .logo-animate .cs-letter{ animation:none; opacity:1; filter:none; transform:none; }
}

/* ===== YÜKLEME ANİMASYONU (theme-aware, indigo) — Swift Loader uyarlaması =====
   Roller: accent = dönen yay, track = halka, size/speed = değişken. */
.cs-loader {
    --cs-l-size: 40px; --cs-l-thick: 3.5px; --cs-l-speed: .8s;
    --cs-l-accent: var(--accent); --cs-l-track: var(--line);
    display: inline-block; box-sizing: border-box;
    width: var(--cs-l-size); height: var(--cs-l-size); border-radius: 50%;
    border: var(--cs-l-thick) solid var(--cs-l-track);
    border-top-color: var(--cs-l-accent);
    animation: cs-loader-spin var(--cs-l-speed) linear infinite;
}
[data-theme="dark"] .cs-loader { --cs-l-track: #273244; }
@keyframes cs-loader-spin { to { transform: rotate(360deg); } }

/* Üç nokta varyantı (.cs-loader-dots) */
.cs-loader-dots { display: inline-flex; gap: 6px; align-items: center; }
.cs-loader-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: block;
    animation: cs-loader-fade 1.1s ease-in-out infinite; }
.cs-loader-dots i:nth-child(2) { animation-delay: .18s; }
.cs-loader-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cs-loader-fade { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .cs-loader { animation-duration: 2.4s; }
    .cs-loader-dots i { animation: none; opacity: .7; }
}

/* Yükleme satırı yardımcısı (loader + metin) */
.cs-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; color: var(--muted); font-weight: 500; font-size: 14px; }
.cs-loading .cs-loader { --cs-l-size: 22px; --cs-l-thick: 2.5px; }

/* ==========================================================================
   YENİDEN TASARIM — "Ölçülü Güven" (mavi-öncülü, editoryal-teknik, anti-slop)
   Faz 1 · Temel: tipografi + hero. Renk cümbüşü / neon / gradyan buton yok.
   ========================================================================== */
h1, h2, h3, .section-title, .trust-title, .deck-title, .deck-company {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
/* Hero başlık — güçlü grotesk, gradyan YOK (vurgu renkle/ağırlıkla) */
.hero-centered h1 {
    font-family: var(--font-display); font-weight: 700;
    letter-spacing: -0.035em; line-height: 1.05; color: var(--ink);
}
.hero-accent { color: var(--accent); }
/* Gerçek veri = mono (dekoratif değil: sayılar/ölçüm) */
#statUsers, #statCompanies, #statReviews {
    font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em;
}
/* Metrik ikonları: gradyan yerine DÜZ accent + nötr gölge */
.hero-stats-row .spot > div:first-child {
    background: var(--accent) !important; box-shadow: none !important; border-radius: var(--radius) !important;
}
.hero-stats-row .spot {
    border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--line) !important;
}
/* Arama kutusu: hairline-öncelikli, renkli glow yerine nötr odak halkası */
.hero-search-box { box-shadow: var(--shadow-sm); }
.hero-search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ===== FAZ 1 (devam) — Ana sayfa renk disiplini + stat şerit ===== */
/* İstatistik şeridi (ikon kartı yok, mono sayı, hairline ayraç) */
.stat-strip {
    display: flex; align-items: stretch; justify-content: center; gap: 0;
    max-width: 620px; margin-left: auto; margin-right: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 22px 16px; }
.stat-item + .stat-item { border-left: 1px solid var(--line); }
.stat-num {
    font-family: var(--font-mono); font-weight: 700; font-size: 1.85rem; line-height: 1;
    color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stat-lbl { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; }
@media (max-width: 560px) {
    .stat-strip { flex-direction: column; }
    .stat-item + .stat-item { border-left: 0; border-top: 1px solid var(--line); }
}

/* Renk cümbüşünü tekilleştir: trust ikon çipleri → tek disiplinli accent */
.tic-indigo, .tic-emerald, .tic-rose, .tic-amber, .tic-sky, .tic-violet {
    background: var(--accent-soft) !important; color: var(--accent) !important;
}
.trust-ic { color: var(--accent); }
.trust-ic > i, .trust-ic i { color: var(--accent) !important; }
/* Trust pill ikonları → tek renk */
.trust-pill i, .trust-pill:nth-child(2) i, .trust-pill:nth-child(3) i, .trust-pill:nth-child(4) i { color: var(--accent) !important; }
/* Eyebrow (craft-floor: yasak) — başlık kendi ağırlığını taşır */
.trust-eyebrow { display: none !important; }

/* ==========================================================================
   SCROLL-DRIVEN HAREKET (compositor / GPU — ana iş parçacığını yormaz)
   Modern tarayıcı: [data-reveal] kaydırma pozisyonuna bağlı akıcı belirir.
   Eski tarayıcı: motion.js'in JS reveal'ı devreye girer (çakışma yok).
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-native-scroll [data-reveal] {
      opacity: 0;
      animation: cs-rev-up both linear;
      animation-timeline: view();
      animation-range: entry 4% cover 42%;
      transition: none !important;      /* JS transition katmanını kapat */
    }
    .cs-native-scroll [data-reveal="left"]  { animation-name: cs-rev-left; }
    .cs-native-scroll [data-reveal="right"] { animation-name: cs-rev-right; }
    .cs-native-scroll [data-reveal="scale"] { animation-name: cs-rev-scale; }
    .cs-native-scroll [data-reveal="fade"]  { animation-name: cs-rev-fade; }
    /* Gecikme varyantları scroll-driven'da anlamsız; nötrle */
    .cs-native-scroll [data-reveal][data-reveal-delay] { animation-range: entry 8% cover 48%; }

    @keyframes cs-rev-up    { from { opacity: 0; transform: translateY(30px); }  to { opacity: 1; transform: none; } }
    @keyframes cs-rev-left  { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
    @keyframes cs-rev-right { from { opacity: 0; transform: translateX(38px); }  to { opacity: 1; transform: none; } }
    @keyframes cs-rev-scale { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }
    @keyframes cs-rev-fade  { from { opacity: 0; }                               to { opacity: 1; } }

    /* Hero: kaydırıp çıkarken içerik yumuşakça yukarı süzülür + soluklaşır (Apple-vari parallax) */
    .cs-native-scroll .hero-centered {
      animation: cs-hero-out both linear;
      animation-timeline: view();
      animation-range: exit 2% exit 92%;
    }
    @keyframes cs-hero-out { from { opacity: 1; transform: none; } to { opacity: .35; transform: translateY(-42px); } }
  }
}

/* ==========================================================================
   SCROLL SNAP — bölümler kaydırırken "kavrar/durur" (Apple-vari)
   Kullanıcı ne kadar hızlı kaydırırsa kaydırsın her bölümde takılır → animasyonu görür.
   Native (JS yok), yalnızca ANA SAYFA aktifken (:has ile), reduced-motion'da kapalı.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:has(#homeSection.active) {
    scroll-snap-type: y mandatory;      /* her zaman en yakına kilitlenir (tam ortala, atlama yok) */
    scroll-padding-top: 76px;           /* yapışkan header payı */
  }
  #homeSection .hero-centered,
  #homeSection #guideSection,
  #homeSection .centered-header-title,
  #homeSection .levels-section,
  #homeSection .trust-section {
    scroll-snap-align: start;           /* üstten hizala — her bölümde temiz durur (uzun/kısa fark etmez) */
    scroll-snap-stop: always;           /* hiçbir bölümü atlamaz */
  }
}

/* ===== FAZ 5 — dekoratif eyebrow'lar kaldırıldı (craft-floor: başlık kendi ağırlığını taşır) ===== */
.guide-eyebrow, .levels-eyebrow, .deck-eyebrow, .corp-room-eyebrow { display: none !important; }