/* Devral arayüz stili.
   Koyu tema varsayılan. Açık tema prefers-color-scheme ile gelir.
   Sistem fontu. Tek vurgu rengi. Dış istek yok. */

:root {
  --zemin: #14161a;
  --zemin-kart: #1c1f25;
  --zemin-ic: #23272f;
  --cizgi: #333944;
  --cizgi-hafif: #2a2f38;
  --yazi: #e7e9ee;
  --yazi-soluk: #a3aab8;
  --yazi-cok-soluk: #7b8394;
  --vurgu: #6fa8ff;
  --vurgu-koyu: #4b8ae8;
  --vurgu-zemin: rgba(111, 168, 255, 0.13);
  --uyari-yazi: #ffcf7a;
  --uyari-zemin: rgba(255, 191, 105, 0.11);
  --hata-yazi: #ff9b8f;
  --hata-zemin: rgba(255, 122, 105, 0.11);
  --olumlu-yazi: #86dca6;
  --olumlu-zemin: rgba(120, 214, 156, 0.11);
  --golge: 0 1px 2px rgba(0, 0, 0, 0.4);
  --yuvarlak: 10px;
  --yuvarlak-kucuk: 6px;
  --genislik: 1080px;
}

@media (prefers-color-scheme: light) {
  :root {
    --zemin: #f5f6f8;
    --zemin-kart: #ffffff;
    --zemin-ic: #eef0f4;
    --cizgi: #d3d7de;
    --cizgi-hafif: #e3e6eb;
    --yazi: #1b1e24;
    --yazi-soluk: #565d6a;
    --yazi-cok-soluk: #767d8a;
    --vurgu: #1660cc;
    --vurgu-koyu: #0f4ea8;
    --vurgu-zemin: rgba(22, 96, 204, 0.09);
    --uyari-yazi: #8a5800;
    --uyari-zemin: rgba(214, 154, 32, 0.13);
    --hata-yazi: #a8301c;
    --hata-zemin: rgba(190, 60, 40, 0.1);
    --olumlu-yazi: #14663a;
    --olumlu-zemin: rgba(28, 130, 76, 0.11);
    --golge: 0 1px 2px rgba(20, 24, 32, 0.12);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

code, kbd, .yol {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 0.98rem; }
p { margin: 0 0 0.7rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--vurgu); }

:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: 3px;
}

.gizli { display: none !important; }
.kucuk { color: var(--yazi-cok-soluk); font-size: 0.86rem; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Üst bant ---------- */

.ust {
  border-bottom: 1px solid var(--cizgi-hafif);
  background: var(--zemin-kart);
}
.ust-ic {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.marka { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.marka h1 { letter-spacing: 0.01em; }
.vaat { color: var(--yazi-soluk); font-size: 0.95rem; }
.ust-sag { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.anahtar { display: flex; align-items: center; gap: 7px; }
.anahtar > .etiket { color: var(--yazi-cok-soluk); font-size: 0.82rem; }
.anahtar-grup {
  display: inline-flex;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  overflow: hidden;
}
.anahtar-grup button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--yazi-soluk);
  font: inherit;
  font-size: 0.85rem;
  padding: 4px 11px;
  cursor: pointer;
}
.anahtar-grup button + button { border-left: 1px solid var(--cizgi); }
.anahtar-grup button:hover { color: var(--yazi); background: var(--zemin-ic); }
.anahtar-grup button[aria-pressed="true"] {
  background: var(--vurgu-zemin);
  color: var(--vurgu);
  font-weight: 600;
}

/* ---------- Sayfa gövdesi ---------- */

main {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 26px 20px 60px;
}

.alt-vaat {
  color: var(--yazi-cok-soluk);
  font-size: 0.9rem;
  margin: 0 0 22px;
}

/* ---------- İki büyük kart ---------- */

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.yon-kart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: var(--zemin-kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 24px;
  min-height: 168px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.yon-kart:hover { border-color: var(--vurgu); }
.yon-kart h2 { font-size: 1.22rem; }
.yon-kart p { color: var(--yazi-soluk); margin: 0; }
.yon-kart .git {
  margin-top: auto;
  color: var(--vurgu);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---------- Akış paneli ---------- */

.akis-ust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.akis-ust h2 { font-size: 1.15rem; }
.adim-sayaci { color: var(--yazi-cok-soluk); font-size: 0.85rem; }

.adimlar { display: flex; flex-direction: column; gap: 12px; }

.adim {
  background: var(--zemin-kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 20px 22px;
}
.adim[data-durum="bekliyor"] { opacity: 0.45; }
.adim[data-durum="bitti"] { padding: 13px 22px; }
.adim-basi {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adim-no {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--zemin-ic);
  color: var(--yazi-cok-soluk);
  border: 1px solid var(--cizgi);
}
.adim[data-durum="acik"] .adim-no { background: var(--vurgu-zemin); color: var(--vurgu); border-color: var(--vurgu); }
.adim[data-durum="bitti"] .adim-no { color: var(--olumlu-yazi); }
.adim-ozet { color: var(--yazi-cok-soluk); font-size: 0.88rem; margin-left: auto; }
.adim-govde { margin-top: 12px; }
.adim-aciklama { color: var(--yazi-soluk); margin-bottom: 14px; }

.degistir {
  appearance: none; border: 0; background: transparent;
  color: var(--vurgu); font: inherit; font-size: 0.85rem;
  cursor: pointer; padding: 2px 4px;
}
.degistir:hover { text-decoration: underline; }

/* ---------- Düğmeler ---------- */

.dugme {
  appearance: none;
  font: inherit;
  font-weight: 600;
  border-radius: var(--yuvarlak-kucuk);
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid var(--cizgi);
  background: var(--zemin-ic);
  color: var(--yazi);
}
.dugme:hover { border-color: var(--vurgu); }
.dugme.birincil {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #0d1117;
}
@media (prefers-color-scheme: light) {
  .dugme.birincil { color: #ffffff; }
}
.dugme.birincil:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.dugme[disabled] { opacity: 0.45; cursor: not-allowed; }
.dugme.sade {
  background: transparent;
  border-color: transparent;
  color: var(--yazi-soluk);
  font-weight: 500;
}
.dugme.sade:hover { color: var(--yazi); border-color: var(--cizgi); }
.dugme-sira { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Yol ipucu ---------- */

.yol-kutu {
  background: var(--zemin-ic);
  border: 1px solid var(--cizgi-hafif);
  border-radius: var(--yuvarlak-kucuk);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.yol-kutu .etiket { color: var(--yazi-cok-soluk); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.yol-satir { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.yol { word-break: break-all; color: var(--yazi); }
.yol-ipucu { color: var(--yazi-soluk); font-size: 0.88rem; margin-top: 6px; }

/* ---------- Bırakma alanı ---------- */

.birak-alan {
  border: 1px dashed var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 18px;
  text-align: center;
  color: var(--yazi-soluk);
  margin-top: 14px;
}
.birak-alan.uzerinde { border-color: var(--vurgu); background: var(--vurgu-zemin); color: var(--yazi); }
.birak-alan h3 { margin-bottom: 4px; }
.birak-alan p { font-size: 0.9rem; }

/* ---------- Iki yol karti (akis A adim 1) ---------- */

.yol-kartlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.yol-kart {
  background: var(--zemin-kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.yol-kart h4 { font-size: 0.98rem; margin: 0 0 4px; }
.yol-kart > .kucuk { margin: 0 0 10px; }
.yol-kart .yol-kutu { margin-top: 0; }
.yol-kart .birak-alan { margin-top: 12px; }
.yol-kart a.dugme { text-decoration: none; display: inline-block; }
.kisa-adim {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--yazi-soluk);
  font-size: 0.89rem;
}
.kisa-adim li { margin-bottom: 3px; }

/* ---------- Proje listesi ---------- */

.proje-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.proje {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  overflow: hidden;
  background: var(--zemin-ic);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.proje:hover { border-color: var(--vurgu); }
.proje .kapak {
  aspect-ratio: 16 / 9;
  background: var(--zemin);
  display: grid;
  place-items: center;
  color: var(--yazi-cok-soluk);
  font-size: 0.8rem;
  overflow: hidden;
}
.proje .kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proje .bilgi { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.proje .ad { font-weight: 600; overflow-wrap: anywhere; }
.proje .kucuk { color: var(--yazi-cok-soluk); font-size: 0.82rem; }

/* ---------- Sekans listesi ---------- */

.sekans-liste { display: flex; flex-direction: column; gap: 8px; }
.sekans {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--zemin-ic);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 11px 14px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sekans:hover { border-color: var(--vurgu); }
.sekans .ad { font-weight: 600; overflow-wrap: anywhere; }
.sekans .kucuk { color: var(--yazi-cok-soluk); font-size: 0.84rem; }
.sekans .sag { margin-left: auto; text-align: right; color: var(--yazi-cok-soluk); font-size: 0.84rem; flex: none; }

/* ---------- Özet sayıları ---------- */

.sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.sayi {
  background: var(--zemin-ic);
  border: 1px solid var(--cizgi-hafif);
  border-radius: var(--yuvarlak-kucuk);
  padding: 10px 12px;
}
.sayi .deger { font-size: 1.4rem; font-weight: 600; }
.sayi .etiket { color: var(--yazi-cok-soluk); font-size: 0.82rem; }

/* ---------- Notlar ---------- */

.not {
  border-radius: var(--yuvarlak-kucuk);
  padding: 11px 14px;
  font-size: 0.92rem;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.not h3 { font-size: 0.92rem; margin-bottom: 3px; }
.not.uyari { background: var(--uyari-zemin); color: var(--uyari-yazi); border-color: var(--uyari-zemin); }
.not.hata { background: var(--hata-zemin); color: var(--hata-yazi); }
.not.olumlu { background: var(--olumlu-zemin); color: var(--olumlu-yazi); }
.not.duz { background: var(--zemin-ic); color: var(--yazi-soluk); border-color: var(--cizgi-hafif); }
.not ul { margin: 6px 0 0; padding-left: 18px; }
.not li { margin-bottom: 2px; }

details { margin-bottom: 12px; }
details > summary {
  cursor: pointer;
  color: var(--vurgu);
  font-size: 0.9rem;
  padding: 3px 0;
}
details .icerik {
  margin-top: 8px;
  background: var(--zemin-ic);
  border: 1px solid var(--cizgi-hafif);
  border-radius: var(--yuvarlak-kucuk);
  padding: 10px 14px;
  max-height: 260px;
  overflow: auto;
}
details .icerik ul { margin: 0; padding-left: 18px; }
details .icerik li { margin-bottom: 4px; font-size: 0.9rem; }
details .icerik .zaman { color: var(--yazi-cok-soluk); font-size: 0.82rem; margin-left: 8px; }

/* ---------- Seçenekler ---------- */

.secenekler { display: flex; flex-direction: column; gap: 10px; }
.secenek {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 13px 15px;
  cursor: pointer;
  background: var(--zemin-ic);
}
.secenek:hover { border-color: var(--vurgu); }
.secenek:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-zemin); }
.secenek input { margin: 3px 0 0; accent-color: var(--vurgu); flex: none; }
.secenek .baslik { font-weight: 600; }
.secenek .aciklama { color: var(--yazi-soluk); font-size: 0.89rem; }
.secenek.kapali { opacity: 0.5; cursor: not-allowed; }
.secenek.kapali:hover { border-color: var(--cizgi); }
.secenek .ek { margin-top: 10px; }

label.alan { display: flex; flex-direction: column; gap: 5px; max-width: 380px; margin-bottom: 14px; }
label.alan > span { color: var(--yazi-cok-soluk); font-size: 0.85rem; }
input[type="text"], select {
  font: inherit;
  color: var(--yazi);
  background: var(--zemin-ic);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 8px 10px;
}

/* ---------- İlerleme ---------- */

.ilerleme { margin-top: 14px; }
.ilerleme .cubuk {
  height: 6px;
  background: var(--zemin-ic);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--cizgi-hafif);
}
.ilerleme .dolu {
  height: 100%;
  width: 0;
  background: var(--vurgu);
  transition: width 0.15s linear;
}
.ilerleme .yazi { color: var(--yazi-cok-soluk); font-size: 0.85rem; margin-top: 6px; }

/* ---------- Yardımcı araçlar ---------- */

.bolum { margin-top: 46px; }
.bolum > h2 { margin-bottom: 6px; }
.bolum > .aciklama { color: var(--yazi-soluk); margin-bottom: 16px; }

.arac-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.arac {
  background: var(--zemin-kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arac .ad { font-weight: 600; overflow-wrap: anywhere; }
.arac p { color: var(--yazi-soluk); font-size: 0.89rem; margin: 0; }
.arac .indir-satir { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.arac .boyut { color: var(--yazi-cok-soluk); font-size: 0.82rem; }
.arac a.dugme { text-decoration: none; display: inline-block; }

/* ---------- Hakkında bölümü (statik, SEO/AI-okunabilirlik) ---------- */

.hakkinda h2 {
  margin-top: 34px;
  margin-bottom: 10px;
}
.hakkinda h2:first-child { margin-top: 0; }
.hakkinda h3 {
  margin-top: 18px;
  margin-bottom: 8px;
}
.hakkinda > p,
.hakkinda p { color: var(--yazi-soluk); }

.hakkinda-adimlar {
  margin: 0;
  padding-left: 22px;
  color: var(--yazi-soluk);
}
.hakkinda-adimlar li { margin-bottom: 5px; }

.tasinir-tablosu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.tasinir-tablosu h3 { margin-top: 0; }
.tasinir-tablosu ul {
  margin: 0;
  padding-left: 20px;
  color: var(--yazi-soluk);
}
.tasinir-tablosu li { margin-bottom: 4px; }

.sss-liste details {
  background: var(--zemin-kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 12px 15px;
  margin-bottom: 10px;
}
.sss-liste summary {
  font-weight: 600;
  color: var(--yazi);
}
.sss-liste details p {
  margin-top: 8px;
  color: var(--yazi-soluk);
}

footer {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 26px 20px 40px;
  color: var(--yazi-cok-soluk);
  font-size: 0.86rem;
  border-top: 1px solid var(--cizgi-hafif);
}

@media (max-width: 620px) {
  .ust-ic { padding: 12px 14px; }
  main { padding: 20px 14px 44px; }
  .adim { padding: 16px 15px; }
  .yon-kart { padding: 18px; min-height: 0; }
  .adim-ozet { margin-left: 0; width: 100%; }
  .adim-basi { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}