:root{ --container: 1200px; --muted:#6b7280; --ink:#111827; --primary:#ff6a00; }
*{ box-sizing:border-box }

.container{ max-width: var(--container); margin:0 auto; padding: 0 16px }

/* --- topline --- */
.topline{ border-bottom:1px solid #eee; background:#fff }
.topline__inner{ display:flex; justify-content:space-between; align-items:center; min-height:32px; gap:12px; }
.ticker{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; overflow:hidden; white-space:nowrap }
.ticker .dot{ width:8px; height:8px; background:#ff6a00; border-radius:999px; display:inline-block }
.ticker__text{ display:inline-block; transform: translateX(0); will-change: transform; }

.micro a{ color:var(--muted); text-decoration:none; margin-left:10px }
.micro a:hover{ text-decoration:underline }

/* --- mast (logo + search + user) --- */
.mast{ background:#fff }
.mast__inner{ display:grid; grid-template-columns: 200px 1fr 360px; align-items:center; gap:14px; min-height:72px }
.logo{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink) }
.logo__img{ display:block; height:64px; width:auto; object-fit:contain }

/* --- mobile hamburger --- */
.mnav-btn{
  display:none; width:42px; height:42px; border:1px solid #e5e7eb; background:#fff; border-radius:10px;
  align-items:center; justify-content:center; gap:4px; cursor:pointer
}
.mnav-btn span{ display:block; width:20px; height:2px; background:#111; border-radius:3px }

.search{ display:flex; align-items:center; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; gap:8px; background:#f5f6f8 }
.search input{ flex:1; border:0; background:transparent; outline:none; padding:6px 8px }
.search button{ border:0; background:#fff; width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; color:#ef6c00 }
.search button:hover{ background:#ffeede }

.usernav{ display:flex; justify-content:flex-end; align-items:center; gap:16px }
.usernav .u{ display:flex; align-items:center; gap:8px; color:#374151; text-decoration:none; position:relative }
.usernav .u:hover{ color:#111827 }
.cart__count{ position:absolute; top:-8px; right:-10px; background:#ff6a00; color:#fff; border-radius:999px; font-size:11px; padding:2px 6px }
.fav__count{ position:absolute; top:-8px; right:-10px; background:#ef4444; color:#fff; border-radius:999px; font-size:11px; padding:2px 6px }

/* --- User menu dropdown --- */
.user-menu{ position:relative }
.user-menu-dropdown{
  position:absolute; top:100%; right:0; margin-top:8px; min-width:200px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  padding:8px 0; z-index:1000;
  display:flex; flex-direction:column;
}
.user-menu-dropdown[hidden]{ display:none !important; }
.user-menu-dropdown a{
  display:block; padding:10px 16px; color:#374151; text-decoration:none;
  font-size:14px; transition:background 0.15s;
}
.user-menu-dropdown a:hover{ background:#f3f4f6 }
.user-menu-dropdown a:first-child{ font-weight:600; color:#111827 }

/* --- main nav --- */
.mainnav{ border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff; }
.mainnav__inner{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:44px }
.mn{ color:#1f2937; text-decoration:none; font-weight:700; letter-spacing:.2px; white-space:nowrap }
.mn.hot{ color:#e11d48 }
.mn:hover{ text-decoration:underline }

/* --- mega menu --- */
.has-mega{ position:relative; cursor:pointer }
/* Açık durum hem hover'da hem de JS ile eklenen .open sınıfında sürsün */
.has-mega:hover .mega,
.has-mega.open .mega{ opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
.mega{
  position:absolute; left:0; top:100%;
  width:min(1000px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
  padding:20px; margin-top:8px;
  opacity:0; transform:translateY(-10px); visibility:hidden;
  transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
  z-index:100;
  /* Viewport sınırlarını aşmaması için - sağa taşarsa sola kaydır */
  right:auto;
  transform-origin:top left;
}
.mega[hidden]{ display:none !important; }
.mega__cols{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px;
  max-width:100%;
  overflow:visible;
}
.mega h5{ margin:0 0 10px; font-size:15px; font-weight:700; color:#111827 }
.mega h5 a{ color:#111827; text-decoration:none; font-weight:700 }
.mega h5 a:hover{ color:#ff6a00 }
.mega a{ display:block; color:#374151; text-decoration:none; padding:8px 10px; border-radius:8px; font-size:14px; transition:background 0.15s }
.mega a:hover{ background:#f3f4f6 }
.mega .sub{ padding-left:10px }

@media (max-width: 1020px){
  .mast__inner{ grid-template-columns: 1fr 1fr; gap:10px }
  .logo{ grid-column:1 / -1 }
  .usernav{ justify-content:flex-start }
}

/* Mobil ana menü ve üst alan optimizasyonları */
@media (max-width: 820px){
  .topline__inner{ min-height:28px }
  .ticker{ font-size:12px }
  .mast__inner{ grid-template-columns: 1fr; gap:8px; min-height:64px }
  .search{ order:3 }
  .usernav{ order:2; gap:12px }
  .logo__img{ height:56px }

  .mainnav__inner{ gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .mainnav__inner::-webkit-scrollbar{ display:none }
  .mn{ white-space:nowrap; font-size:14px }
  .mnav-btn{ display:flex }

  /* Mega menüyü mobilde daha geniş ve dokunmatik uyumlu yap */
  .mega{ width:96vw; left:2vw; right:2vw }
  .mega__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px){
  .logo__img{ height:48px }
  .search input{ font-size:14px }
  .mn{ font-size:13px }
  .mega__cols{ grid-template-columns: 1fr; }
}

/* Mobilde ana menü satırını tamamen gizle (sadece hamburger kalsın) */
@media (max-width: 820px){
  .mainnav{ display:none }
}

/* --- Mobile nav panel --- */
.mnav-panel{
  position:fixed; top:0; left:0; bottom:0; width:86vw; max-width:380px; background:#fff;
  border-right:1px solid #e5e7eb; box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform:translateX(-100%); opacity:0; transition: transform .25s ease, opacity .25s ease; z-index:9999;
  display:flex; flex-direction:column;
}
.mnav-panel.open{ transform:translateX(0); opacity:1 }
.mnav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9998 }
.mnav-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee }
.mnav-head strong{ font-size:16px }
.mnav-close{ border:1px solid #e5e7eb; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer }
.mnav-links{ display:flex; flex-direction:column; padding:10px 12px; gap:6px }
.mnav-links a{ padding:10px 12px; border-radius:10px; color:#1f2937; text-decoration:none; font-weight:700 }
.mnav-links a.hot{ color:#e11d48 }
.mnav-links a:hover{ background:#f3f4f6 }
.mnav-cats{ padding:10px 12px }
.mnav-cats h5{ margin:8px 0; font-size:15px }
.mnav-cats-cols{ display:grid; grid-template-columns: 1fr; gap:6px }
.mnav-cats-cols .col{ border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; background:#fff }
.mnav-cats-cols h5{ margin:0 0 6px; font-size:14px }
.mnav-cats-cols .sub a{ display:block; padding:6px 8px; color:#374151; border-radius:8px }
.mnav-cats-cols .sub a:hover{ background:#f3f4f6 }