/* Harita bölümü (Sections/map)

   Harita TIKLAYINCA yükleniyor. Sayfa açılır açılmaz gömülseydi
   ziyaretçi hiçbir şey yapmadan üçüncü tarafa istek gitmiş olurdu —
   Instagram gömmelerinde de aynı çizgi tutulmuştu.

   Yükleme öncesi kutu boş değil: adres ve iki gerçek bağlantı zaten
   solda duruyor, harita hiç açılmasa da ziyaretçi aradığını bulur. */

.hrt {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 3vw, var(--sp-10));
    align-items: start;
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
}

.hrt__yer {
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.hrt__adres {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink-600);
}

.hrt__dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.hrt__not {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-500);
}

/* ---------------------------------------------------------- Kutu */

.hrt__kutu {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    /*
     * Yer tutucu deseni: hafif ızgara, harita hissi veren nötr bir
     * zemin. Sahte bir harita görüntüsü koymak yanıltıcı olurdu —
     * ziyaretçi gerçek haritayı gördüğünü sanardı.
     */
    background:
        linear-gradient(var(--ink-100) 1px, transparent 1px) 0 0 / 100% 38px,
        linear-gradient(90deg, var(--ink-100) 1px, transparent 1px) 0 0 / 38px 100%,
        var(--surface-soft, #f8fafc);
}

.hrt__ac {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-6);
    border: 0;
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}

.hrt__ac:hover { background: rgba(255, 255, 255, 0.86); }

.hrt__ac-ikon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--brand-700);
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
}

.hrt__ac-ikon svg { width: 24px; height: 24px; }

.hrt__ac-metin {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.hrt__ac-not {
    max-width: 34ch;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-600);
}

/* Yüklenen çerçeve kutuyu tam doldurur */
.hrt__kutu iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Koyu zeminde */
.section--deep .hrt__yer    { color: #fff; }
.section--deep .hrt__adres  { color: var(--ink-300); }
.section--deep .hrt__not    { color: var(--ink-400); }
.section--deep .hrt__kutu   { border-color: rgba(255, 255, 255, 0.16); }

/* --------------------------------------------------------- Ölçüler */

@media (max-width: 860px) {
    .hrt { grid-template-columns: minmax(0, 1fr); }
    .hrt__kutu { aspect-ratio: 4 / 3; }
}