/* Kelime Tinderı · Zine Sticker tasarımı (r2)
   Kaynak: "Kelime Tinderı — Stil Yönleri.html" → C · Zine Sticker ekranları */
:root {
  --bg: #ECE6FF;
  --ink: #241F5C;
  --ink2: #4B4589;
  --ink3: #3A3578;
  --surface: #FFFFFF;
  --soft: #ECE6FF;
  --line: #D9CFFF;
  --lilac2: #C7BEFF;
  --dash: #A79EE6;
  --dash2: #8A82C9;
  --mint: #5EF2B8;
  --orange: #FF6B35;
  --peach: #FFE3D6;
  --peach-ink: #9A3412;
  --rust: #C2410C;
  --sticker: #FFFFFF;          /* sticker kenarlığı */
  --outline: #241F5C;          /* kart çizgisi */
  --btn: #241F5C;              /* ana buton */
  --btn-text: #FFFFFF;
  --btn-shadow: #5EF2B8;
  --dock: #241F5C;
  --dock-border: #FFFFFF;
  --dock-off: #C7BEFF;
  --sh: rgba(36,31,92,.16);
  --sh2: rgba(36,31,92,.12);
  --scrim: rgba(36,31,92,.45);
  --ok: #5EF2B8;
  --bad: #FF6B35;
  --nav-h: 100px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --rot: 1;                    /* sakin modda eğimler 0 */
  --fs: 1;                     /* sakin modda yazılar büyür */
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: Nunito, system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #17143D;
  --ink: #F4F1FF;
  --ink2: #B9B0F2;
  --ink3: #C9C2F5;
  --surface: #241F57;
  --soft: #332D72;
  --line: #3B3585;
  --lilac2: #8F86D6;
  --dash: #5A52A8;
  --dash2: #6D65B8;
  --orange: #FF8A5C;
  --peach: #4A2A3A;
  --peach-ink: #FFB79A;
  --rust: #FFB79A;
  --sticker: #3B3585;
  --outline: #5EF2B8;
  --btn: #5EF2B8;
  --btn-text: #17143D;
  --btn-shadow: #2BB989;
  --dock: #0F0D2C;
  --dock-border: #3B3585;
  --dock-off: #B9B0F2;
  --sh: rgba(0,0,0,.28);
  --sh2: rgba(0,0,0,.22);
  --scrim: rgba(5,4,20,.6);
  color-scheme: dark;
}
:root[data-calm="1"] { --rot: 0; --fs: 1.1; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Aşağı çekip yenileme ve kenardan kaydırma uygulamayı yeniden başlatmasın */
html, body { height: 100%; background: var(--bg); overscroll-behavior: none; }
.page, .sheet, .cback .body { overscroll-behavior: contain; }
body { color: var(--ink); font-family: var(--sans); font-weight: 700; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--ink); }
b, strong { font-weight: 900; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .5px; }
.hl { color: var(--orange); }
svg { flex: none; }

#app { position: relative; height: 100%; width: 100%; max-width: 440px; margin: 0 auto; background: var(--bg); overflow: hidden; }
@media (min-width: 600px) {
  body { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 80%, #000); }
  #app { height: min(900px, 96vh); border-radius: 40px; box-shadow: 0 0 0 6px var(--sticker), 0 0 0 9px var(--outline), 0 30px 80px var(--sh); }
}
/* Arka plandaki dalga çizgileri */
.doodle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.doodle path { stroke: var(--line); }

/* ---------- Ekranlar ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.page { position: absolute; inset: 0 0 calc(var(--nav-h) + var(--safe-b)) 0; overflow-y: auto; overflow-x: hidden; padding: 18px 18px 30px; scrollbar-width: none; }
.page::-webkit-scrollbar { display: none; }
.h1 { font-weight: 900; font-size: calc(38px * var(--fs)); letter-spacing: -1.2px; line-height: 1.05; }
.h2row { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; }
.h2row h3 { font-weight: 900; font-size: calc(22px * var(--fs)); letter-spacing: -.5px; }
.h2row button, .h2row a { font-weight: 800; font-size: 14px; color: var(--ink2); }
.row { display: flex; align-items: center; gap: 12px; }

/* ---------- Alt menü (koyu sticker dok) ---------- */
.nav { position: absolute; left: 14px; right: 14px; bottom: calc(16px + var(--safe-b)); height: 84px; z-index: 40; background: var(--dock); border: 4px solid var(--dock-border); border-radius: 30px; box-shadow: 0 6px 0 var(--sh); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 0 4px; }
.nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--dock-off); font-weight: 800; font-size: 12px; }
.nav button .ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s, transform .2s; }
.nav button .ic svg { width: 27px; height: 27px; }
.nav button.on { color: var(--mint); font-weight: 900; }
.nav button.on .ic { background: var(--mint); color: #241F5C; animation: navpop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes navpop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.nav .search { justify-content: center; }
.nav .search .sq { width: 66px; height: 66px; margin-top: -34px; display: flex; align-items: center; justify-content: center; background: var(--orange); border: 5px solid var(--dock-border); border-radius: 22px; transform: rotate(calc(-8deg * var(--rot))); box-shadow: 0 5px 0 rgba(36,31,92,.25); color: #241F5C; transition: transform .25s; }
.nav .search .sq svg { width: 30px; height: 30px; }
.nav .search.on .sq { transform: rotate(calc(8deg * var(--rot))) scale(1.05); }
:root[data-calm="1"] .nav { left: 0; right: 0; bottom: 0; border: 0; border-radius: 28px 28px 0 0; height: calc(96px + var(--safe-b)); padding-bottom: var(--safe-b); box-shadow: none; }
:root[data-calm="1"] .nav button { font-size: 14px; }
:root[data-calm="1"] .nav button .ic { border-radius: 14px; width: 54px; height: 44px; }
:root[data-calm="1"] .nav .search .sq { margin-top: 0; width: 54px; height: 44px; border: 0; border-radius: 14px; box-shadow: none; }

/* ---------- Üst bar ---------- */
.topbar { position: absolute; top: 14px; left: 14px; right: 14px; height: 56px; display: flex; gap: 10px; align-items: center; z-index: 20; }
.tb-streak { width: 56px; height: 56px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--orange); border: 4px solid var(--sticker); border-radius: 50%; box-shadow: 0 4px 0 var(--sh); transform: rotate(calc(-8deg * var(--rot))); color: #241F5C; font-weight: 900; font-size: 17px; line-height: .9; }
.tb-streak.off { background: var(--soft); color: var(--ink2); }
.tb-streak svg { width: 20px; height: 20px; }
.tb-goal { flex: 1; min-width: 0; height: 52px; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: var(--surface); border-radius: 18px; box-shadow: 0 4px 0 var(--sh2); }
.tb-goal .lb { display: flex; justify-content: space-between; width: 100%; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .5px; color: var(--ink2); }
.pbar { width: 100%; height: 12px; border-radius: 8px; background: var(--soft); overflow: hidden; display: block; }
.pbar i { display: block; height: 100%; background: var(--mint); border-radius: 8px; border-right: 3px solid #241F5C; transition: width .6s cubic-bezier(.3,1.4,.5,1); min-width: 10px; }
.pbar i.zero { border-right: 0; min-width: 0; }
.tb-goal.glow { box-shadow: 0 0 0 3px var(--mint), 0 4px 0 var(--sh2); }
.tb-lvl { width: 56px; height: 56px; flex: none; position: relative; }
.tb-lvl svg { position: absolute; inset: 0; }
.tb-lvl .t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; line-height: 1; }
.tb-lvl .t small { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; }
.tb-lvl .t b { font-size: 19px; }
:root[data-theme="dark"] .tb-lvl .t { color: #17143D; }
.deckline { position: absolute; top: 84px; left: 22px; right: 18px; display: flex; align-items: center; gap: 8px; z-index: 19; }
.decktag { height: 36px; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 6px; background: var(--mint); border: 3px solid var(--sticker); border-radius: 12px; box-shadow: 0 3px 0 var(--sh); transform: rotate(calc(-2deg * var(--rot))); font-family: var(--mono); font-weight: 500; font-size: 13px; color: #241F5C; min-width: 0; max-width: 72%; }
.decktag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decktag svg { width: 14px; height: 14px; }
.roundbtn { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 50%; box-shadow: 0 3px 0 var(--sh2); color: var(--ink); }
.roundbtn svg { width: 20px; height: 20px; }
.langchip { height: 40px; padding: 0 12px; flex: none; display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 20px; box-shadow: 0 3px 0 var(--sh2); font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink); }
.langchip svg { width: 14px; height: 14px; }
.deckline .langchip { margin-left: auto; }

/* Kart önündeki görsel: yavaşça kayan "canlı" fotoğraf */
.cfront.withimg { justify-content: flex-end; }
.fphoto { flex: 1 1 auto; min-height: 90px; margin: 4px 0 12px; border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 0 0 3px var(--outline); transform: rotate(calc(1deg * var(--rot))); background: var(--soft); }
.fphoto i { position: absolute; inset: 0; background-size: cover; background-position: center 35%; animation: kenburns 12s ease-in-out infinite alternate; }
.fphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 45%, transparent 60%) no-repeat; background-size: 250% 100%; animation: shine 5s 1s ease-in-out infinite; }
.cfront.withimg .saybtn { margin-top: 10px; }
/* Görselli kart (hero): fotoğraf üstte kenardan kenara, kelime + butonlar alt panelde */
.kcard .face.hero { padding: 0; }
.face.hero .fphoto { flex: 1 1 0; min-height: 0; margin: 0; border-radius: 34px 34px 0 0; transform: none; box-shadow: none; border-bottom: 3px solid var(--outline); }
.face.hero .fphoto i { background-position: center 40%; }
.face.hero .fphoto::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(rgba(23,20,61,.35), transparent); z-index: 1; pointer-events: none; }
.face.hero .chead { position: absolute; top: 14px; left: 16px; right: 14px; margin: 0; z-index: 4; }
.face.hero .chead .cbtn { background: rgba(255,255,255,.85); color: #241F5C; }
.face.hero .saybtn { position: absolute; left: 14px; bottom: 12px; margin: 0; z-index: 4; height: 40px; max-width: calc(100% - 28px); }
.fpanel { flex: none; padding: 12px 18px 12px; display: flex; flex-direction: column; position: relative; z-index: 4; }
.fpanel .meta { margin: 0 0 4px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .5px; color: var(--ink2); text-transform: uppercase; }
.fpanel .bigword { margin-bottom: 10px; }
.fpanel .ask { display: none; }
.fpanel .hint { margin-top: 8px; }
:root[data-calm="1"] .fphoto i, :root[data-calm="1"] .fphoto::after { animation: none !important; }

/* Kelime gezgini (Keşfet / deste listesi) */
.browser { position: absolute; inset: 0; z-index: 45; background: var(--bg); animation: fadein .2s both; }
.bhead { position: absolute; top: 18px; left: 16px; right: 16px; height: 48px; display: flex; align-items: center; gap: 12px; z-index: 20; }
.bhead b { flex: 1; min-width: 0; font-weight: 900; font-size: 20px; letter-spacing: -.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bhead .cnt { font-size: 13px; color: var(--ink2); }
.bstack { top: 86px; bottom: calc(26px + var(--safe-b)); }
.sheetx { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 50%; color: var(--ink); z-index: 3; }
.sheetx svg { width: 20px; height: 20px; }
.sheet > h2:first-of-type { padding-right: 46px; }

/* ---------- Kart yığını ---------- */
.stack { position: absolute; top: 140px; left: 22px; right: 22px; bottom: calc(var(--nav-h) + var(--safe-b) + 28px); }
.kcard { position: absolute; inset: 0; touch-action: none; user-select: none; will-change: transform; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.kcard.dragging { transition: none; }
.kcard .face { position: absolute; inset: 0; background: var(--surface); border-radius: 34px; box-shadow: 0 0 0 3px var(--outline), 0 12px 0 3px var(--sh); transform: rotate(calc(-1.5deg * var(--rot))); display: flex; flex-direction: column; padding: 24px 20px 16px; overflow: hidden; }
.kcard.behind { pointer-events: none; }
.kcard.behind .face { background: var(--mint); border: 7px solid var(--sticker); box-shadow: 0 8px 0 var(--sh); transform: rotate(calc(4deg * var(--rot))) scale(.95) translateY(14px); }
.kcard.behind .face > * { visibility: hidden; }
.kcard.enter .face { animation: cardin .45s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes cardin { 0% { transform: rotate(calc(4deg * var(--rot))) scale(.95) translateY(14px); } 100% { transform: rotate(calc(-1.5deg * var(--rot))); } }
.tape { position: absolute; z-index: 3; pointer-events: none; }
.tape.a { top: -14px; left: 26px; width: 84px; height: 28px; background: rgba(255,107,53,.75); transform: rotate(-8deg); }
.tape.b { top: -12px; right: 30px; width: 70px; height: 26px; background: rgba(94,242,184,.85); transform: rotate(10deg); }
.kcard .face.has-tape { overflow: visible; }
.kcard .clip { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; pointer-events: none; }

.chead { display: flex; align-items: center; gap: 8px; margin-top: 6px; position: relative; z-index: 4; }
.ntag { padding: 5px 10px; background: var(--ink); color: var(--mint); border-radius: 8px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
:root[data-theme="dark"] .ntag { background: var(--mint); color: #17143D; }
.ntag.learning { background: var(--soft); color: var(--ink); }
.ntag.reviewing { background: var(--orange); color: #241F5C; }
.ntag.confident { background: var(--mint); color: #241F5C; }
.ntag.archived { background: var(--soft); color: var(--ink2); }
.chead .ibtns { margin-left: auto; display: flex; gap: 6px; }
.cbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--soft); border-radius: 50%; color: var(--ink); transition: transform .15s; }
.cbtn:active { transform: scale(.9); }
.cbtn svg { width: 22px; height: 22px; }
.cbtn.on { background: var(--orange); color: #241F5C; }

.cfront { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; min-height: 0; }
.cfront .meta { margin: 0 0 6px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .5px; color: var(--ink2); text-transform: uppercase; }
.bigword { margin: 0; font-weight: 900; font-size: calc(54px * var(--fs)); line-height: .92; letter-spacing: -1.5px; color: var(--ink); word-break: break-word; hyphens: auto; }
.bigword.m { font-size: calc(44px * var(--fs)); }
.bigword.s { font-size: calc(36px * var(--fs)); }
.bigword .ch { display: inline-block; animation: chpop .5s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes chpop { 0% { transform: translateY(18px) scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.wave { margin-top: 8px; display: block; }
.wave path { stroke: var(--orange); stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw .9s .35s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.saybtn { align-self: flex-start; margin-top: 14px; height: 44px; padding: 0 14px 0 6px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2.5px solid var(--outline); border-radius: 999px; font-family: var(--mono); font-weight: 500; font-size: 16px; color: var(--ink); max-width: 100%; }
.saybtn > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saybtn .dot { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink); border-radius: 50%; color: var(--mint); }
:root[data-theme="dark"] .saybtn .dot { background: var(--mint); color: #17143D; }
.saybtn .dot svg { width: 17px; height: 17px; }
.saybtn.talking .dot { animation: pulse .6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.tw { position: absolute; animation: twinkle 2s ease-in-out infinite; pointer-events: none; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(20deg); } }
.ask { margin: 0 0 10px; font-weight: 900; font-size: calc(20px * var(--fs)); letter-spacing: -.3px; position: relative; z-index: 4; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; position: relative; z-index: 4; }
.bbtn { height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--soft); border-radius: 18px; font-weight: 900; font-size: calc(18px * var(--fs)); color: var(--ink); transition: transform .12s; }
.bbtn:active { transform: translateY(2px); }
.bbtn svg { width: 20px; height: 20px; }
.bbtn.go { background: var(--btn); color: var(--btn-text); box-shadow: 0 4px 0 var(--btn-shadow); }
.bbtn.go svg { color: var(--btn-shadow); }
:root[data-theme="dark"] .bbtn.go svg { color: #17143D; }
.bbtn.red { background: var(--peach); color: var(--peach-ink); }
.hint { margin: 10px 0 0; text-align: center; font-family: var(--sans); font-weight: 800; font-size: 14.5px; color: var(--ink); position: relative; z-index: 4; }
:root[data-calm="1"] .hint { font-family: var(--sans); font-weight: 800; font-size: 15px; }

/* Maskot Luna */
.luna { position: absolute; z-index: 6; pointer-events: none; }
.luna.sway { animation: sway 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.luna.hop { animation: hop 1s ease-in-out infinite; transform-origin: 50% 100%; }
.luna.think { animation: think 3s ease-in-out infinite; transform-origin: 50% 100%; }
.luna.sleep { animation: breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
.luna .tail { transform-box: fill-box; transform-origin: 0% 100%; animation: wag .45s ease-in-out infinite alternate; }
.luna.sleep .tail, .luna.think .tail { animation-duration: 1.6s; }
@keyframes wag { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(4deg) translateY(-4px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(-4deg); } 45% { transform: translateY(-16px) rotate(6deg); } }
@keyframes think { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .97); } }
.kcard .luna { right: -14px; top: 96px; }
.bubble { padding: 8px 12px; background: var(--surface); border: 2.5px solid var(--outline); border-radius: 16px 16px 16px 4px; font-weight: 900; font-size: 16px; color: var(--ink); }
.bubble em { font-style: normal; color: var(--rust); }

/* Kart arka yüzü */
.cback { position: absolute; inset: 0; z-index: 8; background: var(--surface); border-radius: 30px; display: flex; flex-direction: column; overflow: hidden; animation: flipin .35s cubic-bezier(.3,1.3,.5,1); }
@keyframes flipin { 0% { transform: rotateY(70deg) scale(.96); opacity: .3; } 100% { transform: none; opacity: 1; } }
.kcard .face:has(.cback) { transform: rotate(calc(-.8deg * var(--rot))); padding: 0; }
.cback .body { flex: 1; overflow-y: auto; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
.cback .body::-webkit-scrollbar { display: none; }
.wordrow { display: flex; align-items: center; gap: 10px; }
.wordrow h2 { margin: 0; font-weight: 900; font-size: calc(32px * var(--fs)); letter-spacing: -1px; line-height: 1; word-break: break-word; }
.wordrow .sp { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink); border-radius: 50%; color: var(--mint); }
:root[data-theme="dark"] .wordrow .sp { background: var(--mint); color: #17143D; }
.wordrow .sp svg { width: 20px; height: 20px; }
.wordrow .st { margin-left: auto; padding: 5px 9px; background: var(--soft); border-radius: 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; white-space: nowrap; }
.phon { margin-top: -4px; font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink2); }
.meaning { font-weight: 900; font-size: calc(24px * var(--fs)); line-height: 1.15; letter-spacing: -.5px; }
.meaning::before { content: "= "; color: var(--orange); }
.def { margin: 0; font-weight: 700; font-size: calc(16px * var(--fs)); line-height: 1.5; }
.def i { font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink2); }
.exbox { padding: 12px 14px; background: var(--soft); border-radius: 16px; font-weight: 700; font-size: calc(14px * var(--fs)); line-height: 1.5; font-style: italic; position: relative; cursor: pointer; }
.exbox b { font-style: normal; font-weight: 900; background: linear-gradient(transparent 58%, rgba(255,107,53,.45) 58%) no-repeat 0 0 / 0% 100%; animation: marker .8s .4s ease-out forwards; }
@keyframes marker { to { background-size: 100% 100%; } }
.exbox .tr { display: block; margin-top: 6px; font-style: normal; font-weight: 700; color: var(--ink2); font-size: calc(13px * var(--fs)); }
.exbox .tr b { animation: none; background: none; }
.exbox .ply { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 50%; color: var(--ink); }
.exbox .ply svg { width: 15px; height: 15px; }
.originbox { padding: 12px 14px; border: 2.5px solid var(--outline); border-radius: 16px; position: relative; }
.originbox::after { content: ""; position: absolute; top: -10px; right: 18px; width: 54px; height: 18px; background: rgba(94,242,184,.9); transform: rotate(6deg); }
.originbox .k, .dyk .k, .tipbox .k { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .5px; color: var(--ink2); text-transform: uppercase; }
.originbox .o { font-weight: 900; font-size: calc(19px * var(--fs)); margin-top: 2px; }
.originbox p, .dyk p, .tipbox p { margin: 4px 0 0; font-weight: 700; font-size: calc(13px * var(--fs)); line-height: 1.45; color: var(--ink3); }
.dyk { padding: 12px 14px; background: var(--peach); border-radius: 16px; }
.dyk .k { color: var(--peach-ink); }
.dyk p { color: var(--ink); }
.tipbox { padding: 12px 14px; background: var(--mint); border-radius: 16px; color: #241F5C; }
.tipbox .k, .tipbox p { color: #241F5C; }
.actions { display: flex; gap: 8px; align-items: center; }
.abtn { height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: var(--soft); border-radius: 14px; color: var(--ink); font-weight: 800; font-size: 14px; }
.abtn svg { width: 20px; height: 20px; }
.abtn.on { background: var(--orange); color: #241F5C; }
.morebtn { margin-left: auto; height: 44px; padding: 0 14px; background: var(--surface); border: 2.5px solid var(--outline); border-radius: 14px; font-weight: 900; font-size: 14px; color: var(--ink); }
.backbar { padding: 12px 16px 16px; border-top: 2px dashed var(--line); background: var(--surface); }

/* Canlı kare: kelime görseli yavaşça yaklaşıp kayar */
.polaroid { position: relative; margin: 2px auto 2px; width: 88%; padding: 8px 8px 30px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 2.5px var(--outline), 0 6px 0 2.5px var(--sh); transform: rotate(calc(-2.5deg * var(--rot))); }
.polaroid .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--soft); }
.polaroid .ph i { position: absolute; inset: 0; background-size: cover; background-position: center; animation: kenburns 12s ease-in-out infinite alternate; }
.polaroid .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%) no-repeat; background-size: 250% 100%; animation: shine 5s 1s ease-in-out infinite; }
@keyframes kenburns { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.22) translate(-4%, -3%); } }
@keyframes shine { 0% { background-position: 150% 0; } 40%, 100% { background-position: -100% 0; } }
.polaroid .cap { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 11px; color: #4B4589; display: flex; align-items: center; justify-content: center; gap: 6px; }
.polaroid .cap .rec { width: 8px; height: 8px; border-radius: 50%; background: #FF6B35; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.polaroid::before { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -34px; width: 68px; height: 20px; background: rgba(255,107,53,.7); transform: rotate(-3deg); z-index: 2; }

/* Quiz kartı (tekrar) */
.kcard .face.quiz { background: var(--orange); box-shadow: 0 0 0 7px var(--sticker), 0 0 0 10px var(--outline), 0 14px 0 10px var(--sh); transform: rotate(calc(2deg * var(--rot))); padding: 26px 18px 18px; }
.kcard .face.quiz .chead .ibtns .cbtn { background: rgba(255,255,255,.55); color: #241F5C; }
.qkind { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .5px; color: #241F5C; }
.qword { margin: 10px 0 0; font-weight: 900; font-size: calc(46px * var(--fs)); line-height: .95; letter-spacing: -1.5px; color: #241F5C; word-break: break-word; }
.qword.m { font-size: calc(36px * var(--fs)); }
.qsub { margin: 6px 0 0; font-family: var(--mono); font-weight: 500; font-size: 13px; color: #241F5C; }
.qtext { margin-top: 12px; font-weight: 900; font-size: calc(19px * var(--fs)); line-height: 1.3; color: #241F5C; }
.qimg { margin-top: 10px; width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; border-radius: 18px; border: 4px solid #fff; background: #ffd2bf; animation: kenburns-img 10s ease-in-out infinite alternate; }
@keyframes kenburns-img { 0% { object-position: 40% 40%; } 100% { object-position: 60% 60%; } }
.qopts { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; }
.qopt { min-height: 54px; padding: 9px 14px; display: flex; align-items: center; gap: 12px; text-align: left; background: #FFFFFF; border-radius: 18px; font-weight: 800; font-size: calc(15px * var(--fs)); line-height: 1.3; color: #4B4589; transition: transform .12s, background .2s; border: 3px solid transparent; }
.qopt:active { transform: scale(.98); }
.qopt .l { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; background: #ECE6FF; border-radius: 50%; font-family: var(--mono); font-weight: 500; font-size: 13px; color: #241F5C; }
.qopt.ok { background: #5EF2B8; border-color: #241F5C; color: #241F5C; animation: bounce .4s cubic-bezier(.3,1.7,.5,1); }
.qopt.ok .l { background: #241F5C; color: #5EF2B8; }
.qopt.no { background: #241F5C; color: #FFE3D6; animation: shake .4s; }
.qopt.no .l { background: #FF6B35; color: #241F5C; }
.qopt.dim { opacity: .55; }
@keyframes bounce { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.qopts.words .qopt { font-size: calc(16px * var(--fs)); font-weight: 900; letter-spacing: .3px; color: #241F5C; }
/* Kısa şıklar 2×2: dört şık her ekranda sığsın */
.qopts { flex: 0 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; scrollbar-width: none; overscroll-behavior: contain; }
.qopts::-webkit-scrollbar { display: none; }
.qopts.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
.qmore { flex: none; margin-top: 4px; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 12px; color: #241F5C; }
.qimg { min-height: 64px; }
.qopts { min-height: 116px; }
.qopts.words.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qopts.grid .qopt { min-height: 52px; padding: 8px 6px; justify-content: center; text-align: center; }
.qopts.grid .qopt .l { display: none; }
.qopts.grid.tight .qopt { font-size: calc(13.5px * var(--fs)); letter-spacing: 0; }
.qtext { flex: none; }
@media (max-height: 720px) {
  .kcard .face.quiz { padding: 20px 16px 14px; }
  .kcard .face.quiz .hint { display: none; }
  .qtext { margin-top: 8px; font-size: calc(17px * var(--fs)); }
  .qopts { gap: 8px; padding-top: 10px; }
  .qopt { min-height: 46px; padding: 7px 12px; font-size: calc(14px * var(--fs)); }
  .qopts.words:not(.grid) { gap: 6px; }
  .qopts.words:not(.grid) .qopt { min-height: 40px; padding: 5px 12px; }
  .qopts.words:not(.grid) .qopt .l { width: 26px; height: 26px; }
  .qopts:not(.words) .qopt { font-size: calc(13.5px * var(--fs)); line-height: 1.25; }
  .qword { font-size: calc(38px * var(--fs)); margin-top: 6px; }
  .qword.m { font-size: calc(30px * var(--fs)); }
  .fpanel .hint { display: none; }
  .fpanel .bigword { margin-bottom: 8px; }
}

/* Uçan kart katmanı */
.flyover { position: absolute; inset: 0; z-index: 30; border-radius: 34px; display: flex; flex-direction: column; padding: 26px 22px; opacity: 0; transition: opacity .15s; pointer-events: none; color: #241F5C; transform: rotate(calc(-1.5deg * var(--rot))); }
.flyover h3 { font-weight: 900; font-size: 34px; letter-spacing: -1px; }
.flyover p { font-family: var(--mono); font-weight: 500; font-size: 14px; margin-top: 4px; }
.flyover svg { width: 42%; height: auto; margin: auto; }
.flyover.learn, .flyover.ok { background: #5EF2B8; box-shadow: 0 0 0 3px #241F5C; }
.flyover.archive { background: #ECE6FF; box-shadow: 0 0 0 3px #241F5C; }
.flyover.bad { background: #FF6B35; box-shadow: 0 0 0 3px #241F5C; }

/* ---------- Bonus tur ---------- */
.bonus { position: absolute; inset: 0; z-index: 25; }
.bstamp { position: absolute; width: 112px; height: 112px; z-index: 12; pointer-events: none; }
.bstamp svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.bstamp .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; line-height: .9; }
.bstamp .c b { font-size: 26px; }
.bstamp .c small { font-family: var(--mono); font-weight: 500; font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bstamp.pop { animation: stamp .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.conf { position: absolute; pointer-events: none; animation: drift 2.4s ease-in infinite alternate; }
@keyframes drift { 0% { transform: translateY(-20px) rotate(0); } 100% { transform: translateY(30px) rotate(160deg); } }
.bprog { display: flex; gap: 6px; }
.bprog i { width: 26px; height: 8px; border-radius: 6px; background: rgba(36,31,92,.25); }
.bprog i.on { background: #241F5C; }
.bprog i.ok { background: #5EF2B8; box-shadow: 0 0 0 2px #241F5C; }
.bprog i.no { background: #FFFFFF; box-shadow: 0 0 0 2px #241F5C; }

/* Balon patlat */
.sky { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, #BFEFFF) 0%, var(--bg) 100%); box-shadow: 0 0 0 3px var(--outline), 0 12px 0 3px var(--sh); transform: rotate(calc(-1deg * var(--rot))); }
:root[data-theme="dark"] .sky { background: linear-gradient(180deg, #2A2470, #17143D); }
.cloud { position: absolute; height: 26px; background: #fff; border-radius: 30px; opacity: .9; animation: cloudmove linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 30px; height: 30px; top: -14px; left: 12px; }
.cloud::after { width: 22px; height: 22px; top: -9px; left: 34px; }
:root[data-theme="dark"] .cloud, :root[data-theme="dark"] .cloud::before, :root[data-theme="dark"] .cloud::after { background: #3B3585; }
@keyframes cloudmove { from { transform: translateX(-120px); } to { transform: translateX(460px); } }
.bq { position: absolute; top: 18px; left: 16px; right: 16px; z-index: 8; padding: 14px 16px 12px; background: var(--surface); border-radius: 22px; box-shadow: 0 0 0 3px var(--outline), 0 6px 0 3px var(--sh); }
.bq .k, .bq h3 { padding-right: 58px; }
.bq .k { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .5px; color: var(--ink2); }
.bq .k .bprog i { background: var(--soft); }
.bq .k .bprog i.on { background: var(--ink); }
.bq h3 { margin-top: 6px; font-weight: 900; font-size: calc(19px * var(--fs)); line-height: 1.25; }
.bq .timer { margin-top: 10px; height: 8px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.bq .timer i { display: block; height: 100%; width: 100%; background: var(--orange); border-radius: 6px; transform-origin: left; }
.balloon { position: absolute; bottom: -170px; width: 112px; height: 150px; z-index: 6; display: flex; flex-direction: column; align-items: center; touch-action: manipulation; }
.balloon .bl { position: relative; width: 112px; height: 128px; border-radius: 50% 50% 47% 47% / 55% 55% 45% 45%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px 16px; box-shadow: inset -10px -12px 0 rgba(0,0,0,.08), 0 0 0 3px #241F5C; font-weight: 900; font-size: 15px; line-height: 1.05; color: #241F5C; overflow-wrap: normal; word-break: keep-all; animation: bob 2.2s ease-in-out infinite; }
.balloon .bl::before { content: ""; position: absolute; top: 16px; left: 22px; width: 16px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.55); transform: rotate(25deg); }
.balloon .bl::after { content: ""; position: absolute; bottom: -9px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 10px solid #241F5C; border-bottom: 0; }
.balloon .str { width: 2px; height: 24px; background: #241F5C; margin-top: 8px; transform-origin: top; animation: str 2.2s ease-in-out infinite; }
.balloon.c0 .bl { background: #5EF2B8; } .balloon.c1 .bl { background: #FF6B35; } .balloon.c2 .bl { background: #FFFFFF; } .balloon.c3 .bl { background: #C7BEFF; }
.balloon.pop .bl { animation: popb .35s ease-out forwards; }
.balloon.pop .str { animation: fall .6s ease-in forwards; }
.balloon.wrong .bl { animation: deflate .6s ease-in forwards; }
.balloon.glow .bl { box-shadow: 0 0 0 3px #241F5C, 0 0 0 9px rgba(94,242,184,.8); }
@keyframes bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes str { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes popb { 0% { transform: scale(1); } 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fall { to { transform: translateY(120px) rotate(40deg); opacity: 0; } }
@keyframes deflate { 0% { transform: scale(1); } 30% { transform: scale(1.05, .9) rotate(-10deg); } 100% { transform: translateY(160px) scale(.5) rotate(40deg); opacity: 0; } }
.burst { position: absolute; z-index: 9; pointer-events: none; }
.burst i { position: absolute; width: 10px; height: 10px; border-radius: 3px; border: 2px solid #241F5C; animation: shard .6s ease-out forwards; }
@keyframes shard { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
.bmascot { position: absolute; left: 10px; bottom: 6px; z-index: 5; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; }
.bmascot .bubble { margin-bottom: 58px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.bmascot .bubble.on { opacity: 1; transform: none; }

/* Zine quiz (bonus) */
.zq { position: absolute; inset: 0; background: var(--orange); border-radius: 34px; box-shadow: 0 0 0 7px var(--sticker), 0 0 0 10px var(--outline), 0 14px 0 10px var(--sh); transform: rotate(calc(2deg * var(--rot))); display: flex; flex-direction: column; padding: 30px 18px 18px; z-index: 5; animation: cardin2 .5s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes cardin2 { 0% { transform: translateY(40px) rotate(-6deg) scale(.9); opacity: 0; } 100% { transform: rotate(calc(2deg * var(--rot))); opacity: 1; } }
.zq-back { position: absolute; inset: 0; background: var(--surface); border: 7px solid var(--sticker); border-radius: 34px; box-shadow: 0 8px 0 var(--sh); transform: rotate(calc(-4deg * var(--rot))) scale(.95) translateY(14px); }

/* Bonus sonu özeti */
.bsum { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px; background: var(--mint); border-radius: 34px; box-shadow: 0 0 0 3px #241F5C, 0 12px 0 3px var(--sh); color: #241F5C; transform: rotate(calc(-1.5deg * var(--rot))); animation: cardin2 .5s cubic-bezier(.3,1.4,.5,1) both; }
.bsum h2 { font-weight: 900; font-size: 34px; letter-spacing: -1px; line-height: 1; margin-top: 10px; }
.bsum p { margin-top: 8px; font-weight: 700; font-size: 16px; line-height: 1.45; }
.bsum .big { font-weight: 900; font-size: 64px; letter-spacing: -3px; line-height: 1; margin-top: 8px; }
.bsum .bbtn { margin-top: 18px; width: 100%; background: #241F5C; color: #fff; box-shadow: 0 4px 0 #FF6B35; }

/* ---------- Alt sayfa (sheet) ---------- */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 60; opacity: 0; transition: opacity .25s; }
.scrim.on { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; z-index: 61; background: var(--bg); border-radius: 30px 30px 0 0; box-shadow: 0 -4px 0 var(--sticker), 0 -7px 0 var(--outline); padding: 10px 18px calc(24px + var(--safe-b)); overflow-y: auto; transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); scrollbar-width: none; }
.sheet::-webkit-scrollbar { display: none; }
.sheet.on { transform: translateY(0); }
.sheet.full { height: 88%; }
.grab { width: 48px; height: 6px; background: var(--dash); border-radius: 4px; margin: 0 auto 14px; }
.sheet h2 { font-weight: 900; font-size: calc(28px * var(--fs)); letter-spacing: -.8px; margin: 6px 0 12px; }
.sheet h3 { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .5px; color: var(--ink2); text-transform: uppercase; margin: 22px 0 8px; }
.sheet p, .sheet li { font-weight: 700; font-size: calc(15px * var(--fs)); line-height: 1.55; color: var(--ink3); }
.sheet ul { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.sheet ul.italic li { font-style: italic; }
.sheet ul.italic li small { display: block; font-style: normal; color: var(--ink2); font-size: 13px; margin-top: 2px; }
.card { background: var(--surface); border-radius: 22px; padding: 14px 16px; }
.bars { display: flex; gap: 6px; margin-top: 6px; }
.bars i { flex: 1; height: 22px; border-radius: 6px; background: var(--surface); }
.bars i.f { background: var(--mint); box-shadow: inset 0 0 0 2.5px #241F5C; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 14px; background: var(--surface); font-weight: 800; font-size: calc(15px * var(--fs)); color: var(--ink); white-space: nowrap; }
.chip.sel { background: var(--mint); color: #241F5C; }
.chip.ink { background: var(--btn); color: var(--btn-text); font-weight: 900; }
.primary { width: 100%; height: 56px; border-radius: 18px; background: var(--btn); color: var(--btn-text); box-shadow: 0 4px 0 var(--btn-shadow); font-weight: 900; font-size: calc(17px * var(--fs)); display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s; }
.primary:active { transform: translateY(2px); }
.primary:disabled { background: var(--soft); color: var(--ink2); box-shadow: none; }
.primary svg { width: 20px; height: 20px; }
.ghost { width: 100%; min-height: 56px; border-radius: 18px; padding: 0 16px; background: var(--surface); font-weight: 900; font-size: calc(16px * var(--fs)); color: var(--ink); }
.listitem { display: flex; align-items: center; gap: 12px; padding: 12px; width: 100%; text-align: left; background: var(--surface); border-radius: 18px; color: var(--ink); margin-bottom: 10px; }
.lt { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-weight: 900; font-size: 22px; color: #241F5C; background-size: cover; background-position: center; }
.listitem .t { display: block; font-weight: 900; font-size: calc(18px * var(--fs)); letter-spacing: -.3px; text-transform: uppercase; }
.listitem .s { display: block; font-weight: 700; font-size: 14px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listitem > span:nth-child(2) { flex: 1; min-width: 0; }
.tag { padding: 4px 8px; background: var(--soft); border-radius: 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.tag.new { background: var(--peach); color: var(--peach-ink); }
.tag.learning { background: var(--soft); }
.tag.reviewing { background: var(--orange); color: #241F5C; }
.tag.confident { background: var(--ink); color: var(--mint); }
:root[data-theme="dark"] .tag.confident { background: var(--mint); color: #17143D; }
.tag.archived { background: transparent; box-shadow: inset 0 0 0 2px var(--dash); color: var(--ink2); }

/* ---------- Keşfet ---------- */
.iconsq { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 2.5px solid var(--outline); border-radius: 16px; transform: rotate(calc(6deg * var(--rot))); color: var(--ink); transition: transform .3s; }
.iconsq:active { transform: rotate(calc(-12deg * var(--rot))) scale(.92); }
.iconsq svg { width: 24px; height: 24px; }
.iconsq.plain { border: 0; transform: none; }
.roadmap { margin-top: 16px; width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; background: #241F5C; border: 5px solid var(--sticker); border-radius: 24px; box-shadow: 0 6px 0 var(--sh); color: #FFFFFF; position: relative; }
.roadmap .lvl { position: absolute; top: -14px; right: 16px; padding: 4px 10px; background: var(--mint); color: #241F5C; border: 3px solid var(--sticker); border-radius: 10px; transform: rotate(calc(4deg * var(--rot))); font-family: var(--mono); font-weight: 500; font-size: 12px; text-transform: uppercase; }
.roadmap .rg { width: 64px; height: 64px; flex: none; position: relative; }
.roadmap .rg span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; }
.roadmap h4 { font-weight: 900; font-size: 22px; letter-spacing: -.5px; }
.roadmap p { margin-top: 2px; font-weight: 700; font-size: 14px; color: #C7BEFF; }
.catchips { margin: 16px -18px 0; padding: 0 18px 4px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 8px; overflow-x: auto; scrollbar-width: none; }
.catchips::-webkit-scrollbar { display: none; }
.hscroll { margin: 4px -18px 0; padding: 8px 18px 14px; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hscroll::-webkit-scrollbar { display: none; }
.stk { width: 150px; height: 168px; flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; text-align: left; border: 5px solid var(--sticker); border-radius: 22px; box-shadow: 0 5px 0 var(--sh); color: #241F5C; position: relative; overflow: hidden; scroll-snap-align: start; transition: transform .2s; }
.stk:active { transform: scale(.96) !important; }
.stk .p { font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; position: relative; z-index: 2; }
.stk .w { font-weight: 900; font-size: 24px; letter-spacing: -.8px; line-height: 1; text-transform: uppercase; word-break: break-word; position: relative; z-index: 2; }
.stk .w { overflow-wrap: break-word; word-break: normal; }
.stk.k0 { background: #5EF2B8; } .stk.k1 { background: #FF6B35; } .stk.k2 { background: #FFFFFF; box-shadow: 0 0 0 2.5px #241F5C, 0 5px 0 2.5px var(--sh); } .stk.k3 { background: #C7BEFF; }
.stk.img { color: #fff; }
.stk.img .bgp { position: absolute; inset: 0; background-size: cover; background-position: center; animation: kenburns 14s ease-in-out infinite alternate; }
.stk.img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,31,92,.05) 40%, rgba(36,31,92,.8)); z-index: 1; }
.stk.img .p { background: #fff; color: #241F5C; align-self: flex-start; padding: 2px 6px; border-radius: 6px; }
.langpill { height: 60px; padding: 0 18px; flex: none; display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; font-weight: 900; font-size: 16px; color: var(--ink); white-space: nowrap; }
.langpill .code { font-family: var(--mono); font-weight: 500; font-size: 12px; padding: 4px 6px; border-radius: 6px; color: #241F5C; background: #5EF2B8; }
.langpill .code.k0 { background: #241F5C; color: #5EF2B8; } .langpill .code.k1 { background: #FF6B35; } .langpill .code.k2 { background: #5EF2B8; } .langpill .code.k3 { background: #C7BEFF; }
.pillrow { margin: 4px -18px 0; padding: 0 18px 6px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.pillrow::-webkit-scrollbar { display: none; }

/* ---------- Arama ---------- */
.searchbar { margin-top: 14px; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 3px var(--outline), 0 6px 0 3px var(--sh2); }
.searchbar svg { width: 24px; height: 24px; color: var(--ink); }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-weight: 800; font-size: calc(18px * var(--fs)); color: var(--ink); }
.searchbar input::placeholder { color: var(--ink2); opacity: .7; }
.seg { margin: 14px -18px 0; padding: 0 18px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { height: 44px; padding: 0 16px; flex: none; background: var(--surface); border-radius: 14px; font-weight: 800; font-size: calc(15px * var(--fs)); color: var(--ink); white-space: nowrap; }
.seg button.on { background: var(--btn); color: var(--btn-text); font-weight: 900; }
.tipline { margin-top: 22px; display: flex; align-items: flex-end; gap: 6px; }
.tipline .luna { position: relative; flex: none; }
.tipline .bubble { margin-bottom: 30px; padding: 12px 14px; border-radius: 18px 18px 18px 4px; font-weight: 800; font-size: 15px; line-height: 1.4; }
.tipline .bubble b { font-weight: 900; }
.sechead { margin-top: 20px; display: flex; align-items: baseline; justify-content: space-between; }
.sechead h2 { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .5px; color: var(--ink2); text-transform: uppercase; }
.sechead button { padding: 8px 0; font-weight: 800; font-size: 14px; color: var(--ink2); }

/* ---------- Destelerim ---------- */
.deckrow { display: flex; align-items: center; gap: 14px; padding: 12px; width: 100%; text-align: left; background: var(--surface); border-radius: 22px; color: var(--ink); margin-bottom: 12px; }
.deckrow .t { display: block; font-weight: 900; font-size: calc(18px * var(--fs)); letter-spacing: -.3px; }
.deckrow .s { display: block; font-weight: 700; font-size: 14px; color: var(--ink2); }
.deckrow > span:nth-child(2) { flex: 1; min-width: 0; }
.deckrow .pct { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.dicon { width: 62px; height: 62px; flex: none; position: relative; }
.dicon i { position: absolute; inset: 0; border: 3px solid var(--sticker); border-radius: 16px; box-shadow: 0 0 0 2px #241F5C; }
.dicon i:first-child { transform: rotate(calc(10deg * var(--rot))); }
.dicon i:last-child { display: flex; align-items: center; justify-content: center; transform: rotate(calc(-4deg * var(--rot))); color: #241F5C; background-size: cover; background-position: center; }
.dicon i:last-child svg { width: 26px; height: 26px; }
.dicon.dash i { display: none; }
.dicon.dash { display: flex; align-items: center; justify-content: center; background: var(--soft); border: 2.5px dashed var(--dash2); border-radius: 16px; color: var(--ink2); }
.dicon.dash svg { width: 26px; height: 26px; }
.fab { position: absolute; right: 22px; bottom: calc(var(--nav-h) + var(--safe-b) + 24px); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; background: var(--orange); border: 5px solid var(--sticker); border-radius: 22px; transform: rotate(calc(8deg * var(--rot))); box-shadow: 0 0 0 2.5px var(--outline), 0 6px 0 2.5px var(--sh); color: #241F5C; z-index: 30; transition: transform .25s; }
.fab:active { transform: rotate(calc(-8deg * var(--rot))) scale(.92); }
.fab svg { width: 30px; height: 30px; }

/* Deste sayfası */
.pagebar { display: flex; align-items: center; justify-content: space-between; }
.deckhero { margin: 10px auto 18px; width: 150px; height: 160px; position: relative; }
.deckhero i { position: absolute; inset: 0; border: 6px solid var(--sticker); border-radius: 26px; box-shadow: 0 0 0 2.5px #241F5C, 0 8px 0 2.5px var(--sh); background-size: cover; background-position: center; }
.deckhero i:first-child { transform: rotate(calc(9deg * var(--rot))); background: #FF6B35; }
.deckhero i:last-child { transform: rotate(calc(-4deg * var(--rot))); display: flex; align-items: center; justify-content: center; color: #241F5C; font-size: 54px; }
.deckhead h1 { font-weight: 900; font-size: calc(30px * var(--fs)); letter-spacing: -1px; line-height: 1.05; }
.deckmeta { margin: 8px 0 10px; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink2); text-transform: uppercase; }
.deckhead p.desc { font-weight: 700; font-size: calc(16px * var(--fs)); line-height: 1.5; color: var(--ink3); }
.deckstats { margin: 14px 0; padding: 12px 14px; background: var(--surface); border-radius: 18px; }
.deckstats .r { display: flex; justify-content: space-between; font-weight: 900; font-size: 15px; margin-bottom: 8px; }
.deckstats .r span { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink2); }
.deckbtns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.deckbtns.one { grid-template-columns: 1fr; }

/* ---------- Profil ---------- */
.profhead { display: flex; align-items: center; gap: 12px; }
.avatar { width: 50px; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--mint); border: 4px solid var(--sticker); border-radius: 50%; box-shadow: 0 0 0 2.5px #241F5C; font-weight: 900; font-size: 22px; color: #241F5C; }
.profhead h1 { font-weight: 900; font-size: calc(28px * var(--fs)); letter-spacing: -.8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profhead .icons { margin-left: auto; display: flex; gap: 6px; }
.sqbtn { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 15px; color: var(--ink); }
.sqbtn svg { width: 23px; height: 23px; }
.streakcard { margin-top: 14px; padding: 16px; background: #241F5C; border: 5px solid var(--sticker); border-radius: 26px; box-shadow: 0 6px 0 var(--sh); color: #FFFFFF; }
.streakcard .top { display: flex; align-items: center; gap: 10px; }
.streakcard .fl { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: #FF6B35; border: 3px solid #FFFFFF; border-radius: 50%; transform: rotate(calc(-8deg * var(--rot))); color: #241F5C; }
.streakcard .fl svg { width: 22px; height: 22px; }
.streakcard .tt b { display: block; font-weight: 900; font-size: 22px; letter-spacing: -.5px; }
.streakcard .tt span { display: block; font-weight: 700; font-size: 13px; color: #C7BEFF; }
.streakcard .xpchip { margin-left: auto; padding: 5px 9px; background: #3A3480; border-radius: 10px; font-family: var(--mono); font-weight: 500; font-size: 12px; color: #C7BEFF; white-space: nowrap; }
.week { margin-top: 14px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 11px; color: #C7BEFF; }
.week .today { color: #5EF2B8; }
.week i { margin: 6px auto 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--sans); font-weight: 900; font-size: 12px; color: #FFFFFF; box-shadow: inset 0 0 0 2px #3A3480; }
.week i.done { background: #5EF2B8; color: #241F5C; box-shadow: none; }
.week i.done svg { width: 18px; height: 18px; }
.week i.part { box-shadow: none; border: 3px dashed #5EF2B8; }
.streakcard .go { margin-top: 14px; width: 100%; height: 50px; background: #5EF2B8; border-radius: 16px; font-weight: 900; font-size: 16px; color: #241F5C; }
.lvlcard { margin-top: 14px; padding: 14px 16px; background: var(--surface); border-radius: 22px; }
.lvlcard .r { display: flex; align-items: baseline; gap: 8px; }
.lvlcard .r b { font-weight: 900; font-size: 20px; }
.lvlcard .r .x { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink2); }
.lvlcard .r .l { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--ink2); }
.lvlcard .pbar { height: 14px; margin-top: 8px; }
.stats4 { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 12px 14px; background: var(--surface); border-radius: 18px; text-align: left; color: var(--ink); }
.stat b { display: block; font-weight: 900; font-size: 24px; letter-spacing: -.5px; }
.stat span { font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--ink2); text-transform: uppercase; }
.badges { margin: 12px -18px 0; padding: 4px 18px 8px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.badges::-webkit-scrollbar { display: none; }
.badge { width: 104px; flex: none; text-align: center; }
.badge .md { margin: 0 auto; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border: 5px solid var(--sticker); border-radius: 50%; box-shadow: 0 0 0 2.5px #241F5C; color: #241F5C; background-size: cover; background-position: center; }
.badge .md svg { width: 34px; height: 34px; }
.badge .md.k0 { background-color: #FF6B35; transform: rotate(calc(-6deg * var(--rot))); }
.badge .md.k1 { background-color: #5EF2B8; transform: rotate(calc(5deg * var(--rot))); }
.badge .md.k2 { background-color: #C7BEFF; transform: rotate(calc(-3deg * var(--rot))); }
.badge .md.em { font-size: 40px; line-height: 1; }
.badge .md.em.lock svg { width: 28px; height: 28px; }
.badge .md.lock { background: var(--soft); border: 3px dashed var(--dash2); box-shadow: none; color: var(--ink2); }
.badge b { display: block; margin-top: 8px; font-weight: 900; font-size: 13px; line-height: 1.2; }
.badge small { display: block; margin-top: 2px; font-weight: 700; font-size: 11px; color: var(--ink2); line-height: 1.25; }
.badge.locked b { color: var(--ink2); }

/* ---------- Ayar satırları ---------- */
.setrow { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; margin-bottom: 8px; background: var(--surface); border-radius: 18px; font-weight: 900; font-size: calc(16px * var(--fs)); color: var(--ink); text-align: left; }
.setrow span { font-weight: 700; font-size: 14px; color: var(--ink2); }
.setrow.danger { color: var(--rust); }
.toggle { width: 52px; height: 30px; flex: none; border-radius: 20px; background: var(--soft); position: relative; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--outline); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.toggle.on { background: var(--mint); }
.toggle.on::after { transform: translateX(22px); }
.field { width: 100%; height: 56px; padding: 0 16px; margin-bottom: 10px; background: var(--surface); border: 0; border-radius: 18px; outline: none; font-weight: 800; font-size: 17px; box-shadow: 0 0 0 2.5px transparent; }
.field:focus { box-shadow: 0 0 0 2.5px var(--outline); }

/* ---------- Onboarding ---------- */
.ob { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 16px 18px calc(18px + var(--safe-b)); background: var(--bg); overflow: hidden; }
.obtop { display: flex; align-items: center; gap: 12px; height: 44px; position: relative; z-index: 2; }
.obtop .prog { flex: 1; display: flex; justify-content: center; }
.obtop .prog .pbar { max-width: 170px; }
.obtop .spacer { width: 40px; }
.backbtn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 50%; color: var(--ink); }
.backbtn svg { width: 22px; height: 22px; }
.ob h1 { margin-top: 18px; font-weight: 900; font-size: calc(32px * var(--fs)); letter-spacing: -1px; line-height: 1.08; position: relative; z-index: 2; }
.ob h1 .hl { color: var(--ink); background: linear-gradient(transparent 60%, var(--mint) 60%); padding: 0 2px; }
.ob .lead { margin-top: 10px; font-weight: 700; font-size: calc(16px * var(--fs)); line-height: 1.5; color: var(--ink3); position: relative; z-index: 2; }
.ob .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; scrollbar-width: none; padding: 12px 0; position: relative; z-index: 2; }
.ob .mid.top { justify-content: flex-start; padding-top: 22px; }
.ob .mid::-webkit-scrollbar { display: none; }
.ob > .primary { position: relative; z-index: 2; }
.wordchips { display: flex; flex-wrap: wrap; gap: 8px; }
.wordchips span { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 3px solid var(--sticker); border-radius: 12px; box-shadow: 0 3px 0 var(--sh); font-weight: 900; font-size: 14px; text-transform: uppercase; color: #241F5C; animation: chip .45s cubic-bezier(.3,1.6,.5,1) both; }
.wordchips span:nth-child(4n+1) { background: #5EF2B8; transform: rotate(calc(-3deg * var(--rot))); }
.wordchips span:nth-child(4n+2) { background: #FF6B35; transform: rotate(calc(2deg * var(--rot))); }
.wordchips span:nth-child(4n+3) { background: #FFFFFF; }
.wordchips span:nth-child(4n+4) { background: #C7BEFF; transform: rotate(calc(3deg * var(--rot))); }
@keyframes chip { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.optlist { display: flex; flex-direction: column; gap: 10px; }
.optlist button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; background: var(--surface); border-radius: 20px; font-weight: 900; font-size: calc(17px * var(--fs)); color: var(--ink); box-shadow: 0 0 0 3px transparent; transition: box-shadow .15s, transform .15s; }
.optlist button .em { font-size: 28px; }
.optlist button small { display: block; margin-top: 2px; font-weight: 700; font-size: 14px; color: var(--ink2); }
.optlist button .ck { margin-left: auto; width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); color: transparent; }
.optlist button .ck svg { width: 18px; height: 18px; }
.optlist button.sel { box-shadow: 0 0 0 3px var(--outline), 0 5px 0 3px var(--sh2); transform: rotate(calc(-1deg * var(--rot))); }
.optlist button.sel .ck { background: var(--mint); color: #241F5C; }
.centerchips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.democard { margin: 0 auto; width: 240px; padding: 22px 18px 18px; background: var(--surface); border-radius: 30px; box-shadow: 0 0 0 3px var(--outline), 0 10px 0 3px var(--sh); transform: rotate(calc(-4deg * var(--rot))); position: relative; }
.democard .im { height: 150px; border-radius: 18px; background-size: cover; background-position: center; margin-bottom: 12px; overflow: hidden; }
.democard b { display: block; font-weight: 900; font-size: 26px; letter-spacing: -.8px; text-transform: uppercase; }
.democard p { margin-top: 4px; font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--ink3); }
.ghostcard { margin: 0 auto; width: 260px; padding: 26px 16px; border: 3px dashed var(--dash); border-radius: 26px; text-align: center; animation: fadeword 3s infinite; }
.ghostcard b { font-weight: 900; font-size: 26px; text-transform: uppercase; }
.ghostcard p { margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--ink2); }
@keyframes fadeword { 0%, 15% { opacity: 1; } 60%, 100% { opacity: .15; } }
.loader { text-align: center; }
.loader .luna { position: relative; display: block; margin: 0 auto 10px; }
.checks { margin: 22px auto 0; display: flex; flex-direction: column; gap: 10px; width: fit-content; text-align: left; }
.checks div { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; opacity: .25; transition: opacity .4s; }
.checks div.on { opacity: 1; }
.checks div span { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mint); color: #241F5C; }
.checks svg { width: 16px; height: 16px; }

/* Dil seçimi */
.langpick { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; padding: 34px 22px calc(26px + var(--safe-b)); background: var(--bg); overflow-y: auto; }
.langpick .logo { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .5px; color: var(--ink2); }
.langpick h1 { margin-top: 18px; font-weight: 900; font-size: 40px; letter-spacing: -1.4px; line-height: 1; }
.langpick h1 .hl { color: var(--ink); background: linear-gradient(transparent 60%, var(--mint) 60%); }
.langpick .lead { margin-top: 10px; font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--ink3); }
.langopt { margin-top: 18px; width: 100%; padding: 18px; display: flex; align-items: center; gap: 14px; text-align: left; border: 5px solid var(--sticker); border-radius: 26px; box-shadow: 0 0 0 2.5px #241F5C, 0 8px 0 2.5px var(--sh); color: #241F5C; transition: transform .2s; animation: cardin2 .5s cubic-bezier(.3,1.4,.5,1) both; }
.langopt:active { transform: scale(.97) !important; }
.langopt.tr { background: #5EF2B8; transform: rotate(calc(-2deg * var(--rot))); }
.langopt.en { background: #FF6B35; transform: rotate(calc(2deg * var(--rot))); animation-delay: .12s; }
.langopt .fl { width: 58px; height: 58px; flex: none; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 18px; font-size: 32px; box-shadow: 0 0 0 2.5px #241F5C; }
.langopt b { display: block; font-weight: 900; font-size: 22px; letter-spacing: -.5px; line-height: 1.1; }
.langopt small { display: block; margin-top: 4px; font-weight: 700; font-size: 14px; line-height: 1.35; }
.langopt .ex { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .5px; }
.langpick .foot { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; gap: 6px; }
.langpick .foot .luna { position: relative; }
.langpick .foot .bubble { margin-bottom: 40px; font-size: 15px; }

/* Coachmark */
.coach { position: absolute; z-index: 90; left: 16px; right: 16px; padding: 18px 18px 16px; background: var(--surface); border-radius: 24px; box-shadow: 0 0 0 3px var(--outline), 0 8px 0 3px var(--sh); animation: cardin2 .35s cubic-bezier(.3,1.4,.5,1) both; }
.coach h4 { font-weight: 900; font-size: 23px; letter-spacing: -.4px; margin-bottom: 8px; }
.coach p { font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--ink3); margin-bottom: 14px; }
.coachscrim { position: absolute; inset: 0; z-index: 89; background: var(--scrim); }

/* Toast / XP */
.toast { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -90px); z-index: 120; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); padding: 10px 14px; background: var(--surface); color: var(--ink); border-radius: 16px; box-shadow: 0 0 0 2.5px var(--outline), 0 6px 0 2.5px var(--sh); font-weight: 900; font-size: 15px; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.toast.on { transform: translate(-50%, 0); }
.toast button { flex: none; padding: 6px 12px; background: var(--btn); color: var(--btn-text); border-radius: 10px; font-weight: 900; }
.xpfloat { position: absolute; z-index: 50; left: 50%; padding: 6px 12px; background: var(--mint); color: #241F5C; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 2px #241F5C; font-weight: 900; font-size: 15px; pointer-events: none; animation: xpup 1.1s forwards; }
@keyframes xpup { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.6) rotate(-8deg); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(-3deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px) rotate(-3deg); } }
canvas.confetti { position: absolute; inset: 0; z-index: 150; pointer-events: none; }

/* Seviye atlama */
.lvlup { position: absolute; inset: 0; z-index: 140; background: #5EF2B8; color: #241F5C; overflow: hidden; animation: fadein .25s both; }
@keyframes fadein { from { opacity: 0; } }
.lvlup .rays { position: absolute; left: 50%; top: 280px; width: 900px; height: 900px; margin: -450px 0 0 -450px; animation: spin 30s linear infinite; }
.lvlup .close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; z-index: 3; }
.lvlup .close svg { width: 22px; height: 22px; }
.lvlup .medal { position: absolute; top: 170px; left: 50%; margin-left: -110px; width: 220px; height: 220px; animation: medal .7s cubic-bezier(.3,1.6,.5,1) both; z-index: 2; }
@keyframes medal { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1) rotate(-4deg); } }
.lvlup .medal svg.ring { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.lvlup .medal .n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; line-height: .9; }
.lvlup .medal .n small { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; }
.lvlup .medal .n b { font-size: 84px; letter-spacing: -3px; }
.lvlup .luna { top: 330px; right: 34px; }
.lvlup .panel { position: absolute; left: 22px; right: 22px; bottom: calc(30px + var(--safe-b)); padding: 22px 20px 20px; background: #fff; border-radius: 30px; box-shadow: 0 0 0 3px #241F5C, 0 10px 0 3px rgba(36,31,92,.18); z-index: 3; animation: cardin2 .5s .2s cubic-bezier(.3,1.4,.5,1) both; }
.lvlup .panel h1 { font-weight: 900; font-size: 34px; letter-spacing: -1.2px; line-height: 1; }
.lvlup .panel p { margin-top: 8px; font-weight: 700; font-size: 16px; line-height: 1.45; color: #3A3578; }
.lvlup .rw { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.lvlup .rw span { height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: #ECE6FF; border-radius: 12px; font-weight: 900; font-size: 14px; }
.lvlup .rw span.p { background: #FFE3D6; color: #7C2D12; }
.lvlup .btns { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.lvlup .btns button { height: 56px; border-radius: 18px; font-weight: 900; font-size: 16px; background: #ECE6FF; color: #241F5C; }
.lvlup .btns button.go { background: #241F5C; color: #fff; box-shadow: 0 4px 0 #FF6B35; font-size: 17px; }

/* Boş durumlar */
.empty { text-align: center; color: var(--ink2); padding: 40px 20px; font-weight: 700; line-height: 1.5; }
.empty b { display: block; margin-bottom: 8px; font-weight: 900; font-size: 20px; color: var(--ink); }
.done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; border: 3px dashed var(--dash); border-radius: 34px; }
.done .bed { position: relative; width: 150px; height: 150px; }
.done .bed .shadow { position: absolute; left: 4px; right: 4px; bottom: 0; height: 24px; background: var(--line); border-radius: 50%; }
.done .bed .luna { left: 15px; bottom: 6px; }
.done .z { position: absolute; font-weight: 900; color: var(--ink2); animation: zz 2.4s ease-out infinite; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -26px); } }
.done h2 { margin-top: 22px; font-weight: 900; font-size: 32px; letter-spacing: -1px; line-height: 1.05; }
.done p { margin-top: 10px; max-width: 280px; font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--ink3); }
.done .btns { margin-top: 22px; width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* Liderlik */
.lbrow { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; background: var(--surface); border-radius: 18px; }
.lbrow .rk { width: 26px; text-align: center; font-weight: 900; color: var(--ink2); }
.lbrow .nm { flex: 1; font-weight: 900; }
.lbrow .xp { font-family: var(--mono); font-weight: 500; }
.lbrow.me { box-shadow: 0 0 0 3px var(--mint); }

/* Hareket azaltma: sakin mod ve sistem tercihi */
:root[data-calm="1"] .tw, :root[data-calm="1"] .conf, :root[data-calm="1"] .luna,
:root[data-calm="1"] .polaroid .ph i, :root[data-calm="1"] .stk.img .bgp, :root[data-calm="1"] .polaroid .ph::after { animation: none !important; }
:root[data-calm="1"] .tape.b, :root[data-calm="1"] .kcard .luna { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .balloon .bl { animation: none !important; }
}

/* Yeni rozet ekranı */
.badgewin { position: absolute; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(23,20,61,.55); animation: fadein .2s both; }
.badgewin.out { opacity: 0; transition: opacity .2s; }
.bwcard { width: 100%; max-width: 330px; padding: 22px 20px 18px; text-align: center; background: #fff; color: #241F5C; border-radius: 30px; box-shadow: 0 0 0 3px #241F5C, 0 10px 0 3px rgba(36,31,92,.25); animation: cardin2 .5s cubic-bezier(.3,1.4,.5,1) both; }
.bwk { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 1px; color: #7C2D12; }
.bwmd { margin: 14px auto 12px; width: 124px; height: 124px; display: flex; align-items: center; justify-content: center; background: #FF6B35; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px #241F5C, 0 8px 0 3px rgba(36,31,92,.2); animation: medal .7s cubic-bezier(.3,1.6,.5,1) both; }
.bwmd svg { width: 54px; height: 54px; }
.badgewin.kid .bwmd { background: #5EF2B8; }
.bwmd span { font-size: 64px; line-height: 1; animation: hop 1s ease-in-out infinite; }
.bwcard h2 { font-weight: 900; font-size: 28px; letter-spacing: -.8px; line-height: 1.05; }
.bwcard > p:not(.bwk) { margin-top: 6px; font-weight: 700; font-size: 15px; color: #3A3578; }
.bwxp { display: inline-block; margin-top: 12px; padding: 6px 12px; background: #ECE6FF; border-radius: 12px; font-weight: 900; font-size: 15px; }
.bwgo { display: block; width: 100%; margin-top: 16px; height: 54px; border-radius: 18px; background: #241F5C; color: #fff; font-weight: 900; font-size: 17px; box-shadow: 0 4px 0 #FF6B35; }
.bwcard small { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: #4B4589; }
:root[data-calm="1"] .bwmd, :root[data-calm="1"] .bwmd span { animation: none; }

/* Karşılama müziği düğmesi */
.musicbtn { position: absolute; top: calc(18px + var(--safe-t, 0px)); right: 18px; z-index: 200; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 50%; box-shadow: 0 3px 0 var(--sh2); color: var(--ink2); }
.musicbtn.on { background: var(--mint); color: #241F5C; animation: sway 2.8s ease-in-out infinite; }
.musicbtn svg { width: 22px; height: 22px; }

/* Meydan okuma ("gaz") */
.chal { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; padding: 26px 20px 18px; background: #241F5C; color: #fff; border-radius: 34px; box-shadow: 0 0 0 7px var(--sticker), 0 0 0 10px var(--outline), 0 14px 0 10px var(--sh); transform: rotate(calc(-1.5deg * var(--rot))); animation: cardin2 .5s cubic-bezier(.3,1.4,.5,1) both; overflow: hidden; }
.chk { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 1px; color: #FF6B35; }
.chknown { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chknown span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; background: #5EF2B8; color: #241F5C; border-radius: 10px; font-weight: 900; font-size: 13px; animation: chpop .45s cubic-bezier(.3,1.7,.5,1) both; }
.chknown svg { width: 14px; height: 14px; }
.chal h2 { margin-top: 16px; font-weight: 900; font-size: calc(26px * var(--fs)); line-height: 1.05; letter-spacing: -.6px; }
.chsub { margin-top: 6px; font-weight: 900; font-size: calc(21px * var(--fs)); line-height: 1.2; color: #FFB08F; }
.chcards { flex: 1; min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.chcards span { width: 62px; height: 84px; display: flex; align-items: center; justify-content: center; background: #FF6B35; color: #241F5C; border: 3px solid #fff; border-radius: 14px; font-weight: 900; font-size: 34px; animation: chpop .5s cubic-bezier(.3,1.7,.5,1) both, bob 2.4s ease-in-out infinite; }
.chcards span:nth-child(2) { transform: translateY(-8px); background: #5EF2B8; }
.chcards span:nth-child(3) { background: #C7BEFF; }
.chprize { margin-bottom: 10px; text-align: center; font-weight: 700; font-size: 14px; color: #ECE6FF; }
.chprize b { color: #5EF2B8; }
.chal .bbtn.go { background: #FF6B35; color: #241F5C; box-shadow: 0 4px 0 #fff; }
.chskip { margin-top: 8px; height: 40px; font-weight: 800; font-size: 14px; color: #C7BEFF; }
.zq.hard { background: #241F5C; color: #fff; }
.zq.hard .qkind, .zq.hard .qword, .zq.hard .qsub { color: #fff; }
.zq.hard .qkind { color: #FF6B35; }
.zq.hard .bprog i { background: rgba(255,255,255,.25); } .zq.hard .bprog i.on { background: #FF6B35; }
@media (max-height: 720px) { .chal { padding: 20px 16px 12px; } .chal h2 { margin-top: 10px; font-size: 22px; } .chsub { font-size: 18px; } .chcards span { width: 52px; height: 70px; font-size: 28px; } }

/* Evrim: kartlar birleşir, yeni canlı doğar */
.evstage { position: relative; margin: 14px auto 6px; width: 150px; height: 150px; }
.evc { position: absolute; left: 50%; top: 50%; width: 46px; height: 58px; margin: -29px 0 0 -23px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: #fff; border: 3px solid #241F5C; border-radius: 10px; animation: evmerge 1s cubic-bezier(.6,0,.4,1) both; }
@keyframes evmerge { 0% { transform: translate(var(--x), var(--y)) rotate(-15deg); opacity: 0; } 25% { opacity: 1; } 75% { transform: translate(0, 0) rotate(8deg) scale(.9); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
.evflash { position: absolute; inset: 15px; border-radius: 50%; background: radial-gradient(#fff, rgba(94,242,184,.0) 70%); opacity: 0; animation: evflash .6s .85s ease-out both; }
@keyframes evflash { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.evnew { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 92px; line-height: 1; animation: evborn .7s 1s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes evborn { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.evocard { margin-top: 18px; padding: 16px; background: var(--surface); border-radius: 22px; box-shadow: 0 4px 0 var(--sh2); }
.evtop { display: flex; align-items: center; gap: 14px; }
.evme { width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 46px; background: var(--mint); border: 4px solid var(--sticker); border-radius: 50%; box-shadow: 0 0 0 2.5px #241F5C; animation: hop 2.4s ease-in-out infinite; }
.evtop > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.evtop small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .5px; color: var(--ink2); }
.evtop b { font-weight: 900; font-size: 22px; letter-spacing: -.4px; }
.evnx { font-weight: 800; font-size: 13px; color: var(--ink2); }
.evladder { margin: 14px -16px 0; padding: 2px 16px 4px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.evladder::-webkit-scrollbar { display: none; }
.evladder span { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--soft); border-radius: 12px; filter: grayscale(1); opacity: .35; }
.evladder span.got { filter: none; opacity: 1; }
.evladder span.me { background: var(--mint); box-shadow: 0 0 0 2.5px #241F5C; }
.evhow { margin-top: 10px; font-weight: 700; font-size: 12.5px; line-height: 1.4; color: var(--ink2); }
:root[data-calm="1"] .evme, :root[data-calm="1"] .chcards span { animation: none; }

/* Oyuncular */
.profhead .pname { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.whobtn { height: 30px; padding: 0 10px; background: var(--soft); border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--ink); }
.plist { display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--soft); border-radius: 18px; border: 3px solid transparent; }
.prow.on { background: var(--mint); border-color: #241F5C; color: #241F5C; }
.pmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: inherit; }
.pav { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--surface); border-radius: 50%; box-shadow: 0 0 0 2.5px #241F5C; }
.pt { min-width: 0; display: flex; flex-direction: column; }
.pt b { font-weight: 900; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .4px; opacity: .75; }
.pdel { width: 44px; height: 44px; flex: none; font-size: 20px; border-radius: 14px; background: var(--surface); }

/* Ana sayfa: Kim oynuyor? */
.langpick.home .lead { max-width: 30ch; }
.hgrid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.htile { min-height: 132px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: var(--surface); border-radius: 24px; box-shadow: 0 0 0 3px var(--outline), 0 6px 0 3px var(--sh); color: var(--ink); transition: transform .12s; animation: cardin2 .45s cubic-bezier(.3,1.4,.5,1) both; }
.htile:nth-child(2n) { animation-delay: .08s; }
.htile:active { transform: scale(.96); }
.htile.on { background: var(--mint); color: #241F5C; }
.htile .hav { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 38px; background: var(--soft); border-radius: 50%; box-shadow: 0 0 0 2.5px #241F5C; }
.htile.on .hav { background: #fff; }
.htile b { margin-top: 4px; max-width: 100%; font-weight: 900; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htile small { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .5px; opacity: .75; }
.htile.add { background: transparent; box-shadow: none; border: 3px dashed var(--dash2, var(--line)); }
.htile.add .hav { background: var(--orange); color: #241F5C; font-weight: 900; }
.hlang { margin-top: 16px; align-self: center; height: 40px; padding: 0 14px; background: var(--surface); border-radius: 20px; box-shadow: 0 3px 0 var(--sh2); font-weight: 800; font-size: 14px; color: var(--ink); }
.hreset { margin-top: 6px; align-self: center; min-height: 36px; padding: 6px 12px; font-weight: 800; font-size: 13px; color: var(--ink2); text-align: center; }
.hreset.sure { color: #fff; background: #D9361E; border-radius: 12px; }
.langpick.home .foot { padding-top: 10px; }

/* Luna'nın yeni ifadeleri */
.luna.sad { animation: droop 3s ease-in-out infinite; transform-origin: 50% 100%; }
.luna.look { animation: lookup 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.luna.wow { animation: wowpop .5s cubic-bezier(.3,1.8,.5,1) both; transform-origin: 50% 100%; }
.luna.wink { animation: sway 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.luna.sad .tail { animation: none; transform: rotate(18deg); }
.luna .tear { animation: tear 1.8s ease-in infinite; }
.luna .note { animation: note 1.6s ease-in-out infinite; }
@keyframes droop { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(3px) scale(1.02, .96) rotate(-4deg); } }
@keyframes lookup { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-9deg) translateX(-2px); } }
@keyframes wowpop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes tear { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes note { 0%, 100% { transform: translate(0, 0); opacity: .9; } 50% { transform: translate(4px, -5px); opacity: .5; } }
.kcard .flyover .luna { position: relative; top: auto; right: auto; width: 46%; height: auto; margin: auto; }
.sadline { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 10px; }
.kcard .sadline .luna { position: relative; top: auto; right: auto; flex: none; }
.sadline .bubble { margin-bottom: 18px; font-size: 14px; }
:root[data-calm="1"] .luna .tear, :root[data-calm="1"] .luna .note { animation: none; }

/* Merak: "dokun, çevir" etiketi, Luna'nın görevi, çevirmeden Öğren'e basınca sarsılma */
.fliptip { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 8px 14px; white-space: nowrap; background: var(--surface); color: var(--ink); border-radius: 999px; box-shadow: 0 0 0 2.5px var(--outline), 0 4px 0 2.5px var(--sh); font-weight: 900; font-size: 15px; pointer-events: none; }
.fliptip.teach { top: 62px; padding: 12px 20px; font-size: 20px; background: #FFE066; color: #241F5C; box-shadow: 0 0 0 3px #241F5C, 0 6px 0 3px #241F5C; animation: tippulse 1.3s ease-in-out infinite; }
@keyframes tippulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.08) rotate(-2deg); } }
.peeknudge { position: absolute; top: 62px; left: 12px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FFE066; color: #241F5C; border-radius: 20px; box-shadow: 0 0 0 3px #241F5C, 0 6px 0 3px #241F5C; transform: rotate(-1.5deg); animation: cardin2 .45s .25s cubic-bezier(.3,1.4,.5,1) both, nudgewig 3.2s 1.4s ease-in-out infinite; pointer-events: none; }
.kcard .peeknudge .luna { position: relative; flex: none; right: auto; top: auto; }
.peeknudge small { display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .5px; }
.peeknudge p { margin: 2px 0 0; font-weight: 800; font-size: 16px; line-height: 1.3; }
.peeknudge p b { font-weight: 900; background: linear-gradient(transparent 55%, rgba(255,107,53,.55) 55%); }
@keyframes nudgewig { 0%, 86%, 100% { transform: rotate(-1.5deg); } 90% { transform: rotate(2deg) scale(1.03); } 95% { transform: rotate(-3deg) scale(1.03); } }
.face.peekshake { animation: shake .45s; }
.peekhit { position: relative; box-shadow: 0 0 0 3px var(--orange); animation: peekglow 1.2s .5s 2; }
@keyframes peekglow { 50% { box-shadow: 0 0 0 7px var(--orange); } }
.peekstamp { position: absolute; top: -11px; left: 12px; z-index: 2; padding: 2px 8px; background: var(--orange); color: #fff; border-radius: 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; font-style: normal; letter-spacing: .5px; transform: rotate(-3deg); animation: stamp .4s .3s both; }
.peekhit.def { margin-top: 8px; padding: 10px 12px 8px; border-radius: 14px; }
:root[data-calm="1"] .fliptip.teach, :root[data-calm="1"] .peeknudge, :root[data-calm="1"] .peekhit { animation: none; }