/* ============================================================
   FIMAK — iletisim.css
   Yalnizca iletisim.html'de yuklenir; style.css'i tamamlar.

   Bolumler
   1. Degiskenler ve bolum iskeleti
   2. Sol sutun (baslik) ve sag sutun (iletisim bilgileri)
   3. Form kuresi
   4. Kubbe harita ve ustundeki rozetler
   5. Responsive (tum media query'ler burada)

   Tum siniflar c- on ekiyle kapatildi; style.css ile cakismaz.
   ============================================================ */


/* ------------------------------------------------------------
   1. Degiskenler ve bolum iskeleti
   ------------------------------------------------------------ */
.c-contact {
    --c-bg: #121214;
    --c-bg-deep: #0a0a0b;
    --c-line: rgb(255 255 255 / 0.1);
    --c-muted: rgb(255 255 255 / 0.5);
    /* Koyu zeminde markanin kirmizisi sert kaliyor; acik tonu kullanilir */
    --c-accent-soft: #ff4b55;
    --c-ok: #62f0a8;
    --c-dome: clamp(300px, 36vh, 400px);

    position: relative;
    isolation: isolate;
    min-height: 760px;
    height: calc(100vh - var(--nav-height));
    max-height: 1080px;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 0%, #1e1e24 0%, var(--c-bg) 55%);
    color: #fff;

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.c-contact a { color: inherit; }

.c-contact__inner {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1920px;
    height: 100%;
    margin-inline: auto;
    padding: 33px 60px 40px;
    /* Kendi katmanini acar: kubbe asagida kalir */
    transform: translateZ(0);
}


/* ------------------------------------------------------------
   2. Sol sutun ve sag sutun
   ------------------------------------------------------------ */
.c-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 250px;
}

.c-crumb {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 10px;
    font-size: clamp(16px, 1vw, 18px);
}

.c-crumb a {
    color: var(--c-muted);
    transition: color 0.5s ease;
}

.c-crumb a:hover { color: #fff; }
.c-crumb svg { opacity: 0.3; }

.c-intro h1 {
    margin-block: clamp(5px, 1vw, 15px);
    font-size: clamp(48px, 7.7vw, 148px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.c-intro p {
    max-width: 430px;
    font-size: clamp(15px, 0.9vw, 17px);
    line-height: 1.75;
    color: var(--c-muted);
}

.c-info {
    display: flex;
    align-items: center;
    padding-bottom: 250px;
}

.c-info__box {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3.5vw, 68px);
    width: 100%;
}

.c-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 2.6vw, 50px);
}

.c-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.c-row__label {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--c-muted);
    transition: color 0.5s ease;
}

.c-row__value {
    font-size: clamp(18px, 1.7vw, 32px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: rgb(255 255 255 / 0.75);
    word-break: break-word;
    transition: color 0.5s ease;
}

.c-places {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.9vw, 36px);
}

.c-tabs {
    display: flex;
    gap: clamp(15px, 2vw, 40px);
    list-style: none;
}

.c-tabs li {
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: rgb(255 255 255 / 0.2);
    cursor: pointer;
    transition: color 0.5s ease, border-color 0.5s ease;
}

.c-tabs li.is-on {
    border-color: #fff;
    color: #fff;
}

/* Tek lokasyon varken sekme tiklanabilir gorunmesin */
.c-tabs li:only-child { cursor: default; }

.c-addr {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: var(--c-muted);
    transition: color 0.5s ease;
}

.c-addr svg {
    flex-shrink: 0;
    margin-top: 5px;
}


/* ------------------------------------------------------------
   3. Form kuresi
   Kapaliyken yarisi asagida duran bir daire; acilinca yukari
   kayar ve form yuksekligi 0fr -> 1fr ile acilir.
   ------------------------------------------------------------ */
.c-orb-col {
    position: relative;
    display: flex;
    justify-content: center;
    grid-column: span 2;
}

.c-orb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 880px;
    aspect-ratio: 1;
    padding-top: 80px;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    transform: translateY(32%);
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1), border-color 0.5s ease, background 0.8s ease;
}

.c-orb.is-open {
    transform: translateY(0);
    background: radial-gradient(closest-side, rgb(18 18 20 / 0.92), rgb(18 18 20 / 0.6) 80%, transparent);
}

.c-orb__toggle {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 84px;
    letter-spacing: -0.03em;
    color: inherit;
    cursor: pointer;
    transform: translateY(70%);
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

.c-orb.is-open .c-orb__toggle { transform: translateY(0); }

.c-orb__toggle svg { transition: transform 0.5s ease; }
.c-orb.is-open .c-orb__toggle svg { transform: rotate(180deg); }

/* Yukseklik animasyonu: grid satiri 0fr <-> 1fr */
.c-form-wrap {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    max-width: 640px;
    transition: grid-template-rows 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

.c-orb.is-open .c-form-wrap { grid-template-rows: 1fr; }
.c-form-wrap > div { overflow: hidden; }

.c-form {
    padding: 10px 20px 4px;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}

.c-orb.is-open .c-form { opacity: 1; }

.c-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 33px;
}

.c-field input,
.c-field textarea {
    width: 100%;
    padding: 0 7px 15px;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
    background: transparent;
    font-size: 16px;
    line-height: 1.875;
    color: #fff;
    outline: none;
    transition: border-color 0.5s ease;
}

.c-field textarea {
    height: 100px;
    margin-top: 28px;
    padding-top: 12px;
    resize: none;
}

.c-field input::placeholder,
.c-field textarea::placeholder {
    font-size: 15px;
    color: rgb(255 255 255 / 0.6);
    transition: color 0.5s ease;
}

.c-field input:hover,
.c-field input:focus,
.c-field textarea:hover,
.c-field textarea:focus { border-color: #fff; }

.c-field input:focus::placeholder,
.c-field textarea:focus::placeholder { color: #fff; }

.c-field.has-error input,
.c-field.has-error textarea { border-color: var(--c-accent-soft); }

.c-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 26px;
}

.c-consent {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: -0.02em;
    color: rgb(255 255 255 / 0.6);
    cursor: pointer;
}

.c-consent input {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.c-consent input::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
    transition: transform 0.4s ease;
}

.c-consent input:checked::before { transform: scale(1); }
.c-consent input:hover { border-color: #fff; }
.c-consent.has-error input { border-color: var(--c-accent-soft); }
.c-consent b { font-weight: 500; color: rgb(255 255 255 / 0.75); }

/* Gonder: uzerine gelince yazi yukari kayip ikinci kopya alttan gelir */
.c-send {
    position: relative;
    min-width: 130px;
    height: 46px;
    padding: 0 25px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-bg);
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.c-send span {
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.c-send span + span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    color: #fff;
    transform: translateY(30px);
}

.c-form__msg {
    min-height: 20px;
    margin-top: 14px;
    font-size: 13px;
    text-align: right;
    color: var(--c-ok);
}

.c-form__msg.has-error { color: var(--c-accent-soft); }

.c-contact :where(a, button, input, textarea):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   4. Kubbe harita
   Sayfanin altindan yukari dogru giren dev bir daire; icinde
   gomulu harita, isik havuzu ve suzulen zerreler.
   ------------------------------------------------------------ */
.c-dome-zone {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--c-dome);
    pointer-events: none;
}

.c-dome {
    --c-dome-size: max(2600px, 175vw);

    position: absolute;
    top: 0;
    left: 50%;
    width: var(--c-dome-size);
    height: var(--c-dome-size);
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    background-color: var(--c-bg-deep);
    transform: translateX(-50%);
    isolation: isolate;
    pointer-events: auto;
}

.c-dome-glow {
    position: absolute;
    top: 0;
    left: 50%;
    width: max(2600px, 175vw);
    height: max(2600px, 175vw);
    border-radius: 50%;
    box-shadow: 0 0 250px rgb(140 10 20 / 0.55);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Kubbenin kenarindaki isik halkasi */
.c-dome::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    border: 2px solid #7a0c14;
    border-radius: 50%;
    box-shadow:
        inset 0 4px 30px rgb(226 6 19 / 0.3),
        inset 0 6px 80px rgb(226 6 19 / 0.35),
        inset 0 0 0 1px rgb(255 140 140 / 0.14);
    pointer-events: none;
}

.c-map-view {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: var(--c-dome);
    transform: translateX(-50%);
}

.c-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--c-bg-deep);
}

.c-map iframe {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    border: 0;
    /* Google haritasini sitenin koyu temasina cevirir */
    filter: grayscale(1) invert(1) brightness(0.62) contrast(1.2);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.c-map iframe.is-ready { opacity: 1; }

.c-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.c-fx--tint {
    z-index: 2;
    background-color: rgb(18 18 20 / 0.5);
}

/* Markerin etrafini aydinlatan yumusak isik havuzu */
.c-fx--light {
    background: radial-gradient(circle 420px at 50% 50%,
        rgb(255 75 85 / 0.18), rgb(226 6 19 / 0.07) 45%, transparent 70%);
}

.c-fx--vignette {
    z-index: 5;
    background:
        linear-gradient(180deg, rgb(10 10 11 / 0.6) 0%, transparent 20%, transparent 70%, var(--c-bg) 100%),
        radial-gradient(75% 130% at 50% 0%, transparent 35%, rgb(10 10 11 / 0.85) 100%);
}

/* Yuzeyde suzulen isik zerreleri */
.c-dust {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.c-pin-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Marker: ic ice yumusak daireler, nefes alan animasyon */
.c-pin {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
}

.c-pin span {
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
}

.c-pin__outer {
    width: 84px;
    height: 84px;
    opacity: 0.1;
    animation: c-breathe 3.6s ease-in-out infinite;
}

.c-pin__mid {
    width: 56px;
    height: 56px;
    opacity: 0.14;
    animation: c-breathe 3.6s ease-in-out 0.3s infinite;
}

.c-pin__core {
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 4px rgb(255 255 255 / 0.25), 0 0 40px 10px rgb(255 75 85 / 0.5);
}

@keyframes c-breathe {
    0%, 100% { transform: scale(0.88); }
    50% { transform: scale(1.08); }
}


/* ---------- Kubbenin ustundeki rozetler ---------- */
.c-hud {
    position: absolute;
    bottom: 64px;
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateX(-50%);
}

.c-hud__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 999px;
    background-color: rgb(255 255 255 / 0.05);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    box-shadow: 0 17px 22px -6px rgb(0 0 0 / 0.3);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color 0.5s ease, background-color 0.5s ease;
}

.c-hud__cta svg { transition: transform 0.5s ease; }

.c-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 16px;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 16px;
    background-color: rgb(10 10 11 / 0.55);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgb(255 255 255 / 0.45);
}

.c-chip strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.c-live {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: var(--c-ok);
    box-shadow: 0 0 8px var(--c-ok);
    animation: c-blink 1.6s infinite;
}

@keyframes c-blink {
    50% { opacity: 0.3; }
}


/* ------------------------------------------------------------
   Uzerine gelme (yalnizca fareli cihazlar)
   ------------------------------------------------------------ */
@media (hover: hover) and (min-width: 768px) {
    .c-orb:hover { border-color: rgb(255 255 255 / 0.35); }
    .c-row:hover .c-row__label,
    .c-row:hover .c-row__value,
    .c-addr:hover,
    .c-tabs li:hover { color: #fff; }

    .c-send:hover {
        background-color: var(--brand);
        color: #fff;
    }

    .c-send:hover span:first-child {
        opacity: 0;
        transform: translateY(-30px);
    }

    .c-send:hover span + span {
        opacity: 1;
        transform: none;
    }

    .c-hud__cta:hover {
        border-color: #fff;
        background-color: rgb(255 255 255 / 0.1);
    }

    .c-hud__cta:hover svg { transform: translate(2px, -2px); }
}


/* ------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1536px) {
    .c-orb:not(.is-open) { transform: translateY(34%); }
}

@media (max-width: 1280px) {
    .c-contact__inner { padding: 33px 30px 40px; }
}

@media (max-width: 1024px) {
    /* Kure mekanigi dar ekranda anlamsiz: form dogrudan acik durur */
    .c-contact {
        --c-dome: 380px;
        height: auto;
        max-height: none;
    }

    .c-contact__inner {
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding: 33px 60px 440px;
    }

    .c-intro,
    .c-info { padding-bottom: 0; }

    .c-info { order: 2; }
    .c-orb-col { order: 3; }

    .c-orb {
        align-items: stretch;
        aspect-ratio: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        transform: none;
    }

    .c-orb__toggle { display: none; }

    .c-form-wrap {
        grid-template-rows: 1fr;
        max-width: none;
    }

    .c-form {
        padding: 0;
        opacity: 1;
    }

    .c-hud { bottom: 40px; }
}

@media (max-width: 768px) {
    .c-contact__inner { padding: 33px 30px 420px; }
    .c-chip { display: none; }
}

@media (max-width: 480px) {
    .c-contact__inner { padding: 33px 20px 400px; }
    .c-fields { grid-template-columns: 1fr; }

    .c-form__foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-pin__outer,
    .c-pin__mid,
    .c-live { animation: none; }

    .c-orb,
    .c-orb__toggle,
    .c-form-wrap,
    .c-send span { transition: none; }
}

/* Ofis sekmesinin govdesi: adres + o subeye ait numaralar.
   Merkezin numaralari Ayarlar'dan yukarida basildigi icin burada yalnizca
   subenin kendi bilgileri varsa liste cikiyor. */
.c-place[hidden] {
    display: none;
}

.c-place__rows {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.c-place__rows li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.c-place__rows li > span:first-child {
    flex: 0 0 auto;
    min-width: 62px;
    opacity: .6;
}

.c-place__rows a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgb(255 255 255 / 0.25);
}

.c-place__rows a:hover {
    border-bottom-color: currentColor;
}

@media (max-width: 760px) {
    .c-place__rows li {
        flex-direction: column;
        gap: 2px;
    }

    .c-place__rows li > span:first-child {
        min-width: 0;
        font-size: 12px;
    }
}