/*
 * Çarşı Kitap v1 — artboard çerçevesini söken kurallar.
 *
 * Bu dosya sunucu tarafından her sayfanın <head>'ine bağlanır. Sebebi zamanlama:
 * aynı kurallar eskiden site.js içinden, bileşen çizildikten SONRA
 * enjekte ediliyordu; arada önizleme çubuğu ve küçültülmüş çerçeve bir an
 * göze çarpıyor, her sayfa geçişinde ekran zıplıyordu. Bağlı bir stil dosyası
 * ilk boyamayı beklettiği için o sıçrama tamamen ortadan kalkar.
 *
 * Tasarım dosyalarında sınıf yok; tek tutamak satır içi stil metni, bu yüzden
 * seçiciler `[style*="…"]` biçiminde. Hepsi `!important`, çünkü artboard
 * kendini yeniden çizdiğinde satır içi stilleri geri koyuyor.
 */

/*
 * Önizleme çubuğu (kırılma noktası düğmeleri ve durum sekmeleri).
 * İmzası her dosyada aynı: 12px 22px dolgu ve #23262c alt çizgi — 29 tasarım
 * dosyasının her birinde tam bir eşleşme veriyor, sayfa köklerine dokunmuyor.
 *
 * Renk iki biçimde de aranır: bazı sayfalarda satır içi stile dokunulduğu için
 * tarayıcı özniteliği yeniden yazıyor ve `#23262c` → `rgb(35, 38, 44)` oluyor;
 * yalnız onaltılık biçime bakan seçici Panel ve Okuyucu'da ıskalıyordu.
 *
 * Dolgu değeri noktalı virgülle birlikte aranır: mobil uygulama maketindeki
 * saat çubuğu "padding: 12px 22px 6px" taşıyor ve noktalı virgülsüz seçici onu
 * da kapsayıp tasarımın kendi parçasını gizliyordu.
 */
div[style*="padding: 12px 22px;"][style*="#23262c"],
div[style*="padding: 12px 22px;"][style*="rgb(35, 38, 44)"] { display: none !important; }

/* Önizleyicinin küçültmesi kalksın, sayfa gerçek genişliğe yayılsın. */
div[style*="scale("] {
  transform: none !important;
  width: 100% !important;
  transform-origin: top left !important;
}

/*
 * Artboard kökü ve ara kapsayıcılar. Önizleyicide sabit yükseklikteler ve
 * kendi içlerinde kayıyorlar; sayfanın tamamı görünsün diye yükseklik
 * içeriğe bırakılır, iç kaydırma kapatılır.
 *
 * Seçici `--pad`e bakmaz: karüsel kutusunun stilinde
 * `margin: 0 calc(-1 * var(--pad))` geçiyor, `--pad` seçicisi onu da yakalayıp
 * yüksekliğini sıfırlıyordu — kapaklar bölüm başlığının üstüne taşıyordu.
 *
 * Üst kargo şeridi ise kural dışında: `color: var(--paper)` taşıdığı için bu
 * seçiciye takılıyor ve `height: auto` 38px'lik bandı 12px'e çöküyordu.
 */
div[style*="--paper"]:not([style*="var(--tick-h)"]) {
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/*
 * Alt bilgi hep en dipte. İçeriği ekrandan kısa olan sayfalarda (Hesabım,
 * Sepet, Ödeme hatası) alt bilgi sayfanın ortasında asılı kalıyor, altında boş
 * kâğıt zemin görünüyordu.
 */
/* Izgara kabuklar hariç: giriş/kayıt sayfası iki sütunlu (kapak duvarı | form)
   bir ızgara; bu kural onu tek sütuna çevirip formu kapak duvarının altına,
   ekranın dışına itiyordu. */
div[style*="background: var(--paper)"]:not([style*="display: grid"]) {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
div[style*="display: grid"][style*="background: var(--paper)"] { min-height: 100vh !important; }
div[style*="background: var(--paper)"] > footer { margin-top: auto !important; }

/* Sütun düzeninde sabit yükseklikli üst şerit ezilmesin. */
div[style*="height: var(--tick-h)"] { flex: 0 0 auto !important; }

/*
 * ANA SAYFA "TÜM KATEGORİLER" MENÜSÜ — iki hata birlikte, telefonda menü kaydırılamıyordu.
 *
 * (1) Menünün alt şeridi ("Tam kategori ağacı keşif sayfasında · Keşif sayfası →")
 *     kâğıt zeminli olduğu için yukarıdaki "alt bilgi hep en dipte" kuralı ona da
 *     uygulanıyordu: şerit ekran boyu (min-height: 100vh) ve sütun yönlü oluyor,
 *     menünün altına ekran kadar boş alan ekleniyor, "Keşif sayfası →" bağlantısı
 *     ekranın çok altına itiliyordu. Şerit yine kendi satır düzenine döner.
 * (2) Menü yapışkan üst şeridin içinde asılı; şerit ekranın tepesinde durduğu için
 *     menü de durur, ama menünün kendi boyu ekrandan uzundu (telefonda ~1.900 px):
 *     alt yarısına hiçbir yoldan ulaşılamıyor, sayfa kaydırılınca arkadaki içerik
 *     kayıyor, menü "takılıyordu". Menü ekrana sığan bir yükseklikle sınırlanır ve
 *     kendi içinde kayar; `overscroll-behavior` menü sonunda arkadaki sayfanın
 *     kaymasını engeller. Ayrılan pay, üstteki kargo bandı + sabit üst şeridin
 *     boyu (telefonda ~140 px, geniş ekranda ~175 px) artı küçük bir boşluk.
 *
 * Seçici bu menüye özgü: `top: 100%` + `box-shadow: var(--sh3)` taşıyan mutlak
 * konumlu kutu yalnız Ana Sayfa'da var. `vh` yedeği `dvh` desteklemeyen eski
 * tarayıcılar için (mobil tarayıcıda adres çubuğu payı `dvh` ile doğru hesaplanır).
 */
div[style*="position: absolute"][style*="top: 100%"][style*="box-shadow: var(--sh3)"] > div[style*="background: var(--paper)"] {
  min-height: 0 !important;
  flex-direction: row !important;
}
div[style*="position: absolute"][style*="top: 100%"][style*="box-shadow: var(--sh3)"] {
  max-height: calc(100vh - 190px) !important;
  max-height: calc(100dvh - 190px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 833px) {
  div[style*="position: absolute"][style*="top: 100%"][style*="box-shadow: var(--sh3)"] {
    max-height: calc(100vh - 152px) !important;
    max-height: calc(100dvh - 152px) !important;
  }
}
/*
 * Menü açıkken sağ alttaki yüzen "Yardım" düğmesi (z-index 70, üst şeritten yüksek)
 * menünün son satırındaki "Keşif sayfası →" bağlantısının üstüne biniyor; telefonda
 * bağlantıya dokunmak sohbet kutusunu açıyordu. Menü açıkken düğme geri çekilir,
 * menü kapanınca yerine gelir. (`:has()` desteklemeyen eski tarayıcılarda yalnız bu
 * örtüşme kalır, menü yine kullanılabilir.)
 */
body:has(div[style*="position: absolute"][style*="top: 100%"][style*="box-shadow: var(--sh3)"]) div[style*="position: fixed"][style*="bottom: 26px"][style*="z-index: 70"] {
  display: none !important;
}

/*
 * Önizleme çerçevesinin yan dolgusu kalksın — sayfanın iki kenarında koyu
 * şerit bırakıyordu. Dolgu değeri her artboard'da farklı ("26px 20px",
 * "24px 20px"…), o yüzden sayıya değil YAPIYA bakılır: içinde ortalanmış
 * artboard kutusu olan kapsayıcı.
 */
div:has(> div[style*="margin: 0px auto"]),
div:has(> div[style*="margin: 0 auto"]) {
  padding: 0 !important;
  overflow: visible !important;
}

/* Önizleyicinin tam ekran koyu zemini ve alt boşluğu. */
div[style*="min-height: 100vh"] {
  background: transparent !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/*
 * Artboard, sabit ölçülü ve kenarlıklı bir kutu içinde duruyor
 * (ör. "width: 1385px; height: 803px; margin: 0 auto; border: 1px solid").
 * Kutu serbest bırakılır.
 */
div[style*="margin: 0px auto"],
div[style*="margin: 0 auto"] {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}

/* Önizleyicinin koyu sayfa zemini ve alt boşluğu kalksın. */
body > div {
  background: transparent !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Dış kutuların kendi kaydırma çubukları olmasın. */
div[style*="overflow: auto"] { overflow: visible !important; }

/*
 * IZGARA HÜCRELERİ KÜÇÜLEBİLSİN.
 *
 * Uygulama tanıtımındaki özellik kutuları `--tile-cols` ızgarasında duruyor.
 * Izgara hücresinin varsayılan en küçük boyu `auto` olduğu için hücre
 * içeriğinden daha dar olamıyor; 390px'de kutu 371px kalıyor, kapsayıcı ise
 * 327px — sayfa 22px taşıyordu. Yalnız bu ızgaraya uygulanır.
 */
div[style*="var(--tile-cols)"] > * { min-width: 0 !important; }

/*
 * KİTAP RAFLARI KAYDIRILABİLİR OLSUN.
 *
 * Tasarımda raflar `overflow: hidden` bir kutunun içinde duran bir şerit
 * ("shelfTrack": display:flex, gap, align-items:stretch). Şeridi kaydıracak
 * mantık yazılmamış — vitrindeki boş `kd(){}` işleyicilerinin aynısı.
 * Sonuç: mobilde raf 416px, kutu 331px; üçüncü kitap kesiliyor ve ona
 * ulaşmanın hiçbir yolu kalmıyor.
 *
 * Kart ölçüleri tasarımın kararı, onlara dokunulmaz; yalnız kutu kaydırılabilir
 * yapılır, böylece taşan kitaplara parmakla/tekerlekle erişilir. Çubuk
 * gizlenir — tasarımda görünür bir kaydırma çubuğu yok.
 *
 * Seçici üst şeride ve sabit yükseklikli kutulara dokunmasın diye "height"
 * geçen stilleri dışarıda bırakır.
 */
div[style*="overflow: hidden"]:not([style*="height"]):has(> div[style*="align-items: stretch"]) {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
div[style*="overflow: hidden"]:not([style*="height"]):has(> div[style*="align-items: stretch"])::-webkit-scrollbar {
  display: none;
}

/*
 * SAYFA GEÇİŞİ — yalnızca ÇIKIŞ.
 *
 * Bağlantıya basınca sayfa 170ms'de sönüp öyle gidiyor; süre ve yumuşama
 * tasarımın kendi giriş animasyonundan ("Yukleme" ekranındaki sp-fade).
 *
 * Girişte bilerek perde yok: gövdeyi saydamsız başlatıp JavaScript'le açmayı
 * denedim, ama geçiş herhangi bir sebeple ilerlemezse (arka plan sekmesi,
 * çizimin durdurulması) sayfa boş kalıyordu. Görünürlük bir animasyonun
 * bitmesine bağlanmamalı; giriş sıçraması zaten yukarıdaki kurallar ilk
 * boyamadan önce uygulandığı için ortadan kalkıyor.
 */
/* ── SAYFA GEÇİŞİ ────────────────────────────────────────────────────────
 *
 * Eskiden sayfa `opacity: 0`'a söndürülüyordu; tarayıcı sönmüş sayfayı
 * boyamayı bırakınca yeni sayfa gelene kadar ekran BEYAZ kalıyordu. Artık
 * giderken sayfa sönmüyor, yalnız üstte ince bir çizgi ilerliyor; tarayıcı
 * eski sayfayı yeni sayfa boyanana kadar tutuyor.
 * ──────────────────────────────────────────────────────────────────────── */

/* Ara boşlukta beyaz değil, sayfanın kendi kâğıt rengi görünsün. */
html { background: #f2f1ee; }

/*
 * Giriş hareketi YALNIZCA yer değiştirme. Opaklık kullanmıyoruz: animasyon
 * herhangi bir sebeple başlangıçta takılırsa sayfa görünmez kalıyordu
 * (ölçüldü: body opacity 0). Görünürlük hiçbir zaman bir animasyona
 * bağlı olmamalı.
 */
/*
 * GİRİŞ: yumuşak fade + hafif yukarı kayma. Opacity 0.45'ten başlar (0'dan
 * DEĞİL — 0 tarayıcıyı sayfayı hiç boyamamaya itip boş bırakıyordu, ölçüldü).
 * Böylece yeni sayfa sert "açılmıyor", nazikçe beliriyor.
 */
@keyframes v1-giris {
  from { transform: translateY(10px); opacity: .45; }
  to   { transform: none; opacity: 1; }
}

body { animation: v1-giris 360ms cubic-bezier(.22, .61, .36, 1); }

/*
 * ÇIKIŞ: giderken nazikçe sönüp hafifçe yükselir — eski sayfa sert kesilmez,
 * yeni sayfanın girişiyle çapraz geçiş hissi verir. Opacity 0.3'e iner (0'a
 * değil; navigasyon zaten hemen ardından). git() ~200ms bekleyip yönlendiriyor.
 */
body.v1-cikis {
  opacity: .3;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

@keyframes v1-cizgi {
  0%   { transform: scaleX(.04); }
  62%  { transform: scaleX(.78); }
  100% { transform: scaleX(1); }
}

#v1-ilerleme {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2147483000;
  transform-origin: 0 50%;
  background: #8f3c08;
  animation: v1-cizgi 900ms cubic-bezier(.22, .61, .36, 1) forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  #v1-ilerleme { animation: none; transform: scaleX(1); }
}

/* Yayınevi tanıtımı: uzun düğme metni sabit kartın dışına çıkmamalı. */
.ck-publisher-cta {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  height: auto !important;
  min-height: 40px;
  text-align: center;
}

/* Kitap kartında fiyat ve satın alma düğmesi dar sütunda alt alta geçebilir. */
article div[style*="display: flex"][style*="align-items: center"][style*="margin-top: auto"] {
  flex-wrap: wrap;
  row-gap: 10px;
}
article button.kbtn {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Keşif sayfasının üçlü seçim düğmesi 320 px ekrana sığsın. */
.ck-discovery-modes {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 360px) {
  .ck-discovery-modes button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 0;
  }
}
.ck-quantity-input{width:38px;min-width:0!important;max-width:42px;border:0;background:transparent;border-radius:2px;padding:5px 2px;font:inherit;outline-offset:2px;box-sizing:border-box}
.ck-quantity-input:focus{outline:2px solid #8f3c08;background:#fffefd}