/* pages.css: ekranlara özgü stiller — logo, giriş, projeler, yeni proje, proje ayrıntısı, ayarlar, yardım.
   Renk ve ölçü yalnız tokens.css değişkenlerinden gelir; iki temada çalışır. */

/* ============================================================ logo */
.logo-mark .logo-dot { fill: var(--accent); }
.logo-mark .logo-arc { fill: none; stroke: var(--fg-secondary); stroke-width: 2.2; stroke-linecap: round; }
.logo-mark .logo-arc-out { stroke: var(--fg-icon); }

/* ============================================================ giriş / kurulum */
.auth-wrap { width: 100%; display: grid; place-items: center; }
.auth-card {
  width: min(26rem, 100%);
  display: grid; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  background: var(--bg-surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
}
.auth-brand { display: flex; align-items: center; gap: 0.625rem; color: var(--fg-heading); }
.auth-mark { width: 2.25rem; height: 2.25rem; }
.auth-word { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.auth-title { font-size: var(--fs-2xl); }
.auth-title:focus { outline: none; }
.auth-sub { color: var(--fg-secondary); font-size: var(--fs-md); margin-top: calc(var(--sp-2) * -1); }
.auth-form { display: grid; gap: var(--sp-4); }
.auth-msg:empty { display: none; }
.auth-caps { display: flex; align-items: center; gap: 0.375rem; margin-top: calc(var(--sp-2) * -1); font-size: var(--fs-sm); color: var(--warning-text); }
.auth-caps[hidden] { display: none; }
.auth .btn.is-locked:disabled { background: var(--bg-strong); border-color: var(--bg-strong); color: var(--fg-heading); }
.auth-details { border-top: 1px solid var(--line-hairline); padding-top: var(--sp-3); font-size: var(--fs-base); }
.auth-details summary { display: flex; align-items: center; gap: 0.5rem; list-style: none; cursor: pointer; user-select: none; border-radius: var(--r-sm); color: var(--fg-secondary); font-weight: 500; }
.auth-details summary::-webkit-details-marker { display: none; }
.auth-details summary:hover { color: var(--fg-heading); }
.auth-details summary::after {
  content: ""; margin-left: auto; width: 0.4375rem; height: 0.4375rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t) var(--ease);
}
.auth-details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.auth-details-body { display: grid; gap: 0.625rem; padding-top: var(--sp-3); color: var(--fg-secondary); line-height: 1.55; }
.auth-details-body ul { display: grid; gap: 0.5rem; padding-left: 1.125rem; list-style: disc; }
.auth-help { text-align: center; }
.sifre-kurali { padding: var(--sp-3) var(--sp-4); background: var(--bg-surface-2); border: 1px solid var(--line-card); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-secondary); }
.sifre-kurali strong { color: var(--fg-heading); }
@media (max-width: 600px) {
  .auth { padding: max(var(--sp-4), var(--safe-t)) max(var(--sp-3), var(--safe-r)) max(var(--sp-4), var(--safe-b)) max(var(--sp-3), var(--safe-l)); }
  .auth-card { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); }
}

/* ============================================================ projeler */
.proje-band .band-in { padding-block: var(--sp-6); }
.proje-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.proje-liste > .alert, .proje-liste > .rehber { grid-column: 1 / -1; }
@media (max-width: 860px) { .proje-liste { grid-template-columns: minmax(0, 1fr); } }

.proje {
  display: grid; gap: var(--sp-3); align-content: start;
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.proje-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.proje-ad { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
.proje-ad a { color: var(--fg-strong); }
.proje-ad a:hover { color: var(--accent-text); }
.proje-adres { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.proje-adres > .icon { color: var(--fg-icon); }
.proje-adres-link { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.proje-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--fg-secondary); }
.meta-oge { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; overflow-wrap: anywhere; }
.meta-oge .icon { --icon-size: 0.9375rem; color: var(--fg-icon); }
.proje-surum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem var(--sp-2); font-size: var(--fs-sm); color: var(--fg-secondary); min-width: 0; }
.surum-mesaj { min-width: 0; overflow-wrap: anywhere; flex: 1 1 10rem; }
.surum-kontrol { margin-left: auto; }
code.sha { padding: 0.05em 0.4em; border-radius: var(--r-xs); background: var(--bg-control); color: var(--fg-heading); font-size: 0.9em; }
.proje-hata:empty { display: none; }
.proje-eylem { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line-hairline); }
.proje-eylem .btn:last-child { margin-left: auto; }
.proje-iskelet { pointer-events: none; }
.rehber { display: grid; gap: var(--sp-4); max-width: 40rem; margin-inline: auto; width: 100%; }
.rehber-kart { display: grid; gap: var(--sp-4); }
@media (max-width: 480px) {
  .proje { padding: var(--sp-4); }
  .proje-eylem .btn { flex: 1 1 auto; }
  .proje-eylem .btn:last-child { margin-left: 0; }
  .surum-kontrol { margin-left: 0; }
}

/* ============================================================ Cloudflare'deki projeler (dış bağlantılar) */
.baglanti-band .band-in { padding-block: var(--sp-6); }
.baglanti-bolum { display: grid; gap: var(--sp-4); min-width: 0; }
.baglanti-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.baglanti-ust-metin { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 18rem; }
.baglanti-ust h2 { font-size: var(--fs-xl); }
.baglanti-ust p { max-width: 44rem; line-height: 1.55; }
.baglanti-ust .btn[hidden] { display: none; }
.baglanti-ust-eylem { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.baglanti-ust-eylem[hidden] { display: none; }
.baglanti-hazir-not { font-size: var(--fs-sm); line-height: 1.55; }
.baglanti-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-3); }
.baglanti-liste > .alert, .baglanti-liste > .baglanti-bos { grid-column: 1 / -1; }
.baglanti {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.baglanti-ad { font-size: var(--fs-lg); font-weight: 650; color: var(--fg-strong); overflow-wrap: anywhere; }
.baglanti-ad:focus { outline: none; }
.baglanti-adres { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); color: var(--fg-secondary); }
.baglanti-adres > .icon { color: var(--fg-icon); flex: none; }
.baglanti-adres > span { min-width: 0; overflow-wrap: anywhere; }
.baglanti-aciklama { font-size: var(--fs-sm); color: var(--fg-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.baglanti-eylem { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-3); margin-top: var(--sp-1); border-top: 1px solid var(--line-hairline); }
.baglanti-eylem .btn:last-child { margin-left: auto; }
.baglanti-bos { display: grid; gap: var(--sp-4); max-width: 40rem; }
.baglanti-form-baslik { font-size: var(--fs-md); }
.baglanti-form { display: grid; gap: var(--sp-3); }
@media (max-width: 480px) {
  /* telefonda dört düğme 2 x 2 ızgara: dokunma alanları eşit, satır taşmaz */
  .baglanti-eylem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baglanti-eylem .btn:last-child { margin-left: 0; }
}

/* ============================================================ yeni proje */
.yeni, .ayar-liste { max-width: 46rem; }
.yeni-band .band-in, .ayar-band .band-in, .ayrinti-band .band-in, .yardim-band .band-in { padding-block: var(--sp-6); }
.yeni-form { display: grid; gap: var(--sp-4); }
.adim { display: grid; gap: var(--sp-4); }
.adim-baslik { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); }
.adim-no {
  display: grid; place-items: center; width: 1.625rem; height: 1.625rem; flex: none;
  border-radius: var(--r-sm); border: 1px solid var(--accent-line); background: var(--accent-tint-12); color: var(--accent-text);
  font-size: var(--fs-sm); font-weight: 700;
}
.depo-liste {
  display: grid; max-height: 17rem; overflow-y: auto;
  border: 1px solid var(--line-control); border-radius: var(--r-md); background: var(--bg-surface);
}
.depo-liste:empty { display: none; }
.depo-oge {
  display: grid; gap: 0.25rem; padding: 0.625rem 0.875rem; cursor: pointer;
  border-bottom: 1px solid var(--line-faint); min-width: 0;
}
.depo-oge:last-child { border-bottom: 0; }
.depo-oge:hover { background: var(--bg-control-hover); }
.depo-oge.is-active { background: var(--accent-tint-12); box-shadow: inset 3px 0 0 var(--accent); }
.depo-ad { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--fg-heading); min-width: 0; }
.depo-ad .icon { color: var(--fg-icon); }
.depo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--sp-3); font-size: var(--fs-sm); padding-left: 1.625rem; }
.depo-yukleniyor { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; color: var(--fg-secondary); font-size: var(--fs-base); }
.secili { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--accent-tint-8); border: 1px solid var(--accent-line); border-radius: var(--r-md); min-width: 0; }
.secili > .icon { color: var(--accent-text); }
.secili-ozet[hidden] { display: none; }
.klasor-oneri { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.125rem; padding: 0.25rem 0.75rem;
  background: var(--bg-surface-2); border: 1px solid var(--line-control); border-radius: var(--r-pill);
  color: var(--fg-secondary); font-size: var(--fs-sm); font-weight: 500;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover { color: var(--fg-heading); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--accent-tint-16); color: var(--fg-strong); border-color: var(--accent-line); }
.chip-not { color: var(--accent-text); font-weight: 600; }
.klasor-bilgi:empty { display: none; }
.herkese-acik { display: grid; gap: var(--sp-3); }
.herkese-acik:empty { display: none; }
.herkese-acik-not { overflow-wrap: anywhere; }
.adres-onizleme { font-size: var(--fs-base); color: var(--fg-secondary); overflow-wrap: anywhere; }
.adres-onizleme strong { color: var(--fg-strong); }
.golge-uyari { line-height: 1.5; overflow-wrap: anywhere; }
.golge-uyari strong { color: var(--warning-text); }
.depo-bos { display: grid; }
.yeni-eylem { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.basari { display: grid; gap: var(--sp-4); }
.basari-baslik { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-2xl); color: var(--fg-strong); }
.basari-baslik:focus { outline: none; }
.basari-baslik > .icon { color: var(--success-text); margin-top: 0.25rem; }

/* ============================================================ proje ayrıntısı */
.ayrinti-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .ayrinti-grid { grid-template-columns: minmax(0, 1fr); } }
.ayrinti-band .card, .ayar-band .card { display: grid; gap: var(--sp-4); align-content: start; }
.ayrinti-band .card > h2, .ayar-band .card > h2 { font-size: var(--fs-lg); }
.ayrinti-band .card-head, .ayar-band .card-head { margin-bottom: 0; flex-wrap: wrap; }
.spacer { flex: 1; }
.surum-satir { overflow-wrap: anywhere; }
.tehlike { border-color: color-mix(in srgb, var(--danger) 35%, var(--line-card)); }
.kanca-git { justify-self: start; max-width: 100%; height: auto; min-height: var(--ctl-h-sm); padding-block: 0.4rem; white-space: normal; text-align: left; line-height: 1.3; }

/* ============================================================ ayarlar */
.kontrol { display: grid; gap: 0; }
.kontrol-oge { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-faint); }
.kontrol-oge:last-child { border-bottom: 0; }
.kontrol-ikon { display: grid; place-items: center; flex: none; }
.kontrol-ikon.is-ok { color: var(--success-text); }
.kontrol-ikon.is-eksik { color: var(--warning-text); }
.kontrol-baslik { font-size: var(--fs-md); font-weight: 600; color: var(--fg-heading); }
.kontrol-aciklama { font-size: var(--fs-sm); color: var(--fg-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.token-durum { font-size: var(--fs-base); color: var(--fg-secondary); }
.token-durum:focus { outline: none; }
.token-durum code { font-size: 0.95em; }
.gizli-kutu { padding: var(--sp-1) 0; }