/* ============================================================
   MWIN — Workroute MOBİL uygulama demosu (wr_mobile birebir)
   Kaynak: imgesoft-dev-wr_mobile — App/assets/styles/Custom.js,
   AppNavigator.js, MenuScreen/PlusMenuScreen/CalendarIndexScreen/
   CustomFlatList/ProfileScreen/LoginScreen (birebir değerler),
   ikonlar FontAwesome 6 solid (fonts/fa6/).
   Tüm uygulama stilleri .mwin kapsamında (site CSS'i ile çakışmasın).
   ============================================================ */
@import url('../fonts/fa6/fa6-solid.css?v=2');

/* ---- Web/Mobil değiştirme ---- */
.demo-switch {
    display: flex; gap: 4px; padding: 4px; width: max-content;
    margin: 0 auto 16px; border-radius: 999px; background: #ECEFF3;
    border: 1px solid #E4E8EF;
}
.demo-switch button {
    border: 0; background: transparent; border-radius: 999px;
    padding: 7px 24px; font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #7A8798;
    cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.demo-switch button.is-on {
    background: #c8102e; color: #fff; box-shadow: 0 6px 16px rgba(200, 16, 46, .28);
}
.mwrap[data-mode="web"] .mwin-wrap { display: none; }
.mwrap[data-mode="mobil"] .pwin-wrap { display: none; }
/* küçük ekranlarda yalnızca mobil simülasyon gösterilir; telefonda daha büyük */
@media (max-width: 1199px) {
    .mwrap .demo-switch { display: none; }
    .mwrap .mwin-wrap { display: flex !important; }
    .mwrap .pwin-wrap { display: none !important; }
}
@media (max-width: 767px) {
    .mwin-wrap { gap: 6px; }
    .mwin-wrap .hero-arrow { display: none; }
    .mwin { border-radius: 50px; }
    .mwin-vp { border-radius: 34px; }
    .m-homebar { width: 88px; }
}

/* ---- Telefon çerçevesi ---- */
.mwin-wrap {
    display: flex; gap: 14px; align-items: center; justify-content: center;
    width: 100%; margin-top: 10px;
    --mscale: .82; /* 390x850 vp -> ~320x697 ekran */
}.mwin {
    position: relative; flex: 0 0 auto;
    box-sizing: content-box; padding: 10px;
    width: calc(390px * var(--mscale)); height: calc(850px * var(--mscale));
    /* iPhone çerçevesi: titanyum bant (border-box gradyanı) + siyah bezel (padding-box) */
    border: 6px solid transparent;
    border-radius: 61px;
    corner-shape: squircle; /* sürekli eğrilik — Chrome/Edge 139+; desteklemeyende dairesel köşe */
    background:
        linear-gradient(160deg, #10141a, #05070a 45%, #0b0e13) padding-box,
        linear-gradient(155deg, #b6bdc9 0%, #454c5c 15%, #757e90 38%, #262b36 60%, #3c4353 80%, #99a1b0 100%) border-box;
    overflow: visible;
    box-shadow:
        0 0 0 1px #0d1015,
        inset 0 0 0 1px rgba(255, 255, 255, .07),
        0 8px 18px rgba(10, 15, 26, .20),
        0 30px 70px rgba(10, 15, 26, .38);
}
/* yan tuşlar: solda ses + susturma, sağda güç (bant dışına 1px taşar) */
.mwin::before {
    content: ""; position: absolute; left: -7px; top: 20%;
    width: 5px; height: 46%; border-radius: 3px 0 0 3px;
    background: linear-gradient(to bottom,
        #3d434e 0 7%, transparent 7% 13%,
        #3d434e 13% 38%, transparent 38% 44%,
        #3d434e 44% 69%, transparent 69% 100%);
    opacity: .9;
}
.mwin::after {
    content: ""; position: absolute; right: -7px; top: 30%;
    width: 5px; height: 13%; border-radius: 0 3px 3px 0;
    background: linear-gradient(#454c58, #23262e);
    opacity: .9;
}
.mwin-vp {
    position: absolute; top: 12px; left: 12px;
    width: 390px; height: 850px;
    /* zoom (transform: scale yerine): yerleşimin parçası olduğu için WebKit'in
       ölçeklenmiş overflow:hidden kırpma hatasına hiç girilmez — iOS Safari'de
       ekran içeriği çerçevenin dışına taşıyordu. WebKit/Chrome/Firefox 126+ destekler. */
    zoom: var(--mscale);
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* iOS metin şişirmesini kapat */
    background: #eeeeee; overflow: hidden; border-radius: 45px;
    corner-shape: squircle;
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
    font-size: 15px; line-height: 1.4; color: #000; text-align: left;
    user-select: none; cursor: default;
}
.mwin-vp * { box-sizing: border-box; }
.mwin-vp a { color: inherit; text-decoration: none; cursor: default; }
.mwin-vp button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; padding: 0; color: inherit; font: inherit; cursor: default; }
.mwin-vp i { font-style: normal; }
/* düğme renkleri öğe-resetinin ( specificity ) üstünde kalsın */
.mwin-vp .m-btn { background: #c8102e; }
.mwin-vp .m-btn-red { background: #c8102e; }
.mwin-vp .m-btn-grey { background: #cccccc; }
.mwin-vp .m-tile { background: #fff; }
.mwin-vp .m-fab { background: #c8102e; }
.mwin-vp .m-appbar button, .mwin-vp .m-tabbar button,
.mwin-vp .m-nav-back, .mwin-vp .m-nav-act, .mwin-vp .m-close { background: transparent; }
@media (max-width: 1560px) { .mwin-wrap { --mscale: .74; } }
@media (max-width: 1200px) { .mwin-wrap { --mscale: .68; } }
@media (max-width: 991px)  { .mwin-wrap { --mscale: .80; } }
/* küçük ekranlarda: telefon daha DOLGUN (mobilde daha büyük) */
@media (max-width: 767px)  { .mwin-wrap { --mscale: .78; } }
@media (max-width: 480px)  { .mwin-wrap { --mscale: .70; } }
@media (max-width: 400px)  { .mwin-wrap { --mscale: .60; } }

/* Otomatik turdaki sahte imleç */
.mwin-cursor {
    position: absolute; top: 0; left: 0; z-index: 14; opacity: 0; pointer-events: none;
    transition: transform .8s cubic-bezier(.35, .7, .25, 1), opacity .3s ease;
}
.mwin-cursor.is-on { opacity: 1; }
.mwin-cursor svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 2px 4px rgba(14, 22, 38, .35)); transition: transform .15s ease; }
.mwin-cursor.is-click svg { transform: scale(.8); }
.mwin-cursor.is-click::after {
    content: ""; position: absolute; left: -7px; top: -7px; width: 32px; height: 32px;
    border: 2px solid #fa6163; border-radius: 50%; animation: mwinClick .35s ease-out both;
}
@keyframes mwinClick { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mwin-cursor { display: none; } }

/* ---- Durum çubuğu (App.tsx: bg #c8102e, light-content) ---- */
.mwin-status {
    position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 12;
    background: #c8102e; color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; font-size: 13px; font-weight: 600;
}
.mwin-status .m-st-hole { width: 86px; height: 21px; border-radius: 12px; background: #000; box-shadow: inset 0 0 2px rgba(255,255,255,.10); position: absolute; left: 50%; top: 5px; margin-left: -43px; }
.m-st-hole::after { content: ""; position: absolute; right: 9px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3546, #0a0d13 70%); }

/* iPhone alt gesture bar */
.m-homebar {
    position: absolute; bottom: 7px; left: 50%; width: 118px; height: 5px;
    transform: translateX(-50%); border-radius: 3px; background: #171a21;
    opacity: .85; z-index: 13; pointer-events: none;
}
.mwin-status .m-st-right { display: flex; align-items: center; gap: 6px; font-size: 11px; }

/* ---- Ekran kökleri ---- */
.mscr { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background: #fff; }
.m-cont { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; overflow: hidden; display: flex; }
.m-cont > .ms-login, .m-cont > .ms-home, .m-cont > .ms-mod, .m-cont > .ms-profil, .m-cont > .ms-create {
    flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%;
}

/* ---- Ortak parçalar (Custom.js birebir) ---- */
.m-input {
    width: 90%; height: 50px; border: 1px solid #ccc; border-radius: 5px;
    display: flex; align-items: center; padding: 0 10px; background: #fff;
    font-size: 15px; color: #111;
}
.m-btn {
    width: 90%; height: 50px; border-radius: 5px; margin: 10px auto 0;
    background: #c8102e; color: #fff; font-size: 15px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
}
.m-btn-grey { flex: 1; height: 44px; background: #cccccc; color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
.m-btn-red { flex: 1; height: 44px; background: #c8102e; color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }

/* ---- Giriş ekranı (LoginScreen) ---- */
.ms-login { background: #fff; display: flex; flex-direction: column; align-items: center; }
.ms-login > img { width: 82%; margin-top: 150px; }
.ms-login .m-input { margin-top: 74px; }
.ms-login .m-pass { margin-top: 16px; display: flex; align-items: center; padding-right: 14px; }
.ms-login .m-pass > span { flex: 1; }
.ms-login .m-pass i { color: #6b7280; font-size: 16px; }
.ms-login .m-foot {
    width: 92%; margin-top: 14px; display: flex; align-items: center; justify-content: space-between;
    font-size: 15px;
}
.ms-login .m-check { display: flex; align-items: center; gap: 8px; }
.ms-login .m-check i {
    width: 20px; height: 20px; border-radius: 3px; background: #c8102e; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.ms-login .m-forgot { font-size: 15px; }

/* ---- Giriş (Home): üst lane app bar ---- */
.ms-home { background: #fff; display: flex; flex-direction: column; }
.m-appbar {
    height: 58px; flex: 0 0 auto; background: #fff; z-index: 2;
    display: flex; align-items: center;
    padding: 0 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.m-appbar button, .m-nav-back, .m-nav-act {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.m-appbar .m-firm { flex: 1; text-align: center; font-size: 16px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 8px; }

/* Takvim (CalendarIndexScreen watery) */
.m-cal { padding: 8px 14px 10px; border-bottom: 1px solid #ececec; background: #fff; }
.m-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; font-weight: 700; font-size: 15px; }
.m-cal-head i { font-size: 13px; color: #333; }
.m-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; font-size: 12px; color: #444; text-align: center; }
.m-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; margin-top: 4px; text-align: center; }
.m-cal-days span { position: relative; font-size: 15px; font-weight: 500; height: 22px; color: #222; }
.m-cal-days i.m-dot { position: absolute; left: 50%; bottom: -3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #00AAAF; }
.m-cal-days .is-today { color: #af0078; }
.m-cal-days .is-oncal { background: #00AAAF; color: #fff; border-radius: 50%; }
.m-cal-days .is-out { color: #c3c3c3; }

.m-agenda { flex: 1; overflow: hidden; position: relative; }
.m-ag-head { background: #f2f7f7; color: #7e7e7e; font-size: 13px; text-align: center; padding: 6px 10px; }
.m-ag-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; border-bottom: 1px solid #d9d9d9; }
.m-ag-l { width: 64px; flex: 0 0 auto; }
.m-ag-time { font-size: 14px; color: #000; }
.m-ag-dur { font-size: 12px; color: #7e7e7e; }
.m-ag-t { flex: 1; font-size: 16px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-ag-a { display: flex; gap: 14px; font-size: 15px; color: #000; }

/* Tab bar (AppNavigator HomeTabs) */
.m-tabbar {
    height: 60px; flex: 0 0 auto; background: #fff; border-top: 1px solid #ccc;
    display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
}
.m-tabbar i { font-size: 24px; color: #000; }
.m-tabbar .is-on i { color: #c8102e; }
.m-fab {
    position: absolute; right: 20px; bottom: 80px; width: 56px; height: 56px;
    border-radius: 28px; background: #c8102e; color: #fff; font-size: 26px; font-weight: 300;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3); z-index: 3;
}

/* ---- Bottom sheet'ler ---- */
.m-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 8; }
.m-scrim.is-open { opacity: 1; pointer-events: auto; }
.m-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
    background: #fff; border-radius: 20px 20px 0 0; overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(106%); transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.m-sheet.is-open { transform: none; }
.m-sheet--menu { height: 100%; border-radius: 20px 20px 0 0; }
.m-sheet--plus { height: 50%; }
.m-sheet--profil { height: 40%; }
.m-handle { width: 46px; height: 4px; border-radius: 2px; background: #e2e4e8; border: 1px solid #d7d9dd; margin: 8px auto 0; position: relative; }
.m-sheet--profil { background: #fff; }

/* ---- Ekranda grid (MenuScreen / PlusMenuScreen birebir) ---- */
.m-grid { flex: 1; background: #eeeeee; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; overflow: auto; }
.m-tile {
    height: 80px; border-radius: 15px; background: #fff; margin: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #c8102e;
}
.m-tile i { font-size: 24px; color: #c8102e; }
.m-tile span { margin-top: 5px; font-size: 16px; color: #c8102e; }
.m-sheethead { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 0 6px; font-size: 16px; font-weight: 700; background: #fff; border-radius: 20px 20px 0 0; }
.m-sheethead .m-close { position: absolute; right: 16px; top: 12px; font-size: 16px; color: #000; }

/* PROFİLİM sheet (soldaki 40%) */
.m-protitle { text-align: center; font-size: 18px; font-weight: 700; padding: 16px 0 4px; }
.m-protitle + .m-profallback { margin-top: 14px; }
.m-prolist { padding-top: 16px; }
.m-prorow { display: flex; align-items: center; margin: 10px 20px; font-size: 18px; }
.m-prorow i { font-size: 19px; width: 24px; }
.m-prorow span { margin-left: 10px; }
.m-pver { text-align: center; font-size: 15px; padding: 18px 0 22px; }
.m-sheet--profil { padding-bottom: 0; }
.m-sheet--profil .m-pver { margin-top: auto; }

/* ---- Modül listesi (CustomFlatList) ---- */
.ms-mod { background: #fff; display: flex; flex-direction: column; }
.m-nav {
    height: 58px; flex: 0 0 auto; background: #fff;
    display: flex; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); z-index: 2;
}
.m-nav-back { margin: 0 2px; }
.m-nav-back i { font-size: 20px; }
.m-nav-act { margin-right: 12px; }
.m-nav-act i { font-size: 22px; }
.m-nav-title { flex: 1; text-align: center; font-size: 16px; }
.m-filter { flex: 0 0 auto; overflow: hidden; max-height: 0; transition: max-height .4s ease; background: #fff; }
.m-filter.is-open { max-height: 420px; }
.m-flabel { font-size: 14px; font-weight: bold; margin: 12px 5% 6px; }
.m-select {
    width: 90%; margin: 0 5%; height: 44px; border: 1px solid #ccc; border-radius: 5px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
    font-size: 15px; color: #444;
}
.m-select i { font-size: 13px; color: #555; }
.m-frow { display: flex; gap: 14px; margin: 16px 5% 6px; }
.m-frow .m-btn-grey, .m-frow .m-btn-red { height: 42px; }
.m-search { flex: 0 0 auto; height: 50px; margin: 10px 5%; border: 1px solid #ccc; border-radius: 5px; display: flex; align-items: center; padding: 0 20px; color: #9a9a9a; background: #fff; font-size: 15px; }
.m-list { flex: 1; overflow: auto; padding-bottom: 130px; }
.m-item { padding: 10px; border-bottom: 1px solid #cccccc; }
.m-item:nth-child(odd) { background: #f8f9fa; }
.m-item:nth-child(even) { background: #fff; }
.m-line { display: flex; align-items: center; gap: 9px; }
.m-line .m-ico { flex: 0 0 auto; font-size: 12px; color: #000; }
.m-line .m-name { flex: 1; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-line .m-firm { flex: 0 0 auto; max-width: 38%; font-size: 14px; color: #5a6472; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-line .m-cat { flex: 0 0 auto; font-size: 14px; font-weight: 500; }
.m-line .m-chev { flex: 0 0 auto; font-size: 14px; color: #444; transition: transform .25s ease; }
.m-item.is-open .m-chev { transform: rotate(180deg); }
.m-detail { display: none; margin-top: 8px; }
.m-item.is-open .m-detail { display: block; }
.m-dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.m-dt th { background: #dddddd; font-weight: 800; text-align: left; padding: 4px 8px; }
.m-dt td { padding: 5px 8px; min-height: 30px; }
.m-dt tr.m-odd td { background: #f8f9fa; }
.m-dt tr.m-even td { background: #fff; }
.m-star { color: #FFDC42; display: inline-flex; gap: 1px; }
.m-total {
    position: absolute; left: 0; right: 0; bottom: 12px; min-height: 40px;
    background: #cccccc; border: 1px solid #cccccc;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px; z-index: 3;
}
.ms-mod .m-fab { bottom: 80px; }

/* ---- Profil (ProfileScreen) ---- */
.ms-profil { background: #eeeeee; display: flex; flex-direction: column; }
.m-proxlsx { flex: 1; overflow: auto; }
.m-personel { padding: 10px 0; }
.m-prow2 { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 14px; }
.m-prow2 b { font-weight: bold; font-size: 14px; }
.m-prow2 span { color: #222; }
.m-acc { border-bottom: 1px solid #cccccc; background: #fff; }
.m-acc > button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 14px; font-weight: bold; background: #fff; }
.m-acc .m-chev { font-size: 13px; color: #444; transition: transform .25s ease; }
.m-acc.is-open .m-chev { transform: rotate(180deg); }
.m-accbody { display: none; padding: 6px 0 12px; }
.m-acc.is-open .m-accbody { display: block; }
.m-accbody .m-input { margin: 8px auto; height: 44px; }
.m-accbody .m-btn { width: 90%; font-size: 18px; height: 50px; }
.m-prow2.m-odd, .m-dt tr.m-odd td, .m-item:nth-child(odd) { background: #f8f9fa; }
.m-prow2.m-even, .m-dt tr.m-even td, .m-item:nth-child(even) { background: #fff; }

/* ---- Etkinlik Ekle (CalendarCreate / RecordCreateScreen) ---- */
.ms-create { background: #eeeeee; display: flex; flex-direction: column; }
.m-form { flex: 1; overflow: auto; padding-bottom: 96px; }
.m-frlabel { font-size: 14px; font-weight: bold; margin: 12px 5% 6px; }
.m-textarea {
    width: 90%; margin: 0 5%; height: 100px; border: 1px solid #ccc; border-radius: 5px;
    padding: 10px; background: #fff; font-size: 15px; color: #444; display: block;
}
.m-fpair { display: flex; gap: 12px; margin: 0 5%; }
.m-fpair > div { flex: 1; }
.m-fpair .m-select, .m-fpair .m-input { width: 100%; margin: 0; height: 44px; }
.m-fbtns {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; gap: 14px; padding: 10px 5%;
    background: #eeeeee; box-shadow: 0 -1px 3px rgba(0, 0, 0, .08);
}
.m-fbtns .m-btn-grey, .m-fbtns .m-btn-red { flex: 1; height: 44px; }