/* Vizymedia main.min.css için proje-özel override dosyası.
 *
 * Bu dosya, layout'ta main.min.css'ten SONRA yüklendiği için
 * buradaki :root içindeki CSS değişkenleri ve ek class tanımları
 * minify edilmiş ana tema değerlerinin üzerine yazar.
 *
 * İhtiyacına göre buraya yeni değişkenler ekleyebilir veya
 * mevcut olanların hepsini değil, sadece kontrol etmek
 * istediklerini override edebilirsin.
 */

:root {
    --_size: 1.8rem;
    --_font-default: 'Funnel Sans', sans-serif;
    --_font-accent: 'Funnel Display', sans-serif;
    --_radius-s: 1rem;
    --_radius-m: 1.6rem;
    --_radius-pt-m: 1.6rem;
    --_radius-l: 3.8rem;
    --_radius-xl: 6rem;
    --_animspeed-fast: 0.1s;
    --_animspeed-medium: 0.3s;
    --_animspeed-slow: 0.6s;
    --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);
    --base--light: #faf7f6;
    --base-rgb--light: 250, 247, 246;
    --base-tint--light: #ffffff;
    --base-shade--light: #e0dddb;
    --base-opp--light: #161616;
    --base-opp-tint--light: #1c1c1c;
    --accent--light: #9f8be7;
    --accent-rgb--light: 159, 139, 231;
    --additional--light: #ddf160;
    --additional-rgb--light: 221, 241, 96;
    --neutral-transparent--light: rgba(255, 255, 255, 0.3);
    --st-bright--light: #161616;
    --st-medium--light: #7c7c7c;
    --st-muted--light: #e0dddb;
    --st-opp-bright--light: #ffffff;
    --fw-regular--light: 400;
    --fw-medium--light: 600;
    --fw-semibold--light: 700;
    --fw-bold--light: 800;
    --fw-regular-opp--light: 300;
    --fw-medium-opp--light: 500;
    --t-bright--light: #161616;
    --t-medium--light: #303030;
    --t-muted--light: #585858;
    --t-muted-extra--light: #b2aead;
    --t-opp-bright--light: #ffffff;
    --t-opp-medium--light: #acacac;
    --t-opp-muted--light: #838383;
    --base--dark: #161616;
    --base-rgb--dark: 22, 22, 22;
    --base-tint--dark: #1c1c1c;
    --base-shade--dark: #0a0a0a;
    --base-opp--dark: #faf7f6;
    --base-opp-tint--dark: #ffffff;
    --accent--dark: #ddf160;
    --accent-rgb--dark: 221, 241, 96;
    --additional--dark: #9f8be7;
    --additional-rgb--dark: 159, 139, 231;
    --neutral-transparent--dark: rgba(0, 0, 0, 0.3);
    --st-bright--dark: #ffffff;
    --st-medium--dark: #646464;
    --st-muted--dark: #252525;
    --st-opp-bright--dark: #0f0f0f;
    --fw-regular--dark: 300;
    --fw-medium--dark: 500;
    --fw-semibold--dark: 600;
    --fw-bold--dark: 700;
    --fw-regular-opp--dark: 400;
    --fw-medium-opp--dark: 600;
    --t-bright--dark: #ffffff;
    --t-medium--dark: #acacac;
    --t-muted--dark: #838383;
    --t-muted-extra--dark: #535151;
    --t-opp-bright--dark: #161616;
    --t-opp-medium--dark: #303030;
    --t-opp-muted--dark: #969696;
    --pt-base: #ffffff;
    --pt-base-dark: #161616;
    --pt-t-light-bright: #ffffff;
    --pt-t-dark-bright: #161616;
    --pt-st-light-bright: #ffffff;
    --pt-st-dark-bright: #161616;
    --pt-purple-rgb: 159, 139, 231;
    --pt-purple-dark-rgb: 33, 10, 113;
    --nl-white: #ffffff;
    --nl-black: #000000;
}
@media only screen and (min-width: 768px) {
    :root {
        --_radius-m: 2.6rem;
        --_radius-l: 5rem;
        --_radius-xl: 8rem;
    }
}
@media only screen and (min-width: 1200px) {
    :root {
        --_radius-xl: 8rem;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --base: var(--base--light);
        --base-rgb: var(--base-rgb--light);
        --base-tint: var(--base-tint--light);
        --base-shade: var(--base-shade--light);
        --base-opp: var(--base-opp--light);
        --base-opp-tint: var(--base-opp-tint--light);
        --accent: var(--accent--light);
        --accent-rgb: var(--accent-rgb--light);
        --additional: var(--additional--light);
        --additional-rgb: var(--additional-rgb--light);
        --neutral-transparent: var(--neutral-transparent--light);
        --st-bright: var(--st-bright--light);
        --st-medium: var(--st-medium--light);
        --st-muted: var(--st-muted--light);
        --st-opp-bright: var(--st-opp-bright--light);
        --fw-regular: var(--fw-regular--light);
        --fw-medium: var(--fw-medium--light);
        --fw-semibold: var(--fw-semibold--light);
        --fw-bold: var(--fw-bold--light);
        --fw-regular-opp: var(--fw-regular-opp--light);
        --fw-medium-opp: var(--fw-medium-opp--light);
        --t-bright: var(--t-bright--light);
        --t-medium: var(--t-medium--light);
        --t-muted: var(--t-muted--light);
        --t-muted-extra: var(--t-muted-extra--light);
        --t-opp-bright: var(--t-opp-bright--light);
        --t-opp-medium: var(--t-opp-medium--light);
        --t-opp-muted: var(--t-opp-muted--light);
        --bg-demo-screen-01: var(--bg-demo-screen-01--light);
        --bg-demo-screen-02: var(--bg-demo-screen-02--light);
        --bg-demo-screen-03: var(--bg-demo-screen-03--light);
        --bg-demo-screen-04: var(--bg-demo-screen-04--light);
        --bg-demo-screen-05: var(--bg-demo-screen-05--light);
        --bg-demo-screen-06: var(--bg-demo-screen-06--light);
        --bg-demo-screen-07: var(--bg-demo-screen-07--light);
        --bg-demo-screen-08: var(--bg-demo-screen-08--light);
        --bg-demo-screen-09: var(--bg-demo-screen-09--light);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --base: var(--base--dark);
        --base-rgb: var(--base-rgb--dark);
        --base-tint: var(--base-tint--dark);
        --base-shade: var(--base-shade--dark);
        --base-opp: var(--base-opp--dark);
        --base-opp-tint: var(--base-opp-tint--dark);
        --accent: var(--accent--dark);
        --accent-rgb: var(--accent-rgb--dark);
        --additional: var(--additional--dark);
        --additional-rgb: var(--additional-rgb--dark);
        --neutral-transparent: var(--neutral-transparent--dark);
        --st-bright: var(--st-bright--dark);
        --st-medium: var(--st-medium--dark);
        --fw-semibold: var(--fw-semibold--dark);
        --st-muted: var(--st-muted--dark);
        --st-opp-bright: var(--st-opp-bright--dark);
        --fw-regular: var(--fw-regular--dark);
        --fw-medium: var(--fw-medium--dark);
        --fw-bold: var(--fw-bold--dark);
        --fw-regular-opp: var(--fw-regular-opp--dark);
        --fw-medium-opp: var(--fw-medium-opp--dark);
        --t-bright: var(--t-bright--dark);
        --t-medium: var(--t-medium--dark);
        --t-muted: var(--t-muted--dark);
        --t-muted-extra: var(--t-muted-extra--dark);
        --t-opp-bright: var(--t-opp-bright--dark);
        --t-opp-medium: var(--t-opp-medium--dark);
        --t-opp-muted: var(--t-opp-muted--dark);
        --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
        --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
        --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
        --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
        --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
        --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
        --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
        --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
        --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
    }
}
[color-scheme='light'] {
    --base: var(--base--light);
    --base-rgb: var(--base-rgb--light);
    --base-tint: var(--base-tint--light);
    --base-shade: var(--base-shade--light);
    --base-opp: var(--base-opp--light);
    --base-opp-tint: var(--base-opp-tint--light);
    --accent: var(--accent--light);
    --accent-rgb: var(--accent-rgb--light);
    --additional: var(--additional--light);
    --additional-rgb: var(--additional-rgb--light);
    --neutral-transparent: var(--neutral-transparent--light);
    --st-bright: var(--st-bright--light);
    --st-medium: var(--st-medium--light);
    --st-muted: var(--st-muted--light);
    --st-opp-bright: var(--st-opp-bright--light);
    --fw-regular: var(--fw-regular--light);
    --fw-medium: var(--fw-medium--light);
    --fw-semibold: var(--fw-semibold--light);
    --fw-bold: var(--fw-bold--light);
    --fw-regular-opp: var(--fw-regular-opp--light);
    --fw-medium-opp: var(--fw-medium-opp--light);
    --t-bright: var(--t-bright--light);
    --t-medium: var(--t-medium--light);
    --t-muted: var(--t-muted--light);
    --t-muted-extra: var(--t-muted-extra--light);
    --t-opp-bright: var(--t-opp-bright--light);
    --t-opp-medium: var(--t-opp-medium--light);
    --t-opp-muted: var(--t-opp-muted--light);
    --bg-demo-screen-01: var(--bg-demo-screen-01--light);
    --bg-demo-screen-02: var(--bg-demo-screen-02--light);
    --bg-demo-screen-03: var(--bg-demo-screen-03--light);
    --bg-demo-screen-04: var(--bg-demo-screen-04--light);
    --bg-demo-screen-05: var(--bg-demo-screen-05--light);
    --bg-demo-screen-06: var(--bg-demo-screen-06--light);
    --bg-demo-screen-07: var(--bg-demo-screen-07--light);
    --bg-demo-screen-08: var(--bg-demo-screen-08--light);
    --bg-demo-screen-09: var(--bg-demo-screen-09--light);
}
[color-scheme='dark'] {
    --base: var(--base--dark);
    --base-rgb: var(--base-rgb--dark);
    --base-tint: var(--base-tint--dark);
    --base-shade: var(--base-shade--dark);
    --base-opp: var(--base-opp--dark);
    --base-opp-tint: var(--base-opp-tint--dark);
    --accent: var(--accent--dark);
    --accent-rgb: var(--accent-rgb--dark);
    --additional: var(--additional--dark);
    --additional-rgb: var(--additional-rgb--dark);
    --neutral-transparent: var(--neutral-transparent--dark);
    --st-bright: var(--st-bright--dark);
    --st-medium: var(--st-medium--dark);
    --st-muted: var(--st-muted--dark);
    --st-opp-bright: var(--st-opp-bright--dark);
    --fw-regular: var(--fw-regular--dark);
    --fw-medium: var(--fw-medium--dark);
    --fw-semibold: var(--fw-semibold--dark);
    --fw-bold: var(--fw-bold--dark);
    --fw-regular-opp: var(--fw-regular-opp--dark);
    --fw-medium-opp: var(--fw-medium-opp--dark);
    --t-bright: var(--t-bright--dark);
    --t-medium: var(--t-medium--dark);
    --t-muted: var(--t-muted--dark);
    --t-muted-extra: var(--t-muted-extra--dark);
    --t-opp-bright: var(--t-opp-bright--dark);
    --t-opp-medium: var(--t-opp-medium--dark);
    --t-opp-muted: var(--t-opp-muted--dark);
    --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
    --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
    --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
    --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
    --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
    --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
    --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
    --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
    --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}

/* --------------------------------------------------------------
 * Main menu - inline services band
 * ----------------------------------------------------------- */

.main-menu__toggle {
    justify-content: start !important;
}

.main-menu__toggle img {
    width: 3.2rem;
    height: 3.2rem;
    margin-right: 1rem;
    transition: transform 0.3s ease-in-out;
}

.main-menu__toggle:hover img {
    transform: scale(1.1);
}

@media only screen and (min-width: 1200px) {
    .main-menu__accordion {
        gap: 1rem;
    }
}

/* --------------------------------------------------------------
 * WebOS form widget — Vizymedia tema (main.min.css) uyumu
 *
 * Tema özeti (kaynak yok; min dosyada geçen blok):
 *   .form-container, .form, .form__reply …
 *   form { position:relative;width:100% }
 *   form input, form textarea → alt çizgi, Funnel accent, 6rem yükseklik
 *   textarea yükseklikleri md breakpoint; font 1600px+
 *
 * Eksikler / riskler:
 *   - Tema "form input" dediği için checkbox/radio/file vb. de 6rem
 *     çizgi stiline çekilebilir; aşağıda tip bazlı sıfırlar var.
 *   - select tema listesinde yoktu; özel kural burada.
 *
 * Select ok: appearance:none sonrası data-URI SVG (aşağı ∨); renk odakta
 * güncellenir. Sabit height+padding+line-height select’te metin kırpması
 * yapıyordu — min-height + line-height: normal ile hizalandı.
 *
 * Profil: config/webos_form_layouts → vizymedia.
 * ----------------------------------------------------------- */

/* Checkbox, radio: tema "form input" geniş seçicisinden çıkar ---------- */

form input[type='checkbox'],
form input[type='radio'] {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    min-height: 0;
    margin: 0 0.65rem 0 0;
    padding: 0;
    vertical-align: middle;
    border: none;
    border-bottom: none;
    border-radius: 0.25rem;
    background-color: transparent;
    background-image: none;
    line-height: 1;
    font: inherit;
    color: inherit;
    cursor: pointer;
    accent-color: var(--accent);
    -webkit-appearance: auto;
    appearance: auto;
}

form input[type='radio'] {
    border-radius: 50%;
}

/* Aralık (slider) ----------------------------------------------------- */

form input[type='range'] {
    display: block;
    width: 100%;
    height: auto;
    min-height: 3.2rem;
    margin: 0;
    padding: 1.2rem 0;
    border: none;
    border-bottom: none;
    background-color: transparent;
    background-image: none;
    line-height: normal;
    font: inherit;
    color: inherit;
    cursor: pointer;
    accent-color: var(--accent);
    -webkit-appearance: auto;
    appearance: auto;
}

/* Renk seçici --------------------------------------------------------- */

form input[type='color'] {
    display: block;
    width: 100%;
    max-width: 12rem;
    height: 6rem;
    padding: 0.4rem;
    margin: 0;
    border: none;
    border-bottom: 2px solid var(--st-medium);
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

form input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
}

form input[type='color']::-webkit-color-swatch {
    border: 2px solid var(--st-medium);
    border-radius: var(--_radius-s);
}

form input[type='color']:focus {
    outline: 0;
    border-bottom-color: var(--st-bright);
}

form input[type='color']::-webkit-color-swatch:focus {
    border-color: var(--st-bright);
}

/* Dosya yükleme (modern tarayıcılar: ::file-selector-button) ---------- */

form input[type='file'] {
    display: block;
    width: 100%;
    height: auto;
    min-height: 6rem;
    margin: 0;
    padding: 1.2rem 0.2rem;
    border: none;
    border-bottom: 2px solid var(--st-medium);
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    font: normal var(--fw-regular) 1.6rem / 1.4 var(--_font-accent);
    line-height: 1.4;
    color: var(--t-medium);
    cursor: pointer;
}

form input[type='file']:focus {
    outline: 0;
    border-bottom-color: var(--st-bright);
}

form input[type='file']::file-selector-button {
    margin-inline-end: 1.2rem;
    padding: 0.8rem 1.4rem;
    border: 2px solid var(--st-medium);
    border-radius: var(--_radius-s);
    background: transparent;
    font: normal var(--fw-medium) 1.4rem / 1 var(--_font-accent);
    color: var(--t-bright);
    cursor: pointer;
}

form input[type='file']::-webkit-file-upload-button {
    margin-inline-end: 1.2rem;
    padding: 0.8rem 1.4rem;
    border: 2px solid var(--st-medium);
    border-radius: var(--_radius-s);
    background: transparent;
    font: normal var(--fw-medium) 1.4rem / 1 var(--_font-accent);
    color: var(--t-bright);
    cursor: pointer;
}

form input[type='file']::file-selector-button:hover,
form input[type='file']::-webkit-file-upload-button:hover {
    border-color: var(--st-bright);
}

/* Gömülü submit/reset (nadir); tema çizgisinden çıkar ------------------ */

form input[type='submit'],
form input[type='reset'],
form input[type='button'],
form input[type='image'] {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: inherit;
    border: none;
    border-bottom: none;
    background: transparent;
    background-image: none;
    font: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}

/* Tarih/saat — native ikon; çizgi temayla kalır (form input), hafif uyum */

form input[type='date']::-webkit-calendar-picker-indicator,
form input[type='time']::-webkit-calendar-picker-indicator,
form input[type='datetime-local']::-webkit-calendar-picker-indicator,
form input[type='month']::-webkit-calendar-picker-indicator,
form input[type='week']::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.65;
}

form input[type='date']:focus::-webkit-calendar-picker-indicator,
form input[type='time']:focus::-webkit-calendar-picker-indicator,
form input[type='datetime-local']:focus::-webkit-calendar-picker-indicator,
form input[type='month']:focus::-webkit-calendar-picker-indicator,
form input[type='week']:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Select — çizgi alanlarla aynı dil; ok = küçük SVG (aşağı yön, yeterli boy) */

form select {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    outline: 0;
    margin: 0;
    padding: 1.2rem 2.8rem 1.2rem 0.2rem;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237c7c7c' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.15rem center;
    background-size: 1.35rem 1.35rem;
    border-bottom: 2px solid var(--st-medium);
    font: normal var(--fw-regular) 2.2rem / 1.35 var(--_font-accent);
    min-height: 6rem;
    height: auto;
    line-height: 1.35;
    color: var(--t-bright);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

form select:focus {
    border-bottom-color: var(--st-bright);
    /* Açık zemin: koyu ok (--t-bright light ≈ #161616) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23161616' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    form select:focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    }
}

html[color-scheme='dark'] form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

html[color-scheme='light'] form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23161616' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

form select:invalid {
    color: var(--t-muted);
}

form select:focus:required:invalid {
    color: var(--t-bright);
}

form select:required:valid {
    color: var(--t-bright);
}

form select option {
    background-color: var(--base);
    color: var(--t-bright);
}

@media only screen and (min-width: 1600px) {
    form select {
        font-size: 2.2rem;
    }
}

/*
.main-menu {
    width: 100%;
}

.main-menu__content {
    width: 100%;
}

.mxd-menu__left {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    align-items: flex-start;
    justify-content: space-between;
}

.mxd-menu__right {
    padding: 4rem;
}

.mxd-menu__caption {
    margin-bottom: 2.4rem;
}

.main-menu__link {
    font-size: 4.5rem;
    height: 5.625rem;
    line-height: 5.625rem;
}

.main-menu__subsections {
    width: 100%;
}

@media (min-width: 1200px) {
    .main-menu__accordion {
        gap: 0;
    }

    .main-menu__subsections ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.4rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .main-menu__subsections ul li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-weight: inherit;
        font-style: inherit;
        font-size: 3.6rem;
        height: 4.5rem;
        line-height: 4.5rem;
        text-decoration: none;
        white-space: nowrap;
    }
}

@media only screen and (min-width: 1600px) {
    .menu-promo {
        padding: 0 4rem;
    }

    .menu-promo__content {
        padding: 0 4rem;
    }
}
*/

/* --------------------------------------------------------------
 * Ana sayfa — referanslar bölümü öncesi parallax şeridi
 * (mxd-divider + parallax-img; yükseklik marquee/grid geçişine nefes verir)
 * ----------------------------------------------------------- */
/* 

.mxd-home-testimonials-parallax {
    min-height: 14rem;
    border-radius: var(--_radius-l);
    overflow: hidden;
}

@media only screen and (min-width: 768px) {
    .mxd-home-testimonials-parallax {
        min-height: 22rem;
    }
}
*/

/* --------------------------------------------------------------
 * Hizmetler sayfasi
 * Rayo services-list omurgasini koruyup Vizymedia icin daha temiz
 * bir tipografik ritim ve daha kontrollu tag/CTA yogunlugu saglar.
 * ----------------------------------------------------------- */

.vizy-services-page .hover-reveal__image {
    object-fit: contain;
    padding: 2rem;
}

/*
 * Ana sayfa hero services stack (showcase-inner): dal landing yuvarlak link sağ üst.
 * İçerik dalı (justify-between) tema ile hizalı; showcase-inner için konum netleştirilir.
 */
.mxd-hero-02-stack .mxd-services-stack__inner.showcase-inner {
    position: relative;
}

.mxd-hero-02-stack
    .mxd-services-stack__inner.showcase-inner
    .mxd-services-stack__controls {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* --------------------------------------------------------------
 * Service branch pages
 * Root accent now follows branch primary color. Landing and form
 * screens get extra spacing plus a lightweight parallax divider.
 * ----------------------------------------------------------- */

.vizy-branch-page__lead .mxd-block__name {
    padding-right: 3rem;
}

.vizy-branch-page__lead .mxd-point-subtitle {
    margin-bottom: 2.2rem;
}

.vizy-branch-page__lead .mxd-block__inner-headline {
    max-width: 100%;
}

.vizy-branch-page__summary {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 72rem;
}

.vizy-branch-page__lead .mxd-paragraph__controls {
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 1.4rem;
}

/*
 * Dal parallax şeridi — Rayo: boş .mxd-divider__image + background-image + cover.
 * Logo PNG’yi <img> ile bu banda koyup max-height: 12rem vermek cover alanını öldürüyordu.
 */
.vizy-branch-divider .mxd-divider__image.vizy-branch-divider__band {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vizy-branch-form-screen__lead {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 72rem;
    margin-bottom: 3.2rem;
}

.vizy-branch-form-screen__panels,
.vizy-branch-form-cta__widgets {
    display: grid;
    gap: 2rem;
}

.vizy-branch-form-screen__panel,
.vizy-branch-form-cta__widget {
    padding: 2.4rem;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: var(--_radius-l);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.03)),
        var(--base-tint);
    box-shadow: 0 1.6rem 3.6rem rgba(var(--base-rgb), 0.08);
}

.vizy-branch-form-screen__panel-header,
.vizy-branch-form-cta__widget-title {
    margin-bottom: 1.8rem;
}

.vizy-branch-form-screen__empty {
    max-width: 54rem;
}

.vizy-branch-form-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.vizy-branch-form-screen__panel .form-container,
.vizy-branch-form-cta__widget .form-container {
    margin-top: 0;
}

@media only screen and (min-width: 768px) {
    .vizy-branch-form-screen__lead {
        margin-bottom: 4.2rem;
    }

    .vizy-branch-form-screen__panel,
    .vizy-branch-form-cta__widget {
        padding: 3rem;
    }
}

@media only screen and (min-width: 1200px) {
    .vizy-branch-page__summary {
        gap: 2.4rem;
    }

    .vizy-branch-form-screen__panels,
    .vizy-branch-form-cta__widgets {
        gap: 2.6rem;
    }

    .vizy-branch-form-screen__panel,
    .vizy-branch-form-cta__widget {
        padding: 3.6rem;
    }
}
