/* Görev 11: Sayfa çevirme (page-flip) bileşeninin stilleri. */

/* #katalog, app.css'te govde CSS Grid'inin (grid-template-areas) tek
   sutunlu, "auto" boyutlanan bir ogesi. Gorev 11'de burada bir
   "position: fixed !important" duzeltmesi vardi: ust-bar'in kendi tasma
   sorunu yuzunden bu sutun mobilde viewport'tan genis hesaplaniyor ve
   #katalog o genislige zorlanip ekrandan tasiyordu.

   Gorev 14, kok nedeni panels.css'te cozdu: .ust-bar artik kendisi
   "position: fixed" (govde grid akisindan tamamen cikarilmis durumda),
   bu yuzden govde sutununun genisligini bir daha etkilemiyor. Bu, Gorev
   14'un raporunda olculdu: blok kaldirildiginda mobilde (375px) ve
   masaustunde (1440px) tasma yok, ".stf__parent" genisligi degismiyor —
   bloklu/bloksuz sonuclar birebir ayni. Kalan genislik sabitlemesi zaten
   flipbook.js:kapGenisliginiSabitle() tarafindan JS ile yapiliyor, o
   yuzden "!important" hack'ine artik gerek yok.
*/
.katalog {
  padding: 12px;
}

.katalog-sayfa {
  background: var(--zemin-2);
  overflow: hidden;
}

.katalog-sayfa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--zemin-2);
}

/* Görsel gelene kadar hafif bir parıltı; boş beyaz alan görünmez. */
.katalog-sayfa img:not([src]) {
  background: linear-gradient(100deg,
    var(--zemin-2) 30%, #232120 50%, var(--zemin-2) 70%) 0 0 / 300% 100%;
  animation: parilti 1.4s linear infinite;
}

@keyframes parilti {
  to { background-position: -300% 0; }
}

.cevirme-kilitli { pointer-events: none; }

/* Görev 17: kapak ortalama (bkz. flipbook.js: kapagiOrtala). Kaydırma
   miktarı (yarım sayfa genişliği) ve geçiş süresi JS'ten değişkenle gelir. */
.katalog.kapak-ortada .stf__block {
  transform: translateX(var(--kapak-kaydirma, 0px));
}

.katalog.kapak-gecisli .stf__block {
  transition: transform var(--kapak-gecis-suresi, 700ms) ease;
}

@media (prefers-reduced-motion: reduce) {
  .katalog.kapak-gecisli .stf__block { transition: none; }
}

@media (max-width: 767px) {
  /* Kucuk ekranda kenar bosluklarindan feragat edip tum alani sayfaya birak. */
  .katalog { padding: 0; }
}

/* F16: yatay telefonda (kisa viewport) dolgu SIFIRLANIYOR — mobil portre
   gorunumdeki (yukaridaki 767px sorgusu) ile ayni gerekce, arti olculen
   somut bir sebep: StPageFlip'in sayfa kutusu (".stf__block")
   "position: absolute; height: 100%" ile tanimli ve yuzde yukseklik,
   konumlanmis ata olan #katalog'un DOLGU KUTUSUNA gore hesaplanirken kutu
   kendisi ICERIK kutusunun sol-ust kosesinden (yani dolgu kadar asagidan)
   basliyor. Sonuc: her "padding" degeri sayfa kutusunu asagi kaydiriyor
   ama kisaltmiyor — 4 px dolguda sayfanin alt kenari 812x375'te y=379'a,
   yani viewport'un 4 px disina dusuyordu (olculdu). Dolgu sifirlaninca
   kutu tam olarak 56-375 araligini kapliyor. (Ayni kutuphane davranisi
   masaustunde de var: 12 px'lik dolgu acilimi 12 px saga kaydiriyor —
   flipbook.spec.mjs'te belgelenmis, bu gorevin kapsami disinda.) */
@media (max-height: 500px) {
  .katalog { padding: 0; }
}

/* Girdi katmani (js/cevirme.js). Kimlik secicisi: kutuphanenin sonradan
   eklenen ".stf__parent { touch-action: pan-y }" kurali sinifla esit agirlikta. */
#katalog {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
#katalog.imlec-kenar { cursor: pointer; }
#katalog.surukleniyor { cursor: grabbing; }