/* =============================================================================
 * duello.css — Düello lobby + arena styles (uses app.css design tokens)
 * ===========================================================================*/

/* ---------- shared bits ---------- */

/* Tailwind preflight resets <button type="button"> backgrounds and beats the
   layered .lbtn rule; app.css only ever used .lbtn on anchors. Restore it for
   the real buttons Duello uses. */
button.lbtn { background: var(--brand); color: #fff; border: 0; }
button.lbtn:hover { background: var(--brand-strong); }
button.lbtn.lbtn--ghost { background: transparent; color: var(--brand-ink); border: 1px solid var(--line); }
button.lbtn.lbtn--ghost:hover { background: var(--brand-soft); }

.duel-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.duel-pill {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-outline-variant);
  background: var(--c-surface-lowest); color: var(--c-on-surface);
  font: 600 13px Inter, sans-serif; cursor: pointer; transition: all .15s;
  user-select: none;
}
.duel-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
.duel-pill.is-on {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.duel-field-label {
  display: block; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-on-surface-variant); margin: 14px 0 8px;
}
.duel-avatar {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary); font: 800 15px Manrope, sans-serif;
}
.duel-avatar--lg { width: 72px; height: 72px; font-size: 24px; }
.duel-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 999px; font: 600 11px Inter, sans-serif;
}
.duel-badge--green { background: #e7f6ec; color: #1a7f37; }
.duel-badge--amber { background: #fdf3e0; color: #9a6700; }
.duel-badge--blue  { background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary); }
.duel-badge--red   { background: #fdecea; color: #ba1a1a; }
[data-theme="dark"] .duel-badge--green { background: #123a21; color: #6fdd93; }
[data-theme="dark"] .duel-badge--amber { background: #3a2f12; color: #e3b341; }
[data-theme="dark"] .duel-badge--red   { background: #3c1513; color: #ff8a80; }

/* ---------- lobby: stats strip ---------- */
.duel-stats-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px;
}
@media (min-width: 768px) { .duel-stats-strip { grid-template-columns: repeat(6, 1fr); } }
.duel-stat {
  border: 1px solid var(--c-outline-variant); border-radius: 14px; padding: 12px 8px;
  background: var(--c-surface-lowest); text-align: center;
}
.duel-stat b { display: block; font: 800 20px Manrope, sans-serif; color: var(--c-on-surface); }
.duel-stat span { font: 600 10px/1.2 "JetBrains Mono", monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-on-surface-variant); }
.duel-stat--win b { color: #1a7f37; }
.duel-stat--loss b { color: #ba1a1a; }
.duel-stat--point b { color: var(--c-primary); }

/* ---------- lobby: online list ---------- */
.duel-lobby-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.duel-lobby-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--c-outline-variant); border-radius: 14px;
  background: var(--c-surface-lowest);
}
.duel-lobby-row .nm { font: 700 14px Inter, sans-serif; color: var(--c-on-surface); }
.duel-lobby-row .st { font: 500 12px Inter, sans-serif; color: var(--c-on-surface-variant); }
.duel-lobby-empty {
  text-align: center; padding: 22px 12px; color: var(--c-on-surface-variant);
  font: 500 13px Inter, sans-serif; border: 1px dashed var(--c-outline-variant); border-radius: 14px;
}
.duel-mini-btn {
  padding: 7px 12px; border-radius: 10px; font: 700 12px Inter, sans-serif;
  cursor: pointer; border: 0; transition: all .15s; display: inline-flex; align-items: center; gap: 5px;
}
.duel-mini-btn--solid { background: var(--c-primary); color: #fff; }
.duel-mini-btn--solid:hover { filter: brightness(1.08); }
.duel-mini-btn--ghost { background: transparent; color: var(--c-primary);
  border: 1px solid var(--c-outline-variant); }
.duel-mini-btn--ghost:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.duel-mini-btn--red { background: transparent; color: #ba1a1a; border: 1px solid var(--c-outline-variant); }
.duel-mini-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- invite modal ---------- */
.duel-modal-back {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(3px);
}
.duel-modal {
  width: 100%; max-width: 420px; border-radius: 20px; background: var(--c-surface-lowest);
  border: 1px solid var(--c-outline-variant); padding: 26px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: duelPop .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes duelPop { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
.duel-modal h3 { font: 800 20px Manrope, sans-serif; color: var(--c-on-surface); margin: 12px 0 4px; }
.duel-modal .meta { font: 500 13px Inter, sans-serif; color: var(--c-on-surface-variant); }
.duel-modal .ttl {
  margin: 14px auto 0; width: 54px; height: 54px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--c-primary); color: var(--c-primary);
  font: 800 20px Manrope, sans-serif;
}

/* ---------- arena ---------- */
.arena-wrap { max-width: 880px; margin: 0 auto; }
.arena-phase { display: none; }
.arena-phase.is-on { display: block; animation: duelFade .3s ease; }
@keyframes duelFade { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* search / radar */
.arena-radar {
  width: 130px; height: 130px; margin: 34px auto 20px; border-radius: 999px; position: relative;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c-primary) 16%, transparent) 0%, transparent 65%);
  display: flex; align-items: center; justify-content: center;
}
.arena-radar::before, .arena-radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--c-primary); opacity: 0; animation: radar 2.2s ease-out infinite;
}
.arena-radar::after { animation-delay: 1.1s; }
@keyframes radar { 0% { scale: .55; opacity: .7; } 100% { scale: 1.25; opacity: 0; } }
.arena-radar .material-symbols-outlined { font-size: 52px !important; color: var(--c-primary); }

/* vs screen */
.arena-vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 30px 0; }
.arena-vs .side {
  flex: 1; max-width: 260px; text-align: center; padding: 22px 14px;
  border: 1px solid var(--c-outline-variant); border-radius: 18px; background: var(--c-surface-lowest);
}
.arena-vs .side .nm { font: 800 16px Manrope, sans-serif; color: var(--c-on-surface); margin-top: 10px; }
.arena-vs .side .rec { font: 500 12px Inter, sans-serif; color: var(--c-on-surface-variant); margin-top: 3px; }
.arena-vs .mid { font: 900 30px Manrope, sans-serif; color: var(--c-primary); flex: none; }
.arena-count {
  width: 92px; height: 92px; margin: 6px auto 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; font: 900 42px Manrope, sans-serif;
  animation: duelPulse 1s ease infinite;
}
@keyframes duelPulse { 0%,100% { scale: 1; } 50% { scale: 1.1; } }

/* play HUD */
.arena-hud {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch;
  margin-bottom: 16px;
}
.hud-side {
  border: 1px solid var(--c-outline-variant); border-radius: 16px; padding: 10px 14px;
  background: var(--c-surface-lowest); display: flex; align-items: center; gap: 10px; min-width: 0;
}
.hud-side.is-me { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); }
.hud-side .who { min-width: 0; }
.hud-side .nm { font: 700 13px Inter, sans-serif; color: var(--c-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-side .sc { font: 800 22px Manrope, sans-serif; color: var(--c-primary); line-height: 1.1; }
.hud-side .pr { font: 600 11px "JetBrains Mono", monospace; color: var(--c-on-surface-variant); }
.hud-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }
.hud-timer {
  width: 74px; height: 74px; border-radius: 999px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--c-primary) calc(var(--p, 1) * 360deg), var(--c-outline-variant) 0);
}
.hud-timer::before { content: ""; position: absolute; inset: 6px; border-radius: 999px; background: var(--c-surface); }
.hud-timer b { position: relative; font: 800 20px Manrope, sans-serif; color: var(--c-on-surface); }
.hud-timer.is-low { background: conic-gradient(#ba1a1a calc(var(--p,1) * 360deg), var(--c-outline-variant) 0); }
.hud-timer.is-low b { color: #ba1a1a; }
.hud-qno { font: 700 11px "JetBrains Mono", monospace; color: var(--c-on-surface-variant); }
.hud-pace { margin-top: 2px; }

/* progress dots */
.hud-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.hud-dots i {
  width: 9px; height: 9px; border-radius: 3px; background: var(--c-outline-variant); display: block;
}
.hud-dots i.d { background: #1a7f37; }
.hud-dots i.y { background: #ba1a1a; }
.hud-dots i.b { background: #9a6700; }
.hud-dots i.n { background: var(--c-outline-variant); opacity: .5; }

/* question card */
.arena-q {
  border: 1px solid var(--c-outline-variant); border-radius: 20px; padding: 22px;
  background: var(--c-surface-lowest); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}
.arena-q .tags { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.arena-q .stem { font: 500 16px/1.65 Inter, sans-serif; color: var(--c-on-surface); white-space: pre-wrap; }
.arena-q .body { font: 400 14px/1.7 Inter, sans-serif; color: var(--c-on-surface-variant);
  background: var(--c-surface-container); border-radius: 12px; padding: 12px 14px; margin-top: 10px; white-space: pre-wrap; }
.arena-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.arena-opt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%;
  padding: 13px 15px; border-radius: 14px; border: 1px solid var(--c-outline-variant);
  background: var(--c-surface); cursor: pointer; transition: all .13s;
  font: 500 14px/1.55 Inter, sans-serif; color: var(--c-on-surface);
}
.arena-opt:hover:not(:disabled) { border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)); }
.arena-opt .L {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font: 800 13px Manrope, sans-serif;
  background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary);
}
.arena-opt:disabled { cursor: default; }
.arena-opt.picked { border-color: var(--c-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 30%, transparent); }
.arena-opt.ok { border-color: #1a7f37; background: #e7f6ec; }
.arena-opt.ok .L { background: #1a7f37; color: #fff; }
.arena-opt.no { border-color: #ba1a1a; background: #fdecea; }
.arena-opt.no .L { background: #ba1a1a; color: #fff; }
[data-theme="dark"] .arena-opt.ok { background: #12331d; }
[data-theme="dark"] .arena-opt.no { background: #3a1512; }

/* floating score */
.arena-float {
  position: fixed; z-index: 80; pointer-events: none; font: 900 26px Manrope, sans-serif;
  color: #1a7f37; animation: floatUp .9s ease forwards;
}
@keyframes floatUp { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -60px; } }

/* connection banner */
.arena-conn {
  display: none; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px;
  background: #fdf3e0; color: #9a6700; font: 600 13px Inter, sans-serif;
  align-items: center; gap: 8px;
}
.arena-conn.is-on { display: flex; }
[data-theme="dark"] .arena-conn { background: #3a2f12; color: #e3b341; }

/* result */
.arena-result-hero { text-align: center; padding: 30px 10px 8px; }
.arena-result-hero .rt { font: 900 32px Manrope, sans-serif; }
.arena-result-hero .rt.win { color: #1a7f37; }
.arena-result-hero .rt.loss { color: #ba1a1a; }
.arena-result-hero .rt.draw { color: var(--c-primary); }
.arena-score-vs {
  display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 6px;
}
.arena-score-vs .p { text-align: center; }
.arena-score-vs .p b { display: block; font: 900 40px Manrope, sans-serif; color: var(--c-on-surface); }
.arena-score-vs .p.me b { color: var(--c-primary); }
.arena-score-vs .p span { font: 600 12px Inter, sans-serif; color: var(--c-on-surface-variant); }
.arena-score-vs .x { font: 800 18px Manrope, sans-serif; color: var(--c-outline); }
.arena-mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0;
}
.arena-review details {
  border: 1px solid var(--c-outline-variant); border-radius: 14px; margin-bottom: 10px;
  background: var(--c-surface-lowest); overflow: hidden;
}
.arena-review summary {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px; cursor: pointer;
  font: 600 13px Inter, sans-serif; color: var(--c-on-surface); list-style: none;
}
.arena-review summary::-webkit-details-marker { display: none; }
.arena-review .rb { padding: 0 15px 15px; font: 400 14px/1.7 Inter, sans-serif; color: var(--c-on-surface); }
.arena-review .cz {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-container);
  color: var(--c-on-surface-variant); font-size: 13px; white-space: pre-wrap;
}
.arena-review .ic { flex: none; width: 22px; height: 22px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font: 800 11px Manrope, sans-serif; color: #fff; }
.arena-review .ic.d { background: #1a7f37; } .arena-review .ic.y { background: #ba1a1a; }
.arena-review .ic.b { background: #9a6700; }

@media (max-width: 640px) {
  .arena-hud { grid-template-columns: 1fr 1fr; }
  .hud-mid { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: center; gap: 12px; }
  .arena-vs { flex-direction: column; }
  .arena-vs .mid { margin: -6px 0; }
}

/* ============================================================================
 * PHP portu için ek stiller (arena + eksik lobi atomları). Site CSS
 * değişkenlerini kullanır: --c-primary, --c-surface, --c-on-surface, vb.
 * ==========================================================================*/
@keyframes dl-spin { to { transform: rotate(360deg); } }
.spin { display:inline-block; animation: dl-spin 1s linear infinite; }

/* --- lobi: eksikler --- */
.duel-lobby-sub { display:block; font-size:.72rem; color:var(--c-on-surface-variant); margin-top:2px; }
.duel-divider { display:flex; align-items:center; gap:.75rem; color:var(--c-on-surface-variant); font-size:.75rem; }
.duel-divider::before, .duel-divider::after { content:""; height:1px; flex:1; background:var(--c-outline-variant); }
.duel-result { font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; }
.duel-result--win  { color:#0a7c3a; background:color-mix(in oklab, #0a7c3a 14%, transparent); }
.duel-result--loss { color:#ba1a1a; background:color-mix(in oklab, #ba1a1a 14%, transparent); }
.duel-result--draw { color:var(--c-on-surface-variant); background:var(--c-surface-container); }
.duel-lider-tbl { border-collapse:collapse; font-size:.85rem; }
.duel-lider-tbl th, .duel-lider-tbl td { padding:.55rem .5rem; text-align:left; border-bottom:1px solid var(--c-outline-variant); }
.duel-lider-tbl th { color:var(--c-on-surface-variant); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.duel-lider-tbl tr.is-me { background:color-mix(in oklab, var(--c-primary) 10%, transparent); }
.duel-lider-tbl tr.is-me td { font-weight:700; }

/* --- arena --- */
.duel-arena { max-width:820px; margin:0 auto; padding:1.25rem 1rem 4rem; min-height:100dvh; }
.duel-arena__load { text-align:center; color:var(--c-on-surface-variant); padding:5rem 1rem; display:flex; gap:.5rem; justify-content:center; align-items:center; }
.duel-hud { display:flex; align-items:center; gap:1rem; background:var(--c-surface-container); border-radius:1rem; padding:.75rem 1rem; margin-bottom:1rem; }
.duel-hud__side { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; }
.duel-hud__side.rakip { justify-content:flex-end; text-align:right; }
.duel-hud__name { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.duel-hud__score { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--c-primary); }
.duel-hud__mid { text-align:center; }
.duel-timer { font-family:"JetBrains Mono",monospace; font-weight:800; font-size:1.35rem; color:var(--c-on-surface); line-height:1; }
.duel-timer.az { color:#ba1a1a; }
.duel-timer__lbl { font-size:.6rem; color:var(--c-on-surface-variant); text-transform:uppercase; letter-spacing:.05em; }
.duel-progress { display:flex; gap:4px; margin-bottom:1rem; }
.duel-progress i { flex:1; height:5px; border-radius:999px; background:var(--c-surface-container-high, var(--c-surface-container)); }
.duel-progress i.dogru { background:#0a7c3a; }
.duel-progress i.yanlis { background:#ba1a1a; }
.duel-progress i.bos { background:var(--c-outline); }
.duel-progress i.simdi { background:var(--c-primary); }
.duel-q { background:var(--c-surface-container-low, var(--c-surface-container)); border:1px solid var(--c-outline-variant); border-radius:1.25rem; padding:1.5rem; }
.duel-q__meta { display:flex; gap:.5rem; align-items:center; margin-bottom:.75rem; font-size:.72rem; color:var(--c-on-surface-variant); }
.duel-q__no { font-weight:800; color:var(--c-primary); }
.duel-q__text { font-size:1.05rem; line-height:1.6; color:var(--c-on-surface); margin-bottom:1.25rem; }
.duel-q__text img { max-width:100%; height:auto; }
.duel-opts { display:flex; flex-direction:column; gap:.6rem; }
.duel-opt { display:flex; gap:.75rem; align-items:flex-start; text-align:left; width:100%; padding:.85rem 1rem;
  border:1.5px solid var(--c-outline-variant); border-radius:.9rem; background:var(--c-surface);
  color:var(--c-on-surface); cursor:pointer; transition:border-color .15s, background .15s; font-size:.95rem; }
.duel-opt:hover:not(:disabled) { border-color:var(--c-primary); }
.duel-opt__k { font-weight:800; color:var(--c-primary); flex-shrink:0; }
.duel-opt.secili { border-color:var(--c-primary); background:color-mix(in oklab, var(--c-primary) 8%, transparent); }
.duel-opt.dogru { border-color:#0a7c3a; background:color-mix(in oklab, #0a7c3a 12%, transparent); }
.duel-opt.dogru .duel-opt__k { color:#0a7c3a; }
.duel-opt.yanlis { border-color:#ba1a1a; background:color-mix(in oklab, #ba1a1a 12%, transparent); }
.duel-opt.yanlis .duel-opt__k { color:#ba1a1a; }
.duel-opt:disabled { cursor:default; }
.duel-feedback { text-align:center; font-weight:700; margin-top:1rem; min-height:1.5rem; }
.duel-feedback.dogru { color:#0a7c3a; } .duel-feedback.yanlis { color:#ba1a1a; }

/* --- sonuç --- */
.duel-final { text-align:center; padding:1rem; }
.duel-final__badge { font-size:2rem; font-weight:900; margin:.5rem 0; }
.duel-final__badge.win { color:#0a7c3a; } .duel-final__badge.loss { color:#ba1a1a; } .duel-final__badge.draw { color:var(--c-on-surface-variant); }
.duel-final__scores { display:flex; justify-content:center; gap:2rem; margin:1rem 0 1.5rem; }
.duel-final__scores b { display:block; font-size:2rem; font-family:"JetBrains Mono",monospace; }
.duel-review { text-align:left; margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.duel-review__item { border:1px solid var(--c-outline-variant); border-radius:.9rem; padding:1rem; background:var(--c-surface-container-low, var(--c-surface-container)); }
.duel-review__q { font-weight:600; margin-bottom:.5rem; }
.duel-review__row { font-size:.82rem; color:var(--c-on-surface-variant); }

/* ============================================================================
 * KURUM+SINAV lobi + ANLAŞMA ekranı (2026-07-08)
 * Container-query tabanlı: dar sütunda üst üste binmeyi önler (DESIGN.md).
 * ==========================================================================*/

/* Lobi içeriği kendi genişliğine göre düzen alsın (viewport değil) */
.profile-content { container-type: inline-size; }

.duel-lobby-grid { display:flex; flex-direction:column; gap:1rem; }
.duel-lobby-cols { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
@container (min-width: 560px) {
  .duel-lobby-cols { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* Kurum rozeti + ipucu metni */
.duel-kurum {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:.7rem; font-weight:600;
  color:var(--c-on-surface);
  background:oklch(from var(--c-primary) l c h / 0.10);
  border:1px solid oklch(from var(--c-primary) l c h / 0.22);
}
.duel-hint { font-size:.8rem; line-height:1.45; color:var(--c-on-surface-variant); }
.duel-hint b { color:var(--c-on-surface); }

/* Ayar hapları: her zaman sarsın, üst üste binmesin */
.duel-pill-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.duel-pill {
  padding:.4rem .85rem; border-radius:.7rem; font-size:.85rem; font-weight:600;
  border:1px solid var(--c-outline-variant); background:var(--c-surface-container-lowest, var(--c-surface));
  color:var(--c-on-surface); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.duel-pill.is-active {
  background:oklch(from var(--c-primary) l c h / 0.14);
  border-color:var(--c-primary); color:var(--c-primary);
}
@media (hover:hover){ .duel-pill:hover{ border-color:var(--c-primary); } }

/* ---- Anlaşma: oyuncu şeridi ---- */
.anl-vs {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  padding:1rem 1.2rem; border-radius:1rem;
  background:var(--c-surface-container-lowest, var(--c-surface));
  border:1px solid var(--c-outline-variant);
}
.anl-player { display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center; min-inline-size:0; }
.anl-player .material-symbols-outlined { font-size:2.1rem; color:var(--c-primary); }
.anl-player b { font-size:.95rem; color:var(--c-on-surface); overflow-wrap:anywhere; }
.anl-vs-mid { font-family:"JetBrains Mono", monospace; font-weight:700; color:var(--c-on-surface-variant); }
.anl-ready {
  font-size:.72rem; font-weight:600; padding:.15rem .55rem; border-radius:999px;
  color:var(--c-on-surface-variant); background:var(--c-surface-container);
}
.anl-ready.is-on {
  color:oklch(from var(--c-primary) calc(l*0.55) c h);
  background:oklch(from var(--c-primary) l c h / 0.16);
}
:root[data-theme="dark"] .anl-ready.is-on { color:oklch(from var(--c-primary) calc(l*1.15) c h); }

/* ---- Anlaşma: kademeli kapsam (ders→ünite→konu) ---- */
.anl-kapsam { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
@container (min-width: 520px) { .anl-kapsam { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.anl-select {
  width:100%; border-radius:.75rem; font-size:.85rem;
  border:1px solid var(--c-outline-variant); background:var(--c-surface); color:var(--c-on-surface);
  padding:.5rem .6rem;
}
.anl-select:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 2px oklch(from var(--c-primary) l c h / 0.3); }
.anl-select:disabled { opacity:.55; cursor:not-allowed; }
.anl-opt { color:var(--c-on-surface-variant); font-weight:400; font-size:.72rem; }

@media (prefers-reduced-motion: reduce) {
  .duel-pill { transition:none; }
}

/* ============================================================================
 * DÜELLO SONUÇ EKRANI (duello-sonuc.php) — deneme.html tasarım diliyle uyumlu
 * ==========================================================================*/
.ds-hero {
  border-radius:1.25rem; padding:1.5rem 1.25rem; text-align:center;
  border:1px solid var(--c-outline-variant);
  background:var(--c-surface-container-lowest, var(--c-surface));
}
.ds-hero--win {
  background:linear-gradient(160deg in oklch, oklch(from var(--c-primary) l c h / .18), oklch(from var(--c-primary) l c h / .04));
  border-color:oklch(from var(--c-primary) l c h / .40);
}
.ds-hero--loss { background:oklch(from var(--c-error, #ba1a1a) l c h / .08); border-color:oklch(from var(--c-error,#ba1a1a) l c h / .30); }
.ds-hero__badge { font-family:"Manrope",sans-serif; font-weight:800; font-size:clamp(1.4rem,4cqi,1.9rem); letter-spacing:.04em; color:var(--c-on-surface); }
.ds-hero--win .ds-hero__badge  { color:oklch(from var(--c-primary) calc(l*.55) c h); }
.ds-hero--loss .ds-hero__badge { color:var(--c-error,#ba1a1a); }
:root[data-theme="dark"] .ds-hero--win .ds-hero__badge { color:oklch(from var(--c-primary) calc(l*1.15) c h); }

.ds-score { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:1rem; }
.ds-score__side { display:flex; flex-direction:column; gap:.15rem; min-inline-size:5.5rem; }
.ds-score__ad { font-size:.8rem; color:var(--c-on-surface-variant); overflow-wrap:anywhere; }
.ds-score__p { font-family:"JetBrains Mono",monospace; font-size:2rem; font-weight:700; color:var(--c-on-surface); }
.ds-score__vs { font-family:"JetBrains Mono",monospace; color:var(--c-on-surface-variant); font-weight:700; }
.ds-tally { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1rem; }
.ds-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; padding:.3rem .7rem; border-radius:999px; background:var(--c-surface-container); color:var(--c-on-surface-variant); }
.ds-chip .material-symbols-outlined { font-size:1rem; }
.ds-chip--dogru  { color:oklch(.52 .12 150); background:oklch(.62 .13 150 / .14); }
.ds-chip--yanlis { color:var(--c-error,#ba1a1a); background:oklch(from var(--c-error,#ba1a1a) l c h / .12); }
:root[data-theme="dark"] .ds-chip--dogru { color:oklch(.82 .14 150); }

.ds-card { border:1px solid var(--c-outline-variant); border-radius:1rem; padding:1.1rem 1.2rem; background:var(--c-surface-container-lowest, var(--c-surface)); }
.ds-card__meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.ds-card__no { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--c-on-surface-variant); font-size:.8rem; }
.ds-badge { margin-inline-start:auto; font-size:.75rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.ds-badge--dogru  { color:oklch(.52 .12 150); background:oklch(.62 .13 150 / .14); }
.ds-badge--yanlis { color:var(--c-error,#ba1a1a); background:oklch(from var(--c-error,#ba1a1a) l c h / .12); }
.ds-badge--bos    { color:var(--c-on-surface-variant); background:var(--c-surface-container); }
:root[data-theme="dark"] .ds-badge--dogru { color:oklch(.82 .14 150); }
.ds-card__q { font-weight:600; color:var(--c-on-surface); line-height:1.55; white-space:pre-line; }
.ds-card__gv { font-weight:400; color:var(--c-on-surface-variant); margin-top:.4rem; white-space:pre-line; }
.ds-opts { display:flex; flex-direction:column; gap:.5rem; margin-top:.9rem; }
.ds-opt { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:.7rem; border:1px solid var(--c-outline-variant); background:var(--c-surface); }
.ds-opt__k { flex:none; inline-size:1.7rem; block-size:1.7rem; border-radius:.5rem; display:grid; place-items:center; font-weight:700; font-size:.85rem; background:var(--c-surface-container); color:var(--c-on-surface); }
.ds-opt__t { flex:1; min-inline-size:0; color:var(--c-on-surface); }
.ds-opt__tag { flex:none; font-size:.68rem; font-weight:600; padding:.1rem .45rem; border-radius:999px; background:oklch(from var(--c-primary) l c h / .16); color:oklch(from var(--c-primary) calc(l*.55) c h); }
:root[data-theme="dark"] .ds-opt__tag { color:oklch(from var(--c-primary) calc(l*1.15) c h); }
.ds-opt__tag--rakip { background:var(--c-surface-container); color:var(--c-on-surface-variant); }
.ds-opt__ic { flex:none; font-size:1.2rem; }
.ds-opt--dogru  { border-color:oklch(.62 .13 150 / .6); background:oklch(.62 .13 150 / .10); }
.ds-opt--dogru .ds-opt__k, .ds-opt--dogru .ds-opt__ic { color:oklch(.52 .12 150); background:oklch(.62 .13 150 / .18); }
:root[data-theme="dark"] .ds-opt--dogru .ds-opt__k, :root[data-theme="dark"] .ds-opt--dogru .ds-opt__ic { color:oklch(.82 .14 150); }
.ds-opt--yanlis { border-color:oklch(from var(--c-error,#ba1a1a) l c h / .55); background:oklch(from var(--c-error,#ba1a1a) l c h / .08); }
.ds-opt--yanlis .ds-opt__k, .ds-opt--yanlis .ds-opt__ic { color:var(--c-error,#ba1a1a); }
.ds-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.duel-mini-btn--ai { border:1px solid oklch(from var(--c-primary) l c h / .4); color:oklch(from var(--c-primary) calc(l*.55) c h); background:oklch(from var(--c-primary) l c h / .08); }
:root[data-theme="dark"] .duel-mini-btn--ai { color:oklch(from var(--c-primary) calc(l*1.15) c h); }
.ds-cevap { margin-top:.8rem; padding:.8rem 1rem; border-radius:.7rem; border-inline-start:3px solid var(--c-primary); background:var(--c-surface-container); }
.ds-cevap__hd { font-weight:700; margin-bottom:.3rem; color:var(--c-on-surface); }
.ds-cevap__coz { color:var(--c-on-surface-variant); white-space:pre-line; line-height:1.55; }
.ds-analiz.kc-ai__out { margin-top:.8rem; }

/* Aktif liste asla sayfayı ele geçirmesin */
#dl-aktif, #dl-son { max-block-size: 20rem; overflow-y: auto; }

/* ============================================================================
 * DÜELLO ARENA — deneme.html sınav arayüzü tarzı (cevap gizli)
 * ==========================================================================*/
/* seçili şık (doğru/yanlış DEĞİL — sadece işaretlendi) */
.exam-option.is-selected {
  border-color:var(--c-primary);
  background:oklch(from var(--c-primary) l c h / 0.10);
}
.exam-option.is-selected .exam-option-letter { background:var(--c-primary); color:#fff; }
.exam-option[disabled] { cursor:default; opacity:1; }

/* soru haritası hücreleri: cevaplandı = nötr primary (doğruluk sızdırmaz) */
.exam-grid-cell.is-current  { outline:2px solid var(--c-primary); outline-offset:1px; }
.exam-grid-cell.is-answered { background:oklch(from var(--c-primary) l c h / 0.18); color:var(--c-on-surface); border-color:oklch(from var(--c-primary) l c h / 0.4); }

/* rakip rozeti (üst bar) */
.dq-rakip { display:inline-flex; align-items:center; gap:.3rem; font-size:.85rem; font-weight:600;
  padding:.35rem .7rem; border-radius:999px; background:var(--c-surface-container); color:var(--c-on-surface-variant); }
.dq-rakip .material-symbols-outlined { font-size:1rem; }

.dq-note   { margin-top:.9rem; font-size:.82rem; color:var(--c-on-surface-variant); }
.dq-locked { margin-top:.9rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600;
  color:oklch(from var(--c-primary) calc(l*.55) c h); }
:root[data-theme="dark"] .dq-locked { color:oklch(from var(--c-primary) calc(l*1.15) c h); }
.dq-locked .material-symbols-outlined { font-size:1.05rem; }

/* yan bilgi kartı efsanesi */
.dq-legend { margin-top:.6rem; display:flex; flex-direction:column; gap:.35rem; }
.dq-legend-row { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--c-on-surface-variant); }
.dq-sw { inline-size:.85rem; block-size:.85rem; border-radius:.25rem; border:1px solid var(--c-outline-variant); background:var(--c-surface); }
.dq-sw--current  { border-color:var(--c-primary); box-shadow:0 0 0 2px oklch(from var(--c-primary) l c h /.3) inset; }
.dq-sw--answered { background:oklch(from var(--c-primary) l c h / 0.18); border-color:oklch(from var(--c-primary) l c h /.4); }

/* ============================================================================
 * DUELLO — 2026-07-08 YENIDEN TASARIM (temiz kart + alan sistemi)
 * Giderilen sorunlar:
 *   1) .auth-card 32rem siniri  -> kartlar alani doldurmuyordu (hizasizlik)
 *   2) .auth-label satir-ici     -> Kurum/Sinav etiketleri tek satira binip tasiyordu
 * Bu blok en sonda; kasitli olarak eski kurallari gecersiz kilar.
 * ==========================================================================*/

.dl-wrap { container-type: inline-size; }

/* ---- kart ---- */
.dl-card{
  inline-size:100%;
  background:var(--c-surface-lowest, var(--c-surface));
  border:1px solid var(--c-outline-variant);
  border-radius:1.1rem;
  padding:clamp(1.15rem, 2.6cqi, 1.6rem);
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
}
.dl-card__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.dl-card__head > .material-symbols-outlined{ color:var(--c-primary); font-size:1.4rem; flex:none; }
.dl-card__title{ margin:0; font:800 1.15rem/1.15 "Manrope",sans-serif; color:var(--c-on-surface); }
.dl-card__title--sm{ font-size:1rem; }
.dl-card__meta{ margin-inline-start:auto; }

/* ---- alan + etiket ---- */
.dl-field{ margin-bottom:1.05rem; }
.dl-field:last-child{ margin-bottom:0; }
.dl-label{ display:block; margin-bottom:.5rem;
  font:600 .68rem/1.2 "JetBrains Mono",monospace; letter-spacing:.09em; text-transform:uppercase;
  color:var(--c-on-surface-variant); }
.dl-opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--c-on-surface-variant); }

/* ---- kurum alani (dl-sinav / dl-input ile ayni gorunum) ---- */
.dl-kurum{ display:flex; align-items:center; gap:.5rem; inline-size:100%; padding:.72rem .85rem; border-radius:.75rem;
  font-size:.92rem; font-weight:600; line-height:1.35; color:var(--c-on-surface); overflow-wrap:anywhere; min-block-size:2.9rem;
  background:var(--c-surface); border:1px solid var(--c-outline-variant); }
.dl-kurum > .material-symbols-outlined{ color:var(--c-on-surface-variant); font-size:1.2rem; flex:none; }

/* ---- Nasil calisir seridi (duel-stats-strip gibi, altinda) ---- */
.duel-how-strip{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:0 0 24px; }
.duel-how-item{ display:flex; align-items:center; gap:.7rem; padding:12px 14px; border-radius:14px;
  border:1px solid var(--c-outline-variant); background:var(--c-surface-lowest); }
.duel-how-n{ flex:none; inline-size:1.85rem; block-size:1.85rem; border-radius:999px; display:grid; place-items:center;
  font:800 .9rem Manrope, sans-serif; color:var(--c-primary);
  background:oklch(from var(--c-primary) l c h / .12); border:1px solid oklch(from var(--c-primary) l c h / .22); }
.duel-how-tx{ min-inline-size:0; }
.duel-how-tx > b{ display:block; font-weight:700; color:var(--c-on-surface); font-size:.9rem; }
.duel-how-tx > span{ display:block; margin-top:.12rem; color:var(--c-on-surface-variant); font-size:.78rem; line-height:1.4; }

/* ---- input / select ---- */
.dl-input{ inline-size:100%; padding:.72rem .85rem; border-radius:.75rem; font-size:.92rem;
  background:var(--c-surface); color:var(--c-on-surface); border:1px solid var(--c-outline-variant);
  font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.dl-input::placeholder{ color:var(--c-on-surface-variant); }
.dl-input:focus{ outline:none; border-color:var(--c-primary);
  box-shadow:0 0 0 2px oklch(from var(--c-primary) l c h / .26); }
.dl-input:disabled{ opacity:.55; cursor:not-allowed; }
.dl-input--code{ text-align:center; letter-spacing:.18em; font-weight:700; text-transform:uppercase; }

/* iki sutuna bolunen alan grubu (Kurum + Sinav) */
.dl-grid2{ display:grid; grid-template-columns:1fr; gap:1rem; }
@container (min-width:440px){ .dl-grid2{ grid-template-columns:1fr 1fr; align-items:end; } }
.dl-grid2 .dl-field{ margin:0; }

/* alt-alan (Ders/Unite/Konu) */
.dl-sub-field{ display:flex; flex-direction:column; gap:.35rem; }
.dl-sublabel{ font:600 .68rem/1 "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--c-on-surface-variant); }

/* ---- butonlar ---- */
.dl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.74rem 1.05rem; border-radius:.8rem; font:700 .92rem/1 "Inter",sans-serif; cursor:pointer;
  border:1px solid transparent; transition:background .15s, border-color .15s, filter .15s, transform .12s; }
.dl-btn > .material-symbols-outlined{ font-size:1.15rem; }
.dl-btn--primary{ background:var(--c-primary); color:#fff; }
.dl-btn--primary:hover{ filter:brightness(1.06); }
.dl-btn--ghost{ background:var(--c-surface); color:var(--c-on-surface); border-color:var(--c-outline-variant); }
.dl-btn--ghost:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.dl-btn:active{ transform:translateY(1px); }
.dl-btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; transform:none; }
.dl-btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.15rem; }
.dl-grow{ flex:1 1 auto; }
.dl-code-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.85rem; }
.dl-code-row > .dl-btn{ flex:0 0 auto; }
.dl-code-row > .dl-input{ flex:1 1 auto; min-inline-size:7rem; }
.dl-error{ margin-top:.7rem; color:var(--c-error,#ba1a1a); font-size:.82rem; font-weight:600; }

/* ---- lobi duzeni ---- */
.dl-lobby{ display:grid; grid-template-columns:1fr; gap:1rem; align-items:start; }
@container (min-width:860px){ .dl-lobby{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.dl-col{ display:flex; flex-direction:column; gap:1rem; min-inline-size:0; }
.dl-table-wrap{ overflow-x:auto; }

/* JS ile uretilen satirlar: uzun ad tasmasin */
.duel-lobby-row > div:first-child{ min-inline-size:0; flex:1 1 auto; }
.duel-lobby-row > div:first-child b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- avatar ikon boyutu ---- */
.duel-avatar > .material-symbols-outlined{ font-size:1.5rem; }
.duel-avatar--rakip{ background:var(--c-surface-container); color:var(--c-on-surface-variant); }

/* ============================================================================
 * DUELLO ARENA (duello-oyun.php) — deneme'den ESINLENILDI, kopyasi DEGIL.
 * Imza oge: iki oyunculu HUD + sure halkasi (deneme'de yok). Tek sutun,
 * odakli. Dogru/yanlis OYUN SIRASINDA gosterilmez.
 * ==========================================================================*/
.darena{ max-inline-size:760px; margin-inline:auto; }
.darena-top{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; }
.darena-back img{ height:1.9rem; width:auto; display:block; }
.darena-tag{ display:inline-flex; align-items:center; gap:.35rem; margin-inline-start:auto;
  font:700 .9rem "Inter",sans-serif; color:var(--c-on-surface-variant); }
.darena-tag > .material-symbols-outlined{ color:var(--c-primary); }

/* HUD sag taraf (rakip) */
.hud-side--rakip{ flex-direction:row-reverse; text-align:right; }
.hud-side--rakip .sc{ color:var(--c-on-surface); }
.hud-tot{ font-size:.62em; color:var(--c-on-surface-variant); font-weight:600; }

/* soru karti meta */
.arena-qno{ display:inline-grid; place-items:center; min-inline-size:1.65rem; height:1.65rem; padding:0 .4rem;
  border-radius:.5rem; background:var(--c-primary); color:#fff; font:800 .82rem "Manrope",sans-serif; }
.arena-qid{ margin-inline-start:auto; font:600 .72rem "JetBrains Mono",monospace; color:var(--c-on-surface-variant); }

/* prev/next + bitir */
.darena-nav{ display:flex; justify-content:space-between; gap:.6rem; margin-top:1.3rem; }
.darena-foot{ display:flex; justify-content:center; margin-top:1.5rem; }

/* alt soru haritasi — kompakt, tiklanabilir (deneme yan panelinden farkli) */
.darena-map{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:1.4rem; }
.darena-cell{ inline-size:2.1rem; block-size:2.1rem; border-radius:.55rem; border:1px solid var(--c-outline-variant);
  background:var(--c-surface); color:var(--c-on-surface-variant); font:700 .82rem "JetBrains Mono",monospace;
  display:grid; place-items:center; cursor:pointer; transition:border-color .12s, background .12s; }
.darena-cell:hover{ border-color:var(--c-primary); }
.darena-cell.is-answered{ background:oklch(from var(--c-primary) l c h /.16); color:var(--c-on-surface);
  border-color:oklch(from var(--c-primary) l c h /.4); }
.darena-cell.is-current{ outline:2px solid var(--c-primary); outline-offset:1px; }

/* HUD ilerleme noktalari — notr (dogruluk sizdirmaz) */
.hud-dots{ justify-content:center; margin:1.1rem 0 .25rem; }
.hud-dots i.a{ background:var(--c-primary); opacity:1; }
.hud-dots i.c{ background:var(--c-primary); opacity:1; box-shadow:0 0 0 2px oklch(from var(--c-primary) l c h /.35); }
.hud-dots i.n{ background:var(--c-outline-variant); opacity:.55; }

/* arena secenek metni */
.arena-opt .tx{ flex:1 1 auto; min-inline-size:0; }