/* =============================================================================
   PLEXSUS — MOBIL KABUK (Ağustos 2026)

   NEDEN AYRI DOSYA:
   Mobil uyum ilk turda leadmap.css icindeki media query'lerle, yani masaustu
   bilesenlerini dar ekrana SIKISTIRARAK yapilmisti. Gercek cihazda sonuc kullanilabilir
   degildi: dxDataGrid yatay kayiyor ve sutunlari kesiliyordu, 7 sutunlu takvim izgarasi
   okunmuyordu, sayfa basligi + aciklama + 2 buton + tab seridi + kart basligi + uyari +
   6 filtre cipi + arama + firma secici katmanlari yuzunden kullanici asil ise ulasana
   kadar tum ekrani kaydiriyordu.

   YENI YAKLASIM: masaustu bileseni mobilde GIZLENIR, yerine ayni veriden beslenen sade
   bir mobil bilesen render edilir (grid -> kart listesi, takvim -> gun grupli ajanda).
   Ayri sayfa/ayri view YOK — tek view, tek veri ucu, yalnizca sunum katmani degisiyor.
   Boylece is mantigi tek kaynakta kalir, bakim ikiye katlanmaz.

   KURAL: bu dosyadaki her sey media query icindedir. Masaustunde tek bir kural bile
   devreye girmez; genis ekran gorunumu birebir korunur.

   Breakpoint standardi: 768 / 480 (leadmap.css ile ayni).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   VARSAYILAN: MOBIL BILESENLERI GIZLI
   Bu blok media query DISINDA olmak zorunda. Alt sekme cubugu once yalnizca
   media query icinde display:flex olarak tanimlanmisti; dar ekranda dogru
   calisiyordu ama GENIS ekranda hicbir kural onu gizlemedigi icin sayfanin
   ortasinda devasa SVG ikonlar ve ciplak metin linkleri olarak render oldu
   (masaustu gorunumu bozuldu). Gizleme varsayilan olmali, gorunurluk istisna.
   -------------------------------------------------------------------------- */
.lm-mobil-altmenu {
    display: none;
}

@media (max-width: 768px) {

    /* ---------------------------------------------------------------------
       1) ALT SEKME CUBUGU
       Mobilde ana gezinme buradan yapilir. Hamburger menu duruyor (tum modullere
       oradan ulasilir); alt cubuk yalnizca en sik kullanilan 4 ekrani one cikarir.
       iPhone home-bar'i dugmelerin uzerine binmesin diye safe-area payi birakilir.
       --------------------------------------------------------------------- */
    .lm-mobil-altmenu {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        background: #fff;
        border-top: 1px solid #e9edf5;
        box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .lm-mobil-altmenu-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 7px 2px 6px;
        border: none;
        background: transparent;
        color: #8b95a8;
        font-size: 10.5px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s;
    }

    .lm-mobil-altmenu-item svg {
        width: 20px;
        height: 20px;
        stroke-width: 2;
    }

    .lm-mobil-altmenu-item.aktif {
        color: #7c3aed;
    }

    /* Aktif sekmenin ustunde ince gosterge — hangi ekranda oldugu bir bakista anlasilir */
    .lm-mobil-altmenu-item.aktif::before {
        content: '';
        position: absolute;
        top: 0;
        width: 26px;
        height: 2.5px;
        border-radius: 0 0 3px 3px;
        background: #7c3aed;
    }

    .lm-mobil-altmenu-item {
        position: relative;
    }

    /* Bekleyen is sayisi rozeti (ornek: onay bekleyen icerik) */
    .lm-mobil-altmenu-rozet {
        position: absolute;
        top: 5px;
        right: 50%;
        transform: translateX(16px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #ef4444;
        color: #fff;
        font-size: 9.5px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    /* Alt cubuk sayfanin son icerigini kapatmasin */
    body.lm-mobil-altmenu-var {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* NOT: burada bir zamanlar .lm-koc-widget-btn / #lmKocWidgetBtn icin konum
       kurali vardi — bunlar YANLIS secicilerdi (gercek sinif .kw-bubble) ve hicbir
       zaman etki etmedi. Balon zaten 1c'de mobilde tamamen gizlendigi icin
       kaldirildi; olu kural birakmak sonraki okuyani yaniltiyordu. */

    /* PWA kurulum banner'i alt cubugun uzerinde dursun */
    body.lm-mobil-altmenu-var #lmPwaInstallBanner,
    body.lm-mobil-altmenu-var #lmPwaIosBanner {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Yatay kayma guvenlik agi: tek bir tasan oge tum sayfayi saga kaydirip
       "kompakt gorunmuyor" hissi veriyor. Giris ekraninda bildirildi. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* ---------------------------------------------------------------------
       1a) HEADER LOGO AMBLEMI
       Telefonda amblem gorunmuyordu. Gorsel dosyasi saglam (200 doner) ve
       leadmap.css'te onu gizleyen bir kural yok — bu yuzden sebep bulunamadi;
       burada gorunurlugu acikca garanti altina aliyoruz. Dar ekranda daralan
       header'da sikisip kaybolmamasi icin flex-shrink da sifirlaniyor.
       --------------------------------------------------------------------- */
    .lm-header-logo-icon {
        display: flex !important;
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .lm-header-logo-icon img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-width: none !important;
    }

    /* ---------------------------------------------------------------------
       1b) MOBIL TIPOGRAFI TABANI

       Arayuz masaustu icin yazildigi icin cok sayida kucuk punto var: kod
       tabaninda 9px 35, 9.5px 19, 10px 135, 10.5px 67 yerde kullaniliyor —
       yani 10px ve alti ~190 nokta. Masaustunde bilgi yogunlugu icin makul,
       telefonda okunmuyor (rozetler, meta satirlari, dropdown ve istatistik
       etiketleri).

       OLCEK (mobil):
         14px  form girdisi (select/input) — iOS'ta 16px'e cikar, bkz. html.lm-ios
         15px  bolum basligi
         13px  kart basligi
         12px  govde metni, dugme
         11px  meta / etiket  <-- TABAN, bunun altina inilmiyor
         10.5px yalnizca sayac rozeti (bilincli istisna, asagida acik yaziyor)

       Taban once 11.5px idi; ekranlar fazla sisiyordu, 11px'e cekildi — hala
       rahat okunuyor ama satirlar belirgin sekilde kompaktlasti.

       Inline style'lar attribute selector ile yakalaniyor cunku bu puntolarin
       cogu HTML/JS icinde satir ici yazilmis, sinifla hedeflenemiyor.
       --------------------------------------------------------------------- */
    [style*="font-size:9px"],  [style*="font-size: 9px"],
    [style*="font-size:9.5px"], [style*="font-size: 9.5px"],
    [style*="font-size:10px"], [style*="font-size: 10px"],
    [style*="font-size:10.5px"], [style*="font-size: 10.5px"] {
        font-size: 11px !important;
    }

    /* Form ogeleri: 14px (kompakt ve okunur).
       16px KURALI YALNIZCA iOS'TA gecerli — Safari 16px alti bir input/select'e
       odaklaninca sayfayi otomatik buyutuyor ve duzen kayiyor. Android'de ve
       masaustunde boyle bir davranis yok; oralarda 16px filtre kutularini
       gereginden buyuk gosteriyordu. html.lm-ios sinifini _PwaKurulum ekliyor. */
    select,
    select option,
    .lm-select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    textarea,
    .dx-selectbox input {
        font-size: 14px !important;
    }

    html.lm-ios select,
    html.lm-ios select option,
    html.lm-ios .lm-select,
    html.lm-ios input[type="text"],
    html.lm-ios input[type="search"],
    html.lm-ios input[type="email"],
    html.lm-ios input[type="password"],
    html.lm-ios textarea,
    html.lm-ios .dx-selectbox input {
        font-size: 16px !important;
    }

    /* Istatistik / KPI kartlari: sayi buyuk kalsin, etiket okunur olsun */
    .stat-label,
    .stats-row .stat-label,
    .lm-kpi-label,
    .lm-stat-etiket {
        font-size: 11.5px !important;
        letter-spacing: 0 !important;
    }

    /* ---------------------------------------------------------------------
       1c) YUZEN KOC BALONU
       Alt sekme cubugu geldikten sonra balon (52px, bottom:18px) tam "Koç"
       sekmesinin uzerine oturup onu kapatiyordu. Kucultuldu ve cubugun ustune
       alindi. NOT: alt cubukta zaten Koç girisi var, yani balon mobilde
       MUKERRER — tamamen gizlemek de bir secenek; simdilik kucuk tutuluyor.
       (Onceki denemede yanlis secici kullanilmisti: gercek sinif .kw-bubble.)
       --------------------------------------------------------------------- */
    /* Balon MOBILDE GIZLI. Kucultup yukari almak yetmedi: uc ekranda da alt
       cubugun uzerine binip "Koç" sekmesini kapatiyordu ve icerigin son satirini
       orluyordu. Asil gerekce mukerrerlik — alt sekme cubugunda zaten Koç girisi
       var, yani ayni ise iki dugme dusuyordu. Masaustunde balon aynen duruyor
       (orada alt cubuk yok, tek erisim yolu o).
       Panel gizlenmiyor: alt cubuktaki Koç sekmesi /leadmap/koc sayfasini aciyor. */
    .kw-bubble {
        display: none !important;
    }

    /* ---------------------------------------------------------------------
       1d) KOMPAKTLIK — dropdown, istatistik kartlari, ajanda araç cubugu
       Tipografi tabani metinleri okunur yaptiktan sonra bazi bilesenler
       gereginden fazla yer kaplamaya basladi. Punto korunuyor (okunabilirlik),
       CEVRESINDEKI bosluk daraltiliyor: dolgu, yukseklik, bosluk.
       --------------------------------------------------------------------- */
    select,
    .lm-select {
        padding: 6px 26px 6px 9px !important;
        height: auto !important;
        min-height: 36px !important;
        line-height: 1.2 !important;
        background-position: right 8px center !important;
    }

    /* Dashboard firma/proje secici seridi */
    .lm-proje-dropdown,
    .lm-proje-secici,
    .lm-dash-firma-secici {
        max-width: 100% !important;
    }

    .lm-proje-dropdown select,
    .lm-dash-firma-secici select {
        /* punto genel form kuralindan: 14px, iOS'ta 16px */
        font-weight: 600 !important;
        padding: 5px 22px 5px 7px !important;
        min-height: 32px !important;
    }

    /* Istatistik / KPI kartlari: iki sutun, daha az dolgu */
    .stats-row,
    .lm-kpi-row {
        gap: 8px !important;
    }

    .stats-row > *,
    .lm-kpi-card,
    .stat-card {
        padding: 11px !important;
    }

    .stat-value,
    .lm-kpi-value {
        font-size: 19px !important;
        line-height: 1.15 !important;
    }

    /* Takvim/ajanda arac cubugu: baslik + Ay/Hafta + Onceki/Bugun/Sonraki.
       Masaustunde tek satirdi, telefonda dort satira yayiliyordu. */
    #takvimBaslik {
        font-size: 15px !important;
        font-weight: 800 !important;
        width: 100%;
    }

    .lm-takvim-view-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 34px;
    }

    /* Onceki / Bugun / Sonraki: esit genislikte tek satir */
    .icerik-tab .grid-card-header button.lm-btn-sm {
        flex: 1 1 0 !important;
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    #takvimBugunRozet {
        display: none !important;   /* baslikta zaten ay/yil yaziyor */
    }

    /* ---------------------------------------------------------------------
       1e) GIRIS / KAYIT EKRANI
       Bu dosya once yalnizca header partial'indan yukleniyordu; Login header
       kullanmadigi icin asagidaki kurallarin hicbiri giris ekraninda devrede
       degildi (public partial'a da eklendi). Bildirilen iki sorun:
       yatay kayma ve ust marka blogunun fazla yer kaplamasi.
       --------------------------------------------------------------------- */
    .lm-login-left,
    .lm-login-right {
        padding: 22px 16px !important;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Marka blogu: amblem + yazi logosu kucultuldu, ikisi de gorunur kalsin.
       Yazi logosu beyaza cevrildigi icin (filter) mor zemin uzerinde durmali. */
    .lm-brand-logo {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .lm-brand-logo-icon {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .lm-brand-logo-icon img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .lm-brand-logo > img {
        height: 24px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .lm-brand-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .lm-brand-desc,
    .lm-login-left p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    .lm-login-header h2 { font-size: 19px !important; }

    .lm-login-footer { margin-top: 18px !important; }

    /* Yatay kayma: sabit konumlu ust link translate ile ortalaniyor ve dar
       ekranda tasabiliyor; ayrica hicbir oge gorunum genisligini asmamali. */
    .lm-home-link {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---------------------------------------------------------------------
       1f) KOMPAKT BOSLUK SISTEMI
       Puntolar okunur hale gelince bosluklar fazla kalmaya basladi: kart
       dolgulari, bolum aralari ve kartlar arasi mesafe hala masaustu
       degerlerindeydi (18-24px). Telefonda bu, ekran basina dusen bilgi
       miktarini ciddi olcude dusuruyor — kullanici surekli kaydiriyor.
       Tek yerden daraltiliyor ki bilesenler arasinda ritim bozulmasin.
       --------------------------------------------------------------------- */
    .grid-card {
        margin-bottom: 10px !important;
    }

    .grid-card > div[style*="padding:16px"],
    .grid-card > div[style*="padding: 16px"],
    .grid-card > div[style*="padding:18px"],
    .grid-card > div[style*="padding:20px"],
    .grid-card > div[style*="padding:24px"] {
        padding: 12px !important;
    }

    /* Sayfa govdesi: yanlarda 24-32px yerine 10px */
    .lm-content,
    .lm-container,
    .lm-page-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Ust ust binen bolum bosluklari */
    .lm-section,
    .lm-bolum {
        margin-bottom: 10px !important;
    }

    /* ---------------------------------------------------------------------
       1g) DOKUNMA HEDEFI STANDARDI
       Once yerel yerel farkli degerler verilmisti (30/32/34/36/38/40) —
       ayni ekranda farkli yuksekliklerde dugmeler yan yana geliyordu.
       Tek olcek: birincil 38, ikincil 34, cip 30.
       --------------------------------------------------------------------- */
    .lm-btn {
        min-height: 38px !important;
        padding: 7px 13px !important;
        font-size: 12px !important;
    }

    .lm-btn-sm {
        min-height: 34px !important;
        padding: 6px 11px !important;
        font-size: 12px !important;
    }

    .lm-btn-xs {
        min-height: 30px !important;
        padding: 5px 9px !important;
        font-size: 11px !important;
    }

    /* ---------------------------------------------------------------------
       2) UST KATMAN SADELESTIRME
       Mobilde ekranin ilk yarisi aciklama metinleri ve ikincil butonlarla
       doluyordu. Bunlar masaustunde baglam veriyor, telefonda sadece yer kapliyor.
       --------------------------------------------------------------------- */
    .lm-mobil-gizle {
        display: none !important;
    }

    /* Sayfa basligi altindaki uzun aciklama satiri — masaustunde baglam veriyor,
       telefonda iki satir yer kaplayip asil isi asagi itiyor. */
    .lm-page-header .lm-page-desc,
    .lm-page-header p.lm-page-subtitle,
    .lm-sayfa-aciklama {
        display: none !important;
    }

    .lm-sayfa-ust {
        padding: 12px 12px 0 !important;
    }

    .lm-sayfa-ust > div:first-child {
        margin-bottom: 8px !important;
    }

    .lm-page-header h1,
    .lm-page-header .lm-page-title {
        font-size: 17px;
    }

    /* ---------------------------------------------------------------------
       3) MOBIL KART LISTESI (dxDataGrid yerine)
       --------------------------------------------------------------------- */
    .lm-mobil-liste {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 2px 0 8px;
    }

    .lm-mobil-kart {
        display: flex;
        gap: 11px;
        padding: 11px;
        border: 1px solid #e9edf5;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

    /* Onay bekleyen kart kenardan vurgulanir — kullanicinin ilk isi bu */
    .lm-mobil-kart.bekliyor {
        border-color: #fde68a;
        background: #fffdf6;
    }

    .lm-mobil-kart-gorsel {
        width: 56px;
        height: 56px;
        border-radius: 9px;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid #e9edf5;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #cbd5e1;
        font-size: 19px;
        position: relative;
    }

    .lm-mobil-kart-gorsel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .lm-mobil-kart-gorsel .sayi {
        position: absolute;
        bottom: 2px;
        right: 2px;
        background: rgba(0, 0, 0, .62);
        color: #fff;
        font-size: 8.5px;
        font-weight: 700;
        padding: 1px 4px;
        border-radius: 4px;
    }

    .lm-mobil-kart-govde {
        flex: 1;
        min-width: 0;
    }

    .lm-mobil-kart-baslik {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.35;
        /* Iki satirdan sonra kes — kart yuksekligi sabit kalsin, liste taranabilir olsun */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lm-mobil-kart-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
        font-size: 10.5px;
        color: #64748b;
    }

    .lm-mobil-kart-meta .ayrac {
        color: #cbd5e1;
    }

    .lm-mobil-kart-firma {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 1px 7px;
        border-radius: 9px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 10px;
        font-weight: 600;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Kart aksiyonlari — dokunma hedefi en az 38px */
    .lm-mobil-kart-aksiyon {
        display: flex;
        gap: 7px;
        margin-top: 9px;
    }

    .lm-mobil-kart-aksiyon button {
        flex: 1;
        min-height: 38px;
        border-radius: 9px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #475569;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .lm-mobil-kart-aksiyon button.birincil {
        border: none;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: #fff;
        font-weight: 700;
    }

    .lm-mobil-kart-aksiyon button.tehlike {
        flex: 0 0 44px;
        border-color: #fecaca;
        background: #fef2f2;
        color: #dc2626;
    }

    /* ---------------------------------------------------------------------
       4) MOBIL AJANDA (7 sutunlu takvim izgarasi yerine)
       Takvim masaustu metaforu: 7 sutun dar ekranda okunmuyor. Mobilde ayni veri
       gun gun asagi dogru akan bir listeye donusur — telefonda dogal olan bu.
       --------------------------------------------------------------------- */
    .lm-mobil-ajanda {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .lm-mobil-ajanda-gun {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .lm-mobil-ajanda-baslik {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
        font-size: 11.5px;
        font-weight: 700;
        color: #475569;
        position: sticky;
        top: 0;
        background: #f6f8fc;
        z-index: 2;
    }

    .lm-mobil-ajanda-baslik .tarih-kutu {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: #ede9fe;
        color: #6d28d9;
        line-height: 1.1;
        flex-shrink: 0;
    }

    .lm-mobil-ajanda-baslik .tarih-kutu .gun {
        font-size: 14px;
        font-weight: 800;
    }

    .lm-mobil-ajanda-baslik .tarih-kutu .ay {
        font-size: 8px;
        font-weight: 600;
    }

    /* Bugun ayirt edilsin */
    .lm-mobil-ajanda-gun.bugun .tarih-kutu {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: #fff;
    }

    .lm-mobil-ajanda-bos {
        padding: 9px 12px;
        border: 1px dashed #e2e8f0;
        border-radius: 10px;
        color: #94a3b8;
        font-size: 11.5px;
    }

    .lm-mobil-ajanda-kayit {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 11px;
        border: 1px solid #e9edf5;
        border-left: 3px solid #a78bfa;
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
    }

    .lm-mobil-ajanda-kayit .saat {
        font-size: 11px;
        font-weight: 700;
        color: #7c3aed;
        flex-shrink: 0;
        min-width: 38px;
    }

    .lm-mobil-ajanda-kayit .metin {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        color: #1e293b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------------------------------------------------------------------
       5) GENEL FILTRE SERIDI (.lm-mobil-filtre yardimci sinifi)
       NOT: bu sinif yatay kaydirmali; asil Iceriklerim/Takvim filtre bari ise
       5b'de SARMALI hale getirildi — kaydirilan cipler kullanicidan gizli
       kaliyordu. Yeni yerlerde tercih edilmesi gereken davranis sarmalamadir.
       --------------------------------------------------------------------- */
    .lm-mobil-filtre {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 2px 0 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lm-mobil-filtre::-webkit-scrollbar {
        display: none;
    }

    .lm-mobil-filtre .lm-filter-chip,
    .lm-mobil-filtre button {
        flex: 0 0 auto;
        min-height: 34px;
        white-space: nowrap;
    }

    /* Sonuc sayaci */
    .lm-mobil-sayac {
        font-size: 11px;
        color: #64748b;
        padding: 2px 2px 8px;
    }

    /* ---------------------------------------------------------------------
       5b) FILTRE BARI — satir bazli sarmalama
       Masaustunde tek satira sigan cip + arama + firma secici + filtre dugmesi
       dizisi telefonda uc satira yayilip ekranin dortte birini yiyordu.
       Duzen: cipler bir satir (sarmali), arama bir satir, firma secici +
       "Filtreler" ayni satir.
       --------------------------------------------------------------------- */
    /* Satir bazli sarmalama: cipler kendi satirinda, arama kendi satirinda,
       firma secici ile Filtreler dugmesi AYNI satirda. Once dikey yigindi ve
       her kontrol tam genislik kaplayip filtre alanini gereksiz uzatiyordu. */
    .lm-filter-bar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }

    .lm-filter-bar-chips,
    .lm-filter-arama-wrap {
        flex: 1 1 100% !important;
    }

    /* Filtre cipleri: SARMALI, kaydirmali DEGIL.
       Once tek satirda yatay kaydirmaliydi; ekranin sagina tasan cipler
       ("Gözden Geçir", "Kısmi"...) kesiliyor ve kaydirilabildigine dair hicbir
       gorsel ipucu olmadigi icin kullanici o filtrelerin varligini bilmiyordu.
       Artik hepsi ayni anda gorunuyor; iki satiri gecmemesi icin cipler
       kompaktlastirildi (dolgu, bosluk ve sayac rozeti kucultuldu). */
    .lm-filter-bar-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 5px !important;
        padding-bottom: 0 !important;
    }

    .lm-filter-bar-chips .lm-filter-chip {
        flex: 0 1 auto;
        white-space: nowrap;
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
        gap: 3px !important;
        line-height: 1.2 !important;
    }

    /* Cip icindeki sayac rozeti (Tümü 0 / Yayında 0 ...) */
    .lm-filter-bar-chips .lm-filter-chip span,
    .lm-filter-bar-chips .lm-filter-chip b {
        font-size: 10.5px !important;
        padding: 0 3px !important;
        min-width: 13px;
    }

    /* Arama kutusu tam genislik ama alcak. Punto genel form kuralindan geliyor
       (14px; iOS'ta 16px) — burada yalnizca yukseklik/dolgu sikiliyor. */
    .lm-filter-arama-wrap {
        width: 100% !important;
    }

    .lm-filter-arama-input {
        width: 100% !important;
        min-height: 34px !important;
        padding: 6px 10px 6px 30px !important;
        line-height: 1.2 !important;
    }

    .lm-filter-arama-icon {
        font-size: 12px !important;
        left: 9px !important;
    }

    /* FIRMA SECICI + "Filtreler" — tek satirda yan yana.
       Firma secici tam genislikte, kalin ve yuksek bir mor kutu olarak ekrani
       domine ediyordu; arama kutusundan da buyuk gorunuyordu. Artik komsu
       kontrollerle ayni yukseklikte ve daha sakin. Punto 16px KALIYOR: iOS'ta
       16px altindaki bir select'e odaklaninca Safari sayfayi otomatik buyutuyor.
       Kompaktlik dolgudan ve font agirligindan aliniyor. */
    .lm-filter-bar > div[style*="linear-gradient(135deg,#faf5ff"] {
        flex: 1 1 60% !important;
        min-width: 0;
        padding: 2px 8px !important;
        border-radius: 8px !important;
        background: #fbfaff !important;
        border-color: #e4dcfa !important;
    }

    .lm-filter-bar > div[style*="linear-gradient(135deg,#faf5ff"] select {
        width: 100%;
        min-width: 0 !important;
        font-weight: 500 !important;
        padding: 4px 18px 4px 2px !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }

    /* Firma secici ile Filtreler dugmesi ayni satirda ve ayni yukseklikte */
    .lm-filter-toggle-btn {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 5px 10px !important;
        font-size: 11.5px !important;
    }

    /* Gelismis filtre panelindeki alan etiketleri ve kutulari */
    .lm-filter-adv-field label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    .lm-filter-advanced {
        padding: 8px 10px !important;
    }

    .lm-filter-advanced-grid {
        gap: 8px !important;
    }

    /* Filtre barindaki hicbir oge kabi asmasin. Firma secici ve "Filtreler" dugmesi
       min-width degerleri yuzunden ekranin sagindan tasiyordu. */
    .lm-filter-bar > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .lm-filter-bar select {
        max-width: 100%;
    }

    /* ---------------------------------------------------------------------
       5c) ETKILESIMLER TABI
       Ozet seridi inline style ile 4 kolona sabitlenmis (repeat(4,1fr)) —
       telefonda dort kutu okunmuyordu. Filtre select'lerinde min-width:140px
       inline tanimli, ucu yan yana gelince kabi asiyordu.
       Inline style oldugu icin !important sart.
       --------------------------------------------------------------------- */
    #etkilesimOzet {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 12px 12px !important;
        gap: 8px !important;
    }

    #etkilesimListe {
        padding: 12px 10px !important;
    }

    /* Etkilesim kartindaki kapak gorseli — 72px dar ekranda metne yer birakmiyordu */
    #etkilesimListe img[style*="width:72px"],
    #etkilesimListe div[style*="width:72px"] {
        width: 54px !important;
        height: 54px !important;
        font-size: 19px !important;
    }

    #etkilesimListe > div > div[data-etk-gid] {
        padding: 11px !important;
        gap: 10px !important;
    }

    /* Platform seridi (Instagram/LinkedIn... + metrikler + Gor/Analiz dugmeleri).
       inline-flex ile tek satira diziliydi: dar ekranda ikon, hesap adi, uc metrik ve
       iki dugme yan yana sigmayip kaptan tasiyor, metrikler dikey ezilip okunmaz
       hale geliyordu. Mobilde tam genislik + sarmali dizilim.
       Secici cipin kendi inline yuvarlakligindan (border-radius:18px) yakalaniyor. */
    #etkilesimListe div[style*="border-radius:18px"] {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-right: 0 !important;
        gap: 5px !important;
        padding: 8px 10px !important;
        align-items: center !important;
    }

    /* Cip icindeki Gor / Analiz baglantilari sola hizalanip alt satira dussun */
    #etkilesimListe div[style*="border-radius:18px"] > a {
        margin-left: 0 !important;
        min-height: 26px;
        display: inline-flex;
        align-items: center;
    }

    /* Gonderi karti: kapak + govde dar ekranda sarmalansin */
    #etkilesimListe > div > div[data-etk-gid] {
        flex-wrap: wrap !important;
    }

    /* Donem / firma / platform secicileri: iki sutuna yayilir, tasma biter.
       16px: iOS'ta 16px altindaki input'a odaklaninca sayfa otomatik zoom yapiyor. */
    #etkilesimDonemSelect,
    #etkilesimFirmaFilter,
    #etkilesimPlatformFilter,
    #etkilesimIcerikTipiFilter,
    #etkilesimUrunFilter,
    #etkilesimModulFilter {
        min-width: 0 !important;
        width: 100% !important;
        /* punto genel form kuralindan gelir (14px / iOS 16px) */
    }

    #etkilesimDonemSelect,
    #etkilesimFirmaFilter,
    #etkilesimPlatformFilter {
        flex: 1 1 46% !important;
    }

    /* Ust arac cubugu bes ayri satira yayilmisti (baslik, iki buyuk buton, iki
       secici, iki secici daha, karsilastir/temizle, tarih araligi, sayac).
       Butonlar kucultulup yan yana geliyor, ikincil bilgiler siralaniyor. */
    #etkilesimYenileBtn,
    #lmAnalizBtn,
    #etkilesimFilterToggleBtn {
        min-height: 36px !important;
        padding: 6px 11px !important;
        font-size: 12px !important;
        flex: 1 1 auto;
    }

    #etkilesimDonemBilgi {
        margin-left: 0 !important;
        width: 100%;
        font-size: 11px !important;
    }

    /* Baslik satiri: ikon + baslik + aciklama alt alta yigilmasin */
    #icerikTabEtkilesim .grid-card-header {
        padding: 12px 12px !important;
        gap: 8px !important;
    }

    /* "Tüm platformlar" ve donem secicisi esit paylassin */
    #etkilesimPlatformFilter,
    #etkilesimDonemSelect {
        flex: 1 1 46% !important;
    }

    /* Karsilastir onay kutusu + Temizle: kompakt tek satir */
    #etkilesimKarsilastir { transform: scale(1.05); }

    /* Kart basligi kompaktlasir */
    .grid-card-header {
        padding: 12px 14px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .grid-card-title {
        font-size: 14px !important;
    }

    .grid-card {
        border-radius: 12px;
    }

    /* Sekme seridi tek satirda kaysin, ekranin tamamini kaplamasin.
       Aktif sekmeye otomatik kaydirma JS ile yapiliyor (_LeadMapMobilAltMenu) —
       aksi halde secili sekme ekran disinda kalip kullanici nerede oldugunu
       goremiyordu (Seri Planlayici acikken solda "...erik" kesik goruluyordu). */
    .icerik-tabs,
    .lm-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px;
    }

    .icerik-tabs::-webkit-scrollbar,
    .lm-tabs::-webkit-scrollbar {
        display: none;
    }

    .lm-tab {
        padding: 9px 11px !important;
        font-size: 12px !important;
        min-height: 38px;
    }

    /* Sekme yildizlari (varsayilan sekme isareti) mobilde yer yiyor */
    .lm-tab-yildiz,
    .lm-alttab-yildiz {
        display: none !important;
    }

    /* ---------------------------------------------------------------------
       5d) SERI PLANLAYICI KARTLARI
       Kart basligi + firma rozeti + durum rozeti + ilerleme + tarih satiri
       dar ekranda ic ice giriyordu; dolgu ve satir araliklari sikildi.
       --------------------------------------------------------------------- */
    #icerikTabSeri .grid-card,
    #icerikTabSeri .lm-seri-kart {
        margin-bottom: 8px !important;
    }

    #icerikTabSeri .lm-seri-kart,
    #icerikTabSeri [class*="seri-kart"] {
        padding: 11px !important;
    }

    /* Tab icerik sarmallarinin yan bosluklari daraltilir — masaustunde 32px olan
       yan padding telefonda kullanilabilir genisligin ~%17'sini yiyordu */
    .icerik-tab > div[style*="max-width: 1500px"],
    .icerik-tab > div[style*="max-width:1500px"] {
        padding: 12px 10px !important;
    }

    /* ---------------------------------------------------------------------
       6) ICERIK EKRANI — masaustu bileseni gizle, mobil bileseni goster
       Grid ve takvim izgarasi DOM'da kalir (filtre/veri akisi onlarin uzerinden
       yurur), yalnizca gorunmez olurlar.
       --------------------------------------------------------------------- */
    /* Takvim izgarasi ve lejant tamamen gizlenebilir — saf HTML, gizliyken sorun cikarmaz. */
    #lmTakvimIzgaraSarmal,
    #lmTakvimLejant {
        display: none !important;
    }

    /* GRID: display:none DEGIL, ekran disina.
       dxDataGrid display:none bir kapta kurulunca olculerini hesaplayamiyor ve
       init sirasinda hata firlatabiliyor; hata try/catch'e dusunce grid'den sonra
       gelen mobil ilk-cizim kodu HIC calismiyordu ve kart listesi bos kaliyordu
       (grid dolu, "23 icerik" yaziyor ama tek kart yok). Ekran disinda tutulunca
       DevExtreme normal sekilde render eder, kullanici gormez, veri akisi surer. */
    #lmIcerikGridSarmal {
        position: absolute !important;
        left: -10000px !important;
        top: 0 !important;
        width: 900px !important;
        height: 1px !important;
        overflow: hidden !important;
        pointer-events: none !important;
        /* visibility:hidden BILEREK YOK — grid yukleyici parent zincirinde
           visibility:hidden gorunce "gizli parent" uyarisi veriyor. Ekran disi
           konum zaten yeterli. */
    }

    #lmMobilIcerikSarmal,
    #lmMobilAjandaSarmal {
        display: block !important;
    }

    /* Bos durum */
    .lm-mobil-bos {
        padding: 34px 18px;
        text-align: center;
        color: #94a3b8;
        font-size: 12.5px;
    }

    .lm-mobil-bos .ikon {
        font-size: 30px;
        display: block;
        margin-bottom: 8px;
        opacity: .55;
    }
}

/* Cok dar ekranlar */
@media (max-width: 480px) {
    .lm-mobil-altmenu-item {
        font-size: 10px;
    }

    .lm-mobil-kart-gorsel {
        width: 48px;
        height: 48px;
    }
}