/* --- TEMEL AYARLAR --- */
        :root {
            --bg-dark: #09090b;
            --bg-card: #18181b;
            --primary: #e11d48;
            --gold: #fbbf24;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background-color: #000;
            color: #fff;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        h1, h2, h3, .serif { font-family: 'Cinzel', serif; }

        /* --- MOBİL KONTEYNER --- */
        #app-root {
            width: 100%;
            height: 100%;
            max-width: 440px;
            max-height: 920px;
            background-color: var(--bg-dark);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 50px rgba(225, 29, 72, 0.1);
        }

        @media (min-width: 450px) {
            #app-root {
                height: 95vh;
                border-radius: 32px;
                border: 8px solid #202020;
            }
        }

        /* --- UTILS --- */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* --- VIEW TRANSITIONS --- */
        .view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-dark);
            transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
            will-change: transform, opacity;
            z-index: 10;
            display: flex;
            flex-direction: column;
        }

        /* View IDs & States */
        .view.active { transform: translateX(0); opacity: 1; z-index: 20; }
        .view.hidden-right { transform: translateX(100%); opacity: 0; z-index: 10; }
        .view.hidden-left { transform: translateX(-20%); opacity: 0.5; z-index: 5; }
        .view.hidden-scale { transform: scale(0.95); opacity: 0; pointer-events: none; z-index: 5; }
        .view.hidden-down { transform: translateY(100%); opacity: 0; z-index: 30; }

        /* --- COMPONENTS --- */
        .glass {
            background: rgba(24, 24, 27, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .glass-card {
            background: rgba(30, 30, 35, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .btn-press { transition: transform 0.1s; cursor: pointer; }
        .btn-press:active { transform: scale(0.95); }

        .premium-gradient { background: linear-gradient(135deg, #be123c 0%, #9f1239 100%); }
        .gold-gradient { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }

        /* Story Progress Bar */
        .story-progress {
            position: absolute;
            top: 10px;
            left: 5px;
            right: 5px;
            display: flex;
            gap: 4px;
            z-index: 50;
        }
        .progress-segment {
            height: 3px;
            background: rgba(255,255,255,0.3);
            flex: 1;
            border-radius: 2px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: white;
            width: 0%;
        }
        .story-active .progress-fill {
            animation: fillProgress 5s linear forwards;
        }
        @keyframes fillProgress { from { width: 0%; } to { width: 100%; } }

        /* Chat & Footer Styles */
        .nav-icon { transition: color 0.3s ease; }
        .nav-icon.active { color: #e11d48; }
        
        .chat-bubble {
            max-width: 80%;
            padding: 12px 16px;
            font-size: 0.9rem;
            line-height: 1.4;
            border-radius: 16px;
            position: relative;
            animation: fadeIn 0.3s ease;
        }
        .chat-sent { background: #be123c; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
        .chat-received { background: #27272a; color: #e5e5e5; align-self: flex-start; border-bottom-left-radius: 4px; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        /* Package Selection */
        .package-card.selected {
            border-color: #fbbf24;
            background-color: rgba(251, 191, 36, 0.1);
            transform: scale(1.02);
        }

        /* --- AUTH STYLES --- */
        .auth-input:focus-within {
            border-color: #e11d48;
            background-color: rgba(225, 29, 72, 0.05);
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
        }

        #view-auth > .absolute {
            z-index: 0;
        }

        #view-auth > .relative {
            z-index: 10;
        }