/* ═══════════════════════════════════════════════════════════════════════════════════
   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 11px; 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. Eşik 920'de kalsaydı 920 ile menünün istediği genişlik 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.

   ÖLÇÜM (2026-10-01): menü ON maddeyle (Rehber eklendi; masaüstü giriş etiketi
   "Sisteme giriş" → "Giriş"; bağlantı yan boşluğu 12 → 11px) 1212px ve üstünde tek
   satır (üst çubuk 77px), 1208px ve altında iki satır (98px). Eşik 1240px = ölçülen
   sınırın 28px üstü; bu pay yazı tipi ve tarayıcı yakınlaştırma farkları için.
   Eskiden dokuz maddeyle 1211px istiyordu ve eşik 1200'dü.
   ➜ Menüye madde eklenir ya da bir etiket uzarsa AYNI ölçümü tekrarla:
     node site/docs/scripts/baslik-tarama.mjs   (site/sun.mjs çalışırken)
   1201-1300 arasında üst çubuk 77px kalmalı; hamburger tarafı da 77px. */
@media (max-width: 1240px) {
  .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; }

/* ── REHBER (MAKALE) ─────────────────────────────────────────────────────────────
   Rehber yazıları <div class="sinir hukuk"> içinde durur ve .hukuk'un okuma ölçüsünü
   (78ch), h2 ayraçlarını ve satır aralığını kullanır. "Kısaca" kutusu için .hukukUst,
   dikkat notu için .hukukUyari, tablo için .tabloKutu yeniden kullanılır. Buraya
   yalnızca makaleye özgü ögeler eklendi: künye, içindekiler, gövde içi şekil,
   sık sorulanlar ve kaynak notu. Yeni bir renk icat edilmedi. */
.hukuk .makaleKunye { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; font-size: 14.5px; color: var(--soluk); }
.hukuk .makaleKunye span { margin: 0; }
.hukuk .makaleKunye b { color: var(--koyu); font-weight: 600; }

.hukuk .icindekiler { margin: 0 0 12px; padding: 20px 26px 22px; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); background: var(--beyaz); }
.hukuk .icindekiler p { margin: 0 0 6px; font-family: var(--monoYazi); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--silik); }
.hukuk .icindekiler ol { margin: 0; padding-left: 22px; line-height: 1.55; }
.hukuk .icindekiler li { margin-top: 7px; color: var(--orta); }
.hukuk .icindekiler a { text-decoration: none; }
.hukuk .icindekiler a:hover { text-decoration: underline; }

/* Sabit üst çubuk (76px) içindekiler bağlantısının hedef başlığını örtmesin */
.hukuk h2[id], .hukuk h3[id] { scroll-margin-top: 96px; }

.hukuk figure { margin: 34px 0 0; }

.hukuk .sss h3 { margin-top: 26px; font-size: clamp(17px, 1.5vw, 19.5px); }
.hukuk .sss h3 + p { margin-top: 8px; }

.hukuk .kaynakNot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.65; color: var(--soluk); }
.hukuk .kaynakNot p { margin-top: 8px; color: var(--soluk); }
.hukuk .kaynakNot ul { margin-top: 8px; color: var(--soluk); }