/* =========================================================================
   Yaprakzade — Contact Map (Leaflet + OSM)
   Premium pin + info card + actions + custom popup.
   ========================================================================= */
/* .contact3d 2-kolon grid içinde olsa bile, harita TAM genişlik */
.yz-map-section {
  grid-column: 1 / -1;
  padding: var(--yz-sp-10) 0 var(--yz-sp-16);
  width: 100%;
}
.yz-map-wrap {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 380px);
  gap: var(--yz-sp-8);
  align-items: stretch;
}
@media (max-width: 1080px){
  .yz-map-wrap {
    grid-template-columns: 1fr;
    gap: var(--yz-sp-6);
  }
  .yz-leaflet-map { height: 420px; }
  .yz-map-info-card { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px){
  .yz-leaflet-map { height: 340px; border-radius: var(--yz-r-lg); }
  .yz-map-info-card { padding: var(--yz-sp-5); }
}
.yz-leaflet-map {
  height: 480px;
  border-radius: var(--yz-r-xl);
  box-shadow: var(--yz-shadow-lg);
  overflow: hidden;
  border: 1px solid var(--yz-line);
  background: var(--yz-soft);
}
.yz-leaflet-map .leaflet-control-attribution { font-size: 10px; opacity: .75; }

.yz-map-info-card {
  background: linear-gradient(180deg, #fff, var(--yz-cream));
  border: 1px solid var(--yz-line);
  border-radius: var(--yz-r-xl);
  padding: var(--yz-sp-8);
  box-shadow: var(--yz-shadow);
  display: flex; flex-direction: column; gap: var(--yz-sp-5);
}
.yz-map-info-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yz-sp-3); flex-wrap: wrap;
}
.yz-map-info-card__head h3 {
  margin: 0;
  font-family: var(--yz-font-display);
  font-size: var(--yz-fs-xl);
  color: var(--yz-green-dark);
}
.yz-map-info-card__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--yz-fs-xs); font-weight: 600;
  color: var(--yz-green-dark);
  background: rgba(45,94,62,.08);
  padding: 6px 12px; border-radius: var(--yz-r-full);
}
.yz-map-info-card__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: yz-dot-pulse 2s ease-out infinite;
}
@keyframes yz-dot-pulse { 50%, 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
.yz-map-info-card__addr {
  margin: 0;
  color: var(--yz-ink-soft);
  line-height: var(--yz-lh-relaxed);
  font-size: var(--yz-fs-md);
}
.yz-map-info-card__coords {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yz-sp-3);
  padding: var(--yz-sp-3) var(--yz-sp-4);
  background: var(--yz-soft);
  border-radius: var(--yz-r);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--yz-fs-sm);
  color: var(--yz-ink);
  border: 1px solid var(--yz-line);
}
.yz-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--yz-green); color: #fff; border: 0;
  padding: 8px 14px; border-radius: var(--yz-r-sm);
  font-size: var(--yz-fs-xs); font-weight: 600; cursor: pointer;
  transition: all var(--yz-dur) var(--yz-ease-out);
  font-family: inherit;
}
.yz-copy-btn:hover {
  background: var(--yz-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(45,94,62,.6);
}
.yz-copy-btn.is-copied { background: #16a34a; }
.yz-copy-btn svg { flex: 0 0 auto; }

.yz-map-info-card__actions {
  display: grid; grid-template-columns: 1fr; gap: var(--yz-sp-2);
  margin-top: auto;
}
.yz-map-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--yz-r);
  background: #fff; color: var(--yz-ink);
  border: 1px solid var(--yz-line);
  text-decoration: none;
  font-weight: 600; font-size: var(--yz-fs-sm);
  transition: all var(--yz-dur) var(--yz-ease-out);
}
.yz-map-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--yz-shadow-hover);
  border-color: var(--yz-gold);
  color: var(--yz-green-dark);
}
.yz-map-btn.primary {
  background: linear-gradient(135deg, var(--yz-green), var(--yz-green-light));
  color: #fff;
  border-color: transparent;
}
.yz-map-btn.primary:hover {
  box-shadow: 0 14px 40px -12px rgba(45,94,62,.5);
  filter: brightness(1.05);
  color: #fff;
}

/* Custom pin (gold/brand) */
.yz-pin { position: relative; }
.yz-pin__dot {
  width: 22px; height: 22px;
  background: var(--yz-gold);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(168,125,36,.55);
  position: absolute; top: 0; left: 3px;
  z-index: 2;
}
.yz-pin__pulse {
  position: absolute; top: 4px; left: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(199,154,58,.45);
  animation: yz-pin-ping 2.2s ease-out infinite;
  z-index: 1;
}
@keyframes yz-pin-ping {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(3.8); opacity: 0; }
}

/* Popup styling */
.yz-leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: var(--yz-r);
  box-shadow: var(--yz-shadow-lg);
  background: linear-gradient(180deg, #fff, var(--yz-cream));
  border: 1px solid var(--yz-line);
  padding: 4px 2px;
}
.yz-leaflet-popup .leaflet-popup-content {
  margin: 14px 16px;
  font-family: var(--yz-font-sans);
  color: var(--yz-ink);
  line-height: var(--yz-lh-normal);
  font-size: 14px;
}
.yz-popup strong {
  display: block;
  color: var(--yz-green-dark);
  font-family: var(--yz-font-display);
  font-size: 17px;
  margin-bottom: 4px;
}
.yz-popup a {
  display: inline-block;
  margin-top: 8px;
  color: var(--yz-gold-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--yz-gold);
  padding-bottom: 1px;
}
.yz-popup a:hover {
  color: var(--yz-green-dark);
  border-bottom-color: var(--yz-green);
}
.yz-leaflet-popup .leaflet-popup-tip { background: #fff; }