/* ============================================================================
   HABER GALERİ ŞERİDİ — HAREKET VE ETKİLEŞİM KATMANI
   ----------------------------------------------------------------------------
   Kapsam : .hb-galeri / .hb-serit / .hb-kare / .hb-kare img / .serit-ok
   Kural  : yerleşim (kutu ölçüsü, boşluk, flex) BU DOSYADA DEĞİL — haber-galeri.php'de.
            Burada yalnız: imleç, hover, odak, basma, kayma hissi, kenar ipucu.
   Yasak  : width/height/top/left animasyonu · toptan geçiş bildirimi ·
            eski tema mavisi (BOLUM-KURALLARI §1.9 — literali bu dosyada geçmez
            ki denetim grep'i yanlış alarm vermesin)
   Süre   : hover 160-200 ms · basma 90 ms · kenar ipucu 180 ms  (lightbox 250 ms — eklentide)
   Tarih  : 26.08.2026
   ============================================================================ */

.hb-galeri{
  /* Marka tokenları tek yerde. Aşağıda hiçbir yerde çıplak hex tekrar edilmez. */
  --hb-marka:#455ea8;
  --hb-murekkep:#1b2440;

  /* Ok düğmesinin dikey konumu. .hb-galeri içine başlık/altyazı eklenirse
     yapıyı yazan uzman bunu ezer; ok yerinden oynamaz. */
  --hb-ok-ust:50%;

  /* Kenar ipucu payı — JS bunları değiştirir (0px = kenarda içerik yok). */
  --hb-kes-sol:0px;
  --hb-kes-sag:0px;

  position:relative;   /* ok düğmelerinin çapası */
  /* Kenar payı burada değişiyor; geçiş hem burada hem .hb-serit'te tanımlı ki
     kalıtımla inen değer de yumuşasın. */
  transition:--hb-kes-sol .18s ease, --hb-kes-sag .18s ease;
}

/* --hb-kes-* değerlerinin sıçramadan yumuşamasını sağlar.
   Desteklemeyen tarayıcıda değer anında değişir — görsel sonuç yine doğru. */
@property --hb-kes-sol{ syntax:"<length>"; inherits:true; initial-value:0px; }
@property --hb-kes-sag{ syntax:"<length>"; inherits:true; initial-value:0px; }


/* ---------------------------------------------------------------------------
   1) ŞERİT — kayma hissi
   ---------------------------------------------------------------------------
   · scroll-snap YOK — denendi, ÇIKARILDI. Kare şerit genişliğinin dörtte biri
     kadar; `proximity` yalnız duruş yerini süslüyordu, karşılığında kapta
     ikinci bir hizalama otoritesi kuruyordu: klavye odağını yerine oturtan
     JS düzeltmesi (haber-galeri-hareket.js) ile çekişiyor. Hizalama işini tek
     yer yapar — ok düğmesi TAM KARE adımıyla kaydırır, odak düzeltmesi kutuyu
     kenara sıfırlar. İkisi de belirlenebilir; snap değildi.
   · overscroll-behavior-inline:contain — yatay taşma tarayıcının "geri" jestine
     ya da sayfanın kendi kaymasına zincirlenmez (trackpad ve iOS'ta şart).
   · Kaydırma çubuğu gizli (site geneli kural 2.3) → yerine kenar maskesi + ok.
--------------------------------------------------------------------------- */
.hb-serit{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;

  /* 62px = ok düğmesinin kenar payı (14) + genişliği (46) + 2px pay.
     WCAG 2.4.11: sekmeyle gelinen kare ok düğmesinin ALTINA girmez. */
  scroll-padding-inline:62px;

  /* Kaydırılabilirlik ipucu: içeriğin devam ettiği kenar yumuşar.
     Kenarda içerik yoksa pay 0px'tir, hiçbir şey solmaz. */
  -webkit-mask-image:linear-gradient(to right,
    transparent 0, #000 var(--hb-kes-sol),
    #000 calc(100% - var(--hb-kes-sag)), transparent 100%);
  mask-image:linear-gradient(to right,
    transparent 0, #000 var(--hb-kes-sol),
    #000 calc(100% - var(--hb-kes-sag)), transparent 100%);
  transition:--hb-kes-sol .18s ease, --hb-kes-sag .18s ease;
}
.hb-serit::-webkit-scrollbar{width:0;height:0;display:none}

/* Kenarda devam eden içerik varsa payı aç (JS koyar). */
.hb-galeri.hb-akiyor-sol{--hb-kes-sol:34px}
.hb-galeri.hb-akiyor-sag{--hb-kes-sag:34px}

@media (max-width:700px){
  .hb-serit{scroll-padding-inline:14px}
  .hb-galeri.hb-akiyor-sol{--hb-kes-sol:20px}
  .hb-galeri.hb-akiyor-sag{--hb-kes-sag:20px}
}


/* ---------------------------------------------------------------------------
   2) KARE — tıklanabilirliğin dili
   ---------------------------------------------------------------------------
   Üç katman, üçü de yalnız transform/opacity:
     a) cursor:zoom-in  → sitenin mevcut "bu büyür" işareti (icerik-galeri).
     b) görselin içeriden 1.06 büyümesi → kutu kıpırdamaz, komşu kare itilmez.
     c) marka renginde iç çerçeve + köşede büyüteç rozeti → "açılacak" der.
   Kardeş kareler KARARTILMAZ: 25 karelik şeritte fare gezerken bütün şerit
   yanıp sönerdi; belirtme yerel kalır.
--------------------------------------------------------------------------- */
.hb-galeri .hb-kare{
  /* <button> geldiğinde tarayıcının kendi görünüşü sıfırlanır — ölçü verilmez. */
  appearance:none;-webkit-appearance:none;
  border:0;padding:0;background:transparent;font:inherit;color:inherit;
  text-align:inherit;

  position:relative;
  overflow:hidden;            /* (b) katmanının taşmaması için zorunlu */
  cursor:zoom-in;
  isolation:isolate;
  -webkit-tap-highlight-color:rgba(69,94,168,.16);
}

.hb-galeri .hb-kare img{
  display:block;
  transform:scale(1);
  transition:transform .13s ease-in;   /* ÇIKIŞ: fare ayrılınca kısa, ease-in */
}

/* (c-1) İç çerçeve — ayrı katman; box-shadow'un blur'u DEĞİL opacity'si oynar. */
.hb-galeri .hb-kare::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--hb-marka), inset 0 0 0 5px rgba(255,255,255,.85);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease-in;
}

/* (c-2) Büyüteç rozeti — DOM'a düğüm eklemez, veri-URI ile çizilir. */
.hb-galeri .hb-kare::before{
  content:"";
  position:absolute;
  right:8px;bottom:8px;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.94) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455ea8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='M15.2 15.2 19.5 19.5'/%3E%3Cpath d='M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  box-shadow:0 2px 8px rgba(27,36,64,.28);
  opacity:0;
  transform:scale(.82);
  pointer-events:none;
  z-index:2;
  transition:opacity .12s ease-in, transform .12s ease-in;
}

/* --- HOVER: yalnız gerçekten fare olan cihazda ---------------------------- */
@media (hover:hover) and (pointer:fine){
  .hb-galeri .hb-kare:hover img{
    transform:scale(1.06);
    /* GİRİŞ: mesafe kısa ama yüzey büyük — 200 ms, sitenin mevcut eğrisi */
    transition:transform .2s cubic-bezier(.2,.6,.2,1);
  }
  .hb-galeri .hb-kare:hover::after{
    opacity:1;
    transition:opacity .16s cubic-bezier(.16,1,.3,1);
  }
  .hb-galeri .hb-kare:hover::before{
    opacity:1;transform:scale(1);
    transition:opacity .14s cubic-bezier(.16,1,.3,1), transform .14s cubic-bezier(.16,1,.3,1);
  }
}

/* --- DOKUNMATİK: hover yok, o yüzden rozet KALICI ------------------------- */
/* Parmakla gelen ziyaretçi "bu açılır"ı hover'dan öğrenemez; rozet sürekli
   durur (ekranda aynı anda 2-3 kare görünür, kalabalık yapmaz).
   Çerçeve gösterilmez — kalıcı çerçeve 25 kareyi tablo gibi gösterirdi. */
@media (hover:none){
  .hb-galeri .hb-kare::before{opacity:.92;transform:scale(1);transition:none}
}

/* --- BASMA: dokunmatikte "buton" hissinin asıl kaynağı -------------------- */
.hb-galeri .hb-kare:active img{
  transform:scale(.97);
  transition:transform .09s ease-out;
}

/* --- KLAVYE: hover ile aynı aile, farklı ağırlık -------------------------- */
/* Hover = yumuşak çerçeve + görsel büyür.  Odak = KALIN çerçeve, görsel BÜYÜMEZ.
   Sekme ile 25 kare geçilirken her adımda zoom yorucu olurdu; odak "neredeyim"
   sorusuna cevap verir, "canlandır" değil. Beyaz iç halka koyu fotoğrafta da
   görünür kalmayı garanti eder (kontrast fotoğrafa bağlı bırakılmaz). */
.hb-galeri .hb-kare:focus-visible{outline:none}
.hb-galeri .hb-kare:focus-visible::after{
  opacity:1;
  box-shadow:inset 0 0 0 3px var(--hb-marka), inset 0 0 0 6px #fff;
  transition:opacity .12s cubic-bezier(.16,1,.3,1);
}
.hb-galeri .hb-kare:focus-visible::before{
  opacity:1;transform:scale(1);
  transition:opacity .12s cubic-bezier(.16,1,.3,1), transform .12s cubic-bezier(.16,1,.3,1);
}
/* Eski tarayıcı yedeği: :focus-visible bilinmiyorsa görünür bir şey kalsın. */
.hb-galeri .hb-kare:focus:not(:focus-visible){outline:none}


/* ---------------------------------------------------------------------------
   3) OK DÜĞMESİ — mevcut ortak sınıf, açık zemine uyarlanmış
   ---------------------------------------------------------------------------
   .serit-ok soz-onda.css'te YALNIZ .soz-body altında biçimlendiriliyor; haber
   sayfasında biçimsiz kalırdı. Burada aynı geometri (46px daire, 14px kenar
   payı, translateY(-50%) + scale hover) korunur, renk açık zemine çevrilir.
   Davranış aynı — yalnız uç durumda sönme eklendi.
--------------------------------------------------------------------------- */
.hb-galeri .serit-ok{
  position:absolute;
  top:var(--hb-ok-ust);
  transform:translateY(-50%);
  z-index:5;
  width:46px;height:46px;      /* ≥44×44 dokunma hedefi */
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(27,36,64,.10);
  color:var(--hb-murekkep);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(27,36,64,.18);
  transition:transform .15s ease, background-color .15s ease, opacity .15s ease, visibility .15s;
}
.hb-galeri .serit-ok svg{flex:0 0 auto;display:block}
.hb-galeri .serit-ok:hover{
  background:#fff;
  color:var(--hb-marka);
  transform:translateY(-50%) scale(1.07);
}
.hb-galeri .serit-ok:active{transform:translateY(-50%) scale(.96)}
.hb-galeri .serit-ok:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(69,94,168,.45), 0 6px 18px rgba(27,36,64,.18);
}
.hb-galeri .serit-ok-sol{left:14px}
.hb-galeri .serit-ok-sag{right:14px}
.hb-galeri .serit-ok[hidden]{display:none}

/* Uçtaki ok çekilir: basınca hiçbir şey olmayan düğme bırakılmaz.
   `opacity:.3` denendi — fotoğrafın üstünde leke gibi duruyor (ölçüldü, ekran
   görüntüsü alındı). `visibility:hidden` hem görüntüyü temizler hem düğmeyi
   sekme sırasından çıkarır; `display:none` değil ki opaklık geçişi çalışsın. */
.hb-galeri:not(.hb-akiyor-sol) .serit-ok-sol,
.hb-galeri:not(.hb-akiyor-sag) .serit-ok-sag{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* Site geneli kural 2.3: oklar ≥700px'te görünür, dokunmatikte gizlenir. */
@media (max-width:700px){
  .hb-galeri .serit-ok{display:none}
}


/* ---------------------------------------------------------------------------
   4) prefers-reduced-motion: reduce  →  HİÇBİR ŞEY OYNAMAZ
   ---------------------------------------------------------------------------
   BOLUM-KURALLARI §2.4. Hareket sıfırlanır; BELİRTME KALIR — çerçeve ve rozet
   anında görünür. "animation:none" deyip geri bildirimi de öldürmek yanlış
   uygulamadır: kullanıcı neyin seçili olduğunu yine görmek zorunda.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hb-galeri,
  .hb-galeri *,
  .hb-galeri *::before,
  .hb-galeri *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  /* Yer değiştiren/ölçek değiştiren ne varsa tamamen kaldırılır. */
  .hb-galeri .hb-kare img,
  .hb-galeri .hb-kare:hover img,
  .hb-galeri .hb-kare:active img{transform:none}
  .hb-galeri .hb-kare::before,
  .hb-galeri .hb-kare:hover::before,
  .hb-galeri .hb-kare:focus-visible::before{transform:none}
  .hb-galeri .serit-ok:hover,
  .hb-galeri .serit-ok:active{transform:translateY(-50%)}

  /* Yumuşak kayma kapalı — tarayıcının kendi animasyonudur, o da hareket sayılır. */
  .hb-serit{scroll-behavior:auto}
}

/* Hareket kısıtı YOKken yumuşak kayma. Ok düğmesi scrollBy'ı bundan besleniyor;
   JS ayrıca aynı sorguyu okur (CSS tek başına JS'i durdurmaz). */
@media (prefers-reduced-motion:no-preference){
  .hb-serit{scroll-behavior:smooth}
}


/* ---------------------------------------------------------------------------
   5) Yazdırma — şerit kağıtta kaydırılamaz, açılır
--------------------------------------------------------------------------- */
@media print{
  .hb-serit{overflow:visible;flex-wrap:wrap;mask-image:none;-webkit-mask-image:none}
  .hb-galeri .serit-ok,.hb-galeri .hb-kare::before,.hb-galeri .hb-kare::after{display:none}
}