/* ───────────────────────────────────────────────────────────── aktifposqr / QRMenu — Legal pages shared stylesheet Mirrors the landing design system (Playfair Display + Inter, tan + ink palette). Self-contained, no framework dependency. Bilingual mechanic: - Both TR and EN blocks live in the static DOM (crawlable, no-JS safe). - With NO JavaScript: both languages render, the toggle is hidden. - With JavaScript: is set in (no FOUC), showing one language at a time and revealing the TR/EN toggle. ───────────────────────────────────────────────────────────── */ :root { --tan-300: #d8ba84; --tan-400: #cda572; --tan-500: #c8a06c; --tan-600: #b6884e; --tan-700: #946b3e; --tan-50: #fbf7f1; --espresso: #3b2a1f; --ink-900: #0a0a0a; --ink-800: #141414; --ink-700: #1a1a1a; --ink-600: #262626; --ink-500: #3a3a3a; --ink-400: #666666; --ink-300: #9a9a9a; --ink-200: #cccccc; --ink-100: #e6e6e6; --ink-50: #fafafa; --paper: #fafafa; --card: #ffffff; --border: #e8e4dd; --maxw: 60rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink-700); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; text-wrap: pretty; } .font-display { font-family: 'Playfair Display', Georgia, serif; } .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Top bar ───────────────────────────────────────────────── */ .legal-topbar { position: sticky; top: 0; z-index: 20; background: rgba(250, 250, 250, 0.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .legal-topbar__inner { max-width: var(--maxw); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink-900); } .brand__mark { width: 2rem; height: 2rem; border-radius: 0.55rem; background: var(--tan-500); display: grid; place-items: center; color: var(--ink-900); flex: none; } .brand__name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink-900); } .topbar-actions { display: inline-flex; align-items: center; gap: 0.5rem; } .topbar-link { font-size: 0.85rem; color: var(--ink-400); text-decoration: none; padding: 0.4rem 0.6rem; border-radius: 9999px; transition: color 160ms ease, background 160ms ease; } .topbar-link:hover { color: var(--ink-900); background: rgba(0,0,0,0.04); } /* ── Language toggle (hidden until JS confirms it works) ───── */ .lang-toggle { display: none; } html[data-lang] .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9999px; overflow: hidden; background: var(--card); } .lang-toggle button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-400); padding: 0.35rem 0.8rem; cursor: pointer; transition: background 160ms ease, color 160ms ease; } .lang-toggle button:hover { color: var(--ink-900); } html[data-lang="tr"] .lang-toggle button[data-set="tr"], html[data-lang="en"] .lang-toggle button[data-set="en"] { background: var(--tan-500); color: var(--ink-900); } /* Show/hide language blocks only when JS has set data-lang */ html[data-lang="tr"] [lang="en"].lang-block { display: none; } html[data-lang="en"] [lang="tr"].lang-block { display: none; } /* ── Page layout ───────────────────────────────────────────── */ .legal-main { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem 4rem; } .legal-header { margin-bottom: 2.5rem; } .eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan-700); margin-bottom: 0.9rem; } .legal-header h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--ink-900); margin: 0 0 0.75rem; } .legal-meta { font-size: 0.85rem; color: var(--ink-400); } .legal-meta strong { color: var(--ink-600); font-weight: 600; } /* Doc cross-nav */ .doc-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .doc-nav a { font-size: 0.82rem; text-decoration: none; color: var(--ink-500); padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); transition: border-color 160ms ease, color 160ms ease; } .doc-nav a:hover { color: var(--ink-900); border-color: var(--tan-400); } .doc-nav a[aria-current="page"] { background: var(--ink-900); color: #fff; border-color: var(--ink-900); } /* ── Article typography ────────────────────────────────────── */ .legal-body { font-size: 1rem; } .legal-body section { margin-top: 2.4rem; scroll-margin-top: 5rem; } .legal-body h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em; color: var(--ink-900); margin: 0 0 0.4rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .legal-body h2 .num { color: var(--tan-700); font-size: 0.95em; margin-right: 0.4rem; } .legal-body h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink-800); margin: 1.6rem 0 0.3rem; } .legal-body p { margin: 0.7rem 0; color: var(--ink-600); } .legal-body ul, .legal-body ol { margin: 0.7rem 0; padding-left: 1.3rem; color: var(--ink-600); } .legal-body li { margin: 0.35rem 0; } .legal-body a { color: var(--tan-700); text-decoration: underline; text-underline-offset: 2px; } .legal-body a:hover { color: var(--espresso); } .legal-body strong { color: var(--ink-900); font-weight: 600; } .legal-body small { color: var(--ink-400); } /* Definition / key-value rows (company künye) */ .kv { border: 1px solid var(--border); border-radius: 0.8rem; background: var(--card); padding: 0.4rem 1.2rem; margin: 1.1rem 0; } .kv dl { margin: 0; display: grid; grid-template-columns: 13rem 1fr; } .kv dt { font-size: 0.82rem; font-weight: 600; color: var(--ink-500); padding: 0.7rem 0; border-bottom: 1px solid var(--ink-100); } .kv dd { margin: 0; font-size: 0.9rem; color: var(--ink-800); padding: 0.7rem 0; border-bottom: 1px solid var(--ink-100); } .kv dl > dt:last-of-type, .kv dl > dd:last-of-type { border-bottom: 0; } /* Callout box */ .note { border-left: 3px solid var(--tan-500); background: var(--tan-50); border-radius: 0 0.6rem 0.6rem 0; padding: 0.9rem 1.1rem; margin: 1.3rem 0; font-size: 0.92rem; } .note strong { color: var(--espresso); } /* Placeholder marker for fields the operator must fill */ .ph { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.82em; background: #fff4e0; color: #8a5a00; border: 1px dashed #d9a441; border-radius: 0.35rem; padding: 0.05rem 0.35rem; white-space: nowrap; } /* ── Data-map table (KVKK) ─────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 0.8rem; margin: 1.2rem 0; -webkit-overflow-scrolling: touch; } table.datamap { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.85rem; } table.datamap th, table.datamap td { text-align: left; vertical-align: top; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--ink-100); } table.datamap thead th { background: var(--ink-900); color: #fff; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.01em; position: sticky; top: 0; } table.datamap tbody tr:nth-child(even) { background: #fcfaf6; } table.datamap tbody td:first-child { font-weight: 600; color: var(--ink-800); } table.datamap tbody tr:last-child td { border-bottom: 0; } /* ── Footer ────────────────────────────────────────────────── */ .legal-footer { background: var(--ink-900); color: rgba(255,255,255,0.55); margin-top: 3rem; } .legal-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: 0.8rem; } .legal-footer a { color: rgba(255,255,255,0.7); text-decoration: none; } .legal-footer a:hover { color: #fff; } .legal-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; } .legal-footer__dot { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.4); } .legal-footer__dot span { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--tan-400); } @media (max-width: 640px) { .kv dl { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; } .kv dd { padding-top: 0.15rem; } .brand__name { font-size: 1.15rem; } } @media print { .legal-topbar, .doc-nav, .legal-footer, .lang-toggle { display: none !important; } html[data-lang="tr"] [lang="en"].lang-block, html[data-lang="en"] [lang="tr"].lang-block { display: revert !important; } body { background: #fff; } }