/* VENICE.AI INSPIRED THEME - AIFORUM ULTIMATE */

/* OPTION A: GALACTIC CORE (Default - Cold, Cyan/Purple) */
:root {
    --bg-main: #020305;
    --bg-card: rgba(10, 15, 25, 0.4);
    --border-color: rgba(0, 255, 204, 0.15);
    --accent: #00ffcc;
    --accent-glow: rgba(0, 255, 204, 0.6);
    --accent-secondary: #aa55ff;
    --text-main: #f0f4f8;
    --text-muted: #8b9bb4;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

/* OPTION B: CRIMSON ORBIT (Alternative - Warm, Red/Gold) */
[data-theme="crimson"] {
    --bg-main: #070101;
    --bg-card: rgba(25, 5, 5, 0.4);
    --border-color: rgba(255, 51, 51, 0.2);
    --accent: #ff3333;
    --accent-glow: rgba(255, 51, 51, 0.6);
    --accent-secondary: #ffaa00;
    --text-main: #fff0f0;
    --text-muted: #b48b8b;
}

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

/* 2026-08-23 (Osman live bug, phone: "sağında siyah şerit kalmış, ekrana tam oturmuyor") -
   `body { overflow-x: hidden }` alone doesn't reliably clip a wide descendant's horizontal
   overflow on every mobile browser (a known iOS Safari gap in particular: when `html` itself is
   left at its default `overflow: visible`, the viewport can still open a horizontal scroll gutter
   that reveals `body`'s own near-black background on one side, reading exactly as a "black
   strip"). `.solar-system-bg` below (800px wide, absolutely centered) is the actual source - it
   was never resized for narrow viewports. Fixed at both ends: `html` gets the same guard `body`
   already had (belt-and-suspenders, matches every other overflow guard in this file), and the
   graphic itself is scaled down under the existing mobile breakpoint so there's far less excess
   width to clip in the first place. */
html { overflow-x: hidden; width: 100%; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    transition: background-color 0.5s ease;
}

/* Background Effects */
.stars {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMSIvPjxjaXJjbGUgY3g9IjE4MCIgY3k9IjQwIiBHIjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMSIvPjxjaXJjbGUgY3g9IjMwMCIgY3k9IjEyMCIgcj0iMC41IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=');
    z-index: -2;
}

.nebula {
    position: fixed; width: 60vw; height: 60vw; border-radius: 50%;
    filter: blur(120px); z-index: -1; opacity: 0.12; transition: background 0.8s ease;
}
.nebula-1 { top: -20%; left: -10%; background: var(--accent); }
.nebula-2 { bottom: -20%; right: -10%; background: var(--accent-secondary); }

/* Layout & Typography */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-weight: 800; line-height: 1.2; }
.gradient-text {
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Navbar */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(2, 3, 5, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color); z-index: 1000;
}
[data-theme="crimson"] .navbar { background: rgba(5, 1, 1, 0.7); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 70px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.logo { font-family: var(--font-mono); font-size: 24px; font-weight: bold; color: #fff; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 8px; }
.logo-icon { filter: drop-shadow(0 0 5px var(--accent)); transition: filter 0.5s ease; }
/* 2026-08-22 (Osman live request: "sol üstte yanlış logo var, AIFORUM simgesi olmalı" + "AIFORUM
   by OSM olsun") - was a generic 🪐 planet emoji; app/public/app-icon.png is the REAL brand icon
   (the actual desktop app's own icon), copied into this folder. */
.logo-icon-img { width: 28px; height: 28px; border-radius: 6px; filter: drop-shadow(0 0 5px var(--accent)); }
.logo-suffix { font-size: 11px; font-weight: 400; color: var(--text-muted); letter-spacing: 1px; }
.nav-links a { color: var(--text-main); text-decoration: none; margin: 0 16px; font-size: 14px; font-weight: 600; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); font-size: 14px; transition: color 0.3s ease; }
.icon-btn:hover { color: var(--accent); }
.mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; }

/* Buttons */
.btn { display: inline-block; padding: 12px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-mono); font-size: 14px;}
.primary-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(0,0,0,0), inset 0 0 5px rgba(0,0,0,0); }
.primary-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 20px var(--accent-glow); transform: translateY(-2px); }
.secondary-btn { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.secondary-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.outline-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); }
.outline-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Hero Section */
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 70px; position: relative; }
.hero-content { max-width: 800px; z-index: 10; }
.hero h1 { font-size: 64px; margin-bottom: 24px; letter-spacing: -1px; }
.hero-subtitle { font-size: 20px; color: var(--text-muted); margin-bottom: 40px; }
.hero-cta { display: flex; gap: 20px; justify-content: center; }

/* Sections */
.section { padding: 100px 0; position: relative; z-index: 5; }
.dark-section { background: rgba(0,0,0,0.5); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.section-title { font-size: 40px; margin-bottom: 60px; text-align: center; }

/* Grid & Mouse Tracking Glow Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.glow-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 40px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
/* Mouse Glow Effect injected via JS */
.glow-card::before {
    content: ''; position: absolute; top: var(--mouse-y, 0); left: var(--mouse-x, 0);
    width: 300px; height: 300px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: -1;
}
.glow-card:hover::before { opacity: 0.15; }
.glow-card:hover { transform: translateY(-5px); border-color: var(--accent); }

.card-icon { font-size: 40px; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--accent-glow)); }

/* Store Items */
.store-item { padding: 30px; text-align: center; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
.store-item img { width: 80px; height: 80px; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.token-price { display: inline-block; margin-top: 15px; padding: 5px 15px; background: rgba(0,0,0,0.5); border: 1px solid var(--accent-secondary); color: var(--accent-secondary); font-family: var(--font-mono); border-radius: 20px; }

/* Pricing cards (2026-08-22, Faz 6 draft) - .pricing-card/.price/.pricing-features/.popular-badge
   had NO rules anywhere in this file (only the generic .glow-card base applied), so the tier cards
   rendered as unstyled text blocks - matches the same class as the app.js syntax error: content
   existed but was never actually finished. Sizes/colors reuse the SAME tokens every other section
   already uses (--accent/--text-muted/--font-mono/--border-color), not a new palette. */
.pricing-card { text-align: center; display: flex; flex-direction: column; }
.pricing-card.featured { border-color: var(--accent); }
.popular-badge {
    position: absolute; top: 16px; right: 16px;
    background: var(--accent); color: #000; font-family: var(--font-mono);
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
}
/* Early Access labeling (2026-09-07, Osman: "full herşeyi bitmiş ürün gibi sunmak istemiyorum")
   - same Steam-style "this is still being built" signal, on the pricing page specifically since
   that's where money changes hands. Deliberately a warning tone (amber), never --accent, so it
   never reads as a feature/selling point. */
.early-access-banner {
    max-width: 720px; margin: 0 auto 56px; padding: 22px 28px;
    background: rgba(255, 176, 32, 0.08); border: 1px solid rgba(255, 176, 32, 0.4);
    border-radius: 8px; text-align: center;
}
.early-access-banner strong { display: inline-block; font-size: 22px; margin-bottom: 4px; color: #ffb020; font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.early-access-banner p { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; }
.early-access-banner p.thanks { margin-top: 10px; color: #ffb020; opacity: 0.9; }
.early-access-badge {
    position: absolute; top: 16px; left: 16px;
    background: rgba(255, 176, 32, 0.15); color: #ffb020; font-family: var(--font-mono);
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(255, 176, 32, 0.4);
}
.pricing-card h3 { font-size: 20px; margin-bottom: 12px; }
/* 2026-09-30: marks feature cards that need a paid plan, so features.html agrees with pricing.html. */
.tier-badge {
    position: absolute; top: 16px; right: 16px;
    background: var(--accent-glow); color: var(--accent); font-family: var(--font-mono);
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 20px; border: 1px solid var(--accent);
}
.price {
    font-family: var(--font-mono); font-size: 42px; font-weight: 700; color: var(--accent);
    margin-bottom: 24px;
}
.price span { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 32px; flex: 1; }
.pricing-features li {
    padding: 10px 0; border-bottom: 1px solid var(--border-color);
    font-size: 14px; color: var(--text-main);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li del { color: var(--text-muted); }

/* FAQ Accordion */
.accordion-item { border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.accordion-header { width: 100%; background: transparent; border: none; color: var(--text-main); font-size: 18px; font-weight: 600; text-align: left; padding: 20px 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; }
.accordion-header:hover { color: var(--accent); }
.accordion-icon { font-family: var(--font-mono); font-size: 24px; color: var(--accent); transition: transform 0.3s; }
.accordion-header.active .accordion-icon { transform: rotate(45deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 10px; color: var(--text-muted); }
.accordion-content p { padding-bottom: 20px; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { background: var(--bg-card); border: 1px solid var(--accent); padding: 40px; width: 100%; max-width: 400px; position: relative; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); transform: translateY(0); transition: transform 0.3s; }
.modal-overlay.hidden .modal-content { transform: translateY(50px); }
.close-modal { position: absolute; top: 15px; right: 20px; background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; }
.close-modal:hover { color: var(--accent); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.form-control { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-mono); outline: none; transition: border-color 0.3s; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(0,255,204,0.1); }

/* Animations */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* Responsive */
@media (max-width: 900px) {
    .nav-links { display: none; }
    /* Fix (2026-08-30, Osman live mobile screenshot: "sağ üstte sekme simgesi çok yakın solundaki
       simgeye") - .nav-container is display:flex + justify-content:space-between across 4 direct
       children (.logo, .nav-links, .nav-actions, .mobile-menu-btn). With .nav-links hidden above,
       .nav-actions and .mobile-menu-btn become adjacent flex items with no gap defined between
       them as SIBLINGS of .nav-container (the 16px gap in .nav-actions only applies to ITS OWN
       children) - space-between then pushes .logo far left and crams the last two items together
       with zero space, while a large empty gap opens up before them. */
    .mobile-menu-btn { display: block; margin-left: 16px; }
    /* Fix (2026-08-30, Osman: "hala sıkışık, solundaki kısımı hafif daha sola ittirip yer aç") -
       the 16px gap alone wasn't enough breathing room on a narrow phone; compacting .nav-actions'
       own content (container padding, its internal gap, the Login button's padding) shifts
       everything left of the hamburger further left instead of just widening the gap in place,
       which would otherwise push the hamburger itself closer to the screen edge. */
    .nav-container { padding: 0 14px; }
    .nav-actions { gap: 10px; }
    .nav-actions .btn { padding: 10px 16px; font-size: 12px; }
    .hero h1 { font-size: 40px; }
    .hero-cta { flex-wrap: wrap; }
    /* 2026-08-23 (same phone bug as the html/body overflow-x guard above) - the graphic's own
       rings/planets are fixed px sizes (path-3/.sun-core etc.), NOT relative to .solar-system-bg's
       own box, so shrinking that box's width/height alone wouldn't actually shrink what renders -
       only a `scale()` on the whole transformed subtree resizes everything inside it together.
       Appended to the SAME transform (not a separate rule) since a later `transform` declaration
       would otherwise just replace the base one, not layer on top of it. 0.5 keeps the graphic
       proportional at typical phone widths (~400px total width, well under a ~360-430px viewport)
       instead of the desktop's untouched 800px overflowing every side by ~200px+. */
    .solar-system-bg { transform: translate(-50%, -50%) rotateX(70deg) rotateY(-10deg) scale(0.5); }
    /* 2026-08-22 (Osman live bug, phone test): .mobile-menu-btn had no click handler at all
       (see app.js) - .nav-links stayed unreachable below this breakpoint no matter what. Now
       toggled to a fixed-position dropdown anchored under the navbar (matches .navbar's own
       fixed/full-width nature - .nav-container itself is centered/max-width:1200px, not a useful
       positioning parent for a full-width dropdown). */
    .nav-links.open {
        display: flex; flex-direction: column; gap: 4px;
        position: fixed; top: 70px; left: 0; width: 100%;
        background: rgba(2, 3, 5, 0.95); backdrop-filter: blur(20px);
        padding: 16px 24px; border-bottom: 1px solid var(--border-color);
    }
    .nav-links.open a { margin: 0; padding: 10px 0; }
}

/* --- 3D Solar System Hero Background --- */
/* 2026-08-22 (Osman live request: "arka planda dönen galaksi görseli yazıların altında kalıyor,
   yazıları aşağı alalım ya da gezegen animasyonunu biraz üste alalım") - rotateX(70deg) visually
   compresses the orbit rings into a flat, narrow band well below the true 50% midpoint they're
   mathematically centered on, so the tilted graphic's visual weight reads as sitting lower than
   the text expects. Nudged up from 50% - a visual/composition call, not a precise fix; re-check by
   eye after deploying and adjust this one value further if needed. */
.solar-system-bg {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg) rotateY(-10deg);
    width: 800px;
    height: 800px;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}

.sun-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotateX(-70deg);
    width: 60px; height: 60px;
    background: radial-gradient(circle, var(--accent) 20%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 100px var(--accent-glow), 0 0 40px var(--accent-secondary);
    animation: pulseSun 4s infinite alternate ease-in-out;
}

@keyframes pulseSun {
    0% { transform: translate(-50%, -50%) rotateX(-70deg) scale(1); opacity: 0.8;}
    100% { transform: translate(-50%, -50%) rotateX(-70deg) scale(1.1); opacity: 1;}
}

.orbit-path {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0,255,204,0.02);
}

.path-1 { width: 300px; height: 300px; animation: spin 20s linear infinite; border-color: rgba(0,255,204,0.1); }
.path-2 { width: 500px; height: 500px; animation: spin 40s linear infinite reverse; border-color: rgba(170,85,255,0.1); }
.path-3 { width: 800px; height: 800px; animation: spin 80s linear infinite; border-color: rgba(255,255,255,0.05); }

.planet-orb {
    position: absolute;
    top: 0; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Counter-rotate the planets so they stay upright */
.orb-1 { width: 15px; height: 15px; background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); animation: spinCounter 20s linear infinite; }
.orb-2 { width: 25px; height: 25px; background: var(--accent-secondary); box-shadow: 0 0 30px rgba(170,85,255,0.6); animation: spinCounterReverse 40s linear infinite; }
.orb-3 { width: 10px; height: 10px; background: #fff; box-shadow: 0 0 15px #fff; animation: spinCounter 80s linear infinite; }

@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spinCounter { 100% { transform: translate(-50%, -50%) rotate(-360deg) rotateX(-70deg); } }
@keyframes spinCounterReverse { 100% { transform: translate(-50%, -50%) rotate(360deg) rotateX(-70deg); } }

/* Ensure Hero content is above the solar system */
.hero-content {
    z-index: 10;
    position: relative;
    backdrop-filter: blur(2px);
    padding: 40px;
    border-radius: 20px;
    background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, transparent 80%);
}

/* --- FINAL TOUCHES: MOVING STARS & TYPEWRITER --- */
.stars {
    background-size: 400px 400px !important;
    animation: moveStars 120s linear infinite;
}

@keyframes moveStars {
    from { background-position: 0 0; }
    to { background-position: -1000px 1000px; }
}

/* Typing Effect for Hero Title */
/* 2026-08-22 (Osman live bug: "Türkçe'ye çevirince ortadaki başlık ekrana ortalanmıyor") - the
   width:0->100% typewriter animation only reliably centers the string it was tuned for (English,
   21 chars) - a longer/wider translation (Turkish: 26 chars + wider ı/ş/ğ glyphs) can render past
   the viewport (mobile already handled this by disabling the effect below 900px) or just read as
   off-center at any width while the reveal animation is mid-flight, since `width` itself is what's
   animating, not a static box `.hero`'s `text-align:center` can reliably center throughout.
   Dropping the reveal animation is the fix that holds at EVERY viewport regardless of string
   length - a plain, always-correctly-centered heading, not a size recalibrated for one specific
   string that could just as easily overflow again on a future copy change. */
.typing-effect {
    display: inline-block;
    margin: 0 auto 24px auto !important;
}


.glow-card {
    transition: transform 0.1s ease, border-color 0.3s ease !important; /* Faster transition for 3D tilt */
    transform-style: preserve-3d;
}

/* 2026-08-22 (Osman live request: desteklenen AI markaları şeridi, ana sayfanın altında yavaş
   kayan) - slow left-to-right (well, the track scrolls right-to-left visually, giving a
   left-scrolling reading motion) marquee of real supported providers. */
.brand-marquee {
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 20px 0;
    position: relative;
    z-index: 5;
}
/* 2026-08-22 (Osman live bug: "loopta değil, ollamadan sonra ilk yazan olmalı") - was `display:flex;
   gap:48px` - flex `gap` only sits BETWEEN items (11 gaps for 12 items), so exactly half the
   track's total width does NOT land on the seam between the two identical 6-badge halves (11 gaps
   split unevenly, 5.5 each side) - `translateX(-50%)` therefore looped with a visible stutter/jump
   instead of Ollama flowing straight into the next OpenAI. Moving the spacing onto each badge's own
   `margin-right` instead makes every badge (including its trailing space) a self-contained,
   identically-sized unit - 12 such units split into an exact 6+6, so -50% always lands precisely on
   the seam. */
.brand-marquee-track {
    display: flex;
    width: max-content;
    animation: brandScroll 30s linear infinite;
}
.brand-badge {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 1px;
    margin-right: 48px;
}
@keyframes brandScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.site-footer {
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.4);
    padding: 24px 0;
    position: relative;
    z-index: 5;
}
.site-footer-inner {
    display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.site-footer-inner a { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; }
.site-footer-inner a:hover { color: var(--accent); }

/* 2026-08-23 (bug sweep, Faz 5) - about.html's own markup(.about-container/.about-text/
   .about-visual/.cyber-box/.cyber-box-inner) never had matching rules anywhere in this file - the
   intended two-column "vision text next to a cyber terminal" layout never rendered, just a plain
   stacked text block. Reuses the SAME grid mechanics `.grid` above already establishes(auto-fit
   two-up, not a new pattern) and the SAME border/background vocabulary(--border-color/--bg-card)
   every other bordered panel on this site already uses(.form-control, the pricing tier boxes). */
.about-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 48px; align-items: center;
}
.about-text h3 { color: var(--accent); font-family: var(--font-mono); font-size: 15px; letter-spacing: 1px; margin: 8px 0 20px; }
.about-text p { color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.cyber-box {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px;
    padding: 24px; box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
/* 2026-10-02: the box shows the project's real facts instead of a fake boot sequence.
   2026-10-03 (Osman: "çok bitişik"): label above value, each fact its own tile in a 2-column grid. */
.about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-fact {
    display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
    border: 1px solid var(--border-color); border-radius: 10px; background: rgba(255, 255, 255, 0.03);
}
.about-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.about-fact span { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
.about-fact strong { font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--text-main); }
@media (max-width: 420px) { .about-facts { grid-template-columns: 1fr; } }
.about-text a { color: var(--accent); }

/* 2026-10-01: home page sections under the hero - launch-video showcase, how it works,
   inside-the-app gallery and a plan summary. */
.eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.text-link { color: var(--text-muted); font-family: var(--font-mono); font-size: 14px; text-decoration: none; }
.text-link:hover { color: var(--accent); }

.showcase-section { padding-top: 90px; scroll-margin-top: 40px; }
.showcase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.showcase-copy h2 { font-size: 40px; line-height: 1.15; margin-bottom: 18px; letter-spacing: -0.5px; }
.showcase-lead { color: var(--text-muted); font-size: 17px; margin-bottom: 22px; }
.check-list { list-style: none; margin-bottom: 30px; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.showcase-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.video-frame {
    aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border-color); background: #000;
    box-shadow: 0 0 60px rgba(0, 255, 204, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.step h3 { margin: 10px 0 10px; font-size: 20px; }
.step p { color: var(--text-muted); }
.step-num { font-family: var(--font-mono); font-size: 32px; color: var(--accent); opacity: 0.8; }

.tour-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: -30px 0 28px; }
.tour-tab {
    font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.5px; cursor: pointer;
    padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color); color: var(--text-muted); transition: all 0.2s ease;
}
.tour-tab:hover { color: var(--text-main); border-color: var(--accent); }
.tour-tab.active { color: #000; background: var(--accent); border-color: var(--accent); }
.tour { max-width: 1100px; margin: 0 auto; }
.tour-panel { margin: 0; }
.tour-stage {
    aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; cursor: zoom-in;
    background: #05080d; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 255, 204, 0.10), 0 30px 80px rgba(0, 0, 0, 0.6);
}
/* All tour screenshots are exported at exactly 2:1 (1600x800), so each one fills the stage edge to edge. */
.tour-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-panel figcaption { text-align: center; color: var(--text-muted); margin: 18px auto 0; max-width: 640px; }

.plan-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.plan-mini { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text-main); padding: 30px; }
.plan-mini.featured { border-color: var(--accent); }
.plan-mini-name { font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.plan-mini-price { font-family: var(--font-mono); font-size: 36px; color: var(--accent); }
.plan-mini-price small { font-size: 14px; color: var(--text-muted); margin-left: 4px; }
.plan-mini-desc { color: var(--text-muted); font-size: 15px; }
.plans-link { text-align: center; margin-top: 30px; }

@media (max-width: 900px) {
    .showcase { grid-template-columns: 1fr; gap: 32px; }
    .showcase-copy h2 { font-size: 30px; }
    .steps, .plan-strip { grid-template-columns: 1fr; }
    .tour-tabs { margin-top: -20px; gap: 8px; }
    .tour-tab { font-size: 12px; padding: 8px 12px; }
}

/* 2026-10-01: privacy.html / terms.html - long-form text; [data-lang-block] shows the block that
   matches the selected language (see app.js updateLanguage). */
.legal { max-width: 860px; }
.legal-card h3 { margin: 28px 0 10px; font-size: 20px; }
.legal-card h3:first-of-type { margin-top: 8px; }
.legal-card p, .legal-card li { color: var(--text-muted); }
.legal-card ul { padding-left: 20px; }
.legal-card li { margin-bottom: 8px; }
.legal-card a { color: var(--accent); }
.legal-updated { font-family: var(--font-mono); font-size: 13px; }

/* 2026-10-01: hero release badge - OS, current version, "free to start" in one calm pill.
   Inter for the words, tabular numerals for the version so it never jitters between releases. */
.release-chip {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
    padding: 7px 16px 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
}
.release-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.release-os { color: var(--text-main); font-weight: 600; }
.release-ver {
    font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.4px;
    padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.release-free { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); }

/* 2026-10-01: Share Tech Mono has no Turkish glyphs (Ü, İ, Ş, Ğ fell back to another font mid-word,
   e.g. "MASAÜSTÜ"). In Turkish the mono face switches to JetBrains Mono, which covers them. */
html[lang="tr"] { --font-mono: 'JetBrains Mono', monospace; }

/* 2026-10-02: hero release badge links to the Updates page. */
a.release-chip { text-decoration: none; white-space: nowrap; transition: border-color 0.2s ease, background 0.2s ease; }
a.release-chip:hover, a.release-chip:focus-visible { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.release-arrow { color: var(--accent); transition: transform 0.2s ease; }
a.release-chip:hover .release-arrow { transform: translateX(3px); }

/* 2026-10-02: Updates (changelog.html) - month headings as a timeline, one calm card per release.
   Cards do not lift on hover: this is a long reading page, not a grid of options. */
.changelog { max-width: 860px; }
.changelog .section-title { margin-bottom: 28px; }
.cl-lead { font-size: 20px; text-align: center; margin-bottom: 14px; color: var(--text-main); }
.cl-intro { color: var(--text-muted); text-align: center; max-width: 720px; margin: 0 auto 8px; line-height: 1.7; }
.cl-month {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    margin: 56px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color);
    font-size: 24px;
}
.cl-month em { font-style: normal; font-size: 15px; font-weight: 400; color: var(--text-muted); }
.cl-month-intro { color: var(--text-muted); margin: 0 0 18px; line-height: 1.7; }
.glow-card.release { margin-bottom: 18px; padding: 24px 26px; }
.glow-card.release:hover { transform: none; }
.release-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.release-tag { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.4px; }
.release-date { font-size: 13px; color: var(--text-muted); }
.release-badge {
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; color: var(--accent); border: 1px solid var(--accent);
}
.release h4 { font-size: 19px; margin: 4px 0 12px; }
.release ul { list-style: none; padding: 0; }
.release li { color: var(--text-muted); line-height: 1.65; margin-bottom: 9px; }
.release li strong, .release p strong { color: var(--text-main); }
.release p { color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; }
.release p:last-child, .release li:last-child { margin-bottom: 0; }
.release-milestone { border-color: var(--accent); }
.cl-outro { margin-top: 40px; text-align: center; color: var(--text-muted); }
@media (max-width: 600px) {
    .glow-card.release { padding: 20px 18px; }
    .cl-month { font-size: 21px; margin-top: 44px; }
    .cl-lead { font-size: 18px; }
}

/* 2026-10-02: the 7th nav link (Updates) wrapped the menu onto two lines between the mobile
   breakpoint (900px) and ~1200px; tighter spacing keeps it on one line there. */
.nav-links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1200px) {
    .nav-links a { margin: 0 8px; font-size: 13px; }
}
@media (min-width: 901px) and (max-width: 1020px) {
    .nav-links a { margin: 0 6px; }
    .logo-suffix { display: none; }
}

/* 2026-10-02: language blocks must stay hidden even where a class sets its own display. */
[data-lang-block][hidden] { display: none !important; }

/* 2026-10-02: whitepaper - numbered sections reuse the legal-card reading style. */
.whitepaper .section-title { margin-bottom: 16px; }
.wp-sub { text-align: center; color: var(--text-muted); margin-bottom: 40px; }
.glow-card.wp-card { margin-bottom: 22px; padding: 28px 30px; }
.glow-card.wp-card:hover { transform: none; }
.wp-card h3:first-of-type { margin-top: 0; }
.wp-card p { line-height: 1.75; margin-bottom: 12px; }
.wp-card p:last-child { margin-bottom: 0; }
.wp-card ul, .wp-steps { padding-left: 20px; color: var(--text-muted); line-height: 1.7; }
.wp-steps li { margin-bottom: 8px; }
.wp-steps strong, .wp-card li strong { color: var(--text-main); }
@media (max-width: 600px) { .glow-card.wp-card { padding: 22px 18px; } }

.accordion-content a { color: var(--accent); }
.release a { color: var(--accent); }

/* 2026-10-03 (Osman: link text was dark navy and hard to read): every link inside page content uses
   the theme accent, with an underline, instead of the browser's default blue. */
.section p a, .section li a, .section .legal-card a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.section p a:hover, .section li a:hover { opacity: 0.85; }

/* 2026-10-03: long reading cards stay still on hover (no lift, no tilt - see app.js). */
.glow-card.legal-card:hover { transform: none; }

/* 2026-10-03: ?embed=1 - the legal pages shown inside the app's sign-up window: text only. */
html.embed .navbar, html.embed .site-footer, html.embed .stars, html.embed .nebula { display: none !important; }
html.embed .section { padding-top: 28px !important; padding-bottom: 28px !important; }
html.embed .section-title { font-size: 28px; margin-bottom: 20px; }

/* 2026-10-03: support page as a small help centre - self-service cards, then the form. */
.help-container { max-width: 1000px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-bottom: 56px; }
.glow-card.help-card { padding: 24px; display: flex; flex-direction: column; }
.help-icon { font-size: 26px; margin-bottom: 12px; }
.help-card h3 { font-size: 18px; margin-bottom: 8px; }
.help-card p { color: var(--text-muted); line-height: 1.6; font-size: 14px; flex: 1; }
.section .help-card a.help-link { margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--accent); text-decoration: none; }
.section .help-card a.help-link:hover { text-decoration: underline; }
.help-contact-head { text-align: center; margin-bottom: 22px; }
.help-contact-head h3 { font-size: 24px; margin-bottom: 6px; }
.help-contact-head p { color: var(--text-muted); }
.help-container #support-form { max-width: 640px; margin: 0 auto; }
.help-mail { text-align: center; color: var(--text-muted); margin-top: 20px; }

/* 2026-10-03: free-trial line under paid prices and the auto-charge note under the plans. */
.trial-note { margin: -6px 0 18px; font-size: 13px; font-weight: 600; color: var(--accent); }
.pricing-trial-terms { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--text-muted); }