/* DriftWatch - landing stili. index.html (EN) ve okuma-tr.html paylasir. */

:root {
  --zemin: #0a0e13;
  --zemin-2: #0f141b;
  --yuzey: #141b24;
  --yuzey-ust: #1b2430;
  --cizgi: #22303f;
  --cizgi-parlak: #2e4255;
  --yazi: #e8eef4;
  --yazi-sol: #8a97a6;
  --yazi-cok-sol: #5d6b7a;
  --vurgu: #4ba3ff;
  --iyi: #3fb950;
  --uyari: #d8a222;
  --tehlike: #f85149;
  --vurgu-uzeri: #04111f;
  --vurgu-parlak: #6fb6ff;
  --ustbar-zemin: rgba(10,14,19,.82);

  --b1: 4px;  --b2: 8px;  --b3: 16px;
  --b4: 24px; --b5: 40px; --b6: 72px; --b7: 112px;

  --yuvarlak: 12px;
  --yuvarlak-kucuk: 7px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-kod: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --o-kucuk: 13px;
  --o-normal: 16px;
  --o-buyuk: 20px;
  --o-baslik: clamp(34px, 5.2vw, 60px);
  --o-h2: clamp(23px, 3vw, 31px);

  --gecis: 150ms cubic-bezier(.4, 0, .2, 1);
  --golge: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--font);
  font-size: var(--o-normal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.kabuk { width: min(100% - 2 * var(--b4), 1080px); margin-inline: auto; }
.dar   { width: min(100% - 2 * var(--b4), 760px);  margin-inline: auto; }

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: var(--b1);
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code, pre, .kod { font-family: var(--font-kod); font-size: var(--o-kucuk); }

/* ---------- ust bar ---------- */
.ustbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--ustbar-zemin);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ustbar .ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--b3); padding-block: var(--b3);
}
.marka { display: flex; align-items: center; gap: var(--b2); font-weight: 650; letter-spacing: -0.01em; }
.nabiz {
  width: 9px; height: 9px; border-radius: 50%; background: var(--iyi);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--iyi) 55%, transparent); animation: nabiz 2.6s ease-out infinite;
}
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iyi) 50%, transparent); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.ustbar nav { display: flex; gap: var(--b4); font-size: var(--o-kucuk); }
.ustbar nav a { color: var(--yazi-sol); }
.ustbar nav a:hover { color: var(--yazi); text-decoration: none; }
@media (max-width: 760px) { .ustbar nav { display: none; } }

/* ---------- dugmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  padding: 11px 20px; border-radius: var(--yuvarlak-kucuk);
  font-size: var(--o-normal); font-weight: 600; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform var(--gecis), background-color var(--gecis), border-color var(--gecis);
}
.dugme.birincil { background: var(--vurgu); color: var(--vurgu-uzeri); }
.dugme.birincil:hover { background: var(--vurgu-parlak); text-decoration: none; transform: translateY(-1px); }
.dugme.birincil:active { transform: translateY(0); }
.dugme.ikincil { background: transparent; color: var(--yazi); border-color: var(--cizgi-parlak); }
.dugme.ikincil:hover { border-color: var(--vurgu); text-decoration: none; transform: translateY(-1px); }
.dugme.ikincil:active { transform: translateY(0); }

/* ---------- hero ---------- */
.hero { padding-block: var(--b7) var(--b6); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 20% auto -10%; height: 520px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--vurgu) 11%, transparent), transparent 62%);
  pointer-events: none;
}
.rozet {
  display: inline-flex; align-items: center; gap: var(--b2);
  padding: 5px 13px; border: 1px solid var(--cizgi-parlak); border-radius: 999px;
  font-size: var(--o-kucuk); color: var(--yazi-sol); background: var(--yuzey);
}
h1 { font-size: var(--o-baslik); margin-block: var(--b4) var(--b3); max-width: 16ch; }
h1 em { font-style: normal; color: var(--vurgu); }
.hero .alt { font-size: var(--o-buyuk); color: var(--yazi-sol); max-width: 58ch; }
.hero .eylemler { display: flex; flex-wrap: wrap; gap: var(--b3); margin-top: var(--b5); }
.hero .kucuknot { margin-top: var(--b3); font-size: var(--o-kucuk); color: var(--yazi-cok-sol); }

/* ---------- bolum ---------- */
section { padding-block: var(--b6); }
.bolum-ust { margin-bottom: var(--b5); }
.etiket-ust {
  font-size: var(--o-kucuk); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vurgu); margin-bottom: var(--b2);
}
h2 { font-size: var(--o-h2); max-width: 24ch; }
.bolum-ust p { color: var(--yazi-sol); margin-top: var(--b3); max-width: 64ch; }

.cizgili { border-top: 1px solid var(--cizgi); }
.koyu { background: var(--zemin-2); }

/* ---------- fis / kanit ---------- */
.kanitlar { display: grid; gap: var(--b3); }
.kanit {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
}
.kanit > header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b3);
  padding: var(--b3); border-bottom: 1px solid var(--cizgi); background: var(--yuzey-ust);
}
.kanit h3 { font-size: var(--o-normal); font-weight: 650; }
.kanit .meta { margin-left: auto; font-size: var(--o-kucuk); color: var(--yazi-cok-sol); font-family: var(--font-kod); }

.nisan {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
}
.nisan.uyari   { background: color-mix(in srgb, var(--uyari) 14%, transparent); color: var(--uyari); }
.nisan.tehlike { background: color-mix(in srgb, var(--tehlike) 15%, transparent); color: var(--tehlike); }
.nisan.iyi     { background: color-mix(in srgb, var(--iyi) 14%, transparent); color: var(--iyi); }
.nisan.sessiz  { background: var(--yuzey-ust);     color: var(--yazi-sol); }

.ikili { display: grid; grid-template-columns: 1fr 1fr; }
.ikili > div { padding: var(--b3); }
.ikili > div + div { border-left: 1px solid var(--cizgi); }
@media (max-width: 680px) {
  .ikili { grid-template-columns: 1fr; }
  .ikili > div + div { border-left: 0; border-top: 1px solid var(--cizgi); }
}
.ikili .ne { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--yazi-cok-sol); margin-bottom: var(--b2); }
.ikili pre {
  margin: 0; padding: var(--b3); background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk);
  white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.5;
}
.ikili pre.degisti { border-color: var(--tehlike); }
.kanit footer { padding: var(--b3); border-top: 1px solid var(--cizgi); font-size: var(--o-kucuk); color: var(--yazi-sol); }
.kanit footer .istem { color: var(--yazi-cok-sol); font-family: var(--font-kod); display: block; margin-top: var(--b2); }

/* ---------- katmanlar ---------- */
.uclu { display: grid; gap: var(--b3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: var(--b4);
  transition: transform var(--gecis), border-color var(--gecis);
}
.kart:hover { transform: translateY(-3px); border-color: var(--cizgi-parlak); }
.kart .no { font-family: var(--font-kod); font-size: var(--o-kucuk); color: var(--vurgu); }
.kart h3 { font-size: var(--o-buyuk); margin-block: var(--b2); }
.kart p { color: var(--yazi-sol); font-size: 15px; }
.kart ul { margin: var(--b3) 0 0; padding-left: 18px; color: var(--yazi-sol); font-size: 14px; }
.kart li { margin-top: var(--b1); }

/* ---------- karsilastirma ---------- */
.tablo-sarmal { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
th, td { text-align: left; padding: 13px var(--b3); border-bottom: 1px solid var(--cizgi); }
thead th { background: var(--yuzey-ust); color: var(--yazi-sol); font-size: var(--o-kucuk); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.biz { background: color-mix(in srgb, var(--vurgu) 6%, transparent); }
tbody tr.biz td:first-child { font-weight: 650; }
td.ortala, th.ortala { text-align: center; }

/* ---------- fiyat ---------- */
.fiyatlar { display: grid; gap: var(--b3); grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); align-items: start; }
.fiyat { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: var(--b4); }
.fiyat.one { border-color: var(--vurgu); box-shadow: var(--golge); }
.fiyat .ad { font-weight: 650; font-size: var(--o-buyuk); }
.fiyat .rakam { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin-top: var(--b2); }
.fiyat .rakam span { font-size: var(--o-normal); font-weight: 500; color: var(--yazi-sol); letter-spacing: 0; }
.fiyat ul { list-style: none; margin: var(--b4) 0 0; padding: 0; font-size: 15px; color: var(--yazi-sol); }
.fiyat li { display: flex; gap: var(--b2); padding-block: 6px; }
.fiyat li::before { content: "\2192"; color: var(--vurgu); flex: none; }
.fiyat .dugme { width: 100%; margin-top: var(--b4); }

/* ---------- kayit ---------- */
.kayit { background: var(--yuzey); border: 1px solid var(--cizgi-parlak); border-radius: var(--yuvarlak); padding: var(--b5); text-align: center; }
.kayit h2 { margin-inline: auto; }
.kayit p { color: var(--yazi-sol); margin-top: var(--b3); }
.kayit .eylemler { margin-top: var(--b5); display: flex; justify-content: center; }

/* ---------- durus ---------- */
.durus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b3); }
.durus li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--b3);
  padding: var(--b3); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk); background: var(--yuzey);
}
.durus .im { font-family: var(--font-kod); color: var(--yazi-cok-sol); }
.durus strong { display: block; font-weight: 650; }
.durus span.aciklama { color: var(--yazi-sol); font-size: 15px; }

footer.sayfa { border-top: 1px solid var(--cizgi); padding-block: var(--b5); color: var(--yazi-cok-sol); font-size: var(--o-kucuk); }
footer.sayfa .ic { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kart:hover, .dugme:hover { transform: none; }
}

/* ---------- erken erisim formu ---------- */
.ust-bosluk { margin-top: var(--b5); }
.kayit-not { margin-top: var(--b4); font-size: var(--o-kucuk); color: var(--yazi-cok-sol); }
.kayit-formu { display: grid; gap: var(--b3); margin-top: var(--b5); text-align: left; }
.kayit-formu label { display: grid; gap: var(--b1); font-size: var(--o-kucuk); color: var(--yazi-sol); }
.kayit-formu input, .kayit-formu textarea, .kayit-formu select {
  font: inherit; font-size: var(--o-normal); color: var(--yazi);
  background: var(--zemin); border: 1px solid var(--cizgi-parlak); border-radius: var(--b1);
  padding: var(--b2) var(--b3);
}
.kayit-formu input:hover, .kayit-formu textarea:hover, .kayit-formu select:hover { border-color: var(--yazi-cok-sol); }
.kayit-formu input:focus, .kayit-formu textarea:focus, .kayit-formu select:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: var(--vurgu); }
.kayit-formu .dugme { justify-self: center; cursor: pointer; }
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Sunucu yonlendirmesi /#signup-ok ya da /#signup-error — JS olmadan :target ile gosterilir. */
.kayit-durum { display: none; margin-top: var(--b4); font-weight: 600; }
.kayit-durum:target { display: block; }
.kayit-durum.iyi { color: var(--iyi); }
.kayit-durum.hata { color: var(--tehlike); }

/* /evidence: canli kanit sayfasi (src/yayin/kanitSayfasi.ts uretir) */
.marka { color: inherit; text-decoration: none; }
.kanit-sayfa { padding-block: var(--b5); display: grid; gap: var(--b4); }
.kanit-sayfa h1 { font-size: var(--o-h2); margin: 0; }
.kanit-not { color: var(--yazi-sol); font-size: var(--o-kucuk); margin: 0; }
.kanit-bayat { border: 1px solid var(--uyari); color: var(--uyari); padding: var(--b3); border-radius: var(--yuvarlak-kucuk); margin: 0; }
.kanit-model { display: grid; gap: var(--b2); border-top: 1px solid var(--cizgi); padding-top: var(--b4); }
.kanit-istemler { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--b2); }
.kanit-istem.genis { grid-column: 1 / -1; }
.kanit-sayfa h2 { margin: 0; font-size: var(--o-buyuk); }
.kanit-sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--b2); margin: 0; }
.kanit-sayilar div { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk); padding: var(--b2) var(--b3); }
.kanit-sayilar dt { color: var(--yazi-sol); font-size: var(--o-kucuk); }
.kanit-sayilar dd { margin: 0; font-family: var(--font-kod); font-size: var(--o-buyuk); }
.kanit-istem { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk); padding: var(--b2) var(--b3); display: grid; gap: var(--b1); align-content: start; }
.kanit-istem header { display: flex; flex-wrap: wrap; gap: var(--b2); align-items: center; font-size: var(--o-kucuk); }
.kanit-istem summary { cursor: pointer; color: var(--yazi-sol); font-size: var(--o-kucuk); }
.kanit-istem summary:hover, .kanit-istem summary:focus-visible { color: var(--yazi); }
.kanit-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--b3); }
.kanit-etiket { display: block; color: var(--yazi-cok-sol); font-size: var(--o-kucuk); margin-bottom: var(--b1); }
.kanit-once .kanit-cikti { border-color: var(--uyari); }
.kanit-cikti { margin: 0; font-family: var(--font-kod); font-size: var(--o-kucuk); white-space: pre-wrap; word-break: break-word; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk); padding: var(--b2) var(--b3); }
.kanit-hata { color: var(--tehlike); font-size: var(--o-kucuk); margin: 0; }
.kanit-olaylar { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--b2); }
.kanit-sayfa section { padding: 0; }

/* Sabit ust menu cipa ile atlanan bolum basligini ortmesin. */
section[id] { scroll-margin-top: 5rem; }

/* Alt sayfalarda marka ana sayfaya baglanti. */
a.marka { color: inherit; text-decoration: none; }

/* Kanit sayfasi ust kisim: ne yaptigimiz, ozet serit, ara baslik. */
.kanit-giris { font-size: var(--o-buyuk); line-height: 1.5; max-width: 62ch; margin: 0 0 var(--b3); }
.kanit-ozet { margin: var(--b4) 0; }
.kanit-ozet dd { font-size: 28px; font-weight: 650; }
.kanit-sayfa > section { display: grid; gap: var(--b3); margin-top: var(--b4); }
.kanit-sayfa > section > .kanit-istemler, .kanit-sayfa > section > .tablo-sarmal { margin: 0; }
.kanit-bulgu { background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--uyari); border-radius: var(--yuvarlak-kucuk); padding: var(--b3) var(--b4); display: grid; gap: var(--b2); }
.kanit-bulgu h3 { margin: 0; font-size: var(--o-buyuk); line-height: 1.35; }
.kanit-bulgu p { margin: 0; color: var(--yazi-sol); max-width: 70ch; }
.kanit-bulgu > a { justify-self: start; font-size: var(--o-kucuk); }
.kanit-saglayici { color: var(--yazi-cok-sol); font-size: var(--o-kucuk); margin-left: var(--b1); }
#models td { vertical-align: middle; }
.kanit-geri { margin: 0; font-size: var(--o-kucuk); }
.kanit-ag summary { cursor: pointer; color: var(--yazi-sol); font-size: var(--o-kucuk); }
.kanit-ag summary:hover, .kanit-ag summary:focus-visible { color: var(--yazi); }
.kanit-ag p { margin-top: var(--b2); max-width: 70ch; }

/* Aydinlik tema: isletim sistemi acik temadaysa kendiliginden. Dugme ve JS yok. */
@media (prefers-color-scheme: light) {
  :root {
    --zemin: #ffffff;
    --zemin-2: #f6f8fa;
    --yuzey: #ffffff;
    --yuzey-ust: #f3f5f8;
    --cizgi: #d8dee4;
    --cizgi-parlak: #b8c2cc;
    --yazi: #1f2328;
    --yazi-sol: #57606a;
    --yazi-cok-sol: #6e7781;
    --vurgu: #0969da;
    --iyi: #1a7f37;
    --uyari: #9a6700;
    --tehlike: #cf222e;
    --vurgu-uzeri: #ffffff;
    --vurgu-parlak: #0550ae;
    --ustbar-zemin: rgba(255,255,255,.85);
    --golge: 0 1px 2px rgba(31,35,40,.08), 0 8px 24px rgba(31,35,40,.06);
  }
}

/* Tek bakis izgarasi: satir model, sutun soru. Sembol + renk, renk tek basina anlam tasimaz. */
.izgara { border-collapse: collapse; font-size: var(--o-kucuk); }
.izgara th, .izgara td { padding: var(--b1); text-align: center; border-bottom: 1px solid var(--cizgi); }
.izgara thead th { vertical-align: bottom; height: 130px; }
.izgara thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: var(--yazi-sol); font-weight: 500; }
.izgara thead th:first-child { vertical-align: bottom; text-align: left; }
.izgara tbody th { text-align: left; white-space: nowrap; padding-right: var(--b3); font-weight: 500; }
.izgara tbody tr:hover { background: var(--yuzey); }
.hucre { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--yuvarlak-kucuk); font-weight: 700; text-decoration: none; transition: transform var(--gecis); }
a.hucre:hover, a.hucre:focus-visible { transform: scale(1.18); }
.hucre.dogru     { background: color-mix(in srgb, var(--iyi) 16%, transparent); color: var(--iyi); }
.hucre.yanlis    { background: color-mix(in srgb, var(--tehlike) 16%, transparent); color: var(--tehlike); }
.hucre.degisti   { background: var(--uyari); color: var(--zemin); }
.hucre.erken     { background: color-mix(in srgb, var(--uyari) 14%, transparent); color: var(--uyari); }
.hucre.basarisiz { background: transparent; color: var(--tehlike); outline: 1px dashed var(--tehlike); outline-offset: -3px; }
.hucre.cevap     { background: var(--yuzey-ust); color: var(--yazi-sol); }
.hucre.yok       { color: var(--yazi-cok-sol); }
.hucre.ornek     { width: 20px; height: 20px; font-size: 11px; }
.izgara-anahtar { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--b2) var(--b4); color: var(--yazi-sol); font-size: var(--o-kucuk); }
.izgara-anahtar li { display: flex; align-items: center; gap: var(--b2); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kucuk-grafik { display: block; width: 120px; height: 28px; }
.kucuk-grafik polyline { fill: none; stroke: var(--vurgu); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#raw .kanit-model { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk); padding: var(--b2) var(--b3); }
#raw .kanit-model summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b2); }
#raw .kanit-model summary:hover strong, #raw .kanit-model summary:focus-visible strong { color: var(--vurgu); }
#raw .kanit-model[open] summary { margin-bottom: var(--b3); }
.kanit-bulgu.gozlem { border-left-color: var(--cizgi-parlak); }
.kanit-bulgu h3 .nisan { vertical-align: middle; margin-right: var(--b1); font-size: 11px; }
.kanit-bulgu .dogru .kanit-cikti { border-color: var(--iyi); }
#found > .kanit-not .nisan { margin-left: var(--b2); }
.kanit-duyuru { margin: 0; font-size: var(--o-kucuk); color: var(--yazi-sol); background: var(--zemin-2); border: 1px dashed var(--cizgi-parlak); border-radius: var(--yuvarlak-kucuk); padding: var(--b2) var(--b3); max-width: 80ch; }
.kanit-duyuru a { margin-left: var(--b1); }