/* ==========================================================================
   Delta Motor — Iletisim
   ========================================================================== */

/* --- Ulasim kanallari ---------------------------------------------------
   Telefon en buyuk. Servis arayan insan once arar.
   ----------------------------------------------------------------------- */

.channels {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.channel {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--c-surface);
  transition: background var(--d-base) var(--e-out);
}

a.channel:hover { background: var(--c-blue-wash); }

.channel__key {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.channel__val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-ink);
  word-break: break-word;
}

.channel__note {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--c-ink-mute);
}

/* --- Harita ve saatler -------------------------------------------------- */

.visit {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Harita TAM GENISLIK (kullanici istegi 2026-09-01: "col-md-12").
   Onceki hal 1.3fr / 1fr iki sutundu, harita sagdaki adres-saat sutunuyla
   yeri paylasiyordu. Artik harita ustte tek basina, adres ve saatler
   ALTINDA yan yana dizilir — yoksa tam genislik haritanin altinda tek
   sutunluk uzun bir serit kalirdi. */
@media (min-width: 960px) {
  .visit__side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-alt);
}

/* Oran genisligie gore: dar sutunda 16/11 dogruydu, tam genislikte ayni
   oran 1280px'de 880px yukseklik demek — sayfayi ezerdi. 21/9'da ayni
   ekranda ~550px kaliyor, yani eski YUKSEKLIGE yakin ama tam genis. */
@media (min-width: 960px) {
  .map { aspect-ratio: 21 / 9; }
}

.map iframe,
.map img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

/* Harita henuz baglanmadiginda gorunen katman */
.map__pending {
  position: absolute;
  inset: auto var(--s-4) var(--s-4) var(--s-4);
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-red);
  border-radius: var(--r-sm);
}

.map__pending-title {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-red);
}

.map__pending-body {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--c-ink-mute);
}

.visit__side {
  display: grid;
  align-content: start;
  gap: var(--s-5);
}

/* Calisma saatleri — bugun vurgulanir */
.hours {
  border-top: 1px solid var(--c-line-strong);
}

.hours__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.hours__day {
  font-size: var(--t-base);
  color: var(--c-ink-mute);
}

.hours__time {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--c-ink);
}

.hours__row.is-today .hours__day,
.hours__row.is-today .hours__time { color: var(--c-blue); }

.hours__row.is-closed .hours__time { color: var(--c-ink-faint); }

/* Su an acik mi kapali mi */
.now {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.45rem var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-blue-wash);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-blue);
}

.now::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-blue);
  flex: none;
}

.now.is-closed {
  background: var(--c-red-wash);
  color: var(--c-red);
}

.now.is-closed::before { background: var(--c-red); }

/* --- Mesaj formu -------------------------------------------------------- */

.contact-form {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .contact-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.contact-form__aside {
  display: grid;
  align-content: start;
  gap: var(--s-4);
}

.contact-form__form {
  display: grid;
  gap: var(--s-5);
}

.contact-form__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form__grid .field--wide { grid-column: 1 / -1; }
}

.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* Gonderildi bildirimi */
.sent {
  display: none;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-blue-wash);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.sent.is-on { display: grid; }

.sent__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-lg);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
}

.sent__body {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--c-ink-mute);
}