/* İletişim: solda okunan bilgiler, sağda kaydırırken yerinde duran canlı harita. */
.contact-page .site-header { background: var(--lacquer); }

.contact-split {
  --read-pad: max(var(--gutter), calc(100% * 10 / 11 - var(--max) / 2));
  --read-gap: clamp(40px, 6vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head map" "body map";
  padding-top: var(--header-h);
}
.contact-head { grid-area: head; padding: 28px var(--read-gap) 0 var(--read-pad); }
.contact-body { grid-area: body; padding: 32px var(--read-gap) 72px var(--read-pad); min-width: 0; }

/* Başlık */
.contact-head .crumbs { margin-bottom: 14px; color: var(--ink-3); font-size: .75rem; }
.contact-head .crumbs a:hover { color: var(--ink); }
.contact-head h1 { font-size: clamp(2rem, 1.2rem + 2.3vw, 3.25rem); letter-spacing: -.035em; line-height: .98; }
.contact-lead { margin-top: 12px; max-width: 40ch; color: var(--ink-2); font-size: var(--fs-lead); }
.contact-head .status { margin-top: 18px; }

/* Bugün: günün saati 00–24 ölçeğinde, iğnenin üstünde İstanbul saati */
.today { margin-top: 24px; }
.today-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.today-label { font: 600 .75rem/1.2 var(--font-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.today-label span { color: var(--ink); }
.today-state { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .8125rem; }
.today-state strong { color: var(--ink); font-weight: 600; }
.today-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.today.is-open .today-state::before { background: var(--open); animation: pulse 2.6s var(--ease-out) infinite; }
.today-track { position: relative; height: 12px; margin-top: 34px; border-radius: var(--pill); background: repeating-linear-gradient(90deg, var(--on-lacquer-2) 0 1px, transparent 1px 25%), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)), var(--line-soft); }
.today-track > i { position: absolute; inset: 0 calc((1 - var(--to)) * 100%) 0 calc(var(--from) * 100%); border-radius: var(--pill); background: var(--ink); transform-origin: left center; }
.today.is-closed-day .today-track > i { display: none; }
.today-needle { position: absolute; top: -26px; bottom: -6px; left: calc(var(--now) * 100%); width: 1px; background: color-mix(in oklch, var(--ink) 60%, transparent); }
.today-needle::after { content: ""; position: absolute; top: 26px; left: 0; width: 12px; height: 12px; border: 2px solid var(--ground); border-radius: 50%; background: var(--red); transform: translate(-50%, 0); }
.today.is-open .today-needle::after { background: var(--open); }
.today-needle b { position: absolute; top: -2px; left: 0; padding: 0 4px; transform: translate(-50%, -100%); background: var(--ground); color: var(--red-ink); font: 620 .8125rem/18px var(--font-display); font-stretch: 112%; white-space: nowrap; }
.today-ticks { position: relative; height: 16px; margin-top: 8px; }
.today-ticks b { position: absolute; top: 0; font: 600 .6875rem/16px var(--font-display); font-stretch: 112%; letter-spacing: .04em; color: var(--ink-3); transform: translateX(-50%); }
.today-ticks b:nth-child(1) { left: 0; transform: none; }
.today-ticks b:nth-child(2) { left: 25%; }
.today-ticks b:nth-child(3) { left: 50%; }
.today-ticks b:nth-child(4) { left: 75%; }
.today-ticks b:nth-child(5) { left: 100%; transform: translateX(-100%); }
@media (min-width: 1001px) { .contact-head:has(.today:not([hidden])) .status { display: none; } }
@media (prefers-reduced-motion: no-preference) { .today-track > i { animation: week-fill .9s var(--ease-out) both; } }
@media (prefers-reduced-motion: reduce) { .today.is-open .today-state::before { animation: none; } }

/* Harita: Google'ın kendi kartı ad, puan ve yorum sayısını canlı gösterir */
.contact-map { grid-area: map; position: sticky; top: var(--header-h); align-self: start; height: calc(100svh - var(--header-h)); background: var(--lacquer-2); box-shadow: -1px 0 0 var(--line); }
.contact-map { overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; transform-origin: 0 0; }
.contact-map-note { position: absolute; top: 12px; right: 12px; padding: 7px 12px; border-radius: var(--pill); background: rgba(22, 22, 21, .9); color: var(--on-lacquer); font-size: .75rem; line-height: 1.3; pointer-events: none; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }

/* İletişim kanalları: tek bakışta okunan ölçü levhası */
.reach { list-style: none; border-top: 1px solid var(--line); }
.reach > li { border-bottom: 1px solid var(--line); }
.reach-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 60px; padding: 12px; margin-inline: -12px; border-radius: var(--r-md); color: inherit; text-decoration: none; transition: background-color .25s var(--ease-out); }
a.reach-row:hover { background: var(--paper); }
.reach-label { font: 600 .75rem/1.2 var(--font-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.reach-value { min-width: 0; font: 620 1.25rem/1.15 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; }
.reach-value--mail { font-size: 1rem; overflow-wrap: anywhere; }
.reach-go { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.reach-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
a.reach-row:hover .reach-go { color: var(--ink); }
a.reach-row:hover .reach-go svg { transform: translateX(3px); }
.reach-row--address { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; margin-inline: 0; padding: 16px 0 18px; border-radius: 0; }
.reach-acts { display: flex; gap: 6px; }
.reach-acts .reach-go { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); text-decoration: none; transition: background-color .25s var(--ease-out), border-color .25s; }
.reach-acts .reach-go:hover { background: var(--paper); border-color: #c4c6c9; }
.reach-row--address .reach-label { padding-top: 4px; }
.reach-address address { font-style: normal; font-size: .9375rem; line-height: 1.5; max-width: 36ch; }
.reach-coords { margin-top: 6px; font: 600 .75rem/1.4 var(--font-display); font-stretch: 112%; letter-spacing: .06em; color: var(--ink-3); }
.reach-routes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Haftalık saatler: paket ölçeğiyle aynı dil, 00–24 tek ölçek */
.week { margin-top: 40px; }
.week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.week-head h2 { font-size: var(--fs-h3); }
.week-now { color: var(--ink-3); font: 600 .75rem/1.2 var(--font-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; }
.week-grid { --c1: 6.5rem; --c3: 6.75rem; --gap: 14px; --now: 0; position: relative; }
.week-scale, .week-rows li { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr) var(--c3); gap: var(--gap); align-items: center; }
.week-scale { height: 18px; margin-bottom: 4px; }
.week-ticks { position: relative; height: 100%; }
.week-ticks b { position: absolute; top: 0; font: 600 .6875rem/18px var(--font-display); font-stretch: 112%; letter-spacing: .04em; color: var(--ink-3); transform: translateX(-50%); }
.week-ticks b:nth-child(1) { left: 0; transform: none; }
.week-ticks b:nth-child(2) { left: 25%; }
.week-ticks b:nth-child(3) { left: 50%; }
.week-ticks b:nth-child(4) { left: 75%; }
.week-ticks b:nth-child(5) { left: 100%; transform: translateX(-100%); }
.week-rows { list-style: none; }
.week-rows li { min-height: 36px; border-top: 1px solid var(--line-soft); font-size: .8125rem; }
.week-rows li:last-child { border-bottom: 1px solid var(--line-soft); }
.week-day { color: var(--ink-2); white-space: nowrap; }
.week-day-short, .week-today { display: none; }
.week-track { position: relative; height: 10px; border-radius: var(--pill); background: repeating-linear-gradient(90deg, var(--on-lacquer-2) 0 1px, transparent 1px 25%), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)), var(--line-soft); }
.week-track i { position: absolute; inset: 0 calc((1 - var(--to)) * 100%) 0 calc(var(--from) * 100%); border-radius: var(--pill); background: var(--on-lacquer-2); transform-origin: left center; }
.week-time { color: var(--ink-2); font-family: var(--font-display); font-stretch: 112%; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
.week-rows li.is-today .week-day, .week-rows li.is-today .week-time { color: var(--ink); font-weight: 600; }
.week-rows li.is-today .week-today { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.week-rows li.is-today .week-track i { background: var(--ink); }
.week-needle { position: absolute; top: 22px; bottom: 0; left: calc(var(--c1) + var(--gap) + var(--now) * (100% - var(--c1) - var(--c3) - 2 * var(--gap))); width: 1px; background: color-mix(in oklch, var(--ink) 55%, transparent); pointer-events: none; }
.week-needle b { position: absolute; top: -22px; left: 0; padding: 0 3px; transform: translateX(-50%); background: var(--ground); color: var(--red-ink); font: 620 .6875rem/18px var(--font-display); font-stretch: 112%; white-space: nowrap; }
.week-ticks b.is-masked, .today-ticks b.is-masked { visibility: hidden; }
.week-grid.is-live .is-today .week-track::after { content: ""; position: absolute; top: 50%; left: calc(var(--now) * 100%); width: 12px; height: 12px; border: 2px solid var(--ground); border-radius: 50%; background: var(--red); transform: translate(-50%, -50%); }
.week-grid.is-live.is-open .is-today .week-track::after { background: var(--open); animation: pulse 2.6s var(--ease-out) infinite; }
@media (prefers-reduced-motion: no-preference) {
  .week-track i { animation: week-fill .9s var(--ease-out) both; }
  .week-rows li:nth-child(2) .week-track i { animation-delay: .05s; }
  .week-rows li:nth-child(3) .week-track i { animation-delay: .1s; }
  .week-rows li:nth-child(4) .week-track i { animation-delay: .15s; }
  .week-rows li:nth-child(5) .week-track i { animation-delay: .2s; }
  .week-rows li:nth-child(6) .week-track i { animation-delay: .25s; }
  .week-rows li:nth-child(7) .week-track i { animation-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) { .week-grid.is-live.is-open .is-today .week-track::after { animation: none; } }
@keyframes week-fill { from { transform: scaleX(.02); } }

/* Mesaj formu */
.note { margin-top: 44px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.note h2 { font-size: var(--fs-h3); }
.note-intro { margin-top: 6px; color: var(--ink-2); font-size: .8125rem; }
.note-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.note-form .field { gap: 6px; min-width: 0; }
.note-form .field label { font-size: .75rem; font-weight: 600; }
.note-form .input { min-height: 44px; padding: 10px 14px; border-radius: 8px; font-size: .9375rem; }
.note-form .input::placeholder { color: var(--ink-3); }
.note-form select.input { padding-right: 40px; }
.note-form textarea.input { min-height: 112px; max-height: 260px; }
.note-form .consent { grid-template-columns: 20px 1fr; gap: 10px; font-size: .75rem; line-height: 1.55; }
.note-form .consent input { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid #b9bab6; border-radius: 4px; background: var(--surface); cursor: pointer; transition: background-color .2s, border-color .2s; }
.note-form .consent input:hover { border-color: var(--ink-3); }
.note-form .consent input:checked { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 12px 10px no-repeat; }
.note-form .consent input[aria-invalid="true"] { border-color: var(--red); }
.note-form .consent input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.note-form .consent a { text-underline-offset: 2px; }
.note-form .error { margin: 0; font-size: .75rem; }
.note-form .form-alert, .note-form .form-success { padding: 11px 14px; border-radius: var(--r-md); font-size: .8125rem; }
.note-form .form-success:focus { outline: none; }
.note-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 4px; }
.note-alt { color: var(--ink-2); font-size: .8125rem; text-decoration: none; }
.note-alt:hover { color: var(--ink); text-decoration: underline; }

/* Tablet ve telefon: başlık, harita, bilgiler */
@media (max-width: 1000px) {
  .contact-split { --read-pad: max(var(--gutter), calc((100% - 720px) / 2)); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "map" "body"; }
  .contact-head { padding: 24px var(--read-pad) 0; }
  .contact-body { padding: 28px var(--read-pad) 56px; }
  .contact-map { position: relative; top: auto; height: clamp(360px, 60svh, 520px); margin-top: 22px; box-shadow: none; }
  .today { display: none; }
}
@media (max-width: 640px) {
  .contact-head h1 { font-size: 2rem; }
  .contact-lead { font-size: .9375rem; }
  .contact-map-note { display: none; }
  .reach-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 12px; }
  .reach-label { grid-column: 1 / -1; }
  .reach-value { font-size: 1.125rem; }
  .reach-value--mail { font-size: .875rem; overflow-wrap: normal; word-break: normal; }
  .reach-go { min-height: 44px; }
  .reach-row--address { grid-template-columns: minmax(0, 1fr); }
  .reach-routes { display: grid; grid-template-columns: 1fr 1fr; }
  .reach-routes .btn:first-child { grid-column: 1 / -1; }
  .reach-row--address .reach-label { padding-top: 0; }
  .contact-map { height: clamp(280px, calc(100svh - 330px - var(--bar-h)), 460px); }
  .reach-row--duo { grid-template-columns: minmax(0, 1fr) auto; }
  .week-grid { --c1: 5.25rem; --c3: 5.75rem; --gap: 10px; }
  .week-rows li { font-size: .75rem; }
  .note { padding: 18px; margin-inline: calc(-1 * var(--gutter) / 2); }
  .note-form { grid-template-columns: minmax(0, 1fr); }
  .note-form .input { font-size: 1rem; }
  .note-actions .btn { width: 100%; }
}
@media (max-width: 420px) {
  .week-grid { --c1: 2.25rem; }
  .week-day-long { display: none; }
  .week-day-short { display: inline; }
}

/* "Telefon ve WhatsApp": masaüstünde iki satır, telefonda tek satır */
.reach-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .reach-row--duo .reach-label br { display: none; }
  .reach-row--duo .reach-sep { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Masaüstünde saatin okunuşu bir kez görünür: Bugün şeridinde. Haftalık çizelge yalnız iğneyi taşır. */
@media (min-width: 1001px) {
  .contact-split:has(.today:not([hidden])) .week-needle b { display: none; }
  .contact-split:has(.today:not([hidden])) .week-ticks b.is-masked { visibility: visible; }
}

/* Bütün kanal eylemleri aynı biçimde: çerçeveli hap */
a.reach-row .reach-go { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); transition: background-color .25s var(--ease-out), border-color .25s; }
a.reach-row:hover .reach-go { background: var(--paper); border-color: #c4c6c9; }
a.reach-row:hover .reach-go svg { transform: none; }
