/* ═══════════════════════════════════════════════════════════════════════════════════
   PERPLUS — TANITIM SİTESİ

   ⚠️ PALET UYDURULMADI. Doğrudan uygulamanın kendi tasarım sisteminden alındı:
      PerplusWeb.Frontend/wwwroot/perplus-design.css  +  ekranlardaki fiili kullanım.
      Nötrler Slate ailesi (#0F172A … #F8FAFC), birincil mavi #2563EB, gradient
      135deg #1E3A8A → #2980B9 (giriş düğmesinin aynısı), durum renkleri
      yeşil #10B981 / amber #F59E0B / kırmızı #EF4444 / mor #8B5CF6.
      Köşe yarıçapı uygulamayla aynı: 8px.

   Böylece siteden uygulamaya geçen kişi aynı ürünün içinde kaldığını hisseder.
   ═══════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Slate nötrler (uygulamadan) ─────────────────────────────────── */
  --gece: #0f172a;
  --koyu: #1e293b;
  --koyu-2: #334155;
  --orta: #475569;
  --soluk: #64748b;
  --silik: #94a3b8;
  --cizgi-koyu: #cbd5e1;
  --cizgi: #e2e8f0;

  /* ── KOYU ZEMİNDE METİN ────────────────────────────────────────────────────
     ⚠️ ÖLÇÜLDÜ, SEÇİLMEDİ. Zemin artık hareketli; ışığın en parlak anında
     yüzey #264e9d'ye kadar açılıyor. Eski gövde rengi #94a3b8 orada
     3.07:1 kontrast veriyordu — WCAG AA normal metin için 4.5:1 ister.
     #cbd5e1 en parlak anda 5.31:1, sönük anda 12.2:1.
     İkincil ton (#a3b2c6) alt bilgideki künye ve saat gibi küçük puntolar için;
     eski #64748b orada 2.36:1'e düşüyordu.
     Başlıklar beyaz kalıyor, yani hiyerarşi hâlâ üç basamaklı:
     #fff → #cbd5e1 → #a3b2c6. */
  --koyuMetin: #cbd5e1;
  --koyuMetin-2: #a3b2c6;
  --zemin-2: #f1f5f9;
  --zemin: #f8fafc;
  --beyaz: #ffffff;

  /* ── Vurgu renkleri (uygulamadan) ────────────────────────────────── */
  --mavi: #2563eb;
  --mavi-acik: #3b82f6;
  --mavi-koyu: #1e3a8a;
  --gok: #0ea5e9;
  --yesil: #10b981;
  --yesil-koyu: #059669;
  --amber: #f59e0b;
  --mor: #8b5cf6;
  --kirmizi: #ef4444;

  /* tonlar — uygulamadaki KPI kartlarının zemini */
  --mavi-ton: #eff6ff;
  --yesil-ton: #ecfdf5;
  --amber-ton: #fffbeb;
  --mor-ton: #faf5ff;

  --gradyan: linear-gradient(135deg, #1e3a8a 0%, #2980b9 100%);
  --gradyan-parlak: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);

  --r: 8px;            /* uygulamayla aynı köşe yarıçapı */
  --r-buyuk: 14px;

  /* ── GÖLGELER ─────────────────────────────────────────────────────────────
     Her gölge ÜÇ katmandır ve bu bilinçlidir:
       1) temas gölgesi — 1-2px, nesnenin yüzeye değdiği yer, kenarı keskinleştirir
       2) orta gölge    — nesnenin yükseldiği hissini verir
       3) ortam gölgesi — geniş ve çok soluk, ışığın odada dağılması
     Tek katmanlı gölge (eski hâli) "kutunun altına gri bir bulanıklık koyulmuş"
     gibi durur; üç katman derinlik hissi verir.
     Renk nötr gri değil SLATE (#0f172a) — sayfanın nötrleriyle aynı aileden,
     böylece gölge kirli görünmez. */
  --golge-s:  0 1px 1px rgba(15, 23, 42, .05),
              0 2px 5px -2px rgba(15, 23, 42, .09),
              0 6px 14px -8px rgba(15, 23, 42, .1);
  --golge-m:  0 1px 2px rgba(15, 23, 42, .06),
              0 8px 16px -8px rgba(15, 23, 42, .16),
              0 22px 38px -16px rgba(15, 23, 42, .16);
  --golge-l:  0 2px 4px rgba(15, 23, 42, .05),
              0 14px 28px -12px rgba(15, 23, 42, .2),
              0 38px 64px -24px rgba(15, 23, 42, .24);
  --golge-xl: 0 3px 6px rgba(15, 23, 42, .08),
              0 24px 46px -18px rgba(15, 23, 42, .36),
              0 64px 110px -42px rgba(15, 23, 42, .52);
  /* Birincil düğme ve mavi ögeler: gölge markanın kendi rengini taşır */
  --golge-mavi: 0 2px 5px -2px rgba(37, 99, 235, .45),
                0 12px 26px -10px rgba(37, 99, 235, .6);
  --golge-mavi-g: 0 3px 8px -2px rgba(37, 99, 235, .5),
                  0 20px 40px -12px rgba(37, 99, 235, .72);

  /* ── IŞIK MASKESİ ─────────────────────────────────────────────────────────
     ⚠️ SÜS DEĞİL, DİKİŞ YERİ DÜZELTMESİ.
     Koyu bölümlerin altında/üstünde eğri ayraç (.ayrac) duruyor ve o ayracın
     rengi DÜZ #0f172a. Işık katmanı bölümün ta kenarına kadar parlak kalsaydı
     ayraçla arasında GÖRÜNÜR BİR ÇİZGİ oluşurdu. Bu maske ışığı son 96px'te
     yumuşakça tabana indirir; kenar tam #0f172a olur, dikiş kaybolur.
     Üstteki 64px de aynı sebeple (koyu bölümün üstünde de ayraç olabiliyor). */
  --isikMaske: linear-gradient(to bottom,
                 transparent 0, #000 64px,
                 #000 calc(100% - 96px), transparent 100%);

  --sinir: 1240px;
  --bosluk: clamp(64px, 7.5vw, 116px);

  --yazi: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --baslikYazi: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --monoYazi: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--koyu);
  font-family: var(--yazi);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--mavi); }

h1, h2, h3, h4 {
  font-family: var(--baslikYazi);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  color: var(--gece);
}
h1 { font-size: clamp(42px, 5.6vw, 76px); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: clamp(31px, 3.7vw, 48px); font-weight: 800; letter-spacing: -0.028em; }
h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.24; }
p { margin: 0; }

.sinir { max-width: var(--sinir); margin: 0 auto; padding-inline: 24px; }

.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atla { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--mavi); color: #fff; padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--r) 0; }
.atla:focus { left: 0; }
:where(a, button):focus-visible { outline: 3px solid var(--mavi-acik); outline-offset: 3px; border-radius: 4px; }

/* ── İKONLAR ─────────────────────────────────────────────────────────────────── */
.ikon { width: 24px; height: 24px; display: block; stroke-width: 1.6; }

.ikonKutu {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  flex: none; margin-bottom: 18px; box-shadow: var(--golge-s);
}
.ikonKutu .ikon { width: 23px; height: 23px; }
.ikonKutu.mavi  { background: var(--mavi-ton);  color: var(--mavi); }
.ikonKutu.yesil { background: var(--yesil-ton); color: var(--yesil-koyu); }
.ikonKutu.amber { background: var(--amber-ton); color: #b45309; }
.ikonKutu.mor   { background: var(--mor-ton);   color: var(--mor); }
.koyuBolum .ikonKutu { box-shadow: none; }
.koyuBolum .ikonKutu.mavi  { background: rgba(37,99,235,.18);  color: #93c5fd; }
.koyuBolum .ikonKutu.yesil { background: rgba(16,185,129,.16); color: #6ee7b7; }
.koyuBolum .ikonKutu.amber { background: rgba(245,158,11,.16); color: #fcd34d; }
.koyuBolum .ikonKutu.mor   { background: rgba(139,92,246,.18); color: #c4b5fd; }

/* ── ÜST ÇUBUK ───────────────────────────────────────────────────────────────── */
.ust { position: sticky; top: 0; z-index: 40; background: rgba(248,250,252,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cizgi); }
.ustIc { display: flex; align-items: center; gap: 18px; min-height: 76px; }
/* ── MARKA KİLİDİ — YAZI MARKASI ─────────────────────────────────────────────
   ⚠️ Amblem BİLEREK yok. Elimizdeki logo Önder Zaman'ın 3B render mockup'ı;
   küçük boyutta okunmuyor ve zaten ana firmanın işareti — Perplus'ın kendi
   işareti henüz yok. Düzgün bir logo geldiğinde .marka içine img olarak eklenir,
   yazı kilidi olduğu gibi kalır.
   Sekmedeki ikon ise UYGULAMANIN KENDİ İŞARETİ (Perplus.svg) — ayrı bir çizim
   değil, PerplusWeb.Frontend/wwwroot altındaki dosyanın aynısı. */
.marka { display: flex; align-items: baseline; gap: 10px; text-decoration: none; flex: none; }
.markaAd {
  font-family: var(--baslikYazi); font-weight: 800; font-size: 28px; line-height: 1;
  letter-spacing: -0.035em; color: var(--gece);
}
.markaRozet {
  font-family: var(--monoYazi); font-size: 9.5px; font-weight: 500; letter-spacing: .16em;
  color: #fff; background: var(--gradyan); padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; position: relative; top: -2px;
  box-shadow: 0 2px 8px -2px rgba(37,99,235,.55);
}
.marka:hover .markaAd { color: var(--mavi); }

.menu { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.menu a { color: var(--orta); text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 12px; border-radius: var(--r); transition: background .16s, color .16s; }
.menu a:hover { background: var(--zemin-2); color: var(--gece); }
.menu a[aria-current] { color: var(--mavi); background: var(--mavi-ton); }
/* Mevcut müşterinin kapısı. Önce solgun çerçeveli bir bağlantıydı ve menünün
   içinde kayboluyordu — oysa siteye giriş yapmak için gelen biri için BU en
   önemli düğme. Artık dolgulu. Rengi bilerek mavi DEĞİL: "Teklif alın" mavi
   gradyan, ikisi aynı renkte olsaydı hangisinin ne olduğu okunmazdı. Koyu dolgu
   ile iki ayrı kapı gibi duruyorlar — biri mevcut müşteri, biri yeni müşteri. */
.menuGiris {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;
  padding: 11px 18px !important;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fff !important; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 2px 5px -2px rgba(15, 23, 42, .5), 0 10px 22px -10px rgba(15, 23, 42, .6);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.menuGiris .ikon { width: 16px; height: 16px; opacity: .85; }
.menuGiris:hover {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #fff !important; transform: translateY(-2px); filter: brightness(1.22);
  box-shadow: 0 3px 7px -2px rgba(15, 23, 42, .55), 0 16px 30px -10px rgba(15, 23, 42, .7);
}
.menuGiris::after { display: none; }

.menuCta { background: var(--gradyan); color: #fff !important; margin-left: 8px; padding: 11px 20px !important; box-shadow: 0 4px 14px -4px rgba(37,99,235,.55); }
.menuCta:hover { filter: brightness(1.08); background: var(--gradyan) !important; }
.menuDugme { display: none; }
/* Geniş ekranda gizli — orada menünün içindeki .menuGiris görünüyor */
.ustGiris { display: none; }

/* ── BÖLÜM ───────────────────────────────────────────────────────────────────── */
.bolum { padding-block: var(--bosluk); position: relative; }
.bolum.koyuBolum { background: var(--gece); color: #cbd5e1; }
.bolum.koyuBolum h1, .bolum.koyuBolum h2, .bolum.koyuBolum h3 { color: #fff; }
.bolum.metalik { background: var(--zemin-2); }  /* #F1F5F9 - beyaz kartlar ayrissin */

.etiket { display: inline-flex; align-items: center; gap: 8px; font-family: var(--monoYazi); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mavi); background: var(--mavi-ton); padding: 7px 13px; border-radius: 100px; margin-bottom: 20px; }
.koyuBolum .etiket { color: #93c5fd; background: rgba(37,99,235,.16); }

.giris { font-size: clamp(17.5px, 1.5vw, 20.5px); line-height: 1.6; color: var(--soluk); max-width: 64ch; }
.koyuBolum .giris { color: var(--koyuMetin); }

/* ── DÜĞMELER ────────────────────────────────────────────────────────────────── */
.dugmeler { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.dugme { display: inline-flex; align-items: center; gap: 10px; font-family: var(--yazi); font-weight: 700; font-size: 16px; padding: 15px 28px; border-radius: var(--r); text-decoration: none; border: 1px solid transparent; transition: transform .16s, box-shadow .16s, background .16s; }
.dugme .ikon { width: 19px; height: 19px; }
.dugme.birincil { background: var(--gradyan); color: #fff; box-shadow: var(--golge-mavi); }
.dugme.birincil:hover { transform: translateY(-3px); box-shadow: var(--golge-mavi-g); }
.dugme.ikincil { background: var(--beyaz); color: var(--koyu); border-color: var(--cizgi-koyu); box-shadow: var(--golge-s); }
.dugme.ikincil:hover { transform: translateY(-2px); box-shadow: var(--golge-m); }
.koyuBolum .dugme.ikincil { background: rgba(255,255,255,.07); color: #e2e8f0; border-color: rgba(255,255,255,.2); box-shadow: none; }
.koyuBolum .dugme.ikincil:hover { background: rgba(255,255,255,.13); }

/* ── TARAYICI ÇERÇEVESİ — "WEB PDKS" mesajını görselle anlatır ──────────────── */
.tarayici { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--cizgi-koyu); box-shadow: var(--golge-l); }

/* ⚠️ KOYU ZEMİNDE GÖLGE BAŞKA BİR ŞEYDİR — İKİ AYRI HATA BURADAYDI.
   1) Zemin BEYAZDI (.tarayici'nin varsayılanı). Görsel kutuyu doldursa da
      yuvarlatılmış köşelerde ve alt piksel kenarında beyaz bir hat kalıyordu;
      koyu bölümün üstünde bu hat "kesilmiş kağıt" gibi duruyordu.
   2) Gölge --golge-xl idi, yani rgba(15,23,42,…) — LACİVERT. Lacivert zeminin
      üstüne lacivert gölge koymak hiçbir şey yapmaz; gölge gerçekten görünmüyordu.

   Koyu yüzeyde derinlik üç parçadan gelir:
      ince ışık kenarı (nesnenin üst kenarına düşen ışık)
    + zeminden DAHA KOYU bir düşüş gölgesi (siyah, laciverte değil)
    + markanın renginde yumuşak bir hale (nesnenin ekran olduğunu söyler) */
.koyuBolum .tarayici, .hero .tarayici {
  background: #0f172a;
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 28px 56px -18px rgba(0, 0, 0, .78),
    0 0 90px -24px rgba(59, 130, 246, .42);
}
.tarayiciCubuk { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); }
.koyuBolum .tarayiciCubuk, .hero .tarayiciCubuk { background: #1e293b; border-bottom-color: #334155; }
.tarayiciNokta { display: flex; gap: 6px; flex: none; }
.tarayiciNokta i { width: 11px; height: 11px; border-radius: 50%; display: block; background: #cbd5e1; }
.tarayiciNokta i:nth-child(1) { background: #f87171; }
.tarayiciNokta i:nth-child(2) { background: #fbbf24; }
.tarayiciNokta i:nth-child(3) { background: #34d399; }
.tarayiciAdres { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 100px; padding: 5px 14px; font-family: var(--monoYazi); font-size: 12.5px; color: var(--soluk); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.koyuBolum .tarayiciAdres, .hero .tarayiciAdres { background: #0f172a; border-color: #334155; color: #94a3b8; }
.tarayiciAdres .ikon { width: 13px; height: 13px; flex: none; color: var(--yesil-koyu); }
.tarayici img { display: block; width: 100%; }

.gorselAlt { font-family: var(--monoYazi); font-size: 12px; letter-spacing: .07em; color: var(--silik); margin-top: 14px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.gorselAlt b { color: var(--mavi); font-weight: 500; }
.koyuBolum .gorselAlt b, .hero .gorselAlt b { color: #60a5fa; }

/* ═══════════════════════════════════════════════════════════════════════════════
   IŞIK — KOYU YÜZEYLERİN CANLI ZEMİNİ

   ⚠️ UYDURULMADI. Hareketli gradyan, uygulamanın GİRİŞ EKRANINDAKİ ışığın
   birebir aynısıdır:
       PerplusWeb.Frontend/Components/Pages/Auth/Login.razor.css
       .premium-bg  +  @keyframes gradientPan
   Aynı renk durakları (#0F172A → #1E3A8A → #020617 → #1e1b4b → #0F172A),
   aynı 400% zemin boyutu, aynı 15 saniyelik sonsuz döngü. Siteden uygulamaya
   geçen kişi aynı ışığın devam ettiğini görür.

   ESKİ HÂLİ NEDEN BOZUKTU: ışık, köşelere çakılı İKİ DAİREYDİ. Daireler %68'de
   sönüyor, yüzeyin alt yarısı dümdüz #0f172a kalıyordu — ışık "üstüne
   yapıştırılmış" gibi duruyor, üst yarı ile alt yarı arasında görünür bir
   ayrım oluşuyordu. Artık ZEMİNİN KENDİSİ gradyan; ışıksız bölge kalmıyor.

   İki katman var:
     ::before  hareketli gradyan  — yüzeyin tamamını kaplar, yavaş gezer
     ::after   süzülen vurgular   — mavi/gök/mor yumuşak halkalar, ayrı hızlarda
   İkisi de aynı maskeyi taşır (--isikMaske), böylece alt kenar tam #0f172a olur
   ve eğri ayraçla arasında çizgi oluşmaz.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Uygulamanın giriş ekranındaki gradientPan ile aynı */
@keyframes gradyanGez {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Vurgu halkaları birbirinden bağımsız süzülür — üç katman, üç ayrı yön.
   ⚠️ Konumlar YÜZDE DEĞİL PİKSEL. Sebebi: zemin görseli kaptan büyük olduğunda
   yüzdeli konum (kap − görsel) farkına göre çözülür, yani %84 sağa değil SOLA
   gider. Piksel + kenar anahtarı (right/bottom) yazınca halka hangi köşeye
   demir atacaksa oraya atar; bölümün yüksekliği değişse de yeri şaşmaz. */
@keyframes isikSuzul {
  0%   { background-position: right -220px top -320px, left -260px bottom -300px, right -200px bottom -380px; }
  25%  { background-position: right -300px top -250px, left -180px bottom -380px, right -290px bottom -320px; }
  50%  { background-position: right -160px top -390px, left -330px bottom -250px, right -140px bottom -420px; }
  75%  { background-position: right -280px top -290px, left -210px bottom -350px, right -250px bottom -300px; }
  100% { background-position: right -220px top -320px, left -260px bottom -300px, right -200px bottom -380px; }
}

.hero,
.bolum.koyuBolum,
.alt { position: relative; overflow: hidden; isolation: isolate; }

.hero > .sinir,
.bolum.koyuBolum > .sinir,
.alt > .sinir { position: relative; z-index: 1; }

/* 1. katman — hareketli gradyan zemin (giriş ekranının ışığı) */
.hero::before,
.bolum.koyuBolum::before,
.alt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(-45deg, #0f172a, #1e3a8a, #020617, #1e1b4b, #0f172a);
  background-size: 400% 400%;
  animation: gradyanGez 15s ease infinite;
  /* Giriş ekranında bu gradyan tek başına ve metinsiz bir panelde duruyor;
     burada üstünde gövde metni var. %58'de en parlak an #264e9d'ye çıkıyor;
     gövde metni bu yüzden --koyuMetin (#cbd5e1) — orada 5.31:1 kontrast.
     Bu opaklığı yükseltirsen metin rengini de yeniden ölç. */
  opacity: .58;
  -webkit-mask-image: var(--isikMaske);
          mask-image: var(--isikMaske);
}

/* 2. katman — süzülen vurgu halkaları.
   Halkalar kabın dışına taşacak kadar büyük (%120-150) tutuldu; kenarı
   görünen bir daire değil, yüzeyin içinden gelen bir aydınlık olsun diye. */
.hero::after,
.bolum.koyuBolum::after,
.alt::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.40), rgba(59,130,246,0) 64%),
    radial-gradient(circle at 50% 50%, rgba(14,165,233,.30), rgba(14,165,233,0) 66%),
    radial-gradient(circle at 50% 50%, rgba(139,92,246,.22), rgba(139,92,246,0) 68%);
  background-size: 1000px 1000px, 920px 920px, 820px 820px;
  background-position: right -220px top -320px, left -260px bottom -300px, right -200px bottom -380px;
  background-repeat: no-repeat;
  animation: isikSuzul 37s ease-in-out infinite;
  -webkit-mask-image: var(--isikMaske);
          mask-image: var(--isikMaske);
}

/* Alt bilgide ışık daha sakin — orada okunacak bağlantılar var, gösteri değil */
.alt::before { opacity: .34; animation-duration: 23s; }
.alt::after  { opacity: .55; animation-duration: 49s; }

/* ── AÇILIŞ AYDINLIĞI (açık zeminli sayfalar) ────────────────────────────────
   18 sayfanın yalnızca 2'si koyu giriş bölümüyle açılıyor; kalan 16'sı düpedüz
   beyazla başlıyordu ve sayfa "boş bir word belgesi" gibi duruyordu. Buradaki
   aydınlık aynı ışık ailesinden ama açık zemine göre çok daha soluk (%13 / %10):
   başlığın arkasını hafifçe renklendiriyor, metni gölgelemiyor.
   Maske ile bölümün yarısından sonra tamamen sönüyor — alttaki ayraçla ya da
   bir sonraki bölümle çakışma ihtimali kalmıyor. */
@keyframes acilisIsik {
  0%   { background-position: right -180px top -380px, left -280px top -260px; }
  50%  { background-position: right -310px top -300px, left -150px top -370px; }
  100% { background-position: right -180px top -380px, left -280px top -260px; }
}
main > .bolum:first-child:not(.koyuBolum):not(.cagri) {
  position: relative; overflow: hidden; isolation: isolate;
}
main > .bolum:first-child:not(.koyuBolum):not(.cagri)::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .14), rgba(37, 99, 235, 0) 62%),
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .11), rgba(139, 92, 246, 0) 64%);
  background-size: 940px 940px, 780px 780px;
  background-position: right -180px top -380px, left -280px top -260px;
  background-repeat: no-repeat;
  animation: acilisIsik 44s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 96%);
}
main > .bolum:first-child > .sinir { position: relative; z-index: 1; }

/* ── Koyu yüzeyin dokusu ────────────────────────────────────────────────────────
   Çok soluk bir ızgara (64px, %5 opaklık). Amaç desen göstermek değil: ışığın
   zayıf kaldığı yerlerde yüzeyin "boyanmış düz renk" değil bir malzeme olduğunu
   hissettirmek. Ekranda ancak dikkatle bakınca seçilir.

   ⚠️ Listedeki İLK katman bir perde: alt 140 pikselde ızgarayı tamamen kapatıp
   düz #0f172a yapar. Olmasaydı ızgara çizgileri, eğri ayracın düz zeminiyle
   birleştiği yerde nokta nokta görünecekti. */
.hero,
.bolum.koyuBolum {
  background-color: var(--gece);
  background-image:
    linear-gradient(to bottom, rgba(15,23,42,0) 0, rgba(15,23,42,0) calc(100% - 140px), #0f172a calc(100% - 16px)),
    linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
}

/* ── GİRİŞ BÖLÜMÜ ────────────────────────────────────────────────────────────── */
.hero { color: #cbd5e1; padding-block: clamp(76px, 9vw, 132px); }
.hero h1 { color: #fff; }
.hero .giris { color: var(--koyuMetin); margin-top: 26px; }
.heroIzgara { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px, 4.5vw, 70px); align-items: center; }
.vurguMavi { background: var(--gradyan-parlak); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rozet { display: inline-flex; align-items: center; gap: 9px; font-family: var(--monoYazi); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #cbd5e1; padding: 8px 15px; border-radius: 100px; margin-bottom: 26px; }
.rozet .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 0 4px rgba(16,185,129,.22); }

/* ── RAKAM BANDI ─────────────────────────────────────────────────────────────── */
.rakamlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; background: #dde5ee; border: 1px solid #dde5ee; border-radius: var(--r-buyuk); overflow: hidden; margin-top: 52px; }
.rakam { background: var(--beyaz); padding: 30px 26px; }
.koyuBolum .rakamlar { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
.koyuBolum .rakam { background: #16213a; }
.rakam .sayi { font-family: var(--baslikYazi); font-size: clamp(34px, 3.6vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--gece); font-variant-numeric: tabular-nums; }
.koyuBolum .rakam .sayi { color: #fff; }
.rakam .sayi em { font-style: normal; background: var(--gradyan-parlak); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rakam .ad { font-size: 14.5px; color: var(--soluk); margin-top: 10px; line-height: 1.4; }
.koyuBolum .rakam .ad { color: var(--koyuMetin); }

/* ── VARDİYA ŞERİDİ ──────────────────────────────────────────────────────────── */
.serit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.serit .dilim { border: 1px solid #dde5ee; background: var(--beyaz); padding: 24px 24px 26px; border-radius: var(--r-buyuk); position: relative; overflow: hidden; box-shadow: var(--golge-s); transition: transform .2s, box-shadow .2s; }
.serit .dilim:hover { transform: translateY(-4px); box-shadow: var(--golge-m); }
.koyuBolum .serit .dilim, .hero .serit .dilim { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.serit .ad { font-family: var(--monoYazi); font-size: 11.5px; letter-spacing: .14em; color: var(--silik); text-transform: uppercase; }
.serit .saat { font-family: var(--baslikYazi); font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--gece); line-height: 1; margin-top: 10px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.koyuBolum .serit .saat, .hero .serit .saat { color: #fff; }
.serit .dilim::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--mavi-acik); }
.serit .dilim:nth-child(2)::after { background: var(--gok); }
.serit .dilim:nth-child(3)::after { background: var(--amber); }

/* ── KART IZGARASI ───────────────────────────────────────────────────────────── */
.faydalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); gap: 24px; margin-top: 52px; }
.fayda { background: var(--beyaz); border: 1px solid #dde5ee; border-radius: var(--r-buyuk); padding: 30px 28px 32px; box-shadow: var(--golge-s); transition: transform .2s, box-shadow .2s, border-color .2s; }
.fayda:hover { transform: translateY(-5px); box-shadow: var(--golge-m); border-color: var(--cizgi-koyu); }
.koyuBolum .fayda { background: #16213a; border-color: rgba(255,255,255,.1); box-shadow: none; }
.koyuBolum .fayda:hover { border-color: rgba(255,255,255,.22); background: #1a2744; }
.fayda h3 { margin-bottom: 11px; }
.fayda p { color: var(--soluk); font-size: 16px; line-height: 1.58; }
.koyuBolum .fayda p { color: var(--koyuMetin); }
.fayda .no { font-family: var(--monoYazi); font-size: 12px; color: var(--mavi); letter-spacing: .12em; display: block; margin-bottom: 12px; }

/* ── İKİ SÜTUN ───────────────────────────────────────────────────────────────── */
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.ikili.ters .ikiliMetin { order: 2; }

/* ── LİSTELER ────────────────────────────────────────────────────────────────── */
.imli { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 15px; }
.imli li { position: relative; padding-left: 34px; color: var(--soluk); }
.koyuBolum .imli li { color: var(--koyuMetin); }
.imli li::before { content: ''; position: absolute; left: 0; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--yesil-ton); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; }
.koyuBolum .imli li::before { background-color: rgba(16,185,129,.2); }
.imli strong { color: var(--koyu); }
.koyuBolum .imli strong { color: #fff; }

/* ── TABLO ───────────────────────────────────────────────────────────────────── */
.tabloKutu { overflow-x: auto; margin-top: 36px; border: 1px solid #dde5ee; border-radius: var(--r-buyuk); background: var(--beyaz); box-shadow: var(--golge-s); }
.koyuBolum .tabloKutu { background: #16213a; border-color: rgba(255,255,255,.1); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--cizgi); }
.koyuBolum th, .koyuBolum td { border-bottom-color: rgba(255,255,255,.08); }
tr:last-child td { border-bottom: none; }
th { font-weight: 700; color: var(--gece); background: var(--zemin); font-size: 14px; letter-spacing: .01em; }
.koyuBolum th { color: #fff; background: rgba(255,255,255,.04); }
td { color: var(--soluk); }
td strong { color: var(--koyu); }
.koyuBolum td { color: var(--koyuMetin); }
.koyuBolum td strong { color: #e2e8f0; }

/* ── KAPANIŞ ÇAĞRISI ─────────────────────────────────────────────────────────── */
/* Kapanış bandı da hareketli. Renk durakları giriş düğmesinin gradyanından
   (#1e3a8a → #2980b9) türetildi; araya #0ea5e9 ve #1e40af girip bandın
   soldan sağa yavaşça nefes almasını sağlıyor. */
.cagri {
  background: linear-gradient(-45deg, #1e3a8a, #2980b9, #1e40af, #0ea5e9, #1e3a8a);
  background-size: 400% 400%;
  animation: gradyanGez 19s ease infinite;
  color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
/* Üstten gelen beyaz aydınlık — sabit değil, yavaşça süzülüyor */
.cagri::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 66%);
  background-size: 900px 900px, 760px 760px;
  background-position: right -180px top -420px, left -220px bottom -380px;
  background-repeat: no-repeat;
  animation: isikSuzulIkili 41s ease-in-out infinite;
}
/* İki katmanlı sürüm — katman sayısı ile background-position değer sayısı
   eşleşmezse fazlalık sessizce düşer; bu yüzden ayrı tutuldu. */
@keyframes isikSuzulIkili {
  0%   { background-position: right -180px top -420px, left -220px bottom -380px; }
  33%  { background-position: right -300px top -350px, left -120px bottom -450px; }
  66%  { background-position: right -120px top -470px, left -300px bottom -330px; }
  100% { background-position: right -180px top -420px, left -220px bottom -380px; }
}
.cagriIc { display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; position: relative; z-index: 1; }
.cagri h2 { color: #fff; max-width: 18ch; }
.cagri p { color: rgba(255,255,255,.82); margin-top: 16px; max-width: 48ch; }
.cagri .dugme.birincil { background: #fff; color: var(--mavi-koyu); box-shadow: 0 10px 26px -10px rgba(0,0,0,.5); }
.cagri .dugme.birincil:hover { background: #fff; filter: none; }
.cagri .dugme.ikincil { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); box-shadow: none; }
.cagri .dugme.ikincil:hover { background: rgba(255,255,255,.2); }

/* ── ALT BİLGİ ───────────────────────────────────────────────────────────────── */
.alt { background: var(--gece); color: var(--koyuMetin); padding-top: var(--bosluk); }
.altIc { display: grid; grid-template-columns: minmax(230px, 1fr) 2fr; gap: 52px; padding-bottom: 46px; }
.altMarka { display: flex; gap: 14px; align-items: flex-start; }
.altAd { font-family: var(--baslikYazi); font-size: 23px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.altAd span { font-family: var(--monoYazi); font-size: 9.5px; font-weight: 500; letter-spacing: .15em; background: var(--gradyan); color: #fff; padding: 3px 7px; border-radius: 4px; margin-left: 7px; vertical-align: middle; }
.altFirma { font-size: 14.5px; margin-top: 11px; line-height: 1.55; }
.altMenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 34px; }
.altMenu h2 { font-family: var(--monoYazi); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #60a5fa; margin-bottom: 15px; font-weight: 500; }
.altMenu a { display: block; color: var(--koyuMetin); text-decoration: none; font-size: 15px; padding: 6px 0; transition: color .16s; }
.altMenu a:hover { color: #fff; }
.altKunye { border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--koyuMetin-2); }

/* ═══════════════════════════════════════════════════════════════════════════════
   HAREKET

   Yumuşama eğrisi (.16, 1, .3, 1) ve 0.7s süre uydurulmadı — uygulamanın giriş
   ekranındaki slideUpFade ile aynı (Login.razor.css). Siteden uygulamaya geçen
   kişi aynı ritmi görür.

   Kural: hareket DİKKAT ÇEKMEK için değil, YÖN GÖSTERMEK için. Her öge aynı
   yönden (aşağıdan) gelir; göz nereye bakacağını öğrenir.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Kaydırınca belirme ──────────────────────────────────────────────────────── */
/* ⚠️ Varsayılan GÖRÜNÜR. Gizleme yalnızca JS çalışıyorsa (html.js) devreye girer,
   böylece JS kapalıyken ya da gözlemci hiç tetiklenmezse içerik kaybolmaz. */
html.js .belir { opacity: 0; transform: translateY(24px); }
html.js .belir.gorundu {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

/* Kart ızgaralarında çocuklar TEK TEK gelir (kademeli giriş).
   Kap zaten .belir taşıyor; çocuklar ona 60ms arayla katılıyor. Böylece dört
   kart aynı anda "patlamak" yerine soldan sağa akıyor — göz sırayla okuyor. */
html.js .belir:is(.faydalar, .rakamlar, .serit, .belgeler, .videolar, .vakalar, .ikili) > * {
  opacity: 0; transform: translateY(20px);
}
html.js .belir:is(.faydalar, .rakamlar, .serit, .belgeler, .videolar, .vakalar, .ikili).gorundu > * {
  opacity: 1; transform: none;
  transition: opacity .66s cubic-bezier(.16, 1, .3, 1), transform .66s cubic-bezier(.16, 1, .3, 1);
}
html.js .belir.gorundu > :nth-child(1) { transition-delay: 40ms; }
html.js .belir.gorundu > :nth-child(2) { transition-delay: 100ms; }
html.js .belir.gorundu > :nth-child(3) { transition-delay: 160ms; }
html.js .belir.gorundu > :nth-child(4) { transition-delay: 220ms; }
html.js .belir.gorundu > :nth-child(5) { transition-delay: 280ms; }
html.js .belir.gorundu > :nth-child(6) { transition-delay: 340ms; }
html.js .belir.gorundu > :nth-child(n+7) { transition-delay: 400ms; }

/* ── Sayfa açılışı: giriş bölümü kademeli kurulur ───────────────────────────── */
/* Uygulamanın giriş ekranındaki stagger-1..4 ile aynı desen. */
@keyframes yukariBelir {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
/* ⚠️ .hero figure BU LİSTEDE YOK — bilerek. O ögenin İKİ animasyonu var
   (giriş + süzülme) ve ikisi tek bir kısayolda tanımlanmak zorunda; aşağıda,
   kendi kuralında. Buraya eklenirse aşağıdaki kısayol bunu ezer ya da tersi
   olur, ikisinden biri sessizce kaybolur. */
.hero .rozet,
.hero h1,
.hero .giris,
.hero .dugmeler {
  opacity: 0;
  animation: yukariBelir .75s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero .rozet    { animation-delay: .05s; }
.hero h1        { animation-delay: .13s; }
.hero .giris    { animation-delay: .23s; }
.hero .dugmeler { animation-delay: .33s; }

/* Ekran görüntüsü, kurulduktan sonra çok yavaş süzülür. Genlik 9px: fark
   edilir ama okurken rahatsız etmez.

   ⚠️ SÜZÜLME FIGURE'DE, KALKMA .tarayici'DE — İKİSİ AYRI ÖGEDE OLMAK ZORUNDA.
   İkisi de aynı ögede olsaydı çakışırlardı: çalışan bir animasyonun transform'u
   normal bildirimleri ezer, yani üstüne gelince kalkma HİÇ OLMAZDI. Ayrı ögelere
   koyunca ikisi üst üste biner; hem süzülür hem kalkar. */
@keyframes suzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* ⚠️ İKİ ANİMASYON TEK BİLDİRİMDE OLMAK ZORUNDA.
   Burada ayrıca "animation: suzul …" yazmak, yukarıdaki giriş animasyonunu
   (yukariBelir) KISAYOL OLDUĞU İÇİN tamamen siliyordu. Öge opacity:0 ile
   başlayıp onu 1'e çıkaracak animasyonu kaybettiği için giriş bölümündeki
   ekran görüntüsü SAYFADA HİÇ GÖRÜNMÜYORDU. Ölçüldü, bir kez yaşandı.

   Süreler çakışmayacak biçimde seçili: yukariBelir 0,20-0,95 sn arasında
   çalışıp forwards ile 1'de kalır; suzul 1,10 sn'de başlar. Aradaki boşlukta
   yalnızca yukariBelir'in son karesi geçerlidir. */
.hero figure {
  opacity: 0;
  animation:
    yukariBelir .75s cubic-bezier(.16, 1, .3, 1) .2s forwards,
    suzul 9s ease-in-out 1.1s infinite;
}
.hero figure:hover { animation-play-state: paused, paused; }

/* ── Canlı noktası ──────────────────────────────────────────────────────────── */
/* "Bulut tabanlı" rozetindeki yeşil nokta gerçekten nabız atar; sistemin
   ayakta olduğunu söyleyen tek hareketli öge. */
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.rozet .nokta { animation: nabiz 2.4s cubic-bezier(.4, 0, .6, 1) infinite; }

/* ── Düğme parlaması ────────────────────────────────────────────────────────── */
/* Birincil düğmenin üzerine gelince ışık soldan sağa bir kez geçer.
   overflow:hidden + eğik beyaz şerit; ek DOM ögesi gerekmiyor. */
.dugme.birincil { position: relative; overflow: hidden; }
.dugme.birincil > * { position: relative; z-index: 1; }
.dugme.birincil::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; left: -75%; width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
  transform: skewX(-18deg); transition: left .62s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.dugme.birincil:hover::after { left: 125%; }

/* ── Kart üstüne gelince ikon canlanır ──────────────────────────────────────── */
.fayda .ikonKutu, .belge .ikonKutu, .vakaUst .ikonKutu {
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s;
}
.fayda:hover .ikonKutu, .belge:hover .ikonKutu {
  transform: translateY(-2px) scale(1.07) rotate(-3deg);
  box-shadow: var(--golge-m);
}
.belge .git .ikon { transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.belge:hover .git .ikon { transform: translateX(5px); }
.dugme .ikon { transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.dugme:hover .ikon { transform: translateX(4px); }

/* ── Vardiya şeridi: renk çubuğu soldan dolar ───────────────────────────────── */
/* ⚠️ Varsayılan DOLU. Yalnızca "henüz belirmemiş" durumda boşaltılıyor; aksi
   hâlde .serit bir .belir kabının içinde değilse çubuk kalıcı olarak kaybolurdu. */
.serit .dilim::after {
  transform-origin: left;
  transition: transform .85s cubic-bezier(.16, 1, .3, 1) .12s;
}
html.js .belir:not(.gorundu) .dilim::after { transform: scaleX(0); }

/* ── Üst çubuk: sayfa kayınca zemine oturur ─────────────────────────────────── */
.ust { transition: box-shadow .3s, background .3s, border-color .3s; }
.ust.kaydi {
  background: rgba(248, 250, 252, .94);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 10px 30px -14px rgba(15, 23, 42, .3);
  border-bottom-color: transparent;
}

/* ── Tarayıcı çerçevesi: üstüne gelince yükselir ──────────────────────────────
   ⚠️ Eskiden bu kural ".bolum:not(.hero)" ile yazılmıştı ve giriş bölümüne HİÇ
   uğramıyordu — çünkü giriş bölümü <section class="hero">, yani .bolum DEĞİL.
   Seçici doğru görünüyordu ama hedefi hiç bulmuyordu; giriş bölümündeki çerçeve
   tek hareketsiz çerçeveydi. Artık her yerde aynı davranıyor. */
.tarayici { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s; }
figure:hover > .tarayici { transform: translateY(-6px); box-shadow: var(--golge-xl); }

/* Koyu zeminde kalkma daha belirgin, hale genişliyor — açık zemindeki
   --golge-xl burada görünmez olurdu (yukarıdaki not). */
.hero figure:hover > .tarayici,
.koyuBolum figure:hover > .tarayici {
  transform: translateY(-9px) scale(1.012);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 40px 74px -20px rgba(0, 0, 0, .85),
    0 0 130px -20px rgba(59, 130, 246, .62);
}

/* Görsel altı yazısı koyu zeminde de okunsun: --silik (#94a3b8) ışığın en
   parlak anında 3,07:1'e düşüyordu, bu punto için yetersiz. */
.hero .gorselAlt, .koyuBolum .gorselAlt { color: #a3b2c6; }

/* ── Tablo satırı: okunan satır belli olsun ─────────────────────────────────── */
tbody tr { transition: background .16s; }
tbody tr:hover { background: rgba(37, 99, 235, .04); }
.koyuBolum tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* ── Vaka kartı: doğru taraf hafifçe öne çıkar ──────────────────────────────── */
.vakaYan { transition: background .25s; }
.vaka:hover .vakaYan.dogru { background: #e4fbf1; }
.koyuBolum .vaka:hover .vakaYan.dogru { background: rgba(16, 185, 129, .14); }

/* ── Menü bağlantısı: altı çizilir ─────────────────────────────────────────── */
.menu a:not(.menuCta) { position: relative; }
.menu a:not(.menuCta)::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--mavi); transform: scaleX(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.menu a:not(.menuCta):hover::after { transform: scaleX(1); }

/* ── DAR EKRAN ───────────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .heroIzgara, .ikili, .altIc { grid-template-columns: 1fr; }
  .ikili.ters .ikiliMetin { order: 0; }
  .serit { grid-template-columns: 1fr; }
}

/* ── MENÜ EŞİĞİ — YERLEŞİM EŞİĞİNDEN AYRI ────────────────────────────────────
   ⚠️ 920px DEĞİL. Menü dokuz maddeyle 1211 piksel genişlik istiyor (ölçüldü);
   eşik 920'de kalsaydı 920-1211 arasındaki her ekranda menü İKİ SATIRA taşardı
   — tablet ve küçük dizüstülerin tamamı. Yerleşimin tek sütuna düşmesi ise
   hâlâ 920'de doğru; iki eşiği birleştirmek ikisinden birini bozuyor. */
@media (max-width: 1200px) {
  .menuDugme { display: block; margin-left: auto; width: 46px; height: 42px; background: var(--beyaz); border: 1px solid var(--cizgi-koyu); border-radius: var(--r); cursor: pointer; position: relative; box-shadow: var(--golge-s); }
  .menuCizgi, .menuCizgi::before, .menuCizgi::after { position: absolute; left: 13px; width: 18px; height: 2px; background: var(--koyu); border-radius: 2px; content: ''; }
  .menuCizgi { top: 20px; }
  .menuCizgi::before { top: -6px; left: 0; }
  .menuCizgi::after { top: 6px; left: 0; }

  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--beyaz); border-bottom: 1px solid var(--cizgi); flex-direction: column; align-items: stretch; padding: 12px 16px 20px; gap: 2px; box-shadow: var(--golge-m); }
  .menu.acik { display: flex; }
  .menu a { padding: 13px 12px; }
  /* Çekmecede gizli: aynı bağlantı .ustGiris olarak başlıkta zaten duruyor,
     iki kere göstermek menüyü uzatmaktan başka işe yaramıyor. */
  .menuGiris { display: none; }
  .menuCta { margin-left: 0; text-align: center; margin-top: 8px; justify-content: center; }

  /* Çekmecenin dışında, her zaman görünen giriş düğmesi (bkz. kabuk.html) */
  .ustGiris {
    display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    padding: 11px 15px; border-radius: var(--r); text-decoration: none;
    font-family: var(--yazi); font-weight: 700; font-size: 14.5px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 2px 5px -2px rgba(15, 23, 42, .5), 0 8px 18px -8px rgba(15, 23, 42, .55);
  }
  .ustGiris .ikon { width: 15px; height: 15px; opacity: .85; }
  .menuDugme { margin-left: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TELEFON — DOKUNMA HEDEFLERİ VE SIKIŞIKLIK

   ⚠️ Buradaki düzeltmeler ÖLÇÜMDEN geldi, tahminden değil. 390px genişlikte
   sayfalar taranınca yatay taşma 0 çıktı ama basılacak ögeler küçüktü:
   telefon ve e-posta bağlantıları 18px, alt menü bağlantıları 36px, marka 32px.
   Telefonda bunlar parmakla vurulamayacak kadar incedir; hedef en az 44px.
   Metin içine gömülü bağlantılar (hukuki metinlerdeki atıflar) BİLEREK dışarıda:
   onları büyütmek satır akışını bozar ve erişilebilirlik ölçütü de onları
   zaten muaf tutar.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Marka: dokunulabilir yükseklik */
  .marka { padding-block: 8px; }

  /* Alt bilgideki telefon / e-posta: aranacak numaralar, satır içi kalmamalı */
  .altIletisim a {
    display: inline-block; padding-block: 11px; padding-right: 6px;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(203, 213, 225, .4);
  }
  .altIletisim { line-height: 1.5; }

  /* Alt menü bağlantıları 36px idi */
  .altMenu a { padding: 13px 0; }
  .altMenu { gap: 26px; }

  /* Tablolar: hücre dolgusu geniş kalınca metin sıkışıyordu.
     ⚠️ overflow-wrap ve genişlik ezmesi süs değil: çerez politikasındaki üç
     sütunlu tablo, th'lere yazılı yüzde genişlikler yüzünden 390px'te kabına
     sığmıyor ve YAN KAYIYORDU (ölçüldü). Hukuki bir metinde okurun tabloyu
     parmakla sağa kaydırması gerekmemeli. */
  th, td { padding: 12px 13px; overflow-wrap: anywhere; }
  .hukuk th, .hukuk td { width: auto !important; }
  .hukuk table { font-size: 14.5px; }
  td a { display: inline-block; padding-block: 9px; }

  /* Bölümler arası boşluk telefonda gereğinden fazlaydı */
  :root { --bosluk: clamp(52px, 11vw, 80px); }
}

/* Çok dar ekran: marka rozeti düşer, başlığa giriş düğmesi sığsın diye.
   Ölçüm: 375px'te kullanılabilir 327px; rozet olmadan 307px gerekiyor. */
@media (max-width: 430px) {
  .markaRozet { display: none; }
  .markaAd { font-size: 25px; }
  .ustGiris { padding: 11px 13px; }
}

/* ── HAREKETİ AZALT ──────────────────────────────────────────────────────────── */
/* ⚠️ GECİKMELERİ DE SIFIRLA. Süreyi 0.01ms yapmak yetmiyor: giriş bölümünün
   ögeleri 0.33 saniyeye kadar gecikmeli başlıyor ve gecikme boyunca öge kendi
   stilinde, yani opacity:0'da bekliyor. Hareketi kapatan kullanıcı içeriğin üçte
   bir saniye boyunca yok olmasını görürdü. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .belir, html.js .belir > * { opacity: 1; transform: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
    transition-delay: 0ms !important; animation-delay: 0ms !important;
  }
}

/* ── YAZDIRMA ────────────────────────────────────────────────────────────────────
   ⚠️ Sözleşme ve politika sayfaları GERÇEKTEN yazdırılıyor (hukuk danışmanına,
   dosyaya). Giriş animasyonları opacity:0 ile başladığı için, animasyonun
   çalışmadığı bir yazdırma bağlamında sayfa BOŞ çıkardı. Burası o riski kapatır;
   ayrıca hareketli ışık katmanları da yazdırmada mürekkep israfından ibaret. */
@media print {
  html.js .belir, html.js .belir > *,
  .hero .rozet, .hero h1, .hero .giris, .hero .dugmeler, .hero figure {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero::before, .hero::after,
  .bolum.koyuBolum::before, .bolum.koyuBolum::after,
  .alt::before, .alt::after, .cagri::before,
  main > .bolum:first-child::before { display: none !important; }
  .ust, .alt, .cagri { display: none; }
  .bolum { padding-block: 18px; page-break-inside: avoid; }
  a[href^="/"]::after { content: ' (perpluspdks.com' attr(href) ')'; font-size: 11px; color: #64748b; }
}

/* ── VAKA KARTI — somut senaryo: yanlış hesap / doğru hesap ─────────────────────
   Bu bileşen sitedeki en güçlü kanıt aracı. Soyut iddia yerine, müşterinin
   ikinci yılında karşılaşacağı GERÇEK bir vaka gösterilir. İçerik uydurma
   değil, puantaj motorunun kod yorumlarındaki fiili düzeltmelerden gelir. */
.vakalar { display: grid; gap: 22px; margin-top: 52px; }
.vaka { background: var(--beyaz); border: 1px solid #dde5ee; border-radius: var(--r-buyuk); overflow: hidden; box-shadow: var(--golge-s); transition: box-shadow .2s, transform .2s; }
.vaka:hover { box-shadow: var(--golge-m); transform: translateY(-3px); }
.koyuBolum .vaka { background: #16213a; border-color: rgba(255,255,255,.1); box-shadow: none; }

.vakaUst { display: flex; gap: 16px; align-items: flex-start; padding: 26px 28px 22px; }
.vakaUst .ikonKutu { margin-bottom: 0; width: 40px; height: 40px; border-radius: 10px; }
.vakaUst .ikonKutu .ikon { width: 20px; height: 20px; }
.vakaBaslik h3 { margin-bottom: 7px; }
.vakaBaslik p { color: var(--soluk); font-size: 15.5px; line-height: 1.55; }
.koyuBolum .vakaBaslik p { color: var(--koyuMetin); }

.vakaIkili { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi); border-top: 1px solid var(--cizgi); }
.koyuBolum .vakaIkili { background: rgba(255,255,255,.1); border-top-color: rgba(255,255,255,.1); }
.vakaYan { padding: 22px 28px 26px; background: var(--beyaz); }
.koyuBolum .vakaYan { background: #16213a; }
.vakaYan.yanlis { background: #fef2f2; }
.vakaYan.dogru { background: #ecfdf5; }
.koyuBolum .vakaYan.yanlis { background: rgba(239,68,68,.09); }
.koyuBolum .vakaYan.dogru { background: rgba(16,185,129,.09); }

.vakaEtiket { display: inline-flex; align-items: center; gap: 7px; font-family: var(--monoYazi); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; }
.vakaYan.yanlis .vakaEtiket { color: #b91c1c; }
.vakaYan.dogru .vakaEtiket { color: #047857; }
.koyuBolum .vakaYan.yanlis .vakaEtiket { color: #fca5a5; }
.koyuBolum .vakaYan.dogru .vakaEtiket { color: #6ee7b7; }
.vakaEtiket .isaret { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-family: var(--yazi); font-weight: 700; color: #fff; }
.vakaYan.yanlis .isaret { background: var(--kirmizi); }
.vakaYan.dogru .isaret { background: var(--yesil); }

.vakaYan p { font-size: 15.5px; line-height: 1.55; color: var(--orta); }
.koyuBolum .vakaYan p { color: #cbd5e1; }
.vakaHesap { font-family: var(--monoYazi); font-size: 14px; margin-top: 12px; padding: 11px 14px; border-radius: 7px; background: rgba(255,255,255,.72); border: 1px solid rgba(15,23,42,.08); color: var(--koyu); font-variant-numeric: tabular-nums; }
.koyuBolum .vakaHesap { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.vakaHesap b { font-weight: 700; }
.vakaYan.yanlis .vakaHesap b { color: #b91c1c; }
.vakaYan.dogru .vakaHesap b { color: #047857; }
.koyuBolum .vakaYan.yanlis .vakaHesap b { color: #fca5a5; }
.koyuBolum .vakaYan.dogru .vakaHesap b { color: #6ee7b7; }

@media (max-width: 820px) { .vakaIkili { grid-template-columns: 1fr; } }

/* ── VİDEO OYNATICI — tıklayınca yüklenen (facade) desen ────────────────────────
   Sayfa açılır açılmaz YouTube betiği ve çerezleri yüklenmesin diye önce yalnız
   kapak basılır; kullanıcı oynat deyince iframe oluşturulur. Adres
   youtube-nocookie.com'dur. Kılavuzdaki bileşenle aynı davranış. */
.videolar { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; margin-top: 52px; }
.video { margin: 0; }
.videoKapak {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk); overflow: hidden; cursor: pointer; background: var(--gece);
  aspect-ratio: 16 / 9; box-shadow: var(--golge-m); transition: transform .2s, box-shadow .2s;
}
.videoKapak:hover { transform: translateY(-4px); box-shadow: var(--golge-l); }
.videoKapak img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; }
.videoOynat {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%;
  background: var(--gradyan); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); transition: transform .2s;
}
.videoOynat svg { margin-left: 4px; }
.videoKapak:hover .videoOynat { transform: scale(1.09); }
.videoBilgi {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 15px 18px; text-align: left;
  background: linear-gradient(to top, rgba(15,23,42,.94), rgba(15,23,42,0)); color: #fff;
}
.videoAd { font-weight: 700; font-size: 16px; }
.videoSure { font-family: var(--monoYazi); font-size: 12.5px; background: rgba(255,255,255,.17); padding: 3px 10px; border-radius: 100px; flex: none; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-buyuk); display: block; }
.videoAciklama { color: var(--soluk); font-size: 15.5px; margin-top: 13px; line-height: 1.55; }
.koyuBolum .videoAciklama { color: var(--koyuMetin); }

/* Video henüz çekilmemiş yuva — boş kare yerine ne geleceğini söyler */
.videoYuva {
  border: 1px dashed var(--cizgi-koyu); border-radius: var(--r-buyuk); aspect-ratio: 16 / 9;
  display: grid; place-items: center; text-align: center; padding: 26px; background: var(--zemin-2);
}
.koyuBolum .videoYuva { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.videoYuva .ikonKutu { margin: 0 auto 14px; }
.videoYuva p { color: var(--soluk); font-size: 15.5px; }
.koyuBolum .videoYuva p { color: var(--koyuMetin); }
.videoYuva b { display: block; color: var(--koyu); font-family: var(--baslikYazi); font-size: 20px; font-weight: 700; margin-bottom: 7px; }
.koyuBolum .videoYuva b { color: #fff; }

/* ── TELEFON MAKETİ ─────────────────────────────────────────────────────────────
   İçindeki görsel GERÇEK: uygulamanın 390 piksel genişlikteki ekran görüntüsü.
   ⚠️ Yalnızca giriş ekranı kullanılıyor. Veri ekranları (pano, listeler) telefon
   genişliğinde panel içlerinde kesiliyor; onları maketin içinde göstermek yanıltıcı
   olurdu. Uygulamanın mobil düzeni düzeltilirse buraya onlar da konabilir. */
.telefon {
  position: relative; width: 300px; max-width: 100%; margin: 0 auto;
  border-radius: 42px; padding: 11px; background: linear-gradient(160deg, #334155 0%, #0f172a 60%);
  box-shadow: var(--golge-xl), inset 0 0 0 1px rgba(255,255,255,.1);
}
.telefonEkran { position: relative; border-radius: 32px; overflow: hidden; background: #fff; aspect-ratio: 390 / 844; }
.telefonEkran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* dinamik ada */
.telefon::before {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 100px; background: #0f172a; z-index: 2;
}
/* yan düğme */
.telefon::after {
  content: ''; position: absolute; right: -2px; top: 138px; width: 3px; height: 62px;
  border-radius: 0 3px 3px 0; background: #475569;
}

/* ── BÖLÜM AYRACI — yumuşak eğri geçiş ──────────────────────────────────────────
   Bölümler arasında düz çizgi yerine hafif bir eğri. Süs değil: açık ve koyu
   bölümlerin sınırını yumuşatıp sayfanın blok blok kesilmiş hissini alıyor. */
.ayrac { display: block; width: 100%; height: clamp(38px, 5vw, 72px); line-height: 0; }
.ayrac svg { display: block; width: 100%; height: 100%; }
.bolum + .ayrac, .ayrac + .bolum { margin-top: 0; }

/* ── IZGARA HÜCRELERİNİN DARALABİLMESİ ──────────────────────────────────────────
   ⚠️ GERÇEK HATAYI ÖNLER, SÜS DEĞİL.

   CSS Grid ve Flex hücreleri varsayılan olarak min-width:auto taşır; yani içeriğinin
   en dar hâlinin (min-content) altına İNEMEZLER. Telefonda .ikili tek sütuna
   düştüğünde hücre 327px yer bulmasına rağmen 429px kalıyor ve SAYFA YATAY KAYIYORDU
   (ölçüldü: ana sayfa 78px, cihazlar 33px taşma).

   min-width:0 hücrenin daralmasına izin verir; overflow-wrap ise bölünemeyen uzun
   bir kelimenin (uzun adres, kod) aynı sorunu yeniden doğurmasını engeller.

   Not: tablolar bilinçli olarak dışarıda — onlar .tabloKutu içinde kendi yatay
   kaydırmasıyla çalışır, kırpılmaları istenmez. */
.ikili > *,
.heroIzgara > *,
.faydalar > *,
.serit > *,
.vakalar > *,
.vakaIkili > *,
.videolar > *,
.rakamlar > *,
.cagriIc > *,
.altIc > *,
.altMenu > * { min-width: 0; }

.giris, .fayda p, .imli li, .vakaYan p, .videoAciklama, .gorselAlt { overflow-wrap: anywhere; }
.sl-markdown-content { overflow-wrap: anywhere; }

.altIletisim { font-size: 14px; margin-top: 16px; line-height: 1.75; color: var(--koyuMetin); }
.altIletisim a { color: #cbd5e1; text-decoration: none; }
.altIletisim a:hover { color: #fff; }
.altSaat { font-family: var(--monoYazi); font-size: 12.5px; color: var(--koyuMetin-2); }

/* ── HUKUKİ METİN ───────────────────────────────────────────────────────────────
   Sözleşme ve politika sayfaları. Uzun metin okunacağı için ölçü dar tutulur
   (yaklaşık 70 karakter), madde numaraları belirgin, satır aralığı geniş. */
.hukuk { max-width: 78ch; }
.hukuk h2 {
  font-size: clamp(22px, 2.2vw, 29px); margin-top: 52px; padding-top: 26px;
  border-top: 1px solid var(--cizgi);
}
.hukuk h2:first-of-type { margin-top: 12px; border-top: none; padding-top: 0; }
.hukuk h3 { font-size: clamp(17px, 1.5vw, 20px); margin-top: 32px; }
.hukuk p { margin-top: 15px; color: var(--orta); line-height: 1.72; }
.hukuk ul, .hukuk ol { margin-top: 15px; padding-left: 22px; color: var(--orta); line-height: 1.72; }
.hukuk li { margin-top: 9px; }
.hukuk li::marker { color: var(--mavi); font-weight: 700; }
.hukuk strong { color: var(--koyu); }
.hukuk a { color: var(--mavi); }
.hukuk .tabloKutu { margin-top: 26px; }

.hukukUst {
  background: var(--mavi-ton); border: 1px solid #c7ddfb; border-radius: var(--r-buyuk);
  padding: 22px 26px; margin-bottom: 40px;
}
.hukukUst p { margin-top: 8px; color: #1e40af; font-size: 15.5px; line-height: 1.6; }
.hukukUst p:first-child { margin-top: 0; }
.hukukUst b { font-weight: 700; }

.hukukUyari {
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--amber);
  border-radius: var(--r); padding: 20px 24px; margin-top: 30px;
}
.hukukUyari p { color: #92400e; margin-top: 10px; }
.hukukUyari p:first-child { margin-top: 0; }
.hukukUyari strong { color: #78350f; }

/* Sözleşmeler dizini */
.belgeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 44px; }
.belge {
  display: block; text-decoration: none; background: var(--beyaz); border: 1px solid #dde5ee;
  border-radius: var(--r-buyuk); padding: 26px 26px 28px; box-shadow: var(--golge-s);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.belge:hover { transform: translateY(-4px); box-shadow: var(--golge-m); border-color: var(--mavi-acik); }
.belge h3 { color: var(--gece); margin-bottom: 9px; }
.belge p { color: var(--soluk); font-size: 15.5px; line-height: 1.55; }
.belge .git { display: inline-flex; align-items: center; gap: 7px; color: var(--mavi); font-weight: 700; font-size: 15px; margin-top: 16px; }
.belge .git .ikon { width: 17px; height: 17px; }