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

/* ═══════════════════════════════════════════════════════════════
   BAĞLAM CÜMLESİ  (cx-*)
   ═══════════════════════════════════════════════════════════════ */

.cx-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;
}
.cx-page.hidden { display:none !important; }
@media(max-width:699px){ .cx-page { top:52px !important; bottom:60px !important; } }

/* Header */
.cx-header {
    display:flex; align-items:center; gap:var(--gap-normal); padding:10px 20px;
    background:var(--white); border-bottom:1.5px solid var(--border);
    flex-shrink:0; box-sizing:border-box; width:100%;
}
.cx-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 .18s;
}
.cx-exit-btn:hover { background:var(--color-primary-soft); color:var(--color-primary); border-color:var(--color-primary); }
.cx-header-mid { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.cx-label { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--ink3); }
.cx-prog-track { width:100%; max-width:260px; height:5px; background:var(--border); border-radius:99px; overflow:hidden; }
.cx-prog-fill { height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--color-primary),#ff7b7b); transition:width .55s cubic-bezier(.4,0,.2,1); }
.cx-prog-text { font-size:.66rem; font-weight:700; color:var(--ink3); }
.cx-score-pill {
    display:flex; align-items:center; gap:5px; flex-shrink:0;
    background:var(--color-primary-soft); border:1.5px solid rgba(230,57,70,.18);
    border-radius:50px; padding:5px 13px;
}
.cx-score-icon { font-size:.85rem; }
.cx-score-pill #ctx-score { font-size:.98rem; font-weight:900; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.cx-score-unit { font-size:.6rem; color:var(--ink3); font-weight:700; }

/* Stats bar */
.cx-statsbar {
    display:flex; align-items:center; justify-content:center;
    padding:7px 20px; background:var(--white);
    border-bottom:1px solid var(--border); flex-shrink:0;
}
.cx-stat { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 20px; }
.cx-stat-val { font-size:1.1rem; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.cx-green  { color:var(--clr-success-dk); }
.cx-red    { color:var(--color-primary); }
.cx-purple { color:#6c3bff; }
.cx-stat-lbl { font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); white-space:nowrap; }
.cx-sdiv { width:1px; height:28px; background:var(--border); flex-shrink:0; }

/* Main */
.cx-main {
    flex:1; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:22px 20px 44px; gap:var(--gap-normal); -webkit-overflow-scrolling:touch;
}

/* Motivasyon */
.cx-motivation {
    display:flex; align-items:center; gap:10px;
    background:var(--white); border:1.5px solid var(--border); border-radius:12px;
    padding:10px 18px; width:100%; max-width:600px; box-sizing:border-box;
    font-size:.82rem; font-weight:600; color:var(--ink2);
    box-shadow:0 2px 8px rgba(0,0,0,.04); transition:all .35s;
}

/* Kart */
.cx-card {
    width:100%; max-width:600px; background:var(--white);
    border:1.5px solid var(--border); border-radius:20px;
    padding:22px 24px 20px; box-sizing:border-box;
    display:flex; flex-direction:column; gap:14px;
    box-shadow:0 4px 28px rgba(0,0,0,.07);
    animation:cxSlideUp .38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cxSlideUp { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }

.cx-card-toprow { display:flex; align-items:center; justify-content:space-between; }
.cx-card-eyebrow {
    display:flex; align-items:center; gap:7px;
    font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3);
}
.cx-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--color-primary); flex-shrink:0; }

.cx-regen-btn {
    display:flex; align-items:center; gap:5px;
    font-size:.72rem; font-weight:700; color:var(--ink3);
    background:var(--bg); border:1.5px solid var(--border); border-radius:8px;
    padding:5px 11px; cursor:pointer; font-family:inherit; transition:all .18s;
}
.cx-regen-btn:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-soft); }
.cx-regen-btn:disabled { opacity:.45; pointer-events:none; }

/* Cümle kutusu */
.cx-sentence-box {
    background:var(--bg); border:1.5px solid var(--border);
    border-left:3.5px solid var(--color-primary); border-radius:14px;
    padding:var(--padding-card) 18px; display:flex; flex-direction:column; gap:var(--gap-tight);
}
.cx-sentence-eyebrow { font-size:.6rem; font-weight:800; color:var(--color-primary); text-transform:uppercase; letter-spacing:.1em; }
.cx-sentence { font-size:1rem; line-height:1.9; color:var(--ink); font-weight:500; }

/* İpucu barı */
.cx-hint-bar {
    display:flex; align-items:center; gap:var(--gap-tight); flex-wrap:wrap;
    background:var(--white); border:1.5px solid var(--border);
    border-radius:10px; padding:9px 14px;
}
.cx-hint-tag { font-size:.75rem; color:var(--ink3); font-weight:700; white-space:nowrap; }
.cx-hint-val { font-size:.9rem; color:var(--ink); font-weight:800; }

/* Input satırı */
.cx-input-row { display:flex; align-items:center; gap:var(--gap-tight); }
.cx-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 .18s;
    margin:0 !important; width:auto !important;
}
.cx-input::placeholder { color:var(--ink3) !important; font-weight:500; }
.cx-input:focus { border-color:var(--color-focus) !important; background:var(--white) !important; }
.cx-input:disabled { opacity:.6; }
.cx-go-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;
    box-shadow:0 3px 14px rgba(230,57,70,.28); transition:transform .14s, box-shadow .14s;
}
.cx-go-btn:hover  { transform:scale(1.06); box-shadow:0 5px 20px rgba(230,57,70,.44); }
.cx-go-btn:active { transform:scale(.95); }

/* Feedback */
.cx-feedback {
    text-align:center; font-size:.88rem; font-weight:700;
    border-radius:10px; min-height:0;
}
.cx-feedback:empty { display:none; }
.cx-feedback-ok   { background:var(--clr-success-bg-lt); border:1.5px solid #bbf7d0; color:#15803d; padding:9px 14px; animation:cxFbPop .3s cubic-bezier(.34,1.56,.64,1); }
.cx-feedback-err  { background:var(--color-primary-soft); border:1.5px solid rgba(230,57,70,.25); color:var(--color-primary); padding:9px 14px; animation:cxFbShake .32s ease; }
@keyframes cxFbPop   { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes cxFbShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Butonlar */
.cx-actions { display:flex; gap:var(--gap-tight); }
.cx-check-btn, .cx-next-btn {
    flex:1; padding:13px 18px; border-radius:12px;
    font-family:inherit; font-size:.9rem; font-weight:800;
    cursor:pointer; border:none; transition:all .16s;
}
.cx-check-btn { background:var(--color-primary); color:white; box-shadow:0 3px 14px rgba(230,57,70,.22); }
.cx-check-btn:hover { transform:translateY(-1px); box-shadow:0 5px 20px rgba(230,57,70,.38); }
.cx-next-btn {
    background:var(--clr-success); color:white;
    display:flex; align-items:center; justify-content:center; gap:6px;
    box-shadow:0 3px 14px rgba(34,197,94,.2);
    animation:cxNextPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cxNextPop { from{transform:scale(.82)} to{transform:scale(1)} }
.cx-next-btn:hover { transform:translateY(-1px); }

/* Mobile */
@media(max-width:699px) {
    .sr-header, .cx-header { padding:8px 12px; }
    .sr-stat { padding:0 12px; }
    .cx-stat { padding:0 12px; }
    .sr-main, .cx-main { padding:14px 12px 28px; gap:10px; }
    .sr-front { padding:20px 16px 18px; }
    .sr-answer-zone { padding:0 16px 20px; }
    .sr-rate-grid { grid-template-columns:repeat(2,1fr); }
    .sr-word { font-size:2rem; padding:18px 16px; }
    .cx-card { padding:var(--padding-card) 14px 14px; }
}