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

/* ═══════════════════════════════════════════════════════════════
   SM-2 TEKRAR  (sr-*)
   ═══════════════════════════════════════════════════════════════ */

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

/* Header */
.sr-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%;
    box-shadow:0 1px 0 var(--border);
}
.sr-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;
}
.sr-exit-btn:hover { background:var(--color-primary-soft); color:var(--color-primary); border-color:var(--color-primary); }
.sr-header-mid { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.sr-label { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--ink3); }
.sr-prog-track { width:100%; max-width:260px; height:5px; background:var(--border); border-radius:99px; overflow:hidden; }
.sr-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); }
.sr-prog-text { font-size:.66rem; font-weight:700; color:var(--ink3); }
.sr-streak-pill {
    display:flex; align-items:center; gap:4px; flex-shrink:0;
    background:var(--color-primary-soft); border:1.5px solid rgba(230,57,70,.18);
    border-radius:50px; padding:5px 13px;
}
#sr-streak-num { font-size:.98rem; font-weight:900; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.sr-streak-fire { font-size:.9rem; }

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

/* Scrollable main */
.sr-main {
    flex:1; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:22px 20px 44px; gap:14px; -webkit-overflow-scrolling:touch;
}

/* Motivasyon bandı */
.sr-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:560px; 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 wrapper */
.sr-card {
    width:100%; max-width:560px;
    background:var(--white); border:1.5px solid var(--border); border-radius:22px;
    overflow:hidden; box-shadow:0 6px 36px rgba(0,0,0,.08);
    animation:srSlideUp .38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes srSlideUp { from{opacity:0;transform:translateY(22px) scale(.96)} to{opacity:1;transform:none} }

/* Front */
.sr-front { padding:28px 28px 24px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.sr-card-eyebrow {
    align-self:flex-start; display:flex; align-items:center; gap:7px;
    font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3);
}
.sr-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--color-primary); flex-shrink:0; }

.sr-word {
    width:100%; box-sizing:border-box; padding:22px 24px;
    background:var(--bg); border:1.5px solid var(--border); border-radius:16px;
    font-size:clamp(2rem,7vw,3rem); font-weight:900; color:var(--ink);
    letter-spacing:-.03em; line-height:1; text-align:center; cursor:pointer;
    transition:background .18s, border-color .18s; position:relative;
}
.sr-word::after {
    content:'🔊'; position:absolute; right:16px; top:50%;
    transform:translateY(-50%); font-size:1rem; opacity:.35; transition:opacity .18s;
}
.sr-word:hover { background:var(--color-primary-soft); border-color:rgba(230,57,70,.22); }
.sr-word:hover::after { opacity:.9; }

.sr-mnemonic {
    font-size:.85rem; color:var(--ink3); text-align:center;
    line-height:1.65; font-style:italic; padding:0 4px;
}
.sr-reveal-btn {
    width:100%; display:flex; align-items:center; justify-content:center; gap:var(--gap-tight);
    background:var(--color-primary); color:white; border:none; border-radius:13px;
    padding:14px 20px; font-family:inherit; font-size:.95rem; font-weight:800;
    cursor:pointer; box-shadow:0 4px 20px rgba(230,57,70,.3);
    transition:transform .14s, box-shadow .14s;
}
.sr-reveal-btn:hover { transform:translateY(-2px); box-shadow:0 7px 28px rgba(230,57,70,.42); }
.sr-reveal-btn:active { transform:scale(.97); }

/* Answer zone */
.sr-answer-zone {
    padding:0 28px 28px;
    animation:srAnswerPop .32s cubic-bezier(.34,1.56,.64,1);
    display:flex; flex-direction:column; gap:18px;
}
@keyframes srAnswerPop { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.sr-answer-reveal {
    background:var(--green-s); border:1.5px solid #bbf7d0;
    border-radius:14px; padding:18px 20px; text-align:center;
}
.sr-answer-lbl { font-size:.6rem; font-weight:800; color:var(--clr-success-dk); text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }
.sr-answer-word { font-size:1.7rem; font-weight:900; color:#15803d; letter-spacing:-.02em; }

.sr-rate-question { font-size:.7rem; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; text-align:center; }

.sr-rate-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
@media(max-width:500px){ .sr-rate-grid { grid-template-columns:repeat(2,1fr); } }

.sr-rate-btn {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:14px 6px; border-radius:14px; border:1.5px solid var(--border);
    background:var(--white); cursor:pointer; font-family:inherit;
    transition:transform .14s, border-color .14s, background .14s;
    -webkit-tap-highlight-color:transparent;
}
.sr-rate-btn:hover  { transform:translateY(-3px); }
.sr-rate-btn:active { transform:scale(.95); }
.sr-rate-emoji { font-size:1.6rem; line-height:1; }
.sr-rate-title { font-size:.78rem; font-weight:800; color:var(--ink); }
.sr-rate-sub   { font-size:.58rem; color:var(--ink3); font-weight:600; text-align:center; }

.sr-fail { border-color:#fca5a5; background:#fef2f2; }
.sr-fail:hover  { background:var(--clr-danger-bg); border-color:var(--color-primary); }
.sr-hard { border-color:#fed7aa; background:#fff7ed; }
.sr-hard:hover  { background:#ffedd5; border-color:#ea580c; }
.sr-good { border-color:#bbf7d0; background:var(--clr-success-bg-lt); }
.sr-good:hover  { background:var(--clr-success-bg); border-color:var(--clr-success); }
.sr-easy { border-color:#bfdbfe; background:#eff6ff; }
.sr-easy:hover  { background:#dbeafe; border-color:#3b82f6; }

.sr-algo-note {
    display:flex; align-items:center; gap:6px;
    font-size:.7rem; color:var(--ink3); font-weight:600; max-width:560px; margin:0;
}


/* ══════════════════════════════════════════════════════
   SM-2 BİLGİLENDİRME PANELİ
   ══════════════════════════════════════════════════════ */
.sm2-info-panel {
    margin: 16px 16px 32px;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--white);
    overflow: hidden;
}

.sm2-info-section { padding: 16px 16px 10px; }

.sm2-info-title {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink3);
    margin-bottom: 10px;
}

.sm2-info-text {
    font-size: .72rem;
    color: var(--ink2);
    line-height: 1.7;
}

.sm2-info-divider {
    height: 1px;
    background: var(--border);
    margin: 0 16px;
}

/* Formül kutusu */
.sm2-formula-box {
    background: var(--surface2);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.sm2-formula-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    font-size: .65rem;
}
.sm2-formula-row:last-child { border-bottom: none; }
.sm2-formula-label {
    color: var(--ink3);
    font-weight: 700;
    min-width: 130px;
    flex-shrink: 0;
}
.sm2-formula-val {
    color: var(--ink);
    font-family: 'Courier New', monospace;
    font-size: .62rem;
    word-break: break-all;
}

/* Buton rehberi */
.sm2-btn-guide { display: flex; flex-direction: column; gap: 8px; }

.sm2-btn-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
}
.sm2-btn-fail  { background: rgba(239,68,68,.05);  border-color: rgba(239,68,68,.2); }
.sm2-btn-hard  { background: rgba(249,115,22,.05); border-color: rgba(249,115,22,.2); }
.sm2-btn-good  { background: rgba(34,197,94,.05);  border-color: rgba(34,197,94,.2); }
.sm2-btn-easy  { background: rgba(99,102,241,.05); border-color: rgba(99,102,241,.2); }

.sm2-btn-emoji { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.sm2-btn-title {
    font-size: .74rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sm2-q-badge {
    font-size: .58rem;
    font-weight: 700;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--ink3);
    font-family: 'Courier New', monospace;
}
.sm2-btn-desc {
    font-size: .65rem;
    color: var(--ink2);
    line-height: 1.55;
}

/* Aralık tablosu */
.sm2-interval-table {
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.sm2-int-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    font-size: .65rem;
    color: var(--ink2);
    border-bottom: 1px solid var(--border);
}
.sm2-int-row:last-child { border-bottom: none; }
.sm2-int-row span {
    padding: 7px 10px;
    border-right: 1px solid var(--border);
}
.sm2-int-row span:last-child { border-right: none; }
.sm2-int-header {
    background: var(--surface2);
    font-weight: 800;
    color: var(--ink3);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Uygulama grid */
.sm2-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 400px) { .sm2-app-grid { grid-template-columns: 1fr; } }

.sm2-app-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.sm2-app-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.sm2-app-label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 3px;
}
.sm2-app-desc {
    font-size: .62rem;
    color: var(--ink3);
    line-height: 1.5;
}