/* site.css — Portföy sitesi görünümü */

html { height: 100%; overscroll-behavior: none; }
body { height: 100%; overflow: hidden; background: #0B0B0B; }

/* ----------------------------------------------------------------- boot */
.boot {
  position: fixed; inset: 0; z-index: 200; background: #0B0B0B;
  display: grid; place-items: center; transition: opacity .5s ease, visibility .5s;
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot-in { width: 148px; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.boot-bar { display: block; width: 40%; height: 100%; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ------------------------------------------------------- kitap / sahneler */
.book {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
  scrollbar-width: none;
}
.book::-webkit-scrollbar { width: 0; height: 0; }

.scene {
  height: 100vh; height: 100svh;
  position: relative;
  /* NOT: eskiden "display:grid; place-items:center" kullanılıyordu. Dikey
     (9:16) paftalar 100vh'lik sahneden BOYCA daha büyük olduğu için tarayıcı
     Grid'in "safe center" davranışına düşüp öğeyi ÜSTE yaslıyordu (taşan
     içerik kaybolmasın diye) — sonuç: pafta ortalanmak yerine üstten
     hizalanıp altı ekranın çok dışına taşıyordu. Ortalamayı artık aşağıda
     layoutAll() JS'te, page-host'un DOĞAL (ölçeksiz) boyutuna göre elle
     hesaplayıp left/top ile veriyoruz — bu hep simetrik ortalar ve --s zaten
     "sığdır" (contain-fit) hesaplandığı için taşma da olmaz. */
}

.page-host {
  position: absolute;
  width: 1280px; height: 720px;
  /* --zf: pafta zoom çarpanı (1 = normal). translate() en dışta olduğu için
     piksel cinsinden pan (--tx/--ty) her zaman ekran uzayında kalır, zoom
     seviyesinden etkilenmez. */
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(calc(var(--s, 1) * var(--zf, 1) * var(--fx, 1)));
  opacity: var(--o, 1);
  transform-origin: center center;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
}
.page-host.zoomable {
  cursor: zoom-in;
  /* Mobilde tarayıcının KENDİ çift-dokunma / pinch zoom'u, bizim JS
     zoom'umuzla aynı anda devreye girip görseli rastgele kırpıyordu.
     "manipulation" çift-dokunma zoom'unu kapatır (tek parmak kaydırma ve
     pinch-zoom serbest kalır) — dblclick olayı artık düzgün ve tek başına
     bize ulaşır. */
  touch-action: manipulation;
}
.page-host.zoomed { cursor: grab; }
.page-host.zoomed.panning { cursor: grabbing; }
/* Pafta barları zoom'da gizlenir (panelden "Hide bars on zoom" ile kapatılabilir
   — o zaman body'de bu data attribute hiç set edilmez, bkz. site.js). */
body[data-bar-hide-zoom="1"] .page-host.zoomed .blk-bar {
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}

.blk { position: absolute; }
.blk-text { margin: 0; pointer-events: none; }
.blk-img img { -webkit-user-drag: none; user-select: none; }
/* SVG paftalar/CV'ler: gömülü SVG'nin metni seçilip kopyalanabilir (bkz. renderer.js inlineSvg). */
.blk-svg .svg-host { width: 100%; height: 100%; }
.blk-svg.svg-live { -webkit-user-select: text; user-select: text; }
/* Bilgiler sayfası: tüm yazılar seçilip kopyalanabilir. */
.scene[data-scene="info"] .blk-text, .scene[data-scene="info"] .blk-textrow {
  pointer-events: auto; -webkit-user-select: text; user-select: text; cursor: text;
}
/* Bilgiler sayfası bağlantı butonları (yalnızca site; PDF'te karekodlar). */
.blk-btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.blk-btn .btn-a { transition: transform .2s ease; }
.blk-btn:hover, .blk-btn:focus-visible { background: var(--bi) !important; color: var(--bp) !important; border-color: var(--bi) !important; outline: none; }
.blk-btn:hover .btn-a, .blk-btn:focus-visible .btn-a { transform: translate(2px, -2px); }
.blk-btn:active { transform: scale(.98); }
.blk-img { transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease; will-change: transform; }
.blk-outline { pointer-events: none; transition: border-color .3s ease, opacity .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
/* Katalog kartı köşe yuvarlaklığı — panelden (Katalog → C) ayarlanır, site.js
   --cat-radius değişkenini uygular. Yalnızca katalog sahnesinde (paftalarda
   değil); PDF'i hiç etkilemez (pdf-lib rect'lerinde köşe yuvarlama yok). */
.scene[data-scene="catalog"] .blk-img { border-radius: var(--cat-radius, 6px); overflow: hidden; }
.scene[data-scene="catalog"] .blk-outline { border-radius: var(--cat-radius, 6px); }
.blk-link {
  display: block; cursor: pointer; text-decoration: none;
  transition: box-shadow .3s ease;
}
.blk-link:active { transform: scale(.98); transition: transform .12s ease; }

/* Katalog minyatürü hover stili — panelden (Ayarlar → Katalog) seçilir,
   site.js `document.body.dataset.catalogHover` ile uygular. Yalnızca
   canlı sitede (PDF'i hiç etkilemez — pdf.js bu class'ları hiç bilmiyor). */
body[data-catalog-hover="zoom"] .blk-img.hot { transform: scale(1.028); filter: saturate(1.06); }
body[data-catalog-hover="zoom"] .blk-outline.hot { border-color: var(--accent) !important; opacity: .9 !important; }

body[data-catalog-hover="darken"] .blk-img.hot { filter: brightness(.62) saturate(1.05); }
body[data-catalog-hover="darken"] .blk-outline.hot { border-color: var(--accent) !important; opacity: .9 !important; }
body[data-catalog-hover="darken"] .blk-text.hot { color: #fff !important; }

body[data-catalog-hover="lift"] .blk-img.hot,
body[data-catalog-hover="lift"] .blk-outline.hot {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -14px rgba(0,0,0,.55);
}
body[data-catalog-hover="lift"] .blk-outline.hot { border-color: var(--accent) !important; }

/* "none" (ve tanınmayan değer): hiçbir kural eşleşmez, dolayısıyla hiçbir
   görsel değişiklik olmaz — bilinçli olarak boş bırakıldı. */
.blk-link::after {
  content: attr(data-num); position: absolute; right: 10px; bottom: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .14em; color: #fff; opacity: 0; transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease; pointer-events: none;
  text-transform: uppercase;
}
.blk-link:hover::after { opacity: 0; }

.blk-tool {
  border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .02em; line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.blk-tool:hover { transform: scale(1.18); filter: brightness(1.12); box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 5; }

.blk-qr .qr-label {
  margin-top: 5px; text-align: center; color: var(--ink); opacity: .55;
  font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------- tasarım (pafta) katmanı */
.design {
  position: fixed; inset: 0; z-index: 40; background: #0B0B0B;
  opacity: 0; visibility: hidden; transition: opacity .38s ease, visibility .38s;
  display: grid; grid-template-rows: 1fr auto;
}
.design.open { opacity: 1; visibility: visible; }
.design-stage { display: grid; place-items: center; overflow: hidden; }
.design .page-host { box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }

.design-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 22px 16px;
}
.design-meta { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.d-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.design-nav { display: flex; align-items: center; gap: 10px; }
.d-counter {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 11.5px;
  letter-spacing: .14em; color: rgba(255,255,255,.62); min-width: 58px; text-align: center;
}
.d-dots { display: flex; gap: 6px; justify-content: center; padding-bottom: 16px; }
.d-dots i {
  width: 18px; height: 2px; background: rgba(255,255,255,.18); display: block; cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.d-dots i.on { background: var(--accent); width: 30px; }

.chrome-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: 7px 13px; font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.chrome-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.chrome-btn:active { transform: scale(.96); }
.chrome-btn.icon { padding: 7px; border-radius: 999px; }

/* --------------------------------- kenar-ortası düğmeler (storyboard, 2026-09) */
/* Her zaman görünür (opacity her zaman 1) — eski hover-hotzone sistemi
   tamamen kaldırıldı. Tıklanınca kendi paneli açılır/kapanır (site.js
   wireSidePanels()); hover'da yalnızca kenarlık parlar. */
.rail {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 61;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 6px; cursor: pointer;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.15);
  color: #fff; transition: border-color .2s ease, background .2s ease;
}
.rail-left { left: 8px; }
.rail-right { right: 8px; }
.rail:hover, .rail[aria-expanded="true"] { border-color: rgba(255,255,255,.5); }
.rail-txt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Zoom'dayken (pafta yakınlaştırılmışken) iki düğme de gizlenir. */
body.zoom-active .rail, body.zoom-active #side-panel-overlay { display: none; }

/* Görünmez tıkla-kapat katmanı — bir panel açıkken sahnenin geri kalanına
   tıklamak paneli kapatır; pafta kaydırma/tuşları etkilenmez. */
.side-panel-overlay { position: fixed; inset: 0; z-index: 59; display: none; }
.side-panel-overlay.show { display: block; }

/* Sol panel — KATALOG. Sol kenardan içeri kayarak açılır. Açık gri +
   blur (altındaki pafta hafifçe görünsün diye) — sağdaki BİLGİLER kartından
   kasıtlı olarak farklı (orada koyu blur kullanılıyor, storyboard'a göre). */
.home-menu {
  position: fixed; z-index: 61; left: 8px; top: 24px; bottom: 40px;
  width: 200px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-100%);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility .2s;
}
.home-menu.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.home-menu-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  background: #0a0a0a; color: #fff; padding: 10px 12px; border-radius: 8px 8px 0 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.home-menu-list {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(19,19,19,.35) transparent;
}
.home-menu-list::-webkit-scrollbar { width: 4px; }
.home-menu-list::-webkit-scrollbar-thumb { background: rgba(19,19,19,.35); border-radius: 4px; }
.home-menu-cat {
  padding: 8px 4px 2px; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(19,19,19,.5);
  border-top: 1px solid rgba(19,19,19,.1);
}
.home-menu-cat:first-child { border-top: 0; padding-top: 2px; }
.home-menu-item {
  display: flex; align-items: center; width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer; border: 0; text-align: left;
  background: #1e1e1e; color: rgba(255,255,255,.86);
  border-radius: 8px; height: 34px; padding: 0 10px; flex: 0 0 auto;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
.home-menu-item .n {
  color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: .02em; margin-right: 9px; flex: 0 0 auto;
}
.home-menu-item span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-menu-item.active { background: color-mix(in srgb, var(--accent) 55%, #1e1e1e); color: #fff; }
@media (hover: hover) {
  .home-menu-item:hover, .home-menu-item:focus-visible { background: #f2f2f2; color: #131313; outline: none; }
  .home-menu-item:hover .n, .home-menu-item:focus-visible .n { color: var(--accent); }
}
.home-menu-info {
  margin: 2px 0 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  background: #d9d9d9; color: #131313; border-radius: 8px; height: 34px; padding: 0 10px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px; cursor: pointer;
}

/* Sağ kart — BİLGİLER / iletişim özeti. Kompakt, tam yükseklik değil,
   sağ düğme hizasında dikey ortalı; koyu yarı saydam + blur. */
.info-card {
  position: fixed; z-index: 61; right: 8px; top: 50%; transform: translateY(-50%) translateX(6px);
  width: 200px; max-width: 84vw; border-radius: 10px; padding: 16px 16px 14px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); color: #fff;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility .2s, background .2s ease;
}
.info-card.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.info-card:hover { background: rgba(0,0,0,.75); }
.info-card-head { opacity: .85; margin-bottom: 8px; }
.info-card-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.info-card-row {
  display: block; font-family: 'Inter', sans-serif; font-size: 11.5px; color: rgba(255,255,255,.82);
  text-decoration: none; margin-bottom: 4px; word-break: break-word;
}
.info-card-row:hover { color: #fff; text-decoration: underline; }
.info-card-social { display: flex; gap: 8px; margin: 10px 0 4px; }
.info-card-social a {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff; transition: background .16s ease;
}
.info-card-social a:hover { background: var(--accent); }
.info-card-more {
  display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.6); text-decoration: none;
}
.info-card-more:hover { color: #fff; }
.info-card-copied {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  background: #131313; color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 6px;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.info-card-copied.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rail, .home-menu, .info-card { transition: none !important; }
}

/* --------------------------------------------------------------- araç kartı */
.tool-pop {
  position: fixed; z-index: 80; width: 262px; padding: 14px 15px 15px;
  background: rgba(19,19,19,.95); color: #F2F0EC; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.tool-pop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tool-pop-head { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13.5px; }
.tool-tile {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 600; color: #fff;
  background: #333; overflow: hidden; flex: 0 0 auto;
}
.tool-tile img { width: 100%; height: 100%; object-fit: contain; }
.tool-cat {
  margin-top: 5px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.tool-desc { margin-top: 8px; font-size: 12px; line-height: 1.5; color: rgba(242,240,236,.72); }

/* -------------------------------------------------------------------- HUD */
.hud {
  position: fixed; z-index: 62; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 16px; pointer-events: none;
}
.hud-left { display: flex; align-items: baseline; gap: 10px; }
#hud-page {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 11px;
  letter-spacing: .16em; color: rgba(255,255,255,.5);
}
.hud-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.hud-right { pointer-events: auto; }

.pdf-menu {
  position: fixed; z-index: 70; right: 20px; bottom: 52px; width: 268px;
  background: rgba(19,19,19,.95); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px; backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.pdf-menu.show { opacity: 1; visibility: visible; transform: none; }
.pdf-menu-title { color: rgba(242,240,236,.45); margin-bottom: 8px; }
.pdf-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 8px; color: rgba(242,240,236,.9);
  text-decoration: none; font-size: 12.5px; transition: background .18s ease;
}
.pdf-item:hover { background: rgba(255,255,255,.09); }
.pdf-item em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pdf-item.is-hidden, .pdf-group.is-hidden { display: none; }
.pdf-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pdf-menu-head .pdf-menu-title { margin-bottom: 0; }
.pdf-res { display: inline-flex; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 2px; }
.pdf-res button {
  border: 0; background: transparent; color: rgba(242,240,236,.6); cursor: pointer;
  font: 600 10px/1 'Inter', sans-serif; letter-spacing: .1em; padding: 5px 9px; border-radius: 999px;
}
.pdf-res button.on { background: rgba(255,255,255,.9); color: #131313; }
.pdf-group { margin-top: 6px; }
.pdf-group + .pdf-group { border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; }
.pdf-group-title { padding: 4px 10px 2px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,240,236,.42); }
.pdf-note {
  margin-top: 8px; padding: 9px 10px 2px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 10.5px; line-height: 1.5; color: rgba(242,240,236,.42);
}

.zoom-exit {
  position: fixed; z-index: 90; top: 18px; left: 50%; transform: translateX(-50%) translateY(-140%);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(19,19,19,.92); color: #F2F0EC;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 9px 16px 9px 13px; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.zoom-exit.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.zoom-exit:hover { background: var(--accent); border-color: transparent; }

.progress { position: fixed; z-index: 63; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.07); }
.progress span { display: block; width: 100%; background: var(--accent); height: 0%; transition: height .25s ease; }

/* ------------------------------------------------------------------ video */
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(11,11,11,.42); color: #fff; display: grid; place-items: center;
  cursor: pointer; backdrop-filter: blur(3px);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease;
}
.video-play svg { transform: translateX(2px); }
.video-play:hover { background: var(--accent); border-color: transparent; transform: translate(-50%, -50%) scale(1.08); }

.video-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(6,6,6,.94);
  display: grid; place-items: center; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.video-lightbox.show { opacity: 1; visibility: visible; }
.video-lightbox-frame { width: min(1120px, 92vw); aspect-ratio: 16 / 9; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }
.video-lightbox-frame iframe { width: 100%; height: 100%; border: 0; background: #000; }
.video-lightbox-close {
  position: fixed; top: 18px; right: 20px; z-index: 301;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(19,19,19,.85); color: #F2F0EC; display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.video-lightbox-close:hover { background: var(--accent); border-color: transparent; }

/* ------------------------------------------------ alt pafta şeridi (2026-09-17) */
/* Her sahne yatay bir şerit taşır: [üst pafta, alt pafta 1, 2, …]. Şerit JS ile
   scrollLeft üzerinden kaydırılır (site.js setSub) — tarayıcı araması (Ctrl+F)
   da alt paftadaki metne kaydırabilsin diye transform değil gerçek kaydırma. */
.track {
  position: absolute; inset: 0; display: flex; overflow: hidden;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; }

/* Düğme katmanı: paftanın ekrandaki kutusu (site.js layoutPlateUi) — düğmeler
   ölçeklenmez; mobilde pafta döndürülünce katman da döner. */
.plate-ui {
  position: absolute; z-index: 2; pointer-events: none;
  transform: rotate(var(--rot, 0deg)) scale(var(--fx, 1));
  transform-origin: center center; opacity: var(--o, 1);
}
body.zoom-active .plate-ui { opacity: 0; pointer-events: none; }
body.zoom-active .plate-ui .pbtn { pointer-events: none; }
.pbtn {
  position: absolute; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6em; white-space: nowrap;
  font: 600 calc(11px * var(--sz, 1)) / 1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: .7em 1.1em; border-radius: calc(4px * var(--sz, 1));
  background: var(--bg); color: var(--fg); opacity: var(--op, .92);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.pbtn:hover, .pbtn:focus-visible { opacity: 1; transform: scale(1.05); box-shadow: 0 12px 28px -10px rgba(0,0,0,.7); outline: none; }
.pbtn:active { transform: scale(.97); }
/* Offset X: + paftanın ortasına doğru (sağdakiler aynalı; ortalıda sağa). Y: + aşağı. */
.pbtn-x { --bg: var(--xb-bg, #fff); --fg: var(--xb-fg, #131313); --op: var(--xb-op, .92); --sz: var(--xb-size, 1); translate: var(--xb-dx, 0px) var(--xb-dy, 0px); }
.pbtn-x.al-right { translate: calc(-1 * var(--xb-dx, 0px)) var(--xb-dy, 0px); }
.pbtn-nav { --bg: var(--xn-bg, #fff); --fg: var(--xn-fg, #131313); --op: var(--xn-op, .92); --sz: var(--xn-size, 1); translate: var(--xn-dx, 0px) var(--xn-dy, 0px); }
.pbtn-next { translate: calc(-1 * var(--xn-dx, 0px)) var(--xn-dy, 0px); }
.pb-arr { font-size: 1.25em; line-height: .8; }
/* Akış düğmeleri (üstte önceki, altta sonraki sayfa) — koyu hap; üzerine
   gelince belirginleşir, basılınca renkler yer değiştirir (referans tasarım). */
.pbtn-flow {
  --bg: var(--xf-bg, #1C1C1C); --fg: var(--xf-fg, #fff); --op: var(--xf-op, .7); --sz: var(--xf-size, 1);
  left: 50%; translate: -50% var(--xf-dy, 0px);
  border-color: rgba(255,255,255,.14); box-shadow: none; font-weight: 500;
  /* Sayfa adları olduğu gibi (büyük harfe çevrilmez) — referans tasarım: "Resume", "Contents 02/03" */
  text-transform: none; letter-spacing: .02em;
}
.pbtn-flow:hover, .pbtn-flow:focus-visible { border-color: rgba(255,255,255,.5); box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
.pbtn-flow:active { background: var(--fg); color: var(--bg); border-color: transparent; }
.pbtn.pbtn-up.below { bottom: calc(100% + 10px); top: auto; }
.pbtn.pbtn-down.below { top: calc(100% + 10px); }
.pbtn.pbtn-up.inside { top: calc(var(--st, 0px) + 12px); bottom: auto; }
.pbtn.pbtn-down.inside { bottom: calc(var(--sb, 0px) + 12px); }
.pb-up::before { content: '\2191'; }
.pb-down::before { content: '\2193'; }
.pb-next::before { content: '\2192'; }
.pb-prev::before { content: '\2190'; }
/* Döndürülmüş mobil görünümde şerit kullanıcıya göre dikey akar (sonraki alt pafta yukarıdan gelir). */
.plate-ui[data-rot="1"] .pb-next::before { content: '\2191'; }
.plate-ui[data-rot="1"] .pb-prev::before { content: '\2193'; }
/* below: paftanın hemen altında, kenarlarına hizalı (referans tasarım) */
.pbtn.below { top: calc(100% + 10px); }
.pbtn.below.pbtn-prev, .pbtn.below.al-left { left: 0; }
.pbtn.below.pbtn-next, .pbtn.below.al-right { right: 0; }
/* inside: pafta içinde, barların/etiketlerin kapladığı payların içinde */
.pbtn.inside { bottom: calc(var(--sb, 0px) + 12px); }
.pbtn.inside.pbtn-prev, .pbtn.inside.al-left { left: calc(var(--sl, 0px) + 12px); }
.pbtn.inside.pbtn-next, .pbtn.inside.al-right { right: calc(var(--sr, 0px) + 12px); }
.pbtn-x.al-center { left: 50%; translate: calc(-50% + var(--xb-dx, 0px)) var(--xb-dy, 0px); }
@media (prefers-reduced-motion: reduce) { .pbtn { transition: none; } }

/* --------------------------------------------------------------- dokunmatik */
@media (hover: none), (max-width: 820px) {
  /* Düğmeler aynı yerde, ama görünen kutu 40x40'a büyür (dokunma hedefi
     ≥44px olacak şekilde padding ile) + paftanın üstüne binebileceği için
     yarı saydam koyu zemin okunabilirliği garanti eder. */
  .rail { width: 40px; height: 40px; padding: 8px; background: rgba(0,0,0,.55); }
  .home-menu, .info-card { width: min(78vw, 300px); }
  /* NOT: env(safe-area-inset-*, 8px) YANLIŞ — değişken tanımlıysa (çoğu
     Android/çentiksiz cihazda 0 olarak TANIMLIDIR, tanımsız değil) fallback
     hiç devreye girmiyor, panel ekran kenarına yapışık kalıyordu. calc() ile
     her zaman en az 8px garanti edilir. */
  .home-menu { top: calc(0px + env(safe-area-inset-top, 0px)); bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
  .info-card { right: calc(8px + env(safe-area-inset-right, 0px)); }
  .home-menu-item, .home-menu-info { min-height: 44px; }
  .pbtn { min-height: 34px; }
  .hud { padding-bottom: 12px; }
  .d-dots { padding-bottom: 10px; }
}

/* ------------------------------------------ mobil yön düzeni (2026-09-14) */
/* --rot: dikey tutulan telefonda yatay paftalar site.js layoutAll() içinde 90°
   döndürülür (translate en dışta kaldığı için zoom/pan ekran uzayında çalışmaya
   devam eder). Bu sınıfları yalnızca layoutAll() koyar, masaüstünde hiç yoktur. */
/* Dikey mobil: yan düğmeler dikey ortadan (paftanın üstüne biniyordu) üstte
   ayrılan 52px'lik şeride, köşelere taşınır (site.js topReserve ile uyumlu). */
body.mob-portrait .rail { top: calc(6px + env(safe-area-inset-top, 0px)); transform: none; }
/* Yatay mobil: HUD şeridi 40px'e iner (site.js hudReserve ile uyumlu). */
body.mob-landscape .hud { padding-bottom: 6px; }

/* Dikey mobilde o an 90° döndürülmüş bir paftadayken katalog paneli ve bilgi
   kartı da aynı yönde döndürülür (kullanıcı isteği, 2026-09-14): telefon yan
   çevrildiğinde pafta ve menüler aynı yönde okunur. body.rot-view sınıfını
   yalnızca site.js koyar (dikey sayfalarda, tablette, masaüstünde yoktur).
   rotate(90deg) sonrası yerel eksenler "yan çevrilmiş ekran"la aynıdır:
   yerel sol = ekranın üstü, yerel üst = ekranın sağı. */
body.rot-view .home-menu {
  transform-origin: 0 0;
  left: calc(100vw - 8px); right: auto;
  top: calc(52px + env(safe-area-inset-top, 0px)); bottom: auto;
  /* yerel genişlik (yan ekranda panel genişliği) -> ekranda yükseklik;
     yerel yükseklik (yan ekranda panel boyu) -> ekranda genişlik */
  width: min(300px, calc(100vh - 124px));
  width: min(300px, calc(100svh - 124px));
  height: calc(100vw - 16px);
  transform: rotate(90deg) translateX(-100%);
}
body.rot-view .home-menu.show { transform: rotate(90deg); }

/* Bilgi kartı yan ekranda sağda durur -> dikey tutulan telefonda altta, ortada
   (HUD şeridinin üstünde). */
body.rot-view .info-card {
  transform-origin: 50% 50%;
  right: auto; left: 50%;
  width: min(260px, calc(100vh - 124px));
  width: min(260px, calc(100svh - 124px));
  max-width: none;
  top: calc(100vh - 72px - min(260px, calc(100vh - 124px)) / 2);
  top: calc(100svh - 72px - min(260px, calc(100svh - 124px)) / 2);
  transform: translate(-50%, -50%) rotate(90deg) translateX(6px);
}
body.rot-view .info-card.show { transform: translate(-50%, -50%) rotate(90deg); }

/* ------------------------------------ sol panel: filtre / mini katalog (2026-09-15) */
/* Content (katalog) sayfalarında sol düğme + panel FİLTRE olur, diğer sayfalarda
   MİNİ KATALOG — ikisi de aynı #home-menu kabuğunu ve görsel dilini kullanır
   (açık blur zemin, koyu satır kartları, siyah başlık). Bkz. site.js syncMenuMode. */
#book[data-home-ok="0"] ~ #rail-home { display: none; }
.rail-badge {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff; pointer-events: none;
  font: 700 9.5px/16px 'Inter', sans-serif; text-align: center; box-shadow: 0 0 0 2px #0b0b0b;
}
.rail-badge[hidden] { display: none; }
.home-menu-icon { display: inline-flex; }
.home-menu-note { padding: 2px 4px 2px; font-size: 11px; font-weight: 500; line-height: 1.4; color: rgba(19,19,19,.66); }
.home-menu-back { gap: 8px; background: #d9d9d9; color: #131313; font-weight: 600; font-size: 12px; }
.home-menu-cat .sel { float: right; color: var(--accent); letter-spacing: .08em; }
.filter-opt { gap: 9px; }
.filter-opt i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.filter-opt .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-opt em { flex: 0 0 auto; font-style: normal; font-size: 11px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.filter-opt .ck { flex: 0 0 auto; width: 14px; height: 14px; margin-left: 2px; display: none; }
.home-menu-item.filter-opt.active { background: #f2f2f2; color: #131313; }
.filter-opt.active em { color: rgba(19,19,19,.5); }
.filter-opt.active .ck { display: block; color: var(--accent); }
.filter-opt.active i { box-shadow: 0 0 0 2px rgba(19,19,19,.14); }
.filter-opt:disabled { opacity: .36; cursor: default; }
.home-menu-info:disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  .home-menu-back:hover { background: #fff; }
  .filter-opt:disabled:hover { background: #1e1e1e; color: rgba(255,255,255,.86); }
  .home-menu-info:disabled:hover { background: #d9d9d9; }
}
@media (hover: hover) and (min-width: 821px) { .home-menu.is-filter { width: 232px; } }