/* ════════════════════════════════════════════════════════════════════════════
   PERPLUSACCESS — TANITIM SİTESİ STİLİ (Okul sitesinin stilinden uyarlandı)

   ⚠️ RENKLER UYDURULMADI. Hepsi uygulamanın kendi tasarım değerlerinden alındı:
   PerplusAccess.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 "Access" + 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.
   Sitenin dar ekran ziyaretçisi az değil (mobil uygulamadan /gizlilik/ adresine
   bağlantı verilecek), yani dar ekran istisna değil ana durum (Okul ölçümü).
   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 (firma
   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. (Okul sitesinden geldi; Access ilk sürümünde
   ekran görüntüsü yok, gerçek panel görüntüleri gelince bu bölüm kullanılacak.) */
.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 olmalı: yerelde çalışan uygulamadan, demo verisiyle
   dolu bir firmadan alınır; üretimden ya da bir müşteriden alınmaz.
   Üretim yöntemi site/OKU-BENI.md içinde yazılır.

   `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: firmanın ekranı ve kişinin 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;
}


/* ════════════════════════════════════════════════════════════════════════════
   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);
}

/* 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);
}


/* ── CANLI GEÇİŞ PANOSU: RET SATIRI VE QR ROZETİ ─────────────────────────────
   Ret satırının kırmızısı app.css'teki ret rengiyle aynı tonda; tek kullanımlık
   vurgu (bkz. .pano-durum). Renk tek başına anlam taşımasın diye sebep metni
   de satırda yazılı. */
.pano-ret .pano-ad,
.pano-ret .pano-saat {
  color: #b91c1c;
}

.pano-ret .pano-ad em {
  color: #b91c1c;
}

.rozet-qr {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--kose-hap);
  background: var(--marka-lacivert);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}