/* =========================================================
   base.css — Değişkenler, reset, tipografi
   OTYS · OSTİM Teknik Üniversitesi
   ---------------------------------------------------------
   Tek sayfalık sunum. Kaydırma yok; sahne ekrana ölçeklenir.
   ========================================================= */

:root{
  /* --- Kurumsal renkler --- */
  --lacivert:      #212348;
  --lacivert-acik: #38264d;
  --bordo:         #921831;
  --bordo-koyu:    #6f1225;
  --yesil:         #0b5e34;
  --kurumsal-gri:  #4a4f58;   /* "d" rozeti — nötr kurumsal gri */

  /* MODÜL RENGİ
     mevcut sistemler → bordo             (EBYS, LIKOM)
     yeni modüller    → kurumsal koyu yeşil (AYTS, SATS, ARTS …) */
  --mevcut: #921831;
  --yeni:   #0b5e34;

  /* --- Protokol vurgusu --- */
  --altin:      #b9974e;
  --altin-acik: #e6cd92;

  /* --- Nötrler --- */
  --kagit:    #f3f5f8;
  --panel:    #e2e6eb;
  --cizgi:    #6b7076;
  --koyu-gri: #3f4247;
  --murekkep: #111111;

  /* --- Tipografi --- */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* --- Ölçüler --- */
  --ustbar-yukseklik:   44px;
  --altbilgi-yukseklik: 30px;
  --kenar-bosluk: clamp(14px, 2.4vw, 40px);
  --kart-radius: 14px;
  --tuval-pay:   18px;   /* slaytın sol üst köşeye bıraktığı boşluk */

  /* Tuval (sahne) tasarım ölçüsü — JS bu ölçüyü ekrana sığdırır.
     Tüm düğüm koordinatları bu 1600 × 800'lük dünyada tanımlıdır. */
  --tuval-en:  2080px;
  --tuval-boy: 1070px;

  /* --- Gölgeler --- */
  --golge-kart:  0 14px 34px rgba(33,35,72,.16), inset 0 1px 0 rgba(255,255,255,.68);
  --golge-hover: 0 18px 38px rgba(33,35,72,.24), inset 0 1px 0 rgba(255,255,255,.72);
  --golge-bar:   0 8px 22px rgba(0,0,0,.14);
  --golge-sayfa: 0 34px 84px rgba(16,17,38,.42);

  /* --- Geçişler --- */
  --gecis: .16s ease;
  --gelis: .42s cubic-bezier(.22,.9,.28,1);

  /* =======================================================
     KATMAN SIRASI (z-index) — TEK KAYNAK
     -------------------------------------------------------
     Yeni bir katman eklerken buraya bir değişken yaz ve
     CSS'te sayı değil DEĞİŞKEN kullan. Böylece hangi şeyin
     hangi şeyin üstünde olduğu tek yerden görülür.

        0  zemin      kampüs fotoğrafı
        1  vinyet     sahnenin kenar gölgesi
        2  tuval      slayt yüzeyi (kendi katman bağlamını kurar)
             2  hat    · tuval içinde: oklar
             3  dugum  · tuval içinde: kutular (okların üstünde)
             4  rozet  · kutu içinde: "d" rozeti
        5  bar        üst bar ve künye şeridi
        6  gezinti    fare ile ileri/geri düğmeleri
       10  detay      "d" rozetinin açtığı pencere
       20  yardim     yardım katmanı (her şeyin üstünde)
     ======================================================= */
  --kat-zemin:    0;
  --kat-vinyet:   1;
  --kat-tuval:    2;
  --kat-hat:      2;
  --kat-dugum:    3;
  --kat-rozet:    4;
  --kat-bar:      5;
  --kat-gezinti:  6;
  --kat-detay:   10;
  --kat-yardim:  20;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--sans);
  color: var(--murekkep);
  background: var(--kagit);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* Tek sayfa: hiçbir koşulda kaydırma çubuğu çıkmaz. */
  overflow: hidden;
}

img{ display: block; max-width: 100%; }

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

kbd{
  font-family: var(--sans);
  font-size: 9px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.34);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 5px;
  background: rgba(255,255,255,.12);
  color: inherit;
}

:focus-visible{
  outline: 2px solid var(--altin-acik);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}