@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Roboto+Mono:wght@500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
body { background-color: #030404; color: #fff; overflow-x: hidden; }

/* --- YENİ: SCROLL PROGRESS BAR --- */
#scroll-progress {
    position: fixed; top: 0; left: 0; height: 4px;
    background: linear-gradient(to right, #3ebd10, #53FC18);
    width: 0%; z-index: 9999;
    box-shadow: 0 0 10px #53FC18;
}

/* --- YENİ: PARALLAX OBJELER --- */
.parallax-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; }
.parallax-item { position: absolute; color: rgba(83, 252, 24, 0.05); filter: blur(2px); transition: transform 0.1s linear; }

.noise-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E'); z-index: 0; pointer-events: none; }
#bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; }

.text-highlight { color: #53FC18; text-shadow: 0 0 20px rgba(83, 252, 24, 0.4); }
.layout-wrapper { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 50px 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; min-height: 100vh; }

/* Scroll Animasyon Sınıfları */
.scroll-trigger { will-change: transform, opacity, filter; }
.anim-slide-skew { opacity: 0; transform: translateX(-80px) skewX(8deg); transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); }
.anim-slide-skew.show { opacity: 1; transform: translateX(0) skewX(0); }
.anim-blur-scale { opacity: 0; filter: blur(20px); transform: scale(0.85) translateY(40px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.anim-blur-scale.show { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
.anim-3d-flip { opacity: 0; transform: perspective(1500px) rotateX(60deg) translateY(50px); transform-origin: top; transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1); }
.anim-3d-flip.show { opacity: 1; transform: perspective(1500px) rotateX(0deg) translateY(0); }
.anim-slide-right { opacity: 0; transform: translateX(-100px); transition: all 0.9s cubic-bezier(0.25, 1, 0.5, 1); }
.anim-slide-right.show { opacity: 1; transform: translateX(0); }
.anim-slide-left { opacity: 0; transform: translateX(100px); transition: all 0.9s cubic-bezier(0.25, 1, 0.5, 1); }
.anim-slide-left.show { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.25s; } .delay-3 { transition-delay: 0.4s; } .delay-4 { transition-delay: 0.55s; }

/* Hero */
#hero { padding: 40px 0; }
.badge { display: inline-block; background: #53FC18; color: #000; padding: 8px 15px; font-weight: 900; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 30px; box-shadow: 0 0 15px rgba(83, 252, 24, 0.5); }
h1 { font-size: clamp(3.5rem, 5vw, 6.5rem); font-weight: 900; line-height: 1; margin-bottom: 30px; text-transform: uppercase; }
#hero p { font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: #b3b3b3; line-height: 1.6; margin-bottom: 40px; max-width: 600px; }
.btn-primary { display: inline-flex; align-items: center; gap: 12px; background: #53FC18; color: #000; padding: 20px 45px; font-size: 1.3rem; font-weight: 900; text-decoration: none; border-radius: 6px; transition: 0.3s; border: 2px solid transparent; }
.btn-primary:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 35px rgba(83,252,24,0.5); border-color: #fff; }

/* Scrollytelling */
#scrollytelling { grid-column: 1 / -1; height: 400vh; position: relative; margin: 100px 0; border-radius: 20px; }
.sticky-container { position: sticky; top: 10vh; height: 80vh; width: 100%; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 40px 100px rgba(0,0,0,0.9); }
.scroll-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transform: scale(1.1); transition: opacity 0.5s ease-out; }
.bg-1 { opacity: 1; }
.scroll-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 100%); z-index: 1; }
.scroll-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 10%; }
.step { position: absolute; opacity: 0; transform: translateY(50px); transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); max-width: 600px; }
.step h2 { font-size: clamp(3rem, 5vw, 5rem); margin-bottom: 20px; font-weight: 900; line-height: 1.1; }
.step p { font-size: clamp(1.2rem, 1.5vw, 1.5rem); color: #ccc; line-height: 1.6; }
.step.active { opacity: 1; transform: translateY(0); }

/* YENİ: SCROLL İLE ÇİZİLEN TIMELINE */
#how-it-works { grid-column: 1 / -1; margin: 100px 0; padding: 50px 0; }
.section-title { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 900; text-align: center; margin-bottom: 80px; letter-spacing: -1px; }
.timeline-steps { display: flex; flex-direction: column; gap: 60px; position: relative; max-width: 1000px; margin: 0 auto; padding-bottom: 20px; }

/* Arka plandaki mat çizgi */
.timeline-line-bg { position: absolute; left: 50%; top: 0; width: 4px; height: 100%; background: #111; transform: translateX(-50%); z-index: 0; border-radius: 4px; }
/* Scroll ile dolacak neon çizgi */
.timeline-line-fill { position: absolute; left: 50%; top: 0; width: 4px; height: 0%; background: #53FC18; transform: translateX(-50%); z-index: 1; border-radius: 4px; box-shadow: 0 0 15px #53FC18; transition: height 0.1s ease-out; }

.t-step { display: flex; align-items: center; justify-content: flex-start; position: relative; width: 100%; z-index: 2; }
.t-step.reverse { justify-content: flex-end; }
.t-number { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #050505; color: #53FC18; border: 2px solid #53FC18; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; box-shadow: 0 0 20px rgba(83,252,24,0.3); transition: 0.3s; }
.t-number.active { background: #53FC18; color: #000; transform: translate(-50%, -50%) scale(1.2); }
.t-content.glass-panel { background: rgba(15, 17, 20, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(83,252,24,0.2); padding: 30px; border-radius: 16px; width: 42%; }
.t-step h3 { font-size: 1.5rem; color: #fff; margin-bottom: 10px; font-weight: 800; }
.t-step p { color: #aaa; line-height: 1.6; }

/* Önizleme */
.preview-container { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.browser-mockup { background: #0f0f0f; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; box-shadow: 0 40px 80px rgba(0,0,0,0.9); overflow: hidden; width: 100%; position: relative; }
.browser-header { background: #151515; padding: 12px 20px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #222; }
.dots { display: flex; gap: 8px; } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
.url-bar { background: #080808; padding: 8px 15px; border-radius: 6px; color: #555; font-size: 0.85rem; font-family: 'Roboto Mono', monospace; flex-grow: 1; border: 1px solid #1a1a1a;}
.mock-player { position: relative; height: 500px; background: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2070&auto=format&fit=crop') center/cover; }
.mock-chat-box { position: absolute; bottom: 20px; right: 20px; width: 350px; border: 1px solid rgba(83, 252, 24, 0.4); background-color: rgba(10, 12, 15, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 8px; padding: 20px; cursor: grab; transition: background-color 0.1s, border-color 0.1s; }
.chat-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 12px; margin-bottom: 15px; font-weight: 800; font-size: 0.9rem; color: #53FC18; }
.chat-messages p { font-family: 'Roboto Mono', monospace; font-size: 0.9rem; margin-bottom: 10px; color: #eaeaea; line-height: 1.5; }
.chat-messages .user { color: #53FC18; font-weight: bold; text-transform: uppercase; font-size: 0.85rem; }
.control-panel { background: rgba(15,15,15,0.8); backdrop-filter: blur(10px); border: 1px solid #2a2a2a; padding: 25px; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; }
.slider-info { font-weight: 700; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; }
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 26px; width: 26px; border-radius: 50%; background: #53FC18; cursor: pointer; margin-top: -10px; box-shadow: 0 0 15px rgba(83,252,24,0.8); border: 3px solid #111; transition: 0.2s; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #333; border-radius: 10px; }

/* Bento Grid & YENİ: Tilt Kartları */
#features { grid-column: 1 / -1; margin-top: 20px; perspective: 1000px; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.bento-item { background: linear-gradient(145deg, #0f0f0f, #050505); border: 1px solid #222; padding: 40px; border-radius: 16px; transition: box-shadow 0.3s; position: relative; transform-style: preserve-3d; }
.tilt-card { transition: transform 0.1s ease-out; } /* JS tarafından tilt edilecek */
.bento-item:hover { border-color: #53FC18; box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 20px rgba(83,252,24,0.1); }
.icon-huge { font-size: 3.5rem; color: #53FC18; margin-bottom: 25px; transform: translateZ(30px); } /* 3D derinlik için Z ekseninde önde */
.bento-item h3 { font-size: 1.4rem; margin-bottom: 15px; font-weight: 900; transform: translateZ(20px); }
.bento-item p { color: #888; line-height: 1.6; font-size: 0.95rem; transform: translateZ(10px); }

.support-card { background: #0a110b; border-color: #1a331a; display: flex; flex-direction: column; justify-content: space-between; }
.support-card input, .support-card textarea { width: 100%; background: rgba(0,0,0,0.5); border: 1px solid #333; color: #fff; padding: 15px; margin-bottom: 15px; font-family: 'Roboto Mono', monospace; border-radius: 6px; }
.support-card input:focus, .support-card textarea:focus { border-color: #53FC18; outline: none; background: rgba(0,0,0,0.8); }
#submit-btn { width: 100%; background: #53FC18; color: #000; border: none; padding: 15px; font-weight: 900; cursor: pointer; border-radius: 6px; }

@media (max-width: 1200px) { .layout-wrapper { grid-template-columns: 1fr; gap: 60px; } .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .bento-grid { grid-template-columns: 1fr; } .timeline-line-bg, .timeline-line-fill { left: 30px; } .t-number { left: 30px; } .t-step { justify-content: flex-end !important; } .t-content.glass-panel { width: 80%; } }