/* ====================================================================
   MEGA MENÜ
   Yalnızca bir menü öğesinde mega panel açıkken yüklenir (header.php).
   Renkler app.css'teki tema değişkenlerinden gelir; burada sabit renk
   kullanılmaz ki panelden değişen tema buraya da yansısın.
   ==================================================================== */

/* ---------- Masaüstü panel ---------- */

/* Panel, menü öğesine değil BAŞLIĞA göre konumlanır: dar bir <li> içinde
   açılsaydı ekranın soluna sıkışır, geniş ızgara sığmazdı. */
.site-header{position:relative}
.nav-menu .has-mega{position:static}

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:60;
}
.nav-menu .has-mega:hover > .mega,
.nav-menu .has-mega:focus-within > .mega,
.nav-menu .has-mega.is-open > .mega{opacity:1; visibility:visible; transform:translateY(0)}

/* Hareket azaltma tercihi: geçişler kapanır, panel anında açılır. */
@media(prefers-reduced-motion:reduce){
  .mega{transition:none}
  .mega-card,.mega-card .mega-thumb img{transition:none}
}

.mega-inner{
  max-width:1200px; margin:0 auto; padding:26px 20px 28px;
  display:grid; gap:24px; grid-template-columns:1fr;
}
/* Tanıtım kutusu varsa sağda sabit bir kolon açılır. */
.mega-inner.has-promo{grid-template-columns:1fr 300px}

.mega-grid{display:grid; gap:12px}
.mega-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}

.mega-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px; border-radius:var(--radius-sm);
  border:1px solid transparent; color:var(--text);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.mega-card:hover{
  background:var(--surface-2);
  border-color:var(--border);
  transform:translateY(-2px);
}

/* Görsel ya da ikon — ikisi de yoksa kutu hizası bozulmasın diye
   yer tutucu genişlik korunur. */
.mega-thumb{
  flex:none; width:52px; height:52px; border-radius:12px;
  overflow:hidden; background:var(--surface-2);
  display:grid; place-items:center; color:var(--c-primary);
}
.mega-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease}
.mega-card:hover .mega-thumb img{transform:scale(1.06)}
.mega-thumb svg{width:22px; height:22px}
html.dark .mega-thumb{color:var(--c-primary-on-dark)}

.mega-text{min-width:0}
.mega-title{
  display:block; font-weight:700; font-size:.92rem; line-height:1.35;
  color:var(--text);
}
.mega-card:hover .mega-title{color:var(--c-primary)}
html.dark .mega-card:hover .mega-title{color:var(--c-primary-on-dark)}
/* Açıklama iki satırda kesilir: uzun metinler kartları farklı yükseklikte
   bırakıp ızgarayı bozuyordu. */
.mega-desc{
  margin-top:3px; font-size:.79rem; line-height:1.5; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- Tanıtım kutusu ---------- */
.mega-promo{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2);
  display:flex; flex-direction:column;
}
.mega-promo-img{display:block; width:100%; height:150px; object-fit:cover}
.mega-promo-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px}
/* --muted, --surface-2 zemininde 4.34:1 veriyor (AA sınırı 4.5). Kart
   açıklamaları --surface üzerinde olduğu için 4.76 ile geçiyordu; tanıtım
   kutusunun koyu zemininde aynı renk yetmiyor. */
.mega-promo-desc{font-size:.83rem; line-height:1.55; color:var(--text); opacity:.82; margin:0}
.mega-promo .btn{width:100%; justify-content:center}

/* "Tümünü gör" satırı */
.mega-all{
  grid-column:1/-1; margin-top:4px; padding-top:14px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:.86rem; color:var(--c-primary);
}
html.dark .mega-all{color:var(--c-primary-on-dark)}
.mega-all svg{width:16px; height:16px}
.mega-all:hover{gap:10px}

/* Dar masaüstünde kolon sayısı kendiliğinden azalır. */
@media(max-width:1240px){
  .mega-inner{padding:22px 18px}
  .mega-inner.has-promo{grid-template-columns:1fr 260px}
  .mega-grid[data-cols="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Tablet / mobil ----------
   1140px altında masaüstü menüsü gizleniyor (app.css) ve çekmece devreye
   giriyor. Mega panel de burada kapanır; içerik çekmecedeki akordiyonda
   aynı verilerle gösterilir. */
@media(max-width:1140px){
  .mega{display:none}
}

/* Çekmecedeki akordiyon */
.mm-acc{border-bottom:1px solid var(--border)}
.mm-acc:last-child{border-bottom:0}
.mm-acc-head{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:12px 4px; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:700; color:var(--text); text-align:left;
}
.mm-acc-head .mm-caret{
  margin-left:auto; flex:none; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s ease; opacity:.55;
}
.mm-acc.open .mm-acc-head .mm-caret{transform:rotate(-135deg)}
.mm-acc-head svg{width:18px; height:18px; flex:none}

/* Yükseklik JS ile ölçülür; `height:auto` geçişi tarayıcıda canlanmaz. */
.mm-acc-body{max-height:0; overflow:hidden; transition:max-height .3s ease}
.mm-acc.open .mm-acc-body{max-height:1200px}

.mm-sub{display:grid; gap:6px; padding:2px 0 12px}
.mm-sub a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  font-size:.88rem; font-weight:600; color:var(--text);
  background:var(--surface-2);
}
.mm-sub a:active{background:var(--border)}
.mm-sub .mm-thumb{
  flex:none; width:34px; height:34px; border-radius:8px; overflow:hidden;
  background:var(--surface); display:grid; place-items:center; color:var(--c-primary);
}
html.dark .mm-sub .mm-thumb{color:var(--c-primary-on-dark)}
.mm-sub .mm-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.mm-sub .mm-thumb svg{width:16px; height:16px}

/* Tablette iki kolon: tek kolonda liste gereksiz uzuyordu. */
@media(min-width:560px) and (max-width:1140px){
  .mm-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
}