/* ==========================================================================
   ZOO.COM.TR — "Üye Girişi" Pop-up Yenileme  (CSS)
   --------------------------------------------------------------------------
   Hedef  : Ticimax v8.13 · fancybox 2.1.5 ile açılan üyelik pop-up'ı
            .fancybox-wrap.newUyegirisPopup > .fancybox-skin > .fancybox-outer
            > .fancybox-inner > #divNewUyeGirisContent  (veya .pageSifremiUnuttum)
   Kapsam : Giriş Yap · Üye Ol (hızlı üyelik) · Şifremi Unuttum — üç ekran da.
   Marka  : #003790 (mavi) · #00205B (lacivert) · #0A48B0 (açık mavi/hover)

   NOT 1: fancybox pop-up'ı JS ile konumlandırıp .fancybox-wrap / -inner
          üzerine inline style basar. Bu yüzden konum/ölçü kuralları
          !important ile ezilir; aksi halde 500 ms sonraki
          $.fancybox.update() çağrısı düzeni bozar.
   NOT 2: Ticimax teması her şeyi float:left ile diziyor. Alanları flex'e
          çevirmeden önce float'lar temizleniyor.
   NOT 3: Overlay'in ayırt edici sınıfı yok — sitedeki diğer fancybox'lar da
          aynısını kullanıyor. Bu yüzden JS body etiketine .zooUyeGirisAcik
          sınıfını ekliyor ve overlay kuralları ona bağlanıyor.
   ========================================================================== */

/* ---------- 0. Tokenlar ----------
   Aynı tokenlar iki farklı pop-up'ta kullanılıyor:
   1. Site geneli  : .newUyegirisPopup           — fancybox 2.1.5
   2. /checkout    : .modal-overlay:has(.login-form) ve
                     .modal-overlay:has(.forgot-password-container)
                     — Vue 3 + Vuetify, checkout uygulamasının kendi modal'ı
   -------------------------------------------------------------------------- */
.newUyegirisPopup,
.modal-overlay:has(.login-form),
.modal-overlay:has(.register-form),
.modal-overlay:has(.forgot-password-container) {
  --zoo-blue: #003790;
  --zoo-blue-light: #0a48b0;
  --zoo-navy: #00205b;
  --zoo-ink: #15284b;
  --zoo-muted: #6b7b96;
  --zoo-line: #e1e7f0;
  --zoo-line-soft: #eef2f8;
  --zoo-surface: #f5f8fc;
  --zoo-danger: #e2483c;
  --zoo-radius: 14px;
}

/* ==========================================================================
   1. Overlay (arka plan karartma)
   ========================================================================== */
body.zooUyeGirisAcik .fancybox-overlay {
  background: rgba(4, 16, 43, .58) !important;
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  backdrop-filter: blur(7px) saturate(120%);
  animation: zooOverlayIn .24s ease both;
}

@keyframes zooOverlayIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

/* ==========================================================================
   2. Pop-up kabuğu — fancybox konumlandırmasını devre dışı bırakıp
      tam ekran flex merkezine alıyoruz.
   ========================================================================== */
.fancybox-wrap.newUyegirisPopup {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: none !important;
}

/* Kart */
.newUyegirisPopup .fancybox-skin {
  position: relative;
  width: 440px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 48px);
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  color: var(--zoo-ink) !important;
  border-radius: 22px !important;
  box-shadow:
    0 32px 80px -24px rgba(0, 32, 91, .45),
    0 0 0 1px rgba(0, 32, 91, .06) !important;
  overflow: hidden;
  text-shadow: none !important;
  animation: zooPopIn .3s cubic-bezier(.2, .85, .3, 1) both;
}

/* Kartın tepesinde yumuşak marka parıltısı */
.newUyegirisPopup .fancybox-skin::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0, 55, 144, .09) 0%, rgba(0, 55, 144, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

@keyframes zooPopIn {
  from { opacity: 0; transform: translateY(14px) scale(.97) }
  to   { opacity: 1; transform: none }
}

.newUyegirisPopup .fancybox-outer {
  width: 100% !important;
  height: auto !important;
  max-height: inherit;
  background: transparent !important;
  overflow: visible !important;
}

/* İçerik uzunsa (Üye Ol formu) kart içinde kayar */
.newUyegirisPopup .fancybox-inner {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 48px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: #c8d4e6 transparent;
}

.newUyegirisPopup .fancybox-inner::-webkit-scrollbar        { width: 8px }
.newUyegirisPopup .fancybox-inner::-webkit-scrollbar-track  { background: transparent }
.newUyegirisPopup .fancybox-inner::-webkit-scrollbar-thumb  { background: #d3ddec; border-radius: 8px; border: 2px solid #fff }
.newUyegirisPopup .fancybox-inner::-webkit-scrollbar-thumb:hover { background: #b9c8de }

/* İçerik kutuları */
.newUyegirisPopup .newUserLeftBox#divNewUyeGirisContent,
.newUyegirisPopup .newUserLeftBox.pageSifremiUnuttum {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 26px 26px !important;
  background: transparent !important;
}

/* ==========================================================================
   3. Kapat butonu — fancybox'ın sprite'lı butonu kart içine alınıp
      yuvarlak bir SVG "X"e çevriliyor.
   ========================================================================== */
.newUyegirisPopup .fancybox-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #eef2f8 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300205B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 10;
  /* İçerik kayarken butonun altından geçtiğinde okunur kalsın */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92) !important;
  /* Hareketsiz: sadece renk değişir, dönme/büyüme animasyonu yok. */
  transform: none !important;
  transition: background-color .18s ease;
}

/* Tema bu butona ::after ile "x" harfi basıyor — kendi SVG'mizle çakışıyor */
.newUyegirisPopup .fancybox-close:before,
.newUyegirisPopup .fancybox-close:after {
  content: none !important;
  display: none !important;
}

.newUyegirisPopup .fancybox-close {
  font-size: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}

.newUyegirisPopup .fancybox-close:hover {
  background-color: #dde5f2 !important;
  transform: none !important;
}

/* ==========================================================================
   4. Başlık bloğu (JS ile eklenir)
   ========================================================================== */
.newUyegirisPopup .zooLoginHead {
  padding: 30px 10px 4px;
  text-align: center;
  position: relative;
}

.newUyegirisPopup .zooLoginLogo {
  display: block;
  width: auto;
  height: 34px;
  margin: 0 auto 16px;
  object-fit: contain;
  mix-blend-mode: multiply;   /* logo JPG · beyaz zemini yutar */
}

.newUyegirisPopup .zooLoginTitle {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--zoo-navy);
}

.newUyegirisPopup .zooLoginSub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zoo-muted);
}

/* ==========================================================================
   5. Sekmeler (Giriş Yap / Üye Ol) — segmented control
   ========================================================================== */
.newUyegirisPopup .userDivTab {
  float: none !important;
  width: 100% !important;
  margin: 20px 0 0;
}

.newUyegirisPopup .userDivTab ul {
  float: none !important;
  display: flex;
  gap: 4px;
  padding: 4px !important;
  background: var(--zoo-surface);
  border: 1px solid var(--zoo-line-soft);
  border-radius: var(--zoo-radius);
}

.newUyegirisPopup .userDivTab ul li { flex: 1 }

.newUyegirisPopup .userDivTab ul li span {
  width: 100%;
  padding: 10px 0;
  line-height: 1.3 !important;
  border: 0 !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #64768f !important;
  background: transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.newUyegirisPopup .userDivTab ul li:not(.active) span:hover { color: var(--zoo-blue) !important }

.newUyegirisPopup .userDivTab ul li.active span {
  background: #fff;
  color: var(--zoo-navy) !important;
  box-shadow: 0 1px 3px rgba(0, 32, 91, .16), 0 0 0 1px rgba(0, 32, 91, .04);
}

/* Sekme değişince Ticimax "Üye Ol" şablonunu sunucudan çekip pop-up'ı baştan
   kuruyor; arada ~0,4 sn hiçbir şey olmuyordu. JS tıklama anında vurguyu
   taşıyıp bu ince çubuğu gösteriyor, böylece tıklama boşa gitmiş gibi
   hissettirmiyor. Pop-up yeniden çizilince sınıf kendiliğinden kayboluyor. */
.newUyegirisPopup .zooSekmeYukleniyor .userDivTab {
  position: relative;
  overflow: hidden;
}

.newUyegirisPopup .zooSekmeYukleniyor .userDivTab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 40%;
  height: 2px;
  border-radius: 2px;
  background: var(--zoo-blue);
  animation: zooSekmeBar .9s ease-in-out infinite;
}

@keyframes zooSekmeBar {
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(250%) }
}

/* Sekme değişiminde kart baştan kurulduğu için açılış animasyonu tekrar
   oynuyor ve pop-up kapanıp yeniden açılıyormuş gibi görünüyordu. */
.newUyegirisPopup.zooAnimasyonsuz .fancybox-skin { animation: none !important }

/* ==========================================================================
   6. Form alanları
   ========================================================================== */
.newUyegirisPopup #divNewUyeGirisContent .uyeGirisFormDetail,
.newUyegirisPopup #divNewUyeGirisContent #divNewPopupUyeGiris,
.newUyegirisPopup #divNewUyeGirisContent #divNewPopupHizliUyelik,
.newUyegirisPopup .pageSifremiUnuttum #divSifremiUnuttum {
  float: none !important;
  width: 100% !important;
}

/* Gri çerçeveli input kutusu kaldırılıp alanlar tek tek kartlaştırılıyor */
.newUyegirisPopup #divNewUyeGirisContent .uyeGirisFormDetailInputList,
.newUyegirisPopup .pageSifremiUnuttum .sifremiUnuttumInputList {
  float: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.newUyegirisPopup .newUserWrapper {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.newUyegirisPopup .newUserWrapper.displayNone,
.newUyegirisPopup .newUserWrapper[style*="display: none"] { display: none }

.newUyegirisPopup .newUserWrapper input,
.newUyegirisPopup .newUserWrapper input[type="text"],
.newUyegirisPopup .newUserWrapper input[type="tel"],
.newUyegirisPopup .newUserWrapper input[type="email"],
.newUyegirisPopup .newUserWrapper input[type="password"],
.newUyegirisPopup .newUserWrapper select {
  float: none !important;
  width: 100% !important;
  height: 58px !important;
  padding: 22px 15px 6px !important;
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  border-radius: var(--zoo-radius) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--zoo-navy) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.newUyegirisPopup .newUserWrapper input:hover,
.newUyegirisPopup .newUserWrapper select:hover { border-color: #c9d5e8 !important }

.newUyegirisPopup .newUserWrapper input:focus,
.newUyegirisPopup .newUserWrapper select:focus {
  border-color: var(--zoo-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 55, 144, .13) !important;
  outline: 0 !important;
}

/* Chrome otomatik doldurma sarısını kapat */
.newUyegirisPopup .newUserWrapper input:-webkit-autofill,
.newUyegirisPopup .newUserWrapper input:-webkit-autofill:hover,
.newUyegirisPopup .newUserWrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--zoo-navy) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  border-radius: var(--zoo-radius) !important;
}

/* Yüzen etiket */
.newUyegirisPopup .newUserWrapper .placeholderLabel {
  left: 16px !important;
  top: 19px !important;
  font-size: 15px !important;
  font-weight: 500;
  color: #8494ab !important;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), color .18s ease, max-width .28s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Tema .active sınıfını yalnızca odak/yazma anında ekliyor; tarayıcı formu
   kendisi doldurduğunda etiket yerinde kalıp değerin üstüne biniyordu.
   :-webkit-autofill CSS tarafı, JS'teki etiketleriEsitle de yedeği. */
.newUyegirisPopup .newUserWrapper .placeholderLabel.active,
.newUyegirisPopup .newUserWrapper input:focus + .placeholderLabel,
.newUyegirisPopup .newUserWrapper input:-webkit-autofill + .placeholderLabel {
  max-width: 140%;
  transform: translateY(-11px) scale(.76) !important;
  color: var(--zoo-blue) !important;
}

/* Şifre göster/gizle */
.newUyegirisPopup .TcxPassEye {
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #8494ab;
  transition: background-color .16s ease, color .16s ease;
}

.newUyegirisPopup .TcxPassEye:hover { background: var(--zoo-surface); color: var(--zoo-blue) }
.newUyegirisPopup .TcxPassEye svg   { width: 21px; height: 21px; display: block }
.newUyegirisPopup .TcxPassEye a     { display: flex; align-items: center; justify-content: center }

/* Hata mesajları */
.newUyegirisPopup .alert.alert-danger {
  float: none !important;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 0 0 2px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: var(--zoo-danger) !important;
}

.newUyegirisPopup .alert.alert-danger.displayNone { display: none }
.newUyegirisPopup .alert.alert-danger:before { float: none; margin-right: 2px; font-size: 13px; line-height: 1.4 }

.newUyegirisPopup .newUserWrapper.isRequiredDiv input {
  background: #fff6f5 !important;
  border-color: #f3b7b1 !important;
}

.newUyegirisPopup .newUserWrapper.isRequiredDiv .placeholderLabel { color: var(--zoo-danger) !important }

/* Şifre gücü göstergesi (Üye Ol) */
.newUyegirisPopup .passControlProgress { margin: 8px 0 0 !important }
.newUyegirisPopup .passControlProgress .progress { height: 5px !important; border-radius: 99px !important; overflow: hidden }
.newUyegirisPopup .passControlProgress .progress-bar { border-radius: 99px }
.newUyegirisPopup .passControlProgress .password-verdict { font-size: 11.5px !important; font-weight: 600; top: -1px !important }
.newUyegirisPopup .passControlDiv .error-list span { font-size: 11.5px !important }

/* Telefon alanı (intl-tel-input)
   Bayrak seçici inputun soluna binmesin diye sol boşluk korunuyor;
   bu alanda yüzen etiket yok, placeholder kullanılıyor. */
.newUyegirisPopup .newUserWrapper .iti { width: 100%; display: block }
.newUyegirisPopup .newUserWrapper .iti__flag-container { z-index: 3; padding: 0 0 0 6px }
.newUyegirisPopup .newUserWrapper .iti__selected-flag { border-radius: 12px 0 0 12px; padding: 0 6px 0 10px }

.newUyegirisPopup .newUserWrapper .iti input,
.newUyegirisPopup .newUserWrapper input.ticiTelInput,
.newUyegirisPopup .newUserWrapper input#txtQuickTel,
.newUyegirisPopup .newUserWrapper input#txtQuickTelLogin,
.newUyegirisPopup .newUserWrapper input#txtQuickTelPassword { padding: 0 15px 0 58px !important }

/* --------------------------------------------------------------------------
   Güvenlik kodu (captcha)
   Tasarım: tek satır — [ kod görseli ] [ kod girişi ] [ yenile ]
   ÖNEMLİ: .xIDDiv şablonda inline style="display:none" ile geliyor ve
   Ticimax gerektiğinde jQuery .show() ile açıyor. Bu yüzden display'i
   koşulsuz !important ile vermiyoruz; aksi halde captcha hep görünür kalıyor.
   -------------------------------------------------------------------------- */
.newUyegirisPopup .xIDDiv:not([style*="none"]) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* jQuery .show() bazı durumlarda inline display:block bırakıyor */
.newUyegirisPopup .xIDDiv[style*="display: block"],
.newUyegirisPopup .xIDDiv[style*="display:block"] { display: grid !important }

/* Şifremi Unuttum şablonunda görsel + yenile ayrı bir sarmalayıcıda;
   display:contents ile çocukları da aynı grid'e katılır. */
.newUyegirisPopup .xIDDiv .sifremiUnuttumCaptcha { display: contents }

/* Görsel çerçeveyi tam kaplar: iç dolgu yok, object-fit:fill ile kutuya
   birebir oturur. Doğal oran 3.38, kutu oranı ~2.9 — kırpma yerine çok hafif
   yatay sıkışma tercih edildi, hiçbir karakter kesilmiyor. */
.newUyegirisPopup .xIDDiv img {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  height: 58px !important;
  padding: 0 !important;
  object-fit: fill;
  background: #fff;
  border: 1.5px solid var(--zoo-line);
  border-radius: var(--zoo-radius);
  overflow: hidden;
}

.newUyegirisPopup .xIDDiv .CaptchaDiv {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  margin: 0 !important;
}

.newUyegirisPopup .xIDDiv .CaptchaDiv input { height: 58px !important }

/* Yenile butonu */
.newUyegirisPopup .xIDDiv a {
  grid-column: 3;
  grid-row: 1;
  width: 52px;
  height: 58px;
  margin: 0 !important;
  /* tema a{display:block} kuralını !important ile veriyor */
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--zoo-line);
  border-radius: 12px;
  font-size: 15px !important;
  color: var(--zoo-blue) !important;
  transition: background-color .16s ease, border-color .16s ease;
}

.newUyegirisPopup .xIDDiv a i { float: none !important; margin: 0 !important; width: auto !important; line-height: 1 !important }
.newUyegirisPopup .xIDDiv a:hover { background: var(--zoo-surface); border-color: #c9d5e8 }
.newUyegirisPopup .xIDDiv .fa-refresh { color: var(--zoo-blue) }

/* Dar ekranda kod girişi alt satıra iner */
@media (max-width: 480px) {
  .newUyegirisPopup .xIDDiv:not([style*="none"]) { grid-template-columns: minmax(0, 1fr) auto }
  .newUyegirisPopup .xIDDiv .CaptchaDiv { grid-column: 1 / -1; grid-row: 2 }
  .newUyegirisPopup .xIDDiv a { grid-column: 2; grid-row: 1 }
}

.newUyegirisPopup .CaptchaDiv { float: none !important; margin: 0 !important }

/* ==========================================================================
   7. Butonlar
   ========================================================================== */
.newUyegirisPopup #divNewUyeGirisContent .uyeGirisFormDetailButtonList {
  float: none !important;
  width: 100% !important;
}

.newUyegirisPopup #divNewUyeGirisContent .newUserLoginBtn,
.newUyegirisPopup .pageSifremiUnuttum .newUserLoginBtn {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  height: 54px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--zoo-blue-light) 0%, var(--zoo-blue) 100%) !important;
  border: 0 !important;
  border-radius: var(--zoo-radius) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 10px 22px -10px rgba(0, 55, 144, .75) !important;
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease !important;
}

.newUyegirisPopup #divNewUyeGirisContent .newUserLoginBtn:hover,
.newUyegirisPopup .pageSifremiUnuttum .newUserLoginBtn:hover {
  background: linear-gradient(180deg, #0d52c6 0%, #013f9f 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(0, 55, 144, .8) !important;
}

.newUyegirisPopup #divNewUyeGirisContent .newUserLoginBtn:active,
.newUyegirisPopup .pageSifremiUnuttum .newUserLoginBtn:active { transform: translateY(0) }

/* Şifremi Unuttum ekranındaki ikinci buton ("Giriş Yap") ikincil stil */
.newUyegirisPopup .pageSifremiUnuttum a.newUserLoginBtn.login-button {
  margin-top: 10px !important;
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  color: var(--zoo-navy) !important;
  box-shadow: none !important;
}

.newUyegirisPopup .pageSifremiUnuttum a.newUserLoginBtn.login-button:hover {
  background: var(--zoo-surface) !important;
  border-color: #c9d5e8 !important;
  transform: none;
  box-shadow: none !important;
}

/* Şifremi Unuttum linki */
.newUyegirisPopup #divNewUyeGirisContent .forgotpasswordDiv {
  float: none !important;
  width: 100% !important;
  margin-top: 12px !important;
  text-align: right;
}

.newUyegirisPopup #divNewUyeGirisContent .userPassBtn {
  display: inline-block;
  font-size: 13.5px !important;
  font-weight: 600;
  color: var(--zoo-blue) !important;
  text-decoration: none !important;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease;
}

.newUyegirisPopup #divNewUyeGirisContent .userPassBtn:hover { border-bottom-color: var(--zoo-blue) }

/* Üyeliksiz devam et */
.newUyegirisPopup #divNewUyeGirisContent .uyeliksizDevamEtBtn a {
  height: 52px;
  padding: 0 !important;
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  border-radius: var(--zoo-radius) !important;
  color: var(--zoo-navy) !important;
  font-size: 14px !important;
  transition: background-color .16s ease, border-color .16s ease;
}

.newUyegirisPopup #divNewUyeGirisContent .uyeliksizDevamEtBtn a:hover {
  background: var(--zoo-surface) !important;
  border-color: #c9d5e8 !important;
}

.newUyegirisPopup .uyeliksizDevamEtDivider { margin: 16px 0 !important }
.newUyegirisPopup .uyeliksizDevamEtDivider span { font-size: 12px; color: var(--zoo-muted) }
.newUyegirisPopup .uyeliksizDevamEtDivider .uyeliksizDevamEtDividerLine { border-bottom-color: var(--zoo-line-soft) }

/* ==========================================================================
   8. "veya" ayıracı (JS ile eklenir) + sosyal giriş
   ========================================================================== */
.newUyegirisPopup .zooOrDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}

.newUyegirisPopup .zooOrDivider::before,
.newUyegirisPopup .zooOrDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--zoo-line-soft);
}

.newUyegirisPopup .zooOrDivider span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #9aa8bd;
  text-transform: uppercase;
}

/* :not([style*="none"]) — sosyal giriş kapalıysa tema bu bloğu inline
   display:none ile gizliyor; !important ile ezersek boş kutu görünür kalır. */
.newUyegirisPopup #divNewUyeGirisContent .socialMediaLoginButtons:not([style*="none"]) {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
}

.newUyegirisPopup #divNewUyeGirisContent .socialBaglanButton { flex: 1 1 0; min-width: 0 }

.newUyegirisPopup #divNewUyeGirisContent .socialBaglanButton a {
  height: 52px;
  padding: 0 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 9px !important;
  background: #fff;
  border: 1.5px solid var(--zoo-line) !important;
  border-radius: var(--zoo-radius);
  color: var(--zoo-navy) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.newUyegirisPopup #divNewUyeGirisContent .socialBaglanButton a:hover {
  background: var(--zoo-surface);
  border-color: #c9d5e8 !important;
  transform: translateY(-1px);
}

.newUyegirisPopup #divNewUyeGirisContent .socialBaglanButton a svg {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px;
}

.newUyegirisPopup #divNewUyeGirisContent .socialBaglanButton a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   9. Sözleşme / izin onay kutuları
   ========================================================================== */
.newUyegirisPopup #divNewUyeGirisContent .socialUserSozlesmeDiv,
.newUyegirisPopup #divNewUyeGirisContent .signSozlesmeDiv {
  float: none !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 14px;
  background: var(--zoo-surface);
  border: 1px solid var(--zoo-line-soft);
  border-radius: var(--zoo-radius);
}

.newUyegirisPopup #divNewUyeGirisContent .socialUserInput { align-items: flex-start !important }

.newUyegirisPopup #divNewUyeGirisContent .newSocialChkSozlesme {
  flex: 0 0 21px !important;
  width: 21px !important;
  height: 21px !important;
  margin: 1px 9px 0 0 !important;
  background: #fff;
  border: 2px solid #c2d0e4 !important;
  border-radius: 7px !important;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

.newUyegirisPopup #divNewUyeGirisContent input:checked + .newSocialChkSozlesme {
  background: var(--zoo-blue);
  border-color: var(--zoo-blue) !important;
}

/* FontAwesome tikini kendi SVG tikimizle değiştiriyoruz (font yüklenmese de görünür) */
.newUyegirisPopup #divNewUyeGirisContent input:checked + .newSocialChkSozlesme:before {
  content: "" !important;
  font-family: inherit !important;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

.newUyegirisPopup #divNewUyeGirisContent .newSocialChkSozlesmeTranslate {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--zoo-muted) !important;
  cursor: pointer;
}

.newUyegirisPopup #divNewUyeGirisContent .newSocialChkSozlesmeTranslate a {
  font-size: 12.5px !important;
  font-weight: 600;
  color: var(--zoo-blue) !important;
  text-decoration: none;
}

.newUyegirisPopup #divNewUyeGirisContent .newSocialChkSozlesmeTranslate a:hover { text-decoration: underline }

/* Üye Ol ekranındaki e-posta/sms izin satırları */
.newUyegirisPopup #divNewUyeGirisContent .userMail label,
.newUyegirisPopup #divNewUyeGirisContent .userSms label {
  width: auto !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--zoo-muted) !important;
}

.newUyegirisPopup #divNewUyeGirisContent .userMail,
.newUyegirisPopup #divNewUyeGirisContent .userSms { margin: 0 !important }

/* ==========================================================================
   10. Şifremi Unuttum ekranı
   ========================================================================== */
.newUyegirisPopup .pageSifremiUnuttum { float: none !important; padding-top: 0 !important }
.newUyegirisPopup .pageSifremiUnuttum .sifremiUnuttumTitle { display: none !important }  /* başlığı zooLoginHead veriyor */

.newUyegirisPopup .pageSifremiUnuttum .SifremiUnuttumSucces {
  padding: 20px 16px !important;
  background: #f2fbf5 !important;
  border: 1px solid #cdead8 !important;
  border-radius: var(--zoo-radius) !important;
  color: #1b7a45;
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
   11. Yükleniyor durumu
   ========================================================================== */
.newUyegirisPopup .sayfaYukleniyor { position: relative; pointer-events: none }

.newUyegirisPopup .sayfaYukleniyor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .68);
  border-radius: 18px;
  z-index: 20;
}

/* ==========================================================================
   12. Mobil — alttan açılan sheet
   ========================================================================== */
@media (max-width: 620px) {
  .fancybox-wrap.newUyegirisPopup {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Alta yapışık sheet. 94vh kullanılınca telefonda tam sayfa gibi
     görünüyordu: mobil tarayıcılarda 100vh, adres çubuğu gizliyken ölçülen
     BÜYÜK görünüm alanıdır — görünen alandan yüksektir. dvh gerçek alanı
     verir, vh satırı eski tarayıcılar için yedek. */
  .newUyegirisPopup .fancybox-skin {
    width: 100% !important;
    max-width: none !important;
    max-height: 82vh;
    max-height: 82dvh;
    padding: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    animation: zooSheetUp .32s cubic-bezier(.2, .85, .3, 1) both;
  }

  /* Sürükleme tutamağı hissi */
  .newUyegirisPopup .fancybox-skin::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: #dde5f0;
    z-index: 11;
  }

  .newUyegirisPopup .fancybox-inner {
    max-height: 82vh !important;
    max-height: 82dvh !important;
  }

  /* Native çubuk mobilde gizleniyor; yerine JS'in çizdiği .zooScrollBar var.
     Gerekçe için aşağıdaki "Özel kaydırma çubuğu" bölümüne bakın. */
  .newUyegirisPopup .fancybox-inner { scrollbar-width: none }

  .newUyegirisPopup .fancybox-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .newUyegirisPopup .zooScrollBar { display: block }

  .newUyegirisPopup .newUserLeftBox#divNewUyeGirisContent,
  .newUyegirisPopup .newUserLeftBox.pageSifremiUnuttum {
    padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .newUyegirisPopup .zooLoginHead { padding-top: 26px }
  .newUyegirisPopup .zooLoginTitle { font-size: 19px }
  .newUyegirisPopup .zooLoginSub { font-size: 13px }
  .newUyegirisPopup .fancybox-close { top: 18px !important; right: 12px !important; width: 32px !important; height: 32px !important }

  /* Sosyal butonlar dar ekranda alt alta değil, yan yana kalsın (etiketler JS ile kısaltılıyor) */
  .newUyegirisPopup #divNewUyeGirisContent .socialMediaLoginButtons { flex-direction: row !important; gap: 8px !important }
  .newUyegirisPopup #divNewUyeGirisContent .socialBaglanButton a { font-size: 13px !important; gap: 7px !important }
}

@keyframes zooSheetUp {
  from { opacity: 0; transform: translateY(28px) }
  to   { opacity: 1; transform: none }
}

/* Mobilde perdedeki blur kaldırıldı.
   backdrop-filter tüm ekranı kaplayan bir katmanda, arkasındaki sayfayı
   yeniden rasterize ettiriyor; anasayfa uzun ve görsel yüklü olduğu için
   telefonda pop-up'ın açılması gözle görülür şekilde gecikiyordu. Yerine
   biraz daha koyu düz bir perde kullanılıyor — görünüm neredeyse aynı,
   açılış anında hiçbir maliyeti yok. */
@media (max-width: 620px) {
  body.zooUyeGirisAcik .fancybox-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(4, 16, 43, .66) !important;
  }
}

@media (max-width: 768px) {
  .modal-overlay:has(.login-form),
  .modal-overlay:has(.register-form),
  .modal-overlay:has(.forgot-password-container) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(4, 16, 43, .66) !important;
  }
}

/* ==========================================================================
   12b. Özel kaydırma çubuğu — mobil
   --------------------------------------------------------------------------
   Telefonda native çubuk gösterilemiyor: iOS Safari ::-webkit-scrollbar
   kurallarını hiç uygulamıyor ve bindirmeli çubuğu parmak kalkınca gizliyor.
   Bu yüzden mobilde native çubuk tamamen kapatılıp yerine JS'in çizdiği bu
   çubuk kullanılıyor — her tarayıcıda aynı ve kalıcı.

   Kartın sağ dolgusunun içinde duruyor, içeriğin üstüne binmiyor ve
   pointer-events: none olduğu için dokunmayı engellemiyor.
   ========================================================================== */
.zooScrollBar {
  display: none;                 /* masaüstünde native çubuk kullanılıyor */
  position: absolute;
  top: 12px;
  right: 5px;
  bottom: 12px;
  width: 6px;
  border-radius: 99px;
  background: rgba(0, 32, 91, .07);
  pointer-events: none;
  z-index: 12;
}

.zooScrollThumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  min-height: 28px;
  border-radius: 99px;
  background: rgba(0, 32, 91, .3);
}

/* --------------------------------------------------------------------------
   Dokunma perdesi
   Giriş düğmesine basıldığı anda beliriyor. Ticimax'in pop-up'ı kurması
   ~300 ms sürüyor ve o sürede ekranda hiçbir şey olmuyordu; ikon ölü gibi
   hissettiriyordu. z-index fancybox'ın kendi perdesinin altında, böylece
   gerçek pop-up gelince üstünü kapatıyor.
   -------------------------------------------------------------------------- */
.zooAcilisPerde {
  position: fixed;
  inset: 0;
  z-index: 8009;
  background: rgba(4, 16, 43, .5);
  pointer-events: none;
  opacity: 0;
  animation: zooPerdeIn .18s ease forwards;
}

@keyframes zooPerdeIn {
  to { opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .zooAcilisPerde { animation: none; opacity: 1 }
}

/* ==========================================================================
   13. Erişilebilirlik
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .newUyegirisPopup .fancybox-skin,
  body.zooUyeGirisAcik .fancybox-overlay { animation: none !important }
  .newUyegirisPopup * { transition-duration: .01ms !important }
}

.newUyegirisPopup .fancybox-close:focus-visible,
.newUyegirisPopup .userDivTab li span:focus-visible,
.newUyegirisPopup .socialBaglanButton a:focus-visible,
.newUyegirisPopup .newUserLoginBtn:focus-visible {
  outline: 3px solid rgba(0, 55, 144, .35) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   ==========================================================================
   B  Ö  L  Ü  M   2  —  /checkout GİRİŞ PENCERESİ
   ==========================================================================
   Checkout ayrı bir uygulama (Vue 3 + Vuetify, checkout-ui.prod.ticimax.net).
   Site genelindeki fancybox pop-up'ı orada YOK; window.mem, jQuery ve fancybox
   yüklenmiyor. Giriş penceresi uygulamanın kendi paylaşılan Modal bileşeni:

     .modal-overlay(.is-mobile-drawer)      ← body etiketinin doğrudan çocuğu
       .modal-container                     ← inline style: max-width:600px; bg:#f8f8f8
         .modal-header(.hide-header) > h3.modal-title + button.modal-close-btn
         .modal-body
           .v-tabs  (button.v-tab ×2)
           .popup-login-window
             .login-form / .register-form
               .login-form-content > .form-field (Vuetify v-field, solo + rounded-0)
               button.cc-button                     ← Giriş Yap / Üye ol
               button.forgot-password
               .custom-divider (.custom-divider-line + .custom-divider-text)
               button.cc-button.without-login-button ← Üyeliksiz Devam Et
               hr, .social-login > .social-login-item, .aggreement-wrapper

   Şifremi Unuttum ayrı bir modal: .forgot-password-container (başlığı görünür).

   Aynı Modal bileşeni checkout'ta başka yerlerde de kullanılıyor; bu yüzden her
   kural :has(.login-form) / :has(.register-form) / :has(.forgot-password-container)
   ile o pencereye kilitli. Tema kuralları [data-v-xxxxxxx] ile geldiği için
   (bir sınıf kadar özgüllük) çakışan yerlerde !important gerekiyor —
   data-v karmaları derlemede değiştiği için seçicilerde ASLA kullanılmadı.
   ========================================================================== */

/* ---------- 2.1 Perde ---------- */
.modal-overlay:has(.login-form),
.modal-overlay:has(.register-form),
.modal-overlay:has(.forgot-password-container) {
  background: rgba(4, 16, 43, .58) !important;
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  backdrop-filter: blur(7px) saturate(120%);
  padding: 24px 16px !important;
}

/* ---------- 2.2 Kart ---------- */
.modal-overlay:has(.login-form) .modal-container,
.modal-overlay:has(.register-form) .modal-container,
.modal-overlay:has(.forgot-password-container) .modal-container {
  max-width: 440px !important;
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow:
    0 32px 80px -24px rgba(0, 32, 91, .45),
    0 0 0 1px rgba(0, 32, 91, .06) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden;
  position: relative;
  animation: zooPopIn .3s cubic-bezier(.2, .85, .3, 1) both;
}

.modal-overlay:has(.forgot-password-container) .modal-container { max-width: 420px !important }

/* Kartın tepesindeki yumuşak marka parıltısı (site pop-up'ıyla aynı) */
.modal-overlay:has(.login-form) .modal-container::before,
.modal-overlay:has(.register-form) .modal-container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(0, 55, 144, .09) 0%, rgba(0, 55, 144, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.modal-overlay:has(.login-form) .modal-body,
.modal-overlay:has(.register-form) .modal-body {
  position: relative;
  z-index: 1;
  padding: 0 26px 26px !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8d4e6 transparent;
}

/* ---------- 2.3 Kapat butonu — karttan dışarı taşan halinden içeri ---------- */
.modal-overlay:has(.login-form) .modal-close-btn,
.modal-overlay:has(.register-form) .modal-close-btn,
.modal-overlay:has(.forgot-password-container) .modal-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #eef2f8 !important;
  color: var(--zoo-navy) !important;
  /* İçerik kayarken butonun altından geçtiğinde okunur kalsın */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92) !important;
  z-index: 10;
  /* Hareketsiz: sadece renk değişir */
  transform: none !important;
  transition: background-color .18s ease !important;
}

.modal-overlay:has(.login-form) .modal-close-btn:hover,
.modal-overlay:has(.register-form) .modal-close-btn:hover,
.modal-overlay:has(.forgot-password-container) .modal-close-btn:hover {
  background: #dde5f2 !important;
  transform: none !important;
}

.modal-overlay:has(.login-form) .modal-close-btn svg,
.modal-overlay:has(.register-form) .modal-close-btn svg,
.modal-overlay:has(.forgot-password-container) .modal-close-btn svg { width: 18px; height: 18px }

/* ---------- 2.4 Marka başlığı (JS ekler) ---------- */
.modal-overlay .zooLoginHead {
  padding: 30px 10px 4px;
  text-align: center;
  position: relative;
}

.modal-overlay .zooLoginLogo {
  display: block;
  width: auto;
  height: 34px;
  margin: 0 auto 16px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.modal-overlay .zooLoginTitle {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--zoo-navy);
}

.modal-overlay .zooLoginSub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zoo-muted);
}

/* ---------- 2.5 Sekmeler → segmented control ---------- */
.modal-overlay:has(.login-form) .v-tabs,
.modal-overlay:has(.register-form) .v-tabs {
  height: auto !important;
  margin-top: 20px;
}

/* LoginPopup.css sekme şeridinin altına çizgi çekiyor */
.modal-overlay:has(.login-form) .v-slide-group__container,
.modal-overlay:has(.register-form) .v-slide-group__container { border-bottom: 0 !important }

.modal-overlay:has(.login-form) .v-slide-group__content,
.modal-overlay:has(.register-form) .v-slide-group__content {
  gap: 4px;
  padding: 4px !important;
  background: var(--zoo-surface);
  border: 1px solid var(--zoo-line-soft);
  border-radius: var(--zoo-radius);
}

.modal-overlay:has(.login-form) .v-tab,
.modal-overlay:has(.register-form) .v-tab {
  flex: 1;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #64768f !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.modal-overlay:has(.login-form) .v-tab--selected,
.modal-overlay:has(.register-form) .v-tab--selected {
  background: #fff !important;
  color: var(--zoo-navy) !important;
  box-shadow: 0 1px 3px rgba(0, 32, 91, .16), 0 0 0 1px rgba(0, 32, 91, .04);
}

/* Vuetify'nin kendi vurgu katmanları ve alt çizgisi */
.modal-overlay:has(.login-form) .v-tab__slider,
.modal-overlay:has(.register-form) .v-tab__slider,
.modal-overlay:has(.login-form) .v-tab .v-btn__overlay,
.modal-overlay:has(.register-form) .v-tab .v-btn__overlay,
.modal-overlay:has(.login-form) .v-tab .v-btn__underlay,
.modal-overlay:has(.register-form) .v-tab .v-btn__underlay { display: none !important }

/* ---------- 2.6 Form kapları ---------- */
.modal-overlay:has(.login-form) .login-form,
.modal-overlay:has(.register-form) .register-form {
  background: transparent !important;
  padding: 0 !important;
}

.modal-overlay:has(.login-form) .login-form-content {
  background: transparent !important;
  padding: 0 !important;
  margin: 20px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-overlay:has(.register-form) .register-form { padding-top: 18px !important }

.modal-overlay:has(.login-form) .form-field,
.modal-overlay:has(.register-form) .form-field,
.modal-overlay:has(.register-form) .v-text-field { margin-bottom: 0 !important }

.modal-overlay:has(.register-form) .register-form .v-text-field { margin-bottom: 10px !important }

/* ---------- 2.7 Alanlar (Vuetify v-field, solo + rounded-0) ---------- */
.modal-overlay:has(.login-form) .v-field,
.modal-overlay:has(.register-form) .v-field,
.modal-overlay:has(.forgot-password-container) .v-field {
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  border-radius: var(--zoo-radius) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

/* .rounded-0 Vuetify yardımcı sınıfı köşeleri sıfırlıyor */
.modal-overlay:has(.login-form) .v-field.rounded-0,
.modal-overlay:has(.register-form) .v-field.rounded-0,
.modal-overlay:has(.forgot-password-container) .v-field.rounded-0 { border-radius: var(--zoo-radius) !important }

.modal-overlay:has(.login-form) .v-field:hover,
.modal-overlay:has(.register-form) .v-field:hover,
.modal-overlay:has(.forgot-password-container) .v-field:hover { border-color: #c9d5e8 !important }

.modal-overlay:has(.login-form) .v-field--focused,
.modal-overlay:has(.register-form) .v-field--focused,
.modal-overlay:has(.forgot-password-container) .v-field--focused {
  border-color: var(--zoo-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 55, 144, .13) !important;
}

/* solo varyantın kendi zemin katmanı */
.modal-overlay:has(.login-form) .v-field__overlay,
.modal-overlay:has(.register-form) .v-field__overlay,
.modal-overlay:has(.forgot-password-container) .v-field__overlay { display: none !important }

.modal-overlay:has(.login-form) .v-field__input,
.modal-overlay:has(.register-form) .v-field__input,
.modal-overlay:has(.forgot-password-container) .v-field__input {
  min-height: 58px !important;
  padding: 22px 15px 6px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--zoo-navy) !important;
}

.modal-overlay:has(.login-form) .v-field-label,
.modal-overlay:has(.register-form) .v-field-label,
.modal-overlay:has(.forgot-password-container) .v-field-label {
  left: 15px !important;
  font-size: 15px !important;
  color: #8494ab !important;
  opacity: 1 !important;
}

.modal-overlay:has(.login-form) .v-field-label--floating,
.modal-overlay:has(.register-form) .v-field-label--floating,
.modal-overlay:has(.forgot-password-container) .v-field-label--floating {
  top: 9px !important;
  font-size: 11.5px !important;
  color: var(--zoo-blue) !important;
}

/* Şifre göster/gizle ikonu */
.modal-overlay:has(.login-form) .v-field__append-inner,
.modal-overlay:has(.register-form) .v-field__append-inner { padding-right: 8px; color: #8494ab }

/* Chrome otomatik doldurma sarısı */
.modal-overlay:has(.login-form) input:-webkit-autofill,
.modal-overlay:has(.register-form) input:-webkit-autofill,
.modal-overlay:has(.login-form) input:-webkit-autofill:focus,
.modal-overlay:has(.register-form) input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--zoo-navy) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

/* --------------------------------------------------------------------------
   Güvenlik kodu — anasayfadaki ile birebir aynı düzen:
   [ kod görseli ] [ kod girişi ] [ yenile ]

   Buradaki zorluk: Vue şablonunda kod girişi .captcha-wrapper'ın İÇİNDE değil,
   hemen ARDINDAN gelen ayrı bir .form-field. Üçünü aynı satıra almanın DOM'a
   dokunmadan tek yolu formun kendisini grid yapmak:
     - form  : 3 sütun (anasayfadaki 1.15fr / 1fr / auto oranı)
     - diğer tüm alanlar 1 / -1 ile tam genişlikte kalıyor
     - .captcha-wrapper display:contents ile şeffaflaşıyor, görsel ve yenile
       düğmesi doğrudan grid'e katılıyor
     - grid-auto-flow: dense — kod alanı 2. sütunda görselin yanındaki boşluğa
       geri dönüyor, yoksa bir alt satıra düşerdi
   -------------------------------------------------------------------------- */
.modal-overlay:has(.login-form) form:has(> .captcha-wrapper),
.modal-overlay:has(.register-form) form:has(> .captcha-wrapper) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  grid-auto-flow: row dense;
  column-gap: 10px;
  align-items: start;
}

.modal-overlay:has(.login-form) form:has(> .captcha-wrapper) > *,
.modal-overlay:has(.register-form) form:has(> .captcha-wrapper) > * { grid-column: 1 / -1 }

.modal-overlay:has(.login-form) form:has(> .captcha-wrapper) > .captcha-wrapper,
.modal-overlay:has(.register-form) form:has(> .captcha-wrapper) > .captcha-wrapper {
  display: contents !important;
}

/* Görsel çerçeveyi tam kaplar — iç dolgu yok, object-fit:fill */
.modal-overlay:has(.login-form) .captcha-image,
.modal-overlay:has(.register-form) .captcha-image {
  grid-column: 1;
  min-width: 0;
  width: 100% !important;
  height: 58px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  object-fit: fill;
  background: #fff;
  border: 1.5px solid var(--zoo-line);
  border-radius: var(--zoo-radius);
  overflow: hidden;
}

/* Yenile düğmesi — anasayfadaki gibi beyaz zeminli, çerçeveli, mavi ikonlu.
   .cc-button sınıfını taşıdığı için mavi degrade kuralını ezmek gerekiyor. */
.modal-overlay:has(.login-form) .captcha-wrapper .v-btn,
.modal-overlay:has(.register-form) .captcha-wrapper .v-btn {
  grid-column: 3;
  width: 52px !important;
  min-width: 52px !important;
  height: 58px !important;
  margin: 0 0 10px !important;
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  color: var(--zoo-blue) !important;
  border-radius: var(--zoo-radius) !important;
  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}

.modal-overlay:has(.login-form) .captcha-wrapper .v-btn:hover,
.modal-overlay:has(.register-form) .captcha-wrapper .v-btn:hover {
  background: var(--zoo-surface) !important;
  border-color: #c9d5e8 !important;
  transform: none;
}

.modal-overlay:has(.login-form) .captcha-wrapper .v-btn .v-btn__overlay,
.modal-overlay:has(.register-form) .captcha-wrapper .v-btn .v-btn__overlay { display: none !important }

/* İkon anasayfadaki yenile simgesiyle aynı boyda dursun */
.modal-overlay:has(.login-form) .captcha-wrapper .v-btn .v-icon,
.modal-overlay:has(.register-form) .captcha-wrapper .v-btn .v-icon { font-size: 20px !important }

/* Kod girişi ortadaki sütuna oturuyor; dar sütunda "Güvenlik kodu" etiketi
   kesilmesin diye iç dolgu 15px yerine 10px. */
.modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field,
.modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field { grid-column: 2 }

.modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field .v-field,
.modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field .v-field { padding-right: 0 !important }

.modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field .v-field__input,
.modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field .v-field__input {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field .v-field-label,
.modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field .v-field-label { left: 10px !important }

/* Dar ekranda anasayfadaki gibi: [ görsel ][ yenile ], kod girişi alt satırda */
@media (max-width: 480px) {
  .modal-overlay:has(.login-form) form:has(> .captcha-wrapper),
  .modal-overlay:has(.register-form) form:has(> .captcha-wrapper) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .modal-overlay:has(.login-form) .captcha-wrapper .v-btn,
  .modal-overlay:has(.register-form) .captcha-wrapper .v-btn { grid-column: 2 }

  .modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field,
  .modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field { grid-column: 1 / -1 }

  .modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field .v-field__input,
  .modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field .v-field__input {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .modal-overlay:has(.login-form) form > .captcha-wrapper + .form-field .v-field-label,
  .modal-overlay:has(.register-form) form > .captcha-wrapper + .form-field .v-field-label { left: 15px !important }
}

/* Telefon alanı (vue-tel-input) */
.modal-overlay:has(.register-form) .phone-wrapper { margin: 0 !important }
.modal-overlay:has(.register-form) .vue-tel-input {
  border: 1.5px solid var(--zoo-line) !important;
  border-radius: var(--zoo-radius) !important;
  box-shadow: none !important;
  min-height: 58px;
}
.modal-overlay:has(.register-form) .vue-tel-input:focus-within {
  border-color: var(--zoo-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 55, 144, .13) !important;
}
.modal-overlay:has(.register-form) .vti__input { font-size: 15px !important; color: var(--zoo-navy) !important }

/* ---------- 2.8 Butonlar ---------- */
.modal-overlay:has(.login-form) .cc-button,
.modal-overlay:has(.register-form) .cc-button {
  height: 54px !important;
  margin-top: 18px !important;
  border-radius: var(--zoo-radius) !important;
  background: linear-gradient(180deg, var(--zoo-blue-light) 0%, var(--zoo-blue) 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  box-shadow: 0 10px 22px -10px rgba(0, 55, 144, .75) !important;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease !important;
}

.modal-overlay:has(.login-form) .cc-button:hover,
.modal-overlay:has(.register-form) .cc-button:hover {
  background: linear-gradient(180deg, #0d52c6 0%, #013f9f 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(0, 55, 144, .8) !important;
}

.modal-overlay:has(.login-form) .cc-button .v-btn__overlay,
.modal-overlay:has(.register-form) .cc-button .v-btn__overlay { display: none !important }

/* Üyeliksiz Devam Et — ikincil */
.modal-overlay:has(.login-form) .cc-button.without-login-button {
  margin-top: 0 !important;
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  color: var(--zoo-navy) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.modal-overlay:has(.login-form) .cc-button.without-login-button:hover {
  background: var(--zoo-surface) !important;
  border-color: #c9d5e8 !important;
  transform: none;
  box-shadow: none !important;
}

/* Şifremi Unuttum bağlantısı */
.modal-overlay:has(.login-form) .forgot-password {
  margin-top: 12px !important;
  padding: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: flex-end;
  display: block;
  margin-left: auto !important;
  background: transparent !important;
  color: var(--zoo-blue) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.modal-overlay:has(.login-form) .forgot-password .v-btn__overlay { display: none !important }

/* ---------- 2.9 "Ya da" ayıracı ---------- */
.modal-overlay:has(.login-form) .custom-divider { margin: 20px 0 14px !important }
.modal-overlay:has(.login-form) .custom-divider-line { border-bottom-color: var(--zoo-line-soft) !important }
.modal-overlay:has(.login-form) .custom-divider-text {
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: #9aa8bd !important;
}

/* Sosyal blokla arasındaki tema çizgisi — ayıraç zaten var */
.modal-overlay:has(.login-form) .login-form hr,
.modal-overlay:has(.register-form) .register-form hr { display: none !important }

/* ---------- 2.10 Sosyal giriş ----------
   DİKKAT: Sözleşme onayı (.aggreement-wrapper) uygulamada .social-login'in
   ÜÇÜNCÜ çocuğu; sarmalanmazsa üçüncü sütun olarak sıkışıyor.
   Sosyal sütunlar Vuetify grid kolonu (v-col-md-4 → max-width:33%). */
.modal-overlay:has(.login-form) .social-login,
.modal-overlay:has(.register-form) .social-login {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  gap: 10px;
  /* Alttaki içerikle arasında nefes payı bırak */
  margin: 18px 0 16px !important;
}

.modal-overlay:has(.login-form) .social-login > *,
.modal-overlay:has(.register-form) .social-login > * {
  flex: 1 1 0;
  min-width: 0;
  max-width: none !important;
  padding: 0 !important;
}

.modal-overlay:has(.login-form) .social-login > .aggreement-wrapper,
.modal-overlay:has(.register-form) .social-login > .aggreement-wrapper {
  flex: 1 0 100% !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.modal-overlay:has(.login-form) .aggreement-checkbox,
.modal-overlay:has(.register-form) .aggreement-checkbox { width: 100% }

.modal-overlay:has(.login-form) .social-login-item,
.modal-overlay:has(.register-form) .social-login-item {
  flex-direction: row !important;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 10px !important;
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  border-radius: var(--zoo-radius) !important;
  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.modal-overlay:has(.login-form) .social-login-item:hover,
.modal-overlay:has(.register-form) .social-login-item:hover {
  background: var(--zoo-surface) !important;
  border-color: #c9d5e8 !important;
  transform: translateY(-1px);
}

.modal-overlay:has(.login-form) .social-login-icon,
.modal-overlay:has(.register-form) .social-login-icon {
  margin-bottom: 0 !important;
  height: 22px !important;
  flex: 0 0 auto;
}

.modal-overlay:has(.login-form) .social-login-text,
.modal-overlay:has(.register-form) .social-login-text {
  font-size: 13.5px !important;
  font-weight: 600;
  color: var(--zoo-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 2.11 Sözleşme / izin onayları ---------- */
.modal-overlay:has(.login-form) .aggreement-wrapper,
.modal-overlay:has(.register-form) .aggreement-wrapper {
  margin-top: 16px !important;
  padding: 6px 12px;
  background: var(--zoo-surface);
  border: 1px solid var(--zoo-line-soft);
  border-radius: var(--zoo-radius);
}

.modal-overlay:has(.login-form) .aggreement-checkbox .v-label,
.modal-overlay:has(.register-form) .aggreement-checkbox .v-label,
.modal-overlay:has(.register-form) .chekbox-mod {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--zoo-muted) !important;
  opacity: 1 !important;
}

.modal-overlay:has(.login-form) .aggreement-wrapper a,
.modal-overlay:has(.register-form) .aggreement-wrapper a,
.modal-overlay:has(.register-form) .chekbox-mod a {
  color: var(--zoo-blue) !important;
  font-weight: 600;
  text-decoration: none;
}

.modal-overlay:has(.login-form) .aggreement-wrapper a:hover,
.modal-overlay:has(.register-form) .chekbox-mod a:hover { text-decoration: underline }

.modal-overlay:has(.login-form) .v-selection-control__input > .v-icon,
.modal-overlay:has(.register-form) .v-selection-control__input > .v-icon { color: var(--zoo-blue) !important }

/* Üye Ol formundaki özel onay kutuları (.chekbox-mod > .checkmark) */
.modal-overlay:has(.register-form) .chekbox-mod .checkmark {
  border-radius: 7px !important;
  border-color: #c2d0e4 !important;
}

.modal-overlay:has(.register-form) .chekbox-mod input:checked ~ .checkmark {
  background: var(--zoo-blue) !important;
  border-color: var(--zoo-blue) !important;
}

.modal-overlay:has(.register-form) .desc { font-size: 12.5px !important; color: var(--zoo-muted) !important }

/* ---------- 2.12 Şifremi Unuttum penceresi ---------- */
.modal-overlay:has(.forgot-password-container) .modal-header {
  border-bottom: 0 !important;
  padding: 26px 26px 0 !important;
}

.modal-overlay:has(.forgot-password-container) .modal-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--zoo-navy) !important;
  letter-spacing: -.2px;
}

.modal-overlay:has(.forgot-password-container) .modal-body { padding: 18px 26px 26px !important }

.modal-overlay:has(.forgot-password-container) .v-form {
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Çerçeve görselin kendisi — boşluk kalmıyor */
.modal-overlay:has(.forgot-password-container) .captcha-img {
  height: 58px !important;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  padding: 0 !important;
  object-fit: fill;
  background: #fff;
  border: 1.5px solid var(--zoo-line);
  border-radius: var(--zoo-radius);
  margin-bottom: 0 !important;
  overflow: hidden;
}

/* Şifremi Unuttum ekranında da anasayfadaki gibi görsel ile kod girişi yan yana.
   Bu ekranda uygulamanın yenile düğmesi yok, o yüzden iki sütun.
   Not: burada görsel formun DOĞRUDAN çocuğu, yani "> *" kuralı da onu yakalıyor;
   sütun ataması ezilmesin diye seçiciler tam yolla yazıldı. */
.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-auto-flow: row dense;
  column-gap: 10px;
  align-items: start;
}

.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > * { grid-column: 1 / -1 }

.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img {
  grid-column: 1;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input { grid-column: 2 }

.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input .v-field { padding-right: 0 !important }

.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input .v-field__input {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input .v-field-label { left: 10px !important }

/* Dar ekranda anasayfadaki gibi alt alta */
@media (max-width: 480px) {
  .modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img,
  .modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input {
    grid-column: 1 / -1;
  }

  .modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img { width: auto !important }

  .modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input .v-field__input {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .modal-overlay:has(.forgot-password-container) .forgot-password-container form.v-form:has(> .captcha-img) > .captcha-img + .v-input .v-field-label { left: 15px !important }
}

.modal-overlay:has(.forgot-password-container) .form-operation-wrapper {
  margin: 18px -5px 0 !important;
  gap: 0;
}

.modal-overlay:has(.forgot-password-container) .forgot-password-button {
  height: 52px !important;
  margin: 0 5px !important;
  border-radius: var(--zoo-radius) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .2px !important;
  box-shadow: none !important;
}

/* İlk düğme "Giriş Yap" (ikincil), ikincisi "Gönder" (birincil) */
.modal-overlay:has(.forgot-password-container) .forgot-password-button:first-child {
  background: #fff !important;
  border: 1.5px solid var(--zoo-line) !important;
  color: var(--zoo-navy) !important;
}

.modal-overlay:has(.forgot-password-container) .forgot-password-button:last-child {
  background: linear-gradient(180deg, var(--zoo-blue-light) 0%, var(--zoo-blue) 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(0, 55, 144, .75) !important;
}

.modal-overlay:has(.forgot-password-container) .forgot-password-button .v-btn__overlay { display: none !important }

/* ---------- 2.13 Mobil — alttan açılan sheet ----------
   Uygulama zaten .is-mobile-drawer ile alttan açıyor; köşe/dolgu uyumlandı. */
@media (max-width: 768px) {
  /* Perdenin masaüstü dolgusu burada sıfırlanmazsa kart alttan 24px yukarıda
     kalıyor ve sheet ekranın altına yapışmıyordu. Uygulamanın kendi kuralı
     padding:0 veriyor ama bizimki !important olduğu için onu eziyordu.
     align-items da uygulamanın .is-mobile-drawer sınıfına bağlı; sınıf bir
     sebeple gelmezse diye burada açıkça veriliyor. */
  .modal-overlay:has(.login-form),
  .modal-overlay:has(.register-form),
  .modal-overlay:has(.forgot-password-container) {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Alta yapışık sheet — yükseklik dvh ile gerçek görünen alana bağlı.
     Site pop-up'ındaki ile aynı gerekçe. */
  /* .is-mobile-drawer sınıfını uygulama kendi eşiğine göre veriyor; ona
     bağlanmıyoruz ki sınıf gelmese de sheet düzeni bozulmasın. */
  .modal-overlay:has(.login-form) .modal-container,
  .modal-overlay:has(.register-form) .modal-container,
  .modal-overlay:has(.forgot-password-container) .modal-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 82vh !important;
    max-height: 82dvh !important;
  }

  .modal-overlay:has(.login-form) .modal-body,
  .modal-overlay:has(.register-form) .modal-body {
    max-height: 82vh !important;
    max-height: 82dvh !important;
    padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal-overlay:has(.forgot-password-container) .modal-body {
    max-height: 82vh !important;
    max-height: 82dvh !important;
  }

  /* Native çubuk mobilde gizleniyor; yerine JS'in çizdiği .zooScrollBar var. */
  .modal-overlay:has(.login-form) .modal-body,
  .modal-overlay:has(.register-form) .modal-body,
  .modal-overlay:has(.forgot-password-container) .modal-body { scrollbar-width: none }

  .modal-overlay:has(.login-form) .modal-body::-webkit-scrollbar,
  .modal-overlay:has(.register-form) .modal-body::-webkit-scrollbar,
  .modal-overlay:has(.forgot-password-container) .modal-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .modal-overlay:has(.login-form) .zooScrollBar,
  .modal-overlay:has(.register-form) .zooScrollBar,
  .modal-overlay:has(.forgot-password-container) .zooScrollBar { display: block }

  /* Uygulama kapatma butonunu kartın dışına, tepeye itiyor */
  .modal-overlay:has(.login-form) .modal-close-btn,
  .modal-overlay:has(.register-form) .modal-close-btn,
  .modal-overlay:has(.forgot-password-container) .modal-close-btn {
    top: 16px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .modal-overlay .zooLoginHead { padding-top: 26px }
  .modal-overlay .zooLoginTitle { font-size: 19px }
  .modal-overlay .zooLoginSub { font-size: 13px }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay:has(.login-form) .modal-container,
  .modal-overlay:has(.register-form) .modal-container,
  .modal-overlay:has(.forgot-password-container) .modal-container { animation: none !important }
}