/* ==========================================================================
   ALEVBET — Tasarım Sistemi
   --------------------------------------------------------------------------
   Palet   : gece siyahı zemin + ateş rampası (beyaz-sıcak → kehribar → köz)
   Tipo    : Anton (display) / Barlow Condensed (arayüz) / Barlow (metin)
   İmza    : sağ kenardaki canlı alev duvarı (SVG filament + akış animasyonu)
   ========================================================================== */

        :root {
            /* --- zemin & yüzeyler --- */
            --ink-900: #04060a;
            --ink-850: #070a10;
            --ink-800: #0b0f15;
            --ink-750: #111721;
            --ink-700: #161d28;

            /* --- ateş rampası --- */
            --f-050: #fff6d5; /* beyaz-sıcak çekirdek */
            --f-100: #ffe08a;
            --f-200: #ffc63a; /* kehribar - ana vurgu */
            --f-300: #ff9a10; /* turuncu */
            --f-400: #f4610a;
            --f-500: #c22706; /* köz kırmızısı */

            /* --- metin --- */
            --txt: #e8edf5;
            --txt-2: #aeb8c6;
            --txt-3: #7f8b9b;

            /* --- çizgi & gölge --- */
            --line: rgba(255, 255, 255, .07);
            --line-2: rgba(255, 255, 255, .12);
            --line-fire: rgba(255, 138, 26, .26);
            --sh-card: 0 18px 40px -24px rgba(0, 0, 0, .9);
            --sh-fire: 0 10px 30px -12px rgba(255, 124, 10, .55);

            /* --- gradyanlar --- */
            --grad-fire: linear-gradient(180deg, var(--f-050) 0%, var(--f-200) 34%, var(--f-300) 62%, var(--f-400) 88%, var(--f-500) 100%);
            --grad-btn: linear-gradient(180deg, #ffd257 0%, #ffab14 46%, #f5850a 100%);
            --grad-steel: linear-gradient(180deg, #ffffff 0%, #e6ecf5 38%, #9fabbd 62%, #e9eff7 100%);

            /* --- ölçü --- */
            --wrap: 1180px;
            --gutter: clamp(16px, 4vw, 28px);
            --head-h: 88px;
            --r-sm: 8px;
            --r-md: 12px;
            --r-lg: 16px;
            --r-xl: 22px;

            /* --- hareket --- */
            --ease: cubic-bezier(.22, .61, .36, 1);
            --fx: 1; /* alev efekti şiddeti (JS ile 0/1) */
        }

        /* ==========================================================================
   RESET
   ========================================================================== */
        *, *::before, *::after {
            box-sizing: border-box
        }

        * {
            margin: 0;
            padding: 0
        }

        html {
            -webkit-text-size-adjust: 100%
        }

        @media (prefers-reduced-motion: no-preference) {
            html {
                scroll-behavior: smooth
            }
        }

        body {
            font-family: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: var(--txt);
            background: var(--ink-900);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        svg {
            display: block
        }

        img {
            display: block;
            max-width: 100%;
            height: auto
        }

        ul, ol {
            list-style: none
        }

        a {
            color: inherit;
            text-decoration: none
        }

        button, input, select {
            font: inherit;
            color: inherit
        }

        button {
            background: none;
            border: 0;
            cursor: pointer
        }

        :focus-visible {
            outline: 2px solid var(--f-200);
            outline-offset: 3px;
            border-radius: 6px;
        }

        ::selection {
            background: rgba(255, 154, 16, .35);
            color: #fff
        }

        /* sayfa atmosferi: derin ateş ışıması */
        .bg-atmos {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(1100px 620px at 92% 96%, rgba(255, 102, 8, .14), transparent 68%),
            radial-gradient(900px 520px at 6% 4%, rgba(255, 140, 20, .07), transparent 70%),
            radial-gradient(700px 400px at 50% 0%, rgba(255, 90, 10, .09), transparent 72%),
            linear-gradient(180deg, #04060a 0%, #05080d 45%, #04060a 100%);
        }

        /* ince film grenliliği — düz siyahın "dijital" hissini kırar */
        .bg-grain {
            position: fixed;
            inset: -50%;
            z-index: 1;
            pointer-events: none;
            opacity: .05;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* ==========================================================================
   YARDIMCI SINIFLAR
   ========================================================================== */
        .wrap {
            width: min(100% - (var(--gutter) * 2), var(--wrap));
            margin-inline: auto
        }

        .section {
            position: relative;
            z-index: 3
        }

        .section + .section {
            margin-top: clamp(34px, 5vw, 54px)
        }

        .u-vh {
            position: absolute !important;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .skip {
            position: absolute;
            left: 50%;
            top: -70px;
            transform: translateX(-50%);
            z-index: 200;
            padding: 12px 22px;
            border-radius: 0 0 var(--r-md) var(--r-md);
            background: var(--grad-btn);
            color: #2a1400;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            letter-spacing: .08em;
            transition: top .25s var(--ease);
        }

        .skip:focus {
            top: 0
        }

        /* --- eyebrow / etiket --- */
        .eyebrow {
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .75rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--f-200);
        }

        /* --- düğmeler --- */
        .btn {
            --btn-h: 46px;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            height: var(--btn-h);
            padding: 0 22px;
            border-radius: var(--r-sm);
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .9rem;
            letter-spacing: .1em;
            white-space: nowrap;
            overflow: hidden;
            isolation: isolate;
            transition: transform .28s var(--ease), box-shadow .28s var(--ease),
            color .2s, border-color .2s, background-color .2s;
        }

        .btn svg {
            width: 16px;
            height: 16px;
            flex: none
        }

        .btn--fire {
            background: var(--grad-btn);
            color: #2c1600;
            box-shadow: var(--sh-fire), inset 0 1px 0 rgba(255, 255, 255, .5),
            inset 0 -1px 0 rgba(140, 60, 0, .35);
        }

        .btn--fire::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .7) 46%, transparent 62%);
            transform: translateX(-130%);
        }

        .btn--fire:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 34px -12px rgba(255, 124, 10, .75), inset 0 1px 0 rgba(255, 255, 255, .55)
        }

        .btn--fire:hover::after {
            transform: translateX(130%);
            transition: transform .75s var(--ease)
        }

        .btn--fire:active {
            transform: translateY(0)
        }

        .btn--ghost {
            border: 1px solid var(--line-2);
            color: var(--txt);
            background: rgba(9, 13, 19, .5);
            backdrop-filter: blur(8px);
        }

        .btn--ghost:hover {
            border-color: var(--f-300);
            color: var(--f-100);
            background: rgba(255, 140, 20, .09)
        }

        .btn--sm {
            --btn-h: 38px;
            padding: 0 14px;
            font-size: .82rem
        }

        .btn--lg {
            --btn-h: 52px;
            padding: 0 30px;
            font-size: 1rem
        }

        /* --- "detaylar" tipi bağlantı --- */
        .link-fire {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .85rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--f-200);
            transition: color .2s, gap .25s var(--ease);
        }

        .link-fire svg {
            width: 15px;
            height: 15px;
            transition: transform .25s var(--ease)
        }

        .link-fire:hover {
            color: var(--f-100);
            gap: 12px
        }

        .link-fire:hover svg {
            transform: translateX(3px)
        }

        /* --- kaydırmayla beliriş --- */
        .reveal {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .7s var(--ease), transform .7s var(--ease)
        }

        .reveal.is-in {
            opacity: 1;
            transform: none
        }

        /* --- kaydırma çubuğu --- */
        @supports selector(::-webkit-scrollbar) {
            ::-webkit-scrollbar {
                width: 11px;
                height: 11px
            }

            ::-webkit-scrollbar-track {
                background: var(--ink-850)
            }

            ::-webkit-scrollbar-thumb {
                background: linear-gradient(180deg, var(--f-300), var(--f-500));
                border-radius: 99px;
                border: 3px solid var(--ink-850)
            }

            ::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(180deg, var(--f-200), var(--f-400))
            }
        }

        /* ==========================================================================
   ★ İMZA ÖĞESİ — SAĞ KENAR ALEV DUVARI
   --------------------------------------------------------------------------
   Referanstaki alev bloblardan değil, kökten çıkıp yukarı-sola savrulan
   ince ateş SERİTLERİNDEN oluşuyor. Yaklaşım:
     1) Path'ler sinüs katmanlarıyla (fbm) üretildi → mekanik durmuyor.
     2) pathLength="100" + stroke-dashoffset animasyonu → serit boyunca
        AKIŞ hissi. Her seridin kendi süresi/gecikmesi var.
     3) İki blur + feMerge → bloom (parlama). Turbulence runtime'da yok,
        gürültü geometriye gömülü olduğu için her karede ucuz.
     4) mix-blend-mode:screen → ışık siyah zemine ekleniyor, sayfaya taşıyor.
   ========================================================================== */
        .firewall {
            position: fixed;
            right: 0;
            bottom: 0;
            width: clamp(132px, 20vw, 320px);
            height: min(96vh, 1000px);
            z-index: 4;
            pointer-events: none;
            mix-blend-mode: screen;
            opacity: calc(1 * var(--fx));
            transition: opacity .6s var(--ease);
            /* köşede yoğun, yukarı-sola doğru sönümlenen maske */
            -webkit-mask-image: radial-gradient(125% 82% at 108% 104%, #000 24%, rgba(0, 0, 0, .72) 52%, rgba(0, 0, 0, .24) 76%, transparent 92%);
            mask-image: radial-gradient(125% 82% at 108% 104%, #000 24%, rgba(0, 0, 0, .72) 52%, rgba(0, 0, 0, .24) 76%, transparent 92%);
        }

        /* köz yatağı — seritlerin arkasındaki sıcak ışıma */
        .firewall__ember {
            position: absolute;
            inset: 0;
            background: radial-gradient(36% 24% at 100% 100%, rgba(255, 206, 92, .62), transparent 72%),
            radial-gradient(60% 44% at 104% 96%, rgba(255, 116, 12, .42), transparent 74%),
            radial-gradient(98% 76% at 112% 92%, rgba(214, 44, 4, .28), transparent 76%);
            filter: blur(8px);
            animation: emberBreathe 6.5s ease-in-out infinite;
        }

        @keyframes emberBreathe {
            0%, 100% {
                opacity: .72;
                transform: scale(1)
            }
            38% {
                opacity: 1;
                transform: scale(1.06)
            }
            64% {
                opacity: .82;
                transform: scale(.98)
            }
        }

        .firewall__svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible
        }

        /* --- seritler --- */
        .fl, .fc {
            fill: none;
            stroke-linecap: round;
            stroke-dasharray: var(--dash) var(--gap);
            animation: flow var(--dur) linear var(--delay) infinite,
            flick calc(var(--dur) * .53) ease-in-out var(--delay) infinite;
        }

        .fl {
            stroke: url(#gFlame)
        }

        .fc {
            stroke: url(#gCore)
        }

        /* dashoffset 100 → 0 : desen kökten uca doğru akar */
        @keyframes flow {
            from {
                stroke-dashoffset: 100
            }
            to {
                stroke-dashoffset: 0
            }
        }

        @keyframes flick {
            0%, 100% {
                opacity: calc(var(--op) * .55)
            }
            22% {
                opacity: var(--op)
            }
            47% {
                opacity: calc(var(--op) * .7)
            }
            71% {
                opacity: calc(var(--op) * .95)
            }
        }

        /* --- kıvılcımlar --- */
        .firewall__sparks {
            position: absolute;
            inset: 0;
            overflow: hidden
        }

        .firewall__sparks i {
            position: absolute;
            bottom: -2%;
            left: var(--x);
            width: var(--s);
            height: var(--s);
            border-radius: 50%;
            background: #ffdf9a;
            box-shadow: 0 0 6px 1px rgba(255, 168, 32, .9), 0 0 14px 4px rgba(255, 96, 0, .45);
            opacity: 0;
            animation: spark var(--t) linear var(--d) infinite;
        }

        @keyframes spark {
            0% {
                transform: translate3d(0, 0, 0) scale(.5);
                opacity: 0
            }
            6% {
                opacity: var(--o)
            }
            55% {
                transform: translate3d(calc(var(--dx) * .45), -46vh, 0) scale(1)
            }
            85% {
                opacity: calc(var(--o) * .5)
            }
            100% {
                transform: translate3d(var(--dx), -96vh, 0) scale(.25);
                opacity: 0
            }
        }

        /* --- efekt anahtarı --- */
        .fx-toggle {
            position: fixed;
            left: 18px;
            bottom: 18px;
            z-index: 70;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            height: 38px;
            padding: 0 14px;
            border-radius: 99px;
            border: 1px solid var(--line-fire);
            background: rgba(8, 11, 17, .78);
            backdrop-filter: blur(10px);
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 600;
            font-size: .76rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--txt-2);
            transition: color .2s, border-color .2s, transform .25s var(--ease);
        }

        .fx-toggle:hover {
            color: var(--f-100);
            border-color: var(--f-300);
            transform: translateY(-2px)
        }

        .fx-toggle svg {
            width: 15px;
            height: 15px;
            color: var(--f-300);
            transition: color .2s
        }

        .fx-toggle[aria-pressed="false"] svg {
            color: var(--txt-3)
        }

        .fx-toggle[aria-pressed="false"] .fx-toggle__on {
            display: none
        }

        .fx-toggle[aria-pressed="true"] .fx-toggle__off {
            display: none
        }

        /* ==========================================================================
   ÜST BAR
   ========================================================================== */
        .head {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 60;
            transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
            border-color .4s var(--ease);
            border-bottom: 1px solid transparent;
        }

        .head.is-stuck {
            background: rgba(5, 8, 13, .86);
            backdrop-filter: blur(16px) saturate(150%);
            border-bottom-color: var(--line-fire);
            box-shadow: 0 18px 46px -30px #000;
        }

        /* okuma ilerleme çizgisi */
        .head__progress {
            position: absolute;
            left: 0;
            bottom: -1px;
            height: 2px;
            width: 100%;
            transform: scaleX(var(--p, 0));
            transform-origin: 0 50%;
            background: linear-gradient(90deg, var(--f-500), var(--f-300) 45%, var(--f-050));
            box-shadow: 0 0 12px rgba(255, 150, 20, .8);
            opacity: 0;
            transition: opacity .3s;
        }

        .head.is-stuck .head__progress {
            opacity: 1
        }

        .head__inner {
            display: flex;
            align-items: center;
            gap: clamp(12px, 1.3vw, 17px);
            min-height: var(--head-h)
        }

        /* --- logo --- */
        .logo {
            display: flex;
            align-items: center;
            flex: none;
            position: relative
        }

        .logo__mark {
            width: clamp(50px, 5vw, 66px);
            height: auto;
            filter: drop-shadow(0 4px 16px rgba(255, 110, 10, .55))
        }

        .logo__word {
            margin-left: -6px;
            font-family: 'Anton', 'Arial Narrow', 'DejaVu Sans Condensed', Impact, sans-serif;
            font-size: clamp(1.22rem, 1.85vw, 1.55rem);
            letter-spacing: .005em;
            transform: skewX(-8deg);
            background: var(--grad-fire);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 2px 10px rgba(255, 120, 10, .5));
        }

        .logo:hover .logo__mark {
            animation: logoFlicker .9s ease-in-out
        }

        @keyframes logoFlicker {
            0%, 100% {
                filter: drop-shadow(0 4px 16px rgba(255, 110, 10, .55))
            }
            35% {
                filter: drop-shadow(0 4px 26px rgba(255, 180, 40, .95)) brightness(1.15)
            }
            70% {
                filter: drop-shadow(0 4px 14px rgba(255, 110, 10, .5)) brightness(.98)
            }
        }

        .head__stack {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0
        }

        /* --- servis satırı --- */
        .head__utils {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
            padding: 8px 0 4px;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 600;
            font-size: .78rem;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .head__utils button {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--txt-3);
            transition: color .2s
        }

        .head__utils button:hover {
            color: var(--f-200)
        }

        .head__utils svg {
            width: 14px;
            height: 14px
        }

        .head__utils .chev {
            width: 11px;
            height: 11px;
            opacity: .7
        }

        /* --- ana satır --- */
        .head__row {
            display: flex;
            align-items: center;
            gap: clamp(10px, 1.1vw, 14px);
            padding-bottom: 10px
        }

        .nav {
            display: flex;
            align-items: center;
            gap: clamp(9px, 1vw, 15px);
            flex: 1;
            min-width: 0;
            /* yedek font beklenenden genişse hizayı bozmak yerine kaydırılır */
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            padding: 8px 2px 7px;
            margin-bottom: -7px;
        }

        .nav::-webkit-scrollbar {
            display: none
        }

        .nav a {
            position: relative;
            padding: 6px 2px;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 600;
            font-size: clamp(.77rem, .88vw, .84rem);
            letter-spacing: .035em;
            color: var(--txt-2);
            white-space: nowrap;
            transition: color .2s;
        }

        .nav a::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--f-400), var(--f-100));
            transform: scaleX(0);
            transform-origin: 0 50%;
            transition: transform .3s var(--ease);
            box-shadow: 0 0 10px rgba(255, 150, 20, .9);
        }

        .nav a:hover {
            color: var(--f-100)
        }

        .nav a:hover::after {
            transform: scaleX(1)
        }

        .nav a[aria-current="page"] {
            color: var(--f-200)
        }

        .nav a[aria-current="page"]::after {
            transform: scaleX(1)
        }

        .head__auth {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: none
        }

        /* --- hamburger --- */
        .burger {
            display: none;
            width: 44px;
            height: 38px;
            border-radius: var(--r-sm);
            border: 1px solid var(--line-2);
            align-items: center;
            justify-content: center;
            flex: none;
        }

        .burger span {
            display: block;
            width: 19px;
            height: 2px;
            background: var(--f-200);
            border-radius: 2px;
            position: relative;
            transition: background .2s
        }

        .burger span::before, .burger span::after {
            content: '';
            position: absolute;
            left: 0;
            width: 19px;
            height: 2px;
            background: var(--f-200);
            border-radius: 2px;
            transition: transform .3s var(--ease), top .2s;
        }

        .burger span::before {
            top: -6px
        }

        .burger span::after {
            top: 6px
        }

        .burger[aria-expanded="true"] span {
            background: transparent
        }

        .burger[aria-expanded="true"] span::before {
            top: 0;
            transform: rotate(45deg)
        }

        .burger[aria-expanded="true"] span::after {
            top: 0;
            transform: rotate(-45deg)
        }

        /* --- mobil çekmece --- */
        .drawer {
            position: fixed;
            inset: 0;
            z-index: 55;
            display: grid;
            grid-template-rows:var(--head-h) 1fr;
            background: rgba(4, 6, 10, .97);
            backdrop-filter: blur(18px);
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s var(--ease), visibility .3s;
        }

        .drawer.is-open {
            opacity: 1;
            visibility: visible
        }

        .drawer__body {
            overflow-y: auto;
            padding: 8px var(--gutter) 40px
        }

        .drawer nav {
            display: flex;
            flex-direction: column
        }

        .drawer nav a {
            padding: 15px 4px;
            border-bottom: 1px solid var(--line);
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 600;
            font-size: 1.15rem;
            letter-spacing: .09em;
            color: var(--txt);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transform: translateY(14px);
            opacity: 0;
        }

        .drawer.is-open nav a {
            transform: none;
            opacity: 1;
            transition: transform .45s var(--ease) calc(var(--i) * 45ms),
            opacity .45s var(--ease) calc(var(--i) * 45ms);
        }

        .drawer nav a span {
            color: var(--f-300);
            font-size: .9rem
        }

        .drawer nav a[aria-current="page"] {
            color: var(--f-200)
        }

        .drawer__cta {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 12px;
            margin-top: 26px
        }

        .drawer__meta {
            display: flex;
            gap: 22px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            letter-spacing: .13em;
            text-transform: uppercase;
            font-size: .8rem;
            color: var(--txt-3);
        }

        /* ==========================================================================
   HERO — şömine sahnesi
   ========================================================================== */
        .hero {
            position: relative;
            z-index: 3;
            padding-top: var(--head-h);
            min-height: clamp(560px, 86vh, 760px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            isolation: isolate;
        }

        /* --- sahne katmanları --- */
        .hero__scene {
            position: absolute;
            inset: 0;
            z-index: -1;
            overflow: hidden
        }

        /* 1. taş duvar dokusu */
        .hero__stone {
            position: absolute;
            inset: 0;
            background: radial-gradient(58% 68% at 62% 62%, rgba(96, 52, 24, .55), transparent 66%),
            radial-gradient(40% 50% at 84% 40%, rgba(70, 40, 22, .4), transparent 70%),
            linear-gradient(180deg, #0a0806 0%, #160e07 42%, #0d0805 78%, #050403 100%);
        }

        .hero__stone::after { /* kaba taş dokusu */
            content: '';
            position: absolute;
            inset: 0;
            opacity: .28;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028 .05' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E");
        }

        /* 2. şöminedeki ateş */
        .hero__fire {
            position: absolute;
            right: 0;
            bottom: 0;
            width: min(72%, 860px);
            height: 90%;
            opacity: calc(1 * var(--fx));
            mix-blend-mode: screen;
            -webkit-mask-image: radial-gradient(72% 78% at 52% 100%, #000 34%, rgba(0, 0, 0, .55) 64%, transparent 88%);
            mask-image: radial-gradient(72% 78% at 52% 100%, #000 34%, rgba(0, 0, 0, .55) 64%, transparent 88%);
        }

        .hero__fire svg {
            width: 100%;
            height: 100%;
            overflow: visible
        }

        .hf {
            fill: none;
            stroke: url(#gHero);
            stroke-linecap: round;
            stroke-dasharray: var(--dash) var(--gap);
            animation: flow var(--dur) linear var(--delay) infinite,
            flick calc(var(--dur) * .6) ease-in-out var(--delay) infinite;
        }

        .hero__glow {
            position: absolute;
            right: 2%;
            bottom: -6%;
            width: min(72%, 860px);
            height: 70%;
            background: radial-gradient(46% 42% at 52% 88%, rgba(255, 198, 80, .62), transparent 70%),
            radial-gradient(74% 68% at 52% 92%, rgba(255, 110, 12, .42), transparent 74%),
            radial-gradient(96% 84% at 52% 96%, rgba(206, 44, 6, .24), transparent 78%);
            filter: blur(14px);
            opacity: calc(1 * var(--fx));
            animation: emberBreathe 5.2s ease-in-out infinite;
        }

        /* 3. şömine parmaklığı — saf CSS gradyan siluet */
        .hero__grate {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: min(30%, 196px);
            background: /* yuvarlak uçlar */ radial-gradient(circle at 11px 11px, #04060a 0 11px, transparent 11.5px) 0 0/42px 24px repeat-x,
                /* dikey çubuklar */ repeating-linear-gradient(90deg, #04060a 0 22px, transparent 22px 42px) 0 11px/100% calc(100% - 11px) no-repeat,
                /* alt kuşak */ linear-gradient(#04060a, #04060a) 0 100%/100% 26% no-repeat;
            filter: drop-shadow(0 -2px 10px rgba(0, 0, 0, .85));
        }

        /* 4. vinyet — metnin okunurluğu */
        .hero__vig {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(4, 6, 10, .96) 0%, rgba(4, 6, 10, .84) 26%, rgba(4, 6, 10, .34) 54%, transparent 80%),
            linear-gradient(180deg, rgba(4, 6, 10, .9) 0%, transparent 26%, transparent 62%, rgba(4, 6, 10, .96) 100%);
        }

        /* --- içerik / hero slider: gerçek Swiper mantığı --- */
        /*
   Burada her <article class="slide"> tek parça bir görsel katman gibi davranır.
   Metin, badge, açıklama ve CTA kendi başına fade/zoom olmaz; bütün slayt birlikte
   yatay olarak hareket eder. Standart Swiper hissi: ileri giderken mevcut slayt
   sola çıkar, sıradaki slayt sağdan girer. Geri giderken yön tersine döner.
*/
        .hero__inner {
            position: relative;
            display: block;
            overflow: hidden;
            padding: clamp(18px, 4vh, 44px) 0;
            touch-action: pan-y;
            cursor: grab;
        }

        .hero__inner.is-dragging {
            cursor: grabbing
        }

        .hero__track {
            display: flex;
            width: 100%;
            align-items: stretch;
            transform: translate3d(0, 0, 0);
            transition: none; /* programatik, manuel ve ok geçişleri aynı fiziksel track hareketini kullanır */
            will-change: transform;
            backface-visibility: hidden;
        }

        .hero__track.is-no-transition {
            transition: none !important
        }

        .hero__track.is-dragging {
            transition: none !important
        }

        .slide {
            position: relative;
            flex: 0 0 100%;
            width: 100%;
            max-width: none;
            min-width: 0;
            opacity: 1;
            visibility: visible;
            transform: none;
            pointer-events: auto;
            backface-visibility: hidden;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Slayt yüzde yüz geniştir; yazı bloğu eski okunabilir genişliğini korur. */
        .slide > * {
            max-width: min(100%, 600px)
        }

        /* JS'in sonsuz döngü için oluşturduğu geçici kopyalar etkileşim alamaz. */
        .slide[data-swiper-clone="true"] {
            pointer-events: none
        }

        .slide__badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            height: 38px;
            padding: 0 18px 0 14px;
            margin-bottom: clamp(14px, 2.4vh, 22px);
            border: 1px solid var(--line-fire);
            border-radius: var(--r-sm);
            background: rgba(8, 11, 17, .6);
            backdrop-filter: blur(8px);
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .82rem;
            letter-spacing: .15em;
            color: var(--txt);
        }

        .slide__badge svg {
            width: 19px;
            height: 19px;
            color: var(--f-200);
            flex: none
        }

        .slide__title {
            font-family: 'Anton', 'Arial Narrow', 'DejaVu Sans Condensed', Impact, sans-serif;
            font-weight: 400;
            line-height: .94;
            letter-spacing: .012em;
            text-transform: uppercase;
        }

        .slide__l1 {
            display: block;
            font-size: clamp(2.15rem, 5.4vw, 3.55rem);
            background: var(--grad-steel);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .85));
        }

        .slide__l2 {
            display: block;
            font-size: clamp(2.75rem, 7.4vw, 4.9rem);
            margin-top: .06em;
            background: linear-gradient(178deg, #fff2c4 2%, var(--f-200) 26%, var(--f-300) 54%, var(--f-400) 78%, #d33a05 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 0 24px rgba(255, 140, 20, .5)) drop-shadow(0 3px 10px rgba(0, 0, 0, .7));
        }

        .slide__text {
            margin-top: clamp(14px, 2.4vh, 20px);
            max-width: 44ch;
            font-size: clamp(.98rem, 1.28vw, 1.09rem);
            color: var(--txt-2);
        }

        .slide__cta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: clamp(20px, 3.4vh, 30px)
        }

        /* --- karusel kontrolleri --- */
        .hero__arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 6;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--f-300);
            border: 1px solid transparent;
            transition: background-color .25s, border-color .25s, color .2s, transform .25s var(--ease);
        }

        .hero__arrow svg {
            width: 22px;
            height: 22px
        }

        .hero__arrow:hover {
            background: rgba(255, 140, 20, .12);
            border-color: var(--line-fire);
            color: var(--f-100)
        }

        .hero__arrow--prev {
            left: max(6px, calc((100vw - var(--wrap)) / 2 - 52px))
        }

        .hero__arrow--next {
            right: max(6px, calc((100vw - var(--wrap)) / 2 - 52px))
        }

        .hero__arrow--prev:hover {
            transform: translateY(-50%) translateX(-3px)
        }

        .hero__arrow--next:hover {
            transform: translateY(-50%) translateX(3px)
        }

        .hero__bar {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: clamp(14px, 3vh, 26px);
        }

        .dots {
            display: flex;
            gap: 9px
        }

        .dots button {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .22);
            transition: background-color .3s, width .35s var(--ease), box-shadow .3s;
        }

        .dots button[aria-selected="true"] {
            width: 26px;
            border-radius: 99px;
            background: var(--f-200);
            box-shadow: 0 0 12px rgba(255, 180, 40, .8);
        }

        /* video rozeti */
        .hero__video {
            position: absolute;
            right: 0;
            bottom: clamp(14px, 3vh, 26px);
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-size: .76rem;
            letter-spacing: .11em;
            color: var(--txt-3);
        }

        .hero__video b {
            color: var(--txt-2);
            font-weight: 600
        }

        .hero__video button {
            color: var(--txt-3);
            display: grid;
            place-items: center;
            transition: color .2s
        }

        .hero__video button:hover {
            color: var(--f-200)
        }

        .hero__video svg {
            width: 17px;
            height: 17px
        }

        /* ==========================================================================
   ÖZELLİK KARTLARI
   ========================================================================== */
        .feats {
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: clamp(10px, 1.4vw, 18px)
        }

        .feat {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 18px 18px 16px;
            border-radius: var(--r-lg);
            border: 1px solid var(--line);
            background: linear-gradient(160deg, var(--ink-750) 0%, var(--ink-800) 46%, #080b11 100%);
            box-shadow: var(--sh-card);
            overflow: hidden;
            isolation: isolate;
            transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
        }

        .feat::before { /* üst kenardaki köz çizgisi */
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 160, 40, .55), transparent);
            opacity: 0;
            transition: opacity .35s;
        }

        .feat::after { /* imleci takip eden sıcak ışıma */
            content: '';
            position: absolute;
            z-index: -1;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            left: var(--mx, 50%);
            top: var(--my, 50%);
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(255, 132, 16, .16), transparent 66%);
            opacity: 0;
            transition: opacity .4s;
        }

        .feat:hover {
            transform: translateY(-5px);
            border-color: var(--line-fire);
            box-shadow: 0 26px 50px -26px rgba(255, 110, 10, .4), var(--sh-card)
        }

        .feat:hover::before, .feat:hover::after {
            opacity: 1
        }

        .feat__icon {
            width: 62px;
            height: 62px;
            flex: none;
            margin-top: -2px
        }

        .feat__icon svg {
            width: 100%;
            height: 100%
        }

        .feat:hover .feat__icon {
            animation: iconPulse 1.4s ease-in-out infinite
        }

        @keyframes iconPulse {
            0%, 100% {
                filter: drop-shadow(0 0 8px rgba(255, 130, 20, .5))
            }
            50% {
                filter: drop-shadow(0 0 18px rgba(255, 180, 50, .9))
            }
        }

        .feat__body {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch
        }

        .feat__title {
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: .06em;
            color: #fff;
            margin-bottom: 5px;
            text-wrap: balance;
        }

        .feat__text {
            font-size: .86rem;
            line-height: 1.5;
            color: var(--txt-3);
            margin-bottom: 11px
        }

        .feat .link-fire {
            margin-top: auto;
            align-self: flex-start
        }

        /* ==========================================================================
   İSTATİSTİK ŞERİDİ
   ========================================================================== */
        .stats {
            position: relative;
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            border-radius: var(--r-lg);
            border: 1px solid var(--line-fire);
            background: linear-gradient(180deg, rgba(20, 13, 8, .9), rgba(9, 11, 16, .92));
            box-shadow: inset 0 1px 0 rgba(255, 180, 60, .14), 0 22px 50px -34px rgba(255, 110, 10, .6);
            overflow: hidden;
        }

        .stats::before, .stats::after { /* üst-alt akan köz çizgileri */
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 170, 50, .8), rgba(255, 120, 10, .3), transparent);
            background-size: 52% 100%;
            animation: railScan 7s linear infinite;
        }

        .stats::before {
            top: 0
        }

        .stats::after {
            bottom: 0;
            animation-direction: reverse;
            animation-duration: 9s
        }

        @keyframes railScan {
            0% {
                background-position: -60% 0
            }
            100% {
                background-position: 160% 0
            }
        }

        .stat {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 16px clamp(10px, 1.6vw, 22px);
            position: relative;
        }

        .stat + .stat::before {
            content: '';
            position: absolute;
            left: 0;
            top: 22%;
            bottom: 22%;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(255, 150, 40, .32), transparent);
        }

        .stat__icon {
            width: 34px;
            height: 34px;
            flex: none;
            color: var(--f-200)
        }

        .stat__icon svg {
            width: 100%;
            height: 100%
        }

        .stat__num {
            font-family: 'Anton', 'Arial Narrow', 'DejaVu Sans Condensed', Impact, sans-serif;
            font-weight: 400;
            font-size: clamp(1.25rem, 2.05vw, 1.6rem);
            line-height: 1.05;
            color: var(--f-200);
            letter-spacing: .01em;
            text-shadow: 0 0 18px rgba(255, 160, 30, .45);
            font-variant-numeric: tabular-nums;
            display: block;
        }

        .stat__label {
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 600;
            font-size: .75rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--txt-3);
            display: block;
            margin-top: 2px;
        }

        /* ==========================================================================
   SİZİN İÇİN SEÇTİKLERİMİZ
   ========================================================================== */
        .picks__head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 16px
        }

        .picks__title {
            font-family: 'Anton', 'Arial Narrow', 'DejaVu Sans Condensed', Impact, sans-serif;
            font-weight: 400;
            font-size: clamp(1.3rem, 2.4vw, 1.7rem);
            letter-spacing: .03em;
            text-transform: uppercase;
            color: #fff;
            line-height: 1.1;
        }

        .picks__title::after {
            content: '';
            display: block;
            width: 64px;
            height: 3px;
            margin-top: 9px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--f-200), var(--f-400) 60%, transparent);
            box-shadow: 0 0 14px rgba(255, 150, 20, .7);
        }

        .picks__grid {
            display: grid;
            grid-template-columns:repeat(5, 1fr);
            gap: clamp(10px, 1.3vw, 16px)
        }

        .pick {
            display: flex;
            flex-direction: column;
            border-radius: var(--r-lg);
            overflow: hidden;
            border: 1px solid var(--line);
            background: linear-gradient(180deg, var(--ink-800), #080b11);
            box-shadow: var(--sh-card);
            transition: transform .38s var(--ease), border-color .38s, box-shadow .38s;
        }

        .pick:hover {
            transform: translateY(-6px);
            border-color: var(--line-fire);
            box-shadow: 0 30px 54px -28px rgba(255, 110, 10, .45), var(--sh-card)
        }

        /* --- görsel alanı: CSS ile kurulan sahne + amblem --- */
        .pick__art {
            position: relative;
            aspect-ratio: 16/11;
            overflow: hidden;
            isolation: isolate;
            display: grid;
            place-items: center;
        }

        .pick__art::after { /* alt karartma */
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 13, .35) 72%, rgba(8, 11, 17, .9) 100%);
        }

        .pick__emblem {
            position: relative;
            width: 46%;
            max-width: 78px;
            filter: drop-shadow(0 4px 18px rgba(255, 120, 10, .65));
            transition: transform .45s var(--ease);
        }

        .pick:hover .pick__emblem {
            transform: scale(1.09) translateY(-2px)
        }

        .pick__art::before { /* geçen ışık huzmesi */
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(112deg, transparent 34%, rgba(255, 220, 150, .18) 48%, transparent 60%);
            transform: translateX(-120%);
        }

        .pick:hover .pick__art::before {
            transform: translateX(120%);
            transition: transform .95s var(--ease)
        }

        /* sahne varyantları */
        .art--sport {
            background: radial-gradient(28% 30% at 18% 8%, rgba(255, 236, 190, .42), transparent 62%),
            radial-gradient(28% 30% at 82% 8%, rgba(255, 236, 190, .38), transparent 62%),
            radial-gradient(110% 62% at 50% 108%, rgba(52, 178, 84, .72), transparent 66%),
            linear-gradient(180deg, #08131f 0%, #123049 40%, #0d3a24 62%, #05130c 100%);
        }

        .art--sport .pick__scene {
            position: absolute;
            left: 50%;
            bottom: -42%;
            width: 78%;
            aspect-ratio: 1;
            transform: translateX(-50%);
            border: 2px solid rgba(255, 255, 255, .16);
            border-radius: 50%;
        }

        .art--moto {
            background: radial-gradient(42% 36% at 74% 20%, rgba(255, 140, 50, .62), transparent 66%),
            radial-gradient(92% 56% at 50% 106%, rgba(232, 50, 26, .62), transparent 68%),
            linear-gradient(180deg, #140a10 0%, #2a1018 42%, #170a0c 72%, #070508 100%);
        }

        .art--moto .pick__scene {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(102deg, transparent 0 13px, rgba(255, 170, 90, .16) 13px 15px);
            -webkit-mask-image: linear-gradient(94deg, transparent 6%, #000 46%, transparent 96%);
            mask-image: linear-gradient(94deg, transparent 6%, #000 46%, transparent 96%);
        }

        .art--scratch {
            background: radial-gradient(52% 46% at 50% 40%, rgba(255, 196, 74, .5), transparent 68%),
            linear-gradient(180deg, #1e1206 0%, #33200a 44%, #160d05 76%, #070508 100%);
        }

        .art--scratch .pick__scene {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255, 196, 90, .13) 11px 12px),
            repeating-linear-gradient(0deg, transparent 0 11px, rgba(255, 196, 90, .13) 11px 12px);
            -webkit-mask-image: radial-gradient(60% 56% at 50% 46%, #000, transparent 76%);
            mask-image: radial-gradient(60% 56% at 50% 46%, #000, transparent 76%);
        }

        .art--vip {
            background: radial-gradient(26% 24% at 50% -4%, rgba(255, 224, 150, .62), transparent 66%),
            radial-gradient(96% 60% at 50% 104%, rgba(18, 92, 58, .85), transparent 66%),
            linear-gradient(180deg, #0f0b08 0%, #123024 46%, #0a1a13 74%, #050807 100%);
        }

        .art--vip .pick__scene {
            position: absolute;
            left: 50%;
            top: -6%;
            width: 34%;
            aspect-ratio: 1;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(255, 214, 130, .55), transparent 66%);
            filter: blur(6px);
        }

        .art--virtual {
            background: radial-gradient(46% 40% at 50% 46%, rgba(90, 150, 255, .3), transparent 68%),
            radial-gradient(90% 58% at 50% 106%, rgba(255, 120, 20, .36), transparent 68%),
            linear-gradient(180deg, #060c18 0%, #0e1c34 44%, #0a1020 74%, #050709 100%);
        }

        .art--virtual .pick__scene {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(150, 200, 255, .1) 5px 6px);
            -webkit-mask-image: radial-gradient(70% 62% at 50% 50%, #000, transparent 82%);
            mask-image: radial-gradient(70% 62% at 50% 50%, #000, transparent 82%);
        }

        .pick__body {
            padding: 15px 16px 17px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1
        }

        .pick__name {
            font-family: 'Anton', 'Arial Narrow', 'DejaVu Sans Condensed', Impact, sans-serif;
            font-weight: 400;
            font-size: 1.06rem;
            letter-spacing: .028em;
            text-transform: uppercase;
            color: #fff;
            line-height: 1.15;
        }

        .pick__text {
            font-size: .84rem;
            line-height: 1.45;
            color: var(--txt-3);
            flex: 1
        }

        .pick .link-fire {
            margin-top: 8px;
            align-self: flex-start
        }

        /* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
        .foot {
            position: relative;
            z-index: 3;
            margin-top: clamp(48px, 7vw, 80px);
            border-top: 1px solid var(--line)
        }

        .foot::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: -1px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 150, 40, .5), transparent);
        }

        .foot__grid {
            display: grid;
            grid-template-columns:minmax(230px, 1fr) 2.5fr minmax(230px, 1.05fr);
            gap: clamp(24px, 3vw, 44px);
            padding: clamp(32px, 4.5vw, 48px) 0 clamp(26px, 3.4vw, 36px);
        }

        .foot__about {
            font-size: .87rem;
            line-height: 1.6;
            color: var(--txt-3);
            margin: 14px 0 18px;
            max-width: 36ch
        }

        .social {
            display: flex;
            gap: 9px
        }

        .social a {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 1px solid var(--line-2);
            color: var(--txt-2);
            transition: color .22s, border-color .22s, transform .28s var(--ease), background-color .22s;
        }

        .social svg {
            width: 16px;
            height: 16px
        }

        .social a:hover {
            color: #fff;
            border-color: var(--f-300);
            background: rgba(255, 140, 20, .14);
            transform: translateY(-3px)
        }

        .foot__cols {
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: clamp(14px, 2vw, 26px)
        }

        .foot__h {
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .85rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--f-300);
            margin-bottom: 13px;
        }

        .foot__cols li + li {
            margin-top: 8px
        }

        .foot__cols a {
            font-size: .87rem;
            color: var(--txt-3);
            transition: color .2s, padding-left .25s var(--ease);
            display: inline-block;
        }

        .foot__cols a:hover {
            color: var(--f-100);
            padding-left: 5px
        }

        .appbox {
            padding: 18px;
            border-radius: var(--r-lg);
            border: 1px solid var(--line-fire);
            background: linear-gradient(160deg, rgba(30, 18, 8, .7), rgba(9, 12, 17, .85));
        }

        .appbox__h {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .9rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--f-200);
        }

        .appbox__h svg {
            width: 14px;
            height: 14px
        }

        .appbox p {
            font-size: .85rem;
            color: var(--txt-3);
            margin: 9px 0 15px;
            line-height: 1.5
        }

        .appbox__row {
            display: flex;
            gap: 9px;
            flex-wrap: wrap
        }

        .store {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 13px;
            border-radius: var(--r-sm);
            border: 1px solid var(--line-2);
            background: #05070b;
            transition: border-color .22s, transform .26s var(--ease), background-color .22s;
        }

        .store:hover {
            border-color: var(--f-300);
            transform: translateY(-2px);
            background: #0a0e15
        }

        .store svg {
            width: 20px;
            height: 20px;
            color: #fff;
            flex: none
        }

        .store b {
            display: block;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-size: .86rem;
            letter-spacing: .05em;
            color: #fff;
            line-height: 1.15
        }

        .store small {
            display: block;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-size: .6rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--txt-3);
        }

        /* --- alt şerit --- */
        .foot__bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            padding: 16px 0 clamp(58px, 6vw, 74px);
            border-top: 1px solid var(--line);
        }

        .foot__copy {
            font-size: .8rem;
            color: var(--txt-3)
        }

        .trusts {
            display: flex;
            gap: clamp(14px, 2vw, 26px);
            flex-wrap: wrap
        }

        .trust {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 600;
            font-size: .74rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--txt-3);
        }

        .trust svg {
            width: 16px;
            height: 16px;
            color: var(--f-300)
        }

        .pays {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap
        }

        .pay {
            height: 26px;
            padding: 0 11px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            background: rgba(255, 255, 255, .06);
            border: 1px solid var(--line);
            font-family: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: .78rem;
            letter-spacing: .06em;
            color: var(--txt-2);
            filter: grayscale(1);
            opacity: .72;
            transition: filter .25s, opacity .25s;
        }

        .pay:hover {
            filter: none;
            opacity: 1
        }

        .pay--age {
            border-color: rgba(255, 120, 20, .4);
            color: var(--f-200);
            background: rgba(255, 120, 20, .1);
            filter: none;
            opacity: 1;
        }

        /* ==========================================================================
   DUYARLI DAVRANIŞ
   ========================================================================== */
        @media (max-width: 1120px) {
            .picks__grid {
                grid-template-columns:repeat(3, 1fr)
            }

            .feats {
                grid-template-columns:repeat(2, 1fr)
            }
        }

        @media (max-width: 1180px) {
            .head__inner {
                gap: 14px
            }

            .nav a {
                letter-spacing: .04em
            }
        }

        @media (max-width: 1040px) {
            :root {
                --head-h: 66px
            }

            .head__utils {
                display: none
            }

            .head__row {
                padding-bottom: 0
            }

            .head__inner {
                min-height: var(--head-h)
            }

            .nav {
                display: none
            }

            .burger {
                display: flex
            }

            .head__auth .btn--ghost {
                display: none
            }

            .foot__grid {
                grid-template-columns:1fr 1fr;
                gap: 30px
            }

            .foot__about {
                max-width: none
            }

            .appbox {
                grid-column: 1/-1
            }

            .hero__arrow {
                width: 36px;
                height: 36px
            }
        }

        @media (max-width: 820px) {
            .stats {
                grid-template-columns:repeat(2, 1fr)
            }

            .stat + .stat::before {
                display: none
            }

            .stat:nth-child(n+3)::after {
                content: '';
                position: absolute;
                left: 8%;
                right: 8%;
                top: 0;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(255, 150, 40, .28), transparent);
            }

            .stat:nth-child(even)::before {
                content: '';
                position: absolute;
                left: 0;
                top: 22%;
                bottom: 22%;
                width: 1px;
                background: linear-gradient(180deg, transparent, rgba(255, 150, 40, .3), transparent);
            }
        }

        @media (max-width: 760px) {
            .picks__grid {
                grid-template-columns:repeat(2, 1fr)
            }

            .foot__cols {
                grid-template-columns:repeat(2, 1fr);
                gap: 22px
            }

            .hero {
                min-height: auto;
                padding-bottom: 8px
            }

            .hero__vig {
                background: linear-gradient(180deg, rgba(4, 6, 10, .92) 0%, rgba(4, 6, 10, .62) 34%, rgba(4, 6, 10, .72) 66%, rgba(4, 6, 10, .97) 100%);
            }

            .hero__inner {
                padding: clamp(26px, 6vh, 50px) 0 10px
            }

            .slide {
                max-width: none
            }

            .hero__video {
                position: static;
                justify-content: center;
                margin-top: 12px
            }

            .hero__bar {
                flex-direction: column;
                gap: 12px;
                padding-bottom: 20px
            }
        }

        @media (max-width: 620px) {
            .feats {
                grid-template-columns:1fr
            }

            .foot__grid {
                grid-template-columns:1fr
            }

            .foot__bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px
            }

            .drawer__cta {
                grid-template-columns:1fr
            }

            .hero__arrow {
                display: none
            }

            /* kartlar kaydırmalı şeride dönüşür */
            .picks__grid {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                padding-bottom: 10px;
                scrollbar-width: none;
                margin-inline: calc(var(--gutter) * -1);
                padding-inline: var(--gutter);
            }

            .picks__grid::-webkit-scrollbar {
                display: none
            }

            .pick {
                flex: 0 0 76%;
                scroll-snap-align: center
            }
        }

        @media (max-width: 460px) {
            .stats {
                grid-template-columns:1fr
            }

            .stat:nth-child(even)::before {
                display: none
            }

            .stat:nth-child(n+2)::after {
                content: '';
                position: absolute;
                left: 8%;
                right: 8%;
                top: 0;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(255, 150, 40, .28), transparent);
            }

            .fx-toggle {
                left: 12px;
                bottom: 12px;
                font-size: .7rem;
                height: 34px
            }

            .foot__cols {
                grid-template-columns:1fr
            }
        }

        /* alev duvarı küçük ekranda daha ince ve sakin */
        @media (max-width: 940px) {
            .firewall {
                width: clamp(92px, 26vw, 180px);
                opacity: calc(.62 * var(--fx))
            }
        }

        @media (max-width: 560px) {
            .firewall {
                width: 78px;
                height: 70vh;
                opacity: calc(.48 * var(--fx))
            }

            .firewall__sparks i:nth-child(n+13) {
                display: none
            }
        }

        /* ==========================================================================
   AZALTILMIŞ HAREKET
   ========================================================================== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
                scroll-behavior: auto !important;
            }

            .fl, .fc, .hf {
                stroke-dasharray: none;
                opacity: var(--op)
            }

            .firewall__sparks {
                display: none
            }

            .reveal {
                opacity: 1;
                transform: none
            }
        }
    

.reveal {
            opacity: 1;
            transform: none
        }



        /* === 30.08.2026 yayın revizyonu: yatay marka, güvenli CTA ve erişilebilirlik === */
        .logo {
            min-width: 0
        }

        .logo__image {
            width: clamp(154px, 17vw, 214px);
            height: auto;
            max-height: 66px;
            object-fit: contain;
            object-position: left center;
            filter: drop-shadow(0 5px 18px rgba(255, 110, 10, .45));
            transition: filter .25s var(--ease), transform .25s var(--ease)
        }

        .logo:hover .logo__image {
            filter: drop-shadow(0 6px 24px rgba(255, 154, 16, .72));
            transform: translateY(-1px)
        }

        .foot .logo__image {
            width: clamp(170px, 19vw, 224px);
            max-height: 76px
        }

        .editorial-note {
            position: relative;
            padding: 16px 18px;
            border: 1px solid var(--line-fire);
            border-radius: var(--r-md);
            background: linear-gradient(135deg, rgba(255, 154, 16, .08), rgba(255, 255, 255, .02));
            color: var(--txt-2);
            font-size: .94rem;
            box-shadow: var(--sh-card)
        }

        .editorial-note strong {
            color: var(--f-100)
        }

        .editorial-note a {
            color: var(--f-200);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px
        }

        @media (max-width: 1040px) {
            .logo__image {
                width: clamp(146px, 28vw, 194px)
            }
        }

        @media (max-width: 620px) {
            .logo__image {
                width: 142px;
                max-height: 56px
            }

            .foot .logo__image {
                width: 176px
            }
        }


        /* === Hero arka plan videosu — tam genişlik, kırpmasız ve FX anahtarından bağımsız ===
   Not: video için ayrı .hero__media sınıfı kullanılır. Böylece yukarıdaki
   .hero__video (video rozeti) stilleriyle ve mobil kurallarla çakışmaz. */
        .hero {
            /* Video tam viewport genişliğinde kalır. JS, loadedmetadata sonrasında gerçek
     video oranını okuyup --hero-video-h değerini günceller; böylece kırpma olmaz. */
            min-height: max(clamp(560px, 86vh, 760px), var(--hero-video-h, 50vw));
        }

        .hero__scene {
            position: absolute;
            inset: 0;
            z-index: -1;
            overflow: hidden;
            background: #05070a;
        }

        .hero__scene .hero__media {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            display: block !important;
            width: 100vw !important;
            min-width: 100vw !important;
            height: auto !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            object-fit: contain !important;
            object-position: center center !important;
            opacity: 1 !important; /* --fx ile bağlantılı DEĞİL: video her zaman görünür */
            filter: saturate(1.04) contrast(1.04);
            z-index: 0;
        }

        .hero__vig {
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(4, 6, 10, .94) 0%, rgba(4, 6, 10, .76) 30%, rgba(4, 6, 10, .28) 58%, rgba(4, 6, 10, .12) 100%),
            linear-gradient(180deg, rgba(4, 6, 10, .64) 0%, transparent 34%, transparent 65%, rgba(4, 6, 10, .90) 100%)
        }

        .hero__scene::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(75% 70% at 77% 70%, rgba(255, 116, 12, .09), transparent 70%)
        }

        @media (max-width: 760px) {
            /* Telefonlarda yatay videoyu daha dikey bir hero gibi kullanıyoruz.
     Ayrı bir portrait video olmadığı için kenarlardan kontrollü kırpma yapılır;
     bunun karşılığında görüntü artık ince bir yatay şerit gibi kalmaz. */
            .hero {
                min-height: clamp(620px, 92svh, 820px);
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .hero__scene .hero__media {
                left: 0 !important;
                top: 0 !important;
                transform: none !important;
                width: 100% !important;
                min-width: 100% !important;
                height: 100% !important;
                min-height: 100% !important;
                object-fit: cover !important;
                object-position: 68% center !important;
                filter: saturate(1.05) contrast(1.04) brightness(.86);
            }

            .hero__inner {
                width: min(100% - (var(--gutter) * 2), var(--wrap));
                padding: clamp(104px, 15svh, 142px) 0 clamp(76px, 10svh, 104px);
            }

            .hero__vig {
                background: linear-gradient(90deg, rgba(4, 6, 10, .94) 0%, rgba(4, 6, 10, .67) 62%, rgba(4, 6, 10, .28) 100%),
                linear-gradient(180deg, rgba(4, 6, 10, .72) 0%, rgba(4, 6, 10, .16) 32%, rgba(4, 6, 10, .34) 62%, rgba(4, 6, 10, .94) 100%);
            }
        }

        @media (max-width: 520px) and (orientation: portrait) {
            .hero {
                min-height: max(660px, 94svh)
            }

            .hero__scene .hero__media {
                object-position: 55% center !important
            }

            .slide__text {
                max-width: 36ch
            }
        }


        .hero + .section {
            margin-top: 24px
        }\n\n        /* ==========================================================================\n           SLIDER CTA CLICK FIX\n           Drag katmanı CTA/link tıklamalarını yutmasın.\n           ========================================================================== */\n        .hero__inner .slide__cta {\n            position: relative;\n            z-index: 20;\n            pointer-events: auto;\n        }\n\n        .hero__inner .slide__cta a,\n        .hero__inner .slide__cta button {\n            position: relative;\n            z-index: 21;\n            pointer-events: auto !important;\n            touch-action: manipulation;\n            cursor: pointer;\n        }\n\n        .hero__arrow,\n        .hero__bar,\n        .dots,\n        .dots button {\n            pointer-events: auto;\n        }\n