/* portal-login.css — Musteri portali GIRIS + DAVET ekrani.
   Scope: .pl-shell altinda her sey. Degiskenler --pl-* prefix.
   :root YASAK, Bootstrap bagimliligi YOK, ic tema (AlfaAuth) sizintisi sifir.

   NIHAI REDESIGN (SPEC §1B + §10): koyu-cam premium konsept korunur,
   dashboard (portal.css .pt-*) gradyan-hero imzasiyla hizalanir. Ayni tasarim
   dili: teal marka #009999, --pl-grad-brand = dashboard --pt-grad-hero eslesigi,
   cam-highlight, buyuk dokunma hedefleri, mobil-oncelikli.

   KONTRAT: login.html + davet.html markup class'lari SABIT:
   .pl-shell .pl-card .pl-head .pl-avatar .pl-brand-logo .pl-brand-fallback
   .pl-sub .pl-fg .pl-pw-toggle .pl-hint .pl-btn .pl-alert .pl-ok
   .pl-success .pl-success-ic .pl-foot  — sadece GORSEL stil yenilenir.
   ID/JS/dongu-kirici mantik (login.html <script>) DOKUNULMAZ. */

/* ============================================================
   0) SHELL — koyu petrol gradyan zemin + derinlik
   ============================================================ */
.pl-shell {
  /* z-index ladder (head-styles.ejs disinda oldugumuz icin lokal tanim) — DEGISMEZ */
  --z-modal-backdrop: 1200;
  --z-modal: 1210;
  --z-toast: 1400;

  /* === RENK PALETI — Siemens teal (#009999) marka kimligi === */
  --pl-bg:  #03151a;          /* en alt katman koyulastirildi → gradyan derinligi */
  --pl-bg2: #062a30;
  --pl-bg3: #08434b;
  --pl-accent:   #009999;     /* ana marka */
  --pl-accent-l: #22c7c7;     /* highlight canlandi */
  --pl-accent-d: #00596e;     /* buton gradyan alt — dashboard hero ile es */
  --pl-cyan:     #22c7c7;
  --pl-green:    #10b981;
  --pl-green-l:  #34d399;
  --pl-red:      #ef4444;
  --pl-amber:    #f59e0b;

  /* cam efekti border katmanlari */
  --pl-g1: rgba(255, 255, 255, .06);
  --pl-g2: rgba(255, 255, 255, .10);

  /* metin katmanlari — koyu uzeri AA */
  --pl-t1: #ffffff;
  --pl-t2: rgba(255, 255, 255, .84);
  --pl-t3: rgba(255, 255, 255, .62);   /* .55 → .62 AA */

  /* radius */
  --pl-r:  16px;
  --pl-rr: 24px;

  /* === YENI TOKEN'LAR === */
  --pl-glow: rgba(0, 153, 153, .34);                            /* buton golgesi */
  --pl-grad-brand: linear-gradient(135deg, #009999, #00596e);   /* dashboard --pt-grad-hero ile es */
  --pl-focus: rgba(0, 153, 153, .22);                           /* input focus halkasi */
  --pl-r-in: 12px;                                              /* input radius */

  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  letter-spacing: -.005em;
  color: var(--pl-t1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(800px circle at 20% 10%, rgba(0, 153, 153, .20), transparent 50%),
    radial-gradient(600px circle at 80% 80%, rgba(34, 199, 199, .12), transparent 50%),
    radial-gradient(900px circle at 60% 40%, rgba(0, 89, 110, .12), transparent 50%),
    radial-gradient(520px circle at 82% 88%, rgba(0, 153, 153, .08), transparent 55%),
    linear-gradient(180deg, var(--pl-bg) 0%, var(--pl-bg2) 50%, var(--pl-bg3) 100%);
}

.pl-shell *,
.pl-shell *::before,
.pl-shell *::after {
  box-sizing: border-box;
}

/* [hidden] mekanizmasi — SILINMEZ (dvForm / dvSuccess / plAlert / dvAlert gizleme) */
.pl-shell [hidden] {
  display: none;
}

/* ============================================================
   1) KART — cam yuzey + ust marka serit + cam highlight
   ============================================================ */
.pl-card {
  width: 100%;
  max-width: 400px;
  background:
    radial-gradient(140% 90% at 50% -10%, rgba(0, 153, 153, .10), transparent 60%),
    rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--pl-rr);
  padding: 40px 32px 30px;
  position: relative;
  overflow: hidden;
  /* dis golge + ic ust cam highlight (dashboard kart imzasi ile es dil) */
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, .5),
    0 4px 16px -6px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ust 2px marka gradyan serit — dashboard hero ile es renk */
.pl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pl-grad-brand);
}

/* ============================================================
   2) BASLIK / MARKA
   ============================================================ */
.pl-head {
  text-align: center;
  margin-bottom: 26px;
}

/* .pl-avatar — markup'ta kullanilmiyor ama tanimli (kontrat) */
.pl-avatar {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(0, 153, 153, .20), rgba(34, 199, 199, .18));
  border: 1.5px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--pl-accent-l);
  overflow: hidden;
}

/* AMBLEM (img) — onerror ile .pl-brand-fallback'e doner */
.pl-brand-logo {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  margin: 0 auto 16px;
  display: block;
  object-fit: contain;
  padding: 11px;
  background: linear-gradient(135deg, rgba(0, 153, 153, .20), rgba(34, 199, 199, .16));
  border: 1.5px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 8px 22px -8px rgba(0, 153, 153, .5);
}

/* metin fallback rozeti (img yuklenmezse) */
.pl-brand-fallback {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  background: var(--pl-grad-brand);
  border: 1.5px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 8px 22px -8px rgba(0, 153, 153, .5);
}

.pl-head h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 5px;
  color: var(--pl-t1);
}

.pl-head p {
  font-size: 13px;
  color: var(--pl-t3);
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}

/* davet: kimlik satiri (ad · eposta) */
.pl-sub {
  font-size: 12.5px;
  color: var(--pl-t2);
  margin: 6px 0 0;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

/* ============================================================
   3) FORM ALANLARI
   ============================================================ */
.pl-fg {
  margin-bottom: 15px;
  position: relative;
}

.pl-fg label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pl-t3);
  margin-bottom: 6px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pl-fg input {
  width: 100%;
  min-height: 48px;                /* buyuk dokunma hedefi */
  padding: 13px 14px;
  border-radius: var(--pl-r-in);
  border: 1.5px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 16px;                 /* iOS zoom tum genisliklerde kapali (FIX7) */
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
}

.pl-fg input:hover:not(:disabled):not(:focus) {
  border-color: rgba(255, 255, 255, .2);
}

.pl-fg input:focus {
  border-color: var(--pl-accent);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px var(--pl-focus);
}

.pl-fg input::placeholder {
  color: rgba(255, 255, 255, .30);
}

.pl-fg input:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* sifre goster/gizle — metin ("Goster/Gizle", JS textContent degistirir → KORUNUR).
   Gorsel kucuk, tiklama alani genis (44px yukseklik dokunma hedefi). */
.pl-pw-toggle {
  position: absolute;
  right: 6px;
  bottom: 3px;
  min-width: 56px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--pl-t3);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  padding: 4px 8px;
  transition: color .18s, background .18s;
}

.pl-pw-toggle:hover {
  color: var(--pl-accent-l);
  background: rgba(255, 255, 255, .06);
}

.pl-pw-toggle:active {
  color: var(--pl-accent);
}

.pl-hint {
  font-size: 11.5px;
  color: var(--pl-t2);
  margin: -6px 0 15px;
  line-height: 1.45;
}

/* ============================================================
   4) BIRINCIL BUTON — marka gradyani + parlak golge
   ============================================================ */
.pl-btn {
  width: 100%;
  min-height: 50px;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  letter-spacing: .01em;
  background: var(--pl-grad-brand);
  box-shadow:
    0 6px 24px var(--pl-glow),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .22s cubic-bezier(.34, 1.2, .5, 1), box-shadow .22s, filter .2s;
}

.pl-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 34px var(--pl-glow),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}

.pl-btn:active:not(:disabled) {
  transform: translateY(0) scale(.99);
  box-shadow:
    0 4px 16px var(--pl-glow),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.pl-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── ŞİFREMİ UNUTTUM (bilgilendirme — e-posta yok, mağazaya yönlendir) ── */
.pl-forgot {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pl-accent-l);
  cursor: pointer;
  text-align: center;
  transition: color .2s;
}
.pl-forgot:hover { color: #fff; text-decoration: underline; }
.pl-forgot-msg {
  margin-top: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  background: rgba(34, 199, 199, .12);
  border: 1px solid rgba(34, 199, 199, .28);
  color: rgba(255, 255, 255, .86);
}
.pl-forgot-msg b { color: var(--pl-accent-l); font-weight: 800; }

/* ============================================================
   5) UYARI / ALERT — hata (kirmizi) + basari (.pl-ok yesil)
   JS: className='pl-alert' reset + '.pl-ok' ekleme mantigi AYNEN
   ============================================================ */
.pl-alert {
  position: relative;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  padding: 11px 14px 11px 38px;
  margin-bottom: 15px;
  background: rgba(239, 68, 68, .14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .28);
}

.pl-alert[hidden] {
  display: none;
}

/* hata ikonu — saf CSS (uyari uclgeni; SVG'siz, JS'e bagimsiz) */
.pl-alert::before {
  content: '!';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: rgba(239, 68, 68, .85);
}

/* basari varyanti (.pl-ok) — yesil */
.pl-alert.pl-ok {
  background: rgba(16, 185, 129, .14);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, .28);
}

.pl-alert.pl-ok::before {
  content: '\2713';               /* check */
  font-size: 11px;
  background: rgba(16, 185, 129, .85);
}

/* ============================================================
   6) BASARI PANELI (davet: sifre belirlendi)
   ============================================================ */
.pl-success {
  text-align: center;
  padding: 10px 0 4px;
}

.pl-success[hidden] {
  display: none;
}

.pl-success-ic {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(52, 211, 153, .1));
  border: 2px solid rgba(16, 185, 129, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: var(--pl-green-l);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 8px 24px -8px rgba(16, 185, 129, .4);
  animation: pl-pop .4s cubic-bezier(.34, 1.4, .5, 1) both,
             pl-glow-pulse 2.6s ease-in-out .4s infinite;
}

@keyframes pl-pop {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

@keyframes pl-glow-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 0 rgba(16, 185, 129, .28); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 8px rgba(16, 185, 129, 0); }
}

.pl-success h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 5px;
  color: var(--pl-t1);
}

.pl-success p {
  font-size: 13px;
  color: var(--pl-t2);
  margin: 0;
  line-height: 1.45;
}

/* ============================================================
   7) FOOTER
   ============================================================ */
.pl-foot {
  text-align: center;
  margin-top: 20px;
  font-size: 10.5px;
  color: var(--pl-t3);
  font-weight: 500;
  letter-spacing: .01em;
}

/* ============================================================
   8) ERISILEBILIRLIK — focus-visible + reduced-motion
   ============================================================ */
.pl-fg input:focus-visible {
  border-color: var(--pl-accent);
  box-shadow: 0 0 0 4px var(--pl-focus);
}

.pl-btn:focus-visible,
.pl-pw-toggle:focus-visible {
  outline: 2px solid var(--pl-accent-l);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pl-btn,
  .pl-fg input,
  .pl-pw-toggle {
    transition: none;
  }
  .pl-btn:hover:not(:disabled) {
    transform: none;
  }
  .pl-success-ic {
    animation: none;
  }
}

/* ============================================================
   9) RESPONSIVE — telefonda mukemmel
   ============================================================ */
@media (max-width: 480px) {
  .pl-shell {
    padding: 18px 16px;
    align-items: flex-start;
  }

  .pl-card {
    padding: 32px 22px 26px;
    border-radius: 20px;
    margin-top: max(24px, env(safe-area-inset-top));
  }

  .pl-avatar,
  .pl-brand-logo,
  .pl-brand-fallback {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    font-size: 24px;
  }

  .pl-brand-logo {
    padding: 9px;
  }

  .pl-brand-fallback {
    font-size: 18px;
  }

  .pl-head h1 {
    font-size: 20px;
  }

  /* iOS Safari input odaklaninca zoom yapmasin — KRITIK: 16px sinir */
  .pl-fg input {
    font-size: 16px;
    min-height: 50px;
  }

  .pl-btn {
    min-height: 52px;
    font-size: 15px;
  }
}