/* isler.css · İşler: trader masası (kurucu 2 Kas 2026 seçti). Kaynak: prototip/isler-monitor/a.html + ortak.css; görünüş birebir.
   Tüm seçiciler masa- önekli ya da #work içinde: sayfanın geri kalanına sızmaz. Renk ve yazı boyu yalnız tokens.css'ten (--masa-*).
   Varsayılan görünüm JS kapalı listesidir; sahne yalnız isler.js kurunca (html[data-isler]) devreye girer. */

/* ── Başlık + konsept notu: iki görünümde de aynı metin ── */
#work {
  padding-block: var(--space-6) var(--space-9);
  border-bottom: var(--space-0);
}

.masa-bas {
  padding: var(--space-4) var(--masa-konsept-pay);
}

.masa-bas :is(h2, p),
.masa-alt :is(h3, p),
.masa-liste :is(h3, p) {
  margin: var(--space-0);
  padding: var(--space-0);
}

#work .masa-baslik {
  color: var(--arka-yuz-metin);
  font-size: var(--masa-yazi-baslik);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-dunya-baslik);
}

.masa-konsept {
  color: var(--arka-yuz-sonus);
  font-size: var(--masa-yazi-etiket);
  line-height: var(--masa-satir-etiket);
}

/* ── Panel ve liste metni ── */
#work .masa-ad {
  color: var(--arka-yuz-metin);
  font-size: var(--masa-yazi-ad);
  font-weight: var(--weight-heavy);
  line-height: var(--masa-satir-ad);
}

.masa-cumle {
  color: var(--arka-yuz-metin);
  font-size: var(--masa-yazi-cumle);
  line-height: var(--masa-satir-cumle);
}

.masa-etiket {
  color: var(--arka-yuz-sonus);
  font-size: var(--masa-yazi-etiket);
  line-height: var(--masa-satir-etiket);
}

.masa-ek {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--gold);
  font-size: var(--masa-yazi-etiket);
  line-height: var(--masa-satir-etiket);
  white-space: nowrap;
}

.masa-ac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--masa-dugme-bosluk);
  min-height: var(--masa-dugme-boy);
  padding: var(--space-0) var(--space-5);
  border-radius: var(--masa-dugme-yaricap);
  background: var(--arka-yuz-metin);
  color: var(--murekkep);
  font-size: var(--masa-yazi-dugme);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-dunya-baslik);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease;
}

.masa-ac:hover {
  background: var(--gold);
}

/* Dokunma alanı 44 px, panelde bir satır yer kaplar (eksi pay): sahne bu bağlantı yüzünden küçülmez. */
.masa-bag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-min-height);
  margin-block: calc((var(--control-min-height) - 1.3em) / -2);
  color: var(--arka-yuz-metin);
  font-size: var(--masa-yazi-etiket);
  line-height: var(--masa-satir-etiket);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.25em;
}

/* ── JS kapalı: düz liste, her vitrinin bağlantısı okunur ve tıklanır ── */
.masa-liste {
  display: grid;
  gap: var(--space-8);
  margin: var(--space-0);
  padding: var(--space-6) var(--masa-konsept-pay) var(--space-8);
  list-style: none;
}

.masa-liste li {
  display: grid;
  gap: var(--space-3);
  max-width: var(--masa-liste-en);
}

.masa-liste img {
  display: block;
  width: var(--size-full);
  height: auto;
  border-radius: var(--masa-dugme-yaricap);
}

.masa-liste .masa-ac,
.masa-liste .masa-bag {
  justify-self: start;
}

@media (min-width: 64rem) {
  .masa-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Sahne: gece bölümü tam bir ekran; "alt alta upuzun olmasın" kararının kendisi. Sticky başlık üstteki boş duvarı örter, yazı onun altından başlar. ── */
html[data-isler] .masa-liste {
  display: none;
}

html[data-isler] #work {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: var(--masa-gorunur-min);
  padding-block: var(--space-0);
  overflow: clip;
  isolation: isolate;
  background: var(--masa-oda);
  scroll-margin-block-start: var(--space-0);
}

html[data-isler] .masa-bas {
  position: absolute;
  z-index: 3;
  inset: var(--space-0) var(--space-0) auto;
  display: flex;
  align-items: baseline;
  gap: var(--masa-bas-bosluk);
  pointer-events: none;
}

/* Başlık yalnız 980 px üstünde sticky (styles.css): orada yazı onun altından başlar. */
@media (min-width: 981px) {
  html[data-isler] .masa-bas {
    top: var(--header-height);
  }
}

/* Dar sahnede görünür cümle kısadır (hukuk 2 Kas madde 4, birebir). Geniş ekranda ve JS kapalı listede uzun metin okunur. */
.masa-konsept-dar {
  display: none;
}

/* Telefonda uzun not görünmez ama okunur: tamamı ekran okuyucuda kalır. Kısa cümle başlıkla aynı satırda başlar, sütunu taşırmaz. */
@media (max-width: 62rem) {
  html[data-isler] .masa-konsept {
    min-width: var(--space-0);
  }

  html[data-isler] .masa-konsept-genis {
    display: none;
  }

  html[data-isler] .masa-konsept-dar {
    display: inline;
  }

  html[data-isler] .masa-konsept-ek {
    position: absolute;
    width: var(--space-hairline);
    height: var(--space-hairline);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.masa-sahne {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: var(--space-0);
  overflow: hidden;
  background: var(--masa-oda);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.masa-sahne.tutuyor {
  cursor: grabbing;
}

/* 3B bağlam (preserve-3d) BİLEREK yok: Chromium ortak bağlamda düzlemleri BSP ile böler; ilk karelerde ekranın üstünde çapraz dikiş ve
   masa ışığında kesik çıktı. Her düzlem kendi perspective() dönüşümünü taşır ve z-index ile boyanır (ressam sırası): dikiş yok, katman ucuz. */
.masa-dunya {
  position: absolute;
  top: var(--space-0);
  left: 50%;
  width: var(--space-0);
  height: var(--space-0);
}

.masa-dunya * {
  pointer-events: none;
}

.masa-kok {
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
  width: var(--space-0);
  height: var(--space-0);
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}

.masa-govde,
.masa-duzlem {
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
}

/* Oda: duvar + masa gerçek düzlem. Renk yalnız ekranlardan gelir; ışık kapalıyken oda sıcak siyah. */
.masa-duvar { background: var(--masa-duvar); overflow: hidden; }
.masa-hale { position: absolute; top: var(--space-0); left: var(--space-0); will-change: transform, opacity; opacity: 0; }
.masa-yuzey { background: var(--masa-yuzey); overflow: hidden; }
.masa-damar { position: absolute; inset: var(--space-0); opacity: 0.5; background-size: 640px 240px; }
.yuklu .masa-damar { background-image: url("../assets/isler/isik/masa-damar.svg"); }
.masa-on { background: var(--masa-on); }

/* Masadaki iz: ışık, gölge, ayak tabanı. Masa düzlemiyle aynı yüzeyde (2B çocuk), monitörle birlikte kayar. */
.masa-grup { position: absolute; top: var(--space-0); left: var(--space-0); width: var(--space-0); height: var(--space-0); will-change: transform; }
.masa-isik {
  position: absolute;
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  opacity: 0;
  will-change: opacity;
  -webkit-mask-image: var(--masa-isik-maske);
  mask-image: var(--masa-isik-maske);
}
.masa-taban-golge { position: absolute; border-radius: 50%; background: var(--masa-taban-golge); }
.masa-taban { position: absolute; border-radius: 8px; background: var(--masa-taban); box-shadow: var(--masa-taban-cizgi); }

/* Ayak */
.masa-boyun { position: absolute; top: var(--space-0); left: var(--space-0); border-radius: var(--space-hairline); background: var(--masa-boyun); }
.masa-boyun::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(180deg, transparent, var(--isik, transparent)); opacity: 0.16; }

/* Klavye + fare + kâğıt yaprağı: ölçek veren, ışığı yakalayan nesneler. */
.masa-klavye { position: absolute; border-radius: 7px; background: var(--masa-klavye); box-shadow: var(--masa-klavye-golge); overflow: hidden; }
.masa-tuslar { position: absolute; inset: 5% 2.4%; display: grid; grid-template-rows: repeat(5, 1fr); gap: 6%; }
.masa-sira { display: flex; gap: 0.7%; }
.masa-sira i { display: block; flex: 1 1 0; border-radius: 2px; background: var(--masa-klavye-tus); box-shadow: 0 1px 0 var(--masa-klavye-tus-golge); }
.masa-sira i.gen { flex: 1.8 1 0; }
.masa-sira i.bosluk { flex: 7 1 0; }
.masa-klavye-isik { position: absolute; inset: var(--space-0); opacity: 0.5; -webkit-mask-image: var(--masa-klavye-isik-maske); mask-image: var(--masa-klavye-isik-maske); transition: background-color 380ms ease; }
.masa-fare { position: absolute; border-radius: 46% 46% 46% 46% / 34% 34% 56% 56%; background: var(--masa-fare); box-shadow: var(--masa-fare-golge); }
.masa-yaprak { position: absolute; border-radius: var(--space-hairline); background: var(--masa-yaprak); box-shadow: var(--masa-yaprak-golge); opacity: 0.55; }
.masa-yaprak::after { content: ""; position: absolute; top: 22%; right: 30%; left: 12%; height: var(--space-hairline); background: var(--gold-koyu); box-shadow: var(--masa-yaprak-satir); }
.masa-direk-taban { position: absolute; border-radius: 8px; background: var(--masa-direk-taban); box-shadow: var(--masa-direk-golge); }

/* Telefon: çok monitör direği + kollar (iki katlı dizilim). Masaüstünde her ekranın kendi ayağı var. */
.masa-direk { position: absolute; border-radius: 3px; background: var(--masa-direk); }
.masa-kol { position: absolute; top: var(--space-0); left: var(--space-0); height: 8px; margin-top: -4px; border-radius: 3px; background: var(--masa-kol); }

/* Ekran gövdesi: ince çerçeve + gerçek kalınlık. Boyutlar JS'ten: --g ekran eni, --y ekran boyu, --c çerçeve, --k kalınlık. */
.masa-govde {
  width: calc(var(--g) + 2 * var(--c));
  height: calc(var(--y) + 2 * var(--c));
  margin-top: calc(var(--y) / -2 - var(--c));
  margin-left: calc(var(--g) / -2 - var(--c));
  border-radius: 5px;
  background: var(--masa-govde);
  box-shadow: var(--masa-govde-cizgi);
  pointer-events: auto;
  cursor: pointer;
  backface-visibility: hidden;
}
.masa-yan { position: absolute; width: var(--k); height: calc(var(--y) + 2 * var(--c)); margin-top: calc(var(--y) / -2 - var(--c)); margin-left: calc(var(--k) / -2); background: var(--masa-yan); }
.masa-ekran { position: absolute; top: var(--c); left: var(--c); width: var(--g); height: var(--y); overflow: hidden; border-radius: var(--space-hairline); background: var(--masa-ekran); }
.masa-poster { position: absolute; top: var(--space-0); left: var(--space-0); display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--odak, 50% 50%); backface-visibility: hidden; }
/* Kayıtlı ekranda poster, videoyla aynı kırpımda durur: ölçeklenince üst bant («Örnek mağaza kurgusaldır.», posterin ilk %4'ü) yarım kesilir. Gezinme yalnız kaydı olmayan ekranda (Lisantera). */
.masa-kayitsiz .masa-poster { transform: scale(1.04); }
.gorunur .masa-mon.aktif.masa-kayitsiz .masa-poster { animation: masa-oynuyor var(--masa-poster-sure) ease-in-out infinite alternate; will-change: transform; }
@keyframes masa-oynuyor {
  from { transform: scale(1.03) translate3d(-1.1%, -0.7%, 0); }
  to { transform: scale(1.13) translate3d(1.6%, 1.1%, 0); }
}
.masa-video { position: absolute; inset: var(--space-0); display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--odak, 50% 50%); opacity: 0; transition: opacity 240ms ease-out; }
.masa-video.oynuyor { opacity: 1; }
.masa-cam { position: absolute; inset: -2px; background: var(--masa-cam); }
.masa-karart { position: absolute; inset: -2px; background: var(--masa-karart); opacity: 0.5; }
.masa-komsu { position: absolute; inset: -2px; opacity: 0; }
.masa-oynat { position: absolute; right: var(--space-0); bottom: var(--space-0); left: var(--space-0); height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.gorunur .masa-mon.aktif .masa-oynat { opacity: 0.9; animation: masa-ilerle var(--masa-oynat-sure) linear infinite; }
.gorunur .masa-mon.aktif.videolu .masa-oynat { animation: none; transition: transform 300ms linear; }
.gorunur .masa-mon.aktif.videolu .masa-oynat.sifirla { transition: none; }
@keyframes masa-ilerle { to { transform: scaleX(1); } }
.masa-led { position: absolute; right: calc(var(--c) + 8px); bottom: calc(var(--c) * 0.5 - 1px); width: 3px; height: 3px; border-radius: 50%; background: var(--masa-led); }
.masa-mon.aktif .masa-led { background: var(--gold); box-shadow: 0 0 5px var(--gold); }

/* Alt şerit: durak paneli + fihrist. Düz zemin: metnin kontrastı sahneye bağlı değil. Fihrist DOM'da önce (Tab: sekme → panel bağlantısı), görsel sıra prototip gibi. */
.masa-alt {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  gap: var(--space-3);
  padding: var(--masa-alt-pay) var(--masa-konsept-pay) max(var(--masa-alt-pay), env(safe-area-inset-bottom));
  background: var(--arka-yuz);
}
.masa-panel { order: -1; display: grid; align-items: start; gap: var(--space-1) var(--space-7); min-height: var(--masa-panel-min); }
.masa-panel:focus { outline: none; }
/* z-index: paneldeki bağlantının 44 px dokunma alanı fihristin üstüne binmesin. */
.masa-fihrist { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px clamp(10px, 2vw, 26px); }
.masa-fihrist button {
  position: relative;
  appearance: none;
  min-width: var(--control-min-height);
  min-height: var(--control-min-height);
  padding: var(--space-0);
  border: var(--space-0);
  background: none;
  color: var(--arka-yuz-sonus);
  font-size: var(--text-base);
  cursor: pointer;
  white-space: nowrap;
}
.masa-fihrist button:hover { color: var(--arka-yuz-metin); }
.masa-fihrist button[aria-selected="true"] { color: var(--arka-yuz-metin); font-weight: var(--weight-heavy); }
.masa-fihrist button[aria-selected="true"]::after { content: ""; position: absolute; right: var(--space-0); bottom: var(--space-2); left: var(--space-0); height: 2px; background: var(--gold); }

@media (min-width: 62rem) {
  .masa-panel { grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1.5fr) auto; align-items: center; min-height: var(--masa-panel-min-genis); }
  .masa-alt { gap: 2px; padding-top: var(--masa-alt-pay-dar); }
  .masa-fihrist { justify-content: flex-start; }
}

/* Telefon paneli: ad + düğme aynı satırda, cümle altta: sahneye yer kalır. */
@media (max-width: 62rem) {
  .masa-panel { grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); }
  .masa-panel-sol { grid-column: 1; grid-row: 1; min-width: var(--space-0); }
  .masa-panel-sag { grid-column: 2; grid-row: 1; padding-top: var(--space-1); }
  .masa-panel-orta { grid-column: 1 / -1; grid-row: 2; }
  .masa-panel .masa-etiket, .masa-panel .masa-bag { font-size: var(--masa-yazi-etiket-dar); }
  .masa-ek { display: block; margin-left: var(--space-0); font-size: var(--masa-yazi-etiket-dar); }
  .masa-panel .masa-ac { gap: var(--space-2); min-height: var(--control-min-height); padding: var(--space-0) var(--masa-dugme-pay-dar); font-size: var(--text-base); }
  .masa-fihrist button { font-size: var(--masa-yazi-etiket); }
  .masa-alt { gap: var(--space-1); padding-top: var(--masa-alt-pay-dar); }
}

/* 980 px altında html'nin scroll-padding'i alttaki teklif şeridi içindir; şerit İşler'de çekik. Bu pay düşülmezse klavye odağı sayfayı ~400 px zıplatıyor (2 Kas, 390 karesi). */
@media (max-width: 980px) {
  .masa-alt :is(a, button) {
    scroll-margin-block-end: calc((var(--serit-pay) + var(--space-2)) * -1);
  }
}

/* Hareket azaltma: geçiş anlık (isler.js), poster gezmez, ilerleme çizgisi yok, video açılmaz. */
@media (prefers-reduced-motion: reduce) {
  .masa-sahne *, .masa-ac { animation: none !important; transition: none !important; }
  .masa-oynat { display: none; }
}

/* Baskı: sahne değil düz liste. */
@media print {
  html[data-isler] .masa-sahne, html[data-isler] .masa-alt { display: none; }
  html[data-isler] .masa-liste { display: grid; }
  html[data-isler] #work { height: auto; overflow: visible; }
  html[data-isler] .masa-bas { position: static; display: block; }
}