/* Layout: a wide library (home, deck page, card list) around a narrow 460px "card table" for play screens. */
/* Single deliberate dark look; each deck swaps the accent (--acc) so Kuyumculuk reads gold and Bilişim reads cyan. */
:root {
  color-scheme: dark;
  --bg: #0E1524;
  --bg-2: #16213A;
  --bg-3: #1F2D4C;
  --line: #2B3A5C;
  --line-2: #33415F;
  --ink: #F4F1E8;
  --ink-dim: #A9B1BF;
  --stop: #D8453F;
  --ok: #3FB27F;
  --acc: #E2BC5C;
  --acc-grad: linear-gradient(135deg, #8A6A1F 0%, #E2BC5C 22%, #FFF1B8 45%, #E2BC5C 62%, #8A6A1F 100%);
  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px;
  background-image: radial-gradient(ellipse at 50% -10%, #23324F 0%, var(--bg) 60%); background-attachment: fixed; }
button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
[hidden] { display: none !important; }
.shell { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 48px; }
main { display: block; }
.screen { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin: 18px auto 0; }
.screen.wide { max-width: none; }
/* kapatma dugmesi (12.10.2026) */
.scr-top { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.scr-x { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 999px; width: 36px; height: 36px; padding: 0; font-size: 16px; cursor: pointer; }   /* pencerelerdeki X ile ayni */
.scr-x:hover { border-color: var(--acc); }

/* bar */
.bar { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; padding: 0; text-align: left; }
.brand b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .06em; }
.brand small { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.crumbs { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; color: var(--ink-dim); font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.crumbs button { background: none; border: 0; color: var(--ink-dim); padding: 4px 2px; font-weight: 600; font-size: 13px; }
.crumbs button:hover { color: var(--ink); }
.crumbs b { color: var(--acc); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.ghost { background: none; border: 1px solid var(--line-2); color: var(--ink-dim); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; flex: none; }
.ghost:hover { color: var(--ink); border-color: var(--acc); }

/* home */
.hero { padding-block: 22px 8px; max-width: 640px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6.5vw, 58px); line-height: 1; margin: 0; letter-spacing: .01em; text-wrap: balance; }
.hero h1 span { background: linear-gradient(90deg, #E2BC5C, #9BEAF7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--ink-dim); font-size: 16px; line-height: 1.5; margin: 14px 0 0; max-width: 52ch; }
.group { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.group h3 { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; display: flex; gap: 10px; align-items: baseline; }
.group h3 span { letter-spacing: .02em; text-transform: none; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; text-align: left; padding: 14px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); overflow: hidden; min-width: 0; }
.tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--t-grad); }
.tile:hover { border-color: var(--t-acc); background: var(--bg-3); }
.tile svg { width: 52px; height: 52px; }
.tile strong { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .03em; }
.tile span { display: block; color: var(--ink-dim); font-size: 12.5px; line-height: 1.35; margin-top: 3px; }
.tile em { font-style: normal; color: var(--t-acc); font-weight: 700; }

/* deck home */
.deckhead { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; padding-top: 10px; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); font-weight: 800; }
.deckinfo h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6vw, 52px); margin: 6px 0 0; line-height: 1; background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.deckinfo > p { color: var(--ink-dim); line-height: 1.5; margin: 10px 0 0; }
.stats { display: flex; gap: 24px; color: var(--ink-dim); font-size: 12px; margin-top: 16px; }
.stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.modes { display: grid; gap: 10px; margin-top: 20px; max-width: 520px; }
.mode { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); }
.mode:hover { border-color: var(--acc); background: var(--bg-3); }
.mode i { font-style: normal; color: var(--acc); font-size: 22px; }
.mode strong { display: block; font-size: 16px; font-weight: 800; }
.mode span { display: block; color: var(--ink-dim); font-size: 13px; margin-top: 2px; line-height: 1.35; }
.sample { transform: rotate(3deg); }
@media (max-width: 760px) { .deckhead { grid-template-columns: 1fr; } .sample { display: none; } }

/* setup */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.panel h2 { margin: 0; font-size: 18px; font-weight: 800; }
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acc); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-dim); font-size: 13px; font-weight: 600; }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--acc); background: var(--bg-3); }
.chip[aria-pressed="false"] .dot { filter: grayscale(1) brightness(.6); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input[type=text], select { width: 100%; background: var(--bg); border: 1px solid var(--line-2); color: var(--ink); border-radius: 10px; padding: 10px 12px; font: 600 15px var(--body); }
.hint { color: var(--ink-dim); font-size: 12.5px; margin: 0; line-height: 1.4; }
.cta { background: var(--acc-grad); color: #111; border: 0; border-radius: 14px; padding: 15px 18px; font-weight: 800; font-size: 16px; }
.cta:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }

/* team play */
.score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.team { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.team.active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.team .n { font-size: 12px; color: var(--ink-dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .p { font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.team:last-child { text-align: right; }
.timer { position: relative; width: 64px; height: 64px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .t { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.timer.low .t { color: var(--stop); }
.actions { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; }
.act { border: 0; border-radius: 14px; padding: 14px 6px; font-weight: 800; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; }
.act small { font-weight: 600; font-size: 11px; opacity: .85; }
.act.stop { background: var(--stop); }
.act.ok { background: var(--ok); color: #06231A; }
.act.pass { background: var(--bg-3); color: var(--ink); border: 1px solid var(--line-2); }
.turninfo { text-align: center; color: var(--ink-dim); font-size: 13px; margin: 0; }
.turninfo b { color: var(--ink); }
.ready { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding-top: 10px; }
.ready h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0; color: var(--acc); line-height: 1.1; text-wrap: balance; }
.ready p { margin: 0; color: var(--ink-dim); line-height: 1.45; max-width: 38ch; }
.ready .cta { align-self: stretch; }
.log { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.log div { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; background: var(--bg-2); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.log .r { font-weight: 800; text-align: center; }
.log .r.ok { color: var(--ok); } .log .r.stop { color: var(--stop); } .log .r.pass { color: var(--ink-dim); }
.log em { font-style: normal; color: var(--ink-dim); font-size: 12.5px; text-align: right; }

/* solo */
.progress { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--acc-grad); transition: width .3s; width: 0; }
.qhead { display: flex; justify-content: space-between; align-items: center; color: var(--ink-dim); font-size: 13px; font-weight: 600; gap: 8px; }
.pill { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.pill i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qtitle { text-align: center; margin: 0; font-size: 14px; color: var(--ink-dim); }
.clues { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.clues span { background: #FBF7EE; color: #23222A; border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 15px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: 12px; padding: 14px 8px; font-weight: 800; font-size: 14px; min-height: 58px; overflow-wrap: anywhere; }
.opt:hover:not(:disabled) { border-color: var(--acc); }
.opt.right { background: var(--ok); color: #06231A; border-color: var(--ok); }
.opt.wrong { background: var(--stop); border-color: var(--stop); }
.opt:disabled { cursor: default; }
.feedback { text-align: center; min-height: 44px; margin: 0; line-height: 1.4; }
.feedback b { color: var(--acc); }

/* list */
.search { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; background: var(--bg); padding-block: 8px; display: flex; flex-direction: column; gap: 10px; }
.count { color: var(--ink-dim); font-size: 12.5px; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.item { display: grid; grid-template-columns: 5px 1fr; gap: 12px; background: var(--bg-2); border-radius: 12px; padding: 10px 12px 10px 0; overflow: hidden; border: 1px solid #243150; text-align: left; color: inherit; }
.item:hover { border-color: var(--acc); }
.item .stripe { border-radius: 0 4px 4px 0; }
.item .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.item strong { font-weight: 800; letter-spacing: .02em; min-width: 0; overflow-wrap: anywhere; }
.item .trw { color: var(--acc); font-size: 13px; font-weight: 600; text-align: right; }
.item .tb { display: block; color: var(--ink-dim); font-size: 13px; margin-top: 3px; }

.modal { position: fixed; inset: 0; background: rgba(5,8,15,.82); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal .ws-card { width: min(320px, 82vw); }
.rules ol { font-size: 14px; line-height: 1.5; padding-left: 18px; margin: 0; }
.rules li em { display: block; font-style: normal; color: var(--ink-dim); font-size: 12.5px; }
.tile .tile-emb { width: 52px; height: 52px; }

/* learning: progress bar, study flashcards, pronunciation */
.learnbar { margin-top: 16px; max-width: 520px; }
.learnbar .lb { height: 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; display: flex; }
.learnbar .lb i { display: block; height: 100%; }
.learnbar .lb .l { background: var(--ok); }
.learnbar .lb .m { background: var(--acc); opacity: .6; }
.learnbar .lt { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-dim); margin-top: 7px; }
.learnbar .lt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.learnbar .lt .due b { color: var(--acc); }
.tile em.lrn { color: var(--ok); }
.flash { position: relative; }
.flash-front { width: 100%; aspect-ratio: 63 / 88; max-height: 62vh; border-radius: 18px; border: 2px solid var(--acc); background: var(--bg-2);
  color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; margin: 0 auto; }
.flash-front strong { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 9vw, 44px); line-height: 1.05; text-align: center; overflow-wrap: anywhere; color: var(--acc); }
.flash-back .ws-card { margin: 0 auto; }
.lvdots { display: flex; gap: 6px; }
.lvdots i { width: 10px; height: 10px; transform: rotate(45deg); border: 1.5px solid var(--acc); }
.lvdots i.on { background: var(--acc); }
.speak { background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink); border-radius: 999px; width: 34px; height: 34px; font-size: 15px; display: grid; place-items: center; flex: none; padding: 0; }
.speak:hover { border-color: var(--acc); }
.speak.big { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; font-size: 20px; z-index: 2; }
.actions.two { grid-template-columns: 1fr 1fr; }
.cta small { font-weight: 600; opacity: .7; }
.item { grid-template-columns: 5px 1fr auto; align-items: center; cursor: pointer; }
.item.m { border-left: 0; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--acc) 55%, transparent); }
.item.l { box-shadow: inset 0 -2px 0 var(--ok); }
.flash.open { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flash.open .speak.big { position: static; }

/* packs and mixer */
.tile.mixer { border-style: dashed; color: var(--ink-dim); }
.tile.mixer::before { display: none; }
.tile.mixer strong { color: var(--ink); }
.mixpanel { max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; }
.mixpanel .row2 { margin-top: 4px; }
.trtoggle { display: block; margin: 10px auto 0; background: none; border: 1px solid var(--line-2); color: var(--ink-dim); border-radius: 999px; padding: 7px 14px; font: 600 13px var(--body); }
.trtoggle:hover { color: var(--ink); border-color: var(--acc); }

/* home search + group quick nav */
.homebar { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 14px 0 10px; margin-top: 10px; background: linear-gradient(var(--bg, #0E1626) 80%, transparent); }
#homeQ { width: 100%; max-width: 560px; font: 600 16px var(--sans, inherit); color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 14px; }
#homeQ:focus { outline: 2px solid #E2BC5C; outline-offset: 1px; }
.gnav { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }   /* wraps: every field is visible (kayan satir son gruplari gizliyordu) */
.gnav::-webkit-scrollbar { display: none; }
.gnav button { flex: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--ink-dim); border-radius: 999px; padding: 5px 11px; font: 700 12.5px var(--sans, inherit); cursor: pointer; }
.gnav button:hover { color: #E2BC5C; border-color: #E2BC5C; }
.group { scroll-margin-top: 120px; }
.hitlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
#hits .item { grid-template-columns: 5px 1fr auto; align-items: center; cursor: pointer; }

/* study: direction toggle + daily goal */
.studybar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-dim); margin: -4px 0 8px; }
.studybar b { color: #E2BC5C; }
.dirbtn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: inherit; border-radius: 999px; padding: 4px 12px; font: 800 12px var(--sans, inherit); letter-spacing: .06em; cursor: pointer; }
.dirbtn:hover { border-color: #E2BC5C; color: #E2BC5C; }

.brand b .o { font-style: normal; color: #FFC61A; }

.brandlogo { height: 32px; width: auto; display: block; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: #1F2D4C; border: 1px solid #FFC61A; color: #FFF8E6; padding: 10px 16px; border-radius: 12px; font: 600 14px var(--sans, inherit); z-index: 50; max-width: 90vw; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* account */
.acct { display: inline-flex; align-items: center; gap: 8px; background: #FFC61A; color: #14233F; border: 0; border-radius: 999px; padding: 7px 14px; font: 800 13px var(--sans, inherit); cursor: pointer; }
.acct.in { background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.2); padding: 4px 12px 4px 4px; }
.acct .av { width: 26px; height: 26px; border-radius: 50%; background: #FFC61A; color: #14233F; display: grid; place-items: center; font-weight: 900; }
.acctpanel { max-width: 460px; width: calc(100vw - 32px); text-align: left; }
.acctform { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.acctform label { display: flex; flex-direction: column; gap: 4px; font: 700 12.5px var(--sans, inherit); color: var(--ink-dim); flex: 1; }
.acctform input, .acctform select { font: 600 15px var(--sans, inherit); color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px 12px; }
.acctform select option { color: #14233F; }
.acctform .err { color: #FF8A8A; min-height: 1em; margin: 0; font-size: 13.5px; }
.acctpanel a { color: #FFC61A; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 4px; text-align: center; font-size: 12px; color: var(--ink-dim); }
.pstats b { display: block; font: 400 20px var(--display); color: #FFC61A; }

.hometools { display: flex; gap: 8px; justify-content: flex-start; }
#acctBtn { margin-left: auto; }

.hometools { align-items: center; flex-wrap: wrap; }
.vseg { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px; }
.vseg span { padding: 0 6px 0 8px; }
.vseg button { background: none; border: 0; color: var(--ink-dim); font: 700 13px var(--sans, inherit); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.vseg button.on { background: #FFC61A; color: #14233F; }
.vnote { color: var(--ink-dim); font-size: 12px; }

.vpick { max-width: 220px; font: 600 12.5px var(--sans, inherit); color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 10px; }
.vpick option { color: #14233F; }