/* OptiClear web tasarım sistemi — uygulamanın AppTheme token'larıyla birebir.
 * Kaynak: OptiMac/Helpers/AppTheme.swift, kurallar: Docs/TASARIM_SISTEMI.md.
 *
 * Kurallar (uygulamayla aynı):
 *  - Tek vurgu rengi (--accent): yalnızca birincil eylem, seçim, link, ilerleme.
 *  - --caution / --critical yalnızca gerçek bir durum için, küçük nokta veya ikonla.
 *  - Gradyan, renkli ikon karosu, dekoratif emoji / sparkles / kupa / alev yok.
 *  - Kart içinde kart yok; panel = --surface + 1px --border, gölge yok.
 *  - Rakamlar tabular-nums, sistem fontu (SF Pro). Yuvarlak/eğlenceli font yok.
 *  - İçerik genişliği okunurluk için sınırlı (--measure), sayfa kenarlarında boşluk sabit.
 *
 * Bu dosyayı üç üretici de okur ve /assets/ds.<hash>.css olarak yazar:
 * home (generate-home.js), SEO sayfaları (generate-seo.js), rehberler (generate-pseo.js).
 */

:root {
  color-scheme: light dark;

  /* Yüzeyler — AppTheme.canvas / surface / elevatedSurface */
  --canvas: #F5F5F7;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --fill: rgba(0, 0, 0, 0.055);
  --hover: rgba(0, 0, 0, 0.04);
  --pressed: rgba(0, 0, 0, 0.08);
  --border: rgba(0, 0, 0, 0.085);
  --separator: rgba(0, 0, 0, 0.065);

  /* Metin */
  --text: #1D1D1F;
  --text-2: rgba(29, 29, 31, 0.66);
  --text-3: rgba(29, 29, 31, 0.42);

  /* Vurgu ve durum */
  --accent: #0071E3;
  --accent-fill: #0071E3;          /* birincil buton zemini, her iki temada aynı */
  --accent-hover: #0077ED;
  --on-accent: #FFFFFF;
  --selected-fill: rgba(0, 113, 227, 0.12);
  --selected-border: rgba(0, 113, 227, 0.55);
  --caution: #A65A00;
  --critical: #D70015;

  /* Veri */
  --data-muted: rgba(0, 0, 0, 0.28);
  --data-track: rgba(0, 0, 0, 0.08);

  /* Ölçüler — AppTheme radius / Space */
  --r-small: 6px;
  --r-control: 8px;
  --r-card: 12px;
  --r-sheet: 16px;
  --s-xxs: 4px; --s-xs: 8px; --s-s: 12px; --s-m: 16px;
  --s-l: 20px; --s-xl: 24px; --s-xxl: 32px; --s-3xl: 48px; --s-4xl: 72px;
  --page-max: 1120px;
  --measure: 680px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 56px;

  /* Tipografi — sistem fontu; CJK için dil fontları */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", "PingFang SC", "PingFang TC", "Hiragino Sans",
          "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1D1D1F;
    --surface: #252528;
    --surface-elevated: #2C2C2F;
    --fill: rgba(255, 255, 255, 0.07);
    --hover: rgba(255, 255, 255, 0.05);
    --pressed: rgba(255, 255, 255, 0.10);
    --border: rgba(255, 255, 255, 0.10);
    --separator: rgba(255, 255, 255, 0.08);
    --text: #F5F5F7;
    --text-2: rgba(245, 245, 247, 0.66);
    --text-3: rgba(245, 245, 247, 0.42);
    --accent: #2997FF;
    --selected-fill: rgba(41, 151, 255, 0.16);
    --selected-border: rgba(41, 151, 255, 0.55);
    --caution: #F5B25C;
    --critical: #FF6961;
    --data-muted: rgba(255, 255, 255, 0.34);
    --data-track: rgba(255, 255, 255, 0.10);
  }
}

/* ── Temel ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern";
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-small); }
::selection { background: var(--selected-fill); }
code, kbd, pre { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--fill); padding: 1px 5px; border-radius: var(--r-small); }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control);
      padding: var(--s-m); overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; }

.ds-container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.ds-measure { max-width: var(--measure); }

/* ── Tipografi ölçeği (AppTheme.Typography) ───────────────────────────── */
.ds-display { font-size: clamp(36px, 5.2vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -0.022em; margin: 0; }
.ds-title   { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.018em; margin: 0; }
.ds-h2      { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.ds-h3      { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 0; }
.ds-lead    { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text-2); margin: 0; }
.ds-body    { font-size: 16px; color: var(--text); }
.ds-callout { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ds-caption { font-size: 12px; line-height: 1.4; color: var(--text-3); }
.ds-eyebrow { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 var(--s-xs); }
.ds-metric  { font-size: 32px; line-height: 1.1; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Butonlar (AppPrimary / AppSecondary / link) ──────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
  min-height: 40px; padding: 0 var(--s-l);
  border-radius: var(--r-control); border: 1px solid transparent;
  font: 600 15px/1 var(--font); cursor: pointer; text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.ds-btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.ds-btn-primary:hover { background: var(--accent-hover); }
.ds-btn-primary:active { filter: brightness(0.94); }
.ds-btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.ds-btn-secondary:hover { background: var(--hover); }
.ds-btn-secondary:active { background: var(--pressed); }
.ds-btn-quiet { background: transparent; color: var(--accent); padding: 0 var(--s-xs); min-height: 32px; }
.ds-btn-quiet:hover { background: var(--hover); }
.ds-btn-lg { min-height: 48px; padding: 0 var(--s-xl); font-size: 16px; }
.ds-btn-sm { min-height: 32px; padding: 0 var(--s-s); font-size: 13px; }
.ds-btn[aria-pressed="true"] { background: var(--selected-fill); border-color: var(--selected-border); color: var(--accent); }
.ds-btn[disabled] { opacity: .45; cursor: default; }
.ds-btn svg { width: 16px; height: 16px; flex: none; }

/* ── Panel / satır / ayırıcı (appPanel, DSDivider) ────────────────────── */
.ds-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.ds-panel-pad { padding: var(--s-xl); }
.ds-divider { height: 1px; background: var(--separator); border: 0; margin: 0; }
.ds-row { display: flex; align-items: center; gap: var(--s-m); padding: var(--s-s) var(--s-l); }
.ds-row + .ds-row { border-top: 1px solid var(--separator); }

/* ── Metrik şeridi (DSMetricStrip) ────────────────────────────────────── */
.ds-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ds-metrics > div { padding: var(--s-l) var(--s-xl); }
.ds-metrics > div + div { border-left: 1px solid var(--separator); }
.ds-metrics .ds-metric-label { font-size: 13px; color: var(--text-2); margin-top: var(--s-xxs); }
@media (max-width: 640px) {
  .ds-metrics > div + div { border-left: 0; border-top: 1px solid var(--separator); }
}

/* ── Durum (DSStatusDot, DSTag, DSNote) ───────────────────────────────── */
.ds-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--text-3); flex: none; }
.ds-dot-caution { background: var(--caution); }
.ds-dot-critical { background: var(--critical); }
.ds-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-xs);
          border: 1px solid var(--border); border-radius: var(--r-small);
          font-size: 12px; font-weight: 500; color: var(--text-2); }
.ds-note { display: flex; gap: var(--s-xs); align-items: flex-start; font-size: 14px; color: var(--text-2); }

/* ── Bölüm başlığı (DSSectionHeader) ──────────────────────────────────── */
.ds-section { padding: var(--s-4xl) 0; }
.ds-section-head { margin-bottom: var(--s-xxl); }
.ds-section-head .ds-lead { margin-top: var(--s-s); }

/* ── Üst gezinme ──────────────────────────────────────────────────────── */
.ds-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h);
          background: color-mix(in srgb, var(--canvas) 86%, transparent);
          -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
          border-bottom: 1px solid var(--separator); }
.ds-nav .ds-container { height: 100%; display: flex; align-items: center; gap: var(--s-xl); }
.ds-brand { display: inline-flex; align-items: center; gap: var(--s-xs); color: var(--text) !important;
            font-weight: 650; font-size: 16px; text-decoration: none !important; }
.ds-brand img { width: 26px; height: 26px; border-radius: 6px; }
.ds-nav-links { display: flex; gap: var(--s-l); margin-left: auto; align-items: center; }
.ds-nav-links a:not(.ds-btn) { color: var(--text-2); font-size: 14px; }
.ds-nav-links a:not(.ds-btn):hover { color: var(--text); text-decoration: none; }
.ds-select { height: 32px; padding: 0 var(--s-l) 0 var(--s-s); border-radius: var(--r-control);
             border: 1px solid var(--border); background: var(--surface); color: var(--text);
             font: 500 13px var(--font); }
@media (max-width: 760px) { .ds-nav-links a:not(.ds-btn) { display: none; } }

/* ── Ürün ekran görüntüsü çerçevesi ───────────────────────────────────── */
.ds-shot { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.ds-shot img { width: 100%; }

/* ── SSS (details/summary) ────────────────────────────────────────────── */
.ds-faq details { border-top: 1px solid var(--separator); }
.ds-faq details:last-child { border-bottom: 1px solid var(--separator); }
.ds-faq summary { list-style: none; cursor: pointer; padding: var(--s-l) 0; font-weight: 600; font-size: 16px;
                  display: flex; justify-content: space-between; gap: var(--s-m); }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 20px; line-height: 1; }
.ds-faq details[open] summary::after { content: "−"; }
.ds-faq .ds-faq-a { padding: 0 0 var(--s-l); color: var(--text-2); }

/* ── Uzun metin (rehber gövdesi) ──────────────────────────────────────── */
.ds-prose { font-size: 17px; line-height: 1.65; }
.ds-prose h2 { font-size: 24px; line-height: 1.25; font-weight: 650; margin: var(--s-3xl) 0 var(--s-s); letter-spacing: -0.01em; }
.ds-prose h3 { font-size: 19px; font-weight: 600; margin: var(--s-xxl) 0 var(--s-xs); }
.ds-prose p, .ds-prose ul, .ds-prose ol { margin: 0 0 var(--s-m); }
.ds-prose li { margin: var(--s-xxs) 0; }
.ds-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: var(--s-m) 0 var(--s-xl);
                  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.ds-prose th, .ds-prose td { text-align: left; padding: var(--s-xs) var(--s-s); border-top: 1px solid var(--separator); }
.ds-prose th { font-weight: 600; color: var(--text-2); border-top: 0; background: var(--fill); }

/* ── Breadcrumb / meta satırı (DSMetaLine) ────────────────────────────── */
.ds-crumbs { font-size: 13px; color: var(--text-3); display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.ds-crumbs a { color: var(--text-2); }
.ds-meta { font-size: 13px; color: var(--text-3); }
.ds-meta > * + *::before { content: " · "; }

/* ── "Bu rehber işinize yaradı mı?" (feedback.js) ─────────────────────── */
.ds-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s); padding: var(--s-l) var(--s-xl); }
.ds-feedback-q { font-weight: 600; margin-right: auto; }
.ds-feedback-count { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ds-feedback-thanks { font-size: 14px; color: var(--text-2); }

/* ── Alt bilgi ────────────────────────────────────────────────────────── */
.ds-footer { border-top: 1px solid var(--separator); padding: var(--s-xxl) 0 var(--s-3xl); font-size: 13px; color: var(--text-3); }
.ds-footer a { color: var(--text-2); }
.ds-footer .ds-container { display: flex; flex-wrap: wrap; gap: var(--s-m) var(--s-xl); align-items: center; }

/* ── Hareket: yalnızca kısa geçişler; azaltılmış harekette hiç ────────── */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Sohbet asistanı (chat.js) ─────────────────────────────────────────── */
.ds-chat-launcher { position: fixed; right: var(--s-m); bottom: var(--s-m); z-index: 60;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); }
.ds-chat-launcher svg { width: 18px; height: 18px; }
.ds-chat { position: fixed; right: var(--s-m); bottom: var(--s-m); z-index: 61;
  width: min(380px, calc(100vw - 2 * var(--s-m))); height: min(560px, calc(100vh - 2 * var(--s-m)));
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface-elevated);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); border-radius: var(--r-sheet); }
.ds-chat[hidden], .ds-chat-launcher[hidden] { display: none; }
.ds-chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s);
  padding: var(--s-s) var(--s-s) var(--s-s) var(--s-m); border-bottom: 1px solid var(--separator); }
.ds-chat-head strong { font-size: 15px; }
.ds-chat-log { flex: 1; overflow-y: auto; padding: var(--s-m); display: flex; flex-direction: column; gap: var(--s-xs); }
.ds-chat-msg { max-width: 85%; padding: var(--s-xs) var(--s-s); border-radius: var(--r-card);
  font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-chat-assistant { align-self: flex-start; background: var(--fill); }
.ds-chat-user { align-self: flex-end; background: var(--accent-fill); color: var(--on-accent); }
.ds-chat-wait { color: var(--text-3); }
.ds-chat-form { display: flex; gap: var(--s-xs); align-items: flex-end; padding: var(--s-s) var(--s-m) 0; }
.ds-chat-form textarea { flex: 1; resize: none; min-height: 36px; max-height: 120px; font: inherit; font-size: 15px;
  padding: 7px var(--s-s); color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-control); }
.ds-chat-form textarea:focus { outline: none; border-color: var(--selected-border); }
.ds-chat-note { margin: 0; padding: var(--s-xs) var(--s-m) var(--s-s); font-size: 12px; color: var(--text-3); }
.ds-chat-nudge { position: fixed; right: var(--s-m); bottom: calc(var(--s-m) + 56px); z-index: 60;
  width: min(300px, calc(100vw - 2 * var(--s-m))); display: flex; align-items: flex-start;
  background: var(--surface-elevated); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  animation: ds-chat-in .25s ease-out; }
.ds-chat-nudge-text { flex: 1; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--s-s) 0 var(--s-s) var(--s-m); font: inherit; font-size: 14px; line-height: 1.45; color: var(--text); }
.ds-chat-nudge-x { background: none; border: 0; cursor: pointer; color: var(--text-3); font-size: 18px;
  line-height: 1; padding: var(--s-xs) var(--s-s); }
.ds-chat-nudge-x:hover { color: var(--text); }
@keyframes ds-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-chat-nudge { animation: none; } }
@media (max-width: 480px) {
  .ds-chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .ds-chat-launcher span { display: none; }
  .ds-chat-launcher { padding: 0; width: 48px; min-height: 48px; border-radius: 50%; justify-content: center; }
}
@media print { .ds-chat, .ds-chat-launcher, .ds-chat-nudge { display: none; } }