/*
  WAP — ÜRÜN GÖRSEL SİSTEMİ.

  Tek bir görsel dil: renkler, tipografi, yüzeyler, düğmeler, durumlar ve uygulama
  kabuğu burada tanımlanır. Sayfalar kendi paletini İCAT ETMEZ; jetonları kullanır.

  YÖN: WhatsApp'ın iletişim dünyasından beslenen, ama WAP'ın KENDİ kimliği olan
  sakin/premium bir SaaS arayüzü. Yeşil bir MARKA VURGUSUDUR, arka plan boyası değil:
  birincil eylem, etkin menü ve "bağlı/hazır" durumları yeşildir; geri kalan her şey
  nötr kalır. Her yeri yeşile boyamak, ürünü WhatsApp klonu gibi gösterir ve okunmayı
  zorlaştırırdı.
*/

:root {
  /* ---- MARKA ----
     WhatsApp'ın canlı yeşili doğrudan arayüz rengi olarak KULLANILMAZ: beyaz üstünde
     metin kontrastı düşüktür. WAP'ın tonu bir adım koyudur — aynı aileden, ama
     düğmede ve etkin menüde okunabilir. */
  --brand: #1fa855;
  --brand-strong: #178c46;
  --brand-ink: #0b6b34;
  --brand-soft: #e9f7ef;
  --brand-border: #bfe6cd;

  /* ---- NÖTRLER ----
     Nötrler bilinçli olarak markaya hafif yeşil eğimlidir; saf gri, seçilmemiş
     görünür. */
  --bg: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #fbfcfb;
  --text: #0f1a14;
  --text-2: #33443b;
  --muted: #6b7a72;
  --border: #e3e9e5;
  --border-strong: #cfd9d3;

  /* ---- DURUM ----
     Ölçülü tonlar: uyarı ve hata dikkat çeker ama arayüzü ele geçirmez. */
  --ok: #1fa855;
  --ok-soft: #e9f7ef;
  --ok-border: #bfe6cd;
  --warn: #b45309;
  --warn-soft: #fef6e7;
  --warn-border: #f5dcae;
  --err: #b42318;
  --err-soft: #fdeceb;
  --err-border: #f5c4c0;
  --info: #175cd3;
  --info-soft: #eef4ff;
  --info-border: #c7d9fb;

  /* ---- BIÇIM ---- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 20, .05);
  --shadow: 0 1px 3px rgba(15, 26, 20, .07), 0 1px 2px rgba(15, 26, 20, .04);
  --shadow-lg: 0 8px 24px rgba(15, 26, 20, .08);

  /* Eski sayfa stilleri bu adlari kullanir; marka jetonlarina baglanir ki
     sayfa sayfa renk duzeltmek gerekmesin. */
  --accent: var(--brand);
  --accent-2: var(--brand-strong);
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); }

h1, h2, h3 { letter-spacing: -.011em; }

/* ================= UYGULAMA KABUGU ================= */

.wapbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.wapbar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.wapbar__brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

/* Marka isareti: WAP'in kendi simgesi. WhatsApp logosu TAKLIT EDILMEZ. */
.wapbar__mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: 0 1px 2px rgba(23, 140, 70, .35);
}

.wapnav { display: flex; align-items: center; gap: 1px; flex: 1; flex-wrap: wrap; }

.wapnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.wapnav a:hover { background: var(--surface-2); color: var(--text); }

/* Etkin sayfa: marka rengi + KALINLIK. Renk tek basina yeterli degildir. */
.wapnav a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 700;
}

/* ---- MENU GRUPLARI ----
   Bir grup, ayni ise ait sayfalari TEK bir ust seviye ogede toplar. Acilir panel
   yalnizca genis ekranda kullanilir; dar ekranda grup bir baslik olur (bkz. app.js),
   cunku dokunmatik bir menude ikinci katman acmak kullaniciyi zorlar. */
.wapnav__menu { position: relative; display: inline-flex; }

.wapnav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  font: inherit;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.wapnav__trigger:hover { background: var(--surface-2); color: var(--text); }
.wapnav__trigger[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 700;
}
.wapnav__caret { font-size: .62rem; opacity: .75; }

.wapnav__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 268px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(15, 26, 20, .12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wapnav__panel[hidden] { display: none; }

/* Panel icindeki baglantilar cok satirlidir: ad + ne ise yaradigi. */
.wapnav__panel a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  white-space: normal;
}
.wapnav__name { font-size: .875rem; font-weight: 600; color: var(--text); }
.wapnav__desc { font-size: .78rem; color: var(--muted); font-weight: 400; }
.wapnav__panel a[aria-current="page"] .wapnav__name { color: var(--brand-ink); }

/* Dar ekran: grup basligi + girintili baglantilar. */
.wapnav__group {
  display: block;
  width: 100%;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 12px 11px 4px;
}
.wapnav a.wapnav__sub { padding-left: 22px; }

.wapbar__side { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.wapbar__who {
  font-size: .8rem;
  color: var(--muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.wapbar__toggle {
  display: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
}

@media (max-width: 960px) {
  .wapbar__inner { flex-wrap: wrap; gap: 10px; padding: 9px 14px; }
  .wapbar__toggle { display: block; order: 3; }
  .wapbar__side { order: 2; }
  .wapnav {
    order: 4;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .wapnav[hidden] { display: none; }
  .wapnav a { padding: 11px 12px; font-size: .95rem; }
  .wapbar__who { display: none; }
}

.wapmain { max-width: 1240px; margin: 0 auto; padding: 24px 20px 56px; }

/* Eski sayfalar icerigi .wrap ile sarar. Ayni olcu sistemini kullansinlar diye
   burada tanimlanir — her sayfada kopyalanan body dolgusunun yerine geciyor. */
.wrap { max-width: 1160px; margin: 0 auto; padding: 24px 20px 56px; }

@media (max-width: 600px) { .wapmain { padding: 18px 14px 40px; } }

.wappage { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.wappage h1 { font-size: 1.5rem; margin: 0; font-weight: 700; }
.wappage p { margin: 5px 0 0; color: var(--muted); font-size: .9rem; max-width: 70ch; }
.wappage__actions { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* ================= YUZEYLER ================= */

.wapcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.wapcard h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 650; }
.wapcard .sub { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }

.wapgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Metrik karti: sayi BUYUK ve hizalanir; etiket sakin kalir. */
.wapstat { display: flex; flex-direction: column; gap: 10px; }
.wapstat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wapstat__label { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .01em; }
.wapstat__value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.wapstat__hint { color: var(--muted); font-size: .84rem; margin: 0; }

/* ================= DUGMELER ================= */

.wapbtn {
  font: inherit;
  font-size: .89rem;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.wapbtn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
.wapbtn:active:not(:disabled) { transform: translateY(1px); }
.wapbtn:disabled { opacity: .5; cursor: not-allowed; }

/* BIRINCIL eylem: sayfada genellikle BIR tane. Her dugmeyi yesil yapmak,
   hangisinin asil eylem oldugunu anlamsizlastirir. */
.wapbtn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(23, 140, 70, .25);
}
.wapbtn--primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }

.wapbtn--danger { background: var(--surface); border-color: var(--err-border); color: var(--err); }
.wapbtn--danger:hover:not(:disabled) { background: var(--err-soft); }

.wapbtn--quiet { border-color: transparent; background: none; color: var(--muted); padding: 7px 10px; }
.wapbtn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: transparent; }

.wapbtn--sm { padding: 6px 11px; font-size: .82rem; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ================= DURUM DILI ================= */
/*
  Durum ASLA yalnizca renkle anlatilmaz: her rozet bir NOKTA (bicim), bir RENK ve bir
  METIN tasir. Renk korlugunde ya da dusuk kontrastli ekranda metin tek basina yeter.
*/
.wappill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 650;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.wappill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.wappill--ok { background: var(--ok-soft); border-color: var(--ok-border); color: var(--brand-ink); }
.wappill--warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.wappill--err { background: var(--err-soft); border-color: var(--err-border); color: var(--err); }
.wappill--info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }

/* ================= FORMLAR ================= */

.wapfield { display: block; margin-bottom: 14px; }
.wapfield > span { display: block; font-size: .82rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.wapfield .help { display: block; font-size: .8rem; color: var(--muted); margin-top: 5px; font-weight: 400; }

.wapinput {
  font: inherit;
  font-size: .9rem;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}

.wapinput::placeholder { color: #9aa8a1; }
.wapinput:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.wapinput:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.wapinput[aria-invalid="true"] { border-color: var(--err); }

/* ================= BOS / YUKLENIYOR / BILGI ================= */

.wapempty { text-align: center; padding: 34px 20px; color: var(--muted); }
.wapempty__icon {
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  border-radius: 13px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}
.wapempty h3 { margin: 0 0 6px; font-size: 1rem; color: var(--text); font-weight: 650; }
.wapempty p { margin: 0 auto 16px; font-size: .88rem; max-width: 48ch; }

.wapspin {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: wapspin .7s linear infinite;
  vertical-align: -2px;
}

@keyframes wapspin { to { transform: rotate(360deg); } }

.wapnote { border-radius: var(--r-sm); padding: 11px 13px; font-size: .86rem; border: 1px solid; }
.wapnote--info { background: var(--info-soft); border-color: var(--info-border); color: #1a3f8f; }
.wapnote--warn { background: var(--warn-soft); border-color: var(--warn-border); color: #8a4308; }
.wapnote--err { background: var(--err-soft); border-color: var(--err-border); color: #8e1d15; }
.wapnote--ok { background: var(--ok-soft); border-color: var(--ok-border); color: var(--brand-ink); }

/* ================= LISTELER / TABLOLAR ================= */

.waptablewrap { overflow-x: auto; }

.waptable { width: 100%; border-collapse: collapse; font-size: .89rem; }
.waptable th {
  text-align: left;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.waptable td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.waptable tr:last-child td { border-bottom: none; }
.waptable tbody tr:hover { background: var(--surface-2); }
.waptable .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Kisi/musteri satirlarinda kimlik: bas harf rozeti + ad. */
.wapavatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--brand-border);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .8rem;
  flex: none;
}

.wapidentity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.wapidentity__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wapidentity__meta { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .wapspin { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================= GIRIS / KAYIT KABUGU =================

   Alti giris yuzeyi (giris, kayit, parola sifirlama, dogrulama, davet) ayni
   kabugu kullanir. Onceden her biri kendi kartini, etiketini, girdisini ve
   dugmesini yeniden yaziyordu; ayni urunun kapisi alti farkli yerde alti farkli
   sekilde cizilmisti.

   ZEMIN: cok hafif yesil bir aydinlatma. Marka RENGI degil, marka IZI —
   doygun yesil bir arka plan formu okunmaz kilardi ve urunu bir reklam sayfasina
   cevirirdi. Odak her zaman formdadir. */

.wapauth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(70ch 44ch at 50% -8%, var(--brand-soft), transparent 62%),
    var(--bg);
}

/* Marka kartin USTUNDE durur: musteri once nerede oldugunu bilir. */
.wapauth__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}
.wapauth__mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(23, 140, 70, .28);
}

.wapauth__card {
  width: 100%;
  max-width: 404px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
/* Kayit/davet gibi biraz daha aciklama tasiyan yuzeyler. */
.wapauth__card--wide { max-width: 460px; }

.wapauth__card h1 {
  font-size: 1.32rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.wapauth__card .sub {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 20px;
  line-height: 1.5;
}

/* Birincil eylem giris yuzeylerinde TAM GENISLIKTIR: tek bir sonraki adim var. */
.wapauth__card .wapbtn--block { width: 100%; justify-content: center; margin-top: 4px; }

.wapauth__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wapauth__foot a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.wapauth__foot a:hover { text-decoration: underline; }

/* Kart altindaki kucuk urun imzasi. */
.wapauth__sign { margin-top: 20px; font-size: .8rem; color: var(--muted); text-align: center; }

/* Durum kutusu: giris yuzeylerinde mesaj YOKKEN yer kaplamaz. */
.wapauth__msg:empty { display: none; }
.wapauth__msg { margin-top: 14px; }

/* Parolayi goster/gizle — girdinin ICINDE, okuma akisini bozmadan. */
.wappw { position: relative; }
.wappw .wapinput { padding-right: 84px; }
.wappw__toggle {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  border: none;
  background: none;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 9px;
  border-radius: var(--r-sm);
}
.wappw__toggle:hover { background: var(--surface-2); color: var(--text); }
.wappw__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

@media (max-width: 420px) {
  /* Dar ekranda kart kenarlara yapismaz ve ic dolgu rahat kalir. */
  .wapauth { padding: 24px 16px; }
  .wapauth__card { padding: 22px 18px; }
}

/* ---- GIRIS YUZEYLERININ MEVCUT ISARETLEMESI ----

   Kayit, parola sifirlama, dogrulama ve davet ekranlari birden fazla DURUM karti
   tasiyor (form / basari / hata) ve bu durumlar sayfa mantigina baglidir.
   Isaretlemeyi yeniden yazmak bu mantigi kirma riski tasirdi; bunun yerine o
   sayfalarin kendi sinif adlari ORTAK JETONLARLA burada bicimlendirilir.
   Boylece alti yuzey de tek bir gorsel sistemden beslenir. */

.wapauth .card {
  width: 100%;
  max-width: 404px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  text-align: left;
}
.wapauth .card h1 { font-size: 1.32rem; font-weight: 700; margin: 0 0 6px; }
.wapauth .card p.sub { color: var(--muted); font-size: .9rem; margin: 0 0 20px; line-height: 1.5; }

.wapauth .field { margin-bottom: 14px; }
.wapauth label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.wapauth .hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }

.wapauth input[type="text"],
.wapauth input[type="email"],
.wapauth input[type="password"] {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}
.wapauth input::placeholder { color: #9aa8a1; }
.wapauth input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

/* Giris yuzeylerinde tek bir sonraki adim vardir: birincil eylem tam genislik. */
.wapauth .card > button,
.wapauth .card form > button {
  font: inherit;
  width: 100%;
  margin-top: 6px;
  padding: 11px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.wapauth .card > button:hover:not(:disabled),
.wapauth .card form > button:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
.wapauth .card > button:disabled,
.wapauth .card form > button:disabled { opacity: .55; cursor: not-allowed; }

/* Hata: RENK TEK BASINA anlam tasimaz — kutu, kenarlik ve metin birlikte. */
.wapauth .err:empty { display: none; }
.wapauth .err {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--err-border);
  background: var(--err-soft);
  color: #8e1d15;
  font-size: .86rem;
}

.wapauth .foot {
  margin-top: 16px;
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
}
.wapauth .foot + .foot { margin-top: 7px; }
.wapauth .foot a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.wapauth .foot a:hover { text-decoration: underline; }

/* Durum isareti (dogrulama/davet sonucu): tik, unlem ya da bekleme. */
.wapauth .mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.3rem; font-weight: 700;
  background: var(--ok-soft); color: var(--brand-ink);
  border: 1px solid var(--ok-border);
}
.wapauth .mark.bad { background: var(--err-soft); color: var(--err); border-color: var(--err-border); }
.wapauth .mark.wait { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

/* Durum kartlari ortalanir: tek bir sonuc cumlesi ve tek bir yol. */
.wapauth .card.done { text-align: center; }
.wapauth .card.done .sub { margin-left: auto; margin-right: auto; }

/* Giris yuzeylerinde eylem hiyerarsisi: TEK bir yesil birincil yol, digerleri notr.
   Iki yesil dugme yan yana durdugunda musteri hangisinin asil adim oldugunu
   anlamaz. */
.wapauth .card .authprimary,
.wapauth .card .authsecondary {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.wapauth .card .authprimary { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.wapauth .card .authprimary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

.wapauth .card .authsecondary { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.wapauth .card .authsecondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.wapauth .card .authsecondary:disabled { opacity: .55; cursor: not-allowed; }