/* Mega menü — /html/ tasarımı DOKUNULMAZ olduğu için ayrı dosya (public/site-assets/).
   Mevcut header davranışına uyar:
     - hero üstünde header şeffaf, linkler beyaz; .solid olunca koyu
     - panel açıkken header'ı .mm-open ile beyaza çeviririz (şeffaf header + beyaz panel çirkin olurdu)
     - <=940px: nav zaten drawer; burada accordion'a dönüşür */

.mm { position: static; }                     /* panel header'a göre konumlansın */
.mm-tog { display: none; }                    /* masaüstünde gerek yok: hover/focus açar */

/* ═══ HEADER HER ZAMAN BEYAZ (performans + tutarlılık) ═══
   Müşterinin bilgisayarı üst menüde kasıyordu. Asıl sebep header'ın şeffaf →
   .solid geçişindeki backdrop-filter: blur(14px): tarayıcı her karede header'ın
   arkasındaki tüm sayfayı yeniden bulanıklaştırıyor — scroll + hover birleşince
   orta donanımda ciddi kasma. Süre kısaltmak çözmez, efektin kendisi pahalı.

   Header'ı baştan opak beyaz yapınca: blur GEREKSİZ (arka plan zaten opak),
   background/logo/renk GEÇİŞLERİ gereksiz. Aynı hamlede "hover'da logo değişiyor"
   şikâyeti de biter (logo hep renkli). /html/ dokunulmadı; hepsi burada. */
@media (min-width: 941px) {
  /* header.site.solid'i de AÇIKÇA hedefliyoruz: /html/'deki .solid kuralı
     backdrop-filter:blur(14px) uyguluyor ve tek '.site'ten daha spesifik —
     yalnız 'header.site' override'ı scroll'da (.solid eklenince) blur'u geri
     getiriyordu, kasma sürerdi. İkisini birlikte hedefleyince blur her durumda kapalı. */
  header.site,
  header.site.solid {
    background: #fff;
    box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(16, 36, 55, .07);
    -webkit-backdrop-filter: none; backdrop-filter: none;   /* pahalı blur KAPALI */
  }
  header.site .logo img,
  header.site.solid .logo img { filter: none; }             /* logo hep renkli, değişmez */
  header.site::after { opacity: 1; }                        /* alt renk şeridi hep görünür */
  header.site nav.main a:not(.btn),
  header.site .mm-t { color: var(--ink); }                  /* linkler beyaz zeminde koyu */
  header.site nav.main a:not(.btn):hover,
  header.site .mm-t:hover { color: var(--sunset); }

  /* Dil değiştirici (globe): /html/'de şeffaf header'da beyaz (border + ikon),
     yalnız .solid'de koyulaşıyordu. Header artık hep beyaz olduğu için .solid
     gelmiyor → beyaz zeminde beyaz buton KAYBOLUYORDU. Hep koyu göster. */
  header.site .lang-btn,
  header.site.solid .lang-btn { border-color: var(--line); color: var(--ink); }
  header.site .lang-btn:hover,
  header.site.solid .lang-btn:hover { background: var(--paper-cool); }
}

/* Tasarım kısa çapa etiketleri (#about, #fees…) içindi. Uzun etiketler ("Universities in
   Russia") hem iki satıra sarıyor hem de flex-shrink yüzünden LOGOYU 0 genişliğe ezip
   yok ediyordu. Logoyu sabitle, menüyü sığacak ölçeğe çek. */
@media (min-width: 941px) {
  header.site .logo { flex: 0 0 auto; }        /* logo asla sıkışmasın */
  nav.main > a:not(.btn), .mm-t { white-space: nowrap; }
  nav.main { flex-wrap: nowrap; gap: 1.35rem; }
  nav.main > a:not(.btn), .mm-t { font-size: .96rem; }
}
@media (min-width: 941px) and (max-width: 1180px) {
  nav.main { gap: 1rem; }
  nav.main > a:not(.btn), .mm-t { font-size: .9rem; }
}
/* Panel açıkken header beyaza döner (.mm-open) — logo da .solid'deki gibi normal renge dönmeli,
   yoksa beyaz zeminde beyaz logo görünmez olur. */
header.site.mm-open .logo img { filter: none; }
.mm-t {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer; padding: 0; font: inherit;
  font-size: 1.02rem; font-weight: 500; color: #fff; opacity: .92;
  text-decoration: none;
  transition: opacity .15s, color .15s;
}
.mm-t:hover { opacity: 1; }
header.site.solid .mm-t,
header.site.mm-open .mm-t { color: var(--ink); }
header.site.solid .mm-t:hover,
header.site.mm-open .mm-t:hover { color: var(--sunset); }
.mm-c { width: 15px; height: 15px; flex: none; transition: transform .2s ease; }
.mm[data-open] .mm-c { transform: rotate(180deg); }
.mm[data-open] .mm-t { color: var(--sunset); opacity: 1; }

/* KRİTİK: /html/ tasarımında `nav.main a:not(.btn){color:#fff}` var (hero üstünde beyaz menü).
   Panel de nav.main içinde olduğu için linkleri BEYAZ miras alıyordu -> beyaz panelde görünmez.
   Aşağıdaki seçiciler specificity ile o kuralı ezer. */
header.site nav.main .mm-p a:not(.btn) { color: var(--slate); opacity: 1; }
header.site nav.main .mm-p a:not(.btn):hover { color: var(--sunset); }
header.site nav.main .mm-p a.mm-h { color: var(--ink); }
header.site nav.main .mm-p a.mm-h:hover { color: var(--sunset); }
header.site nav.main .mm-p .mm-card-t { color: var(--ink); }
header.site nav.main .mm-p a.mm-all { color: var(--sunset); }

/* Panel — header'ın altında tam genişlik */
.mm-p {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 24px 50px -18px rgba(16, 36, 55, .28);
  max-height: calc(100vh - 100%); overflow-y: auto;
}
.mm-p[hidden] { display: none; }

/* ── Müşteri geri bildirimi: "üst menü kasıyor, hover'da logo değişiyor, geç açılıyor" ──
   Üç neden vardı, üçü de burada (public/site-assets) çözüldü; /html/ dokunulmadı.

   1) Logo hover'da ANİDEN sıçrıyordu: /html/ index.css'te .logo img beyaz
      (filter:brightness(0) invert(1)), header beyazlaşınca (.solid/.mm-open) renkli
      (filter:none). Header background .25s yumuşak geçerken logo transition'sız olduğu
      için zıplıyordu. Filtreye header'la aynı süreli geçiş vererek senkronladık. */
header.site .logo img { transition: filter .25s ease; }

/* 2) Panel display:none → görünür anlık geçiyordu; "kasma/aniden" hissi bundandı.
      display animasyonlanamaz, ama display:none'dan çıkışta @keyframes çalışır:
      panel hafifçe aşağı kayarak yumuşak belirir. GPU-dostu (transform+opacity). */
@keyframes mmPanelAc { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mm[data-open] .mm-p { animation: mmPanelAc .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .mm[data-open] .mm-p { animation: none; } }
.mm-in {
  max-width: var(--wrap, 1200px); margin-inline: auto;
  padding: clamp(1.4rem, 2.4vw, 2rem) var(--pad, 3rem) clamp(1.2rem, 2vw, 1.6rem);
}

/* Sütunlar */
.mm-cols { display: grid; gap: 1.2rem 2rem; }
.mm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-cols-city { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }

.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list li + li { margin-top: .12rem; }
.mm-list a {
  display: block; padding: .34rem .5rem; margin-inline: -.5rem; border-radius: 7px;
  font: 400 .9rem/1.4 var(--sans); color: var(--slate); text-decoration: none;
  transition: background .14s, color .14s;
}
.mm-list a:hover { background: var(--paper-cool, #f1f4f8); color: var(--sunset); }

.mm-h {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
  font: 600 .82rem/1.2 var(--sans); color: var(--ink); text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em;
}
a.mm-h:hover { color: var(--sunset); }
.mm-n {
  font: 700 .68rem/1 var(--sans); color: var(--ink-3, #56718c);
  background: var(--paper-cool, #f1f4f8); border: 1px solid var(--line-2, #e6ebf1);
  border-radius: 999px; padding: .16rem .38rem; letter-spacing: 0;
}

/* ---------- Universities: master-detail (şehir listesi + o şehrin üniversiteleri) ---------- */
.mm-uni { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.mm-uni-nav { display: flex; flex-direction: column; gap: .1rem; border-inline-end: 1px solid var(--line); padding-inline-end: 1rem; }
.mm-city {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: start;
  padding: .5rem .6rem; border-radius: 8px; font: 500 .93rem/1.3 var(--sans); color: var(--ink);
  transition: background .14s, color .14s;
}
.mm-city-t { flex: 1; }
.mm-city-a { width: 14px; height: 14px; flex: none; opacity: 0; transition: opacity .14s; }
.mm-city:hover, .mm-city[aria-selected="true"] { background: var(--paper-cool, #f1f4f8); color: var(--sunset); }
.mm-city[aria-selected="true"] .mm-city-a { opacity: 1; }
.mm-city-body { display: none; }                   /* yalnız mobil accordion kullanır */
.mm-uni-det { min-height: 190px; }
.mm-uni-p[hidden] { display: none; }
/* Sabit 2 sütun kısa kategorilerde sağda büyük boşluk bırakıyordu; genişliğe göre
   2–3 sütuna kendisi karar versin (Engineering 17 öğe -> 3, Natural Sciences 5 -> 2). */
.mm-list-2 { column-width: 250px; column-gap: 1.6rem; }
.mm-list-2 li { break-inside: avoid; }

/* Landing kartları — hepsi aynı yükseklikte, açıklamalar aynı satır sayısında */
.mm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; align-items: stretch; }
.mm-card {
  display: flex; flex-direction: column; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: 11px;
  text-decoration: none; background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mm-card:hover { border-color: var(--sunset-2); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(16, 36, 55, .5); }
/* Başlık 2 satıra kadar; kartlar hizalı kalsın diye sabit yükseklik */
.mm-card-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 600 .93rem/1.3 var(--sans); color: var(--ink); min-height: 2.6em;
}
/* Açıklama HER KARTTA tam 2 satır yer kaplar -> ızgara hizalı görünür */
.mm-card-g {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .22rem; font: 400 .78rem/1.45 var(--sans); color: var(--muted);
  min-height: 2.9em; margin-top: auto; padding-top: .22rem;
}

/* "Hepsini gör" */
.mm-all {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.1rem;
  font: 600 .86rem/1 var(--sans); color: var(--sunset); text-decoration: none;
}
.mm-all:hover { gap: .55rem; }

/* ---------- MOBİL: drawer içinde accordion ---------- */
@media (max-width: 940px) {
  /* Mobilde hover yok: başlık LİNK olarak sayfaya gider, panel yanındaki ok ile açılır. */
  .mm { width: 100%; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
  .mm-t {
    flex: 1; width: auto; justify-content: flex-start;
    font-size: 1.12rem; color: var(--ink); opacity: 1;
    padding: .85rem 0; border-bottom: 0;
  }
  .mm-t .mm-c { display: none; }               /* okun işi togglada */
  .mm-tog {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 40px; height: 40px; padding: 0;
    background: none; border: 0; cursor: pointer; color: var(--ink-3, #56718c);
    border-radius: 8px;
  }
  .mm-tog:hover { background: var(--paper-cool, #f1f4f8); }
  .mm-tog svg { width: 20px; height: 20px; transition: transform .2s ease; }
  .mm[data-open] .mm-tog svg { transform: rotate(180deg); }
  .mm[data-open] .mm-tog { color: var(--sunset); }
  .mm-p { flex-basis: 100%; }                  /* panel satırın altına insin */
  header.site.mm-open .mm-t { color: var(--ink); }
  .mm-p {
    position: static; box-shadow: none; border-top: 0; max-height: none;
    background: transparent; overflow: visible;
  }
  .mm-in { padding: .4rem 0 .8rem; max-width: none; }
  .mm-cols, .mm-cols-4, .mm-cols-city, .mm-cards { grid-template-columns: 1fr; gap: .5rem; }
  .mm-h { margin-top: .5rem; }

  /* Universities: dar ekranda master-detail yerine accordion —
     şehir başlığı, hemen altında o şehrin üniversiteleri. */
  .mm-uni { grid-template-columns: 1fr; gap: 0; }
  .mm-uni-nav { border-inline-end: 0; padding-inline-end: 0; gap: 0; }
  .mm-uni-det { display: none; }                    /* sağ panel mobilde yok */
  .mm-city { padding: .6rem .5rem; font-size: 1rem; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  /* aria-selected masaüstü master-detail'in durumu; mobilde accordion açık/kapalı geçerli.
     Yoksa ilk şehir hep kırmızı görünüyordu (açık olmadığı hâlde). */
  .mm-city[aria-selected="true"] { background: none; color: var(--ink); }
  .mm-city[aria-expanded="true"] { color: var(--sunset); background: var(--paper-cool, #f1f4f8); }
  .mm-city-a { opacity: 1; transition: transform .18s ease; }
  .mm-city[aria-expanded="true"] .mm-city-a { transform: rotate(90deg); }
  .mm-city-body { display: block; padding: .2rem 0 .5rem .5rem; }
  .mm-city-body[hidden] { display: none; }
  .mm-city-all {
    display: inline-block; margin: .35rem 0 .2rem .6rem;
    font: 600 .82rem/1 var(--sans); color: var(--sunset); text-decoration: none;
  }
  .mm-list-2 { columns: 1; }
  .mm-card { padding: .7rem .8rem; }
  .mm-all { margin: .6rem 0 .2rem; }

  /* /html/ drawer kuralı (`nav.main a{padding:.85rem 0;border-bottom:…;width:100%}`) panel
     linklerine de uygulanıyordu: 67 bölüm ~3900px'lik bir liste oluyordu. Panel içinde
     daha kompakt satır + çizgisiz görünüm. */
  header.site nav.main .mm-p a:not(.btn) {
    padding: .48rem .6rem; border-bottom: 0; width: auto; font-size: .96rem;
  }
  /* Uzun listeler drawer'ı ele geçirmesin: panel kendi içinde kaysın,
     diğer menü başlıkları erişilebilir kalsın. */
  .mm-p { max-height: 54vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* drawer'da panel açıkken alttaki linklerle karışmasın */
  .mm[data-open] .mm-p { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
}

/* ---------- RTL (ar/fa) ----------
   Izgara ve border-inline-end zaten kendiliğinden dönüyor. Yön bildiren ikonlar dönmez:
   RTL'de "ileri" sola bakar. */
[dir="rtl"] .mm-city-a { transform: scaleX(-1); }
[dir="rtl"] .mm-all span[aria-hidden],
[dir="rtl"] .mm-h span[aria-hidden],
[dir="rtl"] .mm-city-all span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
@media (max-width: 940px) {
  /* mobil accordion: kapalıyken ileri (sol), açıkken aşağı */
  [dir="rtl"] .mm-city[aria-expanded="true"] .mm-city-a { transform: scaleX(-1) rotate(-90deg); }
}

/* Panel açıkken sayfayı hafifçe karart — YALNIZ masaüstü.
   Mobilde drawer'ın kendi görünümü var; scrim orada hem gereksiz hem akışı bozar,
   o yüzden varsayılan display:none (stilsiz kalırsa görünür bir kutu olarak sızıyordu). */
.mm-scrim { display: none; }
@media (min-width: 941px) {
  .mm-scrim {
    display: block;
    position: fixed; inset: 0; top: var(--hdr-h, 76px); z-index: 69;
    background: rgba(16, 36, 55, .28); opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .mm-scrim.on { opacity: 1; pointer-events: auto; }
}