/* =====================================================================
   Mobil + tablet (≤1023px) alt sekme çubuğu ve alttan açılan "Menü" paneli
   (CodeSMS düzeninden uyarlandı). Müşteri paneli (body.tb-panel) ve herkese
   açık site (body.tb-site) paylaşır; renkler her düzenin kendi belirteçlerine
   bağlanır, bu yüzden panel koyu temada da (data-theme="dark") otomatik uyar.
   Masaüstünde hiçbir şey görünmez / değişmez. Panel tasarım kuralı gereği
   gradient ve cam (blur) efekti kullanılmaz; yalnız site "mint" gradientini
   ana düğmesinde zaten kullanır.
   Yapı: partials/tabbar-panel.blade.php, partials/tabbar-site.blade.php.
   Davranış: public/js/hb-tabbar.js.
   ===================================================================== */

/* --- Belirteç eşlemesi --- */
body.tb-panel {
    --tb-bg: var(--surface);
    --tb-bg2: var(--surface-2);
    --tb-bg3: var(--surface-3);
    --tb-page: var(--bg-main);
    --tb-text: var(--text-primary);
    --tb-muted: var(--text-secondary);
    --tb-line: var(--border-color);
    --tb-line2: var(--border-dark);
    --tb-accent: var(--primary);
    --tb-accent-soft: var(--primary-light);
    --tb-on-accent: #ffffff;
    --tb-fab: var(--primary);
    --tb-fab-fg: #ffffff;
    --tb-shadow: 0 10px 28px -6px rgba(20, 24, 40, 0.28), 0 2px 8px rgba(20, 24, 40, 0.1);
}
body.tb-site {
    --tb-bg: #0c1424;
    --tb-bg2: #121c32;
    --tb-bg3: #19253f;
    --tb-page: var(--zemin);
    --tb-text: var(--yazi);
    --tb-muted: var(--yazi-2);
    --tb-line: var(--cizgi-2);
    --tb-line2: rgba(255, 255, 255, 0.24);
    --tb-accent: var(--mint);
    --tb-accent-soft: rgba(0, 229, 160, 0.13);
    --tb-on-accent: #04121c;
    --tb-fab: var(--grad-2);
    --tb-fab-fg: #04121c;
    --tb-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Masaüstünde yok */
.tabbar,
.sheet,
.sheet-backdrop {
    display: none;
}

@media (max-width: 1023px) {
    :root {
        --tb-h: 64px;
        --tb-gap: 10px;
        --tb-space: calc(var(--tb-h) + var(--tb-gap) * 2 + env(safe-area-inset-bottom, 0px));
    }

    /* İçerik çubuğun altında kalmasın */
    body.has-tabbar {
        padding-bottom: var(--tb-space);
    }
    html,
    body.has-tabbar {
        overflow-x: hidden;
    }

    /* --- Alt çubuk (yüzen hap) --- */
    .tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        inset-inline: max(var(--tb-gap), env(safe-area-inset-left, 0px)) max(var(--tb-gap), env(safe-area-inset-right, 0px));
        bottom: calc(var(--tb-gap) + env(safe-area-inset-bottom, 0px));
        z-index: 110;
        max-width: 560px;
        height: var(--tb-h);
        margin: 0 auto;
        padding: 0 4px 8px;
        border: 1px solid var(--tb-line);
        border-radius: 22px;
        background: var(--tb-bg);
        box-shadow: var(--tb-shadow);
    }
    .tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: 0;
        background: none;
        color: var(--tb-muted);
        font: inherit;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s;
    }
    .tabbar__item:hover {
        color: var(--tb-text);
        text-decoration: none;
    }
    .tabbar__item:focus-visible {
        outline: 2px solid var(--tb-accent);
        outline-offset: -3px;
        border-radius: 18px;
    }
    .tabbar__icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 46px;
        height: 30px;
        border-radius: 15px;
        font-size: 1.05rem;
        transition: background 0.2s, transform 0.15s;
    }
    .tabbar__icon .ic {
        width: 21px;
        height: 21px;
    }
    .tabbar__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10.5px;
        font-weight: 650;
        line-height: 1.1;
    }
    .tabbar__item.is-active {
        color: var(--tb-accent);
    }
    .tabbar__item.is-active .tabbar__icon {
        background: var(--tb-accent-soft);
    }
    .tabbar__item:active .tabbar__icon,
    .tabbar__item:active .tabbar__fab {
        transform: scale(0.9);
    }
    .tabbar__sync {
        display: contents;
    }
    .tabbar__badge {
        position: absolute;
        top: -3px;
        inset-inline-end: 3px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--danger, #e5484d);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 17px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--tb-bg);
    }
    .tabbar__avatar {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--tb-accent);
        color: var(--tb-on-accent);
        font-size: 11px;
        font-weight: 750;
    }
    /* Ortadaki yükseltilmiş ana eylem */
    .tabbar__fab {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        margin-top: -28px;
        border-radius: 50%;
        background: var(--tb-fab);
        color: var(--tb-fab-fg);
        font-size: 1.25rem;
        box-shadow: 0 0 0 5px var(--tb-page), 0 10px 22px -4px color-mix(in srgb, var(--tb-accent) 55%, transparent);
        transition: transform 0.15s;
    }
    .tabbar__fab .ic {
        width: 24px;
        height: 24px;
    }
    .tabbar__item--fab.is-active {
        color: var(--tb-accent);
    }
    .tabbar__item--fab.is-active .tabbar__fab {
        box-shadow: 0 0 0 5px var(--tb-page), 0 0 0 7px var(--tb-accent-soft), 0 10px 22px -4px color-mix(in srgb, var(--tb-accent) 55%, transparent);
    }

    /* --- Alttan açılan panel --- */
    .sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: rgba(6, 8, 14, 0.58);
        opacity: 0;
        transition: opacity 0.28s;
    }
    .sheet-backdrop.is-open {
        opacity: 1;
    }
    .sheet-backdrop[hidden] {
        display: none;
    }
    .sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1260;
        max-width: 640px;
        max-height: 86vh;
        max-height: 86dvh;
        margin: 0 auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 1px solid var(--tb-line);
        border-bottom: 0;
        border-radius: 24px 24px 0 0;
        background: var(--tb-bg);
        color: var(--tb-text);
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.3);
        transform: translateY(100%);
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        text-align: start;
    }
    .sheet.is-open {
        transform: none;
    }
    .sheet:focus {
        outline: none;
    }
    .sheet.is-dragging {
        transition: none;
    }
    .sheet[hidden] {
        display: none;
    }
    .sheet__grip {
        display: grid;
        place-items: center;
        padding: 10px 0 2px;
        touch-action: none;
        cursor: grab;
    }
    .sheet__grip span {
        width: 42px;
        height: 5px;
        border-radius: 3px;
        background: var(--tb-line2);
    }
    .sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 20px 12px;
        touch-action: none;
    }
    .sheet__title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--tb-text);
    }
    .sheet__close {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--tb-bg2);
        color: var(--tb-muted);
        cursor: pointer;
    }
    .sheet__close .ic {
        width: 18px;
        height: 18px;
    }
    .sheet__close:focus-visible,
    .sheet a:focus-visible,
    .sheet button:focus-visible {
        outline: 2px solid var(--tb-accent);
        outline-offset: 2px;
    }
    .sheet__body {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 22px;
    }
    html.has-sheet,
    html.has-sheet body {
        overflow: hidden;
    }

    .sheet a {
        text-decoration: none;
    }
    .sheet-label {
        margin: 4px 4px 6px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--tb-muted);
        opacity: 0.85;
    }
    /* Arapça/Farsça: harf aralığı ve büyük harf dönüşümü yazıyı bozar */
    [dir="rtl"] .sheet-label {
        letter-spacing: 0;
        text-transform: none;
        font-size: 0.78rem;
    }
    .sheet-note {
        margin: -4px 4px 12px;
        font-size: 0.75rem;
        color: var(--tb-muted);
    }
    .sheet-user {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--tb-line);
        border-radius: 16px;
        background: var(--tb-bg2);
        color: var(--tb-text);
    }
    .sheet-user:hover {
        color: var(--tb-text);
    }
    .sheet-user__avatar {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--tb-accent);
        color: var(--tb-on-accent);
        font-weight: 750;
    }
    .sheet-user__text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }
    .sheet-user__text strong,
    .sheet-user__text small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sheet-user__text strong {
        color: var(--tb-text);
    }
    .sheet-user__text small {
        color: var(--tb-muted);
        font-size: 0.8rem;
    }

    .sheet-auth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }
    .sheet-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        padding: 0 14px;
        border: 1px solid var(--tb-line);
        border-radius: 14px;
        background: var(--tb-bg2);
        color: var(--tb-text);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
    }
    .sheet-btn:hover {
        color: var(--tb-text);
        border-color: var(--tb-line2);
    }
    .sheet-btn--primary {
        border-color: transparent;
        background: var(--tb-fab);
        color: var(--tb-fab-fg);
    }
    .sheet-btn--primary:hover {
        color: var(--tb-fab-fg);
        border-color: transparent;
        filter: brightness(1.05);
    }
    .sheet-btn .ic {
        width: 18px;
        height: 18px;
    }

    .sheet-list {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        padding: 4px;
        border: 1px solid var(--tb-line);
        border-radius: 16px;
        background: var(--tb-bg2);
    }
    .sheet-list a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 12px;
        border-radius: 12px;
        color: var(--tb-text);
        font-size: 0.92rem;
        font-weight: 600;
    }
    .sheet-list a + a::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: 44px;
        inset-inline-end: 12px;
        height: 1px;
        background: var(--tb-line);
    }
    .sheet-list a > i,
    .sheet-list a > .ic {
        flex: none;
        width: 20px;
        text-align: center;
        color: var(--tb-muted);
    }
    .sheet-list a > .ic {
        height: 20px;
    }
    .sheet-list a.is-active,
    .sheet-list a.is-active > i,
    .sheet-list a.is-active > .ic {
        color: var(--tb-accent);
    }
    .sheet-list a.is-active {
        background: var(--tb-accent-soft);
    }
    .sheet-list a:active {
        background: var(--tb-bg3);
    }

    .sheet-prefs {
        display: flex;
        gap: 10px;
        margin: 0 0 12px;
    }
    .sheet-pref {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 8.5rem;
        min-width: 0;
        min-height: 46px;
        padding: 0 14px;
        border: 1px solid var(--tb-line);
        border-radius: 14px;
        background: var(--tb-bg2);
        color: var(--tb-text);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 650;
        text-align: start;
        cursor: pointer;
    }
    .sheet-pref i,
    .sheet-pref > svg {
        color: var(--tb-accent);
        flex: 0 0 auto;
    }
    .sheet-pref > svg {
        width: 18px;
        height: 18px;
    }

    /* Dil açılır seçimi (CodeSMS düzeni): tema düğmesiyle aynı satırda; JS yoksa bağlantı ızgarası görünür. */
    .sheet-langsel {
        position: relative;
        cursor: pointer;
    }
    .sheet-langsel select {
        appearance: none;
        -webkit-appearance: none;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        min-height: 44px;
        padding: 0;
        padding-inline-end: 24px;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: 650;
        cursor: pointer;
        outline: none;
    }
    .sheet-langsel select option {
        background: var(--tb-bg);
        color: var(--tb-text);
    }
    .sheet-langsel:focus-within {
        border-color: var(--tb-accent);
    }
    .sheet-langsel__chev {
        position: absolute;
        inset-inline-end: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--tb-muted, currentColor);
        display: flex;
        font-size: 0.8rem;
    }
    .sheet-langsel__chev svg {
        width: 16px;
        height: 16px;
    }
    .sheet-langsel[hidden],
    [data-lang-links][hidden] {
        display: none !important;
    }
    .sheet-pref .t-moon,
    :root[data-theme="dark"] .sheet-pref .t-sun {
        display: none;
    }
    :root[data-theme="dark"] .sheet-pref .t-moon {
        display: inline;
    }

    .sheet-lang {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
        gap: 6px;
        margin-bottom: 12px;
    }
    .sheet-lang a {
        display: block;
        padding: 10px 12px;
        border: 1px solid var(--tb-line);
        border-radius: 12px;
        background: var(--tb-bg2);
        color: var(--tb-text);
        font-size: 0.84rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: start;
    }
    .sheet-lang a.on,
    .sheet-cur a.on {
        border-color: var(--tb-accent);
        background: var(--tb-accent);
        color: var(--tb-on-accent);
    }

    .sheet-cur {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px;
        padding: 6px 6px 6px 14px;
        padding-inline: 14px 6px;
        border: 1px solid var(--tb-line);
        border-radius: 14px;
        background: var(--tb-bg2);
    }
    .sheet-cur__t {
        flex: 1;
        font-size: 0.9rem;
        font-weight: 650;
    }
    .sheet-cur a {
        padding: 9px 14px;
        border: 1px solid var(--tb-line);
        border-radius: 10px;
        background: var(--tb-bg);
        color: var(--tb-text);
        font-size: 0.85rem;
        font-weight: 650;
    }
    .sheet-cur + .sheet-note {
        margin-top: -6px;
    }

    .sheet-support {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 12px;
    }
    .sheet-support__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1 1 8rem;
        min-width: 0;
        min-height: 46px;
        border-radius: 14px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
    }
    .sheet-support__btn:hover {
        color: #fff;
        filter: brightness(0.95);
    }
    .sheet-support__btn .ic {
        width: 18px;
        height: 18px;
    }
    .sheet-support__btn--wa {
        background: #1fa855;
    }
    .sheet-support__btn--tg {
        background: #1f8ec4;
    }
    .sheet-support__btn--ticket {
        background: var(--tb-accent);
        color: var(--tb-on-accent);
    }
    .sheet-support__btn--ticket:hover {
        color: var(--tb-on-accent);
    }
    .sheet-logout {
        margin: 0;
    }
    [dir="rtl"] .sheet-logout .ic,
    [dir="rtl"] .sheet-logout i {
        transform: scaleX(-1);
    }

    /* --- Müşteri paneli: kenar menü yerine alt çubuk --- */
    body.tb-panel .sidebar,
    body.tb-panel .sidebar-overlay,
    body.tb-panel .hamburger-btn {
        display: none !important;
    }
    body.tb-panel .main-content {
        margin-inline-start: 0 !important;
        width: 100%;
    }
    body.tb-panel .dashboard-wrapper {
        flex-direction: column;
    }
    /* Üst çubuk: başlık + arama kalır; dil, tema, sepet, avatar, çıkış panele taşındı */
    body.tb-panel .topbar-user > :not(.arama-ac-btn) {
        display: none !important;
    }
    body.tb-panel .topbar {
        height: auto;
        min-height: 60px;
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* Hamburger kalkınca "%60" üst sınırı başlığı kırpıyordu: başlık kalan genişliği kullanır */
    body.tb-panel .topbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.tb-panel .topbar-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Toast bildirimleri çubuğun üstünde dursun */
    body.tb-panel .swal2-container.swal2-bottom-end,
    body.tb-panel .swal2-container.swal2-bottom,
    body.tb-panel .swal2-container.swal2-bottom-start {
        padding-bottom: calc(var(--tb-space) + 4px);
    }

    /* --- Herkese açık site: üst menü yerine alt çubuk --- */
    body.tb-site .ust .nav,
    body.tb-site .ust .menu-tus,
    body.tb-site .ust .ust__sag .dil-sec,
    body.tb-site .ust .ust__sag .gizle-md {
        display: none !important;
    }
    body.tb-site .ust {
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* Yüzen iletişim düğmeleri çubuğun üstünde dursun */
    body.tb-site .yuzen--wa,
    body.tb-site .yuzen--tg.yuzen--tek {
        bottom: calc(var(--tb-space) + 6px);
    }
    body.tb-site .yuzen--tg {
        bottom: calc(var(--tb-space) + 66px);
    }
    body.tb-site .yuzen--tg.yuzen--tek {
        bottom: calc(var(--tb-space) + 6px);
    }
}

@media (max-width: 380px) {
    .tabbar__label {
        font-size: 9.5px;
    }
    .sheet-lang {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheet,
    .sheet-backdrop,
    .tabbar__item,
    .tabbar__icon,
    .tabbar__fab {
        transition: none;
    }
}

@media print {
    .tabbar,
    .sheet,
    .sheet-backdrop {
        display: none !important;
    }
}

/* Giriş / kayıt / şifre sayfaları: mobilde üstteki ayrı dil düğmesi gizlenir (dil alt menüde). */
@media (max-width: 1023px) {
    body.tb-auth .auth-dil {
        display: none !important;
    }
}