/* =========================================================
   GLOBAL NOTIFICATION BELL
========================================================= */

.global-notif-bell {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: var(--surface);
  color: var(--ink);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.global-notif-bell svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-notif-bell:active {
  
transform: translateY(1px);
}

.global-notif-bell--mobile-header {
  background: #fff;
}


/* UNREAD BADGE */

.global-notif-bell__badge {
  position: absolute;

  top: -4px;
  right: -4px;

  min-width: 17px;
  height: 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 4px;

  border: 2px solid #fff;
  border-radius: 999px;

  background: #d74747;
  color: #fff;

  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
}


/* hidden contract */

.global-notif-bell[hidden],
.global-notif-bell__badge[hidden] {
  display: none !important;
}
/* =========================================================
   GLOBAL NOTIFICATION BACKDROP
========================================================= */

.global-notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 198;

  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(2px);
}

.global-notif-backdrop[hidden] {
  display: none !important;
}


/* =========================================================
   NOTIFICATION SHEET
========================================================= */

.notification-sheet {
  position: fixed;

  left: 50%;
  bottom: 0;

  z-index: 199;

  width: min(100%, 480px);
  max-height: min(680px, 92dvh);

  display: flex;
  flex-direction: column;

  transform: translateX(-50%);

  overflow: hidden;

  border-radius: 22px 22px 0 0;

  background: #fff;

  box-shadow:
    0 -16px 44px rgba(23, 33, 43, .16);
}

.notification-sheet[hidden] {
  display: none !important;
}


/* HANDLE */

.notification-sheet__handle {
  flex: 0 0 auto;

  height: 14px;

  display: grid;
  place-items: center;

  background: #fff;
}

.notification-sheet__handle span {
  width: 38px;
  height: 4px;

  display: block;

  border-radius: 999px;

  background: #d8dddf;
}


/* =========================================================
   STICKY HEADER
========================================================= */

.notification-sheet__header {
  position: sticky;
  top: 0;
  z-index: 5;

  flex: 0 0 auto;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 15px 12px;

  border-bottom: 1px solid var(--line);

  background: rgba(255, 255, 255, .98);

  backdrop-filter: blur(10px);
}

.notification-sheet__heading {
  min-width: 0;
}

.notification-sheet__eyebrow {
  display: block;

  margin-bottom: 2px;

  color: var(--muted);

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
}

.notification-sheet__title {
  margin: 0;

  color: var(--ink);

  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -.02em;
}


/* CLOSE */

.notification-sheet__close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 10px;

  background: var(--surface);
  color: var(--ink);

  cursor: pointer;
}

.notification-sheet__close svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   ONLY SCROLL AREA
========================================================= */

.notification-sheet__scroll {
  min-height: 0;
  flex: 1 1 auto;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  padding:
    11px
    14px
    calc(18px + env(safe-area-inset-bottom));
}
/* =========================================================
   NOTIFICATION LIST
========================================================= */

.notification-list {
  display: grid;
  gap: 7px;
}


/* ITEM */

.notification-item {
  display: grid;

  grid-template-columns:
    6px
    minmax(0, 1fr)
    34px;

  align-items: flex-start;

  gap: 8px;

  padding: 11px 9px;

  border: 1px solid var(--line);
  border-radius: 13px;

  background: #fff;
}

.notification-item.is-unread {
  border-color: rgba(14, 165, 164, .22);
  background: #fbffff;
}


/* DOT */

.notification-item__dot {
  width: 6px;
  height: 6px;

  margin-top: 5px;

  border-radius: 50%;

  background: transparent;
}

.notification-item.is-unread
.notification-item__dot {
  background: var(--brand);
}


/* BODY */

.notification-item__body {
  min-width: 0;
}

.notification-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 8px;
}

.notification-item__title {
  min-width: 0;

  color: var(--ink);

  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
}

.notification-item__time {
  flex: 0 0 auto;

  color: var(--muted);

  font-size: 7.5px;
  line-height: 1.2;

  white-space: nowrap;
}

.notification-item__message {
  margin: 4px 0 0;

  color: var(--muted);

  font-size: 9px;
  line-height: 1.45;
}

.notification-item__channel {
  display: inline-block;

  margin-top: 5px;

  color: var(--brand-dark);

  font-size: 7.5px;
  font-weight: 700;
  line-height: 1.2;
}


/* DELETE */

.notification-item__delete {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: var(--surface);
  color: var(--muted);

  cursor: pointer;
}

/* TABLET KATMANI (≥481px): bildirim merkezi sheet'i içerik kolonuyla (760px) hizalanır.
   Bu dosya anasayfa/dizin/isletme/hesabim/isletme-kayit sayfalarında ortaktır.
   Telefon (≤480px) görünümü DEĞİŞMEZ. */
@media (min-width: 481px) {
  .notification-sheet {
    width: min(760px, 100%);
  }
}

.notification-item__delete:hover,
.notification-item__delete:focus-visible {
  border-color: #e7c9c4;

  background: #fbeeec;
  color: #c0392b;
}

.notification-item__delete svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-item__delete:active {
  background: #f4f7f8;
}

/* LISTE TEMİZLEME (Tümünü temizle) */

.notification-sheet__clear {
  margin-left: auto;
  margin-right: 6px;
  align-self: center;

  padding: 7px 11px;

  border: 1px solid var(--line);
  border-radius: 999px;

  background: #fff;
  color: var(--brand-dark);

  font-family: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;

  cursor: pointer;
}

.notification-sheet__clear:active {
  background: var(--surface);
}
/* =========================================================
   EMPTY STATE
========================================================= */

.notification-empty {
  min-height: 135px;

  display: grid;
  place-items: center;
  align-content: center;

  padding: 20px;

  text-align: center;
}

.notification-empty[hidden] {
  display: none !important;
}

.notification-empty__icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  margin-bottom: 8px;

  border-radius: 12px;

  background: var(--brand-soft);
  color: var(--brand-dark);
}

.notification-empty__icon svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-empty strong {
  color: var(--ink);

  font-size: 11px;
  font-weight: 800;
}

.notification-empty > span:last-child {
  max-width: 240px;

  margin-top: 4px;

  color: var(--muted);

  font-size: 8.5px;
  line-height: 1.45;
}
/* =========================================================
   NOTIFICATION PREFERENCES
========================================================= */

.np-prefs {
  margin-top: 14px;
  padding-top: 14px;

  border-top: 1px solid var(--line);
}

.np-prefs__head {
  margin-bottom: 9px;
}

.np-prefs__eyebrow {
  display: block;

  margin-bottom: 2px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 750;
}

.np-prefs__title {
  margin: 0;

  color: var(--ink);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.np-prefs__list {
  display: grid;
  gap: 7px;
}


/* PREF ROW */

.np-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 11px;

  padding: 11px;

  border: 1px solid var(--line);
  border-radius: 13px;

  background: #fff;

  cursor: pointer;
}

.np-pref-row__content {
  min-width: 0;

  flex: 1;

  display: grid;
  gap: 3px;
}

.np-pref-row__content strong {
  color: var(--ink);

  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
}

.np-pref-row__content span {
  color: var(--muted);

  font-size: 8.5px;
  line-height: 1.4;
}


/* =========================================================
   SWITCH
========================================================= */

.np-switch {
  position: relative;

  flex: 0 0 auto;

  margin-top: 1px;
}

.np-switch__input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.np-switch__track {
  position: relative;

  width: 42px;
  height: 24px;

  display: block;

  border-radius: 999px;

  background: #dfe4e6;

  transition: background .18s ease;
}

.np-switch__thumb {
  position: absolute;

  top: 3px;
  left: 3px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 2px 5px rgba(23, 33, 43, .16);

  transition: transform .18s ease;
}

.np-switch__input:checked
+ .np-switch__track {
  background: var(--brand);
}

.np-switch__input:checked
+ .np-switch__track
.np-switch__thumb {
  transform: translateX(18px);
}


/* =========================================================
   STATUS
========================================================= */

.np-prefs__status {
  margin-top: 8px;

  color: var(--brand-dark);

  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.35;
}

.np-prefs__status.is-warning {
  color: #9b6b13;
}

.np-prefs__status.is-error {
  color: #ad4141;
}

.np-prefs__status[hidden] {
  display: none !important;
}


/* =========================================================
   NOTE
========================================================= */

.np-prefs__note {
  display: flex;
  align-items: flex-start;

  gap: 7px;

  margin-top: 9px;
  padding: 9px 10px;

  border-radius: 11px;

  background: var(--surface);
  color: var(--muted);
}

.np-prefs__note svg {
  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  margin-top: 1px;

  fill: none;
  stroke: var(--brand-dark);

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-prefs__note span {
  font-size: 8px;
  line-height: 1.4;
}
/* =========================================================
   PUSH HINT
========================================================= */

.np-push-hint {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

  margin-top: 9px;
  padding: 10px;

  border:
    1px solid
    rgba(14, 165, 164, .18);

  border-radius: 13px;

  background: var(--brand-soft);
}

.np-push-hint[hidden] {
  display: none !important;
}

.np-push-hint__icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background: #fff;
  color: var(--brand-dark);
}

.np-push-hint__icon svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-push-hint__content {
  min-width: 0;

  display: grid;
  gap: 2px;
}

.np-push-hint__content strong {
  color: var(--ink);

  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.25;
}

.np-push-hint__content span {
  color: var(--muted);

  font-size: 8px;
  line-height: 1.35;
}

.np-push-hint__action {
  min-height: 31px;

  padding: 7px 9px;

  border: 0;
  border-radius: 9px;

  background: var(--brand);
  color: #fff;

  font: 
inherit;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;
}

@media (max-width: 360px) {
  .np-push-hint {
    grid-template-columns:
      32px
      minmax(0, 1fr);
  }

  .np-push-hint__action {
    grid-column: 2;

    width: max-content;
  }
}