/* =========================================================
   MOBİL V1 – MİNİMALİST TABELA + SLIDER + HIZLI İLETİŞİM ŞERİDİ
   header.css, slider.css ve topbar.css'ten SONRA yüklenir.
   Masaüstü görünümüne dokunmaz: her şey max-width:900px içinde.
   ========================================================= */

/* ---- masaüstünde sarmalayıcı görünmez (düzen eskisi gibi kalır) ---- */
.topbar-quick { display: contents; }
.t3d-table { display: none; }
.topbar-contact { order: 1; }
.topbar-tools   { order: 2; }
.topbar-cta     { order: 3; }

@media (max-width: 900px) {

    /* ---------- ÖLÇEK: T artık ekranın ~%40'ı kadar ---------- */
    :root { --u: min(calc(100vw * .00057), calc(100vh * .00027)); }   /* tabela ölçeği (önceki .00050 / .00024; masaüstü .00067 / .00032) */
    :root { --ground: 90px; }   /* slider.css'teki mobil zemin payıyla aynı; T'nin konumu da buna göre hesaplanır */

    /* ---------- ÜST ŞERİT: logo solda, yalnızca hamburger sağda ---------- */
    .topbar-tools { margin-left: auto; }
    /* arama ikonu artık mobilde de görünür (hamburgerin hemen yanında) */
    .topbar-tools { gap: 2px; }
    .tb-btn { width: 42px; height: 42px; border-radius: 12px; }

    /* ---------- ANA SAYFA: hızlı iletişim şeridi (cam hap) ---------- */
    body.is-hero .topbar-quick {
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(var(--hdr) + 24px);
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 54px;
        padding: 0 8px 0 12px;
        box-sizing: border-box;
        border: 1px solid rgba(37, 195, 253, .55);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(10, 44, 80, .74) 0%, rgba(4, 22, 44, .82) 100%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 0 18px rgba(0, 190, 255, .28), inset 0 0 14px rgba(0, 190, 255, .12);
        transition: opacity .3s ease, transform .3s ease;
    }
    /* sayfa kayınca şerit kaybolur (içeriğin üstünde kalmasın) */
    body.is-hero .topbar.is-scrolled .topbar-quick {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }
    body.is-hero .topbar-contact { display: flex; gap: 10px; margin: 0; flex: 1 1 auto; min-width: 0; }
    body.is-hero .topbar-phone,
    body.is-hero .topbar-mail { color: #fff; gap: 8px; }
    body.is-hero .topbar-mail { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18); }
    body.is-hero .tp-ico {
        width: 34px; height: 34px;
        background: linear-gradient(135deg, #1aa7ff, #0a7fe0);
        color: #fff;
    }
    body.is-hero .tp-ico svg { width: 17px; height: 17px; }
    body.is-hero .topbar-phone .tp-txt { display: flex; }
    body.is-hero .tp-txt small { font-size: 9.5px; color: rgba(255, 255, 255, .72); }
    body.is-hero .tp-txt b { font-size: 12.5px; color: #fff; white-space: nowrap; }
    /* mobilde "Hemen Ara" yok; yerine yalnızca e-posta var (sağda) */
    body.is-hero .topbar-quick .topbar-cta { display: none; }
    body.is-hero .topbar-mail { margin-left: auto; padding-left: 0; border-left: 0; }
    body.is-hero .topbar-quick { padding: 0 10px 0 12px; }
    /* e-posta metni her ekranda görünür; dar ekranda taşarsa ... ile kısalır */
    body.is-hero .topbar-contact { justify-content: space-between; }
    body.is-hero .topbar-mail { min-width: 0; }
    body.is-hero .topbar-mail .tp-txt { display: flex; min-width: 0; }
    body.is-hero .topbar-mail .tp-txt b { overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 380px) {
        body.is-hero .tp-txt b { font-size: 11.5px; }
        body.is-hero .topbar-phone, body.is-hero .topbar-mail { gap: 6px; }
        body.is-hero .tp-ico { width: 30px; height: 30px; }
    }

    /* ---------- ANA SAYFA DIŞI: eski mobil düzen aynen kalır ---------- */
    body:not(.is-hero) .topbar-contact { display: none; }

    /* ---------- TABELA: masaüstüyle BİREBİR aynı geometri, yalnızca küçültülmüş ----------
       Kol, gövde satırları, alt yüzeyler, taban, neon gövde ve kaide masaüstü
       (header.css) değerlerinden geliyor; burada sadece ölçek, konum ve
       küçük ekrana sığması için yazı/ikon boyutları ayarlanır. */
    .t3d { --wf-row: 419; --stage-h: 950; left: var(--t3d-left, -28px); }   /* eksi değer = T'nin bir kısmı soldan taşar; istediğin gibi değiştir */
    /* T artık ALTTA: kaidesi slider'ın zemin çizgisine oturur (masaüstündeki formülün aynısı).
       --t3d-lift: T'yi çizgiden yukarı kaldırmak istersen (varsayılan 18px; 0 = tam çizgide) */
    body.is-hero .t3d.has-ground,
    body.is-hero .t3d.has-ground:not(.is-open) { top: calc(100vh - var(--ground) - var(--sb) * var(--u) + 1px - var(--t3d-lift, 18px)); }
    body:not(.is-hero) .t3d { top: calc(var(--hdr) + 12px); }

    /* kapalıyken tamamen gizli, açılınca yumuşakça gelir */
    .t3d:not(.is-open) { display: none; }
    .t3d.is-open { animation: t3dMobIn .35s cubic-bezier(.16, 1, .3, 1); }
    @keyframes t3dMobIn { from { opacity: 0; transform: translateX(-14px); } }

    /* masaüstündeki kaide + neon gövde mobilde de görünür (header.css gizliyordu) */
    .t3d.has-ground .t3d-plate,
    .t3d.has-ground .t3d-legs { display: block; }

    /* masa çizgisi: kaide bu çizginin üstüne oturur (konumunu header.php içindeki script hesaplar) */
    .t3d.has-ground .t3d-table {
        display: none;   /* T artık slider'ın zemin çizgisine oturuyor; ikinci çizgiye gerek yok */
        position: absolute;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg, #00d9ff 0%, #00d9ff 72%, rgba(0, 217, 255, 0) 100%);
        box-shadow: 0 0 8px #00d9ff, 0 0 20px rgba(0, 217, 255, .55);
    }
    .t3d.has-ground .t3d-table::after {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 2px;
        height: 28px;
        background: linear-gradient(180deg, rgba(0, 217, 255, .22) 0%, rgba(0, 217, 255, 0) 100%);
    }

    /* satır içeriği: yalnızca yazı/ikon küçük ekranda sığsın diye ölçeklenir */
    .t3d-row .t3d-fc { padding: 0 calc(26 * var(--u)) 0 calc(28 * var(--u)); }
    .t3d-ico { width: max(13px, calc(40 * var(--u))); height: max(13px, calc(40 * var(--u))); }
    .t3d-vline { margin: 0 calc(18 * var(--u)); }
    .t3d-label { font-size: clamp(10px, calc(38 * var(--u)), 12px); letter-spacing: 0; }
    .t3d-chev { width: max(8px, calc(24 * var(--u))); height: max(8px, calc(24 * var(--u))); }

    /* kaidedeki yazı/çizgi küçük ekranda aynı oranda kalır */
    .t3d-plate-dot { width: max(5px, calc(14 * var(--u))); height: max(5px, calc(14 * var(--u))); }

    /* ---------- SLIDER: alta yaslı yazı, yan yana butonlar ---------- */
    /* Z-INDEX DÜZELTMESİ: butonlar (Projeleri Keşfet / İletişime Geç) alttaki koyu gradyan (::after, z2)
       ve zemin ışığının (z3) ALTINDA kalıyordu. Overlay kendi katmanını açmaz (z-index:auto),
       arka plan gradyanı ::before'a taşındı, yazı + butonlar z-index:4 ile hepsinin üstüne çıkar. */
    .main-slider-section .slider-overlay {
        z-index: auto;
        /* yazı bloğu en üstte: hızlı iletişim hapının (top: hdr+24, yükseklik 54) hemen altında */
        padding: calc(var(--hdr) + 24px + 54px + 34px) 6% 0;   /* hapla yazı arasında nefes payı */
        align-items: flex-start;
        background: none;
    }
    .main-slider-section .slider-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(3, 19, 38, .72) 0%,
            rgba(3, 19, 38, .55) 22%,
            rgba(3, 19, 38, 0) 46%,
            rgba(3, 19, 38, 0) 70%,
            rgba(3, 19, 38, .6) 100%);
    }
    .main-slider-section .slider-content { position: relative; z-index: 4; }
    .main-slider-section .slider-content { padding: 0; max-width: 100%; }
    .main-slider-section .slider-content::before,
    .main-slider-section .slider-content::after { content: none; }

    .main-slider-section .slider-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        padding-left: 0;
        border-left: 0;
        font-size: 12px;
        letter-spacing: .3em;
    }
    .main-slider-section .slider-eyebrow::before {
        content: "";
        flex: none;
        width: 34px;
        height: 2px;
        background: #00d9ff;
        box-shadow: 0 0 8px #00d9ff;
    }
    .main-slider-section .slider-content h2 { font-size: clamp(26px, 8.2vw, 36px); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 12px; }
    .main-slider-section .slider-content p { font-size: 14.5px; line-height: 1.5; text-wrap: balance; color: rgba(255, 255, 255, .86); margin-bottom: 22px; }

    /* minimalist butonlar: ince çerçeve, küçük yazı, ok yok */
    .main-slider-section .slider-cta { flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: center; }
    .main-slider-section .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.2;
        white-space: nowrap;
        border-radius: 999px;
        box-shadow: none;
        clip-path: none;
        transform: none;
    }
    .main-slider-section .btn::before,
    .main-slider-section .btn::after { content: none; }
    .main-slider-section .btn-primary {
        background: rgba(0, 217, 255, .16);
        border: 1px solid #25c3fd;
        color: #fff;
    }
    .main-slider-section .btn-ghost {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .38);
        color: #fff;
    }

    /* kısa ekranlar (örn. 360x740): tabela ile çakışmasın diye yazı bloğu sadeleşir */
    @media (max-height: 780px) {
        .main-slider-section .slider-content p { display: none; }
        .main-slider-section .slider-content h2 { font-size: clamp(25px, 7.8vw, 32px); margin-bottom: 18px; }
        .main-slider-section .slider-eyebrow { margin-bottom: 10px; }
    }

    /* ---------- ZEMİN: ortada "SLAYT" okları, sağda play ---------- */
    .main-slider-section .ground-shadow { display: none; }
    /* --nav-c: Slayt oklarının orta noktası. T'nin kaidesinin sağ ucuna göre hesaplanır,
       yani T büyüyüp kayınca oklar kendiliğinden onunla birlikte kayar. */
    .main-slider-section { --nav-c: calc(1010 * var(--u) + var(--t3d-left, -28px) + 80px); }
    .main-slider-section .ground-line {
        background: linear-gradient(90deg,
            #00d9ff 0%,
            #00d9ff calc(var(--nav-c) - 76px),
            rgba(0, 217, 255, 0) calc(var(--nav-c) - 76px),
            rgba(0, 217, 255, 0) calc(var(--nav-c) + 76px),
            #00d9ff calc(var(--nav-c) + 76px),
            #00d9ff 82%,
            rgba(0, 217, 255, 0) 100%);
    }
    .main-slider-section .ground-nav {
        display: flex;
        left: var(--nav-c);
        transform: translate(-50%, 16px);
    }
    .main-slider-section .ground-nav-label {
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        font-size: 11px;
    }
    .main-slider-section .ground-nav-label::after {
        content: "";
        width: 18px;
        height: 2px;
        background: #00d9ff;
        box-shadow: 0 0 6px #00d9ff;
    }
    .main-slider-section .ground-nav .t3d-plate-arrow {
        width: 42px;
        height: 34px;
        margin-left: 14px;
    }
    .main-slider-section .ground-nav .t3d-plate-arrow:first-of-type { margin-left: 0; }

    /* alt oklar artık gerekmiyor (oklar zeminde); sayaç + noktalar ortalanır */
    .main-slider-section .slider-arrows { display: none; }
    .main-slider-section .slider-controls { left: 0; right: 0; bottom: 12px; justify-content: center; }
}

/* =========================================================
   MOBİL MENÜ (hamburger) – TAM SAYFA; tüm sayfalarda, masaüstünde gizli
   Menü öğeleri tabeladakiyle aynı liste (header.php'deki $t3d_items)
   ========================================================= */
.mmenu { display: none; }

@media (max-width: 900px) {
    html.mm-lock, html.mm-lock body { overflow: hidden; }

    .mmenu {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 99999;   /* tabela, üst şerit ve tüm katmanların üstünde */
        overflow-y: auto;
        padding: 0 20px calc(22px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        background:
            radial-gradient(120% 60% at 100% 0%, rgba(26, 167, 255, .28) 0%, rgba(26, 167, 255, 0) 60%),
            linear-gradient(180deg, #0a2c50 0%, #04162c 55%, #020d1c 100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-14px);
        transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s;
    }
    .mmenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

    /* üst: logo sekmesi solda, kapat sağda (üst şeritle aynı dil) */
    .mmenu-top { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 -20px; padding-right: 12px; }
    .mmenu-logo {
        display: flex;
        align-items: center;
        height: calc(var(--hdr) + 14px);
        padding: 0 44px 0 16px;
        box-sizing: border-box;
        background: linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%);
        border-radius: 0 0 60px 24px;
        border-bottom: 3px solid #25c3fd;
        box-shadow: 0 10px 26px -8px rgba(0, 170, 255, .55);
    }
    .mmenu-logo img { height: calc(var(--hdr) - 12px); max-width: 150px; }
    .mmenu-close {
        all: unset;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-top: calc((var(--hdr) - 30px) / 2);
        border-radius: 12px;
        background: linear-gradient(135deg, #1aa7ff, #0a7fe0);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 6px 18px -4px rgba(0, 150, 255, .7);
    }
    .mmenu-close svg { width: 22px; height: 22px; }
    .mmenu-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    .mmenu-head { display: flex; align-items: center; gap: 14px; margin: 30px 2px 16px; color: #7ae7ff; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
    .mmenu-head i { flex: 1; height: 2px; background: linear-gradient(90deg, #00d9ff, rgba(0, 217, 255, 0)); box-shadow: 0 0 8px #00d9ff; }

    .mmenu-list { display: flex; flex-direction: column; gap: 10px; }
    .mmenu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 58px;
        padding: 0 18px 0 10px;
        box-sizing: border-box;
        border: 1px solid rgba(37, 195, 253, .22);
        border-left: 4px solid #25c3fd;
        border-radius: 6px 16px 16px 6px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
        color: #fff;
        text-decoration: none;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), background .25s ease;
    }
    .mmenu.is-open .mmenu-item { opacity: 1; transform: none; }
    .mmenu.is-open .mmenu-item:nth-child(1) { transition-delay: .05s, .05s, 0s; }
    .mmenu.is-open .mmenu-item:nth-child(2) { transition-delay: .09s, .09s, 0s; }
    .mmenu.is-open .mmenu-item:nth-child(3) { transition-delay: .13s, .13s, 0s; }
    .mmenu.is-open .mmenu-item:nth-child(4) { transition-delay: .17s, .17s, 0s; }
    .mmenu.is-open .mmenu-item:nth-child(5) { transition-delay: .21s, .21s, 0s; }
    .mmenu.is-open .mmenu-item:nth-child(6) { transition-delay: .25s, .25s, 0s; }
    .mmenu-item:hover, .mmenu-item:focus-visible { background: rgba(37, 195, 253, .2); outline: none; }
    .mmenu-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(37, 195, 253, .16); color: #7ae7ff; }
    .mmenu-ico svg { width: 20px; height: 20px; }
    .mmenu-label { flex: 1; font-size: 17px; font-weight: 600; }
    .mmenu-chev { flex: none; width: 15px; height: 15px; color: #7ae7ff; }

    .mmenu-item.is-active {
        background: linear-gradient(90deg, #1aa7ff 0%, #0a7fe0 100%);
        border-color: #7ae7ff;
        box-shadow: 0 0 16px rgba(0, 190, 255, .55);
    }
    .mmenu-item.is-active .mmenu-ico { background: rgba(255, 255, 255, .22); color: #fff; }
    .mmenu-item.is-active .mmenu-chev { color: #fff; }

    /* alt: telefon + e-posta */
    .mmenu-foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 10px; }
    .mmenu-foot a {
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(255, 255, 255, .85);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }
    .mmenu-foot svg { flex: none; width: 18px; height: 18px; color: #7ae7ff; }
}

@media (prefers-reduced-motion: reduce) {
    .mmenu, .mmenu-item { transition: none; }
}