/* Uysal Otogaz — "Aracıma En Uygun LPG Sistemini Bul" modülü.
   Namespace: .lpg-finder / .lpg-finder__* / .lpg-result-card.
   Site genelinde yüklenen ufuk-corporate-navbar.css içindeki
   --uysal-red / --uysal-dark vb. tokenlara var(...,fallback) ile
   referans verir; bu dosya tek başına da bozulmadan çalışır. */

.lpg-finder{
  --lf-accent:var(--uysal-red,#9c1232);
  --lf-accent-dark:var(--uysal-red-dark,#7b0e27);
  --lf-accent-soft:var(--uysal-red-soft,#fdf1f4);
  --lf-blue:var(--ufuk-nav-blue,#07529f);
  --lf-ink:var(--uysal-dark,#1e293b);
  --lf-text:var(--uysal-text,#334155);
  --lf-muted:var(--uysal-muted,#64748b);
  --lf-border:rgba(15,23,42,.09);
  --lf-radius:20px;
  --lf-shadow:0 14px 32px rgba(15,23,42,.08);
  --lf-font:var(--uysal-font,"Inter","Segoe UI",Roboto,Arial,sans-serif);

  position:relative;
  font-family:var(--lf-font);
  background:linear-gradient(180deg,#f7f8fa 0%,#ffffff 100%);
  padding:40px 0 46px;
  box-sizing:border-box;
}
.lpg-finder *,
.lpg-finder *::before,
.lpg-finder *::after{ box-sizing:border-box; }

/* Sitenin genel link stilini (mavi + altı çizili) bu modülün içinde
   ezmemesi için savunmacı bir sıfırlama — buton görünümlü linkler
   kendi renklerini ayrıca tanımlar. */
.lpg-finder a{ text-decoration:none; }
.lpg-finder a:hover{ text-decoration:none; }

.lpg-finder__container{
  max-width:1240px;
  margin:0 auto;
  padding:0 18px;
}

/* ---------- Head ---------- */
.lpg-finder__head{
  text-align:center;
  max-width:720px;
  margin:0 auto 26px;
}
.lpg-finder__title{
  margin:0 0 10px;
  font-size:clamp(21px,2.6vw,30px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--lf-ink);
}
.lpg-finder__subtitle{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--lf-muted);
}

/* ---------- Form card ---------- */
.lpg-finder__form{
  background:#fff;
  border:1px solid var(--lf-border);
  border-radius:var(--lf-radius);
  box-shadow:var(--lf-shadow);
  padding:26px 24px 24px;
}

.lpg-finder__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.lpg-finder__field--injection{order:1}
.lpg-finder__field--turbo{order:2}
.lpg-finder__field--power{order:3}
.lpg-finder__field--cylinders{order:4}

@media (min-width:768px){
  .lpg-finder__grid{ grid-template-columns:1fr 1fr; gap:18px 22px; }
  .lpg-finder__field--injection{order:1}
  .lpg-finder__field--power{order:2}
  .lpg-finder__field--turbo{order:3}
  .lpg-finder__field--cylinders{order:4}
}

.lpg-finder__field{ min-width:0; }

.lpg-finder__label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
  color:var(--lf-ink);
}
.lpg-finder__label i{
  color:var(--lf-accent);
  font-size:16px;
  flex:0 0 auto;
}

.lpg-finder__select{
  width:100%;
  min-height:52px;
  padding:12px 40px 12px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--lf-ink);
  background-color:#fff;
  border:1.5px solid #dfe4ea;
  border-radius:12px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lpg-finder__select:focus-visible{
  outline:none;
  border-color:var(--lf-accent);
  box-shadow:0 0 0 4px var(--lf-accent-soft);
}
.lpg-finder__select.is-invalid{
  border-color:#dc2626;
}

.lpg-finder__error{
  display:none;
  margin-top:6px;
  font-size:12.5px;
  font-weight:600;
  color:#dc2626;
}
.lpg-finder__error.is-visible{ display:block; }

.lpg-finder__hint{ margin-top:8px; }
.lpg-finder__hint summary{
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  color:var(--lf-blue);
  list-style:none;
}
.lpg-finder__hint summary::-webkit-details-marker{ display:none; }
.lpg-finder__hint summary::before{
  content:"ⓘ ";
}
.lpg-finder__hint[open] summary{ margin-bottom:6px; }
.lpg-finder__hint p{
  margin:0 0 4px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--lf-muted);
}
.lpg-finder__hint p:last-child{ margin-bottom:0; }

/* ---------- Actions ---------- */
.lpg-finder__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:24px;
}
.lpg-finder__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:420px;
  min-height:54px;
  padding:0 28px;
  border:none;
  border-radius:999px;
  background:var(--lf-accent);
  color:#fff;
  font-family:inherit;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 12px 26px var(--lf-accent-soft, rgba(156,18,50,.22));
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lpg-finder__submit:hover{ background:var(--lf-accent-dark); transform:translateY(-1px); }
.lpg-finder__submit:focus-visible{ outline:3px solid var(--lf-blue); outline-offset:2px; }
.lpg-finder__submit:disabled{ opacity:.75; cursor:not-allowed; transform:none; }

.lpg-finder__spinner{
  display:none;
  width:18px; height:18px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation:lpgFinderSpin .8s linear infinite;
}
.lpg-finder__submit.is-loading .lpg-finder__spinner{ display:inline-block; }
@keyframes lpgFinderSpin{ to{ transform:rotate(360deg); } }

.lpg-finder__reset{
  background:transparent;
  border:none;
  padding:4px 10px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--lf-muted);
  text-decoration:underline;
  cursor:pointer;
}
.lpg-finder__reset:hover{ color:var(--lf-ink); }
.lpg-finder__reset:focus-visible{ outline:2px solid var(--lf-blue); outline-offset:2px; border-radius:6px; }

/* ---------- Results ---------- */
.lpg-finder__results{
  margin-top:8px;
}
.lpg-finder__results:empty{ margin-top:0; }

.lpg-finder-results__panel{
  margin-top:28px;
  animation:lpgFinderFadeIn .35s ease both;
}
@keyframes lpgFinderFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.lpg-finder-results__heading{
  margin:0 0 8px;
  font-size:clamp(18px,2.2vw,22px);
  font-weight:700;
  color:var(--lf-ink);
  text-align:center;
}
.lpg-finder-results__summary{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0 0 22px;
}
.lpg-finder-results__chip{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:var(--lf-text);
  font-size:12.5px;
  font-weight:700;
}

/* Alt başlıklar (Diğer Uygun Alternatifler / Teknik Kontrol İle Değerlendirilebilir) */
.lpg-finder-results__subheading{
  margin:26px 0 14px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--lf-ink);
  text-align:center;
}
.lpg-finder-results__subheading--muted{
  color:var(--lf-muted);
  font-weight:700;
}

/* Ana öneri — "Uysal Otogaz'ın Önerisi" hero kartı */
.lpg-finder-recommendation{
  position:relative;
  background:linear-gradient(155deg,var(--lf-accent-soft) 0%,#fff 55%);
  border:2px solid var(--lf-accent);
  border-radius:22px;
  box-shadow:0 20px 44px rgba(156,18,50,.16);
  padding:26px 26px 22px;
  margin-bottom:10px;
  overflow:hidden;
}
.lpg-finder-recommendation::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--lf-accent),var(--lf-accent-dark));
}
.lpg-finder-recommendation__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 14px;
  border-radius:999px;
  background:var(--lf-accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:16px;
}
.lpg-finder-recommendation__eyebrow i{ font-size:13px; }
.lpg-finder-recommendation__body{
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.lpg-finder-recommendation__logo{
  flex:0 0 auto;
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--lf-border);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
  padding:10px;
  overflow:hidden;
}
.lpg-finder-recommendation__logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.lpg-finder-recommendation__info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lpg-finder-recommendation__brand{
  margin:0;
  font-size:clamp(21px,3vw,27px);
  font-weight:900;
  color:var(--lf-ink);
  letter-spacing:-.01em;
}
.lpg-finder-recommendation__system{
  margin:-6px 0 0;
  font-size:14.5px;
  font-weight:700;
  color:var(--lf-accent);
}
.lpg-finder-recommendation__desc{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--lf-text);
}
a.lpg-finder-recommendation__cta{
  margin-top:8px;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 26px;
  border-radius:999px;
  background:var(--lf-accent) !important;
  color:#fff !important;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  text-decoration:none !important;
  border:none;
  box-shadow:0 14px 28px rgba(156,18,50,.28);
  transition:background .15s ease, transform .15s ease;
}
a.lpg-finder-recommendation__cta:hover{ background:var(--lf-accent-dark) !important; color:#fff !important; transform:translateY(-1px); }
a.lpg-finder-recommendation__cta:focus-visible{ outline:3px solid var(--lf-blue); outline-offset:2px; }
.lpg-finder-recommendation__note{
  margin:18px 0 0;
  font-size:12px;
  line-height:1.55;
  color:var(--lf-muted);
}

@media (max-width:559.98px){
  .lpg-finder-recommendation{ padding:20px 18px 18px; border-radius:18px; }
  .lpg-finder-recommendation__body{ flex-direction:column; align-items:flex-start; gap:14px; }
  .lpg-finder-recommendation__logo{ width:72px; height:72px; }
  a.lpg-finder-recommendation__cta{ align-self:stretch; }
}

/* DI notice */
.lpg-finder-notice{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:#f4f7fb;
  border:1px solid rgba(7,82,159,.15);
  border-left:4px solid var(--lf-blue);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:22px;
}
.lpg-finder-notice i{ color:var(--lf-blue); font-size:20px; flex:0 0 auto; margin-top:2px; }
.lpg-finder-notice h3{ margin:0 0 6px; font-size:15px; font-weight:700; color:var(--lf-ink); }
.lpg-finder-notice p{ margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--lf-text); }
.lpg-finder-notice .lpg-finder-wa-btn{ margin:0; }

/* Result cards grid */
.lpg-finder-results__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
}
@media (min-width:900px){
  .lpg-finder-results__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.lpg-result-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fff;
  border:1px solid var(--lf-border);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(2,6,23,.07);
  padding:20px;
  min-width:0;
  transition:box-shadow .15s ease, transform .15s ease;
}
.lpg-result-card:hover{ box-shadow:0 14px 32px rgba(2,6,23,.1); transform:translateY(-1px); }
.lpg-result-card__logo{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--lf-border);
  border-radius:12px;
  padding:7px;
  overflow:hidden;
  margin-bottom:2px;
}
.lpg-result-card__logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.lpg-result-card__brand{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:var(--lf-ink);
}
.lpg-result-card__system{
  margin:-6px 0 0;
  font-size:13px;
  font-weight:600;
  color:var(--lf-muted);
}
.lpg-result-card__badge{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.lpg-result-card__badge--recommended{ background:var(--lf-accent); color:#fff; }
.lpg-result-card__badge--compatible{ background:var(--lf-accent-soft); color:var(--lf-accent); border:1px solid rgba(156,18,50,.2); }
.lpg-result-card__badge--alternative{ background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.lpg-result-card__badge--check_required{ background:#fff7ed; color:#b45309; border:1px solid #fed7aa; }

.lpg-result-card__desc{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--lf-text);
}
.lpg-result-card__note{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--lf-muted);
  background:#f8fafc;
  border-radius:8px;
  padding:8px 10px;
}
a.lpg-result-card__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:11px;
  background:var(--lf-accent) !important;
  color:#fff !important;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  text-decoration:none !important;
  border:none;
  transition:background .15s ease, transform .15s ease;
}
a.lpg-result-card__cta:hover{ background:var(--lf-accent-dark) !important; color:#fff !important; transform:translateY(-1px); }
a.lpg-result-card__cta:focus-visible{ outline:3px solid var(--lf-blue); outline-offset:2px; }
.lpg-result-card__cta i{ font-size:15px; }

.lpg-result-card__extra{
  margin:-4px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--lf-muted);
}

/* Teknik Kontrol İle Değerlendirilebilir — daha sakin/nötr varyant */
.lpg-finder-results__grid--muted .lpg-result-card--review{
  background:#fbfbfc;
  box-shadow:none;
}
.lpg-finder-results__grid--muted .lpg-result-card--review:hover{
  box-shadow:0 6px 16px rgba(2,6,23,.06);
}
a.lpg-result-card__cta.lpg-result-card__cta--ghost{
  background:#fff !important;
  color:var(--lf-ink) !important;
  border:1.5px solid var(--lf-border);
}
a.lpg-result-card__cta.lpg-result-card__cta--ghost:hover{
  background:#f8fafc !important;
  color:var(--lf-ink) !important;
  border-color:#cbd5e1;
}

/* No-match / fallback */
.lpg-finder-empty{
  text-align:center;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:28px 20px;
}
.lpg-finder-empty h3{ margin:0 0 8px; font-size:16px; font-weight:700; color:var(--lf-ink); }
.lpg-finder-empty p{ margin:0 0 16px; font-size:13.5px; line-height:1.6; color:var(--lf-text); max-width:520px; margin-left:auto; margin-right:auto; }

a.lpg-finder-wa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  background:#25D366 !important;
  color:#fff !important;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  text-decoration:none !important;
  border:none;
  box-shadow:0 10px 22px rgba(37,211,102,.28);
  transition:filter .15s ease, transform .15s ease;
}
a.lpg-finder-wa-btn:hover{ filter:brightness(.94); color:#fff !important; transform:translateY(-1px); }
a.lpg-finder-wa-btn:focus-visible{ outline:3px solid var(--lf-blue); outline-offset:2px; }

.lpg-finder-results__trust{
  margin:22px auto 0;
  max-width:640px;
  text-align:center;
  font-size:12.5px;
  line-height:1.6;
  color:var(--lf-muted);
}
.lpg-finder-results__trust--emphasis{
  color:var(--lf-text);
  font-weight:600;
}

.lpg-finder-error{
  text-align:center;
  padding:20px;
  border-radius:14px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  font-size:13.5px;
}

/* ---------- Mobile fine-tuning ---------- */
@media (max-width:767.98px){
  .lpg-finder{ padding:30px 0 34px; }
  .lpg-finder__container{ padding:0 14px; }
  .lpg-finder__form{ padding:20px 16px 18px; border-radius:16px; }
  .lpg-finder__select{ min-height:50px; font-size:16px; } /* 16px: iOS zoom-on-focus önler */
  .lpg-finder__submit{ max-width:none; }
  .lpg-finder-results__grid{ grid-template-columns:1fr; }
  .lpg-result-card{ padding:18px; }
}