/* Phase 3: Form Design System — @import CSS spec geregi TUM kurallardan ONCE
   olmali (yoksa tarayici yok sayar). Onceden bu iki @import dosyanin SONUNDA
   (~satir 2025) idi; bu yuzden form-design-system.css + quote-form-bridge.css
   cascade'e HIC girmiyordu -> input/buton border-radius var(--form-radius)
   yerine 0 kaliyordu. Basa tasindi: artik FDS yuvarlak stiller yukleniyor.
   form-design-system.css --form-radius/--form-* token'larini tanimlar;
   quote-form-bridge.css bunlari .quote-form-shell .io-* / .io-btn'a uygular. */
@import url('./form-design-system.css');
@import url('./quote-form-bridge.css');

/* ============================================
   SIGORTABIN CANLI FORM BILESENLERI - BIREBIR CSS
   Kaynak: styles-canli.css (canli sigortabin.com.tr)
   ============================================ */

/* ============================================
   0. MARKA PALETTE - CSS DEGISKENLERI (Sub-patch 3g form parite)
   ============================================
   Canli sigortabin.com.tr DOM inspector ile birebir olculmus degerler.
   Diger CSS kurallari (.io-form-control, .io-btn-primary vs.) bu degisken-
   leri var() ile cagirir; tek bir yerden palette degisimi mumkun.
   ============================================ */
:root {
  --brand-primary: #FF4438;         /* CTA kirmizisi */
  --brand-primary-hover: #E63B30;
  --brand-primary-fg: #FFFFFF;
  --brand-secondary: #002169;       /* lacivert - input border + label active */
  --input-bg: #F9FCFF;              /* pure white DEGIL; cok hafif mavi */
  --input-text: #212529;            /* Bootstrap koyu gri (lacivert DEGIL) */
  --label-idle: #808080;            /* idle floating label rengi */
}

/* ============================================
   1. BODY & TEMEL (canli styles-JSFL4QVY.css paritesi)
   ============================================
   Canli sigortabin.com.tr Bootstrap5 + Angular tabanli; body bg gri-mavi
   (#f5f7f9), font-family "Red Hat Display" (Google Fonts, OfferLayout/
   BaseLayout <link> ile yuklenir), default text color koyu lacivert
   (#002169). Bu kurallar SiteLayout (BaseLayout) icin de gecerli ki
   t\u00fcm sayfalarda tutarli tipografi olusur. */
body,
body .master-layout-mainview {
  background: #f5f7f9;
  font-family: 'Red Hat Display', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  color: #002169;
  word-break: break-word;
  line-height: normal;
}

body a {
  color: #002169;
  text-decoration: none;
}

/* Form Group */
.io-form-group {
  position: relative;
  margin-bottom: 16px;
}

.io-form-group small {
  margin-top: 4px;
  color: red;
  display: block;
  font-size: 13px;
}

/* Form Control (input, select, textarea) - Sub-patch 3g canli paritesi
   ============================================
   Canli DOM olcumleri:
   - height: 60px (sabit, min-height degil ki textarea ile karismasin)
   - padding: 24 12 0 16 (asimetrik; ust 24 floating label icin yer acar)
   - border: 0.8px (hairline lacivert)
   - radius: 0 (koseli, yuvarlatma yok)
   - color: #212529 (Bootstrap koyu gri, lacivert DEGIL - lacivert label icin)
   - line-height: 22.5px (font-size 15 x 1.5)
   - transition: border + box-shadow (focus state'i icin)
   - tap-highlight: transparent (iOS Safari mavi flash'i onler)
   TODO Sub-patch 3h+: focus box-shadow rengi/spread canlidan olculmedi -
   simdilik 2px border kalir; canli olculurse var() ile guncellenir. */
.io-form-control {
  display: block;
  width: 100%;
  height: 60px;
  padding: 24px 12px 0 16px;
  border-radius: 0;
  border: 0.8px solid var(--brand-secondary);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  box-shadow: none !important;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.io-form-control:focus {
  outline: none;
  border-width: 1.6px;            /* 0.8 x 2 - canlinin "kalin border" focus stili */
}

.io-form-control:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

/* Sub-patch 3g - Native placeholder gizleme yardimcisi.
   IoTextbox <input>'a placeholder-hidden class'i ekler: SR (screen reader)
   icin placeholder attribute korunur ama gorsel olarak gizlenir. Floating
   label pattern bu nedenle hem accessible hem gorsel paritede. */
.placeholder-hidden::placeholder {
  opacity: 0;
}

/* Floating Placeholder (input ve textbox icin) - Sub-patch 3g canli paritesi
   ============================================
   Idle state: dikey ortali (top:50% + translateY -50%), 15px, w400, #808080
   Active state (focus VEYA value): kucuk + yukari (top:8, no transform),
   11px, w400, #002169 lacivert, background input-bg ile "border'i keser"
   (label sanki input'un ust kenarinin uzerinde bir notch'a oturmus gibi).
   TODO Sub-patch 3h+: active color hex canlidan ileri turda dogrulanacak;
   simdilik --brand-secondary kullanildi - kullanici notu: tahmin. */
.io-floating-placeholder {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
  -webkit-user-select: none;
  background: transparent;
  color: var(--label-idle);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  transition: all 0.15s ease;
}

input.io-form-control:focus ~ .io-floating-placeholder,
input.io-form-control:not(:placeholder-shown) ~ .io-floating-placeholder,
textarea.io-form-control:focus ~ .io-floating-placeholder,
textarea.io-form-control:not(:placeholder-shown) ~ .io-floating-placeholder {
  top: 8px;
  transform: none;
  font-size: 11px;
  padding: 0 4px;
  background: var(--input-bg);    /* border'i "keser" - notch effect */
  color: var(--brand-secondary);  /* TODO 3h: canli olcusu */
}

/* Native placeholder mantigi:
   - Bos input + unfocused -> placeholder GORUNMEZ (sadece label gozukur)
   - Bos input + focused   -> placeholder GORUNUR ("GG.AA.YYYY" gibi hint metni)
   - Dolu input            -> placeholder dogal olarak gizli (browser davranisi) */
input.io-form-control::placeholder,
textarea.io-form-control::placeholder {
  color: transparent;
  opacity: 0;
  transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

input.io-form-control:focus::placeholder,
textarea.io-form-control:focus::placeholder {
  color: #b0b0b0;
  opacity: 1;
}

/* Textbox wrapper */
.io-textbox {
  position: relative;
}

.io-textbox.position-relative {
  position: relative;
}

/* Native <select> — label ustte, secili deger altta (e-posta/input ile ayni hiza) */
.io-textbox select.io-form-control {
  cursor: pointer;
  padding: 24px 36px 10px 16px;
  line-height: 22.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23002169' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.io-textbox select.io-form-control ~ .io-floating-placeholder {
  top: 8px;
  transform: none;
  font-size: 11px;
  padding: 0 4px;
  background: var(--input-bg);
  color: var(--brand-secondary);
}

.io-textbox select.io-form-control:focus ~ .io-floating-placeholder {
  top: 8px;
  transform: none;
}

/* ============================================
   PLAKA ALANI — statik «TR» (Sub-patch 3k)
   Canlı: ülke kodu absolute sol; floating label idle/active yatay offset.
   ============================================ */
.vehicle-plate-textbox {
  position: relative;
}

.vehicle-plate-textbox .country-code {
  position: absolute;
  left: 16px;
  top: 28px;
  color: var(--brand-secondary);
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* TR için yer; canli: padding-left 50px */
.vehicle-plate-input {
  padding-left: 50px !important;
}

.vehicle-plate-textbox .io-floating-placeholder {
  left: 50px;
}

.vehicle-plate-textbox input.io-form-control:focus ~ .io-floating-placeholder,
.vehicle-plate-textbox
  input.io-form-control:not(:placeholder-shown)
  ~ .io-floating-placeholder {
  left: 12px;
}

/* Validation error styling */
.io-form-group:has(small) .io-form-control {
  border-color: red !important;
}
.io-form-group:has(small) .io-form-control:focus {
  box-shadow: 0 0 0 0.1rem rgba(255, 0, 0, 0.5);
}

/* ============================================
   COMBOBOX (Select2 Widget Clone)
   ============================================ */
.io-combobox {
  display: block;
}

.io-combobox .combobox {
  position: relative;
}

.io-combobox .combobox .floating-label {
  position: absolute;
  z-index: 99;
  user-select: none;
  pointer-events: none;
  -webkit-user-select: none;
  left: 16px;
  color: gray;
  display: none;
  font-size: 13px;
}

.io-combobox .combobox.combobox-selected-item .floating-label {
  top: 8px;
  line-height: normal;
  transition: 0.2s ease-in-out;
  display: inline-block;
}

/* Secili gorunum: yuksek padding __rendered uzerinden (asagida) saglanır */

/* Select2 container - dis wrapper */
.io-combobox .combobox .select2 {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 100% !important;
}

.io-combobox .combobox .select2 .selection {
  display: block;
}

/* Select2 selection - gorunus (Sub-patch 3m canli dropdown paritesi)
   Input ile farkli: 16px / #444 sag ok alani sag 20 padding */
.io-combobox .combobox .select2-selection {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  height: 60px;
  min-height: 60px;
  background: var(--input-bg);
  border: 0.8px solid var(--brand-secondary);
  border-radius: 0;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.io-combobox .combobox .select2-selection:focus {
  outline: none;
  border-width: 1.6px;
}

/* Dropdown'da gorunur metin: input'tan daha buyuk punto + daha acik gri */
.io-combobox .combobox .select2-selection__rendered {
  box-sizing: border-box;
  min-height: 60px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 14px 20px 14px 16px;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.5px;
  color: #444444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.io-combobox .combobox.combobox-selected-item .select2-selection__rendered {
  padding: 24px 20px 0 16px;
}

.io-combobox .combobox .select2-selection__placeholder {
  color: var(--label-idle);
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 16px;
}

/* Select2 arrow — lacivert capraz ok (caret) */
.io-combobox .combobox .select2-selection__arrow {
  position: absolute;
  right: 16px;
  top: calc(50% + 6px);
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.io-combobox .combobox .select2-selection__arrow::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--brand-secondary);
  border-bottom: 1.6px solid var(--brand-secondary);
  transform: rotate(45deg);
  margin-top: -6px;
}

.io-combobox .combobox.is-open .select2-selection__arrow::before {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* Disabled state */
.io-combobox .combobox.is-disabled .select2-selection {
  cursor: not-allowed;
  background-color: #f5f5f5;
  opacity: 0.7;
}

.io-combobox .combobox.is-disabled .select2-selection__arrow {
  display: none;
}

/* Validation error */
.io-form-group:has(small) .io-combobox .select2-selection {
  border-color: red !important;
}

/* Hidden native select (a11y icin tutuluyor)
   clip-path: inset(50%) modern eşdeğer; eski `clip` deprecated. İkisi de
   tutulur ki bazi tarayicilarin native <select> arrow'u sizmasin
   (Windows Chrome'da gozlemlendi). */
.io-combobox .combobox select.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Dropdown panel — Sub-patch 3m kenarlık / tipografi paritesi */
.io-combobox-dropdown {
  position: absolute;
  z-index: 1051;
  background-color: #fff;
  border: 0.8px solid var(--brand-secondary);
  border-top: none;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  box-sizing: border-box;
  left: 0;
}

/* Dropdown search input */
.io-combobox-dropdown__search {
  padding: 8px;
  border-bottom: 0.8px solid var(--brand-secondary);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.io-combobox-dropdown__search input {
  width: 100%;
  border: 0.8px solid var(--brand-secondary);
  background-color: var(--input-bg);
  min-height: 44px;
  padding: 8px 16px;
  outline: none;
  border-radius: 0;
  font-size: 16px;
  color: #444444;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  box-sizing: border-box;
}

.io-combobox-dropdown__search input:focus {
  border-width: 1.6px;
}

.io-combobox-dropdown__no-results {
  padding: 16px;
  color: #999;
  text-align: center;
  font-size: 14px;
}

.io-combobox-dropdown__option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #444444;
  text-align: left;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  transition: background 0.1s ease;
}

.io-combobox-dropdown__option:hover,
.io-combobox-dropdown__option.is-highlighted {
  background-color: #f0f4f9;
  color: #444444;
}

.io-combobox-dropdown__option.is-selected {
  background-color: var(--brand-secondary);
  color: #ffffff;
}

/* ============================================
   IoCombobox MOBİL BOTTOM-SHEET (≤767.98px) — desktop dropdown değişmez;
   TAM-YÜKSEKLİK (100dvh, klavye-güvenli: JS visualViewport overlay height/top'u
   ayarlar). Sticky arama üstte, opsiyon listesi altında kaydırılır. İçerik
   .io-combobox-dropdown__* sınıflarını yeniden kullanır.
   ============================================ */
.io-cb-sheet-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100dvh;
  background: #fff;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

.io-cb-sheet {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 33, 105, 0.22);
  animation: ioCbSheetUp 0.22s ease-out;
}

@keyframes ioCbSheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.io-cb-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid #f0e5e5;
  flex: 0 0 auto;
}

.io-cb-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: #002169;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Close butonu = mevcut bottom-sheet deseni (.mpc-sheet-close): dairesel gri,
   default kare değil; site tutarlılığı. */
.io-cb-sheet-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
}

.io-cb-sheet-close-icon {
  width: 18px;
  height: 18px;
}

.io-cb-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobil sheet: opsiyonlar daha geniş dokunma alanı */
.io-cb-sheet-body .io-combobox-dropdown__option {
  padding: 14px 16px;
  border-bottom: 1px solid #f5f0f0;
}

/* Sheet arama input köşesi = site form-input token'ı (kare DEĞİL). Yalnız
   sheet'e scope'lu — desktop dropdown arama input'u değişmez. */
.io-cb-sheet-body .io-combobox-dropdown__search input {
  border-radius: var(--form-radius);
}

/* ============================================
   FLOW NAVIGATION (Geri/Devam butonlari) — canlı .flow-navigation
   ============================================ */
.flow-navigation,
.io-flow-navigation {
  margin-top: 60px;
}

.flow-navigation .form-group {
  margin-bottom: 0;
}

.io-flow-navigation .io-form-group {
  margin-bottom: 0;
}

/* ============================================
   IO BUTTONS (Geri/Devam) - Sub-patch 3g canli paritesi
   ============================================
   Canli olcumler:
   - height 48.6 (padding 13x2 + line-height 21 + border 0.8x2 = 48.6)
   - padding 13 36
   - font-size 14, line-height 21, font-weight 500
   - border-radius 60 default; 82 yalnizca primary/secondary CTA (canli .btn)
   .io-btn temel kural; .io-btn-primary kirmizi varyant. */
.io-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48.6px;
  padding: 13px 36px;
  border: 0.8px solid transparent;
  border-radius: 60px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.05s ease;
}

.io-btn.io-btn-light {
  border-color: #E6E6E6;
  background: transparent;
  color: var(--brand-secondary);
}

.io-btn.io-btn-light:hover {
  background: #fafafa;
}

/* Akış Geri butonu — ghost/ikincil (primary CTA baskın kalsın) */
.io-flow-navigation .io-btn.io-btn-light {
  border-color: #e0e0e0;
  color: #4a5568;
  background: transparent;
  font-weight: 500;
}

.io-flow-navigation .io-btn.io-btn-light:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
  color: #002169;
}

.io-btn.io-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-fg);
  border-radius: 82px;
}

.io-btn.io-btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.io-btn.io-btn-primary:active {
  transform: scale(0.98);
}

.io-btn.io-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dialog / modal ikincil aksiyon — lacivert pill (Sub-patch 3k) */
.io-btn.io-btn-secondary {
  background: var(--brand-secondary);
  color: #ffffff;
  border: 0.8px solid var(--brand-secondary);
  border-radius: 82px;
  padding: 13px 36px;
  height: 48.6px;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.io-btn.io-btn-secondary:hover {
  background: #001a52;
}

.io-btn.io-btn-secondary:active {
  transform: scale(0.98);
}

.io-btn.io-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Submit button icindeki text wrap'i. Canli sigortabin pattern'i:
   <button><span class="btn-content"><span>Teklif AL</span></span></button>
   - ileride spinner yerlestirmek icin esnek katman saglar.
   Flex center ile button ic alanini doldurur. */
.btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* d-flex justify-content-between for buttons */
.io-flow-navigation .d-flex {
  display: flex;
}

.io-flow-navigation .justify-content-between {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Canlı io-button: btn-primary max-width-350 w-100 — form-column içinde yan yana
   Geri/Devam sıkışmasın (.btn-content width:100% + width:auto çakışması). */
.io-flow-navigation .io-btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
  max-width: 350px;
  width: 100%;
  box-sizing: border-box;
}

.io-flow-navigation .io-btn .btn-content {
  width: auto;
}

/* ============================================
   RADIO (Dar Paket / Genis Paket)
   ============================================ */
.io-radio {
  display: inline-block;
}

.io-radio .radio-control {
  display: flex;
  gap: 8px;
  align-items: center;
}

.io-radio .radio-control .radio {
  cursor: pointer;
  width: 20px;
  height: 20px;
  accent-color: #455a64;
  margin: 0;
}

.io-radio .radio-control .radio-text {
  font-size: 15px;
  color: #002169;
  cursor: pointer;
}

/* d-flex gap-20 for radio group */
.gap-20 {
  gap: 20px;
}

/* ============================================
   FORM GREY (Form Karti)
   ============================================ */
.form-grey {
  padding: 32px;
  background: #fff;
  box-shadow: 0 5px 4.5px -3px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f2f3;
}

.form-grey h5 {
  margin-bottom: 24px;
  font-size: 17px;
  font-weight: 500;
  color: #002169;
}

/* Canlı breadcrumb (io-content layout) */
.breadcrumb-wrapper {
  margin: 0 auto 40px;
  position: relative;
  max-width: 400px;
  width: 100%;
}

.progress-items {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.progress-bar {
  width: 80%;
  z-index: 0;
  border-radius: 100px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 11px auto 0;
  height: 4px;
  background-color: rgba(255, 68, 56, 0.5);
}

.progress-bar-line {
  background-color: #ff4538;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100px;
  transition: width 0.3s ease;
}

.progress-item {
  width: 25%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
}

.breadcrumb-wrapper-icon {
  background: #fff;
  border: 1px solid #002169;
  color: #002169;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.active-progress-item > .breadcrumb-wrapper-icon {
  background-color: #ff4538;
  border: 1px solid #ff4538;
  color: #fff;
}

.breadcrumb-wrapper-title {
  width: 100%;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  margin-top: 5px;
  text-align: center;
  display: none;
  color: #002169;
}

.active-progress-item > .breadcrumb-wrapper-title {
  font-weight: 500;
}

@media (min-width: 1200px) {
  .progress-bar {
    margin: 15px auto 0;
    height: 4px;
  }

  .breadcrumb-wrapper-title {
    margin-top: 10px;
    font-size: 12px;
    display: block;
  }
}

/* col-lg-9 form-grey içinde Geri/Devam — canlı btn + justify-content-between */
.form-grey .flow-navigation .d-flex.form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.form-grey .flow-navigation .btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Step text - "Seyahat Sağlık" basligi */
.step-text {
  text-align: center;
  margin-bottom: 32px;
  font-size: 32px;
  font-weight: 500;
  color: #002169;
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 767.98px) {
  .form-grey {
    padding: 20px;
  }
  .io-btn {
    width: 100%;
  }
  .flow-navigation .d-flex,
  .io-flow-navigation .d-flex {
    flex-direction: column-reverse;
    gap: 16px;
  }

  .form-grey .flow-navigation .btn {
    flex: 1 1 100%;
    width: 100%;
  }
  input.io-form-control,
  select.io-form-control,
  textarea.io-form-control {
    font-size: 16px !important;
  }
}

/* ============================================
   PHONE VERIFY + OTP MODAL  (Verimor SMS akisi)
   ============================================ */

/* === Phone verify blok === */
.phone-verify-block {
  background: #fff9f9;
  border: 1px solid #f3eceb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.phone-verify-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.phone-verify-input {
  flex: 1 1 auto;
}
.phone-verify-input .io-form-group {
  margin-bottom: 0 !important;
}
.phone-verify-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: stretch;
  min-height: 60px;
}
.phone-verify-error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 8px;
}
.phone-verify-hint {
  font-size: 12px;
  color: #6c757d;
  margin-top: 8px;
}
.phone-verify-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 8px;
  color: #002169;
  font-size: 14px;
}
.phone-verify-check {
  background: #4caf50;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.phone-verify-change {
  margin-left: auto;
  background: none;
  border: none;
  color: #ff4438;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* fieldset disabled durumunda kilitli gorunum */
.form-locked {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 480px) {
  .phone-verify-row {
    flex-direction: column;
  }
  .phone-verify-btn {
    width: 100%;
  }
}

/* === OTP modal === */
.otp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px;
}
.otp-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.otp-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #6c757d;
  width: 32px;
  height: 32px;
}
.otp-modal-title {
  margin: 0 0 12px;
  font-size: 18px;
  color: #002169;
  font-weight: 600;
}
.otp-modal-info {
  margin: 0 0 20px;
  color: #002169;
  font-size: 14px;
  line-height: 1.4;
}
.otp-modal-input {
  width: 100%;
  height: 56px;
  padding: 12px;
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  border: 2px solid #ced4da;
  border-radius: 8px;
  outline: none;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  transition: border-color 0.2s;
  color: #002169;
  background: #fff;
}
.otp-modal-input:focus {
  border-color: #002169;
}
.otp-modal-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}
.otp-modal-error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
}
.otp-modal-meta {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #6c757d;
}
.otp-modal-expired {
  color: #dc3545;
  font-weight: 500;
}
.otp-modal-verify {
  width: 100%;
  margin-top: 20px;
}
.otp-modal-resend {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: none;
  color: #002169;
  font-size: 13px;
  cursor: pointer;
  padding: 12px;
  text-decoration: underline;
}
.otp-modal-resend:disabled {
  color: #6c757d;
  cursor: not-allowed;
  text-decoration: none;
}

/* ============================================================
   CANLI SIGORTABIN BOOTSTRAP/SELECT2 SELECTOR ALIAS'LARI
   ============================================================
   Bizim React component'lerimiz .io-* prefix kullaniyor (.io-form-control,
   .io-btn, .io-combobox > .combobox > .select2-selection); canli sigortabin
   ise Angular + Bootstrap5 + Select2 ile (.form-control, .btn.btn-primary,
   .select2-container--default ...) class isimleri kullaniyor.

   Bu blok canli class isimlerini de hedefler ki:
     1) Eger ileride bir bilesen .io-* yerine canli class kullanirsa (orn.
        Bootstrap'in <input class="form-control">), ayni gorsel cikar.
     2) /satin-al gibi sayfalarda Bootstrap kalintisi class'lar da canli
        paritesinde gozukur.
   Mevcut kurallarin DUPLICATE'i degil - ek selector listesi. */

/* Form-control alias (input/textarea) - canli .form-control */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  display: block;
  width: 100%;
  border-radius: 0;
  border: 1px solid #002169;
  background: #f9fcff;
  min-height: 60px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 24px;
  padding-bottom: 0;
  font-size: 15px;
  font-weight: 500;
  color: #002169;
  box-shadow: none;
  font-family: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  outline: none;
  border: 2px solid #002169;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
  color: transparent;
  opacity: 0;
}

input.form-control:focus::placeholder,
textarea.form-control:focus::placeholder {
  color: #b0b0b0;
  opacity: 1;
}

/* Floating placeholder alias - canli .floating-placeholder */
.floating-placeholder {
  position: absolute;
  top: 18px;
  left: 16px;
  user-select: none;
  pointer-events: none;
  transition: 0.2s ease-in-out;
  color: gray;
  font-size: 15px;
  font-weight: 400;
}

input.form-control:focus ~ .floating-placeholder,
input.form-control:not(:placeholder-shown) ~ .floating-placeholder,
textarea.form-control:focus ~ .floating-placeholder,
textarea.form-control:not(:placeholder-shown) ~ .floating-placeholder {
  top: 8px;
  font-size: 13px;
}

/* Bootstrap .btn alias - canli .btn.btn-primary / .btn.btn-light /
   .btn.btn-secondary. Mevcut .io-btn kurallari (337-374) zaten oval-pill;
   bu blok Bootstrap class kullanan sayfalar icin paralel tanim. */
.btn,
button.btn {
  font-size: 14px;
  min-height: 46px;
  font-weight: 500;
  border-radius: 60px;
  padding: 13px 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn.btn-primary,
button.btn-primary {
  background: #ff4438;
  border-color: #ff4438;
  border-radius: 82px;
  color: #fff;
}

.btn.btn-primary:hover {
  background: #e53d33;
  border-color: #e53d33;
}

.btn.btn-secondary {
  background: #165494;
  border-color: #165494;
  border-radius: 82px;
  color: #fff;
}

.btn.btn-secondary:hover {
  background: #11447a;
  border-color: #11447a;
}

.btn.btn-light {
  background: transparent;
  border: 1px solid #e6e6e6;
  color: #002169;
}

.btn.btn-light:hover {
  background: #f8f9fa;
}

.btn:disabled,
button.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn .btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Select2 widget alias (.select2-container .select2-selection--single)
   Bizim .io-combobox .combobox .select2-selection zaten min-height:60px +
   #f9fcff bg + #002169 border ile canli paritesi; bu blok Select2 widget'i
   dogrudan kullanan sayfalar icin alias. */
.select2.select2-container .select2-selection,
.select2-container .select2-selection--single {
  min-height: 60px;
  background: #f9fcff;
  border: 1px solid #002169;
  border-radius: 0;
}

.select2.select2-container.select2-container--open .select2-selection {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Select2 native Select2 panel - canli paritesi (eger Select2 widget'i
   dogrudan kullanilirsa). Bizim custom React panel .io-combobox-dropdown
   ile ayri stillenir (yukarida satir 257-321). */
.select2-container .select2-dropdown {
  border: 1px solid #002169;
  border-top: none;
  border-radius: 0;
  background: #fff;
}

.select2-container .select2-dropdown .select2-search {
  padding: 16px;
}

.select2-container .select2-dropdown .select2-search .select2-search__field {
  border: 1px solid #002169;
  background-color: #f9fcff;
  min-height: 44px;
  padding-left: 16px;
  outline: none;
  border-radius: 0;
  font-size: 15px;
  color: #002169;
}

.select2-container .select2-dropdown .select2-results .select2-results__option {
  padding: 8px 16px;
  text-align: left;
  font-size: 15px;
  color: #002169;
}

.select2-container .select2-dropdown .select2-results .select2-results__option--highlighted {
  background-color: #4eadf2;
  color: #fff;
}

/* Floating label dropdown alias - canli .combobox-floating-label */
.combobox-floating-label {
  position: absolute;
  z-index: 99;
  user-select: none;
  pointer-events: none;
  left: 17px;
  top: 8px;
  color: gray;
  font-size: 13px;
  font-weight: 400;
}

.combobox-selected-item .select2-selection__rendered {
  padding-top: 24px;
}

/* Select2 default arrow <b> spans'i gizle - bizim ::before chevron'umuz
   tek kaynak (satir 213-220). */
.select2.select2-container .select2-selection .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
  border: none;
}

/* iOS Safari zoom-on-input onleme - 16px alti font-size'da iOS sayfayi
   zoomlar; mobile'da .form-control 16px'a cikartilir. */
@media (max-width: 767.98px) {
  .form-control,
  input.form-control,
  textarea.form-control {
    font-size: 16px;
  }
  .btn {
    width: 100%;
  }
}

/* ============================================================
   BilgiAdimi (Step 1) - Lottie + Form 2-kolon layout
   ============================================================
   /urunler/trafik-sigortasi (BilgiAdimi.tsx) sayfasinda sol kolonda
   Lottie animasyonu (travel-car-city.json - kirmizi araba + sehir +
   ucak), sag kolonda mevcut form (TC + Dogum + Telefon + KVKK + buton).
   Canli sigortabin paritesi: desktop 2-kolon, mobile (<=767.98px) tek
   kolon + animasyon gizli (performans + viewport tasarrufu). */
.bilgi-adimi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px;
}

.bilgi-adimi-lottie-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottie-animation-container {
  max-width: 500px;
  width: 100%;
  aspect-ratio: 6 / 5;
}

@media (max-width: 767.98px) {
  .bilgi-adimi-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .bilgi-adimi-lottie-col,
  .lottie-hide-mobile {
    display: none !important;
  }
}

/* Hero illustration + Lottie boyutlandırma — config-driven her ürün için.
   Canli sigortabin paritesi: Trafik + Kasko + diger Lottie'li urunler
   492x492 KARE (1/1 aspect-ratio). Sub-patch 3e 5/4 -> 3f 1/1.
   Mobile viewport'a otomatik scale (max-width: 100%). */
.sb-hero-illustration {
  position: relative;
  width: 100%;
  max-width: 492px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.sb-hero-illustration .sb-hero-lottie {
  width: 100%;
  height: 100%;
  display: block;
}
.sb-hero-illustration .sb-hero-lottie-fallback {
  width: 100%;
  height: auto;
  display: block;
}
/* Sub-patch 3f - Lottie-siz urunler icin sol kolonda yer kaplayan
   bos placeholder; .sb-hero-illustration dimensions'larini kalitir. */
.sb-hero-illustration--placeholder {
  background: transparent;
}
@media (max-width: 768px) {
  .sb-hero-illustration {
    max-width: 100%;
  }
}

/* ============================================
   FORM COLUMN - RESPONSIVE GENISLIK (Sub-patch 3g canli paritesi)
   ============================================
   Onceki yaklasim (3g ilk iterasyon): .io-form-group + .io-textbox +
   .sb-form-submit-button uzerine sabit max-width: 468px. Canli olculer
   tutmadi - dogru hedef RESPONSIVE matris (mobile 326 / tablet 312 /
   desktop 476). Wrapper yaklasimi: BilgiAdimi.tsx form-fields div'ini
   .form-column class'ina aldi; tum cocuk elementler (input, button,
   checkbox) width:100% ile bu wrapper'a doldurulur.
   Eski sabit width hedefleri (468/634/350) bu surumde KALDIRILDI.
   ============================================ */
.form-column {
  width: 100%;
  max-width: 326px;        /* mobile (<768) */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .form-column {
    max-width: 312px;       /* tablet */
  }
}

@media (min-width: 1200px) {
  .form-column {
    max-width: 476px;       /* desktop */
  }
}

/* İki sütunlu formlar (arac-bilgileri) — canlı col-lg-9 (~924px içerik) */
.form-column.form-column--wide {
  max-width: 100%;
}

@media (min-width: 1200px) {
  .form-column.form-column--wide {
    max-width: 924px;
  }
}

/* Submit butonu .form-column icinde tek satir; spec marginleri:
   margin-top 32, margin-bottom 40. Yalnizca form-column icindeki
   .io-btn-primary'i hedefler ki diger akislardaki nav butonlari
   (Geri/Devam) etkilenmesin. */
.form-column .io-btn,
.form-column .btn {
  width: 100%;
}

/* Sub-patch 3h - Submit buton max-width 350 + ortalanmis. Canli sigortabin
   class'i `btn btn-primary m-b-40 m-t-32 max-width-350 w-100` ile
   width:100% + max-width:350px kombinasyonunu kullaniyor. Form-column
   desktop'ta 476px oldugu icin buton parent'i tamamen doldurmaz; 350'de
   tavanlanir ve margin auto ile yatayda ortalanir. Mobile/tablet'te
   form-column zaten 350'nin altinda (326/312) oldugu icin max-width
   devreye girmez, mevcut davranis korunur. display:block margin-auto
   centerlamasi icin gerekli - .io-btn defaultta inline-flex. */
.form-column .io-btn.io-btn-primary {
  display: block;
  margin-top: 32px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 350px;
}

/* Sub-patch 3h - Inline consent link (Gizlilik Politikasi / KVKK metni).
   Canli sigortabin DOM inspector kanitlari:
   - color #002169 (= var(--brand-secondary), 3g'de tanimli)
   - font 'Red Hat Display' 16px (input'lardan 1px buyuk - bilincli
     hiyerarsi)
   - font-weight 500
   - text-decoration underline
   - cursor pointer
   - Hover'da renk DEGISMIYOR (canli pattern); :hover ayni renk.
   - tabIndex={-1} JSX'te eklendi; :focus outline none defansif.
   <button> default styling'i sifirla: background transparent, border 0,
   padding 0, display inline ki paragraf icine native span gibi otursun
   (canli pattern: anchor degil, sadece tiklanabilir gorsel span). */
.consent-link {
  display: inline;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--brand-secondary);
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  /* button reset: line-height inherit so paragraf flow korunur */
  line-height: inherit;
}

.consent-link:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}

.consent-link:focus,
.consent-link:focus-visible {
  outline: none;
}

/* Bootstrap uyumlu blok margin — tek satırlık yardım grubu için (3j ruhsat-help) */
.form-group {
  position: relative;
  margin-bottom: 16px;
}

/* ============================================
   HELP LINK — yardım / "nasıl öğrenebilirim?"
   Yasal consent-link'TEN AYRIDIR — kırmızı, küçük (<small> tag).
   ============================================ */
.help-link {
  display: inline;
  color: var(--brand-primary);
  cursor: pointer;
  text-decoration: underline;
  background: transparent;
  border: 0;
  padding: 0;
}

.help-link:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

.help-link:focus,
.help-link:focus-visible {
  outline: none;
}

/* ============================================
   LICENSE SAMPLE LIGHTBOX (Sub-patch 3i)
   ============================================
   Ruhsat-bilgileri yardim görseli: /assets/images/library/license-sample.webp */

.license-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.license-modal-panel {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.license-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--brand-secondary);
  padding: 4px 8px;
}

.license-modal-close:hover {
  opacity: 0.85;
}

.license-modal-close:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.license-modal-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Sub-patch 3k — içerik paritesi (overlay/panel/close görsel blokları dokunulmadı) */
.license-modal-title {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-secondary);
  margin: 0 0 12px 0;
  padding-right: 32px;
}

.license-modal-description {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.license-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Canlı Bootstrap utility isimleri (img-fluid w-100) — global parite */
.img-fluid {
  max-width: 100%;
  height: auto;
}

.w-100 {
  width: 100%;
}

/* Yan yana Geri/Devam — 3h Teklif AL tek buton kurallarını ezme */
.form-column .io-flow-navigation {
  width: 100%;
}

.form-column .io-flow-navigation .d-flex {
  width: 100%;
}

.form-column .io-flow-navigation .io-btn,
.form-column .io-flow-navigation .btn {
  flex: 1 1 calc(50% - 8px);
  width: 100% !important;
  max-width: 350px;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 48.6px;
  padding: 13px 36px;
  box-sizing: border-box;
}

.form-column .io-flow-navigation .io-btn.io-btn-primary,
.form-column .io-flow-navigation .io-btn.io-btn-secondary,
.form-column .io-flow-navigation .io-btn.io-btn-light {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 767.98px) {
  .form-column .io-flow-navigation .io-btn,
  .form-column .io-flow-navigation .btn {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================
   LEGAL MODAL (3r — KVKK, Gizlilik, Hizmet Sözleşmesi)
   io-kvkkmodalpopup / io-gizlilikpolitikasimodalpopup paritesi
   ============================================ */
.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.legal-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.legal-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #F0E5E5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.legal-modal-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #002169;
  margin: 0;
  flex: 1;
  padding-right: 12px;
}

.legal-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #002169;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legal-modal-close:hover {
  background: #f5f5f5;
}

.legal-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  color: #002169;
  font-size: 15px;
  line-height: 1.6;
}

.legal-modal-body h1,
.legal-modal-body h2,
.legal-modal-body h3,
.legal-modal-body h4 {
  color: #002169;
  margin-top: 24px;
  margin-bottom: 12px;
}

.legal-modal-body p {
  margin-bottom: 12px;
}

.legal-modal-body ul,
.legal-modal-body ol {
  padding-left: 24px;
  margin-bottom: 12px;
}

.legal-modal-markdown {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

.legal-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #F0E5E5;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .legal-modal {
    max-height: 90vh;
    border-radius: 8px;
  }

  .legal-modal-header h2 {
    font-size: 17px;
  }

  .legal-modal-footer .io-btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .legal-modal {
    max-height: 90vh;
    border-radius: 8px;
  }

  .legal-modal-header h2 {
    font-size: 17px;
  }

  .legal-modal-footer .io-btn {
    width: 100%;
  }
}

/* ===== Manual purchase CTA (supportsOnlinePurchase:false carriers) ===== */
.manual-purchase-price-hint {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #6b7280;
  font-weight: 400;
}

.vade-farksiz-taksit-hint {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  color: #002169;
  text-align: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.vade-farksiz-taksit-hint:hover {
  color: #001a52;
}

.vade-farksiz-taksit-hint:focus-visible {
  outline: 2px solid #002169;
  outline-offset: 2px;
  border-radius: 2px;
}

.td-sticky-manual-hint {
  margin-top: 4px;
  text-align: left;
}

.mpc-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #002169;
  border-radius: 82px;
  background: #fff;
  color: #002169;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 33, 105, 0.08);
}

.mpc-cta-btn:hover {
  background: #f8fafc;
  border-color: #001a52;
  box-shadow: 0 2px 8px rgba(0, 33, 105, 0.12);
}

.mpc-cta-btn:active {
  transform: scale(0.98);
}

.mpc-cta-wa-icon {
  flex-shrink: 0;
  color: #25d366;
}

.mpc-cta-btn--card,
.mpc-cta-btn.teklif-satin-al {
  min-width: 160px;
  height: 48.6px;
  padding: 10px 18px;
}

.mpc-cta-btn--compact,
.mpc-cta-btn.teklif-satin-al--compact,
.mpc-cta-btn.teklif-satin-al--manual {
  min-width: 0;
  height: auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 12px;
  white-space: nowrap;
}

.teklif-kart--list .mpc-cta-btn.teklif-satin-al--manual {
  width: auto;
  max-width: none;
  min-width: 140px;
  margin: 0 auto;
}

.mpc-cta-btn--sticky {
  min-width: 140px;
  height: 48px;
  padding: 10px 16px;
  font-size: 13px;
  flex-shrink: 0;
}

.mpc-cta-btn--odeme {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  font-size: 15px;
  margin-top: 12px;
}

.mpc-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.mpc-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 12px 20px 28px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  animation: mpc-sheet-slide-up 0.28s ease-out;
}

@keyframes mpc-sheet-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mpc-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #e5e7eb;
}

.mpc-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
}

.mpc-sheet-close-icon {
  width: 18px;
  height: 18px;
}

.mpc-sheet-title {
  margin: 0 32px 20px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #002169;
}

.mpc-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mpc-channel-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-family: inherit;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}

.mpc-channel-btn:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.mpc-channel-btn:active {
  transform: scale(0.99);
}

.mpc-channel-btn--whatsapp {
  background: #ecfdf3;
  border: 1.5px solid #86efac;
  color: #166534;
}

.mpc-channel-btn--whatsapp .mpc-channel-btn-icon {
  color: #25d366;
}

.mpc-channel-btn--phone {
  background: #f0f4ff;
  border: 1.5px solid #c7d2fe;
  color: #002169;
}

.mpc-channel-btn-icon {
  display: flex;
  flex-shrink: 0;
}

.mpc-channel-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.mpc-channel-btn-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.mpc-channel-btn-sub {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
}

@media (min-width: 768px) {
  .mpc-sheet-overlay {
    align-items: center;
    padding: 16px;
  }

  .mpc-sheet {
    border-radius: 16px;
    padding: 24px 24px 28px;
    animation: mpc-popover-in 0.22s ease-out;
  }

  .mpc-sheet-handle {
    display: none;
  }

  @keyframes mpc-popover-in {
    from {
      transform: scale(0.96);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
}