/* ============================================================================
   Ana sayfaya özgü katman: hero + sohbet demosu, kaynak şeridi, bento,
   vitrin/konsol kartları, yolculuk maketleri.
   Bütün hareket TEK desene tabi (fade-in) + karo içi döngüsel vurgu; ikisi de
   prefers-reduced-motion'da durur ve DURDUĞUNDA İÇERİK GÖRÜNÜR kalır
   (hiçbir @keyframes %100'de opacity:0 bırakmıyor).
   ============================================================================ */

/* ---- 1. HERO -------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--murekkep);color:var(--kagit)}
/* Otomatik oynatma KALICI olarak engellendiyse: video gizlenir, poster zemin
   olur. Tarayıcının ölü ▶ düğmesini göstermekten iyidir. */
.hero.video-yok{background-image:url(hero-poster.jpg);background-size:cover;background-position:center}
.hero.video-yok .hero-video{display:none}

/* TAM KANAMA VİDEO YUVASI.
   ⚠️ Bu yorum 11 Eki'de BAYAT bulundu ve ölçülene çekildi: eskiden `<source>` YOK
   diyordu, oysa `site/index.html` İKİ `<source>` taşıyor (webm ÖNCE, sonra mp4 —
   tarayıcı ilk desteklediğini alır) ve iki dosya da sevk edilmiş. Yani "video
   yokken" varsayımıyla yazılmış hiçbir cümleye artık güvenilmez.
   Video ÇİZİLMEDİĞİ iki hâl kaldı ve ikisi de `.hero.video-yok`a düşüyor:
   tarayıcı oynatmayı kalıcı olarak reddetti, ya da kullanıcı AZ HAREKET istedi
   (`site.js:videoKur`, kapı `test/siteHeroAzHareket.test.ts`). O sınıfta video
   gizlenir ve poster zemin olarak görünür — sabit bir kare, ölü oynat düğmesi
   değil. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;border:0;
  background:transparent;
}
/* Perde: video geldiğinde metnin okunurluğunu garanti eden koyu katman.
   Video yokken de zararsız — zaten koyu zemin üzerinde. */
.hero-perde{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--murekkep),color-mix(in srgb,var(--murekkep) 62%,transparent) 62%,color-mix(in srgb,var(--murekkep) 34%,transparent));
}
/* Zemin kodla üretiliyor: iki radyal ışık + ince teknik ızgara. */
.hero::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 8%, color-mix(in srgb,var(--vurgu) 30%,transparent), transparent 62%),
    radial-gradient(70% 60% at 6% 92%, color-mix(in srgb,var(--nokta) 16%,transparent), transparent 60%);
  animation:heroIsik 26s ease-in-out infinite;
}
/* %100 GÖRÜNÜR bir durumda bitiyor: az-hareket kısıtı süreyi .001ms'ye
   indirdiğinde kare son kareye atlar ve ışık yerinde kalır. */
@keyframes heroIsik{
  0%{transform:translate3d(0,0,0) scale(1);opacity:1}
  50%{transform:translate3d(-2.5%,1.8%,0) scale(1.06);opacity:.86}
  100%{transform:translate3d(0,0,0) scale(1);opacity:1}
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:var(--b6) var(--b6);
  mask-image:radial-gradient(75% 65% at 50% 40%, rgba(0,0,0,1), transparent 78%);
}
.hero-ic{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--b5);align-items:center;padding-block:var(--b6)}
.hero-metin{display:flex;flex-direction:column;gap:var(--b5)}
.hero-metin .kas{color:var(--koyu-soluk)}
.hero-alt{font-size:var(--t7);line-height:var(--t7-s);color:var(--koyu-soluk);max-width:var(--olcu-orta)}
.hero-guven{display:flex;flex-wrap:wrap;gap:var(--b2) var(--b4);color:var(--koyu-soluk)}
.hero-guven li{display:flex;align-items:center;gap:var(--b1)}
@media (max-width:991px){
  .hero-ic{grid-template-columns:1fr;gap:var(--b6);padding-block:var(--b6)}
}

/* ---- Sohbet demosu — GERÇEK vitrin işaretlemesi, yazılı bir dökümle ------- */
.demo{display:flex;flex-direction:column;gap:var(--b2)}
.demo-not{font-size:var(--t9);line-height:var(--t9-s);color:var(--koyu-soluk)}
.refik-panel{
  background:var(--kagit);color:var(--murekkep);
  border-radius:var(--y-kart);box-shadow:var(--golge-guclu);
  display:flex;flex-direction:column;overflow:hidden;
  height:calc(var(--b7) * 4.9);
}
.refik-baslik{display:flex;align-items:center;gap:var(--b2);padding:var(--b2) var(--b3);border-bottom:1px solid var(--cizgi)}
.refik-baslik-mim{width:var(--t5);height:var(--t5);border-radius:var(--y-hap);background:var(--murekkep);color:var(--kagit);display:grid;place-items:center;font-family:var(--aile-display);font-size:var(--t9);line-height:1;flex:none}
.refik-baslik-ad{font-size:var(--t9);font-weight:500}
.refik-baslik-alt{font-size:var(--tm);color:var(--soluk);display:flex;align-items:center;gap:var(--b1)}
.nabiz{width:var(--b1);height:var(--b1);border-radius:var(--y-hap);background:var(--nokta);flex:none;animation:nabiz 2.4s var(--egri) infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.35}}
.refik-kapat{margin-inline-start:auto;color:var(--soluk);background:none;border:0;display:grid;place-items:center}
.refik-govde{display:flex;flex-direction:column;flex:1;min-height:0}
.refik-akis{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:var(--b2);padding:var(--b3);justify-content:flex-end}
/* AKIŞ ADIMLARI KALDIRILMIYOR, yalnız GÖRÜNÜRLÜKLERİ oynuyor.
   Eski sürüm kabı `removeChild` ile boşaltıyordu: zincir (sekme arkaya düşünce
   `setTimeout` kısılır) ortada donduğunda panelin üst %60'ı BOŞ GRİ kalıyordu —
   Samet'in iki ekran görüntüsü birebir aynıydı, yani donmuştu. Artık en kötü
   hâlde bile ekranda EKSİK AMA TUTARLI bir konuşma duruyor. */
/* 🔴 AKTİF OLMAYAN ADIM DÜZENDEN DÜŞER: yalnız `opacity:0` yetmiyordu, görünmez
   adımlar 290–506 px yer kaplayıp ilk turu panelin 298 px ÜSTÜNE itiyordu
   (CDP, 12 Eki). Ölçüm: docs/olcumler/site-kontrast-cdp/OLCUM.md § sohbet kayması. */
.js .refik-akis > .adim:not(.aktif){display:none}
.js .refik-akis > .adim.aktif{opacity:0;transform:translateY(var(--b2));transition:opacity 340ms var(--egri),transform 340ms var(--egri)}
.js .refik-akis > .adim.aktif.gorundu{opacity:1;transform:none}
/* JS yoksa `.js` sınıfı da yok → hiçbir adım gizlenmez, konuşma tam okunur. */
@media (prefers-reduced-motion:reduce){
  .js .refik-akis > .adim.aktif{opacity:1;transform:none;transition:none}
  .js .refik-akis > [data-yazan]{display:none}
}
.refik-mesaj{max-width:86%;white-space:pre-wrap}
.refik-mesaj.kisi{align-self:flex-end;max-width:84%;background:var(--murekkep);color:var(--kagit);font-size:var(--t9);padding:var(--b2) var(--b3);border-radius:var(--y-kart) var(--y-kart) var(--b1) var(--y-kart)}
.refik-mesaj.ajan{align-self:flex-start;max-width:95%;font-family:var(--aile-display);font-size:var(--t6);line-height:var(--t6-s)}
.refik-durum{align-self:flex-start;display:flex;align-items:center;gap:var(--b1);font-size:var(--tm);color:var(--soluk);min-height:var(--b3)}
.refik-nokta{width:var(--b1);height:var(--b1);border-radius:var(--y-hap);background:var(--soluk);animation:nokta 1.2s var(--egri) infinite}
.refik-nokta:nth-child(2){animation-delay:.15s}
.refik-nokta:nth-child(3){animation-delay:.3s}
@keyframes nokta{0%,100%{opacity:.3}50%{opacity:1}}
.refik-urunler{align-self:stretch;display:flex;gap:var(--b2)}
.refik-urun{flex:1 1 0;min-width:0;border:1px solid var(--cizgi);border-radius:var(--y-kart);overflow:hidden;background:var(--kagit);box-shadow:var(--golge);display:flex;flex-direction:column}
.refik-urun-gorsel{position:relative;background:var(--kagit2);display:grid;place-items:center;padding:var(--b2)}
.refik-urun-gorsel svg{width:auto;height:calc(var(--b6) - var(--b2))}
.refik-rozet-stok{position:absolute;top:var(--b1);inset-inline-start:var(--b1);background:var(--murekkep);color:var(--kagit);font-family:var(--aile-govde);font-size:var(--tmicro);line-height:1;text-transform:uppercase;letter-spacing:.06em;padding:var(--b1);border-radius:var(--y-hap)}
.refik-urun-govde{padding:var(--b2);display:flex;flex-direction:column;gap:var(--b1);flex:1}
.refik-urun-ad{font-size:var(--t9);line-height:var(--t9-s);font-weight:500;color:var(--metin)}
.refik-urun-alt{display:flex;align-items:center;gap:var(--b2);margin-block-start:auto}
.refik-urun-fiyat{font-size:var(--t9);font-weight:700;font-variant-numeric:tabular-nums;color:var(--metin)}
.refik-ekle{margin-inline-start:auto;border:0;border-radius:var(--y-hap);background:var(--murekkep);color:var(--kagit);font-size:var(--tm);font-weight:500;padding:var(--b1) var(--b2)}
.refik-yazma{display:flex;align-items:center;gap:var(--b2);margin:var(--b3);padding:var(--b2) var(--b3);border:1px solid var(--cizgi);border-radius:var(--y-hap)}
.refik-yazi{flex:1;min-width:0;font-size:var(--t9);color:var(--soluk);white-space:nowrap;overflow:hidden}
/* S-42: kaşe flex KARDEŞ (gerekçe `siteAnasayfa.test.ts` kaşe kapısında). */
.refik-imlec{display:inline-block;width:1px;height:var(--t8);background:var(--murekkep);margin-inline-start:calc(var(--b2) * -1);animation:imlec 1s steps(2,jump-none) infinite}
@keyframes imlec{0%,100%{opacity:1}50%{opacity:0}}
.refik-gonder{flex:none;width:var(--b4);height:var(--b4);display:grid;place-items:center;border:0;background:var(--murekkep);color:var(--kagit);border-radius:var(--y-hap)}
.refik-markalama{font-size:var(--tmicro);color:var(--soluk);text-align:center;padding-block-end:var(--b2)}
@media (max-width:767px){ .refik-panel{height:auto;min-height:calc(var(--b7) * 3)} }

/* ---- Şeffaf ("cam") sohbet paneli ----------------------------------------
   BEYAZ TONLU buzlu cam, metin KOYU. Ton 12 Eki 2026'da tersine döndü; gerekçe,
   ölçülen oranlar ve `.cam .x` geçersizlemelerinin neden SİLİNDİĞİ:
   docs/olcumler/site-kontrast-cdp/OLCUM.md § cam paneli beyaza çevirme.
   @supports yedeği opak yüzeye düşürür — metin her hâlükârda okunur. */
.cam{
  /* Derinlik gradyan + iç parlamadan gelir; tek düz renk cam vermiyor. */
  background:linear-gradient(150deg,color-mix(in srgb,var(--kagit) 86%,transparent),color-mix(in srgb,var(--kagit) 70%,transparent)),color-mix(in srgb,var(--murekkep) 10%,transparent);
  color:var(--murekkep);--soluk:var(--murekkep);--metin:var(--murekkep);--yt-cizgi:var(--cizgi);
  border:1px solid color-mix(in srgb,var(--kagit) 55%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--kagit) 80%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--murekkep) 10%,transparent),var(--golge-guclu);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cam{background:var(--kagit);border-color:var(--cizgi)}
}
/* Yalnız SAYDAM kalması gereken iç yüzeyler; geri kalan her şey varsayılan. */
.cam .refik-baslik{border-bottom-color:color-mix(in srgb,var(--murekkep) 12%,transparent)}
.cam .refik-urun{
  background:color-mix(in srgb,var(--kagit) 55%,transparent);
  border-color:color-mix(in srgb,var(--murekkep) 14%,transparent);box-shadow:none;
}
.cam .refik-urun-gorsel{background:color-mix(in srgb,var(--murekkep) 6%,transparent)}
.cam .refik-yazma{border-color:color-mix(in srgb,var(--murekkep) 16%,transparent)}

/* ---- 2. KAYNAK ŞERİDİ ----------------------------------------------------- */
.kaynak-izgara{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--b5) var(--b4)}
.kaynak-h{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--b2);text-align:center;padding-block:var(--b3)}
.kaynak-h .ikon{color:var(--murekkep)}
.kaynak-ad{font-size:var(--t9);line-height:var(--t9-s)}
.kaynak-pil{
  position:absolute;inset-block-start:0;inset-inline-start:50%;
  translate:-50% 0;
  background:var(--murekkep);color:var(--kagit);border-radius:var(--y-hap);
  padding:var(--b1) var(--b2);white-space:nowrap;
  opacity:0;transform:translateX(calc(-1 * var(--b5)));
  transition:opacity var(--sure-kisa) var(--egri),transform var(--sure-kisa) var(--egri);
  pointer-events:none;
}
.kaynak-h:hover .kaynak-pil,.kaynak-h:focus-within .kaynak-pil{opacity:1;transform:translateX(0)}
.kapsam-blok{display:flex;flex-direction:column;gap:var(--b3);margin-block-start:var(--b5);padding-block-start:var(--b4);border-block-start:1px solid var(--cizgi)}
.kapsam-blok p{max-width:var(--olcu-bas)}
.kapsam-liste{display:flex;flex-wrap:wrap;gap:var(--b2)}
.kapsam-liste .mono{text-transform:none}
.kapsam-liste li{color:var(--soluk);border:1px solid var(--cizgi);border-radius:var(--y-hap);padding:var(--b1) var(--b2);background:var(--kagit)}
@media (max-width:991px){ .kaynak-izgara{grid-template-columns:repeat(3,1fr);gap:var(--b4) var(--b3)} }
@media (max-width:480px){ .kaynak-izgara{grid-template-columns:repeat(2,1fr)} }

/* ---- 3. BENTO (fırıldak) --------------------------------------------------
   Referansın karo anatomisi (ölçüldü): şeffaf zemin + 1px kenarlık + 20px
   yarıçap, içinde TAM KANAMA medya. Bizde medya artık karo kenarına kadar
   gidiyor (eskiden iki yanında 24px iç boşluk vardı ve karo "sıkışmış"
   görünüyordu — öncesi/sonrası ölçümü raporda). */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--b3)}
.karo{display:flex;flex-direction:column;gap:var(--b4);padding:var(--b5) var(--b4) 0;position:relative;min-height:calc(var(--b7) * 4)}
.karo-genis{grid-column:span 2}
.karo h3{max-width:22ch}
.karo > p{font-size:var(--t8);line-height:var(--t8-s);color:var(--soluk);max-width:var(--olcu-orta)}
/* TAM KANAMA: karonun yatay iç boşluğunu negatif kenar boşluğuyla geri al. */
.karo-medya{
  margin-block-start:auto;position:relative;overflow:hidden;
  margin-inline:calc(-1 * var(--b4));padding:var(--b4) 0 0;
}
.karo-medya::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(85% 70% at 18% 0%, color-mix(in srgb,var(--vurgu) 13%,transparent), transparent 66%),
    linear-gradient(180deg, var(--kagit2), color-mix(in srgb,var(--kagit2) 55%,var(--kagit)));
}
.karo-medya > *{position:relative;z-index:1}
.karo-medya .maket-not{
  border-block-start:1px solid var(--cizgi);background:color-mix(in srgb,var(--kagit) 72%,transparent);
  margin-block-start:var(--b4);
}
@media (max-width:991px){
  .bento{grid-template-columns:1fr}
  .karo-genis{grid-column:auto}
  .karo{min-height:0;padding-block-end:0}
}

/* ---- Üst üste binen ürün arayüzü maketleri (karo 1, 3, 4) -----------------
   Referanstaki desen: arkada geniş bir ayar/liste paneli, önünde dar bir
   sohbet/uyarı paneli; ikisi de yumuşak gradyan bir yatağın üstünde ve sağ
   kenardan taşarak kırpılıyor. Arayüz UYDURULMUYOR: panel başlıkları
   konsolun kendi ekran adlarından ve vitrinin kendi yüzeylerinden geliyor. */
.yuzeyler{position:relative;padding:var(--b4) 0 var(--b4) var(--b4)}
.uy{border:1px solid var(--cizgi);border-radius:var(--y-kart);background:var(--kagit);overflow:hidden;box-shadow:var(--golge)}
.uy-ust{display:flex;align-items:center;gap:var(--b2);padding:var(--b2) var(--b3);border-bottom:1px solid var(--cizgi)}
.uy-ust .mono{color:var(--soluk)}
.uy-ust .ikon-k{color:var(--soluk);flex:none}
.uy-govde{padding:var(--b3);display:flex;flex-direction:column;gap:var(--b2)}
.uy-satir{display:flex;align-items:center;gap:var(--b2);font-size:var(--t9);line-height:var(--t9-s)}
.uy-satir .ikon-k{color:var(--soluk);flex:none}
.uy-sonuk{color:var(--soluk)}
.uy-anahtar{margin-inline-start:auto;width:calc(var(--b4) + var(--b2));height:var(--b4);border-radius:var(--y-hap);background:var(--cizgi);position:relative;flex:none}
.uy-anahtar::after{content:"";position:absolute;inset-block:2px;inset-inline-start:2px;width:calc(var(--b4) - 4px);border-radius:var(--y-hap);background:var(--kagit);box-shadow:var(--golge)}
.uy-anahtar.acik{background:var(--murekkep);animation:anahtarAc 7.68s var(--egri) infinite}
.uy-anahtar.acik::after{inset-inline-start:auto;inset-inline-end:2px;animation:anahtarTopuz 7.68s var(--egri) infinite}
.uy-satir:nth-child(2) .uy-anahtar.acik,.uy-satir:nth-child(2) .uy-anahtar.acik::after{animation-delay:.9s}
.uy-satir:nth-child(3) .uy-anahtar.acik,.uy-satir:nth-child(3) .uy-anahtar.acik::after{animation-delay:1.8s}
/* İkisi de AÇIK karede bitiyor: az-hareket kısıtı dondurduğunda tablo doğru
   durumu gösteriyor (o kaynaklar gerçekten okunuyor). */
@keyframes anahtarAc{0%,6%{background:var(--cizgi)}14%,100%{background:var(--murekkep)}}
@keyframes anahtarTopuz{0%,6%{transform:translateX(calc(-1 * var(--b2)))}14%,100%{transform:translateX(0)}}
/* Tarama süpürgesi: panelin üstünden geçen ince ışık — Lottie'nin "çiziliyor"
   hissinin CSS karşılığı. */
.uy-arka{position:relative}
.uy-arka::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:35%;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--vurgu) 12%,transparent),transparent);
  opacity:0;animation:supurge 7.68s var(--egri) infinite;
}
@keyframes supurge{0%{transform:translateX(-100%);opacity:0}8%{opacity:1}34%{transform:translateX(320%);opacity:0}100%{transform:translateX(320%);opacity:0}}
.uy-soru{align-self:flex-end;max-width:90%;background:var(--murekkep);color:var(--kagit);font-size:var(--t9);line-height:var(--t9-s);padding:var(--b1) var(--b2);border-radius:var(--y-kart) var(--y-kart) var(--b1) var(--y-kart)}
.uy-cevap{font-family:var(--aile-display);font-size:var(--t7);line-height:var(--t7-s)}
.uy-atif{display:flex;align-items:center;gap:var(--b2);padding-block-start:var(--b2);border-block-start:1px solid var(--cizgi)}
.uy-atif .mono{color:var(--soluk)}
.uy-atif .ikon-k{color:var(--soluk);flex:none}
.uy-cam{
  background:color-mix(in srgb,var(--kagit) 78%,transparent);
  border-color:color-mix(in srgb,var(--murekkep) 14%,transparent);
  box-shadow:var(--golge-guclu);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .uy-cam{background:var(--kagit)}
}

/* VARSAYILAN: DİKEY üst üste binme. Ön panel akışta kalır, arka panelin biraz
   üstüne biner ve sağa kayar. Hiçbir şey kırpılmaz, hiçbir metin örtülmez.
   Yatay (mutlak konumlu) kompozisyon YALNIZ ≥1200'de: 992'de geniş karo 545px
   ve orada ön panel medya alanından TAŞIP başlığı kırpılıyordu — ÖLÇÜLDÜ
   (scratchpad/site-revizyon/shot/t992-bento1.jpg, örtülü metin 3). */
.yuzeyler{display:flex;flex-direction:column}
.yuzeyler .uy-arka{width:auto}
.yuzeyler .uy-on{margin-block-start:calc(-1 * var(--b2));margin-inline-start:var(--b5)}
@media (min-width:1200px){
  /* Yalnız GENİŞ karolarda yan yana: dar karo (`-dikey`) her zaman dikey kalır. */
  .yuzeyler:not(.yuzeyler-dikey){display:block}
  .yuzeyler:not(.yuzeyler-dikey) .uy-arka{width:70%}
  .yuzeyler:not(.yuzeyler-dikey) .uy-on{
    position:absolute;inset-block-end:var(--b4);inset-inline-end:var(--b2);
    width:min(40%,calc(var(--b7) * 2.3));margin:0;z-index:2;
  }
}
@media (max-width:767px){
  .yuzeyler{padding-inline-start:var(--b3)}
  .yuzeyler .uy-on{margin-inline-start:var(--b3)}
}

/* ---- Karo 3: varyant seçici (yutulmuştu, geri kondu) ---------------------- */
.varyant-satir{display:flex;gap:var(--b1);flex-wrap:wrap}
.varyant{border:1px solid var(--cizgi);border-radius:var(--y-hap);padding:var(--b1) var(--b2);font-size:var(--tm)}
.varyant.secili{border-color:var(--murekkep);font-weight:700}
.varyant.yok{color:var(--soluk);position:relative}
.varyant.yok::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:var(--b2);
  inset-inline-end:var(--b2);height:1px;background:currentColor;transform-origin:left center;
  animation:ustuCizili 6.47s var(--egri) infinite;
}
/* Son kare: çizgi TAM çizili — donduğunda gerçek durum (100 ml tükenmiş) görünür. */
@keyframes ustuCizili{0%,12%{transform:scaleX(0)}26%,100%{transform:scaleX(1)}}
.stok-nokta{animation:stokNabiz 6.47s var(--egri) infinite}
@keyframes stokNabiz{0%,22%{transform:scale(1);opacity:1}30%{transform:scale(1.5);opacity:.6}40%,100%{transform:scale(1);opacity:1}}
.stok-satir{display:flex;align-items:center;gap:var(--b2);font-size:var(--t9);color:var(--soluk)}
.stok-nokta{width:var(--b2);height:var(--b2);border-radius:var(--y-hap);background:var(--murekkep);flex:none}

/* ---- Karo 4: soru listesi + çubuk (yutulmuştu, geri kondu) ---------------- */
.soru-liste{display:flex;flex-direction:column;gap:var(--b2)}
/* Durum etiketi SAĞA DAYALI DEĞİL: sağ kenarda duran her şey ön cam panelin
   altında kalıyordu (ölçüldü). Etiket sorunun hemen yanında. */
.soru-satir{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--b1) var(--b2);font-size:var(--t9);line-height:var(--t9-s)}
.soru-cubuk{height:var(--b1);border-radius:var(--y-hap);background:var(--cizgi);overflow:hidden;margin-block-start:calc(-1 * var(--b1))}
.soru-cubuk span{display:block;height:100%;background:var(--murekkep);width:var(--w);animation:cubuk 8.9s var(--egri) infinite}
.soru-cubuk.w1{--w:100%}
.soru-cubuk.w2{--w:74%}
.soru-cubuk.w3{--w:58%}
.soru-cubuk.w4{--w:41%}
.soru-cubuk.w5{--w:29%}
@keyframes cubuk{0%{width:0}24%,100%{width:var(--w)}}
.soru-n{font-variant-numeric:tabular-nums;color:var(--soluk);white-space:nowrap;font-family:var(--aile-govde);font-size:var(--tm);text-transform:uppercase;letter-spacing:.06em}

/* ---- Karo 2: yörünge diyagramı -------------------------------------------
   Merkezde Refik mimi, iki kesikli halka, halkalarda Refik'in GERÇEKTEN
   bulunduğu BEŞ vitrin yüzeyi. Instagram/TikTok gibi bizde OLMAYAN kanal
   YOK — o yalan olurdu. Yüzey adları görme engelli okuyucu için chip'in
   içinde yazılı; adların tamamı zaten karonun gövde metninde geçiyor. */
.yorunge{position:relative;width:100%;aspect-ratio:1;max-width:calc(var(--b7) * 2.1);margin-inline:auto;margin-block-end:var(--b4)}
.yor-halka{position:absolute;top:50%;left:50%;translate:-50% -50%;border:1px dashed var(--cizgi);border-radius:var(--y-hap);animation:halkaDon 44s linear infinite}
.yor-h2{animation-direction:reverse;animation-duration:64s}
@keyframes halkaDon{from{rotate:0deg}to{rotate:360deg}}
.yor-h1{width:46%;height:46%}
.yor-h2{width:76%;height:76%}
.yor-mim{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:calc(var(--b5) + var(--b2));height:calc(var(--b5) + var(--b2));
  display:grid;place-items:center;border-radius:var(--y-hap);
  background:var(--murekkep);color:var(--kagit);box-shadow:var(--golge-guclu);z-index:2;
}
.yor-u{
  position:absolute;translate:-50% -50%;
  width:var(--b5);height:var(--b5);display:grid;place-items:center;
  border-radius:var(--y-hap);background:var(--kagit);color:var(--murekkep);
  border:1px solid var(--cizgi);box-shadow:var(--golge);
  animation:yuzeyYan 8.9s var(--egri) infinite;
}
.yor-u2{animation-delay:1.8s}
.yor-u3{animation-delay:3.6s}
.yor-u4{animation-delay:5.4s}
.yor-u5{animation-delay:7.2s}
/* Son kare tam görünür + nötr: az-hareket kısıtında chip'ler yerinde kalır. */
@keyframes yuzeyYan{
  0%,10%{border-color:var(--cizgi);box-shadow:var(--golge)}
  16%,26%{border-color:var(--murekkep);box-shadow:var(--golge-guclu)}
  34%,100%{border-color:var(--cizgi);box-shadow:var(--golge)}
}
/* Merkezden dışa giden sinyal dalgası. */
/* Sinyal halkası: TABAN durumu opacity:0. Böylece az-hareket kısıtı süreyi
   .001ms'ye indirip son kareye (opacity:0) dondurduğunda taban ile son kare
   AYNI olur — yani "donan kare görünür bir şeyi gizlemez" değişmezi korunuyor. */
.yor-mim::after{
  content:"";position:absolute;inset:0;border-radius:var(--y-hap);opacity:0;
  border:1px solid var(--vurgu);animation:sinyal 4.5s var(--egri) infinite;
}
@keyframes sinyal{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(2.9);opacity:0}
}
/* Dış halka (çap 76% → yarıçap 38%): 0° / 120° / 240°. İç halka (46% → 23%): 90° / 270°. */
.yor-u1{top:12%;left:50%}
.yor-u2{top:69%;left:83%}
.yor-u3{top:69%;left:17%}
.yor-u4{top:50%;left:73%;width:calc(var(--b5) - var(--b2));height:calc(var(--b5) - var(--b2))}
.yor-u5{top:50%;left:27%;width:calc(var(--b5) - var(--b2));height:calc(var(--b5) - var(--b2))}

/* ---- 4. VİTRİN + KONSOL KARTLARI ----------------------------------------- */
.urun-kartlari{display:flex;flex-direction:column;gap:var(--b3)}
.urun-kart{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--b5);padding:var(--b5)}
.urun-kart-sol{display:flex;flex-direction:column;gap:var(--b3)}
.urun-kart-sol p{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)}
@media (max-width:991px){ .urun-kart{grid-template-columns:1fr;gap:var(--b4);padding:var(--b4)} }

/* ---- 6. YOLCULUK MAKETLERİ ------------------------------------------------ */
.maket{border:1px solid var(--cizgi);border-radius:var(--y-kart);background:var(--kagit2);overflow:hidden;box-shadow:var(--golge)}
.maket-ust{display:flex;align-items:center;gap:var(--b2);padding:var(--b2) var(--b3);border-bottom:1px solid var(--cizgi);background:var(--kagit)}
.maket-ust .mono{color:var(--soluk)}
.maket-govde{padding:var(--b3);display:flex;flex-direction:column;gap:var(--b2);min-height:calc(var(--b7) * 2.6)}
.maket-satir{display:flex;align-items:center;gap:var(--b2);background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--y-kart);padding:var(--b2) var(--b3);font-size:var(--t9);line-height:var(--t9-s)}
.maket-satir .ikon-k{color:var(--soluk);flex:none}
.maket-satir .sag{margin-inline-start:auto;color:var(--soluk);font-family:var(--aile-govde);font-size:var(--tm);white-space:nowrap}
.maket-anahtar{margin-inline-start:auto;width:calc(var(--b4) + var(--b2));height:var(--b4);border-radius:var(--y-hap);background:var(--cizgi);position:relative;flex:none}
.maket-anahtar::after{content:"";position:absolute;inset-block:2px;inset-inline-start:2px;width:calc(var(--b4) - 4px);border-radius:var(--y-hap);background:var(--kagit);box-shadow:var(--golge)}
.maket-anahtar.acik{background:var(--murekkep)}
.maket-anahtar.acik::after{inset-inline-start:auto;inset-inline-end:2px}
.maket-not{padding:var(--b2) var(--b3);border-block-start:1px solid var(--cizgi);color:var(--soluk);background:var(--kagit)}
.maket-kart{position:absolute;inset-block-start:calc(-1 * var(--b5));inset-inline-end:calc(-1 * var(--b2));background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--y-kart);box-shadow:var(--golge-guclu);padding:var(--b3);display:flex;flex-direction:column;gap:var(--b1);z-index:2}
.maket-kart .ist-n{font-size:var(--t4)}
.maket-sar{position:relative}
@media (max-width:991px){ .maket-kart{position:static;margin-block-end:var(--b3)} }

/* ---- 7. KOYU GÜVEN BANDI -------------------------------------------------- */
.guven-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--b3)}
.guven-kart{position:relative;padding:var(--b5);display:flex;flex-direction:column;gap:var(--b3);overflow:hidden;min-height:calc(var(--b7) * 2.4)}
.guven-kart p{color:var(--koyu-soluk);font-size:var(--t8);line-height:var(--t8-s);max-width:40ch}
.guven-filigran{position:absolute;inset-block-start:50%;inset-inline-end:calc(-1 * var(--b5));translate:0 -50%;width:45%;height:auto;opacity:.06;pointer-events:none;stroke-width:.6}
.guven-kart .mono{color:var(--koyu-soluk)}
.guven-2 + .dortlu{margin-block-start:var(--b5)}
@media (max-width:991px){ .guven-2{grid-template-columns:1fr} }

/* Dokunmatik ve dar ekranda hover pill'i hiç kurulmaz: hover yok, ve
   translate'li hâli kabın soluna taşıyordu (ölçüldü, 390px). */
@media (hover:none),(max-width:767px){ .kaynak-pil{display:none} }