/*
 * Solid Medya — www.solidmedya.com
 * Proje: Wzoop dijital kartvizit — ana sayfa
 * Mobil uygulama görünümü: temel değerler, üst çubuk, alt gezinme, açılış ekranı (hero), kurulum çubuğu. Yalnız ≤768 px.
 * Yazılım, tasarım ve geliştirme: Solid Medya
 */

/* ==========================================================================
   1) Ortak tasarım değerleri (mobil-bolumler ve mobil-urun da kullanır)
   --wl-* değerlerinden türer; koyu tema html[data-theme="dark"] ile --wl-* değişince kendiliğinden döner.
   ========================================================================== */
:root {
    --mk-gutter: 16px;
    --mk-r-s: 12px;
    --mk-r-m: 18px;
    --mk-r-l: 24px;
    --mk-r-xl: 30px;
    --mk-appbar-h: 56px;
    --mk-tabbar-h: 65px;
    --mk-safe-b: env(safe-area-inset-bottom, 0px);
    --mk-safe-t: env(safe-area-inset-top, 0px);
    --mk-ease: cubic-bezier(.22, 1, .36, 1);
    --mk-spring: cubic-bezier(.34, 1.56, .64, 1);
    --mk-surface: var(--wl-surface, #fff);
    --mk-surface-2: var(--wl-surface-2, #f4f6fa);
    --mk-line: var(--wl-line, #e3e6f0);
    --mk-text: var(--wl-text, #1b2150);
    --mk-muted: var(--wl-muted, #5a6285);
    --mk-primary: var(--wl-btn, #46519e);
    --mk-accent: var(--wl-accent, #f93230);
    --mk-link: var(--wl-link, #46519e);
    --mk-glow: rgb(var(--wl-p-rgb, 70 81 158) / .28);
    --mk-shadow-1: 0 1px 2px rgb(var(--wl-shadow-rgb, 32 36 71) / .08), 0 2px 8px rgb(var(--wl-shadow-rgb, 32 36 71) / .06);
    --mk-shadow-2: 0 2px 4px rgb(var(--wl-shadow-rgb, 32 36 71) / .07), 0 8px 20px rgb(var(--wl-shadow-rgb, 32 36 71) / .10), 0 18px 36px -12px rgb(var(--wl-shadow-rgb, 32 36 71) / .14);
    --mk-shadow-3: 0 4px 8px rgb(var(--wl-shadow-rgb, 32 36 71) / .08), 0 16px 32px rgb(var(--wl-shadow-rgb, 32 36 71) / .14), 0 32px 64px -16px rgb(var(--wl-shadow-rgb, 32 36 71) / .22);
    --mk-glass: var(--wl-surface, #fff);
    /* Üst çubuk + güvenli alan: sabit çubuğun kapladığı yükseklik */
    --mk-top: calc(var(--mk-appbar-h) + var(--mk-safe-t));
    /* Alt çubuk + güvenli alan: sabit çubuğun kapladığı yükseklik */
    --mk-bottom: calc(var(--mk-tabbar-h) + var(--mk-safe-b));
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --mk-glass: color-mix(in srgb, var(--wl-surface, #fff) 82%, transparent);
    }
}

html[data-theme="dark"] {
    --mk-shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .25);
    --mk-shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 10px 24px rgb(0 0 0 / .38), 0 18px 36px -12px rgb(0 0 0 / .5);
    --mk-shadow-3: 0 4px 8px rgb(0 0 0 / .35), 0 18px 36px rgb(0 0 0 / .5), 0 32px 64px -16px rgb(0 0 0 / .65);
    --mk-glow: rgb(var(--wl-p-rgb, 120 130 220) / .38);
}

/* ==========================================================================
   2) Sayfa zemini ve genel dokunma davranışı
   ========================================================================== */
html.wl-html {
    scroll-padding-top: calc(var(--mk-top) + 8px);
    scroll-padding-bottom: calc(var(--mk-bottom) + 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html body.wl-page {
    padding-bottom: calc(var(--mk-bottom) + 14px);
    -webkit-tap-highlight-color: transparent;
}

/* Sabit, tek parça yumuşak renk atmosferi (yalnız bir kez boyanır; kaydırmada yeniden çizilmez) */
html body.wl-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(70% 38% at 100% 0%, rgb(var(--wl-p-rgb, 70 81 158) / .10), transparent 72%),
        radial-gradient(60% 34% at 0% 58%, rgb(var(--wl-a-rgb, 249 50 48) / .06), transparent 72%),
        radial-gradient(70% 36% at 80% 100%, rgb(var(--wl-p-rgb, 70 81 158) / .07), transparent 72%);
}

html[data-theme="dark"] body.wl-page::before {
    background:
        radial-gradient(70% 38% at 100% 0%, rgb(var(--wl-p-rgb, 120 130 220) / .22), transparent 72%),
        radial-gradient(60% 34% at 0% 58%, rgb(var(--wl-a-rgb, 249 50 48) / .10), transparent 72%),
        radial-gradient(70% 36% at 80% 100%, rgb(var(--wl-p-rgb, 120 130 220) / .14), transparent 72%);
}

/* Yatay çentikli telefonlarda içerik çentiğin altına girmesin (çentik yokken değer değişmez) */
html body.wl-page .wl-container:not(#_) {
    padding-left: max(clamp(16px, 4vw, 32px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(16px, 4vw, 32px), env(safe-area-inset-right, 0px));
}

html.wl-html body.wl-page :where(a, button, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
}

/* Atlama bağlantısı: büyük yazı ayarında kendi yüksekliği -60 px'i aşıp ekranın üstünde görünmesin */
html body.wl-page .skip-to-main:not(:focus):not(#_) {
    top: 0;
    transform: translateY(-130%);
}

/* ==========================================================================
   3) Üst uygulama çubuğu
   ========================================================================== */
html body.wl-page .wl-header:not(#_) {
    height: var(--mk-top);
    padding: var(--mk-safe-t) 0 0;
    align-items: stretch;
    background: var(--wl-bg, #fff);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform .34s var(--mk-ease), background-color .25s, border-color .25s, box-shadow .25s;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    html body.wl-page .wl-header:not(#_) {
        background: color-mix(in srgb, var(--wl-bg, #fff) 55%, transparent);
    }
    html body.wl-page .wl-header.is-stuck:not(#_) {
        background: var(--mk-glass);
    }
}

html body.wl-page .wl-header.is-stuck:not(#_) {
    background: var(--wl-surface, #fff);
    border-bottom-color: var(--mk-line);
    box-shadow: 0 6px 20px -14px rgb(var(--wl-shadow-rgb, 32 36 71) / .5);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html:not(.mx-blur-off):not(.mx-reduce-transparency) body.wl-page .wl-header.is-stuck:not(#_) {
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        backdrop-filter: saturate(1.6) blur(18px);
    }
}

/* Aşağı kaydırınca çubuk yukarı çekilir, yukarı kaydırınca geri gelir (JS: html.mk-bar-hide) */
html.mk-bar-hide:not(.wl-menu-open) body.wl-page .wl-header:not(#_) {
    transform: translate3d(0, -101%, 0);
}

html body.wl-page .wl-header .wl-container:not(#_) {
    max-width: none;
    height: 100%;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
}

html body.wl-page .wl-header__inner:not(#_) {
    height: 100%;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Eski pil çubuğundaki alt ilerleme çizgisi: yerine ekran üstündeki ince çubuk var */
html body.wl-page .wl-header__inner:not(#_)::after {
    display: none;
}

html body.wl-page .wl-logo:not(#_) {
    min-height: 44px;
    margin-left: -2px;
    padding: 0 4px;
}

html body.wl-page .wl-logo img:not(#_) {
    --wl-logo-h: 30px;
    max-width: 120px !important;
}

html body.wl-page .wl-header__actions:not(#_) {
    gap: 8px;
    margin-left: auto;
}

/* "Giriş": yalnız simge, 44 px dokunma alanı */
html body.wl-page .wl-header a.wl-btn--login:not(#_):not(#__) {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: 1px solid var(--mk-line);
    background: var(--mk-surface);
    color: var(--wl-ink, var(--mk-text));
    box-shadow: none;
}

html body.wl-page .wl-header a.wl-btn--login:not(#_):not(#__) > span:not(.wl-btn__ico) {
    display: none;
}

html body.wl-page .wl-header a.wl-btn--login:not(#_):not(#__) .wl-btn__ico {
    display: inline-grid;
    width: 24px;
    height: 24px;
    background: none;
    color: currentColor;
}

html body.wl-page .wl-header a.wl-btn--login:not(#_):not(#__):active {
    transform: scale(.94);
    background: var(--mk-surface-2);
}

/* "Üye Ol": birincil düğme, kompakt */
html body.wl-page .wl-header .wl-btn--signup:not(#_) {
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: min(.875rem, 17px);
    font-weight: 750;
    animation: none;
    box-shadow: 0 6px 16px -8px var(--mk-glow);
    transition: transform .2s var(--mk-spring);
}

/* Parlama şeridi sürekli döngüde çalışmasın (çubuk her zaman ekranda) */
html body.wl-page .wl-header .wl-btn--signup:not(#_)::before {
    display: none;
}

html body.wl-page .wl-header .wl-btn--signup:not(#_) .wl-btn__chip {
    display: none;
}

html body.wl-page .wl-header .wl-btn--signup:not(#_):active {
    transform: scale(.95);
}

html body.wl-page .wl-header .wl-theme-btn:not(#_) {
    display: none;
}

html body.wl-page .wl-header .wl-burger:not(#_) {
    width: 44px;
    height: 44px;
    border: 0;
    background: rgb(var(--wl-p-rgb, 70 81 158) / .09);
    transition: transform .2s var(--mk-spring), background-color .2s;
}

html body.wl-page .wl-header .wl-burger:not(#_):active {
    transform: scale(.92);
}

@media (max-width: 380px) {
    html body.wl-page .wl-header .wl-container:not(#_) {
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
    }
    html body.wl-page .wl-header__actions:not(#_) {
        gap: 6px;
    }
    html body.wl-page .wl-header .wl-btn--signup:not(#_) {
        padding: 0 12px;
    }
}
@media (max-width: 359px) {
    html body.wl-page .wl-header a.wl-btn--login:not(#_):not(#__) {
        display: none;
    }
    html body.wl-page .wl-header .wl-btn--signup:not(#_) {
        display: inline-flex;
        padding: 0 12px;
    }
}

/* ==========================================================================
   3b) Üst çubuk: ortada büyük logo, sağda yalnız menü düğmesi
   Giriş / üye ol / tema düğmeleri üst çubuktan kalktı; tam ekran menüde ve ana ekranda var.
   ========================================================================== */
:root {
    --mk-appbar-h: 64px;
}

html body.wl-page .wl-header__inner:not(#_) {
    position: relative;
    justify-content: center;
}

html body.wl-page .wl-header .wl-logo:not(#_) {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0;
    padding: 0 6px;
    transform: translate(-50%, -50%);
}

html body.wl-page .wl-header .wl-logo img:not(#_) {
    --wl-logo-h: 44px;
    width: auto !important;
    height: 44px !important;
    max-width: min(190px, 52vw) !important;
}

html body.wl-page .wl-header .wl-logo picture:not(#_) {
    display: inline-flex;
}

html body.wl-page .wl-header__actions:not(#_) {
    position: absolute;
    top: 50%;
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 2;
    gap: 0;
    margin: 0;
    transform: translateY(-50%);
}

html body.wl-page .wl-header__actions:not(#_) > :not(.wl-burger):not(#__) {
    display: none !important;
}

html body.wl-page .wl-header .wl-burger:not(#_) {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgb(var(--wl-p-rgb, 70 81 158) / .1);
    color: var(--mk-primary);
}

/* ==========================================================================
   4) Kaydırma ilerleme çubuğu (home-landing-fx.js oluşturur)
   ========================================================================== */
html body.wl-page .wl-progress:not(#_) {
    height: 3px;
    z-index: 1210;
}

html body.wl-page .wl-progress:not(#_) i {
    background: linear-gradient(90deg, var(--mk-primary), var(--mk-accent));
    border-radius: 0 3px 3px 0;
}

/* ==========================================================================
   5) Menü: tam ekran düğme ızgarası -> mobil-menu.css (≤1023 px)
   ========================================================================== */

/* ==========================================================================
   6) Alt sekme çubuğu
   ========================================================================== */
@media (max-width: 768px) {
    html body.wl-page .wl-tabbar:not(#_) {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + var(--mk-safe-b)) max(8px, env(safe-area-inset-left, 0px));
        border: 0;
        border-top: 1px solid var(--mk-line);
        border-radius: 0;
        background: var(--wl-surface, #fff);
        box-shadow: 0 -10px 28px -16px rgb(var(--wl-shadow-rgb, 32 36 71) / .45);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        z-index: 1050;
        transition: transform .3s var(--mk-ease);
    }
    html body.wl-page .wl-tabbar__a:not(#_) {
        min-height: 52px;
        gap: 2px;
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
        font-size: min(.8125rem, 15px);
        font-weight: 650;
        line-height: 1.15;
        color: var(--mk-muted);
        border-radius: 16px;
        transition: color .2s, background-color .2s, transform .25s var(--mk-spring);
    }
    /* Dar ekranda (≤ 359 px) beş etiket sığsın: tek satır etiket 12 px (alt gezinme çubuklarında olağan ölçü) */
    @media (max-width: 359px) {
        html body.wl-page .wl-tabbar__a:not(#_) {
            font-size: min(.75rem, 14px);
            letter-spacing: -.01em;
        }
    }
    /* Uzun etiket (büyük yazı ayarında) taşmasın: tek satır, sonu üç nokta */
    html body.wl-page .wl-tabbar__a:not(#_) > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html body.wl-page .wl-tabbar__a > .wl-i, html body.wl-page .wl-tabbar__a > svg {
        transition: transform .3s var(--mk-spring);
    }
    html body.wl-page .wl-tabbar__a:not(#_):active {
        transform: scale(.9);
    }
    html body.wl-page .wl-tabbar__a.is-on:not(#_) {
        color: var(--mk-primary);
        background: rgb(var(--wl-p-rgb, 70 81 158) / .1);
    }
    html body.wl-page .wl-tabbar__a.is-on:not(#_) > .wl-i, html body.wl-page .wl-tabbar__a.is-on:not(#_) > svg {
        transform: translateY(-1px) scale(1.12);
    }
    html body.wl-page .wl-tabbar__a.is-on:not(#_)::before {
        top: 2px;
        width: 18px;
        height: 3px;
        background: var(--mk-accent);
    }
    html body.wl-page .wl-tabbar__cta:not(#_) {
        padding-top: 0;
        padding-bottom: 4px;
        color: var(--mk-text);
    }
    html body.wl-page .wl-tabbar__cta:not(#_) i {
        width: 54px;
        height: 54px;
        margin-top: -22px;
        border: 4px solid var(--wl-surface, #fff);
        background: linear-gradient(135deg, var(--mk-primary), var(--mk-accent));
        box-shadow: 0 10px 20px -8px var(--mk-glow);
        transition: transform .3s var(--mk-spring);
    }
    html body.wl-page .wl-tabbar__cta:not(#_):active i {
        transform: scale(.9);
    }
    html body.wl-page .wl-tabbar__cta.is-on:not(#_) {
        background: transparent;
        color: var(--mk-text);
    }
    html[data-theme="dark"] body.wl-page .wl-tabbar__a.is-on:not(#_) {
        color: #fff;
        background: rgb(255 255 255 / .12);
    }
    html[data-theme="dark"] body.wl-page .wl-tabbar__cta.is-on:not(#_) {
        background: transparent;
    }
    /* Yukarı çık düğmesi alt çubuğun üstünde */
    html body.wl-page .wl-top:not(#_) {
        bottom: calc(var(--mk-bottom) + 14px);
        right: max(14px, env(safe-area-inset-right, 0px));
    }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html:not(.mx-blur-off):not(.mx-reduce-transparency) body.wl-page .wl-tabbar:not(#_) {
        background: var(--mk-glass);
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        backdrop-filter: saturate(1.6) blur(18px);
    }
}

/* ==========================================================================
   7) "Ana ekrana ekle" kurulum çubuğu (mobile-layer paketi; yalnız ana sayfada, yalnız CSS)
   Tek satır: simge + başlık | küçük "Şimdi değil" | Paylaş (simge) | Yükle | kapat
   ========================================================================== */
html.has-home-light-page .m-app-install:not(#_) {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--mk-bottom) + 8px);
    max-width: none;
    z-index: 1060;
}

/* Detay penceresi/diyalog açıkken alt çubuk kalkar; kurulum çubuğu aşağı iner */
html.wl-md-open.has-home-light-page .m-app-install:not(#_),
html.has-home-light-page:has(dialog[open]) .m-app-install:not(#_) {
    bottom: calc(10px + var(--mk-safe-b));
}

/* Akıllı gösterim (mobil-kabuk.js): ilk ekranda çıkmaz; kullanıcı ~1,5 ekran kaydırınca ya da ~12 sn sonra bir kez belirir.
   Kapatılınca mobile-layer paketi bir daha göstermez. Betik çalışmazsa bekletme sınıfı hiç eklenmez, çubuk eskisi gibi görünür. */
html.has-home-light-page:not(.mk-inst-wait) .m-app-install.is-open:not(#_),
html.has-home-light-page.mk-inst-ok .m-app-install.is-open:not(#_) {
    animation: mk-sheet-up .45s var(--mk-spring) backwards;
}

html.has-home-light-page.mk-inst-wait:not(.mk-inst-ok) .m-app-install:not(#_),
html.mk-kb.has-home-light-page .m-app-install:not(#_) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes mk-sheet-up {
    from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); }
    to { opacity: 1; transform: none; }
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__panel {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "ic tt sh pr cl"
        "ic lt sh pr cl"
        "st st st st st"
        "nt nt nt nt nt";
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    max-height: none;
    overflow: visible;
    padding: 8px 6px 8px 10px;
    border: 1px solid var(--mk-line);
    border-radius: 22px;
    background: var(--mk-surface);
    color: var(--mk-text);
    box-shadow: var(--mk-shadow-3);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.has-home-light-page:not(.mx-blur-off):not(.mx-reduce-transparency) .m-app-install:not(#_) .m-app-install__panel {
        background: var(--mk-glass);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
    }
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__view,
html.has-home-light-page .m-app-install:not(#_) .m-app-install__head,
html.has-home-light-page .m-app-install:not(#_) .m-app-install__head-text,
html.has-home-light-page .m-app-install:not(#_) .m-app-install__actions {
    display: contents;
}

html.has-home-light-page .m-app-install:not(#_) [hidden] {
    display: none !important;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__icon {
    grid-area: ic;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: var(--mk-shadow-1);
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__title {
    grid-area: tt;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.2;
    font-weight: 750;
    color: var(--mk-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__hint {
    display: none;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__steps {
    grid-area: st;
    margin: 8px 0 2px;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--mk-surface-2);
    border-color: var(--mk-line);
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__steps li {
    color: var(--mk-text);
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__note {
    grid-area: nt;
    margin: 6px 0 2px;
    color: var(--mk-text);
}

/* Dokunma alanı: görünüm küçük, hedef 44 px */
html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn {
    position: relative;
    flex: none;
    width: auto;
    min-width: 0;
    min-height: 36px !important;
    height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: .875rem;
    font-weight: 750;
    line-height: 1;
    transition: transform .2s var(--mk-spring), background-color .2s;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn::after,
html.has-home-light-page .m-app-install:not(#_) .m-app-install__close::after {
    content: "";
    position: absolute;
    inset: -4px;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__close::after {
    inset: -6px;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn:active,
html.has-home-light-page .m-app-install:not(#_) .m-app-install__close:active {
    transform: scale(.93);
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn--primary {
    grid-area: pr;
    background: var(--mk-primary);
    color: var(--wl-on-btn, #fff);
    box-shadow: 0 6px 14px -8px var(--mk-glow);
}

/* Paylaş: yalnız simge (yazı erişilebilirlik için yerinde) */
html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn--secondary {
    grid-area: sh;
    width: 36px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    color: var(--mk-link);
    border: 1px solid var(--mk-line);
    background: var(--mk-surface-2);
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn--secondary::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2a1 1 0 0 1 .7.3l3.3 3.3a1 1 0 1 1-1.4 1.4L13 6.4V15a1 1 0 1 1-2 0V6.4L9.4 8.2a1 1 0 1 1-1.4-1.4l3.3-3.3a1 1 0 0 1 .7-.3zM5 12.5a1 1 0 0 1 1 1V18a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4.5a1 1 0 1 1 2 0V18a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-4.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2a1 1 0 0 1 .7.3l3.3 3.3a1 1 0 1 1-1.4 1.4L13 6.4V15a1 1 0 1 1-2 0V6.4L9.4 8.2a1 1 0 1 1-1.4-1.4l3.3-3.3a1 1 0 0 1 .7-.3zM5 12.5a1 1 0 0 1 1 1V18a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4.5a1 1 0 1 1 2 0V18a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-4.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Şimdi değil: başlığın altında küçük bağlantı görünümü */
html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn--ghost {
    grid-area: lt;
    justify-self: start;
    min-height: 20px !important;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mk-muted);
    font-size: .875rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn--ghost::after {
    inset: -12px -10px;
}

html.has-home-light-page .m-app-install:not(#_) .m-app-install__close {
    position: relative;
    grid-area: cl;
    top: auto;
    right: auto;
    width: 32px;
    height: 32px;
    background: var(--mk-surface-2);
    color: var(--mk-muted);
}

/* ==========================================================================
   8) Açılış ekranı (hero)
   ========================================================================== */
/* Zemin saydam bırakılır: sayfanın sabit atmosferi ile hero arasında alt kenarda bant/dikiş oluşmaz */
html body.wl-page .wl-hero:not(#_) {
    padding: calc(var(--mk-top) + 16px) 0 0;
    background:
        radial-gradient(90% 46% at 100% 0%, rgb(var(--wl-p-rgb, 70 81 158) / .16), transparent 70%),
        radial-gradient(70% 40% at 0% 46%, rgb(var(--wl-a-rgb, 249 50 48) / .09), transparent 70%);
}

html[data-theme="dark"] body.wl-page .wl-hero:not(#_) {
    background:
        radial-gradient(90% 46% at 100% 0%, rgb(var(--wl-p-rgb, 120 130 220) / .3), transparent 70%),
        radial-gradient(70% 40% at 0% 46%, rgb(var(--wl-a-rgb, 249 50 48) / .14), transparent 70%);
}

html body.wl-page .wl-hero .wl-aurora i:not(#_) {
    background: radial-gradient(closest-side, rgb(var(--wl-p-rgb, 70 81 158) / .26), transparent);
}

html body.wl-page .wl-hero .wl-aurora .a2:not(#_) {
    background: radial-gradient(closest-side, rgb(var(--wl-a-rgb, 249 50 48) / .16), transparent);
}

html body.wl-page .wl-hero .wl-aurora .a3:not(#_) {
    background: radial-gradient(closest-side, rgb(var(--wl-c3-rgb, 70 81 158) / .2), transparent);
}

html body.wl-page .wl-hero__grid:not(#_) {
    gap: 6px;
    align-items: start;
}

html body.wl-page .wl-hero__copy:not(#_) {
    gap: 12px;
}

/* Başlık: H1 metni değişmez; yalnız ölçü/ritim */
html body.wl-page .wl-hero .wl-h1:not(#_) {
    font-size: clamp(1.7rem, 8.1vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -.018em;
}

/* Dönen kelime kutusunun yüksekliği sabit: betik 3B dönüş sırasındaki sınır kutusunu ölçüp yüksekliği oynatıyordu
   (her kelime değişiminde başlık ±16 px zıplıyordu). Alt çıkıntılar (j, g, y) için yer bırakılır. */
html body.wl-page .wl-hero .wl-h1 .wl-h1__rot:not(#_) {
    height: 1.28em !important;
}

html body.wl-page .wl-hero .wl-h1 .wl-h1__rw:not(#_) {
    padding-bottom: .16em;
    line-height: 1.12;
}

/* Vurgulu kutu kendi satırında kalır: kelime değişince genişliği değişse de üstteki satırlar yer değiştirmez */
html body.wl-page .wl-hero .wl-h1 .wl-h1__hl:not(#_) {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: .22em;
    padding-bottom: .12em;
}

html body.wl-page .wl-hero .wl-lead:not(#_) {
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 650;
    text-wrap: balance;
}

/* Tek kelimelik yetim satır oluşmasın (desteklemeyen tarayıcıda yok sayılır) */
html body.wl-page .wl-hero .wl-hero__desc:not(#_),
html body.wl-page .wl-hero .wl-hero__note:not(#_) {
    text-wrap: pretty;
}

html body.wl-page .wl-hero .wl-rotor:not(#_) {
    align-self: stretch;
    flex-wrap: wrap;
    gap: .15rem .45rem;
    font-size: .95rem;
}

/* Kelime penceresi etiketin yanında kalır; büyük yazı ayarında sığmazsa alt satıra iner (kelime kırpılmaz) */
html body.wl-page .wl-hero .wl-rotor__win:not(#_) {
    flex: 1 1 auto;
    min-width: 9.5rem;
    height: 1.8rem;
}

html body.wl-page .wl-hero .wl-rotor__win b:not(#_) {
    font-size: 1.05rem;
}

html body.wl-page .wl-hero .wl-hero__desc:not(#_) {
    font-size: .96rem;
    line-height: 1.5;
}

/* Düğmeler: tam genişlik, yığılı */
html body.wl-page .wl-hero .wl-hero__cta:not(#_) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

html body.wl-page .wl-hero .wl-hero__cta .wl-btn:not(#_) {
    width: 100%;
    min-height: 54px;
    padding: 0 8px 0 22px;
    font-size: 1rem;
    border-radius: 18px;
    transition: transform .25s var(--mk-spring);
}

html body.wl-page .wl-hero .wl-hero__cta .wl-btn:not(#_):active {
    transform: scale(.97);
}

html body.wl-page .wl-hero .wl-hero__cta a.wl-btn--login:not(#_):not(#__) {
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid var(--mk-line);
    background: var(--mk-surface);
    color: var(--wl-ink, var(--mk-text));
    box-shadow: var(--mk-shadow-1);
}

/* Ana düğme halkası: box-shadow yerine transform/opacity (boyama maliyeti yok) */
html body.wl-page .wl-hero .wl-btn--pulse:not(#_) {
    position: relative;
    overflow: visible;
    animation: none;
    box-shadow: 0 12px 24px -12px var(--mk-glow);
}

html body.wl-page .wl-hero .wl-btn--pulse:not(#_)::before {
    display: none;
}

html body.wl-page .wl-hero .wl-btn--pulse:not(#_)::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    border: 2px solid rgb(var(--wl-p-rgb, 70 81 158) / .55);
    pointer-events: none;
    animation: mk-ring 2.8s ease-out infinite;
}

@keyframes mk-ring {
    0% { transform: scale(1); opacity: .7; }
    70%, 100% { transform: scale(1.06, 1.22); opacity: 0; }
}

html body.wl-page .wl-hero .wl-hero__note:not(#_) {
    align-items: flex-start;
    padding: 12px;
    border-radius: var(--mk-r-s);
    background: rgb(var(--wl-p-rgb, 70 81 158) / .07);
    font-size: .875rem;
    line-height: 1.4;
}

/* Güven çipleri: yatay kaydırılan tek satır */
html body.wl-page .wl-hero .wl-trust:not(#_) {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 2px calc(var(--mk-gutter) * -1) 0;
    padding: 4px var(--mk-gutter);
    width: auto;
    max-width: none;
    border-top: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--mk-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-self: stretch;
}

html body.wl-page .wl-hero .wl-trust:not(#_)::-webkit-scrollbar {
    display: none;
}

html body.wl-page .wl-hero .wl-trust li:not(#_) {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
    align-items: center;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    background: var(--mk-surface);
    box-shadow: var(--mk-shadow-1);
    scroll-snap-align: start;
    white-space: nowrap;
}

html body.wl-page .wl-hero .wl-trust strong:not(#_) {
    font-size: 1rem;
}

html body.wl-page .wl-hero .wl-trust span:not(#_) {
    font-size: .875rem;
}

/* Vitrin: telefon maketi kısmen görünür, aşağıya doğru solar; kaydır ipucu */
html body.wl-page .wl-hero .wl-hero__visual:not(#_) {
    --mk-vis-h: clamp(250px, 76vw, 330px);
    height: var(--mk-vis-h);
    min-height: 0;
    margin-top: 8px;
    padding: 0;
    overflow: hidden;
    place-items: start center;
    contain: paint;
    /* alt kenarda halka/parıltı sert kesilmesin */
    -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
}

html body.wl-page .wl-hero .wl-hero__visual:not(#_)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 52px;
    z-index: 6;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-right: 3px solid var(--mk-primary);
    border-bottom: 3px solid var(--mk-primary);
    border-radius: 2px;
    transform: rotate(45deg);
    opacity: .75;
    animation: mk-hint 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mk-hint {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(45deg); opacity: .35; }
    50% { transform: translate3d(0, 7px, 0) rotate(45deg); opacity: .9; }
}

html body.wl-page .wl-hero .wl-phonewrap:not(#_) {
    margin-top: 0;
    height: var(--mk-vis-h);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 62%, transparent 98%);
    mask-image: linear-gradient(#000 62%, transparent 98%);
}

html body.wl-page .wl-hero .wl-phone:not(#_) {
    width: min(236px, 62vw);
}

html body.wl-page .wl-hero .wl-orbit:not(#_) {
    --ow: min(330px, 92vw);
    top: 120px;
}

html body.wl-page .wl-hero .wl-hero__glow:not(#_) {
    inset: 0 12% auto;
    height: 70%;
}

html body.wl-page .wl-hero .wl-float--nfc:not(#_) {
    right: 4px;
    top: 14px;
    padding: .45rem .65rem;
    border-radius: 16px;
    gap: .5rem;
}

html body.wl-page .wl-hero .wl-float--nfc .wl-float__ico:not(#_) {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

html body.wl-page .wl-hero .wl-float--nfc strong:not(#_) {
    font-size: .8125rem;
}

html body.wl-page .wl-hero .wl-float--nfc small:not(#_) {
    font-size: .75rem;
}

html body.wl-page .wl-hero .wl-float--ok:not(#_) {
    right: auto;
    left: 4px;
    bottom: auto;
    top: 150px;
    padding: .45rem .65rem;
    border-radius: 16px;
    gap: .5rem;
}

html body.wl-page .wl-hero .wl-float--ok .wl-float__ico:not(#_) {
    width: 28px;
    height: 28px;
    border-radius: 9px;
}

html body.wl-page .wl-hero .wl-float--ok strong:not(#_) {
    font-size: .8125rem;
}

html body.wl-page .wl-hero .wl-float--ok small:not(#_) {
    font-size: .75rem;
}

/* ==========================================================================
   9) Platform şeridi (hero'nun hemen altı)
   ========================================================================== */
html body.wl-page .wl-strip:not(#_) {
    padding: 14px 0 16px;
    border-block: 0;
    background: transparent;
}

html body.wl-page .wl-strip .wl-marquee:not(#_) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

html body.wl-page .wl-strip .wl-chip:not(#_) {
    gap: .5rem;
    padding: .35rem .9rem .35rem .4rem;
    border-radius: 999px;
    font-size: .875rem;
    box-shadow: var(--mk-shadow-1);
}

html body.wl-page .wl-strip .wl-chip i:not(#_) {
    width: 28px;
    height: 28px;
}

/* ==========================================================================
   9b) Hafif hareket: her karede yeniden boyayan ya da yerleşimi etkileyen animasyonlar kapalı,
   parçacık sayısı yarıya iner (ölçüm: aynı süredeki boyama/raster işi yarıdan aza düştü)
   ========================================================================== */
/* Altı çizginin renk akışı arka plan konumunu oynatıyordu (her karede boyama): mobilde yalnız çizilip silinme (transform) sürer */
html body.wl-page .wl-h1 .wl-h1__w--em:not(#_)::after {
    animation: wl-ul-draw 5s var(--wl-ease, var(--mk-ease)) .9s infinite;
}

/* Logo üzerinden geçen ışık çizgisi `left` animasyonuydu (yerleşim); mobilde yok */
html body.wl-page .wl-logo:not(#_)::after {
    animation: none;
    opacity: 0;
}

html body.wl-page .wl-hero .wl-particles i:not(#_):nth-child(n+7) {
    display: none;
}

/* ==========================================================================
   10) Düşük güç / tercih yedekleri
   ========================================================================== */
html.mx-blur-off body.wl-page .wl-header:not(#_),
html.mx-reduce-transparency body.wl-page .wl-header:not(#_) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--wl-surface, #fff);
}

@media (prefers-reduced-motion: reduce) {
    html.wl-html {
        scroll-behavior: auto;
    }
    html body.wl-page .wl-header:not(#_),
    html body.wl-page .wl-drawer:not(#_),
    html body.wl-page .wl-tabbar:not(#_),
    .mk-scrim {
        transition: none;
    }
    html body.wl-page .wl-hero .wl-btn--pulse:not(#_)::after,
    html body.wl-page .wl-hero .wl-hero__visual:not(#_)::after,
    html.has-home-light-page .m-app-install.is-open:not(#_) {
        animation: none;
    }
}

@media (prefers-reduced-data: reduce) {
    html body.wl-page .wl-hero .wl-aurora:not(#_),
    html body.wl-page .wl-hero .wl-particles:not(#_),
    html body.wl-page .wl-hero .wl-orbit:not(#_) {
        display: none;
    }
}

/* ==========================================================================
   11) Yatay telefon (kısa yükseklik): çubuklar incelir, hero sıkışır
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --mk-appbar-h: 48px;
        --mk-tabbar-h: 57px;
    }
    html body.wl-page .wl-tabbar__a:not(#_) {
        min-height: 44px;
        flex-direction: row;
        gap: 6px;
    }
    html body.wl-page .wl-tabbar__cta:not(#_) i {
        width: 40px;
        height: 40px;
        margin-top: -8px;
    }
    html body.wl-page .wl-tabbar__cta:not(#_) span {
        margin-top: 0;
    }
    html body.wl-page .wl-hero:not(#_) {
        padding-top: calc(var(--mk-top) + 8px);
    }
    html body.wl-page .wl-hero .wl-hero__visual:not(#_) {
        --mk-vis-h: 220px;
    }
    html body.wl-page .wl-drawer:not(#_) {
        max-height: 92vh;
        max-height: 92dvh;
    }
    /* Yatay telefon: metin solda, telefon sağda (ekran dikeyde çok kısa) */
    @media (min-width: 560px) {
        html body.wl-page .wl-hero .wl-hero__grid:not(#_) {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
            gap: 12px 20px;
            align-items: start;
        }
        html body.wl-page .wl-hero .wl-h1:not(#_) {
            font-size: clamp(1.7rem, 5.2vw, 2.15rem);
        }
        html body.wl-page .wl-hero .wl-hero__visual:not(#_) {
            --mk-vis-h: 300px;
            margin-top: 0;
        }
        html body.wl-page .wl-hero .wl-hero__cta:not(#_) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        html body.wl-page .wl-hero .wl-hero__visual:not(#_)::after,
        html body.wl-page .wl-hero .wl-float:not(#_),
        html body.wl-page .wl-hero .wl-orbit:not(#_) {
            display: none;
        }
        html body.wl-page .wl-hero .wl-phone:not(#_):not(#__) {
            width: min(176px, 30vw);
        }
    }
    html body.wl-page .wl-header .wl-container:not(#_) {
        padding-top: 0;
    }
}

/* ==========================================================================
   12) Büyük telefon / küçük tablet (≥ 600 px): içerik ferahlar, alt sayfalar ortada kalır
   ========================================================================== */
@media (min-width: 600px) {
    html body.wl-page .wl-hero .wl-h1:not(#_) {
        font-size: clamp(2.3rem, 6.4vw, 3rem);
    }
    html body.wl-page .wl-hero .wl-lead:not(#_) {
        font-size: 1.15rem;
    }
    html body.wl-page .wl-hero .wl-hero__desc:not(#_) {
        font-size: 1.02rem;
    }
    html body.wl-page .wl-hero .wl-hero__cta:not(#_) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html body.wl-page .wl-hero .wl-hero__visual:not(#_) {
        --mk-vis-h: 400px;
    }
    html body.wl-page .wl-hero .wl-phone:not(#_) {
        width: 276px;
    }
    html body.wl-page .wl-hero .wl-orbit:not(#_) {
        --ow: 400px;
        top: 150px;
    }
    html body.wl-page .wl-drawer:not(#_) {
        left: 0;
        right: 0;
        max-width: 560px;
        margin-inline: auto;
    }
    html.has-home-light-page .m-app-install:not(#_) {
        max-width: 540px;
        margin-inline: auto;
    }
}

/* ==========================================================================
   13) Klavye açıkken alt çubuk / kurulum çubuğu çekilir (form alanı odakta; mobil-kabuk.js html.mk-kb ekler)
   ========================================================================== */
html.mk-kb body.wl-page .wl-tabbar:not(#_) {
    transform: translate3d(0, 110%, 0);
}

html.mk-kb body.wl-page .wl-top:not(#_) {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   14) Odak halkası (klavye / anahtar ile gezinme): çubuklarda ve hero düğmelerinde net
   ========================================================================== */
html body.wl-page :where(.wl-header, .wl-tabbar, .wl-drawer, .wl-hero, .m-app-install) :where(a, button, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--mk-primary);
    outline-offset: 2px;
    box-shadow: none;
}

html[data-theme="dark"] body.wl-page :where(.wl-header, .wl-tabbar, .wl-drawer, .wl-hero, .m-app-install) :where(a, button, [tabindex="0"]):focus-visible {
    outline-color: #fff;
}

/* ==========================================================================
   15) Yüksek karşıtlık (Windows / Android): renkler sistemden gelir, sınır ve vurgu çizgiyle belirtilir
   ========================================================================== */
@media (forced-colors: active) {
    html body.wl-page .wl-header:not(#_),
    html body.wl-page .wl-tabbar:not(#_) {
        background: Canvas;
        border-color: CanvasText;
    }
    html body.wl-page .wl-header a.wl-btn--login:not(#_):not(#__),
    html body.wl-page .wl-header .wl-btn--signup:not(#_),
    html body.wl-page .wl-header .wl-burger:not(#_),
    html body.wl-page .wl-hero .wl-hero__cta .wl-btn:not(#_),
    html body.wl-page .wl-hero .wl-trust li:not(#_),
    html.has-home-light-page .m-app-install:not(#_) .m-app-install__btn,
    html.has-home-light-page .m-app-install:not(#_) .m-app-install__close {
        border: 1px solid ButtonText;
    }
    html body.wl-page .wl-tabbar__a.is-on:not(#_) {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
    html body.wl-page .wl-tabbar__cta:not(#_) i {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        forced-color-adjust: none;
    }
    html body.wl-page .wl-drawer:not(#_) {
        border: 1px solid CanvasText;
    }
    html.has-home-light-page .m-app-install:not(#_) .m-app-install__panel {
        border: 1px solid CanvasText;
        background: Canvas;
    }
    .mk-scrim {
        background: transparent;
    }
    html body.wl-page::before,
    html body.wl-page .wl-hero .wl-aurora:not(#_) {
        display: none;
    }
}

/* ==========================================================================
   16) Dokunma geri bildirimi anında başlar: basılı durumda geçiş süresi kısa (≤ 100 ms)
   ========================================================================== */
html body.wl-page .wl-header :where(a, button):active,
html body.wl-page .wl-tabbar a:active,
html body.wl-page .wl-drawer :where(a, button):active,
html body.wl-page .wl-hero__cta .wl-btn:active,
html.has-home-light-page .m-app-install :where(a, button):active {
    transition-duration: .1s !important;
}