/* ── NATIVE AD STYLES ── */
.native-ad-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
margin: 16px 0;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.native-ad-card:active { transform: scale(0.98); }
.ad-badge {
position: absolute;
top: 0;
right: 0;
background: #f59e0b;
color: #fff;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-bottom-left-radius: 8px;
}
.ad-content { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ad-icon { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ad-text { flex: 1; }
.ad-headline { font-weight: 800; color: var(--ink); font-size: 0.95rem; margin-bottom: 2px; text-align: left; }
.ad-body { font-size: 0.8rem; color: var(--ink3); line-height: 1.4; text-align: left; }
.ad-main-img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }
.ad-cta-btn {
width: 100%;
padding: 10px;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
}
:root{
/* ════════════════════════════════════════════════════════════════
CANONICAL TOKEN'LAR — TEK KAYNAK
Tüm renk kararları burada. Başka hiçbir yerde raw hex kullanılmaz.
════════════════════════════════════════════════════════════════
BRAND / PRIMARY → #c1121f (WCAG AA 6.22:1 üzeri arka planlarda)
DANGER / ERROR → #dc2626 (WCAG AA 5.5:1 ✅)
KURAL: Yeni kod sadece --color-brand veya --color-error kullanır.
Legacy alias'lar backward compat için korunur, yeni yazılmaz.
════════════════════════════════════════════════════════════════ */
/* ── CANONICAL: Brand (primary) ─────────────────────────────── */
--color-brand: #c1121f; /* TEK KAYNAK — CTA, nav-active, focus ring */
--color-brand-soft: #fdf1f2; /* Brand soft arka plan */
/* ── CANONICAL: Danger / Error ──────────────────────────────── */
--color-error: #dc2626; /* TEK KAYNAK — hata, yanlış cevap, sil */
--color-error-soft: #fef2f2; /* Error soft arka plan */
/* ── LEGACY ALIAS'LAR — backward compat, yeni kod yazma ─────── */
/* Mevcut bileşenler bu token'ları kullanmaya devam edebilir. */
--red: var(--color-brand); /* → --color-brand */
--red-soft: var(--color-brand-soft); /* → --color-brand-soft */
--color-primary: var(--color-brand); /* → --color-brand */
--color-primary-soft:var(--color-brand-soft); /* → --color-brand-soft */
--color-active: var(--color-brand); /* → --color-brand */
--color-active-soft: var(--color-brand-soft); /* → --color-brand-soft */
--color-focus: var(--color-brand); /* → --color-brand */
--color-danger: var(--color-error); /* → --color-error */
--color-danger-soft: var(--color-error-soft); /* → --color-error-soft */
/* ── NOT: --clr-danger (satır ~82) da var(--color-error)'a alias edildi ── */
--ink:var(--clr-bg-deep);--ink2:#555566;--ink3:#606070;
--border:#ebebf0;--bg:#f7f7fb;--white:#ffffff;--green:var(--clr-success);--green-s:var(--clr-success-bg-lt);
/* ── Renk Paleti Tokens ── */
--c-purple: var(--clr-brand-dark); --c-purple-soft: #f5f3ff; --c-purple-border: #c4b5fd;
--c-blue: #2563eb; --c-blue-soft: #eff6ff; --c-blue-border: #93c5fd;
--c-sky: #0ea5e9; --c-sky-soft: #f0f9ff; --c-sky-border: #7dd3fc;
--c-teal: #059669; --c-teal-soft: #ecfdf5; --c-teal-border: #6ee7b7;
--c-green: var(--clr-success-dk); --c-green-soft: var(--clr-success-bg-lt); --c-green-border: #bbf7d0;
--c-amber: #ca8a04; --c-amber-soft: #fef9c3; --c-amber-border: #fde68a;
--c-orange: #ea580c; --c-orange-soft: #fff7ed; --c-orange-border: #fed7aa;
--c-pink: #e11d48; --c-pink-soft: #fff1f2; --c-pink-border: #fda4af;
--c-indigo: #4f46e5; --c-indigo-soft: #eef2ff; --c-indigo-border: #a5b4fc;
--c-fuchsia: #a21caf; --c-fuchsia-soft:#fdf4ff; --c-fuchsia-border:#f0abfc;
--c-violet: var(--clr-brand); --c-violet-soft: #eef2ff; --c-violet-border: #c7d2fe;
--c-sync-idle: #cccccc; /* Sync dot varsayılan */
--c-saved-bg: var(--clr-success-bg); --c-saved-color: var(--clr-success-dk); /* API key kayıtlı badge */
--c-ai-gradient-from: #667eea; --c-ai-gradient-to: #764ba2; /* AI promo banner */
--c-code-bg: #e2e8f0; /* Inline kod arka planı */
--c-info-bg: #f8fafc; /* Bilgi kutusu arka planı */
/* ── Z-index scale ── */
--z-below: -1;
--z-base: 1;
--z-raised: 5;
--z-sticky: 10;
--z-floating: 50;
--z-dropdown:100;
--z-drawer-bg:200;
--z-drawer: 201;
--z-panel: 300;
--z-modal: 1000;
--z-alert: 5000;
--z-overlay:9000;
--z-toast-bg:9998;
--z-toast: 9999;
/* ── 8pt Spacing Scale ─────────────────────────────────────────── */
/* 187 unique padding değerinin uzun vadeli çözümü — yeni bileşenler buradan tüketmeli */
--space-1: 4px; /* 0.5×8 — micro gap */
--space-2: 8px; /* 1×8 — tight gap */
--space-3: 12px; /* 1.5×8 — normal gap */
--space-4: 16px; /* 2×8 — card padding */
--space-5: 20px; /* 2.5×8 */
--space-6: 24px; /* 3×8 — section padding */
--space-8: 32px; /* 4×8 — section gap */
--space-10: 40px; /* 5×8 */
--space-12: 48px; /* 6×8 — page padding */
/* Bileşen padding token'ları */
--padding-card: var(--space-4);
--padding-section: var(--space-6);
--gap-tight: var(--space-2);
--gap-normal: var(--space-3);
--gap-loose: var(--space-4);
/* ── Semantic Font-Weight Scale ────────────────────────────────── */
--fw-body: 500; /* normal gövde metni */
--fw-label: 700; /* küçük etiketler, badge */
--fw-data: 800; /* sayılar, vurgu değerleri */
--fw-hero: 900; /* başlıklar, hero */
/* ── Extended color tokens (auto-generated) ── */
--clr-brand: #6366f1;
--clr-brand-dark: #7c3aed;
--clr-brand-light: #ede9fe;
--clr-bg-deep: #1a1a2e;
--clr-bg-card: #13131f;
--clr-success: #15803d; /* metin: #22c55e→#15803d WCAG fix: 2.28:1→5.02:1 ✅ */
--clr-success-icon: #22c55e; /* ikon/dekoratif: kontrast gerekmez */
--clr-success-dk: #16a34a;
--clr-success-bg: #dcfce7;
--clr-success-bg-lt: #f0fdf4;
--clr-danger: var(--color-error); /* ALIAS → --color-error (#dc2626) — WCAG 5.5:1 ✅ */
--clr-danger-bg: #fee2e2;
--clr-warn: #f59e0b;
--clr-warn-bg: #fde68a;
--clr-text-muted: #6b6b8a; /* #9090b0 → #6b6b8a — WCAG fix: 3.09:1→5.2:1 ✅ */
--clr-text-dim: #6b7280;
}
html { font-size: 18px; } /* base 16px → 18px: tüm rem değerleri %12.5 büyür */
/* ── Sync dot — tekrar eden inline style yerine CSS class ─────────────
Kullanım:
Renk JS tarafından background ile override edilir (var(--c-sync-*))
────────────────────────────────────────────────────────────────────── */
.sync-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-sync-idle, #94a3b8);
flex-shrink: 0;
}
/* ── Global Heading Hierarchy ───────────────────────────────────────────
H1-H6 global tanım — her section kendi class'ını yazmak zorunda kalmasın.
Bileşen class'ları gerektiğinde override edebilir.
───────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
line-height: 1.25;
font-weight: var(--fw-hero, 900);
color: var(--ink);
margin: 0;
}
h1 { font-size: var(--text-2xl, 2.15rem); }
h2 { font-size: var(--text-xl, 1.72rem); }
h3 { font-size: var(--text-lg, 1.38rem); }
h4 { font-size: var(--text-md, 1.10rem); }
h5 { font-size: var(--text-base,.94rem); }
h6 { font-size: var(--text-sm, .82rem); font-weight: var(--fw-label, 700); }
/* ── Body line-height normalize ─────────────────────────────────────── */
body { line-height: 1.6; }
p { line-height: 1.65; margin: 0; }
small { line-height: 1.5; font-size: var(--text-xs, .70rem); }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
/* ═══ LOADING OVERLAY ═══ */
#loading-overlay{
display:none;position:fixed;inset:0;z-index:var(--z-toast);
background:rgba(255,255,255,.96);
flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.loading-spinner{
width:40px;height:40px;
border:3px solid var(--border);
border-top-color:var(--color-primary);
border-radius:50%;
animation:spin .7s linear infinite;
}
.loading-title{font-weight:800;color:var(--ink);font-size:.95rem;}
.loading-sub{font-size:.75rem;color:var(--ink3);}
/* ═══ DESKTOP ≥700px: sidebar + centered card ═══ */
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);display:flex;min-height:100vh;}
.desktop-sidebar{
width:228px;flex-shrink:0;background:var(--white);
border-right:1px solid var(--border);
display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
z-index:var(--z-dropdown);
transition:width .22s cubic-bezier(.4,0,.2,1);
}
/* ── Standalone container sayfalar (study, profil vb.) desktop'ta ortalansın ── */
/* ── Collapsed (dar) mod ── */
.desktop-sidebar.sb-collapsed { width:62px; overflow-x:hidden; }
.desktop-sidebar.sb-collapsed .serkan-logo-text,
.desktop-sidebar.sb-collapsed .sb-sync,
.desktop-sidebar.sb-collapsed .sb-sec,
.desktop-sidebar.sb-collapsed .sb-badge,
.desktop-sidebar.sb-collapsed .sb-badge-pill,
.desktop-sidebar.sb-collapsed .sb-grammar-toggle-label,
.desktop-sidebar.sb-collapsed .sb-grammar-chev,
.desktop-sidebar.sb-collapsed .sb-grammar-list { display:none !important; }
.desktop-sidebar.sb-collapsed .sb-logo {
padding:14px 0 !important;
justify-content:center;
flex-direction:column;
gap:10px;
}
.desktop-sidebar.sb-collapsed .serkan-logo { justify-content:center; }
.desktop-sidebar.sb-collapsed .sb-collapse-btn { margin:0 auto; }
.desktop-sidebar.sb-collapsed .sb-collapse-btn svg { transform:rotate(180deg); }
.desktop-sidebar.sb-collapsed .sb-btn,
.desktop-sidebar.sb-collapsed .sb-btn-sub,
.desktop-sidebar.sb-collapsed .sb-btn-sec,
.desktop-sidebar.sb-collapsed .sb-btn-admin,
.desktop-sidebar.sb-collapsed .sb-grammar-toggle {
justify-content:center;
padding:9px 0;
font-size:0 !important;
gap:0;
border-radius:10px;
}
.desktop-sidebar.sb-collapsed .sb-icon { font-size:1.15rem !important; margin:0; }
.desktop-sidebar.sb-collapsed .sb-nav-primary,
.desktop-sidebar.sb-collapsed .sb-secondary { padding:4px 6px; }
.desktop-sidebar.sb-collapsed .sb-secondary-divider { margin:4px 4px 6px; }
.desktop-sidebar.sb-collapsed .sb-admin-bar { padding:0 2px 4px; }
/* Tooltip collapsed modda */
.desktop-sidebar.sb-collapsed .sb-btn[title]:hover::after,
.desktop-sidebar.sb-collapsed .sb-btn-sec[title]:hover::after {
content: attr(title);
position:absolute; left:70px; top:50%;
transform:translateY(-50%);
background:var(--clr-bg-deep); color:#fff;
padding:5px 10px; border-radius:8px;
font-size:.75rem; font-weight:600;
white-space:nowrap; pointer-events:none;
z-index:var(--z-tooltip,9000);
box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.desktop-sidebar.sb-collapsed .sb-btn[title],
.desktop-sidebar.sb-collapsed .sb-btn-sec[title] { position:relative; }
/* ── Toggle butonu ── */
.sb-collapse-btn {
display:flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:7px;
border:1.5px solid var(--border); background:var(--white);
color:var(--ink3); cursor:pointer; flex-shrink:0;
transition:all .18s; margin-left:auto;
}
.sb-collapse-btn:hover { background:var(--bg); color:var(--ink); border-color:var(--ink3); }
.sb-collapse-btn svg { transition:transform .22s cubic-bezier(.4,0,.2,1); }
.sb-logo{padding:18px 18px 14px;border-bottom:1px solid var(--border);}
.sb-badge{font-size:.6rem;font-weight:800;letter-spacing:1.5px;color:var(--color-primary);text-transform:uppercase;}
.sb-title{font-size:1rem;font-weight:900;color:var(--ink);margin-top:4px;}
.sb-title em{color:var(--color-primary);font-style:normal;}
.sb-sync{display:flex;align-items:center;gap:6px;padding:6px 18px 8px;font-size:.66rem;font-weight:600;color:var(--ink3);border-bottom:1px solid var(--border);}
/* Section headers */
.sb-sec{font-size:.58rem;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;padding:12px 12px 4px;}
/* Primary nav — scrollable flex:1 */
.sb-nav-primary{flex:1;padding:4px 8px 8px;overflow-y:auto;min-height:0;}
/* Common button */
.sb-btn{
display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
cursor:pointer;font-size:.84rem;font-weight:600;color:var(--ink2);
border:none;background:none;width:100%;text-align:left;font-family:inherit;
transition:background .12s,color .12s;margin-bottom:1px;
white-space:nowrap;overflow:hidden;
}
.sb-btn:hover{background:var(--bg);color:var(--ink);}
.sb-btn.active{background:var(--color-active-soft);color:var(--color-active);font-weight:700;}
.sb-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;}
.sb-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0;}
.sb-badge-pill{margin-left:auto;background:var(--color-primary);color:white;font-size:.56rem;font-weight:800;padding:1px 5px;border-radius:20px;flex-shrink:0;}
/* Sub-items (Grammar children) */
.sb-btn-sub{padding-left:36px;font-size:.8rem;color:var(--ink3);font-weight:500;}
.sb-btn-sub:hover{color:var(--ink);}
.sb-btn-sub.active{color:var(--color-active);background:var(--color-active-soft);font-weight:700;}
/* Grammar toggle button */
.sb-grammar-toggle{
display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
cursor:pointer;font-size:.84rem;font-weight:600;color:var(--ink2);
border:none;background:none;width:100%;text-align:left;font-family:inherit;
transition:background .12s,color .12s;margin-bottom:1px;
}
.sb-grammar-toggle:hover{background:var(--bg);color:var(--ink);}
.sb-grammar-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;}
.sb-grammar-toggle[aria-expanded="true"]{color:var(--ink);}
.sb-grammar-toggle-label{flex:1;}
.sb-grammar-chev{color:var(--ink3);flex-shrink:0;transition:transform .22s cubic-bezier(.4,0,.2,1);}
.sb-grammar-toggle[aria-expanded="true"] .sb-grammar-chev{transform:rotate(180deg);}
/* Grammar list — collapsed by default */
.sb-grammar-list{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .22s ease;}
.sb-grammar-list--open{max-height:2000px;opacity:1;}
/* Secondary section */
.sb-secondary{display:flex;flex-direction:column;padding:0 8px 8px;flex-shrink:0;}
.sb-secondary-divider{height:1px;background:var(--border);margin:4px 4px 8px;}
.sb-nav-secondary{padding:0;}
.sb-btn-sec{font-size:.8rem;color:var(--ink3);font-weight:500;padding:7px 10px;}
.sb-btn-sec:hover{color:var(--ink);background:var(--bg);}
.sb-btn-sec.active{color:var(--color-active);background:var(--color-active-soft);}
/* Admin bar */
.sb-admin-bar{margin-top:4px;padding-top:8px;border-top:1px solid var(--border);}
.sb-btn-admin{font-size:.78rem;color:var(--ink3);font-weight:600;padding:7px 10px;gap:7px;border-radius:8px;}
.sb-btn-admin:hover{background:#f5f5f8;color:var(--ink);}
.sb-btn-admin:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;}
.desktop-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:28px 20px;min-height:100vh;overscroll-behavior:contain;}
.desktop-main > .container { margin-left:auto; margin-right:auto; }
/* ═══ MOBILE <700px ═══ */
.mob-topbar{display:none;}
.mob-bottomnav{display:none;}
.mob-drawer-overlay{display:none;}
.mob-drawer{display:none;}
@media(max-width:699px){
html,body{overflow:hidden;height:100%;overscroll-behavior:none;}
body{display:block;}
.desktop-sidebar{display:none !important;}
.desktop-main{
display:block !important;padding:0 !important;
position:fixed;top:52px;bottom:60px;left:0;right:0;
overflow-y:auto;-webkit-overflow-scrolling:touch;
min-height:unset;
}
.mob-topbar{
display:flex;position:fixed;top:0;left:0;right:0;height:52px;
background:var(--white);border-bottom:1px solid var(--border);
align-items:center;padding:0 14px;gap:10px;z-index:var(--z-dropdown);
}
.mob-logo{flex:1;font-size:.92rem;font-weight:900;color:var(--ink);}
.mob-logo em{color:var(--color-primary);font-style:normal;}
.mob-sync{display:flex;align-items:center;gap:5px;font-size:.6rem;font-weight:600;color:var(--ink3);margin-left:auto;}
.mob-reward-btn{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 8px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--ink);font-size:.58rem;font-weight:900;box-shadow:0 6px 16px rgba(15,23,42,.08);white-space:nowrap;}
.mob-reward-btn .tokens-val{min-width:16px;height:16px;border-radius:999px;background:#f59e0b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.55rem;line-height:1;}
.mob-reward-icon{font-size:.82rem;line-height:1;}
.mob-topbar-theme-btn{
flex-shrink:0;width:36px;height:36px;border-radius:10px;
border:1.5px solid var(--border);background:var(--bg,#f4f4f8);
font-size:1rem;cursor:pointer;display:flex;align-items:center;
justify-content:center;-webkit-tap-highlight-color:transparent;transition:background .18s;
}
.mob-topbar-theme-btn:active{opacity:.7;}
.mob-burger{
width:44px;height:44px;flex-shrink:0;background:none;border:none;
cursor:pointer;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:5px;border-radius:10px;
/* ♿ Apple HIG & WCAG 2.5.5: minimum 44×44px touch target */
}
.mob-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s;}
.mob-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mob-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.mob-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mob-bottomnav{
display:grid;position:fixed;bottom:0;left:0;right:0;height:60px;
background:var(--white);border-top:1px solid var(--border);
grid-template-columns:repeat(5,1fr);z-index:var(--z-dropdown);
padding-bottom:env(safe-area-inset-bottom,0);
}
.mob-tab{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
background:none;border:none;cursor:pointer;
font-size:.62rem;font-weight:700;color:var(--ink3);
font-family:inherit;padding:4px 2px;position:relative;
transition:color .12s;
}
.mob-tab-icon{font-size:1.3rem;line-height:1;}
.mob-tab.active{color:var(--color-active);}
.mob-tab.active .mob-tab-icon{filter:drop-shadow(0 0 3px rgba(230,57,70,.35));}
.mob-tab-badge{
position:absolute;top:4px;right:calc(50% - 16px);
background:var(--color-primary);color:white;font-size:.48rem;
font-weight:800;padding:1px 4px;border-radius:8px;min-width:13px;text-align:center;
}
.mob-drawer-overlay{
display:block;position:fixed;inset:0;z-index:var(--z-drawer-bg);
background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;
}
.mob-drawer-overlay.open{opacity:1;pointer-events:auto;}
.mob-drawer{
display:flex;position:fixed;top:0;left:0;bottom:0;
width:80%;max-width:290px;background:var(--white);
box-shadow:4px 0 28px rgba(0,0,0,.15);z-index:var(--z-drawer);
transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
flex-direction:column;overflow-y:auto;
}
.mob-drawer.open{transform:translateX(0);}
.mob-drawer-head{padding:62px 20px 14px;border-bottom:1px solid var(--border);}
.mob-drawer-badge{font-size:.6rem;font-weight:800;letter-spacing:1.5px;color:var(--color-primary);text-transform:uppercase;}
.mob-drawer-title{font-size:1.05rem;font-weight:900;color:var(--ink);margin-top:4px;}
.mob-drawer-title em{color:var(--color-primary);font-style:normal;}
.mob-drawer-sync{display:flex;align-items:center;gap:6px;padding:10px 20px 8px;font-size:.68rem;font-weight:600;color:var(--ink3);border-bottom:1px solid var(--border);}
.mob-drawer-nav{flex:1;padding:6px 10px 16px;display:flex;flex-direction:column;}
.mob-drawer-sec{font-size:.58rem;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;padding:12px 10px 4px;}
.mob-drawer-btn{
display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;
cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink2);
border:none;background:none;width:100%;text-align:left;font-family:inherit;margin-bottom:2px;
white-space:nowrap;overflow:hidden;
}
.mob-drawer-btn:active{background:var(--bg);}
.mob-drawer-btn.active{background:var(--color-active-soft);color:var(--color-active);font-weight:700;}
.mob-d-icon{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0;}
.mob-d-badge{margin-left:auto;background:var(--color-primary);color:white;font-size:.56rem;font-weight:800;padding:2px 6px;border-radius:20px;}
/* Grammar sub-items */
.mob-drawer-btn-sub{padding-left:42px;font-size:.86rem;color:var(--ink3);font-weight:500;}
.mob-drawer-btn-sub:active{background:var(--bg);}
.mob-drawer-btn-sub.active{color:var(--color-active);background:var(--color-active-soft);}
/* Grammar toggle */
.mob-grammar-toggle{
display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;
cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink2);
border:none;background:none;width:100%;text-align:left;font-family:inherit;margin-bottom:2px;
}
.mob-grammar-toggle:active{background:var(--bg);}
.mob-grammar-toggle[aria-expanded="true"]{color:var(--ink);}
.mob-grammar-toggle-label{flex:1;}
.mob-grammar-chev{color:var(--ink3);flex-shrink:0;transition:transform .22s cubic-bezier(.4,0,.2,1);}
.mob-grammar-toggle[aria-expanded="true"] .mob-grammar-chev{transform:rotate(180deg);}
.mob-grammar-list{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .22s ease;}
.mob-grammar-list--open{max-height:800px;opacity:1;}
/* Secondary divider */
.mob-drawer-secondary-divider{height:1px;background:var(--border);margin:10px 4px 8px;flex-shrink:0;}
/* Secondary buttons */
.mob-drawer-btn-sec{font-size:.86rem;color:var(--ink3);font-weight:500;padding:9px 12px;}
.mob-drawer-btn-sec:active{background:var(--bg);}
.mob-drawer-btn-sec.active{color:var(--color-active);background:var(--color-active-soft);}
/* Admin bar */
.mob-drawer-admin-bar{margin-top:auto;padding-top:8px;padding-bottom:4px;border-top:1px solid var(--border);flex-shrink:0;}
.mob-drawer-btn-admin{font-size:.84rem;color:var(--ink3);font-weight:600;padding:10px 12px;border-radius:10px;gap:var(--gap-tight);}
.mob-drawer-btn-admin:active{background:var(--bg);}
.container{
border-radius:0 !important;border:none !important;box-shadow:none !important;
max-width:100% !important;padding:14px 14px 28px !important;
}
.index-container{padding:0 !important;}
}
/* ═══ SHARED ═══ */
.container{
background:var(--white);border-radius:20px;
border:1.5px solid rgba(230,57,70,.15);
box-shadow:0 2px 20px rgba(0,0,0,.06);
width:100%;max-width:480px;position:relative;
text-align:center;padding:var(--padding-section) 20px;
}
#study-page.container{ max-width:700px; }
.hidden{display:none !important;}
.back-btn{position:absolute;top:14px;left:14px;font-size:1.3rem;border:none;background:none;color:var(--ink3);cursor:pointer;z-index:var(--z-raised);}
select,input,textarea{width:100%;padding:12px 14px;margin:6px 0;border-radius:12px;border:1.5px solid var(--border);outline:none;font-size:16px;color:var(--ink);background:var(--white);font-family:inherit;-webkit-appearance:none;}
select:focus,input:focus,textarea:focus{border-color:var(--color-focus);}
.btn{background:var(--color-primary);color:white;border:none;padding:13px 16px;border-radius:12px;cursor:pointer;font-size:.94rem;font-weight:700;width:100%;margin-top:var(--space-2);font-family:inherit;transition:background .18s,transform .15s,box-shadow .18s;}
.btn:hover{background:var(--color-brand);transform:translateY(-2px);box-shadow:0 6px 18px rgba(230,57,70,.38);}
.btn:active{background:#a00f1a;opacity:.95;transform:scale(.98);box-shadow:none;}
.btn-ghost{background:none;color:var(--ink2);border:1.5px solid var(--border);}
.page-title{font-size:1.12rem;font-weight:800;color:var(--ink);margin-bottom:2px;margin-top:6px;}
.page-sub{font-size:.74rem;color:var(--ink3);margin-bottom:14px;}
.index-container{padding:0 !important;overflow:hidden;}
#index-page.container{ max-width:980px; }
/* ══════════════════════════════════════════════════════════════════
TİPOGRAFİ SKALASI — 7 TOKEN
xs · sm · base · md · lg · xl · 2xl
Her yerde bu değişkenler kullanılır, sabit px/rem yazılmaz.
══════════════════════════════════════════════════════════════════ */
:root {
--text-xs: .70rem; /* badge, meta, label-caps */
--text-sm: .82rem; /* body-secondary, desc */
--text-base: .94rem; /* body, nav items, button */
--text-md: 1.1rem; /* section title, card value-small */
--text-lg: 1.38rem; /* stat values, card headline */
--text-xl: 1.72rem; /* hero sub-headline */
--text-2xl: 2.15rem; /* hero headline */
}
/* ══════════════════════════════════════════════════════════════════
ANA SAYFA — INDEX DASHBOARD
══════════════════════════════════════════════════════════════════ */
/* ── Hero bant ── */
.idx-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 22px 26px 18px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
background: var(--white);
}
.idx-hero-left { flex: 1; min-width: 180px; }
.idx-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: 900;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: 20px;
padding: 3px 10px;
margin-bottom: 10px;
}
.idx-title {
font-size: var(--text-2xl);
font-weight: 900;
color: var(--ink);
line-height: 1.08;
margin: 0 0 4px;
letter-spacing: -.5px;
}
.idx-title em { color: var(--color-primary); font-style: normal; }
.idx-sub {
font-size: var(--text-sm);
color: var(--ink3);
margin: 0 0 16px;
line-height: 1.5;
}
/* Günlük hedef */
.idx-goal-wrap { max-width: 280px; }
.idx-goal-row {
display: flex;
justify-content: space-between;
font-size: var(--text-xs);
font-weight: 700;
color: var(--ink3);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 6px;
}
.idx-goal-track {
background: var(--border);
border-radius: 99px;
height: 6px;
overflow: hidden;
}
.idx-goal-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), #f97316);
border-radius: 99px;
width: 0%;
transition: width .5s cubic-bezier(.4,0,.2,1);
}
/* ── Hero stat kartları ── */
.idx-hero-right { flex-shrink: 0; }
.idx-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-tight);
}
.idx-stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 14px 20px;
border-radius: 16px;
background: var(--bg);
border: 1.5px solid var(--border);
min-width: 96px;
}
.idx-stat-val {
font-size: var(--text-lg);
font-weight: 900;
color: var(--ink);
line-height: 1;
}
.idx-stat-lbl {
font-size: var(--text-xs);
font-weight: 700;
color: var(--ink3);
text-transform: uppercase;
letter-spacing: .5px;
}
.idx-stat-green { background: var(--clr-success-bg-lt); border-color: #bbf7d0; }
.idx-stat-green .idx-stat-val { color: #15803d; }
.idx-stat-orange { background: #fff7ed; border-color: #fed7aa; }
.idx-stat-orange .idx-stat-val { color: #c2410c; }
.idx-stat-blue { background: #eff6ff; border-color: #bfdbfe; }
.idx-stat-blue .idx-stat-val { color: #1d4ed8; }
/* ── 2-kolon body ── */
.idx-body {
display: flex;
gap: 0;
min-height: 0;
}
.idx-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(230,57,70,.18);
}
.idx-col:last-child { border-right: none; }
.idx-section {
padding: 18px 20px;
border-bottom: 1px solid rgba(230,57,70,.12);
}
.idx-section:last-child { border-bottom: none; }
.idx-section-title {
font-size: var(--text-xs);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .8px;
color: var(--ink3);
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: 6px;
}
.idx-section-sub {
font-size: var(--text-xs);
font-weight: 500;
color: var(--ink3);
letter-spacing: 0;
text-transform: none;
opacity: .7;
}
/* ── Hızlı Başlat grid ── */
.idx-quick-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-tight);
}
.idx-quick-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 13px 14px;
border-radius: 14px;
border: 1.5px solid var(--border);
cursor: pointer;
background: var(--white);
text-align: left;
transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.idx-quick-btn:hover {
background: var(--bg);
border-color: var(--ink3);
box-shadow: 0 2px 10px rgba(0,0,0,.05);
transform: translateY(-1px);
}
.idx-quick-btn:active { transform: scale(.97); }
.idx-quick-icon { font-size: var(--text-md); margin-bottom: 2px; }
.idx-quick-title { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.idx-quick-desc { font-size: var(--text-xs); color: var(--ink3); font-weight: 500; }
.idx-q-study:hover { background: #fff1f2; border-color: var(--color-primary); }
.idx-q-quiz:hover { background: #fefce8; border-color: #ca8a04; }
.idx-q-para:hover { background: #f0f9ff; border-color: #0284c7; }
.idx-q-ai:hover { background: #faf5ff; border-color: var(--clr-brand-dark); }
.idx-q-exercise:hover { background: var(--clr-success-bg-lt); border-color: var(--clr-success-dk); }
.idx-q-games:hover { background: #fff7ed; border-color: #ea580c; }
/* ── Zayıf kelimeler ── */
/* ── En Zayıf Kelimeler — light + dark uyumlu ── */
.idx-weak-list { display: flex; flex-direction: column; gap: 6px; }
.idx-weak-empty {
font-size: var(--text-sm); color: var(--ink3);
text-align: center; padding: var(--padding-card) 0; line-height: 1.6;
}
.idx-weak-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 13px; border-radius: 12px;
border: 1.5px solid var(--border);
background: var(--white);
cursor: pointer;
transition: transform .15s, box-shadow .15s, border-color .15s;
position: relative; overflow: hidden;
}
.idx-weak-item::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; border-radius: 3px 0 0 3px;
background: var(--idx-weak-accent, #ef4444);
}
.idx-weak-item:hover {
transform: translateX(4px);
box-shadow: 0 3px 12px rgba(0,0,0,.08);
border-color: var(--idx-weak-accent, #ef4444);
}
/* Renk seviyeleri — CSS custom property ile */
.idx-weak-red { --idx-weak-accent: #ef4444; --idx-weak-bg: rgba(239,68,68,.07); }
.idx-weak-orange { --idx-weak-accent: #f97316; --idx-weak-bg: rgba(249,115,22,.07); }
.idx-weak-yellow { --idx-weak-accent: #eab308; --idx-weak-bg: rgba(234,179,8,.07); }
.idx-weak-red,
.idx-weak-orange,
.idx-weak-yellow { background: var(--white); border-color: var(--border); }
.idx-weak-rank {
font-size: var(--text-xs); font-weight: 900;
color: var(--ink3); width: 16px; flex-shrink: 0; text-align: center;
}
.idx-weak-body { flex: 1; min-width: 0; }
.idx-weak-word { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.idx-weak-tr { font-size: var(--text-xs); color: var(--ink3); margin-bottom: 4px; }
.idx-weak-bar-wrap {
height: 4px; background: var(--border);
border-radius: 99px; overflow: hidden;
}
.idx-weak-bar {
height: 100%; border-radius: 99px;
background: var(--idx-weak-accent, #ef4444);
transition: width .5s ease;
}
.idx-weak-meta { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex-shrink: 0; }
.idx-weak-err { font-size: var(--text-xs); font-weight: 700; color: var(--idx-weak-accent, #ef4444); }
.idx-weak-streak { font-size: var(--text-xs); font-weight: 700; color: var(--ink3); }
/* Dark mod */
[data-theme="dark"] .idx-weak-item {
background: var(--clr-bg-card);
border-color: #2a2a3e;
}
[data-theme="dark"] .idx-weak-red,
[data-theme="dark"] .idx-weak-orange,
[data-theme="dark"] .idx-weak-yellow { background: var(--clr-bg-card); border-color: #2a2a3e; }
[data-theme="dark"] .idx-weak-item:hover {
background: #1e1e30;
box-shadow: 0 3px 16px rgba(0,0,0,.35);
}
[data-theme="dark"] .idx-weak-bar-wrap { background: #2a2a3e; }
/* ── Soru Bankası ── */
.idx-bank-stats { display: flex; flex-direction: column; gap: 7px; }
.idx-bank-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg);
border: 1px solid var(--border);
cursor: pointer;
transition: transform .15s, box-shadow .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.idx-bank-row:hover {
background: var(--white);
transform: translateX(3px);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.idx-bank-icon {
width: 34px; height: 34px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: var(--text-md);
flex-shrink: 0;
}
.idx-bank-body { flex: 1; min-width: 0; }
.idx-bank-label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.idx-bank-meta { display: flex; align-items: center; gap: var(--gap-tight); margin-bottom: 4px; }
.idx-bank-cor { font-size: var(--text-xs); font-weight: 700; color: var(--clr-success-dk); }
.idx-bank-wrg { font-size: var(--text-xs); font-weight: 700; color: var(--color-error); }
.idx-bank-pct { font-size: var(--text-xs); font-weight: 800; }
.idx-bank-total-lbl { font-size: var(--text-xs); color: var(--ink3); font-weight: 600; }
.idx-bank-bar-wrap { height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; }
.idx-bank-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.idx-bank-count {
font-size: var(--text-md);
font-weight: 900;
flex-shrink: 0;
min-width: 28px;
text-align: right;
}
/* ── Grammar Modül Progress ── */
/* ── Grammar Progress — yeni tasarım (light + dark uyumlu) ── */
.idx-grammar-progress {
display: flex; flex-direction: column; gap: 6px;
}
.idx-gr-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: var(--white);
border: 1.5px solid var(--border);
cursor: pointer;
transition: transform .15s, box-shadow .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
position: relative; overflow: hidden;
}
.idx-gr-row::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: 3px 0 0 3px;
background: var(--idx-gr-accent, #7c3aed);
opacity: 0; transition: opacity .15s;
}
.idx-gr-row:hover {
transform: translateX(4px);
box-shadow: 0 3px 12px rgba(0,0,0,.08);
border-color: var(--idx-gr-accent, #7c3aed);
}
.idx-gr-row:hover::before { opacity: 1; }
.idx-gr-icon {
width: 32px; height: 32px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
background: var(--idx-gr-bg, rgba(124,58,237,.1));
color: var(--idx-gr-accent, #7c3aed);
}
.idx-gr-body { flex: 1; min-width: 0; }
.idx-gr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.idx-gr-label {
font-size: .7rem; font-weight: 700; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.idx-gr-score { font-size: .7rem; font-weight: 800; flex-shrink: 0; color: var(--idx-gr-accent, #7c3aed); }
.idx-gr-total { font-weight: 500; color: var(--ink3); font-size: .65rem; }
.idx-gr-bar-wrap {
height: 4px;
background: var(--border);
border-radius: 4px; overflow: hidden;
}
.idx-gr-bar {
height: 100%; border-radius: 4px;
transition: width .6s cubic-bezier(.34,1.2,.64,1);
background: var(--idx-gr-accent, #7c3aed);
}
.idx-gr-status {
font-size: .85rem; flex-shrink: 0;
width: 22px; text-align: center;
}
/* Dark mod */
[data-theme="dark"] .idx-gr-row {
background: var(--clr-bg-card);
border-color: #2a2a3e;
}
[data-theme="dark"] .idx-gr-row:hover {
background: #1e1e30;
border-color: var(--idx-gr-accent, #7c3aed);
box-shadow: 0 3px 16px rgba(0,0,0,.35);
}
[data-theme="dark"] .idx-gr-bar-wrap { background: #2a2a3e; }
/* ── Performans grafiği ── */
.idx-perf-chart { padding: 4px 0; min-height: 80px; }
.idx-perf-chart svg { display: block; }
.idx-perf-legend {
display: flex;
gap: 14px;
margin-top: var(--space-2);
font-size: var(--text-xs);
color: var(--ink3);
align-items: center;
}
.idx-perf-dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
}
.idx-perf-dot-correct { background: var(--clr-success); }
.idx-perf-dot-wrong { background: #ef4444; }
/* ── Kelime türü dağılımı ── */
.idx-pos-chart { display: flex; flex-direction: column; gap: 7px; }
/* idx-pos-row altta tanımlı */
.idx-pos-label-wrap { display: flex; align-items: center; gap: 6px; min-width: 140px; }
.idx-pos-pill {
font-size: var(--text-xs);
font-weight: 800;
padding: 2px 8px;
border-radius: 20px;
}
.idx-pos-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink2); flex: 1; }
.idx-pos-count { font-size: var(--text-xs); color: var(--ink3); font-weight: 600; }
.idx-pos-pct { font-size: var(--text-xs); color: var(--ink3); font-weight: 700; min-width: 28px; text-align: right; }
/* ── SM-2 Tekrar Planı ── */
.idx-sm2-plan { }
.idx-sm2-empty {
font-size: var(--text-sm);
color: var(--ink3);
text-align: center;
padding: var(--padding-card) 0;
line-height: 1.6;
}
.idx-sm2-summary { display: flex; flex-direction: column; gap: 10px; }
.idx-sm2-urgent {
display: flex;
align-items: center;
gap: var(--gap-normal);
padding: 14px 16px;
border-radius: 14px;
border: 1.5px solid;
cursor: pointer;
transition: transform .15s, box-shadow .15s;
-webkit-tap-highlight-color: transparent;
}
.idx-sm2-urgent:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.idx-sm2-urgent-num { font-size: var(--text-xl); font-weight: 900; flex-shrink: 0; line-height: 1; }
.idx-sm2-urgent-lbl { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.idx-sm2-urgent-sub { font-size: var(--text-xs); color: var(--ink3); margin-top: 2px; }
.idx-sm2-urgent-arrow { margin-left: auto; font-size: var(--text-md); color: var(--ink3); flex-shrink: 0; }
.idx-sm2-row-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.idx-sm2-mini {
display: flex; flex-direction: column; align-items: center;
padding: 9px 6px;
background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.idx-sm2-mini-num { font-size: var(--text-md); font-weight: 900; color: var(--ink); line-height: 1; }
.idx-sm2-mini-lbl { font-size: var(--text-xs); color: var(--ink3); font-weight: 600; margin-top: 3px; text-align: center; }
.idx-sm2-breakdown {
display: flex; flex-direction: column; gap: 5px;
padding: 8px 10px;
background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.idx-sm2-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-tight); }
.idx-sm2-list-name { font-size: var(--text-xs); font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.idx-sm2-list-badges { display: flex; gap: 4px; flex-shrink: 0; }
.idx-sm2-badge { font-size: var(--text-xs); font-weight: 800; padding: 2px 7px; border-radius: 20px; }
.idx-sm2-badge-red { background: var(--clr-danger-bg); color: var(--color-error); }
.idx-sm2-badge-yellow { background: #fef9c3; color: #a16207; }
/* ── Faydalı Kaynaklar ── */
.idx-links { display: flex; flex-direction: column; gap: 5px; }
.idx-link {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
border-radius: 11px;
border: 1.5px solid var(--border);
background: var(--white);
text-decoration: none;
transition: background .14s, border-color .14s, transform .14s;
}
.idx-link:hover { background: var(--bg); border-color: var(--ink3); transform: translateX(2px); }
.idx-link-icon { font-size: var(--text-md); flex-shrink: 0; }
.idx-link-body { flex: 1; min-width: 0; }
.idx-link-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.idx-link-desc { font-size: var(--text-xs); color: var(--ink3); }
.idx-link-arr { font-size: var(--text-sm); color: var(--ink3); flex-shrink: 0; }
/* ── YDT Strateji ── */
.idx-tips { display: flex; flex-direction: column; gap: 7px; }
.idx-tip {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg);
border: 1px solid var(--border);
}
.idx-tip-num {
font-size: var(--text-xs);
font-weight: 900;
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: 6px;
padding: 2px 7px;
flex-shrink: 0;
margin-top: 1px;
letter-spacing: .5px;
}
.idx-tip-text { font-size: var(--text-sm); color: var(--ink2); line-height: 1.55; }
.idx-tip-text strong { color: var(--ink); }
/* ── Eski sınıflar (geriye dönük uyumluluk) ── */
.hero-section { padding: 18px 18px 12px; border-bottom: 1px solid var(--border); }
.hero-badge { font-size: var(--text-xs); font-weight: 800; letter-spacing: 1.5px; color: var(--color-primary); text-transform: uppercase; }
.hero-title { font-size: var(--text-xl); font-weight: 900; color: var(--ink); line-height: 1.1; margin-top: 4px; }
.hero-title em { color: var(--color-primary); font-style: normal; }
.hero-sub { font-size: var(--text-sm); color: var(--ink3); margin-top: 4px; }
.list-picker-select { flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:9px 28px 9px 11px; font-size:var(--text-base); font-weight:600; color:var(--ink); margin:0 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; -webkit-appearance:none; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-tight); margin-top: 10px; }
.stat-card { background: var(--bg); border: 1px solid var(--border); padding: 12px; border-radius: 12px; text-align: left; }
.stat-val { display: block; font-size: var(--text-lg); font-weight: 900; color: var(--ink); }
.stat-label { font-size: var(--text-xs); color: var(--ink3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; display: block; }
.top-errors { text-align: left; background: var(--bg); padding: 12px; border-radius: 12px; margin-top: var(--space-2); border: 1px solid var(--border); }
.top-errors h4 { font-size: var(--text-sm); color: var(--ink); margin-bottom: 6px; }
/* ── Mobil uyum ── */
@media (max-width: 700px) {
.idx-hero { flex-direction: column; padding: var(--padding-card) 14px 12px; }
.idx-hero-right { width: 100%; }
.idx-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.idx-stat-card { padding: 10px 4px; min-width: 0; }
.idx-stat-val { font-size: var(--text-md); }
.idx-body { flex-direction: column; }
.idx-col { border-right: none; border-bottom: 1px solid rgba(230,57,70,.15); }
.idx-col:last-child { border-bottom: none; }
.idx-quick-grid { grid-template-columns: 1fr 1fr; }
.idx-section { padding: 14px 14px; }
#index-page.container { max-width: 100%; }
.idx-gr-label { max-width: 100px; }
}
/* ══════════════════════════════════════════════════════════════
SORU İSTATİSTİKLERİ BANDI — tam genişlik, hero altı
══════════════════════════════════════════════════════════════ */
.idx-sorustat-bar {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: stretch;
background: var(--white);
border-bottom: 1px solid var(--border);
}
.idx-sorustat-divider {
width: 1px;
background: var(--border);
margin: 12px 0;
}
.idx-sorustat-item {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 18px;
cursor: pointer;
transition: background .14s;
min-width: 0;
}
.idx-sorustat-item:hover { background: var(--bg); }
.idx-sorustat-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.idx-sorustat-body { flex: 1; min-width: 0; }
.idx-sorustat-label {
font-size: var(--text-xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--ink3);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.idx-sorustat-nums {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.idx-sorustat-total {
font-size: var(--text-lg);
font-weight: 900;
color: var(--ink);
line-height: 1;
}
.idx-sorustat-slash {
font-size: var(--text-xs);
color: var(--ink3);
font-weight: 500;
}
.idx-sorustat-cor {
font-size: var(--text-xs);
font-weight: 700;
color: var(--ink2);
}
.idx-sorustat-done {
font-size: var(--text-xs);
font-weight: 800;
margin-left: auto;
}
.idx-sorustat-bar-wrap {
height: 3px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.idx-sorustat-fill {
height: 100%;
border-radius: 99px;
transition: width .6s cubic-bezier(.4,0,.2,1);
}
/* Mobil: 2x2 grid */
@media (max-width: 700px) {
.idx-sorustat-bar {
grid-template-columns: 1fr 1px 1fr;
grid-template-rows: auto 1px auto;
}
.idx-sorustat-divider:nth-child(2) { /* 1. dikey ayraç → yatay */
grid-column: 1 / -1;
width: auto;
height: 1px;
margin: 0 12px;
}
.idx-sorustat-divider:nth-child(4) {
display: none; /* 2. dikey ayraç kaldır */
}
.idx-sorustat-divider:nth-child(6) {
grid-column: 1 / -1;
width: auto;
height: 1px;
margin: 0 12px;
}
.idx-sorustat-item { padding: 12px 14px; gap: 9px; }
.idx-sorustat-icon { width: 30px; height: 30px; font-size: .95rem; }
.idx-sorustat-total { font-size: var(--text-md); }
}
/* ── Grammar Modülleri — compact ── */
/* idx-gr-* — yukarıda tanımlandı */
.idx-gr-status { font-size: var(--text-sm); flex-shrink: 0; width: 18px; text-align: center; }
/* ── SM-2 Plan — compact ── */
.idx-sm2-plan { }
.idx-sm2-empty {
font-size: var(--text-sm);
color: var(--ink3);
text-align: center;
padding: var(--padding-card) 0;
line-height: 1.6;
}
.idx-sm2-summary { display: flex; flex-direction: column; gap: 10px; }
.idx-sm2-urgent {
display: flex;
align-items: center;
gap: var(--gap-normal);
padding: 14px 16px;
border-radius: 14px;
border: 1.5px solid;
cursor: pointer;
transition: transform .15s, box-shadow .15s;
-webkit-tap-highlight-color: transparent;
}
.idx-sm2-urgent:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.idx-sm2-urgent-num { font-size: var(--text-xl); font-weight: 900; flex-shrink: 0; line-height: 1; }
.idx-sm2-urgent-lbl { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.idx-sm2-urgent-sub { font-size: var(--text-xs); color: var(--ink3); margin-top: 2px; }
.idx-sm2-urgent-arrow { margin-left: auto; font-size: var(--text-md); color: var(--ink3); flex-shrink: 0; }
.idx-sm2-row-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.idx-sm2-mini {
display: flex; flex-direction: column; align-items: center;
padding: 9px 6px;
background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.idx-sm2-mini-num { font-size: var(--text-md); font-weight: 900; color: var(--ink); line-height: 1; }
.idx-sm2-mini-lbl { font-size: var(--text-xs); color: var(--ink3); font-weight: 600; margin-top: 3px; text-align: center; }
.idx-sm2-breakdown {
display: flex; flex-direction: column; gap: 5px;
padding: 8px 10px;
background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.idx-sm2-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-tight); }
.idx-sm2-list-name { font-size: var(--text-xs); font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.idx-sm2-list-badges { display: flex; gap: 4px; flex-shrink: 0; }
.idx-sm2-badge { font-size: var(--text-xs); font-weight: 800; padding: 2px 7px; border-radius: 20px; }
.idx-sm2-badge-red { background: var(--clr-danger-bg); color: var(--color-error); }
.idx-sm2-badge-yellow { background: #fef9c3; color: #a16207; }
/* ── Flip Card Study ── */
.study-topbar{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-3);}
.back-btn-inline{font-size:1.2rem;border:none;background:none;color:var(--ink3);cursor:pointer;flex-shrink:0;padding:4px 6px;border-radius:8px;}
.back-btn-inline:hover{background:var(--bg);}
.study-progress-wrap{flex:1;display:flex;flex-direction:column;gap:4px;}
.study-progress-track{background:var(--border);border-radius:99px;height:6px;overflow:hidden;}
.study-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),#f97316);border-radius:99px;width:0%;transition:width .45s cubic-bezier(.4,0,.2,1);}
.study-progress-label{font-size:.62rem;font-weight:800;color:var(--ink3);text-align:right;}
.study-speak-btn{border:none;background:var(--bg);border-radius:10px;padding:7px 10px;font-size:.95rem;cursor:pointer;flex-shrink:0;transition:background .12s;}
.study-speak-btn:hover{background:var(--color-primary-soft);}
.study-chips{display:flex;gap:var(--gap-tight);margin-bottom:var(--space-3);}
.study-chip{flex:1;text-align:center;padding:6px 8px;border-radius:9px;font-size:.72rem;font-weight:700;}
.study-chip-known{background:var(--clr-success-bg-lt);color:#15803d;border:1px solid #bbf7d0;}
.study-chip-again{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}
.study-mode-tabs{display:flex;align-items:stretch;gap:0;margin:0 0 12px;padding:4px;border:1px solid rgba(99,102,241,.18);border-radius:20px;background:linear-gradient(180deg,#fff,#f7f8ff);box-shadow:0 12px 28px rgba(15,23,42,.08);overflow:hidden;}
.study-mode-tab{flex:1;min-width:0;border:none;background:transparent;border-radius:15px;padding:12px 14px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2px;transition:background .18s,box-shadow .18s,transform .18s,color .18s;}
.study-mode-tab + .study-mode-tab{border-left:1px solid rgba(148,163,184,.18);}
.study-mode-tab:hover{transform:none;background:rgba(99,102,241,.06);}
.study-mode-tab-active{background:linear-gradient(135deg,#ffffff 0%,#eef2ff 100%);box-shadow:0 6px 18px rgba(99,102,241,.16),inset 0 0 0 1px rgba(99,102,241,.14);}
.study-mode-title{display:block;font-size:.85rem;font-weight:900;color:var(--ink);line-height:1.15;letter-spacing:-.01em;}
.study-mode-sub{display:block;font-size:.66rem;color:var(--ink3);line-height:1.35;}
.study-view-panel{display:none;}
.study-view-panel-active{display:block;}
.study-simple-hero{padding:18px 18px 14px;background:linear-gradient(135deg,#111827 0%,#1e1b4b 60%,#0f172a 100%);color:#fff;}
.study-simple-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.study-simple-tags{display:flex;flex-wrap:wrap;gap:6px;}
.study-simple-speak-btn{border:none;border-radius:12px;width:38px;height:38px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;flex-shrink:0;}
.study-simple-word{font-size:clamp(1.8rem,7vw,2.45rem);font-weight:900;line-height:1.05;letter-spacing:-.04em;}
.study-simple-meaning-row{display:flex;align-items:center;gap:10px;margin-top:10px;}
.study-simple-tr-badge{background:#e11d48;color:#fff;border-radius:999px;padding:4px 8px;font-size:.62rem;font-weight:900;letter-spacing:.08em;}
.study-simple-tr-text{font-size:1rem;font-weight:800;line-height:1.35;}
.study-simple-phonetic{margin-top:10px;color:rgba(255,255,255,.72);font-size:.75rem;line-height:1.5;}
.study-simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:#f8fafc;}
.study-simple-card{min-width:0;border:1px solid var(--border);background:var(--white);border-radius:14px;padding:11px 12px;}
.study-simple-label{font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px;}
.study-simple-value{font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.45;word-break:break-word;}
.study-simple-perf-pills{display:flex;flex-wrap:wrap;gap:6px;}
.study-simple-perf-card{grid-column:1 / -1;}
/* ════════════════════════════════════════════════
KELIME KARTI — YENİ TASARIM (flip yok)
════════════════════════════════════════════════ */
/* Kart sarmalayıcı */
.sfc-wrap { margin-bottom: 14px; user-select:none; -webkit-user-select:none; }
/* Ana kart */
.sfc {
border-radius: 24px;
overflow: hidden;
box-shadow: 0 8px 36px rgba(15,12,41,.18), 0 2px 8px rgba(0,0,0,.06);
background: #fff;
border: 1.5px solid var(--border);
animation: wc-in .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes wc-in {
from { opacity:0; transform:translateY(14px) scale(.98); }
to { opacity:1; transform:none; }
}
/* ── HERO BÖLGE — kelime büyük ── */
.wc-hero {
background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #1a1150 100%);
padding: 28px 24px 22px;
position: relative;
overflow: hidden;
}
.wc-hero::before {
content:'';
position:absolute;
top:-40px; right:-40px;
width:160px; height:160px;
border-radius:50%;
background:rgba(255,255,255,.04);
pointer-events:none;
}
.wc-hero::after {
content:'';
position:absolute;
bottom:-30px; left:-20px;
width:120px; height:120px;
border-radius:50%;
background:rgba(255,255,255,.03);
pointer-events:none;
}
/* Üst satır: liste + seviye + POS */
.wc-hero-top {
display:flex; align-items:center; gap:7px;
margin-bottom: var(--space-4); flex-wrap:wrap;
}
.wc-list-tag {
font-size:.6rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
background:rgba(255,255,255,.1); color:rgba(255,255,255,.55);
padding:3px 10px; border-radius:20px;
max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wc-level-tag {
font-size:.6rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
padding:3px 10px; border-radius:20px;
}
.wc-level-a1 { background:var(--clr-success-bg); color:#166534; }
.wc-level-a2 { background:#d1fae5; color:#065f46; }
.wc-level-b1 { background:#dbeafe; color:#1e40af; }
.wc-level-b2 { background:var(--clr-brand-light); color:#5b21b6; }
.wc-level-c1 { background:#fef9c3; color:#854d0e; }
.wc-level-c2 { background:var(--clr-danger-bg); color:#991b1b; }
/* Kelime ana başlık */
.wc-word {
font-size: clamp(2.2rem, 9vw, 3.2rem);
font-weight: 900;
color: #fff;
line-height: 1.05;
letter-spacing: -.8px;
text-shadow: 0 3px 16px rgba(0,0,0,.35);
margin-bottom: var(--space-2);
}
/* Fonetik & hece satırı */
.wc-phonetic-row {
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.wc-phonetic {
font-size:.82rem; color:rgba(255,255,255,.5);
font-style:italic; letter-spacing:.4px; font-weight:400;
}
.wc-syllables {
font-size:.72rem; color:rgba(255,255,255,.35);
letter-spacing:1.5px; font-weight:600; text-transform:lowercase;
}
/* Streak dots */
.wc-streak-row {
display:flex; gap:5px; align-items:center; margin-top:var(--space-3); flex-wrap:wrap;
}
.wc-streak-dot {
width:7px; height:7px; border-radius:50%;
background:rgba(255,255,255,.15);
}
.wc-streak-dot-on {
background:#f97316; box-shadow:0 0 7px #f97316aa;
}
/* Ses butonu */
.wc-speak-btn {
position:absolute; top:16px; right:16px;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
border-radius:50%; width:36px; height:36px;
display:flex; align-items:center; justify-content:center;
font-size:1rem; cursor:pointer; color:rgba(255,255,255,.7);
transition:background .15s, transform .12s;
z-index:var(--z-base);
}
.wc-speak-btn:hover { background:rgba(255,255,255,.2); }
.wc-speak-btn:active { transform:scale(.92); }
/* ── ANLAM ŞERIDI ── */
.wc-meaning-band {
display:flex; align-items:center; gap:var(--gap-normal);
padding: 14px 20px;
background: linear-gradient(90deg,#fff8f8,#fff);
border-bottom: 1.5px solid #fde8e8;
}
.wc-tr-badge {
font-size:.55rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase;
background:var(--color-primary); color:#fff; border-radius:6px; padding:3px 8px; flex-shrink:0;
}
.wc-tr-text {
font-size:1.4rem; font-weight:900; color:var(--color-primary); line-height:1.15;
flex:1;
}
/* ── INFO GRID ── */
.wc-info-grid {
display:grid;
grid-template-columns: 1fr 1fr;
gap:0;
border-bottom: 1px solid var(--border);
}
.wc-info-cell {
padding: 12px 16px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.wc-info-cell:nth-child(2n) { border-right:none; }
.wc-info-cell:nth-last-child(-n+2) { border-bottom:none; }
.wc-info-label {
font-size:.56rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
color:var(--ink3); margin-bottom:4px;
}
.wc-info-val {
font-size:.82rem; font-weight:700; color:var(--ink); line-height:1.4;
}
.wc-info-val-sm {
font-size:.75rem; font-weight:600; color:var(--ink2); line-height:1.5;
}
/* POS etiketleri — yeni büyük versiyon */
.pos-adj { display:inline-block; font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px;background:#fef9c3;color:#854d0e; }
.pos-adv { display:inline-block; font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px;background:#e0f2fe;color:#0369a1; }
.pos-noun { display:inline-block; font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px;background:var(--clr-success-bg-lt);color:#166534; }
.pos-verb { display:inline-block; font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px;background:#fdf4ff;color:#7e22ce; }
.pos-word { display:inline-block; font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px;background:#f1f5f9;color:#64748b; }
/* ── ÖRNEK CÜMLELER ── */
.wc-sentences {
padding: 14px 18px;
display: flex; flex-direction: column; gap: 10px;
border-bottom: 1px solid var(--border);
background: #fafbff;
}
.wc-sentence-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--white);
border: 1px solid var(--border);
transition: border-color .15s;
}
.wc-sentence-item.wc-sentence-has-tr {
border-left: 3px solid #7c3aed;
background: #faf8ff;
}
.wc-sentence-num {
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 50%;
background: #7c3aed22;
color: #7c3aed;
font-size: .65rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.wc-sentence-body { flex: 1; min-width: 0; }
.wc-sentence-en {
font-size: .84rem; font-weight: 500; color: var(--ink);
line-height: 1.6; font-style: italic;
}
.wc-sentence-en b { color: #7c3aed; font-style: normal; font-weight: 800; }
.wc-sentence-tr-wrap {
display: flex; align-items: flex-start; gap: 6px;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.wc-sentence-tr-badge {
flex-shrink: 0;
font-size: .58rem; font-weight: 800;
padding: 1px 5px; border-radius: 4px;
background: #dc262622; color: #dc2626;
letter-spacing: .3px; margin-top: 1px;
}
.wc-sentence-tr {
font-size: .78rem; color: var(--ink2);
line-height: 1.5; font-weight: 500;
}
[data-theme="dark"] .wc-sentence-item { background: var(--clr-bg-card); border-color: var(--border); }
[data-theme="dark"] .wc-sentence-item.wc-sentence-has-tr { background: #1e0a3c40; }
/* AI generate butonu */
.wc-ai-btn {
display:inline-flex; align-items:center; gap:5px;
font-size:.68rem; font-weight:700; color:var(--clr-brand);
background:#eef2ff; border:1px solid #c7d2fe; border-radius:20px;
padding:4px 12px; cursor:pointer; transition:background .13s;
font-family:inherit;
}
.wc-ai-btn:hover { background:#e0e7ff; }
.wc-ai-loading { opacity:.6; pointer-events:none; }
/* ── MNEMONIC & BAĞLAM ── */
.wc-extra {
display:flex; flex-direction:column; gap:0;
}
.wc-extra-block {
display:flex; align-items:flex-start; gap:11px;
padding:11px 18px;
border-bottom:1px solid #f3f4f6;
}
.wc-extra-block:last-child { border-bottom:none; }
.wc-extra-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
.wc-extra-content { flex:1; min-width:0; }
.wc-extra-label { font-size:.56rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--ink3); margin-bottom:3px; }
.wc-extra-val { font-size:.82rem; color:var(--ink2); line-height:1.6; }
.wc-extra-mnemonic { background:#fffbeb; }
.wc-extra-story { background:#f0f9ff; }
/* ── PERFORMANS ÇUBUĞU ── */
.wc-perf-bar {
display:flex; align-items:center; gap:10px;
padding:10px 18px;
background:var(--bg);
border-top:1px solid var(--border);
}
.wc-perf-pill {
font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px;
}
.wc-perf-err { background:var(--clr-danger-bg); color:var(--color-error); }
.wc-perf-ok { background:var(--clr-success-bg); color:#15803d; }
.wc-perf-sep { color:var(--border); margin:0 2px; }
.wc-perf-sm2 { font-size:.68rem; color:var(--ink3); font-weight:600; margin-left:auto; }
/* Aksiyon butonları */
.study-actions {
display:flex; gap:10px; margin-bottom:10px;
}
.study-btn-again {
flex:1; padding:14px 10px; border-radius:14px; border:none; cursor:pointer;
font-size:.9rem; font-weight:800; font-family:inherit;
background:#fff7ed; color:#c2410c; border:1.5px solid #fed7aa;
transition:background .12s, transform .1s;
}
.study-btn-again:active { background:#ffedd5; transform:scale(.97); }
.study-btn-known {
flex:1; padding:14px 10px; border-radius:14px; border:none; cursor:pointer;
font-size:.9rem; font-weight:800; font-family:inherit;
background:var(--clr-success-bg-lt); color:#15803d; border:1.5px solid #bbf7d0;
transition:background .12s, transform .1s;
}
.study-btn-known:active { background:var(--clr-success-bg); transform:scale(.97); }
.study-nav-simple { display:flex; gap:var(--gap-tight); }
#study-page[data-study-view="simple"] .study-actions{position:sticky;bottom:10px;z-index:3;background:linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.95) 28%);padding-top:10px;}
#study-page[data-study-view="simple"] .study-guide-wrap{display:none;}
@media (max-width: 560px){
.study-mode-tab{padding:9px 10px;}
.study-mode-title{font-size:.78rem;}
.study-mode-sub{font-size:.63rem;}
.study-simple-grid{grid-template-columns:1fr;}
.study-btn-again,.study-btn-known{padding:13px 8px;font-size:.84rem;}
}
/* ── Tamamlama Ekranı ── */
.sdone-emoji{font-size:3.5rem;margin-bottom:6px;animation:sdone-pop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes sdone-pop{from{transform:scale(0) rotate(-10deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
.sdone-title{font-size:1.5rem;font-weight:900;color:var(--ink);margin-bottom:4px;}
.sdone-sub{font-size:.82rem;color:var(--ink3);margin-bottom:var(--space-4);}
.sdone-stats{display:flex;justify-content:center;gap:0;margin-bottom:var(--space-3);background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.sdone-stat{flex:1;padding:12px 8px;text-align:center;}
.sdone-stat-mid{border-left:1px solid var(--border);border-right:1px solid var(--border);}
.sdone-val{display:block;font-size:1.6rem;font-weight:900;color:var(--ink);}
.sdone-pct{color:var(--color-primary);}
.sdone-lbl{font-size:.6rem;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;display:block;}
.sdone-bar-wrap{background:var(--border);border-radius:99px;height:8px;overflow:hidden;margin-bottom:10px;}
.sdone-bar-fill{height:100%;border-radius:99px;width:0%;transition:width .6s cubic-bezier(.4,0,.2,1);background:var(--color-primary);}
.sdone-msg{font-size:.82rem;color:var(--ink2);background:var(--bg);padding:10px 14px;border-radius:10px;border:1px solid var(--border);}
/* ═══════════════════════════════════════════════════════
YENİ QUIZ SİSTEMİ — tam sayfa, zengin soru tipleri
═══════════════════════════════════════════════════════ */
/* Quiz container — tam sayfa kap */
#quiz-page.container {
position:fixed !important;
top:0 !important; left:228px !important; right:0 !important; bottom:0 !important;
max-width:none !important; width:auto !important;
padding:0 !important; margin:0 !important;
border-radius:0 !important; border:none !important; box-shadow:none !important;
background:var(--bg) !important;
overflow:hidden !important;
display:flex !important; flex-direction:column !important;
z-index:var(--z-floating) !important;
}
#quiz-page.container.hidden { display:none !important; }
@media(max-width:699px){
#quiz-page.container { left:0 !important; top:52px !important; bottom:60px !important; }
}
.word-display{font-size:clamp(1.7rem,8vw,2.4rem);font-weight:900;margin:14px 0;color:var(--ink);}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-tight);}
.option-btn{background:var(--white);border:1.5px solid var(--border);padding:14px 8px;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink);font-family:inherit;}
.option-btn:active{background:var(--bg);}
.option-btn.correct{background:var(--green-s) !important;color:#15803d;border-color:var(--green) !important;}
.option-btn.wrong{background:var(--color-danger-soft) !important;color:var(--color-danger);border-color:var(--color-danger) !important;}
@media(max-width:699px){
#quiz-page.container { left:0 !important; top:52px !important; bottom:60px !important; }
}
.qz-hud {
display:flex; align-items:center; gap:10px;
padding:10px 20px; background:var(--white);
border-bottom:1.5px solid var(--border);
flex-shrink:0; box-sizing:border-box; width:100%;
}
.qz-exit-btn {
width:34px; height:34px; border-radius:9px;
border:1.5px solid var(--border); background:var(--bg);
color:var(--ink3); font-size:.85rem; cursor:pointer;
display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s;
}
.qz-exit-btn:hover { background:var(--color-primary-soft); border-color:var(--color-primary); color:var(--color-primary); }
.qz-progress-wrap { flex:1; display:flex; align-items:center; gap:var(--gap-tight); }
.qz-hud-title { font-size:.72rem; font-weight:800; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase; }
.qz-progress-bar { flex:1; height:6px; border-radius:99px; background:var(--border); overflow:hidden; }
.qz-prog-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--color-primary),#ff6b6b); width:0%; transition:width .5s cubic-bezier(.4,0,.2,1); }
.qz-prog-label { font-size:.7rem; font-weight:700; color:var(--ink3); white-space:nowrap; }
.qz-xp-badge { background:var(--color-primary-soft); color:var(--color-primary); border:1.5px solid rgba(230,57,70,.2); font-size:.78rem; font-weight:800; padding:5px 12px; border-radius:99px; white-space:nowrap; flex-shrink:0; }
.qz-body { flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; align-items:center; padding:20px 20px 40px; gap:var(--gap-normal); -webkit-overflow-scrolling:touch; }
.qz-meta-row { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:600px; }
@media(max-width:1036px){.qz-meta-row{margin-left:auto;}}
.qz-combo-box { display:flex; align-items:center; gap:5px; background:linear-gradient(135deg,#ff6b35,#f7931e); color:white; font-size:.75rem; font-weight:800; padding:4px 12px; border-radius:99px; box-shadow:0 2px 8px rgba(255,107,53,.25); transition:opacity .3s, transform .3s; }
.qz-combo-fire { font-size:.9rem; animation:qzFirePulse 1s ease-in-out infinite; }
@keyframes qzFirePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.qz-type-pill { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; padding:3px 10px; border-radius:99px; background:var(--color-primary-soft); color:var(--color-primary); border:1px solid rgba(230,57,70,.2); }
.qz-lives { font-size:1rem; letter-spacing:2px; }
.qz-card { width:100%; max-width:600px; 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:var(--gap-loose); box-shadow:0 4px 28px rgba(0,0,0,.07); animation:qzCardSlideIn .4s cubic-bezier(.34,1.56,.64,1); }
@media(max-width:1036px){.qz-card{margin-left:auto;}}
@keyframes qzCardSlideIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
.qz-instruction { font-size:.68rem; font-weight:800; color:var(--color-primary); text-transform:uppercase; letter-spacing:.08em; }
.qz-question-area { animation:qzCardIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes qzCardIn { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }
.qz-word-hero { background:var(--bg); border-radius:16px; padding:22px 20px 18px; text-align:center; border:1.5px solid var(--border); }
.qz-word-main { font-size:clamp(1.9rem,7vw,2.7rem); font-weight:900; color:var(--ink); letter-spacing:-.5px; line-height:1; margin-bottom:6px; }
.qz-word-phonetic { font-size:.8rem; color:var(--ink3); font-weight:500; margin-bottom:var(--space-2); }
.qz-word-pos { display:inline-block; font-size:.68rem; font-weight:800; padding:2px 10px; border-radius:99px; text-transform:uppercase; }
.qz-word-pos.pos-noun { background:#e0f2fe; color:#0369a1; }
.qz-word-pos.pos-verb { background:var(--clr-success-bg); color:#166534; }
.qz-word-pos.pos-adj { background:#fef3c7; color:#92400e; }
.qz-word-pos.pos-adv { background:#fce7f3; color:#9d174d; }
.qz-word-pos.pos-word { background:var(--bg); color:var(--ink3); }
.qz-sentence-ctx { background:var(--bg); border-radius:14px; padding:var(--padding-card) 18px; border:1.5px solid var(--border); border-left:3.5px solid var(--color-primary); font-size:.95rem; line-height:1.75; color:var(--ink); }
.qz-sentence-ctx em { font-style:normal; font-weight:800; color:var(--color-primary); text-decoration:underline dotted rgba(230,57,70,.4); }
.qz-blank { display:inline-block; min-width:72px; border-bottom:2.5px dashed var(--color-primary); vertical-align:baseline; margin:0 3px; }
.qz-missing-word { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; padding:18px; background:var(--bg); border-radius:14px; border:1.5px solid var(--border); }
.qz-letter-box { width:36px; height:44px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:900; }
.qz-letter-shown { background:var(--color-primary-soft); color:var(--color-primary); border:1.5px solid rgba(230,57,70,.25); }
.qz-letter-hidden { background:var(--bg); border:2px dashed #c0c8d8; color:transparent; }
.qz-letter-gap { width:12px; }
.qz-mcq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:480px) { .qz-mcq-grid { grid-template-columns:1fr; } }
.qz-opt { background:var(--white); border:1.5px solid var(--border); border-radius:13px; padding:13px 14px; cursor:pointer; text-align:left; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; transition:border-color .15s, background .15s, transform .1s; -webkit-tap-highlight-color:transparent; min-height:56px; }
.qz-opt:hover { border-color:var(--color-primary); background:var(--color-primary-soft); }
.qz-opt:active { transform:scale(.97); }
.qz-opt-letter { width:26px; height:26px; border-radius:7px; flex-shrink:0; background:var(--color-primary-soft); color:var(--color-primary); font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; border:1px solid rgba(230,57,70,.2); }
.qz-opt.qz-correct { background:var(--clr-success-bg-lt) !important; border-color:var(--clr-success) !important; color:#166534 !important; animation:qzOptPop .4s; }
.qz-opt.qz-correct .qz-opt-letter { background:var(--clr-success-bg); color:#166534; border-color:#bbf7d0; }
.qz-opt.qz-wrong { background:var(--color-danger-soft) !important; border-color:var(--color-danger) !important; color:#9b1c1c !important; animation:qzOptShake .4s; }
.qz-opt.qz-wrong .qz-opt-letter { background:var(--clr-danger-bg); color:#9b1c1c; border-color:#fca5a5; }
@keyframes qzOptPop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
@keyframes qzOptShake { 0%,40%,80%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 35%,75%{transform:translateX(5px)} }
.qz-input-wrap { display:flex; flex-direction:column; gap:10px; }
.qz-input { width:100%; padding:13px 16px; font-size:1rem; font-weight:700; border:1.5px solid var(--border); border-radius:12px; outline:none; font-family:inherit; color:var(--ink); background:var(--white); transition:border-color .2s; -webkit-appearance:none; box-sizing:border-box; }
.qz-input:focus { border-color:var(--color-focus); }
.qz-input.qz-correct { border-color:var(--green); background:var(--green-s); color:#166534; }
.qz-input.qz-wrong { border-color:var(--color-danger); background:var(--color-danger-soft); color:#9b1c1c; }
.qz-submit-btn { background:var(--color-primary); color:white; border:none; border-radius:12px; padding:13px; font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; box-shadow:0 3px 14px rgba(230,57,70,.25); transition:transform .15s, box-shadow .15s; }
.qz-submit-btn:hover { box-shadow:0 5px 20px rgba(230,57,70,.4); }
.qz-submit-btn:active { transform:scale(.96); }
.qz-letter-btns { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.qz-letter-btn { width:40px; height:40px; border-radius:9px; border:1.5px solid rgba(230,57,70,.25); background:var(--color-primary-soft); color:var(--color-primary); font-size:1.05rem; font-weight:800; cursor:pointer; font-family:inherit; transition:transform .1s, opacity .15s; -webkit-tap-highlight-color:transparent; }
.qz-letter-btn:active { transform:scale(.9); }
.qz-letter-btn.used { opacity:.2; pointer-events:none; }
.qz-built-word { min-height:50px; background:var(--white); border-radius:12px; border:2px dashed rgba(230,57,70,.3); padding:10px 14px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; font-size:1.15rem; font-weight:800; color:var(--color-primary); cursor:pointer; transition:border-color .2s; }
.qz-built-word.has-content { border-style:solid; border-color:var(--color-primary); }
.qz-built-letter { padding:3px 8px; background:var(--color-primary-soft); border-radius:7px; font-size:1.05rem; }
.qz-info-panel { display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.qz-timer-wrap { display:flex; align-items:center; gap:var(--gap-tight); }
.qz-timer-bar-track { flex:1; height:5px; border-radius:99px; background:var(--border); overflow:hidden; }
.qz-timer-bar-fill { height:100%; background:linear-gradient(90deg,var(--color-primary),#ff8c94); border-radius:99px; transition:width .9s linear; }
.qz-timer-label { font-size:.72rem; font-weight:800; color:var(--ink3); min-width:18px; text-align:right; }
.qz-info-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:480px){ .qz-info-cols { grid-template-columns:1fr; } }
.qz-info-card { background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; align-items:flex-start; gap:var(--gap-tight); }
.qz-info-card-icon { font-size:1.1rem; flex-shrink:0; }
.qz-info-card-label { font-size:.6rem; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
.qz-info-card-val { font-size:.85rem; font-weight:700; color:var(--ink); }
.qz-perf-row { display:flex; gap:6px; margin-bottom:4px; }
.qz-perf-pill { font-size:.72rem; font-weight:700; padding:1px 8px; border-radius:99px; }
.qz-perf-ok { background:var(--clr-success-bg-lt); color:var(--clr-success-dk); border:1px solid #bbf7d0; }
.qz-perf-err { background:var(--color-primary-soft); color:var(--color-primary); border:1px solid rgba(230,57,70,.2); }
.qz-perf-bar-wrap { height:4px; background:var(--border); border-radius:99px; overflow:hidden; margin-top:2px; }
.qz-perf-bar-fill { height:100%; background:var(--green); border-radius:99px; transition:width .4s; }
.qz-family-row { display:flex; flex-direction:column; gap:6px; }
.qz-family-label { font-size:.62rem; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; }
.qz-family-chips { display:flex; flex-wrap:wrap; gap:6px; }
.qz-family-chip { font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--bg); border:1.5px solid var(--border); color:var(--ink2); }
.qz-result { width:100%; max-width:600px; background:var(--white); border:1.5px solid var(--border); border-radius:20px; padding:36px 24px 28px; text-align:center; box-shadow:0 4px 28px rgba(0,0,0,.07); animation:qzCardSlideIn .4s cubic-bezier(.34,1.56,.64,1); display:flex; flex-direction:column; align-items:center; gap:10px; }
.qz-result-emoji { font-size:3rem; line-height:1; }
.qz-result-title { font-size:1.5rem; font-weight:900; color:var(--ink); }
.qz-result-sub { font-size:.85rem; color:var(--ink3); font-weight:600; }
.qz-result-stats { display:flex; gap:var(--gap-normal); margin:8px 0; flex-wrap:wrap; justify-content:center; }
.qz-rs-box { background:var(--bg); border:1.5px solid var(--border); border-radius:14px; padding:14px 20px; text-align:center; min-width:90px; }
.qz-rs-num { font-size:1.5rem; font-weight:900; color:var(--color-primary); }
.qz-rs-lbl { font-size:.65rem; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.qz-res-btn { width:100%; max-width:300px; padding:12px 20px; border-radius:12px; background:var(--color-primary); color:white; border:none; font-family:inherit; font-size:.9rem; font-weight:800; cursor:pointer; box-shadow:0 3px 14px rgba(230,57,70,.25); transition:transform .15s; }
.qz-res-btn:hover { transform:translateY(-1px); }
.qz-res-ghost { background:var(--bg); color:var(--ink2); border:1.5px solid var(--border); box-shadow:none; }
.qz-feedback { flex-shrink:0; background:var(--white); border-top:1.5px solid var(--border); padding:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .35s; max-height:0; }
.qz-feedback-hidden { max-height:0 !important; padding:0 !important; }
.qz-feedback-visible { max-height:380px; padding:14px 20px 16px; }
.qz-fb-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qz-fb-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; flex-shrink:0; }
.qz-fb-icon-correct { background:var(--green-s); color:var(--clr-success-dk); }
.qz-fb-icon-wrong { background:var(--color-primary-soft); color:var(--color-danger); }
.qz-fb-texts { flex:1; }
.qz-fb-title { font-size:.95rem; font-weight:800; color:var(--ink); }
.qz-fb-sub { font-size:.78rem; color:var(--ink3); margin-top:1px; }
.qz-fb-xp-gain { font-size:.8rem; font-weight:800; color:var(--color-primary); background:var(--color-primary-soft); border-radius:99px; padding:3px 10px; }
.qz-next-btn { margin-left:auto; padding:9px 18px; border-radius:10px; background:var(--color-primary); color:white; border:none; font-family:inherit; font-size:.85rem; font-weight:800; cursor:pointer; box-shadow:0 2px 10px rgba(230,57,70,.2); transition:transform .15s; flex-shrink:0; }
.qz-next-btn:hover { transform:translateY(-1px); }
.qz-fb-detail { margin-top:var(--space-3); }
.qz-fb-detail-cols { display:grid; grid-template-columns:1fr auto; gap:var(--gap-normal); }
@media(max-width:500px){ .qz-fb-detail-cols { grid-template-columns:1fr; } }
.qz-fb-def-block { display:flex; flex-direction:column; gap:4px; }
.qz-fb-def-eng { font-size:1rem; font-weight:800; color:var(--ink); }
.qz-fb-def-tr { font-size:.85rem; color:var(--ink2); font-weight:600; }
.qz-fb-story { font-size:.8rem; color:var(--ink3); margin-top:4px; line-height:1.5; font-style:italic; }
.qz-fb-mnem-block { background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-width:100px; }
.qz-fb-mnem-icon { font-size:1.4rem; }
.qz-fb-mnem-text { font-size:.78rem; font-weight:600; color:var(--ink2); line-height:1.4; }
#feedback{margin-top:10px;font-size:.84rem;color:var(--ink2);min-height:18px;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* ==========================================
YENİ: PARAGRAF VE OKUMA MODU TASARIMLARI
========================================== */
/* Paragraf Liste Butonları */
/* p-list-btn — artık rh-pasaj-card kullanılıyor, eski kod uyumu için korundu */
.p-list-btn {
display: none; /* renderParagrafListesi yeni sistemde HTML üretiyor */
}
/* Paragraf İçi Hedef Kelimeler (Hover Tooltip Efekti) */
.c1-word {
position: relative;
color: var(--color-primary);
font-weight: 700;
border-bottom: 2px dotted var(--color-primary);
cursor: help;
display: inline-block; /* ::after için zorunlu — inline'da position:absolute çalışmaz */
vertical-align: baseline; /* satır içi hizalamayı koru */
}
/* Üstüne gelince çıkacak siyah kutucuk (Tooltip) */
.c1-word::after {
content: attr(data-tr);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: #fff;
padding: 6px 13px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
/* Açılış: 80ms gecikme (yanlışlıkla üstüne gelmeler için) */
/* Kapanış: 300ms gecikme — okumak için zaman tanı */
transition: opacity 0.2s ease, visibility 0.2s ease;
transition-delay: 0.08s; /* hover'da göster — mouseout'ta 300ms bekle */
pointer-events: none;
z-index: var(--z-toast);
box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
/* Hover durumunda kutucuğu göster — sadece data-tr dolu ise */
.c1-word:hover::after {
opacity: 1;
visibility: visible;
transition-delay: 0.08s; /* açılış gecikmesi */
}
/* data-tr boşsa (henüz çeviri yok) kutuyu gösterme */
.c1-word[data-tr=""]:hover::after,
.c1-word:not([data-tr]):hover::after {
opacity: 0;
visibility: hidden;
}
/* ==========================================
PARAGRAF SAYFASI KESİN SOLA YASLAMA (FİX)
========================================== */
#paragraf-oku-page.container {
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
}
/* Desktop'ta paragraf sayfaları daha geniş */
@media(min-width: 700px) {
#paragraf-oku-page,
#paragraf-liste-page {
max-width: 1200px !important;
width: 100% !important;
}
}
/* ══════════════════════════════════════
📄 PARAGRAF OKU — 2 SUTUNLU LAYOUT
══════════════════════════════════════ */
.p-oku-topbar {
display: flex;
align-items: flex-start;
gap: var(--gap-normal);
width: 100%;
margin-bottom: 18px;
}
.p-oku-layout {
display: flex;
gap: 20px;
width: 100%;
align-items: flex-start;
}
.p-oku-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0;
}
/* SAĞ SIDEBAR */
.p-oku-sidebar {
width: 280px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: var(--gap-normal);
position: sticky;
top: 16px;
}
.p-sidebar-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 16px;
}
.p-sidebar-card-title {
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--ink3);
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: 6px;
}
.p-sidebar-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.p-sidebar-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.p-sidebar-stat-val {
font-size: 1.2rem;
font-weight: 800;
color: var(--ink);
line-height: 1;
}
.p-sidebar-stat-lbl {
font-size: .65rem;
font-weight: 600;
color: var(--ink3);
text-transform: uppercase;
letter-spacing: .3px;
}
/* Mini Sözlük */
.p-sidebar-dict-card {
max-height: 340px;
display: flex;
flex-direction: column;
}
.p-sidebar-dict-count {
background: var(--clr-danger-bg);
color: var(--color-primary);
border-radius: 10px;
padding: 0 7px;
font-size: .6rem;
font-weight: 700;
margin-left: auto;
}
.p-dict-search {
width: 100%;
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 10px;
font-size: .8rem;
font-family: inherit;
outline: none;
color: var(--ink);
background: var(--bg);
box-sizing: border-box;
}
.p-dict-search:focus {
border-color: var(--color-primary);
}
.p-sidebar-dict-list {
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
padding-right: 2px;
}
.p-dict-entry {
display: flex;
align-items: center;
gap: var(--gap-tight);
padding: 7px 10px;
border-radius: 9px;
background: var(--bg);
border: 1px solid transparent;
cursor: pointer;
transition: all .15s;
}
.p-dict-entry:hover {
background: #fff1f2;
border-color: #fecdd3;
}
.p-dict-eng {
font-size: .82rem;
font-weight: 700;
color: var(--color-primary);
flex-shrink: 0;
min-width: 80px;
}
.p-dict-tr {
font-size: .78rem;
color: var(--ink2);
flex: 1;
}
.p-dict-speak {
font-size: .7rem;
background: none;
border: none;
cursor: pointer;
color: var(--ink3);
padding: 0;
flex-shrink: 0;
opacity: 0.5;
transition: opacity .15s;
}
.p-dict-entry:hover .p-dict-speak {
opacity: 1;
}
/* İpucu */
.p-sidebar-tip {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 10px;
padding: 10px 12px;
font-size: .74rem;
color: #92400e;
display: flex;
gap: var(--gap-tight);
align-items: flex-start;
line-height: 1.5;
}
.p-sidebar-tip-icon {
font-size: .9rem;
flex-shrink: 0;
}
/* Mobil: tek sütun */
@media(max-width: 860px) {
.p-oku-layout {
flex-direction: column;
}
.p-oku-sidebar {
width: 100%;
position: static;
}
.p-sidebar-dict-card {
max-height: 250px;
}
}
#paragraf-oku-page div,
#paragraf-oku-page h2,
#paragraf-oku-page p {
text-align: left !important;
}
#p-oku-metin {
width: 100% !important;
text-align: left !important;
padding: var(--padding-section) !important;
box-sizing: border-box !important;
overflow: visible !important;
line-height: 2 !important;
}
/* ══════════════════════════════════════
🤖 AI GEN SECTION
══════════════════════════════════════ */
.ai-gen-section { border: 1.5px solid #e9d5ff; background: #faf5ff; }
.ai-gen-section .admin-section-title { color: var(--clr-brand-dark) !important; }
.ai-gen-word-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.82rem;
}
.aig-top { display:flex; align-items:center; gap:var(--gap-tight); margin-bottom:5px; }
.aig-eng { font-weight:800; color:var(--ink); font-size:.9rem; }
.aig-tr { flex:1; color:var(--color-primary); font-weight:700; font-size:.82rem; }
.aig-remove {
flex-shrink:0; background:none; border:none; color:var(--ink3);
cursor:pointer; font-size:.85rem; padding:2px 5px; border-radius:6px;
font-family:inherit;
}
.aig-remove:hover { background:var(--color-primary-soft); color:var(--color-primary); }
.aig-meta { font-size:.74rem; color:var(--ink2); line-height:1.4; margin-top:2px; }
/* ══════════════════════════════════════
🔥 STREAK CARD
══════════════════════════════════════ */
.streak-card {
display:flex; align-items:center; gap:14px;
background: linear-gradient(135deg,#fff7ed,#fef3c7);
border: 1.5px solid #fed7aa;
border-radius: 14px;
padding: 14px 16px;
margin: 12px 0 8px;
}
.streak-flame { display:flex; align-items:baseline; gap:4px; }
.streak-flame span:first-child { font-size:2.2rem; font-weight:900; color:#c2410c; line-height:1; }
.streak-fire { font-size:1.5rem; }
.streak-label { font-size:.82rem; font-weight:800; color:#92400e; }
.streak-sub { font-size:.7rem; color:#b45309; margin-top:2px; }
/* ══════════════════════════════════════
🏅 ROZETLER
══════════════════════════════════════ */
.badges-title { font-size:.68rem; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.6px; margin:14px 0 8px; }
.badges-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-tight); margin-bottom:14px; }
.badge-card {
display:flex; flex-direction:column; align-items:center; gap:4px;
padding:10px 6px; border-radius:12px; border:1.5px solid var(--border);
background:var(--white); text-align:center;
transition: transform .15s, box-shadow .15s;
}
.badge-unlocked { border-color:#fde68a; background:linear-gradient(135deg,#fffbeb,#fef9c3); }
.badge-unlocked:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.badge-locked { opacity:.35; filter:grayscale(1); }
.badge-icon { font-size:1.5rem; line-height:1; }
.badge-name { font-size:.6rem; font-weight:800; color:var(--ink); }
.badge-toast {
position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
background:var(--clr-bg-deep); color:white; padding:12px 18px; border-radius:14px;
display:flex; align-items:center; gap:var(--gap-normal);
box-shadow:0 8px 28px rgba(0,0,0,.25); z-index:var(--z-toast);
opacity:0; transition:opacity .3s, transform .3s;
white-space:nowrap; pointer-events:none;
}
.badge-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* ══════════════════════════════════════
📊 ISI HARİTASI
══════════════════════════════════════ */
.heatmap-section { margin: 8px 0 14px; }
.heatmap-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.heatmap-title { font-size:.8rem; font-weight:800; color:var(--ink); }
.heatmap-list-sel {
font-size:.75rem; font-weight:700; color:var(--ink2);
background:var(--bg); border:1px solid var(--border); border-radius:8px;
padding:5px 10px; outline:none; font-family:inherit; max-width:140px;
-webkit-appearance:none;
}
.heatmap-grid {
display:flex; flex-wrap:wrap; gap:4px;
padding:12px; background:var(--bg); border-radius:12px;
border:1px solid var(--border); position:relative;
}
.hm-cell {
width:20px; height:20px; border-radius:5px; cursor:pointer;
border:1.5px solid transparent;
transition:transform .1s, box-shadow .1s;
}
.hm-cell:hover, .hm-cell.hm-selected { transform:scale(1.3); box-shadow:0 2px 8px rgba(0,0,0,.2); z-index:var(--z-base); }
.hm-new { background:#f3e8ff; border-color:#d8b4fe; }
.hm-good { background:var(--clr-success-bg); border-color:#86efac; }
.hm-mid { background:#fef9c3; border-color:#fde68a; }
.hm-bad { background:var(--clr-danger-bg); border-color:#fca5a5; }
.hm-popup {
position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
background:var(--clr-bg-deep); color:white; padding:8px 12px; border-radius:9px;
font-size:.74rem; line-height:1.5; white-space:nowrap; z-index:var(--z-dropdown);
box-shadow:0 4px 14px rgba(0,0,0,.25);
opacity:0; transition:opacity .2s; pointer-events:none;
}
.hm-popup.show { opacity:1; }
.heatmap-legend {
display:flex; align-items:center; gap:var(--gap-tight); margin-top:var(--space-2);
font-size:.65rem; color:var(--ink3); font-weight:700;
}
.heatmap-leg-dot {
width:12px; height:12px; border-radius:3px; border:1.5px solid;
display:inline-block; flex-shrink:0;
}
/* ══════════════════════════════════════
👤 PROFİL SAYFASI
══════════════════════════════════════ */
.profil-hero {
display: flex;
align-items: center;
gap: var(--gap-loose);
margin-top: var(--space-4);
margin-bottom: var(--space-4);
padding: 18px;
background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
border-radius: 16px;
}
.profil-avatar-wrap {
flex-shrink: 0;
}
.profil-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
border: 2px solid rgba(255,255,255,0.2);
}
.profil-info {
flex: 1;
min-width: 0;
}
.profil-name {
font-size: 1.15rem;
font-weight: 900;
color: #fff;
margin-bottom: 2px;
}
.profil-goal {
font-size: 0.76rem;
color: rgba(255,255,255,0.65);
margin-bottom: 6px;
}
.profil-login-badge {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px;
padding: 2px 8px;
letter-spacing: 0.4px;
}
.profil-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-tight);
margin-bottom: 6px;
}
.profil-stat-box {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.profil-stat-val {
font-size: 1.1rem;
font-weight: 900;
color: var(--ink);
}
.profil-stat-lbl {
font-size: 0.57rem;
font-weight: 700;
color: var(--ink3);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Avatar seçici */
.avatar-picker {
display: flex;
flex-wrap: wrap;
gap: var(--gap-tight);
margin-bottom: 6px;
}
.avatar-opt {
width: 44px;
height: 44px;
border-radius: 12px;
border: 2px solid var(--border);
background: var(--bg);
font-size: 1.4rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, transform 0.1s;
}
.avatar-opt:hover { border-color: var(--ink3); }
.avatar-opt.selected {
border-color: var(--color-primary);
background: var(--color-primary-soft);
transform: scale(1.1);
}
/* Profil rozet grid */
.profil-badge-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-tight);
margin-top: 6px;
}
.profil-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px;
border-radius: 10px;
border: 1.5px solid var(--border);
font-size: 1.4rem;
}
.profil-badge-on {
background: linear-gradient(135deg, #fffbeb, #fef9c3);
border-color: #fde68a;
}
.profil-badge-off {
opacity: 0.3;
filter: grayscale(1);
background: var(--bg);
}
.profil-badge-lbl {
font-size: 0.52rem;
font-weight: 800;
color: var(--ink);
text-align: center;
line-height: 1.2;
}
/* Mobil touch tooltip balonu */
.word-touch-bubble {
position: fixed;
background: var(--ink);
color: #fff;
padding: 6px 14px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 700;
white-space: nowrap;
z-index: var(--z-toast);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
pointer-events: none;
animation: bubblePop 0.18s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bubblePop {
from { transform: translateX(-50%) scale(0.7); opacity: 0; }
to { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* ══════════════════════════════════════
📄 ADMİN PARAGRAF LİSTESİ
══════════════════════════════════════ */
.admin-paragraf-item {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 7px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
transition: border-color 0.15s;
}
.admin-paragraf-item:hover { border-color: var(--ink3); }
.ap-title {
display: flex;
align-items: center;
gap: var(--gap-tight);
font-size: 0.85rem;
font-weight: 700;
color: var(--ink);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ap-word-count {
flex-shrink: 0;
font-size: 0.62rem;
font-weight: 700;
color: var(--ink3);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1px 7px;
}
.ap-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ap-btn {
font-size: 0.72rem;
font-weight: 700;
padding: 5px 10px;
border-radius: 8px;
border: none;
cursor: pointer;
font-family: inherit;
transition: background 0.12s;
}
.ap-btn-edit { background: #eff6ff; color: #1d4ed8; }
.ap-btn-edit:hover { background: #dbeafe; }
.ap-btn-sorular { background: #fff7ed; color: #c2410c; }
.ap-btn-sorular:hover { background: #fed7aa; }
.ap-btn-del { background: var(--color-danger-soft); color: var(--color-danger); }
.ap-btn-del:hover { background: #fecaca; }
/* ══════════════════════════════════════════════════
📄 PARAGRAF AI ÖZELLİKLERİ
══════════════════════════════════════════════════ */
/* ── Zorluk Rozeti ── */
.diff-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
font-weight: 800;
padding: 4px 10px;
border-radius: 20px;
border: 1.5px solid currentColor;
white-space: nowrap;
letter-spacing: 0.3px;
}
.diff-score {
font-size: 0.6rem;
opacity: 0.7;
}
.diff-loading { border-color: #ccc; color: #999; background: #f5f5f5; }
.diff-na { border-color: #ddd; color: #aaa; background: #fafafa; }
/* ── Tıklanabilir Cümleler ── */
.p-sentence {
cursor: pointer;
border-radius: 3px;
transition: background 0.15s;
padding: 1px 2px;
margin: -1px -2px;
}
.p-sentence:hover { background: rgba(230, 57, 70, 0.07); }
.p-sentence.psa { background: rgba(250, 204, 21, 0.32); border-radius: 4px; outline: 1.5px solid rgba(202,138,4,0.4); }
/* ── YDT Soru Üretici Butonu ── */
.p-ydt-gen-btn {
width: 100%;
padding: 14px 18px;
border-radius: 14px;
border: 2px dashed var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: 0.92rem;
font-weight: 800;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, transform 0.1s;
letter-spacing: 0.2px;
}
.p-ydt-gen-btn:hover { background: #fce7e9; }
.p-ydt-gen-btn:active { transform: scale(0.98); }
.p-ydt-gen-btn:disabled { opacity: 0.6; cursor: wait; }
.p-ydt-loading {
text-align: center;
padding: 28px 0;
color: var(--ink3);
font-size: 0.88rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.p-ydt-spin { font-size: 2rem; animation: spin 1s linear infinite; display: inline-block; }
/* ── YDT Accordion + Slider ── */
.ydt-accordion {
border-radius: 14px;
border: 1.5px solid var(--border);
overflow: hidden;
margin-bottom: var(--space-3);
}
.ydt-acc-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--bg);
border: none;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
.ydt-acc-toggle:hover { background: #f1f3f5; }
.ydt-acc-left {
display: flex;
align-items: center;
gap: var(--gap-tight);
}
.ydt-acc-icon { font-size: 1rem; }
.ydt-acc-title {
font-size: .88rem;
font-weight: 800;
color: var(--ink);
}
.ydt-acc-badge {
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: 10px;
padding: 1px 9px;
font-size: .68rem;
font-weight: 800;
}
.ydt-acc-arrow {
font-size: .8rem;
color: var(--ink3);
transition: transform .25s ease;
}
.ydt-acc-body {
padding: var(--padding-card);
border-top: 1px solid var(--border);
background: var(--white);
}
/* Slider header: counter + dots */
.ydt-slider-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.ydt-slider-counter {
font-size: .72rem;
font-weight: 800;
color: var(--ink3);
text-transform: uppercase;
letter-spacing: .5px;
}
.ydt-slider-dots {
display: flex;
gap: 5px;
align-items: center;
}
.ydt-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: background .2s, transform .2s;
}
.ydt-dot-active {
background: var(--color-primary);
transform: scale(1.25);
}
/* Slides wrapper */
.ydt-slides-wrap {
min-height: 200px;
}
/* Tek slide: kart görünümü (p-ydt-card'ı kullan ama margin-bottom 0) */
.ydt-slide .p-ydt-card-type { margin-bottom: var(--space-2); }
.ydt-slide .p-ydt-question { margin-bottom: var(--space-3); }
/* Slider nav */
.ydt-slider-nav {
display: flex;
gap: 10px;
margin-top: var(--space-4);
}
.ydt-nav-btn {
flex: 1;
padding: 11px;
border-radius: 10px;
border: 1.5px solid var(--border);
background: var(--bg);
font-family: inherit;
font-size: .86rem;
font-weight: 700;
color: var(--ink2);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.ydt-nav-btn:hover:not(:disabled) { background: #f1f3f5; border-color: var(--ink3); }
.ydt-nav-btn:disabled { opacity: .35; cursor: default; }
.ydt-nav-next {
background: var(--color-primary-soft);
border-color: var(--color-primary);
color: var(--color-primary);
}
.ydt-nav-next:hover:not(:disabled) { background: #fce7e9 !important; }
/* ── YDT Soru Kartı ── */
.p-ydt-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: var(--padding-card);
margin-bottom: 14px;
}
.p-ydt-card-type {
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ink3);
margin-bottom: var(--space-2);
}
.p-ydt-question {
font-size: 0.96rem;
font-weight: 700;
color: var(--ink);
line-height: 1.6;
margin-bottom: var(--space-3);
}
.p-ydt-options {
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 10px;
}
.p-ydt-opt {
text-align: left;
padding: 11px 14px;
border-radius: 10px;
border: 1.5px solid var(--border);
background: var(--white);
font-size: 0.86rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
font-family: inherit;
transition: border-color 0.12s, background 0.12s;
line-height: 1.4;
}
.p-ydt-opt:hover:not(:disabled) { border-color: var(--ink3); background: var(--bg); }
.p-ydt-opt:disabled { cursor: default; }
.p-ydt-opt.ydt-correct { background: var(--green-s) !important; border-color: var(--green) !important; color: #15803d !important; font-weight: 800 !important; }
.p-ydt-opt.ydt-wrong { background: var(--color-danger-soft) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.p-ydt-explanation {
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid var(--green);
border-radius: 0 10px 10px 0;
padding: 12px 14px;
font-size: 0.82rem;
color: var(--ink2);
line-height: 1.65;
}
/* ── Grammar X-Ray Paneli — Açık Tema ── */
.p-grammar-panel {
background: #f8f9fc;
border-radius: 16px;
overflow: hidden;
border: 1.5px solid #e2e4ec;
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.p-grammar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 16px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
font-size: 0.76rem;
font-weight: 800;
color: rgba(255,255,255,0.92);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.p-grammar-close {
background: rgba(255,255,255,0.15);
border: none;
color: rgba(255,255,255,0.8);
cursor: pointer;
font-size: 0.85rem;
padding: 3px 8px;
border-radius: 6px;
transition: background 0.12s;
font-family: inherit;
}
.p-grammar-close:hover { background: rgba(255,255,255,0.28); color: #fff; }
.p-grammar-content {
padding: var(--padding-card);
color: var(--ink);
}
.p-grammar-loading {
display: flex;
align-items: center;
gap: var(--gap-normal);
padding: 12px 0;
color: var(--ink3);
font-size: 0.85rem;
}
.gx-sentence-box {
font-size: 0.88rem;
font-style: italic;
color: #4b5563;
background: #fff;
border: 1px solid #e5e7eb;
border-left: 3px solid #facc15;
border-radius: 0 10px 10px 0;
padding: 10px 14px;
margin-bottom: 6px;
line-height: 1.65;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.gx-tr {
font-size: 0.74rem;
color: var(--ink3);
margin-bottom: 14px;
padding-left: 4px;
font-style: italic;
}
.gx-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-tight);
margin-bottom: 14px;
}
.gx-chip {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gx-chip-label {
font-size: 0.57rem;
font-weight: 800;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.9px;
}
.gx-chip-val {
font-size: 0.83rem;
font-weight: 700;
color: var(--ink);
}
/* Zaman chip'i için özel ton */
.gx-chip:nth-child(1) { border-top: 2px solid var(--clr-brand); }
.gx-chip:nth-child(2) { border-top: 2px solid #10b981; }
.gx-chip:nth-child(3) { border-top: 2px solid #f59e0b; }
.gx-section-title {
font-size: 0.59rem;
font-weight: 800;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 1.1px;
margin: 14px 0 7px;
display: flex;
align-items: center;
gap: 6px;
}
.gx-section-title::after {
content: '';
flex: 1;
height: 1px;
background: #e5e7eb;
}
.gx-clauses { display: flex; flex-direction: column; gap: 6px; }
.gx-clause {
border-left: 3px solid var(--clr-brand);
padding: 8px 12px;
background: #fff;
border-radius: 0 10px 10px 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gx-clause-type {
display: block;
font-size: 0.58rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-bottom: 3px;
/* renk JS'den style olarak atanıyor */
}
.gx-clause-text {
font-size: 0.83rem;
color: #374151;
font-style: italic;
line-height: 1.5;
}
.gx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-tag {
font-size: 0.74rem;
font-weight: 700;
padding: 4px 11px;
border-radius: 20px;
border: 1.5px solid transparent;
}
.gx-tag-conj {
background: #eff6ff;
color: #1d4ed8;
border-color: #bfdbfe;
}
.gx-tag-rel {
background: #f5f3ff;
color: #6d28d9;
border-color: #ddd6fe;
}
.gx-tip {
margin-top: 14px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-radius: 10px;
padding: 10px 14px;
font-size: 0.79rem;
color: #15803d;
line-height: 1.65;
border: 1px solid #bbf7d0;
font-weight: 600;
}
/* ── Paragraf üst hint etiketleri ── */
.p-hint-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.71rem;
font-weight: 700;
color: var(--ink3);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 3px 10px;
}
.p-hint-tag-xray {
color: #6d28d9;
background: #f5f3ff;
border-color: #ddd6fe;
animation: xray-pulse 2.8s ease-in-out infinite;
}
@keyframes xray-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(109,40,217,0); }
50% { box-shadow: 0 0 0 4px rgba(109,40,217,0.12); }
}
/* ══════════════════════════════════════════════════
🤖 AI CASCADE TOAST
══════════════════════════════════════════════════ */
.ai-cascade-toast {
position: fixed;
bottom: 76px;
left: 50%;
transform: translateX(-50%) translateY(12px);
padding: 10px 18px;
border-radius: 12px;
font-size: 0.79rem;
font-weight: 700;
white-space: nowrap;
max-width: 88vw;
z-index: var(--z-toast);
opacity: 0;
transition: opacity .25s, transform .25s;
pointer-events: none;
box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.ai-cascade-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ai-toast-info { background:#1e293b; color:#e2e8f0; }
.ai-toast-warn { background:#7c2d12; color:#fed7aa; }
.ai-toast-ok { background:#14532d; color:#86efac; }
.ai-toast-error { background:#7f1d1d; color:#fca5a5; }
/* ══════════════════════════════════════════════════
🔑 API KEY YÖNETİMİ — ADMİN
══════════════════════════════════════════════════ */
/* Cascade sırası görsel */
.cascade-order {
display: flex;
align-items: center;
gap: 4px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
overflow-x: auto;
margin-bottom: 14px;
}
.co-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 7px 10px;
border-radius: 10px;
border: 1.5px solid var(--border);
background: var(--white);
flex-shrink: 0;
min-width: 58px;
opacity: .38;
transition: opacity .2s, border-color .2s, background .2s;
}
.co-item.co-active { opacity: 1; border-color: var(--clr-success); background: var(--clr-success-bg-lt); }
.co-num { font-size: .52rem; font-weight: 800; color: var(--ink3); line-height: 1; }
.co-icon { font-size: 1.1rem; line-height: 1.2; }
.co-name { font-size: .55rem; font-weight: 800; color: var(--ink); }
.co-dot { font-size: .72rem; font-weight: 900; color: #d1d5db; line-height: 1; }
.co-arrow { color: #d1d5db; font-size: 1.2rem; flex-shrink: 0; padding: 0 1px; line-height: 1; }
/* API key satır listesi */
.akey-list { display: flex; flex-direction: column; gap: var(--gap-tight); }
.akey-row {
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
transition: border-color .15s;
}
.akey-row:hover { border-color: var(--ink3); }
.akey-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-2);
}
.akey-name { font-size: .84rem; font-weight: 800; color: var(--ink); }
.akey-link {
font-size: .68rem;
font-weight: 700;
color: #4f46e5;
text-decoration: none;
background: #eef2ff;
border: 1px solid #c7d2fe;
border-radius: 8px;
padding: 2px 9px;
white-space: nowrap;
transition: background .12s;
}
.akey-link:hover { background: #e0e7ff; }
.akey-inputs { display: flex; gap: 6px; margin-bottom: 6px; }
.akey-save-btn {
flex-shrink: 0;
padding: 10px 16px;
background: var(--ink);
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: .78rem;
font-weight: 700;
font-family: inherit;
transition: background .12s;
white-space: nowrap;
}
.akey-save-btn:hover { background: #374151; }
.akey-note {
font-size: .65rem;
color: var(--ink3);
line-height: 1.4;
}
/* cascade uyarı bandı */
.cascade-warn {
font-size: 0.75rem;
font-weight: 700;
padding: 9px 12px;
border-radius: 10px;
margin-bottom: 10px;
line-height: 1.5;
}
.cascade-warn-yellow {
background: #fefce8;
color: #854d0e;
border: 1.5px solid #fde047;
}
.cascade-warn-danger {
background: #fef2f2;
color: #991b1b;
border: 1.5px solid #fca5a5;
}
/* PIN Klavye */
.pin-key {
width: 64px; height: 64px;
border-radius: 50%;
border: 1.5px solid var(--border);
background: var(--white);
font-size: 1.3rem; font-weight: 700;
cursor: pointer; font-family: inherit;
color: var(--ink);
transition: background .1s, border-color .1s, transform .08s;
display: flex; align-items: center; justify-content: center;
}
.pin-key:active { background: #e0e7ff; border-color: var(--clr-brand); transform: scale(.93); }
#admin-pin-overlay { position: relative; }
/* ════════════════════════════════════════════════
📊 ANALİTİK PANELLERİ
════════════════════════════════════════════════ */
/* idx-section başlık alt yazı */
.idx-section-sub {
font-size:.55rem;font-weight:500;color:var(--ink3);
text-transform:none;letter-spacing:0;margin-left:4px;
}
/* ── En Zayıf 5 Kelime — ikinci tanım kaldırıldı, yukarıda tanımlı ── */
.idx-weak-meta-dup-placeholder {
display:flex;flex-direction:column;align-items:flex-end;gap:2px;
flex-shrink:0;
}
.idx-weak-err { font-size:.62rem;font-weight:700;color:var(--color-error); }
.idx-weak-streak { font-size:.62rem;font-weight:700;color:#c2410c; }
/* ── 7 Gün Performans Grafiği ── */
.idx-perf-chart {
width:100%;overflow:hidden;
margin-bottom:6px;
}
.idx-perf-chart svg { display:block; }
.idx-perf-legend {
display:flex;align-items:center;gap:var(--gap-normal);
font-size:.65rem;color:var(--ink3);font-weight:600;
}
.idx-perf-dot {
display:inline-block;width:8px;height:8px;border-radius:50%;
}
.idx-perf-dot-correct { background:var(--clr-success); }
.idx-perf-dot-wrong { background:#ef4444; }
/* ── POS Dağılım Barları ── */
.idx-pos-chart {
display:flex;flex-direction:column;gap:var(--gap-tight);
}
.idx-pos-row {
display:flex;flex-direction:column;gap:4px;
margin-bottom:4px;
}
.idx-pos-label-wrap {
display:flex;align-items:center;gap:6px;
}
.idx-pos-pill {
font-size:.56rem;font-weight:900;letter-spacing:.8px;
text-transform:uppercase;padding:2px 7px;border-radius:20px;
flex-shrink:0;
}
.idx-pos-name { font-size:.75rem;font-weight:700;color:var(--ink2);flex:1; }
.idx-pos-count { font-size:.7rem;color:var(--ink3);font-weight:600; }
.idx-pos-bar-wrap {
display:flex;align-items:center;gap:6px;
}
.idx-pos-bar-track {
flex:1;height:7px;background:#f0f0f4;border-radius:99px;overflow:hidden;
}
.idx-pos-bar {
height:100%;border-radius:99px;
transition:width .5s cubic-bezier(.4,0,.2,1);
}
.idx-pos-pct {
font-size:.65rem;font-weight:800;color:var(--ink3);
flex-shrink:0;min-width:28px;text-align:right;
}
/* ── grammar-module.css — index.html ile yüklenir ── */
/* ══════════════════════════════════════════════════════════════
📖 READING HUB v2 — Paragraf Okuma Modülü
══════════════════════════════════════════════════════════════ */
/* ─── Sayfa sarmalayıcı ─── */
.rh-page {
padding-bottom: 48px;
}
/* ══════════════════════════
HERO HEADER — Liste sayfası
══════════════════════════ */
.rh2-hero {
position: relative;
border-radius: 22px;
overflow: hidden;
margin-bottom: 22px;
padding: 36px 32px 28px;
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 70%, #6b21a8 100%);
box-shadow: 0 16px 48px rgba(76,29,149,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.rh2-hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(167,139,250,.18) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 80%, rgba(236,72,153,.12) 0%, transparent 60%);
}
/* Dekoratif nokta grid */
.rh2-hero-bg::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
}
.rh2-hero-content { position: relative; z-index: var(--z-base); }
.rh2-hero-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: .68rem; font-weight: 800; text-transform: uppercase;
letter-spacing: 1.2px; color: rgba(196,181,253,.9);
margin-bottom: var(--space-3);
}
.rh2-hero-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #a78bfa;
box-shadow: 0 0 8px #a78bfa;
animation: rh2Pulse 2s ease-in-out infinite;
}
@keyframes rh2Pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.rh2-hero-title {
font-size: clamp(1.7rem, 4vw, 2.4rem);
font-weight: 900; color: #fff;
letter-spacing: -.5px; line-height: 1.1;
margin-bottom: var(--space-2);
}
.rh2-hero-sub {
font-size: .82rem; color: rgba(221,214,254,.75);
line-height: 1.6; max-width: 480px;
margin-bottom: var(--space-6);
}
/* Hero istatistik şeridi */
.rh2-hero-stats {
display: flex; align-items: center; gap: 0;
background: rgba(255,255,255,.07);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
padding: 14px 20px;
width: fit-content;
gap: 0;
}
.rh2-hstat {
display: flex; flex-direction: column; align-items: center;
gap: 3px; padding: 0 20px;
}
.rh2-hstat:first-child { padding-left: 0; }
.rh2-hstat-val {
font-size: 1.5rem; font-weight: 900; color: #fff;
line-height: 1;
}
.rh2-hstat-lbl {
font-size: .62rem; font-weight: 700;
color: rgba(196,181,253,.7);
text-transform: uppercase; letter-spacing: .5px;
}
.rh2-hstat-div {
width: 1px; height: 32px;
background: rgba(255,255,255,.15);
flex-shrink: 0;
}
/* ══════════════════════════
TAB BAR
══════════════════════════ */
.rh2-tabbar {
display: flex; align-items: center; gap: 6px;
justify-content: center;
background: white;
border: 1.5px solid #e8eaf0;
border-radius: 14px;
padding: 6px 8px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.rh2-tab {
display: flex; align-items: center; gap: 7px;
padding: 9px 18px; border-radius: 10px;
border: none; background: none; cursor: pointer;
font-family: inherit; font-size: .8rem; font-weight: 700;
color: var(--clr-text-muted); transition: all .18s;
white-space: nowrap;
}
.rh2-tab:hover { color: var(--clr-bg-deep); background: #f5f5ff; }
.rh2-tab-active {
background: linear-gradient(135deg, #ede9fe, #f5f3ff) !important;
color: #5b21b6 !important;
box-shadow: 0 2px 8px rgba(91,33,182,.12);
}
.rh2-tab-icon { font-size: .95rem; }
.rh2-tab-pill {
font-size: .58rem; font-weight: 800;
background: var(--clr-danger-bg); color: #b91c1c;
border-radius: 20px; padding: 1px 7px;
}
.rh2-tab-pill:empty { display: none; }
.rh2-tab-pill-green { background: var(--clr-success-bg); color: #15803d; }
.rh2-refresh-btn {
display: flex; align-items: center; gap: 6px;
padding: 8px 14px; border: 1.5px solid #e8eaf0; border-radius: 10px;
background: white; color: #6b7280; font-size: .72rem; font-weight: 700;
cursor: pointer; font-family: inherit;
transition: all .15s;
}
.rh2-refresh-btn:hover { border-color: var(--clr-brand-dark); color: var(--clr-brand-dark); }
/* ══════════════════════════
PASAJ GRID
══════════════════════════ */
.rh2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: stretch;
}
@media (max-width: 1100px) and (min-width: 700px) {
.rh2-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Yükleniyor ── */
.rh2-loading {
display: flex; align-items: center; gap: 14px;
grid-column: 1 / -1;
padding: 40px 20px; color: var(--clr-text-muted);
font-size: .84rem; font-weight: 600;
}
.rh2-loading-ring {
width: 22px; height: 22px; flex-shrink: 0;
border: 2.5px solid #e8eaf0;
border-top-color: var(--clr-brand-dark);
border-radius: 50%;
animation: rh2Spin .7s linear infinite;
}
@keyframes rh2Spin { to { transform: rotate(360deg); } }
/* ══════════════════════════
PASAJ KARTI v2
══════════════════════════ */
.rh2-card {
background: white;
border: 1.5px solid #ebebf0;
border-radius: 20px;
padding: 0;
cursor: pointer;
display: flex; flex-direction: column;
transition: transform .18s, box-shadow .18s, border-color .18s;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
position: relative;
}
.rh2-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(99,102,241,.13);
border-color: #c4b5fd;
}
.rh2-card:active { transform: translateY(-1px) scale(.99); }
/* Kart accent şeridi üstte */
.rh2-card-accent {
height: 4px; width: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
flex-shrink: 0;
}
.rh2-card-accent-ai {
background: linear-gradient(90deg, #7c3aed, #a855f7, #ec4899);
}
/* Kart gövde */
.rh2-card-body {
padding: var(--padding-card) 18px 14px;
display: flex; flex-direction: column;
gap: 10px; flex: 1;
position: relative;
}
/* AI kartlarında save butonu için body'nin altında boşluk */
.rh2-card:has(.rh2-card-save-btn) .rh2-card-body {
padding-bottom: 40px;
}
/* Başlık satırı */
.rh2-card-header {
display: flex; align-items: flex-start; gap: var(--gap-normal);
}
.rh2-card-icon {
width: 42px; height: 42px; flex-shrink: 0;
border-radius: 12px; font-size: 1.5rem;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
border: 1.5px solid #ddd6fe;
}
.rh2-card-icon-ai {
background: linear-gradient(135deg, #fdf4ff, #f3e8ff);
border-color: #e9d5ff;
}
.rh2-card-titlemeta { flex: 1; min-width: 0; }
.rh2-card-title {
font-size: .92rem; font-weight: 800; color: var(--clr-bg-deep);
line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.rh2-card-timing {
font-size: .65rem; font-weight: 600; color: var(--clr-text-muted);
margin-top: 3px;
display: flex; align-items: center; gap: 4px;
}
/* Önizleme metni */
.rh2-card-preview {
font-size: .76rem; color: #6b7280; line-height: 1.65;
font-style: italic;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
background: #fafbff;
border-radius: 8px; padding: 8px 10px;
border: 1px solid #eef0f8;
}
/* Stat pill'ler */
.rh2-card-footer {
display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
padding-top: 6px; border-top: 1px solid #f1f1f5;
}
.rh2-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: .65rem; font-weight: 700;
padding: 3px 9px; border-radius: 20px;
white-space: nowrap;
}
.rh2-pill-word { background: #eff6ff; color: #1d4ed8; }
.rh2-pill-quiz { background: #fef9c3; color: #92400e; }
.rh2-pill-ai { background: #f5f3ff; color: var(--clr-brand-dark); }
.rh2-pill-voc { background: var(--clr-success-bg-lt); color: #15803d; cursor: help; transition: all .13s; }
.rh2-pill-voc:hover { background: #15803d; color: white; }
.rh2-pill-none { background: #f8fafc; color: #94a3b8; }
/* Sağ ok */
.rh2-card-arrow {
position: absolute; right: 16px; bottom: 16px;
color: #c4c4d0; transition: color .15s, transform .15s;
}
.rh2-card:hover .rh2-card-arrow { color: var(--clr-brand); transform: translateX(2px); }
/* ── Boş durum ── */
.rh2-empty {
grid-column: 1 / -1;
display: flex; flex-direction: column; align-items: center;
gap: 10px; padding: 48px 24px; text-align: center;
background: white; border: 2px dashed #e0e0ef;
border-radius: 20px;
}
.rh2-empty-icon { font-size: 2.4rem; }
.rh2-empty-title { font-size: .9rem; font-weight: 800; color: var(--clr-bg-deep); }
.rh2-empty-sub { font-size: .76rem; color: var(--clr-text-muted); }
/* Mobil AI Üret shortcut — tabbar altında, sadece mobilde görünür */
.rh2-mob-generate-btn {
display: none;
}
@media (max-width: 699px) {
.rh2-mob-generate-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-tight);
width: 100%;
padding: 11px 16px;
margin-bottom: 14px;
border-radius: 12px;
border: 1.5px solid #c4b5fd;
background: linear-gradient(135deg, #ede9fe, #f5f3ff);
color: #5b21b6;
font-size: .82rem;
font-weight: 800;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.rh2-mob-generate-btn:active {
background: #ddd6fe;
}
.rh2-hero-title { font-size: 1.6rem; }
.rh2-hero-stats { padding: 10px 14px; }
.rh2-hstat { padding: 0 12px; }
.rh2-hstat-val { font-size: 1.2rem; }
.rh2-grid { grid-template-columns: 1fr; gap: var(--gap-normal); }
.rh2-tabbar {
padding: 4px 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
scrollbar-width: none;
justify-content: flex-start;
}
.rh2-tabbar::-webkit-scrollbar { display: none; }
.rh2-tab { font-size: .74rem; padding: 8px 10px; flex-shrink: 0; }
}
/* ══════════════════════════════════════════════════════════════
PARAGRAF OKU SAYFASI v2
══════════════════════════════════════════════════════════════ */
.poku-page {
position: fixed !important;
top: 0 !important; left: 228px !important; right: 0 !important; bottom: 0 !important;
max-width: none !important; width: auto !important;
padding: 0 !important; margin: 0 !important;
border-radius: 0 !important; border: none !important; box-shadow: none !important;
background: #f4f4f8 !important;
overflow: hidden !important;
display: flex !important; flex-direction: column !important;
z-index: var(--z-floating) !important;
text-align: left !important;
}
.poku-page.hidden { display: none !important; }
@media (max-width: 699px) {
.poku-page { left: 0 !important; top: 52px !important; bottom: 60px !important; }
}
/* ── Top Bar ── */
.poku-topbar {
display: flex; align-items: center; gap: var(--gap-normal);
padding: 10px 20px 10px;
background: white;
border-bottom: 1.5px solid #eaeaf0;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
flex-shrink: 0;
z-index: var(--z-sticky);
min-height: 0;
}
.poku-back-btn {
width: 34px; height: 34px; border-radius: 9px;
border: 1.5px solid #e0e0ef; background: white;
color: #5b21b6; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.poku-back-btn:hover { background: #f5f3ff; border-color: #a78bfa; }
.poku-topbar-meta { flex: 1; min-width: 0; }
.poku-topbar-title {
font-size: .98rem; font-weight: 900; color: var(--clr-bg-deep);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.2;
}
.poku-topbar-hints {
display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
margin-top: 4px;
}
.poku-hint-chip {
font-size: .6rem; font-weight: 700; color: #7090b0;
background: #f0f4fa; border-radius: 5px; padding: 2px 7px;
white-space: nowrap;
}
.poku-translate-btn {
font-size: .6rem; font-weight: 700; color: #6b7280;
background: white; border: 1.5px solid #dde0e8;
border-radius: 20px; padding: 2px 9px; cursor: pointer;
font-family: inherit; transition: all .15s;
}
.poku-translate-btn:hover { border-color: #10b981; color: #059669; }
@media (max-width: 699px) {
.poku-topbar { padding: 8px 12px; gap: var(--gap-tight); }
.poku-topbar-title { font-size: .88rem; }
.poku-hint-chip { display: none; }
}
/* ── Body: poku-body tüm içeriği scroll eder ── */
.poku-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
display: flex;
align-items: flex-start;
}
/* ── Ana içerik (sol) ── */
.poku-main {
flex: 1 1 auto; min-width: 0;
padding: 20px 20px 20px;
display: flex; flex-direction: column; gap: 14px;
}
/* Metin kartı - overflow:visible olmalı ki grammar panel görünsün */
.poku-metin-card {
background: white;
border-radius: 18px;
border: 1.5px solid #eaeaf0;
box-shadow: 0 4px 24px rgba(0,0,0,.05);
}
.poku-metin-inner {
padding: var(--padding-section) 28px;
font-size: 1.05rem; line-height: 2;
color: var(--clr-bg-deep);
text-align: left !important;
}
@media (max-width: 699px) {
.poku-metin-inner { padding: 14px 14px 14px; font-size: .95rem; line-height: 1.85; }
}
/* YDT section */
.poku-ydt-section { margin-top: 0; }
/* ── Sidebar (sağ) — sticky, poku-body scroll'una bağlı ── */
.poku-sidebar {
width: 272px; flex-shrink: 0;
padding: 20px 16px 40px 0;
display: flex; flex-direction: column; gap: 10px;
position: sticky; top: 0; align-self: flex-start;
max-height: calc(100vh - 80px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 1000px) {
.poku-body { flex-direction: column !important; align-items: stretch !important; }
.poku-main { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; padding: 12px 12px 16px !important; gap: 8px !important; }
.poku-sidebar { width: 100% !important; position: static !important; max-height: none !important; padding: 0 12px 16px !important; }
}
@media (max-width: 699px) {
.poku-main { padding: 8px 10px 6px !important; gap: 6px !important; }
.poku-sidebar { padding: 0 10px 10px !important; }
}
/* ── Sidebar Card ── */
.poku-card {
background: white;
border: 1.5px solid #eaeaf0;
border-radius: 18px;
padding: var(--padding-card) 18px;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.poku-card-label {
display: flex; align-items: center; gap: 7px;
font-size: .62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .7px;
color: var(--clr-text-muted); margin-bottom: 14px;
}
.poku-card-label svg { flex-shrink: 0; color: currentColor; }
/* ── İstatistik Grid ── */
.poku-stats-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 4px;
}
.poku-stat-item {
background: #f8f8fb;
border-radius: 12px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 3px;
border: 1.5px solid #ebebf0;
}
.poku-stat-num {
font-size: 1.3rem; font-weight: 900; color: var(--clr-bg-deep);
line-height: 1;
}
.poku-stat-lbl {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .4px;
color: var(--clr-text-muted);
}
.poku-stat-accent { border-color: #ddd6fe; background: #f5f3ff; }
.poku-stat-accent .poku-stat-num { color: #5b21b6; }
.poku-stat-green { border-color: #bbf7d0; background: var(--clr-success-bg-lt); }
.poku-stat-green .poku-stat-num { color: #15803d; }
.poku-stat-fire { border-color: #fed7aa; background: #fff7ed; }
.poku-stat-fire .poku-stat-num { color: #c2410c; }
/* ── Okuma progress bar ── */
.poku-progress-wrap { margin-top: var(--space-3); }
.poku-progress-label {
display: flex; justify-content: space-between;
font-size: .64rem; font-weight: 700; color: var(--clr-text-muted);
margin-bottom: 6px;
}
.poku-progress-track {
height: 6px; border-radius: 99px; background: #eaeaf0; overflow: hidden;
}
.poku-progress-fill {
height: 100%; border-radius: 99px; width: 0%;
background: linear-gradient(90deg, #7c3aed, #a855f7);
transition: width .4s cubic-bezier(.4,0,.2,1);
}
/* ── Mini Sözlük ── */
.poku-stat-card { }
.poku-dict-card {
flex: 1; display: flex; flex-direction: column;
max-height: 340px;
}
.poku-dict-badge {
background: var(--clr-danger-bg); color: #b91c1c;
border-radius: 10px; padding: 0 7px;
font-size: .6rem; font-weight: 700;
margin-left: auto;
}
.poku-dict-search-wrap {
position: relative; margin-bottom: var(--space-2);
}
.poku-dict-search-icon {
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%); color: #b0b0c0;
pointer-events: none;
}
.poku-dict-input {
width: 100%; box-sizing: border-box;
border: 1.5px solid #eaeaf0; border-radius: 10px;
padding: 7px 10px 7px 28px;
font-size: .8rem; font-family: inherit;
color: var(--clr-bg-deep); background: #fafafa; outline: none;
transition: border-color .15s;
}
.poku-dict-input:focus { border-color: #a78bfa; background: white; }
.poku-dict-list {
overflow-y: auto; flex: 1;
display: flex; flex-direction: column; gap: 4px;
padding-right: 2px;
}
/* dict entry — eski JS'e uyumlu */
.p-dict-entry {
display: flex; align-items: center; gap: var(--gap-tight);
padding: 7px 10px; border-radius: 9px;
background: #fafafa; border: 1.5px solid transparent;
cursor: pointer; transition: all .15s;
}
.p-dict-entry:hover { background: #fdf4ff; border-color: #e9d5ff; }
.p-dict-eng { font-size: .82rem; font-weight: 800; color: var(--clr-danger); min-width: 80px; flex-shrink: 0; }
.p-dict-tr { font-size: .78rem; color: #4b5563; flex: 1; }
.p-dict-speak { font-size: .7rem; background: none; border: none; cursor: pointer; color: #b0b0c0; padding: 0; opacity: .5; transition: opacity .15s; }
.p-dict-entry:hover .p-dict-speak { opacity: 1; }
/* ── İpucu ── */
.poku-tip {
display: flex; gap: var(--gap-tight); align-items: flex-start;
background: #fffbeb; border: 1.5px solid #fde68a;
border-radius: 12px; padding: 12px 14px;
font-size: .74rem; color: #92400e; line-height: 1.55;
}
.poku-tip-icon { font-size: .95rem; flex-shrink: 0; margin-top: 1px; }
/* ── Eski sınıflara fallback (JS henüz güncellenmedi) ── */
.p-oku-topbar { display:flex; align-items:flex-start; gap:var(--gap-normal); width:100%; margin-bottom:18px; }
.p-oku-layout { display:flex; gap:20px; width:100%; align-items:flex-start; }
.p-oku-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:0; }
.p-oku-sidebar { width:280px; flex-shrink:0; display:flex; flex-direction:column; gap:var(--gap-normal); position:sticky; top:16px; }
.p-sidebar-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.p-sidebar-card-title { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--ink3); margin-bottom:var(--space-3); display:flex; align-items:center; gap:6px; }
.p-sidebar-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.p-sidebar-stat { display:flex; flex-direction:column; gap:2px; }
.p-sidebar-stat-val { font-size:1.2rem; font-weight:800; color:var(--ink); line-height:1; }
.p-sidebar-stat-lbl { font-size:.65rem; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.3px; }
.p-sidebar-dict-card { max-height:340px; display:flex; flex-direction:column; }
.p-sidebar-dict-count { background:var(--clr-danger-bg); color:var(--color-primary); border-radius:10px; padding:0 7px; font-size:.6rem; font-weight:700; margin-left:auto; }
.p-dict-search { width:100%; border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:.8rem; font-family:inherit; outline:none; color:var(--ink); background:var(--bg); box-sizing:border-box; }
.p-dict-search:focus { border-color:var(--color-focus); }
.p-sidebar-dict-list { overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:5px; padding-right:2px; }
.p-sidebar-tip { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:10px 12px; font-size:.74rem; color:#92400e; display:flex; gap:var(--gap-tight); align-items:flex-start; line-height:1.5; }
.p-sidebar-tip-icon { font-size:.9rem; flex-shrink:0; }
@media(max-width:860px){.p-oku-layout{flex-direction:column;}.p-oku-sidebar{width:100%;position:static;}}
/* Eski rh-* sınıfları — JS uyumluluğu için korundu */
.rh-page { padding-bottom: 40px; }
.rh-header { padding: 4px 0 20px; }
.rh-page-title { font-size: 1.35rem; font-weight: 900; color: var(--ink); line-height: 1.2; }
.rh-page-sub { font-size: .72rem; color: var(--ink3); font-weight: 500; margin-top: 3px; }
.rh-tabs { display:flex; gap:6px; margin-bottom:var(--space-4); background:var(--bg); padding:4px; border-radius:12px; border:1px solid var(--border); }
.rh-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 12px; border-radius:9px; border:none; background:none; cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; color:var(--ink3); transition:background .15s,color .15s,box-shadow .15s; position:relative; }
.rh-tab:hover { color:var(--ink); background:var(--white); }
.rh-tab-active { background:var(--white); color:var(--ink); box-shadow:0 1px 6px rgba(0,0,0,.08); }
.rh-tab-icon { font-size:1rem; }
.rh-tab-label { white-space:nowrap; }
.rh-tab-badge { font-size:.56rem; font-weight:800; background:var(--color-primary-soft); color:var(--color-primary); border-radius:20px; padding:1px 6px; letter-spacing:.2px; }
.rh-tab-badge:empty { display:none; }
.rh-tab-badge-green { background:var(--clr-success-bg); color:#15803d; }
.rh-panel-toolbar { display:flex; justify-content:flex-end; margin-bottom:10px; min-height:28px; }
.rh-refresh-btn { display:flex; align-items:center; gap:6px; padding:5px 12px; border:1.5px solid var(--border); border-radius:9px; background:var(--white); color:var(--ink2); font-size:.7rem; font-weight:700; cursor:pointer; font-family:inherit; transition:border-color .12s,color .12s; }
.rh-refresh-btn:hover { border-color:var(--ink3); color:var(--ink); }
.rh-list { display:flex; flex-direction:column; gap:10px; }
.rh-loading { display:flex; align-items:center; gap:10px; padding:28px 16px; color:var(--ink3); font-size:.82rem; font-weight:600; }
.rh-loading-spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--ink3); border-radius:50%; animation:rh-spin .8s linear infinite; flex-shrink:0; }
@keyframes rh-spin { to { transform: rotate(360deg); } }
.rh-empty { display:flex; align-items:center; gap:14px; padding:20px 16px; background:var(--bg); border:1.5px dashed var(--border); border-radius:14px; }
.rh-empty-icon { font-size:1.8rem; flex-shrink:0; }
.rh-empty-title { font-size:.85rem; font-weight:800; color:var(--ink); }
.rh-empty-sub { font-size:.72rem; color:var(--ink3); margin-top:3px; }
.rh-pasaj-card { background:var(--white); border:1.5px solid var(--border); border-radius:18px; padding:var(--padding-card) 18px; cursor:pointer; transition:border-color .16s,box-shadow .16s,transform .1s; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.rh-pasaj-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--clr-brand); border-radius:18px 0 0 18px; opacity:0; transition:opacity .16s; }
.rh-pasaj-card-ai::before { background:var(--clr-brand-dark); }
.rh-pasaj-card:hover::before { opacity:1; }
.rh-pasaj-card:hover { border-color:#c7d2fe; box-shadow:0 6px 24px rgba(99,102,241,.10); transform:translateY(-2px); }
.rh-pasaj-card:active { transform:translateY(0) scale(.99); }
.rh-pasaj-card-ai:hover { border-color:#c4b5fd; box-shadow:0 6px 24px rgba(124,58,237,.10); }
.rh-pasaj-header { display:flex; align-items:center; gap:var(--gap-normal); }
.rh-pasaj-icon { font-size:1.75rem; line-height:1; flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f0f4ff,#e8eaf6); border-radius:12px; border:1.5px solid #e0e4f0; }
.rh-pasaj-meta { flex:1; min-width:0; }
.rh-pasaj-title { font-size:.92rem; font-weight:800; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rh-pasaj-timing { font-size:.68rem; color:var(--ink3); font-weight:600; margin-top:3px; }
.rh-pasaj-arrow { color:var(--ink3); flex-shrink:0; transition:color .15s,transform .15s; }
.rh-pasaj-card:hover .rh-pasaj-arrow { color:var(--clr-brand); transform:translateX(2px); }
.rh-pasaj-preview { font-size:.78rem; color:var(--ink2); line-height:1.65; font-style:italic; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; background:#fafbff; border-radius:8px; padding:8px 10px; border:1px solid #eef0f8; }
.rh-pasaj-stat { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:20px; }
.rh-pasaj-stat-words { background:#eff6ff; color:#1d4ed8; }
.rh-pasaj-stat-quiz { background:#fef9c3; color:#92400e; }
.rh-pasaj-stat-voc { background:var(--clr-success-bg-lt); color:#15803d; }
.rh-pasaj-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:-2px; }
.rh-chip { font-size:.65rem; font-weight:700; border-radius:6px; padding:3px 9px; white-space:nowrap; }
.rh-chip-word { background:#eff6ff; color:#1d4ed8; }
.rh-chip-quiz { background:#fef9c3; color:#92400e; }
.rh-chip-ai { background:#f5f3ff; color:var(--clr-brand-dark); }
.rh-chip-voc { background:var(--clr-success-bg-lt); color:#15803d; cursor:help; transition:background .13s,color .13s; }
.rh-chip-voc:hover { background:#15803d; color:#fff; }
@media(max-width:600px){.rh-tabs{gap:4px;}.rh-tab{font-size:.72rem;padding:8px;}.rh-tab-label{display:none;}.rh-tab-active .rh-tab-label{display:inline;}.rh-pasaj-icon{width:38px;height:38px;font-size:1.5rem;}.rh-pasaj-title{font-size:.85rem;}.rh-pasaj-preview{font-size:.74rem;}}
/* ── Mobilde arsiv + grammar sayfaları desktop-main dışında olduğu için fix ── */
@media(max-width:699px) {
.arsiv-full-page:not(.hidden),
.grammar-full-page:not(.hidden) {
position: fixed !important;
top: 52px !important;
bottom: 60px !important;
left: 0 !important;
right: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
min-height: unset !important;
z-index: var(--z-sticky) !important;
background: var(--bg) !important;
}
}
/* ════ KIDS MODULE (kids.css) ════ */
kids.css — WordWorld Kids Modülü
ÖNEMLİ: Tüm sınıflar "kw-" prefix'li → mevcut stillerle çakışmaz
Mevcut sistem: --red, --ink, --border, --bg, --white CSS değişkenleri
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap');
/* ─── CONTAINER (sistemdeki .container gibi) ─── */
#kids-page {
width: 100%;
max-width: 680px;
font-family: 'Nunito', 'Plus Jakarta Sans', system-ui, sans-serif;
padding: 0 4px 80px;
position: relative;
}
/* Tüm sub-paneller başlangıçta gizli */
.kw-sub { display: none; }
/* ─── ANİMASYONLU ARKA PLAN ─── */
.kw-world-bg {
position: fixed; inset: 0; z-index: var(--z-below); pointer-events: none;
background: linear-gradient(180deg, #B3E5FC 0%, #E3F2FD 55%, #C8E6C9 100%);
opacity: 0;
transition: opacity .4s;
}
#kids-page:not(.hidden) ~ * .kw-world-bg,
body:has(#kids-page:not(.hidden)) .kw-world-bg { opacity: 1; }
/* ─── TOAST ─── */
.kw-toast {
position: fixed; top: 66px; left: 50%; transform: translateX(-50%) translateY(-80px);
z-index: var(--z-toast); background: #1A237E; color: white;
border-radius: 50px; padding: 10px 22px;
font-family: 'Fredoka One', cursive; font-size: .95rem;
transition: transform .35s cubic-bezier(.34,1.56,.64,1); white-space: nowrap;
pointer-events: none;
}
.kw-toast.kw-show { transform: translateX(-50%) translateY(0); }
.kw-toast.kw-good { background: linear-gradient(135deg,#22c55e,#16a34a); }
.kw-toast.kw-bad { background: linear-gradient(135deg,#ef4444,var(--color-error)); }
/* ─── XP POPUP ─── */
.kw-xp-popup {
position: fixed; pointer-events: none; z-index: var(--z-toast-bg);
font-family: 'Fredoka One', cursive; font-size: 1.5rem;
color: #FFD54F; text-shadow: 0 2px 8px rgba(0,0,0,.25);
animation: kwXpFloat 1.2s forwards;
}
@keyframes kwXpFloat { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-80px) scale(1.3)} }
/* ─── RESULT OVERLAY ─── */
.kw-result-overlay {
display: none; position: fixed; inset: 0; z-index: var(--z-alert);
background: rgba(26,35,126,.5); backdrop-filter: blur(4px);
align-items: center; justify-content: center; padding: 20px;
}
.kw-result-overlay.kw-res-show { display: flex; }
.kw-result-card {
background: white; border-radius: 28px;
padding: 32px 24px; text-align: center; max-width: 340px; width: 100%;
animation: kwCardIn .4s cubic-bezier(.34,1.56,.64,1);
box-shadow: 0 20px 60px rgba(26,35,126,.2);
}
.kw-res-emoji { font-size: 4.5rem; margin-bottom: 10px; display: block; animation: kwBounce 2s infinite; }
.kw-res-title { font-family: 'Fredoka One', cursive; font-size: 1.9rem; color: #1A237E; margin-bottom: 6px; }
.kw-res-xp { font-size: .95rem; font-weight: 800; color: #7E57C2; margin-bottom: 14px; }
.kw-res-stars { font-size: 2rem; letter-spacing: 6px; margin-bottom: 20px; display: block; }
.kw-res-btns { display: flex; gap: 10px; }
/* ─── HUD ─── */
.kw-hud {
display: flex; align-items: center; gap: 10px;
background: white; border-radius: 20px;
padding: 10px 14px; margin-bottom: 14px;
box-shadow: 0 4px 16px rgba(26,35,126,.08);
border: 1.5px solid #E8EAF6;
}
.kw-hud-lives { display: flex; gap: 3px; }
.kw-life { font-size: 1.2rem; transition: transform .3s; }
.kw-life-lost { filter: grayscale(1) opacity(.3); transform: scale(.8); }
.kw-hud-xp { flex: 1; }
.kw-hud-level { font-family: 'Fredoka One', cursive; font-size: .8rem; color: #5C6BC0; margin-bottom: 3px; }
.kw-xp-bar { height: 9px; background: #E8EAF6; border-radius: 9px; overflow: hidden; }
.kw-xp-fill { height: 100%; background: linear-gradient(90deg,#7E57C2,#AB47BC); border-radius: 9px; transition: width .6s ease; }
.kw-hud-streak { font-family: 'Fredoka One', cursive; font-size: .9rem; color: #FF7043; font-weight: 800; }
/* ─── CARDS ─── */
.kw-card {
background: white; border-radius: 24px;
padding: 20px 18px; box-shadow: 0 6px 24px rgba(26,35,126,.1);
animation: kwCardIn .35s cubic-bezier(.34,1.56,.64,1);
margin-bottom: var(--space-3);
}
@keyframes kwCardIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
/* ─── BACK BUTTON ─── */
.kw-back-btn {
width: 40px; height: 40px; border-radius: 50%; background: white;
border: 2px solid #E8EAF6; cursor: pointer; font-size: 1.2rem;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 3px 10px rgba(26,35,126,.08); transition: transform .15s; flex-shrink: 0;
font-family: inherit;
}
.kw-back-btn:active { transform: scale(.9); }
/* ─── SECTION HEADER ─── */
.kw-sec-hdr {
display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4);
}
.kw-sec-title { font-family: 'Fredoka One', cursive; font-size: 1.45rem; color: #1A237E; }
.kw-sec-sub { font-size: .75rem; color: #5C6BC0; font-weight: 700; }
/* ─── HOME ─── */
.kw-hero-char {
text-align: center; font-size: 5rem; line-height: 1;
animation: kwBounce 2s ease-in-out infinite; margin-bottom: 4px;
}
@keyframes kwBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.kw-hero-title {
font-family: 'Fredoka One', cursive; font-size: 2.2rem;
text-align: center; line-height: 1.1;
background: linear-gradient(135deg,#1A237E,#7E57C2,#EC407A);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; margin-bottom: 4px;
}
.kw-hero-sub { text-align: center; color: #5C6BC0; font-size: .9rem; font-weight: 700; margin-bottom: var(--space-4); }
.kw-player-row { display: flex; justify-content: center; gap: var(--gap-normal); flex-wrap: wrap; margin-bottom: var(--space-4); }
.kw-player-badge {
background: linear-gradient(135deg,#7E57C2,#AB47BC); color: white;
border-radius: 50px; padding: 5px 14px; font-size: .82rem; font-weight: 800;
box-shadow: 0 3px 10px rgba(171,71,188,.3);
}
.kw-player-badge.kw-xp-badge { background: linear-gradient(135deg,#FF7043,#FF5722); }
.kw-sec-label { font-family: 'Fredoka One', cursive; font-size: 1rem; color: #5C6BC0; margin-bottom: 10px; }
/* ─── WORLD GRID ─── */
.kw-world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.kw-world-card {
background: white; border-radius: 18px; padding: var(--padding-card) 12px;
text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(26,35,126,.07);
border: 2.5px solid transparent; transition: transform .18s, box-shadow .18s;
-webkit-tap-highlight-color: transparent;
}
.kw-world-card:active { transform: scale(.94); }
/* World renkleri */
.kw-world-card[data-world="animals"] { background:linear-gradient(135deg,#E8F5E9,#C8E6C9); border-color:#A5D6A7; }
.kw-world-card[data-world="colors"] { background:linear-gradient(135deg,#FFF3E0,#FFE0B2); border-color:#FFCC80; }
.kw-world-card[data-world="numbers"] { background:linear-gradient(135deg,#E3F2FD,#BBDEFB); border-color:#90CAF9; }
.kw-world-card[data-world="food"] { background:linear-gradient(135deg,#FCE4EC,#F8BBD0); border-color:#F48FB1; }
.kw-world-card[data-world="school"] { background:linear-gradient(135deg,#EDE7F6,#D1C4E9); border-color:#B39DDB; }
.kw-world-card[data-world="body"] { background:linear-gradient(135deg,#E0F7FA,#B2EBF2); border-color:#80DEEA; }
.kw-world-icon { font-size: 2.5rem; margin-bottom: 6px; display: block; }
.kw-world-name { font-family: 'Fredoka One', cursive; font-size: 1rem; color: #1A237E; }
.kw-world-desc { font-size: .68rem; color: #5C6BC0; font-weight: 700; margin-top: 2px; }
.kw-world-stars { font-size: .8rem; margin-top: 5px; letter-spacing: 2px; }
/* ─── GAME MODE LIST ─── */
.kw-modes { display: flex; flex-direction: column; gap: 9px; }
.kw-mode-btn {
display: flex; align-items: center; gap: var(--gap-normal);
background: white; border-radius: 18px; padding: 14px 16px;
border: none; cursor: pointer; text-align: left;
box-shadow: 0 4px 14px rgba(26,35,126,.07);
transition: transform .15s, box-shadow .15s;
font-family: 'Nunito', sans-serif; width: 100%;
-webkit-tap-highlight-color: transparent;
}
.kw-mode-btn:active { transform: scale(.96); }
.kw-mode-icon {
width: 46px; height: 46px; border-radius: 14px; font-size: 1.8rem;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kw-mi-match { background: #E8F5E9; }
.kw-mi-pic { background: #FFF3E0; }
.kw-mi-mem { background: #FCE4EC; }
.kw-mi-spell { background: #EDE7F6; }
.kw-mi-build { background: #E3F2FD; }
.kw-mode-info { flex: 1; }
.kw-mode-name { font-family: 'Fredoka One', cursive; font-size: 1.05rem; color: #1A237E; }
.kw-mode-desc { font-size: .72rem; color: #5C6BC0; font-weight: 700; margin-top: 2px; }
.kw-mode-xp { font-size: .7rem; font-weight: 800; color: var(--clr-success); background: #E8F5E9; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
/* ─── PROGRESS BAR ─── */
.kw-prog-wrap { margin-bottom: 14px; }
.kw-prog-bar { height: 8px; background: #E8EAF6; border-radius: 8px; overflow: hidden; }
.kw-prog-fill { height: 100%; background: linear-gradient(90deg,#4FC3F7,#7E57C2); border-radius: 8px; transition: width .5s ease; }
.kw-prog-label { font-size: .72rem; font-weight: 800; color: #5C6BC0; margin-bottom: 4px; display: flex; justify-content: space-between; }
/* ─── QUESTION WORD ─── */
.kw-q-word {
font-family: 'Fredoka One', cursive; font-size: 2.4rem;
text-align: center; color: #1A237E;
background: linear-gradient(135deg,#E3F2FD,#EDE7F6);
border-radius: 20px; padding: 18px 12px;
box-shadow: 0 4px 14px rgba(26,35,126,.07);
margin-bottom: var(--space-4);
animation: kwWordPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kwWordPop { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
/* ─── ANSWER OPTIONS ─── */
.kw-ans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kw-ans-btn {
background: white; border: 2.5px solid #E8EAF6; border-radius: 18px;
padding: 14px 8px; font-family: 'Nunito', sans-serif;
font-size: .95rem; font-weight: 800; color: #1A237E;
cursor: pointer; text-align: center; min-height: 68px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
transition: border-color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.kw-ans-btn:active { transform: scale(.93); }
.kw-opt-emoji { font-size: 1.5rem; display: block; }
.kw-ans-btn.kw-correct { background:#E8F5E9; border-color:var(--clr-success); color:var(--clr-success-dk); animation:kwCorrectPop .4s; }
.kw-ans-btn.kw-wrong { background:#FFEBEE; border-color:#EF9A9A; color:#B71C1C; animation:kwWrongShake .4s; }
@keyframes kwCorrectPop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes kwWrongShake { 0%,40%,80%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 35%,75%{transform:translateX(6px)} }
/* ─── PICTURE QUIZ ─── */
.kw-pic-area {
font-size: 6rem; text-align: center; padding: 18px;
background: linear-gradient(135deg,#FFF3E0,#FCE4EC);
border-radius: 20px; margin-bottom: 14px;
animation: kwWordPop .4s cubic-bezier(.34,1.56,.64,1);
}
.kw-pic-q { text-align: center; font-size: .88rem; font-weight: 800; color: #5C6BC0; margin-bottom: 14px; }
/* ─── MEMORY GRID ─── */
.kw-mem-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-tight); }
.kw-mem-card {
aspect-ratio: 1; border-radius: 13px; cursor: pointer;
position: relative; transform-style: preserve-3d;
transition: transform .45s cubic-bezier(.4,0,.2,1);
-webkit-tap-highlight-color: transparent;
}
.kw-mem-card.kw-mem-flipped,
.kw-mem-card.kw-mem-matched { transform: rotateY(180deg); }
.kw-mem-front, .kw-mem-back {
position: absolute; inset: 0; border-radius: 13px;
display: flex; align-items: center; justify-content: center;
backface-visibility: hidden; font-weight: 800;
text-align: center; padding: 4px;
word-break: break-word; line-height: 1.2;
}
.kw-mem-front { background:linear-gradient(135deg,#7E57C2,#AB47BC); color:white; font-size:1.7rem; }
.kw-mem-back { background:white; color:#1A237E; transform:rotateY(180deg); font-size:.82rem; border:2px solid #E8EAF6; }
.kw-mem-card.kw-mem-matched .kw-mem-front { background:linear-gradient(135deg,#22c55e,#16a34a); }
/* ─── SPELLING BEE ─── */
.kw-spell-emoji { font-size: 5rem; text-align: center; display: block; margin: 8px 0; animation: kwBounce 2s infinite; }
.kw-sp-hint { text-align: center; font-size: .9rem; font-weight: 700; color: #5C6BC0; margin-bottom: 10px; }
.kw-sp-hint strong { color: #7E57C2; }
.kw-letter-tiles { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.kw-letter-tile {
min-width: 34px; height: 40px; border-radius: 10px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
font-family: 'Fredoka One', cursive; font-size: 1.1rem;
}
.kw-tile-blank { background: white; border: 2px dashed #C5CAE9; color: #C5CAE9; }
.kw-tile-revealed { background: linear-gradient(135deg,#7E57C2,#AB47BC); color: white; border: none; }
.kw-sp-input-row { display: flex; gap: var(--gap-tight); margin-bottom: var(--space-3); }
.kw-sp-input {
flex: 1; border: 2.5px solid #E8EAF6; border-radius: 16px;
padding: 13px 14px; font-family: 'Fredoka One', cursive; font-size: 1.3rem;
color: #1A237E; text-align: center; outline: none; background: white;
transition: border-color .2s;
}
.kw-sp-input:focus { border-color: #7E57C2; }
.kw-sp-check {
width: 52px; height: 52px; border-radius: 16px; border: none; cursor: pointer;
background: linear-gradient(135deg,#7E57C2,#AB47BC); color: white; font-size: 1.4rem;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
box-shadow: 0 4px 14px rgba(171,71,188,.3); transition: transform .15s;
}
.kw-sp-check:active { transform: scale(.9); }
/* ─── SENTENCE BUILDER ─── */
.kw-sb-target {
background: linear-gradient(135deg,#E3F2FD,#EDE7F6);
border-radius: 16px; padding: 12px; margin-bottom: var(--space-3);
font-size: .85rem; color: #5C6BC0; font-weight: 700; text-align: center;
}
.kw-sb-target strong { color: #7E57C2; font-size: .95rem; }
.kw-drop-zone {
min-height: 56px; border: 2.5px dashed #C5CAE9; border-radius: 16px;
padding: 8px; display: flex; flex-wrap: wrap; gap: 6px;
align-items: center; margin-bottom: var(--space-3); background: #FAFAFE;
transition: border-color .2s;
}
.kw-dz-has { border-color: #9FA8DA; }
.kw-word-chip {
background: white; border: 2px solid #C5CAE9; border-radius: 10px;
padding: 7px 12px; font-size: .9rem; font-weight: 800; color: #1A237E;
cursor: pointer; transition: all .15s; user-select: none;
-webkit-tap-highlight-color: transparent;
}
.kw-word-chip:active { transform: scale(.93); }
.kw-chip-in { background:linear-gradient(135deg,#7E57C2,#AB47BC); color:white; border-color:transparent; }
.kw-chip-correct { background:linear-gradient(135deg,#22c55e,#16a34a); color:white; border-color:transparent; }
.kw-chip-wrong { background:linear-gradient(135deg,#ef4444,var(--color-error)); color:white; border-color:transparent; }
.kw-word-bank { display: flex; flex-wrap: wrap; gap: var(--gap-tight); margin-bottom: 14px; min-height: 40px; }
/* ─── BADGES ─── */
.kw-badges-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.kw-badge-item {
text-align: center; padding: 14px 8px; background: white;
border-radius: 18px; box-shadow: 0 3px 10px rgba(26,35,126,.07);
}
.kw-badge-icon { font-size: 2.3rem; display: block; margin-bottom: 6px; }
.kw-badge-name { font-size: .68rem; font-weight: 800; color: #1A237E; }
.kw-badge-locked { opacity: .3; filter: grayscale(1); }
/* ─── BUTTONS ─── */
.kw-btn {
border: none; cursor: pointer; font-family: 'Fredoka One', cursive;
border-radius: 50px; padding: 13px 22px; font-size: .95rem;
transition: transform .15s, box-shadow .15s;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
-webkit-tap-highlight-color: transparent;
}
.kw-btn:active { transform: scale(.94); }
.kw-btn-primary {
background: linear-gradient(135deg,#7E57C2,#EC407A); color: white;
box-shadow: 0 5px 18px rgba(171,71,188,.35);
}
.kw-btn-secondary {
background: white; color: #5C6BC0;
box-shadow: 0 3px 10px rgba(26,35,126,.08); border: 2px solid #E8EAF6;
}
.kw-btn-success {
background: linear-gradient(135deg,#22c55e,#16a34a); color: white;
box-shadow: 0 5px 18px rgba(34,197,94,.35);
}
.kw-btn-full { width: 100%; }
/* ─── NAME INPUT ─── */
.kw-name-wrap { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding: var(--padding-section) 8px; }
.kw-name-input {
width: 100%; border: 2.5px solid #E8EAF6; border-radius: 18px;
padding: 14px 18px; font-family: 'Fredoka One', cursive; font-size: 1.2rem;
color: #1A237E; text-align: center; outline: none; background: white; margin: 14px 0;
transition: border-color .2s;
}
.kw-name-input:focus { border-color: #7E57C2; }
/* ─── MOBILE UYUM ─── */
/* Mevcut sistemde mobilde desktop-main: top:52px; bottom:60px */
@media (max-width: 699px) {
#kids-page {
padding: 10px 8px 80px;
max-width: 100%;
}
.kw-world-grid { grid-template-columns: 1fr 1fr; gap: var(--gap-tight); }
.kw-q-word { font-size: 2rem; padding: 14px 10px; }
.kw-ans-btn { min-height: 60px; font-size: .88rem; }
.kw-opt-emoji { font-size: 1.3rem; }
.kw-mem-grid { gap: 6px; }
.kw-hero-title { font-size: 1.9rem; }
.kw-word-chip { padding: 6px 10px; font-size: .85rem; }
.kw-modes { gap: 7px; }
.kw-mode-btn { padding: 12px 12px; gap: 10px; }
.kw-mode-icon { width: 42px; height: 42px; }
}
/* Çok küçük ekranlar (iPhone SE gibi) */
@media (max-width: 380px) {
.kw-q-word { font-size: 1.7rem; }
.kw-world-icon { font-size: 2rem; }
.kw-ans-btn { font-size: .82rem; }
.kw-mem-back { font-size: .72rem; }
}
/* ── ai-vocab-test.css — index.html ile yüklenir ── */
/* ═══════════════════════════════════════════════════════════════
AI QUIZ — BİLGİ & MOTİVASYON PANELİ
═══════════════════════════════════════════════════════════════ */
.aiq-info-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-normal);
}
@media (max-width: 640px) {
.aiq-info-strip { grid-template-columns: 1fr; }
}
.aiq-info-tile {
display: flex;
align-items: flex-start;
gap: 14px;
padding: var(--padding-card) 18px;
border-radius: 16px;
border: 2px solid transparent;
}
.aiq-info-ai {
background: linear-gradient(135deg, #eef2ff, #f0ecff);
border-color: #c7d2fe;
}
.aiq-info-ydt {
background: linear-gradient(135deg, #fff7ed, #fef3c7);
border-color: #fcd34d;
}
.aiq-info-habit {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-color: #86efac;
}
.aiq-info-track {
background: linear-gradient(135deg, #fdf4ff, #fae8ff);
border-color: #e9d5ff;
}
.aiq-info-tile-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.aiq-info-tile-body {}
.aiq-info-tile-title {
font-size: .8rem;
font-weight: 800;
color: var(--clr-bg-deep);
margin-bottom: 4px;
}
.aiq-info-tile-desc {
font-size: .72rem;
color: #6b7280;
line-height: 1.6;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════
VOCABULARY TEST — Eksik Info Panel + Feedback Panel CSS
(qz-info-cols, qz-info-card, qz-timer, qz-perf, qz-family,
qz-feedback, qz-fb-*, qz-xp-float)
═══════════════════════════════════════════════════════════════ */
/* ── Info Panel ── */
#qz-info-panel {
border-top: 1.5px solid rgba(124,58,237,.1);
background: linear-gradient(to bottom,#faf7ff,#f4efff);
border-radius: 0 0 18px 18px;
padding: 10px 18px 14px;
}
/* Timer bar */
.qz-timer-wrap {
display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3);
}
.qz-timer-bar-track {
flex: 1; height: 5px; border-radius: 99px;
background: rgba(124,58,237,.12); overflow: hidden;
}
.qz-timer-bar-fill {
height: 100%; border-radius: 99px; width: 100%;
background: linear-gradient(90deg,#7c3aed,#a855f7);
transition: width 1s linear;
}
.qz-timer-label {
font-size: .78rem; font-weight: 800; color: var(--clr-brand-dark);
min-width: 22px; text-align: right;
}
/* İki kolon grid */
.qz-info-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
}
@media (max-width: 500px) { .qz-info-cols { grid-template-columns: 1fr; } }
/* Info card */
.qz-info-card {
display: flex; align-items: flex-start; gap: 9px;
background: rgba(255,255,255,.8); border-radius: 12px;
padding: 9px 11px; border: 1.5px solid rgba(124,58,237,.1);
box-shadow: 0 1px 6px rgba(124,58,237,.06);
}
.qz-info-card-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.qz-info-card-label {
font-size: .58rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .5px; color: var(--clr-text-muted); margin-bottom: 3px;
}
.qz-info-card-val {
font-size: .8rem; font-weight: 600; color: var(--clr-bg-deep); line-height: 1.4;
}
/* Performans */
.qz-perf-row { display: flex; gap: 7px; align-items: center; margin-bottom: 5px; }
.qz-perf-pill {
font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px;
}
.qz-perf-ok { background: var(--clr-success-bg); color: #166534; }
.qz-perf-err { background: var(--clr-danger-bg); color: #991b1b; }
.qz-perf-bar-wrap {
height: 4px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden;
}
.qz-perf-bar-fill {
height: 100%; border-radius: 99px; width: 0%;
background: linear-gradient(90deg,#22c55e,#16a34a);
transition: width .5s cubic-bezier(.4,0,.2,1);
}
/* Kelime ailesi */
.qz-family-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-top: 6px; padding: 8px 12px;
background: rgba(255,255,255,.7); border-radius: 10px;
border: 1.5px solid var(--clr-brand-light);
}
.qz-family-label {
font-size: .62rem; font-weight: 800; color: var(--clr-brand-dark);
text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.qz-family-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.qz-family-chip {
font-size: .74rem; font-weight: 700; color: #5b21b6;
background: white; border: 1.5px solid #c4b5fd;
border-radius: 99px; padding: 2px 9px;
}
/* ── Feedback Panel (sabit alt şerit) ── */
.qz-feedback {
position: fixed; bottom: 0;
left: 228px; right: 0; z-index: var(--z-panel);
border-radius: 20px 20px 0 0;
padding: 18px 24px 24px;
box-shadow: 0 -8px 32px rgba(0,0,0,.18);
transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
@media (max-width: 699px) {
.qz-feedback {
position: relative;
left: auto; right: auto; bottom: auto;
border-radius: 16px 16px 0 0;
padding: 14px 16px 20px;
box-shadow: 0 -4px 20px rgba(0,0,0,.12);
flex-shrink: 0;
transform: none !important;
transition: opacity .2s, max-height .3s cubic-bezier(.4,0,.2,1);
max-height: 300px;
overflow: hidden;
}
.qz-feedback-hidden {
max-height: 0 !important;
padding: 0 !important;
opacity: 0 !important;
pointer-events: none;
}
.qz-body { padding-bottom: 16px; }
}
.qz-feedback-hidden {
transform: translateY(110%) !important;
pointer-events: none;
opacity: 0;
}
.qz-fb-correct {
background: linear-gradient(135deg,#f0fdf4,#dcfce7);
border-top: 3px solid var(--clr-success);
}
.qz-fb-wrong {
background: linear-gradient(135deg,#fff1f2,#ffe4e6);
border-top: 3px solid #ef4444;
}
/* Feedback özet satırı */
.qz-fb-summary {
display: flex; align-items: center; gap: var(--gap-normal); margin-bottom: var(--space-3);
}
.qz-fb-icon {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; font-weight: 900;
}
.qz-fb-correct .qz-fb-icon { background: var(--clr-success); color: white; }
.qz-fb-wrong .qz-fb-icon { background: #ef4444; color: white; }
.qz-fb-texts { flex: 1; min-width: 0; }
.qz-fb-title { font-size: 1rem; font-weight: 800; color: var(--clr-bg-deep); }
.qz-fb-sub {
font-size: .76rem; color: #6b7280; margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qz-fb-xp-gain {
background: linear-gradient(135deg,#7c3aed,#a855f7); color: white;
font-size: .76rem; font-weight: 800; padding: 4px 11px;
border-radius: 99px; white-space: nowrap; flex-shrink: 0;
}
/* Devam butonu */
.qz-next-btn {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
border-radius: 12px !important;
box-shadow: 0 4px 16px rgba(124,58,237,.35) !important;
border: none !important; color: white !important;
font-weight: 700 !important; font-family: inherit !important;
cursor: pointer !important; padding: 10px 22px !important;
font-size: .9rem !important; transition: transform .15s !important;
flex-shrink: 0;
}
.qz-next-btn:hover { transform: translateY(-1px) !important; }
/* Detay içeriği */
.qz-fb-detail {
border-top: 1px solid rgba(0,0,0,.07); padding-top: 12px;
}
.qz-fb-detail-cols {
display: grid; grid-template-columns: 1fr auto; gap: var(--gap-normal); align-items: start;
}
@media (max-width: 560px) { .qz-fb-detail-cols { grid-template-columns: 1fr; } }
.qz-fb-def-eng { font-size: 1rem; font-weight: 800; color: #1e1b4b; }
.qz-fb-def-tr { font-size: .84rem; font-weight: 600; color: #4b5563; margin-top: 2px; }
.qz-fb-story {
font-size: .78rem; color: #6b7280; margin-top: var(--space-2);
font-style: italic; line-height: 1.55;
border-left: 3px solid #c4b5fd; padding-left: 9px;
}
.qz-fb-story em { font-style: normal; font-weight: 800; color: var(--clr-brand-dark); }
.qz-fb-mnem-block {
display: flex; gap: 7px; align-items: flex-start;
background: #fef9c3; border-radius: 11px; padding: 9px 11px;
max-width: 190px; border: 1px solid #fde68a;
}
.qz-fb-mnem-icon { font-size: 1.1rem; flex-shrink: 0; }
.qz-fb-mnem-text { font-size: .74rem; font-weight: 600; color: #92400e; line-height: 1.45; }
/* XP float animasyonu */
.qz-xp-float {
position: fixed; pointer-events: none; z-index: var(--z-toast);
font-size: .9rem; font-weight: 800; color: var(--clr-brand-dark);
animation: qzXpFloat 1.2s ease-out forwards;
}
@keyframes qzXpFloat {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-60px) scale(.8); }
}
/* ── Sayfalama (rh2-pager) ── */
.rh2-pager {
display: flex; align-items: center; justify-content: center;
gap: 4px; padding: var(--padding-card) 0 4px; flex-wrap: wrap;
}
.rh2-pager-btn {
width: 34px; height: 34px; border-radius: 9px;
border: 1.5px solid #e0e0ef; background: white;
color: #5b21b6; font-size: .82rem; font-weight: 700;
cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.rh2-pager-btn:hover:not(:disabled) { background: #f5f3ff; border-color: #a78bfa; }
.rh2-pager-btn:disabled { opacity: .35; cursor: default; }
.rh2-pager-active {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
color: white !important; border-color: transparent !important;
box-shadow: 0 3px 10px rgba(124,58,237,.35);
}
.rh2-pager-ellipsis {
width: 24px; text-align: center;
font-size: .82rem; color: var(--clr-text-muted); font-weight: 700;
}
.rh2-pager-info {
font-size: .68rem; font-weight: 700; color: var(--clr-text-muted);
margin-left: 8px; white-space: nowrap;
}
/* AI Arşiv kartı butonu */
.rh2-card-save-btn {
display: inline-flex; align-items: center; gap: 4px;
font-size: .64rem; font-weight: 700;
padding: 3px 9px; border-radius: 20px; border: none; cursor: pointer;
font-family: inherit; transition: all .15s;
background: #f5f3ff; color: var(--clr-brand-dark);
}
.rh2-card-save-btn:hover { background: var(--clr-brand-dark); color: white; }
.rh2-card-save-btn.saved { background: var(--clr-success-bg); color: #166534; cursor: default; }
/* ── sm2-typing.css — index.html ile yüklenir ── */
/* ── sm2-repeat.css — index.html ile yüklenir ── */
/* ── cx-context.css — index.html ile yüklenir ── */
/* ════════════════════════════════════════════════════════
DASHBOARD (index-page) — Modern Mobile-First Redesign
Prefix: dash-
════════════════════════════════════════════════════════ */
/* ── Hero ── */
.dash-hero {
background: linear-gradient(135deg, #e63946 0%, var(--color-brand) 60%, #9d0208 100%);
border-radius: 0 0 24px 24px;
padding: var(--padding-section) 18px 26px;
margin-bottom: 0;
position: relative;
overflow: hidden;
}
.dash-hero::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.07);
}
.dash-hero::after {
content: '';
position: absolute;
bottom: -50px; left: -30px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,.05);
}
.dash-hero-inner { position: relative; z-index: var(--z-base); }
.dash-badge {
display: inline-block;
background: rgba(255,255,255,.2);
color: #fff;
font-size: .62rem;
font-weight: 900;
letter-spacing: 1.5px;
padding: 3px 10px;
border-radius: 20px;
margin-bottom: var(--space-2);
}
.dash-title {
font-size: clamp(1.5rem, 6vw, 2.2rem);
font-weight: 900;
color: #fff;
margin: 0 0 4px;
line-height: 1.1;
}
.dash-title em { color: #fde68a; font-style: normal; }
.dash-sub {
font-size: .8rem;
color: rgba(255,255,255,.8);
margin: 0 0 14px;
}
/* ── Anasayfa hoşgeldin alanı ── */
.dash-user-welcome,
.dash-user-noname {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 3px;
margin-bottom: 6px;
animation: dashWelcomeFade .4s ease;
}
@keyframes dashWelcomeFade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.dash-welcome-text {
font-size: .88rem;
color: rgba(255,255,255,.85);
font-weight: 500;
}
.dash-welcome-name {
font-size: .95rem;
font-weight: 800;
color: #fde68a;
letter-spacing: .2px;
}
.dash-welcome-link {
font-size: .8rem;
color: rgba(255,255,255,.7);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color .15s;
background: none; border: none; padding: 0;
font-family: inherit;
}
.dash-welcome-link:hover { color: #fde68a; }
/* İsim eksik linki — günün görevi kartında */
.dash-name-hint {
font-size: .72rem;
font-weight: 600;
color: var(--color-primary, #e63946);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
margin-left: 4px;
white-space: nowrap;
}
.dash-name-hint:hover { opacity: .8; }
.dash-goal-card { display: none; } /* artık kullanılmıyor */
/* ── Günün Görevi içi — Günlük Hedef ── */
.dash-today-goal {
margin-top: var(--space-3);
padding-top: 12px;
border-top: 1.5px solid var(--border);
}
.dash-today-goal-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
}
.dash-today-goal-label { font-size: .78rem; font-weight: 700; color: var(--ink2); }
.dash-today-goal-nums { font-size: .78rem; font-weight: 900; color: var(--color-primary); }
.dash-today-goal-track {
height: 7px;
background: var(--color-primary-soft);
border-radius: 99px;
overflow: hidden;
}
.dash-today-goal-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), #f59e0b);
border-radius: 99px;
width: 0%;
transition: width .6s cubic-bezier(.4,0,.2,1);
}
/* ── Günün Görevi CTA kartı ── */
.dash-today-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 18px;
padding: var(--padding-card) 18px 14px;
margin: 12px 0 4px;
box-shadow: 0 2px 16px rgba(0,0,0,.06);
transition: box-shadow .2s, transform .18s;
}
/* index-container padding:0 olduğundan yatay margin ekle */
.index-container .dash-today-card {
margin: 16px 14px 0;
}
@media(min-width:700px) {
.index-container .dash-today-card { margin: 20px 20px 0; }
}
.dash-today-card:hover {
box-shadow: 0 6px 24px rgba(230,57,70,.12);
transform: translateY(-1px);
}
.dash-today-top {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 14px;
margin-bottom: var(--space-3);
}
.dash-today-left { flex: 1; min-width: 0; }
/* ── Streak Halkası ── */
.dtc-streak-wrap {
position: relative;
width: 58px;
height: 58px;
flex-shrink: 0;
}
.dtc-ring-svg {
width: 58px;
height: 58px;
display: block;
}
.dtc-streak-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 1.1;
display: flex;
flex-direction: column;
align-items: center;
}
.dtc-streak-num {
font-size: .8rem;
font-weight: 900;
color: var(--color-primary);
display: block;
}
.dtc-streak-lbl {
font-size: .52rem;
font-weight: 700;
color: var(--ink3);
text-transform: uppercase;
letter-spacing: .4px;
}
/* ── Motivasyon mesajı ── */
.dtc-motivation {
background: var(--color-primary-soft);
border-left: 3px solid var(--color-primary);
border-radius: 0 10px 10px 0;
padding: 9px 12px;
margin-bottom: 12px;
line-height: 1.5;
}
/* ── Chip satırı ── */
.dtc-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.dtc-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 11px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--bg);
font-size: .7rem;
font-weight: 700;
color: var(--ink2);
}
.dtc-chip-mode {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-soft);
}
.dash-today-eyebrow {
font-size: .62rem;
font-weight: 800;
letter-spacing: 1.2px;
color: var(--color-primary);
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
.dash-today-title {
font-size: 1rem;
font-weight: 800;
color: var(--ink);
line-height: 1.3;
margin-bottom: 4px;
}
.dash-today-title strong { color: var(--color-primary); }
.dash-today-meta {
font-size: .74rem;
color: var(--ink3);
font-weight: 500;
}
/* Listeler toggle butonu */
.dash-lists-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: var(--space-2);
padding: 4px 12px 4px 10px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--bg, #f4f4f8);
font-size: .72rem;
font-weight: 700;
color: var(--ink2);
cursor: pointer;
font-family: inherit;
transition: background .15s;
-webkit-tap-highlight-color: transparent;
}
.dash-lists-toggle:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.dash-lists-chev { transition: transform .2s; flex-shrink: 0; }
/* Açılır chip listesi */
.dash-lists-dropdown {
margin-top: var(--space-2);
animation: dashDropIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dashDropIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.dash-today-icon { display: none; }
.dash-today-cta {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-tight);
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 12px;
padding: 12px 20px;
font-size: .9rem;
font-weight: 800;
cursor: pointer;
transition: all .18s;
box-shadow: 0 3px 12px rgba(230,57,70,.3);
}
.dash-today-cta:hover {
background: var(--color-brand);
transform: translateY(-1px);
box-shadow: 0 5px 18px rgba(230,57,70,.4);
}
.dash-today-cta:active { transform: translateY(0); box-shadow: none; }
/* ── Günlük Hedef ── */
.dash-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-tight);
padding: 12px 14px;
background: var(--white);
border-bottom: 1.5px solid var(--border);
}
.dash-kpi {
border-radius: 14px;
padding: 12px 8px;
text-align: center;
border: 1.5px solid transparent;
}
.dash-kpi-val {
font-size: 1.35rem;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}
.dash-kpi-lbl {
font-size: .58rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .4px;
opacity: .75;
}
.dash-kpi-blue { background: #dbeafe20; border-color: #93c5fd40; } .dash-kpi-blue .dash-kpi-val { color: #2563eb; }
.dash-kpi-green { background: #dcfce720; border-color: #86efac40; } .dash-kpi-green .dash-kpi-val { color: var(--clr-success-dk); }
.dash-kpi-orange { background: #ffedd520; border-color: #fdba7440; } .dash-kpi-orange .dash-kpi-val { color: #f97316; }
.dash-kpi-red { background: #fee2e220; border-color: #fca5a540; } .dash-kpi-red .dash-kpi-val { color: var(--clr-danger); }
/* ── Section Container ── */
.dash-section {
padding: var(--padding-card) 14px 4px;
}
.dash-section-hd {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--gap-tight);
margin-bottom: var(--space-3);
}
.dash-section-title {
font-size: .78rem;
font-weight: 900;
color: var(--ink);
text-transform: uppercase;
letter-spacing: .5px;
}
.dash-list-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.dash-list-lbl { font-size: .7rem; font-weight: 700; color: var(--ink3); }
.dash-list-sel {
border: 1.5px solid var(--border);
border-radius: 9px;
padding: 5px 10px;
font-size: .72rem;
font-family: inherit;
font-weight: 700;
color: var(--ink);
background: var(--bg);
cursor: pointer;
outline: none;
min-width: 110px;
max-width: 180px;
}
.dash-list-sel:focus { border-color: var(--color-primary); }
/* ── Quick Actions Grid ── */
.dash-quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-tight);
margin-bottom: var(--space-2);
}
.dash-qa {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 14px 6px 12px;
border-radius: 16px;
border: 2px solid transparent;
cursor: pointer;
font-family: inherit;
text-align: center;
min-height: 84px;
transition: transform .15s, box-shadow .15s;
position: relative;
overflow: hidden;
}
.dash-qa:active { transform: scale(.94); }
.dash-qa:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
/* ── Mobil: Hızlı Başlat kartları siyah çerçeve (hover yok) ── */
@media (max-width: 699px) {
.dash-qa {
border: 2.5px solid #1a1a1a !important;
box-shadow:
0 4px 14px rgba(0,0,0,.15),
0 1px 3px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.55) !important;
border-radius: 18px !important;
}
.dash-qa:hover {
transform: none !important;
box-shadow:
0 4px 14px rgba(0,0,0,.15),
0 1px 3px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.dash-qa:active {
border-color: #000 !important;
box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
transform: scale(.94) !important;
}
}
.dash-qa-icon { font-size: 1.6rem; line-height: 1; }
.dash-qa-title { font-size: .62rem; font-weight: 900; color: var(--ink); line-height: 1.2; }
.dash-qa-desc { font-size: .52rem; font-weight: 700; color: var(--ink3); }
/* Renk varyantları */
.dash-qa-1 { background: linear-gradient(135deg,#ede9fe,#dbeafe); border-color: #c4b5fd50; }
.dash-qa-2 { background: linear-gradient(135deg,#fee2e2,#fef3c7); border-color: #fca5a550; }
.dash-qa-3 { background: linear-gradient(135deg,#fee2e2,#fce7f3); border-color: #f8717150; }
.dash-qa-4 { background: linear-gradient(135deg,#e0f2fe,#ccfbf1); border-color: #7dd3fc50; }
.dash-qa-5 { background: linear-gradient(135deg,#fef3c7,#d1fae5); border-color: #fde68a50; }
.dash-qa-6 { background: linear-gradient(135deg,#d1fae5,#e0f2fe); border-color: #6ee7b750; }
.dash-qa-7 { background: linear-gradient(135deg,#f3e8ff,#ede9fe); border-color: #d8b4fe50; }
.dash-qa-8 { background: linear-gradient(135deg,#fef3c7,#fff7ed); border-color: #fde68a50; }
.dash-qa-9 { background: linear-gradient(135deg,#e0e7ff,#ede9fe); border-color: #a5b4fc50; }
.dash-qa-10 { background: linear-gradient(135deg,#ecfdf5,#d1fae5); border-color: #6ee7b750; }
/* ── Soft hiyerarşi: ilk 3 birincil, geri kalanlar ikincil ── */
.dash-quick-grid .dash-qa:nth-child(-n+3) {
padding: var(--padding-card) 6px 14px;
min-height: 92px;
border-width: 2.5px;
}
.dash-quick-grid .dash-qa:nth-child(n+4) {
opacity: .78;
min-height: 76px;
}
.dash-quick-grid .dash-qa:nth-child(n+4):hover {
opacity: 1;
}
/* ── Soru İstatistik Grid ── */
.dash-sorustat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap-tight);
margin-bottom: var(--space-2);
}
.dash-ss-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 12px 12px;
cursor: pointer;
transition: transform .13s, box-shadow .13s;
}
.dash-ss-item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.dash-ss-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; flex-shrink: 0;
}
.dash-ss-body { flex: 1; min-width: 0; }
.dash-ss-label { font-size: .65rem; font-weight: 800; color: var(--ink3); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .4px; }
.dash-ss-nums { font-size: .78rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 3px; margin-bottom: 4px; }
.dash-ss-slash { color: var(--ink3); }
.dash-ss-pct { font-size: .65rem; font-weight: 800; color: var(--ink3); margin-left: 4px; }
.dash-ss-bar { height: 4px; background: var(--border); border-radius: 3px; overflow: hidden; }
/* ════════════════════════════
MOBİL (≤699px)
════════════════════════════ */
@media (max-width: 699px) {
.dash-hero { padding: var(--padding-card) 14px 18px; border-radius: 0 0 20px 20px; }
.dash-title { font-size: 1.5rem; }
.dash-kpi-row { gap: 6px; padding: 10px 12px; }
.dash-kpi { padding: 10px 5px; border-radius: 12px; }
.dash-kpi-val { font-size: 1.15rem; }
.dash-kpi-lbl { font-size: .52rem; }
.dash-quick-grid {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.dash-qa { padding: 10px 4px 8px; min-height: 72px; border-radius: 14px; }
.dash-qa-icon { font-size: 1.35rem; }
.dash-qa-title { font-size: .56rem; }
.dash-qa-desc { display: none; }
.dash-sorustat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.dash-ss-item { padding: 10px 10px; gap: var(--gap-tight); }
.dash-ss-icon { width: 30px; height: 30px; font-size: .95rem; }
.dash-ss-label { font-size: .58rem; }
.dash-ss-nums { font-size: .72rem; }
.dash-section { padding: 12px 12px 2px; }
}
/* ════════════════════════════
TABLET (700px–1023px) — iPad blind spot
Sidebar otomatik collapsed, içerik tam genişlik
════════════════════════════ */
@media (min-width: 700px) and (max-width: 1023px) {
/* Sidebar dar mod — icon-only */
.desktop-sidebar {
width: 62px !important;
overflow-x: hidden;
}
.desktop-sidebar .serkan-logo-text,
.desktop-sidebar .sb-sync,
.desktop-sidebar .sb-sec,
.desktop-sidebar .sb-badge,
.desktop-sidebar .sb-badge-pill,
.desktop-sidebar .sb-grammar-toggle-label,
.desktop-sidebar .sb-grammar-chev,
.desktop-sidebar .sb-grammar-list { display: none !important; }
.desktop-sidebar .sb-logo {
padding: 14px 0 !important;
justify-content: center;
flex-direction: column;
gap: 10px;
}
.desktop-sidebar .serkan-logo { justify-content: center; }
.desktop-sidebar .sb-collapse-btn { margin: 0 auto; }
.desktop-sidebar .sb-btn,
.desktop-sidebar .sb-btn-sub,
.desktop-sidebar .sb-btn-sec,
.desktop-sidebar .sb-btn-admin,
.desktop-sidebar .sb-grammar-toggle {
justify-content: center;
padding: 9px 0;
font-size: 0 !important;
gap: 0;
border-radius: 10px;
}
.desktop-sidebar .sb-icon { font-size: 1.15rem !important; margin: 0; }
.desktop-sidebar .sb-nav-primary,
.desktop-sidebar .sb-secondary { padding: 4px 6px; }
.desktop-sidebar .sb-secondary-divider { margin: 4px 4px 6px; }
.desktop-sidebar .sb-admin-bar { padding: 0 2px 4px; }
/* Tooltip tablet'te de aktif */
.desktop-sidebar .sb-btn[title],
.desktop-sidebar .sb-btn-sec[title] { position: relative; }
.desktop-sidebar .sb-btn[title]:hover::after,
.desktop-sidebar .sb-btn-sec[title]:hover::after {
content: attr(title);
position: absolute; left: 70px; top: 50%;
transform: translateY(-50%);
background: var(--clr-bg-deep); color: #fff;
padding: 5px 10px; border-radius: 8px;
font-size: .75rem; font-weight: 600;
white-space: nowrap; pointer-events: none;
z-index: var(--z-tooltip, 9000);
box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
/* İçerik alanı geniş kalsın */
.desktop-main { padding: 20px 16px; }
}
/* ════════════════════════════
MASAÜSTÜ (≥1024px)
════════════════════════════ */
@media (min-width: 1024px) {
.dash-hero { padding: 28px 32px 30px; border-radius: 0 0 28px 28px; }
.dash-hero-inner { max-width: 700px; }
.dash-title { font-size: 2rem; }
.dash-goal-card { max-width: 420px; }
.dash-kpi-row { padding: var(--padding-card) 32px; gap: var(--gap-normal); }
.dash-kpi { padding: 14px 10px; }
.dash-kpi-val { font-size: 1.6rem; }
.dash-kpi-lbl { font-size: .62rem; }
.dash-section { padding: 20px 32px 8px; }
.dash-qa { min-height: 96px; padding: var(--padding-card) 8px 14px; border-radius: 18px; }
.dash-qa-icon { font-size: 1.8rem; }
.dash-qa-title { font-size: .68rem; }
.dash-qa-desc { font-size: .58rem; }
.dash-sorustat-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-ss-item { padding: 14px 14px; }
.dash-ss-icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 12px; }
.dash-ss-label { font-size: .68rem; }
.dash-ss-nums { font-size: .82rem; }
}
/* ════════════════════════════════════════════════════════
MOBİL MODÜL DÜZELTME — cx-page / sr-page / tw-page
Mobil'de görünürlük ve overflow sorunlarını önler
════════════════════════════════════════════════════════ */
/* Tam ekran modüller: hidden olmadığında her zaman göster */
.cx-page:not(.hidden),
.sr-page:not(.hidden),
.tw-page:not(.hidden) {
display: flex !important;
flex-direction: column !important;
min-height: 100dvh !important;
width: 100% !important;
position: relative !important;
z-index: var(--z-base) !important;
overflow-x: hidden !important;
}
/* Gizli halde kesinlikle gizle */
.cx-page.hidden,
.sr-page.hidden,
.tw-page.hidden {
display: none !important;
}
/* Mobil'de desktop-main overflow kısıtlamasını kaldır */
@media (max-width: 699px) {
.desktop-main {
overflow-x: hidden;
min-height: 100dvh;
}
/* İçerik alanlarının minimum yüksekliği */
.cx-main,
.sr-main,
.tw-main {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Input alanları mobil'de tam genişlik */
.tw-input,
.cx-input-row input {
font-size: 16px !important; /* iOS zoom engellemek için */
min-height: 48px;
}
/* Dokunmatik hedefler en az 48px */
.tw-submit-btn,
.tw-btn-check,
.tw-btn-next,
.tw-btn-skip,
.sr-btn,
.cx-check-btn,
.cx-next-btn {
min-height: 48px;
touch-action: manipulation;
}
}
/* ═══════════════════════════════════════════════════════════════
FIX: MOBILE BOTTOM NAV ÇAKIŞMASI — v2.0
═══════════════════════════════════════════════════════════════ */
:root {
--bnav-h: 60px;
--bnav-safe: calc(var(--bnav-h) + 20px);
}
@media (max-width: 699px) {
.desktop-main {
bottom: var(--bnav-h) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--bnav-safe) !important;
}
.container,
.index-container,
.rh-page,
.arsiv-full-page,
.grammar-full-page,
.sp-page,
#quiz-page,
#study-page,
#study-done-page,
#context-page,
#typing-page,
#exercise-page,
#sm2-page,
#paragraf-liste-page,
#paragraf-oku-page,
#stats-page,
#profil-page,
#kids-page,
#games-page,
#ai-arsiv-page,
#listening-page,
#writing-page,
#notes-page,
#grammar-page, #modals-page, #pronouns-page, #passive-page,
#conditionals-page, #relative-page, #noun-page, #conj-page,
#gerund-page, #adjadv-page, #tagquant-page, #speaking-page {
padding-bottom: var(--bnav-safe) !important;
box-sizing: border-box;
}
#admin-page.container {
bottom: var(--bnav-h) !important;
padding-bottom: 0 !important;
}
/* writing-page fixed konumlanıyor, padding-bottom gerekmez */
#writing-page {
padding-bottom: 0 !important;
}
/* poku-page fixed konumlanıyor, padding-bottom gerekmez */
#paragraf-oku-page.container {
padding-bottom: 0 !important;
}
#admin-page .adm-content {
padding-bottom: var(--bnav-safe) !important;
overflow-y: auto !important;
}
.cx-page:not(.hidden),
.sr-page:not(.hidden),
.tw-page:not(.hidden) {
padding-bottom: var(--bnav-safe) !important;
}
/* ls-page kendi bottom:60px ile yönetiyor — padding gereksiz */
.ls-page {
padding-bottom: 0 !important;
}
.sp-body, .sp-col-left, .sp-col-right {
padding-bottom: var(--bnav-safe) !important;
}
.modal-content, .modal-card, .modal-body {
max-height: calc(100vh - var(--bnav-h) - 40px) !important;
overflow-y: auto !important;
}
.mob-bottomnav {
z-index: var(--z-modal) !important;
height: var(--bnav-h);
}
.mob-tab {
min-height: 44px !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
@media (max-width: 699px) {
:root {
--bnav-safe: calc(var(--bnav-h) + 20px + env(safe-area-inset-bottom));
}
.mob-bottomnav {
height: calc(var(--bnav-h) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
}
.desktop-main {
bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)) !important;
}
}
}
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
ALIŞTIRMALAR SAYFASI — game-card
═══════════════════════════════════════════════════════════════ */
.game-card {
display: flex;
align-items: center;
gap: var(--gap-loose);
background: var(--white, #fff);
border: 1.5px solid var(--border, #e5e7eb);
border-radius: 18px;
padding: 18px 20px;
margin-bottom: var(--space-3);
cursor: pointer;
transition: transform .18s, box-shadow .18s, border-color .18s;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
text-align: left;
width: 100%;
font-family: inherit;
background: none;
}
.game-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(99,102,241,.13);
border-color: #a5b4fc;
}
.game-card:active {
transform: translateY(-1px) scale(.99);
}
.game-card-icon {
font-size: 2rem;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
border-radius: 14px;
border: 1.5px solid #ddd6fe;
flex-shrink: 0;
}
.game-card-title {
font-size: .97rem;
font-weight: 800;
color: var(--ink, var(--clr-bg-deep));
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.game-card-desc {
font-size: .78rem;
color: var(--ink3, #6b7280);
line-height: 1.5;
font-weight: 500;
}
/* exercise-page genel düzeni */
#exercise-page.container {
padding: 20px 16px;
padding-bottom: var(--bnav-safe, 80px);
}
@media (max-width: 699px) {
#exercise-page.container {
padding-bottom: var(--bnav-safe, 80px) !important;
}
}
#exercise-page .page-title {
font-size: 1.4rem;
font-weight: 900;
color: var(--ink, var(--clr-bg-deep));
margin-bottom: 4px;
text-align: center;
}
#exercise-page .page-sub {
font-size: .82rem;
color: var(--ink3, #6b7280);
margin-bottom: 20px;
text-align: center;
}
#exercise-page select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--border, #e5e7eb);
border-radius: 12px;
font-size: .88rem;
font-family: inherit;
font-weight: 600;
color: var(--ink, var(--clr-bg-deep));
background: var(--white, #fff);
margin-top: 6px;
cursor: pointer;
outline: none;
}
#exercise-page select:focus {
border-color: #a5b4fc;
}
/* ══ Sayfa geçiş fade animasyonu ══ */
@keyframes pageFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.page-fade-in {
animation: pageFadeIn 150ms ease-out forwards;
}
/* ══ 1 Primary + 9 Grid yapısı ══════════════════════════════ */
/* Günün Görevi — full-width primary */
.dash-today-primary {
background: #ffffff;
color: var(--ink);
border: 1.5px solid var(--border);
}
.dash-today-primary .dash-today-eyebrow { color: var(--ink3); }
.dash-today-primary .dash-today-title { color: var(--ink); }
.dash-today-primary .dash-today-meta { color: var(--ink2); }
.dash-today-primary .dash-today-goal-label { color: var(--ink2); }
.dash-today-primary .dash-today-goal-nums { color: var(--color-primary); }
.dash-today-primary .dash-today-goal-track { background: var(--color-primary-soft); }
.dash-today-primary .dash-today-goal-fill { background: var(--color-primary); }
.dash-today-primary .dash-today-cta {
background: var(--color-primary);
color: #fff;
}
.dash-today-primary .dash-today-cta:hover { background: var(--color-brand); }
@media (max-width: 699px) {
}
@media (min-width: 700px) {
}
@media (min-width: 700px) {
.dash-quick-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
/* ── Accessibility: Görsel olarak gizli, screen reader'a görünür ── */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ════════════════════════════════════════════════════════════
GLOBAL DARK MODE — prefers-color-scheme: dark
Token override — bileşen CSS'leri dokunulmaz kalır
════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
:root {
/* ── Temel renkler ── */
--ink: #e8e8f0;
--ink2: #b0b0c8;
--ink3: #7878a0;
--border: #2a2a3e;
--bg: #0f0f1a;
--white: var(--clr-bg-deep);
/* ── Semantic tokens ── */
--color-brand: #f87171; /* dark: daha parlak — kontrast */
--red: var(--color-brand);
--red-soft: #2a0a0e;
--green: #4ade80;
--green-s: #052e16;
--color-primary: var(--color-brand); /* → --color-brand */
--color-primary-soft: #2a0a0e;
--color-active: #f87171;
--color-active-soft:#2a0a0e;
--color-focus: #f87171;
--color-danger: var(--color-brand); /* dark: brand ile hizalı */
--color-danger-soft:#2a0a0e;
/* ── Renk paleti soft/border overrides ── */
--c-purple-soft: #1e0a3c; --c-purple-border: #4c1d95;
--c-blue-soft: #0a1628; --c-blue-border: #1e3a8a;
--c-sky-soft: #071c2e; --c-sky-border: #075985;
--c-teal-soft: #042f2e; --c-teal-border: #065f46;
--c-green-soft: #052e16; --c-green-border: #14532d;
--c-amber-soft: #1c1500; --c-amber-border: #713f12;
--c-orange-soft: #1c0f00; --c-orange-border: #7c2d12;
--c-pink-soft: #2a0011; --c-pink-border: #881337;
--c-indigo-soft: #0f0e30; --c-indigo-border: #312e81;
--c-fuchsia-soft: #1e0828; --c-fuchsia-border:#701a75;
--c-violet-soft: #0f0e30; --c-violet-border: #312e81;
--c-sync-idle: #444466;
--c-saved-bg: #052e16; --c-saved-color: #4ade80;
--c-code-bg: #1e2030;
--c-info-bg: var(--clr-bg-card);
}
/* ── Kelime kartı hero gradyanı (dark'ta zaten koyu — iyileştirme) ── */
.wc-hero { background: linear-gradient(135deg, #0a0820 0%, #1a0f3a 100%); }
/* ── Sidebar ── */
.desktop-sidebar { background: var(--clr-bg-card); border-color: var(--border); }
.sb-btn:hover { background: #1e1e30; }
.sb-btn.active { background: #2a0a0e; color: var(--color-active); }
/* ── Mobil topbar & drawer ── */
.mob-topbar { background: var(--clr-bg-card); border-color: var(--border); }
.mob-drawer { background: var(--clr-bg-card); }
.mob-bottomnav { background: var(--clr-bg-card); border-color: var(--border); }
.mob-tab.active { color: var(--color-active); }
/* ── Kartlar & paneller ── */
.dash-kpi { background: var(--clr-bg-deep); border-color: var(--border); }
.dash-today-card { background: var(--clr-bg-deep); border-color: var(--border); }
.idx-weak-list, .idx-sm2-wrap { background: var(--clr-bg-deep); border-color: var(--border); }
/* ── Dashboard quick grid ── */
.dash-qa-1 { background: linear-gradient(135deg,#1e0a3c,#0a1628); }
.dash-qa-2 { background: linear-gradient(135deg,#2a0a0e,#1c1500); }
.dash-qa-3 { background: linear-gradient(135deg,#2a0a0e,#2a0011); }
.dash-qa-4 { background: linear-gradient(135deg,#071c2e,#042f2e); }
.dash-qa-5 { background: linear-gradient(135deg,#1c1500,#052e16); }
.dash-qa-6 { background: linear-gradient(135deg,#052e16,#071c2e); }
.dash-qa-7 { background: linear-gradient(135deg,#1e0828,#1e0a3c); }
.dash-qa-8 { background: linear-gradient(135deg,#1c1500,#1c0f00); }
.dash-qa-9 { background: linear-gradient(135deg,#0f0e30,#1e0a3c); }
.dash-qa-10 { background: linear-gradient(135deg,#042f2e,#052e16); }
/* ── Input & form ── */
input, select, textarea {
background: var(--clr-bg-card);
color: var(--ink);
border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--ink3); }
/* ── Genel container ── */
.container { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
}
[data-theme="dark"] :root,
[data-theme="dark"]:root {
/* ── Temel renkler ── */
--ink: #e8e8f0;
--ink2: #b0b0c8;
--ink3: #7878a0;
--border: #2a2a3e;
--bg: #0f0f1a;
--white: var(--clr-bg-deep);
/* ── Semantic tokens ── */
--red: #f87171;
--red-soft: #2a0a0e;
--green: #4ade80;
--green-s: #052e16;
--color-primary: #f87171; /* dark'ta daha parlak kırmızı — kontrast */
--color-primary-soft: #2a0a0e;
--color-active: #f87171;
--color-active-soft:#2a0a0e;
--color-focus: #f87171;
--color-danger: #f87171;
--color-danger-soft:#2a0a0e;
/* ── Renk paleti soft/border overrides ── */
--c-purple-soft: #1e0a3c; --c-purple-border: #4c1d95;
--c-blue-soft: #0a1628; --c-blue-border: #1e3a8a;
--c-sky-soft: #071c2e; --c-sky-border: #075985;
--c-teal-soft: #042f2e; --c-teal-border: #065f46;
--c-green-soft: #052e16; --c-green-border: #14532d;
--c-amber-soft: #1c1500; --c-amber-border: #713f12;
--c-orange-soft: #1c0f00; --c-orange-border: #7c2d12;
--c-pink-soft: #2a0011; --c-pink-border: #881337;
--c-indigo-soft: #0f0e30; --c-indigo-border: #312e81;
--c-fuchsia-soft: #1e0828; --c-fuchsia-border:#701a75;
--c-violet-soft: #0f0e30; --c-violet-border: #312e81;
--c-sync-idle: #444466;
--c-saved-bg: #052e16; --c-saved-color: #4ade80;
--c-code-bg: #1e2030;
--c-info-bg: var(--clr-bg-card);
}
/* ── Kelime kartı hero gradyanı (dark'ta zaten koyu — iyileştirme) ── */
.wc-hero { background: linear-gradient(135deg, #0a0820 0%, #1a0f3a 100%); }
/* ── Sidebar ── */
.desktop-sidebar { background: var(--clr-bg-card); border-color: var(--border); }
.sb-btn:hover { background: #1e1e30; }
.sb-btn.active { background: #2a0a0e; color: var(--color-active); }
/* ── Mobil topbar & drawer ── */
.mob-topbar { background: var(--clr-bg-card); border-color: var(--border); }
.mob-drawer { background: var(--clr-bg-card); }
.mob-bottomnav { background: var(--clr-bg-card); border-color: var(--border); }
.mob-tab.active { color: var(--color-active); }
/* ── Kartlar & paneller ── */
.dash-kpi { background: var(--clr-bg-deep); border-color: var(--border); }
.dash-today-card { background: var(--clr-bg-deep); border-color: var(--border); }
.idx-weak-list, .idx-sm2-wrap { background: var(--clr-bg-deep); border-color: var(--border); }
/* ── Dashboard quick grid ── */
.dash-qa-1 { background: linear-gradient(135deg,#1e0a3c,#0a1628); }
.dash-qa-2 { background: linear-gradient(135deg,#2a0a0e,#1c1500); }
.dash-qa-3 { background: linear-gradient(135deg,#2a0a0e,#2a0011); }
.dash-qa-4 { background: linear-gradient(135deg,#071c2e,#042f2e); }
.dash-qa-5 { background: linear-gradient(135deg,#1c1500,#052e16); }
.dash-qa-6 { background: linear-gradient(135deg,#052e16,#071c2e); }
.dash-qa-7 { background: linear-gradient(135deg,#1e0828,#1e0a3c); }
.dash-qa-8 { background: linear-gradient(135deg,#1c1500,#1c0f00); }
.dash-qa-9 { background: linear-gradient(135deg,#0f0e30,#1e0a3c); }
.dash-qa-10 { background: linear-gradient(135deg,#042f2e,#052e16); }
/* ── Input & form ── */
input, select, textarea {
background: var(--clr-bg-card);
color: var(--ink);
border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--ink3); }
/* ── Genel container ── */
.container { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
/* ── data-theme="dark" — tüm dark bileşen override'ları ── */
[data-theme="dark"] .wc-hero { background: linear-gradient(135deg, #0a0820 0%, #1a0f3a 100%); }
[data-theme="dark"] .desktop-sidebar { background: var(--clr-bg-card); border-color: var(--border); }
[data-theme="dark"] .sb-btn:hover { background: #1e1e30; }
[data-theme="dark"] .sb-btn.active { background: #2a0a0e; color: var(--color-active); }
[data-theme="dark"] .mob-topbar { background: var(--clr-bg-card); border-color: var(--border); }
[data-theme="dark"] .mob-drawer { background: var(--clr-bg-card); }
[data-theme="dark"] .mob-bottomnav { background: var(--clr-bg-card); border-color: var(--border); }
[data-theme="dark"] .mob-tab.active { color: var(--color-active); }
[data-theme="dark"] .dash-kpi { background: var(--clr-bg-deep); border-color: var(--border); }
[data-theme="dark"] .dash-today-card { background: var(--clr-bg-deep); border-color: var(--border); }
[data-theme="dark"] .dtc-motivation { background: rgba(230,57,70,.1); border-color: var(--color-primary); color: var(--ink2); }
[data-theme="dark"] .dtc-chip { background: var(--clr-bg-card); border-color: var(--border); color: var(--ink2); }
[data-theme="dark"] .dtc-chip-mode { background: rgba(230,57,70,.12); border-color: var(--color-primary); color: var(--color-primary); }
[data-theme="dark"] .idx-weak-list, [data-theme="dark"] .idx-sm2-wrap { background: var(--clr-bg-deep); border-color: var(--border); }
[data-theme="dark"] .dash-qa-1 { background: linear-gradient(135deg,#1e0a3c,#0a1628); }
[data-theme="dark"] .dash-qa-2 { background: linear-gradient(135deg,#2a0a0e,#1c1500); }
[data-theme="dark"] .dash-qa-3 { background: linear-gradient(135deg,#2a0a0e,#2a0011); }
[data-theme="dark"] .dash-qa-4 { background: linear-gradient(135deg,#071c2e,#042f2e); }
[data-theme="dark"] .dash-qa-5 { background: linear-gradient(135deg,#1c1500,#052e16); }
[data-theme="dark"] .dash-qa-6 { background: linear-gradient(135deg,#052e16,#071c2e); }
[data-theme="dark"] .dash-qa-7 { background: linear-gradient(135deg,#1e0828,#1e0a3c); }
[data-theme="dark"] .dash-qa-8 { background: linear-gradient(135deg,#1c1500,#1c0f00); }
[data-theme="dark"] .dash-qa-9 { background: linear-gradient(135deg,#0f0e30,#1e0a3c); }
[data-theme="dark"] .dash-qa-10 { background: linear-gradient(135deg,#042f2e,#052e16); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
background: var(--clr-bg-card); color: var(--ink); border-color: var(--border);
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--ink3); }
[data-theme="dark"] .container { background: var(--bg); }
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
/* ── data-theme="light" — sistem dark olsa bile aydınlık zorla ── */
[data-theme="light"] :root,
[data-theme="light"]:root {
--ink: var(--clr-bg-deep); --ink2: #555566; --ink3: #606070;
--border: #ebebf0; --bg: #f7f7fb; --white: #ffffff;
--red: var(--color-brand); --red-soft: var(--color-brand-soft); --green: var(--clr-success); --green-s: var(--clr-success-bg-lt);
--color-primary: var(--color-brand); --color-primary-soft: var(--color-brand-soft);
--color-active: var(--clr-danger); --color-active-soft: #fdf1f2;
--color-danger: var(--color-error); --color-danger-soft: var(--color-error-soft);
--c-purple-soft: #f5f3ff; --c-purple-border: #c4b5fd;
--c-blue-soft: #eff6ff; --c-blue-border: #93c5fd;
--c-sky-soft: #f0f9ff; --c-sky-border: #7dd3fc;
--c-teal-soft: #ecfdf5; --c-teal-border: #6ee7b7;
--c-green-soft: var(--clr-success-bg-lt); --c-green-border: #bbf7d0;
--c-amber-soft: #fef9c3; --c-amber-border: #fde68a;
--c-orange-soft: #fff7ed; --c-orange-border: #fed7aa;
--c-pink-soft: #fff1f2; --c-pink-border: #fda4af;
--c-indigo-soft: #eef2ff; --c-indigo-border: #a5b4fc;
--c-fuchsia-soft:#fdf4ff; --c-fuchsia-border:#f0abfc;
--c-violet-soft: #eef2ff; --c-violet-border: #c7d2fe;
--c-sync-idle: #cccccc;
--c-saved-bg: var(--clr-success-bg); --c-saved-color: var(--clr-success-dk);
--c-code-bg: #e2e8f0;
--c-info-bg: #f8fafc;
}
/* ── data-theme="light" bileşen override'ları ── */
[data-theme="light"] .wc-hero { background: linear-gradient(135deg, #0f0c29 0%, #302b63 100%); }
[data-theme="light"] .desktop-sidebar { background: #ffffff; border-color: #ebebf0; }
[data-theme="light"] .sb-btn:hover { background: #f4f4f8; }
[data-theme="light"] .sb-btn.active { background: #fdf1f2; color: var(--clr-danger); }
[data-theme="light"] .mob-topbar { background: #ffffff; border-color: #ebebf0; }
[data-theme="light"] .mob-drawer { background: #ffffff; }
[data-theme="light"] .mob-bottomnav { background: #ffffff; border-color: #ebebf0; }
[data-theme="light"] .mob-tab.active { color: var(--clr-danger); }
[data-theme="light"] .dash-kpi { background: #ffffff; border-color: #ebebf0; }
[data-theme="light"] .dash-today-card { background: #ffffff; border-color: #ebebf0; }
[data-theme="light"] .dash-today-primary { background: #ffffff; border-color: #ebebf0; }
[data-theme="light"] .idx-weak-list, [data-theme="light"] .idx-sm2-wrap { background: transparent; }
[data-theme="light"] .idx-weak-item { background: var(--white); border-color: var(--border); }
[data-theme="light"] .idx-weak-red { border-color: #fca5a5; background: #fff5f5; }
[data-theme="light"] .idx-weak-orange { border-color: #fed7aa; background: #fffbf5; }
[data-theme="light"] .idx-weak-yellow { border-color: #fde68a; background: #fffdf0; }
[data-theme="light"] .container { background: #ffffff; }
[data-theme="light"] body { background: #f7f7fb; color: var(--clr-bg-deep); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background: #ffffff; color: var(--clr-bg-deep); border-color: #ebebf0;
}
[data-theme="light"] body { background: #f7f7fb; color: var(--clr-bg-deep); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background: #ffffff; color: var(--clr-bg-deep); border-color: #ebebf0;
}
/* ── dash-qa light renkler (sistem dark olsa da override et) ── */
[data-theme="light"] .dash-qa-1 { background: linear-gradient(135deg,#ede9fe,#dbeafe); border-color: #c4b5fd50; }
[data-theme="light"] .dash-qa-2 { background: linear-gradient(135deg,#fee2e2,#fef3c7); border-color: #fca5a550; }
[data-theme="light"] .dash-qa-3 { background: linear-gradient(135deg,#fee2e2,#fce7f3); border-color: #f8717150; }
[data-theme="light"] .dash-qa-4 { background: linear-gradient(135deg,#e0f2fe,#ccfbf1); border-color: #7dd3fc50; }
[data-theme="light"] .dash-qa-5 { background: linear-gradient(135deg,#fef3c7,#d1fae5); border-color: #fde68a50; }
[data-theme="light"] .dash-qa-6 { background: linear-gradient(135deg,#d1fae5,#e0f2fe); border-color: #6ee7b750; }
[data-theme="light"] .dash-qa-7 { background: linear-gradient(135deg,#f3e8ff,#ede9fe); border-color: #d8b4fe50; }
[data-theme="light"] .dash-qa-8 { background: linear-gradient(135deg,#fef3c7,#fff7ed); border-color: #fde68a50; }
[data-theme="light"] .dash-qa-9 { background: linear-gradient(135deg,#e0e7ff,#ede9fe); border-color: #a5b4fc50; }
[data-theme="light"] .dash-qa-10 { background: linear-gradient(135deg,#ecfdf5,#d1fae5); border-color: #6ee7b750; }
/* ════════════════════════════════════════════════════════
EMPTY STATE — Standart boş durum komponenti
Kullanım: JS'te buildEmptyState({icon,title,sub,cta})
════════════════════════════════════════════════════════ */
.empty-state {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 28px 20px;
gap: var(--gap-tight);
}
.empty-state-icon {
font-size: 2rem; line-height: 1;
margin-bottom: 4px;
}
.empty-state-title {
font-size: var(--text-sm); font-weight: 800;
color: var(--ink); line-height: 1.3;
}
.empty-state-sub {
font-size: var(--text-xs); font-weight: 600;
color: var(--ink3); line-height: 1.5;
max-width: 220px;
}
.empty-state-cta {
margin-top: var(--space-2); padding: 10px 20px;
font-size: var(--text-xs); width: auto !important;
}
/* ════════════════════════════════════════════════════════
MOBİL YÜZEN TEMA FAB
Sadece mobilde görünür, bottom-nav üstünde sağ alt köşe
════════════════════════════════════════════════════════ */
.mob-theme-fab { display: none !important; }
/* ── kelime-yoneticisi.css — index.html ile yüklenir ── */
/* ── ai-paragraf-uretici.css — index.html ile yüklenir ── */
/* ══════════════════════════════════════════════════════════════════════════
UI/UX AUDIT FIX BLOCK — v8 (09 Mart 2026)
Kaynak: Gerçek kod analizi — WCAG ölçüm, skeleton bug fix, form pattern
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Skeleton Loader — KRITIK: HTML'de 9 element var, CSS tanımsızdı ── */
/* --border-lite: shimmer'ın orta (açık) noktası — token olarak tanımlanıyor */
:root { --border-lite: #d8d8e2; } /* light mode shimmer mid-point */
[data-theme="dark"] { --border-lite: #2a2a42; } /* dark mode shimmer mid-point */
/* @keyframes shimmer — audit raporundaki isim (geriye dönük uyumluluk) */
@keyframes shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
/* Aynı animasyon için alias (eski isim kalıcı olarak da çalışsın) */
@keyframes skeleton-shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skeleton {
/* color-mix() yerine sabit token — Safari 15 altı da çalışır */
background: linear-gradient(
90deg,
var(--border) 25%,
var(--border-lite) 37%,
var(--border) 63%
);
background-size: 1200px 100%;
animation: shimmer 1.4s ease-in-out infinite;
border-radius: 6px;
display: block;
}
.skeleton-line { height: 14px; margin-bottom: var(--space-2); border-radius: 4px; }
.skeleton-panel { height: 80px; border-radius: 10px; }
.skeleton-circle { border-radius: 50%; }
/* Width utility helpers (skeleton + genel) */
.w-80 { width: 80%; }
.w-60 { width: 60%; }
.w-40 { width: 40%; }
.w-30 { width: 30%; }
/* ── 2. Floating Label Pattern — form alanları için ── */
.field-wrap {
position: relative;
margin-bottom: var(--space-4, 16px);
}
.field-wrap input,
.field-wrap textarea,
.field-wrap select {
width: 100%;
padding: 22px 14px 8px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-size: var(--text-base, .94rem);
font-family: inherit;
background: var(--white);
color: var(--ink);
transition: border-color .2s, box-shadow .2s;
outline: none;
-webkit-appearance: none;
}
.field-wrap label {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
font-size: var(--text-base, .94rem);
font-weight: var(--fw-label, 700);
color: var(--ink3);
pointer-events: none;
transition: top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease;
background: transparent;
}
/* textarea için label top konumu */
.field-wrap:has(textarea) label {
top: 20px;
transform: none;
}
/* Float up state */
.field-wrap input:focus + label,
.field-wrap input:not(:placeholder-shown) + label,
.field-wrap textarea:focus + label,
.field-wrap textarea:not(:placeholder-shown) + label {
top: 8px;
transform: none;
font-size: var(--text-xs, .70rem);
color: var(--color-primary);
}
/* Focus ring */
.field-wrap input:focus,
.field-wrap textarea:focus,
.field-wrap select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(193, 18, 31, .12);
}
/* Error state */
.field-wrap.has-error input,
.field-wrap.has-error textarea {
border-color: var(--clr-danger);
box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
}
.field-wrap.has-error label { color: var(--clr-danger); }
.field-error-msg {
font-size: var(--text-xs);
color: var(--clr-danger);
font-weight: var(--fw-label, 700);
margin-top: 4px;
padding-left: 14px;
display: none;
}
.field-wrap.has-error .field-error-msg { display: block; }
/* Placeholder: görünmez (float label ile çakışmasın) */
.field-wrap input::placeholder,
.field-wrap textarea::placeholder { opacity: 0; }
/* ── 3. Dark mode field-wrap ── */
[data-theme="dark"] .field-wrap input,
[data-theme="dark"] .field-wrap textarea,
[data-theme="dark"] .field-wrap select {
background: var(--bg);
color: var(--ink);
border-color: var(--border);
}
/* ══════════════════════════════════════════════════════════════════════════
iOS / ERİŞİLEBİLİRLİK — v7 (Tüm Açıklar Kapatıldı)
══════════════════════════════════════════════════════════════════════════ */
/* ── Klavye odak göstergesi — fare için gizle, klavye için göster ──────── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
outline: 2px solid var(--color-primary, var(--color-brand));
outline-offset: 2px;
border-radius: 4px;
}
/* ── iOS: Tüm scroll container'lara webkit touch kaydırma ─────────────── */
[class*="-list"],
[class*="-body"],
[class*="-content"],
[class*="-panel"],
[class*="-scroll"],
[class*="-items"] {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
/* ── iOS: Input zoom koruması ── font-size < 16px → Safari zoom yapar ─── */
input:not([type="range"]),
textarea,
select {
font-size: max(16px, 1em) !important;
-webkit-text-size-adjust: 100%;
}
/* ════════════════════════════════════════════════════════════════════════
DASHBOARD — Dash List Chips
index.html inline