/* =========================================================
   layout.css — Üst bar, sahne/tuval, alt bilgi
   ========================================================= */

/* ======================= ÜST BAR ======================= */
.ustbar{
  position: relative;
  z-index: var(--kat-bar);
  flex: none;
  height: var(--ustbar-yukseklik);
  display: flex;
  align-items: center;
  padding: 0 var(--kenar-bosluk);
  background: linear-gradient(90deg,
              var(--lacivert) 0%,
              var(--lacivert-acik) 46%,
              var(--bordo) 100%);
  border-bottom: 3px solid var(--bordo);
  box-shadow: var(--golge-bar);
}

/* Üst barın altında saç teli inceliğinde altın hat */
.ustbar::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(185,151,78,0) 0%,
              var(--altin) 18%,
              var(--altin-acik) 50%,
              var(--altin) 82%,
              rgba(185,151,78,0) 100%);
}

.ustbar__logo{ height: 26px; width: auto; }

/* Başlık: logonun genişliğinden etkilenmesin diye
   akıştan çıkarılıp ekranın tam ortasına oturtulur. */
.ustbar__baslik{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ustbar__ayrac{
  width: 1px;
  height: 24px;
  margin: 0 16px;
  background: rgba(255,255,255,.28);
}

.ustbar__kisa,
.ustbar__uzun{
  background: linear-gradient(90deg, #e9edff 0%, #ffffff 42%, #ffd8e1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Degrade yazıda text-shadow işlemez; gölge öğeye uygulanır. */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.38));
}

.ustbar__kisa{
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .12em;
}

.ustbar__uzun{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Üst barın sağ ucu: kazanımlar bağlantısı + adım sayacı */
.ustbar__sag{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* PDF bağlantısı — yeni sekmede açılır */
.ustbar__kazanim{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(230,205,146,.55);
  transition: background var(--gecis), border-color var(--gecis),
              color var(--gecis), transform var(--gecis);
}
.ustbar__kazanim:hover,
.ustbar__kazanim:focus-visible{
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  border-color: var(--altin-acik);
  color: var(--bordo-koyu);
  transform: translateY(-1px);
}
/* Henüz bir yere bağlı olmayan buton: görünüm aynı, tıklayınca
   hiçbir şey olmaz — sayfa yok hatasına düşmesin diye <a> değil. */
.ustbar__kazanim--pasif{ cursor: default; }

.ustbar__kazanim-ok{
  font-size: 12px;
  line-height: 1;
  opacity: .8;
}

/* Sunum kipinde sağda duran adım sayacı (tasarımda boştur) */
.ustbar__adim{
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.82);
}

/* ======================== SAHNE ======================== */
.sahne{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Kampüs fotoğrafı + beyaz perde */
.sahne__zemin{
  position: absolute;
  inset: 0;
  z-index: var(--kat-zemin);
  background-color: #e8ebf0;
  background-image: url("../img/kampus.jpg");
  background-size: cover;
  background-position: center 62%;
  /* Daha soluk ve düz bir fotoğraf: bina filigran gibi kalsın,
     beyaz kutularla yarışmasın. */
  filter: grayscale(.5) contrast(.75) brightness(1.14);
  transform: scale(1.04);
  pointer-events: none;
}
.sahne__zemin::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 1) Dikey beyaz perde — orta bantta da yeterli örtü var,
          şemanın en yoğun olduğu yerde bina öne çıkmıyor. */
    linear-gradient(to bottom,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.60) 24%,
      rgba(255,255,255,.52) 55%,
      rgba(255,255,255,.62) 80%,
      rgba(255,255,255,.78) 100%),
    /* 2) Yanlardan içeri doğru açılan perde */
    linear-gradient(90deg,
      rgba(255,255,255,.50) 0%,
      rgba(255,255,255,.30) 24%,
      rgba(255,255,255,.30) 76%,
      rgba(255,255,255,.50) 100%),
    /* 3) Aşağı indikçe hafifçe koyulaşan soğuk ton: sayfaya derinlik
          verir, beyaz kutular zeminden ayrışır. */
    linear-gradient(to bottom,
      rgba(33,35,72,.03) 0%,
      rgba(33,35,72,.09) 100%);
}

/* Kenarları hafifçe koyulaştıran vinyet */
.sahne::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--kat-vinyet);
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 44%,
              rgba(255,255,255,0) 40%,
              rgba(33,35,72,.07) 74%,
              rgba(33,35,72,.17) 100%);
}

/* --------- TUVAL ---------
   Sabit tasarım alanı (ölçüsü base.css'te). JS `--olcek` yazar.

   DİKEY : üstten yaslı — slayt her zaman aynı yerden başlar.
   YATAY : ortalanır. Tuval bütün olarak sığdırıldığı için, ekranın
           oranı tuvalinkinden yayvansa yatayda boşluk artar. Tam
           ekranda bu boşluk zaten 36px (18/18); pencerede tarayıcı
           çubukları yüksekliği yediği için 400px'i aşabiliyor.
           Ortalayınca o fazlalık sağa yığılmak yerine iki yana
           eşit dağılır — tam ekran görünümü hiç değişmez.        */
.tuval{
  position: absolute;
  z-index: var(--kat-tuval);
  left: 50%;
  top:  var(--tuval-pay);
  width:  var(--tuval-en);
  height: var(--tuval-boy);
  transform: translateX(-50%) scale(var(--olcek, 1));
  transform-origin: top center;
}

.tuval__hatlar{
  position: absolute;
  inset: 0;
  z-index: var(--kat-hat);
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tuval__dugumler{
  position: absolute;
  inset: 0;
  z-index: var(--kat-dugum);
}

/* ---------- Fare ile gezinme düğmeleri ---------- */
.gezinti{
  position: absolute;
  z-index: var(--kat-gezinti);
  bottom: 14px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--gecis);
}
.gezinti--sol { left: 14px;  }
.gezinti--sag { right: 14px; }
.sahne:hover .gezinti,
.gezinti:focus-within{ opacity: 1; }

.gezinti__dugme{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  background: rgba(33,35,72,.62);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(3px);
  transition: background var(--gecis), transform var(--gecis);
}
.gezinti__dugme:hover{ background: var(--bordo); transform: translateY(-1px); }
.gezinti__dugme[disabled]{ opacity: .3; pointer-events: none; }

/* ====================== ALT BİLGİ ======================
   Künye şeridi ÜST BAR ile aynı: lacivertten bordoya geçiş,
   üstünde saç teli inceliğinde altın hat.
   Solda tuş bilgileri, ortada imza.                        */
.altbilgi{
  position: relative;
  z-index: var(--kat-bar);
  flex: none;
  height: var(--altbilgi-yukseklik);
  /* Üç sütun: yanlar BİREBİR eşit (minmax(0,1fr)), orta içerik kadar.
     Böylece künye, yanlardaki yazılar ne olursa olsun tam ortada. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 var(--kenar-bosluk);
  background: linear-gradient(90deg,
              var(--lacivert) 0%,
              var(--lacivert-acik) 46%,
              var(--bordo) 100%);
  border-top: 3px solid var(--bordo);
}

/* Künye şeridinin üstünde altın hat */
.altbilgi::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(185,151,78,0) 0%,
              var(--altin) 18%,
              var(--altin-acik) 50%,
              var(--altin) 82%,
              rgba(185,151,78,0) 100%);
}

.altbilgi__bilgi{
  justify-self: start;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
}

.altbilgi__kunye{
  justify-self: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

/* Sağ taraf: künyeyi tam ortada tutar, ucunda çerez bağlantısı */
.altbilgi__sag{
  justify-self: end;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.altbilgi__cerez{
  padding: 0;
  font-size: 9.5px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.28);
  transition: color var(--gecis), border-color var(--gecis);
}
.altbilgi__cerez:hover,
.altbilgi__cerez:focus-visible{
  color: #fff;
  border-bottom-color: var(--altin-acik);
}

/* ================== DUYARLI / YAZDIRMA ================== */
@media (max-width: 760px){
  .ustbar__uzun{ display: none; }
  .ustbar__kazanim{ padding: 4px 10px; letter-spacing: .08em; }
  .altbilgi__bilgi{ display: none; }
  .altbilgi__sag{ display: none; }
  .altbilgi__kunye{ margin: 0 auto; font-size: 10px; }
}

@media print{
  .sahne__zemin,
  .sahne::before,
  .gezinti,
  .altbilgi__bilgi{ display: none; }
  body{ background: #fff; }
}