/*
 * Ana menü (dga-nav) + mega menü paneli + basit alt menü.
 * Kaynak sınıflar: inc/mega-menu.php (dga_render_primary_menu / dga_render_mega_panel).
 * Kural: ham hex/px yok — renk/boşluk/radius/gölge/geçiş hep token (01-TASARIM-SISTEMI.md §1).
 * Erişilebilirlik: panel :hover VE :focus-within ile açılır; JS (main.js) aria-expanded'ı
 * senkron tutar ve dokunmatik/klavye kullanıcıları için tıklama/Enter/Space toggle ekler.
 * `prefers-reduced-motion: reduce` tokens.css'te global tanımlı — burada ekstra iş yok.
 */

/* ============ 1. Ana nav satırı ============ */
.dga-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dga-nav-item {
  position: relative;
  display: flex;
}

.dga-nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.dga-nav-link:hover {
  color: var(--color-primary);
}

.dga-nav-item--has-mega:hover > .dga-nav-link,
.dga-nav-item--has-mega:focus-within > .dga-nav-link,
.dga-nav-item--has-mega.is-open > .dga-nav-link {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ============ 2. Basit alt menü (mega olmayan öğeler) ============ */
.dga-nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 220px;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-mega);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}

.dga-nav-item:hover > .dga-nav-submenu,
.dga-nav-item:focus-within > .dga-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.dga-nav-submenu li {
  list-style: none;
}

.dga-nav-submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.dga-nav-submenu a:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

/* ============ 3. Mega panel ============ */
.dga-nav-item--has-mega {
  position: relative;
}

/* Sol kenar tetikleyicinin (.dga-nav-item--has-mega) sol kenarına hizalanır — ÖNCEDEN
   left:50%+translateX(-50%) ile YATAY ORTALANIYORDU: "Mağaza" header'da sola yakın
   olduğundan 1040px'lik panelin yarısı ekranın SOLUNA taşıp kırpılıyordu ("kayma" bugu).
   Sol hizalama + sağ taşma güvencesi (max-width: calc(100vw - tetikleyicinin sol konumu
   - gutter) yerine, basitçe viewport'a göre sınırlı genişlik) ile bu artık olmuyor. */
.dga-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  width: min(1040px, calc(100vw - var(--gutter-desktop) * 2));
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tab);
  box-shadow: var(--shadow-mega);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}

.dga-nav-item--has-mega:hover > .dga-mega-panel,
.dga-nav-item--has-mega:focus-within > .dga-mega-panel,
.dga-nav-item--has-mega.is-open > .dga-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.dga-mega-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1.4fr;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* ---- 3a. Kategori sütunları (×2) ---- */
.dga-mega-panel__col {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid var(--color-border);
}

.dga-mega-panel__col:last-of-type {
  border-right: none;
}

.dga-mega-panel__col li {
  list-style: none;
}

.dga-mega-panel__col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-tab);
  transition: background var(--transition), color var(--transition);
}

.dga-mega-panel__col a:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

/* ---- 3b. Marka kutuları ---- */
.dga-mega-panel__brands {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dga-mega-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2);
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-tab);
  transition: background var(--transition), transform var(--transition);
}

.dga-mega-brand:hover {
  background: var(--color-primary-soft);
  transform: translateY(-2px);
}

.dga-mega-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.dga-mega-brand span {
  font-size: 13px;
  font-weight: 700;
}

/* ---- 3c. Öne çıkan ürün kartı ---- */
.dga-mega-panel__featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-alt);
  border-radius: var(--radius-tab);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

.dga-mega-panel__featured:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.dga-mega-panel__featured img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-tab);
}

.dga-mega-panel__featured span {
  font-size: 14px;
  font-weight: 700;
}

/* ============ 4. Dar masaüstü / tablet — sütunları daralt ============ */
@media (max-width: 1279px) {
  .dga-mega-panel__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "col1 col2"
      "brands featured";
  }

  .dga-mega-panel__col:nth-of-type(1) { grid-area: col1; }
  .dga-mega-panel__col:nth-of-type(2) { grid-area: col2; border-right: none; }
  .dga-mega-panel__brands { grid-area: brands; }
  .dga-mega-panel__featured { grid-area: featured; }
}