/* Portal entegrasyonu: mevcut giris.png arka planı + mobil hesap seçici */
body {
  background-color: #ffffff;
  background-image: url("../../images/giris.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(64vw, 660px) auto;
  background-attachment: fixed;
}

.page {
  background: rgba(255, 255, 255, 0.92);
}

.login-email-wrap {
  position: relative;
}

.login-email-wrap .input {
  padding-right: 48px;
}

.login-accounts-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--slate, #495967);
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.login-accounts-btn.is-visible {
  display: inline-flex;
}

.login-accounts-btn:hover,
.login-accounts-btn:focus-visible {
  background: rgba(20, 23, 29, 0.08);
}

.login-accounts-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: #fff;
  border: 1px solid var(--line, #dee4e9);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(36, 45, 54, 0.14);
  max-height: 240px;
  overflow: auto;
  text-align: left;
}

.login-accounts-panel.is-open {
  display: block;
}

.login-accounts-panel .acc-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line, #dee4e9);
}

.login-accounts-panel .acc-row:last-child {
  border-bottom: 0;
}

.login-accounts-panel .acc-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.login-accounts-panel .acc-item:hover,
.login-accounts-panel .acc-item:active {
  background: var(--bg-alt, #f4f6f8);
}

.login-accounts-panel .acc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.login-accounts-panel .acc-email {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #242d36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-accounts-panel .acc-sub {
  font-size: 12px;
  color: var(--muted, #5c6874);
}

.login-accounts-panel .acc-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--muted, #5c6874);
  line-height: 1.45;
}

.login-accounts-panel .acc-remove {
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--slate-soft, #6b7784);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.login-accounts-panel .acc-remove:hover,
.login-accounts-panel .acc-remove:active {
  color: var(--ink, #242d36);
  background: var(--bg-alt, #f4f6f8);
}

#login-status:not(:empty) {
  color: #b42318;
  font-size: 14px;
  margin-top: 8px;
}

/* Başarı = yeşil; animasyon daha hızlı / akıcı */
.login-feedback[data-state="success"] {
  --auth-color: #1a8f4c;
  --auth-rgb: 26, 143, 76;
}

.login-feedback[data-state="success"] .login-feedback-actions .btn {
  border-color: #b7dfc6;
  color: #146338;
}

.login-feedback[data-state="success"]::before {
  background: radial-gradient(ellipse at center, rgba(26, 143, 76, 0.1), rgba(26, 143, 76, 0.02) 55%, transparent 75%);
}

.login-feedback.is-playing .auth-logo-upper {
  animation: samkep-ribbon-left 0.42s 0.02s cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

.login-feedback.is-playing .auth-logo-lower {
  animation: samkep-ribbon-right 0.42s 0.1s cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

.login-feedback.is-playing .auth-logo-type {
  animation: samkep-wordmark 0.38s 0.28s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.login-feedback.is-playing .auth-logo-light {
  animation: samkep-brand-light 0.4s 0.48s ease-out both;
}

.login-feedback.is-playing .auth-logo-shine {
  animation: samkep-light-pass 0.4s 0.48s ease-in-out both;
}

.login-feedback.is-playing::before {
  animation: samkep-surface-light 0.4s 0.45s ease-out both;
}

.login-feedback.is-playing .login-feedback-copy {
  animation: samkep-result-copy 0.28s 0.22s ease-out both;
}

.login-feedback[data-state="success"].is-playing .login-feedback-title {
  animation: samkep-success-pop 0.45s 0.35s cubic-bezier(0.2, 1.1, 0.3, 1) both;
}

@keyframes samkep-success-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .login-feedback.is-playing .auth-logo-upper,
  .login-feedback.is-playing .auth-logo-lower,
  .login-feedback.is-playing .auth-logo-type,
  .login-feedback.is-playing .auth-logo-light,
  .login-feedback.is-playing::before,
  .login-feedback.is-playing .login-feedback-copy,
  .login-feedback[data-state="success"].is-playing .login-feedback-title {
    animation: samkep-reduced-fade 0.35s ease-out both !important;
  }
}

/* Yönlendirme anında overlay kalsın; giriş formu flaş etmesin */
html.samkep-auth-leaving,
html.samkep-auth-leaving body {
  background: #fff !important;
  overflow: hidden !important;
}

html.samkep-auth-leaving .page {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.samkep-auth-leaving .login-feedback,
html.samkep-auth-leaving .login-feedback[open] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html.samkep-auth-leaving #login-feedback-backdrop {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.samkep-auth-leaving .login-feedback.is-leaving {
  z-index: 2147483647;
}

/* Mobil uyumluluk */
@media (max-width: 767px) {
  :root {
    --logo-h: clamp(44px, 12vw, 64px);
    --gutter: 16px;
  }

  html,
  body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  body {
    background-size: min(92vw, 420px) auto;
    background-attachment: scroll;
    background-position: center 28%;
  }

  .page {
    background: rgba(255, 255, 255, 0.96);
    min-height: 100dvh;
  }

  .top-inner {
    height: auto;
    min-height: calc(var(--logo-h) + 18px);
    padding: 10px 0;
    align-items: center;
  }

  .layout {
    width: 100%;
    padding-top: 6px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    row-gap: 18px;
  }

  .side {
    width: 100%;
    max-width: none;
  }

  .login-card {
    flex: none;
    width: 100%;
    padding: 22px 18px 20px;
    border-radius: 20px 6px 20px 6px;
  }

  .login-title {
    font-size: 22px;
  }

  .login-foot {
    font-size: 13px;
    gap: 10px;
  }

  .login-foot span {
    display: block;
    line-height: 1.45;
  }

  .btn-block {
    min-height: 48px;
  }

  .announce-inner {
    align-items: flex-start;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .announce-text {
    font-size: 13px;
  }

  .foot-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }

  .foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}

@media (max-width: 420px) {
  .head h1 {
    font-size: clamp(24px, 7.2vw, 32px);
  }

  .lead {
    font-size: 15px;
  }

  .login-card {
    padding: 20px 16px 18px;
  }
}