/**
 * duyuru-rafi.css — Ana sayfadaki yatay duyuru rafı.
 *
 * ── NEDEN TAILWIND DEĞİL, EL YAZISI CSS ──
 * `tw-landing.css` ÖNCEDEN DERLENİYOR (`scripts/tailwind-derle.mjs`) ve HTML'de
 * içerik hash'iyle (`?h=…`) çağrılıyor. Rafı utility'lerle yazmak, her ufak
 * ayarda derleme + hash güncelleme zinciri demekti; hash güncellenmezse
 * tarayıcı bayat CSS'e yapışıyor. Bu bileşen tek amaçlı ve kendi dosyasında
 * duruyor. Renk/ölçü ASLA elle yazılmıyor — hepsi prodverse-site.css'teki
 * `--pv-*` token'larından geliyor.
 *
 * ── ÖLÇÜ KARARI ──
 * Posterler İKİ farklı oranda tasarlanıyor: 9:16 ve 1080x1350 (4:5). Kart
 * YÜKSEKLİĞİ sabit, GENİŞLİK orandan türüyor (`aspect-ratio`). Böylece hiçbir
 * poster kırpılmıyor ve rafta doğal bir ritim oluşuyor. Oran sunucudan
 * (`gorsel_en`/`gorsel_boy`) geldiği için genişlik görsel yüklenmeden bilinir:
 * düzen kayması (CLS) sıfır.
 */

.duyuru-raf-sarmal {
  /* Kartların kap sınırının DIŞINA kayabilmesi için raf `.pv-kap` içinde DEĞİL.
     İlk kart yine de kapın kenarıyla hizalı başlasın diye kendi payını
     hesaplıyor. ⚠️ `width: 100vw` KULLANILMIYOR: Windows'ta dikey kaydırma
     çubuğunun genişliğini de sayar ve sayfaya yatay taşma bindirir. */
  --raf-kenar: max(var(--pv-kenar-x), calc((100% - var(--pv-kap-en)) / 2));
  --duyuru-h: clamp(380px, 56vh, 620px);
  margin-top: var(--pv-b-6);
}

.duyuru-raf {
  display: flex;
  gap: var(--pv-b-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--raf-kenar);
  padding-inline: var(--raf-kenar);
  /* Odak halkası `overflow` tarafından KIRPILMASIN diye dikey pay.
     Klavye kullanıcısı için halka görünmezse raf gezilemez hâle gelir. */
  padding-block: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.duyuru-raf::-webkit-scrollbar { display: none; }
.duyuru-raf.is-suruklenir { cursor: grabbing; scroll-snap-type: none; }
.duyuru-raf.is-suruklenir .duyuru-kart { pointer-events: none; }

/* ── Kart ───────────────────────────────────────────────────────────── */
.duyuru-kart {
  position: relative;
  flex: 0 0 auto;
  height: var(--duyuru-h);
  /* JS her kartta `--oran` yazar; poster yoksa 4/5'e düşer. */
  aspect-ratio: var(--oran, 4 / 5);
  overflow: hidden;
  border: 1px solid var(--pv-kenar);
  border-radius: var(--pv-radius-lg);
  background: var(--kart-zemin, var(--pv-yuzey-1));
  color: var(--pv-metin);
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
  transition: transform var(--pv-sure) var(--pv-egri),
              opacity .3s ease,
              border-color .3s ease,
              box-shadow var(--pv-sure) var(--pv-egri);
  /* Ekran dışındaki kartların boyanmasını ertele — 8+ poster tek açılışta. */
  content-visibility: auto;
  contain-intrinsic-size: var(--duyuru-h) 400px;
}

.duyuru-kart__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--pv-sure) var(--pv-egri);
}

/* ── POSTERLI KART TEMIZ KALIR ──
   Poster ZATEN duyurunun kendisi: metin (baslik, tarih, cagri) gorselin ICINE
   tasarlaniyor. Ustune ikinci bir metin katmani bindirmek ayni bilgiyi iki kez
   yaziyor ve posterin kendi alt yazisini kapatiyordu. Bu yuzden posterli
   kartta ne perde ne de metin var; kart yalnizca goruntudur.
   Erisilebilir ad `img[alt]`ten geliyor. */
.duyuru-kart--poster .duyuru-kart__ic { display: none; }

/* Hover'da yalnizca baglanti IPUCU beliriyor - baslik DEGIL. */
.duyuru-kart__cip {
  position: absolute;
  z-index: 3;
  right: var(--pv-b-4);
  bottom: var(--pv-b-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--pv-altin-kenar);
  border-radius: 999px;
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(8px);
  color: var(--pv-altin);
  font-family: var(--pv-font-govde);
  font-size: var(--pv-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform var(--pv-sure) var(--pv-egri);
  pointer-events: none;
}

.duyuru-kart__ic {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: var(--pv-b-5);
  gap: var(--pv-b-2);
}

.duyuru-kart__tur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid var(--pv-altin-kenar);
  border-radius: 999px;
  background: rgba(5,5,5,.55);
  backdrop-filter: blur(6px);
  color: var(--pv-altin);
  font-family: var(--pv-font-govde);
  font-size: var(--pv-fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

.duyuru-kart__baslik {
  margin: 0;
  font-family: var(--pv-font-display);
  font-size: var(--pv-fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Özet kapalı başlar, hover/odakta açılır. Kapalıyken yer kaplamasın diye
   `grid-template-rows` geçişi — `height:auto` animasyonlanamıyor. */
.duyuru-kart__ozet-kutu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pv-sure) var(--pv-egri),
              opacity .3s ease;
  opacity: 0;
}
.duyuru-kart__ozet {
  overflow: hidden;
  margin: 0;
  color: var(--pv-metin-sonuk);
  font-size: var(--pv-fs-sm);
  line-height: 1.55;
}

.duyuru-kart__tarih {
  color: var(--pv-metin-sonuk);
  font-size: var(--pv-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Postersiz kart: tipografik poster ──────────────────────────────────
   Poster ZORUNLU DEĞİL. Görsel yoksa kart, duyurunun kendi renginden türeyen
   bir degradeye ve büyük tipografiye düşer — böylece bir duyuru Canva'ya
   gitmeden yayına girebiliyor. */
.duyuru-kart--yazi {
  background:
    radial-gradient(120% 90% at 15% 0%, var(--kart-renk, var(--pv-altin-sonuk)) 0%, transparent 60%),
    linear-gradient(160deg, var(--pv-yuzey-2), var(--pv-bg));
}
.duyuru-kart--yazi::after { background: none; }
.duyuru-kart--yazi .duyuru-kart__ic { justify-content: space-between; }
.duyuru-kart--yazi .duyuru-kart__baslik { font-size: var(--pv-fs-h2); }

/* ── Etkileşim ──────────────────────────────────────────────────────────
   Kardeş kartlar sönümlenirken YALNIZ `opacity` kullanılıyor. `filter`
   (saturate/grayscale) büyük görselde compositor'a devredilemiyor ve her
   karede yeniden boyanıyor — düşük donanımlı makinede rafı kilitler. */
@media (hover: hover) and (pointer: fine) {
  .duyuru-raf:hover .duyuru-kart,
  .duyuru-raf:focus-within .duyuru-kart { opacity: .48; }

  .duyuru-raf .duyuru-kart:hover,
  .duyuru-raf .duyuru-kart:focus-visible { opacity: 1; }

  .duyuru-kart:hover,
  .duyuru-kart:focus-visible {
    transform: translateY(-10px);
    border-color: var(--pv-altin-vurgu);
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.85);
  }
  .duyuru-kart:hover .duyuru-kart__gorsel,
  .duyuru-kart:focus-visible .duyuru-kart__gorsel { transform: scale(1.06); }

  .duyuru-kart:hover .duyuru-kart__cip,
  .duyuru-kart:focus-visible .duyuru-kart__cip { opacity: 1; transform: none; }

  .duyuru-kart:hover .duyuru-kart__ozet-kutu,
  .duyuru-kart:focus-visible .duyuru-kart__ozet-kutu {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* Dokunmatikte sönümleme/kalkma YOK: hover diye bir şey yok, "yapışkan hover"
   kartı kalıcı olarak seçili gösterirdi. Özet her zaman açık. */
@media (hover: none) {
  .duyuru-kart__ozet-kutu { grid-template-rows: 1fr; opacity: 1; }
  .duyuru-kart__cip { opacity: 1; transform: none; }
}

.duyuru-kart:focus-visible {
  outline: 2px solid var(--pv-altin);
  outline-offset: 3px;
}

/* ── Araçlar: oklar + ilerleme ──────────────────────────────────────── */
.duyuru-araclar {
  display: flex;
  align-items: center;
  gap: var(--pv-b-4);
  margin-top: var(--pv-b-4);
}

.duyuru-ok {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--pv-saclinesi);
  border-radius: 999px;
  background: transparent;
  color: var(--pv-metin);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}
.duyuru-ok:hover:not(:disabled) {
  color: var(--pv-altin);
  border-color: var(--pv-altin-kenar);
  background: var(--pv-altin-sonuk);
}
.duyuru-ok:disabled { opacity: .3; cursor: default; }
.duyuru-ok:focus-visible { outline: 2px solid var(--pv-altin); outline-offset: 2px; }

/* Değişken genişlikli kartlarda NOKTA göstergesi yalan söyler (her nokta eşit
   görünür ama kartlar eşit değil). İlerleme çubuğu gerçek konumu gösterir. */
.duyuru-ilerleme {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: var(--pv-saclinesi);
  overflow: hidden;
}
/* ⚠️ `width` DEĞİL `transform: scaleX()`.
   Dolgu her KAYDIRMA KARESİNDE güncelleniyor; `width` animasyonu her karede
   layout tetikler ve tam da parmağın altındayken jank üretir. `transform`
   compositor'da kalıyor, layout'a hiç dokunmuyor. */
.duyuru-ilerleme__dolgu {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--pv-altin);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
}

/* Oklar yalnız kesin işaretçide (fare) anlamlı; dokunmatikte parmakla kaydırılır. */
@media (hover: none), (max-width: 767px) {
  .duyuru-ok { display: none; }
}

@media (max-width: 767px) {
  .duyuru-raf-sarmal { --duyuru-h: clamp(300px, 46vh, 440px); }
  .duyuru-kart__ic { padding: var(--pv-b-4); }
}

@media (prefers-reduced-motion: reduce) {
  .duyuru-raf { scroll-behavior: auto; }
  .duyuru-kart,
  .duyuru-kart__gorsel,
  .duyuru-kart__ozet-kutu { transition: none; }
  .duyuru-kart:hover,
  .duyuru-kart:focus-visible { transform: none; }
  .duyuru-raf:hover .duyuru-kart,
  .duyuru-raf:focus-within .duyuru-kart { opacity: 1; }
  .duyuru-kart__ozet-kutu { grid-template-rows: 1fr; opacity: 1; }
  .duyuru-kart__cip { opacity: 1; transform: none; }
}