/* ═══ OKUMA SALONU — masanın içindeki oturma düzeni (29 Ağustos 2026) ════
   Karar defteri: _docs/acik-masa-karar-28agu26.md §2B

   🔴 BU DOSYADA ASLA OLMAYACAKLAR:
     • Yerin yanında SÜRE, yüzde, sıra numarası. Salon kimin ne kadar
       çalıştığını taşımaz — yalnız kimin nerede olduğunu.
     • Kalabalıkla büyüyen parlaklık. Bir lamba da on lamba da aynı yanar;
       sayıyı metin söyler (ODA STANDARDI).
     • Kızıl/turuncu varlık rengi. Varlık YEŞİLDİR (--ss-var).

   🔑 LAMBA YAZIYA GİRMEZ (karar S5): "lamban yandı" gibi cümleler yok.
   Lamba yalnız burada, resimde konuşur; yazı düz hâli söyler.

   Sınıf adları `sln-` önekli — ortak sayfada ad çakışması tuzağı var. */

.sln { margin: 6px 0 2px; }

/* ── masa yığını: arkadaki masalar küçülerek uzaklaşır ── */
.sln-yigin { position: relative; }
.sln-masa {
    position: relative; transform-origin: 50% 100%;
    transition: transform .5s cubic-bezier(.35, .9, .3, 1), opacity .5s ease;
    cursor: pointer; margin-bottom: 10px;
}
.sln-masa.onde { cursor: default; }
/* Arka masa öndekinin ARDINA girer: aradaki boşluk kalırsa iki ayrı resim
   gibi durur, derinlik hissi kaybolur. */
.sln-masa:not(.onde) { margin-bottom: -6px; }
@media (prefers-reduced-motion: reduce) { .sln-masa { transition: none; } }

.sln-etiket {
    font-size: 0.68em; letter-spacing: .5px; text-transform: uppercase;
    color: #5f6b80; text-align: center; margin: 8px 0 5px; position: relative;
}

/* ── masa gövdesi: YANDAN görünen tabla ────────────────────────────────
   30 Ağu (onaylı tasarım). Sahne oranı sabittir; yerler ve lambalar
   içine YÜZDE ile oturur, ekran daralınca düzen bozulmaz. */
.sln-sahne {
    position: relative; width: 100%; max-width: 340px; margin: 0 auto;
    aspect-ratio: 340 / 248;
}
.sln-zemin { position: absolute; inset: 0; width: 100%; height: 100%; }
.sln-zemin .tabla {
    fill: rgba(212, 175, 106, .09);
    stroke: rgba(212, 175, 106, .38); stroke-width: 1.5;
}
.sln-zemin .kenar { fill: rgba(11, 18, 32, .55); }
.sln-zemin .ayak { stroke: rgba(212, 175, 106, .2); stroke-width: 4; }

/* LAMBA — varlığın tek işareti. Yanık/kısık/sönük üç hâl.
   Kısık = molada: sönmedi, bekliyor. */
.sln-isik {
    position: absolute; transform: translate(-50%, -50%);
    pointer-events: none; line-height: 0;
}
.sln-isik.arka { --sln-lamba-boy: 26px; }
.sln-isik.on { --sln-lamba-boy: 31px; }
.sln-lamba {
    width: calc(var(--sln-lamba-boy, 28px) * 0.92);
    height: var(--sln-lamba-boy, 28px); flex: none;
}
.sln-lamba .abajur { fill: rgba(212, 175, 106, .22); transition: fill .4s ease; }
.sln-lamba .hale { opacity: 0; transition: opacity .5s ease; }
.sln-lamba.yanik .abajur { fill: var(--ss-ortak, #F5D67B); }
.sln-lamba.yanik .hale { opacity: 1; }
.sln-lamba.kisik .abajur { fill: rgba(245, 214, 123, .5); }
.sln-lamba.kisik .hale { opacity: .45; }
/* 🌙 İlan edilmiş dinlenme — yokluk grisiyle AYNI renk olamaz (20 Ağu saha
   provası): ay mavisi. Mola değildir; günün kendisidir. */
.sln-lamba.ayda .abajur { fill: var(--ss-dinlenme, #8FB4D9); }
.sln-lamba.ayda .hale { opacity: .3; }

/* ── yerler: arka yaka uzakta (küçük), ön yaka yakında ── */
.sln-yer {
    width: var(--sln-yer-boy, 32px); height: var(--sln-yer-boy, 32px);
    flex: none; padding: 0; border: 0; background: none;
    font-family: inherit; cursor: pointer; position: relative;
}
.sln-yer i {
    position: absolute; inset: 0; border-radius: 50%; font-style: normal;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72em; font-weight: 600;
}
/* Boş yer: numarası yazar — numara bir adrestir (karar S3). */
.sln-yer.bos i { border: 1.5px dashed rgba(255, 255, 255, .25); color: #5f6b80; }
.sln-yer.bos:hover i { border-color: rgba(245, 214, 123, .6); color: #b79a63; }
/* Dolu yer: baş harf. Kalabalıkla renk DEĞİŞMEZ. */
.sln-yer.dolu i { background: var(--ss-var, #7FC79A); color: #0B1220; }
/* Molada: aynı yeşilin kısığı — sönük değil, bekleyen. */
.sln-yer.molada i { background: rgba(127, 199, 154, .42); color: #0B1220; }
.sln-yer.ayda i { background: rgba(143, 180, 217, .38); color: #0B1220; }
.sln-yer.dolu::before {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    background: rgba(127, 199, 154, .13);
}
/* 🔴 31 Ağu — KENDİNİ GÖRMEK (kullanıcı kararı: "ben kendimi orada
   göreyim, özel hissedeyim"). Kendi koltuğun altın halkalıdır ve altında
   "sen" yazar — masada kaç kişi olursa olsun gözün önce kendini bulur.
   Kalabalıkla parlaklık DEĞİŞMEZ (oda standardı): bu bir vurgu değil,
   bir ADRESTİR. */
.sln-yer.benim i { box-shadow: 0 0 0 2px #0b1226, 0 0 0 4px var(--ss-ortak, #F5D67B); }
.sln-yuva.benimki .sln-ders { color: var(--ss-ortak, #F5D67B); font-weight: 600; }
.sln-yer[disabled] { cursor: default; }
.sln-yer:focus-visible i { outline: 2px solid var(--ss-ortak, #F5D67B); outline-offset: 3px; }

.sln-alt { text-align: center; font-size: 0.76em; color: #94a3b8; margin-top: 8px; }
.sln-alt b { color: #cfe0f5; font-weight: 600; }
/* MASANIN KÜNYESİ — kimse çalışmıyorken satırın söylediği şey (8 Eyl).
   Ad ve resim yan yana: "bu bir çift masa" hem yazıyla hem çizimle.
   Çizim `masam.js → masaSvg` — ikinci kopya yok. */
.sln-kimlik { display: inline-flex; align-items: center; gap: 7px; }
.sln-kimlik .cz { display: inline-flex; width: 34px; height: 21px; color: #8fa2bf; }
.sln-kimlik .cz svg { width: 100%; height: 100%; }
/* 🔴 31 Ağu — Kalk BELİRGİNLEŞTİ (kullanıcı kararı): gri hayalet düğme
   fark edilmiyordu. Altın çerçeve; yine sessiz, yine tek kelime. */
.sln-kalk {
    margin-top: 10px; padding: 9px 26px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 0.8em; font-weight: 700; color: #e8d5a8;
    background: rgba(212, 175, 106, 0.10); border: 1px solid rgba(212, 175, 106, 0.45);
}
.sln-kalk:active { background: rgba(212, 175, 106, 0.2); }
.sln-hata { text-align: center; font-size: 0.76em; color: #e8b4a0; margin-top: 7px; }

/* ── ÖĞRENCİ KARTI (S6) — dolu bir yere dokununca ──────────────────────
   Üç sayı: kaç gündür yolda · toplam emek · çözülen soru. Hepsi ÖMÜR
   toplamı; kartta bugüne ait hiçbir şey yok ("bugün o 6 saat ben 1 saat"
   kıyası doğmasın diye). */
.sln-kart {
    margin: 10px auto 0; max-width: 260px; padding: 12px 14px;
    border-radius: 13px; background: #141f38;
    border: 1px solid rgba(212, 175, 106, .3); text-align: center;
}
.sln-kart .ad { font-size: 0.88em; font-weight: 700; color: #e9eef8; }
.sln-kart .satir { font-size: 0.74em; color: #94a3b8; margin-top: 3px; }
.sln-kart .sayilar {
    display: flex; justify-content: center; gap: 14px; margin-top: 9px;
    padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 0.72em; color: #94a3b8;
}
.sln-kart .sayilar b { color: #e8d5a8; font-weight: 700; font-variant-numeric: tabular-nums; }
.sln-kart-kapa {
    margin-top: 10px; padding: 5px 14px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 0.7em; color: #8595b0;
    background: none; border: 1px solid rgba(255, 255, 255, .12);
}

/* Yer + altındaki ders etiketi. Etiket DERSİ söyler, konuyu değil; süre
   hiçbir hâlde yazmaz. Molada olanın altında "molada". */
.sln-yuva {
    position: absolute; display: inline-flex; flex-direction: column;
    align-items: center; gap: 2px;
    /* Yuvanın DAİRESİ noktaya oturur, etiket altına taşar: yoksa uzun ders
       adı olan yer yukarı kayar ve sıra eğri durur. */
    transform: translate(-50%, calc(var(--sln-yer-boy, 32px) / -2));
}
.sln-yuva.arka { --sln-yer-boy: 28px; }
.sln-yuva.on { --sln-yer-boy: 33px; }
.sln-ders {
    font-size: 0.6em; color: #8595b0; max-width: 52px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ÖNCELİK PENCERESİ (30 Ağu · K6) — ortak saatten 15 dk önce masa
   kayıtlılara açılır; konuk payı yine konuğundur. Satır yalnız pencere
   açıkken doğar. Renk ALTINDIR: ortak saatin rengi. */
.sln-pencere {
    margin: 8px auto 0; max-width: 280px; padding: 8px 12px; border-radius: 11px;
    text-align: center; font-size: 0.72em; line-height: 1.5; color: #e8d5a8;
    background: rgba(212, 175, 106, .09); border: 1px solid rgba(212, 175, 106, .26);
}
.sln-pencere b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sln-pencere span { display: block; font-size: 0.9em; color: #94a3b8; margin-top: 2px; }

/* YAPRAK SAHNESİ (K24) — kronometredeki yaprak dar; sahne küçülür ama
   geometri aynıdır. Seçili yerin çevresinde ince altın halka. */
.sln-sahne.sln-yaprak { max-width: 252px; margin: 2px auto 0; }
.sln-yaprak .sln-yuva.arka { --sln-yer-boy: 24px; }
.sln-yaprak .sln-yuva.on { --sln-yer-boy: 28px; }
.sln-yaprak .sln-isik.arka { --sln-lamba-boy: 21px; }
.sln-yaprak .sln-isik.on { --sln-lamba-boy: 25px; }
.sln-yaprak .sln-yer.secili i { box-shadow: 0 0 0 2px #10151f, 0 0 0 3.5px rgba(232, 213, 168, .85); }