/* ============================================================
   ÜST BAR — mobil düzen Trendyol mobil web'den ölçüldü
   (2026-09-25, 390px): 136px toplam.
     satır 1  y16  h23  ☰ + logo solda · hesap/favori/sepet sağda (20px, 40px adım)
     satır 2  y55  h36  arama hapı, var(--panel), yarıçap 20, ikon turuncu
     satır 3  y95  h42  kategori sekmeleri 14px, aktif turuncu + alt çizgi
   Promo şeridi Trendyol mobilde yok, gizli. Masaüstü dokunulmadı.
   ============================================================ */

.ust-menu, .ust-geri{ display:none; }

@media (max-width:899px){
  .promo{ display:none; }

  .ust{ border-bottom:var(--cizgi, 1px) solid var(--cerceve, var(--metin)); }
  .ust-ana{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-areas:"menu logo eyl" "ara ara ara";
    grid-template-rows:23px 36px;
    align-items:center; column-gap:var(--u6); row-gap:var(--u7);
    padding-block:var(--u7) 0;
  }

  .ust-menu{
    grid-area:menu; display:grid; place-items:center;
    width:24px; height:24px; margin-left:-2px; color:var(--metin);
  }
  .ust-menu .ikn{ width:22px; height:22px; }

  .logo{ grid-area:logo; font-size:25px; line-height:23px; }

  .ust-eyl{ grid-area:eyl; gap:var(--u8); }
  .eyl{ min-width:0; padding:0; color:var(--metin); }
  .eyl .ikn{ width:22px; height:22px; }
  /* görünür ikon 22px kalır, dokunma alanı 44px: düzeni oynatmadan genişlet */
  .ust-menu{ position:relative; }
  .eyl::after, .ust-menu::after{ content:""; position:absolute; inset:-11px -6px; }
  .eyl:hover{ background:none; }
  .rozet-sayi{ top:-6px; right:-9px; }

  /* arama hapı */
  .ara-sar{ grid-area:ara; }
  .ara{
    height:36px; padding:0 var(--u7);
    background:var(--zemin); border:var(--cizgi, 1.5px) solid var(--cerceve, var(--metin)); border-radius:var(--r);
  }
  .ara:focus-within{ background:var(--zemin); border-color:var(--mandalina); box-shadow:none; }
  .ara > .ikn{ width:20px; height:20px; color:var(--metin); }
  .ara input{ font-size:var(--t5); }
  .ara input::placeholder{ color:var(--metin3); }

  /* kategori sekmeleri */
  .ust-nav{ border-top:0; margin-top:var(--u2); }
  .ust-nav a{
    padding:10px 11px 9px; font-size:15px; line-height:20px; font-weight:600; color:var(--metin2);
    border-bottom-width:3px;
  }
  .ust-nav a.aktif{ color:var(--metin); font-weight:700; }

  /* tam ekran arama açıkken üst satır gizlenir */
  body[data-ara="acik"] .ust-menu{ display:none; }

  /* ürün sayfası: Trendyol'da tek satır, 53px — geri · arama · ikonlar.
     Logo ve kategori sekmeleri yok. */
  body[data-sayfa="urun"] .ust-ana{
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-areas:"menu ara eyl";
    grid-template-rows:36px;
    padding-block:8px 9px;
  }
  body[data-sayfa="urun"] .logo,
  body[data-sayfa="urun"] .ust-menu,
  body[data-sayfa="urun"] .ust-nav{ display:none; }
  body[data-sayfa="urun"] .ust-geri{
    grid-area:menu; display:grid; place-items:center;
    width:24px; height:36px; margin-left:-4px; padding:0;
    background:none; border:0; color:var(--metin); cursor:pointer;
  }
  body[data-sayfa="urun"] .ust-geri .ikn{ width:22px; height:22px; }
  body[data-sayfa="urun"] .ust-eyl{ gap:var(--u6); }
  body[data-sayfa="urun"][data-ara="acik"] .ust-geri{ display:none; }

  /* kategori sayfası: Trendyol'da tek satır, 53px — ☰ + logo | 🔍 · ikonlar.
     Arama kutusu gizli; ikon tam ekran arama katmanını açar. */
  body[data-sayfa="kat"] .ust-ana{
    grid-template-areas:"menu logo eyl";
    grid-template-rows:36px;
    padding-block:8px 9px;
  }
  body[data-sayfa="kat"]:not([data-ara="acik"]) .ara-sar,
  body[data-sayfa="kat"] .ust-nav{ display:none; }
  body[data-sayfa="kat"] .eyl-ara{ display:flex; }
}

.eyl-ara{ display:none; background:none; border:0; cursor:pointer; }