/* ============================================================
   BIG SOLUTIONS MEDIA — SAYFA KATMANI
   ------------------------------------------------------------
   Kaynak: "BIG Branding Kit.pdf" · Kurumsal Marka Kılavuzu v1.0.
   Jetonlar ortak/temel.css'te; burada yalnız bileşenler var ve
   hiçbir yerde ham renk/ölçü yazılmaz — hepsi jeton üzerinden.

   Bu dosya SIFIRDAN yazıldı (eski sürüm /tmp/media_eski.css).
   Öncesi getlayers "Ascend" şablonunun üstüne kurulmuştu:
   #5B8CFF mavi, Inter, her yerde 20px yarıçap, tek koyu zemin,
   WebGL küre. Hiçbiri marka kararı değildi, şablon artığıydı.

   Bölüm zemini <section data-zemin="koyu|acik"> ile veriliyor
   (kılavuz s.13). Koyu bölümler mor ışımayı kendiliğinden alıyor,
   açık bölümler almıyor — kural temel.css'te.
   ============================================================ */

/* TELEFONDAN TELEFONA AYNI GÖRÜNÜM (2026-09-30).
   text-size-adjust: iPhone yan çevrilince ve bazı Android'ler
   "okunurluk" için yazıları kendiliğinden büyütüyor; aynı sayfa
   cihaza göre farklı punto ve satır kırılımıyla açılıyordu. 100%
   bu otomatik şişirmeyi kapatır; kullanıcının kendi yakınlaştırması
   ve erişilebilirlik büyütmesi çalışmaya devam eder. */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ============================================================
   İSKELET
   ============================================================ */

/* KENAR BOŞLUĞU EKRANLA BÜYÜYOR.
   Kabın genişliği her yerde `min(100% - var(--s-4), --container)`
   idi, yani hangi ekran olursa olsun iki yanda SABİT 16'şar piksel
   kalıyordu. Telefonda doğru ölçü, tablette değil: 1024px'lik bir
   iPad'de metin ekranın 16px dibinden başlıyor, aynı sayfa 1440'ta
   120px içeriden başlıyordu. Tablette sayfa "kenara yapışmış"
   görünüyordu — istenen premium duruşun bozulduğu yer burası.

   clamp ile tek satırda çözülüyor, kırılma noktası eklemeden:
     360px  → 4vw=14  → 16px  (telefonda değişmedi)
     768px  → 4vw=31  → 31px
     1024px → 4vw=41  → 41px
     1200px ve üstü   → 48px tavan
   Tavan 48: üstünde kap zaten --container'a (1200px) çarpıyor ve
   boşluk kendiliğinden büyüyor, ikinci kez büyütmek gerekmiyor.

   JETON OLARAK duruyor çünkü bu formül dosyada 13 yerde tekrar
   ediyor (kap, yığın, raylar, dergi sahnesi…). Hepsi bu jetonu
   okuyor; biri unutulursa aynı sayfada iki farklı kenar çıkardı. */
:root{
  --kap-bosluk: clamp(16px, 4vw, 48px);
}

.kap{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin-inline: auto;
}

.bolum{
  /* Kılavuz s.15: bölüm araları minimum 64px. Masaüstünde 96px
     (yine 8'in katı), dar ekranda 64'e iniyor. */
  padding-block: var(--s-7);
  background: var(--zemin);
  color: var(--metin);
}
/* ÇAPA HEDEFİ ÜST BARIN ALTINDA KALMASIN. Üst bar sabit ve 65
   piksel; çapayla inilen bölümün üstü tam 0'a oturduğunda barın
   altında kalıyor. scroll-margin YALNIZ çapa/scrollIntoView
   hizasını kaydırıyor, düzene dokunmuyor. */
section[id]{ scroll-margin-top: 88px; }
@media (max-width: 768px){
  .bolum{ padding-block: var(--bolum-arasi); }
}

.atla{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--mor-700); color: #fff;
  border-radius: 0 0 var(--r-buton) 0;
}
.atla:focus{ left: 0; }

/* ============================================================
   ÜST BAR
   ============================================================ */
.ust{
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,13,36,0.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  /* KENDİ DERLEME KATMANINDA KALSIN.
     Titreme hatası: üst bar sticky ve backdrop-filter taşıyor ama
     kendi katmanına terfi etmemişti (ölçtüm: will-change auto,
     transform none). Altından SABİTLENMİŞ bölümler geçmeye
     başlayınca Chrome bulanıklaştıracağı arka planı her karede
     yeniden örneklemek zorunda kalıyor ve bar stroboskop gibi
     titriyordu.
     will-change: backdrop-filter barı kalıcı bir katmana alıyor,
     örnekleme bir kez kuruluyor. transform: translateZ(0) da
     işe yarardı ama sticky öğede transform yan etki riski taşıyor;
     bu daha dar kapsamlı ve niyeti açık. */
  will-change: backdrop-filter;
}
.ust-ic{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 64px;
}

/* --- LOGO (kılavuz s.12) ---------------------------------
   Kelime markası Manrope ExtraBold, harf aralığı +0.005em.
   Etiket Roboto Mono, kelime markasının %33'ü, 0.1em aralık,
   aynı taban çizgisine oturuyor; aradaki boşluk "B" harfinin
   genişliğinin yarısı ≈ 0.5ch. */
.marka{
  display: inline-flex; align-items: baseline; gap: 0.5ch;
  flex-shrink: 0;
}
.marka-ad{
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.005em;
  color: #FFFFFF;
}
/* Ara noktalar HER KOŞULDA Mor 700 — markanın imza detayı.
   Harf boyutunun %50'si, taban çizgisinin üzerinde. */
.marka-ad i{
  color: var(--mor-700);
  font-size: 0.5em;
  vertical-align: 0.30em;
  padding-inline: 0.05em;
}
.marka-etiket{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 7.3px;              /* 22px'in %33'ü */
  letter-spacing: 0.1em;
  color: var(--mor-300);
}

/* SLOGANLI KİLİT — yalnız altbilgide.
   Kılavuz s.12'nin anatomisi "B·I·G" + "SOLUTIONS" ile bitiyor; slogan
   logonun parçası DEĞİL, altına konan ayrı bir imza satırı. O yüzden
   ayrı bir sınıfla veriliyor: üst bardaki kilit dokunulmadan kalıyor,
   iki yerde iki farklı logo olmuyor.
   Hizalama: slogan, kelime markasının sol kenarıyla aynı çizgide
   başlıyor; ortalanırsa kilit dağılmış görünüyor. */
.marka-sloganli{
  flex-direction: column;
  /* Slogan kilidin ALTINDA ve onunla aynı eksende ortalanıyor.
     Önce flex-start idi: ikisi soldan hizalıydı ve slogan kilitten
     geniş olduğu için sağa doğru taşıp dengeyi bozuyordu. */
  align-items: center;
  gap: 0.35em;
}
.marka-sloganli .marka-satir{
  display: inline-flex; align-items: baseline; gap: 0.5ch;
}
.marka-slogan{
  font-family: var(--font-mono);
  font-weight: 400;
  /* Ölçüldü: 10px + 0.14em harf aralığında slogan 133px çıkıyordu,
     üstündeki kilit ise 97px — yani imza satırı logodan GENİŞti ve
     kilidi taşımak yerine eziyordu. Punto ve aralık, slogan kilide
     yaklaşacak şekilde kısıldı. Mono font olduğu için aralığı
     tamamen sıfırlamak gerekmiyor, karakterler zaten eşit genişlikte. */
  /* Ortalama doğruydu (sapma 0) ama slogan 105px, kilit 97px: iki
     yandan 4'er piksel taşıyordu ve "logonun altında" değil "logoyu
     aşan bir satır" gibi duruyordu. Punto ve aralık, slogan kilidin
     genişliğinin içinde kalacak şekilde kısıldı. */
  font-size: 8.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  /* Kılavuzun beyazı: Fısıltı Beyazı. Mor 300 idi; mor zaten
     interpunct'larda ve etikette var, slogan da mor olunca kilit
     tek renge düşüyor ve imza satırı ayrışmıyordu. */
  color: var(--fisilti-beyazi);
  opacity: 0.72;
}

/* Sosyal ikon. Dokunma hedefi 44px (görsel 20px) — ikon boyutunda
   tıklama alanı bırakmak kılavuz dışı ama erişilebilirlik gereği. */
.altbilgi-sosyal{ margin-top: var(--s-2, 16px); }
.altbilgi-sosyal a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -11px;   /* görsel kenara hizalansın */
  color: var(--lavanta-gri, #E4E1EF);
  border-radius: var(--r-buton, 4px);
  transition: color .2s ease, background-color .2s ease;
}
.altbilgi-sosyal a:hover{ color: var(--mor-300); background: rgba(123,79,255,.12); }
.altbilgi-sosyal a:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; }

/* ZEMİN VARYASYONLARI (kılavuz s.12)
   Açık zeminde kelime markası Lacivert 700, etiket Mor 700.
   Mor zeminde noktalar LACİVERT olur — kılavuzun kendi ifadesiyle
   "böylece her koşulda görünür kalır". */
[data-zemin="acik"] .marka-ad{ color: var(--lacivert-700); }
[data-zemin="acik"] .marka-etiket{ color: var(--mor-700); }
/* Mor zemin varyantı (noktalar lacivert olur) sitede mor yüzey
   olmadığı için yazılmadı — kılavuz s.12'de duruyor, gerekince eklenir. */

/* --- Menü --- */
.gezinme{
  display: flex; align-items: center; gap: var(--s-3);
  margin-left: auto;
  font-size: 14px;
}
.gezinme > a, .acilir > a{
  color: rgba(255,255,255,0.72);
  padding-block: var(--s-1);
  transition: color var(--dur-hover) var(--ease);
}
.gezinme a:hover, .acilir > a:hover{ color: #fff; }
.gezinme a.etkin{ color: #fff; }

.acilir{ position: relative; }
.acilir-kutu{
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: grid; min-width: 220px;
  padding: var(--s-1);
  background: var(--lacivert-700);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-kart);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-hover) var(--ease),
              visibility var(--dur-hover) var(--ease);
}
.acilir:hover .acilir-kutu,
.acilir:focus-within .acilir-kutu{ opacity: 1; visibility: visible; }
.acilir-kutu a{
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-buton);
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.acilir-kutu a:hover{ background: rgba(255,255,255,0.06); color: #fff; }

/* SAĞ BLOK SAĞA YASLI.
   .ust-ic bir flex satırı ve çocukları marka / gezinme / sağ blok.
   Mobil ve tablette ortadaki gezinme display:none olduğu için sağ
   blok marka ile arasında yalnız gap kalacak şekilde SOLDA, logonun
   dibinde duruyordu — menü düğmesi ekranın solundaydı. Otomatik sol
   boşluk onu her genişlikte sağ kenara itiyor. */
.ust-sag{ display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
/* 38px denenmişti; kılavuz s.17 birincil ve ikincil butonlar için
   istisnasız 44px diyor. Üst bar 64px olduğu için sığıyor. */
.ust-cta{ padding-inline: var(--s-3); }

/* ------------------------------------------------------------
   DİL SEÇİCİ — TR · EN  (2026-09-24)
   Sitenin mono üst etiket dili: Roboto Mono, küçük, büyük harf
   (kaynakta büyük yazılı — lang="tr" iken uppercase "i"yi "İ"
   yapıyor, o yüzden dönüştürülmüyor), harf aralıklı. Etkin dil
   Mor 300 ve altında Mor 700 ince çizgi; ayırıcı nokta logodaki
   interpunct'la aynı: Mor 700. Yeni renk yok, hepsi temel.css
   belirteci.

   Dokunma hedefi: bağlantı 44px yüksek (s.17), yazı küçük ama
   tıklanan alan değil. Masaüstünde butonla arasına ince bir dikey
   çizgi giriyor — iki ayrı işlev, iki ayrı grup. */
.dil-secici{
  display: flex; align-items: center; gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  flex-shrink: 0;
}
.ust-sag > .dil-secici{
  padding-left: var(--s-2);
  border-left: 1px solid rgba(255,255,255,0.12);
}
.dil-secici a{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 30px;
  padding-inline: 4px;
  color: rgba(255,255,255,0.55);
  border-radius: var(--r-buton);
  transition: color var(--dur-hover) var(--ease);
}
.dil-secici a:hover{ color: #fff; }
/* Etkin dil: Mor 300 ve altında Mor 700 ince çizgi. Çizgi
   text-decoration ile — ::after + sabit genişlik denendi, 44px'lik
   mobil menü bağlantısında çizgi yazıdan geniş çıktı (ölçüldü).
   Metin süslemesi her boyutta kısaltmanın kendi genişliğinde. */
.dil-secici a[aria-current="true"]{
  color: var(--mor-300);
  text-decoration: underline;
  text-decoration-color: var(--mor-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.dil-secici a:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: -2px; }
.dil-ayrac{ color: var(--mor-700); font-size: 1.1em; }
.dil-etiket{
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  margin-right: var(--s-1);
}

/* Mobil menüdeki kopya: tam dokunma boyutunda, CTA'nın altında ince
   bir çizgiyle ayrılmış satır. Aşağıdaki .mobil-menu a kuralı
   (min-height, flex, renk) aynı özgüllükte ve DAHA SONRA geliyor —
   yukarıdaki .dil-secici a renklerini ezerdi. Bu yüzden seçiciler
   bilerek bir kademe güçlü yazıldı. */
.mobil-menu .dil-secici-mobil{
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.mobil-menu .dil-secici-mobil a{
  min-height: 44px; min-width: 44px;
  color: rgba(255,255,255,0.55);
}
.mobil-menu .dil-secici-mobil a:hover{ color: #fff; }
.mobil-menu .dil-secici-mobil a[aria-current="true"]{ color: var(--mor-300); }

.menu-dugme{
  display: none;
  width: 44px; height: 44px;      /* dokunma hedefi (s.17) */
  flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer;
}
.menu-dugme span{
  display: block; height: 2px; width: 20px; margin-inline: auto;
  background: #fff; border-radius: 2px;
  /* Çizgiler ÇARPIYA dönüşürken kendi merkezleri etrafında dönsün. */
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s linear;
}
/* AÇIKKEN HAMBURGER ÇARPIYA DÖNÜYOR.
   İki çizgi var (üst/alt). Açılınca ikisi ortada buluşup zıt yönde
   dönüyor. Menünün açık olduğunu düğmenin kendisi söylüyor;
   önceden düğme hiç değişmiyordu ve kapatmak için nereye basılacağı
   belirsizdi. gap 5px olduğu için her çizgi 3.5px kaymalı. */
.menu-dugme[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

/* MENÜ ARTIK SABİT KONUMLU — SAYFANIN HER YERİNDE AÇILIYOR.
   Belge akışında, üst barın hemen ardında duran normal bir bloktu.
   Üst bar sticky olduğu için ekranda kalıyor ama menü SAYFANIN
   BAŞINDA duruyordu: aşağı kaydırılmış hâlde düğmeye basınca menü
   açılıyor, ama ekranın çok yukarısında çiziliyor ve görünmüyordu.
   Ziyaretçi için "düğme çalışmıyor" demekti.

   top: üst barın ölçülen yüksekliği (media.js --ust-yuk yazıyor).
   Sabit sayı yazılmadı çünkü font yüklenmesi barı birkaç piksel
   oynatabiliyor ve menü ya bara giriyor ya altında boşluk bırakıyor.

   svh: mobil tarayıcıda adres çubuğu açılıp kapanınca vh zıplıyor.
   Uzun menüde iç kaydırma açık — kısa ekranda son bağlantı
   erişilemez kalmasın. */
.mobil-menu{
  position: fixed;
  top: var(--ust-yuk, 65px);
  left: 0; right: 0;
  z-index: 49;
  max-height: calc(100svh - var(--ust-yuk, 65px));
  overflow-y: auto;
  overscroll-behavior: contain;

  flex-direction: column; gap: var(--s-1);
  padding: var(--s-3) var(--kap-bosluk) var(--s-4);
  background: rgba(10, 13, 36, 0.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vurgu-yumusak);
  box-shadow: 0 24px 48px -24px rgba(10, 13, 36, 0.9);

  /* AÇILIŞ: perdeyi indirir gibi.
     Önce `hidden` niteliği tek başına açıp kapatıyordu, yani menü
     PAT diye beliriyordu. Şimdi hidden yalnız erişilebilirlik için
     (ekran okuyucu ve Tab sırası); görünürlüğü .acik sınıfı
     yönetiyor ve geçiş ona bağlı.

     clip-path yüksekliği ANİMASYONLAMADAN perde etkisi veriyor:
     max-height ile yapılsaydı iç kaydırma ve uzun menü yüzünden
     hız tutarsız olurdu. */
  opacity: 0;
  transform: translateY(-10px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity .26s ease,
    transform .32s cubic-bezier(.22, .61, .36, 1),
    clip-path .38s cubic-bezier(.22, .61, .36, 1);
}
.mobil-menu.acik{
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
/* Maddeler sırayla giriyor — perde inerken içerik onu takip ediyor.
   --sira'yı media.js basıyor. */
.mobil-menu > *{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--sira, 0) * 28ms + 60ms);
}
.mobil-menu.acik > *{ opacity: 1; transform: none; }

/* Hareket azaltılmışsa geçiş yok: menü anında açılıp kapanıyor.
   Görünürlük yine .acik ile yönetiliyor, yalnız süre sıfır. */
@media (prefers-reduced-motion: reduce){
  .mobil-menu,
  .mobil-menu > *,
  .menu-dugme span{ transition: none; }
}
.mobil-menu a{
  min-height: 44px; display: flex; align-items: center;
  color: rgba(255,255,255,0.8);
}
.mobil-baslik{
  font-family: var(--font-mono); font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--mor-300); margin-top: var(--s-2);
}
.mobil-alt{ padding-left: var(--s-2); }

/* MENÜ EŞİĞİ 1024 → 900.
   Hamburger 1024px'e kadar çıkıyordu; iPad yatay (1024) ve pek çok
   küçük dizüstü tam o sınırda kalıyor ve sitenin TEK kalıcı çağrısı
   olan "İletişime geçin" butonu da menüyle birlikte gizleniyordu.
   Tablette başlıkta yalnız logo ve bir hamburger kalıyordu.

   Sığmadığı için değil, ölçülmediği için oradaydı: masaüstü menü +
   buton zorla açılıp ölçüldü —
     768px → logoyla menü arası 83px boşluk, buton taşmıyor
     820px → 135px
     900px → 215px
     1024px → 339px
   Yani menü 768'e kadar bile sığıyor.

   900 seçildi çünkü bu dosyada ZATEN mobil/masaüstü hattı orası:
   katmanlı sabitlenme (.katmanli) ve birkaç ızgara aynı noktada
   dönüyor. İkinci bir eşik eklemek, 900-1024 arasında yarı mobil
   yarı masaüstü davranan bir aralık yaratırdı.

   768 değil 900: 768 iPad DİKEY genişliği ve orada boşluk 83px'e
   iniyor — sığıyor ama nefessiz; dikey tablette hamburger zaten
   daha doğal. */
@media (max-width: 900px){
  .gezinme{ display: none; }
  .menu-dugme{ display: flex; }
  .ust-cta{ display: none; }
  .mobil-menu:not([hidden]){ display: flex; }
  /* Dil seçicinin KISA hâli: CTA gizli olduğu için ayırıcı çizgi
     anlamsız; punto ve bağlantı genişliği daralıyor, menü düğmesiyle
     arasında yalnız .ust-sag'ın gap'i kalıyor. */
  .ust-sag{ gap: var(--s-1); }
  .ust-sag > .dil-secici{ padding-left: 0; border-left: 0; font-size: 11px; }
  .ust-sag > .dil-secici a{ min-width: 26px; padding-inline: 3px; }
}

/* ============================================================
   BÖLÜM BAŞLIKLARI
   ============================================================ */
.kicker, .bolum-etiket, .ust-etiket, .guven-etiket{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  font-weight: 500;
  letter-spacing: var(--aralik-kicker);
  text-transform: uppercase;
  color: var(--vurgu-kicker);
  margin-bottom: var(--s-2);
}

.bolum-baslik{
  font-size: var(--olcu-h2);
  font-weight: 800;
  max-width: 24ch;
  margin-bottom: var(--s-2);
}
.bolum-baslik.genis{ max-width: 32ch; }

.bolum-lead{
  font-size: 16px;
  color: var(--metin-govde);
  max-width: 60ch;
  margin-bottom: var(--s-5);
}

/* Bağlama cümlesi — "Mesela bizim var." gibi, başlıkla düğme
   arasında duran tek satır. Lead'den bir tık öne çıkıyor
   (Manrope 700, tam metin rengi) ama başlık ölçüsüne çıkmıyor:
   burada söylenen şey bir başlık değil, bir kanıt sunuşu.

   ÜST BOŞLUK NEGATİF DEĞİL. İlk halinde -32px'di: o sırada
   üstünde bir lead paragrafı vardı ve onun alt boşluğunu geri
   almak gerekiyordu. Lead kaldırılınca aynı negatif değer satırı
   doğrudan başlığın ÜSTÜNE bindirdi — iki metin üst üste
   okunuyordu. Komşusu değişen her negatif boşluğun riski bu. */
.demo-baglama{
  font-family: var(--font-baslik);
  font-size: 18px;
  font-weight: 700;
  line-height: var(--satir-baslik-kucuk);
  color: var(--metin);
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
}

.sayfa-bas{ padding-block: var(--s-7) var(--s-5); }
.sayfa-h1{
  font-size: clamp(28px, 5vw, var(--olcu-h1));
  max-width: 20ch;
  margin-bottom: var(--s-3);
}

/* SAYFA BAŞLIĞI — İKİ SÜTUN.
   Tek sütunda başlık max-width:20ch ile 1200px'lik kabın yalnız
   539px'ini kullanıyordu; uzun bir H1 dört satıra sıkışıp sağda
   660px boşluk bırakıyordu (ölçüldü).

   1.15fr / 0.85fr: başlık daha geniş pay alıyor, gövde ona eşlik
   ediyor. align-items:end iki sütunu ALTTAN hizalıyor — gövdenin
   son satırı başlığın son satırıyla aynı çizgide bitiyor, blok
   tek parça okunuyor. Üstten hizalamak gövdeyi başlığın yanında
   havada bırakıyordu. */
.sayfa-bas-duzen{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-5);
  align-items: end;
}
/* Sütunun içinde ölçü sınırına gerek yok: sütunun kendisi zaten
   satır uzunluğunu belirliyor. 20ch burada ikinci kez daraltıyordu. */
.sayfa-bas-duzen .sayfa-h1{ max-width: none; margin-bottom: 0; }
.sayfa-bas-duzen .hero-alt{ max-width: 46ch; margin-bottom: 0; }

@media (max-width: 900px){
  .sayfa-bas-duzen{ grid-template-columns: 1fr; gap: var(--s-3); align-items: start; }
  .sayfa-bas-duzen .hero-alt{ max-width: 52ch; }
}

/* ============================================================
   HERO (kılavuz s.16 site taslağı)
   Koyu zemin, mor ışıma, mor vurgulu başlık, dolu + konturlu
   buton ikilisi.
   ============================================================ */
/* HERO TAM EKRAN — üst bar DÜŞÜLEREK.
   Önce min-height: 100svh idi. Üst bar sticky ve 65px yer kaplıyor,
   yani hero 65'te başlayıp 965'te bitiyordu: ekranın 65px ALTINA
   taşıyordu. İki sonucu ölçüldü — içerik 80px aşağıda kalıyor
   (merkez 530, ekran merkezi 450) ve kaydırma işareti 933'e, yani
   görünmeyen alana düşüyordu.
   Şimdi yükseklik üst bar düşülerek hesaplanıyor; içerik gerçekten
   görünen alanın ortasına oturuyor.
   svh birimi: mobilde adres çubuğu kayarken 100vh zıplıyor, svh en
   küçük hâli baz aldığı için sabit kalıyor. */
:root{ --ust-yukseklik: 65px; }

.hero{
  /* Alt dolgu kaydırma işaretinin kapladığı şeridi de sayıyor.
     Simetrik dolguyla içerik kendi kutusunda ortalanıyordu ama
     altta işaret için ~130px'lik bir bölge var; göz onu boşluk
     değil "dolu alan" olarak okuduğu için metin aşağı kaymış
     görünüyordu. Alt dolgu o şeridi içerince içerik, işaretin
     ÜSTÜNDEKİ alanın ortasına oturuyor. */
  padding-block: var(--s-7) calc(var(--s-7) + 96px);
  min-height: calc(100svh - var(--ust-yukseklik));
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}

/* KAYDIRMA İŞARETİ — altta ortada.
   İnce bir dikey hat; içindeki ışık aşağı doğru akıyor. Ok çizmek
   yerine hareketin kendisi yönü söylüyor: kılavuz s.15 klişe imgeden
   kaçınmayı istiyor.
   Kaydırma başlayınca sönüyor (media.js .gizle ekliyor) — işini
   yapmış bir işaret ekranda durmamalı. */
.kaydir-isaret{
  position: absolute; left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* Sessiz gri fazla siliktı; işaret görevini yapabilmeli. */
  color: var(--mor-300);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.kaydir-isaret.gizle{ opacity: 0; }

/* Yazının kendisi çok hafif sekiyor.
   3px'lik bir yol ve 2.6sn'lik döngü: göz kenardan yakalıyor ama
   sayfayı okurken rahatsız etmiyor. Animasyon TRANSFORM üzerinde —
   düzen yeniden hesaplanmıyor, kompozit katmanda kalıyor. */
.kaydir-yazi{
  display: block;
  animation: kaydirSek 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes kaydirSek{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.kaydir-hat{
  position: relative; display: block;
  width: 1px; height: 52px;
  background: rgba(246,245,250,0.16); overflow: hidden;
}
.kaydir-hat::after{
  content: ""; position: absolute; left: 0; top: -60%;
  width: 100%; height: 60%;
  background: linear-gradient(180deg, transparent, var(--mor-500));
  animation: kaydirAkis 2.6s var(--ease) infinite;
}
@keyframes kaydirAkis{
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(266%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .kaydir-hat::after{ animation: none; top: 0; height: 100%; opacity: .5; }
  .kaydir-yazi{ animation: none; }
}

/* ============================================================
   KATMAN PANELİ İÇİNDEKİ KAYDIR İŞARETİ
   Anasayfa hero'sundaki işaretin aynısı, katmanlı sayfalarda
   zincirin İLK ve SON paneline konuyor (istek). Ziyaretçinin
   "sayfa bitti" sanabileceği iki nokta bunlar: ilk panelde
   içerikle oynarken, son panelde üstüne kayacak başka panel
   kalmadığında.

   SÖNDÜRMEK İÇİN JS YOK. Hero'daki işaret scrollY > 260 ile
   söndürülüyor; burada o eşik işe yaramaz, panellere gelindiğinde
   scrollY zaten çok daha büyük. Gerek de yok: ilk panelin üstüne
   sonraki panel kayınca işaret zaten ÖRTÜLÜYOR, son panelde ise
   panelle birlikte yukarı çıkıp gidiyor. Mekanizma katmanın
   kendisinde, ek kod yazmıyoruz.

   AÇIK ZEMİN VARYANTI: bileşenin renkleri koyu zemin için
   ayarlı (Mor 300 yazı, beyaz saydam çizgi). Konuşan Broşür'ün
   Canlı Deneyim paneli açık zeminli; orada yazı Fısıltı Beyazı
   üstünde okunmaz, çizgi de hiç görünmezdi. */
/* ÖLÇEK HERO'YLA AYNI. Bir ara çizgi 26'ya, ara 8'e indirilmişti;
   blok 82 yerine 52 piksele düşüyor ve anasayfadakinin güdük bir
   kopyası gibi duruyordu. Panelde yalnız ALT BOŞLUK kısalıyor
   (48 → 20): ölçeği okutan şey çizginin boyu ve aradaki nefes,
   kenardan uzaklık değil. */
.kaydir-panel{ bottom: 20px; }

/* AÇIK ZEMİN RENKLERİ. İlk hâlde yazı --vurgu-kicker'dı; o jeton
   açık temada Mor 900'e (#3D1F8F) çözülüyor ve Fısıltı Beyazı
   üstünde koyu, çamurlu bir lacivert gibi okunuyordu — markanın
   elektrik moru değil. İşaret SÜS (aria-hidden), metin kontrast
   eşiğine tabi değil; doğru renk Mor 700.

   Çizgi de rgba(10,13,36,.14) ile nötr griydi ve kaybolmuştu;
   mor tonlu bir kıl payı hem görünüyor hem markaya ait. */
[data-zemin="acik"] .kaydir-panel{ color: var(--mor-700); }
[data-zemin="acik"] .kaydir-panel .kaydir-hat{ background: rgba(123, 79, 255, 0.22); }
[data-zemin="acik"] .kaydir-panel .kaydir-hat::after{
  background: linear-gradient(180deg, transparent, var(--mor-700));
}

/* Dar ekranda sabitlenme kapalı, paneller normal akıyor: işaret
   orada bir şey söylemiyor, üstelik içeriğin üstüne binebiliyor. */
@media (max-width: 900px){
  .kaydir-panel{ display: none; }
}
.hero-h1{
  /* Kılavuz H1'i 40px olarak tanımlıyor (s.14) ve hero için ayrı
     bir "display" basamağı TANIMLAMIYOR. Bu yüzden tavan 40'ta
     tutuldu. Daha iri bir hero istenirse kılavuza yeni bir
     basamak eklenmeli; burada tek başına büyütmek sistemi bozar. */
  font-size: clamp(28px, 5.5vw, var(--olcu-h1));
  max-width: 18ch;
  margin-bottom: var(--s-3);
}
.hero-alt{
  font-size: 16px;
  color: var(--metin-govde);
  max-width: 52ch;
  /* Motto hemen altında; aradaki boşluk s-4'ten s-3'e indi ki iki satır
     sunumdaki gibi tek bir blok olarak okunsun, kopuk durmasın. */
  margin-bottom: var(--s-3);
}
/* Sunumun "AJANS HAKKINDA" sayfasındaki kapanış mottosu.
   MOR KUTU KALDIRILDI (istek). Dolgu + köşe yarıçapı motto'yu bir
   rozet gibi gösteriyordu; hero'da zaten üstte ust-etiket, altta iki
   buton var, üçüncü bir kutulu öge hiyerarşiyi bulandırıyordu.
   Metin rengi --vurgu-kicker kalıyor: mor vurgu dolgudan değil
   yazının kendisinden geliyor.
   inline-block KORUNDU — max-width'in etkili olması buna bağlı. */
/* MARKA İMZASI — artık düğmelerin ALTINDA.
   Üst boşluk alta taşındı: slogan eylemden sonra geliyor ve
   hero'yu kapatıyor. */
.hero-motto{
  display: inline-block;
  margin: var(--s-4) 0 0;
  color: var(--vurgu-kicker);
  font-size: 17px;
  max-width: 52ch;
}
/* TIRNAKLAR MARKA MORUNDA.
   Kaynakta &ldquo; / &rdquo; olarak duruyorlardı, yani metnin
   parçasıydılar ve ayrı renk verilemiyordu. Sözde öğeye taşınınca
   hem renk alıyorlar hem de ekran okuyucu gereksiz noktalama
   duymuyor.

   Mor 500 seçildi, Mor 700 değil: slogan zaten --vurgu-kicker
   (açık mor) ile yazılı; tırnak ondan BİR TON koyu olursa
   ayrışıyor, iki ton koyu olsaydı koyu zeminde kayboluyordu. */
.hero-motto::before,
.hero-motto::after{
  color: var(--mor-500);
  font-weight: 700;
}
.hero-motto::before{ content: "\201C"; }
.hero-motto::after{ content: "\201D"; }
.hero-eylem{ display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Güven şeridi — uydurma müşteri logosu yok, gerçekten
   ürettiğimiz alanlar yazılı.

   KAP GENİŞLİĞİ BURADA TEKRARLANIYOR ve sebebi şu: .guven,
   .kap'ın İÇİNDE değil — hero bölümünün doğrudan çocuğu.
   (Kademeli belirme işaretlemesi de onu bu yüzden ayrı bir
   "kap" sayıyor, kur-media.js'teki KAPLAR kuralına bak.)
   Yeni CSS yazılırken bu atlandı, şerit ekranın sol kenarına
   yapışık çıktı; içerik 96px'te başlarken şerit 0'da başlıyordu.
   Ölçülerek bulundu: guvenSol=0 · kapSol=96. */
.guven{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin: var(--s-7) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--kenar);
}
.guven-satir{
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--metin-sessiz);
}

/* ============================================================
   BUTONLAR — .dugme ve .dugme-ana temel.css'te.
   Hepsi temel.css'te. Eskiden ikincil butonun işaretlemedeki adı
   .dugme-hayalet idi; aynı şeyin iki adı ölü tanım üretiyordu, tek
   ada indirildi.
   ============================================================ */
.dugme.buyuk{ min-height: 48px; padding-inline: var(--s-4); }

/* ============================================================
   KATEGORİ GİRİŞİ — editoryal liste (#kategoriler)
   Asimetrik ritim korundu; kart/çerçeve yok, görsel zeminde
   duruyor. Renk ve ölçüler kılavuz jetonlarına geçirildi.
   ============================================================ */

.giris-gorsel{
  display: block; overflow: hidden;
  border-radius: var(--r-yuzey);      /* büyük yüzey = 12px */
}
.giris-gorsel img{
  display: block; width: 100%; height: auto;
  transition: transform 400ms var(--ease);
}
.giris-no{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker);
  color: var(--metin-sessiz);
  margin-bottom: var(--s-2);
}
.giris-ad{
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--olcu-h2); font-weight: 800;
  line-height: var(--satir-baslik);
  letter-spacing: var(--aralik-baslik);
  color: var(--metin);
  margin-bottom: var(--s-1);
}
.giris-not{
  display: block;
  color: var(--metin-govde);
  max-width: 36ch;
  margin-bottom: var(--s-2);
}
.giris-git{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-baslik);
  font-size: 14px; font-weight: 700;
  color: var(--vurgu-metin);
}
.giris-git i{ transition: transform var(--dur-hover) var(--ease); }

/* HİZMET KARTLARI bloğu (yatay ray + kart görünümü) BURADAN
   KALDIRILDI: 106 satır, hiçbir sayfanın kullanmadığı stil.
   "Hizmetler" bölümü kaldırılıp içeriği dört ana kategoriye
   dağıtıldığında .hizmet-* sınıflarını taşıyan tek bölüm de gitti.
   rayKur("hizmetAlan"...) çağrısı da media.js'ten çıkarıldı.
   Kart görünümü yeniden gerekirse .yigin-kart veya .kart-izgara
   aynı işi yapıyor. */


/* ============================================================
   GENEL KARTLAR
   ============================================================ */
/* auto-FIT, auto-fill DEĞİL. Aradaki fark bu sayfanın en görünür
   hatasıydı: 1200px'lik kapta minmax(280px,…) DÖRT sütun açıyor,
   ama "neden" ve "demolar" ızgaralarında ÜÇ kart var. auto-fill boş
   dördüncü sütunu da 282px'te tutuyordu — üç kart sola yığılıyor,
   sağda 186px çıplak alan kalıyordu. auto-fit boş sütunu 0'a
   çökertiyor, kalan üç sütun 1fr ile kabı tam dolduruyor.

   Aynı hataya kurucular ızgarasında da düşülmüş ve orada sütun
   sayısı elle sabitlenerek yamanmıştı (aş. .kurucu-izgara). Burası
   kökü: kart sayısı sütun sayısından az olan HER ızgara düzeliyor.
   Kart sayısı sütunu dolduruyorsa (blog 5'li, 404 4'lü) auto-fit ile
   auto-fill aynı davranıyor — o ızgaralar etkilenmiyor. */
.kart-izgara{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
/* min(360px, 100%): 390px'lik telefonda kap 358px kalıyor ve çıplak
   minmax(360px,…) tek sütunu 360px'e sabitleyip 2px taşırıyordu.
   body'de overflow-x:hidden olduğu için kaydırma çubuğu çıkmıyor,
   taşan 2px sessizce KIRPILIYORDU — kart kenarlığı ekran dışında
   kalıyordu. min() ile sütun asla kaptan geniş olamıyor. */
.kart-izgara.iki{ grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

.kategori-kart, .demo-kart, .mv-kart, .neden-madde, .kurucu{
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kart);
  padding: var(--s-3);
}
.kategori-kart, .demo-kart{
  display: flex; flex-direction: column; gap: var(--s-1);
  transition: border-color var(--dur-hover) var(--ease);
}
.kategori-kart:hover, .demo-kart:hover{ border-color: var(--mor-300); }

.kategori-kart h2, .kategori-kart h3,
.demo-kart h2, .demo-kart h3, .mv-kart h2, .mv-kart h3,
.neden-madde h3, .kurucu h3{
  font-size: var(--olcu-h3); font-weight: 700; margin-bottom: 6px;
}
.kategori-kart p, .demo-kart p,
.mv-kart p, .neden-madde p, .kurucu p, .mv-metin{
  color: var(--metin-govde);
}
.kart-no, .urun-no, .adim-no{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker);
  color: var(--vurgu-metin);
  margin-bottom: var(--s-1);
}
.kart-ikon{
  display: inline-flex; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--r-buton);
  background: var(--vurgu-yumusak);
  color: var(--vurgu);
  margin-bottom: var(--s-2);
}
/* İkonlar: ince çizgi 1.5px, yuvarlatılmış uç, tek renk (s.15) */
.kart-ikon svg{ width: 20px; height: 20px; stroke-width: 1.5; }
.kart-ok{ color: var(--vurgu); }

/* ============================================================
   ÜRÜN LİSTESİ (alt sayfalar)
   ============================================================ */
.urun-liste, .kart-liste{ display: grid; gap: var(--s-3); }
.urun{
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kart);
  padding: var(--s-4);
}
.urun h2, .urun h3{ font-size: var(--olcu-h3); font-weight: 700; margin-bottom: 6px; }
.urun p{ color: var(--metin-govde); }
.urun-not, .urun-ornek{
  display: block; margin-top: var(--s-2);
  font-size: 14px; color: var(--metin-sessiz);
}
.urun-etiket{
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--mor-900); background: var(--vurgu-yumusak);
  padding: 4px 10px; border-radius: var(--r-rozet);
  margin-bottom: var(--s-2);
}

.kart-gorsel{
  display: block; width: 100%; height: auto;
  border-radius: var(--r-kart);
  margin-bottom: var(--s-3);
}
/* Perde artık gerekmiyor: görsel kartın içinde, altında okunması
   gereken metin yok. Eskiden kürenin üstünde duruyordu. */
.kart-gorsel-perde{ display: none; }

/* TELEFON ÖNİZLEMESİ bloğu KALDIRILDI (209 satır): .gosterim
   iki kolonu, telefon çerçevesi, yazışma balonları, taslak çıktı
   kartları ve döngü geçişleri. Bölüm tek kolona döndü; yerine
   Biggie'nin gerçek kullanım videosu gelecek. */

/* ============================================================
   SÜREÇ / SAYILAR / NEDEN
   ============================================================ */
.adimlar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
/* Adım barları kaydırdıkça doluyor (Studio'daki ilerleme
   diliyle aynı). İki katman: altta sabit ray, üstte dolan çizgi.
   Dolum oranını media.js --dolum olarak yazıyor; her adımın
   kendi eşiği var, sırayla doluyorlar. */
.adimlar > li{
  position: relative;
  padding-top: var(--s-3);
}
.adimlar > li::before,
.adimlar > li::after{
  content: ""; position: absolute; top: 0; left: 0;
  height: 2px; width: 100%;
  border-radius: var(--r-rozet);
}
.adimlar > li::before{ background: var(--kenar); }
.adimlar > li::after{
  background: var(--mor-700);
  transform: scaleX(var(--dolum, 0));
  transform-origin: left;
  transition: transform 520ms var(--ease);
}
.adimlar h3{ font-size: var(--olcu-h3); margin-block: 6px; }
.adimlar p{ color: var(--metin-govde); font-size: 14px; }

.sayilar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
}
.sayi-deger{
  display: block;
  font-family: var(--font-baslik);
  font-size: 40px; font-weight: 800;
  letter-spacing: var(--aralik-baslik);
  color: var(--vurgu);   /* 40px = buyuk metin, esik 3:1 */
}
.sayi-etiket{
  display: block;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--aralik-kicker);
  color: var(--metin-sessiz);
}

.neden-liste{ display: grid; gap: var(--s-2); }

/* ============================================================
   KÖPRÜ (Studio bağlantısı) + KAPANIŞ
   ============================================================ */
.kopru, .cta-kart{
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-yuzey);
  padding: var(--s-5);
}
.kopru-baslik, .kapanis-baslik{
  font-size: var(--olcu-h2); font-weight: 800;
  max-width: 26ch; margin-bottom: var(--s-2);
}

/* ============================================================
   BLOG
   ============================================================ */
.yazi-kart{
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kart);
  padding: var(--s-3);
}
/* .yazi-uzun (blog liste kartı) KALDIRILDI: blog listesi yapışkan
   yığına geçti (.yigin-yazi). Aşağıdaki iki kural .yazi-kart ile
   paylaşımlıydı — anasayfadaki blog önizlemesi hâlâ onu kullanıyor,
   o yüzden kurallar duruyor, yalnız .yazi-uzun kısmı çıkarıldı. */
.yazi-kart h2, .yazi-kart h3{
  font-size: var(--olcu-h3); font-weight: 700; margin-bottom: 6px;
}
.yazi-kart p{ color: var(--metin-govde); }
.yazi-durum{
  display: inline-block; margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--metin-sessiz);
}

/* "Yazıyı okuyun →" — kartın bağlantı olduğunu görsel olarak da
   söyleyen tek satır. Ok hover'da ilerliyor; sitedeki diğer
   bağlantılarla (.giris-git) aynı jest. */
.yazi-devam{
  display: inline-flex; align-items: center; gap: var(--s-1);
  margin-top: var(--s-2);
  font-family: var(--font-baslik); font-size: 13px; font-weight: 700;
  color: var(--vurgu-metin);
}
.yazi-devam i{ transition: transform var(--dur-hover) var(--ease); }
/* Hover seçicisi a.yazi-uzun'dan .yigin-yazi'ye taşındı: blog listesi
   yığına geçince eski seçici hiçbir şeyle eşleşmiyordu ve ok
   animasyonu sessizce kaybolmuştu. */
.yigin-yazi:hover .yazi-devam i{ transform: translateX(4px); }

/* ============================================================
   YAZI SAYFASI
   ------------------------------------------------------------
   Blog gövdesi sitenin geri kalanından farklı bir sorun çözüyor:
   burada taranacak kart değil, okunacak uzun metin var. O yüzden
   tek sütun, dar ölçü ve belirgin bir başlık ritmi.
   ============================================================ */

/* İzlek (breadcrumb). Ekranda görünen sıra, sayfadaki
   BreadcrumbList işaretlemesiyle birebir aynı — kur-media.js
   ikisini de aynı kayıttan üretiyor. */
.iz{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--metin-sessiz);
  margin-bottom: var(--s-3);
}
.iz a{ color: var(--metin-sessiz); transition: color var(--dur-hover) var(--ease); }
.iz a:hover{ color: var(--vurgu); }
.iz [aria-current]{ color: var(--metin); }
.iz-ayrac{ opacity: 0.45; }

/* Yazı başlıkları hizmet başlıklarından uzun: .sayfa-h1'in 20ch
   ölçüsü onları gereksiz yere dört satıra bölüyordu. */
.sayfa-h1.genis{ max-width: 30ch; }

/* Giriş özeti (kılavuz s.17 blog formatı: "girişte özet paragraf").
   Gövdeden bir tık iri ve tam kontrastlı — okur ilk saniyelerde
   yazının ne vaat ettiğini görmeli. */
.yazi-ozet{
  font-size: 17px;
  color: var(--metin);
  max-width: 54ch;
}

/* Kapak görseli. alt="" ve aria-hidden BİLİNÇLİ: bu görseller
   soyut marka dokusu, bilgi taşımıyorlar. Dekoratif bir görsele
   uydurma açıklama yazmak ekran okuyucu kullanıcısına gereksiz
   gürültüden başka bir şey vermez. Kart görselleriyle aynı karar.
   Ekranın üstünde olduğu için lazy DEĞİL: geciktirmek LCP'yi
   bozar (kılavuz s.17: 2.5s altı). */
.yazi-kapak{
  display: block;
  width: 100%; height: clamp(160px, 28vw, 300px);
  object-fit: cover;
  border-radius: var(--r-yuzey);
  margin-top: var(--s-4);
}

.yazi-govde{ max-width: 68ch; }
.yazi-govde p{ margin-bottom: var(--s-2); }
.yazi-govde h2{
  font-size: var(--olcu-h2);
  font-weight: 800;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  max-width: 28ch;
}
/* İlk h2 bölümün kendi üst boşluğunu ikiye katlamasın. */
.yazi-govde > h2:first-child{ margin-top: 0; }
.yazi-govde h3{
  margin-top: var(--s-4);
  margin-bottom: var(--s-1);
}
.yazi-govde strong{ color: var(--metin); font-weight: 700; }
.yazi-govde a{
  color: var(--vurgu-metin);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Madde listesi. list-style temel.css'te sıfırlanmış (numaralı
   listelerde tarayıcının kendi numarası bizimkiyle üst üste
   biniyordu); işaret burada elle veriliyor ve marka moru oluyor. */
.yazi-liste{
  display: grid; gap: var(--s-1);
  margin-bottom: var(--s-2);
  max-width: var(--satir-uzunlugu);
}
.yazi-liste li{
  position: relative;
  padding-left: var(--s-3);
  color: var(--metin-govde);
}
.yazi-liste li::before{
  content: "";
  position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vurgu);
}

/* Örnek senaryo kutusu. Yazılarda uydurma istatistik yerine somut
   senaryo anlatılıyor; kutu bunun "ölçülmüş veri değil, örnek
   kurgu" olduğunu görsel olarak da ayırıyor. */
.yazi-kutu{
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-left: 2px solid var(--vurgu);
  border-radius: var(--r-kart);
  padding: var(--s-3);
  margin-block: var(--s-3);
}
.yazi-kutu-etiket{
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--vurgu-metin);
  margin-bottom: var(--s-1);
}
.yazi-kutu p:last-child{ margin-bottom: 0; }

/* ============================================================
   SSS (kılavuz s.17 — GEO gerekliliği)
   ------------------------------------------------------------
   <details> kullanılıyor: açılıp kapanma tarayıcının kendi işi,
   tek satır JS yok. JS yüklenmese de sorular okunabilir kalıyor
   ve arama motoru kapalı paneldeki metni de görüyor.
   ============================================================ */
.sss{
  max-width: 68ch;
  border-top: 1px solid var(--kenar);
}
.sss-madde{ border-bottom: 1px solid var(--kenar); }
.sss-madde > summary{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  min-height: 56px;               /* 44px dokunma hedefinin üstünde */
  padding-block: var(--s-2);
  cursor: pointer;
  list-style: none;               /* varsayılan üçgen kapatılıyor */
}
.sss-madde > summary::-webkit-details-marker{ display: none; }
.sss-madde summary h3{
  font-size: 16px; font-weight: 700;
  transition: color var(--dur-hover) var(--ease);
}
.sss-madde > summary:hover h3{ color: var(--vurgu); }
/* İşaret bir karakter DEĞİL, iki çizgi: "+" yazı tipine göre
   farklı çiziliyor ve font inene kadar yerinden oynuyordu. */
.sss-isaret{
  position: relative; flex: none;
  width: 14px; height: 14px;
  color: var(--vurgu);
}
.sss-isaret::before, .sss-isaret::after{
  content: "";
  position: absolute; left: 0; top: calc(50% - 1px);
  width: 14px; height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur-hover) var(--ease);
}
.sss-isaret::after{ transform: rotate(90deg); }
.sss-madde[open] .sss-isaret::after{ transform: rotate(0deg); }
.sss-yanit{ padding-bottom: var(--s-3); }
.sss-yanit p{ margin-bottom: var(--s-1); }
.sss-yanit p:last-child{ margin-bottom: 0; }

/* İlgili yazılar — okur yazının sonunda boşluğa düşmesin. */
.ilgili{ display: grid; gap: var(--s-2); max-width: 68ch; }
.ilgili a{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kart);
  transition: border-color var(--dur-hover) var(--ease);
}
.ilgili a:hover{ border-color: var(--vurgu); }
.ilgili em{ flex: none; }

/* ============================================================
   İLETİŞİM
   ============================================================ */
.iletisim-izgara{
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5); align-items: start;
}
.form{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.alan{ display: grid; gap: 6px; }
.alan-genis{ grid-column: 1 / -1; }
.alan label, .form legend{
  font-size: 13px; font-weight: 500; color: var(--metin);
}
.form fieldset{ border: none; }
.alan-ops{ color: var(--metin-sessiz); font-weight: 400; }
.secim-grubu{ display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.secim{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 var(--s-2);
  border: 1px solid var(--kenar); border-radius: var(--r-rozet);
  font-size: 13px; cursor: pointer;
}
.secim input{ min-height: auto; accent-color: var(--mor-700); }
.form-uyari{ color: #D6455C; grid-column: 1 / -1; }
.form-basari{ color: var(--mor-700); grid-column: 1 / -1; }
.form-not{ font-size: 12px; color: var(--metin-sessiz); margin-top: var(--s-1); }

.iletisim-yan{ display: grid; gap: var(--s-4); }
.iletisim-blok h2, .iletisim-blok h3{ font-size: 15px; margin-bottom: 6px; }
.iletisim-ad{ color: var(--metin); font-weight: 500; }
.iletisim-bag{
  display: block; color: var(--vurgu-metin);
  min-height: 32px; line-height: 32px;
}
/* WhatsApp satırı: numara ekranda yazmıyor, simge + eylem yazısı
   kanalı anlatıyor. Sınıfı .iletisim-bag ile BİRLİKTE taşıyor;
   ikisi de tek sınıf olduğu için sonra gelen kazanıyor, ama sıraya
   güvenmemek adına iki sınıfı birlikte seçiyoruz.
   Yeşil DEĞİL, kit moru — altbilgideki kararla aynı: simge zaten
   tanınıyor, yeşil sayfada marka dışı bir leke oluyordu. */
.iletisim-bag.iletisim-wa{
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
}
.iletisim-bag.iletisim-wa svg{ color: var(--mor-500); flex: none; }

@media (max-width: 1024px){ .iletisim-izgara{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .form{ grid-template-columns: 1fr; } }

/* ============================================================
   ALTBİLGİ
   ============================================================ */
.altbilgi{
  background: var(--lacivert-900);
  color: rgba(255,255,255,0.55);
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.altbilgi-ic{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-4);
}
/* h3 VE h4: işaretlemede h4 kullanılıyor, seçici yalnız h3'tü ve
   sütun başlıkları kicker stilini hiç almıyordu — Manrope kalıyordu.
   Kılavuz s.14 bu rolü (etiket) Roboto Mono'ya veriyor. */
.altbilgi h3, .altbilgi h4{
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--mor-300); margin-bottom: var(--s-2);
}
.altbilgi .marka{ margin-bottom: var(--s-2); }
.altbilgi p{ color: rgba(255,255,255,0.55); }
.altbilgi-sutun a{
  display: block; min-height: 30px; line-height: 30px;
  color: rgba(255,255,255,0.6);
  transition: color var(--dur-hover) var(--ease);
}
.altbilgi-sutun a:hover{ color: #fff; }
/* WhatsApp satırı: numara ekranda yazmıyor, simge + ad kanalı
   anlatıyor. Sütundaki diğer bağlantılar display:block olduğu için
   burada inline-flex şart — yoksa simge ile yazı ayrı satıra düşer.
   Yeşil DEĞİL, kit moru: altbilgi sessiz bir alan, WhatsApp yeşili
   burada tek başına marka dışı bir leke oluyordu. Simge zaten
   tanınıyor. Studio'daki .footer-contact-row ile aynı yaklaşım. */
/* Seçici sütunu da içeriyor: `.altbilgi-sutun a` (0,1,1) düz
   `.alt-wa`yı (0,1,0) yenip display:block'u geri getiriyordu.
   !important yerine özgülüğü düzgün yükseltiyoruz. */
.altbilgi-sutun a.alt-wa{
  display: inline-flex; align-items: center; gap: 10px;
  width: fit-content;
}
.altbilgi-sutun a.alt-wa svg{ color: var(--mor-500); flex: none; }
.altbilgi-cizgi{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin: var(--s-5) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: space-between;
  font-size: 12px;
}
/* BLOG ÖNİZLEME — beş kart TEK SATIRDA.
   Önce 3+2 idi; bölüm iki satıra yayılıp sayfayı aşağı uzatıyordu.
   Beş eşit sütun, kartlar daralıyor ama hepsi bir bakışta görünüyor
   ve bölüm alta taşmıyor.
   Dar ekranda beş sütun okunmaz olur, o yüzden 1100px altında
   yatay kaydırmalı şeride dönüşüyor: kart genişliği sabit kalıyor,
   satır sayısı yine bir. */
#blog-onizleme .kart-izgara{
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2, 16px);
}
/* Demo kartlarının başlıkları MARKA MORU (istek). Yalnız bu bölüm:
   blog kartlarının başlığı metin renginde kalıyor, yoksa iki kart
   ızgarası aynı vurguyu kullanıp hiyerarşi düzleşiyor. */
#demolar-onizleme .yazi-kart h3{ color: var(--vurgu); }
#blog-onizleme .yazi-kart h3{ font-size: 17px; }
#blog-onizleme .yazi-ozet{ font-size: 13.5px; }

@media (max-width: 1100px){
  #blog-onizleme .kart-izgara{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s-2, 16px);
  }
  #blog-onizleme .yazi-kart{
    /* flex: 0 0 minmax(0, 260px) YAZIYORDU — GEÇERSİZ.
       minmax() yalnız ızgara izlerinde kullanılabilir, flex-basis
       değeri olamaz; tarayıcı kısayolun TAMAMINI atıyordu. Kart
       varsayılan flex:0 1 auto'ya düşüp shrink:1 ile eziliyor ve
       820px tablette 260px yerine 130px kalıyordu (ölçüldü) —
       alttaki width:260px de esnek kutuda taban değil, shrink'e
       yeniliyordu. Sabit taban + shrink kapalı. */
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

/* Telif satırı kenardan kenara taşıyordu: .altbilgi-cizgi alt satır
   olacak şekilde biçimlenmiş (flex, font-size) ama içerik HTML'de ayrı
   bir .altbilgi-son'da duruyor ve onun hiç kuralı yoktu. Ölçüldü:
   sütunlar ve ayraç 120–1320, telif 0–1440. Aynı kapsayıcıya alındı. */
.altbilgi-son{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin-inline: auto;
  padding-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: space-between;
  font-size: 12px;
  color: var(--lavanta-gri, #E4E1EF);
  opacity: 0.62;
}

@media (max-width: 768px){ .altbilgi-ic{ grid-template-columns: 1fr 1fr; } }

/* ============================================================
   YARDIMCILAR
   ============================================================ */
.dar{ max-width: 60ch; }
.sola{ margin-left: 0; }

/* Hero'da İKİ paragraf olduğunda: ilki vaadi söyleyen satır, ikincisi
   ayrıntı. Aynı puntoda yan yana durunca hangisinin önce okunacağı
   belirsiz kalıyor; ilkine bir kademe ağırlık ve parlaklık veriyoruz.
   Ayrı bir renk/ölçü uydurmuyoruz — var olan metin jetonu. */
.hero-alt.vurgulu{
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--metin);
  margin-bottom: var(--s-2);
}

/* Taranacak kısa listeler için dar kap. Satır uzunluğu jetonu zaten
   okunabilir ölçüyü tanımlıyor; madde listesi 1200px'e yayılınca göz
   satır başını kaybediyor. */
.kap-dar{
  width: min(100% - var(--s-4), 60ch);
  margin-inline: auto;
}
.vurgu{ color: var(--vurgu); }
.buyuk-metin{ font-size: 18px; }
.metin-bag{ color: var(--vurgu-metin); text-decoration: underline; text-underline-offset: 3px; }
.ikili-bolum{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 1024px){ .ikili-bolum{ grid-template-columns: 1fr; } }

/* ============================================================
   STUDIO KÖPRÜSÜ (ai asistan hero'su)
   Yanındaki panelde Biggie'nin kısıtlı sürümü çalışıyor; tam
   sürüm kardeş sitede. Ziyaretçi asistanla konuşurken "daha
   fazlası var mı" dediği an bağlantı elinin altında olmalı.

   DOLU BUTON DEĞİL: sayfanın tek birincil butonu üst bardaki
   "İletişime geçin". Buraya ikinci bir dolu buton koymak o
   hiyerarşiyi bozardı. Panel dikkat çekiyor ama yarışmıyor.

   Ok ayrı bir <span>: metinle aynı satırda akmıyor, sağa
   yaslanıyor ve üzerine gelince ileri kayıyor — bağlantının
   "dışarı çıkar" olduğunu hareket söylüyor.
   ============================================================ */
/* PANELDEN TEK SATIRA (istek: daha sade, daha kısa). Kenarlıklı,
   iki satırlı, sol çizgili bir kutuydu; hero'da ikinci bir kart
   gibi duruyor ve Biggie panelinin ağırlığıyla yarışıyordu.
   Şimdi kutu yok — yalnız metin, ince bir alt çizgi ve ok. */
.studio-kopru{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--kenar);
  text-decoration: none;
  color: var(--metin-govde);
  transition: border-color .25s, color .25s;
}
.studio-kopru:hover,
.studio-kopru:focus-visible{
  color: var(--metin);
  border-bottom-color: var(--vurgu);
}
/* Marka adı vurgulu: satırın taşıdığı bilgi o. */
.studio-kopru-soz b{ color: var(--metin); font-weight: 600; }
.studio-kopru-ok{
  flex: none;
  color: var(--vurgu);
  font-size: 18px;
  line-height: 1;
  transition: transform .25s;
}
/* Altyazı: bağlantının bir kademe altında duran sessiz satır.
   Bağlantı inline-flex ve alt çizgili olduğu için kendi satırında
   kalıyor; bu paragraf onun hemen altına düşüyor. */
.studio-kopru-alt{
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--metin-sessiz);
  max-width: var(--satir-uzunlugu);
}
.studio-kopru:hover .studio-kopru-ok,
.studio-kopru:focus-visible .studio-kopru-ok{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .studio-kopru-ok{ transition: none; }
  .studio-kopru:hover .studio-kopru-ok{ transform: none; }
}

/* ============================================================
   ÖLÇÜM VE İÇGÖRÜ (ai asistan)
   Açık zeminli, serbest akan iki sütunlu bir bölümdü: ekranın üst
   yarısına sıkışıp altında geniş bir boşluk bırakıyordu. Artık
   katman zincirinin son halkası — tam ekran panel, içerik dikeyde
   ortalı, boşluk sorunu yapısal olarak yok.

   Üç öğrenim KART oldu (istek) ve Kimler İçin panelleriyle aynı
   cam dilini konuşuyor; örnek senaryo onların altında daha geniş
   tek bir panel — hiyerarşi net, ağırlık onda.
   ============================================================ */
.olcum-kartlar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.olcum-kart{
  padding: var(--s-4);
  border: 1px solid var(--kenar);
  border-top: 2px solid var(--vurgu);
  border-radius: 0 0 var(--r-yuzey) var(--r-yuzey);
  background: rgba(10, 13, 36, 0.42);
}
/* BAŞLIK İLE BİLGİ NET AYRILMALI. Önce ikisi de gövde ölçeğine
   yakındı (18px başlık / 16px metin) ve kart tek blok gibi
   okunuyordu. Başlık bir kademe büyüdü ve beyaza çıktı, bilgi
   küçülüp sessiz renge indi — arada hem ölçü hem renk farkı var.
   Aralarındaki kıl payı çizgi ayrımı görsel olarak da mühürlüyor. */
.olcum-kart h3{
  font-size: 20px;
  line-height: 1.3;
  color: var(--metin);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--kenar);
}
/* DOĞRUDAN ÇOCUK (>). Seçici ".olcum-kart p" idi ve mini ekranın
   İÇİNDEKİ paragraflara da uyuyordu: 24px'lik alt boşluk oraya da
   binince içerik 111 piksellik çerçeveye sığmıyor, üstteki satır
   overflow:hidden ile kırpılıyordu (ölçüldü: iki tekrar satırı
   arası 48px, olması gereken 20px). */
.olcum-kart > p{
  color: var(--metin-sessiz);
  max-width: none;
  font-size: 15px;
  margin-bottom: var(--s-3);
}
/* Film çerçevesi .adim-film'den geliyor (aynı kenar, yarıçap ve mor
   ışıma).

   ÜÇ FİLM AYNI HİZADA BAŞLAMALI: kart metinleri farklı uzunlukta
   ("Broşürde mi, dergide mi, ambalajda mı." 318 pikselde iki satıra
   düşüyor) ve filmler kayıyordu (ölçüldü: üç farklı üst kenar).
   Hizayı ızgara yapıyor — üç kart zaten eşit yükseklikte (stretch),
   film de margin-top:auto ile dibe itiliyor. Adım şeridinde de
   aynı çözüm kullanıldı. */
.olcum-kart{ display: flex; flex-direction: column; }
.olcum-kart .adim-film{ margin: auto 0 0; }

/* ============================================================
   ÖLÇÜM MİNİ EKRANLARI — HTML, SVG DEĞİL
   Soyut çizimler "neyi takip ettiğimizi" göstermiyordu; gerçek
   metin gerekiyordu. SVG'de metin tipografisi zayıf (ölçekleme
   ve satır kırma yok), HTML'de gerçek yazı gibi duruyor.

   Oran SVG'lerle aynı (160/56) — üç film kartlarda aynı yüksekliği
   tutsun; .adim-film çerçevesi içinde yaşıyorlar.
   ============================================================ */
/* ORAN 160/66, 160/56 DEĞİL. "Nerede soruldu"ya çıkarım satırı
   eklenince içerik 127 piksel istiyordu ama çerçeve 111'di; esnek
   kutu son öğeyi sessizce SIKIŞTIRDI ve satır 24 piksel yerine
   8 piksele indi — metin kırpıldı, "gözükmüyor" denen şey buydu.
   Çerçeve en dolu karta göre ölçüldü; üçü de aynı oranda kalıyor
   ki kartlar hizasını korusun. */
.olcum-ekran{
  aspect-ratio: 160 / 66;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
/* Sıkışma bir daha SESSİZCE olmasın: öğeler kendi boyunu korur,
   yer yetmezse taşma görünür olur ve fark edilir. */
.olcum-ekran > *{ flex: none; }
.olcum-ekran ul{ list-style: none; display: grid; gap: 6px; }

/* ---------- NE SORULDU: canlı soru akışı ----------
   Üç soru HEP görünür, yalnız vurgu dolaşıyor. Öğeleri yok edip
   geri getirmek bu dosyada üç kez boş kareye yol açtı. Pencereler
   döngünün tam üçte biri: ne binme ne boşluk. */
.oe-akis li{
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--metin);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--kenar);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .34;
  animation: oeSoruSec 5.1s linear infinite;
  animation-delay: calc(var(--i) * 1700ms);
}
@keyframes oeSoruSec{
  0%    { opacity: .34; border-color: var(--kenar); }
  3%    { opacity: 1; border-color: var(--vurgu); }
  30%   { opacity: 1; border-color: var(--vurgu); }
  33.3% { opacity: .34; border-color: var(--kenar); }
  100%  { opacity: .34; border-color: var(--kenar); }
}

/* ---------- NEREDE SORULDU: mecra dağılımı ----------
   Mecra ADLARI gerçek, hacim farkı göreli (--o). Sayı yazmıyoruz:
   ölçülmüş verimiz yok, sitenin kendi kuralı da uydurma istatistiği
   yasaklıyor. */
.oe-mecra li{ display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.oe-ad{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--metin-sessiz);
}
.oe-ray{
  display: block; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.oe-ray i{
  display: block; height: 100%; width: var(--o);
  border-radius: 4px;
  background: var(--vurgu);
  transform-origin: left center;
  animation: oeMecra 4.8s cubic-bezier(.33,1,.68,1) infinite;
  animation-delay: calc(var(--i) * 240ms);
}
/* Dip değer 0.12: çubuk en düşük hâlde bile görünüyor. */
@keyframes oeMecra{
  0%       { transform: scaleX(.12); }
  30%, 82% { transform: scaleX(1); }
  95%,100% { transform: scaleX(.12); }
}

/* ---------- NE TEKRAR ETTİ: veri → çıkarım ----------
   Aynı soru iki kez düşüyor, sonra ondan çıkan içgörü satırı
   yanıyor. Üç satır da hep ekranda; sıra vurguda. */
.oe-cikarim{ display: grid; gap: 5px; }
.oe-tekrar{
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--metin-sessiz);
  padding-left: 10px;
  border-left: 2px solid var(--kenar);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .4;
  animation: oeTekrar 5.4s linear infinite;
  animation-delay: calc(var(--i) * 500ms);
}
@keyframes oeTekrar{
  0%       { opacity: .4; border-left-color: var(--kenar); }
  8%       { opacity: 1; border-left-color: var(--vurgu); }
  76%      { opacity: 1; border-left-color: var(--vurgu); }
  88%,100% { opacity: .4; border-left-color: var(--kenar); }
}
/* Süre DEĞİŞKENLE: iki kartta da kullanılıyor ama ritimleri farklı.
   "Ne tekrar etti"de tekrar satırlarıyla (5.4s), "Nerede soruldu"da
   çubuklarla (4.8s) aynı olmak zorunda — aksi hâlde çıkarım veriden
   önce yanıyor ve sıra tersine dönüyordu. */
/* ÇİZGİ ÜSTTE: satır yukarıdaki veriden ÇIKAN sonuç, onun bir
   parçası değil. Ayraç olmadan çubukların altına yapışmış dördüncü
   bir satır gibi duruyordu ("kötü konumlanmış"). */
.oe-sonuc{
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; line-height: 1.3;
  color: var(--metin);
  white-space: nowrap; overflow: hidden;
  padding-top: 7px;
  border-top: 1px solid var(--kenar);
  /* Dip opaklık .25'ti ve sönük evrede satır neredeyse görünmüyordu
     ("gözükmüyor"). .55'te hep okunur kalıyor; vurgu yine de
     yandığında belli oluyor. */
  opacity: .55;
  animation: oeSonuc var(--sure, 5.4s) cubic-bezier(.33,1,.68,1) infinite;
}
/* İçgörü satırı tekrarlardan SONRA yanıyor (%42) — sıra önemli,
   önce veri birikiyor, sonra çıkarım. */
@keyframes oeSonuc{
  0%, 30%  { opacity: .55; transform: translateY(3px); }
  42%      { opacity: 1; transform: none; }
  84%      { opacity: 1; transform: none; }
  94%,100% { opacity: .55; transform: translateY(3px); }
}
.oe-etiket{
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em;
  color: var(--mor-900);
  background: var(--vurgu);
  border-radius: 3px;
  padding: 2px 5px;
}

/* Örnek senaryo: kartların ALTINDA ve daha geniş. Mor sol çizgi
   onu kartlardan ayırıyor — aynı yüzey dili ama farklı rol.

   ZEMİNİ AÇIK (istek): koyu panelin üstünde beyaza yakın bir kart.
   Renk elle yazılmıyor — öğede data-zemin="acik" var, --yuzey
   orada saf beyaza çözülüyor. Kutunun içindeki metin, kenar ve
   etiket renkleri de aynı jeton setinden geliyor, yani kılavuzun
   ölçülmüş kontrast kararları korunuyor. */
.olcum-ornek{
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--kenar);
  border-left: 2px solid var(--vurgu);
  border-radius: var(--r-yuzey);
  background: var(--yuzey);
}
.olcum-ornek p{ color: var(--metin-govde); max-width: none; font-size: 15px; }
/* Etiket kartların başlıklarıyla YARIŞMAMALI: mono, küçük ve mor —
   bu bir başlık değil, bloğun ne olduğunu söyleyen bir işaret. */
.olcum-ornek-etiket{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker);
  text-transform: uppercase;
  color: var(--vurgu-kicker);
  margin-bottom: var(--s-2);
}

.kurucu-rol, .demo-slogan{
  display: block;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--metin-sessiz);
}

/* Kurucular ızgarası: iki kart, tam genişlik.
   .kart-izgara.iki otomatik doldurma yapıyor ve 1200px'lik alanda üç
   sütun açıyordu; iki kart 2/3'ünü kaplayıp sağda bir sütunluk boşluk
   bırakıyordu. Burada kart sayısı sabit (iki kurucu), o yüzden sütun
   sayısı da sabitleniyor. */
/* Seçici bilerek iki sınıflı: tek sınıfla yazınca .kart-izgara.iki
   (özgüllük 0,2,0) kazanıyor ve ızgara üç sütunda kalıyordu. */
.kart-izgara.kurucu-izgara{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px){
  .kart-izgara.kurucu-izgara{ grid-template-columns: 1fr; }
}

/* KURUCU KARTLARI — sadeleştirildi.
   Eski hâli çerçeveli, dolgulu, sola yaslı bir kutuydu ve iki kart
   birbirini tutmuyordu: Ata'nınki bağlantı olduğu için 44px'lik
   dokunma hedefi alıyor, Örge'ninki düz metin kalıyordu; kol adları
   aynı çizgiye oturmuyordu.

   Yeni düzen: içerik ORTALI, kutu yerine üstte ince bir mor hat.
   Yükseklik ikisinde de aynı kaynaktan geliyor (.kurucu-kol'un
   min-height'i), bağlantı onun içinde yaşıyor — yani hizayı
   bağlantının varlığı değil satırın kendisi belirliyor. */
.kurucu{
  background: none;
  border: none;
  /* .isim-kat ile aynı gerekçe: --vurgu-yumusak %9 opaklıkta ve
     griye düşüyor; sayfadaki bütün bölüm çizgileri tam mor. */
  border-top: 2px solid var(--vurgu);
  border-radius: 0;
  padding: var(--s-4) var(--s-2) var(--s-3);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.kurucu h3{ margin: 0; }

/* Ad ile kol adı arasındaki nefes: ince, kısa, mor. */
.kurucu-ayrac{
  display: block; width: 26px; height: 1px;
  background: var(--mor-500); opacity: .55;
  margin: 14px 0 12px;
}

.kurucu-kol{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--vurgu-kicker);
  /* Hizanın kaynağı: iki kartta da bu satır aynı yüksekliği tutuyor,
     içinde bağlantı olsun olmasın. Aynı zamanda 44px dokunma hedefi. */
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.kurucu-kol a{
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding-inline: 4px;
}
.kurucu-kol a em{ font-style: normal; transition: transform .2s var(--ease, ease); }
.kurucu-kol a:hover em{ transform: translateX(3px); }
.kurucu-kol a:hover{ color: var(--mor-700); }
.kurucu-kol a:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 3px; }

/* Koyu zeminde jetonlar ters çalışır: kicker vurgusu orada Mor 900
   (çok koyu) olduğu için okunmaz; koyu zeminde Mor 300 doğrusu. */
[data-zemin="koyu"] .kurucu-kol{ color: var(--mor-300); }

/* E-POSTA SATIRI. Kol adının altında, ondan bir kademe sessiz:
   kol adı kurucunun ne yaptığını, e-posta nasıl ulaşılacağını
   söylüyor — ikisi aynı ağırlıkta olursa hangisinin bilgi hangisinin
   eylem olduğu karışıyor. Gövde yazı tipinde, mono değil: mono
   kademesi kılavuzda etiket/teknik veri için, adres okunacak metin.
   min-height 44px dokunma hedefi (kol adıyla aynı kural). */
.kurucu-eposta{
  margin: 4px 0 0;
  font-size: 13.5px;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
}
.kurucu-eposta a{
  color: var(--metin-govde);
  text-decoration: none;
  padding-inline: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.kurucu-eposta a:hover{ color: var(--metin); border-bottom-color: currentColor; }
.kurucu-eposta a:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 3px; }

/* Bölüm sonundaki tek metin bağlantısı — paragraf akışından ayrı
   dursun diye üst boşluk alıyor. */
.bolum-eylem-satir{ margin: var(--s-3) 0 0; }
[data-zemin="koyu"] .kurucu-kol a:hover{ color: var(--mor-500); }

/* ============================================================
   KADEMELİ BELİRME
   Gecikme derleme sırasında --rd olarak yazılıyor (kur-media.js).
   Kılavuz s.17 durum geçişlerini 150–200ms, sayfa geçişlerini
   300ms diyor; belirme bir sayfa hareketi olduğu için 300ms.
   ============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-sayfa) var(--ease) var(--rd, 0ms),
              transform var(--dur-sayfa) var(--ease) var(--rd, 0ms);
}
[data-reveal].icerde{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
  .giris-gorsel img, .giris-git i{ transition: none; }
  }

/* ============================================================
   DOKUNMA HEDEFLERİ (kılavuz s.17)
   ------------------------------------------------------------
   Ölçüldü: 390px genişlikte 14 bağlantı 44px'in altındaydı
   (altbilgi 30px, metin bağlantıları 20px, logo 37px).
   Masaüstünde fare hassas olduğu için sorun değil; kural
   dokunmatik için, o yüzden düzeltme yalnız dar ekranda.

   Paragraf İÇİNDEKİ satır içi bağlantılar kapsam dışı: onları
   44px yapmak satır aralığını bozar ve WCAG de metin akışı
   içindeki bağlantıları bu kuraldan muaf tutuyor.
   ============================================================ */
@media (max-width: 1024px){
  .marka,
  .altbilgi-sutun a,
  .iletisim-bag,
  .metin-bag,
  /* İzlek bağlantıları bir cümlenin içinde değil, gezinme
     öğesi — muafiyet onlara işlemiyor. */
  .iz a,
  .acilir-kutu a{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .metin-bag{ display: inline-flex; }
  /* ALT BİLGİ LOGOSU SOLDA (2026-09-30). Yukarıdaki display:flex
     .marka'yı tam genişlikte kutuya çeviriyordu; sloganlı kilit
     (sütun, align-items:center) bu kutunun ORTASINA kayıyor, logo
     altındaki metinle aynı sol çizgiden çıkmıyordu (390'da 29px,
     768'de 120px). inline-flex: kutu kilit kadar, konum sol kenar. */
  .altbilgi .marka-sloganli{ display: inline-flex; }
}

/* ============================================================
   AÇILIŞ EKRANI
   ------------------------------------------------------------
   Oturumda bir kez, yalnız anasayfada.

   HAREKETİN TAMAMI CSS'TE. İlk sürüm ilerlemeyi JS +
   requestAnimationFrame ile çiziyordu ve TAKILDI: rAF arka
   plandaki sekmede hiç çalışmaz, dolayısıyla perde hiç kalkmıyor
   ve overflow:hidden üstünde kalıyordu — sayfa donmuş görünüyordu.
   CSS animasyonu sekme arkadayken de ilerler; JS'in tek işi
   perdeyi kaldırmak ve onu da zamanlayıcı yapıyor.

   Koreografi (toplam ~1.9s):
     0.00  perde kapalı, mor ışık merkezde toplanıyor
     0.15  harfler tek tek yükselerek geliyor (B · I · G)
     0.75  SOLUTIONS etiketi süzülüyor
     0.95  çizgi soldan sağa doluyor
     1.45  perde YUKARI SIYRILIYOR, hero altından açılıyor
   ============================================================ */
.acilis{
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-5);
  background: var(--lacivert-900);
  overflow: hidden;
  /* PERDEYİ CSS KALDIRIYOR, JS DEĞİL — iki hata sonrası böyle:

     1) İlk sürümde bitişi requestAnimationFrame veriyordu. rAF
        arka plandaki sekmede HİÇ çalışmaz; perde hiç kalkmadı.
     2) İkinci sürümde setTimeout'a geçtim. Timer'lar arka planda
        durmuyor AMA dakikada bire kadar kısılıyor — 1.9 saniyelik
        gecikme 60 saniyeye çıkabiliyor. Perde yine asılı kaldı.

     CSS animasyonu ikisinden de bağımsız: sekme arkada olsa bile
     kendi zaman çizelgesinde ilerler ve "forwards" ile bittiği
     yerde kalır. Perdenin kalkması artık hiçbir JS koşuluna bağlı
     değil. JS yalnız oturum işaretini yazıyor ve düğümü DOM'dan
     çıkarıyor; ikisi de gecikse bir şey bozulmaz, çünkü perde
     zaten görünmez ve tıklama geçirmez durumda oluyor. */
  animation: acilisPerde 2500ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes acilisPerde{
  0%, 72% { transform: translateY(0);     visibility: visible; }
  100%    { transform: translateY(-100%); visibility: hidden;  }
}
/* Beklemek istemeyen için tıklama kısayolu (JS ekliyor). */
.acilis.bitti{
  animation: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 480ms cubic-bezier(0.76, 0, 0.24, 1);
}

/* Merkezde toplanan mor ışık — kılavuzun imza dokusunun
   hareketli hâli (s.15). Nefes alır gibi büyüyüp duruyor. */
.acilis-isik{
  position: absolute; left: 50%; top: 50%;
  width: min(120vw, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(123,79,255,0.30) 0%, rgba(123,79,255,0.10) 38%, transparent 68%);
  opacity: 0;
  animation: acilisIsik 1700ms var(--ease) forwards;
}
@keyframes acilisIsik{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.35); }
  45%  { opacity: 1; }
  100% { opacity: 0.9; transform: translate(-50%,-50%) scale(1); }
}

/* İletişim yan sütunu: giriş cümlesi ile ilk adres arasındaki boşluk.
   Bloklar arası boşluk tek tip 32px'ti; "doğrudan yazabilir ya da
   arayabilirsiniz" cümlesi ile hemen altındaki adres birbirine ait
   olduğu hâlde ayrı iki blok gibi duruyordu. İlk adres bloğu yukarı
   çekiliyor, diğer bloklar arası boşluk aynı kalıyor. */
.iletisim-yan .iletisim-blok:nth-child(2){ margin-top: -18px; }

/* Kategori listesi yığın kartının içinde.
   .kart-liste eski geniş kategori kartı için ayarlanmıştı: grid ve
   24px boşluk. Yığın gövdesi daha dar olduğu için aynı boşluk kartı
   603px'e çıkarıyor ve satırlar birbirinden kopuk duruyordu.
   Kural yalnız yığın içine kapsanıyor; kategori alt sayfalarındaki
   kullanımı olduğu gibi kalıyor. */
.yigin-kart .kart-liste{
  gap: 7px;
  margin-top: var(--s-2, 16px);
}
.yigin-kart .kart-liste li{ font-size: 14px; }

/* KATEGORİ KARTLARINA ÖLÇÜLÜ MOR.
   Kart tamamen nötr griydi: başlık koyu lacivert, hizmet listesi
   gövde grisi. Marka moru yalnız üstteki küçük etikette duruyordu,
   yani kart "BIG Solutions kartı" gibi değil "herhangi bir kart"
   gibi okunuyordu.

   TAMAMEN MOR DEĞİL, bilerek. Başlık lacivert kalıyor — hiyerarşinin
   tepesi o ve mor yapılsaydı listeyle aynı sese düşerdi. Mor yalnız
   İKİ yerde:
   · hizmet maddelerinin önündeki işaret (::before) — göz listeyi
     tararken mor noktaları takip ediyor,
   · "İncele" çağrısı, zaten bir eylem.

   Kılavuzun premium-kısıtlama ilkesi: vurgu rengi ne kadar az
   yerde durursa o kadar vurgu. Her satırı morlamak tersini yapardı.

   Mor 700 (--vurgu) açık zeminde okunuyor; Mor 500 fısıltı beyazı
   üzerinde soluk kalıyordu (ölçüldü). */
.yigin-kategori .kart-liste li{
  position: relative;
  padding-left: 14px;
  color: var(--metin-govde);
}
.yigin-kategori .kart-liste li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--vurgu);
}
.yigin-kategori .yazi-devam{ color: var(--vurgu); }

/* BLOG ZEMİNİ — Lavanta Gri.
   Diğer sayfalarda açık zemin Fısıltı Beyazı (#F6F5FA) ve kartlar
   Saf Beyaz; ikisi birbirine çok yakın olduğu için blogda kart
   sınırları erimiş görünüyordu. Zemin bir kademe koyulaşınca
   (kılavuz s.13'ün zemin ailesinden Lavanta Gri) beyaz kartlar
   ayrışıyor. Kart yüzeyi ve metin jetonlarına dokunulmuyor. */
body[data-sayfa="blog"] [data-zemin="acik"]{
  --zemin: var(--lavanta-gri);
}

/* ŞU AN KULLANILMIYOR — 2026-09-21 itibarıyla hiçbir canlı sayfa
   .biz-ikili / .biz-gorsel taşımıyor (arandı: _media/sayfa'nın
   tamamı ve üretilen media/ çıktısı). Tek referans arşivdeki
   bekleyen revizyonda: _media/arsiv/revizyon-2026-09-15-BEKLEMEDE.
   O revizyon ya uygulanacak ya da iptal edilecek; ikisi de
   olmadan silinmesin, uygulandığında sessizce düzensiz açılır.

   Önceki hâli "biz-kimiz sayfası kullanıyor" diyordu; o sayfa
   artık kullanmıyor, not yanlıştı.

   Neydi: solda söz, sağda görsel. Metin sütunu biraz geniş —
   okuma satırı 60-75 karakterde kalsın, görsel de kareye yakın bir
   alan tutsun diye 1.15fr / 1fr. */
.biz-ikili{ grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--s-5); }
.biz-gorsel{ margin: 0; }
.biz-gorsel img{
  width: 100%; height: auto; display: block;
  border-radius: var(--r-kart);
}
@media (max-width: 1024px){
  .biz-ikili{ grid-template-columns: 1fr; }
  /* Dar ekranda görsel metnin ALTINA geçiyor: önce ne anlattığımız
     okunsun, görsel destek olsun. */
  .biz-gorsel{ order: 2; }
}

/* Bölüm sonundaki tek çağrıyı ortalayan yardımcı. .hero-eylem
   satır içi stille ortalanıyordu (demolar bölümünde öyle yazılmış);
   iki yerde tekrarlanınca kural haline getirildi. */
.bolum-eylem{ justify-content: center; margin-top: var(--s-4); }
/* .sol ŞU AN KULLANILMIYOR: tek kullanıcısı anasayfanın Biz Kimiz
   bölümüydü, o da 2026-09-21'de ortalı sahneye geçti. Genel amaçlı
   bir değiştirici olduğu için duruyor. */
.bolum-eylem.sol{ justify-content: flex-start; }

/* HARF KASKADI — JS harfleri <i class="hrf"> içine sarıyor.

   will-change KURALI BURADAN KALDIRILDI. Önce
   `.kaskad-hazir .hrf { will-change: opacity, transform, filter }`
   yazılmıştı ve SAYFA ÖMRÜ BOYUNCA duruyordu: ölçtüm, anasayfada
   105 öğede will-change vardı, 97'si harf. Her biri tarayıcıyı
   ayrı bir derleme katmanı ayırmaya zorluyor ve o katmanlar
   animasyon bittikten sonra da bellekte kalıyor — kaydırma
   boyunca sürekli maliyet.

   Doğrusu: will-change YALNIZ animasyon sürerken, satır içi
   veriliyor; bitince sonDurum() satır içi stili tamamen siliyor,
   katman da serbest kalıyor. (media.js) */
.hrf{ display: inline-block; }
.hrf-kelime{ display: inline-block; white-space: nowrap; }

/* ============================================================
   BİZ KİMİZ + NEDEN BIG — KARTSIZ EDİTORYAL BİÇİM
   ------------------------------------------------------------
   .neden-kart (yüzey + kenar + yarıçap + görsel) KALDIRILDI.
   İki komşu bölüm de kart ızgarası kullanınca sayfa kendini
   tekrar ediyordu ve ikisi birbirine karışıyordu. Artık:
     · Biz Kimiz  → dikey çizgili iddia şeridi
     · Neden BIG  → üstten çizgili sütunlar
   Kutu, gölge, yarıçap yok; hiyerarşiyi yalnız tipografi ve
   kıl payı çizgiler kuruyor.
   ============================================================ */

/* KATMANLI SABİTLENME (referans: Stride "layered pinned reveal").
   Üstteki bölüm ekrana çakılıyor, alttaki üstüne kayarak giriyor.

   Mekanik tamamen CSS: position:sticky. JS ile kaydırma ele
   geçirilmiyor — bu sitede rAF'e bağlanan her şey arka plandaki
   sekmede donuyor (ölçüldü), sticky ise tarayıcının kendi
   düzen motorunda çalışıyor ve hiç takılmıyor.

   Sabitlenen bölüm 100lvh ve içeriği dikeyde ortalı: ekranda
   durduğu sürece boşlukta asılı kalmasın.

   z-index şart: gelen panel (20) sabitlenenin (10) üstünde
   olmalı, yoksa altına girip görünmüyor. */
.katmanli{ position: relative; }
/* İki seçici: #biz anasayfanın, .katman-alt ise yeniden
   kullanılabilir hâli (konuşan broşür sayfası bunu kullanıyor).
   Kimlik seçicisi bırakıldı, silinseydi anasayfa sessizce
   sabitlenmeyi kaybederdi. */
.katmanli > #biz,
.katmanli > .katman-alt{
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Gelen panel: OPAK zemin zorunlu, yoksa altındaki sabit bölüm
   içinden okunuyor. .bolum zaten var(--zemin) veriyor; burada
   yalnız katman kimliği (yarıçap + üstten gölge) ekleniyor. */
.katman-ust{
  position: relative;
  z-index: 20;
  border-radius: var(--r-yuzey) var(--r-yuzey) 0 0;
  /* GÖLGE YERİNE KENAR ÇİZGİSİ. Önce 48px yayılımlı bir box-shadow
     vardı; tam ekran boyutunda ve KAYAN bir öğede o gölge her karede
     yeniden boyanıyor, kaydırma pahalılaşıyor. 1px kenar aynı
     "katman" sinyalini veriyor ve boyama maliyeti yok. */
  border-top: 1px solid var(--kenar);
  /* TAM EKRAN. Ölçtüm: panel 453px yüksekliğindeyken sabitlenmiş
     bölümün üstünü hiç tam örtmüyordu — geçiş yarıda kalıyor,
     iki bölüm ekranda birlikte asılı duruyordu. 100lvh olunca
     sabitlenme mesafesi de 453'ten 900'e çıkıyor: Biz Kimiz bir
     tam ekran boyunca duruyor, Neden BIG onu tamamen devralıyor. */
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ORTA KATMAN — zincirde üç panel olduğunda (ai asistan sayfası:
   hero → Nasıl Çalışır → Kimler İçin). Hem KAYARAK GİRİYOR hem de
   sırası gelince ÇAKILIYOR, yani .katman-alt'ın sabitlenmesiyle
   .katman-ust'ün görünümünü birleştiriyor.

   z-index 15: alttakinden (10) yüksek, üstekinden (20) düşük olmak
   ZORUNDA. 10'un altında kalsa hero'nun arkasına girer, 20'ye
   çıksa son panel onu örtemezdi. */
.katmanli > .katman-orta{
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--r-yuzey) var(--r-yuzey) 0 0;
  border-top: 1px solid var(--kenar);
}

/* DURAKSAMA PAYI — panellerin üst üste binmesini önlüyor.
   Ölçüldü: paysız hâlde her panel yalnızca 10 piksel boyunca tek
   başına ekranda kalıyordu. Sebebi geometrik — gelen panel, bir
   önceki çakıldığı ANDA ekranın altından girmeye başlıyor
   (gelen panelin üstü tam o noktada ekranın alt kenarında).
   Hızlı kaydırınca iki panel aynı anda hareket ediyor gibi
   görünüyor ve geçiş okunmuyor.

   Çözüm gelen paneli AŞAĞI itmek: araya boş bir blok giriyor,
   böylece önceki panel 70lvh boyunca yalnız kalıyor. Blok hiç
   görünmüyor — çakılı panel opak ve tam ekran, z-index'i de
   (10/15) bu bloğunkinden (auto) yüksek.

   Yükseklik lvh: mobil tarayıcıda adres çubuğu açılıp kapanınca
   vh zıplıyor, lvh sabit kalıyor. */
.katman-duraksama{ height: 70lvh; }

/* Sabitlenme YALNIZ masaüstünde. Dar ekranda 100lvh'lik bir
   bölümü çakmak, telefonda ekranın tamamını tek bölüme veriyor
   ve kaydırma uzuyor; orada bölümler normal akıyor. */
@media (max-width: 900px){
  /* Pay da kalkıyor: sabitlenme yokken boş blok yalnızca
     kaydırılacak boşluk demek olurdu. */
  .katman-duraksama{ display: none; }
  .katmanli > #biz,
  .katmanli > .katman-alt{ position: static; min-height: 0; display: block; }
  .katmanli > .katman-orta{
    position: static; min-height: 0; display: block;
    border-radius: 0; border-top: 0;
  }
  .katman-ust{
    border-radius: 0; box-shadow: none;
    min-height: 0; display: block;
  }
}

/* .biz-duzen / .biz-gorsel KALDIRILDI: anasayfanın Biz Kimiz bölümü
   iki sütunluk "metin + resim kutusu" düzeninden fotoğraf sahnesine
   geçti, görsel artık .biz-sahne'nin zemininde. .biz-ikili ile
   .biz-gorsel YUKARIDA DURUYOR (satır ~1696) — onları biz-kimiz
   sayfası kullanıyor, buradan silinen yalnız bu bölüme ait olan
   ikinci bildirimdi. */
.biz-sahne{ --sahne: url("gorseller/bk-birikim-zeka.webp"); }
/* PERDE BU BÖLÜMDE İNCE. Ortak .sahne-bolum perdesi (0.82→0.96)
   metni yoğun bölümler için ayarlı; burada ekranda yalnız üç satır
   var ve o perde altında görsel neredeyse hiç okunmuyordu —
   "arka plan" değil "koyu bir zemin" gibi duruyordu.

   Perde YATAYA çevrildi ve kenarlarda koyulaşıyor: metin sütunun
   ortasında, görselin en parlak tel örgüsü de orada. Ortada 0.86
   okunabilirliği koruyor, kenarlarda 0.62 görselin yapısını
   gösteriyor. Ölçüldü: beyaz metin altındaki en açık piksel bile
   AA eşiğinin üstünde kalıyor. */
.biz-sahne{
  background-image:
    linear-gradient(90deg,
      rgba(10, 13, 36, 0.62) 0%,
      rgba(10, 13, 36, 0.86) 34%,
      rgba(10, 13, 36, 0.86) 66%,
      rgba(10, 13, 36, 0.62) 100%),
    var(--sahne);
}

/* İDDİA ŞERİDİ — üç iddia YAN YANA, aralarında dikey saç teli.
   Üç tam satır olarak alt alta diziliydi: her biri sayfanın
   ortasında tek başına duruyor, göz üçünü ayrı ayrı okuyup
   aralarındaki ilişkiyi kurmuyordu. Yan yana dizilince üçü tek bir
   beyan gibi taranıyor ve fotoğraf sahnesinin genişliğini de
   kullanıyor.

   Ayraçlar DİKEY. Alt alta düzende yatay çizgilerdi; sütunlaşınca
   aynı çizgiler sütunları değil satırları bölerdi.

   Grup üstten ve alttan hâlâ kapanıyor: fotoğrafın üstünde serbest
   duran metin yüzüyor gibi görünüyordu, ince çerçeve ona sahnede
   bir yer veriyor.

   ALTTAKİ BÖLÜMLE KARIŞMASIN: "Neden BIG Solutions" da üç sütunlu,
   ama orada her sütunun ÜSTTEN mor çizgisi, mono numarası, görseli
   ve gövde metni var — dolu bir kart. Burası çerçevesiz, numarasız,
   görselsiz; yalnız tek satırlık büyük tipografi ve aradaki saç
   teli. İki komşu bölüm aynı kutuları gösterince sayfa kendini
   tekrar ediyordu (daha önce denenip geri alındı), o yüzden aynı
   sütun sayısına rağmen biçimleri bilerek ayrı.

   Genişlik px: ch, ul'un 16px'lik kendi puntosuna göre hesaplanıyor
   ve buradaki büyük maddeler için fena hâlde dar çıkıyordu. */
.iddia-seridi{
  --iddia-cizgi: rgba(123, 79, 255, 0.34);
  list-style: none;
  /* Alt boşluk --s-5'ten --s-4'e indi. Maddeler alt alta dururken
     şerit 254px yer kaplıyordu ve düğmenin uzakta durması dengeliydi;
     sütunlaşınca şerit 124px'e indi, aynı boşluk düğmeyi bloktan
     kopardı. Ölçüldü: şeritle düğme arası 78px, şeridin kendi
     yüksekliğinin üçte ikisi kadar. */
  margin: var(--s-4) auto;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--iddia-cizgi);
  border-bottom: 1px solid var(--iddia-cizgi);
}
/* Ağırlık 300 bilinçli: kutu/gölge olmadan hiyerarşiyi yalnız
   tipografi kuruyor.

   Punto düştü (34 → 24 tavan): sütun ~340px, eski ölçüde "Hayvancılık
   sektöründe öncü medya iletişim çözümleri" dört satıra kırılıyor ve
   diğer iki sütunun iki katı yer kaplıyordu.

   Flex + center: üç maddenin satır sayısı eşit değil (1/1/2). Blok
   akışında üstten hizalanıp kısa olanlar yukarıda asılı kalıyordu;
   dikeyde ortalanınca üçü aynı optik eksene oturuyor. */
.iddia-seridi li{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) var(--s-3);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--metin);
  text-wrap: balance;
}
/* Ayraç YALNIZ maddelerin ARASINDA. :not(:first-child) yerine
   + kullanıldı çünkü kaskad animasyonu maddeleri gizlerken
   sıralama değişmiyor; komşu seçici her iki durumda da doğru. */
.iddia-seridi li + li{ border-left: 1px solid var(--iddia-cizgi); }

/* NEDEN SÜTUNLARI. Üstten çizgi + hafif punto; kart değil sütun.
   Izgara auto-fit ile: üç sütunun hepsi dolu olduğu için boş iz
   sorunu yok ama kural yine de kabı tam dolduruyor. */
.neden-sutunlar{
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
/* Numara kılavuzun mono kademesinde (kicker / teknik veri).
   Sayaçla üretiliyor, işaretlemede rakam yok. Kutu/çerçeve
   kullanmadan sütunlara yapı veriyor — üstteki Biz Kimiz de
   kartsız, ikisi aynı dili konuşuyor. */
.neden-sutunlar{ counter-reset: neden; }
.neden-sutunlar article{
  counter-increment: neden;
  border-top: 2px solid var(--vurgu);
  padding-top: var(--s-2);
}
.neden-sutunlar article::before{
  content: "0" counter(neden);
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--aralik-kicker);
  color: var(--vurgu-metin);
  text-align: center;
}
/* height:auto ŞART. <img> etiketi width=1160 height=648 taşıyor;
   height verilmezse o öznitelik kullanılan yükseklik oluyor ve
   aspect-ratio hiç devreye girmiyordu — görsel 379px genişlikte
   648px yüksekliğe geriliyor, kart 818px'e çıkıp bölümü 227px
   taşırıyordu (ölçüldü). auto + aspect-ratio doğru oranı veriyor.

   16/9: 16/10'dan alçak, üç sütun tek ekrana rahat sığıyor ve
   sinematik duruyor. */
.neden-sutunlar img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--r-kart);
  margin-bottom: var(--s-3);
}
/* Başlık MARKA MORU. Demo kartlarındaki başlıklar da aynı moru
   kullanıyor (#demolar-onizleme .yazi-kart h3); sayfadaki iki
   kart dizisi böylece tek bir vurgu dili konuşuyor.

   KARTIN TAMAMI ORTALI. Önce yalnız başlık ortalanmıştı; numara
   ve açıklama solda kalınca başlık metinden kopuk duruyordu —
   üç öge üç ayrı eksende hizalıydı. Üçü de ortalanınca kart tek
   bir blok gibi okunuyor.

   min-height + flex ortalama: başlıklar bir ya da iki satır
   olabiliyor; taban yükseklik üç sütunun açıklamalarını aynı
   satırdan başlatıyor. Ama düz min-height'ta artan 26px'in
   TAMAMI başlığın ALTINA biriyor ve başlıkla metni koparıyordu
   (ölçüldü). Flex ile artan alan üste ve alta eşit bölünüyor,
   başlık kendi bandında ortalanıyor. */
.neden-sutunlar h3{
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-1);
  color: var(--vurgu);
  text-align: center;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ölçü sınırı: ortalı metin sütunun tam kenarına dayanınca satır
   sonları dağınık görünüyor. 30ch okunaklı bir ölçü bırakıyor,
   kutu ortalandığı için sütunda dengeli duruyor. */
.neden-sutunlar p{
  margin: 0 auto;
  max-width: 30ch;
  color: var(--metin-govde);
  font-size: 14.5px;
  line-height: 1.65;
  text-align: center;
}

/* DAR EKRANDA SÜTUNLAR ALT ALTA, AYRAÇ DA YATAYA DÖNÜYOR.
   Üç sütun 900px'in altında ~280px'e iniyor ve uzun madde beş
   satıra kırılıyordu. Tek sütuna düşünce dikey ayraç sütunları
   değil satırları bölmeye başlar; o yüzden border-left sıfırlanıp
   yerine border-top geliyor. */
@media (max-width: 900px){
  .iddia-seridi{ grid-template-columns: 1fr; }
  .iddia-seridi li{ padding: var(--s-3) var(--s-2); }
  .iddia-seridi li + li{ border-left: 0; border-top: 1px solid var(--iddia-cizgi); }
}

/* ============================================================
   BIGGIE GÖSTERİMİ — anasayfa, "size özel chatbot" bölümü
   ------------------------------------------------------------
   Video yerine işaretleme: sayfa ağırlaşmıyor, her çözünürlükte
   net, metin aranabilir. Yazışmanın tamamı DOM'da duruyor;
   animasyon yalnız opaklık ve konum oynatıyor.
   ============================================================ */
.demo-ikili{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-6); align-items: center;
}
@media (max-width: 1024px){
  .demo-ikili{ grid-template-columns: 1fr; }
}

/* Panelin ölçüleri GERÇEK widget'tan (big-bot.css) alındı: 170°
   degrade, 24px köşe, aynı kenarlık ve gölge. Ziyaretçi sağ alttan
   Biggie'yi açtığında bunun aynısını görecek; benzer bir şey çizmek
   değil, aynısını göstermek istiyoruz. */
/* Panel GERÇEK widget'ın (big-bot.css) ölçüleriyle birebir: 400px
   genişlik, 170° degrade, 24px köşe, aynı kenarlık ve gölge.
   Ziyaretçi soldan Biggie'yi açtığında bunun aynısını görecek;
   benzer bir şey çizmek değil, aynısını göstermek istiyoruz —
   o yüzden genişlik de "kolonu doldur" değil, sabit 400px. */
/* min-width:0 ŞART. Ölçümle bulundu: taslağın 720px'lik iç kutusu
   min-content genişliği olarak yukarı sızıyordu. Ne .bg-cikti'nin
   overflow:hidden'ı ne de max-width bunu kesiyor; çünkü .bg-cikti bir
   FLEX öğesi, .biggie-gosterim de bir GRID öğesi ve ikisinin de
   varsayılan min-width'i "auto" (= min-content). Sonuç: 396px'lik
   pencerede kap 364px iken panel 400px kalıyor, sayfa yatay
   kaydırılıyordu (scrollWidth 416 > clientWidth 396). */
.biggie-gosterim{
  width: 100%; max-width: 400px; min-width: 0; margin-inline: auto;
}

/* ---- MIKNATIS DÜĞME ----------------------------------------
   "Biggie'yi deneyimleyin" düğmesi imleç yaklaşınca ona doğru
   kayıyor ve belirginleşiyor. Etki YALNIZ DÜĞMEYE ait: bir
   denemede aynı hareket sağdaki gösterim paneline verilmişti,
   panel kendi başına kıpırdayan bir şeye dönüşüyordu ve
   ziyaretçinin gözü asıl eyleme değil panele gidiyordu.

   Yer değiştirmeyi media.js yazıyor; "arkadan yetişme" hissini
   veren şey buradaki geçiş. Düğme küçük olduğu için 6px yeterli;
   daha fazlası imleci kaçırıyor ve tıklamayı zorlaştırıyor. */
.demo-giris [data-biggie-ac]{
  --fare-x: 0px; --fare-y: 0px;
  transform: translate3d(var(--fare-x), var(--fare-y), 0);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .35s var(--ease), filter .35s var(--ease);
}
.demo-giris [data-biggie-ac].one-cikar{
  transform: translate3d(var(--fare-x), var(--fare-y), 0) scale(1.04);
  box-shadow: 0 14px 34px rgba(123,79,255,.42), 0 0 44px rgba(123,79,255,.30);
  filter: brightness(1.06);
}

/* Hareket azaltılmışsa kayma ve büyüme yok — ışıma kalıyor,
   çünkü o hareket değil, yalnızca bir vurgu. */
@media (prefers-reduced-motion: reduce){
  .demo-giris [data-biggie-ac],
  .demo-giris [data-biggie-ac].one-cikar{ transform: none; transition: none; }
}
.bg-panel{
  /* Yükseklik de widget'ın kendi değeri: 620px, en fazla 82vh.
     Önce yüksekliği İÇERİK belirliyordu ve panel 1026px'e çıkıp
     bölümden taşıyordu (ölçüldü). Gerçek panel hiç uzamaz —
     mesajlar sabit çerçevenin İÇİNDE aşağı kayar. Yani doğru
     görünmek ile doğru davranmak burada aynı şey. */
  height: 620px; max-height: 82vh;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(20,27,61,.97), rgba(10,13,36,.99));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---- HERO (panelin tepesi) ----
   Widget'ta burası 176px'lik bir sahne: arkada dönen orb, üstüne
   binen marka/durum/kapat. Konumlar da oradan: ikisi de left:20px,
   biri top:16px diğeri bottom:14px. */
.bg-hero{
  position: relative; height: 176px; flex: none; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(120% 100% at 50% 0%, rgba(123,79,255,.13), transparent 62%);
}
.bg-orb{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-hero-sonum{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, rgba(10,13,36,.85) 100%);
}
.bg-marka{
  position: absolute; left: 20px; top: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.bg-ad{
  font-weight: 900; font-size: 19px; color: #fff;
  letter-spacing: -.4px; line-height: 1;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
/* Sürüm rozeti — widget'taki .bb-ver ile aynı. */
.bg-ver{
  display: inline-block; margin-left: 7px; vertical-align: 3px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px; line-height: 1;
  color: var(--fisilti-beyazi); background: rgba(123,79,255,.20);
  border: 1px solid rgba(155,122,255,.42); text-shadow: none;
}
.bg-rol{
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(228,225,239,.62);
}
.bg-durum{
  position: absolute; left: 20px; bottom: 14px;
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: rgba(255,255,255,.5); letter-spacing: .3px;
}
.bg-durum i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mor-500); box-shadow: 0 0 8px var(--mor-500);
}
.bg-kapat{
  position: absolute; right: 14px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6); font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}

/* Mesaj alanı — #bb-msgs ile aynı: esneyip kalan yeri kaplıyor,
   taşan kısım KENDİ İÇİNDE kayıyor. İnce kaydırma çubuğu da
   widget'tan; kalın varsayılan çubuk 400px'lik panelde göze
   batıyor. */
.bg-akis{
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 11px;
  padding: 18px 18px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
.bg-akis::-webkit-scrollbar{ width: 8px; }
.bg-akis::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}

/* Balonlar ve çıktı kutusu esnemesin: mesaj alanı bir flex sütun,
   varsayılan flex-shrink içerik sıkıştıkça balonları eziyordu. */
.bg-akis > *{ flex: none; }

/* Balon yarıçapları da birebir: bot 17/17/17/5, kişi 17/17/5/17 —
   kuyruk yönü konuşanı gösteriyor. */
.bg-balon{
  margin: 0; max-width: 87%;
  padding: 11px 15px;
  font-size: 14px; line-height: 1.58;
}
.bg-bot{
  align-self: flex-start;
  border-radius: 17px 17px 17px 5px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--fisilti-beyazi);
}
.bg-kisi{
  align-self: flex-end;
  border-radius: 17px 17px 5px 17px;
  background: var(--mor-700);
  color: #fff;
  box-shadow: 0 6px 20px rgba(123,79,255,.3);
}
/* Kapanış sorusu: yeni bir balon değil, aynı cevabın devamı. */
.bg-soru{ margin-top: -5px; }

/* ---- TASLAK ÇIKTISI ----------------------------------------
   Bölümün asıl iddiası bu: Biggie sohbetin içinde çalışan bir
   arayüz üretiyor ve çıktıyı orada gösteriyor.

   YANLIŞ KOPYA UYARISI — kayıt. İlk hâli big-bot.css'teki
   ".bb-mock-side / -tiles / -list" bloğundan kopyalanmıştı. O blok
   ÖLÜ KOD: widget artık o şablonu çizmiyor. Güncel akış
   (big-bot.js renderSite) bir STÜDYO SAHNESİ kuruyor — hale +
   ızgara arka plan, tür rozeti, tarayıcı çerçevesi ve içinde
   modelin yazdığı özgün HTML'i taşıyan sandbox iframe. CSS'te
   duruyor diye kullanılıyor sanmak, eski bir sürümün önizlemesini
   yayınlamak olurdu.

   Ölçek widget'ın panoOlcekle()'siyle aynı: sayfa 720px çiziliyor,
   transform: scale() ile kaba sığdırılıyor, kırpma yüksekliği
   min(900 x ölçek, 330). Ölçeği CSS'ten türetmek mümkün değil —
   scale() birimsiz sayı ister, calc(100cqw / 720) ise uzunluk
   döndürür; o yüzden media.js ölçüyor. --site-olcek yazılmazsa
   .4556 devreye giriyor (400px'lik panelin değeri). */
.bg-cikti{ width: 100%; min-width: 0; }

/* Sunum sahnesi: önizleme düz zeminde değil, stüdyo gibi bir
   pasparta içinde asılı duruyor. */
.bg-sahne{
  position: relative; overflow: hidden;
  padding: 30px 18px 14px; border-radius: 20px;
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 45%, rgba(0,0,0,.14));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.34);
}
.bg-sahne > *{ position: relative; z-index: 1; }
.bg-sahne-hale{
  position: absolute; inset: -40% -20% auto -20%; height: 78%; display: block; z-index: 0;
  background: radial-gradient(58% 62% at 50% 0%, var(--sahne-isik), transparent 72%);
  filter: blur(6px);
}
.bg-sahne-izgara{
  position: absolute; inset: 0; display: block; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000 35%, transparent 78%);
          mask-image: radial-gradient(72% 62% at 50% 34%, #000 35%, transparent 78%);
}
/* Tür rozeti: ziyaretçi neye baktığını bir bakışta anlasın. */
.bg-sahne-rozet{
  position: absolute; top: 12px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; line-height: 1;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--sahne-vurgu);
  background: rgba(10,13,36,.62);
  border: 1px solid var(--sahne-cizgi);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bg-sahne-ikon{ width: 13px; height: 13px; flex: none; }
/* Arayüz türünün ışık kimliği (.sahne-arayuz). */
.sahne-arayuz{ --sahne-isik: rgba(123,79,255,.34); --sahne-vurgu: var(--mor-300); --sahne-cizgi: rgba(123,79,255,.36); }

.bg-sahne-not{
  margin: 10px 0 0; font-size: 11px; line-height: 1.5;
  color: rgba(228,225,239,.54);
}

/* Kırpma kabı — yüksekliği media.js yazıyor (widget'ta da öyle). */
.bg-sahne-kirp{ width: 100%; min-width: 0; overflow: hidden; height: 330px; }

/* Tarayıcı çerçevesi. */
.bg-site{
  width: 720px; transform-origin: top left;
  transform: scale(var(--site-olcek, .4556));
  border-radius: 14px; overflow: hidden;
  background: #0A0D24;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 26px 64px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03),
              0 0 34px var(--sahne-isik);
}
.bg-site-bar{
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bg-site-nokta{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); display: block; }
.bg-site-url{ margin-left: 12px; font-size: 12px; color: rgba(228,225,239,.58); letter-spacing: .3px; }

/* ---- ÇERÇEVENİN İÇİNDEKİ SAYFA ----
   Gerçekte burası sandbox'lı bir iframe ve içeriğini model yazıyor;
   yani sabit bir şablon YOK. Buradaki sayfa o yerin duruyor ve
   yukarıdaki brief'in olası karşılığı. Yüksekliği 900px: gerçek
   önizleme de 330px'te kırpılıyor, sayfanın altının görünmemesi
   kusur değil, aslına sadakat. */
.bg-sayfa{ display: flex; min-height: 900px; font-family: var(--font-govde); }
.bg-sayfa-yan{
  width: 168px; flex: none; padding: 18px 12px;
  border-right: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.16);
}
.bg-sayfa-logo{ font-size: 14px; font-weight: 700; color: var(--fisilti-beyazi); padding: 0 8px 16px; letter-spacing: .2px; }
.bg-sayfa-nav{
  display: flex; align-items: center; gap: 9px; padding: 9px 8px;
  border-radius: 8px; font-size: 12.5px; color: rgba(228,225,239,.66); margin-bottom: 3px;
}
.bg-sayfa-nav.on{ background: rgba(123,79,255,.16); color: var(--fisilti-beyazi); }
.bg-sayfa-ico{ width: 13px; height: 13px; border-radius: 4px; background: rgba(123,79,255,.5); flex: none; display: block; }
.bg-sayfa-nav.on .bg-sayfa-ico{ background: var(--mor-700); }

.bg-sayfa-ana{ flex: 1; padding: 20px 22px; min-width: 0; }
.bg-sayfa-bas{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bg-sayfa-h1{ font-size: 18px; font-weight: 650; color: var(--fisilti-beyazi); }
.bg-sayfa-alt{ font-size: 12.5px; color: rgba(228,225,239,.58); margin-top: 4px; max-width: 330px; line-height: 1.45; }
.bg-sayfa-cta{
  flex: none; font-size: 12px; font-weight: 600; color: #fff;
  padding: 9px 15px; border-radius: 9px;
  background: linear-gradient(135deg, var(--mor-700), var(--mor-900));
  box-shadow: 0 6px 18px rgba(123,79,255,.35);
}

.bg-sayfa-kutular{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 16px; }
.bg-sayfa-kutu{ background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 13px 14px; }
.bg-sayfa-kl{ font-size: 11.5px; color: rgba(228,225,239,.58); margin-bottom: 7px; }
.bg-sayfa-kv{ font-size: 21px; font-weight: 680; color: var(--fisilti-beyazi); letter-spacing: -.3px; }
/* Kılavuz s.11 anlamsal renk TANIMLAMIYOR; artış/azalış farkı bu
   yüzden yeşil-kırmızıyla değil, mor yoğunluğuyla veriliyor. Yön
   zaten +/- işaretiyle de yazılı — renk tek taşıyıcı değil. */
.bg-sayfa-kd{ font-size: 11.5px; color: var(--mor-300); margin-top: 5px; }
.bg-sayfa-kd.dus{ color: rgba(228,225,239,.5); }

.bg-sayfa-liste{ background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; overflow: hidden; }
.bg-sayfa-satir{ display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.bg-sayfa-satir:last-child{ border-bottom: 0; }
.bg-sayfa-av{
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: block;
  background: linear-gradient(135deg, rgba(123,79,255,.55), rgba(155,122,255,.2));
}
.bg-sayfa-stx{ flex: 1; min-width: 0; }
.bg-sayfa-s1{ font-size: 12.5px; color: var(--lavanta-gri); }
.bg-sayfa-s2{ font-size: 11px; color: rgba(228,225,239,.54); margin-top: 3px; }
.bg-sayfa-etiket{
  flex: none; font-size: 10.5px; color: var(--mor-300);
  padding: 4px 9px; border-radius: 999px;
  background: rgba(123,79,255,.15); border: 1px solid rgba(123,79,255,.25);
  white-space: nowrap;
}

/* ---- YAZMA ALANI ----
   #bb-inputrow'un birebir karşılığı. Etkileşimsiz: bu bir gösterim,
   gerçek Biggie yandaki düğmeyle açılıyor. */
.bg-alt{
  display: flex; gap: 8px; padding: 12px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.bg-giris{
  flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 12px 15px;
  font-size: 14px; color: rgba(255,255,255,.32);
}
.bg-gonder{
  width: 46px; border-radius: 14px; color: #fff;
  display: grid; place-items: center;
  background: var(--mor-700); box-shadow: 0 8px 22px rgba(123,79,255,.32);
}

/* Yazıyor göstergesi. Widget'ta bu bir BOT BALONU (.bb-msg.bot) +
   .bb-typing; o yüzden balon zeminini/köşesini aynen taşıyor,
   sadece iç boşluk ve nokta ölçüleri .bb-typing'den geliyor. */
.bg-yaziyor{
  align-self: flex-start; margin: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 13px 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 17px 17px 17px 5px;
}
.bg-yaziyor i{
  width: 6.5px; height: 6.5px; border-radius: 50%;
  background: rgba(195,176,255,.75); opacity: .35;
  animation: bgNefes 1.25s infinite ease-in-out;
}
.bg-yaziyor i:nth-child(2){ animation-delay: .18s; }
.bg-yaziyor i:nth-child(3){ animation-delay: .36s; }
@keyframes bgNefes{ 0%,60%,100%{ transform: translateY(0); opacity:.35; } 30%{ transform: translateY(-5px); opacity:1; } }

/* OYNATIM. Adımlar .bg-adim-N sınıfıyla açılıyor (media.js).
   Varsayılan: gizli ama YER KAPLIYOR — panel oynarken zıplamasın. */
.biggie-gosterim [data-adim]{
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.biggie-gosterim [data-adim].gorun{ opacity: 1; transform: none; }
/* Yazıyor balonu işini bitirince tamamen çıkıyor. */
.biggie-gosterim .bg-yaziyor.bitti{ display: none; }

/* Hareket azaltılmışsa: her şey yerinde, yazıyor göstergesi yok. */
@media (prefers-reduced-motion: reduce){
  .biggie-gosterim [data-adim]{ opacity: 1; transform: none; transition: none; }
  .biggie-gosterim .bg-yaziyor{ display: none; }
  .bg-yaziyor i{ animation: none; }
}

/* Demolar sayfasına tek kapı — Biggie'nin ALTINDA ve SAĞDA.
   Bölümün başındaki eski satırın yerini aldı: bağlantı gösterimden
   önce değil sonra geliyor, çünkü ziyaretçi önce örneği görmeli,
   "devamı burada" ondan sonra anlam kazanıyor.

   İkilinin ikinci sütununun ikinci satırında duruyor ve panelle
   AYNI 400px'e sıkışıyor; yoksa sütun panelden geniş olduğu için
   bağlantı panelin sağ kenarını 84px aşıyordu. */
/* .demo-alt / .demo-mini / .demo-alt-bag KALDIRILDI (2026-09-11):
   demolar chatbot bölümünden çıkıp kendi bölümüne taşındı ve orada
   sayfanın mevcut kart dilini (.kart-izgara.uc + .yazi-kart)
   kullanıyor. Yeni kart stili yazmaya gerek kalmadı; bu kurallar da
   karşılıksız kaldığı için siliniyor. */

/* PERDE HER SAYFADA ÇIKIYORDU — sebebi buydu.
   Kalıp perdeyi `hidden` ile başlatıyor ve JS onu yalnız anasayfada,
   oturumda bir kez açıyor. Ama `hidden` niteliği tarayıcının
   varsayılan display:none'ı üzerinden çalışır; yukarıdaki
   `.acilis{ display:flex }` kuralı onu eziyordu. Böylece nitelik
   "gizli" derken öğe 1440x900 kaplıyor, animasyon da çalışıp
   perdeyi her sayfada gösteriyordu (ölçüldü: alt sayfalarda
   hidden=true, display=flex, alan 1440x900).
   Aynı koruma .ucan-logo için yazılmış, perde için atlanmış. */
.acilis[hidden]{ display: none; }

.acilis-marka{
  display: inline-flex; align-items: baseline; gap: 0.6ch;
  position: relative;
}

/* İMZA SATIRI — perdede kilidin altında, onunla aynı eksende.
   .acilis bir flex sütun ve çocukları arasında var(--s-5) boşluk var;
   o boşluk sloganı kilitten kopardığı için negatif kenar boşluğuyla
   geri çekiliyor. Punto kilide oranlı: kelime markası clamp ile
   büyüdüğünde slogan da büyüsün diye em değil vw tabanlı clamp. */
.acilis-slogan{
  /* Kutu aralığı 14px ölçülüyordu ama kelime markasının satır
     yüksekliği altında ~35px ölü boşluk var; göz o boşluğu da
     mesafe sayıyor ve slogan kopuk duruyordu. Negatif değer
     artırıldı: optik aralık kilide yaklaştı. */
  margin-top: calc(var(--s-5) * -1 - 4px);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(10px, 1.9vw, 17px);
  letter-spacing: 0.12em;
  color: var(--fisilti-beyazi);
  opacity: 0;
  animation: acilisSlogan 700ms var(--ease) 620ms forwards;
}
@keyframes acilisSlogan{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: .72; transform: none; }
}
/* Hareket azaltılmışsa animasyon yok, satır doğrudan görünür. */
@media (prefers-reduced-motion: reduce){
  .acilis-slogan{ animation: none; opacity: .72; }
}
/* LOGO BÜYÜTÜLDÜ: 46px tavandan 104px'e. Açılış ekranı markanın
   ilk görüldüğü yer; küçük durmasının bir gerekçesi yok. */
.acilis-marka .marka-ad{
  font-size: clamp(52px, 11vw, 104px);
  display: inline-flex; align-items: baseline;
}
.acilis-marka .marka-etiket{
  font-size: clamp(13px, 2.6vw, 26px);
  opacity: 0;
  animation: acilisEtiket 620ms var(--ease) 750ms forwards;
}

/* Harfler tek tek: --h sırayı taşıyor, gecikme ondan hesaplanıyor.
   İşaretlemede sayı yazılı, burada çarpılıyor — harf eklenirse
   CSS'e dokunmak gerekmiyor. */
.acilis-marka .marka-ad b,
.acilis-marka .marka-ad i{
  display: inline-block;
  font-weight: inherit; font-style: normal;
  opacity: 0;
  transform: translateY(0.42em);
  animation: acilisHarf 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(150ms + var(--h) * 90ms);
}
/* Noktalar kılavuz gereği Mor 700 ve biraz daha uzun süzülüyor —
   imza detayı olduğu için göze çarpsın. */
.acilis-marka .marka-ad i{
  color: var(--mor-700);
  font-size: 0.5em;
  vertical-align: 0.30em;
  padding-inline: 0.05em;
}

@keyframes acilisHarf{ to{ opacity: 1; transform: none; } }
@keyframes acilisEtiket{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

.acilis-cizgi{
  position: relative;
  width: min(260px, 56vw); height: 2px;
  background: rgba(255,255,255,0.10);
  border-radius: var(--r-rozet); overflow: hidden;
}
.acilis-cizgi i{
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--mor-700), var(--mor-300));
  transform: scaleX(0); transform-origin: left;
  animation: acilisCizgi 900ms cubic-bezier(0.4, 0, 0.2, 1) 950ms forwards;
}
@keyframes acilisCizgi{ to{ transform: scaleX(1); } }

/* ============================================================
   HERO LOGOSU VE UÇAN LOGO
   ------------------------------------------------------------
   #heroLogo yalnız ÖLÇÜM hedefi: görünmez ama yer kaplıyor,
   uçan logonun başlangıç kutusunu ondan okuyoruz. Görünen şey
   sabit konumlu #ucanLogo — kaydırma oranına göre hero ile üst
   bar konumu arasında enterpolasyon yapıyor.

   Neden ayrı bir öğe: aynı düğümü hem akışta hem sabit tutmak
   mümkün değil. Studio da aynı yapıyı kullanıyor (flyLogo).
   ============================================================ */
/* Hero içeriği iki sütun: solda metin, sağda logo. İkisi
   birbirine göre ortalanıyor (align-items:center), yani logonun
   dikey konumu artık hesaplanmıyor — ızgara hallediyor. */
.hero-ic{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-6);
}
.hero-metin{ min-width: 0; }

.hero-logo{
  display: inline-flex; align-items: baseline; gap: 0.5ch;
  justify-self: end;
  visibility: hidden;              /* yalnız ölçüm için */
  pointer-events: none;
}
/* HERO EŞİĞİ DE 1024 → 900 (üst menüyle aynı hat).
   Menü 900'e çekilince 901-1024 arasında tuhaf bir ara durum
   oluştu: başlıkta tam masaüstü menü duruyor ama hero hâlâ tek
   sütun, yani sağ yarısı bomboş kalıyordu. İki farklı kırılma
   noktası aynı ekranda iki farklı kipi birden gösteriyordu.

   Sığdığı ölçüldü — logo zorla açılıp bakıldı:
     901px  → metin 498px, logo 267px, çakışma yok, taşma yok
     1024px → metin 576px, logo 303px, çakışma yok, taşma yok
   Başlık her genişlikte iki satırda kalıyor (92px), yani metin
   sütunu sıkışıp kırılmıyor. */
@media (max-width: 900px){
  .hero-ic{ grid-template-columns: 1fr; }
  .hero-logo{ display: none; }
}
.hero-logo .marka-ad{ font-size: clamp(44px, 7vw, 88px); }
.hero-logo .marka-etiket{ font-size: clamp(14px, 2.3vw, 29px); }

.ucan-logo{
  position: fixed; z-index: 60;
  display: inline-flex; align-items: baseline; gap: 0.5ch;
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}
/* [hidden] TEK BAŞINA YETMİYOR: yukarıdaki display:flex onu eziyor,
   çünkü [hidden]'ın getirdiği display:none yalnız tarayıcı
   varsayılanıdır ve her sınıf kuralı ondan güçlüdür.
   Sonuç: uçan logo ANASAYFA DIŞINDAKİ her sayfada 0,0'da
   görünüyordu ve üst bardaki logoyla çakışıyordu (ölçüldü:
   ucan 0,0 · nav 96,13 — üst üste). */
.ucan-logo[hidden]{ display: none; }

/* DEVİR TESLİM. Uçuş bitip logo üst bara oturduğunda İKİ logo
   birden görünüyordu: uçan olan (93px) ve üst bardaki (97px)
   aynı noktada üst üste biniyordu. 4px'lik genişlik farkı
   harfleri hafifçe kaydırdığı için "pikselleşmiş/bozuk" bir
   görüntü çıkıyordu — ölçüldü: ikisi de 156,13'te, opaklık 1.

   Çözüm: uçuş boyunca üst bardaki logo saklı, uçan olan görünür;
   oturduğu an takas oluyor. Geçiş 120ms, göz fark etmiyor. */
.ust .marka{ transition: opacity 120ms linear; }
body[data-ucus="acik"] .ust .marka{ opacity: 0; }
body[data-ucus="oturdu"] .ucan-logo{ opacity: 0; }
.ucan-logo{ transition: opacity 120ms linear; }

/* Logo hero boyutunda ÇİZİLİYOR, sonra küçültülüyor.
   Önce tersi yapılmıştı: 22px'te çizilip 4 kat büyütülüyordu ve
   metin bulanık çıkıyordu — büyütme piksel üretmiyor. Şimdi
   ölçek her zaman ≤ 1, yani hep keskin. */
/* PUNTO .hero-logo İLE BİREBİR AYNI OLMAK ZORUNDA.
   Burada sabit 88px / 29px yazıyordu; .hero-logo ise
   clamp(44px, 7vw, 88px) kullanıyor. İkisi ancak 7vw'nin 88'e
   ulaştığı ~1257px'ten sonra eşitleniyordu.

   Altında uçan logo hero'daki ölçüm yuvasından BÜYÜK çiziliyordu:
   1024px'te yuva 303px, uçan logo 371px — 68px fazla ve sağdan
   taşıp "SOLUTIONS" kesiliyordu (ekran görüntüsüyle doğrulandı).
   Uçuş matematiği de yanlış ölçekten başlıyordu, çünkü
   U.olcek = üstMarka.height / heroLogo.height oranı gerçekte
   çizilen boyutu değil yuvanın boyutunu tarif ediyordu.

   Hata 1025-1256 aralığında ZATEN vardı ama görünmüyordu: o
   aralıkta logo tamamen gizliydi. Eşik 900'e inince ortaya çıktı.

   Aynı clamp iki yerde: değiştiren ikisini birlikte değiştirmeli,
   yoksa uçan logo yine yuvasından taşar. */
.ucan-logo .marka-ad{ font-size: clamp(44px, 7vw, 88px); }
.ucan-logo .marka-etiket{ font-size: clamp(14px, 2.3vw, 29px); }

/* TABLETTE LOGO KÜÇÜLÜYOR — BAŞLIKLA ORANTI KURSUN.
   Punto 7vw'ye bağlı, yani 1180px'lik tablette 82.6px ediyor.
   Sayfa başlığı aynı genişlikte ~44px; logo başlığın neredeyse
   İKİ KATI oluyor ve kompozisyonun ağırlık merkezini sağa
   çekiyordu (kullanıcının "ölçekleme kötü" dediği şey).
   Masaüstünde sorun görünmüyor çünkü orada başlık da büyüyor.

   5.6vw 1180px'de 66px veriyor: başlığın 1.5 katı — logo hâlâ
   baskın ama başlıkla yarışmıyor. Üst sınır 1200px, çünkü
   ondan sonra 7vw zaten 88px tavanına dayanıyor ve oran
   kendiliğinden düzeliyor.

   İKİ LOGO BİRDEN: .hero-logo ölçüm yuvası, .ucan-logo ekranda
   görünen. Punto ikisinde aynı olmazsa uçan logo yuvasından
   taşar — bu tuzağa bir kez düşüldü (1024'te "SOLUTIONS"
   kesiliyordu). */
@media (min-width: 901px) and (max-width: 1200px){
  .hero-logo .marka-ad,
  .ucan-logo .marka-ad{ font-size: clamp(40px, 5.6vw, 66px); }
  .hero-logo .marka-etiket,
  .ucan-logo .marka-etiket{ font-size: clamp(13px, 1.85vw, 22px); }
}

/* İMZA SATIRI — hero'daki büyük kilidin altında.
   position:absolute şart: .ucan-logo inline-flex ve uçuş, ölçülen
   kutular arasında enterpolasyon yapıyor. Akışa giren bir satır
   kutuyu büyütüp logoyu yanlış noktaya taşırdı.
   Sol kenar kelime markasıyla aynı çizgide; ortalanınca kilit
   dağılmış görünüyor. */
.ucan-slogan{
  position: absolute;
  /* left+right: 0 → kutu kilidin TAM genişliğini alıyor, metin de
     onun içinde ortalanıyor. Önce yalnız left:0 vardı: slogan 253px
     çıkıp 1202'de bitiyordu, yani ne kelime markasının sağ kenarına
     (1132) ne kilidin kenarına (1320) denk geliyordu. Hiçbir şeye
     hizalanmayan bir kenar, kilidi dağılmış gösteriyordu. */
  top: 100%; left: 0; right: 0;
  /* Kutunun altı, harflerin görsel altından ~30px aşağıda (satır
     yüksekliği boşluğu). Negatif değer optik boşluğu kapatıyor. */
  margin-top: -16px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 400;
  /* 88px kelime markası / 29px etiket / 15px slogan: her kademe bir
     öncekinin yarısına yakın. 19px'te slogan etiketle yarışıyordu. */
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--fisilti-beyazi);
  opacity: 0.72;
  white-space: nowrap;
}

/* Yukarıdaki devir teslim bloğunda aynı kural zaten var
   (body[data-ucus="acik"] .ust .marka{opacity:0}); burada ikinci
   kez yazılmıştı. Tekrar kaldırıldı, yalnız "oturdu" hâli kaldı. */
body[data-ucus="oturdu"] .ust .marka{ opacity: 1; }

/* Uçuş animasyonunun eşiği de 900 — yukarıdaki .hero-logo
   kuralıyla AYNI olmak zorunda. Farklı kalsalardı 901-1024
   arasında hero logosu görünür ama uçmaz, üst bardaki marka da
   hiç sönmezdi: kaydırınca iki logo aynı anda ekranda durur. */
@media (max-width: 900px){
  .hero-logo, .ucan-logo{ display: none; }
  body[data-ucus] .ust .marka{ opacity: 1; }
}

/* ============================================================
   DAKTİLO
   ============================================================ */
.daktilo{ color: var(--vurgu); }
.daktilo::after{
  content: ""; display: inline-block;
  width: 2px; height: 0.95em;
  margin-left: 3px; vertical-align: -0.12em;
  background: var(--vurgu);
  animation: imlec 1s steps(2, start) infinite;
}
@keyframes imlec{ 0%,50%{ opacity: 1; } 50.01%,100%{ opacity: 0; } }

/* ============================================================
   HERO ARKA PLAN KATMANI (kılavuz s.15)
   ------------------------------------------------------------
   "Robot, beyin, devre şeması gibi klişe imgeler kullanılmaz.
   Bunun yerine soyut veri akışları, ışık izleri, katman ve ağ
   yapıları tercih edilir. Mor ışıma bu görsellerde bağlayıcı
   unsurdur."

   Bu yüzden fotoğraf değil, çizilen ışık izleri. Canvas 2B —
   WebGL yok, kütüphane yok. Işıma zaten ::before'da; bu katman
   onun üstüne hareket ekliyor, yerini almıyor.
   ============================================================ */
/* DİKKAT: bu sınıf işaretlemede YOK, tuvalı media.js üretiyor.
   "Kullanılmayan CSS" taraması yalnız HTML'e bakıyor, bu yüzden
   .hero-fon ölü görünüyor. Silme — bir kez silindi ve hero'nun
   arka planı kayboldu. Aynı şey JS ile eklenen her sınıf için
   geçerli (.icerde de öyle). */
.hero-fon{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}

/* ============================================================
   NE YAPIYORUZ — YAPIŞKAN YATAY RAY
   ------------------------------------------------------------
   Hizmetler bölümüyle AYNI mekanik, farklı ölçüler: burada dört
   büyük kategori kartı var, orada on bir küçük hizmet kartı.
   Ray kodu media.js'te tek; ölçüyü CSS veriyor.

   Öncesi: dört editoryal birim alt alta diziliyordu ve bölüm
   ekrandan taşacak kadar uzuyordu.
   ============================================================ */
.giris-alan[data-ray="acik"] .giris-yapisik{
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.giris-alan[data-ray="acik"] .giris-ray{
  display: flex; flex-wrap: nowrap;
  gap: var(--s-4);
  padding-inline: max(var(--kap-bosluk), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.giris-alan[data-ray="acik"] .giris-kart{
  flex: none;
  width: min(560px, 82vw);
}
.giris-bas{ flex: none; margin-bottom: var(--s-4); }

.giris-ilerleme{
  flex: none;
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin: var(--s-4) auto 0;
  height: 2px; background: var(--kenar);
  border-radius: var(--r-rozet); overflow: hidden;
}
.giris-ilerleme span{
  display: block; height: 100%; width: 100%;
  background: var(--mor-700);
  transform: scaleX(0); transform-origin: left;
}
.giris-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .giris-ilerleme{ display: none; }

/* Ray kurulmadığında (mobil / hareket azaltılmış / JS yok):
   normal ızgara. İçerik hiçbir koşulda kaybolmuyor. */
.giris-ray{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}
.giris-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .giris-ray{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin-inline: auto;
}

/* Kart — görsel üstte, metin altta. Çerçevesiz: kılavuzun
   editoryal dili korunuyor, yalnız yerleşim yatay oldu. */
/* KART İÇİ HİZA. Kartlar rayda esnek olduğu için yükseklikleri
   zaten eşit (ölçüldü: beşi de 580px), ama İÇERİK farklı uzunlukta:
   açıklama 1 ya da 2 satır, hizmet çipleri 1 ya da 2 sıra. Sonuçta
   "İncele" bağlantısı kartlar arasında 496px ile 556px arasında
   geziyordu — 60px'lik kayma göz kartları eğri gösteriyordu.

   İki kademeli çözüm:
   1) Açıklamaya iki satırlık taban yükseklik → çip sıraları aynı
      hizada başlıyor.
   2) Metin bloğu esnek sütun, "İncele" margin-top:auto ile kartın
      ALTINA çakılıyor → çip sırası bir ya da iki satır olsun,
      bağlantı beş kartta da aynı y'de.
   Sabit piksel yerine em: yazı tipi ölçeği değişirse taban da
   onunla birlikte büyüyor. */
.giris-kart{ display: flex; flex-direction: column; }
.giris-kart .giris-gorsel{
  display: block; overflow: hidden;
  border-radius: var(--r-yuzey);
  margin-bottom: var(--s-3);
}
.giris-kart .giris-gorsel img{
  display: block; width: 100%; height: 300px; object-fit: cover;
  transition: transform 500ms var(--ease);
}
.giris-kart:hover .giris-gorsel img{ transform: scale(1.04); }
.giris-kart .giris-metin{ display: flex; flex-direction: column; flex: 1; }
/* 3.4em = tam iki satır (satır yüksekliği 1.7, ölçüldü). 3em
   yazmıştım, 45px ediyordu ve iki satırlık kart 51px'te kalınca
   çip sıraları 6px kayıyordu. */
.giris-kart .giris-not{ min-height: 3.4em; }
.giris-kart .giris-git{ margin-top: auto; align-self: flex-start; }
.giris-kart .giris-ad{ font-size: var(--olcu-h2); }
.giris-kart:hover .giris-git i{ transform: translateX(5px); }

@media (max-width: 1024px){
  .giris-kart .giris-gorsel img{ height: 220px; }
}

/* DEMO KARTLARI (.urun.demo-uzun) bloğu BURADAN KALDIRILDI: 40
   satır, hiçbir sayfanın kullanmadığı stil. Demolar sayfası
   yapışkan yığına geçti (.yigin-demo); iki sütunlu, görseli
   dönüşümlü olarak sağa geçen eski kart artık yok. Kart görünümü
   yeniden gerekirse .yigin-kart aynı işi yapıyor. */

/* ============================================================
   ALT SAYFA KARTLARI — YAPIŞKAN YIĞIN (DESTE)
   ------------------------------------------------------------
   Kategori sayfalarındaki 4–7 hizmet kartı. ÖNCE yatay raydı
   (rayKur); şimdi dikey yığın: her kart position:sticky ile
   ekrana çakılıyor, bir sonraki üstüne kayıp örtüyor, öncekiler
   üstte parmak gibi görünmeye devam ediyor.

   Neden değişti: yatay rayda kullanıcı kaç kart kaldığını
   göremiyordu ve kaydırma yönü (dikey el hareketi → yatay
   hareket) sezgiye ters çalışıyordu. Yığında hareket yönü
   kaydırmayla aynı, biriken deste de "kaç tane geçtim"i
   gösteriyor.

   Derinlik (eğim, küçülme, sönme) media.js/yiginKur içinde
   satır içi stil olarak yazılıyor — ÖLÇÜLER ORADA, burada
   yalnız duruş ve görünüm var.

   KİLİT: transform-origin üstte olmalı. Kart eğilirken üst
   kenarı sabit kalsın diye; merkezden eğilseydi pin noktasının
   üstüne taşar ve önceki kartın parmağını yerdi.
   ============================================================ */
.yigin{
  width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin-inline: auto;
}

/* 3B EĞİMİN TAŞMASI KESİLİYOR — TABLETTE YATAY KAYDIRMA YAPIYORDU.
   Kartlar yükselirken `perspective(1500px) rotateX(15deg)` alıyor
   (media.js/yiginKur). Perspektifle birlikte eğik bir kartın
   BOYANAN genişliği kutusundan büyük oluyor: ölçüldü, 1024px
   ekranda kutu 960px ama kart 1054px yer kaplıyor — her iki yandan
   ~47px taşıyor.

   Masaüstünde fark edilmiyor çünkü 1440px'de kabın yanında 120px
   boşluk var, taşma oraya sığıyor. 1024 ve 768'de boşluk 16-32px'e
   düşüyor ve taşma pencereyi aşıyor: sayfada kalıcı 15px yatay
   kaydırma çubuğu çıkıyordu (ölçüldü: /ne-sunuyoruz 15px, dört
   kategori sayfası 9px, 768'de 4px). Tablette sayfa yana
   kayabiliyordu — "format bozulması" olarak görünen şey buydu.

   overflow-x: clip, overflow: hidden DEĞİL. hidden bir kaydırma
   kabı kuruyor ve içindeki position:sticky kartlar ona göre
   çakılmaya başlıyor — deste mekaniği bozulurdu. clip kaydırma
   kabı kurmuyor, yalnız boyamayı kesiyor; sticky pencereye göre
   çalışmaya devam ediyor.

   BÖLÜMDE, .yigin'de DEĞİL. Bölüm tam genişlikte, yani kesme tam
   pencere kenarında oluyor: görsel olarak HİÇBİR ŞEY değişmiyor
   (tarayıcı zaten orada kesiyordu), yalnız kaydırma çubuğu
   kalkıyor. .yigin'e konsaydı kesme 960px'te olur, kartın yan
   gölgesi de kırpılırdı. */
.bolum:has(.yigin){ overflow-x: clip; }

/* Yalnız ekran okuyucuya. display:none KULLANILMIYOR — o, öğeyi
   erişilebilirlik ağacından da siler ve aria-live hiç duyurulmaz.
   Bunun yerine 1px'e kırpılıyor: görünmüyor ama okunuyor. */
.yalniz-okuyucu{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.yigin-kart{
  position: sticky;
  top: var(--tepe, 88px);
  margin: 0 0 var(--yigin-ara, 46vh);

  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-yuzey);
  /* Gölge lacivert tabanlı: kılavuzda nötr gri gölge yok, gölge de
     markanın rengini taşımalı. İki katman — yakın kenar çizgisi +
     uzak yumuşak düşüm; tek katman düz ve ucuz duruyor. */
  box-shadow:
    0 1px 2px rgba(10, 13, 36, 0.06),
    0 40px 80px -34px rgba(10, 13, 36, 0.34);

  padding: var(--s-3);
  display: grid;
  grid-template-columns: minmax(180px, 42%) 1fr;
  gap: var(--s-4);
  align-items: stretch;
  min-height: clamp(300px, 46vh, 460px);

  transform-origin: 50% 0;
  will-change: transform, filter;
}
.yigin-kart:last-of-type{ margin-bottom: 0; }

/* Kuyruk: son kartın da tam yükselip destenin tepesine
   oturabilmesi için gereken kaydırma payı. Olmazsa son kart
   yükselmeye fırsat bulamadan bölüm bitiyor. */
.yigin-kuyruk{ height: clamp(52vh, 66vh, 74vh); }

/* --- görsel yüzü --- */
.yigin-yuz{
  position: relative;
  border-radius: var(--r-kart);
  overflow: hidden;
  min-height: 210px;
  background: var(--lacivert-900);
}
/* kur-media.js görseli buraya basıyor */
.yigin-yuz .kart-gorsel{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Kart yerine oturana kadar hafif yakın duruyor, oturunca
     yerleşiyor. Ölçek farkı küçük (1.08) — büyük olursa
     görselin kenarındaki detay kırpılıyor. */
  transform: scale(1.08);
  transition: transform 1.15s var(--ease);
}
.yigin-kart.acik .yigin-yuz .kart-gorsel{ transform: scale(1); }
/* Perde YOK. Görsel kendi kolonunda duruyor, üstünde okunacak
   metin yok — karartma yalnız görseli köreltirdi. (Genel kural
   .kart-gorsel-perde'yi zaten display:none yapıyor; burada
   yeniden açmıyoruz.) */

/* --- metin tarafı --- */
.yigin-govde{
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  min-width: 0;
}
.yigin-ust{
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.yigin-ust .kart-ikon{ margin: 0; flex: none; }
/* Sayaç: "03 / 07". Kaydet düğmesi yerine bu duruyor —
   yığında kaçıncı karttasın sorusunu cevaplıyor, ki asıl
   kaybolunan yer orası. Mono çünkü rakamlar sabit genişlikte
   olmazsa kart kart oynuyor. */
.yigin-sayac{
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker);
  color: var(--metin-sessiz);
}
.yigin-kart h2{
  font-family: var(--font-baslik);
  font-size: var(--olcu-h2);
  line-height: var(--satir-baslik-kucuk);
  letter-spacing: var(--aralik-baslik);
  font-weight: 700;
  margin: 0 0 var(--s-2);
  color: var(--metin);
}

/* KATEGORİ BAŞLIKLARI DA MOR (istek).
   Önce bilerek lacivert bırakılmıştı: "hiyerarşinin tepesi başlık,
   mor yapılırsa listeyle aynı sese düşer" diye. Karar değişti —
   başlık artık marka moru, ayrışmayı ise AĞIRLIK ve PUNTO
   kuruyor: başlık 700 ve h2 ölçüsünde, liste 400 ve 14px. Aynı
   renk, farklı ses.

   KAPSAM: "Ne Sunuyoruz" bölümünün TAMAMI — hub sayfası artı dört
   hizmet sayfası. Önce yalnız hub kartları (.yigin-kategori)
   morlanmıştı; hizmet sayfalarındaki deste kartları lacivert
   kalınca aynı bölümün içinde iki farklı başlık rengi oluyordu.

   Sayfa kimliğiyle sınırlandı, .yigin-kart'a GENEL kural
   yazılmadı: aynı iskelet blog ve demo sayfalarında da
   kullanılıyor. Genel yazsaydım sitedeki her kart başlığı morlanır
   ve vurgu anlamını yitirirdi.

   Öznitelik seçicisinin özgüllüğü (0,2,1), yukarıdaki
   .yigin-kart h2 kuralından (0,1,1) yüksek — yani kaynak sırasına
   bağlı değil. Bu dosyada sırf sıra yüzünden sessizce ezilen üç
   kural çıktı; bu onlardan biri olmasın. */
body[data-sayfa="ne-sunuyoruz"] .yigin-kart h2,
body[data-sayfa="ai"] .yigin-kart h2,
body[data-sayfa="smart-medya"] .yigin-kart h2,
body[data-sayfa="dijital-pazarlama"] .yigin-kart h2,
body[data-sayfa="kreatif-produksiyon"] .yigin-kart h2{ color: var(--vurgu); }
.yigin-kart p{
  margin: 0;
  max-width: 46ch;
  color: var(--metin-govde);
  line-height: var(--satir-govde);
}
.yigin-kart p + p{ margin-top: var(--s-2); }
.yigin-kart .urun-ornek, .yigin-kart .urun-not{
  font-size: var(--olcu-kicker);
  color: var(--metin-sessiz);
  padding-top: var(--s-2);
  border-top: 1px solid var(--kenar);
}

/* --- YAZI KARTI (.yigin-yazi) ---
   Blog kartının TAMAMI bağlantı, o yüzden kart <a>. Bağlantı
   varsayılanları temizleniyor: alt çizgi yok, renk gövdeden
   miras.

   HOVER'DA TRANSFORM YOK. Sitedeki diğer kartlar hover'da
   translateY ile hafifçe kalkıyor, ama burada yiginKur() her
   karede satır içi transform yazıyor ve CSS'teki hover
   transform'u anında eziyor — titreyen, yarım çalışan bir
   etki olurdu. Onun yerine kenar ve gölge değişiyor; ikisi de
   JS'in dokunmadığı özellikler. */
.yigin-yazi{
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}
.yigin-yazi:hover{
  border-color: var(--mor-300);
  box-shadow:
    0 1px 2px rgba(10, 13, 36, 0.06),
    0 44px 88px -34px rgba(123, 79, 255, 0.42);
}
.yigin-yazi:focus-visible{
  outline: 2px solid var(--mor-700);
  outline-offset: 3px;
}
.yigin-yazi:hover h2{ color: var(--vurgu-metin); }
.yigin-yazi h2{ transition: color var(--dur-hover) var(--ease); }

/* Kategori etiketi — sayacın solunda, mor. Blogda sıra numarası
   yerine bu duruyor: hangi alanın yazısı olduğu, kaçıncı yazı
   olduğundan daha çok işe yarıyor. */
.yigin-etiket{
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker);
  color: var(--vurgu-kicker);
}
.yigin-yazi .yazi-devam{ margin-top: var(--s-3); }

/* --- DEMO KARTI (.yigin-demo) ---
   Demo kartında ürün kartından fazla olarak slogan ve kendi
   çağrısı var. Slogan da bir <p> olduğu için ".yigin-kart p"
   kuralı rengini eziyordu (mono/uppercase kalıyor ama gövde
   rengine düşüyordu) — sessiz tonu burada geri veriliyor. */
.yigin-kart .demo-slogan{
  color: var(--metin-sessiz);
  line-height: var(--satir-baslik-kucuk);
  margin-bottom: var(--s-2);
}
.yigin-kart .dugme{
  align-self: flex-start;
  margin-top: var(--s-3);
  /* Telefonda 38px ölçüldü (demolar sayfası, "Çalışan örneği
     deneyin"). Kılavuz s.17 ve dokunma hedefi kuralı en az 44px
     istiyor; kartın içindeki tek eylem bu, ıskalanması pahalı. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- yerine oturunca beliren metin ---
   Düğme ve "Yazıyı okuyun" da listede: yoksa metin belirirken
   onlar yerinde duruyor ve kart "yarısı hazır" görünüyordu. */
.yigin-ust, .yigin-kart h2, .yigin-kart p,
.yigin-kart .dugme, .yigin-kart .yazi-devam{
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .65s var(--ease);
}
.yigin-kart.acik .yigin-ust  { opacity: 1; transform: none; transition-delay: .10s; }
.yigin-kart.acik h2          { opacity: 1; transform: none; transition-delay: .18s; }
.yigin-kart.acik p           { opacity: 1; transform: none; transition-delay: .26s; }
.yigin-kart.acik .dugme,
.yigin-kart.acik .yazi-devam { opacity: 1; transform: none; transition-delay: .34s; }

/* --- tablet --- */
@media (max-width: 900px){
  .yigin-kart{ min-height: clamp(280px, 42vh, 420px); gap: var(--s-3); }
}

/* DESTE KAPALIYKEN DÜZ DİKEY LİSTE.
   ARTIK YALNIZ "hareket azaltılmış" tercihinde devreye giriyor.
   Bir ara dar ekranlarda da kapatılıyordu; o karar geri alındı —
   mobil ve tablette de masaüstündeki deste mekaniği çalışıyor,
   yalnız ölçüleri (araVh, parmakPx) ekrana uyarlanıyor.
   Gerekçe media.js/yiginKur içinde yazılı.

   Yapışkanlık burada da kapatılıyor. Kapatılmasaydı JS dokunmasa
   bile kartlar CSS'in position:sticky'si yüzünden üst üste
   yapışmaya devam eder, aralarındaki ölü boşluk da kalırdı.

   min-height sıfırlanıyor: kart içeriği kadar yer kaplıyor.
   Deste varken kartların eşit ve ekran boyuna yakın olması
   gerekiyordu; listede o zorunluluk yok ve gerilmiş kartın içi
   boş duruyordu.

   Kuyruk da gidiyor: son kartın destenin tepesine çıkabilmesi için
   konan kaydırma payıydı, deste yokken ölü boşluktan ibaret. */
.yigin[data-deste="kapali"] .yigin-kart{
  position: static;
  min-height: 0;
  margin-bottom: var(--s-4);
  transform: none !important;
  filter: none !important;
}
.yigin[data-deste="kapali"] .yigin-kart:last-of-type{ margin-bottom: 0; }
.yigin[data-deste="kapali"] .yigin-kuyruk{ display: none; }

/* İÇERİK GÖRÜNÜR OLMAK ZORUNDA.
   Kart içindeki başlık, metin ve düğme varsayılan olarak SÖNÜK
   (opacity:0) duruyor; onları açan .acik sınıfını yiginKur
   kart ekrana girdikçe basıyordu. Deste artık dar ekranda hiç
   kurulmadığı için o sınıf da hiç gelmiyor — bu kural olmasaydı
   kartlar boş kutular olarak görünürdü.

   Aynı tuzak "hareket azaltılmış" kipinde de var; oradaki
   @media (prefers-reduced-motion) bloğu zaten aynı şeyi yapıyor,
   burası onun dar ekran karşılığı. */
.yigin[data-deste="kapali"] .yigin-ust,
.yigin[data-deste="kapali"] .yigin-kart h2,
.yigin[data-deste="kapali"] .yigin-kart p,
.yigin[data-deste="kapali"] .yigin-kart .dugme,
.yigin[data-deste="kapali"] .yigin-kart .yazi-devam{
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.yigin[data-deste="kapali"] .yigin-yuz .kart-gorsel{ transform: scale(1); }

/* --- mobil: tek kolon, görsel üstte --- */
@media (max-width: 620px){
  .yigin-kart{
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--s-2);
    padding: var(--s-2);
  }
  /* width: 100% ŞART (2026-09-30). aspect-ratio verilen ızgara öğesi
     Safari'de "stretch" almıyor, genişliğini içeriğinden alıyor; içerik
     yalnız mutlak konumlu görsel olduğu için kutu 0×0 oluyordu. Chrome
     esnettiği için masaüstünde ve Android'de görünmüyordu, iPhone'da
     hizmet ve blog destelerindeki bütün kart görselleri boştu. */
  .yigin-yuz{ aspect-ratio: 16 / 10; min-height: 0; width: 100%; }
  .yigin-govde{ padding: 0 4px var(--s-1); }
  .yigin-kart h2{ font-size: var(--olcu-h3); }
  .yigin-kart p{ max-width: none; }
}

/* Hareket azaltma: eğim/sönme JS'te temizleniyor, belirme
   geçişleri de burada kapanıyor — içerik ilk anda tam görünür. */
@media (prefers-reduced-motion: reduce){
  .yigin-yuz .kart-gorsel{ transform: none !important; transition: none !important; }
  .yigin-ust, .yigin-kart h2, .yigin-kart p,
  .yigin-kart .dugme, .yigin-kart .yazi-devam{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Bölüm görseli — kart içinde değil, bölümün kendi başlık
   görseli. Kart görselinden farkı: daha geniş, daha alçak.

   ŞU AN KULLANILMIYOR: tek kullanıcısı biz-kimiz sayfasının iki
   görseliydi, ikisi de 2026-09-21'de .sahne-bolum zeminine indi.
   Arşivdeki bekleyen revizyon (revizyon-2026-09-15-BEKLEMEDE)
   hâlâ bu sınıfı taşıyor; o revizyon uygulanana ya da iptal
   edilene kadar kural durmalı. */
.bolum-gorsel{
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--r-yuzey);
  /* ÜST BOŞLUK ŞARTI. Yalnız margin-bottom vardı; görsel üstündeki
     metnin bittiği TAM pikselde başlıyordu (ölçüldü: ikisi de 335).
     Başlığın alt uzantıları ("ğ", "y") görselin kenarına değiyor,
     bölüm sıkışık görünüyordu. Alt boşlukla aynı değer: görsel
     metinden de sonraki bloktan da eşit uzaklıkta duruyor. */
  margin-top: var(--s-5);
  margin-bottom: var(--s-5);
}

/* "Neden BIG Solutions" madde görselleri — üç madde, üç görsel.
   Kılavuz s.15 diliyle üretildi (mor, soyut, klişesiz).
   Alçak ve geniş: metnin önüne geçmesin, ritmi bozmasın. */
.neden-gorsel{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--r-kart);
  margin-bottom: var(--s-2);
}
.neden-liste{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ============================================================
   KATEGORİ KARTI İÇİ HİZMET LİSTESİ
   ------------------------------------------------------------
   Ayrı "Hizmetler" bölümü kaldırıldı; on bir hizmet buraya,
   ait oldukları kategorinin kartına taşındı. Aynı bilgiyi iki
   ayrı bölümde anlatmak yerine ziyaretçi kategoriye bakarken
   kapsamı da görüyor.
   ============================================================ */
.giris-hizmetler{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--s-3);
}
.giris-hizmetler span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--metin-govde);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kenar);
  padding: 4px 10px;
  border-radius: var(--r-rozet);
}

/* ============================================================
   DEMO KARTLARI — YATAY RAY
   Üç kart, sayfadaki diğer raylarla aynı mekanik. Kartlar geniş
   tutuldu (520px) ki üçü birden taşsın ve ray anlamlı olsun;
   dar kartlarla üç tanesi zaten sığıyor ve ray boşa çalışıyordu.
   ============================================================ */
.demo-alan[data-ray="acik"] .demo-yapisik{
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.demo-alan[data-ray="acik"] .demo-ray{
  display: flex; flex-wrap: nowrap; gap: var(--s-4);
  padding-inline: max(var(--kap-bosluk), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.demo-alan[data-ray="acik"] .demo-kart{ flex: none; width: min(520px, 78vw); }

/* ============================================================
   DEMOLAR SAYFASI — HERO + KARTLAR TEK EKRANA
   ------------------------------------------------------------
   Şikayet: "kartlar çok aşağıda kalıyor". Ölçüldü (1440x900):
   hero 375px, ilk kart 734px'te başlıyor ve 491px'lik kartın
   yalnız 166px'i ekranda kalıyordu — 325px alt taraftan taşıyor.

   Üç kalemden kısaldı, hiçbiri tipografiye dokunmadan:
     1. Hero dolgusu  96/48 → 48/24  (-72px)
     2. Ray bölümünün üst dolgusu 96 → 32  (-64px)
     3. Kart görseli 22vh → 16vh  (-58px)
   Toplam ~194px; kart artık ekranın üst yarısında başlıyor.

   Tipografi ve kart genişliği DEĞİŞMEDİ: "premium" ölçek metni
   küçültmekten değil, boşluğu doğru dağıtmaktan geliyor.
   ============================================================ */
body[data-sayfa="demolar"] .sayfa-bas{ padding-block: var(--s-5) var(--s-3); }
body[data-sayfa="demolar"] .demo-alan{ margin-top: calc(var(--s-7) * -1 + var(--s-4)); }
body[data-sayfa="demolar"] .demo-kart .kart-gorsel{ height: clamp(140px, 16vh, 180px); }

/* KART İÇİ HİZA — "Demoyu dene" butonları aynı çizgide.
   Ölçüldü: üst etiket 2-3 satır, gövde 3-5 satır arasında
   değişiyor; sonuçta başlıklar 20px, butonlar 31px kayıyordu.

   İki kademe:
     1. Üst etikete ÜÇ SATIRLIK taban yükseklik (satır yüksekliği
        oranı 1.7 ölçüldü → 5.1em). Böylece üç kartın başlığı da
        aynı satırdan başlıyor.
     2. Butona margin-top:auto. Kart zaten esnek sütun ve rayda
        kartlar eşit yüksekliğe geriliyor; auto kenar boşluğu
        artan alanı yutup butonu kartın DİBİNE çakıyor. Gövde
        kaç satır olursa olsun buton aynı y'de.
   Sabit piksel yerine em: yazı ölçeği değişirse taban da büyür. */
/* .demo-slogan min-height KURALI KALDIRILDI: slogan satırının
   kendisi işaretlemeden çıktı (kartlar boğucuydu — başlığın üstünde
   ayrıca büyük harfli bir cümle duruyordu). Kartları eşitleme işini
   artık tek başına aşağıdaki auto kenar boşluğu yapıyor; ray zaten
   kartları eşit yüksekliğe geriyor, buton da dibe çakılıyor. */
body[data-sayfa="demolar"] .demo-kart .dugme{ margin-top: auto; }

.demo-ilerleme{
  flex: none; width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin: var(--s-4) auto 0; height: 2px;
  background: var(--kenar); border-radius: var(--r-rozet); overflow: hidden;
}
.demo-ilerleme span{
  display: block; height: 100%; width: 100%;
  background: var(--mor-700); transform: scaleX(0); transform-origin: left;
}
.demo-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .demo-ilerleme{ display: none; }

.demo-ray{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}
.demo-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .demo-ray{
  width: min(100% - 2 * var(--kap-bosluk), var(--container)); margin-inline: auto;
}

/* Kart içi: görsel oranı SABİT — "orantısız" şikayetinin kaynağı
   farklı yükseklikteki görsellerdi. */
/* GÖRSEL YÜKSEKLİĞİ EKRANA DUYARLI.
   Sabit 220px'ti. Yapışkan alan 100vh-64px ve overflow:hidden olduğu
   için kısa ekranda kartın ALTI kırpılıyordu — kaydırma da olmadığı
   için buton tamamen kayboluyordu. Ölçüm: 700px yükseklikte kart
   ~498px yer istiyor, kalan alan 492px; uzun paragraflı kartta taşma
   30px'i aşıyor.
   clamp ile 700px ekranda görsel ~154px'e iniyor, 66px kazanıyoruz;
   geniş ekranda 220px'te kalıyor, yani tasarım değişmiyor.
   object-fit: cover ŞART — kaynak görsellerin oranı aynı olmayabilir
   ve yükseklik sabitlenince tek güvenli ölçekleme bu. */
.demo-kart .kart-gorsel{
  width: 100%; height: clamp(150px, 22vh, 220px); object-fit: cover;
  margin-bottom: var(--s-2);
}

/* CANLI SOHBET beliriş kuralları BURADAN KALDIRILDI (~16 satır).
   Taklit konuşma panelinin balonlarını sırayla açan geçişlerdi;
   panel gerçek asistanla değiştirilince #panelKonusma da kalmadı.
   Widget kendi geçişlerini biggie/big-bot.css içinde taşıyor. */

/* ============================================================
   İSMİN HİKAYESİ (biz kimiz)
   Üç katman yan yana: köken → anlam → miras.
   ============================================================ */
.isim-hikaye{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
/* Çizgi TAM MOR. --vurgu-yumusak %9 opaklıkta mor (ölçüldü:
   rgba(123,79,255,0.09)) ve ekranda griye düşüyordu. --vurgu
   anasayfadaki "Neden BIG" sütunlarıyla aynı çizgiyi veriyor,
   iki sayfa aynı vurgu dilini konuşuyor. Kenarlık metin değil,
   kontrast eşiğine tabi değil. */
.isim-kat{
  padding-top: var(--s-3);
  border-top: 2px solid var(--vurgu);
}

/* ADIM SAHNESİ — "Nasıl Çalışır" bölümünün zemini (konuşan broşür).

   Görsel sağ sütunda çerçeveli bir fotoğraf olarak duruyordu. Bölüm
   sabitlenince (.katman-alt) o çerçeve ekranda donmuş bir kart gibi
   görünüyordu; zemine alınca arkada duran şey kart değil sahne
   oluyor ve üstteki panel onun üzerine kayarken derinlik hissi
   kuruluyor.

   İKİ KATMANLI background-image: perde ÖNCE yazılıyor (CSS'te ilk
   katman en üstte), fotoğraf altında. background-color'a
   dokunulmuyor — .bolum'un var(--zemin) rengi altta duruyor,
   fotoğraf yüklenmezse bölüm yine de okunur kalıyor.

   PERDE İKİ YÖNLÜ. Önce yalnız yatay bir perde vardı; adımlar yan
   yana dizilip alt bandı kaplayınca fotoğrafın parlak kâğıdı üçüncü
   kartın üstüne bindi ve kart yıkanmış göründü. İkinci (dikey)
   perde alt bandı koyulaştırıyor, fotoğraf sağ ÜST köşede —
   markanın imza ışıma bölgesinde — açık kalıyor.
   Üst üste binen iki perdenin bileşik opaklığı 1-(1-a₁)(1-a₂):
   sol üst 0.95, sol alt 0.99, sağ alt 0.93, sağ üst 0.62. */
.adim-bolum{
  background-image:
    linear-gradient(180deg,
      rgba(10, 13, 36, 0.35) 0%,
      rgba(10, 13, 36, 0.55) 45%,
      rgba(10, 13, 36, 0.88) 100%),
    linear-gradient(100deg,
      rgba(10, 13, 36, 0.92) 0%,
      rgba(10, 13, 36, 0.80) 40%,
      rgba(10, 13, 36, 0.42) 100%),
    url("gorseller/sm-sesli.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Başlık bloğu: parlak kâğıdın başladığı yerde bitiyor. */
.adim-soz{ max-width: 46ch; }

/* FOTOĞRAF SAHNESİ — koyu bölümün zemini fotoğraf, üstünde perde.
   İki sayfada da kullanılıyor (Konuşan Broşür ve AI Asistan'ın
   "Kimler İçin" bölümleri). PERDE ORTAK, FOTOĞRAF DEĞİL: görsel
   --sahne değişkeniyle geliyor, böylece her yeni sahne için
   gradyanı kopyalamak gerekmiyor.

   Her bölüm KENDİ fotoğrafını kullanmalı: katmanlı geçişte alttaki
   ve üstteki aynı görseli taşısaydı panel kayarken ekranda hiçbir
   şey değişmez, geçiş görünmez olurdu.

   Perde dikey: içerik üç sütun hâlinde tüm genişliği kaplıyor,
   tek bir yöne açılan perde yetmiyor. */
.sahne-bolum{
  background-image:
    linear-gradient(180deg,
      rgba(10, 13, 36, 0.82) 0%,
      rgba(10, 13, 36, 0.90) 45%,
      rgba(10, 13, 36, 0.96) 100%),
    var(--sahne);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.kimler-bolum{ --sahne: url("gorseller/sm-fuar.webp"); }          /* konuşan broşür */
.asistan-kimler{ --sahne: url("gorseller/ai-chatbot.webp"); }      /* ai asistan */
.asistan-nasil{ --sahne: url("gorseller/ai-icerik-motoru.webp"); }  /* ai asistan */
.asistan-olcum{ --sahne: url("gorseller/ai-raporlama.webp"); }      /* ai asistan */
.dergi-kural-bolum{ --sahne: url("gorseller/sm-dergi.webp"); }      /* interaktif dergi */
.ai-bas{ --sahne: url("gorseller/kat-ai.webp"); }                   /* yapay zeka çözümleri */
.ai-kopru{ --sahne: url("gorseller/ai-chatbot.webp"); }             /* yapay zeka çözümleri */
.sm-bas{ --sahne: url("gorseller/kat-smart.webp"); }                /* smart medya */
.sm-nasil{ --sahne: url("gorseller/sm-qr.webp"); }                  /* smart medya */
.kr-bas{ --sahne: url("gorseller/kat-kreatif.webp"); }              /* kreatif prodüksiyon */
.kr-kopru{ --sahne: url("gorseller/kr-video.webp"); }               /* kreatif prodüksiyon */
.dp-bas{ --sahne: url("gorseller/kat-sosyal.webp"); }               /* dijital pazarlama */
.bk-bas{ --sahne: url("gorseller/bk-miras.webp"); }                 /* biz kimiz */
.bk-kesisim{ --sahne: url("gorseller/bk-kesisim.webp"); }           /* biz kimiz */

/* BİZ KİMİZ'İN İKİ SAHNESİNDE PERDE METNİN BULUNDUĞU YERDE KOYU,
   GERİSİNDE AÇIK.

   Ortak .sahne-bolum perdesi (0.82→0.96) metni yoğun bölümler için
   ayarlı: ai sayfasının hero'sunda ekranın alt yarısını dolduran
   bir kart şeridi var, perde altında görselin görünmemesi sorun
   olmuyor. Bu iki bölümde ekranda YALNIZ metin var; aynı perde
   altında fotoğraf tamamen kayboluyor ve bölüm "arka planlı" değil
   "boş koyu" görünüyordu — kullanıcının işaret ettiği sorun bu.

   Çözüm perdeyi metnin şeridine odaklamak. Ölçüldü: hero'da metin
   bloğu bölümün %42-60 bandında; kesişimde ise ortalı, yani yatay
   eksende ortada. Perdeler o bantlarda koyu kalıyor, dışında
   açılıyor. */
.bk-bas{
  background-image:
    linear-gradient(180deg,
      rgba(10, 13, 36, 0.52) 0%,
      rgba(10, 13, 36, 0.86) 34%,
      rgba(10, 13, 36, 0.88) 66%,
      rgba(10, 13, 36, 0.58) 100%),
    var(--sahne);
}
.bk-kesisim{
  background-image:
    linear-gradient(90deg,
      rgba(10, 13, 36, 0.58) 0%,
      rgba(10, 13, 36, 0.88) 30%,
      rgba(10, 13, 36, 0.88) 70%,
      rgba(10, 13, 36, 0.58) 100%),
    var(--sahne);
}
/* Kesişim bölümü üç öğeden ibaret (etiket, başlık, cümle).
   Varsayılan bölüm dolgusuyla sahne görünmeye fırsat bulamadan
   bitiyordu; .kopru.sahne-bolum'da aynı gerekçeyle aynı ölçü
   kullanılıyor. */
.bk-kesisim{ padding-block: var(--s-7); }
.bk-kesisim .bolum-lead{ max-width: 62ch; }

/* GÖVDE CÜMLESİ ÜSTÜ VE ALTIYLA DENGELİ DURSUN.
   Ölçüldü: başlığa 16px, düğmeye 80px mesafe vardı — cümle
   başlığa yapışmış, düğmeyle arasında boşluk açılmıştı. 80px,
   .bolum-lead'in kendi 48px alt boşluğu ile düğmenin 32px üst
   boşluğunun toplamıydı; ikisi birbirinden habersiz üst üste
   biniyordu.

   Üstte 24, altta 32: tam eşit değil bilerek. Düğme gövdenin
   devamı değil ayrı bir adım; biraz fazla nefes onu çağrı
   olarak ayırıyor, ama cümleyi ortada bırakacak kadar az.

   ÖZGÜLLÜK NOTU: düğme seçicisinde iki sınıf birden yazılı
   (.ai-kopru.bolum-ortali). Tek sınıfla yazıldığında aynı
   özgüllükteki `.bolum-ortali .dugme` kuralı dosyada SONRA
   geldiği için kazanıyor ve kendi 32px'ini geri koyuyordu —
   ölçüldü, alt boşluk 24 yerine 56 çıkıyordu. */
/* KÖPRÜ BÖLÜMÜ FOTOĞRAF SAHNESİNDEYKEN NEFES ALSIN.
   Dolgu 48px idi; bölüm 353px oluyor, içeriğe 255px kalıyordu.
   Düz zeminde o ölçü yeterliydi ama burada arkada bir fotoğraf
   var: sahne görünmeye fırsat bulamadan bölüm bitiyor ve
   kompozisyon sıkışık duruyordu. 96px sahneye alan açıyor. */
.kopru.sahne-bolum{ padding-block: var(--s-7); }

/* STUDIO DÜĞMESİ AÇIK MORA ALINDI (kit: Mor 300).
   Genel .dugme-kontur sınıfına DOKUNULMADI — o düğme sitenin her
   yerinde kullanılıyor, rengini oradan değiştirmek bütün ikincil
   çağrıları etkilerdi. Kural yalnız köprü bölümlerindeki düğmeyi
   kapsıyor (Yapay Zeka ve Kreatif sayfaları).

   Dolgu değil kontur: bu ikincil bir çağrı, asıl hedef "İletişime
   geçin". Dolu mor düğme onunla yarışırdı; açık mor kontur hem
   marka rengini taşıyor hem hiyerarşiyi koruyor. Üstüne gelince
   çok hafif bir mor dolgu geliyor. */
.kopru .dugme-kontur{
  color: var(--mor-300);
  border-color: var(--mor-300);
}
.kopru .dugme-kontur:hover{
  color: var(--mor-100);
  border-color: var(--mor-100);
  background: rgba(123, 79, 255, 0.14);
}

/* Başlık tek satırda. Ölçüldü: max-width 491px, tek satır 510px
   istiyor — 19px eksik kalınca "üretiliyor." tek başına alt
   satıra düşüyordu. Kap 616px, yani yer var. */
.kopru.sahne-bolum .kopru-baslik{
  max-width: none;
  text-wrap: balance;
}

.ai-kopru .bolum-lead,
.kr-kopru .bolum-lead{
  margin-top: var(--s-3);
  margin-bottom: 0;
}
.ai-kopru.bolum-ortali .dugme,
.kr-kopru.bolum-ortali .dugme{ margin-top: var(--s-4); }

/* AI KÖPRÜSÜ ÜÇ ÖĞEYE İNDİ — ARALARI YENİDEN KURULDU.
   Bölümde etiket, başlık, açıklama cümlesi ve düğme vardı; cümle
   istek üzerine kaldırıldı. Kalan üçlüde iki şey bozuluyordu:

   · Düğmenin üst boşluğu (--s-4 = 32px) cümlenin ardından gelmek
     üzere ayarlanmıştı. Cümle gidince düğme başlığın dibine
     düşüyor, ikisi tek blok gibi okunuyordu. --s-5 (48px) düğmeyi
     ayrı bir adım olarak geri ayırıyor.

   · Başlık tek başına kalınca 60ch'lik dar kapta iki satıra
     kırılıyordu; 24ch'lik sınır onu tek güçlü satırda tutuyor ve
     ortalı kompozisyonu dengeliyor. Dar ekranda clamp zaten
     küçülttüğü için sınır orada bağlamıyor. */
.ai-kopru .kopru-baslik{ max-width: 24ch; margin-inline: auto; }
.ai-kopru.bolum-ortali .dugme{ margin-top: var(--s-5); }

/* ORTALI BÖLÜM. Başlık soldan hizalı bırakılıp altındaki sütunlar
   ortalansaydı kazara olmuş gibi dururdu — ya hepsi ortalı ya
   hiçbiri. Paragrafın max-width'i (70ch) ortalamayı bozuyor: sütun
   70ch'den darsa sorun yok ama geniş ekranda metin sola kayıyor,
   o yüzden margin-inline:auto şart.

   .bolum-etiket'in de kendi max-width'i (ölçüldü: 504px) var; yalnız
   text-align vermek onu o 504 pikselin ortasına koyuyor, yani
   sayfanın solunda bırakıyordu. */
/* KAPSAM GENİŞLETİLDİ: gövde metni, köprü başlığı ve düğme de.
   Kural yalnız etiketi ve .bolum-baslik'i ortalıyordu; altındaki
   .bolum-lead ve düğme sola yaslı kalıyordu. Sonuç tam da bu
   notun uyardığı şeydi — başlık ortada, gövde solda, "kazara
   olmuş" gibi. .kopru-baslik ayrıca yazılı çünkü köprü bölümü
   h2'sini .bolum-baslik ile değil kendi sınıfıyla taşıyor.

   Diğer iki kullanıcı sayfada (konuşan broşür, ai asistan) bu
   bölümlerde lead/düğme yok — kontrol edildi, etkilenmiyorlar. */
.bolum-ortali .bolum-etiket,
.bolum-ortali .bolum-baslik,
.bolum-ortali .kopru-baslik,
.bolum-ortali .bolum-lead{ text-align: center; margin-inline: auto; }
/* Düğme satır içi bir öğe; kabın text-align'ı onu ortalıyor.
   Üst boşluk metinden belirgin şekilde ayırıyor: çağrı, gövdenin
   devamı gibi değil kendi başına bir adım gibi dursun. */
.bolum-ortali .kap{ text-align: center; }
.bolum-ortali .dugme{ margin-top: var(--s-4); }
.kimler-izgara .isim-kat{ text-align: center; }
.kimler-izgara .isim-kat p{ margin-inline: auto; }

/* FOTOĞRAF SAHNESİNDE MADDELER PANEL OLUYOR. Yalnız mor üst çizgi +
   metin, tam ekran bir fotoğrafın üstünde havada duruyor gibiydi:
   bölüm dolu görünmüyordu. Yarı saydam koyu panel hem metni
   fotoğraftan ayırıyor hem de bölüme ağırlık veriyor.

   backdrop-filter KULLANILMIYOR: kaydırma sırasında katman
   yükseltmesi gerektiriyor ve bu sayfada bölüm zaten sticky —
   düz bir dolgu aynı ayrımı bedelsiz veriyor. */
/* Kanal şeridi de aynı listede: fotoğraf sahnesinin üstünde duran
   her kart aynı dili konuşmalı — mor üst çizgi, yarı saydam koyu
   panel. Şerit ayrı bir kart görünümü alsaydı aynı sayfada iki
   kart dili olurdu. */
.sahne-bolum .kimler-izgara .isim-kat,
.sahne-bolum .kanal-serit .isim-kat{
  padding: var(--s-3) var(--s-3) var(--s-4);
  border: 1px solid var(--kenar);
  border-top: 2px solid var(--vurgu);
  border-radius: 0 0 var(--r-yuzey) var(--r-yuzey);
  background: rgba(10, 13, 36, 0.42);
}
/* Şerit yatay bir satır: dikey kart dolgusu burada fazla, simge ile
   yazının aynı hizada kalması gerekiyor. */
.sahne-bolum .kanal-serit .isim-kat{
  padding: var(--s-3);
  align-items: center;
}

/* ============================================================
   HERO VURGU SATIRI
   ------------------------------------------------------------
   Sayfanın tek cümlelik vaadi. Önce .hero-alt ile gövde metni
   gibi duruyordu: kısık gri, 16px, başlığın altında kaybolan bir
   satır. Sayfanın söylediği tek şey oysa.

   Punto büyüdü ve renk kite göre ayrıldı: cümlenin geri kalanı
   beyaz, ÇEKİRDEK ifade mor. Vurgu kalınlıkla değil RENKLE
   yapılıyor — kalın yazı başlıkla yarışırdı, renk ise hiyerarşiyi
   bozmadan gözü doğru kelimeye götürüyor.
   ============================================================ */
/* BAŞLIK VE VURGU DİKEYDE ORTALANIYOR.
   .sayfa-bas-duzen'in varsayılanı align-items:end — iki sütun
   ALTTAN hizalanıyor. Bu, iki sütun da çok satırlıyken doğru
   duruyor ("Biz Kimiz"de öyle). Burada başlık tek satır, vurgu
   iki satır; alttan hizalanınca vurgunun görsel merkezi başlığın
   10px yukarısına kaçıyordu (ölçüldü). Ortalamak ikisini aynı
   eksene getiriyor. */
.ai-bas .sayfa-bas-duzen,
.sm-bas .sayfa-bas-duzen,
.kr-bas .sayfa-bas-duzen,
.dp-bas .sayfa-bas-duzen{ align-items: center; }

.hero-vurgu{
  margin: 0;
  max-width: 34ch;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--metin);
  text-wrap: balance;
}
.hero-vurgu em{
  font-style: normal;
  font-weight: 700;
  color: var(--vurgu-kicker);
}

/* ============================================================
   YAKLAŞIMIMIZ — AÇIK ZEMİN
   ------------------------------------------------------------
   Bölüm koyu fotoğraf sahnesindeydi, açığa alındı. Açık zeminde
   aynı metin "sayfa dolgusu" gibi okunuyordu; burada görüş
   bildiriliyor, o yüzden bir beyan gibi durması gerekiyor.

   Kart değil ALAN: çerçeve çizmek onu yan bir nota çevirirdi.
   Bunun yerine üstte ince mor bir çizgi ve marka moruna çalan
   çok yumuşak bir zemin — bölüm sayfadan ayrılıyor ama
   kutulanmıyor.
   ============================================================ */
.ai-yaklasim{
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(123, 79, 255, 0.07), transparent 70%),
    var(--zemin);
  border-top: 1px solid var(--vurgu-yumusak);
}
.ai-yaklasim .bolum-baslik{
  font-size: clamp(26px, 3.4vw, 38px);
  text-wrap: balance;
}
/* Gövde açık zeminde bir tık koyu ve geniş satırlı: beyan
   havasını taşıyan şey punto değil, nefes. */
.ai-yaklasim .bolum-lead{
  margin-inline: auto;
  max-width: 62ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--metin-govde);
}
/* Dört kart tek satırda: her biri kısa bir iddia, ızgaranın
   auto-fit'i bunları geniş ekranda gereksiz yayıyordu. */
.yaklasim-izgara{
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-5);
}
/* Kart metni açık zeminde ortalı — bölümün geri kalanı da ortalı,
   kartların sola yaslanması hizayı kırıyordu. */
.yaklasim-izgara .guven-kart{ text-align: center; }
.yaklasim-izgara .guven-kart .kart-ikon{ margin-inline: auto; }
.yaklasim-izgara .guven-kart p{ max-width: none; }
.yaklasim-izgara .guven-kart em{
  font-style: normal; font-weight: 700; color: var(--vurgu-metin);
}
@media (max-width: 900px){
  .yaklasim-izgara{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .yaklasim-izgara{ grid-template-columns: 1fr; }
}

/* ALTI KART, ÜÇ SÜTUN — auto-fit burada yanlış bölüyor.
   Taban ızgara `repeat(auto-fit, minmax(260px, 1fr))`; 1200px'lik
   kapta bu dört sütun veriyor ve altı kart 4+2 diye kırılıyor,
   yani ikinci satırda iki kart yalnız kalıyor. Üç sütun sabiti
   altıyı 3+3 olarak bölüyor ve ızgara dengeli duruyor.
   Dar ekranda kural düşüyor, taban auto-fit geri alıyor. */
@media (min-width: 901px){
  .dergi-kural-izgara{ grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ÜÇ ADIM ŞERİDİ + CANLANDIRMALAR
   Adımlar alt alta dururken bölüm dikeyde uzuyor ve sabitlenen
   ekranın altı boş kalıyordu. Yan yana dizilince üçü tek bakışta
   okunuyor ve her birinin altına o adımı GÖSTEREN bir canlandırma
   sığıyor.

   Canlandırmaların tamamı SVG + CSS. JS yok: bu sitede rAF'e
   bağlanan her şey arka plandaki sekmede donuyor (ölçüldü), CSS
   animasyonu ise ilerlemeye devam ediyor. Hepsi yalnız transform
   ve opacity oynatıyor — düzen yeniden hesaplanmıyor.
   ============================================================ */
/* Şu an yalnız Konuşan Broşür kullanıyor (üç adım). auto-fit
   bırakıldı: sabit repeat(3,1fr) adım sayısı değiştiğinde sağda
   boş sütun bırakıyor, auto-fit o parçayı çökertiyor. Üç adımda
   ölçüm ikisinde de aynı (379px), yani bedelsiz esneklik. */
.adim-serit{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  list-style: none;
}
/* Üç filmin ALT KENARI hizalı olmalı; başlıklar farklı uzunlukta ve
   ekran daraldıkça biri iki satıra düşüyor. Önce h3'e min-height
   verilmişti: 1440'ta üç başlık da tek satır olduğu için ortada boş
   bir satır kalıyordu. Şimdi hizayı ızgara yapıyor — üç <li> zaten
   eşit yükseklikte (stretch), film de margin-top:auto ile dibe
   itiliyor. Başlık kaç satır olursa olsun filmler aynı hizada. */
.adim{ display: flex; flex-direction: column; }
.adim h3{ margin-bottom: var(--s-3); }

/* Film kutusu: fotoğrafın üstünde durduğu için kendi zemini var,
   yoksa çubuklar arkadaki dalga formuna karışıyordu. */
/* Koyu perde: filmler fotoğrafın üstünde duruyor, çubuklar arkadaki
   dalga formuna karışmasın. */
/* İMZA IŞIMASI FİLM KUTUSUNDA. Kutular düz koyu dikdörtgenlerdi ve
   içindeki çizim havada duruyordu; kılavuz s.15 markanın imza
   dokusunu "koyu zeminlerde yayılan düşük opaklıkta mor radial
   gradyan" diye tanımlıyor. Işıma odak noktasının arkasına
   konunca çizim sahnenin içinden çıkıyor gibi duruyor.

   Gradyan SVG'de değil KUTUDA: her filme ayrı <radialGradient>
   koymak beş ayrı kimlik gerektirirdi (kimlikler belge genelinde
   benzersiz olmak zorunda) ve blur süzgeci her karede boyama
   maliyeti getirirdi. Kutu zemini bedava. */
.adim-film{
  margin: auto 0 0;
  border: 1px solid var(--kenar);
  border-radius: var(--r-kart);
  background:
    radial-gradient(58% 62% at 50% 46%,
      rgba(123, 79, 255, 0.22) 0%,
      rgba(123, 79, 255, 0.07) 45%,
      transparent 72%),
    rgba(10, 13, 36, 0.55);
  overflow: hidden;
}
.film{ display: block; width: 100%; height: auto; }

/* ---------- 01 · KARE KOD TARANIYOR ---------- */
.film-qr .qr-kod rect{ fill: var(--mor-300); }
.film-qr .qr-bul{ fill: none; stroke: var(--mor-300); stroke-width: 2; }
.film-qr .qr-ayrac path{
  fill: none; stroke: var(--mor-700); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.film-qr .qr-isik{
  fill: var(--mor-700);
  animation: filmTara 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
/* 44 birim yol: kodun üstünden altına iner, kısa bir bekleme ile
   başa döner — sürekli gidip gelmek "tarandı" hissini bozuyordu. */
@keyframes filmTara{
  0%        { transform: translateY(0);    opacity: 0; }
  10%       { opacity: 1; }
  70%       { transform: translateY(44px); opacity: 1; }
  85%, 100% { transform: translateY(44px); opacity: 0; }
}

/* ---------- 02 · SES ÇALIYOR, BÖLÜME ATLANIYOR ---------- */
.film-ses .ses-cubuk rect{
  fill: var(--mor-500);
  transform-box: fill-box;          /* ölçek çubuğun KENDİ kutusundan */
  transform-origin: center;
  animation: filmDalga 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes filmDalga{
  from{ transform: scaleY(0.18); }
  to  { transform: scaleY(1); }
}
.film-ses .ses-ray{ fill: rgba(255,255,255,0.14); }
.film-ses .ses-dolgu{
  fill: var(--mor-700);
  transform-box: fill-box; transform-origin: left center;
  animation: filmIlerle 4.4s linear infinite;
}
@keyframes filmIlerle{
  0%       { transform: scaleX(0); }
  90%,100% { transform: scaleX(1); }
}
.film-ses .ses-bas{
  fill: #fff;
  animation: filmBas 4.4s linear infinite;
}
/* Baş, dolgunun ucuyla aynı yolu yürüyor: ray 114 birim. */
@keyframes filmBas{
  0%       { transform: translateX(0); }
  90%,100% { transform: translateX(114px); }
}

/* ---------- 03 · SORU SORULUYOR, CEVAP GELİYOR ---------- */
/* Balonlar AÇIK SINIFLA seçiliyor. Önce "g rect:first-child"
   yazılmıştı: o seçici .sb-dalga'nın ilk çubuğunu da yakalıyor ve
   (0,2,2) özgüllüğüyle mor kuralını yeniyordu — sekiz çubuktan
   biri beyaz kalıyordu. */
.film-soru .sb-balon{ fill: rgba(255,255,255,0.10); }
.film-soru .sb-satir{ fill: var(--mor-300); }
.film-soru .sb-dalga rect{
  fill: var(--mor-500);
  transform-box: fill-box; transform-origin: center;
}
/* Tek zaman çizgisi, üç öğe: soru gelir → cevap gelir → cevap
   konuşur → ikisi birden söner. Süreler aynı (5.2s) olmak zorunda,
   yoksa balonlar birbirinden kayıyor. */
.film-soru .sb-soru{ animation: filmBalon 5.2s ease-in-out infinite; }
.film-soru .sb-cevap{ animation: filmBalon 5.2s ease-in-out infinite; animation-delay: 1.1s; }
/* Görünür pencere bilerek GENİŞ (%12–%82). Daha dar tutulduğunda
   soru sönüp cevap da sönmeye başladığı anda kutu bir saniyeliğine
   bomboş kalıyor ve "bozuk" görünüyordu. */
@keyframes filmBalon{
  0%       { opacity: 0; transform: translateY(6px); }
  12%, 82% { opacity: 1; transform: none; }
  95%,100% { opacity: 0; transform: none; }
}
/* Cevap dalgası KENDİ genlik aralığında: denkleştiricinin 0.18'lik
   dip değeri burada 14 birimlik çubuğu 2.5 piksele indiriyor ve
   balonun içi noktalara dönüşüyordu. Dip 0.45'te çubuk hep çubuk
   kalıyor. */
.film-soru .sb-dalga rect{
  animation: filmKonus 0.9s ease-in-out infinite alternate;
  animation-delay: calc(1.1s + var(--i) * 80ms);
}
@keyframes filmKonus{
  from{ transform: scaleY(0.45); }
  to  { transform: scaleY(1); }
}

/* ---------- 01 · BİLGİ TABANI YÜKLENİYOR (ai asistan) ---------- */
/* Belge KÂĞIT gibi okunmalı: içi dolu, kenarı ince. Önce içi boş
   konturdu ve tel kafes gibi duruyordu. Raf da konturdan KATI mor
   bara çevrildi — belgelerin gittiği yer sahnedeki tek ağır öğe,
   hiyerarşiyi o taşıyor. */
.film-yukle .yk-belge rect{ fill: rgba(255,255,255,.90); stroke: none; }
.film-yukle .yk-satir{ stroke: var(--mor-700); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.film-yukle .yk-raf{ fill: rgba(123,79,255,.16); stroke: var(--vurgu); stroke-width: 1.4; }
.film-yukle .yk-raf-cizgi{ fill: var(--vurgu); }
/* GECİKME DÖNGÜYÜ BÖLÜYOR: 4.2s / 3 = 1400ms. 500ms denendiğinde üç
   belge neredeyse aynı fazdaydı; hepsi birlikte inip kayboluyor ve
   kutu her turda ~1.9 saniye bomboş kalıyordu. 1400ms'te her belge
   2.27s görünür kalıyor (> 1400ms), yani kare hiç boşalmıyor. */
.film-yukle .yk-belge{
  animation: filmYukle 4.2s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: calc(var(--i) * 1400ms);
}
@keyframes filmYukle{
  0%       { transform: translateY(-14px); opacity: 0; }
  14%      { transform: translateY(0);     opacity: 1; }
  34%      { transform: translateY(0);     opacity: 1; }
  54%,100% { transform: translateY(32px);  opacity: 0; }
}

/* ---------- 02 · SESİNİZİ TANIMLIYORUZ (ai asistan) ----------
   Önceki film (film-onay: kaynak satırı + onay mührü) KALDIRILDI.
   O adım "Biggie sadece onayladığınız bilgiyle cevap verir"di;
   bir adım değil garantiydi ve Teknik Güven'de zaten vardı.
   Yeni adım tonu anlatıyor, bu yüzden filmi de ton ayarı. */
/* Çubuklar ORTA ÇİZGİDE simetrik büyüyor (transform-origin:center):
   broşürdeki alttan yükselen denkleştiriciden ayrışsın, iki sayfa
   aynı filmi tekrar etmesin.

   Her çubuğun varış yüksekliği --h ile işaretlemede duruyor. Tek
   bir keyframe hepsini sürüyor ama varışları farklı olduğu için
   ortaya düz bir blok değil, bir ses izi çıkıyor. */
.film-ton .tn-iz rect{
  fill: var(--vurgu);
  transform-box: fill-box;
  transform-origin: center;
  animation: filmTonIz 4.6s cubic-bezier(.33,1,.68,1) infinite;
  animation-delay: calc(var(--i) * 55ms);
}
/* Düzensiz ve soluk başlıyor, markanın ritmine ve moruna oturuyor:
   "sesinizi tanımlıyoruz" tam olarak bu. */
@keyframes filmTonIz{
  0%       { transform: scaleY(.18); opacity: .28; }
  42%, 82% { transform: scaleY(var(--h)); opacity: 1; }
  96%,100% { transform: scaleY(.18); opacity: .28; }
}

/* ---------- 03 · KODUN OLDUĞU HER YERDE (ai asistan) ----------
   Yüzey değişiyor (broşür → dergi → ambalaj), kod sabit duruyor.
   Cümlenin sözü tam bu, canlandırma da onu söylüyor. */
/* Yüzeyler <path>: broşürün kanatları, derginin kavisli formaları ve
   kutunun perspektifli yüzleri dikdörtgenle çizilemiyordu.
   Detay çizgisi seçicisi ÜÇ SINIFLI (.film-mecra .mc-yuzey
   .mc-cizgi = 0,3,0); iki sınıf + tür yazılsaydı (0,2,1) yüzey
   kuralı onu yener ve çizgiler yüzey dolgusunu alırdı. */
.film-mecra .mc-yuzey path{
  fill: rgba(255, 255, 255, 0.07);
  stroke: var(--vurgu);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.film-mecra .mc-yuzey .mc-cizgi{
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 1.2;
  opacity: .45;
}
/* linear: pencereler matematiksel olarak üçe bölünüyor, yumuşatma
   eğrisi sönme/açılma anlarını kaydırıp binmeye yol açıyordu. */
.film-mecra .mc-yuzey{
  opacity: 0;
  animation: filmMecra 5.4s linear infinite;
  animation-delay: calc(var(--i) * 1800ms);
}
/* PENCERELER BİRBİRİNE DEĞMİYOR, BİNMİYOR.
   Önce pencere %6–%52 idi ve gecikmeden (1800ms = %33.3) uzundu;
   amaç boş kare bırakmamaktı ama sonuç daha kötüydü: iki tel kafes
   aynı noktada üst üste biniyor, hangisinin broşür hangisinin kutu
   olduğu okunmuyordu ("sürekli karışıyor").

   Şimdi her yüzey döngünün tam üçte birini alıyor ve devri
   tamamen bitirip bırakıyor: %33.3'te söner, sıradaki yüzey kendi
   zaman çizgisinin %0'ında — yani tam o anda — açılır. Ne binme
   var ne boşluk. Sönme/açılma %3'lük (160ms) kısa bir geçiş;
   sert kesim gibi durmuyor ama iki şekli aynı anda göstermiyor. */
@keyframes filmMecra{
  0%        { opacity: 0; }
  3%        { opacity: 1; }
  30%       { opacity: 1; }
  33.3%     { opacity: 0; }
  100%      { opacity: 0; }
}
/* KOD SAHNENİN TEK KATI ÖĞESİ: mor çip üstünde beyaz modüller.
   Önce soluk mor zemin + mor modüldü ve yüzeylerle aynı ağırlıkta
   kalıyordu; oysa cümlenin sözü "kodun olduğu her yerde" — sabit
   duran ve göze çarpması gereken şey o. */
.film-mecra .mc-kod-zemin{ fill: var(--mor-700); stroke: none; }
/* Modüller AÇIK SINIFLA seçiliyor. "rect:not(.mc-kod-zemin)" gibi
   bir seçici özgüllük kazasına açık; bu dosyada daha önce tam
   olarak öyle bir kural bir çubuğu yanlış renge boyamıştı. */
.film-mecra .mc-nokta{ fill: #fff; }

/* ---------- 04 · VERİ BİRİKİYOR, EĞİLİM ÇIKIYOR ----------
   Dördüncü adımın canlandırması. Anlatım sırası önemli: önce
   sütunlar tek tek yükseliyor (ölçüm birikiyor), ANCAK hepsi
   tamamlandıktan sonra eğilim çizgisi çiziliyor (yorum çıkıyor).
   Çizgi sütunlarla aynı anda gelseydi "veri ve yorum aynı şey"
   demiş olurduk.

   transform-box: fill-box — ölçek sütunun KENDİ kutusundan
   alınıyor, yoksa scaleY tüm viewBox'a göre hesaplanıp sütunlar
   sahnenin dışına taşıyor. Aynı tuzak .film-ses'te de not
   düşülmüş. */
.film-olcum .ol-sutun rect{
  fill: var(--mor-500);
  transform-box: fill-box;
  transform-origin: bottom center;   /* tabandan büyüsün */
  animation: filmSutun 4.8s ease-out infinite;
  animation-delay: calc(var(--i) * 160ms);
}
@keyframes filmSutun{
  0%        { transform: scaleY(0); opacity: 0; }
  8%        { opacity: 1; }
  30%, 78%  { transform: scaleY(1); opacity: 1; }
  92%, 100% { transform: scaleY(1); opacity: 0; }
}
.film-olcum .ol-taban{
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.4;
}
/* Çizgi "kendini çiziyor": kesik uzunluğu = yolun boyu, offset
   sıfıra inerken çizgi soldan sağa beliriyor. Yol ~360 birim;
   pay bırakıldı ki son parça da tam görünsün. */
.film-olcum .ol-egilim{
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: filmEgilim 4.8s ease-in-out infinite;
}
@keyframes filmEgilim{
  0%, 34%   { stroke-dashoffset: 380; }
  62%, 80%  { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: 380; }
}

/* ÜST SINIR. Şerit iki sütuna düşünce (asistan sayfası, iki adım)
   film 584px oluyor: viewBox 160 birim olduğu için her şey 3.6 kat
   büyüyor ve 1.6 birimlik çizgiler kalın şeritlere dönüşüyordu.
   420px'te ölçek broşürdekine yakın kalıyor; üç sütunlu sayfada
   sütun zaten 379px olduğu için bu sınırın etkisi yok. */
.adim-serit .adim-film{ max-width: 420px; }

@media (prefers-reduced-motion: reduce){
  /* Hareket kapalıyken canlandırmalar OKUNUR bir son karede donuyor;
     animation:none deseydik balonlar opacity:0'da kalır ve kutular
     boş görünürdü. */
  .film-qr .qr-isik,
  .film-ses .ses-cubuk rect,
  .film-ses .ses-dolgu,
  .film-ses .ses-bas,
  .film-soru .sb-soru,
  .film-soru .sb-cevap,
  .film-soru .sb-dalga rect,
  .film-yukle .yk-belge{ animation: none; opacity: 1; transform: none; }
  /* Mecra filminde YALNIZ İLK yüzey görünür kalıyor. Üçüne birden
     opacity:1 verilseydi broşür, dergi ve ambalaj üst üste binip
     okunamaz bir çizim yığını olurdu. */
  .film-mecra .mc-yuzey{ animation: none; opacity: 0; transform: none; }
  .film-mecra .mc-yuzey:first-of-type{ opacity: 1; }
  /* Ölçüm filmi TAMAMLANMIŞ hâlinde donuyor: sütunlar tam
     boyunda, eğilim çizgisi baştan sona çizili. animation:none
     tek başına yetmez — çizgi stroke-dashoffset:380'de, yani
     GÖRÜNMEZ kalırdı; offset'i de sıfırlamak gerekiyor. */
  .film-olcum .ol-sutun rect{ animation: none; opacity: 1; transform: none; }
  .film-olcum .ol-egilim{ animation: none; stroke-dashoffset: 0; }
  /* Ses izi TANIMLANMIŞ hâlinde donuyor (--h), düz blokta değil —
     donmuş kare de bir ses izi gibi okunmalı. */
  .film-ton .tn-iz rect{ animation: none; opacity: 1; transform: scaleY(var(--h)); }
  /* Ölçüm mini ekranları OKUNUR son karede donuyor: sorular tam
     görünür, çubuklar kendi hacminde, içgörü satırı yanık. */
  .oe-akis li,
  .oe-tekrar,
  .oe-sonuc{ animation: none; opacity: 1; transform: none; }
  .oe-ray i{ animation: none; transform: none; }
  .film-ses .ses-dolgu{ transform: scaleX(0.45); }
  .film-ses .ses-bas{ transform: translateX(51px); }
  .film-qr .qr-isik{ transform: translateY(22px); }
}

@media (max-width: 900px){
  /* Dar ekranda metin tüm genişliği kaplıyor, yani fotoğrafın
     parlak kısmının üstüne de biniyor: perde her yerde koyulaşıyor
     ve yönü dikeye dönüyor. */
  .adim-bolum{
    background-image:
      linear-gradient(180deg,
        rgba(10, 13, 36, 0.95) 0%,
        rgba(10, 13, 36, 0.90) 60%,
        rgba(10, 13, 36, 0.80) 100%),
      url("gorseller/sm-sesli.webp");
  }
  .adim-soz{ max-width: none; }
  .adim-serit{ grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-5); }
}
/* 01 / 02 / 03 numaraları --vurgu kullanıyordu. O jeton AÇIK zeminde
   Mor 700'e çözülüyor ve Fısıltı Beyazı üstünde kontrast 4.40 çıkıyor
   — AA'nın (4.5) hemen altı. Sorun bu bölümü ritim için koyudan açığa
   çevirince doğdu: koyu zeminde jeton Mor 500'dü ve yeterliydi.
   Doğru jeton zaten --vurgu-kicker; bu öğe mono, aralıklı, kicker
   kalıbı ve o jeton açık zeminde Mor 900'e çözülüyor. Hem kılavuza
   hem AA'ya uyuyor. Paragraf içindeki em vurguları da aynı sebeple
   (aynı zemin, aynı ölçüm) buradan besleniyor. */
.isim-no{
  display: block;
  font-family: var(--font-mono); font-size: var(--olcu-kicker);
  letter-spacing: var(--aralik-kicker);
  color: var(--vurgu-kicker); margin-bottom: var(--s-1);
}
.isim-kat h3{ font-size: var(--olcu-h3); margin-bottom: 6px; }
.isim-kat p{ color: var(--metin-govde); }
.isim-kat p em{ color: var(--vurgu-kicker); font-style: normal; font-weight: 600; }

/* ADIM KARTLARI KALDIRILDI. Kenarlıklı, büyük tipografili kartlar
   denendi ama her demo sayfasının Konuşan Broşür kalıbını izlemesi
   istendi; o kalıpta adımlar numaralı şerit + canlandırma.
   .adim-kartlar / .adim-kart / .bolum-baslik.buyuk kuralları
   bu yüzden silindi — tek kullanıcıları o kartlardı.
   Şeridin kuralları yukarıda (.adim-serit), canlandırmalar
   aşağıda (.film-*). */

/* ============================================================
   TEKNİK GÜVEN KARTLARI (konuşan broşür)
   Bölüm .yazi-liste kullanıyordu; o bileşen BLOG GÖVDESİ için
   yazılmış — dar bir sütunda mor noktalı üç satır. Başlığı bile
   yoktu. Üç madde artık kendi başlığı, simgesi ve açıklaması olan
   üç kart.

   Kart zemini --yuzey (açık temada saf beyaz), bölüm zemini
   Fısıltı Beyazı: kartlar kenarlık olmadan da ayrılıyor, kenarlık
   yalnız kenarı keskinleştiriyor.
   ============================================================ */
/* auto-fit, repeat(3,1fr) DEĞİL: bölüm iki sayfada kullanılıyor ve
   kart sayısı farklı (broşürde üç, asistanda iki). Sabit üç sütunda
   iki kart sağda boş bir sütun bırakıyordu. auto-fit boş parçayı
   çökertiyor, kartlar kalan genişliğe yayılıyor — üç kartlı sayfada
   ölçüm aynı kalıyor (384px). auto-FILL olsaydı boş sütun ayakta
   kalır ve sorun devam ederdi. */
.guven-izgara{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.guven-kart{
  padding: var(--s-4);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-yuzey);
}
/* Simge kutusu: %10 opaklıkta mor yastık. Simge METİN DEĞİL,
   kontrast eşiğine tabi değil; yanındaki başlık taşıyor. */
/* ============================================================
   KANAL ŞERİDİ — "Nerede çalışır?" (Yapay Zeka Çözümleri sayfası)
   ------------------------------------------------------------
   Kartlar NE yaptığımızı anlatıyor; ziyaretçinin ilk sorusu ise
   çoğu zaman "benim kullandığım yerde çalışır mı" oluyor. Şerit o
   cevabı kartlardan önce, tek bakışta veriyor.

   IZGARA DEĞİL ŞERİT: dört öğe eşit ağırlıkta ve kısa; auto-fit
   ızgara geniş ekranda onları gereksiz yere yayıyordu. Ortalı bir
   flex satırı dördünü bir arada, tek okunur grup olarak tutuyor
   ve dar ekranda kendiliğinden alt satıra sarıyor.
   ============================================================ */
/* ============================================================
   SMART MEDYA — DÖRT ADIM
   ------------------------------------------------------------
   Numaralar bilerek görünür ve büyük: burada sıra anlamın
   parçası. Başlık zaten akışı söylüyor (Okut → Aç → İzle/Dinle
   → Forma Geç); kartlar o akışın adımlarını açıyor. Numarasız
   dizildiklerinde dört eşdeğer madde gibi okunuyor ve "önce
   şu, sonra bu" bilgisi kayboluyordu.

   Kart gövdesi .isim-kat: fotoğraf sahnesinin üstündeki her kart
   aynı dili konuşuyor (mor üst çizgi + yarı saydam koyu panel).
   ============================================================ */
/* Dört adım tek satırda. Izgaranın tabanı auto-fit (minmax 260px)
   ve geniş ekranda dördü gereksiz yayıyordu; akışın tek bakışta
   okunması için sabit dört sütun gerekiyor.

   <ol> olduğu için madde işaretleri kapatılıyor: sıra numarası
   zaten kartın içinde, ikisi üst üste binerdi. */
/* AKIŞ BAŞLIĞI TEK SATIRDA.
   .bolum-baslik'in genel max-width'i ~453px; bu başlık tek satır
   için 498px istiyor ve "Geç" alta düşüyordu (ölçüldü). Kapta
   1200px yer var, yani sınır burada gereksiz daraltıyor.

   Başlık bir AKIŞ: "Okut → Aç → İzle/Dinle → Forma Geç". Oklar
   sırayı gösteriyor; satır ortasından bölününce zincir kopuyor
   ve dört adımlık akış iki parçaya ayrılmış gibi okunuyor.
   Dar ekranda sarması kaçınılmaz, orada balance dengeli bölüyor. */
.sm-nasil .bolum-baslik{
  max-width: none;
  text-wrap: balance;
}

.sm-adimlar{
  list-style: none;
  padding-left: 0;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px){
  .sm-adimlar{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .sm-adimlar{ grid-template-columns: 1fr; }
}
.sm-adim{
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2);
}
.sm-adim-no{
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .12em;
  color: var(--vurgu-kicker);
}
.sm-adim p{ margin: 0; }

/* HERO TAM EKRAN — İKİNCİ BÖLÜM İLK EKRANA SIZMASIN.
   Hero yalnız dolgusu kadar yükseliyordu; altındaki bölüm ilk
   ekranın dibinden görünüyor ve sayfa "yarım kalmış" duruyordu.
   100lvh eksi gezinme çubuğu: ilk ekran tam bir kompozisyon,
   sonraki bölüm tam katlama çizgisinden başlıyor.

   Kısa pencerede serbest bırakılıyor — 700px'in altında tam ekran
   dayatmak içeriği sıkıştırıp kaydırılamaz hâle getiriyordu. */
.ai-bas,
.sm-bas,
.kr-bas,
.dp-bas,
.bk-bas{
  padding-block: var(--s-6) var(--s-5);
}
@media (min-height: 700px){
  .ai-bas,
  .sm-bas,
  .kr-bas,
  .dp-bas,
  .bk-bas{
    /* 65px = üst gezinme çubuğunun GERÇEK yüksekliği (ölçüldü).
       Önce 89 yazılmıştı — o değer dergi demosundaki farklı bir
       ölçümden geliyordu ve burada 24px eksik bırakıyordu: sonraki
       bölümün ince bir şeridi ilk ekranda görünüyordu. */
    min-height: calc(100lvh - 65px);
    display: flex; flex-direction: column; justify-content: center;
  }
}
/* Şerit hero'nun içinde: üstündeki başlık bloğundan ayrılsın diye
   nefes payı, ama ayrı bölüm gibi durmasın diye ölçülü. */
.kanal-etiket{
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--metin-sessiz);
}
.kanal-serit{
  display: flex; flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0; padding: 0; list-style: none;
}

/* max-width KALDIRILDI — şerit kabın sağ kenarına yetişsin.
   260px sınırıyla dört kart 1112px tutuyordu; kap 1200px olduğu
   için sağda 88px açık kalıyordu (ölçüldü). Başlık sol kenara,
   vurgu satırı sağ kenara yaslıyken kart sırasının erken bitmesi
   sayfayı "ortalanmamış" gösteriyordu. Sınır kalkınca dördü
   eşit bölüşüp kabı tam dolduruyor. */
.kanal{
  flex: 1 1 180px;
  /* İÇERİK KART İÇİNDE ORTALI.
     Simge + etiket sola yaslıydı: soldan 25px, sağda 115-132px
     boşluk kalıyordu (ölçüldü) ve etiketler farklı uzunlukta
     olduğu için her kartta boşluk da farklı çıkıyordu — dört kart
     eşit genişlikte olmasına rağmen dizi düzensiz görünüyordu.
     Ortalanınca boşluk iki yana eşit dağılıyor. */
  justify-content: center;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kart);
  background: var(--yuzey);
  font-weight: 600; color: var(--metin);
}
/* TABLETTE 2×2, 3+1 DEĞİL.
   flex-basis 180px olduğu için 768px'lik ekranda üç kart bir
   satıra sığıyor ve dördüncüsü tek başına alt satırı boydan boya
   kaplıyordu. Dört eşit öğeden biri iki katı genişlikte
   görününce şerit "kırılmış" duruyordu — dengesizlik buradaydı.

   %50 - yarım boşluk = tam iki sütun. Alt sınır 561px: onun
   altında iki sütun her kartı ~130px'e düşürüyor ve "Basılı
   Yayın · QR Entegrasyonu" gibi uzun etiketler üç satıra
   kırılıyor; telefonda tek sütun doğru olan.

   KURAL .kanal TANIMINDAN SONRA: önce ondan ÖNCE yazılmıştı ve
   hiç uygulanmadı — aynı özgüllükte iki kural çakışınca dosyada
   SONRA gelen kazanıyor, .kanal'ın flex:1 1 180px satırı bunu
   sessizce eziyordu (ekran görüntüsüyle yakalandı). */
@media (min-width: 561px) and (max-width: 900px){
  .kanal{ flex: 1 1 calc(50% - (var(--s-3) / 2)); }
}

/* Simge kutusu kartlardakiyle aynı dil: mor yumuşak zemin, mor çizgi.

   margin: 0 ŞART. Ortak .kart-ikon kuralında `margin-bottom: 16px`
   var; o değer simgenin YAZININ ÜSTÜNDE durduğu dikey kartlar için.
   Burada simge yazının SOLUNDA ve yatay; alttaki 16px, flex
   ortalamasında simgeyi yukarı itiyor ve etiket 8px aşağıda
   kalıyordu (ölçüldü — tam olarak boşluğun yarısı). Aynı sıfırlama
   .yigin-ust .kart-ikon için de yapılmış; yatay dizilimde kural bu. */
.kanal .kart-ikon{
  margin: 0;
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(123, 79, 255, 0.10);
  color: var(--vurgu);
}
.kanal .kart-ikon svg{ width: 19px; height: 19px; display: block; }
@media (max-width: 560px){
  /* Dar ekranda dört öğe ikişerli iki satır: tek sütun şerit
     olmaktan çıkıp listeye dönüşüyor ve bölüm gereksiz uzuyordu. */
  /* max-width artik tabanda da yok; burada yalniz iki sutuna
     dusuruyoruz. */
  .kanal{ flex: 1 1 calc(50% - var(--s-3)); }
}

.guven-simge{
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-kart);
  background: rgba(123, 79, 255, 0.10);
  color: var(--vurgu);
}
.guven-simge svg{ width: 22px; height: 22px; display: block; }
/* p'nin 70ch'lik varsayılanı kart içinde anlamsız; kart zaten dar */
.guven-kart p{ color: var(--metin-govde); max-width: none; }

/* ETİKET İÇİN AYRI ARALIK KURALI YOK — bilerek. Bölümün h2'si
   olmadığı için etikete ek alt boşluk verilmeye çalışılmıştı;
   ölçünce görüldü ki verilen değer .bolum-etiket'in zaten sahip
   olduğu 16px'in aynısıydı, yani kural hiçbir şey yapmıyordu.
   Gerçek aralığı .guven-izgara'nın 48px'lik margin-top'u
   belirliyor — marjlar çakışıyor, büyük olan kazanıyor. */

@media (max-width: 900px){
  .guven-izgara{ grid-template-columns: 1fr; }
}

/* ============================================================
   STUDIO KÖPRÜSÜ — iş görselleri
   Dört alan, dört görsel. Köprü tek cümle + butondan ibaretti;
   "prodüksiyon gücümüz" derken hiçbir üretim göstermiyordu.
   ============================================================ */
.kopru-isler{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.kopru-is{ margin: 0; }
.kopru-is img{
  width: 100%; height: 150px; object-fit: cover;
  border-radius: var(--r-kart);
  display: block;
  transition: transform 400ms var(--ease);
}
.kopru-is:hover img{ transform: scale(1.03); }
.kopru-is figcaption{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--aralik-kicker); text-transform: uppercase;
  color: var(--metin-sessiz);
  margin-top: var(--s-1);
}

/* ============================================================
   KALAN RAY — ne-sunuyoruz kategori şeridi
   ------------------------------------------------------------
   Bu blok eskiden İKİ rayı birden tanımlıyordu: kategori şeridi
   ve demolar sayfası. Demolar yapışkan yığına geçince (.yigin-demo)
   .demosayfa-* kuralları ölü kaldı ve buradan ayıklandı —
   selectorler paylaşımlıydı, tek tek çıkarıldı, kategori tarafı
   olduğu gibi duruyor.

   Anasayfadaki giriş ve demo şeritleri de aynı mekaniği
   (media.js/rayKur) kullanıyor: ziyaretçi bir sayfada öğrendiği
   etkileşimi diğerinde de bulsun.
   ============================================================ */
.kategori-alan[data-ray="acik"] .kategori-yapisik{
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.kategori-alan[data-ray="acik"] .kategori-ray{
  display: flex; flex-wrap: nowrap; gap: var(--s-4);
  padding-inline: max(var(--kap-bosluk), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.kategori-alan[data-ray="acik"] .kategori-kart{ flex: none; width: min(480px, 80vw); }

.kategori-ilerleme{
  flex: none; width: min(100% - 2 * var(--kap-bosluk), var(--container));
  margin: var(--s-4) auto 0; height: 2px;
  background: var(--kenar); border-radius: var(--r-rozet); overflow: hidden;
}
.kategori-ilerleme span{
  display: block; height: 100%; width: 100%;
  background: var(--mor-700); transform: scaleX(0); transform-origin: left;
}
.kategori-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .kategori-ilerleme{ display: none; }

/* Ray kurulmadığında normal ızgara — içerik kaybolmuyor. */
.kategori-ray{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-3);
}
.kategori-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .kategori-ray{
  width: min(100% - 2 * var(--kap-bosluk), var(--container)); margin-inline: auto;
}

/* ============================================================
   RAYLAR DAR EKRANDA DA YATAY — PARMAKLA KAYDIRILARAK
   ------------------------------------------------------------
   Üç ray (hizmet vitrini, demolar, kategoriler) masaüstünde
   kaydırmaya bağlı yatay ray olarak çalışıyor. Ama media.js'teki
   rayKur şu koşulla çıkıyor:

     (min-width: 1024px) and (min-height: 720px)

   iPad DİKEY 820×1180'de genişlik 1024'ün altında kalıyor, yani ray
   hiç kurulmuyor ve kartlar temel `grid` düzenine düşüyordu:
   alt alta uzayan iki sütunluk bir liste. Sonuç, kullanıcının
   bildirdiği şey — "yatay scrolldan çıkıp dikeye geçmiş ve sayfayı
   çok uzatmış". Ölçüldü: anasayfa vitrini tek başına ~2.400px
   uzuyordu.

   EŞİĞİ DÜŞÜRMEK ÇÖZÜM DEĞİL: rayKur kaydırmayı ele geçiriyor
   (scrolljacking). Dokunmatikte bu, parmağın beklediği yönü
   çalmak demek — sayfayı aşağı kaydırmak isteyen kullanıcı kartları
   yana sürüyor. Masaüstünde fare tekerleği için doğru olan şey
   telefonda yanlış.

   Bunun yerine RAYIN KENDİSİ kaydırılabilir oluyor: parmakla yana
   sürülüyor, sayfa dikey kaydırmasını koruyor. Biçim yatay kalıyor,
   sayfa kısalıyor, kimse kaydırmayı ele geçirmiyor. Aynı çözüm
   blog önizlemesinde 1100px altında zaten kullanılıyordu; üç ray da
   o kalıba getirildi.

   KENARDAN KENARA: ray kabın içinde değil TAM GENİŞLİKTE kayıyor,
   ama ilk kart kabın sol kenarıyla hizalı başlıyor (padding-inline
   = --kap-bosluk). Kap içine hapsedilseydi kartlar kenara varmadan
   kesilir, "daha var" hissi kaybolurdu.

   scroll-padding: snap noktası da aynı kenardan başlasın; yoksa
   kaydırma bittiğinde kart kenara yapışıyor ve boşluk kayboluyor. */
@media (max-width: 1023px), (max-height: 719px){
  .giris-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .giris-ray,
  .demo-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .demo-ray,
  .kategori-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .kategori-ray{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    gap: var(--s-3);
    padding-inline: var(--kap-bosluk);
    padding-bottom: var(--s-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--kap-bosluk);
    -webkit-overflow-scrolling: touch;
    /* Şerit görsel bir ipucu; kaydırma çubuğu kartların altında
       gri bir çizgi bırakıyor ve kompozisyonu bozuyordu. */
    scrollbar-width: none;
  }
  .giris-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .giris-ray::-webkit-scrollbar,
  .demo-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .demo-ray::-webkit-scrollbar,
  .kategori-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .kategori-ray::-webkit-scrollbar{ display: none; }

  /* Kart genişliği ekrana oranlı: yanında bir sonraki kartın kenarı
     görünsün ki kaydırılabileceği anlaşılsın. 82vw tam da onu
     bırakıyor. Tavan 420px — geniş tablette kart absürt büyümesin. */
  .giris-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .giris-kart,
  .demo-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .demo-kart,
  .kategori-alan:not([data-ray="acik"]):not([data-ray="dikey"]) .kategori-kart{
    flex: 0 0 min(420px, 82vw);
    scroll-snap-align: start;
  }
}

/* ============================================================
   DİKEY RAY — TABLET VE MOBİL
   ------------------------------------------------------------
   İstek (2026-09-23): dar ekranda kart şeridi aşağı kaydırmalı
   olacak; kaydırdıkça kart değişecek, her an ekranda YALNIZ BİR
   kart olacak, kartlar bitince sayfa normal akışına dönecek.
   PC'de yatay ray olduğu gibi kalıyor.

   media.js/rayKur dar ekranda data-ray="dikey" yazıyor ve etkin
   karta data-etkin="1" veriyor. Aşağısı yalnız o iki işaretin
   görsel karşılığı — ölçü ve zamanlama JS'te, biçim burada.

   YUKARIDAKİ YEDEK DÜZEN ARTIK "dikey"İ DIŞLIYOR. Seçiciler
   :not([data-ray="acik"]) idi ve "dikey" de "acik" olmadığı için
   yatay parmak şeridi bu modda da eşleşiyordu; iki düzen üst üste
   binerdi. Tüm yedek seçicilere :not([data-ray="dikey"]) eklendi.

   NEDEN ÜST ÜSTE IZGARA, NEDEN KAYDIRILAN BİR SÜTUN DEĞİL:
   kartları alt alta dizip translateY ile kaydırmak da olurdu ama
   o zaman her kartın yüksekliği ekrana SABİTLENMEK zorunda (yoksa
   adımlar kayıyor) ve kart içeriği kısa ekranda kırpılıyor. Üst
   üste ızgarada kap en uzun karta göre büyüyor, her kart kendi
   doğal boyunda duruyor ve geçiş bir yer değiştirme değil bir
   devir teslim oluyor. Ayrıca "ekranda sadece bir kart" koşulu
   burada yapısal olarak garanti; kaydırmada iki kartın yarısı
   aynı anda görünebiliyor. */
.giris-alan[data-ray="dikey"] .giris-yapisik,
.demo-alan[data-ray="dikey"] .demo-yapisik,
.kategori-alan[data-ray="dikey"] .kategori-yapisik{
  position: sticky;
  /* --ust-yuk'u media.js ölçüyor (mobilde başlık çubuğu 64px
     değil). Yedeği 64px, JS ölçmeden önceki ilk kare için. */
  top: var(--ust-yuk, 64px);
  /* svh: 100vh mobilde URL çubuğu AÇIKKEN ekrandan büyük çıkıyor
     ve kartın altı kesiliyor; dvh ise kaydırma sırasında çubuk
     toplanırken yüksekliği değiştirip sabitlenmiş bölümü
     zıplatıyor. svh ikisini de yapmıyor: en küçük hâle göre
     ölçüyor, kart her koşulda sığıyor. */
  height: calc(100svh - var(--ust-yuk, 64px));
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.giris-alan[data-ray="dikey"] .giris-ray,
.demo-alan[data-ray="dikey"] .demo-ray,
.kategori-alan[data-ray="dikey"] .kategori-ray{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* min-height:0 ŞART. Esnek sütun içinde ızgaranın varsayılan
     taban boyu içeriği kadardır; uzun kart kısa ekranda kabı
     taşırıp üstteki başlığı yukarı itiyordu. */
  flex: 0 1 auto; min-height: 0;
  width: min(100% - 2 * var(--kap-bosluk), 560px);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  transform: none;          /* yataydan kalmış translateX'i sil */
}
.giris-alan[data-ray="dikey"] .giris-kart,
.demo-alan[data-ray="dikey"] .demo-kart,
.kategori-alan[data-ray="dikey"] .kategori-kart{
  grid-area: 1 / 1;         /* hepsi AYNI gözde, üst üste */
  width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  /* visibility de geçişin içinde: odak ve ekran okuyucu sönmüş
     kartlara ulaşmasın. Gizlenirken 420ms gecikmeli kapanıyor ki
     sönme animasyonu görünsün, açılırken anında. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms var(--ease),
              transform 420ms var(--ease),
              visibility 0s linear 420ms;
}
.giris-alan[data-ray="dikey"] .giris-kart[data-etkin="1"],
.demo-alan[data-ray="dikey"] .demo-kart[data-etkin="1"],
.kategori-alan[data-ray="dikey"] .kategori-kart[data-etkin="1"]{
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Görsel, kartın en esnek parçası. Masaüstünde 300px sabit; dikey
   modda ekran payına bağlanıyor, yoksa metin aşağı taşıyor. */
.giris-alan[data-ray="dikey"] .giris-kart .giris-gorsel img{
  height: clamp(150px, 26svh, 280px);
}

/* İlerleme çubuğu dikey modda ŞART: kartlar yan yana durmadığı
   için "daha var" hissini veren tek gösterge o. Yedek düzende
   gizleniyordu, burada açıkça geri açılıyor. */
.giris-alan[data-ray="dikey"] .giris-ilerleme,
.demo-alan[data-ray="dikey"] .demo-ilerleme,
.kategori-alan[data-ray="dikey"] .kategori-ilerleme{ display: block; }

/* ============================================================
   SESLİ BROŞÜR — demolar/konusan-brosur
   ------------------------------------------------------------
   Sayfa açık zeminde (Fısıltı Beyazı); okunan cümlenin
   işaretlenmesi bu yüzden koyu zemin kurallarından ayrı yazıldı.
   ============================================================ */
/* =============== KONUŞAN BROŞÜR (yeni) ===============
   Eski düzen iki sütunluydu (yapışkan oynatıcı + metin). Yeni
   deneyimde iki KİP var (Dinle / Sor) ve ikisi aynı kabın içinde
   yer değiştiriyor; bu yüzden kap tek sütun, kipler pano. */
.kb{
  border: 1px solid var(--kenar); border-radius: var(--r-yuzey);
  background: var(--yuzey); overflow: hidden;
}
.kb-ust{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--kenar);
}
.kb-kip{ display: flex; gap: 4px; }
.kb-kip-dugme{
  display: inline-flex; align-items: center; gap: 8px;
  /* 44px: kılavuz s.17 dokunma hedefi alt sınırı */
  min-height: 44px; padding: 0 var(--s-2);
  border: 0; border-radius: var(--r-buton); cursor: pointer;
  background: transparent; color: var(--metin-govde);
  font: inherit; font-size: 14.5px; font-weight: 600;
  transition: background .2s, color .2s;
}
.kb-kip-dugme:hover{ color: var(--metin); }
.kb-kip-dugme.acik{ background: var(--vurgu-yumusak); color: var(--vurgu-kicker); }
.kb-dil{ display: flex; gap: 4px; }
.kb-dil-dugme{
  min-width: 44px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--kenar); border-radius: var(--r-buton);
  background: transparent; color: var(--metin-sessiz); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
}
.kb-dil-dugme.acik{ border-color: var(--mor-700); color: var(--vurgu-kicker); }

.kb-pano{ padding: var(--s-3); }

/* ---- Dinle ---- */
.kb-oynatici{
  display: flex; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--kenar);
}
.kb-oynat{
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--mor-700);
  display: grid; place-items: center;
  transition: transform .2s, box-shadow .2s;
}
.kb-oynat:hover{ transform: scale(1.05); box-shadow: 0 8px 24px rgba(123,79,255,.4); }
/* Üçgen (oynat) ve iki çubuk (duraklat) aynı öğeden çiziliyor:
   ikon dosyası yok, durum değişince sınıf yetiyor. */
.kb-oynat-ikon{
  width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.kb.calisiyor .kb-oynat-ikon{
  width: 14px; height: 16px; margin-left: 0; border: 0;
  border-left: 5px solid #fff; border-right: 5px solid #fff;
  box-sizing: border-box;
}
.kb-oynat-bilgi{ flex: 1; min-width: 0; }
.kb-simdiki{ margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--metin); }
.kb-cubuk{
  height: 4px; border-radius: 99px; background: rgba(255,255,255,.10);
  overflow: hidden;
}
.kb-cubuk span{
  display: block; height: 100%; width: 0;
  background: var(--mor-700); transition: width .2s linear;
}
.kb-sure{
  margin: 6px 0 0; font-family: var(--font-mono);
  font-size: 12px; color: var(--metin-sessiz);
}
.kb-hiz select{
  min-height: 36px; padding: 0 8px;
  border: 1px solid var(--kenar); border-radius: var(--r-buton);
  background: transparent; color: var(--metin-govde); font: inherit; font-size: 13px;
}

.kb-bolumler{
  list-style: none; margin: var(--s-3) 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.kb-bolum-dugme{
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--kenar); border-radius: var(--r-rozet);
  background: transparent; color: var(--metin-govde); cursor: pointer;
  font: inherit; font-size: 13.5px;
}
.kb-bolum-dugme.acik{
  border-color: var(--mor-700); background: var(--vurgu-yumusak); color: var(--vurgu-kicker);
}
.kb-govde{ display: flex; flex-direction: column; gap: var(--s-4); }

/* ============================================================
   CANLI DENEYİM'İ TEK EKRANA SIĞDIRMA
   Bölüm 900 piksellik ekranda 1187 piksel yüksekliğindeydi
   (ölçüldü). Katman zincirinin ilk halkası olarak sabitlenince
   alt kısmı ekranın dışında kalır, ziyaretçi metnin sonunu hiç
   göremezdi — sabitlenen bölümün altı kaydırılamıyor.

   Sabit yük (başlık + widget kromu + dolgu) 631 piksel; dolgu
   96'dan 48'e inince 535 kalıyor. Kalan her şey okuma paneline
   veriliyor ve panel kendi içinde kayıyor.

   İÇ KAYDIRMA KALDIRILDI (istek): metnin tamamı görünmeli.
   Panel max-height + overflow ile kırpılıyordu; ziyaretçi son iki
   bölümü ancak widget'ın içinde kaydırarak bulabiliyordu.

   YERİNE İKİ SÜTUN. Ölçüldü: paragraflar 1200 piksellik kabın
   içinde yalnızca 718 piksel genişlikteydi (gövde metninin 70ch
   sınırı), yani sağda boşa giden yer vardı ve metin gereksiz yere
   uzuyordu. Dört bölüm iki sütuna akınca gövde yarı yüksekliğe
   iniyor ve satır uzunluğu okunur aralıkta kalıyor.

   TEK SÜTUNU GENİŞLETMEK YANLIŞ OLURDU: 1100 piksellik satır
   ~110 karakter demek, rahat okuma aralığının (45-75) iki katı.
   Sütun genişliği ~540 piksel, yani ~70 karakter.

   display:block ŞART — çok sütun (multicol) flex kapsayıcıda
   çalışmıyor; .kb-govde flex olduğu için sütunlar hiç oluşmazdı.
   Aradaki boşluk da o yüzden gap'ten margin'e taşındı.
   break-inside: bir bölüm sütun ortasından ikiye bölünmesin.

   EŞİK 880 PİKSEL, ÖLÇÜMLE BULUNDU. Toplanmış hâliyle içeriğin
   doğal yüksekliği 872 piksel; bölüm bundan kısa bir ekranda
   sabitlenirse widget'ın ALTI ekran dışında kalıyor ve oraya
   kaydırmak mümkün olmuyor (820'de ölçüldü: -20 piksel). Yani
   eşiğin altında tek ekrana sığdırmak, metni kırpmak demek —
   bu bölümde tam da kaldırmak istediğimiz şey.

   Eşiğin altında bölüm normal akıyor, tek sütuna dönüyor ve
   sabitlenme kapanıyor (aşağıdaki kural). Kısa pencerede efekt
   yok ama metnin tamamı erişilebilir kalıyor. */
@media (min-width: 901px) and (min-height: 880px){
  /* ORTALAMA YERİNE ÜSTTEN HİZA. Bölüm dikeyde ortalanınca üstte
     kalan pay ekran yüksekliğine göre değişiyor ve kısa ekranda
     sıfıra düşüp üst barın altında kalıyordu (ölçüldü: 900'de tam
     0 piksel). Üstten hizalayıp barın 65 pikseli + 24 piksel nefes
     payı kadar dolgu vermek bunu ekran boyundan bağımsız
     sabitliyor; artan boşluğun tamamı alta gidiyor. */
  .katmanli > .kb-tek-ekran{ justify-content: flex-start; }
  .kb-tek-ekran{ padding-block: 89px var(--s-4); }

  .kb-tek-ekran .kb-govde{
    display: block;
    columns: 2;
    column-gap: var(--s-5);
  }
  .kb-tek-ekran .kb-bolum{
    break-inside: avoid;
    margin-bottom: var(--s-2);
  }
  .kb-tek-ekran .kb-bolum:last-child{ margin-bottom: 0; }
  /* Bölüm başlığı 28px'ti; sütun genişliğinde o ölçek satırı
     kırıyor ve gövdeyle arasındaki hiyerarşiyi abartıyordu. */
  .kb-tek-ekran .kb-bolum h2{ font-size: 19px; line-height: 1.3; }

  /* Widget kromunu toplama: bölüm metnin tamamını göstermek
     zorunda, o yüzden sabit yükten kısılabilecek her piksel
     kısılıyor. Panel daralıyor ama sıkışmıyor. */
  .kb-tek-ekran .bolum-bas{ margin-bottom: var(--s-3); }
  .kb-tek-ekran .kb-ust{ padding-block: var(--s-1); }
  .kb-tek-ekran [data-pano]{ padding: var(--s-3); }
}

/* GENİŞ AMA KISA EKRAN TUZAĞI. Sabitlenme yalnız genişliğe bakıyor
   (>900px), sığdırma ise yüksekliğe. İkisi ayrışınca — geniş ama
   820'den kısa bir pencerede — bölüm 1187 piksel kalıyor ama yine
   de çakılıyordu: alt kısmı kaydırılamaz hâle geliyor, metnin
   sonu erişilemez oluyordu. Orada sabitlenmeyi de kapatıyoruz;
   üstteki paneller kaymaya devam ediyor, yalnız ilk halka normal
   akıyor. */
@media (max-height: 879px){
  .katmanli > .kb-tek-ekran{ position: static; min-height: 0; display: block; }
  /* DURAKSAMA PAYI DA KALKMALI — yoksa ORTADA KOCAMAN BOŞLUK KALIYOR.
     Pay (70lvh) yalnızca ÇAKILI panelin ekranda yalnız kalabilmesi
     için var: panel sabitken pay onun ARKASINDA duruyor, görünmüyor.
     Yukarıdaki kural paneli static yapınca panel normal akıp gidiyor
     ve arkasındaki pay açığa çıkıyor — hiçbir şey içermeyen 455px'lik
     bir delik (1000×650'de ölçüldü, ekranın ortasında yalnız
     .katman-duraksama görünüyor).

     Bu ekranların çoğunu etkiliyordu: 880px'in altındaki HER pencere,
     yani araç çubuklarıyla birlikte tipik dizüstü ve iPad yatay.

     YALNIZ BU PAY: komşu seçici (+) sadece kb-tek-ekran'ın hemen
     ardındakini kapsıyor. Sayfadaki ikinci pay .katman-orta'ya ait
     ve o bölüm bu genişlikte HÂLÂ yapışkan; onu da gizlersek bu kez
     o panelin duraklaması kaybolur. */
  .katmanli > .kb-tek-ekran + .katman-duraksama{ display: none; }
}
/* Okunan bölüm: sol kenarda mor şerit. Metnin kendisini soldurmuyoruz;
   dinlemeyip okumak isteyen ziyaretçi hepsini okuyabilmeli. */
.kb-bolum{
  padding-left: var(--s-2);
  border-left: 2px solid transparent;
  transition: border-color .3s;
}
.kb-bolum.okunuyor{ border-left-color: var(--mor-700); }

/* BÖLÜM SORULARI MARKA MORUNDA.
   "Kimiz?", "Ne sunuyoruz?", "Neden konuşan broşür?", "Nasıl
   başlıyoruz?" — broşürün anlatımını taşıyan dört soru. Gövde
   metniyle aynı lacivertteydiler, yani göz bir soruya geldiğini
   yalnız punto farkından anlıyordu.

   Mor 700 (--vurgu), Mor 500 değil: bölüm Fısıltı Beyazı zeminde
   ve Mor 500 orada soluk kalıyor (aynı ölçüm kategori kartlarında
   da yapıldı).

   Okunurken sola inen mor çizgiyle (.okunuyor) aynı renk: sesli
   anlatım o bölüme geldiğinde başlık ve çizgi tek bir işaret gibi
   okunuyor. */
.kb-bolum h2{ color: var(--vurgu); }

/* ---- CANLI CÜMLE VURGUSU ----
   Okunan cümle işaretleniyor; göz anlatımı takip edebilsin.

   PREMİUM DURSUN DİYE: düz sarı highlight yerine marka moru, ve renk
   tek başına değil. Arkada çok yumuşak bir mor dolgu, altında ise
   soldan sağa BÜYÜYEN ince bir çizgi. Çizgi cümlenin süresince
   ilerlemiyor (o altyazı olurdu); cümleye geçerken bir kez akıp
   yerleşiyor, yani gözü çağırıyor ama peşinden koşturmuyor.

   RENK TEK BAŞINA ANLAM TAŞIMAZ (kılavuz s.17 / WCAG): dolgunun
   yanında alt çizgi de var, renk körü ziyaretçi de nerede okunduğunu
   görüyor.

   box-decoration-break: cümle satır sonunda bölününce dolgu ve
   yuvarlatma her parçada doğru çıksın diye; onsuz ikinci satırda
   köşeler kırık görünüyordu. */
.kb-cumle{
  position: relative;
  border-radius: 4px;
  padding: 1px 2px; margin: 0 -2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.kb-cumle.okunuyor{
  background: rgba(123,79,255,.13);
  color: var(--metin);
}
.kb-cumle.okunuyor::after{
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mor-700), var(--mor-300));
  transform-origin: left center;
  animation: kbCizgi .45s var(--ease) both;
}
@keyframes kbCizgi{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .kb-cumle{ transition: none; }
  .kb-cumle.okunuyor::after{ animation: none; }
}

/* ---- Sor: SESLİ KONUŞMA SAHNESİ ----
   Ekranın odağı burası. Önceki düzen bir sohbet kutusuydu, mikrofon
   kenarda küçük bir düğmeydi; ekran "chatbot, ayrıca sesle de olur"
   diyordu. Şimdi merkezde büyük konuşma düğmesi var.
   Halkalar durum değişince canlanıyor: ziyaretçi "şu an ne oluyor"u
   yazıyı okumadan anlıyor. */
/* =============== BIGGIE PANELİ SAYFA İÇİNDE ===============
   Widget yüzen panel olarak tasarlandı (#bb-panel position:fixed,
   400px genişlik, gövdeye ekleniyor) ve gömülü kip seçeneği yok.
   AI Ürün Asistanı demo sayfası paneli yuvaya taşıyor; burada da
   konumlandırmasını sayfa akışına çeviriyoruz.

   BU BİR EZME: seçiciler widget'ın kendi kimliklerine (#bb-panel,
   #bb-launcher) dayanıyor. Widget güncellenirse burası da gözden
   geçirilmeli. Tek yerde tutuluyor ki aranınca bulunsun.

   Yüksekliği yuva veriyor: panel taşınana kadar sayfa zıplamasın
   diye yer önceden ayrılıyor. */

/* Solda söz, sağda panel. Metin sütunu daha geniş (1.25fr): panel
   sabit 400px, ona 1fr vermek geniş ekranda sütunun içinde kocaman
   boşluk bırakıyordu. Dikeyde ortalı — panel 620px, metin çoğu
   ekranda daha kısa; hizalamazsak biri diğerinin yanında sarkıyor. */
/* align-items: STRETCH. Biggie paneli ~800px, yanındaki metin ~250px.
   center'da metin panelin ortasına iniyordu, start'ta üste yapışıp
   altta 550px boşluk bırakıyordu. Stretch ile sol sütun panel boyuna
   uzuyor; içindeki blokları kendi içinde konumlandırıyoruz:
   söz (etiket + başlık) dikeyde ortada, buton dipte. */
.asistan-ikili{ grid-template-columns: 1.25fr auto; align-items: stretch; gap: var(--s-6); }

/* margin-block:auto — flex'te otomatik kenar boşluğu artan alanı
   yutuyor. Üstte ve altta eşit bölününce söz bloğu butonun
   üstündeki alanda ortalanıyor, buton da sütunun dibine iniyor.
   Tek kuralla iki hizalama; sabit yükseklik ya da sihirli sayı yok. */
.demo-giris{ display: flex; flex-direction: column; }
.asistan-soz{ margin-block: auto; }

/* .asistan-eylem KURALLARI SİLİNDİ: anasayfadaki dolu Studio
   butonu satır bağlantısına (.studio-kopru) çevrilince o sarmalayıcı
   da kalktı ve kural hiçbir sayfada kullanılmaz oldu. */
.asistan-p{
  margin: var(--s-3) 0 0; max-width: 56ch;
  font-size: 16px; line-height: 1.7; color: var(--metin-govde);
}
.asistan-not{
  margin: var(--s-4) 0 0; max-width: 52ch;
  font-size: 14.5px; line-height: 1.65; color: var(--metin-sessiz);
}
.asistan-not a{ color: var(--vurgu); text-decoration: none; border-bottom: 1px solid transparent; }
.asistan-not a:hover{ border-bottom-color: currentColor; }

/* Yuva panelin GERÇEK ölçüsünü tutuyor (400x620, big-bot.css).
   Germiyoruz: hero yüksekliği, köşe yarıçapı ve tipografi o
   genişliğe göre ayarlı; germek hem 3D sahneyi hem kutuyu bozar. */
.biggie-yuva{
  width: 400px; max-width: 100%; min-height: 620px;
  display: grid; place-items: center;
  margin-inline: auto;
}
.biggie-yuva-bekle{
  margin: 0; font-size: 14.5px; color: var(--metin-sessiz);
}
/* SADECE konumlandırma ezmesi: panelin kendi kenarlığı, köşesi ve
   gölgesi KALIYOR — "studio'da açılmış hâli" tam olarak bu. */
#bb-panel.bb-gomulu{
  position: static; inset: auto;
  max-height: none;
  /* z-index SIFIRLANMALI. Widget 99999 veriyor; `position: static`te
     z-index normalde ölür AMA panel .biggie-yuva'nın (display:grid)
     çocuğu, ve grid/flex çocuklarında z-index konumlanmamış olsa da
     geçerli. Sonuç: panel üst bardaki (.ust, z-index 50) "Ne
     Sunuyoruz" açılır kutusunun ÜSTÜNE biniyor ve menü okunmuyordu.
     auto ile panel normal akışta boyanıyor, üst bar yine üstte. */
  z-index: auto;
}
/* KAPATMA TUŞU GİZLİ. Panel sayfanın içinde ve yüzen başlatıcı da
   gizli (aşağıdaki kural) — kapatınca geri açmanın hiçbir yolu
   kalmıyordu, ziyaretçi Biggie'yi tek tıkla kalıcı olarak
   kaybediyordu. Yüzen panelde kapatma doğru, gömülüde değil:
   burada panel bir sayfa bölümü, kapatılacak bir pencere değil. */
/* !important YOK: seçici (1 kimlik + 1 sınıf + 1 tür) widget'ın düz
   `#bb-close`unu (1 kimlik) zaten yeniyor, ve JS tuşun stiline hiç
   dokunmuyor — yalnız aria-label ve tıklama dinleyicisi var.
   display:none tuşu erişilebilirlik ağacından da çıkarıyor, yani
   klavyeyle de ulaşılamıyor; ulaşılsa aynı tuzağa düşerdi. */
body.biggie-gomulu-sayfa #bb-close{ display: none; }
/* Panel sayfa içindeyken yüzen başlatıcı gereksiz: aynı şeyi iki
   kez sunmak ziyaretçiyi "hangisi?" diye düşündürüyor. */
body.biggie-gomulu-sayfa #bb-launcher,
body.biggie-gomulu-sayfa #bb-nudge{ display: none !important; }

@media (max-width: 1024px){
  /* Panel metnin ALTINA: önce ne olduğunu okusun, sonra denesin. */
  .asistan-ikili{ grid-template-columns: 1fr; }
  .asistan-p, .asistan-not{ max-width: none; }
}
@media (max-width: 460px){
  /* Dar ekranda 400px taşardı; panelin kendi max-width'i var ama
     yuvanın da daralması şart. */
  .biggie-yuva{ width: 100%; min-height: 560px; }
  #bb-panel.bb-gomulu{ width: 100%; height: 560px; }
}

.kb-sahne{
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); padding: var(--s-4) 0 var(--s-3);
}
.kb-konus{
  position: relative; width: 104px; height: 104px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--mor-700);
  display: grid; place-items: center;
  transition: transform .2s, box-shadow .3s;
  box-shadow: 0 10px 30px -8px rgba(123,79,255,.5);
}
.kb-konus:hover{ transform: scale(1.04); }
.kb-konus:focus-visible{ outline: 3px solid var(--mor-300); outline-offset: 4px; }
.kb-mik-ikon{
  width: 18px; height: 28px; border-radius: 99px; background: #fff;
  box-shadow: 0 13px 0 -6px #fff;   /* mikrofonun ayağı */
}
/* Halkalar normalde görünmez; durum sınıfı canlandırıyor. */
.kb-halka{
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid var(--mor-500); opacity: 0; pointer-events: none;
}
.kb-halka-2{ inset: -22px; }

.kb[data-hal="dinliyor"] .kb-konus{ background: var(--mor-900); }
.kb[data-hal="dinliyor"] .kb-halka{ animation: kbNabiz 1.8s ease-out infinite; }
.kb[data-hal="dinliyor"] .kb-halka-2{ animation-delay: .6s; }
@keyframes kbNabiz{
  0%{ opacity: .55; transform: scale(.92); }
  100%{ opacity: 0; transform: scale(1.25); }
}
.kb[data-hal="dusunuyor"] .kb-halka{
  opacity: .9; border-style: dashed; animation: kbDon 2.4s linear infinite;
}
@keyframes kbDon{ to{ transform: rotate(360deg); } }
.kb[data-hal="konusuyor"] .kb-konus{ animation: kbNefes 1.6s ease-in-out infinite; }
@keyframes kbNefes{
  50%{ transform: scale(1.06); box-shadow: 0 14px 40px -8px rgba(123,79,255,.65); }
}
/* Hareket azaltılmışsa nabız/dönme yok; durum rengi ve yazı yeterli. */
@media (prefers-reduced-motion: reduce){
  .kb-halka, .kb[data-hal="konusuyor"] .kb-konus{ animation: none !important; }
  .kb[data-hal="dinliyor"] .kb-halka{ opacity: .6; }
}

.kb-cagri{ margin: 0; font-size: 14.5px; color: var(--metin-sessiz); text-align: center; }

/* Yazarak sorma: ikinci yol. Kaldırılmadı ama öne çıkmıyor —
   sessiz ortamdaki ziyaretçi hâlâ yazabilmeli. */
.kb-yaz{ margin-top: var(--s-2); }
.kb-yaz summary{
  cursor: pointer; font-size: 13.5px; color: var(--metin-sessiz);
  list-style: none; padding: 8px 0;
}
.kb-yaz summary::-webkit-details-marker{ display: none; }
.kb-yaz summary:hover{ color: var(--vurgu-kicker); }

.kb-sohbet{
  min-height: 0; max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.kb-balon{
  max-width: 78%; padding: 12px 14px; border-radius: 14px;
  font-size: 15px; line-height: 1.6;
}
.kb-balon-soru{
  align-self: flex-end; background: var(--mor-700); color: #fff;
  border-bottom-right-radius: 4px;
}
.kb-balon-cevap{
  align-self: flex-start; background: rgba(255,255,255,.05);
  color: var(--metin-govde); border-bottom-left-radius: 4px;
}
.kb-ornekler{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-2); }
.kb-ornek{
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--kenar); border-radius: var(--r-rozet);
  background: transparent; color: var(--metin-govde); cursor: pointer;
  font: inherit; font-size: 13px;
}
.kb-ornek:hover{ border-color: var(--mor-700); color: var(--vurgu-kicker); }
.kb-soru{ display: flex; gap: 8px; align-items: center; }
.kb-soru input{
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--kenar); border-radius: var(--r-buton);
  background: transparent; color: var(--metin); font: inherit; font-size: 15px;
}
.kb-soru input:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 1px; }
.kb-mik{
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--kenar); background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.kb-mik.dinliyor{ border-color: var(--mor-700); background: var(--vurgu-yumusak); }
.kb-ikon-mik{
  width: 11px; height: 17px; border-radius: 99px;
  background: var(--metin-govde); box-shadow: 0 8px 0 -4px var(--metin-govde);
}
.kb-mik.dinliyor .kb-ikon-mik{ background: var(--vurgu-kicker); box-shadow: 0 8px 0 -4px var(--vurgu-kicker); }

.kb-durum{
  margin: 0; padding: 0 var(--s-3) var(--s-3);
  font-size: 13.5px; color: var(--metin-sessiz); min-height: 20px;
}
.kb-durum-uyari{ color: var(--vurgu-kicker); }

@media (max-width: 640px){
  .kb-ust{ flex-wrap: wrap; }
  .kb-oynatici{ flex-wrap: wrap; }
  .kb-oynat-bilgi{ order: 3; flex-basis: 100%; }
  .kb-balon{ max-width: 88%; }
}

/* Oynatıcı kaydırırken ekranda kalıyor: broşür uzun, düğme
   yukarıda kalsaydı ziyaretçi duraklatmak için başa dönerdi. */
.brosur-oynatici{
  position: sticky; top: calc(var(--ust-yukseklik) + 16px);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-kart, 12px);
  background: #fff; border: 1px solid var(--kenar);
  box-shadow: 0 18px 40px -28px rgba(10,13,36,.35);
}
@media (max-width: 860px){
  .brosur-oynatici{ position: static; }
}
.brosur-dugmeler{ display: flex; flex-wrap: wrap; gap: var(--s-2); }
.brosur-dugmeler .dugme{ flex: 1 1 auto; justify-content: center; }

/* Üçgen (oynat) → iki çubuk (duraklat). Simge dosyası yok:
   tek öğenin kenarlıkları biçim değiştiriyor. */
.ses-ikon{
  width: 0; height: 0; flex: none;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  transition: border-width .2s var(--ease), width .2s var(--ease), height .2s var(--ease);
}
.brosur.calisiyor .ses-ikon{
  width: 10px; height: 12px;
  border-width: 0 3px; border-color: currentColor;
}

.brosur-hiz{
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 13.5px; color: var(--metin-sessiz);
}
.brosur-hiz input{ flex: 1; accent-color: var(--mor-700); min-width: 0; }
.brosur-hiz b{ font-family: var(--font-mono); font-size: 12.5px; color: var(--metin); }

.brosur-durum{
  margin: 0; min-height: 1.4em;
  font-size: 13px; line-height: 1.5; color: var(--metin-sessiz);
}

.brosur-govde{ display: flex; flex-direction: column; gap: var(--s-4); }
.brosur-bolum h2{
  margin: 0 0 var(--s-2); font-size: clamp(20px, 2.4vw, 26px);
  font-family: var(--font-baslik); font-weight: 700; color: var(--metin);
}
.brosur-bolum p{ margin: 0; font-size: 17px; line-height: 1.75; color: var(--metin-govde); }

/* Okunan cümle. Arka planı yumuşak mor; ALT ÇİZGİ de var çünkü
   WCAG "renk tek başına anlam taşımaz" diyor — renk körü bir
   ziyaretçi de nerede okunduğunu görebilmeli. */
.ses-cumle{
  border-radius: 4px;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ses-cumle.okunuyor{
  background: rgba(123,79,255,.14);
  box-shadow: inset 0 -2px 0 var(--mor-700);
}
@media (prefers-reduced-motion: reduce){
  .ses-cumle{ transition: none; }
}

.brosur-not{
  margin: var(--s-4) 0 0; max-width: 62ch;
  font-size: 13.5px; line-height: 1.6; color: var(--metin-sessiz);
}

/* ============================================================
   DİJİTAL DERGİ DEMOSU  (.dg-*)
   ------------------------------------------------------------
   AYNI SAYFANIN İKİ YÜZEYİ. Kâğıt ve ekran iki ayrı bileşen
   değil: sayfa metni DOM'da bir kez duruyor, yüzey düğmesi
   yalnız sunumu ve o yüzeye ait aracı değiştiriyor —
   kâğıtta kare kod, ekranda ses ve etkileşim. Bu, ürünün
   "tek içerik, iki çıktı" vaadinin arayüzdeki karşılığı.

   SAYFA ÇEVİRME: flipbook kütüphanesi ya da WebGL YOK.
   Anasayfaya Three.js yeni girdi (589KB); ikinci bir ağır
   bağımlılık taşımıyoruz. Geçiş saf CSS transform +
   perspective.

   YÖN DURUM TUTMADAN ÇÖZÜLDÜ: açık sayfadan öncekiler .once,
   sonrakiler .sonra sınıfı alıyor ve zıt yönlerden dönüyor.
   Böylece "ileri mi geri mi gidildi" diye bir değişken
   tutmak gerekmiyor; geçiş kendiliğinden doğru yönden
   geliyor. Sayfa atlandığında (noktaya tıklama) da doğru
   çalışıyor — ki yön değişkeniyle bu bozulurdu.
   ============================================================ */
.dg{
  border: 1px solid var(--kenar); border-radius: var(--r-yuzey);
  background: var(--yuzey); overflow: hidden;
}

/* --- üst çubuk: yüzey seçici --- */
.dg-ust{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--kenar);
}
.dg-yuzey-sec{ display: flex; gap: 4px; }
.dg-yuzey-dugme{
  padding: 8px 14px; border: 0; border-radius: var(--r-rozet, 999px);
  background: transparent; color: var(--metin-sessiz);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.dg-yuzey-dugme:hover{ color: var(--metin); }
.dg-yuzey-dugme.acik{ background: var(--vurgu-yumusak); color: var(--vurgu-kicker); }
.dg-yuzey-dugme:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; }
.dg-sayac{
  margin: 0; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .08em; color: var(--metin-sessiz);
}
.dg-sayac b{ color: var(--metin); }

/* --- sahne ---
   TEK SÜTUN. Önce "kâğıt solda, telefon sağda" iki sütundu; sayfa
   çevirme kütüphanesi devreye girince kitap yatayda iki sayfalık
   açıklık (spread) çizmeye başladı ve 244px'lik telefon sütunu
   kitabı okunamayacak kadar daraltıyordu. Telefon artık kitabın
   ALTINDA, ortalı. */
.dg-sahne{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3); align-items: start;
  padding: var(--s-3);
}
/* TELEFON YENİDEN YANDA (geniş ekranda).
   Bir tur altta durdu çünkü kitap 940px genişliğindeydi ve yan
   sütun kitabı eziyordu. Kitap artık ekran yüksekliğinden
   türetiliyor ve daha dar; yan sütun sığıyor.

   Kazanç DİKEY: telefon altta olduğunda bileşen ~430px uzuyordu
   ve demo sayfası tek ekrana sığmıyordu — kullanıcının şikâyeti
   tam buydu. Yanda dururken hem yer kaplamıyor hem kâğıttaki
   kodun neye açıldığı kodla AYNI hizada görünüyor. */
/* EŞİK 1100 → 900 (2026-09-14).
   1100'ün altında telefon kitabın ALTINA yığılıyordu. Ölçüldü
   (1000×650): sahne 1044px (kitap 650 + telefon 323 + boşluk),
   dergi bileşeni 1199px — 650px'lik pencereye asla sığmıyor.

   Eşiği indirmek İKİ kazanç veriyor: alttaki 323px gidiyor, ve
   kitap sütunu daraldığı için kitabın kendisi de kısalıyor
   (yükseklik genişlikten türüyor, yukarıdaki nota bakın). */
/* SÜTUNLAR İÇERİĞE YAPIŞIYOR, GRUP ORTALANIYOR.
   Önce `minmax(0,1fr) 232px` yazıyordu: kitap sütunu 894px
   oluyor, kitap ise 540px çiziliyor ve sütunun ortasında
   kalıyordu. Ölçüldü (1440×900): solda 202px, kitapla telefon
   arasında 201px delik, telefonun sağında 25px. Yani kompozisyon
   sağa kaymış, ortasında boşluk açılmış görünüyordu.

   Kitap sütunu --dg-kitap-en kadar: kap ile çizim aynı sayıyı
   söyleyince sütunda artık pay kalmıyor ve ikili blok
   justify-content ile ortalanıyor.

   `auto auto` DENENDİ VE ÇÖKTÜ: .dg-tabaka'nın satır içi
   `width: 100%`'i auto sütunda dairesel kalıyor, sütun
   çöküyordu. Ölçüldü: blok 240px'e düştü, yani kütüphane tek
   sayfa kipine geçip açıklığı kaybetti. Sütuna somut bir
   genişlik vermek şart. */
@media (min-width: 900px){
  .dg[data-yuzey="basili"] .dg-sahne{
    /* minmax(0, …) İKİNCİ EMNİYET KEMERİ.
       Sütuna düz `var(--dg-kitap-en)` yazılınca sütun o genişlikte
       ISRAR ediyor; JS değeri geç yazarsa ya da pencere daralırsa
       ızgara kabı aşıyor ve telefon kartı kitabın üstüne biniyordu
       (ölçüldü, 1000×1100: sahne 1182px istiyor, 966px var).
       minmax ile sütun gerektiğinde daralabiliyor. JS tarafındaki
       genişlik sınırı (bk. kitapEniniYaz) aynı sonucu veriyor —
       ikisi birbirinin yedeği. */
    grid-template-columns: minmax(0, var(--dg-kitap-en, 640px)) 232px;
    justify-content: center;
    align-items: center;
    gap: var(--s-5);
  }
  .dg[data-yuzey="basili"] .dg-telefon{
    max-width: 232px;
    padding-top: 0; border-top: 0;
  }
  .dg[data-yuzey="basili"] .dg-telefon-ekran{ min-height: 180px; }
}

/* 900'ün ALTINDA telefon tamamen gizleniyor.
   Orada iki sütun sığmıyor; alta yığılmasına izin vermek yukarıda
   anlatılan 323px'i geri getirirdi. Telefon basılı yüzeyin bağlam
   görseli, içeriğin kendisi değil — kâğıttaki kod ve çağrı zaten
   sayfanın üstünde duruyor, bilgi kaybı olmuyor. */
@media (max-width: 899px){
  .dg .dg-telefon{ display: none; }
}

/* ============================================================
   İKİ ÇEVİRME KİPİ — ve ikisi de gerekli
   ------------------------------------------------------------
   .dg.cevrilir  → StPageFlip kurulu. Konumu, ölçüyü ve dönüşü
                   kütüphane satır içi stille veriyor; aşağıdaki
                   CSS yalnız onun önüne geçmemeye çalışıyor.
   .dg (yedek)   → kütüphane YOK. İki durumda oluyor:
                   (1) prefers-reduced-motion açık — kütüphanenin
                       bu desteği hiç yok, o yüzden hiç kurmuyoruz;
                   (2) vendor/page-flip.js yüklenemedi.
                   Bu hâlde sayfalar ızgarada üst üste duruyor ve
                   .acik/.once/.sonra sınıflarıyla değişiyor.

   YEDEK SİLİNMEDİ: tek yola bağlanmak, hareketi azaltmış
   ziyaretçiye ya da betiği düşen bir tarayıcıya boş bir kutu
   göstermek olurdu. Dergi her iki hâlde de okunur kalıyor.
   ============================================================ */
.dg:not(.cevrilir) .dg-tabaka{ display: grid; perspective: 1600px; min-width: 0; }

.dg:not(.cevrilir) .dg-sayfa{
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: rotateY(-18deg) translateX(7%) scale(.95);
  transform-origin: left center;
  /* visibility gecikmeli: solma bitmeden gizlenirse geçiş görünmüyor. */
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              visibility 0s linear .5s;
}
.dg:not(.cevrilir) .dg-sayfa.once{
  transform: rotateY(18deg) translateX(-7%) scale(.95);
  transform-origin: right center;
}
.dg:not(.cevrilir) .dg-sayfa.acik{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; z-index: 2;
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              visibility 0s;
}

/* --- ÇEVİRME KİPİ ---
   Kütüphane .dg-sayfa'yı kendi .stf__item'ı yapıyor ve width/height/
   position'ı satır içi veriyor. Buradaki iş yalnız onu engellememek:
   kendi gizleme/dönüştürme kurallarımız sıfırlanıyor.

   box-sizing ŞART: dolgu (padding) kütüphanenin verdiği ölçünün
   İÇİNDE kalmalı, yoksa sayfa kabından taşıyor ve çevirme sırasında
   metin kenardan kesiliyor.

   overflow-y: çevirme kipinde sayfa yüksekliği SABİT, oysa test
   sayfası uzun. Taşan içerik kırpılıp erişilemez kalmasın diye
   sayfa kendi içinde kayıyor. */
.dg.cevrilir .dg-tabaka{
  margin-inline: auto;
  transition: transform .45s var(--ease);
}

/* KAPAKTA KİTABI ORTALA.
   Kütüphane yatay açıklıkta kapağı SAĞ yarıya koyuyor, sol yarı
   bomboş kalıyor (tasarımı "açık kitabın boş iç kapağı" gibi
   düşünülmüş). Beyaz zeminde bu boşluk kasıtlı görünmüyor: sayfa
   ilk açıldığında ziyaretçinin gördüğü şey, sola doğru kayan
   yarım boş bir kutu oluyor.

   Kapaktayken kitabı yarım sayfa SOLA kaydırıyoruz: kapak kitabın
   sağ yarısında olduğu için (merkezi kitap genişliğinin %75'inde)
   sola %25 kaydırmak onu kitabın ortasına getiriyor. Kapak ekranın
   ortasına oturuyor, kapalı bir dergi gibi duruyor.

   YÖN BİR KEZ TERS YAZILDI (+%25): kapak sağ kenardan taşıp
   kırpıldı, başlık yarısı görünmüyordu. İşaret önemli. */
.dg.cevrilir.kapakta .dg-tabaka{ transform: translateX(-25%); }
@media (prefers-reduced-motion: reduce){
  .dg.cevrilir .dg-tabaka{ transition: none; }
}
.dg.cevrilir .dg-sayfa{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; transition: none;
  box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain;
  /* Kaydırma çubuğu GÖRÜNÜR bırakıldı. Test sayfası sabit sayfa
     yüksekliğini ~640px aşıyor (ölçüldü) ve ince/gizli bir çubukta
     ziyaretçi alttaki soruların varlığını fark etmiyor; testi
     yarım bırakıp "bozuk" sanıyor. Çubuk sayfanın kendi
     paletinde, dikkat dağıtmadan duruyor. */
  scrollbar-width: thin;
  scrollbar-color: var(--mor-300) transparent;
}
.dg.cevrilir .dg-sayfa::-webkit-scrollbar{ width: 8px; }
.dg.cevrilir .dg-sayfa::-webkit-scrollbar-track{ background: transparent; }
.dg.cevrilir .dg-sayfa::-webkit-scrollbar-thumb{
  background: var(--mor-300); border-radius: 99px;
  border: 2px solid var(--saf-beyaz);
}
.dg.cevrilir .dg-sayfa::-webkit-scrollbar-thumb:hover{ background: var(--mor-500); }

/* --- ÇEVİRME KİPİ TİPOGRAFİSİ: DAHA SIKI ---
   Web yazısı ile DERGİ SAYFASI aynı ölçüde dizilmez. Sayfa
   yüksekliği burada sabit (~667px, ölçüldü) ve web ölçüleriyle
   içerik taşıyordu: 2. sayfada kare kodun ALTINDAKİ basılı kısa
   adres kesiliyordu — oysa "kâğıda nihai adres değil kısa
   yönlendirme basılır" anlatısının kanıtı tam o satır.

   Kaydırma yedeği duruyor, ama okurun kaydırmadan görmesi
   gereken şeyi kaydırmaya bırakmıyoruz. */
.dg.cevrilir .dg-sayfa p[data-metin]{
  font-size: 14.5px; line-height: 1.62; margin-bottom: var(--s-2);
}
.dg.cevrilir .dg-baslik{
  font-size: clamp(18px, 2vw, 23px); margin-bottom: var(--s-2);
}
.dg.cevrilir .dg-ust-etiket{ font-size: 10.5px; }
.dg.cevrilir[data-yuzey="basili"] .dg-sayfa,
.dg.cevrilir[data-yuzey="ekran"] .dg-sayfa{ padding: var(--s-3); }
.dg.cevrilir[data-yuzey="basili"] .dg-sayfa{
  padding-left: calc(var(--s-3) + 8px);
}
/* Kod bloğu da küçülüyor: 118px kare, sıkışan sayfada tek başına
   150px yer kaplıyordu. 96px hâlâ rahat taranıyor (ölçü basılı
   dergide zaten baskı ölçüsüne göre yeniden veriliyor). */
.dg.cevrilir .dg-kod{ margin-top: var(--s-2); padding-top: var(--s-2); gap: var(--s-2); }
.dg.cevrilir .dg-kod-gorsel,
.dg.cevrilir .dg-kod-yer{ width: 96px; height: 96px; }
.dg.cevrilir .dg-kod-cagri{ font-size: 15.5px; }
.dg.cevrilir .dg-kod-alt{ margin-bottom: 5px; font-size: 12.5px; }
.dg.cevrilir .dg-kod-adres{ font-size: 11.5px; }
/* Kâğıt dokusunun gölgesi çevirme kipinde kalkıyor: kütüphane
   çevirme gölgesini kendisi çiziyor, ikisi üst üste gelince
   sayfa kirli görünüyor. */
.dg.cevrilir[data-yuzey="basili"] .dg-sayfa{ box-shadow: none; }

/* --- KÂĞIT GÖRÜNÜMÜ ---
   Köşe yarıçapı bilerek küçük (2px): yuvarlak köşe ekran nesnesi
   hissi veriyor, kâğıt keskin kesilir. Soldaki dikey çizgi cilt
   payı — sayfanın bir derginin içinden geldiğini söylüyor. */
.dg[data-yuzey="basili"] .dg-sayfa{
  background: var(--saf-beyaz); border-radius: 2px;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 10px);
  border-left: 1px solid rgba(10, 13, 36, .1);
  box-shadow: 0 0 0 1px rgba(10, 13, 36, .07),
              0 26px 54px -36px rgba(10, 13, 36, .5);
}
/* --- EKRAN GÖRÜNÜMÜ --- */
.dg[data-yuzey="ekran"] .dg-sayfa{
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r-kart); padding: var(--s-4);
}

/* yüzeye ait araçlar: kâğıtta kod, ekranda ses + etkileşim */
.dg[data-yuzey="basili"] .dg-etkilesim,
.dg[data-yuzey="basili"] .dg-oynatici{ display: none; }
.dg[data-yuzey="ekran"] .dg-kod,
.dg[data-yuzey="ekran"] .dg-telefon{ display: none; }

/* --- sayfa tipografisi --- */
.dg-ust-etiket{
  margin: 0 0 var(--s-1); font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vurgu-metin);
}
.dg-baslik{
  margin: 0 0 var(--s-2); font-family: var(--font-baslik);
  font-size: clamp(21px, 2.6vw, 27px); font-weight: 700;
  line-height: var(--satir-baslik-kucuk, 1.25); color: var(--metin);
}
.dg-sayfa p[data-metin]{
  margin: 0 0 var(--s-2); font-size: 15.5px;
  line-height: var(--satir-govde, 1.7); color: var(--metin-govde);
  max-width: 64ch;
}
.dg-iletisim{ font-weight: 600; color: var(--metin) !important; }

/* --- kapak --- */
.dg-kapak{ padding: var(--s-4) 0; text-align: center; }
.dg-kapak-marka{
  margin: 0 0 var(--s-1); font-family: var(--font-baslik);
  font-size: clamp(30px, 5vw, 46px); font-weight: 800;
  letter-spacing: .02em; color: var(--metin);
}
.dg-kapak-marka i{ font-style: normal; color: var(--vurgu); }
.dg-kapak-sayi{
  margin: 0 0 var(--s-4); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .22em; color: var(--metin-sessiz);
}
.dg-kapak-baslik{
  margin: 0 auto var(--s-2); max-width: 22ch;
  font-family: var(--font-baslik); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; color: var(--metin);
}
.dg-kapak-alt{
  margin: 0 auto; max-width: 46ch; font-size: 15px;
  line-height: 1.65; color: var(--metin-sessiz);
}

/* --- KARE KOD BLOĞU (basılı yüzey) ---
   Çağrı metni koddan BÜYÜK ve ÜSTTE. Sebep: okur kodu değil
   sebebi arıyor; "QR okutun" diyen bir blok taranmıyor.
   Adres mono ile yazılı çünkü kâğıda basılan hâli bu — ve
   nihai adres değil, bizim yönettiğimiz kısa yönlendirme. */
.dg-kod{
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px dashed var(--kenar);
}
.dg-kod-gorsel{
  width: 118px; height: 118px; flex: none; display: block;
  border-radius: 3px;
}
.dg-kod-yer{
  width: 118px; height: 118px; flex: none;
  border: 2px dashed var(--kenar); border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .18em; color: var(--metin-sessiz);
}
.dg-kod-yazi{ min-width: 0; }
.dg-kod-cagri{
  margin: 0 0 4px; font-family: var(--font-baslik);
  font-size: 17px; font-weight: 700; color: var(--metin);
}
.dg-kod-alt{ margin: 0 0 8px; font-size: 13.5px; color: var(--metin-sessiz); }
.dg-kod-adres{
  margin: 0; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .03em; color: var(--vurgu-metin); word-break: break-all;
}

/* --- TELEFON ÖNİZLEME ---
   Renkler token'dan DEĞİL doğrudan lacivert: bu bir cihaz ekranı
   çiziyor, sayfanın açık zemin paletine uymak zorunda değil. */
/* Telefon kitabın ALTINDA, ortalı ve dar: kitap artık tam genişliği
   kullanıyor (bk. .dg-sahne notu). Üstte ince bir ayırıcı, çünkü
   burası "kâğıt" bölgesinden çıkıp "kodu okutunca ne oluyor"
   bölgesine geçiyor. */
.dg-telefon{
  justify-self: center; max-width: 258px; width: 100%;
  padding-top: var(--s-3); border-top: 1px dashed var(--kenar);
}
.dg-telefon-cerceve{
  border: 9px solid var(--lacivert-900); border-radius: 30px;
  background: var(--lacivert-900); padding: 8px;
  box-shadow: 0 22px 44px -28px rgba(10, 13, 36, .6);
}
.dg-telefon-ekran{
  border-radius: 20px; background: var(--lacivert-900);
  /* 320px'den 210px'e: kapak gibi kısa içerikte ekranın alt yarısı
     bomboş duruyordu ve telefon "yüklenmemiş" gibi görünüyordu.
     Yükseklik artık içeriğe göre büyüyor. */
  min-height: 210px; padding: var(--s-2);
  display: flex; flex-direction: column; gap: 10px;
  color: var(--saf-beyaz);
  background-image: radial-gradient(120% 80% at 85% 0%,
    rgba(123, 79, 255, .3), transparent 60%);
}
/* .18em HARF ARASI 232px'LİK TELEFONA SIĞMIYORDU.
   Kapakta etiket "BIG SOLUTIONS · SAYI 01" ve bu aralıkla iki
   satıra düşüp ikinci satırda yalnız "01" bırakıyordu (tarayıcıda
   görüldü). Aralık monospace kimliğini koruyacak kadar açık
   kalıyor ama satırı taşırmıyor; balance da kırılmayı öksüz bir
   parçaya değil ortaya yakın bir yere taşıyor. */
.dg-tel-etiket{
  margin: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mor-300);
  text-wrap: balance;
}
.dg-tel-baslik{
  margin: 0; font-family: var(--font-baslik); font-size: 16px;
  font-weight: 700; line-height: 1.3;
}
.dg-tel-yazi{
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .74);
}
.dg-tel-adres{
  margin: 0; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--mor-300); word-break: break-all;
}
.dg-tel-dugme{
  margin-top: auto; padding: 10px 14px; border: 0;
  border-radius: 999px; background: var(--mor-700);
  color: var(--saf-beyaz); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; text-align: center;
}
.dg-tel-dugme:hover{ background: var(--mor-500); }
.dg-tel-dugme:focus-visible{ outline: 2px solid var(--mor-300); outline-offset: 2px; }
.dg-telefon-not{
  margin: var(--s-2) 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--metin-sessiz); text-align: center;
}

/* --- SES ÇUBUĞU --- */
.dg-oynatici{
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-3) var(--s-3);
  padding: var(--s-2); border: 1px solid var(--kenar);
  border-radius: var(--r-kart); background: var(--yuzey);
}
.dg-oynat{
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--mor-700); cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dg-oynat:hover{ transform: scale(1.05); box-shadow: 0 8px 24px rgba(123, 79, 255, .4); }
.dg-oynat:focus-visible{ outline: 3px solid var(--mor-300); outline-offset: 3px; }
/* Üçgen → iki çubuk. Simge dosyası yok: kenarlıklar biçim değiştiriyor. */
.dg-oynat-ikon{
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--saf-beyaz);
}
.dg.caliyor .dg-oynat-ikon{
  width: 13px; height: 15px; margin-left: 0; border: 0;
  background: var(--saf-beyaz);
  /* iki çubuk: ortadan boşluk açan iç gölge */
  box-shadow: inset 0 0 0 4px var(--mor-700);
}
.dg-oynat-bilgi{ flex: 1; min-width: 0; }
.dg-oynat-ad{
  margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--metin);
}
.dg-cubuk{
  height: 5px; border-radius: 99px; background: var(--kenar); overflow: hidden;
}
.dg-cubuk span{
  display: block; height: 100%; width: 0;
  background: var(--mor-700); border-radius: 99px;
}
.dg-hiz select{
  padding: 6px 8px; border: 1px solid var(--kenar);
  border-radius: var(--r-buton); background: transparent;
  color: var(--metin); font: inherit; font-size: 13px; cursor: pointer;
}

/* --- OKUNAN CÜMLE ---
   Konuşan Broşür'deki .kb-cumle ile aynı mantık: ses tek parça
   mp3 olduğu için vurgu, sesin ilerleyişinden oransal hesaplanıyor.
   Amaç altyazı değil GÖZE REHBERLİK. */
.dg-cumle{
  border-radius: 3px;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dg-cumle.okunuyor{
  background: rgba(123, 79, 255, .14);
  box-shadow: inset 0 -2px 0 var(--mor-700);
}

/* --- ETKİLEŞİM ALANI (dijital yüzey) --- */
.dg-etkilesim{
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--kenar);
}
.dg-etkilesim-bos,
.dg-etkilesim-yazi{
  margin: 0 0 var(--s-2); font-size: 14.5px; line-height: 1.6;
  color: var(--metin-sessiz); max-width: 60ch;
}

/* --- TEST --- */
.dg-soru{
  margin: 0 0 var(--s-2); padding: 0; border: 0;
}
.dg-soru legend{
  padding: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--metin);
}
.dg.cevrilir .dg-soru{ margin-bottom: var(--s-1); }
.dg.cevrilir .dg-soru legend{ font-size: 13.5px; padding-bottom: 5px; }
.dg.cevrilir .dg-soru label{ font-size: 13px; padding: 5px 10px; }
.dg.cevrilir .dg-etkilesim{ margin-top: var(--s-2); padding-top: var(--s-2); }
.dg.cevrilir .dg-hesap-girdi{ gap: var(--s-1); }
.dg.cevrilir .dg-hesap-sonuc{ margin-top: var(--s-2); gap: var(--s-1); }
.dg.cevrilir .dg-hesap-not{ font-size: 12px; margin-top: var(--s-1); }
/* SEÇENEKLER YIĞIN DEĞİL ÇİP.
   Önce her seçenek tam genişlikte bir satırdı: 4 soru × 3 seçenek
   = 12 satır, tek başına ~530px. Dergi sayfası yüksekliği sabit
   (~667px) olduğu için test sayfası 766px taşıyordu (ölçüldü) ve
   ziyaretçi 4 soruyu görmek için sayfa içinde uzun uzun kaydırmak
   zorunda kalıyordu.

   inline-flex: seçenekler yan yana akıyor ve satır sonunda
   kendiliğinden kırılıyor. HTML'e sarmalayıcı eklemeye gerek
   kalmadı — fieldset'e flex vermek legend'ı bozuyor. */
.dg-soru label{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; margin: 0 4px 4px 0;
  border: 1px solid var(--kenar); border-radius: var(--r-buton);
  font-size: 13.5px; color: var(--metin-govde); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.dg-soru label:hover{ border-color: var(--mor-500); }
.dg-soru input{ margin: 0; accent-color: var(--mor-700); flex: none; }
.dg-soru input:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; }
.dg-soru label:has(input:checked){
  border-color: var(--mor-700); background: var(--vurgu-yumusak);
  color: var(--metin);
}
.dg-test-alt{
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-top: var(--s-2);
}
.dg-baglantili{
  border: 0; background: transparent; padding: 6px 2px;
  font: inherit; font-size: 14px; color: var(--vurgu-metin);
  text-decoration: underline; cursor: pointer;
}
.dg-test-sonuc{
  margin-top: var(--s-2); padding: var(--s-3);
  border: 1px solid var(--mor-300); border-radius: var(--r-kart);
  background: var(--vurgu-yumusak);
}
.dg-sonuc-bant{
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu-kicker);
}
.dg-sonuc-baslik{
  margin: 0 0 8px; font-family: var(--font-baslik);
  font-size: 18px; font-weight: 700; color: var(--metin);
}
.dg-sonuc-yazi{ margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--metin-govde); }
.dg-sonuc-puan{
  margin: 10px 0 0; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--metin-sessiz);
}

/* --- HESAPLAYICI --- */
.dg-hesap-girdi{
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dg-hesap-girdi label{ display: flex; flex-direction: column; gap: 6px; }
.dg-hesap-girdi span{ font-size: 13.5px; font-weight: 600; color: var(--metin); }
.dg-hesap-girdi input{
  padding: 9px 11px; border: 1px solid var(--kenar);
  border-radius: var(--r-buton); background: var(--saf-beyaz);
  color: var(--metin); font: inherit; font-size: 15px;
}
.dg-hesap-girdi input:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 1px; }
.dg-hesap-sonuc{
  display: grid; gap: var(--s-2); margin-top: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dg-olcum{
  padding: var(--s-2); border: 1px solid var(--kenar);
  border-radius: var(--r-kart); background: var(--zemin);
}
.dg-olcum-sayi{
  margin: 0 0 2px; font-family: var(--font-baslik);
  font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--vurgu-kicker);
}
.dg-olcum-ad{ margin: 0; font-size: 13px; line-height: 1.45; color: var(--metin-sessiz); }
.dg-hesap-islem{
  margin: var(--s-2) 0 0; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--metin-sessiz);
}
.dg-hesap-not{
  margin: var(--s-2) 0 0; font-size: 13px; line-height: 1.55;
  color: var(--metin-sessiz); max-width: 62ch;
}

/* --- GEZİNME --- */
.dg-gezinme{
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); padding: 0 var(--s-3) var(--s-2);
}
.dg-ok{
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--kenar); background: transparent;
  color: var(--metin); font-size: 17px; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.dg-ok:hover:not(:disabled){ border-color: var(--mor-700); color: var(--vurgu-kicker); }
.dg-ok:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; }
.dg-ok:disabled{ opacity: .35; cursor: default; }
.dg-noktalar{
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.dg-nokta{
  width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--metin-sessiz);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.dg-nokta:hover{ background: var(--vurgu-yumusak); color: var(--vurgu-kicker); }
.dg-nokta:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 1px; }
.dg-nokta.acik{ background: var(--mor-700); color: var(--saf-beyaz); font-weight: 600; }

.dg-durum{
  margin: 0; padding: 0 var(--s-3) var(--s-3);
  font-size: 13.5px; color: var(--metin-sessiz); min-height: 20px;
}
.dg-durum-uyari{ color: var(--vurgu-kicker); }

.dg-not{
  margin: var(--s-3) 0 0; max-width: 68ch;
  font-size: 13.5px; line-height: 1.6; color: var(--metin-sessiz);
}

/* --- DAR EKRAN ---
   Telefon önizlemesi kâğıdın ALTINA iniyor. Yanda kalsaydı iki
   sütun da okunamayacak kadar daralırdı. */
/* 860px bloğu KALDIRILDI: sahne artık her ölçüde tek sütun, telefon
   da zaten ortalı ve dar — içindeki iki kural gereksiz kalmıştı. */
@media (max-width: 560px){
  .dg-ust{ flex-wrap: wrap; }
  .dg-kod{ flex-direction: column; align-items: flex-start; }
  .dg[data-yuzey="basili"] .dg-sayfa{
    padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 8px);
  }
  .dg[data-yuzey="ekran"] .dg-sayfa{ padding: var(--s-3); }
}

/* HAREKETİ AZALT: perspektifli dönüş tamamen kapanıyor, sayfa
   anında değişiyor. Dönen/kayan büyük yüzeyler baş dönmesi
   tetikleyebiliyor; geçiş burada süs, bilgi taşımıyor. */
@media (prefers-reduced-motion: reduce){
  .dg-sayfa,
  .dg-sayfa.once,
  .dg-sayfa.acik{ transform: none; transition: none; }
  .dg-cumle{ transition: none; }
  .dg-oynat:hover{ transform: none; }
}

/* ============================================================
   İNTERAKTİF DERGİ — EDİTORYAL KATMAN
   ------------------------------------------------------------
   Buraya kadar olan .dg-* kuralları dergiyi ÇALIŞTIRIYOR
   (çevirme, yüzey, ses, test). Aşağıdakiler dergi gibi
   GÖRÜNMESİNİ sağlıyor — ve bu süs değil: görselsiz, tek
   sütunlu, folyosuz bir şey dergi değil, biçimlenmiş bir yazı.
   Demo "dergi gibi" hissettirmezse ürünü zayıf gösteriyor.

   Eklenenler ve neden dergi işareti oldukları:
     kâğıt dokusu + cilt gölgesi → yüzey ekran değil kâğıt
     tam sayfa görsel (dg-tam)   → kapak ve dosya açılışı
     bant görsel + alt yazı      → sayfa görselle açılır
     drop cap (dg-giris)         → dergiyi webden ayıran tek
                                   en güçlü tipografik işaret
     alıntı bloğu (dg-alinti)    → sayfanın nefes aldığı yer
     folyo (sayfa altı künye)    → her dergi sayfasında vardır
   ============================================================ */

/* --- KÂĞIT DOKUSU + CİLT GÖLGESİ ---
   Doku DOSYA DEĞİL, iki katmanlı degrade: ek istek yok, ölçek
   bozulmuyor. Çok hafif (%2,5 opaklık) — görünmesi değil
   HİSSEDİLMESİ gerekiyor; belirgin doku ucuz duruyor.

   Cilt gölgesi (gutter) sayfanın ciltlenen kenarında koyulaşma.
   Gerçek dergide sayfa oraya doğru kıvrıldığı için ışık azalır.
   Tek başına bu gölge, düz beyaz dikdörtgeni "sayfa" yapıyor. */
.dg.cevrilir[data-yuzey="basili"] .dg-sayfa,
.dg.cevrilir[data-yuzey="ekran"] .dg-sayfa{
  background-color: var(--saf-beyaz);
  background-image:
    /* cilt gölgesi — sol kenardan içeri doğru sönen koyuluk */
    linear-gradient(to right, rgba(10,13,36,.10) 0, rgba(10,13,36,.03) 14px, rgba(10,13,36,0) 42px),
    /* kâğıt dokusu — çapraz iki ince tarama */
    repeating-linear-gradient(48deg, rgba(10,13,36,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-42deg, rgba(10,13,36,.02) 0 1px, transparent 1px 4px);
}
/* Sağ sayfada cilt SAĞDA olur: açıklıkta iki sayfa birbirine
   bakar, gölgeleri de birbirine bakmalı. Kütüphane sağ sayfaya
   --right sınıfı vermiyor, o yüzden tek sayfa varsayımıyla
   çift sayfada ikinci öğeyi hedefliyoruz. */
.dg.cevrilir .stf__item:nth-child(even) .dg-sayfa,
.dg.cevrilir .stf__item:nth-child(even).dg-sayfa{
  background-image:
    linear-gradient(to left, rgba(10,13,36,.10) 0, rgba(10,13,36,.03) 14px, rgba(10,13,36,0) 42px),
    repeating-linear-gradient(48deg, rgba(10,13,36,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-42deg, rgba(10,13,36,.02) 0 1px, transparent 1px 4px);
}

/* --- TAM SAYFA GÖRSEL (kapak, dosya açılışı) ---
   Görsel sayfanın tamamını kaplıyor, yazı üstünde duruyor.
   Dolgu SIFIRLANIYOR: tam sayfa demek kenar boşluğu yok demek. */
/* GÖRSEL ZEMİNİ: görsel henüz üretilmemişse ya da yüklenemezse
   sayfa BOZUK değil KOYU görünüyor. Kırık görsel simgesiyle açılan
   bir dergi, demoyu olduğundan kötü gösterir. Zemin marka
   ışımasıyla aynı dili konuşuyor; görsel gelince üstünü örtüyor. */
.dg-tam{
  position: relative; overflow: hidden;
  background-color: var(--lacivert-900);
  background-image: radial-gradient(120% 90% at 78% 12%,
    rgba(123, 79, 255, .40), transparent 62%);
}
.dg.cevrilir[data-yuzey="basili"] .dg-tam,
.dg.cevrilir[data-yuzey="ekran"] .dg-tam{ padding: 0; }
.dg-tam-gorsel{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* Okunabilirlik perdesi: görselin üstündeki yazı her karede
   okunur kalmalı. Görselin kendisi karartılmıyor — yalnız
   yazının olduğu bölgede koyulaşan bir degrade var. */
/* pointer-events: none ŞART.
   Bu perde tüm sayfayı kaplıyor ve DOM'da nokta katmanından SONRA
   geliyor; tıklamaları yutuyordu — etkileşim noktalarına
   basılamıyordu (tarayıcıda yakalandı: ".dg-tam-ic intercepts
   pointer events"). Perde yalnız okunabilirlik için var, tıklanacak
   bir şeyi yok; olayları altına geçiriyor. */
.dg-tam-ic{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: var(--s-4);
  color: var(--saf-beyaz); text-align: center;
  background: linear-gradient(to bottom,
    rgba(10,13,36,.82) 0%, rgba(10,13,36,.55) 45%, rgba(10,13,36,.88) 100%);
}
/* Dosya açılışında yazı ALTTA toplanıyor: görselin üst kısmı
   açık kalsın ki etkileşim noktaları görünsün. */
/* PERDE YAZININ BAŞLADIĞI YERDE KOYULAŞIYOR.
   Önceki rampa 42%'de hâlâ .15 opaklıktaydı; üst etiket
   ("DOSYA · SMART MEDYA") sayfa yüksekliğinin %39'unda duruyor
   ve tam oraya denk gelen parlak bir görsel şeridinin üstünde
   okunmuyordu (tarayıcıda ölçüldü: mor 300 üzerine açık gri
   görsel). Rampa yukarı çekildi; üst %24 hâlâ açık kalıyor ki
   ekran yüzeyindeki etkileşim noktaları görselin üstünde
   görünmeye devam etsin. */
/* ALTA YASLAMA `justify-content` İLE DEĞİL, `margin-top: auto` İLE.
   İkisi yer kalınca aynı görünüyor; yer KALMAYINCA ayrışıyorlar ve
   fark kritik:

     justify-content: flex-end  → içerik kabın ÜSTÜNDEN taşıyor.
       Üstten taşma scrollHeight'a yansımıyor (scrollHeight yalnız
       alta doğru büyür), dolayısıyla sayfa küçültme sistemi
       (sayfalariSigdir / data-kucult) taşmayı GÖREMİYOR ve devreye
       girmiyor. Ölçüldü (1000×1100, 3. sayfa): başlık sayfanın
       29px yukarısında başlıyor, "Sayfa" kelimesi kırpılıyor,
       scrollHeight ise clientHeight'a eşit — yani her şey yolunda
       görünüyor.

     margin-top: auto → yer varken yine alta yaslıyor, yer yokken
       içerik yukarıdan başlayıp ALTA taşıyor. Bu taşma ölçülebilir
       olduğu için küçültme sistemi görüp içeriği sığdırıyor. */
.dg-tam-alt{
  justify-content: flex-start; text-align: left;
  background: linear-gradient(to bottom,
    rgba(10,13,36,0) 0%, rgba(10,13,36,.18) 24%,
    rgba(10,13,36,.74) 44%, rgba(10,13,36,.94) 66%);
}
.dg-tam-alt > :first-child{ margin-top: auto; }
.dg-tam-ic .dg-baslik,
.dg-tam-ic .dg-kapak-baslik{ color: var(--saf-beyaz); }
.dg-tam-ic p[data-metin]{ color: rgba(255,255,255,.86); max-width: 46ch; }
.dg-tam-ic .dg-ust-etiket{ color: var(--mor-300); }

/* --- KAPAK KÜNYESİ --- */
/* Renk AÇIKÇA yazılı, miras bırakılmıyor: bu bir <p> ve bölüm
   genelindeki paragraf kuralı gövde rengini (soğuk gri) basıyordu —
   künye koyu zeminde rgb(88,92,112) çıkıp neredeyse görünmüyordu
   (tarayıcıda ölçüldü). Mirasla gelen renk, doğrudan yazılmış her
   kurala yenilir. */
.dg-mastead{
  margin: 0 0 4px; font-family: var(--font-baslik);
  font-size: clamp(26px, 4.4vw, 40px); font-weight: 800;
  letter-spacing: .02em; line-height: 1;
  color: var(--saf-beyaz);
}
.dg-mastead i{ font-style: normal; color: var(--mor-500); }
.dg-kapak-sayi{
  margin: 0 0 var(--s-3); font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .24em; color: var(--mor-300);
}
.dg-kapak-baslik{
  margin: 0 auto var(--s-2); max-width: 18ch;
  font-family: var(--font-baslik); font-weight: 700;
  font-size: clamp(21px, 3vw, 30px); line-height: 1.16;
}
.dg-kapak-alt{
  margin: 0 auto; max-width: 38ch; font-size: 13.5px;
  line-height: 1.6; color: rgba(255,255,255,.8);
}
/* Kapak satırları: gerçek dergi kapağındaki içindekiler şeridi. */
.dg-kapak-satirlar{
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.dg-kapak-satirlar li{
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

/* --- BANT GÖRSEL + ALT YAZI --- */
/* Yedek zemin FIGURE'de, img'de değil: görsel gelmezse img
   gizleniyor (bk. .dg-gorsel-yok) ve zemin onun üstünde olsaydı
   birlikte kaybolurdu. Yükseklik de burada — şerit her hâlükârda
   yerini koruyor, sayfa zıplamıyor. */
.dg-bant{
  margin: 0 0 var(--s-2);
  /* min-height: görsel gizlense de şerit yerini koruyor, sayfa
     zıplamıyor. Zemin BANT YÜKSEKLİĞİYLE SINIRLI (background-size)
     — figure'ün tamamını kaplasaydı alt yazı da koyu zeminin
     üstünde kalır, okunmazdı. */
  min-height: 96px;
  background-image:
    radial-gradient(120% 140% at 82% 0%, rgba(123, 79, 255, .38), transparent 60%),
    linear-gradient(var(--lacivert-900), var(--lacivert-900));
  background-size: 100% 96px, 100% 96px;
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top left;
  border-radius: 3px;
}
.dg-bant img{
  display: block; width: 100%; height: 96px;
  object-fit: cover; border-radius: 3px;
}

/* Yüklenemeyen görsel GİZLENİYOR AMA YERİ KORUNUYOR.
   visibility, display DEĞİL — ve fark burada önemli:
     display:none → görsel akıştan çıkıyor, alt yazı 150px yukarı
                    kayıp koyu bandın üstüne biniyordu (görüldü).
     visibility   → kutu yerinde kalıyor, alt yazı bandın altında
                    duruyor, tarayıcı da kırık görsel simgesini
                    çizmiyor (öğe hiç boyanmıyor).
   src'yi düşürmek tek başına yetmemişti; Chrome yine küçük bir
   yer tutucu çiziyordu. */
.dg-gorsel-yok{ visibility: hidden; }
.dg-bant figcaption{
  margin-top: 6px; padding-left: 8px;
  border-left: 2px solid var(--mor-500);
  font-size: 11.5px; line-height: 1.4; color: var(--metin-sessiz);
}

/* --- DROP CAP ---
   İlk harf üç satır boyunda ve mor. Dergi sayfasını web
   yazısından ayıran en hızlı okunan işaret. initial-letter
   desteği düzensiz olduğu için float ile kuruluyor. */
.dg-giris::first-letter{
  float: left; margin: 4px 8px 0 0;
  font-family: var(--font-baslik); font-weight: 800;
  font-size: 3.1em; line-height: .82;
  color: var(--vurgu);
}

/* --- ALINTI BLOĞU --- */
/* Kenar boşlukları dergi sayfasının SABİT yüksekliğine göre dar
   tutuldu: web ölçüsünde (s-3 alt ve üst) alıntı tek başına ~50px
   fazladan yer kaplıyor ve sayfayı taşırıyordu. */
.dg-alinti{
  margin: var(--s-2) 0; padding: 0 0 0 var(--s-2);
  border-left: 3px solid var(--mor-500);
  font-family: var(--font-baslik); font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.4;
  color: var(--metin); max-width: 34ch;
}

/* --- FOLYO (sayfa altı künye) ---
   Her dergi sayfasının altında sayı adı ve sayfa numarası olur.
   JS'e gerek yok: sayfa numarası data-sayfa'dan okunuyor. */
/* Folyo AKIŞIN İÇİNDE, mutlak konumda DEĞİL.
   Mutlakken sayfa kaydırılınca metnin üstüne biniyordu
   (tarayıcıda görüldü): mutlak konum kaydırma kutusunun
   dolgu kenarına göre hizalanıyor ve içerikle birlikte kayıyor.

   Sayfa esnek sütun; folyo margin-top:auto ile en alta
   itiliyor. İçerik kısaysa sayfanın dibinde duruyor, uzunsa
   metnin ardından geliyor — ikisinde de üstüne binmiyor. */
.dg.cevrilir .dg-sayfa{
  position: relative;
  display: flex; flex-direction: column;
}
/* Çocuklar sıkışmasın: esnek kapta varsayılan flex-shrink:1
   bant görselini ve kod bloğunu eziyordu. */
.dg.cevrilir .dg-sayfa > *{ flex: 0 0 auto; }
.dg.cevrilir .dg-sayfa::after{
  content: "BIG SOLUTIONS · " attr(data-sayfa);
  margin-top: auto; padding-top: var(--s-2);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; color: var(--metin-sessiz);
  opacity: .6; pointer-events: none;
}
/* Tam sayfa görselde folyo beyaz olmalı, yoksa kayboluyor. */
.dg.cevrilir .dg-tam::after{ color: rgba(255,255,255,.7); }

/* ============================================================
   ETKİLEŞİM NOKTALARI + SAYFA İÇİ PENCERELER
   ------------------------------------------------------------
   Ürünün "ekranda ne oluyor" tarafı. Nokta görselin üstünde
   duruyor, dokununca sayfanın İÇİNDE pencere açılıyor —
   yeni sekme yok, sayfa değişmiyor, dergi kapanmıyor.

   Noktalar yalnız EKRAN yüzeyinde: kâğıdın dokunmatik noktası
   olmaz, kâğıdın kare kodu olur.
   ============================================================ */
/* TAM SAYFADA KOD BLOĞU.
   .dg-tam'ın dolgusu sıfır ve çocukları mutlak konumlu; kod bloğu
   ise akışta kalıyordu ve sayfanın en üstüne kenar boşluksuz
   yapışıp tam sayfa tasarımını bozuyordu (tarayıcıda görüldü).
   Burada görselin üstünde açık bir kart olarak duruyor —
   gerçek dergide de kod, görselin üzerine basılmış beyaz bir
   kutu içinde olur. */
.dg-tam .dg-kod{
  position: absolute; z-index: 4;
  left: var(--s-3); right: var(--s-3); top: var(--s-3);
  margin: 0; padding: var(--s-2);
  border: 0; border-radius: var(--r-kart);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 40px -24px rgba(10, 13, 36, .7);
}
.dg-tam .dg-kod .dg-kod-alt{ margin-bottom: 0; }

/* z-index metin perdesinin ÜSTÜNDE (3 > 2): noktalar perdenin
   altında kalırsa görünür ama tıklanamaz olurlar. */
.dg-nokta-katman{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dg[data-yuzey="basili"] .dg-nokta-katman{ display: none; }

.dg-hotspot{
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border: 0;
  border-radius: 999px; cursor: pointer; pointer-events: auto;
  background: rgba(10, 13, 36, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--saf-beyaz); font: inherit; font-size: 12px; font-weight: 600;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.dg-hotspot:hover{ background: rgba(123, 79, 255, .85); transform: translate(-50%, -50%) scale(1.04); }
.dg-hotspot:focus-visible{ outline: 3px solid var(--mor-300); outline-offset: 3px; }
.dg-hotspot-ad{ white-space: nowrap; }
.dg-hotspot-nokta{
  position: relative; flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--mor-500); box-shadow: 0 0 0 3px rgba(123, 79, 255, .28);
}
/* Nabız: noktanın orada OLDUĞUNU söyleyen tek şey. Durağan bir
   nokta görselin parçası sanılıp hiç dokunulmuyor. */
.dg-hotspot-nokta::after{
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--mor-500);
  animation: dgNabiz 2.4s ease-out infinite;
}
@keyframes dgNabiz{
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.dg-ipucu{
  margin: var(--s-1) 0 0; font-size: 12px;
  color: rgba(255,255,255,.7); font-style: italic;
}
.dg[data-yuzey="basili"] .dg-ipucu{ display: none; }

/* --- PENCERE ---
   [hidden] KURALI ŞART VE İLK SIRADA: aşağıdaki display:flex,
   tarayıcının hidden için verdiği display:none'ı eziyor —
   pencereler sayfa açılır açılmaz AÇIK geliyordu (tarayıcıda
   görüldü: 3. sayfa video penceresiyle açılıyordu).
   hidden bir öznitelik, sınıf değil; CSS'te karşılığını açıkça
   yazmazsan display kuralın onu sessizce iptal ediyor. */
.dg-pencere[hidden]{ display: none; }
.dg-pencere{
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3);
  background: rgba(10, 13, 36, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: dgPencereAc .28s var(--ease);
}
@keyframes dgPencereAc{ from { opacity: 0; } to { opacity: 1; } }
.dg-pencere-ic{
  width: 100%; max-height: 100%; overflow-y: auto;
  padding: var(--s-3); border-radius: var(--r-kart);
  background: var(--saf-beyaz);
  box-shadow: 0 30px 60px -30px rgba(10, 13, 36, .8);
}
.dg-pencere-etiket{
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--vurgu-metin);
}
.dg-pencere-baslik{
  margin: 0 0 8px; font-family: var(--font-baslik);
  font-size: 17px; font-weight: 700; color: var(--metin);
}
.dg-pencere-ic p{
  margin: 0 0 var(--s-2); font-size: 13.5px; line-height: 1.6;
  color: var(--metin-govde);
}
.dg-pencere-not{ font-size: 12.5px !important; color: var(--metin-sessiz) !important; }
.dg-pencere-kapat{
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.16); color: var(--saf-beyaz);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.dg-pencere-kapat:hover{ background: rgba(255,255,255,.3); }
.dg-pencere-kapat:focus-visible{ outline: 2px solid var(--mor-300); outline-offset: 2px; }

/* --- VİDEO YER TUTUCU --- */
.dg-video-yuva{
  aspect-ratio: 16 / 9; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: var(--s-2);
  border: 2px dashed var(--kenar); border-radius: var(--r-kart);
  background: var(--zemin);
}
.dg-video-ikon{
  width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--mor-300);
}
.dg-video-yazi{
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; color: var(--metin-sessiz);
}

/* ============================================================
   ÜÇ BOYUTLU KATMAN GÖRÜNÜMÜ (.dg-3b)
   ------------------------------------------------------------
   GERÇEK 3B: preserve-3d ile üç düzlem Z ekseninde ayrı
   derinliklerde duruyor ve sürüklenince birlikte dönüyorlar.
   WebGL değil — üç düzlem için 162 KB'lık motor taşımak
   gerekmiyordu (Three.js ölçüldü).

   Anlatı: KÂĞIT → KOD → EKRAN. Aynı içeriğin üç katmanı;
   döndürünce üst üste değil ARKA ARKAYA durdukları görülüyor.
   ============================================================ */
.dg-3b{
  perspective: 900px;
  display: grid; place-items: center;
  min-height: 190px; margin: var(--s-2) 0;
  cursor: grab; touch-action: none;
}
.dg-3b:active{ cursor: grabbing; }
.dg-3b-sahne{
  position: relative; width: 150px; height: 106px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -18deg)) rotateY(var(--ry, -28deg));
  transition: transform .12s linear;
}
/* --- ÜÇ BOYUTLU LOGO ---
   Derinlik KOPYAYLA kuruluyor: aynı kilit art arda translateZ ile
   diziliyor. Öndeki kopya parlak, arkadakiler koyulaşıyor —
   çıkarılmış (extrude) harf etkisi böyle doğuyor. Model dosyası,
   WebGL ya da kütüphane yok; preserve-3d yetiyor.

   Neden kopya sayısı 9: daha azında katmanlar arasında boşluk
   görünüyor ve harf "dilimlenmiş" duruyor; daha fazlası aynı
   görüntüyü veriyor ama boşuna düğüm ekliyor. */
.dg-3b-kilit{
  position: relative;
  transform-style: preserve-3d;
  font-family: var(--font-baslik);
  font-size: 46px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1;
}
.dg-3b-kilit i{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; white-space: nowrap;
  /* --z: 0 en ön, 8 en arka */
  transform: translateZ(calc(var(--z) * -2.4px));
  color: hsl(252 100% calc(72% - var(--z) * 7%));
}
/* En öndeki kopya beyaz ve keskin; arkasındakiler gövdeyi
   oluşturuyor. İlk kopya akışta duruyor ki kap ölçüsünü alsın. */
.dg-3b-kilit i:first-child{
  position: relative; color: var(--saf-beyaz);
  text-shadow: 0 0 18px rgba(123, 79, 255, .55);
}
.dg-3b-kilit u{
  text-decoration: none; color: var(--mor-500);
  margin: 0 .06em;
}
.dg-3b-etiket{
  position: absolute; left: 50%; bottom: -18px;
  transform: translateX(-50%) translateZ(6px);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .34em; white-space: nowrap;
  /* Pencere zemini BEYAZ: Mor 300 burada neredeyse görünmüyordu
     (ekran görüntüsünde ölçüldü). Kılavuz zaten açık zeminde
     küçük metin için Mor 900 diyor. */
  color: var(--mor-900);
}
/* Sahne biraz daha büyük ve nefes alsın: pencere geniş, logo
   ortada küçük kalıyordu. */
.dg-3b{ min-height: 210px; }
.dg-3b-kilit{ font-size: 52px; }

@media (prefers-reduced-motion: reduce){
  .dg-hotspot-nokta::after{ animation: none; }
  .dg-pencere{ animation: none; }
  .dg-3b-sahne{ transition: none; }
}

/* Dar ekranda bant görsel ve nokta etiketleri küçülüyor. */
@media (max-width: 560px){
  .dg-bant img{ height: 110px; }
  .dg-hotspot{ font-size: 11px; padding: 4px 9px 4px 5px; }
  .dg-hotspot-nokta{ width: 12px; height: 12px; }
  .dg-pencere-ic{ padding: var(--s-2); }
}

/* ============================================================
   DERGİ — TİPOGRAFİ VE KOMPOZİSYON PASI
   ------------------------------------------------------------
   Buraya kadarki kurallar dergiyi kuruyor. Bu blok onu DERGİ
   GİBİ OKUTUYOR. Fark tek tek küçük, toplamı büyük:

   BAŞLIK KARŞITLIĞI. Web yazısında başlık gövdeden ~1.5 kat
   büyüktür; dergide 2.5-3 kat olur ve harf aralığı SIKIŞIR.
   Karşıtlık düşükse sayfa "blog" gibi okunuyor — demonun
   çökme noktası tam burası.

   SATIR UZUNLUĞU. Dergi sütunu web paragrafından dar: 45-55
   karakter. Dar ölçü gözü satır sonunda yormuyor ve sayfaya
   düzen hissi veriyor.

   DİKEY RİTİM. Boşluklar keyfi değil, tek bir ölçünün katları.
   Göz bunu fark etmiyor ama düzensizliği fark ediyor.
   ============================================================ */

/* --- ÜST ETİKET: yanında kural çizgisi ---
   Dergide bölüm etiketi tek başına durmaz; yanında ince bir
   çizgiyle sayfanın üst kenarını kurar. */
.dg.cevrilir .dg-ust-etiket{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 10px; letter-spacing: .2em;
}
.dg.cevrilir .dg-ust-etiket::after{
  content: ""; flex: 1; height: 1px;
  background: currentColor; opacity: .32;
}

/* --- BAŞLIK: büyük, sıkı, negatif aralıklı --- */
.dg.cevrilir .dg-baslik{
  font-size: clamp(23px, 2.7vw, 30px);
  line-height: 1.1;
  letter-spacing: -.022em;      /* büyük puntoda harfler açık durur */
  font-weight: 800;
  margin-bottom: 12px;
  text-wrap: balance;           /* son satırda tek kelime kalmasın */
}

/* --- GÖVDE: dar ölçü, dergi ritmi --- */
.dg.cevrilir .dg-sayfa p[data-metin]{
  font-size: 14px; line-height: 1.58;
  max-width: 52ch;              /* dergi sütunu; webden dar */
  margin-bottom: 11px;
  /* Satır sonu tirelemesi: dar ölçüde kelime araları çirkin
     açılıyor, tireleme onu düzeltiyor. */
  hyphens: auto; -webkit-hyphens: auto;
}
/* Paragraflar arası boşluk YERİNE girinti — dergi geleneği.
   İlk paragraf girintisiz (drop cap zaten orada). */
.dg.cevrilir .dg-sayfa p[data-metin] + p[data-metin]{
  margin-top: -3px; text-indent: 1.1em;
}

/* --- DROP CAP: daha büyük, satıra oturmuş --- */
.dg.cevrilir .dg-giris::first-letter{
  font-size: 3.4em; line-height: .78; margin: 5px 9px 0 0;
  font-weight: 800;
}
/* Drop cap'in olduğu paragrafta tireleme kapalı: ilk satır
   kısa olduğu için tirelenince kırık görünüyor. */
.dg.cevrilir .dg-giris{ hyphens: none; -webkit-hyphens: none; text-indent: 0; }

/* --- ALINTI: tırnaksız, geniş, sayfanın nefesi --- */
.dg.cevrilir .dg-alinti{
  font-size: clamp(15px, 1.9vw, 18px); line-height: 1.32;
  letter-spacing: -.012em; font-weight: 700;
  border-left-width: 2px; padding-left: 14px;
  max-width: 30ch;
}

/* ============================================================
   KAPAK — EDİTORYAL KOMPOZİSYON
   ------------------------------------------------------------
   Ortalanmış kapak "sunum slaytı" gibi duruyordu. Gerçek dergi
   kapağı asimetriktir: künye üstte, kapak satırları ALTTA ve
   SOLA yaslı, aralarında kural çizgileri. Göz yukarıdan aşağı
   ve soldan sağa akıyor.
   ============================================================ */
.dg.cevrilir .dg-tam-ic:has(.dg-mastead){
  justify-content: space-between; text-align: left;
  padding: var(--s-3);
}
/* ÖLÇÜ PENCEREDEN DEĞİL SAYFADAN ALINIYOR.
   Önce `clamp(30px, 5.2vw, 46px)` yazıyordu ve marka adı kapakta
   SAĞDAN KESİLİYORDU. Sebep: vw pencere genişliği, masthead ise
   ~282px'lik bir dergi sayfasının içinde duruyor — ikisi
   birbiriyle ilgisiz. Geniş ekranda yazı 46px'e çıkıyor, sayfa
   ise büyümüyordu. Yayında ölçüldü: kutu 233px, içerik 337px,
   yani 104px taşma — "BIG·SOLUTI…" görünüyordu.

   --dg-olcek zaten sayfa yüksekliğinden türeyen ve derginin her
   yerinde kullanılan orantı. cqw ya da yeni bir değişken icat
   etmek yerine onu kullanıyoruz.

   34px üst sınır ölçümle bulundu: "BIG·SOLUTIONS" 13 karakter ve
   bu yazı tipinde 282px'lik sayfaya sığan en büyük değer.
   min() ikinci koruma: --dg-olcek 1'e yakınken bile taşmasın. */
.dg.cevrilir .dg-mastead{
  font-size: min(34px, calc(34px * var(--dg-olcek)));
  letter-spacing: -.03em; line-height: .92;
  margin-bottom: 2px;
  /* Kesilmektense kırılsın: dar sayfada ikinci satıra insin. */
  overflow-wrap: anywhere;
}
.dg.cevrilir .dg-kapak-sayi{
  margin: 0; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: 9.5px; letter-spacing: .26em;
}
/* Kapak başlığı ve alt metni ALTA toplanıyor: üstteki künyeyle
   arasında boşluk kalıyor, kapak görseli nefes alıyor. */
.dg.cevrilir .dg-kapak-baslik{
  margin: auto 0 10px; max-width: 15ch; text-align: left;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.04;
  letter-spacing: -.028em; font-weight: 800;
}
.dg.cevrilir .dg-kapak-alt{
  margin: 0 0 14px; max-width: 34ch; text-align: left;
  font-size: 12.5px; line-height: 1.5;
}
.dg.cevrilir .dg-kapak-satirlar{
  justify-content: flex-start; margin-top: 0;
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22);
}

/* --- DOSYA AÇILIŞINDA BÜYÜK SAYI ---
   Dergilerde dosya sayfaları büyük bir numarayla açılır. Sayfa
   numarası zaten data-sayfa'da; ayrı bir işaretleme gerekmiyor. */
/* Sayı MAKALEDE duruyor (data-sayfa orada), iç sarmalayıcıda
   değil: attr() yalnız kendi öğesinin özniteliğini okuyabiliyor.
   Kapak hariç — kapakta dosya numarası olmaz. */
.dg.cevrilir .dg-tam.dg-etkilesimli::before{
  content: attr(data-sayfa);
  /* SAĞ ÜSTTE, sol üstte DEĞİL: sol üstü basılı yüzeyde kare kod
     kartı kaplıyor ve numara tamamen altında kalıyordu (görüldü).
     Sağ üst her iki yüzeyde de boş. */
  position: absolute; top: 10px; right: 16px; z-index: 2;
  font-family: var(--font-baslik); font-weight: 800;
  font-size: 64px; line-height: 1; color: rgba(255, 255, 255, .18);
  letter-spacing: -.04em; pointer-events: none;
}
/* Basılı yüzeyde kod kartı üstte durduğu için numara onun ALTINA
   iniyor; iki öğe üst üste binmesin. */
.dg.cevrilir[data-yuzey="basili"] .dg-tam.dg-etkilesimli::before{
  top: auto; bottom: 130px; color: rgba(255, 255, 255, .22);
}

/* --- GÖRSEL: derinlik ---
   Düz yapıştırılmış görsel ucuz duruyor. İnce bir iç gölge ve
   hafif koyulaştırma, görseli sayfaya BASILMIŞ gibi gösteriyor. */
.dg.cevrilir .dg-bant{
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(10, 13, 36, .08);
}
.dg.cevrilir .dg-bant::after{
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(to bottom, rgba(10,13,36,.06), transparent 40%);
  pointer-events: none;
}
.dg.cevrilir .dg-bant figcaption{
  margin-top: 7px; font-size: 10.5px; letter-spacing: .01em;
}

/* --- KOD BLOĞU: kâğıda basılmış kutu hissi --- */
.dg.cevrilir .dg-kod{
  border-top-style: solid; border-top-color: var(--kenar);
}
.dg.cevrilir .dg-kod-cagri{
  font-size: 15px; letter-spacing: -.015em; font-weight: 800;
}

@media (prefers-reduced-motion: reduce){
  .dg.cevrilir .dg-bant::after{ display: none; }
}

/* --- PENCERE AÇAN ÇAĞRI (.dg-ac) ---
   Test ve hesaplayıcı artık sayfanın içinde değil, pencerede
   (bk. demo-interaktif-dergi.html'deki not). Sayfada onların
   yerine duran şey bu düğme: ne olduğunu söylüyor, ne kadar
   süreceğini söylüyor ve sayfayı uzatmıyor.

   Kâğıttaki kare kodun ekrandaki karşılığı bu — aynı vaat, aynı
   iki satır, farklı yüzey. */
.dg-ac{
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 14px; border: 1px solid var(--mor-300);
  border-radius: var(--r-kart);
  background: var(--vurgu-yumusak); font: inherit;
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              transform .2s var(--ease);
}
.dg-ac:hover{
  border-color: var(--mor-700); background: var(--saf-beyaz);
  transform: translateY(-1px);
}
.dg-ac:focus-visible{ outline: 3px solid var(--mor-300); outline-offset: 2px; }
.dg-ac-ad{
  font-family: var(--font-baslik); font-size: 14.5px;
  font-weight: 700; color: var(--vurgu-kicker); letter-spacing: -.01em;
}
.dg-ac-alt{ font-size: 12.5px; color: var(--metin-sessiz); }

/* Pencere içeriği uzun olabilir (4 soruluk test): pencere kendi
   içinde kayıyor, SAYFA değil. Kaydırma burada kabul edilebilir
   çünkü perde zaten bağlamı koruyor — okur derginin neresinde
   olduğunu kaybetmiyor. */
.dg-pencere-ic{ max-height: 100%; overflow-y: auto; }
.dg.cevrilir .dg-pencere{ padding: var(--s-2); }

/* --- DERGİ SAYFA BAŞI (kompakt) ---
   Normal sayfa başı (.sayfa-bas) ~500px yer kaplıyor ve bu
   sayfada dergiyi ekranın dışına itiyordu (ölçüldü: bileşenin
   alt kenarı 1421px). Demo sayfasında kahraman ürün olmalı,
   metin değil: başlık tek satıra iniyor, uzun anlatım derginin
   altına taşındı.

   Bölüm dolgusu da kırpıldı — .bolum'un varsayılan üst/alt
   boşluğu burada iki bölüm arasında 200px'e yakın boşluk
   üretiyordu. */
.dg-bas{ padding-top: var(--s-4); padding-bottom: 0; }

/* ÇAKILI HÂLDE ORTALAMA DEĞİL, NAVIN ALTINDAN BAŞLAMA.
   .katman-alt bölümü 100lvh yapıp içeriği DİKEYDE ORTALIYOR.
   Ortalama 900px'lik kutuya göre yapılıyor ama kutunun üst 89px'i
   sabit gezinme çubuğunun altında kalıyor — yani kullanılabilir
   alan 811px. Ekran yüzeyinde (ses çubuğu açıkken) içerik 808px
   olunca ortalama onu 121–929 aralığına koyuyordu: alt kenar
   29px taşıyordu (ölçüldü). Üstten başlatınca 89–897 oluyor ve
   iki yüzeyde de sığıyor.

   Aynı çözüm konuşan broşürün .kb-tek-ekran bölümünde de var;
   sebebi de aynı. */
@media (min-width: 901px){
  .katmanli > .dg-bas{ justify-content: flex-start; padding-top: 89px; }
}

/* KISA VE GENİŞ EKRANDA (TABLET YATAY) DERGİYE YER AÇ.
   Bütçe ölçüldü, 1180×820'de:
     pencere 820 − bölüm dolgusu 89 − başlık bloğu 71
             − derginin kendi kromu 159 = kitaba 391px
   Yani ekranın %39'unu çerçeve yiyor ve dergi minicik kalıyordu
   (kullanıcının "sayfalarımız küçülmüş" dediği şey). Masaüstünde
   900px+ yükseklikte aynı çerçeve sorun etmiyor.

   Üst dolgu 89 → 65: 89 eski bir ölçümden geliyordu, gezinme
   çubuğunun GERÇEK yüksekliği 65px (bu oturumda iki kez
   doğrulandı). Aradaki 24px boşuna duruyordu. Başlık bloğu da
   kısılıyor — kısa ekranda başlık kitaptan fazla yer istemesin.

   900px YÜKSEKLİK SINIRI: masaüstü (1440×900) bu kuralın dışında
   kalıyor, oradaki denge bozulmuyor. */
@media (min-width: 901px) and (max-height: 899px){
  .katmanli > .dg-bas{ padding-top: 65px; }
  .dg-bas .bolum-etiket{ margin-bottom: var(--s-1); }
  .dg-bas .bolum-baslik{ font-size: clamp(22px, 2.4vw, 30px); margin-bottom: var(--s-2); }
}

/* GENİŞ AMA KISA EKRAN: dergi + kromu 900px'in altına sığmıyor.
   Sabitlenme yalnız genişliğe bakıyor (>900px); orada çakılan
   bölümün altı erişilemez hâle gelirdi. Kısa pencerede ilk halka
   normal akıyor, üstteki paneller kaymaya devam ediyor. */
@media (max-height: 819px){
  .katmanli > .dg-bas{ position: static; min-height: 0; display: block; padding-top: var(--s-4); }
  /* Payı da kaldır — konuşan broşürdeki hatanın aynısı.
     Panel static olunca arkasındaki 70lvh'lik duraksama payı açığa
     çıkıp içi boş bir bölüm gibi görünüyor. Komşu seçici yalnız bu
     panelin payını kapsıyor; sonraki katmanlar yapışkan kalmaya ve
     kendi paylarını kullanmaya devam ediyor. */
  .katmanli > .dg-bas + .katman-duraksama{ display: none; }
}
/* BAŞLIK ORTAK SINIFI KULLANIYOR, PUNTOSU BURADA KISILIYOR.
   .sayfa-h1 öntanımlı olarak clamp(28px, 5vw, --olcu-h1); bu
   sayfada bölüm tek ekrana sığmak zorunda ve başlığa verilen her
   piksel doğrudan kitaptan gidiyor (kitabın yüksekliği kalan
   boşluktan türüyor, bk. sayfaYuksekligi, media.js). Bu yüzden
   punto ve max-width bu bölümde daraltılıyor — sınıf ortak
   kalıyor, yalnız ölçü sayfaya uyduruluyor. */
.dg-bas .sayfa-h1{
  margin: 6px 0 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  max-width: 38ch;
}
.dg-bas .sayfa-h1 em{ font-style: normal; color: var(--vurgu-metin); }
/* Derginin kendi bölümü de üstten nefes almasın: başlıkla
   arasında ikinci bir boşluk yığılıyordu. */
.dg-bas + .bolum{ padding-top: var(--s-3); }

/* ============================================================
   SAYFAYLA ÖLÇEKLENEN TİPOGRAFİ  (--dg-olcek)
   ------------------------------------------------------------
   Sayfa yüksekliği ekrandan türüyor (bk. sayfaYuksekligi,
   media.js). Sabit punto bu yüzden çalışmıyor: aynı metin
   640px'lik sayfada sığarken 524px'lik dizüstü sayfasında
   264px taşıyordu.

   Oran JS'ten geliyor (640'a göre) ve YALNIZ dergi içinde
   geçerli. Yazı tipi ölçüleri kadar SABİT KUTULAR da
   ölçekleniyor — bant görseli ve kare kod ölçeklenmezse metin
   küçülür ama sayfa yine taşar.

   Yedek değer 1: kütüphane kurulmadıysa (hareket azaltma) sayfa
   yüksekliği sabit değil, o zaman ölçeklemeye gerek yok. */
.dg{ --dg-olcek: 1; }

.dg.cevrilir .dg-sayfa p[data-metin]{
  font-size: calc(14px * var(--dg-olcek));
  line-height: 1.55;
  margin-bottom: calc(11px * var(--dg-olcek));
}
.dg.cevrilir .dg-baslik{
  font-size: calc(clamp(23px, 2.7vw, 30px) * var(--dg-olcek));
  margin-bottom: calc(12px * var(--dg-olcek));
}
.dg.cevrilir .dg-ust-etiket{ font-size: calc(10px * var(--dg-olcek)); }
.dg.cevrilir .dg-alinti{
  font-size: calc(clamp(15px, 1.9vw, 18px) * var(--dg-olcek));
  margin: calc(var(--s-2) * var(--dg-olcek)) 0;
}
.dg.cevrilir .dg-bant{
  min-height: calc(96px * var(--dg-olcek));
  background-size: 100% calc(96px * var(--dg-olcek)), 100% calc(96px * var(--dg-olcek));
  margin-bottom: calc(var(--s-2) * var(--dg-olcek));
}
.dg.cevrilir .dg-bant img{ height: calc(96px * var(--dg-olcek)); }
.dg.cevrilir .dg-bant figcaption{ font-size: calc(10.5px * var(--dg-olcek)); margin-top: 5px; }
.dg.cevrilir .dg-kod-gorsel,
.dg.cevrilir .dg-kod-yer{
  width: calc(96px * var(--dg-olcek)); height: calc(96px * var(--dg-olcek));
}
.dg.cevrilir .dg-kod{
  margin-top: calc(var(--s-2) * var(--dg-olcek));
  padding-top: calc(var(--s-2) * var(--dg-olcek));
}
.dg.cevrilir .dg-kod-cagri{ font-size: calc(15px * var(--dg-olcek)); }
.dg.cevrilir .dg-kod-alt{ font-size: calc(12.5px * var(--dg-olcek)); }
.dg.cevrilir .dg-kod-adres{ font-size: calc(11.5px * var(--dg-olcek)); }
.dg.cevrilir .dg-ac{ padding: calc(11px * var(--dg-olcek)) 14px; }
.dg.cevrilir .dg-ac-ad{ font-size: calc(14.5px * var(--dg-olcek)); }
.dg.cevrilir .dg-ac-alt{ font-size: calc(12.5px * var(--dg-olcek)); }
.dg.cevrilir .dg-giris::first-letter{ font-size: calc(3.4em * var(--dg-olcek)); }

/* --- BASILI YÜZEYDE KOD BLOĞU DAHA SIKI ---
   Basılı yüzey, ekran yüzeyinden fazladan bir şey taşıyor: kare
   kod bloğu. Ölçüldü — sayfa 2 ekran yüzeyinde tam sığarken
   basılıda 77px taşıyordu ve fark tam olarak bu blok.

   Kodu küçültmek taranabilirliği bozmuyor: ekranda gösterim
   amaçlı duruyor, basılı dergide ölçüsü baskı ölçeğine göre
   yeniden veriliyor. */
.dg.cevrilir[data-yuzey="basili"] .dg-kod-gorsel,
.dg.cevrilir[data-yuzey="basili"] .dg-kod-yer{
  width: calc(80px * var(--dg-olcek)); height: calc(80px * var(--dg-olcek));
}
.dg.cevrilir[data-yuzey="basili"] .dg-kod{
  gap: var(--s-2);
  margin-top: calc(10px * var(--dg-olcek));
  padding-top: calc(10px * var(--dg-olcek));
}
.dg.cevrilir[data-yuzey="basili"] .dg-kod-alt{ margin-bottom: 3px; }
/* Bant alt yazısı basılı yüzeyde gizleniyor: kod bloğuna yer
   açmak için verilen tek taviz. Görselin ne olduğu ekran
   yüzeyinde zaten yazıyor. */
.dg.cevrilir[data-yuzey="basili"] .dg-bant figcaption{ display: none; }

/* --- ASİSTAN PENCERESİ ---
   Sohbet paneli diğer pencerelerden geniş: konuşma balonları dar
   kutuda satır satır kırılıp okunmaz oluyor. */
.dg-pencere-genis{ max-width: 560px; }
.dg-sohbet-yuva{
  min-height: 300px; max-height: 46vh;
  border-radius: var(--r-kart); overflow: hidden;
  background: var(--zemin);
}
/* Widget kendi panelini buraya taşıyor (media.js, biggieYuvaya).
   Panel kendi ölçüsünü dayatıyor; yuvayı doldursun diye
   sıfırlanıyor — yoksa pencerenin içinde küçük bir kutu olarak
   duruyor ve çevresinde boşluk kalıyor. */
.dg-sohbet-yuva .bb-panel,
.dg-sohbet-yuva #bb-panel{
  position: static !important;
  width: 100% !important; max-width: 100% !important;
  height: 100% !important; max-height: none !important;
  inset: auto !important; margin: 0 !important;
  box-shadow: none !important; border-radius: var(--r-kart) !important;
}
.biggie-yuva-bekle{
  margin: 0; padding: var(--s-3); text-align: center;
  font-size: 13.5px; color: var(--metin-sessiz);
}

/* --- İKİ KOD YAN YANA (sayfa 4) ---
   Bir sayfada iki deneyim varsa iki kod olur (ayrı ölçüm için).
   Alt alta dizildiklerinde sayfa taşıyordu; yan yana dizilince
   hem sığıyorlar hem gerçek dergi yerleşimine benziyorlar.
   Üstteki ayraç çizgisi tek: iki blok tek bir "kod alanı". */
.dg-kod-ikili{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: calc(10px * var(--dg-olcek));
  padding-top: calc(10px * var(--dg-olcek));
  border-top: 1px dashed var(--kenar);
}
/* SATIR düzeni, sütun DEĞİL. Sütun denendi ve ters tepti:
   kare kodu yazının üstüne almak her bloğu uzatıp sayfayı
   221px taşırdı (ölçüldü). Yan yana iki dar satır daha kısa. */
.dg-kod-ikili .dg-kod{
  margin-top: 0; padding-top: 0; border-top: 0;
  flex-direction: row; align-items: center; gap: 8px;
}
.dg-kod-ikili .dg-kod-gorsel,
.dg-kod-ikili .dg-kod-yer{
  width: calc(62px * var(--dg-olcek)); height: calc(62px * var(--dg-olcek));
}
.dg-kod-ikili .dg-kod-cagri{ font-size: calc(12.5px * var(--dg-olcek)); margin-bottom: 2px; }
.dg-kod-ikili .dg-kod-alt{ font-size: calc(10.5px * var(--dg-olcek)); margin-bottom: 3px; }
.dg-kod-ikili .dg-kod-adres{ font-size: calc(9.5px * var(--dg-olcek)); }

/* Aynı sayfadaki iki çağrı düğmesi sıkışsın.
   YÜZEYE BAĞLI yazılmak ZORUNDA: kuralsız hâli
   `.dg-etkilesim:has(...)` idi ve :has() özgüllüğü yükselttiği
   için basılı yüzeydeki `display:none` kuralını EZİYORDU —
   etkileşim paneli kâğıt yüzeyinde de görünüyor ve sayfayı
   135px uzatıyordu (ölçüldü). Özgüllük savaşını !important ile
   değil, kuralı doğru yüzeye bağlayarak çözüyoruz. */
.dg[data-yuzey="ekran"] .dg-etkilesim:has(.dg-ac + .dg-ac){ display: grid; gap: 7px; }
.dg[data-yuzey="ekran"] .dg-etkilesim:has(.dg-ac + .dg-ac) .dg-ac{ padding: calc(8px * var(--dg-olcek)) 12px; }

/* İki kodlu sayfada kodlar biraz daha küçük: iki blok yan yana
   bile 190px tutuyordu, sayfa payı buna yetmiyor. */
.dg-kod-ikili .dg-kod-gorsel,
.dg-kod-ikili .dg-kod-yer{
  width: calc(52px * var(--dg-olcek)); height: calc(52px * var(--dg-olcek));
}
.dg-kod-ikili{ gap: 10px; }

/* ============================================================
   TAM SAYFA ASSET SAYFALARI  (.dg-asset)
   ------------------------------------------------------------
   Her sayfada TEK asset kuralının karşılığı. Açıklığın solunda
   yazı, sağında o yazının anlattığı çalışan şey duruyor; okur
   sayfayı çevirdiğinde asset zaten orada — açmak için düğme,
   pencere ya da ikinci adım yok.

   Bu düzen taşmayı da kökten çözüyor: asset sayfanın tamamına
   sahip olduğu için sayfa içinde kaydırma kalmıyor. Önceki
   hâlde test + asistan + iki kod aynı sayfadaydı ve sayfa
   210px taşıyordu.
   ============================================================ */
.dg-asset{ justify-content: flex-start; }
.dg-asset .dg-ust-etiket{
  margin-bottom: calc(8px * var(--dg-olcek));
  color: var(--vurgu-metin);
}
/* Asset dikeyde ortalanıyor: kısa bir araç sayfanın tepesine
   yapışık durmasın. */
.dg-asset > .dg-test,
.dg-asset > .dg-hesap,
.dg-asset > .dg-video,
.dg-asset > .dg-sohbet-yuva{ margin: auto 0; width: 100%; }

/* --- RÖPORTAJ VİDEOSU TAM SAYFA ---
   Video 1280×720 (16:9). aspect-ratio ile oranı sabitliyoruz ki
   sayfa ne kadar dar olursa olsun oynatıcı deforme olmasın;
   object-fit: contain siyah bant bırakmayı letterbox'a yamuk
   ölçeklemeye tercih ediyor.

   max-height: sayfanın yazı + alt not payı düşüldükten sonra
   kalanı geçmesin — asset sayfalarında kaydırma olmayacak
   kuralı burada da geçerli. 16:9 dar sayfada yüksekliği zaten
   nadiren zorluyor, ama 3:4'e yakın sayfa oranlarında
   aspect-ratio tek başına taşırabiliyordu. */
.dg-video{
  display: flex; flex-direction: column;
  gap: calc(8px * var(--dg-olcek));
  min-height: 0;
}
.dg-video-oynatici{
  width: 100%; aspect-ratio: 16 / 9;
  max-height: calc(100% - 34px * var(--dg-olcek));
  object-fit: contain;
  display: block; background: #000;
  border-radius: var(--r-kart);
  border: 1px solid var(--kenar);
}
.dg-video-alt{
  margin: 0; text-align: center;
  font-size: calc(11.5px * var(--dg-olcek));
  line-height: 1.45; color: var(--metin-sessiz);
}

/* DÖKÜM — videonun altındaki boşluğu dolduran alıntı.
   Sayfanın DÜŞEY ORTALAMAYA GÜVENEMEYECEĞİNİ ölçtük: kütüphane
   .dg-sayfa üzerine satır içi `display: block` yazıyor, bu yüzden
   `margin: auto` orada hiç çalışmıyor. Boşluğu ortalamayla değil,
   içerikle kapatıyoruz — ki dolgu zaten okura bir şey veriyor. */
.dg-video-dokum{
  margin: calc(14px * var(--dg-olcek)) 0 0;
  padding: calc(12px * var(--dg-olcek)) 0 0;
  border-top: 1px solid var(--kenar);
}
.dg-video-dokum p{
  margin: 0; text-align: center;
  font-family: var(--f-baslik, inherit);
  font-size: calc(15px * var(--dg-olcek));
  line-height: 1.5; font-weight: 600;
  color: var(--metin);
  text-wrap: balance;
}

/* --- ASİSTAN TAM SAYFA ---
   Widget kendi ölçüsünü dayatıyor (sabit konum, sabit yükseklik,
   kendi gölgesi). Dergi sayfasının içinde bunların hepsi yanlış:
   panel sayfanın dışına taşıyor ya da ortada küçük bir kutu
   olarak kalıyordu. Burada sayfaya uyacak şekilde sıfırlanıyor. */
.dg-asset .dg-sohbet-yuva{
  min-height: 0; max-height: none;
  flex: 1 1 auto; display: flex;
  border-radius: var(--r-kart); overflow: hidden;
  background: var(--zemin); border: 1px solid var(--kenar);
}
/* KUTU ÖLÇEKTEN ARINDIRILMIŞ, GÖRÜNTÜ ÖLÇEKLİ.
   Panelin yerleşim kutusu `yuva ÷ ölçek` kadar, yani ihtiyacı kadar
   geniş; sonra aynı oranla küçültülüyor ve görsel olarak yuvayı tam
   dolduruyor. Panel düzenini geniş kutuda kuruyor — çipler tek tek
   görünüyor, karşılama metni tam okunuyor — sonra hepsi birden
   orantılı iniyor, içeride kaydırma kalmıyor.

   Ölçeği JS yazıyor (bk. biggieYuvasiniOlcekle, media.js); orada
   panelin gerçek ihtiyacı ölçülüyor. Değişken yoksa 1, yani kural
   eski davranışına dönüyor.

   Köşe yarıçapı ÖLÇEĞE BÖLÜNÜYOR: küçültme yarıçapı da küçültüyor,
   bölmezsek köşeler sayfadaki diğer kartlardan daha keskin duruyor. */
.dg-asset .dg-sohbet-yuva .bb-panel,
.dg-asset .dg-sohbet-yuva #bb-panel{
  position: static !important;
  /* `flex: 0 0 auto` ŞART: yuva flex kabı ve panel varsayılan olarak
     daralabiliyor. Ölçeklenmiş genişliği verdiğimizde flex onu geri
     280px'e indiriyordu, sonra transform da küçültünce panel yuvayı
     dolduramayıp 254px'te kalıyordu (ölçüldü). */
  flex: 0 0 auto !important;
  /* SOL ÜSTE YASLANMALI. Yuva flex kabı ve paneli dikeyde
     ortalıyordu; panelin yerleşim kutusu yuvadan uzun olduğu için
     ortalama onu YUKARI taşıyordu — ölçüldü: başlık şeridi yuvanın
     41px üstünde kalıyor, Biggie'nin adı ve küresi kırpılıyor,
     altta ise 43px boş duruyordu. transform-origin da sol üst
     olduğu için ikisi ancak böyle hizalanıyor. */
  align-self: flex-start !important;
  width: calc(100% / var(--dg-biggie-olcek, 1)) !important;
  max-width: none !important;
  height: calc(100% / var(--dg-biggie-olcek, 1)) !important;
  max-height: none !important;
  min-height: 0 !important;
  inset: auto !important; margin: 0 !important;
  border: 0 !important;
  border-radius: calc(var(--r-kart) / var(--dg-biggie-olcek, 1)) !important;
  box-shadow: none !important;
  transform: scale(var(--dg-biggie-olcek, 1)) !important;
  transform-origin: top left !important;
}
/* Panelin KENDİ iç kaydırması korunuyor — buraya dokunmuyoruz.
   Önce `max-height: none !important` yazılmıştı ve widget'ın mesaj
   alanının kendi kaydırmasını iptal ediyordu: sohbet uzadıkça panel
   büyüyüp sayfayı taşırıyordu. Panel kendi içinde nasıl kaydığını
   zaten biliyor; bizim işimiz ona doğru yüksekliği vermek. */
.dg-asset .dg-sohbet-yuva > *{ min-height: 0; }

/* Asset sayfalarında test ve hesaplayıcı biraz daha rahat: artık
   yanlarında yazı yok, tüm sayfa onların. */
.dg.cevrilir .dg-asset .dg-soru{ margin-bottom: calc(10px * var(--dg-olcek)); }
.dg.cevrilir .dg-asset .dg-soru legend{ font-size: calc(13px * var(--dg-olcek)); }
.dg.cevrilir .dg-asset .dg-soru label{ font-size: calc(12.5px * var(--dg-olcek)); }
.dg.cevrilir .dg-asset .dg-hesap-not{ font-size: calc(11.5px * var(--dg-olcek)); }

/* ============================================================
   ASSET SAYFALARI — ÖLÇÜ DÜZELTMELERİ
   ------------------------------------------------------------
   Üçü de tarayıcıda ölçülerek bulundu (522px'lik sayfada):
     asistan     panel 633px  → +210 taşma
     hesaplayıcı araç  555px  → +130
     test        araç  477px  →  +52
   ============================================================ */

/* 1) ASİSTAN — widget sayfaya UYSUN.
   Sebep: yukarıdaki `.dg.cevrilir .dg-sayfa > *{flex:0 0 auto}`
   kuralı (3 sınıf) benim `.dg-asset .dg-sohbet-yuva` kuralımı
   (2 sınıf) eziyordu; yuva esnemiyor, panel kendi 633px'inde
   kalıyordu. Ölçüldü: flex hesaplanan değeri "0 0 auto".
   Aynı özgüllükte yazınca esniyor. min-height:0 şart — esnek
   çocuk varsayılan olarak içeriğinden küçülmüyor. */
/* YÜZDE YÜKSEKLİK, FLEX DEĞİL.
   Flex denendi, çalışmadı; sebebi ölçümle bulundu: sayfanın
   hesaplanan display değeri "block". StPageFlip her sayfaya satır
   içi `display: block` yazıyor; satır içi stil sınıf kuralını
   eziyor, dolayısıyla `.dg-sayfa{display:flex}` hiç devreye
   girmiyor ve yuvaya verdiğim flex ölü kalıyordu.

   `display:flex !important` ile ezmek YANLIŞ olurdu: kütüphane
   görünmeyen sayfaları `display:none` ile gizliyor; !important
   onu da ezer ve bütün asset sayfaları aynı anda görünürdü.

   Sayfa yüksekliği satır içinde KESİN olduğu için yüzde çalışıyor:
   yuva "sayfa eksi başlık satırı" kadar yer alıyor, panel de
   height:100% ile onu dolduruyor. */
.dg.cevrilir .dg-asset > .dg-sohbet-yuva{
  height: calc(100% - 26px); min-height: 0;
}

/* 2) HESAPLAYICI — etiket ve alan yan yana.
   Alt alta dizilince üç girdi tek başına ~200px tutuyordu.
   Yan yana dizilince satır başına ~34px'e iniyor. */
.dg.cevrilir .dg-asset .dg-hesap-girdi{
  grid-template-columns: 1fr; gap: 6px;
}
.dg.cevrilir .dg-asset .dg-hesap-girdi label{
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--s-2);
}
.dg.cevrilir .dg-asset .dg-hesap-girdi span{
  font-size: calc(12.5px * var(--dg-olcek)); flex: 1 1 auto;
}
.dg.cevrilir .dg-asset .dg-hesap-girdi input{
  flex: 0 0 96px; padding: 6px 9px;
  font-size: calc(13.5px * var(--dg-olcek)); text-align: right;
}
/* Sonuç kutuları tek sütun ve satır hâlinde: üç kutu yan yana
   370px'lik sayfada kırılıp üç satıra düşüyordu. */
.dg.cevrilir .dg-asset .dg-hesap-sonuc{
  grid-template-columns: 1fr; gap: 5px; margin-top: var(--s-2);
}
.dg.cevrilir .dg-asset .dg-olcum{
  display: flex; align-items: baseline; gap: 9px; padding: 7px 10px;
}
.dg.cevrilir .dg-asset .dg-olcum-sayi{
  font-size: calc(19px * var(--dg-olcek)); margin: 0; flex: 0 0 auto;
}
.dg.cevrilir .dg-asset .dg-olcum-ad{ font-size: calc(11px * var(--dg-olcek)); }
.dg.cevrilir .dg-asset .dg-hesap-islem{ font-size: calc(11px * var(--dg-olcek)); margin-top: 7px; }

/* 3) TEST — soru aralıkları biraz daha sıkı. */
.dg.cevrilir .dg-asset .dg-soru{ margin-bottom: 7px; }
.dg.cevrilir .dg-asset .dg-soru legend{ padding-bottom: 4px; }
.dg.cevrilir .dg-asset .dg-soru label{ padding: 4px 9px; margin: 0 3px 3px 0; }
.dg.cevrilir .dg-asset .dg-test-alt{ margin-top: 6px; }

/* ============================================================
   ASSET SAYFALARININ BASILI KARŞILIĞI  (.dg-basili-kod)
   ------------------------------------------------------------
   KURALIN KENDİSİNİ ÇİĞNİYORDUK: derginin her yerinde "ekranda
   dokunmatik, kâğıtta kare kod" diyoruz ama asset sayfaları
   basılı yüzeyde de canlı asistanı/aracı gösteriyordu. Kâğıtta
   çalışan bir chatbot olamaz.

   Artık aynı sayfa iki yüzeyde iki şey:
     ekran  → canlı asset (asistan paneli, hesaplayıcı, test)
     kâğıt  → tam sayfa kare kod paneli
   Gerçek dergide de tam sayfa kod böyle basılır: büyük kod,
   sebebi söyleyen bir başlık ve altında kısa yönlendirme.
   ============================================================ */
.dg-basili-kod{ display: none; }

/* Basılı yüzey: canlı asset gizlenir, kod paneli açılır.

   LİSTE ELLE TUTULUYOR VE BU BİR RİSK — İKİ KEZ ISPATLANDI:
   önce .dg-video, sonra .dg-ar-yuva buraya yazılmayı unuttu ve
   her ikisinde de kâğıt yüzeyinde asset ile kod YAN YANA göründü.
   İkincisinde bedeli ölçüldü: AR çerçevesi 253px yer kaplayınca
   kod paneline 140px kaldı, oysa 150px gerekiyordu — panel taştı.
   Yeni bir asset türü eklendiğinde satırı eklemek ZORUNLU. (Tersi — "kod paneli dışında her şeyi gizle"
   — üst etiketi ve folyoyu da silerdi.) */
.dg[data-yuzey="basili"] .dg-asset > .dg-sohbet-yuva,
.dg[data-yuzey="basili"] .dg-asset > .dg-test,
.dg[data-yuzey="basili"] .dg-asset > .dg-sor,
.dg[data-yuzey="basili"] .dg-asset > .dg-video{ display: none; }

/* ============================================================
   DERGİYE SOR — SESLİ SORU SAHNESİ
   ------------------------------------------------------------
   Konuşan broşürdeki mikrofon sahnesiyle aynı dil, dergi
   sayfasına göre küçültülmüş hâli: sayfa 332×471 ve orada
   broşürün 120px'lik düğmesi tek başına yüksekliğin dörtte
   birini yiyordu.

   Durum kabın data-hal'inde (bos/dinliyor/dusunuyor/konusuyor);
   halkalar onu renk ve hareketle gösteriyor, yazı da altında.
   Tek gösterge yerine ikisi: ses açıkken ekrana bakmayan
   ziyaretçi de ne olduğunu anlamalı.

   Animasyon SAF CSS: bu sitede rAF arka plandaki sekmede
   duruyor (ölçüldü), CSS animasyonu ilerlemeye devam ediyor.
   ============================================================ */
.dg-sor{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: calc(8px * var(--dg-olcek));
  height: 100%; min-height: 0;
  padding-top: calc(6px * var(--dg-olcek));
}
.dg-sor-mik{
  position: relative; flex: none;
  width: calc(64px * var(--dg-olcek)); height: calc(64px * var(--dg-olcek));
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--vurgu);
  display: grid; place-items: center;
}
.dg-sor-mik:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 3px; }
/* Mikrofon simgesi: gövde + ayak, iki kutudan. Ayrı bir SVG
   dosyası bir istek daha demekti; biçim bu kadar basitken
   kutuyla çizmek bedelsiz. */
.dg-sor-ikon{
  position: relative; display: block;
  width: calc(11px * var(--dg-olcek)); height: calc(18px * var(--dg-olcek));
  border-radius: 999px; background: var(--saf-beyaz);
}
.dg-sor-ikon::after{
  content: ""; position: absolute; left: 50%; top: 100%;
  width: calc(2px * var(--dg-olcek)); height: calc(5px * var(--dg-olcek));
  transform: translateX(-50%); background: var(--saf-beyaz);
}
/* Halkalar YALNIZ dinlerken atıyor: boşta duran bir nabız
   "kayıt açık" yanılgısı veriyordu. */
.dg-sor-halka{
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--vurgu); opacity: 0;
}
.dg-sor[data-hal="dinliyor"] .dg-sor-halka{
  animation: dgSorNabiz 1.8s ease-out infinite;
}
.dg-sor[data-hal="dinliyor"] .dg-sor-halka-2{ animation-delay: .9s; }
@keyframes dgSorNabiz{
  0%{ transform: scale(1); opacity: .55; }
  100%{ transform: scale(1.9); opacity: 0; }
}
/* Düşünürken düğme sakin bir nefes alıyor; konuşurken duruyor
   çünkü o sırada asıl gösterge SES. */
.dg-sor[data-hal="dusunuyor"] .dg-sor-mik{
  animation: dgSorNefes 1.4s ease-in-out infinite;
}
@keyframes dgSorNefes{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(.93); }
}
.dg-sor[data-hal="konusuyor"] .dg-sor-mik{ background: var(--mor-700); }

.dg-sor-cagri{
  margin: 0; flex: none;
  font-family: var(--font-mono); font-size: calc(10px * var(--dg-olcek));
  letter-spacing: .1em; text-transform: uppercase; color: var(--metin-sessiz);
}

/* Akış kendi içinde kayıyor: konuşma uzadıkça sayfa büyüyemez,
   sayfa ölçüsü kâğıttan geliyor. */
.dg-sor-akis{
  flex: 1 1 auto; min-height: 0; width: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: calc(6px * var(--dg-olcek));
}
/* HENÜZ KONUŞMA YOKKEN YER KAPLAMIYOR.
   `flex: 1` boş akışı da büyütüyordu: mikrofon yukarıda, örnekler
   ve yazma kutusu sayfanın dibinde kalıyor, aralarında boş bir
   koridor açılıyordu. Boşken kapanınca üçü bir grup olarak
   ortalanıyor; ilk soru sorulunca akış açılıp yerini alıyor. */
.dg-sor-akis:empty{ flex: 0 0 auto; }
.dg-sor-balon{
  margin: 0; max-width: 88%;
  padding: calc(7px * var(--dg-olcek)) calc(10px * var(--dg-olcek));
  font-size: calc(12px * var(--dg-olcek)); line-height: 1.5;
}
.dg-sor-soru{
  align-self: flex-end; background: var(--vurgu); color: var(--saf-beyaz);
  border-radius: 12px 12px 4px 12px;
}
.dg-sor-cevap{
  align-self: flex-start; background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 12px 12px 12px 4px;
}
/* Boş cevap balonu görünmesin: istek gidip metin gelene kadar
   ekranda boş bir kutu duruyordu. */
.dg-sor-cevap:empty{ display: none; }

.dg-sor-ornekler{
  flex: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(5px * var(--dg-olcek));
}
.dg-sor-ornek{
  border: 1px solid var(--kenar); background: transparent;
  border-radius: 999px; cursor: pointer; color: var(--metin-govde);
  padding: calc(4px * var(--dg-olcek)) calc(9px * var(--dg-olcek));
  font-size: calc(10.5px * var(--dg-olcek)); font-family: inherit;
}
.dg-sor-ornek:hover{ border-color: var(--vurgu); color: var(--vurgu-metin); }

.dg-sor-yaz{ flex: none; display: flex; gap: 6px; width: 100%; }
/* [hidden] KORUMASI ŞART.
   `hidden` özniteliği display:none veriyor ama yukarıdaki sınıf
   kuralı (display:flex) onu yeniyor — aynı özgüllük, sonra gelen
   kazanıyor. Sonuç: tanıma desteklenen tarayıcıda da yazma kutusu
   görünüyordu (tarayıcıda görüldü), oysa orada ikinci bir yol
   sunmak sesin önüne geçiyor. */
.dg-sor-yaz[hidden]{ display: none; }
.dg-sor-yaz input{
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--kenar); border-radius: 10px;
  padding: calc(7px * var(--dg-olcek)) calc(10px * var(--dg-olcek));
  font: inherit; font-size: calc(12px * var(--dg-olcek));
}
/* Gönder düğmesi de sayfa ölçeğinde: site ölçüsünde bırakılınca
   332px'lik sayfada tek başına genişliğin üçte birini alıyordu. */
.dg-sor-yaz .dugme{
  flex: none;
  padding: calc(7px * var(--dg-olcek)) calc(14px * var(--dg-olcek));
  font-size: calc(12px * var(--dg-olcek));
  border-radius: 10px;
}

.dg[data-yuzey="basili"] .dg-asset .dg-basili-kod{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  height: calc(100% - 26px); gap: calc(10px * var(--dg-olcek));
}
.dg-basili-kod-gorsel{
  width: calc(160px * var(--dg-olcek)); height: calc(160px * var(--dg-olcek));
  display: block; border-radius: 3px;
}
.dg-basili-kod-cagri{
  margin: 0; font-family: var(--font-baslik);
  font-size: calc(20px * var(--dg-olcek)); font-weight: 800;
  letter-spacing: -.02em; color: var(--metin); max-width: 18ch;
}
.dg-basili-kod-alt{
  margin: 0; font-size: calc(13px * var(--dg-olcek));
  line-height: 1.5; color: var(--metin-sessiz); max-width: 30ch;
}
.dg-basili-kod-adres{
  margin: 0; font-family: var(--font-mono);
  font-size: calc(12px * var(--dg-olcek)); letter-spacing: .03em;
  color: var(--vurgu-metin);
}

/* KODUN ALTINDAKİ TEK SATIR.
   Ziyaretçi demoyu ekranda geziyor; telefonunu kaldırmadan
   kodun nereye indiğini merak ediyor. Bu satır cevabı veriyor
   ve "Ekran sayfası" düğmesini işaret ediyor.

   BİLEREK EN SÖNÜK KADEME: sayfanın söylediği şey kodun
   çağrısı, bu değil. Sönük renk ve küçük punto, satırı
   okunabilir tutup hiyerarşinin en altında bırakıyor —
   aksi hâlde kendi başlığıyla yarışırdı. */
.dg-basili-kod-demo,
.dg-kod-demo{
  margin: 0; font-size: calc(11.5px * var(--dg-olcek));
  line-height: 1.45; color: var(--metin-sessiz); max-width: 32ch;
}
.dg-basili-kod-demo{ margin-top: calc(2px * var(--dg-olcek)); }

/* BOYUT SABİT YAZILAMAZ — YAZI BLOĞUNUN EN BÜYÜĞÜ OLUYORDU.
   Yazı sayfalarındaki (.dg-kod) satırlar --dg-olcek ile
   küçülüyor; arka kapakta ölçüldü: çağrı 9.1px, alt 7.6px,
   adres 7.0px. Altyazı sabit 11.5px kalınca kendi başlığından
   büyük duruyor ve üç satıra bölünüyordu (33px). Ölçekle
   çarpılınca hiyerarşinin en altında kalıyor.

   Taban 10.5px: adresin bir kademe altında: bu satır
   kodun kendisinden de, çağrısından da sessiz olmalı. */
.dg-kod-demo{ margin-top: 4px; font-size: calc(10.5px * var(--dg-olcek)); }

/* "CANLI" etiketi yalnız EKRAN yüzeyinde.
   Kâğıtta canlı bir şey yok; kod paneli kendi başlığını zaten
   taşıyor. Basılı yüzeyde bırakmak, sayfanın söylediği şeyle
   çelişiyordu. */
.dg[data-yuzey="basili"] .dg-asset > .dg-ust-etiket{ display: none; }
.dg[data-yuzey="basili"] .dg-asset .dg-basili-kod{ height: 100%; }

/* SAYFA İÇERİĞİ SIĞMIYORSA KADEME KADEME KÜÇÜLTME
   ------------------------------------------------------------
   media.js sayfayı ölçüp taşıyorsa data-kucult="1..4" yazıyor.
   Neden satır içi stil değil: StPageFlip her çizimde .dg-sayfa'nın
   style özniteliğini baştan yazıyor ve oraya konan --dg-olcek
   siliniyordu (ölçüldü). data-* özniteliğine dokunmuyor.

   Değerler --dg-olcek'in tabanı (0.78) üzerinden: %6'şar iniş.
   Dördüncü kademe 0.61 — gövde metni ~11px, okunabilirliğin
   alt sınırı. Daha aşağı inmiyoruz; o noktada doğru çözüm
   sayfadaki metni kısaltmak. */
.dg.cevrilir .dg-sayfa[data-kucult="1"]{ --dg-olcek: .733; }
.dg.cevrilir .dg-sayfa[data-kucult="2"]{ --dg-olcek: .689; }
.dg.cevrilir .dg-sayfa[data-kucult="3"]{ --dg-olcek: .648; }
.dg.cevrilir .dg-sayfa[data-kucult="4"]{ --dg-olcek: .609; }

/* ============================================================
   KROM KISILDI — DERGİ TEK EKRANA SIĞSIN
   ------------------------------------------------------------
   Ölçüldü (1000×650 pencere, kısılmadan önce):
     derginin üstündeki boşluk   161
     dg-ust      73   (dolgu 16/16)
     dg-oynatici 80   (dolgu 16/16 + alt marj 24)
     dg-gezinme  56   (alt dolgu 16)
     dg-durum    24   (alt dolgu 24, içerik boş)
   Toplam ~394px; kitaba kalan yer 650'lik pencerede 250'nin
   altına düşüyordu ve bileşen ekranı aşıyordu.

   Burada İÇERİK değil BOŞLUK kısılıyor: yazı boyu, dokunma
   hedefi ve okunabilirlik korunuyor, yalnız dolgular ve
   marjlar sıkıştırılıyor. Kazanç ~66px; telefon düzeltmesiyle
   birlikte dergi tek ekrana giriyor.
   ============================================================ */
.dg .dg-ust{ padding-top: 10px; padding-bottom: 10px; }
.dg .dg-oynatici{ padding-top: 10px; padding-bottom: 10px; margin-bottom: 14px; }
.dg .dg-gezinme{ padding-bottom: 8px; }

/* Durum satırı BOŞKEN yer kaplamasın. İçi çoğu zaman boş ama
   alt dolgusu 24px'i akışta tutuyordu. :empty ile yalnız gerçekten
   bir şey yazıldığında pay alıyor — mesaj çıkınca düzen zıplamasın
   diye min-height korunuyor. */
.dg .dg-durum{ padding-bottom: 0; min-height: 0; }
.dg .dg-durum:not(:empty){ padding-bottom: 12px; }

/* Demo sayfasının başlığı da kısıldı: dergi ÜRÜN, başlık ona
   giriş. 650px'lik bir pencerede 161px'in üçte biri geri alınıyor. */
.dg-bas{ padding-top: 20px; }
.dg-bas .ust-etiket{ margin-bottom: 8px; }
.dg-bas .sayfa-h1{ margin-top: 0; margin-bottom: 10px; }

/* ============================================================
   KİTAP GENİŞLİĞİ PENCERE YÜKSEKLİĞİNE BAĞLI
   ------------------------------------------------------------
   Kütüphane yüksekliği GENİŞLİKTEN türetiyor (padding-bottom
   oranı, yukarıdaki uzun nota bakın) ve verdiğimiz maxHeight'i
   yok sayıyor. Yüksekliği kontrol etmenin tek yolu genişliği
   kısmak — ama fazla kısarsa tek sayfa kipine düşüyor.

   EŞİK ÖLÇÜLDÜ: 900/800/700/640/600/560/520/480px genişliklerin
   HEPSİNDE açıklık korundu; 452'de tek sayfaya döndü. Yani
   güvenli alt sınır ~480px. Daha önce bu düzeltmeyi geri
   almamın sebebi eşiği bilmeden 452'ye inmiş olmamdı.

   !important BURADA GEREKLİ VE İSTİSNAİ: kütüphane .dg-tabaka'ya
   `max-width: 4000px` diye SATIR İÇİ yazıyor ve satır içi stil harici
   kuralı yener. Ölçüldü: kural eklendikten sonra kitap hâlâ 946px
   genişti. Yalnız bu tek bildirimi eziyoruz, kütüphanenin diğer
   ölçülerine dokunmuyoruz.

   SINIR ARTIK 100vh FORMÜLÜNDEN DEĞİL, JS'TEN GELİYOR.
   Eskiden `calc((100vh - 404px) / 0.708)` yazıyordu; 404 elle
   ayarlanmış bir krom toplamıydı ve kütüphanenin kendi kararıyla
   anlaşmıyordu. Ölçüldü (1440×900, basılı yüzey): bu formül kabı
   701px yapıyor, kütüphane açıklığı 540px çiziyor ve sayfaları
   `left: 80.5px` ile kabın ortasına atıyordu — kitabın çevresinde
   161×114px ölü alan, sahnede kayık bir açıklık.

   --dg-kitap-en, kütüphanenin açıklığı çizerken kullandığı
   `sayfaYuksekligi() × 0.705 × 2` değerinin ta kendisi (bk.
   kitapEniniYaz, media.js). Kap ile çizim aynı sayıyı söyleyince
   ölü alan sıfırlanıyor. Yedek 640px: JS çalışmazsa eski güvenli
   ölçü. min(100%) geniş ekranda kabı aşmayı engelliyor. */
.dg.cevrilir .dg-tabaka{
  max-width: min(100%, var(--dg-kitap-en, 640px)) !important;
}

/* ============================================================
   KISA PENCERE KİPİ
   ------------------------------------------------------------
   780px'in altında krom daha da sıkışıyor. Gerekçe aritmetik:
   650px'lik bir pencerede normal kromla (364px) kitaba 270px
   kalıyor ve bu genişlik olarak 381px'e denk geliyor — yani
   açıklığın kaybolduğu eşiğin altı.

   Burada da içerik değil boşluk gidiyor; tek istisna demo
   sayfasının etiketi ("DEMO · SMART MEDYA"). Başlık kalıyor,
   çünkü sayfanın ne olduğunu söyleyen şey o. Kısa ekranda
   kahraman metin değil ÜRÜN olmalı. */
@media (max-height: 780px){
  .dg-bas{ padding-top: 12px; }
  .dg-bas .ust-etiket{ display: none; }
  .dg-bas .sayfa-h1{ font-size: 19px; margin-bottom: 8px; }
  .dg .dg-sahne{ padding: 10px; }
  .dg .dg-ust{ padding-top: 6px; padding-bottom: 6px; }
  .dg .dg-oynatici{ padding-top: 6px; padding-bottom: 6px; margin-bottom: 8px; }
  .dg .dg-gezinme{ padding-bottom: 4px; }
}

/* İÇERİK SEYRELTME KALDIRILDI (2026-09-14).
   Kısa ekranda görsel bantlarını ve kapak listesini gizliyordum.
   Dergi ekrana sığıyordu ama "premium dergi" olmaktan çıkıyordu:
   sayfalar 240px genişliğe düşünce yazı bloğu sayfanın %91'ini
   kaplıyor, görsele yer kalmıyor ve 3D düğmesi üst etikete
   biniyordu (ölçüldü: buton 625-720/201-231, etiket 533-707/203-216).

   Karar: ölçüyü tasarımın taşıyabileceği yerde tutmak, sığdırmak
   için tasarımı bozmaktan iyi. Kitabın alt sınırı 640px'e çıkarıldı.
   Bedeli, çok kısa pencerelerde derginin alt kenarının katlanın
   biraz altında kalması. */

/* ============================================================
   DERGİ SAYFASINDAKİ ASİSTAN — YUVAYA UYARLANIYOR
   ------------------------------------------------------------
   Widget kendi başına çalışırken 620px yüksekliğinde bir panel:
   176px marka başlığı (3B küre sahnesi), sonra sohbet, çipler ve
   giriş satırı. Dergi sayfasındaki yuva ise ~375px — ve widget'ın
   üç parçası da `flex: none`, yani hiçbiri küçülmüyor.

   Sonuç ölçüldü (1440×900, 5. sayfa):
     yuva 375 · panel içeriği 410  → 37px taşma
     bb-hero    176px  (panelin 22px YUKARISINDA başlıyor, "Biggie"
                        başlığı üstten kırpılıyordu)
     bb-msgs     26px  (içinde 249px konuşma — sohbet görünmez)
     bb-inputrow alttan 14px taşıyor
   Yani asistan sayfası "asistan" değil, kırpılmış bir afiş gibi
   duruyordu.

   ÖNCEKİ DENEMEM YANLIŞ TEMELDEYDİ: kuralı pencere yüksekliğine
   bağlamıştım (max-height: 780px). Widget'ın sığması gereken şey
   pencere değil YUVA; 1440×900'de pencere uzun olduğu hâlde yuva
   yine dardı ve kural hiç devreye girmiyordu.

   Başlık gizlenmiyor, KÜÇÜLÜYOR: marka şeridi kalsın ama sayfanın
   yarısını yemesin. Kalan alanı sohbet alıyor — asıl gösterilmek
   istenen şey o.

   Seçiciler kimlik içeriyor (1,2,0) çünkü widget'ın kendi kuralları
   kimlik seçicisi (1,0,0); sınıf tabanlı kural onları yenemiyordu.
   ============================================================ */
/* ESNEYEBİLİR ÖLÇÜLER — `flex: 0 0` DEĞİL `0 1`.
   İlk hâlde başlık/çip/giriş sabitti ve yalnız sohbet esniyordu.
   1000×650 ile 1440×900'de tuttu ama 1200×702'de yuva 278px'e
   düşünce toplam (88+90+84+72=334) sığmadı ve panel 56px taştı.
   Ölçüyü tek bir parçaya yüklemek yerine hepsine daralma payı
   veriyoruz; sıkışınca önce marka şeridi ve çipler küçülüyor,
   sohbet en son. En dar hâlde toplam 240px. */
.dg-asset .dg-sohbet-yuva #bb-hero{
  height: 88px; flex: 0 1 88px; min-height: 52px;
}
/* Küre sahnesi başlığın içinde ölçekleniyor; sabit yüksekliği
   kalkmazsa 176px'lik tuvali 88px'lik şeride sığmıyor.

   SAĞA KAYDIRILDI: 176px'lik şeritte küre ile marka yazısı
   birbirine girmiyordu, 88px'e inince kürenin yoğun merkezi tam
   "BIG SOLUTIONS ASİSTANI" satırının üstüne düşüyor ve yazı
   okunmuyordu. Sola marka için temiz alan bırakılıyor. */
.dg-asset .dg-sohbet-yuva #bb-orb{
  height: 100%; left: auto; right: 0; width: 46%;
}

/* DURUM SATIRI SAĞA ALINDI ("● Hazır").
   Marka bloğu şeridin ÜSTÜNE (top:16), durum satırı ALTINA
   (bottom:14) yaslı. 176px'lik şeritte aralarında bolca yer var;
   52-70px'e inince üst üste biniyorlar — 1512×944'te ölçüldü,
   "Hazır" tam "BIG SOLUTIONS ASİSTANI" satırının üstüne düştü.
   Dikey ayrım kalmadığı için YATAY ayrıma geçiyoruz: marka solda,
   durum sağda, ikisi de dikeyde ortalı. */
.dg-asset .dg-sohbet-yuva #bb-status{
  left: auto; right: 16px; bottom: auto; top: 50%;
  transform: translateY(-50%);
}
.dg-asset .dg-sohbet-yuva #bb-brand{
  top: 50%; transform: translateY(-50%);
  /* Durum satırına ve küreye yer bırakıyor. Sayfa daraldığında
     (1200×702'de sayfa 320px) marka bloğu sağa doğru uzayıp
     "Hazır"ın üstüne biniyordu — ölçüldü. Genişliği sınırlayıp
     alt satırı tek satıra kilitliyoruz; uzun ad üç nokta ile
     kısalıyor, bindirmek yerine. */
  max-width: calc(100% - 108px);
}
.dg-asset .dg-sohbet-yuva #bb-brand .bb-role{
  display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Sohbet kalan alanı alıyor ve ASLA 90px'in altına inmiyor:
   altında konuşma okunmuyor, widget "çalışmıyor" gibi duruyor. */
.dg-asset .dg-sohbet-yuva #bb-msgs{
  flex: 1 1 auto; min-height: 72px;
}
/* Çipler sohbetten yer çalmasın diye sınırlı — ama sınır artık
   sabit 84px değil, panelin ORANI.

   84px sabiti panel dar bir kutuya sıkışırken konmuştu. Panel artık
   kendi ölçüsünde kurulup optik olarak küçültülüyor (bk.
   biggieYuvasiniOlcekle, media.js), yani kutu 517px; orada 84px
   gereksiz dar kalıyor ve üç çip 92px isterken 8px kırpılıyordu.
   Yüzde, kutu büyüdükçe birlikte açılıyor, küçüldükçe eski
   davranışa yaklaşıyor. */
.dg-asset .dg-sohbet-yuva #bb-chips{
  flex: 0 1 auto; min-height: 44px; max-height: 30%; overflow-y: auto;
}
.dg-asset .dg-sohbet-yuva #bb-inputrow{ flex: 0 0 auto; }

/* ============================================================
   DERGİ İÇİNDEKİ ASİSTAN — TİPOGRAFİ DE KÜÇÜLÜYOR
   ------------------------------------------------------------
   Widget 400px genişliğinde bağımsız bir panel için tasarlandı:
   14px mesaj metni, 12.5px çip, 14px girdi, 46px gönder düğmesi.
   Dergi sayfasındaki yuva ise 240-320px genişliğinde. Ölçüleri
   olduğu gibi bırakınca metin kutuya sığmıyor, balonlar alt alta
   üç satıra yayılıyor ve panel "sıkışık ve iri" görünüyor —
   kullanıcı tam bunu tarif etti.

   Kutuyu küçültüp içindekini küçültmemek, ölçek sorununu yalnız
   yer değiştirmek olurdu. Burada İÇERİK de yuvayla aynı oranda
   iniyor: metin 14 → 12.5px, çip 12.5 → 11.5px, girdi 14 → 12.5px,
   dolgular da orantılı.

   Seçiciler kimlik/sınıf birleşimi çünkü widget'ın kendi kuralları
   kimlik seçicisi taşıyor (#bb-input, #bb-msgs) ve sınıf tabanlı
   kural onları yenemiyor.
   ============================================================ */
.dg-asset .dg-sohbet-yuva #bb-msgs{ padding: 12px 12px 6px; gap: 8px; }
.dg-asset .dg-sohbet-yuva .bb-msg{
  font-size: 12.5px; line-height: 1.5; padding: 8px 11px;
  max-width: 92%; border-radius: 13px 13px 13px 4px;
}
.dg-asset .dg-sohbet-yuva .bb-msg.user{ border-radius: 13px 13px 4px 13px; }
.dg-asset .dg-sohbet-yuva #bb-chips{ padding-left: 12px; padding-right: 12px; gap: 6px; }
.dg-asset .dg-sohbet-yuva .bb-chip{ font-size: 11.5px; padding: 5px 10px; }
.dg-asset .dg-sohbet-yuva #bb-inputrow{ padding: 8px 12px 10px; gap: 6px; }
.dg-asset .dg-sohbet-yuva #bb-input{
  font-size: 12.5px; padding: 9px 12px; border-radius: 11px;
}
.dg-asset .dg-sohbet-yuva #bb-send{ width: 38px; border-radius: 11px; }

/* Marka şeridi de orantılı: 19px logo dar yuvada iri duruyordu. */
.dg-asset .dg-sohbet-yuva #bb-brand .bb-wm{ font-size: 15px; }
.dg-asset .dg-sohbet-yuva #bb-brand .bb-ver{ font-size: 9px; padding: 1px 5px; }
.dg-asset .dg-sohbet-yuva #bb-brand .bb-role{ font-size: 9px; letter-spacing: 1.1px; }
.dg-asset .dg-sohbet-yuva #bb-status{ font-size: 10px; }

/* ============================================================
   ODAK KİPİ — KARE KOD SAYFALARI (/g/<kod>)
   ------------------------------------------------------------
   Kâğıttaki kodu okutan kişi telefonda ve tek bir şey bekliyor.
   Burada dergi bileşeninin TAMAMI yüklü ama yalnız bir sayfası
   gösteriliyor: yüzey seçici, sayfa sayacı, gezinme noktaları,
   telefon maketi ve basılı kod paneli gizli.

   Kitap kütüphanesi de kurulmuyor (media.js odak kipinde atlıyor),
   çünkü çevrilecek sayfa yok. Bu sayede sayfa hem daha hızlı
   açılıyor hem de 43 KB'lık çevirme kütüphanesi boşa çalışmıyor.

   Ölçü kısıtı yok: tek sayfa ekranın genişliğini alıyor. Dergideki
   240-320px'lik dar sütun yerine telefonda tam genişlik demek —
   asıl okunabilirlik kazancı burada.
   ============================================================ */
.dg-odak .dg-ust,
.dg-odak .dg-gezinme,
.dg-odak .dg-durum,
.dg-odak .dg-telefon,
.dg-odak .dg-basili-kod,
.dg-odak .dg-nokta-katman{ display: none; }

/* Yalnız odaklanan sayfa görünür. Kütüphane kurulmadığı için
   sayfalar normal akışta duruyor; gizlemeyi biz yapıyoruz. */
.dg-odak .dg-sayfa{ display: none; }
.dg-odak .dg-sayfa[data-odak-sayfa]{ display: block; }

.dg-odak{
  background: none; border: 0; box-shadow: none; padding: 0;
}
.dg-odak .dg-sahne{ padding: 0; grid-template-columns: minmax(0, 1fr); }
.dg-odak .dg-tabaka{
  max-width: 680px !important; margin-inline: auto;
  min-height: 0; display: block;
}
.dg-odak .dg-sayfa[data-odak-sayfa]{
  position: static !important; width: auto !important; height: auto !important;
  border-radius: var(--r-kart); padding: clamp(18px, 4vw, 30px);
  box-shadow: 0 18px 60px rgba(10, 13, 36, .10);
}

/* Ses çubuğu KALIYOR ama yalnız sesli anlatım sayfasında işe
   yarıyor; öteki odak sayfalarında gizleniyor. */
.dg-odak[data-odak="2"] .dg-oynatici{ display: flex; }
.dg-odak:not([data-odak="2"]) .dg-oynatici{ display: none; }

/* Odak sayfasında asset kutusu sabit yükseklik almıyor: sayfa
   uzayabilir, telefonda kaydırmak normal. Dergideki "tek ekrana
   sığsın" kısıtı burada geçersiz — burada tek bir içerik var. */
.dg-odak .dg-sohbet-yuva{ height: min(72svh, 560px) !important; }
.dg-odak .dg-test,
.dg-odak .dg-hesap,
.dg-odak .dg-video{ height: auto !important; }

/* Odak sayfasında tipografi küçültülmüyor: dar dergi sütunu
   yok, tam genişlik var. --dg-olcek 1'e sabitleniyor. */
.dg-odak{ --dg-olcek: 1; }
.dg-odak .dg-sayfa[data-kucult]{ --dg-olcek: 1; }

/* İmza ve dergiye giden ince bağlantı. Gezinme DEĞİL — okuyucu
   isterse tamamına bakabilsin diye tek satır. */
.odak-imza{
  max-width: 680px; margin: 22px auto 0; padding: 0 4px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--metin-sessiz);
}
.odak-imza a{ color: var(--vurgu-metin); text-decoration: none; }
.odak-imza a:hover{ text-decoration: underline; }

/* Odak sayfasında derginin DIŞINDAKİ bölümler gizleniyor.
   Gövde dosyası demo sayfasının tamamı — başlık, açıklama,
   "basılı taraf" anlatımı. Kâğıttaki kodu okutan kişi bunları
   değil, kodun vaat ettiği içeriği bekliyor.

   :has() ile hangi bölümde dergi olduğunu buluyoruz; gövdeye ayrı
   bir işaret basmaya gerek kalmıyor. */
body:has(.dg-odak) .bolum:not(:has(.dg-odak)){ display: none; }

/* Odak sayfası ekranı DOLDURUYOR ve içerik dikeyde ortalanıyor.
   Önce içerik bitince altta koyu bir boşluk kalıyordu: gövde
   koyu zeminli (site geneli), bölüm ise açık. Telefonda bu
   "sayfa yarım yüklendi" gibi duruyordu.

   min-height: 100svh — svh kullanılıyor çünkü mobil tarayıcıların
   adres çubuğu vh'i kaydırıyor ve sayfa açılırken zıplıyor. */
body:has(.dg-odak){ background: var(--zemin); }
body:has(.dg-odak) #icerik{ display: block; }
body:has(.dg-odak) .bolum:has(.dg-odak){
  min-height: 100svh; display: grid; align-content: center;
  padding-block: clamp(16px, 4vh, 40px);
}
body:has(.dg-odak) .dg-bas{ padding-top: 14px; }
body:has(.dg-odak) .dg-bas .ust-etiket,
body:has(.dg-odak) .dg-bas .sayfa-h1,
body:has(.dg-odak) .dg-not{ display: none; }

/* ============================================================
   AR KATMANI — YER TUTUCU
   ------------------------------------------------------------
   Slot BİLEREK boş ve boş olduğunu söylüyor. Video slotu da bir
   gün böyle durdu: sahte oynatıcı basmak yerine dürüst bir yer
   tutucu bırakmıştık, içerik gelince gerçeğiyle değiştirdik.

   Çerçeve KAMERA NİŞANGÂHI dili konuşuyor: dört köşe işareti ve
   ortada yükselen bir nesnenin silueti. Ziyaretçi ne olacağını
   bir bakışta anlıyor — açıklama okumadan önce.

   Hareket YOK: çalışan bir şey varmış izlenimi vermemeli. Duran
   bir şema, çalışan bir taklitten dürüst. */
.dg-ar-yuva{
  display: flex; flex-direction: column; align-items: center;
  gap: calc(10px * var(--dg-olcek)); text-align: center;
}
.dg-ar-cerceve{
  position: relative; width: 100%;
  aspect-ratio: 4 / 3; border-radius: var(--r-kart);
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(123,79,255,.14), transparent 62%),
    repeating-linear-gradient(45deg, rgba(123,79,255,.05) 0 8px, transparent 8px 16px),
    var(--zemin-2, #11163A);
  border: 1px dashed rgba(123,79,255,.34);
  overflow: hidden;
}
/* Dört köşe nişangâhı */
.dg-ar-kose{
  position: absolute; width: 16%; height: 16%;
  border: 2px solid rgba(201,182,255,.62);
}
.dg-ar-kose-su{ top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.dg-ar-kose-sa{ top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.dg-ar-kose-au{ bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.dg-ar-kose-aa{ bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
/* Sayfadan yükselen nesnenin silueti */
.dg-ar-nesne{
  position: absolute; left: 50%; top: 52%;
  width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid rgba(201,182,255,.5);
  border-radius: 10%;
  background: linear-gradient(160deg, rgba(123,79,255,.22), rgba(123,79,255,.04));
}
.dg-ar-durum{
  margin: 0; font-family: var(--font-mono);
  font-size: calc(11px * var(--dg-olcek));
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--vurgu-metin);
}
.dg-ar-not{
  margin: 0; font-size: calc(11.5px * var(--dg-olcek));
  line-height: 1.5; color: var(--metin-sessiz); text-wrap: balance;
}
/* Asset sayfası düzeniyle aynı hizaya girsin. */
.dg-asset > .dg-ar-yuva{ margin: auto 0; width: 100%; }

/* ETKİLEŞİMLİ ARAÇLAR KENDİ İÇİNDE KAYIYOR.
   Test dört soru, her biri üç seçenek; hesaplayıcı üç girdi ve üç
   sonuç kutusu. Dergi sayfasının kutusu (≈380px) bunlara her zaman
   yetmiyor — ölçüldü: 9. sayfa en küçük ölçek kademesinde bile
   49px taşıyordu.

   Metni daha da küçültmek okunmaz yapardı. Doğru davranış kaydırma:
   bunlar düzyazı değil, DOLDURULAN araçlar — formun kaydırılması
   okuma akışını bozmuyor. Asıl kazanç, `overflow: visible` ile
   kutudan taşıp sayfa folyosunun üstüne akmanın bitmesi.

   Odak sayfalarında (/g/<kod>) kaydırma gereksiz: orada araç
   ekranın tamamını alıyor, yükseklik zaten serbest. */
.dg.cevrilir .dg-test,
.dg.cevrilir .dg-hesap{ overflow-y: auto; overscroll-behavior: contain; }
.dg-odak .dg-test,
.dg-odak .dg-hesap{ overflow: visible; }

/* 3D MODEL SAYFASI (/g/d9) — sayfada modelden başka bir şey yok. */
.model-bolum{ min-height: 100svh; display: grid; align-content: center; }
.model-sahne{
  width: 100%; max-width: 560px; margin-inline: auto;
  aspect-ratio: 1; border-radius: var(--r-kart);
  display: grid; place-items: center; touch-action: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(123,79,255,.16), transparent 62%);
}
.model-sahne canvas{ display: block; }
.model-durum{ margin: 0; font-size: 13px; color: var(--metin-sessiz); }
.model-ipucu{
  margin: 14px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--metin-sessiz);
}

/* Tam sayfa (dg-tam) sayfalarında kod paneli: yazı bloğunun içinde
   duruyor, asset sayfalarındaki gibi sayfanın tamamını kaplamıyor —
   burada zaten tam kapaklı bir görsel var. */
/* BEYAZ KART ŞART — YOKLUĞUNDA YAZI GÖRÜNMÜYORDU.
   Blok koyu, tam kapaklı bir görselin üstünde duruyor ama
   çocuklarının rengi açık yüzey belirteçlerinden geliyor:
   çağrı lacivert 900, adres mor 900. Ölçüldü (basılı yüzey,
   3. sayfa): "3D modeli açın" rgb(10,13,36) ile neredeyse
   siyah görselin üstünde — okunmuyor.

   Renkleri koyuya çevirmek yerine ZEMİN açığa alınıyor, çünkü
   gerçek dergide de kod görselin üstüne basılmış beyaz bir
   kutunun içinde durur; tarayıcı da o kutuyu kenarından
   yakalayıp odaklanır. Aynı çözüm .dg-tam .dg-kod'da zaten
   uygulanmıştı; bu varyant atlanmıştı. */
.dg[data-yuzey="basili"] .dg-tam .dg-basili-kod-tam{
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: calc(10px * var(--dg-olcek)); height: auto; text-align: left;
  margin-top: calc(12px * var(--dg-olcek));
  padding: calc(12px * var(--dg-olcek));
  border-radius: var(--r-kart);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 40px -24px rgba(10, 13, 36, .7);
}
.dg[data-yuzey="basili"] .dg-tam .dg-basili-kod-tam .dg-basili-kod-gorsel{
  width: calc(74px * var(--dg-olcek)); height: calc(74px * var(--dg-olcek));
  grid-row: 1 / span 4;
}
.dg[data-yuzey="ekran"] .dg-basili-kod-tam{ display: none; }

/* ============================================================
   TABLET DÜZELTMELERİ — 2026-09-23
   ------------------------------------------------------------
   Dört şikâyet, tek kök: tablet genişliği (601–1023px) hiçbir
   yerde kendi kuralını almıyordu. Kurallar ya masaüstü (1024+)
   ya telefon (≤600) için yazılmış, tablet ikisinin arasına
   düşüyordu — ızgaralar telefon gibi sarıyor, tam ekran bloklar
   masaüstü gibi davranıp 1180px'lik ekranda yarısı boş kalıyordu.

   Bu blok DOSYANIN SONUNDA. Aynı özgüllükteki eski kuralları
   kaynak sırasıyla yenmesi gerekiyor; bu dosyada aynı hata üç
   kez yapıldı (.kanal, .ucan-logo .marka-ad, .yigin-kategori h2)
   ve hepsi ölçümle yakalandı. Buraya taşımak o riski kapatıyor.
   ============================================================ */

/* ---------- 1 · ÜÇLÜ IZGARALAR TABLETTE DE ÜÇ SÜTUN ----------
   İstek: "bu tarz duran kartların hiçbir şekilde aşağı taşmasını
   istemiyoruz, 3'ü de yan yana durup premium görünmeli."

   Sebep: iki ızgara da auto-fit + minmax(260/280px). 820px'lik
   tablette kap 754px; üç sütun 3x260 + 2x32 boşluk = 844px
   istiyor, sığmayınca auto-fit ikiye düşüyor ve üçüncü kart alt
   satıra tek başına kalıyordu (ölçüldü: 361px x 2 sütun).

   auto-fit'i BIRAKIP sabit üç sütun veriyoruz: sütun 754/3 ≈ 230px.
   260'ın altında ama okunur — bunu mümkün kılan şey boşluğun da
   küçülmesi. auto-fit'i "daha küçük minmax" ile zorlamak yerine
   sabit sayı yazmak bilinçli: kart sayısı üç, ızgara da üç. */
@media (min-width: 601px) and (max-width: 1023px){
  .neden-sutunlar{
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
  }
  /* :has ile YALNIZ üç kartlı ızgara. #blog-onizleme de
     .kart-izgara.uc sınıfını taşıyor ama beş kartlı ve zaten
     yatay şeride dönüşüyor; üç sütun ona uygulanırsa o çözümü
     bozardı. Seçici "üçüncü çocuk aynı zamanda sonuncu" diyor. */
  .kart-izgara.uc:has(> :nth-child(3):last-child){
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
  }
  /* Üç sütuna sıkışınca punto da inmeli, yoksa başlıklar dört
     satıra bölünüp kartları eşitsiz uzatıyor. */
  .neden-sutunlar h3{ font-size: 17px; }
  .neden-sutunlar p{ font-size: 14px; }
  .kart-izgara.uc:has(> :nth-child(3):last-child) .yazi-kart h3{ font-size: 17px; }
}

/* ---------- 2 · TAM EKRAN HERO'LARDA ÖLÜ ALAN ----------
   İstek: "burası da çok aşağı kaymış."

   Ölçüm (820x1180, Smart Medya): bölüm 1115px, içerik 490px,
   üstte 386px + altta 305px BOŞ. Yani ekranın %62'si hiçbir şey.
   Sebep: min-height 100lvh - 65 + justify-content:center. Kural
   masaüstü için doğru (900px ekranda içerik ekranı doldurur) ama
   tablet dikeyde ekran 1180 ve içerik büyümüyor.

   Çözüm yüksekliği SINIRLAMAK, hizayı değiştirmek değil: üste
   yaslasaydık altta 600px'lik tek parça boşluk kalırdı, şimdi
   kalan pay ikiye bölünüp 165/165 oluyor ve altından bir sonraki
   bölümün üst kenarı görünüyor — kaydırma daveti olarak okunuyor.

   "İkinci bölüm ilk ekrana sızmasın" gerekçesiyle konmuş bir
   kuraldı; o gerekçe 900px ekran için geçerli, 1180px tablet
   için değil. min-height:700px eşiği de sadece ALT sınır koyuyor,
   üst sınır hiç yoktu. */
@media (max-width: 1023px) and (min-height: 880px){
  .ai-bas, .sm-bas, .kr-bas, .dp-bas, .bk-bas{
    min-height: min(calc(100lvh - 65px), 800px);
  }
  .hero{
    min-height: min(calc(100svh - var(--ust-yukseklik)), 840px);
  }
  /* Katmanlı yapışkan bölümler (anasayfa Biz Kimiz, konuşan
     broşür) aynı sorunu yaşıyor ama SABİTLENDİKLERİ için
     yükseklikleri kısaltılamaz: kısalan yapışkan blok ekranın
     altında bir şerit açar ve arkasındaki katman sızar. Onlarda
     yalnız iç dolguyu kısıyoruz; kutu tam ekran kalıyor. */
  .katmanli > #biz,
  .katmanli > .katman-alt,
  .katmanli > .katman-orta,
  .katman-ust{ padding-block: var(--s-5); }
}

/* ---------- 3 · DİKEY RAY: KART EKRANIN ÜST YARISINDA ----------
   İstek: "hizmet portföyü sayfası çok aşağı kaymış, kartların
   yarısı ve yazıları gözükmüyor."

   Yapışkan blok 1115px ve içerik ~700px; ortalayınca kart 200px
   aşağıdan başlıyor ve 900px'te bitiyor. Gerçek iPad'de sığıyor
   ama bölüm YERİNE OTURMADAN önceki anda (blok henüz doğal
   akışındayken) kartın altı ekran dışında kalıyor — kullanıcının
   yakaladığı kare tam oydu.

   Burada yüksekliği kısaltamayız (yukarıdaki yapışkan gerekçesi).
   Bunun yerine içeriği üste yaslayıp ölçülü bir nefes payı
   veriyoruz: kart artık her koşulda ekranın üst yarısında
   başlıyor, oturma anıyla oturmuş hâli arasındaki fark kayboluyor. */
@media (max-width: 1023px) and (min-height: 880px){
  .giris-alan[data-ray="dikey"] .giris-yapisik,
  .demo-alan[data-ray="dikey"] .demo-yapisik,
  .kategori-alan[data-ray="dikey"] .kategori-yapisik{
    justify-content: flex-start;
    padding-top: clamp(16px, 4svh, 48px);
  }
}

/* ---------- 4 · ANASAYFA HERO ARKA PLANI ----------
   İstek: "landing page'e sade bir arkaplan görüntüsü ekleyelim
   çok sade kalmış, ama yazıların okunurluğunun önüne geçmesin."

   GÖRSEL SEÇİMİ TESADÜF DEĞİL. bk-uctan-uca.webp: tek bir mor
   ışık ipliği arka arkaya duran cam panellerin içinden kesintisiz
   geçiyor. Hero'nun kendi cümlesi zaten bu — "parçalı değil,
   uçtan uca yürütürüz". Kılavuz s.15 klişe yapay zeka imgesini
   (robot, beyin, devre) yasaklayıp soyut ışık izi ve katman
   istiyor; bu görsel ikisini birden yapıyor. Sitede başka hiçbir
   yerde kullanılmıyordu, yani tekrar hissi de yok.

   OKUNURLUK — ÜÇ KATMANLI PERDE, TEK DÜZ SİYAH DEĞİL:
   1) Soldan sağa: metnin durduğu sol tarafı neredeyse opak
      yapıyor (0.94), sağa doğru açılıyor (0.55) — ışık ipliği ve
      paneller orada nefes alıyor.
   2) Yukarıdan aşağı: alt kenarı koyulaştırıyor, böylece bölüm
      altındaki koyu zemine dikişsiz bağlanıyor.
   3) background-position: right center — kompozisyonun kalabalık
      yarısı (paneller) sağa, sakin yarısı metnin altına düşüyor.

   Ölçülen kontrast: başlık beyaz üstünde en açık nokta ~%6
   parlaklık → 17:1'in üstünde, WCAG AAA fazlasıyla karşılanıyor.
   .hero-fon tuvali (media.js) bu katmanın ÜSTÜNDE çizmeye devam
   ediyor; fotoğraf onun yerini almıyor, altına giriyor. */
.hero{
  background-image:
    linear-gradient(90deg,
      rgba(10, 13, 36, 0.94) 0%,
      rgba(10, 13, 36, 0.90) 38%,
      rgba(10, 13, 36, 0.70) 68%,
      rgba(10, 13, 36, 0.55) 100%),
    linear-gradient(180deg,
      rgba(10, 13, 36, 0.35) 0%,
      rgba(10, 13, 36, 0.10) 40%,
      rgba(10, 13, 36, 0.85) 100%),
    url("gorseller/bk-uctan-uca.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
/* DAR EKRANDA PERDE YATAY DEĞİL DİKEY BÖLGELENİYOR.
   Metin tek sütuna inip kabın tamamını kapladığı için yatay
   geçişin "açık" ucu yazının ALTINA geliyordu. Düz bir dikey
   perde de denendi (0.90 / 0.86 / 0.95): okunur ama görseli
   tamamen yutuyordu — kullanıcının "çok sade" dediği hâlden
   farkı kalmıyordu.

   Bölgeler metnin GERÇEK yerine göre (ölçüldü: içerik hero'nun
   %31–%61 bandında duruyor):
     0–30    üst pay, yazı yok        → 0.86
     30–64   KİCKER'DAN MOTTO'YA      → 0.92  (en koyu, dokunulmaz)
     64–86   boş bant                 → 0.58  (görsel burada okunuyor)
     86–100  alt kenar                → 0.90  (sonraki koyu bölüme dikişsiz bağ)

   %58'lik açıklıkta en parlak piksel (ışık ipliği, ~0.95 bağıl
   parlaklık) bile metnin altına girmiyor; o bantta yazı yok. */
@media (max-width: 900px){
  .hero{
    background-image:
      linear-gradient(180deg,
        rgba(10, 13, 36, 0.86) 0%,
        rgba(10, 13, 36, 0.92) 30%,
        rgba(10, 13, 36, 0.92) 64%,
        rgba(10, 13, 36, 0.58) 86%,
        rgba(10, 13, 36, 0.90) 100%),
      url("gorseller/bk-uctan-uca.webp");
    background-position: center;
  }
}

/* ---------- 5 · HERO ÜST ETİKETİ ----------
   İstek: "yapay zeka destekli" sıfatı kaldırıldı, kalan cümle
   boşluğu doldurarak premium yerleşsin.

   Sıfat çıkınca satır 45 karakterden 26'ya düştü ve hero'nun sol
   sütununda asılı kaldı: altındaki H1 iki tam satır, üstteki
   etiket onun yarısı kadar bile değil. Sorun uzunluk değil,
   ETİKETİN ARTIK BİR ÇAPASI OLMAMASI.

   Çözüm metni uzatmak değil (sıfatı geri koymak olurdu), ona bir
   başlangıç işareti vermek: mor kısa bir çizgi. Kılavuzun mono
   kicker dilini bozmuyor, satırı sol kenara çapalıyor ve göz
   etiketi H1'in başlangıcıyla aynı hizada okuyor. Aynı jest
   basılı editoryal tasarımda bölüm işareti olarak kullanılıyor.

   Harf aralığı da bir tık açıldı: kısa bir mono satırda standart
   aralık sıkışık duruyor, uzun satırda fark edilmiyordu. */
.hero-kicker{
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.2em;
  margin-bottom: var(--s-3);
}
.hero-kicker::before{
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--vurgu);
  border-radius: 2px;
}
/* Dar ekranda çizgi kısalıyor: 34px, 360px'lik telefonda satırın
   onda birini yiyor ve metni sağa itip ikinci satıra kırıyordu. */
@media (max-width: 560px){
  .hero-kicker{ gap: 10px; letter-spacing: 0.16em; }
  .hero-kicker::before{ width: 20px; }
}

/* ============================================================
   QR EKRANI — /g/<kod>  (2026-09-24)
   ------------------------------------------------------------
   İstek: her kare kodun kendi ekranı tek ve premium dursun; UI/UX
   ve görünüş açısından kitten ve siteden örnek alınsın.

   İskelet (kur-media.js qrBas / qrImza) yedi kodda aynı. Görsel
   dil sitenin hero'sundan: Lacivert 900 zemin, mor ışıma, mor
   çizgili mono üst etiket, Manrope başlık. İçerik kartları iki
   türde:
     · kâğıt kart (açık) — dergi sayfası, test, form. "Basılı
       sayfanın ekrana taşınmış hâli"; okutan kişinin elindeki
       kâğıtla aynı yüzey.
     · cam kart (koyu) — video ve 3D model; görüntünün kendisi
       koyu zeminde daha iyi duruyor.

   Seçici body:has(.qr-bas): kalıbın body'sine yeni bir işaret
   eklemek yerine iskeletin varlığına bakıyor. :has bu dosyada
   zaten kullanılıyor (.bolum:has(.yigin), .kart-izgara.uc:has).
   ============================================================ */
body:has(.qr-bas){
  min-height: 100svh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(110% 55% at 90% -8%, rgba(123, 79, 255, 0.30), transparent 62%),
    radial-gradient(80% 45% at -12% 105%, rgba(123, 79, 255, 0.14), transparent 60%),
    var(--lacivert-900);
}
body:has(.qr-bas) > main{ flex: 1 0 auto; }

.qr-bas,
.qr-govde,
.qr-imza,
body:has(.qr-bas) .dg-odak{
  width: min(100% - 2 * var(--kap-bosluk), 620px);
  margin-inline: auto;
}
.qr-bas{ padding-top: max(20px, env(safe-area-inset-top)); }
.qr-marka{ display: inline-flex; align-items: baseline; gap: 8px; color: var(--saf-beyaz); text-decoration: none; }
.qr-baslik{ margin-top: clamp(28px, 6svh, 56px); }
.qr-etiket{ margin-bottom: var(--s-2); }
.qr-h1{
  margin: 0;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: clamp(31px, 8.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--saf-beyaz);
  /* Başlık kâğıttaki çağrının kendisi; tek satıra sığmazsa dengeli kırılsın. */
  text-wrap: balance;
}
.qr-aciklama{
  margin: 14px 0 0;
  max-width: 36ch;
  font-size: 15.5px; line-height: 1.55;
  color: var(--metin-govde);
}

/* İçerik alanı. */
.qr-govde{ margin-top: clamp(22px, 4svh, 36px); }
.qr-kart{
  border-radius: 22px;
  padding: clamp(18px, 5vw, 28px);
  background: var(--saf-beyaz);
  color: var(--metin);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* Kâğıt kartta yerel form öğeleri AÇIK şemayla çizilsin; body koyu
     olduğu için tarayıcı onları koyu çiziyordu (d4'te seçilmemiş
     seçenekler dolu siyah daire görünüyordu — seçilmiş gibi). */
  color-scheme: light;
}
.qr-kart-koyu{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(195, 176, 255, 0.16);
  color: var(--saf-beyaz);
  color-scheme: dark;
}

/* d3 — video */
.qr-video{
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; background: #000;
}
.qr-dokum{ margin: 18px 0 0; }
.qr-dokum p{
  margin: 0;
  font-family: var(--font-baslik); font-weight: 600;
  font-size: 18px; line-height: 1.4; color: var(--saf-beyaz);
}
.qr-not{
  margin: 12px 0 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; line-height: 1.6; color: var(--metin-sessiz);
}

/* d9 — 3D model: kartın içinde, arka plandaki mor ışımayla. */
.qr-model{ padding: 8px; }
.qr-model .model-sahne{ max-width: none; border-radius: 16px; }

/* d6 — form: tek sütun, telefonda rahat dokunma. */
.qr-form{ grid-template-columns: 1fr; gap: 14px; }
.qr-form input,
.qr-form textarea{ font-size: 16px; }   /* 16px altı iOS'ta odaklanınca sayfayı büyütüyor */
.qr-gonder{ width: 100%; justify-content: center; }
.qr-bal{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Alt imza — kenara yapışık ve kesik değil; güvenli alan payıyla. */
.qr-imza{
  margin-top: clamp(28px, 5svh, 44px);
  padding: 18px 0 max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--metin-sessiz);
}
.qr-imza a{ color: var(--mor-300); text-decoration: none; }
.qr-imza a i{ font-style: normal; display: inline-block; transition: transform 0.25s var(--ease); }
.qr-imza a:hover i{ transform: translateX(4px); }

/* ---------- Dergi odak sayfaları QR iskeletinde ----------
   Dergi gövdesi katmanlı yapışkan bir bölümün içinde geliyor
   (.katmanli > .katman-alt, 100lvh ve sticky). Tek içerikli
   ekranda o mekanik anlamsız ve açık gri tam ekran zemin
   iskeletin koyu zeminini örtüyordu; sıradan akışa alınıyor. */
body:has(.qr-bas) .katmanli,
body:has(.qr-bas) .katman-alt{
  position: static; min-height: 0; display: block;
  background: transparent; padding: 0;
}
body:has(.qr-bas) .katman-alt > .kap{ width: auto; }
body:has(.qr-bas) .dg-odak{ margin-top: clamp(22px, 4svh, 36px); display: flex; flex-direction: column; gap: 14px; }
body:has(.qr-bas) .dg-odak .dg-tabaka{ max-width: none !important; }
body:has(.qr-bas) .dg-odak .dg-sayfa[data-odak-sayfa]{
  border-radius: 22px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  color-scheme: light;
}
/* "CANLI" etiketi: başlık artık üst blokta, bu etiket bir şey söylemiyordu. */
body:has(.qr-bas) .dg-odak .dg-asset > .dg-ust-etiket{ display: none; }

/* d2 — "Bu yazıyı dinleyin": vaat dinlemek, oynatıcı İLK görünen şey.
   Önce metnin altında ikincildi; okutan kişi düğmeyi aramak için
   kaydırıyordu. */
body:has(.qr-bas) .dg-odak[data-odak="2"] .dg-oynatici{
  order: -1;
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40);
}

/* d4 — test seçenekleri: eşit genişlikli bölümlü seçici.
   Önce satır sonunda kırılan çiplerdi (3 + 1 düzensiz dizilim) ve
   yerel radyo düğmeleri koyu şemayla dolu daire çiziliyordu.
   Yerel girdi ERİŞİLEBİLİR kalıyor (görsel olarak gizli, odak ve
   klavye çalışıyor); seçimi etiketin kendisi gösteriyor. */
body:has(.qr-bas) .dg-odak .dg-soru{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 18px;
}
body:has(.qr-bas) .dg-odak .dg-soru legend{ margin-bottom: 10px; }
body:has(.qr-bas) .dg-odak .dg-soru label{
  position: relative; margin: 0;
  justify-content: center; text-align: center;
  min-height: 48px; padding: 8px 6px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.25;
}
body:has(.qr-bas) .dg-odak .dg-soru input{
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
body:has(.qr-bas) .dg-odak .dg-soru label:has(input:focus-visible){
  outline: 2px solid var(--mor-500); outline-offset: 2px;
}

/* ÖZGÜLLÜK DÜZELTMESİ. Eski odak kipi kuralı
   body:has(.dg-odak) .bolum:has(.dg-odak){ min-height:100svh; display:grid;
   align-content:center } özgüllükte (0,3,1) ile yukarıdaki (0,2,1)'i
   yeniyordu: bölüm 100svh boyunda ızgarayla dikey ortalanıyor, üstüne
   QR başlığı gelince açıklama ile içerik arasında ~130px boşluk
   kalıyordu (ölçüldü). O kural başlıksız eski odak ekranı için doğruydu;
   QR iskeletinde başlık zaten var, içerik başlığın hemen altına akmalı. */
body:has(.qr-bas) .bolum.katman-alt:has(.dg-odak){
  min-height: 0; display: block; padding-block: 0;
}

/* Alan adı büyük harfe çevrilmez: sayfa lang="tr" olduğu için
   text-transform:uppercase "i"yi "İ" yapıyor ve alan adı
   "BİGSOLUTİONS.MEDİA" diye bozuk görünüyordu. */
.qr-imza span{ text-transform: none; letter-spacing: 0.06em; }

/* d4 — seçili seçenek belirgin olsun: %9 mor dolgu telefonda silik
   kalıyordu; parmağın altındaki seçimin tuttuğu bir bakışta görünmeli. */
body:has(.qr-bas) .dg-odak .dg-soru label:has(input:checked){
  background: rgba(123, 79, 255, 0.12);
  border-color: var(--mor-700);
  color: var(--mor-900);
  font-weight: 600;
}
/* Ana eylem tam genişlik — d6'daki gönder düğmesiyle aynı kalıp. */
body:has(.qr-bas) .dg-odak .dg-test > .dugme,
body:has(.qr-bas) .dg-odak .dg-test button[type="submit"],
body:has(.qr-bas) .dg-odak .dg-test-gonder{ width: 100%; justify-content: center; }
body:has(.qr-bas) .dg-odak [data-test-bitir]{ width: 100%; justify-content: center; }

/* Tüm dergi kodlarında kart aynı genişlikte: d10'da tabaka kabından iki
   yanda 8px içeride kalıyordu (ölçüldü: 342px, ötekiler 358px). */
body:has(.qr-bas) .dg-odak .dg-sahne{ padding: 0 !important; }
body:has(.qr-bas) .dg-odak .dg-tabaka{ margin-inline: 0 !important; width: auto !important; }

/* d7 — "Dergiye sorun": sohbet panelinin KENDİSİ kart. Beyaz kâğıt kartın
   içinde koyu panel, etrafında beyaz bir çerçeve gibi duruyordu. */
body:has(.qr-bas) .dg-odak[data-odak="5"] .dg-sayfa[data-odak-sayfa]{
  background: transparent !important; padding: 0 !important;
  box-shadow: none !important;
}
body:has(.qr-bas) .dg-odak[data-odak="5"] .dg-sohbet-yuva{
  height: min(66svh, 580px) !important;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(195, 176, 255, 0.14);
}

/* d10 — "Dergiye sesli sorun": sesli bir özellik; mikrofon ekranın
   kahramanı olmalı. 64px düğme ve minik çipler sönük kalıyordu. */
body:has(.qr-bas) .dg-odak[data-odak="7"] .dg-sayfa[data-odak-sayfa]{
  padding: clamp(30px, 8vw, 44px) clamp(18px, 5vw, 28px) !important;
}
body:has(.qr-bas) .dg-odak[data-odak="7"] .dg-sor-mik{
  width: 96px; height: 96px;
  box-shadow: 0 0 0 10px rgba(123, 79, 255, 0.12), 0 0 0 22px rgba(123, 79, 255, 0.06),
              0 18px 40px rgba(123, 79, 255, 0.35);
}
body:has(.qr-bas) .dg-odak[data-odak="7"] .dg-sor-mik svg{ width: 34px; height: 34px; }
body:has(.qr-bas) .dg-odak[data-odak="7"] .dg-sayfa[data-odak-sayfa] button:not(.dg-sor-mik){
  min-height: 40px; font-size: 13.5px;
}
/* .dg-sor dergide 154px SABİT yükseklikte, içeriği ortalayan bir esnek
   kutu. Mikrofon büyüyünce içerik 220px'e çıktı ve ortalandığı için iki
   yandan taştı (mikrofon kartın üst kenarına yapıştı, çip kırpıldı —
   ölçüldü). QR ekranında kutu içeriğine göre uzuyor. */
body:has(.qr-bas) .dg-odak[data-odak="7"] .dg-sor{ height: auto !important; min-height: 0; gap: 16px; }
/* d7 köşe çizgisi: yuvanın zemini açık griydi ve iç panelin yuvarlak
   köşeleri onu açıkta bırakıyordu; sayfanın 1px açık kenarlığı da
   koyu kartın çevresinde ince bir çizgi çiziyordu. */
body:has(.qr-bas) .dg-odak[data-odak="5"] .dg-sayfa[data-odak-sayfa]{ border: 0 !important; }
body:has(.qr-bas) .dg-odak[data-odak="5"] .dg-sohbet-yuva{ background: var(--lacivert-900) !important; }

/* ============================================================
   YATAY KALAN KART GRUPLARI — TABLET VE MOBİL  (2026-09-24)
   ------------------------------------------------------------
   İstek: "PC'de yatay duran kartlar ve kartçıklar mobilde de
   yatayda sıralanmalı, PC şablonunu takip etmeli, ona göre doğru
   ölçeklendirilmeli."

   Önceden bu gruplar dar ekranda tek sütuna düşüyordu: ai-asistan
   sayfasında üç ölçüm kartı 936px, dört adım 1259px boy tutuyordu
   ve PC'de yan yana kıyaslanan dizi bir listeye dönüşüyordu.

   TABLET (601–1023): PC'deki sütun sayısı aynen korunuyor, dizi
   tek satır. grid-auto-flow: column → kaç kart varsa o kadar sütun,
   sayı elle yazılmıyor (adım şeridi bir sayfada 3, ötekinde 4).

   MOBİL (≤600): sütunlar okunaksız daralacağı için dizi yana
   kaydırılan bir şerit oluyor — anasayfa raylarının dar ekran
   kalıbıyla aynı: kenardan kenara, ilk kart kap hizasında başlıyor,
   yanında bir sonrakinin kenarı görünüyor, parmakla sürülüyor ve
   kart kart oturuyor. Sayfa dikey kaydırmasını koruyor.

   ÖZGÜLLÜK: "html body" öneki bilerek. .kart-izgara.kurucu-izgara
   (0,2,0) ve 900px altındaki tek sütun kuralları bu bloktan önce
   geliyor; önek olmadan bazıları kazanıyordu.

   KAPSAM DIŞI (bilerek alt alta kalanlar): form + iletişim bilgisi
   (.iletisim-izgara), metin sütunları (.isim-hikaye yalnız başına),
   yığın kartının içi (görsel + metin), soru çipleri (.kb-bolumler),
   altbilgi sütunları. Bunlar kart dizisi değil, sayfa düzeni.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1023px){
  html body .olcum-kartlar,
  html body .adim-serit,
  html body .guven-izgara,
  html body .isim-hikaye.kimler-izgara,
  html body .kart-izgara.kurucu-izgara{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
  /* Dergi kuralları altı kart; PC'de 3×2 ızgara, tek satır değil.
     Tabletde de PC gibi üç sütun, iki satır (tek satırda kart 106px
     kalıyor ve metin taşıyordu — ölçüldü). */
  html body .isim-hikaye.kimler-izgara.dergi-kural-izgara{
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html body .kanal-serit{ flex-wrap: nowrap; }
  /* Dört kanal 171px'e düşüyor; simge yanında etiket "Kreatif /
     Video" diye ikiye kırılıyordu. Simge üstte, etiket altta tek
     satır: kart dar ama düzenli. */
  html body .kanal-serit > .kanal{ flex: 1 1 0; min-width: 0; text-align: center; flex-direction: column; }
  /* .sahne-bolum .kanal-serit .isim-kat (0,3,0) 24px iç boşluk veriyor;
     171px'lik kartta "Web Deneyimleri" ikiye kırılıyordu. */
  html body .sahne-bolum .kanal-serit > .kanal{ padding-inline: var(--s-2); }
}

@media (max-width: 600px){
  /* YANA KAYDIRMALI ŞERİT KALDIRILDI (2026-09-29). İstek: "yatay
     kaydırma ihtiyacı oluyor ve sayfa ilk açıldığında kötü gözüküyor;
     ilk kart tek ve tam görünsün, aşağı kaydırdıkça kartlar değişsin,
     kartlar bitince sayfa kaymaya devam etsin." Ölçüm, adım, güven ve
     kimler kartları artık media.js "KART SAHNESİ" ile yapışkan bir
     sahnede üst üste duruyor (bk. .kart-sahnesi, dosya sonu).

     KANAL KAROLARI SAHNEYE ALINMADI: dört kısa etiket (simge + iki
     kelime); her biri için bir ekran kaydırması istemek abartı olurdu.
     2×2 ızgarada dördü birden, kaydırmasız görünüyor. */
  html body .kanal-serit{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2, 12px);
  }
  html body .kanal-serit > .kanal{ min-width: 0; flex-direction: column; text-align: center; padding-inline: var(--s-2, 12px); }

  /* KURUCULAR ŞERİT DEĞİL, PC GİBİ YAN YANA İKİ SÜTUN. İki kısa kart
     (ad, kol, e-posta) 171px'e sığıyor; kaydırmalı şeritte ikinci
     kurucu ekran dışında kalıyor ve eşitlik bozuluyordu. Ölçek
     sütuna göre küçüldü; e-posta gerekirse @ işaretinden kırılıyor. */
  html body .kart-izgara.kurucu-izgara{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  html body .kurucu-izgara .kurucu h3{ font-size: 1.0625rem; }
  html body .kurucu-izgara .kurucu-kol{ font-size: 0.6875rem; letter-spacing: 0.04em; }
  /* E-posta ortadan kırılınca ("bigsolutions.me / dia") okunmuyordu;
     yazı küçülüp tek satırda kalıyor. */
  html body .kurucu-izgara .kurucu-eposta{ font-size: 0.6875rem; white-space: nowrap; }
}

/* ============================================================
   DERGİ GEZİNMESİ — TELEFON  (2026-09-28)
   ------------------------------------------------------------
   Şikâyet: "Telefonda dergi demosunda önceki sayfaya dönemiyorum."

   Ölçüldü (402px, iPhone): on iki numara 26px + 6px aralıkla 378px
   tutuyor, iki okla birlikte satır ~490px istiyor. Kap 370px;
   justify-content:center taşmayı iki yana dağıttığı için "önceki"
   oku -44px'e, "sonraki" oku 406px'e — ikisi de EKRAN DIŞINA —
   itiliyordu. Telefonda geri dönmenin görünür tek yolu kalmamıştı.

   Şimdi oklar satırın iki ucunda sabit, numaralar aradaki alanda
   yana kayan bir şerit; etkin numara JS'te şeridin ortasına
   getiriliyor (cizle). Oklar 44px: Apple'ın asgari dokunma hedefi. */
@media (max-width: 600px){
  .dg .dg-gezinme{
    justify-content: space-between;
    gap: 8px;
    padding-inline: var(--s-2);
  }
  .dg .dg-ok{ width: 44px; height: 44px; font-size: 18px; }
  .dg .dg-noktalar{
    position: relative;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 4px;
    /* Kenarlarda yumuşak geçiş: şeridin devam ettiği anlaşılsın. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .dg .dg-noktalar::-webkit-scrollbar{ display: none; }
  .dg .dg-noktalar > li:first-child{ margin-left: auto; padding-left: 10px; }
  .dg .dg-noktalar > li:last-child{ margin-right: auto; padding-right: 10px; }
  .dg .dg-nokta{ width: 30px; height: 30px; }
}

/* ============================================================
   ÜRÜN TANITIM FİLMİ DEMOSU  (demolar/urun-tanitim)  ·  2026-09-28
   ------------------------------------------------------------
   Canlı deneyim bölümü katman zincirinin İLK halkası (katman-alt):
   sabitlenince altı kaydırılamıyor, yani film + bölümler + not
   TEK EKRANA sığmak zorunda (konuşan broşürdeki aynı kural).

   Geniş ekranda iki sütun: film solda, bölüm listesi sağda dikey.
   Filmin genişliği EKRAN YÜKSEKLİĞİNDEN türüyor (16:9) — kap
   genişliğinden türeseydi 1200px'lik kapta film 675px boy alır ve
   900px'lik ekranda bölüm taşardı. Dar ekranda tek sütun: film
   üstte, bölümler altında yana kayan çip şeridi.
   ============================================================ */
.uf{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-4);
}
.uf-perde{
  width: min(100%, calc((100svh - 330px) * 16 / 9));
  justify-self: end;
  border-radius: var(--r-kart);
  overflow: hidden;
  background: #05060f;
  box-shadow: 0 24px 60px -28px rgba(10, 13, 36, .55), 0 0 0 1px var(--kenar);
}
.uf-video{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #05060f; }

.uf-alt{ display: flex; flex-direction: column; gap: var(--s-2); }
.uf-etiket{
  margin: 0; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .14em; color: var(--vurgu-kicker);
}
.uf-bolumler{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.uf-bolum-dugme{
  width: 100%; min-height: 40px; padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--kenar); border-radius: var(--r-kart);
  background: transparent; color: var(--metin-govde);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.uf-bolum-dugme b{
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  color: var(--metin-sessiz); min-width: 34px;
}
.uf-bolum-dugme:hover{ border-color: var(--mor-300); }
.uf-bolum-dugme:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; }
.uf-bolum-dugme.acik{
  border-color: var(--mor-700); background: var(--vurgu-yumusak); color: var(--vurgu-kicker);
}
.uf-bolum-dugme.acik b{ color: var(--vurgu-kicker); }
.uf-not{
  margin: var(--s-1, 8px) 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--metin-sessiz);
}

@media (max-width: 1023px){
  .uf{ grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .uf-perde{ width: 100%; justify-self: stretch; }
  /* Bölümler yana kayan şerit: altı çip alt alta 280px tutardı ve
     sabitlenen bölüm ekrana sığmazdı. */
  .uf-bolumler{
    position: relative;
    flex-direction: row; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--kap-bosluk) * -1);
    padding: 2px var(--kap-bosluk);
    scroll-padding-inline: var(--kap-bosluk);
  }
  .uf-bolumler::-webkit-scrollbar{ display: none; }
  .uf-bolumler > li{ flex: none; }
  .uf-bolum-dugme{ width: auto; white-space: nowrap; border-radius: var(--r-rozet, 999px); }
}

/* ---------- 02 · KURGU ŞERİDİ (ürün filmi) ----------
   Dört kare sırayla yanıyor, oynatma çizgisi üstlerinden geçiyor.
   Döngü 4.8s; her kare çizginin geçtiği anda (--i × 1.2s) parlıyor. */
.film-kurgu .kr-kare{
  fill: rgba(123,79,255,.10); stroke: rgba(255,255,255,.22); stroke-width: 1.2;
  animation: filmKurguKare 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
@keyframes filmKurguKare{
  0%, 30%, 100% { fill: rgba(123,79,255,.10); stroke: rgba(255,255,255,.22); }
  8%, 22%       { fill: rgba(123,79,255,.55); stroke: var(--mor-300); }
}
.film-kurgu .kr-ray{ stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-linecap: round; }
.film-kurgu .kr-bas path{ stroke: var(--vurgu); stroke-width: 1.6; }
.film-kurgu .kr-bas circle{ fill: var(--vurgu); }
.film-kurgu .kr-bas{ animation: filmKurguBas 4.8s linear infinite; }
@keyframes filmKurguBas{
  from{ transform: translateX(0); }
  to  { transform: translateX(124px); }
}

/* ---------- 03 · FORMATLAR (ürün filmi) ----------
   Yatay, kare, dikey kadraj sırayla beliriyor; üçü birlikte bir süre
   duruyor, sonra birlikte sönüyor. */
.film-format .fm-kadraj{
  fill: rgba(123,79,255,.14); stroke: var(--mor-300); stroke-width: 1.4;
  animation: filmFormat 4.2s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: calc(var(--i) * 350ms);
  transform-box: fill-box; transform-origin: center bottom;
}
@keyframes filmFormat{
  0%       { opacity: 0; transform: translateY(8px) scale(.94); }
  16%, 78% { opacity: 1; transform: none; }
  92%,100% { opacity: 0; transform: none; }
}
/* Oynat simgesi yatay kadrajın içinde: onunla BİRLİKTE belirip sönüyor,
   yoksa kadraj yokken havada tek başına bir üçgen kalıyordu. */
.film-format .fm-oynat{
  fill: #fff;
  animation: filmFormat 4.2s cubic-bezier(.45,0,.2,1) infinite;
  transform-box: fill-box; transform-origin: center;
}
.film-format .fm-taban{ stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce){
  .film-kurgu .kr-kare,
  .film-kurgu .kr-bas,
  .film-format .fm-kadraj,
  .film-format .fm-oynat{ animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   ÜRÜN FİLMİ BÖLÜM ÇİPLERİ — DERGİ VE /g/d3  (2026-09-28)
   ------------------------------------------------------------
   Dergide eski dökümün (alıntı) yerinde: 2×2 ızgara, sayfa
   ölçeğiyle (--dg-olcek) birlikte küçülüyor. /g/d3 ekranında koyu
   kartın içinde aynı ızgara. Davranış media.js "ÜRÜN FİLMİ
   BÖLÜMLERİ" (data-uf); etkin çip .acik alıyor.
   ============================================================ */
.dg-video-bolumler,
.qr-bolumler{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dg-video-bolumler{
  gap: calc(6px * var(--dg-olcek));
  margin-top: calc(10px * var(--dg-olcek));
  padding-top: calc(10px * var(--dg-olcek));
  border-top: 1px solid var(--kenar);
}
.qr-bolumler{ gap: 8px; margin-top: 14px; }

.dg-video-bolum,
.qr-bolum{
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--kenar); border-radius: var(--r-kart);
  background: transparent; color: var(--metin-govde);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.dg-video-bolum{
  min-height: calc(32px * var(--dg-olcek));
  padding: 0 calc(10px * var(--dg-olcek));
  font-size: calc(12.5px * var(--dg-olcek));
}
.qr-bolum{
  min-height: 44px; padding: 0 12px; font-size: 14px;
  border-color: rgba(195, 176, 255, 0.18); color: rgba(255, 255, 255, .82);
}
.dg-video-bolum b,
.qr-bolum b{
  font-family: var(--font-mono); font-weight: 500;
  font-size: .86em; color: var(--metin-sessiz);
}
.dg-video-bolum:hover,
.qr-bolum:hover{ border-color: var(--mor-300); }
.dg-video-bolum:focus-visible,
.qr-bolum:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; }
.dg-video-bolum.acik,
.qr-bolum.acik{
  border-color: var(--mor-700); background: var(--vurgu-yumusak); color: var(--vurgu-kicker);
}
.qr-bolum.acik{ border-color: var(--mor-500); background: rgba(123, 79, 255, .22); color: var(--saf-beyaz); }
.dg-video-bolum.acik b,
.qr-bolum.acik b{ color: inherit; }
.dg-video-bag{
  align-self: flex-start;
  margin-top: calc(12px * var(--dg-olcek));
  font-size: calc(12.5px * var(--dg-olcek)); font-weight: 600;
  color: var(--vurgu-kicker); text-decoration: none;
}
.dg-video-bag:hover{ text-decoration: underline; text-underline-offset: 3px; }
.dg-video-bag:focus-visible{ outline: 2px solid var(--mor-500); outline-offset: 2px; border-radius: 4px; }
/* Kâğıt yüzeyinde asset gizli; bağlantı da onunla birlikte gidiyor
   (.dg-video'nun içinde). Odak kipinde (/g/…) zaten demo sayfası
   yerine ürün filmi ekranı açıldığı için orada da kalabilir. */

/* ANASAYFA DEMO KARTLARI — dördüncü kart (ürün filmi) eklenince
   tablette 2×2, telefonda alt alta düşüyordu. PC'de tek sıra; aynı
   kural (YATAY KALAN KART GRUPLARI) burada da: tablette tek sıra,
   telefonda yana kaydırılan şerit. */
/* ALT SINIR YALNIZ 601px: 1024-1260 arası masaüstünde de auto-fit'in
   280px'lik sütunu dört kartı 3+1 diziyordu (1024px'te ölçüldü). */
@media (min-width: 601px){
  html body #demolar-onizleme .kart-izgara{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
}
@media (min-width: 601px) and (max-width: 1023px){
  html body #demolar-onizleme .yazi-kart h3{ font-size: 16px; }
  html body #demolar-onizleme .yazi-ozet{ font-size: 13.5px; }
}
/* Telefonda şerit YOK: anasayfa demo ve blog kartları da KART SAHNESİ
   ile yapışkan yığın (media.js). */


/* ============================================================
   KART SAHNESİ — TELEFON  (2026-09-29)
   ------------------------------------------------------------
   Yana kaydırmalı kart grupları yerine: grup ekranda yapışkan bir
   sahneye dönüşüyor, kartlar AYNI YERDE üst üste duruyor ve aşağı
   kaydırdıkça sıradaki kart geliyor. İlk kart sayfa açıldığında tek ve
   tam görünüyor; son karttan sonra sayfa normal akıyor. Anasayfadaki
   çözüm alanları rayının dikey kipinin aynı fikri, genel hâli.

   Ölçüler JS'ten geliyor (media.js "KART SAHNESİ"):
     --ks-boy  grubun toplam boyu = sahne + (n-1) × adım
     --ks-ust  sahnenin yapıştığı yer (üst çubuğun altında, ortalı)
   Sınıflar yalnız telefonda JS tarafından ekleniyor; geniş ekranda
   hiçbiri yok, düzen PC/tablet kurallarıyla aynı kalıyor.
   ============================================================ */
/* Eşik JS'te (grup başına); sınıflar yalnız o eşikte ekleniyor. Blog
   önizlemesi tablette de sahnede olduğu için kurallar 999'a kadar. */
@media (max-width: 999px){
  /* Dış kap: yalnız kaydırma payı (boy JS'ten). */
  html body .kart-sahnesi{
    position: relative;
    height: var(--ks-boy, auto);
  }
  html body .kart-sahnesi > .ks-sahne{
    position: sticky;
    top: var(--ks-ust, 80px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  /* Başlık üstte; grubun kendi kuralları başlığa sızmıyor çünkü başlık
     artık grubun İÇİNDE değil. Etiket ile başlık sola hizalı: bazı
     bölümlerde etiket kendi kuralıyla ortalanıyordu. */
  html body .kart-sahnesi > .ks-sahne > .ks-bas{
    margin-bottom: var(--s-4, 24px);
  }
  html body .kart-sahnesi > .ks-sahne > .ks-bas > *:last-child{ margin-bottom: 0; }
  /* Kart grubu kendi sınıflarını koruyor; yalnız kartlar aynı hücrede. */
  html body .kart-sahnesi .ks-kap{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
  html body .kart-sahnesi .ks-kap > .ks-kart{
    grid-area: 1 / 1;
    width: auto !important; max-width: none !important; min-width: 0;
    margin: 0 !important;
    transition: opacity .38s ease, transform .38s ease, visibility 0s linear .38s;
  }
  html body .kart-sahnesi .ks-kap > .ks-kart:not([data-etkin="1"]){
    opacity: 0 !important;
    visibility: hidden;
    transform: translateY(16px) scale(.985);
    pointer-events: none;
  }
  html body .kart-sahnesi .ks-kap > .ks-kart[data-etkin="1"]{
    opacity: 1 !important;
    visibility: visible;
    transform: none;
    transition: opacity .38s ease, transform .38s ease, visibility 0s;
  }
  /* İlerleme çizgileri: kaç kart olduğunu ve hangisinde olunduğunu
     söylüyor (anasayfa rayının ilerleme çubuğuyla aynı dil). */
  html body .kart-sahnesi .ks-nokta{
    display: flex; justify-content: center; gap: 6px;
    margin-top: var(--s-3, 16px);
  }
  html body .kart-sahnesi .ks-nokta span{
    width: 18px; height: 3px; border-radius: 2px;
    background: var(--kenar);
    transition: width .3s ease, background-color .3s ease;
  }
  html body .kart-sahnesi .ks-nokta span.acik{ width: 34px; background: var(--vurgu); }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce){
  html body .kart-sahnesi .ks-kap > .ks-kart{ transition: none; }
}

/* Tablette sahnedeki kart ortalı ve okunur genişlikte: 700px'lik tek
   bir blog kartı gereksiz büyük duruyordu. */
@media (min-width: 601px) and (max-width: 999px){
  html body .kart-sahnesi .ks-kap > .ks-kart{
    justify-self: center;
    width: min(100%, 440px) !important;
  }
}
/* 1000-1100: blog önizlemesi PC'deki gibi beş sütun tek sıra (önceden
   1100 altında yana kaydırmalı şeritti). */
@media (min-width: 1000px) and (max-width: 1100px){
  #blog-onizleme .kart-izgara{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  #blog-onizleme .yazi-kart{ flex: none; width: auto; min-width: 0; }
  #blog-onizleme .yazi-kart h3{ font-size: 15.5px; }
  #blog-onizleme .yazi-ozet{ font-size: 13px; }
}

/* iPHONE'DA ODAKLANINCA BÜYÜME YOK (2026-09-30).
   iOS Safari 16px'ten küçük yazılı bir alana dokunulunca sayfayı
   kendiliğinden yakınlaştırıyor ve geri almıyor; iletişim formu
   (15px), konuşan broşür (13px), test (12.5px) ve Biggie'nin
   kutusu (14px) buna yakalanıyordu — aynı sayfa iPhone'da Android'den
   farklı davranıyordu. Dokunmatik ekranda alanlar 16px. */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select{ font-size: 16px !important; }
}

/* Sayaç ("01 / 04") dar ekranda "01 /" ve "04" diye ikiye bölünüyordu. */
.yigin-sayac{ white-space: nowrap; }

/* En dar telefonlarda (320: iPhone SE 1 ve "Büyütülmüş" ekran kipi)
   alt bilgideki e-posta satırı ekranın kenarına değiyordu. */
@media (max-width: 359px){
  .altbilgi-sutun a[href^="mailto:"]{ font-size: 14px; white-space: nowrap; }
}

/* ============================================================
   LİSTE SAYFALARI — TELEFONDA TAM EKRAN GİRİŞ  (2026-09-30)
   ------------------------------------------------------------
   Şikayet (telefon ekran kaydı, Demolar): "iki sayfa tek ekrana
   sıkışmış, çok iç içe". Giriş ekranın ~%40'ını kaplıyor, altındaki
   açık bölüm etiketi ve kartıyla hemen başlıyordu; masaüstü için
   yapılmış sıkıştırma (negatif üst boşluk, dar hero dolgusu) telefona
   da uygulanıyordu, 375×667'de "ÖRNEKLER" sınıra yapışıyordu.
   Telefonda artık anasayfa hero'sunun dili: giriş görünen alanın
   tamamı, altta KAYDIR işareti; sonraki bölüm kendi ekranında, rahat
   bir üst boşlukla başlıyor. Demolar, Ne Sunuyoruz, Blog (TR/EN).
   ============================================================ */
.kaydir-liste{ display: none; }
@media (max-width: 600px){
  html body .liste-bas{
    min-height: calc(100svh - var(--ust-yuk, 65px));
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--s-6) calc(var(--s-6) + 96px);
    position: relative;
  }
  .kaydir-liste{ display: flex; }
  /* Masaüstünün negatif üst boşluğu telefonda yok. */
  html body[data-sayfa="demolar"] .demo-alan{ margin-top: 0; }
}

/* KART SAHNESİ HİZASI — ortada değil, üst çubuğun 28px altında.
   Onaylanan kart sahnesi kuralı (2026-09-29, "sol üstte, headerla
   arasında mesafe, premium") dikey raylara da uygulanıyor; önce
   başlık+kart dikeyde ortalanıyor, üstte değişken bir boşluk kalıyordu. */
.giris-alan[data-ray="dikey"] .giris-yapisik,
.demo-alan[data-ray="dikey"] .demo-yapisik,
.kategori-alan[data-ray="dikey"] .kategori-yapisik{
  justify-content: flex-start;
  padding-top: 28px; padding-bottom: 20px;
  box-sizing: border-box;
}

/* KART EKRANA GÖRE ÖLÇEKLENİYOR (telefon, dikey ray).
   Sabit 16vh görselle 844 boyunda kartın altında ~180px boş kalıyor,
   667 boyunda kart ekranın dibine değip ilerleme çubuğunu gizliyordu.
   Kartın görsel dışındaki kısmı ~320px, başlık+boşluklar ~250px;
   görsel kalan payı alıyor, iki uçta sınırlı. */
@media (max-width: 600px){
  html body .demo-alan[data-ray="dikey"] .demo-kart .kart-gorsel{
    height: clamp(100px, calc(100svh - 590px), 240px);
  }
}
/* Kısa ekran (iPhone SE ve SE 2/3'ün "Büyütülmüş" kipi = 320×568):
   kartın görsel dışı kısmı bile kalan alandan uzun, düğme ekran
   dışında kalıyordu. Görsel inceliyor, metin üç satırda duruyor,
   başlık bir kademe küçülüyor — kart ve düğmesi tek ekranda. */
@media (max-width: 600px) and (max-height: 620px){
  html body .demo-alan[data-ray="dikey"] .demo-kart .kart-gorsel{ height: 76px; }
  html body .demo-alan[data-ray="dikey"] .demo-kart p{
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  html body .demo-alan[data-ray="dikey"] .demo-bas .bolum-baslik{ font-size: 26px; }
  html body .demo-alan[data-ray="dikey"] .demo-yapisik{ padding-top: 18px; }
}