/* ===========================================================================
   rev2.css — 27 Temmuz 2026 toplantı revizyonu
   ---------------------------------------------------------------------------
   main.css  → Toserof'un özgün tasarımı
   penta.css → Penta'dan devralınan tipografi / ritim / renk
   rev2.css  → müşteri toplantısından çıkan düzeltmeler (bu dosya)

   Kurallar (YAPILACAKLAR.md § 0):
     K1  sağda solda ölü alan yok, bölümler boydan boya
     K2  hiçbir yer "uzay boşluğu" gibi boş kalmayacak
     K3  bölüm dikişi görünmeyecek, sayfa tek akış gibi olacak
     K4  animasyonlar scroll'a bağlı, buton hover'sız kalmayacak
     K5  Penta'nın türevi, kopyası değil
     K6  "Toserof" yazıyla değil, logoyla
   =========================================================================== */

/* full-bleed hesabı kaydırma çubuğuna takılmasın */
html { overflow-x: clip; }
body { overflow-x: clip; }

:root {
  /* K2 — Penta'nın nefesi korunuyor ama boş ekran bırakacak kadar değil */
  --section: clamp(72px, 8.2vw, 140px);
}

/* ---------------------------------------------------------------------------
   K1 — boydan boya
   --------------------------------------------------------------------------- */
.bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* içerik hizası korunsun diye bleed'in içindeki sarmalayıcı */
.bleed-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* açık "ferah" bant artık yüzen kart değil, boydan boya bir bant.
   Yuvarlak köşe + yan boşluk = müşterinin şikâyet ettiği ölü alan. */
.section-light, .pd-light {
  margin-inline: 0;
  margin-block: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
/* K3 — açık bandın koyu zeminle birleştiği yerler sert çizgi olmasın:
   hem üstte hem altta yumuşak geçiş */
.section-light::after, .pd-light::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(60px, 7vw, 120px);
  background: linear-gradient(to bottom, rgba(244,240,251,0), rgba(233,226,245,1));
  pointer-events: none;
  z-index: 0;
}
.section-light::before, .pd-light::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(60px, 7vw, 120px);
  background: linear-gradient(to top, rgba(244,240,251,0), rgba(244,240,251,1));
  pointer-events: none;
  z-index: 0;
}
.section-light, .pd-light {
  padding-block: clamp(64px, 7.5vw, 128px);
}

/* şeritler ve tablolar ekranın tamamını kullansın */
.bp-grid-outer,
.kinetic-band { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
/* Yalnızca kontur çizilen kelimeler (.6px / %32 alfa) okunmuyordu: içleri
   yarı saydam dolduruldu, kontur biraz güçlendirildi. Dolu ve gradyanlı
   kelimelerle arasındaki hiyerarşi korunuyor. */
.kinetic-track span {
  color: rgba(255,255,255,.3);
  -webkit-text-stroke: .8px rgba(232,234,245,.62);
}
.kinetic-track span.fill { color: var(--text); -webkit-text-stroke: 0; }
.kinetic-track span.grad { -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; }

/* kelimelerin arasında daire görseller (nokta ayraçların yerine) */
.kinetic-track .kin-shot {
  flex: 0 0 auto;
  display: block;
  width: clamp(34px, 3.2vw, 48px); height: clamp(34px, 3.2vw, 48px);
  margin-inline: clamp(12px, 1.1vw, 20px);
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.95);
  -webkit-text-stroke: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s;
}
.kinetic-track .kin-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kinetic-band:hover .kin-shot { border-color: rgba(255,255,255,.32); }

/* --- şeritten yukarı/aşağı saçılan kıvılcımlar ------------------------------
   Sayfa kaydırıldıkça JS (initKineticSparks) parçacık ekliyor; her parçacık
   kendi CSS animasyonunu bitirince kendini siliyor. Şeridin kendisi
   `overflow:hidden` olduğu için katman bandın DIŞINDA, sarmalayıcıda duruyor. */
.kinetic-wrap { position: relative; }
.kin-sparks {
  position: absolute; left: 0; right: 0; top: -150px; bottom: -150px;
  z-index: 4; pointer-events: none; overflow: hidden;
}
/* Parçacık (yuvarlak nokta) değil KIVILCIM: uçan, arkasında iz bırakan ince
   çizgi. Baş kısmı parlak, kuyruğu sönük; kendi ekseninde ilerliyor. */
.kin-sparks i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w); height: var(--l);
  margin-left: calc(var(--w) / -2);
  border-radius: 999px;
  /* üstte parlak baş, aşağı doğru sönen kuyruk */
  background: linear-gradient(180deg, #fff 0%, var(--c) 26%, transparent 100%);
  filter: drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 12px var(--c));
  transform-origin: 50% 0;
  opacity: 0;
  animation: kinSpark var(--d) cubic-bezier(.12,.72,.24,1) forwards;
}
/* rotate → kıvılcım kendi yönünde uçar (0deg yukarı, 180deg aşağı),
   translateY ile o eksende ilerler; sonda uzayıp söner */
@keyframes kinSpark {
  0%   { transform: rotate(var(--rot)) translateY(0) scaleY(.45); opacity: 0; }
  10%  { opacity: 1; }
  46%  { opacity: .6; }
  58%  { opacity: 1; }
  100% { transform: rotate(var(--rot)) translateY(calc(var(--dist) * -1)) scaleY(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kin-sparks { display: none; } }
.bp-grid-outer { padding-inline: var(--pad-x); }

/* Logo şeridi artık kendi kendine akan bir marquee değil, ürün şeridiyle aynı
   düzenek: `.hrail` / `.hrail-track` üstüne birkaç ölçü farkı. */
/* Boydan boya değil, çerçeve içinde: container genişliğinde, kenarlıklı ve
   yuvarlatılmış bir kutu. Kartlar çerçevenin altına girerek kayıyor, bu yüzden
   kenar maskesi yok — kesim çerçevenin kendisi. */
.trusted-rail {
  padding: 20px 0;
  border: 1px solid var(--border);
  border-radius: clamp(16px, 1.6vw, 26px);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.005));
  box-shadow: 0 30px 70px -46px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-mask: none; mask: none;
}
.trusted-track { align-items: center; }
.trusted-prog { margin-top: 18px; width: min(360px, 34vw); }

/* ---------------------------------------------------------------------------
   K2 — ölü alanların kapatılması
   --------------------------------------------------------------------------- */
.section-head { margin-bottom: clamp(36px, 4.2vw, 68px); gap: 18px; }

/* statement: tam ekran boyu boş bir bölüm değil, dolu bir bölüm */
.statement { min-height: 0; padding-block: clamp(80px, 9.5vw, 152px); }

/* referans ızgarasının altındaki üst üste binen boşluklar */
.prefs { padding-bottom: clamp(30px, 4vw, 64px); }
.prefs > .pref:nth-child(2n+1) { transform: translateY(clamp(32px, 4.4vw, 72px)); }

/* alıntı kartı: 90px'e varan dikey iç boşluk kartın altında ölü alan bırakıyordu */
.quote-card { padding-block: clamp(30px, 3.6vw, 56px); margin-top: 20px; }
.quote-card cite { margin-top: 10px; }
/* CTA'dan sonra bölümün alt boşluğu kısaltılsın */
.section.tight-bottom { padding-bottom: clamp(26px, 3vw, 52px); }

/* hizmet planı tablosunun üstündeki ~350px'lik boşluk */
.bp-sec { padding-top: clamp(56px, 6vw, 104px); }
.bp-stats { margin: 0 0 clamp(28px, 3.4vw, 48px); }

/* iki bölüm arası ikinci kez padding almasın */
.section + .section { padding-top: var(--section); }
/* slogan bölümü zaten kendi nefesini alıyor — altındaki bölüm ikinci kez almasın */
.statement + .section { padding-top: clamp(36px, 4vw, 68px); }

/* ---------------------------------------------------------------------------
   K3 — dikişsiz geçişler
   --------------------------------------------------------------------------- */
/* hero'nun altındaki sert renk sınırı (toplantıda "şurada tam bir çizgi var") */
.hero-has-video::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(140px, 20vh, 300px);
  background: linear-gradient(to bottom, rgba(9,11,16,0) 0%, rgba(9,11,16,.55) 45%, #090B10 100%);
  z-index: 1;
  pointer-events: none;
}
/* hero metni bu perdenin üstünde kalsın */
.hero-has-video > .container { z-index: 3; }
.hero-scroll { z-index: 3; }

/* statement hero'yla aynı siyahtan başlasın, sonra mor akışa geçsin */
.statement {
  position: relative;
  background: linear-gradient(180deg, #090B10 0%, rgba(9,11,16,0) 42%);
}

/* bölüm sınırlarındaki çizgiler yumuşasın */
.sec-divider { opacity: .35; }

/* ---------------------------------------------------------------------------
   K2 — arka planı boş bırakma: yavaşça yanıp sönen ışık kürecikleri
   (toplantı: "kendi kendine yanıyor, sönüyor")
   --------------------------------------------------------------------------- */
.orbfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orbfield i {
  position: absolute;
  width: var(--s, 320px); height: var(--s, 320px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c, rgba(108,53,178,.5)), transparent 68%);
  filter: blur(60px);
  opacity: 0;
  animation: orbBreathe var(--d, 11s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes orbBreathe {
  0%, 100% { opacity: 0; transform: scale(.86); }
  45%      { opacity: .5; transform: scale(1.06); }
}
.section, .statement { position: relative; }
.section > .container, .statement > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Dünya Çapında Toserof — dönen nokta küresi
   (toplantı: "dünya haritası tarzı", "3D şeyler", "boş kalan yer olmasın")
   Penta düz bir harita kullanıyor; biz kürenin üstünde gerçek ofis
   koordinatları ve aralarında akan hatlarla türev bir şey yapıyoruz. (K5)
   --------------------------------------------------------------------------- */
.globe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}
.globe-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 54px) clamp(20px, 3vw, 56px);
}
.globe-stats .num { font-size: clamp(38px, 4.6vw, 76px); }
.globe-stats .stat-label { font-size: 14.5px; margin-top: 6px; }

.globe-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.globe-canvas { width: 100%; height: 100%; display: block; }
.globe-halo {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(108,53,178,.28), transparent 62%);
  filter: blur(38px);
  pointer-events: none;
  z-index: -1;
}
.globe-pins { position: absolute; inset: 0; pointer-events: none; }
.globe-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px;
  border-radius: 999px;
  background: rgba(15,18,28,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,.9);
  white-space: nowrap;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.8);
  transition: opacity .4s ease;
}
.globe-pin i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pc, var(--lilac));
  box-shadow: 0 0 0 0 var(--pc, var(--lilac));
  animation: pinPing 2.6s ease-out infinite;
}
@keyframes pinPing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 70%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 980px) {
  .globe-grid { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 52px); }
  .globe-wrap { max-width: 460px; order: -1; }
}
@media (max-width: 520px) {
  .globe-stats { gap: 24px 18px; }
  .globe-pin { font-size: 11.5px; padding: 5px 11px 5px 7px; }
}

/* ---------------------------------------------------------------------------
   Uçtan Uca Süreç Yönetimi tablosu
   Toplantı: "o tabloyu bütünsel yap, böyle ayrı ayrı gibi değil" + "biraz daha
   büyütebilirsin". Altı ayrı kart → hairline ile bölünmüş tek tablo.
   --------------------------------------------------------------------------- */
.bp-grid {
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: clamp(18px, 1.8vw, 26px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.bp-col {
  border: 0;
  border-radius: 0;
  background: none;
  border-right: 1px solid var(--border);
  transition: background .35s ease;
}
.bp-col:last-child { border-right: 0; }
.bp-col:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--bp-color, var(--primary)) 5%, transparent);
}
.bp-col-h { padding: 30px 20px 22px; }
.bp-col-h::before { height: 2px; }
.bp-ch-title { font-size: 18px; }
.bp-i-label { font-size: 14.5px; }
.bp-item { padding-block: 12px; }
/* tablo ekranın yarısına kadar büyüsün */
.bp-grid-outer { padding-block: 4px 20px; }

/* Revize (28 Tem): bölüm ekranın soluna yapışmıştı — başlık ~56px'de başlıyor,
   tablo ise 4px ile tam kenara dayanıyordu. Bu bölüme özel, daha geniş bir kenar
   boşluğu tanımlanıyor; `.container` zaten `--pad-x` kullandığı için başlık,
   istatistik şeridi ve tablo aynı hizada içeri çekiliyor.
   Bölüm hâlâ boydan boya (K1) — sadece içerik nefes alıyor. */
.bp-sec { --pad-x: clamp(20px, 3vw, 56px); }
/* Tablo 100vw genişliğinde (full-bleed). Başlıkla aynı çizgide başlaması için
   `--pad-x`e ek olarak container'ın kenarda bıraktığı payı da alıyor. */
/* Tablo `100vw` genişliğinde (full-bleed). Eskiden container sabit 1680px'ti ve
   başlıkla hizalanması için container'ın kenarda bıraktığı pay ekleniyordu.
   Container artık ekranla tam genişlikte (`min(100%, 3000px)`), dolayısıyla o
   formül `2 × --pad-x` kadar fazladan boşluk üretiyordu — tablo sağdan soldan
   gereksiz içeri kaçıyordu. Artık sadece kenar payı kadar içeride. */
.bp-sec .bp-grid-outer { padding-inline: var(--pad-x); }

/* ---------------------------------------------------------------------------
   Kendi ürünlerimiz — öne çıkan panel + boydan boya hairline ızgara
   --------------------------------------------------------------------------- */
.prod-feature {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 56px);
  border: 1px solid var(--border-strong);
  border-radius: clamp(20px, 2.2vw, 32px);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pc) 20%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
  transition: border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
  margin-bottom: clamp(28px, 3.4vw, 56px);
}
.prod-feature:hover { border-color: color-mix(in srgb, var(--pc) 50%, transparent); transform: translateY(-4px); }
.pfe-num {
  font-family: var(--font-head); font-size: 13px; font-weight: 500;
  letter-spacing: .16em; color: var(--muted-2);
}
.pfe-copy h3 { margin-top: 14px; font-size: clamp(26px, 3vw, 44px); font-weight: 400; letter-spacing: -.025em; }
.pfe-copy p { margin-top: 16px; color: var(--muted); font-weight: 300; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.65; }
.pfe-copy .pbox-link { margin-top: 26px; display: inline-flex; align-items: center; gap: 9px; color: var(--lilac); font-size: 15px; }
.pfe-shot {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  box-shadow: 0 46px 96px -46px rgba(0,0,0,.9);
}

/* ---------------------------------------------------------------------------
   Ürün ızgarası — boydan boya, tek parça hairline (K1)
   Not (28 Tem): burası bir ara imleçle sürülen yatay şeride çevrilmişti;
   logo şeridi de aynı düzeneğe geçince iki şerit üst üste geldi ve Emre
   burayı eski ızgarasına döndürdü. Şerit düzeneği artık yalnızca logo
   şeridinde (`.hrail`, initHoverRail).
   --------------------------------------------------------------------------- */
.prod-grid {
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.prod-cell {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  min-height: clamp(240px, 22vw, 330px);
  padding: clamp(26px, 2.6vw, 42px) clamp(22px, 2.2vw, 38px);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background .5s ease;
}
.prod-cell:nth-child(3n) { border-right: 0; }
.prod-cell:nth-last-child(-n+3) { border-bottom: 0; }
/* gerçek ürün görseli arka planda, hover'da belirir */
.pc-shot { position: absolute; inset: 0; z-index: 0; opacity: .22; transition: opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.pc-shot img { width: 100%; height: 100%; object-fit: cover; }
.pc-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,11,16,.72) 0%, rgba(9,11,16,.9) 100%);
}
.prod-cell:hover .pc-shot { opacity: .48; transform: scale(1.05); }
.prod-cell:hover { background: color-mix(in srgb, var(--pc) 7%, transparent); }
.pc-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.pc-ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: rgba(255,255,255,.78);
  transition: border-color .45s, color .45s, transform .45s cubic-bezier(.16,1,.3,1);
}
.pc-ico svg { width: 21px; height: 21px; }
.prod-cell:hover .pc-ico { border-color: var(--pc); color: var(--pc); transform: translateY(-3px); }
.pc-num { font-family: var(--font-head); font-size: 12.5px; letter-spacing: .16em; color: var(--muted-2); }
.pc-body { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.pc-body b { font-size: clamp(18px, 1.7vw, 25px); font-weight: 400; letter-spacing: -.02em; color: #fff; }
.pc-body em { font-style: normal; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--muted); }
.pc-go {
  position: absolute; z-index: 1; right: clamp(22px, 2.2vw, 38px); bottom: clamp(26px, 2.6vw, 42px);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: rgba(255,255,255,.7);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .4s, transform .4s cubic-bezier(.16,1,.3,1), background .4s, border-color .4s;
}
.pc-go svg { width: 14px; height: 14px; }
.prod-cell:hover .pc-go {
  opacity: 1; transform: none;
  border-color: var(--pc); color: #fff;
  background: color-mix(in srgb, var(--pc) 55%, transparent);
}

/* ---------------------------------------------------------------------------
   Yatay şerit — kendi kendine akmaz, imleç konumuna göre kayar (Penta ref.)
   Gerçek bir yatay kaydırma alanı; sonsuz döngü için içerik JS'te klonlanıyor.
   Şu an "En İyiler ▸ Tercih Ediyor" logo şeridi kullanıyor.
   --------------------------------------------------------------------------- */
.hrail {
  position: relative; z-index: 1;
  overflow-x: auto; overflow-y: hidden;
  /* Masaüstünde yatay kaydırma şeritte kalsın, sayfa yana kaymasın.
     MOBİLDE KAPALI (29 Tem): iOS'ta geri gitme, ekranın solundan içeri
     kaydırmayla yapılıyor; parmak bir şeridin üstündeyken `contain` o hareketi
     yutuyor ve geri çıkılamıyordu. Dokunmatikte şeridi ok düğmeleri sürüyor,
     `contain`e gerek yok. */
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.hrail::-webkit-scrollbar { display: none; }
.hrail-track {
  display: flex;
  width: max-content;
  gap: clamp(14px, 1.4vw, 26px);
  padding-inline: clamp(14px, 1.4vw, 26px);
}

/* Ürünler → "En İyiler ▸ Tercih Ediyor" geçişi (K3, 28 Tem)
   Ürünler bölümü opak zeminli (slogan'ın üzerine bindiği için); alttaki
   bölümün mor ortam ışığı tam bu kenarda kesiliyor ve düz bir çizgi
   oluşuyordu. Bölümün altına, aynı moru yukarı doğru söndüren bir perde
   koyuluyor — renk kademeli geçiyor, dikiş kalmıyor.
   Seçici `#urunlerimiz`: `.section:has(> .orbfield)::after { display:none }`
   kuralını aşmak için özgüllük gerekiyor. */
/* Not (28 Tem): buraya bir mor perde konmuştu; bölümün alt kenarında birden
   bitiyordu ve tam o noktada ~2 birimlik keskin bir renk basamağı bırakıyordu
   (ölçüldü: üstte 11,12,20 → altta 9,11,15). Perde kaldırıldı — iki taraf da
   düz #090B10, dikiş tamamen kayboldu. Renk geçişi aşağıdaki `.trusted`
   sönümlemesiyle sağlanıyor. */

/* Asıl dikişin sebebi: sayfanın arkasındaki sabit `\.aurora-bg` katmanı (mor/mavi
   dev küreler) ürünler bölümünün opak zemini tarafından tam bu kenarda kesiliyor.
   Çözüm: alttaki bölüm de kendi tepesinde opak başlasın ve aşağı indikçe
   şeffaflaşsın — aurora kademeli açılır, iki tarafta da renk aynı olur. */
.trusted {
  background: linear-gradient(180deg,
              #090B10 0%,
              rgba(9,11,16,.94) 22%,
              rgba(9,11,16,.72) 52%,
              rgba(9,11,16,.34) 78%,
              rgba(9,11,16,0) 100%);
}
/* Referanslar → "Mağazanız Gözünüzün Önünde Kuruluyor" geçişi (28 Tem)
   Aynı dikiş sorunu: `.spotlight` düz `#090B10` zeminli olduğu için üstteki
   bölümün mor ortam ışığını tam kenarda kesiyordu. Zemin artık tepede şeffaf
   başlayıp aşağı indikçe opaklaşıyor — mor kademeli sönüyor.
   Özgüllük `.section.spotlight`: bileşenin kendi kuralı index.ejs gövdesindeki
   <style> bloğunda ve orası bu dosyadan sonra geliyor.
   Aynısı ALT kenarda da geçerli: bölüm bitince aurora birden ortaya çıkıyordu
   ("Markanızı ⭘ kuruyor…" bölümüne geçiş), o uç da söndürüldü. */
.section.spotlight {
  background: linear-gradient(180deg,
              rgba(9,11,16,0) 0%,
              rgba(9,11,16,.42) 8%,
              rgba(9,11,16,.82) 16%,
              #090B10 26%,
              #090B10 74%,
              rgba(9,11,16,.82) 86%,
              rgba(9,11,16,.4) 94%,
              rgba(9,11,16,0) 100%);
}

/* Alttaki bölümün mor ortam ışığı da kısıldı — bölge fazla morlaşıyordu.
   `opacity` işe yaramaz (orbBreathe animasyonu opacity'yi sürüyor), rengin
   kendi alfası düşürülüyor. */
#trusted::before {
  /* aşağı itildi: bölümün üst kenarını aşan kısmı üstteki opak bölüm tarafından
     kesiliyor ve o kesik düz bir çizgi olarak görünüyordu */
  top: 40%;
  background: radial-gradient(circle, rgba(108,53,178,.085), transparent 70%);
  filter: blur(110px);
}
#trusted::after {
  background: radial-gradient(circle, rgba(60,67,221,.07), transparent 70%);
  filter: blur(110px);
}

/* turun neresindeyiz — şeridin altındaki ince çizgi (Penta gibi) */
.hrail-prog {
  position: relative; z-index: 1;
  width: min(520px, 46vw); height: 2px;
  margin: clamp(4px, 1vw, 14px) auto 0;
  border-radius: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.hrail-prog i {
  position: absolute; inset: 0;
  border-radius: 2px;
  background: rgba(255,255,255,.82);
  transform: scaleX(0); transform-origin: left center;
}

@media (max-width: 1024px) {
  .prod-feature { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-cell:nth-child(3n) { border-right: 1px solid var(--border); }
  .prod-cell:nth-child(2n) { border-right: 0; }
  .prod-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
  .prod-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .prod-grid { grid-template-columns: 1fr; }
  .prod-cell { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; min-height: 0; }
  .prod-cell:last-child { border-bottom: 0 !important; }
  .pc-go { display: none; }
}

/* ===========================================================================
   REFERANSLAR — üçlü ızgara, gezilebilir ekran görüntüsü, pop-up
   =========================================================================== */

/* --- üçlü ızgara (toplantı: "ikili değil, üçlü olsun") --- */
.prefs-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 34px);
  padding-bottom: 0;
}
.prefs-3 > .pref:nth-child(2n+1) { transform: none; }
/* --- WebKit: kart bir <button>, bu yüzden flex OLMAMALI (31 Tem) ------------
   Referans görselleri iPhone'da hiç görünmüyordu. Sebep: `.pref` bir `<button>`
   ve WebKit, düğmenin çocuklarını kendi ürettiği isimsiz bir sarmalayıcıya
   koyup o sarmalayıcıyı İÇERİĞE GÖRE daraltıyor (native düğme etiketini
   ortalayan mekanizma). `.pref-media`nın içindeki her şey mutlak konumlu, yani
   akış içeriği yok → daralan bağlamda genişliği 0 → hem `aspect-ratio` hem de
   yüzdelik `padding` 0 veriyor ve kutu tamamen yok oluyor. İkisinin AYNI ANDA
   çökmesi, sorunun yükseklik değil genişlik olduğunun kanıtıydı.
   Çözüm: düğmenin native görünümünü kapat ve onu flex kabı yapma — sıradan bir
   blok olarak diz. Kartın içinde flex'e ihtiyaç yoktu zaten (`gap: 0`), iki
   çocuk alt alta akıyor. Blok akışında `.pref-media` kabın genişliğini alır ve
   oran her motorda çalışır. */
.prefs-3 > .pref {
  display: block;
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer; color: inherit;
  border-radius: 20px;
}
.prefs-3 .pref-media {
  aspect-ratio: 16 / 11;
  border-radius: 18px;
  padding: 0;
  display: block;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  /* Kutunun içindeki her şey mutlak konumlu; yani akış içeriği yok. Oranı iki
     yoldan birden veriyoruz ki tek bir motor davranışına bağlı kalmasın:
     `aspect-ratio` ve yüzdelik `padding` — ikisi de kutunun genişliğinden
     birebir aynı yüksekliği üretir, çakışmazlar. Yukarıdaki düğme notuna bak. */
  width: 100%;
}
.prefs-3 .pref-media::before { content: ''; display: block; padding-top: 68.75%; } /* 16/11 */
.prefs-3 .pref-metric {
  left: auto; right: 14px; bottom: 14px; z-index: 3;
  font-size: 17px; font-weight: 500;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(9,11,16,.74);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.prefs-3 .pref-metric small { font-size: 11px; }
.pref-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 18px 4px 0;
}
.prefs-3 .pref-name { display: block; margin: 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; }
.prefs-3 .pref-cat { display: block; margin-top: 3px; font-size: 14px; }
.pref-go {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: rgba(255,255,255,.7);
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, color .4s, background .4s;
}
.pref-go svg { width: 14px; height: 14px; }
.pref:hover .pref-go {
  transform: translateX(3px);
  border-color: var(--ac, var(--lilac)); color: #fff;
  background: color-mix(in srgb, var(--ac, var(--lilac)) 55%, transparent);
}
@media (max-width: 1000px) { .prefs-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .prefs-3 { grid-template-columns: 1fr; } }

/* --- boydan boya ekran görüntüsü: hover'da aşağı kayar --- */
.shot { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; background: #0B0E15; }
.shot-chrome {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  height: 32px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: rgba(16,20,30,.94);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.shot-chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.shot-chrome i:nth-child(1) { background: #ff5f57; }
.shot-chrome i:nth-child(2) { background: #febc2e; }
.shot-chrome i:nth-child(3) { background: #28c840; }
.shot-url {
  margin-left: 10px; font-size: 10.5px; color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.05); border-radius: 6px; padding: 2px 10px;
}
/* overflow-anchor: uzun görsel geç yüklenince tarayıcı bu kutuyu kendiliğinden
   kaydırabiliyor; kapatıyoruz ki kart daima sitenin en üstünden başlasın. */
.shot-view { position: absolute; inset: 32px 0 0; overflow: hidden; overflow-anchor: none; }
/* DİKKAT — `.shot-view` sarmalayıcısı seçicilerden çıkarılmamalı:
   penta.css:366'daki `.pref-media img { height:100%; object-fit:cover;
   transition:transform .9s }` daha özgül olduğu için sade `.shot-page-img`
   kuralını eziyordu. Sonuç: tam sayfa görsel kartın içine sığdırılıp
   ortasından kırpılıyor, site hep "ortadan" başlıyor gibi görünüyordu. */
.shot-view .shot-page {
  display: block; width: 100%;
  transform: translateY(0);
  /* varsayılan = imleç ayrılınca dönüş: hızlı */
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
/* boydan boya: kutuya sığdırma yok, doğal yükseklik + üstten hizalı */
.shot-view .shot-page-img { height: auto; object-fit: fill; object-position: top center; }
/* Gezinme yalnızca imleç üzerindeyken ve yavaş.
   `.rd-shot` (29 Tem): referans DETAY sayfasındaki büyük önizleme bu üç
   seçicinin hiçbirine uymuyordu — kart ızgarasında (`.pref`) ve pop-up'ta
   (`.refmodal-shot`) çalışıyor, detay sayfasında hiç kaymıyordu. */
.pref:hover .shot-view .shot-page, .refmodal-shot:hover .shot-view .shot-page,
.rd-shot:hover .shot-view .shot-page,
.pref:focus-visible .shot-view .shot-page { transition-duration: 5.5s; transition-timing-function: cubic-bezier(.32,0,.2,1); }
.pref:hover .shot-view .shot-page, .refmodal-shot:hover .shot-view .shot-page,
.rd-shot:hover .shot-view .shot-page,
.pref:focus-visible .shot-view .shot-page { transform: translateY(calc(-100% + 190px)); }
.shot-hint {
  position: absolute; z-index: 3; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: rgba(255,255,255,.72);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(9,11,16,.7); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.shot-hint svg { width: 13px; height: 13px; }
.pref:hover .shot-hint, .rd-shot:hover .shot-hint { opacity: 1; transform: none; }

/* sahte sayfa iskeleti — gerçek SS gelince `sc.shot` ile değişir */
/* NOT: burada `.shot-page > span { display:block }` yazmak, aşağıdaki grid/flex
   kurallarını özgüllük (0-1-1 > 0-1-0) yüzünden eziyor. Yalnızca gerçekten
   bloklanması gereken dekoratif kutulara veriyoruz. */
.sp-cta, .sp-btn, .sp-hero-art, .sp-split-art { display: block; }
.shot-page i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); }
.shot-page i.sm { height: 5px; opacity: .7; }
.shot-page i.w25 { width: 25%; } .shot-page i.w40 { width: 40%; } .shot-page i.w45 { width: 45%; }
.shot-page i.w50 { width: 50%; } .shot-page i.w60 { width: 60%; } .shot-page i.w70 { width: 70%; }
.shot-page i.w80 { width: 80%; } .shot-page i.w90 { width: 90%; }
.sp-nav { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sp-logo {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--ac); color: #0B0E15;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
}
.sp-links { display: flex; gap: 12px; flex: 1; }
.sp-links i { width: 34px; height: 5px; }
.sp-cta { width: 62px; height: 22px; border-radius: 999px; background: var(--ac); opacity: .85; }
.sp-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
  padding: 34px 20px 30px;
  background: radial-gradient(90% 130% at 10% 0%, color-mix(in srgb, var(--ac) 30%, transparent), transparent 68%);
}
.sp-hero-copy { display: flex; flex-direction: column; gap: 9px; }
.sp-hero-copy i:first-child { height: 13px; }
.sp-hero-copy i:nth-child(2) { height: 13px; }
.sp-btn { width: 88px; height: 26px; border-radius: 999px; background: var(--ac); margin-top: 8px; }
.sp-hero-art {
  height: 118px; border-radius: 12px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ac) 55%, transparent), rgba(255,255,255,.06));
}
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 20px; border-block: 1px solid rgba(255,255,255,.06); }
.sp-stats i { height: 26px; border-radius: 8px; }
.sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 22px 20px; }
.sp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid i { height: 74px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.05); }
.sp-grid i:nth-child(3n) { background: color-mix(in srgb, var(--ac) 16%, rgba(255,255,255,.05)); }
.sp-banner {
  margin: 6px 20px 22px; padding: 26px 22px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 62%, transparent), color-mix(in srgb, var(--ac) 18%, transparent));
}
.sp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 4px 20px 24px; align-items: center; }
.sp-split-art { height: 104px; border-radius: 12px; background: rgba(255,255,255,.07); }
.sp-split-copy { display: flex; flex-direction: column; gap: 8px; }
.sp-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 26px 20px 34px; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.06); }
.sp-foot i { height: 44px; border-radius: 8px; }

/* --- arka plandaki neon çerçeveli logo duvarı --- */
.refs-logowall {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding: 4%;
  opacity: .1;
  pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 78% 62% at 50% 50%, #000 8%, transparent 72%);
          mask: radial-gradient(ellipse 78% 62% at 50% 50%, #000 8%, transparent 72%);
}
.rlw-chip {
  font-family: var(--font-head); font-size: clamp(14px, 1.5vw, 21px); font-weight: 500;
  color: var(--bc); white-space: nowrap;
  padding: 10px 22px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent);
  box-shadow: 0 0 18px -4px var(--bc), inset 0 0 18px -8px var(--bc);
  animation: rlwGlow 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * .28s);
}
@keyframes rlwGlow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* --- pop-up önizleme --- */
.refmodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(14px, 3vw, 40px); }
.refmodal[hidden] { display: none; }
.refmodal-bg { position: absolute; inset: 0; background: rgba(6,8,13,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.refmodal-box {
  position: relative; z-index: 1;
  width: min(1180px, 100%); max-height: 90vh; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(18px, 2.2vw, 34px);
  border-radius: clamp(18px, 2vw, 28px);
  background: linear-gradient(180deg, #14192A, #0C0F18);
  border: 1px solid var(--border-strong);
  box-shadow: 0 60px 140px -50px rgba(0,0,0,.95);
  animation: refIn .42s cubic-bezier(.16,1,.3,1);
}
@keyframes refIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.refmodal-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid var(--border-strong);
  color: #fff; font-size: 15px; cursor: pointer;
  transition: background .3s, transform .3s;
}
.refmodal-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.refmodal-shot { position: relative; aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); }
.refmodal-info { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.refmodal-info h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 400; letter-spacing: -.025em; }
.refmodal-info p { color: var(--muted); font-weight: 300; font-size: 15.5px; line-height: 1.62; }
.refmodal-metrics { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.refmodal-metrics b { display: block; font-family: var(--font-head); font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -.02em; }
.refmodal-metrics span { font-size: 12.5px; color: var(--muted-2); }
.refmodal-techs { display: flex; flex-wrap: wrap; gap: 8px; }
.refmodal-techs span { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted); }
.refmodal-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; }
.refmodal-cta .btn { height: 50px; font-size: 15px; padding-inline: 26px; }
.refmodal-hint { font-size: 12px; color: var(--muted-2); }
@media (max-width: 900px) {
  .refmodal-box { grid-template-columns: 1fr; }
  .refmodal-shot { aspect-ratio: 16 / 10; }
}
body.refmodal-open { overflow: hidden; }

/* --- referans detay sayfası --- */
.rd-head { padding-bottom: clamp(40px, 5vw, 76px); }
.rd-head h1 { max-width: none; }
.rd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr);
  gap: clamp(28px, 3.6vw, 64px);
  align-items: start;
}
.rd-shotcol { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.rd-shot {
  position: relative; aspect-ratio: 16 / 11;
  border-radius: clamp(16px, 1.8vw, 24px); overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 60px 130px -60px rgba(0,0,0,.95);
}
.rd-shot-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rd-shot-note { font-size: 12.5px; color: var(--muted-2); }
.rd-info { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 44px); }
.rd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.rd-facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.rd-facts dd { font-size: 16px; font-weight: 400; color: #fff; }
.rd-facts dd a { color: var(--lilac); }
.rd-facts dd a:hover { color: #fff; }
.rd-h { font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; letter-spacing: -.02em; margin-bottom: 14px; }
.rd-block p { color: var(--muted); font-weight: 300; font-size: 15.5px; line-height: 1.68; }
.rd-work { display: flex; flex-direction: column; gap: 14px; }
.rd-work li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--muted); }
.rd-work-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: 8px; box-shadow: 0 0 10px currentColor; }
.rd-techs { display: flex; flex-wrap: wrap; gap: 9px; }
.rd-techs span { font-size: 13px; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted); }
.rd-results {
  margin-top: clamp(40px, 5vw, 80px);
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: clamp(18px, 2vw, 28px);
  border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent);
  background:
    radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 64%),
    rgba(255,255,255,.02);
}
.rd-results-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.rd-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 52px); margin-top: 22px; }
.rd-metric b { display: block; font-family: var(--font-head); font-size: clamp(30px, 4vw, 62px); font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--ac); }
.rd-metric span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .rd-grid { grid-template-columns: 1fr; }
  .rd-shotcol { position: static; }
  .rd-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .rd-results-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===========================================================================
   FAZ 4 — HAREKET
   =========================================================================== */

.vidmodal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: clamp(14px, 3vw, 44px); }
.vidmodal[hidden] { display: none; }
.vidmodal-bg { position: absolute; inset: 0; background: rgba(4,6,10,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.vidmodal-box {
  position: relative; z-index: 1; width: min(1100px, 100%);
  border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 60px 140px -50px rgba(0,0,0,.95);
  animation: refIn .42s cubic-bezier(.16,1,.3,1);
}
.vidmodal-box video { width: 100%; height: auto; display: block; background: #000; }
.vidmodal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(9,11,16,.7); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; transition: background .3s, transform .3s;
}
.vidmodal-close:hover { background: rgba(9,11,16,.95); transform: rotate(90deg); }

/* --- slogan bir sonraki bölümün altına girsin (314-325) ---
   "şu yazı şunun altına doğru girsin, bu sabit kalmasın, sunum slaytı geçişi
   gibi … yukarı geri kaydırdıkça da içinden dışarı çıkması lazım."
   Slogan yapışkan kalır, altındaki bölüm üzerine kayar; geri scroll'da geri çıkar. */
.slidewrap { position: relative; }
@media (min-width: 900px) {
  .slidewrap > .statement { position: sticky; top: 0; z-index: 0; }
  .statement + .section {
    position: relative; z-index: 2;
    background: var(--bg);
    border-top-left-radius: clamp(24px, 3vw, 44px);
    border-top-right-radius: clamp(24px, 3vw, 44px);
    box-shadow: 0 -40px 90px -30px rgba(0,0,0,.85);
  }
  /* yazı altına girerken sönsün — parallax hissi */
  .statement .statement-inner {
    will-change: transform, opacity;
    transform: translateY(var(--st-y, 0px));
    opacity: var(--st-o, 1);
  }
}

/* --- slogan bölümünün arka planında soluk marka isimleri (Penta referansı) ---
   Logo dosyalarımız yok; Penta'daki de büyük ölçüde kelime-logo. Başlık
   fontuyla, çok düşük opaklıkta, yavaşça nefes alarak duruyorlar. */
.statement-brands {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  -webkit-mask: radial-gradient(120% 90% at 50% 50%, transparent 26%, #000 62%);
          mask: radial-gradient(120% 90% at 50% 50%, transparent 26%, #000 62%);
}
.statement-brands span {
  position: absolute;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: rgba(255,255,255,.52);
  opacity: .28;                       /* durağan hâl — okunur ama geride */
  animation: brandFlare 11s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
  will-change: opacity;
}
/* sırayla parlama: her marka kendi gecikmesiyle iki kademeli parlayıp sönüyor */
@keyframes brandFlare {
  0%, 56%, 100% { opacity: .28; filter: none; }
  64%           { opacity: .8; }
  70%           { opacity: .46; }
  78%           { opacity: 1; filter: drop-shadow(0 0 22px rgba(220,170,220,.45)); }
  88%           { opacity: .34; }
}
@media (max-width: 900px) { .statement-brands { display: none; } }
@media (prefers-reduced-motion: reduce) { .statement-brands span { animation: none; } }

/* --- kitap gibi sağa doğru açılan kartlar (158-166) ---
   "arka kitap gibi yukarı yukarı gidiyor ya, bizimki de sağa doğru
   üst üste binsin binsin gitsin." */
/* kartlar arasında küçük bir nefes payı (28 Tem) — bitişik duruyorlardı */
.bookdeck { position: relative; display: flex; gap: 12px; padding-block: 8px 4px; }
.bookdeck .tl-step {
  flex: 1 1 0; min-width: 0;
  transform: translateX(var(--bd-x, 0)) rotate(var(--bd-r, 0deg));
  transform-origin: left center;
  transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .6s ease, box-shadow .5s ease;
  box-shadow: -22px 26px 60px -30px rgba(0,0,0,.85);
  will-change: transform;
}
/* açılmadan önce: hepsi ilk kartın üstünde üst üste */
/* kapalıyken üst üste: kendi genişliği + aradaki boşluk kadar sola kayar */
.bookdeck:not(.is-open) .tl-step { --bd-x: calc(var(--bd-i) * -96% - var(--bd-i) * 12px); --bd-r: calc(var(--bd-i) * -1.4deg); }
.bookdeck.is-open .tl-step { --bd-x: 0; --bd-r: 0deg; }
.bookdeck .tl-step:hover { z-index: 5; box-shadow: -26px 34px 76px -30px rgba(0,0,0,.95); }
@media (max-width: 860px) {
  .bookdeck { flex-direction: column; gap: 18px; }
  .bookdeck .tl-step, .bookdeck:not(.is-open) .tl-step { --bd-x: 0; --bd-r: 0deg; }
}

/* --- 720° düğümlerinden merkeze giden şimşek (54-61) ---
   "bunun üzerine geliyorum ya şuradan böyle bir bağlantı gibi bir şey olsun,
   animasyon şuraya doğru … şimşek tarzı, her birine ayrı ayrı." */
.orbit-bolt { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.orbit-bolt path {
  fill: none; stroke: var(--bolt, var(--lilac)); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--bolt, var(--lilac)));
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
  opacity: 0;
}
.orbit-bolt.on path { animation: boltStrike .55s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes boltStrike {
  0%   { stroke-dashoffset: var(--len, 400); opacity: 0; }
  18%  { opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .45; }
}

/* --- scroll kıvılcımları: çerçeve köşelerinden (280-284) ---
   "aşağı kaydırdıkça şuralardan rahatsız etmeyecek derecede bir kıvılcık
   çıksın … çerçevenin köşelerinde." */
.sparked { position: relative; }
.sparked::before, .sparked::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lilac); box-shadow: 0 0 12px 2px var(--lilac);
  opacity: 0; pointer-events: none; z-index: 4;
}
.sparked::before { left: -2px; top: -2px; }
.sparked::after  { right: -2px; bottom: -2px; }
.sparked.spark-on::before { animation: sparkPop 1.5s ease-out; }
.sparked.spark-on::after  { animation: sparkPop 1.5s ease-out .35s; }
@keyframes sparkPop {
  0%   { opacity: 0; transform: scale(.4); }
  22%  { opacity: .95; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(.5); }
}

/* --- kademeli reveal biraz daha belirgin (52-53) --- */
.reveal { transition-duration: .85s; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .27s; }
.reveal.d4 { transition-delay: .36s; }
.reveal.d5 { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .bookdeck .tl-step, .bookdeck:not(.is-open) .tl-step { --bd-x: 0; --bd-r: 0deg; }
  .statement { position: static; }
  .sparked.spark-on::before, .sparked.spark-on::after { animation: none; }
}

/* ===========================================================================
   FAZ 5 — ORTAKLIK MODELİ: T CETVELİ (348-358)
   Üstte yatay çizgi (cetvelin başlığı), ortada dikey gövde; ikisi de çentikli.
   Görünür olunca önce yatay soldan sağa çizilir, sonra dikey iner, ardından
   maddeler sırayla dizilir.
   =========================================================================== */
.tsq-split { position: relative; padding-top: clamp(30px, 3.4vw, 52px); }
.tsq { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* yatay kol — cetvelin üst çizgisi */
.tsq-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 14px;
  display: flex; justify-content: space-between; align-items: flex-start;
  border-top: 2px solid rgba(255,255,255,.55);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.tsq-bar i { width: 1px; height: 6px; background: rgba(255,255,255,.42); }
.tsq-bar i:nth-child(4n+1) { height: 11px; background: rgba(255,255,255,.6); }

/* dikey gövde — cetvelin sapı */
.tsq-stem {
  position: absolute; top: 0; bottom: clamp(6px, 1vw, 18px); left: 50%;
  width: 14px; margin-left: -7px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  border-left: 2px solid rgba(255,255,255,.42);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .95s cubic-bezier(.16,1,.3,1) .55s;
}
.tsq-stem i { height: 1px; width: 6px; background: rgba(255,255,255,.34); }
.tsq-stem i:nth-child(3n+1) { width: 11px; background: rgba(255,255,255,.5); }

/* T'nin birleşim noktası */
.tsq-node {
  position: absolute; top: -5px; left: 50%; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.18), 0 0 22px rgba(255,255,255,.75);
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1) .45s;
}

.tsq-split.is-drawn .tsq-bar  { transform: scaleX(1); }
.tsq-split.is-drawn .tsq-stem { transform: scaleY(1); }
.tsq-split.is-drawn .tsq-node { transform: scale(1); }

/* Maddeler cetvel indikçe dizilsin ("yazılar dizilir").
   Gizleme yalnızca JS `.tsq-armed` ekledikten sonra devreye girer — script
   çalışmazsa içerik olduğu gibi görünür kalır. */
.tsq-split.tsq-armed .pp-col > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.tsq-split.tsq-armed .pp-col li  { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.tsq-split.is-drawn .pp-col > *,
.tsq-split.is-drawn .pp-col li { opacity: 1; transform: none; }
.tsq-split.is-drawn .pp-col > *:nth-child(1) { transition-delay: .70s; }
.tsq-split.is-drawn .pp-col > *:nth-child(2) { transition-delay: .80s; }
.tsq-split.is-drawn .pp-col li:nth-child(1)  { transition-delay: .92s; }
.tsq-split.is-drawn .pp-col li:nth-child(2)  { transition-delay: 1.02s; }
.tsq-split.is-drawn .pp-col li:nth-child(3)  { transition-delay: 1.12s; }
.tsq-split.is-drawn .pp-col li:nth-child(4)  { transition-delay: 1.22s; }

@media (max-width: 700px) {
  .tsq-stem, .tsq-node { display: none; }
  .tsq-split { padding-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsq-bar, .tsq-stem, .tsq-node { transform: none !important; transition: none; }
  .tsq-split .pp-col > *, .tsq-split .pp-col li { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   FAZ 6 — YENİ BÖLÜMLER
   =========================================================================== */

/* --- yazıların arasında çember görseller (274-279) --- */
/* Manifesto: dekor yok — alanı METNİN kendisi dolduruyor. Daha önce arkaya
   hat/ağ/doku konmuştu; hem boşluğu kapatmadı hem odağı yazıdan aldı.
   Çözüm: tipografiyi ekranı kaplayacak ölçeğe çıkarmak. */
.circles-line {
  font-family: var(--font-head);
  font-size: clamp(34px, 7.6vw, 118px);
  font-weight: 300; line-height: 1.1; letter-spacing: -.038em;
  text-align: center; color: #fff;
  max-width: 17ch; margin-inline: auto;
}
.circ {
  display: inline-block; vertical-align: middle;
  width: clamp(54px, 9.4vw, 140px); aspect-ratio: 1;
  margin: 0 clamp(8px, 1.1vw, 20px);
  border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.03);
  animation: circFloat 6.5s ease-in-out infinite;
  animation-delay: var(--cd, 0s);
}
.circ img { width: 100%; height: 100%; object-fit: cover; }
@keyframes circFloat { 50% { transform: translateY(-10px); } }

/* --- kampanya / indirim alanı (116-121) --- */
.campaign {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: clamp(26px, 3.4vw, 60px); align-items: center;
  padding: clamp(32px, 4vw, 68px);
  border-radius: clamp(22px, 2.6vw, 38px);
  background: linear-gradient(122deg, #2A22C8 0%, #4A3BE8 44%, #6C35B2 100%);
  color: #fff;
}
.campaign-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(ellipse 70% 90% at 100% 0%, #000, transparent 70%);
          mask: radial-gradient(ellipse 70% 90% at 100% 0%, #000, transparent 70%);
}
/* premium parıltı: yüzeyden geçen ışık */
.campaign-shine {
  position: absolute; top: -60%; bottom: -60%; width: 38%;
  left: -45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-16deg);
  animation: campShine 6.5s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes campShine { 0% { left: -45%; } 55%, 100% { left: 115%; } }
.campaign-body { position: relative; z-index: 1; }
.campaign-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
}
.campaign-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: orbBreathe 2.2s ease-in-out infinite; }
.campaign-title {
  margin-top: 22px; max-width: 21ch;
  font-size: clamp(26px, 3.4vw, 52px); font-weight: 300;
  letter-spacing: -.028em; line-height: 1.14; color: #fff;
}
.campaign-num {
  display: inline-block; font-weight: 500;
  padding: 0 .14em; border-radius: 10px;
  background: rgba(255,255,255,.16);
}
.campaign-title .grad-text {
  background: linear-gradient(120deg, #FFE9A8, #FFC46B 60%, #FFE9A8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.campaign-desc { margin-top: 20px; font-size: clamp(15px, 1.2vw, 18px); font-weight: 300; line-height: 1.62; color: rgba(255,255,255,.86); max-width: 60ch; }
.campaign-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 2.6vw, 38px); }
.campaign-cta .btn-grad { background: #fff; color: #2A1B52; border-color: rgba(255,255,255,.6); }
.campaign-cta .btn-grad:hover { filter: brightness(.96); }
.campaign-cta .btn-ghost { border-color: rgba(255,255,255,.4); }
.campaign-side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; align-items: flex-end; }
.campaign-badge {
  width: clamp(130px, 13vw, 190px); aspect-ratio: 1;
  border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.campaign-badge b { font-family: var(--font-head); font-size: clamp(38px, 4.4vw, 62px); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.campaign-badge span { margin-top: 8px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.campaign-ticker { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.campaign-ticker-track { display: flex; gap: 14px; width: max-content; animation: campTick 22s linear infinite; }
.campaign-ticker-track span { flex-shrink: 0; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); white-space: nowrap; }
@keyframes campTick { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  /* `1fr` = `minmax(auto, 1fr)`; tabanı min-content olduğu için sütun,
     içindeki `width: max-content` şeridin (`.campaign-ticker-track`) genişliğine
     kilitleniyordu — 375px'lik panelde sütun 1254px çıkıyor, başlık ve butonlar
     kutunun dışına taşıp kesiliyordu (ölçüldü). `minmax(0, 1fr)` tabanı sıfıra
     indirir; alt öğelere de `min-width: 0` gerekiyor, yoksa aynı taşma tekrarlar. */
  .campaign { grid-template-columns: minmax(0, 1fr); }
  .campaign-body, .campaign-side, .campaign-cta, .campaign-ticker { min-width: 0; max-width: 100%; }
  .campaign-side { align-items: flex-start; }
  /* butonlar dar ekranda yan yana sığmıyordu */
  .campaign-cta { flex-wrap: wrap; }
  .campaign-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
  .campaign { padding: clamp(22px, 6vw, 30px); }
  .campaign-cta .btn { flex: 1 1 100%; }
}

/* --- banner alanı (26-28, 243-247) --- */
.bannerwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.bwall-card {
  display: flex; flex-direction: column;
  border-radius: clamp(16px, 1.8vw, 24px); overflow: hidden;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,.02);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s;
}
.bwall-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--bc) 55%, transparent); }
.bwall-media {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--bc) 34%, transparent), rgba(255,255,255,.03));
}
.bwall-orb {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bc) 70%, transparent), transparent 66%);
  filter: blur(30px);
  animation: orbBreathe 9s ease-in-out infinite;
  animation-delay: calc(var(--bi) * 1.6s);
}
/* Geçici stok görseller (Gökhan Bey'inkiler gelince dosyalar değişecek, isim aynı
   kalabilir). Görsel varsa `.bwall-ph` yer tutucusu basılmıyor. */
.bwall-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* fotoğrafı sitenin koyu diline oturtuyor: doygunluk aşağı, parlaklık aşağı */
  filter: saturate(.82) contrast(1.06) brightness(.7);
  transform: scale(1.04);
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .6s;
}
/* kart renginden gelen perde + gövdeye doğru sönüm — dikiş görünmesin (K3) */
.bwall-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, #090B10 0%, color-mix(in srgb, #090B10 58%, transparent) 32%, transparent 66%),
    linear-gradient(150deg, color-mix(in srgb, var(--bc) 40%, transparent), transparent 60%);
}
.bwall-card:hover .bwall-img {
  transform: scale(1.09);
  filter: saturate(1) contrast(1.06) brightness(.86);
}
.bwall-ph {
  position: relative; z-index: 1;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
  padding: 8px 16px; border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.22);
}
.bwall-body { padding: clamp(20px, 2vw, 30px); display: flex; flex-direction: column; gap: 9px; }
.bwall-tag {
  align-self: flex-start; font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bc);
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--bc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc) 30%, transparent);
}
.bwall-body b { font-size: clamp(17px, 1.5vw, 22px); font-weight: 400; letter-spacing: -.02em; color: #fff; }
.bwall-body em { font-style: normal; font-size: 14px; font-weight: 300; line-height: 1.58; color: var(--muted); }
@media (max-width: 900px) { .bannerwall { grid-template-columns: 1fr; } }

/* --- açılır iletişim düğmesi (249-263) --- */
.cfab { position: fixed; right: clamp(16px, 2vw, 30px); bottom: clamp(16px, 2vw, 30px); z-index: 210; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* ---------------------------------------------------------------------------
   Tam ekran iletişim paneli (Penta referansı, 28 Tem)
   Düğmeye basınca alttan yükselir. Üst kenarındaki çukur SVG ile çiziliyor,
   kapatma düğmesi çukurun içine oturuyor. Sol sütun "siz arayın" (telefon,
   e-posta, WhatsApp), sağ sütun "biz arayalım" formu.
   --------------------------------------------------------------------------- */
.csheet {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .62s cubic-bezier(.16,1,.3,1);
}
.csheet[hidden] { display: none; }
.csheet.is-open { transform: none; }
/* çukurun üstünde kalan sayfa karartılsın — panel öne çıksın */
.csheet::before {
  content: ""; position: absolute; inset: -100vh 0 0;
  z-index: -1; pointer-events: none;
  background: rgba(6,8,13,.78);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.csheet-cap { display: block; width: 100%; height: clamp(70px, 9vw, 130px); flex-shrink: 0; }
.csheet-cap path { fill: #0B0D13; }
.csheet-close {
  position: absolute; left: 50%; top: clamp(6px, 1.4vw, 22px);
  transform: translateX(-50%);
  width: clamp(52px, 5vw, 74px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: #14161F; border: 1px solid var(--border-strong);
  color: rgba(255,255,255,.8);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.9);
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, color .4s;
}
.csheet-close svg { width: 40%; height: 40%; }
.csheet-close:hover { transform: translateX(-50%) rotate(90deg); border-color: var(--lilac); color: #fff; }
.csheet-body {
  flex: 1; display: flex; align-items: center;
  background: #0B0D13;
  padding: clamp(20px, 3vw, 48px) 0 clamp(40px, 5vw, 80px);
}
.csheet-grid {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid; grid-template-columns: 1fr minmax(260px, 32vw) 1fr;
  gap: clamp(24px, 3vw, 64px); align-items: center;
}
.csheet-col { display: flex; flex-direction: column; }
.csheet-title {
  font-size: clamp(34px, 4.6vw, 68px); font-weight: 300;
  letter-spacing: -.03em; line-height: 1.05; color: #fff;
}
.csheet-col-form { align-items: flex-end; text-align: right; }
.csheet-tag {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(15px, 1.3vw, 19px); font-weight: 300; color: var(--muted);
  max-width: 30ch;
}
.csheet-line {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(18px, 2.2vw, 30px);
  padding-bottom: clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--border);
  font-size: clamp(18px, 1.9vw, 28px); font-weight: 300; color: rgba(255,255,255,.9);
  transition: color .35s, border-color .35s;
}
.csheet-line:hover { color: #fff; border-color: var(--border-strong); }
.csheet-line-ico { color: var(--lilac); display: grid; place-items: center; }
.csheet-line-ico svg { width: 22px; height: 22px; }
.csheet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.45);
  color: #6BE39B;
}
.btn-wa svg { width: 19px; height: 19px; }
.btn-wa:hover { background: rgba(37,211,102,.2); border-color: #25D366; color: #fff; }
.csheet-visual {
  border-radius: clamp(18px, 2vw, 30px); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 50px 110px -50px rgba(0,0,0,.95);
}
/* Görsel yatay; 3/4'e zorlanınca iki yandaki kişiler kesiliyordu.
   Kendi oranında duruyor — hiçbir yeri kırpılmıyor. */
.csheet-visual img { display: block; width: 100%; height: auto; }
.csheet-form { width: 100%; max-width: 460px; margin-top: clamp(22px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 12px; }
.csheet-form .input {
  width: 100%; padding: 16px 22px; border-radius: 999px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  color: #fff; font-size: 15px;
  transition: border-color .3s, background .3s;
}
.csheet-form .input:focus { outline: none; border-color: var(--lilac); background: rgba(255,255,255,.05); }
.csheet-phone { position: relative; display: flex; align-items: center; }
.csheet-cc {
  /* input'un zemini üstüne biniyordu — z-index ile öne alındı */
  position: absolute; left: 22px; z-index: 2;
  font-size: 15px; color: rgba(255,255,255,.62);
  pointer-events: none;
}
.csheet-phone .input { padding-left: 68px; }
.csheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.csheet-kvkk { flex: 1 1 190px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted-2); text-align: left; line-height: 1.4; }
.csheet-kvkk a { color: var(--muted); text-decoration: underline; }
.csheet-kvkk input { width: 18px; height: 18px; accent-color: var(--primary-2); flex-shrink: 0; }

@media (max-width: 1080px) {
  .csheet-grid { grid-template-columns: 1fr; gap: 34px; }
  .csheet-visual { display: none; }
  .csheet-col-form { align-items: flex-start; text-align: left; }
  .csheet-body { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .csheet { transition: none; } }

/* panel açıkken yüzen düğme kaybolsun — kapatma düğmesi çukurun içinde */
.cfab.is-open { opacity: 0; pointer-events: none; }
.cfab { transition: opacity .3s ease; }

.cfab-btn {
  position: relative; width: 98px; height: 98px; border-radius: 50%;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.cfab-ring { position: absolute; inset: 0; animation: cfabSpin 16s linear infinite; }
.cfab-ring svg { width: 100%; height: 100%; overflow: visible; }
.cfab-ring text { font-size: 7.4px; font-weight: 500; fill: rgba(255,255,255,.7); }
@keyframes cfabSpin { to { transform: rotate(360deg); } }
.cfab-core {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-btn); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 40px -10px rgba(60,67,221,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
/* ikonlar üst üste duruyor, sırayla açılıp kapanıyorlar */
.cfab-ico {
  position: absolute; width: 30px; height: 30px;
  opacity: 0; transform: scale(.55) rotate(-20deg);
}
.cfab-ico.ico-hand  { animation: cfabIcoA 7s ease-in-out infinite; }
.cfab-ico.ico-pen   { animation: cfabIcoB 7s ease-in-out infinite; }
.cfab-ico.ico-close { transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1); }
/* el görünürken hafifçe selam veriyor */
.cfab-ico.ico-hand { transform-origin: 50% 78%; }
@keyframes cfabIcoA {
  0%      { opacity: 0; transform: scale(.55) rotate(-20deg); }
  6%      { opacity: 1; transform: scale(1) rotate(-14deg);   }
  12%     {              transform: scale(1) rotate(12deg);   }
  18%     {              transform: scale(1) rotate(-10deg);  }
  24%     {              transform: scale(1) rotate(8deg);    }
  30%,42% { opacity: 1; transform: scale(1) rotate(0deg);     }
  48%,100%{ opacity: 0; transform: scale(.55) rotate(18deg);  }
}
@keyframes cfabIcoB {
  0%,46%   { opacity: 0; transform: scale(.55) rotate(-20deg) translate(0,0); }
  54%      { opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);     }
  62%      {              transform: scale(1) rotate(-6deg) translate(-2px,2px); }
  70%      {              transform: scale(1) rotate(4deg) translate(2px,-1px); }
  78%,90%  { opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);     }
  96%,100% { opacity: 0; transform: scale(.55) rotate(18deg) translate(0,0);  }
}
.cfab-btn:hover .cfab-core { transform: scale(1.07); box-shadow: 0 0 38px rgba(108,53,178,.8); }
/* panel açıkken: el/kalem susuyor, çarpı geliyor */
.cfab.is-open .cfab-ico.ico-hand,
.cfab.is-open .cfab-ico.ico-pen { animation: none; opacity: 0; }
.cfab.is-open .cfab-ico.ico-close { opacity: 1; transform: scale(1) rotate(0deg); }
.cfab.is-open .cfab-ring { animation-play-state: paused; opacity: .35; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 560px) {
  .cfab-btn { width: 78px; height: 78px; }
  .cfab-core { width: 58px; height: 58px; }
  .cfab-ico { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .cfab-ring, .cfab-ico, .campaign-shine, .campaign-ticker-track, .circ, .bwall-orb { animation: none; }
  .bwall-card:hover .bwall-img { transform: scale(1.04); }
}

/* ===========================================================================
   FAZ 7 — ANİMASYONLU TOSEROF LOGOSU (174-191)
   =========================================================================== */
.brand-logo-wrap { position: relative; display: inline-block; line-height: 0; }
.brand-logo-wrap .brand-logo { position: relative; z-index: 1; }

/* --- yazılma: soldan sağa ortaya çıkıyor --- */
.brand-logo-wrap.is-anim .brand-logo {
  clip-path: inset(0 100% 0 0);
  animation: logoSheen 6s ease-in-out infinite, logoWrite 1.5s cubic-bezier(.55,0,.2,1) .25s forwards;
}
@keyframes logoWrite { to { clip-path: inset(0 0 0 0); } }

/* --- F harfi ağarır, söner ---
   Aynı maske; yalnızca sağdaki ~%17'lik dilim (F) görünür kalıyor. */
.brand-logo-f {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #fff;
  -webkit-mask: url('/images/logo-toserof.svg') no-repeat center / contain;
          mask: url('/images/logo-toserof.svg') no-repeat center / contain;
  clip-path: inset(0 0 0 83%);
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(167,139,250,.85));
  animation: fFlare 5.2s ease-in-out 1.85s infinite;
}
@keyframes fFlare {
  0%, 62%  { opacity: 0; }
  70%      { opacity: .95; }
  78%      { opacity: .25; }
  84%      { opacity: .8; }
  100%     { opacity: 0; }
}

/* --- T'nin etrafında dönen kıvılcımlar ---
   T logonun en solunda; kıvılcım alanı o bölgeye oturtuluyor. */
.brand-sparks {
  position: absolute; z-index: 3; pointer-events: none;
  left: 0; top: 50%;
  width: 1.15em; height: 1.15em;
  margin-top: -.575em;
  animation: sparkOrbit 5.5s linear infinite;
}
.brand-sparks i {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px;
  border-radius: 50%;
  background: var(--lilac);
  box-shadow: 0 0 8px 1px var(--lilac);
  transform: rotate(var(--sa)) translateX(.62em);
  animation: sparkTwinkle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--sa) / 360deg * 1.2s);
}
@keyframes sparkOrbit { to { transform: rotate(360deg); } }
@keyframes sparkTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* --- K6: "Toserof" yazıyla değil, logoyla --- */
.brand-logo-inline {
  /* sarmalayıcıya içsel genişlik lazım, yoksa çöküp satır sonuna düşüyor */
  display: inline-block;
  /* logotipin SVG kutusunda bol iç boşluk var; harf yüksekliğinin çevredeki
     metinle eşleşmesi için kutu metinden belirgin büyük olmalı */
  height: 1.32em; aspect-ratio: 250 / 108;
  vertical-align: -.34em;
  margin-inline: .06em;
}
.brand-logo-inline .brand-logo { height: 100%; width: 100%; }
/* satır içi logoda "yazılma" tekrar tekrar oynamasın — yalnızca F ve kıvılcım */
.brand-logo-inline.is-anim .brand-logo {
  clip-path: none;
  animation: logoSheen 6s ease-in-out infinite;
}
/* --- açık zeminli bölümlerde logo (düzeltildi 29 Tem) ---
   Eskiden yalnızca `background: #171029` yazıyordu. `background` kısayolu
   `background-repeat`i de sıfırlıyor (no-repeat → repeat) ve parıltı katmanını
   siliyor; buna rağmen `logoSheen` animasyonu boşuna dönmeye devam ediyordu.
   Asıl sorun ise F harfiydi: `.brand-logo-f` BEYAZ ve etrafında beyaz ışık var
   — koyu zeminde parlama gibi görünüyor, ama açık bantta beyaz beyaz üstüne
   binince gri bir leke ve logonun etrafında hayalet bir hale bırakıyordu. */
/* Seçicilere `.brand-logo-wrap` eklendi: `.brand-logo-inline.is-anim
   .brand-logo` (0,3,0) sade `.section-light .brand-logo`i (0,2,0) yeniyordu ve
   `logoSheen` boşuna dönmeye devam ediyordu. */
.section-light .brand-logo-wrap .brand-logo,
.pd-light .brand-logo-wrap .brand-logo,
.section-light .brand-logo, .pd-light .brand-logo {
  background: #171029;
  background-repeat: no-repeat;
  animation: none;            /* düz renkte kayan parıltı zaten görünmüyor */
  clip-path: none;            /* "yazılma" da açık bantta oynamasın */
}
/* F parlaması ve T kıvılcımları açık bantta KAPALI.
   Önce beyazdı (gri leke + hayalet hale), sonra mor yaptım — bu sefer F harfi
   mor görünüyordu. İki katman aynı maskeyi farklı kutulara uyguladığı için
   üst üste tam oturmuyor, hangi renk verilirse verilsin çift görüntü bırakıyor.
   Açık bantta logo düz koyu duruyor; efektler koyu zeminde aynen çalışıyor. */
.section-light .brand-logo-f, .pd-light .brand-logo-f,
.section-light .brand-sparks, .pd-light .brand-sparks { display: none; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo-wrap.is-anim .brand-logo { clip-path: none; animation: none; }
  .brand-logo-f, .brand-sparks, .brand-sparks i { animation: none; }
  .brand-logo-f { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE HATASI — mobilde yatay taşma
   penta.css:99 `.nav-links { display:flex }` kuralını koşulsuz veriyor ve
   main.css:654'teki "860px altında menüyü gizle" kuralını eziyordu. Sonuç:
   telefonda hem hamburger hem de tüm menü bağlantıları açıkta kalıyor, satır
   759px'e uzayıp sayfayı yana taşırıyordu (toplantı: "responsivliği sıkıntılar var").
   Masaüstünde bağlantılar açıkta kalmaya devam ediyor — Sefa Bey'in isteği.
   --------------------------------------------------------------------------- */
/* main.css bağlantıları 1024px altında gizliyor (satır 838); penta.css'in
   koşulsuz kuralı bunu eziyordu. 861–1024 aralığında hem hamburger hem tüm
   bağlantılar görünüyordu. Sınır main.css ile aynı: 1024px. */
@media (max-width: 1024px) {
  .nav-links,
  .nav .lang-toggle,
  .nav-cta { display: none !important; }
  .nav .hamburger { display: flex !important; }
}
/* menü öğeleri 1100-1200 bandında iki satıra sarıyordu */
.nav-links { flex-wrap: nowrap; }
.nav-links > li > a,
.nav-cta,
.nav-phone { white-space: nowrap; }

/* K2 — mobil hero'da başlık ile metin arasındaki boşluk fazla büyüktü */
@media (max-width: 960px) {
  .hero-vgap { min-height: 4svh; max-height: 90px; }
}

/* ===========================================================================
   720° ve GLOBAL ÇÖZÜMLER — artık yan yana değil, alt alta iki ayrı bölüm (73)
   =========================================================================== */
.orbit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.5vw, 80px);
  /* start: çember çok yüksek olduğu için `center` sol sütunu aşağı itiyor ve
     bölümün üstünde büyük bir ölü alan bırakıyordu (buton ile başlık arası). */
  align-items: start;
}
.orbit-layout > .orbit-wrap { align-self: center; }
.orbit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.orbit-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 14px; border-radius: 14px;
  transition: background .3s ease;
  cursor: default;
}
.orbit-list li:hover { background: color-mix(in srgb, var(--ac) 8%, transparent); }
.ol-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent);
  color: var(--ac);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.ol-ico svg { width: 17px; height: 17px; }
.orbit-list li:hover .ol-ico { transform: translateY(-2px); box-shadow: 0 0 18px -4px var(--ac); }
.ol-txt b { display: block; font-size: 15px; font-weight: 400; color: #fff; letter-spacing: -.01em; }
.ol-txt em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 300; color: var(--muted-2); line-height: 1.45; }
/* listedeki madde ile dairedeki düğüm birbirini vurgular */
.orbit-node.is-linked { border-color: var(--ac); box-shadow: 0 0 28px color-mix(in srgb, var(--ac) 55%, transparent); scale: 1.14; }

/* Yörüngedeki düğümlerin çerçeve ışığı sürekli yanıp sönsün (28 Tem).
   Her düğüm kendi renginde ve kendi gecikmesiyle nefes alıyor; sıra sırayla
   dolaşıyormuş gibi dursun diye gecikme `--nd` ile veriliyor.
   Hover / bağlı durumda animasyon durur, tam parlaklığa geçer. */
.orbit-node {
  animation: nodeGlow 3.4s ease-in-out infinite;
  animation-delay: var(--nd, 0s);
}
@keyframes nodeGlow {
  0%, 100% {
    border-color: var(--border-strong);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  }
  50% {
    border-color: color-mix(in srgb, var(--ac) 75%, transparent);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.6),
                0 0 22px color-mix(in srgb, var(--ac) 45%, transparent),
                inset 0 0 14px -6px color-mix(in srgb, var(--ac) 70%, transparent);
  }
}
.orbit-node:hover, .orbit-node.is-linked { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .orbit-node { animation: none; } }
.orbit-wrap { display: flex; justify-content: center; }
/* Çember büyütüldü (28 Tem) — sağ sütun da genişletildi ki sığsın. Düğüm boyu
   viewport'a bağlı olduğu için ayrıca büyütülüyor, yoksa çember büyürken
   düğümler küçük kalıyor.
   Seçiciler `.orbit-wrap` ile başlıyor: bu bileşenin kendi stilleri index.ejs
   gövdesindeki <style> bloğunda ve orası rev2.css'ten SONRA geldiği için eşit
   özgüllükte kural kazanamıyor. */
.orbit-wrap .orbit { width: min(800px, 100%); }
.orbit-wrap .orbit-node { width: clamp(66px, 13vw, 104px); }
.orbit-wrap .orbit-node-in svg { width: clamp(27px, 3.6vw, 38px); }
.orbit-wrap .orbit-core-big { font-size: clamp(34px, 5.6vw, 56px); }
@media (max-width: 1024px) {
  .orbit-layout { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 50px); }
  .orbit-wrap { order: -1; }
}
@media (max-width: 620px) { .orbit-list { grid-template-columns: 1fr; } }

/* --- global çözümler --- */
.gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 32px); }

/* ---------------------------------------------------------------------------
   Global Çözümler — ortada noktalı dünya haritası, iki yanda ülke kartları
   (28 Tem revizesi). Harita canvas'a JS ile çiziliyor; iğneler ve aradaki hat
   gerçek koordinatlardan geliyor.
   --------------------------------------------------------------------------- */
.gl-stage {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.85fr) minmax(0, .88fr);
  gap: clamp(14px, 1.6vw, 28px);
  align-items: center;
}
.wmap {
  position: relative;
  width: 100%; aspect-ratio: 2.54 / 1;
  border-radius: clamp(16px, 1.6vw, 26px);
  overflow: visible;
}
.wmap-dots { position: absolute; inset: 0; display: block; }
.wmap-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wmap-arc path { fill: none; vector-effect: non-scaling-stroke; }
/* sabit soluk hat + üstünde akan parlak parça */
.wmap-arc-l { stroke: rgba(165,175,235,.5); stroke-width: 1.2; stroke-dasharray: 3 4; }
/* kartlarda başlık dar sütunda kırılmasın */
.gl-stage .gl-card-head b { font-size: clamp(17px, 1.4vw, 21px); }
.gl-stage .gl-card { padding: clamp(20px, 2vw, 30px); }
.wmap-arc-d {
  stroke: #A5B4FC; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 14 260; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(124,131,255,.9));
  animation: wmapFlow 4.2s linear infinite;
}
@keyframes wmapFlow { to { stroke-dashoffset: -274; } }

.wmap-pin {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px;
}
.wmap-dot {
  position: relative; flex-shrink: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--pc) 70%, transparent);
}
/* dışa yayılan halka */
.wmap-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--pc);
  animation: wmapPing 2.6s ease-out infinite;
}
@keyframes wmapPing {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.wmap-tag {
  font-family: var(--font-head); font-size: 13px; font-weight: 500;
  letter-spacing: .01em; color: #fff; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(10,13,20,.72);
  border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wmap-tag small { font-size: 10.5px; letter-spacing: .12em; color: var(--muted-2); margin-left: 4px; }
/* Londra etiketi sola, Singapur sağa açılsın ki kıtaların üstünü kapatmasın */
.wmap-pin-gb { flex-direction: row-reverse; }

@media (max-width: 1180px) {
  .gl-stage { grid-template-columns: 1fr 1fr; }
  .wmap { grid-column: 1 / -1; order: -1; margin-bottom: clamp(10px, 2vw, 26px); }
}
@media (max-width: 720px) {
  .gl-stage { grid-template-columns: 1fr; }
  .wmap-tag { font-size: 11.5px; padding: 4px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .wmap-arc-d, .wmap-dot::after { animation: none; }
}
.gl-card {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(26px, 2.8vw, 44px);
  border-radius: clamp(18px, 2vw, 28px);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--gc) 16%, transparent), transparent 62%),
    rgba(255,255,255,.02);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s;
}
.gl-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gc) 55%, transparent); }
.gl-card-head { display: flex; align-items: center; gap: 16px; }
.gl-card-head img { width: 56px; height: auto; border-radius: 7px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.8); }
.gl-card-head b { display: block; font-family: var(--font-head); font-size: clamp(19px, 1.8vw, 26px); font-weight: 400; letter-spacing: -.02em; color: #fff; }
.gl-card-head em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--muted-2); }
.gl-list { display: grid; gap: 12px; }
.gl-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 300; color: var(--muted); line-height: 1.5; }
.gl-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc) 32%, transparent);
}
.gl-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--gc);
  transition: gap .35s cubic-bezier(.16,1,.3,1);
}
/* icon.ejs boyutsuz <svg> üretiyor — sınıf kuralı olmayan yerde tarayıcı
   300×150 varsayılanına düşüyor. Yeni bileşenlerde açıkça boyutlandırıyoruz. */
.gl-go svg { width: 15px; height: 15px; flex-shrink: 0; }
.gl-card:hover .gl-go { gap: 15px; }
.gl-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(26px, 3vw, 46px);
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid var(--border);
}
.gl-stats { display: flex; gap: clamp(24px, 3.6vw, 64px); flex-wrap: wrap; }
.gl-stats span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted-2); }
.gl-stats b { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 40px); font-weight: 400; letter-spacing: -.03em; color: #fff; line-height: 1.1; margin-bottom: 4px; }
.gl-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 820px) { .gl-grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   İÇ SAYFALAR — ana sayfayla aynı düzen
   Toplantı (373): "içerik sayfalarını da bunlardan kopya çekebilirsin."
   Buradaki kurallar tüm alt sayfalara (hizmetler, ürünler, paketler, global,
   iletişim, referanslar, blog, detay sayfaları) birlikte uygulanır.
   =========================================================================== */

/* --- sayfa başlığı: ortalanmış değil, ana sayfadaki gibi sola hizalı --- */
/* 29 Tem — üstteki ölü alan. `main` zaten 128px veriyor (yapışkan navbar payı,
   navbar 80px'te bitiyor), üstüne 84px daha binince kırıntı yolundan önce 128px
   boşluk kalıyordu. Navbar payı `main`'de kalsın, bölüm kendi payını küçültsün. */
.phead { text-align: left; padding-top: clamp(6px, 1vw, 18px); padding-bottom: clamp(44px, 5.5vw, 92px); }
.phead > .container { position: relative; z-index: 1; }
.phead-crumb { margin: 0 0 clamp(18px, 2vw, 30px); justify-content: flex-start; font-size: 13.5px; }
.phead-eyebrow { margin-bottom: clamp(16px, 1.8vw, 26px); }
.phead h1 {
  margin-inline: 0;
  font-size: clamp(33px, 5.1vw, 74px);
  font-weight: 400; letter-spacing: -.028em; line-height: 1.06;
  max-width: 22ch;
}
.phead-sub { margin-inline: 0; margin-top: clamp(18px, 2vw, 28px); max-width: 62ch; }

/* --- her bölümün arkası boş kalmasın: markup gerektirmeyen ortam ışığı (K2) --- */
main > .section:nth-of-type(odd)::before,
main > .section:nth-of-type(even)::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(300px, 34vw, 560px); aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  animation: orbBreathe 15s ease-in-out infinite;
}
main > .section:nth-of-type(odd)::before {
  left: -8%; top: 6%;
  background: radial-gradient(circle, rgba(108,53,178,.4), transparent 68%);
}
main > .section:nth-of-type(even)::after {
  right: -6%; bottom: 4%;
  background: radial-gradient(circle, rgba(60,67,221,.32), transparent 68%);
  animation-delay: 5s;
}
/* açık bantlarda ve kendi ışığı olan bölümlerde kapalı */
.section-light::before, .section-light::after,
.pd-light::before, .pd-light::after,
.section:has(> .orbfield)::before, .section:has(> .orbfield)::after { display: none; }

/* --- bölüm başlıkları site genelinde sola hizalı ---
   Ana sayfada bazıları sola, bazıları ortaya hizalıydı; iç sayfalarda da karışıktı.
   Tek kural: bölüm başlıkları sola. (Ortalanması gereken CTA panelleri istisna.) */
.section > .container > .section-head,
.section-light .section-head,
.pd-light .section-head {
  text-align: left;
  align-items: flex-start;
  margin-inline: 0;
  max-width: none;
}
.section > .container > .section-head p,
.section-light .section-head p,
.pd-light .section-head p { margin-inline: 0; max-width: 64ch; }
.section > .container > .section-head h2::after { margin-inline: 0; }
/* ortalanması doğru olan yerler */
.cta-band .section-head,
.ppanel .section-head { text-align: center; align-items: center; margin-inline: auto; }

/* --- hizmet / ürün ızgaraları boydan boya (K1) --- */
.pgrid { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); border-left: 0; }
.pgrid-cell:nth-child(3n) { border-right: 0; }
@media (max-width: 1100px) { .pgrid-3 .pgrid-cell:nth-child(3n) { border-right: 1px solid var(--border); } }

/* --- paket tablosu da "bütünsel": ayrı kutular değil, tek parça --- */
.price-grid {
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
}
.price-grid .pcard {
  border: 0; border-radius: 0;
  border-right: 1px solid var(--border);
  background: none; backdrop-filter: none;
  transition: background .35s ease;
}
.price-grid .pcard:last-child { border-right: 0; }
.price-grid .pcard.hot { background: color-mix(in srgb, var(--primary) 9%, transparent); transform: none; }
.price-grid .pcard:hover { background: rgba(255,255,255,.035); }
@media (max-width: 900px) {
  .price-grid .pcard { border-right: 0; border-bottom: 1px solid var(--border); }
  .price-grid .pcard:last-child { border-bottom: 0; }
}

/* --- kart dili her sayfada aynı --- */
.grid-2 > .glass.card, .grid-3 > .glass.card, .duo > .glass.card {
  border-color: var(--border-strong);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s;
}
.grid-2 > .glass.card:hover, .grid-3 > .glass.card:hover, .duo > .glass.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.2);
}

/* --- detay sayfalarının çerçeveleri de geniş --- */
.pd-frame-wide { max-width: min(1360px, 100%); }

/* --- iletişim sayfası ana sayfadaki form diliyle aynı --- */
.contact-layout > .glass.card { border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  main > .section::before, main > .section::after { animation: none; opacity: .3; }
}

/* ===========================================================================
   HERO — video içindeki "Toserof" yazısı sağda kalsın, başlık okunur olsun
   Revize: yazı, videodaki dev logonun üstüne biniyor ve okunmuyordu.
   1) Video yatayda kaydırıldı → logo sağ tarafa çekildi
   2) Sol sütun (metnin durduğu yer) belirgin koyulaştırıldı, sağ taraf açık kaldı
   3) Başlık genişliği sınırlandı → sağ yarıya taşmıyor
   =========================================================================== */
/* Ölçüm: logo, `cover` sonrası ekran genişliğinin ~%62'sini kaplıyor. Bu yüzden
   sadece sağa itmek çözmüyor — sağ kenardan taşıyor. Çözüm: SAĞ kenardan
   sabitleyip küçültmek, sonra biraz daha sağa kaydırmak.
     scale(.8)      → logo %62'den ~%50 genişliğe iner, sağ kenar yerinde kalır
     translateX(12%)→ ekranda ~%9,6 sağa kayar
   Sonuç: logo ~%45–%94 aralığında, tamamı görünür; başlık %39'da bitiyor.
   Solda kalan boşluk videoyla kaplanmıyor ama zaten %96 opak perdenin altında. */
.hero-has-video { background: #090B10; }
.hero-has-video .hero-video,
.hero-has-video .hero-still {
  transform-origin: right center;
  /* translateY: boş kalan bandın çoğu üste (navbar'ın altına) alınıyor,
     alttaki siyah alan küçülüyor */
  transform: scale(.8) translateX(12%) translateY(6%);
  /* Video %80'e küçültüldüğü için altında ve üstünde zeminin düz siyahı kalıyor;
     görüntünün kenarı keskin bir çizgi olarak görünüyordu. Kenarlar maskeyle
     söndürülüyor — siyaha yumuşak geçiyor. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 76%, transparent 100%);
}

.hero-has-video .hero-scrim {
  background:
    /* metin sütunu: neredeyse opak → sağa doğru tamamen açılıyor */
    linear-gradient(90deg,
      rgba(9,11,16,.96) 0%,
      rgba(9,11,16,.92) 30%,
      rgba(9,11,16,.72) 46%,
      rgba(9,11,16,.28) 68%,
      rgba(9,11,16,0)   88%),
    /* alt kenar */
    linear-gradient(0deg, rgba(9,11,16,.8) 0%, rgba(9,11,16,0) 44%);
}

/* başlık sağ yarıya girmesin */
.hero-has-video .hero-title { max-width: 15ch; }
.hero-has-video .lead { max-width: 46ch; }

/* dar ekranlarda logo iyice sağa kaçsın ve perde daha da güçlensin */
@media (max-width: 1180px) {
  .hero-has-video .hero-video,
  /* Bu bantta `cover` yatayda da kırpıyor, logo ekranda daha da büyük görünüyor —
     daha fazla küçültmek gerekiyor. */
  .hero-has-video .hero-still { transform: scale(.68) translateX(14%) translateY(9%); }
  .hero-has-video .hero-scrim {
    background:
      linear-gradient(90deg,
        rgba(9,11,16,.97) 0%,
        rgba(9,11,16,.93) 48%,
        rgba(9,11,16,.74) 72%,
        rgba(9,11,16,.4)  100%),
      linear-gradient(0deg, rgba(9,11,16,.82) 0%, rgba(9,11,16,0) 46%);
  }
  .hero-has-video .hero-title { max-width: 18ch; }
}

/* mobilde yığılınca metin videonun tamamının üstünde — perde her yerde koyu */
@media (max-width: 960px) {
  /* mobilde metin tüm genişliği kapladığı için logoyu kaydırmanın faydası yok;
     okunabilirliği tamamen perde sağlıyor */
  .hero-has-video .hero-video,
  .hero-has-video .hero-still {
    transform: none;
    /* burada video tüm alanı kaplıyor, sönümlemeye gerek yok */
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-has-video .hero-scrim {
    background:
      /* sağ kenar biraz açık kalsın ki logo tamamen kaybolmasın */
      linear-gradient(90deg, rgba(9,11,16,.96) 0%, rgba(9,11,16,.92) 58%, rgba(9,11,16,.62) 100%),
      linear-gradient(0deg, rgba(9,11,16,.9) 0%, rgba(9,11,16,.5) 40%, rgba(9,11,16,.3) 100%);
  }
  .hero-has-video .hero-title { max-width: none; }
}

/* ===========================================================================
   HERO SAHNESİ — scroll ile gelen tanıtım filmi (Penta referansı)
   Hero, sahne yüksekliği boyunca yapışkan kalır. Kaydırdıkça:
     · başlık ve metin soluyor, hafifçe yukarı kayıyor
     · tanıtım kartı sağ üstten süzülüp yerine oturuyor
   İlerleme (--hp, 0→1) JS tarafından yazılıyor.
   =========================================================================== */
.herostage {
  /* Sahne artık hero + 2. bölümü birlikte sarar; yüksekliği içeriğinden gelir.
     Hero, sarmalayıcının sonuna kadar yapışkan kalır (slidewrap düzeneği). */
  position: relative;
  margin-top: calc(-1 * clamp(88px, 8vw, 150px));
}
.herostage > .hero-has-video {
  position: sticky; top: 0;
  height: 100svh; min-height: 100svh;
  margin-top: 0;
  overflow: hidden;
}

/* hero metni kaydırdıkça geri çekilsin */
.herostage .hero-left {
  opacity: calc(1 - var(--hp, 0) * .82);
  transform: translateY(calc(var(--hp, 0) * -46px));
  will-change: opacity, transform;
}
.herostage .hero-scroll { opacity: calc(1 - var(--hp, 0) * 2); }

/* tanıtım kartı */
.hero-reel {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 5vw, 96px);
  top: 50%;
  width: clamp(280px, 42vw, 660px);
  pointer-events: none;
  /* girişte: yukarıda, küçük ve şeffaf → yerine otururken büyür */
  opacity: var(--hp, 0);
  transform:
    translateY(calc(-50% + (1 - var(--hp, 0)) * -14vh))
    scale(calc(.82 + var(--hp, 0) * .18));
  /* opacity scroll'a bağlı sürekli bir değer — transition eklemek onu geriden
     getiriyor, kaldırıldı */
  will-change: opacity, transform;
}
.hero-reel.is-live { pointer-events: auto; }

.hero-reel-card {
  display: block; width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid rgba(255,255,255,.18);
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: #0B0E15;
  cursor: pointer;
  box-shadow: 0 60px 130px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s;
}
.hero-reel.is-live .hero-reel-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.38); }
.hero-reel-shot,
.hero-reel-vid { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 960px) {
  /* 29 Tem — mobilde tanıtım kartı tamamen kaldırıldı.
     Video yüklenmediği için içi yalnızca poster görseliydi; hero'yu uzatıyor
     ve tıklanınca 9,8 MB'lık videoyu indiriyordu. Masaüstünde aynen duruyor. */
  .hero-reel { display: none; }
  .herostage .hero-left { opacity: calc(1 - var(--hp, 0) * .7); }

  /* Kart kalkınca hero bomboş kaldı: 878px'lik ekranda içerik 471px, üstte
     187px + altta 219px ölü alan. Yükseklik artık ekrana değil İÇERİĞE göre —
     navbar payı üstte, ölçülü bir nefes payı altta. */
  .herostage > .hero-has-video {
    height: auto; min-height: auto;
    padding-top: clamp(104px, 13vh, 128px);
    padding-bottom: clamp(52px, 7vh, 78px);
  }
  /* metin bloğu dikeyde ortalanmaya çalışmasın, yukarıdan aksın */
  .hero-pro { display: block; }
  .hero-pro .hero-grid { align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .herostage > .hero-has-video { position: static; height: auto; }
  .hero-reel { position: static; opacity: 1; transform: none; width: min(560px, 100%); margin: 28px 0 0; }
  .herostage .hero-left { opacity: 1; transform: none; }
}

/* ===========================================================================
   1. BÖLÜM → 2. BÖLÜM GEÇİŞİ
   Revize (28 Tem): tek hamlelik "yukarı zıpla" animasyonu kaldırıldı. Artık
   slogan → "Kendi Geliştirdiğimiz Teknoloji Ürünleri" geçişiyle aynı düzenek:
   hero yapışkan durur, "Uçtan Uca Süreç Yönetimi" bölümü scroll'a bağlı olarak
   onun ÜZERİNE kayar. Yukarı geri kaydırınca da aynı şekilde geri iner.
     · hero  → sticky, z-index 1
     · bölüm → normal akış, z-index 5, opak zemin + yuvarlatılmış üst kenar
     · aradaki margin-top = kartın yerine oturması için hero'nun yalnız kaldığı
       mesafe; o bitince bölüm alttan yükselmeye başlar.
   =========================================================================== */
.herostage > .hero-has-video { z-index: 1; }

.herostage > .bp-sec { margin-top: 62svh; }

.bp-sec {
  position: relative;
  z-index: 5;
  /* üstüne bindiği hero'yu tamamen kapatması için opak zemin */
  background: linear-gradient(180deg, #0C0F18 0%, #090B10 62%);
  border-top-left-radius: clamp(18px, 2.4vw, 40px);
  border-top-right-radius: clamp(18px, 2.4vw, 40px);
  /* tepede gölge → alttaki bölümden ayrılıp üste binmiş görünsün */
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,.95);
}
/* üst kenarda ince ışık çizgisi — slaydın kenarı */
.bp-sec::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 960px) {
  /* 48svh (≈420px) idi: hero tam ekranken kartın yerine oturduğu mesafeydi.
     Hero mobilde içeriğine göre kısalınca (ve tanıtım kartı kalkınca) bu pay
     ortada kocaman boş bir blok olarak kaldı — hero bitiyor, alttaki bölümün
     içeriği 420px sonra başlıyordu. Beklenecek bir şey kalmadığı için sıfır. */
  .herostage > .bp-sec { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .herostage > .bp-sec { margin-top: 0; }
}

/* ===========================================================================
   BÜLTEN BÖLÜMÜ — arka plandaki 3D sahne (28 Tem)
   "Çok boş duruyor, sağ sol üst alt" → metnin çevresine CSS 3D nesneler:
   tel kafes küpler, eğik halkalar, cam küreler, süzülen paneller ve dipte
   perspektif ızgara. Hepsi `pointer-events:none`, görsel dosya kullanılmıyor.
   =========================================================================== */
.nl-sec { position: relative; overflow: hidden; }
.nl-sec > .container { position: relative; z-index: 2; }
.nl-scene {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  perspective: 1000px;
  /* kenarlarda yumuşasın, metnin arkasında sakinleşsin */
  -webkit-mask: radial-gradient(120% 90% at 50% 50%, transparent 18%, #000 62%);
          mask: radial-gradient(120% 90% at 50% 50%, transparent 18%, #000 62%);
}

/* --- perspektif zemin ızgarası --- */
.nl-grid {
  position: absolute; left: -25%; right: -25%; bottom: -14%; height: 62%;
  background:
    repeating-linear-gradient(90deg, rgba(150,160,220,.16) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg,  rgba(150,160,220,.13) 0 1px, transparent 1px 68px);
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(0deg, #000, transparent 78%);
          mask: linear-gradient(0deg, #000, transparent 78%);
  animation: nlGrid 16s linear infinite;
}
@keyframes nlGrid { to { background-position: 0 68px, 0 68px; } }

/* --- tel kafes küpler --- */
.nl-cube {
  position: absolute;
  width: var(--s, 120px); height: var(--s, 120px);
  transform-style: preserve-3d;
  animation: nlSpin var(--d, 26s) linear infinite;
}
.nl-cube i {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--c, #A78BFA) 55%, transparent);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--c, #A78BFA) 10%, transparent), transparent 65%);
  box-shadow: 0 0 22px -8px var(--c, #A78BFA);
}
.nl-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.nl-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.nl-cube i:nth-child(3) { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.nl-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.nl-cube i:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); }
.nl-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes nlSpin {
  0%   { transform: rotateX(-22deg) rotateY(0deg)   translateY(0); }
  50%  { transform: rotateX(-22deg) rotateY(180deg) translateY(-18px); }
  100% { transform: rotateX(-22deg) rotateY(360deg) translateY(0); }
}
.nl-cube-a { --s: 130px; --c: #A78BFA; --d: 28s; left: 7%;  top: 16%; }
.nl-cube-b { --s: 84px;  --c: #22D3EE; --d: 34s; right: 9%; top: 22%; animation-delay: -6s; }
.nl-cube-c { --s: 62px;  --c: #DCAADC; --d: 22s; left: 17%; bottom: 14%; animation-delay: -12s; }

/* --- eğik halkalar --- */
.nl-ring {
  position: absolute;
  width: var(--s, 260px); height: var(--s, 260px);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c, #7C83FF) 45%, transparent);
  box-shadow: 0 0 40px -14px var(--c, #7C83FF), inset 0 0 40px -22px var(--c, #7C83FF);
  animation: nlTilt var(--d, 30s) linear infinite;
}
@keyframes nlTilt {
  0%   { transform: rotateX(72deg) rotateZ(0deg); }
  100% { transform: rotateX(72deg) rotateZ(360deg); }
}
.nl-ring-a { --s: 300px; --c: #7C83FF; --d: 30s; right: 4%;  bottom: 12%; }
.nl-ring-b { --s: 200px; --c: #22D3EE; --d: 24s; left: 3%;   bottom: 22%; animation-direction: reverse; }

/* --- cam küreler --- */
.nl-orb {
  position: absolute; border-radius: 50%;
  width: var(--s, 90px); height: var(--s, 90px);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.5), transparent 42%),
    radial-gradient(circle closest-side at 50% 50%, color-mix(in srgb, var(--c) 42%, transparent), transparent 72%);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 24px 60px -26px var(--c), inset 0 -10px 26px -14px var(--c);
  animation: nlFloat var(--d, 9s) ease-in-out infinite;
}
@keyframes nlFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-22px) scale(1.04); }
}
.nl-orb-a { --s: 96px; --c: #6C35B2; --d: 11s; right: 21%; top: 12%; }
.nl-orb-b { --s: 54px; --c: #3C43DD; --d: 8s;  left: 27%;  bottom: 9%; animation-delay: -3s; }

/* --- süzülen cam paneller --- */
.nl-plate {
  position: absolute;
  width: var(--w, 190px); height: var(--h, 120px);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.12);
  /* backdrop-filter YOK: perspektif + maske ile birlikte kompozisyonu bozuyor,
     "Abone Ol" düğmesi ve bazı metinler kayboluyordu (render'da doğrulandı).
     Cam etkisi zaten gradyan + kenarlıkla veriliyor. */
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.95);
  animation: nlPlate var(--d, 13s) ease-in-out infinite;
}
@keyframes nlPlate {
  0%, 100% { transform: rotateX(18deg) rotateY(-24deg) translateY(0); }
  50%      { transform: rotateX(12deg) rotateY(-16deg) translateY(-16px); }
}
.nl-plate-a { --w: 210px; --h: 130px; --d: 15s; left: 2%;  top: 44%; }
.nl-plate-b { --w: 150px; --h: 96px;  --d: 12s; right: 3%; top: 48%; animation-delay: -5s; }

@media (max-width: 1100px) {
  .nl-cube-c, .nl-plate-a, .nl-plate-b, .nl-orb-b { display: none; }
  .nl-cube-a { --s: 88px; left: 3%; }
  .nl-cube-b { --s: 62px; right: 4%; }
  .nl-ring-a { --s: 200px; }
  .nl-ring-b { --s: 140px; }
}
@media (max-width: 700px) { .nl-scene { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .nl-grid, .nl-cube, .nl-ring, .nl-orb, .nl-plate { animation: none; }
}

/* ---------------------------------------------------------------------------
   fit / kesilme düzeltmeleri
   --------------------------------------------------------------------------- */
img, video, canvas, svg { max-width: 100%; }
.tl-img img, .pf-img img, .bcard-img img { width: 100%; height: 100%; object-fit: cover; }
.build-device { max-width: min(440px, 100%); }
.bs-img { object-fit: cover; }

/* ---------------------------------------------------------------------------
   K4 — boş buton kalmayacak
   --------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.btn:hover::before { opacity: 1; }
.btn-ghost:hover { border-color: rgba(255,255,255,.42); }
.btn svg { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.btn:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .orbfield i { animation: none; opacity: .28; }
}

/* ===========================================================================
   FOOTER — hareketli arka plan
   Karakter: bulanık renk bulutu değil, koyu zeminde kesişen KESKİN cam
   bıçaklar. Her bıçak bir elipsin içinden ikinci bir elips maskeyle
   çıkarılarak elde ediliyor (hilal formu); kenarlarındaki renk ayrışması
   iki yöne kaydırılmış drop-shadow ile, gerçek bir mercek kırılması gibi.
   Saf CSS, JS yok; yalnızca transform animasyonu dönüyor.
   =========================================================================== */
.footer {
  position: relative; overflow: hidden; isolation: isolate; border-top: 0;
  background: linear-gradient(180deg,
    rgba(9,11,16,0)   0,
    rgba(9,11,16,.30) 110px,
    rgba(9,11,16,.72) 240px,
    #090B10           400px);
}
.footer > .container { position: relative; z-index: 2; }

.ft-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 90px, #000 300px);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 90px, #000 300px);
}

/* --- cam yaylar ---
   ÖNEMLİ: bu efekt bilerek TEK bir katmanda duruyor. Önceki kurguda yedi
   ayrı dev daire vardı; her biri `will-change` + çift `drop-shadow` +
   `mix-blend-mode` taşıyordu. Tarayıcı bu kadar büyük kompozisyon katmanını
   taşıyamayıp metin katmanlarını düşürüyordu — footer yazıları gidip
   geliyor, kimi zaman hiç çizilmiyordu. Artık halkalar tek elemanın
   `repeating-radial-gradient`'i; ne ek katman var ne pahalı filtre. --- */
.ft-rings, .ft-chroma {
  position: absolute;
  left: -20%; top: -20%; width: 140%; height: 140%;
  display: block;
}
.ft-rings {
  /* renk: camın ışık dağılımı — sol sönük, orta parlak */
  background: linear-gradient(101deg,
    rgba(26,30,42,.85)    0%,
    rgba(104,116,142,.92) 24%,
    rgba(234,240,252,1)   44%,
    rgba(178,190,216,.96) 60%,
    rgba(74,84,106,.85)   78%,
    rgba(22,26,36,.75)   100%);
  /* biçim: iç içe halkalar MASKE olarak — yalnız halka bantları görünür */
  -webkit-mask-image: repeating-radial-gradient(circle at 32% 118%,
    transparent      0,   transparent      108px,
    rgba(0,0,0,.16) 124px, #000           144px,
    #000           172px, rgba(0,0,0,.16) 192px,
    transparent    208px, transparent    296px);
          mask-image: repeating-radial-gradient(circle at 32% 118%,
    transparent      0,   transparent      108px,
    rgba(0,0,0,.16) 124px, #000           144px,
    #000           172px, rgba(0,0,0,.16) 192px,
    transparent    208px, transparent    296px);
  opacity: .95;
  animation: ftGlide 19s ease-in-out infinite;
}
/* kromatik kırılma: halkaların iç kenarına düşen renk bandı */
.ft-chroma {
  background: conic-gradient(from 188deg at 32% 118%,
    transparent            0deg,
    rgba(255,48,128,.90)  10deg,
    rgba(255,186,48,.78)  20deg,
    rgba(104,255,168,.74) 30deg,
    rgba(48,190,255,.92)  42deg,
    rgba(160,80,255,.82)  54deg,
    transparent           70deg,
    transparent          360deg);
  -webkit-mask-image: repeating-radial-gradient(circle at 32% 118%,
    transparent      0,   transparent     114px,
    rgba(0,0,0,.55) 128px, #000           140px,
    #000            152px, rgba(0,0,0,.55) 166px,
    transparent    180px, transparent    296px);
          mask-image: repeating-radial-gradient(circle at 32% 118%,
    transparent      0,   transparent     114px,
    rgba(0,0,0,.55) 128px, #000           140px,
    #000            152px, rgba(0,0,0,.55) 166px,
    transparent    180px, transparent    296px);
  mix-blend-mode: screen;
  opacity: .85;
  animation: ftGlide 19s ease-in-out infinite;
}

/* Tek yörünge: halkalar birlikte, çok yavaş, kesintisiz kayar. Gradyan
   elemanla birlikte taşındığı için hiçbir yay parlayıp sönmez. */
@keyframes ftGlide {
  0%   { transform: translate(0, 0)          scale(1);    }
  20%  { transform: translate(175px, -100px) scale(1.08); }
  40%  { transform: translate(310px, 22px)   scale(1.16); }
  60%  { transform: translate(230px, 148px)  scale(1.09); }
  80%  { transform: translate(82px, 112px)   scale(1.03); }
  100% { transform: translate(0, 0)          scale(1);    }
}

/* --- okunurluk perdesi --- */
.ft-veil {
  position: absolute; inset: 0; display: block;
  background:
    /* sol sütun: %24'e kadar TAM opak zemin — yay buraya hiç giremez */
    linear-gradient(90deg,
      #090B10 0%, #090B10 24%,
      rgba(9,11,16,.74) 32%, rgba(9,11,16,.32) 40%, transparent 49%),
    /* sağdaki iri menü de aynı şekilde korumada */
    linear-gradient(270deg,
      #090B10 0%, #090B10 20%,
      rgba(9,11,16,.72) 28%, rgba(9,11,16,.30) 36%, transparent 45%),
    linear-gradient(180deg, rgba(9,11,16,.30) 0%, transparent 16%, transparent 88%, rgba(9,11,16,.34) 100%);
}

@media (max-width: 700px) {
  .ft-rings { opacity: .8; }
  .ft-chroma { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-rings, .ft-chroma { animation: none; }
}

/* footer menüsü: Penta ölçeğinde iri başlıklar (penta.css'teki
   clamp(28px,3.7vw,54px)/300 ezilmeli — burası daha sonra yükleniyor) */
.ft-mega a {
  font-size: clamp(34px, 4.7vw, 72px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: rgba(255,255,255,.74);
}
.ft-mega { gap: clamp(2px, .5vw, 8px); }
.ft-mega .btn { margin-top: 34px; font-size: 16px; }

/* footer sol sütun — Penta ölçeği: iletişim bilgileri okunur büyüklükte.
   main.css 13-14px veriyordu, rev2 sonra yüklendiği için burası kazanıyor. */
.ft-desc { font-size: 17px; line-height: 1.6; max-width: 460px; margin-bottom: 22px; }
.ft-loc { font-size: 15px; margin-bottom: 24px; }
.ft-loc svg { width: 17px; height: 17px; }
.ft-social a { width: 46px; height: 46px; border-radius: 13px; }
.ft-social a svg { width: 18px; height: 18px; }
.ft-col h4 { font-size: 14px; letter-spacing: .16em; margin-bottom: 22px; }
.ft-contact-row { gap: 13px; margin-bottom: 18px; }
.ft-contact-row svg { width: 18px; height: 18px; margin-top: 3px; }
.ft-contact-row a, .ft-contact-row span,
.ft-col a, .ft-contact a, .ft-contact span { font-size: 18px; line-height: 1.5; }
/* mega menü bağlantıları yukarıdaki iri ölçeğini korusun */
.ft-mega a { font-size: clamp(34px, 4.7vw, 72px); line-height: 1.1; }
.ft-copy, .ft-legal a { font-size: 14px; }

/* hareketli zemin üzerinde okunurluk: renkler açıldı, metne ince gölge */
.footer { --ft-sh: 0 1px 3px rgba(0,0,0,.9), 0 2px 20px rgba(0,0,0,.85); }
.ft-desc { color: rgba(255,255,255,.90); text-shadow: var(--ft-sh); }
.ft-loc { color: rgba(255,255,255,.74); text-shadow: var(--ft-sh); }
.ft-col h4 { color: rgba(255,255,255,.94); text-shadow: var(--ft-sh); font-weight: 600; }
.ft-contact-row a, .ft-contact-row span,
.ft-col a, .ft-contact a, .ft-contact span { color: rgba(255,255,255,.92); text-shadow: var(--ft-sh); }
.ft-contact-row svg, .ft-loc svg { color: rgba(255,255,255,.60); }
.ft-mega a { color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 3px 28px rgba(0,0,0,.8); }
.ft-mega a:hover { color: #fff; }
.ft-copy, .ft-legal a { color: rgba(255,255,255,.64); text-shadow: var(--ft-sh); }
.ft-social a { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); background: rgba(9,11,16,.42); }
.ft-bottom { border-top-color: rgba(255,255,255,.14); }



/* manifesto bölümü — tek sakin ışık huzmesi, başka dekor yok */
.circles-sec {
  position: relative;
  padding-block: clamp(64px, 8vw, 120px);
  overflow: hidden;
}
.circles-sec::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(58% 74% at 50% 46%, rgba(124,58,237,.18), transparent 72%),
    radial-gradient(38% 52% at 16% 74%, rgba(56,189,248,.10), transparent 74%);
  pointer-events: none; z-index: 0;
  animation: circGlow 18s ease-in-out infinite;
}
@keyframes circGlow {
  0%, 100% { transform: scale(1)    translateX(0);    opacity: .9; }
  50%      { transform: scale(1.08) translateX(2.5%); opacity: 1;  }
}
.circles-sec .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .circles-sec::before { animation: none; } }

/* --- manifesto kıvılcımları: metnin çevresindeki boşluğu dolduruyor --- */
.circ-sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.circ-sparks i {
  position: absolute; display: block;
  width: var(--sz, 2px); height: var(--sz, 2px); border-radius: 50%;
  filter: drop-shadow(0 0 9px rgba(186,158,255,.95)) drop-shadow(0 0 18px rgba(120,90,255,.5));
  background: radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.98) 30%,
    rgba(206,186,255,.85) 55%,
    rgba(140,110,255,.45) 74%,
    transparent 88%);
  opacity: 0;
  animation: sparkRise var(--du, 8s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
/* Kıvılcımlar hiç kaybolmuyor: taban parlaklıkta hep ekrandalar, sırayla
   parlayıp sönüyorlar. Tamamen sönerlerse ekran çoğu an boş kalıyordu. */
@keyframes sparkRise {
  0%   { opacity: calc(.58 * var(--op, 1)); transform: translate(0, 18px) scale(.8); }
  25%  { opacity: calc(1 * var(--op, 1));   transform: translate(calc(var(--dx, 0px) * .35), 4px) scale(1.18); }
  55%  { opacity: calc(.72 * var(--op, 1)); transform: translate(calc(var(--dx, 0px) * .7), -14px) scale(.9); }
  78%  { opacity: calc(.95 * var(--op, 1)); transform: translate(var(--dx, 0px), -28px) scale(1.1); }
  100% { opacity: calc(.58 * var(--op, 1)); transform: translate(0, 18px) scale(.8); }
}
/* uzun kıvılcım izleri — hızla geçip sönen ince çizgiler */
.circ-sparks b {
  position: absolute; display: block;
  width: 2px; height: 62px; border-radius: 2px;
  background: linear-gradient(180deg,
    transparent, rgba(214,196,255,.85) 42%, rgba(255,255,255,.95) 62%, transparent);
  filter: drop-shadow(0 0 6px rgba(150,120,255,.7));
  opacity: 0;
  transform: rotate(var(--rot, 20deg));
  animation: sparkStreak var(--du, 10s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes sparkStreak {
  0%   { opacity: .22; transform: rotate(var(--rot,20deg)) translateY(46px) scaleY(.55); }
  30%  { opacity: .95; transform: rotate(var(--rot,20deg)) translateY(0) scaleY(1); }
  62%  { opacity: .35; transform: rotate(var(--rot,20deg)) translateY(-40px) scaleY(.85); }
  100% { opacity: .22; transform: rotate(var(--rot,20deg)) translateY(46px) scaleY(.55); }
}
@media (prefers-reduced-motion: reduce) {
  .circ-sparks i, .circ-sparks b { animation: none; opacity: .3; }
}

/* ===========================================================================
   KAMPANYA DECK'İ — iki panel, kitap sayfası gibi açılan geçiş
   Sayfa aşağı kaydıkça ikinci panel sol kenarından menteşelenip soldan sağa
   açılıyor. Açılma miktarı `--p` (0→1) ile geliyor; JS scroll ilerlemesini
   deck üzerine yazıyor.
   =========================================================================== */
.campaign-sec { padding-block: 0; }
.bdeck { position: relative; height: 190vh; }
.bdeck-stage {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}
.bdeck-page { position: absolute; inset: auto 0; width: 100%; }
.bdeck-p1 {
  /* alttaki panel: üstteki gelirken hafifçe geri çekilip sönüyor */
  transform: scale(calc(1 - var(--p, 0) * .05)) translateX(calc(var(--p, 0) * -26px));
  opacity: calc(1 - var(--p, 0) * .3);
  filter: blur(calc(var(--p, 0) * 2px));
}
/* İkinci panel sağdan düz kayarak birincinin üstüne biniyor (menteşe/3D yok) */
.bdeck-p2 {
  transform: translateX(calc((1 - var(--p, 0)) * 112%));
  will-change: transform;
}
/* kayarken altındaki panele düşen kenar gölgesi — gölge sağdan gelen kenarda */
.bdeck-p2 .camp2 {
  box-shadow:
    50px 0 90px -20px rgba(0,0,0,calc(.55 * (1 - var(--p, 0)) + .18)),
    0 50px 120px -40px rgba(40,20,140,.9);
}

/* --- ikinci panel --- */
.camp2 {
  position: relative; overflow: hidden;
  border-radius: 28px;
  padding: clamp(30px, 4vw, 62px);
  min-height: clamp(420px, 56vh, 620px);
  display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(20px, 3vw, 52px);
  background:
    radial-gradient(120% 120% at 12% 0%, #4C1FD8 0%, #3C24C9 38%, #2A1B9E 72%, #1B1470 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 50px 120px -40px rgba(40,20,140,.9);
  color: #fff;
}
.camp2-beam {
  position: absolute; inset: -20% -10% auto -30%; height: 160%;
  background: linear-gradient(104deg, transparent 30%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.04) 54%, transparent 68%);
  transform: rotate(-8deg);
  animation: camp2Beam 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes camp2Beam { 0%,100% { transform: rotate(-8deg) translateX(-8%); } 50% { transform: rotate(-8deg) translateX(12%); } }
.camp2-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 78%);
          mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 78%);
}
.camp2-main { position: relative; z-index: 2; display: flex; flex-direction: column; }
.camp2-title {
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(28px, 3.6vw, 56px); line-height: 1.08; letter-spacing: -.035em;
  margin-bottom: clamp(18px, 2.4vw, 34px);
}
.camp2-rule { height: 1px; background: rgba(255,255,255,.24); }
.camp2-stat {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(14px, 1.8vw, 22px) 0;
}
.camp2-stat p { color: rgba(255,255,255,.78); font-size: 15px; max-width: 46ch; margin: 0; }
.camp2-stat b { font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 2.6vw, 40px); }
.camp2-cols {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(18px, 2.4vw, 40px);
  padding-top: clamp(22px, 3vw, 40px);
}
.camp2-cols h3 { font-family: var(--font-head); font-weight: 400; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.24; margin: 0; }
.camp2-cols p { color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.65; margin: 0; }
.camp2-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: clamp(22px, 3vw, 38px); }

/* sağdaki kart kompozisyonu */
.camp2-side { position: relative; z-index: 2; }
.camp2-shot {
  position: absolute; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.8);
  animation: camp2Float 7s ease-in-out infinite;
}
.camp2-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.camp2-shot-a { width: 62%; aspect-ratio: 16/11; right: 8%;  top: 4%; }
.camp2-shot-b { width: 54%; aspect-ratio: 16/11; right: 26%; bottom: 6%; animation-delay: 1.6s; }
.camp2-kpi {
  position: absolute; z-index: 3;
  padding: 11px 16px; border-radius: 14px;
  background: rgba(12,10,40,.72); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: camp2Float 8.5s ease-in-out infinite;
}
.camp2-kpi b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 20px; }
.camp2-kpi span { font-size: 11.5px; color: rgba(255,255,255,.68); }
.camp2-kpi-a { right: 2%;  top: 34%; animation-delay: .8s; }
.camp2-kpi-b { left: 0;    bottom: 22%; animation-delay: 2.4s; }
@keyframes camp2Float { 50% { transform: translateY(-12px); } }

@media (max-width: 900px) {
  .bdeck { height: auto; }
  .bdeck-stage { position: static; height: auto; display: block; overflow: visible; }
  .bdeck-page { position: static; }
  .bdeck-p1 { transform: none; opacity: 1; filter: none; margin-bottom: 24px; }
  .bdeck-p2 { transform: none; }
  .camp2 { grid-template-columns: 1fr; }
  .camp2-side { height: 320px; }
  .camp2-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .camp2-beam, .camp2-shot, .camp2-kpi { animation: none; }
}

/* ===========================================================================
   GENİŞ EKRAN — container artık sabit piksel değil, ekranla orantılı
   penta.css `--container: 1680px` veriyordu; 2560px'lik monitörde her yanda
   ~440px ölü alan bırakıyordu (K1: "sağda solda boşluk yok").
   `min(100%, 3000px)`: içerik her ekranda tam genişlikte, kenarda yalnızca
   `--pad-x` kadar nefes payı kalıyor. 15" ekranda hiçbir şey değişmiyor
   (zaten %100'dü). `100vw` KULLANMIYORUZ — o, kaydırma çubuğunu da sayıp
   yatay taşma yaratıyor (mobilde bir kez başımıza geldi).
   =========================================================================== */
:root { --container: min(100%, 3000px); }

/* Metin blokları ekran genişledikçe sonsuza uzamasın: okunabilir satır
   uzunluğu (~45-90 karakter) için üst sınır. Kartlar ve ızgaralar serbest. */
@media (min-width: 1700px) {
  .lead, .sec-sub, .section-head p, .campaign-desc,
  .camp2-cols p, .camp2-stat p, .rd-block p { max-width: 78ch; }
  .circles-line { max-width: 19ch; }
}

/* 720° bölümü: hem üstteki hem alttaki ölü alanı kısalt.
   Çemberin kendi kutusu düğümler dışa taştığı için görünenden yüksek;
   bu yüzden alt boşluk olduğundan fazla görünüyordu. */
#orbit720 { padding-top: clamp(20px, 2.6vw, 44px); padding-bottom: clamp(16px, 2vw, 36px); }
#orbit720 .orbit-layout { padding-top: 0; }
/* Global Çözümler bölümü hemen ardından geliyor; kendi üst payı kısa kalsın */
#global-cozumler { padding-top: clamp(18px, 2.2vw, 40px); padding-bottom: clamp(38px, 4.4vw, 76px); }
/* Referanslar bölümü de hemen ardından; iki bölüm arası nefes payı yeterli */
#showcase { padding-top: clamp(48px, 5.6vw, 96px); }

/* ===========================================================================
   SAYFA RİTMİ — bölüm aralıkları topluca sıkıldı
   Sorun tek tek bölümlerde değildi: `main.css` ardışık bölümlerde üst boşluğu
   sıfırlıyor, ama `penta.css:547` ve `rev2.css:179` onu geri getiriyordu.
   Sonuç: iki bölüm arası = alt boşluk + üst boşluk = 2 × --section, geniş
   ekranda ~280px. Aralığı tek boşluk + küçük bir pay olacak şekilde kuruyoruz.
   =========================================================================== */
:root { --section: clamp(56px, 5.8vw, 96px); }

/* ardışık bölümler: üstteki bölümün alt boşluğu zaten var, üste yalnızca
   küçük bir pay ekleniyor (çift boşluk yerine ~1.35 kat) */
.section + .section { padding-top: calc(var(--section) * .35); }
/* bantlı bölümler (açık zemin / spotlight) kendi nefesini korusun */
.section + .section.spotlight, .spotlight + .section,
.section + .section.pd-light, .pd-light + .section { padding-top: calc(var(--section) * .8); }

/* bölüm başlığı ile içeriği arası */
.section-head { margin-bottom: clamp(28px, 3.2vw, 52px); }

/* slogan bölümü tek başına bir sayfa gibi duruyordu */
.statement { padding-block: clamp(64px, 7vw, 116px); }

/* Bülten bölümü: arkasındaki 3D sahne için yer gerekiyor, genel ritim burayı
   fazla sıkıştırdı. Bu bölüm ve ardından gelen blog eski nefesine dönüyor. */
/* İçerik üste yapışık duruyordu: üst payı artırıp alt payı kısıyoruz, böylece
   başlık+form bölümün ortasına oturuyor.
   DİKKAT: seçici `.section.nl-sec` olmalı. Sade `.nl-sec` (0,1,0), yukarıdaki
   `.section + .section` (0,2,0) kuralına padding-top'ta yeniliyor ve ayar hiç
   uygulanmıyordu. */
.section.nl-sec { padding-top: clamp(104px, 11vw, 186px); padding-bottom: clamp(64px, 7vw, 112px); }
.section.nl-sec + .section { padding-top: clamp(44px, 5vw, 84px); }

/* ===========================================================================
   ORTAKLIK MODELİ — panel site diline çekildi + yeni T cetveli
   Panel mor/mavi dolguluydu ve sitenin koyu, hairline diline yabancı duruyordu.
   Artık zemini sitenin kendi karanlığı; çerçeve ince, arkada yalnızca hafif
   bir hâle var. Cetvel gerçek bir ölçüm aleti gibi kuruldu: 5'te bir uzun
   çentik, uçlarda kapak, birleşim noktasında parlayan düğüm.
   =========================================================================== */
.ppanel {
  background:
    radial-gradient(90% 120% at 82% -10%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(70% 100% at 8% 110%, rgba(56,189,248,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: 0 40px 110px -50px rgba(0,0,0,.9);
}
.ppanel::after {
  background: radial-gradient(58% 70% at 88% 6%, rgba(220,170,220,.10), transparent 64%);
}
.ppanel-rule { background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.06) 55%, transparent); }
.ppanel-body { color: var(--muted); }
.ppanel-lead { color: rgba(255,255,255,.72); font-size: clamp(13px, 1vw, 15px); letter-spacing: .18em; text-transform: uppercase; }
.ppanel-title { color: #fff; }
.pp-col-tag {
  background: rgba(124,58,237,.16);
  border: 1px solid rgba(168,139,250,.34);
  color: rgba(214,196,255,.95);
}
.pp-col li::before { background: var(--lilac, #A78BFA); box-shadow: 0 0 10px rgba(167,139,250,.6); }
.pp-col li span { color: var(--muted); }

/* --- T cetveli --- */
.tsq-split { padding-top: clamp(36px, 4vw, 62px); }

/* yatay kol: ince hairline, altında çentik dizisi */
.tsq-bar {
  height: 18px;
  border-top: 1px solid rgba(255,255,255,.30);
  align-items: flex-start;
  padding-inline: 2px;
}
/* uçlardaki kapaklar — cetvelin başlangıç/bitiş çizgileri */
.tsq-bar::before, .tsq-bar::after {
  content: ''; position: absolute; top: -1px; width: 1px; height: 15px;
  background: rgba(255,255,255,.5);
}
.tsq-bar::before { left: 0; }
.tsq-bar::after  { right: 0; }
/* çentik ritmi: 5'te bir uzun, ortadakiler kısa */
.tsq-bar i { width: 1px; height: 5px; background: rgba(255,255,255,.24); }
.tsq-bar i:nth-child(5n+1) { height: 12px; background: rgba(255,255,255,.46); }

/* dikey gövde */
.tsq-stem {
  width: 18px; margin-left: -9px;
  border-left: 1px solid rgba(255,255,255,.24);
  padding-block: 2px;
}
.tsq-stem i { height: 1px; width: 5px; background: rgba(255,255,255,.2); }
.tsq-stem i:nth-child(3n+1) { width: 11px; background: rgba(255,255,255,.38); }
/* gövdenin alt ucu sönerek bitsin */
.tsq-stem::after {
  content: ''; position: absolute; left: -1px; bottom: 0; width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, var(--bg, #090B10));
}

/* birleşim düğümü: marka renginde, nabız atan halka */
.tsq-node {
  width: 13px; height: 13px;
  background: #fff;
  box-shadow:
    0 0 0 5px rgba(124,58,237,.28),
    0 0 22px 4px rgba(167,139,250,.65);
}
.tsq-split.is-drawn .tsq-node { animation: tsqPulse 3.4s ease-in-out infinite 1.1s; }
@keyframes tsqPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(124,58,237,.28), 0 0 22px 4px rgba(167,139,250,.65); }
  50%      { box-shadow: 0 0 0 9px rgba(124,58,237,.14), 0 0 30px 6px rgba(167,139,250,.9); }
}
@media (prefers-reduced-motion: reduce) { .tsq-split.is-drawn .tsq-node { animation: none; } }

/* Manifesto → kampanya deck'i arası: deck'in sahnesi 100vh olduğu ve panel
   dikeyde ortalandığı için panelin üstünde ekstra boşluk kalıyordu. Manifesto
   alt payını kısıp deck'i biraz yukarı çekiyoruz. */
.circles-sec { padding-bottom: clamp(24px, 3vw, 46px); }
.campaign-sec { margin-top: clamp(-140px, -7vw, -56px); margin-bottom: clamp(-170px, -9vw, -70px); }

/* Navbar logosu artık animasyonlu (yazılma + F parlaması + T kıvılcımı).
   Kıvılcım alanı `em` tabanlı; navbarda yazı tipi küçük olduğu için kıvılcımlar
   logonun içinde kalıyordu. Burada logonun kendi yüksekliğine göre veriliyor. */
.nav-logo .brand-sparks { width: 46px; height: 46px; margin-top: -23px; left: -3px; }
.nav-logo .brand-sparks i { width: 3.5px; height: 3.5px; margin: -1.75px; transform: rotate(var(--sa)) translateX(24px); }
/* yazılma animasyonu navbarda bir kez, sayfa açılışında */
.nav-logo .brand-logo-wrap.is-anim .brand-logo { animation: logoSheen 6s ease-in-out infinite, logoWrite 1.3s cubic-bezier(.55,0,.2,1) .15s forwards; }
@media (max-width: 860px) {
  .nav-logo .brand-sparks { width: 38px; height: 38px; margin-top: -19px; }
  .nav-logo .brand-sparks i { transform: rotate(var(--sa)) translateX(20px); }
}

/* ===========================================================================
   AÇILIŞ EKRANI (SPLASH)
   Logo ortada belirir, kısa bir bekleyişten sonra navbardaki yerine uçar ve
   perde kalkar. Uçuş FLIP ile: hedefin gerçek konumu ölçülüp transform'a
   çevriliyor, böylece her ekran boyutunda tam navbar logosunun üstüne oturuyor.
   =========================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #090B10;
  /* JS `--fly` değişkenini yazana kadar hareket yok */
  transition: opacity .5s ease .1s, visibility 0s linear .6s;
  /* GÜVENLİK AĞI: script yüklenemezse perde kendiliğinden kalksın, yoksa
     site tamamen erişilemez olur. JS çalışıyorsa çok daha erken kaldırıyor. */
  animation: splashFailsafe .4s ease 6s forwards;
}
@keyframes splashFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* zeminde nefes alan hâle */
.splash-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 50%, rgba(124,58,237,.22), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, rgba(9,11,16,0), rgba(9,11,16,.9) 82%);
  animation: splashGlow 3.2s ease-in-out infinite;
}
@keyframes splashGlow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.splash-logo {
  position: relative; z-index: 2;
  transform-origin: center center;
  transition: transform .95s cubic-bezier(.7,0,.2,1), opacity .35s ease .6s;
  will-change: transform;
}
.splash-logo .brand-logo { height: clamp(76px, 13vw, 168px); }
/* kıvılcım yörüngesi logonun büyüklüğüne göre */
.splash-logo .brand-sparks { width: clamp(88px, 15vw, 190px); height: clamp(88px, 15vw, 190px); margin-top: calc(clamp(88px, 15vw, 190px) / -2); left: -4px; }
.splash-logo .brand-sparks i {
  width: 5px; height: 5px; margin: -2.5px;
  transform: rotate(var(--sa)) translateX(calc(clamp(88px, 15vw, 190px) / 2 - 8px));
}
/* uçuş: JS ölçüp yazıyor */
.splash.is-flying .splash-logo { transform: var(--fly, none); opacity: 0; }

/* altta ince ilerleme çizgisi */
.splash-bar {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(64px, 9vh, 120px);
  width: clamp(120px, 16vw, 200px); height: 2px; margin-left: calc(clamp(120px, 16vw, 200px) / -2);
  border-radius: 2px; background: rgba(255,255,255,.10); overflow: hidden;
}
.splash-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, transparent, var(--lilac, #A78BFA), transparent);
  transform: translateX(-100%);
  animation: splashBar 1.5s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes splashBar { to { transform: translateX(100%); } }

/* splash açıkken sayfa kaydırılamasın */
body.splash-on { overflow: hidden; }
/* uçuş sırasında hedef logo görünmesin, iki logo üst üste gelmesin */
body.splash-on .nav-logo .brand-logo-wrap { opacity: 0; }
body.splash-off .nav-logo .brand-logo-wrap { opacity: 1; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .splash-glow, .splash-bar i { animation: none; }
  .splash-logo { transition: opacity .3s ease; }
}

/* ---------------------------------------------------------------------------
   İÇ SAYFALAR — açık bant kalktı (29 Tem)
   `.pd-light` altı iç sayfada (ürün detay, hizmet detay, paketler, referanslar,
   global çözümler, blog) beyaz bir slab bırakıyordu; Emre "site ile uyumlu
   olsun" dedi. Bant kalıyor ama artık koyu. Ana sayfanın `.section-light`
   bantlarına (yorumlar + SSS) dokunulmadı — ana sayfa onaylandı.

   K3 — GEÇİŞ HER ZAMAN YUMUŞAK. İlk denemede bandın zeminini doğrudan
   `.pd-light` üzerine verip iki uca saç teli çizgi koymuştum; iki uçta da düz
   bir dikiş çıktı (üstteki mor ışığın en parlak yeri tam kesme çizgisine
   denk geliyordu). Doğrusu: zemin ayrı bir katmanda (`::before`) durur ve
   `mask-image` ile iki ucunda tamamen söner, çizgi hiç olmaz. Bir bandın
   zeminini kenarda kesme — söndür.

   Not: bileşenlerin (`.pd-feat`, `.glass`, `.faq-*`) kendi stilleri zaten koyu
   dilde yazılmış; burada yalnızca `.pd-light`in bindirdiği açık değerler geri
   alınıyor, o yüzden içerideki her şey kendiliğinden yerine oturuyor.
--------------------------------------------------------------------------- */
.pd-light {
  color: var(--text);
  /* Zeminin tamamı saydam renklerle yazıldı ve HİÇBİR katman kenara değmiyor:
     ışıkların dikey yarıçapı, kutunun üst/alt kenarına varmadan sıfıra iniyor.
     Böylece bant koyu zemine kendiliğinden karışıyor, kesme çizgisi kalmıyor. */
  background:
    /* ana mor ışık: merkez %40, dikey yarıçap %34 → %16 ile %64 arasında yaşıyor */
    radial-gradient(120% 34% at 50% 40%, rgba(108,53,178,.24), transparent 70%),
    /* sağ alt indigo vurgu: %53 ile %95 arasında */
    radial-gradient(62% 30% at 86% 74%, rgba(60,67,221,.17), transparent 72%),
    /* zemini bir tık kaldıran perde — iki ucu şeffaf, ortada dolu */
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.030) 22%,
      rgba(255,255,255,.030) 78%,
      rgba(255,255,255,0) 100%);
  border: 0;               /* saç teli çizgi de dikiş sayılıyordu, kalktı */
  box-shadow: none;
  /* açık bantta ezilen belirteçler koyu değerlerine dönüyor */
  --text: #ECEAF5; --muted: #ACA3BC; --muted-2: #83799A;
  --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.15);
}
.pd-light h1, .pd-light h2, .pd-light h3, .pd-light h4 { color: var(--text); }
.pd-light p, .pd-light cite { color: var(--muted); }
.pd-light .grad-text {
  background: linear-gradient(120deg, #C6B2E8 0%, #DCAADC 55%, #A78BFA 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pd-light .eyebrow {
  background: rgba(167,139,250,.10); border-color: rgba(167,139,250,.24); color: var(--lilac);
}
.pd-light .glass {
  background: rgba(22,26,38,.55); border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -18px rgba(0,0,0,.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.pd-light .faq-item { background: transparent; border-bottom-color: var(--border); }
.pd-light .faq-q { color: var(--text); }
.pd-light .faq-a-inner { color: var(--muted); }
.pd-light .btn-ghost {
  color: var(--text); border-color: rgba(255,255,255,.1);
  background: linear-gradient(to top, rgba(255,255,255,.1), rgba(255,255,255,0));
}
.pd-light .chip { background: rgba(255,255,255,.045); border-color: var(--border); color: rgba(255,255,255,.7); }
/* logo koyu zeminde krem kalsın — 1467'deki açık bant kuralı (#171029) geri alınıyor.
   Parıltı katmanı da geri geliyor, `background` kısayolu onu siliyordu. */
.pd-light .brand-logo {
  background:
    linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 46%, rgba(167,139,250,.95) 50%, rgba(255,255,255,.55) 54%, transparent 65%),
    #F0EEE6;
  background-size: 220% 100%, auto;
}

/* Sayfa başlığından sonraki ilk bölüm: `.section + .section` eşleşmediği için
   üst boşluğu 0'a düşüyordu (ölçüldü). İç sayfaların hepsinde aynı nefes payı. */
.phead + .section { padding-top: clamp(40px, 4.4vw, 76px); }

/* ---------------------------------------------------------------------------
   `.check-list` / `.pcheck` / `.px` — 29 Tem
   Bu üçü yalnızca `index.ejs` gövdesindeki <style> bloğunda tanımlıydı, o blok
   da sadece ana sayfada yükleniyor. İç sayfalarda (hizmetler, global çözümler,
   paketler) liste boşluksuz, işaretler biçimsiz kalıyordu — maddeler üst üste
   biniyordu. Temel kurallar buraya alındı, her sayfada aynı görünüyor.
--------------------------------------------------------------------------- */
.check-list { display: flex; flex-direction: column; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.55; }
.check-list .pcheck, .check-list .px {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; flex-shrink: 0; margin-top: 1px;
}
.check-list .pcheck { background: rgba(52,211,153,.16); color: var(--emerald); }
.check-list .px { background: rgba(255,255,255,.06); color: var(--muted-2); }

/* 900px altında kampanya deck'i yapışkan sahneden çıkıp normal akışa geçiyor
   (`.bdeck-stage { position: static }`). Yukarıdaki negatif margin ise panelin
   100vh sahnede dikeyde ORTALANMASINDAN doğan boşluğu kapatmak için konmuştu;
   mobilde öyle bir boşluk olmadığı için doğrudan bindirmeye dönüşüyordu —
   kampanya paneli manifesto yazısının üstüne çıkıyordu (iPhone SE, 375px:
   ölçüldü, 37px bindirme). Mobilde negatif margin kapalı. */
@media (max-width: 900px) {
  .campaign-sec { margin-top: 0; margin-bottom: 0; }
  .circles-sec { padding-bottom: clamp(40px, 9vw, 64px); }
}

/* ---------------------------------------------------------------------------
   Yatay şeritlerin sağ/sol düğmeleri — 29 Tem
   `.hrail` imleç konumuna göre akıyor; dokunmatik cihazda imleç olmadığı için
   şerit hareketsiz duruyor ve kaydırılabildiği anlaşılmıyor. Düğmeler JS'te
   üretiliyor (`initHoverRail`), burada yalnızca dokunmatik/dar ekranda
   gösteriliyor — masaüstünde imleçle akış aynen kalıyor.
--------------------------------------------------------------------------- */
.hrail-nav { display: none; justify-content: center; gap: 14px; margin-top: 16px; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .hrail-nav { display: flex; }
}
.hrail-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-strong);
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.hrail-btn svg { width: 20px; height: 20px; }
.hrail-btn-next svg { transform: rotate(180deg); }
.hrail-btn:hover { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.34); }
.hrail-btn:active { transform: scale(.93); background: rgba(167,139,250,.2); }

/* ---------------------------------------------------------------------------
   Bölüm başlıklarında parallax — 29 Tem (ekip isteği)
   Bölüm ekrana girerken etiket ve başlık farklı hızlarda yerine oturuyor;
   arada küçük bir derinlik farkı oluşuyor.

   Kaydırmaya bağlı CSS animasyonu (`animation-timeline: view()`) kullanılıyor:
   JS yok, scroll dinleyicisi yok, iş compositor'da dönüyor — mobilde ana
   iş parçacığını meşgul etmiyor. Desteklemeyen tarayıcıda hiçbir şey olmuyor,
   başlıklar bugünkü gibi görünüyor (aşamalı geliştirme).

   `will-change` bilerek verilmedi: sayfada zaten 43 `.reveal` katmanı var,
   üstüne kalıcı katman eklemek mobilde compositor bütçesini zorluyor
   (bkz. footer yazılarının kaybolduğu hata).
--------------------------------------------------------------------------- */
/* DÜZELTME (29 Tem): önce etiket 14px, başlık 38px oynuyordu — aralarındaki
   fark 24px. Başlıkla altındaki paragrafın arası bu kadar bile değil, başlık
   aşağı süzülünce paragrafın ÜSTÜNE biniyordu (Ücretsiz Deneyin bölümünde
   görüldü). Artık blok içindeki öğeler birbirine göre hiç kımıldamıyor:
   `.section-head`in tamamı tek parça hareket ediyor. Parallax sayfanın geri
   kalanına karşı sürüyor, blok içinde çakışma imkânsız. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head {
      animation: headParallax linear both;
      animation-timeline: view();
      /* Öğe ekranda kaldığı SÜRECE hareket etsin. Önce `entry 0% entry 100%`
         yazmıştım: o aralık, başlık ekrana girer girmez bitiyor — bir başlık
         boyu kaydırmada tamamlanıyor, göze çarpmıyordu. `cover` aralığı
         öğenin ekranı baştan sona geçtiği tüm süreyi kapsar. */
      animation-range: cover 0% cover 100%;
      /* Aşağıdan gelip yukarı süzülür: başta +par, ortada 0, çıkarken -par.
         34px, başlık bloğunun altındaki ~68px'lik boşluğun yarısı — altındaki
         içeriğe de değmiyor. */
      --par: 34px;
    }
    @media (max-width: 900px) { .section-head { --par: 18px; } }

    /* YAPIŞKAN BÖLÜMLERDE KAPALI (29 Tem).
       `view()` zaman çizelgesi öğenin LAYOUT konumuna bakar; `position: sticky`
       ile bölüm ekranda çakılı dururken çizelge ilerlemeye devam ediyor.
       Sonuç: bölümün geri kalanı hiç kımıldamazken başlık tek başına aşağı
       süzülüyor — bozuk görünüyor. Yapışkan olan her yerde kapatıldı. */
    .slidestage > .slide-under .section-head,
    .herostage .section-head,
    .orbit-copy .section-head { animation: none; }
  }
}
@keyframes headParallax {
  from { transform: translateY(var(--par, 30px)); }
  to   { transform: translateY(calc(var(--par, 30px) * -1)); }
}

/* ---------------------------------------------------------------------------
   720° bölümü — sol sütun kaydırmayla birlikte iniyor (29 Tem, ekip revizesi)
   Kendi yerinde başlıyor; sayfa aşağı kaydıkça ekranda sabit kalıp kullanıcıyla
   birlikte geliyor, ızgara hücresinin (yani çemberin) alt hizasına varınca
   duruyor. Ayrı bir animasyon yok — `position: sticky` bunu kendisi yapar,
   `align-items: start` sayesinde hücre çember boyunda olduğu için durma noktası
   tam çemberin altı oluyor.
   1024px altında düzen alt alta olduğu için kapalı.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .orbit-copy { position: sticky; top: clamp(96px, 11vh, 130px); }
}

/* ---------------------------------------------------------------------------
   KAYAN BÖLÜM GEÇİŞİ — `.slidestage` (29 Tem, ekip revizesi)
   Hero → "Uçtan Uca" geçişindeki düzeneğin aynısı: `.slide-under` yapışkan
   durur, altındaki `.slide-over` scroll'a bağlı olarak üzerine kayar.
   Saf CSS (sticky + margin-top), scroll dinleyicisi yok.

   Kullanıldığı yerler (ana sayfa):
     · Ücretsiz Deneyin  → Müşteri Görüşleri (açık tema)
     · Büyüme Simülatörü → SSS (açık tema)

   İki bölüm de ~960px, 900px'lik bir ekrandan 50-70px uzun. Yapışkan hâlde
   kesilen bu miktar bölümün alt İÇ BOŞLUĞU (~118px) içinde kalıyor, içeriğe
   dokunmuyor — o yüzden `top: 0` güvenli. (`bottom: 0` denendi, yapışma hiç
   tetiklenmedi.) 700px altı ekranlarda kesilen kısım içeriğe girer, orada
   düzenek kapalı.
--------------------------------------------------------------------------- */
.slidestage { position: relative; }

@media (min-width: 861px) and (min-height: 700px) {
  .slidestage > .slide-under {
    position: sticky; top: 0;
    z-index: 1;
    /* Yapışkan kalabileceği mesafe = sahne yüksekliği − kendi yüksekliği,
       yani `margin-top + üstteki bandın yüksekliği`. Bandın tepeye varması için
       gereken kayma ise `kendi yüksekliği + margin-top`. İkisi eşitlenince
       margin sadeleşiyor: BANDIN, ALTTAKİ BÖLÜM KADAR UZUN OLMASI gerekiyor.
       Ölçüldü: bant 112px (yorumlar) ve 224px (SSS) kısa kalıyordu, bu yüzden
       yapışma erken bitiyor ve tepede eski bölümden bir şerit görünüyordu.
       İki taraftan da yaklaşıyoruz: alttaki bölümün dikey payı kısılıyor… */
    padding-block: clamp(44px, 4.4vw, 74px);
  }
  .slidestage > .slide-over {
    position: relative;
    z-index: 5;
    /* …ve üste kayan bant en az alttaki bölüm kadar uzun tutuluyor. Fazlalık
       bandın alt iç boşluğuna ekleniyor, içerik kaymıyor. */
    min-height: 960px;
    /* üstteki bölümün yalnız kaldığı, kaymanın başlamadığı mesafe */
    margin-top: 42svh;
    /* slayt kenarı: üstte yuvarlatma + gölge, üste binmiş görünsün */
    border-top-left-radius: clamp(18px, 2.4vw, 40px);
    border-top-right-radius: clamp(18px, 2.4vw, 40px);
    box-shadow: 0 -30px 80px -30px rgba(0,0,0,.95);
  }
  /* üst kenarda ince ışık çizgisi — `.bp-sec` ile aynı dil */
  .slidestage > .slide-over::before {
    content: ""; display: block;
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    pointer-events: none; z-index: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slidestage > .slide-under { position: static; }
  .slidestage > .slide-over { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   MOBİL PERFORMANS PAKETİ — 29 Tem
   Ölçüm (iPhone SE genişliği, ana sayfa): sayfa 29.916px (45 ekran),
   2.825 DOM öğesi, 301 öğede sonsuz animasyon, 87 öğede `backdrop-filter`,
   78 öğede `will-change`. Masaüstünde sorun yok; aşağıdaki kuralların hepsi
   yalnızca dar ekranda devreye giriyor, geniş ekran görünümü değişmiyor.
--------------------------------------------------------------------------- */

/* 1) Ekran dışındaki bölümlerde animasyon çalışmasın.
      `.is-idle` sınıfını `initIdleSections` koyup kaldırıyor. Duraklatma
      kaldığı yerden devam eder, animasyon başa sarmaz. */
.is-idle, .is-idle *, .is-idle::before, .is-idle::after,
.is-idle *::before, .is-idle *::after { animation-play-state: paused !important; }

/* 2) `backdrop-filter` dar ekranda kapalı.
      87 öğede kullanılıyordu; mobil GPU'da en pahalı CSS özelliği. Yerine düz
      yarı saydam zemin: görsel fark çok az, kazanç büyük. */
@media (max-width: 900px) {
  .glass, .chip, .eyebrow, .btn-ghost, .nav, .nav-inner, .mob-overlay,
  .cfab-core, .cfab-btn, .wmap-tag, .bl-feat-badge, .shot-hint,
  .refmodal-box, .vidmodal-box, .cpanel, .pd-light .glass, .section-light .glass,
  .float-chip, .pd-float-chip, .hv-badge, .campaign-tag, .flagship-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* cam kartlar bulanıklık olmadan da okunsun diye zemin biraz doldurulur */
  .glass { background: rgba(20, 24, 36, .82); }
  .section-light .glass, .pd-light .glass { background: #fff; }
}

/* 3) Dev bulanık daireler mobilde küçültüldü.
      `filter: blur(90-130px)` uygulanmış 500-700px'lik daireler telefonda her
      karede yeniden çiziliyor. Yarıçap yarıya inince maliyet dörtte bire
      düşüyor (alan karesel), görsel olarak fark neredeyse yok. */
@media (max-width: 900px) {
  .orbfield i { filter: blur(46px); }
  .hero-glow, .pd-orb, .spotlight-glow, .orbit-glow, .campaign-orb,
  .bwall-orb, .pd-cta-orb, .aurora-bg > * { filter: blur(40px) !important; }
  /* ışık kürelerinin sayısı da azaltılıyor: üç yerine bir */
  .orbfield i:nth-child(n+2) { display: none; }
}

/* 4) `will-change` mobilde kaldırıldı.
      78 öğede kalıcı olarak duruyordu; her biri ayrı GPU katmanı demek ve
      compositor bütçesi taşınca tarayıcı katman atmaya başlıyor — 28 Tem'de
      footer yazılarının kaybolmasının sebebi buydu. Mobilde hiçbiri gerekli
      değil, tarayıcı katman kararını kendisi versin. */
@media (max-width: 900px) {
  .reveal, .marquee-track, .kinetic-track, .glass.card-hover,
  .herostage .hero-left, .hero-reel, .horiz-track, .hrail-track,
  .bwall-img, .shot-view .shot-page { will-change: auto !important; }
}

/* 5) Geri gitme hareketi (iOS) — bkz. `.hrail` yorumu */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .hrail { overscroll-behavior-x: auto; }
}

/* 6) Kalanları da süpür.
      Yukarıdaki listeler 87 `backdrop-filter`in 51'ini, 78 `will-change`in
      55'ini yakaladı; geri kalanı sayfa içi <style> bloklarında dağınık
      duruyor. Tek tek kovalamak yerine dar ekranda evrensel kapatma —
      ikisi de tamamen dekoratif/ipucu niteliğinde, kaldırmak bir şeyi bozmaz.
      Katman kararını tarayıcı kendi versin. */
@media (max-width: 900px) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Mobil menü — satırlar arasında ayraç (29 Tem, ekip revizesi)
   `main.css` her satıra alt çizgi veriyordu; `penta.css:521` `border-bottom:
   none` ile hepsini kaldırmış, menü tek blok hâlinde akıyordu. Çizgiler geri
   geldi: satır aralığı da biraz açıldı ki ayraçlar sıkışık durmasın.
--------------------------------------------------------------------------- */
.mob-nav > a,
.mob-nav .mob-acc-h {
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding-block: clamp(11px, 1.6vw, 16px);
}
/* açılır alt menüdeki bağlantılar daha ince bir çizgiyle ayrılsın */
.mob-acc-body a { border-bottom: 1px solid rgba(255,255,255,.055); }
.mob-acc-body a:last-child { border-bottom: 0; }
/* son ana madde ile altındaki dil seçimi arasında çizgi tekrarlanmasın */
.mob-nav > *:last-child > .mob-acc-h,
.mob-nav > a:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   KAMPANYA BARI — 29 Tem (ekip isteği)
   toserof.com'daki barın karşılığı: sayfanın en üstünde sabit, mavi→turkuaz
   gradyan, solda hap etiket, sağda açık renkli düğme.

   `main.css:275`teki eski `.topbar` kuralları soluk mor bir şeritti ve
   partial layout'a hiç dahil edilmemişti; buradaki kurallar onları eziyor.
   Yüksekliği `--topbar-h` olarak tutuluyor — navbar ve `main` bu değere göre
   aşağı iniyor, elle senkron tutulacak sabit yok.
--------------------------------------------------------------------------- */
:root { --topbar-h: 42px; }
@media (max-width: 700px) { :root { --topbar-h: 54px; } }

.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 120;                       /* navbar 100 — barın altında kalmalı */
  min-height: var(--topbar-h);
  display: flex; align-items: center;
  overflow: hidden;
  /* Sitenin kendi moru — önce mavi→turkuaz idi, palete yabancı duruyordu.
     Renkler `--grad-btn` (#601799 → #3C43DD) ve `--lilac` ailesinden. */
  background: linear-gradient(90deg, #4A1180 0%, #601799 34%, #3C43DD 72%, #6C35B2 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* üzerinden geçen ışık — canlı sitedeki shimmer'ın karşılığı */
.topbar-shine {
  position: absolute; inset: 0 auto 0 -40%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-14deg);
  animation: topbarShine 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes topbarShine { 0% { left: -40%; } 55%, 100% { left: 110%; } }

.topbar-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding: 8px var(--pad-x);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.4vw, 16px); flex-wrap: wrap;
}
.topbar-badge {
  flex-shrink: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.34);
}
.topbar-text {
  margin: 0; font-size: clamp(12.5px, 1.05vw, 14.5px);
  color: rgba(255,255,255,.94); line-height: 1.35;
}
.topbar-text strong { color: #fff; font-weight: 700; }
.topbar-cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #2A0E4A;   /* mor zemine uygun koyu */
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  transition: background .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.topbar-cta svg { width: 12px; height: 12px; }
.topbar-cta:hover { background: #fff; transform: translateX(2px); }

/* Yüzen navbar ve sayfa gövdesi barın altına iniyor */
.nav { top: var(--topbar-h); }
main { padding-top: calc(clamp(88px, 8vw, 150px) + var(--topbar-h)); }
/* iç sayfa başlığı `main` payına göre hizalı; ek bir şey gerekmiyor */

/* Splash perdesi barın da üstünü örtsün */
.splash { z-index: 300; }

@media (max-width: 700px) {
  /* Dar ekranda üç satıra bölünüp 99px'e çıkıyordu. Etiket + metin bir satır,
     düğme altında: iki satır, ~62px. */
  .topbar-inner { gap: 6px 9px; padding: 6px 12px; }
  .topbar-badge { font-size: 9.5px; padding: 3px 8px; letter-spacing: .08em; }
  .topbar-text { font-size: 11.5px; text-align: center; }
  .topbar-cta { font-size: 11px; padding: 4px 10px; }
  .topbar-cta svg { width: 10px; height: 10px; }
}
@media (max-width: 430px) {
  /* en dar ekranda metni kısalt — bar tek satıra insin */
  .topbar-text strong { display: block; }
}

/* "En İyiler ▸ Tercih Ediyor" şeridindeki logo büyütüldü (29 Tem).
   `.brand-logo-inline` başlıklarda 1.32em; buradaki etiketin yazı boyu 15px
   olduğu için logo iyice küçük kalıyordu. Yalnızca bu etikette büyütülüyor,
   başlıklardaki boyut değişmiyor. */
.trusted-label .brand-logo-inline {
  height: 3.1em;
  vertical-align: -1.18em;
  margin-inline: .24em;
}

/* ---------------------------------------------------------------------------
   Kampanya barı eklenince yapışkan öğelerin durak noktası da kayması gerekti
   (29 Tem). Hepsi navbar'ı temel alıyordu; bar üstlerine binince içerik
   navbarın altında kalıyordu (720° sol sütununda görüldü).
   `--topbar-h` JS'te ölçülüyor, bar kalkarsa/yükselirse kendiliğinden uyar.
--------------------------------------------------------------------------- */
/* `.ss-pin`, `.build-pin`, `.post-aside` sayfa içi <style> bloklarında ve
   orası bu dosyadan SONRA yükleniyor — eşit özgüllükte kural kaybediyor.
   Bir üst sarmalayıcı eklenerek güçlendirildi (ölçüldü: 120/104px'te kalmışlardı). */
.orbit-copy                      { top: calc(var(--topbar-h) + clamp(96px, 11vh, 130px)); }
.container > .rd-shotcol,
div > .rd-shotcol                { top: calc(var(--topbar-h) + 118px); }
.post-layout .post-aside         { top: calc(var(--topbar-h) + 104px); }
.sticky-story .ss-pin            { top: calc(var(--topbar-h) + 120px); }
.build-wrap .build-pin           { top: calc(var(--topbar-h) + 120px); }
/* Aynı tuzak burada da vardı: `.slide-under` mobilde `position: relative`,
   `top` onu 76px aşağı itip iki bölümün arasında boşluk bırakıyordu.
   Kural, yapışkanlığın açık olduğu koşullara kapatıldı. */
@media (min-width: 861px) and (min-height: 700px) {
  .slidestage > .slide-under     { top: var(--topbar-h); }
}
/* DİKKAT: `.statement` yalnızca ≥900px'te `position: sticky`; mobilde
   `position: relative` ve orada `top` öğeyi AŞAĞI İTİYOR — bp-sec ile slogan
   arasında 76px'lik mor bir şerit bırakıyordu (iPhone SE'de görüldü).
   O yüzden bu kural yapışkanlığın açık olduğu genişliğe kapatıldı. */
@media (min-width: 900px) {
  .slidewrap > .statement        { top: var(--topbar-h); }
}

/* ---------------------------------------------------------------------------
   Koyu bölüm → açık bant sınırı, mobil (29 Tem)
   Telefonda koyu bölümün son kartı açık bandın kenarına çok yaklaşıyordu ve
   `.glass`in koyu gölgesi (0 10px 30px) açık zemine taşıyordu — "açık kısma
   taşma" olarak görünüyor. Masaüstünde bölüm yapışkan olduğu ve bant üstüne
   kaydığı için sorun yok; kural yalnızca mobilde.
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .slidestage > .slide-under { padding-bottom: clamp(72px, 13vw, 104px); }
  /* sınıra en yakın kartın gölgesi açık zemine düşmesin */
  .slidestage > .slide-under .container > *:last-child .glass,
  .slidestage > .slide-under .container > .glass:last-child { box-shadow: none; }
  /* açık bant da biraz nefes alsın */
  .slidestage > .slide-over { padding-top: clamp(56px, 10vw, 84px); }
}

/* ---------------------------------------------------------------------------
   `content-visibility` — 29 Tem, mobil performans
   Sayfa 375px'te 29.916px (45 ekran) ve 2.825 DOM öğesi. Tarayıcı normalde
   hepsinin düzenini ve boyamasını baştan hesaplıyor. `auto` ile ekran dışındaki
   bölümler tamamen atlanıyor; sadece görünen kısım işleniyor.

   `contain-intrinsic-size`: atlanan bölüme varsayılan bir yükseklik verilir,
   yoksa kaydırma çubuğu zıplar. Değer yaklaşık olması yeterli — bölüm görünür
   olunca gerçek yüksekliğine oturur ve `auto` sayesinde tarayıcı öğrendiği
   boyu hatırlar.

   DIŞARIDA BIRAKILANLAR — bunlarda `content-visibility` düzeni bozar:
   · yapışkan sahneler (`.herostage`, `.slidestage`, `.slidewrap`) — atlanan
     bölümde sticky hesabı şaşıyor
   · `.phead` ve hero — zaten ilk ekranda, atlanacak bir şey yok
   · yatay şeritler (`.hrail`) — klonlama genişlik ölçümüne bağlı
--------------------------------------------------------------------------- */
main > .section:not(.slide-under):not(.slide-over):not(.statement):not(.tight-bottom),
main > .horiz-sec,
.footer {
  content-visibility: auto;
  /* 900px yazmıştım: sayfa boyu 29.916 → 21.750px'e düşüyordu, yani atlanan
     12 bölüm gerçek boyunun çok altında tahmin ediliyor ve kaydırma çubuğu
     zıplıyordu. Ölçülen gerçek ortalama ~1580px. `auto` anahtar sözcüğü
     sayesinde tarayıcı bir kez gördüğü bölümün gerçek boyunu hatırlıyor;
     bu değer yalnızca ilk tahmin. */
  contain-intrinsic-size: auto 1500px;
}
/* ilk iki bölüm hep işlensin — açılışta boş görünmesinler */
main > .section:nth-of-type(-n+2) { content-visibility: visible; }

/* ---------------------------------------------------------------------------
   REFERANSLAR — mobilde yatay şerit (31 Tem)
   14 kart tek sütuna dizilince bölüm telefonda ~14 ekran boyu uzuyordu.
   Mobilde ızgara yerine parmakla kaydırılan, snap'li bir şerit: kartlar
   ekran kenarından başlıyor (full-bleed), sağdaki kart ucundan görünüyor ki
   kaydırılabildiği anlaşılsın. Masaüstünde hiçbir şey değişmiyor.

   Yalnızca `#showcase` — /references sayfası liste sayfası, orada ızgara kalıyor.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #showcase .prefs-3 {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* kartın sol kenarı başlığın hizasına otursun */
    scroll-padding-inline-start: var(--pad-x);
    /* full-bleed: container payını geri alıp iç boşluk olarak veriyoruz,
       böylece şerit ekranın kenarından kenarına kayıyor ama ilk kart
       başlıkla aynı çizgide duruyor. `100vw` KULLANMA — kaydırma çubuğunu
       sayar, yatay taşma hatası geri gelir. */
    margin-inline: calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x) 8px;
    scrollbar-width: none;
  }
  #showcase .prefs-3::-webkit-scrollbar { display: none; }

  #showcase .prefs-3 > .pref {
    flex: 0 0 78vw;
    max-width: 360px;
    scroll-snap-align: start;
  }
  /* şeridin sağ ucunda son kart da tam hizalanabilsin */
  #showcase .prefs-3 > .pref:last-child { scroll-snap-align: end; }

  /* Kartlar ekranın sağında kaldığı için `reveal` gözlemcisi onları geç
     yakalıyor; şeritte perde arkasında kalan kart boş görünmesin. */
  #showcase .prefs-3 > .pref.reveal { opacity: 1; transform: none; }

  /* dokunmatikte hover yok — ekran görüntüsü gezinmesi çalışmıyor, kart
     biraz daha kısa dursun ki bölüm toplamda kısalsın */
  #showcase .prefs-3 .pref-media { aspect-ratio: 16 / 10; }
  #showcase .prefs-3 .pref-media::before { padding-top: 62.5%; }   /* 16/10 — yukarıdaki yedek */
  /* Üçüncü emniyet: kart 78vw, görsel kutusu da onun 10/16'sı = 48.75vw.
     `vw` düzen bağlamından bağımsızdır, hiçbir koşulda 0'a düşemez — oranı
     hesaplayan iki yol da tutmazsa kutu yine de doğru boyda durur.
     `width` de yüzdeyle değil `vw` ile: daralan bir bağlamda yüzde 0 sayılır,
     `vw` sayılmaz. Değerler kartın kendi ölçüleriyle birebir aynı. */
  #showcase .prefs-3 .pref-media {
    width: min(78vw, 360px);
    min-height: min(48.75vw, 225px);
  }
  .pref-foot { padding-top: 14px; }

  /* Dokunmatikte hover yok: ekran görüntüsü zaten kaymıyor, ama boydan boya
     SS (1200×~10.000px) kartın içinde ~2900px'lik bir öğe olarak duruyordu —
     14 kart × o boy, iPhone'da ciddi bellek. Görüntüyü kutunun kendisine
     sığdırıp üstten kırpıyoruz: görünen şey aynı (sitenin üst kısmı), maliyet
     yok denecek kadar az. */
  #showcase .shot-view .shot-page-img { height: 100%; object-fit: cover; object-position: top center; }
}

/* şeridin altındaki ilerleme çizgisi (logo şeridindekiyle aynı dil) */
.prefs-prog { display: none; }
@media (max-width: 640px) {
  .prefs-prog {
    display: block; position: relative;
    width: min(220px, 42vw); height: 2px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
  }
  .prefs-prog i {
    position: absolute; inset: 0;
    border-radius: 2px;
    background: rgba(255,255,255,.82);
    transform: scaleX(.2); transform-origin: left center;
    transition: transform .18s linear;
  }
}

/* şerit kumandası: [◀] ——— [▶] (yalnızca mobil, düğmeler rev2.js'te üretiliyor)
   `.hrail-nav` (hover:none) / (pointer:coarse) ile de açılıyor; burada onu
   kapatıp yalnızca şeridin gerçekten var olduğu genişlikte gösteriyoruz. */
.prefs-nav { display: none; }
@media (max-width: 640px) {
  .prefs-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-top: 20px;
  }
  .prefs-nav .hrail-btn { width: 42px; height: 42px; flex: 0 0 auto; }
  .prefs-nav .hrail-btn svg { width: 18px; height: 18px; }
  /* uçtaki düğme sönük ama tıklanabilir kalıyor (kaydırma zaten durur) */
  .prefs-nav .hrail-btn.is-off { opacity: .34; }
  /* çizgi artık satırın ortasında */
  .prefs-nav .prefs-prog { margin: 0; width: auto; flex: 1 1 auto; max-width: 180px; }
}