/* ============================================================================
   JOI_ULUPINAR.API — Yönetim paneli
   "Operatör konsolu" dili: koyu enstrüman rayı, teal sinyal, mono tanımlayıcılar.
   Kişilik harf-aralıklı üst-etiketlerden ve her makine değerinin mono oluşundan gelir.
   ========================================================================== */

:root {
  --murekkep:      #16212B;
  --murekkep-2:    #1E3040;
  --zemin:         #EBEEF1;
  --kagit:         #FFFFFF;
  --kagit-2:       #F6F8FA;
  --cizgi:         #DDE3E9;
  --cizgi-koyu:    #C6CFD8;
  --metin:         #1A2530;
  --soluk:         #5E6E7B;
  --sinyal:        #0C7C74;
  --sinyal-koyu:   #0A625C;
  --sinyal-parlak: #16C0B0;
  --sinyal-zemin:  #E1F2F0;
  --kehribar:      #B45309;
  --kehribar-zemin:#FBEEDD;
  --hata:          #B42318;
  --hata-zemin:    #FCEBE9;

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

  --r:      6px;
  --r-kucuk:4px;
  --golge:  0 1px 2px rgba(16, 33, 43, .04), 0 4px 16px rgba(16, 33, 43, .05);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--metin);
  background: var(--zemin);
  /* İnce enstrüman dokusu: neredeyse görünmez bir ölçü ızgarası */
  background-image:
    linear-gradient(transparent 95%, rgba(30, 48, 64, .015) 95%),
    linear-gradient(90deg, transparent 95%, rgba(30, 48, 64, .015) 95%);
  background-size: 22px 22px;
}

/* --- Üst ray (enstrüman şeridi) --------------------------------------------- */
.ust-serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  min-height: 56px;
  color: #fff;
  background: linear-gradient(180deg, var(--murekkep) 0%, var(--murekkep-2) 100%);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 20px rgba(16, 33, 43, .18);
}

/* Marka kilidi — bir servis tanımlayıcısı gibi okunur */
.marka {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.marka .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sinyal-parlak);
  box-shadow: 0 0 0 3px rgba(22, 192, 176, .18);
  animation: nabiz 3.2s ease-in-out infinite;
}
.marka .ad    { color: #EAF0F4; font-weight: 600; }
.marka .egik  { color: var(--sinyal-parlak); opacity: .9; }
.marka .rol   { color: #8CA0AE; letter-spacing: .06em; text-transform: lowercase; }

@keyframes nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Sekme navigasyonu */
.ust-serit nav { display: flex; align-items: center; gap: 4px; }
.ust-serit nav a {
  position: relative;
  color: #B7C4CE;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 8px 12px;
  border-radius: var(--r-kucuk);
  transition: color .15s ease, background-color .15s ease;
}
.ust-serit nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ust-serit nav a.etkin { color: #fff; }
.ust-serit nav a.etkin::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--sinyal-parlak);
  border-radius: 2px 2px 0 0;
}

.cikis { margin: 0 0 0 8px; }
.cikis button {
  font-family: var(--font-ui);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #D6E0E7;
  padding: 6px 14px;
  border-radius: var(--r-kucuk);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cikis button:hover { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(255, 255, 255, .06); }

/* --- İçerik ----------------------------------------------------------------- */
main { max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; }
main.orta {
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-top: 24px; padding-bottom: 48px;
}

.sayfa-baslik { margin-bottom: 24px; }
main.orta .sayfa-baslik { text-align: center; }

.ust-etiket {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sinyal);
}
h1 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--murekkep);
}
h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--murekkep);
  margin: 36px 0 12px;
}

/* --- Kartlar / paneller ----------------------------------------------------- */
form.kart, .panel {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  box-shadow: var(--golge);
  padding: 24px;
}
form.kart + h2 { margin-top: 40px; }

/* Giriş kartı — dar, üstünde teal aksan çizgisi */
.giris-kart {
  width: 100%;
  max-width: 380px;
  position: relative;
  overflow: hidden;
}
.giris-kart::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sinyal) 0%, var(--sinyal-parlak) 100%);
}

fieldset {
  border: none;
  border-top: 1px solid var(--cizgi);
  margin: 0;
  padding: 20px 0 4px;
}
fieldset:first-of-type { border-top: none; padding-top: 0; }
legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soluk);
}

label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 550;
  font-size: 13px;
  color: var(--metin);
}

input[type=text], input[type=password], select {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--metin);
  background: var(--kagit);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-kucuk);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #9AAAB6; }
input[type=text]:hover, input[type=password]:hover, select:hover { border-color: #A9B5C0; }
input[type=text]:focus, input[type=password]:focus, select:focus {
  outline: none;
  border-color: var(--sinyal);
  box-shadow: 0 0 0 3px rgba(12, 124, 116, .15);
}

/* Makine değerleri: kod / host / anahtar / IP — mono ve hafif izli */
input.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: .01em; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E6E7B' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* --- Düğmeler --------------------------------------------------------------- */
.dugme {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 18px;
  border-radius: var(--r-kucuk);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.dugme-birincil {
  background: var(--sinyal);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 98, 92, .25);
}
.dugme-birincil:hover { background: var(--sinyal-koyu); }
.dugme-hafif {
  background: var(--kagit);
  border-color: var(--cizgi-koyu);
  color: var(--metin);
}
.dugme-hafif:hover { border-color: #A9B5C0; background: var(--kagit-2); }

/* Sınıfsız düğmeler için makul temel (ikincil) */
button:not(.dugme):not(.cikis button) {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  padding: 9px 18px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-kucuk);
  background: var(--kagit);
  color: var(--metin);
  cursor: pointer;
}

.islem { display: flex; gap: 10px; margin-top: 24px; align-items: center; }
.islem a { text-decoration: none; }

/* Alan + yardımcı buton (ör. API anahtarı üret) tek satırda */
.alan-satir { display: flex; gap: 8px; align-items: stretch; }
.alan-satir > input { flex: 1 1 auto; min-width: 0; }
.alan-satir > .dugme { flex: 0 0 auto; white-space: nowrap; }

/* Araç çubuğu (liste üstü eylem + bağlam) */
.arac-cubugu {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.arac-cubugu .sayac {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--soluk);
  letter-spacing: .02em;
}
.arac-cubugu a { text-decoration: none; }

/* --- Kayıt defteri tablosu -------------------------------------------------- */
.defter {
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--golge);
  background: var(--kagit);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  padding: 11px 16px;
  background: var(--kagit-2);
  border-bottom: 1px solid var(--cizgi);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soluk);
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--kagit-2); }
td.mono, .defter td.mono { font-family: var(--font-mono); font-size: 13px; color: #223140; }
td .ad-birincil { font-weight: 600; color: var(--murekkep); }
td.eylem { text-align: right; }
td.eylem a {
  color: var(--sinyal);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
td.eylem a:hover { text-decoration: underline; }

/* Bağımsız tablo (ETA veritabanları) da defter görünümü alır */
main > table, form + table {
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--golge);
  background: var(--kagit);
}

/* --- Durum pip'i ------------------------------------------------------------ */
.durum {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.durum::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
}
.durum-aktif {
  color: var(--sinyal-koyu);
  background: var(--sinyal-zemin);
  border-color: rgba(12, 124, 116, .2);
}
.durum-aktif::before { background: var(--sinyal); box-shadow: 0 0 0 3px rgba(12, 124, 116, .16); }
.durum-pasif {
  color: var(--kehribar);
  background: var(--kehribar-zemin);
  border-color: rgba(180, 83, 9, .18);
}
.durum-pasif::before { background: var(--kehribar); }

/* --- Uyarılar / ipuçları ---------------------------------------------------- */
.hata {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--hata);
  background: var(--hata-zemin);
  border: 1px solid rgba(180, 35, 24, .2);
  border-left: 3px solid var(--hata);
  border-radius: var(--r-kucuk);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: 13px;
}
.bilgi {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--sinyal-koyu);
  background: var(--sinyal-zemin);
  border: 1px solid rgba(12, 124, 116, .2);
  border-left: 3px solid var(--sinyal);
  border-radius: var(--r-kucuk);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: 13px;
}
.ipucu { color: var(--soluk); font-size: 12px; margin: 6px 0 0; }
.ipucu .mono { font-family: var(--font-mono); font-size: 11.5px; color: #223140; }

/* --- Tür rozeti (ETA veritabanı tanımları) ---------------------------------- */
.rozet {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.rozet-sirket { color: var(--soluk); background: var(--kagit-2); border-color: var(--cizgi); }
.rozet-master { color: var(--murekkep-2); background: #E7EDF3; border-color: var(--cizgi-koyu); }

/* Tablo satırındaki tek düğmelik form, hücreyi büyütmemeli */
.satir-form { display: inline; margin: 0; }
.satir-form .dugme { padding: 4px 12px; font-size: 12px; }

/* Boş durum */
.bos-durum {
  text-align: center;
  color: var(--soluk);
  background: var(--kagit);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--r);
  padding: 40px 24px;
  margin-top: 4px;
}

/* --- Erişilebilirlik -------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--sinyal); outline-offset: 2px; }
.ust-serit :focus-visible { outline-color: var(--sinyal-parlak); }

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

/* ============================================================================
   Kullanım kılavuzu (açık sayfa "/") — aynı konsol dili
   ========================================================================== */

main.genis { max-width: 1120px; }
.marka-bag { text-decoration: none; }

/* --- Hero: sol pitch + sağ terminal ----------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 16px 0 40px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 44px;
}
.hero h1 { font-size: 34px; line-height: 1.12; margin: 10px 0 0; }
.hero .lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #35434F;
  max-width: 52ch;
}
.hero .lead strong { color: var(--murekkep); font-weight: 650; }
.hero-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-eylem a { text-decoration: none; }

/* Terminal kartı — geliştirici konsolu imzası */
.terminal {
  background: linear-gradient(180deg, #16212B 0%, #172A36 100%);
  border: 1px solid #0A1219;
  border-radius: var(--r);
  box-shadow: 0 18px 46px rgba(16, 33, 43, .30);
  overflow: hidden;
}
.terminal-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: #35485580; display: inline-block; }
.terminal-bar i:nth-child(1) { background: #E5484D80; }
.terminal-bar i:nth-child(2) { background: #F5A62380; }
.terminal-bar i:nth-child(3) { background: #30A46C80; }
.terminal-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6E8391;
}
.terminal pre {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: #C6D3DC;
  overflow-x: auto;
}
.terminal .yorum  { color: #5F7A88; }
.terminal .metot  { color: var(--sinyal-parlak); font-weight: 600; }
.terminal .bayrak { color: #9DB0BC; }
.terminal .metin  { color: #E8B98A; }

/* --- Adım kartları (gerçek sıra: kimlik → token → veri) --------------------- */
.bolum { margin: 0 0 48px; }
.bolum > h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.bolum > .aciklama { color: var(--soluk); margin: 0 0 20px; max-width: 66ch; }

.adim-listesi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.adim {
  position: relative;
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  padding: 22px 20px 20px;
  box-shadow: var(--golge);
}
.adim-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--sinyal);
}
.adim h3 { font-size: 15px; margin: 10px 0 8px; color: var(--murekkep); }
.adim p { margin: 0; color: #3C4A56; font-size: 13.5px; line-height: 1.6; }
.adim code, .kurallar code, .uc-defter code, .satir-ic code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--sinyal-zemin);
  color: var(--sinyal-koyu);
  padding: 1px 6px;
  border-radius: 4px;
}

/* --- Uç noktası tablosu ------------------------------------------------------ */
.metot {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: 4px;
  min-width: 46px;
  text-align: center;
}
.metot-get  { color: var(--sinyal-koyu); background: var(--sinyal-zemin); }
.metot-post { color: var(--kehribar);   background: var(--kehribar-zemin); }
.uc-defter td .yol { font-family: var(--font-mono); font-size: 13px; color: #223140; }
.erisim { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--soluk); }
.erisim.jwt { color: var(--sinyal-koyu); }

/* --- Örnek akış: kod blokları ----------------------------------------------- */
.kod-blok {
  margin: 0 0 18px;
  background: linear-gradient(180deg, #16212B 0%, #172A36 100%);
  border: 1px solid #0A1219;
  border-radius: var(--r);
  overflow: hidden;
}
.kod-blok .kod-baslik {
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7C919E;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .03);
}
.kod-blok pre {
  margin: 0;
  padding: 15px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #C6D3DC;
  overflow-x: auto;
  white-space: pre;
}
.kod-blok .metot { background: transparent; color: var(--sinyal-parlak); padding: 0; }
.kod-blok .anahtar { color: #8FB8C8; }
.kod-blok .deger { color: #E8B98A; }

/* --- Kurallar --------------------------------------------------------------- */
.kurallar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kurallar li {
  position: relative;
  padding: 14px 16px 14px 44px;
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1.55;
  color: #3C4A56;
}
.kurallar li::before {
  content: "";
  position: absolute; left: 18px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sinyal);
  box-shadow: 0 0 0 4px var(--sinyal-zemin);
}
.kurallar li strong { color: var(--murekkep); font-weight: 650; }

/* --- Alt bilgi -------------------------------------------------------------- */
.alt-bilgi {
  border-top: 1px solid var(--cizgi);
  padding: 22px 0 8px;
  color: var(--soluk);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .02em;
}

/* --- Duyarlılık ------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .adim-listesi { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ust-serit { flex-wrap: wrap; padding: 10px 16px; min-height: 0; gap: 10px 16px; }
  .marka .rol { display: none; }
  main { padding: 24px 16px 48px; }
  .hero h1 { font-size: 27px; }
  .arac-cubugu { flex-direction: column; align-items: stretch; }
  .islem { flex-wrap: wrap; }
  .defter { overflow-x: auto; }
  table { min-width: 560px; }
}