main .bg-white{background-color:#121C31!important}
main .bg-gray-50{background-color:#0D1526!important}
main .bg-gray-100{background-color:#16223B!important}
main .text-gray-900,main .text-gray-800{color:#E9EEFA!important}
main .text-gray-700,main .text-gray-600{color:#C7D2EA!important}
main .text-gray-500,main .text-gray-400{color:#94A3C4!important}
main .text-black{color:#E9EEFA!important}
main .border-gray-100,main .border-gray-200,main .border-gray-300{border-color:rgba(148,163,255,.16)!important}
main .divide-gray-100>*,main .divide-gray-200>*{border-color:rgba(148,163,255,.14)!important}
main .shadow-sm,main .shadow,main .shadow-md,main .shadow-lg,main .shadow-xl,main .shadow-2xl{box-shadow:0 16px 40px -20px rgba(0,0,0,.65)!important}
main .ring-black\/5{--tw-ring-color:rgba(148,163,255,.14)!important}
main .prose h1,main .prose h2,main .prose h3,main .prose h4,main .prose strong,main .prose b,main .prose th{color:#E9EEFA!important}
main .prose,main .prose p,main .prose li,main .prose td{color:#C7D2EA!important}
main .prose a{color:#7EA2FF!important}
main .prose blockquote{color:#94A3C4!important;border-color:rgba(148,163,255,.3)!important}
main .prose code{color:#FF9B82!important;background:rgba(255,255,255,.06)!important}

main .max-w-\[var\(--content-max-width\)\] header,main header.mb-12{text-align:left!important}
main header .bg-accent{margin-left:0!important;margin-right:auto!important}
main input[type="text"],main input[type="email"],main input[type="tel"],main textarea,main select{background-color:#0A101F!important;border-color:rgba(148,163,255,.28)!important;color:#E9EEFA!important}
main input:focus,main textarea:focus,main select:focus{border-color:#4F7DFF!important;outline:2px solid rgba(79,125,255,.35);outline-offset:1px}
main input::placeholder,main textarea::placeholder{color:#6E7A94!important}
main article .prose,main .prose p,main .prose li{max-width:68ch}
/* blog kartı beyaz kenarlık → koyu palet (mobil/masaüstü) */
main article.blk-blog-card,main .blk-blog-card{border-color:rgba(148,163,255,.16)!important}
main a[class*="group"]>div,main .rounded-2xl{border-color:rgba(148,163,255,.16)!important}
/* iletişim/blog kartlarının üst aksan çizgisi: köşeye otursun, marka mercanı olsun */
main .bg-accent{background-color:#FF6B4A!important}
main .h-1\.5.w-12{background:linear-gradient(90deg,#7EA2FF,#FF6B4A)!important}
/* ikon kutuları: kahverengi/soluk yerine marka tonları */
main .bg-brand\/10,main .bg-accent\/10{background-color:rgba(79,125,255,.14)!important}
/* 404 rakamı zeminden ayrılsın */

/* ═══ Sayfa başlığı tekleştirme (ana sayfa .ob-head kalıbı) ═══
   PageShell ve BlogListSection ortalanmış kalın-çubuk + ortalanmış başlık basıyordu;
   ana sayfa ise sola dayalı mono-etiket + 26px hairline kullanıyor. Denetim bulgusu:
   "sayfa başına en az 3 farklı eyebrow/H1 kalıbı dolaşıyor". */
main header.mb-12,
main .text-center.mb-12 { text-align: left !important; max-width: 44rem; margin-bottom: 2.4rem !important }
main header.mb-12 > .h-1\.5,
main .text-center.mb-12 > .h-1\.5 {
  width: 26px !important; height: 1px !important; border-radius: 0 !important;
  margin: 0 0 1rem 0 !important; background: #7EA2FF !important;
}
main header.mb-12 > p.uppercase {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: .78rem !important; font-weight: 500 !important; letter-spacing: .14em !important;
  color: #7EA2FF !important; margin-bottom: .85rem !important;
}
main header.mb-12 > h1,
main .text-center.mb-12 > h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; letter-spacing: -.015em !important;
  line-height: 1.14 !important;
}
main header.mb-12 > p:not(.uppercase),
main .text-center.mb-12 > p {
  margin-left: 0 !important; margin-right: auto !important;
  color: #94A3C4 !important; font-size: 1.02rem !important; line-height: 1.7 !important;
}
/* Sayfa üst/alt boşluğu ana sayfa bölüm ritmiyle aynı (4.5rem) */
main.overflow-hidden.py-16 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important }
/* İçerik genişliği: ana sayfa konteyneriyle aynı hat */
main > .relative.z-10.mx-auto { max-width: var(--content-max-width) !important }

/* Sayfa kenar hattı: PageShell padding'i main'deydi (16px dışarıda), ana sayfa
   konteynerinde ise içeride → sayfa başlıkları 80px'te, ana sayfa 96px'te başlıyordu. */
main.overflow-hidden.py-16 { padding-left: 0 !important; padding-right: 0 !important }
main.overflow-hidden.py-16 > .relative.z-10.mx-auto {
  max-width: var(--content-max-width) !important; padding-left: 1rem; padding-right: 1rem;
}
/* Sayfa başlığı ölçeği: 41.6 / 46.4 / 48px savruluyordu → tek ölçek */
main header.mb-12 > h1,
main .text-center.mb-12 > h1 { font-size: clamp(2rem, 3.6vw, 2.9rem) !important }
/* Blog listesinin kendi üst dolgusu sayfa ritminden 2 kat fazlaydı */
main.pt-20 { padding-top: 0 !important }
main.pt-20 > section:first-child, main.pt-20 > .blk:first-child { padding-top: 4.5rem !important }

/* Etiket + hairline yan yana (ana sayfa .ob-kicker kalıbı): PageShell çizgiyi ayrı bir
   blok olarak üste basıyordu, ana sayfada ise etiketin solunda inline duruyor. */
main header.mb-12:has(> p.uppercase) > .h-1\.5 { display: none !important }
main header.mb-12 > p.uppercase { display: inline-flex !important; align-items: center; gap: .6rem }
main header.mb-12 > p.uppercase::before {
  content: ''; width: 26px; height: 1px; background: #7EA2FF; flex: 0 0 auto;
}
/* Kart üst-aksan çizgisi kartın konturuna otursun (inset-x-8 → kenardan 32px içeride
   başlıyordu; kartın yuvarlak köşeleriyle hizasız duruyordu). */
main .absolute.inset-x-8.top-0 { left: 0 !important; right: 0 !important; border-radius: 0 !important }

/* Blog listesi kart kapakları: ham ekran görüntüleri alt kenardan sert kesiliyordu */
main .blk-blog-card .blk-blog-img,
main a[class*="group"] > .relative.h-48 { position: relative }
main .blk-blog-card .blk-blog-img::after,
main a[class*="group"] > .relative.h-48::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(to top, #121C31, transparent); pointer-events: none;
}

/* 02 · Etiketi olmayan sayfa başlıklarında yetim çizgi kalıyordu (blog/gizlilik/künye) */
main header.mb-12:not(:has(> p.uppercase)) > .h-1\.5,
main .text-center.mb-12:not(:has(> p.uppercase)) > .h-1\.5 { display: none !important }

/* 03 · Mobil kenar hattı: header/footer 32px, içerik 18px'ti — tek hat */
@media (max-width: 767px) {
  .ob-nav { padding-left: 0 !important; padding-right: 0 !important }
  .ob-nav-in { padding-left: 1.1rem !important }
  .blk-foot { padding-left: 0 !important; padding-right: 0 !important }
  .blk-foot-inner, .blk-foot-bottom {
    padding-left: 1.1rem !important; padding-right: 1.1rem !important;
  }
}

/* 04 · Tablet için ayrı kompozisyon (masaüstünün daraltılmışı değil) */
@media (min-width: 768px) and (max-width: 1000px) {
  .blk-container { padding-left: 2rem !important; padding-right: 2rem !important }
  .ob-nav-in { padding-right: 2rem !important }
  .ob-nav-cta { display: inline-flex !important; padding: .5rem 1.05rem !important; font-size: .86rem !important }
  .ob-links { gap: .95rem !important; font-size: .86rem !important }
  /* fiyat: Solo+Growth yan yana, Scale altta tam genişlik */
  .ob-plan-g { grid-template-columns: 1fr 1fr !important }
  .ob-plan-g > .ob-pk:last-child { grid-column: span 2 }
  .ob-plan-g > .ob-pk:last-child ul { columns: 2; column-gap: 2rem }
  /* istatistik şeridi 2x2 */
  .ob-rakam-g { grid-template-columns: 1fr 1fr !important; gap: 1.8rem 1rem !important }
  .ob-rk { border-right: 0 !important }
  .ob-rk::after { display: none }
  /* özellik kartlarında görsel ölçeği */
  .ob-bk { grid-template-columns: 1fr .72fr !important }
  .ob-oz-g { grid-template-columns: 1fr 1fr !important }
}

/* 404 rakamı zeminden ayrılsın (önceki değer hâlâ zayıf okunuyordu) */
main .text-8xl { color: rgba(148,163,255,.34) !important }

/* Başlık AĞIRLIĞI tekleştirme — boyut/hiza eşitlenmişti ama blog/iletişim/gizlilik 800,
   ana sayfa 400 kalmıştı; "iki ayrı sistem" izleniminin asıl kaynağı buydu. */
main header.mb-12 > h1,
main .text-center.mb-12 > h1 { font-weight: 400 !important }

/* Blog yazısı okuma ölçüsü: .prose'a max-w-none uygulanıyordu, 68ch ezilmişti (~95 karakter) */
main .prose.max-w-none, main .prose { max-width: 68ch !important }
main .prose img, main .prose figure { max-width: 100% }

/* Footer telif satırı sütun ızgarasından 16px kayıktı (koşullu güncelleme atlanmıştı) */
.blk-foot-bottom { padding-left: 1rem !important; padding-right: 1rem !important }

/* Tablet: paragraf ölçüsü 88-92 karaktere uzuyordu + örnek görselleri soldan kesiliyordu */
@media (min-width: 768px) and (max-width: 1000px) {
  main p, .ob-head p, .ob-orn-head p { max-width: 62ch }
  .ob-ok-img img, .ob-slide img { object-position: left top !important }
  .ob-plan-g > .ob-pk:last-child ul { columns: 2 !important; column-gap: 2.2rem }
}

/* Mobil: menü paneline sınır + gölge (sayfa zeminiyle aynı renkti, kenarı yoktu) */
@media (max-width: 767px) {
  header .md\:hidden.absolute.top-full {
    border-bottom: 1px solid rgba(148,163,255,.18) !important;
    box-shadow: 0 24px 48px -24px rgba(0,0,0,.9) !important;
    background: #121C31 !important;
  }
  /* örnek kartları solda 42px sağda 19px içerideydi → simetrik */
  .ob-orn-g { padding-left: 0 !important; padding-right: 0 !important }
  .ob-orn .blk-container { padding-left: 1.1rem !important; padding-right: 1.1rem !important }
}

/* ─── 4.tur ─── */

/* Yasal sayfalar (gizlilik/kullanım/künye): kart 1248px genişken metin 601px kalıyor,
   kartın sağ yarısı bomboş duruyordu. Kolonu ortala, kartı metne göre daralt. */
main .rounded-2xl:has(> .prose) { position: relative; overflow: hidden }
main .rounded-2xl:has(> .prose)::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, #4F7DFF, #FF6B4A); opacity: .75;
}
main .rounded-2xl > .prose { max-width: none !important }

/* Tablet 768-1023: fiyat ızgarası 2 kolona düşüp 3. kart tek başına yetim kalıyordu */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Kolonlar 182px+356px gibi eşitsiz kalıyordu; flex sütunu kesin tek-kolon veriyor.
     Genişlik bölümün kendi ızgarasıyla aynı — daraltmak başlıkla hizasızlık yaratıyordu. */
  .ob-plan-g { display: flex !important; flex-direction: column !important; gap: 1.15rem }
  .ob-plan-g > * { width: auto !important; max-width: none !important }
}

/* Blog/liste kartlarının kenarlığı neredeyse beyazdı (#E9EEFA), koyu zeminde çerçeve
   içerikten baskın çıkıyordu */
/* Tailwind preflight kenarlık varsayılanı currentColor; koyu temada metin rengi (#E9EEFA)
   kenarlığa taşınıyor ve çerçeve içerikten baskın çıkıyordu. Sınıfla verilmiş bilinçli
   kenarlıklar (border-brand vb.) daha spesifik olduğu için etkilenmez. */
main *, footer *, aside * { border-color: rgba(148,163,255,.18) }

/* Footer sütun etiketleri: site genelinde bölüm etiketleri mono/uppercase,
   footer'da tek başına sans kalmıştı */
footer h3, footer h4 {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  font-size: .72rem !important; letter-spacing: .14em !important;
  text-transform: uppercase; color: var(--color-footer-text) !important;
}

/* ─── 5.tur ─── */

@media (max-width: 767px) {
  /* Örnek kartları: satırda iki kart yan yana kalıyor, ikincisi 2px'e çöküyordu
     (534px yüksekliğinde 2px genişlik). Tek sütuna zorla. */
  .ob-orn-g { display: flex !important; flex-direction: column !important; gap: 1.15rem !important }
  .ob-orn-g > .ob-ok {
    width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important;
  }

  /* Mobil menü paneli sayfa zemininin ta kendisiydi (#0A101F) — menü havada asılı
     duruyor, altındaki hero metni panele karışıyordu. */
  .md\:hidden.absolute.top-full {
    background: #121C31 !important;
    border-bottom: 1px solid rgba(148,163,255,.22) !important;
    box-shadow: 0 28px 60px -28px rgba(0,0,0,.95) !important;
    padding-bottom: .9rem !important;
  }
}

/* ─── 6.tur: hareket katmanı ─── */

/* Hero mockup'ı sayfa açılışında kademeli beliriyor — statik bir ekran görüntüsü
   yerine "üretiliyor" hissi. */
@keyframes ob-beliris { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
.ob-hero .ob-frame { animation: ob-beliris .7s cubic-bezier(.22,.9,.3,1) both; animation-delay: .12s }
.ob-hero .ob-frame-bar { animation: ob-beliris .5s ease both; animation-delay: .3s }

/* Örnek/vitrin kartlarında görsel hover'da hafifçe yaklaşıyor — kartın tıklanabilir
   olduğu hover'dan anlaşılıyor. */
.ob-ok .ob-ok-img, .ob-slide > a, .ob-ok > a { overflow: hidden }
.ob-ok img, .ob-slide img { transition: transform .45s cubic-bezier(.22,.9,.3,1) }
.ob-ok:hover img, .ob-slide:hover img { transform: scale(1.045) }

/* Fiyat kartları da diğer kartlarla aynı hover diline giriyor */
.ob-pk { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease }
.ob-pk:hover { transform: translateY(-4px); border-color: rgba(79,125,255,.45);
               box-shadow: 0 26px 60px -30px rgba(0,0,0,.9) }

@media (prefers-reduced-motion: reduce) {
  .ob-hero .ob-frame, .ob-hero .ob-frame-bar { animation: none !important }
  .ob-ok img, .ob-slide img, .ob-pk { transition: none !important }
  .ob-ok:hover img, .ob-slide:hover img { transform: none !important }
  .ob-pk:hover { transform: none !important }
}

/* ─── 7.tur ─── */
/* Navbar logosu bölüm başlıklarından 16px solda başlıyordu (820px ve 1281px+ genişlikte);
   iki ayrı ızgara varmış gibi okunuyordu. 1024-1280 arasında zaten hizalı. */
@media (min-width: 768px) and (max-width: 1023px) { .ob-nav-in { padding-left: 1rem !important } }
@media (min-width: 1281px) { .ob-nav-in { padding-left: 1rem !important } }

/* ─── 8.tur ─── */
@media (max-width: 767px) {
  /* Menü açıkken arkadaki sayfa aynı parlaklıkta kalıyordu; panelin altındaki hero
     metni menüye karışıyordu. Karartma + panelin zeminden ayrışması. */
  .md\:hidden.fixed.inset-0 {
    background: rgba(3,7,18,.74) !important;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .md\:hidden.absolute.top-full { background: #16223C !important }
}

/* ─── 9.tur: bağımsız denetim bulguları ─── */

/* Fiyat kartlarında madde listeleri farklı uzunlukta olduğu için CTA butonları üç
   kartta üç ayrı yükseklikte duruyordu (60px / 130px / 190px boşluk). Liste esner,
   buton alta oturur. */
.ob-pk { display: flex; flex-direction: column }
.ob-pk ul { flex: 1 1 auto }
.ob-pk > .ob-btn, .ob-pk > a:last-child { margin-top: auto }

/* SSS'te sol akordeon sağdaki yardım kartından ~475px uzun; kart yerinde kalıyor ve
   sağ sütunun altı ölü alan oluyordu. */
@media (min-width: 1024px) {
  .ob-sss-g > :last-child { position: sticky; top: 5.5rem; align-self: start }
}

/* Kart görsellerinin alt kenarı metin satırının ortasından sert kesiliyordu. Fade'i
   incelttiğim turda kesim çıplak kaldı — okunabilirliği bozmayan ama kesimi yutan
   ölçüye çekiyorum. */
.ob-bk-gorsel::after { height: 30% !important;
  background: linear-gradient(to top, #121C31 12%, rgba(18,28,49,.72) 52%, transparent) !important }
.ob-slide::after { height: 46px !important; top: 204px !important;
  background: linear-gradient(to top, #121C31 14%, rgba(18,28,49,.6) 58%, transparent) !important }

/* Karusel altındaki nokta göstergeleri ortalıyken "Tüm Örnekleri Gör" butonu sola
   hizalıydı — aynı kontrol grubunda iki hiza. */
.ob-ray + div { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap }

/* Hakkımızda istatistik bandı: 4 rakam için ~330px yükseklik, üstte 100px altta 165px. */
.ob-rakam { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important }

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablette hiçbir ızgara katmanı tanımlı değildi: her şey ya masaüstü ya mobil
     davranıyor, sayfa gereksiz uzuyordu. */
  .ob-nasil-g, .ob-soz-g, .ob-man-kart { grid-template-columns: repeat(2, minmax(0,1fr)) !important }
  .ob-rakam-g { grid-template-columns: repeat(4, minmax(0,1fr)) !important }
  main .rounded-2xl:has(> .prose) { max-width: none !important }

  /* Kenar boşluğu: yalnız içerik konteynerine dokunuluyor. (Bölüm zeminlerine ve <main>'e
     padding vermek full-bleed şeritleri ve çift-padding regresyonu üretiyordu — denendi,
     geri alındı. Sayfalar arası tam tekleştirme kod tarafında PageShell + AI-container'ın
     ortak ölçeğe bağlanmasıyla yapılmalı.) */
  .blk-container { padding-left: 2rem !important; padding-right: 2rem !important }
  /* navbar: .ob-nav zaten 1rem taşıyor; iç kaba 1rem daha eklenince logo 48'e kaçıyordu */
  .ob-nav-in { padding-left: 1rem !important }
  /* footer sütunları da aynı 32px eksenine (kapsayıcı zaten 1rem taşıyor) */
  footer .blk-foot-inner, footer .blk-foot-bottom {
    padding-left: 1rem !important; padding-right: 1rem !important;
  }
}

/* ─── 10.tur: mobil denetim ─── */

/* Navbar CTA'sı 34px yüksekliğindeydi — sitenin her sayfasındaki en görünür düğme
   dokunma hedefi alt sınırının (44px) altında kalıyordu. */
.ob-nav-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center }

/* Footer bağlantıları 33px adımla diziliydi; üç sütun alt alta inince parmakla yanlış
   bağlantı seçme riski yüksekti. */
footer a { min-height: 44px; display: inline-flex; align-items: center }
footer .blk-foot-bottom a { min-height: 0 }

/* Uzun okuma en sıkışık satır aralığını almıştı: pazarlama metni 1.7, yasal metin 1.53. */
main .prose p, main .prose li { line-height: 1.72 }
main .prose h2 { margin-top: 2.1em }

/* Gradyanlı vurgu kelimesi komşusundan 3 kat sönük kalıyordu (13.8:1 → 4.5:1);
   vurgulanmak istenen kelime en zayıf okunan kelimeydi. Tonlar açıldı. */
.ob-grad, .ob-rk b, .ob-stat b {
  background: linear-gradient(92deg, #A9C2FF 0%, #7EA2FF 42%, #FFA98F 108%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

/* Bölüm içi ikincil düğmeler içeriğe göre 165-217px arasında keyfi genişlikteydi;
   mobilde birincil düğmeler tam genişlikken bunlar yarım kalıyordu. */
@media (max-width: 767px) {
  .ob-btn, .ob-btn-g, .ob-btn-p { min-height: 48px }
  .ob-btn-g { width: 100%; justify-content: center }
  /* Ana sayfa 17 ekran boyu kaydırma gerektiriyordu — bölüm nefesleri mobilde fazlaydı. */
  .ob-oz, .ob-adim, .ob-plan, .ob-sss, .ob-orn, .ob-kredi { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important }
  /* Footer 844px'lik ekranda ~810px yer kaplıyordu; kısa sayfalarda içerikten fazlaydı. */
  footer { padding-top: 2.4rem !important; padding-bottom: 1.6rem !important }
  footer a { min-height: 40px }
}

/* ─── 11.tur ─── */

/* Örnekler: 13. kart span-3 ile tam genişlikteydi; 3'lü ızgaranın ritmini kırıp
   en büyük slotu en zayıf görsele veriyordu. Son satırda ortalanıyor. */
/* (son kartı ortalama kuralı kalktı — CTA kartı ızgaraya girince kart sayısı 14 oldu) */
/* O kartın kapağı geniş letterbox kırpımında boş tavan gösteriyordu. */
.ob-orn-g > :last-child img { object-position: center 22% !important }

/* Hakkımızda'da hero H1'i 1.10, bölüm H2'leri 1.75 satır aralığındaydı — iki satırlık
   başlıklar birbirinden kopuk duruyordu. */
.ob-head h2, .ob-head h1 { line-height: 1.18 }
.ob-head p { margin-top: .85rem }

/* Mobilde kart görselleri sağ kenardan sekme ortasından kesiliyordu. */
@media (max-width: 767px) {
  .ob-bk-gorsel img { object-position: left top !important }
}

/* Fiyat bölümünün SON çağrısı (özel çözümler kartı) diğer kartların tam genişlikteki
   butonlarının yanında 169px'lik zayıf bir bağlantıydı. */
.ob-ozel .ob-btn, .ob-ozel a[class*="btn"] { min-width: 15rem; justify-content: center }

/* ─── 12.tur ─── */
/* /blog'da 3 yazı tek sırada duruyor, sayfanın alt yarısı boş kalıyordu. İlk yazı
   öne çıkan olarak tam genişliğe alınır; ızgara üç yazıda da dolu görünür. */
@media (min-width: 1024px) {
  /* (öne çıkan kart kuralı 6 yazıya çıkınca kaldırıldı — ızgara zaten dolu) */
}

/* ─── 13.tur: kesik içerik + ölü alan ─── */

/* Hero mockup'ın adres çubuğundaki metin kutusu 9px'e sıkışıp taşıyordu; taşan glif
   "çift basılmış 2" gibi okunuyordu (denetimde render artefaktı olarak işaretlendi). */
.ob-frame-url { flex: none !important; width: auto !important; min-width: max-content !important;
                overflow: visible !important; margin-left: .75rem !important }

/* Karusel kenar maskesi %92'de başlıyordu — son kart maskeye girmeden kesiliyor,
   "Denge Fiz|" gibi kelime ortasından bıçak kesiği okunuyordu. */
.ob-ray { -webkit-mask-image: linear-gradient(to right, #000 76%, rgba(0,0,0,.35) 92%, transparent) !important;
          mask-image: linear-gradient(to right, #000 76%, rgba(0,0,0,.35) 92%, transparent) !important }

/* Kart görsellerinin alt kesimi hâlâ okunur harf bırakıyordu ("Katmer" yarım). */
.ob-bk-gorsel::after { height: 42% !important;
  background: linear-gradient(to top, #121C31 18%, rgba(18,28,49,.86) 46%, rgba(18,28,49,.4) 72%, transparent) !important }

/* /blog kartları soldan hizalı akar (ortalanınca sayfada ikinci bir sol kenar oluşuyordu) */
@media (min-width: 1024px) {
  main .flex-wrap.gap-6 { justify-content: flex-start !important }
}

/* Örnekler: son kartın kapağı diğerlerinden %35 uzundu (206 → 281px). Yükseklik sabit,
   kırpma biçimi 14.tur'daki contain kuralına bırakılır. */
.ob-orn-g > .ob-ok img { height: 206px !important }

/* Künye kimlik bloğu: etiket/değer ızgarası — YALNIZ o bloğa. (Önceki hâli tüm prose
   paragraflarının ilk <strong>'una sabit genişlik veriyor, yasal metinleri deliyordu.) */
main .prose .ob-kimlik { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: .55rem 1rem; margin: 0 }
main .prose .ob-kimlik dt { color: #E9EEFA; font-weight: 600 }
main .prose .ob-kimlik dd { margin: 0; color: inherit }
@media (max-width: 640px) {
  main .prose .ob-kimlik { grid-template-columns: 1fr; gap: .2rem 0 }
  main .prose .ob-kimlik dd { margin-bottom: .6rem }
}

/* İletişim: 654px'lik dolu buton 48px'lik alanların yanında orantısız ağırdı. */
form button[type="submit"] { max-width: 18rem; margin-left: auto; margin-right: auto; display: block }

/* Yasal sayfalarda içindekiler listesi çıplak metin olarak duruyordu — yanındaki
   kartla aynı sistemin parçası gibi okunmuyordu. */
main nav[aria-label] > ol { border-left-width: 2px }
main nav[aria-label] a { padding-left: .1rem }
main nav[aria-label] a:hover { border-left-color: #4F7DFF }

/* ─── 14.tur: görsel kırpma · karusel · ızgara hizası ─── */

/* ENGEL 1 — Kapak görselleri site ekran görüntüsü; cover kırpması metni harf ortasından,
   fotoğrafı özne ortasından kesiyordu (13/13 örnek kartı, karusel, blog kapakları).
   contain + marka zemini: görselin tamamı görünür, kesik kelime kalmaz. */
.ob-ok img, .ob-slide img, .ob-mz-k img {
  object-fit: contain !important;
  object-position: center top !important;
  background: #0A101F;
}
.ob-bk-gorsel img { object-fit: contain !important; object-position: center top !important; background: #0A101F }
/* contain sonrası alt fade artık gereksiz — görsel zaten kesilmiyor, fade sadece lekeliyordu */
.ob-bk-gorsel::after { display: none !important }
.ob-slide::after { display: none !important }

/* ENGEL 2 — Karusel: peek kartı yarım kalıyor, görseli yüklenmemiş gibi duruyor,
   13 nokta 7px. Peek kaldırılıp kartlar tam genişlik snap'e alınır. */
.ob-ray { scroll-snap-type: x mandatory }
.ob-ray > * { scroll-snap-align: center }
@media (max-width: 1023px) {
  .ob-ray { -webkit-mask-image: none !important; mask-image: none !important;
            scroll-padding-left: 1rem; gap: 1rem }
  .ob-ray > * { flex: 0 0 100% !important; max-width: 100% !important; scroll-snap-align: start }
}
/* Nokta göstergeleri dokunma hedefi altındaydı (7px) */
.ob-ray + div > * { min-width: 24px; min-height: 24px; display: inline-flex;
                    align-items: center; justify-content: center }

/* ENGEL 3 — Izgara hizası: tablette sayfa içeriği 64px'ten, footer 32px'ten başlıyordu;
   yasal sayfalarda H1 32px'ten, kart gövdesi 64px'ten. */
@media (min-width: 768px) and (max-width: 1023px) {
  footer .blk-container, footer .blk-foot-inner, footer .blk-foot-bottom {
    padding-left: 2rem !important; padding-right: 2rem !important;
  }
  /* Yasal kart içi sağ boşluk sol boşluğun 4 katıydı (32 / 125) */
  main .rounded-2xl > .prose { max-width: none !important }
}

/* Mobil: ikincil/özel kart düğmeleri yarım genişlikte kalıyordu */
@media (max-width: 767px) {
  .ob-ozel .ob-btn, .ob-ozel a[class*="btn"], .ob-orn-cta .ob-btn, .ob-son .ob-btn-g {
    width: 100% !important; max-width: none !important; justify-content: center }
  /* 11px'lik dip notlar okunabilirlik sınırının altındaydı */
  .ob-plan-not, .ob-mz-not, .ob-ozel p, .ob-plan-alt { font-size: .82rem !important }
}

/* Blog eyebrow'u iki satıra kırılıyordu: dekoratif çizgi tek başına bir satırda kalıyordu */
main .text-center > p[class*="uppercase"] { display: inline-flex; align-items: center;
  gap: .55rem; white-space: nowrap }

/* ─── 15.tur ─── */
/* 13 nokta göstergesi mobilde iki satıra sarıyordu (dokunma hedefi için 24px verilmişti).
   Kaydırma zaten birincil etkileşim; noktalar yalnız konum göstergesi — tek satıra alınır. */
@media (max-width: 767px) {
  .ob-ray + div { flex-wrap: nowrap !important; gap: .3rem !important; overflow: hidden }
  .ob-ray + div > * { min-width: 15px !important; min-height: 15px !important }
}

/* ─── 16.tur ─── */
/* Platform sayfalarının başlık bloğu accent-çubuk + ayrı satırda etiket kullanıyordu;
   AI bölümleri ise satır-içi çizgili tek satır kicker. Aynı sitede iki başlık dili
   okunuyordu — platform bloğu AI diline çekilir. */
main header.mb-12 > .bg-accent,
main .text-center.mb-12 > .bg-accent,
main .text-center > .rounded-full.bg-accent { display: none !important }

main header.mb-12 > p[class*="uppercase"],
main .text-center.mb-12 > p[class*="uppercase"] {
  display: inline-flex !important; align-items: center; gap: .55rem; white-space: nowrap;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .72rem;
  letter-spacing: .16em;
}
main header.mb-12 > p[class*="uppercase"]::before,
main .text-center.mb-12 > p[class*="uppercase"]::before {
  content: ''; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, #4F7DFF, #FF6B4A);
}

/* ─── 17.tur ─── */
/* /blog öne çıkan kartı 1248×320 bir şerit; kapak 1200×630 olduğu için contain ile
   iki yanda geniş boş bant kalıyordu. Tipografik kapakların başlığı ortada olduğu
   için bu kartta cover + orta hizalama daha iyi oturuyor. */
@media (min-width: 1024px) {
  main .flex-wrap > a[href*="/blog/"]:first-child img,
  main .flex-wrap > article:first-child img {
    object-fit: cover !important; object-position: center 42% !important;
  }
}

/* ─── 18.tur: letterbox → oran eşitleme ─── */

/* Ölçüm: örnek/karusel/vitrin görselleri 1280×800 (8/5). Kutu 1.37-2.19 arasında
   oynuyordu; contain yanlarda 36-75px bant bırakıyordu. Kutuya görselin oranını
   verince cover ile ne kesim ne bant kalıyor. */
.ob-ok img, .ob-slide img, .ob-mz-k img {
  aspect-ratio: 8 / 5 !important; height: auto !important; width: 100% !important;
  object-fit: cover !important; object-position: center top !important;
}
.ob-orn-g > .ob-ok img { height: auto !important }

/* Blog kapakları 1200×630 (40/21) */
main .flex-wrap img { aspect-ratio: 40 / 21 !important; height: auto !important;
  object-fit: cover !important; object-position: center top !important }
/* Kategori hapı kapağın sol altındaki marka işaretinin üstüne biniyordu */
main .flex-wrap a[href*="/blog/"] span.absolute.bottom-4 { bottom: auto !important; top: 1rem !important }

/* Özellik kartlarındaki görsel dikey bir telefon ekran görüntüsü (840×1800). Yanlardaki
   alan kaçınılmaz; boş koyu dikdörtgen yerine sahne gibi görünsün. */
.ob-bk-gorsel {
  background: radial-gradient(circle at 50% 28%, rgba(79,125,255,.20), transparent 62%), #0A101F !important;
}
.ob-bk-gorsel img { object-fit: contain !important; object-position: center top !important;
  padding: .5rem .5rem 0 !important }

/* ─── 19.tur ─── */
/* Özellik kartlarındaki telefon ekran görüntüsü (840×1800) yatay bir kutuda duruyordu:
   görsel küçük kalıyor, yanlarda geniş alan açılıyordu. Kutu dikeye yaklaşınca görsel
   büyüyor ve içindeki ekran okunur hâle geliyor. */
@media (max-width: 767px) {
  .ob-bk-gorsel { aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important }
  .ob-bk-gorsel img { padding: 1rem 1rem 0 !important }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ob-bk-gorsel { aspect-ratio: 3 / 4 !important; height: auto !important }
}

/* ─── 20.tur: etkileşim katmanı ─── */
.ob-filtre-sar{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin:0 0 1.6rem}
.ob-filtre{display:flex;flex-wrap:wrap;gap:.5rem}
.ob-filtre-c{appearance:none;border:1px solid rgba(148,163,255,.20);background:rgba(148,163,255,.06);
  color:#B9C4DE;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.76rem;letter-spacing:.04em;
  padding:.5rem .9rem;border-radius:999px;cursor:pointer;transition:border-color .18s,color .18s,background .18s;
  min-height:38px;line-height:1}
.ob-filtre-c:hover{border-color:rgba(79,125,255,.5);color:#E9EEFA}
.ob-filtre-c.aktif{background:linear-gradient(92deg,rgba(79,125,255,.22),rgba(255,107,74,.14));
  border-color:rgba(79,125,255,.55);color:#E9EEFA}
.ob-filtre-c:focus-visible{outline:2px solid #7EA2FF;outline-offset:2px}
.ob-filtre-sayac{font-family:ui-monospace,monospace;font-size:.78rem;color:#7E8CAB;white-space:nowrap}
.ob-ray-sayac{font-family:ui-monospace,monospace;font-size:.8rem;color:#8A97B8;text-align:center;margin:.9rem 0 -.2rem}
@media (max-width:767px){
  .ob-filtre{gap:.4rem}
  .ob-filtre-c{font-size:.72rem;padding:.45rem .75rem;min-height:36px}
  .ob-filtre-sar{margin-bottom:1.2rem}
}
@media (prefers-reduced-motion:reduce){.ob-filtre-c{transition:none}}

/* ─── 21.tur: aktif sayfa göstergesi ─── */
.ob-links a.ob-aktif { color: #FFFFFF !important; position: relative }
.ob-links a.ob-aktif::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.55rem; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #4F7DFF, #FF6B4A);
}

/* ─── 23.tur ─── */
/* PageShell'in kenar boşluğu daha önceki bir turda main'den iç kaba taşınmıştı
   (masaüstü hizası için). Bu yüzden PageShell'e eklenen md:px-8 etkisiz kalıyor ve
   platform sayfaları tablette 16px'te başlıyordu. Düzeltme aynı kuralın üstüne. */
@media (min-width: 768px) and (max-width: 1023px) {
  main.overflow-hidden.py-16 > .relative.z-10.mx-auto {
    padding-left: 2rem !important; padding-right: 2rem !important;
  }
}

/* ─── 24.tur: zebra düzeni · bölüm nefesi · footer satır adımı ─── */

/* 1) ZEBRA — ölçüm: ana sayfada vitrin→panel→plan ÜÇÜ de #0D1526, kredi→sss ikisi de
   #0A101F; hakkımızda'da mz→nasil ikisi aynı. Bölümler renkle ayrışmıyordu. */
.ob-panel { background: #0A101F !important }
.ob-sss   { background: #0D1526 !important }
.ob-blog  { background: #0A101F !important }
.ob-son   { background: #0D1526 !important }
.ob-nasil { background: #0D1526 !important }
.ob-soz   { background: #0A101F !important }

/* 2) BÖLÜM NEFESİ — 40/48/54/72/80 arasında dolaşıyordu; tek ölçeğe iniyor.
   Zebra artık ayrımı taşıdığı için 72+72=144px'lik komşu boşluğuna gerek yok. */
.ob-surec, .ob-oz, .ob-vitrin, .ob-panel, .ob-plan, .ob-kredi, .ob-sss, .ob-blog,
.ob-son, .ob-man, .ob-mz, .ob-nasil, .ob-soz, .ob-orn {
  padding-top: 4rem !important; padding-bottom: 4rem !important;
}
/* istatistik şeridi bilinçli olarak dar */
.ob-rakam { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important }

@media (min-width: 768px) and (max-width: 1023px) {
  .ob-surec, .ob-oz, .ob-vitrin, .ob-panel, .ob-plan, .ob-kredi, .ob-sss, .ob-blog,
  .ob-son, .ob-man, .ob-mz, .ob-nasil, .ob-soz, .ob-orn {
    padding-top: 3.5rem !important; padding-bottom: 3.5rem !important;
  }
}
@media (max-width: 767px) {
  .ob-surec, .ob-oz, .ob-vitrin, .ob-panel, .ob-plan, .ob-kredi, .ob-sss, .ob-blog,
  .ob-son, .ob-man, .ob-mz, .ob-nasil, .ob-soz, .ob-orn {
    padding-top: 2.75rem !important; padding-bottom: 2.75rem !important;
  }
  .ob-rakam { padding-top: 2rem !important; padding-bottom: 2rem !important }
}

/* 3) FOOTER SATIR ADIMI — dokunma hedefi için verilen 44px min-height masaüstünde de
   uygulanıyordu: 14px'lik bağlantılar 55px adımla diziliyordu. Fare olan yerde gereksiz. */
@media (min-width: 1024px) {
  footer a { min-height: 0 !important }
  footer .blk-foot-col a { padding-top: .18rem; padding-bottom: .18rem }
}

/* ─── 25.tur: kapanış → footer geçişi ─── */
/* Ölçüm: kapanış bölümünün alt boşluğu (64) + footer'ın iç üst boşluğu (64) üst üste
   binip son çağrı ile footer arasında ~130px'lik ölü bant bırakıyordu; ekranda daha da
   büyük duruyor çünkü ikisinin zemini birbirine yakın. */
.ob-son { padding-bottom: 3rem !important }
footer .blk-foot { padding-top: 3rem !important }
@media (max-width: 767px) {
  .ob-son { padding-bottom: 2.25rem !important }
  footer .blk-foot { padding-top: 2.25rem !important }
}

/* b324 */ body .blk .ob-btn-p,body .blk .ob-nav-cta{background:#3A66F0}
/* b227 */ @media (min-width:768px) and (max-width:900px){.ob-nav-in{gap:1rem!important;padding-right:1rem!important}.ob-links{gap:.7rem!important}.ob-links a{font-size:.85rem!important}.ob-nav-sag{gap:.6rem!important}.ob-nav-giris{margin-right:0!important}}
/* b326 */ body .blk .ob-plan-dip{opacity:1} body .blk .ob-plan-dip a.ob-btn-p{color:#fff}