/* input(1531,1): run-time error CSS1019: Unexpected token, found '@' */
/* ==========================================================================
   FiyatPlus /arac-degerle — Ana Sayfa Stilleri (v3)
   Scope:  .arac-degerle-page (Index.cshtml root wrapper)
   Tokens: arac-degerle-tokens.css (fp-* prefix)

   NOT: Bu dosya baştan yazilmis; eski surum arac-degerle.legacy.css olarak
        yedeklidir (rollback icin). JS selector/id/name'ler invariant'tir,
        Docs/arac-degerle.selectors.invariant.md dosyasina bakiniz.
   ========================================================================== */

/* =======================================================================
   1) TEMEL / SCOPE KOKENI
   ======================================================================= */
.arac-degerle-page {
  color: var(--fp-primary-800);
  font-size: var(--fp-fs-16);
  line-height: var(--fp-lh-body);
}

.arac-degerle-page *,
.arac-degerle-page *::before,
.arac-degerle-page *::after {
  box-sizing: border-box;
}

.arac-degerle-page :focus-visible {
  outline: none;
  box-shadow: var(--fp-sh-focus);
  border-radius: var(--fp-r-sm);
}

.arac-degerle-page img {
  max-width: 100%;
  height: auto;
}

/* FontAwesome 4 minimal subset fallback (legacy'den korundu) */
.arac-degerle-page .fa {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.arac-degerle-page .fa-times::before        { content: "\00d7"; font-size: 1.1em; }
.arac-degerle-page .fa-angle-left::before   { content: "\2039"; font-size: 1.3em; }
.arac-degerle-page .fa-angle-right::before  { content: "\203a"; font-size: 1.3em; }
.arac-degerle-page .fa-chevron-down::before { content: "\25be"; font-size: 0.9em; }
.arac-degerle-page .fa-check::before        { content: "\2713"; font-size: 1em; font-weight: bold; }
.arac-degerle-page .fa-phone::before        { content: "\260E"; font-size: 1em; }

/* =======================================================================
   2) HERO BANDI
   ======================================================================= */
.arac-degerle-page .fp-hero {
  position: relative;
  padding: calc(var(--header-height, 80px) + var(--fp-sp-8)) 0 var(--fp-sp-10);
  margin-top: 0;
  background: linear-gradient(135deg, var(--fp-primary-800) 0%, var(--fp-primary-700) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.arac-degerle-page .fp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 85% 20%, rgba(248, 215, 10, .18), transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 85%, rgba(59, 72, 112, .35), transparent 60%);
  z-index: -1;
}
.arac-degerle-page .fp-hero__container {
  max-width: var(--fp-container-max);
  margin: 0 auto;
  padding: 0 var(--fp-sp-4);
  text-align: center;
}
.arac-degerle-page .fp-hero__title {
  font-size: clamp(28px, 4vw, var(--fp-fs-40));
  line-height: var(--fp-lh-tight);
  font-weight: var(--fp-fw-bold);
  margin: 0 0 var(--fp-sp-3);
  color: #fff;
  letter-spacing: -.5px;
}
.arac-degerle-page .fp-hero__subtitle {
  font-size: var(--fp-fs-18);
  line-height: var(--fp-lh-body);
  color: rgba(255, 255, 255, .85);
  max-width: 640px;
  margin: 0 auto var(--fp-sp-5);
}
.arac-degerle-page .fp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fp-sp-2);
  margin-top: var(--fp-sp-4);
}
.arac-degerle-page .fp-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-sp-2);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  padding: var(--fp-sp-2) var(--fp-sp-4);
  border-radius: var(--fp-r-full);
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-medium);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.arac-degerle-page .fp-trust-chip .fa,
.arac-degerle-page .fp-trust-chip svg {
  color: var(--fp-accent-500);
}

/* =======================================================================
   3) STICKY PROGRESS / BREADCRUMB
   ======================================================================= */
.arac-degerle-page .fiyatla-wrapper {
  background: #fff;
  border-radius: var(--fp-r-lg);
  box-shadow: var(--fp-sh-1);
  overflow: hidden;
  border: 1px solid var(--fp-gray-200);
}
.arac-degerle-page .fiyatla-headers {
  position: relative;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--fp-gray-200);
  padding: var(--fp-sp-3) var(--fp-sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.arac-degerle-page .fiyatla-headers ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--fp-sp-2);
  margin: 0;
  padding: 0 var(--fp-sp-2);
  list-style: none;
  min-width: max-content;
}
.arac-degerle-page .fiyatla-headers li {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-sp-2);
  padding: var(--fp-sp-2) var(--fp-sp-3);
  border-radius: var(--fp-r-full);
  background: var(--fp-gray-100);
  color: var(--fp-gray-500);
  font-size: var(--fp-fs-12);
  font-weight: var(--fp-fw-medium);
  white-space: nowrap;
  cursor: default;
  transition: background var(--fp-dur-fast) var(--fp-ease),
              color      var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .fiyatla-headers li h2 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  line-height: 1;
  color: inherit;
}
.arac-degerle-page .fiyatla-headers li h2 .text {
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}
.arac-degerle-page .fiyatla-headers li.active {
  background: var(--fp-primary-800);
  color: #fff;
}
.arac-degerle-page .fiyatla-headers li.active h2,
.arac-degerle-page .fiyatla-headers li.active h2 .text { color: #fff; }
.arac-degerle-page .fiyatla-headers li:not(.active) h2,
.arac-degerle-page .fiyatla-headers li:not(.active) h2 .text { color: inherit; }
.arac-degerle-page .fiyatla-headers li .info-container { display: none; }
.arac-degerle-page .fiyatla-headers li.completed {
  background: var(--fp-accent-50);
  color: var(--fp-primary-800);
  cursor: pointer;
}
.arac-degerle-page .fiyatla-headers li.completed:hover {
  background: var(--fp-accent-100);
}
.arac-degerle-page .fiyatla-headers li.disabled {
  background: var(--fp-gray-100);
  color: var(--fp-gray-400);
  cursor: default;
}
.arac-degerle-page .fiyatla-headers .info-container { margin-left: auto; }
.arac-degerle-page .fiyatla-headers .info-container .info { font-size: .85em; }

/* =======================================================================
   4) STEP / FIELDSET CONTAINER
   ======================================================================= */
.arac-degerle-page .fiyatla-container {
  padding: var(--fp-sp-6);
}
.arac-degerle-page .fiyatla-container fieldset,
.arac-degerle-page .fiyatla-container > div {
  border: 0;
  padding: 0;
  margin: 0;
}

.arac-degerle-page .fp-step {
  text-align: left;
}

.arac-degerle-page .fp-tramer-row {
  margin-top: var(--fp-sp-5);
  margin-bottom: var(--fp-sp-5);
}

/* Step header (ileri/geri + baslik) */
.arac-degerle-page .fiyatlama-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-sp-3);
  margin-bottom: var(--fp-sp-5);
  padding-bottom: var(--fp-sp-3);
  border-bottom: 1px solid var(--fp-gray-200);
}
.arac-degerle-page .fiyatlama-header-left,
.arac-degerle-page .fiyatlama-header-right {
  flex: 0 0 auto;
  min-width: 80px;
}
.arac-degerle-page .fiyatlama-header-right { text-align: right; }
.arac-degerle-page .header-baslik {
  font-size: var(--fp-fs-20);
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-primary-800);
  margin: 0;
  text-align: center;
  flex: 1;
  line-height: var(--fp-lh-tight);
}
.arac-degerle-page .fiyatla-container fieldset[data-content="year"] > .header-baslik {
  padding-bottom: 20px;
}
.arac-degerle-page .fiyatlama-header .fa.action-button,
.arac-degerle-page .fiyatlama-header .action-button {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-sp-2);
  color: var(--fp-primary-700);
  font-size: var(--fp-fs-18);
  cursor: pointer;
  padding: var(--fp-sp-2) var(--fp-sp-3);
  border-radius: var(--fp-r-md);
  transition: background var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .fiyatlama-header .action-button:hover {
  background: var(--fp-gray-100);
}
.arac-degerle-page .geriBtn {
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-medium);
}

/* =======================================================================
   5) STEP GRID (element-list) — CSS Grid auto-fill
   ======================================================================= */
.arac-degerle-page .fiyatla-container .element-list {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--fp-sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.arac-degerle-page .fiyatla-container .element-list.show {
  display: grid;
}

.arac-degerle-page .fiyatla-container .element-list[data-content='year'] {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.arac-degerle-page .fiyatla-container .element-list[data-content='brands'] {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.arac-degerle-page .fiyatla-container .element-list[data-content='series'],
.arac-degerle-page .fiyatla-container .element-list[data-content='models'],
.arac-degerle-page .fiyatla-container .element-list[data-content='variants'],
.arac-degerle-page .fiyatla-container .element-list[data-content='sub_variants'],
.arac-degerle-page .fiyatla-container .element-list[data-content='modelTip'] {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Step karti */
.arac-degerle-page .fiyatla-container .element-list li {
  list-style: none;
  background: #fff;
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-r-md);
  padding: var(--fp-sp-3);
  cursor: pointer;
  text-align: center;
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-medium);
  color: var(--fp-primary-800);
  transition:
    border-color var(--fp-dur-fast) var(--fp-ease),
    background   var(--fp-dur-fast) var(--fp-ease),
    box-shadow   var(--fp-dur-fast) var(--fp-ease),
    transform    var(--fp-dur-fast) var(--fp-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  position: relative;
  overflow: hidden;
}
.arac-degerle-page .fiyatla-container .element-list li:hover {
  border-color: var(--fp-accent-500);
  box-shadow: var(--fp-sh-2);
  transform: translateY(-1px);
}
.arac-degerle-page .fiyatla-container .element-list li:focus-visible {
  outline: none;
  box-shadow: var(--fp-sh-focus);
}
.arac-degerle-page .fiyatla-container .element-list li.active,
.arac-degerle-page .fiyatla-container .element-list li[aria-selected="true"] {
  background: var(--fp-accent-50);
  border-color: var(--fp-accent-600);
  color: var(--fp-primary-900);
}

.arac-degerle-page .fiyatla-container .element-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--fp-sp-1);
  width: 100%;
  line-height: var(--fp-lh-tight);
}

/* Marka logolari - CLS onlemi: aspect-ratio */
.arac-degerle-page .fiyatla-container .element-list[data-content='brands'] li span img {
  display: block;
  margin: 0 auto var(--fp-sp-1);
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: filter var(--fp-dur-fast) var(--fp-ease);
}

/* Yil secim list'inde tek satir, kompakt */
.arac-degerle-page .fiyatla-container .element-list[data-content='year'] li {
  font-size: var(--fp-fs-16);
  font-weight: var(--fp-fw-semibold);
  min-height: 48px;
}

/* =======================================================================
   6) FORM ALANLARI (.fp-field wrapper) — JS inline .css('border') guvenligi
   ======================================================================= */
.arac-degerle-page .fp-field {
  position: relative;
  margin-bottom: var(--fp-sp-4);
}
.arac-degerle-page .fp-field__label {
  display: block;
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-gray-700);
  margin-bottom: var(--fp-sp-2);
}
.arac-degerle-page .fp-field__hint {
  display: block;
  font-size: var(--fp-fs-12);
  color: var(--fp-gray-500);
  margin-top: var(--fp-sp-1);
}
.arac-degerle-page .fp-field__control {
  position: relative;
  border: 1.5px solid var(--fp-gray-200);
  border-radius: var(--fp-r-md);
  background: #fff;
  transition: border-color var(--fp-dur-fast) var(--fp-ease),
              box-shadow   var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .fp-field__control:focus-within {
  border-color: var(--fp-accent-500);
  box-shadow: var(--fp-sh-focus);
}
.arac-degerle-page .fp-field__control input,
.arac-degerle-page .fp-field__control select,
.arac-degerle-page .fp-field__control textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 12px 14px;
  font-size: var(--fp-fs-16);
  color: var(--fp-primary-900);
  min-height: 48px;
  border-radius: var(--fp-r-md);
  font-family: inherit;
}
.arac-degerle-page .fp-field__control select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* JS `.css("border","1px solid red/green")` veya ("border","1px solid #c3c3c3") input'a uygulaniyor.
   Bu degerleri wrapper'a yansit (CSS :has() — tum modern browser'lar 2022+). */
.arac-degerle-page .fp-field__control:has(input[style*="red"]) {
  border-color: var(--fp-danger-500);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}
.arac-degerle-page .fp-field__control:has(input[style*="green"]) {
  border-color: var(--fp-success-500);
}
.arac-degerle-page .fp-field__control:has(input[style*="rgb(255"]) {
  border-color: var(--fp-danger-500);
}
.arac-degerle-page .fp-field__control input[style*="red"],
.arac-degerle-page .fp-field__control input[style*="green"] {
  /* JS inline border'i gorsele cikmasin; wrapper yansitir */
  border-color: transparent !important;
  background: transparent !important;
}
.arac-degerle-page .fp-field__suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fp-gray-500);
  font-weight: var(--fp-fw-semibold);
  pointer-events: none;
  font-size: var(--fp-fs-14);
}

.arac-degerle-page .fp-field--error .fp-field__control {
  border-color: var(--fp-danger-500);
}
.arac-degerle-page .fp-error-text {
  display: block;
  color: var(--fp-danger-500);
  font-size: var(--fp-fs-12);
  margin-top: var(--fp-sp-1);
  font-weight: var(--fp-fw-medium);
}

/* Genel form control override (sadece .arac-degerle-page icinde) */
.arac-degerle-page .input,
.arac-degerle-page .input-m,
.arac-degerle-page input.input,
.arac-degerle-page input.input-m,
.arac-degerle-page select.input,
.arac-degerle-page select.input-m {
  height: 48px;
  border-radius: var(--fp-r-md);
  border: 1.5px solid var(--fp-gray-200);
  padding: 10px 14px;
  font-size: var(--fp-fs-16);
  color: var(--fp-primary-900);
  background-color: #fff;
  transition: border-color var(--fp-dur-fast) var(--fp-ease),
              box-shadow   var(--fp-dur-fast) var(--fp-ease);
  width: 100%;
}
.arac-degerle-page .input:focus,
.arac-degerle-page .input-m:focus {
  outline: none;
  border-color: var(--fp-accent-500);
  box-shadow: var(--fp-sh-focus);
}
.arac-degerle-page #ddlRenk,
.arac-degerle-page #ddlIl {
  height: 48px;
}

.arac-degerle-page .column5,
.arac-degerle-page .column7 {
  width: 100%;
}
.arac-degerle-page .column5 label {
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-gray-700);
  display: block;
  margin-bottom: var(--fp-sp-2);
}
.arac-degerle-page .red {
  color: var(--fp-danger-500);
}

.arac-degerle-page .padding10 {
  padding: 0;
}

/* =======================================================================
   7) TRAMER / SEGMENTED CONTROL (radio)
   ======================================================================= */
.arac-degerle-page .fp-tramer-box {
  background: var(--fp-gray-50);
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-r-lg);
  padding: var(--fp-sp-5);
}
.arac-degerle-page .fp-tramer-box__label {
  font-size: var(--fp-fs-15, 15px);
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-gray-700);
  display: block;
  margin-bottom: var(--fp-sp-3);
}

.arac-degerle-page .tramerAlani {
  display: flex;
  gap: var(--fp-sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--fp-sp-3);
}

.arac-degerle-page .fp-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: var(--fp-gray-100);
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-r-full);
}
.arac-degerle-page .fp-segmented .radio-inline {
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
}
.arac-degerle-page .fp-segmented label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 18px;
  border-radius: var(--fp-r-full);
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-medium);
  color: var(--fp-gray-700);
  cursor: pointer;
  transition: background var(--fp-dur-fast) var(--fp-ease),
              color      var(--fp-dur-fast) var(--fp-ease),
              box-shadow var(--fp-dur-fast) var(--fp-ease);
  user-select: none;
  position: relative;
}
.arac-degerle-page .fp-segmented input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.arac-degerle-page .fp-segmented label:has(input:checked) {
  background: var(--fp-primary-800);
  color: #fff;
  box-shadow: var(--fp-sh-1);
}
.arac-degerle-page .fp-segmented label:hover:not(:has(input:checked)) {
  background: rgba(255, 255, 255, .6);
  color: var(--fp-primary-800);
}
.arac-degerle-page .fp-segmented label:focus-within {
  outline: none;
  box-shadow: var(--fp-sh-focus);
}

.arac-degerle-page .tramerVeriGirisAlani { width: 100%; }
.arac-degerle-page .tramerTotal { padding-right: 44px; }

/* =======================================================================
   8) EKSPERTIZ TABLO + SEGMENTED RADIO'LARI
   ======================================================================= */
.arac-degerle-page .fp-expertiz-layout {
  --fp-expertiz-gap: var(--fp-sp-5);
  row-gap: var(--fp-expertiz-gap);
}
.arac-degerle-page .fp-expertiz-section-title {
  font-size: var(--fp-fs-16);
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-primary-800);
  padding-bottom: var(--fp-sp-2);
  border-bottom: 2px solid var(--fp-primary-800);
  text-align: left;
  margin: 0 0 var(--fp-sp-3);
}

.arac-degerle-page .ekspertiz-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--fp-sp-4);
}
.arac-degerle-page .ekspertiz-table th,
.arac-degerle-page .ekspertiz-table td {
  padding: 8px 6px;
  vertical-align: middle;
  font-size: var(--fp-fs-14);
  border-bottom: 1px solid var(--fp-gray-100);
}
.arac-degerle-page .ekspertiz-table thead tr {
  background: var(--fp-gray-50);
}
.arac-degerle-page .ekspertiz-table thead th {
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-gray-700);
  font-size: var(--fp-fs-12);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.arac-degerle-page .ekspertiz-table tbody tr:hover {
  background: var(--fp-gray-50);
}
.arac-degerle-page .ekspertiz-table td.fw-light { font-weight: var(--fp-fw-medium); }
.arac-degerle-page .ekspertiz-table th.text-center,
.arac-degerle-page .ekspertiz-table td.text-center { text-align: center; }

/* Radio butonlari: kompakt + statustan gelen renk dot'u */
.arac-degerle-page .ekspertiz-table input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid var(--fp-gray-300);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  position: relative;
  outline: none;
  box-shadow: none;
  transition: border-color var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .ekspertiz-table input[type="radio"]:focus-visible {
  box-shadow: var(--fp-sh-focus);
}

/* Orijinal (default checked) */
.arac-degerle-page .ekspertiz-table input[type="radio"]:checked {
  border-color: var(--fp-success-500);
  background: radial-gradient(circle, var(--fp-success-500) 40%, #fff 45%);
}
/* Boyali */
.arac-degerle-page .ekspertiz-table input[type="radio"][value="Boyalı"]:checked {
  border-color: var(--fp-info-500);
  background: radial-gradient(circle, var(--fp-info-500) 40%, #fff 45%);
}
/* Lokal */
.arac-degerle-page .ekspertiz-table input[type="radio"][value="Lokal"]:checked {
  border-color: var(--fp-warn-500);
  background: radial-gradient(circle, var(--fp-warn-500) 40%, #fff 45%);
}
/* Degisen / Evet */
.arac-degerle-page .ekspertiz-table input[type="radio"][value="Değişen"]:checked,
.arac-degerle-page .ekspertiz-table input[type="radio"][value="Evet"]:checked {
  border-color: var(--fp-danger-500);
  background: radial-gradient(circle, var(--fp-danger-500) 40%, #fff 45%);
}

/* Diyagram container: responsive (eski 754px sabit KALKTI) */
.arac-degerle-page .vehicle-diagram-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--fp-sp-4);
  background: linear-gradient(135deg, var(--fp-gray-50) 0%, var(--fp-gray-100) 100%);
  border-radius: var(--fp-r-lg);
  box-shadow: var(--fp-sh-1);
  aspect-ratio: 3 / 4;
  max-height: min(760px, 70vh);
  min-height: 320px;
  overflow: visible;
}
.arac-degerle-page #vehicleDiagram {
  max-width: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arac-degerle-page #vehicleDiagram img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Legend rozetleri */
.arac-degerle-page .fp-expertiz-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fp-sp-2);
  margin-top: var(--fp-sp-3);
}
.arac-degerle-page .fp-expertiz-legend .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--fp-r-full);
  font-size: var(--fp-fs-12);
  font-weight: var(--fp-fw-medium);
  line-height: 1;
  position: relative;
}
.arac-degerle-page .fp-legend-chip {
  padding-left: 22px;
}
.arac-degerle-page .fp-legend-chip::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.arac-degerle-page .fp-legend-chip--orijinal {
  background: #fff;
  border: 1px solid var(--fp-gray-300);
  color: var(--fp-gray-700);
}
.arac-degerle-page .fp-legend-chip--orijinal::before { background: var(--fp-success-500); }
.arac-degerle-page .fp-legend-chip--boyali {
  background: var(--fp-info-50);
  color: var(--fp-info-500);
}
.arac-degerle-page .fp-legend-chip--lokal {
  background: var(--fp-warn-50);
  color: var(--fp-warn-500);
}
.arac-degerle-page .fp-legend-chip--degisen {
  background: var(--fp-danger-50);
  color: var(--fp-danger-500);
}

/* Panel popup */
.arac-degerle-page #panelPopup {
  position: fixed;
  z-index: var(--fp-z-modal);
  background: #fff;
  border-radius: var(--fp-r-lg);
  box-shadow: var(--fp-sh-3);
  padding: var(--fp-sp-3);
  min-width: 220px;
  border: 1px solid var(--fp-gray-200);
}
.arac-degerle-page #panelPopup .panel-popup-header {
  font-weight: var(--fp-fw-semibold);
  font-size: var(--fp-fs-13, 13px);
  color: var(--fp-primary-800);
  padding-bottom: var(--fp-sp-2);
  border-bottom: 2px solid var(--fp-gray-100);
  margin-bottom: var(--fp-sp-2);
}
.arac-degerle-page #panelPopup .panel-popup-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arac-degerle-page #popupPanelName {
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-primary-800);
}
.arac-degerle-page .panel-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--fp-r-md);
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-medium);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--fp-dur-fast) var(--fp-ease),
              box-shadow var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .panel-option-btn:hover { transform: translateY(-1px); box-shadow: var(--fp-sh-2); }
.arac-degerle-page .panel-option-btn[data-status="Orijinal"] { background: #fff; border-color: var(--fp-gray-300); color: var(--fp-gray-700); }
.arac-degerle-page .panel-option-btn[data-status="Boyalı"]   { background: var(--fp-info-500); border-color: var(--fp-info-500); color: #fff; }
.arac-degerle-page .panel-option-btn[data-status="Lokal"]    { background: var(--fp-warn-500); border-color: var(--fp-warn-500); color: #fff; }
.arac-degerle-page .panel-option-btn[data-status="Değişen"]  { background: var(--fp-danger-500); border-color: var(--fp-danger-500); color: #fff; }

/* Ekspertiz Islem Turu Modal */
.arac-degerle-page #ekspertizIslemTuruSecModal .modal-content { border-radius: var(--fp-r-lg); overflow: hidden; }
.arac-degerle-page #ekspertizIslemTuruSecModal .modal-header {
  background: var(--fp-primary-800);
  color: #fff;
  border-bottom: 0;
}
.arac-degerle-page #ekspertizIslemTuruSecModal .modal-title { color: #fff; }
.arac-degerle-page #ekspertizIslemTuruSecModal .btn-close { filter: invert(1) brightness(2); }
.arac-degerle-page #ekspertizIslemTuruSecModal .modal-body {
  text-align: left;
  padding: var(--fp-sp-4);
  font-size: var(--fp-fs-14);
}
.arac-degerle-page #ekspertizIslemTuruSecModal .modal-footer {
  border-top: 1px solid var(--fp-gray-200);
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--fp-sp-2);
}
.arac-degerle-page #ekspertizIslemTuruSecModal .btn {
  font-size: var(--fp-fs-14);
  min-width: 90px;
  padding: 8px 14px;
  border-radius: var(--fp-r-md);
  border: 1px solid transparent;
}
.arac-degerle-page #ekspertizIslemTuruSecModal .btn.alert-danger    { background: var(--fp-danger-500); color: #fff; }
.arac-degerle-page #ekspertizIslemTuruSecModal .btn.alert-warning   { background: var(--fp-accent-500); color: var(--fp-primary-900); }
.arac-degerle-page #ekspertizIslemTuruSecModal .btn.alert-lokal     { background: var(--fp-warn-500); color: #fff; }
.arac-degerle-page #ekspertizIslemTuruSecModal .btn.alert-secondary { background: #fff; color: var(--fp-primary-800); border-color: var(--fp-gray-300); }

/* =======================================================================
   9) ILETISIM FORMU
   ======================================================================= */
.arac-degerle-page #musteriForm { margin-top: var(--fp-sp-5); }
.arac-degerle-page #musteriForm .row { row-gap: var(--fp-sp-4); }
.arac-degerle-page #musteriForm .mt-20 { margin-top: var(--fp-sp-4); }

/* Telefon prefix lozenge - sadece .phone input'un oncesine pseudo-element degil, wrapper gerekiyorsa JS eklesin.
   Mevcut markup'ta ekstra wrapper yok; sadece input'u stilize et. */
.arac-degerle-page .phone,
.arac-degerle-page .gsm-no {
  letter-spacing: .5px;
}

.arac-degerle-page .Iletisim-item {
  margin-top: var(--fp-sp-3);
}
.arac-degerle-page .Iletisim-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  line-height: var(--fp-lh-body);
  font-size: var(--fp-fs-14);
  color: var(--fp-gray-700);
}
.arac-degerle-page .Iletisim-item input[type="checkbox"] {
  margin-top: 3px;
  min-width: 18px;
  min-height: 18px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--fp-primary-800);
  flex: 0 0 auto;
}
.arac-degerle-page .Iletisim-item a {
  color: var(--fp-primary-800);
  font-weight: var(--fp-fw-semibold);
}
.arac-degerle-page .Iletisim-item a:hover { color: var(--fp-accent-600); }

.arac-degerle-page #UyariTelefon,
.arac-degerle-page #AydinlatmaMetniUyari {
  display: inline-block;
  font-size: var(--fp-fs-12);
  color: var(--fp-danger-500);
  font-weight: var(--fp-fw-semibold);
  margin-top: var(--fp-sp-1);
}

.arac-degerle-page #dynamic-recaptcha {
  min-height: 78px;
  display: flex;
  justify-content: center;
}

.arac-degerle-page .fp-submit-wrap {
  margin-top: var(--fp-sp-8);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Submit buton */
.arac-degerle-page #btnGonder2,
.arac-degerle-page #btnGonder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-sp-2);
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  padding: 12px 24px;
  background: var(--fp-accent-500);
  color: var(--fp-primary-900);
  font-weight: var(--fp-fw-bold);
  font-size: var(--fp-fs-16);
  border: 0;
  border-radius: var(--fp-r-md);
  cursor: pointer;
  letter-spacing: .3px;
  box-shadow: var(--fp-sh-1);
  transition: background var(--fp-dur-fast) var(--fp-ease),
              transform  var(--fp-dur-fast) var(--fp-ease),
              box-shadow var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page #btnGonder2:hover:not(.button-disable),
.arac-degerle-page #btnGonder:hover:not(.button-disable) {
  background: var(--fp-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--fp-sh-2);
}
.arac-degerle-page #btnGonder2:focus-visible,
.arac-degerle-page #btnGonder:focus-visible {
  outline: none;
  box-shadow: var(--fp-sh-focus);
}

.arac-degerle-page .button-disable {
  opacity: .55;
  pointer-events: none;
  cursor: not-allowed;
}

/* =======================================================================
  10) ILERI / GERI BUTONLARI (aracBilgi + ekspertiz onay)
   ======================================================================= */
.arac-degerle-page .aracBilgiOnaybtn,
.arac-degerle-page .expertizOnaybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-sp-2);
  background: var(--fp-primary-800);
  color: #fff;
  border: 0;
  border-radius: var(--fp-r-md);
  padding: 12px 28px;
  font-size: var(--fp-fs-16);
  font-weight: var(--fp-fw-semibold);
  cursor: pointer;
  min-height: 48px;
  width: auto;
  max-width: 400px;
  box-shadow: var(--fp-sh-1);
  transition: background var(--fp-dur-fast) var(--fp-ease),
              transform  var(--fp-dur-fast) var(--fp-ease),
              box-shadow var(--fp-dur-fast) var(--fp-ease);
  text-decoration: none;
  line-height: var(--fp-lh-tight);
}
.arac-degerle-page .aracBilgiOnaybtn:hover,
.arac-degerle-page .expertizOnaybtn:hover {
  background: var(--fp-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--fp-sh-2);
}

.arac-degerle-page .mobil-ekspertiz-onay-btn {
  display: flex;
  justify-content: center;
  margin-top: var(--fp-sp-5);
}

/* Fiyat hesapla vurgu */
.arac-degerle-page #msform .action-button.fiyat-hesapla-vurgu {
  background: var(--fp-accent-500);
  color: var(--fp-primary-900);
  width: 100%;
  max-width: 400px;
  margin: var(--fp-sp-6) auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-size: var(--fp-fs-18);
  font-weight: var(--fp-fw-bold);
  border-radius: var(--fp-r-md);
  box-shadow: var(--fp-sh-2);
  transition: transform var(--fp-dur-fast) var(--fp-ease),
              background var(--fp-dur-fast) var(--fp-ease);
  cursor: pointer;
  border: 0;
}
.arac-degerle-page #msform .action-button.fiyat-hesapla-vurgu:hover {
  transform: translateY(-2px);
  background: var(--fp-accent-600);
}

/* =======================================================================
  11) OZET SIDEBAR
   ======================================================================= */
.arac-degerle-page #aracDegerlemeAlani {
  margin-top: 0;
}
.arac-degerle-page #aracDegerlemeSol,
.arac-degerle-page #aracDegerlemeSag {
  margin-top: var(--fp-sp-6);
}
.arac-degerle-page #aracDegerlemeSol {
  position: relative;
  overflow: hidden;
}

.arac-degerle-page .ozetAlani {
  position: sticky;
  top: 100px;
  padding: var(--fp-sp-5);
  background: var(--fp-gray-50);
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-r-lg);
  box-shadow: var(--fp-sh-1);
}
.arac-degerle-page .ozetAlani h4,
.arac-degerle-page .ozetAlani__title {
  font-size: var(--fp-fs-18);
  font-weight: var(--fp-fw-bold);
  color: var(--fp-primary-800);
  margin: 0 0 var(--fp-sp-4);
  letter-spacing: -.2px;
  line-height: var(--fp-lh-tight);
}

.arac-degerle-page .ozetUl {
  list-style: none;
  padding: 0;
  margin: 0;
}
.arac-degerle-page .ozetUl .ozetLi {
  display: flex;
  align-items: center;
  gap: var(--fp-sp-2);
  padding: var(--fp-sp-2) 0;
  margin-bottom: var(--fp-sp-2);
  border-bottom: 1px dashed var(--fp-gray-200);
}
.arac-degerle-page .ozetUl .ozetLi:last-child { border-bottom: 0; }
.arac-degerle-page .ozetUl .ozetLi > span {
  font-size: var(--fp-fs-13, 13px);
  color: var(--fp-gray-500);
  font-weight: var(--fp-fw-medium);
  min-width: 90px;
  text-align: left;
  flex: 0 0 auto;
}
.arac-degerle-page .ozetUl .ozetLi > div {
  margin-left: auto;
  text-align: right;
}
.arac-degerle-page .ozetUl .ozetLiNokta {
  flex: 1;
  min-width: 20px;
  height: 1px;
  background: transparent;
  border: 0;
}
.arac-degerle-page .ozetliDeger {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-sp-2);
  padding: 6px 10px;
  background: var(--fp-gray-200);
  border-radius: var(--fp-r-md);
  font-size: var(--fp-fs-14);
  font-weight: var(--fp-fw-medium);
  color: var(--fp-gray-700);
  transition: background var(--fp-dur-fast) var(--fp-ease),
              color      var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .ozetliDeger.active {
  background: var(--fp-accent-500);
  color: var(--fp-primary-900);
}
.arac-degerle-page .ozetliDeger b {
  font-weight: var(--fp-fw-semibold);
}
.arac-degerle-page .ozetCloseButon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: inherit;
  transition: background var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .ozetCloseButon:hover {
  background: rgba(0, 0, 0, .08);
}

/* =======================================================================
  12) FIYAT SONUC KARTI
   ======================================================================= */
.arac-degerle-page .fiyatla-form {
  display: none;
  margin: var(--fp-sp-8) auto 0;
}
.arac-degerle-page .fiyatla-form .form.arac-fiyat {
  background: #fff;
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-r-lg);
  padding: var(--fp-sp-6);
  box-shadow: var(--fp-sh-2);
  position: relative;
  overflow: hidden;
}
.arac-degerle-page .fiyatla-form .form.arac-fiyat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fp-accent-500), var(--fp-accent-600));
}
.arac-degerle-page .fiyatla-form .form.arac-fiyat h6 {
  font-size: var(--fp-fs-16);
  font-weight: var(--fp-fw-semibold);
  color: var(--fp-gray-700);
  margin: 0 0 var(--fp-sp-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.arac-degerle-page #fiyatSonuc {
  display: inline-block;
  background: var(--fp-accent-50);
  color: var(--fp-primary-900);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: var(--fp-fw-bold);
  padding: 10px 20px;
  border-radius: var(--fp-r-md);
  margin: var(--fp-sp-2) 0;
  letter-spacing: -.5px;
  line-height: 1.2;
}
.arac-degerle-page .fiyatla-form .form.arac-fiyat p {
  color: var(--fp-gray-500);
  font-size: var(--fp-fs-14);
  line-height: var(--fp-lh-body);
  /* margin: var(--fp-sp-3) 0 0; */
}
.arac-degerle-page .fp-price-divider {
  padding-bottom: var(--fp-sp-3);
  border-bottom: 1px solid var(--fp-gray-200);
}
.arac-degerle-page .fiyatla-form .form.arac-fiyat p.fiyatVar i {
  display: block;
  font-size: var(--fp-fs-12);
  color: var(--fp-gray-400);
  font-style: italic;
  margin-top: var(--fp-sp-1);
}

.arac-degerle-page .fiyatla-result-btn-alani {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-sp-3);
  margin-top: var(--fp-sp-5);
  justify-content: space-between;
  align-items: center;
}

.arac-degerle-page .fiyatiBegendimButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-sp-2);
  background: var(--fp-accent-500);
  color: var(--fp-primary-900);
  padding: 14px 28px;
  border: 0;
  border-radius: var(--fp-r-md);
  font-weight: var(--fp-fw-bold);
  font-size: var(--fp-fs-16);
  cursor: pointer;
  min-height: 48px;
  box-shadow: var(--fp-sh-1);
  transition: background var(--fp-dur-fast) var(--fp-ease),
              transform  var(--fp-dur-fast) var(--fp-ease),
              box-shadow var(--fp-dur-fast) var(--fp-ease);
  text-decoration: none;
}
.arac-degerle-page .fiyatiBegendimButton:hover {
  background: var(--fp-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--fp-sh-2);
}
.arac-degerle-page .fiyatiBegendimButton:focus-visible {
  outline: none;
  box-shadow: var(--fp-sh-focus);
}

.arac-degerle-page .yeniAracSorguBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-sp-2);
  background: transparent;
  color: var(--fp-primary-800) !important;
  padding: 13px 24px;
  border: 2px solid var(--fp-primary-800);
  border-radius: var(--fp-r-md);
  font-weight: var(--fp-fw-semibold);
  font-size: var(--fp-fs-16);
  min-height: 48px;
  text-decoration: none;
  transition: background var(--fp-dur-fast) var(--fp-ease),
              color      var(--fp-dur-fast) var(--fp-ease);
}
.arac-degerle-page .yeniAracSorguBtn:hover {
  background: var(--fp-primary-800);
  color: #fff !important;
}

/* Min/Max aralik rozeti */
.arac-degerle-page .fp-price-range {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-sp-1);
  margin-top: var(--fp-sp-2);
  padding: 6px 12px;
  background: var(--fp-gray-100);
  color: var(--fp-gray-700);
  border-radius: var(--fp-r-full);
  font-size: var(--fp-fs-13, 13px);
  font-weight: var(--fp-fw-medium);
}

/* Guven satiri */
.arac-degerle-page .fp-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-sp-3);
  margin-top: var(--fp-sp-4);
  padding-top: var(--fp-sp-4);
  border-top: 1px solid var(--fp-gray-200);
  color: var(--fp-gray-500);
  font-size: var(--fp-fs-12);
}
.arac-degerle-page .fp-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Success state: randevuResult */
.arac-degerle-page #randevuResult .box {
  background: var(--fp-success-50);
  border: 1px solid var(--fp-success-500);
  border-radius: var(--fp-r-lg);
  padding: var(--fp-sp-6);
  margin-top: var(--fp-sp-5);
  position: relative;
}
.arac-degerle-page #randevuResult .box::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--fp-success-500);
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  margin-bottom: var(--fp-sp-3);
  font-weight: var(--fp-fw-bold);
}
.arac-degerle-page #randevuResult .price-chart-title {
  font-size: var(--fp-fs-16);
  font-weight: var(--fp-fw-medium);
  color: var(--fp-primary-800);
  line-height: var(--fp-lh-body);
  margin-bottom: var(--fp-sp-3);
}
.arac-degerle-page #randevuResult .price-text2.b2c {
  font-size: var(--fp-fs-18);
  color: var(--fp-success-600);
  font-weight: var(--fp-fw-bold);
}

/* =======================================================================
  13) LOADING OVERLAY
   ======================================================================= */
.arac-degerle-page #fpLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--fp-z-overlay);
  pointer-events: auto;
}
.arac-degerle-page .fp-loading-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 37, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99998;
  animation: fpFadeIn var(--fp-dur-base) var(--fp-ease);
}
.arac-degerle-page .fp-loading-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: #fff;
  border-radius: var(--fp-r-xl);
  padding: 48px 40px 36px;
  text-align: center;
  box-shadow: var(--fp-sh-3);
  min-width: 320px;
  max-width: 90%;
  animation: fpCardIn var(--fp-dur-slow) var(--fp-ease);
}
.arac-degerle-page .fp-loading-spinner {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--fp-sp-5);
}
.arac-degerle-page .fp-spinner-svg {
  width: 100%;
  height: 100%;
  animation: fpSpin 1.6s linear infinite;
}
.arac-degerle-page .fp-spinner-svg circle {
  stroke: var(--fp-accent-500);
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  animation: fpDash 1.4s ease-in-out infinite;
}
.arac-degerle-page .fp-car-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--fp-primary-800);
}
.arac-degerle-page .fp-car-icon svg {
  width: 32px;
  height: 32px;
  fill: var(--fp-primary-800);
}
.arac-degerle-page .fp-loading-title {
  font-size: var(--fp-fs-20);
  font-weight: var(--fp-fw-bold);
  color: var(--fp-primary-800);
  margin: 0 0 var(--fp-sp-2);
}
.arac-degerle-page .fp-loading-desc {
  font-size: var(--fp-fs-14);
  color: var(--fp-gray-500);
  margin: 0 0 var(--fp-sp-4);
}
.arac-degerle-page .fp-loading-dots {
  display: inline-flex;
  gap: 6px;
}
.arac-degerle-page .fp-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-accent-500);
  animation: fpDot 1.4s infinite ease-in-out both;
}
.arac-degerle-page .fp-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.arac-degerle-page .fp-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

/* Global .preloader (JS tarafindan toggle edilen) */
.arac-degerle-page .preloader {
  background-color: rgba(255, 255, 255, .9);
}

/* #preloader-active2 - mevcut Index.cshtml'de inline tanimlanmisti, buraya alindi */
.arac-degerle-page #preloader-active2 {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fp-dur-base) var(--fp-ease),
              visibility 0s var(--fp-dur-base);
  pointer-events: none;
  will-change: opacity;
}
.arac-degerle-page #preloader-active2.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fp-dur-base) var(--fp-ease);
  pointer-events: auto;
}
.arac-degerle-page #preloader-active2 .preloader {
  position: absolute;
  transition: transform var(--fp-dur-base) var(--fp-ease),
              opacity   var(--fp-dur-base) var(--fp-ease);
}
.arac-degerle-page #preloader-active2.leaving .preloader {
  transform: scale(.98);
  opacity: 0;
}

/* Animasyonlar */
@keyframes fpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fpCardIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fpSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fpDash {
  0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
@keyframes fpDot {
  0%, 80%, 100% { transform: scale(0); opacity: .4; }
  40%           { transform: scale(1); opacity: 1; }
}

/* =======================================================================
  14) GÜVEN BÖLÜMÜ (.fp-trust-section) — pasa-why + FAQ yerine
   ======================================================================= */
.arac-degerle-page .fp-trust-section {
  padding: var(--fp-sp-8) 0;
  background: var(--fp-gray-50);
  border-top: 1px solid var(--fp-gray-200);
}
.arac-degerle-page .fp-trust-section__inner {
  display: flex;
  gap: var(--fp-sp-8);
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.arac-degerle-page .fp-trust-section__icon {
  flex-shrink: 0;
  margin-top: var(--fp-sp-1);
}
.arac-degerle-page .fp-trust-section__title {
  font-size: clamp(18px, 2.5vw, var(--fp-fs-24));
  font-weight: var(--fp-fw-bold);
  color: var(--fp-primary-800);
  margin: 0 0 var(--fp-sp-3);
  line-height: var(--fp-lh-tight);
}
.arac-degerle-page .fp-trust-section__title .plusLogo {
  font-size: inherit;
  color: var(--fp-primary-800);
}
.arac-degerle-page .fp-trust-section__text {
  font-size: var(--fp-fs-15);
  color: var(--fp-gray-700);
  line-height: var(--fp-lh-body);
  margin: 0 0 var(--fp-sp-5);
}
.arac-degerle-page .fp-trust-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fp-sp-2);
}
.arac-degerle-page .fp-trust-section__list li {
  display: flex;
  align-items: center;
  gap: var(--fp-sp-2);
  font-size: var(--fp-fs-14);
  color: var(--fp-gray-800);
  font-weight: var(--fp-fw-medium);
}
.arac-degerle-page .fp-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fp-accent-400);
  flex-shrink: 0;
}
.arac-degerle-page .fp-trust-check::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid var(--fp-primary-900);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-1px);
}
@@media (max-width: 640px) {
  .arac-degerle-page .fp-trust-section__inner {
    flex-direction: column;
    gap: var(--fp-sp-5);
  }
}

/* =======================================================================
  16) LAYOUT ELEMENTLERI (form container icinde)
   ======================================================================= */
.arac-degerle-page .fp-page-section {
  padding: var(--fp-sp-10) 0;
}
.arac-degerle-page .fp-page-section .container {
  max-width: var(--fp-container-max);
}
.arac-degerle-page h1.heading-3,
.arac-degerle-page .fp-page-section h1 {
  font-size: clamp(24px, 3.5vw, var(--fp-fs-32));
  font-weight: var(--fp-fw-bold);
  color: var(--fp-primary-800);
  margin: 0 0 var(--fp-sp-5);
  letter-spacing: -.3px;
  line-height: var(--fp-lh-tight);
}
.arac-degerle-page .mb-20 { margin-bottom: var(--fp-sp-5); }
.arac-degerle-page .mt-20 { margin-top: var(--fp-sp-5); }

/* Form container */
.arac-degerle-page #showContent {
  margin-top: var(--fp-sp-3);
}

/* =======================================================================
  17) UTILITY (scoped)
   ======================================================================= */
.arac-degerle-page .d-none { display: none !important; }
.arac-degerle-page .text-center { text-align: center; }
.arac-degerle-page .iframe { width: 0; height: 0; border: 0; }

/* =======================================================================
  18) RESPONSIVE
   ======================================================================= */
@media (max-width: 991.98px) {
  .arac-degerle-page #aracDegerlemeAlani {
    display: flex;
    flex-direction: column;
  }
  /* Ozet sidebar mobilde form'un ALTINDA kalsin (ilk gorulecek sey form);
     scale(1,-1) hack'i KALDIRILDI */
  .arac-degerle-page #aracDegerlemeSol { order: 1; }
  .arac-degerle-page #aracDegerlemeSag { order: 2; }

  .arac-degerle-page .ozetAlani {
    position: static;
    top: auto;
  }

  .arac-degerle-page .fiyatla-container {
    padding: var(--fp-sp-4);
  }

  .arac-degerle-page .fiyatla-wrapper fieldset {
    padding: var(--fp-sp-4) var(--fp-sp-2);
  }

  .arac-degerle-page #musteriForm,
  .arac-degerle-page #musteriForm .mt-20 {
    margin-top: 0;
  }
  .arac-degerle-page #musteriForm .col-md-6 {
    margin-top: var(--fp-sp-4);
  }

  .arac-degerle-page #runtimeForm .element-list.show {
    margin-top: 0;
  }

  .arac-degerle-page #msform {
    margin-bottom: 0;
  }

  .arac-degerle-page .tramerAlani {
    justify-content: center;
    width: 100%;
  }
  .arac-degerle-page .tramerVeriGirisAlani {
    width: 100%;
  }

  .arac-degerle-page .fiyatla-result-btn-alani {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .arac-degerle-page .fiyatiBegendimButton,
  .arac-degerle-page .yeniAracSorguBtn {
    width: 100%;
  }

  .arac-degerle-page .aracBilgiOnaybtn,
  .arac-degerle-page .expertizOnaybtn {
    margin-top: var(--fp-sp-4);
    width: 100%;
    max-width: 100%;
  }

  /* Diyagram daha az yukseklik tutsun */
  .arac-degerle-page .vehicle-diagram-container {
    aspect-ratio: auto;
    max-height: 480px;
    min-height: 260px;
  }
  .arac-degerle-page #expertise-scheme {
    padding: 0;
  }
  .arac-degerle-page #ekspertizIslemTuruSecModal .btn {
    font-size: var(--fp-fs-13, 13px);
    min-width: 70px;
  }

  /* Marka kartlari mobile kompakt */
  .arac-degerle-page .fiyatla-container .element-list[data-content='brands'] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .arac-degerle-page .fiyatla-container .element-list[data-content='brands'] li {
    font-size: var(--fp-fs-12);
    padding: var(--fp-sp-2);
  }
  .arac-degerle-page .fiyatla-container .element-list[data-content='brands'] li span img {
    width: 36px;
    height: 36px;
  }

  .arac-degerle-page .ekspertiz-table th,
  .arac-degerle-page .ekspertiz-table td {
    padding: 6px 3px;
    font-size: var(--fp-fs-12);
  }
}

@media (max-width: 575.98px) {
  .arac-degerle-page .fiyatla-container {
    padding: var(--fp-sp-3);
  }
  .arac-degerle-page .fp-loading-card {
    min-width: unset;
    width: 90%;
    padding: 36px 24px 28px;
  }
  .arac-degerle-page .fp-hero {
    padding: calc(var(--header-height, 80px) + var(--fp-sp-5)) 0 var(--fp-sp-6);
    margin-top: 0;
  }
  .arac-degerle-page .fp-page-section {
    padding: var(--fp-sp-6) 0;
  }
  .arac-degerle-page .aracBilgiOnaybtn,
  .arac-degerle-page .expertizOnaybtn {
    font-size: var(--fp-fs-14);
    padding: 12px 20px;
  }
}

/* =======================================================================
  19) ANTI-REGRESYON / LAYOUT OVERRIDE
   ======================================================================= */
/* Layout header overlap olmasin */
.arac-degerle-page #header.topbar-dark {
  z-index: auto;
}

/* Modal backdrop native Bootstrap 5 handling */
body.modal-open {
  overflow: unset !important;
  padding: unset !important;
}

/* =======================================================================
   OTP Telefon Doğrulama UI
   ======================================================================= */
.arac-degerle-page .fp-otp-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.arac-degerle-page .fp-otp-phone-row .gsm-no {
  flex: 1;
  min-width: 0;
}

.arac-degerle-page .fp-otp-verify-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--fp-primary-800, #0d1e3c);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fp-fs-14, 14px);
  font-weight: var(--fp-fw-medium, 500);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, opacity 0.2s;
}

.arac-degerle-page .fp-otp-verify-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.arac-degerle-page .fp-otp-verify-btn:not(:disabled):hover {
  background: var(--fp-primary-700, #1a3055);
}

.arac-degerle-page .fp-otp-verified-badge {
  color: #16a34a;
  font-weight: var(--fp-fw-semibold, 600);
  font-size: var(--fp-fs-14, 14px);
  white-space: nowrap;
  flex-shrink: 0;
}

.arac-degerle-page .fp-otp-panel {
  margin-top: 12px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.arac-degerle-page .fp-otp-info {
  margin: 0 0 12px;
  font-size: var(--fp-fs-14, 14px);
  color: var(--fp-primary-800, #0d1e3c);
}

.arac-degerle-page .fp-otp-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arac-degerle-page .fp-otp-input-row input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: var(--fp-fs-18, 18px);
  font-weight: var(--fp-fw-semibold, 600);
  letter-spacing: 6px;
  text-align: center;
  max-width: 160px;
  transition: border-color 0.2s;
}

.arac-degerle-page .fp-otp-input-row input[type="text"]:focus {
  outline: none;
  border-color: var(--fp-accent-400, #f5c518);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.2);
}

.arac-degerle-page .fp-otp-confirm-btn {
  padding: 10px 20px;
  background: var(--fp-accent-400, #f5c518);
  color: var(--fp-primary-900, #0a1628);
  border: none;
  border-radius: 6px;
  font-size: var(--fp-fs-14, 14px);
  font-weight: var(--fp-fw-bold, 700);
  cursor: pointer;
  transition: background 0.2s;
}

.arac-degerle-page .fp-otp-confirm-btn:hover {
  background: var(--fp-accent-300, #e6b800);
}

.arac-degerle-page .fp-otp-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.arac-degerle-page .fp-otp-timers {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.arac-degerle-page .fp-otp-timer {
  font-size: var(--fp-fs-13, 13px);
  color: #64748b;
}

.arac-degerle-page .fp-otp-cooldown {
  font-size: var(--fp-fs-13, 13px);
  color: #94a3b8;
}

.arac-degerle-page .fp-otp-cooldown::before {
  content: 'Tekrar gönder: ';
}

.arac-degerle-page .fp-otp-resend-btn {
  background: none;
  border: 1px solid var(--fp-primary-800, #0d1e3c);
  color: var(--fp-primary-800, #0d1e3c);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: var(--fp-fs-13, 13px);
  font-weight: var(--fp-fw-medium, 500);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.arac-degerle-page .fp-otp-resend-btn:hover {
  background: var(--fp-primary-800, #0d1e3c);
  color: #fff;
}

.arac-degerle-page .fp-otp-error {
  margin: 8px 0 0;
  font-size: var(--fp-fs-13, 13px);
  color: #dc2626;
  font-weight: var(--fp-fw-medium, 500);
}

/* Sticky bar animasyonu kapat (hero section sticky-bar tetiklemesin) */
.arac-degerle-page .sticky-bar.stick {
  animation: unset;
}

/* =======================================================================
  20) REDUCED MOTION (tokens'de tanimli; burada ek override)
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .arac-degerle-page .fp-loading-dots span,
  .arac-degerle-page .fp-spinner-svg,
  .arac-degerle-page .fp-spinner-svg circle {
    animation: none !important;
  }
}

.arac-degerle-page .fa {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  margin-top: -2px;
}

/* =======================================================================
   21) FİYAT SONUÇ KARTLARI (3'lü grid)
   ======================================================================= */
.arac-degerle-page .fp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 16px;
}

.arac-degerle-page .fp-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--fp-border, #e2e8f0);
  background: #fff;
  gap: 4px;
  transition: box-shadow 0.2s;
}

.arac-degerle-page .fp-price-card--piyasa {
  border-color: var(--fp-accent, #f59e0b);
  background: #fffbeb;
}

.arac-degerle-page .fp-price-card--satar {
  border-color: #22c55e;
  background: #f0fdf4;
}

.arac-degerle-page .fp-price-card--alinir {
  border-color: #3b82f6;
  background: #eff6ff;
}

.arac-degerle-page .fp-price-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.arac-degerle-page .fp-price-card--piyasa .fp-price-card__label { color: #92400e; }
.arac-degerle-page .fp-price-card--satar  .fp-price-card__label { color: #166534; }
.arac-degerle-page .fp-price-card--alinir .fp-price-card__label { color: #1e40af; }

.arac-degerle-page .fp-price-card__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-navy, #0f172a);
  line-height: 1.2;
  min-height: 24px;
}

.arac-degerle-page .fp-price-card--piyasa .fp-price-card__value { color: #d97706; font-size: 20px; }
.arac-degerle-page .fp-price-card--satar  .fp-price-card__value { color: #16a34a; }
.arac-degerle-page .fp-price-card--alinir .fp-price-card__value { color: #2563eb; }

.arac-degerle-page .fp-price-card__hint {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .arac-degerle-page .fp-price-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .arac-degerle-page .fp-price-card--piyasa .fp-price-card__value { font-size: 18px; }
}

/* =======================================================================
   22) SONUÇ ALTI — GERÇEK FİYAT BİLGİSİ + ÜYELİK DAVET
   ======================================================================= */
.arac-degerle-page .fp-result-info-box {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f0fdf4;
  border-left: 3px solid #22c55e;
}

.arac-degerle-page .fp-result-info-text {
  margin: 0;
  font-size: 13px;
  color: #166534;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.arac-degerle-page .fp-result-info-text::before {
  content: "✓";
  flex-shrink: 0;
  color: #16a34a;
  font-weight: 700;
}

.arac-degerle-page .fp-result-uyelik-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.arac-degerle-page .fp-result-uyelik-text {
  margin: 0;
  font-size: 13px;
  color: #dddddd;
  line-height: 1.6;
}

.arac-degerle-page .fp-result-uyelik-text strong {
  color: var(--fp-accent, #f59e0b);
}

.arac-degerle-page .fp-result-uye-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 28px;
  border-radius: 50px;
  background: var(--fp-accent, #f59e0b);
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.arac-degerle-page .fp-result-uye-btn:hover {
  background: #fbbf24;
  transform: translateY(-1px);
  color: #0f172a;
  text-decoration: none;
}

/* =======================================================================
   SweetAlert2 — WhatsApp opt-out onay modali
   ======================================================================= */
.fp-swal-popup {
  max-width: 520px;
}
.fp-swal-popup .fp-swal-title {
  font-size: 1.2rem;
  line-height: 1.35;
  padding: 0 0.5rem;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.fp-swal-popup .swal2-html-container {
  font-size: 0.95rem;
  color: #374151;
  margin-top: 0.5rem;
}
.fp-swal-popup .swal2-actions {
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.fp-swal-popup .swal2-styled {
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  border-radius: 8px;
}