/* Ortak yasal sayfa stili — mailclient'in /legal sayfasiyla ayni gorunum. Tamamen statik (JS yok). Urun bazli renk gerekirse sayfanin 'ine :root override'i eklenerek degisir. */ :root { color-scheme: light dark; --bg: #fff; --accent: #1a1a1a; --accent-hover: #000; --accent-soft: #f2f2f2; --text: #1a1a1a; --text-mid: #333; --text-soft: #555; --text-muted: #666; --text-dim: #999; --border: #e5e5e5; --border-strong: #ddd; --surface: #f5f5f5; --surface-soft: #f9f9f9; } /* Dark mode — sistem tercihini takip eder (JS'siz) */ @media (prefers-color-scheme: dark) { :root { --bg: #131313; --accent: #e8e8e8; --accent-hover: #fff; --accent-soft: rgba(255, 255, 255, 0.08); --text: #e8e8e8; --text-mid: #cfcfcf; --text-soft: #ababab; --text-muted: #9a9a9a; --text-dim: #757575; --border: #2b2b2b; --border-strong: #383838; --surface: #1f1f1f; --surface-soft: #1a1a1a; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.7; color: var(--text); background: var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Monokrom paletde linkler renkle ayrismadigi icin icerikte altini ciz */ .content a { text-decoration: underline; text-underline-offset: 2px; } /* ---------- Header ---------- */ /* Header + tab bar tek sticky blok — yukseklik hesabina bagimlilik yok, scroll'da birbirlerine gore asla kaymazlar. */ .top-bar { position: sticky; top: 0; z-index: 100; background: var(--bg); } .header { border-bottom: 1px solid var(--border); padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .header-brand { font-weight: 600; font-size: 1rem; color: var(--text); } .lang-nav { display: flex; gap: 0.35rem; font-size: 0.85rem; } .lang-nav a, .lang-nav span { padding: 0.35rem 0.7rem; border: 1px solid transparent; border-radius: 6px; color: var(--text-mid); font-weight: 500; } .lang-nav a:hover { border-color: var(--border); text-decoration: none; } .lang-nav .active { color: var(--accent); font-weight: 600; background: var(--accent-soft); border-color: var(--border); } /* ---------- Dokuman gecis linkleri ---------- */ .tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 1.5rem; } .tab-link { display: block; padding: 0.75rem 1.25rem; border-bottom: 2px solid transparent; font-size: 0.95rem; font-weight: 500; color: var(--text-muted); transition: color 0.2s, border-color 0.2s; } a.tab-link:hover { color: var(--text); text-decoration: none; } .tab-link.active { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- Layout ---------- */ .layout { display: flex; max-width: 1100px; margin: 0 auto; min-height: calc(100vh - 100px); } .toc { width: 230px; min-width: 230px; padding: 1rem 0.75rem 1.5rem 1rem; position: sticky; top: 110px; align-self: flex-start; font-size: 0.8rem; line-height: 1.3; border-right: 1px solid var(--border); max-height: calc(100vh - 110px); overflow-y: auto; } .toc-title { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 0.5rem; } .toc a { display: block; padding: 0.2rem 0.5rem; color: var(--text-soft); border-radius: 3px; border-left: 2px solid transparent; transition: all 0.15s; } .toc a:hover { color: var(--text); background: var(--surface-soft); text-decoration: none; } /* ---------- Icerik ---------- */ .content { flex: 1; padding: 2rem 2rem 4rem 2.5rem; max-width: 800px; } .content h1 { font-size: 1.8rem; margin-bottom: 0.25rem; } .content h2 { font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.5rem; scroll-margin-top: 120px; } .content p { margin: 0.75rem 0; } .content .updated { display: block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; } .content ul { margin: 0.75rem 0 0.75rem 1.5rem; } .content ul li { margin: 0.3rem 0; } .content blockquote { background: var(--surface-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 0.25rem 1.25rem; margin: 1rem 0; border-radius: 0 4px 4px 0; } .content table { border-collapse: collapse; width: 100%; margin: 1rem 0; } .content th, .content td { border: 1px solid var(--border-strong); padding: 0.6rem 0.8rem; text-align: left; font-size: 0.95rem; } .content th { background: var(--surface); } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .toc { display: none; } .content { padding: 1.5rem 1rem 3rem; } .tabs { padding: 0 1rem; } .header { padding: 0.75rem 1rem; } } /* ---------- Print ---------- */ @media print { /* Dark mode'da bile baski hep acik tema */ :root { --bg: #fff; --text: #000; --text-mid: #333; --text-soft: #555; --text-muted: #666; --text-dim: #999; --accent: #000; --border: #ccc; --border-strong: #ccc; --surface: #f5f5f5; --surface-soft: #f9f9f9; } .top-bar, .toc { display: none; } .content { padding: 0; max-width: 100%; } }