/* ════════════════════════════════════════════════════════════════════════════
   PERPLUS ÖĞRENCİ — TANITIM SİTESİ STİLİ

   ⚠️ RENKLER UYDURULMADI. Hepsi uygulamanın kendi tasarım değerlerinden alındı:
   PerplusOgrenci.Frontend/wwwroot/app.css → :root bloğu.
   Ziyaretçi siteden uygulamaya geçtiğinde renk/köşe/gölge değişmemeli; site
   kendi paletini kurarsa iki yer ayrı ürün gibi görünür.

   Uygulamada bir token değişirse buradaki karşılığı da güncellenmeli. Sabit
   hex yazmak yerine aşağıdaki değişkenleri kullanın.

   Yazı tipi Inter — uygulamanın app.css:9'daki font-family'sinin aynısı.
   (Kardeş proje PDKS Outfit/Jakarta kullanıyor; o BİLEREK kopyalanmadı.)
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marka (app.css ile birebir) ─────────────────────────────────── */
  --marka-mavi: #2980b9;
  --marka-lacivert: #1e3a8a;
  --marka-gece: #0f172a;
  --marka-zemin: #eff6ff;
  --marka-kenarlik: #dbeafe;

  /* ── Yüzeyler ────────────────────────────────────────────────────── */
  --kart-zemin: #ffffff;
  --sayfa-zemin: #f8fafc;
  --kenarlik: #e2e8f0;
  --kenarlik-acik: #f1f5f9;

  /* ── Metin ───────────────────────────────────────────────────────── */
  --metin-koyu: #1e293b;
  --metin-govde: #475569;
  --metin-ikincil: #64748b;
  --metin-sonuk: #94a3b8;
  --metin-cok-sonuk: #cbd5e1;

  /* ── KOYU ZEMİNDE METİN ──────────────────────────────────────────────────
     ⚠️ Koyu yüzeyde gövde metni için --metin-ikincil (#64748b) KULLANMAYIN:
     #0f172a üzerinde 2.9:1 veriyor, WCAG AA normal metin için 4.5:1 ister.
     Aşağıdaki iki ton ölçülerek seçildi:
       --koyu-metin   #cbd5e1 -> #0f172a üzerinde 12.1:1
       --koyu-metin-2 #a3b2c6 -> #0f172a üzerinde  7.6:1  (küçük punto, künye)
     Başlıklar beyaz kalır; hiyerarşi üç basamak: #fff -> #cbd5e1 -> #a3b2c6. */
  --koyu-metin: #cbd5e1;
  --koyu-metin-2: #a3b2c6;

  /* Koyu zeminde VURGU mavisi — bu da ölçülerek seçildi.
     Marka mavisi (#2980b9) #0f172a üzerinde 4.17:1 veriyor: iri başlıkta
     yeterli (AA büyük metin eşiği 3:1) ama küçük metinde ve ince ögelerde
     sınırda kalıyor. #60a5fa aynı zeminde 7.07:1 — aynı mavi ailesinin koyu
     yüzey karşılığı, yeni bir renk değil.
     ⚠️ AÇIK zeminde kullanmayın; orada --marka-mavi doğrudur (#60a5fa beyaz
     üzerinde 2.3:1 ile okunmaz). */
  --koyu-vurgu: #60a5fa;

  /* ── BEYAZ YAZI TAŞIYAN MAVİ YÜZEY ──────────────────────────────────────
     Marka mavisi (#2980b9) üzerine beyaz yazı 4.30:1 veriyor; AA normal metin
     için 4.5 ister. Dolu buton ve rozet bu yüzden sınırın altında kalıyordu.

     Marka mavisinin KENDİSİ değiştirilmedi — uygulamanın app.css'iyle birebir
     kalması gerekiyor ve logo yazısı zaten WCAG 1.4.3'te logotype istisnası
     kapsamında. Yalnızca beyaz yazı taşıyan yüzeyler bir ton koyulaştırıldı:
     #2576ad üzerinde beyaz 4.92:1. Gözle ayırt edilmiyor.
     ⚠️ Mavi üzerine beyaz yazı koyan yeni bir öge eklerken bunu kullanın. */
  --marka-mavi-koyu: #2576ad;

  /* ── Köşe yarıçapları (app.css ile birebir) ──────────────────────── */
  --kose-mini: 8px;
  --kose-kucuk: 10px;
  --kose-orta: 12px;
  --kose: 16px;
  --kose-buyuk: 20px;
  --kose-hap: 999px;

  /* ── Gölge ve geçiş (app.css ile birebir) ────────────────────────── */
  --golge-yumusak: 0 4px 15px rgba(0, 0, 0, 0.02);
  --golge-orta: 0 12px 24px -4px rgba(15, 23, 42, 0.08);
  --golge-guclu: 0 20px 48px rgba(15, 23, 42, 0.18);
  --gecis: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Sayfa ölçüleri ──────────────────────────────────────────────── */
  --en: 1140px;
  --en-dar: 760px; /* uzun metin sütunu — satır uzunluğu okunabilir kalsın */
}

/* ── TEMEL SIFIRLAMALAR ────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sayfa-zemin);
  color: var(--metin-govde);
  font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--marka-lacivert);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Klavyeyle gezen için görünür odak — fare kullanıcısını rahatsız etmez */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--marka-mavi);
  outline-offset: 3px;
  border-radius: var(--kose-mini);
}

/* İçeriğe atla — ekran okuyucu ve klavye kullanıcısı menüyü her sayfada
   yeniden dinlemek zorunda kalmasın */
.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marka-lacivert);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--kose-mini) 0;
  font-weight: 700;
  z-index: 100;
}

.atla:focus {
  left: 0;
}

.kap {
  width: 100%;
  max-width: var(--en);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── ÜST BAŞLIK ───────────────────────────────────────────────────── */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kenarlik);
}

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 68px;

  /* ⚠️ Yan boşluk sayfanınkinden (24 px) DAR — ölçülerek. Başlık içeriği
     1093 px istiyor, 24 px dolguda kaba tam tamına sığıyordu: sıfır pay.
     Inter yüklenmeden önce yedek yazı tipi bir tık genişse menü taşar ve
     sayfa bir an yatay kayar. 16 px dolgu 15 px pay bırakıyor; logonun
     sayfa içeriğine göre 8 piksellik kayması gözle fark edilmiyor. */
  padding-inline: 16px;
}

/* Yazı markası — uygulamanın başlığındaki ile aynı biçim:
   ince "Perplus" + kalın "Öğrenci" + rozet */
.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--metin-koyu);
}

.marka:hover {
  text-decoration: none;
}

.marka b {
  font-weight: 800;
}

.marka span:first-child {
  font-weight: 400;
  color: var(--marka-mavi);
}

.rozet {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--marka-mavi-koyu);
  padding: 4px 7px;
  border-radius: var(--kose-hap);
  white-space: nowrap;
}

.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ⚠️ MENÜ TEK SATIRDA KALMAK ZORUNDA. Yedi bağlantı + iki düğme var ve
   kabın genişliği 1140 px (--en). Dolgu 8/13 ve punto 0.92 iken toplam 1147 px
   ediyordu: menü kabından taşıyor, sayfa YATAY KAYIYORDU — hem de her ekran
   genişliğinde, dar ekranda değil. Ölçülerek daraltıldı.
   Menüye yeni bir madde eklemeden önce genişliği ölçün. */
.menu a {
  display: inline-block;
  white-space: nowrap;   /* madde iki satıra kırılırsa başlık kazara uzuyor */
  padding: 8px 9px;
  border-radius: var(--kose-mini);
  font-size: 0.89rem;
  font-weight: 600;
  color: var(--metin-govde);
  transition: var(--gecis);
}

.menu a:hover {
  background: var(--marka-zemin);
  color: var(--marka-lacivert);
  text-decoration: none;
}

.menu a[aria-current='page'] {
  background: var(--marka-zemin);
  color: var(--marka-lacivert);
}

/* ── MENÜ İÇİNDEKİ İKİ KAPI ───────────────────────────────────────────────
   Geniş ekranda menü satırının sağ ucunda iki dolgulu düğme olarak dururlar;
   dar ekranda açılır menünün altına düşerler.

   ⚠️ RENKLERİ BİLEREK FARKLI. "Sisteme giriş" koyu, "Teklif alın" mavi.
   İkisi de mavi olsaydı mevcut müşteri ile ilk kez gelen ziyaretçi aynı
   düğmeye bakıyor olurdu; ayrı renk, iki ayrı kapı olduklarını bir bakışta
   söylüyor. */
.menu-giris a,
.menu-teklif a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--kose-mini);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--gecis);
}

.menu-giris a {
  background: var(--marka-gece);
  color: #fff;
}

.menu-giris a:hover {
  background: #1e293b;
  color: #fff;
  text-decoration: none;
}

.menu-teklif a {
  background: var(--marka-mavi-koyu);
  color: #fff;
}

.menu-teklif a:hover {
  background: var(--marka-lacivert);
  color: #fff;
  text-decoration: none;
}

.menu-giris {
  margin-left: 8px;
}

/* Simge — metinle aynı renk, satırla hizalı */
.ikon {
  width: 15px;
  height: 15px;
  flex: none;
  color: currentColor;
}

/* ── DAR EKRAN GİRİŞ KISAYOLU ─────────────────────────────────────────────
   Yalnızca menünün gizlendiği genişlikte görünür. Mevcut müşteri sisteme
   girmek için önce menüyü açmak zorunda kalmasın diye başlıkta duruyor. */
.ust-giris {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
  padding: 8px 13px;
  border-radius: var(--kose-mini);
  background: var(--marka-gece);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.ust-giris:hover {
  background: #1e293b;
  color: #fff;
  text-decoration: none;
}

/* ── MOBİL MENÜ DÜĞMESİ ───────────────────────────────────────────────────
   ⚠️ Bu taban kural, aşağıdaki `@media (max-width: 860px)` bloğundan ÖNCE
   durmak ZORUNDA. Aynı özgüllükte sıralama kazanır; sonraya alınırsa medya
   sorgusundaki `display: inline-flex` ezilir ve düğme dar ekranda da
   görünmez — yani mobil menü tamamen ölür. */
.menu-dugme {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-mini);
  background: var(--kart-zemin);
  color: var(--metin-koyu);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--gecis);
}

.menu-dugme:hover {
  border-color: var(--marka-kenarlik);
  background: var(--marka-zemin);
  color: var(--marka-lacivert);
}

.menu-cizgiler {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}

.menu-cizgiler i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Menü açıkken düğme de basılı görünsün */
.menu-dugme[aria-expanded='true'] {
  border-color: var(--marka-kenarlik);
  background: var(--marka-zemin);
  color: var(--marka-lacivert);
}

.dugme {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--kose-mini);
  font-size: 0.92rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--gecis);
}

.dugme-birincil {
  background: var(--marka-mavi-koyu);
  color: #fff;
  box-shadow: var(--golge-yumusak);
}

.dugme-birincil:hover {
  background: var(--marka-lacivert);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--golge-orta);
}

.dugme-ikincil {
  background: var(--kart-zemin);
  color: var(--metin-koyu);
  border-color: var(--kenarlik);
}

.dugme-ikincil:hover {
  border-color: var(--marka-kenarlik);
  background: var(--marka-zemin);
  color: var(--marka-lacivert);
  text-decoration: none;
}

/* ── SAYFA BAŞLIĞI ────────────────────────────────────────────────── */
.sayfa-basi {
  background: var(--kart-zemin);
  border-bottom: 1px solid var(--kenarlik);
  padding: 48px 0 40px;
}

.sayfa-basi h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--metin-koyu);
  line-height: 1.2;
}

.sayfa-basi p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--metin-ikincil);
  max-width: var(--en-dar);
}

/* ── UZUN METİN (hukuki sayfalar, kılavuz metinleri) ──────────────── */
.metin {
  max-width: var(--en-dar);
  padding: 44px 0 72px;
}

.metin h2 {
  margin: 44px 0 14px;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--metin-koyu);
  scroll-margin-top: 90px;
}

.metin h2:first-child {
  margin-top: 0;
}

.metin h3 {
  margin: 28px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--metin-koyu);
}

.metin p,
.metin li {
  font-size: 0.97rem;
  color: var(--metin-govde);
}

.metin ul,
.metin ol {
  padding-left: 22px;
}

.metin li {
  margin-bottom: 7px;
}

.metin li::marker {
  color: var(--metin-sonuk);
}

.metin strong {
  color: var(--metin-koyu);
  font-weight: 700;
}

/* Tanım listesi — "hangi veri / ne için" gibi eşleşmeler */
.metin table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.92rem;
}

.metin th,
.metin td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border: 1px solid var(--kenarlik);
}

.metin th {
  background: var(--kenarlik-acik);
  font-weight: 700;
  color: var(--metin-koyu);
}

/* Uzun tabloları dar ekranda yatay kaydır — sayfanın kendisi kaymasın */
.tablo-kabi {
  overflow-x: auto;
  margin: 18px 0;
}

.tablo-kabi table {
  margin: 0;
  min-width: 480px;
}

/* ── VURGU KUTUSU ─────────────────────────────────────────────────── */
.kutu {
  display: flex;
  gap: 12px;
  margin: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--marka-kenarlik);
  border-left: 4px solid var(--marka-mavi);
  border-radius: var(--kose-mini);
  background: var(--marka-zemin);
  font-size: 0.93rem;
  line-height: 1.6;
}

.kutu p {
  margin: 0;
}

.kutu p + p {
  margin-top: 8px;
}

.kutu-uyari {
  border-color: #fde68a;
  border-left-color: #d97706;
  background: #fffbeb;
}

.kutu-onemli {
  border-color: #fecaca;
  border-left-color: #dc2626;
  background: #fef2f2;
}

/* ── İÇİNDEKİLER ──────────────────────────────────────────────────── */
.icindekiler {
  margin: 0 0 36px;
  padding: 18px 22px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose);
  background: var(--kart-zemin);
}

.icindekiler h2 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metin-ikincil);
}

.icindekiler ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 28px;
}

.icindekiler li {
  margin-bottom: 5px;
  break-inside: avoid;
}

@media (max-width: 640px) {
  .icindekiler ol {
    columns: 1;
  }
}

/* ── ALT BİLGİ ────────────────────────────────────────────────────── */
.alt {
  background: var(--marka-gece);
  color: var(--koyu-metin);
  padding: 52px 0 28px;
  font-size: 0.92rem;
}

.alt a {
  color: var(--koyu-metin);
}

.alt a:hover {
  color: #fff;
}

.alt-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.alt h3 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.alt ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.alt li {
  margin-bottom: 8px;
}

.alt .marka {
  color: #fff;
  margin-bottom: 12px;
}

.alt .marka span:first-child {
  color: #fff;
}


.kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-top: 22px;
  color: var(--koyu-metin-2);
  font-size: 0.85rem;
}

.kunye p {
  margin: 0;
}

/* ── BAŞLIK DAR EKRAN ─────────────────────────────────────────────────────
   ⚠️ KIRILMA NOKTASI SAYFANINKİNDEN AYRI, ÖLÇÜLEREK SEÇİLDİ.
   Üst menü yedi bağlantı + iki düğme taşıyor. Tarayıcıda ölçüldü: menü 871 px,
   logo 259 px, kenar boşluklarıyla birlikte başlık 1201 px istiyor. Bu yüzden
   tam menü ancak 1220 px'ten sonra gösteriliyor, altında açılır panele
   geçiyor.

   Eskiden bu blok 860 px'deydi. "Videolar" maddesi eklenince arada kalan HER
   genişlikte menü kabından taşıp sayfayı YATAY KAYDIRDI — dar ekranda değil,
   her ekranda. Menüye yeni bir madde eklerken bu sayıyı yeniden ölçün.

   Sayfa düzeninin kendi kırılma noktası (860 px) aşağıda, ayrı duruyor. */
@media (max-width: 1220px) {
  /* ── MOBİL MENÜ ────────────────────────────────────────────────────────
     Burada eskiden yalnızca `.menu { display: none }` vardı ve yerine hiçbir
     şey konmamıştı. Site tek sayfalıyken fark edilmiyordu; sayfalar çoğalınca
     telefondan gelen ziyaretçinin elinde tek bağlantı "Panele giriş" kalıyordu,
     yani site mobilde gezilemiyordu.

     Menü artık başlığın altından açılan tam genişlikte bir panel. Açık/kapalı
     durumu `hidden` özniteliğiyle taşınıyor (kabuk.html'deki betik yönetiyor);
     betik çalışmazsa menü açık kalır ve site yine gezilebilir. */
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 16px;
    background: var(--kart-zemin);
    border-bottom: 1px solid var(--kenarlik);
    box-shadow: var(--golge-orta);
  }

  /* `.menu`in kendi display:flex kuralı, [hidden] özniteliğinin tarayıcı
     varsayılanını ezer — bu yüzden açıkça yazılıyor. */
  .menu[hidden] {
    display: none;
  }

  .menu a {
    padding: 12px 14px;
    font-size: 1rem;
  }

  /* Açılır menüde iki düğme tam genişlik ve ortalanmış dursun */
  .menu-giris,
  .menu-teklif {
    margin: 0;
  }

  .menu-giris {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--kenarlik);
  }

  .menu-teklif {
    margin-top: 8px;
  }

  .menu-giris a,
  .menu-teklif a {
    justify-content: center;
    padding: 13px 16px;
    font-size: 0.95rem;
  }

  .menu-dugme {
    display: inline-flex;
  }

  .ust-giris {
    display: inline-flex;
  }
}

/* ── DAR EKRAN ────────────────────────────────────────────────────── */
@media (max-width: 860px) {

  .sayfa-basi {
    padding: 34px 0 28px;
  }

  .metin {
    padding: 32px 0 56px;
  }
}

/* ⚠️ ÖLÇÜLDÜ: 375px'te sayfa 14px yatay kayıyordu. Sebep başlık çubuğuydu —
   marka (259px) + "Panele giriş" (90px) + kenar boşlukları (48px) = 397px.
   Bu sayfanın en kalabalık ziyaretçisi telefondan gelen veli (mobil uygulamanın
   üç ekranından buraya bağlantı var), yani dar ekran istisna değil ana durum.
   Rozet dar ekranda düşüyor, boşluklar daralıyor. */
@media (max-width: 460px) {
  .kap {
    padding: 0 16px;
  }

  .rozet {
    display: none;
  }

  .marka {
    font-size: 1.12rem;
    gap: 6px;
  }

  .ust-ic {
    height: 60px;
  }

  .dugme {
    padding: 9px 14px;
    font-size: 0.86rem;
  }

  /* Çok dar ekranda başlıktaki giriş kısayolunun yazısı düşer, simgesi kalır —
     marka + simge + Menü üçü rahatça sığsın diye. */
  .ust-giris {
    gap: 0;
    padding: 8px 10px;
    font-size: 0;
  }

  .ust-giris .ikon {
    width: 17px;
    height: 17px;
  }

  .icindekiler {
    padding: 16px 18px;
  }

  .metin h2 {
    font-size: 1.18rem;
  }
}

/* ── YAZDIRMA ─────────────────────────────────────────────────────────────
   ⚠️ GEREKLİ, SÜS DEĞİL. Hukuki metinler gerçekten yazdırılıyor (okul
   sözleşme dosyasına koyuyor). Menü, alt bilgi ve yapışkan başlık kâğıtta
   yer kaplar; bağlantı adresleri ise kâğıtta görünmediği için metin
   anlamsızlaşır — o yüzden adresler açık yazdırılıyor. */
@media print {
  .ust,
  .alt,
  .atla,
  .dugme {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .kap {
    max-width: none;
    padding: 0;
  }

  .metin {
    max-width: none;
    padding: 0;
  }

  .metin h2 {
    page-break-after: avoid;
  }

  .kutu,
  .metin table,
  .metin li {
    page-break-inside: avoid;
  }

  .metin a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #444;
  }
}

/* ── HAREKET AZALTMA ──────────────────────────────────────────────────────
   Yalnız süreyi kısaltmak yetmiyor: gecikme boyunca öge kendi başlangıç
   stilinde bekliyor ve içerik kısa süre yok görünüyordu. Gecikmeler de
   sıfırlanıyor. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   TANITIM SAYFASI BİLEŞENLERİ

   Yukarıdaki bölümler hukuki/uzun metin sayfaları içindir (.metin, .icindekiler,
   .kutu). Aşağıdakiler tanıtım sayfalarının kendi ögeleri.

   İki kural:
   • Kart ızgaraları @media DEĞİL, `repeat(auto-fit, minmax(min(Xpx,100%),1fr))`
     kullanır. @media görüntü alanına bakar; ızgaranın gerçekte içine sığdığı
     yer ise KAPSAYICIDIR. İkisi karıştırıldığında kart, kabına sığmadığı hâlde
     yan yana kalmaya çalışır ve taşar.
   • Koyu zeminli bölümlerde gövde metni için --metin-ikincil KULLANILMAZ
     (yukarıdaki --koyu-metin açıklamasına bakın).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── GİRİŞ BÖLÜMÜ ─────────────────────────────────────────────────── */
.giris {
  position: relative;
  background: var(--marka-gece);
  padding: 72px 0 56px;
  overflow: hidden;
}

/* Sol üstten gelen yumuşak mavi ışık — düz koyu blok yerine derinlik.
   Metnin arkasında kaldığı için kontrastı ölçülebilir biçimde değiştirmiyor
   (en parlak noktasında bile zemin #16253f civarında kalıyor). */
.giris::before {
  content: '';
  position: absolute;
  inset: -40% 40% 30% -20%;
  background: radial-gradient(circle, rgba(41, 128, 185, 0.28), transparent 62%);
  pointer-events: none;
}

.giris-ic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

.etiket {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--kose-hap);
  background: rgba(41, 128, 185, 0.18);
  border: 1px solid rgba(41, 128, 185, 0.45);
  color: #bfdbfe;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.giris h1 {
  margin: 22px 0 18px;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
}

.vurgu {
  color: var(--koyu-vurgu);
}

.giris-ozet {
  margin: 0;
  max-width: 540px;
  font-size: 1.06rem;
  color: var(--koyu-metin);
}

.dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Koyu zeminde ikincil düğme beyaz kart gibi durmasın */
.giris .dugme-ikincil,
.bolum-koyu .dugme-ikincil,
.kapanis .dugme-ikincil {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.giris .dugme-ikincil:hover,
.bolum-koyu .dugme-ikincil:hover,
.kapanis .dugme-ikincil:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* ── TELEFON TEMSİLİ ──────────────────────────────────────────────────────
   Ekran görüntüsü değil, CSS. Ürünün asıl anı okul panelinde değil velinin
   kilit ekranında geçtiği için giriş bölümüne bu kondu. Gerçek panel ekran
   görüntüleri aşağıdaki bölümlere girecek. */
.giris-gorsel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bildirim {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.bildirim-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--metin-govde);
}

.bildirim-uyg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--metin-koyu);
}

.bildirim-im {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--marka-mavi-koyu);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  font-style: normal;
}

.bildirim-baslik {
  margin: 7px 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--metin-koyu);
  line-height: 1.35;
}

.bildirim-alt {
  margin: 0;
  font-size: 0.8rem;
  color: var(--metin-govde);
}


/* ── SAYI ŞERİDİ ──────────────────────────────────────────────────── */
.sayilar {
  background: var(--marka-gece);
  padding: 0 0 64px;
}

.sayilar-ic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sayi b {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.sayi b small {
  margin-left: 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--koyu-vurgu);
}

.sayi span {
  display: block;
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--koyu-metin-2);
}

/* ── BÖLÜM İSKELETİ ───────────────────────────────────────────────── */
.bolum {
  padding: 76px 0;
}

.bolum-vurgu {
  background: var(--kart-zemin);
  border-top: 1px solid var(--kenarlik);
  border-bottom: 1px solid var(--kenarlik);
}

.bolum-koyu {
  background: var(--marka-gece);
}

.ust-etiket {
  display: block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--marka-lacivert);
}

.bolum-koyu .ust-etiket {
  color: var(--koyu-vurgu);
}

.bolum-basi {
  max-width: 700px;
  margin-bottom: 40px;
}

.bolum h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--metin-koyu);
}

.bolum-koyu h2 {
  color: #fff;
}

.bolum-basi p,
.bolum-ozet {
  margin: 0 0 14px;
  font-size: 1.02rem;
  color: var(--metin-govde);
}

.bolum-koyu .bolum-ozet {
  color: var(--koyu-metin);
}

/* Yan yana iki sütun: solda anlatı, sağda kanıt */
.ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}

/* ── GÜNÜN ANLARI ─────────────────────────────────────────────────── */
.anlar,
.kartlar,
.vakalar {
  display: grid;
  gap: 20px;
}

.anlar {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.an {
  padding: 24px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose);
  background: var(--kart-zemin);
  box-shadow: var(--golge-yumusak);
}

.an-saat {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marka-mavi);
  font-variant-numeric: tabular-nums;
}

.an h3 {
  margin: 10px 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--metin-koyu);
}

.an p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--metin-govde);
}

.an-vurgu {
  background: var(--marka-zemin);
  border-color: var(--marka-kenarlik);
}

/* ── KART IZGARASI ────────────────────────────────────────────────── */
.kartlar {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.kartlar-dar {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.kart {
  padding: 24px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose);
  background: var(--kart-zemin);
  box-shadow: var(--golge-yumusak);
}

.kart h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--metin-koyu);
}

.kart p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--metin-govde);
}

.kart p + p {
  margin-top: 8px;
}

.kart .kart-not {
  font-size: 0.85rem;
  color: var(--metin-ikincil);
}

/* Beyaz zeminli bölümde beyaz kart görünmez — kartlar sayfa zeminine geçer */
.bolum-vurgu .kart,
.bolum-vurgu .an,
.bolum-vurgu .vaka {
  background: var(--sayfa-zemin);
}

.bolum-vurgu .an-vurgu {
  background: var(--marka-zemin);
}

/* ── TİKLİ LİSTE ──────────────────────────────────────────────────── */
.tikli {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* .metin içindeki ul kuralını geri al (orada girinti + madde imi var) */
.metin .tikli {
  padding-left: 0;
  list-style: none;
}

.tikli li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  font-size: 0.97rem;
  color: var(--metin-govde);
}

.tikli li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.18em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--marka-zemin);
  color: var(--marka-lacivert);
  font-size: 0.7rem;
  font-weight: 800;
}

/* ── AYAR PANOSU TEMSİLİ ──────────────────────────────────────────── */
.pano {
  padding: 22px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-buyuk);
  background: var(--kart-zemin);
  box-shadow: var(--golge-orta);
}

.pano-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kenarlik);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--metin-ikincil);
}

/* Tek kullanımlık "açık" rozeti — app.css'te karşılığı olan bir token yok.
   Bilinçli istisna (bkz. CLAUDE.md, tek kullanımlık vurgu renkleri). */
.pano-durum {
  padding: 3px 10px;
  border: 1px solid #a7f3d0;
  border-radius: var(--kose-hap);
  background: #ecfdf5;
  color: #047857;
  letter-spacing: 0.04em;
}

.pano-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--kenarlik-acik);
}

.pano-ad {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--metin-koyu);
}

.pano-ad em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metin-govde);
}

.pano-saat {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--marka-lacivert);
  font-variant-numeric: tabular-nums;
}

.pano-not {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--metin-ikincil);
}

/* ── VAKA KARTLARI ────────────────────────────────────────────────── */
.vakalar {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.vaka {
  padding: 24px;
  border: 1px solid var(--kenarlik);
  border-top: 3px solid var(--marka-mavi);
  border-radius: var(--kose);
  background: var(--kart-zemin);
}

.vaka-etiket {
  display: block;
  margin-bottom: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: var(--metin-govde);
}

.vaka strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--metin-koyu);
}

.vaka p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--metin-govde);
}

/* ── KOYU ZEMİNDE ALINTI ──────────────────────────────────────────── */
.alinti {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--koyu-vurgu);
  border-radius: var(--kose);
  background: rgba(255, 255, 255, 0.05);
}

.alinti p {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #fff;
}

.alinti span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--koyu-metin-2);
}

/* ── DÜRÜSTLÜK NOTU ───────────────────────────────────────────────── */
.not {
  margin: 28px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-mini);
  background: var(--sayfa-zemin);
  font-size: 0.92rem;
  color: var(--metin-govde);
}

.not strong {
  color: var(--metin-koyu);
}

/* ── KARŞILAŞTIRMA TABLOSU ────────────────────────────────────────────────
   .metin table kuralları buraya ulaşmıyor (tablo .metin dışında). Kurallar
   .karsilastirma altına kapatıldı: gizlilik sayfasındaki tablolar bu
   biçimlendirmeden etkilenmesin. */
.karsilastirma table {
  width: 100%;
  min-width: 480px;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: var(--kart-zemin);
}

.karsilastirma th,
.karsilastirma td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--kenarlik);
}

.karsilastirma th {
  background: var(--kenarlik-acik);
  font-weight: 700;
  color: var(--metin-koyu);
}

/* Son sütun bizim tarafımız — göz oraya gitsin */
.karsilastirma td:last-child {
  font-weight: 600;
  color: var(--metin-koyu);
  background: var(--marka-zemin);
}

/* ── KAPANIŞ ÇAĞRISI ──────────────────────────────────────────────── */
.kapanis {
  padding: 72px 0;
  background: var(--marka-gece);
  text-align: center;
}

.kapanis h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.kapanis p {
  margin: 0 auto;
  max-width: 540px;
  color: var(--koyu-metin);
}

.kapanis .dugmeler {
  justify-content: center;
}

/* ── İLETİŞİM SAYFASI ─────────────────────────────────────────────── */
.iletisim-kartlari {
  margin-top: 44px;
}

.iletisim-kartlari .kart p {
  margin: 0 0 6px;
}

.iri-baglanti {
  font-size: 1.12rem;
  font-weight: 700;
}

/* ── TANITIM SAYFALARI: DAR EKRAN ─────────────────────────────────────────
   Izgaralar zaten kapsayıcıya göre kendiliğinden kırılıyor; burada yalnızca
   dikey boşluklar ve tipografi ölçeği toplanıyor. */
@media (max-width: 860px) {
  .giris {
    padding: 52px 0 44px;
  }

  .giris-ic {
    gap: 40px;
  }

  .sayilar {
    padding-bottom: 48px;
  }

  .bolum {
    padding: 56px 0;
  }

  .ikili {
    gap: 32px;
  }

  .kapanis {
    padding: 56px 0;
  }
}

@media (max-width: 460px) {
  .sayi b {
    font-size: 2.1rem;
  }


  .an,
  .kart,
  .vaka,
  .pano {
    padding: 20px;
  }

  .alinti {
    padding: 22px;
  }
}

/* ── TANITIM SAYFALARI: YAZDIRMA ─────────────────────────────────────────
   Koyu bölümler yazıcıda ya koca siyah bloklar olarak çıkar ya da (tarayıcı
   arka planları basmadığı için) beyaz üstüne beyaz yazıya döner. İkisi de
   okunmaz; yazdırmada koyu zeminler beyaza çevriliyor. */
@media print {
  .giris,
  .sayilar,
  .bolum-koyu,
  .kapanis {
    background: #fff !important;
    color: #000 !important;
  }

  .giris::before {
    display: none;
  }

  .giris h1,
  .bolum-koyu h2,
  .kapanis h2,
  .vurgu,
  .alinti p,
  .sayi b {
    color: #000 !important;
  }

  .giris-ozet,
  .sayi span,
  .kapanis p,
  .alinti span,

  .telefon,
  .dugmeler {
    display: none;
  }

  .an,
  .kart,
  .vaka,
  .pano {
    break-inside: avoid;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EKRAN GÖRÜNTÜSÜ BİLEŞENLERİ

   Görseller GERÇEK: yerelde çalışan uygulamadan, demo verisiyle dolu bir okulun
   (Örnek Koleji) ekranlarından alındı. Üretimden ya da bir müşteri okulundan
   görüntü alınmadı. Üretim yöntemi site/OKU-BENI.md içinde yazılı.

   `width`/`height` öznitelikleri HTML'de veriliyor — yoksa görsel yüklenirken
   sayfa zıplar (layout shift). Ölçüler 1440x900.
   ════════════════════════════════════════════════════════════════════════════ */
.tarayici {
  margin: 0;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose);
  overflow: hidden;
  background: var(--kart-zemin);
  box-shadow: var(--golge-orta);
}

/* Koyu zeminde çerçeve yüzmüş gibi dursun */
.bolum-koyu .tarayici,
.giris .tarayici {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--golge-guclu);
}

.tarayici-cubuk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--kenarlik-acik);
  border-bottom: 1px solid var(--kenarlik);
}

.tarayici-cubuk i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--metin-cok-sonuk);
}

.tarayici-cubuk em {
  flex: 1;
  min-width: 0;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: var(--kose-hap);
  background: var(--kart-zemin);
  font-style: normal;
  font-size: 0.7rem;
  color: var(--metin-ikincil);
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarayici img {
  display: block;
  width: 100%;
  height: auto;
}

.tarayici figcaption {
  padding: 11px 15px;
  border-top: 1px solid var(--kenarlik-acik);
  font-size: 0.83rem;
  color: var(--metin-ikincil);
}

.tarayici figcaption strong {
  color: var(--metin-koyu);
  font-weight: 700;
}

/* ── GİRİŞ BÖLÜMÜ: PANEL + TELEFON BİR ARADA ──────────────────────────────
   Ürünün iki yüzü aynı karede: okulun ekranı ve velinin telefonu. Telefon
   çerçevenin sol alt köşesine biniyor; taşma `.giris`in overflow:hidden'ı
   tarafından kırpılmasın diye negatif kaydırma ızgara boşluğundan (56px)
   küçük tutuldu. */
.yigin {
  position: relative;
  width: 100%;
}

@media (max-width: 860px) {
  /* Dar ekranda binişme yerine alt alta — küçük ekranda üst üste binen iki
     görsel okunmuyor. */
  .telefon-yuzen {
    position: static;
    width: 240px;
    margin: -8px auto 0;
  }

  .yigin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
}

/* ── EKRAN GÖRÜNTÜSÜ ŞERİDİ (Özellikler sayfası) ──────────────────────────── */
.ekran-serit {
  margin-top: 28px;
}

.ekran-ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 22px;
  margin-top: 28px;
}

/* ── VELİ UYGULAMASI EKRAN GÖRÜNTÜLERİ ───────────────────────────────────────
   Expo web derlemesinden 390x880 @2x alındı; gerçek uygulama ekranları.
   Telefon çerçevesi ayrıca çizilmiyor — görüntünün kendisi yuvarlatılıyor. */
.telefonlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 22px;
  margin-top: 30px;
}

.telefon-gorsel {
  margin: 0;
}

/* Görselin kendi çerçevesi yok; çevresindeki .cihaz gövdesi onu taşıyor. */
.telefon-gorsel img {
  display: block;
  width: 100%;
  height: auto;
}

.telefon-gorsel figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--metin-govde);
}

.telefon-gorsel figcaption strong {
  display: block;
  color: var(--metin-koyu);
  font-weight: 700;
  margin-bottom: 2px;
}

.bolum-koyu .telefon-gorsel figcaption {
  color: var(--koyu-metin);
}

.bolum-koyu .telefon-gorsel figcaption strong {
  color: #fff;
}

/* Tek başına duran telefon görseli — .telefonlar ızgarasında yalnız kalırsa
   tüm genişliğe yayılıp devasa görünüyordu. */
.telefon-tekli {
  max-width: 250px;
  margin: 30px auto 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   TELEFON ÇERÇEVESİ

   Ekran görüntüsünü çıplak dikdörtgen olarak koymak ucuz duruyordu. Çerçeve
   ürünün telefonda yaşadığını bir bakışta anlatıyor.

   ⚠️ ÇENTİK / ADACIK ÇİZİLMEDİ. Ekran görüntüleri uygulamanın kendi tepesinden
   başlıyor (durum çubuğu yok); üstlerine adacık konsaydı uygulamanın başlığını
   örterdi. Gerçekçilik uğruna içeriği kapatmak kötü bir takas.
   ════════════════════════════════════════════════════════════════════════════ */
.cihaz {
  position: relative;
  width: 100%;
  max-width: 292px;
  margin: 0 auto;
  padding: 11px;
  border-radius: 46px;

  /* Metal gövde: tek düz renk yerine kenardan kenara açılan bir eğim.
     Sol üst köşede parlama, sağ altta gölge — gerçek bir gövdenin ışığı
     böyle tutuyor. */
  background: linear-gradient(148deg, #5c6a83 0%, #2a3448 34%, #131a27 68%, #0a0f18 100%);

  /* ⚠️ İKİ AYRI İÇ HALKA — çerçeveyi gerçekçi yapan şey bu.
     1) Dıştaki açık halka: gövdenin işlenmiş metal kenarı.
     2) İçteki koyu halka: ekranın etrafındaki siyah çerçeve.
     Tek halkayla çizildiğinde telefon "yuvarlatılmış dikdörtgen" gibi
     duruyordu; asıl fark burada. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 5px rgba(0, 0, 0, 0.42),
    0 3px 8px rgba(0, 0, 0, 0.34),
    0 32px 64px -22px rgba(15, 23, 42, 0.62);
}

/* Yan tuşlar — gövdenin dışına 2px taşan ince çubuklar */
.cihaz::before,
.cihaz::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #55617a, #2b3447);
  pointer-events: none;
}

.cihaz::before {
  left: -2px;
  top: 128px;
  height: 52px;
}

.cihaz::after {
  right: -2px;
  top: 112px;
  height: 78px;
}

.cihaz-ekran {
  position: relative;
  overflow: hidden;
  border-radius: 35px;
  background: var(--kart-zemin);
  line-height: 0;
}

/* ⚠️ Sabit en-boy oranı YOK ve object-fit KULLANILMIYOR.
   Ekran görüntüleri 390x880, videolar 390x844. Tek bir oran dayatılsaydı
   object-fit: cover ikisinden birini alttan kırpardı — kırpılan yer de tam
   olarak alt sekme çubuğu olurdu. Yükseklik içeriğe bırakıldı. */
.cihaz-ekran img,
.cihaz-ekran video {
  display: block;
  width: 100%;
  height: auto;
}

.cihaz-alt {
  margin-top: 16px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--metin-ikincil);
}

.bolum-koyu .cihaz-alt,
.giris .cihaz-alt {
  color: var(--koyu-metin);
}

/* ── VİDEO BÖLÜMÜ ─────────────────────────────────────────────────────────────
   Solda panel (tarayıcı çerçevesi), sağda telefon. Panelin videosu poster ile
   geliyor ve preload="none" — ziyaretçi oynatmadıkça indirilmiyor. */
.video-ikili {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.75fr);
  gap: 40px;
  align-items: center;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .video-ikili {
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center;
  }
}

.tarayici video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--marka-gece);
}

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

   ⚠️ GİZLEME YALNIZCA BETİK ÇALIŞIYORSA UYGULANIR.
   `belirir` ögeleri başlangıçta saydamsız. Bu kuralı koşulsuz yazarsak ve betik
   herhangi bir sebeple çalışmazsa (hata, eski tarayıcı, engelleyici) sayfanın
   yarısı KALICI OLARAK GÖRÜNMEZ olur. Bu yüzden kural `html.js` altında; o
   sınıfı da kabuk.html'deki satır içi betik ekliyor. Betik yoksa sınıf yok,
   sınıf yoksa gizleme yok — sayfa düz ama eksiksiz görünür.
   ════════════════════════════════════════════════════════════════════════════ */
.js .belirir {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.75, 0.2, 1),
    transform 0.65s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.js .belirir.belirdi {
  opacity: 1;
  transform: none;
}

/* Giriş bölümündeki bildirim kartı yerine otursun */
@keyframes bildirimGelsin {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .giris .bildirim {
  animation: bildirimGelsin 0.75s 0.5s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Kart ve çerçeve üzerine gelince hafif kalksın */
.kart,
.an,
.vaka,
.pano,
.tarayici,
.telefon-gorsel .cihaz {
  transition:
    transform 0.28s cubic-bezier(0.22, 0.75, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.22, 0.75, 0.2, 1),
    border-color 0.28s ease;
}

.kart:hover,
.an:hover,
.vaka:hover {
  transform: translateY(-3px);
  border-color: var(--marka-kenarlik);
  box-shadow: var(--golge-orta);
}

.tarayici:hover,
.telefon-gorsel:hover .cihaz {
  transform: translateY(-4px);
  box-shadow: var(--golge-guclu);
}

/* Düğmeler üzerine gelince biraz yükselsin */
.dugme-birincil:hover {
  transform: translateY(-1px);
}

/* ⚠️ HAREKET AZALTMA — kullanıcı tercihine saygı.
   Yukarıdaki genel @media (prefers-reduced-motion) bloğu süreleri sıfırlıyor
   ama `belirir` ögeleri opacity:0 ile başlıyor; sınıf eklenene kadar görünmez
   kalırlar. Burada başlangıç durumunu da iptal ediyoruz: hareket istemeyen
   ziyaretçi içeriği anında ve tam görür. */
@media (prefers-reduced-motion: reduce) {
  .js .belirir,
  .js .belirir.belirdi {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .giris .bildirim {
    animation: none;
  }

  .kart:hover,
  .an:hover,
  .vaka:hover,
  .tarayici:hover,
  .telefon-gorsel:hover .cihaz,
  .dugme-birincil:hover {
    transform: none;
  }
}

/* ── KOYU BÖLÜMDE OKUNABİLİRLİK ───────────────────────────────────────────────
   ⚠️ Ölçülerek bulundu: aşağıdaki ögelerin hiçbirinin koyu zemin karşılığı
   tanımlı değildi ve --metin-govde (#475569) ile #0f172a üzerinde 2.36:1
   kalıyorlardı — AA eşiği 4.5. Yeni bir koyu bölüm eklerken bu listeye bakın;
   açık zemin için yazılmış her metin kuralının koyu karşılığı olmalı. */
.bolum-koyu .bolum-basi p,
.bolum-koyu .tikli li,
.bolum-koyu .not,
.bolum-koyu video {
  color: var(--koyu-metin);
}

.bolum-koyu .tikli li strong,
.bolum-koyu .not strong {
  color: #fff;
}

.bolum-koyu .tikli li::before {
  background: rgba(96, 165, 250, 0.18);
  color: var(--koyu-vurgu);
}

.bolum-koyu .not {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ⚠️ Cihaz ve dizüstü çerçevesinin İÇİ BEYAZ — koyu bölümün ortasında bile.
   Video oynatılamadığında görünen yedek metin bu yüzden yukarıdaki
   ".bolum-koyu video" kuralını değil, koyu bir metin rengini almalı.
   (Ölçüldü: açık renk metin bu zeminde 1.48:1 ile okunmuyordu.) */
.cihaz-ekran video,
.dizustu-ekran video {
  color: var(--metin-govde);
}

/* ── MAĞAZA DÜĞMELERİ ─────────────────────────────────────────────────────────
   App Store adresi uygulamanın kendi giriş ekranından alındı
   (Login.razor) — iki yerde farklı bağlantı olmasın.
   Android henüz yayında değil; o kart bağlantı DEĞİL, durum rozeti. */




/* Yakında olan mağaza: tıklanabilir değil, beklenti yaratmasın */


/* Altbilgideki demo veri uyarısı — küçük ama okunur kalmalı */
.alt-not {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--koyu-metin-2);
}

/* ── ALTBİLGİ KÜNYE BLOĞU ─────────────────────────────────────────────────────
   Üst menüde "İletişim" maddesi bilerek yok; adresin, telefonun ve çalışma
   saatinin görünür olduğu TEK yer burası. Eksik bırakılamaz. */
.alt-kunye .marka {
  margin-bottom: 14px;
}

.alt-firma {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--koyu-metin);
}

.alt-iletisim {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--koyu-metin-2);
}

.alt-iletisim a {
  color: var(--koyu-metin);
  font-weight: 600;
}

.alt-iletisim a:hover {
  color: #fff;
}

.alt-saat {
  margin: 0;
  font-size: 0.78rem;
  color: var(--koyu-metin-2);
}

/* ════════════════════════════════════════════════════════════════════════════
   DİZÜSTÜ ÇERÇEVESİ

   Panel ekranları için tarayıcı çubuğu yerine gerçek bir cihaz. Sebep: okul
   yöneticisi paneli bir bilgisayarda kullanacak; çerçeve bunu bir bakışta
   söylüyor ve görüntüyü "ekran görüntüsü" olmaktan çıkarıp "ürün" yapıyor.

   ⚠️ TABAN, KAPAKTAN GENİŞ — ama ikisi de kapsayıcının İÇİNDE kalıyor.
   Gerçek bir dizüstünde taban kapaktan geniştir. Bunu "taban %112 genişlik +
   negatif kenar boşluğu" ile yapmak kolay ama tehlikeli: ızgara hücresi sayfa
   kenarındaysa yatay kaydırma doğurur. Onun yerine KAPAK daraltıldı (%93);
   dışarı taşan hiçbir şey yok.
   ════════════════════════════════════════════════════════════════════════════ */
.dizustu {
  margin: 0;
  width: 100%;
}

.dizustu-kapak {
  width: 93%;
  margin: 0 auto;
  padding: 13px 13px 15px;
  border-radius: 14px 14px 5px 5px;
  background: linear-gradient(160deg, #5c6a83 0%, #2a3448 38%, #121926 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 0 4px rgba(0, 0, 0, 0.38);
}

/* Kapağın üst kenarındaki kamera noktası — ekranın üstünde kalan çerçevede,
   görüntünün üzerine binmiyor. */
.dizustu-kapak::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  margin: -6px auto 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.dizustu-ekran {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--kart-zemin);
  line-height: 0;
}

.dizustu-ekran img,
.dizustu-ekran video {
  display: block;
  width: 100%;
  height: auto;
}

/* Taban: menteşeden öne doğru incelen bir bant + ortada parmak oyuğu */
.dizustu-taban {
  position: relative;
  width: 100%;
  height: 15px;
  border-radius: 3px 3px 13px 13px;
  background: linear-gradient(180deg, #46536a 0%, #262f42 45%, #131a27 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 26px -12px rgba(15, 23, 42, 0.6);
}

.dizustu-taban::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 5px;
  border-radius: 0 0 7px 7px;
  background: rgba(0, 0, 0, 0.38);
}

.dizustu figcaption {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--metin-ikincil);
}

.dizustu figcaption strong {
  color: var(--metin-koyu);
  font-weight: 700;
}

.bolum-koyu .dizustu figcaption,
.giris .dizustu figcaption {
  color: var(--koyu-metin);
}

.bolum-koyu .dizustu figcaption strong,
.giris .dizustu figcaption strong {
  color: #fff;
}

/* Üzerine gelince hafif kalksın — .tarayici ile aynı davranış */
.dizustu-kapak,
.dizustu-taban {
  transition: transform 0.28s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.dizustu:hover .dizustu-kapak,
.dizustu:hover .dizustu-taban {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .dizustu:hover .dizustu-kapak,
  .dizustu:hover .dizustu-taban {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   UYGULAMA İNDİRME KARTLARI

   Uygulamanın giriş ekranındaki kartların site karşılığı — aynı QR, aynı
   adres. Telefondan bakan karta dokunur, bilgisayardan bakan QR'ı taratır;
   ikisi de aynı yere gider.

   ⚠️ Yalnızca KOYU bölümde kullanılmak üzere yazıldı (.bolum-koyu / .giris).
   Açık zemine konursa beyaz yazılar okunmaz. Açık zemin gerekirse ayrı bir
   değişke yazın, bunu oraya taşımayın.
   ════════════════════════════════════════════════════════════════════════════ */
.indir-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 20px;
  margin-top: 34px;
}

.indir-kart {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--kose);
  background: rgba(255, 255, 255, 0.06);
  transition: var(--gecis);
}

a.indir-kart:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-3px);
  text-decoration: none;
}

/* QR beyaz bir kâğıt gibi dursun — koyu zeminde okutulabilmesi için zemininin
   beyaz olması ŞART, tarayıcılar koyu zeminli kodu güvenilir okumuyor. */
.indir-qr {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.indir-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Yayında olmayan mağazanın QR'ı yok; yerine mağaza simgesi duruyor */
.indir-qr-yok {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.indir-qr-yok svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

.indir-bilgi {
  min-width: 0;
}

.indir-logo {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  color: #fff;
}

.indir-ad {
  display: block;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.indir-alt {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--koyu-metin-2);
}

.indir-rozet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--kose-hap);
  background: var(--marka-mavi-koyu);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.indir-rozet svg {
  width: 13px;
  height: 13px;
}

.indir-yakinda {
  opacity: 0.72;
}

.indir-yakinda .indir-rozet {
  background: rgba(255, 255, 255, 0.16);
}

.indir-not {
  margin: 22px 0 0;
  font-size: 0.88rem;
  color: var(--koyu-metin);
}

@media (max-width: 460px) {
  .indir-kart {
    gap: 14px;
    padding: 16px;
  }

  .indir-qr {
    width: 86px;
    height: 86px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   KİLİT EKRANI TELEFONU  (giriş bölümü)

   ⚠️ NEDEN EKRAN GÖRÜNTÜSÜ DEĞİL: ürünün asıl anı, velinin telefonu cebinden
   çıkarıp kilit ekranında bildirimi gördüğü an. O anın ekran görüntüsü
   alınamaz — kilit ekranı kaydedilemiyor. Bu yüzden çiziliyor.

   ⚠️ ÖNCEKİ HÂLİ YETERSİZDİ: yalnızca bir bildirim kartı ve altında koyu bir
   dikdörtgen vardı; telefona benzemiyordu ve dizüstünün ekranını örtüyordu.
   Şimdi tam bir cihaz gövdesi, saat ve tarihle birlikte kilit ekranı var;
   yerleşimi de dizüstünün İÇERİĞİNİ değil KÖŞESİNİ örtecek şekilde.
   ════════════════════════════════════════════════════════════════════════════ */
.cihaz-kilit .cihaz-ekran {
  aspect-ratio: 390 / 844;
  display: flex;
  flex-direction: column;
  padding: 26px 11px 14px;

  background:
    radial-gradient(120% 80% at 20% 0%, rgba(41, 128, 185, 0.35), transparent 60%),
    linear-gradient(170deg, #1c2b45 0%, #0c1524 58%, #070c15 100%);

  /* ⚠️ SIRA ÖNEMLİ — bu satır kısayolun ALTINDA durmalı.
     Kısayol "background:" yazımı background-color'ı şeffafa çekiyor; üstüne
     yazılırsa etkisiz kalır (ölçülerek görüldü). Gradyan bir gün kaldırılırsa
     beyaz saat ve tarih açık zeminde kaybolmasın diye altta duruyor. */
  background-color: #0a1120;
  line-height: 1.35;
}

.kilit-saat {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.kilit-tarih {
  margin: 5px 0 16px;
  font-size: 0.58rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.74);
}

/* Kilit ekranındaki bildirim kartları — gerçeğinde olduğu gibi buzlu cam */
.cihaz-kilit .bildirim {
  margin: 0 0 7px;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.cihaz-kilit .bildirim-ust,
.cihaz-kilit .bildirim-alt {
  font-size: 0.56rem;
}

.cihaz-kilit .bildirim-baslik {
  margin: 5px 0 2px;
  font-size: 0.71rem;
  line-height: 1.3;
}

.cihaz-kilit .bildirim-im {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  font-size: 0.45rem;
}

/* Alttaki ikinci bildirim biraz geride dursun — yığılmış görünsün */
.cihaz-kilit .bildirim-arka {
  transform: scale(0.955);
  opacity: 0.72;
}

/* ── GİRİŞ BÖLÜMÜNDEKİ YERLEŞİM ──────────────────────────────────────────────
   Telefon dizüstünün SOL ALT KÖŞESİNE biniyor. Değerler ölçülerek seçildi:
   ekranın orta bölgesine (istatistik kartlarının olduğu yere) girmiyor. */
.telefon-yuzen {
  position: absolute;
  left: -52px;
  bottom: -26px;
  width: 150px;
  max-width: 42%;
  z-index: 2;
}

/* Küçük telefonda kilit ekranı yazıları da küçülmeli */
.telefon-yuzen .kilit-saat { font-size: 1.62rem; }
.telefon-yuzen .kilit-tarih { font-size: 0.5rem; margin-bottom: 12px; }
.telefon-yuzen .cihaz-ekran { padding: 20px 8px 11px; }
.telefon-yuzen .bildirim { padding: 7px 8px; border-radius: 12px; margin-bottom: 6px; }
.telefon-yuzen .bildirim-baslik { font-size: 0.6rem; margin: 4px 0 1px; }
.telefon-yuzen .bildirim-ust,
.telefon-yuzen .bildirim-alt { font-size: 0.47rem; }
.telefon-yuzen .bildirim-im { width: 10px; height: 10px; border-radius: 3px; font-size: 0.38rem; }

/* Uygulama adı iki satıra kırılıyordu — dar kartta tek satır kalmalı */
.telefon-yuzen .bildirim-uyg { white-space: nowrap; }
.telefon-yuzen .bildirim-ust { gap: 5px; }

/* ════════════════════════════════════════════════════════════════════════════
   EĞİTİM VİDEOLARI  (/egitim-videolari/)

   Kart içerikleri elle yazılmıyor; insa.mjs sayfadaki iki etiketi kılavuzun
   video verisinden dolduruyor (bkz. insa.mjs → videoEtiketleriniDoldur).
   Kapak görselleri videonun kendisinden çıkarılıyor (arac/video-kur.mjs).

   ⚠️ OYNATICI TIKLANANA KADAR YÜKLENMİYOR. Kapak bir <a>; betik çalışmazsa
   video YouTube'da açılır, kırık bir kutu görünmez.
   ════════════════════════════════════════════════════════════════════════════ */
.oynatici {
  border-radius: var(--kose);
  overflow: hidden;
  box-shadow: var(--golge-guclu);
  background: var(--marka-gece);
}

.oynatici-kapak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  text-decoration: none;
}

.oynatici-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alt kenara koyu geçiş: yazılar hangi kare gelirse gelsin okunsun */
.oynatici-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 13, 22, 0.9) 0%, rgba(8, 13, 22, 0.34) 32%, rgba(8, 13, 22, 0.04) 60%);
}

.oynatici-dugme {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--marka-mavi-koyu);
  box-shadow: 0 14px 40px rgba(8, 13, 22, 0.5);
  transition: var(--gecis);
}

.oynatici-dugme svg {
  width: 2.3rem;
  height: 2.3rem;
  margin-left: 0.22rem;
}

.oynatici-yazi {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.oynatici-yazi strong {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.oynatici-yazi span {
  color: var(--koyu-metin);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.oynatici-kapak:hover .oynatici-dugme,
.oynatici-kapak:focus-visible .oynatici-dugme {
  transform: scale(1.06);
  background: #fff;
}

/* Tıklandıktan sonra kapağın yerine iframe giriyor */
.oynatici iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
}

/* ── Bölüm kartları ──────────────────────────────────────────────────────
   ⚠️ Kart bir <a> DEĞİL: içinde iki ayrı hedef var (videonun o bölümü ve yazılı
   kılavuz sayfası). İç içe bağlantı geçersiz HTML, üstelik klavyeyle biri
   ötekine erişilemez hâle gelir. */
.vb-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
}

.vb-kart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kenarlik);
  border-radius: var(--kose-orta);
  overflow: hidden;
  background: var(--kart-zemin);
  transition: var(--gecis);
}

.vb-video {
  position: relative;
  display: block;
  text-decoration: none;
}

.vb-video img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--marka-gece);
}

/* Yazılar görselin üstünde duruyor; okunabilirlik için altına koyu geçiş */
.vb-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 13, 22, 0.86) 0%, rgba(8, 13, 22, 0.3) 38%, rgba(8, 13, 22, 0) 62%);
  pointer-events: none;
}

.vb-oynat {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  margin: 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--marka-mavi-koyu);
  box-shadow: 0 8px 22px rgba(8, 13, 22, 0.45);
  transition: var(--gecis);
  z-index: 1;
}

.vb-oynat svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.12rem;
}

.vb-ust {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.vb-no,
.vb-sure {
  padding: 0.16rem 0.44rem;
  border-radius: var(--kose-mini);
  background: rgba(8, 13, 22, 0.72);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vb-video strong {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.75rem;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  z-index: 1;
}

.vb-kilavuz {
  display: block;
  padding: 0.62rem 0.9rem;
  border-top: 1px solid var(--kenarlik-acik);
  color: var(--marka-lacivert);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.vb-kilavuz::after {
  content: ' →';
}


.vb-kilavuz:hover,
.vb-kilavuz:focus-visible {
  background: var(--marka-zemin);
}

.vb-kart:hover,
.vb-kart:focus-within {
  border-color: var(--marka-mavi);
  box-shadow: var(--golge-orta);
  transform: translateY(-2px);
}

.vb-kart:hover .vb-oynat {
  transform: scale(1.08);
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .vb-kart:hover,
  .vb-kart:focus-within,
  .vb-kart:hover .vb-oynat,
  .oynatici-kapak:hover .oynatici-dugme {
    transform: none;
  }
}

@media (max-width: 620px) {
  .oynatici-dugme {
    width: 3.9rem;
    height: 3.9rem;
  }
  .oynatici-dugme svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  .oynatici-yazi {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
  .oynatici-yazi strong {
    font-size: 1.08rem;
  }
}