/* Katılma (davet + ad), avatar editörü, yemin, lobi masası, geri sayım (tasarim/lobi.html). Sahibi B3.
   Krem üstünde yazı için: --yesil-yazi (#136F43) ve --kirmizi-yazi (#C2343A); dolgu ve ikonlarda asıl tonlar. */
.e-katil, .e-lobi, .avatar-govde {
  --yesil-yazi: #136F43; --kirmizi-yazi: #C2343A; --sen: #FFE9A6;
  --t13: 13px; --t15: 15px; --t17: 17px; --t20: 20px; --t26: 26px; --t34: 34px; --t48: 48px; --t96: 96px;
  --ust-h: 96px; --kenar: 44px; --alt: 36px; --parca: 136px; --av: 128px; --onizleme: 444px;
}
.e-katil, .e-lobi { display: grid; grid-template-rows: var(--ust-h) minmax(0, 1fr); }
.e-lobi svg, .e-katil svg, .avatar-govde svg { display: block; }

/* ---------- Üst şerit ---------- */
.lobi-serit { display: flex; align-items: center; gap: 16px; padding: 0 var(--kenar); min-width: 0; }
.lobi-serit .bosluk { flex: 1; }
.lobi-serit .hap { height: 42px; background: rgba(34, 24, 46, .25); color: #fff; }
.lobi-serit :focus-visible { outline-color: #fff; }
.lobi-serit .adimlar { display: flex; gap: 6px; list-style: none; margin: 0; padding: 4px; border-radius: 999px; background: rgba(34, 24, 46, .25); }
.lobi-serit .adimlar li { height: 38px; padding: 0 14px 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; }
.lobi-serit .adimlar li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 var(--t15) var(--font); font-style: normal; background: rgba(34, 24, 46, .35); }
.lobi-serit .adimlar li i svg { width: 14px; height: 14px; }
.lobi-serit .adimlar li[aria-current="step"] { background: var(--krem); color: var(--murekkep); }
.lobi-serit .adimlar li[aria-current="step"] i { background: var(--murekkep); color: var(--krem); }
.lobi-serit .adimlar li.bitti i { background: var(--krem); color: var(--yesil-yazi); }
.lobi-serit .cik { height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(34, 24, 46, .25); color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.lobi-serit .cik svg { width: 18px; height: 18px; }
.lobi-serit .ses-dugme { background: rgba(34, 24, 46, .25); }

/* ---------- Ortak düğmeler (lobi dili) ---------- */
.e-katil .dugme, .e-lobi .dugme, .avatar-govde .dugme { height: 68px; padding: 0 28px; font-size: var(--t20); text-decoration: none; }
.e-lobi .dugme svg, .e-katil .dugme svg, .avatar-govde .dugme svg { width: 22px; height: 22px; flex: none; }
.e-lobi .dugme.ikinci { font-size: var(--t17); }
.dugme.yan { background: var(--krem-2); color: var(--murekkep); box-shadow: 0 5px 0 var(--krem-3); height: 56px !important; font-size: var(--t17) !important; padding: 0 20px !important; }
.dugme.yan:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--krem-3); }
.dugme.yan:disabled { background: var(--krem-2); color: var(--murekkep-3); box-shadow: none; }
.dugme.yan:disabled svg { opacity: .5; }
.metin-dugme, .metin-link { border: 0; background: none; padding: 6px 2px; font-weight: 700; color: var(--murekkep-2); text-decoration: underline; text-underline-offset: 4px; }
.metin-link { color: var(--murekkep); font-size: var(--t15); white-space: nowrap; }

/* ---------- Fiyat etiketi (oda kodu) ---------- */
.e-katil .etiket, .e-lobi .etiket { position: relative; width: 372px; height: 148px; flex: none; }
.e-katil .etiket > svg, .e-lobi .etiket > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.e-katil .etiket .ic, .e-lobi .etiket .ic { position: absolute; left: 82px; right: 22px; top: 0; bottom: 0; display: grid; align-content: center; }
.e-katil .etiket small, .e-lobi .etiket small { font: 700 var(--t15) var(--font); color: var(--murekkep); }
.e-katil .etiket b, .e-lobi .etiket b { font: 800 var(--t96)/.92 var(--font); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--murekkep); }

/* =========================================================
   1. DAVET + AD
   ========================================================= */
.e-katil .sahne-govde { display: grid; place-items: center; padding: 0 var(--kenar) var(--alt); min-height: 0; }
.e-katil .masa-sahne { position: relative; width: 1180px; max-width: 100%; --kh: 172px; --kb: 34px; --kw: 112px; --ky: 152px; }
.e-katil .masa-sahne .koltuklar { position: relative; display: flex; align-items: flex-end; height: var(--kh); padding: 0 0 0 64px; margin-bottom: calc(var(--kb) * -1); }
.e-katil .masa-sahne .koltuk { position: relative; width: var(--kw); height: var(--kh); flex: none; }
.e-katil .masa-sahne .koltuk .yuz { position: absolute; left: 50%; bottom: 0; width: var(--ky); height: var(--ky); margin-left: calc(var(--ky) / -2); z-index: 1; }
.e-katil .masa-sahne .koltuk .yuz svg { width: 100%; height: 100%; }
.e-katil .masa-sahne .koltuk .isimlik { position: absolute; left: 50%; top: calc(var(--kh) - var(--kb) + 12px); transform: translateX(-50%); z-index: 3; height: 34px; padding: 0 12px; min-width: 76px; border-radius: 10px; background: var(--krem-2); box-shadow: 0 3px 0 var(--krem-3); font: 800 var(--t15)/34px var(--font); text-align: center; white-space: nowrap; }
.e-katil .masa-sahne .koltuk.sahip .isimlik { background: var(--murekkep); color: var(--krem); box-shadow: 0 3px 0 #0F0A16; }
.e-katil .masa-sahne .anahtar-rozet { position: absolute; left: 50%; top: 2px; margin-left: 18px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--gunes); border: 3px solid var(--murekkep); display: grid; place-items: center; }
.e-katil .masa-sahne .anahtar-rozet svg { width: 18px; height: 18px; }
.e-katil .masa-sahne .koltuk.ben { width: calc(var(--kw) + 38px); }
.e-katil .masa-sahne .koltuk.ben .isimlik { background: var(--sen); box-shadow: 0 3px 0 #E8C766; min-width: 96px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.e-katil .masa-sahne .koltuk.ben .isimlik.bos { color: var(--murekkep-2); }
.e-katil .masa-sahne .koltuk.fazla { width: 120px; }
.e-katil .masa-sahne .koltuk.fazla .yuz { display: grid; place-items: end center; }
.e-katil .masa-sahne .koltuk.fazla .yuz span { width: 92px; height: 92px; margin-bottom: 56px; border-radius: 50%; background: rgba(34, 24, 46, .25); color: #fff; display: grid; place-items: center; font: 800 var(--t26) var(--font); }
.e-katil .masa-kart { position: relative; z-index: 2; padding: 76px 56px 48px; border-radius: 34px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; box-shadow: 0 8px 0 var(--zemin-koyu); }
.e-katil .masa-kart .pane { display: grid; align-content: start; gap: 24px; min-width: 0; }
.e-katil .masa-kart .pane h1, .e-katil .masa-kart .pane .baslik { margin: 0; font: 800 var(--t48)/1.04 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.e-katil .masa-kart .pane p { margin: 0; font-size: var(--t20); color: var(--murekkep-2); max-width: 36ch; }
.e-katil .cta-satir { display: flex; align-items: center; gap: 24px; margin-top: 8px; }
.e-katil .cta-satir small { font-size: var(--t15); color: var(--murekkep-2); font-weight: 600; max-width: 22ch; }
.e-katil .oda-ozet { display: grid; align-content: start; gap: 16px; padding-left: 40px; border-left: 2px dashed var(--krem-3); }
.e-katil .oda-ozet .etiket { width: 300px; height: 119px; margin: -8px 0 4px -6px; transform: rotate(-4deg); }
.e-katil .oda-ozet .etiket .ic { left: 66px; right: 16px; }
.e-katil .oda-ozet .etiket b { font-size: 76px; }
.e-katil .oda-ozet .mod { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.e-katil .oda-ozet .mod svg { width: 96px; height: auto; }
.e-katil .oda-ozet h2 { margin: 0; font: 800 var(--t26)/1.1 var(--font); letter-spacing: -.02em; }
.e-katil .oda-ozet .not { color: var(--murekkep-2); font-weight: 600; font-size: var(--t15); }
.e-katil dl.degerler, .e-lobi dl.degerler { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.e-katil dl.degerler dt, .e-lobi dl.degerler dt { font: 600 var(--t13) var(--font); color: var(--murekkep-2); }
.e-katil dl.degerler dd, .e-lobi dl.degerler dd { margin: 0; font: 800 var(--t20)/1.2 var(--font); font-variant-numeric: tabular-nums; }
.e-katil .ad-alan { display: grid; gap: 10px; }
.e-katil .ad-kutu { position: relative; display: flex; align-items: center; height: 88px; border-radius: 24px; background: var(--krem-2); box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .15s; }
.e-katil .ad-kutu:focus-within { box-shadow: inset 0 0 0 3px var(--murekkep); }
.e-katil .ad-kutu.hatali { box-shadow: inset 0 0 0 3px var(--kirmizi-yazi); }
.e-katil .ad-kutu input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0 24px; font: 800 var(--t34) var(--font); letter-spacing: -.02em; outline: none; caret-color: var(--zemin); }
.e-katil .ad-kutu input::placeholder { color: var(--murekkep-3); }
.e-katil .ad-kutu .sayac { padding-right: 24px; font: 700 var(--t15) var(--font); color: var(--murekkep-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-katil .ad-kutu .sayac.asti { color: var(--kirmizi-yazi); }
.e-katil .ad-ipucu { font-size: var(--t15); color: var(--murekkep-2); font-weight: 600; min-height: 22px; }
.e-katil .ad-hata { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t17); font-weight: 700; color: var(--kirmizi-yazi); min-height: 24px; }
.e-katil .ad-hata svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.e-katil .ad-hata:empty { display: none; }
.e-katil .oneriler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.e-katil .oneriler:empty { display: none; }
.e-katil .oneriler span { font-size: var(--t15); font-weight: 600; color: var(--murekkep-2); margin-right: 4px; }
.e-katil .oneriler button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--krem-2); font-weight: 800; box-shadow: 0 3px 0 var(--krem-3); }
.e-katil .oneriler button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--krem-3); }
.e-katil .form-alt { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.e-katil .dugme[disabled] { background: var(--murekkep-2); color: var(--krem); }

/* =========================================================
   2. AVATAR EDİTÖRÜ (lobi ve profil)
   ========================================================= */
.lobi-govde { padding: 0 var(--kenar) var(--alt); min-height: 0; }
.avatar-govde { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 28px; min-height: 0; }
.avatar-govde .onizleme-kart { padding: 28px 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 0; }
.avatar-govde .onizleme { position: relative; width: var(--onizleme); height: var(--onizleme); flex: none; border-radius: 40px; overflow: hidden; }
.avatar-govde .onizleme svg { width: 100%; height: 100%; }
.avatar-govde .onizleme-ad { height: 40px; padding: 0 16px; border-radius: 12px; background: var(--sen); box-shadow: 0 3px 0 #E8C766; font: 800 var(--t20)/40px var(--font); white-space: nowrap; margin-top: -36px; position: relative; z-index: 2; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.avatar-govde .ifade-dene, .avatar-govde .boyutlar { width: 100%; display: grid; gap: 8px; }
.avatar-govde .ifade-dene > span, .avatar-govde .boyutlar > span { font: 700 var(--t15) var(--font); color: var(--murekkep-2); }
.avatar-govde .segment { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--krem-2); }
.avatar-govde .segment button { flex: 1; height: 44px; border: 0; border-radius: 12px; background: none; font: 800 var(--t15) var(--font); color: var(--murekkep-2); white-space: nowrap; }
.avatar-govde .segment button[aria-pressed="true"] { background: var(--krem); color: var(--murekkep); box-shadow: 0 2px 0 var(--krem-3); }
.avatar-govde .boyutlar .sira { display: flex; align-items: flex-end; gap: 20px; padding: 12px 16px; border-radius: 18px; background: var(--krem-2); }
.avatar-govde .boyutlar .b { display: grid; justify-items: center; gap: 6px; font: 700 var(--t13) var(--font); color: var(--murekkep-2); }
.avatar-govde .boyutlar .b > span { display: block; overflow: hidden; }
.avatar-govde .boyutlar .b svg { width: 100%; height: 100%; }
.avatar-govde .boyutlar .b72 > span { width: 72px; height: 72px; border-radius: 20px; }
.avatar-govde .boyutlar .b56 > span { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--murekkep); }
.avatar-govde .boyutlar .b36 > span { width: 36px; height: 36px; border-radius: 10px; }
.avatar-govde .onizleme-eylem { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.avatar-govde .zar svg { transform-origin: 50% 50%; }
.avatar-govde .duzenle-kart { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 24px 28px 22px; min-height: 0; min-width: 0; }
.avatar-govde .sekmeler { display: flex; gap: 4px; padding: 4px; border-radius: 18px; background: var(--krem-2); justify-self: start; max-width: 100%; }
.avatar-govde .sekmeler button { height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: none; font: 800 var(--t17) var(--font); color: var(--murekkep-2); white-space: nowrap; }
.avatar-govde .sekmeler button[aria-selected="true"] { background: var(--krem); color: var(--murekkep); box-shadow: 0 2px 0 var(--krem-3); }
.avatar-govde .bolumler { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 24px 44px; padding: 24px 4px 16px; min-height: 0; overflow: auto; }
.avatar-govde .bolum { flex: 1 1 100%; min-width: 0; }
.avatar-govde .bolum.yarim { flex: 1 1 calc(50% - 22px); }
.avatar-govde .bolum h3 { margin: 0 0 12px; font: 800 var(--t20) var(--font); display: flex; gap: 10px; align-items: baseline; }
.avatar-govde .bolum h3 small { font: 600 var(--t15) var(--font); color: var(--murekkep-2); }
.avatar-govde .izgara { display: grid; grid-template-columns: repeat(auto-fill, var(--parca)); gap: 12px; }
.avatar-govde .parca { position: relative; width: var(--parca); border: 0; padding: 6px 6px 8px; border-radius: 20px; background: var(--krem-2); display: grid; grid-template-rows: auto 1fr; gap: 6px; justify-items: center; text-align: center; }
.avatar-govde .parca .kucuk { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.avatar-govde .parca .kucuk svg { width: 100%; height: 100%; }
.avatar-govde .parca .kucuk.yok-ik { display: grid; place-items: center; background: none; border: 3px dashed var(--krem-3); color: var(--murekkep-2); }
.avatar-govde .parca .kucuk.yok-ik svg { width: 30%; height: 30%; }
.avatar-govde .parca .ad { font: 700 var(--t15)/1.15 var(--font); color: var(--murekkep-2); align-self: center; text-wrap: balance; }
.avatar-govde .parca[aria-checked="true"] { background: var(--krem); box-shadow: inset 0 0 0 4px var(--murekkep); }
.avatar-govde .parca[aria-checked="true"] .ad { color: var(--murekkep); }
.avatar-govde .parca .secili { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--murekkep); display: none; place-items: center; }
.avatar-govde .parca .secili svg { width: 15px; height: 15px; }
.avatar-govde .parca[aria-checked="true"] .secili { display: grid; }
.avatar-govde .parca .art { position: absolute; left: 4px; top: 4px; line-height: 0; z-index: 1; }
.avatar-govde .parca[aria-checked="true"] .art { left: 8px; top: 8px; }
.avatar-govde .cipler { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.avatar-govde .cip-renk { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--murekkep); padding: 0; display: grid; place-items: center; }
.avatar-govde .cip-renk svg { width: 22px; height: 22px; display: none; }
.avatar-govde .cip-renk[aria-checked="true"] { box-shadow: 0 0 0 4px var(--krem), 0 0 0 7px var(--murekkep); }
.avatar-govde .cip-renk[aria-checked="true"] svg { display: block; }
.avatar-govde .duzenle-alt { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; border-top: 2px dashed var(--krem-3); }
.avatar-govde .duzenle-alt p { margin: 0; color: var(--murekkep-2); font-weight: 600; font-size: var(--t15); }

/* =========================================================
   3. YEMİN
   ========================================================= */
.e-lobi .yemin-govde { display: grid; grid-template-columns: 440px 820px; justify-content: center; align-items: center; gap: 56px; }
.e-lobi .yemin-kisi { position: relative; width: 440px; }
.e-lobi .yemin-kisi svg { width: 100%; height: auto; overflow: visible; }
.e-lobi .yemin-kisi .el { transform-origin: 70px 150px; }
.e-lobi .levha { position: relative; padding: 44px 48px 40px; display: grid; gap: 24px; }
.e-lobi .levha h1 { margin: 0; font: 800 var(--t48)/1.04 var(--font); letter-spacing: -.035em; }
.e-lobi .levha > p { margin: -12px 0 0; color: var(--murekkep-2); font-size: var(--t20); }
.e-lobi .sozler { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.e-lobi .sozler li { display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: center; font: 700 var(--t20)/1.3 var(--font); }
.e-lobi .sozler li svg { width: 60px; height: 60px; }
.e-lobi .levha .uyari { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 20px; background: var(--krem-2); }
.e-lobi .levha .uyari svg { width: 52px; height: 60px; }
.e-lobi .levha .uyari b { display: block; font: 800 var(--t20) var(--font); color: var(--kirmizi-yazi); }
.e-lobi .levha .uyari span { font-weight: 600; color: var(--murekkep); font-size: var(--t17); }
.e-lobi .tut-satir { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.e-lobi .tut { position: relative; height: 80px; border: 0; border-radius: 24px; padding: 0; background: var(--krem-2); box-shadow: 0 6px 0 var(--krem-3); font: 800 var(--t26) var(--font); letter-spacing: -.01em; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.e-lobi .tut.basili { transform: translateY(4px); box-shadow: 0 2px 0 var(--krem-3); }
.e-lobi .tut span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.e-lobi .tut span svg { width: 30px; height: 30px; }
.e-lobi .tut .dolgu { background: var(--murekkep); color: var(--krem); clip-path: inset(0 100% 0 0); }
.e-lobi .tut:disabled { cursor: default; }
.e-lobi .tut.tamam .dolgu { background: var(--yesil-yazi); }
.e-lobi .tut-ipucu { font-size: var(--t15); font-weight: 700; color: var(--murekkep-2); max-width: 15ch; line-height: 1.3; }
.e-lobi .levha .damga { position: absolute; right: 40px; top: 22px; width: 230px; pointer-events: none; opacity: 0; transform: rotate(-11deg); }
.e-lobi .levha .damga svg { width: 100%; height: auto; }

/* =========================================================
   4. LOBİ MASASI
   ========================================================= */
.e-lobi .masa-govde { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; }
.e-lobi .lobi-ust { display: grid; grid-template-columns: minmax(0, 1fr) 720px; gap: 28px; align-items: center; }
.e-lobi .davet-alan { display: flex; align-items: center; gap: 36px; min-width: 0; }
.e-lobi .davet-alan .etiket { transform: rotate(-3deg); }
.e-lobi .paylas { display: grid; gap: 14px; min-width: 0; }
.e-lobi .paylas .link { font: 800 var(--t20) var(--font); color: var(--murekkep); user-select: all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-lobi .paylas .link small { display: block; font: 700 var(--t15) var(--font); }
.e-lobi .paylas .sira { display: flex; gap: 12px; flex-wrap: wrap; }
.e-lobi .paylas .dugme { height: 56px; font-size: var(--t17); padding: 0 20px; border-radius: 18px; }
.e-lobi .ayar-kart { padding: 20px 24px 20px 12px; display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 12px; align-items: center; }
.e-lobi .ayar-kart .ciz { width: 172px; }
.e-lobi .ayar-kart .ciz svg { width: 100%; height: auto; }
.e-lobi .ayar-kart .bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.e-lobi .ayar-kart h2 { margin: 0; font: 800 var(--t26)/1.1 var(--font); letter-spacing: -.02em; }
.e-lobi .ayar-kart .bas > span { font-weight: 700; font-size: var(--t15); color: var(--murekkep-2); white-space: nowrap; }
.e-lobi .ayar-kart .not { font-weight: 600; font-size: var(--t15); color: var(--murekkep-2); margin: 0 0 10px; }
.e-lobi .ayar-kart dl.degerler { grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 28px; margin: 0; }
.e-lobi .masa-lobi { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; padding: 20px 24px; min-height: 0; }
.e-lobi .masa-bas { display: flex; align-items: baseline; gap: 14px; padding: 0 4px; }
.e-lobi .masa-bas h2 { margin: 0; font: 800 var(--t26) var(--font); letter-spacing: -.02em; }
.e-lobi .masa-bas span { font: 700 var(--t17) var(--font); color: var(--murekkep-2); font-variant-numeric: tabular-nums; }
.e-lobi .koltuk-izgara { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; min-height: 0; }
.e-lobi .yer { position: relative; border-radius: 24px; background: var(--krem-2); display: grid; justify-items: center; align-content: center; gap: 4px; padding: 12px 8px; min-width: 0; min-height: 0; }
.e-lobi .yer.sen { background: var(--sen); }
.e-lobi .yer.sen .tabak { box-shadow: 0 0 0 3px var(--krem); }
.e-lobi .yer.kopuk .tabak, .e-lobi .yer.kopuk b { opacity: .5; }
.e-lobi .yer .tabak { position: relative; width: var(--av); height: var(--av); border-radius: 28px; overflow: hidden; flex: none; }
.e-lobi .yer .tabak svg { width: 100%; height: 100%; }
.e-lobi .yer.vip .tabak { box-shadow: 0 0 0 4px var(--gunes), 0 0 0 7px var(--murekkep); }
.e-lobi .yer b { margin-top: 6px; font: 800 var(--t20)/1.15 var(--font); letter-spacing: -.01em; max-width: 100%; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }  /* ad asla kesilmez */
.e-lobi .yer b em { font-style: normal; font-weight: 600; color: var(--murekkep-2); font-size: var(--t15); }
.e-lobi .yer .durum { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--t15) var(--font); color: var(--murekkep-2); white-space: nowrap; }
.e-lobi .yer .durum svg { width: 18px; height: 18px; flex: none; }
.e-lobi .yer .durum.hazir { color: var(--yesil-yazi); }
.e-lobi .yer .rozet { position: absolute; top: 10px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font: 800 var(--t13) var(--font); white-space: nowrap; z-index: 2; }
.e-lobi .yer .rozet svg { width: 16px; height: 16px; }
.e-lobi .yer .rozet.sahip { left: 10px; background: var(--murekkep); color: var(--gunes); }
.e-lobi .yer .rozet.vip { right: 10px; background: var(--gunes); color: var(--murekkep); padding: 0 10px 0 4px; }
.e-lobi .yer .rozet.vip svg { width: 18px; height: 18px; }
.e-lobi .yer .yer-dugme { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--krem); font: 800 var(--t13) var(--font); white-space: nowrap; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 0 #E8C766; }
.e-lobi .yer:hover .yer-dugme, .e-lobi .yer .yer-dugme:focus-visible { opacity: 1; }
.e-lobi .yer .yer-at { position: absolute; right: 8px; bottom: 8px; min-width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--krem); color: var(--murekkep-2); display: grid; place-items: center; opacity: 0; transition: opacity .15s; font: 800 var(--t13) var(--font); }
.e-lobi .yer .yer-at svg { width: 14px; height: 14px; }
.e-lobi .yer:hover .yer-at, .e-lobi .yer .yer-at:focus-visible, .e-lobi .yer .yer-at.onayla { opacity: 1; }
.e-lobi .yer .yer-at.onayla { padding: 0 10px; background: var(--kirmizi-yazi); color: #fff; }
.e-lobi .yer.bos { background: none; box-shadow: inset 0 0 0 2px var(--krem-2); }
.e-lobi .yer.bos .sandalye { width: 48px; height: 48px; }
.e-lobi .yer.bos.davet { box-shadow: none; padding: 0; display: flex; }
.e-lobi .yer.bos.davet button { flex: 1; border: 3px dashed var(--murekkep-3); border-radius: 24px; background: none; display: grid; place-content: center; justify-items: center; gap: 8px; font: 800 var(--t17) var(--font); color: var(--murekkep); }
.e-lobi .yer.bos.davet button svg { width: 40px; height: 40px; }
.e-lobi .yer.bos.davet small { font: 600 var(--t15) var(--font); color: var(--murekkep-2); }
.e-lobi .balon { position: absolute; left: 50%; top: -8px; z-index: 6; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px 0 8px; border-radius: 18px; background: var(--krem); border: 3px solid var(--murekkep); box-shadow: 0 4px 0 var(--murekkep); font: 800 var(--t17) var(--font); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.e-lobi .balon::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 16px; margin-left: -8px; background: var(--krem); border-right: 3px solid var(--murekkep); border-bottom: 3px solid var(--murekkep); transform: rotate(45deg); border-bottom-right-radius: 4px; }
.e-lobi .balon svg { width: 40px; height: 40px; }
.e-lobi .masa-alt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 16px 4px 0; border-top: 2px dashed var(--krem-3); }
.e-lobi .tepkiler { display: flex; gap: 8px; align-items: center; }
.e-lobi .tepkiler > span { font: 700 var(--t15) var(--font); color: var(--murekkep-2); margin-right: 6px; }
.e-lobi .tepki { min-width: 76px; height: 76px; border: 0; border-radius: 18px; background: var(--krem-2); display: grid; justify-items: center; align-content: center; gap: 2px; padding: 0 6px; font: 700 var(--t13) var(--font); color: var(--murekkep); white-space: nowrap; }
.e-lobi .tepki svg { width: 40px; height: 40px; }
.e-lobi .tepki:active { transform: scale(.94); }
.e-lobi .durum-cumle { text-align: right; min-width: 0; }
.e-lobi .durum-cumle b { display: block; font: 800 var(--t26)/1.15 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.e-lobi .durum-cumle span { font: 600 var(--t15) var(--font); color: var(--murekkep-2); }
.e-lobi .baslat-alan { position: relative; display: flex; align-items: center; gap: 16px; }
.e-lobi .baslat-alan > .dugme.ana { height: 72px; padding: 0 36px; font-size: var(--t26); }
.e-lobi .baslat-alan .mini { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; flex: none; }
.e-lobi .baslat-alan .mini svg { width: 100%; height: 100%; }
.e-lobi .anahtar-satir { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 16px 0 24px; border: 0; border-radius: 22px; background: var(--murekkep); color: var(--krem); font: 800 var(--t26) var(--font); box-shadow: 0 6px 0 #0F0A16; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background .2s; }
.e-lobi .anahtar-satir:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #0F0A16; }
.e-lobi .anahtar-satir:disabled { opacity: .5; cursor: default; }
.e-lobi .anahtar-satir .kol { position: relative; width: 72px; height: 42px; border-radius: 999px; background: rgba(255, 247, 236, .22); transition: background .2s; }
.e-lobi .anahtar-satir .kol::after { content: ''; position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; border-radius: 50%; background: var(--krem); transition: transform .25s var(--yay); }
.e-lobi .anahtar-satir[aria-checked="true"] { background: var(--yesil-yazi); box-shadow: 0 6px 0 #0B4D2D; }
.e-lobi .anahtar-satir[aria-checked="true"] .kol { background: rgba(255, 247, 236, .35); }
.e-lobi .anahtar-satir[aria-checked="true"] .kol::after { transform: translateX(30px); }
.e-lobi .onay { position: absolute; right: 0; bottom: calc(100% + 18px); width: 460px; padding: 22px 24px; border-radius: 24px; background: var(--krem); border: 3px solid var(--murekkep); box-shadow: 0 6px 0 var(--murekkep); z-index: 10; display: grid; gap: 10px; }
.e-lobi .onay h3 { margin: 0; font: 800 var(--t26)/1.15 var(--font); letter-spacing: -.02em; }
.e-lobi .onay p { margin: 0; color: var(--murekkep-2); font-weight: 600; }
.e-lobi .onay .kimler { font-weight: 700; color: var(--murekkep); }
.e-lobi .onay .sira { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.e-lobi .onay .dugme { height: 56px; font-size: var(--t17); padding: 0 20px; border-radius: 18px; }
.e-lobi .onay::after { content: ''; position: absolute; right: 60px; bottom: -14px; width: 20px; height: 20px; background: var(--krem); border-right: 3px solid var(--murekkep); border-bottom: 3px solid var(--murekkep); transform: rotate(45deg); }

/* Geri sayım */
.e-lobi .geri { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--murekkep); color: var(--krem); }
.e-lobi .geri .orta { display: grid; justify-items: center; gap: 32px; }
.e-lobi .geri .etiket.buyuk { width: 560px; height: 223px; }
.e-lobi .geri .etiket.buyuk .ic { left: 120px; right: 30px; justify-items: center; }
.e-lobi .geri .etiket.buyuk b { font-size: 170px; letter-spacing: -.02em; line-height: .9; }
.e-lobi .geri .etiket.buyuk b.soz { font-size: var(--t96); letter-spacing: -.03em; }
.e-lobi .geri p { margin: 0; font: 700 var(--t26) var(--font); color: var(--krem); }

/* Lobide "Ayarları değiştir" penceresi (oda kurma paneli) */
.lobi-ayar-pencere { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 44px; }
.lobi-ayar-pencere .karart { position: absolute; inset: 0; background: rgba(34, 24, 46, .55); }
.lobi-ayar-pencere .pencere-ic { position: relative; width: min(1700px, 100%); height: min(940px, 100%); display: grid; }
.lobi-ayar-pencere .kur-govde { min-height: 0; }
.lobi-ayar-pencere .pencere-kapat { position: absolute; right: -14px; top: -14px; z-index: 3; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--krem); box-shadow: 0 0 0 3px var(--murekkep); display: grid; place-items: center; }
.lobi-ayar-pencere .pencere-kapat svg { width: 22px; height: 22px; }

/* =========================================================
   1280×720 ve kısa ekranlar: aynı düzen, sıkı ölçü
   ========================================================= */
@media (max-height: 860px), (max-width: 1500px) {
  .e-katil, .e-lobi, .avatar-govde { --ust-h: 76px; --kenar: 28px; --alt: 24px; --parca: 96px; --av: 76px; --onizleme: 262px;
    --t48: 38px; --t34: 28px; --t26: 22px; --t20: 18px; --t17: 16px; --t96: 72px; }
  .lobi-serit .logo-ok { font-size: 28px; } .lobi-serit .logo-ok svg { width: 150px; }
  .e-katil .dugme, .e-lobi .dugme, .avatar-govde .dugme { height: 58px; font-size: var(--t17); padding: 0 22px; border-radius: 18px; }
  .e-katil .masa-sahne { width: 1000px; --kh: 132px; --kb: 26px; --kw: 88px; --ky: 118px; }
  .e-katil .masa-sahne .koltuklar { padding-left: 44px; }
  .e-katil .masa-sahne .koltuk .isimlik { height: 30px; line-height: 30px; font-size: var(--t13); min-width: 64px; padding: 0 10px; }
  .e-katil .masa-sahne .anahtar-rozet { width: 28px; height: 28px; margin-left: 14px; } .masa-sahne .anahtar-rozet svg { width: 15px; height: 15px; }
  .e-katil .masa-kart { padding: 56px 40px 36px; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; border-radius: 28px; }
  .e-katil .masa-kart .pane { gap: 18px; }
  .e-katil .oda-ozet { padding-left: 28px; gap: 12px; }
  .e-katil .oda-ozet .etiket { width: 250px; height: 99px; } .e-katil .oda-ozet .etiket .ic { left: 54px; } .e-katil .oda-ozet .etiket b { font-size: 62px; }
  .e-katil .oda-ozet .mod { grid-template-columns: 72px 1fr; } .oda-ozet .mod svg { width: 72px; }
  .e-katil .ad-kutu { height: 72px; border-radius: 20px; } .ad-kutu input { padding: 0 20px; }
  .avatar-govde { grid-template-columns: 360px minmax(0, 1fr); gap: 20px; }
  .avatar-govde .onizleme-kart { padding: 20px 20px 18px; gap: 12px; }
  .avatar-govde .onizleme { border-radius: 30px; }
  .avatar-govde .segment button { height: 38px; font-size: var(--t13); }
  .avatar-govde .boyutlar { gap: 4px; } .avatar-govde .boyutlar .sira { padding: 8px 12px; gap: 14px; }
  .avatar-govde .boyutlar .b72 > span { width: 52px; height: 52px; border-radius: 15px; } .avatar-govde .boyutlar .b56 > span { width: 40px; height: 40px; } .avatar-govde .boyutlar .b36 > span { width: 28px; height: 28px; border-radius: 8px; }
  .avatar-govde .onizleme-ad { height: 34px; line-height: 34px; margin-top: -30px; }
  .dugme.yan { height: 48px !important; font-size: var(--t15) !important; padding: 0 14px !important; }
  .avatar-govde .duzenle-kart { padding: 16px 20px; }
  .avatar-govde .sekmeler button { height: 40px; padding: 0 12px; font-size: var(--t15); }
  .avatar-govde .bolumler { gap: 14px 28px; padding: 16px 2px 10px; }
  .avatar-govde .bolum h3 { margin-bottom: 8px; font-size: var(--t17); }
  .avatar-govde .parca { padding: 4px 4px 6px; border-radius: 16px; gap: 4px; }
  .avatar-govde .parca .kucuk { border-radius: 11px; }
  .avatar-govde .parca .ad { font-size: var(--t13); }
  .avatar-govde .cip-renk { width: 42px; height: 42px; }
  .avatar-govde .cipler { gap: 10px; }
  .avatar-govde .duzenle-alt { padding-top: 12px; }
  .e-lobi .yemin-govde { grid-template-columns: 300px 720px; gap: 32px; }
  .e-lobi .yemin-kisi { width: 300px; }
  .e-lobi .levha { padding: 28px 32px; gap: 16px; }
  .e-lobi .sozler li { grid-template-columns: 44px 1fr; gap: 14px; font-size: var(--t17); }
  .e-lobi .sozler li svg { width: 44px; height: 44px; }
  .e-lobi .levha .uyari { grid-template-columns: 40px 1fr; padding: 12px 16px; } .levha .uyari svg { width: 40px; height: 46px; }
  .e-lobi .levha .uyari span { font-size: var(--t15); }
  .e-lobi .tut { height: 64px; }
  .e-lobi .levha .damga { width: 170px; right: 24px; top: 14px; }
  .e-lobi .masa-govde { gap: 16px; }
  .e-lobi .lobi-ust { grid-template-columns: minmax(0, 1fr) 470px; gap: 20px; }
  .e-lobi .ayar-kart dl.degerler { grid-template-columns: repeat(4, auto); }
  .e-lobi .etiket { width: 272px; height: 108px; } .e-lobi .etiket .ic { left: 60px; right: 16px; } .e-lobi .etiket small { font-size: var(--t13); }
  .e-lobi .davet-alan { gap: 24px; }
  .e-lobi .paylas { gap: 10px; } .e-lobi .paylas .dugme { height: 44px; font-size: 14px; padding: 0 12px; border-radius: 14px; gap: 8px; }
  .e-lobi .paylas .dugme svg { width: 18px; height: 18px; }
  .e-lobi .paylas .sira { gap: 8px; }
  .e-lobi .ayar-kart { grid-template-columns: 116px minmax(0, 1fr); padding: 14px 18px 14px 8px; gap: 8px; }
  .e-lobi .ayar-kart .ciz { width: 116px; }
  .e-lobi .ayar-kart .not { margin-bottom: 6px; }
  .e-lobi .ayar-kart dl.degerler { gap: 2px 18px; }
  .e-katil dl.degerler dd, .e-lobi dl.degerler dd { font-size: var(--t17); }
  .e-lobi .masa-lobi { padding: 14px 16px; gap: 10px; }
  .e-lobi .koltuk-izgara { gap: 10px; }
  .e-lobi .yer { border-radius: 18px; padding: 8px 6px; gap: 2px; }
  .e-lobi .yer .tabak { border-radius: 20px; }
  .e-lobi .yer b { font-size: var(--t17); margin-top: 4px; }
  /* dar koltukta "(sen)" yazısı yer kaplamasın: koltuk zaten sarı; ekran okuyucu için kalır */
  .e-lobi .yer b em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .e-lobi .yer .durum { font-size: var(--t13); } .yer .durum svg { width: 15px; height: 15px; }
  .e-lobi .yer .rozet { top: 6px; height: 24px; font-size: 0; padding: 0 5px; gap: 0; }
  .e-lobi .yer .rozet.sahip { left: 6px; } .yer .rozet.vip { right: 6px; }
  .e-lobi .yer .yer-dugme { bottom: 4px; height: 26px; font-size: 12px; padding: 0 8px; }
  .e-lobi .yer.bos.davet button svg { width: 30px; height: 30px; }
  .e-lobi .masa-alt { padding-top: 10px; gap: 16px; }
  .e-lobi .tepki { min-width: 56px; height: 60px; border-radius: 14px; } .tepki svg { width: 30px; height: 30px; }
  .e-lobi .tepkiler > span { display: none; }
  .e-lobi .baslat-alan > .dugme.ana, .e-lobi .anahtar-satir { height: 60px; font-size: var(--t20); padding: 0 24px; }
  .e-lobi .anahtar-satir { padding: 0 12px 0 18px; } .anahtar-satir .kol { width: 60px; height: 36px; } .anahtar-satir .kol::after { width: 26px; height: 26px; } .anahtar-satir[aria-checked="true"] .kol::after { transform: translateX(24px); }
  .e-lobi .baslat-alan .mini { width: 40px; height: 40px; }
  .e-lobi .balon { height: 46px; font-size: var(--t15); } .e-lobi .balon svg { width: 30px; height: 30px; }
  .e-lobi .geri .etiket.buyuk { width: 420px; height: 167px; } .e-lobi .geri .etiket.buyuk .ic { left: 90px; } .e-lobi .geri .etiket.buyuk b { font-size: 128px; }
  .lobi-ayar-pencere { padding: 16px 24px; }
  .lobi-ayar-pencere .pencere-ic { overflow: auto; border-radius: 30px; }
}
.e-katil .oda-ozet .mod svg { max-width: 100%; height: auto; }