/* Flora Words — yolculuk ekranları */
:root{--fw-navy:#151d55;--fw-purple:#6834c7;--fw-purple-d:#5928bb;--fw-cream:#fffaf5;--fw-card:#fffdfa;--fw-line:#eaded5;--fw-green:#1bb79b;--fw-green-d:#167b50;--fw-lilac:#f3eaff}
.brandlogo{display:block;height:54px;width:auto}
.brand .subtitle{text-align:left;margin:2px 0 0 4px}

.jv{padding:16px 16px 110px}
.jbar{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.jbar-title{font-weight:800;font-size:17px;color:var(--fw-navy)}
.jback{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--fw-line);background:#fff;color:var(--fw-navy);font-size:24px;line-height:1;display:grid;place-items:center;padding:0}
.jhead h1{margin:4px 0 4px;font-size:26px;color:var(--fw-navy)}
.jbtn{border:0;border-radius:18px;background:linear-gradient(#9c5cf0,var(--fw-purple-d));color:#fff;font-weight:800;font-size:15px;padding:14px 16px;min-height:48px;box-shadow:0 4px 12px #5928bb33}
.jbtn.ghost{background:#fff;color:var(--fw-purple-d);border:1.5px solid #dcc9f7;box-shadow:none}
.jbtn:disabled{opacity:.4}
.draftnote,.voicenote{font-size:12px;color:#7a7184;margin:16px 4px 0;line-height:1.4}
.pc-bar{display:block;height:8px;border-radius:8px;background:#ece4e3;overflow:hidden;margin:7px 0 4px}
.pc-bar i{display:block;height:100%;background:linear-gradient(90deg,#3cc9a5,var(--fw-green));border-radius:8px}

/* yollar */
.paths{display:grid;gap:10px;margin-top:14px}
.pathcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--fw-line);background:var(--fw-card);border-radius:20px;padding:14px;color:var(--fw-navy);box-shadow:0 4px 12px #523d2a10}
.pathcard .pc-badge{flex:none;min-width:54px;height:54px;padding:0 6px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:17px;background:#e3f6e8;color:var(--fw-green-d);text-align:center;line-height:1.1}
.pathcard.academic .pc-badge{font-size:11px;background:#f1e6fb;color:#6b359c}
.pathcard .pc-body{flex:1;min-width:0}
.pathcard strong{display:block;font-size:16px}
.pathcard small{display:block;font-size:12px;color:#6b6478}
.pathcard .pc-go{font-size:28px;color:var(--fw-purple)}
.pathcard.soon{opacity:.62;background:#faf6f2}
.pathcard.soon .pc-badge{background:#eee7e2;color:#857b78}

/* seviye haritası */
.lvhero{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 6px 16px #3d2a1a1c}
.lvhero img{display:block;width:100%;aspect-ratio:2.6/1;object-fit:cover}
.lvhero-text{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;background:linear-gradient(transparent,#1a2a1ccc);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;font-size:12px}
.lvhero-text strong{font-size:16px}
.trail{position:relative;margin:18px 0 0}
.trail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trail path{fill:none;stroke:#e6cfa8;stroke-width:14;stroke-linecap:round;vector-effect:non-scaling-stroke}
.node{position:absolute;transform:translateX(-50%);border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;width:128px;color:var(--fw-navy)}
.node-ring{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#f6efe6);border:4px solid #e9dccd;display:grid;place-items:center;overflow:hidden;box-shadow:0 6px 14px #6b4a2a26}
.node-ring .flower{height:78px;width:auto;margin-top:6px}
.node.done .node-ring{border-color:#7fd3b3}
.node.next .node-ring{border-color:#a676ee;box-shadow:0 0 0 6px #a676ee33,0 6px 14px #6b4a2a26;animation:fwpulse 2s ease-in-out infinite}
.node-label{margin-top:5px;background:#fffdfaee;border-radius:12px;padding:3px 8px;font-size:12px;line-height:1.25;text-align:center;box-shadow:0 2px 6px #523d2a14}
.node-label b{display:block;font-size:11px;color:var(--fw-purple)}
.node-here{position:absolute;top:-10px;right:4px;background:var(--fw-purple);color:#fff;font-size:10px;font-weight:800;padding:3px 7px;border-radius:10px}
@keyframes fwpulse{50%{box-shadow:0 0 0 11px #a676ee1a,0 6px 14px #6b4a2a26}}
.flower.dormant{filter:grayscale(1) opacity(.55)}

/* ünite */
.unithead{display:flex;gap:12px;align-items:center;background:var(--fw-card);border:1px solid var(--fw-line);border-radius:22px;padding:12px 14px}
.unithead .flower.big{height:110px;width:auto;flex:none}
.unithead small{color:#7a7184;font-size:12px}
.unithead h1{margin:2px 0;font-size:24px;color:var(--fw-navy)}
.unithead p{margin:0;font-size:13px}
.unithead>div{flex:1}
.unitactions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.unitactions.col{grid-template-columns:1fr}
.wordlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wordlist li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--fw-line);border-radius:16px;padding:6px 6px 6px 4px}
.wl-main{flex:1;min-width:0;border:0;background:none;text-align:left;padding:6px 8px;color:var(--fw-navy)}
.wl-main b{display:block;font-size:17px}
.wl-main span{font-size:13px;color:#5f5870}
.chip{flex:none;font-size:11px;font-weight:700;border-radius:10px;padding:4px 8px;background:#eee8e3;color:#6b6478}
.chip.learning{background:#efe4ff;color:#6a32c4}
.chip.known{background:#dcf5e7;color:#167b50}
.chip.hard{background:#ffefd6;color:#9a5a00}
.listen{flex:none;border:0;border-radius:50%;width:40px;height:40px;display:inline-grid;place-items:center;background:#efe4ff;color:var(--fw-purple);padding:0;vertical-align:middle}
.listen svg{width:22px;height:22px}
.listen span{display:none}

/* kelime kartı */
.wcard{background:var(--fw-card);border:1px solid var(--fw-line);border-radius:24px;padding:18px;box-shadow:0 6px 18px #523d2a14}
.wcard-top{display:flex;justify-content:space-between;align-items:center}
.wcard-top .listen{width:auto;border-radius:20px;padding:0 14px 0 10px;gap:6px;display:inline-flex;height:40px;font-weight:700}
.wcard-top .listen span{display:inline}
.wcard-word{font-size:42px;font-weight:900;color:var(--fw-navy);text-align:center;margin:16px 0 2px;letter-spacing:-.5px}
.wcard-ipa{text-align:center;color:#5f5870;font-size:16px}
.wcard-tr{margin:14px auto 0;width:fit-content;max-width:100%;background:#fff3c9;border-radius:14px;padding:8px 16px;font-weight:800;font-size:18px;text-align:center}
.wcard-ex{background:var(--fw-lilac);border-radius:18px;padding:14px;margin-top:18px}
.ex-en{font-size:17px;font-weight:700;color:var(--fw-navy);line-height:1.45}
.ex-en .listen{width:34px;height:34px;margin-left:4px}
.ex-tr{font-size:14px;color:#5f5870;margin-top:6px}
mark{background:linear-gradient(transparent 58%,#ffd65a 58%);color:inherit;padding:0 1px}
.wcard-note{font-size:13px;color:#6a32c4;font-weight:700;margin:12px 0 0}
.cardnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

/* alıştırma */
body.inpractice .nav{display:none}
#practice{padding-bottom:40px;min-height:100dvh}
.pbar-wrap{display:flex;align-items:center;gap:10px}
.pbar{flex:1;height:12px;border-radius:10px;background:#ece4e3;overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#3cc9a5,var(--fw-green));border-radius:10px;transition:width .3s}
.pcount{font-size:13px;font-weight:700;color:#6b6478}
.qprompt{background:#efe4ff;border-radius:16px;padding:12px 14px;font-weight:800;color:var(--fw-navy);margin:16px 0}
.qword{font-size:38px;font-weight:900;text-align:center;color:var(--fw-navy);margin:24px 0 20px}
.qlisten{text-align:center;margin:20px 0}
.qlisten .listen{width:auto;height:64px;border-radius:32px;padding:0 24px;gap:8px;display:inline-flex;font-weight:800;font-size:16px}
.qlisten .listen span{display:inline}
.qlisten .listen svg{width:30px;height:30px}
.qsentence{background:#fff7ec;border:1px solid #f0e1cc;border-radius:18px;padding:16px;font-size:19px;font-weight:700;line-height:1.5;color:var(--fw-navy)}
.gap{display:inline-block;min-width:70px;border-bottom:3px solid var(--fw-purple);color:transparent}
.qhint{font-size:13px;color:#6b6478;margin:8px 4px 14px}
.qtr{font-size:28px;font-weight:900;text-align:center;color:var(--fw-navy);margin:22px 0 4px}
.qopts{display:grid;gap:10px}
.qopts button{border:1.5px solid #dfd5ec;border-radius:16px;background:#fff;padding:15px 16px;text-align:left;font-size:17px;font-weight:700;color:var(--fw-navy);min-height:54px}
.qopts button.correct,.mcol button.correct{background:#dcf5e3;border-color:#1aa85a;color:#0f5c32}
.qopts button.wrong,.mcol button.wrong{background:#ffe3e3;border-color:#dc5050}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcol{display:grid;gap:9px}
.mcol button{border:1.5px solid #dfd5ec;border-radius:14px;background:#fff;padding:13px 8px;font-size:15px;font-weight:700;color:var(--fw-navy);min-height:54px}
.mcol button.sel{border-color:var(--fw-purple);background:#f3eaff}
.mcol button:disabled{opacity:.75}
.typeform{display:grid;gap:10px;margin-top:6px}
.typeform input{font-size:22px;padding:14px 16px;border-radius:16px;border:2px solid #dcc9f7;text-align:center;font-weight:700;color:var(--fw-navy);background:#fff}
.typeform input:focus{outline:none;border-color:var(--fw-purple)}
.thint{min-height:20px;font-size:14px;color:#9a5a00;text-align:center}
.qfb{display:none}
.qfb.show{display:block;position:sticky;bottom:12px;margin-top:18px;border-radius:20px;padding:14px;box-shadow:0 8px 24px #2a1d4426}
.qfb.ok{background:#e4f8ea;border:1.5px solid #8fd8a8}
.qfb.no{background:#fff1e8;border:1.5px solid #f2c29b}
.fb-msg{font-size:16px;font-weight:800;color:var(--fw-navy);margin-bottom:10px}
.fb-msg small{display:block;font-weight:600;font-size:12px;color:#6b6478;margin-top:6px}
.fb-ex{font-weight:600;font-size:15px;margin-top:6px}
.qfb .jbtn{width:100%}

/* sonuç */
.result{text-align:center;padding-top:16px}
.result .flower.big{height:200px;width:auto}
.flower.grow{animation:fwgrow .9s ease-out}
@keyframes fwgrow{0%{transform:scale(.5) translateY(30px);opacity:.2}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.result h1{color:var(--fw-navy);margin:6px 0}
.rs-score{font-size:17px;font-weight:700}
.rs-hard{background:#fff3e0;border-radius:16px;padding:12px;font-size:14px;margin:12px 0;text-align:left}
@media (prefers-reduced-motion:reduce){.node.next .node-ring,.flower.grow{animation:none}}