#catPanel {
      position: fixed; left: 0; right: 0; top: 0;
      height: 100dvh; max-height: 100dvh;
      z-index: 2147483640;
      background: #fff; display: flex; flex-direction: column;
      transform: translate3d(0, 100dvh, 0);
      visibility: hidden;
      pointer-events: none;
      will-change: transform;
    }
    #catPanel.cat-panel-animated {
      transition: transform .35s cubic-bezier(.32,.72,0,1), visibility .35s;
    }
    #catPanel.open {
      transform: translate3d(0, 0, 0);
      visibility: visible;
      pointer-events: auto;
    }
    .cat-panel-header {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px 12px;
      border-bottom: 1px solid #f1f5f9;
      background: #fff; flex-shrink: 0;
    }
    .cat-panel-title {
      font-weight: 800; font-size: 1rem; color: #1e293b;
      flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cat-close-btn {
      width: 36px; height: 36px; border: none; background: #fee2e2;
      border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: #dc2626; flex-shrink: 0;
    }
    .cat-panel-body {
      flex: 1; overflow-y: auto; overflow-x: hidden;
      scrollbar-width: none; -ms-overflow-style: none;
      padding: 10px;
    }
    .cat-scope-bar {
      display: flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 3px;
      margin-bottom: 10px;
    }
    .cat-scope-btn {
      flex: 1; padding: 7px 10px; border: none; border-radius: 8px;
      font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .2s;
      background: transparent; color: #64748b;
    }
    .cat-scope-btn.active {
      background: #fff; color: var(--vavsan-red);
      box-shadow: 0 1px 6px rgba(0,0,0,.12);
    }
    .cat-panel-body::-webkit-scrollbar { display: none; }
    .cat-day-banner {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 4px; margin-bottom: 8px;
    }
    .cat-view-all {
      display: block; text-align: center; padding: 12px;
      color: var(--vavsan-red); font-weight: 700; font-size: .82rem;
      border: 1.5px dashed #fecaca; border-radius: 12px; margin-top: 8px;
      text-decoration: none !important; background: #fff7f7;
    }
    /* Alt kategori seviyesi — geri + tüm ürünler + alt grid bölümü */
    .cat-sub-level {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .cat-sub-nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cat-sub-back {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #f8fafc;
      color: #334155;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
      transition: background .15s, border-color .15s, transform .12s;
    }
    .cat-sub-back svg {
      flex-shrink: 0;
      color: #64748b;
    }
    .cat-sub-back:active {
      background: #f1f5f9;
      border-color: #cbd5e1;
      transform: scale(0.99);
    }
    .cat-sub-view-all {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 12px;
      border: 1.5px dashed #fecaca;
      border-radius: 12px;
      background: linear-gradient(135deg, #fff7f7 0%, #fff 100%);
      text-decoration: none !important;
      color: inherit;
      transition: border-color .15s, box-shadow .15s, transform .12s;
    }
    .cat-sub-view-all:active {
      transform: scale(0.99);
      border-color: rgba(195, 19, 19, 0.45);
      box-shadow: 0 4px 14px rgba(195, 19, 19, 0.12);
    }
    .cat-sub-view-all__icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(195, 19, 19, 0.1);
      color: var(--vavsan-red);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .cat-sub-view-all__text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .cat-sub-view-all__title {
      font-size: .84rem;
      font-weight: 800;
      color: var(--vavsan-red);
      line-height: 1.25;
    }
    .cat-sub-view-all__meta {
      font-size: .72rem;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cat-sub-view-all__arrow {
      flex-shrink: 0;
      color: var(--vavsan-red);
      opacity: 0.85;
    }
    .cat-sub-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cat-sub-section__heading {
      margin: 0;
      padding: 0 2px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #94a3b8;
    }
    .cat-sub-section__count {
      font-weight: 700;
      color: #cbd5e1;
    }
    .cat-panel-title--sub {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }
    .cat-panel-title__crumb {
      font-size: .68rem;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.02em;
    }
    .cat-panel-title__name {
      font-weight: 800;
      font-size: 1rem;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Slide animasyonu: yeni seviye soldan gelir */
    .cat-level-slide-enter { animation: catSlideIn .28s ease forwards; }
    @keyframes catSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
    .cat-level-slide-back { animation: catSlideBack .28s ease forwards; }
    @keyframes catSlideBack { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }