/* Görünüme özel düzenler */

/* Ana sayfa */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: clamp(28px, 5vw, 72px); padding-top: clamp(40px, 7vw, 96px); align-items: end; }
.home-intro h1 { font-size: var(--fs-display); letter-spacing: -0.045em; line-height: .92; }
.home-intro .lead { margin-top: 28px; color: var(--text); }
/* Geniş ekranda ad solda, açıklama sağda; dar ekranda üç sütun */
.home-modes { display: grid; gap: 18px; margin-top: 44px; }
.home-modes > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; }
.home-modes h2 { font-size: var(--fs-section); }
.home-modes p { color: var(--muted); }
.home-entry { display: grid; gap: var(--gap); }
.home-entry form { display: grid; gap: var(--gap); }
.home-entry h2 { font-size: var(--fs-title); }
.block-head { display: flex; align-items: end; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin-bottom: 24px; }
.block-head h1, .block-head h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.035em; }

.room-list { display: grid; }
.room-row { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--surface); transition: background .15s; }
.room-row:hover { background: var(--surface); }
.room-row small { display: block; color: var(--faint); }
.room-row-code { width: 72px; font-size: 20px; font-weight: 600; letter-spacing: .12em; }
.room-row-state { color: var(--muted); font-size: 13px; }
.room-row-count { width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Oda */
.room-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px 0; }
.room-code { display: flex; align-items: baseline; gap: 10px; }
.room-code .muted { font-size: 13px; }
.room-code strong { font-size: 28px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.room-meta { color: var(--muted); }
.room-top-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.phases { display: flex; gap: 4px; }
.phases li { font-size: 13px; color: var(--faint); padding: 4px 10px; border-radius: var(--radius-control); }
.phases li.is-on { color: var(--text); background: var(--raised); }
.room { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.room-side { position: sticky; top: 84px; display: grid; gap: var(--gap); }

.players { display: grid; gap: 2px; margin-top: 12px; }
.player { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; }
.player:hover { background: var(--raised); }
.player.is-off { opacity: .45; }
.player-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-status { color: var(--faint); }
.player-tools { display: none; gap: 8px; }
.player:hover .player-tools, .player:focus-within .player-tools { display: flex; }

.chat { display: grid; gap: 10px; }
.chat-log { height: 200px; overflow: auto; display: grid; align-content: start; gap: 4px; font-size: 14px; }
.reacts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.reacts button { height: 36px; border: 0; border-radius: 10px; background: var(--raised); font-size: 18px; transition: background .15s, transform .1s; }
.reacts button:hover { background: var(--control); }
.reacts button:active { transform: scale(.9); }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode { display: grid; gap: 4px; text-align: left; padding: 16px 18px; border: 0; border-radius: 14px; background: var(--raised); transition: background .15s; }
.mode strong { font-size: var(--fs-section); }
.mode span { color: var(--muted); font-size: 14px; }
.mode:hover:not(:disabled) { background: var(--control); }
.mode.is-on { background: var(--text); color: var(--inverse); }
.mode.is-on span { color: inherit; opacity: .72; }
.mode:disabled { cursor: default; }

.chosen { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 22px; align-items: start; }
.chosen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-media); }

.mic { display: grid; gap: 6px; width: 200px; font-size: 13px; }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--positive); transform: scaleX(0); transform-origin: left; transition: transform .06s linear; }

.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vote { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; border: 0; border-radius: var(--radius-card); background: var(--surface); transition: background .15s, transform .1s; }
.vote:hover:not(:disabled) { background: var(--raised); }
.vote:active:not(:disabled) { transform: scale(.98); }
.vote.is-on { background: var(--text); color: var(--inverse); }
.vote.is-on .muted { color: inherit; opacity: .72; }
.vote:disabled { opacity: .4; cursor: default; }

.ranking { display: grid; gap: 4px; }
.ranking li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--raised); }
.ranking li.is-win { background: var(--text); color: var(--inverse); }
.ranking li.is-win .muted { color: inherit; opacity: .72; }
.finale { padding: 64px var(--pad); display: grid; gap: 18px; justify-items: start; }

.gate { max-width: 440px; margin: 0 auto; display: grid; gap: var(--gap); }

/* Editör */
.clock strong { font-size: 24px; font-variant-numeric: tabular-nums; margin-left: 6px; }
.hold { width: 100%; height: 52px; user-select: none; touch-action: none; }
.hold.is-holding { background: var(--text); color: var(--tally); }
.line-form { display: grid; grid-template-columns: 100px 100px 150px 1fr; gap: 10px; align-items: end; }
.line-form .wide { grid-column: auto; }
.ed-lines { display: grid; gap: 10px; max-height: 620px; overflow: auto; }
/* Üst sıra: zamanlar, karakter, düğmeler · alt sıra: tam genişlikte replik */
.ed-line { display: grid; grid-template-columns: 30px 74px 74px 1fr auto; gap: 6px; align-items: center; padding: 10px; border-radius: 14px; background: var(--raised); }
.ed-line > :nth-child(5) { grid-column: 2 / -1; grid-row: 2; }
/* Replik numarası: kaydetme uyarısındaki numarayla aynı */
.ed-num { align-self: start; display: grid; place-items: center; height: 34px; border-radius: 10px; background: var(--control); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-line .input { background: var(--control); }
.ed-line .input { height: 34px; padding: 0 10px; font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .room { grid-template-columns: 1fr; }
  .room-side { position: static; }
}
@media (max-width: 960px) {
  .home-hero { grid-template-columns: 1fr; align-items: start; row-gap: 24px; }
  /* Küçük ekranda form, mod açıklamalarından önce gelsin */
  .home-intro { display: contents; }
  .home-intro .lead { margin-top: 0; }
  .home-entry { order: 1; }
  .home-modes { order: 2; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
  .home-modes > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) {
  .modes, .chosen { grid-template-columns: 1fr; }
  .phases { display: none; }
  .line-form { grid-template-columns: 1fr 1fr; }
  .line-form .wide { grid-column: 1 / -1; }
  .room-row-state { display: none; }
}

/* Sahne hazırlığı */
.prep { display: grid; justify-items: center; gap: 18px; text-align: center; padding-block: 48px; }
.prep-reel { display: flex; gap: 10px; }
.prep-reel span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--text); border-top-color: transparent; animation: prep-spin 1.4s linear infinite; }
.prep-reel span + span { animation-duration: 1.9s; }
.prep-joke { min-height: 3em; max-width: 30em; font-size: 18px; line-height: 1.5; opacity: 0; transform: translateY(6px); }
.prep-joke.is-in { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
.prep-bar { width: min(420px, 100%); height: 8px; border-radius: 99px; background: var(--control); overflow: hidden; }
.prep-bar span { display: block; height: 100%; width: 3%; border-radius: inherit; background: var(--progress); transition: width .8s ease; }
.prep-why { max-width: 34em; font-size: 14px; }
@keyframes prep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prep-reel span { animation: none; } .prep-joke.is-in { transition: none; } }

/* Seçili öğe üzerine gelince kararmasın: kendi renginde kalır, yalnızca hafif tonlanır */
.mode.is-on:hover:not(:disabled), .vote.is-on:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 88%, var(--ground)); }

/* Sahne ekle: link → kırp → otomatik hazırlık */
.import { display: grid; gap: 18px; }
.import .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.import .lead { color: var(--text); }
.small { font-size: 13px; }
.import-steps { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: step; }
.import-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 500; }
.import-steps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--raised); font-size: 12px; }
.import-steps li.is-on { color: var(--text); }
.import-steps li.is-on::before { background: var(--text); color: var(--inverse); }
.import-steps li.is-done::before { content: "✓"; background: var(--positive); color: #fff; }
.import-link { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; max-width: 720px; }
.import-rules { display: grid; gap: 8px; max-width: 720px; color: var(--muted); font-size: 14px; }
.import-rules strong { color: var(--text); font-weight: 600; }
.import-trim { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.import-clip-title { margin-top: 10px; }
.trim-rail { position: relative; height: 44px; border-radius: 10px; background: var(--raised); cursor: pointer; touch-action: none; user-select: none; }
.trim-window { position: absolute; top: 0; bottom: 0; min-width: 12px; border-radius: 10px; background: color-mix(in srgb, var(--tally) 28%, transparent); box-shadow: inset 0 0 0 2px var(--tally); cursor: grab; }
.trim-handle { position: absolute; top: 0; bottom: 0; width: 14px; background: var(--tally); cursor: ew-resize; }
.trim-handle[data-h="in"] { left: 0; border-radius: 10px 0 0 10px; }
.trim-handle[data-h="out"] { right: 0; border-radius: 0 10px 10px 0; }
.trim-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); pointer-events: none; }
.trim-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trim-times > div { display: grid; gap: 4px; align-content: start; }
.trim-times strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.trim-times .btn { justify-self: start; }
.import-progress { display: grid; gap: 18px; max-width: 640px; }
.prep-steps { display: grid; gap: 10px; }
.prep-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.prep-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--faint); flex: none; }
.prep-steps li.is-on { color: var(--text); font-weight: 600; }
.prep-steps li.is-on .prep-dot { border-color: var(--tally); background: var(--tally); animation: prep-pulse 1.2s ease-in-out infinite; }
.prep-steps li.is-done { color: var(--text); }
.prep-steps li.is-done .prep-dot { border-color: var(--positive); background: var(--positive); }
@keyframes prep-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .prep-steps li.is-on .prep-dot { animation: none; } }
@media (max-width: 860px) {
  .import-trim { grid-template-columns: 1fr; }
  .import-link { grid-template-columns: 1fr; }
  .trim-times { grid-template-columns: 1fr 1fr; }
}

/* Editör: içe aktarılan sahnede konuşmacı onayı ve karakter adı değiştirme */
.speaker-check { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0 0 20px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 3px 0 0 var(--tally); }
.speaker-check[hidden] { display: none; }
.speaker-check .grow { min-width: 240px; }
.chip .chip-name { padding: 0; font-size: 13px; font-weight: 500; color: var(--text); cursor: text; border-bottom: 1px dashed var(--faint); }
.chip-input { height: 30px; width: 140px; padding: 0 10px; font-size: 13px; }