/* İnternet Şubesi — neo-bank mobil-first stiller (emirvarlik.app ile uyumlu) */

:root {
  --is-ink: #231F20;
  --is-navy: #1B438B;
  --is-navy-deep: #143670;
  --is-brand: #0AA4B4;
  --is-brand-dark: #0792A1;
  --is-brand-deep: #087B87;
  --is-brand-soft: #E6F7F9;
  --is-solve: #00A86B;
  --is-solve-dark: #007A4D;
  --is-solve-soft: #E6F7EF;
  --is-line: #E2E8F0;
  --is-line-soft: #EEF2F7;
  --is-muted: #475569;
  --is-muted-soft: #94A3B8;
  --is-surface: #F8FAFC;

  /* Safe-area insets (iOS notch / android nav) */
  --is-safe-top: env(safe-area-inset-top, 0px);
  --is-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Mobile shell ölçüleri */
  --is-app-bar-h: 64px;
  --is-bottom-tabs-h: 76px;
}

html { scroll-behavior: smooth; }
html, body {
  /* Mobil yatay kayma / rubber-band fix — iOS Safari dahil */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100%;
  width: 100%;
}

/* iOS Safari focus-zoom önleme: input/select/textarea font-size < 16px ise tarayıcı sayfayı yakınlaştırıyor ve geri alınamıyor.
   Mobilde minimum 16px zorunlu. (checkbox/radio/button/submit hariç — onların boyutu native.) */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--is-surface);
  color: #0F172A;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Tüm alt elementlerin viewport'u aşmamasını garanti et — emniyet kemeri */
body * { max-width: 100%; }
/* İstisna: yatay scroll edilebilir alanlar (chip row, filter row) */
body .is-chip-row,
body .filter-btn-row,
body .is-chip-row *,
body .filter-btn-row * { max-width: none; }
.font-display { font-family: 'Inter Tight', Inter, sans-serif; letter-spacing: -0.02em; }
::selection { background: var(--is-brand); color: #fff; }

/* Hero blob arka plan (giriş ekranı) */
.is-hero-blob {
  position: absolute; inset: -200px -200px auto auto; width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(10,164,180,.20), transparent 70%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}
.is-hero-blob-2 {
  position: absolute; inset: auto auto -260px -200px; width: 640px; height: 640px;
  background: radial-gradient(closest-side, rgba(0,168,107,.15), transparent 70%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}

/* Glass header */
.is-glass {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* Reveal animation — CSS-side fallback ile JS yüklenmezse 3sn sonra görünür olur */
@keyframes is-reveal-fallback { to { opacity: 1; transform: none; } }
.is-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: all .7s cubic-bezier(.2,.7,.2,1);
  animation: is-reveal-fallback 0.001s linear 3s forwards;
}
.is-reveal.in { opacity: 1; transform: none; animation: none; }

/* Card lift */
.is-lift { transition: transform .25s ease, box-shadow .25s ease; }
.is-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(35,31,32,.10), 0 4px 12px rgba(35,31,32,.06); }

/* Step indicator */
.is-step-dot { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: all .25s; flex-shrink: 0; }
.is-step-dot.active { background: var(--is-brand); color: #fff; box-shadow: 0 0 0 4px var(--is-brand-soft); }
.is-step-dot.done { background: var(--is-solve); color: #fff; }
.is-step-dot.pending { background: var(--is-line); color: var(--is-muted-soft); }
.is-step-line { flex: 1; height: 2px; background: var(--is-line); transition: background .25s; }
.is-step-line.done { background: var(--is-solve); }

/* Spinner */
.is-spinner { width: 40px; height: 40px; border: 3px solid var(--is-brand-soft); border-top-color: var(--is-brand); border-radius: 50%; animation: is-spin .9s linear infinite; }
@keyframes is-spin { to { transform: rotate(360deg); } }

/* OTP digit boxes — mobile-first büyük dokunuş hedefi */
.is-otp-input { width: 44px; height: 56px; text-align: center; font-size: 22px; font-weight: 700; border: 2px solid var(--is-line); border-radius: 14px; background: #fff; transition: all .15s; -webkit-appearance: none; appearance: none; }
.is-otp-input:focus { outline: none; border-color: var(--is-brand); box-shadow: 0 0 0 4px var(--is-brand-soft); }
.is-otp-input.filled { border-color: var(--is-brand); }
@media (min-width: 480px) { .is-otp-input { width: 48px; } }

/* ============================================================
   DESKTOP SIDEBAR  (1024px+)
   ============================================================ */
.is-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 268px; background: #fff; border-right: 1px solid var(--is-line); display: flex; flex-direction: column; z-index: 30; }
.is-sidebar .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 10px; color: var(--is-muted); font-weight: 600; font-size: 14px; transition: all .15s; }
.is-sidebar .nav-item:hover { background: var(--is-surface); color: #0F172A; }
.is-sidebar .nav-item.active { background: var(--is-brand-soft); color: var(--is-brand); }
.is-sidebar .nav-item i, .is-sidebar .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.is-main { margin-left: 268px; min-height: 100vh; }

@media (max-width: 1023.98px) {
  .is-sidebar { display: none; }
  .is-main { margin-left: 0; padding-bottom: calc(var(--is-bottom-tabs-h) + var(--is-safe-bottom) + 16px); }
}

/* ============================================================
   MOBILE APP BAR  (< 1024px)  — banka tarzı hoş geldin başlığı
   ============================================================ */
.is-app-bar {
  display: none;
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--is-app-bar-h) + var(--is-safe-top));
  padding-top: var(--is-safe-top);
  background: linear-gradient(180deg, #0AA4B4 0%, #0792A1 100%);
  color: #fff;
  align-items: center; justify-content: space-between;
  padding-left: 16px; padding-right: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 24px -16px rgba(7, 146, 161, .35);
}
.is-app-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -16px; height: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,146,161,.15) 0%, transparent 100%);
}
.is-app-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.is-app-bar-avatar {
  width: 40px; height: 40px; border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
  flex-shrink: 0;
  font-family: 'Inter Tight', Inter, sans-serif;
}
.is-app-bar-greeting { min-width: 0; line-height: 1.15; }
.is-app-bar-greeting .label { font-size: 11px; font-weight: 600; opacity: .72; letter-spacing: .04em; text-transform: uppercase; }
.is-app-bar-greeting .name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; line-height: 1.15; }
.is-app-bar-actions { display: flex; align-items: center; gap: 8px; }
.is-app-bar-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  color: #fff;
  position: relative;
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.is-app-bar-btn:hover, .is-app-bar-btn:active { background: rgba(255,255,255,.24); }
.is-app-bar-btn .badge {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFB020; box-shadow: 0 0 0 2px #0792A1;
}
.is-app-bar-btn i, .is-app-bar-btn svg { width: 18px; height: 18px; }

@media (max-width: 1023.98px) {
  .is-app-bar { display: flex; }
  /* tek tip mobile header — eski "lg:hidden header" yerine */
  .is-mobile-header-legacy { display: none !important; }
}

/* Sayfa başlığı (app-bar altında) */
.is-page-title-mobile {
  display: none;
  padding: 14px 20px 6px;
  background: linear-gradient(180deg, #0792A1 0%, var(--is-surface) 100%);
}
@media (max-width: 1023.98px) {
  .is-page-title-mobile { display: block; }
}
.is-page-title-mobile h1 { font-family: 'Inter Tight', Inter, sans-serif; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.is-page-title-mobile .crumb { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; }

/* ============================================================
   MOBILE BOTTOM TAB BAR  (banka uygulamaları gibi)
   ============================================================ */
.is-bottom-tabs {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--is-line);
  padding-bottom: var(--is-safe-bottom);
  box-shadow: 0 -8px 24px -12px rgba(15,23,42,.10);
}
.is-bottom-tabs-inner {
  height: var(--is-bottom-tabs-h);
  display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
  align-items: center;
  position: relative;
}
.is-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 100%;
  color: var(--is-muted-soft);
  font-size: 11px; font-weight: 600;
  letter-spacing: .01em;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.is-tab i, .is-tab svg { width: 22px; height: 22px; }
.is-tab.active { color: var(--is-brand); }
.is-tab.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--is-brand);
}
.is-tab .label { font-weight: 700; }
.is-tab.active .label { font-weight: 800; }

/* Center primary CTA — Emir AI butonu */
.is-tab-cta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  height: 100%;
  font-size: 10px; font-weight: 800; color: var(--is-solve-dark);
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.is-tab-cta > span:last-child { transform: translateY(-10px); }
.is-tab-cta-fab {
  position: relative;
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, #0AA4B4 0%, #0F172A 100%);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(15,23,42,.45), 0 0 0 4px #fff;
  transform: translateY(-14px);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Pulse halkası — eai-fab ile aynı animasyon */
.is-tab-cta-fab::before {
  content: ''; position: absolute; inset: -4px; border-radius: 18px;
  border: 2px solid #0AA4B4;
  animation: is-tab-cta-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes is-tab-cta-pulse {
  0%   { transform: scale(0.95); opacity: 0.7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.is-tab-cta:active .is-tab-cta-fab,
.is-tab-cta:hover .is-tab-cta-fab { transform: translateY(-16px) scale(1.04); box-shadow: 0 12px 24px -8px rgba(15,23,42,.55), 0 0 0 4px #fff; }
.is-tab-cta-fab i, .is-tab-cta-fab svg { width: 22px; height: 22px; stroke-width: 2.4; position: relative; z-index: 1; }

@media (max-width: 1023.98px) {
  .is-bottom-tabs { display: block; }
}

/* ============================================================
   MOBILE DRAWER  (Menü sekmesinden açılır)
   ============================================================ */
.is-drawer-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.is-drawer-overlay.open { display: block; opacity: 1; }
.is-drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(86vw, 360px);
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  padding-top: var(--is-safe-top);
  padding-bottom: var(--is-safe-bottom);
}
.is-drawer-panel.open { transform: translateX(0); }
.is-drawer-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--is-brand) 0%, var(--is-brand-dark) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.is-drawer-header .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.is-drawer-header .who-avatar {
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  font-family: 'Inter Tight', Inter, sans-serif;
}
.is-drawer-header .who-name { font-weight: 800; font-size: 14px; line-height: 1.15; letter-spacing: -.01em; }
.is-drawer-header .who-meta { font-size: 10px; opacity: .8; margin-top: 1px; }
.is-drawer-close {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.is-drawer-close i, .is-drawer-close svg { width: 14px; height: 14px; }
.is-drawer-nav { flex: 1; overflow-y: auto; padding: 6px 8px 12px; }
.is-drawer-section { margin-top: 6px; }
.is-drawer-section-label { padding: 6px 12px 4px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--is-muted-soft); }
.is-drawer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--is-ink);
  font-weight: 600; font-size: 13px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.is-drawer-item:active, .is-drawer-item:hover { background: var(--is-surface); }
.is-drawer-item.active { background: var(--is-brand-soft); color: var(--is-brand); font-weight: 700; }
.is-drawer-item .ic {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--is-surface);
  display: grid; place-items: center;
  color: var(--is-muted);
  flex-shrink: 0;
}
.is-drawer-item.active .ic { background: #fff; color: var(--is-brand); }
.is-drawer-item .ic i, .is-drawer-item .ic svg { width: 15px; height: 15px; }
.is-drawer-item .arrow { margin-left: auto; color: var(--is-muted-soft); }
.is-drawer-item .arrow i, .is-drawer-item .arrow svg { width: 13px; height: 13px; }
.is-drawer-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--is-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--is-muted);
}

/* ============================================================
   CARDS (mobil + masaüstü)
   ============================================================ */
.is-card { background: #fff; border: 1px solid var(--is-line); border-radius: 20px; padding: 20px; }
.is-card-elevated { background: #fff; border: 1px solid var(--is-line); border-radius: 22px; padding: 22px; box-shadow: 0 1px 3px rgba(35,31,32,.06), 0 1px 2px rgba(35,31,32,.04); }
@media (min-width: 768px) { .is-card { padding: 24px; } .is-card-elevated { padding: 28px; border-radius: 24px; } }

/* ============================================================
   KPI HERO — Desktop (büyük) + Mobile (kompakt cüzdan kartı)
   ============================================================ */
.is-kpi-hero {
  background: linear-gradient(135deg, #0AA4B4 0%, #0792A1 50%, #087B87 100%);
  color: #fff; border-radius: 24px; padding: 22px;
  position: relative; overflow: hidden;
}
@media (min-width: 768px) {
  .is-kpi-hero { border-radius: 28px; padding: 36px; }
}
.is-kpi-hero::before {
  content: ''; position: absolute; top: -100px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.is-kpi-hero::after {
  content: ''; position: absolute; bottom: -120px; left: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(0,168,107,.35), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.is-kpi-hero > * { position: relative; z-index: 1; }

/* Mobil: kompakt cüzdan kartı varyantı */
.is-wallet-card {
  background: linear-gradient(135deg, #0AA4B4 0%, #0792A1 60%, #00A86B 130%);
  color: #fff; border-radius: 22px; padding: 22px;
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(7,146,161,.55);
}
.is-wallet-card::before {
  content: ''; position: absolute; top: -80px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.is-wallet-card > * { position: relative; z-index: 1; }
.is-wallet-card .label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.is-wallet-card .amount { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 900; font-size: 36px; line-height: 1.05; letter-spacing: -.02em; }
.is-wallet-card .amount-tl { font-size: 18px; font-weight: 700; opacity: .85; margin-left: 2px; }
.is-wallet-card .grid-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
}
.is-wallet-card .stat-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 3px; }
.is-wallet-card .stat-value { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Quick action chip (ana sayfa hızlı eylemler) */
.is-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.is-quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px;
  background: #fff;
  border: 1px solid var(--is-line);
  border-radius: 16px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}
.is-quick-action:active { transform: scale(.96); }
.is-quick-action .ic {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
}
.is-quick-action .ic i, .is-quick-action .ic svg { width: 18px; height: 18px; }
.is-quick-action .ic.brand { background: var(--is-brand-soft); color: var(--is-brand); }
.is-quick-action .ic.solve { background: var(--is-solve-soft); color: var(--is-solve); }
.is-quick-action .ic.amber { background: #FEF3C7; color: #B45309; }
.is-quick-action .ic.purple { background: #F3E8FF; color: #7C3AED; }
.is-quick-action .label { font-size: 11px; font-weight: 700; color: var(--is-ink); line-height: 1.15; }

/* Status badges */
.is-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.is-badge-aktif { background: var(--is-brand-soft); color: var(--is-brand); }
.is-badge-odendi { background: var(--is-solve-soft); color: var(--is-solve-dark); }
.is-badge-bekliyor { background: #FEF3C7; color: #92400E; }
.is-badge-dava { background: #FEE2E2; color: #991B1B; }
.is-badge-tamamlandi { background: var(--is-solve-soft); color: var(--is-solve-dark); }
.is-badge-iptal { background: #F1F5F9; color: var(--is-muted); }

/* Pulse dot */
.is-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--is-solve); box-shadow: 0 0 0 3px rgba(0,168,107,.20); animation: is-pulse 2s ease-out infinite; }
@keyframes is-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(0,168,107,.20); } 50% { box-shadow: 0 0 0 6px rgba(0,168,107,.0); } }

/* ============================================================
   MOBILE LIST ITEMS (borç/taksit kartları)
   ============================================================ */
.is-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--is-line);
  border-radius: 16px;
  transition: background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.is-list-item:active { background: var(--is-surface); }
.is-list-item .leading {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--is-surface);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.is-list-item .body { flex: 1; min-width: 0; }
.is-list-item .body .title { font-weight: 700; font-size: 14px; color: var(--is-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-list-item .body .sub { font-size: 12px; color: var(--is-muted); margin-top: 2px; }
.is-list-item .trailing { text-align: right; flex-shrink: 0; }
.is-list-item .trailing .amount { font-weight: 800; font-size: 15px; font-family: 'Inter Tight', Inter, sans-serif; color: var(--is-ink); letter-spacing: -.01em; }
.is-list-item .trailing .meta { font-size: 11px; color: var(--is-muted-soft); margin-top: 2px; font-weight: 600; }

/* Highlighted upcoming payment */
.is-list-item.highlight {
  background: linear-gradient(135deg, var(--is-brand-soft) 0%, #fff 100%);
  border-color: rgba(10,164,180,.35);
  box-shadow: 0 8px 24px -16px rgba(10,164,180,.55);
}

/* ============================================================
   FORM ELEMENTS (mobil-first)
   ============================================================ */
.is-input-block { display: block; margin-bottom: 16px; }
.is-input-label { display: block; font-size: 11px; font-weight: 800; color: var(--is-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.is-input {
  width: 100%; height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--is-line);
  border-radius: 14px;
  background: #fff;
  font-size: 16px; /* iOS zoom önler */
  font-weight: 500; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
  outline: none;
}
.is-input:focus { border-color: var(--is-brand); box-shadow: 0 0 0 4px var(--is-brand-soft); }
.is-input.tracking-num { letter-spacing: .04em; font-weight: 600; }
.is-btn-primary {
  width: 100%; height: 56px;
  border-radius: 14px;
  background: var(--is-ink); color: #fff;
  font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.is-btn-primary:hover { background: var(--is-brand); }
.is-btn-primary:active { transform: scale(.98); }
.is-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.is-btn-solve {
  width: 100%; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--is-solve) 0%, var(--is-solve-dark) 100%); color: #fff;
  font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 12px 24px -10px rgba(0,168,107,.55);
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   SCROLLABLE QUICK CHIPS (yatay kaydırılan badge listesi)
   ============================================================ */
.is-chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.is-chip-row::-webkit-scrollbar { display: none; }
.is-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--is-line);
  font-size: 12px; font-weight: 700; color: var(--is-ink);
  white-space: nowrap;
}
.is-chip .ic { color: var(--is-brand); }

/* Hide scrollbars on body when drawer open */
body.is-drawer-open { overflow: hidden; }

/* ============================================================
   PAGE BODY VERTICAL SPACING (mobil + masaüstü)
   ============================================================ */
.is-page-body { padding: 16px 16px 24px; }
@media (min-width: 768px) { .is-page-body { padding: 24px 28px; } }
@media (min-width: 1024px) { .is-page-body { padding: 32px 40px; } }

/* ============================================================
   MOBILE LIST POLISH — borç/taksit satırları (truncate, dikey hiza)
   ============================================================ */
@media (max-width: 1023.98px) {
  /* Borç listesi satırları — uzun isimleri truncate et */
  #debt-rows > div, #debts-list > div, #upcoming-list > div {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  #debt-rows .truncate, #debts-list .truncate { min-width: 0; }
  /* Filter chip row — yatay scroll */
  .filter-row, [class*="filter"]:not(.filter-btn) > .filter-btn:first-child { /* heuristic */ }

  /* Generic mobile spacing for inner main */
  main.px-5 { padding-left: 16px !important; padding-right: 16px !important; }
  main.py-8 { padding-top: 16px !important; padding-bottom: 16px !important; }
}

/* Borç filter chip row scroll yatay */
.filter-btn-row { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.filter-btn-row::-webkit-scrollbar { display: none; }
.filter-btn-row .filter-btn { flex-shrink: 0; }

/* ============================================================
   E-DEVLET RESMI BANNER + ALT-SEKMELER + FOOTER
   (giris.turkiye.gov.tr UX'ine yakın görünüm)
   ============================================================ */
.ed-official-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  flex-wrap: wrap;
}
.ed-official-banner .ed-logo-main {
  height: 52px;
  width: auto;
  display: block;
}
.ed-official-banner .ed-logo-side {
  height: 32px;
  width: auto;
  display: block;
}
@media (max-width: 480px) {
  .ed-official-banner { padding: 12px 14px; gap: 10px; }
  .ed-official-banner .ed-logo-main { height: 42px; }
  .ed-official-banner .ed-logo-side { height: 26px; }
}

.ed-method-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 2px solid #E2E8F0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ed-method-tabs::-webkit-scrollbar { display: none; }
.ed-method-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.ed-method-tab:hover:not([disabled]) { color: #0050a0; }
.ed-method-tab.active {
  color: #0050a0;
  border-bottom-color: #0050a0;
}
.ed-method-tab[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.ed-official-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #94A3B8;
  flex-wrap: wrap;
}
.ed-official-footer a {
  color: #0050a0;
  font-weight: 600;
  text-decoration: none;
}
.ed-official-footer a:hover { text-decoration: underline; }