/* ═══════════════════════════════════════════════════════════════════════
   oiplan PAZARLAMA SİTESİ — ortak stil  (v1.43.0)
   ═══════════════════════════════════════════════════════════════════════
   NEDEN AYRI DOSYA: site ikiye ayrıldı — / (Bireysel) ve /kurumsal.
   İki sayfa aynı markayı, aynı düğmeleri, aynı kartları kullanıyor.
   Stil index.html'in içinde satır içi kalsaydı ikinci sayfaya kopyalanmak
   zorunda kalırdı ve ilk renk değişikliğinde ikisi ayrışırdı.

   ⚠️ Bu dosya UYGULAMANIN stili DEĞİLDİR. Uygulama css/style.css kullanır
   ve ona dokunulmaz. Buradaki değişkenler (--bg/--sf/--ac...) yalnız
   pazarlama sayfalarında geçerlidir; uygulamanınkiler (--surface/--accent...)
   ayrı bir sözlüktür. İkisini karıştırma.

   Site TEK TEMALIDIR (açık). Uygulamadaki [data-theme="dark"] burada YOK —
   pazarlama sayfası bilinçli olarak tek görünümde tutuluyor.
   ═══════════════════════════════════════════════════════════════════════ */

/* v1.43.0 — --t3 KOYULAŞTIRILDI: #9a9aa4 → #6f6f79.
   Eski değer açık zeminde 2,69:1 veriyordu; WCAG'ın küçük metin için
   istediği 4,5:1'in çok altında ve grafik/büyük metin için istediği 3:1'in
   bile altında. --t3 sayfada 11-13 px yardımcı metinlerde kullanılıyor —
   tam da en zor okunan boy. Yeni değer 4,85:1. Uygulamada aynı dert
   v1.40.0'da düzeltilmişti; site o turda gözden kaçmış.
   Koyu .trust bloğu kendi sabit rengini kullanıyor, etkilenmiyor. */
:root{--bg:#fbfbfa;--sf:#fff;--ln:#e8e7e3;--t1:#17171b;--t2:#5f5f68;--t3:#6f6f79;--ac:#5b5bd6;--ach:#4949c4;--acs:#ededfc;--act:#3d3d9e;--gr:#1d9e75;--grs:#e2f5ec;--grt:#0b5c44;--am:#b97a17;--ams:#faeeda;--amt:#6b420d;--rd:#e0524f;--rds:#fcebea;--rdt:#8a2523}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--t1);font-size:15px;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:50;background:rgba(251,251,250,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--ln)}
.nav .in{max-width:1120px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px}
.brand img{width:46px;height:46px;border-radius:11px}
/* v1.43.1 — ÜST ÇUBUK BÜZÜLMESİ. Bireysel/Kurumsal anahtarı üst çubuğa
   ~210 px eklendi ve esnek kutu, sığmayan öğeleri KÜÇÜLTEREK yer açmaya
   çalıştı: bağlantı yazıları iki satıra kırıldı ("Yönetici / görünümü"),
   TR/EN kutusu kırpıldı, telefonda düğme ekranın dışına taştı.
   Kural: üst çubuk öğeleri asla büzülmez ve satır kırmaz — sığmıyorsa
   AZALIR (bağlantılar menüye katlanır), ezilmez. */
.nav .in > *{flex:0 0 auto}
/* v1.43.1: bu kural satır içi style="display:flex;gap:10px" olarak
   yazılıydı ve satır içi stil HER CSS kuralını eziyordu — telefonda
   "gizle" kuralı hiç işlemiyor, üst çubuk taşmaya devam ediyordu. */
.nav .cta{display:flex;gap:10px;align-items:center}
.nav a.l,.nav .btn,.nav .lang-sw,.nav .gsw,.nav .brand{white-space:nowrap}
.nav a.l{font-size:13.5px;color:var(--t2);font-weight:500}
.nav a.l:hover{color:var(--t1)}
/* Menü düğmesi ve çekmecesi (v1.7.5). Geniş ekranda ikisi de yok: orada
   bağlantılar zaten üst çubukta duruyor, ikinci bir menü kalabalık olurdu. */
.nav-mnu{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:34px;
  padding:0 8px;border:1px solid var(--ln);border-radius:9px;background:var(--sf);cursor:pointer}
.nav-mnu span{display:block;height:2px;border-radius:2px;background:var(--t2)}
.nav-mnu[aria-expanded="true"]{background:var(--acs,#ededfc);border-color:rgba(91,91,214,.3)}
.nav-mnu[aria-expanded="true"] span{background:var(--act,#3d3d9e)}
.nav-cek{border-top:1px solid var(--ln);background:rgba(251,251,250,.98);backdrop-filter:blur(12px);
  padding:6px 20px 12px}
.nav-cek a{display:block;padding:13px 2px;font-size:15px;font-weight:600;color:var(--t1);
  border-bottom:1px solid var(--ln)}
.nav-cek a:last-child{border-bottom:0}
.nav-cek a.giris{color:var(--ac,#5b5bd6)}
.cek-dil{display:flex;gap:0;margin-top:12px;border:1px solid var(--ln);border-radius:9px;width:max-content;overflow:hidden}
.cek-dil button{border:0;background:var(--sf);color:var(--t3);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:8px 16px;cursor:pointer}
.cek-dil button.on{background:var(--acs);color:var(--act)}
.lang-sw{display:flex;border:1px solid var(--ln);border-radius:8px;overflow:hidden}
.lang-sw button{border:none;background:var(--sf);color:var(--t3);font-size:11.5px;font-weight:700;padding:6px 10px;cursor:pointer;font-family:inherit}
.lang-sw button.on{background:var(--acs);color:var(--act)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ln);background:var(--sf);border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--t1)}
.btn.primary{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.primary:hover{background:var(--ach)}
.btn.lg{padding:13px 24px;font-size:15px;border-radius:12px}
/* HERO */
/* Hero'da renk yok. Eskiden mor bir radyal parıltı vardı; sayfaya "yapay zeka
   demosu" havası veriyordu ve gözü butondan alıyordu. Tek renkli zeminde
   ekranda renkli kalan tek şey birincil düğme oluyor, göz de oraya gidiyor. */
.hero{position:relative;padding:84px 0 40px;overflow:hidden;background:var(--bg)}
.hero .in{position:relative;text-align:center;max-width:840px;margin:0 auto}
/* Hero girişi: ziyaretçi önce kendi durumunu görsün, sonra çözümü. */
/* ---- Kampanya ----
   Kampanya kartı hero'dan fiyat bölümüne taşındı. Sebebi: hero'da dört kutulu
   geri sayım, ekranın en ağır öğesiydi ve asıl tıklanması gereken butonu
   gölgeliyordu. Kampanya kararın verildiği yerde, fiyatların hemen üstünde
   daha çok işe yarıyor. Saniye de göstermiyoruz; tıkırdayan sayaç okumayı
   böler ve gün cinsinden bilgi karar için zaten yeterli. */
/* Fiyat bölümünde ikinci bir geri sayım göz yorardı; orada tek satır yeter. */
.kmp-satir{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 15px;
           border-radius:999px;background:var(--acs,#f2f1fd);border:1px solid rgba(91,91,214,.18);
           font-size:13.5px;font-weight:700;color:var(--act,#4a4ac2);line-height:1.35;text-align:left}
.kmp-satir i{font-size:16px;flex:0 0 auto}
.kmp-satir b{font-weight:800}
/* Son 3 gün: aciliyet gerçekten yaklaşınca renk değişsin. */
.kmp-satir.sonspurt{background:#fdeced;border-color:#f5c6ca;color:#96262c}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--acs);color:var(--act);border-radius:20px;padding:7px 15px;font-size:12.5px;font-weight:600;margin-bottom:22px}
h1{font-family:'Instrument Sans','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   font-size:52px;line-height:1.08;letter-spacing:-.028em;font-weight:600}
/* Degrade kaldırıldı. Vurgu artık renkle değil, ağırlıkla: aynı mürekkep
   renginde ama daha kalın. Tek renkli tasarımda vurgu yapmanın sessiz yolu. */
/* Başlığın ilk satırı: sıkıntıyı söyleyen, geri planda duran cümle.
   Filmde de gri ve küçük; ikinci satır vurguyu alıyor. */
.h1-ust{display:block;font-size:.52em;font-weight:600;color:var(--t3);letter-spacing:0;margin-bottom:6px;line-height:1.35}
@media(max-width:620px){.h1-ust{font-size:.6em;margin-bottom:4px}}
h1 .grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;font-weight:700}
.sub{font-size:17.5px;line-height:1.65;color:var(--t2);margin:22px auto 30px;max-width:660px}
.sub strong{color:var(--t1)}
.ctas{display:flex;gap:12px;justify-content:center;align-items:center}
/* Güvence satırı: parçalar kendi içinde bölünmesin. Mobilde "İstediğin /
   zaman iptal et" diye ortadan kırılıyordu; ayırıcıyı CSS koyunca satır
   sonu ancak iki madde arasında oluyor. */
/* Aynı satır ekip bölümünün düğmesinin altında da kullanılıyor; risk
   azaltıcı cümle her birincil düğmenin yanında olmalı. */
.hero .note,#ekip .note,#roller .note{font-size:12.5px;color:var(--t3);margin-top:14px;display:flex;flex-wrap:wrap;
            justify-content:center;gap:4px 0}
.hero .note span,#ekip .note span,#roller .note span{white-space:nowrap}
.hero .note span+span::before,#ekip .note span+span::before,#roller .note span+span::before{content:"·";margin:0 8px;color:var(--ln)}
/* "Verilerin güvende" bir iddia; tıklanınca nasıl olduğunu anlatan sayfaya
   gidiyor. Söyleyip arkasını göstermemek güven vermiyor. */
.hero .note a{color:var(--t2);border-bottom:1px solid var(--ln)}
.hero .note a:hover{color:var(--t1);border-bottom-color:var(--t3)}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--t2);box-shadow:0 2px 8px rgba(20,20,40,.05)}
.chip i{color:var(--t3);font-size:15px}   /* rozet ikonları da renksiz: ekranda renkli tek öğe düğme kalsın */
/* GÜVEN ŞERİDİ · düğmenin hemen altı.
   Kasten soluk ve çerçevesiz: bu bir vaat değil, endişeyi susturan bir dipnot.
   Kutuya alınsaydı ürünün bir özelliği gibi görünür, düğmeyle yarışırdı. */
.tstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:16px;
        font-size:12px;color:var(--t3);line-height:1.5}
.tstrip>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tstrip i{font-size:14px;opacity:.75}
.tstrip a{color:inherit;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--ln)}
.tstrip a:hover{color:var(--t2)}
/* v1.8.3 · TELEFONDA ŞERİT ALT ALTA.
   Ölçüldü (390 px): üç madde tek satıra sığmıyor ve 2+1 diye kırılıyordu;
   ikinci satırdaki tek madde ortada asılı kalıyordu (x=104, diğerleri
   x=17 ve x=185). Ekranın üstü bu yüzden "dağınık" görünüyordu.
   Alt alta ve sola hizalı bir liste: ikonlar tek sütunda dizilince
   ragged sarma yerine bilerek yapılmış bir liste okunuyor. Blok bir
   bütün olarak ortalanıyor (width:max-content + auto kenarlar). */
@media(max-width:620px){
  .tstrip{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;
          width:max-content;max-width:100%;margin-left:auto;margin-right:auto;
          gap:8px;font-size:11.5px;text-align:left}
  .tstrip>span{white-space:normal}
}
/* ÜÇ ÖZELLİK KARTI · çiplerin yerine.
   Çipler 620px altında gizliydi; bunlar her ekranda duruyor, çünkü telefondan
   gelen ziyaretçinin ürünün ne yaptığını görmesi gerekiyor. Telefonda üç kart
   alt alta ama her biri iki satır: toplamda çiplerin kapladığı yerin biraz
   üstünde, karşılığında ürün anlatılmış oluyor. */
.hero-f{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:860px;margin:26px auto 0;text-align:left}
.hf{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:13px 15px;box-shadow:0 2px 8px rgba(20,20,40,.05)}
.hf-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--t1)}
.hf-t i{font-size:17px;color:var(--ac)}
/* Akış satırı: adımlar arasındaki ok, "sonra ne oluyor"u kelimeyle
   anlatmadan gösteriyor. Son adım vurgulu, çünkü kullanıcıya kalan tek iş o. */
.hf-a{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:9px;font-size:11.5px;color:var(--t3)}
.hf-a b{font-weight:600;background:var(--cd,#fff);border:1px solid var(--ln);border-radius:7px;padding:4px 8px}
.hf-a b.on{background:var(--acs);border-color:transparent;color:var(--act);font-weight:700}
.hf-a .ok{font-size:13px;opacity:.45;line-height:1}
@media(max-width:860px){ .hero-f{grid-template-columns:1fr;max-width:420px;gap:9px} .hf{padding:11px 13px} }
/* genişlik satırı: sessiz ama okunur. Kalın kısım tek başına bile mesajı verir. */
.hero-more{margin:16px auto 0;max-width:52ch;font-size:13.5px;line-height:1.6;color:var(--t3)}
.hero-more b{color:var(--t2);font-weight:700}
/* Telefonda gizli (v1.7.4): eskiden çipler dar ekranda saklandığı için
   ürünün genişliğini anlatan tek satır buydu. Artık üç özellik kartı her
   ekranda duruyor ve aşağıdaki "ve daha fazlası" bölümü aynı şeyi söylüyor;
   üçüncü kez söylemek yeni bilgi değil, sadece kaydırma. */
@media(max-width:620px){ .hero-more{display:none} }
/* ürün penceresi */
/* ChatGPT vs oiplan: iki sütun, kısa satır. Paragraf yok. */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto}
/* ZORUNLU: yukarıdaki `display:grid`, tarayıcının kendi `[hidden]{display:none}`
   kuralını eziyor — eleman seçicisi öznitelik seçicisinden güçlü. Bu satır
   olmadan `hidden` özniteliği hiçbir işe yaramıyor ve üç senaryo da ekranda
   kalıyor. Ölçüldü: bölüm telefonda 0,9 ekrandan 2,25 ekrana çıkmıştı. */
.vs[hidden]{display:none}
.vs-c{border-radius:16px;overflow:hidden;border:1px solid var(--ln,#e5e7f0)}
.vs-h{padding:13px 16px;font-size:15px;font-weight:700;text-align:center}
.vs-a .vs-h{background:#22222a;color:#fff}
.vs-b .vs-h{background:var(--ac,#5b5bd6);color:#fff}
.vs-c ul{list-style:none;margin:0;padding:14px 16px;background:var(--cd,#fff)}
.vs-b ul{background:#f7f7fe}
.vs-c li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:14px;line-height:1.45;color:var(--t2,#667085)}
.vs-c li+li{border-top:1px solid var(--ln,#eceef6)}
.vs-c li i{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px}
.vs-a li i{background:#e9e9ee;color:#6b6b78}
.vs-b li i{background:#1d9e75;color:#fff}
.vs-b li{color:var(--t1,#16161d);font-weight:500}
/* AKIŞ LİSTESİ (v1.7.4)
   Numaralı, çünkü karşılaştırılan şey adım SAYISI. Numara CSS sayacıyla
   üretiliyor; iki sütun aynı bileşeni kullansın diye HTML'e elle yazılmadı.
   Sağ sütunda ilk üç adım soluk ve "otomatik" etiketli: kullanıcının
   yapmadığı adımlar görünür kalıyor ki liste "eksik" değil "kısa" okunsun. */
.vs-c ol.akis{list-style:none;counter-reset:ak;margin:0;padding:14px 16px;background:var(--cd,#fff)}
.vs-b ol.akis{background:#f7f7fe}
.vs-c ol.akis li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;line-height:1.4;color:var(--t2,#667085)}
.vs-c ol.akis li+li{border-top:1px solid var(--ln,#eceef6)}
.vs-c ol.akis li::before{counter-increment:ak;content:counter(ak);flex:none;width:20px;height:20px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.vs-a ol.akis li::before{background:#e9e9ee;color:#6b6b78}
.vs-b ol.akis li::before{background:#ddddf6;color:#4a4ac2}
.vs-b ol.akis li.son::before{background:#1d9e75;color:#fff}
.vs-b ol.akis li.son{color:var(--t1,#16161d);font-weight:700}
.vs-b ol.akis li.oto{opacity:.72}
.vs-c ol.akis em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#4a4ac2;background:#ececfb;border-radius:5px;padding:2px 6px;white-space:nowrap}
/* Senaryo sekmeleri. Segment görünümü kasıtlı: üçünün de aynı anda seçilebilir
   olduğu ve birinin şu an açık olduğu tek bakışta görünsün. */
.vs-sek{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto 20px;
  background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:5px;width:max-content;max-width:100%}
.vs-sek button{border:0;background:transparent;color:var(--t2);font-family:inherit;font-size:13px;
  font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.vs-sek button.on{background:var(--ac,#5b5bd6);color:#fff}
.vs-sek button:focus-visible{outline:2px solid var(--ac,#5b5bd6);outline-offset:2px}
@media(max-width:620px){ .vs-sek{width:100%;justify-content:stretch} .vs-sek button{flex:1;padding:8px 6px;font-size:11.5px;white-space:normal} }
/* Sonuç cümlesi: iki sütunun ortak çıkarımı, bu yüzden ikisinin altında ve ortada. */
.vs-sonuc{text-align:center;margin:20px auto 0;font-size:clamp(16px,2.4vw,20px);font-weight:800;letter-spacing:-.01em}
.kick2{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--act);
  background:var(--acs);border-radius:6px;padding:4px 10px;margin-bottom:12px}
/* "Ve daha fazlası" ayıracı: modül listesini ikiye bölüyor. Soluk ve küçük
   olması kasıtlı — bu bir bölüm başlığı değil, hiyerarşi işareti. */
.daha-h{text-align:center;margin:36px 0 10px}
.daha-h span{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);border-top:1px solid var(--ln);padding-top:14px;min-width:190px}
.daha-h p{margin-top:7px;font-size:13px;color:var(--t3)}
/* YÖNETİCİ BÖLÜMÜ · üç kutu: çalışan / yönetici / şirket.
   Sayfanın tamamı tek kullanıcıya sesleniyordu; oysa ekip aboneliğinde
   kararı çoğunlukla ürünü kendisi kullanmayacak kişi veriyor. */
.ekip-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:26px auto 0;text-align:left}
.ekip-c{border:1px solid var(--ln);border-radius:16px;background:var(--cd,#fff);padding:20px 20px 18px}
.ekip-c .kim{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.ekip-c b{display:block;margin-top:8px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.ekip-c p{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--t2)}
@media(max-width:860px){ .ekip-g{grid-template-columns:1fr;max-width:460px} }
@media(max-width:620px){ .vs{grid-template-columns:1fr;gap:12px} .vs-c li{font-size:13.5px;padding:8px 0}
  .vs-c ol.akis li{font-size:13px;padding:8px 0} }

/* Fiyat karşılaştırma kutusu */
.kars{max-width:820px;margin:26px auto 0;border:1px solid var(--ln,#e5e7f0);border-radius:16px;background:var(--cd,#fff);overflow:hidden;text-align:left}
.kars-h{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--ln,#e5e7f0);font-size:13.5px;font-weight:700;color:var(--t2,#667085);background:var(--bg2,#fafafa)}
.kars-g{display:grid;grid-template-columns:1fr 1fr}
.kars-col{padding:16px 18px}
.kars-col+.kars-col{border-left:1px solid var(--ln,#e5e7f0)}
.kars-on{background:#f7f7fe}
.kars-t{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3,#8a8a9a);margin-bottom:10px}
.kars-on .kars-t{color:#5b5bd6}
.kars-r{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13px;color:var(--t2,#667085);line-height:1.5;border-bottom:1px dashed var(--ln,#eceef6)}
.kars-r span{flex:1}
.kars-r em{font-style:normal;color:var(--t3,#8a8a9a);font-size:12px;display:block}
.kars-r b{font-weight:600;color:var(--t1,#16161d);white-space:nowrap}
.kars-on .kars-r b{color:#1d9e75}
.kars-x span{color:var(--t3,#8a8a9a)}
.kars-tot{display:flex;align-items:center;gap:10px;padding-top:11px;margin-top:5px;font-size:14px;font-weight:700;color:var(--t1,#16161d)}
.kars-tot span{flex:1;font-weight:600;color:var(--t2,#667085)}
.kars-on .kars-tot b{color:#5b5bd6;font-size:17px}
.kars-n{font-size:11.5px;line-height:1.6;color:var(--t3,#8a8a9a);padding:12px 18px;border-top:1px solid var(--ln,#e5e7f0);margin:0}
@media(max-width:640px){ .kars-g{grid-template-columns:1fr} .kars-col+.kars-col{border-left:0;border-top:1px solid var(--ln,#e5e7f0)} }

.win{margin:56px auto 0;max-width:960px;background:var(--sf);border:1px solid var(--ln);border-radius:18px;box-shadow:0 30px 80px rgba(20,20,40,.12),0 6px 20px rgba(20,20,40,.06);overflow:hidden;text-align:left}
.win .bar{display:flex;align-items:center;gap:7px;background:#f4f4f2;border-bottom:1px solid var(--ln);padding:11px 16px}
.win .dot{width:11px;height:11px;border-radius:50%}
.win .url{margin-left:12px;background:#fff;border:1px solid var(--ln);border-radius:7px;font-size:11.5px;color:var(--t3);padding:4px 12px}
.win .body{display:flex;min-height:340px}
.win .body.vid{display:block;min-height:0;background:#0e0e14;line-height:0}
.win .body.vid video{width:100%;height:auto;display:block}
/* Hareketi azalt tercihinde döngü durur; sürekli oynayan bir görüntü bazı
   kullanıcılarda rahatsızlık yaratıyor ve tarayıcı bunu zaten bildiriyor. */
@media (prefers-reduced-motion: reduce){ .win .body.vid video{ display:none } .win .body.vid{ background:url('assets/akilli-yanit-poster.jpg?v=1') center/cover; padding-top:56.25% } }
.win .rail{width:52px;background:#17171c;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:9px}
.win .rail i{color:#9a9aa8;font-size:17px}
.win .rail i.on{color:#b9baf8}
.win .main{flex:1;padding:22px 26px;background:var(--bg)}
.win h4{font-size:17px;font-weight:700;margin-bottom:3px}
.win .ws{font-size:12px;color:var(--t3);margin-bottom:14px}
.aibox{background:#fbfaff;border:1px solid #dedbf7;border-radius:11px;padding:11px 14px;font-size:12.5px;color:var(--t2);margin-bottom:16px;display:flex;gap:9px}
.aibox i{color:var(--ac)}
.wgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.wcard{background:var(--sf);border:1px solid var(--ln);border-radius:11px;padding:12px 13px;font-size:12.5px}
.wcard .h{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--t3);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.wcard .it{background:var(--bg);border:1px solid var(--ln);border-radius:8px;padding:8px 10px;margin-bottom:7px;line-height:1.45}
.tg{display:inline-block;font-size:10px;font-weight:600;border-radius:5px;padding:2px 7px;margin-top:4px}
/* logolar şeridi */
/* Şeridin başlığı: logolardan biraz daha koyu ve büyük ki önce o okunsun,
   logolar da onu kanıtlayan sıra olsun. */
.logos-h{text-align:center;font-size:15.5px;line-height:1.5;color:var(--t2);font-weight:600;
         max-width:46ch;margin:44px auto 0;letter-spacing:-.01em}
.logos{display:flex;gap:28px;justify-content:center;align-items:center;padding:16px 0 8px;color:var(--t3);font-size:13px;flex-wrap:wrap}
.logos b{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--t2)}
.logos i{font-size:18px}
/* MODÜLLER zigzag */
.sec{padding:76px 0}
.sec .head{text-align:center;max-width:640px;margin:0 auto 54px}
h2{font-size:34px;letter-spacing:-.02em;font-weight:800}
.sec .head p{color:var(--t2);font-size:16px;margin-top:12px;line-height:1.6}
.mod{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:34px 0}
.mod:nth-child(even) .txt{order:2}
/* ===== oi asistan bölümü =====
   Asistan modüller listesinden çıkarılıp buraya alındı: altı modülden biri
   olarak durduğunda ürünün en çok kullanılan parçası olduğu anlaşılmıyordu.
   Vurgu "yapay zekâ" değil "SENİN verinle": o olmadan cümle ChatGPT'nin
   cümlesiyle aynı ve fark siliniyor. */
.oia{background:linear-gradient(180deg,#fbfaff,#fff);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.oia .head h2{margin-bottom:8px}
/* Tanıtım filmi.
   ÖLÇÜ: kaynak 1920x1080, yani tam 16:9. Oran sabit veriliyor ki video
   yüklenirken sayfa zıplamasın. Genişlik 1120px'lik sarmalın tamamı DEĞİL,
   880px: tam genişlikte 16:9 bir video 590px yükseklik demek ve bölümün
   geri kalanını ekrandan itiyor. Film zaten ortada duran bir tarayıcı
   penceresi gösteriyor; büyütmek okunurluğu artırmıyor, sadece yer kaplıyor.
   ARKA PLAN beyaz: filmin kendi zemini beyaz, koyu zemin yüklenirken
   siyah bir çerçeve gibi görünüyordu. */
.oia-film{max-width:880px;margin:30px auto 0;border:1px solid var(--ln);border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 18px 46px rgba(20,24,50,.10);position:relative;aspect-ratio:16/9}
.oia-film video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#fff}
.oia-film-alt{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;
  font-size:12.5px;color:var(--t3)}
.oia-film-alt i{font-size:15px}
/* Hareketi azalt diyen kullanıcıya kendiliğinden oynatmıyoruz; JS de bu
   tercihi okuyor, CSS burada yalnızca poster'ı garanti ediyor. */
@media (prefers-reduced-motion: reduce){ .oia-film video{ animation:none } }
.oia-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:34px}
.oia-cik{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.oia-cik span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ln);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--t1)}
.oia-cik i{font-size:16px;color:var(--ac)}
.oia-sor{display:flex;flex-direction:column;gap:9px;margin:0 0 22px}
.oia-sor b{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.oia-sor span{background:#fff;border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:9px;
  padding:11px 14px;font-size:14px;color:var(--t1);line-height:1.5}
.oia-fikir{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:18px 20px;margin-bottom:22px}
.oia-fikir h4{font-size:14.5px;margin:0 0 7px;display:flex;align-items:center;gap:8px}
.oia-fikir h4 i{color:var(--ac);font-size:18px}
.oia-fikir p{font-size:13.5px;color:var(--t2);line-height:1.6;margin:0}
.oia-kars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.oia-kars > div{border-radius:12px;padding:15px 16px;font-size:13.5px;line-height:1.55}
.oia-kars .yok{background:#fff;border:1px solid var(--ln);color:var(--t2)}
.oia-kars .var{background:var(--acs);border:1px solid #dedbf7;color:var(--act)}
.oia-kars b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.oia-kars .yok b{color:var(--t3)}
@media(max-width:900px){.oia-grid{grid-template-columns:1fr;gap:30px}.oia-kars{grid-template-columns:1fr}}
.mod .kick{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:7px;padding:5px 11px;margin-bottom:14px}
.mod h3{font-size:24px;font-weight:750;letter-spacing:-.01em;margin-bottom:12px}
.mod p{color:var(--t2);line-height:1.7;font-size:15px}
.mod ul{list-style:none;margin-top:14px}
.mod li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--t2);margin-bottom:8px;line-height:1.5}
.mod li i{color:var(--gr);margin-top:2px}
.shot{background:var(--sf);border:1px solid var(--ln);border-radius:15px;box-shadow:0 14px 44px rgba(20,20,40,.09);padding:18px;font-size:12.5px}
.shot .t{font-weight:700;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.row{display:flex;gap:9px;align-items:center;background:var(--bg);border:1px solid var(--ln);border-radius:9px;padding:9px 11px;margin-bottom:7px}
.row .av{width:26px;height:26px;border-radius:50%;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.row .b{flex:1;min-width:0}
.row .n{font-weight:600;font-size:12.5px}
.row .s{color:var(--t3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* NASIL ÇALIŞIR */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.step{background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:26px;text-align:left;position:relative}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:14px}
.step h3{font-size:16.5px;font-weight:700;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--t2);line-height:1.6}
/* GÜVEN */
.trust{background:#111116;color:#ececf1;border-radius:22px;padding:56px 48px;margin:20px 0}
.trust h2{color:#fff}
.trust .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.trust .c{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:18px}
.trust .c i{font-size:20px;color:#8f8ff5;margin-bottom:10px;display:block}
.trust .c b{font-size:14px;display:block;margin-bottom:6px}
.trust .c p{font-size:12.5px;color:#a4a4af;line-height:1.55}
/* FİYAT */
/* v1.7.5: Solo kaldırıldı, üç paket kaldı. Dört sütunluk ızgarada üç kart
   yan yana esneyip garip genişliklere ulaşıyordu. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.plan{background:var(--sf);border:1px solid var(--ln);border-radius:15px;padding:22px}
.plan.hot{border-color:var(--ac);box-shadow:0 12px 34px rgba(91,91,214,.14);position:relative}
.plan .tag{font-size:11.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.plan.hot .tag{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(90deg,#5b5bd6,#3b82f6);color:#fff;border-radius:999px;padding:4px 11px;letter-spacing:.04em;box-shadow:0 4px 12px rgba(91,91,214,.28)}
.plan.hot .tag::before{content:"\2605";font-size:10.5px;line-height:1}
.plan h3{font-size:26px;font-weight:800}
.plan h3 span{font-size:13px;font-weight:600;color:var(--t3)}
.plan .minfo{font-size:12px;color:var(--t3,#8a8a9a);margin-top:3px}
.plan .minfo{font-size:12px;color:var(--t3,#8a8a9a);margin-top:3px}
.plan .plus{font-size:12.5px;font-weight:700;color:var(--ac,#5b5bd6);margin:14px 0 2px}
.plan .who{font-size:12.5px;color:var(--t3);margin:5px 0 12px}
.plan .free1{font-size:11.5px;color:var(--grt);background:var(--grs);border-radius:7px;padding:5px 9px;display:inline-flex;gap:5px;align-items:center;margin-bottom:13px}
.plan ul{list-style:none;margin-bottom:16px}
.plan li{font-size:12.5px;color:var(--t2);display:flex;gap:7px;margin-bottom:7px;align-items:flex-start;line-height:1.45}
.plan li i{color:var(--gr);margin-top:1px}
.plan .btn{width:100%;justify-content:center}
.freenote{text-align:center;margin-top:22px;font-size:13px;color:var(--grt);background:var(--grs);display:inline-flex;gap:8px;align-items:center;border-radius:10px;padding:9px 16px}
/* İLETİŞİM */
.contact{background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:46px 40px;text-align:center;max-width:620px;margin:0 auto;box-shadow:0 10px 30px rgba(20,20,40,.05)}
.contact .ic{width:52px;height:52px;border-radius:15px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 18px}
.contact p{color:var(--t2);margin:12px 0 22px;line-height:1.65}
.contact .mail{font-size:17px;font-weight:700;color:var(--act)}
/* CTA + FOOTER */
.cta{text-align:center;padding:80px 0 90px}
.cta p{color:var(--t2);margin:12px 0 26px}
.odeme-logo{display:flex;align-items:center;width:100%;margin-top:8px}
.odeme-logo img{height:26px;width:auto;max-width:100%}
@media (max-width:560px){.odeme-logo img{height:22px}}
/* Fiyat bölümündeki ödeme güvencesi */
.odeme-guven{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:22px}
.odeme-guven img{height:30px;width:auto;max-width:100%}
.odeme-guven span{font-size:12.5px;color:var(--t3,#8a8a9a);line-height:1.6;max-width:560px;text-align:center}
@media (max-width:560px){.odeme-guven img{height:24px}}
.foot{border-top:1px solid var(--ln);padding-top:28px;padding-bottom:28px;display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--t3);flex-wrap:wrap}
/* ---------- MOBİL ---------- */
@media(max-width:900px){
  h1{font-size:clamp(32px,8.5vw,44px)}
  h2{font-size:clamp(24px,6vw,30px)}
  .mod{grid-template-columns:1fr;gap:26px;padding:26px 0}
  .mod:nth-child(even) .txt{order:0}
  .trust .grid,.plans{grid-template-columns:1fr 1fr}
  .wgrid,.steps{grid-template-columns:1fr}
  .sec{padding:56px 0}
  .trust{padding:36px 26px}
}
/* Aynı bilginin telefon ve masaüstü sürümleri. Metni JS ile değiştirmek
   yerine iki span kullanıyoruz: çeviri sistemi ikisini de görüyor. */
.m-only{display:none}
@media(max-width:700px){ .m-only{display:inline} .d-only{display:none} }

/* Dar ekran (telefon): üst alanı üç net bloğa ayır.
   1) vaat  2) eylem  3) ürün. Aradaki boşluklar kasten farklı; göz nerede bir
   bölümün bitip diğerinin başladığını boşluktan anlıyor. */
@media(max-width:620px){
  /* Rozetler paragraftaki üç fiili tekrar ediyordu. Dar ekranda 1+2 diye
     asimetrik sarıyor ve düzeni bozuyordu; masaüstünde duruyorlar. */
  .chips{display:none}
  .hero .in{padding:0 2px}
  h1{font-size:34px;line-height:1.12}
  .sub{max-width:34ch}
  .hero .note{font-size:12px}
  .win{margin-top:30px}
  .logos-h{font-size:14.5px;margin-top:32px;max-width:30ch}
}
/* Anahtar geldikten sonra ölçüldü: marka(117) + anahtar(212) + beş
   bağlantı(325) + TR/EN(71) + iki düğme(169) + boşluklar ≈ 1.100 px.
   Kapsayıcı en fazla 1.120 px olduğu için 1.100 px'in altındaki HER
   masaüstü genişliğinde taşıyordu. Bağlantılar artık burada menüye
   katlanıyor; anahtar, dil ve çağrı düğmesi görünür kalıyor. */
@media(max-width:1180px){
  .nav a.l{display:none}
  .nav-mnu{display:flex}
  .nav .in{gap:14px}
}
@media(max-width:700px){
  .nav a.l{display:none}
  /* Bağlantılar gizlendiği için menü düğmesi tam da burada beliriyor. */
  .nav-mnu{display:flex}
  /* Ölçüldü: 390 px'de marka + dil + düğme + menü tek satıra sığmıyordu ve
     dil kutusu birincil düğmenin altında kalıyordu. Dil seçici çekmeceye
     taşındı; üst çubukta yalnızca marka, birincil düğme ve menü kalıyor. */
  .nav .in > .lang-sw{display:none}
  /* "Giriş yap" çekmeceye taşındı: üst çubukta yalnızca birincil düğme
     kalıyor, böylece marka + dil + düğme + menü tek satıra sığıyor. */
  .nav .cta .btn:not(.primary){display:none}
  .nav .in{height:56px;gap:8px}
  /* Düğme yazısı iki satıra kırılmasın: "Ücretsiz / başla" diye bölününce
     üst çubuk olduğundan çok daha kalabalık görünüyordu. */
  .nav .btn{padding:8px 12px;font-size:12.5px;white-space:nowrap}
  /* v1.7.5: "Giriş yap" artık çekmecede; buradaki sadeleştirme, düğme geri
     gelirse diye duruyor. */
  .nav .cta .btn:not(.primary){border-color:transparent;background:transparent;
     color:var(--t2);padding:8px 4px}
  .lang-sw button{padding:5px 8px;font-size:11px}
  /* v1.43.1 — TELEFONDA ÜST ÇUBUK: anahtar KALIR ama kompaktlaşır.
     Alt açıklamalar ("tek kullanıcı" / "ekipler ve şirketler") burada
     yer kaplamaktan başka iş görmüyor; asıl karar iki kelimede. */
  .gsw-b em{display:none}
  .gsw-b{padding:7px 12px}
  .gsw-b b{font-size:12.5px}
  /* Çağrı düğmesi üst çubuktan kalkıyor: telefonda zaten YAPIŞKAN ALT
     ÇUBUK var ve aynı çağrıyı iki kez göstermek hem gürültü hem de
     üst çubuğu taşırıyordu (ölçüldü: 375 px ekranda sayfa 524 px'e
     çıkıyordu, yatay kaydırma oluşuyordu). */
  .nav .cta{display:none}
  /* Çekmecedeki anahtar kopyası artık gereksiz: üst çubuktaki görünür. */
  .nav-cek .gsw{display:none}
  /* Üst alan sıkılaştırıldı: telefonda ürün görüntüsü ekranın çok altında
     kalıyordu, ziyaretçi kaydırmadan ürünü hiç görmüyordu. */
  .hero{padding:22px 0 18px}
  h1{font-size:30px;line-height:1.14;letter-spacing:-.02em}
  .sub{font-size:15px;line-height:1.55;margin:12px auto 18px;max-width:32ch}
  .ctas{flex-direction:column;gap:8px}
  .ctas .btn{width:100%;max-width:340px;justify-content:center}
  /* İkinci düğme kutudan çıkıp bağlantıya dönüşüyor. İki eşit kutu yan yana
     durunca hangisine basılacağı belirsizleşiyordu. */
  .ctas .btn:not(.primary){border-color:transparent;background:transparent;
     color:var(--t2);padding:4px;font-size:13.5px}
  /* v1.8.3 · DİKEY RİTİM. Ölçülen aralıklar 17 / 8 / 12 / 16 px idi;
     göz düzensizliği "kalabalık" diye okur. Düğmenin altındaki üç blok
     (ikincil bağlantı, not satırı, güven şeridi) artık eşit aralıkla. */
  .hero .note{margin-top:14px;font-size:11.5px}
  .hero .ctas{margin-top:18px}
  .hero .tstrip{margin-top:14px}
  .hero .ctas .btn.lg:not(.primary){margin-top:2px}
  .win{margin-top:22px;border-radius:14px}
  .win .rail{display:none}
  .win .main{padding:16px}
  .win .body{min-height:0}
  .logos{gap:14px 18px;font-size:12px;padding-top:24px}
  .logos>span{width:100%;text-align:center}
  .mod h3{font-size:20px}
  .shot{padding:14px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .trust .grid,.plans{grid-template-columns:1fr}
  .trust{padding:30px 20px;border-radius:16px}
  .plan .free1{margin-bottom:10px}
  .plan{padding:18px}
  .freenote{font-size:12px;padding:9px 12px;text-align:left}
  .contact{padding:32px 20px}
  .cta{padding:56px 0 64px}
  .foot{flex-direction:column;align-items:flex-start;gap:10px}
  .foot span[style*="flex"]{display:none}
}

/* ---------- AUTH MODAL ---------- */
/* Onay kutuları. Kutular bilerek devre dışı: kullanıcı doğrudan tıklayarak
   işaretleyemiyor, yalnızca metni açıp sonuna kadar okuduğunda işaretleniyor.
   Amaç bir engel koymak değil, onayın gerçekten okunmuş bir onay olması. */
/* Satırın tamamı tıklanabilir. Önceki halinde yalnızca küçük bir "Oku"
   bağlantısı tıklanıyordu; kullanıcı doğal olarak kutucuğa basıyor, hiçbir
   şey olmuyor ve neden olmadığını anlamıyordu. Artık nereye basarsa bassın
   metin açılıyor.

   Yerleşim ızgara (grid) ile kuruldu, yan yana esnek kutularla değil.
   Sebebi: bu satır 400 piksellik dar bir pencerenin içinde duruyor. Yan yana
   dizilimde metin ile düğme aynı satırda yarışıyor ve metin harf harf
   sarılacak kadar daralıyordu. Izgarada metin kendi satırında tam genişlikte
   akıyor, düğme altına geçiyor; pencere genişliğinden bağımsız olarak
   bozulmuyor. */
/* v1.18.1: TEK SATIR ONAY. Tarayıcının kendi kutucuğuna güvenmiyoruz —
   Safari'de accent-color + boyut verilen bir checkbox kutuyu çizmeyip ince
   bir çizgi bırakabiliyordu; ekranda iki kırmızı çubuk gibi görünüyordu.
   Kutuyu kendimiz çiziyoruz: her tarayıcıda aynı, dokunma hedefi büyük. */
.onay{display:flex;gap:11px;align-items:flex-start;
      font-size:12.5px;color:var(--t2);line-height:1.55;cursor:pointer;
      padding:12px 14px;border:1px solid var(--ln,#e5e7f0);border-radius:11px;
      background:var(--sf,#fff);transition:border-color .12s,background .12s;text-align:left}
.onay:hover{border-color:var(--ac);background:var(--acs,#f4f3fe)}
.onay input{position:absolute;opacity:0;width:0;height:0}
.onay .onay-kutu{flex:0 0 auto;width:20px;height:20px;border:1.5px solid var(--ln,#c9cbd8);border-radius:6px;
      background:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
      transition:background .12s,border-color .12s}
.onay .onay-kutu i{font-size:14px;color:#fff;opacity:0;transition:opacity .12s}
.onay input:checked ~ .onay-kutu{background:var(--ac,#5b5bd6);border-color:var(--ac,#5b5bd6)}
.onay input:checked ~ .onay-kutu i{opacity:1}
.onay input:focus-visible ~ .onay-kutu{outline:2px solid var(--ac);outline-offset:2px}
.onay .onay-t{min-width:0}
.onay .onay-t a{color:var(--act,#3d3d9e);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.onay.tamam{border-color:#9fe1cb;background:#f4fbf8}
.onay.tamam .onay-t{color:var(--tx,#17171b)}
/* Kilitli düğme. Devre dışı bir düğme tek başına sebebini söylemez, bu yüzden
   hemen altına neyin eksik olduğunu yazan bir satır konuyor. Kilit sessiz
   kalırsa kullanıcı kendi hatasını arar. */
#auth-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.onay-uyari{font-size:12px;color:var(--t3);text-align:center;margin-top:9px;line-height:1.5}
/* Eksik onay bir HATA değil, eksik bir adım: kırmızı korku bandı yerine
   kutucuğu vurgulayıp kısa bir titreşimle dikkat çekiyoruz. */
.onay-w-hata .onay{border-color:var(--ac);background:var(--acs,#f4f3fe);animation:onaySars .32s}
.onay-w-hata .onay .onay-kutu{border-color:var(--ac);box-shadow:0 0 0 3px rgba(91,91,214,.15)}
@keyframes onaySars{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.belge-modal{max-width:680px;display:flex;flex-direction:column;max-height:88vh}
.belge-govde{flex:1;overflow-y:auto;border:1px solid var(--ln);border-radius:12px;padding:16px 18px;margin:12px 0;
             font-size:13.5px;line-height:1.7;color:var(--t2);background:var(--bg);min-height:220px;-webkit-overflow-scrolling:touch}
.belge-govde h1,.belge-govde h2,.belge-govde h3{font-size:14.5px;font-weight:800;color:var(--tx);margin:16px 0 6px}
.belge-govde h1:first-child,.belge-govde h2:first-child{margin-top:0}
.belge-govde p,.belge-govde li{margin-bottom:8px}
.belge-govde ul,.belge-govde ol{padding-left:20px;margin-bottom:8px}
.belge-govde table{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:12.5px}
.belge-govde th,.belge-govde td{border:1px solid var(--ln);padding:6px 8px;text-align:left;vertical-align:top}
.belge-alt{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.belge-ipucu{font-size:12px;color:var(--t3);flex:1;min-width:150px}
.belge-alt .btn.primary:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:560px){ .belge-modal{max-height:94vh;padding:20px 16px} .belge-alt .btn{width:100%;justify-content:center} }
.modal-bg{position:fixed;inset:0;background:rgba(15,15,22,.45);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:18px;padding:26px;width:100%;max-width:400px;position:relative;box-shadow:0 30px 80px rgba(20,20,40,.25);max-height:92vh;overflow-y:auto}
.modal .x{position:absolute;top:14px;right:14px;border:none;background:var(--bg);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--t2);font-size:15px}
.modal .tabs{display:flex;background:var(--bg);border-radius:10px;padding:4px;margin:18px 0 16px}
.modal .tabs button{flex:1;border:none;background:transparent;border-radius:8px;padding:8px;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;font-family:inherit}
.modal .tabs button.on{background:#fff;color:var(--t1);box-shadow:0 1px 4px rgba(20,20,40,.1)}
.modal label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin:10px 0 5px}
.modal input{width:100%;padding:11px 12px;border:1px solid var(--ln);border-radius:10px;font-size:13.5px;font-family:inherit;outline:none;color:var(--t1);background:#fff}
.modal input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
/* İndirim kodu düğmesi. Kesik çerçeve "buraya bir şey ekleyebilirsin" diyor;
   formdaki "+ Üye ekle" ile aynı dili konuşuyor. Düz bir bağlantı olarak
   fark edilmiyordu. */
.kod-btn{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;
  padding:11px 14px;border:1px dashed var(--ln,#e3e3e8);border-radius:10px;background:transparent;
  color:var(--ac,#5b5bd6);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:border-color .13s,background .13s}
.kod-btn:hover{border-color:var(--ac,#5b5bd6);background:var(--acs,#ededfc)}
.kod-btn i{font-size:17px}
.kod-kutu{border:1px solid var(--ln,#e3e3e8);border-radius:10px;padding:12px 14px 14px;background:var(--acs,#ededfc)}
.kod-kutu label{margin-top:0}
.kod-kutu input{text-transform:uppercase;letter-spacing:.06em}
.modal #auth-err{margin-top:12px}
.modal #auth-btn{width:100%;justify-content:center;margin-top:16px}
.modal .soon{display:none;text-align:center;padding:10px 0}
.modal .soon .big{font-size:44px;color:var(--ac);margin-bottom:10px}
.modal .soon h4{font-size:17px;margin-bottom:8px}
.modal .soon p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:18px}

/* SSS akordeon */
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid #e5e4ef;border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:600;font-size:14.5px;color:#1f1f24}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{transition:transform .2s;color:#5b5bd6;flex-shrink:0}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details p{padding:0 18px 16px;font-size:13.5px;line-height:1.7;color:#55555e;margin:0}

.plan ul li.xtra{display:none}
.plan.open ul li.xtra{display:flex}
.pshow{border:0;background:none;color:var(--act,#5b5bd6);font-weight:700;font-size:12.5px;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:5px;font-family:inherit}

.ywrap{overflow:hidden;margin-top:26px}
.ytrack{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none}
.ytrack::-webkit-scrollbar{display:none}
.ycard{flex:0 0 300px;background:var(--card,#fff);border:1px solid var(--line,#e7e7f3);border-radius:16px;padding:20px}
.ycard p{font-size:13.5px;line-height:1.6;color:var(--t2)}
.ycard .who{display:flex;align-items:center;gap:10px;margin-top:13px}
.ycard .who span{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.ycard .who b{font-size:13px}
.ycard .who div div{font-size:11.5px;color:var(--t3)}

.yarr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#e7e7f3);background:var(--card,#fff);color:var(--t2,#555);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 6px 18px rgba(20,24,50,.12);transition:all .15s}
.yarr:hover{color:var(--act,#5b5bd6);border-color:var(--act,#5b5bd6)}
.yarr#yarr-l{left:-8px}
.yarr#yarr-r{right:-8px}
@media(max-width:700px){.yarr{display:none}}

  .g-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
           padding:12px 14px; border:1px solid var(--line,#e3e3e8); border-radius:10px;
           background:#fff; color:#1f1f24; font-size:14px; font-weight:600; font-family:inherit;
           cursor:pointer; transition:background .12s, box-shadow .12s; }
  .g-btn:hover { background:#f7f7fa; box-shadow:0 1px 3px rgba(0,0,0,.08); }
  .g-btn:disabled { opacity:.6; cursor:default; }
  .g-or { display:flex; align-items:center; gap:10px; margin:16px 0 14px;
          font-size:12px; color:var(--t3,#8a8a94); }
  .g-or::before, .g-or::after { content:''; flex:1; height:1px; background:var(--line,#e3e3e8); }

/* ═══════════════════════════════════════════════════════════════════════
   v1.43.0 — SİTE İKİYE AYRILDI: yeni bileşenler
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BİREYSEL / KURUMSAL ANAHTARI ────────────────────────────────────
   Üst çubukta, logonun sağında, menüden ÖNCE. Açılır menü değil segmentli
   düğme: iki seçenek varken açılır menü kararı bir tık geriye atıyor ve
   ikinci seçeneğin varlığını gizliyor.
   <a> etiketi bilerek: yeni sekmede açılabilsin, tarayıcı geçmişi çalışsın,
   arama motoru iki sayfayı da görebilsin. */
.gsw{display:inline-flex;background:var(--sf);border:1.5px solid var(--ln);border-radius:11px;padding:2px;gap:2px;flex:0 0 auto}
.gsw-b{display:flex;flex-direction:column;justify-content:center;line-height:1.15;
  padding:5px 13px;border-radius:9px;color:var(--t2);white-space:nowrap}
.gsw-b b{font-size:13px;font-weight:700}
.gsw-b em{font-style:normal;font-size:10.5px;color:var(--t3);font-weight:500;margin-top:1px}
.gsw-b:hover{color:var(--t1)}
.gsw-b.on{background:var(--ac);color:#fff}
.gsw-b.on em{color:rgba(255,255,255,.8)}
.gsw-b:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── BÖLÜM RİTMİ ─────────────────────────────────────────────────────
   Bugüne kadar her bölüm aynı zemindeydi ve bölümler birbirine karışıyordu.
   Sırayla zemin değişince göz nerede bittiğini görüyor. */
.sec.alt{background:var(--sf);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}

/* ── KAYDIRINCA BELİRME ──────────────────────────────────────────────
   ⚠️ GİZLEME SINIFI JS TARAFINDAN KONUR (.js-belir). Sebebi ders niteliğinde:
   ilk yazımda gizleme doğrudan [data-belir] üstündeydi, yani opacity:0
   VARSAYILANDI. JavaScript çalışmazsa — engellenmişse, CDN düşmüşse,
   IntersectionObserver hiç ateşlenmezse — sayfanın yarısı KALICI OLARAK
   GÖRÜNMEZ kalıyordu. Bir pazarlama sayfası için en kötü hata sınıfı bu:
   sessiz, tam ekran ve kimse fark etmiyor.
   Artık varsayılan GÖRÜNÜR; gizleme yalnız JS "gözcüyü kuruyorum" dediğinde
   devreye giriyor. prefers-reduced-motion'da js/site.js sınıfı hiç koymaz. */
.js-belir [data-belir]{opacity:0;transform:translateY(14px);transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.js-belir [data-belir].belirdi{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js-belir [data-belir]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── GÜN ŞERİDİ (Bireysel: "bir günün oiplan'la nasıl geçer") ────────
   Modül listesi değil GÜN ANLATIMI: bireysel alıcıyı ikna eden şey
   özellik sayısı değil, kendi gününü tanıması. */
.gun{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:26px;position:relative}
.gun::before{content:'';position:absolute;left:6%;right:6%;top:19px;height:2px;background:var(--ln)}
.gun-d{position:relative;padding:0 12px;text-align:center}
.gun-s{display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;
  min-width:74px;height:38px;padding:0 14px;border-radius:999px;background:var(--sf);
  border:1.5px solid var(--ln);font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--act)}
.gun-d.now .gun-s{background:var(--ac);border-color:var(--ac);color:#fff}
.gun-b{font-weight:700;font-size:15px;margin-top:14px}
.gun-p{color:var(--t2);font-size:13.5px;line-height:1.6;margin-top:6px}
.gun-g{margin-top:12px;border:1px solid var(--ln);border-radius:12px;background:var(--sf);
  padding:10px 12px;text-align:left;font-size:12.5px;color:var(--t2);line-height:1.55}
.gun-g b{display:block;color:var(--t1);font-size:12.5px;margin-bottom:3px}
@media(max-width:820px){
  .gun{grid-template-columns:1fr;gap:18px}
  .gun::before{left:26px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .gun-d{display:grid;grid-template-columns:74px 1fr;gap:0 16px;text-align:left;padding:0}
  .gun-s{grid-row:1/3}
  .gun-b{margin-top:8px}
  .gun-g{grid-column:2}
}

/* ── KOLTUK HESAPLAYICI (Kurumsal sayfanın yıldızı) ─────────────────
   Kurumsal alıcının tek somut sorusu "bize kaça patlar". Kütüphane yok,
   saf JS; rakamlar fiyat tablosunun kendisinden geliyor. */
.hesap{border:1.5px solid var(--ln);border-radius:18px;background:var(--sf);padding:22px 24px;max-width:720px;margin:26px auto 0}
.hs-ust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.hs-kisi{display:flex;align-items:center;gap:10px}
.hs-kisi label{font-size:14px;font-weight:600}
.hs-adet{display:inline-flex;align-items:center;border:1.5px solid var(--ln);border-radius:11px;overflow:hidden}
.hs-adet button{border:0;background:var(--sf);color:var(--t1);font-family:inherit;font-size:18px;font-weight:700;
  width:38px;height:38px;cursor:pointer;line-height:1}
.hs-adet button:hover:not(:disabled){background:var(--acs);color:var(--act)}
.hs-adet button:disabled{color:var(--t3);cursor:not-allowed}
.hs-adet input{width:56px;height:38px;border:0;border-left:1px solid var(--ln);border-right:1px solid var(--ln);
  text-align:center;font-family:inherit;font-size:16px;font-weight:800;color:var(--t1);background:var(--sf);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.hs-adet input::-webkit-outer-spin-button,.hs-adet input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hs-adet button:focus-visible,.hs-adet input:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.hs-donem{display:inline-flex;border:1.5px solid var(--ln);border-radius:11px;overflow:hidden}
.hs-donem button{border:0;background:transparent;color:var(--t2);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:9px 16px;cursor:pointer}
.hs-donem button.on{background:var(--ac);color:#fff}
.hs-donem button:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.hs-satirlar{margin-top:20px;border-top:1px solid var(--ln)}
.hs-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--ln);font-size:14.5px}
.hs-r .ad{color:var(--t2)}
.hs-r .ad b{color:var(--t1);font-weight:700}
.hs-r .tut{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-r .tut span{font-size:12.5px;font-weight:600;color:var(--t3);margin-left:2px}
.hs-r.fark{border-bottom:0;padding-top:15px}
.hs-r.fark .ad b{color:var(--grt)}
.hs-r.fark .tut{color:var(--grt);font-size:20px}
.hs-kars{font-size:12.5px;color:var(--t3);margin-top:-6px}
.hs-uyari{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:11px 14px;border-radius:11px;
  background:var(--ams);color:var(--amt);font-size:13px;line-height:1.55}
.hs-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.hs-not{font-size:12px;color:var(--t3);line-height:1.6;margin-top:14px}
@media(max-width:560px){
  .hesap{padding:18px 16px}
  .hs-ust{gap:12px}
  .hs-r .tut{font-size:16px}
}

/* ── MOBİL YAPIŞKAN CTA ──────────────────────────────────────────────
   Yalnız dar ekranda. Hero'daki asıl düğme ya da alt bilgi ekrandayken
   GİZLENİR: yasal bağlantıların üstünü örtmesi kabul edilemez. */
.m-cta{display:none}
@media(max-width:820px){
  .m-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;align-items:center;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,251,250,.96);backdrop-filter:blur(12px);border-top:1px solid var(--ln);
    transform:translateY(0);transition:transform .22s ease}
  .m-cta.gizli{transform:translateY(110%)}
  .m-cta .btn{flex:1;justify-content:center}
  .m-cta .mc-not{font-size:11.5px;color:var(--t3);flex:0 0 auto;max-width:38%;line-height:1.35}
  /* Sayfanın sonu çubuğun altında kalmasın. */
  body.m-cta-var footer{padding-bottom:74px}
}
@media(prefers-reduced-motion: reduce){ .m-cta{transition:none} }

/* ── KURUMSAL: yönetici ekranları ve ilk hafta ───────────────────────── */
.yon-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:24px}
.yon-c{border:1px solid var(--ln);border-radius:16px;background:var(--sf);padding:18px 20px}
.yon-c i{font-size:22px;color:var(--ac)}
.yon-c b{display:block;margin-top:10px;font-size:15px}
.yon-c p{color:var(--t2);font-size:13.5px;line-height:1.6;margin-top:6px}
.hafta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:24px}
.hafta-c{border:1px solid var(--ln);border-radius:14px;background:var(--sf);padding:16px 18px}
.hafta-c .ne{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--act);background:var(--acs);border-radius:7px;padding:4px 9px}
.hafta-c p{color:var(--t2);font-size:13.5px;line-height:1.6;margin-top:10px}
/* Kullanır mı? bölümü: korkuya doğrudan cevap, geçiştirme yok. */
.kul-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.kul-c{border:1px solid var(--ln);border-radius:16px;background:var(--bg);padding:18px 20px}
.kul-c b{display:block;font-size:15px}
.kul-c p{color:var(--t2);font-size:13.5px;line-height:1.65;margin-top:7px}
.kul-c .yok{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--grt);background:var(--grs);border-radius:999px;padding:4px 11px;margin-bottom:10px}

/* ── MODÜL SEKMELERİ (v1.43.0) ───────────────────────────────────────
   Paneller DOM'da kalıyor, yalnız görünürlük değişiyor: arama motoru üç
   modülün metnini de görüyor. */
.md-panel{margin-top:8px}
.md-dahasi{text-align:center;color:var(--t2);font-size:14.5px;line-height:1.65;margin-top:26px}
.md-tum{max-width:760px;margin:14px auto 0;text-align:center}
.md-tum>summary{cursor:pointer;display:inline-flex;align-items:center;gap:7px;list-style:none;
  color:var(--ac);font-weight:600;font-size:13.5px;padding:6px 12px;border-radius:9px}
.md-tum>summary::-webkit-details-marker{display:none}
.md-tum>summary::after{content:'→';transition:transform .18s ease}
.md-tum[open]>summary::after{transform:rotate(90deg)}
.md-tum>summary:hover{background:var(--acs)}
.md-tum>summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.md-tum-ic{text-align:left;margin-top:14px}

/* ── ÇOK DAR EKRAN (v1.43.1) ─────────────────────────────────────────
   375 px ve altında marka + anahtar + menü düğmesi tek satıra ancak
   sığıyor; marka biraz küçülüyor. Ölçüldü, tahmin değil. */
@media(max-width:430px){
  .brand{font-size:17px;gap:8px}
  .brand img{width:36px;height:36px;border-radius:9px}
  .gsw-b{padding:6px 9px}
  .gsw-b b{font-size:11.5px}
  .nav .in{gap:10px}
}

/* ── HESAPLAYICI TUTAR SÜTUNU (v1.43.1) ──────────────────────────────
   Tutar, birimi ve (yıllıkta) aylık karşılığı TEK sütunda, sağa dayalı.
   Önceki yazımda aylık karşılık ayrı bir div'di ve satırın altına sola
   kayıyordu; birim kutuları ise hiç açılmıyordu. */
.hs-r .tut{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hs-r .tut b{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.hs-r .tut .br{font-size:12.5px;font-weight:600;color:var(--t3);margin-top:2px}
.hs-r .tut .kars{font-style:normal;font-size:12px;font-weight:600;color:var(--t3);margin-top:4px;white-space:nowrap}
.hs-r.fark .tut b{color:var(--grt);font-size:20px}
.hs-r.fark .tut .br{color:var(--grt);opacity:.75}

/* ═══════════════════════════════════════════════════════════════════════
   SOHBET BALONU (v1.44.0)
   Sağ altta sabit. Katman sırası bilinçli:
     nav 50 · yapışkan mobil CTA 60 · SOHBET 70 · auth modalı 100 ·
     çerez bandı 9999
   Sohbet mobil CTA'nın ÜSTÜNDE ama modalların ALTINDA: kayıt penceresi
   açıkken balonun onun üstüne binmesi kabul edilemezdi.
   ═══════════════════════════════════════════════════════════════════════ */
.os-kok{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:inherit;pointer-events:none}
.os-kok > *{pointer-events:auto}

/* ── köşe düğmesi ── */
.os-fab{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--ac);color:#fff;
  box-shadow:0 10px 30px rgba(91,91,214,.38);display:flex;align-items:center;justify-content:center;
  font-size:26px;transition:transform .16s ease,background .16s ease}
.os-fab:hover{background:var(--ach);transform:translateY(-2px)}
.os-fab:focus-visible{outline:3px solid var(--act);outline-offset:3px}

/* ── proaktif balon ── */
.os-balon{position:relative;width:320px;max-width:calc(100vw - 40px);background:var(--sf);border:1px solid var(--ln);
  border-radius:18px 18px 6px 18px;box-shadow:0 18px 50px rgba(20,24,50,.18);padding:16px 18px 15px;
  opacity:0;transform:translateY(10px) scale(.98);transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.os-balon.acik{opacity:1;transform:none}
.os-b-ust{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.os-av{width:26px;height:26px;border-radius:8px;overflow:hidden;flex:0 0 auto;display:block}
.os-av img{width:100%;height:100%;object-fit:cover;display:block}
.os-b-kim{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--t3)}
.os-b-soru{font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.os-b-alt{font-size:13px;color:var(--t2);line-height:1.55;margin-top:7px}
.os-b-dug{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.os-evet{flex:1 1 auto;border:0;background:var(--ac);color:#fff;border-radius:10px;padding:10px 14px;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.os-evet:hover{background:var(--ach)}
.os-sonra{border:1px solid var(--ln);background:var(--sf);color:var(--t2);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.os-sonra:hover{color:var(--t1)}
.os-evet:focus-visible,.os-sonra:focus-visible,.os-x:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.os-x{position:absolute;top:8px;right:8px;border:0;background:transparent;color:var(--t3);cursor:pointer;
  font-size:16px;line-height:1;padding:5px;border-radius:8px}
.os-x:hover{background:var(--acs);color:var(--act)}

/* ── form paneli ── */
.os-panel{position:relative;width:340px;max-width:calc(100vw - 40px);max-height:min(76vh,620px);overflow:auto;
  background:var(--sf);border:1px solid var(--ln);border-radius:18px;box-shadow:0 22px 60px rgba(20,24,50,.22);
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease,transform .2s cubic-bezier(.22,1,.36,1)}
.os-panel.acik{opacity:1;transform:none}
.os-p-bas{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--ln);
  position:sticky;top:0;background:var(--sf);border-radius:18px 18px 0 0;z-index:1}
.os-p-bas .os-x{position:static;margin-left:auto}
.os-p-baslik{font-size:14.5px;font-weight:700;line-height:1.3}
.os-p-alt{font-size:12px;color:var(--t3);margin-top:2px}
.os-form{padding:14px 16px 18px;display:flex;flex-direction:column}
.os-form label{font-size:12.5px;font-weight:600;color:var(--t2);margin:10px 0 5px}
.os-form label:first-child{margin-top:0}
.os-form input[type=text],.os-form input[type=email],.os-form input[type=tel]{
  width:100%;padding:10px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--bg);
  font-family:inherit;font-size:14px;color:var(--t1);outline:none}
.os-form input:focus{border-color:var(--ac);background:var(--sf)}
.os-onay{display:flex!important;align-items:flex-start;gap:8px;margin:14px 0 0!important;
  font-size:12px;font-weight:500!important;color:var(--t2);line-height:1.5;cursor:pointer}
.os-onay input{margin-top:2px;flex:0 0 auto;accent-color:var(--ac)}
.os-onay a{color:var(--ac);font-weight:600;text-decoration:underline}
.os-gonder{margin-top:14px;border:0;background:var(--ac);color:#fff;border-radius:11px;padding:12px 16px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.os-gonder:hover:not(:disabled){background:var(--ach)}
.os-gonder:disabled{opacity:.65;cursor:default}
.os-gonder:focus-visible{outline:3px solid var(--act);outline-offset:2px}
.os-not{font-size:11px;color:var(--t3);line-height:1.5;margin-top:10px}
.os-durum{font-size:12.5px;line-height:1.5;border-radius:9px;padding:9px 11px;margin-top:12px}
.os-durum.hata{background:var(--rds);color:var(--rdt)}
.os-durum.bilgi{background:var(--acs);color:var(--act)}
.os-tamam{display:flex;gap:11px;align-items:flex-start;padding:8px 0}
.os-tamam i{font-size:26px;color:var(--gr);flex:0 0 auto}
.os-tamam b{font-size:15px;display:block;margin-bottom:4px}
.os-tamam p{font-size:13.5px;color:var(--t2);line-height:1.6}
/* Tuzak alan: ekranda yok ama ekran okuyucudan da gizlenmiyor değil —
   aria-hidden ile işaretli ve tabindex=-1, klavyeyle de gelinmiyor. */
.os-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── telefon ── */
@media(max-width:820px){
  /* Yapışkan alt CTA çubuğu 60. katmanda ve ~66 px yüksekliğinde;
     sohbet onun ÜSTÜNDE duruyor, üstünü örtmüyor. */
  .os-kok{right:14px;bottom:calc(76px + env(safe-area-inset-bottom));gap:10px}
  .os-fab{width:50px;height:50px;font-size:23px}
  .os-balon{width:min(320px,calc(100vw - 28px))}
  /* Panel açıkken alt sayfa gibi: tam genişlik, altta sabit. */
  .os-panel{position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:88vh;
    border-radius:18px 18px 0 0;transform:translateY(16px)}
  .os-panel.acik{transform:none}
  .os-p-bas{border-radius:18px 18px 0 0}
  /* Panel açıkken hem yapışkan çubuk hem köşe düğmesi kalkar: ikisi de
     panelin üstüne binerdi. */
  body.os-acik .m-cta{display:none}
  body.os-acik .os-fab{display:none}
  body.os-acik{overflow:hidden}
  body.os-acik .os-kok{right:0;bottom:0;left:0;align-items:stretch}
}
@media(prefers-reduced-motion: reduce){
  .os-balon,.os-panel,.os-fab{transition:none!important}
}