/* Üst bar: kayan gradyan göstergesi ve tema anahtarı.

   Bu dosya elle yazıldı ve bilesenler.css'ten SONRA yüklenir; oradaki
   karşılıklarını ezer. bilesenler.css Astro'dan otomatik çıkarıldığı için
   ona elle bir şey eklenmemeli — yeniden çıkarınca silinir. */

/* ==========================================================================
   1) Gezinme — kayan gösterge
   ==========================================================================
   Gösterge, üzerine gelinen bağlantıya süzülen yarı saydam siyah bir kutudur.
   Zeminden renk almaz; altındaki üst bar hangi temada olursa olsun aynı
   şekilde koyulaşır, üstündeki yazı beyaz kalır.

   Yalnızca transform ile hareket eder — düzen hesabı tetiklenmez. */

.gezinme {
  position: relative;
  gap: 0.125rem;                 /* kutular bitişik olsun ki geçiş sürekli olsun */
  isolation: isolate;
  /* Başlığın tüm yüksekliğini kaplıyor.

     Düğme 35px, başlık 81px idi: düğmenin altında 23px'lik ölü bir bölge
     kalıyordu. Panel başlığın alt kenarından başladığı için düğmeden
     panele inerken oradan geçiliyordu. Şimdi düğmenin alt kenarı panelin
     üst kenarına değiyor.

     align-self:stretch tek başına yetmiyor: kabuğun kendi dikey iç payı
     (16px) dışarıda kalıyor ve orada yine ölü bir şerit oluyor. Negatif
     dış boşlukla o payı da içeri alıyoruz. İç pay geri verilmiyor —
     verilince bağlantılar yine iç kutuya sıkışıyor; yazı zaten
     bağlantının kendi dikey ortalamasıyla yerinde duruyor. */
  align-self: stretch;
  margin-block: calc(-1 * var(--ustbar-dikey-pay, 16px));
}

.gezinme__vurgu {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  height: 2.15rem;
  width: var(--vg-en, 0px);
  margin-top: calc(-2.15rem / 2);
  border-radius: var(--yuvarlak-dugme);
  /* %50 istenmişti; ölçünce açık temada beyaz yazı 4.46:1 çıkıyor ve AA
     eşiğinin (4.5:1) kıl payı altında kalıyordu. %55'te 5.31:1 oluyor,
     gözle farkı yok. Tam %50 isteniyorsa bu değeri 0.5 yapmak yeterli. */
  background: rgb(0 0 0 / 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--vg-x, 0px), 0, 0) scale(0.94);
  transition:
    transform var(--h-orta) var(--e-giris),
    width     var(--h-orta) var(--e-giris),
    opacity   var(--h-hizli) ease-out;
}

/* Gösterge yalnızca gidecek bir yer varken görünür */
.gezinme[data-vurgu-acik] .gezinme__vurgu {
  opacity: 1;
  transform: translate3d(var(--vg-x, 0px), 0, 0) scale(1);
}

/* ---- Panel açıkken: gösterge panelle tek parça --------------------
   Açılır panel geldiğinde üstündeki başlık, panelin devamı gibi
   görünüyor: köşeler kareleşiyor, renk panelin rengine dönüyor ve kutu
   başlığın tüm yüksekliğini kaplıyor. Böylece düğme ile panel arasında
   görsel bir kopukluk kalmıyor.

   Yükseklik ve üst kaçıklık js/mega.js'ten geliyor; başlık yüksekliği
   temaya ve ekran genişliğine göre değişiyor, sabit değer tutmuyor. */
@media (min-width: 901px) {
  .gezinme[data-panel-acik] .gezinme__vurgu {
    opacity: 1;
    top: var(--vg-ust, 0px);
    /* 1px fazla: başlığın alt çizgisi ile panelin üst çizgisi tam burada
       çakışıyor ve kutuyu panelden ayıran ince bir dikiş bırakıyordu. */
    height: calc(var(--vg-boy, 100%) + 1px);
    margin-top: 0;
    border-radius: 0;
    background: var(--zemin-kart);
    transform: translate3d(var(--vg-x, 0px), 0, 0) scale(1);
    /* Yalnız yatay kayma ve genişlik geçişe giriyor.

       Renk, köşe, yükseklik de geçişe sokulunca kutu her açılışta
       yuvarlak koyu hâlinden kareye "dönüşüyor" ve o eski gösterge bir
       an gözüküyordu. Bu dört özellik anında uygulanıyor: kutu daha ilk
       karede panelin parçası gibi geliyor, başlıktan başlığa geçerken
       de kayması sürüyor. */
    transition:
      transform var(--h-orta) var(--e-giris),
      width     var(--h-orta) var(--e-giris);
  }

  /* Panel artık beklemesiz açılıyor, ama açılma ile göstergenin belirmesi
     arasında yine tek karelik bir aralık kalabiliyor. Paneli olan bir
     başlığın üstündeyken panel gelene dek göstergeyi hiç çizmiyoruz;
     eski yuvarlak gösterge bir kare bile görünmesin. */
  .gezinme:not([data-panel-acik]):has([data-panel-ac]:hover) .gezinme__vurgu {
    opacity: 0;
    transition: none;
  }

  /* Kapanırken de panel stilinde kalıyor, yalnız sönüyor. Böylece
     yuvarlak koyu göstergeye dönüp bir kare öyle görünmüyor. */
  .gezinme[data-panel-acik][data-panel-kapaniyor] .gezinme__vurgu {
    opacity: 0;
    transition: opacity 220ms ease;
  }

  /* Zemin artık koyu değil; JS'in dayattığı beyaz yazı okunmaz olurdu. */
  .gezinme[data-panel-acik] .gezinme__ba--vurgulu,
  .gezinme[data-panel-acik] .gezinme__ba--vurgulu:hover {
    color: var(--metin);
  }

  /* Işık hüzmesi panelin zemininde parlıyor ve dikkat dağıtıyor. */
  .gezinme[data-panel-acik] .gezinme__ba::before { opacity: 0; }

  /* Başlığın içeriği perdenin üstünde kalıyor.

     Perde (ekranı karartan katman) başlığın içinde duruyor ve z-index'i
     40; başlığın kendi içeriği ise z-index'siz. Sonuç: perde nav'ın da
     üstüne biniyor, seçili düğmenin krem zemini %34 siyahla karışıp
     gri görünüyordu — paneldeki renkle tutmuyordu.

     50: perdenin (40) üstünde, panelin (60) altında. */
  .ustbar__ic {
    position: relative;
    z-index: 50;
  }
}

.gezinme__ba {
  position: relative;
  z-index: 1;
  /* Yükseklik başlıktan geliyor; yatay iç pay eskisi gibi. Görünen
     vurgu kutusu yine 2.15rem — yalnız isabet alanı büyük. */
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 0.95rem;
  border-radius: var(--yuvarlak-dugme);
  transition: color var(--h-hizli) var(--e-yumusak);
}

/* Alt çizgi göstergenin işini yapıyordu; kutu gelince gereksiz kaldı */
.gezinme__ba::after { content: none; }

/* Işık hüzmesi — "Teklif al" düğmesindekinin aynısı.
   Kutunun dışına taşmasın diye kırpılıyor; yazının arkasında kalsın diye
   kendi katmanına alınıyor (isolation + z-index:-1). Yalnız transform ve
   opacity değişiyor, ikisi de birleştirici katmanda işleniyor. */
.gezinme__ba {
  overflow: hidden;
  isolation: isolate;
}
.gezinme__ba::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  /* Bağlantı başlık boyunda; hüzme onun tamamını kaplarsa görünen vurgu
     kutusunun dışına taşıyor. Kutunun kendisi kadar. */
  top: calc(50% - 2.15rem / 2);
  height: 2.15rem;
  border-radius: var(--yuvarlak-dugme);
  z-index: -1;
  background: linear-gradient(115deg, transparent 25%,
    rgba(255, 214, 170, 0.55) 38%, rgba(168, 226, 255, 0.65) 50%,
    rgba(226, 176, 255, 0.55) 62%, transparent 75%);
  transform: translateX(-130%);
  opacity: 0;
  /* Geçiş yok: imleç ayrılınca hüzme geri sürünmesin, anında sıfırlansın. */
  transition: none;
  pointer-events: none;
}
.gezinme__ba:hover::before,
.gezinme__ba:focus-visible::before {
  transform: translateX(130%);
  opacity: 1;
  transition: transform 850ms var(--e-yumusak), opacity var(--h-orta) linear;
}

@media (prefers-reduced-motion: reduce) {
  .gezinme__ba::before { display: none; }
}

/* Göstergenin altında kalan bağlantı. Rengi JS veriyor, çünkü gösterge
   aktif sayfadan ayrılınca eski bağlantının beyaz kalmaması gerek.
   Zemin her iki temada da koyu olduğu için yazı hep beyaz. */
.gezinme__ba--vurgulu,
.gezinme__ba--vurgulu:hover {
  color: #FFFFFF;
}

.gezinme__ba:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
}
.gezinme__ba--vurgulu:focus-visible {
  outline-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .gezinme__vurgu { transition-duration: 1ms; }
}

/* ==========================================================================
   2) Tema anahtarı — masa lambası
   ==========================================================================
   Açık temada lamba sönük, koyu temada yanıyor. Işığı yakınca ortam
   kararıyor — gerçek hayattaki gibi. Durumu aria-pressed taşıyor
   (js/site.js yazıyor): true = koyu tema = lamba yanık. */

.lamba {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 46px;
  height: 44px;
  border-radius: var(--yuvarlak-dugme);
  transition: background var(--h-hizli) var(--e-yumusak);
}
.lamba:hover { background: var(--zemin-dolgu); }
.lamba:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
}

.lamba__cizim {
  width: 30px;
  height: 27px;
  overflow: visible;      /* parıltı kutunun dışına taşabilsin */
}

/* ---- gövde ----
   Çizgi kalınlığı ve renk temadan geliyor; lamba sönükken de yanıkken de
   aynı gövde duruyor, değişen yalnız ışık. */
.lamba__kol,
.lamba__baslik {
  fill: transparent;
  stroke: var(--metin);
  stroke-width: 1.7;
  transition: stroke var(--h-orta) var(--e-yumusak);
}

/* Kaide dolu: içi boş elips halka gibi duruyordu, ağırlıklı bir tabla
   değil. Gerçek lambalarda kaide dökme demir bir disk. */
.lamba__taban {
  fill: var(--metin);
  stroke: none;
  transition: fill var(--h-orta) var(--e-yumusak);
}

/* Başlık yanınca içi sıcak renge boyanıyor: ampulün ışığı içeriden
   vuruyor demek. */
.lamba__baslik {
  fill: transparent;
  transition: fill var(--h-orta) var(--e-yumusak),
              stroke var(--h-orta) var(--e-yumusak);
}

/* ---- ampul ---- */
.lamba__ampul {
  fill: var(--metin);
  opacity: 0.25;
  transition: fill var(--h-orta) var(--e-yumusak),
              opacity var(--h-orta) var(--e-yumusak);
}

/* ---- ışık hüzmesi ----
   Koninin ucu başlığın ağzında; oradan büyüyerek açılıyor. Sönükken
   yükseklik sıfır değil, ölçek sıfır: kenarları da beraber küçülüyor,
   "kapanıyor" gibi duruyor. */
/* Hüzme gradyanının renkleri. Öznitelik olarak yazılırsa Safari var()
   çözmüyor ve gradyan siyaha düşüyor; CSS'ten veriyoruz. */
.lamba__durak       { stop-color: var(--lamba-isik, #FFD38F); }
.lamba__durak--bas  { stop-opacity: 0.62; }
.lamba__durak--orta { stop-opacity: 0.2; }
.lamba__durak--son  { stop-opacity: 0; }

.lamba__isik {
  fill: url(#lamba-huzme);
  opacity: 0;
  transform-origin: 22px 19px;   /* başlığın ağzı */
  scale: 0.4;
  transition: opacity 260ms var(--e-yumusak), scale 380ms var(--e-giris);
}

/* ---- yanık hâl ---- */
.lamba[aria-pressed='true'] .lamba__isik {
  opacity: 1;      /* sönümü gradyan veriyor, opaklık değil */
  scale: 1;
}
.lamba[aria-pressed='true'] .lamba__baslik {
  fill: color-mix(in srgb, var(--lamba-isik, #FFD38F) 22%, transparent);
}
.lamba[aria-pressed='true'] .lamba__ampul {
  fill: var(--lamba-isik, #FFD38F);
  opacity: 1;
  /* Parıltı: ampulün etrafına yumuşak bir hale. */
  filter: drop-shadow(0 0 3px var(--lamba-isik, #FFD38F))
          drop-shadow(0 0 7px color-mix(in srgb, var(--lamba-isik, #FFD38F) 60%, transparent));
}

/* Fareyle üstüne gelince lamba biraz "canlanıyor". */
.lamba:hover .lamba__ampul { opacity: 0.5; }
.lamba[aria-pressed='true']:hover .lamba__ampul { opacity: 1; }
.lamba:hover .lamba__baslik { stroke: var(--vurgu); }

@media (prefers-reduced-motion: reduce) {
  .lamba__isik,
  .lamba__ampul,
  .lamba__baslik { transition-duration: 1ms; }
}

/* ==========================================================================
   Açılır önizleme paneli (mega menü)
   ==========================================================================
   Nav başlığının altından inen panel: sayfaya girmeden içinde ne olduğu
   görünüyor. Yalnız geniş ekranda — dar ekranda hamburger menü var. */

.mega,
.mega__perde { display: none; }

@media (min-width: 901px) {

.mega {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 60;
  overflow: hidden;
  background: var(--zemin-kart);
  border-top: 1px solid var(--cizgi-tema);
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, 0.5);

  /* Kapalı hâl. Yükseklik JS tarafından ölçülüp geçişe sokuluyor;
     burada yalnız kayma ve saydamlık var — ikisi de birleştirici
     katmanda işleniyor, düzen hesabı tetiklemiyor. */
  opacity: 0;
  translate: 0 -10px;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
              translate 380ms cubic-bezier(0.22, 1, 0.36, 1),
              height 380ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.mega[data-acik] { opacity: 1; translate: 0 0; pointer-events: auto; }

.mega__ic {
  display: block;
  max-width: var(--en);
  margin-inline: auto;
  padding: 26px var(--kenar) 30px;
}

.mega__sayfa {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 28px;
  align-items: start;
}

.mega__yan { padding-top: 4px; }
.mega__metin {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--metin-yumusak);
  max-width: 26ch;
}
.mega__tumu {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--metin);
  border-bottom: 1px solid var(--cizgi-tema-koyu);
  padding-bottom: 3px;
}
.mega__tumu:hover { border-bottom-color: var(--metin); }
.mega__tumu .ok { transition: translate 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.mega__tumu:hover .ok { translate: 4px 0; }

.mega__kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
}
/* Tek kartlık panelde kart tüm satırı kaplamasın; yatay dursun. */
.mega__kartlar[data-kart-sayisi="1"] { grid-template-columns: minmax(0, 380px); }

/* ---- kart ---- */
.mkart {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: var(--zemin-dolgu);
  color: #fff;
  text-decoration: none;
  isolation: isolate;

  /* Sırayla beliriyor: hepsi aynı anda gelince panel "patlıyor". */
  opacity: 0;
  translate: 0 12px;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
              translate 460ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--sira, 0) * 45ms + 60ms);
}
.mega[data-acik] .mkart { opacity: 1; translate: 0 0; }

.mega__kartlar[data-kart-sayisi="1"] .mkart { aspect-ratio: 16 / 9; }

.mkart__foto { position: absolute; inset: 0; display: block; }
.mkart__foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mkart:hover .mkart__foto img,
.mkart:focus-visible .mkart__foto img { scale: 1.05; }
.mkart:focus-visible { outline: 2px solid var(--metin); outline-offset: 2px; }

.mkart::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(transparent 40%, rgba(12, 10, 8, 0.76) 100%);
  z-index: 1;
}

.mkart__yazi {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: block;
  padding: 14px 15px;
}
.mkart__ad {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
}
.mkart__alt {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Panelin arkasındaki sayfa geri çekilsin; göz panelde kalsın. */
.mega__perde {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(12, 10, 8, 0.34);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.mega__perde[data-acik] { opacity: 1; }

}  /* /min-width: 901px */

@media (prefers-reduced-motion: reduce) {
  .mega, .mkart, .mega__perde { transition-duration: 1ms; }
  .mkart { transition-delay: 0ms; }
}