/* ==========================================================================
   İletişim sayfası — app/views/pages/contact.php
   Tasarım token'ları ve düğmeler style.css'ten (P1: .btn .btn-accent / .btn-primary / .btn-outline-*);
   üst bölüm P1 partials/page-header (fotoğraflı). Burada yalnız sayfaya özgü düzen var.
   ========================================================================== */

.ct-page {
    --ct-navy: var(--primary, #0d1b2a);
    --ct-navy-2: var(--primary-light, #1b2d45);
    --ct-blue: var(--brand, #0862be);
    --ct-blue-ink: #0a56a6;
    --ct-orange: var(--accent, #ef7f1a);       /* yalnız dekoratif (ikon, çizgi) */
    --ct-orange-light: #ffb36b;                /* koyu zeminde ikon */
    --ct-wa: #0b7a4b;
    --ct-ink: #1f2a37;
    --ct-muted: #566474;
    --ct-line: #e2e8ef;
    --ct-line-strong: #c9d3de;
    --ct-surface: #f4f7fa;
    --ct-danger: #b42318;
    --ct-radius: 14px;
    --ct-shadow: 0 12px 32px rgba(13, 27, 42, .08);
    color: var(--ct-ink);
}

.ct-break { overflow-wrap: anywhere; }
.ct-nowrap { white-space: nowrap; }
.ct-only-narrow { display: none !important; }

/* ---------- İletişim kanalları ---------- */
.ct-channels { position: relative; z-index: 2; padding-top: clamp(1.5rem, 4vw, 2.75rem); }
.ct-channel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) { .ct-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ct-channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ct-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
}
.ct-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ct-navy); }
.ct-card-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: .35rem;
    border-radius: 12px;
    background: #e7f0fb;
    color: var(--ct-blue);
    font-size: 1.35rem;
}
.ct-card-icon--wa { background: #e2f4ea; color: var(--ct-wa); }
.ct-card-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    margin-top: auto;
    padding-top: .35rem;
    font-weight: 700;
    color: var(--ct-blue-ink);
    text-decoration: none;
}
.ct-card-link:hover, .ct-card-link:focus-visible { color: var(--ct-navy); text-decoration: underline; }
/* Kartın asıl değeri (WhatsApp numarası, e-posta): etiketin hemen altında */
.ct-card-value {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ct-navy);
    text-decoration: none;
}
.ct-card-value i { font-size: .85em; color: var(--ct-blue-ink); }
.ct-card-value:hover, .ct-card-value:focus-visible { color: var(--ct-blue-ink); text-decoration: underline; }

.ct-phone-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.ct-phone-list li { display: flex; flex-direction: column; }
.ct-phone-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ct-muted);
}
.ct-phone-list a {
    display: inline-block;
    padding: .2rem 0 .45rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ct-navy);
    text-decoration: none;
}
.ct-phone-list a:hover, .ct-phone-list a:focus-visible { color: var(--ct-blue-ink); text-decoration: underline; }

.ct-address { margin: 0; font-style: normal; line-height: 1.55; color: var(--ct-ink); }

/* Telefon: 4 kart 2×2 kompakt ikon kutusu (ikon + değer); form ilk ekranın hemen altında başlar */
@media (max-width: 575.98px) {
    .ct-channels { padding-top: 1rem; }
    .ct-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .ct-card {
        gap: .3rem;
        padding: .75rem .8rem .7rem;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(13, 27, 42, .07);
    }
    .ct-card-icon { width: 34px; height: 34px; margin: 0 0 .1rem; border-radius: 9px; font-size: 1rem; }
    /* Başlık ekran okuyucuda kalır, görünmez */
    .ct-card-title {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .ct-phone-label { display: none; }
    .ct-phone-list { gap: 0; }
    .ct-phone-list a,
    .ct-card-value {
        min-height: 30px;
        padding: .1rem 0;
        font-size: .86rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .ct-card-value { display: inline-block; }
    .ct-card-value i { display: none; }
    .ct-only-wide { display: none !important; }
    .ct-only-narrow { display: inline-block !important; }
}

/* ---------- Form + yan sütun ---------- */
.ct-main {
    padding: clamp(1.25rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    scroll-margin-top: calc(var(--header-h, 72px) + 16px);
}
.ct-form-card {
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: calc(var(--ct-radius) + 4px);
    box-shadow: var(--ct-shadow);
}
.ct-form-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: 0 0 1.25rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--ct-line);
}
.ct-form-title {
    margin: 0;
    font-family: var(--font-display, "Barlow Condensed", var(--font-sans, system-ui, sans-serif));
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: var(--ct-navy);
}
.ct-required-note { margin: 0; font-size: .875rem; color: var(--ct-muted); }
.ct-req { margin-left: .1rem; color: var(--ct-danger); }

.ct-fields { margin-bottom: 1.5rem; }
.ct-form .form-label { margin-bottom: .35rem; font-size: .925rem; font-weight: 600; color: var(--ct-ink); }
.ct-form .form-control,
.ct-form .form-select {
    min-height: 48px;
    padding: .65rem .9rem;
    font-size: 1rem; /* iOS yakınlaştırmasını önler */
    background-color: #fff;
    border: 1.5px solid var(--ct-line-strong);
    border-radius: 10px;
}
.ct-form .form-select { padding-right: 2.25rem; }
.ct-form textarea.form-control { min-height: 140px; resize: vertical; }
.ct-form .form-control::placeholder { color: #7d8996; opacity: 1; }
.ct-form .form-control:focus,
.ct-form .form-select:focus {
    border-color: var(--ct-blue);
    box-shadow: 0 0 0 .25rem rgba(8, 98, 190, .18);
}
.ct-form .form-control.is-invalid,
.ct-form .form-select.is-invalid { border-color: var(--ct-danger); }
.ct-form .invalid-feedback { margin-top: .35rem; font-size: .875rem; font-weight: 500; color: var(--ct-danger); }

.ct-consent {
    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: 12px;
}
.ct-consent.is-invalid { background: #fff6f5; border-color: #f1b3ae; }
.ct-consent .form-check { margin: 0; padding-left: 2rem; }
.ct-consent .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    margin-left: -2rem;
    border: 1.5px solid #8e9bab;
}
.ct-consent .form-check-input:checked { background-color: var(--ct-blue); border-color: var(--ct-blue); }
.ct-consent .form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(8, 98, 190, .2); }
.ct-consent .form-check-label { font-size: .925rem; line-height: 1.5; color: var(--ct-ink); }
.ct-consent a { font-weight: 600; color: var(--ct-blue-ink); text-decoration: underline; }

.ct-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ct-submit { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: 11rem; }
.ct-submit[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 575.98px) {
    .ct-submit { width: 100%; }
}

.ct-alert {
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    color: #7a1a12;
    background: #fff6f5;
    border: 1px solid #f1b3ae;
    border-radius: 12px;
}
.ct-alert:focus { outline: 3px solid rgba(180, 35, 24, .35); outline-offset: 2px; }
.ct-alert-title { display: flex; gap: .5rem; margin: 0; font-weight: 700; }
.ct-alert ul { margin: .5rem 0 0; padding-left: 1.6rem; }
.ct-alert a { font-weight: 600; color: #7a1a12; }

.ct-success { padding: clamp(1rem, 3vw, 2rem) 0; text-align: center; }
.ct-success:focus { outline: none; }
.ct-success-icon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #e2f4ea;
    color: var(--ct-wa);
    font-size: 2.25rem;
}
.ct-success h2 {
    margin: 0;
    font-family: var(--font-display, "Barlow Condensed", var(--font-sans, system-ui, sans-serif));
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: var(--ct-navy);
}
.ct-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.ct-success-actions .btn { display: inline-flex; align-items: center; gap: .5rem; }

.ct-aside { position: sticky; top: calc(var(--header-h, 72px) + 24px); display: grid; gap: 1.25rem; }
@media (max-width: 991.98px) { .ct-aside { position: static; } }
.ct-aside-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--ct-navy); }

.ct-steps { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: ct-step; }
.ct-steps li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding-left: 3.25rem;
    counter-increment: ct-step;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ct-navy);
}
.ct-steps li::before {
    content: counter(ct-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ct-navy);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}
.ct-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.4rem;
    bottom: -.75rem;
    left: calc(1.125rem - 1px);
    width: 2px;
    background: var(--ct-line);
}

.ct-urgent {
    padding: 1.35rem 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ct-navy) 0%, var(--ct-navy-2) 100%);
    border-left: 4px solid var(--ct-orange);
    border-radius: var(--ct-radius);
}
.ct-urgent h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; color: #fff; }
.ct-urgent h3 i { color: var(--ct-orange-light); }
.ct-urgent-tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-family: var(--font-display, "Barlow Condensed", var(--font-sans, system-ui, sans-serif));
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.ct-urgent-tel:hover, .ct-urgent-tel:focus-visible { color: var(--ct-orange-light); text-decoration: underline; }
.ct-urgent-tel:focus-visible { outline: 3px solid var(--ct-orange-light); outline-offset: 2px; }

.ct-hours { padding: 1.2rem 1.35rem; background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); }
.ct-hours h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--ct-navy); }
.ct-hours p { margin: 0; color: var(--ct-ink); }

/* ---------- Harita: yerel kapak, tıklanınca Google iframe'i (contact.js) ---------- */
.ct-map { position: relative; background: var(--ct-surface); }
.ct-map-frame {
    position: relative;
    height: clamp(220px, 42vw, 460px);
    overflow: hidden;
    background: #0d1b2a;
}
.ct-map-cover {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
}
.ct-map-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.85) contrast(1.05);
    transition: filter .4s ease;
}
.ct-map-frame:hover iframe,
.ct-map-frame:focus-within iframe { filter: none; }
/* Marka tonunda ince renk katmanı (tıklamayı engellemez) */
.ct-map-frame.is-loaded::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 98, 190, .08);
    pointer-events: none;
    transition: opacity .4s ease;
}
.ct-map-frame.is-loaded:hover::after,
.ct-map-frame.is-loaded:focus-within::after { opacity: 0; }
.ct-map-frame.is-loaded .ct-map-cover { display: none; }

.ct-map-inner { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.ct-map-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius);
    box-shadow: 0 18px 40px rgba(13, 27, 42, .14);
}
.ct-map-card h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 800; color: var(--ct-navy); }
.ct-map-card h2 i { color: var(--ct-orange); }
.ct-map-address { margin: 0; font-style: normal; line-height: 1.55; color: var(--ct-muted); }
.ct-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; }
.ct-map-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.ct-map-open {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 40px;
    font-weight: 700;
    color: var(--ct-blue-ink);
    text-decoration: none;
}
.ct-map-open:hover, .ct-map-open:focus-visible { text-decoration: underline; }
.ct-map-actions [data-map-load][hidden] { display: none; }

@media (min-width: 992px) {
    /* Lacivert harita lacivert footer'a yapışmasın: altta açık zeminli boşluk */
    .ct-map { padding-bottom: clamp(2.5rem, 5vw, 4rem); background: #fff; }
    .ct-map-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(220px, 42vw, 460px);   /* .ct-map-frame ile aynı */
        display: flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
    }
    .ct-map-inner .ct-map-card { max-width: 400px; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-page *, .ct-page *::before, .ct-page *::after { transition: none !important; scroll-behavior: auto !important; }
}