/* ===========================================================
   MOBİL / PWA katmanı
   Lacivert (var(--fp-vurgu)) + amber (var(--fp-uyari)). Masaüstünü bozmaz;
   asıl etkiler @media (max-width: 960px) altında.
   =========================================================== */

:root {
    /* --fp-navy / --fp-amber app.css'te tanımlı (tema token blokları) — burada TEKRARLAMA,
       yoksa koyu tema değeri sessizce ezilir. Yalnız bu dosyaya özgü olanlar kalır. */
    --fp-navy-d: var(--fp-vurgu-koyu);
    --fp-amber-l: var(--fp-uyari);
    --fp-bottomnav-h: 62px;
}

/* Yumuşak sayfa geçişi (her içerik render'ında hafif fade+rise) */
.mud-main-content > .mud-container,
.mud-main-content .page-fade {
    animation: fpFade .28s ease both;
}
@keyframes fpFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* AppBar'a cam + ince amber alt-çizgi parıltısı */
.mud-appbar {
    backdrop-filter: saturate(140%) blur(2px);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(251,140,0,.85), transparent) 1;
}

/* Birincil/ikincil butonlara basınca "parıltı" geçişi */
.mud-button-filled { position: relative; overflow: hidden; }
.mud-button-filled::after {
    content: ""; position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left .55s ease;
}
.mud-button-filled:hover::after { left: 140%; }

/* Kartlara dokun/hover'da hafif yükselme (çelik jant parıltısı hissi) */
.b2b-hover, .cat-tile, .mud-card {
    transition: transform .18s ease, box-shadow .18s ease;
}
.b2b-hover:active, .cat-tile:active, .mud-card:active {
    transform: scale(.985);
}

/* ====================== GLOBAL MOBİL DÜZEN (taşma yok, sığsın) ====================== */
@media (max-width: 960px) {
    /* 🩸 `overflow-x: hidden` YAPIŞIK ÇUBUĞU ÖLDÜRÜR. CSS kuralı: bir eksen `hidden` olunca
       diğer eksen `visible` kalamaz, `auto`ya döner — yani bu öğeler KAYDIRMA KABI olur.
       Ölçüldü 07.08 (390×844): body ve .mud-main-content ikisi de `hidden auto` çıktı, iç içe
       iki kaydırıcı oluştu ve `position: sticky` hiç tutmadı (kutu 1.400 px kaydırınca -1.140).
       `clip` aynı taşmayı keser ama kaydırma kabı YARATMAZ. `hidden` eski tarayıcı için altta kalır. */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    html, body { overflow-x: clip !important; }
    .mud-main-content, .mud-container { max-width: 100vw !important; overflow-x: hidden; overflow-x: clip; }
    /* her şey ekrana sığsın */
    img, table, .mud-card, .mud-paper { max-width: 100%; }

    /* Katalog filtre barı: arama + "Filtrele" görünür; gerisi panel arkasında */
    .cat-filter-extra { display: none; }
    .cat-filter-extra.open { display: block; }
    .cat-filterbar .mud-stack { flex-wrap: wrap !important; gap: 8px !important; align-items: stretch !important; }
    .cat-filter-extra .mud-input-control,
    .cat-filter-extra .mud-select,
    .cat-filter-extra .mud-autocomplete { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; }
    .cat-filterbar .mud-button-group { width: auto; flex: 0 0 auto; }

    /* ══ ARAMA KUTUSU MOBİLDE (sahadan bildirim, 07.08: "mobilde arama barı çok küçük kalıyor") ══
       ÖLÇÜLDÜ (390x844, iPhone genişliği): kutu 43 px = ekranın %11'i. Sebep: kategori
       düğmesi + "Filtrele" düğmesi aynı satırda yarışıyor, kutuya yer kalmıyor.
       Bayilerin çoğu TELEFONDAN girecek ve arama bu ürünün ana işi — küçük kutu,
       kullanılamaz ürün demek. */
    /* ⚠️ MudStack `.mud-stack` sınıfı ÜRETMİYOR — `.d-flex.flex-row` üretiyor. Eski
       `.cat-filterbar .mud-stack { flex-wrap: wrap }` kuralı bu yüzden hiç çalışmamış
       (kural dosyada yazılı, kutu yine 43 px'ti). Kendi sınıfımızla hedefliyoruz. */
    .cat-search-row { flex-wrap: wrap !important; }
    .cat-search-big {
        flex: 1 1 100% !important;      /* kendi satırına geçsin */
        width: 100% !important;
        min-width: 0 !important;
        order: -1;                      /* düğmelerin ÜSTÜNDE: parmak önce aramaya gitsin */
    }
    /* Dokunma hedefi >= 44 px (Apple/Google ölçütü) ve yazı 16 px:
       ⚠️ 16px ALTINDA iOS Safari sayfayı KENDİLİĞİNDEN yakınlaştırır ve kullanıcı
       yazarken düzen kayar — bu, "küçük kutu"nun ikinci ve daha sinsi hâlidir. */
    .cat-search-big .mud-input-slot input { min-height: 44px; font-size: 16px !important; }
    .cat-search-big .mud-input-control { min-height: 48px; }

    /* 🩸 YAZI ALANI ekranın %90'ından geniş olmalı — ÖLÇÜLEN ŞEY ham <input>'tur.
       390 px'de zincir şöyleydi: kap dolgusu 12+12 → 366 · alan 364 · içeride arama simgesi
       46 px + sağ dolgu 14 → <input> 318 px = %82. Yani "alan geniş" derken kullanıcının
       YAZDIĞI yer dardı ve yer tutucu ortadan kesiliyordu.
       Mobilde simge KALDIRILIR (zaten "Parça no…" yazısı ne olduğunu söylüyor) ve kabın
       dolgusu incelir: 390 - 12 (dolgu) - 14 (sağ) ≈ 364 px = %93. */
    .cat-filterbar { padding: 6px !important; }
    .cat-search-big .mud-input-adornment-start { display: none !important; }
    .cat-search-big .mud-input-slot input { padding-left: 8px !important; }

    /* Arama çubuğu YAPIŞIK: listeyi kaydırırken kutu ekranda kalır. Aksi hâlde bayi
       her yeni aramada başa dönmek zorunda kalıyor (ölçüldü: kaydırınca kutu y=-1129).
       🩸 28.08 (sahada 390×844'te yakalandı, ölçüldü): TÜM filterbar sticky olunca sabit blok
       502 px = ekranın %66'sı; sonuçlara %34 kalıyordu. Artık KADEMELİ sticky: yalnız çekirdek
       yapışır (arama satırı + sonuç sayısı + nesil çip şeridi ≈ 130-160 px), gerisi (bilgi
       banner'ları, boşluk-sil, temizle) normal akışta yukarı kayar. DOM'a dokunulmadı —
       masaüstü düzeni birebir; üç kardeş öğe kademeli top ile üst üste yapışıyor. */
    .cat-filterbar { position: static; }
    /* 🩸 29.08 (b) kararı + ölçüm dersi: kademeli sticky SAHADA HİÇ YAPIŞMADI — sticky öğe
       KISA EBEVEYNİNİN (filterbar) içinde yapışır, filterbar geçilince onunla çıkar (ölçüldü:
       "hepsi bırakıyor"). Arama artık FIXED = viewport'a sabit, ebeveyne bakmaz: bayi ne kadar
       kaydırırsa kaydırsın arama HEP appbar'ın altında. Sonuç satırı + çipler akışta kayar
       (karar: yalnız arama sabit; sonuçlara alan ≥%65 korunur). */
    .cat-search-row {
        position: fixed; top: 58px; left: 0; right: 0; z-index: 1103;   /* 58 = mobil appbar (ölçüldü) */
        /* Sabit öğe saydam olursa altındaki kartlar içinden geçer okunmaz olur. */
        background: var(--mud-palette-surface, var(--fp-yuzey));
        padding: 6px 8px 4px;
        box-shadow: 0 6px 8px -6px rgba(0,0,0,.25);
    }
    /* Fixed öğe akıştan çıkar — filterbar'ın kalan içeriği arama satırının ALTINDAN başlasın
       diye yerine boşluk bırakılır (kutu 48 + buton satırı 40 + boşluklar ≈ 106). */
    .cat-filterbar { padding-top: 108px !important; }

    /* Bilgi banner'ları mobilde KOMPAKT: en büyük tekil israf ~130 px'lik mavi banner'dı.
       Açıklama caption'ları dar ekranda gizlenir — ana cümle + eylem düğmesi kalır. */
    .cat-filterbar .mud-alert { padding: 4px 8px !important; font-size: .78rem !important; }
    .cat-filterbar .mud-alert .mud-typography-caption { display: none !important; }
    .cat-filterbar .mud-alert .mud-alert-message { padding: 2px 0 !important; }

    /* Katalog kartları: 2 kolon, kompakt (çerçeveler küçülsün) */
    .cat-cards .mud-card { padding: 6px !important; border-radius: 12px; min-width: 0; }
    /* 🩸 29.08 (390px'te ölçüldü): 2 kolonda "Stokta·N" pili + SEPETE düğmesi sağ kenardan
       KESİLİYORDU — 64px'lik adet kutusu + nowrap ikonlu düğme dar kolona sığmıyor.
       Aksiyon satırı SARMALI: adet kutusu üstte kalır, SEPETE alt satıra TAM GENİŞLİK iner;
       stok pili kompaktlaşır. Hiçbir şey kesilmez, dokunma hedefi 40px korunur. */
    .cat-cards .mud-card-actions .d-flex { flex-wrap: wrap !important; row-gap: 4px; }
    .cat-cards .mud-card-actions .mud-button-root { flex: 1 1 100% !important; height: 40px !important; }
    .cat-cards .mud-chip { height: 22px !important; font-size: .68rem !important; padding: 0 6px !important; }
    .cat-cards .b2b-thumb, .cat-cards .b2b-thumb img, .cat-cards img { max-height: 95px !important; }
    .cat-cards .mud-typography-subtitle1, .cat-cards .mud-typography-body1 { font-size: 12.5px !important; line-height: 1.25 !important; }
    .cat-cards .mud-typography-caption { font-size: 10.5px !important; }
    .cat-cards .mud-button { font-size: 12px !important; }

    /* ERP detaylı liste (tablo) → taşmayı sayfaya yansıtma, kendi içinde kaydır */
    .b2b-erp-wrap { overflow-x: auto !important; max-width: 100vw !important; -webkit-overflow-scrolling: touch; }

    /* Dokunma hedefleri: butonlar basılabilir (≥40px) ama dev değil */
    .mud-button-root { min-height: 40px; }
    .appbar-search { min-width: 0 !important; }

    /* Form birincil aksiyonu mobilde tam genişlik (şifre değiştir vb.) */
    .pwd-actions { width: 100% !important; }
    .pwd-actions .mud-button-root { width: 100% !important; min-height: 46px; }
}

/* ====================== MOBİL APP ANA SAYFA (e-ticaret tarzı) ====================== */
/* Varsayılan: mobil-home gizli, masaüstü dashboard görünür */
.mhome-wrap { display: none; }
@media (max-width: 960px) {
    .mhome-wrap { display: block; }
    .home-desktop { display: none !important; }

    .mhome { padding: 10px 12px 12px; }
    /* Arama kutusu */
    .mhome-search {
        display: flex; align-items: center; gap: 8px; background: var(--fp-surface);
        border: 1px solid var(--fp-line-2); border-radius: 12px; padding: 12px 14px; color: var(--fp-text-mute);
        font-size: 14px; box-shadow: 0 1px 3px rgba(30,58,95,.06); margin-bottom: 12px;
    }
    .mhome-search .mud-icon-root { color: var(--fp-amber); }
    /* Hero banner — canlı */
    .mhome-hero {
        position: relative; overflow: hidden; border-radius: 18px; padding: 20px;
        background: linear-gradient(125deg, var(--fp-vurgu-koyu) 0%, var(--fp-vurgu) 40%, var(--fp-vurgu-orta) 72%, var(--fp-uyari) 130%);
        color: var(--fp-yuzey); margin-bottom: 18px; box-shadow: 0 10px 26px rgba(20,40,80,.35);
    }
    .mhome-hero::before {
        content: ""; position: absolute; top: -40px; right: -30px; width: 160px; height: 160px; border-radius: 50%;
        background: radial-gradient(circle, rgba(255,167,38,.55), transparent 70%);
    }
    .mhome-hero-txt { position: relative; z-index: 1; }
    .mhome-hero-txt b { font-size: 21px; display: block; letter-spacing: .2px; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
    .mhome-hero-txt span { font-size: 13px; opacity: .92; }
    .mhome-hero-cta {
        display: inline-block; margin-top: 14px; background: linear-gradient(135deg, var(--fp-uyari), var(--fp-uyari));
        color: var(--fp-murekkep); font-weight: 800; font-size: 13.5px; padding: 10px 20px; border-radius: 24px;
        box-shadow: 0 5px 16px rgba(255,140,0,.5);
    }
    .mhome-hero-ico {
        position: absolute; right: -6px; bottom: -14px; font-size: 120px !important;
        width: 120px !important; height: 120px !important; color: rgba(255,255,255,.14); z-index: 0;
    }
    /* Bölüm başlığı */
    .mhome-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 10px; }
    .mhome-sec-head b { font-size: 16px; color: var(--fp-text); }
    .mhome-sec-head a { font-size: 13px; color: var(--fp-navy); font-weight: 600; }
    /* Kategori çipleri (yatay kaydır) */
    .mhome-chips { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .mhome-chips::-webkit-scrollbar { display: none; }
    .mhome-chip { flex: 0 0 auto; width: 72px; text-align: center; cursor: pointer; }
    .mhome-chip-ico {
        width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 6px;
        background: linear-gradient(135deg, var(--fp-surface-2), var(--fp-surface-3)); display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 6px rgba(30,58,95,.08);
    }
    .mhome-chip-ico .mud-icon-root { color: var(--fp-navy); width: 28px; height: 28px; }
    .mhome-chip span { font-size: 11.5px; color: var(--fp-text-dim); line-height: 1.2; display: block;
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .mhome-chip:active .mhome-chip-ico { transform: scale(.92); }
    /* Ürün rafı (yatay kaydır) */
    .mhome-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; }
    .mhome-rail::-webkit-scrollbar { display: none; }
    /* Kaydırılabilir his: son kartın yanında bilinçli boşluk (peek) */
    .mhome-rail::after { content: ""; flex: 0 0 4px; }
    .mhome-chips::after { content: ""; flex: 0 0 4px; }
    .mhome-card {
        flex: 0 0 auto; width: 150px; background: var(--fp-surface); border: 1px solid var(--fp-line-2); border-radius: 14px;
        padding: 10px; cursor: pointer; box-shadow: 0 1px 4px rgba(30,58,95,.06); transition: transform .15s;
    }
    .mhome-card:active { transform: scale(.97); }
    .mhome-card-img { position: relative; height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
    .mhome-card-img img { max-width: 100%; max-height: 110px; object-fit: contain; }
    .mhome-badge { position: absolute; top: 0; left: 0; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
    .mhome-badge.ok { background: var(--fp-ok-bg); color: var(--fp-ok-strong); }
    .mhome-badge.kamp { background: linear-gradient(135deg, var(--fp-amber), var(--fp-amber-l)); color: var(--fp-murekkep); }
    .mhome-card-brand { font-size: 11px; color: var(--fp-text-mute); font-weight: 600; text-transform: uppercase; }
    .mhome-card-name { font-size: 12.5px; color: var(--fp-text); line-height: 1.25; height: 32px; overflow: hidden;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 2px 0 6px; }
    .mhome-card-price { font-size: 15px; font-weight: 800; color: var(--fp-navy); }
    .mhome-loading { text-align: center; color: var(--fp-text-mute); padding: 16px; font-size: 13px; }
    .mhome-sec-ico { display: inline-flex; vertical-align: middle; }
    .mhome-sec-ico .mud-icon-root { width: 18px; height: 18px; color: var(--fp-amber); margin-right: 3px; }

    /* Ürün detay: mobilde dikey yığ (sol resim sabit 340px sıkıştırmasın) */
    .pd-top { flex-direction: column !important; gap: 6px !important; }
    .pd-img { flex: 1 1 auto !important; width: 100% !important; }
    /* 29.08 (sahada istendi): bilgi alanı mobilde ekranı yiyordu — araçlara inmek zor, muadiller ilk
       bakışta görünmüyordu. Görsel 240→190, thumbnail 56→44, fiyat 1.7→1.25rem, boşluklar
       kısıldı, "fareyle yaklaştır" ipucu gizli (fare yok), "Sepete Git" metin düğmesi gizli
       (alt gezinmede sepet zaten var). Amaç: künye tek ekrana sığsın, altı hemen görünsün. */
    .pd-img .mud-paper { height: 190px !important; }
    .pd-img > div[style*="overflow-x"] { max-width: 100% !important; }
    .pd-img .mud-image { width: 44px !important; height: 44px !important; }
    .pd-zoom-ipucu { display: none !important; }
    .pd-sepete-git { display: none !important; }
    .pd-fiyat { font-size: 1.25rem !important; }
    .pd-top .mud-typography-h5 { font-size: 1.05rem !important; }
    .pd-top .mb-2 { margin-bottom: 4px !important; }
    .pd-top .mt-2 { margin-top: 4px !important; }
    .pd-top .mud-chip { height: 22px !important; font-size: .7rem !important; }
    /* Detay ALT: sekmeler (özellik/OEM/araç) + Muadiller dikey yığ (sekmeler kaybolmasın) */
    .pd-bottom { flex-direction: column !important; }
    .pd-tabs, .pd-muadil { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; }
    /* MUADİLLER ÖNE (29.08, sahada: "ilk bakışta görünmüyor"): mobilde muadil paneli
       sekmelerin ÜSTÜNE alınır (CSS order — DOM/masaüstü değişmez) ve kendi içinde
       kaydırılır ki sekmeleri ekranın dibine itmesin. */
    .pd-muadil { order: -1; max-height: 230px; overflow-y: auto; }
    /* OEM & Cross + Uyumlu Araçlar tabloları sola yasla, tam genişlik */
    .pd-tabs table { width: 100% !important; }
    .pd-tabs table th, .pd-tabs table td { text-align: left !important; }
}

/* Katalog: kategori paneli mobilde buton arkasında (ürünler öne çıksın) */
.cat-toggle { display: none; }
.cat-filter-toggle { display: none; }
@media (max-width: 960px) {
    .cat-toggle { display: flex !important; margin-bottom: 10px; }
    .cat-panel-item { display: none !important; }
    .cat-panel-item.open { display: block !important; }
    .cat-filter-toggle { display: inline-flex !important; flex: 0 0 auto; }
}

/* ====================== ALT NAVİGASYON (sadece mobil) ====================== */
.fp-bottomnav { display: none; }

@media (max-width: 960px) {
    /* Üst bardaki masaüstü menü butonlarını gizle (mobilde alt-nav var) */
    .nav-desktop { display: none !important; }

    /* İçeriğin altına alt-nav boşluğu (içerik kapanmasın) */
    .mud-main-content { padding-bottom: calc(var(--fp-bottomnav-h) + env(safe-area-inset-bottom, 0px)) !important; }

    /* Logo mobilde biraz küçülsün */
    .mud-appbar img { max-width: 150px !important; height: 40px !important; }
    /* Marka adı tek satır — font küçük, tam sığsın (kesilmesin) */
    .mud-appbar .mud-link { max-width: 50vw; overflow: hidden; }
    .mud-appbar .mud-link .mud-typography { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px !important; }
    /* Admin "Müşteri olarak önizle" barı mobilde gizli (masaüstü güç-aracı) */
    .preview-bar { display: none !important; }

    /* Dokunma hedefleri büyük (jilet gibi, parmak yormasın) */
    .mud-appbar .mud-icon-button { width: 44px; height: 44px; }

    /* Arama kutusu mobilde esnek genişlik (taşmasın) */
    .appbar-search { min-width: 0 !important; max-width: none !important; flex: 1 1 auto; margin-left: 4px !important; }

    .fp-bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
        height: calc(var(--fp-bottomnav-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(180deg, rgba(22,38,63,.97), rgba(30,58,95,.99));
        backdrop-filter: saturate(160%) blur(10px);
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -6px 22px rgba(15,25,45,.35);
    }
    .fp-bottomnav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; text-decoration: none; color: rgba(255,255,255,.72);
        font-size: 11px; font-weight: 600; letter-spacing: .2px;
        position: relative; -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, transform .12s ease;
    }
    .fp-bottomnav a .mud-icon-root {
        width: 24px; height: 24px;
        transition: transform .18s cubic-bezier(.34,1.56,.64,1), color .18s ease;
    }
    .fp-bottomnav a:active { transform: scale(.9); }
    .fp-bottomnav a:active .mud-icon-root { transform: translateY(-2px) scale(1.1); }

    /* Aktif sekme: amber + üstte parlayan gösterge + ikon yukarı */
    .fp-bottomnav a.active { color: var(--fp-yuzey); }
    .fp-bottomnav a.active .mud-icon-root {
        color: var(--fp-amber-l) !important;
        transform: translateY(-3px) scale(1.12);
        filter: drop-shadow(0 3px 8px rgba(251,140,0,.55));
    }
    .fp-bottomnav a.active::before {
        content: ""; position: absolute; top: 0; width: 34px; height: 3px; border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, var(--fp-amber), var(--fp-amber-l));
        box-shadow: 0 0 10px rgba(251,140,0,.8);
    }

    /* "Yukarı çık" FAB alt-nav'ın üstüne çıksın (çakışmasın) */
    .fp-scrolltop { bottom: calc(var(--fp-bottomnav-h) + 16px) !important; right: 16px !important; }

    /* Geniş tablolar (ERP-grid) mobilde yatay kayabilsin, taşmasın */
    .mud-table-container, .mud-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Alt-nav sepet rozeti */
    .fp-bottomnav .fp-badge {
        position: absolute; top: 6px; left: 52%; min-width: 16px; height: 16px; padding: 0 4px;
        background: var(--fp-kritik); color: var(--fp-yuzey); font-size: 10px; font-weight: 700;
        border-radius: 9px; display: flex; align-items: center; justify-content: center;
        border: 1.5px solid var(--fp-navy-d);
    }
}

/* ====================== "Uygulamayı Yükle" banner ====================== */
#fp-install {
    display: none;
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--fp-bottomnav-h) + 14px); z-index: 1400;
    background: linear-gradient(135deg, var(--fp-vurgu), var(--fp-vurgu-orta));
    color: var(--fp-yuzey); border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(15,25,45,.45); border: 1px solid rgba(255,255,255,.12);
    align-items: center; gap: 12px;
    animation: fpFade .3s ease both;
}
#fp-install.show { display: flex; }
/* Tenant logosundan üretilen kare ikon — arka plan ikonun kendi rengidir, sabit amber değil. */
#fp-install .fp-ins-ico {
    width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
#fp-install .fp-ins-txt { flex: 1; line-height: 1.25; }
#fp-install .fp-ins-txt b { font-size: 14px; }
#fp-install .fp-ins-txt span { font-size: 12px; opacity: .8; }
#fp-install button {
    border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
}
#fp-install .fp-ins-yes { background: linear-gradient(135deg, var(--fp-amber), var(--fp-amber-l)); color: var(--fp-murekkep); }
#fp-install .fp-ins-no { background: transparent; color: rgba(255,255,255,.7); }

@media (min-width: 961px) {
    #fp-install { bottom: 18px; left: auto; right: 18px; max-width: 360px; }
}