/*
 * ============================================================================
 * LEGACY KATMANI
 * ============================================================================
 *
 * Bu dosyanın tamamı `@layer legacy` içinde.
 *
 * NEDEN: Dosya daha önce katmansızdı. CSS cascade kuralı gereği katmansız
 * kurallar, `@layer utilities` içindeki Tailwind sınıflarını HER ZAMAN yener
 * (spesifiklikten bağımsız). Bu yüzden örneğin `.trust-strip article` üzerine
 * `bg-white/60` eklemek hiçbir etki göstermiyordu; utility ancak `!` ile
 * çalışıyordu.
 *
 * Katman sırası `resources/css/app.css` içinde tanımlı:
 *     @layer theme, base, components, utilities;
 *
 * `legacy` bu listede yok, dolayısıyla listede olmayan katmanlar EN SONA
 * eklenir ve en yüksek önceliği alır. Yani site.css kendi içinde hâlâ her
 * şeyi yener (mevcut görünüm birebir korunur), ama Tailwind utility'leri
 * site.css'ten sonra geldiği için artık Tailwind sınıfları kazanır.
 *
 * Ayrıntı: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
 */

/*
 * Katman sırası BURADA sabitleniyor.
 *
 * Neden burada: katman sırası, bir katmanın ilk kez bildirildiği yerde
 * kilitlenir. Sırayı yalnızca `app.css`'e bırakırsak sonuç, iki dosyanın
 * hangi sırayla yüklendiğine bağlı kalır — Vite/Sail/CDN arasında sıra
 * değişirse görünüm sessizce bozulur. Burada açıkça yazarak `legacy`'yi
 * `utilities`'ten ÖNCE konumlandırıyoruz: Tailwind sınıfları her koşulda
 * kazanır, site.css kendi içinde kendi kurallarını korur.
 *
 * `app.css` de aynı dörtlüyü bildiriyor; zaten var olan katmanlara
 * değinmek sırayı değiştirmez, sadece isim çözümlemesi yapar.
 */
@layer theme, base, components, legacy, utilities;

@layer legacy {
:root {
    --paper: #ffffff;
    --paper-2: #f3f6ff;
    --card: #ffffff;
    --card-lift: #f7f9ff;
    --ink: #0f1c3a;
    --muted: #5a6a85;
    --line: #e2e8f4;
    --soft-line: #c9d8ff;
    --bar: #eef3ff;
    --logo-plate: #ffffff;
    --flag-alt-bg: #eef2f8;
    --danger-bg: #f6eceb;
    --danger-line: #e3cfcb;
    --brand: #2b6bff;
    --brand-soft: #e8efff;
    --brand-dark: #1a54e8;
    --danger: #c23b4a;
    --radius: 10px;
    --display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
    --max: 1200px;
    --pad: clamp(1.25rem, 4vw, 2.75rem);
}

* { box-sizing: border-box; }
/* color-scheme kullanılmıyor: tema geçişinde tarayıcı perde animasyonunu iptal ediyor */
html { scroll-behavior: smooth; }
html, body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}
body { min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

/*
 * Atlama bağlantısı (erişilebilirlik).
 *
 * `position: fixed`: `body` statik olduğu için `absolute` çocuk, kardeş
 * akış öğelerinin offset hesabına giriyor ve header'ı ~25px aşağı iterek
 * sayfanın en üstünde beyaz bir şerit bırakıyordu (ölçüldü: header
 * offsetTop 25). `fixed` hiçbir akış hesabına katılmaz.
 * `clip` tekniği elemanı sıfır boyutlu noktaya indirir; klavye odağı
 * alınca `:focus` ile görünür hâle gelir.
 */
.skip {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    top: 0;
    left: 0;
}
.skip:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    left: var(--pad);
    top: .5rem;
    z-index: 40;
    background: var(--brand);
    color: #fff;
    padding: .4rem .7rem;
}

.wrap {
    width: min(var(--max), calc(100% - 2 * var(--pad)));
    margin-inline: auto;
}

.util {
    background: linear-gradient(90deg, #1d4ed8 0%, #1e3a8a 48%, #1e40af 100%);
    color: #e8efff;
    font-size: .78rem;
    letter-spacing: .02em;
}
.util-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .42rem 0;
    flex-wrap: wrap;
}
.util-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    min-width: 0;
}
.util-badge {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-radius: 999px;
    padding: .08rem .48rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(255, 255, 255, .28);
}
.util a:hover { color: #fff; }
.util-links { display: flex; gap: 1.25rem; align-items: center; }
.util-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    white-space: nowrap;
}
.util-call span {
    display: inline-block;
    transition: transform .2s ease;
}
.util-call:hover span { transform: translateX(4px); }
/*
 * Mobil: üst şerit tek satıra sıkışıyordu.
 *
 * Ölçüm (390px): `.util-note` 259px + `.util-links` 80px + 11px boşluk =
 * 350px — tam sığıyor. Ama 11.5px'lik metin 6 satıra kırılıyor ve şerit
 * 118px yükseğe çıkıyordu; sticky header'ın yarısı bu şerit oluyordu.
 * Şeridin tek işi "geliştirme aşamasında" bilgisini duyurmak; telefonda
 * iki satıra inmesi yeterli, "Sizi arayalım" bağlantısı zaten hero'da ve
 * menüde duruyor.
 */
@media (max-width: 900px) {
    .util-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem .6rem;
        padding: .4rem 0;
    }
    /*
     * Şerit tek satır: metin kırılmak yerine kırpılıyor.
     * Ölçüm (375px): badge 103px + metin 225px + "Sizi arayalım" 68px =
     * 396px, sığmıyordu. Metin `nowrap` + üç nokta; paragrafın tamamı
     * zaten aynı bilgiyi sayfanın gövdesinde ve footer'da taşıyor.
     */
    .util-note {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
    }
    .util-note > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.4;
    }
    .util-links { margin-left: auto; flex-shrink: 0; gap: .8rem; }
    .util-call span { display: none; }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(226, 232, 244, .8);
    background: transparent;
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Blur yok: backdrop-filter, header'a gecen mega menu panelini bulaniklastiriyordu. */
    background: rgba(255, 255, 255, .96);
}
html.dark .site-header { border-bottom-color: rgba(51, 65, 85, .8); }
html.dark .site-header::before { background: rgba(15, 23, 42, .96); }
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 1.05rem 0;
}
.nav-tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
}
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: var(--ink);
    border-radius: .85rem;
    padding: 0;
    transition: border-color .2s ease, background .2s ease;
}
.theme-toggle:hover { border-color: #cbd5e1; background: #f8fafc; color: var(--ink); }
html.dark .theme-toggle { border-color: #334155; background: transparent; }
html.dark .theme-toggle:hover { border-color: #475569; background: #1e293b; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }

/* Tema geçişi: çapraz açılan perde (View Transitions) */
::view-transition-group(theme-toggle-icon) {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
html.dark::view-transition-old(root) {
    z-index: 2;
    animation: theme-reveal-old .7s cubic-bezier(.8, 0, .2, 1) forwards;
}
html.dark::view-transition-new(root) { z-index: 1; }
html:not(.dark)::view-transition-old(root) { z-index: 1; }
html:not(.dark)::view-transition-new(root) {
    z-index: 2;
    animation: theme-reveal-new .7s cubic-bezier(.8, 0, .2, 1) forwards;
}
@keyframes theme-reveal-old {
    0% { clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); }
    70% { clip-path: polygon(0% 98%, 0% 100%, 100% 2%, 100% 0%); }
    100% { clip-path: polygon(0% 100%, 0% 100%, 100% 0%, 100% 0%); }
}
@keyframes theme-reveal-new {
    0% { clip-path: polygon(0% 100%, 0% 100%, 100% 0%, 100% 0%); }
    30% { clip-path: polygon(0% 98%, 0% 100%, 100% 2%, 100% 0%); }
    100% { clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); }
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.brand-mark {
    height: 40px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.brand-word {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.72rem;
    letter-spacing: -.055em;
    line-height: 1;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
}
.brand-dot { color: var(--brand); }
.brand-tld {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: -.03em;
}
.site-footer .brand {
    margin-bottom: .7rem;
}
.site-footer .brand-mark { height: 38px; }
.menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 0;
}
.menu-ico,
.menu-ico::before,
.menu-ico::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    position: relative;
    transition: transform .3s ease, top .3s ease, background .2s ease;
}
.menu-ico::before,
.menu-ico::after {
    content: "";
    position: absolute;
    left: 0;
}
.menu-ico::before { top: -6px; }
.menu-ico::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-ico { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-ico::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico::after { top: 0; transform: rotate(-45deg); }
.nav-backdrop { display: none; }
/* Mobil drawer ve z-index haritasi:
   backdrop 60 · header 80 · drawer 90 · canli destek 40
    Accilirken hicbir sabit widget drawer'in ustune cikmaz. */
/* Drawer basligi yalnizca mobil drawer icindir. Masaustunde header'in
   icinde bos bir kutu olarak kalmasin: varsayilan kapali, mobilde acilir. */
.nav-drawer-head { display: none; }
.site-nav {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin-left: auto;
}
.mega-bar { display: flex; align-items: center; gap: .1rem; }
.mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 650;
    font-size: .95rem;
    padding: .5rem .85rem;
    border-radius: .6rem;
    transition: background .2s ease, color .2s ease;
}
.mega-trigger svg {
    width: .85rem;
    height: .85rem;
    transition: transform .3s ease;
}
.mega-trigger.is-on svg,
.mega-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega-trigger:hover,
.mega-trigger.is-on,
.mega-trigger.is-active { background: rgba(241, 245, 249, .8); }
.mega-trigger.is-on,
.mega-trigger.is-active { color: var(--brand); }
html.dark .mega-trigger:hover,
html.dark .mega-trigger.is-on,
html.dark .mega-trigger.is-active { background: rgba(30, 41, 59, .8); }
.nav-account {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: .65rem;
    font-weight: 600;
}
.nav-account form { margin: 0; }
.nav-account button.linkish {
    background: none;
    border: 0;
    color: var(--muted);
    padding: .5rem .75rem;
    border-radius: .6rem;
    font-weight: 600;
}
.nav-login {
    color: #334155;
    font-weight: 600;
    padding: .5rem .75rem;
    border-radius: .6rem;
    transition: color .2s ease, background .2s ease;
}
.nav-login:hover { color: var(--brand); background: #f1f5f9; }
html.dark .nav-login { color: #e2e8f0; }
html.dark .nav-login:hover { background: #1e293b; }
.nav-account .btn-nav {
    background: linear-gradient(90deg, #2563eb, #2b6bff);
    border-color: transparent;
    border-radius: .85rem;
    padding: .62rem 1.15rem;
    box-shadow: 0 8px 18px -8px rgba(43, 107, 255, .45);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-account .btn-nav:hover {
    background: linear-gradient(90deg, #1d4ed8, #1d4ed8);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 24px -10px rgba(43, 107, 255, .5);
}
.mega-panel {
    position: fixed;
    top: var(--header-bottom, 7.2rem);
    left: 50%;
    width: min(72rem, calc(100vw - 2rem));
    padding-top: .4rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
    /* Yalnizca 2B transform: translateX/translateY. scale/translate3d kullanilmaz,
       aksi halde tarayicilar paneli ve altindaki icerigi yeniden ornekleyip
       acilis sirasinda bulanik (blurry) gorunum olusturur. */
    transform: translateX(-50%) translateY(10px);
    transition:
        opacity .24s ease-out,
        transform .3s cubic-bezier(.22, .9, .24, 1),
        visibility .3s;
}
.mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Panel kapanirken daha hizli cekilir: acilis .3s, kapanis .16s. */
.mega-panel:not(.is-open) {
    transition:
        opacity .14s ease-in,
        transform .16s ease-in,
        visibility .16s;
}
.mega-sheet {
    background: #fff;
    border: 1px solid rgba(226, 232, 244, .9);
    border-radius: 1.15rem;
    box-shadow: 0 28px 70px -28px rgba(15, 28, 58, .18);
    overflow: hidden;
}
/* Acilista sayfa yumusak bicimde "yerine oturur": hafif yukari kayma.
   Not: scale/filter yok; altpiksel yeniden ornekleme bulanikliga yol acar. */
.mega-panel.is-open .mega-sheet {
    animation: mega-sheet-in .34s cubic-bezier(.22, .9, .24, 1) both;
}
@keyframes mega-sheet-in {
    from {
        opacity: .7;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
html.dark .mega-panel.is-open .mega-sheet {
    animation-name: mega-sheet-in;
}
html.dark .mega-sheet {
    background: #10182b;
    border-color: #243152;
    box-shadow: 0 28px 70px -24px rgba(0, 0, 0, .65);
}
.mega-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(15.5rem, 18.5rem);
    gap: .4rem 1.1rem;
    padding: 1.15rem 1.15rem .35rem;
    align-items: start;
}
/* Stagger: her sutun sirayla, link'ler kendi icinde kisa bir gecikmeyle gelir. */
.mega-panel.is-open .mega-layout > * {
    animation: mega-col-in .44s cubic-bezier(.22, .9, .24, 1) both;
}
.mega-panel.is-open .mega-layout > *:nth-child(1) { animation-delay: .04s; }
.mega-panel.is-open .mega-layout > *:nth-child(2) { animation-delay: .1s; }
.mega-panel.is-open .mega-layout > *:nth-child(3) { animation-delay: .16s; }
.mega-panel.is-open .mega-layout > *:nth-child(4) { animation-delay: .22s; }
.mega-panel.is-open .mega-layout > *:nth-child(n + 5) { animation-delay: .26s; }
@keyframes mega-col-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Kicker basligi once, ardindan link'ler hafif bir yay egrisiyle acilir. */
.mega-panel.is-open .mega-link {
    animation: mega-link-in .42s cubic-bezier(.22, .9, .24, 1) both;
}
.mega-panel.is-open .mega-link:nth-of-type(1) { animation-delay: .12s; }
.mega-panel.is-open .mega-link:nth-of-type(2) { animation-delay: .17s; }
.mega-panel.is-open .mega-link:nth-of-type(3) { animation-delay: .22s; }
.mega-panel.is-open .mega-link:nth-of-type(n + 4) { animation-delay: .26s; }
@keyframes mega-link-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Ikon kutulari hafifce belirir: canli ama abartisiz.
   scale yok: SVG ikonlar kesirli olcekte bulanik cizilir. */
.mega-panel.is-open .mega-ico {
    animation: mega-ico-in .42s cubic-bezier(.2, .9, .3, 1) both;
}
.mega-panel.is-open .mega-link:nth-of-type(1) .mega-ico { animation-delay: .14s; }
.mega-panel.is-open .mega-link:nth-of-type(2) .mega-ico { animation-delay: .2s; }
.mega-panel.is-open .mega-link:nth-of-type(3) .mega-ico { animation-delay: .26s; }
.mega-panel.is-open .mega-link:nth-of-type(n + 4) .mega-ico { animation-delay: .3s; }
@keyframes mega-ico-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Alt hizli baglanti seridi en son yerlesir. */
.mega-panel.is-open .mega-quick {
    animation: mega-quick-in .42s cubic-bezier(.22, .9, .24, 1) both;
    animation-delay: .3s;
}
@keyframes mega-quick-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.mega-layout.is-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(15.5rem, 18.5rem);
}
.mega-kicker {
    display: block;
    margin: 0 0 .7rem;
    padding: 0 .75rem;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mega-link {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .75rem;
    border-radius: .85rem;
    border: 0;
    transition: background .2s ease;
}
.mega-ico {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: rgba(43, 107, 255, .1);
    color: #2b6bff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mega-ico svg { width: 1.15rem; height: 1.15rem; display: block; }
.mega-copy { min-width: 0; flex: 1; }
.mega-link strong {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    letter-spacing: -.02em;
    color: #0f172a;
    transition: color .2s ease;
}
html.dark .mega-link strong { color: #f8fafc; }
.mega-badge {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px;
    padding: .1rem .45rem;
}
.mega-badge.is-hot { background: #fef3c7; color: #b45309; }
.mega-badge.is-count { background: #dbeafe; color: #1d4ed8; }
.mega-copy > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .15rem;
    color: #64748b;
    font-size: .75rem;
    line-height: 1.45;
}
html.dark .mega-copy > span { color: #94a3b8; }
.mega-go {
    margin-left: auto;
    align-self: center;
    color: var(--brand);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .2s ease;
}
.mega-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
    min-height: 100%;
    padding: 1.35rem;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 46%, #1e3a8a 100%);
}
.mega-card::before,
.mega-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    filter: blur(18px);
    pointer-events: none;
}
.mega-card::before { width: 8rem; height: 8rem; top: -2.4rem; right: -2rem; }
.mega-card::after { width: 7rem; height: 7rem; bottom: -2.2rem; left: -1.4rem; }
.mega-card > * { position: relative; z-index: 1; }
.mega-card-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0;
    padding: .28rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .15);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.mega-card strong {
    font-family: var(--display);
    font-size: 1.28rem;
    letter-spacing: -.03em;
    line-height: 1.2;
}
.mega-card p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .9rem; }
.mega-card .btn {
    width: 100%;
    margin-top: .85rem;
    background: #fff;
    color: #1d4ed8;
    border-color: #fff;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mega-card .btn span { transition: transform .2s ease; }
.mega-card .btn:hover {
    background: #eff6ff;
    border-color: #eff6ff;
    color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .45);
}
.mega-card .btn:hover span { transform: translateX(4px); }
.mega-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem 1rem;
    margin: .35rem 0 0;
    padding: .7rem 1.15rem;
    border-top: 1px solid #f1f5f9;
    background: rgba(248, 250, 252, .8);
    font-size: .75rem;
}
html.dark .mega-quick {
    border-top-color: #243152;
    background: rgba(15, 23, 42, .45);
}
.mega-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
}
.mega-quick span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.mega-quick a { font-weight: 600; color: #475569; font-size: .75rem; }
html.dark .mega-quick a { color: #cbd5e1; }
.mega-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: #475569;
    font-size: .75rem;
    font-weight: 600;
}
html.dark .mega-status { color: #94a3b8; }
.mega-status i {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
    animation: pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot {
    70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    padding: .85rem 1.2rem;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: -.01em;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-small { padding: .5rem .9rem; font-size: .82rem; }
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-pine {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.btn-pine:hover { background: #1546c9; }
.btn[disabled], .btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.hero-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(3rem, 7vw, 5.5rem) 0 4rem;
}
.hero-split.is-solo {
    grid-template-columns: minmax(0, 40rem);
    justify-content: center;
}
.hero-split.is-solo .hero-copy { text-align: center; }
.hero-split.is-solo h1 { max-width: 22ch; }
.hero-split.is-solo h1,
.hero-split.is-solo .eyebrow,
.hero-split.is-solo .lede { margin-inline: auto; }
.hero-split.is-solo .hero-copy .lede { text-align: center; }
.hero-split.is-solo .hero-actions { justify-content: center; }
.eyebrow {
    margin: 0 0 .9rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
}
h1, h2, h3, .serif { font-family: var(--display); font-weight: 650; letter-spacing: -.04em; }
.hero-split h1 {
    font-size: clamp(2.35rem, 5vw, 3.7rem);
    line-height: 1.18;
    margin: 0 0 1.15rem;
    max-width: 16ch;
    overflow: visible;
    letter-spacing: -.045em;
}
/*
 * Hero başlığında vurgu kelimesi: marka mavisi → indigo degrade.
 * `-webkit-text-fill-color` desteklenmezse `color` yedeği okunur kalır.
 * Tek eklenen görsel değişiklik bu — buton, kart ve hover kuralları
 * committ'teki hâliyle duruyor.
 */
/*
 * "fark yarat" vurgusu.
 *
 * Renk, "Siz uyurken siteniz satışa devam etsin" başlığındaki
 * `.night-rotator-word` gradyanıyla AYNI: camgöbeği → mavi → koyu Zeoks
 * mavisi. Koyu zemin için tasarlanmış üç durak açık zeminde de okunuyor
 * çünkü en açık durak (#00befa) bile beyaz üstünde 2.4:1 kontrast veriyor
 * ve hemen ardından #0086f9 / #2426f4'e iniyor.
 *
 * 95deg (neredeyse dikey) içeriğin üstten alta soldan sağa doğru akmasını
 * sağlıyor; 90deg yatayda koyu durak kelimenin sonuna sıkışıyordu.
 */
.hero-gradient {
    background-image: linear-gradient(160deg, #00befa 0%, #0086f9 46%, #2426f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0086f9;
}
/* "Sektörde fark yarat" 16ch'ye sığmıyor; hero başlığı tam genişlikte
   tek satırda kalsın diye gevşetiliyor. */
.hero-split.is-solo h1 { max-width: 24ch; }

/*
 * Işık Akışları (data streams) — hero arka planı.
 *
 * `isolation: isolate` şart: canvas z-index:-1 taşıyor. Hero kendi yığın
 * bağlamını kurmazsa negatif katman, body'nin liquid-ambient katmanıyla
 * aynı düzleme düşüp header'ın altına kayıyor. İzolasyonla canvas hero'nun
 * içinde, yazının arkasında kalıyor.
 *
 * Mask canvas'ın üstünde, HTML'de değil: tarayıcı maskeyi boyama aşamasında
 * uyguladığı için alt kenarda ekstra bir DOM katmanı oluşmuyor.
 */
.hero-streams {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero-streams-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, rgba(0, 0, 0, .55) 62%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 32%, rgba(0, 0, 0, .55) 62%, transparent 92%);
}

/*
 * Metin koruması: ışık çizgileri başlığın arkasından geçtiğinde kontrast
 * düşüyordu (ölçüldü: metin bölgesinde %4,25 doygun mavi, yan bölgede %0).
 * Çözüm canvas'ı kısmak değil, yazının arkasına yumuşak bir "ışık kalkanı"
 * koymak: çizgiler kenarlarda canlı kalıyor, harflerin arkasında soluyor.
 *
 * `backdrop-filter` yok — o özellik her karede GPU'ya ekstra katman bindiriyor.
 * Bunun yerine ebeveynin renk tonunda yarı saydam bir radyal gradyan:
 * maliyeti sıfıra yakın, tarayıcı bunu sayfa boyamasında tek geçişte çiziyor.
 */
.hero-streams .hero-copy {
    position: relative;
}
/*
 * Kalkanın boyutu ÖLÇÜLEREK küçültüldü.
 *
 * Eski değer `inset: -8% -14%` idi: kalkan kapsayıcı bloğun (350px geniş,
 * 347px yüksek) %14'ü kadar yana, %8'i kadar yukarı/aşağı taşıyordu. Telefonda
 * bu, 448×402px'lik bir beyaz leke demek — canvas'ın kendisi 350×462px.
 * Yani kalkan canvas'ın neredeyse tamamını %88 opak beyazla örtüyor, "Işık
 * Akışları" ekranda görünmüyordu (kullanıcı bildirimi).
 *
 * Yeni değerler yalnızca yazının durduğu bloğu sarıyor: kenarlarda ~7% pay
 * kalıyor, o pay da radyal gradyanın kendi sönümüne denk geliyor. Çizgiler
 * yazının sağ/sol yanında ve üstünde görünür kalıyor.
 */
.hero-streams .hero-copy::before {
    content: "";
    position: absolute;
    inset: -4% -6%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(56% 58% at 50% 48%, rgba(247, 250, 255, .86) 0%, rgba(247, 250, 255, .52) 50%, rgba(247, 250, 255, 0) 74%);
}
html.dark .hero-streams .hero-copy::before {
    background: radial-gradient(56% 58% at 50% 48%, rgba(10, 17, 32, .88) 0%, rgba(10, 17, 32, .52) 50%, rgba(10, 17, 32, 0) 74%);
}
/* Yüksek kontrast tercih edenlerde çizgiler zayıf kalıyor; kanvas JS bunu
   okuyup opaklığı artırıyor. Hareket azaltma tercihinde canvas tamamen
   kapanıyor: hero metni zaten statik, animasyon opsiyonel süs. */
@media (prefers-reduced-motion: reduce) {
    .hero-streams-canvas { display: none; }
}
/* Koyu tema: aynı üçlü, açık durak korunup orta durak bir tık yukarı çekiliyor
   çünkü koyu zeminde #2426f4 morumsu kalmadan kaybolur. */
html.dark .hero-gradient {
    background-image: linear-gradient(160deg, #38d2ff 0%, #2a9bff 48%, #4056ff 100%);
    color: #2a9bff;
}
.lede {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    max-width: 36rem;
}
.hero-copy .lede {
    max-width: 28rem;
    text-align: left;
    text-wrap: balance;
}
.hero-sale {
    display: block;
    line-height: inherit;
    padding: 0 .18em 0 0;
    background-image: linear-gradient(90deg, #0066ff 0%, #0003ff 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}
.hero-flip {
    --flip-h: 1.22em;
    display: inline-grid;
    vertical-align: -0.08em;
    line-height: var(--flip-h);
}
.hero-flip-sizer {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
    line-height: inherit;
    padding: 0 .18em 0 0;
}
.hero-flip-viewport {
    grid-area: 1 / 1;
    height: var(--flip-h);
    overflow-x: clip;
    overflow-y: hidden;
}
.hero-flip-scene {
    display: block;
    transform: translateY(0);
    transition: transform .7s cubic-bezier(.22, .7, .18, 1);
}
.hero-flip-face {
    display: flex;
    align-items: baseline;
    height: var(--flip-h);
    line-height: inherit;
}
.hero-actions { display: flex; gap: .7rem; margin-top: 1.8rem; flex-wrap: wrap; }

.page-hero { padding: 3.4rem 0 2.2rem; max-width: 40rem; }
.page-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.02;
    margin: 0 0 .8rem;
}
.section { padding: 0 0 4.5rem; }
.night-sale {
    background:
        radial-gradient(ellipse 42% 70% at 88% 12%, rgba(43, 107, 255, .38), transparent 62%),
        linear-gradient(165deg, #0c1733, #16306e 58%, #0f1c3a);
    color: #fff;
    padding: 4.4rem 0;
    margin: 0 0 4.5rem;
}
.steps-band {
    background:
        radial-gradient(ellipse 42% 70% at 88% 12%, rgba(43, 107, 255, .38), transparent 62%),
        linear-gradient(165deg, #0c1733, #16306e 58%, #0f1c3a);
    color: #fff;
    padding: 4.4rem 0;
    margin: 0 0 4.5rem;
}
.steps-band .section-head {
    max-width: none;
    width: 100%;
}
.steps-band .section-head h2 {
    white-space: nowrap;
    font-size: clamp(0.95rem, 2.2vw, 2.5rem);
}
.steps-band h2 { color: #fff; }
.steps-band .muted { color: #d5def0; }
.steps-band .step,
.steps-band .step h3 { color: var(--ink); }
.steps-band .steps-track::before {
    top: 50%;
    transform: translateY(-50%);
}
.night-sale-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(16rem, .9fr);
    gap: clamp(2rem, 5vw, 4.2rem);
    align-items: center;
}
.night-sale .eyebrow { color: #b9cbff; }
.night-sale h2 {
    color: #fff;
    font-size: clamp(2.15rem, 4.4vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -.045em;
    margin: 0 0 1rem;
    max-width: none;
}
.night-lead {
    display: grid;
    width: 100%;
}
.night-rotator-sizer,
.night-rotator-live {
    grid-area: 1 / 1;
    align-self: start;
    max-width: 100%;
}
.night-rotator-sizer { visibility: hidden; }
.night-rotator-word {
    display: inline-block;
    background-image: linear-gradient(180deg, #00befa 0%, #0086f9 46%, #2426f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: opacity .32s ease;
}
.night-rotator-word.is-out,
.night-rotator-word.is-in {
    opacity: 0;
}
.night-rotator-word.is-in {
    transition: none;
}
.night-rest {
    display: block;
    max-width: 14ch;
    margin-top: .12em;
}
.night-sale .lede {
    color: #d5def0;
    font-size: 1.08rem;
    line-height: 1.65;
    max-width: 34rem;
    margin: 0 0 1.4rem;
}
.night-steps {
    margin: 0;
    padding: 1.45rem 1.35rem 1.4rem;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .55);
    text-align: center;
}
.night-step-icons {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
}
.night-step-icons::before {
    content: "";
    position: absolute;
    left: calc(16.666% + 1.15rem);
    right: calc(16.666% + 1.15rem);
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: #e4eaf8;
    transform: translateY(-50%);
}
.night-step-btn {
    position: relative;
    z-index: 1;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 1px solid #e6e9f4;
    border-radius: 18px;
    background: #f4f7ff;
    color: #5a6a85;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        background .55s cubic-bezier(.4, 0, .2, 1),
        color .55s cubic-bezier(.4, 0, .2, 1),
        border-color .55s cubic-bezier(.4, 0, .2, 1),
        box-shadow .55s cubic-bezier(.4, 0, .2, 1);
}
.night-step-btn svg {
    display: block;
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.night-step-btn.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 12px 28px -18px rgba(43, 107, 255, .85);
}
.night-step-btn::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 26px;
    background: radial-gradient(circle, rgba(43, 107, 255, .2) 0%, rgba(43, 107, 255, .05) 52%, transparent 72%);
    opacity: 0;
    transform: scale(1);
    transition: opacity .7s ease;
    pointer-events: none;
    z-index: -1;
}
.night-step-btn.is-on::after {
    opacity: 1;
    animation: night-step-ring 5.6s ease-in-out infinite;
}
.night-step-stage {
    display: grid;
    align-items: center;
    justify-items: center;
    margin-top: 1.2rem;
    min-height: 4.8rem;
}
.night-step-panel {
    grid-area: 1 / 1;
    width: min(100%, 18rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity .34s ease, visibility 0s linear .34s;
}
.night-step-panel.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .46s ease .3s, visibility 0s linear 0s;
}
.night-step-panel strong {
    display: block;
    color: var(--ink);
    font-size: 1.05rem;
}
.night-step-panel p {
    margin: .28rem 0 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
}
@keyframes night-step-ring {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}
@media (max-width: 900px) {
    .night-sale-grid { grid-template-columns: 1fr; }
    .night-sale h2 { max-width: none; }
}
.logo-belt-before { padding-bottom: 1.85rem; }
/*
 * Liquid Glass logo kemeri.
 *
 * SORUN (kullanıcı bildirimi): eski hâli `background: var(--paper)` ile
 * TAMAMEN OPAK beyazdı. Ambient orblar bu bölgeye ulaşsa bile bant onları
 * kesiyor, "renk efekti logo kemerine gelince bozulmuş" gibi görünüyordu.
 *
 * ÇÖZÜM: kemer artık cam bir şerit. Arkasında gradyan renk akıyor, logolar
 * o gradyanın ÜSTÜNDE duruyor (kullanıcı isteği: "gradyan renkli logo
 * şeridinin arkasından geçir" — yani renk logoların gerisinde kalıyor).
 *
 * `isolation: isolate` kemeri kendi katman grubuna alıyor: `::before`
 * (gradyan) `z-index: -1` ile yalnızca kemerin içinde arkada kalıyor,
 * sayfanın geri kalanına sızmıyor.
 */
.logo-belt {
    position: relative;
    display: grid;
    gap: 1.35rem;
    padding: .35rem 0 3.4rem;
    background: transparent;
    overflow: hidden;
    isolation: isolate;
}
/*
 * Gradyan şerit — logoların ARKASINDA (z-index: -1, isolate sayesinde
 * kemerin dışına taşmıyor).
 *
 * ÖLÇÜMLE DÜZELTİLDİ (scripts/column-profile.php):
 * Önceki sürümde katmanın maskesi yoktu; kemer 136px boyunca düz boyalı bir
 * dikdörtgen gibi duruyordu. Ölçüm: kemerin hemen üstü luma 212, içi 180 —
 * 32 puanlık sert sıçrama. Ham sayfa yüzeyinde aynı geçiş 219 → 212, yani
 * yumuşak. Görünen "bariz renk farkı" bu iki hatanın toplamıydı:
 *   1) `z-index` ile sınırlı ama MASKESİZ katman → keskin üst/alt kenar
 *   2) %34'e kadar çıkan renk yükü + `saturate(130%)` → bandı çevresinden
 *      belirgin biçimde koyulaştırıyordu
 *
 * Çözüm:
 *   - Dikey maske: katman üstte ve altta sıfıra iniyor, sert kenar yok.
 *   - Renk yükü %16'ya indirildi: gradyan hâlâ okunuyor, ama kemer artık
 *     sayfanın geri kalanından kopuk bir blok gibi görünmüyor.
 *   - `backdrop-filter` kaldırıldı. Arkada zaten blur'lu ambient orblar var;
 *     ikinci bir blur/saturate katmanı sadece koyulaştırıyordu.
 */
.logo-belt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--brand) 16%, transparent) 0%,
            color-mix(in srgb, var(--brand) 10%, transparent) 12%,
            color-mix(in srgb, #7fd8e8 5%, transparent) 30%,
            color-mix(in srgb, #7fd8e8 3%, transparent) 45%,
            transparent 58%,
            color-mix(in srgb, #c7b6ff 3%, transparent) 68%,
            color-mix(in srgb, #c7b6ff 8%, transparent) 84%,
            color-mix(in srgb, #c7b6ff 16%, transparent) 100%
        );
    /*
     * Dikey yumuşama. `px` cinsinden yazıldı çünkü kemerin padding'i
     * simetrik değil (üst .35rem, alt 3.4rem): yüzde kullanınca üst
     * geçiş logoların üstüne biniyordu. 28px üst / 52px alt, logoların
     * durduğu bandı tamamen berrak bırakıyor.
     */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 52px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 52px), transparent 100%);
}
/*
 * Koyu tema: renk şeridi KAPALI.
 *
 * Sebep: koyu zeminde bu yarı saydam gradyan, logoların arkasında düzensiz
 * bir "leke" gibi okunuyordu — kullanıcı geri bildirimi "logo şeridi dark
 * temada çok kötü duruyor, arkaları şeffaf olsun". Burada katman tamamen
 * kaldırılıyor: arka plan yok, logolar doğrudan sayfanın kendi koyu
 * zemininde duruyor.
 */
html.dark .logo-belt::before {
    background: none;
    mask-image: none;
    -webkit-mask-image: none;
}
.logo-belt-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-belt-track {
    display: flex;
    width: max-content;
    animation: logo-belt-left 56s linear infinite;
    will-change: transform;
}
.logo-belt-row.is-reverse .logo-belt-track {
    animation-name: logo-belt-right;
    animation-duration: 64s;
}
.logo-belt:hover .logo-belt-track { animation-play-state: paused; }
.logo-belt-set {
    display: flex;
    align-items: center;
    gap: clamp(2.4rem, 4.2vw, 3.8rem);
    padding-inline-end: clamp(2.4rem, 4.2vw, 3.8rem);
    flex: none;
}
.logo-belt-link {
    display: flex;
    align-items: center;
    flex: none;
    line-height: 0;
    border-radius: 8px;
}
.logo-belt-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 6px;
}
.logo-belt img {
    display: block;
    /*
     * 1.7rem → 1.95rem: ölçümde logolar 27px yüksekliğe sıkışıyordu.
     * 1.95rem (31px) kaynak çözünürlüklere daha yakın; harf detayları
     * (ör. Garanti BBVA) okunur hale geliyor.
     *
     * `image-rendering` BİLEREK ayarlanmadı: `-webkit-optimize-contrast`
     * aşağı ölçeklemede kenar yumuşatmayı kapatıp tırtıklı (aliased) bir
     * görüntü üretiyor. Logolar büyük kaynaklardan küçültüldüğü için
     * tarayıcının yüksek kaliteli yeniden örneklemesi daha net sonuç veriyor.
     */
    height: 1.95rem;
    width: auto;
    max-width: none;
    flex: none;
    object-fit: contain;
    opacity: 1;
    transition: opacity .5s cubic-bezier(.22, .82, .28, 1);
}
.logo-belt-link:hover img,
.logo-belt-link:focus-visible img {
    opacity: 1;
}
/*
 * Koyu temada logo şeridi.
 *
 * KURAL: logonun arkasında hiçbir şey yok. Ne plaka, ne çip, ne hale.
 * Yalnızca logonun kendi pikselleri görünür; alfa kanalı dışındaki her
 * alan sayfanın kendi koyu zeminidir.
 *
 * KALDIRILANLAR (ve neden):
 *   1) `--logo-plate` (#f4f6fb) dolu plaka → kemer "beyaz etiketler dizisi"
 *      gibi görünüyordu.
 *   2) Üç kademeli `drop-shadow` (1px + 8px + 22px) → logonun çevresine
 *      bulanık bir hale yayıyordu.
 *   3) Dört yönlü 1px beyaz `drop-shadow` kontur → ince harflerin (örn.
 *      Trendyol, idefix) üstüne taşıp logoyu neon/soluk gösteriyordu.
 *
 * `filter` bu yüzden hiç verilmiyor: her `drop-shadow` alfa kanalını
 * takip etse de sonuçta logonun siluetinin DIŞINA beyaz piksel basıyor
 * ve "etrafında beyaz çizgi" olarak okunuyor. Şeffaflık isteği ile
 * kontur isteği aynı anda karşılanamaz; şeffaflık kazanıyor.
 *
 * RENK: `invert` / `brightness` de yok. Marka renkleri (Trendyol
 * turuncusu, Sürat kırmızısı, PayTR mavisi) kendi doğru tonlarında kalır.
 */
html.dark .logo-belt-link {
    background: transparent;
    box-shadow: none;
    border: 0;
}
html.dark .logo-belt img {
    opacity: 1;
    filter: none;
}
/*
 * Cam üstünde "arkadan geçiyor" hissi.
 *
 * Blend mode KULLANILMIYOR: `multiply`/`screen` marka renklerini kaydırıyor
 * (PayTR kırmızısı, Trendyol turuncusu bozuluyordu). Derinlik hissi
 * yukarıdaki gradyan katmanından geliyor; logolar kendi doğru renklerinde
 * kalıyor.
 *
 * `opacity` 1: eski .92 değeri logoları zemine karıştırıp bulanık
 * gösteriyordu — "HD olsun" isteğinin karşılığı tam opak çizim.
 */
.logo-belt img {
    opacity: 1;
}
.logo-belt-link:hover img,
.logo-belt-link:focus-visible img {
    opacity: 1;
    filter: none;
}

/*
 * Hover yalnızca opaklıkla oynuyor; hiçbir temada filtre eklemiyor.
 * Koyu tema için ayrı bir hover kuralı YOK — eskiden burada beyaz kontur
 * geri geliyordu ve kullanıcı "etrafında beyaz çizgiler" diye görüyordu.
 * `html.dark` seçicisi bilerek yazılmıyor ki kontur bir daha sızmasın.
 */
@keyframes logo-belt-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@keyframes logo-belt-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

/*
 * Entegrasyon sayfalarında başlığın üstündeki marka logosu.
 * Arka plan, çerçeve veya gölge yok: logo sayfanın kendi zemininde,
 * şeffaf biçimde durur. Yükseklik her firmada aynı kutu yüksekliğine oturur,
 * genişlik logonun kendi oranından gelir; böylece kare rozetler de uzun
 * yazı markaları da aynı ritimde okunur.
 */
.integ-brand {
    --integ-brand-height: 6.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.6rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.integ-brand img {
    display: block;
    width: auto;
    height: var(--integ-brand-height);
    max-width: min(24rem, 88%);
    object-fit: contain;
}
@media (max-width: 900px) {
    .integ-brand { --integ-brand-height: 5.25rem; margin-bottom: 1.35rem; }
}
@media (max-width: 560px) {
    .integ-brand { --integ-brand-height: 4.25rem; margin-bottom: 1.15rem; }
    .integ-brand img { max-width: 82%; }
}
.section-start { padding-top: 4.2rem; }
.stack-gap { margin-top: 1rem; }
.link-row { margin-top: .8rem; }
.section-head { margin-bottom: 1.8rem; max-width: 36rem; }
.section-head h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0 0 .5rem;
    line-height: 1.1;
}
.muted { color: var(--muted); }

.frame-wrap { position: relative; }
.frame-wrap::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.frame {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.frame-bar {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--line);
    background: var(--bar);
}
.dots { display: flex; gap: .3rem; }
.dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b7c9f0;
    display: block;
}
.frame-url {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: .72rem;
    color: var(--muted);
    padding: .28rem .6rem;
}
.mini-store { background: var(--card-lift); }
.mini-top {
    display: flex;
    justify-content: space-between;
    padding: .7rem 1rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.mini-hero {
    padding: 1.4rem 1.1rem 1.1rem;
}
.mini-hero strong {
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.05;
}
.mini-hero p { margin: .4rem 0 0; font-size: .78rem; color: var(--muted); }
.mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .55rem;
    padding: 0 1rem 1.1rem;
}
.tile {
    background: var(--card);
    border: 1px solid var(--line);
    min-height: 92px;
    padding: .55rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.swatch { height: 52px; margin-bottom: .4rem; }
.swatch.a { background: #9ec0ff; }
.swatch.b { background: #2b6bff; }
.swatch.c { background: #1a3cff; }
.tile small { font-size: .68rem; color: var(--muted); }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.45rem 1.35rem 1.5rem;
    min-height: 198px;
}
.step .num {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin: 0 0 1.15rem;
}
.step h3 { margin: 0 0 .45rem; font-size: 1.18rem; letter-spacing: -.03em; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }

.feat-grid, .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.2rem 1.3rem;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .55rem;
}
.store-detail { display: grid; gap: 1rem; }
.store-detail .card p { margin: .35rem 0 0; }
.store-detail .card p:first-of-type { margin-top: 0; }
.access-card h2 {
    margin: 0 0 .4rem;
    font-size: 1.3rem;
    font-family: var(--display);
    letter-spacing: -.03em;
}
.access-card > p { color: var(--ink); }
.access-list {
    display: grid;
    gap: .9rem;
    margin: 1.05rem 0 0;
}
.access-list > div {
    border-top: 1px solid var(--line);
    padding-top: .85rem;
}
.access-list dt {
    margin: 0 0 .2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand);
}
.access-list dd {
    margin: 0;
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 650;
    color: var(--ink);
    word-break: break-word;
}
.access-list .hint { margin: .28rem 0 0; }

.feat-band {
    background: var(--paper-2);
    padding: 4.6rem 0 4.3rem;
    margin: 0 0 4.2rem;
}
.feat-page { margin-bottom: 0; padding-top: 3.4rem; }
.feat-page .section-head.is-center { max-width: 44rem; }
.feat-page .feat-tile { min-height: 188px; }
.feat-group { margin-top: 2.7rem; }
.feat-group:first-of-type { margin-top: 0; }
.feat-group > h2 {
    font-family: var(--display);
    font-size: 1.42rem;
    margin: 0 0 .35rem;
    letter-spacing: -.03em;
}
.feat-group > .muted {
    margin: 0 0 1.05rem;
    max-width: 40rem;
}
.section-head.is-center {
    text-align: center;
    max-width: 38rem;
    margin-inline: auto;
    margin-bottom: 2.3rem;
}
.section-head.is-center h1,
.section-head.is-center h2 {
    margin: 0 0 .7rem;
}
.section-head.is-center h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    line-height: 1.05;
}
.section-head.is-center .lede,
.section-head.is-center .muted {
    margin-inline: auto;
}
.feat-catalog { margin-top: .4rem; }
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1.6rem;
}
.feat-tab {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    border-radius: 999px;
    padding: .45rem .95rem;
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .45s ease, color .45s ease, border-color .45s ease, transform .5s cubic-bezier(.22, .82, .28, 1), box-shadow .5s ease;
}
.feat-tab.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.feat-catalog-panel { animation: mock-shelf .4s ease; }
.feat-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.feat-catalog-card {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.3rem 1.25rem 1.35rem;
    min-height: 100%;
    transition:
        transform .5s cubic-bezier(.22, .82, .28, 1),
        border-color .45s ease,
        box-shadow .5s ease,
        background-color .45s ease;
}
.feat-catalog-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    letter-spacing: -.03em;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .5rem;
}
.feat-catalog-card p {
    margin: .45rem 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55;
}
.feat-catalog-card .feat-pack { margin-top: 0; }
.feat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.feat-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.35rem 1.3rem 1.4rem;
    min-height: 176px;
    display: flex;
    flex-direction: column;
}
.feat-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: .75rem;
}
.feat-tile h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.28;
    padding-top: .2rem;
    letter-spacing: -.03em;
}
.feat-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background-color .45s ease, color .45s ease;
}
.feat-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}
.feat-tile p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}
.feat-pack {
    display: inline-block;
    margin-top: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: .16rem .45rem;
    border-radius: 999px;
}
.feat-note {
    text-align: center;
    margin: 1.15rem 0 0;
    font-size: .9rem;
}
.feat-more {
    display: flex;
    justify-content: center;
    margin-top: 1.85rem;
}
.feat-more .btn {
    border-radius: 999px;
    min-width: 13.5rem;
}

.audience { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.audience article {
    padding: 1.5rem 1.3rem;
    border-left: 1px solid var(--line);
}
.audience article:first-child { border-left: 0; }
.audience h3 { margin: 0 0 .4rem; font-size: 1.3rem; }

.price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    max-width: 44rem;
}
.trial-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .45rem 1rem;
    background: var(--brand-soft);
    border: 1px solid var(--soft-line);
    border-radius: 16px;
    padding: 1.05rem 1.25rem;
    margin: 0 0 1.15rem;
    max-width: 44rem;
}
.trial-banner strong {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -.03em;
}
.trial-banner span {
    color: var(--ink);
    font-size: .95rem;
}
.price {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
}
.price.featured {
    border-color: var(--brand);
    background: var(--card-lift);
}
.price .flags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}
.price .flag {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: .22rem .5rem;
    border-radius: 999px;
    margin-bottom: 0;
}
.price .flag-alt {
    color: var(--ink);
    background: var(--flag-alt-bg);
}
.price h2, .price h3 { margin: 0; font-size: 1.55rem; }
.amount {
    font-family: var(--display);
    font-size: 2.4rem;
    font-weight: 650;
    margin: 1rem 0 .15rem;
    letter-spacing: -.04em;
}
.price ul {
    margin: 1rem 0 1.3rem;
    padding: 0;
    list-style: none;
    color: var(--muted);
    flex: 1;
}
.price li {
    padding: .35rem 0;
    border-top: 1px solid var(--line);
    font-size: .92rem;
}
.price li:first-child { border-top: 0; }
.price .pack-note {
    margin: -.55rem 0 1.1rem;
    font-size: .88rem;
}
.price .btn { width: 100%; }

.faq {
    display: grid;
    gap: .7rem;
    border: 0;
}
.faq-item {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 1rem;
    overflow: hidden;
    isolation: isolate;
    transform: translateY(0);
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .85s ease,
        border-color .85s ease,
        background-color .85s ease;
}
.faq-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--brand);
    opacity: 0;
    transition: opacity .85s ease;
}
.faq-item > * { position: relative; z-index: 1; }
.faq-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
    transition: color .85s ease;
}
.faq-q-text { flex: 1; }
.faq-plus {
    width: 1.7rem;
    height: 1.7rem;
    position: relative;
    flex-shrink: 0;
    color: var(--muted);
    border-radius: 999px;
    background: var(--paper-2);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .85s ease, color .85s ease;
}
.faq-plus::before,
.faq-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: 2px;
}
.faq-plus::before { width: 10px; height: 2px; margin: -1px 0 0 -5px; }
.faq-plus::after {
    width: 2px;
    height: 10px;
    margin: -5px 0 0 -1px;
    transition: opacity .3s ease, transform .45s ease;
}
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}
.faq-clip { overflow: hidden; min-height: 0; }
.faq-body {
    margin: 0;
    padding: 0 1.2rem 1.2rem;
    color: var(--muted);
    max-width: 40rem;
    font-size: .9rem;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.faq-check:checked ~ .faq-q { color: var(--brand); }
.faq-check:checked ~ .faq-q .faq-plus {
    transform: rotate(180deg);
    color: #fff;
    background: var(--brand);
}
.faq-check:checked ~ .faq-q .faq-plus::after { opacity: 0; transform: scaleY(0); }
.faq-check:checked ~ .faq-panel { grid-template-rows: 1fr; }
.faq-check:checked ~ .faq-panel .faq-body { opacity: 1; transform: none; }
.faq-item:has(.faq-check:checked) {
    border-color: var(--brand);
    box-shadow: 0 18px 36px -18px rgba(43, 107, 255, .35);
}
.faq-item:has(.faq-check:checked)::after { opacity: .1; }

.cta-band {
    background: var(--brand);
    color: #eef3ff;
    padding: 3.4rem 0;
    margin-top: .5rem;
}

.dev-notice {
    border-bottom: 1px solid rgba(245, 158, 11, .28);
    background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
    font-size: .82rem;
}
html.dark .dev-notice {
    background: linear-gradient(90deg, #2a2112 0%, #33270f 100%);
    border-bottom-color: rgba(245, 158, 11, .24);
    color: #fcd34d;
}
.dev-notice .wrap {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 0;
}
.dev-notice p { margin: 0; line-height: 1.5; }
.dev-notice strong { font-weight: 700; }
.dev-notice-badge {
    flex-shrink: 0;
    border-radius: 999px;
    background: #f59e0b;
    color: #1f2937;
    padding: .15rem .55rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html.dark .dev-notice-badge { color: #1c1405; }
.cta-band h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    margin: 0 0 .7rem;
    max-width: 16ch;
    color: #fff;
}
.cta-band p { margin: 0 0 1.4rem; color: #d6e3ff; max-width: 32rem; }
.cta-band .btn { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .btn:hover { background: #e8efff; border-color: #e8efff; color: var(--brand); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }

.site-footer {
    border-top: 1px solid var(--line);
    padding: 2.6rem 0 1.6rem;
    color: var(--muted);
    font-size: .9rem;
}
.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.site-footer h4 {
    margin: 0 0 .7rem;
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .28rem 0; }
.site-footer a {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    line-height: 1.35;
    transition: color .55s ease;
}
.site-footer li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--brand);
    transition: width .55s cubic-bezier(.16, .8, .24, 1);
}
.site-footer .brand { transition: transform .5s cubic-bezier(.22, .82, .28, 1); }
.foot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: .8rem;
}

.flash {
    width: min(var(--max), calc(100% - 2 * var(--pad)));
    margin: 1rem auto 0;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .92rem;
}
.flash.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }

.form, .form-stack { display: grid; gap: .85rem; max-width: 28rem; }
.form .btn, .form-stack .btn { justify-self: start; }
.field { display: grid; gap: .35rem; }
.field span { font-size: .8rem; font-weight: 600; }
input, textarea, select {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius);
    padding: .75rem .85rem;
}
input:focus, textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: .75;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: color-mix(in srgb, var(--ink) 45%, transparent);
    opacity: 1;
}
html.dark .apply-form input::placeholder,
html.dark .apply-form textarea::placeholder { color: var(--muted); }
.hint { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); }

.checkout {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 3rem;
    padding: 3rem 0 4.5rem;
    align-items: start;
}
.checkout h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 1.2rem;
}
.checkout .form-stack { max-width: none; }
.trial-lede { max-width: 36rem; color: var(--muted); }
.trial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
.trial-points {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    display: grid;
    gap: .45rem;
}
.trial-thanks { max-width: 36rem; }
.trial-thanks .hero-actions { margin-top: 1.4rem; }

body.page-apply .site-header,
body.page-apply .site-footer,
body.page-apply .sf-chat { display: none; }
body.page-apply { background: var(--paper); }
.apply-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--paper);
}
.apply-form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: auto;
    padding: 1.15rem 1.4rem 2.2rem;
    background: var(--paper);
}
.apply-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.apply-top .brand-mark { height: 36px; }
.apply-top-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.apply-login {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
}
.apply-login a {
    color: var(--brand);
    font-weight: 700;
}
.apply-form-inner {
    width: min(100%, 32rem);
    margin: 0 auto;
    padding: 1.4rem 0 2.4rem;
}
.apply-form h1 {
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    margin: 0 0 .45rem;
    letter-spacing: -.04em;
}
.apply-form .lede {
    margin: 0 0 1.35rem;
    max-width: 34rem;
}
.apply-form .form-stack { max-width: none; gap: .8rem; }
.apply-form .field span {
    font-size: .78rem;
    font-weight: 650;
    color: var(--muted);
}
.apply-form input,
.apply-form textarea {
    background: var(--card);
    border-radius: 12px;
    padding: .9rem 1rem;
    transition: border-color .45s ease, box-shadow .5s ease, background-color .45s ease;
}
.apply-domain { position: relative; display: block; }
.apply-domain input { padding-right: 7.6rem; }
.apply-domain-suffix {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .92rem;
    font-weight: 650;
    letter-spacing: -.02em;
    pointer-events: none;
    white-space: nowrap;
}
.apply-top .brand { transition: transform .5s cubic-bezier(.22, .82, .28, 1); }
.apply-login a,
.apply-legal a {
    text-decoration: none;
    background-image: linear-gradient(var(--brand), var(--brand));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 2px;
    transition: color .35s ease, background-size .45s cubic-bezier(.16, .8, .24, 1);
}
.apply-form .btn {
    width: 100%;
    justify-content: center;
    justify-self: stretch;
    margin-top: .25rem;
    padding: .95rem 1rem;
    border-radius: 12px;
}
.apply-secret { position: relative; display: block; }
.apply-secret input { padding-right: 2.8rem; }
.apply-eye {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.apply-eye:hover { color: var(--brand); }
.apply-legal {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}
.apply-legal a { color: var(--brand); font-weight: 700; }
.apply-visual {
    display: grid;
    place-items: center;
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(70% 48% at 50% 42%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 72%),
        linear-gradient(180deg, var(--brand-soft), var(--paper-2));
}
.apply-visual .ios-lock {
    justify-self: center;
    width: min(19rem, 40vh);
}
html.dark .apply-visual {
    background:
        radial-gradient(70% 48% at 50% 42%, rgba(43, 107, 255, .28), transparent 72%),
        linear-gradient(180deg, #121a2c, #0c1220);
}
html.dark .apply-form input,
html.dark .apply-form textarea { background: var(--paper-2); }
.summary {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem;
    position: sticky;
    top: 1rem;
}
.more { color: var(--brand); font-weight: 600; }
.narrow { max-width: 28rem; padding: 3.2rem 0 4.5rem; }
.narrow h1 { font-size: 2.4rem; margin: 0 0 1.2rem; }

.feature-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.feature-row {
    display: grid;
    grid-template-columns: .9fr 1.3fr;
    gap: 2rem;
    padding: 1.7rem 0;
    border-bottom: 1px solid var(--line);
}
.feature-row h3 { margin: 0; font-size: 1.45rem; }
.feature-row p { margin: 0; color: var(--muted); }

.timeline { display: grid; gap: 0; }
.timeline article {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.2rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--line);
}
.timeline .num { font-family: var(--display); font-size: 1.6rem; color: var(--brand); }
.timeline h3 { margin: 0 0 .35rem; font-size: 1.3rem; }
.timeline p { margin: 0; color: var(--muted); }

.split-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-bottom: 4.5rem;
    align-items: start;
}

/*
 * Masaüstü navigasyon eşiği 1000px.
 *
 * Eski eşik 900px'ti ve logo + "Paketler / Çözümler / Şirket" + tema + giriş
 * + CTA tek satıra 1000px'in altında sığmıyordu. 900–1000px arasındaki
 * tablet ve küçük laptop ekranlarında üst bar iki satıra kırılıyor,
 * menü şeridi logonun altına kayıyordu. Bu aralıkta da hamburger menü
 * kullanılıyor: masaüstünde hiç görünmeyen telefondaki drawer, tablette
 * ve dar pencerede de aynı davranır.
 */
@media (min-width: 1001px) {
    .nav-inner { position: relative; }
    .site-nav { position: static; margin-left: auto; }
    .mega-bar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }
    .mega-item,
    .mega-trigger { pointer-events: auto; }
}

@media (max-width: 1000px) {
    .menu-btn { display: inline-flex; }
    .nav-tools { margin-left: auto; }
    .site-header {
        position: sticky;
        top: 0;
        z-index: 80;
        background: transparent;
        backdrop-filter: none;
    }
    .site-header::before { background: rgba(255, 255, 255, .98); }
    html.dark .site-header { background: transparent; }
    html.dark .site-header::before { background: rgba(15, 23, 42, .98); }
    body.nav-open { overflow: hidden; }
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
        border: 0;
        padding: 0;
        background: rgba(15, 28, 58, .38);
        /* Drawer'in kendi cam yuzeyi zaten blur verir; ikinci bir blur katmani
           acilista yeniden ornekleme yapip paneli bulandirir. */
        opacity: 0;
        pointer-events: none;
        transition: opacity .32s ease;
    }
    .nav-backdrop.is-on { opacity: 1; pointer-events: auto; }
    /* Tam ekran drawer: header'in ustunde, ekrani kaplar. */
    .site-nav {
        display: flex;
        position: fixed;
        z-index: 90;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        background: var(--paper);
        border: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateY(-1.5%);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity .28s ease-out,
            transform .34s cubic-bezier(.22, .9, .24, 1),
            visibility .34s;
    }
    .site-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    /* Ust seritte baslik + belirgin X butonu (Apple HIG: 44px dokunma alani). */
    .nav-drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .85rem var(--pad);
        border-bottom: 1px solid var(--line);
        background: var(--paper);
    }
    .nav-drawer-title {
        font-family: var(--display);
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--ink);
    }
    .nav-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--paper-2);
        color: var(--ink);
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
    }
    .nav-drawer-close svg { width: 19px; height: 19px; display: block; }
    .nav-drawer-close:active {
        background: color-mix(in srgb, var(--brand) 14%, var(--paper-2));
        border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
        color: var(--brand);
    }
    .mega-bar { display: block; width: 100%; padding: 0 var(--pad); }
    .mega-item { border-bottom: 1px solid var(--line); }
    .mega-item:last-child { border-bottom: 0; }
    .mega-trigger {
        width: 100%;
        justify-content: space-between;
        min-height: 56px;
        padding: 1rem .15rem;
        border-radius: 0;
        font-size: 1.05rem;
        font-weight: 650;
        letter-spacing: -.015em;
    }
    .mega-trigger svg { width: 1rem; height: 1rem; opacity: .55; }
    .mega-panel,
    .mega-panel.is-open {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        padding-top: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        background: transparent;
        display: none;
    }
    .mega-panel.is-open { display: block; }
    .mega-sheet {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    .mega-layout,
    .mega-layout.is-duo { grid-template-columns: 1fr; padding: .15rem 0 .7rem; gap: .35rem; }
    /* Drawer icinde link'ler ferah satirlar halinde, ince ayracli. */
    .mega-link {
        min-height: 56px;
        padding: .85rem .15rem;
        gap: .85rem;
        border-radius: 0;
        border-bottom: 1px solid var(--line);
        transition: background .2s ease, padding-left .2s ease;
    }
    .mega-link:last-of-type,
    .mega-layout > div > .mega-link:last-child { border-bottom: 0; }
    .mega-ico { width: 2.35rem; height: 2.35rem; border-radius: .7rem; }
    .mega-link strong { font-size: 1rem; }
    .mega-copy > span { -webkit-line-clamp: 2; font-size: .82rem; line-height: 1.45; }
    .mega-go { opacity: .35; }
    .mega-kicker { margin: .9rem 0 .35rem; padding: 0 .15rem; }
    .mega-card { min-height: 0; margin: .5rem 0 .9rem; padding: 1.25rem; }
    .mega-quick { width: auto; margin: 0; padding-inline: 0; background: transparent; }
    .mega-status { display: none; }
    .nav-account {
        position: static;
        margin: 0;
        padding: .9rem var(--pad) 1.6rem;
        border-top: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
    .nav-account > a,
    .nav-account .btn,
    .nav-account form {
        width: 100%;
    }
    .nav-account > a:not(.btn) {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .nav-account .btn { min-height: 48px; justify-content: center; }
    .hero-split,
    .feat-grid, .grid,
    .steps,
    .order-path,
    .outcome-grid,
    .audience,
    .trust-strip,
    .product-stage,
    .proof-grid,
    .about-grid,
    .lead-split,
    .mock-sf-head,
    .mock-admin-body,
    .price-grid,
    .checkout,
    .trial-grid,
    .apply-screen,
    .split-contact,
    .foot-grid,
    .feature-row {
        grid-template-columns: 1fr;
    }
    .feat-tiles,
    .feat-catalog-grid,
    .mp-grid { grid-template-columns: 1fr 1fr; }
    .audience article { border-left: 0; border-top: 1px solid var(--line); }
    .audience article:first-child { border-top: 0; }
    .hero-split h1 { max-width: none; }
    .product-stage .ios-lock { grid-column: auto; }
    .steps-track::before { display: none; }
    .mock-sf-head { grid-template-columns: 1fr auto; }
    .mock-sf-search { grid-column: 1 / -1; }
    .ios-lock { justify-self: center; }
    .apply-form,
    .apply-visual { min-height: 0; height: auto; position: static; }
    .apply-visual { padding: 1.5rem 1rem 2.5rem; }
    .apply-top {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: .4rem .75rem;
    }
    .apply-top-actions { display: contents; }
    .apply-top .theme-toggle { order: 1; }
    .apply-login { order: 2; grid-column: 1 / -1; }
}

.hero-copy { animation: fade-in .35s ease both; }

.ios-lock {
    justify-self: end;
    width: min(100%, 20.25rem);
    animation: fade-up .4s ease both;
    user-select: none;
    cursor: default;
}
.ios-phone {
    position: relative;
    padding: 0 7px;
}
.ios-hard {
    position: absolute;
    background: linear-gradient(180deg, #6d6d72 0%, #2c2c2e 48%, #111113 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    z-index: 2;
}
.ios-hard-action {
    left: 1px;
    top: 14.5%;
    width: 4px;
    height: 22px;
    border-radius: 2px 0 0 2px;
}
.ios-hard-vol-up {
    left: 1px;
    top: 22%;
    width: 4px;
    height: 38px;
    border-radius: 2px 0 0 2px;
}
.ios-hard-vol-down {
    left: 1px;
    top: 32.5%;
    width: 4px;
    height: 38px;
    border-radius: 2px 0 0 2px;
}
.ios-hard-power {
    right: 1px;
    top: 26%;
    width: 4px;
    height: 62px;
    border-radius: 0 2px 2px 0;
}
.ios-bezel {
    position: relative;
    background: linear-gradient(160deg, #4a4a4e 0%, #1c1c1e 38%, #0b0b0d 100%);
    border-radius: 54px;
    padding: 11px;
    box-shadow:
        0 0 0 1.5px #5c5c62,
        inset 0 1px 1px rgba(255, 255, 255, .35),
        inset 0 -2px 4px rgba(0, 0, 0, .55),
        0 28px 60px rgba(15, 18, 32, .28);
}
.ios-screen {
    position: relative;
    overflow: hidden;
    border-radius: 44px;
    aspect-ratio: 393 / 852;
    color: #fff;
    background:
        radial-gradient(90% 55% at 50% 42%, rgba(43, 107, 255, .38) 0%, rgba(10, 18, 46, .08) 52%, transparent 70%),
        radial-gradient(120% 80% at 50% 100%, rgba(43, 107, 255, .22) 0%, transparent 46%),
        linear-gradient(180deg, #07080d 0%, #0a1022 48%, #05060a 100%);
}
.ios-island {
    position: absolute;
    z-index: 5;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 6.85rem;
    height: 2.05rem;
    background: #000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px 0 18px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
}
.ios-island-sensor {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a1a22;
    margin-right: auto;
    box-shadow: inset 0 0 0 1.5px #2a3148;
}
.ios-island-cam {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3d5a9a 0%, #0b1228 55%, #05060a 100%);
    box-shadow: 0 0 0 1.5px #111;
}
.ios-statusbar {
    position: absolute;
    z-index: 5;
    top: 14px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    font-size: .78rem;
    font-weight: 600;
}
.ios-status-left { width: 4.2rem; }
.ios-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}
.ios-clock {
    position: absolute;
    z-index: 3;
    top: 3.35rem;
    left: 0;
    right: 0;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    pointer-events: none;
}
.ios-date {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.ios-time {
    margin: .05rem 0 0;
    font-size: 4.85rem;
    font-weight: 650;
    letter-spacing: -.06em;
    line-height: .92;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.ios-mark {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 28%;
    height: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    mix-blend-mode: normal;
    transition: opacity .28s ease;
}
.ios-mark img {
    width: 8.4rem;
    height: 8.4rem;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 28px rgba(43, 107, 255, .35));
}
.ios-mark-glow {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 46%;
    width: 12rem;
    height: 12rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 107, 255, .4) 0%, transparent 68%);
    pointer-events: none;
    transition: opacity .28s ease;
}
.ios-lock.is-open .ios-mark,
.ios-lock.is-open .ios-mark-glow,
.ios-lock:focus-within .ios-mark,
.ios-lock:focus-within .ios-mark-glow {
    opacity: 0;
}
@media (hover: hover) {
    .ios-lock:hover .ios-mark,
    .ios-lock:hover .ios-mark-glow {
        opacity: 0;
    }
}
.ios-stack {
    position: absolute;
    z-index: 4;
    left: 16px;
    right: 16px;
    bottom: 5.55rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    outline: none;
    cursor: default;
}
.ios-note {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 10px 12px 10px 10px;
    border-radius: 18px;
    isolation: isolate;
    overflow: hidden;
    /* iOS bildirim yuzeyi: koyu cam. Telefon zemini her zaman koyu oldugu icin
       metin renkleri de koyu yuzeye gore sabitlenir (tema degisse de okunur). */
    background: linear-gradient(180deg, rgba(38, 46, 66, .82) 0%, rgba(26, 33, 50, .9) 100%);
    box-shadow:
        0 10px 24px -10px rgba(0, 0, 0, .65),
        inset 0 0 0 .5px rgba(255, 255, 255, .16),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    color: #f2f5fb;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
    transition: margin .45s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i) * 20ms);
    animation: ios-in .45s ease both;
    animation-delay: calc(var(--i) * 70ms);
    z-index: calc(5 - var(--i));
    cursor: default;
}
/* Yiginda arkada kalan kartlar bir tik sonuk ve daralarak derinlik verir. */
.ios-note:not(:last-child) {
    filter: brightness(.92);
}
.ios-note:not(:first-child) {
    margin-bottom: -4.35rem;
    margin-left: 3px;
    margin-right: 3px;
}
.ios-lock.is-open .ios-stack,
.ios-lock:focus-within .ios-stack {
    gap: 7px;
}
.ios-lock.is-open .ios-note,
.ios-lock:focus-within .ios-note {
    margin: 0;
    filter: none;
    transition-delay: calc((3 - var(--i)) * 20ms);
}
@media (hover: hover) {
    .ios-lock:hover .ios-stack {
        gap: 7px;
    }
    .ios-lock:hover .ios-note {
        margin: 0;
        filter: none;
        transition-delay: calc((3 - var(--i)) * 20ms);
    }
}
.ios-note-icon {
    width: 38px;
    height: 38px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(160deg, #2b6bff 0%, #1a4bd6 100%);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
}
.ios-note-icon img {
    width: 26px;
    height: 26px;
    max-width: none;
    object-fit: contain;
    display: block;
}
.ios-note-body {
    min-width: 0;
    flex: 1;
    padding-top: 1px;
}
.ios-note-body header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin: 0 0 1px;
}
.ios-note-body h3 {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .74);
    line-height: 16px;
}
.ios-note-body time {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .48);
    letter-spacing: -.01em;
    line-height: 16px;
    white-space: nowrap;
}
.ios-note-body p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 18px;
    color: #f4f7fd;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ios-dock {
    position: absolute;
    z-index: 5;
    left: 18px;
    right: 18px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.ios-dock-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(40, 40, 48, .85);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
}
.ios-home {
    width: 8.2rem;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    align-self: flex-end;
    margin-bottom: 4px;
}

@keyframes ios-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}
[data-reveal].is-in.is-ready {
    transition: transform .5s cubic-bezier(.22, .82, .28, 1), border-color .45s ease, box-shadow .5s ease, background-color .45s ease;
}

.card, .price, .step, .feat-tile, .mp-card, .trial-banner, .summary, .billing-card, .access-card, .audience article,
.logo-chip, .trust-strip article, .mock-store, .mock-admin, .lead-card, .proof-copy {
    transition:
        transform .5s cubic-bezier(.22, .82, .28, 1),
        border-color .45s ease,
        box-shadow .5s ease,
        background-color .45s ease,
        color .45s ease;
}
.btn {
    transition: background .35s ease, border-color .35s ease, color .35s ease, transform .5s cubic-bezier(.22, .82, .28, 1), box-shadow .5s ease;
}
.theme-toggle, .menu-btn, .sf-chat-fab {
    transition: transform .5s cubic-bezier(.22, .82, .28, 1), border-color .35s ease, color .35s ease, background .35s ease, box-shadow .5s ease;
}
.more, .muted a, .prose a, .blog-chip, .blog-grid h3 a, .post-toc a {
    transition: color .35s ease, transform .5s cubic-bezier(.22, .82, .28, 1), border-color .35s ease, background .35s ease;
}
.cta-band { animation: none; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.blog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .8fr);
    gap: 2rem 3rem;
    align-items: end;
    padding: 2.6rem 0 1.2rem;
}
.blog-hero h1 {
    margin: .35rem 0 .6rem;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    letter-spacing: -.04em;
    max-width: 16ch;
}
.blog-hero .lede { margin: 0; max-width: 36rem; }
.blog-kicker {
    margin: 0;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.blog-kicker a { color: inherit; text-decoration: none; }
.blog-search label { display: block; position: relative; }
.blog-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.blog-search input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .9rem 1.15rem;
    background: var(--card);
    transition: border-color .45s ease, box-shadow .5s ease;
}
.blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .2rem 0 1.6rem;
}
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .42rem .85rem;
    font-size: .86rem;
    font-weight: 650;
    color: var(--ink);
    background: var(--card);
    text-decoration: none;
    transition: transform .5s cubic-bezier(.22, .82, .28, 1), border-color .45s ease, background .35s ease, color .35s ease, box-shadow .5s ease;
}
.blog-chip span { color: var(--muted); font-weight: 600; }
.blog-chip.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.blog-chip.is-on span { color: rgba(255, 255, 255, .82); }
.blog-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 2rem 2.4rem;
    align-items: center;
    padding-bottom: 2.4rem;
}
.blog-feature-media {
    display: block;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--paper-2);
    border: 1px solid transparent;
    box-shadow: 0 18px 40px -30px rgba(15, 28, 58, .4);
    transition: border-color .45s ease, box-shadow .5s ease;
}
.blog-feature-media img { transition: transform .8s cubic-bezier(.16, .8, .24, 1); }
.blog-feature-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 28, 58, 0) 52%, rgba(15, 28, 58, .42) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.blog-feature {
    position: relative;
}
.blog-feature-read {
    position: absolute;
    left: 1.1rem;
    bottom: 1.1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-size: .82rem;
    font-weight: 700;
    box-shadow: 0 10px 22px -12px rgba(15, 28, 58, .5);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, .82, .28, 1);
}
.blog-feature-read svg { width: 1rem; height: 1rem; display: block; transition: transform .25s ease; }
.blog-feature-copy h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.blog-feature-media img,
.blog-feature-media .blog-card-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-feature-media img { display: block; }
.blog-feature-media .blog-card-fallback { display: grid; place-items: center; }
.blog-feature-copy h2 {
    margin: .35rem 0 .7rem;
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    letter-spacing: -.03em;
}
.blog-feature-copy h2 a { color: inherit; text-decoration: none; transition: color .25s ease; }
.blog-feature-copy h2 a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.blog-feature-copy p { margin: 0; color: var(--muted); }
.blog-read {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    background-image: linear-gradient(var(--brand), var(--brand));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 2px;
    transition: background-size .45s cubic-bezier(.16, .8, .24, 1);
}
.blog-list h2 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem 1.35rem;
}
.blog-card {
    min-width: 0;
    position: relative;
    padding: .7rem .7rem .95rem;
    border-radius: 22px;
    border: 1px solid transparent;
    background: transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, .82, .28, 1);
}
.blog-card-body { padding: .1rem .55rem 0; }
.blog-card h3 {
    margin: .35rem 0 0;
    font-size: 1.05rem;
    font-family: var(--display);
    letter-spacing: -.02em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s ease;
}
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
}
.blog-card h3 a:focus-visible { outline: 0; }
.blog-card:has(h3 a:focus-visible) {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(43, 107, 255, .18);
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin: .7rem 0 0;
    color: var(--brand);
    font-size: .8rem;
    font-weight: 650;
}
.blog-card-meta a { color: inherit; text-decoration: none; }
.blog-card-meta time { color: var(--muted); font-weight: 600; }
.blog-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid transparent;
    transition: border-color .45s ease, box-shadow .5s ease;
}
.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .7s cubic-bezier(.16, .8, .24, 1);
}
.blog-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 28, 58, 0) 52%, rgba(15, 28, 58, .42) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.blog-card-read {
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--brand);
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 8px 18px -10px rgba(15, 28, 58, .45);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .82, .28, 1);
}
.blog-card-read svg { width: .95rem; height: .95rem; display: block; transition: transform .25s ease; }
.blog-card-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 1.2rem;
    color: var(--brand);
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background:
        radial-gradient(70% 80% at 15% 10%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 62%),
        radial-gradient(60% 70% at 90% 90%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
        linear-gradient(155deg, color-mix(in srgb, var(--brand) 16%, var(--paper)), var(--paper-2));
}
.post-cover {
    padding-top: 2.2rem;
}
.post-cover img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
}
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 42rem) minmax(14rem, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding-bottom: 3rem;
}
.post-side {
    order: 2;
    position: sticky;
    top: 1.25rem;
    display: grid;
    gap: 1rem;
}
.post-toc {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    background: var(--paper);
}
.post-toc summary {
    list-style: none;
    cursor: pointer;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::marker { content: ""; }
@media (min-width: 1001px) {
    .post-toc summary { pointer-events: none; }
}
.post-toc ol { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; }
.post-toc li { margin: .35rem 0; }
.post-toc .is-h3 { padding-left: .6rem; }
.post-toc a:hover { color: var(--brand); }
.post-cta {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    background: var(--brand-soft);
}
.post-cta h2 {
    margin: .25rem 0 .45rem;
    font-size: 1.2rem;
    line-height: 1.25;
}
.post-cta p { margin: 0 0 .9rem; color: var(--muted); }
.post-share {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}
.post-share a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .85rem;
    color: var(--ink);
    background: var(--paper);
}
.post-share a:hover { color: var(--brand); border-color: var(--brand); }
.post-main { order: 1; }
.takeaways {
    background: var(--brand-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}
.takeaways ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.takeaways li { margin: .3rem 0; }
.post-author {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.post-hero {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
}
.post-hero.has-cover { padding-top: 1.6rem; }
.post-hero .blog-chips { justify-content: center; }
.post-meta { margin: .4rem 0 0; }
.prose {
    max-width: 42rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
}
.prose p { margin: 0 0 1rem; }
.prose a { color: var(--brand); }
.prose h2, .prose h3 {
    font-family: var(--display);
    margin: 1.8rem 0 .7rem;
    line-height: 1.25;
}
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); }
.prose img { border-radius: var(--radius); margin: 1rem 0; }
.plain-list { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.plain-list li { margin: .35rem 0; }

@media (max-width: 900px) {
    .blog-hero,
    .blog-feature { grid-template-columns: 1fr; }
    .blog-hero h1 { max-width: none; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .post-layout { grid-template-columns: 1fr; }
    .post-side { order: 0; position: static; }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
}

.faq-home { border-top: 0; }

.choice { display: flex; gap: .55rem; align-items: center; margin: .4rem 0; font-size: .95rem; }
.billing-card { margin-bottom: 1rem; }
.billing-card .form-stack { margin-top: 1rem; }

.sf-chat {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 40;
}
.sf-chat-fab {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 12px 28px -12px rgba(43, 107, 255, .9);
}
.sf-chat-panel {
    position: absolute;
    right: 0;
    bottom: 4.1rem;
    width: min(22rem, calc(100vw - 2rem));
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(15, 28, 58, .55);
}
.sf-chat-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--brand);
    color: #fff;
}
.sf-chat-head span { opacity: .85; font-size: .75rem; }
.sf-chat-close { border: 0; background: transparent; color: #fff; font-size: 1.2rem; }
.sf-chat-log { max-height: 16rem; overflow: auto; padding: .85rem 1rem; }
.sf-chat-welcome { margin: 0; color: var(--muted); font-size: .85rem; }
.sf-chat-msg { margin: .45rem 0; display: flex; }
.sf-chat-msg span { max-width: 85%; padding: .45rem .7rem; border-radius: 12px; font-size: .86rem; }
.sf-chat-msg.is-me { justify-content: flex-end; }
.sf-chat-msg.is-me span { background: var(--brand); color: #fff; }
.sf-chat-msg.is-agent span { background: var(--brand-soft); color: var(--ink); }
.sf-chat-form { display: flex; border-top: 1px solid var(--line); }
.sf-chat-form input { flex: 1; border: 0; padding: .8rem .9rem; background: transparent; color: var(--ink); }
.sf-chat-form button { border: 0; background: transparent; color: var(--brand); font-weight: 700; padding: 0 .9rem; }

.band-paper {
    background: var(--paper-2);
    padding: 1.6rem 0;
}
.trust-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
}
.trust-strip article {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .9rem .85rem;
    box-shadow: 0 10px 24px -20px rgba(15, 28, 58, .45);
}
.trust-strip strong {
    display: block;
    font-size: .88rem;
    letter-spacing: -.02em;
}
.trust-strip p {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}
.trust-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.trust-mark svg { width: 1.1rem; height: 1.1rem; }

.logo-wall {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
}
.logo-chip {
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 8.2rem;
    padding: .7rem .9rem .65rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 10px 22px -20px rgba(43, 107, 255, .55);
}
.logo-chip-name {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.04em;
    font-size: 1.05rem;
}
.logo-chip-pack {
    font-size: .68rem;
    color: var(--brand);
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    align-items: stretch;
}
.mp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .85rem .85rem .95rem;
    min-height: 100%;
    overflow: hidden;
}
.mp-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--mp, var(--brand));
}
.mp-logo {
    display: grid;
    place-items: center;
    height: 4.1rem;
    margin-top: .1rem;
    padding: .45rem .75rem;
    border-radius: 10px;
    background: var(--logo-plate);
    border: 1px solid var(--line);
}
/*
 * Koyu temada logo kutusu yok: yalnızca logonun kendi pikselleri görünür.
 * Açık temada `--logo-plate` (#ffffff) olduğu gibi kalır — kartın içinde
 * logonun oturduğu beyaz alan orada tasarımın parçası.
 */
html.dark .mp-logo {
    background: transparent;
    border-color: transparent;
}
.mp-logo img {
    display: block;
    max-width: 10.5rem;
    max-height: 3.15rem;
    width: auto;
    height: auto;
    object-fit: contain;
}
.mp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.mp-card h3 {
    margin: 0;
    font-size: .98rem;
    letter-spacing: -.03em;
    line-height: 1.25;
}
.mp-card .feat-pack { margin-top: 0; flex-shrink: 0; }
.mp-card p {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.5;
}
.mp-note {
    text-align: center;
    max-width: 42rem;
    margin: 1.2rem auto 0;
    font-size: .92rem;
    line-height: 1.55;
}
.integ-menu {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}
.integ-cats {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    position: sticky;
    top: 5.25rem;
}
.integ-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    border-radius: 14px;
    padding: .9rem 1rem;
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.22, .82, .28, 1), border-color .45s ease, box-shadow .5s ease, background .35s ease, color .35s ease;
}
.integ-cat em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    min-width: 1.65rem;
    text-align: center;
    padding: .12rem .4rem;
    border-radius: 999px;
}
.integ-cat.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 16px 32px -18px rgba(43, 107, 255, .55);
}
.integ-cat.is-on em {
    color: var(--brand);
    background: #fff;
}
.integ-panel-head { margin: 0 0 1rem; }
.integ-kicker {
    margin: 0 0 .3rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}
.integ-panel-head .muted { margin: 0; max-width: 40rem; }
.integ-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    align-items: stretch;
}
.integ-panel[hidden] { display: none; }
.integ-panel.is-on { animation: mock-shelf .4s ease; }
a.mp-card {
    color: inherit;
    text-decoration: none;
}
a.mp-card h3 { color: var(--ink); }
.integ-band {
    margin-top: -1px;
    background:
        radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 62%),
        linear-gradient(180deg, var(--paper-2), var(--paper) 88%);
}
.integ-band .wrap { padding-top: .4rem; }
.crumb {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin: 0;
    padding-top: 1.6rem;
    color: var(--muted);
    font-size: .82rem;
}
.crumb a { color: var(--muted); font-weight: 550; }
.crumb a:hover { color: var(--brand); }
.integ-hero {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
    padding: 1.6rem 0 3.4rem;
}
.integ-hero-copy { min-width: 0; }
.integ-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 .85rem; }
.integ-chip {
    display: inline-flex;
    align-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
    border-radius: 99px;
    padding: .28rem .65rem;
    font-size: .75rem;
    font-weight: 700;
}
.integ-hero h1 {
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    margin: 0 auto 1rem;
    max-width: 18ch;
}
.integ-hero .lede {
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 42rem;
    margin: 0 auto 1.35rem;
    color: var(--muted);
}
.integ-hero .hero-actions { justify-content: center; }
.integ-link {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem 1.6rem 1.2rem;
    box-shadow: 0 40px 80px -50px rgba(43, 107, 255, .55);
    transition:
        transform .5s cubic-bezier(.22, .82, .28, 1),
        border-color .45s ease,
        box-shadow .5s ease;
}
.integ-link-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr 6.5rem;
    gap: .6rem;
    align-items: center;
}
.integ-link-tile {
    width: 6.5rem;
    height: 6.5rem;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.integ-link-tile.is-zeoks {
    background: #050814;
    border-radius: 22px;
    box-shadow: 0 18px 36px -24px rgba(5, 8, 20, .45);
}
.integ-link-tile.is-zeoks img { width: 78%; height: 78%; object-fit: contain; }
.integ-link-tile.is-partner {
    background: var(--logo-plate);
    border-radius: 50%;
    border: 1px solid var(--line);
    box-shadow: 0 18px 36px -24px rgba(15, 28, 58, .35);
    padding: .7rem;
}
.integ-link-tile.is-partner img { width: 100%; height: 100%; object-fit: contain; }
.integ-link-tile.is-partner strong {
    font-family: var(--display);
    font-size: .95rem;
    letter-spacing: -.03em;
    text-align: center;
    color: #172033;
    line-height: 1.15;
    padding: .2rem;
}
html.dark .integ-link-tile.is-partner strong { color: #172033; }
.integ-link-wire {
    height: 0;
    border-top: 2px dashed #2b6bff;
    position: relative;
}
.integ-link-wire::before {
    content: "";
    position: absolute;
    left: 0;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2b6bff;
}
.integ-link-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.1rem;
    color: var(--muted);
    font-size: .92rem;
}
.integ-link-meta b { font-weight: 700; color: var(--ink); text-align: right; }
.integ-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18.75rem;
    gap: 4rem;
    align-items: start;
    padding: .4rem 0 3.5rem;
}
.integ-article h2 {
    font-size: clamp(1.55rem, 2.4vw, 1.9rem);
    letter-spacing: -.03em;
    margin: 1.8rem 0 .7rem;
}
.integ-article h2:first-child { margin-top: 0; }
.integ-article h3 {
    margin: 1.35rem 0 .35rem;
    font-size: 1.02rem;
    letter-spacing: -.02em;
}
.integ-article p { color: var(--muted); line-height: 1.7; margin: 0 0 .9rem; }
.integ-points {
    margin: .2rem 0 1.1rem;
    padding: 0;
    list-style: none;
}
.integ-points li {
    position: relative;
    padding-left: 1.15rem;
    margin: .45rem 0;
    color: var(--ink);
}
.integ-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--brand);
}
.integ-aside {
    position: sticky;
    top: 5.5rem;
    display: grid;
    gap: 1.1rem;
    align-content: start;
}
.integ-promo {
    position: relative;
    overflow: hidden;
    background: #0f1c3a;
    color: #fff;
    border-radius: 18px;
    padding: 1.25rem 1.2rem 1.15rem;
}
.integ-promo::after {
    content: "";
    position: absolute;
    right: -2.2rem;
    bottom: -2.6rem;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    background: #2b6bff;
}
.integ-promo b,
.integ-promo p,
.integ-promo .btn { position: relative; z-index: 1; }
.integ-promo b {
    display: block;
    font-family: var(--display);
    font-size: 1.2rem;
    letter-spacing: -.03em;
    line-height: 1.25;
    margin-bottom: .4rem;
}
.integ-promo p { margin: 0 0 .9rem; color: #d5def2; font-size: .92rem; }
.btn-white {
    background: #fff;
    color: #0f1c3a;
    border-color: #fff;
}
.integ-side-links {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .7rem 0 .25rem;
}
.integ-side-links p {
    margin: 0;
    padding: .15rem .95rem .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.integ-side-links a {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .72rem .95rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transition: color .35s ease, background .35s ease;
}
.integ-ask {
    background: var(--paper-2);
    padding: 5.2rem 0;
}
.integ-ask-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    align-items: center;
}
.integ-ask h2 {
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.04em;
    margin: 0 0 1rem;
}
.integ-ask h2 span { color: var(--brand); }
.integ-ask p { color: var(--muted); line-height: 1.7; }
.integ-ask-line { font-weight: 700; color: var(--ink); }
.integ-ask-line a { color: inherit; }
.integ-ask-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 1.4rem 1.35rem 1.3rem;
    box-shadow: 0 30px 70px -40px rgba(15, 28, 58, .45);
}
.integ-ask .form-stack { max-width: none; }
.integ-ask-card > p { margin: 0 0 .2rem; font-weight: 700; color: var(--ink); }
.integ-ask-ok { color: var(--brand); font-weight: 650; }
.integ-ask input,
.integ-ask textarea {
    background: var(--paper-2);
    border-color: var(--line);
    border-radius: 12px;
}
.integ-ask .btn { width: 100%; justify-content: center; }
.integ-similar { padding: 3.5rem 0 4.5rem; }
.integ-similar-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.3rem;
}
.integ-similar h2 { margin: .15rem 0 0; font-size: clamp(1.7rem, 3vw, 2.15rem); }
.integ-sim-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.integ-sim {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 1.4rem;
    gap: .85rem;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .7rem .85rem .7rem .7rem;
    color: inherit;
    text-decoration: none;
    transition:
        transform .5s cubic-bezier(.22, .82, .28, 1),
        border-color .45s ease,
        box-shadow .5s ease;
}
.integ-sim-logo {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--logo-plate);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: .35rem;
}
/*
 * Koyu temada yuvarlak plaka yok — yalnızca logo görünür.
 * Açık temada `--logo-plate` (#ffffff) kalır; oradaki beyaz daire
 * kartın içinde logoyu taşıyan tasarım öğesi.
 */
html.dark .integ-sim-logo {
    background: transparent;
    border-color: transparent;
}
.integ-sim-logo img { width: 100%; height: 100%; object-fit: contain; }
.integ-sim-logo strong { color: var(--ink); font-family: var(--display); }
.integ-sim-copy { display: grid; min-width: 0; }
.integ-sim-copy strong {
    color: var(--ink);
    font-size: .98rem;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.integ-sim-copy em {
    font-style: normal;
    color: var(--muted);
    font-size: .82rem;
}
.integ-sim-go { color: var(--muted); }
@media (max-width: 900px) {
    .integ-menu { grid-template-columns: 1fr; }
    .integ-cats {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
    }
    .integ-cat { width: auto; flex: 1 1 9.5rem; }
    .integ-grid { grid-template-columns: 1fr 1fr; }
    .integ-hero,
    .integ-layout,
    .integ-ask-grid { grid-template-columns: 1fr; }
    .integ-hero { gap: 1.6rem; padding-bottom: 2.4rem; }
    .integ-hero h1 { max-width: none; }
    .integ-aside { position: static; }
    .integ-sim-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .integ-grid,
    .integ-sim-grid { grid-template-columns: 1fr; }
    .integ-similar-head { align-items: start; flex-direction: column; }
}

.product-stage {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.1rem;
    align-items: stretch;
}
.product-stage .ios-lock {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: .4rem;
}
.mock-store,
.mock-admin {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(43, 107, 255, .55);
    min-height: 100%;
}
.mock-store.mock-sf {
    background: #161922;
    color: #e7ebf4;
    border-color: #2a3140;
}
.mock-chrome {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--line);
    background: var(--bar);
    color: var(--muted);
    font-size: .72rem;
}
.mock-store.mock-sf .mock-chrome {
    background: #12151c;
    border-bottom-color: #2a3140;
    color: #9aa4b8;
}
.mock-chrome p { margin: 0; }
.mock-dots {
    width: 2.4rem;
    height: .55rem;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff6b6b 0 28%, #ffd56b 28% 62%, #61d17a 62% 100%);
}
.mock-sf-top {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .4rem .75rem;
    background: #1b2333;
    color: rgba(255,255,255,.72);
    font-size: .62rem;
    letter-spacing: .02em;
}
.mock-sf-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .55rem;
    align-items: center;
    padding: .55rem .7rem .4rem;
    background: #1f2430;
}
.mock-sf-brand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: -.04em;
    color: #fff;
    white-space: nowrap;
}
.mock-sf-brand img { height: 18px; width: auto; }
.mock-sf-brand span span { color: #2b6bff; }
.mock-sf-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.85rem;
    padding: 0 .2rem 0 .7rem;
    border-radius: .7rem;
    background: #2a3140;
    color: #9aa4b8;
    font-size: .68rem;
    min-width: 0;
}
.mock-sf-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mock-sf-search em {
    font-style: normal;
    background: #2b6bff;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .22rem .55rem;
}
.mock-sf-tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #e7ebf4;
    font-size: .68rem;
    font-weight: 650;
    white-space: nowrap;
}
.mock-sf-bag {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #2a3140;
    display: grid;
    place-items: center;
    font-size: .58rem;
    position: relative;
}
.mock-sf-bag::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 1px solid rgba(43, 107, 255, .55);
    animation: mock-pulse 2.4s ease-in-out infinite;
}
.mock-sf-nav {
    display: flex;
    gap: .45rem;
    padding: 0 .7rem .55rem;
    background: #1f2430;
    color: #9aa4b8;
    font-size: .68rem;
    font-weight: 650;
}
.mock-sf-nav .is-on {
    color: #e7ebf4;
    background: #2a3140;
    border-radius: .55rem;
    padding: .2rem .5rem;
}
.mock-sf-stage {
    position: relative;
    margin: .55rem .7rem 0;
    aspect-ratio: 21 / 8;
    min-height: 7.2rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #2a3140;
}
.mock-sf-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: .85rem 1.6rem;
    opacity: 0;
    pointer-events: none;
    color: #fff;
    transition: opacity .7s ease;
}
.mock-sf-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.mock-sf-slide.is-a {
    background:
        radial-gradient(800px 260px at 80% 20%, rgba(43, 107, 255, .28), transparent 55%),
        linear-gradient(105deg, #1a1412 0%, #3d2a22 45%, #fd4e14 140%);
}
.mock-sf-slide.is-b {
    background: linear-gradient(135deg, #0f172a, #1e3a5f 55%, #2b6bff);
}
.mock-sf-slide.is-c {
    background: linear-gradient(135deg, #1b2333, #243152 40%, #1a3cff);
}
.mock-sf-slide h3 {
    margin: 0;
    font-size: clamp(.85rem, 2.2vw, 1.15rem);
    letter-spacing: -.03em;
    text-transform: uppercase;
    max-width: 16ch;
    color: #fff;
}
.mock-sf-slide p {
    margin: .35rem 0 .55rem;
    color: rgba(255,255,255,.8);
    font-size: .68rem;
    max-width: 28ch;
}
.mock-sf-slide button {
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    padding: .35rem .7rem;
}
.mock-sf-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 1.55rem;
    height: 1.55rem;
    border: 0;
    border-radius: 999px;
    background: #2a3140;
    color: #e7ebf4;
    transform: translateY(-50%);
    cursor: pointer;
}
.mock-sf-arrow.is-prev { left: .4rem; }
.mock-sf-arrow.is-next { right: .4rem; }
.mock-sf-dots {
    position: absolute;
    left: 50%;
    bottom: .45rem;
    z-index: 2;
    display: flex;
    gap: .28rem;
    transform: translateX(-50%);
}
.mock-sf-dots button {
    width: .35rem;
    height: .35rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: width .35s ease, background .35s ease;
}
.mock-sf-dots button.is-active {
    width: 1.15rem;
    background: #fff;
}
.mock-sf-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding: .55rem .7rem 0;
}
.mock-sf-banner {
    position: relative;
    overflow: hidden;
    min-height: 4.4rem;
    border: 0;
    border-radius: .85rem;
    padding: .7rem .75rem;
    color: #fff;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .15rem;
}
.mock-sf-banner strong { font-size: .82rem; }
.mock-sf-banner span { font-size: .62rem; opacity: .85; }
.mock-sf-banner.is-b { background: linear-gradient(145deg, #1e3a5f, #2b6bff); }
.mock-sf-banner.is-c { background: linear-gradient(145deg, #1b2333, #1a3cff); }
.mock-sf-banner.is-on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.mock-sf-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.35));
    pointer-events: none;
    transition: transform .5s ease;
}
.mock-sf-banner:hover::after { transform: scale(1.06); }
.mock-sf-shelf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    padding: .55rem .7rem .75rem;
}
.mock-sf-shelf article {
    display: none;
    justify-content: space-between;
    gap: .4rem;
    padding: .45rem .55rem;
    border-radius: .7rem;
    background: #1f2430;
    color: #e7ebf4;
    font-size: .68rem;
    animation: mock-shelf .45s ease;
}
.mock-sf-shelf article.is-on { display: flex; }
.mock-sf-shelf b { font-weight: 650; }
.mock-sf-shelf span { color: #9aa4b8; }
@keyframes mock-pulse {
    0%, 100% { opacity: .25; transform: scale(1); }
    50% { opacity: .8; transform: scale(1.08); }
}
@keyframes mock-shelf {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.mock-kicker {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    font-weight: 700;
}
.mock-admin-body {
    display: grid;
    grid-template-columns: 7.2rem 1fr;
    min-height: 14rem;
}
.mock-admin-body aside {
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: .9rem .7rem;
    background: var(--paper-2);
    border-right: 1px solid var(--line);
    font-size: .78rem;
    color: var(--muted);
}
.mock-admin-body aside span,
.mock-admin-body aside button {
    padding: .35rem .45rem;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.mock-admin-body aside .is-on {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
}
.mock-admin {
    background: #161922;
    color: #e7ebf4;
    border-color: #2a3140;
}
.mock-admin .mock-chrome {
    background: #12151c;
    border-bottom-color: #2a3140;
    color: #9aa4b8;
}
.mock-admin-body aside {
    background: #12151c;
    border-right-color: #2a3140;
    color: #9aa4b8;
}
.mock-admin-body aside .is-on {
    background: #1f2430;
    color: #c5d4ff;
}
.mock-admin-body h3 { color: #e7ebf4; }
.mock-admin .mock-rows li {
    background: #1f2430;
    border-color: #3a4254;
}
.mock-admin-view { animation: mock-shelf .4s ease; }
.mock-admin-body > div { padding: 1rem 1.05rem 1.15rem; }
.mock-admin-body h3 { margin: .2rem 0 .8rem; font-size: 1.12rem; }
.mock-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mock-rows li {
    display: grid;
    grid-template-columns: 3.4rem 1fr auto;
    gap: .5rem;
    padding: .55rem .6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: .82rem;
    background: var(--card-lift);
}

.steps-track {
    position: relative;
}
.steps-track::before {
    content: "";
    position: absolute;
    top: 2.55rem;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-soft), var(--brand), var(--brand-soft));
    pointer-events: none;
}
.steps-track .step { position: relative; z-index: 1; }

.proof-grid,
.about-grid,
.lead-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.2rem;
    align-items: center;
}
.about-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }

/* --- Hakkımızda (yeniden) --- */
.about-hero { max-width: 46rem; padding-bottom: 1rem; }
.about-hero .lede { max-width: 42rem; margin-bottom: 1.7rem; }
.about-hero .hero-actions { margin-top: 0; }

.about-story {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3rem;
    align-items: start;
}
.about-story-copy h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -.038em;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}
.about-story-copy p {
    margin: 0 0 .95rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.7;
    text-wrap: pretty;
}
.about-story-sign {
    margin-top: 1.4rem !important;
    font-family: var(--display);
    font-weight: 700;
    color: var(--ink) !important;
    letter-spacing: -.02em;
}
.about-story-visual {
    position: sticky;
    top: calc(var(--header-bottom, 6.5rem) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}
.about-story-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-story-notes li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem .95rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    min-width: 0;
}
.about-story-notes strong {
    font-size: .86rem;
    letter-spacing: -.015em;
}
.about-story-notes span {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.45;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.about-value {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: 1.5rem 1.35rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
    transition:
        transform .45s cubic-bezier(.22, .82, .28, 1),
        border-color .4s ease,
        box-shadow .45s ease;
}
.about-value-ico {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    flex-shrink: 0;
}
.about-value-ico svg { width: 1.25rem; height: 1.25rem; }
.about-value h3 {
    margin: .35rem 0 0;
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.about-value p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.62;
    text-wrap: pretty;
}

.about-close {
    padding: 3.6rem 0;
    margin-top: 1rem;
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .22), transparent 62%),
        linear-gradient(168deg, #f7f9ff, #eef3ff 62%, #e9f0ff);
    border-top: 1px solid var(--line);
}
html.dark .about-close {
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .26), transparent 62%),
        linear-gradient(168deg, #0c1733, #111d3c 62%, #0d1730);
    border-top-color: rgba(255, 255, 255, .07);
}
.about-close-copy { max-width: 40rem; }
.about-close-copy h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin: 0 0 .9rem;
    text-wrap: balance;
}
.about-close-copy p {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.68;
    max-width: 34rem;
    text-wrap: pretty;
}
.about-close-copy .hero-actions { margin-top: 0; }
.about-close-note {
    margin: 1.1rem 0 0 !important;
    font-size: .85rem !important;
    color: var(--muted);
}
html.dark .about-close-copy h2 { color: #f2f6ff; }
html.dark .about-close-copy p { color: #c3cfe6; }

@media (hover: hover) {
    .about-value:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 18px 34px -26px rgba(43, 107, 255, .65);
    }
}

.proof-copy { padding: 1.4rem 1.35rem; min-height: 100%; }

/* --- E-fatura sayfası --- */
.ef-hero { max-width: 48rem; padding-bottom: 1.4rem; }
.ef-hero .lede { max-width: 42rem; margin-bottom: 1.7rem; }
.ef-hero .hero-actions { margin-top: 0; }

.ef-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.ef-hero-facts li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ef-hero-facts strong {
    font-family: var(--display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    color: var(--brand);
}
.ef-hero-facts span {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--muted);
}

.ef-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ef-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: 1.5rem 1.3rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ef-step-num {
    position: absolute;
    top: 1.15rem;
    right: 1.2rem;
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: color-mix(in srgb, var(--brand) 24%, transparent);
}
.ef-step-ico {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}
.ef-step-ico svg { width: 1.25rem; height: 1.25rem; }
.ef-step h3 {
    margin: .3rem 0 0;
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.ef-step p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.ef-vendors {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .85rem;
}
/* Beş kart: üst sıra 3 eşit kart, alt sıra 2 eşit kart ve ortalanmış. */
.ef-vendors > :nth-child(-n + 3) { grid-column: span 2; }
.ef-vendors > :nth-child(4) { grid-column: 2 / span 2; }
.ef-vendors > :nth-child(5) { grid-column: 4 / span 2; }
.ef-vendor {
    display: flex;
    align-items: center;
    gap: .95rem;
    min-width: 0;
    padding: 1.05rem 1.15rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
    transition:
        transform .4s cubic-bezier(.22, .82, .28, 1),
        border-color .4s ease,
        box-shadow .4s ease;
}
.ef-vendor-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 6.6rem;
    height: 2rem;
    color: var(--vendor, var(--brand));
}
/* Logoların en-boy oranları 1.5 ile 6.5 arasında değişiyor; optik boyut eşitlensin. */
.ef-vendor-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.ef-vendor-logo img[src*="bizimhesap"] { max-height: 1.9rem; }
.ef-vendor-logo img[src*="parasut"],
.ef-vendor-logo img[src*="logo.svg"] { max-height: 1.75rem; }
.ef-vendor-logo svg { width: 100%; height: 100%; display: block; }
html.dark .ef-vendor-logo img { filter: brightness(0) invert(1) opacity(.92); }
.ef-vendor-copy {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
}
.ef-vendor-copy strong {
    font-size: .95rem;
    letter-spacing: -.02em;
}
.ef-vendor-copy span {
    font-size: .8rem;
    line-height: 1.45;
    color: var(--muted);
    text-wrap: pretty;
}
.ef-integrations-foot {
    margin: 1.3rem 0 0;
    font-size: .85rem;
    color: var(--muted);
    text-align: center;
}
.ef-integrations-foot a { color: var(--brand); font-weight: 650; }

.ef-reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.ef-reason {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: 1.6rem 1.4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ef-reason-ico {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}
.ef-reason-ico svg { width: 1.25rem; height: 1.25rem; }
.ef-reason h3 {
    margin: .3rem 0 0;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -.022em;
}
.ef-reason p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.68;
    text-wrap: pretty;
}

.ef-deep {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 2.4rem;
    align-items: start;
    margin-top: 2.6rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line);
}
.ef-deep h3 {
    margin: 0 0 1rem;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.24;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.ef-deep p {
    margin: 0 0 .9rem;
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.72;
    text-wrap: pretty;
}
.ef-deep-panel {
    position: sticky;
    top: calc(var(--header-bottom, 6.5rem) + 1.5rem);
    padding: 1.25rem 1.2rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
    min-width: 0;
}
.ef-deep-panel .eyebrow { margin-bottom: .7rem; }
.ef-deep-rows {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ef-deep-rows li {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .55rem .6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card-lift);
    font-size: .8rem;
}
.ef-deep-rows span { color: var(--muted); }
.ef-deep-rows strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ef-deep-rows em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 650;
    color: var(--muted);
    white-space: nowrap;
}
.ef-deep-rows em.is-ok { color: color-mix(in srgb, #16a34a 82%, var(--ink)); }
.ef-deep-note {
    margin: .85rem 0 0 !important;
    font-size: .78rem !important;
    line-height: 1.5 !important;
}

.ef-close {
    padding: 3.6rem 0;
    margin-top: .5rem;
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .22), transparent 62%),
        linear-gradient(168deg, #f7f9ff, #eef3ff 62%, #e9f0ff);
    border-top: 1px solid var(--line);
}
html.dark .ef-close {
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .26), transparent 62%),
        linear-gradient(168deg, #0c1733, #111d3c 62%, #0d1730);
    border-top-color: rgba(255, 255, 255, .07);
}
.ef-close-inner { max-width: 44rem; }
.ef-close h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin: 0 0 .9rem;
    text-wrap: balance;
}
.ef-close p {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.68;
    max-width: 36rem;
    text-wrap: pretty;
}
.ef-close .hero-actions { margin-top: 0; }
html.dark .ef-close h2 { color: #f2f6ff; }
html.dark .ef-close p { color: #c3cfe6; }

/* --- Nasıl çalışır sayfası --- */
.ns-hero { max-width: 48rem; padding-bottom: 1.4rem; }
.ns-hero .lede { max-width: 43rem; margin-bottom: 1.7rem; }
.ns-hero .hero-actions { margin-top: 0; }

.ns-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.ns-hero-facts li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ns-hero-facts strong {
    font-family: var(--display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    color: var(--brand);
}
.ns-hero-facts span {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--muted);
}

.ns-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ns-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: 1.5rem 1.3rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ns-step-num {
    position: absolute;
    top: 1.15rem;
    right: 1.2rem;
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: color-mix(in srgb, var(--brand) 26%, transparent);
}
.ns-step-ico {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}
.ns-step-ico svg { width: 1.25rem; height: 1.25rem; }
.ns-step h3 {
    margin: .3rem 0 0;
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.ns-step p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.6;
    text-wrap: pretty;
}
.ns-steps-note {
    margin: 1.3rem 0 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}
.ns-steps-note a { color: var(--brand); font-weight: 650; }

.ns-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.ns-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: 1.6rem 1.4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ns-card-ico {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}
.ns-card-ico svg { width: 1.25rem; height: 1.25rem; }
.ns-card h3 {
    margin: .3rem 0 0;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.ns-card p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.68;
    text-wrap: pretty;
}

.ns-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.ns-info {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: 1.7rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.ns-info-ico {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
}
.ns-info-ico svg { width: 1.35rem; height: 1.35rem; }
.ns-info h3 {
    margin: .2rem 0 0;
    font-size: 1.15rem;
    line-height: 1.28;
    letter-spacing: -.026em;
    text-wrap: balance;
}
.ns-info p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.7;
    text-wrap: pretty;
}
.ns-checks {
    display: grid;
    gap: .45rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}
.ns-checks li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .855rem;
    line-height: 1.5;
    color: var(--ink);
}
.ns-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .34rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    box-shadow: inset 0 0 0 .22rem var(--brand);
}

.ns-pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 2.4rem;
    align-items: center;
    padding: 2rem 0 0;
    border-top: 1px solid var(--line);
}
.ns-pricing-copy h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    line-height: 1.14;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.ns-pricing-copy p {
    margin: 0 0 .85rem;
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.72;
    text-wrap: pretty;
}
.ns-pricing-link {
    display: inline-block;
    margin-top: .3rem;
    font-size: .9rem;
    font-weight: 650;
    color: var(--brand);
    text-decoration: none;
}
.ns-price-list {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ns-price-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding: .85rem 1.05rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.ns-price-label {
    font-size: .85rem;
    line-height: 1.4;
    color: var(--muted);
}
.ns-price-value {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.ns-price-value.is-zero { color: var(--brand); }

.ns-close {
    padding: 3.6rem 0;
    margin-top: .5rem;
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .22), transparent 62%),
        linear-gradient(168deg, #f7f9ff, #eef3ff 62%, #e9f0ff);
    border-top: 1px solid var(--line);
}
html.dark .ns-close {
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .26), transparent 62%),
        linear-gradient(168deg, #0c1733, #111d3c 62%, #0d1730);
    border-top-color: rgba(255, 255, 255, .07);
}
.ns-close-inner { max-width: 44rem; }
.ns-close h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin: 0 0 .9rem;
    text-wrap: balance;
}
.ns-close p {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.68;
    max-width: 36rem;
    text-wrap: pretty;
}
.ns-close .hero-actions { margin-top: 0; }
html.dark .ns-close h2 { color: #f2f6ff; }
html.dark .ns-close p { color: #c3cfe6; }

/* --- Ödeme sayfası --- */
.od-hero { max-width: 48rem; padding-bottom: 1.4rem; }
.od-hero .lede { max-width: 43rem; margin-bottom: 1.7rem; }
.od-hero .hero-actions { margin-top: 0; }

.od-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.od-hero-facts li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.od-hero-facts strong {
    font-family: var(--display);
    font-size: 1.2rem;
    letter-spacing: -.03em;
    color: var(--brand);
}
.od-hero-facts span {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--muted);
}

.od-reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.od-reason {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: 1.6rem 1.4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.od-reason-ico {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}
.od-reason-ico svg { width: 1.25rem; height: 1.25rem; }
.od-reason h3 {
    margin: .3rem 0 0;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.od-reason p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.68;
    text-wrap: pretty;
}

.od-group { margin-bottom: 1.9rem; }
.od-group:last-of-type { margin-bottom: 0; }
.od-group-head { margin-bottom: .9rem; max-width: 40rem; }
.od-group-head h3 {
    margin: 0 0 .25rem;
    font-size: 1.12rem;
    letter-spacing: -.024em;
    text-wrap: balance;
}
.od-group-head p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}

.od-gates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}
.od-gate {
    display: flex;
    align-items: center;
    gap: .95rem;
    min-width: 0;
    padding: 1.05rem 1.15rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
    transition:
        transform .4s cubic-bezier(.22, .82, .28, 1),
        border-color .4s ease,
        box-shadow .4s ease;
}
.od-gate-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: content-box;
    width: 5.4rem;
    height: 2rem;
    padding: .32rem .4rem;
    border-radius: 8px;
    color: var(--gate, var(--brand));
}
.od-gate-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}
html.dark .od-gate-logo {
    /* Marka renkli logo koyu zeminde kaybolmasın: açık plaka üzerinde kalsın. */
    background: var(--logo-plate, #fff);
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .5);
}
.od-gate-copy {
    display: flex;
    flex-direction: column;
    gap: .16rem;
    min-width: 0;
}
.od-gate-copy strong {
    font-size: .95rem;
    letter-spacing: -.02em;
    transition: color .3s ease;
}
.od-gate-copy span {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--muted);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.od-integrations-foot {
    margin: 1.4rem 0 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
    text-wrap: pretty;
}
.od-integrations-foot a { color: var(--brand); font-weight: 650; }

.od-group-banks { margin-top: 1.9rem; }
.od-banks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}
/* 7 bankanın son tek kartı ortada dursun, boşlukta yalnız kalmasın. */
.od-banks > :last-child:nth-child(3n + 1) {
    grid-column: 2;
}
.od-bank {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: 1.15rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
    transition:
        transform .35s cubic-bezier(.22, .82, .28, 1),
        border-color .35s ease,
        box-shadow .35s ease;
}
.od-bank span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-bank-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.9rem;
    height: 2.3rem;
}
.od-bank-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}
html.dark .od-bank-logo {
    padding: .25rem .35rem;
    border-radius: 6px;
    background: var(--logo-plate, #fff);
}
.od-total {
    margin: 1rem 0 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--muted);
    text-align: center;
}

.od-alt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.od-alt-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: 1.7rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.od-alt-ico {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
}
.od-alt-ico svg { width: 1.35rem; height: 1.35rem; }
.od-alt-card h3 {
    margin: .2rem 0 0;
    font-size: 1.15rem;
    line-height: 1.28;
    letter-spacing: -.026em;
    text-wrap: balance;
}
.od-alt-card p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.7;
    text-wrap: pretty;
}
.od-checks {
    display: grid;
    gap: .45rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}
.od-checks li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .855rem;
    line-height: 1.5;
}
.od-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .34rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    box-shadow: inset 0 0 0 .22rem var(--brand);
}

.od-close {
    padding: 3.6rem 0;
    margin-top: .5rem;
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .22), transparent 62%),
        linear-gradient(168deg, #f7f9ff, #eef3ff 62%, #e9f0ff);
    border-top: 1px solid var(--line);
}
html.dark .od-close {
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .26), transparent 62%),
        linear-gradient(168deg, #0c1733, #111d3c 62%, #0d1730);
    border-top-color: rgba(255, 255, 255, .07);
}
.od-close-inner { max-width: 44rem; }
.od-close h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin: 0 0 .9rem;
    text-wrap: balance;
}
.od-close p {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.68;
    max-width: 36rem;
    text-wrap: pretty;
}
.od-close .hero-actions { margin-top: 0; }
html.dark .od-close h2 { color: #f2f6ff; }
html.dark .od-close p { color: #c3cfe6; }

@media (hover: hover) {
    .od-reason,
    .od-alt-card,
    .od-hero-facts li {
        transition:
            transform .45s cubic-bezier(.22, .82, .28, 1),
            border-color .45s ease,
            box-shadow .45s ease;
    }
    .od-reason:hover,
    .od-alt-card:hover,
    .od-hero-facts li:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 18px 34px -26px rgba(43, 107, 255, .65);
    }
    .od-reason-ico,
    .od-alt-ico {
        transition:
            background-color .4s ease,
            color .4s ease,
            transform .45s cubic-bezier(.22, .82, .28, 1);
    }
    .od-reason:hover .od-reason-ico,
    .od-alt-card:hover .od-alt-ico {
        background: var(--brand);
        color: #fff;
        transform: scale(1.06) rotate(-3deg);
    }
    .od-gate:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 16px 30px -24px rgba(43, 107, 255, .6);
    }
    .od-gate:hover .od-gate-copy strong { color: var(--brand); }
    .od-bank:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 14px 26px -22px rgba(43, 107, 255, .6);
    }
}

@media (hover: hover) {
    .ns-step,
    .ns-card,
    .ns-info,
    .ns-hero-facts li,
    .ns-price-list li {
        transition:
            transform .45s cubic-bezier(.22, .82, .28, 1),
            border-color .45s ease,
            box-shadow .45s ease;
    }
    .ns-step:hover,
    .ns-card:hover,
    .ns-info:hover,
    .ns-hero-facts li:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 18px 34px -26px rgba(43, 107, 255, .65);
    }
    .ns-step-ico,
    .ns-card-ico,
    .ns-info-ico {
        transition:
            background-color .4s ease,
            color .4s ease,
            transform .45s cubic-bezier(.22, .82, .28, 1);
    }
    .ns-step:hover .ns-step-ico,
    .ns-card:hover .ns-card-ico,
    .ns-info:hover .ns-info-ico {
        background: var(--brand);
        color: #fff;
        transform: scale(1.06) rotate(-3deg);
    }
    .ns-pricing-link:hover { text-decoration: underline; }
    .ns-price-list li:hover {
        border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    }
}

@media (hover: hover) {
    /* E-fatura: kart yükselir, ikon dolgusu marka rengine döner. */
    .ef-step,
    .ef-reason,
    .ef-hero-facts li {
        transition:
            transform .45s cubic-bezier(.22, .82, .28, 1),
            border-color .45s ease,
            box-shadow .45s ease,
            background-color .45s ease;
    }
    .ef-step:hover,
    .ef-reason:hover,
    .ef-hero-facts li:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 18px 34px -26px rgba(43, 107, 255, .65);
    }
    .ef-step-ico,
    .ef-reason-ico {
        transition:
            background-color .4s ease,
            color .4s ease,
            transform .45s cubic-bezier(.22, .82, .28, 1);
    }
    .ef-step:hover .ef-step-ico,
    .ef-reason:hover .ef-reason-ico {
        background: var(--brand);
        color: #fff;
        transform: scale(1.06) rotate(-3deg);
    }
    .ef-step-num {
        transition: color .4s ease;
    }
    .ef-step:hover .ef-step-num {
        color: color-mix(in srgb, var(--brand) 52%, transparent);
    }
    .ef-vendor:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 16px 30px -24px rgba(43, 107, 255, .6);
    }
    .ef-vendor-logo {
        transition: transform .45s cubic-bezier(.22, .82, .28, 1);
    }
    .ef-vendor:hover .ef-vendor-logo {
        transform: scale(1.05);
    }
    .ef-vendor-copy strong {
        transition: color .3s ease;
    }
    .ef-vendor:hover .ef-vendor-copy strong {
        color: var(--brand);
    }
    .ef-deep-rows li {
        transition:
            background-color .3s ease,
            border-color .3s ease,
            transform .3s ease;
    }
    .ef-deep-rows li:hover {
        background: var(--brand-soft);
        border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
        transform: translateX(3px);
    }
}

/* --- Sipariş ve iade sayfası --- */
.sr-hero { max-width: 48rem; padding-bottom: 1.4rem; }
.sr-hero .lede { max-width: 43rem; margin-bottom: 1.7rem; }
.sr-hero .hero-actions { margin-top: 0; }
.sr-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.sr-hero-facts li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.sr-hero-facts strong {
    font-family: var(--display);
    font-size: 1.2rem;
    letter-spacing: -.03em;
    color: var(--brand);
}
.sr-hero-facts span {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--muted);
}

.sr-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.sr-board-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: 1.7rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.sr-ico {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
}
.sr-ico svg { width: 1.35rem; height: 1.35rem; }
.sr-board-card h3 {
    margin: .2rem 0 0;
    font-size: 1.15rem;
    line-height: 1.28;
    letter-spacing: -.026em;
    text-wrap: balance;
}
.sr-board-card p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.7;
    text-wrap: pretty;
}
.sr-checks {
    display: grid;
    gap: .45rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}
.sr-checks li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .855rem;
    line-height: 1.5;
}
.sr-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .34rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    box-shadow: inset 0 0 0 .22rem var(--brand);
}

.sr-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.sr-rule {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: 1.6rem 1.4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.sr-rule-badge {
    align-self: flex-start;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sr-rule h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: -.024em;
    text-wrap: balance;
}
.sr-rule p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.68;
    text-wrap: pretty;
}
.sr-rule-note {
    padding-top: .65rem;
    border-top: 1px dashed var(--line);
    font-size: .82rem !important;
    line-height: 1.55 !important;
}

.sr-carriers {
    margin-top: 1.9rem;
    padding: 1.7rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.sr-carriers-head { margin-bottom: 1.1rem; max-width: 40rem; }
.sr-carriers-head h3 {
    margin: 0 0 .25rem;
    font-size: 1.12rem;
    letter-spacing: -.024em;
    text-wrap: balance;
}
.sr-carriers-head p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}
.sr-carrier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
}
.sr-carrier {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .8rem .9rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.01em;
    transition:
        transform .35s cubic-bezier(.22, .82, .28, 1),
        border-color .35s ease,
        box-shadow .35s ease;
}
.sr-carrier > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sr-carrier-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: content-box;
    width: 3.6rem;
    height: 1.5rem;
    padding: .2rem .3rem;
    border-radius: 6px;
    color: var(--carrier, var(--brand));
}
.sr-carrier-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}
html.dark .sr-carrier-logo {
    background: var(--logo-plate, #fff);
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .5);
}
.sr-carriers-foot {
    margin: 1.1rem 0 0;
    font-size: .83rem;
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
}
.sr-carriers-foot a { color: var(--brand); font-weight: 650; }

.sr-return-card {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.8rem;
    align-items: start;
    padding: 2rem 1.8rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
}
.sr-return-copy .eyebrow { margin-bottom: .5rem; }
.sr-return-copy h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.sr-return-copy > p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 34rem;
    text-wrap: pretty;
}
.sr-return-steps {
    display: grid;
    gap: .6rem;
}
.sr-step {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    grid-template-areas:
        "num title"
        "num copy";
    column-gap: .8rem;
    row-gap: .1rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 13px;
}
.sr-step-num {
    grid-area: num;
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .82rem;
    font-weight: 700;
}
.sr-step strong {
    grid-area: title;
    font-size: .92rem;
    letter-spacing: -.02em;
}
.sr-step > span:last-child {
    grid-area: copy;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--muted);
}

.sr-close {
    padding: 3.6rem 0;
    margin-top: .5rem;
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .22), transparent 62%),
        linear-gradient(168deg, #f7f9ff, #eef3ff 62%, #e9f0ff);
    border-top: 1px solid var(--line);
}
html.dark .sr-close {
    background:
        radial-gradient(ellipse 55% 90% at 82% 8%, rgba(43, 107, 255, .26), transparent 62%),
        linear-gradient(168deg, #0c1733, #111d3c 62%, #0d1730);
    border-top-color: rgba(255, 255, 255, .07);
}
.sr-close-inner { max-width: 44rem; }
.sr-close h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin: 0 0 .9rem;
    text-wrap: balance;
}
.sr-close p {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.68;
    max-width: 36rem;
    text-wrap: pretty;
}
.sr-close .hero-actions { margin-top: 0; }
html.dark .sr-close h2 { color: #f2f6ff; }
html.dark .sr-close p { color: #c3cfe6; }

@media (hover: hover) {
    .sr-board-card,
    .sr-rule,
    .sr-hero-facts li {
        transition:
            transform .45s cubic-bezier(.22, .82, .28, 1),
            border-color .45s ease,
            box-shadow .45s ease;
    }
    .sr-board-card:hover,
    .sr-rule:hover,
    .sr-hero-facts li:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 18px 34px -26px rgba(43, 107, 255, .65);
    }
    .sr-ico {
        transition:
            background-color .4s ease,
            color .4s ease,
            transform .45s cubic-bezier(.22, .82, .28, 1);
    }
    .sr-board-card:hover .sr-ico {
        background: var(--brand);
        color: #fff;
        transform: scale(1.06) rotate(-3deg);
    }
    .sr-carrier:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
        box-shadow: 0 14px 26px -22px rgba(43, 107, 255, .6);
    }
    .sr-carrier:hover > span:last-child { color: var(--brand); }
    .sr-step {
        transition:
            transform .3s ease,
            border-color .3s ease,
            background-color .3s ease;
    }
    .sr-step:hover {
        transform: translateX(3px);
        border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
        background: var(--brand-soft);
    }
    .sr-step-num {
        transition:
            background-color .35s ease,
            color .35s ease;
    }
    .sr-step:hover .sr-step-num {
        background: var(--brand);
        color: #fff;
    }
}

.sale-snap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.25rem 1.15rem 1.15rem;
    box-shadow: 0 16px 32px -22px rgba(43, 107, 255, .5);
}
.sale-snap header { margin-bottom: .95rem; }
.sale-snap .eyebrow { margin-bottom: .35rem; }
.sale-snap h2 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: -.03em;
}
.sale-snap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.sale-snap li {
    display: grid;
    grid-template-columns: 5.6rem 1fr auto;
    gap: .55rem;
    align-items: center;
    padding: .75rem .8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2);
}
.sale-k {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}
.sale-snap strong {
    font-size: .92rem;
    letter-spacing: -.02em;
}
.sale-snap em {
    font-style: normal;
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
    padding: .2rem .5rem;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .sale-snap li {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
    .sale-k { grid-column: 1 / -1; }
    .sale-snap em { white-space: normal; }
}
.order-path,
.outcome-grid {
    display: grid;
    gap: 1rem;
}
.order-path { grid-template-columns: repeat(4, 1fr); }
.outcome-grid { grid-template-columns: repeat(3, 1fr); }
.path-step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.35rem 1.2rem 1.4rem;
    min-height: 100%;
    transition:
        transform .5s cubic-bezier(.22, .82, .28, 1),
        border-color .45s ease,
        box-shadow .5s ease;
}
.path-step h3 {
    margin: 0 0 .4rem;
    font-size: 1.08rem;
    letter-spacing: -.03em;
    line-height: 1.3;
}
.path-step p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}
.home-close {
    padding-bottom: 4.4rem;
}
.home-close h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    margin: 0 0 .7rem;
    max-width: 16ch;
}
.home-close .muted { margin: 0 0 1.4rem; max-width: 32rem; }
body.page-home,
body.page-home .feat-band,
body.page-home .band-paper {
    background: var(--paper);
}
.lead-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.3rem 1.25rem;
    box-shadow: 0 16px 32px -22px rgba(43, 107, 255, .5);
}
.lead-form { max-width: none; }

html.dark {
    --paper: #0c1220;
    --paper-2: #121a2c;
    --card: #151d30;
    --card-lift: #1b2744;
    --ink: #e8eefc;
    --muted: #9aa8c3;
    --line: #2a3650;
    --soft-line: #33497a;
    --bar: #1b2744;
    --logo-plate: #f4f6fb;
    --flag-alt-bg: #243152;
    --danger-bg: #3a2228;
    --danger-line: #6a3a42;
    --brand-soft: #1b2c55;
}
html.dark .sf-chat-msg.is-agent span { background: #243152; color: #e8eefc; }
html.dark .faq-plus { background: var(--bar); }
html.dark .trust-strip article,
html.dark .logo-chip,
html.dark .mock-store,
html.dark .mock-admin,
html.dark .lead-card,
html.dark .proof-copy,
html.dark .sale-snap {
    box-shadow: 0 16px 32px -24px rgba(0, 0, 0, .65);
}
html.dark .mock-hero-swatch,
html.dark .mock-swatch {
    background: linear-gradient(145deg, #3a5aa8, #2b6bff 58%, #1a3cff);
}
html.dark .night-sale,
html.dark .steps-band { background: linear-gradient(165deg, #10182c, #1a2d58 60%, #121a2c); }
html.dark .night-steps,
html.dark .night-step-btn { background: var(--card); }
html.dark .night-step-btn { border-color: var(--line); color: var(--muted); }
html.dark .night-step-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
html.dark .night-step-icons::before { background: var(--line); }
html.dark .night-step-panel strong { color: var(--ink); }
html.dark .night-step-panel p { color: var(--muted); }
html.dark .integ-hero .lede,
html.dark .integ-article p,
html.dark .integ-ask p { color: var(--muted); }
html.dark .integ-ask { background: var(--paper-2); }
html.dark .integ-ask-card > p,
html.dark .integ-side-links a,
html.dark .integ-sim-copy strong,
html.dark .integ-sim-logo strong { color: var(--ink); }
html.dark .logo-belt-link:hover img,
html.dark .logo-belt-link:focus-visible img { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .price:hover,
    .step:hover,
    .path-step:hover,
    .sale-snap:hover,
    .feat-tile:hover,
    .feat-catalog-card:hover,
    .mp-card:hover,
    .logo-chip:hover,
    .trust-strip article:hover,
    .mock-store:hover,
    .mock-admin:hover,
    .lead-card:hover,
    .trial-banner:hover,
    .summary:hover,
    .billing-card:hover,
    .access-card:hover,
    .audience article:hover,
    [data-reveal].is-in.card:hover,
    [data-reveal].is-in.price:hover,
    [data-reveal].is-in.feat-tile:hover,
    [data-reveal].is-in.feat-catalog-card:hover,
    [data-reveal].is-in.mp-card:hover,
    [data-reveal].is-in.step:hover,
    [data-reveal].is-in.path-step:hover {
        transform: translateY(-4px);
        border-color: var(--brand);
        box-shadow: 0 16px 32px -18px rgba(43, 107, 255, .42);
    }
    .feat-tab:hover:not(.is-on) {
        transform: translateY(-2px);
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-soft);
    }
    .integ-cat:hover:not(.is-on) {
        transform: translateY(-2px);
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-soft);
        box-shadow: 0 16px 32px -18px rgba(43, 107, 255, .42);
    }
    .integ-sim:hover,
    .integ-link:hover {
        transform: translateY(-4px);
        border-color: var(--brand);
        box-shadow: 0 16px 32px -18px rgba(43, 107, 255, .42);
    }
    .night-step-btn:hover:not(.is-on) {
        background: var(--brand-soft);
        border-color: var(--soft-line);
        color: var(--brand);
    }
    .integ-side-links a:hover {
        color: var(--brand);
        background: color-mix(in srgb, var(--brand) 8%, var(--card));
    }
    .feat-catalog-card:hover .feat-ico {
        background: var(--brand);
        color: #fff;
    }
    .faq-item:hover {
        transform: translateY(-2px);
        border-color: var(--brand);
        background: color-mix(in srgb, var(--brand) 6%, var(--card));
        box-shadow: 0 16px 32px -18px rgba(43, 107, 255, .45);
    }
    .faq-item:hover::after { opacity: .14; }
    .faq-item:hover .faq-q { color: var(--brand); }
    .faq-item:hover .faq-plus {
        color: #fff;
        background: var(--brand);
    }
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 22px -14px rgba(43, 107, 255, .55);
    }
    .apply-form input:hover,
    .apply-form textarea:hover {
        border-color: var(--brand);
        box-shadow: 0 12px 24px -16px rgba(43, 107, 255, .5);
    }
    .apply-top .brand:hover { transform: translateY(-2px); }
    .apply-login a:hover,
    .apply-legal a:hover { background-size: 100% 2px; }
    .apply-eye:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
    .theme-toggle:hover,
    .menu-btn:hover { transform: translateY(-1px); }
    .sf-chat-fab:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px -12px rgba(43, 107, 255, .7);
    }
    .site-footer li a:hover { color: var(--brand); }
    .site-footer li a:hover::after { width: 100%; }
    .site-footer .brand:hover { transform: translateY(-2px); }
    .more:hover,
    .muted a:hover,
    .blog-grid h3 a:hover,
    .post-toc a:hover { color: var(--brand); }
    .blog-chip:hover:not(.is-on) {
        transform: translateY(-2px);
        border-color: var(--brand);
        color: var(--brand);
        box-shadow: 0 12px 22px -16px rgba(43, 107, 255, .55);
    }
    .blog-card {
        padding: .65rem .65rem .85rem;
        border-color: var(--line);
        background: var(--card);
    }
    .blog-card[data-reveal].is-in.is-ready {
        transition: transform .35s cubic-bezier(.22, .82, .28, 1), border-color .3s ease, box-shadow .35s ease, background-color .3s ease;
    }
    .blog-card:hover,
    .blog-card:focus-within {
        border-color: rgba(43, 107, 255, .28);
        background: var(--card);
        transform: translateY(-4px);
        box-shadow: 0 22px 40px -26px rgba(15, 28, 58, .35), 0 2px 6px -2px rgba(15, 28, 58, .06);
    }
    .blog-card:hover .blog-card-media img,
    .blog-feature:hover .blog-feature-media img { transform: scale(1.045); }
    .blog-card:hover .blog-card-media::after,
    .blog-feature:hover .blog-feature-media::after { opacity: 1; }
    .blog-card:hover .blog-card-read,
    .blog-feature:hover .blog-feature-read {
        opacity: 1;
        transform: none;
    }
    .blog-card:hover .blog-card-read svg,
    .blog-feature:hover .blog-feature-read svg { transform: translateX(3px); }
    .blog-card:hover .blog-card-media,
    .blog-feature:hover .blog-feature-media {
        border-color: rgba(43, 107, 255, .18);
        box-shadow: 0 16px 30px -22px rgba(43, 107, 255, .45);
    }
    .blog-card:hover h3 a,
    .blog-feature:hover .blog-feature-copy h2 a,
    .blog-feature-copy h2 a:hover { color: var(--brand); }
    .blog-read:hover,
    .blog-feature:hover .blog-read { background-size: 100% 2px; }
    html.dark .blog-card:hover,
    html.dark .blog-card:focus-within {
        border-color: rgba(43, 107, 255, .38);
        background: color-mix(in srgb, var(--brand) 9%, var(--card));
        box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .6);
    }
    .blog-search input:hover,
    .blog-search input:focus {
        border-color: var(--brand);
        box-shadow: 0 12px 24px -16px rgba(43, 107, 255, .5);
        outline: none;
    }
    .mega-trigger:hover { color: var(--brand); background: rgba(241, 245, 249, .8); }
    .mega-link:hover { background: rgba(248, 250, 252, .95); }
    .mega-link:hover .mega-ico {
        background: #2b6bff;
        color: #fff;
        transform: scale(1.05);
        box-shadow: 0 8px 16px -8px rgba(43, 107, 255, .45);
    }
    .mega-link:hover strong { color: var(--brand); }
    .mega-link:hover .mega-go { opacity: 1; transform: none; }
    .mega-quick a:hover,
    .nav-account a:hover,
    .nav-account button.linkish:hover { color: var(--brand); }
    html.dark .mega-link:hover { background: rgba(30, 41, 59, .7); }
    html.dark .faq-item:hover {
        background: color-mix(in srgb, var(--brand) 12%, var(--card));
        border-color: var(--brand);
    }
    html.dark .faq-item:hover::after { opacity: .2; }
    html.dark .faq-item:has(.faq-check:checked) { border-color: var(--brand); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mega-panel { transition: opacity .01s linear, visibility .01s; }
    .mega-panel,
    .mega-panel.is-open,
    .mega-panel:not(.is-open) { transform: translateX(-50%); animation: none; }
    .mega-panel.is-open .mega-sheet,
    .mega-panel.is-open .mega-layout > *,
    .mega-panel.is-open .mega-link,
    .mega-panel.is-open .mega-ico,
    .mega-panel.is-open .mega-quick { animation: none; }
    .mega-trigger svg { transition: none; }
    .night-rotator-word { animation: none; transition: none; }
    .night-step-btn,
    .night-step-btn.is-on,
    .night-step-btn::after,
    .night-step-btn.is-on::after,
    .night-step-panel,
    .logo-belt-track,
    .logo-belt img { animation: none; transition: none; }
    .logo-belt-set[aria-hidden="true"] { display: none; }
    .logo-belt-row { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .logo-belt-set { flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 var(--pad); }
    .hero-copy,
    .hero-flip-scene { transition: none; }
    .hero-copy,
    .ios-lock,
    .cta-band {
        animation: none;
    }
    .ios-note { animation: none; }
    .mock-sf-bag::after,
    .mock-sf-shelf article,
    .integ-panel.is-on,
    .feat-catalog-panel { animation: none; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .faq-item,
    .faq-item::after,
    .faq-panel,
    .faq-body,
    .faq-q,
    .faq-plus,
    .faq-plus::after { transition: none; }
    .card:hover,
    .price:hover,
    .feat-tile:hover,
    .feat-catalog-card:hover,
    .mp-card:hover,
    .feat-tab:hover,
    .integ-cat:hover,
    .integ-sim:hover,
    .integ-link:hover,
    .night-step-btn:hover,
    .step:hover,
    .path-step:hover,
    .sale-snap:hover,
    .logo-chip:hover,
    .trust-strip article:hover,
    .mock-store:hover,
    .mock-admin:hover,
    .lead-card:hover,
    .btn:hover,
    .blog-card:hover .blog-card-media,
    .blog-feature:hover .blog-feature-media,
    .blog-chip:hover,
    .mega-status i { animation: none; }
    .mega-card:hover,
    .blog-card:hover,
    .faq-item:hover,
    .ef-step:hover,
    .ef-reason:hover,
    .ef-hero-facts li:hover,
    .ef-vendor:hover,
    .ef-deep-rows li:hover,
    .ef-step:hover .ef-step-ico,
    .ef-reason:hover .ef-reason-ico,
    .ef-vendor:hover .ef-vendor-logo { transform: none; }
    .sr-board-card:hover,
    .sr-rule:hover,
    .sr-hero-facts li:hover,
    .sr-carrier:hover,
    .sr-step:hover { transform: none; }
    .sr-board-card:hover .sr-ico { transform: none; }
    .sr-board-card,
    .sr-rule,
    .sr-hero-facts li,
    .sr-ico,
    .sr-carrier,
    .sr-step,
    .sr-step-num { transition: none; }
    .site-footer li a:hover,
    .site-footer .brand:hover,
    .apply-top .brand:hover,
    .sf-chat-fab:hover { transform: none; }
}

@media (max-width: 767px) {
    /*
     * `overflow-x: hidden` KALDIRILDI.
     *
     * Bu kural, telefonda bir öğe ekrandan taştığında sessizce kırpıyordu:
     * sayfa "bozuk" görünmüyor ama içerik kayboluyor, kullanıcı yatay
     * kaydıramıyor. Taşmanın kaynağı yokmuş gibi göründüğü için hata
     * ayıklamak da imkânsızlaşıyordu. Denetimde 320–414px arası tüm
     * sayfalarda `scrollWidth === innerWidth` çıktı; yani gizlemeye gerek
     * yok. Yeni bir taşma olursa görünür kalsın diye kural kaldırıldı.
     *
     * Not: `.util-inner` / `.util-note` mobil düzeni yukarıda
     * `max-width: 900px` bloğunda tanımlı. Burada `flex-wrap: nowrap` ile
     * tekrar tek satıra zorlamak, bilgilendirme metnini 11.5px'lik
     * boşlukta 6 satıra sıkıştırıp şeridi 118px yapıyordu; o kurallar
     * bu yüzden buradan çıkarıldı.
     */
    .util { font-size: .72rem; }
    /* Badge 44px dokunma alanıyla ortalanıyordu: 10.5px'lik bir etiket için
       64px yükseklik harcıyordu. Satır içi kalması yeterli. */
    .util-badge { align-self: center; }
    .dev-notice .wrap { flex-wrap: wrap; gap: .4rem .55rem; padding: .6rem 0; }
    .dev-notice p { font-size: .76rem; }
    .util-links a[href^="tel:"] { display: none; }
    .nav-inner { padding: .7rem 0; gap: .6rem; }
    .brand-mark { height: 32px; }
    .brand-word { font-size: 1.35rem; }
    .theme-toggle { width: 44px; height: 44px; }
    .hero-split { padding: 2.2rem 0 1.8rem; }
    .hero-split h1,
    .page-hero h1,
    .blog-hero h1,
    .section-head.is-center h1 {
        font-size: 1.85rem;
        line-height: 1.15;
        letter-spacing: -.03em;
    }
    .section { padding-bottom: 2.5rem; }
    .section-head.is-center { margin-bottom: 1.3rem; }
    .feat-band,
    .night-sale,
    .steps-band { padding: 2.4rem 0; margin-bottom: 2.4rem; }
    .cta-band { padding: 2.3rem 0; }
    .cta-band h2 { font-size: 1.7rem; }
    .hero-actions,
    .cta-band .wrap { display: flex; flex-direction: column; align-items: stretch; }
    .hero-actions .btn,
    .cta-band .btn,
    .post-cta .btn { width: 100%; min-height: 48px; }
    .feat-tabs,
    .blog-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: .5rem;
        margin-left: calc(var(--pad) * -1);
        margin-right: calc(var(--pad) * -1);
        padding: 0 var(--pad) .45rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .feat-tabs::-webkit-scrollbar,
    .blog-chips::-webkit-scrollbar { display: none; }
    .feat-tab,
    .blog-chip { flex-shrink: 0; scroll-snap-align: start; }
    .feat-tiles,
    .feat-catalog-grid,
    .price-grid,
    .blog-grid,
    .mp-grid { grid-template-columns: 1fr; gap: 1rem; }
    .feat-tile,
    .feat-catalog-card,
    .price,
    .blog-card { padding: 1.15rem; }
    /* Guven seridi: bes kart yatay kaydirilir, her kart kendi genisliginde kalir.
       Grid'de tek kolona indirmek yerine snap'li serit hem ferah hem tasmasiz. */
    .trust-strip {
        display: flex;
        flex-wrap: nowrap;
        gap: .7rem;
        overflow-x: auto;
        margin-left: calc(var(--pad) * -1);
        margin-right: calc(var(--pad) * -1);
        padding: .1rem var(--pad) .7rem;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pad);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .trust-strip::-webkit-scrollbar { display: none; }
    .trust-strip article {
        flex: 0 0 min(72vw, 16rem);
        min-width: 0;
        scroll-snap-align: center;
    }
    .trust-strip article > div { min-width: 0; }
    .trust-strip strong,
    .trust-strip p { overflow-wrap: anywhere; }

    /* 3 ve 4 kolonlu cikti izgaralari mobilde tek kolona iner; aksi halde metin ezilir. */
    .outcome-grid,
    .order-path { grid-template-columns: 1fr; gap: .7rem; }
    .feat-tile { min-height: 0; }
    .blog-hero { padding: 1.6rem 0 .4rem; gap: 1rem; }
    .blog-search { width: 100%; margin-top: .35rem; }
    .blog-search input { min-height: 48px; }
    .post-layout { display: flex; flex-direction: column; gap: 1.2rem; }
    .post-side { display: contents; }
    .post-toc { order: 1; }
    .post-main { order: 2; }
    .post-cta { order: 3; }
    .post-toc summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
    }
    .post-toc summary::after {
        content: "";
        width: .45rem;
        height: .45rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-top: -.2rem;
    }
    .post-toc[open] summary::after { transform: rotate(225deg); margin-top: .2rem; }
    .post-hero { padding-top: 1.4rem; }
    .post-cover { padding-top: 1rem; }
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem 1.2rem;
    }
    .foot-brand { grid-column: 1 / -1; }
    .site-footer { padding-bottom: 5.2rem; }
    .sf-chat { right: 1rem; bottom: 1rem; }
    .sf-chat-fab { width: 3rem; height: 3rem; font-size: .68rem; }
    .ios-lock,
    .mock-store,
    .mock-admin,
    .logo-belt { max-width: 100%; }

    /* ---------- Premium mobil katman ---------- */

    /* 1) Yatay tasma korumasi: genisligi sabit ne varsa kirpilir. */
    .wrap,
    .section,
    section { min-width: 0; }
    .hero-copy,
    .section-head,
    .lede,
    .muted { max-width: 100%; }
    .mega-card,
    .price,
    .blog-card,
    .feat-tile,
    .ios-lock,
    .mock-store,
    .mock-admin,
    .night-sale,
    .lead-card,
    .trial-banner { max-width: 100%; min-width: 0; }
    /* Grid/flex cocuklari daralirken icerigi disari itmesin. */
    .price > *,
    .blog-card > *,
    .feat-tile > *,
    .path-step > *,
    .lead-card > *,
    .trial-banner > * { min-width: 0; }
    .price h3,
    .blog-card h3,
    .feat-tile h3,
    .path-step h3,
    .price p,
    .blog-card p,
    .feat-tile p,
    .path-step p { overflow-wrap: anywhere; }
    .prose img,
    .post-cover img,
    .blog-card-media img { max-width: 100%; height: auto; }

    /* 2) Tipografik hiyerarsi: satirlar dengeli kirilir, dev baslikler kucultulur. */
    .hero-split h1,
    .page-hero h1,
    .blog-hero h1,
    .section-head.is-center h1 {
        font-size: clamp(1.95rem, 7.2vw, 2.35rem);
        line-height: 1.14;
        letter-spacing: -.035em;
        text-wrap: balance;
    }
    .section-head h2,
    .night-copy h2,
    .steps-band h2,
    .cta-band h2,
    .lead-split h2,
    .home-close h2,
    .feat-band h2,
    .apply-head h1 {
        font-size: clamp(1.55rem, 5.8vw, 1.95rem);
        line-height: 1.2;
        letter-spacing: -.028em;
        text-wrap: balance;
    }
    .card h3,
    .step h3,
    .price h3,
    .blog-card h3,
    .feat-tile h3,
    .path-step h3 {
        font-size: 1.08rem;
        line-height: 1.3;
        letter-spacing: -.015em;
        text-wrap: balance;
    }
    .lede,
    .muted,
    .section-head p,
    .blog-card p,
    .feat-tile p,
    .step p {
        font-size: .95rem;
        line-height: 1.6;
        text-wrap: pretty;
    }
    .eyebrow { margin-bottom: .5rem; }

    /* 3) Kart dokusu: agir golgeler kalkar, ince cizgi + yumusak kose kalir. */
    .card,
    .price,
    .step,
    .feat-tile,
    .feat-catalog-card,
    .mp-card,
    .path-step,
    .blog-card,
    .trust-strip article,
    .logo-chip,
    .lead-card,
    .trial-banner,
    .outcome-grid article {
        border-radius: 1.15rem;
        box-shadow: 0 1px 2px rgba(15, 28, 58, .04);
        border: 1px solid var(--line);
        background: var(--card);
    }
    html.dark .card,
    html.dark .price,
    html.dark .step,
    html.dark .feat-tile,
    html.dark .feat-catalog-card,
    html.dark .mp-card,
    html.dark .path-step,
    html.dark .blog-card,
    html.dark .trust-strip article,
    html.dark .logo-chip,
    html.dark .lead-card,
    html.dark .trial-banner,
    html.dark .outcome-grid article {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        border-color: var(--line);
    }
    .card,
    .price,
    .blog-card,
    .feat-tile { padding: 1.25rem; }

    /* 4) Dokunma alanlari: tum etkilesimli ogeler en az 44px.
          `.util-links a` BILEREK yok: üst şerit tek satırlık bilgilendirme
          bandı, 44px hedef orada başlığı 60px aşağı itiyordu. Bağlantı
          yüksekliği 32px'e sabitlendi; satırın tamamı zaten dar. */
    .mega-trigger,
    .nav-drawer-close,
    .menu-btn,
    .theme-toggle,
    .hero-actions .btn,
    .cta-band .btn,
    .post-cta .btn,
    .lead-card button,
    .apply-form button[type="submit"],
    .apply-login,
    .nav-account > a,
    .nav-account .btn,
    .feat-tab,
    .blog-chip,
    .faq-q,
    .trust-strip article a,
    .site-footer li a,
    .mega-quick a {
        min-height: 44px;
    }
    .btn,
    .btn-ghost,
    .btn-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        text-align: center;
    }
    .hero-actions .btn,
    .cta-band .btn,
    .post-cta .btn,
    .feat-more .btn,
    .form-actions .btn,
    .lead-card .btn,
    .apply-form .btn {
        width: 100%;
        justify-content: center;
    }
    .faq-q { padding-top: .95rem; padding-bottom: .95rem; }
    .site-footer li a {
        display: inline-flex;
        align-items: center;
        padding: .3rem 0;
    }

    /* 5) Yumusak yatay kaydirma: kenarda bosluk, ortada hizalama, gizli scrollbar. */
    .feat-tabs,
    .blog-chips,
    .night-step-icons,
    .logo-belt-row {
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: var(--pad);
    }
    .feat-tab,
    .blog-chip,
    .night-step-btn,
    .logo-belt-set article {
        scroll-snap-align: center;
    }
    .steps-track {
        display: flex;
        flex-wrap: nowrap;
        gap: .75rem;
        overflow-x: auto;
        margin-left: calc(var(--pad) * -1);
        margin-right: calc(var(--pad) * -1);
        padding: 0 var(--pad) .6rem;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pad);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .steps-track::-webkit-scrollbar { display: none; }
    .steps-track .step {
        flex: 0 0 min(78vw, 17.5rem);
        min-width: 0;
        scroll-snap-align: center;
    }
    .steps-band .steps-track { padding-bottom: .8rem; }
    /* Baslik mobilde tasmasin: nowrap kurali bu genislikte iptal. */
    .steps-band .section-head h2 {
        white-space: normal;
        font-size: clamp(1.55rem, 5.8vw, 1.95rem);
        line-height: 1.2;
        text-wrap: balance;
    }
    .steps-band .step { min-height: 0; }

    /* 6) Canli destek butonu drawer acikken gizlenir (z-index cakismasi olmasin). */
    body.nav-open .sf-chat { visibility: hidden; opacity: 0; }
}

/*
 * Hakkımızda — mobil katman.
 * Bu blok bilerek dosyanin sonunda: temel .about-* kurallari daha yukarida
 * tanimli oldugu icin ayni ozgullukte yazilan mobil kural onlari ezemezdi.
 */
@media (max-width: 900px) {
    .about-story {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .about-story-visual {
        position: static;
        top: auto;
    }
    /* Panel mock'u dar ekranda dikey duzen: 7.2rem yan menu icerigi ezmesin. */
    .about-story-visual .mock-admin-body {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .about-story-visual .mock-admin-body aside {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .3rem;
        padding: .6rem;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .about-story-visual .mock-admin-body aside button {
        padding: .45rem .2rem;
        font-size: .7rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .about-story-visual .mock-admin-body > div { padding: .85rem .8rem 1rem; }
    .about-story-visual .mock-admin-body h3 { font-size: 1rem; }
    .about-story-visual .mock-rows li {
        grid-template-columns: 2.9rem minmax(0, 1fr) auto;
        gap: .35rem;
        font-size: .76rem;
    }
    .about-values-grid {
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
    }
    .about-value { padding: 1.2rem 1.1rem; }
    .about-hero { padding-bottom: .5rem; }
    .about-hero .lede { margin-bottom: 1.4rem; }
}

@media (max-width: 640px) {
    .about-values-grid { grid-template-columns: 1fr; }
    .about-story-notes { grid-template-columns: 1fr; }
    .about-close { padding: 2.4rem 0; }
    .about-close-copy h2 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
    .about-close-copy p { font-size: .95rem; }
}

/*
 * E-fatura — mobil katman.
 * Temel .ef-* kurallari daha yukarida tanimli; ayni ozgullukte yazilan
 * mobil kural onlari ezemeyecegi icin bu blok dosyanin sonunda durur.
 */
@media (max-width: 1100px) {
    /* 6 kolonlu ızgara bu aralıkta kartları daraltır; 2 sütuna in. */
    .ef-vendors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ef-vendors > :nth-child(-n + 4) { grid-column: auto; }
    /* Beşinci kart tek başına kalır: iki sütun genişliğinde, ortalı. */
    .ef-vendors > :nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - .43rem);
    }
}

@media (max-width: 900px) {
    .ef-steps { grid-template-columns: 1fr 1fr; gap: .8rem; }
    .ef-step { padding: 1.2rem 1.05rem; }
    .ef-step-num { font-size: 1.6rem; top: .95rem; right: 1rem; }
    .ef-vendors { grid-template-columns: 1fr; }
    /* Açık kolon yerleşimi kapatılmazsa örtük kolonlar kartları daraltır. */
    .ef-vendors > * { grid-column: auto !important; grid-row: auto !important; }
    .ef-vendor-logo { width: 5.6rem; height: 2rem; }
    .ef-reasons { grid-template-columns: 1fr; gap: .8rem; }
    .ef-deep {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        margin-top: 2rem;
        padding-top: 1.8rem;
    }
    .ef-deep-panel { position: static; top: auto; }
    .ef-hero-facts { gap: .55rem; margin-top: 1.8rem; }
    .ef-hero-facts li { padding: .8rem .85rem; }
    .ef-hero-facts strong { font-size: 1.15rem; }
    .ef-hero-facts span { font-size: .76rem; }
}

@media (max-width: 640px) {
    .ef-steps { grid-template-columns: 1fr; }
    .ef-close { padding: 2.4rem 0; }
    .ef-close h2 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
    .ef-close p { font-size: .95rem; }
}

/* --- Mobil hero sıkıştırması (e-fatura / ödeme / nasıl çalışır / süreç) ---
 *
 * Ölçüm (375px, /e-fatura): hero 689px — ekranı neredeyse tek başına dolduruyor.
 * Kırılım: istatistik kartları 186px, CTA butonları (tek kolon) 115px,
 * hero iç boşluğu 2×~70px. Masaüstünde bu bloklar yan yana duruyor, telefonda
 * alt alta yığılıp sayfayı aşağı itiyordu. Hero küçük telefonda ikiye katlanıp
 * "sayfanın yarısı giriş" görüntüsü veriyordu.
 *
 * Çözüm: kenar boşlukları daraltıldı, CTA'lar yan yana (48px hedef korunuyor),
 * istatistik kartları 3 sütunda kompakt satır oldu.
 */
@media (max-width: 640px) {
    .ef-hero,
    .od-hero,
    .ns-hero,
    .sr-hero,
    .integ-page-hero,
    .about-hero,
    .integ-hero {
        padding-bottom: .9rem;
    }
    .ef-hero .hero-actions,
    .integ-hero .hero-actions,
    .od-hero .hero-actions,
    .ns-hero .hero-actions,
    .sr-hero .hero-actions,
    .about-hero .hero-actions,
    .integ-page-hero .hero-actions,
    .page-hero .hero-actions,
    .blog-hero .hero-actions,
    .post-hero .hero-actions {
        flex-direction: row;
        margin-top: 1.2rem;
        gap: .5rem;
    }
    .ef-hero .hero-actions .btn,
    .integ-hero .hero-actions .btn,
    .od-hero .hero-actions .btn,
    .ns-hero .hero-actions .btn,
    .sr-hero .hero-actions .btn,
    .about-hero .hero-actions .btn,
    .integ-page-hero .hero-actions .btn,
    .page-hero .hero-actions .btn,
    .blog-hero .hero-actions .btn,
    .post-hero .hero-actions .btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        /* Masaüstü `.btn` dolgusu iki butona ~350px yer ayırıyor; 375px'te
           yan yana sığmaz. Yatay dolgu kısaltıldı, `min-height` korunuyor. */
        min-height: 48px;
        height: auto;
        padding: .7rem .75rem;
        font-size: .9rem;
        line-height: 1.2;
    }
    .ef-hero-facts,
    .od-hero-facts,
    .ns-hero-facts,
    .sr-hero-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
        margin-top: 1.3rem;
    }
    .ef-hero-facts li,
    .od-hero-facts li,
    .ns-hero-facts li,
    .sr-hero-facts li {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        padding: .6rem .55rem;
    }
    .ef-hero-facts strong,
    .od-hero-facts strong,
    .ns-hero-facts strong,
    .sr-hero-facts strong {
        font-size: .95rem;
        line-height: 1.2;
    }
    .ef-hero-facts span,
    .od-hero-facts span,
    .ns-hero-facts span,
    .sr-hero-facts span {
        font-size: .68rem;
        line-height: 1.3;
    }
}

/*
 * Nasıl çalışır — mobil katman.
 * Aynı özgüllükteki temel .ns-* kuralları ezilebilsin diye dosyanın sonunda.
 */
@media (max-width: 1100px) {
    .ns-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ns-cards { grid-template-columns: 1fr; }
    .ns-pricing-grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
}

@media (max-width: 900px) {
    .ns-info-grid { grid-template-columns: 1fr; }
    .ns-hero-facts { gap: .55rem; margin-top: 1.8rem; }
    .ns-hero-facts li { padding: .8rem .85rem; }
    .ns-hero-facts strong { font-size: 1.15rem; }
    .ns-hero-facts span { font-size: .76rem; }
    .ns-step { padding: 1.2rem 1.05rem; }
    .ns-step-num { font-size: 1.3rem; top: .95rem; right: 1rem; }
    .ns-steps-note { text-align: left; }
}

@media (max-width: 640px) {
    .ns-steps { grid-template-columns: 1fr; }
    .ns-close { padding: 2.4rem 0; }
    .ns-close h2 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
    .ns-close p { font-size: .95rem; }
    .ns-price-list li { padding: .75rem .9rem; }
}

/*
 * Ödeme — mobil katman.
 */
@media (max-width: 1100px) {
    .od-gates { grid-template-columns: 1fr; }
    /* Tek sütunda kartlar gereğinden geniş kalmasın. */
    .od-gate { max-width: 34rem; }
    .od-banks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .od-banks > :last-child:nth-child(3n + 1) { grid-column: auto; }
}

@media (max-width: 900px) {
    .od-reasons { grid-template-columns: 1fr; gap: .8rem; }
    .od-alt-grid { grid-template-columns: 1fr; }
    .od-hero-facts { gap: .55rem; margin-top: 1.8rem; }
    .od-hero-facts li { padding: .8rem .85rem; }
    .od-hero-facts strong { font-size: 1.05rem; }
    .od-hero-facts span { font-size: .76rem; }
    .od-integrations-foot { text-align: left; }
}

@media (max-width: 640px) {
    .od-close { padding: 2.4rem 0; }
    .od-close h2 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
    .od-close p { font-size: .95rem; }
    .od-gate { padding: .9rem 1rem; gap: .8rem; }
    .od-gate-logo { width: 4.6rem; height: 1.7rem; }
    .od-banks { grid-template-columns: 1fr; }
    .od-banks > :last-child:nth-child(3n + 1) { grid-column: auto; }
    .od-bank { padding: .85rem 1rem; }
}

/*
 * ============================================================================
 * LIQUID GLASS — AŞAMA 3: Liquid Blue butonlar ve aktif sekmeler
 * ============================================================================
 *
 * NEDEN Tailwind sınıfı DEĞİL de burada:
 *   `.btn` site.css'in SAHİPLENDİĞİ bir bileşen ve 20+ sayfada, 60+ yerde
 *   kullanılıyor. Her kullanım yerine `bg-gradient-to-tr from-... to-...`
 *   yazmak 60+ dosyaya dokunmak demek; biri atlanınca butonlar yarı cam
 *   yarı düz kalır. Tek kaynaktan yönetmek hem tutarlı hem geri alınabilir.
 *   Bu blok legacy katmanının SONUNDA: eşit özgüllükte önceki `.btn`
 *   kurallarını (satır ~809) devralıp geçersiz kılıyor.
 *
 * NEDEN gradyan `::before` katmanında:
 *   CSS'te `background-image` (gradyan) interpolate EDİLEMEZ. `transition:
 *   background-image` yazmak renk sıçramasıyla sonuçlanır — "sıvı" değil,
 *   düz bir takas. Bu yüzden hover gradyanı ayrı bir katmana kondu ve
 *   `opacity` ile geçiş yapılıyor. `opacity` compositor'da çalışır: ana
 *   thread boş kalır, akış gerçekten yumuşak olur.
 *
 * NEDEN `translateZ(0)`:
 *   Butonu kendi compositor katmanına alır; hover'daki scale büyütmesi
 *   layout/paint tetiklemez, sadece transform olarak işlenir.
 *
 * İç ışık (`inset 0 1px 1px rgba(255,255,255,.4)`) Apple'ın butonlarındaki
 * üst kenar kırılması: düz mavi bir bloğu "cam" gibi okutan tek detay bu.
 * `filter: drop-shadow` bilerek YOK — her karede yeniden rasterize edilir.
 */
.btn {
    position: relative;
    isolation: isolate;
    background-color: #2358e8;
    border-color: rgba(96, 165, 250, .34);
    color: #fff;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .4),
        0 10px 24px -14px rgba(43, 107, 255, .5);
    transform: translateZ(0);
    transition:
        border-color .45s ease,
        color .45s ease,
        box-shadow .5s ease,
        transform .5s cubic-bezier(.22, .82, .28, 1);
}

/* Taban gradyanı: her zaman görünür, sayfa yüklenirken buton düz renk değil. */
.btn::before,
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.btn::before {
    background-image: linear-gradient(to top right, rgba(26, 84, 232, .96), rgba(63, 123, 255, .96));
    z-index: -1;
}

/* Hover gradyanı: yalnızca opaklığı değişir. */
.btn::after {
    background-image: linear-gradient(to top right, rgba(43, 107, 255, .97), rgba(96, 165, 250, .97));
    opacity: 0;
    transition: opacity .5s ease;
    z-index: -1;
}

/*
 * Beyaz/şeffaf varyantlar: üstteki `.btn` kuralı bunları da yakalardı
 * (aynı özgüllük, daha sonra geldiği için kazanıyor). Burada açıkça
 * gradyanı geri alıyoruz, aksi halde "Sizi arayalım" ve beyaz CTA'lar
 * maviye dönerdi.
 */
.btn-ghost,
.btn-white {
    box-shadow: 0 8px 20px -16px rgba(15, 28, 58, .35);
}

.btn-ghost::before,
.btn-white::before,
.btn-ghost::after,
.btn-white::after {
    background-image: none;
    opacity: 1;
}

.btn-ghost {
    color: var(--ink);
    border-color: var(--line);
    /*
     * `background-color` ŞEFFAF olmak zorunda: `::before` negatif z-index
     * ile ebeveynin arka planının ÜSTÜNE boyanır. Taban mavi kalsaydı,
     * %55 saydam cam katmanından mavi sızıp "hayalet" butonu maviye
     * çevirirdi.
     *
     * `backdrop-filter` BİLEREK YOK: `.btn` üzerindeki `transform:
     * translateZ(0)` (GPU katmanı için gerekli) bir "backdrop root"
     * oluşturur. Bu durumda sözde elemana ya da elemanın kendisine verilen
     * backdrop-filter yalnızca butonun kendi alt ağacını örnekler, yani
     * görünmez olur — karşılığında her karede GPU maliyeti ödenir.
     * Yarı saydam zemin cam hissini zaten veriyor; orblar içinden geçiyor.
     */
    background-color: transparent;
}

.btn-ghost::before {
    background-color: color-mix(in srgb, var(--card) 55%, transparent);
}

/*
 * Sıvı mavi tabanı `.btn`'den miras almayan varyantlar: `background-color`
 * burada nötrleniyor ki `::before` katmanı tek görünür zemin olsun.
 */
.btn-white,
.btn-pine {
    background-color: transparent;
}

html.dark .btn-ghost {
    color: var(--ink);
    border-color: rgba(255, 255, 255, .14);
}

html.dark .btn-ghost::before {
    background-color: rgba(255, 255, 255, .06);
}

.btn-white {
    color: #0f1c3a;
    border-color: rgba(255, 255, 255, .9);
}

.btn-white::before {
    background-color: #fff;
}

/* Öne çıkan paket: aynı sıvı dil, bir ton daha derin. */
.btn-pine::before {
    background-image: linear-gradient(to top right, rgba(16, 62, 190, .98), rgba(43, 107, 255, .96));
}

.btn-pine::after {
    background-image: linear-gradient(to top right, rgba(43, 107, 255, .98), rgba(96, 165, 250, .98));
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        border-color: rgba(147, 197, 253, .48);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, .55),
            0 18px 34px -14px rgba(43, 107, 255, .62);
        /* Genleşme + hafif kalkma tek transform'da: iki ayrı kural üst üste
           binseydi biri diğerini sessizce iptal ederdi. */
        transform: translateY(-2px) scale(1.02);
    }

    .btn:hover::after {
        opacity: 1;
    }

    .btn-ghost:hover {
        border-color: var(--brand);
        color: var(--brand);
        box-shadow: 0 14px 28px -18px rgba(43, 107, 255, .5);
        transform: translateY(-2px) scale(1.02);
    }

    .btn-ghost:hover::before {
        background-color: color-mix(in srgb, var(--brand) 12%, var(--card));
    }

    html.dark .btn-ghost:hover::before {
        background-color: rgba(255, 255, 255, .1);
    }

    .btn-white:hover {
        border-color: #eef4ff;
        color: #0f1c3a;
        transform: translateY(-2px) scale(1.02);
    }

    .btn-white:hover::before {
        background-color: #eef4ff;
    }
}

/*
 * BEYAZ buton bağlamları — sıvı mavi DEĞİL.
 *
 * Şartname "düz mavi butonları" kapsıyor. Koyu mavi panel içindeki beyaz
 * butonlar (mega menü kartı, koyu CTA bandı) bilerek beyaz: lacivert
 * zeminde mavi buton kontrastı düşürür ve okunmaz. Bu yüzden gradyan
 * katmanları burada sıfırlanıyor.
 *
 * Özgüllük notu: `.mega-card .btn` (0,2,0) her zaman `.btn`'den (0,1,0)
 * güçlü, dolayısıyla bu sıfırlama katman sırasından bağımsız çalışıyor.
 */
.mega-card .btn::before,
.cta-band .btn::before,
.integ-promo .btn::before {
    background-image: none;
    background-color: #fff;
    opacity: 1;
}

.mega-card .btn::after,
.cta-band .btn::after,
.integ-promo .btn::after {
    background-image: none;
    opacity: 0;
}

.mega-card .btn:hover::after,
.cta-band .btn:hover::after,
.integ-promo .btn:hover::after {
    opacity: 0;
}

/*
 * Bu bağlamlarda hover tonu ESKİDEN elementin `background`'ına yazılıyordu
 * (`site.css` satır ~747 ve ~1967). Element arka planı artık opak beyaz
 * `::before`'ın ALTINDA kaldığı için o ton görünmez olurdu. Tonu doğru
 * katmana taşıyoruz.
 */
@media (hover: hover) and (pointer: fine) {
    .mega-card .btn:hover::before {
        background-color: #eff6ff;
    }

    .cta-band .btn:hover::before {
        background-color: #e8efff;
    }
}

/* Koyu paneldeki şeffaf "hayalet" buton: cam kenar kalır, maviye dönmez. */
.cta-band .btn-ghost::before,
.integ-promo .btn-ghost::before {
    background-image: none;
    background-color: transparent;
    opacity: 1;
}

/*
 * Aktif sekmeler / haplar: aynı sıvı mavi. Dört bileşen tek bildirimde
 * toplanıyor; ayrı ayrı yazılsaydı biri güncellenmeden kalırdı.
 *
 * NEDEN `background-image` doğrudan yazılmıyor:
 *   Bu bileşenlerin `.is-on` durumu JS ile SINIF değiştirerek geliyor ve
 *   taban hallerinde düz renk (`var(--card)`) var. Düz renkten gradyana
 *   geçiş CSS'te interpolate edilemez; sekme değişince renk sıçrardı.
 *   Bu yüzden mavi katman `::before`'a konuyor ve `opacity` ile açılıyor —
 *   `opacity` compositor'da çalıştığı için geçiş gerçekten akıyor.
 *
 * `background-color: transparent` şart: eski kurallar opak `var(--brand)`
 * yazıyordu ve yeni katmanın altında kalıp rengi düzleştiriyordu.
 */
.feat-tab,
.integ-cat,
.blog-chip,
.night-step-btn {
    position: relative;
    isolation: isolate;
}

.feat-tab::before,
.integ-cat::before,
.blog-chip::before,
.night-step-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(to top right, rgba(26, 84, 232, .96), rgba(63, 123, 255, .96));
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    /* z-index YOK: `isolation: isolate` + negatif z-index olmadan katman
       metnin ÜSTÜNE binerdi. `z-index: -1` ile içerik üstte kalıyor. */
    z-index: -1;
}

.feat-tab.is-on::before,
.integ-cat.is-on::before,
.blog-chip.is-on::before,
.night-step-btn.is-on::before {
    opacity: 1;
}

.feat-tab.is-on,
.integ-cat.is-on,
.blog-chip.is-on,
.night-step-btn.is-on {
    background-color: transparent;
    border-color: rgba(96, 165, 250, .38);
    color: #fff;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .4),
        0 12px 26px -14px rgba(43, 107, 255, .6);
}

/*
 * Koyu tema: `site.css`'teki `html.dark .night-step-btn.is-on` (0,3,0)
 * bizim (0,2,0) kuralımızı yener ve sekme düz maviye dönerdi.
 */
html.dark .feat-tab.is-on,
html.dark .integ-cat.is-on,
html.dark .blog-chip.is-on,
html.dark .night-step-btn.is-on {
    background-color: transparent;
}

/* `night-step-btn` zaten kendi halka animasyonunu taşıyor; sadece
   üst ışığını sıvı maviye uyarlıyoruz. */
.night-step-btn.is-on {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .45),
        0 12px 28px -18px rgba(43, 107, 255, .85);
}

/*
 * ============================================================================
 * LIQUID GLASS — AŞAMA 4: Koyu cam paneller ve yumuşatılmış zeminler
 * ============================================================================
 *
 * PERFORMANS KARARI — tam genişlikteki bölümlerde `backdrop-blur` YOK:
 *   `.night-sale`, `.steps-band` ve `.cta-band` ekranın tamamını kaplayan
 *   bloklar. Arkalarındaki ambient orblar sürekli hareket ediyor; bu üç
 *   bölüme `backdrop-filter` vermek her karede ~1 milyon pikselin yeniden
 *   örneklenmesi demek — düşük donanımda tam olarak kaçındığımız FPS
 *   düşüşü. Üstelik kazanç yok: orblar zaten `blur(120px)`, ikinci bir
 *   blur görsel olarak ayırt edilmiyor. Bu yüzden burada cam etkisi
 *   YARI SAYDAM gradyanla kuruluyor; blur yalnızca küçük yüzeylerde
 *   (`.night-steps`, `.lead-card`, `.integ-promo`) var.
 *
 * Renkler `--brand` ailesinden türetildi (blue-700/blue-900 karşılığı),
 * böylece koyu paneller marka mavisiyle aynı ailede kalıyor.
 */
.night-sale,
.steps-band {
    /* Eski kurallar `background:` kısayoluyla opak gradyan yazıyordu;
       arka plan rengini temizliyoruz ki yeni gradyan tek başına kalsın. */
    background-color: transparent;
    background-image:
        radial-gradient(ellipse 46% 74% at 86% 10%, rgba(43, 107, 255, .42), transparent 64%),
        linear-gradient(to bottom right, rgba(22, 60, 152, .95), rgba(10, 26, 62, .97));
    border-top: 1px solid rgba(96, 165, 250, .16);
    border-bottom: 1px solid rgba(96, 165, 250, .16);
    box-shadow: 0 30px 70px -44px rgba(4, 12, 32, .85);
}

.cta-band {
    /* Eski kural `background: var(--brand)` — opak mavi. Şeffaflaştırılıyor
       ki gradyan tek zemin olsun ve katmanlar üst üste binmesin. */
    background-color: transparent;
    background-image:
        radial-gradient(ellipse 50% 80% at 88% 8%, rgba(96, 165, 250, .34), transparent 66%),
        linear-gradient(to bottom right, rgba(26, 78, 200, .95), rgba(11, 28, 68, .97));
    border-top: 1px solid rgba(96, 165, 250, .16);
    border-bottom: 1px solid rgba(96, 165, 250, .16);
}

/*
 * Koyu tema: site.css'teki `html.dark .night-sale` gibi kurallar (0,2,0)
 * bizim `.night-sale` (0,1,0) kuralımızı yener. Aynı gradyanı koyu tema
 * için burada tekrar bildiriyoruz; aksi halde koyu temada paneller eski
 * düz lacivert görünümüne dönerdi.
 */
html.dark .night-sale,
html.dark .steps-band {
    background-image:
        radial-gradient(ellipse 46% 74% at 86% 10%, rgba(43, 107, 255, .3), transparent 64%),
        linear-gradient(to bottom right, rgba(14, 32, 74, .96), rgba(8, 16, 36, .98));
}

html.dark .cta-band {
    background-image:
        radial-gradient(ellipse 50% 80% at 88% 8%, rgba(43, 107, 255, .26), transparent 66%),
        linear-gradient(to bottom right, rgba(16, 40, 96, .96), rgba(8, 18, 42, .98));
}

/*
 * Koyu cam panel: entegrasyon sayfasının yan sütunundaki küçük blok.
 * Yüzey küçük olduğu için `backdrop-filter` burada bedava sayılır.
 *
 * `background` (opak #0f1c3a) şeffaflaştırılıyor; yoksa gradyan onun
 * üstüne biner ve cam etkisi görünmez.
 */
.integ-promo {
    background-color: transparent;
    background-image: linear-gradient(to bottom right, rgba(30, 76, 190, .9), rgba(12, 30, 72, .94));
    border: 1px solid rgba(96, 165, 250, .2);
    box-shadow: 0 24px 48px -28px rgba(4, 12, 32, .7);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
}

/*
 * Koyu panelin İÇİNDEKİ beyaz kart: düz beyaz blok yerine buzlu cam.
 * Burada blur anlamlı — arkasında koyu gradyan + mavi radial var, cam
 * kenarında o renk kırılıyor.
 *
 * `background-color` şeffaf olmak ZORUNDA: eski kural `background: #fff`
 * (opak) tanımlıyor. `background-image` opak zeminin ÜSTÜNE boyanır;
 * temizlenmezse arkadaki koyu panel hiç görünmez ve blur boşa gider.
 */
.night-steps {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .82));
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
}

html.dark .night-steps {
    background-image: linear-gradient(to bottom, rgba(21, 29, 48, .92), rgba(21, 29, 48, .84));
    border-color: rgba(255, 255, 255, .1);
}

/*
 * Form kartı: arkasındaki sıvı formlar geçsin diye hafifletildi.
 * Form okunabilirliği için %70 civarında tutuldu — daha şeffafı
 * etiket metinlerini ambient renk üstünde yorucu hale getiriyor.
 *
 * `background-color` yine şeffaflaştırılıyor (eski kural `var(--card)`).
 */
.lead-card {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .76), rgba(255, 255, 255, .64));
    border-color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    backdrop-filter: saturate(150%) blur(16px);
}

html.dark .lead-card {
    background-image: linear-gradient(to bottom, rgba(21, 29, 48, .78), rgba(21, 29, 48, .66));
    border-color: rgba(255, 255, 255, .1);
}

/*
 * Deneme başvurusu sağ paneli (telefon mockup'ının zemini).
 * Eski hâli opak gradyandı; artık alttaki orblar buradan geçiyor.
 *
 * `background-color` şeffaflaştırılıyor — eski kural `background:`
 * kısayoluyla opak gradyan yazıyordu, gradyan katmanı onun üstüne binerdi.
 */
.apply-visual {
    background-color: transparent;
    background-image:
        radial-gradient(70% 48% at 50% 42%, rgba(43, 107, 255, .16), transparent 72%),
        linear-gradient(180deg, rgba(232, 239, 255, .72), rgba(243, 246, 255, .58));
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
}

html.dark .apply-visual {
    background-image:
        radial-gradient(70% 48% at 50% 42%, rgba(43, 107, 255, .3), transparent 72%),
        linear-gradient(180deg, rgba(18, 26, 44, .8), rgba(12, 18, 32, .7));
}

/*
 * Mobil: büyük yüzeylerde blur KAPATILIYOR.
 *
 * `backdrop-filter` her karede arkasındaki pikselleri yeniden örnekler.
 * Telefonda arka planda sürekli hareket eden orblar + tam genişlikte bir
 * panel = kare bütçesinin büyük kısmı blur'a gider. Küçük ekranda cam
 * etkisi zaten ayırt edilmiyor; yarı saydam zemin aynı görünümü veriyor.
 */
@media (max-width: 900px) {
    .night-steps,
    .lead-card,
    .apply-visual,
    .integ-promo {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Blur kalkınca zemin daha opak olmalı, yoksa metin okunmaz. */
    .night-steps {
        background-image: linear-gradient(to bottom, #ffffff, #f7f9ff);
    }

    html.dark .night-steps {
        background-image: linear-gradient(to bottom, var(--card), var(--card));
    }

    .lead-card {
        background-image: linear-gradient(to bottom, var(--card), color-mix(in srgb, var(--card) 92%, var(--brand)));
    }

    .apply-visual {
        background-image:
            radial-gradient(70% 48% at 50% 42%, rgba(43, 107, 255, .14), transparent 72%),
            linear-gradient(180deg, var(--brand-soft), var(--paper-2));
    }
}

/*
 * `backdrop-filter` desteksiz tarayıcı: yarı saydam yüzeyler okunamaz
 * olurdu. Bu tarayıcılarda düz (opak) zemine düşülüyor.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .btn-ghost { background-color: var(--card); }
    .night-steps { background-color: #fff; }
    html.dark .night-steps { background-color: var(--card); }
    .lead-card { background-color: var(--card); }
    html.dark .lead-card { background-color: var(--card); }
    .apply-visual { background-color: var(--paper-2); }
    html.dark .apply-visual { background-color: var(--paper); }
    .integ-promo { background-color: #0f1c3a; }
}

/*
 * Reduced motion: renk ve cam kalır, hareket kalkar.
 * (Önceki bloklarda `.btn:hover` yalnızca animasyon listesindeydi;
 *  transform sıfırlaması burada tamamlanıyor.)
 */
@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .btn-ghost:hover,
    .btn-white:hover {
        transform: none;
    }
    .btn {
        transform: none;
    }
}

/*
 * Sipariş ve iade — mobil katman.
 */
@media (max-width: 1100px) {
    .sr-return-card {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 1.7rem 1.5rem;
    }
}

@media (max-width: 900px) {
    .sr-split,
    .sr-rule-grid { grid-template-columns: 1fr; gap: .8rem; }
    .sr-board-card { padding: 1.4rem 1.2rem; }
    .sr-carriers { padding: 1.4rem 1.2rem; }
    .sr-hero-facts { gap: .55rem; margin-top: 1.8rem; }
    .sr-hero-facts li { padding: .8rem .85rem; }
    .sr-hero-facts strong { font-size: 1.05rem; }
    .sr-hero-facts span { font-size: .76rem; }
}

@media (max-width: 640px) {
    .sr-carrier-grid { grid-template-columns: 1fr; }
    .sr-close { padding: 2.4rem 0; }
    .sr-close h2 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
    .sr-close p { font-size: .95rem; }
    .sr-return-card { padding: 1.5rem 1.2rem; }
}


} 

/*
 * ------------------------------------------------------------------
 * Entegrasyon sayfası (pilot mimari)
 * ------------------------------------------------------------------
 * Bu blok yalnızca `pages/integration.blade.php` içinde kullanılan
 * `integ-page-*` sınıflarını tanımlar. Mevcut `.integ-*`, `.card`,
 * `.faq-*` ve header kurallarına dokunulmaz; hero animasyonları da
 * bu dosyada yeniden yazılmaz.
 *
 * Renk: her sayfa kaydından gelen `--integ-accent` değişkeni ile
 * besleniyor. Değer yoksa kurumsal maviye düşer.
 */
.integ-page {
    --integ-accent: var(--brand);
}

/* --- Hero ------------------------------------------------------- */

.integ-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -1px;
    padding: 0 0 clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(58% 82% at 18% 6%, color-mix(in srgb, var(--integ-accent) 16%, transparent), transparent 68%),
        radial-gradient(48% 72% at 86% 2%, color-mix(in srgb, var(--integ-accent) 10%, transparent), transparent 64%),
        linear-gradient(180deg, var(--paper-2), var(--paper) 84%);
}

/* Hero'yu yumuşakça kapatan alt geçiş; sayfa zeminiyle dikişsiz birleşir. */
.integ-page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    z-index: -1;
    background: linear-gradient(180deg, transparent, var(--paper));
    pointer-events: none;
}

.integ-page-hero-inner {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.integ-page-hero h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -.045em;
    margin: 0 auto .35rem;
    max-width: 22ch;
}

.integ-page-hero h1 .integ-page-h1-mark {
    display: block;
    font-size: .52em;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: color-mix(in srgb, var(--integ-accent) 78%, var(--ink));
    margin-top: .5rem;
}

.integ-page-hero .lede {
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 42rem;
    margin: 1.1rem auto 1.5rem;
    color: var(--muted);
}

.integ-page-hero .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Güven şeridi ---------------------------------------------- */

/*
 * Auto-fit bir ızgara son satırı sola yığıyordu. Bunun yerine satırları
 * `center` hizalayan esnek bir sarmalayıcı kullanıyoruz: üst satır tam
 * dolduğunda alttaki eksik öğe kendiliğinden ortaya gelir.
 */
.integ-page-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    max-width: 56rem;
    margin: 2.4rem auto 0;
    padding: 0;
    list-style: none;
}

.integ-page-trust li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 650;
    color: var(--ink);
    background: color-mix(in srgb, var(--card) 82%, transparent);
    /* Çizgi biraz daha belirgin olsun diye 1px yerine 1.5px ve daha yüksek karışım. */
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--integ-accent) 30%, var(--line)),
        0 14px 30px -22px color-mix(in srgb, var(--integ-accent) 70%, transparent);
    transition:
        transform .35s cubic-bezier(.22, .82, .28, 1),
        box-shadow .35s ease,
        background-color .35s ease;
}

@media (hover: hover) {
    .integ-page-trust li:hover {
        transform: translateY(-2px);
        background: color-mix(in srgb, var(--integ-accent) 8%, var(--card));
        box-shadow:
            inset 0 0 0 1.5px color-mix(in srgb, var(--integ-accent) 62%, transparent),
            0 18px 34px -20px color-mix(in srgb, var(--integ-accent) 85%, transparent);
    }
}

.integ-page-trust svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--integ-accent);
}

/* --- Ortak bölüm ritmi ----------------------------------------- */

.integ-page-section {
    padding: clamp(2.6rem, 5vw, 4.2rem) 0;
}

.integ-page-section + .integ-page-section {
    border-top: 1px solid var(--line);
}

.integ-page-section-head {
    max-width: 44rem;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.integ-page-section-head.is-center {
    margin-inline: auto;
    text-align: center;
}

.integ-page-section-head h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.14;
    letter-spacing: -.035em;
    margin: .35rem 0 .6rem;
}

.integ-page-section-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

/* --- SEO metni -------------------------------------------------- */

.integ-page-copy {
    max-width: 44rem;
}

.integ-page-copy p {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.78;
    font-size: 1.02rem;
}

.integ-page-copy p:last-child {
    margin-bottom: 0;
}

/* Lead-in paragraf, okumayı yönlendirmek için hafifçe büyük. */
.integ-page-copy p.is-lead {
    font-size: 1.08rem;
    color: var(--ink);
}

/* --- Özellik kartları ------------------------------------------ */

/*
 * `auto-fit` ile 6 kart 4+2 olarak dizildiğinde alt iki kart sola yığılıyordu.
 * Sabit 3 sütun + `justify-content: center` sayesinde eksik kalan son satır
 * üstteki kartların ortasına oturur.
 */
.integ-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 900px) {
    .integ-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .integ-page-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.integ-page-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.5rem 1.4rem 1.4rem;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px -42px rgba(15, 30, 70, .55);
    transition:
        transform .45s cubic-bezier(.22, .82, .28, 1),
        border-color .35s ease,
        box-shadow .45s ease;
}

/* Hover yalnızca gerçek işaretçide; dokunmatik cihazda takılı kalmasın. */
@media (hover: hover) {
    .integ-page-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--integ-accent) 34%, var(--line));
        box-shadow:
            0 30px 60px -40px color-mix(in srgb, var(--integ-accent) 55%, transparent),
            inset 0 0 0 1px color-mix(in srgb, var(--integ-accent) 14%, transparent);
    }
}

.integ-page-card-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    color: var(--integ-accent);
    background: color-mix(in srgb, var(--integ-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--integ-accent) 20%, transparent);
}

.integ-page-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.integ-page-card strong {
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--ink);
}

.integ-page-card p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.62;
    color: var(--muted);
}

/* --- Kurulum zaman çizelgesi ----------------------------------- */

.integ-page-steps {
    position: relative;
    display: grid;
    gap: 1.35rem;
    max-width: 44rem;
    margin: 0;
    padding: 0 0 0 3.1rem;
    list-style: none;
    counter-reset: integ-step;
}

/* Dikey çizgi: ilk node'un merkezinden son node'un merkezine kadar. */
.integ-page-steps::before {
    content: "";
    position: absolute;
    left: calc(1.1rem - 1px);
    top: 1.1rem;
    bottom: 1.1rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--integ-accent) 62%, transparent),
        color-mix(in srgb, var(--integ-accent) 12%, transparent) 82%,
        transparent);
}

.integ-page-step {
    position: relative;
    counter-increment: integ-step;
}

/* Numaralı düğüm, çizginin üstünde. */
.integ-page-step::before {
    content: counter(integ-step);
    position: absolute;
    left: -3.1rem;
    top: -.1rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-size: .86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--integ-accent);
    background: var(--card);
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--integ-accent) 42%, transparent),
        0 0 0 5px var(--paper);
}

.integ-page-step h3 {
    margin: .35rem 0 .35rem;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.integ-page-step p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    font-size: .96rem;
}

/* --- Kazanım listesi ------------------------------------------- */

/* Kazanım satırları da kart ritmine uyar; eksik satır ortalanır. */
.integ-page-gains {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: .5rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 600px) {
    .integ-page-gains {
        grid-template-columns: minmax(0, 1fr);
    }
}

.integ-page-gains li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    line-height: 1.55;
    color: var(--ink);
    font-size: .97rem;
    /* Kartlardaki stil ile aynı: çerçeveli, yumuşak köşeli yüzey. */
    padding: .8rem .95rem;
    border-radius: 14px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
}

.integ-page-gains svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .16rem;
    color: var(--integ-accent);
}

/* --- Derinlemesine okuma blokları ------------------------------ */

/*
 * Uzun form metin, kart dilinden ayrışsın diye iki sütunlu bir ritim
 * kullanıyor: solda çapa başlık, sağda gövde. Dar ekranda tek sütuna
 * düşüp normal okuma akışına döner.
 */
.integ-page-depth {
    display: grid;
    gap: 2rem;
}

.integ-page-depth-block {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: .4rem 2.4rem;
    align-items: start;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}

.integ-page-depth-block:first-child {
    padding-top: 0;
    border-top: 0;
}

.integ-page-depth-block h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.32;
    letter-spacing: -.02em;
    color: var(--ink);
}

.integ-page-depth-block p {
    grid-column: 2;
    margin: 0 0 .9rem;
    color: var(--muted);
    line-height: 1.82;
    font-size: 1rem;
    max-width: 40rem;
}

.integ-page-depth-block p:last-child {
    margin-bottom: 0;
}

@media (max-width: 780px) {
    .integ-page-depth-block {
        grid-template-columns: minmax(0, 1fr);
    }

    .integ-page-depth-block p {
        grid-column: 1;
        max-width: none;
    }
}

/* --- Rehber: iki alt başlıklı uzun okuma ------------------------ */

.integ-page-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

@media (max-width: 860px) {
    .integ-page-guide {
        grid-template-columns: minmax(0, 1fr);
    }
}

.integ-page-guide-item {
    padding: 1.7rem 1.6rem;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px -46px rgba(15, 30, 70, .5);
}

.integ-page-guide-item h3 {
    margin: 0 0 .9rem;
    font-size: 1.06rem;
    line-height: 1.32;
    letter-spacing: -.02em;
    color: var(--ink);
}

.integ-page-guide-item p {
    margin: 0 0 .85rem;
    color: var(--muted);
    line-height: 1.8;
    font-size: .97rem;
}

.integ-page-guide-item p:last-child {
    margin-bottom: 0;
}

/* --- SSS -------------------------------------------------------- */

.integ-page-faq {
    max-width: 48rem;
    margin: 0;
}

/* Mevcut `.faq-item` görünümünü miras alır; köşe yarıçapı burada
 * biraz yumuşatılıyor, akordeon mekaniği (faq-check/faq-panel) aynı kalır. */
.integ-page-faq .faq-item {
    border-radius: 18px;
}

.integ-page-faq .faq-q {
    font-size: 1rem;
}

.integ-page-faq .faq-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
}

/* --- Kapanış çağrısı ------------------------------------------ */

.integ-page-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: clamp(2rem, 5vw, 3.4rem) 0 0;
    padding: clamp(2.2rem, 5vw, 3.4rem);
    border-radius: 30px;
    color: #eef4ff;
    background:
        radial-gradient(60% 100% at 12% 0%, color-mix(in srgb, var(--integ-accent) 52%, transparent), transparent 66%),
        radial-gradient(56% 90% at 92% 8%, rgba(96, 165, 250, .28), transparent 64%),
        linear-gradient(140deg, #101d3d, #0a1428);
    box-shadow: 0 44px 90px -60px color-mix(in srgb, var(--integ-accent) 75%, transparent);
}

.integ-page-cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.6rem;
    align-items: end;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.integ-page-cta h2 {
    margin: 0 0 .7rem;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    color: #fff;
}

.integ-page-cta p {
    margin: 0 0 .45rem;
    color: rgba(226, 236, 255, .8);
    line-height: 1.7;
    max-width: 34rem;
}

.integ-page-cta .btn {
    justify-self: start;
}

@media (max-width: 820px) {
    .integ-page-cta-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* --- Dar ekran düzeltmeleri ----------------------------------- */

@media (max-width: 640px) {
    .integ-page-hero h1 {
        letter-spacing: -.035em;
    }

    .integ-page-steps {
        padding-left: 2.7rem;
    }

    .integ-page-step::before {
        left: -2.7rem;
        width: 2rem;
        height: 2rem;
        font-size: .8rem;
    }

    .integ-page-card {
        padding: 1.3rem 1.2rem;
    }
}

/* --- Koyu tema ------------------------------------------------- */

html.dark .integ-page-hero {
    background:
        radial-gradient(58% 82% at 18% 6%, color-mix(in srgb, var(--integ-accent) 26%, transparent), transparent 70%),
        radial-gradient(48% 72% at 86% 2%, color-mix(in srgb, var(--integ-accent) 16%, transparent), transparent 66%),
        linear-gradient(180deg, #0b1224, #0a1020 86%);
}

html.dark .integ-page-trust li {
    background: rgba(18, 28, 50, .72);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--integ-accent) 26%, transparent),
        0 14px 30px -22px rgba(0, 0, 0, .8);
    color: #e8efff;
}

html.dark .integ-page-card {
    background: linear-gradient(180deg, rgba(22, 33, 58, .92), rgba(14, 22, 40, .96));
    border-color: rgba(120, 160, 255, .14);
    box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .9);
}

html.dark .integ-page-gains li {
    background: rgba(20, 31, 54, .78);
    box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .12);
    color: #e8efff;
}

html.dark .integ-page-guide-item {
    background: linear-gradient(180deg, rgba(22, 33, 58, .9), rgba(14, 22, 40, .95));
    border-color: rgba(120, 160, 255, .14);
}

html.dark .integ-page-card strong {
    color: #eef3ff;
}

html.dark .integ-page-step::before {
    background: #101a30;
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--integ-accent) 55%, transparent),
        0 0 0 5px #0a1020;
}

/* @layer legacy */