/* ══════════════════════════════════════════════════════════════════════
   sm2-typing.css
   YDT Master Pro — stil.css'den ayrıştırıldı
   Bu dosya stil.css @import zinciri ile yüklenir.
   ══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   YAZARAK CEVAP — YENİ TASARIM (tw-*)
   ════════════════════════════════════════════════════════ */
.tw-page {
    position: fixed !important; inset: 0 !important; left: 0 !important;
    background: var(--bg) !important; display: flex !important;
    flex-direction: column !important; overflow: hidden !important;
    z-index: var(--z-drawer-bg) !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    max-width: none !important; width: 100% !important; padding: 0 !important;
    margin: 0 !important; border-radius: 0 !important; border: none !important;
    box-shadow: none !important; text-align: left !important;
}
.tw-page.hidden { display: none !important; }
.tw-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:var(--z-below); }
.tw-orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.06; animation:twOrbFloat 9s ease-in-out infinite alternate; }
.tw-orb1 { width:400px; height:400px; background:var(--clr-danger); top:-100px; left:-60px; animation-duration:9s; }
.tw-orb2 { width:260px; height:260px; background:#6c3bff; top:40%; right:-70px; animation-duration:12s; animation-delay:-4s; }
.tw-orb3 { width:200px; height:200px; background:var(--clr-success); bottom:-50px; left:35%; animation-duration:8s; animation-delay:-6s; }
@keyframes twOrbFloat { from{transform:translate(0,0) scale(1)} to{transform:translate(16px,22px) scale(1.08)} }

.tw-header {
    display:flex; align-items:center; gap:var(--gap-normal); padding:10px 20px;
    background:var(--white); border-bottom:1.5px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.04); flex-shrink:0;
    position:relative; z-index:var(--z-base); box-sizing:border-box; width:100%;
}
.tw-exit-btn {
    width:34px; height:34px; border-radius:9px; background:var(--bg);
    border:1.5px solid var(--border); color:var(--ink3); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s;
}
.tw-exit-btn:hover { background:var(--color-primary-soft); color:var(--color-primary); border-color:var(--color-primary); }
.tw-header-center { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.tw-session-label { font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); }
.tw-progress-bar-wrap { width:100%; max-width:300px; height:5px; background:var(--border); border-radius:99px; overflow:hidden; }
.tw-progress-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--color-primary),#ff6b6b); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.tw-progress-nums { font-size:.68rem; color:var(--ink3); font-weight:700; }
.tw-header-right { flex-shrink:0; }
.tw-score-pill { display:flex; align-items:center; gap:5px; background:var(--color-primary-soft); border:1.5px solid rgba(230,57,70,.2); border-radius:50px; padding:5px 13px; }
.tw-score-icon { font-size:.85rem; }
.tw-score-pill #tw-score { font-size:1rem; font-weight:900; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.tw-score-unit { font-size:.62rem; color:var(--ink3); font-weight:700; }

.tw-statsbar {
    display:flex; align-items:center; justify-content:center;
    padding:6px 20px; background:var(--white); border-bottom:1px solid var(--border);
    flex-shrink:0; position:relative; z-index:var(--z-base);
}
.tw-stat-item { display:flex; flex-direction:column; align-items:center; gap:1px; padding:0 18px; }
.tw-stat-val { font-size:1.05rem; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; transition:transform .2s; }
.tw-stat-val.tw-green  { color:var(--clr-success-dk); }
.tw-stat-val.tw-red    { color:var(--color-primary); }
.tw-stat-val.tw-purple { color:#6c3bff; }
.tw-stat-lbl { font-size:.58rem; color:var(--ink3); font-weight:700; letter-spacing:.04em; white-space:nowrap; text-transform:uppercase; }
.tw-stat-divider { width:1px; height:26px; background:var(--border); flex-shrink:0; }

.tw-main {
    flex:1; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:20px 20px 40px; gap:var(--gap-normal);
    position:relative; z-index:var(--z-base); -webkit-overflow-scrolling:touch;
}

.tw-motivation {
    display:flex; align-items:center; gap:10px;
    background:var(--white); border:1.5px solid var(--border);
    border-radius:12px; padding:10px 16px;
    font-size:.82rem; color:var(--ink2); font-weight:600;
    width:100%; max-width:580px; box-sizing:border-box;
    box-shadow:0 2px 8px rgba(0,0,0,.04); transition:all .4s ease;
}
.tw-mot-emoji { font-size:1.1rem; flex-shrink:0; }

.tw-card {
    width:100%; max-width:580px; background:var(--white);
    border:1.5px solid var(--border); border-radius:20px;
    padding:var(--padding-section) 24px 20px; box-sizing:border-box;
    display:flex; flex-direction:column; gap:14px;
    box-shadow:0 4px 24px rgba(0,0,0,.06);
    animation:twCardIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes twCardIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }

.tw-qtype-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--color-primary-soft); border:1px solid rgba(230,57,70,.2);
    border-radius:8px; padding:4px 11px; align-self:flex-start;
    font-size:.68rem; font-weight:800; color:var(--color-primary);
    letter-spacing:.05em; text-transform:uppercase;
}
.tw-word-display {
    display:flex; align-items:center; justify-content:center; gap:var(--gap-normal);
    background:var(--bg); border-radius:14px; padding:20px 16px;
    cursor:pointer; transition:background .2s; border:1.5px solid var(--border);
}
.tw-word-display:hover { background:var(--color-primary-soft); border-color:rgba(230,57,70,.25); }
#tw-word-text { font-size:clamp(1.8rem,5vw,2.5rem); font-weight:900; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.tw-speak-btn { width:30px; height:30px; border-radius:50%; background:var(--white); border:1.5px solid var(--border); cursor:pointer; color:var(--ink3); display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.tw-speak-btn:hover { background:var(--color-primary-soft); color:var(--color-primary); border-color:var(--color-primary); }
.tw-hint-line { font-size:.76rem; color:var(--ink3); text-align:center; font-weight:600; min-height:14px; margin-top:2px; }

.tw-context-wrap { background:var(--clr-success-bg-lt); border:1.5px solid #bbf7d0; border-radius:12px; padding:12px 16px; display:flex; flex-direction:column; gap:6px; }
.tw-context-label { font-size:.62rem; font-weight:800; color:var(--clr-success-dk); letter-spacing:.08em; text-transform:uppercase; }
.tw-context-text { font-size:.95rem; line-height:1.7; color:var(--ink); font-weight:500; }
.tw-context-blank { display:inline-block; border-bottom:2.5px solid var(--clr-success-dk); min-width:70px; color:var(--clr-success-dk); font-weight:800; padding:0 4px; text-align:center; }

.tw-letter-hint-wrap { background:#fff7ed; border:1.5px solid #fed7aa; border-radius:12px; padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
.tw-letter-hint-label { font-size:.62rem; font-weight:800; color:#ea580c; letter-spacing:.08em; text-transform:uppercase; }
.tw-letter-boxes { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.tw-letter-box { width:32px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:900; border:1.5px solid var(--border); }
.tw-letter-box.revealed   { background:#fff7ed; color:#ea580c; border-color:#fed7aa; }
.tw-letter-box.hidden-letter { background:var(--bg); color:transparent; border-style:dashed; border-color:#d1d5db; }

.tw-input-wrap { display:flex; align-items:center; gap:var(--gap-tight); }
.tw-input {
    flex:1; padding:12px 15px; background:var(--bg) !important;
    border:1.5px solid var(--border) !important; border-radius:12px !important;
    color:var(--ink) !important; font-size:.98rem !important; font-weight:700 !important;
    font-family:inherit; outline:none; transition:border-color .2s, background .2s;
    margin:0 !important; width:auto !important;
}
.tw-input::placeholder { color:var(--ink3) !important; font-weight:500; }
.tw-input:focus { border-color:var(--color-focus) !important; background:var(--white) !important; }
.tw-input:disabled { opacity:.6; }
.tw-submit-btn {
    width:44px; height:44px; flex-shrink:0; border-radius:12px;
    background:var(--color-primary); border:none; cursor:pointer; color:white;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s, box-shadow .15s;
    box-shadow:0 3px 14px rgba(230,57,70,.3);
}
.tw-submit-btn:hover { transform:scale(1.05); box-shadow:0 5px 20px rgba(230,57,70,.45); }
.tw-submit-btn:active { transform:scale(.95); }

.tw-chars { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; }
.tw-chars:empty { display:none; }
.tw-c-ok  { color:var(--clr-success-dk); font-weight:800; font-size:1.05rem; }
.tw-c-bad { color:var(--color-primary); font-weight:800; font-size:1.05rem; text-decoration:underline wavy; }
.tw-c-mis { color:#ea580c; font-weight:800; font-size:1.05rem; }

.tw-feedback { text-align:center; font-size:.88rem; font-weight:700; min-height:0; border-radius:10px; padding:0; transition:all .3s ease; }
.tw-feedback:empty { display:none; }
.tw-feedback.correct { background:var(--clr-success-bg-lt); border:1.5px solid #bbf7d0; color:#15803d; padding:9px 14px; animation:twFeedbackPop .35s cubic-bezier(.34,1.56,.64,1); }
.tw-feedback.wrong   { background:var(--color-danger-soft); border:1.5px solid rgba(230,57,70,.25); color:var(--color-danger); padding:9px 14px; animation:twFeedbackShake .35s ease; }
@keyframes twFeedbackPop   { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes twFeedbackShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.tw-actions { display:flex; gap:var(--gap-tight); flex-wrap:nowrap; }
.tw-btn-check, .tw-btn-next, .tw-btn-skip {
    flex:1; padding:12px 18px; border-radius:12px;
    font-family:inherit; font-size:.88rem; font-weight:800;
    cursor:pointer; transition:all .18s; border:none;
}
.tw-btn-check { background:var(--color-primary); color:white; box-shadow:0 3px 14px rgba(230,57,70,.25); }
.tw-btn-check:hover { box-shadow:0 5px 20px rgba(230,57,70,.4); transform:translateY(-1px); }
.tw-btn-next { background:#22c55e; color:white; box-shadow:0 3px 14px rgba(34,197,94,.2); display:flex; align-items:center; justify-content:center; gap:6px; animation:twNextIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes twNextIn { from{transform:scale(.85)} to{transform:scale(1)} }
.tw-btn-next:hover { transform:translateY(-1px); }
.tw-btn-skip { background:var(--bg); color:var(--ink3); border:1.5px solid var(--border); flex:0 0 auto; padding:12px 16px; }
.tw-btn-skip:hover { background:var(--border); color:var(--ink2); }

.tw-help-row { width:100%; max-width:580px; display:flex; justify-content:center; }
.tw-help-btn { display:flex; align-items:center; gap:6px; background:var(--white); border:1.5px solid var(--border); border-radius:50px; padding:7px 16px; font-size:.73rem; font-weight:700; color:var(--ink3); cursor:pointer; font-family:inherit; transition:all .2s; box-shadow:0 1px 6px rgba(0,0,0,.04); }
.tw-help-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }

.tw-help-panel { width:100%; max-width:580px; background:var(--white); border:1.5px solid var(--border); border-radius:16px; padding:var(--padding-card); box-shadow:0 4px 20px rgba(0,0,0,.06); animation:twHelpIn .3s ease; }
@keyframes twHelpIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.tw-help-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-normal); }
.tw-help-item { display:flex; align-items:flex-start; gap:10px; font-size:.78rem; color:var(--ink2); line-height:1.5; background:var(--bg); border-radius:10px; padding:10px 12px; border:1px solid var(--border); }
.tw-help-icon { font-size:1.15rem; flex-shrink:0; margin-top:1px; }
.tw-help-item strong { color:var(--ink); display:block; margin-bottom:2px; font-size:.8rem; }

@keyframes twScorePop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }
.tw-score-pop { animation:twScorePop .3s ease; }

@media(max-width:699px) {
    .tw-page { left:0 !important; top:52px !important; bottom:60px !important; }
    .tw-card { padding:var(--padding-card) 14px 14px; border-radius:16px; }
    .tw-statsbar { padding:5px 10px; }
    .tw-stat-item { padding:0 10px; }
    .tw-stat-val { font-size:.92rem; }
    .tw-help-grid { grid-template-columns:1fr; }
    .tw-header { padding:8px 12px; }
    .tw-main { padding:14px 12px 32px; gap:10px; }
}