/* Eski Devral arayüz stili, suit sayfasına gömülmüş hâli.
   Kaynak: web/css/stil.css. Türev kuralları:
     - :root ve tema blokları silindi. Değişkenler suit stil.css'inden gelir;
       21 değişkenin adı iki dosyada da aynı. İkinci :root suit temasını bozardı.
     - Global eleman kuralları (body, h1-h3, p, a, main, footer, :focus-visible,
       .gizli, .kucuk, .sr) silindi. Suit karşılıyor.
     - Eski üst bant, hakkında bölümü, taşınır tablosu ve SSS listesi silindi.
       Suit kendi başlığını ve içerik bölümlerini çizer.
     - Kalan her seçici .devral-kok ile sınırlandı. Araç gövdesi o kabın içinde.
   Bu dosya suit stil.css'inden SONRA yüklenir. Eşit özgüllükte sonuncu kazanır.
   Sızıntı sıfırlamaları "suit sıfırlama" yorumuyla işaretli. */

/* ---------- İşletim sistemi anahtarı ---------- */

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

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

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

.devral-kok .kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.devral-kok .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;
}
.devral-kok .yon-kart:hover { border-color: var(--vurgu); }
.devral-kok .yon-kart h2 { font-size: 1.22rem; }
.devral-kok .yon-kart p { color: var(--yazi-soluk); margin: 0; }
.devral-kok .yon-kart .git {
  margin-top: auto;
  color: var(--vurgu);
  font-weight: 600;
  font-size: 0.92rem;
}

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

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

/* suit sıfırlama: suit .adimlar grid + li sayacı kurar, eski akış div kullanır */
.devral-kok .adimlar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  counter-reset: none;
}
/* suit sıfırlama: .adimlar li kuralı ve numara rozeti akış içindeki HER listeye
   sızar (kısa adım listesi, atlanan öğeler, eksik medya). Düz listeye döndür. */
.devral-kok .adimlar li {
  display: list-item;
  gap: normal;
  align-items: normal;
  counter-increment: none;
}
.devral-kok .adimlar li::before { content: none; }

.devral-kok .adim {
  background: var(--zemin-kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 20px 22px;
}
.devral-kok .adim[data-durum="bekliyor"] { opacity: 0.45; }
.devral-kok .adim[data-durum="bitti"] { padding: 13px 22px; }
.devral-kok .adim-basi {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* eski h2/h3 ölçüsü silindi; adım başlıkları eski boyutta kalsın */
.devral-kok .adim-basi h3 { font-size: 0.98rem; font-weight: 600; }
.devral-kok .adim h4 { font-size: 0.98rem; margin: 0 0 4px; }
.devral-kok .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);
}
.devral-kok .adim[data-durum="acik"] .adim-no { background: var(--vurgu-zemin); color: var(--vurgu); border-color: var(--vurgu); }
.devral-kok .adim[data-durum="bitti"] .adim-no { color: var(--olumlu-yazi); }
.devral-kok .adim-ozet { color: var(--yazi-cok-soluk); font-size: 0.88rem; margin-left: auto; }
.devral-kok .adim-govde { margin-top: 12px; }
.devral-kok .adim-aciklama { color: var(--yazi-soluk); margin-bottom: 14px; }

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

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

/* suit .dugme min-height 42px ve 0 18px dolgu ister; eski ölçüye döndür. */
.devral-kok .dugme {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--yuvarlak-kucuk);
  min-height: 0;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid var(--cizgi);
  background: var(--zemin-ic);
  color: var(--yazi);
  text-decoration: none;
}
.devral-kok .dugme:hover { border-color: var(--vurgu); background: var(--zemin-ic); text-decoration: none; }
.devral-kok .dugme.birincil {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: var(--vurgu-yazi);
}
.devral-kok .dugme.birincil:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.devral-kok .dugme[disabled] { opacity: 0.45; cursor: not-allowed; }
.devral-kok .dugme.sade {
  background: transparent;
  border-color: transparent;
  color: var(--yazi-soluk);
  font-weight: 500;
}
.devral-kok .dugme.sade:hover { color: var(--yazi); border-color: var(--cizgi); background: transparent; }
.devral-kok .dugme-sira { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

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

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

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

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

/* ---------- İki yol kartı (akış A adım 1) ---------- */

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

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

.devral-kok .proje-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.devral-kok .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;
}
.devral-kok .proje:hover { border-color: var(--vurgu); }
.devral-kok .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;
}
.devral-kok .proje .kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.devral-kok .proje .bilgi { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.devral-kok .proje .ad { font-weight: 600; overflow-wrap: anywhere; }
.devral-kok .proje .kucuk { color: var(--yazi-cok-soluk); font-size: 0.82rem; }

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

.devral-kok .sekans-liste { display: flex; flex-direction: column; gap: 8px; }
.devral-kok .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;
}
.devral-kok .sekans:hover { border-color: var(--vurgu); }
.devral-kok .sekans .ad { font-weight: 600; overflow-wrap: anywhere; }
.devral-kok .sekans .kucuk { color: var(--yazi-cok-soluk); font-size: 0.84rem; }
.devral-kok .sekans .sag { margin-left: auto; text-align: right; color: var(--yazi-cok-soluk); font-size: 0.84rem; flex: none; }

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

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

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

.devral-kok .not {
  border-radius: var(--yuvarlak-kucuk);
  padding: 11px 14px;
  font-size: 0.92rem;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.devral-kok .not h3 { font-size: 0.92rem; margin-bottom: 3px; }
.devral-kok .not.uyari { background: var(--uyari-zemin); color: var(--uyari-yazi); border-color: var(--uyari-zemin); }
.devral-kok .not.hata { background: var(--hata-zemin); color: var(--hata-yazi); }
.devral-kok .not.olumlu { background: var(--olumlu-zemin); color: var(--olumlu-yazi); }
.devral-kok .not.duz { background: var(--zemin-ic); color: var(--yazi-soluk); border-color: var(--cizgi-hafif); }
.devral-kok .not ul { margin: 6px 0 0; padding-left: 18px; }
.devral-kok .not li { margin-bottom: 2px; }
/* JS boş kutu bırakabilir; dolmadan görünmesin */
.devral-kok .not:empty { display: none; }

.devral-kok details { margin-bottom: 12px; }
.devral-kok details > summary {
  cursor: pointer;
  color: var(--vurgu);
  font-size: 0.9rem;
  padding: 3px 0;
}
/* suit .icerik 34px dolgu verir; details kutusu eski ölçüde kalsın */
.devral-kok 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;
}
.devral-kok details .icerik ul { margin: 0; padding-left: 18px; }
.devral-kok details .icerik li { margin-bottom: 4px; font-size: 0.9rem; }
.devral-kok details .icerik .zaman { color: var(--yazi-cok-soluk); font-size: 0.82rem; margin-left: 8px; }

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

.devral-kok .secenekler { display: flex; flex-direction: column; gap: 10px; }
/* suit .secenek grid + 14px alt boşluk verir; eski radyo kartı flex ister */
.devral-kok .secenek {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-kucuk);
  padding: 13px 15px;
  margin-bottom: 0;
  cursor: pointer;
  background: var(--zemin-ic);
}
.devral-kok .secenek:hover { border-color: var(--vurgu); }
.devral-kok .secenek:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-zemin); }
.devral-kok .secenek input { margin: 3px 0 0; accent-color: var(--vurgu); flex: none; }
/* suit .secenek input:focus outline'ı siler; radyo odağı görünür kalsın */
.devral-kok .secenek input:focus { box-shadow: none; }
.devral-kok .secenek input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.devral-kok .secenek .baslik { font-weight: 600; }
.devral-kok .secenek .aciklama { color: var(--yazi-soluk); font-size: 0.89rem; }
.devral-kok .secenek.kapali { opacity: 0.5; cursor: not-allowed; }
.devral-kok .secenek.kapali:hover { border-color: var(--cizgi); }
.devral-kok .secenek .ek { margin-top: 10px; }

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

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

/* suit .ilerleme ortalı grid; eski çubuk sola dayalı blok ister */
.devral-kok .ilerleme {
  display: block;
  gap: 0;
  text-align: left;
  padding: 0;
  margin-top: 14px;
}
.devral-kok .ilerleme .cubuk {
  height: 6px;
  background: var(--zemin-ic);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--cizgi-hafif);
}
.devral-kok .ilerleme .dolu {
  height: 100%;
  width: 0;
  background: var(--vurgu);
  transition: width 0.15s linear;
}
.devral-kok .ilerleme .yazi { color: var(--yazi-cok-soluk); font-size: 0.85rem; margin-top: 6px; }

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

/* suit .bolum 18px/30px dolgu verir; eski bölüm üstten boşluk ister */
.devral-kok .bolum { margin-top: 46px; padding: 0; }
.devral-kok .bolum > h2 { margin-bottom: 6px; font-size: 1.12rem; }
.devral-kok .bolum > .aciklama { color: var(--yazi-soluk); margin-bottom: 16px; }

.devral-kok .arac-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.devral-kok .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;
}
.devral-kok .arac .ad { font-weight: 600; overflow-wrap: anywhere; }
.devral-kok .arac p { color: var(--yazi-soluk); font-size: 0.89rem; margin: 0; }
.devral-kok .arac .indir-satir { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.devral-kok .arac .boyut { color: var(--yazi-cok-soluk); font-size: 0.82rem; }
.devral-kok .arac a.dugme { text-decoration: none; }

@media (max-width: 620px) {
  .devral-kok .adim { padding: 16px 15px; }
  .devral-kok .yon-kart { padding: 18px; min-height: 0; }
  .devral-kok .adim-ozet { margin-left: 0; width: 100%; }
  .devral-kok .adim-basi { flex-wrap: wrap; }
}