/* ============================================
   MIKEL COFFEE - ULTRA MODERN EDITION
   Theme: Glassmorphism + Neon + Fluid Motion
   ============================================ */

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

:root {
    /* --- COLOR PALETTE --- */
    --bg-deep: #050505;
    --bg-rich: #0a0908;
    --bg-card: #121010;
    --bg-elevated: #1a1614;
    
    --gold-primary: #D4AF37;
    --gold-glow: #ffd700;
    --gold-light: #f5d76e;
    --gold-dim: #8a6e2f;
    
    --accent-warm: #ff6b35;
    --accent-rose: #ff4d6d;
    --accent-purple: #9d4edd;
    
    --text-main: #f8f6f0;
    --text-muted: #9a918a;
    --text-dim: #5a524c;
    
    /* --- GLASS EFFECTS --- */
    --glass-bg: rgba(18, 16, 16, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    
    /* --- SHADOWS --- */
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 40px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 40px rgba(212, 175, 55, 0.15);
    
    /* --- FONTS --- */
    --font-display: 'Cinzel', serif;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* --- TRANSITIONS --- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-deep);
    color: var(--text-main);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ANIMATED BACKGROUND SYSTEM
   ============================================ */
.ambient-light {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(212, 175, 55, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255, 107, 53, 0.05), transparent),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(157, 78, 221, 0.03), transparent);
    animation: ambientShift 20s ease-in-out infinite alternate;
}

@keyframes ambientShift {
    0% { opacity: 0.6; filter: hue-rotate(0deg); }
    50% { opacity: 1; filter: hue-rotate(10deg); }
    100% { opacity: 0.8; filter: hue-rotate(-10deg); }
}

/* Mesh Gradient Overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        conic-gradient(from 180deg at 50% 50%, 
            transparent 0deg, 
            rgba(212, 175, 55, 0.02) 60deg, 
            transparent 120deg,
            rgba(255, 107, 53, 0.02) 180deg,
            transparent 240deg,
            rgba(157, 78, 221, 0.02) 300deg,
            transparent 360deg);
    animation: meshRotate 60s linear infinite;
    z-index: -2;
}

@keyframes meshRotate {
    to { transform: rotate(360deg); }
}

/* Noise Texture */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   FLOATING PARTICLES
   ============================================ */
.floating-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--gold-glow);
    box-shadow: 0 0 20px var(--gold-primary), 0 0 40px var(--gold-dim);
    animation: particleFloat linear infinite;
    opacity: 0;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(-10vh) rotate(720deg) scale(1);
        opacity: 0;
    }
}

.p1 { width: 3px; height: 3px; left: 10%; animation-duration: 25s; }
.p2 { width: 4px; height: 4px; left: 25%; animation-duration: 35s; animation-delay: 3s; }
.p3 { width: 2px; height: 2px; left: 50%; animation-duration: 28s; animation-delay: 7s; }
.p4 { width: 5px; height: 5px; left: 75%; animation-duration: 32s; animation-delay: 12s; }

/* ============================================
   CONTAINER & UTILITIES
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* ============================================
   HERO SECTION - CINEMATIC ENTRANCE
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 2rem;
}

/* Hero Background Image with Parallax */
.hero::before {
    content: '';
    position: absolute;
    inset: -50px;
    background: url('../images/bg-coffe.jpg') center/cover no-repeat;
    opacity: 0.2;
    filter: brightness(0.5) saturate(1.2) blur(2px);
    animation: heroZoom 30s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes heroZoom {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1.15) translateY(-20px); }
}

/* Vignette Effect */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, var(--bg-deep) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    animation: heroFadeIn 1.5s var(--ease-out-expo) forwards;
    opacity: 0;
    transform: translateY(40px);
}

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

/* Logo System */
.logo-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated Ring - arkada dönen halka */
.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--gold-primary) 60deg,
        var(--gold-glow) 120deg,
        transparent 180deg,
        var(--accent-warm) 240deg,
        transparent 300deg,
        var(--gold-primary) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    animation: ringRotate 8s linear infinite;
    filter: blur(1px);
    z-index: 1;
}

@keyframes ringRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.logo-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--bg-elevated), var(--bg-rich));
    padding: 8px;
    position: relative;
    z-index: 2;
    box-shadow: 
        var(--shadow-lg),
        inset 0 2px 10px rgba(255,255,255,0.05),
        0 0 80px rgba(212, 175, 55, 0.1);
    animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.logo-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(212, 175, 55, 0.2);
}

/* Hero Title */
.hero-title {
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.title-line {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 900;
    display: block;
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(
        180deg,
        #fff 0%,
        #fff 40%,
        var(--gold-primary) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 30px rgba(212, 175, 55, 0.3));
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% { filter: drop-shadow(0 4px 30px rgba(212, 175, 55, 0.2)); }
    100% { filter: drop-shadow(0 4px 50px rgba(212, 175, 55, 0.4)); }
}

.title-sub {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--gold-glow);
    display: inline;
    margin-top: 1.2rem;
    min-height: 1.5em;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.cursor-blink {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--gold-glow);
    animation: cursorBlink 1s infinite;
    margin-left: 2px;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Glass Badges */
.hero-badges {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.badge-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 1rem 2rem;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-muted);
    transition: all 0.5s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.badge-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-shine);
    opacity: 0;
    transition: opacity 0.5s;
}

.badge-glass:hover::before { opacity: 1; }

.badge-glass i {
    color: var(--gold-primary);
    font-size: 1.1rem;
    transition: transform 0.5s var(--ease-out-back);
}

.badge-glass:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: #fff;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);
}

.badge-glass:hover i {
    transform: scale(1.2) rotate(10deg);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s;
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.scroll-indicator:hover {
    color: var(--gold-primary);
    transform: translateX(-50%) translateY(5px);
}

.scroll-indicator i {
    font-size: 1.2rem;
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}


/* ============================================
   WIFI DOCK - FLOATING GLASS BAR
   ============================================ */
.wifi-dock {
    display: flex;
    justify-content: center;
    margin-top: -40px;
    position: relative;
    z-index: 20;
    padding: 0 1rem;
}

.wifi-content {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    padding: 1rem 2.5rem;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    transition: all 0.5s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.wifi-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: wifiShine 4s ease-in-out infinite;
}

@keyframes wifiShine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.wifi-content:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg), 0 0 60px rgba(212, 175, 55, 0.2);
}

.wifi-icon {
    color: var(--gold-glow);
    font-size: 1.4rem;
    animation: wifiPulse 2s ease-in-out infinite;
}

@keyframes wifiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.wifi-info {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.wifi-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.wifi-pass {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 2px;
    font-weight: 600;
}

.wifi-copy-btn {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.4s var(--ease-out-back);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wifi-copy-btn:hover {
    background: var(--gold-primary);
    color: #000;
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.wifi-copy-btn:active {
    transform: scale(0.95);
}

/* ============================================
   SECTION HEADERS - PREMIUM EDITION
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

/* Decorative Line */
.section-header::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--gold-primary), 
        var(--gold-glow), 
        var(--gold-primary), 
        transparent);
    border-radius: 2px;
    animation: headerLineGlow 3s ease-in-out infinite;
}

@keyframes headerLineGlow {
    0%, 100% { 
        width: 60px;
        opacity: 0.7;
    }
    50% { 
        width: 100px;
        opacity: 1;
    }
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, 
        var(--gold-primary) 0%, 
        var(--gold-glow) 25%, 
        #fff 50%, 
        var(--gold-glow) 75%, 
        var(--gold-primary) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 5s ease infinite;
    margin-bottom: 1rem;
    text-shadow: 0 0 80px rgba(212, 175, 55, 0.3);
    position: relative;
    display: inline-block;
}

.section-header h2 i {
    margin-right: 0.5rem;
    -webkit-text-fill-color: var(--gold-primary);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 300% center; }
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Menu Header Special Style */
.menu-header {
    margin-bottom: 2rem;
}

.menu-header h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
}

/* ============================================
   CAMPAIGNS - GOLDEN TICKETS
   ============================================ */
.campaigns-section {
    padding: 8rem 0;
    position: relative;
}

.campaigns-grid {
    display: grid;
    gap: 2rem;
    max-width: 950px;
    margin: 0 auto;
}

.golden-ticket {
    background: linear-gradient(145deg, var(--bg-elevated), var(--bg-card));
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 24px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.6s var(--ease-out-expo);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.golden-ticket::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent 50%);
    opacity: 0;
    transition: opacity 0.5s;
}

.golden-ticket:hover::before { opacity: 1; }

.golden-ticket:hover {
    transform: translateY(-12px) rotateX(2deg);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 
        var(--shadow-lg),
        0 0 50px rgba(212, 175, 55, 0.15),
        0 30px 60px rgba(0, 0, 0, 0.3);
}

.ticket-left {
    padding: 2.5rem;
    flex: 1;
    position: relative;
    border-right: 2px dashed rgba(212, 175, 55, 0.2);
}

.ticket-hole {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--bg-deep);
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.2);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
}

.ticket-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    color: var(--gold-glow);
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    animation: tagPulse 3s ease-in-out infinite;
}

@keyframes tagPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 20px 5px rgba(212, 175, 55, 0.1); }
}

.ticket-content h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 1.2rem 0 0.8rem;
    line-height: 1.3;
}

.ticket-content p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.ticket-right {
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1), transparent);
    position: relative;
}

.ticket-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    animation: ticketGlow 4s linear infinite;
}

@keyframes ticketGlow {
    to { transform: rotate(360deg); }
}

.discount-box {
    text-align: center;
    color: var(--gold-glow);
    position: relative;
    z-index: 2;
}

.discount-val {
    font-size: 3rem;
    font-weight: 900;
    display: block;
    line-height: 1;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    animation: discountPulse 2s ease-in-out infinite;
}

@keyframes discountPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.discount-lbl {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: 0.8;
    margin-top: 0.3rem;
    display: block;
}

/* ============================================
   PROFESSION DISCOUNTS - HOLOGRAPHIC CARDS
   ============================================ */
.profession-section {
    padding: 6rem 0;
    position: relative;
}

.holo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.holo-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    border: 1px solid var(--glass-border);
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.6s var(--ease-out-expo);
    cursor: pointer;
}

.holo-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(212, 175, 55, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 60%,
        transparent 100%
    );
    background-size: 300% 300%;
    background-position: 100% 100%;
    transition: background-position 0.8s ease;
    pointer-events: none;
}

.holo-card:hover .holo-shine {
    background-position: 0% 0%;
}

.holo-card:hover {
    transform: translateY(-20px) scale(1.02) rotateY(5deg);
    border-color: var(--gold-primary);
    box-shadow: 
        var(--shadow-lg),
        0 0 60px rgba(212, 175, 55, 0.15),
        -10px 10px 30px rgba(0, 0, 0, 0.3);
}

.holo-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
    transition: transform 0.5s var(--ease-out-back);
}

.holo-card:hover .holo-icon {
    transform: scale(1.2) rotate(10deg);
}

.holo-content h4 {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.holo-discount {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border: 2px solid var(--gold-primary);
    border-radius: 100px;
    color: var(--gold-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 0.5rem;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}

.holo-discount::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out-expo);
    z-index: -1;
}

.holo-card:hover .holo-discount::before {
    transform: scaleX(1);
}

.holo-card:hover .holo-discount {
    color: #000;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}


/* ============================================
   MENU SECTION - PREMIUM LIQUID NAVIGATION
   ============================================ */
.menu-wrapper {
    padding: 5rem 0 10rem;
    position: relative;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(212, 175, 55, 0.02) 20%,
        rgba(212, 175, 55, 0.03) 50%,
        rgba(212, 175, 55, 0.02) 80%,
        transparent 100%);
}

/* Decorative Background Elements */
.menu-wrapper::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatBg 20s ease-in-out infinite;
}

.menu-wrapper::after {
    content: '';
    position: absolute;
    bottom: 20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatBg 25s ease-in-out infinite reverse;
}

@keyframes floatBg {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Category Pills - PREMIUM Sticky Navigation */
.category-dock {
    position: sticky;
    top: 20px;
    z-index: 100;
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
}

.pill-scroller {
    background: linear-gradient(135deg, 
        rgba(20, 18, 16, 0.9) 0%, 
        rgba(15, 12, 10, 0.95) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 100px;
    padding: 0.7rem;
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(212, 175, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 95vw;
    position: relative;
}

/* Animated Border Glow */
.pill-scroller {
    border: 2px solid rgba(212, 175, 55, 0.4);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.15),
        0 0 40px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: pillBorderGlow 3s ease-in-out infinite;
}

@keyframes pillBorderGlow {
    0%, 100% { 
        border-color: rgba(212, 175, 55, 0.3);
        box-shadow: 
            0 15px 50px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(212, 175, 55, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    50% { 
        border-color: rgba(255, 215, 0, 0.6);
        box-shadow: 
            0 15px 50px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(212, 175, 55, 0.25),
            0 0 60px rgba(212, 175, 55, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

.pill-scroller::before {
    display: none;
}

.pill-scroller::-webkit-scrollbar {
    display: none;
}

/* Hidden radio inputs */
.cat-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cat-pill {
    padding: 0.9rem 2rem;
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.5s var(--ease-out-expo);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    background: transparent;
    letter-spacing: 0.3px;
}

.cat-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        var(--gold-primary) 0%, 
        var(--gold-glow) 50%, 
        var(--gold-primary) 100%);
    background-size: 200% 200%;
    border-radius: 100px;
    transform: scale(0);
    transition: transform 0.5s var(--ease-out-expo);
    z-index: -1;
}

/* Shimmer effect on hover */
.cat-pill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.6s ease;
}

.cat-pill:hover::after {
    left: 100%;
}

.cat-pill:hover {
    color: #fff;
    background: rgba(212, 175, 55, 0.1);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

/* Active pill styling via JS */
.cat-pill.active-pill {
    color: #000;
    font-weight: 800;
    text-shadow: none;
}

.cat-pill.active-pill::before {
    transform: scale(1);
    box-shadow: 
        0 8px 30px rgba(212, 175, 55, 0.5),
        0 0 50px rgba(212, 175, 55, 0.2);
    animation: activePillGlow 2s ease-in-out infinite;
}

@keyframes activePillGlow {
    0%, 100% { 
        background-position: 0% 50%;
        box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
    }
    50% { 
        background-position: 100% 50%;
        box-shadow: 0 8px 40px rgba(212, 175, 55, 0.7);
    }
}

/* ============================================
   🌟 MENU CARDS - ULTRA LUXE NEON EDITION 🌟
   Glassmorphism + Holographic + 3D Effects
   ============================================ */

/* Menu Section Header */
.menu-section-header {
    text-align: center;
    padding: 4rem 0 2rem;
    position: relative;
}

.menu-section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, 
        #fff 0%, 
        var(--gold-primary) 25%, 
        var(--gold-glow) 50%, 
        var(--gold-primary) 75%, 
        #fff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: menuTitleShine 5s ease infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}

@keyframes menuTitleShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Grid Container */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 3rem auto;
    padding: 0 1.5rem;
    perspective: 2000px;
}

/* Product Card - SPECTACULAR 3D CARD */
.pcard {
    display: none;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-out-expo);
}

/* Staggered Animation on Load */
.pcard:nth-child(1) { animation-delay: 0.05s; }
.pcard:nth-child(2) { animation-delay: 0.1s; }
.pcard:nth-child(3) { animation-delay: 0.15s; }
.pcard:nth-child(4) { animation-delay: 0.2s; }
.pcard:nth-child(5) { animation-delay: 0.25s; }
.pcard:nth-child(6) { animation-delay: 0.3s; }
.pcard:nth-child(7) { animation-delay: 0.35s; }
.pcard:nth-child(8) { animation-delay: 0.4s; }
.pcard:nth-child(9) { animation-delay: 0.45s; }
.pcard:nth-child(10) { animation-delay: 0.5s; }
.pcard:nth-child(11) { animation-delay: 0.55s; }
.pcard:nth-child(12) { animation-delay: 0.6s; }

/* Category Filter */
.menu-wrapper:has(#cat-1:checked) .pcard,
.menu-wrapper:has(#cat-2:checked) .pcard,
.menu-wrapper:has(#cat-3:checked) .pcard,
.menu-wrapper:has(#cat-4:checked) .pcard,
.menu-wrapper:has(#cat-5:checked) .pcard,
.menu-wrapper:has(#cat-6:checked) .pcard,
.menu-wrapper:has(#cat-7:checked) .pcard,
.menu-wrapper:has(#cat-8:checked) .pcard,
.menu-wrapper:has(#cat-9:checked) .pcard,
.menu-wrapper:has(#cat-10:checked) .pcard {
    display: none;
}

.menu-wrapper:has(#cat-1:checked) .pcard[data-category="1"],
.menu-wrapper:has(#cat-2:checked) .pcard[data-category="2"],
.menu-wrapper:has(#cat-3:checked) .pcard[data-category="3"],
.menu-wrapper:has(#cat-4:checked) .pcard[data-category="4"],
.menu-wrapper:has(#cat-5:checked) .pcard[data-category="5"],
.menu-wrapper:has(#cat-6:checked) .pcard[data-category="6"],
.menu-wrapper:has(#cat-7:checked) .pcard[data-category="7"],
.menu-wrapper:has(#cat-8:checked) .pcard[data-category="8"],
.menu-wrapper:has(#cat-9:checked) .pcard[data-category="9"],
.menu-wrapper:has(#cat-10:checked) .pcard[data-category="10"] {
    display: block;
    animation: pcardIn 0.5s ease forwards;
}

@keyframes pcardIn {
    0% { 
        opacity: 0; 
        transform: translateY(60px) rotateX(-15deg) scale(0.9);
        filter: blur(10px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) rotateX(0) scale(1);
        filter: blur(0);
    }
}

/* Card Floating Animation */
@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Card Inner - GOLDEN LUXE FRAME */
.pcard-inner {
    position: relative;
    background: linear-gradient(165deg, 
        rgba(35, 28, 24, 0.97) 0%, 
        rgba(18, 14, 12, 0.99) 40%,
        rgba(25, 20, 18, 0.97) 100%);
    backdrop-filter: blur(25px) saturate(1.2);
    -webkit-backdrop-filter: blur(25px) saturate(1.2);
    border-radius: 24px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    overflow: hidden;
    transition: all 0.7s var(--ease-out-expo);
    transform-style: preserve-3d;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ✨ HOLOGRAPHIC RAINBOW BORDER ✨ */
.pcard-inner::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 35px;
    background: conic-gradient(
        from 0deg,
        rgba(212, 175, 55, 0.8) 0deg,
        rgba(255, 215, 0, 1) 40deg,
        rgba(255, 180, 50, 0.9) 80deg,
        rgba(255, 107, 53, 0.7) 120deg,
        rgba(255, 77, 109, 0.5) 160deg,
        rgba(157, 78, 221, 0.6) 200deg,
        rgba(100, 149, 237, 0.5) 240deg,
        rgba(157, 78, 221, 0.6) 280deg,
        rgba(255, 107, 53, 0.7) 320deg,
        rgba(212, 175, 55, 0.8) 360deg
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: holoBorderSpin 6s linear infinite;
    filter: blur(2px);
}

@keyframes holoBorderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pcard:hover .pcard-inner::before {
    opacity: 1;
}

/* Neon Glow Layer */
.pcard-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212, 175, 55, 0.25), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 120%, rgba(255, 107, 53, 0.15), transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.pcard:hover .pcard-inner::after {
    opacity: 1;
}

/* 🔥 SPECTACULAR HOVER STATE 🔥 */
.pcard:hover .pcard-inner {
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-12px) rotateX(5deg) rotateY(-2deg) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(212, 175, 55, 0.3),
        0 0 30px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 📸 IMAGE CONTAINER - CINEMATIC STYLE */
.pcard-img {
    height: 240px;
    overflow: hidden;
    position: relative;
    border-radius: 32px 32px 0 0;
}

/* Animated Shimmer Overlay */
.pcard-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(212, 175, 55, 0.15) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 80%
    );
    background-size: 250% 100%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: luxeShimmer 2s ease-in-out infinite;
}

@keyframes luxeShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pcard:hover .pcard-img::before {
    opacity: 1;
}

/* Image Styling */
.pcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s var(--ease-out-expo);
    filter: brightness(0.85) saturate(1.15) contrast(1.05);
}

.pcard:hover .pcard-img img {
    transform: scale(1.15) rotate(1deg);
    filter: brightness(1.1) saturate(1.3) contrast(1.1);
}

/* Emoji Placeholder - Animated */
.pcard-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 5.5rem;
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(212, 175, 55, 0.1), transparent 50%),
        linear-gradient(160deg, #1e1816 0%, #0c0a09 100%);
    transition: all 0.6s var(--ease-out-back);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.pcard:hover .pcard-emoji {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 15px 40px rgba(212, 175, 55, 0.3));
}

/* Cinematic Gradient Overlay */
.pcard-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(
        to top, 
        rgba(18, 14, 12, 0.9) 0%,
        rgba(18, 14, 12, 0.5) 40%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Vignette Effect */
.pcard-img > .vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 📝 INFO SECTION - ELEGANT TYPOGRAPHY */
.pcard-info {
    padding: 2rem 2rem 2.2rem;
    position: relative;
    z-index: 4;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* Product Name - Luxurious */
.pcard-info h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
    transition: all 0.5s var(--ease-out-expo);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.pcard:hover .pcard-info h3 {
    color: var(--gold-glow);
    text-shadow: 
        0 0 20px rgba(212, 175, 55, 0.5),
        0 0 40px rgba(212, 175, 55, 0.3);
    transform: translateX(8px);
    letter-spacing: 0.5px;
}

/* Description */
.pcard-info p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.4s ease;
}

.pcard:hover .pcard-info p {
    color: rgba(255, 255, 255, 0.8);
    transform: translateX(5px);
}

/* Category Tag */
.pcard-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-primary);
    background: rgba(212, 175, 55, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* 💰 PRICE BADGE - SPECTACULAR NEON GOLD */
.pcard-price {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: linear-gradient(135deg, 
        #c9a227 0%, 
        #ffd700 25%,
        #ffec8b 50%,
        #ffd700 75%,
        #c9a227 100%);
    background-size: 300% 300%;
    color: #000;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 900;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    box-shadow: 
        0 8px 30px rgba(212, 175, 55, 0.6),
        0 0 50px rgba(255, 215, 0, 0.3),
        0 0 80px rgba(212, 175, 55, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.6s var(--ease-out-back);
    z-index: 10;
    animation: priceSpectacular 4s ease-in-out infinite;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Price Glow Ring */
.pcard-price::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 55px;
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.8),
        rgba(255, 180, 0, 0.4),
        rgba(255, 215, 0, 0.8));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: blur(8px);
}

.pcard:hover .pcard-price::before {
    opacity: 1;
    animation: priceRingPulse 1.5s ease-in-out infinite;
}

@keyframes priceSpectacular {
    0%, 100% { 
        background-position: 0% 50%;
        box-shadow: 
            0 8px 30px rgba(212, 175, 55, 0.6),
            0 0 50px rgba(255, 215, 0, 0.3);
    }
    25% {
        background-position: 50% 100%;
    }
    50% { 
        background-position: 100% 50%;
        box-shadow: 
            0 12px 45px rgba(212, 175, 55, 0.8),
            0 0 80px rgba(255, 215, 0, 0.5);
    }
    75% {
        background-position: 50% 0%;
    }
}

@keyframes priceRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

.pcard:hover .pcard-price {
    transform: scale(1.2) rotate(-8deg) translateY(-8px);
    box-shadow: 
        0 20px 50px rgba(212, 175, 55, 0.8),
        0 0 100px rgba(255, 215, 0, 0.5),
        0 0 150px rgba(212, 175, 55, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ✨ HOLOGRAPHIC SHINE SWEEP ✨ */
.pcard-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.02) 38%,
        rgba(212, 175, 55, 0.1) 44%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(212, 175, 55, 0.1) 56%,
        rgba(255, 255, 255, 0.02) 62%,
        transparent 70%,
        transparent 100%
    );
    transform: translateX(-200%);
    transition: transform 1s var(--ease-out-expo);
    pointer-events: none;
    border-radius: 32px;
    z-index: 6;
}

.pcard:hover .pcard-shine {
    transform: translateX(200%);
}

/* 🌟 FLOATING SPARKLE PARTICLES 🌟 */
.pcard::before {
    content: '✨';
    position: absolute;
    top: 15%;
    left: 8%;
    font-size: 1.2rem;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: all 0.6s var(--ease-out-back);
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.pcard::after {
    content: '⭐';
    position: absolute;
    bottom: 25%;
    right: 8%;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: all 0.7s var(--ease-out-back) 0.15s;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.pcard:hover::before {
    opacity: 1;
    transform: scale(1) rotate(25deg) translateY(-15px);
    animation: sparkleFloat1 2s ease-in-out infinite;
}

.pcard:hover::after {
    opacity: 1;
    transform: scale(1) rotate(-20deg) translateY(15px);
    animation: sparkleFloat2 2.5s ease-in-out infinite 0.3s;
}

@keyframes sparkleFloat1 {
    0%, 100% { transform: scale(1) rotate(25deg) translateY(-15px); }
    50% { transform: scale(1.2) rotate(35deg) translateY(-25px); }
}

@keyframes sparkleFloat2 {
    0%, 100% { transform: scale(1) rotate(-20deg) translateY(15px); }
    50% { transform: scale(1.15) rotate(-30deg) translateY(25px); }
}

/* 👑 PREMIUM BADGE FOR SPECIAL ITEMS */
.pcard[data-premium="true"] .pcard-inner {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(165deg, 
        rgba(45, 38, 30, 0.97) 0%, 
        rgba(25, 20, 15, 0.99) 40%,
        rgba(35, 28, 22, 0.97) 100%);
}

.pcard[data-premium="true"]::before {
    content: '👑';
    font-size: 1.5rem;
    top: 10%;
    left: 5%;
}

.pcard[data-premium="true"] .pcard-inner::before {
    background: conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.9) 0deg,
        rgba(255, 180, 0, 1) 60deg,
        rgba(255, 140, 0, 0.8) 120deg,
        rgba(255, 215, 0, 0.9) 180deg,
        rgba(255, 180, 0, 1) 240deg,
        rgba(255, 140, 0, 0.8) 300deg,
        rgba(255, 215, 0, 0.9) 360deg
    );
}

/* 🎯 NEW/HOT BADGE */
.pcard-badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: linear-gradient(135deg, #ff4d6d, #ff6b8a);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    z-index: 10;
    box-shadow: 
        0 5px 20px rgba(255, 77, 109, 0.5),
        0 0 30px rgba(255, 77, 109, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(255, 77, 109, 0.5);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(255, 77, 109, 0.7);
    }
}

/* 🔥 POPULAR ITEM INDICATOR */
.pcard[data-popular="true"] .pcard-badge {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    box-shadow: 
        0 5px 20px rgba(255, 107, 53, 0.5),
        0 0 30px rgba(255, 107, 53, 0.3);
}

.pcard[data-popular="true"] .pcard-badge::before {
    content: '🔥 ';
}



/* ============================================
   INSTAGRAM SECTION - NEON PORTAL
   ============================================ */
.social-section {
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

.social-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(225, 48, 108, 0.08), transparent 70%);
    pointer-events: none;
}

.neon-frame {
    max-width: 950px;
    margin: 0 auto;
    border-radius: 36px;
    padding: 4px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    background-size: 300% 300%;
    animation: instagramGradient 5s ease infinite;
    box-shadow: 
        0 20px 80px rgba(220, 39, 67, 0.2),
        0 0 100px rgba(220, 39, 67, 0.1);
    transition: all 0.5s var(--ease-out-expo);
}

@keyframes instagramGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.neon-frame:hover {
    transform: scale(1.02) translateY(-10px);
    box-shadow: 
        0 30px 100px rgba(220, 39, 67, 0.3),
        0 0 150px rgba(220, 39, 67, 0.15);
}

.neon-content {
    background: var(--bg-deep);
    border-radius: 32px;
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.neon-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(225, 48, 108, 0.1), transparent 50%);
    animation: neonPulse 4s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.social-icon {
    font-size: 5rem;
    margin-bottom: 2rem;
    display: inline-block;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        instagramGradient 3s ease infinite,
        iconFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(220, 39, 67, 0.5));
    position: relative;
    z-index: 2;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    75% { transform: translateY(-10px) rotate(-5deg); }
}

.neon-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(225, 48, 108, 0.4);
    position: relative;
    z-index: 2;
}

.neon-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.neon-content p strong {
    color: var(--gold-glow);
    font-weight: 700;
}

.neon-btn {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    background-size: 300% 300%;
    animation: instagramGradient 3s ease infinite;
    box-shadow: 0 10px 40px rgba(220, 39, 67, 0.4);
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.neon-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.neon-btn:hover::before {
    transform: translateX(100%);
}

.neon-btn:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 60px rgba(220, 39, 67, 0.5);
}


/* ============================================
   FEEDBACK SECTION - GLASS FORM
   ============================================ */
.feedback-section {
    padding: 6rem 0;
    position: relative;
}

.glass-form-wrapper {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    padding: 4rem;
    border-radius: 36px;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.glass-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-primary), var(--accent-warm), var(--gold-primary));
    background-size: 200% auto;
    animation: gradientFlow 3s linear infinite;
}

.glass-form-wrapper h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-glow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2.5rem;
}

/* Radio Group */
.radio-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.radio-group label {
    cursor: pointer;
}

.radio-group span {
    display: block;
    padding: 0.9rem 2rem;
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.4s var(--ease-out-expo);
    background: rgba(0, 0, 0, 0.2);
}

.radio-group span:hover {
    border-color: rgba(212, 175, 55, 0.3);
    color: #fff;
}

.radio-group input:checked + span {
    background: var(--gold-primary);
    color: #000;
    font-weight: 700;
    border-color: var(--gold-primary);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    transform: scale(1.05);
}

/* Form Inputs */
.glass-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    padding: 1.2rem 1.5rem;
    border-radius: 16px;
    color: #fff;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.4s var(--ease-out-expo);
}

.glass-input::placeholder {
    color: var(--text-dim);
}

.glass-input:focus {
    outline: none;
    border-color: var(--gold-primary);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
}

textarea.glass-input {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.gold-btn {
    width: 100%;
    padding: 1.3rem;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-glow));
    border: none;
    border-radius: 16px;
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.gold-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fff, transparent);
    opacity: 0;
    transition: opacity 0.4s;
}

.gold-btn:hover::before {
    opacity: 0.3;
}

.gold-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
}

.gold-btn:active {
    transform: translateY(-2px);
}

/* ============================================
   BOTTOM NAVIGATION - APP FEEL
   ============================================ */
.bottom-nav {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 0.8rem 2.5rem;
    display: flex;
    gap: 2rem;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: all 0.4s var(--ease-out-expo);
}

.bottom-nav:hover {
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.nav-item {
    font-size: 1.5rem;
    color: var(--text-dim);
    padding: 0.6rem;
    transition: all 0.4s var(--ease-out-back);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.nav-item::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 6px;
    height: 6px;
    background: var(--gold-primary);
    border-radius: 50%;
    transition: transform 0.4s var(--ease-out-back);
    box-shadow: 0 0 15px var(--gold-primary);
}

.nav-item:hover,
.nav-item.active {
    color: var(--gold-primary);
    transform: translateY(-8px);
}

.nav-item.active::before,
.nav-item:hover::before {
    transform: translateX(-50%) scale(1);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    text-align: center;
    color: var(--text-dim);
    padding: 3rem 0 10rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

footer p {
    opacity: 0.6;
    transition: opacity 0.3s;
}

footer:hover p {
    opacity: 1;
}

/* ============================================
   ANIMATIONS & UTILITIES
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Scroll Reveal Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s var(--ease-out-expo);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.25rem;
    }
    
    .campaigns-grid {
        gap: 1.5rem;
    }
    
    .holo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    
    .hero {
        min-height: 90vh;
        padding: 1.5rem;
    }
    
    .logo-container {
        width: 160px;
        height: 160px;
        margin-bottom: 2rem;
    }
    
    .logo-circle {
        width: 140px;
        height: 140px;
    }
    
    .logo-glow {
        width: 170px;
        height: 170px;
    }
    
    .hero-badges {
        gap: 1rem;
        margin-bottom: 3rem;
    }
    
    .badge-glass {
        padding: 0.8rem 1.5rem;
        font-size: 0.85rem;
    }
    
    .wifi-content {
        padding: 0.8rem 1.5rem;
        gap: 1rem;
    }
    
    .wifi-pass {
        font-size: 1rem;
    }
    
    /* Campaigns */
    .campaigns-section {
        padding: 5rem 0;
    }
    
    .golden-ticket {
        flex-direction: column;
    }
    
    .ticket-left {
        border-right: none;
        border-bottom: 2px dashed rgba(212, 175, 55, 0.2);
        padding: 2rem;
    }
    
    .ticket-hole {
        display: none;
    }
    
    .ticket-right {
        width: 100%;
        padding: 2rem;
        background: rgba(212, 175, 55, 0.03);
    }
    
    /* Professions */
    .holo-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .holo-card {
        padding: 2.5rem 1.5rem;
    }
    
    /* Menu */
    .menu-wrapper {
        padding: 3rem 0 8rem;
    }
    
    .pill-scroller {
        padding: 0.5rem;
        gap: 0.4rem;
    }
    
    .cat-pill {
        padding: 0.7rem 1.4rem;
        font-size: 0.85rem;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
        padding: 0 1rem;
    }
    
    .pcard-img {
        height: 180px;
    }
    
    .pcard-inner {
        border-radius: 22px;
    }
    
    .pcard-img {
        border-radius: 22px 22px 0 0;
    }
    
    .pcard-info {
        padding: 1.2rem;
    }
    
    .pcard-info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .pcard-info p {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
        line-height: 1.5;
    }
    
    .pcard-price {
        font-size: 0.95rem;
        padding: 0.55rem 1rem;
        top: 0.8rem;
        right: 0.8rem;
    }
    
    .pcard:hover .pcard-inner {
        transform: translateY(-10px) scale(1.02);
    }
    
    .pcard::before,
    .pcard::after {
        font-size: 0.8rem;
    }
    
    .pcard-badge {
        font-size: 0.6rem;
        padding: 0.35rem 0.7rem;
        top: 0.8rem;
        left: 0.8rem;
    }
    
    /* Instagram */
    .social-section {
        padding: 5rem 0;
    }
    
    .neon-content {
        padding: 3rem 1.5rem;
    }
    
    .social-icon {
        font-size: 4rem;
    }
    
    .neon-btn {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }
    
    /* Feedback */
    .glass-form-wrapper {
        padding: 2.5rem 1.5rem;
        border-radius: 28px;
    }
    
    .glass-form-wrapper h2 {
        font-size: 2rem;
    }
    
    .radio-group {
        gap: 0.8rem;
    }
    
    .radio-group span {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Bottom Nav */
    .bottom-nav {
        padding: 0.7rem 2rem;
        gap: 1.5rem;
        bottom: 20px;
    }
    
    .nav-item {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .hero {
        min-height: 85vh;
    }
    
    .logo-container {
        width: 130px;
        height: 130px;
    }
    
    .logo-circle {
        width: 110px;
        height: 110px;
    }
    
    .logo-glow {
        width: 140px;
        height: 140px;
    }
    
    .title-line {
        font-size: 2.8rem;
    }
    
    .title-sub {
        font-size: 0.8rem;
        letter-spacing: 5px;
    }
    
    .hero-badges {
        flex-direction: column;
        align-items: center;
    }
    
    .wifi-dock {
        margin-top: -30px;
    }
    
    .wifi-content {
        flex-wrap: wrap;
        justify-content: center;
        padding: 1rem;
        border-radius: 20px;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .section-header p {
        font-size: 1rem;
    }
    
    .ticket-content h3 {
        font-size: 1.5rem;
    }
    
    .discount-val {
        font-size: 2.5rem;
    }
    
    .menu-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 0 0.8rem;
    }
    
    .pcard-img {
        height: 160px;
    }
    
    .pcard-info {
        padding: 1rem;
    }
    
    .pcard-info h3 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }
    
    .pcard-info p {
        font-size: 0.75rem;
        -webkit-line-clamp: 1;
        display: -webkit-box;
    }
    
    .pcard-price {
        font-size: 0.9rem;
        padding: 0.5rem 0.9rem;
        top: 0.8rem;
        right: 0.8rem;
    }
    
    .pcard-inner {
        border-radius: 18px;
    }
    
    .pcard-img {
        border-radius: 18px 18px 0 0;
    }
    
    .pcard-shine {
        border-radius: 18px;
    }
    
    .pcard:hover .pcard-inner {
        transform: translateY(-5px);
    }
    
    .neon-content h2 {
        font-size: 1.8rem;
    }
    
    .neon-content p {
        font-size: 1rem;
    }
    
    .bottom-nav {
        padding: 0.6rem 1.5rem;
        gap: 1.2rem;
    }
    
    footer {
        padding: 2rem 0 8rem;
    }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   DARK MODE ENHANCEMENTS (Already Dark)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .bottom-nav,
    .floating-particles,
    .ambient-light,
    .scroll-indicator {
        display: none !important;
    }
    
    body {
        background: #fff;
        color: #000;
    }
    
    .hero {
        min-height: auto;
        padding: 2rem;
    }
}


/* ============================================
   📱 MOBILE PERFORMANCE - HERO UNTOUCHED
   ============================================ */
@media (max-width: 900px) {
    /* HERO - Keep all effects as is (no changes) */
    
    /* Only optimize non-hero sections */
    
    /* MENU CARDS - Simplify for performance */
    .pcard-inner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #1a1614 !important;
    }
    
    .pcard-inner::before {
        animation: none !important;
    }
    
    .pcard:hover .pcard-inner {
        transform: none !important;
    }
    
    .pcard-shine,
    .holo-shine {
        display: none !important;
    }
    
    /* OTHER SECTIONS - Simplify */
    .pill-scroller::before,
    .wifi-content::before,
    .ticket-right::before {
        display: none !important;
    }
    
    .wifi-content,
    .pill-scroller,
    .glass-form-wrapper,
    .bottom-nav,
    .holo-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(20, 16, 14, 0.95) !important;
    }
    
    /* Disable hover transforms on cards */
    .holo-card:hover,
    .golden-ticket:hover {
        transform: translateY(-5px) !important;
    }
}

/* BÖLÜM AYARLARI (Sitenin geri kalanını bozmaz) */
    .premium-promo-wrapper {
        position: relative;
        width: 100%;
        padding: 5rem 1rem; /* Üstten alttan boşluk */
        background: radial-gradient(circle at center, #1a0505 0%, #000 100%); /* Koyu Kırmızı/Siyah Zemin */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000px;
        border-top: 1px solid rgba(212, 175, 55, 0.2);
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        margin: 2rem 0; /* Diğer elementlerle arasına mesafe */
    }

    /* KAR EFEKTİ (Sadece bu kutunun içinde yağar) */
    .promo-snow {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: 
            radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.7), transparent),
            radial-gradient(2px 2px at 200px 150px, rgba(255,255,255,0.5), transparent);
        background-size: 400px 400px;
        animation: promoSnow 10s linear infinite;
        pointer-events: none;
    }
    @keyframes promoSnow { 0% { background-position: 0 0; } 100% { background-position: 0 400px; } }

    /* KART YAPISI (Öncekinin Aynısı) */
    .promo-card-container {
        position: relative;
        width: 350px;
        max-width: 100%;
        transform-style: preserve-3d;
        transition: transform 0.1s ease-out;
        z-index: 10;
    }

    .premium-card {
        position: relative;
        background: rgba(20, 5, 5, 0.7);
        border-radius: 24px;
        border: 1px solid rgba(212, 175, 55, 0.3);
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 30px rgba(74, 4, 4, 0.5);
        padding: 3.5rem 2rem 2.5rem;
        text-align: center;
        transform-style: preserve-3d;
    }

    /* Detaylar & Süslemeler */
    .glare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(125deg, transparent 40%, rgba(255,255,255,0.1) 45%, transparent 50%); transform: translateZ(1px); pointer-events: none; mix-blend-mode: overlay; }
    
    .top-ornament { position: absolute; top: -30px; left: 50%; transform: translateX(-50%) translateZ(60px); font-size: 3.5rem; animation: floatGift 4s ease-in-out infinite; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); }
    @keyframes floatGift { 0%, 100% { transform: translateX(-50%) translateZ(60px) translateY(0); } 50% { transform: translateX(-50%) translateZ(60px) translateY(-10px); } }

    .logo-area { transform: translateZ(30px); margin-bottom: 1rem; }
    .mikel-brand { font-family: 'Cinzel', serif; color: #d4af37; font-size: 0.8rem; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; }
    .main-title { font-family: 'Great Vibes', cursive; font-size: 3rem; color: #fff; margin: 0; line-height: 0.8; text-shadow: 0 0 10px rgba(255,0,0,0.6); }

    .divider { height: 1px; background: linear-gradient(90deg, transparent, #d4af37, transparent); margin: 1.5rem auto; width: 60%; opacity: 0.5; transform: translateZ(20px); }

    .items-box { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 16px; padding: 1.2rem; margin: 1.5rem 0; transform: translateZ(30px); text-align: left; }
    .product-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,0.1); }
    .product-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    .p-name { color: #e0e0e0; font-size: 0.9rem; font-family: 'Plus Jakarta Sans', sans-serif; display: flex; gap: 8px; }
    .check-mark { color: #d4af37; }

    .price-badge { transform: translateZ(50px); background: linear-gradient(135deg, #d4af37 0%, #a67c00 100%); padding: 12px 30px; border-radius: 50px; display: inline-block; box-shadow: 0 10px 25px rgba(0,0,0,0.5); position: relative; overflow: hidden; margin-top: 1rem; }
    .price-badge::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent); transform: rotate(45deg) translateX(-150%); animation: shimmer 3s infinite; }
    .price-text { font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 900; color: #1a0505; line-height: 1; display: block; }
    .price-sub { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: #4a0404; font-weight: 700; margin-top: 3px; }

/* Çoklu Fiyat Tasarımı */
.pcard-price-container { margin-top: 15px; border-top: 1px solid rgba(212, 175, 55, 0.1); padding-top: 12px; }

.price-triple, .price-double { display: flex; justify-content: space-between; gap: 8px; }

.p-item {
    background: rgba(212, 175, 55, 0.1);
    padding: 8px 12px;
    border-radius: 10px;
    flex: 1;
    text-align: center;
    font-weight: 800;
    color: #fff;
    font-size: 14px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.p-item span {
    display: block;
    font-size: 10px;
    color: #D4AF37;
    margin-bottom: 2px;
    font-weight: 400;
}

.price-single {
    background: #D4AF37;
    color: #000;
    padding: 10px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 18px;
    text-align: center;
}
/* Tek Fiyat Özel Tasarımı */
.price-single-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 10px;
    border-radius: 15px;
    margin-top: 10px;
}

.price-single-box .price-label {
    font-size: 10px;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2px;
}

.price-single-box .price-value {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* İçecekler (Çoklu Fiyat) İçin Stil */
.p-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px;
    border-radius: 10px;
    flex: 1;
    text-align: center;
}

/* Slider Alanı Tasarımı */
.slider-wrapper { position: relative; padding: 40px 0 60px; }

.premium-prof-card {
    background: linear-gradient(145deg, #161616, #0a0a0a);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 30px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.premium-prof-card:hover {
    border-color: #D4AF37;
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.1);
}

.prof-icon-circle {
    font-size: 50px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

.premium-prof-card h3 {
    font-family: 'Cinzel', serif;
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
}

.discount-badge {
    background: linear-gradient(135deg, #D4AF37, #b8860b);
    color: #000;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
    font-size: 16px;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.card-footer {
    margin-top: 30px;
    font-size: 12px;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
}

/* OKLARIN TASARIMI (Custom Nav) */
.custom-nav {
    color: #D4AF37 !important;
    background: rgba(255, 255, 255, 0.05);
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: 0.3s;
}

.custom-nav:after { content: "" !important; } /* Varsayılan oku gizle */

.custom-nav i { font-size: 20px; }

.custom-nav:hover {
    background: #D4AF37;
    color: #000 !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* Sayfalama Noktaları */
.swiper-pagination-bullet { background: rgba(212, 175, 55, 0.3) !important; opacity: 1; }
.swiper-pagination-bullet-active { background: #D4AF37 !important; width: 30px !important; border-radius: 5px !important; }


/* Slider Kart Genişliği - Pürüzsüz Akış İçin Şart */
.swiper-profession .swiper-slide {
    width: 340px !important; /* Kartların genişliğini sabitledik */
    height: auto;
    filter: blur(2px) scale(0.9); /* Odakta olmayanları hafif bulandır */
    transition: all 0.5s ease;
}

.swiper-profession .swiper-slide-active {
    filter: blur(0) scale(1); /* Odaktaki kart net ve büyük */
}

/* Navigasyon oklarının görünürlüğü */
.slider-wrapper {
    position: relative;
    padding: 20px 50px; /* Oklar için yanlardan boşluk */
}

/* Modern Kampanya Kartı */
.modern-ticket {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: 0.4s;
}

.modern-ticket:hover {
    transform: scale(1.02);
    border-color: #D4AF37;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.1);
}

.ticket-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 2;
}

.ticket-info h3 {
    font-family: 'Cinzel', serif;
    color: #D4AF37;
    font-size: 24px;
    margin-bottom: 5px;
}

.ticket-info p {
    color: #888;
    font-size: 14px;
}

/* İndirim Hapı (Pill) */
.discount-pill {
    background: #D4AF37;
    color: #000;
    padding: 15px 25px;
    border-radius: 15px;
    text-align: center;
    transform: rotate(5deg);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.discount-pill .val {
    display: block;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.discount-pill .lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Kart Kenarındaki Delikler (Bilet Hissi) */
.ticket-edge-left, .ticket-edge-right {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #050505; /* Arka plan rengiyle aynı olmalı */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.ticket-edge-left { left: -10px; border-right: 1px solid rgba(212, 175, 55, 0.3); }
.ticket-edge-right { right: -10px; border-left: 1px solid rgba(212, 175, 55, 0.3); }

/* Parlama Efekti */
.ticket-shine {
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}
.modern-ticket:hover .ticket-shine { left: 150%; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 220px; /* Her bir satırın standart yüksekliği */
    gap: 20px;
    padding: 20px 0;
}

/* Boyutlandırma Mantığı */
.bento-item.wide { grid-column: span 2; } /* İki sütun kaplar */
.bento-item.tall { grid-row: span 2; }    /* İki satır kaplar */

.bento-item {
    background: linear-gradient(145deg, #121212, #080808);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bento-item:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: #D4AF37;
    box-shadow: 0 15px 35px rgba(0,0,0,0.7), 0 0 20px rgba(212, 175, 55, 0.1);
}

/* Kutu İçindeki Yazılar */
.bento-item h3 { font-family: 'Cinzel', serif; color: #D4AF37; margin-bottom: 5px; font-size: 20px; }
.bento-item p { color: #888; font-size: 13px; margin-bottom: 15px; }

/* İndirim Rozeti */
.bento-badge {
    position: absolute; top: 20px; right: 20px;
    background: #D4AF37; color: #000;
    padding: 8px 15px; border-radius: 12px;
    font-weight: 900; font-size: 14px;
}
.bento-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 240px; /* Kutuların standart yüksekliği */
    gap: 20px;
    padding: 20px;
}

/* Bento Boyutları */
.bento-item.wide { grid-column: span 2; } /* İki kutu genişliğinde */
.bento-item.tall { grid-row: span 2; }    /* İki kutu yüksekliğinde */

.bento-item {
    background: #111;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    transition: 0.4s ease;
}

.bento-item:hover {
    border-color: #D4AF37;
    transform: translateY(-5px);
}

/* Bento Grid Temeli */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 220px; /* Standart kare yüksekliği */
    gap: 20px;
    padding: 20px 0;
}

/* Boyutlandırma Sihri */
.bento-item.wide { grid-column: span 2; } /* Yatayda 2 kutu kaplar */
.bento-item.tall { grid-row: span 2; }    /* Dikeyde 2 kutu kaplar */

/* Kart Tasarımı */
.bento-item {
    position: relative;
    background: #0a0a0a;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.bento-item:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 20px rgba(212, 175, 55, 0.1);
}

/* İkon ve Badge */
.bento-top { display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.bento-icon { font-size: 32px; color: var(--accent-color); filter: drop-shadow(0 0 10px var(--accent-color)); }
.bento-badge { 
    background: var(--accent-color); color: #000; 
    padding: 8px 16px; border-radius: 14px; 
    font-weight: 900; font-size: 14px; 
}

/* İçerik */
.bento-content { z-index: 2; }
.bento-content h3 { font-family: 'Cinzel', serif; font-size: 22px; color: #fff; margin-bottom: 8px; }
.bento-content p { color: #888; font-size: 14px; line-height: 1.5; }

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .bento-item.wide { grid-column: span 1; } /* Mobilde yan yana sığmazsa normale döner */
    .bento-grid { grid-auto-rows: 200px; }
}
/* Sidebar Güncellemesi */
.sidebar { 
    width: 280px; 
    background: var(--card); 
    height: 100vh; 
    position: fixed; 
    border-right: 1px solid rgba(212,175,55,0.1); 
    padding: 40px 20px; 
    z-index: 1000;
    display: flex;         /* İçeriği esnek yap */
    flex-direction: column; /* Ögeleri alt alta diz */
}

/* Kırmızı Çıkış Butonu Özel Stili */
.nav-item.logout-btn {
    background: #ff4d6d; /* Arka plan kırmızı */
    color: #fff !important; /* Yazı beyaz */
    margin-top: 10px;
    font-weight: 800;
}

.nav-item.logout-btn:hover {
    background: #ff1a43; /* Üzerine gelince daha koyu kırmızı */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 77, 109, 0.4);
}

/* Ana Bölüm Arkaplanı */
.profession-section {
    padding: 80px 0;
    background: #050505;
    overflow: hidden;
}

/* Kart Tasarımı */
.premium-prof-card {
    position: relative;
    background: linear-gradient(145deg, #121212, #1a1a1a);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 25px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    overflow: hidden;
}

/* Kartın Arkasındaki Altın Işıltı */
.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* İkon Halkası */
.prof-icon-circle {
    width: 80px;
    height: 80px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid #D4AF37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 35px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* İndirim Rozeti */
.discount-badge {
    display: inline-block;
    background: #D4AF37;
    color: #000;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 18px;
    margin: 15px 0;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* Kart Alt Yazısı */
.card-footer {
    color: #888;
    font-size: 13px;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover Efekti (Üzerine Gelince) */
.premium-prof-card:hover {
    transform: translateY(-10px);
    border-color: #D4AF37;
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.1);
}

.premium-prof-card:hover .prof-icon-circle {
    background: #D4AF37;
    color: #000;
}
/* --- MESLEK SLIDER ÖZEL CSS --- */
.slider-wrapper {
    position: relative;
    padding: 20px 0;
}

/* Okların Tasarımı (Altın Rengi ve Görünür) */
.custom-nav {
    background: #D4AF37 !important; /* Mikel Altını */
    color: #000 !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    z-index: 99;
    top: 50% !important; /* Tam ortala */
}

.custom-nav i {
    font-size: 14px;
    font-weight: bold;
}

/* Mobilde Okların Konumu */
@media (max-width: 600px) {
    .swiper-button-prev.custom-nav { left: 5px !important; }
    .swiper-button-next.custom-nav { right: 5px !important; }

    /* Kartların Mobildeki Şıklığı */
    .premium-prof-card {
        padding: 20px 10px !important;
        margin: 5px;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        background: #111 !important;
    }

    .prof-icon-circle {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    .premium-prof-card h3 {
        font-size: 14px !important;
        color: #fff;
    }

    .discount-badge {
        font-size: 13px !important;
        padding: 4px 10px !important;
    }
}


.social-section { padding: 60px 0; background: #000; text-align: center; }

/* Hizalama Sorununu Çözen Kısım */
.neon-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #D4AF37;
    padding: 40px 20px;
    border-radius: 30px;
    background: rgba(212, 175, 55, 0.05);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

.neon-content h2 { color: #fff; font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.neon-content p { color: #888; margin-bottom: 25px; line-height: 1.5; }

/* Tıklanabilir Buton Efekti */
.neon-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #D4AF37;
    color: #000 !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 900;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.neon-btn:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(212, 175, 55, 0.5); }

/* Tıklama Talimatı */
.click-instruction {
    margin-top: 15px;
    color: #D4AF37;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Mobilde Hizalama */
@media (max-width: 600px) {
    .neon-frame { width: 90%; padding: 30px 15px; }
    .neon-content h2 { font-size: 20px; }
}


/* Slider Alanı */
.mikel-slider-container { position: relative; padding: 20px 0 50px; }
.mikelProfSlider { padding: 20px 10px 40px !important; overflow: visible !important; }

/* Kart Tasarımı */
.mikel-card {
    background: linear-gradient(145deg, #111, #1a1a1a);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 35px 20px;
    text-align: center;
    position: relative;
    height: 100%;
    transition: 0.4s ease;
}

.icon-circle {
    width: 60px; height: 60px; background: rgba(212, 175, 55, 0.1);
    border: 1px solid #D4AF37; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 28px;
}

.gold-badge {
    background: #D4AF37; color: #000; padding: 6px 15px;
    border-radius: 50px; font-weight: 800; font-size: 14px;
    display: inline-block; margin-top: 10px;
}

.card-hint { color: #555; font-size: 11px; margin-top: 15px; text-transform: uppercase; }

/* OKLAR (Navigasyon) - Mobilde de çalışacak şekilde */
.mikel-nav-btn {
    color: #D4AF37 !important; /* Ok rengi altın */
    width: 45px !important;
    height: 45px !important;
    background: rgba(0,0,0,0.8) !important;
    border: 1px solid #D4AF37;
    border-radius: 50%;
    z-index: 100;
}

.mikel-nav-btn::after { font-size: 18px !important; font-weight: bold; }

/* --- MOBİL ÖZEL AYARLAR --- */
@media (max-width: 600px) {
    .mikelProfSlider { padding: 10px 5px 50px !important; }
    
    /* Okları mobilde biraz daha küçük ve kenara yakın yap */
    .mikel-nav-btn { width: 35px !important; height: 35px !important; top: 50% !important; }
    .mikel-nav-btn::after { font-size: 14px !important; }
    
    .swiper-button-prev { left: -5px !important; }
    .swiper-button-next { right: -5px !important; }
}

/* Sayfalama Noktaları */
.mikel-dots .swiper-pagination-bullet { background: #555; opacity: 1; }
.mikel-dots .swiper-pagination-bullet-active { background: #D4AF37; transform: scale(1.3); }


/* Modal Arka Planı */
.mikel-modal {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px); align-items: center; justify-content: center;
}

/* Modal Kutusu */
.mikel-modal-content {
    background: #111; border: 1px solid #D4AF37; padding: 40px;
    width: 90%; max-width: 400px; border-radius: 20px; text-align: center;
    position: relative; animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.mikel-modal-icon { font-size: 60px; color: #D4AF37; margin-bottom: 20px; }

.mikel-modal-content h2 { 
    color: #fff; font-family: 'Cinzel', serif; font-weight: 800; 
    letter-spacing: 2px; margin-bottom: 10px; 
}

.mikel-divider { width: 50px; height: 2px; background: #D4AF37; margin: 0 auto 20px; }

.mikel-modal-content p { color: #888; line-height: 1.6; font-size: 15px; margin-bottom: 30px; }

.mikel-modal-btn {
    background: #D4AF37; color: #000; border: none; padding: 12px 40px;
    border-radius: 50px; font-weight: 900; cursor: pointer; transition: 0.3s;
}

.mikel-modal-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(212,175,55,0.4); }

.mikel-footer-gold {
    padding: 80px 0 40px;
    background: #0a0908;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    color: #fff;
    text-align: center;
}

.f-main-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Kolonlar */
.f-logo-glow { width: 50px; opacity: 0.8; margin-bottom: 10px; }
.f-col-brand h3 { font-family: 'Cinzel', serif; letter-spacing: 2px; color: #D4AF37; font-size: 18px; }
.f-col-brand p { font-size: 9px; color: #444; letter-spacing: 3px; }

.f-col-nav h4, .f-col-contact h4 { font-size: 13px; margin-bottom: 20px; color: #fff; opacity: 0.9; }
.f-col-nav a { display: block; color: #666; text-decoration: none; font-size: 14px; margin-bottom: 8px; transition: 0.3s; }
.f-col-nav a:hover { color: #D4AF37; }
.f-col-contact p { color: #666; font-size: 14px; margin-bottom: 8px; }

/* İmza Alanı */
.f-signature-area { margin-top: 40px; }
.f-divider-line { width: 40px; height: 1px; background: rgba(212, 175, 55, 0.2); margin: 0 auto 25px; }
.f-dev-box p { font-size: 11px; color: #444; margin-bottom: 5px; font-style: italic; }

.efe-signature {
    position: relative;
    display: inline-block;
}

/* Efe İtmiş - Zarif Dokunuş */
.efe-name {
    color: #D4AF37;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    /* Parlama efektini çok hafiflettik, sadece tatlı bir canlılık veriyor */
    animation: subtleGlow 4s infinite ease-in-out;
}

@keyframes subtleGlow {
    0%, 100% { opacity: 0.7; text-shadow: 0 0 0px transparent; }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
}

/* Uçan Kahve - Daha Yavaş ve Nazik */
.flying-coffee {
    position: absolute;
    right: -30px;
    top: -2px;
    font-size: 18px;
    opacity: 0.8;
    animation: coffeeGentleFloat 4s infinite ease-in-out;
}

@keyframes coffeeGentleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(10deg); }
}

.f-rights { font-size: 9px; color: #333; margin-top: 30px; letter-spacing: 1px; }

/* Ekstra Kaydırma Alanı */
.extra-scroll-space {
    height: 80px; 
    background: #0a0908;
}

@media (max-width: 768px) {
    .f-main-content { grid-template-columns: 1fr; gap: 35px; }
    .mikel-footer-gold { padding: 60px 20px 30px; }
}