/* Vitrin kabuğu (_Layout.cshtml): tema varsayılanları (DB değeri :root'ta _Layout tarafından ezilir),
   ürün kartı aksiyon düğmeleri, favori/kaydet ikonları ve WhatsApp kayan düğmesi. Sabit renkler yalnız burada (token tanımı). */
:root {
  --primary: #5a7d2e;
  --secondary: #f5f5dc;
  --accent: #d4a843;
  --text-dark: #1a1a1a;
  --text-muted: #6b7280;
  --bg: #ffffff;
  --site-font: 'Nunito';
  --color-whatsapp: #25D366;
  --color-on-whatsapp: #ffffff;
  --color-icon-idle: #6c757d;
}
body { font-family: var(--site-font), sans-serif !important; background: var(--bg) !important; }

/* Ürün kartı aksiyon düğmeleri */
.product-action-btn {
  transition: transform .18s ease, box-shadow .18s ease, background-color .15s ease, border-color .15s ease;
  border: 1.5px solid transparent !important;
}
.product-action-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 25%, transparent) !important;
  background-color: color-mix(in srgb, var(--primary) 8%, var(--color-surface, white)) !important;
  border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
}
.product-action-btn.is-active {
  background-color: color-mix(in srgb, var(--primary) 12%, var(--color-surface, white)) !important;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
}
.product-action-btn i { transition: color .15s ease; }
.wish-ico { font-size: 1.1rem; color: var(--color-icon-idle); }
.wish-ico--on { color: var(--primary); }

/* WhatsApp kayan düğme (T-153).
   Konum --wa-bottom'dan gelir; body'de birikir: taban boşluk + alt menü + yapışkan çubuk (ürün detay / sepet / ödeme) + çerez bandı.
   Böylece "Sepete ekle" çubuğunu, alt menüyü ve çerez bandını örtmez. Çekmece / pencere / tam ekran görsel açıkken ve
   mobilde çerez bandı açıkken gizlenir. Asistan düğmesi (storefront-ai.css) da bu değişkenin üstüne dizilir. */
body {
  --wa-size: 58px; --wa-gap: 28px; --wa-nav: 0px; --wa-sticky: 0px; --wa-cookie: 0px;
  --wa-bottom: calc(var(--wa-gap) + var(--wa-nav) + var(--wa-sticky) + var(--wa-cookie));
}
body.has-cookie-bar { --wa-cookie: var(--cookie-bar-offset, 0px); }
.wa-float-wrap { position: fixed; bottom: var(--wa-bottom); right: 28px; z-index: 1040; width: var(--wa-size); height: var(--wa-size); overflow: visible; transition: opacity var(--dur, .16s) var(--ease, ease); }
.wa-pulse-ring {
  position: absolute; top: 50%; left: 50%; width: var(--wa-size); height: var(--wa-size); margin: calc(var(--wa-size) / -2) 0 0 calc(var(--wa-size) / -2); border-radius: 50%;
  background: color-mix(in srgb, var(--color-whatsapp) 38%, transparent);
  animation: waPulse 2.8s ease-out infinite; pointer-events: none;
}
.wa-pulse-ring-2 { background: color-mix(in srgb, var(--color-whatsapp) 18%, transparent); animation-delay: 1.4s; }
.wa-float-btn {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: var(--wa-size); height: var(--wa-size); border-radius: 50%;
  background: var(--color-whatsapp); color: var(--color-on-whatsapp) !important; font-size: 1.75rem; text-decoration: none;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-whatsapp) 45%, transparent);
  animation: waFloat 3.5s ease-in-out infinite; transition: box-shadow .2s;
}
.wa-float-btn:hover {
  box-shadow: 0 6px 32px color-mix(in srgb, var(--color-whatsapp) 65%, transparent);
  animation-play-state: paused; transform: scale(1.1);
}
body.is-drawer-open .wa-float-wrap, body.pdp-noscroll .wa-float-wrap, body:has(dialog[open]) .wa-float-wrap, body:has(.mos-ai.is-open) .wa-float-wrap { opacity: 0; visibility: hidden; pointer-events: none; }
/* Mobil: 48px, alt menünün (varsa) ve yapışkan çubuğun üstünde; çerez bandı açıkken hiç görünmez */
@media (max-width: 767.98px) {
  body { --wa-size: 48px; --wa-gap: 12px; --wa-nav: calc(var(--bottomnav-h, 64px) + env(safe-area-inset-bottom)); }
  body.has-pdp-sticky { --wa-sticky: 72px; }
  /* Ürün detayda "sepete eklendi" bildirimi yapışkan çubuğun üstünde çıksın */
  .wa-float-wrap { right: var(--space-3, 12px); }
  .wa-float-btn { font-size: 1.4rem; }
  body.has-cookie-bar .wa-float-wrap { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Altbilgi: yüzen düğme sayfa sonunda bağlantıları örtmesin (mobil: alta pay; masaüstü: alt satırın sağında yer bırak) */
body:has(.wa-float-wrap) .site-footer { padding-bottom: calc(var(--space-4, 16px) + var(--wa-size) + var(--space-2, 8px)); }
@media (min-width: 992px) {
  body:has(.wa-float-wrap) .site-footer { padding-bottom: var(--space-4, 16px); }
  body:has(.wa-float-wrap) .site-footer__bottom, body:has(.wa-float-wrap) .site-footer__secure { padding-right: calc(var(--wa-size) + var(--wa-gap) + var(--space-3, 12px)); }
}
/* Sepet / ödeme yapışkan çubuğu (≤991): çubuğun üstünde dur */
@media (max-width: 991.98px) {
  body:has(#cartSticky), body.has-co-sticky { --wa-sticky: 72px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body:has(#cartSticky), body.has-co-sticky { --wa-nav: var(--bottomnav-h, 64px); }
}
@keyframes waFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes waPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }

/* Misafir favori/liste uyarısı: alt ortada küçük bildirim; alt menü, yapışkan çubuk ve çerez bandının üstünde (T-153) */
.mos-login-prompt {
  position: fixed; z-index: var(--z-toast, 1090); left: 50%; transform: translateX(-50%);
  bottom: calc(var(--wa-nav, 0px) + var(--wa-sticky, 0px) + var(--wa-cookie, 0px) + env(safe-area-inset-bottom) + var(--space-4, 16px));
  display: flex; align-items: center; gap: var(--space-3, 12px); width: max-content; max-width: calc(100vw - 2 * var(--gutter, 16px));
  padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm, .875rem); animation: mosPromptIn var(--dur-slow, .28s) var(--ease, ease);
}
.mos-login-prompt__ic { color: var(--color-danger-text); font-size: 1.25rem; flex: none; }
.mos-login-prompt__text { font-weight: 600; min-width: 0; }
.mos-login-prompt__go { flex: none; min-height: 40px; }
.mos-login-prompt__x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--color-muted); cursor: pointer; }
.mos-login-prompt__x:hover { background: var(--color-bg); color: var(--color-text); }
.mos-login-prompt__x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@keyframes mosPromptIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .mos-login-prompt { animation: none; } }

/* Kargo takip bileşeni (Views/Shared/Components/CustomerShipmentTimeline) */
.shipment-timeline { margin-bottom: var(--space-3, 12px); }
.shipment-timeline__title { display: flex; align-items: center; gap: var(--space-2, 8px); margin: 0; font-size: var(--fs-md, 1rem); font-weight: 700; }
.shipment-timeline__meta { margin: 0; }
.shipment-timeline__track { color: var(--color-text); user-select: all; }
.shipment-timeline__list { list-style: none; margin: 0; padding: 0; }
.shipment-timeline__item { display: flex; gap: var(--space-2, 8px); margin-bottom: var(--space-2, 8px); }
.shipment-timeline__item > i { margin-top: 4px; }

/* T-131 #8: reCAPTCHA gecikmeli yüklenir; widget gelince sayfa zıplamasın diye yer ayrılır */
.g-recaptcha { min-height: 78px; }
/* Henüz yüklenmediyse boşluk açıklayıcı bir yer tutucu olur; yüklenemezse (T-154) kutu tamamen çöker ve yedek mesaj gösterilir */
.g-recaptcha:empty::before {
  content: "Güvenlik doğrulaması, formu doldurmaya başladığınızda burada görünür.";
  display: flex; align-items: center; min-height: 78px; padding: 0 var(--space-4, 16px);
  border: 1px dashed var(--color-border-input); border-radius: var(--radius-md, 12px);
  color: var(--color-muted); font-size: var(--fs-sm, .875rem);
}
.g-recaptcha.is-failed { display: none; min-height: 0; }
.rc-fallback { align-items: flex-start; }
.rc-fallback__links { margin-top: var(--space-1, 4px); font-weight: 600; }
.rc-fallback__links a { color: var(--color-primary-text); text-decoration: underline; }
.rc-fallback__retry { margin-top: var(--space-2, 8px); }

/* Vitrin bildirimi (toastr) — "Sepete eklendi" kartıyla (header.css .cart-toast) aynı dil: beyaz kart, yuvarlak köşe, tür rengi simge + ince tint.
   Konum: header'ın ALTINDA (üst menü ikonlarını örtmez; --toast-top değerini toast-guard.js sticky header'ın alt kenarından yazar), mobilde alt menünün üstünde.
   toastr kendi PNG simgesini !important verdiği için background-image:none !important burada kaçınılmaz. */
#toast-container.toast-top-right {
  z-index: var(--z-toast, 1090);
  top: var(--toast-top, calc(var(--header-h-condensed, 56px) + var(--catbar-h, 48px) + var(--space-3, 12px)));
  right: max(var(--gutter, 16px), calc((100vw - var(--container-max, 1320px)) / 2 + var(--gutter, 16px)));
}
#toast-container > .toast {
  width: min(360px, calc(100vw - 2 * var(--gutter, 16px)));
  margin: 0 0 var(--space-2, 8px);
  padding: 14px 40px 14px 54px;
  min-height: 56px;
  display: flex; flex-direction: column; justify-content: center;
  background-color: var(--color-surface); background-image: none !important;
  color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg); opacity: 1;
  font-family: var(--font-body); font-size: var(--fs-sm, .875rem); line-height: 1.4;
}
#toast-container > .toast:hover { box-shadow: var(--shadow-lg); opacity: 1; }
#toast-container > .toast::before {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: "bootstrap-icons"; font-size: 24px; line-height: 1; font-weight: 400;
}
#toast-container .toast-title { font-weight: 700; margin-bottom: 2px; }
#toast-container .toast-message { color: inherit; font-weight: 600; overflow-wrap: anywhere; }
#toast-container .toast-message a { color: var(--color-primary-text); text-decoration: underline; }
#toast-container .toast-close-button {
  position: absolute; top: 8px; right: 8px; float: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 8px); color: var(--color-muted); font-size: 20px; text-shadow: none; opacity: 1;
}
#toast-container .toast-close-button:hover { background: var(--color-border); color: var(--color-text); opacity: 1; }
#toast-container .toast-progress { height: 3px; opacity: 1; background: color-mix(in srgb, currentColor 35%, transparent); }
#toast-container > .toast.toast-success { border-color: var(--color-success-border, var(--color-border)); background-color: color-mix(in srgb, var(--color-success-text) 7%, var(--color-surface)); color: var(--color-success-text); }
#toast-container > .toast.toast-success::before { content: "\f26a"; }
#toast-container > .toast.toast-error { border-color: var(--color-danger-text); background-color: color-mix(in srgb, var(--color-danger-text) 7%, var(--color-surface)); color: var(--color-danger-text); }
#toast-container > .toast.toast-error::before { content: "\f622"; }
#toast-container > .toast.toast-warning { border-color: var(--color-warning-text); background-color: color-mix(in srgb, var(--color-warning-text) 8%, var(--color-surface)); color: var(--color-warning-text); }
#toast-container > .toast.toast-warning::before { content: "\f33a"; }
#toast-container > .toast.toast-info { border-color: var(--color-info-border, var(--color-border)); background-color: color-mix(in srgb, var(--color-info-text) 7%, var(--color-surface)); color: var(--color-info-text); }
#toast-container > .toast.toast-info::before { content: "\f430"; }

/* Mobil (<768): tüm bildirimler ÜSTTE, header'ın hemen altında (patron 2026-10-21: altta olmaz); kenarlardan 12px */
@media (max-width: 767.98px) {
  #toast-container.toast-top-right {
    top: var(--toast-top, calc(var(--header-h-mobile, 56px) + 8px)); left: 12px; right: 12px; bottom: auto;
  }
  #toast-container.toast-top-right > .toast { width: auto; max-width: none; }
}

/* T-168: masaüstünde site daha geniş, yanlarda az boşluk (patron 2026-10-21). Tek ayar: --container-max */
:root { --container-max: 1520px; }
@media (min-width: 1400px) {
  .container, .container-lg, .container-xl, .container-xxl { max-width: var(--container-max); padding-inline: 24px; }
}
main .mos-page, .listing.mos-page { max-width: var(--container-max); }

/* Uygulamayı yükle kartı + iPhone yardımı (patron 2026-10-21; davranış pwa-install.js). Bildirimlerle aynı yerde: header'ın altında. */
.pwa-card { position: fixed; z-index: var(--z-toast, 1090); top: var(--toast-top, calc(var(--header-h-mobile, 56px) + 8px)); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.pwa-card[hidden] { display: none; }
@media (min-width: 768px) { .pwa-card { left: auto; right: max(var(--gutter, 16px), calc((100vw - var(--container-max, 1520px)) / 2 + var(--gutter, 16px))); width: 380px; } }
.pwa-card__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-btn); }
.pwa-card__text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pwa-card__text b { font-size: var(--fs-sm, .875rem); color: var(--color-text); }
.pwa-card__text span { font-size: .8125rem; color: var(--color-muted); }
.pwa-card__x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--color-muted); cursor: pointer; }
.pwa-help { max-width: min(92vw, 380px); border: 0; border-radius: var(--radius-lg, 18px); padding: var(--space-5, 20px); box-shadow: var(--shadow-lg); }
.pwa-help::backdrop { background: rgb(0 0 0 / .45); }
.pwa-help h2 { margin: 0 0 var(--space-3, 12px); font-size: 1.125rem; }
.pwa-help ol { margin: 0 0 var(--space-4, 16px); padding-left: 1.2em; display: grid; gap: 8px; }
.pwa-help .mos-btn { width: 100%; }
.oc__install { display: flex; align-items: center; gap: var(--space-2, 8px); width: 100%; min-height: 44px; margin-top: var(--space-3, 12px); padding: 0 var(--space-3, 12px); border: 1px dashed var(--color-primary); border-radius: var(--radius-btn); background: var(--color-primary-tint); color: var(--color-primary-text); font: inherit; font-weight: 700; cursor: pointer; }
.oc__install[hidden] { display: none; }