/* ═══ Telefon alt çubuğu (14 Kas 2026) ═══
   Eski çubuk yarı saydamdı, içerik arkasından görünüyordu; "bize yakışmıyor".
   Yeni: kenarlardan ayrık, düz zeminli, yuvarlak köşeli tek parça "dok". Seçili sekme hap içinde,
   ortadaki + çubuğun üstüne hafifçe çıkan yuvarlak düğme. Derlenmiş app.css yazılamadığı için ayrı dosya. */
@media (max-width: 1023px) {
    .uyg { --dok-zemin: #171a23; --dok-cizgi: rgba(255,255,255,.08); --dok-yazi: #9aa0ad; --dok-secili: #ffffff; --dok-hap: rgba(124,92,255,.22); --dok-hap-yazi: #d5ccff; --dok-golge: 0 12px 32px -8px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35); }
    html[data-tema=acik] .uyg { --dok-zemin: #ffffff; --dok-cizgi: rgba(15,23,42,.08); --dok-yazi: #6b7280; --dok-secili: #111827; --dok-hap: #ede9fe; --dok-hap-yazi: #5227d1; --dok-golge: 0 12px 30px -10px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.08); }

    /* Dış kap (nav) saydam: altındaki geçiş katmanı için; görünen dok içteki div */
    .uyg nav.alt-sekme { left: .625rem; right: .625rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); padding: 0; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .uyg nav.alt-sekme > div { align-items: flex-end; min-height: 3.875rem; padding: 0 .25rem; border: 1px solid var(--dok-cizgi); border-radius: 1.375rem; background: var(--dok-zemin); box-shadow: var(--dok-golge); }
    .uyg nav.alt-sekme .tabbar-item { gap: .1875rem; padding: .4375rem 0 .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .005em; color: var(--dok-yazi); }
    .uyg nav.alt-sekme .tabbar-item .sekme-ikon { width: 3.25rem; height: 1.875rem; transition: background-color .25s, color .2s, transform .25s cubic-bezier(.16,1,.3,1); }
    .uyg nav.alt-sekme .tabbar-item.is-active { color: var(--dok-secili); }
    .uyg nav.alt-sekme .tabbar-item.is-active .sekme-ikon { background: var(--dok-hap); color: var(--dok-hap-yazi); }
    .uyg nav.alt-sekme .tabbar-item.is-active .sekme-ikon svg { stroke-width: 2.3; }

    /* Ortadaki +: çubuktan yukarı taşan yuvarlak, çevresinde çubuk renginde halka */
    .uyg nav.alt-sekme .fab-sekme { color: var(--dok-secili); }
    .uyg nav.alt-sekme .tabbar-item .fab-hap { width: 3.25rem; height: 3.25rem; margin-top: -1.5rem; border-radius: 9999px;
        background: linear-gradient(145deg, #8b6cff 0%, #6a45f5 55%, #4f2fd8 100%); color: #fff;
        box-shadow: 0 0 0 .3125rem var(--dok-zemin), 0 10px 22px -6px rgba(92,60,240,.75), inset 0 1px 0 rgba(255,255,255,.35); }
    .uyg nav.alt-sekme .tabbar-item .fab-hap svg { width: 1.5rem; height: 1.5rem; }
    .uyg nav.alt-sekme .tabbar-item.fab-sekme:active .fab-hap { transform: scale(.94); }

    /* Dokun altındaki boşlukta içerik görünmesin: sayfa zemini rengiyle yumuşak geçiş */
    .uyg nav.alt-sekme::before { content: ""; position: absolute; z-index: -1; left: -.75rem; right: -.75rem; top: -1rem; bottom: calc(-.5rem - env(safe-area-inset-bottom) - 1px);
        background: linear-gradient(to bottom, rgba(8,9,12,0), rgb(8 9 12) 45%); pointer-events: none; }
    html[data-tema=acik] .uyg nav.alt-sekme::before { background: linear-gradient(to bottom, rgba(243,244,247,0), #f3f4f7 45%); }

    /* Rozetlerin halkası çubuğun zeminiyle aynı */
    .uyg nav.alt-sekme .ring-2 { --tw-ring-color: var(--dok-zemin); }
}

/* Telefon üst çubuğu (14 Kas 2026): dar ekranda paket yalnız simge, en darda gece/gündüz gizli */
.ust-tema { display: contents; }
@media (max-width: 399px) { .ust-plan-yazi { display: none; } }
@media (max-width: 359px) { .ust-tema { display: none; } }

/* Site başlığında mobil uygulama hapı (14 Kas 2026): yalnız geniş ekranda; telefonda menünün en üstünde kart */
.uyg-hap { display: none; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .75rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600; color: #e9e4ff; background: rgba(124,92,255,.14); border: 1px solid rgba(124,92,255,.4); white-space: nowrap; transition: background .15s; }
.uyg-hap:hover { background: rgba(124,92,255,.24); }
html[data-tema=acik] .uyg-hap { color: #4a2bd6; background: #f1edff; border-color: #d6ccff; }
@media (min-width: 1280px) { .uyg-hap { display: inline-flex; } }