/* AKTUR PARK AKTİF SON DÜZELTMELERİ
 * Ana stillerden ayrıldı; yükleme sırası korunmalıdır.
 */

/* OPIS_CARD_WIDE_MODAL_V1 */
.modal-card:has(.opis-log-investigation) {
  width: min(1400px, 94vw);
  max-width: min(1400px, 94vw);
  max-height: 94vh;
  padding: 28px;
}

.modal-card:has(.opis-log-investigation) #modalContent {
  width: 100%;
  min-width: 0;
}

.modal-card:has(.opis-log-investigation)
.opis-log-investigation {
  width: 100%;
  min-width: 0;
}

.modal-card:has(.opis-log-investigation)
.opis-log-timeline {
  width: 100%;
  min-width: 1100px;
}

@media (max-width: 760px) {
  .modal-card:has(.opis-log-investigation) {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 18px 12px;
  }

  .modal-card:has(.opis-log-investigation)
  .opis-log-investigation-summary {
    grid-template-columns: 1fr 1fr;
  }
}

/* OPIS_CARD_SCROLL_FIX_V2 */
.modal-card:has(.opis-log-investigation) {
  box-sizing: border-box;
  height: 94vh;
  overflow: hidden;
}

.modal-card:has(.opis-log-investigation) #modalContent {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.modal-card:has(.opis-log-investigation)
.opis-log-investigation {
  height: 100%;
  min-height: 0;
  /* OPIS_INVESTIGATION_6_ROW_GRID_V1 */
  grid-template-rows:
    auto
    auto
    auto
    auto
    auto
    minmax(0, 1fr);
}

.modal-card:has(.opis-log-investigation)
.opis-log-timeline-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-bottom: 2px;
}

.opis-log-timeline thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
}

.opis-log-remaining-credit {
  color: #235f9a;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .modal-card:has(.opis-log-investigation) {
    height: calc(100vh - 16px);
  }
}

/* OPIS_REVIEWED_BLUE_CARD_V1 */
.opis-log-alert-blue {
  border-color: #4b8bd8;
  background: #eaf4ff;
  color: #174f8c;
}

.opis-log-alert-blue:hover {
  border-color: #236fbd;
  background: #dceeff;
}

.opis-log-alert-blue strong,
.opis-log-alert-blue span {
  color: #174f8c;
}

.opis-log-alert-blue small {
  color: #3974ad;
}

/* OPIS_MACHINE_CHIPS_FULL_ROW_V1 */
.modal-card:has(.opis-log-investigation)
.opis-log-machine-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 4px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  z-index: 4;
  background: #ffffff;
  scrollbar-width: thin;
}

.modal-card:has(.opis-log-investigation)
.opis-log-machine-chips span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.modal-card:has(.opis-log-investigation)
.opis-log-timeline-wrap {
  position: relative;
  z-index: 1;
  margin-top: 2px;
}


/* OPIS_CARD_RECONCILIATION_STYLES_V1 */
.opis-log-investigation-summary {
  overflow-x: auto;
  padding-bottom: 3px;
}

.opis-log-investigation-summary
.is-reconciliation-correct {
  border-color: #98dfb5;
  background: #eaf8f0;
  color: #23764a;
}

.opis-log-investigation-summary
.is-reconciliation-correct b {
  color: #168a4c;
}

.opis-log-investigation-summary
.is-reconciliation-incorrect {
  border-color: #f0aaa5;
  background: #fff0ef;
  color: #a1322b;
}

.opis-log-investigation-summary
.is-reconciliation-incorrect b {
  color: #c62828;
}

.opis-log-investigation-summary
.is-reconciliation-unavailable {
  background: #f2f3f6;
  color: #6b7080;
}

.opis-log-investigation-summary small {
  font-size: 11px;
  font-weight: 700;
}


/* OPIS_YELLOW_ERROR_CONTEXT_STYLES_V1 */
.opis-log-alert-yellow {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.opis-log-yellow-error-detail {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e7c94f;
  border-radius: 13px;
  background: #fff8d9;
  color: #655000;
}

.opis-log-yellow-error-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.opis-log-yellow-error-title > span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1cc35;
  color: #4f3d00;
  font-weight: 800;
}

.opis-log-yellow-error-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.opis-log-yellow-error-grid > span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(167, 129, 0, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
}

.opis-log-yellow-error-grid small {
  color: #78651d;
}

.opis-log-yellow-error-grid b {
  color: #493900;
}

@media (max-width: 760px) {
  .opis-log-yellow-error-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* OPIS_EQUAL_ALERT_CARDS_V1 */
.opis-log-alert-list {
  grid-auto-rows: 120px;
}

.opis-log-alert {
  box-sizing: border-box;
  min-width: 0;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  align-content: start;
  overflow: hidden;
}

.opis-log-alert > strong,
.opis-log-alert > span,
.opis-log-alert > small {
  min-width: 0;
  max-width: 100%;
}

.opis-log-alert > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opis-log-alert-yellow > span {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.opis-log-alert-yellow > small {
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* OPIS_RECONCILIATION_DARK_RED_CARD_V1 */
.opis-log-alert-dark-red {
  border-color: #7f1717;
  background: #d9a3a3;
  color: #5b0c0c;
}

.opis-log-alert-dark-red:hover,
.opis-log-alert-dark-red:focus-visible {
  border-color: #570909;
  background: #cc8c8c;
  transform: translateY(-1px);
}

.opis-log-alert-dark-red strong,
.opis-log-alert-dark-red span {
  color: #5b0c0c;
}

.opis-log-alert-dark-red small {
  color: #721919;
}

/* OPIS_RECHECK_ORANGE_UI_V1 */
.opis-reconciliation-recheck-button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #b45309;
  border-radius: 9px;
  background: #fff7ed;
  color: #9a3412;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.opis-reconciliation-recheck-button:hover {
  background: #ffedd5;
}

.opis-reconciliation-recheck-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.opis-log-investigation-summary
.is-reconciliation-opis-error {
  border-color: #f59e0b;
  background: #fff7ed;
  color: #9a3412;
}

.opis-log-investigation-summary
.is-reconciliation-opis-error b {
  color: #c2410c;
}

.opis-log-timeline tr.is-opis-error td {
  background: #ffedd5;
  color: #9a3412;
  border-top-color: #fdba74;
  border-bottom-color: #fdba74;
}

.opis-log-timeline tr.is-opis-error
.opis-log-remaining-credit {
  color: #c2410c;
  font-weight: 900;
}

/* OPIS_RECHECK_ORANGE_BOX_LAYOUT_V2 */
.opis-log-investigation-summary
.is-reconciliation-opis-error small {
  display: block;
  margin-top: 7px;
  color: #9a3412;
  font-weight: 700;
}

.opis-log-investigation-summary
.is-reconciliation-opis-error
.opis-error-count {
  font-size: 14px;
  font-weight: 800;
}


/* OPIS_SYSTEM_ERROR_ORANGE_CARD_V2 */
.opis-log-alert-orange {
  border-color: #ea580c;
  background: #ffedd5;
  color: #9a3412;
}

.opis-log-alert-orange:hover,
.opis-log-alert-orange:focus-visible {
  border-color: #c2410c;
  background: #fed7aa;
  transform: translateY(-1px);
}

.opis-log-alert-orange strong,
.opis-log-alert-orange span {
  color: #9a3412;
}

.opis-log-alert-orange small {
  color: #c2410c;
}


/* OPIS_LOG_MONITOR_MOBILE_CAROUSEL_V1 */
@media (max-width: 760px) {
  .opis-log-monitor-page {
    min-width: 0;
    gap: 12px;
  }

  .opis-log-monitor-head {
    gap: 10px;
  }

  /* Uzun açıklama yalnızca mobilde gizlenir. */
  .opis-log-monitor-head p {
    display: none;
  }

  .opis-log-monitor-head h1 {
    margin-bottom: 0;
  }

  .opis-log-monitor-actions button {
    min-height: 48px;
  }

  /* Son ve sonraki tarama yan yana. */
  .opis-log-monitor-meta {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  .opis-log-monitor-meta > span {
    box-sizing: border-box;
    min-width: 0;
    padding: 9px 8px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }

  .opis-log-monitor-meta > span b {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
  }

  .opis-log-monitor-meta > span:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  /* SERVER 1, 2 ve 3 yatay kaydırılır. */
  .opis-log-monitor-grid {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 12px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .opis-log-monitor-grid::-webkit-scrollbar {
    display: none;
  }

  .opis-log-monitor-loading,
  .opis-log-monitor-error {
    flex: 0 0 100%;
  }

  .opis-log-server-card {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: min(58dvh, 620px);
    min-height: 420px;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .opis-log-server-card > header,
  .opis-log-server-summary {
    flex: 0 0 auto;
  }

  /* Kart kayıtları kendi içinde dikey kayar. */
  .opis-log-alert-list {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .opis-log-clear,
  .opis-log-server-error {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}


/* DAILY_REPORT_HISTORY_MOBILE_SCROLL_FIX_V2 */
@media (max-width: 760px) {
  /*
   * TWA içinde body sabit kalır. Böylece pull-to-refresh
   * yeniden açılmaz. Gün Sonu sayfasını main-shell kaydırır.
   */
  body:has(#reportsPage:not(.hidden)) {
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .app-view:has(#reportsPage:not(.hidden)) {
    display: block !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-shell:has(#reportsPage:not(.hidden)) {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .main-shell:has(#reportsPage:not(.hidden)) .topbar {
    position: sticky;
    top: 0;
  }

  .workspace:has(#reportsPage:not(.hidden)) {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - 68px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 80px !important;
  }

  #reportsPage:not(.hidden) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #reportsPage .report-list-panel,
  #reportsPage .report-list {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* DAILY_REPORT_MOBILE_SINGLE_SCROLL_V3 */
@media (max-width: 760px) {
  html:has(#reportsPage:not(.hidden)) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: none;
  }

  body:has(#reportsPage:not(.hidden)) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .app-view:has(#reportsPage:not(.hidden)) {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-shell:has(#reportsPage:not(.hidden)) {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  .workspace:has(#reportsPage:not(.hidden)) {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - 68px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 90px !important;
  }

  #reportsPage:not(.hidden),
  #reportsPage .report-list-panel,
  #reportsPage .report-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y;
  }

  .main-shell:has(#reportsPage:not(.hidden)) .topbar {
    position: sticky;
    top: 0;
    z-index: 15;
  }
}


/* DAILY_REPORT_WORKSPACE_SCROLL_FIX_V4 */
@media (max-width: 760px) {
  /*
   * Mobil uygulamada yalnızca workspace kayar.
   * Body ve main-shell sabit kalır.
   */
  html:has(#reportsPage:not(.hidden)),
  body:has(#reportsPage:not(.hidden)) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .app-view:has(#reportsPage:not(.hidden)) {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-shell:has(#reportsPage:not(.hidden)) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .main-shell:has(#reportsPage:not(.hidden)) .topbar {
    position: relative !important;
    top: auto !important;
    flex: 0 0 68px !important;
    width: 100% !important;
    height: 68px !important;
  }

  .workspace:has(#reportsPage:not(.hidden)) {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 25px 15px 90px !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #reportsPage:not(.hidden) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #reportsPage .report-list-panel,
  #reportsPage .report-list {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* OPIS_CARD_REPORT_STYLES_V1 */
.opis-card-report-page {
  display: block;
}

.opis-card-report-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.opis-card-report-head h1 {
  margin: 8px 0;
  font-size: 2.35rem;
  letter-spacing: -.045em;
}

.opis-card-report-head p {
  margin: 0;
  color: var(--muted);
}

.opis-card-report-search {
  padding: 22px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(31,30,86,.055);
}

.opis-card-report-search > label {
  display: block;
  margin-bottom: 9px;
  color: #77788b;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.opis-card-report-search > small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .7rem;
}

.opis-card-report-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
}

.opis-card-report-controls input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid #dedfeb;
  border-radius: 13px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font-weight: 750;
  text-transform: uppercase;
}

.opis-card-report-controls input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(32,32,96,.08);
}

.opis-card-report-nfc-button {
  display: none;
}

.opis-card-report-welcome,
.opis-card-report-loading,
.opis-card-report-error,
.opis-card-report-no-movement {
  display: flex;
  min-height: 180px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  text-align: center;
  background: #fff;
}

.opis-card-report-welcome span,
.opis-card-report-loading span,
.opis-card-report-no-movement span {
  color: var(--muted);
}

.opis-card-report-error {
  border-color: #ffd0d5;
  color: #b51e35;
  background: #fff5f6;
}

.opis-card-report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.opis-card-report-summary article {
  display: flex;
  min-width: 0;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.opis-card-report-summary span {
  color: #898a99;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.opis-card-report-summary strong {
  overflow: hidden;
  margin-top: 8px;
  color: var(--navy);
  font-size: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opis-card-report-summary small {
  margin-top: 5px;
  color: var(--muted);
}

.opis-card-report-timeline-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(31,30,86,.055);
}

.opis-card-report-timeline-head {
  display: flex;
  min-height: 74px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.opis-card-report-timeline-head h2 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.opis-card-report-timeline-head span {
  color: var(--muted);
  font-size: .72rem;
}

.opis-card-report-timeline-head b {
  color: var(--navy);
  font-size: .75rem;
}

.opis-card-report-row {
  display: grid;
  grid-template-columns:
    minmax(160px, .8fr)
    minmax(220px, 1.3fr)
    minmax(130px, .7fr)
    minmax(130px, .7fr);
  min-height: 72px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 15px;
  background: #fff;
}

.opis-card-report-row:last-child {
  border-bottom: 0;
}

.opis-card-report-row.is-deposit {
  background: #eaf8f1;
  color: #126b4c;
}

.opis-card-report-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.opis-card-report-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opis-card-report-row span,
.opis-card-report-row small {
  color: var(--muted);
  font-size: .7rem;
}

.opis-card-report-row.is-deposit span,
.opis-card-report-row.is-deposit small {
  color: #3c8068;
}

.opis-card-report-row-amount,
.opis-card-report-row-balance {
  text-align: right;
}

@media (max-width: 760px) {
  .opis-card-report-page {
    padding-bottom: 50px;
  }

  .opis-card-report-head h1 {
    font-size: 1.85rem;
  }

  .opis-card-report-head p {
    font-size: .82rem;
    line-height: 1.45;
  }

  .opis-card-report-search {
    padding: 14px;
    border-radius: 16px;
  }

  .opis-card-report-controls {
    grid-template-columns: 1fr 1fr;
  }

  .opis-card-report-controls input {
    grid-column: 1 / -1;
  }

  .opis-card-report-nfc-button {
    display: inline-flex;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #238264;
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    color: #126b4c;
    background: #e8f7f1;
    font-weight: 800;
  }

  .opis-card-report-controls .primary-button {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    font-size: .75rem;
  }

  .opis-card-report-summary {
    grid-template-columns: 1fr 1fr;
  }

  .opis-card-report-summary article {
    min-height: 94px;
    padding: 13px;
  }

  .opis-card-report-summary strong {
    font-size: 1rem;
  }

  .opis-card-report-timeline-head {
    padding: 13px;
  }

  .opis-card-report-row {
    grid-template-columns: 1fr auto;
    padding: 13px;
    gap: 9px 12px;
  }

  .opis-card-report-row-time {
    grid-column: 1;
  }

  .opis-card-report-row-place {
    grid-column: 1;
  }

  .opis-card-report-row-amount {
    grid-column: 2;
    grid-row: 1;
  }

  .opis-card-report-row-balance {
    grid-column: 2;
    grid-row: 2;
  }
}


/* OPIS_CARD_REPORT_MOBILE_LAYOUT_V2 */
.opis-card-report-active-number {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  body:has(#opisCardReportPage:not(.hidden)) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }

  body:has(#opisCardReportPage:not(.hidden))
  .workspace {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #opisCardReportPage {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 92px) !important;
    max-height: none !important;
    padding-bottom: 70px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  #opisCardReportPage.hidden {
    display: none !important;
  }

  .opis-card-report-head {
    margin-bottom: 18px;
  }

  .opis-card-report-head h1 {
    margin-bottom: 2px;
  }

  .opis-card-report-active-number {
    margin-top: 5px !important;
    color: var(--navy) !important;
    font-size: 1.05rem;
  }

  .opis-card-report-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .opis-card-report-summary article {
    min-height: 104px;
    padding: 15px;
  }

  .opis-card-report-summary
  .opis-card-report-last-machine {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns:
      minmax(0, 1fr) auto;
    min-height: 68px;
    padding: 12px 15px;
    align-items: center;
    column-gap: 12px;
  }

  .opis-card-report-last-machine > span {
    grid-column: 1 / -1;
    margin-bottom: 3px;
  }

  .opis-card-report-last-machine > strong {
    grid-column: 1;
    margin-top: 0;
    font-size: 1.05rem;
  }

  .opis-card-report-last-machine > small {
    grid-column: 2;
    margin-top: 0;
    text-align: right;
    white-space: nowrap;
  }

  .opis-card-report-result,
  .opis-card-report-timeline-panel,
  .opis-card-report-timeline {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }
}

/* OPIS_CARD_REPORT_TIMELINE_COLORS_V3 */
.opis-card-report-row.is-previous-visit {
  border-color: #e1ad00;
  background: #ffd43b;
  color: #3e3100;
}

.opis-card-report-row.is-before-deposit {
  background: #fff8c9;
  color: #594c00;
}

.opis-card-report-row.is-after-deposit {
  background: #fff;
  color: var(--ink);
}

.opis-card-report-row.is-deposit {
  background: #a7f3d0;
  color: #065f46;
}

.opis-card-report-row.is-previous-visit span,
.opis-card-report-row.is-previous-visit small {
  color: #705900;
}

.opis-card-report-row.is-before-deposit span,
.opis-card-report-row.is-before-deposit small {
  color: #84731b;
}

.opis-card-report-row.is-deposit span,
.opis-card-report-row.is-deposit small {
  color: #28765c;
}

@media (max-width: 760px) {
  .opis-card-report-main-summary {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, .72fr) !important;
    margin-bottom: 12px;
  }

  .opis-card-report-main-summary article {
    min-height: 78px;
    padding: 12px 14px;
  }

  .opis-card-report-main-summary strong {
    font-size: 1.15rem;
  }

  .opis-card-report-timeline-head {
    min-height: 62px;
    padding: 12px 14px;
  }

  .opis-card-report-timeline-head span {
    display: none;
  }

  .opis-card-report-row {
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(76px, .65fr)
      minmax(76px, .65fr) !important;
    grid-template-areas:
      "place amount balance"
      "time amount balance";
    min-height: 76px;
    padding: 10px 12px !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
  }

  .opis-card-report-row-place {
    grid-area: place;
    align-self: end;
  }

  .opis-card-report-row-time {
    grid-area: time;
    align-self: start;
  }

  .opis-card-report-row-amount {
    grid-area: amount;
    align-self: center;
  }

  .opis-card-report-row-balance {
    grid-area: balance;
    align-self: center;
  }

  .opis-card-report-row-place strong,
  .opis-card-report-row-amount strong,
  .opis-card-report-row-balance strong {
    font-size: .88rem;
  }

  .opis-card-report-row-place span {
    display: none;
  }

  .opis-card-report-row-time span {
    font-size: .68rem;
  }

  .opis-card-report-row-time small {
    font-size: .6rem;
  }

  .opis-card-report-row-amount,
  .opis-card-report-row-balance {
    text-align: right;
  }

  .opis-card-report-row-amount span,
  .opis-card-report-row-balance span {
    font-size: .58rem;
    line-height: 1.25;
  }
}

/* OPIS_CARD_REPORT_MOBILE_VISUAL_V4 */
@media (max-width: 760px) {
  /* Mobil başlık yalnızca Kart Raporu olarak görünür. */
  #opisCardReportPage
  .opis-card-report-head .eyebrow {
    display: none !important;
  }

  #opisCardReportPage
  .opis-card-report-active-number {
    display: none !important;
  }

  #opisCardReportPage
  .opis-card-report-head {
    margin-bottom: 14px !important;
  }

  #opisCardReportPage
  .opis-card-report-head h1 {
    margin: 0 !important;
    font-size: 2rem !important;
    line-height: 1.08;
  }

  /* Mobilde gereksiz alt açıklama kaldırılır. */
  #opisCardReportPage
  .opis-card-report-search > small {
    display: none !important;
  }

  #opisCardReportPage
  .opis-card-report-search {
    margin-bottom: 12px !important;
  }

  /*
   * İşaretlenen değerler:
   * kart numarası, makine adı ve kalan bakiye.
   */
  #opisCardReportPage
  .opis-card-report-main-summary
  article:first-child strong,
  #opisCardReportPage
  .opis-card-report-row-place strong,
  #opisCardReportPage
  .opis-card-report-row-balance strong {
    color: #ef2b2d !important;
  }

  #opisCardReportPage
  .opis-card-report-row-place strong {
    font-weight: 850;
  }

  #opisCardReportPage
  .opis-card-report-row-balance strong {
    font-weight: 900;
  }
}

/* OPIS_CARD_REPORT_WORKSPACE_SCROLL_FIX_V5 */
@media (max-width: 760px) {
  /*
   * Mobil uygulamada body sabit kalır.
   * Başlığın altındaki workspace bağımsız kayar.
   */
  html:has(#opisCardReportPage:not(.hidden)),
  body:has(#opisCardReportPage:not(.hidden)) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .app-view:has(#opisCardReportPage:not(.hidden)) {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-shell:has(#opisCardReportPage:not(.hidden)) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .main-shell:has(#opisCardReportPage:not(.hidden))
  .topbar {
    position: relative !important;
    top: auto !important;
    flex: 0 0 68px !important;
    width: 100% !important;
    height: 68px !important;
  }

  .workspace:has(#opisCardReportPage:not(.hidden)) {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 25px 15px 90px !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  #opisCardReportPage:not(.hidden) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 30px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  #opisCardReportPage
  .opis-card-report-result,
  #opisCardReportPage
  .opis-card-report-timeline-panel,
  #opisCardReportPage
  .opis-card-report-timeline {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }
}

/* OPIS_CARD_REPORT_DIRECT_SCROLL_FIX_V6 */
@media (max-width: 760px) {
  /*
   * Workspace sabit taşıyıcıdır.
   * Kaydırmayı doğrudan Kart Raporu sayfası yapar.
   */
  .workspace:has(#opisCardReportPage:not(.hidden)) {
    display: block !important;
    width: 100% !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  #opisCardReportPage:not(.hidden) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 25px 15px 100px !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  #opisCardReportPage
  .opis-card-report-head,
  #opisCardReportPage
  .opis-card-report-search,
  #opisCardReportPage
  .opis-card-report-result,
  #opisCardReportPage
  .opis-card-report-timeline-panel,
  #opisCardReportPage
  .opis-card-report-timeline {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}







/* OPIS_LOG_MOBILE_FINAL_LAYOUT_V5 */
@media (max-width: 760px) {
  html:has(#opisLogMonitorPage:not(.hidden)),
  body:has(#opisLogMonitorPage:not(.hidden)),
  .app-view:has(#opisLogMonitorPage:not(.hidden)) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-shell:has(
    #opisLogMonitorPage:not(.hidden)
  ) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .main-shell:has(
    #opisLogMonitorPage:not(.hidden)
  ) .topbar {
    position: relative !important;
    flex: 0 0 68px !important;
    width: 100% !important;
    height: 68px !important;
  }

  .main-shell:has(
    #opisLogMonitorPage:not(.hidden)
  ) > .workspace {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #opisLogMonitorPage:not(.hidden) {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 25px 15px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  #opisLogMonitorPage .opis-log-monitor-grid {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 2px !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  #opisLogMonitorPage .opis-log-server-card {
    border-radius: 18px !important;
    contain: paint;
  }

  #opisLogMonitorPage .opis-log-alert-list,
  #opisLogMonitorPage .opis-log-clear,
  #opisLogMonitorPage .opis-log-server-error {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  .main-shell:has(
    #opisLogMonitorPage:not(.hidden)
  ) > .global-app-footer {
    display: flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding:
      5px 10px
      calc(5px + env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: var(--canvas, #f5f6fa) !important;
    font-size: 10px !important;
    line-height: 15px !important;
  }
}

/* OPIS_LOG_MOBILE_FULL_SERVER_CARD_V6 */
@media (max-width: 760px) {
  /*
   * Sayfa:
   * 1. Başlık ve tarama
   * 2. Tarama zamanları
   * 3. Kalan yüksekliği dolduran sunucu kartları
   */
  #opisLogMonitorPage:not(.hidden) {
    display: grid !important;
    grid-template-rows:
      max-content
      max-content
      minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 20px 14px 8px !important;
  }

  /* Başlık solda, Şimdi tara sağda. */
  #opisLogMonitorPage .opis-log-monitor-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      max-content !important;
    align-items: end !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #opisLogMonitorPage .opis-log-monitor-head h1 {
    margin: 4px 0 0 !important;
  }

  #opisLogMonitorPage .opis-log-monitor-head p {
    display: none !important;
  }

  #opisLogMonitorPage .opis-log-monitor-actions {
    margin: 0 !important;
  }

  #opisLogMonitorPage #opisLogScanNowButton {
    width: auto !important;
    min-width: 128px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
  }

  /* Son ve sonraki tarama yan yana. */
  #opisLogMonitorPage .opis-log-monitor-meta {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  #opisLogMonitorPage
  .opis-log-monitor-meta > span {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 7px 6px !important;
    text-align: center !important;
  }

  #opisLogMonitorPage
  .opis-log-monitor-meta > span:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /*
   * Sunucu alanı kalan bütün yüksekliği doldurur.
   * Boşluk kartın beyaz gövdesinde kalır.
   */
  #opisLogMonitorPage .opis-log-monitor-grid {
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 0 2px !important;
    align-items: stretch !important;
  }

  #opisLogMonitorPage .opis-log-server-card {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  #opisLogMonitorPage .opis-log-alert-list {
    align-content: start !important;
    min-height: 0 !important;
    background: #ffffff !important;
    padding: 12px !important;
  }

  #opisLogMonitorPage .opis-log-clear,
  #opisLogMonitorPage .opis-log-server-error {
    min-height: 0 !important;
  }
}

/* OPIS_CARD_REPORT_CANCELLED_DEPOSIT_V4 */
.opis-card-report-row.is-cancelled-deposit {
  background: #fde8e8;
  color: #b42318;
}

.opis-card-report-row.is-cancelled-deposit span,
.opis-card-report-row.is-cancelled-deposit small {
  color: #b5473e;
}

.opis-card-report-row.is-cancelled-deposit
.opis-card-report-row-place,
.opis-card-report-row.is-cancelled-deposit
.opis-card-report-row-amount,
.opis-card-report-row.is-cancelled-deposit
.opis-card-report-row-balance {
  color: #dc2626;
}

/* OPIS_CARD_REPORT_MOBILE_OPERATION_LABEL_V16 */
@media (max-width: 760px) {
  .opis-card-report-row {
    position: relative;
  }

  /*
   * YÜKLEME ve İPTAL bilgisi frontend tarafından
   * zaten oluşturuluyor. Önceki mobil kuralın
   * gizlediği bu bilgiyi küçük etiket olarak göster.
   */
  .opis-card-report-row.is-deposit
  .opis-card-report-row-place span,
  .opis-card-report-row.is-cancelled-deposit
  .opis-card-report-row-place span {
    position: absolute;
    top: 50%;
    left: 45%;
    display: block !important;
    width: auto;
    max-width: 62px;
    margin: 0;
    padding: 2px 4px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    font-size: .5rem !important;
    font-weight: 800;
    line-height: 1.1 !important;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
  }

  .opis-card-report-row.is-deposit
  .opis-card-report-row-place span {
    background: rgba(6, 95, 70, .1);
    color: #065f46 !important;
  }

  .opis-card-report-row.is-cancelled-deposit
  .opis-card-report-row-place span {
    background: rgba(220, 38, 38, .1);
    color: #dc2626 !important;
  }
}

/* OPIS_CARD_REPORT_OPERATION_LABEL_CENTER_V17 */
@media (max-width: 760px) {
  .opis-card-report-row.is-deposit
  .opis-card-report-row-place span,
  .opis-card-report-row.is-cancelled-deposit
  .opis-card-report-row-place span {
    /*
     * Gişe adı ve ana işlem tutarıyla aynı
     * yatay hatta görünür.
     */
    top: 34% !important;
    left: 45% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* OPIS_CARD_REPORT_OPERATION_GRID_CENTER_V18 */

/* Masaüstünde ek mobil işlem sütununu gösterme. */
.opis-card-report-row-operation {
  display: none;
}

@media (max-width: 760px) {
  /*
   * Önceki mutlak konumlu etiketi kapat.
   * Artık bağımsız işlem sütunu kullanılacak.
   */
  .opis-card-report-row.is-deposit
  .opis-card-report-row-place span,
  .opis-card-report-row.is-cancelled-deposit
  .opis-card-report-row-place span {
    display: none !important;
  }

  /*
   * Mobil yükleme ve iptal satırları:
   *
   * gişe | işlem | tutar | bakiye
   */
  .opis-card-report-row.is-deposit,
  .opis-card-report-row.is-cancelled-deposit {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(48px, .36fr)
      minmax(92px, .7fr)
      minmax(92px, .7fr) !important;

    grid-template-areas:
      "place operation amount balance"
      "time operation amount balance" !important;

    column-gap: 5px !important;
  }

  .opis-card-report-row-operation {
    grid-area: operation;
    display: flex;
    min-width: 0;
    height: 100%;
    padding: 0;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .opis-card-report-row-operation span {
    display: inline-flex !important;
    min-width: 0;
    margin: 0;
    padding: 3px 5px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: .48rem !important;
    font-weight: 800;
    line-height: 1 !important;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
  }

  .opis-card-report-row.is-deposit
  .opis-card-report-row-operation span {
    background: rgba(6, 95, 70, .1);
    color: #065f46 !important;
  }

  .opis-card-report-row.is-cancelled-deposit
  .opis-card-report-row-operation span {
    background: rgba(220, 38, 38, .1);
    color: #dc2626 !important;
  }
}

/* OPIS_SERVERS_MOBILE_FOOTER_FIT_V19 */
@media (max-width: 760px) {
  /*
   * Gişeler sayfasında tüm uygulama telefon ekranına
   * sabitlenir. Dış sayfa kaydırması oluşmaz.
   */
  html:has(#opisServersPage:not(.hidden)),
  body:has(#opisServersPage:not(.hidden)),
  .app-view:has(#opisServersPage:not(.hidden)) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .main-shell:has(#opisServersPage:not(.hidden)) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .main-shell:has(#opisServersPage:not(.hidden))
  > .topbar {
    position: relative !important;
    top: auto !important;
    flex: 0 0 68px !important;
    width: 100% !important;
    height: 68px !important;
  }

  /*
   * Workspace yalnızca topbar ile footer arasında
   * kalan yüksekliği kullanır.
   */
  .main-shell:has(#opisServersPage:not(.hidden))
  > .workspace {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  /*
   * Gişeler sayfası:
   * 1. Küçük başlık alanı
   * 2. Kalan yüksekliği eşit paylaşan beş kart
   */
  #opisServersPage:not(.hidden) {
    display: grid !important;
    grid-template-rows:
      max-content
      minmax(0, 1fr) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 13px 14px 9px !important;
    overflow: hidden !important;
    gap: 0 !important;
    touch-action: none !important;
  }

  #opisServersPage .opis-servers-head {
    margin: 0 0 8px !important;
  }

  #opisServersPage .opis-servers-head > span {
    font-size: 9px !important;
  }

  #opisServersPage .opis-servers-head h1 {
    margin: 3px 0 1px !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  #opisServersPage .opis-servers-head p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  #opisServersPage .opis-server-picker {
    display: grid !important;
    grid-template-rows:
      repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #opisServersPage .opis-server-picker button {
    grid-template-columns:
      38px minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 6px 15px !important;
    border-radius: 14px !important;
  }

  #opisServersPage
  .opis-server-picker button > strong {
    font-size: 15px !important;
  }

  #opisServersPage
  .opis-server-picker button > span {
    font-size: 10px !important;
  }

  #opisServersPage
  .opis-server-picker button > b {
    font-size: 23px !important;
  }

  /*
   * Ana sayfada kullanılan global footer aynı şekilde
   * Gişeler ekranının altında görünür.
   */
  .main-shell:has(#opisServersPage:not(.hidden))
  > .global-app-footer {
    display: flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding:
      5px 10px
      calc(5px + env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: var(--canvas, #f5f6fa) !important;
    font-size: 10px !important;
    line-height: 15px !important;
  }
}

/*
 * Dikey alanı daha kısa telefonlarda başlık ve
 * kart aralıkları bir miktar daha sıkıştırılır.
 */
@media (max-width: 760px) and (max-height: 740px) {
  #opisServersPage:not(.hidden) {
    padding: 9px 12px 6px !important;
  }

  #opisServersPage .opis-servers-head {
    margin-bottom: 5px !important;
  }

  #opisServersPage .opis-servers-head h1 {
    font-size: 21px !important;
  }

  #opisServersPage .opis-servers-head p {
    font-size: 10px !important;
  }

  #opisServersPage .opis-server-picker {
    gap: 5px !important;
  }

  #opisServersPage .opis-server-picker button {
    padding: 4px 13px !important;
    border-radius: 12px !important;
  }
}

/* TERMINAL_STATUS_MOBILE_FOOTER_FIT_V20 */
@media (max-width: 760px) {
  /*
   * Yalnız Gişe Durumu seçim ekranında tüm uygulamayı
   * telefonun kullanılabilir ekran yüksekliğine sabitler.
   */
  html:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ),
  body:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ),
  .app-view:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ) {
    width: 100%;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .main-shell:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ) {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-shell:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ) > .topbar {
    flex: 0 0 68px;
    min-height: 68px;
  }

  .main-shell:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ) > .workspace {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #terminalManagementPage.mobile-picker-active:not(.hidden) {
    display: grid !important;
    grid-template-rows: max-content minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px 14px 8px !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    gap: 10px;
    margin: 0 0 8px !important;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head .eyebrow {
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: .18em;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head h1 {
    margin: 3px 0 2px;
    font-size: 25px;
    line-height: 1.05;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head p {
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  #terminalManagementPage.mobile-picker-active
  #reloadTerminalManagementButton {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    font-size: 0;
  }

  #terminalManagementPage.mobile-picker-active
  #reloadTerminalManagementButton::before {
    content: "↻";
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
  }

  #terminalManagementPage.mobile-picker-active
  #terminalManagementGrid {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker > * {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker > button {
    padding: 8px 12px !important;
  }

  /*
   * Ana sayfadaki footer görünümü:
   * ekranın altında kalır ve gereksiz boşluk oluşturmaz.
   */
  .main-shell:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ) > .global-app-footer {
    display: flex !important;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: 10px;
    line-height: 1;
  }
}

/* Yüksekliği daha kısa telefonlar */
@media (max-width: 760px) and (max-height: 720px) {
  #terminalManagementPage.mobile-picker-active:not(.hidden) {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head {
    margin-bottom: 6px !important;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head h1 {
    font-size: 22px;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head p {
    font-size: 10px;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker {
    gap: 5px !important;
  }
}

/* TERMINAL_STATUS_MOBILE_FULL_WIDTH_V21 */
@media (max-width: 760px) {
  /*
   * Önceki mobil seçici kurallarından kalan dar genişlik
   * ve yükseklik sınırlarını kaldırır.
   */
  #terminalManagementPage.mobile-picker-active:not(.hidden) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head,
  #terminalManagementPage.mobile-picker-active
  #terminalManagementGrid,
  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #terminalManagementPage.mobile-picker-active
  #terminalManagementGrid {
    display: block !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker > *,
  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker > button {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}

/* TERMINAL_STATUS_VIEWPORT_FIT_V22 */
@media (max-width: 760px) {
  /*
   * Gişe Durumu ana seçim ekranını normal sayfa
   * genişliklerinden bağımsız olarak doğrudan ekrana yerleştirir.
   */
  #terminalManagementPage.mobile-picker-active:not(.hidden) {
    position: fixed !important;
    z-index: 5;
    inset: 68px 0 28px 0 !important;

    display: grid !important;
    grid-template-rows:
      max-content minmax(0, 1fr) !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 12px 14px 8px !important;

    overflow: hidden !important;
    background: #f5f6fb;
    box-sizing: border-box;
  }

  #terminalManagementPage.mobile-picker-active
  > .page-head {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
  }

  #terminalManagementPage.mobile-picker-active
  #terminalManagementGrid {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-picker {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:
      repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #terminalManagementPage.mobile-picker-active
  .mobile-management-module {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 24px 8px 12px !important;
  }

  /*
   * Footer seçim ekranında telefonun altına sabitlenir.
   */
  .main-shell:has(
    #terminalManagementPage.mobile-picker-active:not(.hidden)
  ) > .global-app-footer {
    position: fixed !important;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 8px !important;
    background: #fff;
    font-size: 10px;
    line-height: 1;
  }
}

/* TERMINAL_STATUS_MOBILE_DESCRIPTION_V23 */
@media (max-width: 760px) {
  #terminalManagementPage.mobile-picker-active
  > .page-head > div > p {
    display: block !important;
    margin: 4px 0 0 !important;
    color: #747687;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.25 !important;
  }
}

/* POS_STATUS_MOBILE_VIEWPORT_V24 */
@media (max-width: 760px) {
  html:has(
    #posManagementPage.mobile-picker-active:not(.hidden)
  ),
  body:has(
    #posManagementPage.mobile-picker-active:not(.hidden)
  ),
  .app-view:has(
    #posManagementPage.mobile-picker-active:not(.hidden)
  ) {
    width: 100%;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .main-shell:has(
    #posManagementPage.mobile-picker-active:not(.hidden)
  ) {
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * POS seçim ekranını üst menü ile footer arasındaki
   * kullanılabilir alanın tamamına yerleştirir.
   */
  #posManagementPage.mobile-picker-active:not(.hidden) {
    position: fixed !important;
    z-index: 5;
    inset: 68px 0 28px 0 !important;

    display: grid !important;
    grid-template-rows:
      max-content minmax(0, 1fr) !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 12px 14px 8px !important;

    overflow: hidden !important;
    background: #f5f6fb;
    box-sizing: border-box;
    touch-action: none !important;
  }

  #posManagementPage.mobile-picker-active
  > .page-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 44px !important;
    align-items: end !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
  }

  #posManagementPage.mobile-picker-active
  > .page-head .eyebrow {
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .18em;
  }

  #posManagementPage.mobile-picker-active
  > .page-head h1 {
    margin: 3px 0 2px !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  /*
   * Eski mobil kural tarafından gizlenen alt metni gösterir.
   */
  #posManagementPage.mobile-picker-active
  > .page-head > div:first-child > p {
    display: block !important;
    margin: 4px 0 0 !important;
    color: #747687;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.25 !important;
  }

  #posManagementPage.mobile-picker-active
  > .page-head > .panel-actions {
    display: block !important;
    width: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }

  #posManagementPage.mobile-picker-active
  #reloadPosManagementButton {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px;
    color: transparent !important;
    font-size: 0 !important;
    white-space: nowrap;
  }

  #posManagementPage.mobile-picker-active
  #reloadPosManagementButton::before {
    content: "↻";
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #252565;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
  }

  #posManagementPage.mobile-picker-active
  #posDeviceGrid {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #posManagementPage.mobile-picker-active
  .mobile-management-picker {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:
      repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  #posManagementPage.mobile-picker-active
  .mobile-management-module {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 24px 8px 12px !important;
  }

  /*
   * Footer her zaman telefon ekranının altında görünür.
   */
  .main-shell:has(
    #posManagementPage.mobile-picker-active:not(.hidden)
  ) > .global-app-footer {
    position: fixed !important;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 8px !important;
    background: #fff;
    font-size: 10px;
    line-height: 1;
  }
}

/* Kısa ekranlı telefonlarda başlık alanını biraz küçültür */
@media (max-width: 760px) and (max-height: 720px) {
  #posManagementPage.mobile-picker-active:not(.hidden) {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  #posManagementPage.mobile-picker-active
  > .page-head {
    margin-bottom: 6px !important;
  }

  #posManagementPage.mobile-picker-active
  > .page-head h1 {
    font-size: 22px !important;
  }

  #posManagementPage.mobile-picker-active
  > .page-head > div:first-child > p {
    font-size: 10px !important;
  }

  #posManagementPage.mobile-picker-active
  .mobile-management-picker {
    gap: 5px !important;
  }
}

/* POS_MOBILE_BANK_NAME_V25 */
@media (max-width: 760px) {
  #posManagementPage.mobile-picker-active
  .mobile-module-bank {
    display: block;
    max-width: calc(100% - 12px);
    margin-top: 6px;
    overflow: hidden;
    color: #55596c;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #posManagementPage.mobile-picker-active
  .mobile-status-open .mobile-module-bank {
    color: #087044;
  }

  #posManagementPage.mobile-picker-active
  .mobile-status-closed .mobile-module-bank {
    color: #a62a3c;
  }

  #posManagementPage.mobile-picker-active
  .mobile-status-faulty .mobile-module-bank {
    color: #8b6100;
  }
}

/* Kısa ekranlarda banka yazısını biraz küçültür */
@media (max-width: 760px) and (max-height: 720px) {
  #posManagementPage.mobile-picker-active
  .mobile-module-bank {
    margin-top: 4px;
    font-size: 8px;
  }
}

/* OPIS_CARD_REPORT_HEADER_FOOTER_V26 */
@media (max-width: 760px) {
  /*
   * Ana taşıyıcı:
   * 1. Üst menü
   * 2. Kaydırılabilir Kart Raporu
   * 3. Footer
   */
  .main-shell:has(
    #opisCardReportPage:not(.hidden)
  ) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .main-shell:has(
    #opisCardReportPage:not(.hidden)
  ) > .topbar {
    position: relative !important;
    flex: 0 0 68px !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
  }

  /*
   * Workspace footer için kalan alanı kullanır.
   * Kaydırma işlemi yine sayfanın kendisindedir.
   */
  .main-shell:has(
    #opisCardReportPage:not(.hidden)
  ) > .workspace {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #opisCardReportPage:not(.hidden) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 25px 15px 35px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  /*
   * Önceki mobil kuralın gizlediği üst açıklamayı
   * tekrar görünür hale getirir.
   */
  #opisCardReportPage
  .opis-card-report-head .eyebrow {
    display: inline-block !important;
    color: #a5215e;
    font-size: 10px !important;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: .18em;
  }

  #opisCardReportPage
  .opis-card-report-head {
    margin-bottom: 14px !important;
  }

  #opisCardReportPage
  .opis-card-report-head h1 {
    margin: 6px 0 3px !important;
    font-size: 2rem !important;
    line-height: 1.08 !important;
  }

  #opisCardReportPage
  .opis-card-report-description {
    display: block !important;
    margin: 5px 0 0 !important;
    color: #747687 !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.3 !important;
  }

  /*
   * Footer sayfanın altında ayrı bir satırdır.
   * Raporun üzerine sabitlenmez.
   */
  .main-shell:has(
    #opisCardReportPage:not(.hidden)
  ) > .global-app-footer {
    position: relative !important;
    z-index: 2;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding:
      5px 10px
      calc(5px + env(safe-area-inset-bottom)) !important;

    background: var(--canvas, #f5f6fa) !important;
    font-size: 10px !important;
    line-height: 15px !important;
  }
}

/* OPIS_CARD_REPORT_COMPACT_HEADER_V27 */
@media (max-width: 760px) {
  #opisCardReportPage:not(.hidden) {
    padding-top: 12px !important;
  }

  #opisCardReportPage
  .opis-card-report-head {
    margin-bottom: 10px !important;
  }

  #opisCardReportPage
  .opis-card-report-head .eyebrow {
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .18em;
  }

  #opisCardReportPage
  .opis-card-report-head h1 {
    margin: 3px 0 2px !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  #opisCardReportPage
  .opis-card-report-description {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

/* OPIS_MODULES_HEADER_FOOTER_V28 */
@media (max-width: 760px) {
  /*
   * Başlık alanını Kart Raporu, Gişe Durumu ve
   * POS Durumu sayfalarıyla aynı ölçülere getirir.
   */
  #opisModulesPage:not(.hidden)
  > .opis-modules-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 44px !important;
    align-items: end !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  #opisModulesPage
  .opis-modules-head .eyebrow {
    display: inline-block !important;
    color: #a5215e;
    font-size: 9px !important;
    font-weight: 850;
    line-height: 1.1 !important;
    letter-spacing: .18em;
  }

  #opisModulesPage
  .opis-modules-head h1 {
    margin: 3px 0 2px !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  #opisModulesPage
  .opis-modules-head p {
    display: block !important;
    margin: 4px 0 0 !important;
    color: #747687 !important;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.25 !important;
  }

  /*
   * Yenileme düğmesini başlığın sağındaki kompakt
   * yenileme simgesine dönüştürür.
   */
  #opisModulesPage
  .opis-modules-head > .panel-actions {
    display: block !important;
    width: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }

  #opisModulesPage
  #reloadOpisModulesButton {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    color: transparent !important;
    font-size: 0 !important;
    white-space: nowrap;
  }

  #opisModulesPage
  #reloadOpisModulesButton::before {
    content: "↻";
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #252565;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
  }

  /*
   * Footer normal akışta kalır.
   * Modül listesi uzadığında mevcut sayfa kaydırmasıyla
   * listenin sonunda görünür.
   */
  .main-shell:has(
    #opisModulesPage:not(.hidden)
  ) > .global-app-footer {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    grid-row: 3 !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding:
      5px 10px
      calc(5px + env(safe-area-inset-bottom)) !important;

    background: var(--canvas, #f5f6fa) !important;
    font-size: 10px !important;
    line-height: 15px !important;
  }
}

/* OPIS_MODULES_HEADER_FOOTER_FIX_V29 */
@media (max-width: 760px) {
  /*
   * Eski genel workspace boşluğunu kaldırır.
   * Başlık diğer OPIS sayfalarıyla aynı noktadan başlar.
   * Alttaki 48px, sabit footer'ın içeriği kapatmaması içindir.
   */
  .workspace:has(
    #opisModulesPage:not(.hidden)
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding:
      12px 14px 48px !important;
  }

  #opisModulesPage:not(.hidden) {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #opisModulesPage
  > .opis-modules-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 44px !important;
    align-items: end !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  #opisModulesPage
  .opis-modules-head .eyebrow {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  #opisModulesPage
  .opis-modules-head h1 {
    margin: 3px 0 2px !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  #opisModulesPage
  .opis-modules-head p {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  #opisModulesPage
  .opis-modules-head > .panel-actions {
    align-self: end !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  /*
   * Modül listesi ve mevcut ana sayfa kaydırması değişmez.
   * Footer yalnızca ekranın altına sabitlenir.
   */
  .main-shell:has(
    #opisModulesPage:not(.hidden)
  ) > .global-app-footer {
    position: fixed !important;
    z-index: 20 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding:
      0 8px
      env(safe-area-inset-bottom) !important;

    border-top: 1px solid rgba(31, 30, 86, .06);
    background: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}

/* OPIS_PRICING_MOBILE_MODULES_LAYOUT_V30 */
@media (max-width: 760px) {
  /*
   * Kaydırma yine main-shell üzerinde kalır.
   * Yalnızca sayfa iç boşlukları ve görünüm düzenlenir.
   */
  .main-shell:has(#opisPricingPage:not(.hidden))
  > .workspace {
    padding:
      12px
      14px
      48px !important;
  }

  #opisPricingPage {
    width: 100%;
    min-height:
      calc(100dvh - 68px) !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
  }

  /* Başlık ve sağdaki işlem düğmeleri */
  #opisPricingPage .opis-pricing-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
    align-items: end !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  #opisPricingPage
  .opis-pricing-head > div:first-child {
    min-width: 0;
  }

  #opisPricingPage
  .opis-pricing-head .eyebrow {
    display: block;
    margin-bottom: 4px !important;
    font-size: .58rem !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #opisPricingPage
  .opis-pricing-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    line-height: 1.05 !important;
  }

  #opisPricingPage
  .opis-pricing-head p {
    max-width: 220px;
    margin: 0 !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  #opisPricingPage
  .opis-pricing-head-actions {
    display: flex !important;
    width: auto !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #opisPricingDelegationButton {
    width: auto !important;
    min-width: 62px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: .65rem !important;
    font-weight: 800 !important;
    white-space: nowrap;
  }

  #reloadOpisPricingButton {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px !important;
    font-size: 0 !important;
    white-space: nowrap;
  }

  #reloadOpisPricingButton::before {
    content: "↻";
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
  }

  /*
   * Sunucular Modüller menüsündeki gibi:
   * yalnızca durum noktası ve sunucu adı.
   */
  #opisPricingServerStatus {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 0 16px !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server {
    display: flex !important;
    min-width: 0;
    min-height: 78px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 3px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server-icon {
    display: grid !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    place-items: center;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server-icon span {
    box-sizing: content-box;
    width: 10px !important;
    height: 10px !important;
    border: 3px solid #c9f3da !important;
    border-radius: 50% !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server.is-offline
  .opis-pricing-server-icon span {
    border-color: #f5c7cf !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server-copy {
    display: block !important;
    min-width: 0;
    text-align: center !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server-copy small,
  #opisPricingServerStatus
  .opis-pricing-server-copy span,
  #opisPricingServerStatus
  .opis-pricing-server > b {
    display: none !important;
  }

  #opisPricingServerStatus
  .opis-pricing-server-copy strong {
    display: block !important;
    width: 100%;
    font-size: .7rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Ana sayfadakiyle aynı sabit footer */
  .main-shell:has(#opisPricingPage:not(.hidden))
  > .global-app-footer {
    position: fixed !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: flex !important;
    height: 28px !important;
    min-height: 28px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding:
      0
      8px
      env(safe-area-inset-bottom) !important;
    background: #fff;
  }
}

/* OPIS_PRICING_TITLE_ACTIONS_ALIGNMENT_V31 */
@media (max-width: 760px) {
  /*
   * Başlık alanı Modüller, Kart Raporu ve
   * Gişe Durumu sayfalarının ölçülerine yaklaştırılır.
   */
  #opisPricingPage .opis-pricing-head {
    position: relative !important;
    display: block !important;
    min-height: 92px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  #opisPricingPage
  .opis-pricing-head > div:first-child {
    min-width: 0;
    padding-right: 0 !important;
  }

  #opisPricingPage
  .opis-pricing-head .eyebrow {
    display: block;
    margin: 0 0 4px !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #opisPricingPage
  .opis-pricing-head h1 {
    max-width: calc(100% - 118px);
    margin: 0 0 5px !important;
    font-size: 1.58rem !important;
    line-height: 42px !important;
    white-space: nowrap;
  }

  #opisPricingPage
  .opis-pricing-head p {
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 4px;
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  /*
   * Yetki Ver ve yenileme düğmeleri tam olarak
   * Fiyatlandırma başlığının karşısına yerleşir.
   */
  #opisPricingPage
  .opis-pricing-head-actions {
    position: absolute !important;
    top: 15px !important;
    right: 0 !important;
    display: flex !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #opisPricingDelegationButton {
    width: auto !important;
    min-width: 66px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: .66rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #reloadOpisPricingButton {
    position: relative;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  #reloadOpisPricingButton::before {
    content: "↻";
    display: grid;
    position: absolute;
    inset: 0;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
  }
}

/* OPIS_PRICING_BUTTONS_HORIZONTAL_V32 */
@media (max-width: 760px) {
  #opisPricingPage .opis-pricing-head {
    position: relative !important;
    display: block !important;
    min-height: 102px !important;
    margin-bottom: 12px !important;
  }

  #opisPricingPage .opis-pricing-head h1 {
    width: calc(100% - 122px) !important;
    max-width: calc(100% - 122px) !important;
    margin: 0 0 5px !important;
    font-size: 1.58rem !important;
    line-height: 42px !important;
    white-space: nowrap !important;
  }

  #opisPricingPage .opis-pricing-head p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .69rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /*
   * Yetki Ver ve yenileme butonunu başlığın sağında,
   * aynı satırda zorunlu olarak yan yana tut.
   */
  #opisPricingPage
  .opis-pricing-head
  .opis-pricing-head-actions {
    position: absolute !important;
    top: 25px !important;
    right: 0 !important;

    display: flex !important;
    width: 116px !important;
    height: 42px !important;

    flex-direction: row !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #opisPricingDelegationButton {
    position: static !important;
    display: block !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 12px !important;
    font-size: .65rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #reloadOpisPricingButton {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  #reloadOpisPricingButton::before {
    content: "↻" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.45rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
}

/* OPIS_PRICING_HEADER_MATCH_MODULES_V33 */
@media (max-width: 760px) {
  #opisPricingPage {
    padding-top: 0 !important;
  }

  /*
   * Önceki fiyatlandırma başlık kurallarını sıfırla.
   * Üst alan Modüller sayfasıyla aynı yoğunlukta olur.
   */
  #opisPricingPage .opis-pricing-head {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 112px !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  #opisPricingPage
  .opis-pricing-head > div:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #opisPricingPage
  .opis-pricing-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #opisPricingPage
  .opis-pricing-head h1 {
    display: block !important;
    width: calc(100% - 122px) !important;
    max-width: calc(100% - 122px) !important;
    height: 42px !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: 1.58rem !important;
    font-weight: 800 !important;
    line-height: 42px !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  #opisPricingPage
  .opis-pricing-head p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /*
   * İki düğme başlığın karşısında tek satırda.
   */
  #opisPricingPage
  .opis-pricing-head
  .opis-pricing-head-actions {
    position: absolute !important;
    top: 15px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    width: 116px !important;
    height: 42px !important;

    flex-direction: row !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #opisPricingDelegationButton {
    position: static !important;
    display: block !important;
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 12px !important;
    font-size: .65rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #reloadOpisPricingButton {
    position: relative !important;
    display: block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #reloadOpisPricingButton::before {
    content: "↻" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.45rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  /*
   * Sunucu kartlarının başlangıç konumu ve aralıkları
   * Modüller sayfasıyla aynı tutulur.
   */
  #opisPricingServerStatus {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
}

/* OPIS_PRICING_EXACT_MODULES_HEADER_V34 */
@media (max-width: 760px) {
  /*
   * Eski fiyatlandırma grid yapısının oluşturduğu
   * büyük dikey boşluğu tamamen kaldır.
   */
  #opisPricingPage:not(.hidden) {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    gap: 0 !important;
  }

  /*
   * Modüller sayfasındaki üst alan yüksekliği.
   */
  #opisPricingPage .opis-pricing-head {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 116px !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    overflow: visible !important;
  }

  #opisPricingPage
  .opis-pricing-head > div:first-child {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #opisPricingPage
  .opis-pricing-head .eyebrow {
    display: block !important;
    height: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #opisPricingPage
  .opis-pricing-head h1 {
    display: block !important;
    width: calc(100% - 122px) !important;
    max-width: calc(100% - 122px) !important;
    height: 34px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 1.58rem !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  #opisPricingPage
  .opis-pricing-head p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /*
   * Yetki Ver ve yenileme düğmeleri başlık hizasında.
   */
  #opisPricingPage
  .opis-pricing-head
  .opis-pricing-head-actions {
    position: absolute !important;
    top: 27px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    width: 116px !important;
    height: 42px !important;

    flex-direction: row !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #opisPricingDelegationButton {
    position: static !important;
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 12px !important;
    font-size: .65rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #reloadOpisPricingButton {
    position: relative !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #reloadOpisPricingButton::before {
    content: "↻" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }

  /*
   * Sunucu kartlarını başlıktan hemen sonra başlat.
   * Önceki grid ve margin boşluklarını etkisizleştir.
   */
  #opisPricingServerStatus {
    display: grid !important;
    width: 100% !important;
    margin:
      0
      0
      16px !important;
    padding: 0 !important;
    transform: none !important;
  }
}

/* OPIS_PRICING_PIXEL_MATCH_MODULES_V35 */
@media (max-width: 760px) {
  /*
   * V34 içerisindeki 14px üst padding nedeniyle
   * başlık Modüller sayfasından aşağıda kalıyordu.
   */
  #opisPricingPage .opis-pricing-head {
    padding-top: 0 !important;
  }

  #opisPricingPage
  .opis-pricing-head .eyebrow {
    font-weight: 800 !important;
  }

  #opisPricingPage
  .opis-pricing-head h1 {
    font-size: 1.58rem !important;
    font-weight: 800 !important;
    line-height: 34px !important;
  }

  /*
   * Modüller sayfasındaki alt açıklama kalınlığı.
   */
  #opisPricingPage
  .opis-pricing-head p {
    font-size: .68rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  /*
   * Butonları başlıkla beraber 14px yukarı taşı.
   */
  #opisPricingPage
  .opis-pricing-head
  .opis-pricing-head-actions {
    top: 13px !important;
  }

  /*
   * Fiyatlandırmada kalan eski yerleşim boşluğunu kapat.
   * Böylece sunucu kartları Modüller ile aynı seviyeden
   * başlar ve aşağıdaki arama alanı da otomatik hizalanır.
   */
  #opisPricingServerStatus {
    margin-top: -57px !important;
  }
}

/* OPIS_PRICING_OVERLAP_FIX_V36 */
@media (max-width: 760px) {
  /*
   * OPIS SUNUCULARI yazısını Modüller ile
   * aynı dikey seviyeye getir.
   */
  #opisPricingPage .opis-pricing-head {
    padding-top: 14px !important;
  }

  /*
   * Fiyatlandırma başlığını Modüller başlığıyla
   * aynı seviyeye getir.
   */
  #opisPricingPage
  .opis-pricing-head h1 {
    transform: translateY(-8px) !important;
  }

  /*
   * Alt açıklamayı Modüllerdeki açıklama
   * seviyesine getir.
   */
  #opisPricingPage
  .opis-pricing-head p {
    transform: translateY(-14px) !important;
  }

  /*
   * Yetki Ver ve yenileme düğmelerini
   * başlık satırıyla ortala.
   */
  #opisPricingPage
  .opis-pricing-head
  .opis-pricing-head-actions {
    top: 27px !important;
  }

  /*
   * V35 kartları gereğinden fazla yukarı çekti.
   * -57px yerine -37px ve eklenen üst padding ile
   * toplamda kartlar 34px aşağıya iner.
   */
  #opisPricingServerStatus {
    margin-top: -37px !important;
  }
}

/* OPIS_CAMPAIGNS_MOBILE_LAYOUT_V37 */
@media (max-width: 760px) {
  .main-shell:has(#opisCampaignsPage:not(.hidden))
  > .workspace {
    padding:
      12px
      14px
      48px !important;
  }

  #opisCampaignsPage:not(.hidden) {
    display: block !important;
    width: 100% !important;
    min-height:
      calc(100dvh - 68px) !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
  }

  /* Modüller ve Fiyatlandırma ile aynı başlık alanı */
  #opisCampaignsPage .opis-campaigns-head {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 14px 0 0 !important;
  }

  #opisCampaignsPage
  .opis-campaigns-head > div {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #opisCampaignsPage
  .opis-campaigns-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #opisCampaignsPage
  .opis-campaigns-head h1 {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 1.58rem !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    letter-spacing: -.025em !important;
  }

  #opisCampaignsPage
  .opis-campaigns-head p {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted, #707385) !important;
    font-size: .68rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  /*
   * Kampanyalar dört OPIS sunucusuyla çalıştığı için
   * dört kart korunur; görünüm Fiyatlandırmayla eşleştirilir.
   */
  #opisCampaignsServerStatus {
    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 5px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  #opisCampaignsServerStatus
  .opis-campaign-server-card {
    display: flex !important;
    min-width: 0 !important;
    min-height: 78px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }

  #opisCampaignsServerStatus
  .opis-campaign-server-dot {
    box-sizing: content-box !important;
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
    margin: 0 auto !important;
    border-width: 3px !important;
    border-radius: 50% !important;
  }

  #opisCampaignsServerStatus
  .opis-campaign-server-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /*
   * S1/S2 yerine Fiyatlandırmadaki gibi
   * sunucunun anlaşılır adı gösterilir.
   */
  #opisCampaignsServerStatus
  .opis-campaign-server-code,
  #opisCampaignsServerStatus
  .opis-campaign-server-copy small,
  #opisCampaignsServerStatus
  .opis-campaign-server-card > b {
    display: none !important;
  }

  #opisCampaignsServerStatus
  .opis-campaign-server-name {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    color: #142844 !important;
    font-size: .56rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /*
   * Butonlar sunucu kartlarının altında:
   * Yeni Kampanya geniş, yenileme kare.
   */
  #opisCampaignsPage
  .opis-campaigns-actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      48px !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  #newOpisCampaignButton {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
  }

  #reloadOpisCampaignsButton {
    position: relative !important;
    display: block !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  #reloadOpisCampaignsButton::before {
    content: "↻" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.45rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  /* Kampanya listesinin mevcut kaydırma davranışı korunur. */
  #opisCampaignsGrid {
    margin-top: 0 !important;
  }

  /* Ana sayfadaki sabit footer düzeni */
  .main-shell:has(#opisCampaignsPage:not(.hidden))
  > .global-app-footer {
    position: fixed !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: flex !important;
    height: 28px !important;
    min-height: 28px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding:
      0
      8px
      env(safe-area-inset-bottom) !important;
    background: #fff;
  }
}

/* OPIS_CAMPAIGN_NEW_BUTTON_ALIGN_V38 */
@media (max-width: 760px) {
  /*
   * Kampanya kartının içindeki Güncelle / Sil
   * sütun oranını üst butonlara da uygula.
   */
  #opisCampaignsPage
  .opis-campaigns-actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 1fr) !important;
    width: calc(100% - 32px) !important;
    margin:
      0
      16px
      16px !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /*
   * Yeni Kampanya düğmesi Güncelle düğmesiyle
   * aynı yükseklik, köşe ve yazı ölçüsünde.
   */
  #newOpisCampaignButton {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: .85rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /*
   * Yenile düğmesi sağdaki Sil sütunuyla aynı hizada.
   */
  #reloadOpisCampaignsButton {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }
}

/* OPIS_LOG_HEADER_LAYOUT_V39 */
@media (max-width: 760px) {
  /*
   * Sayfa sırası:
   * başlık ve aktif tarama durumu
   * son/sonraki tarama
   * log sunucuları
   */
  #opisLogMonitorPage:not(.hidden) {
    grid-template-rows:
      max-content
      max-content
      minmax(0, 1fr) !important;
    gap: 10px !important;
    padding:
      14px
      14px
      8px !important;
  }

  #opisLogMonitorPage
  .opis-log-monitor-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
    align-items: end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #opisLogMonitorPage
  .opis-log-monitor-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #opisLogMonitorPage
  .opis-log-monitor-head h1 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 1.58rem !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  /*
   * Açıklamanın yerine taşınan aktif tarama kutusu.
   */
  #opisLogMonitorMode {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #555b6e !important;
    font-size: .62rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  #opisLogMonitorMode.is-scanning {
    border-color: #80b9d5 !important;
    background: #eef9ff !important;
    color: #12658c !important;
  }

  /*
   * Şimdi tara düğmesinin yüksekliğini azalt.
   */
  #opisLogMonitorPage
  #opisLogScanNowButton {
    width: auto !important;
    min-width: 116px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 12px !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  /*
   * Meta alanında artık yalnızca iki zaman kutusu var.
   */
  #opisLogMonitorPage
  .opis-log-monitor-meta {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  #opisLogMonitorPage
  .opis-log-monitor-meta > span {
    grid-column: auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 7px 6px !important;
    text-align: center !important;
  }
}

/* OPIS_LOG_ALERT_COMPACT_HEIGHT_V40 */
@media (max-width: 760px) {
  /*
   * Renkli kayıtların eşit ve yüksek satırlara
   * zorlanmasını engelle.
   */
  #opisLogMonitorPage
  .opis-log-alert-list {
    grid-auto-rows: max-content !important;
    grid-auto-flow: row !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  /*
   * Turuncu, mavi ve kırmızı kutular yalnızca
   * içerikleri kadar yükseklik kullanır.
   */
  #opisLogMonitorPage
  .opis-log-alert {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows:
      auto
      auto
      auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: start !important;
    align-items: start !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 11px 12px !important;
  }

  #opisLogMonitorPage
  .opis-log-alert strong,
  #opisLogMonitorPage
  .opis-log-alert span,
  #opisLogMonitorPage
  .opis-log-alert small {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }
}

/* OPIS_EIGHT_MENU_HEADER_UNIFY_V41 */
@media (max-width: 760px) {

  /*
   * Modüller referans alınarak ortak üst başlık yapısı
   */
  #terminalManagementPage .page-head,
  #posManagementPage .page-head,
  #opisModulesPage .opis-modules-head,
  #opisPricingPage .opis-pricing-head,
  #opisCampaignsPage .opis-campaigns-head,
  #opisLogMonitorPage .opis-log-monitor-head,
  #opisCardReportPage .opis-card-report-head {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /*
   * Gişeler başlığında iç kapsayıcı bulunmadığı için
   * aynı ölçüler ayrı uygulanıyor.
   */
  #opisServersPage .opis-servers-head {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /*
   * Metinlerin bulunduğu sol alan
   */
  #terminalManagementPage .page-head > div:first-child,
  #posManagementPage .page-head > div:first-child,
  #opisModulesPage .opis-modules-head > div:first-child,
  #opisPricingPage .opis-pricing-head > div:first-child,
  #opisCampaignsPage .opis-campaigns-head > div:first-child,
  #opisLogMonitorPage .opis-log-monitor-head > div:first-child,
  #opisCardReportPage .opis-card-report-head > div:first-child {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /*
   * Üst açıklama: OPIS SUNUCULARI
   */
  #opisServersPage .opis-servers-head > span,
  #terminalManagementPage .page-head .eyebrow,
  #posManagementPage .page-head .eyebrow,
  #opisModulesPage .opis-modules-head .eyebrow,
  #opisPricingPage .opis-pricing-head .eyebrow,
  #opisCampaignsPage .opis-campaigns-head .eyebrow,
  #opisLogMonitorPage .opis-log-monitor-head .eyebrow,
  #opisCardReportPage .opis-card-report-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: var(--magenta) !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  /*
   * Ana sayfa başlıkları
   */
  #opisServersPage .opis-servers-head h1,
  #terminalManagementPage .page-head h1,
  #posManagementPage .page-head h1,
  #opisModulesPage .opis-modules-head h1,
  #opisPricingPage .opis-pricing-head h1,
  #opisCampaignsPage .opis-campaigns-head h1,
  #opisLogMonitorPage .opis-log-monitor-head h1,
  #opisCardReportPage .opis-card-report-head h1 {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: var(--ink) !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  /*
   * Alt açıklamalar
   */
  #opisServersPage .opis-servers-head p,
  #terminalManagementPage .page-head p,
  #posManagementPage .page-head p,
  #opisModulesPage .opis-modules-head p,
  #opisPricingPage .opis-pricing-head p,
  #opisCampaignsPage .opis-campaigns-head p,
  #opisCardReportPage .opis-card-report-head p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .70rem !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  /*
   * Log Kayıtları açıklama kutusu
   */
  #opisLogMonitorPage .opis-log-monitor-mode {
    width: auto !important;
    min-height: 26px !important;
    height: 26px !important;
    margin: 5px 0 0 !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  /*
   * Başlık yanındaki buton alanları
   */
  #terminalManagementPage .page-head > button,
  #posManagementPage .page-head > .panel-actions,
  #opisModulesPage .opis-modules-head > .panel-actions,
  #opisPricingPage .opis-pricing-head-actions,
  #opisLogMonitorPage .opis-log-monitor-actions {
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 27px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    transform: none !important;
  }

  /*
   * Yenileme butonlarını Modüller ile eşitle
   */
  #reloadTerminalManagementButton,
  #reloadPosManagementButton,
  #reloadOpisModulesButton,
  #reloadOpisPricingButton {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  #reloadTerminalManagementButton::before,
  #reloadPosManagementButton::before,
  #reloadOpisModulesButton::before,
  #reloadOpisPricingButton::before {
    content: "↻" !important;
    color: var(--navy) !important;
    font-size: 1.28rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  /*
   * Fiyatlandırma Yetki Ver butonu
   */
  #opisPricingDelegationButton {
    width: auto !important;
    min-width: 68px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: .68rem !important;
    white-space: nowrap !important;
  }

  /*
   * Şimdi tara butonu biraz daha kompakt
   */
  #opisLogScanNowButton {
    width: auto !important;
    min-width: 112px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: .70rem !important;
    white-space: nowrap !important;
  }

  /*
   * Önceki fiyatlandırma kurallarından kalan
   * eksi konumlandırmaları temizle.
   */
  #opisPricingPage .opis-pricing-head,
  #opisPricingPage .opis-pricing-head *,
  #opisPricingPage #opisPricingServerStatus {
    translate: none !important;
  }

  #opisPricingPage #opisPricingServerStatus {
    margin-top: 0 !important;
  }
}

/* OPIS_LOG_DETAIL_MODAL_CENTER_V42 */
@media (max-width: 760px) {

  /*
   * Log Kayıtları sayfasından açılan detay penceresi:
   * sağ ve sol boşlukları eşitle.
   */
  body:has(#opisLogMonitorPage:not(.hidden)) .modal {
    padding-left: 14px !important;
    padding-right: 14px !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  body:has(#opisLogMonitorPage:not(.hidden)) .modal-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;

    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;

    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /*
   * Log detay penceresindeki geniş içerikler
   * pencereyi sağa doğru büyütmesin.
   */
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
   * İşlem listesinin kendi içinde yatay kaymasına izin ver.
   */
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card table {
    min-width: 620px !important;
  }

  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card .table-wrap,
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card .table-scroll,
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card [class*="transactions"],
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card [class*="history"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    box-sizing: border-box !important;
  }
}

/* OPIS_LOG_MODAL_BOTTOM_OVERFLOW_FIX_V45 */
@media (max-width: 760px) {

  /*
   * Pencereyi ekranın ortasında tut ve
   * üst-alt güvenli boşluk oluştur.
   */
  body:has(#opisLogMonitorPage:not(.hidden)) .modal {
    display: grid !important;
    place-items: center !important;
    padding: 18px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
   * Detay kutusu ekranın altına dayanmasın.
   * Uzun içerik kutunun içerisinde kaydırılsın.
   */
  body:has(#opisLogMonitorPage:not(.hidden)) .modal-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;

    height: auto !important;
    max-height: calc(100dvh - 36px) !important;

    margin: auto !important;
    padding-bottom: 14px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    box-sizing: border-box !important;
  }

  /*
   * Son satır kutunun alt kenarına yapışmasın.
   */
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card > *:last-child {
    margin-bottom: 10px !important;
  }
}

/* OPIS_LOG_MODAL_HEIGHT_REPAIR_V46 */
@media (max-width: 760px) {

  body:has(#opisLogMonitorPage:not(.hidden)) .modal {
    display: grid !important;
    place-items: center !important;
    padding: 18px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(#opisLogMonitorPage:not(.hidden)) .modal-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;

    height: calc(100dvh - 36px) !important;
    min-height: calc(100dvh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;

    margin: auto !important;
    padding-bottom: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
   * Son elemana eklenen boşluğu kaldır.
   */
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal-card > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* OPIS_LOG_HIDDEN_MODAL_FIX_V47 */
@media (max-width: 760px) {

  /*
   * Kapalı modal hiçbir koşulda görünmesin.
   */
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Yalnızca gerçekten açılmış modal ortalansın.
   */
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal:not(.hidden) {
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 18px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(#opisLogMonitorPage:not(.hidden))
  .modal:not(.hidden) .modal-card {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;

    height: calc(100dvh - 36px) !important;
    min-height: calc(100dvh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;

    margin: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* OPIS_LIVE_REPORT_HEADER_MATCH_V48 */
@media (max-width: 760px) {

  /*
   * Anlık Rapor başlığını Modüller başlığıyla eşitle.
   */
  #liveReportPage .live-report-head {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #liveReportPage
  .live-report-head > div:first-child {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /*
   * OPIS SUNUCULARI
   */
  #liveReportPage .live-report-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--magenta) !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  /*
   * Anlık Rapor
   */
  #liveReportPage .live-report-head h1 {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--ink) !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  /*
   * Alt açıklama
   */
  #liveReportPage .live-report-head p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--muted) !important;
    font-size: .70rem !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  /*
   * Önceki ve sonraki gün butonlarını kaldır.
   * Başlık alanında yalnız yenile butonu kalır.
   */
  #liveReportPage
  .live-report-head-actions
  > button:not([id*="reload" i]) {
    display: none !important;
  }

  /*
   * Yenile butonunu başlık hizasına getir.
   */
  #liveReportPage .live-report-head-actions {
    position: static !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 27px 0 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;

    transform: none !important;
  }

  /*
   * Kalan yenile butonunu Modüller ile eşitle.
   */
  #liveReportPage
  .live-report-head-actions
  > button[id*="reload" i] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: 12px !important;

    color: transparent !important;
    font-size: 0 !important;
    white-space: nowrap !important;
  }

  #liveReportPage
  .live-report-head-actions
  > button[id*="reload" i]::before {
    content: "↻" !important;
    color: var(--navy) !important;
    font-size: 1.28rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
}

/* OPIS_LIVE_REPORT_FINAL_LAYOUT_V49 */
@media (max-width: 760px) {

  /*
   * Başlık alanı Modüller menüsündeki gibi
   * tek ve tam genişlikte metin alanıdır.
   */
  #liveReportPage .live-report-head {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #liveReportPage
  .live-report-head > div:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 52px 0 0 !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  /*
   * Üst açıklama
   */
  #liveReportPage .live-report-head .eyebrow {
    display: block !important;
    width: auto !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--magenta) !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    transform: none !important;
  }

  /*
   * Sayfa başlığı
   */
  #liveReportPage .live-report-head h1 {
    display: block !important;
    width: auto !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--ink) !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;

    transform: none !important;
  }

  /*
   * Alt açıklama
   */
  #liveReportPage .live-report-head p {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--muted) !important;
    font-size: .70rem !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;

    transform: none !important;
  }

  /*
   * Önceki ve ertesi gün alanını tamamen kaldır.
   * JavaScript hidden sınıfını kaldırsa bile görünmez.
   */
  #liveReportPage .live-report-date-navigation,
  #previousLiveReportDateButton,
  #nextLiveReportDateButton {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Yenileme alanı başlığın sağında sabitlenir.
   */
  #liveReportPage .live-report-head-actions {
    position: absolute !important;
    z-index: 2 !important;
    top: 27px !important;
    right: 0 !important;

    display: block !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

  /*
   * Yenile butonu Modüller ile aynı ölçüde.
   */
  #reloadLiveReportButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: 12px !important;

    color: transparent !important;
    font-size: 0 !important;
    white-space: nowrap !important;

    transform: none !important;
  }

  #reloadLiveReportButton::before {
    content: "↻" !important;
    color: var(--navy) !important;
    font-size: 1.28rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  /*
   * Başlıktan sonraki tarih kutusunun konumu.
   */
  #liveReportPage .live-report-meta {
    margin-top: 0 !important;
  }
}

/* OPIS_LIVE_REPORT_SPACING_FOOTER_V50 */
@media (max-width: 760px) {

  /*
   * Sayfanın kendisinden gelen eski üst boşlukları kaldır.
   * Başlangıç noktası Modüller menüsüyle aynı olur.
   */
  #liveReportPage:not(.hidden) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }

  /*
   * Başlıkta yalnız workspace boşluğu kullanılır.
   */
  #liveReportPage .live-report-head {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }

  /*
   * Yenileme butonunu yeni başlık yüksekliğine göre hizala.
   */
  #liveReportPage .live-report-head-actions {
    top: 13px !important;
    right: 0 !important;
  }

  /*
   * Sayfanın son içeriği sabit footer altında kalmasın.
   */
  body:has(#liveReportPage:not(.hidden)) .workspace {
    padding-bottom: 0 !important;
  }

  /* Sayfa altında boş bant oluşturma; pay yalnız listenin sonunda. */
  #liveReportPage {
    padding-bottom: 0 !important;
  }

  #liveReportGrid::after {
    content: "" !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    height: 52px !important;
  }

  /*
   * Anlık Rapor açıkken ana footer sabit ve görünür.
   */
  body:has(#liveReportPage:not(.hidden)) footer,
  body:has(#liveReportPage:not(.hidden)) .app-footer,
  body:has(#liveReportPage:not(.hidden)) .site-footer {
    position: fixed !important;
    z-index: 40 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* LIVE_REPORT_FOOTER_MATCH_CAMPAIGNS_V1 */
@media (max-width: 760px) {
  body:has(#liveReportPage:not(.hidden))
  .main-shell > .global-app-footer {
    box-sizing: border-box !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 12px !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 18px !important;
  }
}

/* COLLECTIONS_HEADER_FOOTER_V1 */
@media (max-width: 760px) {
  #collectionsPage > .page-head {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 12px !important;
    padding-top: 14px !important;
    align-items: flex-start !important;
  }
  #collectionsPage > .page-head .eyebrow {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: .62rem !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }
  #collectionsPage > .page-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
  }
  #collectionsPage > .page-head p {
    margin: 0 !important;
    font-size: .70rem !important;
    line-height: 1.32 !important;
  }
  body:has(#collectionsPage:not(.hidden))
  .main-shell > .global-app-footer {
    position: fixed !important;
    z-index: 40 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: white !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #collectionsPage {
    padding-bottom: 26px !important;
  }
}

/* COLLECTIONS_HEADER_SPACING_V2 */
@media (max-width: 760px) {
  body:has(#collectionsPage:not(.hidden)) .workspace {
    padding-top: 10px !important;
  }
  #collectionsPage > .page-head {
    margin-top: 0 !important;
  }
  #collectionsPage > .page-head > div > p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
  }
}

/* SETTLEMENTS_HEADER_FOOTER_V1 */
@media (max-width: 760px) {
  body:has(#settlementsPage:not(.hidden)) .workspace {
    padding-top: 10px !important;
  }

  #settlementsPage > .page-head {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
    align-items: flex-start !important;
  }

  #settlementsPage > .page-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #settlementsPage > .page-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
  }

  #settlementsPage > .page-head > div > p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .70rem !important;
    line-height: 1.32 !important;
  }

  body:has(#settlementsPage:not(.hidden))
  .main-shell > .global-app-footer {
    position: fixed !important;
    z-index: 40 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #settlementsPage {
    padding-bottom: 26px !important;
  }
}

/* REPORTS_HEADER_FOOTER_V1 */
@media (max-width: 760px) {
  body:has(#reportsPage:not(.hidden)) .workspace {
    padding-top: 10px !important;
  }

  #reportsPage > .page-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
  }

  #reportsPage > .page-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #reportsPage > .page-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
  }

  #reportsPage > .page-head > div > p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .70rem !important;
    line-height: 1.32 !important;
  }

  #reportsPage > .page-head #newReportButton {
    width: 100% !important;
    margin: 0 !important;
  }

  body:has(#reportsPage:not(.hidden))
  .main-shell > .global-app-footer {
    position: fixed !important;
    z-index: 40 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #reportsPage {
    padding-bottom: 26px !important;
  }
}

/* REPORTS_MOBILE_NEW_BUTTON_V2 */
@media (max-width: 760px) {
  #reportsPage > .page-head {
    display: block !important;
    position: relative !important;
  }

  #reportsPage > .page-head #newReportButton {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  #reportsPage #newReportButton > span {
    font-size: 0 !important;
  }

  #reportsPage #newReportButton > span::after {
    content: "Yeni Rapor";
    font-size: .78rem;
    font-weight: 750;
  }
}

/* PARTICIPATION_HEADERS_FOOTERS_V1 */
@media (max-width: 760px) {
  body:has(#participationsPage:not(.hidden)) .workspace,
  body:has(#monthlyParticipationsPage:not(.hidden)) .workspace {
    padding-top: 10px !important;
  }

  #participationsPage > .weekly-participation-head,
  #monthlyParticipationsPage > .weekly-participation-head {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
  }

  #participationsPage > .weekly-participation-head .eyebrow,
  #monthlyParticipationsPage > .weekly-participation-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #participationsPage > .weekly-participation-head h1,
  #monthlyParticipationsPage > .weekly-participation-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
  }

  #participationsPage > .weekly-participation-head > div:first-child > p,
  #monthlyParticipationsPage > .weekly-participation-head > div:first-child > p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--muted) !important;
    font-size: .70rem !important;
    line-height: 1.32 !important;
  }

  body:has(#participationsPage:not(.hidden))
  .main-shell > .global-app-footer,
  body:has(#monthlyParticipationsPage:not(.hidden))
  .main-shell > .global-app-footer {
    position: fixed !important;
    z-index: 40 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #participationsPage,
  #monthlyParticipationsPage {
    padding-bottom: 26px !important;
  }
}

/* MONTHLY_SAVE_STATUS_CARD_V1 */
@media (max-width: 760px) {
  #monthlyParticipationSaveStatus {
    display: block !important;
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 12px 14px !important;
    border: 1px solid #e1d5aa !important;
    border-radius: 14px !important;
    background: #fffaf0 !important;
    box-sizing: border-box !important;
  }

  #monthlyParticipationSaveStatus > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  #monthlyParticipationSaveStatus span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
  }

  #monthlyParticipationSaveStatus strong {
    display: block !important;
    margin-top: 3px !important;
    color: #805d08 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  #monthlyParticipationSaveStatus small {
    display: block !important;
    margin-top: 3px !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #monthlyParticipationSaveStatus.allowed {
    border-color: #9fddbd !important;
    background: #effbf5 !important;
  }
  #monthlyParticipationSaveStatus.allowed strong {
    color: #087148 !important;
  }
  #monthlyParticipationSaveStatus.saved {
    border-color: #bbb9eb !important;
    background: #f1f0ff !important;
  }
  #monthlyParticipationSaveStatus.saved strong {
    color: #29257b !important;
  }
  #monthlyParticipationSaveStatus.error {
    border-color: #efbdc4 !important;
    background: #fff4f5 !important;
  }
  #monthlyParticipationSaveStatus.error strong {
    color: #bd2639 !important;
  }
}

/* METER_READING_MOBILE_LAYOUT_V1 */
@media (max-width: 760px) {
  body:has(#electricityPage:not(.hidden)) .workspace {
    padding-top: 10px !important;
  }

  #electricityPage > .meter-reading-page-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
  }

  #electricityPage > .meter-reading-page-head > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #electricityPage > .meter-reading-page-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #electricityPage > .meter-reading-page-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
  }

  #electricityPage > .meter-reading-page-head p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .70rem !important;
    line-height: 1.32 !important;
  }

  #reloadMeterReadingsButton {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #electricityPage > .meter-reading-period-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #electricityPage > .meter-reading-period-card > div {
    min-width: 0 !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #dedfeb !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  #electricityPage > .meter-reading-period-card > div:first-child {
    background: #fff !important;
  }

  #electricityPage > .meter-reading-period-card > div:last-child {
    background: #302d83 !important;
  }

  body:has(#electricityPage:not(.hidden))
  .main-shell > .global-app-footer {
    position: fixed !important;
    z-index: 40 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #electricityPage {
    padding-bottom: 26px !important;
  }
}

/* ELECTRICITY_REPORT_MOBILE_LAYOUT_V1 */
@media (max-width: 760px) {
  body:has(#electricityReportPage:not(.hidden)) .workspace {
    padding-top: 10px !important;
  }

  #electricityReportPage > .electricity-report-page-head {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 14px 0 0 !important;
    overflow: visible !important;
  }

  #electricityReportPage > .electricity-report-page-head .eyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .15em !important;
  }

  #electricityReportPage > .electricity-report-page-head h1 {
    margin: 0 0 4px !important;
    font-size: 1.58rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
  }

  #electricityReportPage > .electricity-report-page-head p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .70rem !important;
    line-height: 1.32 !important;
  }

  #electricityReportPage .electricity-report-head-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    overflow: visible !important;
  }

  #reloadElectricityReportButton {
    position: absolute !important;
    top: 14px !important;
    right: 0 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #electricityReportPage #finalizeElectricityReportButton,
  #electricityReportPage #printElectricityReportButton {
    grid-column: 1 / -1 !important;
  }

  body:has(#electricityReportPage:not(.hidden))
  .main-shell > .global-app-footer {
    position: fixed !important;
    z-index: 40 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #electricityReportPage {
    padding-bottom: 26px !important;
  }
}

/* ELECTRICITY_REPORT_COMPACT_CARDS_V2 */
@media (max-width: 760px) {
  #electricityReportPage > .electricity-report-page-head {
    top: auto !important;
    transform: none !important;
  }

  #electricityReportPage
  > .electricity-report-period-card
  > div:nth-child(-n + 2) {
    min-height: 79px !important;
    height: auto !important;
    padding: 12px 18px !important;
  }

  #electricityReportPage
  .electricity-summary-card.general {
    min-height: 84px !important;
    height: auto !important;
    padding: 12px 17px !important;
  }
}


/* TOPBAR_CARD_REPORT_SHORTCUT_V1 */
.topbar-card-report-shortcut {
  flex: 0 0 auto;
  width: 46px;
  height: 42px;
  margin-left: auto;
  margin-right: 12px;
  padding: 0;
  border: 1px solid #dedfeb;
  border-radius: 13px;
  background: #f6f5fb;
  color: #27236f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.topbar-card-report-shortcut svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-card-report-shortcut:hover {
  border-color: #bbb9df;
  background: #eeecfa;
}

.topbar-card-report-shortcut:active {
  transform: scale(.96);
}

.topbar-card-report-shortcut:focus-visible {
  outline: 3px solid rgba(43, 39, 125, .22);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .topbar-card-report-shortcut {
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: 10px;
    border-radius: 13px;
  }

  .topbar-card-report-shortcut svg {
    width: 24px;
    height: 24px;
  }
}


/* TOPBAR_CARD_REPORT_POSITION_V2 */
.topbar-card-report-shortcut {
  margin-left: auto !important;
  margin-right: 7px !important;
}

.topbar-card-report-shortcut + .user-box {
  margin-left: 0 !important;
}

@media (max-width: 760px) {
  .topbar-card-report-shortcut {
    margin-left: auto !important;
    margin-right: 7px !important;
  }

  .topbar-card-report-shortcut + .user-box {
    margin-left: 0 !important;
  }
}


/* TOPBAR_REAL_CARD_IMAGE_V3 */
.topbar-card-report-shortcut img {
  display: block;
  width: 36px;
  height: 24px;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(25, 25, 70, .18);
}

@media (max-width: 760px) {
  .topbar-card-report-shortcut img {
    width: 35px;
    height: 23px;
    border-radius: 5px;
  }
}

/* TOPBAR_CARD_REPORT_MOBILE_LEFT_OF_CASTLE_V1 */
@media (max-width: 760px) {
  .topbar .topbar-card-report-shortcut {
    position: absolute;
    right: 126px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
  }
}

/* TOPBAR_MOBILE_PROFILE_RIGHT_FIX_V1 */
@media (max-width: 760px) {
  .topbar .user-box {
    position: absolute;
    right: 18px;
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 0 0 auto;
  }
}

/* USER_PROFILE_PHOTO_STYLE_V1 */
#userAvatar {
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
}

#userAvatar .user-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

#userAvatar:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* WEB_NOTIFICATION_CASTLE_POSITION_V1 */
@media (min-width: 761px) {
  .topbar .notification-center { margin-left: auto !important; }

  .topbar .notification-center + .user-box {
    margin-left: 0 !important;
  }
}

/* WEB_TOPBAR_RIGHT_GROUP_FINAL_V1 */
@media (min-width: 761px) {
  .topbar .topbar-card-report-shortcut {
    margin-left: 0 !important;
    margin-right: 7px !important;
  }

  .topbar .notification-center {
    margin-left: auto !important;
  }

  .topbar .notification-center + .user-box {
    margin-left: 0 !important;
  }
}

/* WEB_TOPBAR_RIGHT_GROUP_BY_PERMISSION_V2 */
@media (min-width: 761px) {
  .topbar .topbar-card-report-shortcut {
    margin-right: 7px !important;
  }

  /* Kart raporu yetkisi varsa sağ grubu kart başlatır. */
  .topbar.has-card-report-shortcut .topbar-card-report-shortcut {
    margin-left: auto !important;
  }

  .topbar.has-card-report-shortcut .notification-center {
    margin-left: 0 !important;
  }

  /* Kart raporu yetkisi yoksa sağ grubu bildirim kalesi başlatır. */
  .topbar:not(.has-card-report-shortcut) .topbar-card-report-shortcut {
    margin-left: 0 !important;
  }

  .topbar:not(.has-card-report-shortcut) .notification-center {
    margin-left: auto !important;
  }

  .topbar .notification-center + .user-box {
    margin-left: 0 !important;
  }
}

/* OPIS_SINGLE_ALERT_HIDE_BUTTON_V1 */
.opis-log-alert-wrap {
  position: relative;
  min-width: 0;
  height: 120px;
}

.opis-log-alert-wrap > .opis-log-alert {
  height: 120px;
  padding-right: 58px;
}

.opis-log-alert-hide {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  min-width: 40px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #7a1f1b;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.opis-log-alert-hide:hover,
.opis-log-alert-hide:focus-visible {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.35);
}

.opis-log-alert-hide:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* OPIS_HIDE_MODAL_MOBILE_COMPACT_V1 */
@media (max-width: 760px) {
  .modal-card:has(.opis-log-hide-modal) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 32px) !important;
  }

  .opis-log-hide-modal {
    min-height: 0 !important;
  }

  .opis-log-hide-modal .modal-footer {
    margin-top: 18px;
  }
}

/* OPIS_HIDE_MODAL_MOBILE_COMPACT_V2 */
@media (max-width: 760px) {
  .modal:has(.opis-log-hide-modal) {
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  .modal-card:has(.opis-log-hide-modal) {
    position: relative !important;
    inset: auto !important;
    width: min(420px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 24px 22px 20px !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 22px !important;
  }

  .opis-log-hide-modal {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .opis-log-hide-modal > .eyebrow {
    display: block;
    margin: 0 0 6px;
  }

  .opis-log-hide-modal > h2 {
    margin: 0 0 10px !important;
    padding-right: 28px;
    font-size: 26px !important;
  }

  .opis-log-hide-modal > p {
    margin: 0 !important;
  }

  .opis-log-hide-modal .modal-footer {
    margin-top: 20px !important;
  }
}

/* OPIS_HIDE_MODAL_MOBILE_COMPACT_V3 */
@media (max-width: 760px) {
  body:has(#opisLogMonitorPage:not(.hidden))
  .modal:not(.hidden)
  .modal-card:has(.opis-log-hide-modal) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;

    width: calc(100vw - 36px) !important;
    max-width: 420px !important;

    margin: auto !important;
    padding: 24px 22px 20px !important;

    overflow: visible !important;
  }
}


/* OPIS_TIMELINE_HEADER_STICKY_V1 */
.modal-card:has(.opis-log-investigation)
.opis-log-timeline thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  box-shadow: 0 1px 0 #e1e4eb;
}

/* OPIS_YELLOW_REVIEWED_LABEL_V1 */
#opisLogMonitorPage
.opis-log-alert-yellow
.opis-log-yellow-reviewed {
  margin-top: 0 !important;
  justify-self: end;
  text-align: right;
  color: #b42318 !important;
  opacity: 1 !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}


/* MANUAL_BALANCE_REVIEW_CSS_V1 */
/* Teknik belirsizlik: risk ve OPIS hata renklerinden ayrı. */
.opis-log-alert-manual {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #1f2937;
}

.opis-log-alert-manual:hover,
.opis-log-alert-manual:focus-visible {
  background: #d1d5db;
  border-color: #6b7280;
}

.opis-log-alert-manual strong,
.opis-log-alert-manual span,
.opis-log-alert-manual small {
  color: #1f2937;
}

/* OPIS_OVERRIDE_MOBILE_SCROLL_V3 */
@media (max-width: 760px), (pointer: coarse) {
  body:has(#opisLogMonitorPage:not(.hidden))
  #modal.modal:not(.hidden):has(.opis-log-investigation) > .modal-card {
    display: block !important;
    height: calc(100dvh - 36px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #modal.modal #modalContent:has(.opis-log-investigation),
  #modal.modal #modalContent > .opis-log-investigation {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  #modal.modal #modalContent .opis-log-investigation-summary {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #modal.modal #modalContent .opis-log-timeline-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    touch-action: pan-x pan-y !important;
  }
}




/* OPIS_FOUND_BOTTOM_RIGHT_CONFIRMED_V3 */
#opisLogMonitorPage .opis-log-alert-wrap > [data-opis-clone-found] {
  position: absolute !important;
  inset: auto 10px 8px auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 5 !important;
}


/* OPIS_FOUND_MOBILE_UP_V4 */
@media (max-width: 760px) {
  #opisLogMonitorPage .opis-log-alert-wrap > [data-opis-clone-found] {
    inset: auto 10px 18px auto !important;
  }
}

/* OPIS_ORANGE_CONFIRM_COMPACT_V1 */
@media (max-width: 760px), (pointer: coarse) {
  body #modal.modal:not(.hidden):has(#confirmOpisOrangeBulkHide) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
  }

  body #modal.modal:not(.hidden):has(#confirmOpisOrangeBulkHide) > .modal-card {
    display: block !important;
    flex: 0 1 auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 24px !important;
    overflow-y: auto !important;
  }

  #modal #modalContent:has(#confirmOpisOrangeBulkHide),
  #modal .terminal-action-modal:has(#confirmOpisOrangeBulkHide) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #modal .terminal-action-modal:has(#confirmOpisOrangeBulkHide) h2 {
    padding-right: 24px;
    font-size: 22px !important;
  }

  #modal .terminal-action-modal:has(#confirmOpisOrangeBulkHide) .modal-footer {
    margin-top: 20px !important;
  }
}

/* PARTICIPATION_SAVED_HISTORY_LAYOUT_V1 */
.participation-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-top: 1px solid #e1e2eb;
}
.participation-history-row > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.participation-history-row > div:first-child strong { line-height: 1.5; overflow-wrap: anywhere; }
.participation-history-row small { display: block; line-height: 1.6; font-variant-numeric: tabular-nums; }
.participation-history-row .weekly-participation-history-total { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-shrink: 0; }
.participation-history-row .weekly-participation-history-total > strong { white-space: nowrap; }
@media (max-width: 760px) {
  .participation-history-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .participation-history-row .weekly-participation-history-total { justify-content: space-between; flex-wrap: wrap; }
  .participation-history-row .soft-button { min-height: 38px; }
}