/* ── YAZI TIPLERI SELF-HOST (05.11.2026) ───────────────────────────────── Once `fonts.googleapis.com`tan geliyordu. Iki sebeple tasindi: ⚠️ 1. PERFORMANS — OLCULDU. PageSpeed mobilde "render-blocking requests 650-700 ms" uyarisinin kaynagi buydu: tarayici once googleapis'e gidip CSS'i aliyor (DNS + TLS + istek), SONRA gstatic.com'a ikinci bir kaynaktan font cekiyordu. Iki capraz-kaynak el sikismasi ve seri bir bagimlilik. Artik ikisi de ayni kaynaktan. ⚠️ 2. GIZLILIK. Google Fonts'u tarayiciya cektirmek ziyaretcinin IP'sini Google'a gonderir; AEA'da bu tartismali ve bu site AEA'ya onay akisi sunuyor. Self-host bunu tamamen ortadan kaldirir. ⚠️ DEGISKEN FONT KULLANILDI VE BU BIR DUZELTME. CSS'te 650 ve 750 agirliklari var ama Google'dan istenen set `400;450;500;600;700;800` idi — yani o ikisi BUGUNE KADAR en yakinina yuvarlaniyordu. Degisken font 100-900 arasini surekli veriyor; artik tam cizilyorlar. Ayrica alti ayri dosya yerine tek dosya. ⚠️ AILE ADLARI `Inter` ve `JetBrains Mono` olarak BIRAKILDI (paketin kendi adi 'Inter Variable'). Boylece site.css'teki hicbir `font-family` satirina dokunmak gerekmedi. ⚠️ `unicode-range` DEGERLERI UYDURULMADI, paketin kendi CSS'inden alindi. Turkce icin kritik: `ğ ş İ` latin-ext araliginda (U+0100+), `ı` ise latin'de (U+0131). Yani Turkce sayfa IKI dosyayi da cekiyor, Ingilizce sayfa cogunlukla yalnizca latin'i. Lisanslar `yazitipi/LICENSE-*.txt` — OFL tasinmalarini sart kosuyor. */ @font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/yazitipi/inter-latin.woff2) format('woff2-variations'); 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: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/yazitipi/inter-latin-ext.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/yazitipi/mono-latin.woff2) format('woff2-variations'); 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: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/yazitipi/mono-latin-ext.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ===================================================================== ROTALY — ANA SAYFA TASARIMI (Ali'nin ilettigi dosyadan, 21.10.2026) --------------------------------------------------------------------- ⚠️ `style.css` AYRI DURUYOR VE BIRLESTIRILMEDI. O dosyayi yasal sayfalar kullaniyor (gizlilik, sartlar, destek, hesap silme) ve o adresler magazalara verildi. Bu dosyanin sinif adlari (`.in`, `.card`, `.row`, `.note`...) genel; tek dosyada birlestirmek sessiz cakismalar uretirdi. ⚠️ `--faint` (#8A8A84) METIN OLARAK KULLANILMIYOR ARTIK. Deponun kendi `contrast.ts` araciyla olculdu: paper uzerinde 3.33 — AA metin esigi 4.5. Tasarimda `.note` ve `.visa .after`ta metin rengiydi; `--muted` (7.09) ile degistirildi. Degisken DURUYOR, cunku dolgu/kenarlik olarak kullanmak sorun degil. ⚠️ `--or` (#F97316) metin icin KULLANILMAZ (2.69); tasarim bunu zaten ayirmis ve `--otext` (#A8501C, 5.26) vermis. Ayrim korundu. ===================================================================== */ :root{ --ink:#141414; --muted:#56564F; --faint:#8A8A84; --paper:#FBFAF8; --surf:#FFFFFF; --hair:#E7E6E2; --or:#F97316; --otext:#A8501C; --odeep:#8F3F12; --ok:#177A35; --night:#0C0C0B; --night2:#15150F; --std:cubic-bezier(.2,0,0,1); --emph:cubic-bezier(.05,.7,.1,1); --maxw:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:84px} body{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} @media(max-width:700px){.wrap{padding:0 16px}} .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--otext)} h2.sec{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.05; margin-top:14px} .sub{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:58ch} /* ============================================================== NAV */ .nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s var(--std), border-color .3s,backdrop-filter .3s} .nav .in{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center; justify-content:space-between;gap:18px} .nav .lg{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px; letter-spacing:-.03em;color:#fff;transition:color .3s} /* Marka isareti UYGULAMANIN IKONUNDAN (`assets/images/icon.png`, 15.10.2026). Once burada CSS ile cizilmis duz bir `R` vardi ve o cizim 24.09 tarihli ESKI pul markasiydi — site ile uygulama iki farkli logo gosteriyordu. `var(--or)` yedek olarak duruyor: gorsel inmezse turuncu kare yine cikar, bosluk kalmaz. */ .nav .lg i{width:28px;height:28px;border-radius:8px;background:var(--or) url(/marka.svg) center/cover no-repeat;display:grid; place-items:center;color:#fff;font-weight:800;font-size:15px;font-style:normal;flex:none} .nav .mn{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:500; color:rgba(255,255,255,.8)} .nav .mn a:hover{color:#fff} .nav .tr{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1); border-radius:999px;padding:7px 16px;color:#fff;backdrop-filter:blur(10px)} .nav .tr:hover{background:rgba(255,255,255,.2)} .nav.solid{background:rgba(251,250,248,.86);backdrop-filter:blur(14px) saturate(1.5); border-bottom:1px solid var(--hair)} .nav.solid .lg{color:var(--ink)} .nav.solid .mn{color:var(--muted)} .nav.solid .mn a:hover{color:var(--ink)} .nav.solid .tr{border-color:var(--hair);background:var(--surf);color:var(--ink)} .burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1);backdrop-filter:blur(10px);cursor:pointer; align-items:center;justify-content:center;flex-direction:column;gap:4px} .burger s{display:block;width:16px;height:1.6px;background:#fff;text-decoration:none; transition:background .3s} .nav.solid .burger{border-color:var(--hair);background:var(--surf)} .nav.solid .burger s{background:var(--ink)} .sheet{display:none;background:var(--surf);border-bottom:1px solid var(--hair); padding:8px 16px 16px} .sheet a{display:block;padding:12px 4px;font-size:15.5px;font-weight:500;color:var(--ink); border-top:1px solid var(--hair)} .sheet.open{display:block} @media(max-width:780px){ .nav .mn{display:none} .burger{display:flex} .nav{background:rgba(251,250,248,0)} .nav.open{background:rgba(251,250,248,.98);backdrop-filter:blur(14px)} .nav.open .lg{color:var(--ink)} .nav.open .burger{border-color:var(--hair);background:var(--surf)} .nav.open .burger s{background:var(--ink)} } /* ============================================================== HERO */ .hero{position:relative;min-height:min(760px,100svh);display:flex;flex-direction:column; background:#0A0A0A;color:#fff;overflow:hidden} .hero .bg{position:absolute;inset:0;z-index:0} .hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(1.2) contrast(1.05); transform:scale(1.06);animation:kb 26s ease-in-out infinite alternate} @keyframes kb{to{transform:scale(1.15) translate3d(-1.6%,-1%,0)}} /* ── Hero: IKI GORSEL, 3 SANIYEDE BIR DEGISIYOR (Ali, 21.10.2026) ────── Ikinci gorsel birincinin USTUNDE duruyor ve yalnizca O animasyonlu; birinci hep opak. Tek animasyon = iki katman HIC desenkron olamaz. 6 sn'lik dongu: 0–42% A gorunur, 42–50% capraz gecis, 50–92% B gorunur, 92–100% geri gecis. Yani her gorsel ~3 sn ekranda. ⚠️ REDUCED-MOTION'DA `animation:none` SART — ALTTAKI GENEL KURAL YETMEZ, TERSINE CEVIRIR. Bu dosyanin sonundaki blok `*{animation-duration:.001s !important}` yaziyor; `infinite` bir dongu orada DURMAZ, 0,001 sn'de basa sarar — yani hareketi azaltmak isteyen kullaniciya STROBE verirdi. Hareketi kaldirmanin dogru yolu suresini kisaltmak degil, animasyonu KALDIRMAK. */ .hero .bg img + img{animation:kb 26s ease-in-out infinite alternate, gorselGecis 6s linear infinite} @keyframes gorselGecis{0%,42%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0}} .hero .bg::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(8,8,8,.66) 0%,rgba(8,8,8,.06) 24%,rgba(8,8,8,.1) 48%,rgba(8,8,8,.88) 100%), linear-gradient(90deg,rgba(8,8,8,.84) 0%,rgba(8,8,8,.44) 34%,rgba(8,8,8,0) 66%)} .hero .in{position:relative;z-index:3;flex:1;max-width:var(--maxw);width:100%;margin:0 auto; padding:120px 28px 44px;display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:end} .place{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.85); background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px; padding:6px 13px;backdrop-filter:blur(10px)} .place u{width:5px;height:5px;border-radius:50%;background:var(--or);text-decoration:none} .hero h1{margin-top:20px;font-size:clamp(36px,5.4vw,70px);font-weight:800;line-height:1; letter-spacing:-.05em;max-width:15ch;text-shadow:0 2px 34px rgba(0,0,0,.45)} .hero .lead{margin-top:18px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.84); max-width:46ch;text-shadow:0 1px 16px rgba(0,0,0,.5)} .store{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap} .btn{display:flex;flex-direction:column;gap:1px;border-radius:12px;padding:12px 22px; background:#fff;color:#101010;transition:transform .18s var(--std),box-shadow .2s} .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(10px)} .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)} .btn b{font-size:14.5px;font-weight:650;letter-spacing:-.02em} .btn s{font-size:9.5px;letter-spacing:.14em;text-decoration:none;opacity:.58;font-weight:600} /* ── Hero karti: DORT ULKE, 2 SANIYEDE BIR (Ali, 22.10.2026) ─────────── Dort kart ayni grid HUCRESINDE ust uste duruyor; mutlak konum YOK, yani yukseklik en uzun karta gore kendiliginden olusuyor ve `opacity` duzeni hic etkilemiyor. 8 sn'lik tek bir dongu, kart basina -2sn kaydirma. Tek keyframe = dort katman HIC desenkron olamaz; dordunu ayri ayri zamanlamak (ya da JS ile saymak) bir gun birbirinden sapardi. Gecis SIRALI, ust uste BINMIYOR: her kart %0-4 arasi aciliyor, %23'e kadar duruyor, %27'de tamamen kapaniyor. Bir sonraki kart ancak 0,16 sn'lik bir pay kalacak sekilde aciliyor — METIN USTUNE METIN binmesin diye. Gorsellerde capraz gecis guzel durur, YAZIDA okunaksizlik uretir. ⚠️ REDUCED-MOTION'DA `animation:none` SART — dosyanin sonundaki genel kural `animation-duration:.001s` yaziyor ve `infinite` bir donguyu DURDURMAZ, saniyede binlerce kez dondurur. Hareket istemeyen kullaniciya STROBE vermek olurdu. Hero gorsellerinde ayni tuzak 21.10'da olculdu; kapatmasi dosya sonunda. */ .gstack{display:grid;align-self:end} .gstack>.gcard{grid-area:1/1;animation:kartGecis 10s linear infinite} .gstack>.gcard:nth-child(2){animation-delay:-8s} .gstack>.gcard:nth-child(3){animation-delay:-6s} .gstack>.gcard:nth-child(4){animation-delay:-4s} .gstack>.gcard:nth-child(5){animation-delay:-2s} /* ⚠️ YUZDELER KART SAYISINA BAGLI. Bes kart x 2 sn = 10 sn; kart basina slot %20. Mutlak sureler 4 kartliyken neyse O: 0,32 sn acilma + 1,52 sn duruş + 0,32 sn kapanma. Bir kart daha eklenirse dongu suresi DE yuzdeler DE yeniden hesaplanir — biri guncellenip digeri unutulursa kartlar ust uste biner. */ @keyframes kartGecis{0%{opacity:0} 3.2%,18.4%{opacity:1} 21.6%,100%{opacity:0}} .gcard{align-self:end;background:rgba(20,18,16,.5);border:1px solid rgba(255,255,255,.16); border-radius:20px;padding:20px;backdrop-filter:blur(22px) saturate(1.3); box-shadow:0 30px 70px -30px rgba(0,0,0,.9)} .gcard .h{display:flex;align-items:center;justify-content:space-between;gap:10px} .gcard .h b{font-size:15px;font-weight:700;letter-spacing:-.02em} .gcard .h s{text-decoration:none;font-size:10.5px;letter-spacing:.12em; color:rgba(255,255,255,.5);text-transform:uppercase;font-weight:600;white-space:nowrap} .gcard .g{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px} .gc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px; padding:11px 12px;min-width:0} .gc k{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; color:rgba(255,255,255,.52);font-weight:600;white-space:nowrap} .gc b{display:block;margin-top:4px;font-size:14.5px;font-weight:650;letter-spacing:-.025em; white-space:nowrap} .gc.full{grid-column:1/-1} .gc.full b{font-size:21px;font-weight:750;letter-spacing:-.03em} .gc.full b em{font-style:normal;font-size:12px;font-weight:500;color:rgba(255,255,255,.5)} .gc i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--or); margin-right:6px;vertical-align:middle} /* ── Vize noktasi: KOSULLU DURUM NOTR (22.10.2026) ────────────────────── Uygulamanin kurali (`src/features/home/components/visa-badge.tsx`): visa_free -> success (dolu) e_visa / visa_on_arrival -> NOTR (yarim) <- "kosullu" visa_required -> warning (ic bos) e-vize bir UYARI DEGIL: cevrimici karsilanabilen bir kosul. Ona da turuncu vermek, "vize gerekli" ile ayni agirlikta okutur ve kartin ayirt ettigi tek sey silinir. Renk uygulamanin koyu paletinden (`dark.textSecondary`), uydurulmadi. ⚠️ RENK TEK TASIYICI DEGIL — bu da uygulamanin yazili kurali. Burada ikinci tasiyici ETIKETIN KENDISI: hucre zaten "E-vize" yaziyor. Noktayi 6px'te ayrica bicimlendirmek (halka/yarim) o olcekte okunmuyor, bu yuzden denenmedi. ⚠️ UCUNCU BIR SINIF EKLENMEDI. Dort kartin hicbiri `visa_free` degil; okunmayacak bir jeton eklemek bu deponun yazili tuzagi ("okunmayan jeton olcu degil TEMENNIDIR"). Vizesiz bir ulke eklenirse o gun eklenir. */ .gc.kosullu i{background:#B2A9A3} /* Vizesiz: uygulamanin `success` tonu (`dark.success`). Bu sinif 22.10'da BILEREK eklenmemisti ("okunmayan jeton olcu degil TEMENNIDIR") cunku o gun hicbir kart vizesiz degildi. Japonya eklendi, jeton artik OKUNUYOR; gerekce ortadan kalktigi icin sinif da geldi. */ .gc.vizesiz i{background:#79DDA4} .gfoot{margin-top:13px;display:flex;align-items:center;gap:8px;font-size:11.5px; color:rgba(255,255,255,.55);line-height:1.4} .gfoot u{color:#6FD68C;text-decoration:none;flex:none} .scrollhint{position:relative;z-index:3;display:flex;align-items:center;gap:10px; justify-content:center;padding:0 16px 22px;font-size:10.5px;letter-spacing:.17em; text-transform:uppercase;color:rgba(255,255,255,.52);font-weight:600;text-align:center} .scrollhint u{width:1px;height:22px;text-decoration:none;flex:none; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.6))} @media(max-width:900px){ .hero .in{grid-template-columns:1fr;padding:100px 16px 32px;gap:24px;align-items:start} .hero{min-height:unset} .gcard{align-self:stretch} } /* ============================================================== İÇERİK */ .sec-pad{padding:88px 0} @media(max-width:700px){.sec-pad{padding:58px 0}} .grid9{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .card{background:var(--surf);border:1px solid var(--hair);border-radius:16px;padding:22px 22px 24px; transition:transform .22s var(--std),box-shadow .22s var(--std),border-color .22s} .card:hover{transform:translateY(-3px);border-color:#DAD8D2; box-shadow:0 18px 40px -26px rgba(60,40,20,.5)} .card .ic{width:36px;height:36px;border-radius:11px;background:rgba(249,115,22,.1); display:grid;place-items:center;color:var(--otext)} .card .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .card h3{margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.025em} .card p{margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--muted)} @media(max-width:900px){.grid9{grid-template-columns:1fr 1fr}} @media(max-width:620px){.grid9{grid-template-columns:1fr}} /* uygulamadan */ .app{background:linear-gradient(180deg,#FFF6EE 0%,var(--paper) 62%)} .shots{margin-top:42px;display:grid;grid-template-columns:1fr 1fr;gap:40px} .shot{display:flex;flex-direction:column;align-items:center} .shot .cap{margin-top:20px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:40ch; text-align:center} .note{/*AA*/margin-top:40px;font-size:13px;line-height:1.6;color:var(--muted);max-width:72ch; font-family:"JetBrains Mono",monospace;letter-spacing:-.01em} @media(max-width:820px){.shots{grid-template-columns:1fr;gap:46px}} /* ============================================================== FİYAT */ .price{position:relative;overflow:hidden;background:#0B0B0A;color:#fff} .price .bg{position:absolute;inset:0;z-index:0} .price .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.02)} .price .bg::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(8,8,8,.84) 0%,rgba(8,8,8,.66) 42%,rgba(8,8,8,.93) 100%), linear-gradient(90deg,rgba(8,8,8,.5) 0%,rgba(8,8,8,.1) 58%,rgba(8,8,8,.4) 100%)} .price .in{position:relative;z-index:2} .price .lbl{color:#FFB880} .price .sub{color:rgba(255,255,255,.72)} .price .sub b{color:#fff;font-weight:650} .plans{margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .plan{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px; padding:22px 20px 24px;backdrop-filter:blur(14px);transition:transform .22s var(--std), background .22s,border-color .22s;display:flex;flex-direction:column} .plan:hover{transform:translateY(-4px);background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.26)} .plan.best{background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.5)} .plan .pn{font-size:14px;font-weight:650;letter-spacing:-.01em;color:rgba(255,255,255,.8); display:flex;align-items:center;gap:8px} .plan .pn em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; background:var(--or);color:#fff;border-radius:5px;padding:3px 6px;font-weight:700} .plan .pp{margin-top:12px;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1} .plan .pp s{text-decoration:none;font-size:13px;font-weight:500;letter-spacing:-.01em; color:rgba(255,255,255,.52)} .plan .pr{margin-top:12px;font-size:15px;font-weight:600;color:#fff} .plan .pd{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.45} .plan .bar{margin-top:16px;height:4px;border-radius:99px;background:rgba(255,255,255,.14); overflow:hidden} .plan .bar u{display:block;height:100%;background:var(--or);border-radius:99px;width:0; transition:width 1s var(--std)} .go .plan .bar u{width:var(--w)} .rules{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px} .rules div{display:flex;gap:10px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)} .rules u{color:var(--or);text-decoration:none;flex:none} @media(max-width:1000px){.plans{grid-template-columns:1fr 1fr}} @media(max-width:700px){.plans{grid-template-columns:1fr}.rules{grid-template-columns:1fr}} /* ============================================================== SSS */ .faq{margin-top:34px;border-top:1px solid var(--hair)} details{border-bottom:1px solid var(--hair)} summary{list-style:none;cursor:pointer;padding:19px 46px 19px 0;position:relative; font-size:16.5px;font-weight:600;letter-spacing:-.02em} summary::-webkit-details-marker{display:none} summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:1.8px; background:var(--ink);transform:translateY(-50%);transition:transform .25s var(--std)} summary::before{content:"";position:absolute;right:8px;top:50%;width:13px;height:1.8px; background:var(--ink);transform:translateY(-50%) rotate(90deg);transition:transform .25s var(--std)} details[open] summary::before{transform:translateY(-50%) rotate(0)} details[open] summary{color:var(--otext)} details[open] summary::after,details[open] summary::before{background:var(--or)} details .ans{padding:0 56px 22px 0;font-size:15px;line-height:1.65;color:var(--muted); max-width:72ch;animation:ansIn .3s var(--std)} @keyframes ansIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* ============================================================== VİZE */ .visa{background:var(--surf);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .callout{margin-top:26px;border-left:3px solid var(--or);background:var(--paper); border-radius:0 14px 14px 0;padding:24px 26px} .callout p{font-size:15.5px;line-height:1.65;color:var(--muted);max-width:74ch} .callout p+p{margin-top:14px} .callout b{color:var(--ink);font-weight:650} .visa .after{margin-top:20px;font-size:14px;line-height:1.6;color:var(--muted);max-width:70ch} /* ============================================================== CTA */ .cta{position:relative;overflow:hidden;background:#0B0B0A;color:#fff} .cta .in{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:40px; align-items:center;padding-top:72px;padding-bottom:72px} .cta .ph-img{border-radius:18px;overflow:hidden;aspect-ratio:4/5; box-shadow:0 30px 70px -30px rgba(0,0,0,.9)} .cta .ph-img img{width:100%;height:100%;object-fit:cover} .cta h2{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.05; max-width:16ch} .cta p{margin-top:16px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.7);max-width:46ch} .cta .bgtint{position:absolute;inset:0;z-index:0;background: radial-gradient(760px 420px at 18% 30%, rgba(249,115,22,.16), transparent 70%)} @media(max-width:820px){ .cta .in{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px} .cta .ph-img{aspect-ratio:16/10;order:-1} } /* ============================================================== FOOTER */ .foot{background:var(--night);color:rgba(255,255,255,.62);padding:46px 0 54px} .foot .in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .foot .lg{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px; letter-spacing:-.03em} .foot .lg i{width:26px;height:26px;border-radius:8px;background:var(--or) url(/marka.svg) center/cover no-repeat;display:grid; place-items:center;color:#fff;font-weight:800;font-size:14px;font-style:normal} .foot nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px} .foot nav a{color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px} .foot nav a:hover{color:#fff;border-color:#fff} .foot .fine{margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.6;max-width:92ch} /* ============================================================== TELEFON */ .ph{--pw:300px;width:var(--pw);flex:none;position:relative; border-radius:calc(var(--pw)*.115);background:#1A1917;padding:calc(var(--pw)*.0255); box-shadow:0 30px 60px -34px rgba(60,40,20,.75),0 0 0 1px rgba(20,20,20,.05)} .ph .scr{border-radius:calc(var(--pw)*.092);overflow:hidden;background:#F7F7F5; font-size:calc(var(--pw)/18.75);color:#141414;line-height:1.45} .ph .sb{display:flex;justify-content:space-between;align-items:center; padding:.9em 1.4em .35em;font-size:.95em;font-weight:600;color:#3A3A38} .ph .sb .ic{display:flex;gap:.3em;opacity:.6} .ph .sb .ic s{width:.45em;height:.45em;background:#3A3A38;border-radius:50%;display:block; text-decoration:none} .ph .nav2{display:flex;align-items:center;justify-content:space-between;gap:.5em; padding:.5em 1.1em .9em;min-width:0} .ph .bk{width:2.6em;height:2.6em;border-radius:50%;background:#fff;border:1px solid #E4E4E3; display:grid;place-items:center;font-size:.9em;color:#141414;flex:none} .ph .ti{font-weight:650;font-size:1.1em;letter-spacing:-.025em;white-space:nowrap; flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} .ph .cr{display:flex;align-items:center;gap:.35em;background:#fff;border:1px solid #E4E4E3; border-radius:999px;padding:.42em .68em;font-size:.82em;font-weight:600;white-space:nowrap;flex:none} .ph .cr u{width:1.15em;height:1.15em;border-radius:50%;background:var(--or);display:block; text-decoration:none} .ph .body{padding:0 1.1em 1.2em} .ph .himg{border-radius:.9em;overflow:hidden;aspect-ratio:16/9;background:#DDD} .ph .himg img{width:100%;height:100%;object-fit:cover} .ph .cty{display:flex;align-items:center;gap:.5em;margin-top:.95em;font-size:1.8em; font-weight:700;letter-spacing:-.03em} .ph .cty span{font-size:.75em} .ph .msub{margin-top:.35em;font-size:.92em;color:#6B6B68;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .ph .chips{display:flex;gap:.45em;flex-wrap:wrap;margin-top:.7em} .ph .chip{background:#F0EDE8;border-radius:.5em;padding:.35em .6em;font-size:.82em;font-weight:600} .ph .chip i{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--or); margin-right:.35em;vertical-align:middle} .ph h4{margin-top:1em;font-size:1.15em;font-weight:700;letter-spacing:-.02em} .ph .card2{margin-top:.9em;background:#fff;border:1px solid #EDEDEA;border-radius:.95em;padding:.95em} .ph .card2.warn{border-color:#E3B489;background:#FFFCF9} .ph .ch{display:flex;justify-content:space-between;align-items:flex-start;gap:.5em;min-width:0} .ph .ch b{font-size:1.15em;font-weight:650;letter-spacing:-.02em} .ph .ch p{font-size:.88em;color:#8E8E8C;margin-top:.2em;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .ph .sv{border:1px solid #E4E4E3;border-radius:.6em;padding:.4em .75em;font-size:.9em; font-weight:600;white-space:nowrap;flex:none} .ph .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6em;margin-top:.85em} .ph .cell{background:#F7F7F5;border-radius:.7em;padding:.7em .75em;min-width:0} .ph .cell k,.ph .wide k{display:block;font-size:.73em;font-weight:600;letter-spacing:.045em; color:#9A9A95;text-transform:uppercase;white-space:nowrap} .ph .cell b{display:block;margin-top:.3em;font-size:.88em;font-weight:650;letter-spacing:-.035em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ph .cell i{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--or); margin-right:.35em;vertical-align:middle} .ph .cell em,.ph .wide em{display:block;margin-top:.2em;font-size:.82em;color:#9A9A95; font-style:normal} .ph .wide{background:#F7F7F5;border-radius:.7em;padding:.7em .75em;margin-top:.6em} .ph .wide b{display:block;margin-top:.25em;font-size:1.3em;font-weight:700;letter-spacing:-.03em} .ph .rows{margin-top:.9em;background:#fff;border:1px solid #EDEDEA;border-radius:.95em; overflow:hidden} .ph .row{display:flex;align-items:center;gap:.7em;padding:.82em .9em;font-size:1.02em; font-weight:500;border-top:1px solid #F1F1EE} .ph .row:first-child{border-top:0} .ph .row u{width:1.5em;height:1.5em;border-radius:.4em;background:rgba(249,115,22,.12); display:grid;place-items:center;color:var(--otext);font-size:.8em;text-decoration:none;flex:none} .ph .row s{margin-left:auto;color:#C6C6C2;text-decoration:none} .ph .vtitle{color:var(--otext);font-size:1.25em;font-weight:700;letter-spacing:-.02em} .ph .kv{margin-top:.55em;font-size:.95em;color:#4A4A46} .ph .kv b{font-weight:650} .ph .src{margin-top:.6em;font-size:.88em;color:var(--ok);font-weight:600} .ph .lnk{margin-top:.45em;font-size:.88em;color:var(--otext);font-weight:600; border-bottom:1px solid rgba(168,80,28,.35);display:inline-block} .ph .cta2{margin-top:.9em;background:var(--or);color:#fff;border-radius:.8em;padding:.8em; text-align:center} .ph .cta2 b{display:block;font-size:1.05em;font-weight:700;letter-spacing:-.02em} .ph .cta2 s{display:block;text-decoration:none;font-size:.85em;opacity:.85;margin-top:.15em} .ph .fine{margin-top:.5em;font-size:.8em;color:#9A9A95;text-align:center} .ph .fl{display:flex;align-items:center;justify-content:space-between;gap:.6em; padding:.72em 0;border-bottom:1px solid #EDEDEA;font-size:.98em} .ph .fl em{font-style:normal;color:#6B6B68} .ph .fl s{text-decoration:none;color:var(--otext);font-weight:600;font-size:.9em;flex:none} .ph .mrow{display:flex;align-items:center;gap:.7em;padding:.5em 0} .ph .mrow k{width:2.4em;font-size:.88em;color:#8E8E8C;font-weight:600;flex:none} .ph .mrow .track{flex:1;height:.5em;background:#EFEDE9;border-radius:99px;overflow:hidden; min-width:0} .ph .mrow .track u{display:block;height:100%;background:var(--or);border-radius:99px; text-decoration:none;opacity:.85} .ph .mrow b{font-size:.86em;font-weight:650;white-space:nowrap;flex:none;letter-spacing:-.03em} .ph .hbar{height:.35em;width:34%;background:#1A1917;border-radius:99px;margin:.9em auto .4em; opacity:.22} @media(max-width:620px){.ph{--pw:268px !important}} @media(max-width:360px){.ph{--pw:244px !important}} /* reveal */ .rv{opacity:0;transform:translateY(18px)} .go .rv,.rv.go{animation:rvIn .62s var(--emph) forwards} .go .rv:nth-child(2){animation-delay:.06s} .go .rv:nth-child(3){animation-delay:.12s} .go .rv:nth-child(4){animation-delay:.18s} .go .rv:nth-child(5){animation-delay:.24s} .go .rv:nth-child(6){animation-delay:.3s} .go .rv:nth-child(7){animation-delay:.36s} .go .rv:nth-child(8){animation-delay:.42s} .go .rv:nth-child(9){animation-delay:.48s} @keyframes rvIn{to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important;animation-delay:0s !important} .rv{opacity:1;transform:none} html{scroll-behavior:auto} /* ⚠️ SURE KISALTMAK SONSUZ BIR DONGUYU DURDURMAZ, HIZLANDIRIR. Yukaridaki `*` kurali tek seferlik animasyonlari bitiriyor ama hero'nun `infinite` capraz gecisini 0,001 sn'de basa sardirir — hareket istemeyen kullaniciya STROBE olurdu. Dongunun kendisi kaldirilir; geriye tek (birinci) gorsel kalir. */ .hero .bg img + img{animation:none !important;opacity:0 !important} /* Ayni gerekce: sure kisaltmak donguyu durdurmaz. Dongu kalkiyor ve geriye SADECE ilk ulke karti kaliyor. */ .gstack>.gcard{animation:none !important;opacity:0 !important} .gstack>.gcard:first-child{opacity:1 !important} } /* ⚠️ GERCEK EKRAN GORUNTUSU, MAKET DEGIL (21.10.2026). Tasarimin telefon cercevesi (`.ph`) korundu; icine uretim paketinden alinan gercek goruntu kondu. Gerekce `site.js` basinda. */ .ph .scr > img { display: block; width: 100%; height: auto; } /* ===================================================================== BLOG (Ali, 10.11.2026) — /blog + ana sayfadaki "Latest posts" seridi --------------------------------------------------------------------- ⚠️ YENI RENK/OLCU JETONU URETILMEDI. Rozet, cip ve kart golgeleri yukaridaki `--or/--otext/--hair/--surf` ve `.card`in golge degerlerinden geliyor. Ikinci bir palet acmak, ayni turuncunun iki ekranda farkli cikmasinin tek sebebi olurdu. ⚠️ FILTRE CIPLERI GERCEK `