/* EsnafCebinde telefon arayüzü (docs/tasarim/telefon/telefon.html, PLAN.md; ürün sahibinin onayı 2026-10-24).
   Uygulamada (Android/iOS) ve 1024 px altındaki sitede açılır; masaüstü değişmez. Yönetim hesabı eski telefon kabuğunda kalır:
   kurallar yalnızca .app-shell--m altında geçerlidir (AppShell). design-system.css'ten sonra yüklenir; belirteçleri oradandır.
   Kabuk: üst çubuk (PhoneTopBar) ve bölüm değiştirme menüsü (AreaSwitchMenu), yüzen alt menü (AppBottomNav), canlı çubuk
   (FoodActiveOrderBar, UstaActiveJobBar), karşılama (PhoneHome) ve Hesabım (AccountHub). Renk: üst çubuk ve alt menü sitenin
   paletinde bölüm renginde (Çarşı ve karşılama lacivert, Yemek koyu kahve, Usta koyu yeşil); içerik açık zeminde. */

.pbar { display: none; }

@media (max-width: 1023.98px) {
  /* ------------------------------------------------------------ Bölüm belirteçleri */
  .app-shell--m {
    --m-bar: var(--carsi-900);
    --m-acc: var(--saffron-400);
    --m-cta: var(--accent-500);
    --m-cta-ink: #241200;
    --m-link: var(--primary-500);
    --m-badge: var(--yemek-ember);
    --m-badge-ink: #fff;
    --m-nav-h: 72px;
    --m-nav-gap: 14px;
    /* Yüzen alt menünün kapladığı yükseklik: sayfa altı boşluğu, kaydet şeritleri ve bildirimler bunun üstünde durur. */
    --bottom-nav-height: calc(var(--m-nav-h) + var(--m-nav-gap));
    --topbar-height: 56px;
    /* Üst çubuğun rengi: bölüm rengi; ortak sayfalarda (profil, bildirimler, destek, Hesabım) lacivert (telefon.html → Ortak). */
    --m-top: var(--m-bar);
    /* Ortadaki yükseltilmiş düğme (Ürün ara, Sepetim, Usta çağır) menünün üstüne taşar; menünün hemen üstünde yüzen eylem
       çubukları (sepet, Siparişi ver, talep eylemleri) bu kadar daha yukarıda durur. Yoksa düğmenin üstüne biniyordu (2026-10-28). */
    --m-fab-rise: 0px;
  }
  .app-shell--m:has(.mobile-bottom-nav .action-create) { --m-fab-rise: 30px; }
  .app-shell--m.app-shell--shared { --m-top: var(--carsi-900); }
  .app-shell--m.app-shell--area-yemek {
    --m-bar: #2a1305;
    --m-acc: #ffb59b;
    --m-cta: var(--yemek-ember);
    --m-cta-ink: #fff;
    --m-link: var(--yemek-ember);
    --m-badge: var(--accent-500);
    --m-badge-ink: #241200;
  }
  .app-shell--m.app-shell--area-usta {
    --m-bar: #0c302c;
    --m-acc: var(--mint-400);
    --m-cta: var(--mint-600);
    --m-cta-ink: #fff;
    --m-link: var(--mint-600);
  }
  [data-theme="dark"] .app-shell--m.app-shell--area-usta { --m-link: var(--mint-400); }
  [data-theme="dark"] .app-shell--m { --m-link: var(--primary-300); }
  [data-theme="dark"] .app-shell--m.app-shell--area-yemek { --m-link: #ff9a78; }
  /* design-system.css eski telefon çubuğuna göre .app-shell:has(.topbar .topbar-address-row) ile 108–156 px veriyordu; aynı özgüllükte
     daha sonra yüklenen bu kural telefon çubuğunun gerçek yüksekliğini koyar. */
  .app-shell.app-shell--m.app-shell--topnav { --topbar-height: 56px; }
  .app-shell.app-shell--m.app-shell--topnav:has(.pbar__addr) { --topbar-height: 98px; }

  /* Masaüstü üst çubuğu telefonda yerini PhoneTopBar'a bırakır (bileşenleri çizilmeye devam eder; sayaçlar ortak durumdadır). */
  .app-shell--m .topbar { display: none; }

  /* ------------------------------------------------------------ Üst çubuk */
  .app-shell--m .pbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 960;
    padding-top: var(--safe-top);
    background: var(--m-top);
    color: #eaf1fb;
  }
  .pbar__row { height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; }
  .pbar--title .pbar__row { padding-left: 4px; }
  .pbar--title.pbar--noback .pbar__row { padding-left: 16px; }
  .pbar__brand { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 44px; }
  .pbar__brand .brand-logo__word { height: 24px; width: auto; }
  .pbar__ib {
    width: 40px; height: 40px; flex: none; margin-left: 4px;
    display: grid; place-items: center; position: relative;
    border: 0; border-radius: 50%; padding: 0;
    background: rgba(255, 255, 255, .08); color: inherit; text-decoration: none; cursor: pointer;
    transition: transform .12s ease-out, background-color .15s;
  }
  .pbar__ib:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
  .pbar__ib:active { transform: scale(.94); }
  .pbar__ib .icon { width: 21px; height: 21px; }
  .pbar__back { margin: 0 6px 0 0; background: transparent; }
  .pbar__badge {
    position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--m-badge); color: var(--m-badge-ink); font-size: 10px; font-weight: 700; line-height: 1;
    display: grid; place-items: center; box-shadow: 0 0 0 2px var(--m-top); font-variant-numeric: tabular-nums;
  }
  /* Sekme sayfalarında başlığın solundaki bölüm simgesi (Mesajlar, Bildirimler, Tekliflerim). */
  .pbar__mark {
    width: 32px; height: 32px; margin-right: 10px; flex: none; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); color: var(--m-acc);
  }
  /* Üst çubukta yazılı sayfa eylemi (ör. "Tümü okundu", "Yeni talep"). */
  .pbar__pill {
    height: 36px; margin-left: 6px; padding: 0 12px; border: 0; border-radius: 999px; flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .12); color: #fff; font: 600 13px/1 var(--font-family); text-decoration: none; cursor: pointer;
  }
  .pbar__pill:hover { background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none; }
  .pbar__pill:disabled { opacity: .5; cursor: default; }
  .pbar__ib:disabled { opacity: .5; cursor: default; }
  .pbar__avatar {
    width: 36px; height: 36px; margin-left: 6px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
  }
  .pbar__avatar:hover { text-decoration: none; background: rgba(255, 255, 255, .22); }
  .pbar__login {
    height: 36px; margin-left: 6px; padding: 0 14px; border: 0; border-radius: 999px; flex: none;
    background: #fff; color: var(--carsi-900); font: 700 14px/1 var(--font-family); cursor: pointer;
  }
  .pbar__wallet {
    height: 34px; margin-left: 4px; padding: 0 10px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  .pbar__wallet:hover { text-decoration: none; color: #fff; }
  .pbar__wallet.is-low { background: rgba(242, 140, 0, .26); color: #ffd48a; }
  .pbar__title {
    flex: 1; min-width: 0; margin: 0; color: #fff;
    font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pbar__title small {
    display: block; font: 400 13px/1.3 var(--font-family); letter-spacing: 0; color: rgba(255, 255, 255, .7);
    overflow: hidden; text-overflow: ellipsis;
  }
  .pbar__search { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 8px 10px 12px; }
  .pbar__search > .icon { position: absolute; left: 24px; top: 13px; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
  .pbar__search input {
    flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 40px; border: 0; border-radius: 12px;
    background: #fff; color: #101828; font: 400 16px/1 var(--font-family);
  }
  .pbar__search input:focus { outline: 2px solid var(--m-acc); outline-offset: 1px; }

  /* Yemek'te teslimat adresi: çubuğun altında tek satır ("Teslimat: Ev · Sincan ⌄"). */
  .pbar__addr { padding: 0 12px 2px; }
  .paddr { display: flex; position: relative; min-width: 0; }
  .paddr .topbar-address {
    min-height: 40px; max-width: 100%; padding: 0 4px; gap: 6px;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: rgba(255, 255, 255, .72);
  }
  .paddr .topbar-address:hover { box-shadow: none; }
  .paddr .topbar-address__icon, .paddr .topbar-address__chevron { color: currentColor; }
  .paddr .topbar-address__text { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
  .paddr .topbar-address__label { font-size: 13px; font-weight: 400; color: inherit; flex: none; }
  .paddr .topbar-address__value { font-size: 13px; font-weight: 600; color: #fff; }
  .paddr .topbar-address--empty { border: 0; }
  .paddr .topbar-address--empty .topbar-address__value { color: var(--m-acc); }
  /* Karşılamadaki hap */
  .paddr--pill { margin-top: 12px; }
  .paddr--pill .topbar-address {
    min-height: 40px; padding: 0 12px 0 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); color: #fff;
  }
  .paddr--pill .topbar-address__label { display: none; }
  /* Liste satırın/hapın hemen altında açılır. Ortak kural paneli bu genişlikte position: fixed yapar; orada top: 100% ekran
     yüksekliği demektir ve panel ekranın altına düşüyordu (Yemek çubuğu, karşılama, Usta; 2026-10-26). */
  .paddr .topbar-address__panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: auto; width: min(358px, calc(100vw - 32px)); min-width: 0;
  }

  /* ------------------------------------------------------------ Bölüm değiştirme (üst çubuktan aşağı açılır) */
  .aswitch { flex: 0 1 auto; min-width: 0; margin-right: auto; }
  .aswitch__btn {
    display: inline-flex; align-items: center; gap: 9px; max-width: 100%; height: 44px; padding: 0 12px 0 5px;
    border: 0; border-radius: 14px; background: rgba(255, 255, 255, .07); color: #fff; cursor: pointer;
    transition: background-color .15s;
  }
  .aswitch__btn:hover, .aswitch__btn.is-open { background: rgba(255, 255, 255, .12); }
  .aswitch__img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
  .aswitch__name { font: 700 20px/1.2 var(--font-display); letter-spacing: -0.015em; white-space: nowrap; }
  .aswitch__chev { color: rgba(255, 255, 255, .7); transition: transform .2s ease-out; }
  .aswitch__btn.is-open .aswitch__chev { transform: rotate(180deg); color: #fff; }
  .aswitch__scrim {
    position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--safe-top) + 56px); z-index: 1;
    background: rgba(6, 10, 18, .5); animation: m-fade .15s ease-out;
  }
  .aswitch__menu {
    position: fixed; left: 0; right: 0; top: calc(var(--safe-top) + 56px); z-index: 2;
    padding: 4px 8px 12px; border-radius: 0 0 24px 24px;
    background: var(--m-top); box-shadow: 0 18px 34px rgba(6, 10, 18, .35);
    animation: m-drop .18s ease-out;
  }
  .aswitch__cap { padding: 10px 12px 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
  .aswitch__row {
    display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 12px; border-radius: 16px;
    color: #fff; text-decoration: none;
  }
  .aswitch__row:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
  .aswitch__row.is-current { background: rgba(255, 255, 255, .1); }
  .aswitch__row img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
  .aswitch__tx { flex: 1; min-width: 0; line-height: 1.3; }
  .aswitch__tx b { display: block; font-size: 17px; font-weight: 600; }
  .aswitch__tx small { font-size: 13px; color: rgba(255, 255, 255, .7); }
  .aswitch__check { color: var(--m-acc); }
  .aswitch__go { color: rgba(255, 255, 255, .55); }
  .aswitch__live, .parea__live {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; flex: none;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .aswitch__live::before, .parea__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-400); }
  .aswitch__live.is-hot, .parea__live.is-hot { background: var(--accent-500); color: #241200; }
  .aswitch__live.is-hot::before, .parea__live.is-hot::before { background: #241200; }

  /* ------------------------------------------------------------ Alt menü: yüzen, cam zemin, ortada taşan ana düğme */
  .app-shell--m .mobile-bottom-nav {
    left: 10px; right: 10px; bottom: calc(var(--m-nav-gap) + var(--safe-bottom));
    height: var(--m-nav-h); padding: 0 6px; border-radius: 26px;
    background: color-mix(in srgb, var(--m-bar) 93%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 16px 36px rgba(6, 10, 18, .34), inset 0 1px 0 rgba(255, 255, 255, .09);
    align-items: center;
  }
  .app-shell--m .mobile-bottom-nav--home { left: 44px; right: 44px; }
  .app-shell--m .mobile-bottom-nav .nav-item {
    height: 100%; gap: 4px; padding-top: 2px;
    color: rgba(234, 241, 251, .6); font-size: 10.5px; letter-spacing: .01em; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .app-shell--m .mobile-bottom-nav .nav-item .icon { width: 22px; height: 22px; position: relative; z-index: 1; }
  .app-shell--m .mobile-bottom-nav .nav-item:hover { color: #fff; }
  .app-shell--m .mobile-bottom-nav .nav-item::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 30px; margin: -24px 0 0 -26px;
    border-radius: 15px; background: transparent; transition: background-color .18s ease-out;
  }
  .app-shell--m .mobile-bottom-nav .nav-item.active { color: #fff; font-weight: 700; }
  .app-shell--m .mobile-bottom-nav .nav-item.active .icon { color: var(--m-acc); }
  .app-shell--m .mobile-bottom-nav .nav-item.active::before { background: color-mix(in srgb, var(--m-acc) 22%, transparent); }
  .app-shell--m .mobile-bottom-nav .nav-item.active::after {
    content: ""; position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--m-acc);
  }
  .app-shell--m .mobile-bottom-nav .nav-item .badge-dot {
    top: calc(50% - 26px); left: calc(50% + 5px); z-index: 2; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
    background: var(--m-badge); color: var(--m-badge-ink); box-shadow: 0 0 0 2px var(--m-bar);
  }
  .app-shell--m .mobile-bottom-nav .nav-item.action-create { color: #fff; }
  .app-shell--m .mobile-bottom-nav .nav-item.action-create::before, .app-shell--m .mobile-bottom-nav .nav-item.action-create::after { display: none; }
  .app-shell--m .mobile-bottom-nav .nav-item.action-create .create-icon-bubble {
    width: 58px; height: 58px; margin-top: -34px; border: 0;
    background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--m-cta) 62%, #fff) 0%, var(--m-cta) 58%, color-mix(in srgb, var(--m-cta) 82%, #000) 100%);
    color: var(--m-cta-ink);
    box-shadow: 0 0 0 5px var(--m-bar), inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px color-mix(in srgb, var(--m-cta) 45%, transparent);
  }
  .app-shell--m .mobile-bottom-nav .nav-item.action-create .create-icon-bubble .icon { width: 26px; height: 26px; color: inherit; }
  /* Yemek sepeti: yuvarlakta adet rozeti, altında tutar (2026-10-31; ayrı "Sepeti gör" çubuğu kalktı). */
  .app-shell--m .mobile-bottom-nav .nav-item.action-create .create-icon-bubble { position: relative; }
  .app-shell--m .mobile-bottom-nav .nav-cart-count {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    display: inline-grid; place-items: center; font: 800 12px/1 var(--font-display); font-variant-numeric: tabular-nums;
    background: #fff; color: var(--m-cta); box-shadow: 0 0 0 2px var(--m-cta), 0 4px 10px rgba(0, 0, 0, .25);
  }
  .app-shell--m .mobile-bottom-nav .nav-item.action-create.has-cart .nav-label {
    font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em;
  }

  /* Akış ekranı (PhoneBar HideNav): adım adım form ve sabit eylemli ayrıntıda alt menü ve canlı kart yok; sayfa kendi eylemini taşır. */
  .app-shell--m.app-shell--flow .mobile-bottom-nav, .app-shell--m.app-shell--flow .live-strips { display: none; }
  .app-shell--m.app-shell--flow { --bottom-nav-height: 0px; }

  /* ------------------------------------------------------------ Canlı çubuk: alt menünün üstünde yüzen beyaz kart */
  .app-shell--m .live-strips {
    position: fixed; left: 12px; right: 12px; z-index: 940;
    bottom: calc(var(--safe-bottom) + var(--m-nav-gap) + var(--m-nav-h) + 30px);
    display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; background: none;
    pointer-events: none;
  }
  .app-shell--m .live-strips > * { pointer-events: auto; }
  .app-shell--m .live-strips .faob, .app-shell--m .live-strips .uajb {
    width: 100%; max-width: none; margin: 0; min-height: 60px; padding: 8px 8px 8px 10px; gap: 12px;
    border: 1px solid var(--border-color); border-radius: 18px;
    background: var(--bg-surface); color: var(--text-main); box-shadow: 0 10px 28px rgba(13, 21, 36, .22);
  }
  .app-shell--m .live-strips .faob__icon, .app-shell--m .live-strips .uajb__icon { flex-basis: 40px; height: 40px; }
  .app-shell--m .live-strips .faob__text b, .app-shell--m .live-strips .uajb__text b { font-size: 15px; font-weight: 600; }
  .app-shell--m .live-strips .faob__text small, .app-shell--m .live-strips .uajb__text small { font-size: 13px; }
  .app-shell--m .live-strips .faob__go, .app-shell--m .live-strips .uajb__go {
    min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--m-bar); color: #fff; font-size: 14px;
  }
  .app-shell--m .live-strips .faob__go .icon, .app-shell--m .live-strips .uajb__go .icon { display: none; }
  /* İki süren iş (sipariş ve usta) tek kartta iki satırdır; üst üste iki kart ekranın üçte birini kaplıyordu. */
  .app-shell--m .live-strips:has(> * + *) {
    gap: 0; overflow: hidden; pointer-events: auto;
    border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-surface); box-shadow: 0 10px 28px rgba(13, 21, 36, .22);
  }
  .app-shell--m .live-strips:has(> * + *) .faob, .app-shell--m .live-strips:has(> * + *) .uajb {
    min-height: 56px; border: 0; border-radius: 0; box-shadow: none;
  }
  .app-shell--m .live-strips:has(> * + *) > * + * { border-top: 1px solid var(--border-color); }
  /* Kart açıkken sayfanın sonu kartın altında kalmasın; sohbet, tam ekran harita ve kaydet şeridi olan sayfalarda kart çıkmaz. */
  .app-shell--m:has(.live-strips > *) .app-shell__content { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 112px); }
  .app-shell--m:has(.chat-layout, .map-container--full, .sticky-actions) .live-strips { display: none; }

  /* ------------------------------------------------------------ Sayfanın eylem çubuğu (ortak .sticky-actions)
     Her sayfada aynı yerde, ekranın altına sabit (position: fixed): alt menü görünürken menünün ve ortadaki yükseltilmiş düğmenin
     hemen üstünde yüzen kart (sepetin "Siparişi ver" şeridi, usta profilinin "Teklif iste" çubuğu gibi), akış ekranında (alt menü
     yok: Ürün ara ve Usta çağır sihirbazları) ekranın dibinde tam genişlik şerit. Ortak kural önceden yapışkandı (position: sticky)
     ve çubuk yalnız kendi kapsayıcısının (form, kart, sayfa sütunu) içinde kayıyordu: sayfanın sonuna inince 36–182 px yukarı
     kayıp ekranın ortasında duruyor, formun içindeki çubuk alt menünün arkasına giriyor, ortadaki yükseltilmiş düğme de çubuğun
     üstüne biniyordu (ürün sahibi 2026-10-29: "Butonlar kayabiliyor, farklı yerlerde gözükebiliyor";
     docs/denetim/ARAYUZ_DENETIMI_2026-10-29-butonlar.md). Sayfanın sonu ve odaklanan alan çubuğun altında kalmasın diye içerik
     alt boşluğu ve kaydırma payı çubuğun kapladığı yer kadardır: platform-ui.js çubuğun üst kenarından ekranın altına kadarki
     yüksekliği --m-actions-space'e yazar (ölçülemezse çubuk ~96 px sayılır). Çerez kartı, bildirimler (toast) ve tabletteki sohbet
     düğmesi çubuğun üstünde açılır; çubuğu ve ortadaki düğmeyi örtmez. Telefonda gizli kapsayıcıdaki (m-off) çubuk sayılmaz.
     Masaüstü değişmez (design-system.css: akışta ya da uzun formda yüzen kaydet şeridi). */
  .app-shell--m { --m-actions-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-fab-rise) + 6px); }
  .app-shell--m.app-shell--flow { --m-actions-bottom: 0px; }
  .app-shell--m .sticky-actions {
    position: fixed; left: 10px; right: 10px; bottom: var(--m-actions-bottom); z-index: 950;
    margin: 0; padding: 10px; border: 1px solid var(--border-color); border-radius: 18px;
    background: var(--bg-surface); box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  }
  .app-shell--m.app-shell--flow .sticky-actions {
    left: 0; right: 0; padding: 10px 16px calc(12px + var(--safe-bottom));
    border-width: 1px 0 0; border-radius: 0; box-shadow: 0 -6px 20px rgba(13, 21, 36, .08);
  }
  .app-shell.app-shell--m:has(.sticky-actions:not(.m-off *)) .app-shell__content { padding-bottom: calc(var(--m-actions-space, calc(var(--m-actions-bottom) + 96px)) + 16px); }
  html:has(.app-shell--m .sticky-actions:not(.m-off *)) { scroll-padding-bottom: calc(var(--m-actions-space, 200px) + 8px); }
  .app-shell.app-shell--m .toast-container, .app-shell.app-shell--m .cookie { bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-fab-rise) + 12px); }
  .app-shell.app-shell--m:has(.sticky-actions:not(.m-off *)) .toast-container,
  .app-shell.app-shell--m:has(.sticky-actions:not(.m-off *)) .cookie { bottom: calc(var(--m-actions-space, calc(var(--m-actions-bottom) + 96px)) + 8px); }
  .app-shell.app-shell--m:has(.sticky-actions:not(.m-off *)) .chat-dock--tablet { --dock-bottom: calc(var(--m-actions-space, calc(var(--m-actions-bottom) + 96px)) + 12px); }
  /* Sayfa girişindeki kayarak belirme (.fade-up) dönüşüm (transform) kullanır; dönüşen ata sabit çubuğu canlandırma boyunca kendi
     içine alır: çubuk açılışın ilk ~0,3 sn'sinde içeriğin arasında (ekranın 970–1950 px aşağısında) durup sonra alta atlıyordu
     (firma profili, şube, destek talebi, bildirim ayarları; sepet, restoran menüsü ve restoran sipariş ayrıntısının sabit çubukları da
     aynı kapsayıcıda). Sabit çubuk taşıyan kapsayıcı telefonda yalnız saydamlıkla belirir. */
  .app-shell--m .fade-up:has(.sticky-actions, .fc-summary__actions, .fr-cartbar, .fto-actions) { animation-name: m-fade; }

  /* ------------------------------------------------------------ Karşılama */
  .phome { margin: 0; }
  .phome__hello { padding: 8px 16px 60px; background: var(--m-bar); color: #fff; }
  .phome__greet { font-size: 13px; color: rgba(255, 255, 255, .72); }
  .phome__title { margin: 2px 0 0; font: 700 30px/1.1 var(--font-display); letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
  /* Izgara hücresi içeriği kadar genişlemesin: uzun sipariş satırı sayfayı yana kaydırıyordu (telefon E2E 2026-10-24). */
  .phome { overflow-x: clip; }
  .phome__now { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
  .phome__now > * { min-width: 0; }
  .app-shell--m .phome__now .faob, .app-shell--m .phome__now .uajb {
    width: 100%; max-width: none; margin: 0; min-height: 56px; padding: 8px 8px 8px 10px; gap: 12px;
    border: 0; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none;
  }
  .app-shell--m .phome__now .faob__icon, .app-shell--m .phome__now .uajb__icon { flex-basis: 40px; height: 40px; }
  .app-shell--m .phome__now .faob__text b, .app-shell--m .phome__now .uajb__text b { font-size: 15px; font-weight: 600; }
  .app-shell--m .phome__now .faob__text small, .app-shell--m .phome__now .uajb__text small { font-size: 13px; color: rgba(255, 255, 255, .72); }
  .app-shell--m .phome__now .faob__bar i { background: rgba(255, 255, 255, .2); }
  .app-shell--m .phome__now .faob__go, .app-shell--m .phome__now .uajb__go {
    min-height: 36px; padding: 0 12px; border-radius: 10px; background: #fff; color: #0d1524; font-size: 13px;
  }
  .app-shell--m .phome__now .faob__go .icon, .app-shell--m .phome__now .uajb__go .icon { display: none; }
  .phome__areas { display: grid; gap: 12px; padding: 0 16px 8px; margin-top: -44px; }
  .parea {
    position: relative; isolation: isolate; overflow: hidden; height: 164px; border-radius: 22px; padding: 16px;
    display: flex; flex-direction: column; justify-content: flex-end; color: #fff; text-decoration: none;
    box-shadow: 0 10px 26px rgba(13, 21, 36, .16);
    transition: transform .14s ease-out;
  }
  .parea:hover { color: #fff; text-decoration: none; }
  .parea:active { transform: scale(.985); }
  .parea:focus-visible { outline: 3px solid var(--m-acc); outline-offset: 3px; }
  .parea__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .parea::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(6, 10, 18, 0) 18%, rgba(6, 10, 18, .5) 52%, rgba(6, 10, 18, .9) 100%);
  }
  .parea__live { position: absolute; top: 12px; left: 12px; background: rgba(6, 10, 18, .55); }
  .parea__name { display: block; font: 700 28px/1.05 var(--font-display); letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
  .parea__lead { display: block; max-width: 26ch; margin-top: 4px; padding-right: 52px; font-size: 14px; opacity: .92; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
  .parea__go { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
  .parea--carsi .parea__go { background: var(--accent-500); color: #241200; }
  .parea--yemek .parea__go { background: var(--yemek-ember); color: #fff; }
  .parea--usta .parea__go { background: var(--mint-600); color: #fff; }
  .phome--two .parea { height: 236px; }
  @media (min-height: 760px) { .phome:not(.phome--two) .parea { height: 176px; } }
  .app-shell--m.app-shell--home .app-shell__content--bleed { padding-top: 0; }

  /* ------------------------------------------------------------ Hesabım (telefonda üst blok bölüm renginde) */
  .app-shell--m .hub { margin: calc(-1 * var(--spacing-4)) calc(-1 * var(--spacing-4)) 0; }
  .app-shell--m .hub__who { margin: 0; padding: 8px 16px 20px; border: 0; border-radius: 0; background: var(--m-top); color: #fff; }
  .app-shell--m .hub__who small { color: rgba(255, 255, 255, .72); }
  .app-shell--m .hub__av { background: rgba(255, 255, 255, .16); color: #fff; }
  .app-shell--m .hub__edit { color: #fff; background: rgba(255, 255, 255, .1); }
  .app-shell--m .hub__grp, .app-shell--m .hub__list, .app-shell--m .hub__ver { margin-left: 16px; margin-right: 16px; }
}

@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .aswitch__scrim, .aswitch__menu { animation: none; }
  .aswitch__chev, .parea, .pbar__ib { transition: none; }
}

/* ------------------------------------------------------------ Hesabım (/hesabim): masaüstünde de tek sütun okunur */
.hub { max-width: 640px; margin: 0 auto; padding-bottom: var(--spacing-6); }
.hub__who {
  display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 4px;
  border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-surface);
}
.hub__av {
  width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-50); color: var(--primary-700); font-size: 17px; font-weight: 700;
}
.hub__id { flex: 1; min-width: 0; line-height: 1.3; }
.hub__id b { display: block; font: 700 20px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub__id small { display: block; font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub__edit {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-secondary); background: var(--bg-surface-subtle);
}
.hub__grp { margin: 0; padding: 20px 4px 8px; font: 600 12.5px/1.2 var(--font-family); letter-spacing: .01em; color: var(--text-muted); }
.hub__list {
  overflow: hidden; border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
[data-theme="dark"] .hub__list { box-shadow: none; }
.hub__row {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 16px;
  border: 0; background: none; color: var(--text-main); font: 400 15px/1.3 var(--font-family); text-align: left; text-decoration: none;
  cursor: pointer;
}
.hub__row:hover { background: var(--bg-surface-hover); color: var(--text-main); text-decoration: none; }
.hub__row + .hub__row::before { content: ""; position: absolute; left: 62px; right: 0; top: 0; height: 1px; background: var(--border-color); }
.hub__mic {
  width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, #17406f) 13%, var(--bg-surface)); color: var(--c, #17406f);
}
[data-theme="dark"] .hub__mic {
  background: color-mix(in srgb, var(--c, #8ab2e6) 28%, var(--bg-surface)); color: color-mix(in srgb, var(--c, #8ab2e6) 40%, #fff);
}
.hub__tx { flex: 1; min-width: 0; }
.hub__tx small { display: block; margin-top: 1px; font-size: 13px; color: var(--text-muted); }
.hub__val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hub__count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center;
  background: var(--accent-500); color: #241200; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hub__chev { color: var(--text-muted); flex: none; }
.hub__switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: 14px; background: var(--border-strong); transition: background-color .15s; }
.hub__switch::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease-out;
}
.hub__switch.is-on { background: var(--primary-500); }
.hub__switch.is-on::after { transform: translateX(18px); }
.hub__row--danger .hub__tx { color: var(--tint-danger-fg); }
.hub__ver { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); }

/* Sayfaların telefon kuralları aşama aşama eklenir (PLAN.md). Sayfaya özgü kural sayfanın .razor.css'indedir; birden çok sayfanın
   kullandığı telefon kalıbı kendi aşamasının bölümüne yazılır (aynı anda çalışan aşamalar dosyada çakışmasın). */

/* ==================================================================== Aşama 2: esnaf ve usta sayfaları */
@media (max-width: 1023.98px) {
  /* Bölüm başlığı (SectionPageHead, sec-head--phone): usta paneli ve usta alt sayfalarında başlık üst çubukta (PhoneBar) ya da
     bölüm adında; bant üst çubuğun renginde ince şerit olarak kalır, içinde eylemler (iş kabulü, Profilim) ve ek içerik (sekmeler,
     durum rozetleri). Esnaf (Çarşı) sayfalarının şeridi SellerPageBand'in PhoneCompact kipidir. */
  .app-shell--m .sec-head.sec-head--phone {
    margin-bottom: var(--spacing-4); padding: 2px 0 14px;
    background: var(--m-bar); border-image-source: linear-gradient(var(--m-bar), var(--m-bar));
  }
  .app-shell--m .sec-head.sec-head--phone::before { display: none; }
  .app-shell--m .sec-head--phone .sec-head__back,
  .app-shell--m .sec-head--phone .sec-head__marks,
  .app-shell--m .sec-head--phone .sec-head__title,
  .app-shell--m .sec-head--phone .sec-head__sub { display: none; }
  .app-shell--m .sec-head--phone .sec-head__inner { gap: 10px; align-items: center; }
  .app-shell--m .sec-head--phone .sec-head__text:empty { display: none; }
  .app-shell--m .sec-head--phone .sec-head__actions { width: 100%; justify-content: space-between; }
  .app-shell--m .sec-head--phone .sec-head__meta { margin-top: 0; }
  /* Usta ol: tanıtım başlığı kalır; geri bağlantısı üst çubukta olduğu için bantta tekrarlanmaz. */
  .app-shell--m .uo-head .sec-head__back { display: none; }
  /* Usta paneli bandındaki sekmeler: alt menüde olmayanlar (Özet, Tekliflerim, Mesajlar) burada; hap düğmeler. */
  .app-shell--m .upn-head .upn-tabs { margin-top: 10px; }
  /* Esnaf ve usta sayılarındaki küçük kutular (StatTile): telefonda alçak, gölgesiz, ikişer. */
  .app-shell--m .upn-stats .stat-card, .app-shell--m .wallet-side .stat-card { min-height: 0; padding: 12px 14px; border-radius: 16px; box-shadow: none; }
  .app-shell--m .upn-stats .stat-card__icon, .app-shell--m .wallet-side .stat-card__icon { width: 28px; height: 28px; border-radius: 9px; }
  .app-shell--m .upn-stats .stat-card__value, .app-shell--m .wallet-side .stat-card__value { font-size: 20px; }
  .app-shell--m .upn-stats .stat-card__hint, .app-shell--m .wallet-side .stat-card__hint { font-size: 12px; }
}

/* ==================================================================== Aşama 3: Çarşı (müşteri) */
/* Yalnız telefonda çizilen parçalar (vitrinin güven şeridi, "Son talepleriniz", karşılaştırmanın özet bandı…): masaüstünde ve
   yönetim hesabının eski telefon kabuğunda görünmez; .hide-desktop yerine bu sınıf kullanılır çünkü o kabukta da gizli kalmalıdır. */
.m-only { display: none; }
@media (max-width: 1023.98px) {
  .app-shell--m .m-only { display: block; }
  /* Sayfaların kapsamlı (scoped) kuralları aynı özgüllükte ve bu dosyadan sonra yüklenir; gizleme her zaman geçerli olmalı. */
  .app-shell--m .m-off { display: none !important; }

  /* Bölüm başlık şeridi telefonda hiç çizilmez: başlık ve geri üst çubukta (PhoneBar), eylemler alt menüde ya da sayfanın içinde. */
  .app-shell--m .sec-head.sec-head--phone-off { display: none; }

  /* Liste araç bandı (telefon.html → Çarşı 3 .tools): üst çubuğun altına yapışık beyaz bant; arama her zaman görünür, sayaçlı süzgeç
     çipleri tek satırda yana kayar. Taleplerim, Gelen teklifler ve Açık talepler aynı kalıbı kullanır. */
  .app-shell--m .m-tools {
    position: sticky; top: calc(var(--safe-top) + 56px); z-index: 30;
    display: grid; gap: 12px; margin: calc(-1 * var(--spacing-4)) calc(-1 * var(--spacing-4)) 0; padding: 12px 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border-color);
  }
  .app-shell--m .m-tools > * { margin-left: 16px; margin-right: 16px; }
  .app-shell--m .m-tools .search-box {
    max-width: none; min-height: 44px; padding: 0 6px 0 12px; border: 0; border-radius: 12px; background: var(--bg-surface-subtle);
    box-shadow: none;
  }
  .app-shell--m .m-tools .search-box input { min-height: 44px; font-size: 15px; background: transparent; }
  .app-shell--m .m-chips {
    display: flex; flex-wrap: nowrap; gap: 8px; margin-left: 0; margin-right: 0; padding: 0 16px; overflow-x: auto;
    scrollbar-width: none; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .app-shell--m .m-chips::-webkit-scrollbar { display: none; }
  .app-shell--m .m-chips .chip {
    flex: none; min-height: 44px; height: 44px; padding: 0 14px; gap: 6px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary);
    font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .app-shell--m .m-chips .chip.active { border-color: var(--m-bar); background: var(--m-bar); color: #fff; }
  [data-theme="dark"] .app-shell--m .m-chips .chip.active { border-color: #eaf1fb; background: #eaf1fb; color: #0d1524; }
  /* Koyu temada seçili çip açık renktir; sayaç kabarcığı koyu yazıyla okunur. */
  [data-theme="dark"] .app-shell--m .m-chips .chip.active .my-demands__count,
  [data-theme="dark"] .app-shell--m .m-chips .chip.active .incoming__count { background: rgba(13, 21, 36, .12); color: #0d1524; }

  /* Gruplu liste: her grup tek yuvarlak kart, satırlar arasında simge kutusunun sağından başlayan çizgi (telefon.html .rows). */
  .app-shell--m .m-rows {
    overflow: hidden; border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  }
  [data-theme="dark"] .app-shell--m .m-rows { box-shadow: none; }
  .app-shell--m .m-rows > * + * { position: relative; }
  .app-shell--m .m-rows > * + *::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--border-color); }

  /* Alıcının soru ayrıntısı: ince banttaki yazılı eylemler soldan dizilir (DemandDetails, dd-owner-band). */
  .app-shell--m .dd-owner-band.sec-head--phone .sec-head__actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  /* Açık talepler: teklif şartları esnaf için bilgidir; bantta kısa yazı olarak kalır (başlık üst çubukta). */
  .app-shell--m .explore-head.sec-head--phone .sec-head__sub { display: block; margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .72); }

  /* Gruplu liste başlığı (telefon.html .grp): "Bu hafta", "Diğer teklifler". */
  .app-shell--m .m-grp { margin: 0; padding: 20px 4px 8px; font: 600 12.5px/1.2 var(--font-family); letter-spacing: .01em; color: var(--text-muted); }
  .app-shell--m .m-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
  .app-shell--m .m-sec > b, .app-shell--m .m-sec > h2 { margin: 0; font: 700 18px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text-main); }
  .app-shell--m .m-sec > a {
    display: inline-flex; align-items: center; min-height: 44px; color: var(--m-link); font-size: 13px; font-weight: 600; text-decoration: none;
  }
  .app-shell--m .m-sec > a::after { content: "\203A"; margin-left: 3px; font-size: 17px; line-height: 1; }

  /* Vitrin (/carsi): fotoğraf ekranın tepesinden başlar, üst çubuk fotoğrafın üstünde saydam durur ve sayfa kaydıkça bölüm rengine
     döner (telefon.html → Çarşı 1 .bar.over). Kaydırmaya bağlı canlandırmayı desteklemeyen tarayıcıda çubuk düz kalır ve fotoğraf
     çubuğun altından başlar. Çevrimdışı şeridi varken fotoğraf yukarı çekilmez (şeridin üstüne binerdi). */
  @supports (animation-timeline: scroll()) {
    .app-shell--m:has(.carsi-hero):not(:has(.offline-banner, .app-update)) .pbar {
      animation: c3-bar-over linear both; animation-timeline: scroll(root); animation-range: 0 240px;
    }
    .app-shell--m:has(.carsi-hero):not(:has(.offline-banner, .app-update)) .carsi-hero.hero {
      margin-top: calc(-1 * (56px + var(--safe-top))); padding-top: calc(56px + var(--safe-top) + 64px);
    }
  }
}
@keyframes c3-bar-over {
  from { background-color: transparent; }
  to { background-color: var(--m-bar); }
}

/* ==================================================================== Aşama 4: Yemek (müşteri) */
@media (max-width: 1023.98px) {
  /* Müşteri sayfalarının masaüstü başlık şeridi (FoodPageHead) telefonda yok: başlık ve geri üst çubuktadır (PhoneBar). Restoran
     paneli ve kurye aynı bileşeni kullanır; onlarda sınıf verilmediği için şerit kalır (7. aşama). */
  .app-shell--m .fph.fph--phone-off { display: none; }

  /* Alt menü ayrıntı ekranlarında da görünür (kullanıcı 2026-10-25: "alt sayfalara girince sürekli geri geri yapmak zorunda
     kalıyoruz"). Restoran menüsünün köz sepet çubuğu, dolu sepetin "Siparişi ver" şeridi menünün hemen üstünde yüzer. */
  .app-shell--m:has(.fc-summary__actions) .app-shell__content { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-fab-rise) + 96px); }
  /* Süren siparişin yüzen kartı: restoran menüsünde sepet çubuğunun üstünde; sepette "Siparişi ver" şeridi varken çıkmaz
     (kabuğun kaydet şeridi kuralıyla aynı). */
  .app-shell--m:has(.fr-cartbar) .live-strips { bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-fab-rise) + 76px); }
  .app-shell--m:has(.fr-cartbar):has(.live-strips > *) .fr { padding-bottom: calc(176px + var(--m-fab-rise)); }
  .app-shell--m:has(.fc-summary__actions) .live-strips { display: none; }
}

/* ==================================================================== Aşama 5: Usta (müşteri) */
@media (max-width: 1023.98px) {
  /* Müşteri sayfalarının masaüstü başlık şeridi (SectionPageHead) telefonda yok: başlık ve geri üst çubuktadır (PhoneBar). Usta
     paneli ve öteki bölümler aynı bileşeni kullanır; onlarda sınıf verilmediği için şerit kalır. */
  .app-shell--m .sec-head.usta-phone-off { display: none; }
  /* Usta profilinin altta sabit "Teklif iste" çubuğu varken tabletteki sohbet düğmesi (ChatDock) çubuğun üstünde durur. */
  .app-shell--m:has(.upm-cta) .chat-dock--tablet { --dock-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 84px); }
  /* Profilin "Teklif iste" şeridi alt menünün üstünde yüzer; içerik şeridin altında kalmasın. */
  .app-shell--m:has(.upm-cta) .app-shell__content { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--m-fab-rise) + 96px); }
}

/* ==================================================================== Aşama 6: ortak sayfalar */
@media (max-width: 1023.98px) {
  /* Başlığı üst çubukta olan sayfalarda bölüm bandı yok (PhoneBar); birden çok eylemi olan sayfada bant yalnız eylem satırıdır. */
  .app-shell--m .sec-head.sec-head--phone-off, .app-shell--m .sec-wrap--phone-off { display: none; }
  .app-shell--m .sec-head.sec-head--phone-actions { padding: 0 0 12px; background: var(--m-top); border-image: none; }
  .app-shell--m .sec-head.sec-head--phone-actions::before { display: none; }
  .app-shell--m .sec-head--phone-actions .sec-head__text { display: none; }
  .app-shell--m .sec-head--phone-actions .sec-head__actions { gap: 8px; }
  .app-shell--m .sec-head.sec-head--phone-actions:not(:has(.sec-head__actions > *)) { display: none; }

  /* Sohbet (telefon.html → Ortak 2): sohbetin başlığı üst çubuktur (geri, kişi, konu, teklif/kişiler/harita, engelle); telefon üst
     çubuğu ve alt menü çizilmez, yazma alanı ekranın altındadır. Başlıktaki eylemler sohbet penceresinde kalır (işlev kaybı yok). */
  .app-shell--m:has(.chat-page .chat-window) { --topbar-height: 0px; --bottom-nav-height: 0px; }
  .app-shell--m:has(.chat-page .chat-window) .pbar,
  .app-shell--m:has(.chat-page .chat-window) .mobile-bottom-nav { display: none; }
  .app-shell--m .chat-page .chat-window__header {
    min-height: calc(var(--safe-top) + 60px); padding: calc(var(--safe-top) + 6px) 6px 6px 4px; gap: 10px;
    border-bottom: 0; background: var(--m-top); color: #fff;
  }
  .app-shell--m .chat-page .chat-window__header .btn-icon,
  .app-shell--m .chat-page .chat-window__header .btn-ghost { color: #fff; }
  .app-shell--m .chat-page .chat-window__header .btn-icon:hover,
  .app-shell--m .chat-page .chat-window__header .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
  .app-shell--m .chat-page .chat-window__header .avatar { background: rgba(255, 255, 255, .14); color: #fff; }
  .app-shell--m .chat-page .chat-window__title .fw-bold { font-size: 17px; color: #fff; }
  .app-shell--m .chat-page .chat-window__title a { color: rgba(255, 255, 255, .7); }
  /* Teklif, kişiler ve harita başlığın altında etiketli ikinci satır: tek satırda adı ve konuyu sıkıştırıyordu. */
  .app-shell--m .chat-page .chat-window__header { flex-wrap: wrap; row-gap: 4px; }
  .app-shell--m .chat-page .chat-window__header .chat-actions {
    order: 10; flex: 1 0 100%; margin: 0; padding: 2px 0 2px 44px; gap: 6px; overflow-x: auto; scrollbar-width: none;
  }
  .app-shell--m .chat-page .chat-actions .chat-actions__btn {
    min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600;
  }
  .app-shell--m .chat-page .chat-actions .chat-actions__btn span.hide-mobile { display: inline !important; }
  /* Sohbet listesinde başlık üst çubukta; listenin kendi başlık satırı tekrar etmesin. */
  .app-shell--m .chat-page .conv-list__header > .row-between { display: none; }
}

/* ==================================================================== Aşama 7: restoran ve kurye */
@media (max-width: 1023.98px) {
  /* Restoran paneli başlık şeridi (FoodPanelHead → FoodPageHead.fph--panel): başlık üst çubukta (sayfanın PhoneBar'ı); şerit üst
     çubuğun renginde ince bant olarak kalır, içinde yalnız eylemler (haplar; sığmazsa alt satıra), şube seçimi ve ek içerik (durum
     rozeti). Panel gezinmesi (FoodManageNav) telefonda alt menüde ve panelin "Restoran yönetimi" listesindedir. Bantta gösterilecek
     bir şey yoksa bant çizilmez. Panelin ana sayfasında (fph--phone-title) restoranın adı bantta kalır. */
  .app-shell--m .fph.fph--panel {
    margin-bottom: 12px; padding: 2px 0 14px;
    background: var(--m-bar); border-image-source: linear-gradient(var(--m-bar), var(--m-bar));
  }
  .app-shell--m .fph.fph--panel::before { display: none; }
  .app-shell--m .fph--panel .fph__back,
  .app-shell--m .fph--panel .fph__area,
  .app-shell--m .fph--panel .fph__sub,
  .app-shell--m .fph--panel .fph__tabs,
  .app-shell--m .fph--panel:not(.fph--phone-title) .fph__title { display: none; }
  .app-shell--m .fph--panel .fph__inner { gap: 10px; align-items: center; }
  .app-shell--m .fph--panel:not(.fph--phone-title) .fph__text:not(:has(> :not(.fph__back, .fph__area, .fph__title, .fph__sub))) { display: none; }
  .app-shell--m .fph--panel:not(.fph--phone-title):not(:has(.fph__actions > *)):not(:has(.fph__text > :not(.fph__back, .fph__area, .fph__title, .fph__sub))) { display: none; }
  .app-shell--m .fph--panel .fph__text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .app-shell--m .fph--panel .fph__text .badge { margin: 0; }
  .app-shell--m .fph--panel.fph--phone-title .fph__title { flex: 1 0 100%; margin: 4px 0 2px; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
  .app-shell--m .fph--panel .fph__actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  /* Durum rozeti ve eylem aynı satırda (sipariş ayrıntısı: "Hazırlanıyor" · "Destek al"); şube seçimi tam satır kalır. */
  .app-shell--m .fph--panel:not(.fph--phone-title) .fph__text { flex: 1 1 0; }
  .app-shell--m .fph--panel:not(.fph--phone-title) .fph__actions:not(:has(.form-select)) { width: auto; min-width: 0; flex: 0 1 auto; }
  .app-shell--m .fph--panel .fph__actions .btn {
    flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .app-shell--m .fph--panel .fph__actions .btn-outline,
  .app-shell--m .fph--panel .fph__actions .btn-ghost { border-color: transparent; background: rgba(255, 255, 255, .12); color: #fff; }
  .app-shell--m .fph--panel .fph__actions .btn-primary {
    border-color: var(--m-cta, var(--yemek-ember)); background: var(--m-cta, var(--yemek-ember)); color: #fff;
  }
  .app-shell--m .fph--panel .fph__actions .form-select {
    flex: 1 1 auto; width: 100%; min-height: 44px; border-radius: 12px; font-size: 15px;
  }
  /* Sipariş zili bandı (FoodOrderBell) üst çubuğun altında kenardan kenara; panel şeridi onun hemen altından başlar. */
  .app-shell--m .fob ~ * .fph.fph--panel, .app-shell--m .fob ~ .fph.fph--panel { margin-top: calc(-1 * var(--spacing-3)); }

  /* Kurye ekranı (ADR-047, ADR-053): çalışma ekranının üst menüsü (WorkTopBar) telefonda sitenin üst çubuğu gibi bölüm renginde
     ve 56 px; "Menü" düğmesi çubuktaki haplar gibi. Alt menü (WorkBottomNav) sitenin yüzen cam alt menüsüdür (yukarıdaki
     .mobile-bottom-nav kuralları); vurgu rengi bölümün açık tonu. İşlev ve bağlantılar değişmez. */
  .app-shell--m .work-topbar { background: var(--m-bar); box-shadow: none; }
  .app-shell--m .work-topbar__inner { padding: 0 8px 0 16px; }
  .app-shell--m .work-topbar__brand .brand-logo__word { height: 22px; width: auto; }
  .app-shell--m .work-topbar__menu-btn {
    min-height: 40px; padding: 0 14px; border: 0; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600;
  }
  .app-shell--m .work-topbar__menu-btn:hover { background: rgba(255, 255, 255, .18); }
  .app-shell--m .work-topbar__dot { box-shadow: 0 0 0 2px var(--m-bar); }
  .app-shell--m .work-bottom-nav .nav-item.action-create { color: #fff; }
  /* Kurye sekme adları uzun ("Hazır paketler", "Şimdiki görev"): 360–390 px'te yan yana taşıyordu. Ad iki satıra sarar; simge ve
     etkin hap hep aynı yükseklikte durur (içerik üstten dizilir), etkin sekme hap, renk ve kalın yazıyla belli olur. */
  .app-shell--m .work-bottom-nav .nav-item { justify-content: flex-start; padding-top: 15px; }
  .app-shell--m .work-bottom-nav .nav-item .nav-label { max-width: 66px; white-space: normal; text-align: center; line-height: 1.1; }
  .app-shell--m .work-bottom-nav .nav-item::before { top: 11px; margin-top: 0; }
  .app-shell--m .work-bottom-nav .nav-item.active::after { display: none; }
  .app-shell--m .work-bottom-nav .nav-item .badge-dot { top: 5px; }
  .app-shell--m .work-bottom-nav--yemek .nav-item.action-create .create-icon-bubble {
    background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--m-cta) 62%, #fff) 0%, var(--m-cta) 58%, color-mix(in srgb, var(--m-cta) 82%, #000) 100%);
    color: var(--m-cta-ink);
  }
  .app-shell--m.app-shell--work .app-shell__content { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-6)); }
  /* Kurye kipindeki hesap sayfaları (ADR-063): sitenin telefon üst çubuğu çizilmez; sayfanın başlığı ve geri düğmesi kurye üst menüsünün
     altındaki satırdadır (work-pagebar), aynı bölüm renginde. Ortak sayfaların lacivert üst rengi (Hesabım'ın üst bloğu) de bu renge geçer. */
  .app-shell--m.app-shell--work.app-shell--work-inset { --m-top: var(--m-bar); }
  .app-shell--m .work-pagebar { display: block; background: var(--m-bar); color: #eaf1fb; }
}

/* ==================================================================== Aşama 8: giriş ve metin sayfaları */
@media (max-width: 1023.98px) {
}

/* ==================================================================== Tam mobil test (2026-10-30) düzeltmeleri */
@media (max-width: 1023.98px) {
  /* Çevrimdışı bandı telefonda üst çubuğun altında içerikle aynı akışta durur (yeni sürüm bandı gibi). Sabit (fixed) olduğu için
     sayfanın ilk ~48 px'ini örtüyordu: Taleplerim'in arama kutusu, Hesabım'daki ad satırı, Ürün ara'nın adım çubuğu. Sohbette üst
     çubuk yoktur; orada sabit kalır. */
  .app-shell--m:not(:has(.chat-page .chat-window)) .offline-banner { position: relative; top: auto; }
  /* Sohbette üst çubuk yoktur; sabit bant sohbet başlığının (geri düğmesi, kişi) üstüne biniyordu. Bant yazma alanının hemen
     üstüne iner: "mesajlarınız saklanır" bilgisi de yazarken görülür. Yükseklik yazma alanınınkidir (dokunma hedefi + iç boşluk). */
  .app-shell--m:has(.chat-page .chat-window) .offline-banner {
    top: auto; bottom: calc(var(--safe-bottom) + var(--min-touch-target) + 2 * var(--spacing-2) + 1px);
  }
}

/* ==================================================================== Cila: dokunma geri bildirimi (tam mobil test 2026-10-30)
   Dokunma vurgusu bütün sitede kapalıdır (design-system.css html) ve telefonda üzerine gelme (hover) yoktur: Hesabım satırları, bölüm
   menüsü satırları, alt menü sekmeleri ve üst çubuğun hapları basılınca hiçbir tepki vermiyordu. Basılan satır bir ton koyulaşır, alt
   menü simgesi ve haplar hafifçe küçülür (üst çubuğun yuvarlak düğmeleri ve bölüm kartları zaten böyleydi). Dokunmatik ekranda bir
   satıra dokunup geri dönünce üzerine gelme rengi satırda takılı kalmaz. Rozetteki sayı sabit genişliktedir (sayı değişince oynamaz). */
@media (max-width: 1023.98px) {
  .app-shell--m .hub__row { transition: background-color .12s ease-out; }
  .app-shell--m .hub__row:active { background: var(--bg-surface-hover); }
  .app-shell--m .aswitch__row { transition: background-color .12s ease-out; }
  .app-shell--m .aswitch__row:active { background: rgba(255, 255, 255, .12); }
  .app-shell--m .mobile-bottom-nav .nav-item:not(.action-create) .icon { transition: transform .12s ease-out; }
  .app-shell--m .mobile-bottom-nav .nav-item:not(.action-create):active .icon { transform: scale(.88); }
  .app-shell--m .mobile-bottom-nav .nav-item .badge-dot { font-variant-numeric: tabular-nums; }
  .app-shell--m :is(.pbar__pill, .pbar__avatar, .pbar__login, .pbar__wallet, .work-topbar__menu-btn) { transition: transform .12s ease-out, background-color .15s; }
  .app-shell--m :is(.pbar__pill, .pbar__avatar, .pbar__login, .pbar__wallet, .work-topbar__menu-btn):active { transform: scale(.96); }
}
@media (max-width: 1023.98px) and (hover: none) {
  .app-shell--m .hub__row:hover:not(:active) { background: none; }
  .app-shell--m .aswitch__row:hover:not(:active):not(.is-current) { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell--m .mobile-bottom-nav .nav-item .icon,
  .app-shell--m :is(.pbar__pill, .pbar__avatar, .pbar__login, .pbar__wallet, .work-topbar__menu-btn) { transition: none; }
  .app-shell--m .mobile-bottom-nav .nav-item:active .icon,
  .app-shell--m :is(.pbar__pill, .pbar__avatar, .pbar__login, .pbar__wallet, .work-topbar__menu-btn):active { transform: none; }
}