/*
 * mobil-cerceve.css
 * Tek kaynak "telefon cercevesi". Tum sayfalari masaustunde sabit mobil
 * genislikte, ortalanmis ve cihaz gorunumlu bir kolonda gosterir.
 *
 * Bu dosya KASITLI olarak en son yuklenir; boylece app.css ve panel
 * dosyalarindaki dagilmis kurallari cascade'de yener. Tum cerceve mantigi
 * tek yerde durur -> sayfadan sayfaya gorsel tutarsizlik biter.
 *
 * Telefon (kucuk ekran) gorunumu HIC degismez: cerceve sadece genis
 * ekranlarda (min-width: 600px) devreye girer.
 */

:root {
    --sg-shell-max: 480px;       /* telefon kolonu genisligi */
    --sg-shell-backdrop: #e6e8ee; /* cerceve disi masaustu zemini */
}

/* =========================================================================
 * MUSTERI/MOBIL MARKA RENGI — tek kaynak
 * app.css :root icinde --sg-primary GLOBAL olarak #0f766e (isletme yesili)
 * tanimli ve musteri arayuzune siziyor. Musteri tarafi marka TURUNCUSUNU
 * (#fc8019) kullanmali. Asagidaki tek deger ile her yeri degistirebilirsin.
 * (Isletme/kurye/admin panelleri kendi renklerinde kalir — onlara dokunulmaz.)
 * ====================================================================== */
body.sg-mobile-home-theme,
body.sg-mobile-app-bootstrap,
body.sg-customer-bootstrap {
    --sg-primary: #fc8019;            /* << MUSTERI marka rengi: burayi degistir */
    --sg-primary-koyu: #e06f10;
    --sg-login-accent: #fc8019;
    --sg-login-accent-soft: #fff7ed;
    --sg-on-primary: #ffffff;         /* vurgu zemininde DAIMA bu yazi rengi */
}

/* -------------------------------------------------------------------------
 * KONTRAST KURALI + KIRMIZI IKON DUZELTMESI
 * app.css icinde global bir kural (body:not(.sg-theme-koyu) ...) TUM primary/
 * submit butonlarina TEAL zemin + KIRMIZI (#f5070d) ikon/yazi !important ile
 * daytiyor. app.css'in turuncu duzeltmesi yalnizca sg-theme-acik (mobil OLMAYAN)
 * sayfalari kapsiyor; /mobil/* sayfalari sg-mobile-home-theme aldigi icin bu
 * cirkin kurala dusuyor. Burada musteri/mobil taraf icin marka turuncusu +
 * BEYAZ yazi/ikon ile kesin eziyoruz (!important + es ozgulluk + sonra yuklenme).
 * ---------------------------------------------------------------------- */
body.sg-mobile-home-theme :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"]),
body.sg-mobile-app-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"]),
body.sg-customer-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"]) {
    border-color: var(--sg-primary, #fc8019) !important;
    background: var(--sg-primary, #fc8019) !important;
    color: #fff !important;
}

/* Buton ici ikon + yazi: KIRMIZI (#f5070d) yerine DAIMA beyaz. */
body.sg-mobile-home-theme :is(.btn-primary, .sg-primary-button, .sg-action-primary, .sg-auth-submit, .sg-floating-cart, .sg-product-modal-open, .sg-icon-button-primary, button[type="submit"]) :is(i, span, strong, small),
body.sg-mobile-app-bootstrap :is(.btn-primary, .sg-primary-button, .sg-action-primary, .sg-auth-submit, .sg-floating-cart, .sg-product-modal-open, .sg-icon-button-primary, button[type="submit"]) :is(i, span, strong, small),
body.sg-customer-bootstrap :is(.btn-primary, .sg-primary-button, .sg-action-primary, .sg-auth-submit, .sg-floating-cart, .sg-product-modal-open, .sg-icon-button-primary, button[type="submit"]) :is(i, span, strong, small) {
    color: #fff !important;
}

/* Outline/ikincil butonlar yanlislikla teal zemine dusmesin (okunur kalsin). */
body.sg-mobile-home-theme .btn-outline-secondary :is(i, span),
body.sg-mobile-app-bootstrap .btn-outline-secondary :is(i, span),
body.sg-customer-bootstrap .btn-outline-secondary :is(i, span) {
    color: inherit !important;
}

/* =========================================================================
 * iOS + Android cihaz saglamlastirmasi (her ekran boyutunda gecerli)
 * "Tema/JS sorunu yok" hedefi icin kritik tarayici tuhafliklarini kapatir.
 * ====================================================================== */

html {
    /* iOS Safari'nin yatayda metni buyutmesini engelle. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* Yatay tasmadan kaynakli istenmeyen kaydirma cubugunu engelle. */
    overflow-x: hidden;
    /* NOT: "overscroll-behavior-y: contain" KULLANMA! body bir scroll-container
       oldugunda (480px kolon), bu kural tekerlegin html'e (asil kaydiriciya)
       zincirlenmesini engelliyor -> kolon ustunde fare tekeri sayfayi kaydirmiyor,
       sadece kenar bosluklarinda (html) kayiyordu. */
}

/* Dokununca beliren gri/mavi flash'i kaldir (profesyonel his). */
a, button, input, select, textarea, label, [role="button"], .nav-link {
    -webkit-tap-highlight-color: transparent;
}

/*
 * iOS Safari, font-size 16px'in ALTINDA olan bir alana odaklaninca sayfayi
 * otomatik yakinlastirir (klasik "iPhone'da tema bozuldu" sebebi).
 * Form alanlarini en az 16px yaparak bunu kesin olarak engelliyoruz.
 */
input,
select,
textarea,
.form-control,
.form-select {
    font-size: max(16px, 1rem);
}

/* Dokunmatik kaydirma akiciligini ac (eski iOS WebKit). */
.sg-page,
.sg-modal-body,
[data-scrollable] {
    -webkit-overflow-scrolling: touch;
}

/*
 * Sabit alt menuler + yuzen sepet, iPhone home-indicator (safe-area) ustunde
 * kalsin. viewport-fit=cover ile birlikte calisir.
 */
.sg-account-mobile-nav,
.sg-customer-footerbar,
.sg-business-mobile-nav,
.sg-courier-mobile-nav,
.sg-mobile-app-footerbar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}

.sg-floating-cart {
    margin-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 600px) {
    html {
        background: var(--sg-shell-backdrop);
    }

    /* Govdeyi ortalanmis tek bir mobil kolona sabitle. */
    body {
        max-width: var(--sg-shell-max) !important;
        margin-inline: auto !important;
        min-height: 100vh;      /* eski iOS Safari fallback */
        min-height: 100dvh;     /* modern: tarayici cubuklarini hesaba katar */
        background: var(--sg-page-bg, #f7f9fc);
        box-shadow: 0 0 0 1px rgba(15, 23, 42, .06),
                    0 28px 70px -24px rgba(15, 23, 42, .45);
        position: relative;
        overflow-x: clip;
    }

    /*
     * Sabit (position: fixed) ogeler viewport'a gore konumlanir; bu yuzden
     * onlari da kolon genisligine hizalamak gerekir. transform KULLANMIYORUZ
     * (mevcut goster/gizle animasyonlariyla cakismasin diye); bunun yerine
     * sol/sag bosluklari kolona gore hesapliyoruz.
     */
    .sg-account-mobile-nav,
    .sg-customer-footerbar,
    .sg-business-mobile-nav,
    .sg-courier-mobile-nav,
    .sg-mobile-app-footerbar {
        left: calc((100% - var(--sg-shell-max)) / 2) !important;
        right: calc((100% - var(--sg-shell-max)) / 2) !important;
        width: auto !important;
    }

    /* Yuzen sepet butonu: kolonun sag kenarina yaslansin. */
    .sg-floating-cart {
        left: auto !important;
        right: calc((100% - var(--sg-shell-max)) / 2 + 18px) !important;
    }

    /* Flash bildirimi GERCEKTEN ortali olsun. JS (appToast) "translateX(-50%)"
       ekliyor; bu yuzden left+right ile kolona yaslamak yerine left:50% verip
       ortaliyoruz (aksi halde toast sola kayip okunmuyordu). */
    .sg-flash-toast {
        left: 50% !important;
        right: auto !important;
    }

    /* Tam ekran modal/overlay backdrop'lari da kolonla sinirli kalsin. */
    .sg-modal {
        left: calc((100% - var(--sg-shell-max)) / 2) !important;
        right: calc((100% - var(--sg-shell-max)) / 2) !important;
    }
}