/* ---------------------------------------------------------------------------
   İLETİŞİM SAYFASI

   Palet, tipografi, üst bar, butonlar ve altbilgi anasayfa.css'ten geliyor;
   burada yalnızca bu sayfaya özel olanlar var.

   Sayfa referans alınan çalışmadaki gibi KOYU: iki konum kartı yan yana,
   her kartta bilgi satırları, harita ve haritaya götüren bir düğme. Referans
   siyah zemin üzerine altın kullanıyordu — burada aynı düzen kendi paletimizle
   kuruldu (kömür zemin, krem başlık, sıcak gri ayrıntı).
--------------------------------------------------------------------------- */

/* Üst bar her sayfada AYNI (bkz. anasayfa.css .ust) — burada rengine
   dokunulmuyor. Yalnızca sayfanın kendi zemini ve menüdeki aktif sayfa
   işareti tanımlanıyor. */
.ic-sayfa { background: var(--lacivert); }
.ic-sayfa .menu a.etkin { border-bottom: 1px solid var(--lacivert); }
/* Üst bar sabit (position: fixed) — içerik onun altından başlasın. */
.ic-sayfa main { padding-top: var(--bar-y); }

/* Ekranda görünmeyen ama ekran okuyucuların okuduğu başlık. */
.gorsel-gizli {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===================== Konum kartları ===================== */
.konumlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 34px);
    /* Sayfada bu iki karttan başka bir şey yok; .bolum'un 1440px'lik ortak
       kolonuna sıkışmaları için bir sebep yok. Geniş ekranda yanlardaki boş
       alan kartlara veriliyor. */
    max-width: 1760px;
    padding-left: clamp(20px, 3vw, 48px);
    padding-right: clamp(20px, 3vw, 48px);
    /* Sayfa doğrudan kartlarla başlıyor (üstteki tanıtım bloğu kaldırıldı);
       üst bar ile kartlar birbirine yapışmasın. */
    padding-top: clamp(48px, 7vw, 96px);
    background: var(--lacivert);
}
.konum-kart {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(241, 233, 222, 0.22);
    border-radius: 14px;
    /* Zeminden bir tık açık: kart, sayfadan ayrışsın ama palet dışına çıkmasın. */
    background: color-mix(in srgb, var(--lacivert) 88%, #FFFFFF);
}
.konum-kart h2 {
    margin: 0;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--krem);
}

.konum-bilgi {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.konum-bilgi > div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    align-items: baseline;
}
.konum-bilgi dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--celik);
}
.konum-bilgi dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #FAF7F1;
}
.konum-bilgi dd a { border-bottom: 1px solid rgba(241, 233, 222, 0.35); }
.konum-bilgi dd a:hover { border-bottom-color: var(--krem); }

/* ===================== Harita ===================== */
.harita {
    position: relative;
    /* Sabit piksel yükseklik yerine oran: dar ekranda harita ezilmesin. */
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: color-mix(in srgb, var(--lacivert) 70%, #FFFFFF);
}
.harita iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.harita-yedek {
    margin: 0;
    font-size: 13px;
    color: rgba(250, 247, 241, 0.62);
}
/* Kartın en altındaki düğme tam genişlik — referanstaki gibi. */
.dugme.genis {
    justify-content: center;
    margin-top: auto;
}

@media (max-width: 980px) {
    .konumlar { grid-template-columns: 1fr; }
}

/* ===================== Tek ekran =====================
   Bu sayfada geriye yalnızca iki konum kartı kaldı ve sayfanın aşağı
   kaydırılmaması isteniyor. Kartlar ekranda kalan yüksekliği paylaşıyor,
   harita da kartın içinde artan boşluğu dolduruyor — bu yüzden haritanın
   sabit en/boy oranı burada bırakılıyor.

   Kilit YALNIZCA kartların yan yana sığdığı genişliklerde. Dar ekranda iki
   kart alt alta iniyor ve tek ekrana sığmıyor; orada kaydırmayı kapatmak
   içeriği erişilemez hâle getirirdi, o yüzden mobil serbest akışta kalıyor. */
@media (min-width: 981px) {
    html, body { height: 100%; overflow: hidden; }

    .tek-ekran main {
        height: 100dvh;
        padding-top: var(--bar-y);
        display: flex;
        flex-direction: column;
    }
    .tek-ekran .konumlar {
        flex: 1;
        min-height: 0;
        align-items: stretch;
        /* .bolum'un margin:auto'su bir sütun flex kabında satır eksenindeki
           esnemeyi İPTAL ediyor: kutu içeriğine kadar daralıp ortalanıyordu
           (ölçüldü: 1920px ekranda kartlar yalnızca 1009px). width:100% onu
           yeniden max-width'e kadar açıyor. */
        width: 100%;
        /* .bolum'un büyük dikey dolgusu burada geçerli değil: ekrana sığmak
           için boşluk ölçülü olmalı. */
        padding-top: clamp(20px, 3vh, 40px);
        padding-bottom: clamp(20px, 3vh, 40px);
    }
    .tek-ekran .konum-kart { min-height: 0; }
    .tek-ekran .harita {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }
}