/*
 * Solid Medya — www.solidmedya.com
 * Proje: Wzoop dijital kartvizit — ana sayfa
 * Tam ekran menü: üstte logo, altında 3-4-3-4 düzeninde 14 kare simge düğmesi. Yalnız ≤1023 px (hamburger menünün göründüğü genişlikler).
 * Yazılım, tasarım ve geliştirme: Solid Medya
 */

@media (max-width: 1023px) {
    /* ===== Tam ekran kabuk ===== */
    html body.wl-page .wl-drawer:not(#_):not(#__) {
        --mk-menu-bg-a: #f4f6ff;
        --mk-menu-bg-b: #ebeeff;
        --mk-menu-bg-c: #fff0f4;
        --mk-tile-bg: rgb(255 255 255 / .78);
        --mk-tile-line: rgb(70 81 158 / .12);
        --mk-tile-shadow: 0 10px 24px -14px rgb(32 36 71 / .35), 0 2px 6px rgb(32 36 71 / .06);
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: max(10px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(90% 46% at 100% 0%, rgb(124 108 240 / .22), transparent 70%),
            radial-gradient(80% 42% at 0% 100%, rgb(249 50 48 / .12), transparent 70%),
            linear-gradient(165deg, var(--mk-menu-bg-a) 0%, var(--mk-menu-bg-b) 52%, var(--mk-menu-bg-c) 100%);
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: scale(1.03);
        transition: opacity .3s ease, transform .4s var(--mk-ease, cubic-bezier(.22, 1, .36, 1)), visibility 0s linear .4s;
    }

    html body.wl-page .wl-drawer.is-open:not(#_):not(#__) {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .3s ease, transform .4s var(--mk-ease, cubic-bezier(.22, 1, .36, 1)), visibility 0s linear 0s;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer:not(#_):not(#__) {
        --mk-menu-bg-a: #0b1030;
        --mk-menu-bg-b: #131a45;
        --mk-menu-bg-c: #20103a;
        --mk-tile-bg: rgb(255 255 255 / .07);
        --mk-tile-line: rgb(255 255 255 / .12);
        --mk-tile-shadow: 0 12px 26px -14px rgb(0 0 0 / .7);
        background:
            radial-gradient(90% 46% at 100% 0%, rgb(124 108 240 / .34), transparent 70%),
            radial-gradient(80% 42% at 0% 100%, rgb(249 50 48 / .2), transparent 70%),
            linear-gradient(165deg, var(--mk-menu-bg-a) 0%, var(--mk-menu-bg-b) 52%, var(--mk-menu-bg-c) 100%);
    }

    /* Eski çekmece parçaları (tutamaç, karartma, alt sayfa içi kutular) tam ekran menüde yok */
    html body.wl-page .wl-drawer:not(#_):not(#__)::before,
    html body.wl-page .wl-drawer:not(#_):not(#__)::after,
    html body.wl-page .wl-drawer .mk-grab,
    html body.wl-page .mk-scrim,
    html body.wl-page .wl-drawer__cta,
    html body.wl-page .wl-drawer__theme {
        display: none !important;
    }

    /* ===== Üst satır: ortada logo, sağda kapat ===== */
    html body.wl-page .wl-drawer .wl-drawer__top {
        position: relative;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
    }

    html body.wl-page .wl-drawer .wl-drawer__logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: 4px 10px;
        text-decoration: none;
    }

    html body.wl-page .wl-drawer .wl-drawer__logo img {
        width: min(176px, 48vw);
        height: auto;
        max-width: none;
    }

    html body.wl-page .wl-drawer .wl-drawer__logo .logo-on-dark {
        display: none;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__logo .logo-on-light {
        display: none;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__logo .logo-on-dark {
        display: block;
    }

    html body.wl-page .wl-drawer .wl-drawer__close {
        position: absolute;
        top: 50%;
        right: 0;
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid var(--mk-tile-line);
        border-radius: 16px;
        background: var(--mk-tile-bg);
        color: var(--wl-ink, #1b2150);
        cursor: pointer;
        transform: translateY(-50%);
        transition: transform .2s var(--mk-spring, cubic-bezier(.34, 1.56, .64, 1)), background-color .2s;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__close {
        color: #fff;
    }

    html body.wl-page .wl-drawer .wl-drawer__close:active {
        transform: translateY(-50%) scale(.9);
    }

    /* ===== 3-4-3-4 kare düğme ızgarası (12 sütun: 3'lü satırda 4, 4'lü satırda 3 sütun kaplar) ===== */
    html body.wl-page .wl-drawer .wl-drawer__grid {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-content: center;
        gap: 14px;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        padding: 6px 0 4px;
        border: 0;
        border-radius: 0;
        background: none;
    }

    html body.wl-page .wl-drawer .wl-tile:nth-child(-n+3) { grid-column: span 4; }
    html body.wl-page .wl-drawer .wl-tile:nth-child(n+4):nth-child(-n+7) { grid-column: span 3; }
    html body.wl-page .wl-drawer .wl-tile:nth-child(n+8):nth-child(-n+10) { grid-column: span 4; }
    html body.wl-page .wl-drawer .wl-tile:nth-child(n+11) { grid-column: span 3; }

    /* ===== Kare düğme ===== */
    html body.wl-page .wl-drawer .wl-tile {
        --t1: #4f5bd5;
        --t2: #8b7cf6;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 0;
        aspect-ratio: 1 / 1;
        padding: 8px 4px;
        overflow: hidden;
        border: 1px solid var(--mk-tile-line);
        border-radius: 24px;
        background: var(--mk-tile-bg);
        box-shadow: var(--mk-tile-shadow);
        color: var(--wl-ink, #1b2150);
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform .22s var(--mk-spring, cubic-bezier(.34, 1.56, .64, 1)), box-shadow .22s, border-color .22s;
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        html:not(.mx-blur-off):not(.mx-reduce-transparency) body.wl-page .wl-drawer .wl-tile {
            -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
        }
    }

    /* Üst kenarda hafif parlama: kartın "cam" hissi */
    html body.wl-page .wl-drawer .wl-tile::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 48%;
        background: linear-gradient(180deg, rgb(255 255 255 / .55), transparent);
        opacity: .55;
        pointer-events: none;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-tile {
        color: #fff;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-tile::before {
        background: linear-gradient(180deg, rgb(255 255 255 / .14), transparent);
        opacity: .5;
    }

    html body.wl-page .wl-drawer .wl-tile:active {
        transform: scale(.93);
        border-color: var(--t1);
    }

    html body.wl-page .wl-drawer .wl-tile:focus-visible {
        outline: 3px solid var(--t1);
        outline-offset: 2px;
    }

    /* Simge: tona özgü renkli yuvarlatılmış kare */
    html body.wl-page .wl-drawer .wl-tile__ico {
        position: relative;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 46%;
        height: auto;
        aspect-ratio: 1 / 1;
        min-width: 38px;
        padding: 0;
        border: 0;
        border-radius: 32%;
        background: linear-gradient(140deg, var(--t1), var(--t2));
        box-shadow: 0 10px 18px -8px var(--t1), inset 0 1px 0 rgb(255 255 255 / .35);
        color: #fff;
        cursor: pointer;
    }

    html body.wl-page .wl-drawer .wl-tile__ico .wl-i,
    html body.wl-page .wl-drawer .wl-tile__ico svg {
        width: 52%;
        height: 52%;
        stroke: #fff;
    }

    html body.wl-page .wl-drawer .wl-tile__lbl {
        position: relative;
        display: block;
        max-width: 100%;
        padding: 0 2px;
        font-size: .8125rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.01em;
        overflow-wrap: anywhere;
    }

    /* 4'lü satırlarda kareler küçülür: yazı ve simge buna göre */
    html body.wl-page .wl-drawer .wl-tile:nth-child(n+4):nth-child(-n+7) .wl-tile__lbl,
    html body.wl-page .wl-drawer .wl-tile:nth-child(n+11) .wl-tile__lbl {
        font-size: .75rem;
    }

    html body.wl-page .wl-drawer .wl-tile:nth-child(n+4):nth-child(-n+7) .wl-tile__ico,
    html body.wl-page .wl-drawer .wl-tile:nth-child(n+11) .wl-tile__ico {
        width: 50%;
    }

    /* Tema düğmesi karesi: içindeki düğme simge kutusu gibi görünür, tüm kareye dokunulur */
    html body.wl-page .wl-drawer .wl-tile--theme .wl-tile__ico {
        width: 46%;
        height: auto;
        min-height: 0;
    }

    html body.wl-page .wl-drawer .wl-tile--theme .wl-tile__ico .wz-ti {
        width: 52%;
        height: 52%;
    }

    /* ===== Renk tonları ===== */
    html body.wl-page .wl-drawer .wl-tile[data-tone="indigo"] { --t1: #4f5bd5; --t2: #8b7cf6; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="blue"]   { --t1: #2563eb; --t2: #38bdf8; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="violet"] { --t1: #7c3aed; --t2: #c084fc; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="amber"]  { --t1: #f59e0b; --t2: #fb923c; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="green"]  { --t1: #059669; --t2: #34d399; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="pink"]   { --t1: #db2777; --t2: #fb7185; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="cyan"]   { --t1: #0891b2; --t2: #22d3ee; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="red"]    { --t1: #dc2626; --t2: #f87171; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="teal"]   { --t1: #0d9488; --t2: #2dd4bf; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="purple"] { --t1: #9333ea; --t2: #e879f9; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="sky"]    { --t1: #0284c7; --t2: #7dd3fc; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="orange"] { --t1: #ea580c; --t2: #fdba74; }
    html body.wl-page .wl-drawer .wl-tile[data-tone="slate"]  { --t1: #475569; --t2: #94a3b8; }

    /* ===== Açılış: kareler sırayla belirir ===== */
    @keyframes mkTileIn {
        from { opacity: 0; transform: translateY(16px) scale(.9); }
        to { opacity: 1; transform: none; }
    }

    html body.wl-page .wl-drawer.is-open .wl-tile {
        animation: mkTileIn .5s var(--mk-spring, cubic-bezier(.34, 1.56, .64, 1)) both;
        animation-delay: calc(60ms + var(--i, 0) * 32ms);
    }

    html body.wl-page .wl-drawer.is-open .wl-drawer__top {
        animation: mkTileIn .45s var(--mk-ease, ease) both;
    }

    /* ===== Alt satır: hızlı iletişim ===== */
    html body.wl-page .wl-drawer .wl-drawer__foot {
        flex: 0 0 auto;
        display: flex;
        gap: 12px;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    html body.wl-page .wl-drawer .wl-drawer__pill {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 52px;
        padding: 0 14px;
        border: 1px solid var(--mk-tile-line);
        border-radius: 18px;
        background: var(--mk-tile-bg);
        box-shadow: var(--mk-tile-shadow);
        color: var(--wl-ink, #1b2150);
        font-size: .9375rem;
        font-weight: 700;
        text-decoration: none;
        transition: transform .2s var(--mk-spring, cubic-bezier(.34, 1.56, .64, 1));
        -webkit-tap-highlight-color: transparent;
    }

    html body.wl-page .wl-drawer .wl-drawer__pill:active {
        transform: scale(.95);
    }

    html body.wl-page .wl-drawer .wl-drawer__pill .wl-i,
    html body.wl-page .wl-drawer .wl-drawer__pill svg {
        color: #4f5bd5;
        stroke: currentColor;
    }

    html body.wl-page .wl-drawer .wl-drawer__pill--wa .wl-i,
    html body.wl-page .wl-drawer .wl-drawer__pill--wa svg {
        color: #16a34a;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__pill {
        color: #fff;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__pill .wl-i,
    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__pill svg {
        color: #a5b0ff;
    }

    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__pill--wa .wl-i,
    html[data-theme="dark"] body.wl-page .wl-drawer .wl-drawer__pill--wa svg {
        color: #4ade80;
    }

    html body.wl-page .wl-drawer.is-open .wl-drawer__foot {
        animation: mkTileIn .5s var(--mk-spring, ease) both;
        animation-delay: .5s;
    }
    /* ===== Dar ekranlar ===== */
    @media (max-width: 360px) {
        html body.wl-page .wl-drawer:not(#_):not(#__) {
            padding-left: max(14px, env(safe-area-inset-left, 0px));
            padding-right: max(14px, env(safe-area-inset-right, 0px));
        }
        html body.wl-page .wl-drawer .wl-drawer__grid { gap: 8px; }
        html body.wl-page .wl-drawer .wl-tile { border-radius: 20px; gap: 7px; }
        html body.wl-page .wl-drawer .wl-tile__lbl { font-size: .75rem; }
        html body.wl-page .wl-drawer .wl-tile:nth-child(n+4):nth-child(-n+7) .wl-tile__lbl,
        html body.wl-page .wl-drawer .wl-tile:nth-child(n+11) .wl-tile__lbl { font-size: .6875rem; }
    }

    /* Kısa / yatay ekran: ızgara kaydırılır, kareler çok büyümesin */
    @media (max-height: 560px) {
        html body.wl-page .wl-drawer .wl-drawer__grid { align-content: start; max-width: 520px; }
        html body.wl-page .wl-drawer .wl-drawer__top { min-height: 60px; }
        html body.wl-page .wl-drawer .wl-drawer__logo img { width: min(140px, 40vw); }
    }

    @media (min-width: 700px) {
        html body.wl-page .wl-drawer .wl-drawer__grid { max-width: 620px; gap: 16px; }
    }

    /* ===== Düşük hareket ===== */
    @media (prefers-reduced-motion: reduce) {
        html body.wl-page .wl-drawer:not(#_):not(#__),
        html body.wl-page .wl-drawer.is-open:not(#_):not(#__) {
            transform: none;
            transition: opacity .01s, visibility 0s;
        }
        html body.wl-page .wl-drawer.is-open .wl-tile,
        html body.wl-page .wl-drawer.is-open .wl-drawer__top {
            animation: none;
        }
    }

    /* Yüksek karşıtlık: sınırlar belirgin */
    @media (forced-colors: active) {
        html body.wl-page .wl-drawer .wl-tile,
        html body.wl-page .wl-drawer .wl-drawer__close {
            border: 2px solid CanvasText;
            background: Canvas;
        }
        html body.wl-page .wl-drawer .wl-tile__ico {
            border: 1px solid CanvasText;
            background: Canvas;
        }
        html body.wl-page .wl-drawer .wl-tile__ico svg { stroke: CanvasText; }
    }
}

/* ===== Alt gezinme: ortadaki "Menü" düğmesi (düğme olduğu için tarayıcı varsayılanları sıfırlanır) ===== */
@media (max-width: 768px) {
    html body.wl-page button.wl-tabbar__a:not(#_) {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        font-family: inherit;
        cursor: pointer;
    }
}