/* hasarla.com — tek stil dosyası. Yön C (Hasan, 2026-10-18): aile çerçevesi ve Hasarla Masaüstü
   açık cam (tema-cam), Hasarla KO koyu arena (tema-arena). Renkler havoc/docs/10-BRANDING.md
   paletinden; kırmızı düğme dolgusu beyaz yazı okunsun diye markanın kırmızısından bir ton koyu.
   Yazı tipi Barlow (SIL OFL, fontlar/OFL.txt): Bahnschrift'e en yakın web yazısı. */

/* ── Yazı tipleri (latin + latin-ext: Türkçe harflerin hepsi) ─────────────────── */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fontlar/barlow-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fontlar/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fontlar/barlow-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fontlar/barlow-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fontlar/barlow-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fontlar/barlow-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:800;font-display:swap;src:url(/fontlar/barlow-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:800;font-display:swap;src:url(/fontlar/barlow-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fontlar/barlow-semi-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fontlar/barlow-semi-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fontlar/barlow-semi-condensed-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fontlar/barlow-semi-condensed-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fontlar/barlow-condensed-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fontlar/barlow-condensed-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

/* ── Renkler ve ölçüler ─────────────────────────────────────────────────────── */
:root{
  --cam:#e9eff2; --cam-acik:#f6f9fa; --cizgi:#cdd6dc; --cizgi-koyu:#b9c5cd;
  --murekkep:#0e1824; --murekkep-2:#44525f; --soluk:#8796a6;
  --kirmizi:#fc2c2b; --kirmizi-dolgu:#e0201f; --kirmizi-koyu:#c8191a; --kirmizi-serit:#b3181a;
  --gece:#0b111c; --gece-panel:#141c2a; --gece-cizgi:#27344a; --gece-cizgi-2:#3a4a63;
  --gece-yazi:#eef2f5; --gece-yazi-2:#b4bfcb; --gece-yazi-3:#8796a6;
  --altin:#f2c14e; --altin-yazi:#1a1205; --sari:#ffd84a;
  --yazi:"Barlow","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --baslik:"Barlow Semi Condensed","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --dar:"Barlow Condensed","Bahnschrift Condensed","Bahnschrift",sans-serif;
}
.tema-cam{--zemin:var(--cam);--metin:var(--murekkep);--metin-2:var(--murekkep-2);--kart:var(--cam-acik);--kenar:var(--cizgi);--kenar-2:var(--cizgi-koyu);--baglanti:var(--murekkep);--baglanti-ust:var(--kirmizi-koyu)}
.tema-arena{--zemin:var(--gece);--metin:var(--gece-yazi);--metin-2:var(--gece-yazi-2);--kart:var(--gece-panel);--kenar:var(--gece-cizgi);--kenar-2:var(--gece-cizgi-2);--baglanti:var(--gece-yazi);--baglanti-ust:var(--sari)}

/* ── Temel ──────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--metin);font-family:var(--yazi);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--baglanti);text-underline-offset:3px}
a:hover{color:var(--baglanti-ust)}
:focus-visible{outline:3px solid var(--kirmizi);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;line-height:1.1}
p{margin:0}
[id]{scroll-margin-top:64px}
.kap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.ekran-okuyucu{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.atla{position:absolute;left:12px;top:-80px;z-index:10;background:var(--murekkep);color:#fff;padding:12px 16px;border-radius:6px;font-weight:700}
.atla:focus{top:12px;color:#fff}
.soluk{color:var(--metin-2);font-size:15px}
.kucuk{font-size:14px;line-height:1.5;color:var(--metin-2)}
code{font-family:Consolas,ui-monospace,monospace;font-size:13px;overflow-wrap:anywhere;color:var(--metin)}

/* ── Üst bilgi ──────────────────────────────────────────────────────────────── */
.ust{background:var(--zemin);border-bottom:1px solid var(--kenar);position:relative;z-index:6}
.ust-ic{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:12px}
.marka{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--metin);text-decoration:none;font-weight:800;font-size:22px;letter-spacing:3px}
.marka:hover{color:var(--metin)}
/* Koyu zeminde logonun koyu camı kaybolmasın: açık bir karo üstünde. */
.tema-arena .marka .logo-h,.alt .logo-h{padding:3px;background:var(--cam);border-radius:6px}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;font-weight:600;font-size:16px}
.menu>a{padding:12px 0;text-decoration:none}
.menu>a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--kirmizi)}
.dil-sec{display:flex;gap:2px;padding:3px;border:1px solid var(--kenar-2);border-radius:999px}
.dil-sec>*{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;font-size:14px;line-height:1;text-decoration:none}
.dil-aktif{background:var(--metin);color:var(--zemin)}

/* ── Düğmeler, cipler, rozetler ─────────────────────────────────────────────── */
.dugmeler{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid transparent;border-radius:6px;font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;transition:transform .12s ease,background-color .12s ease}
.dugme:hover{transform:translateY(-1px)}
.dugme .ikon{flex:none}
.dugme-buyuk{min-height:54px;padding:0 24px;font-size:18px}
.dugme-koyu{background:var(--murekkep);color:#fff}
.dugme-koyu:hover{background:#1f2d3e;color:#fff}
.dugme-cizgi{border-color:var(--murekkep);color:var(--murekkep)}
.dugme-cizgi:hover{background:#fff;color:var(--murekkep)}
.dugme-kirmizi{background:var(--kirmizi-dolgu);color:#fff}
.dugme-kirmizi:hover{background:var(--kirmizi-koyu);color:#fff}
.dugme-altin{background:var(--altin);color:var(--altin-yazi)}
.dugme-altin:hover{background:#f6cd6a;color:var(--altin-yazi)}
.dugme-cizgi-acik{border-color:#c3ccd6;color:var(--gece-yazi)}
.dugme-cizgi-acik:hover{border-color:#fff;color:#fff}
.dugme-yakinda{border:1.5px dashed var(--soluk);color:var(--metin-2);cursor:default}
.dugme-yakinda:hover{transform:none}
.dugme-yakinda-altin{border-color:var(--altin);color:var(--altin)}
.cip{white-space:nowrap;font-size:13px;font-weight:600;color:var(--metin-2);border:1px solid var(--kenar-2);border-radius:999px;padding:4px 10px}
.rozet{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.5px;line-height:1.2;padding:5px 10px;border-radius:4px;background:var(--murekkep);color:#fff}
.rozet-bos{background:none;border:1px solid var(--soluk);color:var(--metin-2)}
.rozet-acik{background:var(--gece-yazi);color:var(--gece)}
.rozet-altin{background:var(--altin);color:var(--altin-yazi)}

/* ── Kahraman bölümleri ─────────────────────────────────────────────────────── */
.kahraman{position:relative;overflow:hidden}
.catlak-arka{position:absolute;right:-60px;top:-90px;width:640px;height:520px;max-width:none;pointer-events:none}
.catlak-arka polyline{fill:none;stroke:var(--murekkep);stroke-opacity:.13;stroke-width:2;stroke-linejoin:miter}
.kahraman-aile .kap{position:relative;padding-block:80px 52px}
.dev-baslik{font-family:var(--baslik);font-weight:800;font-size:clamp(46px,7.6vw,104px);line-height:.92;letter-spacing:-.5px}
.buyuk-baslik{font-family:var(--baslik);font-weight:800;font-size:clamp(44px,6.4vw,84px);line-height:.95;letter-spacing:-.5px}
.cumle{display:inline-block}
.catlak-cizgi{width:460px;height:22px;margin:26px 0 24px}
.catlak-cizgi polyline{fill:none;stroke:var(--kirmizi);stroke-width:6;stroke-linejoin:miter}
.giris{max-width:640px;font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--metin-2)}
.kahraman-ic{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-block:64px 64px}
.kahraman-metin{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:18px}
.kahraman-metin .dugmeler{padding-top:6px}
.kahraman-gorsel{flex:1 1 520px;min-width:0}
.ust-satir{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ust-ad{font-size:15px;font-weight:700;letter-spacing:2px}
.ekran-cerceve{padding:10px;background:var(--murekkep);border-radius:12px;box-shadow:0 24px 60px rgba(14,24,36,.22)}
.ekran-cerceve>.mc,.ekran-cerceve>video{aspect-ratio:16/10;height:auto;border-radius:4px}
.ekran-cerceve>video{width:100%;object-fit:cover}
.kahraman-arena{background:var(--gece)}
.kahraman-zemin{position:absolute;left:-4%;top:-4%;width:108%;height:108%;max-width:none;object-fit:cover;opacity:.38}
.arena-cerceve{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--gece-cizgi-2);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.arena-cerceve>video{width:100%;height:100%;object-fit:cover}

/* ── Ana sayfa: iki ürün kartı ve aradaki çatlak ────────────────────────────── */
.urunler{position:relative;padding-top:8px;padding-bottom:80px}
.urun-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:64px}
.urun{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:10px}
.urun-masaustu{background:var(--cam-acik);border:1px solid var(--cizgi)}
.urun-ko{--metin:var(--gece-yazi);--metin-2:var(--gece-yazi-2);--kenar-2:var(--gece-cizgi-2);--baglanti:var(--gece-yazi);--baglanti-ust:var(--sari);background:var(--gece);border:1px solid var(--gece-cizgi);color:var(--gece-yazi)}
.urun-medya{position:relative;height:320px;overflow:hidden}
.urun-medya>.mc,.urun-medya>.arena,.urun-medya>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.urun-govde{flex-grow:1;display:flex;flex-direction:column;gap:14px;padding:28px 28px 32px}
.urun-govde>p{color:var(--metin-2)}
.urun-ad{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.urun-ad h2{font-size:30px;font-weight:800}
.urun-govde>.urun-slogan{color:var(--metin);font-family:var(--baslik);font-weight:700;font-size:26px;line-height:1.1}
.urun-govde>.urun-ozet{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--metin);font-size:15px;font-weight:600}
.urun-ozet span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:middle;background:var(--kirmizi);transform:rotate(45deg)}
.urun-govde .dugmeler{margin-top:auto;padding-top:10px}
.rakip-dizi{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rakip-dizi img{width:44px;height:44px;object-fit:cover;border:2px solid var(--gece-cizgi);border-radius:50%}
.rakip-dizi img+img{margin-left:-18px}
.rakip-dizi span{font-size:15px;font-weight:600;color:#c3ccd6}
.kopru{position:absolute;top:132px;left:calc(50% - 170px);width:340px;height:56px;pointer-events:none}
.kopru polyline{fill:none;stroke-linejoin:miter}
.kopru-golge{stroke:var(--murekkep);stroke-width:15}
.kopru-catlak{stroke:var(--kirmizi);stroke-width:6}
@media (max-width:1000px){.kopru{display:none}}

.serit{background:var(--cam-acik);border-block:1px solid var(--cizgi)}
.serit-ic{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:40px;padding-block:60px}
.soz{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.soz h2,.soz h3{font-size:22px;font-weight:800}
.soz p{color:var(--metin-2)}

/* ── Masaüstü çizimi (gerçek ekran kaydı gelene kadar) ──────────────────────── */
.mc{position:relative;width:100%;height:100%;overflow:hidden;background:#5b7a8e}
.mc-simgeler{position:absolute;left:3%;top:6%;display:flex;flex-direction:column;gap:14%}
.mc-simgeler i{display:block;width:32px;height:26px;border-radius:4px;background:var(--cam);opacity:.85}
.mc-pencere{position:absolute;overflow:hidden;border-radius:6px;box-shadow:0 10px 28px rgba(14,24,36,.28)}
.mc-pencere b{display:block;height:24px}
.mc-p1{left:13%;top:9%;width:46%;height:58%;background:var(--cam-acik)}
.mc-p1 b{background:#dfe6ea}
.mc-p1 i{display:block;height:9px;margin:12px 16px 0;border-radius:4px;background:var(--cizgi)}
.mc-p1 i:first-of-type{width:60%;background:var(--cizgi-koyu)}
.mc-p1 i:nth-of-type(3){width:72%}
.mc-p1 i:last-of-type{width:48%}
.mc-p2{right:5%;top:22%;width:40%;height:52%;background:#fff}
.mc-p2 b{background:#2f6b4f}
.mc-tablo{display:block;height:calc(100% - 24px);background-image:linear-gradient(#dfe6ea 1px,transparent 1px),linear-gradient(90deg,#dfe6ea 1px,transparent 1px);background-size:25% 22px}
.mc-gorev{position:absolute;left:0;right:0;bottom:0;height:9%;min-height:24px;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(14,24,36,.92)}
.mc-gorev i{display:block;width:18px;height:18px;border-radius:4px;background:#6f8797}
.mc-gorev i:first-child{background:#8fa3b1}
.mc-catlak{position:absolute;inset:0;width:100%;height:100%}
.mc-catlak polyline{vector-effect:non-scaling-stroke}
.catlak-golge{stroke:#0e1824;stroke-opacity:.45;stroke-width:3.4}
.catlak-isik{stroke:#fff;stroke-width:1.7}
.catlak-delik{fill:#0e1824}
.mc-cakmak{position:absolute;left:61%;top:50%;width:9%;transform:rotate(-14deg)}

/* ── KO arenası ─────────────────────────────────────────────────────────────── */
.arena{position:relative;width:100%;height:100%;overflow:hidden;background:var(--gece)}
.arena-uzak{position:absolute;left:-6%;top:-8%;width:112%;height:118%;max-width:none;object-fit:cover}
.arena-ip{position:absolute;left:-4%;bottom:-18%;width:108%;max-width:none}
.arena-portre{position:absolute;left:50%;top:9%;width:30%;max-width:none;aspect-ratio:1;object-fit:cover;transform:translateX(-50%);border:4px solid var(--kirmizi-serit);border-radius:50%}
.arena-yazi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-bottom:20px}
.arena-portreli .arena-yazi{justify-content:flex-end;padding-bottom:9%}
.arena-ad,.arena-alt{padding:4px 14px;border-radius:4px;background:rgba(11,17,28,.72);color:#fff;font-weight:700;font-size:17px}
.nakavt{display:block;padding:8px 56px;background:var(--kirmizi-serit);color:var(--sari);font-family:var(--dar);font-weight:800;font-size:clamp(36px,4.6vw,60px);line-height:1;letter-spacing:5px;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%)}
.urun-medya .nakavt{font-size:clamp(36px,4vw,56px)}

/* ── Sayfa içi menü ve bölümler ─────────────────────────────────────────────── */
.sayfa-ici{position:sticky;top:0;z-index:5;background:var(--cam-acik);border-block:1px solid var(--cizgi)}
.sayfa-ici-ic{display:flex;gap:0 28px;overflow-x:auto;white-space:nowrap;font-weight:600;font-size:15px}
.sayfa-ici a{padding:14px 0;text-decoration:none}
.bolum{padding-top:80px}
.bolum-son{padding-bottom:96px}
.bolum h2{margin-bottom:24px;font-size:clamp(30px,3.6vw,40px);font-weight:800;line-height:1.05}
.bolum-bas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:28px}
.bolum-bas h2{margin:0}
.bolum-bas p{max-width:540px;color:var(--metin-2)}
.bolum-iki{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.bolum-metin{flex:1 1 300px;display:flex;flex-direction:column;gap:14px}
.bolum-metin h2{margin:0}
.bolum-metin p{font-size:18px;color:var(--metin-2)}
.bolum-gorsel{flex:2 1 520px;min-width:0}

/* Önce / sonra */
.os{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--cizgi-koyu);border-radius:8px}
.os>.mc,.os-sonra-katman{position:absolute;inset:0}
.os-sonra-katman{clip-path:inset(0 0 0 50%)}
.os-once,.os-sonra{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-sonra{clip-path:inset(0 0 0 50%)}
.os-ayrac{position:absolute;top:0;bottom:0;left:calc(50% - 2px);width:4px;background:#fff}
.os-ayrac::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid var(--murekkep);border-radius:50%;background:#fff}
.os-etiket{position:absolute;top:12px;padding:5px 10px;border-radius:4px;font-size:13px;font-weight:800;letter-spacing:1.5px}
.os-etiket-once{left:12px;background:#fff;color:var(--murekkep)}
.os-etiket-sonra{right:12px;background:var(--murekkep);color:#fff}

/* 58 alet */
.aile-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.aile{display:flex;flex-direction:column;gap:8px;padding:18px 20px;background:var(--cam-acik);border:1px solid var(--cizgi);border-radius:8px}
.aile-ust{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.aile h3{font-size:20px;font-weight:800}
.aile-sayi{font-family:var(--baslik);font-size:28px;font-weight:800;line-height:1;color:var(--kirmizi-koyu)}
.aile-ozet{font-size:15px;font-weight:600;color:var(--metin-2)}
.aile p:last-child{font-size:15px}

/* Koyu pano (güven) */
.koyu-pano{display:flex;flex-direction:column;gap:28px;padding:44px 40px;border-radius:12px;background:var(--murekkep);color:#e9eff2}
.koyu-pano h2{margin:0;color:#fff}
.uclu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}
.koyu-pano .soz h3{font-size:20px;color:#fff}
.koyu-pano .soz p{color:#c3ccd6}
.koyu-pano .ikon{color:var(--kirmizi)}
.koyu-pano a{color:#fff}

/* Ekran kayıtları */
.kayit-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.kayit{display:flex;flex-direction:column;gap:10px;margin:0}
.kayit video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#33505f}

/* Nostalji ve kısa notlar */
.nostalji{display:flex;flex-wrap:wrap;gap:20px 56px;padding-top:28px;border-top:6px solid var(--metin)}
.nostalji h2{flex:1 1 240px;margin:0}
.nostalji>:not(h2){flex:2 1 480px}
.nostalji-metin{font-size:20px;line-height:1.6}
.nostalji .kucuk{margin-top:12px}

/* Fiyat */
.fiyat-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.fiyat-kart{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:30px 30px 32px;background:var(--cam-acik);border:1px solid var(--cizgi);border-radius:10px}
.fiyat-kart h3{font-size:22px;font-weight:800}
.fiyat-kart ul{display:flex;flex-direction:column;gap:10px;margin:0;padding-left:20px}
.fiyat{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-family:var(--baslik);font-size:52px;font-weight:800;line-height:1}
.fiyat span{font-family:var(--yazi);font-size:16px;font-weight:500;color:var(--metin-2)}
.fiyat-eylem{margin-top:auto;padding-top:4px}
.fiyat-kart-premium{--metin-2:#a9b4c1;background:var(--murekkep);border-color:var(--murekkep);color:#e9eff2}
.fiyat-kart-premium h3,.fiyat-kart-premium .fiyat{color:#fff}
.fiyat-kart-premium a:not(.dugme){color:#fff}
.fiyat-kart-premium .dugme-yakinda{border-color:#8796a6;color:#c3ccd6}
.parilti{position:absolute;right:0;top:0;width:120px;height:120px}
.parilti polygon{fill:#fff;fill-opacity:.08}
.parilti polygon+polygon{fill-opacity:.12}

/* İndir ve Windows uyarısı */
.indir-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.indir-kart{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px;background:var(--cam-acik);border:1px solid var(--cizgi);border-radius:10px}
.indir-kart h3{font-size:22px;font-weight:800}
.indir-kart p{color:var(--metin-2)}
.indir-kart-oneri{border:2px solid var(--murekkep)}
.indir-kart-bos{background:transparent;border:1.5px dashed var(--soluk)}
.indir-eylem{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto}
.metin-baglanti{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.uyari-rehberi{display:flex;flex-direction:column;gap:22px;margin-top:28px;padding:32px;background:#fff;border:1px solid var(--cizgi);border-radius:10px}
.uyari-bas{display:flex;flex-direction:column;gap:10px;max-width:760px}
.uyari-bas h3{font-size:26px;font-weight:800}
.uyari-bas p{color:var(--metin-2)}
.adimlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin:0;padding:0;list-style:none}
.adim{display:flex;flex-direction:column;gap:10px}
.adim img{border:1px solid var(--cizgi);border-radius:6px}
.adim p{display:flex;align-items:center;gap:10px;font-size:17px}
.adim-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--murekkep);color:#fff;font-size:15px}

/* Sık sorulanlar */
.sss{border-top:1px solid var(--kenar-2)}
.sss details{padding:18px 0;border-bottom:1px solid var(--kenar-2)}
.sss summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:19px;font-weight:700}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";flex:none;font-size:24px;font-weight:600;line-height:1;color:var(--kirmizi-koyu)}
.sss details[open] summary::after{content:"−"}
.sss p{max-width:760px;margin-top:12px;color:var(--metin-2)}
.tema-arena .sss summary::after{color:var(--kirmizi)}

/* ── KO'ya özel ─────────────────────────────────────────────────────────────── */
.tema-arena .bolum h2{color:#fff}
.adim-kartlari{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin:0;padding:0;list-style:none}
.adim-kartlari li{display:flex;flex-direction:column;gap:10px;padding:26px;background:var(--gece-panel);border:1px solid var(--gece-cizgi);border-radius:10px}
.adim-sayi{font-family:var(--dar);font-size:44px;font-weight:800;line-height:1;color:var(--kirmizi)}
.adim-kartlari h3{font-size:22px;font-weight:800;color:#fff}
.adim-kartlari p{font-size:16px;color:var(--metin-2)}
.rakip-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,160px),1fr));gap:16px}
.rakip{margin:0;overflow:hidden;background:var(--gece-panel);border:1px solid var(--gece-cizgi);border-radius:10px}
.rakip-foto{position:relative}
.rakip-foto img{width:100%;aspect-ratio:1;object-fit:cover}
.rakip-foto .rozet{position:absolute;right:8px;top:8px;padding:3px 7px;font-size:11px;letter-spacing:1px}
.rakip figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.rakip b{font-size:17px;color:#fff}
.rakip figcaption span{font-size:14px;color:var(--gece-yazi-3)}
.alet-listesi{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.alet{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-size:16px;font-weight:700}
.alet-ucretsiz{background:var(--gece-yazi);color:var(--gece)}
.alet-pro{border:1.5px solid var(--altin);color:var(--altin)}
.alet-listesi+.kucuk{margin-top:16px}
.pro-pano{display:flex;flex-wrap:wrap;gap:32px 48px;padding:36px 32px;background:var(--gece-panel);border:1px solid var(--altin);border-radius:12px}
.pro-sol{flex:1 1 300px;display:flex;flex-direction:column;gap:14px}
.tema-arena .pro-sol h2{margin:0}
.pro-sol>p{color:var(--metin-2)}
.pro-sag{flex:1.4 1 420px;min-width:0;overflow-x:auto}
.pro-sol>.fiyat-altin{color:var(--altin)}
.karsilastirma{width:100%;border-collapse:collapse;font-size:16px}
.karsilastirma th,.karsilastirma td{padding:12px;text-align:left;vertical-align:top}
.karsilastirma thead th{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--gece-yazi-2)}
.karsilastirma tbody tr{border-top:1px solid var(--gece-cizgi)}
.karsilastirma tbody th{font-weight:600}
.karsilastirma td{color:#c3ccd6}
.karsilastirma .pro-hucre{font-weight:700;color:#fff}
.karsilastirma thead .pro-hucre{color:var(--altin)}
.nostalji-koyu{border-top-color:var(--gece-yazi)}

/* ── Yasal sayfalar, destek, teşekkür ───────────────────────────────────────── */
.yasal{max-width:820px;padding-block:64px 96px}
.yasal h1{font-family:var(--baslik);font-size:clamp(40px,5vw,60px);font-weight:800}
.yasal-tarih{margin-top:12px;font-size:15px;color:var(--metin-2)}
.yasal-ozet{margin-top:24px;padding:20px 24px;font-size:19px;line-height:1.6;background:var(--cam-acik);border:1px solid var(--cizgi);border-radius:8px}
.yasal h2{margin:44px 0 12px;font-size:24px;font-weight:800}
.yasal ul,.yasal ol{display:flex;flex-direction:column;gap:10px;margin:0;padding-left:22px}
.yasal p+p,.yasal ul+p,.yasal dl+p{margin-top:14px}
.destek-kutu{display:flex;gap:20px;margin-top:28px;padding:28px;background:var(--cam-acik);border:1px solid var(--cizgi);border-radius:10px}
.destek-kutu>.ikon{flex:none;color:var(--kirmizi-koyu)}
.destek-kutu h2{margin:0 0 6px}
.destek-kutu ul{margin-top:12px}
.destek-adres{margin-bottom:12px;font-size:24px;font-weight:800}
.sss-liste{margin:0}
.sss-liste dt{margin-top:18px;font-weight:700}
.sss-liste dd{margin:6px 0 0;color:var(--metin-2)}
.tesekkur{max-width:820px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-block:72px 96px}
.tesekkur h1{font-family:var(--baslik);font-size:clamp(38px,5vw,60px);font-weight:800}
.tesekkur-blok{align-self:stretch;display:flex;flex-direction:column;gap:14px;margin-top:18px;padding:28px;background:var(--cam-acik);border:1px solid var(--cizgi);border-radius:10px}
.tesekkur-blok h2{font-size:24px;font-weight:800}
.tesekkur-blok ol{display:flex;flex-direction:column;gap:10px;margin:0;padding-left:22px}
.not-kutusu{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:#fff;border:1.5px solid var(--murekkep);border-radius:8px}
.not-kutusu .ikon{flex:none;margin-top:2px;color:var(--kirmizi-koyu)}
.bulunamadi .kap{padding-block:96px 120px}
.bulunamadi-kod{font-family:var(--dar);font-size:28px;font-weight:800;letter-spacing:4px;color:var(--kirmizi-koyu)}
.bulunamadi .dev-baslik{margin-top:8px}
.bulunamadi .giris{margin-top:18px}
.bulunamadi .dugmeler{margin-top:32px}

/* ── Alt bilgi ──────────────────────────────────────────────────────────────── */
.alt{background:var(--murekkep);color:#c3ccd6}
.tema-arena .alt{background:#070b13;border-top:1px solid var(--gece-cizgi)}
.alt-ic{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:32px;padding-block:56px 32px}
.alt-marka{display:flex;flex-direction:column;gap:12px}
.marka-acik,.marka-acik:hover{color:#fff;font-size:20px}
.alt nav{display:flex;flex-direction:column;gap:10px}
.alt h2{margin-bottom:4px;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8796a6}
.alt nav a{color:#e9eff2;text-decoration:none}
.alt nav a:hover{color:#fff;text-decoration:underline}
.alt-dip{border-top:1px solid var(--gece-cizgi)}
.alt-dip-ic{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:18px;font-size:14px;color:#8796a6}

/* ── Dar ekran ve hareket azaltma ───────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:16px}
  .kahraman-aile .kap{padding-block:56px 40px}
  .catlak-arka{right:-260px;opacity:.7}
  .urun-izgara{gap:32px}
  .urun-medya{height:230px}
  .urun-govde{padding:22px 20px 26px}
  .koyu-pano,.pro-pano,.uyari-rehberi{padding:28px 20px}
  .destek-kutu{flex-direction:column;padding:22px}
  .nakavt{padding:6px 34px;letter-spacing:3px}
  .arena-portre{display:none}
  .arena-portreli .arena-yazi{justify-content:center;padding-bottom:20px}
  .bolum{padding-top:64px}
}
@media (prefers-reduced-motion:reduce){
  .dugme{transition:none}
  .dugme:hover{transform:none}
}