/* ================================================================ KpopWorld — base.css (V12) Tüm sayfalarda ortak masaüstü stiller. ⚠️ MOBİL (<768px) shared.js tarafından JS ile yönetilir. Bu dosya sadece masaüstü + tablet ortak stillerini içerir. Her HTML'in 'ine ekle: ================================================================ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── Tema Değişkenleri ── */ :root { --pink: #b5679c; --pink-soft: #f4dff0; --pink-pale: #fdf6fb; --pink-deep: #8e3a6e; --purple: #8b6abf; --purple-soft: #ede6f7; --text-1: #1e1220; --text-2: #6b5170; --text-3: #a890a8; --surface: #ffffff; --bg: #f9f2f7; --border: rgba(181,103,156,0.14); --border-mid: rgba(181,103,156,0.26); --green: #38a06a; --green-soft: #e6f4ec; --amber: #c47c20; --amber-soft: #fef3e2; --red: #e74c3c; --sidebar-w: 200px; --nav-h: 58px; } html, body { height: 100%; } body { font-family: 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--text-1); display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; overflow-x: hidden; } a { color: var(--pink); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Topnav ── */ .topnav { height: var(--nav-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; position: sticky; top: 0; z-index: 300; flex-shrink: 0; } .topnav-logo { width: var(--sidebar-w); padding: 0 24px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); height: 100%; flex-shrink: 0; } .topnav-body { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; } .topnav-right { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 34px; height: 34px; border-radius: 10px; background: transparent; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; position: relative; transition: background 0.15s; text-decoration: none; color: var(--text-2); } .icon-btn:hover { background: var(--pink-soft); border-color: var(--border-mid); } .notif-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--surface); } /* Game Clock */ .game-clock { display: flex; align-items: center; gap: 6px; background: var(--pink-pale); border: 1px solid var(--border); border-radius: 10px; padding: 5px 12px; pointer-events: none; user-select: none; } .game-clock-label { font-size: 10px; font-weight: 700; color: var(--text-2); } .game-clock-time { font-family: 'Gowun Batang', serif; font-size: 13px; font-weight: 700; color: var(--text-1); letter-spacing: 1px; } /* ── Shell (3 sütun flexbox) ── */ .shell { display: flex; flex: 1; overflow: hidden; height: calc(100vh - var(--nav-h)); } /* ── Sol Sidebar ── */ .sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; padding: 8px 0 20px; } .nav-group-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-3); padding: 16px 20px 6px; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 20px; font-size: 13px; font-weight: 400; color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; transition: all 0.15s; } .nav-item:hover { background: var(--bg); color: var(--text-1); text-decoration: none; } .nav-item.active { background: var(--pink-pale); color: var(--pink); font-weight: 500; border-left-color: var(--pink); } .nav-icon { font-size: 14px; width: 16px; text-align: center; } .nav-badge { margin-left: auto; background: var(--pink); color: white; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; } /* ── Main Content ── */ .main { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; padding: 24px 28px; } .main-inner { width: 100%; max-width: 960px; } /* ── Sağ Sidebar ── */ .right-sidebar { width: 210px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; padding: 20px 0; } .rs-section { padding: 0 16px; margin-bottom: 22px; } .rs-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; padding: 0 4px; } .rs-divider { height: 0.5px; background: var(--border); margin: 4px 16px 20px; } .rs-quick-link { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-radius: 8px; font-size: 13px; color: var(--text-2); text-decoration: none; transition: all 0.15s; } .rs-quick-link:hover { background: var(--bg); color: var(--pink); text-decoration: none; } .rs-quick-link.active { background: var(--pink-pale); color: var(--pink) !important; font-weight: 600; } .rs-quick-icon { font-size: 14px; width: 16px; text-align: center; } /* ── Grade Renkler ── */ .grade-S { background: #fef3e2; color: #854F0B; } .grade-A { background: #e6f4ec; color: #27500A; } .grade-B { background: #fef8e7; color: #854F0B; } .grade-C { background: #fef3e2; color: #c47c20; } .grade-D { background: #fde8e8; color: #A32D2D; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; } /* ── TABLET (769px–1024px): Sağ sidebar gizle ── */ @media (max-width: 1024px) and (min-width: 769px) { .right-sidebar { display: none; } }