/* 🔀 Karma düellosu (karma-duello.js). Renkler temanın değişkenlerinden (--card, --ink, --line, --primary, --muted, --ok/--bad/--warn ve *-bg çiftleri):
   açık, koyu ve öteki temalar kendiliğinden uyar; sabit renk yok. Dokunma alanı en az 44 px. 320 px telefonda ve «Çok büyük» yazıda yana taşma yok:
   her satır sarılır, bağlantı ve adlar kelime ortasından kırılabilir; yan yana skorlar dar ekranda daralır, taşmaz. kdl- öneki yalnız bu iki dosyada. */
.kdl-kok { display:flex; flex-direction:column; gap:12px; min-width:0; max-width:100%; }
.kdl-kok .card, .kdl-kart { min-width:0; }
.kdl-kok h2 { margin:0 0 6px; font-size:22px; overflow-wrap:anywhere; }
.kdl-kok h3 { margin:0 0 8px; font-size:17px; }
.kdl-kok p { margin:6px 0; overflow-wrap:anywhere; }
.kdl-not { color:var(--muted); font-size:14px; line-height:1.4; }
.kdl-hata { color:var(--bad); font-weight:700; }
.kdl-gizli { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kdl-ince { margin-top:10px; }
.kdl-kok .btn svg, .kdl-dugmeler .btn svg { width:20px; height:20px; flex:0 0 auto; }
.kdl-dugmeler { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.kdl-dugmeler .btn { flex:1 1 150px; width:auto; min-width:0; margin-top:0; min-height:44px; }

/* davet kartı (bağlantıyı açan) */
.kdl-davet-bas { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.kdl-davet-bas small { color:var(--muted); font-weight:700; font-size:12.5px; letter-spacing:.02em; }
.kdl-davet-bas h2 { margin:2px 0 0; font-size:20px; }
.kdl-rozet { flex:0 0 48px; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg2, var(--line)); color:var(--primary); font-size:24px; }
.kdl-rozet svg { width:26px; height:26px; }
.kdl-konular { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; padding:0; }
.kdl-etiket { display:inline-block; max-width:100%; padding:6px 10px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.kdl-ayar { color:var(--muted); font-size:14px; }
.kdl-ayar b { color:var(--ink); }

/* bağlantı kutusu */
.kdl-url { width:100%; min-height:44px; box-sizing:border-box; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg2, var(--card)); color:var(--ink); font:inherit; font-size:14px; overflow:hidden; text-overflow:ellipsis; }
.kdl-url:focus-visible, .kdl-ad-in:focus-visible, .kdl-kapat:focus-visible, .kdl-kok .btn:focus-visible { outline:3px solid var(--koci-focus, var(--primary)); outline-offset:2px; }

/* perde (gönderen) — davet.js dv-perde kalıbı; ekran değişmez */
.kdl-perde { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:12px; background:rgba(0,0,0,.5); }
.kdl-kutu { width:100%; max-width:440px; max-height:min(86vh, 720px); overflow:auto; display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:20px; box-sizing:border-box;
  background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.35); animation:kdlYuksel .2s ease-out; }
@keyframes kdlYuksel { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .kdl-kutu { animation:none; } }
.kdl-ust { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.kdl-ust h2 { margin:2px 0 0; font-size:20px; color:var(--ink); }
.kdl-kapat { width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.kdl-govde { display:flex; flex-direction:column; gap:8px; min-width:0; }
.kdl-govde p { margin:0; overflow-wrap:anywhere; }
.kdl-ad-in { width:100%; min-height:48px; box-sizing:border-box; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); font:inherit; font-size:16px; }

/* sonuç: iki taraf yan yana */
.kdl-ozet.kazandin { border-color:var(--ok); }
.kdl-ozet.kaybettin { border-color:var(--line); }
.kdl-ozet.berabere { border-color:var(--warn); }
.kdl-taraflar { display:flex; align-items:stretch; gap:8px; margin:10px 0 4px; min-width:0; }
.kdl-taraf { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 6px; border-radius:14px; border:2px solid var(--line); background:var(--card); color:var(--ink); }
.kdl-taraf.ben { border-color:var(--primary); }
.kdl-taraf-ad { font-weight:800; font-size:15px; max-width:100%; overflow-wrap:anywhere; }
.kdl-skor { font-size:34px; line-height:1.05; font-weight:900; }
.kdl-skor small { font-size:16px; color:var(--muted); font-weight:700; }
.kdl-taraf > small { color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
.kdl-taraf .kdl-xp { color:var(--ok); font-weight:800; }
.kdl-bos-taraf { border-style:dashed; }
.kdl-vs { align-self:center; flex:0 0 auto; color:var(--muted); font-weight:900; font-size:13px; }
@media (max-width:340px) { .kdl-skor { font-size:26px; } .kdl-taraf { padding:8px 4px; } }

/* soru soru ✓/✗ listesi */
.kdl-sorular { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.kdl-satir { display:grid; grid-template-columns:26px minmax(0, 1fr) 36px 36px; align-items:center; gap:6px; min-height:40px; padding:4px 6px; border-radius:10px; }
.kdl-satir:nth-child(even) { background:var(--bg2, var(--line)); }
.kdl-satir.kdl-bas { min-height:30px; color:var(--muted); font-size:12.5px; font-weight:700; background:none; }
.kdl-no { color:var(--muted); font-weight:800; font-size:13px; text-align:center; }
.kdl-soru-ad { min-width:0; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.kdl-isaret-bas { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kdl-isaret { width:32px; height:32px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; border:2px solid var(--line); color:var(--muted); background:var(--card); }
.kdl-isaret.ok { background:var(--ok-bg, var(--card)); border-color:var(--ok); color:var(--ok); }
.kdl-isaret.bad { background:var(--bad-bg, var(--card)); border-color:var(--bad); color:var(--bad); }
.kdl-isaret.notr { background:var(--warn-bg, var(--card)); border-color:var(--warn); color:var(--ink); }
.kdl-isaret.bos { opacity:.6; }