/* yazi tipleri: Google Fonts dosyalarinin alt kumeleri (yazi_tipi_altkume.py), kendi sunucumuzdan (SIL Open Font License 1.1) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-v20-latin-ext-rae1.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017F, U+2020, U+20BA;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-v20-latin-rae1.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/newsreader-v26-latin-ext-rae1.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0134-0148, U+014A-0151, U+0154-017E, U+2020, U+20BA;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/newsreader-v26-latin-rae1.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}

  /* Ana sayfa v2 (01.10). Yayindaki kopya: kaynak arac/rae/kusak-denemeleri/kaynak, derleme yayin_derle.py.
     Sayfada yalniz kararlasmis parcalar: ust bar, hero (slogan + kim oldugumuz), uygulamalar, geri planda iletisim satiri, altbilgi (uc sutun).
     Musteri isi on plana cikmaz (Qchu ve Cinery kendi fikrimiz); proje, geri bildirim ve sikayet icin tek kapi uygulamalarin altindaki satirdir.
     Hero acilisi C (yumusak bir isik basligin uzerinden gecer); yazi tipleri yuklenince baslar.
     "Bize yazin" formu sayfada durmaz; tiklayinca iletisim satirinin altinda kap genisliginde asagi dogru acilir (yeni sekme acilmaz).
     Henuz kararlasmamis bolumler (hizmetler, surec, ilkeler, SSS) v2-arsiv-tum-bolumler.html'de saklanir.
     Hitap: metinler "siz", dugmeler kisa kok (Gonder, Kopyala, Mesaj gonder, Ana sayfaya don); basliklar metin sayilir. Uygulama sayfalari
     (Qchu, Cinery) da "siz" (02.10, tutarlilik); marka sozu (hero alt yazisi) kisa kok kalir, dugmelerle ayni bicim.

     SISTEM (02.10 tasarim denetimiyle tamamlandi): yeni bir deger bu kurallardan birine uyar; uymuyorsa gerekcesi yanina yazilir.
     Tipografi: iki aile. Boylar 12/14/16/18/32/64; mobilde basliklar 64 -> 40, 32 -> 28, giris metni 18 -> 16/24; gerisi ayni.
     Inter 400 metin, 500 etkilesimli ogeler ve simge adlari, 600 basliklar ve satir basliklari. Satir araliklari 4'un kati: uzun metin
     (yasal) 16/28, gerisi 16/24; 18'de paragraf 28, tek satirlik kalin etiket 24 (yukseligi sabit denetimde satir kutuyu belirlemez).
     Harf araligi boya gore: 12 -> 0, 14 -> -.006, 16 -> -.011, 18 -> -.014 em; serif 64/40 -> -.01, 32/28 -> -.005 em; buyuk harfli
     kodlar (TR/EN) 600 12 +.04 em.
     Bosluklar harf govdesinden (text-box: cap -> alphabetic): margin = gorunen bosluk. Ilk oge bar boyu kadar asagida (112, mobil 72);
     etiketten basliga 20, basliktan girise 32 (mobil 24). Dikey kademeler: hero sonrasi 224, bolumler arasi 128, giris -> icerik ve
     ikincil satir 96, altbilgiye 200; mobilde 0,75 kati (168 / 96 / 72), altbilgiye 120. Cizgili kapanis bolumu 128 + cizgi + 48.
     Ic bosluklar 4'un kati (2 ve 6 yalniz yazi ici ince ayar); menu satiri 10 + 24 + 10 = 44 (dokunma alani).
     Izgara: 1200 kap, 12 sutun 56 + 48 oluk; satir genislikleri sutunla: paragraf 680 (7), baslik 888 (9), form notu 368 (4).
     Uygulama simgesi 112 (mobil 64), kose orani %22,4 (25 / 14; urun logosu 96 -> 21,5, menu logosu 32 -> 7); kucuk karede logo optik
     olarak buyur (menudeki 32'lik karede %88, buyuk karelerde %64-67). Olculer: buyuk hap ve alanlar 48; menu ogeleri, form secimleri
     ve akordeon isareti 36 (mobilde isaret 28); kucuk haplar ve kapat 28; TR|EN hapi 28 + 3 px halka; dokunmatikte tiklama alani en az
     44. Simgeler 12 / 14 / 16. Koseler: 2 / 4 odak, 8 alan ve menu satiri, 12 kart, pencere ve bar, 999 hap. RAE isareti barda 28
     (ustte 1,18 kat), altbilgide 36.
     Renk: griler --y1 #EDEDED / --y2 #B4B4B4 / --y3 #8A8A8A (ornek yazi dahil) / --y4 #5E5E5E (ikon, baglanti alt cizgisi). Beyaz
     saydamlik yalniz belirtecle: cizgi %8 / %14 / %24, dolgu %6 / %8 / %14; siyaha yakin zeminler de belirtecle (:root). Saydamlik .2
     adimli: bos simgeler .8 / .6 / .4 / .2, pasif ve mesgul .6. Cam halkasinin degerleri Figma'dan olculdu (ayri, cam-yuzey).
     Hareket: sayfada tek gosterisli an (hero acilisi); gerisi sure kademesinden (:root): basma 100, geri bildirim 150, kucuk hareket
     200, buyuk acilis 320, kapanis acilisin 3/4'u (150 / 240). Kayma: ustune gelince 2, menu girisi 4, icerik ve sayfa girisi 8; basma
     olcegi yaklasik 2 px (hap .97, kart .985). Yerlesim animasyonu yalniz acilip kapanan bolumlerde (cekmece, akordeon); sonsuz dongu
     yalniz isikta (karar 01.10); hareket azaltma tercihinde her sey durgun. */
  :root {
    --zemin: #000; --y1: #ededed; --y2: #b4b4b4; --y3: #8a8a8a; --y4: #5e5e5e;
    /* beyaz saydamliklar: cizgi (ayrac %8, denetim cercevesi %14, ustune gelince %24); dolgu (saydam dugmenin ustune gelince %6,
       dolu kucuk dugme %8, ustune gelince %14) */
    --cizgi: rgba(255,255,255,.08); --cizgi-2: rgba(255,255,255,.14); --cizgi-3: rgba(255,255,255,.24);
    --dolgu-1: rgba(255,255,255,.06); --dolgu-2: rgba(255,255,255,.08); --dolgu-3: rgba(255,255,255,.14);
    /* siyaha yakin zeminler: pencerelerin taban isigi, cam tonunun opak hali (seffaflik azaltmada), uygulama kareleri; basari */
    --pencere-isik: #151515; --cam-opak: #101010; --qchu-zemin: #0b1312; --cinery-zemin: #0e0c1a;
    --basari: #9ff0e6; --basari-zemin: rgba(102,218,206,.16);
    /* sureler: basma 100; geri bildirim (renk, zemin, cizgi) 150; kucuk hareket 200; buyuk acilis 320; kapanis acilisin 3/4'u */
    --s-bas: 100ms; --s-geri: 150ms; --s-kucuk: 200ms; --s-buyuk: 320ms; --s-kucuk-cik: 150ms; --s-buyuk-cik: 240ms;
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --e-cik: cubic-bezier(.23,1,.32,1); --e-tasi: cubic-bezier(.77,0,.175,1); --e-git: cubic-bezier(.2,0,1,.9);
    --yay: linear(0, .21 7%, .56 16%, .84 27%, .99 38%, 1.04 47%, 1.045 53%, 1.03 64%, 1.01 78%, 1);
    --e-expo: cubic-bezier(.16,1,.3,1); --e-supur: cubic-bezier(.33,1,.68,1);   /* supur: ease-out-cubic, acilis isigi */
    color-scheme: dark;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* dikey cubuk hep gorunur: genislik icerik boyuna gore degismez, sigdirma olcegi sabit kalir (scrollbar-gutter panelde payi ayirmiyordu) */
  html { overflow-x: hidden; overflow-y: scroll; background: var(--zemin); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body { background: var(--zemin); color: var(--y1); font-family: var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; }
  /* yazi secimi (02.10 gece): sayfa genelinde kapali; yalniz yasal metinler ve kunye, form alanlari, e-posta adresleri secilebilir */
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, a[href^="mailto:"], body[data-sayfa="gizlilik"] main, body[data-sayfa="kosullar"] main, body[data-sayfa="kunye"] main { -webkit-user-select: text; user-select: text; }
  ::selection { background: var(--y1); color: #000; }
  :where(a, button, input, textarea):focus-visible { outline: 2px solid var(--y1); outline-offset: 3px; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }
  .sahne { width: 1440px; margin-inline: auto; }
  .kap { width: 1200px; margin-inline: auto; }
  .trim { text-box: trim-both cap alphabetic; }
  .b32 { font: 400 32px/40px var(--serif); letter-spacing: -.005em; color: var(--y1); text-wrap: balance; }
  .p16 { font: 400 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y2); text-wrap: pretty; }
  .k14 { font: 400 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y3); }
  .metin-bag { color: var(--y1); text-decoration: underline 1px var(--y4); text-underline-offset: 3px; border-radius: 2px; transition: text-decoration-color var(--s-geri); }
  .metin-bag:hover { text-decoration-color: var(--y1); }
  .ok { display: inline-block; transition: transform var(--s-kucuk) var(--e-cik); }

  /* icerige atla */
  .atla { position: fixed; left: 12px; top: 12px; z-index: 40; padding: 8px 12px; border-radius: 8px; background: var(--y1); color: #000; font: 500 14px/20px var(--sans); transform: translateY(-200%); }
  .atla:focus-visible { transform: none; }

  /* ust bar: akista hep 112 px yer tutan yapiskan kap + icinde kaydirmaya bagli gorunen kutu; hic saklanmaz.
     En ustte buyuk (112) ve camsiz; asagi kaydirirken ilk 192 px'te 112 -> 74 kuculur (logo 1,18 -> 1) ve cam ayni olcude belirir;
     asagida kucuk ve camli durur. Tepeye donunce buyur, cam saydamlasarak kaybolur (mobilde 72 -> 58, ilk 96 px).
     Mesafe 02.10'da iki katina cikti (96 / 48 idi): tek tekerlek adimi cami bastan sona getiriyordu, hizli geliyor ve gidiyordu.
     Cam ustten acilan cekmece: ekranin ust kenarina yapisik (ust kose ve ust cizgi yok), alt koseleri yuvarlak; icerik kabindan yanlara
     20 px tasar, en alttaki ogenin (TR|EN) ustunde ve altinda yine 20 px (mobilde 12): kucuk bar 74 (mobil 58), cam onunla ayni boy. */
  /* cam yuzeyi (02.10, Figma "Glass" ornegiyle esit): ust bar, bos simgeler, urun logosu, durum etiketleri, ozellik kartlari. Ton #101010 %42,
     %8 beyaz ic cizgi, buzlanma 5 (CSS 2,5 px). Isik -45 derece %80 (yayilma %50): 1 px halkada, kenarin baktigi yone gore; sol ust ve sag
     alt parlak, sag ust ve sol alt sonuk. Kose katmanlari kosenin yayi boyunca donen conic-gradient, boyu --cy-r (ogenin kose yaricapi); 02.10 gece: yaydaki tepe ve
     cukur degerleri kalkti, yay iki kenar degeri arasinda dogrusal gecer (kivrimda ton farki gorunuyordu, Figma olcumunden sapma bilerek);
     duz kenar seritleri kose kutularinin arasinda (ust uste binen iki yari saydam katman kivrimin ucunda isigi iki kat parlatiyordu).
     Degerler Figma ciktisiyla ayni sahnede piksel olculerek bulundu. Kirilma (derinlik 20, kirilma %100) ve renk dagilmasi (%50) yalniz
     Chromium'da: JS her boyut icin SVG suzgeci kurar (backdrop-filter: url()); Safari ve Firefox'ta ton, buzlanma ve isik kalir. */
  :root { --cy-ton: rgba(16,16,16,.42); }
  .cam-yuzey { --cy-r: 12px; position: relative; background: var(--cy-ton); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
               box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .cam-yuzey::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background:
      conic-gradient(from 270deg at 100% 100%, rgba(255,255,255,0.15), rgba(255,255,255,0.19) 90deg) 0 0 / var(--cy-r) var(--cy-r) no-repeat,
      conic-gradient(from 0deg at 0 100%, rgba(255,255,255,0.19), rgba(255,255,255,0.11) 90deg) 100% 0 / var(--cy-r) var(--cy-r) no-repeat,
      conic-gradient(from 90deg at 0 0, rgba(255,255,255,0.11), rgba(255,255,255,0.08) 90deg) 100% 100% / var(--cy-r) var(--cy-r) no-repeat,
      conic-gradient(from 180deg at 100% 0, rgba(255,255,255,0.08), rgba(255,255,255,0.15) 90deg) 0 100% / var(--cy-r) var(--cy-r) no-repeat,
      linear-gradient(rgba(255,255,255,0.19), rgba(255,255,255,0.19)) var(--cy-r) 0 / calc(100% - 2 * var(--cy-r)) 1px no-repeat,
      linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)) var(--cy-r) 100% / calc(100% - 2 * var(--cy-r)) 1px no-repeat,
      linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)) 0 var(--cy-r) / 1px calc(100% - 2 * var(--cy-r)) no-repeat,
      linear-gradient(rgba(255,255,255,0.11), rgba(255,255,255,0.11)) 100% var(--cy-r) / 1px calc(100% - 2 * var(--cy-r)) no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  @media (prefers-reduced-transparency: reduce) { .cam-yuzey { background: var(--cam-opak); -webkit-backdrop-filter: none; backdrop-filter: none; } }
  .bar { position: sticky; top: 0; z-index: 5; height: 112px; pointer-events: none; }
  .bar-kutu { position: absolute; left: 0; right: 0; top: 0; height: var(--bh, 112px); pointer-events: auto; transform: translateY(var(--by, 0px)); }
  .bar-zemin-kap { position: absolute; top: 0; left: 100px; right: 100px; height: calc(var(--bh, 112px) / 2 + 37px); }   /* 17 (TR|EN yarisi) + 20 */
  .bar-zemin { position: absolute; inset: 0; border-radius: 0 0 12px 12px; opacity: var(--cam, 0); }
  .bar-zemin.cam-yuzey { box-shadow: inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.08); }
  .bar-zemin.cam-yuzey::after { background:
      conic-gradient(from 90deg at 0 0, rgba(255,255,255,0.11), rgba(255,255,255,0.08) 90deg) 100% 100% / var(--cy-r) var(--cy-r) no-repeat,
      conic-gradient(from 180deg at 100% 0, rgba(255,255,255,0.08), rgba(255,255,255,0.15) 90deg) 0 100% / var(--cy-r) var(--cy-r) no-repeat,
      linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)) var(--cy-r) 100% / calc(100% - 2 * var(--cy-r)) 1px no-repeat,
      linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)) 0 0 / 1px calc(100% - var(--cy-r)) no-repeat,
      linear-gradient(rgba(255,255,255,0.11), rgba(255,255,255,0.11)) 100% 0 / 1px calc(100% - var(--cy-r)) no-repeat; }
  .bar-ic { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; }
  .marka { display: flex; align-items: center; gap: 12px; font: 600 18px/24px var(--sans); letter-spacing: -.014em; color: var(--y1); border-radius: 4px;
           transform: scale(var(--ms, 1)); transform-origin: 0 50%; }
  .marka svg { width: 28px; height: 28px; }
  .ogeler { display: flex; align-items: center; gap: 36px; }
  .oge { display: flex; align-items: center; gap: 6px; height: 36px; background: none; border: 0; border-radius: 4px; cursor: pointer; font: 500 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y2); transition: color var(--s-geri); }
  .oge:hover, .oge[aria-expanded="true"] { color: var(--y1); }
  .oge svg { width: 12px; height: 12px; transition: transform var(--s-kucuk) var(--e-cik); }
  .oge[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* TR/EN: etkin hap kayar; ustteki kopya etiketler hap alaninda kirpilir, yazi rengi tam hapin kenarinda doner */
  /* dil secimi: buzlu cam hap (arkadaki isik ya da barin cami bulanik gorunur); seffaflik azaltmada opak */
  .dil { --rr: 64px; --br: 80px; position: relative; display: flex; padding: 3px; border-radius: 999px; background: radial-gradient(var(--br, 300px) circle at var(--bx, 0px) var(--by, 0px), var(--pencere-isik) 0%, var(--pencere-isik) 30%, #000 100%); }
  /* pencereler (menu paneli, form paneli, TR|EN): ic siyah; taban isigi imleci izler (--bx/--by: isigin merkezi, imlecin yumusatilmis
     noktasi panel sinirina kistirilir), golgesi uzak yanda kalir: form doldururken imlecin cevresindeki alanlar zeminden ayrilir.
     Kenar isigi taban golgesi gibi imlecten uzak yanda: 1 px halkada isik lekesi (--rx/--ry, o noktanin panel merkezine gore aynasi).
     Ikisi ayni gecikme ve yavaslikla kayar (dokunmatikte ve hareket azaltmada taban isigi sol ustte, kenar isigi sag altta). Halka:
     dolgu + maske (icerik kutusu cikarilir). */
  .kenar-isik::before { content: ''; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(var(--rr, 220px) circle at var(--rx, 100%) var(--ry, 100%), rgba(255,255,255,.62), rgba(255,255,255,.12) 55%, rgba(255,255,255,.05));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  .dil-d, .dil-ust span { display: block; padding: 6px 12px; font: 600 12px/16px var(--sans); letter-spacing: .04em; border-radius: 999px; }
  .dil-d { background: none; border: 0; cursor: pointer; color: var(--y2); transition: color var(--s-geri); }
  .dil-d:hover { color: var(--y1); }
  .dil-ust { position: absolute; inset: 3px; display: flex; pointer-events: none; background: var(--y1); border-radius: 999px; clip-path: inset(0 50% 0 0 round 999px); transition: clip-path var(--s-kucuk) var(--e-cik); }
  .dil-ust span { color: #000; }

  /* tek donusen menu paneli: Uygulamalar <-> Iletisim arasinda kapanmadan boyut ve yer degistirir. Yer degiskeni --mx: --x acilis
     C'nin kayitli @property'si (yuzde), ayni ad kullanilirsa menunun px degeri gecersiz sayilir ve panel kayar. */
  /* panel tetikleyiciye yakin: sayfa basinda (cam yok) tetikleyicinin 12 px alti (yazidan 20); cam bar belirdikce camin 8 px altina kayar.
     Tetikleyici alti bh/2 + 18, cam alti bh/2 + 37 (--bh bar boyu, --cam 0..1 camin gorunurlugu; ikisi de kaydirmayla) */
  .menu { position: absolute; top: calc(var(--bh, 112px) / 2 + 30px + 15px * var(--cam, 0)); left: 0; width: var(--w, 300px); height: var(--h, 200px); transform: translateX(var(--mx, 0px)); pointer-events: none; }
  .menu.gecis { transition: transform var(--s-kucuk) var(--e-tasi), width var(--s-kucuk) var(--e-tasi), height var(--s-kucuk) var(--e-tasi); }
  .menu-kutu { --rr: 220px; --br: 300px; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px;
               background: radial-gradient(var(--br, 300px) circle at var(--bx, 0px) var(--by, 0px), var(--pencere-isik) 0%, var(--pencere-isik) 30%, #000 100%);
               box-shadow: 0 16px 48px rgba(0,0,0,.45); transform-origin: var(--ox, 50%) 0;
               opacity: 0; transform: translateY(-4px) scale(.98); visibility: hidden;
               transition: opacity var(--s-kucuk-cik) var(--e-git), transform var(--s-kucuk-cik) var(--e-git), visibility 0s linear var(--s-kucuk-cik); }
  .menu.acik { pointer-events: auto; }
  .menu.acik .menu-kutu { opacity: 1; transform: none; visibility: visible; transition: opacity var(--s-kucuk) var(--e-cik), transform var(--s-kucuk) var(--e-cik), visibility 0s; }
  .menu-ic { position: absolute; top: 0; left: 0; padding: 8px; opacity: 0; visibility: hidden; transform: translateX(var(--kay, 0px));
             transition: opacity var(--s-kucuk) var(--e-cik), transform var(--s-kucuk) var(--e-tasi), visibility 0s linear var(--s-kucuk); }
  .menu-ic.etkin { opacity: 1; visibility: visible; transform: none; transition: opacity var(--s-kucuk) var(--e-cik) 40ms, transform var(--s-kucuk) var(--e-tasi), visibility 0s; }
  .menu-ic.aninda { transition: none !important; }
  .m-satir { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; transition: background-color var(--s-geri); }
  a.m-satir:hover, button.m-satir:hover, .m-satir.eposta:hover { background-color: var(--dolgu-1); transition-duration: 0s; }
  button.m-satir { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
  .m-logo { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; flex: none; }
  .m-logo.qchu { background: var(--qchu-zemin); } .m-logo.cinery { background: var(--cinery-zemin); }
  .m-logo.bos { box-shadow: inset 0 0 0 1px var(--cizgi-2); color: var(--y4); }
  .m-logo img { width: 28px; height: 28px; } .m-logo svg { width: 16px; height: 23px; } .m-logo.bos svg { width: 12px; height: 12px; }
  .m-yazi { display: grid; gap: 2px; min-width: 0; }
  .m-yazi b { font: 600 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y1); }
  .m-yazi > span, .m-etiket { font: 400 12px/16px var(--sans); color: var(--y3); }
  .m-satir.pasif { opacity: .6; }
  .eposta a { font: 500 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y1); border-radius: 2px; }
  .kopya { margin-left: auto; height: 28px; padding: 0 12px; flex: none; border-radius: 999px; border: 0; background: var(--dolgu-2); color: var(--y2); font: 500 12px/16px var(--sans); cursor: pointer; transition: background-color var(--s-geri), color var(--s-geri); }
  .kopya:hover { background: var(--dolgu-3); color: var(--y1); }
  .kopya.tamam { background: var(--basari-zemin); color: var(--basari); }
  .m-ayrac { height: 1px; margin: 6px 12px; background: var(--cizgi); }
  .m-eylem { justify-content: space-between; font: 500 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y1); }
  .m-eylem:hover .ok { transform: translateX(2px); }

  /* hero: tek gosterisli an; acilis C (isik): yumusak bir isik basligin uzerinden gecer. Yazi tipleri yuklenince baslar; hareket
     azaltmada durgun son halde. */
  /* alt pay: hero dugmesi kalkinca uygulamalar yerinde kalsin (kalkan dugme + payi 96); isik kartlarin yalniz ust kismina deger */
  .hero { padding: 112px 0 96px; display: grid; justify-items: center; text-align: center; }
  .baslik { font: 400 64px/72px var(--serif); letter-spacing: -.01em; color: var(--y1); }
  /* isik kutusu satir ici: baslik iki satira inerse (EN mobil) asagi buyur; inline-block iken h1'in kirpmasi yalniz tek satiri sayip
     ust satiri yukari tasiriyordu. Kelime ve ic kutulari inline-block kalir (satir kelime arasinda kirilir). */
  .kelime, .ic { display: inline-block; }
  .alt-yazi { margin-top: 32px; max-width: 36rem; font: 400 18px/28px var(--sans); letter-spacing: -.014em; color: var(--y1); text-wrap: balance; }
  .hap { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--y1); color: #000; cursor: pointer;
         font: 500 16px/20px var(--sans); letter-spacing: -.011em; transition: transform 380ms var(--yay), background-color var(--s-geri); }
  .hap:hover { background: #fff; }
  .hap:active { transform: scale(.97); transition: transform var(--s-bas) var(--e-cik); }
  /* isik kutusu harf govdesinin disina tasan Turkce isaretler ve kuyruklar kesilmesin diye genisler */
  body[data-acilis="c"] .isik { padding: .16em .08em .28em; margin: -.16em -.08em -.28em; }
  .kartlar > :nth-child(2) { --s: 60ms; } .kartlar > :nth-child(3) { --s: 120ms; } .kartlar > :nth-child(4) { --s: 180ms; }
  .kartlar > :nth-child(5) { --s: 240ms; } .kartlar > :nth-child(6) { --s: 300ms; }
  @media (prefers-reduced-motion: no-preference) {
    body.bekliyor .baslik, body.bekliyor .alt-yazi, body.bekliyor #uygulamalar, body.bekliyor #davet { visibility: hidden; }
    /* destek ogeleri sirayla yerine oturur: alt yazi, uygulamalar, iletisim satiri */
    body.oynuyor .alt-yazi { animation: otur 700ms var(--e-expo) var(--g-alt) backwards; }
    body.oynuyor #davet { animation: otur 700ms var(--e-expo) calc(var(--g-uyg) + 400ms) backwards; }
    body.oynuyor #uy-b { animation: otur 700ms var(--e-expo) var(--g-uyg) backwards; }
    body.oynuyor .kart { animation: otur 700ms var(--e-expo) calc(var(--g-uyg) + 80ms + var(--s, 0ms)) backwards; }
    /* C · isik: yumusak bir isik soldan saga gecip yaziyi aydinlatir; "urune." kisa bir parilti tasir, "Fikirden" sonra soner */
    body[data-acilis="c"] { --g-alt: 350ms; --g-cta: 430ms; --g-uyg: 510ms; }
    /* C: yumusak kenarli (%40) isik basligin uzerinden gecer; ilk karede "F" gorunur, 850 ms ease-out-cubic (arastirma: 1 sn ustu yavas okunur) */
    body[data-acilis="c"].oynuyor .isik { animation: supur 850ms var(--e-supur) backwards; }
    body[data-acilis="c"].oynuyor:not(.acilis-bitti) .isik { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--x) - 40%), transparent var(--x));
                                         mask-image: linear-gradient(90deg, #000 calc(var(--x) - 40%), transparent var(--x)); }
    body[data-acilis="c"].oynuyor .k2 .ic { animation: parilti 700ms var(--e-cik) 300ms backwards; }
  }
  @keyframes otur { from { opacity: 0; translate: 0 8px; } }
  @property --x { syntax: '<percentage>'; inherits: false; initial-value: 140%; }
  @keyframes supur { from { --x: 10%; } to { --x: 140%; } }
  @keyframes parilti { from { text-shadow: 0 0 28px rgba(255,255,255,.55); } }

  /* hero isigi: sahnenin tepesinde, hero'nun arkasinda; kartlara varmadan siyaha soner (camda isik kartlarin ust kismina deger, buzlu
     bos kartlar onu bulanik gosterir). Yazilar okunsun diye hafif golge */
  .sahne { position: relative; }
  /* tuval gorunum genisligi kadar (02.10 gece: 1440'tan genis ekranda isik tuval kenarinda ani kesiliyordu); kompozisyon tuval yuksekligine
     gore kuruldugundan genislik yalniz seritleri uzatir. .sahne 1440 oldugu icin tuval ortadan disari tasar; 1440'tan dar ekranda sahne zoom'landigi
     icin en az 1440 (100vw zoom'la kuculurdu), genis ekranda 100vw (kaydirma cubugu payi kirpilir). */
  .isik-zemin { position: absolute; left: 50%; top: 0; width: max(1440px, 100vw); height: 980px; transform: translateX(-50%); display: block; pointer-events: none; z-index: 0; transition: opacity 600ms var(--e-cik); }
  body[data-isik="yok"] .isik-zemin { opacity: 0; }
  main, .altbilgi { position: relative; z-index: 1; }
  body:not([data-isik="yok"]) .hero .baslik, body:not([data-isik="yok"]) .hero .alt-yazi { text-shadow: 0 2px 28px rgba(0,0,0,.5); }

  /* uygulamalar: telefon ana ekrani gibi kare simge, adi altinda; her simge iki sutun (112 + 48 ara). Masaustu 112 px (kose 25: iOS
     orani %22,4), mobilde dort sutun, 64 px ve kisa ad. Simgenin zemini ve isigi uygulamanin kendi rengi; bos simgeler cam yuzeyi (hero
     isigi ust kisimlarina deger), opaklik %80 / 60 / 40 / 20. */
  .bolum { margin-top: 128px; scroll-margin-top: 24px; }
  .kartlar { margin-top: 32px; display: grid; grid-template-columns: repeat(6, 112px); column-gap: 48px; }
  .kart { position: relative; width: 112px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; opacity: var(--o, 1);
          transition: opacity var(--s-kucuk) var(--e-cik), transform var(--s-kucuk) var(--e-cik), box-shadow var(--s-kucuk) var(--e-cik); }
  .kart.qchu { --isik: rgba(102,218,206,.34); }
  .kart.cinery { --isik: rgba(124,108,247,.34); }
  .kart .logo { --cy-r: 25px; position: relative; width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden; border-radius: 25px;
                background: var(--cam-opak); box-shadow: inset 0 0 0 1px var(--cizgi); transition: box-shadow var(--s-kucuk) var(--e-cik); }
  .kart.qchu .logo { background: var(--qchu-zemin); }
  .kart.cinery .logo { background: var(--cinery-zemin); }
  .kart.uyg .logo::before { content: ''; position: absolute; left: -4px; top: -6px; width: 120px; height: 120px; border-radius: 50%; background: var(--isik);
                            filter: blur(32px); opacity: .75; transform: scale(var(--gs, 1)); transition: opacity var(--s-kucuk) var(--e-cik), transform var(--s-buyuk) var(--e-cik); }
  .kart .logo img { position: relative; width: 72px; height: 72px; }
  .kart .logo svg { position: relative; width: 40px; height: 57px; }
  .kart b { position: relative; margin-top: 12px; font: 500 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y1); }
  .kart .durum { position: relative; font: 400 12px/16px var(--sans); color: var(--y3); }
  .kart .ad.kisa { display: none; }
  .kart.bos .logo { background: var(--cy-ton); }
  .kart.bos .logo svg { width: 16px; height: 16px; }
  .kart.bos .arti { color: var(--y4); }
  .kart.bos span { font: 500 12px/16px var(--sans); color: var(--y3); }
  .kart.bos .ad { margin-top: 12px; }
  @media (prefers-reduced-transparency: reduce) { .kart.bos .logo { background: var(--cam-opak); -webkit-backdrop-filter: none; backdrop-filter: none; } }
  @media (hover: hover) and (pointer: fine) {
    .kart.uyg:hover { transform: translateY(-2px); }
    .kart.uyg:hover .logo { box-shadow: inset 0 0 0 1px var(--cizgi-2); }
    .kart.uyg:hover .logo::before { opacity: 1; --gs: 1.06; }
    .kartlar:has(.kart.uyg:hover) .kart:not(:hover) { opacity: calc(var(--o, 1) * .75); }
  }
  .kart.uyg:focus-visible .logo { box-shadow: inset 0 0 0 1px var(--cizgi-2); }
  .kart.uyg:active { transform: translateY(-1px) scale(.985); transition-duration: var(--s-bas); }

  /* iletisim satiri: uygulamalarin altinda, geri planda kalan tek kapi (proje fikri, geri bildirim, sikayet); dugme ikincil */
  .davet { margin-top: 96px; padding-top: 32px; border-top: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: space-between; gap: 48px; }
  .davet-yazi { max-width: 680px; font: 400 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y2); text-wrap: pretty; }
  .davet-yazi span { display: block; }
  .davet .hap { flex: none; }

  /* bize yazin: sayfada durmaz; tiklayinca iletisim satirinin altinda kap genisliginde asagi dogru acilir (Hizmetler satirlari gibi):
     yer 320 ms'de 0'dan tam boya, panelin zemini ve kenar isigi bastan gorunur (acilan yer kirpar), icerik 100 ms sonra belirir;
     kapanista icerik once soner, yer 240 ms'de kapanir. Sayfa ayni anda panele kayar. Masaustunde solda baslik ve dogrudan e-posta,
     sagda form; x ya da Esc kapatir. Adresle gelen (#iletisim) paneli hareketsiz acik bulur (.aninda: gecisler bir kare kapali). */
  .cekmece { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--s-buyuk-cik) var(--e-git), visibility 0s linear var(--s-buyuk-cik); }
  .cekmece.acik { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--s-buyuk) var(--e-cik), visibility 0s; }
  .cekmece.aninda, .cekmece.aninda *, .cekmece.aninda *::before, .cekmece.aninda *::after { transition: none !important; }
  .cekmece-ic { min-height: 0; overflow: hidden; }
  .cekmece-kutu { position: relative; z-index: 1; display: grid; grid-template-columns: 368px 1fr; grid-template-rows: auto 1fr; column-gap: 104px;
                  margin: 32px 0 0; padding: 48px; border-radius: 12px; --rr: 480px; --br: 1100px; }
  .cekmece-kutu::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(var(--br, 300px) circle at var(--bx, 0px) var(--by, 0px), var(--pencere-isik) 0%, var(--pencere-isik) 30%, #000 100%); }
  .cekmece-kutu > * { opacity: 0; transition: opacity var(--s-kucuk-cik) var(--e-git); }
  .cekmece.acik .cekmece-kutu > * { opacity: 1; transition: opacity var(--s-kucuk) var(--e-cik) 100ms; }
  .cekmece-bas { grid-column: 1; grid-row: 1; display: grid; gap: 20px; align-content: start; }
  .cekmece-bas .p16 { text-wrap: balance; }
  .kapat { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--y2); cursor: pointer; transition: background-color var(--s-geri), color var(--s-geri); }
  .cekmece.acik .kapat { transition: opacity var(--s-kucuk) var(--e-cik) 100ms, background-color var(--s-geri), color var(--s-geri); }
  .kapat:hover { background: var(--dolgu-1); color: var(--y1); }
  .kapat svg { width: 14px; height: 14px; }
  .form { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .alan { display: grid; gap: 8px; align-content: start; min-width: 0; border: 0; }
  .alan.tam, .form-alt, .form-durum { grid-column: 1 / -1; }
  .alan label, .alan legend { font: 500 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y2); padding: 0; }
  .alan legend { margin-bottom: 8px; }
  .istege { margin-left: 4px; font-weight: 400; color: var(--y3); }   /* ayirici isaret yok: bosluk (karakter + 4 px, ~8 px) ve soluk renk */
  .form input, .form textarea { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 8px; background: #000; color: var(--y1);
                                box-shadow: inset 0 0 0 1px var(--cizgi-2); font: 400 16px/24px var(--sans); letter-spacing: -.011em; transition: box-shadow var(--s-geri); }
  .form textarea { height: 120px; padding: 12px 16px; resize: vertical; }
  .form input:hover, .form textarea:hover { box-shadow: inset 0 0 0 1px var(--cizgi-3); }
  .form input:focus-visible, .form textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--y3); }   /* hale yok: yalniz cizgi */
  .form ::placeholder { color: var(--y3); }
  .cipler { display: flex; flex-wrap: wrap; gap: 8px; }
  .secim { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cizgi-2);
           font: 500 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y2); transition: background-color var(--s-geri), color var(--s-geri), box-shadow var(--s-geri); }
  .secim:hover { box-shadow: inset 0 0 0 1px var(--cizgi-3); color: var(--y1); }
  .secim[aria-pressed="true"] { background: var(--y1); color: #000; box-shadow: none; }
  .form-alt { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 8px; }
  .form-alt .hap { flex: none; white-space: nowrap; }   /* dugme yazisi kirilmaz; dar kalirsa KVKK notu sarar (02.10 gece: 'E-posta uygulamasinda ac' 250 px, yer 240 idi) */
  .kvkk { max-width: 368px; font: 400 12px/16px var(--sans); color: var(--y3); }
  .kvkk .metin-bag { color: var(--y2); white-space: nowrap; }
  /* gonderim sonucu pencereyi uzatmaz: gorunen sonuc Gonder dugmesinin yazisinda; tam cumle yalniz ekran okuyucuya (role=status) */
  .form-durum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* dogrudan e-posta: sol sutunun dibinde (form ne kadar uzunsa) */
  .cekmece-alt { grid-column: 1; grid-row: 2; align-self: end; padding-top: 24px; box-shadow: inset 0 1px 0 var(--cizgi); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .cekmece-alt a { font-weight: 500; color: var(--y1); border-radius: 2px; }
  .cekmece-alt .kopya { margin-left: 0; }

  /* altbilgi: marka 1-3. sutun, uc baglanti sutunu 4-6 / 7-9 / 10-12; daha uzun gorunsun diye seyrek satirlar */
  .altbilgi { margin-top: 200px; padding-bottom: 72px; }
  .ab { display: grid; grid-template-columns: repeat(12, 56px); column-gap: 48px; }
  .ab-sol { grid-column: 1 / span 3; display: flex; flex-direction: column; }
  .ab-sol > svg { width: 36px; height: 36px; }
  .telif { margin-top: auto; padding: 48px 0 10px; font: 400 12px/16px var(--sans); color: var(--y3); }  /* taban cizgisi son baglantininkiyle ayni (12/20'den 12/16'ya: alt dolgu +2) */
  .ab-sutun { grid-column: span 3; display: grid; align-content: start; gap: 48px; }
  .ab-grup b { display: block; margin-bottom: 8px; font: 600 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y1); }
  .ab-grup a { display: block; padding: 8px 0; font: 400 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y2); border-radius: 2px; transition: color var(--s-geri); }
  .ab-grup a:hover { color: var(--y1); }

  /* 390'dan dar telefonlar (375 iPhone SE/mini, 360 Android): bar ogeleri sikisir, en ustteki buyuk isaretle ilk oge arasinda bosluk kalsin */
  @media (max-width: 389px) { .bar .ogeler { gap: 8px; } .dil-d, .dil-ust span { padding-inline: 10px; } .marka { transform: none; } }   /* .bar: mobil blogundaki 12'yi ezsin; isaret ustte buyumez */
  /* 360'dan dar (320, eski iPhone SE): bar sigmiyordu (isaret 28 + ogeler 279 > kap 280, 7 px tasma); acilir oklar gizlenir (-36 px), aria-expanded kalir */
  @media (max-width: 359px) { .oge svg { display: none; } .oge { gap: 0; } }

  /* dokunmatikte kucuk denetimlerin tiklama alani en az 44 px (gorunus ayni; gorunmez alan dugmenin icinde, tiklama dugmeye gider) */
  @media (pointer: coarse) {
    .dil-d, .oge, .kopya, .kunye-goster, .secim { position: relative; }
    .dil-d::before, .oge::before, .kopya::before, .kunye-goster::before, .secim::before { content: ''; position: absolute; inset: -8px 0; }
    .kapat::before { content: ''; position: absolute; inset: -8px; }
    /* ust uste dizili altbilgi baglantilari: gorunmez alan komsusunu orterdi; satir boyu 44 olur, baslik alt boslugu 8 -> 12 (fare
       duzenindeki gibi baslik ve baglantilar tek ritimde: 36 yerine 44). Icindekiler kendi stilinin altinda. */
    .ab-grup a { padding-block: 12px; }
    .ab-grup b { margin-bottom: 12px; }
  }

  /* dil degisimi: 180 ms capraz gecis */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--s-kucuk); animation-timing-function: var(--e-cik); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  }


  /* ── alt sayfalar (ortak). Izgara: 1200 kap, 12 sutun 56 + 48 oluk; n. sutun (n-1)*104'te baslar. ── */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sb { position: relative; padding-top: 112px; }   /* ilk yazi bar boyu kadar asagida (ana sayfa hero'su da 112) */
  .sb-baslik:first-child { margin-top: 0; }   /* ustunde etiket yoksa (Hizmetler) etiket araligi da yok */
  .sb-ust { font: 500 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y3); }
  .sb-baslik { margin-top: 20px; max-width: 888px; font: 400 64px/72px var(--serif); letter-spacing: -.01em; color: var(--y1); text-wrap: balance; }
  .sb-giris { margin-top: 32px; max-width: 680px; font: 400 18px/28px var(--sans); letter-spacing: -.014em; color: var(--y2); text-wrap: pretty; }
  .sb-meta { margin-top: 24px; font: 400 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y3); }
  .hap.ikincil { background: transparent; color: var(--y1); box-shadow: inset 0 0 0 1px var(--cizgi-2); }
  .hap.ikincil:hover { background: var(--dolgu-1); }
  /* kapanis: sayfanin sonunda tek davet */
  .kapanis { margin-top: 128px; padding-top: 48px; border-top: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: space-between; }
  .kapanis .p16 { margin-top: 16px; }
  /* sik sorulanlar: Durum bolumuyle ayni kalip (baslik solda, liste sagda; 02.10 gece); soru 16/24 kalin, cevap p16 */
  .sss { margin-top: 128px; display: grid; grid-template-columns: 576px 576px; column-gap: 48px; padding-top: 48px; border-top: 1px solid var(--cizgi); }
  .sss-oge + .sss-oge { margin-top: 24px; }
  .sss-oge h3 { font: 600 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y1); }
  .sss-oge p { margin-top: 8px; }

  /* yasal belge: solda yapiskan icindekiler (1-3. sutun), sagda metin (5-11. sutun) */
  .belge { display: grid; grid-template-columns: 264px 680px; column-gap: 152px; margin-top: 96px; align-items: start; }
  .icindekiler { position: sticky; top: 96px; }
  .icindekiler b { display: block; margin-bottom: 8px; font: 600 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y1); }
  .icindekiler b:not(:first-child) { margin-top: 32px; }
  .icindekiler a { display: block; padding: 6px 0; font: 400 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y3); border-radius: 2px; transition: color var(--s-geri); }
  .icindekiler a:hover, .icindekiler a.etkin { color: var(--y1); }
  @media (pointer: coarse) { .icindekiler a { padding-block: 12px; } }   /* dokunmatik: ust uste dizili baglantilar 44 (mobilde tek satir, asagida) */
  .metin h2 { font: 600 18px/28px var(--sans); letter-spacing: -.014em; color: var(--y1); }
  .metin h2:not(:first-child) { margin-top: 56px; }
  .metin h3 { margin-top: 28px; font: 600 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y1); }
  .metin p, .metin li { font: 400 16px/28px var(--sans); letter-spacing: -.011em; color: var(--y2); text-wrap: pretty; }
  .metin p { margin-top: 12px; }
  .metin ul { margin-top: 12px; padding-left: 20px; }
  .metin li + li { margin-top: 4px; }
  .metin a { color: var(--y1); text-decoration: underline 1px var(--y4); text-underline-offset: 3px; border-radius: 2px; }
  .metin a:hover { text-decoration-color: var(--y1); }
  .metin strong { font-weight: 500; color: var(--y1); }
  /* kunye: tanim satirlari */
  .kunye-liste { display: grid; grid-template-columns: 208px 1fr; margin-top: 12px; border-top: 1px solid var(--cizgi); }
  .kunye-liste dt, .kunye-liste dd { padding: 16px 0; border-bottom: 1px solid var(--cizgi); font: 400 16px/24px var(--sans); letter-spacing: -.011em; }
  .kunye-liste dt { color: var(--y3); }
  .kunye-liste dd { color: var(--y1); }
  /* ad ve dugme hic birlikte gorunmez (tiklayinca ad yazilir, dugme gizlenir): sol bosluk yok, dugme deger sutununun kenarinda */
  .kunye-goster { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--dolgu-2); color: var(--y1);
                  font: 500 12px/16px var(--sans); cursor: pointer; transition: background var(--s-geri); }
  .kunye-goster:hover { background: var(--dolgu-3); }
  .kunye-not { color: var(--y3); }

  /* hizmetler: satira tiklayinca alta dogru cekmece gibi acilir (Valve'in is ilanlari gibi); bir anda tek satir acik */
  .akordeon { margin-top: 96px; border-top: 1px solid var(--cizgi); }
  .ak-oge { border-bottom: 1px solid var(--cizgi); }
  .ak-bas { width: 100%; display: grid; grid-template-columns: 104px 1fr auto 36px; align-items: center; padding: 32px 0; border: 0; background: none; text-align: left; cursor: pointer; }
  .ak-no { font: 500 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y3); font-variant-numeric: tabular-nums; }
  .ak-ad { font: 400 32px/40px var(--serif); letter-spacing: -.005em; color: var(--y1); }
  .ak-ozet { margin-right: 32px; font: 400 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y3); }
  .ak-isaret { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--cizgi-2); color: var(--y1);
               transition: transform var(--s-buyuk) var(--e-cik), background var(--s-geri); }
  .ak-isaret svg { width: 14px; height: 14px; }
  .ak-bas:hover .ak-isaret { background: var(--dolgu-1); }
  .ak-oge.acik .ak-isaret { transform: rotate(45deg); }
  .ak-govde { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--s-buyuk) var(--e-cik); }
  .ak-oge.acik .ak-govde { grid-template-rows: 1fr; }
  .ak-ic { overflow: hidden; }
  .ak-icerik { display: grid; grid-template-columns: 576px 368px; column-gap: 152px; padding: 0 0 48px 104px; }
  .ak-icerik p { font: 400 18px/28px var(--sans); letter-spacing: -.014em; color: var(--y2); text-wrap: pretty; }
  .ak-icerik p + p { margin-top: 16px; }
  .ak-icerik .metin-bag { display: inline-block; margin-top: 24px; font: 500 16px/24px var(--sans); letter-spacing: -.011em; }
  .ak-dahil b { display: block; font: 600 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y1); }
  .ak-dahil ul { margin-top: 8px; list-style: none; }
  .ak-dahil li { padding: 8px 0; border-bottom: 1px solid var(--cizgi); font: 400 14px/20px var(--sans); letter-spacing: -.006em; color: var(--y2); }

  /* urun sayfasi (Cinery): ortada logo, ad, uygulamanin kendi sozu; altta cam yuzeyli ozellik kartlari */
  .urun-bas { position: relative; padding-top: 112px; display: grid; justify-items: center; text-align: center; }
  .urun-logo { --cy-r: 21.5px; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 21.5px; }   /* %22,4 */
  .urun-logo svg { width: 40px; height: 57px; }
  .urun-logo img { width: 64px; height: 64px; }
  .urun-ad { margin-top: 24px; font: 600 18px/24px var(--sans); letter-spacing: -.014em; color: var(--y1); }
  .urun-bas .sb-baslik { margin-top: 20px; }
  .urun-bas .sb-giris { margin-top: 32px; }
  .urun-durum { margin-top: 32px; display: flex; gap: 8px; }
  .urun-durum span { --cy-r: 14px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font: 500 12px/16px var(--sans); color: var(--y2); }
  .ozellikler { margin-top: 224px; }
  .oz-izgara { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 368px); gap: 48px; }
  .oz-kart { padding: 32px; border-radius: 12px; }
  .oz-kart b { display: block; font: 600 18px/24px var(--sans); letter-spacing: -.014em; color: var(--y1); }
  .oz-kart p { margin-top: 12px; font: 400 16px/24px var(--sans); letter-spacing: -.011em; color: var(--y2); text-wrap: pretty; }
  .urun-not { margin-top: 128px; display: grid; grid-template-columns: 576px 576px; column-gap: 48px; padding-top: 48px; border-top: 1px solid var(--cizgi); }
  .urun-not .p16 + .p16 { margin-top: 12px; }

  /* 404: ust kisimda isik "404" yazar (cam arkasinda); WebGL yoksa yazi yedegi gorunur */
  .hata { position: relative; padding-top: 560px; display: grid; justify-items: center; text-align: center; }
  .hata-yedek { display: none; position: absolute; top: 150px; left: 0; right: 0; font: 400 240px/1 var(--serif); letter-spacing: -.02em; color: var(--y2); }
  body.isiksiz .hata-yedek { display: block; }

  .hata-dugmeler { margin-top: 48px; display: flex; gap: 16px; }
  @media (prefers-reduced-motion: reduce) { .ak-govde, .ak-isaret { transition: none; } }

  /* ── mobil (767 px ve alti): sahne kucultulmez; 20 px kenar boslugu, tek sutun. Yazi boylari: 44 (hero) / 40 (sayfa basligi) / 28 / 16 / 14 / 12 ── */
  @media (max-width: 767px) {
    .sahne { width: auto; }
    .kap { width: auto; margin-inline: 20px; }
    .b32 { font-size: 28px; line-height: 36px; }
    /* bar: 72 -> 58; yalniz RAE isareti; cam kenarlardan 8 px iceride; menuler tam genislik */
    .bar { height: 72px; }
    .bar-zemin-kap { left: 8px; right: 8px; height: calc(var(--bh, 72px) / 2 + 29px); }   /* 17 + 12 */
    .marka span { display: none; }
    .ogeler { gap: 12px; }
    .menu { top: calc(var(--bh, 72px) / 2 + 30px + 7px * var(--cam, 0)); left: 12px; width: calc(100vw - 24px) !important; transform: none !important; }   /* cam alti bh/2 + 29 */
    .menu-ic { width: 100% !important; }
    /* hero */
    .hero { padding: 72px 20px 72px; }
    .baslik { font-size: 40px; line-height: 48px; }
    .alt-yazi { margin-top: 24px; font-size: 16px; line-height: 24px; letter-spacing: -.011em; }
    .isik-zemin { width: 100%; height: 720px; }
    /* cekmece: tek sutun */
    .cekmece-kutu { display: flex; flex-direction: column; margin: 24px 0 0; padding: 24px 20px; }
    .cekmece-bas { padding-right: 48px; }
    .kapat { top: 18px; right: 14px; }
    .form { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
    .form-alt { flex-direction: column; align-items: stretch; gap: 16px; }
    .form-alt .hap { justify-content: center; }
    .kvkk { max-width: none; }
    .cekmece-alt { margin-top: 32px; align-self: stretch; }   /* masaustundeki align-self: end (izgarada alta yaslar) dikey flex'te saga yasliyordu */
    /* uygulamalar: uc sutun (3+3), 64 px simge, kisa ad. 02.10 gece: dort sutunda (87 px) EN "In development" etiketleri (87 px)
       bitisik yaziliyordu; uc sutunda (117 px) sigar, iki tam satir olur. */
    .bolum { margin-top: 96px; }   /* hero alt dolgusu 72 + 96 = 168 */
    .kartlar { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
    .kart { width: auto; }
    .kart .logo { --cy-r: 14px; width: 64px; height: 64px; border-radius: 14px; }
    .kart.uyg .logo::before { left: -2px; top: -4px; width: 68px; height: 68px; filter: blur(18px); }
    .kart .logo img { width: 42px; height: 42px; }
    .kart .logo svg { width: 23px; height: 33px; }
    .kart.bos .logo svg { width: 14px; height: 14px; }
    .kart b, .kart.bos .ad { margin-top: 8px; font: 500 12px/16px var(--sans); letter-spacing: 0; }
    .kart .ad.uzun { display: none; }
    .kart .ad.kisa { display: inline; }
    /* iletisim satiri: yazi ustte, dugme altta */
    .davet { margin-top: 72px; flex-direction: column; align-items: flex-start; gap: 24px; }
    .davet-yazi span { display: inline; }
    /* altbilgi: iki sutun; logo ve telif en altta. 02.10 gece: sol sutun (Rae Software + Hizmetler) iki satiri kaplar, Yasal sagda
       Uygulamalar'in altinda (uc sutunlu altbilgide Yasal tek basina ikinci satira dusuyor, sagda bosluk kaliyordu). Ikinci satir 1fr:
       sol sutunun artigi o satira gider, Yasal Uygulamalar'in hemen altinda kalir. Yardim merkezi sutunlari donunce yeniden bakilir. */
    .altbilgi { margin-top: 120px; padding-bottom: 96px; }
    .ab { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 40px; }
    .ab-sol { grid-column: 1 / -1; order: 1; }
    .ab-sutun { grid-column: span 1; gap: 40px; }
    .ab-sutun-1 { grid-row: 1 / 3; }
    .ab-sutun-3 { grid-column: 2; }
    .telif { padding-top: 18px; }
    /* alt sayfalar */
    .sb { padding-top: 72px; }
    .sb-baslik { font-size: 40px; line-height: 48px; }
    .sb-giris, .urun-bas .sb-giris { margin-top: 24px; font-size: 16px; line-height: 24px; letter-spacing: -.011em; }
    .kapanis { margin-top: 96px; flex-direction: column; align-items: flex-start; gap: 24px; }
    .sss { grid-template-columns: 1fr; row-gap: 24px; margin-top: 96px; }
    .belge { display: block; margin-top: 72px; }
    .icindekiler { position: static; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--cizgi); }
    .icindekiler b { width: 100%; margin: 0 0 4px; }
    .icindekiler a[href^="#"], .icindekiler b:not(:first-child) { display: none; }
    .metin h2:not(:first-child) { margin-top: 40px; }
    .kunye-liste { grid-template-columns: 1fr; }
    .kunye-liste dt { padding-bottom: 0; border-bottom: 0; }
    .kunye-liste dd { padding-top: 4px; }
    .akordeon { margin-top: 72px; }
    .ak-bas { grid-template-columns: 40px 1fr 28px; padding: 24px 0; }
    .ak-ozet { display: none; }
    .ak-ad { font-size: 28px; line-height: 36px; }
    .ak-isaret { width: 28px; height: 28px; }
    .ak-icerik { grid-template-columns: 1fr; row-gap: 32px; padding: 0 0 32px 40px; }
    .ak-icerik p { font-size: 16px; line-height: 24px; letter-spacing: -.011em; }
    .urun-bas { padding-top: 72px; }
    .ozellikler { margin-top: 168px; }
    .oz-izgara { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
    .oz-kart { padding: 24px; }
    .urun-not { grid-template-columns: 1fr; row-gap: 24px; margin-top: 96px; }
    .hata { padding-top: 360px; }
    .hata-yedek { top: 120px; font-size: 120px; }
    .hata-dugmeler { flex-direction: column; align-self: stretch; }
    .hata-dugmeler .hap { justify-content: center; }
  }
  /* mobilde icindekiler yan yana tek satir: gorunus ayni kalir, dokunma alani gorunmez alanla 44 */
  @media (max-width: 767px) and (pointer: coarse) {
    .icindekiler a { position: relative; padding-block: 6px; }
    .icindekiler a::before { content: ''; position: absolute; inset: -6px 0; }
  }