/* mobil-ortak.css — global + cok-panel ortak stiller */
/*
 * mobil-panel.css
 * Uye (musteri) paneli + isletme detay sayfasi icin profesyonel cila katmani.
 * mobil-cerceve.css'ten SONRA yuklenir; boylece form/baslik/kategori/urun
 * gorunumunu cascade'de net sekilde kontrol eder.
 *
 * Hedefler:
 *  - Inputlar ekrana TAM otursun (tasma yok, kutu modeli net).
 *  - Bolum basliklari (div basliklari) estetik ve tutarli olsun.
 *  - Isletme detayinda kategori menusu + urunler + sepete ekleme kusursuz otursun.
 *  - Bootstrap responsive kalitesi: her cocuk min-width:0 ile daralabilsin.
 */

/* ===================================================================== *
 * 0) "CERCEVE = MOBIL" GENEL KATMAN  (en onemli, kok-neden cozumu)
 * Cerceve aktifken (>=600px viewport) TUM sayfalar mobil tek-kolon davransin.
 * Bootstrap grid'i ve d-*-* yardimcilari GERCEK viewport'u baz aldigi icin
 * cerceveli masaustunde masaustu duzeni kalip tasiyordu. Burada hepsini mobile
 * zorluyoruz. (Gercek telefonda <600px bu blok devre disi; Bootstrap zaten
 * mobil-first oldugundan ek bir sey gerekmez.)
 * ===================================================================== */
@media (min-width: 600px) {
    /* Masaustu kirilim kolonlari (lg/md/xl) -> tam genislik, HER sayfada.
       col-6 / col-4 gibi MOBIL kolonlara dokunulmaz. */
    body [class*="col-lg-"],
    body [class*="col-md-"],
    body [class*="col-xl-"],
    body .col-lg,
    body .col-md,
    body .col-xl {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Masaustune-ozel (d-none d-md/lg/xl-*) ogeler mobilde gizli kalsin. */
    body .d-none.d-md-block, body .d-none.d-md-flex, body .d-none.d-md-inline, body .d-none.d-md-inline-block,
    body .d-none.d-lg-block, body .d-none.d-lg-flex, body .d-none.d-lg-inline, body .d-none.d-lg-inline-block,
    body .d-none.d-xl-block, body .d-none.d-xl-flex {
        display: none !important;
    }

    /* Yaygin ozel 2-kolon duzenler -> tek kolon (sepet/odeme, modul formu vb.). */
    body .sg-cart-layout,
    body .sg-admin-edit-form,
    body .sg-settings-group-grid {
        grid-template-columns: 1fr !important;
    }

    /* Genel tasma korumasi: hicbir kapsayici cerceveyi asmasin. */
    body .container,
    body .container-fluid,
    body .row,
    body .card,
    body .sg-panel,
    body table {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Genis tablolar yatay kaydirilabilir olsun, sayfayi tasirmasin. */
    body .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
}

/* ===================================================================== *
 * 1) TASMA / KUTU MODELI — "inputlar ekrana tam otursun" temeli
 * ===================================================================== */

.sg-account-layout,
.sg-account-main,
.sg-account-form,
.sg-settings-form,
.sg-form-grid,
.sg-panel,
.sg-settings-card,
.sg-settings-switches,
.input-group,
.sg-menu-list,
.sg-menu-item,
.sg-menu-item-body,
.sg-product-actions {
    min-width: 0;          /* grid/flex cocugunun icerige gore tasmasini onler */
    box-sizing: border-box;
}

/* Form alanlari her zaman kolon genisligini doldursun, asla tasmasin.
   ONEMLI: checkbox/radio HARIC — onlar toggle/secim ogesidir, gerilmemeli. */
.sg-account-form .form-control,
.sg-account-form .form-select,
.sg-settings-form .form-control,
.sg-settings-form .form-select,
.sg-account-form textarea,
.sg-account-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Ayar toggle anahtari — TAM yeniden tanim (capraz-tarayici + !important).
 * Sorun: bazi durumlarda anahtar acik/kapali ayirt edilemeyip beyaz gorunuyordu
 * (appearance reset eksik / renk uygulanmiyor). Burada KAPALI=gri, ACIK=marka
 * turuncusu olacak sekilde net tanimliyoruz; -webkit-appearance ekli.
 */
.sg-setting-switch input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;          /* KAPALI: gri */
    position: relative !important;
    cursor: pointer !important;
    transition: background .2s ease !important;
}

.sg-setting-switch input[type="checkbox"]::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18) !important;
    transition: transform .2s ease !important;
}

.sg-setting-switch input[type="checkbox"]:checked {
    background: var(--sg-primary, #fc8019) !important;   /* ACIK: marka turuncusu */
}

.sg-setting-switch input[type="checkbox"]:checked::before {
    transform: translateX(20px) !important;
}

/* ===================================================================== *
 * 2) FORM IZGARASI — telefon kolonunda tek sutun (en guvenli "tam oturma")
 * ===================================================================== */

.sg-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
    width: 100%;
}

/* Cok genis ekran (cerceve disi nadir durum) icin iki sutun. */
@media (min-width: 560px) {
    .sg-form-grid:not(.sg-security-fields-row) {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===================================================================== *
 * 3) ETIKETLI INPUT GRUPLARI — etiket inputu sikistirmasin
 * ===================================================================== */

.sg-profile-input-group {
    flex-wrap: nowrap;
    width: 100%;
}

.sg-profile-input-group .input-group-text {
    flex: 0 0 auto;
    min-width: 86px;
    justify-content: flex-start;
    white-space: nowrap;
    background: var(--sg-soft, #f4f7fb);
    border-color: var(--sg-border, #e7edf5);
    color: var(--sg-muted, #667085);
    font-size: .82rem;
    font-weight: 600;
}

.sg-profile-input-group .form-control,
.sg-profile-input-group .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===================================================================== *
 * 4) BOLUM BASLIKLARI — "div basliklari iyilessin, estetik olsun"
 * ===================================================================== */

.sg-profile-heading-row,
.sg-customer-heading-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .95rem;
}

.sg-profile-heading-title,
.sg-customer-heading-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sg-text, #172033);
    letter-spacing: -.01em;
}

.sg-title-back-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--sg-border, #e7edf5);
    background: #fff;
    color: var(--sg-text, #172033);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.sg-title-back-button:active {
    transform: scale(.94);
    background: var(--sg-soft, #f4f7fb);
}

/* Panel basligi: kutu gorunumu (kullanici tercihi) — ince teal cerceve,
   ust-acik gradient zemin, sol kenarda yumusak ic golge. */
.sg-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    margin-bottom: 14px;
    padding: 2px;
    border: 1px solid #99f6e4;
    border-radius: 4px;
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 100%);
    box-shadow: inset 4px 0 0 #e6fffd;
}

.sg-panel-title > span {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sg-primary, #fc8019);
    margin-bottom: .15rem;
}

.sg-panel-title h1,
.sg-panel-title h2 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--sg-text, #172033);
    line-height: 1.25;
}

/* ===================================================================== *
 * 5) KART / FORM AKSIYONLARI — tutarli bosluk, dokunmaya uygun butonlar
 * ===================================================================== */

.sg-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.sg-form-actions .btn {
    flex: 1 1 auto;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-weight: 600;
    border-radius: 12px;
}

/* Ayar kartlari ve switch satirlari */
.sg-settings-card {
    border-radius: 16px;
}

.sg-setting-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
}

.sg-setting-switch > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sg-setting-switch small {
    color: var(--sg-muted, #667085);
}

/* ===================================================================== *
 * 6) ISLETME DETAYI — kategori menusu (yatay kaydirilabilir cipler)
 * ===================================================================== */

.sg-menu-category-nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .7rem .9rem;
    margin: 0;
    scroll-snap-type: x proximity;
    background: #fff;
    border-bottom: 1px solid var(--sg-border, #e7edf5);
    position: sticky;
    top: 0;
    z-index: 6;
}

.sg-menu-category-nav::-webkit-scrollbar {
    display: none;
}

.sg-menu-category-nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: .44rem .9rem;
    border-radius: 999px;
    background: var(--sg-soft, #f4f7fb);
    border: 1px solid var(--sg-border, #e7edf5);
    color: var(--sg-text, #172033);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.sg-menu-category-nav a:active,
.sg-menu-category-nav a:focus {
    background: var(--sg-primary, #fc8019);
    border-color: var(--sg-primary, #fc8019);
    color: #fff;
}

/* ===================================================================== *
 * 7) ISLETME DETAYI — urun listesi + sepete ekleme (ekrana tam otursun)
 * ===================================================================== */

.sg-menu-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
    padding: .9rem;
}

.sg-menu-item {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    grid-template-areas: "image body actions";
    align-items: start;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--sg-border, #e7edf5);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.sg-menu-image-button {
    grid-area: image;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sg-soft, #f4f7fb);
}

.sg-menu-image-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sg-menu-item-body {
    grid-area: body;
    min-width: 0;
}

.sg-menu-item-body h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    color: var(--sg-text, #172033);
    /* uzun urun adlari tasmasin */
    overflow-wrap: anywhere;
}

.sg-menu-price strong {
    font-size: .98rem;
    font-weight: 700;
    color: var(--sg-text, #172033);
}

.sg-menu-price del {
    color: var(--sg-muted, #98a2b3);
    font-size: .8rem;
    margin-right: .25rem;
}

.sg-menu-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-top: .35rem;
    font-size: .74rem;
    color: var(--sg-muted, #667085);
}

/* Sepete ekleme blogu — sag tarafta, dokunmaya uygun */
.sg-product-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

.sg-product-actions .btn,
.sg-product-add-button {
    min-width: 42px;
    min-height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sg-product-qty {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    background: var(--sg-soft, #f4f7fb);
    border: 1px solid var(--sg-border, #e7edf5);
    border-radius: 12px;
    padding: .1rem;
}

.sg-product-qty button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--sg-text, #172033);
    border-radius: 9px;
}

.sg-product-qty input {
    width: 34px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 600;
    /* iOS zoom'u mobil-cerceve.css'te 16px ile zaten engellendi */
    -moz-appearance: textfield;
}

.sg-product-qty input::-webkit-outer-spin-button,
.sg-product-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===================================================================== *
 * 8) ISLETME DETAY HERO — teal tint + kose rengi temizligi, kontrast
 * ===================================================================== */

/*
 * Hero arka planindaki teal tint (#f0fdfa) kaldirildi -> notr beyaz zemin.
 * Boylece: (a) beyaz hero kartinin yuvarlak alt koselerinde renk sizmasi biter,
 * (b) hero ustundeki kirmizi/yesil rozet yazilari teal yerine beyaza biner (okunur).
 */
.sg-store-hero {
    background: #ffffff !important;
}

/*
 * TUTARLI HERO: Bazi isletmelerde bilgi ortada, bazilarinda ustte gorunuyordu.
 * Sebep: masaustu grid (190px gorsel + bilgi) + .sg-store-info'da dikey ortalama
 * -> kisa bilgili isletme ortalanir, uzun bilgili ustten baslar. Ustelik mobil
 * media query (<=575px) cerceveli masaustunde viewport genis oldugu icin
 * devreye girmez. Site mobil oldugu icin store hero'yu HER ZAMAN tek kolon +
 * ustten hizali yapiyoruz -> tum isletmelerde ayni gorunum.
 */
.sg-store-shell {
    grid-template-columns: 1fr !important;
}

.sg-store-info {
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
}

/* "Menu / Kategorilere gore urunler" basligi ve kategori cipleri ferah dursun. */
.sg-store-menu-panel .sg-panel-title {
    padding: 1rem 1rem .3rem;
}

.sg-store-menu-panel .sg-menu-category-nav {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ===================================================================== *
 * 9) FAVORI (KALP) BUTONU — ikon-toggle, primary buton DEGIL
 * Ortak submit/primary kurallari (app.css: teal+kirmizi ikon; benim kuralim:
 * turuncu+beyaz ikon) bu ACIK ZEMINLI butonda kalbi gorunmez yapiyordu.
 * Burada kendi stilini veriyoruz; "body:not(.sg-theme-koyu)" on eki app.css'in
 * global kuraliyla ESIT ozgulluk saglar, sonra yuklendigi icin kazanir.
 * ===================================================================== */
body:not(.sg-theme-koyu) .sg-fav-button {
    background: #ffffff !important;
    border: 1px solid var(--sg-border, #e7edf5) !important;
    color: #94a3b8 !important;            /* pasif kalp: yumusak gri (gorunur) */
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}

body:not(.sg-theme-koyu) .sg-fav-button i,
body:not(.sg-theme-koyu) .sg-fav-button .bi {
    color: inherit !important;            /* kalp, butonun rengini alir (beyaz DEGIL) */
}

body:not(.sg-theme-koyu) .sg-fav-button.is-active,
body:not(.sg-theme-koyu) .sg-fav-button:hover,
body:not(.sg-theme-koyu) .sg-fav-button:focus-visible {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #e11d48 !important;            /* aktif/hover: kirmizi kalp */
}

body:not(.sg-theme-koyu) .sg-fav-button.is-active i,
body:not(.sg-theme-koyu) .sg-fav-button:hover i {
    color: inherit !important;
}

/* =====================================================================
 * 10b) PANEL ALT MENUSU (footerbar) — cerceve icinde TAM mobil-app gorunum
 * app.css'teki footer yerlesimi (grid/5 kolon/padding/ikon/badge) yalnizca
 * @media (max-width:767.98px) icinde tanimli. Masaustu tarayicida 480px
 * cerceveyle bakildiginda GERCEK viewport genis oldugundan o medya sorgusu
 * HIC calismaz; footer sadece "display:grid" alip stilsiz/buzuk kalir.
 * Cozum: footer'in tum gorunumunu KOSULSUZ (body panel sinifina bagli)
 * yeniden tanimla -> hem gercek mobilde hem cerceveda ayni gorunum.
 * Kolonlar grid-auto-flow ile oge sayisina gore otomatik esit bolusur.
 * ===================================================================== */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav {
    position: fixed !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sg-border, #e5e7eb);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 22px rgba(15, 23, 42, .1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav a,
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav button {
    position: relative;
    min-width: 0;
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-rows: 20px auto;
    place-items: center;
    gap: 3px;
    margin: 0;
    padding: 5px 2px;
    border: 0;
    border-radius: 9px;
    color: #667085;
    background: transparent;
    font: inherit;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav form {
    margin: 0;
    min-width: 0;
    width: 100%;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav i {
    font-size: 1.02rem;
    line-height: 1;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aktif sekme: panelin kendi marka rengi (isletme=teal) — koyu zemine
   kirmizi/koyu yazi YOK; acik zemin + marka rengi yazi. */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav a.is-active {
    color: var(--sg-primary, #0f766e);
    background: color-mix(in srgb, var(--sg-primary, #0f766e) 12%, #fff);
    font-weight: 800;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav a.is-active i {
    color: var(--sg-primary, #0f766e);
}

/* Bildirim rozeti (bekleyen siparis / sepet) — marka renginde dolgu. */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav .sg-cart-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(16px);
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: var(--sg-primary, #0f766e);
    font-size: .56rem;
    font-weight: 800;
    line-height: 1;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-account-mobile-nav .sg-cart-badge[hidden] {
    display: none;
}

/* Kurye "Gorevler" bildirim rozeti: nav KOYU zemin (#111827) ve var(--sg-primary)
   temaya gore zeminle/aktif sekmeyle ayni tona dusup SAYI gorunmez oluyordu.
   Sabit CANLI KIRMIZI zemin + BEYAZ sayi + beyaz cerceve -> her temada net.
   (Beyaz yazi kirmizi zeminde -> kontrast kuralina uygun; bildirim sayaci standardi.) */
body.sg-courier-panel-bootstrap .sg-courier-mobile-nav .sg-cart-badge,
body.sg-courier-manager-panel-bootstrap .sg-courier-mobile-nav .sg-cart-badge,
body.sg-courier-panel-bootstrap .sg-account-mobile-nav [data-courier-task-badge] {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35) !important;
}

/* Govde: sabit footer altinda icerik gizlenmesin diye alt bosluk. */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap):has(.sg-account-mobile-nav) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* KRITIK: /mobil/isletme-panel ile gelince mobilpanel.css panel HEADER'ini
   (hamburger ☰ tam menu dahil) gizliyor. Panel govdelerinde header'i geri getir. */
body.sg-mobile-home-theme.sg-business-panel-bootstrap > .sg-header,
body.sg-mobile-home-theme.sg-courier-panel-bootstrap > .sg-header,
body.sg-mobile-home-theme.sg-courier-manager-panel-bootstrap > .sg-header,
body.sg-mobile-home-theme.sg-admin-panel-bootstrap > .sg-header {
    display: block !important;
}

/* =====================================================================
 * 10c) PANEL OZEL IZGARALARI — cerceve icinde "yarim sayfa" gorunumu bitir
 * Tum panellerde dashboard/finans/istatistik/kpi/liste izgaralari app.css'te
 * 2-5 kolon olarak tanimli ve yalnizca @media (max-width:575/767px) icinde
 * tek/cift kolona iniyor. Masaustu 480px cerceveda GERCEK viewport genis
 * oldugundan o medya sorgulari calismaz; izgaralar cok kolonlu kalip sayfayi
 * "yarim/sol yarida" gosterir. Burada cerceve katmaninda (>=600px) hepsini
 * mobil-app duzenine sabitliyoruz. (Gercek telefonda <600px app.css zaten dogru.)
 * ===================================================================== */
@media (min-width: 600px) {
    /* Ozet/istatistik/kpi kartlari: cerceveye otomatik esit bolusur,
       asla yarim bos kolon birakmaz (oge sayisina gore 2-3 kolon). */
    body:is(.sg-business-panel-bootstrap, .sg-admin-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap) :is(
        .sg-business-mini-stats,
        .sg-business-order-stats,
        .sg-business-finance-grid,
        .sg-admin-order-grid,
        .sg-courier-kpi-grid,
        .sg-courier-money-grid,
        .sg-courier-stat-grid
    ) {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    }

    /* Icerik/liste/ayar izgaralari: tek kolon, tam genislik (kart alt alta). */
    body:is(.sg-business-panel-bootstrap, .sg-admin-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap) :is(
        .sg-business-dashboard-grid,
        .sg-business-hours-grid,
        .sg-admin-module-grid,
        .sg-admin-action-grid,
        .sg-admin-feature-grid,
        .sg-courier-profile-grid,
        .sg-courier-settings-grid,
        .sg-courier-security-grid,
        .sg-courier-live-grid
    ) {
        grid-template-columns: 1fr !important;
    }

    /* Calisma saatleri "acilis / kapanis / durum" tek satira sigsin. */
    body.sg-business-panel-bootstrap .sg-business-hours-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* --- KURYE YONETICI: kurye linki + rapor + gorev meta cok-kolon -> dikey --- */
.sg-manager-courier-link {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
}
.sg-manager-report-list article {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
}
.sg-manager-task-meta {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    min-width: 0 !important;
}

/* --- KURYE: canli grid (2 kolon -> tek kolon) --- */
.sg-courier-live-grid {
    grid-template-columns: 1fr !important;
}

/* Cok dar ekranlarda (<360px) urun kartini dikey diz, taşmayı tamamen bitir */
@media (max-width: 360px) {
    .sg-menu-item {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "image body"
            "actions actions";
    }

    .sg-menu-image-button {
        width: 64px;
        height: 64px;
    }

    .sg-product-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

/* =====================================================================
 * 21) OPERASYON/PANEL GIRISI (isletme/kurye/kurye-yoneticisi) — UI-kit
 * KOK NEDEN: .sg-panel-login-shell 2-kolon (form + 300-380px gorsel) 480px
 * cerceveye sigmiyor -> sikisip yazilar MINIK goruluyordu. Tek kolona al,
 * pazarlama gorselini gizle, formu ferah/buyuk yazi + mobil-app UI-kit yap.
 * ===================================================================== */
body .sg-panel-login-shell {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    gap: 12px !important;
}

body .sg-panel-login-visual {
    display: none !important;
}

body .sg-panel-login-form-card {
    padding: 20px 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 44px -22px rgba(15, 23, 42, .4) !important;
    gap: 14px !important;
}

/* Baslik karti: notr (her panel rengiyle uyumlu) + buyuk yazi. */
body .sg-panel-login-head {
    padding: 14px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #eceff3 !important;
}

body .sg-panel-login-head .sg-auth-brand-mark span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 1.3rem !important;
}

body .sg-panel-login-head .sg-auth-brand-mark strong,
body .sg-panel-login-head .sg-login-role-badge {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

body .sg-panel-login-info p {
    font-size: .92rem !important;
    line-height: 1.45 !important;
    color: #475569 !important;
}

/* Inputlar buyuk + ferah. */
body .sg-panel-login-form .sg-auth-input > span {
    font-size: .82rem !important;
    font-weight: 800 !important;
    color: #374151 !important;
}

body .sg-panel-login-form .sg-auth-input .form-control {
    min-height: 52px !important;
    font-size: 1rem !important;
}

body .sg-panel-login-form .sg-auth-row {
    font-size: .86rem !important;
}

body .sg-panel-login-form .sg-auth-row a {
    font-weight: 700 !important;
}

/* Giris butonu: buyuk hap. */
body .sg-panel-login-submit {
    min-height: 54px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    gap: 8px !important;
}

/* Telefona ekle / basvuru satirlari da okunakli. */
body .sg-panel-login-install-actions .btn,
body .sg-work-menu button {
    min-height: 46px !important;
    font-size: .88rem !important;
    border-radius: 14px !important;
}

/* Konum kapisi (veya herhangi bir modal) ACIKKEN cerez/yukleme bildirimlerini
   GIZLE. Onceki "z-index:1270" bildirimi gate modalinin (1260) USTUNE koyup
   iPhone'da modal'i orterek tiklamayi engelliyordu (il secilemiyordu).
   Modal kapaninca bildirim normal sekilde gorunur. */
.sg-visitor-prompts {
    z-index: 1035 !important;
}

body.modal-open .sg-visitor-prompts {
    display: none !important;
}

/* =====================================================================
 * YONETIM PANELLERI: header/icerik TAM GENISLIK
 * Panel body'leri (/mobil/* oldugu icin) musteri temasi "sg-mobile-home-theme"
 * sinifini da aliyor; bu tema body'yi "display:flex; flex-direction:column;
 * align-items:center" yapip cocuklari ICERIGE daraltiyor (PC'de header 209px
 * gorunuyordu). Panel body'lerinde align-items:stretch'e zorlayinca header
 * dahil tum direkt cocuklar TAM GENISLIK olur (Bootstrap navbar full-width).
 * Sadece yonetim panellerini hedefler; musteri uygulamasina dokunmaz.
 * ===================================================================== */
body.sg-business-panel-bootstrap,
body.sg-courier-panel-bootstrap,
body.sg-courier-manager-panel-bootstrap,
body.sg-admin-panel-bootstrap {
    align-items: stretch !important;
}

/* Guvence: panel header'i ve ana icerik kesinlikle tam genislik. */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) > .sg-header,
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) > main {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}

/* =====================================================================
 * FOOTER: "Bizi Takip Edin" bloku artik "Yasal" sutununun SAGINDA.
 * Yasal + Sosyal/Girisler tek bir hucrede (.sg-footer-legal-social) yan
 * yana durur; grid 5 yerine 4 sutun (son sutun genis). Imza (.sg-footer-bottom)
 * zaten en altta, tum sutunlarin altinda. app.css'e dokunmadan ezilir;
 * app.css'in 1199.98 / 575.98 kirilimlari burada da taklit edilir.
 * ===================================================================== */
.sg-footer-grid {
    grid-template-columns: 1.35fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr);
}

.sg-footer-legal-social {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .sg-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .sg-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Sosyal + Giris ikonlari daha kucuk/zarif (kaba durmasin): 31px -> 26px */
.sg-footer-social,
.sg-footer-login-icons {
    gap: 6px;
    flex-wrap: wrap;
}

.sg-footer-social a,
.sg-footer-login-icons a {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.sg-footer-social a i,
.sg-footer-login-icons a i {
    font-size: .68rem;
}

/* =====================================================================
 * TUM PANELLER — KIRMIZIYI RENKLI/KOYU ZEMINDEN KALDIR
 * Kural: kirmizi yalniz BEYAZ zeminde guzel durur. Panel govdelerinde
 * (isletme/kurye/kurye-yonetici/admin) tehlike-sil-temizle butonlari
 * teal/koyu zemine kirmizi ikon/yazi olarak biniyordu. Hepsini BEYAZ
 * zemin + kirmizi ikon yapiyoruz (kirmizi artik beyaza oturur); uzerine
 * gelince dolu kirmizi + beyaz yazi. Boylece hicbir panelde renkli zemine
 * kirmizi binmez. app.css'e dokunmadan, en son yuklenen ortak dosyada.
 * ===================================================================== */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) :is(.btn-outline-danger, .btn-danger, .sg-icon-button-danger) {
    background: #ffffff !important;
    border-color: #f0c4c4 !important;
    color: #d92d20 !important;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) :is(.btn-outline-danger, .btn-danger, .sg-icon-button-danger) :is(i, span, svg) {
    color: #d92d20 !important;
    fill: currentColor !important;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) :is(.btn-outline-danger, .btn-danger, .sg-icon-button-danger):is(:hover, :focus-visible) {
    background: #d92d20 !important;
    border-color: #d92d20 !important;
    color: #ffffff !important;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) :is(.btn-outline-danger, .btn-danger, .sg-icon-button-danger):is(:hover, :focus-visible) :is(i, span, svg) {
    color: #ffffff !important;
}

/* =====================================================================
 * app.css:24451 global olarak TUM primary/submit butonlarinin ICINE
 * KIRMIZI (#f5070d) yazi/ikon basiyor. Musteri tarafinda mobil-cerceve.css
 * bunu beyaza ceviriyor AMA o dosya panellere yuklenmez -> panellerde Kaydet
 * vb. KIRMIZI kaliyordu. Panellerde de DAIMA BEYAZ yapiyoruz (primary buton
 * zaten renkli zeminli). Es ozgulluk + sonra yuklenme ile app.css'i ezer.
 * ===================================================================== */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) :is(.btn-primary, .sg-primary-button, .sg-action-primary, .sg-auth-submit, .sg-floating-cart, .sg-cart-badge, .sg-product-modal-open, .sg-icon-button-primary, button[type="submit"]) :is(i, span, strong, small) {
    color: #ffffff !important;
}

/* WhatsApp ikon butonu (kurye -> isletme iletisim). Taninir yesil. */
.sg-icon-button-whatsapp {
    border-color: #25d366 !important;
    color: #128c4b !important;
}
.sg-icon-button-whatsapp i { color: #128c4b !important; }
.sg-icon-button-whatsapp:hover,
.sg-icon-button-whatsapp:focus {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
}
.sg-icon-button-whatsapp:hover i,
.sg-icon-button-whatsapp:focus i { color: #ffffff !important; }

/* ===== Kapida Karekod ile odeme ===== */
/* Isletme paneli: QR yukleme alani */
.sg-karekod-upload { display: grid; gap: 8px; }
.sg-karekod-upload > span { font-weight: 700; font-size: .9rem; }
.sg-karekod-status { font-size: .82rem; min-height: 1.2em; }
.sg-karekod-status i { margin-right: 4px; }
.sg-karekod-secbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 9px 16px;
    border: 1px solid var(--sg-primary, #0f766e);
    border-radius: 10px;
    background: #fff;
    color: var(--sg-primary, #0f766e);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
}
.sg-karekod-secbtn:hover { background: var(--sg-primary, #0f766e); color: #fff; }
.sg-karekod-secbtn:hover i { color: #fff; }
.sg-karekod-sil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    justify-self: start;
    padding: 7px 14px;
    border: 1px solid #dc2626;
    border-radius: 10px;
    background: #fff;
    color: #dc2626;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
}
.sg-karekod-sil:hover { background: #dc2626; color: #fff; }
.sg-karekod-sil[hidden] { display: none; }
.sg-karekod-durum-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sg-karekod-durum-satir .sg-karekod-status { min-height: 0; }
.sg-karekod-progress {
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.sg-karekod-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #14b8a6, #0f766e);
    transition: width .25s ease;
}
.sg-karekod-onizleme { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.sg-karekod-preview {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
}
.sg-karekod-preview[hidden] { display: none; }

/* Kurye paneli: uretilen tutar-gomulu karekod karti */
.sg-karekod-pay-card {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
    text-align: center;
}
.sg-karekod-pay-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.sg-karekod-pay-head i { font-size: 1.6rem; color: #b45309; }
.sg-karekod-pay-head strong { display: block; font-size: .95rem; color: #78350f; }
.sg-karekod-pay-head span { font-size: .78rem; color: #92732a; }
.sg-karekod-canvas { display: flex; justify-content: center; }
.sg-karekod-canvas img { width: 220px; height: 220px; max-width: 72vw; image-rendering: pixelated; }
.sg-karekod-amount { font-size: 1.05rem; color: #78350f; }
.sg-karekod-amount strong { color: #b45309; font-size: 1.2rem; }

/* Havale/EFT kutusundaki karekod gorseli (musteri okutup/galeriden yukleyip
 * aliciyi otomatik doldurur). */
.sg-havale-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}
.sg-qr-render img {
    width: 190px;
    height: 190px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}
.sg-havale-qr-box { position: relative; display: inline-flex; align-self: center; }
.sg-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 0 0 3px #fff;
    object-fit: contain;
    pointer-events: none;
}
.sg-havale-qr-name { font-size: .9rem; font-weight: 800; color: #0f172a; }
/* Karekodun USTUNDE: bu QR hangi isletmenin -> isletme adi (enpara ornegi gibi). */
.sg-havale-qr-isletme {
    font-size: 1.04rem;
    font-weight: 800;
    color: #0f766e;
    text-align: center;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

/* Harita secici "Konumumu bul": TEK SATIR; baslik yaninda sigmazsa alta tam
 * genislik insin (sikisip 2 satira kayip yukselmesin, alttaki butona binmesin). */
.sg-map-picker-head { flex-wrap: wrap !important; }
.sg-map-picker-head [data-use-current-location] {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* Misafir (uyeliksiz) siparis iletisim alanlari */
.sg-misafir-fields { display: grid; gap: 10px; }
/* .sg-start-order-input app.css'te "22px ikon + input" grid'i; etiket o dar
 * sutuna sikisip kesiliyordu. Misafir alanlarinda etiketi USTE, input'u tam
 * genislikte ALTA al (alt satira kaydir). Ozgulluk 2 sinif > app.css'in 1 sinifi. */
.sg-misafir-fields .sg-start-order-input {
    display: block;
    grid-template-columns: none;
    min-height: 0;
    padding: 9px 11px;
}
.sg-misafir-fields .sg-start-order-input > span {
    display: block;
    margin: 0 0 4px;
    font-size: .74rem;
    font-weight: 600;
    color: #64748b;
    white-space: normal;
}
.sg-misafir-fields .sg-start-order-input input {
    width: 100%;
    font-size: .95rem;
}
.sg-misafir-otp-row { display: flex; gap: 8px; align-items: stretch; }
.sg-misafir-otp-row .form-control { flex: 1 1 auto; min-width: 0; }
.sg-misafir-otp-row .btn { white-space: nowrap; flex: 0 0 auto; }
.sg-misafir-otp-status { display: block; margin-top: 4px; font-size: .76rem; color: #64748b; }
.sg-havale-qr small { font-size: .72rem; color: #64748b; text-align: center; line-height: 1.4; }

/* Mobil anasayfa UST kategori satiri (Tantuni/Izgara/Doner...): gorseller +%10.
 * Yuksek ozgulluk (3 sinif) + :has'a bagimsiz -> app.css'in body:has kuralini
 * her tarayicida ezer; img'i de acikca doldurtur (sagda bosluk kalmasin). */
@media (max-width: 767.98px) {
    .sg-bs-home .sg-home-template-categories .sg-home-template-category {
        flex: 0 0 97px !important;
        min-width: 97px !important;
        align-items: center !important;
        text-align: center !important;
    }
    .sg-bs-home .sg-home-template-categories .sg-home-template-category-image {
        width: 97px !important;
        height: 85px !important;
        margin: 0 auto !important;
    }
    .sg-bs-home .sg-home-template-categories .sg-home-template-category-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .sg-bs-home .sg-home-template-categories .sg-home-template-category strong {
        font-size: .8rem !important;
        max-width: 97px !important;
        width: 97px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
}

/* =====================================================================
 * TUM PANEL FOOTER'I (isletme + kurye + kurye-yonetici + admin) — koyu,
 * imzali, tek tip. Footer'in TAMAMI #0f172a oldugu icin imza/copyright
 * seridi (.sg-footer-bottom) zemenle birebir ayni koyuda kalir.
 * Stil ortak dosyada cunku panel-isletme.css yalniz isletmeye yukleniyor.
 * ===================================================================== */
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section {
    margin-top: 10px;
    padding: 0 12px calc(var(--sg-mobile-footer-height, 70px) + 14px + env(safe-area-inset-bottom));
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer {
    margin: 0;
    padding: 16px 14px;
    border: 1px solid #1f2937;
    border-radius: 18px;
    background: #0f172a;
    color: #cbd5e1;
    box-shadow: 0 14px 34px -18px rgba(15, 23, 42, .5);
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-brand {
    grid-column: 1 / -1;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer :is(strong, b, .sg-footer-login-title),
body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-grid > div > span {
    color: #ffffff;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-grid > div > span {
    display: block;
    margin-bottom: 3px;
    font-size: .78rem;
    font-weight: 800;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer :is(p, a, small) {
    color: #cbd5e1;
    font-size: .72rem;
    line-height: 1.32;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer a:hover {
    color: #ffffff;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-grid > div {
    display: grid;
    gap: 4px;
    align-content: start;
    min-width: 0;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section :is(.sg-footer-social, .sg-footer-login-icons) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section :is(.sg-footer-apps a, .sg-footer-social a, .sg-footer-login-icons a) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    text-decoration: none;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section :is(.sg-footer-social a, .sg-footer-login-icons a) {
    width: 25px;
    height: 25px;
    justify-content: center;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-bottom {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #94a3b8;
    font-size: .68rem;
    text-align: center;
}

body:is(.sg-business-panel-bootstrap, .sg-courier-panel-bootstrap, .sg-courier-manager-panel-bootstrap, .sg-admin-panel-bootstrap) .sg-panel-footer-section .sg-footer-credit {
    border: 0;
    background: none;
    color: #ffffff;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* =====================================================================
 * iOS SAFARI harita TAP duzeltmesi.
 * iOS, 'cursor: pointer' OLMAYAN ogelerde tek-tap'te 'click' SENTEZLEMEZ.
 * Leaflet harita kabi varsayilan 'grab' cursor kullaniyor; bu yuzden harita
 * picker'da noktaya dokununca map.on('click') tetiklenmiyor ve isaretci
 * konmuyordu -> "Bu konumu kullan" calismiyor goruluyordu. Picker canvas'ina
 * pointer cursor verince iOS click'i tetikler. (Sadece secim haritasi; salt
 * goruntuleme .sg-map-view etkilenmez.) */
.sg-map-canvas.leaflet-container,
.sg-map-canvas .leaflet-grab,
.sg-map-canvas .leaflet-interactive,
.sg-map-canvas .leaflet-marker-icon {
    cursor: pointer !important;
}

/* =====================================================================
 * FOODHUB ADMIN LOGIN SKIN (yalnizca .sg-panel-login-admin)
 * Admin paneli FoodHub temasiyla uyumlu giris ekrani. panel-admin.css bu
 * sayfada yuklenmedigi icin stil burada (her sayfada yuklenen mobil-ortak).
 * ===================================================================== */
.sg-panel-login-admin {
    --fhl-primary: #EF3F09;
    --fhl-primary-hover: #d63608;
    --fhl-fg: #0C1C3C;
    --fhl-muted: #F7F7F7;
    --fhl-border: #E4E7E6;
    --fhl-peach: #FAAC7B;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
body:has(.sg-panel-login-admin) .sg-auth-topbar {
    background: #fff;
    border-bottom: 1px solid #EEF1F0;
}
body:has(.sg-panel-login-admin) .sg-auth-topbar .sg-logo {
    background: var(--fhl-primary, #EF3F09);
    color: #fff;
}
.sg-panel-login-admin .sg-panel-login-form-card {
    background: #fff !important;
    border: 1px solid #EEF1F0 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 50px -28px rgba(12, 28, 60, .4) !important;
}
.sg-panel-login-admin .sg-auth-brand-mark span {
    background: var(--fhl-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
}
.sg-panel-login-admin .sg-auth-brand-mark strong { color: var(--fhl-fg) !important; }
.sg-panel-login-admin .sg-login-role-badge {
    background: rgba(239, 63, 9, .1) !important;
    color: var(--fhl-primary) !important;
    border: 0 !important;
    font-weight: 700;
}
.sg-panel-login-admin .sg-auth-input {
    border: 1px solid var(--fhl-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
}
.sg-panel-login-admin .sg-auth-input:focus-within {
    border-color: var(--fhl-primary) !important;
    box-shadow: 0 0 0 3px rgba(239, 63, 9, .12) !important;
}
.sg-panel-login-admin .sg-auth-input > span { color: var(--fhl-fg) !important; font-weight: 600; }
.sg-panel-login-admin .sg-auth-input i { color: var(--fhl-primary) !important; }
.sg-panel-login-admin .sg-auth-row a { color: var(--fhl-primary) !important; }
.sg-panel-login-admin .sg-panel-login-submit,
.sg-panel-login-admin .btn-primary {
    background: var(--fhl-primary) !important;
    border-color: var(--fhl-primary) !important;
    color: #fff !important;
    border-radius: 14px !important;
    font-weight: 700;
}
.sg-panel-login-admin .sg-panel-login-submit:hover { background: var(--fhl-primary-hover) !important; box-shadow: 0 12px 26px -12px rgba(239, 63, 9, .6) !important; }
.sg-panel-login-admin .sg-panel-login-visual { border-radius: 22px !important; overflow: hidden; }
.sg-panel-login-admin .sg-panel-login-visual h2,
.sg-panel-login-admin .sg-panel-login-visual span,
.sg-panel-login-admin .sg-panel-login-visual li { color: #fff !important; }

/* =====================================================================
 * KVKK CEREZ ONAY BANDI (karsilama + musteri uygulamasi)
 * Alttan sabit, notr/temiz; her iki yuzeyde calisir, tasma yapmaz.
 * Gorunurlugu app.js initCerezBandi yonetir (onay yoksa acilir).
 * ===================================================================== */
.sg-cerez-bandi {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    background: #ffffff;
    border-top: 1px solid #e6ebf2;
    box-shadow: 0 -8px 30px -12px rgba(15, 23, 42, .25);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    animation: sgCerezYukari .25s ease-out;
}
.sg-cerez-bandi[hidden] { display: none !important; }
@keyframes sgCerezYukari {
    from { transform: translateY(100%); opacity: .4; }
    to { transform: translateY(0); opacity: 1; }
}
.sg-cerez-ic {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    gap: 9px;
}
.sg-cerez-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .98rem;
    color: #0f172a;
}
.sg-cerez-baslik i { color: #d97706; font-size: 1.1rem; }
.sg-cerez-aciklama {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #5b6573;
}
.sg-cerez-detay-ac {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.sg-cerez-detay-ac [data-cerez-detay-ok] { transition: transform .2s ease; font-size: .72rem; }
.sg-cerez-kategoriler {
    display: grid;
    gap: 7px;
    padding: 4px 0 2px;
}
.sg-cerez-kategoriler[hidden] { display: none !important; }
.sg-cerez-kategori {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid #eef2f7;
    border-radius: 11px;
    background: #f8fafc;
    cursor: pointer;
}
.sg-cerez-kategori.is-locked { opacity: .85; cursor: default; }
.sg-cerez-kategori span { display: grid; gap: 1px; min-width: 0; }
.sg-cerez-kategori strong { font-size: .82rem; color: #0f172a; }
.sg-cerez-kategori small { font-size: .72rem; color: #8a94a6; line-height: 1.35; }
.sg-cerez-kategori input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: #0f766e;
    cursor: pointer;
}
.sg-cerez-kategori.is-locked input[type="checkbox"] { cursor: default; }
.sg-cerez-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.sg-cerez-butonlar .btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 560px) {
    .sg-cerez-butonlar .btn { flex: 0 0 auto; }
    .sg-cerez-butonlar .sg-cerez-kabul { min-width: 150px; }
}

/* =====================================================================
 * KURYE YONETICISI giris ekrani -> KAHVE rengi (kurye paneliyle karismasin).
 * Clean login app.css'te sabit teal; bu blok yalnizca courier-manager
 * shell'ini kahveye cevirir (app.css'e dokunmadan). Kurye paneli teal kalir.
 * ===================================================================== */
.sg-panel-login-courier-manager .sg-login-clean-head {
    background: linear-gradient(135deg, #f3ece6, #ffffff) !important;
    border-color: rgba(111, 78, 55, .28) !important;
    border-left-color: #6F4E37 !important;
}
.sg-panel-login-courier-manager .sg-login-clean-head > span {
    background: #f3ece6 !important;
    border-color: #d8c4b4 !important;
    color: #5a3f2c !important;
}
.sg-panel-login-courier-manager .sg-login-clean-head .sg-auth-brand-mark span {
    background: #6F4E37 !important;
}
.sg-panel-login-courier-manager .sg-login-clean-head .sg-auth-brand-mark .sg-login-role-badge-inline {
    background: #6F4E37 !important;
    border-color: #6F4E37 !important;
}
.sg-panel-login-courier-manager .sg-login-clean-form .btn-primary {
    background: #6F4E37 !important;
    border-color: #6F4E37 !important;
}
.sg-panel-login-courier-manager .sg-login-clean-form .btn-primary:hover {
    background: #5a3f2c !important;
    border-color: #5a3f2c !important;
}

/* =====================================================================
 * ADMIN KAPI ekrani: tek alanli gecit -> kompakt, ortalanmis TEK kart.
 * (Genis ekranda 2-kolon clean-shell input/butonu dev gosteriyordu.)
 * ===================================================================== */
.sg-login-clean-shell.sg-admin-gate {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}
.sg-admin-gate .sg-login-side-card { display: none !important; }

/* =====================================================================
 * LOGIN INPUT "COK YUKSEK" FIX (PC):
 * .sg-login-clean-shell align-items:stretch, form kartini uzun yan karta
 * esitliyor; ic grid'ler bos dikey alani satirlara dagitinca az satirli
 * admin login'de input'lar geriliyordu. align-content:start -> satirlar
 * icerik boyutunda kalsin, fazla bosluk alta gitsin. (Dolu olan musteri
 * login'inde gorunur degisiklik yok; orada fazla bosluk zaten yok.)
 * ===================================================================== */
.sg-login-clean { align-content: start !important; }
.sg-login-clean-form { align-content: start !important; }
.sg-login-clean-form .sg-auth-input { align-self: start !important; }

/* SIFREMI-UNUTTUM: PC'de form 2-kolona aciliyordu (app.css:21495) -> e-posta
 * ile guvenlik kodu yan yana sikisip e-posta input'u eziliyordu. Tek kolon:
 * e-posta / guvenlik kodu / buton alt alta, hepsi tam genislik. */
.sg-forgot-form { grid-template-columns: minmax(0, 1fr) !important; }

/* =====================================================================
 * KURYE <-> YONETICI SOHBETI (her iki panelde ortak).
 * Cift yonlu, anlik (polling). Kabarcik: is-me sag/teal, is-them sol/gri.
 * ===================================================================== */
.sg-chat-modal {
    align-items: center;
    background: rgba(8, 23, 25, .55);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 16px;
    position: fixed;
    z-index: 1085;
}
.sg-chat-modal[hidden] { display: none; }
.sg-chat-dialog {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(8, 23, 25, .35);
    display: flex;
    flex-direction: column;
    max-height: min(78vh, 640px);
    max-width: 460px;
    overflow: hidden;
    width: 100%;
}
.sg-chat-head {
    align-items: center;
    border-bottom: 1px solid #e5eaeb;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 12px 14px;
}
.sg-chat-head strong { color: #092f35; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-chat-x {
    background: transparent;
    border: 0;
    color: #4f6f74;
    flex: none;
    font-size: 1.05rem;
    line-height: 1;
    padding: 4px;
}
.sg-chat-head-actions { align-items: center; display: flex; flex: none; gap: 2px; }
.sg-chat-clear {
    background: transparent;
    border: 0;
    color: #c0392b;
    font-size: .98rem;
    line-height: 1;
    padding: 4px;
}
.sg-chat-clear:hover { color: #e74c3c; }
.sg-chat-note { padding-top: 6px; }
.sg-chat-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 160px;
    overflow-y: auto;
    padding: 14px;
}
.sg-chat-empty { color: #7c9398; font-size: .85rem; margin: auto; text-align: center; }
.sg-chat-bubble {
    border-radius: 12px;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    max-width: 82%;
    padding: 7px 10px;
    word-break: break-word;
}
.sg-chat-bubble.is-me { align-self: flex-end; background: #0f766e; border-bottom-right-radius: 4px; color: #fff; }
.sg-chat-bubble.is-them { align-self: flex-start; background: #eef2f3; border-bottom-left-radius: 4px; color: #14302f; }
/* Metin rengini KESIN zorla (panel temasi span/div'leri soluk renge boyuyordu -> okunmuyordu). */
.sg-chat-bubble.is-me .sg-chat-text { color: #ffffff !important; }
.sg-chat-bubble.is-them .sg-chat-text { color: #14302f !important; }
.sg-chat-text { font-size: .88rem; line-height: 1.35; }
.sg-chat-form textarea {
    background: #ffffff !important;
    color: #14302f !important;
    -webkit-text-fill-color: #14302f !important;
}
.sg-chat-form textarea::placeholder {
    color: #7b9499 !important;
    -webkit-text-fill-color: #7b9499 !important;
    opacity: 1 !important;
}
.sg-chat-meta {
    align-items: center;
    display: flex;
    font-size: .62rem;
    gap: 3px;
    justify-content: flex-end;
    line-height: 1;
}
.sg-chat-meta time { opacity: .7; }
.sg-chat-tick { font-size: .76rem; opacity: .8; }
.sg-chat-tick.is-read { color: #6fe3ff; opacity: 1; } /* okundu -> mavi cift tik */
.sg-chat-form {
    align-items: end;
    border-top: 1px solid #e5eaeb;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
}
.sg-chat-form textarea {
    border-radius: 10px !important;
    flex: 1 1 auto;
    max-height: 110px;
    min-height: 42px;
    resize: none;
}
.sg-chat-form .btn { border-radius: 10px; flex: none; min-height: 42px; padding-left: 14px; padding-right: 14px; }

/* Kurye header: yonetici sohbet butonu + okunmamis badge */
.sg-courier-chat-btn { position: relative; }
.sg-courier-chat-badge {
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    min-width: 16px;
    padding: 2px 5px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -6px;
}
.sg-courier-chat-badge[hidden] { display: none; }
body.sg-courier-msg-open { overflow: hidden; }

/* Kose modu: toast ust-ORTA yerine ust SAG kosede (yeni mesaj bildirimi gibi). */
.sg-flash-toast.sg-flash-toast-corner {
    left: auto !important;
    right: 16px !important;
}

/* Toast kapat (X) butonu (appToast opts.dismissible) -> SAG UST KOSE.
 * NOT: toast zaten position:fixed -> absolute cocuk icin baglam o; relative EKLEME
 * (fixed'i ezip toast'i sayfa akisina dusururdu). */
.sg-flash-toast:has(.sg-flash-toast-close) { padding-right: 28px; }
.sg-flash-toast-close {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: .78rem;
    line-height: 1;
    opacity: .6;
    padding: 3px 5px;
    position: absolute;
    right: 5px;
    top: 5px;
}
.sg-flash-toast-close:hover { opacity: 1; }

/* =====================================================================
 * BUTON YAZI RENGI DUZELTME (dev app.css regresyonu):
 * app.css koyu/dolu butonlarin ic yazisini #f5070d KIRMIZI yapiyor
 * (koyu teal/turuncu zeminde okunaksiz, cirkin). Marka kurali: DOLU butonda
 * yazi BEYAZ. app.css'e dokunmadan, sonra yuklenen mobil-ortak'tan geri aliyoruz.
 * (Light/warning/outline butonlar haric -> onlarda koyu yazi gerekir.)
 * ===================================================================== */
body:not(.sg-theme-koyu) :is(.btn-primary, .sg-primary-button, .sg-action-primary, .sg-auth-submit, .sg-product-modal-open, .sg-icon-button-primary):not(.btn-light):not(.btn-warning):not(.btn-outline-primary):not(.btn-outline-secondary) :is(i, span, strong, small, b) {
    color: #ffffff !important;
}

/* Sepet AJAX: islem suren butonda yukleme gostergesi (cift-dokunma korumasi). */
[data-cart-form] button.is-loading { opacity: .55 !important; cursor: progress !important; }
.sg-checkout-btn.is-loading { opacity: .6 !important; cursor: progress !important; }