/* Poster galerisi — ana uygulamadan bağımsız, kendi sayfası.
   styles.css yüklenmiyor: o dosya harita/panel için yazılmış ve tamamı
   buraya gereksiz yük olurdu. */

:root {
  --mrk: #141821;
  --sol: #4a5262;
  --cizgi: #d9dee9;
  --zemin: #f2f4f8;
  --kart: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--mrk);
  font: 15px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- başlık ---------- */
.ph {
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 5;
}
.ph-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 20px 12px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.ph-back {
  color: var(--sol);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  padding-top: 6px;
}
.ph-back:hover { color: var(--mrk); }
.ph-t { flex: 1; min-width: 0; }
.ph-t h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ph-logo { width: 28px; height: 28px; display: block; flex: none; }
.ph-t p {
  margin: 4px 0 0;
  color: var(--sol);
  font-size: 14px;
}
#lang {
  border: 1px solid var(--cizgi);
  background: var(--kart);
  color: var(--mrk);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

.ph-f {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* İkinci filtre satırı (ülke) biraz daha sessiz dursun: dönem birincil eksen. */
.ph-f2 { padding-top: 0; opacity: 0.92; }
.ph-f2 .chip { font-size: 12.5px; padding: 6px 13px; }

.chip {
  border: 1px solid var(--cizgi);
  background: var(--kart);
  color: var(--sol);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  cursor: pointer;
}
.chip:hover { border-color: #aab3c4; color: var(--mrk); }
.chip.on {
  background: var(--mrk);
  border-color: var(--mrk);
  color: #fff;
}

/* ---------- ızgara ---------- */
.izgara {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Poster 2:3; oran korunsun diye kutu oranla veriliyor, sabit yükseklikle
   değil — sabit verilirse dar ekranda poster kırpılıyordu. */
.onizleme {
  aspect-ratio: 2 / 3;
  background: #fff;
  border-bottom: 1px solid var(--cizgi);
}
.onizleme { display: block; }
.onizleme img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kredi { margin: 10px 0 0; font-size: 11px; color: #8a93a6; line-height: 1.4; }
.kredi a { color: #6b7688; }
a.ind { display: block; text-align: center; text-decoration: none; }

.alt { padding: 14px 16px 16px; }
.alt h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.kunye {
  margin: 3px 0 12px;
  color: var(--sol);
  font-size: 12.5px;
}
/* İki indirme yan yana: poster (2:3) ve telefon duvar kağıdı (1320×2868). */
.dugmeler { display: flex; gap: 8px; }
.dugmeler .ind { flex: 1 1 0; min-width: 0; }
.ind {
  flex: 1;
  border: 1px solid var(--cizgi);
  background: var(--zemin);
  color: var(--mrk);
  border-radius: 8px;
  padding: 9px 6px;
  font-size: 13px;
  cursor: pointer;
}
.ind:hover { border-color: #aab3c4; }
.ind:disabled { opacity: 0.5; cursor: default; }

/* ---------- alt bilgi ---------- */
.pf {
  border-top: 1px solid var(--cizgi);
  background: var(--kart);
  padding: 22px 20px 32px;
}
.pf p {
  max-width: 1200px;
  margin: 0 auto;
  color: var(--sol);
  font-size: 13px;
  line-height: 1.6;
}
.pf-alt {
  margin-top: 8px !important;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9aa3b4;
}

/* ---------- telefon ----------
   Ölçüldü (375×667): yapışkan başlık 353 px, yani ekranın %53'ü. Poster
   ızgarası kalan 314 px'lik yarıktan geziliyordu ve başlık KAYMIYOR (sticky),
   yani bu kayıp kalıcıydı. Üç şey birden yapıyordu:
     1) alt başlık dar bir sütunda dört satıra sarıyordu (geri bağlantısı ve
        dil seçici yanlarını yiyor),
     2) iki filtre satırı 4 satıra sarıyordu,
     3) her şey alt alta yığılıyordu.
   Çözüm: alt başlığı telefonda gizle (süs), filtreleri sarmak yerine YATAY
   kaydır (hepsi erişilebilir kalıyor, iki satır yetiyor).
   Dokunma hedefleri de 44 px'e çıkarıldı — ölçümde çipler 28-31 px'ti. */
@media (max-width: 560px) {
  .ph-in {
    padding: 10px 14px 8px;
    align-items: center;
    gap: 10px;
  }
  .ph-t h1 { font-size: 20px; gap: 8px; }
  .ph-logo { width: 22px; height: 22px; }
  /* Alt başlık telefonda gizli: dar sütunda dört satıra sarıp başlığın
     yarısını yiyordu. Bilgi kaybı yok — sayfa başlığı zaten "Posters". */
  .ph-t p { display: none; }
  .ph-back {
    padding: 0;
    display: flex;
    align-items: center;
    min-height: 44px;                 /* dokunma hedefi (ölçümde 27 px'ti) */
  }
  /* "Back to map" telefonda yalnız ok: yazı başlığı sıkıştırıyordu.
     Ok, HTML'de düz bir metin düğümü (`←`), sözde öğe DEĞİL — büyütmek için
     bağlantının kendi font boyutu veriliyor. */
  .ph-back { font-size: 21px; }
  /* `display:none` yazısı ekran okuyucudan da siler ve geriye erişilebilir
     adı olmayan bir "←" kalır. Yazı GÖRSEL olarak gizleniyor, ağaçta kalıyor. */
  .ph-back span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  #lang { min-height: 44px; padding: 7px 8px; }

  /* Filtreler sarmıyor, YATAY kayıyor: 4 satır yerine 1 satır.
     Kaydırma kutunun İÇİNDE kalıyor, sayfa yatay kaymıyor. */
  .ph-f {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 14px 10px;
  }
  .ph-f::-webkit-scrollbar { display: none; }
  .ph-f2 { padding-top: 0; padding-bottom: 12px; }
  .chip, .ph-f2 .chip {
    flex: 0 0 auto;                   /* sıkışıp okunmaz hale gelmesin */
    white-space: nowrap;
    min-height: 44px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
  }

  .izgara { grid-template-columns: 1fr; padding: 16px 14px 32px; gap: 18px; }
  /* "İndir" telefonda 40 px ölçüldü — parmak hedefi 44'e tamamlanıyor.
     Ortalama flex ile: `display:block` + min-height metni yukarı yapıştırıyor. */
  .ind {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- büyüteç ---------- */
/* Önizleme artık bir düğme: tarayıcının düğme varsayılanları sıfırlanıyor,
   yoksa kartın içinde gri bir kutu gibi duruyor. */
button.onizleme {
  border: 0;
  padding: 0;
  width: 100%;
  cursor: zoom-in;
  background: #fff;
}
body.kilit { overflow: hidden; }

/* `display: flex` tarayıcının `[hidden] { display:none }` varsayılanını EZİYOR:
   katman gizli sanılırken ekranı kaplamaya ve tıklamaları yutmaya devam
   ediyordu. Görünmediği için de fark edilmiyordu — kartlar tıklanmaz olmuştu. */
.buyutec[hidden] { display: none; }

.buyutec {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(9, 11, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.buyutec-ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-height: 100%;
}
/* Poster ekrana sığsın: yükseklik sınırı yoksa uzun ekranlarda taşıyor ve
   alt çubuk görünmez oluyordu. */
.buyutec img {
  max-width: min(92vw, 620px);
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.buyutec-cubuk {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e7ebf2;
  font-size: 14px;
}
.buyutec-cubuk .ind {
  background: #e7ebf2;
  border-color: #e7ebf2;
  color: #141821;
  padding: 8px 18px;
  flex: none;
}
.buyutec .kapa {
  border: 1px solid #4a5262;
  background: transparent;
  color: #e7ebf2;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 15px;
  cursor: pointer;
}
.buyutec .kapa:hover { border-color: #8a93a6; }