/* ============================================
   Yükçe - Giris ekrani
   ============================================
   style.css'teki degiskenleri ve .btn / .form-group siniflarini kullanir;
   burada yalnizca bu sayfaya ozel yerlesim var. */

.giris-govde {
  min-height: 100vh;
  background: var(--color-bg-secondary);
}

.giris-sahne {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* -------- sol: form karti -------- */
.giris-kart {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
}

.giris-logo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: 28px;
}

.giris-kart h1 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.giris-alt {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 28px;
}

/* İki giriş yolu: kullanıcı adı (günlük) / posta hesabı (ilk kurulum). */
.giris-sekmeler {
  display: flex;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  background: var(--status-bekliyor-bg);
  border-radius: var(--radius);
}

.giris-sekme {
  flex: 1;
  padding: 9px 12px;
  border: 0;
  border-radius: calc(var(--radius) - 3px);
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.giris-sekme:hover { color: var(--color-text); }

.giris-sekme.aktif {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-kart);
}

/* Kullanıcı girişindeki hata kutusu: gizli/görünür ayrımı `textContent`
   ile yapılıyor, boşken yer kaplamamalı. */
#kisiHata:empty { display: none; }

.giris-kart .form-group {
  margin-bottom: 18px;
}

.giris-kart label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.giris-kart input[type="email"],
.giris-kart input[type="password"],
.giris-kart input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: var(--transition-fast);
}

.giris-kart input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.giris-kart input:disabled {
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
}

.alan-ipucu {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin-top: 6px;
}

.alan-ipucu.uyari {
  color: var(--status-uyari-fg);
  background: var(--status-uyari-bg-soft);
  border-left: 3px solid var(--color-warning);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.alan-ipucu.iyi {
  color: var(--status-basarili-fg);
}

/* sifre alani + goz dugmesi */
.sifre-satiri {
  position: relative;
}

.sifre-satiri input {
  padding-right: 44px !important;
}

.sifre-goz {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.sifre-goz:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

/* -------- sunucu ayarlari -------- */
/* Bilinen saglayicida kullanici bu bolumu HIC gormez; yerine tek satirlik
   "hazir" bilgisi cikar. Alanlar yalnizca "Ozel sunucu" secilince acilir. */
.sunucu-hazir {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--status-basarili-bg-soft);
  border: 1px solid var(--status-basarili-kenar);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: var(--fs-sm);
  color: var(--status-basarili-fg);
}

.sunucu-hazir i {
  color: var(--color-success);
}

.sunucu-hazir .metin-baglanti {
  margin-left: auto;
  color: var(--status-basarili-fg);
  font-size: var(--fs-sm);
}

.sunucu-detay {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  background: var(--color-bg-secondary);
}

.sunucu-baslik {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.sunucu-alanlar {
  padding: 16px 14px 12px;
  background: var(--color-bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

.ikili {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
}

.onay-satiri {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400 !important;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  cursor: pointer;
}

.onay-satiri input {
  width: auto !important;
  accent-color: var(--color-primary);
}

.metin-baglanti {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* -------- durum -------- */
.giris-hata {
  background: var(--status-hata-bg);
  color: var(--status-hata-fg);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  margin-bottom: 16px;
  white-space: pre-line;
}

.giris-not {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin-top: 16px;
}

.giris-not i {
  margin-top: 2px;
}

.btn-full[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* -------- sag sutun -------- */
.giris-yan {
  padding-top: 24px;
}

.giris-yan h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin-bottom: 14px;
}

.giris-yan p {
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: 1.7;
  margin-bottom: 14px;
}

.giris-yan code {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 13px;
}

.yan-liste {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.yan-liste li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.yan-liste i {
  color: var(--color-primary);
  margin-top: 3px;
  width: 18px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .giris-sahne {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 18px;
  }

  .giris-kart {
    padding: 28px 22px;
  }

  .giris-yan {
    padding-top: 0;
  }
}

/* Saglayici secim listesi */
.giris-kart select {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition-fast);
}

.giris-kart select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.alan-ipucu .not {
  color: var(--color-text-tertiary);
}

/* ============================================
   TEK SAYFALIK KURULUM (baslangic.html)
   ============================================
   Giriş kartı TEK SÜTUN ve UZUN: burada dört bölüm var, ikisi açılır.
   `.giris-sahne` iki sütunlu bir ızgara (form + yan anlatım); kurulumun
   yan sütunu yok, o yüzden kendi sahnesi var. */
.kurulum-govde {
  /* Giriş ekranı dikeyde ortalıyor; kurulum sayfası uzun, yukarıdan
     başlamalı yoksa içerik ekranın dışına taşıyor. */
  display: block;
  overflow-y: auto;
}

.kurulum-sahne {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 32px));
  margin: 40px auto 64px;
}

.kurulum-basi {
  margin-bottom: 28px;
}

.kurulum-basi h1 {
  margin: 18px 0 10px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-primary);
}

.kurulum-firma {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.kurulum-firma-not {
  color: var(--color-text-tertiary);
}

/* ---------- Bölüm kartı ---------- */
.kurulum-bolum {
  margin-bottom: 18px;
  padding: 22px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.kurulum-bolum-basi {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kurulum-bolum-basi h2 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.kurulum-bolum-basi p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Tamamlanma rozeti: boş daire -> yeşil tik */
.kurulum-rozet {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.125rem;
  color: var(--color-border-hover);
}

.kurulum-rozet.tamam {
  /* Rozet bir IKON, metin degil — dolgu olarak --color-success uygun. */
  color: var(--status-basarili-fg);
}

.kurulum-bolum-govde {
  margin-top: 18px;
}

.kurulum-bolum-govde .form-group {
  margin-bottom: 16px;
}

/* ---------- Açılır bölüm (imza / WhatsApp) ----------
   `panel.css:.akordiyon-*` kalıbının sadeleştirilmiş hali. Panel CSS'i
   buraya yüklenmiyor, o yüzden kopyalanmak yerine kendi adlarıyla
   yeniden yazıldı — `.ikili` gibi ad çakışması riski de böylece yok. */
.kurulum-ac {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.kurulum-ok {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  transition: var(--transition-fast);
}

.kurulum-ac.acik .kurulum-ok {
  transform: rotate(90deg);
}

.kurulum-ac-ad {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-text);
}

.kurulum-ac-not {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

/* ---------- Adım adım rehber + link ---------- */
.kurulum-rehber {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.kurulum-rehber-not {
  margin-bottom: 10px;
  font-size: 0.875rem;
  color: var(--color-text);
}

.kurulum-rehber ol {
  margin: 0 0 0 18px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.kurulum-rehber li {
  margin-bottom: 4px;
}

.kurulum-rehber code {
  padding: 1px 5px;
  font-size: 0.8125rem;
  background: var(--color-primary-tint);
  border-radius: var(--radius-xs);
}

.kurulum-rehber-link {
  margin-top: 14px;
  text-decoration: none;
}

/* ---------- Tamamlandı satırı ---------- */
.kurulum-tamam {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.875rem;
  /* --color-success METIN olarak kullanilamaz (beyaz uzerinde 2.0:1);
     style.css bunun icin --status-basarili-fg tanimliyor (7.2:1). */
  color: var(--status-basarili-fg);
}

/* ---------- Alt kapı ---------- */
.kurulum-alt {
  margin-top: 26px;
  text-align: center;
}

.kurulum-eksik {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.kurulum-cikis {
  margin-top: 18px;
  font-size: 0.8125rem;
}

/* ---------- İmza düzeni (panel.css'teki ile aynı görünüm) ---------- */
.imza-duzen {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.imza-logo-kutu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 196px;
  min-height: 84px;
  padding: 8px;
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-bg-secondary);
}

.imza-logo-kutu img {
  max-width: 180px;
  max-height: 120px;
  display: block;
}

.imza-logo-bos {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

.imza-logo-dugmeler {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.imza-alanlar {
  flex: 1 1 260px;
  min-width: 0;
}

.imza-alanlar label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.imza-alanlar input,
.imza-alanlar textarea {
  width: 100%;
}

.imza-alanlar label + input,
.imza-alanlar label + textarea {
  margin-bottom: 12px;
}

.imza-alanlar textarea {
  resize: vertical;
  font-family: var(--font-main);
}

@media (max-width: 640px) {
  .kurulum-sahne { margin: 20px auto 40px; }
  .kurulum-bolum { padding: 18px 16px; }
}