/* =====================================================================
   contact.css — İletişim sayfası (layouts/yeni.php)

   Sol: line-art SVG usta — halata asıla asıla formu sahneye çeker
   (contact-foreman.js sürer). Sağ: cam panelli form. Altta: iletişim
   kartları ve harita. 3D/WebGL bağımlılığı yok; sahne mobilde de açık.

   Yalnızca yeni.css + theme-light.css token'larını kullanır; koyu/aydınlık
   temada otomatik uyumlu. Hareket: yalnızca transform/opacity. RTL güvenli.
   ===================================================================== */

.contact {
    background: var(--bg-0);
    overflow-x: clip;
}

/* ------------------------------- HERO ------------------------------- */
.contact-hero {
    position: relative;
    padding-block-start: calc(var(--header-h) + clamp(1.6rem, 1rem + 3vw, 3.5rem));
    padding-block-end: clamp(3rem, 2rem + 5vw, 6rem);
    overflow: clip;
}

.contact-hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.contact-hero__grid {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 90% at 28% 34%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 90% at 28% 34%, #000 0%, transparent 72%);
    opacity: 0.7;
}
.contact-hero__glow {
    position: absolute;
    inset-block-start: -16%;
    inset-inline-start: -10%;
    width: min(680px, 70%);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--blue-soft) 0%, transparent 66%);
    filter: blur(6px);
}

.contact-hero__inner { position: relative; }

/* Konvoy: usta sahnesi + halat katmanı + form, tek koordinat uzayı
   (halat uçları bu kutuya göre hesaplanır — contact-foreman.js) */
.contact-convoy {
    position: relative;
    display: grid;
    gap: clamp(1.25rem, 0.6rem + 2vw, 2.6rem);
    align-items: center;
}
@media (min-width: 992px) {
    /* Geniş form (≈1000px) için konvoy, standart shell'den biraz taşar ve
       ortada durur; usta ile form yan yana dengeli kalır. */
    .contact-hero__inner { max-width: min(1720px, 94vw); }
    .contact-convoy {
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
        justify-content: center;
    }
}
/* Mobilde: usta üstte küçük, form altta (çekiş mobilde de oynar; halat
   rect tabanlı çizildiği için açılı iner — kod farkı yok) */
@media (max-width: 991px) {
    .contact-convoy      { grid-template-columns: 1fr; }
    .contact-hero__stage { order: 1; }
    .contact-hero__main  { order: 2; max-width: 1000px; margin-inline: auto; width: 100%; }
}

/* ------------------------ Halat + çekme kulpu ----------------------- */
/* Konvoyu kaplayan çizim katmanı; path'i JS her karede günceller.
   Başta görünmez — yalnızca çekiş sırasında GSAP açar. */
.contact-rope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}
/* Katmanlı halat: koyu kenevir çekirdeği + açık parlama şeridi + lif
   kesikleri (örgü dokusu). Kalınlıklar JS'ten sürülür (gerginlikte halat
   incelir — esneme hissi); burada yalnız renkler. Eski drop-shadow filtresi
   kaldırıldı: path her karede yeniden çiziliyor, filtre kare başı pahalıydı. */
.contact-rope path { fill: none; stroke-linecap: round; }
.contact-rope .rope-core  { stroke: color-mix(in srgb, #8a6136 84%, var(--bg-1)); }
.contact-rope .rope-sheen { stroke: color-mix(in srgb, #ecc98f 78%, var(--bg-1)); opacity: 0.85; }
.contact-rope .rope-fiber { stroke: color-mix(in srgb, #3a2a14 60%, transparent); stroke-dasharray: 7 11; opacity: 0.5; }
.contact-rope .rope-knot  {
    fill: color-mix(in srgb, #8a6136 84%, var(--bg-1));
    stroke: color-mix(in srgb, var(--ink-1) 65%, transparent);
    stroke-width: 2;
}

/* Formun sol kenarındaki çekme kulpu (halatın form ucu). Ortası şeffaf:
   halatın düğümü halkanın içinden görünür → "gerçekten bağlı" hissi.
   Varsayılan görünmez — yalnız halat sahnedeyken JS (contact-foreman.js)
   opacity'yi halatla birlikte açıp kapatır; çekiş bitince iz bırakmaz.
   (Konum/ölçü sabit kalır: halat ucu rect'i her karede buradan okunur.) */
.contact-form__lug {
    position: absolute;
    inset-inline-start: -8px;
    inset-block-start: 38%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3.5px solid color-mix(in srgb, var(--ink-1) 42%, var(--blue-bright));
    background: transparent;
    box-shadow: 0 4px 12px -4px var(--blue-soft);
    opacity: 0;
}

/* --------------------------- Hero başlık ---------------------------- */
.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-bright);
    margin-block-end: 0.9rem;
}
.contact-eyebrow__spark { width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.contact-hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
    color: var(--ink-1);
    max-width: none;
}
.contact-hero__lead {
    margin-block-start: 1rem;
    font-size: var(--fs-lead);
    color: var(--ink-2);
    max-width: 66ch;
}

/* ------------------------------- FORM ------------------------------- */
.contact-form {
    position: relative;
    width: 100%;
    max-width: 1000px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.2rem);
    background: var(--bg-1);
    box-shadow: 0 30px 80px -40px rgba(8, 16, 32, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-block-start: clamp(1.4rem, 1rem + 2vw, 2.2rem);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
    .contact-form {
        background: color-mix(in srgb, var(--bg-1) 82%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        backdrop-filter: blur(14px) saturate(1.1);
    }
    /* Akıcılık: form translateX ile çekilirken cam blur HER KAREDE yeniden
       rasterize edilir → jank. Çekiş boyunca blur'u kapat (JS is-driving ekler);
       form oturunca geri açılır. Görsel fark fark edilmez, akıcılık büyük. */
    .contact-convoy.is-driving .contact-form {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
.contact-form::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 14%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
    opacity: 0.7;
}

.contact-form__head { margin-block-end: 1.2rem; }
.contact-form__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
    color: var(--ink-1);
}
.contact-form__subtitle { margin-block-start: 0.35rem; font-size: 0.95rem; color: var(--ink-3); }

.contact-form__banner {
    margin-block-end: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--danger, #EF4444) 50%, transparent);
    background: color-mix(in srgb, var(--danger, #EF4444) 12%, transparent);
    color: var(--ink-1);
    font-size: 0.9rem;
}

.contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.contact-field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .contact-form__grid { grid-template-columns: 1fr; } }

.contact-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.contact-field__label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; }
.contact-field__req { color: var(--accent); }

.contact-field__input {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink-1);
    background: color-mix(in srgb, var(--bg-2) 70%, transparent);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 0.72rem 0.85rem;
    transition: border-color var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                background var(--t-base) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.contact-field__input::placeholder { color: var(--ink-3); }
.contact-field__input:hover { border-color: color-mix(in srgb, var(--blue-bright) 45%, var(--line-2)); }
.contact-field__input:focus {
    outline: none;
    border-color: var(--blue-bright);
    box-shadow: 0 0 0 4px var(--blue-soft);
    background: var(--bg-1);
}
.contact-field__textarea { resize: vertical; min-height: 118px; line-height: 1.5; }

.contact-field__select { position: relative; }
.contact-field__select .contact-field__input { padding-inline-end: 2.4rem; cursor: pointer; }
.contact-field__caret {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.85rem;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--ink-3);
    pointer-events: none;
}
.contact-field__select select option { color: #101a2c; background: #fff; }

.contact-field.is-invalid .contact-field__input {
    border-color: var(--danger, #EF4444);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #EF4444) 16%, transparent);
}
.contact-field__error {
    font-size: 0.8rem;
    color: var(--danger, #EF4444);
    min-height: 0;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.contact-field.is-invalid .contact-field__error,
.contact-field__error:not(:empty) { opacity: 1; transform: none; }
.contact-field__error:empty { display: none; }
.contact-field__error--consent { margin-block-start: -0.2rem; }

.contact-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); inset-inline-start: -9999px; }

.contact-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-block-start: 1.1rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.contact-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-consent__box {
    flex: none;
    width: 22px; height: 22px;
    margin-block-start: 1px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-2) 70%, transparent);
    color: #fff;
    transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.contact-consent__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.contact-consent input:checked + .contact-consent__box { background: var(--blue); border-color: var(--blue); }
.contact-consent input:checked + .contact-consent__box svg { opacity: 1; transform: none; }
.contact-consent input:focus-visible + .contact-consent__box { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.contact-consent.is-invalid .contact-consent__box { border-color: var(--danger, #EF4444); }
.contact-form__link { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 2px; }

.contact-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-start: 1.3rem;
}
.contact-form__hint { font-size: 0.8rem; color: var(--ink-3); }
.contact-form__submit { position: relative; gap: 0.6rem; }
.contact-form__spinner {
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-block-start-color: #fff;
    display: none;
    animation: ctSpin 0.7s linear infinite;
}
.contact-form.is-loading .contact-form__submit { pointer-events: none; opacity: 0.85; }
.contact-form.is-loading .contact-form__spinner { display: inline-block; }
@keyframes ctSpin { to { transform: rotate(360deg); } }

.contact-form__status { margin-block-start: 0.8rem; font-size: 0.85rem; color: var(--ink-3); min-height: 1.1em; }

/* Gönderim anı: form içeriği TIR'a "yüklenip" çıkar, sonra başarı belirir */
.contact-form.is-sending .contact-form__inner {
    opacity: 0;
    transform: translateX(-26px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.contact-form__success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) 0.5rem;
}
.contact-form.is-sent .contact-form__inner { display: none; }
.contact-form.is-sent .contact-form__success { display: flex; }
.contact-form__success-ic {
    width: 64px; height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(120% 120% at 30% 22%, var(--blue-bright), var(--blue));
    box-shadow: 0 12px 30px -10px var(--blue-soft);
    animation: ctPop 0.6s var(--ease-spring, var(--ease-out)) both;
}
.contact-form__success-ic svg { width: 30px; height: 30px; }
.contact-form__success-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-1); }
.contact-form__success-text { color: var(--ink-2); max-width: 38ch; }
@keyframes ctPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* --------------------------- USTA SAHNESİ ---------------------------- */
.contact-hero__stage {
    position: relative;
    min-height: clamp(220px, 40vw, 560px);
    border-radius: var(--radius);
    display: grid;
    place-items: end center;      /* usta zemin çizgisiyle alta oturur */
}

/* Barlas usta maskotu: dolgulu çizgi film stili (kalın tema konturu +
   cel-shading). Renk token'ları tema değişkenlerinden türetilir → iki temada
   da çalışır; maskot kimliği (turuncu baret/eldiven, ten, bot) sabit renk
   çapalarıyla korunur. Eklem dönüşleri GSAP'tan (inline transform) gelir.
   Kol/bacak boruları: kontur (.fm-lnk) + kumaş/ten dolgusu aynı polyline
   üzerinde; stroke-width çizimde (attribute) tutulur, burada yalnız renk. */
.contact-foreman {
    --fm-line:      color-mix(in srgb, var(--ink-1) 88%, transparent);
    --fm-soft:      color-mix(in srgb, var(--ink-1) 44%, transparent);
    --fm-suit:      color-mix(in srgb, var(--blue) 62%, var(--bg-1));
    --fm-suit-2:    color-mix(in srgb, #06325e 52%, var(--fm-suit));
    --fm-suit-hi:   color-mix(in srgb, #9ec9ef 42%, var(--fm-suit));
    --fm-shirt:     color-mix(in srgb, #f5f8fc 82%, var(--fm-suit));
    --fm-skin:      color-mix(in srgb, #f0b083 90%, var(--bg-1));
    --fm-skin-2:    color-mix(in srgb, #cf8b57 82%, var(--bg-1));
    --fm-hair:      #57402e;
    --fm-hair-line: #2b1f15;
    --fm-mouth:     #4a1d16;
    --fm-helmet:    color-mix(in srgb, var(--accent, #f59e0b) 86%, var(--bg-1));
    --fm-helmet-2:  color-mix(in srgb, #a85f04 62%, var(--fm-helmet));
    --fm-glove:     color-mix(in srgb, var(--accent, #f59e0b) 88%, var(--bg-1));
    --fm-glove-2:   color-mix(in srgb, #8f4e04 55%, var(--fm-glove));
    --fm-boot:      #242e40;
    --fm-boot-2:    #151c2b;
    --fm-boot-hi:   #47546e;
    --fm-belt:      #2a3348;
    --fm-metal:     color-mix(in srgb, var(--ink-1) 30%, var(--bg-1));
    --fm-shade:     rgba(9, 20, 38, 0.14);
    --fm-white-hi:  rgba(255, 255, 255, 0.45);
    width: 100%;
    height: auto;
    max-width: 460px;
    max-height: 540px;
    display: block;
    transition: opacity 0.5s var(--ease-out);
}
/* RTL: usta aynalanır (varsayılan çizim sağa/forma bakar; RTL'de form solda).
   GSAP yalnız İÇ gruplara dokunur → kök SVG'deki CSS transform'la çakışmaz. */
[dir="rtl"] .contact-foreman { transform: scaleX(-1); }
/* Ayna, göğüs armasındaki "B" harfini ters çevirirdi — harfi kendi kutusu
   içinde geri aynalayarak okunur tut (fill-box: SVG element bazlı origin). */
[dir="rtl"] .contact-foreman .fm-patch-b {
    transform: scaleX(-1);
    transform-box: fill-box;
    transform-origin: center;
}

.contact-foreman .fm-shadow { fill: color-mix(in srgb, var(--ink-1) 9%, transparent); }
.contact-foreman .fm-ground { stroke: var(--line-2); stroke-width: 2; fill: none; }
.contact-foreman .fm-deco   { stroke: var(--fm-soft); stroke-width: 1.6; fill: none; opacity: 0.5; }
.contact-foreman .fm-deco--arc { stroke-dasharray: 5 7; }

/* İskelet boruları: renk sınıfı + elemandaki stroke-width birlikte çalışır */
.contact-foreman .fm-lnk,
.contact-foreman .fm-tube-suit,
.contact-foreman .fm-tube-suit2,
.contact-foreman .fm-tube-skin,
.contact-foreman .fm-tube-skin2,
.contact-foreman .fm-tube-metal { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-foreman .fm-lnk        { stroke: var(--fm-line); }
.contact-foreman .fm-lnk--soft  { stroke: var(--fm-soft); }
.contact-foreman .fm-tube-suit  { stroke: var(--fm-suit); }
.contact-foreman .fm-tube-suit2 { stroke: var(--fm-suit-2); }
.contact-foreman .fm-tube-skin  { stroke: var(--fm-skin); }
.contact-foreman .fm-tube-skin2 { stroke: var(--fm-skin-2); }
.contact-foreman .fm-tube-metal { stroke: var(--fm-metal); }
.contact-foreman .fm-tube-skin-bulge { fill: var(--fm-skin); }

/* Tulum: pantolon + önlük + askı + kemer */
.contact-foreman .fm-pant     { fill: var(--fm-suit); stroke: var(--fm-line); stroke-width: 3; stroke-linejoin: round; }
.contact-foreman .fm-torso    { fill: var(--fm-shirt); stroke: var(--fm-line); stroke-width: 3; stroke-linejoin: round; }
.contact-foreman .fm-bib      { fill: var(--fm-suit); }
.contact-foreman .fm-bib-seam { stroke: var(--fm-line); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.contact-foreman .fm-belt     { fill: var(--fm-belt); stroke: var(--fm-line); stroke-width: 2.2; stroke-linejoin: round; }
.contact-foreman .fm-metal    { fill: var(--fm-metal); stroke: var(--fm-line); stroke-width: 2; }
.contact-foreman .fm-patch    { fill: var(--fm-shirt); stroke: var(--fm-line); stroke-width: 2.2; }
.contact-foreman .fm-patch-b  { stroke: var(--fm-line); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.contact-foreman .fm-cuffband { fill: var(--fm-suit-2); stroke: var(--fm-line); stroke-width: 2.4; stroke-linejoin: round; }
.contact-foreman .fm-seam-hi  { stroke: var(--fm-suit-hi); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.contact-foreman .fm-crease   { stroke: var(--fm-suit-2); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.contact-foreman .fm-rollcuff { fill: var(--fm-suit-hi); stroke: var(--fm-line); stroke-width: 2.4; }
.contact-foreman .fm-cap-fill { fill: var(--fm-suit); }
.contact-foreman .fm-cap-seam { stroke: var(--fm-line); stroke-width: 2.6; fill: none; stroke-linecap: round; }

/* Cel-shading katmanları */
.contact-foreman .fm-shade  { fill: var(--fm-shade); }
.contact-foreman .fm-hilite { stroke: var(--fm-white-hi); fill: none; stroke-linecap: round; }

/* Botlar: iki temada da koyu iş botu (sabit lacivert + tema konturu) */
.contact-foreman .fm-boot      { fill: var(--fm-boot); stroke: var(--fm-line); stroke-width: 2.6; stroke-linejoin: round; }
.contact-foreman .fm-sole      { fill: var(--fm-boot-2); stroke: var(--fm-line); stroke-width: 2.2; stroke-linejoin: round; }
.contact-foreman .fm-boot-line { stroke: var(--fm-boot-hi); stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* Baş: ten + saç/bıyık (sabit koyu — iki temada da tenin üstünde okunur) */
.contact-foreman .fm-skin      { fill: var(--fm-skin); stroke: var(--fm-line); stroke-width: 2.8; stroke-linejoin: round; }
.contact-foreman .fm-face-line { stroke: var(--fm-line); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.contact-foreman .fm-hair      { fill: var(--fm-hair); stroke: var(--fm-hair-line); stroke-width: 1.6; stroke-linejoin: round; }
.contact-foreman .fm-eye-w     { fill: #fff; stroke: var(--fm-hair-line); stroke-width: 1.8; }
.contact-foreman .fm-eye-p     { fill: var(--fm-hair-line); }
.contact-foreman .fm-eye-g     { fill: #fff; }
.contact-foreman .fm-mouth     { fill: var(--fm-mouth); stroke: var(--fm-hair-line); stroke-width: 1.6; stroke-linejoin: round; }
.contact-foreman .fm-teeth     { fill: #fff; }

/* Baret: turuncu güvenlik bareti (kubbe + alt bant + ön siper) */
.contact-foreman .fm-helmet      { fill: var(--fm-helmet); stroke: var(--fm-line); stroke-width: 3; stroke-linejoin: round; }
.contact-foreman .fm-helmet--brim{ stroke-width: 2.5; }
.contact-foreman .fm-helmet-2    { fill: var(--fm-helmet-2); }
.contact-foreman .fm-helmet-line { stroke: var(--fm-helmet-2); stroke-width: 2.6; fill: none; stroke-linecap: round; }

/* Eldivenler: turuncu iş eldiveni (bilek körüğü + yumruk + başparmak) */
.contact-foreman .fm-glove   { fill: var(--fm-glove); stroke: var(--fm-line); stroke-width: 2.6; }
.contact-foreman .fm-glove-2 { fill: var(--fm-glove-2); stroke: var(--fm-line); stroke-width: 2.4; stroke-linejoin: round; }
.contact-foreman .fm-glove--back { stroke: var(--fm-soft); }

/* Gönderim sonrası onay (usta selam verince stage'de belirir) */
.contact-stage__done {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-align: center;
    padding: 1rem;
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.contact-hero__stage.is-done .contact-stage__done { opacity: 1; transform: none; }
/* Onay kartı görünürken usta silüete düşer (kart öne çıksın) */
.contact-hero__stage.is-done .contact-foreman { opacity: 0.16; }
.contact-stage__done-ic {
    width: 76px; height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(120% 120% at 30% 22%, var(--blue-bright), var(--blue));
    box-shadow: 0 18px 44px -14px var(--blue-soft);
    animation: ctPop 0.6s var(--ease-spring, var(--ease-out)) both;
}
.contact-stage__done-ic svg { width: 36px; height: 36px; }
.contact-stage__done-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink-1); max-width: 22ch; }

@media (max-width: 991px) {
    /* Mobil: usta sahnesi tamamen gizli — form doğrudan görünür (head
       script contact-deliver'ı mobilde eklemez → çekiş/halat hiç kurulmaz).
       Gönderim onayı formun kendi başarı panelinden gelir. */
    .contact-hero__stage { display: none; }
}

/* ---------------------- İLETİŞİM BİLGİLERİ -------------------------- */
.contact-info {
    position: relative;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--bg-1);
    border-block-start: 1px solid var(--line);
}
.contact-info__head { max-width: 60ch; margin-block-end: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.contact-info__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink-1); letter-spacing: -0.01em; }
.contact-info__lead { margin-block-start: 0.6rem; color: var(--ink-2); font-size: var(--fs-lead); }

.contact-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
    align-items: stretch;
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    text-decoration: none;
    color: var(--ink-1);
    transition: transform var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}
a.contact-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--blue-bright) 50%, var(--line));
    box-shadow: 0 24px 50px -30px rgba(8, 16, 32, 0.5);
}
.contact-card__ic {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue-bright);
    margin-block-end: 0.3rem;
}
.contact-card__ic svg { width: 21px; height: 21px; }
.contact-card__label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.contact-card__value { font-weight: 600; color: var(--ink-1); line-height: 1.45; }
.contact-card__link {
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--blue-bright);
    text-decoration: none;
}
.contact-card__link svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--ease-out); }
.contact-card__link:hover svg { transform: translate(2px, -2px); }

/* ------------------------------ HARİTA ------------------------------ */
.contact-map { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); background: var(--bg-0); }
.contact-map__head { margin-block-end: clamp(1.2rem, 0.8rem + 1.5vw, 2rem); }
.contact-map__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink-1); }
.contact-map__note { margin-block-start: 0.5rem; color: var(--ink-2); }
.contact-map__frame {
    position: relative;
    margin-inline: auto;
    max-width: var(--shell);
    width: calc(100% - 2 * var(--pad));
    aspect-ratio: 21 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line-2);
    box-shadow: 0 30px 70px -40px rgba(8, 16, 32, 0.5);
}
.contact-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.2) contrast(1.02); }
@media (max-width: 700px) { .contact-map__frame { aspect-ratio: 4 / 3; } }

/* --------------------------- Giriş hareketi ------------------------- */
html.contact-anim .contact-hero__intro .contact-hero__title,
html.contact-anim .contact-hero__intro .contact-hero__lead { animation: ctLift 640ms var(--ease-out) both; }
html.contact-anim .contact-hero__intro .contact-hero__lead { animation-delay: 90ms; }
@keyframes ctLift {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

/* ÇEKİŞ AKTİF (html.contact-deliver — hareket açık, JS var):
   - Form gizli + hafif sağda başlar; GSAP (contact-foreman.js) is-pulled
     ekleyip formu ekran dışından adım adım çeker (inline transform).
   - GÜVENLİK: GSAP/CDN gelmezse ctFormSafety en geç ~1.2 sn'de formu açar
     → form asla uzun süre gizli kalmaz. is-pulled bu animasyonu kapatır;
     fill'li CSS animasyonu inline stili ezeceği için bu şart.
   - Reduced-motion / JS yok → contact-deliver hiç eklenmez; form normal ve
     sabit görünür (form HER ZAMAN kullanılabilir kalır). */
html.contact-deliver .contact-convoy .contact-form {
    opacity: 0;
    transform: translateX(46px);
    will-change: transform, opacity;
    animation: ctFormSafety 1ms linear 1.2s forwards;
}
@keyframes ctFormSafety { to { opacity: 1; transform: none; } }
html.contact-deliver .contact-convoy.is-pulled .contact-form {
    animation: none;   /* kontrol GSAP'ta: opacity/transform inline gelir */
}

/* Çekiş aktif DEĞİLSE (reduced-motion / JS yok): usta statik pozda görünür
   kalır (anlamlı bir illüstrasyon), yalnız halat çizilmez. (contact-deliver,
   <head> içindeki satır içi script ile ilk boyamadan önce eklenir → FOUC yok.) */
html:not(.contact-deliver) .contact-rope { display: none; }
/* Halat yoksa formdaki çekme kulpu da anlamsız — mobil, reduced-motion ve
   JS'siz durumların hepsini tek kural kapsar (sınıf yalnız masaüstünde eklenir). */
html:not(.contact-deliver) .contact-form__lug { display: none; }

@media (prefers-reduced-motion: reduce) {
    html.contact-anim .contact-hero__intro .contact-hero__title,
    html.contact-anim .contact-hero__intro .contact-hero__lead { animation: none; }
    .contact-form__success-ic, .contact-stage__done-ic { animation: none; }
    .contact-stage__done, .contact-form.is-sending .contact-form__inner { transition: none; }
}