/* ═══════════════════════════════════════════════════════════
style.css — Rehber Hocan v2
Tüm CSS birleşik: main + coğrafya + responsive + utility
═══════════════════════════════════════════════════════════ */
/* M9: @import'lar index.html'de etiketine taşındı:
*/
/* ═══════════ UTILITY CLASSES ═══════════ */
/* JS inline style yerine kullanılacak ortak sınıflar */
/* Layout */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Gap */
.gap-2 { gap: 0.125rem; }
.gap-4 { gap: 0.25rem; }
.gap-6 { gap: 0.375rem; }
.gap-8 { gap: 0.5rem; }
.gap-10 { gap: 0.625rem; }
.gap-12 { gap: 0.75rem; }
.gap-16 { gap: 1rem; }
.gap-20 { gap: 1.25rem; }
.gap-24 { gap: 1.5rem; }
/* Padding */
.p-0 { padding: 0; }
.p-4 { padding: 0.25rem; }
.p-8 { padding: 0.5rem; }
.p-12 { padding: 0.75rem; }
.p-16 { padding: 1rem; }
.p-20 { padding: 1.25rem; }
.p-24 { padding: 1.5rem; }
.px-8 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-12 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-16 { padding-left: 1rem; padding-right: 1rem; }
.px-20 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-4 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-12 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-16 { padding-top: 1rem; padding-bottom: 1rem; }
/* Margin */
.m-0 { margin: 0; }
.mt-4 { margin-top: 0.25rem; }
.mt-8 { margin-top: 0.5rem; }
.mt-12 { margin-top: 0.75rem; }
.mt-16 { margin-top: 1rem; }
.mb-4 { margin-bottom: 0.25rem; }
.mb-8 { margin-bottom: 0.5rem; }
.mb-12 { margin-bottom: 0.75rem; }
.mb-16 { margin-bottom: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Typography */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.fs-10 { font-size: 0.625rem; }
.fs-11 { font-size: 0.6875rem; }
.fs-12 { font-size: 0.75rem; }
.fs-13 { font-size: 0.8125rem; }
.fs-14 { font-size: 0.875rem; }
.fs-15 { font-size: 0.9375rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-22 { font-size: 1.375rem; }
.fs-24 { font-size: 1.5rem; }
.fs-28 { font-size: 1.75rem; }
.fs-32 { font-size: 2rem; }
.lh-1 { line-height: 1; }
.lh-1-2 { line-height: 1.2; }
.lh-1-4 { line-height: 1.4; }
.lh-1-5 { line-height: 1.5; }
.lh-1-6 { line-height: 1.6; }
.ws-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Colors — CSS custom properties kullanır */
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success, #22c55e); }
.text-danger { color: var(--danger, #ef4444); }
.text-warning { color: var(--warning, #f59e0b); }
.bg-success { background-color: var(--success, #22c55e); }
.bg-danger { background-color: var(--danger, #ef4444); }
.bg-warning { background-color: var(--warning, #f59e0b); }
/* Border radius */
.rounded-4 { border-radius: 0.25rem; }
.rounded-6 { border-radius: 0.375rem; }
.rounded-8 { border-radius: 0.5rem; }
.rounded-10 { border-radius: 0.625rem; }
.rounded-12 { border-radius: 0.75rem; }
.rounded-16 { border-radius: 1rem; }
.rounded-20 { border-radius: 1.25rem; }
.rounded-full { border-radius: 9999px; }
/* Overflow & positioning */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
/* Width/Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-480 { max-width: 480px; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; }
/* Cursor & interaction */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.no-border { border: none; }
/* Transitions */
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }
/* Accessibility */
.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;
}
/* ═══════════ MAIN ═══════════ */
/* MOVED TO : @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Sora:wght@300;400;500;600;700;800&display=swap'); */
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
:root {
--bg: #F4EFE9;
--bg2: #EAE3DA;
--card: #FFFFFF;
--card2: #F9F6F2;
--card3: #EFE9E2;
--border: rgba(0,0,0,0.08);
--border2: rgba(192,174,156,0.18);
--text: #28251F;
--text2: #4A453F;
--text3: #524D48;
--text4: #65605A;
--navy: #32302B;
--slate: #857970;
--pencil: #A0948B;
--light: #635D57;
--cream: #28251F;
--accent: #D4694E;
--accent2: #C85A40;
--accent3: #BC4D34;
--success: #48967A;
--warn: #D4963A;
--danger: #C94848;
--info: #4A7FAA;
--shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
--shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
--shadow-accent: 0 6px 20px rgba(212,105,78,.30);
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 24px;
--focus-ring: 0 0 0 3px rgba(212,105,78,.35);
}
html {
scroll-behavior: smooth
}
/* ===== DARK MODE ===== */
[data-theme="dark"] {
--bg: #1a1a2e; --bg2: #16213e; --card: #1e2746; --card2: #232b48; --card3: #2a3358;
--border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.1);
--text: #e8e6e3; --text2: #b8b4af; --text3: #a09b96; --text4: #8a8580;
--navy: #f0ece8; --slate: #a09890; --pencil: #7a7068; --light: #b0a8a0; --cream: #f0ece8;
--shadow-sm: 0 1px 4px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04);
--shadow-md: 0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
--focus-ring: 0 0 0 3px rgba(212,105,78,.4);
}
[data-theme="dark"] body::before { opacity: 0.02; }
[data-theme="dark"] .nav { background: rgba(26,26,46,0.92); border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .card { background: var(--card); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .input, [data-theme="dark"] .input-sm { background: var(--card2); border-color: rgba(255,255,255,0.1); color: var(--text); }
[data-theme="dark"] .topic-btn { background: var(--card2); border-color: rgba(255,255,255,0.06); color: var(--text); }
[data-theme="dark"] .cat-card { background: var(--card); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] #geoModalOverlay .geo-modal { background: rgba(30,39,70,0.95); }
[data-theme="dark"] #geoModalOverlay .geo-modal-title { color: #e8e6e3; }
[data-theme="dark"] #geoModalOverlay .geo-modal-stat { background: rgba(255,255,255,0.05); }
[data-theme="dark"] #geoModalOverlay .geo-modal-close { background: rgba(255,255,255,0.08); color: #aaa; }
/* Dark mode: Flash card düzeltmeleri */
[data-theme="dark"] .ex-card-front { background: linear-gradient(160deg, #1e2746 0%, #232b48 100%) !important; border-color: rgba(255,255,255,0.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,.3) !important; }
[data-theme="dark"] .ex-card-back { background: linear-gradient(160deg, #1a3a2e 0%, #1e3328 100%) !important; border-color: rgba(72,150,122,0.3) !important; }
[data-theme="dark"] .ex-card-front *, [data-theme="dark"] .ex-card-back * { color: #e8e6e3 !important; }
[data-theme="dark"] .ex-card-front [style*="color:#888"], [data-theme="dark"] .ex-card-front [style*="color: #888"],
[data-theme="dark"] .ex-card-front [style*="color:#aaa"], [data-theme="dark"] .ex-card-front [style*="color:#999"] { color: #b8b4af !important; }
/* Dark mode: TopBar ve sticky barlar */
[data-theme="dark"] [style*="background: rgba(244,239,233"] { background: rgba(26,26,46,0.92) !important; }
[data-theme="dark"] [style*="background: rgba(255,255,255"] { background: rgba(26,26,46,0.92) !important; }
[data-theme="dark"] [style*="background:rgba(244,239,233"] { background: rgba(26,26,46,0.92) !important; }
[data-theme="dark"] [style*="background:rgba(255,255,255"] { background: rgba(26,26,46,0.92) !important; }
[data-theme="dark"] [style*="background: #FFFFFF"] { background: var(--card) !important; }
[data-theme="dark"] [style*="background:#FFFFFF"] { background: var(--card) !important; }
[data-theme="dark"] [style*="background: #fff"] { background: var(--card) !important; }
[data-theme="dark"] [style*="background:#fff"] { background: var(--card) !important; }
[data-theme="dark"] [style*="background: white"] { background: var(--card) !important; }
/* Dark mode: Inline text renkleri */
[data-theme="dark"] [style*="color:#28251F"] { color: var(--text) !important; }
[data-theme="dark"] [style*="color: #28251F"] { color: var(--text) !important; }
[data-theme="dark"] [style*="color:#32302B"] { color: var(--navy) !important; }
[data-theme="dark"] [style*="color: #32302B"] { color: var(--navy) !important; }
[data-theme="dark"] [style*="color:#1a1a2e"] { color: #e8e6e3 !important; }
[data-theme="dark"] [style*="color: #1a1a2e"] { color: #e8e6e3 !important; }
[data-theme="dark"] [style*="color:#222"] { color: #e8e6e3 !important; }
[data-theme="dark"] [style*="color: #222"] { color: #e8e6e3 !important; }
[data-theme="dark"] [style*="color:#333"] { color: #d8d4cf !important; }
[data-theme="dark"] [style*="color: #333"] { color: #d8d4cf !important; }
[data-theme="dark"] [style*="color:#444"] { color: #c8c4bf !important; }
[data-theme="dark"] [style*="color:#555"] { color: #b8b4af !important; }
[data-theme="dark"] [style*="color:#666"] { color: #a8a4a0 !important; }
[data-theme="dark"] [style*="color: #666"] { color: #a8a4a0 !important; }
[data-theme="dark"] [style*="color:#888"] { color: #a8a4a0 !important; }
[data-theme="dark"] [style*="color: #888"] { color: #a8a4a0 !important; }
/* Dark mode: Kart ve kutu arka planları */
[data-theme="dark"] [style*="background: #F9F6F2"] { background: var(--card2) !important; }
[data-theme="dark"] [style*="background:#F9F6F2"] { background: var(--card2) !important; }
[data-theme="dark"] [style*="background: #FAF7F3"] { background: var(--card2) !important; }
[data-theme="dark"] [style*="background:#FAF7F3"] { background: var(--card2) !important; }
[data-theme="dark"] [style*="background: #EFE9E2"] { background: var(--card3) !important; }
[data-theme="dark"] [style*="background:#EFE9E2"] { background: var(--card3) !important; }
[data-theme="dark"] [style*="background: #EAE3DA"] { background: var(--bg2) !important; }
[data-theme="dark"] [style*="background: var(--card2)"] { background: var(--card2) !important; }
/* Dark mode: Egzersiz modu barları ve butonları */
[data-theme="dark"] [style*="background: linear-gradient(135deg, #32302B"] { background: linear-gradient(135deg, #1e2746, #232b48) !important; }
[data-theme="dark"] [style*="background:linear-gradient(135deg, #32302B"] { background: linear-gradient(135deg, #1e2746, #232b48) !important; }
[data-theme="dark"] [style*="border-bottom: 1px solid rgba(192,174,156"] { border-bottom-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] [style*="border: 1px solid rgba(192,174,156"] { border-color: rgba(255,255,255,0.08) !important; }
/* Dark mode: Coğrafya harita */
[data-theme="dark"] #cografya-native-wrapper .flash-card { background: var(--card) !important; }
[data-theme="dark"] #cografya-native-wrapper .flash-card * { color: var(--text) !important; }
[data-theme="dark"] #cografya-native-wrapper [style*="background: #F4EFE9"] { background: var(--bg) !important; }
[data-theme="dark"] #cografya-native-wrapper [style*="background:#F4EFE9"] { background: var(--bg) !important; }
/* Dark mode: Harita SVG etiketleri */
[data-theme="dark"] .map-label { fill: #e8e6e3 !important; }
[data-theme="dark"] svg text[fill="#333"] { fill: #d8d4cf !important; }
[data-theme="dark"] svg text[fill="#222"] { fill: #e8e6e3 !important; }
[data-theme="dark"] svg text[fill="#1a1a2e"] { fill: #e8e6e3 !important; }
[data-theme="dark"] svg text[fill="var(--navy)"] { fill: #e8e6e3 !important; }
[data-theme="dark"] svg text { fill: #e8e6e3; }
[data-theme="dark"] .geo-shape text { fill: #e8e6e3 !important; }
[data-theme="dark"] #cografya-native-wrapper text { fill: #e8e6e3; }
/* Dark mode: Harita arka plan */
[data-theme="dark"] #cografya-native-wrapper #mapArea { background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%) !important; }
[data-theme="dark"] .map-area-clip { background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%) !important; }
[data-theme="dark"] #cografya-native-wrapper .cp { fill: #252d45 !important; stroke: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] #cografya-native-wrapper .cp.highlight { fill: var(--topic-hl, var(--accent)) !important; stroke: var(--topic-hl, var(--navy)) !important; }
[data-theme="dark"] #cografya-native-wrapper .cp.overview-hl { fill: var(--overview-hl-fill, rgba(224,122,95,0.25)) !important; }
[data-theme="dark"] #cografya-native-wrapper .cp.correct { fill: #5BA88C !important; stroke: #fff !important; }
[data-theme="dark"] #cografya-native-wrapper .cp.wrong { fill: #D95555 !important; stroke: #fff !important; }
[data-theme="dark"] #cografya-native-wrapper .cp.hint { fill: #FFD93D !important; stroke: #fff !important; }
/* Dark mode: Border düzeltmeleri */
[data-theme="dark"] [style*="border-bottom: 1px solid #f8f8f8"] { border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] [style*="border: 1px solid #E0D8D0"] { border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] [style*="border: 1.5px solid #E0D8D0"] { border-color: rgba(255,255,255,0.1) !important; }
/* Dark mode: Badge ve progress */
[data-theme="dark"] .topic-badge { box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
[data-theme="dark"] .progress { background: #2a3358 !important; }
/* Dark mode: Tüm var(--cream) referansları */
[data-theme="dark"] [style*="color: var(--cream)"] { color: #f0ece8 !important; }
/* Dark mode: Zoom controls */
[data-theme="dark"] .zoom-btn { background: var(--card2) !important; color: var(--text) !important; border-color: rgba(255,255,255,0.1) !important; }
/* Dark mode: Score card ve sonuç ekranları */
[data-theme="dark"] .score-card { background: var(--card) !important; }
/* Dark mode: Quiz seçenekleri */
[data-theme="dark"] [style*="background: rgba(0,0,0,0.03)"] { background: rgba(255,255,255,0.05) !important; }
/* ══════════ COĞRAFYA DARK MODE — KAPSAMLI FIX ══════════ */
/* Harita alanı arka plan */
[data-theme="dark"] #cografya-native-wrapper .map-area {
background: #1a1f35 !important;
border-color: rgba(255,255,255,0.08) !important;
box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
}
/* İl şekilleri — genel */
[data-theme="dark"] #cografya-native-wrapper .cp {
fill: #252d45 !important;
stroke: rgba(255,255,255,0.15) !important;
stroke-width: 0.5 !important;
}
/* İl şekilleri — hover */
[data-theme="dark"] #cografya-native-wrapper .cp:hover {
fill: #2d3655 !important;
stroke: rgba(255,255,255,0.25) !important;
}
/* İl şekilleri — vurgulu (highlight) */
[data-theme="dark"] #cografya-native-wrapper .cp.highlight {
stroke: rgba(255,255,255,0.4) !important;
stroke-width: 1 !important;
}
/* Şehir etiketleri */
[data-theme="dark"] #cografya-native-wrapper text,
[data-theme="dark"] #cografya-native-wrapper .city-label {
fill: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] #cografya-native-wrapper .city-dot {
fill: rgba(255,255,255,0.5) !important;
stroke: rgba(255,255,255,0.2) !important;
}
/* Büyük şehir etiketleri daha parlak */
[data-theme="dark"] #cografya-native-wrapper text[font-size="9"],
[data-theme="dark"] #cografya-native-wrapper text[font-size="10"],
[data-theme="dark"] #cografya-native-wrapper text[font-size="11"],
[data-theme="dark"] #cografya-native-wrapper text[font-size="12"] {
fill: rgba(255,255,255,0.85) !important;
}
/* Şehir etiket arka planı (rect) */
[data-theme="dark"] #cografya-native-wrapper .label-bg {
fill: rgba(26,31,53,0.8) !important;
stroke: rgba(255,255,255,0.1) !important;
}
/* Mode bar (Öğren / Test Et) */
[data-theme="dark"] #cografya-native-wrapper .mode-bar {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(255,255,255,0.08) !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.2) !important;
}
[data-theme="dark"] #cografya-native-wrapper .mode-btn {
color: rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] #cografya-native-wrapper .mode-btn.active-learn,
[data-theme="dark"] #cografya-native-wrapper .mode-btn.active-test {
color: #fff !important;
}
/* Topic header bar (Ekonomik Coğrafya > Tahıllar) */
[data-theme="dark"] #cografya-native-wrapper .map-topic-header,
[data-theme="dark"] .map-topic-header {
background: linear-gradient(135deg, rgba(30,39,70,0.96) 0%, rgba(26,26,46,0.94) 100%) !important;
border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .map-topic-header .mth-sep {
color: rgba(255,255,255,0.3) !important;
}
[data-theme="dark"] .map-topic-header .mth-name {
color: #e8e6e3 !important;
}
[data-theme="dark"] .map-topic-header .mth-count {
background: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.7) !important;
}
/* Kategori kartları */
[data-theme="dark"] #cografya-native-wrapper .cat-card {
background: var(--card) !important;
border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] #cografya-native-wrapper .cat-header {
border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] #cografya-native-wrapper .cat-icon {
background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] #cografya-native-wrapper .cat-count {
background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] #cografya-native-wrapper .cat-arrow {
color: rgba(255,255,255,0.4) !important;
}
/* Topic butonları */
[data-theme="dark"] #cografya-native-wrapper .topic-btn {
background: var(--card2) !important;
border-color: rgba(255,255,255,0.08) !important;
color: var(--text) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}
[data-theme="dark"] #cografya-native-wrapper .topic-btn:hover {
background: rgba(212,105,78,0.12) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
}
/* Learn panel */
[data-theme="dark"] #cografya-native-wrapper .learn-panel {
background: var(--card) !important;
border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] #cografya-native-wrapper .info-text {
background: var(--card2) !important;
border-bottom-color: rgba(255,255,255,0.06) !important;
color: var(--text2) !important;
}
/* Learn items */
[data-theme="dark"] #cografya-native-wrapper .learn-item {
background: var(--card2) !important;
border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] #cografya-native-wrapper .learn-item:hover {
border-color: rgba(212,105,78,0.4) !important;
}
[data-theme="dark"] #cografya-native-wrapper .learn-icon {
background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] #cografya-native-wrapper .learn-name {
color: var(--text) !important;
}
/* Learn hint box */
[data-theme="dark"] #cografya-native-wrapper .learn-hint-box {
background: rgba(60,80,140,0.15) !important;
border-color: rgba(100,150,220,0.2) !important;
border-left-color: rgba(80,130,200,0.5) !important;
color: var(--text2) !important;
}
/* Learn cities chips */
[data-theme="dark"] #cografya-native-wrapper .city-chip {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(255,255,255,0.08) !important;
color: var(--text2) !important;
}
[data-theme="dark"] #cografya-native-wrapper .city-chip:hover {
background: rgba(255,255,255,0.1) !important;
}
/* Test section — product chips (sürükle-bırak) */
[data-theme="dark"] #cografya-native-wrapper .product-chip {
background: var(--card2) !important;
border-color: rgba(255,255,255,0.1) !important;
color: var(--text) !important;
box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}
[data-theme="dark"] #cografya-native-wrapper .product-chip:hover {
border-color: rgba(212,105,78,0.4) !important;
}
[data-theme="dark"] #cografya-native-wrapper .product-chip.placed {
background: rgba(91,168,140,0.15) !important;
border-color: rgba(91,168,140,0.3) !important;
}
[data-theme="dark"] #cografya-native-wrapper .product-chip.wrong {
background: rgba(217,85,85,0.15) !important;
border-color: rgba(217,85,85,0.3) !important;
}
/* Test buttons bar */
[data-theme="dark"] #cografya-native-wrapper #testButtons .btn-primary {
box-shadow: 0 3px 12px rgba(212,105,78,.25) !important;
}
/* Score card */
[data-theme="dark"] #cografya-native-wrapper .score-card {
background: var(--card) !important;
border-color: rgba(255,255,255,0.08) !important;
box-shadow: 0 12px 40px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] #cografya-native-wrapper .score-card .sc-title {
color: #e8e6e3 !important;
}
[data-theme="dark"] #cografya-native-wrapper .score-card .sc-badge {
color: #e8e6e3 !important;
}
/* Hero section */
[data-theme="dark"] #cografya-native-wrapper .hero-section {
background: linear-gradient(135deg, #1e2746 0%, #232b48 100%) !important;
}
[data-theme="dark"] #cografya-native-wrapper .hero-section::before {
opacity: 0.03 !important;
}
[data-theme="dark"] #cografya-native-wrapper .hero-section h2 {
color: #e8e6e3 !important;
}
/* Flash card (quiz kartları) */
[data-theme="dark"] #cografya-native-wrapper .flash-card {
background: var(--card) !important;
border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] #cografya-native-wrapper .flash-card * {
color: var(--text) !important;
}
[data-theme="dark"] #cografya-native-wrapper .flash-inner .flash-back {
background: linear-gradient(160deg, #1a3a2e 0%, #1e3328 100%) !important;
}
/* Exam container */
[data-theme="dark"] #cografya-native-wrapper .exam-setup {
background: var(--card) !important;
border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] #cografya-native-wrapper .exam-setup h2 {
color: #e8e6e3 !important;
}
[data-theme="dark"] #cografya-native-wrapper .exam-setup-label {
color: var(--text2) !important;
}
[data-theme="dark"] #cografya-native-wrapper .exam-setup-opt {
background: var(--card2) !important;
border-color: rgba(255,255,255,0.08) !important;
color: var(--text) !important;
}
[data-theme="dark"] #cografya-native-wrapper .exam-setup-opt.active {
border-color: var(--accent) !important;
color: var(--accent) !important;
}
/* Progress pills */
[data-theme="dark"] #cografya-native-wrapper .progress-pill {
background: rgba(255,255,255,0.06) !important;
color: var(--text2) !important;
}
/* Zoom butonları */
[data-theme="dark"] #cografya-native-wrapper .zoom-btn {
background: rgba(30,39,70,0.9) !important;
border-color: rgba(255,255,255,0.1) !important;
color: #e8e6e3 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] #cografya-native-wrapper .zoom-btn:hover {
background: rgba(40,50,85,0.95) !important;
}
[data-theme="dark"] #cografya-native-wrapper .zoom-level {
color: rgba(255,255,255,0.5) !important;
}
/* SVG pin markers dark mode */
[data-theme="dark"] #cografya-native-wrapper .hl-pin circle {
stroke: rgba(255,255,255,0.3) !important;
}
/* Water features overlay */
[data-theme="dark"] #cografya-native-wrapper .water-overlay {
opacity: 0.85;
}
/* Genel container arka planı */
[data-theme="dark"] #cografya-native-wrapper {
background: var(--bg) !important;
}
/* İnline style override — haritada set edilen arka planlar */
[data-theme="dark"] #cografya-native-wrapper [style*="background: #F4EFE9"],
[data-theme="dark"] #cografya-native-wrapper [style*="background:#F4EFE9"],
[data-theme="dark"] #cografya-native-wrapper [style*="background: #F9F6F2"],
[data-theme="dark"] #cografya-native-wrapper [style*="background:#F9F6F2"],
[data-theme="dark"] #cografya-native-wrapper [style*="background: #FAF7F3"],
[data-theme="dark"] #cografya-native-wrapper [style*="background:#FAF7F3"],
[data-theme="dark"] #cografya-native-wrapper [style*="background: rgb(244"],
[data-theme="dark"] #cografya-native-wrapper [style*="background: rgb(249"],
[data-theme="dark"] #cografya-native-wrapper [style*="background: rgb(250"] {
background: #1a1f35 !important;
}
/* İnline text color override */
[data-theme="dark"] #cografya-native-wrapper [style*="color: #333"],
[data-theme="dark"] #cografya-native-wrapper [style*="color:#333"],
[data-theme="dark"] #cografya-native-wrapper [style*="color: #222"],
[data-theme="dark"] #cografya-native-wrapper [style*="color:#222"],
[data-theme="dark"] #cografya-native-wrapper [style*="color: #28251F"],
[data-theme="dark"] #cografya-native-wrapper [style*="color:#28251F"],
[data-theme="dark"] #cografya-native-wrapper [style*="color: #32302B"],
[data-theme="dark"] #cografya-native-wrapper [style*="color:#32302B"] {
color: #e8e6e3 !important;
}
/* İnline border override */
[data-theme="dark"] #cografya-native-wrapper [style*="border: 1px solid rgba(200,180,160"],
[data-theme="dark"] #cografya-native-wrapper [style*="border:1px solid rgba(200,180,160"],
[data-theme="dark"] #cografya-native-wrapper [style*="border-bottom: 1px solid rgba(200,180,160"],
[data-theme="dark"] #cografya-native-wrapper [style*="border-color: rgba(200,180,160"] {
border-color: rgba(255,255,255,0.08) !important;
}
/* ══════════ END COĞRAFYA DARK MODE ══════════ */
[data-theme="dark"] [style*="background:rgba(0,0,0,0.03)"] { background: rgba(255,255,255,0.05) !important; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--bg: #1a1a2e; --bg2: #16213e; --card: #1e2746; --card2: #232b48; --card3: #2a3358;
--border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.1);
--text: #e8e6e3; --text2: #b8b4af; --text3: #a09b96; --text4: #8a8580;
--navy: #f0ece8; --slate: #a09890; --cream: #f0ece8;
}
html:not([data-theme="light"]) .ex-card-front { background: linear-gradient(160deg, #1e2746, #232b48) !important; border-color: rgba(255,255,255,0.1) !important; }
html:not([data-theme="light"]) .ex-card-back { background: linear-gradient(160deg, #1a3a2e, #1e3328) !important; }
html:not([data-theme="light"]) .ex-card-front *, html:not([data-theme="light"]) .ex-card-back * { color: #e8e6e3 !important; }
html:not([data-theme="light"]) .nav { background: rgba(26,26,46,0.92) !important; }
html:not([data-theme="light"]) .card { background: var(--card) !important; border-color: rgba(255,255,255,0.06) !important; }
html:not([data-theme="light"]) body::before { opacity: 0.02 !important; }
html:not([data-theme="light"]) svg text { fill: #e8e6e3; }
html:not([data-theme="light"]) .map-label { fill: #e8e6e3 !important; }
html:not([data-theme="light"]) .geo-shape text { fill: #e8e6e3 !important; }
html:not([data-theme="light"]) #cografya-native-wrapper text { fill: #e8e6e3; }
html:not([data-theme="light"]) .topic-btn { background: var(--card2) !important; color: var(--text) !important; }
html:not([data-theme="light"]) .input, html:not([data-theme="light"]) .input-sm { background: var(--card2) !important; color: var(--text) !important; border-color: rgba(255,255,255,0.1) !important; }
/* Coğrafya otomatik dark mode */
html:not([data-theme="light"]) #cografya-native-wrapper .map-area { background: #1a1f35 !important; border-color: rgba(255,255,255,0.08) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .cp { fill: #252d45 !important; stroke: rgba(255,255,255,0.15) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .mode-bar { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.08) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .mode-btn { color: rgba(255,255,255,0.5) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .mode-btn.active-learn, html:not([data-theme="light"]) #cografya-native-wrapper .mode-btn.active-test { color: #fff !important; }
html:not([data-theme="light"]) .map-topic-header { background: linear-gradient(135deg, rgba(30,39,70,0.96), rgba(26,26,46,0.94)) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html:not([data-theme="light"]) .map-topic-header .mth-name { color: #e8e6e3 !important; }
html:not([data-theme="light"]) .map-topic-header .mth-count { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.7) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .learn-panel { background: var(--card) !important; border-color: rgba(255,255,255,0.06) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .learn-item { background: var(--card2) !important; border-color: rgba(255,255,255,0.06) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .learn-hint-box { background: rgba(60,80,140,0.15) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .cat-card { background: var(--card) !important; border-color: rgba(255,255,255,0.06) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .topic-btn { background: var(--card2) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--text) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .score-card { background: var(--card) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .flash-card { background: var(--card) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper .product-chip { background: var(--card2) !important; border-color: rgba(255,255,255,0.1) !important; color: var(--text) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper { background: var(--bg) !important; }
html:not([data-theme="light"]) #cografya-native-wrapper [style*="background: #F4EFE9"], html:not([data-theme="light"]) #cografya-native-wrapper [style*="background:#F4EFE9"] { background: #1a1f35 !important; }
html:not([data-theme="light"]) .progress { background: #2a3358 !important; }
}
body {
font-family: 'DM Sans', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 0.9375rem;
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden
}
#app { contain: layout style; }
/* ===== READABILITY IMPROVEMENTS ===== */
.card, .card-sm {
line-height: 1.55;
}
.badge {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2px;
}
.label {
font-size: 0.75rem;
font-weight: 700;
}
p, li, td, th, span, div {
text-rendering: optimizeLegibility;
}
/* Global font-size bumps: küçük fontları okunabilir yap */
#app [style*="font-size: 0.625rem"]:not(svg *) { font-size: 0.75rem !important; line-height: 1.45 !important; }
#app [style*="font-size: 0.6875rem"]:not(svg *) { font-size: 0.75rem !important; line-height: 1.45 !important; }
#app [style*="font-size: 0.625rem"]:not(svg *) { font-size: 0.75rem !important; line-height: 1.45 !important; }
#app [style*="font-size: 0.6875rem"]:not(svg *) { font-size: 0.75rem !important; line-height: 1.45 !important; }
#app [style*="font-size: 0.75rem"]:not(svg *) { font-size: 0.8125rem !important; }
#app [style*="font-size: 0.75rem"]:not(svg *) { font-size: 0.8125rem !important; }
/* Badge içinde küçük font kabul edilebilir */
#app .badge[style*="font-size"] { font-size: 0.6875rem !important; line-height: 1.3 !important; }
/* Nav label'lar okunabilir */
.nav-btn .nav-label { font-size: inherit; }
/* Premium grain texture */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: .5;
}
#app { position: relative; z-index: 1; }
::selection {
background: #D4694E40
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none
}
input[type=number] {
-moz-appearance: textfield
}
button {
font-family: inherit;
cursor: pointer
}
::-webkit-scrollbar {
width: 4px
}
::-webkit-scrollbar-track {
background: transparent
}
::-webkit-scrollbar-thumb {
background: #C8B8A850;
border-radius: 4px
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px
}
.nav {
background: rgba(255,255,255,0.88);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border-bottom: 1px solid rgba(192,174,156,.22);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 0 rgba(192,174,156,.18), 0 2px 12px rgba(0,0,0,.05)
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 58px;
padding: 0 20px
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer
}
.nav-logo img {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: cover
}
.nav-logo-text {
display: flex;
flex-direction: column
}
.nav-logo-text span:first-child {
color: var(--cream);
font-weight: 800;
font-size: 0.9375rem;
letter-spacing: -0.4px;
line-height: 1.1;
font-family: 'Sora', system-ui, sans-serif
}
.nav-logo-text span:last-child {
color: var(--slate);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: .9
}
.nav-links {
display: flex;
gap: 2px;
background: rgba(0,0,0,.05);
border-radius: 13px;
padding: 3px
}
.nav-btn {
background: transparent;
color: var(--text3);
border: none;
border-radius: 10px;
padding: 8px 14px;
font-weight: 600;
font-size: 0.8125rem;
transition: all .2s cubic-bezier(.4,0,.2,1);
display: flex;
align-items: center;
gap: 5px;
letter-spacing: -.1px;
min-height: 36px;
white-space: nowrap;
position: relative
}
.nav-btn.active {
background: var(--accent);
color: #fff;
box-shadow: 0 2px 8px rgba(212,105,78,.35)
}
.nav-btn:hover:not(.active) {
color: var(--text2);
background: rgba(0,0,0,.06)
}
.nav-btn.guest-locked {
opacity: 0.45
}
.nav-lock-badge {
position: absolute;
top: -2px;
right: -2px;
font-size: 8px;
line-height: 1;
pointer-events: none
}
.bottom-nav-btn.guest-locked {
opacity: 0.45
}
.bottom-nav-btn .nav-lock-badge {
position: absolute;
top: 2px;
right: 2px;
font-size: 7px;
pointer-events: none
}
.nav-user {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--accent), var(--accent3));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: 0.8125rem
}
@media(max-width:540px) {
.nav-label {
display: none
}
.nav-btn {
padding: 8px 10px
}
}
.card {
background: var(--card);
border-radius: var(--radius-lg);
padding: 22px;
border: 1px solid rgba(192,174,156,.25);
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: var(--shadow-sm)
}
.card-sm {
background: var(--card);
border-radius: var(--radius-md);
padding: 16px;
border: 1px solid rgba(192,174,156,.22);
box-shadow: 0 1px 6px rgba(0,0,0,.04)
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(192,174,156,.4)
}
.btn {
padding: 11px 24px;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 0.8125rem;
border: none;
transition: all .2s cubic-bezier(.4,0,.2,1);
letter-spacing: -.15px;
font-family: inherit
}
.btn-primary {
background: linear-gradient(145deg, var(--accent), var(--accent3));
color: #fff;
box-shadow: var(--shadow-accent)
}
.btn-primary:hover {
background: linear-gradient(145deg, var(--accent2), var(--accent3));
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(212,105,78,.36)
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-accent)
}
.btn-success {
background: linear-gradient(145deg, var(--success), #3D8A6E);
color: #fff;
box-shadow: 0 4px 14px rgba(72,150,122,.28)
}
.btn-outline {
background: transparent;
color: var(--accent);
border: 1.5px solid var(--accent)
}
.btn-outline:hover {
background: rgba(212,105,78,.06)
}
.btn-ghost {
background: var(--card2);
color: var(--text);
border: 1px solid rgba(192,174,156,.3);
font-weight: 600
}
.btn-ghost:hover {
background: var(--bg2);
border-color: rgba(192,174,156,.5)
}
.btn:disabled {
opacity: .45;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important
}
/* Focus-visible: keyboard kullanıcıları için erişilebilir focus ring */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn:focus-visible, .nav-btn:focus-visible, .topic-btn:focus-visible, .sub-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
.input:focus-visible, .input-sm:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.btn-full {
width: 100%;
padding: 14px
}
.input {
background: var(--card2);
border: 1.5px solid #E0D8D0;
border-radius: 12px;
padding: 14px 18px;
color: var(--text);
font-size: 0.875rem;
outline: none;
font-family: inherit;
width: 100%;
transition: border .25s, box-shadow .25s
}
.input::-ms-reveal,
.input::-ms-clear { display: none; }
.input::-webkit-credentials-auto-fill-button { display: none !important; }
.input:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring)
}
.input-sm {
background: var(--card2);
border-radius: 10px;
padding: 12px;
color: var(--text);
font-size: 1rem;
outline: none;
font-family: inherit;
text-align: center;
font-weight: 700;
width: 100%;
border: 1.5px solid #E0D8D0;
transition: border .25s, box-shadow .25s
}
.input-sm:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring)
}
.progress {
width: 100%;
border-radius: 10px;
overflow: hidden;
background: var(--card3)
}
.pbar {
height: 100%;
border-radius: 10px;
transition: width .7s cubic-bezier(.4, 0, .2, 1)
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: .1px
}
.topic-btn {
width: 100%;
text-align: left;
border-radius: 10px;
padding: 12px 16px;
font-size: 0.8125rem;
font-weight: 600;
font-family: inherit;
transition: all .2s;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
min-height: 44px
}
.sub-btn {
border-radius: 8px;
padding: 10px 14px;
font-size: 0.8125rem;
font-weight: 500;
font-family: inherit;
transition: all .15s;
cursor: pointer;
min-height: 40px
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px)
}
to {
opacity: 1;
transform: none
}
}
/* ===== PAGE TRANSITIONS ===== */
@keyframes pageIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.page-transition { animation: pageIn .35s cubic-bezier(.4,0,.2,1); }
/* ===== SKELETON SCREEN ===== */
@keyframes shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 50%, var(--card2) 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
/* ===== GAMIFICATION BADGES ===== */
.badge-earned {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 20px;
font-size: 0.6875rem; font-weight: 700;
background: linear-gradient(135deg, #FFD70020, #FFA50020);
border: 1px solid #FFD70040;
color: #B8860B;
}
[data-theme="dark"] .badge-earned { color: #FFD700; }
.streak-fire { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 800; color: #FF6B35; }
.level-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 12px;
font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.5px;
}
.level-bronze { background: #CD7F3220; color: #CD7F32; border: 1px solid #CD7F3240; }
.level-silver { background: #C0C0C020; color: #6B6B6B; border: 1px solid #C0C0C040; }
.level-gold { background: #FFD70020; color: #B8860B; border: 1px solid #FFD70040; }
.level-platin { background: #E5E4E220; color: #6C63FF; border: 1px solid #E5E4E240; }
/* ===== HEAT MAP ===== */
.heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.heatmap-cell {
aspect-ratio: 1; border-radius: 3px;
background: var(--card3); transition: background .2s;
}
.heatmap-cell[data-level="1"] { background: #48967A40; }
.heatmap-cell[data-level="2"] { background: #48967A80; }
.heatmap-cell[data-level="3"] { background: #48967ABB; }
.heatmap-cell[data-level="4"] { background: #48967A; }
/* ===== RADAR CHART ===== */
.radar-svg { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
/* ===== DARK MODE TOGGLE ===== */
.theme-toggle {
width: 36px; height: 36px; border-radius: 10px;
border: none; background: var(--card3); cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; transition: all .2s; color: var(--text2);
}
.theme-toggle:hover { background: var(--accent); color: #fff; }
/* Skip-to-content: Klavye erişilebilirliği */
.skip-link {
position: fixed; top: -100px; left: 16px; z-index: 9999;
background: var(--accent); color: #fff; padding: 12px 24px;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
font-weight: 700; font-size: 0.8125rem; text-decoration: none;
transition: top .2s ease;
}
.skip-link:focus { top: 0; }
.fade-up {
animation: fadeUp .4s ease
}
.label {
color: var(--text3);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px
}
.stat-val {
font-size: 2.125rem;
font-weight: 900;
letter-spacing: -1.5px;
line-height: 1;
font-family: 'Sora', system-ui, sans-serif
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px
}
@media(max-width:500px) {
.grid-3 {
grid-template-columns: 1fr 1fr
}
}
.countdown-box {
background: linear-gradient(135deg, rgba(212,105,78,.06), rgba(72,150,122,.06));
border: 1px solid rgba(192,174,156,.28);
border-radius: var(--radius-md);
padding: 16px;
text-align: center;
margin-bottom: 16px;
box-shadow: var(--shadow-sm)
}
.cd-num {
display: inline-flex;
flex-direction: column;
align-items: center;
margin: 0 8px
}
.cd-num strong {
font-size: 1.875rem;
font-weight: 900;
color: var(--cream);
letter-spacing: -1.5px;
font-family: 'Sora', system-ui, sans-serif
}
.cd-num span {
font-size: 0.6875rem;
color: var(--text3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px
}
.section-tab {
padding: 9px 18px;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 700;
border: none;
font-family: inherit;
transition: all .2s;
background: var(--card3);
color: var(--text3);
min-height: 40px
}
.section-tab.active {
background: var(--accent);
color: #fff
}
/* Exercise animations */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.ex-card-container {
perspective: 1000px;
cursor: pointer
}
.ex-card-inner {
position: relative;
width: 100%;
min-height: 220px;
transition: transform .6s cubic-bezier(.4, .2, .2, 1);
transform-style: preserve-3d;
will-change: transform
}
.ex-card-inner.flipped {
transform: rotateY(180deg)
}
.ex-card-face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 24px;
box-sizing: border-box
}
.ex-card-front {
background: linear-gradient(160deg, #FFFFFF 0%, #FAF7F3 100%);
border: 1px solid rgba(192,174,156,.3);
box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.8)
}
.ex-card-back {
background: linear-gradient(160deg, #E8F5F0 0%, #D8EFE6 100%);
border: 1px solid rgba(72,150,122,.25);
transform: rotateY(180deg);
box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6)
}
.ex-shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
animation: shine 3s infinite;
pointer-events: none
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(25deg)
}
100% {
transform: translateX(100%) rotate(25deg)
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes popIn {
0% {
opacity: 0;
transform: scale(.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.ex-animate {
animation: slideUp .4s ease-out
}
.ex-pop {
animation: popIn .3s ease-out
}
.nav-ico {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center
}
.nav-ico svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}
#cografya-native-wrapper .geo-shape-path {
transition: opacity 0.4s ease;
pointer-events: none;
}
#cografya-native-wrapper .geo-shape-path.river {
stroke-linecap: round;
stroke-linejoin: round;
}
#cografya-native-wrapper .geo-shape-path.mountain {
stroke-dasharray: none;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}
#cografya-native-wrapper .city-callout line {
pointer-events: none;
transition: opacity 0.3s;
}
#cografya-native-wrapper .city-callout rect {
transition: all 0.3s;
}
#cografya-native-wrapper .city-callout:hover rect {
fill: #fff;
stroke-width: 1;
}
#cografya-native-wrapper .city-callout text {
pointer-events: none;
}
/* FIX: Harita overflow — SVG glow/filter efektleri görünsün */
#cografya-native-wrapper .map-inner {
overflow: visible !important;
}
#cografya-native-wrapper svg.map-svg {
overflow: visible !important;
}
/* ═══════ AI SORU ÜRETİCİ MODULE ═══════ */
.ai-ders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px;margin-bottom:18px}
.ai-ders-card{padding:14px 8px;border-radius:12px;background:var(--card);border:2px solid transparent;cursor:pointer;text-align:center;transition:all .2s;box-shadow:var(--shadow-sm)}
.ai-ders-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ai-ders-card.selected{border-color:currentColor;background:rgba(212,105,78,.05)}
.ai-konu-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:background .15s}
.ai-konu-item:hover{background:var(--card2)}
.ai-konu-check{width:20px;height:20px;border-radius:6px;border:2px solid var(--text4);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;font-size: 0.6875rem}
.ai-konu-check.checked{background:var(--accent);border-color:var(--accent);color:#fff}
.ai-konu-wrapper{border-radius:10px;transition:background .15s;margin-bottom:1px}
.ai-konu-wrapper.expanded{background:var(--card2)}
.ai-alt-list{padding:0 12px 8px 42px;display:flex;flex-wrap:wrap;gap:5px}
.ai-alt-tag{font-size: 0.625rem;color:var(--text3);background:var(--bg);padding:3px 9px;border-radius:8px;border:1px solid rgba(192,174,156,.15);white-space:nowrap}
.ai-expand-arrow{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size: 0.625rem;color:var(--text4);transition:transform .2s;flex-shrink:0}
.ai-expand-arrow.open{transform:rotate(180deg)}
.ai-opt-group{display:flex;gap:6px;margin-bottom:14px}
.ai-opt-btn{flex:1;padding:10px 6px;border-radius:10px;background:var(--card);border:1.5px solid rgba(192,174,156,.2);font-weight:600;font-size: 0.75rem;color:var(--text2);cursor:pointer;transition:all .2s;text-align:center;font-family:inherit}
.ai-opt-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 10px rgba(212,105,78,.25)}
.ai-exam-topbar{position:sticky;top:0;z-index:50;background:rgba(244,239,233,.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(192,174,156,.2);padding:10px 16px;display:flex;align-items:center;gap:10px}
[data-theme="dark"] .ai-exam-topbar{background:rgba(26,26,46,.95)}
.ai-exam-timer{font-family:'Sora',monospace;font-weight:700;font-size: 0.8125rem;color:var(--accent)}
.ai-exam-pbar{flex:1;height:4px;background:var(--bg2);border-radius:4px;overflow:hidden}
.ai-exam-pbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width .3s;border-radius:4px}
.ai-q-card{background:var(--card);border-radius:16px;padding:22px 18px;margin:14px 0;box-shadow:var(--shadow-sm);border:1px solid rgba(192,174,156,.15)}
.ai-q-text{font-size: 0.9062rem;line-height:1.75;color:var(--text);margin-bottom:18px;font-weight:500;white-space:pre-line}
.ai-choice{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:12px;border:1.5px solid rgba(192,174,156,.2);margin-bottom:8px;cursor:pointer;transition:all .2s;background:var(--card)}
.ai-choice:hover{background:var(--card2);border-color:rgba(192,174,156,.35)}
.ai-choice.selected{border-color:var(--accent);background:rgba(212,105,78,.06)}
.ai-choice.correct{border-color:var(--success);background:rgba(72,150,122,.08)}
.ai-choice.wrong{border-color:var(--danger);background:rgba(201,72,72,.08)}
.ai-choice-ltr{width:28px;height:28px;border-radius:8px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size: 0.75rem;flex-shrink:0;color:var(--text2);transition:all .2s}
.ai-choice.selected .ai-choice-ltr{background:var(--accent);color:#fff}
.ai-choice.correct .ai-choice-ltr{background:var(--success);color:#fff}
.ai-choice.wrong .ai-choice-ltr{background:var(--danger);color:#fff}
.ai-explanation{margin:14px 0;padding:14px;border-radius:12px;font-size: 0.8125rem;line-height:1.65;color:var(--text)}
.ai-explanation.ok{background:rgba(72,150,122,.08);border-left:3px solid var(--success)}
.ai-explanation.fail{background:rgba(201,72,72,.08);border-left:3px solid var(--danger)}
.ai-nav-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;padding:10px 16px}
.ai-nav-dot{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size: 0.6875rem;font-weight:700;cursor:pointer;border:1.5px solid rgba(192,174,156,.2);background:var(--card);color:var(--text3);transition:all .2s}
.ai-nav-dot.cur{border-color:var(--accent);color:var(--accent);background:rgba(212,105,78,.06)}
.ai-nav-dot.ok{background:var(--success);color:#fff;border-color:var(--success)}
.ai-nav-dot.nok{background:var(--danger);color:#fff;border-color:var(--danger)}
.ai-result-score{text-align:center;padding:36px 20px;animation:aiReveal .6s cubic-bezier(.4,0,.2,1)}
@keyframes aiReveal{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.ai-spinner{width:44px;height:44px;border:4px solid var(--bg2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 18px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ═══════════ COGRAFYA-SCOPED ═══════════ */
/* MOVED TO : @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap'); */
#cografya-native-wrapper {
--bg: #f6f0ea;
--bg2: #ede5da;
--card: #FFFFFF;
--card2: #faf7f3;
--card3: #f2ebe2;
--border: rgba(0,0,0,0.08);
--border2: #c8b4a022;
--text: #2e2b26;
--text2: #635d56;
--text3: #928c85;
--text4: #c0bab3;
--accent: #c86048;
--accent2: #bc5540;
--accent3: #b04a37;
--success: #48967a;
--warn: #d4963a;
--danger: #c94848;
--info: #4a7faa;
--navy: #312e28;
--slate: #82766d;
}
#cografya-native-wrapper {
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden
}
/* HEADER */
#cografya-native-wrapper .app-header {
background: #fff;
border-bottom: 1px solid #e8ddd2;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 8px rgba(0, 0, 0, .06)
}
#cografya-native-wrapper .header-inner {
max-width: 960px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 58px;
padding: 0 24px
}
#cografya-native-wrapper .header-title {
display: flex;
align-items: center;
gap: 14px
}
#cografya-native-wrapper .header-title .header-logo {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #c96b4f, #b35438);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.0625rem;
box-shadow: 0 3px 10px rgba(201, 107, 79, .3);
border: none
}
#cografya-native-wrapper .header-title-text h1 {
font-family: 'Playfair Display', serif;
font-size: 1.0625rem;
font-weight: 700;
color: #3b3330;
letter-spacing: 0.2px;
line-height: 1.2
}
#cografya-native-wrapper .header-title-text p {
font-size: 0.625rem;
font-weight: 600;
color: #9B9490;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 2px
}
#cografya-native-wrapper .back-btn {
background: #f5ebe0;
border: 1px solid #e3d5c7;
color: #5c4033;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .25s
}
#cografya-native-wrapper .back-btn:hover {
background: #edddd0;
border-color: #d4c0ad;
color: #3e2a1e
}
/* CONTAINER */
#cografya-native-wrapper .cografya-container {
max-width: 960px;
margin: 0 auto;
padding: 16px 20px
}
/* TOPIC SELECTOR */
#cografya-native-wrapper .section-label {
font-family: 'Playfair Display', serif;
font-size: 0.8125rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.3px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px
}
#cografya-native-wrapper .section-label::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--border2), transparent);
margin-left: 4px
}
#cografya-native-wrapper .topic-grid {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px
}
#cografya-native-wrapper .cat-card {
background: var(--card);
border-radius: 16px;
border: 1px solid rgba(200,180,160,.22);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03);
transition: box-shadow .25s, border-color .25s
}
#cografya-native-wrapper .cat-card:hover {
box-shadow: 0 4px 18px rgba(0,0,0,.08);
border-color: rgba(200,180,160,.38)
}
#cografya-native-wrapper .cat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
user-select: none;
transition: background .15s
}
#cografya-native-wrapper .cat-header:hover {
background: var(--bg2)
}
#cografya-native-wrapper .cat-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.0625rem;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.12)
}
#cografya-native-wrapper .cat-title {
font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
font-size: 0.8438rem;
font-weight: 700;
letter-spacing: -.1px;
flex: 1
}
#cografya-native-wrapper .cat-count {
font-size: 0.625rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 12px;
opacity: 0.75
}
#cografya-native-wrapper .cat-arrow {
font-size: 0.875rem;
color: var(--text3);
transition: transform .3s cubic-bezier(.4,0,.2,1);
font-weight: 700
}
#cografya-native-wrapper .cat-card.open .cat-arrow {
transform: rotate(180deg)
}
#cografya-native-wrapper .cat-content {
max-height: 0;
overflow: hidden;
transition: max-height .4s cubic-bezier(.4,0,.2,1)
}
#cografya-native-wrapper .cat-card.open .cat-content {
max-height: 700px
}
#cografya-native-wrapper .cat-topics {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 4px 16px 16px
}
#cografya-native-wrapper .topic-btn {
padding: 7px 14px;
border-radius: 11px;
border: 1px solid rgba(200,180,160,.3);
background: var(--card2);
color: var(--text2);
font-size: 0.7188rem;
font-weight: 600;
cursor: pointer;
transition: all .2s cubic-bezier(.4,0,.2,1);
font-family: inherit;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,.04)
}
#cografya-native-wrapper .topic-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(200,96,72,.05);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(200,96,72,.12)
}
#cografya-native-wrapper .topic-btn.active {
color: #fff;
background: linear-gradient(145deg, var(--accent), var(--accent3));
border-color: transparent;
box-shadow: 0 4px 16px rgba(200,96,72,.35);
transform: translateY(-1px)
}
/* MODE BAR */
#cografya-native-wrapper .mode-bar {
display: flex;
gap: 0;
margin-bottom: 18px;
background: rgba(0,0,0,.05);
padding: 4px;
border-radius: 15px;
border: 1px solid rgba(200,180,160,.2);
box-shadow: inset 0 1px 3px rgba(0,0,0,.06)
}
#cografya-native-wrapper .mode-btn {
flex: 1;
padding: 11px 18px;
border-radius: 12px;
border: none;
background: transparent;
color: var(--text3);
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
transition: all .2s cubic-bezier(.4,0,.2,1);
font-family: inherit;
letter-spacing: -.1px
}
#cografya-native-wrapper .mode-btn.active-learn {
background: linear-gradient(145deg, var(--accent), var(--accent3));
color: #fff;
box-shadow: 0 3px 12px rgba(200,96,72,.3)
}
#cografya-native-wrapper .mode-btn.active-test {
background: linear-gradient(145deg, var(--accent), var(--accent3));
color: #fff;
box-shadow: 0 3px 12px rgba(200,96,72,.3)
}
/* MAP */
#cografya-native-wrapper .map-area {
position: relative;
background: var(--card2, #F9F6F2);
border-radius: 16px;
border: 1px solid var(--border2, rgba(200,180,160,.18));
overflow: hidden;
clip-path: inset(0 round 16px);
margin-bottom: 14px;
box-shadow: 0 4px 18px rgba(0,0,0,.06);
touch-action: pan-x pan-y
}
#cografya-native-wrapper .map-inner {
position: relative;
transform-origin: center center
}
#cografya-native-wrapper .map-svg {
width: 100%;
height: auto;
display: block
}
#cografya-native-wrapper .cp {
fill: var(--map-cp-fill, #EDE8E1) !important;
stroke: var(--map-cp-stroke, rgba(190,178,162,0.45));
stroke-width: 0.4;
transition: all .2s ease;
cursor: pointer
}
/* FIX: sofistike il kenar çizgisi */
#cografya-native-wrapper .cp:hover {
stroke-width: 1.5;
stroke: #334155;
filter: brightness(1.12)
}
#cografya-native-wrapper .cp.highlight {
fill: var(--topic-hl, var(--accent)) !important;
stroke: var(--topic-hl, var(--navy));
stroke-width: 2.5;
filter: brightness(1.1) saturate(1.2);
animation: pulse 1.5s ease-in-out infinite
}
#cografya-native-wrapper .cp.overview-hl {
fill: var(--overview-hl-fill, rgba(224,122,95,0.25)) !important;
transition: fill .3s ease
}
#cografya-native-wrapper .cp.correct {
fill: #5BA88C !important;
stroke: #fff;
stroke-width: 1.2;
transition: fill .3s ease
}
#cografya-native-wrapper .cp.wrong {
fill: #D95555 !important;
stroke: #fff;
stroke-width: 1.2;
transition: fill .3s ease
}
#cografya-native-wrapper .cp.hint {
fill: #FFD93D !important;
stroke: #fff;
stroke-width: 1.2;
transition: fill .3s ease
}
#cografya-native-wrapper .cp.placed {
filter: brightness(1.08);
stroke: var(--accent);
stroke-width: 1.5
}
@keyframes pulse {
0%,
100% {
stroke-width: 2
}
50% {
stroke-width: 3.5
}
}
/* TOOLTIP */
#cografya-native-wrapper #tooltip {
position: fixed;
background: var(--navy);
color: #fff;
padding: 5px 10px;
border-radius: 8px;
font-size: 0.6875rem;
font-weight: 700;
pointer-events: none;
display: none;
z-index: 999;
box-shadow: 0 4px 12px rgba(0, 0, 0, .2)
}
/* LEARN PANEL */
#cografya-native-wrapper .learn-panel {
background: var(--card);
border-radius: 16px;
border: 1px solid rgba(200,180,160,.22);
overflow: hidden;
margin-bottom: 14px;
box-shadow: 0 2px 10px rgba(0,0,0,.05)
}
#cografya-native-wrapper .info-text {
padding: 10px 18px;
font-size: 0.75rem;
color: var(--text3);
font-weight: 500;
background: var(--card2);
border-bottom: 1px solid rgba(200,180,160,.18)
}
#cografya-native-wrapper .learn-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px
}
#cografya-native-wrapper .learn-item {
display: flex;
flex-direction: column;
gap: 0;
cursor: pointer;
transition: all .2s cubic-bezier(.4,0,.2,1);
border-radius: 12px;
border: 1px solid rgba(200,180,160,.22);
background: var(--card2);
overflow: hidden
}
#cografya-native-wrapper .learn-item-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px
}
#cografya-native-wrapper .learn-item:hover {
border-color: var(--accent);
box-shadow: 0 2px 10px rgba(200,96,72,.1)
}
#cografya-native-wrapper .learn-item.active {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(200,96,72,.2)
}
#cografya-native-wrapper .learn-item.active .learn-item-header {
background: linear-gradient(145deg, var(--accent), var(--accent3))
}
#cografya-native-wrapper .learn-item.active .learn-name {
color: #fff
}
#cografya-native-wrapper .learn-item.active .learn-arrow {
color: rgba(255,255,255,.7)
}
#cografya-native-wrapper .learn-icon {
font-size: 1.125rem;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(0,0,0,.05);
display: flex;
align-items: center;
justify-content: center
}
#cografya-native-wrapper .learn-item.active .learn-icon {
background: rgba(255,255,255,.15)
}
#cografya-native-wrapper .learn-name {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text);
flex: 1;
letter-spacing: -.1px
}
#cografya-native-wrapper .learn-arrow {
font-size: 0.75rem;
color: var(--text4);
transition: transform .3s;
font-weight: 700
}
#cografya-native-wrapper .learn-item.active .learn-arrow {
transform: rotate(180deg)
}
#cografya-native-wrapper .learn-detail-panel {
display: none;
padding: 0 14px 14px;
animation: learnDetailSlide .25s ease
}
@keyframes learnDetailSlide {
from { opacity: 0; transform: translateY(-6px) }
to { opacity: 1; transform: none }
}
#cografya-native-wrapper .learn-item.active .learn-detail-panel {
display: block
}
#cografya-native-wrapper .learn-hint-box {
background: rgba(236,244,255,.7);
border: 1px solid rgba(100,150,220,.2);
border-left: 3px solid rgba(80,130,200,.5);
border-radius: 8px;
padding: 9px 12px;
margin-bottom: 10px;
font-size: 0.75rem;
color: var(--text2);
line-height: 1.65;
font-weight: 500
}
#cografya-native-wrapper .learn-cities-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px
}
#cografya-native-wrapper .learn-city-chip {
background: var(--card);
border: 1px solid rgba(200,180,160,.25);
border-radius: 9px;
padding: 8px 12px;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text)
}
#cografya-native-wrapper .learn-city-chip strong {
display: block;
color: var(--navy);
margin-bottom: 2px;
font-size: 0.75rem
}
#cografya-native-wrapper .learn-city-chip span {
color: var(--text3);
font-size: 0.6562rem;
font-weight: 500;
line-height: 1.4;
display: block
}
#cografya-native-wrapper .learn-cities {
display: none
}
#cografya-native-wrapper .learn-hint {
display: none
}
/* TEST PANEL */
#cografya-native-wrapper .test-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px
}
#cografya-native-wrapper .test-info {
font-size: 0.75rem;
font-weight: 600;
color: var(--text2)
}
#cografya-native-wrapper .products {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px;
background: var(--card);
border-radius: 14px;
border: 1px solid var(--border2);
margin-bottom: 12px;
min-height: 60px
}
#cografya-native-wrapper .product {
padding: 7px 12px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
cursor: grab;
user-select: none;
transition: all .2s;
border: 1.5px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}
#cografya-native-wrapper .product:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .2)
}
#cografya-native-wrapper .product.placed {
opacity: 0.4;
cursor: default
}
#cografya-native-wrapper .ghost {
position: fixed;
pointer-events: none;
z-index: 9999;
padding: 7px 12px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
transform: translate(-50%, -50%);
box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
}
#cografya-native-wrapper .dropped-item {
position: absolute;
transform: translate(-50%, -50%);
padding: 5px 10px;
border-radius: 8px;
font-size: 0.6875rem;
font-weight: 700;
cursor: grab;
z-index: 10;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}
/* BUTTONS */
#cografya-native-wrapper .btn-row {
display: flex;
gap: 8px;
margin-bottom: 14px
}
#cografya-native-wrapper .btn {
padding: 10px 20px;
border-radius: 12px;
border: none;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .2s
}
#cografya-native-wrapper .btn-primary {
background: var(--accent);
color: #fff;
box-shadow: 0 4px 12px rgba(224, 122, 95, .3)
}
#cografya-native-wrapper .btn-primary:hover {
background: var(--accent2);
transform: translateY(-1px)
}
#cografya-native-wrapper .btn-primary:disabled {
opacity: 0.5;
cursor: default;
transform: none
}
#cografya-native-wrapper .btn-secondary {
background: var(--card);
color: var(--text2);
border: 1px solid var(--border2)
}
#cografya-native-wrapper .btn-secondary:hover {
background: var(--bg2)
}
/* SCORE CARD */
#cografya-native-wrapper .score-card {
display: none;
background: var(--card);
border-radius: 18px;
border: 1px solid rgba(200,180,160,.2);
padding: 24px 20px 20px;
margin-bottom: 14px;
text-align: center;
box-shadow: var(--shadow-md);
animation: scoreReveal .4s cubic-bezier(.34,1.56,.64,1)
}
@keyframes scoreReveal { from { opacity:0; transform: scale(.94) translateY(8px) } to { opacity:1; transform: none } }
#cografya-native-wrapper .score-card.show {
display: block
}
#cografya-native-wrapper .score-big {
font-family: 'Sora', system-ui, sans-serif;
font-size: 3.25rem;
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 6px;
line-height: 1
}
#cografya-native-wrapper .score-msg {
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: 0.3px
}
#cografya-native-wrapper .score-card.good {
border-color: rgba(72,150,122,.25);
background: linear-gradient(145deg, #EDF7F3, #FAFDF9)
}
#cografya-native-wrapper .score-card.mid {
border-color: rgba(212,150,58,.25);
background: linear-gradient(145deg, #FDF8EE, #FDFAF5)
}
#cografya-native-wrapper .score-card.bad {
border-color: rgba(201,72,72,.25);
background: linear-gradient(145deg, #FDF2F2, #FDFAFA)
}
/* ANSWER LIST */
#cografya-native-wrapper .answers {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 300px;
overflow-y: auto;
text-align: left
}
#cografya-native-wrapper .answer-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
font-size: 0.75rem;
transition: transform .15s
}
#cografya-native-wrapper .answer-row.correct {
background: rgba(72,150,122,.07);
border: 1px solid rgba(72,150,122,.22)
}
#cografya-native-wrapper .answer-row.wrong {
background: rgba(201,72,72,.06);
border: 1px solid rgba(201,72,72,.22)
}
/* ZOOM */
#cografya-native-wrapper .zoom-controls {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 10
}
#cografya-native-wrapper .zoom-btn {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--border2);
background: #FFFFFFCC;
backdrop-filter: blur(8px);
color: var(--text);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s
}
#cografya-native-wrapper .zoom-btn:hover {
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}
/* MAP LABEL */
#cografya-native-wrapper .map-label {
opacity: 0;
transition: opacity .3s;
pointer-events: none
}
#cografya-native-wrapper .map-label.show {
opacity: 1
}
/* HERO SECTION */
#cografya-native-wrapper .hero-section {
position: relative;
background: #fff;
border-radius: 16px;
padding: 28px 28px 24px;
margin-bottom: 20px;
border: 1px solid #e8ddd2;
overflow: hidden;
box-shadow: 0 1px 8px rgba(0, 0, 0, .04)
}
#cografya-native-wrapper .hero-section::before {
content: '';
position: absolute;
top: -40px;
right: -30px;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(201, 107, 79, .06) 0%, transparent 70%);
pointer-events: none
}
#cografya-native-wrapper .hero-section::after {
content: '';
position: absolute;
bottom: -50px;
left: -20px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(91, 168, 140, .04) 0%, transparent 70%);
pointer-events: none
}
#cografya-native-wrapper .hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: var(--accent);
color: #fff;
border-radius: 20px;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 14px;
box-shadow: 0 3px 10px rgba(201, 107, 79, .2)
}
#cografya-native-wrapper .hero-badge svg {
width: 12px;
height: 12px
}
#cografya-native-wrapper .hero-title {
font-family: 'Playfair Display', serif;
font-size: 1.625rem;
font-weight: 800;
color: var(--text);
line-height: 1.2;
letter-spacing: -0.3px;
margin-bottom: 8px
}
#cografya-native-wrapper .hero-title span {
color: var(--accent);
font-style: italic
}
#cografya-native-wrapper .hero-subtitle {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text2);
line-height: 1.5;
max-width: 480px
}
#cografya-native-wrapper .hero-subtitle strong {
color: var(--text);
font-weight: 700
}
#cografya-native-wrapper .hero-divider {
width: 40px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--success));
border-radius: 3px;
margin-top: 16px;
opacity: .6
}
/* Progress Summary */
#cografya-native-wrapper .progress-summary {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 12px
}
#cografya-native-wrapper .progress-pill {
font-size: 0.625rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 4px
}
/* Exam Button */
#cografya-native-wrapper .exam-btn {
padding: 12px 24px;
border-radius: 12px;
border: 2px solid var(--accent);
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .3s;
box-shadow: 0 4px 14px rgba(201, 107, 79, .25);
letter-spacing: 0.3px;
position: relative;
overflow: hidden
}
#cografya-native-wrapper .exam-btn::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
animation: shine 3s infinite;
pointer-events: none
}
#cografya-native-wrapper .exam-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(201, 107, 79, .35)
}
/* Flashcard Mode */
#cografya-native-wrapper .flash-container {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* FIX: #1 Karti ortala */
gap: 16px;
padding: 20px;
min-height: 420px
/* FIX: #1 Yukseklik artirildi */
}
#cografya-native-wrapper .flash-card {
width: 100%;
max-width: 420px;
min-height: 220px;
perspective: 1000px;
cursor: pointer
}
#cografya-native-wrapper .flash-inner {
position: relative;
width: 100%;
min-height: 220px;
transition: transform 0.6s;
transform-style: preserve-3d
}
#cografya-native-wrapper .flash-card.flipped .flash-inner {
transform: rotateY(180deg)
}
#cografya-native-wrapper .flash-front,
#cografya-native-wrapper .flash-back {
position: absolute;
width: 100%;
min-height: 220px;
backface-visibility: hidden;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, .1)
}
#cografya-native-wrapper .flash-front {
background: linear-gradient(135deg, #fff, #f8f4f0);
border: 2px solid #e8ddd2;
position: relative;
overflow: hidden
}
#cografya-native-wrapper .flash-front::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
animation: shine 3s infinite;
pointer-events: none
}
#cografya-native-wrapper .flash-back {
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff;
transform: rotateY(180deg)
}
#cografya-native-wrapper .flash-front h3 {
font-family: 'Playfair Display', serif;
font-size: 1.375rem;
margin-bottom: 8px;
color: var(--text)
}
#cografya-native-wrapper .flash-front p {
font-size: 0.75rem;
color: var(--text3)
}
#cografya-native-wrapper .flash-back h4 {
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 10px;
opacity: .9
}
#cografya-native-wrapper .flash-back p {
font-size: 0.8125rem;
line-height: 1.6;
font-weight: 500
}
#cografya-native-wrapper .flash-nav {
display: flex;
gap: 10px;
align-items: center
}
#cografya-native-wrapper .flash-nav button {
padding: 8px 18px;
border-radius: 10px;
border: 1px solid #e3d5c7;
background: var(--card);
color: var(--text2);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .2s
}
#cografya-native-wrapper .flash-nav button:hover {
border-color: var(--accent);
color: var(--accent)
}
#cografya-native-wrapper .flash-counter {
font-size: 0.75rem;
font-weight: 700;
color: var(--text3);
min-width: 60px;
text-align: center
}
#cografya-native-wrapper .flash-hint {
font-size: 0.6875rem;
color: var(--text3);
margin-top: -8px
}
/* Exam Mode */
#cografya-native-wrapper .exam-container {
display: none;
padding: 16px
}
#cografya-native-wrapper .exam-setup {
background: var(--card);
border-radius: 20px;
border: 1px solid #e8ddd2;
padding: 24px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
max-width: 480px;
margin: 0 auto
}
#cografya-native-wrapper .exam-setup h2 {
font-family: 'Playfair Display', serif;
font-size: 1.375rem;
text-align: center;
margin-bottom: 16px
}
#cografya-native-wrapper .exam-setup-row {
margin-bottom: 14px
}
#cografya-native-wrapper .exam-setup-label {
font-size: 0.6875rem;
font-weight: 700;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px
}
#cografya-native-wrapper .exam-setup-options {
display: flex;
flex-wrap: wrap;
gap: 6px
}
#cografya-native-wrapper .exam-setup-opt {
padding: 8px 16px;
border-radius: 10px;
border: 1.5px solid #e3d5c7;
background: var(--card2);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .2s
}
#cografya-native-wrapper .exam-setup-opt:hover {
border-color: var(--accent);
background: #fff5f0
}
#cografya-native-wrapper .exam-setup-opt.active {
border-color: var(--accent);
background: var(--accent);
color: #fff
}
#cografya-native-wrapper .exam-start-btn {
width: 100%;
padding: 14px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
margin-top: 18px;
box-shadow: 0 4px 16px rgba(201, 107, 79, .3);
transition: all .3s
}
#cografya-native-wrapper .exam-start-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(201, 107, 79, .4)
}
#cografya-native-wrapper .exam-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding: 12px 16px;
background: var(--card);
border-radius: 14px;
border: 1px solid #e8ddd2;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 2px 10px rgba(0, 0, 0, .06)
}
#cografya-native-wrapper .exam-timer {
font-size: 1.125rem;
font-weight: 800;
font-family: 'Playfair Display', serif;
color: var(--accent)
}
#cografya-native-wrapper .exam-progress-bar {
height: 4px;
background: #e8ddd2;
border-radius: 4px;
margin-bottom: 14px;
overflow: hidden
}
#cografya-native-wrapper .exam-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--success));
border-radius: 4px;
transition: width .3s
}
#cografya-native-wrapper .exam-q {
background: var(--card);
border-radius: 14px;
border: 1px solid #e8ddd2;
padding: 16px;
margin-bottom: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
transition: all .3s
}
#cografya-native-wrapper .exam-q.answered {
border-color: var(--accent)40;
background: #fffbf8
}
#cografya-native-wrapper .exam-q-title {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px
}
#cografya-native-wrapper .exam-q-num {
background: var(--accent);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 800;
flex-shrink: 0
}
#cografya-native-wrapper .exam-q-cat {
font-size: 0.625rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 8px;
background: #f0ebe4;
color: var(--text3);
margin-left: auto;
white-space: nowrap
}
#cografya-native-wrapper .exam-q-hint {
font-size: 0.6875rem;
color: var(--text3);
font-style: italic;
margin-top: 8px;
display: none;
padding: 8px;
background: #faf6f1;
border-radius: 8px
}
#cografya-native-wrapper .exam-q.checked .exam-q-hint {
display: block
}
#cografya-native-wrapper .exam-opts {
display: flex;
flex-wrap: wrap;
gap: 6px
}
#cografya-native-wrapper .exam-opt {
padding: 7px 14px;
border-radius: 10px;
border: 1.5px solid #e3d5c7;
background: var(--card2);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .2s
}
#cografya-native-wrapper .exam-opt:hover {
border-color: var(--accent);
background: #fff5f0
}
#cografya-native-wrapper .exam-opt.selected {
border-color: var(--accent);
background: var(--accent);
color: #fff
}
#cografya-native-wrapper .exam-opt.correct {
border-color: var(--success);
background: var(--success);
color: #fff
}
#cografya-native-wrapper .exam-opt.wrong {
border-color: var(--danger);
background: var(--danger);
color: #fff
}
#cografya-native-wrapper .exam-result {
text-align: center;
padding: 24px;
background: var(--card);
border-radius: 20px;
border: 1px solid #e8ddd2;
margin-top: 16px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .06)
}
#cografya-native-wrapper .exam-result h2 {
font-family: 'Playfair Display', serif;
font-size: 2.25rem;
margin-bottom: 4px
}
#cografya-native-wrapper .exam-result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-top: 14px;
text-align: center
}
#cografya-native-wrapper .exam-result-card {
padding: 12px;
border-radius: 12px;
background: #faf6f1;
border: 1px solid #e8ddd2
}
#cografya-native-wrapper .exam-result-card h4 {
font-size: 1.125rem;
font-family: 'Playfair Display', serif;
margin-bottom: 2px
}
#cografya-native-wrapper .exam-result-card p {
font-size: 0.625rem;
color: var(--text3);
font-weight: 600
}
#cografya-native-wrapper .exam-cat-breakdown {
margin-top: 16px;
text-align: left
}
#cografya-native-wrapper .exam-cat-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 0.75rem
}
#cografya-native-wrapper .exam-cat-bar {
flex: 1;
height: 8px;
background: #e8ddd2;
border-radius: 4px;
overflow: hidden
}
#cografya-native-wrapper .exam-cat-fill {
height: 100%;
border-radius: 4px;
transition: width .5s
}
#cografya-native-wrapper .exam-actions {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 14px
}
/* Topic badge (progress indicator on topic buttons) */
#cografya-native-wrapper .topic-badge {
position: absolute;
top: -3px;
right: -3px;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 0.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}
/* ═══ MAP TOPIC HEADER — Kalıcı konu başlığı ═══ */
#cografya-native-wrapper .map-topic-header {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(255,252,248,.96) 0%, rgba(245,240,232,.94) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(200,180,160,.25);
font-family: 'Sora', system-ui, sans-serif;
z-index: 101;
animation: mthSlideIn .3s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .map-topic-header {
background: linear-gradient(135deg, rgba(30,30,40,.94) 0%, rgba(25,25,35,.92) 100%);
border-bottom-color: rgba(100,100,120,.3);
}
.map-topic-header .mth-cat {
font-size: 0.6875rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 6px;
letter-spacing: 0.3px;
white-space: nowrap;
}
.map-topic-header .mth-sep {
font-size: 0.875rem;
color: rgba(140,130,120,.5);
font-weight: 300;
}
.map-topic-header .mth-name {
font-size: 0.875rem;
font-weight: 800;
color: var(--navy);
letter-spacing: -0.2px;
white-space: nowrap;
}
.map-topic-header .mth-count {
margin-left: auto;
font-size: 0.6875rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
background: rgba(0,0,0,.06);
color: var(--text2);
white-space: nowrap;
}
@keyframes mthSlideIn {
from { opacity:0; transform: translateY(-8px); }
to { opacity:1; transform: translateY(0); }
}
@keyframes mapBadgeIn {
from { opacity:0; transform: scale(.82) translateY(-4px); }
to { opacity:1; transform: scale(1) translateY(0); }
}
/* Map overlay topic label (shows active subtopic name on map) */
#cografya-native-wrapper #topicBadge {
position: absolute;
top: 48px;
left: 10px;
right: auto;
width: auto;
height: auto;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
gap: 6px;
padding: 7px 13px 7px 10px;
background: rgba(255,252,248,.97);
backdrop-filter: blur(12px);
border: 1px solid rgba(200,180,160,.35);
border-left: 3px solid var(--accent);
color: var(--navy);
font-family: 'Sora', system-ui, sans-serif;
pointer-events: none;
box-shadow: 0 4px 14px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
z-index: 100;
max-width: 240px;
white-space: nowrap;
overflow: visible;
}
#cografya-native-wrapper #topicBadge .topic-badge-emoji {
font-size: 1rem;
flex-shrink: 0;
}
#cografya-native-wrapper #topicBadge .topic-badge-text {
font-size: 0.75rem;
font-weight: 700;
color: var(--navy);
overflow: hidden;
text-overflow: ellipsis;
}
/* Memory Cards */
#cografya-native-wrapper .mem-card {
width: 100%;
max-width: 440px;
min-height: 250px;
perspective: 1200px;
cursor: pointer;
margin: 0 auto
}
#cografya-native-wrapper .mem-inner {
position: relative;
width: 100%;
min-height: 250px;
transition: transform 0.5s cubic-bezier(.4, .2, .2, 1);
transform-style: preserve-3d
}
#cografya-native-wrapper .mem-card.flipped .mem-inner {
transform: rotateY(180deg)
}
#cografya-native-wrapper .mem-front,
#cografya-native-wrapper .mem-back {
position: absolute;
width: 100%;
min-height: 250px;
backface-visibility: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
padding: 24px;
text-align: left
}
#cografya-native-wrapper .mem-front {
background: linear-gradient(145deg, #fff, #faf6f1);
border: 2px solid #e8ddd2;
box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
align-items: center;
justify-content: center;
text-align: center
}
#cografya-native-wrapper .mem-back {
background: linear-gradient(145deg, #1e293b, #0f172a);
color: #fff;
transform: rotateY(180deg);
box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
gap: 0;
justify-content: flex-start;
overflow-y: auto
}
#cografya-native-wrapper .mem-front .mem-emoji {
font-size: 3rem;
margin-bottom: 12px
}
#cografya-native-wrapper .mem-front h3 {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
color: var(--text);
margin-bottom: 6px
}
#cografya-native-wrapper .mem-front .mem-cat {
font-size: 0.625rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 10px;
background: #f0ebe4;
color: var(--text3)
}
#cografya-native-wrapper .mem-back .mem-section {
margin-bottom: 10px
}
#cografya-native-wrapper .mem-back .mem-section-title {
font-size: 0.625rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #94a3b8;
margin-bottom: 5px
}
#cografya-native-wrapper .mem-back .mem-city-pills {
display: flex;
flex-wrap: wrap;
gap: 4px
}
#cografya-native-wrapper .mem-back .mem-city-pill {
padding: 3px 9px;
border-radius: 8px;
background: #334155;
font-size: 0.6875rem;
font-weight: 600;
color: #e2e8f0;
border: 1px solid #475569
}
#cografya-native-wrapper .mem-back .mem-detail-item {
font-size: 0.6875rem;
line-height: 1.5;
color: #cbd5e1;
padding: 3px 0;
border-bottom: 1px solid #1e293b
}
#cografya-native-wrapper .mem-back .mem-detail-item strong {
color: #fbbf24;
font-weight: 700
}
#cografya-native-wrapper .mem-back .mem-hint-box {
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
padding: 8px 10px;
margin-top: auto;
font-size: 0.6562rem;
line-height: 1.5;
color: #94a3b8
}
#cografya-native-wrapper .mem-back .mem-hint-box span {
color: #fbbf24;
font-weight: 700
}
#cografya-native-wrapper .mem-actions {
display: flex;
gap: 10px;
margin-top: 16px;
justify-content: center
}
#cografya-native-wrapper .mem-btn {
padding: 10px 24px;
border-radius: 12px;
border: none;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .2s
}
#cografya-native-wrapper .mem-btn.know {
background: #e8f5e9;
color: #2e7d32;
border: 2px solid #c8e6c9
}
#cografya-native-wrapper .mem-btn.know:hover {
background: #c8e6c9
}
#cografya-native-wrapper .mem-btn.retry {
background: #fce4ec;
color: #c62828;
border: 2px solid #f8bbd0
}
#cografya-native-wrapper .mem-btn.retry:hover {
background: #f8bbd0
}
#cografya-native-wrapper .mem-progress {
display: flex;
gap: 3px;
justify-content: center;
margin-top: 12px;
flex-wrap: wrap
}
#cografya-native-wrapper .mem-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #e8ddd2;
transition: all .3s
}
#cografya-native-wrapper .mem-dot.know {
background: var(--success)
}
#cografya-native-wrapper .mem-dot.retry {
background: var(--danger)
}
#cografya-native-wrapper .mem-dot.current {
transform: scale(1.4);
box-shadow: 0 0 6px rgba(0, 0, 0, .2)
}
/* Mistakes Book */
#cografya-native-wrapper .mistake-item {
background: var(--card);
border-radius: 12px;
border-left: 4px solid var(--danger);
padding: 12px 14px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04)
}
#cografya-native-wrapper .mistake-q {
font-size: 0.75rem;
font-weight: 700;
color: var(--text)
}
#cografya-native-wrapper .mistake-detail {
font-size: 0.6875rem;
color: var(--text2);
margin-top: 4px;
line-height: 1.5
}
/* Stats Dashboard */
#cografya-native-wrapper .stat-card {
background: var(--card);
border-radius: 14px;
border: 1px solid #e8ddd2;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04)
}
#cografya-native-wrapper .stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 14px
}
#cografya-native-wrapper .stat-big {
font-family: 'Playfair Display', serif;
font-size: 1.75rem;
font-weight: 800;
color: var(--accent)
}
#cografya-native-wrapper .stat-label {
font-size: 0.625rem;
font-weight: 700;
color: var(--text3);
text-transform: uppercase
}
#cografya-native-wrapper .stat-bar-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 0.6875rem
}
#cografya-native-wrapper .stat-bar {
flex: 1;
height: 10px;
background: #e8ddd2;
border-radius: 5px;
overflow: hidden
}
#cografya-native-wrapper .stat-fill {
height: 100%;
border-radius: 5px;
transition: width .6s
}
#cografya-native-wrapper .weak-topic {
background: #fff5f5;
border: 1px solid #fecaca;
border-radius: 10px;
padding: 10px;
margin-bottom: 6px;
font-size: 0.75rem
}
/* === COGRAFYA EXTRA FIXES === */
#cografya-native-wrapper .cat-card {
position: relative;
overflow: hidden
}
#cografya-native-wrapper .cat-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .1) 50%, transparent 60%);
animation: shine 4s infinite;
pointer-events: none;
z-index: 0
}
#cografya-native-wrapper .cat-header {
position: relative;
z-index: 1;
cursor: pointer
}
#cografya-native-wrapper .cat-content {
position: relative;
z-index: 1
}
#cografya-native-wrapper .flash-front {
position: relative;
overflow: hidden
}
#cografya-native-wrapper .flash-front::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .4) 50%, transparent 60%);
animation: shine 3s infinite;
pointer-events: none
}
#cografya-native-wrapper #tooltip {
position: fixed;
z-index: 9999;
pointer-events: none
}
/* SVG overlay katmanları şehir hover'ını ENGELLEMESİN */
#mapSvg #layerHighlights,
#mapSvg #layerCallouts,
#mapSvg #layerGeo,
#mapSvg #geoOverlay,
#mapSvg #geoTestOverlay,
#mapSvg #waterOverlay,
#mapSvg #waterTestOverlay {
pointer-events: none
}
/* ═══ PREMIUM ŞEHİR ETİKETLERİ — Smooth transitions ═══ */
.city-label-text {
transition: font-size .2s cubic-bezier(.4,0,.2,1),
fill .2s ease,
stroke-width .2s ease,
filter .25s ease;
cursor: default;
}
.city-dot {
transition: r .2s cubic-bezier(.4,0,.2,1),
fill .2s ease,
stroke-width .2s ease;
}
.city-label-group {
transition: opacity .2s ease;
}
/* Cat-content collapsible override */
#cografya-native-wrapper .cat-content {
max-height: 0;
overflow: hidden;
transition: max-height .4s cubic-bezier(.4, 0, .2, 1)
}
#cografya-native-wrapper .cat-card.open .cat-content {
max-height: 1200px
}
/* Cografya responsive */
@media(max-width:600px) {
#cografya-native-wrapper .cografya-container {
padding: 8px 10px !important
}
#cografya-native-wrapper .hero-title {
font-size: 1.25rem !important
}
#cografya-native-wrapper .hero-subtitle {
font-size: 0.6875rem !important
}
#cografya-native-wrapper .hero-section {
padding: 14px 12px 12px !important
}
#cografya-native-wrapper .hero-badge {
font-size: 0.625rem;
padding: 4px 10px
}
#cografya-native-wrapper .cat-header {
padding: 10px 10px
}
#cografya-native-wrapper .cat-title {
font-size: 0.75rem !important
}
#cografya-native-wrapper .cat-icon {
width: 28px;
height: 28px;
font-size: 0.875rem
}
#cografya-native-wrapper .cat-count {
font-size: 0.625rem;
padding: 2px 6px
}
#cografya-native-wrapper .topic-btn {
padding: 6px 8px;
font-size: 0.625rem;
border-radius: 8px
}
#cografya-native-wrapper .cat-topics {
padding: 2px 8px 8px;
gap: 4px
}
#cografya-native-wrapper .mode-bar {
margin-bottom: 10px;
gap: 4px;
flex-wrap: wrap
}
#cografya-native-wrapper .mode-btn {
padding: 8px 10px;
font-size: 0.6875rem;
flex: 1;
min-width: 0;
text-align: center
}
#cografya-native-wrapper .map-area {
max-height: 320px;
border-radius: 12px;
clip-path: inset(0 round 12px)
}
#cografya-native-wrapper .map-svg {
max-height: 300px
}
#cografya-native-wrapper .section-label {
font-size: 0.6875rem
}
#cografya-native-wrapper .learn-item-header {
padding: 8px 12px
}
#cografya-native-wrapper .learn-name {
font-size: 0.7188rem
}
#cografya-native-wrapper .learn-cities-grid {
grid-template-columns: 1fr
}
#cografya-native-wrapper .products {
padding: 8px;
gap: 5px
}
#cografya-native-wrapper .product {
padding: 4px 8px;
font-size: 0.625rem
}
#cografya-native-wrapper .flash-card {
max-width: 100%;
min-height: 180px
}
#cografya-native-wrapper .flash-inner {
min-height: 180px
}
#cografya-native-wrapper .flash-front,
#cografya-native-wrapper .flash-back {
min-height: 180px;
padding: 14px
}
#cografya-native-wrapper .flash-front h3 {
font-size: 1rem
}
#cografya-native-wrapper .flash-back p {
font-size: 0.75rem
}
#cografya-native-wrapper .exam-setup {
padding: 14px;
max-width: 100%
}
#cografya-native-wrapper .exam-btn {
padding: 8px 12px;
font-size: 0.6875rem
}
#cografya-native-wrapper .mem-card {
max-width: 100%
}
#cografya-native-wrapper .mem-front,
#cografya-native-wrapper .mem-back {
padding: 14px;
min-height: 200px
}
#cografya-native-wrapper .mem-front h3 {
font-size: 1rem
}
#cografya-native-wrapper .exam-container {
padding: 8px
}
#cografya-native-wrapper .score-card {
padding: 10px
}
#cografya-native-wrapper .score-big {
font-size: 2rem
}
#cografya-native-wrapper .progress-summary {
font-size: 0.6875rem
}
#cografya-native-wrapper .exam-result h2 {
font-size: 1.5rem
}
#cografya-native-wrapper .exam-result-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px
}
#cografya-native-wrapper .stat-grid {
grid-template-columns: 1fr
}
#cografya-native-wrapper .btn-row {
flex-direction: column;
gap: 5px
}
#cografya-native-wrapper .btn-row button {
width: 100%
}
#cografya-native-wrapper .zoom-controls {
top: 4px;
right: 4px
}
#cografya-native-wrapper .zoom-btn {
width: 24px;
height: 24px;
font-size: 0.75rem
}
#cografya-native-wrapper .info-text {
font-size: 0.6875rem
}
#cografya-native-wrapper #testButtons {
gap: 6px;
flex-wrap: wrap
}
#cografya-native-wrapper #testButtons button {
font-size: 0.6875rem;
padding: 7px 12px
}
#cografya-native-wrapper .mistake-card {
padding: 10px
}
#cografya-native-wrapper .mistake-card h4 {
font-size: 0.8125rem
}
}
@media(max-width:380px) {
#cografya-native-wrapper .hero-title {
font-size: 1.0625rem !important
}
#cografya-native-wrapper .mode-btn {
padding: 6px 6px;
font-size: 0.625rem
}
#cografya-native-wrapper .map-area {
max-height: 260px;
clip-path: inset(0 round 12px)
}
#cografya-native-wrapper .map-svg {
max-height: 240px
}
#cografya-native-wrapper .exam-btn {
padding: 6px 10px;
font-size: 0.625rem
}
}
/* ═══════════ RESPONSIVE-FIXES ═══════════ */
/* === RESPONSIVE DESIGN FIXES === */
html {
-webkit-text-size-adjust: 100%
}
img,
svg,
video {
max-width: 100%;
height: auto
}
@media(max-width:600px) {
.container {
padding: 0 10px !important
}
.card {
padding: 14px !important;
border-radius: 12px !important
}
.card-sm {
padding: 10px !important;
border-radius: 10px !important
}
.nav-inner {
padding: 0 10px;
height: 48px
}
.nav-logo img {
width: 28px;
height: 28px
}
.nav-logo-text span:first-child {
font-size: 0.75rem
}
.nav-logo-text span:last-child {
font-size: 0.4375rem;
letter-spacing: 1px
}
.nav-links {
gap: 1px;
padding: 2px;
border-radius: 10px
}
.nav-btn {
padding: 6px 7px;
font-size: 0.625rem;
border-radius: 8px;
gap: 3px
}
.nav-user {
width: 28px;
height: 28px;
font-size: 0.625rem;
border-radius: 8px
}
.stat-val {
font-size: 1.625rem !important;
letter-spacing: -1px
}
.grid-2 {
grid-template-columns: 1fr !important;
gap: 8px !important
}
.grid-3 {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important
}
.btn {
padding: 9px 16px;
font-size: 0.75rem;
border-radius: 10px
}
.btn-full {
padding: 12px
}
.countdown-box {
padding: 10px
}
.cd-num strong {
font-size: 1.375rem
}
.cd-num span {
font-size: 0.4375rem
}
.section-tab {
padding: 6px 12px;
font-size: 0.625rem
}
.input {
padding: 11px 12px;
font-size: 0.8125rem
}
.input-sm {
padding: 10px;
font-size: 0.875rem
}
.ex-card-inner {
min-height: 180px
}
.ex-card-face {
padding: 16px 12px
}
.label {
font-size: 0.625rem
}
.topic-btn {
padding: 8px 10px;
font-size: 0.6875rem
}
.badge {
font-size: 0.625rem;
padding: 2px 8px
}
body {
overflow-x: hidden !important
}
#app {
overflow-x: hidden;
max-width: 100vw
}
}
@media(max-width:380px) {
.container {
padding: 0 8px !important
}
.nav-inner {
padding: 0 6px;
height: 44px
}
.nav-logo img {
width: 24px;
height: 24px
}
.nav-logo-text span:first-child {
font-size: 0.6875rem
}
.nav-btn {
padding: 6px 6px;
font-size: 0.625rem
}
.card {
padding: 10px !important
}
.grid-2,
.grid-3 {
grid-template-columns: 1fr !important;
gap: 6px !important
}
.stat-val {
font-size: 1.375rem !important
}
.btn {
padding: 8px 12px;
font-size: 0.6875rem
}
.cd-num strong {
font-size: 1.125rem
}
}
@media(min-width:601px) and (max-width:900px) {
.container {
padding: 0 16px
}
.nav-inner {
padding: 0 16px
}
}
/* ===== GEO MODAL: Premium Glassmorphism Bilgi Paneli ===== */
#geoModalOverlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
z-index:9999;display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity .35s ease;pointer-events:none;
}
#geoModalOverlay.show{opacity:1;pointer-events:auto}
#geoModalOverlay .geo-modal{
background:rgba(255,255,255,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-radius:20px;border:1px solid rgba(255,255,255,0.5);
box-shadow:0 25px 60px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.1) inset;
max-width:420px;width:90%;padding:0;overflow:hidden;
transform:translateY(30px) scale(0.95);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;
opacity:0;
}
#geoModalOverlay.show .geo-modal{transform:translateY(0) scale(1);opacity:1}
#geoModalOverlay .geo-modal-header{
padding:20px 24px 16px;display:flex;align-items:center;gap:14px;
border-bottom:1px solid rgba(0,0,0,0.06);
}
#geoModalOverlay .geo-modal-icon{
width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
font-size: 1.625rem;flex-shrink:0;
background:linear-gradient(135deg,var(--geo-modal-clr1,#5D4037),var(--geo-modal-clr2,#3E2723));
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
#geoModalOverlay .geo-modal-title{font-size: 1.125rem;font-weight:800;color:#1a1a2e;line-height:1.2;font-family:Inter,system-ui,sans-serif}
#geoModalOverlay .geo-modal-subtitle{font-size: 0.75rem;color:#666;margin-top:2px;font-weight:500}
#geoModalOverlay .geo-modal-body{padding:16px 24px 20px}
#geoModalOverlay .geo-modal-stat{
display:flex;align-items:center;gap:10px;padding:10px 14px;
border-radius:12px;background:rgba(0,0,0,0.03);margin-bottom:8px;
transition:background .2s;
}
#geoModalOverlay .geo-modal-stat:hover{background:rgba(0,0,0,0.06)}
#geoModalOverlay .geo-modal-stat-icon{font-size: 1.25rem;width:32px;text-align:center}
#geoModalOverlay .geo-modal-stat-label{font-size: 0.6875rem;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
#geoModalOverlay .geo-modal-stat-value{font-size: 0.875rem;color:#222;font-weight:700}
#geoModalOverlay .geo-modal-cities{
display:flex;flex-wrap:wrap;gap:6px;padding:12px 24px 20px;
}
#geoModalOverlay .geo-modal-city{
padding:5px 12px;border-radius:20px;font-size: 0.75rem;font-weight:600;
background:linear-gradient(135deg,var(--geo-modal-clr1,#5D4037)15%,var(--geo-modal-clr2,#3E2723));
color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.12);
transform:scale(0);animation:geoModalCityPop .3s ease forwards;
}
@keyframes geoModalCityPop{to{transform:scale(1)}}
#geoModalOverlay .geo-modal-close{
position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:10px;
border:none;background:rgba(0,0,0,0.06);cursor:pointer;font-size: 1rem;
display:flex;align-items:center;justify-content:center;color:#666;
transition:background .2s,transform .2s;
}
#geoModalOverlay .geo-modal-close:hover{background:rgba(0,0,0,0.12);transform:rotate(90deg)}
@media(max-width:500px){
#geoModalOverlay .geo-modal{max-width:95%;border-radius:16px}
#geoModalOverlay .geo-modal-header{padding:16px 18px 12px}
#geoModalOverlay .geo-modal-body{padding:12px 18px 16px}
}
/* ═══ PARAGRAFTA UZMAN OL CSS ═══ */
@media(max-width:640px){
.para-compare-grid{grid-template-columns:1fr !important}
}
/* ═══ ADMIN PANEL CSS ═══ */
.adm-wrap{max-width:1200px;margin:0 auto;padding:20px 16px;min-height:100vh}
.adm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.adm-header h1{font-family:'Sora',system-ui,sans-serif;font-size: 1.375rem;font-weight:800;color:var(--navy);margin:0;letter-spacing:-0.5px}
.adm-header-actions{display:flex;align-items:center;gap:10px}
.adm-nav{display:flex;gap:4px;background:rgba(0,0,0,.04);border-radius:12px;padding:4px;margin-bottom:24px;overflow-x:auto}
.adm-nav button{padding:10px 18px;border:none;background:none;border-radius:10px;font-size: 0.8125rem;font-weight:600;color:var(--text3);cursor:pointer;transition:all .2s;white-space:nowrap;font-family:'Inter',system-ui,sans-serif}
.adm-nav button:hover{background:rgba(0,0,0,.04);color:var(--text1)}
.adm-nav button.active{background:var(--white);color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.adm-card{background:var(--white);border-radius:14px;padding:20px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.adm-card-label{font-size: 0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text4);margin-bottom:8px}
.adm-card-value{font-size: 1.75rem;font-weight:800;color:var(--navy);font-family:'Sora',system-ui,sans-serif}
.adm-card-sub{font-size: 0.6875rem;color:var(--text3);margin-top:4px}
.adm-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid rgba(0,0,0,.06);background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.adm-table{width:100%;border-collapse:collapse;font-size: 0.8125rem}
.adm-table th{text-align:left;padding:12px 16px;font-size: 0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text4);border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);white-space:nowrap}
.adm-table td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.03);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:none}
.adm-table tr:hover{background:rgba(212,105,78,.03);cursor:pointer}
.adm-table th.sortable{cursor:pointer}
.adm-table th.sortable:hover{color:var(--accent)}
.adm-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size: 0.6875rem;font-weight:700}
.adm-badge.online{background:rgba(34,197,94,.1);color:#16a34a}
.adm-badge.offline{background:rgba(0,0,0,.05);color:var(--text4)}
.adm-search{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.adm-search input{flex:1;padding:10px 14px;border:1px solid rgba(0,0,0,.1);border-radius:10px;font-size: 0.8125rem;background:var(--white);outline:none;transition:border-color .2s}
.adm-search input:focus{border-color:var(--accent)}
.adm-timeline{display:flex;flex-direction:column;gap:8px}
.adm-tl-item{display:flex;gap:12px;padding:12px 16px;background:var(--white);border-radius:12px;border:1px solid rgba(0,0,0,.05);align-items:flex-start}
.adm-tl-time{font-size: 0.6875rem;color:var(--text4);white-space:nowrap;min-width:55px;padding-top:2px}
.adm-tl-body{flex:1}
.adm-tl-name{font-weight:700;font-size: 0.8125rem;color:var(--navy)}
.adm-tl-action{font-size: 0.75rem;color:var(--text3);margin-top:2px}
.adm-tl-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.adm-detail-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.adm-detail-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#e08a6d);display:flex;align-items:center;justify-content:center;font-size: 1.375rem;font-weight:800;color:#fff;flex-shrink:0}
.adm-detail-info h2{margin:0 0 4px;font-size: 1.25rem;font-weight:800;color:var(--navy);font-family:'Sora',system-ui,sans-serif}
.adm-detail-info p{margin:0;font-size: 0.75rem;color:var(--text3)}
.adm-back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(0,0,0,.1);background:var(--white);border-radius:10px;font-size: 0.8125rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s;margin-bottom:16px}
.adm-back-btn:hover{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.15)}
.adm-section{margin-bottom:24px}
.adm-section-title{font-size: 0.875rem;font-weight:700;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.adm-bar-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding:8px 0}
.adm-bar{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.adm-bar-fill{width:100%;border-radius:6px 6px 0 0;min-height:4px;transition:height .6s cubic-bezier(.4,0,.2,1)}
.adm-bar-label{font-size: 0.625rem;color:var(--text4);text-align:center}
.adm-bar-val{font-size: 0.625rem;font-weight:700;color:var(--text2)}
.adm-heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.adm-heatmap-cell{aspect-ratio:1;border-radius:3px;min-width:14px}
.adm-badge-list{display:flex;flex-wrap:wrap;gap:8px}
.adm-badge-item{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,.03);border-radius:10px;font-size: 0.75rem}
.adm-empty{text-align:center;padding:40px 20px;color:var(--text4);font-size: 0.8125rem}
.adm-refresh-btn{padding:8px 14px;border:1px solid rgba(0,0,0,.1);background:var(--white);border-radius:10px;font-size: 0.75rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s}
.adm-refresh-btn:hover{background:rgba(0,0,0,.03)}
.adm-topic-row{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--white);border-radius:10px;border:1px solid rgba(0,0,0,.04);margin-bottom:6px}
.adm-topic-name{flex:1;font-size: 0.8125rem;font-weight:600;color:var(--text1)}
.adm-topic-bar{flex:2;height:8px;background:rgba(0,0,0,.06);border-radius:4px;overflow:hidden}
.adm-topic-bar-fill{height:100%;border-radius:4px;transition:width .4s}
.adm-topic-pct{font-size: 0.75rem;font-weight:700;min-width:40px;text-align:right}
/* Filtre paneli */
.adm-filter-panel{background:var(--card,#fff);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:14px 16px;margin-bottom:16px}
/* Ders kırılımlı deneme tablosu */
.adm-exam-detail-table th{padding:10px 8px;font-size:0.6rem}
.adm-exam-detail-table td{padding:8px;font-size:0.75rem}
/* ─── Admin Spinner ─── */
.adm-spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.08);border-top-color:var(--accent);border-radius:50%;animation:admSpin .8s linear infinite;margin:0 auto}
@keyframes admSpin{to{transform:rotate(360deg)}}
[data-theme="dark"] .adm-spinner{border-color:rgba(255,255,255,.1);border-top-color:var(--accent)}
/* ─── Real-time Update Toast ─── */
.adm-update-toast{position:fixed;bottom:20px;right:20px;background:#1E3A5F;color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;font-family:'Sora',system-ui,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,.25);z-index:9999;transform:translateY(100px);opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none}
.adm-update-toast.show{transform:translateY(0);opacity:1}
[data-theme="dark"] .adm-update-toast{background:var(--accent);color:#fff}
/* ─── Ranking Tab ─── */
.adm-rank-modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.adm-rank-mode-btn{padding:7px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:var(--white,#fff);color:var(--text3,#888);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:'Sora',system-ui,sans-serif}
.adm-rank-mode-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(212,105,78,.04)}
.adm-rank-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px rgba(212,105,78,.25)}
.adm-rank-table tr.adm-rank-top3 td{background:rgba(255,215,0,.04)}
.adm-rank-table tr.adm-rank-top3:hover td{background:rgba(255,215,0,.08)}
.adm-rank-detail td{background:rgba(0,0,0,.01)}
/* ─── Admin Dark Mode ─── */
[data-theme="dark"] .adm-wrap{color:var(--text)}
[data-theme="dark"] .adm-header h1{color:var(--cream)}
[data-theme="dark"] .adm-nav{background:rgba(255,255,255,.05)}
[data-theme="dark"] .adm-nav button{color:var(--text3)}
[data-theme="dark"] .adm-nav button:hover{background:rgba(255,255,255,.06);color:var(--text2)}
[data-theme="dark"] .adm-nav button.active{background:var(--card);color:var(--cream);box-shadow:0 2px 8px rgba(0,0,0,.25)}
[data-theme="dark"] .adm-card{background:var(--card);border-color:rgba(255,255,255,.06);box-shadow:0 2px 12px rgba(0,0,0,.15)}
[data-theme="dark"] .adm-card-label{color:var(--text4)}
[data-theme="dark"] .adm-card-value{color:var(--cream)}
[data-theme="dark"] .adm-card-sub{color:var(--text3)}
[data-theme="dark"] .adm-table-wrap{background:var(--card);border-color:rgba(255,255,255,.06);box-shadow:0 2px 12px rgba(0,0,0,.15)}
[data-theme="dark"] .adm-table th{color:var(--text4);border-bottom-color:rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
[data-theme="dark"] .adm-table td{border-bottom-color:rgba(255,255,255,.04);color:var(--text)}
[data-theme="dark"] .adm-table tr:hover{background:rgba(212,105,78,.06)}
[data-theme="dark"] .adm-badge.offline{background:rgba(255,255,255,.06);color:var(--text4)}
[data-theme="dark"] .adm-search input{background:var(--card);border-color:rgba(255,255,255,.1);color:var(--text)}
[data-theme="dark"] .adm-search input:focus{border-color:var(--accent)}
[data-theme="dark"] .adm-tl-item{background:var(--card);border-color:rgba(255,255,255,.05)}
[data-theme="dark"] .adm-tl-name{color:var(--cream)}
[data-theme="dark"] .adm-tl-action{color:var(--text3)}
[data-theme="dark"] .adm-detail-info h2{color:var(--cream)}
[data-theme="dark"] .adm-section-title{color:var(--cream)}
[data-theme="dark"] .adm-back-btn{background:var(--card);border-color:rgba(255,255,255,.1);color:var(--text2)}
[data-theme="dark"] .adm-back-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .adm-refresh-btn{background:var(--card);border-color:rgba(255,255,255,.1);color:var(--text2)}
[data-theme="dark"] .adm-refresh-btn:hover{background:rgba(255,255,255,.05)}
[data-theme="dark"] .adm-topic-row{background:var(--card);border-color:rgba(255,255,255,.05)}
[data-theme="dark"] .adm-topic-name{color:var(--text)}
[data-theme="dark"] .adm-topic-bar{background:rgba(255,255,255,.08)}
[data-theme="dark"] .adm-empty{color:var(--text4)}
[data-theme="dark"] .adm-filter-panel{background:var(--card);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .adm-filter-panel input,
[data-theme="dark"] .adm-filter-panel select{background:var(--card3);border-color:rgba(255,255,255,.1);color:var(--text)}
[data-theme="dark"] .adm-heatmap-cell{opacity:.85}
[data-theme="dark"] .adm-badge-item{background:rgba(255,255,255,.05);color:var(--text2)}
[data-theme="dark"] .adm-rank-mode-btn{background:var(--card);border-color:rgba(255,255,255,.08);color:var(--text3)}
[data-theme="dark"] .adm-rank-mode-btn:hover{background:rgba(212,105,78,.1);border-color:var(--accent);color:var(--accent)}
[data-theme="dark"] .adm-rank-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .adm-rank-table tr.adm-rank-top3 td{background:rgba(255,215,0,.06)}
[data-theme="dark"] .adm-rank-detail td{background:rgba(255,255,255,.02)}
@media(max-width:768px){
.adm-cards{grid-template-columns:repeat(2,1fr)}
.adm-detail-header{flex-direction:column;align-items:flex-start}
.adm-nav{gap:2px;padding:3px}
.adm-nav button{padding:8px 12px;font-size: 0.75rem}
.adm-exam-detail-table th{padding:8px 4px;font-size:0.5rem}
.adm-exam-detail-table td{padding:6px 4px;font-size:0.65rem}
.adm-rank-modes{gap:4px}
.adm-rank-mode-btn{padding:5px 10px;font-size:.68rem}
}
@media(max-width:480px){
.adm-cards{grid-template-columns:1fr}
.adm-card-value{font-size: 1.5rem}
.adm-wrap{padding:12px 10px}
.adm-filter-panel{padding:10px 12px}
}
/* ═══════════════════════════════════════════════════════════
GUIDED TOUR + TRIAL SYSTEM
Spotlight overlay, tooltip, progress, animations
═══════════════════════════════════════════════════════════ */
/* ── Overlay ── */
.tour-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10000;
animation: tourFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Spotlight: box-shadow hole technique */
.tour-overlay.tour-has-target::before {
content: "";
position: fixed;
top: var(--spot-top, 0);
left: var(--spot-left, 0);
width: var(--spot-width, 0);
height: var(--spot-height, 0);
border-radius: 14px;
box-shadow: 0 0 0 9999px rgba(15, 25, 35, 0.82);
z-index: 10001;
pointer-events: none;
transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* No target = full dark overlay */
.tour-overlay:not(.tour-has-target)::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 25, 35, 0.82);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10001;
}
/* Pulse ring around spotlighted element */
.tour-pulse-ring {
position: fixed;
border-radius: 14px;
border: 2px solid var(--accent);
z-index: 10002;
pointer-events: none;
animation: tourPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* ── Tooltip ── */
.tour-tooltip {
position: fixed;
z-index: 10003;
background: rgba(255, 252, 248, 0.98);
border-radius: 20px;
padding: 24px 22px 20px;
max-width: 360px;
width: calc(100vw - 32px);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(212, 105, 78, 0.12);
animation: tourTooltipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
outline: none;
}
.tour-tooltip-center {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
animation: tourTooltipCenterIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Arrow indicators */
.tour-arrow-bottom::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
width: 14px; height: 14px;
background: rgba(255, 252, 248, 0.98);
border-radius: 2px;
transform: translateX(-50%) rotate(45deg);
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
}
.tour-arrow-top::before {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
width: 14px; height: 14px;
background: rgba(255, 252, 248, 0.98);
border-radius: 2px;
transform: translateX(-50%) rotate(45deg);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}
/* ── Tour Content ── */
.tour-icon {
font-size: 40px;
text-align: center;
margin-bottom: 10px;
line-height: 1;
}
.tour-title {
color: #28251F;
font-size: 18px;
font-weight: 800;
font-family: 'Sora', system-ui, sans-serif;
text-align: center;
margin-bottom: 6px;
letter-spacing: -0.3px;
}
.tour-text {
color: #524D48;
font-size: 13px;
line-height: 1.75;
text-align: center;
margin-bottom: 18px;
}
.tour-trial-hint {
background: linear-gradient(135deg, rgba(212, 105, 78, 0.07), rgba(72, 150, 122, 0.07));
border: 1px solid rgba(212, 105, 78, 0.15);
border-radius: 10px;
padding: 9px 14px;
font-size: 12px;
color: #4A453F;
text-align: center;
margin-bottom: 18px;
font-weight: 600;
line-height: 1.5;
}
.tour-trial-badge {
display: inline-block;
background: linear-gradient(135deg, var(--accent), var(--accent3));
color: #fff;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 6px;
letter-spacing: 0.5px;
vertical-align: middle;
margin-right: 4px;
}
/* ── Progress Dots ── */
.tour-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-bottom: 18px;
}
.tour-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(192, 174, 156, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-dot-active {
background: var(--accent);
transform: scale(1.4);
box-shadow: 0 0 0 3px rgba(212, 105, 78, 0.2);
}
.tour-dot-done { background: var(--success); }
/* ── Step Counter ── */
.tour-counter {
text-align: center;
font-size: 11px;
color: #8a8580;
font-weight: 600;
margin-top: 14px;
}
/* ── Buttons ── */
.tour-btns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.tour-btn-skip {
background: none;
border: none;
color: #8a8580;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 10px 16px;
border-radius: 10px;
transition: all 0.2s;
font-family: 'Sora', system-ui, sans-serif;
}
.tour-btn-skip:hover { color: #4A453F; background: rgba(0,0,0,0.04); }
.tour-btn-next {
flex: 1;
max-width: 170px;
padding: 13px 22px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, var(--accent), var(--accent3));
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: 'Sora', system-ui, sans-serif;
box-shadow: 0 6px 20px rgba(212, 105, 78, 0.3);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-btn-next:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(212, 105, 78, 0.4);
}
.tour-btn-start { max-width: 200px; font-size: 15px; padding: 14px 24px; }
/* ── Trial Counter Banner (Home page) ── */
.trial-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
}
.trial-banner-home {
background: linear-gradient(135deg, rgba(212, 105, 78, 0.06), rgba(72, 150, 122, 0.06));
border: 1px solid rgba(212, 105, 78, 0.12);
color: var(--text2);
}
.trial-banner-active {
background: linear-gradient(135deg, rgba(72, 150, 122, 0.08), rgba(72, 150, 122, 0.04));
border: 1px solid rgba(72, 150, 122, 0.2);
color: var(--success);
justify-content: space-between;
}
.trial-dots {
display: flex;
gap: 4px;
align-items: center;
}
.trial-dot {
width: 10px; height: 10px;
border-radius: 50%;
border: 2px solid rgba(192, 174, 156, 0.3);
transition: all 0.3s;
}
.trial-dot.used {
background: var(--accent);
border-color: var(--accent);
}
/* ── Tour Keyframes ── */
@keyframes tourFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tourTooltipIn {
from { opacity: 0; transform: scale(0.92) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes tourTooltipCenterIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes tourPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.08); }
}
/* ── Dark Mode ── */
[data-theme="dark"] .tour-tooltip {
background: rgba(30, 39, 70, 0.98);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(212, 105, 78, 0.2);
}
[data-theme="dark"] .tour-title { color: #e8e6e3; }
[data-theme="dark"] .tour-text { color: #a09b96; }
[data-theme="dark"] .tour-trial-hint { color: #b8b4af; background: linear-gradient(135deg, rgba(212,105,78,.1), rgba(72,150,122,.1)); }
[data-theme="dark"] .tour-btn-skip { color: #8a8580; }
[data-theme="dark"] .tour-btn-skip:hover { color: #b8b4af; background: rgba(255,255,255,.06); }
[data-theme="dark"] .tour-counter { color: #65605A; }
[data-theme="dark"] .tour-arrow-bottom::before,
[data-theme="dark"] .tour-arrow-top::before { background: rgba(30, 39, 70, 0.98); }
[data-theme="dark"] .trial-banner-home { background: linear-gradient(135deg, rgba(212,105,78,.08), rgba(72,150,122,.08)); border-color: rgba(212,105,78,.15); }
/* ── Mobile ── */
@media (max-width: 540px) {
.tour-tooltip {
max-width: calc(100vw - 24px);
padding: 20px 18px 16px;
border-radius: 16px;
}
.tour-icon { font-size: 34px; }
.tour-title { font-size: 16px; }
.tour-text { font-size: 12px; }
.tour-btn-next { font-size: 13px; padding: 11px 18px; }
.tour-btn-start { font-size: 14px; }
}
/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
.tour-overlay,
.tour-tooltip,
.tour-tooltip-center,
.tour-pulse-ring,
.tour-dot,
.tour-btn-next,
.tour-btn-skip,
.page-transition,
.card,
.btn {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.tour-overlay.tour-has-target::before {
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════
KONUYU HALLET — Styles
═══════════════════════════════════════════ */
/* Top Bar */
.kh-topbar {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px;
background: rgba(255,255,255,.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(192,174,156,.2);
position: sticky; top: 58px; z-index: 80;
}
[data-theme="dark"] .kh-topbar { background: rgba(30,30,30,.95); }
.kh-back-btn {
background: var(--card2); border: 1px solid rgba(192,174,156,.3);
color: var(--text2); font-size: 12px; font-weight: 600;
cursor: pointer; padding: 7px 16px; border-radius: 10px;
display: flex; align-items: center; gap: 5px; transition: all .2s;
}
.kh-back-btn:hover { background: var(--card3); }
.kh-topbar-title {
color: var(--cream); font-size: 13px; font-weight: 700;
font-family: 'Sora', system-ui, sans-serif;
}
/* Stage Bar */
.kh-stage-bar {
display: flex; align-items: center; justify-content: center;
gap: 0; padding: 14px 20px;
background: var(--card); border-bottom: 1px solid var(--border2);
}
.kh-stage-dot {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
background: var(--card2); color: var(--text3);
border: 2px solid var(--border2); transition: all .3s;
}
.kh-stage-dot.active {
background: #E85D04; color: #fff; border-color: #E85D04;
box-shadow: 0 0 12px rgba(232,93,4,.35);
}
.kh-stage-dot.done {
background: #22c55e; color: #fff; border-color: #22c55e;
}
.kh-stage-line {
width: 40px; height: 3px;
background: var(--border2); transition: background .3s;
}
.kh-stage-line.done { background: #22c55e; }
/* Hero Section */
.kh-hero {
text-align: center; padding: 24px 16px 20px;
background: linear-gradient(135deg, rgba(232,93,4,.08), rgba(232,93,4,.03));
border-radius: 16px; margin-bottom: 20px;
border: 1px solid rgba(232,93,4,.15);
}
.kh-hero-title {
font-size: 22px; font-weight: 800; color: var(--cream);
font-family: 'Sora', system-ui, sans-serif;
letter-spacing: -0.6px; margin-bottom: 6px;
}
.kh-hero-sub {
font-size: 13px; color: var(--text3); font-weight: 400;
}
/* Review Box */
.kh-review-box {
background: rgba(232,93,4,.06); border: 1px solid rgba(232,93,4,.2);
border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
}
.kh-review-item {
padding: 8px 12px; margin-top: 6px;
background: rgba(232,93,4,.08); border-radius: 10px;
color: #E85D04; font-size: 13px; font-weight: 600;
cursor: pointer; transition: background .2s;
}
.kh-review-item:hover { background: rgba(232,93,4,.14); }
/* Unit Titles */
.kh-unit-title {
font-size: 14px; font-weight: 800; color: var(--cream);
padding: 12px 0 8px; margin-top: 8px;
font-family: 'Sora', system-ui, sans-serif;
border-bottom: 2px solid rgba(232,93,4,.2);
margin-bottom: 10px;
}
/* Topic Grid */
.kh-topic-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px; margin-bottom: 16px;
}
.kh-topic-card {
background: var(--card); border: 1px solid var(--border2);
border-radius: 14px; padding: 16px 14px;
cursor: pointer; transition: all .25s;
text-align: center; position: relative;
}
.kh-topic-card:hover {
border-color: #E85D04; transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(232,93,4,.15);
}
.kh-topic-card.done { border-color: rgba(34,197,94,.3); }
.kh-topic-card.review { border-color: rgba(232,93,4,.4); }
.kh-topic-icon { font-size: 28px; margin-bottom: 8px; }
.kh-topic-name {
font-size: 12px; font-weight: 700; color: var(--cream);
line-height: 1.4;
}
.kh-topic-badge {
font-size: 10px; font-weight: 700; padding: 3px 8px;
border-radius: 12px; margin-top: 8px; display: inline-block;
}
.kh-topic-badge.done { background: rgba(34,197,94,.12); color: #22c55e; }
.kh-topic-badge.review { background: rgba(232,93,4,.12); color: #E85D04; }
.kh-topic-badge.progress { background: rgba(59,130,246,.12); color: #3b82f6; }
/* Progress Bar */
.kh-progress-bar {
height: 5px; background: var(--card2); border-radius: 5px;
margin-bottom: 6px; overflow: hidden;
}
.kh-progress-fill {
height: 100%; background: linear-gradient(90deg, #E85D04, #FF8906);
border-radius: 5px; transition: width .4s ease;
}
.kh-progress-text {
text-align: center; color: var(--text3); font-size: 11px;
margin-bottom: 14px;
}
/* Topic Header */
.kh-topic-header {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; margin-bottom: 16px;
background: var(--card); border-radius: 12px;
border: 1px solid rgba(232,93,4,.25);
}
.kh-topic-header-icon { font-size: 22px; }
.kh-topic-header span {
color: var(--cream); font-size: 15px; font-weight: 800;
font-family: 'Sora', system-ui, sans-serif;
}
/* Anlatım Card */
.kh-anlatim-card {
background: var(--card); border: 1px solid var(--border2);
border-radius: 16px; padding: 24px 20px;
margin-bottom: 16px;
animation: khSlideIn .35s ease;
}
@keyframes khSlideIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.kh-anlatim-title {
font-size: 16px; font-weight: 800; color: #E85D04;
margin-bottom: 12px; font-family: 'Sora', system-ui, sans-serif;
}
.kh-anlatim-content {
font-size: 14px; color: var(--text2); line-height: 1.8;
font-weight: 500;
}
/* Checkpoint Card */
.kh-checkpoint-card {
background: var(--card); border: 1px solid rgba(232,93,4,.3);
border-radius: 16px; padding: 24px 20px;
margin-bottom: 16px;
animation: khSlideIn .35s ease;
}
.kh-checkpoint-badge {
display: inline-block; font-size: 12px; font-weight: 700;
padding: 5px 14px; border-radius: 20px;
background: rgba(232,93,4,.1); color: #E85D04;
margin-bottom: 14px;
}
.kh-checkpoint-q {
font-size: 15px; font-weight: 700; color: var(--cream);
line-height: 1.65; margin-bottom: 16px;
}
.kh-checkpoint-opt {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; margin-bottom: 10px;
background: var(--card2); border: 1px solid var(--border2);
border-radius: 13px; cursor: pointer;
transition: all .2s;
}
.kh-checkpoint-opt:hover { border-color: #E85D04; }
.kh-checkpoint-opt.correct {
background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.5);
}
.kh-checkpoint-opt.wrong {
background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.4);
}
.kh-opt-letter {
width: 30px; height: 30px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; flex-shrink: 0;
background: var(--card3); color: var(--cream);
border: 1px solid var(--border2);
}
.kh-checkpoint-opt.correct .kh-opt-letter {
background: rgba(34,197,94,.15); color: #22c55e; border-color: #22c55e;
}
.kh-checkpoint-opt.wrong .kh-opt-letter {
background: rgba(239,68,68,.1); color: #ef4444; border-color: #ef4444;
}
/* Feedback */
.kh-feedback {
border-radius: 12px; padding: 14px 16px; margin-top: 12px;
font-size: 13px; line-height: 1.65;
}
.kh-feedback.correct {
background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.25);
color: var(--text2);
}
.kh-feedback.wrong {
background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2);
color: var(--text2);
}
.kh-feedback-title {
font-weight: 700; margin-bottom: 4px; font-size: 14px;
}
.kh-feedback.correct .kh-feedback-title { color: #22c55e; }
.kh-feedback.wrong .kh-feedback-title { color: #ef4444; }
/* Navigation Row */
.kh-nav-row {
display: flex; gap: 10px; margin-top: 16px;
justify-content: center;
}
/* Buttons */
.kh-btn {
padding: 11px 22px; border-radius: 12px;
font-size: 13px; font-weight: 700; cursor: pointer;
border: none; transition: all .2s;
font-family: 'Sora', system-ui, sans-serif;
}
.kh-btn.primary {
background: linear-gradient(145deg, #E85D04, #d4530a);
color: #fff; box-shadow: 0 4px 14px rgba(232,93,4,.3);
}
.kh-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,93,4,.4); }
.kh-btn.secondary {
background: var(--card2); color: var(--text2);
border: 1px solid var(--border2);
}
.kh-btn.secondary:hover { background: var(--card3); }
/* Ayna Tekniği */
.kh-ayna-info {
background: var(--card); border: 1px solid var(--border2);
border-radius: 14px; margin-bottom: 20px; overflow: hidden;
}
.kh-ayna-info-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; cursor: pointer;
font-size: 14px; font-weight: 700; color: var(--cream);
}
.kh-ayna-info-content {
padding: 0 18px 16px; color: var(--text2);
font-size: 13px; line-height: 1.7;
border-top: 1px solid var(--border2);
padding-top: 14px;
}
.kh-ayna-info-content p { margin-bottom: 8px; }
.kh-ayna-start-card {
text-align: center; padding: 40px 20px;
background: var(--card); border: 1px solid var(--border2);
border-radius: 16px;
}
.kh-ayna-mirror-icon { font-size: 64px; margin-bottom: 16px; }
.kh-ayna-timer-label {
font-size: 18px; font-weight: 800; color: var(--cream);
margin-bottom: 8px; font-family: 'Sora', system-ui, sans-serif;
}
.kh-ayna-sub { font-size: 13px; color: var(--text3); }
.kh-ayna-timer-card {
background: var(--card); border: 1px solid var(--border2);
border-radius: 16px; padding: 20px;
}
/* Bosluk Doldurma */
.kh-bosluk-sentence {
font-size: 15px; color: var(--cream); line-height: 2;
padding: 20px; background: var(--card); border-radius: 14px;
border: 1px solid var(--border2); margin-bottom: 16px;
font-weight: 500;
}
.kh-blank {
display: inline-block; padding: 4px 16px; min-width: 80px;
border-bottom: 3px solid #E85D04; text-align: center;
font-weight: 700; color: #E85D04; margin: 0 4px;
border-radius: 6px 6px 0 0; background: rgba(232,93,4,.06);
transition: all .3s;
}
.kh-blank.correct { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.08); }
.kh-blank.wrong { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }
.kh-word-bank {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; margin-bottom: 14px;
}
.kh-word-btn {
padding: 8px 16px; border-radius: 10px;
background: var(--card2); border: 1px solid var(--border2);
color: var(--cream); font-size: 13px; font-weight: 600;
cursor: pointer; transition: all .2s;
}
.kh-word-btn:hover:not(:disabled) { border-color: #E85D04; background: rgba(232,93,4,.08); }
.kh-word-btn.correct { background: rgba(34,197,94,.12); border-color: #22c55e; color: #22c55e; }
.kh-word-btn.wrong { background: rgba(239,68,68,.08); border-color: #ef4444; color: #ef4444; }
.kh-word-btn:disabled { opacity: 0.5; cursor: default; }
/* Sub-stage Tabs */
.kh-sub-tabs {
display: flex; gap: 0; margin-bottom: 16px;
border-radius: 10px; overflow: hidden;
border: 1px solid var(--border2);
}
.kh-sub-tab {
flex: 1; padding: 10px; text-align: center;
background: var(--card); color: var(--text2);
border: none; font-size: 12px; font-weight: 700;
cursor: pointer; transition: all .2s;
}
.kh-sub-tab.active { background: #E85D04; color: #fff; }
/* Eslestirme */
.kh-match-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.kh-match-col { display: flex; flex-direction: column; gap: 8px; }
.kh-match-item {
padding: 12px 14px; border-radius: 12px;
font-size: 12px; font-weight: 600; cursor: pointer;
transition: all .2s; text-align: center;
min-height: 44px; display: flex; align-items: center;
justify-content: center;
}
.kh-match-item.left {
background: var(--card); border: 2px solid var(--border2);
color: var(--cream);
}
.kh-match-item.right {
background: var(--card2); border: 2px solid var(--border2);
color: var(--text2);
}
.kh-match-item.left.selected {
border-color: #E85D04; background: rgba(232,93,4,.08);
box-shadow: 0 0 10px rgba(232,93,4,.2);
}
.kh-match-item.matched {
opacity: 0.45; cursor: default;
border-color: #22c55e; background: rgba(34,197,94,.06);
}
/* Complete Card */
.kh-complete-card {
text-align: center; padding: 30px 20px;
background: var(--card); border: 1px solid var(--border2);
border-radius: 16px;
}
.kh-complete-score {
font-size: 20px; font-weight: 800; color: var(--cream);
margin-bottom: 16px;
}
/* Test */
.kh-test-scoreboard {
display: flex; justify-content: center; gap: 16px;
margin-bottom: 14px;
}
.kh-test-stat { font-size: 12px; color: var(--text3); font-weight: 600; }
.kh-test-stat.correct { color: #22c55e; }
.kh-test-stat.wrong { color: #ef4444; }
.kh-diff-badge {
display: inline-block; font-size: 10px; font-weight: 700;
padding: 3px 10px; border-radius: 12px; margin-bottom: 10px;
}
.kh-test-question {
font-size: 15px; font-weight: 700; color: var(--cream);
line-height: 1.65; margin-bottom: 16px; letter-spacing: -0.2px;
}
.kh-test-opt {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px; margin-bottom: 9px;
background: var(--card); border: 1px solid var(--border2);
border-radius: 13px; cursor: pointer;
transition: all .2s; color: var(--cream); font-size: 13px;
}
.kh-test-opt:hover { border-color: rgba(232,93,4,.4); }
.kh-test-opt.correct {
background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.5);
box-shadow: 0 2px 10px rgba(34,197,94,.12);
}
.kh-test-opt.wrong {
background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.4);
}
.kh-test-opt.correct .kh-opt-letter {
background: rgba(34,197,94,.15); color: #22c55e; border-color: #22c55e;
}
.kh-test-opt.wrong .kh-opt-letter {
background: rgba(239,68,68,.1); color: #ef4444; border-color: #ef4444;
}
/* Result Card */
.kh-result-card {
text-align: center; padding: 40px 20px;
background: var(--card); border: 1px solid var(--border2);
border-radius: 20px;
animation: khSlideIn .4s ease;
}
.kh-result-emoji { font-size: 56px; margin-bottom: 12px; }
.kh-result-title {
font-size: 20px; font-weight: 800; color: var(--cream);
margin-bottom: 8px; font-family: 'Sora', system-ui, sans-serif;
}
.kh-result-score {
font-size: 32px; font-weight: 800; color: var(--cream);
margin-bottom: 6px;
}
.kh-result-pct {
font-size: 18px; font-weight: 800; margin-bottom: 16px;
display: inline-block; padding: 4px 16px; border-radius: 20px;
}
.kh-result-pct.pass { background: rgba(34,197,94,.12); color: #22c55e; }
.kh-result-pct.fail { background: rgba(239,68,68,.1); color: #ef4444; }
.kh-result-note {
font-size: 13px; color: var(--text2); line-height: 1.6;
padding: 12px 16px; border-radius: 12px;
background: rgba(232,93,4,.06); border: 1px solid rgba(232,93,4,.15);
margin-bottom: 20px;
}
.kh-result-note.success {
background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.15);
}
/* Responsive */
@media (max-width: 480px) {
.kh-topic-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kh-match-grid { grid-template-columns: 1fr; }
.kh-stage-line { width: 24px; }
.kh-hero-title { font-size: 18px; }
.kh-anlatim-card { padding: 18px 16px; }
.kh-bosluk-sentence { padding: 14px; font-size: 14px; }
.kh-result-score { font-size: 26px; }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.kh-anlatim-card, .kh-checkpoint-card, .kh-result-card {
animation-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE DESIGN SYSTEM
Mobile ≤640px | Tablet 641–1024px | Desktop 1025px+
═══════════════════════════════════════════════════════════ */
/* ---- Bottom Navigation Bar ---- */
.bottom-nav {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 100;
justify-content: space-around;
align-items: stretch;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-top: 1px solid rgba(192,174,156,.22);
padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -2px 16px rgba(0,0,0,.05);
}
[data-theme="dark"] .bottom-nav {
background: rgba(26,26,46,0.96);
border-top-color: rgba(255,255,255,0.06);
box-shadow: 0 -2px 16px rgba(0,0,0,.25);
}
.bottom-nav-btn {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 3px; padding: 6px 2px 4px;
background: none; border: none;
color: var(--text4);
cursor: pointer; transition: color .2s, transform .1s;
flex: 1; min-height: 50px;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.bottom-nav-btn.active { color: var(--accent); }
.bottom-nav-btn:active { transform: scale(0.92); }
.bottom-nav-ico {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
}
.bottom-nav-ico svg {
width: 20px; height: 20px;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bottom-nav-label {
font-size: 0.5625rem; font-weight: 600;
line-height: 1; letter-spacing: 0.1px;
white-space: nowrap;
}
/* ---- Desktop (1025px+) ---- */
@media (min-width: 1025px) {
.container {
padding-left: 28px;
padding-right: 28px;
}
.nav-inner {
padding: 0 28px;
}
.nav-btn {
padding: 9px 16px;
gap: 6px;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* ---- Tablet (641px – 1024px) ---- */
@media (min-width: 641px) and (max-width: 1024px) {
.container {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.nav-inner {
max-width: 100%;
padding: 0 16px;
}
.nav-label { display: none !important; }
.nav-btn {
padding: 7px 10px;
font-size: 0.75rem;
gap: 4px;
}
.grid-3 {
grid-template-columns: repeat(2, 1fr) !important;
}
.card { padding: 18px; }
}
/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
/* Navigation: hide top links, show bottom bar */
.bottom-nav { display: flex !important; }
.nav-links { display: none !important; }
.theme-toggle { order: 1; }
/* Top bar compact */
.nav-inner { height: 50px; padding: 0 12px; }
/* Container: full width + bottom nav clearance */
.container {
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
padding-bottom: 80px !important;
}
/* Cards */
.card { padding: 14px !important; border-radius: 12px !important; }
.card-sm { padding: 10px !important; border-radius: 10px !important; }
/* Touch targets (WCAG 2.5.8) */
.btn, .topic-btn, .sub-btn, .section-tab { min-height: 44px; }
/* Grids */
.grid-2 { grid-template-columns: 1fr !important; gap: 8px !important; }
.grid-3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
/* AI Quiz ders grid: 3 col mobilde yeterli */
.ai-ders-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
/* Konuyu Hallet */
.kh-match-grid { grid-template-columns: 1fr !important; }
/* Typography scaling */
.stat-val { font-size: 1.5rem !important; }
.cd-num strong { font-size: 1.25rem; }
.cd-num span { font-size: 0.5rem; }
/* Overflow prevention */
body { overflow-x: hidden !important; }
#app { overflow-x: hidden; max-width: 100vw; }
}
/* ---- Mobile Small (≤380px) ---- */
@media (max-width: 380px) {
.bottom-nav-label { font-size: 0.5rem; }
.bottom-nav-ico svg { width: 18px; height: 18px; }
.container { padding-left: 8px !important; padding-right: 8px !important; }
.grid-3 { grid-template-columns: 1fr !important; }
.ai-ders-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ═══════════════════════════════════════════════════════════════
TÜRKÇE YAZIM KURALLARI EGZERSİZ MODÜLÜ — .tw-* classes
═══════════════════════════════════════════════════════════════ */
/* ── Layout ── */
.tw-topbar { position:sticky; top:0; z-index:90; display:flex; align-items:center; gap:12px; padding:14px 16px; background:rgba(244,239,233,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border1,rgba(0,0,0,.06)); }
[data-theme="dark"] .tw-topbar { background:rgba(30,30,46,.92); }
.tw-back-btn { background:none; border:none; font-size:15px; color:var(--text2); cursor:pointer; padding:6px 10px; border-radius:8px; font-weight:600; transition:background .2s; }
.tw-back-btn:hover { background:var(--card2); }
.tw-topbar-title { font-size:16px; font-weight:700; color:var(--text); font-family:'Sora',system-ui,sans-serif; }
/* ── Hero ── */
.tw-hero { text-align:center; padding:28px 16px 24px; }
.tw-hero-icon { width:56px; height:56px; border-radius:16px; background:linear-gradient(145deg,#2563EB,#60A5FA); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; box-shadow:0 6px 20px rgba(37,99,235,.3); }
.tw-hero-title { font-size:22px; font-weight:800; color:var(--text); margin-bottom:6px; font-family:'Sora',system-ui,sans-serif; letter-spacing:-.6px; }
.tw-hero-sub { color:var(--text3); font-size:13px; }
/* ── Difficulty Filter Tabs ── */
.tw-diff-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tw-diff-tab { padding:7px 16px; border-radius:20px; border:1.5px solid var(--border2,rgba(0,0,0,.08)); background:var(--card); font-size:13px; font-weight:600; color:var(--text3); cursor:pointer; transition:all .2s; }
.tw-diff-tab:hover { border-color:var(--accent); color:var(--accent); }
.tw-diff-tab.active { background:#2563EB; color:#fff; border-color:#2563EB; }
/* ── Category Grid ── */
.tw-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:24px; }
.tw-cat-card { background:var(--card); border-radius:var(--radius-md,14px); padding:18px 16px; cursor:pointer; border:1.5px solid transparent; transition:all .25s ease; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.tw-cat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.2); }
.tw-cat-card.done { border-color:var(--success); }
.tw-cat-card.in-progress { border-color:#2563EB; }
.tw-cat-icon { font-size:28px; margin-bottom:8px; display:block; }
.tw-cat-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; font-family:'Sora',system-ui,sans-serif; }
.tw-cat-desc { font-size:11px; color:var(--text4); margin-bottom:10px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tw-cat-stats { font-size:11px; color:var(--text3); margin-bottom:8px; }
.tw-cat-badge { display:inline-block; font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; }
.tw-cat-badge.done { background:rgba(72,150,122,.15); color:var(--success); }
.tw-cat-badge.progress { background:rgba(37,99,235,.1); color:#2563EB; }
/* ── Progress Bar ── */
.tw-progress-bar { height:5px; background:var(--card3,#efe9e2); border-radius:3px; overflow:hidden; margin-top:8px; }
.tw-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#2563EB,#60A5FA); transition:width .4s ease; }
/* ── Exercise Screen ── */
.tw-exercise-wrap { max-width:700px; margin:0 auto; padding:0 16px 80px; }
.tw-scoreboard { display:flex; gap:16px; align-items:center; margin-bottom:16px; font-size:13px; color:var(--text3); }
.tw-stat { font-weight:600; }
.tw-stat.correct { color:var(--success); }
.tw-stat.wrong { color:var(--danger); }
.tw-progress-text { font-size:12px; color:var(--text4); margin-bottom:6px; }
.tw-diff-badge { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px; border-radius:10px; margin-bottom:16px; }
.tw-diff-badge.kolay { background:rgba(72,150,122,.15); color:var(--success); }
.tw-diff-badge.orta { background:rgba(245,158,11,.15); color:#D4963A; }
.tw-diff-badge.zor { background:rgba(239,68,68,.12); color:var(--danger); }
/* ── Question Card (shared) ── */
.tw-q-card { background:var(--card); border-radius:var(--radius-md,14px); padding:24px 20px; box-shadow:var(--shadow-sm); margin-bottom:16px; animation:twSlideIn .35s ease; }
@keyframes twSlideIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.tw-q-text { font-size:16px; font-weight:600; color:var(--text); line-height:1.55; margin-bottom:20px; }
.tw-q-rule { font-size:11px; color:var(--text4); margin-bottom:12px; padding:4px 10px; background:var(--card2); border-radius:8px; display:inline-block; }
/* ── Doğru/Yanlış Buttons ── */
.tw-dy-row { display:flex; gap:12px; }
.tw-dy-btn { flex:1; padding:14px; border-radius:12px; border:2px solid var(--border2,rgba(0,0,0,.08)); background:var(--card); font-size:15px; font-weight:700; cursor:pointer; transition:all .2s; }
.tw-dy-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.tw-dy-btn.dogru { color:var(--success); }
.tw-dy-btn.yanlis { color:var(--danger); }
.tw-dy-btn.selected-correct { background:var(--success); color:#fff; border-color:var(--success); }
.tw-dy-btn.selected-wrong { background:var(--danger); color:#fff; border-color:var(--danger); }
.tw-dy-btn:disabled { opacity:.5; cursor:default; transform:none; }
/* ── Çoktan Seçmeli Options ── */
.tw-opt { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:12px; border:1.5px solid var(--border2,rgba(0,0,0,.08)); background:var(--card); margin-bottom:10px; cursor:pointer; transition:all .2s; font-size:14px; color:var(--text); }
.tw-opt:hover:not(.locked) { border-color:#2563EB; background:rgba(37,99,235,.04); }
.tw-opt.locked { cursor:default; }
.tw-opt.correct { border-color:var(--success); background:rgba(72,150,122,.08); }
.tw-opt.wrong { border-color:var(--danger); background:rgba(239,68,68,.06); }
.tw-opt-letter { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--card2); color:var(--text3); flex-shrink:0; }
.tw-opt.correct .tw-opt-letter { background:var(--success); color:#fff; }
.tw-opt.wrong .tw-opt-letter { background:var(--danger); color:#fff; }
/* ── Boşluk Doldurma ── */
.tw-bosluk-sentence { font-size:16px; line-height:1.6; color:var(--text); margin-bottom:20px; }
.tw-blank { display:inline-block; min-width:60px; border-bottom:2px dashed #2563EB; text-align:center; padding:2px 6px; margin:0 4px; font-weight:700; color:#2563EB; }
.tw-blank.correct { border-color:var(--success); color:var(--success); }
.tw-blank.wrong { border-color:var(--danger); color:var(--danger); }
.tw-word-bank { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.tw-word-btn { padding:10px 18px; border-radius:10px; border:1.5px solid var(--border2); background:var(--card); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; color:var(--text); }
.tw-word-btn:hover:not(:disabled) { border-color:#2563EB; background:rgba(37,99,235,.05); }
.tw-word-btn.correct { background:var(--success); color:#fff; border-color:var(--success); }
.tw-word-btn.wrong { background:var(--danger); color:#fff; border-color:var(--danger); }
.tw-word-btn:disabled { opacity:.4; cursor:default; }
/* ── Yanlışı Düzelt ── */
.tw-duzelt-sentence { font-size:16px; line-height:1.6; color:var(--text); margin-bottom:16px; }
.tw-duzelt-wrong { background:rgba(239,68,68,.1); color:var(--danger); padding:2px 6px; border-radius:4px; font-weight:700; text-decoration:underline wavy var(--danger); }
.tw-duzelt-input { width:100%; padding:12px 16px; border-radius:10px; border:1.5px solid var(--border2); font-size:15px; background:var(--card); color:var(--text); outline:none; transition:border-color .2s; }
.tw-duzelt-input:focus { border-color:#2563EB; }
.tw-duzelt-input.correct { border-color:var(--success); background:rgba(72,150,122,.05); }
.tw-duzelt-input.wrong { border-color:var(--danger); background:rgba(239,68,68,.04); }
/* ── Kural Eşleştirme ── */
.tw-match-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tw-match-col { display:flex; flex-direction:column; gap:10px; }
.tw-match-item { padding:12px 14px; border-radius:10px; border:1.5px solid var(--border2); background:var(--card); font-size:13px; cursor:pointer; transition:all .2s; color:var(--text); text-align:center; }
.tw-match-item:hover:not(.matched) { border-color:#2563EB; }
.tw-match-item.selected { border-color:#2563EB; background:rgba(37,99,235,.08); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.tw-match-item.matched { background:rgba(72,150,122,.1); border-color:var(--success); opacity:.6; cursor:default; }
.tw-match-item.wrong-flash { border-color:var(--danger); background:rgba(239,68,68,.08); }
/* ── Paragraf Temizleme ── */
.tw-para-text { font-size:15px; line-height:1.8; color:var(--text); background:var(--card); padding:20px; border-radius:var(--radius-md); border:1.5px solid var(--border2); margin-bottom:16px; }
.tw-para-word { cursor:pointer; padding:1px 2px; border-radius:3px; transition:background .15s; }
.tw-para-word:hover { background:rgba(37,99,235,.1); }
.tw-para-word.found { background:rgba(72,150,122,.2); text-decoration:line-through; color:var(--success); }
.tw-para-word.missed { background:rgba(239,68,68,.15); text-decoration:underline wavy var(--danger); }
.tw-para-word.error-marked { background:rgba(37,99,235,.15); border-bottom:2px solid #2563EB; }
.tw-para-score { font-size:13px; color:var(--text3); margin-top:8px; }
/* ── Hızlı Karar ── */
.tw-hk-card { text-align:center; padding:32px 20px; }
.tw-hk-timer { font-size:48px; font-weight:800; color:#2563EB; font-family:'JetBrains Mono',monospace; margin-bottom:8px; }
.tw-hk-timer.warning { color:var(--danger); animation:twPulse .5s ease infinite alternate; }
@keyframes twPulse { from{opacity:1} to{opacity:.4} }
.tw-hk-word { font-size:24px; font-weight:700; color:var(--text); margin:20px 0; padding:16px; background:var(--card2); border-radius:12px; }
.tw-hk-score { font-size:14px; color:var(--text3); margin-top:16px; }
/* ── Feedback ── */
.tw-feedback { padding:16px 18px; border-radius:12px; margin-top:16px; animation:twSlideIn .25s ease; }
.tw-feedback.correct { background:rgba(72,150,122,.1); border-left:4px solid var(--success); }
.tw-feedback.wrong { background:rgba(239,68,68,.08); border-left:4px solid var(--danger); }
.tw-feedback-title { font-size:14px; font-weight:700; margin-bottom:6px; }
.tw-feedback.correct .tw-feedback-title { color:var(--success); }
.tw-feedback.wrong .tw-feedback-title { color:var(--danger); }
.tw-feedback-exp { font-size:13px; color:var(--text2); line-height:1.5; }
.tw-feedback-rule { display:inline-block; margin-top:8px; font-size:11px; color:var(--text4); background:var(--card2); padding:3px 8px; border-radius:6px; }
/* ── Navigation Row ── */
.tw-nav-row { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.tw-btn { padding:12px 24px; border-radius:12px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; }
.tw-btn:hover { transform:translateY(-1px); }
.tw-btn.primary { background:linear-gradient(145deg,#2563EB,#3B82F6); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.3); }
.tw-btn.primary:hover { box-shadow:0 6px 20px rgba(37,99,235,.4); }
.tw-btn.secondary { background:var(--card2); color:var(--text2); }
.tw-btn.secondary:hover { background:var(--card3); }
/* ── Result Screen ── */
.tw-result-card { background:var(--card); border-radius:var(--radius-lg,18px); padding:32px 24px; box-shadow:var(--shadow-md); text-align:center; animation:twSlideIn .4s ease; }
.tw-result-title { font-size:22px; font-weight:800; margin-bottom:8px; font-family:'Sora',system-ui,sans-serif; }
.tw-result-score { font-size:40px; font-weight:800; color:#2563EB; margin:16px 0; font-family:'JetBrains Mono',monospace; }
.tw-result-pct { font-size:18px; font-weight:700; margin-bottom:16px; }
.tw-result-pct.pass { color:var(--success); }
.tw-result-pct.fail { color:var(--danger); }
.tw-result-note { font-size:14px; color:var(--text3); margin-bottom:20px; line-height:1.5; }
.tw-result-breakdown { text-align:left; margin:16px 0; padding:16px; background:var(--card2); border-radius:12px; }
.tw-result-breakdown dt { font-size:12px; color:var(--text4); margin-bottom:2px; }
.tw-result-breakdown dd { font-size:14px; font-weight:600; color:var(--text); margin-bottom:10px; margin-left:0; }
/* ── Mobile Responsive ── */
@media (max-width: 640px) {
.tw-cat-grid { grid-template-columns: 1fr 1fr !important; }
.tw-match-grid { grid-template-columns: 1fr !important; }
.tw-hero-title { font-size:18px; }
.tw-hk-word { font-size:20px; }
.tw-hk-timer { font-size:36px; }
.tw-q-text { font-size:15px; }
.tw-result-score { font-size:32px; }
}
@media (max-width: 380px) {
.tw-cat-grid { grid-template-columns: 1fr !important; }
.tw-dy-row { flex-direction:column; }
}
/* ═══════════════════════════════════════════════════════════════
PARAGRAF SORULARI UZMANI — .ps-* classes
═══════════════════════════════════════════════════════════════ */
/* Top Bar */
.ps-topbar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(250,250,250,.95); border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
[data-theme="dark"] .ps-topbar { background:rgba(30,39,70,.95); border-bottom-color:rgba(255,255,255,.06); }
.ps-back-btn { background:var(--card2); border:1px solid rgba(192,174,156,.3); font-size:12px; color:var(--text2); cursor:pointer; padding:7px 16px; border-radius:10px; font-weight:600; transition:all .2s; display:flex; align-items:center; gap:5px; }
.ps-back-btn:hover { background:rgba(0,0,0,.05); border-color:rgba(192,174,156,.5); }
.ps-topbar-title { font-weight:700; font-size:15px; color:var(--navy); font-family:'Sora',system-ui,sans-serif; }
/* Level Badge */
.ps-level-badge { padding:4px 12px; border-radius:8px; font-size:11px; font-weight:700; }
.ps-level-badge.baslangic { background:rgba(239,68,68,.1); color:#ef4444; }
.ps-level-badge.orta { background:rgba(245,158,11,.1); color:#f59e0b; }
.ps-level-badge.ileri { background:rgba(34,197,94,.1); color:#22c55e; }
.ps-level-badge.uzman { background:rgba(99,102,241,.1); color:#6366f1; }
/* Hero */
.ps-hero { background:linear-gradient(145deg,#6366f1,#818cf8); border-radius:16px; padding:32px 24px; text-align:center; margin-bottom:24px; }
/* Buttons */
.ps-btn { padding:10px 18px; border-radius:10px; border:none; font-weight:600; cursor:pointer; font-size:13px; font-family:'Sora',system-ui,sans-serif; transition:all .2s; }
.ps-btn.primary { background:#6366f1; color:#fff; }
.ps-btn.primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,.35); }
.ps-btn.primary:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.ps-btn.secondary { background:var(--card2,rgba(0,0,0,.04)); color:var(--text2); }
.ps-btn.secondary:hover { background:var(--card3,rgba(0,0,0,.08)); }
/* Type Grid */
.ps-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.ps-type-card { background:var(--white,#fff); border:2px solid rgba(0,0,0,.06); border-radius:12px; padding:14px 12px; cursor:pointer; transition:all .2s; text-align:center; }
.ps-type-card:hover { border-color:#6366f1; transform:translateY(-2px); box-shadow:0 4px 16px rgba(99,102,241,.15); }
.ps-type-card.locked { opacity:.4; cursor:not-allowed; }
.ps-type-card.locked:hover { border-color:rgba(0,0,0,.06); transform:none; box-shadow:none; }
.ps-type-card.mastered { border-color:rgba(34,197,94,.3); }
/* Strategy Card */
.ps-strategy-card { background:var(--white,#fff); border-radius:16px; padding:24px 20px; border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 20px rgba(0,0,0,.04); }
.ps-strategy-step { display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
.ps-strategy-step-num { width:28px; height:28px; border-radius:50%; background:rgba(99,102,241,.1); color:#6366f1; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; }
.ps-strategy-tips { background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.15); border-radius:10px; padding:12px 16px; }
.ps-strategy-tip { font-size:12px; color:#b45309; line-height:1.6; margin-bottom:4px; }
.ps-strategy-tip:last-child { margin-bottom:0; }
/* Timer */
.ps-timer-wrap { height:6px; background:rgba(0,0,0,.06); border-radius:3px; overflow:hidden; margin-bottom:16px; }
.ps-timer-bar { height:100%; border-radius:3px; transition:width 1s linear, background .3s; }
/* Quiz Card */
.ps-quiz-card { background:var(--white,#fff); border-radius:16px; padding:20px; border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 20px rgba(0,0,0,.04); }
.ps-quiz-paragraph { font-size:14px; line-height:1.85; color:var(--text1); margin-bottom:16px; padding:16px; background:rgba(99,102,241,.03); border-radius:12px; border-left:4px solid #6366f1; text-align:justify; }
.ps-quiz-question { font-size:14px; font-weight:600; color:var(--navy); margin-bottom:14px; line-height:1.5; }
/* Options */
.ps-quiz-options { display:flex; flex-direction:column; gap:8px; }
.ps-option { display:flex; align-items:center; gap:10px; padding:12px 14px; border:2px solid rgba(0,0,0,.08); border-radius:10px; cursor:pointer; transition:all .2s; font-size:13px; color:var(--text1); line-height:1.5; }
.ps-option:hover { border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.03); }
.ps-option.selected { border-color:#6366f1; background:rgba(99,102,241,.06); }
.ps-option.correct { border-color:#22c55e; background:rgba(34,197,94,.06); }
.ps-option.wrong { border-color:#ef4444; background:rgba(239,68,68,.06); }
.ps-option-letter { width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,.04); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:var(--text3); flex-shrink:0; }
.ps-option.correct .ps-option-letter { background:rgba(34,197,94,.15); color:#22c55e; }
.ps-option.wrong .ps-option-letter { background:rgba(239,68,68,.15); color:#ef4444; }
/* Feedback */
.ps-feedback { margin-top:14px; padding:14px 16px; border-radius:10px; border-left:4px solid transparent; }
.ps-feedback.correct { background:rgba(34,197,94,.04); border-left-color:#22c55e; }
.ps-feedback.wrong { background:rgba(239,68,68,.04); border-left-color:#ef4444; }
.ps-feedback-title { font-weight:700; font-size:14px; color:var(--navy); margin-bottom:6px; }
.ps-feedback-time { font-size:12px; color:var(--text3); margin-bottom:6px; }
.ps-feedback-explanation { font-size:13px; color:var(--text2); line-height:1.6; }
/* Option explanations */
.ps-option-explanations { margin-top:14px; padding-top:14px; border-top:1px dashed rgba(0,0,0,.1); }
.ps-opt-exp { display:flex; align-items:flex-start; gap:8px; padding:6px 8px; margin-bottom:4px; border-radius:8px; font-size:12px; line-height:1.5; color:var(--text2); }
.ps-opt-exp.correct { background:rgba(34,197,94,.06); color:#16a34a; font-weight:600; }
.ps-opt-exp.wrong { background:rgba(239,68,68,.06); color:#dc2626; }
.ps-opt-exp-letter { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:700; flex-shrink:0; background:rgba(0,0,0,.05); color:var(--text3); }
.ps-opt-exp.correct .ps-opt-exp-letter { background:rgba(34,197,94,.15); color:#16a34a; }
.ps-opt-exp.wrong .ps-opt-exp-letter { background:rgba(239,68,68,.15); color:#dc2626; }
/* Daily plan */
.ps-daily-plan { background:var(--white); border-radius:16px; padding:20px; border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 20px rgba(0,0,0,.04); }
/* Question navigator */
.ps-q-nav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.ps-q-dot { width:32px; height:32px; border-radius:8px; border:1.5px solid rgba(0,0,0,.1); background:var(--white); color:var(--text3); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.ps-q-dot:hover { border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.05); }
.ps-q-dot.active { border-color:#6366f1; background:rgba(99,102,241,.1); color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.15); }
.ps-q-dot.correct { border-color:#22c55e; background:rgba(34,197,94,.1); color:#16a34a; }
.ps-q-dot.correct.active { box-shadow:0 0 0 2px rgba(34,197,94,.2); }
.ps-q-dot.wrong { border-color:#ef4444; background:rgba(239,68,68,.1); color:#dc2626; }
.ps-q-dot.wrong.active { box-shadow:0 0 0 2px rgba(239,68,68,.2); }
/* Dark mode overrides */
[data-theme="dark"] .ps-hero { background:linear-gradient(145deg,#4338ca,#6366f1); }
[data-theme="dark"] .ps-quiz-card, [data-theme="dark"] .ps-strategy-card { background:var(--card); border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .ps-type-card { background:var(--card); border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .ps-option { border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .ps-option:hover { border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.08); }
[data-theme="dark"] .ps-quiz-paragraph { background:rgba(99,102,241,.06); }
[data-theme="dark"] .ps-strategy-tips { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.2); }
[data-theme="dark"] .ps-option-explanations { border-top-color:rgba(255,255,255,.1); }
[data-theme="dark"] .ps-opt-exp-letter { background:rgba(255,255,255,.08); color:var(--text3); }
[data-theme="dark"] .ps-daily-plan { background:var(--card); border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .ps-q-dot { background:var(--card); border-color:rgba(255,255,255,.1); color:var(--text3); }
[data-theme="dark"] .ps-q-dot:hover { border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.1); }
/* Responsive */
@media (max-width: 600px) {
.ps-type-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.ps-quiz-paragraph { font-size:13px; padding:12px; }
.ps-strategy-card { padding:16px 14px; }
.ps-hero { padding:24px 16px; }
}
@media (max-width: 380px) {
.ps-type-grid { grid-template-columns:repeat(2,1fr); }
}
/* ═══════════════════════════════════════════════════════════
HIZLI OKUMA MODÜLÜ — CSS
═══════════════════════════════════════════════════════════ */
/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
.ho-animate, .ho-card, .ho-exercise-btn, .ho-progress-fill,
.ho-word-display, .ho-nav-header, .ho-toast { transition: none !important; animation: none !important; }
}
/* --- Layout --- */
.ho-container { padding: 20px 16px 80px; max-width: 800px; margin: 0 auto; }
/* --- Navigation Header --- */
.ho-nav-header {
display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
padding: 0; position: sticky; top: 0; z-index: 50;
background: var(--bg); padding: 12px 0 8px;
}
.ho-nav-back {
width: 40px; height: 40px; border-radius: 12px;
background: var(--card); border: 1px solid var(--border2);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .2s ease; flex-shrink: 0;
color: var(--cream); font-size: 16px; font-weight: 600;
}
.ho-nav-back:hover { background: var(--card2); transform: translateY(-1px); }
.ho-nav-back:active { transform: scale(.97); }
.ho-nav-back:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.ho-nav-title {
font-size: 18px; font-weight: 800; color: var(--navy);
font-family: 'Sora', system-ui, sans-serif; margin: 0;
letter-spacing: -0.3px;
}
.ho-nav-subtitle { font-size: 11px; color: var(--text4); margin-top: 2px; }
/* --- Welcome Card --- */
.ho-welcome {
background: linear-gradient(160deg, #32302B 0%, #1a1816 100%);
border-radius: var(--radius-xl); padding: 36px 28px;
color: #fff; margin-bottom: 28px; position: relative; overflow: hidden;
}
.ho-welcome::before {
content: ''; position: absolute; top: -60px; right: -60px;
width: 200px; height: 200px; border-radius: 50%;
background: rgba(212,105,78,.12);
}
.ho-welcome::after {
content: ''; position: absolute; bottom: -30px; left: -30px;
width: 120px; height: 120px; border-radius: 50%;
background: rgba(212,105,78,.06);
}
.ho-welcome > * { position: relative; z-index: 1; }
[data-theme="dark"] .ho-welcome { background: linear-gradient(160deg, #1e2746 0%, #16213e 100%); }
/* --- Exercise Grid --- */
.ho-exercise-grid {
display: grid; grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 480px) { .ho-exercise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .ho-exercise-grid { grid-template-columns: repeat(3, 1fr); } }
/* --- Exercise Card --- */
.ho-card {
background: var(--card); border-radius: var(--radius-md);
padding: 18px 16px; border: 1px solid var(--border2);
box-shadow: var(--shadow-sm); cursor: pointer;
transition: all .25s cubic-bezier(.4,0,.2,1);
position: relative; overflow: hidden;
}
.ho-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(212,105,78,.2);
}
.ho-card:active { transform: scale(.98) translateY(0); }
.ho-card:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.ho-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ho-card-icon {
width: 36px; height: 36px; border-radius: 10px;
background: var(--card2); display: flex; align-items: center;
justify-content: center; font-size: 18px; flex-shrink: 0;
transition: background .2s;
}
.ho-card:hover .ho-card-icon { background: var(--card3); }
.ho-card-name {
font-size: 13px; font-weight: 800; color: var(--cream);
font-family: 'Sora', system-ui, sans-serif;
}
.ho-card-duration { font-size: 10px; font-weight: 600; color: var(--text4); }
.ho-card-skill { font-size: 11px; color: var(--text3); line-height: 1.55; }
.ho-card-cta {
font-size: 11px; color: var(--accent); font-weight: 700;
margin-top: 10px; display: flex; align-items: center; gap: 4px;
}
/* --- Day Program Card --- */
.ho-day-card {
background: var(--card); border-radius: var(--radius-lg);
padding: 24px 20px; margin-bottom: 20px;
border: 1px solid var(--border2); box-shadow: var(--shadow-sm);
}
.ho-day-badge {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(145deg, var(--accent), var(--accent3));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px; font-weight: 900;
font-family: 'Sora', system-ui, sans-serif; flex-shrink: 0;
}
.ho-day-title {
font-size: 17px; font-weight: 900; color: var(--cream);
font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.3px;
}
/* --- Exercise Row (Day exercises) --- */
.ho-exercise-row {
display: flex; align-items: center; gap: 14px;
background: var(--card); border-radius: var(--radius-md);
padding: 16px; margin-bottom: 8px;
border: 1px solid var(--border2); transition: all .2s;
}
.ho-exercise-row.done {
background: var(--card2);
border-color: rgba(72,150,122,.2);
}
.ho-exercise-status {
width: 32px; height: 32px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; flex-shrink: 0;
background: var(--card3); color: var(--text2);
font-family: 'Sora', system-ui, sans-serif;
}
.ho-exercise-status.done { background: var(--success); color: #fff; font-size: 14px; }
/* --- Progress Bar --- */
.ho-progress-bar {
display: flex; gap: 2px; margin-bottom: 20px; height: 4px;
}
.ho-progress-segment {
flex: 1; border-radius: 2px;
background: var(--card3); transition: all .3s;
}
.ho-progress-segment.filled { background: var(--accent); }
.ho-progress-segment.current { background: var(--accent); opacity: .35; }
/* --- Day Grid (21-day navigator) --- */
.ho-day-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.ho-day-cell {
height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; cursor: pointer;
background: var(--card3); color: var(--text3);
border: 1px solid transparent; transition: all .2s;
font-family: 'Sora', system-ui, sans-serif;
}
.ho-day-cell.done { background: var(--accent); color: #fff; }
.ho-day-cell.current { background: rgba(212,105,78,.08); color: var(--accent); border-color: var(--accent); }
.ho-day-cell.future { opacity: .35; cursor: default; }
.ho-day-cell:focus-visible { box-shadow: var(--focus-ring); outline: none; }
/* --- Exercise Buttons --- */
.ho-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 5px; padding: 8px 18px; border-radius: 10px;
font-size: 12px; font-weight: 700; cursor: pointer;
border: none; transition: all .15s ease;
font-family: inherit; min-height: 36px; min-width: 36px;
}
.ho-btn:active { transform: scale(.97); }
.ho-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.ho-btn-primary {
background: linear-gradient(145deg, var(--accent), var(--accent3));
color: #fff; box-shadow: var(--shadow-accent);
}
.ho-btn-primary:hover { box-shadow: 0 8px 24px rgba(212,105,78,.35); }
.ho-btn-start {
background: linear-gradient(145deg, var(--ho-color, var(--accent)), var(--ho-color-dark, var(--accent3)));
color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.ho-btn-start:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.ho-btn-pause { background: #EF4444; color: #fff; }
.ho-btn-pause:hover { background: #DC2626; }
.ho-btn-resume { background: #22C55E; color: #fff; }
.ho-btn-resume:hover { background: #16A34A; }
.ho-btn-complete {
background: linear-gradient(145deg, #22C55E, #16A34A);
color: #fff; border-radius: 12px; padding: 14px 32px;
font-size: 14px; font-weight: 800;
box-shadow: 0 4px 14px rgba(34,197,94,.35);
}
.ho-btn-complete:hover { box-shadow: 0 6px 20px rgba(34,197,94,.4); }
.ho-btn-secondary {
background: var(--card2); color: var(--text2);
border: 1px solid var(--border2);
}
.ho-btn-secondary:hover { background: var(--card3); }
.ho-btn-ghost {
background: transparent; color: var(--text3);
border: 1px solid var(--border2);
}
/* --- Text Selection Grid --- */
.ho-text-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (min-width: 600px) {
.ho-text-grid { grid-template-columns: repeat(3, 1fr); }
}
.ho-text-card {
background: var(--card); border-radius: 12px; padding: 14px;
border: 1px solid var(--border2); cursor: pointer;
transition: all .2s; min-height: 44px;
}
.ho-text-card:hover {
border-color: rgba(212,105,78,.25);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.ho-text-card:active { transform: scale(.98); }
.ho-text-card.active {
border-color: var(--accent);
background: rgba(212,105,78,.04);
}
.ho-text-title {
font-size: 13px; font-weight: 700; color: var(--cream);
margin-bottom: 4px; line-height: 1.3;
}
.ho-text-meta { font-size: 11px; color: var(--text3); }
/* --- Difficulty Badge --- */
.ho-badge {
font-size: 9px; font-weight: 700; padding: 2px 8px;
border-radius: 6px; white-space: nowrap; display: inline-block;
}
.ho-badge-easy { color: #22C55E; background: rgba(34,197,94,.1); }
.ho-badge-medium { color: #F59E0B; background: rgba(245,158,11,.1); }
.ho-badge-hard { color: #EF4444; background: rgba(239,68,68,.1); }
/* --- WPM Display --- */
.ho-wpm-display {
font-size: 48px; font-weight: 900; color: var(--accent);
font-family: 'JetBrains Mono', 'Sora', monospace;
text-align: center; line-height: 1;
}
.ho-wpm-label {
font-size: 14px; color: var(--text3); text-align: center;
margin-top: 4px;
}
.ho-wpm-level {
display: inline-block; margin-top: 12px;
padding: 6px 16px; border-radius: 20px;
font-size: 13px; font-weight: 700;
}
/* --- Timer Display --- */
.ho-timer {
font-size: 28px; font-weight: 800; color: var(--accent);
font-family: 'JetBrains Mono', monospace; text-align: center;
}
.ho-timer-warn { color: #F59E0B; }
.ho-timer-danger { color: #EF4444; }
/* --- Word Display (RSVP) --- */
.ho-word-box {
background: var(--card); border-radius: 16px;
padding: 40px 20px; text-align: center;
margin-bottom: 16px; min-height: 120px;
display: flex; align-items: center; justify-content: center;
flex-direction: column; border: 1px solid var(--border2);
}
.ho-word {
font-size: 38px; font-weight: 800; letter-spacing: 2px;
font-family: 'Sora', monospace;
}
.ho-word-orp { color: #E85D75; }
.ho-word-normal { color: var(--cream); }
/* --- Progress Bar (Exercise) --- */
.ho-ex-progress {
height: 5px; background: var(--card3); border-radius: 3px;
overflow: hidden; margin-bottom: 8px;
}
.ho-ex-progress-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, #F59E0B, #E85D75);
transition: width .15s ease;
}
/* --- Text Reading Area --- */
.ho-text-area {
background: var(--card); border-radius: 14px;
padding: 24px; border: 1px solid var(--border2);
font-size: 16px; line-height: 2; color: var(--cream);
max-height: 60vh; overflow-y: auto;
font-family: Georgia, 'Times New Roman', serif;
text-align: justify;
}
.ho-text-area.blurred { filter: blur(4px); pointer-events: none; }
/* --- Speed Control --- */
.ho-speed-control {
display: flex; align-items: center; gap: 12px;
justify-content: center; margin-bottom: 16px;
}
.ho-speed-label {
font-size: 11px; color: var(--text4); min-width: 50px;
}
.ho-speed-slider {
width: 200px; accent-color: var(--accent);
cursor: pointer; height: 6px;
}
@media (max-width: 480px) {
.ho-speed-slider { width: 140px; }
}
/* --- Controls Row --- */
.ho-controls {
display: flex; gap: 10px; justify-content: center;
flex-wrap: wrap; margin-bottom: 16px;
}
/* --- Eye Exercise SVG Area --- */
.ho-eye-canvas {
background: var(--card); border-radius: 16px;
padding: 20px; border: 1px solid var(--border2);
margin-bottom: 12px;
}
.ho-eye-canvas svg {
width: 100%; max-width: 500px; display: block; margin: 0 auto;
}
/* --- Eye Exercise Tabs --- */
.ho-tabs {
display: flex; gap: 5px; margin-bottom: 12px;
overflow-x: auto; padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ho-tabs::-webkit-scrollbar { display: none; }
.ho-tab {
padding: 7px 12px; border-radius: 10px;
border: 1px solid var(--border2); background: var(--card);
color: var(--text2); font-size: 11px; font-weight: 700;
cursor: pointer; white-space: nowrap; min-height: 36px;
transition: all .15s;
}
.ho-tab.active {
border: 2px solid #3B82F6; background: rgba(59,130,246,.06);
color: #3B82F6;
}
.ho-tab:focus-visible { box-shadow: var(--focus-ring); outline: none; }
/* --- Speed Banner --- */
.ho-speed-banner {
display: flex; align-items: center; justify-content: center;
gap: 12px; margin-bottom: 14px; background: var(--card2);
border-radius: 10px; padding: 10px 16px; border: 1px solid var(--border2);
}
.ho-speed-value {
font-size: 15px; font-weight: 800; color: var(--ho-color, #3B82F6);
font-family: 'Sora', monospace; min-width: 40px; text-align: center;
}
/* --- Speed Buttons --- */
.ho-speed-btn {
padding: 5px 12px; border-radius: 8px;
border: 1px solid var(--border2); background: var(--card2);
color: var(--text2); font-size: 11px; font-weight: 700;
cursor: pointer; min-height: 32px; transition: all .15s;
}
.ho-speed-btn.active {
border: 2px solid #3B82F6; background: rgba(59,130,246,.06);
color: #3B82F6;
}
.ho-speed-btn.recommended {
border: 2px dashed #22C55E;
}
/* --- Formation Text Area --- */
.ho-form-line {
padding: 2px 6px; border-radius: 6px;
transition: background .2s, color .2s;
}
.ho-form-line.active {
background: rgba(139,92,246,.12); color: var(--accent);
}
.ho-form-line.past { color: var(--text4); }
.ho-form-line.hidden { color: rgba(0,0,0,.15); }
[data-theme="dark"] .ho-form-line.hidden { color: rgba(255,255,255,.1); }
/* --- Tachisto Flash Zone --- */
.ho-flash-zone {
min-height: 100px; display: flex; align-items: center;
justify-content: center; background: var(--card);
border-radius: 14px; border: 1px solid var(--border2);
margin-bottom: 16px; padding: 16px;
}
.ho-flash-word {
font-size: 20px; font-weight: 800; color: var(--cream);
letter-spacing: 2px; font-family: 'Sora', system-ui;
}
/* --- Text Select Accordion --- */
.ho-text-select-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-radius: 10px; cursor: pointer;
background: var(--card2); border: 1px solid var(--border2);
margin-bottom: 10px; transition: all .15s;
}
.ho-text-select-header:hover { background: var(--card3); }
.ho-text-select-header .ho-section-arrow {
font-size: 10px; color: var(--text4); transition: transform .2s;
}
.ho-text-select-header .ho-section-arrow.open { transform: rotate(180deg); }
/* --- Cut Text --- */
.ho-cut-text {
background: var(--card); border-radius: 14px;
padding: 24px; border: 1px solid var(--border2);
font-size: 16px; line-height: 2.4; color: var(--cream);
font-family: Georgia, serif; overflow: hidden;
max-height: 60vh; overflow-y: auto;
}
.ho-cut-line {
clip-path: inset(0 0 var(--cut-pct, 40%) 0);
transition: clip-path .3s;
}
/* --- Bionic Text --- */
.ho-bionic-text b { color: var(--cream); font-weight: 900; }
.ho-bionic-text {
background: var(--card); border-radius: 14px;
padding: 24px; border: 1px solid var(--border2);
font-size: 15px; line-height: 2; color: var(--cream);
font-family: Georgia, serif; text-align: justify;
max-height: 60vh; overflow-y: auto;
}
/* --- Metronome Line --- */
.ho-metro-line {
padding: 2px 6px; border-radius: 4px;
transition: all .2s;
}
.ho-metro-line.active {
background: rgba(14,165,233,.15); color: var(--cream);
}
.ho-metro-line.past { color: var(--text4); }
/* --- Pacer Highlight --- */
.ho-pacer-bar {
position: absolute; left: 0; top: 0; bottom: 0;
background: rgba(16,185,129,.15); border-radius: 3px;
pointer-events: none; transition: width 50ms linear;
}
/* --- Result Card --- */
.ho-result {
background: var(--card2); border-radius: 14px;
padding: 24px; text-align: center;
}
.ho-result-score {
font-size: 20px; font-weight: 800;
font-family: 'Sora', system-ui, sans-serif;
}
.ho-result-label {
font-size: 10px; color: var(--text3); margin-top: 2px;
}
/* --- Completion Done Card --- */
.ho-done-card {
background: var(--card); border-radius: var(--radius-lg);
padding: 28px 24px; text-align: center; margin-bottom: 24px;
border: 1px solid rgba(72,150,122,.25); box-shadow: var(--shadow-sm);
}
.ho-done-icon {
width: 48px; height: 48px; border-radius: 14px;
background: rgba(72,150,122,.1); display: flex;
align-items: center; justify-content: center;
font-size: 22px; margin: 0 auto 12px;
}
/* --- Toast --- */
.ho-toast {
position: fixed; bottom: 100px; left: 50%;
transform: translateX(-50%);
padding: 12px 24px; border-radius: 12px;
font-size: 13px; font-weight: 700; z-index: 9999;
box-shadow: 0 4px 20px rgba(0,0,0,.2);
animation: ho-toast-in .3s ease;
}
.ho-toast-warning { background: #E85D75; color: #fff; }
.ho-toast-success { background: #22C55E; color: #fff; }
.ho-toast-info { background: #3B82F6; color: #fff; }
@keyframes ho-toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* --- Module Description Box --- */
.ho-module-desc {
background: linear-gradient(135deg, var(--card2), var(--card));
border-radius: var(--radius-md); padding: 16px;
margin-bottom: 20px; border: 1px solid var(--border2);
display: flex; gap: 14px;
}
.ho-module-tip {
display: flex; align-items: flex-start; gap: 6px;
background: rgba(72,150,122,.08); border-radius: 8px;
padding: 10px 12px; border: 1px solid rgba(72,150,122,.12);
}
/* --- Section Toggle (Serbest Çalışma) --- */
.ho-section-toggle {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; padding: 14px 16px; background: var(--card);
border-radius: var(--radius-md); border: 1px solid var(--border2);
transition: all .2s;
}
.ho-section-toggle:hover { background: var(--card2); }
.ho-section-arrow {
font-size: 18px; color: var(--text3);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.ho-section-arrow.open { transform: rotate(180deg); }
/* --- Phase Banner --- */
.ho-phase-banner {
display: flex; align-items: center; justify-content: space-between;
background: var(--card2); border: 1px solid var(--border2);
border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
}
.ho-phase-icon {
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(145deg, var(--accent), var(--accent3));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 12px; font-weight: 900;
}
/* --- WPM Trend --- */
.ho-trend-value {
font-size: 24px; font-weight: 900;
font-family: 'Sora', system-ui, sans-serif;
}
.ho-trend-change {
background: rgba(72,150,122,.1); color: var(--success);
font-size: 13px; font-weight: 800; padding: 6px 14px;
border-radius: 10px; border: 1px solid rgba(72,150,122,.2);
}
/* --- Comprehension Quiz --- */
.ho-quiz-option {
display: block; width: 100%; padding: 12px 16px;
margin-bottom: 8px; border-radius: 10px;
border: 1px solid var(--border2); background: var(--card);
color: var(--cream); font-size: 13px; text-align: left;
cursor: pointer; transition: all .15s; min-height: 44px;
}
.ho-quiz-option:hover { border-color: rgba(212,105,78,.3); }
.ho-quiz-option.selected {
border: 2px solid var(--accent);
background: rgba(212,105,78,.08); font-weight: 700;
}
/* --- Section Label --- */
.ho-section-label {
font-size: 11px; font-weight: 700; color: var(--text3);
margin-bottom: 12px; text-transform: uppercase;
letter-spacing: 1px;
}
/* --- Tip Box --- */
.ho-tip-box {
font-size: 12px; color: var(--text3); line-height: 1.5;
padding: 8px 12px; margin-bottom: 14px;
background: var(--card2); border-radius: 8px;
}
/* --- Done Card Sub-elements --- */
.ho-done-card-title {
font-size: 14px; font-weight: 700; color: #22C55E; margin-bottom: 4px;
}
.ho-done-card-detail {
font-size: 12px; color: var(--text3);
}
/* --- Setting Row --- */
.ho-setting-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px; flex-wrap: wrap;
}
.ho-setting-label {
font-size: 11px; color: var(--text4); white-space: nowrap;
}
.ho-setting-value {
font-size: 11px; color: var(--text4); font-weight: 700;
}
/* --- Setting Button (Tachisto group size, etc) --- */
.ho-setting-btn {
padding: 6px 12px; border-radius: 8px;
border: 1px solid rgba(0,0,0,.1); background: var(--card);
color: var(--text2); font-size: 11px; font-weight: 700;
cursor: pointer; transition: all .15s; min-height: 32px;
}
.ho-setting-btn.active {
border: 2px solid var(--accent); background: rgba(212,105,78,.06);
color: var(--accent);
}
[data-theme="dark"] .ho-setting-btn { background: var(--card); border-color: rgba(255,255,255,.08); }
/* --- Toggle Button --- */
.ho-toggle-btn {
padding: 8px 20px; border-radius: 10px; border: none;
font-size: 12px; font-weight: 700; cursor: pointer;
transition: all .2s; min-height: 36px;
}
.ho-toggle-btn.on { background: #F97316; color: #fff; }
.ho-toggle-btn.off { background: var(--card2); color: var(--text2); }
/* --- Comprehension Timer --- */
.ho-comp-timer {
text-align: center; font-size: 20px; font-weight: 800;
color: var(--accent); margin-bottom: 12px;
font-family: 'JetBrains Mono', monospace;
}
/* --- Stats Row (Comprehension results) --- */
.ho-stats-row {
display: flex; justify-content: center; gap: 24px;
margin-bottom: 16px;
}
.ho-stat-value {
font-size: 18px; font-weight: 800;
font-family: 'Sora', system-ui, sans-serif;
}
.ho-stat-label {
font-size: 10px; color: var(--text3); margin-top: 2px;
}
/* --- Question Header --- */
.ho-question-num {
font-size: 12px; color: var(--text4); margin-bottom: 8px;
}
.ho-question-text {
font-size: 15px; font-weight: 700; color: var(--cream);
margin-bottom: 16px; line-height: 1.5;
}
/* --- Description Text --- */
.ho-desc-text {
color: var(--text3); font-size: 13px; margin-bottom: 16px; line-height: 1.6;
}
/* --- Mobile Optimizations --- */
@media (max-width: 480px) {
.ho-container { padding: 16px 12px 80px; }
.ho-welcome { padding: 28px 20px; }
.ho-text-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.ho-word { font-size: 30px; }
.ho-wpm-display { font-size: 40px; }
.ho-timer { font-size: 24px; }
.ho-text-area { padding: 16px; font-size: 15px; }
.ho-controls { gap: 8px; }
.ho-btn { padding: 10px 18px; font-size: 12px; }
}
@media (max-width: 360px) {
.ho-text-grid { grid-template-columns: 1fr; }
.ho-exercise-grid { gap: 8px; }
.ho-card { padding: 14px 12px; }
}
/* --- Dark Mode Overrides --- */
[data-theme="dark"] .ho-card { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-card:hover { border-color: rgba(212,105,78,.3); }
[data-theme="dark"] .ho-text-card { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-text-card:hover { border-color: rgba(212,105,78,.2); }
[data-theme="dark"] .ho-text-area { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-word-box { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-eye-canvas { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-flash-zone { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-cut-text { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-bionic-text { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-quiz-option { background: var(--card); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ho-quiz-option:hover { border-color: rgba(212,105,78,.4); }
[data-theme="dark"] .ho-nav-back { background: var(--card); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ho-nav-header { background: var(--bg); }
[data-theme="dark"] .ho-section-toggle { background: var(--card); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-module-desc { background: linear-gradient(135deg, var(--card2), var(--card)); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ho-result { background: var(--card2); }
[data-theme="dark"] .ho-text-area.blurred { filter: blur(4px); }
/* ═══ Per-Exercise Color Themes ═══ */
[data-ho-theme="eye"] { --ho-color: #3B82F6; --ho-color-dark: #2563EB; --ho-color-light: rgba(59,130,246,.08); }
[data-ho-theme="formation"] { --ho-color: #8B5CF6; --ho-color-dark: #7C3AED; --ho-color-light: rgba(139,92,246,.08); }
[data-ho-theme="jump"] { --ho-color: #22C55E; --ho-color-dark: #16A34A; --ho-color-light: rgba(34,197,94,.08); }
[data-ho-theme="tachisto"] { --ho-color: #EC4899; --ho-color-dark: #DB2777; --ho-color-light: rgba(236,72,153,.08); }
[data-ho-theme="cut"] { --ho-color: #14B8A6; --ho-color-dark: #0D9488; --ho-color-light: rgba(20,184,166,.08); }
[data-ho-theme="bionic"] { --ho-color: #F97316; --ho-color-dark: #EA580C; --ho-color-light: rgba(249,115,22,.08); }
[data-ho-theme="metronome"] { --ho-color: #0EA5E9; --ho-color-dark: #0284C7; --ho-color-light: rgba(14,165,233,.08); }
[data-ho-theme="pacer"] { --ho-color: #10B981; --ho-color-dark: #059669; --ho-color-light: rgba(16,185,129,.08); }
[data-ho-theme="schultz"] { --ho-color: #6366F1; --ho-color-dark: #4F46E5; --ho-color-light: rgba(99,102,241,.08); }
/* Theme-aware elements */
[data-ho-theme] .ho-tab.active {
border-color: var(--ho-color); color: var(--ho-color);
background: var(--ho-color-light);
}
[data-ho-theme] .ho-text-card.active {
border-color: var(--ho-color); background: var(--ho-color-light);
}
[data-ho-theme] .ho-speed-slider { accent-color: var(--ho-color); }
[data-ho-theme] .ho-speed-value { color: var(--ho-color); }
[data-ho-theme] .ho-setting-btn.active {
border-color: var(--ho-color); color: var(--ho-color);
background: var(--ho-color-light);
}
[data-ho-theme] .ho-toggle-btn.on { background: var(--ho-color); }
/* ═══════════════════════════════════════════════════════════
MOBILE-FIRST UX OPTIMIZATIONS (Expert Mobile Dev)
═══════════════════════════════════════════════════════════ */
/* ── 1. BASE MOBILE RESET ── */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Prevent horizontal overflow globally */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
/* Tap highlight removal — global, not media-query limited */
a, button, input, select, textarea, [onclick], [role="button"], label {
-webkit-tap-highlight-color: transparent;
}
/* ── 2. iOS INPUT ZOOM FIX ── */
/* iOS Safari zooms in when input font-size < 16px */
@media (max-width: 768px) {
.input,
.input-sm,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.adm-search input {
font-size: 16px !important;
}
}
/* Autofill styling for dark/light themes */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 30px var(--card2) inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--accent) !important;
}
/* ── 3. SAFE AREA SUPPORT (notch/home indicator) ── */
@supports (padding: env(safe-area-inset-bottom)) {
/* Top bar respects notch */
.nav-bar, .nav-inner {
padding-top: env(safe-area-inset-top, 0px);
}
/* Container respects bottom safe area */
@media (max-width: 640px) {
.container {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* Modals respect all safe areas */
#geoModalOverlay,
.modal-overlay {
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
}
/* ── 4. TOUCH TARGETS — WCAG 2.5.8 (44px min) ── */
@media (max-width: 768px) {
.btn, .nav-btn, .topic-btn, .sub-btn,
.section-tab, [role="button"] {
min-height: 44px;
min-width: 44px;
}
}
/* ── 5. TOUCH DEVICE OPTIMIZATIONS ── */
@media (max-width: 1024px) {
/* Momentum scrolling */
.container, #app, .modal-body, .geo-modal-body,
.adm-wrap, .cografya-container {
-webkit-overflow-scrolling: touch;
}
/* Eliminate 300ms tap delay */
.bottom-nav, .nav-inner,
.btn, .card, .topic-btn, .sub-btn,
.bottom-nav-btn, .section-tab {
touch-action: manipulation;
}
}
/* Disable ALL hover effects on touch-only devices */
@media (hover: none) and (pointer: coarse) {
.card-hover:hover {
transform: none !important;
box-shadow: var(--shadow-sm) !important;
}
.nav-btn:hover:not(.active) {
color: inherit;
background: transparent;
}
.ai-choice:hover,
.ai-ders-card:hover,
.ai-konu-item:hover,
.tw-cat-card:hover,
.tw-diff-tab:hover,
.ho-card:hover,
.ho-text-card:hover,
.ho-quiz-option:hover,
.kh-checkpoint-card:hover {
transform: none !important;
box-shadow: inherit !important;
border-color: inherit !important;
}
}
/* ── 6. BOTTOM NAV — IMPROVED ── */
@media (max-width: 640px) {
.bottom-nav-btn {
min-height: 54px;
padding: 8px 4px 6px;
gap: 4px;
}
.bottom-nav-ico { width: 24px; height: 24px; }
.bottom-nav-ico svg { width: 22px; height: 22px; }
.bottom-nav-label {
font-size: 0.625rem;
font-weight: 600;
line-height: 1.2;
}
.bottom-nav-btn.active .bottom-nav-ico {
transform: scale(1.08);
transition: transform .2s cubic-bezier(.4,0,.2,1);
}
}
@media (max-width: 380px) {
.bottom-nav-label { font-size: 0.5625rem; }
.bottom-nav-ico svg { width: 20px; height: 20px; }
}
/* ── 7. FONT SIZE MINIMUMS (WCAG AA) ── */
@media (max-width: 640px) {
/* Never go below 10px on mobile */
.fs-10, .fs-11 { font-size: 0.75rem !important; }
.nav-logo-text span:last-child { font-size: 0.75rem !important; }
/* Improve readability of small text */
.label { font-size: 0.6875rem !important; }
.badge { font-size: 0.6875rem !important; }
.cd-num span { font-size: 0.5625rem !important; }
}
/* ── 8. GPU ACCELERATION ── */
.bottom-nav,
.nav-bar,
.modal-overlay,
.tour-overlay,
.tour-tooltip {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Content containment for layout perf */
.card, .card-sm { contain: layout style; }
/* ── 9. MOBILE PERFORMANCE ── */
@media (max-width: 768px) {
/* content-visibility for heavy off-screen sections */
.adm-wrap,
.cografya-container,
.ho-container {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
/* Reduce expensive shadows on mobile */
.card { box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
.card-hover:hover { box-shadow: 0 2px 6px rgba(0,0,0,.1) !important; }
/* Lighter backdrop-filter (GPU saver) */
.tw-topbar, .nav-bar {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Lazy images */
img { content-visibility: auto; }
/* Optimize text rendering */
body {
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* ── 10. MODAL — MOBILE FRIENDLY ── */
@media (max-width: 640px) {
#geoModalOverlay {
touch-action: pan-y;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#geoModalOverlay .geo-modal {
max-height: 85vh;
max-height: 85dvh;
overflow-y: auto;
margin: auto 8px;
}
}
/* ── 11. SCROLLBAR — MOBILE ── */
@media (max-width: 768px) {
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.2);
border-radius: 5px;
min-height: 40px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.2);
}
}
/* ── 12. PAGE TRANSITIONS ── */
#app.page-transition {
animation: pageSlideIn .22s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes pageSlideIn {
from { opacity: 0.6; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── 13. SKELETON LOADING ── */
.skeleton-card {
background: var(--card);
border-radius: var(--radius-lg, 16px);
padding: 20px;
border: 1px solid rgba(192,174,156,.15);
}
.skeleton-line {
height: 14px;
border-radius: 6px;
background: linear-gradient(90deg, var(--card2) 0%, var(--card3, #eee) 50%, var(--card2) 100%);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
margin-bottom: 10px;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.short { width: 60%; }
.skeleton-line.shorter { width: 40%; }
.skeleton-circle {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(90deg, var(--card2) 0%, var(--card3, #eee) 50%, var(--card2) 100%);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
flex-shrink: 0;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Data loading spinner */
.data-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--text3);
font-size: 14px;
gap: 8px;
}
.data-loading::before {
content: '';
width: 18px; height: 18px;
border: 2px solid var(--border2);
border-top-color: var(--accent);
border-radius: 50%;
animation: data-spin .6s linear infinite;
}
@keyframes data-spin { to { transform: rotate(360deg); } }
/* ── 14. PULL TO REFRESH INDICATOR ── */
.pull-indicator {
position: fixed; top: -50px; left: 50%;
transform: translateX(-50%);
width: 36px; height: 36px;
border-radius: 50%;
background: var(--card);
box-shadow: 0 2px 12px rgba(0,0,0,.15);
display: flex; align-items: center; justify-content: center;
transition: top .3s cubic-bezier(.4,0,.2,1);
z-index: 9999;
}
.pull-indicator.visible { top: 16px; }
.pull-indicator::after {
content: '';
width: 16px; height: 16px;
border: 2px solid var(--border2);
border-top-color: var(--accent);
border-radius: 50%;
animation: data-spin .6s linear infinite;
}
/* ── 15. prefers-reduced-motion — COMPREHENSIVE ── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
#app { transition: none !important; }
.skeleton-line, .skeleton-circle { animation: none !important; background: var(--card2) !important; }
.card-hover:hover { transform: none !important; }
.pull-indicator { transition: none !important; }
}