/*
 * Site-next bildirim dropdown stilleri.
 *
 * Tarihçe: bu kurallar daha önce resources/views/site-next/partials/notification.blade.php
 * içinde inline <style> bloklarındaydı. "auth-free main page" refactor'üyle (commit
 * 2c87ca38) HTML üretimi sn-page-bootstrap.js'e taşındı; partial silindi, ama CSS'i
 * hiçbir bundle'a taşınmamıştı. Bu yüzden bildirim çanına tıklayınca dropdown HTML'i
 * DOM'a girip [hidden] çıkıyor, fakat görünmüyordu (modal-layout wrapper'ı `contain:size`
 * + sıfır boyutla bottom:0'da kalıyor, popup-modal_root'un translate var'ı modalı
 * viewport dışına ötelüyordu).
 *
 * Dosya app.blade.php tarafından sn-layout-assets üzerinden yüklenir.
 */

/* === BetConstruct popup-modal kuralları (notification.blade.php'den taşındı) === */
.popup-modal_root-0y296 {
  width: var(--size-popover-desktop-width);
  max-height: min(
    calc(100% - var(--modal-margin-desktop) * 2),
    var(--size-modal-desktop-height-max)
  );
  flex-direction: column;
  animation: 0.3s forwards popup-modal_appear-0y296;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

@supports (translate: 0 0) {
  .popup-modal_root-0y296 {
    translate: calc(1px * var(--v926c7402)) calc(1px * var(--v926c7400));
  }
}

@supports not (translate: 0 0) {
  .popup-modal_root-0y296 {
    transform: translate(
      calc(1px * var(--v926c7402)),
      calc(1px * var(--v926c7400))
    );
  }
}

.popup-modal_root-0y296.popup-modal_preopened-0y296 {
  animation-name: none;
}

.popup-modal_root-0y296.popup-modal_closing-0y296 {
  animation: 0.15s forwards popup-modal_disappear-0y296;
}

.popup-modal_root-0y296[data-placement^="bottom"] {
  transform-origin: calc(1px * var(--v34056637)) top;
}

.popup-modal_root-0y296[data-placement^="top"] {
  transform-origin: calc(1px * var(--v34056637)) bottom;
}

.popup-modal_root-0y296[data-placement^="left"] {
  transform-origin: right calc(1px * var(--v35ba3ed6));
}

.popup-modal_root-0y296[data-placement^="right"] {
  transform-origin: left calc(1px * var(--v35ba3ed6));
}

.popup-modal_content-0y296 {
  border-radius: var(--rounding-component-popover);
  background-color: var(--v3a9250f2);
  box-shadow: var(--box-shadow-popover);
  flex-direction: column;
  display: flex;
}

.popup-modal_content-0y296.popup-modal_scrollable-0y296 {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: contain;
  overflow: hidden auto;
}

.popup-modal_content-0y296.popup-modal_scrollable-0y296::-webkit-scrollbar {
  display: none;
}

.popup-modal_content-0y296 > * {
  flex: none;
}

.popup-modal_arrow-0y296 {
  fill: var(--v3a9250f2);
  transform: translate(
    calc(1px * var(--v34056637)),
    calc(1px * var(--v35ba3ed6))
  );
  position: absolute;
}

.popup-modal_arrow-0y296 path {
  transition: transform 0.5s;
}

.popup-modal_arrow-0y296[data-placement^="bottom"] {
  height: calc(1px * var(--v2c98be20));
  aspect-ratio: var(--v3a078b33);
  bottom: 100%;
}

.popup-modal_arrow-0y296.popup-modal_collapsed-0y296[data-placement^="bottom"]
  path {
  transform: translateY(calc(1px * var(--v2c98be20)));
}

.popup-modal_arrow-0y296[data-placement^="top"] {
  height: calc(1px * var(--v2c98be20));
  aspect-ratio: var(--v3a078b33);
  top: 100%;
}

.popup-modal_arrow-0y296[data-placement^="top"] g {
  transform: matrix(-1, 0, 0, -1, 1, 1);
}

.popup-modal_arrow-0y296[data-placement^="left"] {
  width: calc(1px * var(--v2c98be20));
  aspect-ratio: calc(1 / var(--v3a078b33));
  left: 100%;
}

.popup-modal_arrow-0y296[data-placement^="left"] g {
  transform: matrix(0, 1, -1, 0, 1, 0);
}

.popup-modal_arrow-0y296[data-placement^="right"] {
  width: calc(1px * var(--v2c98be20));
  aspect-ratio: calc(1 / var(--v3a078b33));
  right: 100%;
}

.popup-modal_arrow-0y296[data-placement^="right"] g {
  transform: matrix(0, -1, 1, 0, 0, 1);
}

[dir="rtl"] .popup-modal_arrow-0y296[data-placement$="end"] {
  inset-inline-end: 0;
}

@keyframes popup-modal_appear-0y296 {
  0% {
    scale: 0.97;
  }

  40% {
    scale: 1.02;
  }
}

@keyframes popup-modal_disappear-0y296 {
  to {
    opacity: 0;
    scale: 0.97;
  }
}

/* === Notification card === */
.notification-card_root-b67Li {
  box-shadow: 0 1px 0 var(--notification-card-color-border-bottom);
  gap: var(--spacing-16);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.notification-card_body-b67Li {
  grid-template-columns: 1fr min-content;
  grid-template-areas:
    "date .  new-badge"
    "title .  goto"
    "summary summary goto"
    "expand-summary-btn .  goto"
    "actions actions actions";
  padding-block-end: var(--notification-card-padding-bottom);
  display: grid;
}

.notification-card_newBadge-b67Li {
  grid-area: new-badge;
  position: absolute;
  inset-block-start: var(--notification-card-badge-margin);
  inset-inline-end: var(--notification-card-badge-margin);
}

.notification-card_date-b67Li {
  color: var(--color-content-base-secondary);
  font-family: var(--font-caption-font-family);
  font-size: var(--font-caption-s-regular-font-size);
  font-weight: var(--font-caption-s-regular-font-weight);
  letter-spacing: var(--font-caption-s-regular-letter-spacing);
  line-height: var(--font-caption-s-regular-line-height);
  grid-area: date;
}

.notification-card_title-b67Li {
  margin-top: var(--spacing-4);
  color: var(--color-content-base-primary);
  font-family: var(--font-display-body-font-family);
  font-size: var(--font-display-body-semibold-font-size);
  font-weight: var(--font-display-body-semibold-font-weight);
  letter-spacing: var(--font-display-body-semibold-letter-spacing);
  line-height: var(--font-display-body-semibold-line-height);
  grid-area: title;
}

.notification-card_summaryWrapper-b67Li {
  margin-top: var(--spacing-4);
  grid-area: summary;
  display: grid;
  position: relative;
}

.notification-card_summaryWrapper-b67Li > * {
  grid-area: 1 / 1;
}

.notification-card_summary-b67Li {
  color: var(--color-content-base-secondary);
  word-break: break-word;
  font-family: var(--font-body-font-family);
  font-size: var(--font-body-regular-font-size);
  font-weight: var(--font-body-regular-font-weight);
  letter-spacing: var(--font-body-regular-letter-spacing);
  line-height: var(--font-body-regular-line-height);
}

.notification-card_summary-b67Li.notification-card_hidden-b67Li {
  visibility: hidden;
  position: absolute;
}

.notification-card_expandSummaryBtn-b67Li {
  margin-top: var(--spacing-4);
  color: var(--content-button-accent-color-fg-default);
  grid-area: expand-summary-btn;
}

.notification-card_coverImage-b67Li {
  border-radius: var(--notification-card-rounding-image);
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  max-width: 100%;
}

.notification-card_hasCoverImage-b67Li .notification-card_newBadge-b67Li {
  inset-block-start: var(--spacing-12);
  inset-inline-end: var(--spacing-12);
}

.notification-card_goto-b67Li {
  color: var(--color-content-base-secondary);
  grid-area: goto;
  align-items: center;
  padding-inline-start: var(--spacing-8);
  display: flex;
}

.notification-card_actions-b67Li {
  margin-top: var(--spacing-12);
  gap: var(--spacing-12);
  flex-direction: column;
  grid-area: actions;
  display: flex;
}

.notification-card_variant-1-b67Li.notification-card_root-b67Li {
  border-radius: var(--notification-card-rounding);
  background-color: var(--notification-card-color-bg);
}

.notification-card_variant-1-b67Li .notification-card_body-b67Li {
  padding-inline: var(--notification-card-padding-horizontal);
}

:is(.notification-card_variant-1-b67Li .notification-card_body-b67Li):first-child {
  padding-block-start: var(--notification-card-padding-top);
}

.notification-card_variant-2-b67Li.notification-card_root-b67Li:last-child
  .notification-card_body-b67Li {
  padding-block-end: 0;
}

.notification-card_variant-2-b67Li.notification-card_root-b67Li:not(:last-child) {
  border-bottom: 1px solid var(--notification-card-color-border-bottom);
}

/* === Notifications layout === */
.notifications_content-W53OO {
  min-height: var(--size-popover-notifications-height-min);
  padding: 0 var(--spacing-16) var(--spacing-16);
  gap: var(--spacing-16);
  flex-direction: column;
  flex-grow: 1;
  display: flex;
}

.notifications_tabsWrapper-W53OO {
  padding: 0 var(--spacing-16) var(--spacing-12);
}

.notifications_chips-W53OO {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-20);
}

.notifications_center-W53OO {
  justify-content: center;
  align-items: center;
}

.notifications_observer-W53OO {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
}

/* === Empty state === */
.result-empty_root-v5dJs {
  padding-bottom: var(--spacing-24);
  color: var(--color-content-base-secondary);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  flex-direction: column;
  display: flex;
}

@media (min-width: 1024px) {
  .result-empty_root-v5dJs {
    gap: var(--spacing-12);
  }
}

.result-empty_text-v5dJs {
  margin-bottom: var(--spacing-8);
  align-items: center;
  gap: var(--spacing-4);
  text-align: center;
  flex-direction: column;
  display: flex;
}

@media (min-width: 1024px) {
  .result-empty_text-v5dJs {
    margin-bottom: var(--spacing-4);
  }
}

.result-empty_title-v5dJs {
  font-family: var(--font-headline-font-family);
  font-size: var(--font-headline-h3-mobile-font-size);
  font-weight: var(--font-headline-h3-mobile-font-weight);
  letter-spacing: var(--font-headline-h3-mobile-letter-spacing);
  line-height: var(--font-headline-h3-mobile-line-height);
  text-transform: var(--font-headline-text-case);
  text-wrap: balance;
  white-space-collapse: preserve-breaks;
  color: var(--color-content-base-primary);
}

@media (min-width: 1024px) {
  .result-empty_title-v5dJs {
    font-size: var(--font-headline-h3-desktop-font-size);
    font-weight: var(--font-headline-h3-desktop-font-weight);
    letter-spacing: var(--font-headline-h3-desktop-letter-spacing);
    line-height: var(--font-headline-h3-desktop-line-height);
  }
}

.result-empty_description-v5dJs {
  font-family: var(--font-body-font-family);
  font-size: var(--font-body-regular-font-size);
  font-weight: var(--font-body-regular-font-weight);
  letter-spacing: var(--font-body-regular-letter-spacing);
  line-height: var(--font-body-regular-line-height);
  white-space: pre-line;
}

/*
 * === Override katmanı: dropdown'u navbar'a sabitle ===
 *
 * Üstteki .popup-modal_root-0y296 ve .modal-layout_wrapper-C9j8A kuralları viewport
 * için tasarlandığı için (fixed + huge translate var'ları + contain:size) dropdown
 * çekilince binlerce px kayıyor veya sıfır boyutlu kalıyordu. Burada bell trigger
 * yanına demirletmek için tüm pozisyon/translate kuralları sıfırlanır.
 */
#site-next-notification-dropdown.sn-notification-dropdown-root {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-8, 8px);
  z-index: calc(var(--z-index-header, 140) + 5);
  pointer-events: auto;
  box-sizing: border-box;
}

#site-next-notification-dropdown .modal-layout_wrapper-C9j8A {
  position: relative !important;
  contain: layout style !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  min-height: 0;
}

#site-next-notification-dropdown .popup-modal_root-0y296 {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  translate: none !important;
  transform: none !important;
  animation: none !important;
}

#site-next-notification-dropdown .popup-modal_content-0y296 {
  overflow-y: auto;
}

/* Liste doluyken içeriği üstten hizala; boşken .notifications_center-W53OO ile ortada kalır */
#site-next-notification-dropdown
  .notifications_content-W53OO[data-sn-has-items="1"] {
  justify-content: start;
  align-items: start;
}

#site-next-notification-dropdown
  .notifications_content-W53OO[data-sn-has-items="1"]
  [data-sn-notification-list] {
  width: 100%;
  align-self: stretch;
}

/*
 * sn-wallet-notify-wrap → bildirim çanını saran kapsül. Dropdown'un buna göre
 * absolute pozisyonlanması için relative olmak zorunda.
 *
 * z-index: header popover katmanı (modalların altında, header içeriğinin üstünde).
 */
.sn-wallet-notify-wrap {
  position: relative;
}