@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');



        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
            font-family: 'Inter', sans-serif;
            color: #ffffff;
            overflow-x: hidden;
        }

        body {
            background-color: #07030e;
            position: relative;
        }

        /* PDF Background Layer */
        .pdf-background {
            position: fixed;
            inset: 0;
            z-index: 1;
            background-image: url('images/yenibackground.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            pointer-events: none;
        }

        /* ============================================================
           AMBIENT ORBS
           ============================================================ */
        .orb-container {
            position: fixed;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0;
            animation: orbFloat 0s infinite ease-in-out;
        }

        .orb-1 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(108, 92, 231, 0.55) 0%, transparent 65%);
            top: -15%;
            left: -8%;
            animation: orbFloat1 22s infinite ease-in-out;
        }

        .orb-2 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(162, 155, 254, 0.45) 0%, transparent 65%);
            top: 25%;
            right: -10%;
            animation: orbFloat2 28s infinite ease-in-out;
        }

        .orb-3 {
            width: 450px;
            height: 450px;
            background: radial-gradient(circle, rgba(85, 239, 196, 0.28) 0%, transparent 65%);
            bottom: 5%;
            left: 15%;
            animation: orbFloat3 34s infinite ease-in-out;
        }

        @keyframes orbFloat1 {
            0% {
                opacity: 0.6;
                transform: translate(0px, 0px) scale(1);
            }

            33% {
                opacity: 0.9;
                transform: translate(60px, 40px) scale(1.15);
            }

            66% {
                opacity: 0.5;
                transform: translate(-30px, 80px) scale(0.9);
            }

            100% {
                opacity: 0.6;
                transform: translate(0px, 0px) scale(1);
            }
        }

        @keyframes orbFloat2 {
            0% {
                opacity: 0.5;
                transform: translate(0px, 0px) scale(1);
            }

            40% {
                opacity: 0.8;
                transform: translate(-80px, -50px) scale(1.2);
            }

            70% {
                opacity: 0.4;
                transform: translate(40px, 60px) scale(0.85);
            }

            100% {
                opacity: 0.5;
                transform: translate(0px, 0px) scale(1);
            }
        }

        @keyframes orbFloat3 {
            0% {
                opacity: 0.4;
                transform: translate(0px, 0px) scale(1);
            }

            50% {
                opacity: 0.7;
                transform: translate(50px, -60px) scale(1.1);
            }

            100% {
                opacity: 0.4;
                transform: translate(0px, 0px) scale(1);
            }
        }

        /* ============================================================
           FILM GRAIN OVERLAY
           ============================================================ */
        .film-grain {
            position: fixed;
            inset: -50%;
            width: 200%;
            height: 200%;
            z-index: 9997;
            pointer-events: none;
            opacity: 0.028;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 256px 256px;
            animation: grainAnim 0.6s steps(1) infinite;
        }

        @keyframes grainAnim {
            0% {
                transform: translate(0, 0);
            }

            10% {
                transform: translate(-4%, -8%);
            }

            20% {
                transform: translate(-12%, 4%);
            }

            30% {
                transform: translate(6%, -20%);
            }

            40% {
                transform: translate(-4%, 20%);
            }

            50% {
                transform: translate(-12%, 8%);
            }

            60% {
                transform: translate(12%, 0);
            }

            70% {
                transform: translate(0, 12%);
            }

            80% {
                transform: translate(2%, 28%);
            }

            90% {
                transform: translate(-8%, 8%);
            }

            100% {
                transform: translate(7%, 1%);
            }
        }

        /* ============================================================
           BENTO GRID (for project/research cards)
           ============================================================ */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 200px;
            gap: 16px;
            width: 100%;
            padding: 0 8px;
        }

        .bento-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 22px;
            padding: 26px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            backdrop-filter: blur(8px);
        }

        .bento-card:hover {
            background: rgba(255, 255, 255, 0.055);
            border-color: rgba(162, 155, 254, 0.2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }

        .bento-card.bento-tall {
            grid-row: span 2;
        }

        .bento-card.bento-wide {
            grid-column: span 2;
        }

        .bento-card-label {
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 6px;
        }

        .bento-card-title {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            color: #fff;
            font-weight: 400;
        }

        .bento-card-glow {
            position: absolute;
            top: -60px;
            right: -60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(108, 92, 231, 0.2) 0%, transparent 70%);
            pointer-events: none;
        }



        /* ============================================================
           FUTURISTIC COMMAND CENTER (DASHBOARD)
           ============================================================ */
        .command-center-overlay {
            position: fixed;
            inset: 0;
            background: rgba(7, 4, 15, 0.98);
            backdrop-filter: blur(40px);
            z-index: 999999;
            display: none;
            flex-direction: column;
            padding: 60px;
            animation: dashboardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes dashboardFadeIn {
            from {
                opacity: 0;
                transform: scale(1.05);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .cc-close {
            position: absolute;
            top: 30px;
            right: 30px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 10;
        }

        .cc-close:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            transform: rotate(90deg) scale(1.1);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .cc-close svg {
            width: 20px;
            height: 20px;
        }

        .cc-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 60px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 30px;
        }

        .cc-title h1 {
            font-family: 'Playfair Display', serif;
            font-size: 38px;
            font-weight: 400;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #a29bfe 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cc-mini-stats {
            display: flex;
            gap: 24px;
            margin-top: 15px;
        }

        .mini-stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mini-stat-item .label {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.3);
        }

        .mini-stat-item .value {
            font-size: 14px;
            font-weight: 600;
            color: #a29bfe;
            font-family: 'Space Mono', monospace;
        }

        .cc-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .cc-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 20px;
            transition: all 0.3s;
        }

        .cc-card:hover {
            border-color: rgba(162, 155, 254, 0.3);
            background: rgba(162, 155, 254, 0.03);
        }

        .cc-card-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.3);
            margin-bottom: 8px;
        }

        .cc-card-value {
            font-size: 20px;
            font-weight: 500;
            color: #fff;
        }

        .cc-table-wrap {
            flex: 1;
            background: rgba(10, 7, 20, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
            max-height: calc(100vh - 250px);
        }

        .cc-table {
            width: 100%;
            border-collapse: collapse;
        }

        .cc-table th {
            text-align: left;
            padding: 20px 24px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: sticky;
            top: 0;
            background: #0b0818;
            z-index: 10;
        }

        .cc-table td {
            padding: 16px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
        }

        .cc-table tr:hover td {
            background: rgba(255, 255, 255, 0.02);
            color: #fff;
        }

        .status-pill {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-active {
            background: rgba(85, 239, 196, 0.1);
            color: #55efc4;
            border: 1px solid rgba(85, 239, 196, 0.2);
        }

        .status-inactive {
            background: rgba(255, 118, 117, 0.1);
            color: #ff7675;
            border: 1px solid rgba(255, 118, 117, 0.2);
        }

        .cc-btn-refresh {
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 10px 30px rgba(108, 92, 231, 0.3);
            transition: all 0.3s;
            font-size: 13px;
        }

        .cc-btn-refresh:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(108, 92, 231, 0.6);
        }

        .cc-btn-add {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 12px 20px;
            border-radius: 12px;
            color: #fff;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            font-size: 13px;
        }

        .cc-btn-add:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* Dropdown Menu */
        .cc-action-wrap {
            position: relative;
            display: inline-block;
        }

        .cc-dots {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .cc-dots:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        .cc-dropdown {
            position: absolute;
            right: 0;
            top: 100%;
            width: 160px;
            background: #151126;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000;
            overflow: hidden;
            animation: menuFade 0.2s ease;
        }

        @keyframes menuFade {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .cc-dropdown.open {
            display: block;
        }

        .cc-dropdown-item {
            padding: 12px 16px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s;
        }

        .cc-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        .cc-dropdown-item.delete:hover {
            color: #ff7675;
            background: rgba(255, 118, 117, 0.05);
        }

        /* Modal Styles */
        .cc-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(15px);
            z-index: 2000000;
            display: none;
            align-items: center;
            justify-content: center;
            animation: modalFade 0.3s ease;
        }

        @keyframes modalFade {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .cc-modal {
            background: #0f0c1e;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            width: 450px;
            padding: 40px;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
        }

        .cc-modal h2 {
            font-family: 'Playfair Display', serif;
            margin-bottom: 24px;
            font-weight: 400;
        }

        .cc-form-group {
            margin-bottom: 20px;
        }

        .cc-form-group label {
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 8px;
            letter-spacing: 1px;
        }

        .cc-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 12px 16px;
            color: #fff;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }

        .cc-input:focus {
            border-color: #a29bfe;
        }

        .cc-input.invalid {
            border-color: #ff7675;
            background: rgba(255, 118, 117, 0.05);
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
        }

        @keyframes shake {

            10%,
            90% {
                transform: translate3d(-1px, 0, 0);
            }

            20%,
            80% {
                transform: translate3d(2px, 0, 0);
            }

            30%,
            50%,
            70% {
                transform: translate3d(-4px, 0, 0);
            }

            40%,
            60% {
                transform: translate3d(4px, 0, 0);
            }
        }

        .cc-modal-error {
            background: rgba(255, 118, 117, 0.1);
            border: 1px solid rgba(255, 118, 117, 0.2);
            color: #ff7675;
            padding: 10px 15px;
            border-radius: 10px;
            font-size: 12px;
            margin-bottom: 20px;
            display: none;
            align-items: center;
            gap: 10px;
        }

        .cc-input option {
            background: #151126;
            color: #fff;
        }

        .cc-modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 30px;
        }

        /* Tooltip Style */
        .cc-star-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: help;
        }

        .cc-tooltip {
            position: absolute;
            bottom: 100%;
            left: 0;
            background: rgba(21, 17, 38, 0.95);
            color: #fff;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 11px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(241, 196, 15, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            z-index: 100;
            line-height: 1.4;
            transform: translateY(10px);
        }

        .cc-star-wrap:hover .cc-tooltip {
            opacity: 1;
            transform: translateY(-8px);
        }

        .cc-dropdown-item.star {
            color: #f1c40f;
        }

        .cc-dropdown-item.star:hover {
            background: rgba(241, 196, 15, 0.1);
        }

        .cc-modal-btn {
            flex: 1;
            padding: 14px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            font-size: 14px;
        }

        .cc-btn-save {
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            color: #fff;
        }

        .cc-btn-cancel {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.6);
        }

        /* ============================================================
           INPUT COLOR RING (MASAÜSTÜ İÇİN)
           ============================================================ */
        .chat-input-wrapper {
            position: relative;
            overflow: visible;
        }

        .chat-input-wrapper::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 54px;
            background: conic-gradient(from 0deg, #6c5ce7, #a29bfe, #55efc4, #fdcb6e, #fd79a8, #a29bfe, #6c5ce7);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: -1;
            filter: blur(6px);
            pointer-events: none;
        }

        .chat-input-wrapper::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 52px;
            background: conic-gradient(from var(--ring-angle, 0deg), #6c5ce7 0%, #a29bfe 20%, #55efc4 40%, #fdcb6e 60%, #fd79a8 80%, #6c5ce7 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: -1;
            pointer-events: none;
        }

        .chat-input-wrapper.ring-active::before,
        .chat-input-wrapper.ring-active::after {
            opacity: 1;
            animation: ringRotate 3s linear infinite;
        }

        @keyframes ringRotate {
            from {
                --ring-angle: 0deg;
            }

            to {
                --ring-angle: 360deg;
            }
        }

        @property --ring-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        /* ============================================================ 
           TOAST NOTIFICATIONS
           ============================================================ */
        #mm-toast-container {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .mm-toast {
            background: rgba(15, 9, 32, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(162, 155, 254, 0.3);
            color: #fff;
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 0.5px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            animation: toastSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            display: flex;
            align-items: center;
            gap: 12px;
            pointer-events: auto;
        }

        .mm-toast.fade-out {
            animation: toastSlideOut 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes toastSlideOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(20px);
            }
        }

        /* ============================================================
           SAYFA KAPSAYICI
           ============================================================ */
        .page-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            height: 100vh;
            padding: 45px 4% 0 4%;
            position: relative;
            z-index: 10;
            overflow: hidden;
        }

        /* ============================================================
           HEADER VE MENU KAPSAYICI
           ============================================================ */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: sticky;
            top: 12px;
            z-index: 100;
            min-height: clamp(60px, 10vh, 110px);
            margin-top: -30px;
        }

        .logo-area {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            padding-top: 0;
            flex-shrink: 0;
        }

        .logo-icon {
            width: clamp(38px, 4.5vw, 56px);
            height: clamp(38px, 4.5vw, 56px);
            object-fit: contain;
            mix-blend-mode: screen;
            filter: grayscale(100%);
        }

        .mobile-menu-toggle {
            display: none;
        }

        /* Masaüstünde Sağ Alanları Yöneten Kapsayıcı */
        .menu-overlay {
            display: flex;
            flex-grow: 1;
            justify-content: space-between;
            align-items: center;
            padding-left: 24px;
        }

        .top-nav {
            position: static;
            flex: 1;
            display: flex;
            gap: 16px;
            justify-content: center;
            align-items: center;
            margin-right: 60px;
            /* Shifted left from center */
        }

        .top-nav a {
            color: #ddd5ee;
            text-decoration: none;
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 0.4px;
            transition: color 0.3s;
            white-space: nowrap;
            min-width: 85px;
            text-align: center;
        }

        .top-nav a:hover {
            color: #ffffff;
        }

        .header-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            padding-right: 60px;
            /* Shifted left into the page */
        }

        /* ============================================================
           RESPONSIVE SCALING FOR MID-SIZE LAPTOPS (14 inch etc)
           Targets screens between 1025px and 1500px width.
           Ensures 15.6" (1920px) and Mobile (<1024px) remain untouched.
           ============================================================ */
        @media (min-width: 1025px) and (max-width: 1440px) {
            html {
                font-size: 14px;
            }

            .page-wrapper {
                padding-top: 45px !important;
                height: auto !important;
                min-height: 100vh !important;
                overflow-y: auto !important;
            }

            .header {
                min-height: 70px !important;
                margin-top: -30px !important;
                top: 13px !important;
            }

            .logo-icon {
                width: 44px !important;
                height: 44px !important;
            }

            .top-nav {
                gap: 12px !important;
                margin-right: 60px !important;
            }

            .header-right {
                gap: 10px !important;
                padding-right: 60px !important;
            }

            .btn-history-toggle {
                position: absolute !important;
                left: calc(-4vw + 12px) !important;
                padding: 6px 8px !important;
            }

            .center-brand-image {
                max-width: 500px !important;
                margin-top: 14px !important;
            }

            .input-section {
                max-width: 700px !important;
                margin-top: -10vh !important;
            }

            .bottom-nav {
                gap: 3vw !important;
                min-height: 100px !important;
                margin-top: 10px !important;
            }

            .main-content {
                margin-top: -12vh !important;
            }

            .nav-link {
                font-size: 15px !important;
            }

            /* Alt menü sorularını küçült - footer ile çakışmayı önle */
            .nav-detail h4 {
                font-size: 13px !important;
                margin-bottom: 10px !important;
            }

            .nav-detail ul li a {
                font-size: 12px !important;
                line-height: 1.4 !important;
            }


            /* Scale down footer link text */
            .site-footer {
                margin-top: 16px !important;
                font-size: 11px !important;
                gap: 20px !important;
                padding: 16px 0 0 0 !important;
            }
        }

        .btn-signup {
            padding: 9px 30px;
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 30px;
            color: #ffffff;
            text-decoration: none;
            font-size: 15px;
            font-weight: 300;
            transition: background 0.3s;
            cursor: pointer;
            background: transparent;
            white-space: nowrap;
            min-width: 160px;
            text-align: center;
        }

        .btn-signup:hover {
            background: rgba(255, 255, 255, 0.10);
        }

        .user-info {
            display: none;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 500;
            color: #fff;
            cursor: pointer;
            overflow: hidden;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
        }

        .btn-signout {
            padding: 7px 18px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 30px;
            color: #c8bed8;
            background: transparent;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-signout:hover {
            border-color: rgba(255, 255, 255, 0.7);
            color: #fff;
        }

        .system-name {
            font-size: 14px;
            font-weight: 400;
            background: linear-gradient(90deg,
                    #ffffff 0%,
                    #a29bfe 30%,
                    #ffffff 50%,
                    #fdcb6e 70%,
                    #ffffff 100%);
            background-size: 250% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shimmerText 5s linear infinite;
            letter-spacing: 0.5px;
            text-align: left;
            white-space: nowrap;
        }

        @keyframes shimmerText {
            0% {
                background-position: 200% center;
            }

            100% {
                background-position: -200% center;
            }
        }

        .notification-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: #ff4757;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            min-width: 14px;
            height: 14px;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
            border: 1px solid #07030e;
            pointer-events: none;
            z-index: 10;
        }

        .notification-badge.active {
            display: flex;
            animation: badgePulse 2s infinite;
        }

        @keyframes badgePulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
            }

            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 6px rgba(255, 71, 87, 0);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
            }
        }

        .notification-bell-btn {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #c8bed8;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            backdrop-filter: blur(10px);
        }

        .notification-bell-btn:hover {
            background: rgba(162, 155, 254, 0.1);
            border-color: rgba(162, 155, 254, 0.3);
            color: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .notification-bell-btn svg {
            transition: transform 0.3s ease;
        }

        .notification-bell-btn:hover svg {
            transform: rotate(15deg);
        }

        .notification-dropdown {
            position: absolute;
            top: 100%;
            right: -10px;
            width: 380px;
            background: linear-gradient(165deg, rgba(20, 14, 38, 0.75), rgba(10, 6, 22, 0.85));
            backdrop-filter: blur(45px) saturate(190%);
            -webkit-backdrop-filter: blur(45px) saturate(190%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            margin-top: 20px;
            box-shadow:
                0 40px 100px rgba(0, 0, 0, 0.7),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
            opacity: 0;
            visibility: hidden;
            transform: translateY(15px) scale(0.96);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 10000;
            overflow: hidden;
        }

        .notification-dropdown.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .notification-header {
            padding: 24px 28px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.02);
        }

        .notification-header h3 {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .notification-mark-all {
            font-size: 11px;
            font-weight: 600;
            color: #a29bfe;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(162, 155, 254, 0.05);
            border: 1px solid rgba(162, 155, 254, 0.1);
            padding: 6px 12px;
            border-radius: 20px;
        }

        .notification-mark-all:hover {
            color: #fff;
            background: rgba(162, 155, 254, 0.2);
            border-color: rgba(162, 155, 254, 0.4);
        }

        .notification-list {
            max-height: 480px;
            overflow-y: auto;
            padding: 12px 0;
        }

        .notification-list::-webkit-scrollbar {
            width: 5px;
        }

        .notification-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 10px;
        }

        /* ── Liste ── */
        .notification-list {
            padding: 6px 0;
        }

        .notification-item {
            padding: 13px 18px;
            display: flex;
            align-items: center;
            gap: 13px;
            cursor: pointer;
            transition: background 0.2s;
            position: relative;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .notification-item:last-child {
            border-bottom: none;
        }

        .notification-item:hover {
            background: rgba(255, 255, 255, 0.025);
        }

        .notification-item.unread {
            background: rgba(139, 133, 248, 0.04);
        }

        .notification-item.unread::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, #a29bfe 0%, #6c5ce7 100%);
            border-radius: 0 2px 2px 0;
        }

        /* ── Silme Butonu ── */
        .notification-delete-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.05);
            opacity: 0;
            transition: all 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 10;
        }

        .notification-item:hover .notification-delete-btn {
            opacity: 1;
            right: 15px;
        }

        .notification-delete-btn:hover {
            background: rgba(255, 107, 107, 0.15);
            color: #ff6b6b;
            border-color: rgba(255, 107, 107, 0.3);
        }

        /* ── İkon / Thumbnail Konteyner ── */
        .notification-visual {
            position: relative;
            width: 42px;
            height: 42px;
            flex-shrink: 0;
        }

        .notification-icon {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .notification-icon.type-like {
            background: rgba(255, 107, 107, 0.12);
            color: #ff6b6b;
        }

        .notification-icon.type-follow {
            background: rgba(162, 155, 254, 0.12);
            color: #a29bfe;
        }

        .notification-icon.type-inquiry {
            background: rgba(100, 223, 223, 0.10);
            color: #64dfdf;
        }

        .notification-icon.type-system {
            background: rgba(255, 200, 120, 0.10);
            color: #ffc878;
        }

        .notification-thumb-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #120a23;
        }

        /* Thumbnail varsa ikonu ufaltıp köşeye koyalım */
        .notification-visual.has-thumb .notification-icon {
            position: absolute;
            bottom: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            font-size: 8px;
            border: 2px solid #120a23;
            z-index: 2;
        }

        .notification-visual.has-thumb .notification-icon svg {
            width: 10px;
            height: 10px;
        }

        /* ── İçerik ── */
        .notification-content {
            flex: 1;
            min-width: 0;
            padding-right: 20px;
        }

        /* ── Boş Durum ── */
        .notification-empty {
            padding: 60px 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .notification-empty-icon {
            width: 54px;
            height: 54px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.04);
            margin-bottom: 4px;
        }

        .notification-empty-title {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 0.02em;
        }

        .notification-empty-text {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.15);
            max-width: 200px;
            line-height: 1.5;
        }

        /* ============================================================
           ANA İÇERİK
           ============================================================ */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: -5vh;
            transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
        }

        .main-content.chat-active {
            opacity: 0;
            transform: translateY(-40px) scale(0.95);
            pointer-events: none;
            filter: blur(8px);
        }

        .center-brand-image-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: -5vh;
            margin-top: 0;
        }

        .center-brand-image {
            max-width: 600px;
            width: clamp(280px, 55%, 600px);
            height: auto;
            mix-blend-mode: screen;
            filter: grayscale(100%) contrast(3.5) brightness(1.2);
            opacity: 0.95;
        }

        /* ============================================================
           INPUT BÖLÜMÜ
           ============================================================ */
        .input-section {
            width: 80%;
            max-width: 780px;
            position: relative;
            margin-bottom: 2%;
            margin-top: -10vh;
        }

        .powered-by {
            text-align: right;
            font-size: 8px;
            letter-spacing: 1.5px;
            color: #c8bed8;
            margin-bottom: 5px;
            padding-right: 16px;
            font-weight: 400;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 50px;
            padding: 5px 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            min-height: 60px;
        }

        .chat-left-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #888;
            font-size: 15px;
            padding-left: 16px;
            flex: 0 0 auto;
            cursor: pointer;
        }

        .chat-left-actions svg {
            color: #555;
            flex-shrink: 0;
        }

        .chat-center-input {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            flex: 1;
            min-width: 0;
            height: 100%;
        }

        .chat-title {
            font-family: 'Playfair Display', serif;
            font-size: 17px;
            color: #1a1a1a;
            margin-bottom: 1px;
        }

        .chat-main-input {
            border: none;
            outline: none;
            background: transparent;
            text-align: left;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: #444;
            width: 100%;
            padding: 0 8px;
            font-weight: 300;
            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
        }

        .chat-main-input.expanded-textarea {
            height: 110px;
            resize: none;
            overflow-y: auto;
            padding: 10px 8px;
            line-height: 1.5;
        }

        .chat-main-input::placeholder {
            color: #666;
            font-size: 15px;
        }

        .chat-right-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 13px;
            flex: 0 0 auto;
            padding-right: 5px;
        }

        .icon-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }

        .icon-btn:hover {
            transform: scale(1.08);
        }

        .mic-btn {
            color: #444;
            padding: 4px;
        }

        .voice-btn {
            background-color: #000;
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 50%;
        }

        .expand-btn {
            background: transparent;
            border: none;
            border-radius: 50%;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #888;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-right: 2px;
        }

        .expand-btn:hover {
            background: rgba(108, 92, 231, 0.1);
            color: #6c5ce7;
            transform: scale(1.1);
        }

        .expand-btn.is-expanded {
            background: rgba(108, 92, 231, 0.15);
            color: #6c5ce7;
        }

        /* when expanded, wrapper adjusts */
        .chat-input-wrapper.expanded-mode {
            align-items: flex-end;
            border-radius: 24px;
            transition: border-radius 0.35s ease;
            padding: 10px 12px;
        }

        /* ============================================================
           FOOTER VE ICONS
           ============================================================ */
        .site-footer {
            margin-top: 10px;
            /* Added gap to prevent overlap with bottom nav */
            padding: 20px 0 0 0;
            display: flex;
            justify-content: center;
            gap: 30px;
            font-size: 12px;
            color: rgba(200, 190, 216, 0.6);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 10;
        }

        .site-footer a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s;
        }

        .site-footer a:hover {
            color: #ffffff;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-right: 15px;
        }

        .social-icon {
            color: #ddd5ee;
            transition: color 0.3s, transform 0.3s;
            display: flex;
            align-items: center;
        }

        .social-icon:hover {
            color: #ffffff;
        }

        .lang-selector-wrap {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: 20px;
            z-index: 200;
        }

        .lang-menu-trigger {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid rgba(162, 155, 254, 0.35);
            border-radius: 50%;
            background: radial-gradient(ellipse at 30% 20%, rgba(162, 155, 254, 0.18), rgba(7, 4, 20, 0.92));
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 8px 28px rgba(0, 0, 0, 0.45);
            cursor: pointer;
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }

        .lang-menu-trigger:hover {
            border-color: rgba(183, 173, 255, 0.65);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 10px 32px rgba(108, 92, 231, 0.28);
            transform: translateY(-1px);
        }

        .lang-menu-trigger:focus-visible {
            outline: 2px solid rgba(162, 155, 254, 0.9);
            outline-offset: 3px;
        }

        .lang-menu-robot {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            filter: brightness(0.95);
            pointer-events: none;
        }

        .lang-menu-trigger:hover .lang-menu-robot {
            filter: brightness(1.08);
        }

        .lang-code-pill {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: rgba(220, 210, 250, 0.9);
            min-width: 2.5em;
            text-align: center;
            user-select: none;
            pointer-events: none;
        }

        .lang-hidden-select {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
            opacity: 0;
            pointer-events: none;
        }

        .lang-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            /* RTL: doğru “son” kenara yapışır; right: 0 solda kalınca paneli ekran dışına taşırırdı */
            inset-inline-end: 0;
            inset-inline-start: auto;
            min-width: 260px;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
            pointer-events: none;
        }

        .lang-selector-wrap.is-open .lang-dropdown:not([hidden]) {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .lang-dropdown-card {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(162, 155, 254, 0.28);
            background: linear-gradient(165deg, rgba(22, 14, 42, 0.98), rgba(10, 6, 22, 0.96));
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .lang-dropdown-list {
            display: flex;
            flex-direction: column;
            padding: 6px;
            gap: 3px;
        }

        .lang-dropdown-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.03);
            color: #f0eaff;
            font-size: 14px;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            text-align: start;
            transition: background 0.18s ease, color 0.18s ease;
        }

        .lang-dropdown-btn:hover {
            background: rgba(162, 155, 254, 0.14);
            color: #fff;
        }

        .lang-dropdown-btn.is-active {
            background: rgba(108, 92, 231, 0.28);
            box-shadow: 0 0 0 1px rgba(162, 155, 254, 0.35);
        }

        .lang-dropdown-name {
            flex: 1;
        }

        .lang-dropdown-code {
            font-size: 11px;
            letter-spacing: 0.14em;
            opacity: 0.65;
            font-weight: 600;
        }

        .lang-dropdown-btn.is-active .lang-dropdown-code {
            opacity: 0.95;
        }

        /* ArtCloud Dropdown in top-nav */
        .top-nav .artcloud-wrapper {
            position: relative;
            display: inline-block;
            min-width: 85px;
            text-align: center;
        }

        .top-nav .artcloud-wrapper>a {
            display: inline-block;
            width: 100%;
        }

        .artcloud-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-6px);
            background: none;
            border: none;
            padding: 12px 0 0 0;
            min-width: 120px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
            z-index: 9999;
            pointer-events: none;
            text-align: center;
        }

        /* Bridge so mouse can travel from link to dropdown without gap */
        .artcloud-dropdown::before {
            content: '';
            position: absolute;
            top: -16px;
            left: 0;
            right: 0;
            height: 16px;
        }

        .top-nav .artcloud-wrapper:hover .artcloud-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }

        .artcloud-dropdown a {
            display: block !important;
            padding: 7px 12px;
            color: #c8bed8 !important;
            text-decoration: none;
            font-size: 15px !important;
            font-weight: 300;
            letter-spacing: 0.4px;
            transition: color 0.2s;
            white-space: nowrap;
            min-width: unset !important;
        }

        .artcloud-dropdown a:hover {
            color: #ffffff !important;
        }

        /* ArtCloud submenu in mobile/left nav */
        .mobile-artcloud-sub {
            display: none;
            flex-direction: column;
            padding-left: 18px;
            margin-top: 6px;
            gap: 6px;
        }

        .mobile-artcloud-sub.open {
            display: flex;
        }

        .mobile-artcloud-sub a {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #9a8ebc;
            font-size: 13px;
            text-decoration: none;
            padding: 5px 0;
            transition: color 0.2s;
        }

        .mobile-artcloud-sub a:hover {
            color: #fff;
        }

        /* ============================================================
           ALT MENÜ (MASAÜSTÜ)
           ============================================================ */
        /* Desktop'ta Carousel butonları gizli */
        .mobile-carousel-controls {
            display: none;
        }

        .bottom-nav {
            display: flex;
            gap: 5vw;
            margin-top: 20px;
            justify-content: center;
            align-items: flex-start;
            min-height: 120px;
        }

        .nav-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .nav-link {
            color: #c8bed8;
            text-decoration: none;
            font-size: 18px;
            font-weight: 300;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 8px 0;
            display: inline-block;
        }

        .nav-item:hover .nav-link {
            color: #ffffff;
            transform: scale(1.4);
            font-weight: 700;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
        }

        .nav-item.active .nav-link {
            color: #ffffff;
            transform: scale(1.4);
            font-weight: 700;
            text-shadow: 0 0 15px rgba(162, 155, 254, 0.9), 0 0 30px rgba(108, 92, 231, 0.7);
            position: relative;
        }

        .nav-item.active .nav-link::before {
            content: "✦";
            position: absolute;
            top: -12px;
            right: -20px;
            color: #ffffff;
            font-size: 20px;
            font-weight: normal;
            line-height: 1;
            text-shadow: 0 0 15px #fff, 0 0 30px #a29bfe, 0 0 50px #6c5ce7;
            animation: starPulse 2.5s infinite ease-in-out;
            pointer-events: none;
            z-index: 10;
        }

        .nav-item.active .nav-link::after {
            content: "✦";
            position: absolute;
            bottom: -6px;
            left: -18px;
            color: #e8deff;
            font-size: 14px;
            font-weight: normal;
            line-height: 1;
            text-shadow: 0 0 10px #fff, 0 0 20px #a29bfe;
            animation: starPulse 2s infinite ease-in-out 1s;
            pointer-events: none;
            z-index: 10;
        }

        @keyframes starPulse {
            0% {
                opacity: 0.3;
                transform: scale(0.6) rotate(0deg);
            }

            50% {
                opacity: 1;
                transform: scale(1.3) rotate(45deg);
                text-shadow: 0 0 25px #ffffff, 0 0 50px #c5b8ff, 0 0 80px #8b7cf8;
            }

            100% {
                opacity: 0.3;
                transform: scale(0.6) rotate(90deg);
            }
        }

        .nav-detail {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: max-content;
            min-width: 450px;
            background: none;
            backdrop-filter: none;
            border: none;
            padding: 20px 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            z-index: 1000;
            pointer-events: auto;
        }

        .nav-detail::before {
            content: "";
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            height: 25px;
            background: transparent;
        }

        .nav-item:hover .nav-detail {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(5px);
        }

        .nav-detail h4 {
            font-size: 16px;
            color: #ffffff;
            margin-bottom: 20px;
            font-weight: 400;
            letter-spacing: 0.5px;
            text-align: center;
            opacity: 0.9;
        }

        .nav-detail ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        .nav-detail li {
            font-size: 14px;
            color: #c8bed8;
            line-height: 1.2;
            margin-bottom: 4px;
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .nav-detail li a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s;
            cursor: pointer;
            white-space: nowrap;
        }

        .nav-detail li a:hover {
            color: #ffffff;
        }

        .nav-detail li::before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 5px;
            margin-right: 10px;
            margin-bottom: 1px;
            border-radius: 1px;
            vertical-align: middle;
            background: linear-gradient(135deg, #e8e4ff 0%, #a29bfe 55%, #7c6ee0 100%);
            box-shadow: 0 0 8px rgba(162, 155, 254, 0.45);
            transform: rotate(45deg);
        }

        /* About üyelik listeleri — chat ile uyumlu elmas işaret */
        .mm-list-marker {
            position: absolute;
            left: 0;
            top: 0.38em;
            width: 5px;
            height: 5px;
            border-radius: 1px;
            background: linear-gradient(135deg, #dcd6ff 0%, #a29bfe 50%, #7c6ee0 100%);
            box-shadow: 0 0 6px rgba(162, 155, 254, 0.35);
            transform: rotate(45deg);
        }

        .sign-in-note {
            font-size: 14px;
            color: #8a7aaa;
            margin-top: 15px;
            text-align: center;
            opacity: 0.8;
        }

        /* ============================================================
           CHAT HISTORY SIDEBAR
           ============================================================ */

        /* --- SOHBET GEÇMİÅžİ DÜZENLEME VE SİLME BUTONLARI --- */
        .history-item {
            position: relative;
            /* Butonları sağa hizalamak için gerekli */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .history-item-content {
            flex: 1;
            min-width: 0;
            padding-right: 10px;
        }

        .h-actions {
            display: flex;
            gap: 4px;
            opacity: 0;
            /* Normalde gizli, üzerine gelince çıkacak */
            transition: opacity 0.2s ease;
        }

        /* Masaüstünde üzerine gelince butonları göster */
        .history-item:hover .h-actions {
            opacity: 1;
        }

        /* Mobilde hover çalışmadığı için butonlar hep hafif görünür olsun */
        @media (max-width: 600px) {
            .h-actions {
                opacity: 0.7;
            }
        }

        .h-action-btn {
            background: transparent;
            border: none;
            color: #8a7aaa;
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-action-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .h-action-btn.delete:hover {
            color: #fd79a8;
            /* Kırmızımsı pembe, silme uyarısı hissi */
            background: rgba(253, 121, 168, 0.15);
        }

        .history-sidebar {
            position: fixed;
            top: 0;
            left: -380px;
            width: 360px;
            height: 100vh;
            background: rgba(20, 15, 35, 0.25);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border-right: 1px solid rgba(255, 255, 255, 0.04);
            z-index: 9999;
            transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            display: flex;
            flex-direction: column;
        }

        .history-sidebar.open {
            left: 0;
        }

        .history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 20px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            background: linear-gradient(180deg, rgba(20, 15, 35, 0.3) 0%, transparent 100%);
        }

        .history-header h3 {
            font-size: 15px;
            font-weight: 400;
            color: #e8deff;
            letter-spacing: 0.5px;
        }

        .btn-close-history {
            background: none;
            border: none;
            color: #888;
            cursor: pointer;
            padding: 4px;
            transition: color 0.2s;
            font-size: 22px;
            line-height: 1;
        }

        .btn-close-history:hover {
            color: #fff;
        }

        .history-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 0;
        }

        .history-list::-webkit-scrollbar {
            width: 4px;
        }

        .history-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .history-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
        }

        .history-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.02);
            border-left: 2px solid transparent;
        }

        .history-item:hover {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
            border-left: 2px solid rgba(162, 155, 254, 0.6);
            border-bottom-color: transparent;
        }

        .history-item .h-title {
            font-size: 13px;
            color: #d0c8e8;
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .history-item .h-date-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 3px;
        }

        .history-item .h-date {
            font-size: 11px;
            color: #5a5070;
        }

        .history-item .h-mode {
            font-size: 9px;
            /* İstediğin gibi küçük font */
            color: #8a7aaa;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .history-empty {
            padding: 40px 20px;
            text-align: center;
            color: #4a4060;
            font-size: 13px;
        }

        .btn-new-chat {
            margin: 16px 20px;
            padding: 12px;
            background: linear-gradient(135deg, rgba(162, 155, 254, 0.1), rgba(162, 155, 254, 0.02));
            border: 1px solid rgba(162, 155, 254, 0.2);
            border-radius: 12px;
            color: #dcd6eb;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
            backdrop-filter: blur(10px);
        }

        .btn-new-chat:hover {
            background: linear-gradient(135deg, rgba(162, 155, 254, 0.2), rgba(162, 155, 254, 0.05));
            border-color: rgba(162, 155, 254, 0.4);
            color: #fff;
            box-shadow: 0 4px 15px rgba(162, 155, 254, 0.1);
        }

        .btn-history-toggle {
            position: absolute;
            left: calc(-4vw + 18px);
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            color: #c8bed8;
            padding: 8px 10px;
            cursor: pointer;
            transition: all 0.3s;
            display: none;
        }

        .btn-history-toggle:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(7, 3, 14, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s;
        }

        .sidebar-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        /* ============================================================
           AUTH MODAL
           ============================================================ */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-overlay.open {
            display: flex;
        }

        /* ============================================================ 
           OTP VERIFICATION MODAL (Maison Mattia Aesthetic)
           ============================================================ */
        .otp-overlay {
            position: fixed;
            inset: 0;
            background: rgba(7, 3, 14, 0.95);
            backdrop-filter: blur(25px);
            z-index: 200000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .otp-overlay.open {
            display: flex;
            opacity: 1;
        }

        .otp-container {
            background: linear-gradient(145deg, #0f0c1b, #07040f);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 32px;
            padding: 48px 40px;
            max-width: 460px;
            width: 100%;
            text-align: center;
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.03);
            animation: otpSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes otpSlideUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .otp-title {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            color: #ffffff;
            font-weight: 400;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }

        .otp-subtext {
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: rgba(255, 255, 255, 0.55);
            line-height: 1.6;
            margin-bottom: 40px;
            font-weight: 300;
        }

        .otp-input-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 40px;
        }

        .otp-digit {
            width: 54px;
            height: 68px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            color: #fff;
            font-size: 28px;
            font-family: 'Inter', sans-serif;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .otp-digit:focus {
            outline: none;
            border-color: #ffffff;
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
        }

        .otp-digit.filled {
            border-color: rgba(255, 255, 255, 0.4);
        }

        .otp-footer {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.35);
        }

        .btn-resend {
            color: #ffffff;
            background: none;
            border: none;
            font-weight: 500;
            cursor: pointer;
            margin-left: 4px;
            transition: all 0.3s;
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        .btn-resend:hover {
            color: #fff;
        }

        .btn-resend:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            text-decoration: none;
        }

        /* ============================================================
           RESEARCH COMING SOON MODAL
           ============================================================ */
        .research-soon-overlay {
            position: fixed;
            inset: 0;
            background: rgba(7, 3, 14, 0.9);
            backdrop-filter: blur(20px);
            z-index: 200000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .research-soon-overlay.open {
            display: flex;
            opacity: 1;
        }

        .research-soon-container {
            background: linear-gradient(145deg, #0f0c1b, #07040f);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 28px;
            padding: 40px;
            max-width: 440px;
            width: 100%;
            text-align: center;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
            position: relative;
        }

        .research-soon-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.3);
            font-size: 24px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .research-soon-close:hover {
            color: #fff;
        }

        .research-soon-icon {
            width: 60px;
            height: 60px;
            background: rgba(162, 155, 254, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            color: #a29bfe;
        }

        .research-soon-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            color: #fff;
            margin-bottom: 12px;
        }

        .research-soon-body {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .research-soon-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 16px;
            color: #fff;
            font-family: inherit;
            font-size: 14px;
            margin-bottom: 16px;
            text-align: center;
            transition: all 0.3s;
        }

        .research-soon-input:focus {
            outline: none;
            border-color: #a29bfe;
            background: rgba(162, 155, 254, 0.05);
        }

        .research-soon-btn {
            width: 100%;
            background: #fff;
            color: #000;
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .research-soon-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .otp-error-msg {
            color: #ff7675;
            font-size: 13px;
            margin-top: 16px;
            min-height: 20px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .otp-error-msg.visible {
            opacity: 1;
        }

        @keyframes otpShake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-10px);
            }

            75% {
                transform: translateX(10px);
            }
        }

        .modal-box {
            background: linear-gradient(145deg, #0f0920, #130d28);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px 44px;
            width: 100%;
            max-width: 420px;
            position: relative;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 20px;
            background: none;
            border: none;
            color: #666;
            font-size: 24px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .modal-logo {
            text-align: center;
            margin-bottom: 40px;
        }

        .modal-logo .brand {
            font-family: 'Playfair Display', serif;
            font-size: 34px;
            color: #fff;
            letter-spacing: 2px;
            font-weight: 400;
            text-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
        }

        .modal-logo .sub {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.35);
            letter-spacing: 4px;
            margin-top: 8px;
            text-transform: uppercase;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            font-size: 11px;
            color: #a29bfe;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .form-group input {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 14px 18px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            transition: all 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #6c5ce7;
            background: rgba(108, 92, 231, 0.05);
            box-shadow: 0 0 15px rgba(108, 92, 231, 0.1);
        }

        .btn-auth-submit {
            width: 100%;
            background: linear-gradient(135deg, #6c5ce7, #8b7cf8);
            color: #fff;
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            margin-top: 10px;
            font-family: 'Inter', sans-serif;
        }

        .btn-auth-submit:hover:not(:disabled) {
            box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4);
            filter: brightness(1.1);
        }

        .btn-auth-submit:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .auth-footer {
            margin-top: 32px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.35);
        }

        .btn-link {
            background: none;
            border: none;
            color: #a29bfe;
            font-weight: 600;
            cursor: pointer;
            padding: 4px 8px;
            margin-left: 2px;
            transition: all 0.3s;
            text-decoration: underline;
            text-underline-offset: 4px;
            border-radius: 6px;
        }

        .btn-link:hover {
            color: #fff;
            background: rgba(108, 92, 231, 0.1);
        }

        .auth-message {
            margin-top: 16px;
            font-size: 13px;
            text-align: center;
            min-height: 20px;
            color: rgba(255, 255, 255, 0.6);
        }

        .auth-message.error {
            color: #ff7675;
        }

        .auth-message.success {
            color: #55efc4;
        }

        /* ============================================================
           PREMIUM ONBOARDING WIZARD — FULL DESIGN SYSTEM
           ============================================================ */
        @keyframes wizScaleIn {
            from {
                transform: scale(0.94) translateY(20px);
                opacity: 0;
            }

            to {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        #onboardingWizard {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(7, 3, 14, 0.98);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            z-index: 1000000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        #onboardingWizard.open {
            display: flex;
        }

        .wizard-card {
            background: linear-gradient(145deg, #0f0c1b, #07040f);
            border: 1px solid rgba(108, 92, 231, 0.25);
            border-radius: 36px;
            width: 100%;
            max-width: 580px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 60px 50px 40px;
            position: relative;
            box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8), 0 0 60px rgba(108, 92, 231, 0.05);
            animation: wizScaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            scrollbar-width: none;
        }

        .wizard-card::-webkit-scrollbar {
            display: none;
        }

        .wizard-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, #6c5ce7, #a29bfe);
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.6);
            border-radius: 0 2px 2px 0;
        }

        /* ---- Step header ---- */
        .wiz-step {
            animation: wizScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .wiz-eyebrow {
            font-size: 10px;
            font-weight: 800;
            color: #6c5ce7;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .wiz-subtitle {
            font-size: 13px;
            line-height: 1.55;
            color: rgba(255, 255, 255, 0.48);
            margin: -6px 0 22px 0;
            font-weight: 400;
            letter-spacing: 0.2px;
        }

        .wiz-role-grid--8 {
            grid-template-columns: 1fr 1fr;
        }

        .market-flag--icon {
            font-size: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            margin-bottom: 8px;
            color: rgba(255, 255, 255, 0.55);
        }

        .market-flag--icon svg {
            width: 28px;
            height: 28px;
        }

        .market-card.selected .market-flag--icon {
            color: #a29bfe;
        }

        .welcome-overlay {
            position: fixed;
            inset: 0;
            z-index: 10050;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(8, 8, 14, 0.88);
            backdrop-filter: blur(12px);
            padding: 24px;
        }

        .welcome-overlay.open {
            display: flex;
        }

        .welcome-card {
            max-width: 480px;
            width: 100%;
            text-align: center;
            position: relative;
        }

        .welcome-close {
            position: absolute;
            top: 8px;
            right: 8px;
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.5);
            font-size: 24px;
            cursor: pointer;
            line-height: 1;
        }

        .welcome-enter-btn {
            width: 100%;
            margin-top: 8px;
        }

        .welcome-edit-link {
            display: block;
            margin: 16px auto 0;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.45);
            font-size: 12px;
            cursor: pointer;
            text-decoration: underline;
            font-family: 'Inter', sans-serif;
        }

        .welcome-start-block {
            margin-top: 28px;
            padding-top: 22px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .welcome-start-label {
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 12px;
        }

        .welcome-start-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .welcome-start-link {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 12px 16px;
            color: rgba(255, 255, 255, 0.75);
            font-size: 12px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Inter', sans-serif;
        }

        .welcome-start-link:hover {
            border-color: rgba(108, 92, 231, 0.45);
            color: #fff;
            background: rgba(108, 92, 231, 0.1);
        }

        .wiz-title {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            color: #fff;
            margin-bottom: 32px;
            line-height: 1.2;
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        /* ---- Inputs ---- */
        .wiz-input-group {
            margin-bottom: 20px;
        }

        .wiz-input-group label {
            display: block;
            font-size: 10px;
            font-weight: 700;
            color: #a29bfe;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .wiz-input-group input,
        .wiz-input-group textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(108, 92, 231, 0.2);
            border-radius: 14px;
            padding: 14px 18px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            transition: all 0.3s ease;
            outline: none;
            box-sizing: border-box;
        }

        .wiz-input-group input::placeholder,
        .wiz-input-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.2);
            font-size: 13px;
        }

        .wiz-input-group input:focus,
        .wiz-input-group textarea:focus {
            border-color: #6c5ce7;
            background: rgba(108, 92, 231, 0.07);
            box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
        }

        .wiz-input-group textarea {
            resize: vertical;
            min-height: 100px;
            line-height: 1.6;
        }

        /* ---- Section label ---- */
        .wiz-label {
            font-size: 10px;
            font-weight: 700;
            color: #a29bfe;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 14px;
            margin-top: 4px;
        }

        /* ---- Role grid ---- */
        .wiz-role-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 8px;
        }

        .wiz-autocomplete-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #1a1a2e;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            max-height: 180px;
            overflow-y: auto;
            z-index: 200;
            display: none;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            margin-top: 5px;
        }

        .wiz-autocomplete-dropdown.active {
            display: block;
        }

        .wiz-autocomplete-item {
            padding: 8px 12px;
            font-size: 13px;
            color: #ccc;
            cursor: pointer;
            text-align: left;
        }

        .wiz-autocomplete-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .wiz-location-field {
            flex: 1;
            position: relative;
        }

        .role-btn,
        button.role-btn {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 14px 16px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            cursor: pointer;
            text-align: center;
            transition: all 0.25s ease;
            font-family: 'Inter', sans-serif;
            width: 100%;
            appearance: none;
            -webkit-appearance: none;
        }

        button.role-btn {
            margin: 0;
        }

        .role-btn:hover {
            background: rgba(108, 92, 231, 0.08);
            border-color: rgba(108, 92, 231, 0.4);
            color: #fff;
        }

        .role-btn.selected {
            background: rgba(108, 92, 231, 0.15);
            border-color: #6c5ce7;
            color: #fff;
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
        }

        /* ---- Tag cloud ---- */
        .wiz-tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }

        .tag-chip {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            padding: 7px 16px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.55);
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
        }

        .tag-chip:hover {
            border-color: rgba(108, 92, 231, 0.5);
            color: #fff;
            background: rgba(108, 92, 231, 0.08);
        }

        .tag-chip.selected {
            background: #6c5ce7;
            border-color: #6c5ce7;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(108, 92, 231, 0.35);
        }

        button.tag-chip {
            appearance: none;
            -webkit-appearance: none;
            margin: 0;
        }

        /* ---- Market grid ---- */
        .wiz-market-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .market-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 18px 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .market-flag {
            font-size: 28px;
            margin-bottom: 8px;
        }

        .market-name {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .market-card:hover {
            background: rgba(108, 92, 231, 0.08);
            border-color: rgba(108, 92, 231, 0.3);
        }

        .market-card:hover .market-name {
            color: #fff;
        }

        .market-card.selected {
            background: rgba(108, 92, 231, 0.15);
            border-color: #6c5ce7;
            box-shadow: 0 8px 25px rgba(108, 92, 231, 0.2);
        }

        .market-card.selected .market-name {
            color: #a29bfe;
        }

        /* ---- Nav buttons ---- */
        .wizard-nav {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .btn-wizard {
            border: none;
            border-radius: 14px;
            padding: 14px 32px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .btn-wiz-prev {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .btn-wiz-prev:hover {
            background: rgba(255, 255, 255, 0.09);
            color: #fff;
        }

        .btn-wiz-next {
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            color: #fff;
            box-shadow: 0 8px 25px rgba(108, 92, 231, 0.35);
            min-width: 120px;
        }

        .btn-wiz-next:hover:not(:disabled) {
            box-shadow: 0 14px 35px rgba(108, 92, 231, 0.5);
            filter: brightness(1.1);
        }

        .btn-wiz-next:disabled {
            opacity: 0.3;
            pointer-events: none;
            filter: grayscale(0.8);
        }

        /* OTP inside wizard */
        #onboardingWizard .otp-input-group {
            justify-content: center;
            margin: 24px 0 8px;
        }

        /* Error messages inside wizard */
        #onboardingWizard .otp-error-msg {
            text-align: center;
            margin-top: 12px;
            font-size: 13px;
        }


        /* ============================================================
           CHAT PANEL
           ============================================================ */
        .chat-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            background: rgba(7, 3, 14, 0.35);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            z-index: 5000;
            display: flex;
            flex-direction: column;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
        }

        .chat-panel.open {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        .chat-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            background: linear-gradient(180deg, rgba(7, 3, 14, 0.4) 0%, transparent 100%);
            padding-top: max(16px, env(safe-area-inset-top));
        }

        .chat-panel-title {
            font-family: 'Playfair Display', serif;
            font-size: 16px;
            color: #e8deff;
        }

        .btn-back {
            background: none;
            border: none;
            color: #888;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
            font-family: 'Inter', sans-serif;
            padding: 8px;
            margin: -8px;
        }

        .btn-back:hover {
            color: #fff;
        }

        .chat-messages-area {
            flex: 1;
            overflow-y: auto;
            padding: 24px 10%;
            display: flex;
            flex-direction: column;
            gap: 20px;
            -webkit-overflow-scrolling: touch;
        }

        .chat-messages-area::-webkit-scrollbar {
            width: 4px;
        }

        .chat-messages-area::-webkit-scrollbar-track {
            background: transparent;
        }

        .chat-messages-area::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
        }

        .btn-scroll-bottom {
            position: absolute;
            bottom: 90px;
            right: 50%;
            transform: translateX(50%) translateY(20px);
            background: rgba(108, 92, 231, 0.8);
            border: 1px solid rgba(162, 155, 254, 0.4);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 5010;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        }

        .btn-scroll-bottom.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(50%) translateY(0);
        }

        .btn-scroll-bottom:hover {
            background: rgba(108, 92, 231, 1);
            transform: translateX(50%) translateY(-2px);
        }

        .msg {
            max-width: 680px;
            padding: 14px 20px;
            border-radius: 14px;
            font-size: 14px;
            line-height: 1.6;
        }

        .msg.user {
            align-self: flex-end;
            background: linear-gradient(135deg, rgba(230, 230, 250, 0.08), rgba(230, 230, 250, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #fff;
            border-radius: 20px 20px 4px 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
        }

        .msg.assistant {
            align-self: flex-start;
            background: transparent;
            border: none;
            border-left: 2px solid rgba(162, 155, 254, 0.6);
            color: #dcd6eb;
            border-radius: 0;
            padding-left: 18px;
        }

        /* AI Mesajlarındaki Linklerin Şık Tasarımı (Pavyon Lacivertinden Kurtulma) */
        .msg.assistant a {
            color: #a29bfe;
            /* Menüdeki hafif açık mor/leylak rengi */
            text-decoration: none;
            /* Alt çizgiyi kaldırıyoruz, daha temiz dursun */
            font-weight: 500;
            /* Biraz daha belirgin olsun */
            border-bottom: 1px dashed rgba(162, 155, 254, 0.4);
            /* Kesik alt çizgi ekleyelim, link olduğu anlaşılsın */
            transition: all 0.3s ease;
        }

        .msg.assistant a:hover {
            color: #ffffff;
            /* Üzerine gelince parlasın */
            border-bottom-color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 0 10px rgba(162, 155, 254, 0.7);
            /* Masaüstünde glow efekti */
        }

        .msg.loading {
            align-self: flex-start;
            background: rgba(255, 255, 255, 0.02);
            border: none;
            border-left: 2px solid rgba(162, 155, 254, 0.6);
            color: #dcd6eb;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 16px 22px;
            min-height: 48px;
            border-radius: 0;
        }

        .typing-dots-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 8px 0;
        }

        .typing-dots-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ── Koyu zemin varyantı ── */
        .loading-intelligence-text {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 13.5px;
            font-style: italic;
            color: rgba(255, 255, 255, 0.55);
            letter-spacing: 0.6px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            animation: intelligenceFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .loading-intelligence-text .loader-icon {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            animation: loaderSpin 1.2s linear infinite;
        }

        .loading-intelligence-text .loader-icon svg {
            stroke: rgba(255, 255, 255, 0.5);
        }

        /* ── Açık zemin varyantı ── */
        .loading-intelligence-text--light {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 13.5px;
            font-style: italic;
            color: rgba(0, 0, 0, 0.38);
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            animation: intelligenceFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .loading-intelligence-text--light .loader-icon svg {
            stroke: rgba(0, 0, 0, 0.3);
        }

        /* ── Animasyonlar ── */
        @keyframes loaderSpin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        #loadingMsg {
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        #loadingMsg.fade-out { opacity: 0; transform: translateY(-4px); }
        #loadingMsg.fade-in  { opacity: 1; transform: translateY(0); }

        @keyframes intelligenceFadeIn {
            from { opacity: 0; transform: translateY(5px); filter: blur(2px); }
            to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #a29bfe;
            border-radius: 50%;
            animation: typingBounce 1.4s infinite ease-in-out both;
        }

        .typing-dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes typingBounce {

            0%,
            80%,
            100% {
                transform: scale(0);
                opacity: 0.3;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .msg.assistant h1,
        .msg.assistant h2,
        .msg.assistant h3 {
            margin-top: 16px;
            margin-bottom: 10px;
            color: #ffffff;
            font-family: 'Playfair Display', serif;
            font-weight: normal;
        }

        .msg.assistant h2 {
            font-size: 1.15em;
        }

        .msg.assistant h3 {
            font-size: 1.05em;
        }

        .msg.assistant ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 14px;
        }

        .msg.assistant ul li {
            position: relative;
            padding-left: 18px;
            margin-bottom: 6px;
        }

        .msg.assistant ul li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 5px;
            height: 5px;
            border-radius: 1px;
            background: linear-gradient(135deg, #dcd6ff 0%, #a29bfe 50%, #7c6ee0 100%);
            box-shadow: 0 0 6px rgba(162, 155, 254, 0.35);
            transform: rotate(45deg);
        }

        .msg.assistant ol {
            padding-left: 22px;
            margin-bottom: 14px;
            list-style: none;
            counter-reset: mm-ol;
        }

        .msg.assistant ol li {
            position: relative;
            padding-left: 8px;
            margin-bottom: 6px;
            counter-increment: mm-ol;
        }

        .msg.assistant ol li::before {
            content: counter(mm-ol, decimal) ".";
            position: absolute;
            left: -22px;
            top: 0;
            min-width: 1.2em;
            font-size: 0.72em;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #a29bfe;
            opacity: 0.9;
        }

        .msg.assistant strong {
            color: #fff;
            font-weight: 600;
        }

        .msg.assistant p {
            margin-bottom: 12px;
        }

        .msg.assistant p:last-child {
            margin-bottom: 0;
        }

        .msg.assistant hr {
            border: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin: 20px 0;
        }

        .user-dropdown-card {
            position: absolute;
            top: calc(100% + 15px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 220px;
            background: rgba(20, 15, 35, 0.6);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            z-index: 10000;
        }

        .user-dropdown-card.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .dropdown-email {
            font-size: 13px;
            color: #a29bfe;
            margin-bottom: 12px;
            word-break: break-all;
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        .dropdown-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.05);
            margin: 12px 0;
        }

        .btn-signout-dropdown {
            width: 100%;
            padding: 8px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #ff7675;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-signout-dropdown:hover {
            background: rgba(255, 118, 117, 0.1);
            border-color: #ff7675;
        }

        .msg.assistant.is-typing>*:last-child::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 1.2em;
            background: rgba(162, 155, 254, 0.7);
            animation: typingCursorBlink 1s step-end infinite;
            vertical-align: text-bottom;
            margin-left: 4px;
        }

        @keyframes typingCursorBlink {
            50% {
                opacity: 0;
            }
        }

        .msg.assistant table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            overflow: hidden;
            font-size: 13px;
        }

        .msg.assistant th,
        .msg.assistant td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .msg.assistant th {
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            font-weight: 500;
        }

        .msg.assistant tr:last-child td {
            border-bottom: none;
        }

        .chat-input-bar {
            padding: 16px 10%;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            display: flex;
            gap: 12px;
            background: linear-gradient(0deg, rgba(7, 3, 14, 0.5) 0%, transparent 100%);
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }

        .chat-input-bar input {
            flex: 1;
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            color: #fff;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            outline: none;
        }

        .chat-input-bar input:focus {
            border-color: rgba(108, 92, 231, 0.5);
        }

        .btn-send {
            padding: 12px 24px;
            background: rgba(108, 92, 231, 0.7);
            border: none;
            border-radius: 30px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Inter', sans-serif;
            white-space: nowrap;
            min-height: 44px;
        }

        .btn-send:hover {
            background: rgba(108, 92, 231, 1);
        }

        .chat-mode-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 40px;
            padding: 4px;
            margin-right: 8px;
            overflow: hidden;
            position: relative;
        }

        .chat-mode-btn {
            background: transparent;
            border: none;
            color: #8a7aaa;
            padding: 6px 14px;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            border-radius: 30px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            position: relative;
            z-index: 2;
        }

        .chat-mode-btn.active {
            color: #fff;
            text-shadow: 0 0 10px rgba(162, 155, 254, 0.5);
        }

        .chat-mode-selector .slider {
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: 4px;
            width: 0;
            background: linear-gradient(135deg, rgba(108, 92, 231, 0.4), rgba(162, 155, 254, 0.2));
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        /* ============================================================
           MAINTENANCE PANEL
           ============================================================ */
        .maintenance-panel {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(7, 3, 14, 0.4);
            backdrop-filter: blur(8px);
            z-index: 6000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        .maintenance-panel.open {
            display: flex;
        }

        .maintenance-content {
            max-width: 500px;
            padding: 40px;
        }

        .maintenance-msg {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            color: #ffffff;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        .maintenance-sub {
            font-size: 16px;
            color: #c8bed8;
            margin-bottom: 40px;
            font-weight: 300;
        }

        .btn-maintenance-back {
            padding: 12px 35px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 30px;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-maintenance-back:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: #ffffff;
        }

        /* ============================================================
           CONTENT PANEL (VAULT & ARTPOOL)
           ============================================================ */
        .content-panel {
            display: none;
            position: fixed;
            inset: 0;
            background-color: #07030e;
            z-index: 9999;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
            animation: slideUp 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        #contentPanel-about {
            background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('images/about_bg.jpg') center/cover no-repeat !important;
        }

        #contentPanel-artpool {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/artpool_bg.jpg') center/cover no-repeat !important;
        }

        #contentPanel-matches {
            background: linear-gradient(rgba(7, 3, 14, 0.92), rgba(15, 9, 32, 0.95)), url('images/vault_bg.jpg') center/cover no-repeat !important;
        }

        .matches-coming-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 28px 80px;
            text-align: center;
            max-width: 560px;
            margin: 0 auto;
        }

        .matches-coming-body h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(28px, 5vw, 40px);
            color: #e8deff;
            letter-spacing: 0.12em;
            margin-bottom: 24px;
        }

        .matches-coming-body p {
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            line-height: 1.65;
            color: rgba(232, 222, 255, 0.72);
            font-weight: 300;
        }

        .vault-loader {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(162, 155, 254, 0.1);
            border-top: 2px solid #a29bfe;
            border-radius: 50%;
            animation: vaultSpin 1s linear infinite;
        }

        .match-score-badge {
            transition: all 0.3s ease;
        }

        .artwork-card:hover .match-score-badge {
            background: #a29bfe !important;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(108, 92, 231, 0.4);
        }

        #contentPanel-projects {
            background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('images/projects_bg.jpg') center/cover no-repeat !important;
        }

        #contentPanel-vault {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/vault_bg.jpg') center/cover no-repeat !important;
        }

        .content-panel.open {
            display: flex;
        }

        @keyframes slideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .content-panel-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 30px 40px;
            background: transparent;
            z-index: 100;
        }

        .panel-title-text {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            color: #111111;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .content-panel-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            align-items: center;
            padding-top: 80px;
        }

        /* NEW PANEL UI CLASSES */
        .panel-side-tools {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 50px;
            z-index: 50;
        }

        .panel-side-tools svg {
            width: 76px;
            height: 76px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .panel-side-tools svg:hover {
            transform: scale(1.15);
        }

        /* ArtPool Progress Bar */
        .artpool-progress-bar-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.05);
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .artpool-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #6c5ce7, #a29bfe, #55efc4);
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(108, 92, 231, 0.5);
        }

        /* ArtPool Filter Sidebar */
        .artpool-filter-sidebar {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 300px;
            background: rgba(7, 3, 15, 0.95);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 105;
            padding: 80px 24px 24px 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

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

        .filter-section h4 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 12px;
        }

        .filter-chip {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 12px;
            color: #fff;
            margin: 0 8px 8px 0;
            cursor: pointer;
            transition: all 0.2s;
        }

        .filter-chip:hover,
        .filter-chip.active {
            background: rgba(162, 155, 254, 0.2);
            border-color: #a29bfe;
            color: #a29bfe;
        }

        .panel-user-icon {
            position: absolute;
            top: 30px;
            right: 180px;
            /* offset from close button */
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 50;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
        }

        .panel-user-icon svg {
            width: 24px;
            height: 24px;
            stroke: rgba(255, 255, 255, 0.8);
            fill: none;
            stroke-width: 1.5;
        }

        .panel-user-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
        }

        .panel-user-icon:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        .panel-bottom-links {
            margin-top: auto;
            margin-bottom: 0px;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 50px;
            z-index: 50;
            padding: 50px 60px 40px 60px;
            position: relative;
        }

        .panel-bottom-links::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            mask-image: linear-gradient(to top, black 40%, transparent 100%);
            -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
            z-index: -1;
            pointer-events: none;
        }

        .panel-bottom-links a {
            font-family: 'Inter', sans-serif;
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            text-align: center;
            position: relative;
            padding: 4px 0;
        }

        .panel-bottom-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: #ffffff;
            transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

        .panel-bottom-links a:hover {
            color: #ffffff !important;
            letter-spacing: 3px;
            text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
        }

        .panel-bottom-links a:hover::after {
            width: 100%;
        }

        .panel-bottom-links.artpool-links {
            justify-content: center;
            column-gap: 50px;
            width: 100%;
        }

        .panel-bottom-links.artpool-links a {
            flex: 0 0 auto;
            min-width: unset;
            font-size: clamp(13px, 1.35vw, 17px);
            letter-spacing: 0.16em;
            font-weight: 700;
        }

        /* Vault: sol menü — daha belirgin başlıklar */
        #contentPanel-vault .vault-side-tools {
            gap: 26px;
            padding-top: 22px;
            left: 22px;
        }

        #contentPanel-vault .vault-side-nav-item {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            color: rgba(245, 240, 255, 0.9);
            font-size: clamp(14px, 1.3vw, 18px);
            font-weight: 800;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            font-family: 'Inter', sans-serif;
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.75),
                0 0 14px rgba(0, 0, 0, 0.35);
            padding: 12px 18px;
            border-radius: 12px;
            border: 1px solid rgba(162, 155, 254, 0.28);
            background: transparent;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transform-origin: left center;
            transition:
                color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        #contentPanel-vault .vault-side-nav-item::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(105deg,
                    rgba(108, 92, 231, 0.16) 0%,
                    rgba(162, 155, 254, 0.06) 45%,
                    transparent 72%);
            opacity: 0;
            transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
        }

        #contentPanel-vault .vault-side-nav-item::after {
            content: "";
            position: absolute;
            left: 0;
            top: 12%;
            bottom: 12%;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, #a29bfe, #6c5ce7);
            opacity: 0;
            transform: scaleY(0.35);
            transform-origin: center top;
            transition:
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
            pointer-events: none;
            box-shadow: 0 0 12px rgba(162, 155, 254, 0.45);
        }

        #contentPanel-vault .vault-side-nav-item:hover {
            color: #fff;
            border-color: rgba(200, 190, 255, 0.55);
            background: rgba(12, 8, 28, 0.35);
            transform: translateX(4px);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 8px 24px rgba(0, 0, 0, 0.22),
                0 0 28px rgba(108, 92, 231, 0.12);
        }

        #contentPanel-vault .vault-side-nav-item:hover::before {
            opacity: 1;
        }

        #contentPanel-vault .vault-side-nav-item:hover::after {
            opacity: 0.95;
            transform: scaleY(1);
        }

        .panel-bottom-links.vault-bottom-links a {
            flex: 0 0 auto;
            min-width: unset;
            font-size: clamp(13px, 1.35vw, 17px);
            letter-spacing: 0.16em;
            font-weight: 700;
        }

        .panel-search-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 80%;
            max-width: 600px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index: 60;
        }

        .panel-search-overlay.active {
            opacity: 1;
            pointer-events: all;
            transform: translate(-50%, -50%) scale(1);
        }

        .panel-search-input {
            width: 100%;
            padding: 20px 30px;
            font-size: 24px;
            font-family: 'Playfair Display', serif;
            border: 2px solid rgba(255, 255, 255, 0.7);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border-radius: 40px;
            backdrop-filter: blur(15px);
            outline: none;
            text-align: center;
        }

        .panel-search-input::placeholder {
            color: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 768px) {
            .content-panel-header {
                padding: 15px 20px;
            }

            .panel-title-text {
                font-size: 18px;
            }

            .panel-side-tools {
                left: 15px;
                gap: 25px;
            }

            .panel-side-tools svg {
                width: 32px;
                height: 32px;
            }

            .panel-user-icon {
                top: 20px;
                right: 90px;
                width: 38px;
                height: 38px;
            }

            .panel-bottom-links {
                margin-bottom: 0px;
                width: 100%;
                padding: 40px 10px 20px 10px;
                gap: 20px;
                justify-content: center;
            }

            .panel-bottom-links a {
                font-size: 11px;
            }

            .panel-bottom-links.vault-bottom-links a {
                font-size: clamp(12px, 3.4vw, 15px);
            }

            #contentPanel-vault .vault-side-tools {
                left: 12px;
                gap: 16px;
            }

            #contentPanel-vault .vault-side-nav-item {
                font-size: clamp(11px, 3vw, 14px);
                padding: 10px 12px;
                letter-spacing: 0.16em;
            }
        }

        /* ============================================================
           RESEARCH PANEL SPECIFIC STYLES
           ============================================================ */
        .content-panel-body.research-body {
            padding: 120px 8% 80px 8%;
            align-items: stretch;
        }

        .research-header {
            text-align: left;
            margin-bottom: 60px;
            border-left: 3px solid #6c5ce7;
            padding-left: 24px;
        }

        .research-header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 48px;
            font-weight: 400;
            letter-spacing: 2px;
            color: #ffffff;
            margin-bottom: 8px;
        }

        .research-header .premium-tag {
            font-size: 14px;
            letter-spacing: 3px;
            color: #a29bfe;
            font-weight: 500;
            text-transform: uppercase;
        }

        .research-section {
            margin-bottom: 80px;
        }

        .research-section-title {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            color: #ffffff;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 15px;
            opacity: 0.9;
        }

        .research-section-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(162, 155, 254, 0.4), transparent);
        }

        .research-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
        }

        .report-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 30px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 220px;
            cursor: pointer;
        }

        .report-card:hover {
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(162, 155, 254, 0.4);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .report-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 0;
            background: #a29bfe;
            transition: height 0.3s ease;
        }

        .report-card:hover::before {
            height: 100%;
        }

        .report-format {
            font-size: 10px;
            font-weight: 500;
            color: #8a7aaa;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .report-format .dot {
            width: 5px;
            height: 5px;
            border-radius: 1px;
            background: linear-gradient(135deg, #dcd6ff 0%, #a29bfe 50%, #8b7fd9 100%);
            box-shadow: 0 0 6px rgba(162, 155, 254, 0.5);
            transform: rotate(45deg);
            flex-shrink: 0;
        }

        .report-title {
            font-family: 'Playfair Display', serif;
            font-size: 19px;
            color: #ffffff;
            margin-bottom: 12px;
            line-height: 1.4;
            font-weight: 400;
        }

        .report-meta {
            font-size: 12px;
            color: #a29bfe;
            font-weight: 400;
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .report-card .premium-lock {
            opacity: 0.4;
            transition: opacity 0.3s;
        }

        .report-card:hover .premium-lock {
            opacity: 1;
        }

        .research-footer {
            margin-top: 100px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
            color: #8a7aaa;
            font-size: 12px;
            letter-spacing: 1px;
        }

        /* ============================================================
           PROJECTS PANEL SPECIFIC STYLES
           ============================================================ */
        .content-panel-body.projects-body {
            padding: 120px 8% 80px 8%;
            align-items: stretch;
        }

        .projects-header {
            text-align: left;
            margin-bottom: 60px;
            border-left: 3px solid #a29bfe;
            padding-left: 24px;
        }

        .projects-header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 48px;
            font-weight: 400;
            letter-spacing: 2px;
            color: #ffffff;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .projects-header .sub-header {
            font-size: 14px;
            letter-spacing: 3px;
            color: #a29bfe;
            font-weight: 500;
            text-transform: uppercase;
            border: none;
            padding: 0;
        }

        .project-category-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 18px;
            width: 100%;
            max-width: 1500px;
            margin-bottom: 80px;
        }

        .project-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 22px;
            padding: 36px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            min-height: 220px;
            cursor: pointer;
        }

        .project-card.pc-wide {
            grid-column: span 2;
        }

        .project-card.pc-tall {
            grid-row: span 2;
            min-height: 460px;
        }

        /* bento accent glow per card */
        .project-card::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(108, 92, 231, 0.18) 0%, transparent 70%);
            pointer-events: none;
            transition: opacity 0.4s ease;
            opacity: 0;
        }

        .project-card:hover::before {
            opacity: 1;
        }

        .project-card:hover {
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(162, 155, 254, 0.4);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .project-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 0;
            background: #a29bfe;
            transition: height 0.3s ease;
        }

        .project-card:hover::before {
            height: 100%;
        }

        .project-card .card-num {
            font-size: 10px;
            font-weight: 500;
            color: #8a7aaa;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .project-card h3 {
            font-family: 'Playfair Display', serif;
            font-size: 26px;
            color: #ffffff;
            margin-bottom: 10px;
            font-weight: 400;
        }

        .project-card .card-description {
            font-size: 15px;
            color: #c8bed8;
            line-height: 1.6;
            font-weight: 300;
            margin-bottom: 10px;
        }

        .project-card .card-scope {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: auto;
        }

        .project-card .scope-tag {
            font-size: 10px;
            color: #a29bfe;
            padding: 4px 10px;
            background: rgba(162, 155, 254, 0.1);
            border: 1px solid rgba(162, 155, 254, 0.2);
            border-radius: 4px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .project-card .project-examples {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .project-card .example-item {
            font-size: 13px;
            color: #8a7aaa;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .project-card .example-item::before {
            content: "";
            width: 4px;
            height: 4px;
            background: #a29bfe;
            border-radius: 50%;
        }

        .projects-footer {
            margin-top: 100px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
            color: #8a7aaa;
            font-size: 12px;
            letter-spacing: 1px;
        }

        /* ============================================================
           VAULT ENHANCEMENTS STYLES
           ============================================================ */
        .vault-overlay-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(40px);
            z-index: 1000;
            display: none;
            opacity: 0;
            transition: all 0.4s ease;
            padding: 100px 10%;
            overflow-y: auto;
            color: #2d235c;
        }

        .vault-overlay-content.active {
            display: block;
            opacity: 1;
        }


        .vault-search-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .vault-search-container-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding-bottom: 200px;
        }

        .vault-search-container-center h2 {
            font-family: 'Playfair Display', serif;
            font-weight: 300;
            font-size: 40px;
            color: #fff;
            margin-bottom: 40px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .vault-search-input {
            width: 100%;
            background: rgba(45, 35, 92, 0.05);
            border: 1px solid rgba(45, 35, 92, 0.15);
            border-radius: 40px;
            padding: 20px 60px;
            color: #2d235c;
            font-size: 20px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            outline: none;
            transition: all 0.3s;
        }

        .vault-search-input:focus {
            background: rgba(45, 35, 92, 0.08);
            border-color: rgba(45, 35, 92, 0.4);
            box-shadow: 0 10px 30px rgba(45, 35, 92, 0.1);
        }

        .vault-search-input::placeholder {
            color: rgba(45, 35, 92, 0.4);
        }

        .vault-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 40px;
            width: 100%;
            max-width: 1200px;
            margin: 40px auto 0 auto;
            /* Added top margin to prevent overlap */
        }

        .artist-card {
            background: linear-gradient(145deg, rgba(108, 92, 231, 0.08), rgba(20, 15, 35, 0.4));
            border: 1px solid rgba(162, 155, 254, 0.15);
            border-radius: 16px;
            padding: 20px 28px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            text-align: left;
            position: relative;
            display: flex;
            align-items: center;
            gap: 20px;
            min-height: 85px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .artist-card:hover {
            transform: translateX(8px);
            background: linear-gradient(145deg, rgba(108, 92, 231, 0.15), rgba(40, 25, 65, 0.5));
            border-color: rgba(162, 155, 254, 0.4);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(162, 155, 254, 0.1);
        }

        .artist-card:active {
            transform: scale(0.97);
            transition: transform 0.1s;
        }

        .upload-card {
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 24px;
            padding: 20px;
            transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
            position: relative;
            text-align: left;
            overflow: hidden;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .upload-card:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(162, 155, 254, 0.8) !important;
            box-shadow: 0 0 25px rgba(162, 155, 254, 0.4), 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .upload-card:active {
            transform: scale(0.98);
        }

        /* Hover Zoom + Overlay */
        .upload-card-img-container {
            width: 100%;
            height: 170px;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.08);
            position: relative;
        }

        .upload-card img {
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .upload-card:hover img {
            transform: scale(1.12);
        }





        /* Empty State Illustration */
        .vault-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
            grid-column: 1 / -1;
            opacity: 0.6;
        }

        .vault-empty-state svg {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
            stroke: #a29bfe;
        }

        .vault-empty-state h3 {
            font-family: 'Playfair Display', serif;
            font-size: 20px;
            margin-bottom: 8px;
            color: #fff;
        }

        .vault-empty-state p {
            font-size: 14px;
            color: #aaa;
        }

        .artist-card img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 15px;
            filter: grayscale(100%);
            transition: filter 0.5s;
        }

        .upload-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: transform 0.5s ease;
        }

        .upload-card:hover img {
            transform: scale(1.02);
        }

        .artist-card:hover img {
            filter: grayscale(0%);
        }

        .artist-card h4,
        .upload-card h4 {
            font-size: 16px;
            font-weight: 600;
            color: #2d235c;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
            font-family: 'Playfair Display', serif;
        }

        .artist-card p,
        .upload-card p {
            font-size: 11px;
            color: #6a5e8a;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .favorite-star {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 24px;
            height: 24px;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 10;
        }

        .favorite-star svg {
            width: 100%;
            height: 100%;
            fill: none;
            stroke: rgba(255, 255, 255, 0.3);
            stroke-width: 2;
            transition: all 0.3s;
        }

        .favorite-star.active svg {
            fill: #f2f2f2;
            stroke: #f2f2f2;
        }

        .favorite-star:hover svg {
            stroke: #f2f2f2;
            transform: scale(1.1);
        }

        .favorite-star {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 5;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
        }

        .favorite-star.active svg {
            fill: #f2f2f2;
            stroke: #f2f2f2;
        }

        .favorite-star:not(.active) svg {
            stroke: rgba(255, 255, 255, 0.5);
            fill: none;
        }

        .artist-card .artist-info-wrap {
            flex: 1;
        }

        .upload-controls {
            text-align: center;
            margin-bottom: 40px;
        }

        .btn-upload-art {
            padding: 12px 30px;
            background: rgba(45, 35, 92, 0.08);
            border: 1px solid rgba(45, 35, 92, 0.2);
            color: #2d235c;
            border-radius: 40px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            transition: all 0.3s;
        }

        .btn-upload-art:hover {
            background: #2d235c;
            color: #fff;
        }

        .btn-artpool-primary {
            background: rgba(162, 155, 254, 0.15);
            border: 1px solid rgba(162, 155, 254, 0.4);
            color: #a29bfe;
            padding: 12px 30px;
            border-radius: 40px;
            cursor: pointer;
            font-size: 12px;
            letter-spacing: 2px;
            transition: all 0.3s;
            text-transform: uppercase;
        }

        .btn-artpool-primary:hover {
            background: #a29bfe;
            color: #000;
            box-shadow: 0 0 20px rgba(162, 155, 254, 0.3);
        }

        /* Vault Detail Modal Animation */
        @keyframes vaultModalEntry {
            0% {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .vault-modal-animate {
            animation: vaultModalEntry 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }

        .vault-overlay-header {
            position: relative;
            text-align: center;
            margin-bottom: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 20px;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .vault-overlay-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            font-weight: 400;
            color: #2d235c;
            margin: 0;
            text-align: center;
        }

        .btn-back-to-vault {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            padding: 8px 16px;
            color: #ffffff;
            cursor: pointer;
            font-size: 11px;
            letter-spacing: 1.5px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            text-transform: uppercase;
        }

        .btn-back-to-vault:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            transform: translateY(-50%) scale(1.02);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* Note Styles */
        .notes-input-area {
            max-width: 800px;
            margin: 0 auto 50px auto;
            display: flex;
            gap: 15px;
        }

        .notes-textarea {
            flex: 1;
            background: rgba(45, 35, 92, 0.05);
            border: 1px solid rgba(45, 35, 92, 0.15);
            border-radius: 8px;
            color: #2d235c;
            padding: 15px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            outline: none;
            resize: vertical;
            min-height: 100px;
        }

        .notes-textarea::placeholder {
            color: rgba(45, 35, 92, 0.4);
        }

        .notes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .note-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 25px;
            position: relative;
            transition: all 0.3s;
            text-align: left;
        }

        .note-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .note-date {
            font-size: 10px;
            color: #a29bfe;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .note-content {
            font-size: 15px;
            color: #4b367c;
            line-height: 1.6;
            word-break: break-word;
        }

        .btn-delete-note {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: color 0.3s;
        }

        .btn-delete-note:hover {
            color: #e74c3c;
        }

        .btn-save-note {
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            border: none;
            color: #fff;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 11px;
            letter-spacing: 1px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
            height: fit-content;
            align-self: flex-end;
        }

        .btn-save-note:hover {
            box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
            filter: brightness(1.1);
        }

        /* ABOUT PANEL STYLES */
        .about-body {
            max-width: 1100px;
            margin: 0 auto;
            padding: 100px 40px 100px 40px;
            color: #fff;
            font-family: 'Inter', sans-serif;
        }

        .about-hero {
            text-align: center;
            margin-bottom: 40px;
        }

        .about-hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 56px;
            font-weight: 300;
            letter-spacing: 2px;
            margin-bottom: 20px;
            background: linear-gradient(to right, #fff, #a29bfe);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .about-hero p {
            font-size: 20px;
            font-weight: 300;
            color: #c8bed8;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .about-hero-lead-bold {
            margin-top: 28px !important;
            margin-bottom: 10px !important;
            font-weight: 700 !important;
            color: #e8deff !important;
            font-size: 20px !important;
        }

        .about-section {
            margin-bottom: 30px;
        }

        .about-section-compact {
            margin-bottom: 30px;
        }

        .about-section-title {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            font-weight: 300;
            margin: 0 auto 40px auto;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 15px;
            display: block;
            text-align: center;
            width: fit-content;
        }

        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .about-text-content {
            font-size: 16px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 300;
        }

        .about-text-content strong {
            font-weight: 700 !important;
            color: #ffffff !important;
        }

        .about-text-content p {
            margin-bottom: 25px;
        }

        .engine-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .engine-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 40px 30px;
            border-radius: 4px;
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
        }

        .engine-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: #a29bfe;
        }

        /* Floating Info Briefing Modal */
        .info-briefing-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 10001;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .info-briefing-modal {
            background: rgba(13, 8, 20, 0.9);
            border: 1px solid rgba(162, 155, 254, 0.3);
            border-radius: 16px;
            width: 100%;
            max-width: 960px;
            max-height: 85vh;
            overflow: hidden;
            padding: 30px 40px;
            position: relative;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 40px rgba(162, 155, 254, 0.1);
        }

        .info-briefing-modal::-webkit-scrollbar {
            width: 6px;
        }

        .info-briefing-modal::-webkit-scrollbar-thumb {
            background: rgba(162, 155, 254, 0.3);
            border-radius: 10px;
        }

        .btn-close-briefing {
            position: absolute;
            top: 25px;
            right: 25px;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.3s;
        }

        .btn-close-briefing:hover {
            opacity: 1;
        }

        @keyframes briefingFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes briefingZoomIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .info-briefing-overlay.open {
            display: flex;
            animation: briefingFadeIn 0.4s ease forwards;
        }

        .info-briefing-overlay.open .info-briefing-modal {
            animation: briefingZoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }


        .engine-card.zeta::before {
            content: 'ZETA';
        }

        .engine-card.sis::before {
            content: 'SIS';
        }

        .engine-card.mtif::before {
            content: 'MTIF';
        }

        .engine-card::before {
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 60px;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.03);
            pointer-events: none;
            letter-spacing: -2px;
        }

        .engine-card h3 {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            margin-bottom: 20px;
            color: #a29bfe;
            text-align: center;
        }

        .engine-card p {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
        }

        .engine-card ul {
            list-style: none;
            padding: 0;
            margin: 20px 0 0 0;
        }

        .engine-card ul li {
            font-size: 13px;
            margin-bottom: 12px;
            padding-left: 20px;
            position: relative;
            color: rgba(255, 255, 255, 0.9);
        }

        .engine-card ul li::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 7px;
            width: 5px;
            height: 5px;
            border-radius: 1px;
            background: linear-gradient(135deg, #dcd6ff 0%, #a29bfe 55%, #7c6ee0 100%);
            box-shadow: 0 0 6px rgba(162, 155, 254, 0.4);
            transform: rotate(45deg);
        }

        .membership-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .membership-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 40px;
            border-radius: 4px;
        }

        .membership-card.premium {
            border: 1px solid rgba(162, 155, 254, 0.3);
            background: rgba(162, 155, 254, 0.05);
        }

        .membership-card h3 {
            font-size: 20px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
            color: #fff;
        }

        .membership-card.premium h3 {
            color: #a29bfe;
        }

        .membership-card p {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 25px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .about-footer {
            text-align: center;
            margin-top: 60px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 12px;
            color: rgba(255, 255, 255, 0.3);
            letter-spacing: 2px;
        }

        .about-footer-compact {
            margin-top: 25px;
            padding-top: 12px;
            margin-bottom: -20px;
        }

        @media (max-width: 900px) {
            .engine-grid {
                grid-template-columns: 1fr;
            }

            .membership-grid {
                grid-template-columns: 1fr;
            }

            .about-hero h1 {
                font-size: 40px;
            }
        }

        @media (max-width: 1024px) {
            .project-cat-section {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .project-cat-title {
                position: static;
            }

            .projects-header h1 {
                font-size: 40px;
            }

            .content-panel-body.projects-body {
                padding: 120px 5% 60px 5%;
            }
        }

        .content-panel-body>img {
            width: 100%;
            max-width: 1200px;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }

        .btn-panel-close {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            padding: 8px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 100;
        }

        .btn-panel-close:hover {
            color: #ffffff;
            background: rgba(0, 0, 0, 0.7);
            border-color: rgba(255, 255, 255, 0.4);
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        @media (max-width: 600px) {
            .content-panel-header {
                padding: 15px 20px;
            }

            .btn-panel-close {
                padding: 6px 14px;
                font-size: 12px;
            }
        }

        /* ============================================================
           HOVER FORECAST TICKER
           ============================================================ */
        .forecast-ticker-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 38px;
            background: rgba(12, 7, 22, 0.6);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 9000;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .ticker-label {
            background: linear-gradient(90deg, #6c5ce7, #a29bfe);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 0 15px;
            height: 100%;
            display: flex;
            align-items: center;
            letter-spacing: 1px;
            text-transform: uppercase;
            z-index: 10;
            box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
        }

        .ticker-content {
            white-space: nowrap;
            display: flex;
            align-items: center;
            animation: ticker-scroll 500s linear infinite;
            padding-left: 20px;
        }

        .ticker-content:hover {
            animation-play-state: paused;
        }

        .ticker-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-right: 40px;
            font-size: 13px;
            color: #d0c8e8;
            font-weight: 300;
        }

        .ticker-item .symbol {
            font-weight: 500;
            color: #fff;
        }

        .ticker-item .value {
            color: #a29bfe;
        }

        .ticker-item .change {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .ticker-item .change.up {
            color: #55efc4;
            background: rgba(85, 239, 196, 0.1);
        }

        .ticker-item .change.down {
            color: #fd79a8;
            background: rgba(253, 121, 168, 0.1);
        }

        @keyframes ticker-scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* ============================================================
           RESPONSIVE — TABLET (≤1024px)
           ============================================================ */
        @media (max-width: 1024px) {
            .header {
                flex-direction: column;
                align-items: center;
                gap: 15px;
                text-align: center;
                min-height: auto;
            }

            .logo-area {
                padding-top: 5px;
            }

            .menu-overlay {
                flex-direction: column;
                width: 100%;
                gap: 15px;
            }

            .top-nav {
                position: relative;
                top: auto;
                left: auto;
                transform: none;
                margin: 0;
                justify-content: center;
                flex-wrap: wrap;
                gap: 15px;
                padding: 5px 0;
            }

            .header-right {
                padding-right: 0;
                justify-content: center;
                width: 100%;
            }

            .main-content {
                margin-top: 0;
            }

            .input-section {
                margin-top: 0;
            }

            .bottom-nav {
                gap: 3vw;
                padding-bottom: 20px;
                flex-wrap: wrap;
            }

            .nav-link {
                font-size: 14px;
            }

            .nav-detail {
                max-width: 90vw;
            }
        }

        /* ============================================================
           RESPONSIVE — MOBILE (≤600px)
           ============================================================ */
        @media (max-width: 600px) {

            /* CAROUSEL KONTROLLERİ */
            .mobile-carousel-controls {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                width: 100%;
                margin-top: 20px;
                margin-bottom: 5px;
                z-index: 10;
            }

            .swipe-hint {
                font-size: 12px;
                color: #a29bfe;
                font-style: italic;
                letter-spacing: 0.5px;
            }

            .carousel-btn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                color: #fff;
                width: 36px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s;
            }

            .carousel-btn:active {
                background: rgba(162, 155, 254, 0.3);
                transform: scale(0.9);
            }

            .bottom-nav {
                position: relative;
                display: flex;
                width: 100%;
                min-height: 380px;
                padding: 0;
                margin-top: 0;
                overflow: hidden;
                background: transparent;
            }

            .nav-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
                margin-right: 0 !important;
            }

            .nav-link {
                font-size: 20px !important;
                font-weight: 600 !important;
                color: #fff !important;
                padding: 0 0 10px 0 !important;
                pointer-events: none;
                text-shadow: 0 0 15px rgba(162, 155, 254, 0.6) !important;
            }

            .nav-item.active .nav-link::before,
            .nav-item.active .nav-link::after {
                display: none;
            }

            /* HAZIR CEVAP KARTLARI */
            .nav-detail {
                position: relative !important;
                opacity: 1 !important;
                visibility: visible !important;
                background: rgba(12, 7, 28, 0.5) !important;
                backdrop-filter: blur(10px) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                border-radius: 16px !important;
                padding: 15px !important;
                width: 90% !important;
                max-width: 400px !important;
                transform: none !important;
                top: 0 !important;
                left: 0 !important;
                z-index: 1 !important;
                margin-top: 15px;
            }

            .nav-detail h4 {
                font-size: 14px;
                margin-bottom: 12px;
                color: #e8deff;
                text-align: center;
            }

            .nav-detail ul {
                text-align: left;
                padding-left: 5px;
            }

            .nav-detail li {
                font-size: 13px;
                margin-bottom: 10px;
                line-height: 1.4;
                text-align: left;
            }

            .nav-detail li a {
                white-space: normal;
            }

            .nav-detail li::before {
                margin-right: 8px;
            }

            .page-wrapper {
                padding: 50px 15px 10px;
                min-height: 100dvh;
            }

            .forecast-ticker-wrapper {
                height: 32px;
            }

            .ticker-label {
                font-size: 10px;
                padding: 0 10px;
            }

            .ticker-item {
                font-size: 11px;
                margin-right: 25px;
            }

            .logo-icon {
                width: 34px;
                height: 34px;
            }

            .logo-area {
                max-width: calc(100vw - 110px);
                gap: 8px;
            }

            .system-name {
                font-size: 13px;
                white-space: normal;
                line-height: 1.2;
            }

            /* HEADER VE MOBİL MENÜ REVİZYONU */
            .header {
                flex-direction: row;
                gap: 10px;
                padding-top: 5px;
                min-height: auto;
                align-items: center;
                justify-content: center;
            }

            .mobile-menu-toggle {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 20px;
                height: 14px;
                background: transparent;
                border: none;
                cursor: pointer;
                padding: 0;
                z-index: 10001;
                position: absolute;
                top: 16px;
                right: 15px;
            }

            .mobile-menu-toggle span {
                width: 100%;
                height: 2px;
                background-color: #e8deff;
                border-radius: 2px;
                transition: all 0.3s;
            }

            .mobile-menu-toggle.active span:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }

            .mobile-menu-toggle.active span:nth-child(2) {
                opacity: 0;
            }

            .mobile-menu-toggle.active span:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }

            /* Tüm sağ üst menüyü içine alan mobil menü */
            .menu-overlay {
                position: fixed;
                top: 0;
                right: 0;
                width: 70vw;
                height: 100vh;
                background: rgba(12, 7, 28, 0.98);
                backdrop-filter: blur(20px);
                z-index: 10000;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap: 30px;
                padding: 80px 40px 40px 40px;
                transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
                transform: translateX(100%);
                overflow-y: auto;
            }

            .menu-overlay.mobile-active {
                transform: translateX(0);
                box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
            }

            /* Navigasyon Linkleri */
            .top-nav {
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 15px;
                position: relative;
                top: auto;
                left: auto;
                transform: none;
            }

            .top-nav a {
                font-size: 18px;
                width: 100%;
                padding: 12px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                text-align: center;
            }

            /* Mobile ArtCloud wrapper */
            .top-nav .artcloud-wrapper {
                width: 100%;
                text-align: center;
            }

            .top-nav .artcloud-wrapper>a {
                display: block;
                font-size: 18px;
                padding: 12px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                text-align: center;
                cursor: pointer;
            }

            /* Hide desktop dropdown on mobile */
            .artcloud-dropdown {
                display: none !important;
            }

            /* Show mobile sub-links on mobile - always visible */
            .mobile-artcloud-sub {
                display: flex !important;
                flex-direction: column;
                align-items: center;
                gap: 0;
                padding-left: 0;
                margin-top: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                padding-bottom: 4px;
            }

            .mobile-artcloud-sub a {
                font-size: 15px;
                padding: 10px 12px;
                justify-content: center;
                color: #9a8ebc;
                border-bottom: none;
            }



            /* Eski sağ alan şimdi menünün altında */
            .header-right {
                flex-direction: column;
                width: 100%;
                gap: 20px;
                align-items: center;
                margin-top: 0;
                padding-right: 0;
            }

            .lang-selector-wrap {
                margin-right: 0;
            }

            .lang-dropdown {
                inset-inline-start: 50%;
                inset-inline-end: auto;
                transform: translateX(-50%) translateY(-8px);
            }

            .lang-selector-wrap.is-open .lang-dropdown:not([hidden]) {
                transform: translateX(-50%) translateY(0);
            }

            .social-icons {
                margin-right: 0;
                gap: 20px;
            }

            .btn-signup {
                width: 100%;
                padding: 12px 0;
            }

            .user-info {
                flex-direction: column;
                gap: 15px;
            }

            .center-brand-image {
                max-width: 100%;
                width: 88%;
            }

            .main-content {
                margin-top: 0;
                position: relative;
                z-index: 50;
                pointer-events: auto;
            }

            .input-section {
                margin-top: 0;
                margin-bottom: 8%;
                position: relative;
                z-index: 60;
                pointer-events: auto;
            }

            /* MOBİL İNPUT KUTUSU */
            .chat-input-wrapper {
                border-radius: 30px;
                padding: 6px 10px;
                flex-direction: row;
                align-items: center;
                min-height: 54px;
                gap: 0;
                position: relative;
                pointer-events: auto;
                background: rgba(255, 255, 255, 0.95) !important;
                border: none;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
            }

            .chat-input-wrapper::before,
            .chat-input-wrapper::after {
                display: block !important;
            }

            .chat-input-wrapper::before {
                border-radius: 34px;
            }

            .chat-input-wrapper::after {
                border-radius: 32px;
            }

            .chat-left-actions {
                padding: 0 8px;
                flex: 0 0 auto;
                width: auto;
                color: #555;
            }

            .chat-center-input {
                flex: 1;
                min-width: 0;
                padding: 0;
                height: 100%;
                width: auto;
                display: flex;
                align-items: center;
            }

            .chat-main-input {
                font-size: 16px;
                text-align: left;
                width: 100%;
                background: transparent;
                border: none;
                height: 44px;
                color: #000000 !important;
                line-height: normal;
                box-sizing: border-box;
            }

            .chat-main-input::placeholder {
                font-size: 14px;
                color: #777;
            }

            .chat-right-actions {
                flex: 0 0 auto;
                width: auto;
                padding-left: 8px;
                gap: 8px;
            }

            .site-footer {
                flex-direction: column;
                align-items: center;
                gap: 5px;
                padding: 10px 0 0 0;
                font-size: 11px;
            }

            .site-footer span {
                display: none;
            }

            .history-sidebar {
                width: 85vw;
                left: -85vw;
            }

            .chat-panel-header {
                padding: 12px 16px;
                padding-top: max(12px, env(safe-area-inset-top));
            }

            .chat-panel-title {
                font-size: 14px;
            }

            .chat-messages-area {
                padding: 20px 15px;
                gap: 16px;
                scroll-behavior: smooth;
            }

            .msg {
                font-size: 13px;
                padding: 12px 16px;
                max-width: 100%;
            }

            .msg.user {
                border-radius: 16px 16px 4px 16px;
            }

            .chat-input-bar {
                padding: 10px 12px;
                padding-bottom: max(12px, env(safe-area-inset-bottom));
                flex-direction: column;
                gap: 8px;
            }

            .chat-input-bar input {
                font-size: 16px;
                padding: 10px 16px;
                line-height: normal;
                color: #fff;
            }

            .btn-send {
                width: 100%;
                padding: 12px;
                text-align: center;
            }

            .chat-mode-selector {
                width: 100%;
                margin-right: 0;
                overflow-x: auto;
                scrollbar-width: none;
                justify-content: flex-start;
                border-radius: 30px;
                mask-image: linear-gradient(to right, transparent, black 1%, black 6%, black 94%, black 99%, transparent);
                -webkit-mask-image: linear-gradient(to right, transparent, black 1%, black 6%, black 94%, black 99%, transparent);
            }

            .chat-mode-selector::-webkit-scrollbar {
                display: none;
            }

            .chat-mode-btn {
                padding: 10px 15px;
                font-size: 11px;
                flex-shrink: 0;
            }

            .modal-box {
                padding: 28px 24px;
                border-radius: 16px;
            }

            .modal-logo .brand {
                font-size: 18px;
            }

            .maintenance-msg {
                font-size: 24px;
            }

            .maintenance-content {
                padding: 20px;
            }

            .btn-scroll-bottom {
                bottom: 160px;
            }

            .btn-history-toggle {
                top: 61px;
                left: 15px;
                padding: 4px 6px;
            }

            .btn-history-toggle svg {
                width: 14px;
                height: 14px;
                stroke-width: 1.5;
            }
        }

        /* ============================================================
           RESPONSIVE — SMALL MOBILE (≤380px)
           ============================================================ */
        @media (max-width: 380px) {
            .chat-mode-btn {
                padding: 5px 8px;
                font-size: 9px;
                letter-spacing: 0.5px;
            }

            .btn-signup {
                padding: 7px 14px;
                font-size: 12px;
            }

            .center-brand-image {
                width: 95%;
            }
        }

        /* ============================================================
           LANDSCAPE MOBILE
           ============================================================ */



        @media (max-height: 500px) and (orientation: landscape) {
            .main-content {
                margin-top: 0;
                justify-content: flex-start;
                padding-top: 10px;
            }

            .center-brand-image-container {
                margin-bottom: -2vh;
            }

            .center-brand-image {
                width: 35%;
            }

            .input-section {
                margin-top: -2vh;
            }

            .bottom-nav {
                margin-top: 5px;
                min-height: auto;
            }
        }

        /* ============================================================
           X-RAY VIEW STYLES
           ============================================================ */
        #vaultArtworkXRay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100001;
            background: rgba(7, 3, 14, 0.4);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            align-items: center;
            justify-content: center;
            padding: 40px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        #vaultArtworkXRay.open {
            display: flex;
            opacity: 1;
        }

        .xray-container {
            position: relative;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            width: 100%;
            max-width: 1200px;
            height: 85vh;
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
        }

        @media (max-width: 992px) {
            .xray-container {
                grid-template-columns: 1fr;
                height: 90vh;
                overflow-y: auto;
            }
        }

        .xray-gallery {
            position: relative;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }

        .xray-main-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            user-select: none;
        }

        .xray-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .xray-nav-btn:hover {
            background: rgba(162, 155, 254, 0.2);
            border-color: #a29bfe;
            transform: translateY(-50%) scale(1.1);
        }

        .xray-nav-prev {
            left: 20px;
        }

        .xray-nav-next {
            right: 20px;
        }

        .xray-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.5);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 11px;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 600;
        }

        .xray-info {
            padding: 50px;
            display: flex;
            flex-direction: column;
            gap: 30px;
            overflow-y: auto;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
        }

        .xray-title {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            line-height: 1.2;
            color: #fff;
            margin-bottom: 5px;
        }

        .xray-artist {
            font-size: 16px;
            color: #a29bfe;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 500;
        }

        .xray-price {
            font-size: 24px;
            font-weight: 300;
            color: #fff;
            margin: 10px 0;
        }

        .xray-section-title {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 8px;
        }

        .xray-data-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .xray-data-item label {
            display: block;
            font-size: 10px;
            color: rgba(162, 155, 254, 0.6);
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        .xray-data-item span {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
        }

        .xray-close-btn {
            position: absolute;
            top: 25px;
            right: 25px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .xray-close-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(90deg);
        }

        .xray-settings-btn {
            position: absolute;
            top: 25px;
            right: 80px;
            background: rgba(108, 92, 231, 0.15);
            border: 1px solid rgba(108, 92, 231, 0.3);
            color: #a29bfe;
            padding: 0 20px;
            height: 40px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .xray-settings-btn:hover {
            background: rgba(108, 92, 231, 0.3);
            border-color: #a29bfe;
            color: #fff;
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.2);
        }

        .skeleton-loader {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
            background-size: 200% 100%;
            animation: skeletonLoading 1.5s infinite;
        }

        @keyframes skeletonLoading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* ============================================================
           ARTPOOL SUBMISSION & SOCIAL STYLES
           ============================================================ */
        .published-badge {
            background: rgba(0, 184, 148, 0.15);
            color: #00b894;
            border: 1px solid rgba(0, 184, 148, 0.3);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .btn-publish-artpool {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .btn-publish-artpool:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .btn-manage-artpool {
            background: rgba(108, 92, 231, 0.35);
            color: #fff;
            border: 1px solid rgba(162, 155, 254, 0.6);
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
            position: relative;
            overflow: hidden;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
        }

        .btn-manage-artpool::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: 0.6s;
        }

        .btn-manage-artpool:hover {
            background: rgba(108, 92, 231, 0.5);
            border-color: rgba(162, 155, 254, 0.8);
            box-shadow: 0 8px 30px rgba(108, 92, 231, 0.5), 0 0 20px rgba(162, 155, 254, 0.4);
            letter-spacing: 1.5px;
        }

        .btn-manage-artpool:active {
            transform: scale(0.96);
        }

        .btn-manage-artpool:hover::before {
            left: 100%;
        }

        .poster-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            padding: 0 2px;
        }

        .poster-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #eee;
            object-fit: cover;
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #444;
            overflow: hidden;
        }

        .poster-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .poster-details {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .poster-name {
            font-size: 11px;
            font-weight: 600;
            color: #000;
        }

        .post-time {
            font-size: 9px;
            color: #888;
        }

        .likers-popover {
            position: absolute;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 15px;
            width: 240px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: none;
        }

        .likers-list {
            max-height: 200px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .liker-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 5px 0;
            border-bottom: 1px solid #f9f9f9;
        }

        .liker-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #f0f0f0;
        }

        .liker-name {
            font-size: 12px;
            color: #333;
            font-weight: 500;
        }



        /* ============================================================
           ARTWORK INQUIRY SYSTEM
           ============================================================ */
        /* ============================================================
           ARTWORK INQUIRY SYSTEM (Premium Glassmorphism)
           ============================================================ */
        #inquiryOverlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            background: rgba(7, 3, 14, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            padding: 20px;
        }

        #inquiryOverlay.active {
            display: flex;
            opacity: 1;
        }

        .inquiry-card {
            width: min(500px, 95vw);
            background: rgba(15, 12, 30, 0.65);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 32px;
            padding: 40px;
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(108, 92, 231, 0.1) inset;
            transform: translateY(40px) scale(0.95);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        #inquiryOverlay.active .inquiry-card {
            transform: translateY(0) scale(1);
        }

        /* Inquiry Branding Header */
        .inquiry-brand-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 32px;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .inquiry-artwork-thumb {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }

        .inquiry-brand-info {
            flex: 1;
        }

        .inquiry-recipient-label {
            font-size: 10px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: #a29bfe;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .inquiry-recipient-name {
            font-size: 18px;
            color: #fff;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .inquiry-target-artwork {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
        }

        .inquiry-title {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.2;
            display: none;
            /* Replaced by identity header */
        }

        /* Quick Reply Pills */
        .inquiry-pills-label {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.3);
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .inquiry-pills-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px;
        }

        .inquiry-pill {
            padding: 10px 18px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 30px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .inquiry-pill:hover {
            background: rgba(162, 155, 254, 0.12);
            border-color: rgba(162, 155, 254, 0.4);
            color: #fff;
        }

        .inquiry-textarea {
            width: 100%;
            height: 120px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            color: #fff;
            padding: 18px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            resize: none;
            outline: none;
            transition: all 0.3s ease;
            margin-bottom: 32px;
            line-height: 1.6;
        }

        .inquiry-textarea:focus {
            border-color: rgba(162, 155, 254, 0.4);
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.1);
        }

        .inquiry-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .btn-inquiry-submit {
            padding: 16px;
            border-radius: 14px;
            background: linear-gradient(135deg, #6c5ce7, #8b7cf8);
            color: #fff;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            letter-spacing: 1px;
            box-shadow: 0 10px 25px rgba(108, 92, 231, 0.2);
        }

        .btn-inquiry-submit:hover {
            opacity: 0.9;
            box-shadow: 0 15px 30px rgba(108, 92, 231, 0.3);
        }

        .btn-inquiry-submit:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .btn-inquiry-cancel {
            padding: 16px;
            border-radius: 14px;
            background: transparent;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-inquiry-cancel:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.3);
        }


        /* Specific X-Ray Action Buttons */
        .btn-xray-more-info {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
            margin-bottom: 10px;
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-xray-more-info:hover {
            border-color: rgba(162, 155, 254, 0.5);
            background: rgba(108, 92, 231, 0.1);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.1);
        }

        .btn-xray-price-request {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            background: rgba(162, 155, 254, 0.08);
            border: 1px solid rgba(162, 155, 254, 0.3);
            color: #a29bfe;
            margin-bottom: 10px;
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-xray-price-request:hover {
            background: rgba(162, 155, 254, 0.15);
            box-shadow: 0 0 20px rgba(162, 155, 254, 0.15);
        }

        /* Inquiry Inbox Styles */
        .inbox-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding-bottom: 40px;
        }

        .inquiry-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 24px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .inquiry-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(162, 155, 254, 0.3);
        }

        .inquiry-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .inquiry-artwork-title {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            color: #fff;
            margin-bottom: 4px;
        }

        .inquiry-sender {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
        }

        .inquiry-tag {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .tag-info {
            background: rgba(108, 92, 231, 0.2);
            color: #a29bfe;
            border: 1px solid rgba(162, 155, 254, 0.3);
        }

        .tag-price {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .inquiry-message-box {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            line-height: 1.5;
            font-style: italic;
        }

        .inquiry-time {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.3);
            margin-top: 12px;
            display: block;
            text-align: right;
        }

        /* Global Notification Badge */
        .notification-icon-wrapper {
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            transition: background 0.3s ease;
        }

        .notification-icon-wrapper:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .notification-badge {
            position: absolute;
            top: 4px;
            right: 4px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            background: linear-gradient(135deg, #ff4757, #ff6b81);
            border-radius: 10px;
            border: 2px solid #0f0c1e;
            display: none;
            /* hidden by default */
            color: white;
            font-size: 10px;
            font-weight: bold;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-family: 'Inter', sans-serif;
        }

        .notification-badge.active {
            display: flex;
            animation: pulse-red 2s infinite cubic-bezier(0.66, 0, 0, 1);
        }

        @keyframes pulse-red {
            to {
                box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
            }
        }

        /* Global Messages Modal - Split View */
        #messagesOverlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(7, 3, 14, 0.95);
            backdrop-filter: blur(50px);
            -webkit-backdrop-filter: blur(50px);
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        #messagesOverlay.active {
            display: flex;
            opacity: 1;
        }

        .messages-card {
            width: min(1400px, 95vw);
            height: 85vh;
            background: linear-gradient(145deg, rgba(25, 20, 45, 0.98), rgba(15, 12, 30, 0.99));
            border: 1px solid rgba(162, 155, 254, 0.2);
            border-radius: 28px;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(108, 92, 231, 0.1) inset;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: inquiryIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .messages-header {
            padding: 16px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            background: rgba(10, 8, 20, 0.4);
        }

        .messages-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            color: #fff;
            margin: 0;
        }

        .btn-msg-action {
            padding: 8px 16px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-msg-action:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .messages-actions {
            display: flex;
            gap: 12px;
        }

        .reply-box {
            padding: 16px 24px;
            background: rgba(10, 8, 20, 0.6);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            /* PERFECT FLEX ALIGNMENT */
            gap: 12px;
            flex-shrink: 0;
            position: relative;
        }

        .reply-actions-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .reply-textarea {
            flex: 1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 12px 18px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            resize: none;
            height: 44px;
            outline: none;
            transition: all 0.3s;
            line-height: 1.4;
            display: flex;
            align-items: center;
        }

        /* Premium Search & Presence Styles */
        .inbox-search-container {
            padding: 16px;
            background: rgba(10, 8, 20, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            margin-bottom: 12px;
        }

        .inbox-search-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 12px 18px;
            color: #fff;
            font-size: 13px;
            outline: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
        }

        .inbox-search-input:focus {
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(162, 155, 254, 0.5);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
            transition: background 0.3s;
        }

        .status-online {
            background: #55efc4;
            box-shadow: 0 0 8px rgba(85, 239, 196, 0.6);
        }

        .status-offline {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Attachment Menu Styles */
        .reply-actions-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 12px;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            margin-right: 8px;
        }

        .btn-attachment {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-attachment:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.05);
        }

        .attachment-dropdown {
            position: absolute;
            bottom: 70px;
            left: 20px;
            background: rgba(15, 12, 30, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 8px;
            display: none;
            flex-direction: column;
            gap: 4px;
            z-index: 20;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
            width: 180px;
            animation: slideUpFade 0.3s ease-out;
        }

        .attachment-dropdown.active {
            display: flex;
        }

        .attachment-option {
            padding: 10px 14px;
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .attachment-option:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        /* Message Actions (Edit/Delete) */
        .msg-options-menu {
            position: absolute;
            background: rgba(15, 12, 30, 0.98);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            padding: 8px;
            display: none;
            z-index: 10000;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
            animation: slideUpFade 0.2s ease-out;
            min-width: 140px;
        }

        .msg-options-btn {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 8px;
            transition: all 0.2s;
            margin-left: 8px;
            opacity: 0;
            /* hidden by default, shown on bubble hover */
        }

        .chat-bubble.sent:hover .msg-options-btn {
            opacity: 1;
        }

        .msg-options-btn:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        .read-timestamp-label {
            font-size: 10px;
            color: #00cec9;
            margin-left: 8px;
            opacity: 0.8;
            display: none;
            /* toggled by JS */
            font-weight: 500;
        }

        .msg-option-item {
            padding: 10px 16px;
            font-size: 13px;
            color: #fff;
            cursor: pointer;
            border-radius: 8px;
            white-space: nowrap;
        }

        .msg-option-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .msg-option-item.delete {
            color: #ff7675;
        }

        .messages-body {
            display: flex;
            flex: 1;
            /* Grow to fill the remaining card height */
            min-height: 0;
            /* Important for flex children to scroll */
            overflow: hidden;
            background: #0f0f15;
            border-bottom-left-radius: 28px;
            border-bottom-right-radius: 28px;
            position: relative;
        }

        .messages-left-panel,
        .messages-center-panel,
        .messages-art-panel {
            height: 100%;
            overflow-y: auto;
            position: relative;
            background: rgba(0, 0, 0, 0.1);
            /* Reset transform transition for desktop to avoid conflicts with flex layout */
            transition: opacity 0.3s ease;
        }

        @media (max-width: 768px) {

            .messages-left-panel,
            .messages-center-panel,
            .messages-art-panel {
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
            }
        }

        /* Responsive Mobile Layering (< 768px) */
        @media (max-width: 768px) {
            .messages-card {
                width: 100vw;
                height: 100vh;
                border-radius: 0;
            }

            .messages-body {
                display: block;
                border-radius: 0;
            }

            .messages-left-panel {
                width: 100%;
                position: absolute;
                inset: 0;
                z-index: 10;
                background: #07030e;
            }

            .messages-center-panel {
                width: 100%;
                position: absolute;
                inset: 0;
                z-index: 20;
                background: #07030e;
                transform: translateX(100%);
            }

            #messagesOverlay.chat-active .messages-center-panel {
                transform: translateX(0);
            }

            /* Bottom Sheet for Intelligence */
            .messages-art-panel {
                width: 100%;
                height: 75vh;
                position: fixed;
                bottom: 0;
                left: 0;
                z-index: 10000;
                background: rgba(20, 15, 35, 0.98);
                backdrop-filter: blur(30px);
                border-radius: 32px 32px 0 0;
                border: none;
                transform: translateY(100%);
                padding-top: 40px;
                box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.8);
            }

            .messages-art-panel.sheet-active {
                transform: translateY(0);
            }

            .mobile-sheet-close {
                display: block !important;
            }

            .sheet-handle {
                width: 40px;
                height: 4px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 2px;
                position: absolute;
                top: 15px;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* Left Panel - Chat List (Thinner & Glassy) */
        .messages-left-panel {
            flex: 0 0 260px;
            /* Do not grow, do not shrink, 260px width */
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            background: rgba(0, 0, 0, 0.15);
            padding: 0;
            overflow: hidden;
        }

        .messages-search-container {
            padding: 20px 16px;
            background: rgba(15, 12, 30, 0.4);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .search-input-wrapper {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .search-input-wrapper:focus-within {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(162, 155, 254, 0.4);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.1);
        }

        .search-input-wrapper input {
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: 13px;
            width: 100%;
        }

        .inquiry-items-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .inquiry-item {
            position: relative;
            flex-shrink: 0;
            transition: all 0.2s ease;
            cursor: pointer;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .inquiry-item.active-thread {
            background: rgba(108, 92, 231, 0.15);
            border-color: rgba(108, 92, 231, 0.4);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .inquiry-item:hover .btn-delete-thread {
            opacity: 1;
        }

        .btn-delete-thread {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            background: rgba(255, 71, 87, 0.1);
            color: #ff4757;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 2;
        }

        .btn-delete-thread:hover {
            background: rgba(255, 71, 87, 0.2);
        }

        /* Center Panel - Active Chat (Flexible) */
        .messages-center-panel {
            flex: 1;
            min-width: 0;
            /* CRITICAL for flex child with text/images */
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            background: rgba(10, 8, 20, 0.4);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        /* Toggle Sidebar Button */
        .btn-toggle-info {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9999;
            /* Ensure it stays above everything */
            background: rgba(108, 92, 231, 1);
            /* More visible purple */
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-right: none;
            color: #fff;
            width: 32px;
            /* Slightly wider */
            height: 64px;
            /* Slightly taller */
            border-radius: 16px 0 0 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(10px);
            box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
        }

        .btn-toggle-info:hover {
            background: #a29bfe;
            width: 40px;
        }

        .info-collapsed .btn-toggle-info {
            right: 0;
            background: rgba(15, 12, 30, 0.95);
        }

        .btn-toggle-info svg {
            transition: transform 0.3s;
        }

        .info-collapsed .btn-toggle-info svg {
            transform: rotate(180deg);
        }

        #messagesThreadView {
            display: none;
            flex-direction: column;
            height: 100%;
            /* Ensure it fills parent */
            flex: 1;
            overflow: hidden;
            /* Prevent parent break */
        }

        #messagesThreadView.active {
            display: flex;
        }

        /* Right Panel - Artwork Intelligence (Sliding) */
        .messages-art-panel {
            flex: 0 0 300px;
            /* Do not grow, do not shrink, 300px width */
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            word-break: break-word;
            background: rgba(15, 12, 30, 0.3);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow-y: auto;
            position: relative;
            transform-origin: right;
            opacity: 1;
        }

        .info-collapsed .messages-art-panel {
            flex: 0 0 0px;
            width: 0;
            padding: 0;
            margin: 0;
            opacity: 0;
            pointer-events: none;
            border: none;
        }

        .info-collapsed .btn-toggle-info {
            right: 10px;
            /* Move it slightly away from edge when collapsed */
        }

        .art-intel-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.3);
            text-align: center;
            height: 100%;
        }

        /* Message Management UI */
        .msg-options-btn {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.2);
            padding: 4px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
            margin-left: 8px;
        }

        .msg-options-btn:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.05);
        }

        .msg-options-menu {
            position: fixed;
            background: rgba(20, 15, 30, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 6px;
            z-index: 200000;
            display: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            min-width: 140px;
        }

        .msg-option-item {
            padding: 10px 14px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s;
        }

        .msg-option-item:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
        }

        .msg-option-item.delete {
            color: #ff7675;
        }

        .msg-option-item.delete:hover {
            background: rgba(255, 118, 117, 0.1);
        }

        .read-timestamp-label {
            display: none;
            font-size: 10px;
            color: #00cec9;
            margin-left: 6px;
            font-weight: 500;
            letter-spacing: 0.3px;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .art-intel-viewer {
            display: none;
            flex-direction: column;
            gap: 16px;
        }

        .art-intel-viewer.active {
            display: flex;
        }

        .art-intel-cover {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin-bottom: 8px;
        }

        .art-intel-title {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 20px;
            color: #fff;
            margin: 0;
            line-height: 1.3;
        }

        .art-intel-artist {
            color: rgba(255, 255, 255, 0.8);
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .art-intel-metric {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 13px;
        }

        .art-intel-metric .metric-lbl {
            color: rgba(255, 255, 255, 0.5);
        }

        .art-intel-metric .metric-val {
            color: #fff;
            font-weight: 500;
            text-align: right;
            max-width: 60%;
        }

        .art-intel-price {
            color: #a29bfe;
            font-size: 18px;
            font-weight: 700;
            margin-top: 10px;
        }

        .btn-xray-launch {
            display: block;
            width: 100%;
            text-align: center;
            background: rgba(108, 92, 231, 0.15);
            border: 1px solid rgba(108, 92, 231, 0.4);
            color: #fff;
            padding: 12px;
            border-radius: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 24px;
            transition: all 0.2s;
            cursor: pointer;
        }

        .btn-xray-launch:hover {
            background: #6c5ce7;
        }

        .thread-messages-list {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            scroll-behavior: smooth;
            box-sizing: border-box;
        }

        .chat-bubble .msg-attachment-img img {
            max-width: 85%;
            object-fit: cover;
            border-radius: 12px;
            transition: transform 0.3s ease;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .chat-bubble .msg-attachment-img img:hover {
            transform: scale(1.02);
            border-color: rgba(0, 206, 201, 0.4);
        }

        .chat-bubble {
            max-width: 75%;
            padding: 14px 18px;
            font-size: 14px;
            line-height: 1.5;
            position: relative;
            font-family: 'Inter', sans-serif;
            word-wrap: break-word;
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.3s ease forwards;
        }

        .chat-bubble.received {
            align-self: flex-start;
            background: #f1f2f6;
            /* Soft gray / off-white */
            color: #1e272e;
            border-radius: 18px 18px 18px 4px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .chat-bubble.sent {
            align-self: flex-end;
            background: #1e272e;
            /* Elegant dark accent */
            color: #ffffff;
            border-radius: 18px 18px 4px 18px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .msg-meta {
            display: flex;
            align-items: center;
            font-size: 11px;
            opacity: 0.6;
            margin-top: 6px;
            gap: 4px;
        }

        .chat-bubble.sent .msg-meta {
            justify-content: flex-end;
        }

        .chat-bubble.received .msg-meta {
            justify-content: flex-start;
        }

        .reply-box {
            padding: 20px 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(15, 12, 30, 0.95);
            display: flex;
            gap: 12px;
            flex-shrink: 0;
            /* Prevents squashing */
            z-index: 10;
        }

        .reply-textarea {
            flex: 1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            padding: 14px 20px;
            border-radius: 24px;
            height: 50px;
            resize: none;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            outline: none;
        }

        .reply-textarea:focus {
            outline: none;
            border-color: #00cec9;
            box-shadow: 0 0 10px rgba(0, 206, 201, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }

        .chat-send-btn {
            padding: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
            flex-shrink: 0;
        }

        .chat-send-btn:hover {
            background: #00cec9;
            border-color: #00cec9;
            color: #000;
        }

        .chat-date-divider {
            text-align: center;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.4);
            margin: 16px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Inter', sans-serif;
        }

        .typing-dots {
            display: inline-flex;
            gap: 5px;
            align-items: center;
            height: 12px;
        }

        .typing-dots span {
            width: 6px;
            height: 6px;
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            border-radius: 50%;
            display: inline-block;
            animation: typingBounce 1.4s infinite ease-in-out both;
        }

        .typing-dots span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-dots span:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes typingBounce {

            0%,
            80%,
            100% {
                transform: translateY(0);
                opacity: 0.4;
                background: rgba(255, 255, 255, 0.4);
            }

            40% {
                transform: translateY(-8px);
                opacity: 1;
                background: #a29bfe;
                box-shadow: 0 4px 10px rgba(162, 155, 254, 0.4);
            }
        }

        .btn-scroll-bottom {
            position: absolute;
            bottom: 100px;
            right: 24px;
            width: 44px;
            height: 44px;
            background: rgba(108, 92, 231, 0.9);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 15;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            opacity: 0;
            transform: scale(0.8);
        }

        .btn-scroll-bottom:hover {
            background: #6c5ce7;
            transform: translateY(-2px) scale(1.1);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .reply-textarea:focus {
            border-color: #6c5ce7;
        }

        /* Message list item (unread indicator) */
        .inquiry-item.unread {
            border-left: 4px solid #6c5ce7;
            background: rgba(108, 92, 231, 0.08);
        }

        .ob-medium-img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            display: block;
            background: linear-gradient(135deg, rgba(108, 92, 231, 0.3), rgba(162, 155, 254, 0.15));
            font-size: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.5);
        }

        .ob-medium-label {
            padding: 8px 10px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
        }

        /* Tag cloud for themes */
        .ob-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 36px;
        }

        .ob-tag {
            padding: 8px 16px;
            border-radius: 100px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.65);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .ob-tag:hover {
            border-color: rgba(162, 155, 254, 0.4);
            color: #fff;
        }

        .ob-tag.selected {
            border-color: #a29bfe;
            background: rgba(108, 92, 231, 0.2);
            color: #a29bfe;
        }

        /* Privacy step */
        .ob-privacy-box {
            background: rgba(108, 92, 231, 0.06);
            border: 1px solid rgba(108, 92, 231, 0.2);
            border-radius: 16px;
            padding: 24px 22px;
            margin-bottom: 36px;
        }

        .ob-privacy-row {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            margin-bottom: 14px;
        }

        .ob-privacy-row:last-child {
            margin-bottom: 0;
        }

        .ob-privacy-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(108, 92, 231, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .ob-privacy-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        .ob-privacy-text strong {
            color: #a29bfe;
            font-weight: 600;
        }

        /* CTA button */
        .ob-btn-next {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 14px;
            background: linear-gradient(135deg, #6c5ce7, #8b7cf8);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 30px rgba(108, 92, 231, 0.4);
        }

        .ob-btn-next:hover {
            box-shadow: 0 12px 40px rgba(108, 92, 231, 0.5);
        }

        .ob-btn-next:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
        }

        .ob-skip {
            text-align: center;
            margin-top: 14px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: color 0.2s;
        }

        .ob-skip:hover {
            color: rgba(255, 255, 255, 0.6);
        }

        /* step transition */
        .ob-step-content {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .ob-step-content.fade-out {
            opacity: 0;
            transform: translateX(-20px);
        }

        .ob-step-content.fade-in {
            opacity: 0;
            transform: translateX(20px);
        }

        /* ============================================================
           INTERACTIVE TUTORIAL SPOTLIGHT
           ============================================================ */
        #tutorialOverlay {
            position: fixed;
            inset: 0;
            z-index: 98000;
            pointer-events: none;
            display: none;
        }

        #tutorialOverlay.active {
            display: block;
        }

        /* Dark veil - four divs that surround the spotlight hole */
        .tut-veil {
            position: fixed;
            background: rgba(4, 2, 10, 0.88);
            pointer-events: all;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 98001;
        }

        #tut-veil-top {
            top: 0;
            left: 0;
            right: 0;
        }

        #tut-veil-bottom {
            left: 0;
            right: 0;
            bottom: 0;
        }

        #tut-veil-left {
            left: 0;
        }

        #tut-veil-right {
            right: 0;
        }

        /* Spotlight ring */
        #tutSpotlightRing {
            position: fixed;
            border-radius: 14px;
            border: 2px solid rgba(162, 155, 254, 0.7);
            box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2), 0 0 60px rgba(108, 92, 231, 0.35);
            pointer-events: none;
            z-index: 98002;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ringPulse 2.5s ease-in-out infinite;
        }

        @keyframes ringPulse {

            0%,
            100% {
                box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2), 0 0 60px rgba(108, 92, 231, 0.35);
            }

            50% {
                box-shadow: 0 0 0 8px rgba(108, 92, 231, 0.12), 0 0 90px rgba(108, 92, 231, 0.5);
            }
        }

        /* Tooltip card */
        #tutTooltip {
            position: fixed;
            z-index: 98010;
            width: min(340px, 88vw);
            background: linear-gradient(145deg, rgba(20, 12, 40, 0.98), rgba(10, 5, 22, 0.98));
            border: 1px solid rgba(162, 155, 254, 0.25);
            border-radius: 18px;
            padding: 26px 24px 22px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(108, 92, 231, 0.12) inset;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: all;
        }

        .tut-step-badge {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: #a29bfe;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tut-step-badge::before {
            content: '';
            display: inline-block;
            width: 22px;
            height: 1px;
            background: #a29bfe;
            opacity: 0.5;
        }

        .tut-title {
            font-family: 'Playfair Display', serif;
            font-size: 17px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 10px;
            line-height: 1.35;
        }

        .tut-body {
            font-size: 12.5px;
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.7;
            margin-bottom: 22px;
        }

        .tut-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .tut-btn-next {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #6c5ce7, #8b7cf8);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tut-btn-next:hover {
            box-shadow: 0 6px 20px rgba(108, 92, 231, 0.45);
        }

        .tut-btn-skip {
            padding: 12px 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            background: transparent;
            color: rgba(255, 255, 255, 0.4);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tut-btn-skip:hover {
            border-color: rgba(255, 255, 255, 0.25);
            color: rgba(255, 255, 255, 0.7);
        }

        .tut-dots {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-bottom: 16px;
        }

        .tut-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            transition: all 0.3s ease;
        }

        .tut-dot.active {
            background: #a29bfe;
            width: 16px;
            border-radius: 3px;
        }

        /* ============================================================
           USER SEARCH OVERLAY
           ============================================================ */
        .user-search-overlay {
            position: fixed;
            inset: 0;
            background: rgba(7, 3, 14, 0.25);
            backdrop-filter: blur(35px) saturate(180%);
            -webkit-backdrop-filter: blur(35px) saturate(180%);
            z-index: 99999;
            display: none;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .user-search-overlay.active {
            display: flex;
            opacity: 1;
        }

        .user-search-card {
            width: 100%;
            max-width: 580px;
            background: linear-gradient(145deg, rgba(25, 20, 45, 0.35), rgba(15, 12, 30, 0.45));
            border: 1px solid rgba(162, 155, 254, 0.15);
            border-radius: 28px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
            transform: scale(0.95) translateY(10px);
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
        }

        .user-search-overlay.active .user-search-card {
            transform: scale(1) translateY(0);
        }

        .user-search-header {
            padding: 24px 28px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .user-search-title {
            font-family: 'Playfair Display', serif;
            font-size: 21px;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .user-search-input-wrapper {
            position: relative;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 2px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
        }

        .user-search-input-wrapper:focus-within {
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(162, 155, 254, 0.4);
            box-shadow: 0 0 20px rgba(108, 92, 231, 0.15);
        }

        .user-search-input-wrapper input {
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            width: 100%;
            height: 48px;
        }

        .user-search-results {
            flex: 1;
            max-height: 450px;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 100px;
        }

        .user-search-results::-webkit-scrollbar {
            width: 4px;
        }

        .user-search-results::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        .user-result-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid transparent;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .user-result-item:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(162, 155, 254, 0.25);
            transform: translateX(4px);
        }

        .user-result-info {
            display: flex;
            align-items: center;
            gap: 14px;
            flex: 1;
        }

        .user-result-avatar {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);
        }

        .user-result-name {
            font-size: 14px;
            font-weight: 500;
            color: #e8deff;
            letter-spacing: 0.3px;
        }

        .btn-user-follow {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            border: 1px solid rgba(162, 155, 254, 0.3);
            background: rgba(162, 155, 254, 0.1);
            color: #a29bfe;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            flex-shrink: 0;
        }

        .btn-user-follow:hover {
            background: #6c5ce7;
            border-color: #6c5ce7;
            color: #fff;
            transform: scale(1.1);
        }

        .btn-user-follow.following {
            background: rgba(0, 206, 201, 0.15);
            border-color: rgba(0, 206, 201, 0.4);
            color: #55efc4;
        }

        .btn-user-follow.following:hover {
            background: rgba(255, 118, 117, 0.15);
            border-color: rgba(255, 118, 117, 0.4);
            color: #ff7675;
        }

        .btn-close-user-search {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            color: #fff;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            z-index: 10;
        }

        .btn-close-user-search:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(90deg);
        }

        /* ============================================================
           PROFILE PAGE STYLES
           ============================================================ */
        .profile-body {
            padding: 100px 5% 60px;
            color: #fff;
        }

        .profile-header {
            position: relative;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(108, 92, 231, 0.04));
            border: 1px solid rgba(162, 155, 254, 0.2);
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        /* ============================================================
           PREMIUM PROFILE PANEL DESIGN SYSTEM
           ============================================================ */
        .profile-panel {
            background: rgba(7, 4, 15, 0.98);
            backdrop-filter: blur(50px);
            -webkit-backdrop-filter: blur(50px);
        }

        .profile-panel .content-panel-header {
            padding: 16px 20px;
            background: transparent;
            pointer-events: none;
            justify-content: flex-end;
            gap: 10px;
        }

        .profile-panel .content-panel-body {
            padding: 52px 24px 40px;
            align-items: stretch;
        }

        .profile-panel .profile-info {
            padding: 24px 0;
        }

        .profile-panel .profile-hero-overlay {
            margin-top: 0;
            padding: 0 0 28px;
        }

        .profile-panel .content-panel-header .notification-icon-wrapper {
            color: rgba(255, 255, 255, 0.65);
            cursor: pointer;
            transition: color 0.2s;
        }

        .profile-panel .content-panel-header .notification-icon-wrapper:hover {
            color: #fff;
        }

        .profile-header-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            background: rgba(0, 0, 0, 0.38);
            color: #f1ebff;
            font-size: 11px;
            letter-spacing: 0.9px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Profile Quick Actions Bar */
        .profile-quick-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 15px;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            width: fit-content;
        }

        .profile-quick-actions .notification-icon-wrapper {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
            color: rgba(255, 255, 255, 0.7);
        }

        .profile-quick-actions .notification-icon-wrapper:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* Settings Dropdown */
        .profile-settings-dropdown {
            position: absolute;
            top: 52px;
            right: 20px;
            background: rgba(15, 12, 30, 0.8);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            width: 180px;
            z-index: 100;
            display: none;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .profile-settings-dropdown.open {
            display: flex;
        }

        .settings-item {
            padding: 12px 16px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .settings-item.danger {
            color: #ff7675;
        }

        .settings-item.danger:hover {
            background: rgba(255, 118, 117, 0.15);
        }

        .profile-header-action-btn:hover {
            background: rgba(162, 155, 254, 0.2);
            border-color: rgba(162, 155, 254, 0.5);
            color: #fff;
        }

        .profile-header-action-btn.with-badge {
            position: relative;
            padding-right: 16px;
        }

        .profile-header-action-btn .mini-badge {
            position: absolute;
            top: -4px;
            right: -2px;
            min-width: 16px;
            height: 16px;
            border-radius: 999px;
            background: #ff4757;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }

        .profile-header-action-btn .mini-badge.active {
            display: inline-flex;
        }

        /* ── Profile Hero Layout ── */
        .profile-hero {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #07040f;
        }

        .profile-hero-overlay {
            position: relative;
            z-index: 3;
            padding: 0 0 28px;
            display: flex;
            align-items: center;
            gap: 28px;
            margin-top: 0;
        }

        .profile-hero-info {
            flex: 1;
            padding-bottom: 4px;
        }

        .profile-hero-info h1 {
            font-family: 'Playfair Display', serif;
            font-size: 36px;
            color: #fff;
            margin: 0 0 8px;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        }

        .profile-hero-info .profile-sub-meta {
            margin-bottom: 0;
        }

        /* Glass-style action buttons in header — eşit boyut */
        .profile-panel .content-panel-header .btn-panel-close,
        .profile-panel .content-panel-header .btn-signout {
            pointer-events: all;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 0;
            min-height: 42px;
            padding: 8px 20px;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            line-height: 1.2;
            border-radius: 30px;
            box-sizing: border-box;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: all 0.2s;
        }

        .profile-panel .content-panel-header .btn-panel-close:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.35);
            transform: none;
            box-shadow: none;
        }

        .profile-panel .content-panel-header .btn-signout {
            color: rgba(255, 200, 200, 0.85);
        }

        .profile-panel .content-panel-header .btn-signout:hover {
            background: rgba(255, 100, 100, 0.2);
            border-color: rgba(255, 120, 120, 0.4);
            color: #fff;
        }

        @media (max-width: 600px) {

            .profile-panel .content-panel-header .btn-panel-close,
            .profile-panel .content-panel-header .btn-signout {
                min-height: 36px;
                padding: 6px 14px;
                font-size: 12px;
            }
        }

        .profile-notifications-overlay {
            position: fixed;
            inset: 0;
            z-index: 180000;
            background: rgba(8, 5, 16, 0.72);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }

        .profile-notifications-modal {
            width: min(760px, 96vw);
            max-height: min(82vh, 760px);
            overflow: hidden;
            border-radius: 24px;
            background: linear-gradient(145deg, rgba(18, 12, 36, 0.98), rgba(10, 7, 24, 0.98));
            border: 1px solid rgba(162, 155, 254, 0.25);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
        }


        .profile-notif-time {
            color: rgba(255, 255, 255, 0.45);
            font-size: 10px;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.7px;
        }

        .profile-notif-actions {
            display: flex;
            gap: 8px;
        }

        .profile-notif-btn {
            border: 1px solid rgba(162, 155, 254, 0.35);
            background: rgba(162, 155, 254, 0.14);
            color: #f4f0ff;
            border-radius: 999px;
            font-size: 10px;
            letter-spacing: 0.7px;
            padding: 6px 10px;
            cursor: pointer;
        }

        .profile-notif-avatar {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            overflow: hidden;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.06);
        }

        .profile-notif-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        .profile-skeleton {
            padding: 0;
            animation: fadeIn 0.3s ease;
        }

        .skeleton-banner {
            width: 100%;
            height: 200px;
            border-radius: 0;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.04) 25%,
                    rgba(255, 255, 255, 0.08) 50%,
                    rgba(255, 255, 255, 0.04) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .skeleton-info {
            display: flex;
            gap: 20px;
            padding: 16px 0 20px;
            align-items: flex-end;
            margin-top: 0;
        }

        .skeleton-avatar {
            width: 100px;
            height: 100px;
            border-radius: 20px;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.06) 25%,
                    rgba(255, 255, 255, 0.12) 50%,
                    rgba(255, 255, 255, 0.06) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            flex-shrink: 0;
        }

        .skeleton-lines {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 60px;
            flex: 1;
        }

        .skeleton-line {
            height: 14px;
            border-radius: 7px;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.05) 25%,
                    rgba(255, 255, 255, 0.1) 50%,
                    rgba(255, 255, 255, 0.05) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .skeleton-line.w60 {
            width: 60%;
        }

        .skeleton-line.w40 {
            width: 40%;
        }

        .skeleton-line.w80 {
            width: 80%;
        }

        .skeleton-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            padding: 30px;
        }

        .skeleton-card {
            aspect-ratio: 1;
            border-radius: 16px;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.04) 25%,
                    rgba(255, 255, 255, 0.08) 50%,
                    rgba(255, 255, 255, 0.04) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite 0.2s;
        }

        .edit-profile-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .edit-profile-modal.open {
            opacity: 1;
            pointer-events: all;
        }

        .edit-profile-container {
            background: #0f0f0f;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            width: 90%;
            max-width: 560px;
            max-height: 85vh;
            overflow-y: auto;
            padding: 32px;
            transform: translateY(20px);
            transition: transform 0.3s;
        }

        .edit-profile-modal.open .edit-profile-container {
            transform: translateY(0);
        }

        .edit-profile-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
        }

        .edit-profile-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            margin: 0;
        }

        .btn-close-modal {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.5);
            font-size: 20px;
            cursor: pointer;
            padding: 4px 8px;
            transition: color 0.2s;
        }

        .btn-close-modal:hover {
            color: white;
        }

        .edit-section {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .edit-section label {
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            opacity: 0.5;
        }

        .edit-section input,
        .edit-section textarea {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 12px 16px;
            color: white;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
            font-family: inherit;
        }

        .edit-section input:focus,
        .edit-section textarea:focus {
            border-color: rgba(162, 155, 254, 0.5);
        }

        .edit-section textarea {
            resize: vertical;
            min-height: 80px;
        }

        .char-count {
            font-size: 11px;
            opacity: 0.4;
            text-align: right;
        }

        .role-btn-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .role-btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: capitalize;
            letter-spacing: 0.5px;
        }

        .role-btn:hover {
            border-color: rgba(162, 155, 254, 0.5);
            color: white;
        }

        .role-btn.selected {
            background: rgba(108, 92, 231, 0.3);
            border-color: rgba(162, 155, 254, 0.7);
            color: white;
        }

        .edit-profile-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .edit-profile-footer .btn-cancel {
            padding: 10px 24px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: transparent;
            color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }

        .edit-profile-footer .btn-cancel:hover {
            color: white;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .edit-profile-footer .btn-save {
            padding: 10px 28px;
            border-radius: 12px;
            border: none;
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            color: white;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.2s;
        }

        .edit-profile-footer .btn-save:hover {
            opacity: 0.9;
        }

        .edit-profile-footer .btn-save:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .follow-list-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(8px);
            z-index: 100001;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .follow-list-modal.open {
            opacity: 1;
            pointer-events: all;
        }

        .follow-list-container {
            width: 92%;
            max-width: 520px;
            max-height: 80vh;
            overflow: hidden;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: #0f0d16;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
            transform: translateY(18px);
            transition: transform 0.25s ease;
            display: flex;
            flex-direction: column;
        }

        .follow-list-modal.open .follow-list-container {
            transform: translateY(0);
        }

        .follow-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .follow-list-title {
            margin: 0;
            font-size: 16px;
            letter-spacing: 0.6px;
            color: #fff;
        }

        .follow-list-body {
            overflow-y: auto;
            padding: 10px;
        }

        .follow-list-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid transparent;
            background: rgba(255, 255, 255, 0.02);
            transition: all 0.2s ease;
            margin-bottom: 8px;
        }

        .follow-list-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            cursor: pointer;
            flex: 1;
        }

        .follow-list-item:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(162, 155, 254, 0.35);
        }

        .follow-avatar {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            color: #fff;
            flex-shrink: 0;
            overflow: hidden;
        }

        .follow-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }

        .follow-name {
            color: #fff;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-follow-mini {
            border: 1px solid rgba(162, 155, 254, 0.45);
            background: rgba(162, 155, 254, 0.16);
            color: #d7d2ff;
            border-radius: 10px;
            font-size: 11px;
            padding: 7px 10px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .btn-follow-mini.following {
            border-color: rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        .stat-item.stat-clickable {
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .stat-item.stat-clickable:hover {
            opacity: 0.95;
        }

        /* Profile Social Link Icons */
        .profile-social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
            backdrop-filter: blur(10px);
        }

        .profile-social-icon:hover {
            background: rgba(162, 155, 254, 0.25);
            color: #fff;
            border-color: rgba(162, 155, 254, 0.5);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(162, 155, 254, 0.3);
        }

        .profile-avatar-wrapper {
            position: relative;
            width: 120px;
            height: 120px;
            z-index: 10;
            flex-shrink: 0;
            border-radius: 24px;
        }

        .profile-avatar {
            width: 100%;
            height: 100%;
            border-radius: 24px;
            background: #6c5ce7;
            border: 3px solid rgba(255, 255, 255, 0.25);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            font-weight: 800;
            color: #fff;
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
            cursor: zoom-in;
            backdrop-filter: blur(8px);
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }

        .avatar-lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(8px);
            z-index: 100010;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .avatar-lightbox.open {
            display: flex;
        }

        .avatar-lightbox img {
            max-width: min(92vw, 820px);
            max-height: 82vh;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
            object-fit: contain;
            background: #111;
        }



        .profile-info {
            padding: 24px 40px;
        }

        .profile-info h1 {
            font-family: 'Playfair Display', serif;
            font-size: 38px;
            color: #fff;
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }

        .profile-sub-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 20px;
        }

        .role-tag {
            background: rgba(108, 92, 231, 0.15);
            color: #a29bfe;
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .profile-bio {
            font-size: 15px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.7);
            max-width: 600px;
            margin-bottom: 32px;
        }

        /* Profile Hero Stats */
        .profile-hero-stats {
            display: flex;
            gap: 40px;
            margin-left: auto;
            padding-bottom: 4px;
        }

        .hero-stat {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .hero-stat:hover {
            opacity: 0.7;
        }

        .hero-stat .stat-value {
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            line-height: 1;
        }

        .hero-stat .stat-label {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.45);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 6px;
            font-weight: 600;
        }

        .profile-actions {
            display: flex;
            gap: 12px;
            margin-bottom: 48px;
            justify-content: flex-start;
        }

        .btn-profile-action {
            margin: 0;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            color: #fff;
        }

        .btn-profile-action.primary {
            background: #fff;
            color: #07040f;
            border: none;
        }

        .btn-profile-action:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .btn-profile-action.primary:hover {
            background: #eee;
            box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
        }

        .taste-map-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 48px;
        }

        .taste-tag {
            background: rgba(108, 92, 231, 0.12);
            border: 1px solid rgba(162, 155, 254, 0.25);
            color: #d1d8ff;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.4px;
            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            backdrop-filter: blur(4px);
        }

        .taste-tag:hover {
            background: rgba(108, 92, 231, 0.25);
            border-color: rgba(162, 155, 254, 0.6);
            color: #fff;
            transform: scale(1.08) translateY(-2px);
            box-shadow: 0 0 20px rgba(162, 155, 254, 0.25);
        }

        .profile-artworks-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
        }

        .profile-art-card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.4s;
            cursor: pointer;
        }

        .profile-art-card:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        }

        .profile-art-img-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
        }

        .profile-art-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s;
        }

        .profile-art-card:hover .profile-art-img {
            transform: scale(1.05);
        }

        .profile-art-like-btn {
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: none;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            backdrop-filter: blur(4px);
            z-index: 5;
        }

        .profile-art-like-btn:hover {
            background: rgba(255, 50, 50, 0.85);
            transform: scale(1.1);
        }

        .profile-art-like-btn.liked {
            background: rgba(255, 50, 50, 0.9);
        }

        .btn-profile-toggle {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 10px;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: all 0.2s;
            letter-spacing: 0.5px;
            z-index: 5;
        }

        .btn-profile-toggle.active {
            background: rgba(108, 92, 231, 0.8);
            border-color: rgba(162, 155, 254, 0.6);
        }

        .profile-art-menu-btn {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.45);
            color: #fff;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            z-index: 6;
            backdrop-filter: blur(6px);
        }

        .profile-art-menu {
            position: absolute;
            top: 44px;
            left: 8px;
            min-width: 180px;
            background: rgba(12, 10, 20, 0.95);
            border: 1px solid rgba(162, 155, 254, 0.25);
            border-radius: 12px;
            padding: 6px;
            display: none;
            z-index: 7;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
        }

        .profile-art-menu.open {
            display: block;
        }

        .profile-art-menu button {
            width: 100%;
            text-align: left;
            border: none;
            background: transparent;
            color: #fff;
            font-size: 12px;
            padding: 9px 10px;
            border-radius: 8px;
            cursor: pointer;
        }

        .profile-art-menu button:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .profile-art-menu button.danger:hover {
            background: rgba(255, 71, 87, 0.18);
            color: #ffb3be;
        }

        .media-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
        }

        .btn-upload-media {
            border: 1px solid rgba(162, 155, 254, 0.45);
            background: rgba(162, 155, 254, 0.14);
            color: #e9e7ff;
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
        }

        .profile-art-meta {
            padding: 10px 12px 12px;
        }

        .profile-art-title {
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-art-sub {
            font-size: 11px;
            opacity: 0.5;
            margin-top: 3px;
            letter-spacing: 0.3px;
        }

        .profile-art-price {
            font-size: 12px;
            color: #a29bfe;
            margin-top: 4px;
            font-weight: 600;
        }

        .profile-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        .profile-section-title {
            font-size: 18px;
            font-family: 'Playfair Display', serif;
        }

        .profile-artwork-count {
            font-size: 12px;
            opacity: 0.4;
            letter-spacing: 0.5px;
        }

        .profile-empty-artworks {
            text-align: center;
            padding: 60px 20px;
            opacity: 0.4;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        /* USER LINK STYLES */
        .user-link {
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: opacity 0.2s;
        }

        .user-link:hover {
            opacity: 0.7;
        }

        /* Vault Toggle Switch */
        .vault-toggle-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .vault-toggle-label {
            display: flex;
            flex-direction: column;
            color: #000;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.toggle-slider {
            background-color: #6c5ce7;
        }

        input:checked+.toggle-slider:before {
            transform: translateX(20px);
        }

        /* Mobile specific adjustments */
        @media (max-width: 640px) {
            .profile-info {
                padding: 24px 20px;
            }

            .profile-avatar-wrapper {
                margin-left: 20px;
                width: 100px;
                height: 100px;
                margin-top: -50px;
            }

            .profile-info h1 {
                font-size: 28px;
            }

            .profile-stats {
                gap: 12px;
            }

            .profile-artworks-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ZETA Kaynaklar Butonu (Accordion) */
        .zeta-sources-accordion {
            margin-top: 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            background: rgba(20, 20, 22, 0.4);
            backdrop-filter: blur(10px);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .zeta-sources-accordion summary {
            padding: 14px 20px;
            font-size: 14px;
            font-weight: 500;
            color: #ccc;
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            outline: none;
            user-select: none;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .zeta-sources-accordion summary::-webkit-details-marker {
            display: none;
        }

        .zeta-sources-accordion summary::after {
            content: '+';
            font-size: 18px;
            font-weight: 300;
            color: #888;
            transition: transform 0.3s ease;
        }

        .zeta-sources-accordion[open] summary {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .zeta-sources-accordion[open] summary::after {
            content: '−';
            transform: rotate(180deg);
        }

        .zeta-sources-accordion ul {
            margin: 0;
            padding: 16px 20px 20px 20px;
            list-style: none;
        }

        .zeta-sources-accordion li {
            position: relative;
            padding-left: 16px;
            margin-bottom: 10px;
            font-size: 13px;
            color: #aaa;
            line-height: 1.5;
        }

        .zeta-sources-accordion li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.48em;
            width: 4px;
            height: 4px;
            border-radius: 1px;
            background: linear-gradient(135deg, #e0dcff 0%, #a29bfe 60%, #7c6ee0 100%);
            box-shadow: 0 0 5px rgba(162, 155, 254, 0.35);
            transform: rotate(45deg);
        }

        .zeta-sources-accordion li:last-child {
            margin-bottom: 0;
        }

        .zeta-sources-accordion a {
            color: #e5e5e5;
            text-decoration: none;
            transition: color 0.2s;
        }

        .zeta-sources-accordion a:hover {
            color: #fff;
            text-decoration: underline;
        }

        .zeta-sources-accordion em {
            color: #777;
            font-style: normal;
            font-size: 12px;
            margin-left: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ============================================================
           ZETA INFO ICON & TOOLTIP
           ============================================================ */
        .zeta-info-container {
            position: relative;
            display: flex;
            align-items: center;
            margin-right: 8px;
        }

        .btn-info-zeta {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #a29bfe;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .btn-info-zeta:hover {
            background: rgba(162, 155, 254, 0.15);
            border-color: #a29bfe;
            color: #fff;
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(162, 155, 254, 0.3);
        }

        .zeta-info-tooltip {
            position: absolute;
            bottom: 45px;
            right: 0;
            width: 420px;
            background: rgba(15, 9, 32, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(162, 155, 254, 0.3);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 10000;
            pointer-events: none;
        }

        .zeta-info-tooltip.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .zeta-info-tooltip h4 {
            font-family: 'Playfair Display', serif;
            font-size: 17px;
            color: #fff;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        .zeta-info-tooltip .formula {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: #a29bfe;
            background: rgba(162, 155, 254, 0.08);
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 16px;
            font-weight: 500;
            border: 1px solid rgba(162, 155, 254, 0.2);
            text-align: center;
        }

        .zeta-info-tooltip .params {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .zeta-info-tooltip .param-item {
            position: relative;
            font-size: 12px;
            color: #c8bed8;
            line-height: 1.4;
            padding: 6px 8px;
            border-radius: 8px;
            cursor: help;
            transition: all 0.2s ease;
        }

        .zeta-info-tooltip .param-item:hover {
            background: rgba(162, 155, 254, 0.1);
            color: #fff;
        }

        .zeta-info-tooltip .param-item strong {
            color: #fff;
            margin-right: 4px;
        }

        .mini-tooltip {
            position: absolute;
            left: 50%;
            bottom: 110%;
            transform: translateX(-50%) translateY(10px);
            width: 320px;
            background: #a29bfe;
            color: #0f0920;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            line-height: 1.4;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 10001;
            pointer-events: none;
            text-align: left;
        }

        .mini-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: #a29bfe transparent transparent transparent;
        }

        .zeta-info-tooltip .param-item:hover .mini-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
    


        @keyframes vaultSpin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes vaultCorePulse {

            0%,
            100% {
                opacity: 0.4;
                transform: scale(0.75);
            }

            50% {
                opacity: 1;
                transform: scale(1.25);
                box-shadow: 0 0 18px rgba(162, 155, 254, 0.9);
            }
        }
    


                                .wiz-autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; max-height: 150px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.5); margin-top: 5px;}
                                .wiz-autocomplete-dropdown.active { display: block; }
                                .wiz-autocomplete-item { padding: 8px 12px; font-size: 13px; color: #ccc; cursor: pointer; text-align: left; }
                                .wiz-autocomplete-item:hover { background: rgba(255,255,255,0.1); color: #fff; }