:root {
  --app-primary: #0876b9;
  --app-primary-dark: #064f91;
  --app-background: #f4f8fc;
  --app-surface: #ffffff;
  --app-text: #172033;
  --app-muted: #657186;
  --app-border: #dce5ef;
  --app-danger: #c9364f;
  --app-success: #16835d;
  --app-shadow: 0 20px 60px rgba(22, 54, 88, 0.12);
  --status-transition-start: #f2f2f7;
  --status-transition-mid: rgba(242, 242, 247, 0.82);
  --status-transition-end: rgba(242, 242, 247, 0);
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(20px, env(safe-area-inset-left));
  --safe-right: max(20px, env(safe-area-inset-right));
  --app-viewport-height: 100dvh;
  --app-viewport-offset-top: 0px;
  --keyboard-height: 0px;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  background: #e9eff6;
  color: var(--app-text);
  font-family: "Google Sans Flex", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

input,
textarea,
select,
button {
  font-size: 16px;
}

/* Müşteri uygulamasının masaüstü karşılama ekranı. Panel bu yapıyı yüklemez. */
.desktop-app-gate { display: none; }

html.desktop-client body {
  min-height: 100dvh;
  overflow: auto;
  background: #07131f;
  touch-action: auto;
  overscroll-behavior: auto;
}

html.desktop-client .mobile-stage { display: none !important; }

html.desktop-client .desktop-app-gate {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100dvh;
  align-content: center;
  overflow: hidden;
  background:
    linear-gradient(125deg, rgba(5,19,32,.97), rgba(7,31,51,.94)),
    radial-gradient(circle at 72% 38%, rgba(34,151,220,.24), transparent 30rem);
  padding: clamp(30px, 5vw, 72px);
  color: #fff;
}

.desktop-gate-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.desktop-gate-glow-one { top: -24rem; right: -12rem; width: 52rem; height: 52rem; background: radial-gradient(circle, rgba(29,151,222,.22), transparent 68%); }
.desktop-gate-glow-two { bottom: -28rem; left: -18rem; width: 52rem; height: 52rem; background: radial-gradient(circle, rgba(16,99,169,.19), transparent 68%); }
.desktop-gate-shell { display: grid; width: min(1120px,100%); margin: auto; grid-template-columns: minmax(0,1.3fr) minmax(330px,.7fr); align-items: center; gap: clamp(45px,7vw,100px); }
.desktop-gate-copy { min-width: 0; }
.desktop-gate-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 58px; }
.desktop-gate-brand > span { display: grid; width: 64px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.desktop-gate-brand img { width: 52px; height: 42px; object-fit: contain; }
.desktop-gate-brand > div { display: grid; gap: 2px; }
.desktop-gate-brand strong { font-size: 16px; letter-spacing: -.01em; }
.desktop-gate-brand small { color: #7f9ab1; font-size: 11px; }
.desktop-gate-badge { display: inline-flex; min-height: 35px; align-items: center; gap: 8px; margin-bottom: 18px; border: 1px solid rgba(84,190,245,.16); border-radius: 999px; background: rgba(38,143,202,.1); padding: 0 13px; color: #72caf9; font-size: 11px; font-weight: 700; letter-spacing: .025em; }
.desktop-gate-badge svg { width: 16px; }
.desktop-gate-copy h1 { max-width: 720px; margin: 0; font-size: clamp(46px,5.2vw,76px); line-height: .98; letter-spacing: -.065em; }
.desktop-gate-copy h1 em { color: #52baf0; font-style: normal; }
.desktop-gate-copy > p { max-width: 640px; margin: 25px 0 0; color: #9bb0c2; font-size: 16px; line-height: 1.65; }
.desktop-gate-steps { display: grid; max-width: 640px; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 34px; }
.desktop-gate-steps > span { display: grid; min-width: 0; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(255,255,255,.035); padding: 11px; }
.desktop-gate-steps b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgba(69,177,235,.13); color: #68c4f4; font-size: 12px; }
.desktop-gate-steps small { color: #afbecc; font-size: 10px; line-height: 1.35; }
.desktop-gate-address { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; margin-top: 24px; border-radius: 13px; color: #d3e3ef; font-size: 12px; font-weight: 650; text-decoration: none; }
.desktop-gate-address svg { width: 17px; color: #54bdf2; }
.desktop-gate-address svg:last-child { opacity: .6; }
.desktop-gate-address:hover span { color: #70ccfa; }
.desktop-gate-qr-panel { position: relative; display: grid; justify-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 32px; background: linear-gradient(155deg,rgba(255,255,255,.105),rgba(255,255,255,.045)); padding: 24px; box-shadow: 0 36px 90px rgba(0,0,0,.3); backdrop-filter: blur(22px); }
.desktop-gate-qr-panel::before { content: ""; position: absolute; top: -90px; right: -80px; width: 210px; height: 210px; border-radius: 50%; background: rgba(59,181,243,.12); filter: blur(1px); }
.desktop-gate-qr-top { position: relative; display: flex; width: 100%; align-items: center; gap: 11px; margin-bottom: 20px; }
.desktop-gate-qr-top > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: rgba(73,184,241,.13); color: #66c7f8; }
.desktop-gate-qr-top svg { width: 20px; }
.desktop-gate-qr-top > div { display: grid; gap: 2px; }
.desktop-gate-qr-top strong { font-size: 15px; }
.desktop-gate-qr-top small { color: #8ca4b7; font-size: 10px; }
.desktop-gate-qr { position: relative; display: block; width: min(255px,100%); aspect-ratio: 1; border-radius: 25px; background: #fff; padding: 13px; box-shadow: 0 22px 48px rgba(0,0,0,.24); transition: transform .2s ease, box-shadow .2s ease; }
.desktop-gate-qr:hover { transform: translateY(-3px); box-shadow: 0 28px 58px rgba(0,0,0,.3); }
.desktop-gate-qr svg { display: block; width: 100%; height: 100%; }
.desktop-gate-scan-label { display: inline-flex; align-items: center; gap: 7px; margin-top: 21px; font-size: 13px; }
.desktop-gate-scan-label svg { width: 18px; color: #61c6f8; }
.desktop-gate-qr-panel > p { max-width: 285px; margin: 8px 0 19px; color: #90a6b8; font-size: 10px; line-height: 1.5; text-align: center; }
.desktop-gate-trust { display: flex; width: 100%; justify-content: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 17px; }
.desktop-gate-trust span { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(255,255,255,.045); padding: 7px 9px; color: #91a8ba; font-size: 9px; font-weight: 650; }
.desktop-gate-trust svg { width: 14px; color: #53caa0; }
.desktop-gate-footer { display: flex; width: min(1120px,100%); justify-content: space-between; margin: 38px auto 0; color: #506b80; font-size: 10px; }

@media (max-width: 850px) {
  html.desktop-client .desktop-app-gate { padding: 28px; }
  .desktop-gate-shell { grid-template-columns: 1fr; gap: 34px; }
  .desktop-gate-brand { margin-bottom: 34px; }
  .desktop-gate-copy h1 { font-size: clamp(40px,10vw,58px); }
  .desktop-gate-qr-panel { width: min(390px,100%); margin: auto; }
  .desktop-gate-footer { margin-top: 26px; }
}

/* Masaüstü QR ekranının sade kurumsal görünümü. */
html.desktop-client body { background: #f2f4f6; }
html.desktop-client .desktop-app-gate {
  align-content: stretch;
  min-height: 100dvh;
  overflow: auto;
  background: #f2f4f6;
  padding: 0 clamp(32px,6vw,88px);
  color: #18212d;
}
.desktop-gate-header {
  display: flex;
  width: min(1040px,100%);
  min-height: 110px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid #dfe3e7;
}
.desktop-gate-brand { display: flex; align-items: center; gap: 18px; margin: 0; }
.desktop-gate-brand img { width: 82px; height: 48px; object-fit: contain; }
.desktop-gate-brand > span { display: block; width: auto; height: auto; flex: 0 1 auto; place-items: initial; border: 0; border-left: 1px solid #d6dbe0; border-radius: 0; background: transparent; padding-left: 18px; color: #717b87; font-size: 12px; box-shadow: none; }
.desktop-gate-header-address { color: #8b949e; font-size: 12px; }
.desktop-gate-shell {
  display: grid;
  width: min(960px,100%);
  flex: 1;
  grid-template-columns: minmax(0,1fr) 330px;
  align-items: center;
  gap: clamp(60px,9vw,120px);
  margin: auto;
  padding: 60px 0;
}
.desktop-gate-kicker { margin: 0 0 16px !important; color: #0876b9 !important; font-size: 12px !important; font-weight: 750; letter-spacing: .14em; }
.desktop-gate-copy h1 { max-width: 570px; margin: 0; color: #172033; font-size: clamp(44px,5vw,64px); line-height: 1.04; letter-spacing: -.05em; }
.desktop-gate-copy > p:not(.desktop-gate-kicker) { max-width: 560px; margin: 23px 0 0; color: #65707d; font-size: 16px; line-height: 1.65; }
.desktop-gate-help { display: flex; align-items: center; gap: 14px; margin-top: 31px; }
.desktop-gate-help > svg { width: 23px; color: #0876b9; }
.desktop-gate-help > span { display: grid; gap: 3px; }
.desktop-gate-help strong { color: #293440; font-size: 13px; }
.desktop-gate-help small { color: #7c8691; font-size: 11px; }
.desktop-gate-address { display: inline-flex; min-height: auto; align-items: center; gap: 6px; margin-top: 28px; color: #737d88; font-size: 11px; font-weight: 400; text-decoration: none; }
.desktop-gate-address strong { color: #0876b9; font-weight: 700; }
.desktop-gate-address svg { width: 15px; color: #0876b9; }
.desktop-gate-qr-panel {
  display: grid;
  justify-items: center;
  overflow: visible;
  border: 1px solid #dfe4e8;
  border-radius: 20px;
  background: #fff;
  padding: 27px;
  box-shadow: 0 18px 48px rgba(25,39,55,.08);
  backdrop-filter: none;
}
.desktop-gate-qr-panel::before { display: none; }
.desktop-gate-scan-label { margin: 0; color: #26313d; font-size: 14px; }
.desktop-gate-qr-panel > p { margin: 5px 0 20px; color: #808a94; font-size: 10px; }
.desktop-gate-qr { width: 226px; border: 1px solid #eef0f2; border-radius: 12px; padding: 8px; box-shadow: none; transition: none; }
.desktop-gate-qr:hover { transform: none; box-shadow: none; }
.desktop-gate-qr-address { margin-top: 17px; color: #8a939c; font-size: 10px; }
.desktop-gate-footer { display: flex; width: min(1040px,100%); min-height: 70px; align-items: center; justify-content: space-between; margin: 0 auto; border-top: 1px solid #dfe3e7; color: #9199a2; font-size: 10px; }

@media (max-width: 850px) {
  html.desktop-client .desktop-app-gate { padding: 0 26px; }
  .desktop-gate-header { min-height: 90px; }
  .desktop-gate-header-address { display: none; }
  .desktop-gate-shell { grid-template-columns: 1fr; gap: 40px; padding: 45px 0; }
  .desktop-gate-copy h1 { font-size: clamp(39px,9vw,52px); }
  .desktop-gate-qr-panel { width: min(330px,100%); }
}

/* Son masaüstü görünümü: yalnızca logo, metin ve QR. */
html.desktop-client body { background: #07111d; }
html.desktop-client .desktop-app-gate {
  align-content: center;
  overflow: hidden;
  background: #07111d;
  padding: clamp(40px,7vw,96px);
  color: #fff;
}
.desktop-gate-shell {
  width: min(1000px,100%);
  grid-template-columns: minmax(0,1fr) 320px;
  gap: clamp(70px,10vw,130px);
  margin: auto;
  padding: 0;
}
.desktop-gate-logo {
  display: block;
  width: 142px;
  height: 86px;
  margin-bottom: 50px;
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.desktop-gate-logo.uses-dark-logo { border-radius: 0; background: transparent; padding: 0; }
.desktop-gate-copy h1 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(48px,5.4vw,70px); line-height: 1.02; letter-spacing: -.055em; }
.desktop-gate-copy h1 em { color: #39a9e8; font-style: italic; }
.desktop-gate-copy > p { max-width: 620px; margin: 27px 0 0; color: #9baabc; font-size: 16px; line-height: 1.7; }
.desktop-gate-qr-panel {
  display: block;
  width: 320px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #0d1a28;
  padding: 24px;
  box-shadow: none;
}
.desktop-gate-qr { width: 100%; border: 0; border-radius: 14px; padding: 10px; }

@media (max-width: 850px) {
  html.desktop-client .desktop-app-gate { overflow: auto; padding: 38px 28px; }
  .desktop-gate-shell { grid-template-columns: 1fr; gap: 45px; }
  .desktop-gate-logo { margin-bottom: 34px; }
  .desktop-gate-copy h1 { font-size: clamp(40px,10vw,56px); }
  .desktop-gate-qr-panel { width: min(320px,100%); margin: 0; }
}

button,
a {
  touch-action: manipulation;
}

button {
  color: inherit;
}

.mobile-stage {
  position: relative;
  width: 100%;
  min-height: var(--app-viewport-height);
  height: var(--app-viewport-height);
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 2%, rgba(8, 118, 185, 0.08), transparent 28%),
    var(--app-background);
}

@media (max-width: 599px) {
  body.mobile-viewport-managed {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
  }

  body.mobile-viewport-managed .mobile-stage {
    position: fixed;
    top: var(--app-viewport-offset-top);
    right: 0;
    left: 0;
    min-height: 0;
    margin: 0 auto;
  }
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding:
    var(--safe-top)
    var(--safe-right)
    var(--safe-bottom)
    var(--safe-left);
  overflow: hidden;
  visibility: hidden;
  background:
    radial-gradient(circle at 92% 2%, rgba(8, 118, 185, 0.08), transparent 28%),
    var(--app-background);
  transform: translateX(102%);
  transition:
    transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 300ms;
  will-change: transform;
}

.screen.is-active {
  z-index: 3;
  visibility: visible;
  transform: translateX(0);
}

.screen.from-left {
  z-index: 3;
  visibility: visible;
  transform: translateX(-28%);
}

.screen.from-right {
  z-index: 3;
  visibility: visible;
  transform: translateX(102%);
}

.screen.to-left,
.screen.to-right {
  z-index: 2;
  visibility: visible;
}

.screen.to-left {
  transform: translateX(-28%);
}

.screen.to-right {
  transform: translateX(102%);
}

.welcome-screen {
  justify-content: space-between;
}

.welcome-visual {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: 4vh;
}

.brand-logo {
  display: block;
  object-fit: contain;
}

.brand-logo-large {
  width: min(86%, 330px);
  height: auto;
  margin: 0 auto 8px;
}

.welcome-copy {
  max-width: 340px;
  margin: -4px auto 0;
  text-align: center;
}

.welcome-copy h1,
.title-block h1,
.success-content h1 {
  margin: 0;
  font-size: clamp(29px, 8vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.welcome-copy p,
.title-block p {
  margin: 14px 0 0;
  color: var(--app-muted);
  font-size: 16px;
  line-height: 1.58;
}

.welcome-actions {
  display: grid;
  gap: 11px;
  width: 100%;
  padding-top: 28px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 54px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  transition:
    transform 120ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

.primary-button {
  border: 1px solid var(--app-primary);
  background: var(--app-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(8, 100, 163, 0.16);
}

.primary-button:active,
.secondary-button:active,
.icon-button:active {
  transform: scale(0.98);
}

.primary-button:hover {
  background: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}

.secondary-button {
  border: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--app-primary-dark);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.icon-button:focus-visible,
.text-button:focus-visible,
.inline-link:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(8, 118, 185, 0.18);
  outline-offset: 2px;
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.screen-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
}

.icon-button {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  cursor: pointer;
}

.icon-button svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.25;
}

.step-label {
  color: var(--app-muted);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.progress-track {
  flex: 0 0 auto;
  width: 100%;
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 4px;
  background: #dce6ef;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-primary);
  transition: width 250ms ease;
}

.screen-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  overflow: hidden auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  padding: clamp(32px, 8vh, 72px) 0 max(20px, 5vh);
}

.title-block {
  margin-bottom: 34px;
}

.eyebrow {
  display: block;
  margin-bottom: 9px;
  color: var(--app-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.title-block strong {
  color: var(--app-text);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.code-mark,
.success-mark,
.topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.code-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 19px;
  border-radius: 15px;
  background: rgba(8, 118, 185, 0.1);
  color: var(--app-primary);
}

.code-mark svg {
  width: 25px;
  height: 25px;
}

form {
  width: 100%;
}

.field-group {
  margin-bottom: 22px;
}

.field-group label {
  display: block;
  margin: 0 0 8px 2px;
  font-size: 14px;
  font-weight: 650;
}

.input-wrap {
  position: relative;
  display: flex;
  min-height: 56px;
  align-items: center;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.input-wrap:focus-within {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 4px rgba(8, 118, 185, 0.09);
}

.input-wrap > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: 17px;
  color: #8491a3;
  stroke-width: 1.9;
}

.input-wrap input {
  min-width: 0;
  min-height: 54px;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--app-text);
  padding: 0 16px 0 12px;
  font-size: 16px;
}

.input-wrap input::placeholder {
  color: #9aa5b4;
}

.field-message {
  min-height: 20px;
  margin: 7px 2px 0;
  color: var(--app-danger);
  font-size: 13px;
  line-height: 1.45;
}

.field-message.centered {
  margin-top: 11px;
  text-align: center;
}

.field-hint {
  margin: 8px 2px 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.45;
}

.form-submit {
  margin-top: 4px;
}

.otp-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.otp-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(7px, 2.1vw, 10px);
}

.otp-group input {
  width: 100%;
  min-width: 0;
  height: clamp(52px, 14vw, 59px);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  outline: 0;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  caret-color: var(--app-primary);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.otp-group input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(8, 118, 185, 0.1);
}

.otp-group.has-error input {
  border-color: rgba(201, 54, 79, 0.65);
  animation: otp-shake 280ms ease;
}

@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.text-button,
.inline-link {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--app-primary);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.resend-button {
  display: block;
  margin: 13px auto 0;
  padding: 0 10px;
}

.resend-button:disabled {
  color: var(--app-muted);
  cursor: default;
}

.inline-link {
  padding: 2px;
}

.is-hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.static-page {
  display: flex;
  flex-direction: column;
  padding:
    var(--safe-top)
    var(--safe-right)
    var(--safe-bottom)
    var(--safe-left);
}

.app-topbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.topbar-logo {
  width: 42px;
  height: 30px;
  object-fit: contain;
}

.topbar-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(8, 118, 185, 0.1);
  color: var(--app-primary);
}

.topbar-icon svg {
  width: 21px;
}

.success-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.success-mark {
  width: 66px;
  height: 66px;
  margin-bottom: 24px;
  border-radius: 22px;
  background: rgba(22, 131, 93, 0.11);
  color: var(--app-success);
}

.success-mark svg {
  width: 31px;
  height: 31px;
  stroke-width: 2.4;
}

.admin-mark {
  background: rgba(8, 118, 185, 0.1);
  color: var(--app-primary);
}

.success-content .eyebrow {
  margin-bottom: 10px;
}

.user-name {
  margin: 12px 0 0;
  color: var(--app-muted);
  font-size: 17px;
}

.bottom-action {
  padding-top: 24px;
}

.button-link svg {
  width: 19px;
  height: 19px;
}

.panel-login-page {
  overflow-y: auto;
}

.panel-login-content {
  width: 100%;
  margin: auto 0;
  padding: 24px 0;
}

.panel-logo {
  width: min(64%, 250px);
  margin: 0 auto 18px;
}

.panel-login-content .title-block {
  text-align: center;
}

.panel-login-content form .field-group {
  margin-bottom: 16px;
}

.password-toggle {
  display: inline-flex;
  width: 48px;
  height: 52px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  cursor: pointer;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-height: 680px) {
  .screen-body {
    justify-content: flex-start;
    padding-top: 28px;
  }

  .title-block {
    margin-bottom: 24px;
  }

  .welcome-visual {
    justify-content: flex-start;
  }

  .brand-logo-large {
    width: min(66%, 270px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Giriş sonrasındaki tek mobil uygulama kabuğu */
.mobile-app-shell {
  padding: 0;
}

.app-view-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pull-refresh-indicator {
  position: absolute;
  z-index: 9;
  top: 7px;
  left: 50%;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--app-primary);
  opacity: 0;
  box-shadow: 0 8px 22px rgba(24,50,78,.13);
  transform: translate(-50%,-55px) rotate(-80deg);
  transition: opacity 120ms ease, transform 160ms ease;
  pointer-events: none;
}
.pull-refresh-indicator.is-visible { opacity: 1; transform: translate(-50%,0) rotate(0); }
.pull-refresh-indicator.is-ready { background: var(--app-primary); color: #fff; }
.pull-refresh-indicator.is-refreshing svg { animation: pull-refresh-spin .75s linear infinite; }
.pull-refresh-indicator svg { width: 19px; height: 19px; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }

.app-persistent-header {
  position: absolute;
  z-index: 18;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: calc(62px + env(safe-area-inset-top));
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding:
    env(safe-area-inset-top)
    var(--safe-right)
    0
    var(--safe-left);
  border-bottom: 1px solid rgba(199, 211, 224, .78);
  background: rgba(248, 251, 254, .9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.app-persistent-header img { width: 82px; height: 42px; border-radius: 0; background: transparent; object-fit: contain; object-position: left center; }
#notification-button {
  position: relative; display: inline-flex; width: 44px; height: 44px; flex: 0 0 auto; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: transparent; color: var(--app-text); cursor: pointer;
}
#notification-button svg { width: 23px; height: 23px; }
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 2px solid #f8fbfe;
  border-radius: 999px;
  background: var(--app-danger);
  color: #fff;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 750;
}

.app-view {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: var(--app-background);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.32,.72,0,1), visibility 280ms;
  will-change: transform;
}

.mobile-app-shell .app-view::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 64px;
  background: linear-gradient(
    to bottom,
    var(--status-transition-start) 0,
    var(--status-transition-mid) 42%,
    var(--status-transition-end) 100%
  );
  content: "";
  pointer-events: none;
}

.mobile-app-shell .app-view > .view-scroll {
  position: relative;
  z-index: 1;
}

.app-view.is-active {
  visibility: visible;
  z-index: 3;
  transform: translateX(0);
}

.app-view.from-left { visibility: visible; z-index: 3; transform: translateX(-24%); }
.app-view.from-right { visibility: visible; z-index: 3; transform: translateX(100%); }
.app-view.to-left { visibility: visible; z-index: 2; transform: translateX(-24%); }
.app-view.to-right { visibility: visible; z-index: 2; transform: translateX(100%); }

.view-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(var(--safe-top) + 8px)
    var(--safe-right)
    calc(116px + env(safe-area-inset-bottom))
    var(--safe-left);
  transform: translateY(var(--pull-distance, 0));
  transition: transform 180ms cubic-bezier(.2,.75,.25,1);
  will-change: transform;
}
.view-scroll.is-pulling { transition: none; }

.view-header { margin: 8px 0 24px; }
.view-header h1 { margin: 0; font-size: 31px; line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.section-kicker { margin: 0 0 7px; color: var(--app-primary); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; }

.app-tabbar {
  position: absolute;
  z-index: 12;
  right: 14px;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 70px;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(193, 207, 221, .76);
  border-radius: 27px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 38px rgba(22, 48, 75, .16), 0 3px 10px rgba(22, 48, 75, .08);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  transition:
    transform 220ms cubic-bezier(.32,.72,0,1),
    opacity 160ms ease;
}

body.is-keyboard-open .app-view-stack {
  bottom: 0;
}

body.is-keyboard-open .app-tabbar {
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
}

body.is-keyboard-open .screen-body {
  justify-content: flex-start;
  padding-top: 22px;
  padding-bottom: 22px;
}

body.is-keyboard-open .bottom-sheet {
  max-height: 100%;
}

body.is-keyboard-open .sheet-body {
  max-height: calc(var(--app-viewport-height) - 82px);
}

.tab-item {
  display: flex;
  min-width: 0;
  min-height: 56px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 21px;
  background: transparent;
  color: #8995a5;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 100ms ease;
}
.tab-item:active { transform: scale(.97); }
.tab-item.is-active {
  background: linear-gradient(145deg, #1688c9, var(--app-primary));
  color: #fff;
  box-shadow: none;
}
.app-tabbar .tab-item span {
  display: none !important;
}
.tab-item svg { width: 25px; height: 25px; stroke-width: 2; }

.home-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 26px; }
.home-header p { margin: 0 0 3px; color: var(--app-muted); font-size: 15px; }
.home-header h1 { margin: 0; font-size: 25px; letter-spacing: -.025em; line-height: 1.2; }
.home-header .home-welcome { margin:5px 0 0;font-size:14px; }
.home-actions { display: flex; align-items: center; gap: 8px; }
.home-actions button, .home-actions span {
  display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); color: var(--app-muted);
}
.home-actions button { cursor: default; }
.home-actions span { border-color: rgba(8,118,185,.12); background: rgba(8,118,185,.1); color: var(--app-primary); }
.home-actions svg { width: 20px; }

#mobile-app > .app-persistent-header { display: none !important; }
#dashboard-content #notification-button { align-self: flex-start; }

.balance-card {
  margin-bottom: 27px; padding: 23px; border-radius: 23px;
  background: linear-gradient(145deg, var(--app-primary-dark), var(--app-primary)); color: #fff;
  box-shadow: 0 13px 28px rgba(6,79,145,.18);
}
.balance-card > p { margin: 0 0 7px; color: rgba(255,255,255,.72); font-size: 13px; }
.balance-card > strong { display: block; font-size: 30px; letter-spacing: -.035em; }
.balance-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 23px 0 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.balance-meta span { font-size: 14px; font-weight: 650; }
.balance-meta small { display: block; margin-bottom: 5px; color: rgba(255,255,255,.66); font-size: 11px; font-weight: 500; }
.due-line { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 11px; border-radius: 11px; background: rgba(255,255,255,.1); font-size: 12px; }
.due-line svg { width: 16px; }.due-line strong { margin-left: auto; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 13px; }
.section-title h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.section-title button { min-height: 44px; border: 0; background: transparent; color: var(--app-primary); font-size: 13px; font-weight: 650; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 27px; }
.quick-grid button {
  position: relative; display: flex; min-height: 128px; flex-direction: column; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface); padding: 16px; text-align: left; cursor: pointer;
}
.quick-grid button > span { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(8,118,185,.1); color: var(--app-primary); }
.quick-grid button strong { max-width: 110px; font-size: 14px; line-height: 1.3; }
.quick-grid button > svg { position: absolute; right: 13px; bottom: 15px; width: 16px; color: var(--app-muted); }
.quick-grid .quick-arrival-service { min-height: 94px;grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;gap:13px;padding-right:46px; }
.quick-grid .quick-arrival-service strong { max-width:none;font-size:15px; }
.quick-grid .quick-arrival-service > svg { top:50%;bottom:auto;transform:translateY(-50%); }

.surface-card, .account-card, .receivable-card { border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface); }
.surface-card { overflow: hidden; margin-bottom: 24px; }

.feature-empty { margin-top: 17vh; text-align: center; }
.feature-icon { display: inline-flex; width: 65px; height: 65px; align-items: center; justify-content: center; border-radius: 21px; background: rgba(8,118,185,.1); color: var(--app-primary); }
.feature-icon svg { width: 31px; height: 31px; }
.feature-empty h2 { margin: 22px 0 9px; font-size: 21px; }
.feature-empty > p { max-width: 310px; margin: 0 auto; color: var(--app-muted); font-size: 15px; line-height: 1.55; }
.info-strip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 27px auto 0; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); padding: 13px; color: var(--app-muted); font-size: 13px; }
.info-strip svg { width: 17px; }

.review-payment-section { margin: -4px 0 18px; overflow: hidden; border: 1px solid #f0d79a; border-radius: 21px; background: linear-gradient(145deg,#fffaf0,#fff5dc); box-shadow: 0 10px 26px rgba(119,82,16,.08); }
.review-payment-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; }
.review-payment-heading > div { display: grid; gap: 3px; }
.review-payment-heading span { color: #a36a0a; font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.review-payment-heading h2 { margin: 0; color: #352b1b; font-size: 17px; letter-spacing: -.02em; }
.review-payment-heading > svg { width: 23px; color: #b77810; }
.review-payment-list { display: grid; gap: 1px; margin: 0 8px; overflow: hidden; border: 1px solid rgba(218,185,115,.48); border-radius: 16px; background: rgba(218,185,115,.34); }
.review-payment-card { display: grid; min-width: 0; min-height: 76px; grid-template-columns: 44px minmax(0,1fr) auto 17px; align-items: center; gap: 10px; padding: 11px 12px; border: 0; background: rgba(255,255,255,.92); text-align: left; cursor: pointer; }
.review-payment-card:active { background: #fffaf0; transform: scale(.995); }
.review-payment-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #fff0c8; color: #aa6f0d; }
.review-payment-icon svg { width: 22px; }
.review-payment-copy { display: grid; min-width: 0; gap: 2px; }
.review-payment-copy small { overflow: hidden; color: #81745d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.review-payment-copy strong { overflow: hidden; color: #29251e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.review-payment-copy > span { overflow: hidden; color: #756a56; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.review-payment-status { border-radius: 999px; background: #fff0c9; padding: 6px 8px; color: #94600b; font-size: 9px; font-weight: 750; white-space: nowrap; }
.review-payment-card > svg { width: 17px; color: #9b865e; }
.review-payment-section > p { margin: 0; padding: 10px 16px 13px; color: #7c6c50; font-size: 10px; line-height: 1.45; }

.payment-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
.payment-summary-grid > div { min-width: 0; border: 1px solid var(--app-border); border-radius: 15px; background: var(--app-surface); padding: 13px 10px; }
.payment-summary-grid small { display: block; margin-bottom: 5px; color: var(--app-muted); font-size: 10px; }
.payment-summary-grid strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; }
.filter-pills { display: flex; gap: 7px; margin: 0 -1px 18px; overflow-x: auto; scrollbar-width: none; }
.filter-pills button { min-height: 40px; flex: 0 0 auto; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface); padding: 0 16px; color: var(--app-muted); font-size: 13px; font-weight: 650; }
.filter-pills button.is-active { border-color: var(--app-primary); background: var(--app-primary); color: #fff; }
.receivable-list { display: grid; gap: 12px; }
.receivable-card { padding: 17px; }
.receivable-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.receivable-head small, .detail-hero small { display: block; margin-bottom: 4px; color: var(--app-muted); font-size: 11px; }
.receivable-head strong { font-size: 17px; }
.receivable-person { display: flex; align-items: center; gap: 7px; margin: 15px 0; color: var(--app-muted); font-size: 13px; }.receivable-person svg { width: 16px; }
.money-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 0; padding: 13px 0; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; }
.money-columns dt { color: var(--app-muted); font-size: 10px; }.money-columns dd { margin: 4px 0 0; font-size: 12px; font-weight: 700; }
.receivable-dates { display: flex; justify-content: space-between; gap: 8px; margin-top: 13px; color: var(--app-muted); font-size: 11px; }
.receivable-dates span { display: flex; align-items: center; gap: 5px; }.receivable-dates svg { width: 14px; }
.card-detail-button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; border: 0; border-radius: 12px; background: #edf7fd; color: var(--app-primary); font-size: 13px; font-weight: 700; }.card-detail-button svg { width: 15px; }

.status-badge { display: inline-flex; min-height: 26px; align-items: center; border-radius: 999px; padding: 0 9px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-paid { background: #e7f7f0; color: #137252; }.status-overdue { background: #fff0f1; color: #b42e45; }
.status-partial { background: #fff6df; color: #906714; }.status-unpaid { background: #edf1f5; color: #5f6c7e; }
.empty-card { border: 1px dashed #cfd9e5; border-radius: 18px; padding: 28px 18px; text-align: center; }
.empty-card > svg { width: 29px; margin: 0 auto 12px; color: #8e9cad; }.empty-card h3 { margin: 0 0 6px; font-size: 15px; }.empty-card p, .muted-copy { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.5; }

.profile-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-bottom: 16px; border: 1px solid var(--app-border); border-radius: 19px; background: var(--app-surface); padding: 17px; }
.profile-hero > span { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 16px; background: rgba(8,118,185,.1); color: var(--app-primary); }.profile-hero > span svg { width: 27px; }
.profile-hero div { min-width: 0; flex: 1; }.profile-hero h2 { margin: 0; font-size: 17px; }.profile-hero p { margin: 4px 0 0; overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; }
.profile-hero em { display: flex; align-items: center; gap: 4px; margin-left: 63px; color: var(--app-success); font-size: 11px; font-style: normal; }.profile-hero em svg { width: 14px; }
.account-card { margin-bottom: 14px; padding: 17px; }
.account-card label, .bottom-sheet label { display: block; margin-bottom: 15px; font-size: 13px; font-weight: 650; }.account-card label .input-wrap, .bottom-sheet label .input-wrap { margin-top: 7px; }
.account-card .detail-list { margin-bottom: 16px; }
.verified-text { color: var(--app-success) !important; font-weight: 700 !important; }
.logout-button { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; border: 1px solid rgba(201,54,79,.18); border-radius: 16px; background: #fff5f6; color: var(--app-danger); font-weight: 650; text-decoration: none; }.logout-button svg { width: 19px; }

.sheet-backdrop { position: absolute; z-index: 29; inset: 0; background: rgba(14,25,40,.34); opacity: 0; transition: opacity 240ms ease; }
.sheet-backdrop.is-open { opacity: 1; }
.bottom-sheet { position: absolute; z-index: 30; right: 0; bottom: 0; left: 0; max-height: 88%; overflow: hidden; border-radius: 25px 25px 0 0; background: var(--app-surface); padding: 8px var(--safe-right) var(--safe-bottom) var(--safe-left); transform: translateY(102%); transition: transform 280ms cubic-bezier(.32,.72,0,1); box-shadow: 0 -15px 45px rgba(17,33,53,.16); }
.bottom-sheet.is-open { transform: translateY(0); }
.sheet-handle { width: 38px; height: 5px; margin: 2px auto 7px; border-radius: 5px; background: #d1dae4; }
.sheet-head { display: flex; min-height: 50px; align-items: center; justify-content: space-between; }.sheet-head h2 { margin: 0; font-size: 20px; }.sheet-close { margin-right: -8px; }
.sheet-body { max-height: calc(var(--app-viewport-height) - 82px); overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; padding: 8px 0 4px; }
.detail-hero { position: relative; border-radius: 17px; background: var(--app-background); padding: 17px; }.detail-hero h3 { margin: 0; font-size: 21px; }.detail-hero .status-badge { position: absolute; top: 17px; right: 17px; }
.detail-list { margin: 14px 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf1f5; }.detail-list dt { color: var(--app-muted); font-size: 13px; }.detail-list dd { margin: 0; max-width: 60%; font-size: 13px; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.note-box { margin: 15px 0; border-radius: 14px; background: #fff8e8; padding: 14px; }.note-box strong { font-size: 12px; }.note-box p { margin: 6px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.5; }
.sheet-section-title { margin: 20px 0 10px; font-size: 15px; }
#online-payment-info { margin-bottom:18px;box-shadow:none; }
.transaction-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1f5; }.transaction-row span:first-child { display: flex; flex-direction: column; gap: 4px; }.transaction-row strong { font-size: 14px; }.transaction-row small { color: var(--app-muted); font-size: 11px; }
.sheet-copy { margin: 0 0 18px; color: var(--app-muted); line-height: 1.5; }

.toast-container {
  position: absolute;
  z-index: 80;
  top: calc(env(safe-area-inset-top) + 10px);
  right: max(12px, env(safe-area-inset-right));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.top-toast {
  display: grid;
  grid-template-columns: 38px 1fr 34px;
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(208,219,231,.92);
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  padding: 12px 10px 12px 12px;
  opacity: 0;
  box-shadow: 0 13px 32px rgba(17,34,55,.15);
  transform: translateY(-125%);
  transition: transform 300ms cubic-bezier(.2,.85,.3,1.08), opacity 220ms ease;
  pointer-events: auto;
}
.top-toast.is-visible { opacity: 1; transform: translateY(0); }
.top-toast.is-leaving { opacity: 0; transform: translateY(-120%); transition-timing-function: ease-in; }
.top-toast-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; }
.top-toast-icon svg { width: 20px; }
.top-toast strong { display: block; margin: 1px 0 3px; font-size: 14px; }
.top-toast p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.top-toast > button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--app-muted); }
.top-toast > button svg { width: 17px; }
.toast-success .top-toast-icon { background: #e6f7ef; color: var(--app-success); }
.toast-error .top-toast-icon { background: #fff0f2; color: var(--app-danger); }
.toast-warning .top-toast-icon { background: #fff6df; color: #916812; }
.toast-info .top-toast-icon { background: #e9f5fc; color: var(--app-primary); }

.warranty-list { display: grid; gap: 12px; }
.warranty-card { border: 1px solid var(--app-border); border-radius: 19px; background: var(--app-surface); padding: 17px; }
.warranty-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.warranty-order { display: flex; align-items: center; gap: 10px; }.warranty-order > span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 13px; background: #eaf6fc; color: var(--app-primary); }.warranty-order svg { width: 21px; }.warranty-order small { display: block; color: var(--app-muted); font-size: 10px; }.warranty-order strong { font-size: 16px; }
.warranty-progress-copy { margin: 16px 0 10px; font-size: 13px; font-weight: 650; }.warranty-dates { display: flex; justify-content: space-between; color: var(--app-muted); font-size: 11px; }.warranty-dates span { display: flex; align-items: center; gap: 5px; }.warranty-dates svg { width: 14px; }
.warranty-status-upcoming { background:#edf1f5;color:#566578; }.warranty-status-active { background:#e7f7f0;color:#137252; }.warranty-status-expiring { background:#fff6df;color:#906714; }.warranty-status-expired { background:#fff0f1;color:#b42e45; }
.document-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }.document-button { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; color: var(--app-primary); font-size: 12px; font-weight: 700; text-decoration: none; }.document-button svg { width: 16px; }
.service-info { margin: 14px 0; border-radius: 15px; background: #f5f8fb; padding: 14px; }.service-info h3 { display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:14px; }.service-info h3 svg { width:17px;color:var(--app-primary); }.service-info p { display:flex;align-items:flex-start;gap:7px;margin:7px 0;color:var(--app-muted);font-size:12px;line-height:1.45; }.service-info p svg { width:14px;flex:0 0 auto; }
.service-call { display:inline-flex;min-height:44px;align-items:center;gap:7px;margin-top:7px;color:var(--app-primary);font-size:13px;font-weight:700;text-decoration:none; }.service-call svg { width:17px; }
.safe-section { margin-top: 27px; }.safe-section .section-title { margin-bottom:13px; }
.service-request-card { border:1px solid var(--app-border);border-radius:16px;background:#fff;padding:15px;margin-bottom:10px; }
.service-request-card header { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.service-request-card header > span:first-child { min-width:0;flex:1; }
.service-request-card header .status-badge { min-height:28px;max-width:48%;flex:0 0 auto;align-self:flex-start;justify-content:center;padding:6px 11px;line-height:1.2;text-align:center;white-space:normal; }
.service-request-card small { color:var(--app-muted);font-size:10px; }.service-request-card h3 { margin:4px 0 10px;font-size:15px; }.service-request-card p { margin:5px 0;color:var(--app-muted);font-size:12px; }.service-request-card .customer-response { border-left:3px solid var(--app-primary);padding-left:9px;color:var(--app-text); }
.service-request-card[data-service-request] { cursor: pointer; transition: transform 120ms ease, border-color 160ms ease; }
.service-request-card[data-service-request]:active { transform: scale(.985); }
.service-request-card[data-service-request]:focus-visible { outline: 3px solid rgba(8,118,185,.16); outline-offset: 2px; }
.view-description { margin:10px 0 0;color:var(--app-muted);font-size:14px;line-height:1.5; }
.textarea-wrap { min-height:112px;align-items:flex-start; }.textarea-wrap > svg { margin-top:17px; }.textarea-wrap textarea { min-height:108px;flex:1;border:0;outline:0;background:transparent;padding:15px 14px 12px 12px;resize:vertical;font-size:16px; }
.bottom-sheet select { width:100%;min-height:54px;margin-top:7px;border:1px solid var(--app-border);border-radius:16px;background:#fff;padding:0 14px;font-size:16px; }

.pdf-viewer {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #e8edf3;
  animation: pdf-viewer-in 220ms cubic-bezier(.32,.72,0,1);
}
.pdf-viewer[hidden] { display: none; }
@keyframes pdf-viewer-in { from { opacity: .5; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes pdf-viewer-out { from { opacity: 1; transform: translateX(0); } to { opacity: .72; transform: translateX(100%); } }
.pdf-viewer.is-closing { pointer-events: none; animation: pdf-viewer-out 260ms cubic-bezier(.32,.72,0,1) both; }
.pdf-viewer-header {
  display: grid;
  min-height: calc(62px + env(safe-area-inset-top));
  grid-template-columns: 46px minmax(0,1fr) 46px;
  align-items: center;
  gap: 7px;
  padding: env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
  border-bottom: 1px solid rgba(181,194,208,.85);
  background: rgba(250,252,254,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pdf-viewer-header > div { min-width: 0; text-align: center; }
.pdf-viewer-header strong,
.pdf-viewer-header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-viewer-header strong { font-size: 15px; }
.pdf-viewer-header small { margin-top: 2px; color: var(--app-muted); font-size: 11px; }
.pdf-header-button {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--app-primary);
}
.pdf-header-button:disabled { color: #a3adba; }
.pdf-header-button svg { width: 23px; height: 23px; }
.pdf-viewer-content {
  flex: 1;
  overflow: auto;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 14px max(8px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.pdf-pages { display: grid; gap: 12px; width: 100%; min-width: 100%; margin: 0 auto; transform-origin: top left; }
.pdf-page {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(24,40,60,.16);
  user-select: none;
  -webkit-user-select: none;
}
.pdf-zoom-controls {
  position: absolute;
  z-index: 3;
  right: max(14px,env(safe-area-inset-right));
  bottom: max(18px,calc(env(safe-area-inset-bottom) + 10px));
  display: grid;
  grid-template-columns: 42px 56px 42px;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(60,60,67,.18);
  border-radius: 14px;
  background: rgba(250,250,252,.9);
  box-shadow: 0 8px 24px rgba(20,30,45,.18);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.pdf-zoom-controls button { display: grid; min-width: 42px; min-height: 42px; place-items: center; border: 0; background: transparent; color: var(--app-primary); }
.pdf-zoom-controls button:disabled { color: #a3a3aa; }
.pdf-zoom-controls button:active { background: rgba(8,118,185,.1); }
.pdf-zoom-controls button svg { width: 18px; height: 18px; }
.pdf-zoom-controls output { display: grid; place-items: center; border-right: 1px solid rgba(60,60,67,.13); border-left: 1px solid rgba(60,60,67,.13); color: var(--app-text); font-size: 11px; font-weight: 700; }
.pdf-loading { width: 100%; }
.pdf-page-skeleton { width: 100%; aspect-ratio: 210 / 297; border-radius: 3px; }
.pdf-error {
  margin: 18vh auto 0;
  max-width: 300px;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.mobile-overlay {
  position: absolute;
  z-index: 55;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--app-background);
  animation: mobile-overlay-in 260ms cubic-bezier(.32,.72,0,1);
}
.mobile-overlay[hidden] { display: none; }
@keyframes mobile-overlay-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mobile-overlay-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
#notification-center.is-closing { pointer-events:none;animation:mobile-overlay-out 280ms cubic-bezier(.32,.72,0,1) both; }
#service-detail-view { animation:mobile-overlay-in 280ms cubic-bezier(.32,.72,0,1) both; }
#service-detail-view.is-closing { pointer-events:none;animation:mobile-overlay-out 280ms cubic-bezier(.32,.72,0,1) both; }
.mobile-overlay-header {
  flex: 0 0 auto;
  display: grid;
  min-height: calc(62px + env(safe-area-inset-top));
  grid-template-columns: 46px minmax(0,1fr) minmax(46px,auto);
  align-items: center;
  gap: 5px;
  padding: env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
  border-bottom: 1px solid var(--app-border);
  background: rgba(250,252,254,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mobile-overlay-header > div { min-width: 0; text-align: center; }
.mobile-overlay-header strong,
.mobile-overlay-header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-overlay-header strong { font-size: 16px; }
.mobile-overlay-header small { margin-top: 2px; color: var(--app-muted); font-size: 11px; }
.overlay-back {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--app-primary);
}
.overlay-back svg { width: 24px; }
.overlay-text-action {
  min-height: 44px;
  max-width: 112px;
  border: 0;
  background: transparent;
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}
.overlay-text-action:disabled { color: #9ca8b7; }
.mobile-overlay-scroll {
  min-height: 0;
  flex: 1;
  overflow: hidden auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  padding: 16px var(--safe-right) max(24px,var(--safe-bottom)) var(--safe-left);
}

.product-arrival-service { background:#f5f7fb;animation:payment-overlay-enter 300ms cubic-bezier(.32,.72,0,1) both; }
.product-arrival-service.is-closing { pointer-events:none;animation:payment-overlay-exit 300ms cubic-bezier(.32,.72,0,1) both; }
.product-arrival-content { padding:20px 16px calc(34px + env(safe-area-inset-bottom)); }
.arrival-loading { display:grid;gap:12px; }
.arrival-intro-card { display:grid;justify-items:center;gap:9px;padding:25px 19px;border:1px solid #dfe7f1;border-radius:24px;background:#fff;text-align:center;box-shadow:0 10px 28px rgba(25,45,78,.06); }
.arrival-intro-card > span { display:grid;width:66px;height:66px;place-items:center;border-radius:20px;background:#eaf3ff;color:#1764d6; }
.arrival-intro-card > span svg { width:32px;height:32px; }
.arrival-intro-card h1 { margin:4px 0 0;font-size:22px;letter-spacing:-.025em; }
.arrival-intro-card p { max-width:310px;margin:0;color:#6f7b8e;font-size:13px;line-height:1.5; }
.arrival-order-form { display:grid;gap:10px;margin-top:18px;padding:19px;border:1px solid #dfe6ef;border-radius:21px;background:#fff; }
.arrival-order-form label { color:#303949;font-size:13px;font-weight:700; }
.arrival-order-form select { width:100%;min-height:54px;border:1px solid #d9e1eb;border-radius:15px;background:#fff;padding:0 42px 0 14px;color:#172033;font-size:16px;outline:none; }
.arrival-order-form select:focus { border-color:#2470e7;box-shadow:0 0 0 3px rgba(36,112,231,.11); }
.arrival-order-form .field-message { min-height:20px;margin:0;color:#a62d2d;font-size:12px; }
.arrival-order-form .primary-button { display:flex;align-items:center;justify-content:center;gap:7px; }
.arrival-order-form .primary-button svg { width:18px; }
.arrival-empty { margin-top:14vh; }
.arrival-success-card { display:grid;justify-items:center;gap:10px;margin-top:6vh;padding:27px 19px;border-radius:24px;background:#fff;text-align:center;box-shadow:0 12px 32px rgba(25,45,78,.08); }
.arrival-success-card > span { display:grid;width:76px;height:76px;place-items:center;border-radius:50%;background:#e2f7ed;color:#138158; }
.arrival-success-card > span svg { width:39px;height:39px; }
.arrival-success-card > p { margin:7px 0 0;color:#16815c;font-size:13px;font-weight:700; }
.arrival-success-card h2 { max-width:290px;margin:0 0 5px;font-size:22px;line-height:1.25; }
.arrival-success-card dl { width:100%;margin:7px 0 10px;border-top:1px solid #edf0f4; }
.arrival-success-card dl div { display:flex;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid #edf0f4;font-size:13px; }
.arrival-success-card dt { color:#7b8798; }.arrival-success-card dd { margin:0;color:#263147;font-weight:700;text-align:right; }
.arrival-success-card .primary-button,.arrival-success-card .payment-secondary-button { width:100%; }

.payment-flow {
  background: #f5f7fb;
  animation: payment-overlay-enter 320ms cubic-bezier(.32,.72,0,1) both;
}
.payment-flow.is-closing {
  pointer-events: none;
  animation: payment-overlay-exit 320ms cubic-bezier(.32,.72,0,1) both;
}
@keyframes payment-overlay-enter {
  from { transform: translate3d(100%,0,0); }
  to { transform: translate3d(0,0,0); }
}
@keyframes payment-overlay-exit {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(100%,0,0); }
}
.payment-flow-header {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  min-height: calc(64px + env(safe-area-inset-top));
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 72px 0;
  border-bottom: 0;
  background: rgba(255,255,255,.96);
}
.payment-flow-header > div { width: 100%; max-width: 240px; text-align: center; }
.payment-flow-header strong { overflow: visible; font-size: 17px; text-overflow: clip; }
.payment-flow-header small { font-size: 12px; }
.payment-flow-header .overlay-back,
.payment-flow-header .overlay-text-action { position: absolute; bottom: 10px; }
.payment-flow-header .overlay-back { left: max(10px,env(safe-area-inset-left)); }
.payment-flow-header .overlay-text-action { right: max(14px,env(safe-area-inset-right)); width: auto; max-width: none; font-size: 15px; }
.payment-flow-header .overlay-back[hidden] { display: none !important; }
.payment-stepper { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 8px 18px 12px; background: #fff; border-bottom: 1px solid #e9edf4; }
.payment-stepper span { display: grid; justify-items: center; gap: 4px; color: #a1a9b7; font-size: 10px; position: relative; }
.payment-stepper span:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 62%; width: 76%; height: 2px; background: #e4e8ef; }
.payment-stepper b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e9edf3; font-size: 11px; z-index: 1; }
.payment-stepper .is-active { color: #1258d5; }
.payment-stepper .is-active b, .payment-stepper .is-active:not(:last-child)::after { color: #fff; background: #2166df; }
.payment-flow-content { padding: 18px 16px calc(38px + env(safe-area-inset-bottom)); will-change: transform,opacity; }
.payment-hero-card { padding: 24px; border-radius: 24px; color: #fff; background: linear-gradient(145deg,#1859cf,#3384f5); box-shadow: 0 16px 35px rgba(28,99,220,.22); display: grid; gap: 4px; }
.payment-hero-card span,.payment-hero-card small { opacity: .82; }
.payment-hero-card strong { font-size: 32px; letter-spacing: -.04em; }
.payment-screen-form { display: grid; gap: 16px; margin-top: 18px; }
.payment-screen-form label,.bank-account-list legend { display: grid; gap: 7px; font-size: 13px; font-weight: 650; color: #303949; }
.payment-screen-form input,.payment-screen-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #dfe4ec; border-radius: 15px; background: #fff; color: #172033; outline: none; }
.payment-screen-form textarea { min-height: 88px; resize: vertical; }
.payment-screen-form input:focus,.payment-screen-form textarea:focus { border-color: #2470e7; box-shadow: 0 0 0 3px rgba(36,112,231,.11); }
.money-input { display: flex; align-items: center; padding-left: 16px; background: #fff; border: 1px solid #dfe4ec; border-radius: 17px; }
.money-input span { font-size: 23px; color: #556275; }
.money-input input { border: 0; font-size: 25px; font-weight: 700; }
.payment-split-money-input:focus-within { border-color: #2470e7; box-shadow: 0 0 0 3px rgba(36,112,231,.11); }
.payment-split-money-input .money-whole { width: 0; min-width: 0; flex: 1; padding-right: 0; }
.payment-split-money-input .money-separator { flex: 0 0 auto; color: #172033; font-weight: 700; }
.payment-split-money-input .money-cents { width: 46px; min-width: 46px; flex: 0 0 46px; padding-right: 12px; padding-left: 1px; }
.payment-split-money-input input:focus { border: 0; box-shadow: none; }
.payment-method-list { display: grid; gap: 12px; }
.payment-method-card { width: 100%; min-height: 90px; display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 13px; padding: 16px; text-align: left; background: #fff; border: 1px solid #e1e6ee; border-radius: 21px; box-shadow: 0 7px 20px rgba(25,42,75,.05); }
.payment-method-card > span { display: grid; place-items: center; width: 52px; height: 52px; color: #1260d8; background: #eaf2ff; border-radius: 16px; }
.payment-method-card div { display: grid; gap: 4px; }
.payment-method-card strong { font-size: 16px; color: #172033; }
.payment-method-card small { color: #737f91; line-height: 1.35; }
.payment-bank-picker { display: grid; gap: 12px; margin-top: 18px; }
.payment-bank-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 0 2px; }
.payment-bank-picker-heading > div { display: grid; gap: 4px; }
.payment-bank-picker-heading strong { color: #172033; font-size: 17px; }
.payment-bank-picker-heading small { color: #768295; font-size: 12px; line-height: 1.4; }
.payment-bank-picker-heading > svg { flex: 0 0 auto; width: 21px; color: #2166df; }
.payment-bank-option-list { display: grid; gap: 10px; }
.payment-bank-option { display: grid; width: 100%; min-height: 82px; grid-template-columns: 52px minmax(0,1fr) 26px; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dfe5ee; border-radius: 20px; background: #fff; text-align: left; box-shadow: 0 7px 20px rgba(25,42,75,.045); transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.payment-bank-option:active { transform: scale(.99); }
.payment-bank-option.is-active { border-color: #2166df; background: #f0f6ff; box-shadow: 0 0 0 3px rgba(33,102,223,.09); }
.payment-bank-option-logo { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; border-radius: 15px; background: #f2f5f9; color: #2166df; }
.payment-bank-option-logo img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.payment-bank-option-logo svg { width: 25px; }
.payment-bank-option-copy { display: grid; min-width: 0; gap: 6px; }
.payment-bank-option-copy strong { overflow: hidden; color: #172033; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.payment-bank-option-copy small { color: #6f7b8d; font-size: 12px; line-height: 1.35; }
.payment-bank-option-copy b { color: #1468ce; font-size: 13px; }
.payment-bank-option-check { display: grid; place-items: center; color: #8b97a8; }
.payment-bank-option.is-active .payment-bank-option-check { color: #1767d7; }
.payment-bank-option-check svg { width: 21px; }
.payment-bank-amount-form { padding: 16px; border: 1px solid #dfe5ed; border-radius: 20px; background: #fff; box-shadow: 0 10px 25px rgba(25,45,78,.06); }
.selected-payment-bank-summary { display: grid; gap: 4px; padding-bottom: 13px; border-bottom: 1px solid #edf0f4; }
.selected-payment-bank-summary span { color: #6e798b; font-size: 12px; }
.selected-payment-bank-summary strong { color: #1767d7; font-size: 15px; }
.payment-bank-selection-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px; border-radius: 15px; background: #edf4ff; color: #315f9d; font-size: 12px; line-height: 1.4; }
.payment-bank-selection-note svg { flex: 0 0 auto; width: 19px; }
.payment-security-note { display: flex; gap: 12px; margin-top: 18px; padding: 15px; border-radius: 17px; background: #eaf6f0; color: #18714e; }
.payment-security-note p { display: grid; gap: 3px; }
.payment-security-note small { color: #527566; }
.bank-account-list { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.bank-account-card { grid-template-columns: auto 46px 1fr 20px !important; align-items: center; gap: 10px !important; padding: 13px; background: #fff; border: 1px solid #dfe4ec; border-radius: 18px; }
.bank-account-card:has(input:checked) { border-color: #2470e7; box-shadow: 0 0 0 3px rgba(36,112,231,.1); }
.bank-account-card input { width: 17px; min-height: 17px; padding: 0; }
.bank-account-card > span:nth-of-type(2) { display: grid; gap: 2px; min-width: 0; }
.bank-account-card code { font-family: inherit; font-size: 11px; color: #586579; word-break: break-all; }
.bank-card-copy { justify-self: start; color: #1767d7; font-size: 11px; font-weight: 700; }
.bank-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #f1f4f8; overflow: hidden; }
.bank-logo img { width: 100%; height: 100%; object-fit: contain; }
.bank-account-card > svg { opacity: 0; color: #2470e7; }
.bank-account-card:has(input:checked) > svg { opacity: 1; }
.copy-iban-button,.payment-secondary-button { min-height: 46px; border: 1px solid #dce3ed; background: #fff; border-radius: 14px; color: #245dba; font-weight: 650; }
.upload-drop { position: relative; min-height: 122px; display: grid !important; place-items: center; align-content: center; gap: 4px !important; border: 1.5px dashed #aebcd0; border-radius: 18px; background: #fff; color: #315d9a !important; }
.upload-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-drop small { max-width: 88%; overflow-wrap: anywhere; color: #7e8999; font-weight: 400; text-align: center; }
.upload-status-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #edf3fc; }
.upload-status-icon svg { width: 22px; height: 22px; }
.upload-drop.is-selected { border-style: solid; border-color: #48a982; background: #effaf5; color: #147652 !important; box-shadow: 0 0 0 3px rgba(31,145,99,.09); }
.upload-drop.is-selected .upload-status-icon { background: #d9f3e7; color: #148158; }
.upload-drop.is-selected strong { color: #126b4a; }
.upload-drop.is-selected small { color: #397460; }
.payment-form-error { padding: 11px 13px; color: #a62d2d; background: #fff0f0; border-radius: 12px; font-size: 13px; }
.bank-transfer-instructions { padding: 15px; border-radius: 18px; background: #fff; border: 1px solid #e0e5ed; }
.bank-transfer-instructions dl { display: grid; gap: 9px; }.bank-transfer-instructions dl div { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; }.bank-transfer-instructions dt { color: #7a8596; }.bank-transfer-instructions dd { text-align: right; color: #283348; font-weight: 650; }.bank-transfer-instructions p { display: flex; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0f4; color: #7b5a19; font-size: 12px; line-height: 1.45; }.bank-receipt-fields { display: grid; gap: 16px; }.bank-receipt-fields[hidden] { display: none; }
.bank-transfer-screen { margin-top: 0; }
.bank-choice-strip { display: flex; gap: 9px; margin: 0 -2px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.bank-choice-strip::-webkit-scrollbar { display: none; }
.bank-choice-strip button { display: grid; min-width: 108px; grid-template-rows: 36px auto; place-items: center; gap: 4px; padding: 9px; border: 1px solid #dfe5ee; border-radius: 16px; background: #fff; color: #6e7989; font-size: 11px; font-weight: 650; }
.bank-choice-strip button.is-active { border-color: #2166df; background: #edf4ff; color: #1558c4; box-shadow: 0 0 0 3px rgba(33,102,223,.09); }
.bank-choice-strip img { width: 52px; height: 34px; object-fit: contain; }
.bank-choice-strip button small { color: #8a6a2c; font-size: 9px; font-weight: 700; }
.selected-bank-card { overflow: hidden; padding: 24px 16px 10px; border: 1px solid #e2e7ef; border-radius: 26px; background: #fff; box-shadow: 0 16px 36px rgba(26,45,80,.08); text-align: center; }
.selected-bank-logo { display: grid; width: 82px; height: 82px; place-items: center; margin: 0 auto 12px; overflow: hidden; border: 1px solid #e7ebf1; border-radius: 23px; background: #f6f8fb; color: #2166df; }
.selected-bank-logo img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.selected-bank-logo svg { width: 36px; height: 36px; }
.selected-bank-card > p { color: #8893a4; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.selected-bank-card > h2 { margin: 4px 0 18px; color: #182238; font-size: 23px; letter-spacing: -.025em; }
.customer-bank-limit { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 7px; margin: -5px 0 16px; border-radius: 13px; background: #fff6df; padding: 10px 12px; color: #8b6314; text-align: left; }
.customer-bank-limit svg { width: 18px; }
.customer-bank-limit span { font-size: 10px; }
.customer-bank-limit strong { font-size: 12px; }
.selected-bank-copy-list { margin: 0 -16px; border-top: 1px solid #edf0f4; }
.bank-copy-row { display: grid; width: 100%; min-height: 66px; grid-template-columns: minmax(0,1fr) 38px; align-items: center; gap: 10px; padding: 10px 16px; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; text-align: left; }
.bank-copy-row:active { background: #f2f6fc; transform: scale(.995); }
.bank-copy-row.is-copied { background: #edf9f3; color: #147652; }
.bank-copy-row.is-copied > svg { color: #148158; transform: scale(1.16); }
.bank-copy-row > span { display: grid; min-width: 0; gap: 4px; }
.bank-copy-row small { color: #8a95a6; font-size: 11px; font-weight: 600; }
.bank-copy-row strong { overflow-wrap: anywhere; color: #273248; font-size: 14px; line-height: 1.35; }
.bank-copy-row strong.is-mono { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 13px; letter-spacing: .015em; }
.bank-copy-row > svg { width: 18px; color: #1d66d3; justify-self: center; }
.selected-bank-note { margin: 12px 0 2px; padding: 11px; border-radius: 12px; background: #f5f7fa; color: #6d7889; font-size: 12px; line-height: 1.4; text-align: left; }
.transfer-amount-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; border-radius: 18px; background: linear-gradient(135deg,#155dcc,#2e7be8); color: #fff; box-shadow: 0 12px 25px rgba(28,100,216,.18); }
.transfer-amount-card span { font-size: 13px; opacity: .82; }.transfer-amount-card strong { font-size: 22px; letter-spacing: -.02em; }
.transfer-warning { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #f0dca8; border-radius: 16px; background: #fff8e7; color: #725518; }
.transfer-warning svg { flex: 0 0 auto; width: 19px; }.transfer-warning p { font-size: 12px; line-height: 1.5; }
.payment-done-button { min-height: 54px !important; }
.payment-cancel-button,.payment-cancel-confirm { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(190,48,65,.18); border-radius: 15px; background: #fff5f6; color: #b72d40; font-weight: 700; }
.payment-cancel-button { margin-top: 12px; }.payment-cancel-button svg { width: 18px; }
.payment-confirm-card { display: grid; justify-items: center; gap: 13px; margin-top: 12vh; padding: 26px 20px; border-radius: 24px; background: #fff; box-shadow: 0 14px 36px rgba(26,45,80,.09); text-align: center; }
.payment-confirm-card > span { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: #fff0f2; color: #bd3247; }
.payment-confirm-card > span svg { width: 34px; height: 34px; }.payment-confirm-card h2 { font-size: 21px; }.payment-confirm-card p { margin-bottom: 8px; color: #6f7a8b; font-size: 13px; line-height: 1.5; }
.receipt-form-heading { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.receipt-form-heading > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #eaf2ff; color: #2166df; }.receipt-form-heading h3 { font-size: 18px; }.receipt-form-heading p { margin-top: 3px; color: #7b8696; font-size: 12px; }
.online-request-hero { background: linear-gradient(145deg,#164fbd,#2f7bea); }
.online-request-form { padding: 17px; border: 1px solid #dfe5ed; border-radius: 21px; background: #fff; box-shadow: 0 12px 30px rgba(25,45,78,.07); }
.online-request-intro { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #edf0f4; }
.online-request-intro > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 15px; background: #eaf2ff; color: #1767d7; }
.online-request-intro > span svg { width: 23px; }
.online-request-intro > div { display: grid; gap: 3px; }
.online-request-intro strong { color: #172033; font-size: 15px; }
.online-request-intro small { color: #737f91; font-size: 12px; line-height: 1.4; }
.online-request-hint { display: flex; align-items: flex-start; gap: 8px; margin: -2px 1px 0; color: #647389; font-size: 12px; line-height: 1.45; }
.online-request-hint svg { width: 18px; flex: 0 0 auto; color: #2166df; }
.payment-status-card.is-online-request { padding-right: 18px; padding-left: 18px; }
.payment-status-card.is-online-request > span { color: #1767d7; background: #eaf2ff; }
.online-request-status-copy { max-width: 390px; margin-top: 5px; padding: 12px 14px; border-radius: 14px; background: #edf4ff; color: #405f89; font-size: 13px; line-height: 1.5; }
.online-installment-amount { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; border: 1px solid #dfe5ed; border-radius: 19px; background: #fff; box-shadow: 0 8px 24px rgba(25,45,78,.05); }
.online-installment-amount > div { display: grid; gap: 3px; }
.online-installment-amount small { color: #7b8798; font-size: 11px; }
.online-installment-amount strong { color: #172033; font-size: 22px; letter-spacing: -.025em; }
.online-installment-amount button { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; border: 0; border-radius: 12px; background: #edf4ff; padding: 0 12px; color: #1767d7; font-size: 12px; font-weight: 700; }
.online-installment-amount button svg { width: 16px; }
.online-installment-picker { display: grid; gap: 14px; margin-top: 14px; padding: 17px; border: 1px solid #dfe5ed; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(25,45,78,.07); }
.online-installment-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; padding: 1px 1px 3px; }
.online-installment-picker > header > div { display: grid; gap: 4px; }
.online-installment-picker > header span { color: #1767d7; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.online-installment-picker > header h2 { color: #172033; font-size: 18px; letter-spacing: -.025em; }
.online-installment-picker > header p { max-width: 360px; color: #758195; font-size: 11px; line-height: 1.45; }
.online-installment-picker > header > svg { width: 23px; flex: 0 0 auto; color: #1767d7; }
.online-installment-list { display: grid; gap: 8px; }
.online-installment-option { display: grid; width: 100%; min-height: 69px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #e0e5ed; border-radius: 16px; background: #fff; text-align: left; transition: border-color .16s ease,background .16s ease,transform .1s ease,box-shadow .16s ease; }
.online-installment-option:active { transform: scale(.992); }
.online-installment-option.is-active { border-color: #2470e7; background: #f0f6ff; box-shadow: 0 0 0 3px rgba(36,112,231,.08); }
.online-installment-option-name,.online-installment-option-price { display: grid; min-width: 0; gap: 3px; }
.online-installment-option-name strong { color: #172033; font-size: 14px; }
.online-installment-option-name small { overflow: hidden; color: #7a8596; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.online-installment-option-price { justify-items: end; text-align: right; }
.online-installment-option-price strong { color: #243148; font-size: 14px; white-space: nowrap; }
.online-installment-option-price small { color: #8792a2; font-size: 9px; }
.online-installment-breakdown { overflow: hidden; border: 1px solid #e3e8ef; border-radius: 16px; background: #f8fafc; }
.online-installment-breakdown summary { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; color: #476080; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.online-installment-breakdown summary::-webkit-details-marker { display: none; }
.online-installment-breakdown summary svg { width: 17px; transition: transform .18s ease; }
.online-installment-breakdown[open] summary svg { transform: rotate(180deg); }
.online-installment-breakdown dl { display: grid; gap: 9px; padding: 0 13px 13px; }
.online-installment-breakdown dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6f7b8d; font-size: 11px; }
.online-installment-breakdown dd { color: #273248; font-weight: 700; text-align: right; }
.online-installment-breakdown .is-total { margin-top: 2px; padding-top: 10px; border-top: 1px solid #e1e7ef; }
.online-installment-breakdown .is-total dt,.online-installment-breakdown .is-total dd { color: #1767d7; font-size: 13px; }
.online-installment-load-error .primary-button { width: 100%; margin-top: 12px; }
.online-request-cancel-button { margin-top: 2px; }
.online-request-cancel-confirmation { margin-top: min(12vh,90px); }
.online-request-cancel-summary { display: grid; width: 100%; gap: 1px; overflow: hidden; margin: 2px 0 5px; border: 1px solid #e6e9ef; border-radius: 15px; background: #e6e9ef; text-align: left; }
.online-request-cancel-summary div { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; background: #f8fafc; }
.online-request-cancel-summary dt { color: #7b8697; font-size: 11px; }
.online-request-cancel-summary dd { color: #273248; font-size: 12px; font-weight: 750; text-align: right; }
.payment-provider-copy { color: #657186; line-height: 1.5; font-size: 13px; }
.payment-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.payment-status-card { display: grid; justify-items: center; gap: 8px; padding: 28px 20px; text-align: center; background: #fff; border-radius: 24px; box-shadow: 0 8px 24px rgba(25,42,75,.06); }
.payment-status-card > span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; }
.payment-status-card > span svg { width: 36px; height: 36px; }
.payment-status-card.is-success > span { color: #13855d; background: #e3f6ee; }
.payment-status-card.is-pending > span { color: #b77510; background: #fff2d9; }
.payment-status-card.is-failed > span { color: #b83c3c; background: #fde8e8; }
.payment-status-card p { margin-top: 5px; color: #7a8596; }
.payment-status-card h2 { font-size: 21px; }
.payment-status-card > strong { font-size: 28px; }
.payment-status-reason { margin-top: 8px; padding: 10px 13px; border-radius: 12px; background: #f5f7fa; color: #596578; font-size: 13px; }
.receipt-edit-summary { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; padding: 15px; border: 1px solid #e0e6ee; border-radius: 19px; background: #fff; }
.receipt-edit-summary > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #fff1d2; color: #a96f0d; }
.receipt-edit-summary > span svg { width: 23px; }
.receipt-edit-summary > div { display: grid; min-width: 0; gap: 3px; }
.receipt-edit-summary small { color: #7c8797; font-size: 10px; }
.receipt-edit-summary strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.receipt-edit-summary p { color: #8c651c; font-size: 11px; }
.receipt-edit-summary .inline-link-button { border: 0; background: transparent; font-size: 12px; }
.receipt-edit-form { padding: 17px; border: 1px solid #e0e6ee; border-radius: 20px; background: #fff; }
.payment-flow .detail-list { margin: 15px 0; }
.payment-flow .primary-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; }
.payment-flow .payment-secondary-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; }
.payment-flow input,.payment-flow textarea,.payment-flow select { font-size: 16px; }
.payment-attempt-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid #edf0f4; text-align: left; }
.payment-attempt-row > span { display: grid; gap: 3px; }
.payment-attempt-row > span:last-child { grid-auto-flow: column; align-items: center; color: #53647d; font-size: 12px; }
.inline-link-button { color: #1767d7; font-weight: 650; text-decoration: underline; }
.payment-document-preview { height: calc(var(--app-viewport-height) - 160px); display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.payment-document-preview iframe { width: 100%; height: 100%; border: 0; border-radius: 16px; background: #fff; }
.notification-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 8px;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--app-border);
  border-radius: 17px;
  background: #fff;
  padding: 14px;
  color: inherit;
  text-align: left;
}
.notification-card.is-unread { border-color: rgba(8,118,185,.24); background: #f0f8fd; }
.notification-card-icon { display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:13px;background:#eaf5fc;color:var(--app-primary); }
.notification-card-icon svg { width:20px; }
.notification-card-copy { min-width: 0; }
.notification-card-copy strong { display:block;margin-bottom:4px;font-size:14px; }
.notification-card-copy p { margin:0;color:var(--app-muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere; }
.notification-card-copy time { display:block;margin-top:7px;color:#8c98a7;font-size:10px; }
.notification-unread-dot { width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--app-primary); }
.notification-empty { margin-top:20vh;text-align:center; }
.notification-empty svg { width:34px;margin:0 auto 14px;color:#8c9aaa; }
.notification-empty h3 { margin:0 0 7px;font-size:16px; }
.notification-empty p { margin:0;color:var(--app-muted);font-size:13px;line-height:1.5; }
.service-detail-header { grid-template-columns:46px minmax(0,1fr) 46px; }
.service-detail-hero { border-radius:19px;background:linear-gradient(145deg,var(--app-primary-dark),var(--app-primary));padding:19px;color:#fff; }
.service-detail-hero small { color:rgba(255,255,255,.72);font-size:11px; }
.service-detail-hero h2 { margin:5px 0 13px;font-size:20px; }
.service-detail-hero .status-badge { background:rgba(255,255,255,.16);color:#fff; }
.service-detail-section { margin-top:14px;border:1px solid var(--app-border);border-radius:17px;background:#fff;padding:16px; }
.service-detail-section h3 { margin:0 0 8px;font-size:15px; }
.service-timeline { position:relative;margin-top:13px;padding-left:22px; }
.service-timeline::before { content:"";position:absolute;top:7px;bottom:8px;left:6px;width:2px;background:#dce6ef; }
.timeline-item { position:relative;padding:0 0 18px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before { content:"";position:absolute;top:4px;left:-20px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--app-primary);box-shadow:0 0 0 2px rgba(8,118,185,.18); }
.timeline-item strong { display:block;font-size:13px; }
.timeline-item time { display:block;margin-top:3px;color:var(--app-muted);font-size:10px; }
.timeline-item p { margin:6px 0 0;color:var(--app-muted);font-size:12px;line-height:1.45; }

.skeleton { display: block; overflow: hidden; border-radius: 13px; background: #e6ebf1; position: relative; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent); transform: translateX(-100%); animation: skeleton-shimmer 1.4s infinite; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
.skeleton-header { display: grid; gap: 10px; }.skeleton-line { height: 16px; }.skeleton-line.short { width: 30%; }.skeleton-line.wide { width: 66%; height: 28px; }
.skeleton-card { height: 178px; margin-bottom: 20px; }.skeleton-card.tall { height: 250px; }
.skeleton-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.skeleton-tile { height: 125px; }
.skeleton-list-row { height: 118px; margin-bottom: 12px; }

input,
textarea,
select,
button {
  font-size: 16px;
}


/* Apple Design refinement: yalnizca gorsel katman. */
:root {
  --app-primary: #0876b9;
  --app-primary-dark: #075f98;
  --app-background: #f2f2f7;
  --app-surface: #ffffff;
  --app-text: #1d1d1f;
  --app-muted: #6e6e73;
  --app-border: rgba(60, 60, 67, 0.16);
  --app-danger: #d70015;
  --app-success: #16835d;
  --app-shadow: 0 12px 34px rgba(35, 43, 55, 0.08);
  --material-background: rgba(249, 249, 251, 0.78);
  --material-border: rgba(255, 255, 255, 0.7);
  --press-scale: 0.97;
  color-scheme: light;
}

body {
  background: #e5e5ea;
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
a {
  -webkit-user-select: none;
  user-select: none;
}

.mobile-stage,
.screen,
.app-view,
.mobile-overlay {
  background:
    radial-gradient(circle at 88% -6%, rgba(8, 118, 185, 0.08), transparent 18rem),
    var(--app-background);
}

.welcome-copy h1,
.title-block h1,
.success-content h1,
.view-header h1,
.home-header h1,
.section-title h2,
.sheet-head h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-optical-sizing: auto;
}

.welcome-copy h1,
.title-block h1,
.success-content h1 {
  font-size: clamp(30px, 8.5vw, 38px);
  font-weight: 730;
  letter-spacing: -0.038em;
  line-height: 1.08;
}

.welcome-copy p,
.title-block p {
  color: var(--app-muted);
  font-size: 15px;
  line-height: 1.5;
}

.welcome-screen {
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.welcome-visual {
  padding-top: 0;
}

.brand-logo-large {
  width: min(72%, 270px);
  margin-bottom: 30px;
  filter: drop-shadow(0 10px 22px rgba(19, 42, 64, 0.08));
}

.welcome-copy {
  max-width: 320px;
}

.welcome-actions {
  gap: 10px;
  padding-top: 24px;
}

.primary-button,
.secondary-button {
  min-height: 54px;
  border-radius: 15px;
  font-weight: 650;
  transition:
    transform 100ms ease-out,
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    opacity 180ms ease-out;
}

.primary-button {
  border-color: transparent;
  background: var(--app-primary);
  box-shadow: 0 7px 18px rgba(8, 118, 185, 0.2);
}

.secondary-button {
  border-color: var(--app-border);
  background: rgba(255, 255, 255, 0.74);
  color: var(--app-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.primary-button:active,
.secondary-button:active,
.icon-button:active,
.overlay-back:active,
.pdf-header-button:active,
#notification-button:active,
.quick-grid button:active,
.filter-pills button:active,
.card-detail-button:active,
.document-button:active,
.payment-method-card:active,
.payment-bank-option:active,
.bank-copy-row:active,
.notification-card:active {
  transform: scale(var(--press-scale));
  transition-duration: 100ms;
}

.primary-button:hover {
  border-color: transparent;
  background: var(--app-primary-dark);
}

.screen-header {
  min-height: 52px;
}

.screen-header .icon-button,
.overlay-back,
.pdf-header-button,
#notification-button {
  border-radius: 50%;
  transition: transform 100ms ease-out, background-color 160ms ease-out;
}

.screen-header .icon-button:active,
.overlay-back:active,
.pdf-header-button:active,
#notification-button:active {
  background: rgba(8, 118, 185, 0.1);
}

.screen-body {
  padding-top: clamp(28px, 7vh, 64px);
}

.title-block {
  margin-bottom: 30px;
}

.eyebrow,
.section-kicker {
  color: var(--app-primary);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.055em;
}

.progress-track {
  height: 3px;
  background: rgba(60, 60, 67, 0.12);
}

.input-wrap,
.otp-group input,
.bottom-sheet select,
.payment-screen-form input,
.payment-screen-form textarea,
.money-input,
.arrival-order-form select {
  border-color: var(--app-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.input-wrap,
.bottom-sheet select,
.money-input,
.arrival-order-form select {
  border-radius: 14px;
}

.input-wrap:focus-within,
.payment-screen-form input:focus,
.payment-screen-form textarea:focus,
.money-input:focus-within,
.arrival-order-form select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 4px rgba(8, 118, 185, 0.1);
}

.otp-group input {
  border-radius: 12px;
}

.app-persistent-header,
.mobile-overlay-header,
.pdf-viewer-header,
.payment-flow-header {
  border-bottom-color: rgba(60, 60, 67, 0.1);
  background: var(--material-background);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.app-persistent-header {
  border-bottom: 0;
}

.app-persistent-header::after {
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  height: 12px;
  background: linear-gradient(to bottom, rgba(28, 36, 48, 0.05), transparent);
  content: "";
  pointer-events: none;
}

#notification-button {
  width: 42px;
  height: 42px;
}

#notification-button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
}

.notification-badge {
  top: 1px;
  right: 0;
  min-width: 18px;
  height: 18px;
  border-color: rgba(249, 249, 251, 0.9);
  font-size: 9px;
}

.view-scroll {
  padding-top: calc(var(--safe-top) + 8px);
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.view-header {
  margin: 4px 0 25px;
}

.view-header h1 {
  font-size: 34px;
  font-weight: 730;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.collapsing-view-scroll {
  --view-header-title-scale: 1;
  --view-header-title-lift: 0px;
  --view-header-secondary-opacity: 1;
  --view-header-material-opacity: 0;
  padding-top: 0;
  scroll-padding-top: calc(var(--safe-top) + 58px);
}

.collapsing-view-scroll > .view-header {
  position: sticky;
  z-index: 7;
  top: 0;
  isolation: isolate;
  margin:
    0
    calc(0px - var(--safe-right))
    25px
    calc(0px - var(--safe-left));
  padding:
    calc(var(--safe-top) + 12px)
    var(--safe-right)
    0
    var(--safe-left);
  box-shadow: none;
  pointer-events: none;
}

.collapsing-view-scroll > .view-header::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: auto;
  left: 0;
  width: min(82%, 340px);
  height: calc(var(--safe-top) + 72px);
  border: 0;
  background: rgba(249, 249, 251, 0.76);
  content: "";
  opacity: var(--view-header-material-opacity);
  box-shadow: none;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-mask-image: radial-gradient(
    ellipse 120% 100% at 0 0,
    #000 0,
    #000 43%,
    rgba(0, 0, 0, 0.7) 60%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 120% 100% at 0 0,
    #000 0,
    #000 43%,
    rgba(0, 0, 0, 0.7) 60%,
    transparent 86%
  );
}

.collapsing-view-scroll > .view-header h1,
.collapsing-view-scroll > .view-header .section-kicker,
.collapsing-view-scroll > .view-header .view-description {
  position: relative;
  z-index: 1;
}

.collapsing-view-scroll > .view-header h1 {
  transform:
    translate3d(0, var(--view-header-title-lift), 0)
    scale(var(--view-header-title-scale));
  transform-origin: left top;
  will-change: transform;
}

.collapsing-view-scroll > .view-header .section-kicker,
.collapsing-view-scroll > .view-header .view-description {
  opacity: var(--view-header-secondary-opacity);
  will-change: opacity;
}

.collapsing-view-scroll > .view-header.is-compact h1 {
  font-weight: 680;
}

.section-kicker {
  margin-bottom: 6px;
  text-transform: none;
}

.app-tabbar {
  right: 12px;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 12px;
  min-height: 66px;
  gap: 3px;
  padding: 6px;
  border-color: var(--material-border);
  border-radius: 23px;
  background: rgba(249, 249, 251, 0.76);
  box-shadow:
    0 14px 36px rgba(20, 31, 45, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.tab-item {
  min-height: 54px;
  gap: 2px;
  border-radius: 17px;
  color: #8e8e93;
  transition:
    transform 100ms ease-out,
    color 160ms ease-out,
    background-color 160ms ease-out;
}

.tab-item::after {
  overflow: hidden;
  max-width: 100%;
  content: attr(aria-label);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-item svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.1;
}

.tab-item.is-active {
  background: rgba(8, 118, 185, 0.11);
  color: var(--app-primary);
}

.home-header {
  margin: 3px 0 24px;
}

.home-header p {
  color: var(--app-muted);
  font-size: 14px;
}

.home-header h1 {
  font-size: 29px;
  font-weight: 730;
  letter-spacing: -0.035em;
}

.home-header .home-welcome {
  margin-top: 4px;
  color: #8e8e93;
  font-size: 13px;
}

.balance-card,
.payment-hero-card,
.service-detail-hero,
.transfer-amount-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 255, 255, 0.2), transparent 10rem),
    linear-gradient(145deg, #075884, #087fbd 70%, #1496cd);
  box-shadow: 0 16px 34px rgba(7, 84, 126, 0.18);
}

.balance-card {
  margin-bottom: 29px;
  border-radius: 24px;
  padding: 22px;
}

.balance-card > strong {
  font-size: 32px;
  font-weight: 720;
  letter-spacing: -0.04em;
}

.due-line {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.section-title h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.quick-grid {
  gap: 10px;
}

.quick-grid button,
.surface-card,
.account-card,
.receivable-card,
.profile-hero,
.warranty-card,
.service-request-card,
.notification-card,
.arrival-intro-card,
.arrival-order-form,
.arrival-success-card,
.payment-method-card,
.payment-bank-option,
.payment-bank-amount-form,
.selected-bank-card,
.online-request-form,
.payment-status-card,
.receipt-edit-form,
.receipt-edit-summary,
.service-detail-section {
  border-color: rgba(60, 60, 67, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 8px 24px rgba(35, 43, 55, 0.055),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.quick-grid button {
  min-height: 124px;
  border-radius: 20px;
  transition: transform 100ms ease-out, background-color 160ms ease-out;
}

.quick-grid button:active {
  background: rgba(255, 255, 255, 0.7);
}

.quick-grid button > span,
.warranty-order > span,
.profile-hero > span,
.feature-icon,
.notification-card-icon {
  background: rgba(8, 118, 185, 0.1);
  color: var(--app-primary);
}

.surface-card,
.account-card,
.receivable-card,
.warranty-card,
.profile-hero {
  border-radius: 20px;
}

.payment-summary-grid {
  overflow: hidden;
  gap: 1px;
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 18px;
  background: rgba(60, 60, 67, 0.1);
  box-shadow: 0 8px 24px rgba(35, 43, 55, 0.045);
}

.payment-summary-grid > div {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  padding: 15px 10px;
}

.filter-pills {
  gap: 8px;
  padding: 1px;
}

.filter-pills button {
  min-height: 38px;
  border-color: transparent;
  background: rgba(118, 118, 128, 0.1);
  color: var(--app-muted);
  transition: transform 100ms ease-out, color 160ms ease-out, background-color 160ms ease-out;
}

.filter-pills button.is-active {
  border-color: transparent;
  background: var(--app-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(8, 118, 185, 0.18);
}

.card-detail-button,
.document-button,
.copy-iban-button,
.payment-secondary-button {
  border-color: transparent;
  background: rgba(8, 118, 185, 0.09);
  color: var(--app-primary);
}

.status-badge {
  min-height: 27px;
  font-weight: 680;
}

.empty-card {
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
}

.bottom-sheet {
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom: 0;
  border-radius: 29px 29px 0 0;
  background: rgba(250, 250, 252, 0.94);
  box-shadow: 0 -20px 55px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

.sheet-backdrop {
  background: rgba(18, 22, 29, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sheet-handle {
  width: 36px;
  height: 5px;
  background: rgba(60, 60, 67, 0.28);
}

.sheet-head h2 {
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.detail-hero,
.note-box,
.service-info,
.payment-bank-selection-note,
.payment-security-note,
.payment-form-error,
.payment-status-reason,
.selected-bank-note {
  border-radius: 15px;
}

.top-toast {
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background: rgba(249, 249, 251, 0.88);
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.mobile-overlay-header,
.pdf-viewer-header {
  border-bottom-color: rgba(60, 60, 67, 0.1);
}

.mobile-overlay-header strong,
.pdf-viewer-header strong {
  font-weight: 690;
  letter-spacing: -0.015em;
}

.payment-flow,
.product-arrival-service {
  background: var(--app-background);
}

.payment-stepper {
  border-bottom-color: rgba(60, 60, 67, 0.1);
  background: rgba(255, 255, 255, 0.88);
}

.payment-stepper b {
  background: rgba(118, 118, 128, 0.12);
}

.payment-stepper .is-active {
  color: var(--app-primary);
}

.payment-stepper .is-active b,
.payment-stepper .is-active:not(:last-child)::after {
  background: var(--app-primary);
}

.payment-method-card,
.payment-bank-option {
  transition: transform 100ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}

.payment-bank-option.is-active,
.bank-choice-strip button.is-active {
  border-color: rgba(8, 118, 185, 0.42);
  background: rgba(8, 118, 185, 0.08);
  box-shadow: 0 0 0 3px rgba(8, 118, 185, 0.08);
}

.skeleton {
  background: rgba(118, 118, 128, 0.12);
}

.skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
}

:where(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 3px solid rgba(8, 118, 185, 0.22);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .tab-item::after {
    font-size: 8px;
  }

  .view-header h1 {
    font-size: 31px;
  }

  .balance-card {
    padding: 19px;
  }

  .payment-summary-grid strong {
    font-size: 12px;
  }
}

@media (hover: none) {
  .primary-button:hover {
    background: var(--app-primary);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .collapsing-view-scroll > .view-header::before {
    background: #fafafa;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .app-persistent-header,
  .app-tabbar,
  .mobile-overlay-header,
  .pdf-viewer-header,
  .payment-flow-header,
  .bottom-sheet,
  .top-toast,
  .secondary-button {
    background: #fafafa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sheet-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --app-muted: #4b4b50;
    --app-border: rgba(29, 29, 31, 0.42);
  }

  .app-persistent-header,
  .app-tabbar,
  .mobile-overlay-header,
  .pdf-viewer-header,
  .bottom-sheet,
  .top-toast {
    border-color: rgba(29, 29, 31, 0.42);
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .app-view,
  .mobile-overlay,
  .pdf-viewer,
  .bottom-sheet,
  .top-toast {
    transform: none !important;
  }

  .skeleton::after {
    display: none;
  }
}

/* Kullanici bazli tema secimi. */
.theme-card .section-title {
  align-items: flex-start;
  margin-bottom: 16px;
}

.theme-card .section-title > div {
  min-width: 0;
}

.theme-card .section-title p {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}

.theme-card .section-title > svg {
  width: 20px;
  height: 20px;
  color: var(--app-primary);
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: 16px;
  background: rgba(118, 118, 128, 0.12);
  padding: 4px;
}

.theme-choice {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--app-muted);
  padding: 8px 4px;
  text-align: center;
  transition:
    transform 100ms ease-out,
    background-color 160ms ease-out,
    color 160ms ease-out,
    box-shadow 160ms ease-out;
}

.theme-choice:active {
  transform: scale(0.96);
}

.theme-choice > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.1);
}

.theme-choice svg {
  width: 17px;
  height: 17px;
}

.theme-choice strong {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-choice small {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 9px;
  line-height: 1.2;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-choice.is-active {
  background: #fff;
  color: var(--app-primary);
  box-shadow: 0 3px 12px rgba(35, 43, 55, 0.1);
}

.theme-choice.is-active > span {
  background: rgba(8, 118, 185, 0.11);
}

.theme-choice:disabled {
  opacity: 0.72;
}

.theme-save-status {
  min-height: 17px;
  margin: 9px 2px -2px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.4;
}

html:is([data-theme="dark"], .theme-system-dark) {
  --app-primary: #0a84ff;
  --app-primary-dark: #409cff;
  --app-background: #000000;
  --app-surface: #1c1c1e;
  --app-text: #f5f5f7;
  --app-muted: #98989d;
  --app-border: rgba(84, 84, 88, 0.44);
  --app-separator: rgba(84, 84, 88, 0.34);
  --app-danger: #ff453a;
  --app-success: #30d158;
  --app-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  --material-background: rgba(28, 28, 30, 0.8);
  --material-border: rgba(255, 255, 255, 0.09);
  --status-transition-start: #000000;
  --status-transition-mid: rgba(0, 0, 0, 0.82);
  --status-transition-end: rgba(0, 0, 0, 0);
  color-scheme: dark;
}

html:is([data-theme="dark"], .theme-system-dark) body {
  background: #000;
}

html:is([data-theme="dark"], .theme-system-dark) .balance-card {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 92% -12%, rgba(10, 132, 255, 0.13), transparent 14rem),
    linear-gradient(145deg, #202023, #121214 76%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .balance-card > p,
html:is([data-theme="dark"], .theme-system-dark) .balance-meta small {
  color: rgba(235, 235, 245, 0.62);
}

html:is([data-theme="dark"], .theme-system-dark) .balance-meta {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html:is([data-theme="dark"], .theme-system-dark) .balance-card .due-line {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.9);
}

html:is([data-theme="dark"], .theme-system-dark) .service-detail-hero {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 92% -12%, rgba(10, 132, 255, 0.13), transparent 13rem),
    linear-gradient(145deg, #202023, #121214 76%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .service-detail-hero small {
  color: rgba(235, 235, 245, 0.62);
}

html:is([data-theme="dark"], .theme-system-dark) .service-detail-hero .status-badge {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-hero-card,
html:is([data-theme="dark"], .theme-system-dark) .transfer-amount-card {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 92% -12%, rgba(10, 132, 255, 0.13), transparent 14rem),
    linear-gradient(145deg, #202023, #121214 76%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .payment-bank-selection-note {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.9);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-bank-selection-note svg {
  color: #fff;
}

html:is([data-theme="dark"], .theme-system-dark) .money-columns,
html:is([data-theme="dark"], .theme-system-dark) .detail-list > div,
html:is([data-theme="dark"], .theme-system-dark) .transaction-row,
html:is([data-theme="dark"], .theme-system-dark) .arrival-success-card dl,
html:is([data-theme="dark"], .theme-system-dark) .arrival-success-card dl div,
html:is([data-theme="dark"], .theme-system-dark) .selected-payment-bank-summary,
html:is([data-theme="dark"], .theme-system-dark) .bank-transfer-instructions p,
html:is([data-theme="dark"], .theme-system-dark) .selected-bank-copy-list,
html:is([data-theme="dark"], .theme-system-dark) .bank-copy-row,
html:is([data-theme="dark"], .theme-system-dark) .payment-attempt-row {
  border-color: var(--app-separator);
}

html:is([data-theme="dark"], .theme-system-dark) .service-timeline::before {
  background: var(--app-separator);
}

html:is([data-theme="dark"], .theme-system-dark) .mobile-stage,
html:is([data-theme="dark"], .theme-system-dark) .screen,
html:is([data-theme="dark"], .theme-system-dark) .app-view,
html:is([data-theme="dark"], .theme-system-dark) .mobile-overlay {
  background:
    radial-gradient(circle at 88% -6%, rgba(10, 132, 255, 0.12), transparent 18rem),
    var(--app-background);
}

html:is([data-theme="dark"], .theme-system-dark) .brand-logo-large {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  padding: 17px 19px;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.28));
}

html:is([data-theme="dark"], .theme-system-dark) .app-persistent-header,
html:is([data-theme="dark"], .theme-system-dark) .mobile-overlay-header,
html:is([data-theme="dark"], .theme-system-dark) .pdf-viewer-header,
html:is([data-theme="dark"], .theme-system-dark) .payment-flow-header {
  border-bottom-color: rgba(84, 84, 88, 0.48);
  background: rgba(28, 28, 30, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .collapsing-view-scroll > .view-header::before {
  background: rgba(28, 28, 30, 0.76);
}

html:is([data-theme="dark"], .theme-system-dark) .app-persistent-header::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent);
}

html:is([data-theme="dark"], .theme-system-dark) .app-persistent-header img {
  width: 88px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  padding: 5px 7px;
}

html:is([data-theme="dark"], .theme-system-dark) .brand-logo-large.uses-dark-logo {
  border-radius: 0;
  background: transparent;
  padding: 0;
}

html:is([data-theme="dark"], .theme-system-dark) .app-persistent-header img.uses-dark-logo {
  width: 88px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

html:is([data-theme="dark"], .theme-system-dark) .notification-badge {
  border-color: rgba(28, 28, 30, 0.9);
}

html:is([data-theme="dark"], .theme-system-dark) .app-tabbar {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(28, 28, 30, 0.78);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.44),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .tab-item {
  color: #8e8e93;
}

html:is([data-theme="dark"], .theme-system-dark) .tab-item.is-active {
  background: rgba(10, 132, 255, 0.18);
  color: var(--app-primary);
}

html:is([data-theme="dark"], .theme-system-dark) .input-wrap,
html:is([data-theme="dark"], .theme-system-dark) .otp-group input,
html:is([data-theme="dark"], .theme-system-dark) .bottom-sheet select,
html:is([data-theme="dark"], .theme-system-dark) .payment-screen-form input,
html:is([data-theme="dark"], .theme-system-dark) .payment-screen-form textarea,
html:is([data-theme="dark"], .theme-system-dark) .money-input,
html:is([data-theme="dark"], .theme-system-dark) .arrival-order-form select {
  border-color: rgba(84, 84, 88, 0.68);
  background: rgba(44, 44, 46, 0.96);
  color: var(--app-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html:is([data-theme="dark"], .theme-system-dark) input::placeholder,
html:is([data-theme="dark"], .theme-system-dark) textarea::placeholder {
  color: #77777d;
}

html:is([data-theme="dark"], .theme-system-dark) .secondary-button {
  border-color: rgba(84, 84, 88, 0.68);
  background: rgba(44, 44, 46, 0.84);
  color: var(--app-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .quick-grid button,
html:is([data-theme="dark"], .theme-system-dark) .surface-card,
html:is([data-theme="dark"], .theme-system-dark) .account-card,
html:is([data-theme="dark"], .theme-system-dark) .receivable-card,
html:is([data-theme="dark"], .theme-system-dark) .profile-hero,
html:is([data-theme="dark"], .theme-system-dark) .warranty-card,
html:is([data-theme="dark"], .theme-system-dark) .service-request-card,
html:is([data-theme="dark"], .theme-system-dark) .notification-card,
html:is([data-theme="dark"], .theme-system-dark) .arrival-intro-card,
html:is([data-theme="dark"], .theme-system-dark) .arrival-order-form,
html:is([data-theme="dark"], .theme-system-dark) .arrival-success-card,
html:is([data-theme="dark"], .theme-system-dark) .payment-method-card,
html:is([data-theme="dark"], .theme-system-dark) .payment-bank-option,
html:is([data-theme="dark"], .theme-system-dark) .payment-bank-amount-form,
html:is([data-theme="dark"], .theme-system-dark) .selected-bank-card,
html:is([data-theme="dark"], .theme-system-dark) .online-request-form,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-amount,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-picker,
html:is([data-theme="dark"], .theme-system-dark) .payment-status-card,
html:is([data-theme="dark"], .theme-system-dark) .receipt-edit-form,
html:is([data-theme="dark"], .theme-system-dark) .receipt-edit-summary,
html:is([data-theme="dark"], .theme-system-dark) .service-detail-section {
  border-color: rgba(84, 84, 88, 0.48);
  background: rgba(28, 28, 30, 0.94);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html:is([data-theme="dark"], .theme-system-dark) .quick-grid button:active {
  background: rgba(44, 44, 46, 0.94);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-summary-grid {
  border-color: rgba(84, 84, 88, 0.48);
  background: rgba(84, 84, 88, 0.48);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-summary-grid > div {
  background: rgba(28, 28, 30, 0.98);
}

html:is([data-theme="dark"], .theme-system-dark) .filter-pills button,
html:is([data-theme="dark"], .theme-system-dark) .theme-picker {
  background: rgba(118, 118, 128, 0.24);
}

html:is([data-theme="dark"], .theme-system-dark) .filter-pills button.is-active {
  background: var(--app-primary);
  color: #fff;
}

html:is([data-theme="dark"], .theme-system-dark) .theme-choice.is-active {
  background: #3a3a3c;
  color: var(--app-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

html:is([data-theme="dark"], .theme-system-dark) .theme-choice > span {
  background: rgba(118, 118, 128, 0.2);
}

html:is([data-theme="dark"], .theme-system-dark) .theme-choice.is-active > span {
  background: rgba(10, 132, 255, 0.18);
}

html:is([data-theme="dark"], .theme-system-dark) .empty-card {
  border-color: rgba(84, 84, 88, 0.58);
  background: rgba(28, 28, 30, 0.58);
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-section {
  border-color: rgba(255, 159, 10, 0.34);
  background: rgba(255, 159, 10, 0.11);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-heading h2,
html:is([data-theme="dark"], .theme-system-dark) .review-payment-copy strong {
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-heading span,
html:is([data-theme="dark"], .theme-system-dark) .review-payment-heading > svg,
html:is([data-theme="dark"], .theme-system-dark) .review-payment-section > p,
html:is([data-theme="dark"], .theme-system-dark) .review-payment-copy small,
html:is([data-theme="dark"], .theme-system-dark) .review-payment-copy > span {
  color: #ffb340;
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-list {
  border-color: rgba(255, 159, 10, 0.28);
  background: rgba(255, 159, 10, 0.2);
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-card {
  background: #2c2c2e;
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-card:active {
  background: #3a3a3c;
}

html:is([data-theme="dark"], .theme-system-dark) .review-payment-icon,
html:is([data-theme="dark"], .theme-system-dark) .review-payment-status {
  background: rgba(255, 159, 10, 0.18);
  color: #ffb340;
}

html:is([data-theme="dark"], .theme-system-dark) .status-paid,
html:is([data-theme="dark"], .theme-system-dark) .warranty-status-active {
  background: rgba(48, 209, 88, 0.16);
  color: #57dc7b;
}

html:is([data-theme="dark"], .theme-system-dark) .status-overdue,
html:is([data-theme="dark"], .theme-system-dark) .warranty-status-expired {
  background: rgba(255, 69, 58, 0.16);
  color: #ff6961;
}

html:is([data-theme="dark"], .theme-system-dark) .status-partial,
html:is([data-theme="dark"], .theme-system-dark) .warranty-status-expiring {
  background: rgba(255, 159, 10, 0.17);
  color: #ffb340;
}

html:is([data-theme="dark"], .theme-system-dark) .status-unpaid,
html:is([data-theme="dark"], .theme-system-dark) .warranty-status-upcoming {
  background: rgba(142, 142, 147, 0.22);
  color: #c7c7cc;
}

html:is([data-theme="dark"], .theme-system-dark) .bottom-sheet {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(28, 28, 30, 0.95);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.48);
}

html:is([data-theme="dark"], .theme-system-dark) .sheet-handle {
  background: rgba(235, 235, 245, 0.28);
}

html:is([data-theme="dark"], .theme-system-dark) .detail-hero,
html:is([data-theme="dark"], .theme-system-dark) .service-info,
html:is([data-theme="dark"], .theme-system-dark) .selected-bank-note,
html:is([data-theme="dark"], .theme-system-dark) .payment-status-reason {
  background: #2c2c2e;
}

html:is([data-theme="dark"], .theme-system-dark) .note-box {
  background: rgba(255, 159, 10, 0.14);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-security-note {
  background: rgba(48, 209, 88, 0.13);
}

html:is([data-theme="dark"], .theme-system-dark) .customer-bank-limit,
html:is([data-theme="dark"], .theme-system-dark) .transfer-warning {
  border-color: rgba(255, 159, 10, 0.3);
  background: rgba(255, 159, 10, 0.13);
  color: #ffb340;
}

html:is([data-theme="dark"], .theme-system-dark) .payment-form-error,
html:is([data-theme="dark"], .theme-system-dark) .payment-cancel-button,
html:is([data-theme="dark"], .theme-system-dark) .payment-cancel-confirm {
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 69, 58, 0.12);
  color: #ff6961;
}

html:is([data-theme="dark"], .theme-system-dark) .payment-confirm-card {
  background: #1c1c1e;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-confirm-card > span,
html:is([data-theme="dark"], .theme-system-dark) .receipt-edit-summary > span {
  background: rgba(255, 69, 58, 0.15);
  color: #ff6961;
}

html:is([data-theme="dark"], .theme-system-dark) .top-toast {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(44, 44, 46, 0.9);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.44);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-flow,
html:is([data-theme="dark"], .theme-system-dark) .product-arrival-service {
  background: #000;
}

html:is([data-theme="dark"], .theme-system-dark) .payment-stepper {
  border-bottom-color: rgba(84, 84, 88, 0.48);
  background: rgba(28, 28, 30, 0.94);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-stepper b,
html:is([data-theme="dark"], .theme-system-dark) .payment-stepper span:not(:last-child)::after {
  background: #3a3a3c;
}

html:is([data-theme="dark"], .theme-system-dark) .payment-stepper .is-active b,
html:is([data-theme="dark"], .theme-system-dark) .payment-stepper .is-active:not(:last-child)::after {
  background: var(--app-primary);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-method-card strong,
html:is([data-theme="dark"], .theme-system-dark) .payment-bank-picker-heading strong,
html:is([data-theme="dark"], .theme-system-dark) .payment-bank-option-copy strong,
html:is([data-theme="dark"], .theme-system-dark) .payment-screen-form label,
html:is([data-theme="dark"], .theme-system-dark) .bank-account-list legend,
html:is([data-theme="dark"], .theme-system-dark) .selected-bank-card > h2,
html:is([data-theme="dark"], .theme-system-dark) .bank-copy-row strong,
html:is([data-theme="dark"], .theme-system-dark) .bank-transfer-instructions dd {
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .payment-bank-option-logo,
html:is([data-theme="dark"], .theme-system-dark) .selected-bank-logo,
html:is([data-theme="dark"], .theme-system-dark) .bank-logo,
html:is([data-theme="dark"], .theme-system-dark) .upload-status-icon {
  border-color: rgba(84, 84, 88, 0.5);
  background: #2c2c2e;
}

html:is([data-theme="dark"], .theme-system-dark) .bank-account-card,
html:is([data-theme="dark"], .theme-system-dark) .upload-drop,
html:is([data-theme="dark"], .theme-system-dark) .bank-transfer-instructions,
html:is([data-theme="dark"], .theme-system-dark) .bank-choice-strip button,
html:is([data-theme="dark"], .theme-system-dark) .bank-copy-row {
  border-color: rgba(84, 84, 88, 0.5);
  background: #1c1c1e;
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .bank-copy-row:active {
  background: #2c2c2e;
}

html:is([data-theme="dark"], .theme-system-dark) .bank-account-card code,
html:is([data-theme="dark"], .theme-system-dark) .arrival-success-card dd {
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-intro {
  border-bottom-color: rgba(84, 84, 88, 0.52);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-intro > span,
html:is([data-theme="dark"], .theme-system-dark) .payment-status-card.is-online-request > span {
  background: rgba(10, 132, 255, 0.16);
  color: var(--app-primary);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-intro strong {
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-intro small,
html:is([data-theme="dark"], .theme-system-dark) .online-request-hint {
  color: var(--app-muted);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-status-copy {
  background: rgba(10, 132, 255, 0.13);
  color: #74b9ff;
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-amount strong,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-picker > header h2,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-option-name strong,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-option-price strong,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-breakdown dd {
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-amount small,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-picker > header p,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-option-name small,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-option-price small,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-breakdown dl div {
  color: var(--app-muted);
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-amount button {
  background: rgba(10, 132, 255, 0.15);
  color: var(--app-primary);
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-option,
html:is([data-theme="dark"], .theme-system-dark) .online-installment-breakdown {
  border-color: rgba(84, 84, 88, 0.52);
  background: #1c1c1e;
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-option.is-active {
  border-color: rgba(10, 132, 255, 0.7);
  background: rgba(10, 132, 255, 0.13);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.09);
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-breakdown summary {
  color: #74b9ff;
}

html:is([data-theme="dark"], .theme-system-dark) .online-installment-breakdown .is-total {
  border-top-color: rgba(84, 84, 88, 0.5);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-cancel-summary {
  border-color: rgba(84, 84, 88, 0.52);
  background: rgba(84, 84, 88, 0.52);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-cancel-summary div {
  background: #2c2c2e;
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-cancel-summary dt {
  color: var(--app-muted);
}

html:is([data-theme="dark"], .theme-system-dark) .online-request-cancel-summary dd {
  color: var(--app-text);
}

html:is([data-theme="dark"], .theme-system-dark) .notification-card.is-unread {
  border-color: rgba(10, 132, 255, 0.38);
  background: rgba(10, 132, 255, 0.12);
}

html:is([data-theme="dark"], .theme-system-dark) .logout-button {
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 69, 58, 0.12);
  color: var(--app-danger);
}

html:is([data-theme="dark"], .theme-system-dark) .pdf-viewer,
html:is([data-theme="dark"], .theme-system-dark) .pdf-viewer-content {
  background: #000;
}

html:is([data-theme="dark"], .theme-system-dark) .pdf-zoom-controls {
  border-color: rgba(84,84,88,.62);
  background: rgba(44,44,46,.86);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}

html:is([data-theme="dark"], .theme-system-dark) .pdf-zoom-controls output {
  border-color: rgba(84,84,88,.55);
}

html:is([data-theme="dark"], .theme-system-dark) .skeleton {
  background: rgba(118, 118, 128, 0.26);
}

@media (prefers-reduced-transparency: reduce) {
  html:is([data-theme="dark"], .theme-system-dark) .collapsing-view-scroll > .view-header::before {
    background: #1c1c1e;
  }

  html:is([data-theme="dark"], .theme-system-dark) .app-persistent-header,
  html:is([data-theme="dark"], .theme-system-dark) .app-tabbar,
  html:is([data-theme="dark"], .theme-system-dark) .mobile-overlay-header,
  html:is([data-theme="dark"], .theme-system-dark) .pdf-viewer-header,
  html:is([data-theme="dark"], .theme-system-dark) .payment-flow-header,
  html:is([data-theme="dark"], .theme-system-dark) .bottom-sheet,
  html:is([data-theme="dark"], .theme-system-dark) .top-toast,
  html:is([data-theme="dark"], .theme-system-dark) .secondary-button {
    background: #1c1c1e;
  }
}

@media (prefers-contrast: more) {
  html:is([data-theme="dark"], .theme-system-dark) {
    --app-muted: #c7c7cc;
    --app-border: rgba(235, 235, 245, 0.58);
  }

  html:is([data-theme="dark"], .theme-system-dark) .app-persistent-header,
  html:is([data-theme="dark"], .theme-system-dark) .app-tabbar,
  html:is([data-theme="dark"], .theme-system-dark) .mobile-overlay-header,
  html:is([data-theme="dark"], .theme-system-dark) .pdf-viewer-header,
  html:is([data-theme="dark"], .theme-system-dark) .bottom-sheet,
  html:is([data-theme="dark"], .theme-system-dark) .top-toast {
    border-color: rgba(235, 235, 245, 0.58);
    background: #1c1c1e;
  }
}