/* ═══════════════════════════════════════════════════════════════════
   MASAN — masanın kronometre içi ekranı (16 Ağustos 2026).
   `masam.js` ile eşleşir.

   DİL: sınıf ekranıyla (kumem.css) AYNI ölçüler, aynı sessizlik — iki
   ekran tek dilden konuşsun (masa↔küme denklik kuralı). Ayrı dosya
   olmasının sebebi kopyalamak değil, SAHİPLİK: masada ayar formları var,
   sınıfta yok; birinin ihtiyacı öbürünün ekranını sessizce bozmasın.

   RENK: masa da altın ailededir (ortak ateşin başı). Ayarların formları
   nötr kalır — orada iş yapılır, orası vitrin değil.

   🔴 Bu dosyada ASLA olmayacaklar:
     • Üye satırında sıra numarası, süre çubuğu, kıyas rengi. Liste
       ALFABETİKTİR; sıralama sessiz bir yarış tablosudur.
     • Işığı yanmayanı kızartan renk. Sönük sönüktür, suçlu değil.
   ═══════════════════════════════════════════════════════════════════ */

/* Dolgu ölçünün İÇİNDE sayılır. Bu kural yalnız perdenin içine bakar ama
   şart: yüzde genişlikli kutular (süre·çalışma·mola satırı, tam genişlik
   düğmeler) yoksa kartın dışına taşıyor — provada görüldü. */
.msm-perde *, .msm-perde *::before, .msm-perde *::after { box-sizing: border-box; }

/* ── tam ekran perde ── */
.msm-perde {
    position: fixed; inset: 0; z-index: 10050;
    background: #0a0e1a;
    background-image:
        radial-gradient(at 0% 0%, hsla(253, 16%, 10%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 0.24) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(36, 45%, 30%, 0.16) 0, transparent 50%);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 22px 18px 40px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    color: #e2e8f0;
}
.msm-perde.acik { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .msm-perde { transition: none; } }
.msm-ic { max-width: 560px; margin: 0 auto; }
@media (min-width: 768px) { .msm-perde { padding: 30px 26px 60px; } }

/* ── üst bar ── */
.msm-ust {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 11px; margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.msm-ust .yer { flex: 1; min-width: 0; }
.msm-ust h3 { margin: 0; font-size: 1.05em; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msm-ust .alt b { color: #e8d5a8; font-weight: 700; }
.msm-ust .alt { font-size: 0.65em; color: #5f6b80; letter-spacing: 0.5px;
    text-transform: uppercase; margin-top: 2px; }
.msm-yuv {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8; font-size: 0.95em; font-family: inherit; cursor: pointer;
}
.msm-yuv.sag { margin-left: auto; }

.msm-iskelet {
    height: 60px; border-radius: 14px; margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    background-size: 200% 100%; animation: msm-parla 1.3s linear infinite;
}
@keyframes msm-parla { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .msm-iskelet { animation: none; } }

.msm-bl {
    font-size: 0.7em; letter-spacing: 0.7px; text-transform: uppercase;
    color: #5f6b80; margin: 18px 0 8px;
}
.msm-not { font-size: 0.73em; color: #5f6b80; margin-top: 7px; line-height: 1.5; }
/* "Masa nedir?" — yalnız masası olmayan öğrenciye (3 Eyl). Kart değil,
   sessiz bir paragraf: karşılamanın önüne geçmesin. */
.msm-niyet { font-size: 0.78em; color: #8fa2bf; line-height: 1.6; margin-top: 14px;
    padding: 14px 15px; border-radius: 14px; background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07); }
.msm-niyet b { color: #cbd5e1; }
.msm-niyet ul { margin: 8px 0 8px; padding-left: 18px; display: grid; gap: 5px; }
.msm-bos { text-align: center; padding: 34px 18px; color: #94a3b8; font-size: 0.88em; line-height: 1.7; }

/* ── 1 · plan: ortak saatin geri sayımı ──
   Sınıftaki kavuşma sayacıyla aynı ölçü. Mola hâlinde yeşile döner: aynı
   kutu, farklı nefes. */
.msm-sayim {
    text-align: center; padding: 15px 10px; border-radius: 14px; margin-bottom: 10px;
    background: rgba(245, 214, 123, 0.06); border: 1px solid rgba(245, 214, 123, 0.28);
}
.msm-sayim.molada { background: rgba(127, 199, 154, 0.06); border-color: rgba(127, 199, 154, 0.3); }
.msm-sayim .buyuk { font-size: 1.75em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.msm-sayim .alt { font-size: 0.78em; color: #94a3b8; margin-top: 4px; line-height: 1.5; }

.msm-plan {
    border-radius: 13px; background: #0b1226; border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
}
.msm-psat {
    display: flex; align-items: center; gap: 9px; padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.86em;
}
.msm-psat:last-child { border-bottom: none; }
.msm-psat .ad { flex: 1; min-width: 0; font-weight: 600; }
.msm-psat .ne { flex: none; font-size: 0.86em; color: #94a3b8; }
/* Kapalı randevu silinmez, susar — geçmişi anlatmaya devam etsin. */
.msm-psat.pasif { opacity: .55; }

/* ── 2 · söz ── */
.msm-soz {
    border-radius: 13px; background: #0b1226; border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 14px;
}
.msm-soz .cumle { font-size: 0.92em; font-weight: 600; }
.msm-soz .benim { display: flex; align-items: baseline; gap: 6px; margin-top: 9px;
    font-size: 0.78em; color: #94a3b8; }
.msm-soz .benim b { font-size: 1.5em; color: #e9eef8; font-weight: 700; font-variant-numeric: tabular-nums; }
.msm-soz .benim .ay { color: #8FB4D9; }

.msm-gunozet { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.msm-gunozet .ust { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.msm-gunozet .etiket { font-size: 0.72em; letter-spacing: 0.5px; text-transform: uppercase; color: #5f6b80; }
.msm-gunozet .duzenle {
    flex: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.76em;
    color: #94a3b8; padding: 3px 2px; text-decoration: underline; text-underline-offset: 3px;
    white-space: nowrap;
}
.msm-gunozet .duzenle:hover { color: #e8d5a8; }
.msm-gunozet .noktalar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.msm-gunozet .noktalar span { font-size: 0.8em; color: #5f6b80; opacity: .5; }
.msm-gunozet .noktalar span.acik { color: #e8d5a8; opacity: 1; font-weight: 600; }

.msm-gunduzen { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.msm-gunduzen .bl { font-size: 0.72em; letter-spacing: .5px; text-transform: uppercase; color: #5f6b80; }
.msm-kayit { margin-top: 8px; font-size: 0.76em; color: #7FC79A; }

/* 🔴 5 Eyl (ekran provası): yedi gün tek satıra sığmıyordu — "Paz" alta
   düşüp tam genişlikte bir şerit oluyordu. Esneme yerine YEDİ EŞİT SÜTUN:
   dar telefonda da hafta bir satırda okunur. */
.msm-gunler { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 7px; }
.msm-gunler button {
    min-width: 0; padding: 7px 2px; font: inherit; font-size: 0.7em;
    border-radius: 9px; cursor: pointer; color: #94a3b8;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color .18s, background .18s, color .18s;
}
.msm-gunler button[aria-pressed="true"] {
    border-color: rgba(212, 175, 106, 0.45); background: rgba(212, 175, 106, 0.13); color: #e8d5a8;
}

/* ── 3 · kimler var — alfabetik, sırasız ── */
.msm-satir {
    display: flex; gap: 11px; align-items: center; padding: 11px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msm-satir:last-child { border-bottom: none; }
.msm-satir .harf {
    flex: 0 0 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85em; font-weight: 700; color: #94a3b8;
}
.msm-satir .harf.isikli {
    background: rgba(212, 175, 106, 0.14); border-color: rgba(212, 175, 106, 0.4); color: #e8d5a8;
}
.msm-satir .ic { min-width: 0; flex: 1; }
/* Etiketler dar ekranda ALT SATIRA iner, sıkışıp birbirine girmez
   (17 Ağu: "Muratsenmasa sahibi" gibi okunuyordu). */
.msm-satir .ad { font-size: 0.92em; font-weight: 600;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.msm-satir .alt { font-size: 0.76em; color: #94a3b8; margin-top: 2px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
/* Kendi satırın: "sen" rozeti yalnız hangisinin sen olduğunu söyler.
   Sıra yine alfabetik — ayrıcalık yok (sınıf ekranındaki kuralın aynısı). */
.msm-satir.benim .ad { color: #e8d5a8; }
.msm-satir .ad .sen {
    font-size: 0.74em; font-weight: 600; letter-spacing: .3px;
    color: #b79a63; background: rgba(212, 175, 106, 0.14);
    border: 1px solid rgba(212, 175, 106, 0.3); border-radius: 99px; padding: 1px 7px;
}
/* Rol etiketi sessiz: bir yetki bildirir, bir üstünlük değil. */
.msm-satir .ad .rol {
    font-size: 0.72em; font-weight: 500; color: #5f6b80;
}
/* ── ODANIN ÖLÇÜSÜ — hüküm değil, davet (20 Ağu) ──────────────────────
   Söz kişiye geçti; masanın çıtası artık kimseye not vermiyor. Bu yüzden
   satır SAKİN: uyarı rengi yok, çerçevesi ince, yazısı küçük. Yalnız
   "sözün yok" hâlinde altın bir düğme taşır — orada bir davet var. */
.msm-olcu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 8px 0 4px; padding: 9px 11px; border-radius: 11px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.msm-olcu .ic { flex: 1; min-width: 0; font-size: 0.78em; color: #94a3b8; line-height: 1.5; }
.msm-olcu .ic b { color: #cbd5e1; font-weight: 600; }
.msm-olcu .ic .sonuk { color: #64748b; }
.msm-olcu.teklif { border-color: rgba(212, 175, 106, 0.28); background: rgba(212, 175, 106, 0.06); }
.msm-olcu .al { flex: none; padding: 7px 13px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 0.76em; font-weight: 600;
    color: #e8d5a8; background: rgba(212, 175, 106, 0.14);
    border: 1px solid rgba(212, 175, 106, 0.4); }

/* "Sözünü ver" — sözü olmayanın tek düğmesi. */
.msm-soz-kur { width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 0.86em; font-weight: 600;
    color: #e8d5a8; background: rgba(212, 175, 106, 0.12);
    border: 1px solid rgba(212, 175, 106, 0.38); }

/* Çıta ayarı: sayaç ayar panelinin diliyle aynı (−/+ ve ortada sayı). */
.msm-cita { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 0.78em; color: #94a3b8; }
.msm-cita span { flex: 1; min-width: 0; }
.msm-cita b { min-width: 74px; text-align: center; color: #e8d5a8; font-variant-numeric: tabular-nums; }
.msm-cita .cita-dug { padding: 6px 11px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 1em; color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }

/* Sözü kaldırmak sessiz bir karardır — düğmesi de sessiz. */
.msm-soz-sil { margin-top: 12px; padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.74em; color: #64748b; text-decoration: underline; }

/* ── SÖZ KARNESİ · son 7 gün (20 Ağu) ─────────────────────────────────
   Yedi kutu, soldan sağa eskiden yeniye. Ceza dili YOK: tutulmayan gün
   kırmızı değil, sessiz bir çentik. Dinlenme ay mavisi (masanın her yerinde
   aynı renk), söz günü olmayan gün iyice soluk. */
.msm-karne { margin: 4px 0 2px; }
.msm-karne .satir { display: flex; gap: 6px; }
.msm-krn-gun {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 8px 2px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
.msm-krn-gun .im { font-size: 0.95em; line-height: 1; color: #64748b; }
.msm-krn-gun .ad { font-size: 0.66em; color: #64748b; }
.msm-krn-gun.tuttu { background: rgba(212, 175, 106, 0.10); border-color: rgba(212, 175, 106, 0.32); }
.msm-krn-gun.tuttu .im { color: #e8d5a8; }
.msm-krn-gun.tuttu .ad { color: #b79a63; }
.msm-krn-gun.tutmadi .im { color: #8fa2bf; }
.msm-krn-gun.dinlendi { background: rgba(143, 180, 217, 0.08); border-color: rgba(143, 180, 217, 0.28); }
.msm-krn-gun.dinlendi .im, .msm-krn-gun.dinlendi .ad { color: #8FB4D9; }
.msm-krn-gun.sozdisi { opacity: 0.45; }
.msm-karne .ozet { margin-top: 9px; font-size: 0.8em; color: #cbd5e1; }

/* 🌙 DİNLENME AY MAVİSİ (20 Ağu) — üst karttaki dinlenme rengiyle aynı.
   Yokluğun grisiyle karışmaz: dinlenme ilan edilmiş bir hâldir, boşluk değil. */
.msm-satir .alt .dinlenme { color: var(--ss-dinlenme, #8FB4D9); }
/* 🟢 MOLA — dinlenmeden de yokluktan da AYRI bir hâl (28 Ağu). Mola çalışmanın
   parçasıdır: orada oturan biri bugün emek vermiş demektir. Rengi masanın
   her yerindeki mola yeşili; ay mavisi ilan edilmiş dinlenmenin, gri yokluğun. */
.msm-satir .alt .molada { color: var(--ss-var-acik, #9fe0b8); }
.msm-satir .harf.molada {
    background: rgba(127, 199, 154, 0.12); border-color: rgba(127, 199, 154, 0.38); color: #9fe0b8;
}
.msm-satir .harf.ayda {
    background: rgba(143, 180, 217, 0.12); border-color: rgba(143, 180, 217, 0.38); color: #8FB4D9;
}
/* NEREDESİN — yalnız KENDİ satırında (17 Ağu). Ekranın dibindeki iki satırın
   yerine geçti: cevap, kendini gördüğün yerin yanında durur. */
.msm-satir .alt .yer {
    padding: 1px 8px; border-radius: 99px; font-size: 0.92em; white-space: nowrap;
    color: #8fa2bf; border: 1px solid rgba(255, 255, 255, 0.12);
}
.msm-satir .alt .yer.burada {
    color: #e8d5a8; border-color: rgba(212, 175, 106, 0.35); background: rgba(212, 175, 106, 0.10);
}
/* Geçiş düğmesi de kendi satırında: dokunulacak yer, sorunun sorulduğu yer. */
.msm-gec-mini {
    flex: none; align-self: center; padding: 6px 11px; border-radius: 99px; cursor: pointer;
    font: inherit; font-size: 0.76em; font-weight: 600; white-space: nowrap;
    color: #e8d5a8; background: rgba(212, 175, 106, 0.12);
    border: 1px solid rgba(212, 175, 106, 0.4);
}
.msm-gec-mini:hover { background: rgba(212, 175, 106, 0.2); }

.msm-mavi {
    border-radius: 12px; padding: 10px 12px; margin: 14px 0 12px;
    font-size: 0.8em; line-height: 1.55; color: #94b8d8;
    background: rgba(79, 172, 254, 0.06); border: 1px solid rgba(79, 172, 254, 0.2);
}
.msm-mavi b { color: #bcd9f5; font-weight: 600; }

/* ── bu hafta: ortak toplam + senin payın (17 Ağu) ──
   Çubuk bir YARIŞ değil, bir pay göstergesi: kimseyle kıyaslamıyor, yalnız
   "bu ortak toplamın ne kadarı senden" diyor. */
.msm-hafta {
    border-radius: 13px; background: #0b1226; border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 14px;
}
.msm-hafta .sat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 0.8em; color: #94a3b8; padding: 3px 0; }
.msm-hafta .sat b { font-size: 1.15em; color: #e9eef8; font-variant-numeric: tabular-nums; }
.msm-hafta .sat b i { font-style: normal; font-size: 0.82em; color: #b79a63; }
.msm-hafta .cubuk { margin-top: 9px; height: 6px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.msm-hafta .cubuk i { display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #d4af6a, #e8c98a); }

/* ── yer satırı — sınıf ekranındaki cümlenin aynısı ── */
.msm-yer {
    margin: 18px 0 8px; padding: 11px 13px; border-radius: 12px;
    font-size: 0.82em; line-height: 1.5; color: #8fa2bf;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.msm-yer b { color: #cbd5e1; font-weight: 600; }
.msm-yer.burada { background: rgba(212, 175, 106, 0.08); border-color: rgba(212, 175, 106, 0.35); }
.msm-yer.burada b { color: #e8d5a8; }
.msm-gec {
    width: 100%; margin-bottom: 8px; padding: 11px; border-radius: 12px; cursor: pointer;
    background: rgba(212, 175, 106, 0.12); border: 1px solid rgba(212, 175, 106, 0.4);
    color: #e8d5a8; font-family: inherit; font-size: 0.88em; font-weight: 600;
}
.msm-gec:hover { background: rgba(212, 175, 106, 0.2); }

/* ── 🌙 DİNLENME — üst bardaki ayın altında açılan küçük yaprak (5 Eyl) ──
   Önce listenin üstünde koca bir karttı ve her açılışta öneri gibi
   okunuyordu. Şimdi kapısı ✕'in yanındaki küçük ay; yaprak yalnız dokununca
   açılır. 🔒 Renk ODA STANDARDI'ndan: dinlenme mavisi. Kırmızı YASAK —
   dinlenmek bir kusur değil, bir haber. */
.msm-dinlen {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin: 0 0 14px; padding: 11px 12px; border-radius: 13px;
    background: rgba(124, 162, 214, 0.05);
    border: 1px solid rgba(124, 162, 214, 0.22);
}
.msm-dinlen .msm-not { flex: 1 0 100%; margin-top: 3px; }
.msm-dinlen-dug {
    flex: 1 1 auto; padding: 8px 12px; border-radius: 99px; cursor: pointer; font: inherit;
    font-size: 0.78em; font-weight: 600; color: #94a3b8;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
}
.msm-dinlen-dug.acik {
    color: #cfe0f6; background: rgba(124, 162, 214, 0.16);
    border-color: var(--ss-dinlenme, rgba(124, 162, 214, 0.5));
}
.msm-dinlen-dug:disabled { opacity: .5; cursor: wait; }

/* Üst bardaki yuvarlaklar: geri · kapı · ay · dişli · ✕ — hepsi aynı dilde.
   Renk yalnız DURUMU söyler (açık kapı altın, ilan edilmiş dinlenme mavi). */
.msm-ust .msm-yuv svg { width: 16px; height: 16px; }
.msm-ust .msm-yuv.kapi.acik {
    color: #F5D67B; border-color: rgba(212, 175, 106, 0.5); background: rgba(212, 175, 106, 0.13);
}
.msm-ust .msm-yuv.ay.acik {
    color: #cfe0f6; border-color: var(--ss-dinlenme, rgba(124, 162, 214, 0.5));
    background: rgba(124, 162, 214, 0.16);
}

/* ── 4 · ayarlar — üst bardaki dişliden açılır ──
   Ekranın işi masayı GÖSTERMEK; yönetmek ikinci iştir. Kapı artık ✕'in
   yanındaki dişli (5 Eyl, kullanıcı isteği): eskiden ekranın altında ayrı
   bir satırdı ve masaya girip aşağı inmeden görünmüyordu. */

/* ═══ MASA KURMA SİHİRBAZI — dört soru, tek tek (5 Eyl) ════════════════
   Bir ekranda BİR soru: hangi adımda olduğun üstte, cevabın ortada, tek
   ileri düğmesi altta. Geçilen adımlara dokunarak dönülür. */
/* Basamak çubuğu — maket A1 ile bire bir (6 Eyl): her adım bir HAP, içinde
   numara yuvası; şimdiki altın, geçilen yeşil ve ✓. */
.msm-kur-basamak { display: flex; gap: 6px; margin: 2px 0 18px; }
.msm-kur-basamak .bas {
    flex: 1; display: flex; align-items: center; gap: 6px; justify-content: center;
    padding: 7px 4px; border-radius: 10px; font: inherit; font-size: 0.68em; letter-spacing: 0.4px;
    text-transform: uppercase; color: #5f6b80; cursor: default;
    background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.09);
}
.msm-kur-basamak .bas .no {
    width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: 0.85em; background: rgba(255, 255, 255, 0.06); color: #5f6b80;
}
.msm-kur-basamak .bas.simdi { color: #e8d5a8; border-color: rgba(212, 175, 106, 0.45); background: rgba(212, 175, 106, 0.08); }
.msm-kur-basamak .bas.simdi .no { background: #d4af6a; color: #1a1408; font-weight: 700; }
.msm-kur-basamak .bas.gecti { color: #7FC79A; cursor: pointer; }
.msm-kur-basamak .bas.gecti .no { background: rgba(127, 199, 154, 0.2); color: #7FC79A; }

.msm-kur-soru { font-size: 1.15em; font-weight: 700; color: #edf1f9; line-height: 1.35; }
.msm-kur-alt { font-size: 0.8em; color: #7d8ba3; margin-top: 6px; line-height: 1.55; }
.msm-kur-giris {
    width: 100%; margin-top: 16px; padding: 13px 14px; font: inherit; font-size: 1em;
    color: #edf1f9; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
}
.msm-kur-giris:focus { outline: none; border-color: rgba(245, 214, 123, 0.5); }
.msm-kur-soru + .msm-kur-alt + .msm-tipler { margin-top: 16px; }
.msm-kur-not {
    font-size: 0.78em; color: #94a3b8; line-height: 1.6; margin-top: 12px;
    padding: 11px 13px; border-radius: 11px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.msm-kur-not b { color: #e8d5a8; font-weight: 600; }

.msm-kur-ileri { margin-top: 20px; }

/* Bölüm başlığı: küçük, sönük, susarak ayırır. */
.msm-bl3 {
    font-size: 0.68em; letter-spacing: 0.6px; text-transform: uppercase;
    color: #5f6b80; margin: 15px 0 8px;
}
.msm-bl3:first-child { margin-top: 0; }
.msm-bl3 i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.75; }

/* ── MASANIN ADI — YERİNDE (5 Eyl) ──
   Tarayıcının kendi penceresi kalktı: kutuya dokun, yaz, Enter kaydeder.
   "Kaydet" yalnız gerçekten bir değişiklik varken doğar (ölü düğme yok). */
.msm-ad-kutu {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px;
    border-radius: 12px; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.msm-ad-kutu:focus-within { border-color: rgba(212, 175, 106, 0.55); background: rgba(212, 175, 106, 0.06); }
.msm-ad-kutu input {
    flex: 1; min-width: 0; padding: 7px 0; background: none; border: 0;
    color: #e6edf7; font: inherit; font-size: 0.95em; font-weight: 600;
}
.msm-ad-kutu input:focus { outline: none; }
.msm-ad-kutu .kalem { flex: none; color: #5f6b80; font-size: 0.76em; padding-right: 6px; }
.msm-ad-kutu .kaydet {
    flex: none; padding: 6px 12px; border-radius: 9px; cursor: pointer; font: inherit;
    font-size: 0.78em; font-weight: 600; color: #e8d5a8;
    background: rgba(212, 175, 106, 0.12); border: 1px solid rgba(212, 175, 106, 0.45);
}
.msm-ad-kutu .kaydet[hidden], .msm-ad-kutu .kalem[hidden] { display: none; }

/* ── BOY VE BİÇİM: MASANIN KENDİ ÇİZİMİ (kullanıcı kararı 3) ──
   Sekiz yazılı düğme yerine üstten görünüş: tabla ve sandalyeler. Ne
   seçtiğini okumadan görürsün. Çizim `masaSvg()` — tek çizici. */
.msm-tipler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.msm-tipler.uc { grid-template-columns: repeat(3, 1fr); }
.msm-tip {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px 7px; border-radius: 12px; cursor: pointer; font: inherit;
    color: #8fa2bf; background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.msm-tip svg { width: 100%; max-width: 56px; height: 36px; }
.msm-tipler.uc .msm-tip svg { max-width: 64px; height: 42px; }
.msm-tip .ad { font-size: 0.72em; font-weight: 600; color: #cbd5e1; line-height: 1.2; text-align: center; }
.msm-tip .n { font-size: 0.66em; color: #5f6b80; }
.msm-tip.secili { color: #F5D67B; border-color: rgba(212, 175, 106, 0.6); background: rgba(212, 175, 106, 0.1); }
.msm-tip.secili .ad { color: #e8d5a8; }
.msm-tip.secili .n { color: #b79a63; }
.msm-tip:disabled { opacity: .5; cursor: wait; }

/* ═══ BOYUN SAATİ — GRUP · ROZET · ŞERİT (8 Eylül 2026) ══════════════════
   Kullanıcı: "yazıyoruz ama çok anlaşılmıyor, çoğu kişi okumayacak; bir
   ikon, değişik bir tasarım, renk gibi bir şey yapsan da direkt görselde
   belli etsen." Kırk kelimelik öğretici kutu kalktı; aynı gerçek üç yerde
   ve hiçbiri paragraf değil. Ölçü TEK yerde: masam.js → saatSartMi().
   Yeni renk YOK — çağrı ürünün öğretici mavisi, saat masanın altını.
   🔴 Kırmızı yok (anayasa). ────────────────────────────────────────────── */

/* Grup başlığı: susarak ayırır, düğmeye BENZEMEZ (dokunulamayan şey düğme
   gibi durmaz — panjur tuzağı). .msm-bl3 ile aynı ölçüde, yanında ikon. */
.msm-grup {
    display: flex; align-items: center; gap: 8px; margin: 15px 0 8px;
    font-size: 0.68em; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600;
}
.msm-grup .im { flex: none; display: inline-flex; width: 14px; height: 14px; }
.msm-grup .im svg { width: 100%; height: 100%; }
.msm-grup .ne { color: #cbd5e1; }
.msm-grup .kosul {
    color: #5f6b80; text-transform: none; letter-spacing: 0;
    font-weight: 400; font-size: 1.06em;
}
.msm-grup.cagri .im { color: #8FB4D9; }
.msm-grup.saat  .im { color: #D4AF6A; }

/* Kartın alt satırı: sayı SOLDA, rozetler SAĞDA. Mutlak konum BIRAKILDI —
   sayı ortada kalınca dar ekranda rozetlerin altına giriyordu (320 px'te
   −3,4 px; maket üzerinde getBoundingClientRect ile ölçüldü). Satır hâlinde
   boşluk daralır ama çakışma olmaz. */
.msm-tip .alt {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 4px; padding: 0 2px; margin-top: 1px;
}
.msm-tip .alt .n { flex: none; }
.msm-tip .rozetler { flex: none; display: flex; align-items: center; gap: 3px; }
.msm-tip .rozetler i { display: inline-flex; width: 12px; height: 12px; }
.msm-tip .rozetler i svg { width: 100%; height: 100%; }
/* 🔑 İKİ SAAT AYNI ŞEY DEĞİL: küçükte İSTEĞE BAĞLI (sönük), büyükte ŞART
   (altın). Aynı parlaklıkta çizilirlerse kuralın kendisi kaybolur. */
.msm-tip .rozetler .r-cagri { color: #8FB4D9; opacity: .78; }
.msm-tip .rozetler .r-saat { color: #D4AF6A; opacity: .85; }
.msm-tip .rozetler .r-saat.istege { color: #5f6b80; opacity: .7; }
.msm-tip.secili .rozetler i { opacity: 1; }
.msm-tip.secili .rozetler .r-saat.istege { color: #8fa2bf; opacity: .85; }

/* Şerit: seçtikten sonraki tek cümle. Öğretici kutunun (msm-ogret) yerine
   geçti — aynı ağırlık, tek satır. */
.msm-boy-serit {
    display: flex; align-items: center; gap: 9px; margin-top: 12px;
    padding: 10px 12px; border-radius: 12px; font-size: 0.78em; line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.025);
}
.msm-boy-serit svg { flex: none; width: 15px; height: 15px; }
.msm-boy-serit b { color: #fff; font-weight: 600; }
.msm-boy-serit.cagri {
    border-color: rgba(143, 180, 217, 0.3); background: rgba(143, 180, 217, 0.07); color: #cfe0f6;
}
.msm-boy-serit.cagri svg { color: #8FB4D9; }
.msm-boy-serit.saat {
    border-color: rgba(212, 175, 106, 0.32); background: rgba(212, 175, 106, 0.07); color: #e8d5a8;
}
.msm-boy-serit.saat svg { color: #D4AF6A; }
.msm-ipucu {
    margin-top: 10px; padding: 9px 11px; border-radius: 10px; font-size: 0.76em;
    color: #8fa2bf; line-height: 1.5;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09);
}
.msm-ipucu b { color: #e8d5a8; font-weight: 600; }

/* ── İKİ SEÇENEKLİ ANAHTAR (kapı · haftalık-tek sefer) ──
   "Açık / Kapalı" tek düğmesi yerine iki seçenek yan yana: hangisinde
   olduğun görünür, ötekine dokunmak onu seçer. */
.msm-seg {
    display: flex; margin-top: 6px; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.msm-seg button {
    flex: 1; padding: 11px 6px; cursor: pointer; font: inherit; font-size: 0.86em; font-weight: 600;
    color: #8fa2bf; background: rgba(255, 255, 255, 0.02); border: 0;
}
.msm-seg button.secili { color: #1a1408; background: #d4af6a; }
.msm-seg button:disabled { opacity: .6; cursor: wait; }
.msm-seg.kucuk { margin-bottom: 10px; }
.msm-seg.kucuk button { padding: 8px 6px; font-size: 0.78em; }
.msm-seg.kucuk button.secili { color: #e8d5a8; background: rgba(212, 175, 106, 0.2); }

/* ── DAVET BAĞLANTISI — eski davet sayfasından taşındı ── */
.msm-link {
    margin-top: 8px; padding: 9px 11px; border-radius: 10px; word-break: break-all;
    background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.09);
    font-family: ui-monospace, Menlo, monospace; font-size: 0.74em; color: #a7b4cb;
}
.msm-dugmeler { display: flex; gap: 7px; margin-top: 8px; }
.msm-dugmeler button {
    flex: 1; min-width: 0; padding: 9px 6px; border-radius: 11px; cursor: pointer;
    font: inherit; font-size: 0.78em; font-weight: 600; color: #8fa2bf;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.16);
}
.msm-dugmeler button.wa { color: #9fe0b8; border-color: rgba(127, 199, 154, 0.4); background: rgba(127, 199, 154, 0.09); }
.msm-dugmeler button.sonuk { color: #5f6b80; }

/* ── SAAT: DÖRT KUTU TEK SATIR ──
   Dört büyük alan alt alta duruyordu; form ekranın yarısını yiyordu. */
.msm-kutular { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.msm-kutular.ikili { grid-template-columns: 1.2fr 1fr; }
.msm-kutu {
    display: block; margin: 0; padding: 6px 8px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.16);
}
.msm-kutu[hidden] { display: none; }
.msm-kutu.genis { margin-top: 8px; }
.msm-kutu small { display: block; font-size: 0.64em; letter-spacing: 0.3px; color: #5f6b80; }
.msm-form .msm-kutu input {
    margin-top: 1px; padding: 2px 0; border: 0; border-radius: 0; background: none;
    font-size: 0.9em; font-weight: 600; color: #dbe4f2;
}
.msm-form .msm-kutu input:focus { outline: none; }
.msm-form .msm-secici { margin-top: 8px; }

/* ── KİŞİLER — baş harf, ad, zil ── */
.msm-kisiler { border-radius: 13px; background: #0b1226; border: 1px solid rgba(255, 255, 255, 0.08); padding: 2px 12px; }
.msm-kisi {
    display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 0.84em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap;
}
.msm-kisi:last-child { border-bottom: 0; }
.msm-kisi .harf {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8em; font-weight: 700; color: #e8d5a8;
    background: rgba(212, 175, 106, 0.12); border: 1px solid rgba(212, 175, 106, 0.3);
}
.msm-kisi .ad { flex: 1; min-width: 90px; }
.msm-kisi .ad b { display: block; font-weight: 600; color: #dbe4f2; }
.msm-kisi .ad small { display: block; font-size: 0.86em; color: #5f6b80; }
.msm-kisi .rol {
    flex: none; font-size: 0.7em; color: #b79a63; padding: 2px 7px;
    border-radius: 7px; border: 1px solid rgba(212, 175, 106, 0.35);
}
.msm-kisi .mini {
    flex: none; padding: 5px 10px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 0.76em;
    color: #94a3b8; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
}
.msm-kisi .mini.sil { color: #e08a76; border-color: rgba(224, 138, 118, 0.3); }
/* ZİL — "masaya oturunca haber ver". Açıkken altın, kapalıyken sönük;
   ikonun kendisi tek yerde çizilir (SEM_ZIL). */
.msm-zil {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
    color: #5f6b80; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.msm-zil svg { width: 14px; height: 14px; }
.msm-zil:hover { color: #94a3b8; }
.msm-zil.acik { color: #F5D67B; border-color: rgba(212, 175, 106, 0.5); background: rgba(212, 175, 106, 0.12); }
.msm-zil:disabled { opacity: .4; cursor: wait; }

/* ── TEK DÜĞMELİK AYAR KENDİ SATIRINDA (maket ilkesi 2) ──
   "Görünmez çalış" bir bölüm değil, bir şalter: masa ekranında, kendi
   satırının yanında duruyor. */
.msm-mini-ayar {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
    padding: 9px 11px; border-radius: 12px; font-size: 0.8em;
    background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.09);
}
.msm-mini-ayar .ic { flex: 1; min-width: 0; }
.msm-mini-ayar .ic b { display: block; font-size: 0.95em; font-weight: 600; color: #dbe4f2; }
.msm-mini-ayar .ic small { display: block; font-size: 0.9em; color: #5f6b80; line-height: 1.45; }

/* Şalter: yuvarlak yuva içinde kayan düğme. Renk yalnız AÇIK/KAPALI der. */
.msm-serit-anahtar {
    flex: none; position: relative; width: 42px; height: 25px; border-radius: 13px; cursor: pointer;
    background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); padding: 0;
}
.msm-serit-anahtar .yuva {
    position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
    background: #94a3b8; transition: left .16s ease, background .16s ease;
}
.msm-serit-anahtar.acik, .msm-serit-anahtar[aria-pressed="true"] {
    background: rgba(212, 175, 106, 0.28); border-color: rgba(212, 175, 106, 0.55);
}
.msm-serit-anahtar.acik .yuva, .msm-serit-anahtar[aria-pressed="true"] .yuva {
    left: 20px; background: #F5D67B;
}
.msm-serit-anahtar:disabled { opacity: .5; cursor: wait; }

/* Ayar satırındaki kapı düğmesi (numaranı bağla gibi). */
.msm-ayar-dug {
    flex: none; padding: 7px 13px; border-radius: 99px; cursor: pointer; font: inherit;
    font-size: 0.78em; font-weight: 600; color: #e8d5a8;
    background: rgba(212, 175, 106, 0.12); border: 1px solid rgba(212, 175, 106, 0.45);
}

.msm-ayar-sat {
    display: flex; align-items: center; gap: 11px; padding: 11px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msm-ayar-sat .ic { flex: 1; min-width: 0; }
.msm-ayar-sat .ic b { display: block; font-size: 0.88em; font-weight: 600; color: #dbe4f2; }
.msm-ayar-sat .ic small { display: block; font-size: 0.74em; color: #5f6b80; margin-top: 2px; line-height: 1.45; }
.msm-form {
    border-radius: 13px; background: #0b1226; border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 13px; margin-top: 8px;
}
.msm-form label { display: block; font-size: 0.74em; color: #94a3b8; margin-top: 9px; }
.msm-form label:first-child { margin-top: 0; }
/* box-sizing AÇIKÇA yazılıyor: üç kutulu satır (süre·çalışma·mola) dolgu
   yüzünden kartın dışına taşıyordu. Sayfanın genel kuralına güvenmiyoruz —
   bu dosya başka bir sayfaya da bağlanabilir. */
.msm-form input, .msm-form select {
    display: block; width: 100%; box-sizing: border-box;
    margin-top: 4px; padding: 9px 10px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e6edf7; font: inherit; font-size: 0.9em;
}
.msm-form .msm-alt { font-size: 0.74em; color: #94a3b8; margin-top: 11px; }
.msm-dugme {
    width: 100%; margin-top: 12px; padding: 11px; border-radius: 12px; cursor: pointer;
    background: rgba(212, 175, 106, 0.12); border: 1px solid rgba(212, 175, 106, 0.4);
    color: #e8d5a8; font-family: inherit; font-size: 0.86em; font-weight: 600;
}
.msm-dugme:hover { background: rgba(212, 175, 106, 0.2); }
.msm-dugme:disabled { opacity: .5; cursor: wait; }
/* Hata kızarır ama bağırmaz: somon, kırmızı değil (ürünün dili). */
.msm-hata { margin-top: 9px; font-size: 0.78em; color: #e08a76; line-height: 1.5; }
.msm-hata[hidden] { display: none; }

.msm-plan.yonetim { margin-bottom: 4px; }
.msm-psat .mini {
    flex: none; padding: 5px 10px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 0.76em;
    color: #94a3b8; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
}
.msm-psat .mini:hover { color: #e6edf7; }
.msm-psat .mini.sil { color: #e08a76; border-color: rgba(224, 138, 118, 0.3); }


/* ── çıkışlar ── */
.msm-don {
    display: block; width: 100%; margin-top: 14px; padding: 11px; border-radius: 12px; cursor: pointer;
    background: none; border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1; font-family: inherit; font-size: 0.88em; text-align: center; text-decoration: none;
}
.msm-don:hover { color: #e6edf7; border-color: rgba(255, 255, 255, 0.28); }
/* ÇEVRİLEMEYEN ANAHTAR DÜĞME DEĞİL, YAZIDIR (3 Eyl, ekran denetimi).
   Kurma hakkı dolmuşken "Masa kur" tutulamayan bir sözdü: basınca sunucu
   "Zaten bir masan var" diyordu. Artık düğme çerçevesini bırakır, neden
   olmadığını söyleyen bir satıra döner. */
.msm-don.olmaz {
    border: 0; padding: 9px 0 0; cursor: default;
    color: #6f7d94; font-size: 0.76em; line-height: 1.5;
}

/* Masadan ayrılma — sonuçlu bir iş: "geç" düğmesiyle eşit ağırlıkta
   durmasın diye çerçevesiz, sessiz tek satır (oda.html → .ayril dersi). */
.msm-ayril {
    display: block; margin: 10px auto 0; padding: 8px 14px;
    background: none; border: 0; cursor: pointer; font: inherit;
    font-size: 0.78em; font-weight: 600; color: #e08a76; opacity: 0.75;
    transition: opacity 0.18s;
}
.msm-ayril:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.msm-ayril:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: none; }

/* ═══ AÇIK MASA (28 Ağu) ══════════════════════════════════════════════════
   Masası olmayan öğrencinin gördüğü kapı + açık masalar listesi.
   Karar defteri: _docs/acik-masa-karar-28agu26.md

   ⚠️ SINIF ADI ÇAKIŞMASI: bu dosya ortak bir CSS ile aynı sayfada duruyor;
   ad kapılınca ilgisiz bir ekran sessizce bozuluyor (23 Ağu "Bu hafta").
   Bu yüzden hepsi `msm-am-` önekli.

   🔴 Bu bölümde ASLA olmayacaklar:
     • Satırda süre, yüzde, sıra numarası. Sayı yalnız "kaç kişi çalışıyor".
     • Kalabalık masayı öne çıkaran renk/boyut farkı — sıra sunucudan gelir
       ve kişi sayısına bakmaz; görünüm de bir üstünlük ima etmez.
     • "Kimse yok" cümlesi. Canlı değilse satır randevusunu söyler. */

.msm-am-liste { border-radius: 13px; background: #0b1226;
    border: 1px solid rgba(255, 255, 255, 0.08); padding: 2px 14px; }

.msm-am-satir { display: flex; align-items: center; gap: 12px; padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.msm-am-satir:last-child { border-bottom: none; }
.msm-am-satir .ic { flex: 1; min-width: 0; }
.msm-am-satir .ad { font-size: 0.94em; font-weight: 600; color: #e9eef8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msm-am-satir .dur { display: flex; align-items: center; gap: 7px; margin-top: 4px;
    font-size: 0.78em; color: #8fa2bf; }
.msm-am-satir .dur.canli { color: #cfe0f5; }

/* Tek kapı hâli: liste eşiğin altında. Aynı satır, daha geniş nefes —
   ayrı bir bileşen değil, çünkü ikisi aynı şeydir. */
.msm-am-satir.buyuk { border-radius: 13px; background: #0b1226;
    border: 1px solid rgba(255, 255, 255, 0.08); padding: 15px; border-bottom: none; }
.msm-am-satir.buyuk .ad { font-size: 1.02em; }

/* OCAĞIN KÖZÜ — masa ekranı ve şeritle AYNI işaret (kronometre.css · oda.html).
   Hale kişi sayısıyla büyür, 6 kişide doyar: sayı değil, ısı. Randevu
   satırında köz YOKTUR — orada konuşan söz, ateş değil. */
/* 🔴 28 Ağu — KIZIL KALKTI, KALABALIK RENGİ DEĞİŞTİRMİYOR (kullanıcı kararı).
   Köz gradyanı somona/kızıla kaçıyordu; üründe kırmızı aciliyet YASAK
   (sembol defteri, 4. korkuluk). Şeritte de aynı karar verildi: nokta yalnız
   "biri var mı"yı söyler, üç kişi de otuz kişi de aynı yeşil. Sayıyı metin
   söylüyor. `--koz-hale` artık okunmuyor. */
.msm-am-koz { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ss-var, #7FC79A); box-shadow: 0 0 8px var(--ss-var-hale, rgba(127,199,154,.6)); }

.msm-am-otur { flex: none; padding: 8px 16px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 0.8em; font-weight: 600;
    color: #e8d5a8; background: rgba(212, 175, 106, 0.14);
    border: 1px solid rgba(212, 175, 106, 0.4); }
.msm-am-otur:hover { background: rgba(212, 175, 106, 0.22); }

/* Kendi masan — açık masa varken de HER ZAMAN duruyor. Açık masa bir
   alternatiftir, bir yerine geçen değil. */
.msm-am-kur { border-radius: 13px; background: #0b1226;
    border: 1px solid rgba(255, 255, 255, 0.08); padding: 14px 15px; }
.msm-am-kur .ic b { font-size: 0.94em; font-weight: 600; color: #cbd5e1; display: block; }
.msm-am-kur .ic small { display: block; font-size: 0.78em; color: #5f6b80;
    line-height: 1.5; margin-top: 5px; }


/* ═══ KUTU IZGARASI (30 Ağu · kullanıcı onaylı) ══════════════════════════
   Masalar ekranı liste değil KUTU dizisi: her kutunun içinde masanın
   kendisi çizilir. Yanan lamba sayısı "kaç kişi çalışıyor"u kelimeye
   bakmadan söyler.

   🔴 Bu bölümde ASLA olmayacaklar:
     • Kutuda süre, yüzde, sıra numarası.
     • Kalabalıkla büyüyen parlaklık — bir lamba da altı lamba da aynı yanar.
     • Kalabalık masayı öne çıkaran boyut/renk farkı; sıra sunucudan gelir. */

.msm-am-izgara {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}

.msm-am-kutu {
    display: block; width: 100%; text-align: center; cursor: pointer;
    font-family: inherit; padding: 13px 9px 12px;
    border-radius: 16px; background: #0b1226;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.msm-am-kutu:hover { border-color: rgba(212, 175, 106, 0.28); }
.msm-am-kutu .ad {
    display: block; font-size: 0.86em; font-weight: 600; color: #e9eef8;
    margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msm-am-kutu .rozet {
    display: block; font-size: 0.62em; color: #5f6b80;
    letter-spacing: .3px; text-transform: uppercase; margin-top: 2px;
}
.msm-am-kutu .dur {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    margin-top: 5px; font-size: 0.74em; color: #cfe0f5;
}
.msm-am-kutu .dur .sonuk { color: #5f6b80; }
.msm-am-kutu .dur .ortak { color: var(--ss-ortak, #F5D67B); font-variant-numeric: tabular-nums; }
.msm-am-gir {
    display: inline-block; margin-top: 9px; padding: 6px 16px; border-radius: 99px;
    font-size: 0.74em; font-weight: 600; color: #e8d5a8;
    background: rgba(212, 175, 106, 0.14); border: 1px solid rgba(212, 175, 106, 0.4);
}

/* Kutunun içindeki masa. Ortak saat sürerken çerçeve altına döner. */
.msm-am-gorsel { width: 100%; max-width: 140px; display: block; margin: 0 auto; }
.msm-am-gorsel .tabla { fill: rgba(212, 175, 106, .08); stroke: rgba(212, 175, 106, .32); stroke-width: 1.3; }
.msm-am-gorsel.ortak .tabla { stroke: rgba(245, 214, 123, .55); }

/* LAMBA — salonla AYNI işaret (salon.css). Üç hâl: yanık · kısık · sönük. */
.msm-am-lmb .abajur { fill: rgba(212, 175, 106, .18); }
.msm-am-lmb .hale { opacity: 0; }
.msm-am-lmb.yanik .abajur { fill: var(--ss-ortak, #F5D67B); }
.msm-am-lmb.yanik .hale { opacity: 1; }
.msm-am-lmb.kisik .abajur { fill: rgba(245, 214, 123, .5); }
.msm-am-lmb.kisik .hale { opacity: .45; }
/* Raf rozeti (tuval bütünleşmesi): masanın birlikte bitirdiği şekil sayısı.
   Altın küçük elmas — kutunun kimliği, yarışı değil. */
.msm-am-kutu .sekil {
    display: block; font-size: 0.66em; color: #b79a63; margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
/* 🪑 1 Eyl · SANDALYE SAYISI = kapasite, kalabalık DEĞİL. En sönük satır
   olarak durur: "N kişi burada" tek sayısıyla yarışmasın, onun gölgesinde
   kalsın. Renk bilerek nötr — altın burada bir başarı imasıdır. */
.msm-am-kutu .yer {
    display: block; font-size: 0.64em; color: #5f6b80; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ═══ BİRLEŞİK KART (30 Ağu) ═════════════════════════════════════════════
   Masanın programı + haftalık ortak toplam + senin katkın TEK kartta.
   İki ayrı kart iki ayrı soru soruyordu; tek kart tek hikâye anlatır.
   🔴 Kimsenin yüzdesi görünmez — yalnız KENDİ payın (masa-küme kuralı). */
.msm-bk {
    border-radius: 14px; background: #0b1226;
    border: 1px solid rgba(255, 255, 255, 0.08); padding: 13px 15px; margin-top: 4px;
}
.msm-bk .ust { display: flex; align-items: center; gap: 12px; }
.msm-bk .ust .ic { flex: 1; min-width: 0; }
.msm-bk .etiket {
    font-size: 0.66em; letter-spacing: .6px; text-transform: uppercase; color: #5f6b80;
}
.msm-bk .buyuk {
    font-size: 0.94em; font-weight: 700; color: var(--ss-ortak, #F5D67B);
    margin-top: 3px; font-variant-numeric: tabular-nums;
}
.msm-bk .alt { font-size: 0.74em; color: #94a3b8; margin-top: 2px; line-height: 1.45; }
.msm-bk .kalan {
    flex: none; text-align: center; padding: 8px 13px; border-radius: 12px;
    background: rgba(245, 214, 123, .06); border: 1px solid rgba(245, 214, 123, .28);
}
.msm-bk .kalan.molada {
    background: rgba(127, 199, 154, .06); border-color: rgba(127, 199, 154, .3);
}
.msm-bk .kalan b {
    display: block; font-size: 1.05em; font-weight: 700;
    color: var(--ss-ortak, #F5D67B); font-variant-numeric: tabular-nums;
}
.msm-bk .kalan.molada b { color: var(--ss-var-acik, #9fe0b8); }
.msm-bk .kalan span { display: block; font-size: 0.56em; color: #94a3b8; letter-spacing: .4px; margin-top: 2px; }
.msm-bk .hafta {
    display: flex; gap: 16px; margin-top: 12px; padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.msm-bk .hafta > div { flex: 1; min-width: 0; }
.msm-bk .sayi {
    font-size: 0.94em; font-weight: 700; color: #e9eef8; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.msm-bk .sayi.altin { color: #e8d5a8; }


/* ═══ GİRİŞ RİTÜELİ + KAYIT (30 Ağustos 2026 · karar defteri §2E) ═══════
   İki kapı, ikisi de öğrencinin: "Otur" sistem oturtur, salon ise koltuk
   seçtirir. Kayıt satırı yalnız kaydı açık bir açık masada ve yalnız
   kayıtlı DEĞİLKEN doğar — kayıtlıya "kayıtlısın" demek gereksizdir. */
/* ── 🔴 31 Ağu · TEK EYLEM ŞERİDİ (kullanıcı kararı) ────────────────────
   Otur/Kronometreye dön · Kalk · Ayrıl — hepsi yan yana, tek satırda.
   Soldan sağa ağırlık azalır: birincil altın, ikincil çerçeveli, sonuncusu
   sessiz ve en sağda. Dar ekranda sarılır ama sıra bozulmaz. */
.msm-otur-satir {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 12px 0 2px;
}
/* Anlam satırı: şeridin ALTINDA, tam genişlikte, sessiz. Düğmelerin
   arasına girmez — okunur, dokunulmaz. */

/* ── 🔴 31 Ağu · ADIM ŞERİDİ (kullanıcı fikri: "az yazı, görsellik") ────
   İki bağımsız hâl ve sonucu. Nokta doluysa öyledir, boşsa değildir;
   ok sonucu söyler. Cümle kurmadan anlatır. */
.msm-durum .ad { display: inline-flex; align-items: center; gap: 6px; }
.msm-durum .son { color: #cbd5e1; }
/* İkincil: yapılabilir ama birincil değil. Çerçeve var, dolgu yok. */

/* ── 🔴 31 Ağu · ŞERİDİN KENDİSİ DÜĞMEDİR (kullanıcı kararı) ──────────
   Büyük "Otur"/"Kalk" düğmeleri kalktı: durum ve denetim aynı şeydi, iki
   kez anlatılıyordu. Artık iki anahtar var; nokta doluysa öyledir, dokunmak
   onu çevirir. Şerit yapışkan — büyük salonda aşağı inince de elinin
   altında. */
.msm-otur-satir {
    position: sticky; top: 0; z-index: 4;
    display: block; padding: 11px 0 10px; margin: 12px 0 2px;
    background: linear-gradient(#0f1729 80%, rgba(15, 23, 41, 0));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.msm-anahtarlar { display: flex; gap: 9px; align-items: stretch; }
.msm-anahtar {
    display: inline-flex; align-items: center; gap: 10px;
    flex: 1 1 0; min-width: 0; padding: 10px 14px 10px 10px; border-radius: 14px;
    font-family: inherit; font-size: 0.83em; font-weight: 600; color: #8fa2bf;
    background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer; text-align: left;
    transition: background .18s, border-color .18s, color .18s;
}
/* 🔴 31 Ağu — ETİKET KIRPILMAZ, SARILIR (canlı prova: "Masalarıma …").
   Dar ekranda üç noktaya dönen etiket ne yapacağını söyleyemez. İki
   anahtarı alt alta almak yerine yazıyı sardırıyoruz: yan yana kalıyorlar,
   şerit dikeyde büyümüyor, kelime tam okunuyor. */
.msm-anahtar .yz { white-space: normal; line-height: 1.3; word-break: break-word; }
/* SEMBOL YUVASI — fiziksel bir anahtarın hissi: sönükken boş bir yuva,
   çevirince altınla dolar ve sembol koyulaşır. */
.msm-anahtar .yuva {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18);
    color: #a9bad4;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.msm-anahtar .yuva svg { width: 16px; height: 16px; }
.msm-anahtar:hover .yuva { border-color: rgba(255, 255, 255, 0.24); }
.msm-anahtar:hover { color: #cbd5e1; border-color: rgba(255, 255, 255, 0.22); }
/* AÇIK: bu senin hâlin. Altın, ama bağırmadan. */
.msm-anahtar.acik {
    color: #e8d5a8; background: rgba(212, 175, 106, 0.11);
    border-color: rgba(212, 175, 106, 0.42);
}
.msm-anahtar.acik .yuva {
    background: var(--ss-ortak, #F5D67B); border-color: var(--ss-ortak, #F5D67B);
    color: #16203a; box-shadow: 0 0 0 4px rgba(245, 214, 123, 0.13);
}
.msm-anahtar.acik:hover { background: rgba(212, 175, 106, 0.2); }
/* AĞIR: davetli masadan ayrılmak. Biçim aynı, ton uyarır. */
.msm-anahtar.acik.agir {
    color: #f0c8b8; background: rgba(224, 138, 118, 0.11);
    border-color: rgba(224, 138, 118, 0.4);
}
.msm-anahtar.acik.agir .yuva {
    background: #e8b4a0; border-color: #e8b4a0; color: #2a1613;
    box-shadow: 0 0 0 4px rgba(224, 138, 118, 0.13);
}
/* DURGUN: çevrilecek bir şey yok (kayıt almayan masa). Düğme gibi durmaz. */
.msm-anahtar.durgun { cursor: default; background: none; border-color: rgba(255, 255, 255, 0.06); }
.msm-anahtar:disabled { opacity: .55; cursor: wait; }
@media (max-width: 380px) { .msm-anahtar { padding: 10px 10px 10px 8px; gap: 8px; } }

/* SONUÇ OKU — hüküm değil, sonuç. Dokununca altında tek paragraf açılır. */
.msm-sonuc {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 9px;
    padding: 6px 8px; border-radius: 9px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 0.78em; font-weight: 600; color: #e8d5a8;
    background: none; border: 1px solid transparent; line-height: 1.5;
}
/* 🔴 1 Eyl · SATIR ARTIK HİÇ DOKUNULMAZ: "?" kapısı ve açılan paragraf
   kaldırıldı (kullanıcı kararı). Geriye tek bir cümle kaldı; imleç değişmez,
   üstüne gelince çerçeve yanmaz — çünkü dokunulacak bir şey yok.
   `.ipuc` ve `.msm-uzun` stilleri BİLEREK silindi: ölü kural bırakmıyoruz. */
.msm-sonuc.dugmesiz { cursor: default; }
.msm-sonuc .ok { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
    .msm-anahtar, .msm-anahtar .yuva { transition: none; }
}

/* ── 🔴 31 Ağu · KENDİ ONAY PENCEREMİZ ────────────────────────────────
   Tarayıcının kutusu bizim ürünümüz değil: başka yazı tipi, başka dil,
   adres çubuğuna yapışık. Ürünün en ciddi anı en yabancı ekranında
   geçmesin. Onay düğmesi eylemin ADINI taşır — "Tamam" değil, "Çıkar". */
.msm-onay { position: fixed; inset: 0; z-index: 10090; display: flex;
    align-items: center; justify-content: center; padding: 20px; }
.msm-onay .perde { position: absolute; inset: 0; background: rgba(6, 10, 20, 0.66);
    opacity: 0; transition: opacity .18s ease; }
.msm-onay.acik .perde { opacity: 1; }
.msm-onay .kutu {
    position: relative; width: 100%; max-width: 380px; padding: 20px 20px 16px;
    border-radius: 18px; background: #131c30; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: translateY(10px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.msm-onay.acik .kutu { opacity: 1; transform: none; }
.msm-onay h4 { margin: 0 0 8px; font-size: 1em; font-weight: 700; color: #e9eef8; line-height: 1.4; }
.msm-onay p { margin: 0 0 18px; font-size: 0.84em; color: #a9bad4; line-height: 1.55; }
.msm-onay .eller { display: flex; gap: 9px; }
.msm-onay button {
    flex: 1; padding: 11px 14px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 0.84em; font-weight: 600;
}
.msm-onay .vazgec {
    color: #cbd5e1; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.msm-onay .vazgec:hover { color: #e9eef8; border-color: rgba(255, 255, 255, 0.28); }
.msm-onay .onay {
    color: #e8d5a8; background: rgba(212, 175, 106, 0.16);
    border: 1px solid rgba(212, 175, 106, 0.45);
}
.msm-onay .onay:hover { background: rgba(212, 175, 106, 0.26); }
/* Ağır iş (masadan ayrılma, sahiplik devri): ton uyarır. */
.msm-onay .onay.agir {
    color: #f0c8b8; background: rgba(224, 138, 118, 0.14); border-color: rgba(224, 138, 118, 0.45);
}
.msm-onay .onay.agir:hover { background: rgba(224, 138, 118, 0.24); }
@media (prefers-reduced-motion: reduce) {
    .msm-onay .perde, .msm-onay .kutu { transition: none; }
}
.msm-otur-not { font-size: 0.72em; color: #5f6b80; line-height: 1.4; }

.msm-kayit-satir {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px; padding: 12px 14px; border-radius: 13px;
    background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.10);
}
.msm-kayit-satir .ic { flex: 1; min-width: 0; }
.msm-kayit-satir b { display: block; font-size: 0.84em; font-weight: 600; color: #e9eef8; }
.msm-kayit-satir .alt {
    display: block; font-size: 0.72em; color: #94a3b8; margin-top: 3px; line-height: 1.45;
}

/* ═══ KENDİ AYNAN (30 Ağu · K26) ═══════════════════════════════════════
   Tek satır, YALNIZ kişiye. Sicil değil ayna. Soru kademesinde çerçeve
   altına döner — ceza rengi (kızıl) YOK: burası bir soru, bir yargı değil. */
.msm-ayna {
    margin-top: 12px; padding: 11px 14px; border-radius: 13px;
    background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.10);
}
.msm-ayna .satir { font-size: 0.78em; color: #94a3b8; line-height: 1.5; }
.msm-ayna .satir b { color: #e9eef8; font-weight: 700; font-variant-numeric: tabular-nums; }
.msm-ayna.soru { border-color: rgba(212, 175, 106, 0.34); }
.msm-ayna .soru-metin {
    font-size: 0.78em; color: #e8d5a8; line-height: 1.5;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.msm-ayna .soru-eller { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.msm-ince {
    background: none; border: 0; padding: 6px 2px; cursor: pointer; font-family: inherit;
    font-size: 0.72em; color: #8595b0; text-decoration: underline;
}

/* ── Şimdi birlikte (1 Eyl · ikili kurgu) ────────────────────────────────
   Ortak saat kartının altında tek geniş düğme. Altın çerçeve, sakin zemin —
   bir çağrıdır, alarm değil. */
.msm-simdi {
    display: block; width: 100%; margin-top: 10px; padding: 11px 14px;
    background: rgba(212,175,106,0.10); color: #e8d5a8;
    border: 1px solid rgba(212,175,106,0.4); border-radius: 11px;
    font-family: inherit; font-size: 0.86em; font-weight: 700;
    letter-spacing: 0.02em; cursor: pointer;
}
.msm-simdi:active { background: rgba(212,175,106,0.2); }
.msm-simdi:disabled { opacity: .6; cursor: wait; }

/* ── Kese satırı (1 Eyl): masa hakkı kapıda görünür ─────────────────────── */
.msm-kese { text-align:center; font-size:0.72em; color:#8fa2bf; margin:14px 0 2px; }
/* 7 Eyl · İSTİSNA KENDİ SATIRINI ALIR. "Açık masalar bu haktan yemez"
   cümlesi eskiden ana satırın SONUNA "·" ile iliştirilmişti; kimse oraya
   bakmıyor ve öğrenci "masam var ama 0 diyor" çelişkisiyle kalıyordu.
   Kendi satırında, bir ton daha sessiz. */
.msm-kese .ana { display:block; }
.msm-kese .fisilti { display:block; margin-top:3px; opacity:.62; font-size:0.94em; }

/* Mola çağrısının altındaki tek satır kural (1 Eyl) — dokunmadan önce bilinsin. */
.msm-mola-not { font-size:0.72em; color:#8fa2bf; text-align:center; margin-top:7px; line-height:1.5; }
.msm-simdi.msm-mola { background:rgba(255,255,255,0.05); color:#cbd5e1; border-color:rgba(255,255,255,0.16); }

/* ═══ AYARLAR: KART DEĞİL, SAYFA — DÖRT KAPI (6 Eyl · maket B) ═══════════
   Dişli tam ekran açar; içinde dört kapı, her biri kendi sayfası. Kurulumla
   aynı üç başlık (Masa · Saat · Kapı) + Kişiler. Kapının altında o anki
   durum: açmadan da görürsün. 🔒 Geniş ekranda yan yana sütun YOK. */
.msm-kapilar { display: grid; gap: 9px; margin-top: 4px; }
.msm-kapi {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px 14px; border-radius: 14px; cursor: pointer; font: inherit; color: #e9eef8;
    background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.09);
}
.msm-kapi:hover { border-color: rgba(212, 175, 106, 0.35); }
.msm-kapi .ikon {
    width: 34px; height: 34px; border-radius: 11px; flex: none;
    display: flex; align-items: center; justify-content: center; color: #e8d5a8;
    background: rgba(212, 175, 106, 0.1); border: 1px solid rgba(212, 175, 106, 0.28);
}
.msm-kapi .ikon svg { width: 17px; height: 17px; }
.msm-kapi .ic { flex: 1; min-width: 0; }
.msm-kapi .ic b { display: block; font-size: 0.92em; font-weight: 600; }
.msm-kapi .ic small {
    display: block; font-size: 0.76em; color: #5f6b80; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msm-kapi .ok { color: #5f6b80; flex: none; }
.msm-ayar-govde { padding: 2px 0 10px; }
/* Sayfanın alt satırı: dokunuşun anlık karşılığı (sunucunun reddi gibi). */
.msm-sayfa-not {
    margin-top: 12px; padding: 9px 12px; border-radius: 10px; font-size: 0.78em; color: #e8c08a;
    background: rgba(212, 175, 106, 0.07); border: 1px solid rgba(212, 175, 106, 0.3); line-height: 1.5;
}
.msm-sayfa-not[hidden] { display: none; }

/* Öğretici kutu — süreç en başta anlatır; kurulum ve ayarlar aynı kutuyla konuşur. */
.msm-ogret {
    display: flex; gap: 10px; padding: 11px 12px; border-radius: 13px; margin-top: 12px;
    background: rgba(143, 180, 217, 0.07); border: 1px solid rgba(143, 180, 217, 0.28);
}
.msm-ogret .ay { flex: none; color: #8FB4D9; font-size: 1.05em; line-height: 1.2; }
.msm-ogret .yz { font-size: 0.78em; color: #cfe0f6; line-height: 1.55; }
.msm-ogret .yz b { color: #fff; }
/* Engel kutusu: ne oldu · neden · şimdi ne yapabilirsin. Somon, kırmızı değil. */
.msm-engel {
    padding: 12px 14px; border-radius: 13px; margin-top: 4px;
    background: rgba(224, 138, 118, 0.07); border: 1px solid rgba(224, 138, 118, 0.32);
}
.msm-engel b { display: block; font-size: 0.95em; color: #f3d2c6; margin-bottom: 4px; }
.msm-engel p { margin: 0; font-size: 0.8em; color: #d7c3bd; line-height: 1.55; }
.msm-engel.sakin { background: rgba(143, 180, 217, 0.07); border-color: rgba(143, 180, 217, 0.3); }
.msm-engel.sakin b { color: #dbe9f8; }
.msm-engel.sakin p { color: #c3d3e6; }

/* ═══ ZAMAN ŞERİDİ — saatin görünen hâli (6 Eyl · maket B) ═══════════════
   🔑 Mola ALÇAK çizilir, çalışma dolu: şerit bir nefes eğrisi gibi okunur.
   Parçalar bitişik değil (3 px), her biri kendi köşesini taşır. Eğik doku
   YALNIZ sınav provasında. Ölçüldü: çalışma 32 px / mola 17 px. */
.msm-serit-kap { margin-top: 12px; }
.msm-serit {
    display: flex; align-items: center; gap: 3px; height: 40px; padding: 3px;
    border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07);
}
.msm-serit .p {
    display: flex; align-items: center; justify-content: center; min-width: 0;
    font-size: 0.62em; font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden;
    border-radius: 8px;
}
.msm-serit .p.calis {
    height: 100%; color: #f2dfb4;
    background: linear-gradient(180deg, rgba(212, 175, 106, 0.30), rgba(212, 175, 106, 0.17));
    box-shadow: inset 0 1px 0 rgba(245, 214, 123, 0.32), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.msm-serit .p.mola {
    height: 54%; color: #c6dcf3; border-radius: 6px;
    background: linear-gradient(180deg, rgba(143, 180, 217, 0.26), rgba(143, 180, 217, 0.13));
    box-shadow: inset 0 1px 0 rgba(143, 180, 217, 0.28);
}
.msm-serit .p.tek {
    background: linear-gradient(180deg, rgba(212, 175, 106, 0.28), rgba(212, 175, 106, 0.15)),
        repeating-linear-gradient(115deg, rgba(245, 214, 123, 0.05) 0 7px, transparent 7px 15px);
}
.msm-serit .p small { font-weight: 400; opacity: 0.72; margin-left: 4px; }
.msm-serit-uc {
    display: flex; align-items: center; gap: 9px; margin-top: 8px;
    font-size: 0.7em; color: #5f6b80; font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
}
.msm-serit-uc .cizgi {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 60%, transparent);
}
.msm-serit-uc .cizgi.sag {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 60%, transparent);
}
.msm-serit-uc .sure {
    color: #e8d5a8; font-weight: 600; font-size: 0.94em; padding: 2px 9px; border-radius: 99px;
    border: 1px solid rgba(212, 175, 106, 0.28); background: rgba(212, 175, 106, 0.07);
}
.msm-serit-yz { font-size: 0.74em; color: #8fa2bf; margin-top: 9px; line-height: 1.55; }
.msm-serit-yz b { color: #e8d5a8; }
.msm-serit-yz.uyari { color: #e8c08a; }

/* Kurulu / eklenmiş saat satırı — TEK SATIR (6 Eyl karar 5): gün · saat ·
   süre · ritim. Dokununca açılır; şerit ve düğmeleri orada belirir. */
.msm-saat-sat {
    margin-top: 7px; border-radius: 11px; overflow: hidden;
    background: rgba(127, 199, 154, 0.07); border: 1px solid rgba(127, 199, 154, 0.3);
}
.msm-saat-sat.pasif { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.1); }
.msm-saat-sat.acik { border-color: rgba(212, 175, 106, 0.5); background: rgba(212, 175, 106, 0.07); }
.msm-saat-sat .bas {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 10px 12px; font: inherit; font-size: 0.82em; color: #e9eef8;
    background: none; border: 0; cursor: pointer;
}
.msm-saat-sat > .tik, .msm-saat-sat .bas .tik { color: #7FC79A; flex: none; }
.msm-saat-sat.pasif .tik { color: #5f6b80; }
.msm-saat-sat.acik .tik { color: #e8d5a8; }
.msm-saat-sat .m { flex: 1; min-width: 0; font-weight: 600; }
.msm-saat-sat .m small { display: block; font-weight: 400; color: #5f6b80; font-size: 0.86em; margin-top: 1px; }
.msm-saat-sat .ok { color: #5f6b80; font-size: 0.9em; flex: none; }
.msm-saat-sat .govde { padding: 0 12px 12px; }
.msm-saat-sat .govde .msm-dugmeler button.sil { color: #e08a76; border-color: rgba(224, 138, 118, 0.35); }
/* Sihirbazdaki satır: düğme değil, düz satır + ✕ */
.msm-saat-sat > .tik { padding-left: 12px; }
.msm-saat-sat > .m { padding: 10px 0; font-size: 0.82em; }
.msm-saat-sat:has(> .m) { display: flex; align-items: center; gap: 9px; }
/* 🔴 6 Eyl (kullanıcı: "çarpının şekli kötü, satırdan sarkmış") · ✕ SATIRIN
   İÇİNDE DURUR. Kalın gri bir madalyon gibi duruyordu: iki satırlık metnin
   yanında dikey olarak ortalanmıyor, kenardan taşıyordu. Artık satırla aynı
   yüksekliğe oturan, çerçevesiz ve sessiz bir kapatma — dokunma alanı 32 px
   (parmak ölçüsü) ama görünen iz küçük. */
.msm-saat-sat .x {
    flex: none; align-self: center; margin: 0 4px 0 2px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 9px; cursor: pointer; background: none; border: 0;
    color: #5f6b80; font: inherit; font-size: 1em; line-height: 1;
}
.msm-saat-sat .x:hover { color: #e6edf7; background: rgba(255, 255, 255, 0.06); }
.msm-ekle {
    display: block; width: 100%; margin-top: 9px; padding: 11px; border-radius: 12px; cursor: pointer;
    text-align: center; font: inherit; font-size: 0.82em; font-weight: 600; color: #e8d5a8;
    border: 1px dashed rgba(212, 175, 106, 0.45); background: rgba(212, 175, 106, 0.05);
}

/* ═══ SİHİRBAZ EKLERİ (6 Eyl) ═══════════════════════════════════════════ */
.msm-kur-giris.hatali { border-color: rgba(224, 138, 118, 0.6); }
.msm-dugme.birincil { background: #d4af6a; color: #1a1408; font-weight: 700; padding: 13px; }
.msm-dugme.birincil:hover { background: #dcb97a; }
/* Sönük "Devam": dokunulmaz ve öyle görünür (ad boşken · saat yokken). */
.msm-dugme.sonuk, .msm-dugme.sonuk:hover {
    color: #5f6b80; background: none; border: 1px solid rgba(255, 255, 255, 0.16); font-weight: 600; opacity: 1; cursor: default;
}
.msm-dugme.wa { color: #062b16; background: #25D366; font-weight: 700; }
.msm-dugme.wa:hover { background: #3ddc76; }
.msm-don.sessiz { border: 0; color: #5f6b80; font-size: 0.8em; margin-top: 10px; padding: 8px; }
.msm-don.sessiz:hover { color: #cbd5e1; }
/* Özet kartı: açılıştaki üç adım · 3. adımdaki canlı özet */
.msm-ozet-kart {
    margin-top: 14px; padding: 13px 14px; border-radius: 14px;
    border: 1px solid rgba(212, 175, 106, 0.3); background: rgba(212, 175, 106, 0.05);
}
.msm-ozet-sat { display: flex; gap: 10px; padding: 7px 0; font-size: 0.82em; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.msm-ozet-sat:last-child { border-bottom: 0; }
.msm-ozet-sat .k { width: 74px; flex: none; color: #5f6b80; font-size: 0.9em; }
.msm-ozet-sat .v { flex: 1; font-weight: 600; color: #dbe4f2; }
/* Kuruldu ekranı: masanın çizimi büyük (tek çizici, büyük boy) */
.msm-kuruldu-cizim { display: flex; justify-content: center; padding: 14px 0 6px; color: #d4af6a; }
.msm-kuruldu-cizim svg { max-width: 100%; }
.msm-kuruldu-cizim svg { width: 190px; height: auto; }
.msm-kuruldu-ad { text-align: center; font-size: 1.15em; font-weight: 700; color: #edf1f9; margin-top: 2px; }
.msm-kuruldu-alt { text-align: center; font-size: 0.76em; color: #5f6b80; margin-top: 3px; line-height: 1.5; }