/* ==========================================================================
   MUBA MEDIKAL — mobile-app.css
   SHELL & NAVIGATION (app chrome) + CONTENT (mobile layout).
   Desktop (>=821px) MUST be visually unchanged.
   ========================================================================== */

/* ===== SHELL ===== */

/* --- Default (desktop >=821px): all app chrome hidden --- */
.m-appbar,
.m-backdrop,
.m-drawer,
.m-tabbar{ display:none; }

@media (max-width:820px){

  /* Hide the desktop topbar + nav (parent adds .m-desktop-only to both) */
  .m-desktop-only{ display:none !important; }

  /* Global mobile hardening */
  html{ -webkit-text-size-adjust:100%; }
  body{
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    /* clear fixed app-bar (top) + fixed tab-bar (bottom) */
    padding-top: calc(56px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  body.m-lock{ overflow:hidden !important; }

  /* ---------------------------------------------------------------- APP-BAR */
  .m-appbar{
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid #E4EAF0;
    transition:box-shadow .2s ease, background .2s ease;
  }
  .m-appbar.is-scrolled{
    box-shadow:0 6px 20px -10px rgba(12,33,54,.28);
    background:rgba(255,255,255,.94);
  }
  .m-appbar__logo{ display:flex; align-items:center; height:100%; }
  .m-appbar__logo img{ height:22px; width:auto; display:block; }

  /* Hamburger */
  .m-burger{
    -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
    width:44px; height:44px; border-radius:12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:transparent; padding:0;
    transition:background .2s ease, transform .12s ease;
  }
  .m-burger span{
    display:block; width:22px; height:2px; border-radius:2px; background:var(--ink,#0C2136);
    transition:transform .25s ease, opacity .2s ease;
  }
  .m-burger:active{ transform:scale(.92); background:rgba(12,33,54,.06); }
  .m-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .m-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .m-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---------------------------------------------------------------- BACKDROP */
  .m-backdrop{
    display:block; position:fixed; inset:0; z-index:1100;
    background:rgba(7,19,34,.5);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  }
  .m-backdrop.is-open{ opacity:1; visibility:visible; }

  /* ---------------------------------------------------------------- DRAWER */
  .m-drawer{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; z-index:1200;
    height:100dvh; width:min(84vw, 340px);
    padding: calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    background:#FFFFFF;
    box-shadow:-16px 0 40px -12px rgba(12,33,54,.35);
    transform:translateX(105%);
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .m-drawer.is-open{ transform:translateX(0); }

  .m-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .m-drawer__logo{ height:24px; width:auto; }
  .m-drawer__close{
    -webkit-appearance:none; appearance:none; border:0; background:#F1F4F7; cursor:pointer;
    width:44px; height:44px; border-radius:12px; color:var(--ink,#0C2136);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .12s ease;
  }
  .m-drawer__close:active{ transform:scale(.92); background:#E4EAF0; }

  .m-drawer__links{ display:flex; flex-direction:column; gap:2px; margin:6px 0 14px; }
  .m-drawer__link{
    display:flex; align-items:center; min-height:52px; padding:0 14px;
    font-size:16.5px; font-weight:700; color:#2A3B4C !important; border-radius:13px;
    transition:background .18s ease, color .18s ease, transform .12s ease;
  }
  .m-drawer__link:active{ transform:scale(.985); background:#F1F4F7; }
  .m-drawer__link.is-active{
    color:var(--accent,#E23744) !important;
    background:rgba(226,55,68,.08);
  }

  .m-drawer__cta{
    display:flex; align-items:center; justify-content:center; gap:9px;
    margin-top:auto; min-height:54px; padding:0 20px;
    background:var(--accent,#E23744); color:#fff !important; font-weight:800; font-size:16px;
    border-radius:14px; box-shadow:0 14px 30px -10px rgba(226,55,68,.6);
    transition:transform .12s ease, box-shadow .2s ease;
  }
  .m-drawer__cta:active{ transform:scale(.97); box-shadow:0 8px 18px -10px rgba(226,55,68,.6); }

  .m-drawer__foot{ margin-top:18px; padding-top:16px; border-top:1px solid #EEF2F6; display:flex; flex-direction:column; gap:6px; }
  .m-drawer__brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:var(--ink,#0C2136); }
  .m-drawer__contact{ font-size:15px; font-weight:700; color:var(--ink,#0C2136) !important; }
  .m-drawer__contact--muted{ font-weight:600; color:#6B7B8B !important; }

  /* ---------------------------------------------------------------- TAB BAR */
  .m-tabbar{
    display:flex; align-items:stretch; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid #E4EAF0;
    box-shadow:0 -8px 24px -14px rgba(12,33,54,.3);
  }
  .m-tab{
    flex:1 1 0; min-width:0; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding-top:8px; min-height:44px;
    color:#8494A3 !important; text-decoration:none;
    transition:color .2s ease, transform .12s ease;
  }
  .m-tab:active{ transform:scale(.9); }
  .m-tab__ico{ display:flex; align-items:center; justify-content:center; height:24px; }
  .m-tab__lbl{ font-size:10.5px; font-weight:700; letter-spacing:.1px; line-height:1; }
  .m-tab.is-active{ color:var(--accent,#E23744) !important; }
  .m-tab.is-active .m-tab__ico svg{ fill:rgba(226,55,68,.12); }
  .m-tab.is-active::before{
    content:""; position:absolute; top:0; width:22px; height:3px; border-radius:0 0 3px 3px;
    background:var(--accent,#E23744);
  }

  /* Center elevated FAB action */
  .m-tab--fab{ justify-content:flex-end; padding-bottom:8px; color:var(--accent,#E23744) !important; }
  .m-fab{
    position:absolute; top:-20px;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent,#E23744); color:#fff !important;
    box-shadow:0 12px 26px -8px rgba(226,55,68,.7), 0 0 0 5px #fff;
    transition:transform .14s ease, box-shadow .2s ease;
  }
  .m-tab--fab:active .m-fab{ transform:scale(.9); }
  .m-tab__lbl--fab{ margin-top:auto; color:var(--accent,#E23744) !important; }
  .m-tab--fab.is-active::before{ display:none; }
}

/* Reduced motion: honor user preference */
@media (prefers-reduced-motion: reduce){
  .m-drawer, .m-backdrop, .m-burger span, .m-appbar, .m-tab, .m-fab{ transition:none !important; }
}

/* ===== CONTENT ===== */
/* Muba Medikal — mobile "native app" tuning for page CONTENT & COMPONENTS.
   Scope: heroes, sections, cards, grids, forms, footer. NOT the app shell.
   Because the markup is styled with inline style="..." attributes, these rules
   lean on attribute-substring selectors + !important to win over inline styles.
   Desktop (>=821px) is untouched. */

@media (max-width:820px){

  /* ---- 0. OVERFLOW KILLERS ------------------------------------------------ */
  .muba-grid-2 > *, .muba-grid-3 > *{ min-width:0 !important; }
  header img, section img, footer img{ max-width:100% !important; height:auto; }
  header iframe, section iframe{ max-width:100% !important; }

  /* ---- 1. SECTION RHYTHM (kills the giant dark voids) --------------------- */
  header  [style*="max-width:1240px"],
  section[style*="max-width:1240px"],
  section  [style*="max-width:1240px"],
  footer   [style*="max-width:1240px"]{
    padding-left:18px  !important;
    padding-right:18px !important;
    padding-top:46px   !important;
    padding-bottom:46px!important;
  }
  footer [style*="padding:20px 28px"]{ padding:16px 18px !important; }

  .muba-grid-2{ gap:30px !important; }
  .muba-grid-3{ gap:16px !important; }

  div[style*="repeating-linear-gradient(90deg"]{ display:none !important; }

  /* ---- 2. TYPOGRAPHY SCALE ----------------------------------------------- */
  header h1{ font-size:clamp(27px,7vw,33px) !important; line-height:1.08 !important; letter-spacing:-.02em; }
  section h2, header h2{ font-size:clamp(23px,6vw,29px) !important; line-height:1.15 !important; }
  section h3{ font-size:19px !important; line-height:1.25 !important; }
  header p{ font-size:16px !important; line-height:1.6 !important; }
  p[style*="font-size:17"], p[style*="font-size:18"]{ font-size:16px !important; line-height:1.62 !important; }

  /* ---- 3. HERO ----------------------------------------------------------- */
  header a[href^="#"]{
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    min-height:48px !important;
    padding:14px 20px !important;
    box-sizing:border-box;
  }
  header [style*="border-radius:24px"][style*="padding:26px"]{ padding:18px !important; }
  header [style*="gap:40px"]{ gap:22px !important; }

  /* ---- 4. CARDS & TILES --------------------------------------------------- */
  [style*="padding:64px 56px"], [style*="padding:56px 52px"]{ padding:28px 20px !important; }
  [style*="padding:52px 40px"]{ padding:28px 20px !important; }
  [style*="padding:44px 40px"]{ padding:26px 20px !important; }
  [style*="padding:34px 28px"]{ padding:24px 20px !important; }
  [style*="padding:32px 34px"]{ padding:24px 22px !important; }
  [style*="padding:32px"]{ padding:24px !important; }
  [style*="padding:30px"]{ padding:22px !important; }
  [style*="padding:28px"]{ padding:22px !important; }
  [style*="padding:26px"]{ padding:20px !important; }

  [style*="font-size:38px"]{ font-size:30px !important; }
  [style*="font-size:40px"]{ font-size:28px !important; }

  section [style*="aspect-ratio"] img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  section [style*="object-fit:contain"]{ object-fit:contain !important; }

  [style*="right:-14px"]{ right:0 !important; top:-10px !important; }
  [style*="right:-18px"]{ right:2px !important; }

  /* ---- 5. LEAD / DEMO FORM (partials/demo-form) -------------------------- */
  form[action$="talep-gonder"]{
    grid-template-columns:1fr !important;
    gap:12px !important;
    max-width:100% !important;
    margin-top:22px !important;
  }
  form[action$="talep-gonder"] input,
  form[action$="talep-gonder"] button{
    width:100% !important;
    font-size:16px !important;
    min-height:50px !important;
    padding:14px 16px !important;
    white-space:normal !important;
    box-sizing:border-box;
  }
  form[action$="talep-gonder"] button{ padding:15px 16px !important; }
  form[action$="talep-gonder"] input:focus{
    border-color:var(--cyan) !important;
    background:rgba(255,255,255,.15) !important;
  }

  /* ---- 6. IN-CARD CTA BUTTONS (promo / demo bands) ----------------------- */
  [style*="140% at 85%"] a,
  [style*="linear-gradient(160deg,#0F2A44"] > a,
  [style*="linear-gradient(160deg,#0F2A44"] a[href$="iletisim"]{
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    min-height:48px !important;
    margin-top:14px !important;
    white-space:normal !important;
    text-align:center;
    box-sizing:border-box;
  }
  section [style*="justify-content:space-between"] > a[href="#demo"],
  section [style*="justify-content:space-between"] > a[href$="iletisim"]{
    width:100% !important;
    justify-content:center !important;
    margin-top:4px;
  }

  /* ---- 7. OPTIONAL NATIVE ACCORDION (dense content) ---------------------- */
  details.m-accordion{
    background:#fff;
    border:1px solid #E4EAF0;
    border-radius:14px;
    margin:0 0 12px;
    overflow:hidden;
  }
  details.m-accordion > summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    font-family:'Space Grotesk',system-ui,sans-serif;
    font-weight:700;
    font-size:16px;
    color:#0C2136;
    min-height:52px;
    box-sizing:border-box;
  }
  details.m-accordion > summary::-webkit-details-marker{ display:none; }
  details.m-accordion > summary::after{
    content:"";
    flex:0 0 auto;
    width:10px; height:10px;
    border-right:2px solid #17B6C4;
    border-bottom:2px solid #17B6C4;
    transform:rotate(45deg);
    transition:transform .2s ease;
  }
  details.m-accordion[open] > summary::after{ transform:rotate(-135deg); }
  details.m-accordion > summary + *{ padding:0 18px 18px; }
  details.m-accordion p{ font-size:15px !important; line-height:1.6 !important; color:#4E606F; margin:0 0 10px; }
  details.m-accordion.m-accordion--dark{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
  details.m-accordion.m-accordion--dark > summary{ color:#fff; }
  details.m-accordion.m-accordion--dark p{ color:#B8C6D4; }

  /* ---- 8. FOOTER --------------------------------------------------------- */
  footer .muba-grid-3{ gap:26px !important; }
  footer a{ display:inline-block; min-height:32px; line-height:1.9; }

}

/* ============================ FINE-TUNE <=480px ========================== */
@media (max-width:480px){
  header  [style*="max-width:1240px"],
  section[style*="max-width:1240px"],
  section  [style*="max-width:1240px"],
  footer   [style*="max-width:1240px"]{
    padding-top:38px   !important;
    padding-bottom:38px!important;
    padding-left:16px  !important;
    padding-right:16px !important;
  }
  header h1{ font-size:clamp(25px,8vw,30px) !important; }
  section h2, header h2{ font-size:clamp(22px,7vw,26px) !important; }

  [style*="padding:64px 56px"], [style*="padding:56px 52px"],
  [style*="padding:52px 40px"], [style*="padding:44px 40px"]{ padding:24px 18px !important; }
  [style*="padding:34px 28px"], [style*="padding:32px 34px"],
  [style*="padding:32px"], [style*="padding:30px"], [style*="padding:28px"]{ padding:20px !important; }
  [style*="padding:26px"]{ padding:18px !important; }

  .muba-grid-2{ gap:24px !important; }
  .muba-grid-3{ gap:14px !important; }
  header [style*="gap:40px"]{ gap:18px !important; }
}