/* Duy — tanıtım ve hukuki sayfaların ortak stili.
   ⚠️ Tasarım dilinin GERÇEK kaynağı `duy-app.html`'in :root bloğudur. Buradaki değerler
   oradan birebir kopyalandı (6 Ağu). Uygulamanın renk/tipografi tokenları değişirse
   burası da elle güncellenmelidir — bu dosya uygulamadan bağımsız yaşar, otomatik
   senkron YOKTUR. Ayrılmaları hâlinde tanıtım sitesi uygulamadan farklı görünür.

   Uygulamadan bilinçli sapmalar:
   - `.wrap` genişliği: uygulama araç, bu sayfalar okuma metni — satır uzunluğu sınırlı.
   - Cam kart efekti sadeleştirildi: uygulamadaki çok katmanlı gradyan/blur burada
     gereksiz, tek katman yeter. */

@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme: light dark;
  --bg: oklch(98.7% 0.005 80); --bg-glow: oklch(90% 0.06 300 / 0.08);
  --card: oklch(100% 0 0); --card2: oklch(96% 0.006 75);
  --accent: oklch(55% 0.16 300); --accent2: oklch(62% 0.14 300); --accent-btn: oklch(56% 0.17 300);
  --text: oklch(24% 0.015 55); --muted: oklch(52% 0.014 55); --border: oklch(89% 0.012 70);
  --glass-bg: oklch(99% 0.005 80 / 0.62); --glass-border: oklch(100% 0 0 / 0.76);
  --glass-gloss: rgba(255,255,255,0.48);
  --shadow-color: oklch(20% 0.02 260 / 0.14);
  --shadow-lift:0 1px 2px -1px var(--shadow-color),0 8px 20px -10px var(--shadow-color);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px;
  --font-xs:.75rem; --font-sm:.85rem; --font-md:.95rem; --font-lg:1.08rem; --font-xl:1.4rem;
  --radius-sm:6px; --radius-md:10px; --radius-card:18px; --radius-workspace:20px; --radius-pill:999px;
}
/* Koyu tema tokenları. Uygulamada bunları bir açılış script'i `data-theme` ile uygular;
   bu sayfalarda tema seçici YOK, o yüzden JS'siz çalışsın diye medya sorgusu da eklendi.
   `:not([data-theme="light"])` koşulu, ileride bir seçici eklenirse açık temanın sistem
   tercihini ezebilmesi için duruyor. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: oklch(23% 0.008 265); --bg-glow: oklch(45% 0.09 300 / 0.05);
    --card: oklch(27.5% 0.012 265); --card2: oklch(32% 0.012 265);
    --accent: oklch(72% 0.15 300); --accent2: oklch(78% 0.12 300);
    --text: oklch(93% 0.01 60); --muted: oklch(68% 0.012 260); --border: oklch(37% 0.014 260);
    --glass-bg: oklch(30% 0.012 265 / 0.60); --glass-border: oklch(100% 0 0 / 0.12);
    --glass-gloss: rgba(255,255,255,0.08);
    --shadow-color: oklch(0% 0 0 / 0.4);
    --shadow-lift:0 10px 24px -24px var(--shadow-color);
  }
}
:root[data-theme="dark"]{
  --bg: oklch(23% 0.008 265); --bg-glow: oklch(45% 0.09 300 / 0.05);
  --card: oklch(27.5% 0.012 265); --card2: oklch(32% 0.012 265);
  --accent: oklch(72% 0.15 300); --accent2: oklch(78% 0.12 300);
  --text: oklch(93% 0.01 60); --muted: oklch(68% 0.012 260); --border: oklch(37% 0.014 260);
  --glass-bg: oklch(30% 0.012 265 / 0.60); --glass-border: oklch(100% 0 0 / 0.12);
  --glass-gloss: rgba(255,255,255,0.08);
  --shadow-color: oklch(0% 0 0 / 0.4);
  --shadow-lift:0 10px 24px -24px var(--shadow-color);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; padding:0 0 var(--space-7);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* `background-attachment:fixed` bilinçli olarak YOK: uygulamada da yok ve iOS Safari'de
     sabit zeminler kaydırmada pahalı/sorunlu. Uygulamanın zeminiyle birebir aynı. */
  background:radial-gradient(1100px 520px at 50% -150px, var(--bg-glow) 0%, var(--bg) 62%);
  color:var(--text); line-height:1.65; min-height:100vh;
}

.wrap{ max-width:46rem; margin:0 auto; padding:0 var(--space-5); }

h1,h2,h3{ font-family:"Source Serif 4",Georgia,serif; font-weight:600; line-height:1.25; }
h1{ font-size:2.3rem; margin:0 0 var(--space-4); }
h2{ font-size:var(--font-xl); margin:0 0 var(--space-4); }
h3{ font-size:var(--font-lg); margin:0 0 var(--space-1); }
p{ margin:0 0 var(--space-4); }
a{ color:var(--accent); }
ul,ol{ padding-left:1.25rem; }
li{ margin:var(--space-1) 0; }
strong{ font-weight:600; }

/* Ürün adı. Uygulamadaki `.brand-name--display` ile aynı muamele (duy-app.html §153):
   vurgu rengi + serif + 600. Sitede tek varyant var — uygulamadaki nötr `.brand-name`
   gövde metni içinde kalabalık yapmasın diye orada ayrılmıştı; burada marka her geçtiğinde
   ürüne atıf yapıyor, o yüzden hepsi işaretli. Renk `--accent` tokenından geliyor, yani
   koyu/açık temada okunurluk otomatik takip ediyor.
   `font-family` başlıkta da aynı olduğu için orada yalnız renk fark eder; gövde metninde
   hem renk hem serif ayırır. */
.brand-name{ color:var(--accent); font-family:"Source Serif 4",Georgia,serif;
             font-weight:600; letter-spacing:-.01em; }
/* Zaten vurgu renginde olan yüzeylerde (bağlantı, callout strong, hayalet düğme) marka
   rengi ikinci kez uygulanmaz — renk zaten oradadır, yalnız yazı tipi ayırır. */
a .brand-name, .callout strong .brand-name, .btn .brand-name{ color:inherit; }

.note{ color:var(--muted); font-size:var(--font-md); }
.updated{ color:var(--muted); font-size:var(--font-md); margin:0 0 var(--space-7); }

section{ padding:var(--space-7) 0; border-top:1px solid var(--border); }
section:first-of-type{ border-top:0; }

/* Uygulamadaki cam kartın sadeleştirilmiş hâli: gloss gradyanı + yarı saydam zemin. */
.card{
  background:linear-gradient(180deg,var(--glass-gloss),transparent 48%),var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  padding:var(--space-5) var(--space-5);
}
.callout{
  background:linear-gradient(180deg,var(--glass-gloss),transparent 48%),var(--glass-bg);
  border:1px solid var(--glass-border); border-left:3px solid var(--accent);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lift);
  padding:var(--space-5); margin:0 0 var(--space-6);
}
.callout p{ margin:var(--space-2) 0; }
.callout p:first-child{ margin-top:0; }
.callout p:last-child{ margin-bottom:0; }
.callout strong{ color:var(--accent); }

.wrap-x{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; margin:var(--space-4) 0; font-size:var(--font-md); }
th,td{ text-align:left; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); vertical-align:top; }
th{ color:var(--muted); font-weight:600; }

.btn{
  display:inline-block; text-decoration:none; border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-6); font-size:var(--font-lg); font-weight:500;
  background:var(--accent-btn); color:oklch(100% 0 0); border:1px solid transparent;
}
.btn.ghost{ background:transparent; color:var(--accent); border-color:var(--accent); }

footer{
  margin-top:var(--space-7); padding:var(--space-6) 0 0;
  border-top:1px solid var(--border); color:var(--muted); font-size:var(--font-md);
}
footer a{ color:var(--accent); }

@media (max-width:26rem){
  h1{ font-size:1.9rem; }
}