/* Konya Oto LPG - Temiz 2 Sekme / İletişim + Harita
   Görsel kuralı: desktop 1800x1200, mobil 900x1200. Desktop tam görünür; mobil ayrı görsel kartı doldurur. */
.contact-map{
  --ufuk-red:#004AAD;
  --ufuk-red-dark:#003B7A;
  --ufuk-ink:#111827;
  --ufuk-muted:#6b7280;
  --ufuk-line:rgba(15,23,42,.075);
  --ufuk-card:#fff;
  --ufuk-soft:#F3F8FF;
  --ufuk-shadow:0 24px 66px rgba(15,23,42,.085), 0 8px 24px rgba(15,23,42,.045);
  --ufuk-shadow-soft:0 12px 28px rgba(15,23,42,.055);
}

.contact-map--shell .container{max-width:1320px}

.contact-map--shell .contact-map__grid{
  display:grid !important;
  grid-template-columns:minmax(320px,390px) minmax(0,1fr);
  gap:18px !important;
  align-items:start !important;
  margin:0 !important;
  padding:18px !important;
  border-radius:30px;
  border:1px solid rgba(0,74,173,.10);
  background:
    radial-gradient(circle at 0 0, rgba(0,74,173,.035), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.965));
  box-shadow:0 26px 64px rgba(15,23,42,.065);
}

.contact-map--shell .contact-map__info-col,
.contact-map--shell .contact-map__visual-col{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
  min-width:0 !important;
  display:block !important;
}

.contact-map .contact-card,
.contact-map .map-card{
  position:relative;
  overflow:hidden;
  width:100%;
  border-radius:24px;
  border:1px solid var(--ufuk-line);
  background:var(--ufuk-card);
  box-shadow:var(--ufuk-shadow-soft);
}

.contact-map .contact-card::before,
.contact-map .map-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(0,74,173,.55), rgba(0,74,173,0));
  z-index:2;
}

/* SOL SEKME */
.contact-map .contact-card,
.contact-map .contact-card.h-100{
  height:auto !important;
  min-height:0 !important;
  padding:16px !important;
  background:
    radial-gradient(circle at 0 0, rgba(0,74,173,.028), transparent 30%),
    linear-gradient(180deg,#fff,#fbfcfe);
}

.contact-map .contact-card__head{
  margin:0 0 12px !important;
  padding:0 0 11px !important;
  border-bottom:1px solid rgba(15,23,42,.075);
}

.contact-map .contact-card__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:max-content;
  margin:0 0 8px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(0,74,173,.18);
  background:#fff;
  color:var(--ufuk-red-dark);
  font-size:.70rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-map .contact-card__sub{
  margin:0;
  color:var(--ufuk-muted);
  font-size:.84rem;
  line-height:1.42;
  letter-spacing:-.01em;
}

.contact-map .contact-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  margin:0 0 14px !important;
  padding:0 !important;
  list-style:none !important;
}

.contact-map .contact-item{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:10px !important;
  min-height:47px !important;
  padding:9px 11px !important;
  border-radius:15px !important;
  border:1px solid rgba(15,23,42,.065);
  background:linear-gradient(180deg,#fff,#f8fafc);
  box-shadow:0 8px 18px rgba(15,23,42,.04);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.contact-map .contact-item:hover{
  transform:translateY(-1px);
  border-color:rgba(0,74,173,.14);
  box-shadow:0 12px 25px rgba(15,23,42,.06);
}

.contact-map .contact-item > i{
  grid-column:1 !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,74,173,.10), rgba(0,74,173,.045));
  color:var(--ufuk-red-dark);
  line-height:1 !important;
  font-size:.94rem !important;
}

.contact-map .contact-item address,
.contact-map .contact-item a{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  display:block !important;
  margin:0 !important;
  color:#111827 !important;
  font-size:.88rem !important;
  line-height:1.34 !important;
  font-weight:750 !important;
  letter-spacing:-.015em !important;
  text-align:left !important;
  text-decoration:none !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

.contact-map .contact-item address{font-style:normal}
.contact-map .contact-item a:hover{color:var(--ufuk-red-dark) !important}

.contact-map .contact-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  margin-top:0 !important;
}

.contact-map .contact-btn{
  width:100%;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  padding:10px 14px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  font-size:.88rem !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-.01em;
  box-shadow:0 12px 24px rgba(15,23,42,.08);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.contact-map .contact-btn:hover,
.contact-map .contact-btn:focus-visible{transform:translateY(-1px);box-shadow:0 16px 30px rgba(15,23,42,.12)}
.contact-map .contact-btn i{line-height:1 !important;margin-right:4px !important}
.contact-map .contact-btn--wa{background:linear-gradient(135deg,#16a34a,#22c55e) !important;color:#fff !important}
.contact-map .contact-btn--dir{background:linear-gradient(135deg,#004AAD,#0066D6) !important;color:#fff !important}
.contact-map .contact-btn--map{background:#fff !important;color:#111827 !important;border-color:rgba(15,23,42,.10) !important}

/* SAĞ SEKME - ESKİ/DÜZGÜN GÖRSEL DAVRANIŞI */
.contact-map .map-card,
.contact-map .map-card.h-100{
  height:auto !important;
  min-height:0 !important;
  padding:10px !important;
  aspect-ratio:3 / 2;
  background:linear-gradient(180deg,#fff,#f8fafc);
}

.contact-map .map-card .map-lite,
.contact-map .map-card .ufuk-map-preview{
  position:relative;
  display:block;
  width:100%;
  height:100% !important;
  aspect-ratio:3 / 2;
  min-height:0 !important;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
}

.contact-map .map-picture{display:block !important;width:100% !important;height:100% !important;min-height:100% !important;background:#fff}

.contact-map .map-card .map-lite > img,
.contact-map .map-card .ufuk-map-preview > img,
.contact-map .map-card .map-lite picture > img,
.contact-map .map-card .ufuk-map-preview picture > img,
.contact-map .map-card .map-lite > iframe,
.contact-map .map-card .ufuk-map-preview > iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* Desktop: görsel tam görünür. Mobilde ayrı 900x1200 görsel kartı dolduracak. */
.contact-map .map-card .map-lite > img,
.contact-map .map-card .ufuk-map-preview > img,
.contact-map .map-card .map-lite picture > img,
.contact-map .map-card .ufuk-map-preview picture > img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff;
}

.contact-map .map-card .map-lite::after,
.contact-map .map-card .ufuk-map-preview::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(15,23,42,.035));
}

.contact-map .map-card .map-btn{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:13px 22px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:999px;
  font-weight:950;
  font-size:.98rem;
  letter-spacing:-.015em;
  color:#0f172a;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.94));
  box-shadow:0 20px 42px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  overflow:hidden;
}
.contact-map .map-card .map-btn::before{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 38%, transparent 72%);transform:translateX(-135%);transition:transform .58s ease;pointer-events:none}
.contact-map .map-card .map-btn i,
.contact-map .map-card .map-btn span{position:relative;z-index:1}
.contact-map .map-card .map-btn i{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;background:linear-gradient(135deg,#004AAD,#0066D6);box-shadow:0 8px 18px rgba(0,74,173,.22), inset 0 1px 0 rgba(255,255,255,.32);font-size:.9rem;line-height:1}
.contact-map .map-card .map-btn:hover,
.contact-map .map-card .map-btn:focus-visible{transform:translateY(-2px);color:#111827;background:linear-gradient(180deg, rgba(255,255,255,1), rgba(249,250,252,.98));box-shadow:0 26px 52px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.96)}
.contact-map .map-card .map-btn:hover::before,
.contact-map .map-card .map-btn:focus-visible::before{transform:translateX(135%)}

@media (max-width:1199.98px){
  .contact-map--shell .contact-map__grid{grid-template-columns:minmax(315px,370px) minmax(0,1fr)}
  .contact-map .contact-card__sub{font-size:.81rem}
}

@media (max-width:991.98px){
  .contact-map--shell .contact-map__grid{grid-template-columns:1fr;padding:12px;border-radius:24px}
  .contact-map .contact-card,.contact-map .contact-card.h-100{height:auto !important;min-height:0 !important}
}

@media (max-width:767.98px){
  .contact-map .map-card,
  .contact-map .map-card.h-100{
    aspect-ratio:3 / 4 !important;
    padding:8px !important;
  }

  .contact-map .map-card .map-lite,
  .contact-map .map-card .ufuk-map-preview,
  .contact-map .map-card .map-picture{
    aspect-ratio:3 / 4 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
  }

  .contact-map .map-card .map-lite > img,
  .contact-map .map-card .ufuk-map-preview > img,
  .contact-map .map-card .map-lite picture > img,
  .contact-map .map-card .ufuk-map-preview picture > img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:#fff;
  }
}

@media (max-width:575.98px){
  .contact-map .contact-card,.contact-map .map-card{border-radius:20px}
  .contact-map .contact-card{padding:15px !important}
  .contact-map .contact-card__sub{font-size:.80rem;line-height:1.38}
  .contact-map .contact-item{grid-template-columns:34px minmax(0,1fr) !important;min-height:45px !important;padding:9px 10px !important}
  .contact-map .contact-item > i{width:34px !important;height:34px !important;min-width:34px !important}
  .contact-map .contact-item address,.contact-map .contact-item a{font-size:.86rem !important}
  .contact-map .map-card{padding:8px !important}
  .contact-map .map-card .map-lite,.contact-map .map-card .ufuk-map-preview{border-radius:16px}
  .contact-map .map-card .map-btn{left:auto !important;right:12px !important;bottom:12px !important;width:auto !important;min-width:138px;min-height:48px;justify-content:center;padding:10px 14px;border-radius:999px;font-size:.90rem;gap:8px}
}

/* Admin: /admin/map-preview-upload.php */
body.ufuk-map-admin{margin:0;min-height:100vh;background:#f6f7fb;color:#111827;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ufuk-map-admin .ufuk-admin-wrap{max-width:1180px;margin:32px auto;padding:0 16px}
.ufuk-map-admin .ufuk-admin-card{overflow:hidden;border:1px solid rgba(15,23,42,.06);border-radius:26px;background:#fff;box-shadow:0 22px 55px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.05)}
.ufuk-map-admin .ufuk-admin-head{padding:24px;background:radial-gradient(circle at 0% 0%,rgba(0,74,173,.08),transparent 34%),linear-gradient(180deg,#fff,#fafafa);border-bottom:1px solid rgba(15,23,42,.08)}
.ufuk-map-admin .ufuk-admin-title{margin:0;font-weight:900;letter-spacing:-.03em}
.ufuk-map-admin .ufuk-admin-sub{margin:.45rem 0 0;color:#6b7280}
.ufuk-map-admin .ufuk-admin-body{padding:24px}
.ufuk-map-admin .preview-box{border-radius:22px;overflow:hidden;border:1px solid rgba(15,23,42,.08);background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.055)}
.ufuk-map-admin .preview-box img{display:block;width:100%;object-fit:contain;object-position:center;background:#fff}
.ufuk-map-admin .preview-box--desktop img{aspect-ratio:3/2}
.ufuk-map-admin .preview-box--mobile{max-width:330px}
.ufuk-map-admin .preview-box--mobile img{aspect-ratio:3/4}
.ufuk-map-admin .small-label{font-size:.78rem;font-weight:900;color:#003B7A;text-transform:uppercase;letter-spacing:.1em}
.ufuk-map-admin .drop{border:1.5px dashed rgba(0,74,173,.25);border-radius:22px;padding:24px;background:linear-gradient(180deg,#fff,#f7fbff)}
.ufuk-map-admin .form-control{min-height:50px;border-radius:16px}
.ufuk-map-admin .btn-danger{min-height:50px;border-radius:16px;padding:12px 18px;font-weight:900}
.ufuk-map-admin .note{color:#6b7280;font-size:.92rem;line-height:1.55}

@media (max-width:575.98px){
  .contact-map .map-card .map-btn i{width:24px;height:24px;font-size:.82rem}
}