:root {
  --zemin: #0f1115;
  --kart: #171a21;
  --kart-kenar: #262b36;
  --metin: #e6e9ef;
  --sonik: #98a2b3;
  --vurgu: #4f8cff;
  --iyi: #2ea36b;
  --sari: #d09b28;
  --kotu: #d64b4b;
  --yuvarlak: 10px;
}

* { box-sizing: border-box; }

/* display:flex gibi yazar kurallari, tarayicinin [hidden] icin uyguladigi
   display:none'i ezer. Gizlemenin her yerde calismasi icin sart. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- yerlesim ---- */
.ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px;
  border-bottom: 1px solid var(--kart-kenar); background: #12141a;
}
.marka { font-weight: 700; font-size: 17px; color: var(--metin); }
.marka span { color: var(--sonik); font-weight: 400; }
.ust nav { display: flex; gap: 18px; flex-wrap: wrap; }
.ust nav a { color: var(--sonik); }
.ust nav a:hover { color: var(--metin); }
.ust nav a.sonik { color: #6b7280; }

main { max-width: 1060px; margin: 0 auto; padding: 26px 20px 60px; }
footer {
  max-width: 1060px; margin: 0 auto; padding: 0 20px 30px;
  color: #5d6675; font-size: 13px;
}

h1 { font-size: 23px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--sonik);
     text-transform: uppercase; letter-spacing: .04em; }

.dar { max-width: 400px; margin: 40px auto; }
.baslik-satiri {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.baslik-satiri h1 { margin: 0; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .ikili { grid-template-columns: 1fr; } }

.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 700px) { .izgara { grid-template-columns: 1fr; } }

/* ---- kart & form ---- */
.kart {
  background: var(--kart); border: 1px solid var(--kart-kenar);
  border-radius: var(--yuvarlak); padding: 20px;
}
.kart.genis { max-width: none; }

label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--sonik); }
label small { color: #6b7280; font-weight: 400; }

input, select, textarea {
  width: 100%; margin-top: 6px; padding: 9px 11px;
  background: #0d0f14; color: var(--metin);
  border: 1px solid #2d3340; border-radius: 8px; font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--vurgu); outline-offset: -1px; }
input:disabled { opacity: .5; }

button, .dugme {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  border: 1px solid #2d3340; background: #202634; color: var(--metin);
  font: inherit; cursor: pointer;
}
button:hover, .dugme:hover { background: #262d3d; text-decoration: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; font-weight: 600; }
.birincil:hover { background: #3f7bee; }
.ikincil { background: #232a38; }
.tehlike { background: #341c1c; border-color: #5b2c2c; color: #ff9d9d; }
.tehlike:hover { background: #452020; }

.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir + .satir { margin-top: 10px; }
.arali { margin-top: 16px; }

/* ---- uyarilar ---- */
.uyari {
  padding: 11px 14px; border-radius: 8px; margin-bottom: 16px;
  border: 1px solid; font-size: 14px;
}
.uyari.iyi  { background: #10281c; border-color: #1f5a3d; color: #86e0b0; }
.uyari.sari { background: #2a2312; border-color: #6b5320; color: #e8c877; }
.uyari.kotu { background: #2a1414; border-color: #6b2626; color: #f0a0a0; }
.uyari a { color: inherit; text-decoration: underline; }

.ipucu { color: var(--sonik); font-size: 13px; }
.bos { text-align: center; padding: 50px 20px; color: var(--sonik); }
.bos .dugme { margin-top: 12px; }
.gizli { display: none; }
.kalin { font-weight: 600; }
.sag { text-align: right; }
.tekgen { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }

/* ---- tablo ---- */
.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
.liste th {
  text-align: left; padding: 10px 12px; color: var(--sonik);
  font-weight: 500; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--kart-kenar);
}
.liste td { padding: 12px; border-bottom: 1px solid #1e222c; vertical-align: top; }
.liste tr:hover td { background: #14171e; }

/* ---- rozet ---- */
.rozet {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; text-transform: capitalize;
  background: #2a3040; color: var(--sonik);
}
.rozet.buyuk { font-size: 13px; padding: 5px 13px; }
.rozet.bekliyor     { background: #23293a; color: #9fb2d4; }
.rozet.hazirlaniyor { background: #2a2312; color: #e8c877; }
.rozet.calisiyor    { background: #16304a; color: #7cc0ff; }
.rozet.basarili     { background: #10281c; color: #86e0b0; }
.rozet.basarisiz    { background: #2a1414; color: #f0a0a0; }
.rozet.durduruldu   { background: #262a33; color: #98a2b3; }

/* ---- ozet listesi ---- */
.ozet { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-size: 14px; }
.ozet dt { color: var(--sonik); }
.ozet dd { margin: 0; }

.sonuc {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px;
  background: #0d0f14; border: 1px solid var(--kart-kenar); word-break: break-word;
}

/* ---- log ---- */
.log {
  height: 380px; overflow-y: auto; background: #0b0d12;
  border: 1px solid var(--kart-kenar); border-radius: 8px; padding: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
}
.log-satir { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid #12151c; }
.log-satir:last-child { border-bottom: 0; }
.log-zaman { color: #5d6675; flex-shrink: 0; }
.log-satir.warning span:last-child { color: #e8c877; }
.log-satir.error span:last-child { color: #f0a0a0; }

.captcha {
  display: block; margin: 12px 0; border-radius: 8px;
  background: #fff; padding: 6px; max-width: 100%;
}
.durum-satiri { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.onay {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 0; padding: 12px; border-radius: 8px;
  background: #0d0f14; border: 1px solid var(--kart-kenar);
  color: var(--sonik); font-size: 13.5px;
}
.onay input { width: auto; margin: 2px 0 0; flex-shrink: 0; }
.onay b { color: var(--metin); }

.tani { margin-top: 14px; }
.tani summary {
  cursor: pointer; color: var(--sonik); font-size: 13px;
  padding: 6px 0; user-select: none;
}
.tani summary:hover { color: var(--metin); }
.tani-gorsel {
  width: 100%; border-radius: 8px; border: 1px solid var(--kart-kenar);
  background: #fff;
}

/* kademeli secim alanlari */
.kademe { margin-bottom: 14px; }
.kademe > label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 0;
}
.kademe-ust { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.kademe-durum { color: var(--iyi); }
.kademe-durum.kotu { color: var(--sari); }
.kademe select, .kademe input { margin-top: 6px; }

.baglanti {
  background: none; border: 0; padding: 0; color: var(--vurgu);
  font-size: 12px; cursor: pointer; text-decoration: underline;
}
.baglanti:hover { background: none; color: #7aa9ff; }

select option[data-kapali] { color: #8b6b6b; }

/* kota acilis secici */
.acilis { margin-top: 4px; }
.acilis > label { margin-bottom: 8px; }
.secim-dugmeleri { display: flex; gap: 8px; flex-wrap: wrap; }
.secim-dugmeleri button {
  padding: 8px 14px; font-size: 13.5px; border-radius: 20px;
  background: #1b2029; border-color: #2d3340;
}
.secim-dugmeleri button.secili {
  background: var(--vurgu); border-color: var(--vurgu);
  color: #fff; font-weight: 600;
}
#ozelAlan { margin-top: 10px; }
#ozelAlan input { width: auto; flex: 1 1 150px; }
.acilis-onizleme {
  margin: 10px 0 0; font-size: 13.5px; color: var(--sonik);
  padding: 9px 12px; border-radius: 8px; background: #0d0f14;
  border: 1px solid var(--kart-kenar);
}
.acilis-onizleme.kotu { color: #e8c877; border-color: #6b5320; background: #2a2312; }

.gelismis {
  margin-top: 18px; border-top: 1px solid var(--kart-kenar); padding-top: 14px;
}
.gelismis summary {
  cursor: pointer; color: var(--sonik); font-size: 13px; user-select: none;
}
.gelismis summary:hover { color: var(--metin); }
.gelismis .izgara { margin-top: 14px; }
.gelismis label .ipucu { display: block; margin-top: 4px; }

/* ============ MOBİL ============
   Kullanıcıların çoğu telefondan girer. 620px altında:
   - üst menü tek satıra iner
   - tablolar karta dönüşür (yatay kaydırma yerine)
   - girdiler 16px olur (iOS Safari daha küçük yazıda sayfayı yakınlaştırır)
   - dokunma hedefleri 44px'e çıkar
*/
@media (max-width: 620px) {
  main { padding: 18px 14px 48px; }
  footer { padding: 0 14px 24px; }
  h1 { font-size: 20px; }

  /* --- üst menü --- */
  .ust {
    flex-direction: column; align-items: stretch;
    gap: 4px; padding: 10px 14px;
  }
  .marka { font-size: 16px; }
  .marka span { display: none; }          /* "Otomasyon" mobilde gereksiz */
  .ust nav {
    gap: 16px; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ust nav::-webkit-scrollbar { display: none; }
  .ust nav a {
    white-space: nowrap; font-size: 14px;
    min-height: 40px; display: flex; align-items: center;
  }

  /* --- dokunma hedefleri + iOS yakınlaştırma --- */
  input, select, textarea { font-size: 16px; padding: 11px; }
  button, .dugme { min-height: 44px; padding: 11px 16px; }
  .baglanti { min-height: 0; padding: 4px 0; }
  .secim-dugmeleri { gap: 6px; }
  .secim-dugmeleri button { flex: 1 1 46%; padding: 11px 8px; font-size: 14px; }

  /* --- tablo yerine kart --- */
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste tr {
    background: var(--kart); border: 1px solid var(--kart-kenar);
    border-radius: 10px; margin-bottom: 12px; padding: 4px 0;
  }
  .liste tr:hover td { background: transparent; }
  .liste td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; text-align: right; padding: 8px 14px; border: 0;
  }
  .liste td + td { border-top: 1px solid #1e222c; }
  .liste td::before {
    content: attr(data-etiket); flex: 0 0 auto; text-align: left;
    color: var(--sonik); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .04em; font-family: inherit;
  }
  /* kartın başlığı: etiketsiz, tam genişlik */
  .liste td.ana-hucre {
    display: block; text-align: left; font-size: 15px;
    padding: 12px 14px 10px; border-top: 0;
  }
  .liste td.ana-hucre::before { content: none; }
  .liste td.son-hucre { justify-content: flex-end; }
  .liste td.son-hucre::before { content: none; }
  .liste td.son-hucre form { width: 100%; }
  .liste td.son-hucre button { width: 100%; }

  /* --- iş detayı --- */
  .log { height: 300px; font-size: 12px; }
  .ozet { grid-template-columns: 1fr; gap: 2px 0; }
  .ozet dt { margin-top: 8px; font-size: 12px; text-transform: uppercase;
             letter-spacing: .03em; }
  .ozet dd { margin-bottom: 2px; }
  .baslik-satiri { align-items: flex-start; }
  #ozelAlan { flex-direction: column; }
  #ozelAlan input { width: 100%; flex: none; }
}

/* tür onay kutuları (birden fazla tür seçilebilir) */
.kutu-listesi {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: #0d0f14; border: 1px solid #2d3340;
  display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 42px;
  align-items: center;
}
.kutu-listesi .kutu {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 4px; color: var(--metin); font-size: 14px; cursor: pointer;
  min-height: 32px;
}
.kutu-listesi .kutu input { width: 18px; height: 18px; margin: 0; }
.kutu-listesi .kutu.kapali { color: #8b6b6b; cursor: not-allowed; }
@media (max-width: 620px) {
  .kutu-listesi { flex-direction: column; align-items: stretch; gap: 0; }
  .kutu-listesi .kutu { min-height: 44px; border-bottom: 1px solid #1e222c; }
  .kutu-listesi .kutu:last-child { border-bottom: 0; }
}
.kotu-yazi { color: #e8c877; }