/* ==========================================================================
   OTOES — Kurumsal Tasarım Sistemi (oe-)

   Yükleme sırası: tos.css → bc.css → oe.css
   Kabuk (üst bar, header, menü, çekmece, footer) ile yeniden yazılan
   sayfalar (anasayfa, hakkımızda, iletişim) oe- bileşenlerini kullanır.
   Henüz yeniden yazılmayan sayfalar (değerleme hunisi, rehber, yasal
   sayfalar) bc-/tos- bileşenlerinde kalır; onların tokenları aşağıda
   OTOES paletine eşlenir, böylece eski marka rengi hiçbir yerde görünmez.

   Palet logodan ölçüldü (images/genel/logo-179261172433.png):
     bakır #9B6A7E · grafit #0D1B2A
   Kontrast (WCAG):
     beyaz / #9B6A7E  4.57 → buton dolgusu (AA)
     #7F5468 / beyaz  6.05 → açık zeminde bakır metin
     #E4AFB1 / #0D1B2A 8.6 → koyu zeminde bakır metin
   ========================================================================== */

:root {
    --oe-ink:      #0D1B2A;   /* grafit — başlık, koyu zemin */
    --oe-ink-2:    #13253A;   /* koyu kart */
    --oe-ink-3:    #1F3550;   /* koyu çizgi / hover */

    --oe-cu:       #9B6A7E;   /* logo bakırı */
    --oe-cu-hov:   #7F5468;
    --oe-cu-ink:   #7F5468;   /* açık zeminde metin */
    --oe-cu-lt:    #E4AFB1;   /* koyu zeminde metin */
    --oe-cu-wash:  #F7EEF1;
    --oe-cu-wash-2:#EBD8DF;

    --oe-body:     #3F4756;
    --oe-muted:    #667085;
    --oe-line:     #E3E6EE;
    --oe-line-2:   #CDD3DF;
    --oe-sand:     #F6F7FA;   /* yumuşak bölüm zemini */
    --oe-white:    #FFFFFF;

    --oe-ok:  #1E8E4E;
    --oe-err: #C4321F;
    --oe-wa:  #25D366;

    --oe-max: 1240px;
    --oe-r-sm: 3px;
    --oe-r:    6px;
    --oe-r-lg: 10px;

    --oe-sh-sm: 0 1px 3px rgba(13, 27, 42, .08);
    --oe-sh:    0 18px 40px -18px rgba(13, 27, 42, .28);
    --oe-sh-lg: 0 40px 80px -30px rgba(13, 27, 42, .45);

    --oe-ease: cubic-bezier(.22, .8, .24, 1);
    --oe-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --oe-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

    /* --- eski bc-/tos- tokenlarının OTOES paletine eşlenmesi ----------- */
    --bc-navy: var(--oe-ink);
    --bc-navy-2: #0A1522;
    --bc-navy-3: var(--oe-ink-3);
    --bc-blue: var(--oe-cu);
    --bc-blue-btn: var(--oe-cu);
    --bc-blue-hov: var(--oe-cu-hov);
    --bc-blue-ink: var(--oe-cu-ink);
    --bc-blue-lt: var(--oe-cu-lt);
    --bc-blue-wash: var(--oe-cu-wash);
    --bc-blue-wash-2: var(--oe-cu-wash-2);
    --bc-ink: var(--oe-ink);
    --bc-body: var(--oe-body);
    --bc-muted: var(--oe-muted);
    --bc-line: var(--oe-line);
    --bc-line-2: var(--oe-line-2);
    --bc-surface: var(--oe-sand);
    --bc-r-sm: var(--oe-r-sm);
    --bc-r: var(--oe-r);
    --bc-r-lg: var(--oe-r-lg);
    --bc-r-xl: var(--oe-r-lg);
    --bc-sh-xs: var(--oe-sh-sm);
    --bc-sh-sm: var(--oe-sh-sm);
    --bc-sh: var(--oe-sh);
    --bc-sh-lg: var(--oe-sh-lg);
    --bc-sh-blue: 0 14px 30px -12px rgba(155, 106, 126, .55);
    --bc-font: var(--oe-font);

    --tos-green: var(--oe-ink);
    --tos-green-2: #0A1522;
    --tos-green-3: var(--oe-ink-3);
    --tos-green-wash: var(--oe-cu-wash);
    --tos-acc: var(--oe-cu);
    --tos-acc-2: var(--oe-cu);
    --tos-acc-ink: var(--oe-cu-ink);
    --tos-acc-lt: var(--oe-cu-lt);
    --tos-acc-wash: var(--oe-cu-wash);
    --tos-ink: var(--oe-ink);
    --tos-body: var(--oe-body);
    --tos-muted: var(--oe-muted);
    --tos-line: var(--oe-line);
    --tos-surface: var(--oe-sand);
    --tos-r: var(--oe-r);
    --tos-r-lg: var(--oe-r-lg);
    --tos-r-btn: var(--oe-r-sm);
}

/* ------------------------------------------------------------------ temel */

html { scroll-behavior: smooth; }

body.oe {
    font-family: var(--oe-font);
    font-size: 16px;
    color: var(--oe-body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.oe ::selection { background: var(--oe-cu); color: #fff; }
.oe :focus-visible { outline: 3px solid rgba(155, 106, 126, .5); outline-offset: 2px; }
.oe img { max-width: 100%; }
:where(.oe) :where(img[height]) { height: auto; }

:where(.oe) :where(h1, h2, h3, h4, h5) {
    font-family: var(--oe-font);
    font-weight: 700;
    color: var(--oe-ink);
    letter-spacing: -.015em;
}

.oe a { transition: color .2s, background-color .2s, border-color .2s; }

.oe-wrap {
    width: 100%;
    max-width: var(--oe-max);
    margin: 0 auto;
    padding: 0 24px;
}

.oe-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.oe-sr:focus {
    position: fixed !important;
    z-index: 999;
    top: 8px; left: 8px;
    width: auto; height: auto;
    clip: auto;
    padding: 10px 16px;
    background: var(--oe-ink);
    color: #fff;
}

/* ------------------------------------------------------------- tipografi */

/* Üst etiket — logodaki eğik çizgiyi taşıyan kısa bakır şerit */
.oe-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--oe-cond);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--oe-cu-ink);
    line-height: 1;
}

.oe-kicker::before {
    content: "";
    width: 26px;
    height: 4px;
    background: var(--oe-cu);
    transform: skewX(-28deg);
}

.oe-kicker--lt { color: var(--oe-cu-lt); }

.oe .oe-h1 {
    margin: 0;
    font-size: clamp(36px, 5.2vw, 62px);
    line-height: 1.04;
    letter-spacing: -.025em;
}

.oe .oe-h2 {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
}

.oe .oe-h3 { margin: 0; font-size: 21px; line-height: 1.25; }

.oe-h1 em, .oe-h2 em { font-style: normal; color: var(--oe-cu); }

.oe-lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--oe-body);
}

.oe-head { max-width: 680px; margin-bottom: 48px; }
.oe-head .oe-h2 { margin-top: 16px; }
.oe-head .oe-lead { margin-top: 16px; }
.oe-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.oe-head--center .oe-kicker { justify-content: center; }

.oe-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    max-width: none;
}

.oe-head--split > div { max-width: 640px; }

/* ----------------------------------------------------------------- buton */

.oe-btn {
    --b-bg: var(--oe-ink);
    --b-fg: #fff;
    --b-bd: var(--b-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1.5px solid var(--b-bd);
    border-radius: var(--oe-r-sm);
    background: var(--b-bg);
    color: var(--b-fg) !important;
    font-family: var(--oe-cond);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s, transform .2s var(--oe-ease), box-shadow .2s;
}

.oe-btn i { font-size: .85em; transition: transform .25s var(--oe-ease); }
.oe-btn:hover i.fa-arrow-right { transform: translateX(4px); }
.oe-btn:active { transform: translateY(1px); }

.oe-btn--cu   { --b-bg: var(--oe-cu); }
.oe-btn--cu:hover { --b-bg: var(--oe-cu-hov); box-shadow: 0 14px 28px -14px rgba(155, 106, 126, .8); }
.oe-btn--ink:hover { --b-bg: #000; }
.oe-btn--line { --b-bg: transparent; --b-fg: var(--oe-ink); --b-bd: var(--oe-line-2); }
.oe-btn--line:hover { --b-bd: var(--oe-ink); }
.oe-btn--ghost { --b-bg: rgba(255, 255, 255, .06); --b-fg: #fff; --b-bd: rgba(255, 255, 255, .35); }
.oe-btn--ghost:hover { --b-bg: #fff; --b-fg: var(--oe-ink); --b-bd: #fff; }
.oe-btn--wa { --b-bg: var(--oe-wa); --b-fg: #0B3B1E; }
.oe-btn--wa:hover { --b-bg: #1FBE5B; }
.oe-btn--lg { min-height: 58px; padding: 0 32px; font-size: 17px; }
.oe-btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.oe-btn--block { width: 100%; }

/* metin bağlantısı */
.oe-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--oe-cond);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--oe-ink) !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--oe-cu);
    padding-bottom: 4px;
}

.oe-link:hover { color: var(--oe-cu-ink) !important; }

/* ================================================================= HEADER */

.oe-hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--oe-line);
    transition: box-shadow .3s;
}

.oe-hdr.is-stuck { box-shadow: 0 10px 30px -18px rgba(13, 27, 42, .35); }

.oe-hdr__in {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 84px;
}

.oe-logo { display: block; flex-shrink: 0; line-height: 0; }
.oe-logo img { display: block; width: auto; height: 34px; }

/* --- masaüstü menü --- */
.oe-nav { margin-left: auto; }

.oe-nav__list {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oe-nav__item { position: relative; }

.oe-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 84px;
    padding: 0 16px;
    font-family: var(--oe-cond);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--oe-ink) !important;
    text-decoration: none !important;
    background: none;
    border: 0;
    cursor: pointer;
}

.oe-nav__link i { font-size: 10px; color: var(--oe-muted); transition: transform .25s; }

/* aktif / hover: alttan eğik bakır çizgi */
.oe-nav__link::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: -1px;
    height: 3px;
    background: var(--oe-cu);
    transform: scaleX(0) skewX(-28deg);
    transform-origin: left;
    transition: transform .3s var(--oe-ease);
}

.oe-nav__item:hover > .oe-nav__link::after,
.oe-nav__item.is-active > .oe-nav__link::after { transform: scaleX(1) skewX(-28deg); }

.oe-nav__item.is-active > .oe-nav__link { color: var(--oe-cu-ink) !important; }

/* --- açılır alt menü --- */
.oe-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 290px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--oe-line);
    border-top: 3px solid var(--oe-cu);
    box-shadow: var(--oe-sh);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s, transform .22s var(--oe-ease), visibility .22s;
}

.oe-nav__item:hover > .oe-sub,
.oe-nav__item:focus-within > .oe-sub,
.oe-nav__item.is-open > .oe-sub { opacity: 1; visibility: visible; transform: none; }

.oe-nav__item:hover > .oe-nav__link i,
.oe-nav__item.is-open > .oe-nav__link i { transform: rotate(180deg); }

.oe-sub a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--oe-r-sm);
    color: var(--oe-ink) !important;
    text-decoration: none !important;
}

.oe-sub a:hover { background: var(--oe-sand); }
.oe-sub a:hover .oe-sub__ico { background: var(--oe-cu); color: #fff; }

.oe-sub__ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: var(--oe-r-sm);
    background: var(--oe-cu-wash);
    color: var(--oe-cu-ink);
    font-size: 15px;
    transition: background .2s, color .2s;
}

.oe-sub b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.oe-sub small { display: block; margin-top: 2px; font-size: 13px; color: var(--oe-muted); line-height: 1.4; }

/* --- sağ eylemler --- */
.oe-hdr__act { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.oe-hdr__tel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 6px;
    color: var(--oe-ink) !important;
    text-decoration: none !important;
}

.oe-hdr__tel-ico {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1.5px solid var(--oe-line-2);
    border-radius: 50%;
    color: var(--oe-cu);
    transition: background .2s, color .2s, border-color .2s;
}

.oe-hdr__tel:hover .oe-hdr__tel-ico { background: var(--oe-cu); border-color: var(--oe-cu); color: #fff; }
.oe-hdr__tel small { display: block; font-size: 12px; color: var(--oe-muted); line-height: 1.2; }
.oe-hdr__tel b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap; }

/* --- hamburger --- */
.oe-burger {
    display: none;
    position: relative;
    width: 48px; height: 48px;
    padding: 0;
    border: 1.5px solid var(--oe-line-2);
    border-radius: var(--oe-r-sm);
    background: #fff;
    cursor: pointer;
}

.oe-burger span {
    position: absolute;
    left: 13px;
    width: 20px; height: 2px;
    background: var(--oe-ink);
    transition: transform .3s var(--oe-ease), opacity .2s, width .3s;
}

.oe-burger span:nth-child(1) { top: 16px; }
.oe-burger span:nth-child(2) { top: 22px; width: 14px; }
.oe-burger span:nth-child(3) { top: 28px; }
.oe-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.oe-burger.is-open span:nth-child(2) { opacity: 0; }
.oe-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ========================================================= MOBİL ÇEKMECE */

.oe-drw { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.oe-drw.is-open { visibility: visible; }

.oe-drw__veil {
    position: absolute; inset: 0;
    background: rgba(15, 12, 10, .6);
    opacity: 0;
    transition: opacity .3s;
}

.oe-drw.is-open .oe-drw__veil { opacity: 1; }

.oe-drw__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    background: var(--oe-ink);
    color: #fff;
    transform: translateX(100%);
    transition: transform .4s var(--oe-ease);
    overflow-y: auto;
}

.oe-drw.is-open .oe-drw__panel { transform: none; }

.oe-drw__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid var(--oe-ink-3);
}

.oe-drw__top img { height: 28px; width: auto; }

.oe-drw__close {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--oe-ink-3);
    border-radius: var(--oe-r-sm);
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.oe-drw__list { margin: 0; padding: 12px 24px; list-style: none; }
.oe-drw__list > li { border-bottom: 1px solid var(--oe-ink-3); }

.oe-drw__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    border: 0;
    background: none;
    color: #fff !important;
    font-family: var(--oe-cond);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    text-decoration: none !important;
    cursor: pointer;
    text-align: left;
}

.oe-drw__link i { font-size: 13px; color: var(--oe-cu-lt); transition: transform .25s; }
.oe-drw__list > li.is-active > .oe-drw__link { color: var(--oe-cu-lt) !important; }
.oe-drw__list > li.is-open > .oe-drw__link i { transform: rotate(180deg); }

.oe-drw__sub {
    display: none;
    margin: -6px 0 14px;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 2px solid var(--oe-cu);
}

.oe-drw__list > li.is-open .oe-drw__sub { display: block; }

.oe-drw__sub a {
    display: block;
    padding: 9px 0;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 16px;
    text-decoration: none !important;
}

.oe-drw__sub a:hover { color: #fff !important; }

.oe-drw__foot {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid var(--oe-ink-3);
}

.oe-drw__info {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
}

.oe-drw__info li { display: flex; gap: 10px; padding: 4px 0; }
.oe-drw__info i { width: 14px; margin-top: 4px; color: var(--oe-cu-lt); font-size: 12px; }

/* ============================================================ BÖLÜMLER */

.oe-sec { padding: 110px 0; }
.oe-sec--sand { background: var(--oe-sand); }
.oe-sec--dark { background: var(--oe-ink); color: rgba(255, 255, 255, .72); }
.oe-sec--dark :where(h1, h2, h3, h4) { color: #fff; }
.oe-sec--dark .oe-lead { color: rgba(255, 255, 255, .72); }
.oe-sec--tight { padding: 80px 0; }

/* --- iç sayfa başlığı (hakkımızda, iletişim ...) --- */
.oe-phero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 88px;
    background: var(--oe-ink) var(--oe-foto, none) center / cover no-repeat;
    color: rgba(255, 255, 255, .78);
    isolation: isolate;
}

.oe-phero::before {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(13, 27, 42, .94) 0%, rgba(13, 27, 42, .78) 45%, rgba(13, 27, 42, .35) 100%);
}

/* sağ altta logodan alınmış eğik bakır şeritler */
.oe-phero::after {
    content: "";
    position: absolute;
    right: -40px; bottom: 0;
    width: 340px; height: 10px;
    background: repeating-linear-gradient(90deg, var(--oe-cu) 0 120px, transparent 120px 140px);
    transform: skewX(-28deg);
}

.oe-phero .oe-h1 { color: #fff; max-width: 760px; margin-top: 18px; }
.oe-phero .oe-lead { max-width: 620px; margin-top: 18px; color: rgba(255, 255, 255, .78); }

.oe-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.oe-crumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.oe-crumb a:hover { color: #fff; }
.oe-crumb i { font-size: 9px; color: var(--oe-cu-lt); }
.oe-crumb [aria-current] { color: #fff; font-weight: 600; }

/* --- form alanı (değerleme kartı, iletişim formu) --- */
.oe-fld {
    position: relative;
    display: block;
    padding: 12px 16px 10px;
    background: #fff;
    border: 1.5px solid var(--oe-line);
    border-radius: var(--oe-r-sm);
    transition: border-color .2s, box-shadow .2s;
    min-width: 0;
}

.oe-fld:hover { border-color: var(--oe-line-2); }

.oe-fld:focus-within,
.oe-fld:has(.tos-ss.is-open) {
    border-color: var(--oe-cu);
    box-shadow: 0 0 0 3px rgba(155, 106, 126, .14);
}

.oe .oe-fld__lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 3px;
    font-family: var(--oe-cond);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--oe-muted);
}

.oe-fld__lbl i { color: var(--oe-cu); font-size: 12px; }

/* Yalnızca alanın kendi girişi — tos-select açılır listesindeki arama
   kutusu (.tos-ss__search input) kendi iç boşluğunu korumalı */
.oe-fld > input,
.oe-fld > textarea,
.oe-fld > select {
    display: block;
    width: 100%;
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--oe-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--oe-ink);
    resize: vertical;
}

.oe-fld > input::placeholder,
.oe-fld > textarea::placeholder { color: #959CAA; font-weight: 400; }

.oe-fld .tos-ss__btn { padding: 0; min-height: 28px; font-size: 17px; font-weight: 600; color: var(--oe-ink); }
.oe-fld .tos-ss.is-empty .tos-ss__btn { color: #959CAA; font-weight: 500; }
.oe-fld .tos-ss__pop { left: -18px; right: -18px; top: calc(100% + 12px); border-radius: var(--oe-r-sm); }
.oe-fld.is-filled .oe-fld__lbl { color: var(--oe-cu-ink); }
.oe-fld.is-locked { opacity: .55; }
.oe-fld.is-locked .tos-ss__btn { cursor: not-allowed; }

.oe-fld__spin {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    display: none;
    color: var(--oe-cu);
}

.oe-fld.is-loading .oe-fld__spin { display: block; }
.oe-fld.is-loading .tos-ss__car { visibility: hidden; }
.oe-fld:has(.tos-ss.is-hata) { border-color: var(--oe-err); background: #FDF3F1; }

/* --- SSS akordiyonu --- */
.oe-faq { border-top: 1px solid var(--oe-line); }
.oe-q { border-bottom: 1px solid var(--oe-line); }

.oe-q__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px 0;
    border: 0;
    background: none;
    text-align: left;
    font-family: var(--oe-font);
    font-size: 18.5px;
    font-weight: 600;
    color: var(--oe-ink);
    cursor: pointer;
}

.oe-q__btn:hover { color: var(--oe-cu-ink); }

.oe-q__ico {
    position: relative;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border: 1.5px solid var(--oe-line-2);
    border-radius: 50%;
    transition: background .2s, border-color .2s, transform .3s var(--oe-ease);
}

.oe-q__ico::before,
.oe-q__ico::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 2px;
    margin: -1px 0 0 -6px;
    background: var(--oe-ink);
    transition: transform .3s var(--oe-ease), background .2s;
}

.oe-q__ico::after { transform: rotate(90deg); }
.oe-q.is-open .oe-q__ico { background: var(--oe-cu); border-color: var(--oe-cu); }
.oe-q.is-open .oe-q__ico::before,
.oe-q.is-open .oe-q__ico::after { background: #fff; }
.oe-q.is-open .oe-q__ico::after { transform: rotate(0); }

.oe-q__body { max-height: 0; overflow: hidden; transition: max-height .35s var(--oe-ease); }
.oe-q__body p { margin: 0; padding: 0 60px 26px 0; font-size: 16.5px; line-height: 1.7; }

/* --- görünür olunca beliren öğeler --- */
[data-oe-in] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--oe-ease), transform .7s var(--oe-ease);
    transition-delay: var(--oe-gecikme, 0s);
}

[data-oe-in].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-oe-in] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ================================================================= FOOTER */

.oe-ftr { background: var(--oe-ink); color: rgba(255, 255, 255, .66); font-size: 15px; }

/* üstte tam genişlik değerleme çağrısı */
.oe-ftr__cta {
    position: relative;
    overflow: hidden;
    background: var(--oe-cu);
    color: #fff;
}

.oe-ftr__cta::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 22%;
    width: 46%;
    background: rgba(0, 0, 0, .1);
    transform: skewX(-28deg);
}

.oe-ftr__cta-in {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    padding: 46px 0;
}

.oe .oe-ftr__cta h2 { margin: 0; color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; }
.oe-ftr__cta p { margin: 8px 0 0; color: rgba(255, 255, 255, .9); font-size: 17px; }
.oe-ftr__cta-act { display: flex; flex-wrap: wrap; gap: 12px; }

.oe-ftr__main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 48px;
    padding: 80px 0 64px;
}

.oe-ftr__logo img { height: 32px; width: auto; }
.oe-ftr__desc { margin: 22px 0 26px; line-height: 1.7; max-width: 340px; }

.oe .oe-ftr__title {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 14px;
    font-family: var(--oe-cond);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    color: #fff;
}

.oe-ftr__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 24px; height: 3px;
    background: var(--oe-cu);
    transform: skewX(-28deg);
}

.oe-ftr__links { margin: 0; padding: 0; list-style: none; }
.oe-ftr__links li + li { margin-top: 11px; }
.oe-ftr__links a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.oe-ftr__links a:hover { color: var(--oe-cu-lt); }

.oe-ftr__contact { margin: 0; padding: 0; list-style: none; }
.oe-ftr__contact li { display: flex; gap: 14px; line-height: 1.55; }
.oe-ftr__contact li + li { margin-top: 16px; }
.oe-ftr__contact i { flex-shrink: 0; width: 16px; margin-top: 4px; color: var(--oe-cu-lt); text-align: center; }
.oe-ftr__contact a { color: #fff; text-decoration: none; }
.oe-ftr__contact a:hover { color: var(--oe-cu-lt); }
.oe-ftr__contact small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .5); letter-spacing: .04em; }

.oe-social { display: flex; gap: 8px; }

.oe-social a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--oe-ink-3);
    border-radius: var(--oe-r-sm);
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.oe-social a:hover { background: var(--oe-cu); border-color: var(--oe-cu); color: #fff; }

.oe-ftr__bar { border-top: 1px solid var(--oe-ink-3); font-size: 13.5px; }

.oe-ftr__bar-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 22px 0;
}

.oe-ftr__bar p { margin: 0; }
.oe-ftr__bar a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.oe-ftr__bar a:hover { color: var(--oe-cu-lt); }

.oe-ftr__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }

/* --- sabit WhatsApp --- */
.oe-wa-fab {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--oe-wa);
    color: #fff !important;
    font-size: 28px;
    text-decoration: none !important;
    box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7);
    transition: transform .25s var(--oe-ease);
}

.oe-wa-fab:hover { transform: scale(1.07); }

/* ============================================================ DUYARLI */

@media (max-width: 1199px) {
    .oe-hdr__tel { display: none; }
    .oe-nav__link { padding: 0 12px; font-size: 15.5px; }
    .oe-nav__link::after { left: 12px; right: 12px; }
    .oe-ftr__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
    .oe-nav { display: none; }
    .oe-burger { display: block; }
    .oe-hdr__act { margin-left: auto; }
    .oe-hdr__in { min-height: 72px; }
    .oe-logo img { height: 28px; }
    .oe-sec { padding: 80px 0; }
    .oe-head { margin-bottom: 36px; }
    .oe-head--split { flex-direction: column; align-items: flex-start; }
    .oe-ftr__cta-in { flex-direction: column; align-items: flex-start; }
    .oe-phero { padding: 64px 0 60px; }
}

@media (max-width: 575px) {
    .oe-wrap { padding: 0 18px; }
    .oe-hdr__cta { display: none; }
    .oe-sec { padding: 64px 0; }
    .oe-lead { font-size: 16.5px; }
    .oe-ftr__main { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 44px; }
    .oe-ftr__bar-in { flex-direction: column; align-items: flex-start; }
    .oe-q__btn { font-size: 16.5px; padding: 20px 0; }
    .oe-q__body p { padding-right: 0; }
    .oe-btn--lg { min-height: 54px; padding: 0 24px; }
    .oe-wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; font-size: 26px; }
}

/* Eski katman (tos-scope) p/span/address rengini koyu metne sabitliyor;
   koyu zeminli OTOES bileşenlerinde zemin rengine göre geri al */
.oe .oe-ftr p, .oe .oe-ftr span, .oe .oe-ftr li,
.oe .oe-phero p, .oe .oe-sec--dark p, .oe .oe-sec--dark li,
.oe .oe-drw p, .oe .oe-drw span { color: inherit; }
.oe .oe-ftr__desc { color: rgba(255, 255, 255, .66); }
.oe .oe-ftr__contact span { color: rgba(255, 255, 255, .78); }
.oe .oe-ftr__contact small { color: rgba(255, 255, 255, .5); }
.oe .oe-ftr__bar p { color: rgba(255, 255, 255, .55); }
.oe .oe-ftr__cta p { color: rgba(255, 255, 255, .92); }

/* ==========================================================================
   OTOTRIO marka katmani (2026-11-12)
   Logo paleti: gul kurusu #E4AFB1 / #AC7C8A -> mor #8F7083 / #6C576A
   -> lacivert #1B3F5C / #0C2C44. Birincil buton logodaki gecisi tasir.
   ========================================================================== */
.oe {
    --oe-grad: linear-gradient(115deg, #B5808F 0%, #8F7083 38%, #3E5A78 72%, #1B3F5C 100%);
}
.oe-btn--cu {
    background-image: var(--oe-grad);
    background-size: 160% 100%;
    background-position: 0 0;
    border-color: transparent;
    transition: background-position .4s var(--oe-ease), box-shadow .25s var(--oe-ease), transform .2s;
}
.oe-btn--cu:hover { background-position: 100% 0; box-shadow: 0 14px 28px -14px rgba(27, 63, 92, .75); }

/* Logo yatay (araba + yazi) — 4:1 oran, biraz daha yuksek gosterilir */
.oe-logo img { height: 44px; }
.oe-drw__top img { height: 34px; }
.oe-ftr__logo img { height: 42px; }
@media (max-width: 991px) {
    .oe-logo img { height: 36px; }
}

/* Footer ustu cagri bandi: logodaki gul kurusu -> lacivert gecisi */
.oe-ftr__cta { background: var(--oe-grad); }