/* Kapı sayfaları (giriş, şifre, yönetim). Renkler ve yazı tipi panel/_ds/vellum/v2/tokens.css ile aynı.
   Dış kaynak yok: Nunito ve simge kapının kendi rotalarından gelir. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/kapi-font/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/kapi-font/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* marka: #605BFF beyazda 4.7:1; düğme ve odak bu tonda */
  --brand-60: #605bff; --brand-70: #4c47eb; --brand-80: #605bff; --brand-90: #3e39d6; --brand-160: #efeeff;
  --grey-14: #030229; --grey-38: #63627c; --grey-82: #d9d9e3; --grey-96: #f5f5f8; --grey-98: #fafafb;
  --sari: #ffd66b; --mercan: #ff8f6b; --mavi: #5b93ff;
  --hata: #b4232a; --hata-zemin: #fdecec;
  --golge: 0 1px 2px rgba(3, 2, 41, .04), 0 8px 24px rgba(3, 2, 41, .06);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--grey-98); color: var(--grey-14);
  font: 16px/1.5 var(--font); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }

/* ---- Giriş ve şifre: marka paneli + kart ---- */
body.kapi { padding: 0; background: var(--grey-98); }
.sahne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; min-height: 100vh; }
.sahne.tek { display: flex; align-items: center; justify-content: center; padding: 16px; }
.vitrin {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  gap: 28px; padding: 48px clamp(32px, 6vw, 88px); color: #fff;
  background: linear-gradient(150deg, #605bff 0%, #4c47eb 55%, #3e39d6 100%);
}
.vitrin h2 { margin: 0; max-width: 14ch; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.vitrin-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 34ch; font-size: 17px; }
.vitrin-liste li { display: flex; align-items: center; gap: 12px; }
.nokta { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.nokta-sari { background: var(--sari); } .nokta-mercan { background: var(--mercan); } .nokta-mavi { background: var(--mavi); }
.daire { position: absolute; border-radius: 50%; pointer-events: none; }
.daire-1 { width: 420px; height: 420px; right: -140px; bottom: -160px; background: rgba(255, 255, 255, .08); }
.daire-2 { width: 180px; height: 180px; right: 12%; top: -60px; background: rgba(255, 214, 107, .22); }
.vitrin > :not(.daire) { position: relative; }
.sahne > main.kart { align-self: center; justify-self: center; }
.kart {
  position: relative; z-index: 1;   /* telefonda renkli bandın üstüne biner */
  width: 100%; max-width: 420px; margin: 16px; background: #fff; border-radius: 16px;
  padding: 32px 28px; box-shadow: var(--golge);
}
.marka { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.marka-isaret { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: var(--brand-60); }
.marka-isaret svg { width: 38px; height: 38px; stroke-linecap: round; }
.marka-ad { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.marka-acik { margin-bottom: 0; }
.marka-acik .marka-isaret { color: #fff; --lg-goz: var(--brand-60); }
.vitrin ~ .kart .marka { display: none; }
.dipnot { margin: 20px 0 0; font-size: 14px; color: var(--grey-38); text-align: center; }
.dipnot a { color: var(--brand-60); font-weight: 700; text-decoration: none; display: inline-block; padding: 12px 8px; margin: -12px 0; }
.dipnot a:hover { text-decoration: underline; }
.ince-not { margin-top: 8px; }
.bilgi-kutusu { margin: 0 0 8px; padding: 12px; color: #1e7a45; background: #e5f6ec; border: 1px solid #1e7a45; border-radius: 8px; }
@media (max-width: 860px) {
  .sahne { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .vitrin { gap: 16px; padding: 28px 20px 72px; }
  .vitrin h2 { max-width: none; font-size: 26px; }
  .vitrin-liste { display: none; }
  .daire-1 { width: 260px; height: 260px; right: -90px; bottom: -150px; }
  .sahne > main.kart { margin: -48px 16px 24px; width: auto; justify-self: stretch; max-width: none; }
  .kart { padding: 24px 20px; }
}
p.alt { margin: 0 0 20px; color: var(--grey-38); }
label { display: block; margin: 16px 0 6px; font-weight: 700; }
input {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--grey-38); border-radius: 8px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--brand-80); outline-offset: 2px;
}
button, .dugme {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  margin-top: 24px; padding: 10px 16px; font: inherit; font-weight: 700; color: #fff;
  background: var(--brand-60); border: 0; border-radius: 8px; cursor: pointer; text-decoration: none;
}
button:hover, .dugme:hover { background: var(--brand-70); }
button:disabled, button:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--brand-60); }
button.ikincil:disabled, button.ikincil:disabled:hover { background: #fff; }
.hata {
  margin: 0 0 8px; padding: 12px; color: var(--hata); background: var(--hata-zemin);
  border: 1px solid var(--hata); border-radius: 8px;
}
.ipucu { margin: 6px 0 0; font-size: 14px; color: var(--grey-38); }
form.ince { margin-top: 16px; }
form.ince button { background: #fff; color: var(--brand-60); border: 1px solid var(--brand-60); margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { button { transition: background .15s; } }

/* ---- Yönetim paneli (admin.html) ---- */
[hidden] { display: none !important; }
body.yonetim { display: block; padding: 0; align-items: initial; justify-content: initial; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bant { padding: 12px 16px; text-align: center; font-weight: 700; color: var(--hata); background: var(--hata-zemin); border-bottom: 1px solid var(--hata); }
.ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--grey-82); }
.ust h1 { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ust-marka { margin-bottom: 0; }
.ust-alt { font-size: 16px; font-weight: 700; color: var(--grey-38); }
main.genis { max-width: 1200px; margin: 0 auto; padding: 16px; background: transparent; border: 0; border-radius: 0; }
main.genis section { background: #fff; border: 1px solid var(--grey-82); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
main.genis h2 { margin: 0 0 12px; font-size: 20px; }
.baslik-satiri { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.baslik-satiri h2 { margin: 0; }
.dugme-grubu { display: flex; flex-wrap: wrap; gap: 8px; }
.dugme-grubu button, .ust button, .tablo button { width: auto; margin-top: 0; }
.ince-form { margin: 0; }
button.ikincil { color: var(--brand-60); background: #fff; border: 1px solid var(--brand-60); }
button.ikincil:hover { background: var(--brand-160); }
main.genis form > button[type=submit] { margin-top: 16px; width: auto; }
textarea, select { display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: inherit; background: #fff; border: 1px solid var(--grey-38); border-radius: 8px; }
textarea:focus-visible, select:focus-visible { outline: 3px solid var(--brand-80); outline-offset: 2px; }
fieldset { margin: 16px 0 0; padding: 12px; border: 1px solid var(--grey-82); border-radius: 8px; }
legend { padding: 0 6px; font-weight: 700; }
.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.paket-satiri { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.paket-satiri button { margin-top: 0; width: auto; }
.bilgi { padding: 12px; margin: 0 0 16px; background: var(--brand-160); border: 1px solid var(--brand-60); border-radius: 8px; }
.tablo { width: 100%; border-collapse: collapse; }
.tablo th, .tablo td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--grey-82); overflow-wrap: anywhere; }
.tablo tr.donuk { background: var(--grey-96); }
.rozet { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; font-size: 13px; border-radius: 999px; border: 1px solid var(--grey-38); background: #fff; color: var(--grey-14); overflow-wrap: anywhere; }
.rozet.iyi { border-color: #067647; color: #067647; background: #ecfdf3; }
.rozet.kotu { border-color: var(--hata); color: var(--hata); background: var(--hata-zemin); }
.rozet.uyari { border-color: #b54708; color: #93370d; background: #fffaeb; }
.islemler { display: flex; flex-wrap: wrap; gap: 8px; }
dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 20px; border: 1px solid var(--grey-82); border-radius: 12px; color: var(--grey-14); }
dialog::backdrop { background: rgba(3, 2, 41, .5); }
dialog h2 { margin-top: 0; }
dialog .dugme-grubu { margin-top: 20px; justify-content: flex-end; }
dialog .dugme-grubu button { width: auto; margin-top: 0; }
@media (max-width: 800px) {
  .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
  .tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tablo tr { margin-bottom: 12px; padding: 8px; border: 1px solid var(--grey-82); border-radius: 8px; }
  .tablo td { display: flex; gap: 8px; justify-content: space-between; padding: 6px 4px; border: 0; }
  .tablo td::before { content: attr(data-etiket); flex: 0 0 38%; font-weight: 700; color: var(--grey-38); }
  .tablo td > * { flex: 1 1 auto; min-width: 0; }
  .tablo td.rozetler, .tablo td.islemler, .tablo td.isim { display: block; }
  .tablo td.rozetler::before, .tablo td.islemler::before, .tablo td.isim::before { display: block; margin-bottom: 4px; }
  .tablo td.islemler button { width: 100%; }
  .paket-satiri { grid-template-columns: 1fr; }
  .paket-satiri button { width: 100%; }
}