/* ============================================================
   E-KATALOG — 3B sayfa çevirmeli görüntüleyici
   ============================================================ */

.ekatalog{
  --sayfa-golge: 0 24px 60px -20px rgba(0,0,0,.55);
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #33343f 0%, #23242e 100%);
  padding:clamp(20px,3vw,40px) 0 0;
  overflow:hidden;
  user-select:none;
}

/* --- Sahne --- */
.ek__sahne{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  perspective:2600px;
  perspective-origin:50% 45%;
  padding:0 clamp(12px,5vw,80px);
  min-height:clamp(320px,58vh,660px);
  touch-action:pan-y;
}

.ek__kitap{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* Kitabın ortasındaki cilt gölgesi */
.ek__kitap::after{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:44px; transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.26) 42%, rgba(0,0,0,.42) 50%,
    rgba(0,0,0,.26) 58%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:60;
}
.ekatalog[data-mod="tek"] .ek__kitap::after{display:none}

/* Kitabın altındaki zemin gölgesi */
.ek__golge{
  position:absolute; left:50%; bottom:-18px;
  width:86%; height:34px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(6px); pointer-events:none;
}

/* --- Yapraklar --- */
.yaprak{
  position:absolute; top:0; left:50%;
  transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform .85s cubic-bezier(.42,.02,.28,1);
  will-change:transform;
}
.yaprak.cevrildi{transform:rotateY(-180deg)}

.yuz{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--sayfa-golge);
}
.yuz--arka{transform:rotateY(180deg)}
.yuz canvas{display:block; width:100%; height:100%}

/* Sayfa kağıt hissi: cilde doğru koyulaşan gradyan + hafif doku */
.yuz::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(255,255,255,.10));
}
.yuz--arka::after{
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.16));
}

/* Çevrilirken sayfanın üstünden geçen parlama */
.yaprak .parlama{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  transition:opacity .42s ease;
  z-index:5;
}
.yaprak.doner .parlama{opacity:.65}

/* Boş sayfa (yükleniyor) */
.yuz.bekliyor{
  background:
    linear-gradient(100deg, #f4f1ea 30%, #ffffff 50%, #f4f1ea 70%) 0 0/220% 100% #f4f1ea;
  animation:parla 1.4s linear infinite;
}
@keyframes parla{to{background-position:-220% 0}}

/* Ölçü değişiminde geçişleri kapat (zıplamayı önler) */
.ek__kitap.anlik, .ek__kitap.anlik .yaprak{transition:none !important}

/* --- Tek sayfa (mobil) kipi ---
   Yaprak arka yüzü gösterilirken translateX ile aynı yuvada kalır;
   böylece hiçbir sayfa atlanmaz ve çevirme hareketi korunur. */
.ekatalog[data-mod="tek"] .yaprak{
  left:0;
  transition:transform .7s cubic-bezier(.42,.02,.28,1), opacity .3s ease;
}
.ekatalog[data-mod="tek"] .yaprak.acik{transform:translateX(100%) rotateY(-180deg)}
.ekatalog[data-mod="tek"] .yaprak.gizli{opacity:0; pointer-events:none}

/* --- Oklar --- */
.ek__ok{
  position:absolute; top:50%; z-index:70;
  width:52px; height:52px; border-radius:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; cursor:pointer;
  display:grid; place-items:center;
  backdrop-filter:blur(8px);
  transition:background .25s ease, transform .25s ease, opacity .25s ease;
}
.ek__ok:hover{background:var(--turuncu); border-color:var(--turuncu); transform:translateY(-50%) scale(1.08)}
.ek__ok:disabled{opacity:.25; cursor:default; transform:translateY(-50%)}
.ek__ok--sol{left:clamp(6px,2vw,26px)}
.ek__ok--sag{right:clamp(6px,2vw,26px)}
@media (max-width:640px){ .ek__ok{width:44px;height:44px} }

/* --- Alt kumanda çubuğu --- */
.ek__bar{
  position:relative; z-index:70;
  margin-top:clamp(18px,2.5vw,30px);
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:12px clamp(12px,3vw,24px) clamp(16px,2.5vw,26px);
}
.ek__dugme{
  height:42px; min-width:42px; padding:0 14px;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px; color:#fff; cursor:pointer;
  font-family:"Syne",sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.ek__dugme:hover{background:var(--turuncu); border-color:var(--turuncu)}
.ek__dugme[aria-pressed="true"]{background:var(--turuncu); border-color:var(--turuncu)}
.ek__dugme:disabled{opacity:.3; cursor:default; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18)}

.ek__sayac{
  color:rgba(255,255,255,.9);
  font-family:"Syne",sans-serif; font-size:.85rem; font-weight:600;
  letter-spacing:.1em;
  padding:0 12px; min-width:104px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.ek__sayac input{
  width:44px; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff; font:inherit; text-align:center; padding:2px 0;
}
.ek__sayac input:focus{outline:0; border-bottom-color:var(--turuncu)}

/* --- Küçük resimler --- */
.ek__kucukler{
  position:absolute; left:0; right:0; bottom:0; z-index:80;
  background:rgba(20,21,28,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:16px;
  display:flex; gap:12px; overflow-x:auto;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.ek__kucukler.acik{transform:translateY(0)}
.ek__kucukler button{
  flex:0 0 auto; padding:0; background:none; cursor:pointer;
  border:2px solid transparent; border-radius:3px; overflow:hidden;
  line-height:0; transition:border-color .2s ease, transform .2s ease;
}
.ek__kucukler button:hover{transform:translateY(-3px)}
.ek__kucukler button[aria-current="true"]{border-color:var(--turuncu)}
.ek__kucukler canvas{display:block; width:108px; height:auto; background:#fff}
.ek__kucukler span{
  display:block; text-align:center; font-size:.7rem; color:rgba(255,255,255,.55);
  padding:4px 0 0; font-family:"Syne",sans-serif;
}

/* --- Yükleniyor --- */
.ek__yukleniyor{
  position:absolute; inset:0; z-index:90;
  display:grid; place-items:center;
  background:rgba(25,26,34,.92);
  color:#fff; text-align:center;
  transition:opacity .4s ease;
}
.ek__yukleniyor.bitti{opacity:0; pointer-events:none}
/* Hata durumunda katman görünür kalır ama altındaki düğmeleri engellemez;
   yalnızca mesajın içindeki bağlantılar tıklanabilir olur. */
.ek__yukleniyor.hatali{pointer-events:none}
.ek__yukleniyor.hatali .ek__hata{pointer-events:auto}
.ek__yukleniyor b{
  display:block; font-family:"Syne",sans-serif; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px;
  color:rgba(255,255,255,.75);
}
.ek__cubuk{width:min(260px,60vw); height:3px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden}
.ek__cubuk i{display:block; height:100%; width:0; background:var(--turuncu); transition:width .25s ease}
.ek__hata{color:#ffb4a2; max-width:44ch; line-height:1.7; font-size:.95rem}
.ek__hata a{color:var(--turuncu); text-decoration:underline}

/* --- Tam ekran --- */
.ekatalog:fullscreen{padding-top:24px; display:flex; flex-direction:column; justify-content:center}
.ekatalog:fullscreen .ek__sahne{flex:1; min-height:0}

/* Klavye ipucu */
.ek__ipucu{
  text-align:center; color:rgba(255,255,255,.4);
  font-size:.78rem; letter-spacing:.06em; padding:0 16px 22px;
}
/* --- Mobil düzen --- */
@media (max-width:819px){
  .ek__sahne{ min-height:0; padding:10px 12px; }
  .ek__bar{ margin-top:14px; gap:6px; padding-bottom:12px; }
  .ek__dugme{ height:38px; min-width:38px; padding:0 11px; font-size:.7rem; }
  .ek__sayac{ min-width:88px; font-size:.78rem; padding:0 4px; }
  .ek__kucukler canvas{ width:86px; }
  .ek__ipucu{ padding:0 16px 20px; font-size:.75rem; }
}
.ek__ipucu .masaustu{display:inline}
.ek__ipucu .mobil{display:none}
@media (max-width:819px){
  .ek__ipucu .masaustu{display:none}
  .ek__ipucu .mobil{display:inline}
}

/* Dosyadan (file://) açıldığında tarayıcının kendi PDF görüntüleyicisi */
.ek__gomulu{
  width:100%; height:min(72vh, 680px);
  border:0; border-radius:4px; background:#fff;
  box-shadow:var(--sayfa-golge);
}
.ekatalog.ek--yerel .ek__ok,
.ekatalog.ek--yerel .ek__sayac,
.ekatalog.ek--yerel [data-is="ilk"],
.ekatalog.ek--yerel [data-is="son"],
.ekatalog.ek--yerel [data-is="kucukler"],
.ekatalog.ek--yerel .ek__kucukler{display:none}
@media (max-width:819px){ .ek__gomulu{height:min(64vh, 460px)} }