/* =====================================================================
   FOTO GALERİ — liste/kategori · detay
   theme/classic/assets/css/gallery.css

   Yalnızca `gallery` ve `gallery_category` sayfalarında yükleniyor.
   Kaynak fikir: html/C7 - galeriler.html, C8 - galeri_detay.html.

   TEMEL DİL: kart bir çerçeve değil, GÖRSELİN KENDİSİ. Fotoğrafın
   üstüne aşağıdan yukarı koyulaşan bir örtü (scrim) biniyor ve metin
   onun üstünde duruyor. Modern haber/galeri sitelerinin ortak dili ve
   galeri gibi görsel bir bölüme çerçeveli kutudan çok daha uygun.
   ===================================================================== */

:root {
  --hp-gal-r: 10px;
  --hp-gal-golge: 0 1px 2px rgba(16,20,26,.05), 0 10px 30px rgba(16,20,26,.08);
  --hp-gal-golge-h: 0 3px 6px rgba(16,20,26,.08), 0 22px 52px rgba(16,20,26,.16);
}

/* ---------------------------------------------------------------------
   SAYFA BAŞLIĞI
   --------------------------------------------------------------------- */
.hp-gal-ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-bottom: 24px;
}
.hp-gal-ust h1 { margin: 0; }
.hp-gal-not { font-size: 14px; color: var(--hp-on-surface-variant); margin: 6px 0 0; max-width: 46rem; }

.hp-gal-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 5px;
    background: var(--hp-surface-highest);
    color: var(--hp-on-surface-variant);
}
.hp-gal-rozet b { color: var(--hp-on-surface); font-weight: 800; }

/* ---------------------------------------------------------------------
   GALERİ KARTI — görsel + örtü + üstünde metin
   --------------------------------------------------------------------- */
.hp-gal-kart {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--hp-gal-r);
  background: var(--hp-surface-highest);
  box-shadow: var(--hp-gal-golge);
  text-decoration: none; color: #fff;
  transition: box-shadow .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1);
}
.hp-gal-kart:hover { transform: translateY(-4px); box-shadow: var(--hp-gal-golge-h); }

.hp-gal-kapak { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.hp-gal-kapak img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.hp-gal-kart:hover .hp-gal-kapak img { transform: scale(1.06); }

/* Örtü: metnin okunabilirliği için ŞART. Düz siyah %50 yerine
   aşağıdan yukarı koyulaşan bir geçiş — fotoğrafın üst yarısı
   kararmıyor, alt yarısı metni taşıyacak kadar koyulaşıyor. */
.hp-gal-kart::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
      rgba(12,14,18,0) 34%, rgba(12,14,18,.36) 58%, rgba(12,14,18,.86) 100%);
}

.hp-gal-ic {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px;
}
.hp-gal-baslik {
  font-size: 18px; line-height: 1.32; font-weight: 700; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-gal-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.82);
}
.hp-gal-meta .hp-ico { width: 14px; height: 14px; }

/* Kategori etiketi sol üstte — kartın hangi konuda olduğunu görsele
   bakmadan söylüyor. */
.hp-gal-etiket {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(12,14,18,.55); color: #fff;
  backdrop-filter: blur(6px);
}

/* Fotoğraf sayısı sağ üstte — galeri kartının EN AYIRT EDİCİ bilgisi;
   okur "kaç kare var?" diye bakıyor. */
.hp-gal-sayi {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(12,14,18,.55); color: #fff;
  backdrop-filter: blur(6px);
}

/* Öne çıkan (ilk) galeri — iki sütun kaplıyor, kapak 16:9. */
.hp-gal-kart.is-buyuk .hp-gal-kapak { aspect-ratio: 16/9; }
.hp-gal-kart.is-buyuk .hp-gal-baslik { font-size: clamp(22px, 2.4vw, 30px); -webkit-line-clamp: 3; }
.hp-gal-kart.is-buyuk .hp-gal-ic { padding: 26px; gap: 10px; }

/* =====================================================================
   GALERİ DETAYI — KOYU GÖRÜNTÜLEYİCİ
   Kaynak: html/C8 - galeri_detay.html

   NEDEN AYRI BİR DÜNYA
   Galeri bir okuma sayfası değil, İZLEME sayfası. Açık zeminde
   fotoğrafın kenarları erir, göz metinle görsel arasında bölünür.
   Koyu zemin fotoğrafı öne çıkarır — sinema salonunun ışığı kapatması
   gibi. C8 tam olarak bunu yapıyor ve sayfanın üst bölgesini komple
   koyu bir görüntüleyiciye ayırıyor.

   Yorumlar ve "diğer galeriler" C8'de de AÇIK zemine dönüyor: koyu
   bölge yalnızca fotoğrafın; uzun metin koyu zeminde yorucu.

   Renkler tema değişkenlerinden TÜRETİLMİYOR, sabit: bu bölge temanın
   açık/koyu kipinden bağımsız olarak hep koyu. Değişkene bağlansaydı
   koyu kipte "koyu üstüne koyu" çıkardı.
   ===================================================================== */
.hp-gv {
  --gv-zemin:  #0b0d11;   /* en arka */
  --gv-yuzey:  #14171d;   /* kart */
  --gv-yuzey2: #1c2027;   /* kart üstü öğe */
  --gv-cizgi:  rgba(255,255,255,.09);
  --gv-metin:  #f2f4f8;
  --gv-soluk:  #9aa3b2;

  background: var(--gv-zemin);
  color: var(--gv-metin);
}

/* ---------------------------------------------------------------------
   ARAÇ ÇUBUĞU
   --------------------------------------------------------------------- */
.hp-gv-cubuk {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11,13,17,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gv-cizgi);
}
.hp-gv-cubuk-ic {
  max-width: 1216px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 12px 24px;
}

.hp-gv-sol { display: flex; align-items: center; gap: 14px; min-width: 0; }

.hp-gv-geri {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(255,255,255,.08); color: var(--gv-metin);
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.hp-gv-geri:hover { background: var(--hp-primary); color: #fff; }

.hp-gv-kirinti {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--gv-soluk); min-width: 0;
}
.hp-gv-kirinti a { color: var(--gv-soluk); text-decoration: none; white-space: nowrap; }
.hp-gv-kirinti a:hover { color: var(--gv-metin); }
.hp-gv-kirinti strong { color: #ff8f8d; font-weight: 600; white-space: nowrap; }

/* Başlık ortada, tek satır. Uzun başlıkta çubuğu ittirmemesi için
   kırpılıyor — sayaç ve düğmeler yerinden oynamamalı. */
.hp-gv-baslik {
  font-family: var(--hp-font-headline);
  font-size: 19px; line-height: 1.15; text-transform: uppercase;
  letter-spacing: -.01em; margin: 0; text-align: center;
  color: var(--gv-metin);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34ch;
}

.hp-gv-sag { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.hp-gv-sayac {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-family: var(--hp-font-headline);
  font-size: 17px; letter-spacing: .04em;
  padding: 6px 13px; border-radius: 12px;
  background: var(--hp-primary); color: #fff;
  font-variant-numeric: tabular-nums;
}
.hp-gv-sayac span { color: rgba(255,255,255,.72); font-size: 14px; }

.hp-gv-arac { display: flex; align-items: center; gap: 6px; }
.hp-gv-btn {
  width: 38px; height: 38px; border: 0; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: var(--gv-metin);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.hp-gv-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.hp-gv-btn.is-acik { background: var(--hp-primary); color: #fff; }

/* Paylaşım çubuğu koyu zemine uyarlanıyor — widgets.css'teki açık
   sürümü burada eziliyor, ayrı bir kopya yazılmıyor. */
.hp-gv-paylas .hp-py { border: 0; padding: 0; }
/* Düğmeler ALT SATIRA TAŞMASIN: taşınca araç çubuğu iki sıra
   oluyor ve sayaç ile başlık hizadan çıkıyordu (ölçüldü). */
.hp-gv-paylas .hp-py-sol { flex-wrap: nowrap; gap: 5px; }
.hp-gv-paylas .hp-py-btn {
  background: rgba(255,255,255,.08);
  border-color: transparent;
  color: var(--gv-metin);
  width: 34px; height: 34px; border-radius: 11px;
}
.hp-gv-paylas .hp-py-btn:hover,
.hp-gv-paylas .hp-py-btn:focus-visible { color: #fff; }

/* Mobil kaydırma ipucu */
.hp-gv-ipucu {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  padding: 7px 16px;
  font-size: 11px; color: var(--gv-soluk);
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--gv-cizgi);
}

/* ---------------------------------------------------------------------
   GÖVDE / IZGARA
   --------------------------------------------------------------------- */
.hp-gv-govde { max-width: 1216px; margin: 0 auto; padding: 24px; }
.hp-gv-izgara {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px; align-items: start;
}
.hp-gv-ana { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Yan sütunda gösterilecek bir şey yoksa (reklam boş, başka galeri
   yok) sağdaki 320px ölü alan kalmasın. */
.hp-gv-izgara.is-tek { grid-template-columns: minmax(0, 1fr); }

.hp-gv-bos {
  text-align: center; padding: 80px 20px; color: var(--gv-soluk);
  border: 1px dashed var(--gv-cizgi); border-radius: 18px;
}
.hp-gv-bos .hp-ico { display: block; margin: 0 auto 12px; color: rgba(255,255,255,.2); }

/* ---------------------------------------------------------------------
   SAHNE
   --------------------------------------------------------------------- */
.hp-gd-sahne {
  position: relative;
  border-radius: 16px; overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.hp-gd-cerceve {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/10;
}
.hp-gd-cerceve img {
  /* Fotoğraf çerçeveyi DOLDURUYOR ama KIRPILMIYOR. Önce `width: auto`
     idi ve doğal boyutu küçük olan kare 1168px genişliğindeki sahnenin
     ortasında 750px kalıyordu — etrafında koca siyah bant.
     `cover` KULLANILMADI: fotoğraf galerisinde kareyi kırpmak
     fotoğrafçının kadrajını bozmak demek. */
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

.hp-gd-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,13,17,.72); color: #fff;
  backdrop-filter: blur(8px);
  transition: background-color .18s ease, transform .18s ease;
}
.hp-gd-ok:hover { background: var(--hp-primary); transform: translateY(-50%) scale(1.06); }
.hp-gd-ok .hp-ico { width: 28px; height: 28px; }
.hp-gd-ok.is-sol { left: 16px; }
.hp-gd-ok.is-sag { right: 16px; }

/* Alt şerit — klavye ipucu. Fotoğrafın altına inen geçişin üstünde
   duruyor ki açık fotoğrafta da okunabilsin. */
.hp-gd-altserit {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(11,13,17,.86), transparent);
  pointer-events: none;
}
.hp-gd-klavye {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.72);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(11,13,17,.6); backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------
   KÜNYE KARTI
   --------------------------------------------------------------------- */
.hp-gv-kart {
  background: var(--gv-yuzey);
  border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.hp-gv-kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hp-gv-kart-baslik {
  font-family: var(--hp-font-headline);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.01em;
  margin: 0; color: var(--gv-metin);
}
.hp-gv-kat {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 8px;
  background: rgba(224,59,55,.18); color: #ff8f8d;
}
.hp-gv-aciklama {
  font-size: 16px; line-height: 1.65; color: var(--gv-soluk); margin: 0;
}
.hp-gv-aciklama:empty { display: none; }

.hp-gv-kart-alt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  padding-top: 14px; border-top: 1px solid var(--gv-cizgi);
  font-size: 12px; color: var(--gv-soluk);
}
.hp-gv-bilgi { display: inline-flex; align-items: center; gap: 6px; }
.hp-gv-bilgi b { color: var(--gv-metin); font-weight: 700; }
.hp-gv-bilgi .hp-ico { color: var(--hp-primary); }

.hp-gv-gecis { display: flex; justify-content: center; }

/* ---------------------------------------------------------------------
   ÖNİZLEME ŞERİDİ
   --------------------------------------------------------------------- */
.hp-gv-serit {
  background: var(--gv-yuzey);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.hp-gv-serit-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-gv-serit-ad {
  font-family: var(--hp-font-headline);
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gv-soluk);
}
.hp-gv-serit-not { font-size: 12px; color: var(--gv-soluk); }

.hp-gv-serit-yol { position: relative; display: flex; align-items: center; }
.hp-gv-serit-ok {
  position: absolute; z-index: 2;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--gv-yuzey2); color: var(--gv-metin);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  transition: background-color .18s ease;
}
.hp-gv-serit-ok:hover { background: var(--hp-primary); color: #fff; }
.hp-gv-serit-ok.is-sol { left: -6px; }
.hp-gv-serit-ok.is-sag { right: -6px; }

.hp-gd-serit-alt {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 20px; width: 100%;
  scroll-behavior: smooth; scrollbar-width: none;
}
.hp-gd-serit-alt::-webkit-scrollbar { display: none; }

.hp-gd-kucuk {
  position: relative;
  flex: 0 0 auto; width: 96px; aspect-ratio: 4/3;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden;
  background: var(--gv-yuzey2);
  opacity: .55;
  transition: opacity .2s ease, outline-color .2s ease, transform .2s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.hp-gd-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-gd-kucuk:hover { opacity: .9; transform: translateY(-2px); }
.hp-gd-kucuk.is-aktif { opacity: 1; outline-color: var(--hp-primary); }

/* Sıra numarası — C8'deki gibi köşede. 24 fotoğraflı şeritte okur
   kaçıncı kareye baktığını görüyor. */
.hp-gd-kucuk-no {
  position: absolute; right: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 4px;
  background: rgba(11,13,17,.8); color: #fff;
}

/* ---------------------------------------------------------------------
   KOYU YAN SÜTUN
   --------------------------------------------------------------------- */
.hp-gv-yan { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.hp-gv-reklam {
  display: flex; justify-content: center;
  background: var(--gv-yuzey); border-radius: 16px; padding: 14px;
}

.hp-gv-liste { background: var(--gv-yuzey); border-radius: 16px; padding: 16px; }
.hp-gv-liste-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--gv-cizgi);
}
.hp-gv-liste-ad {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--hp-font-headline);
  font-size: 18px; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--gv-metin);
}
.hp-gv-cizgi { width: 5px; height: 16px; border-radius: 999px; background: var(--hp-primary); }
.hp-gv-liste-ust a { font-size: 12px; color: #ff8f8d; text-decoration: none; }
.hp-gv-liste-ust a:hover { text-decoration: underline; }

.hp-gv-satir {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 8px; margin: 0 -8px;
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: background-color .18s ease;
}
.hp-gv-satir:hover { background: rgba(255,255,255,.05); }
.hp-gv-satir-kapak {
  position: relative; flex: 0 0 auto;
  width: 84px; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  background: var(--gv-yuzey2);
}
.hp-gv-satir-kapak img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.hp-gv-satir:hover .hp-gv-satir-kapak img { transform: scale(1.07); }
.hp-gv-satir-no {
  position: absolute; right: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 4px;
  background: rgba(11,13,17,.85); color: #fff;
}
.hp-gv-satir-kat {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8fd3c4;
}
.hp-gv-satir-baslik {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--gv-metin); margin-top: 2px;
}
.hp-gv-satir:hover .hp-gv-satir-baslik { color: #ff8f8d; }
.hp-gv-satir-alt { display: block; font-size: 11px; color: var(--gv-soluk); margin-top: 3px; }

/* ---------------------------------------------------------------------
   TAM EKRAN
   Kap `.hp-gv` — araç çubuğu, oklar ve şerit de tam ekranda kalıyor,
   yani galeri tam ekranda gezilebiliyor. Yalnızca görseli tam ekrana
   almak okuru her karede çıkıp girmeye zorlardı.
   --------------------------------------------------------------------- */
.hp-gv:fullscreen { overflow-y: auto; }
.hp-gv:fullscreen .hp-gv-govde { padding: 16px 24px 24px; }
.hp-gv:fullscreen .hp-gd-cerceve { aspect-ratio: auto; height: calc(100vh - 260px); min-height: 320px; }
.hp-gv:fullscreen .hp-gv-yan { display: none; }          /* tam ekranda fotoğraf, reklam değil */
.hp-gv:fullscreen .hp-gv-izgara { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------------
   DAR EKRAN
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hp-gv-izgara { grid-template-columns: minmax(0, 1fr); }
  .hp-gv-yan { flex-direction: row; flex-wrap: wrap; }
  .hp-gv-yan > * { flex: 1 1 320px; }
}

@media (max-width: 991.98px) {
  .hp-gv-cubuk-ic { grid-template-columns: 1fr auto; gap: 10px; padding: 10px 16px; }
  .hp-gv-baslik { display: none; }        /* dar çubukta üç sütun sığmıyor */
  .hp-gv-kirinti { display: none; }
  .hp-gv-govde { padding: 16px; }
  .hp-gv-yan { flex-direction: column; }
}

@media (max-width: 767.98px) {
  .hp-gv-ipucu { display: flex; }
  .hp-gv-geri span { display: none; }
  .hp-gv-geri { padding: 8px 10px; }
  .hp-gd-cerceve { aspect-ratio: 4/3; }
  .hp-gd-ok { width: 40px; height: 40px; }
  .hp-gd-ok.is-sol { left: 8px; }
  .hp-gd-ok.is-sag { right: 8px; }
  .hp-gd-ok .hp-ico { width: 22px; height: 22px; }
  .hp-gv-kart { padding: 18px; }
  .hp-gd-kucuk { width: 74px; }
  .hp-gv-serit-ok { display: none; }      /* parmakla kaydırılıyor */
  .hp-gd-serit-alt { padding-inline: 0; }
  .hp-gv-paylas { display: none; }        /* çubuk taşmasın; paylaşım aşağıda */
}

@media (prefers-reduced-motion: reduce) {
  .hp-gd-serit-alt { scroll-behavior: auto; }
  .hp-gd-kucuk:hover, .hp-gd-ok:hover { transform: none; }
  .hp-gv-satir:hover .hp-gv-satir-kapak img { transform: none; }
}