/* kategori-menu.css -- tum kategoriler menusu.
 *
 * AYNI BILESEN IKI SAYFADA: ana sayfa (portal) ve kategori sayfasinin yan
 * sutunu. Once portal.css'in icindeydi ve kategori sayfasi kendi ayri,
 * eksik listesini ciziyordu. Ortak dosyaya alindi.
 *
 * JETON KOPRUSU
 * -------------
 * Iki sayfa iki ayri palet kullaniyor: portal --yuzey/--vurgu, bolum
 * --pi-yuzey/--pi-marka. Kurallari iki kez yazmak yerine degiskenler
 * yedekli okunuyor: var(--yuzey, var(--pi-yuzey)). Hangi palet yuklüyse o
 * kazaniyor, ikisi de gece moduna kendi kurallariyla giriyor.
 */
.menu {
  --m-yuzey:   var(--yuzey,       var(--pi-yuzey));
  --m-yuzey-2: var(--yuzey-2,     var(--pi-yuzey-2));
  --m-yuzey-3: var(--yuzey-3,     var(--pi-yuzey-3));
  --m-cizgi:   var(--cizgi,       var(--pi-ring));
  --m-cizgi-g: var(--cizgi-guclu, var(--pi-ring-2));
  --m-metin:   var(--metin,       var(--pi-metin));
  --m-sessiz:  var(--sessiz,      var(--pi-metin-2));
  --m-vurgu:   var(--vurgu,       var(--pi-marka));
  --m-vurgu-y: var(--vurgu-yum,   var(--pi-marka-yum));
  --m-golge:   var(--golge,       var(--pi-golge-1));
  --m-r:       var(--r-b,         var(--pi-r));
  --m-r-s:     var(--r-s,         var(--pi-r-sm));
  --m-o1:      var(--o1, 0.75rem);
  --m-o2:      var(--o2, 0.8125rem);
  --m-o3:      var(--o3, 0.875rem);
}

/* DUGME SIFIRLAMASI BU DOSYADA DURUYOR.
   Kurallar portal.css'ten cikarilirken oradaki genel dugme sifirlamasi geride
   kalmisti; .menu__h ve .menu__ok kendi zeminini/cercevesini yazmadigi icin
   kategori ve program sayfalarinda tarayicinin ham dugmesi goruluyordu
   (olculdu: border "2px outset rgb(0,0,0)", background "rgb(240,240,240)").
   Bilesen tasinirken sifirlamasini da yaninda goturur.
   :where() ozgulluk katmaz; asagidaki sinif kurallari yine kazanir. */
/* Menu baglantilari alti cizili gelmiyor. Ayni kok: portal.css'teki
   "a{text-decoration:none}" geride kaldi, olculdu -- onizlemede 83 baglanti
   alti cizili ciziliyordu (.menu__bag ve .acilir__b). Tema bunu kendi
   yapiyor olabilir ama bilesen temaya guvenmiyor. */
:where(.menu a) { text-decoration: none; }

:where(.menu button) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}

.menu{border:1px solid var(--m-cizgi);border-radius:var(--m-r);background:var(--m-yuzey);
  box-shadow:var(--m-golge);position:relative}
.menu__h{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--m-cizgi);font-family:inherit;font-weight:700;font-size:var(--m-o3);
  letter-spacing:-.01em;width:100%;text-align:left;border-radius:var(--m-r) var(--m-r) 0 0}
.menu__h svg:last-child{margin-left:auto;transition:transform .2s}
@media (min-width:1024px){.menu__h{cursor:default}.menu__h svg:last-child{display:none}}
.menu__liste{list-style:none;margin:0;padding:.4rem;display:flex;flex-direction:column}
@media (max-width:1023px){
  .menu__liste{display:none}
  .menu[data-acik] .menu__liste{display:flex}
  .menu[data-acik] .menu__h svg:last-child{transform:rotate(180deg)}
  /* Liste kapaliyken katlama etiketi de gizlenir.
     Olculdu (canli, 898px): liste display:none iken .menu__tumu hala
     display:flex idi ve kutu "Tum kategoriler / Tumunu goster 6" diye
     bos gorunuyordu. Katlama yalniz liste acikken bir sey yapar. */
  .menu:not([data-acik]) .menu__tumu{display:none}
}
.menu__s{position:relative;display:flex;align-items:center;border-radius:var(--m-r-s)}
.menu__s:hover,.menu__s:focus-within{background:var(--m-yuzey-2)}
.menu__bag{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;
  padding:.5rem .6rem;font-size:var(--m-o2);color:var(--m-sessiz);transition:color .16s}
.menu__s:hover .menu__bag,.menu__s:focus-within .menu__bag{color:var(--m-metin)}
.menu__im{flex-shrink:0;color:var(--m-vurgu);opacity:.85}
.menu__ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu__adet{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:10px;color:var(--m-sessiz);
  background:var(--m-yuzey-2);border-radius:99px;padding:.1rem .38rem;flex-shrink:0}
.menu__s:hover .menu__adet{background:var(--m-yuzey-3)}
.menu__ok{width:30px;height:30px;margin-right:.25rem;border-radius:6px;display:grid;
  place-items:center;color:var(--m-sessiz);flex-shrink:0;transition:transform .2s,color .16s}
.menu__s:hover .menu__ok{color:var(--m-metin)}

/* acilir panel: masaustunde yandan, mobilde akordiyon */
.acilir{display:none;z-index:30}
.menu__s[data-acik] > .acilir{display:block}
@media (min-width:1024px){
  .menu{overflow:visible}
  .acilir{position:absolute;left:calc(100% + 6px);top:-.4rem;width:430px;
    background:var(--m-yuzey);border:1px solid var(--m-cizgi-g);border-radius:var(--m-r);
    box-shadow:0 18px 50px rgba(0,0,0,.28);padding:1rem}
  .menu__s[data-acik] .menu__ok{transform:translateX(2px)}
}
@media (max-width:1023px){
  .acilir{padding:.2rem .6rem .7rem 2.1rem}
  .menu__s{flex-wrap:wrap}
  .acilir{flex-basis:100%}
  .menu__s[data-acik] .menu__ok{transform:rotate(90deg)}
}
.acilir__h{font-size:var(--m-o1);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--m-sessiz);margin:0 0 .6rem;display:none}
@media (min-width:1024px){.acilir__h{display:block}}
.acilir__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1px}
@media (min-width:1024px){.acilir__l{grid-template-columns:1fr 1fr;gap:1px .5rem}}
.acilir__b{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:6px;
  font-size:var(--m-o2);color:var(--m-sessiz);transition:background .14s,color .14s}
.acilir__b:hover{background:var(--m-vurgu-y);color:var(--m-vurgu)}
.acilir__b span{margin-left:auto;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:10px;opacity:.75}
.acilir__b--bos{opacity:.5}
.acilir__dip{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--m-cizgi);display:none}
@media (min-width:1024px){.acilir__dip{display:block}}


/* Bulunulan kategori. Kategori sayfasinda menu ayni zamanda "neredeyim"
   sorusunu cevapliyor; ana sayfada hicbir satir isaretli degil. */
/* Secili satir. Once zemin tonlu, yazi vurgu rengiydi; gece modunda vurgu
   aciliyor ve tonlu zeminde 4.38:1'e dusuyordu (olculdu). Yazi normal metin
   rengine alindi, isareti solundaki cizgi veriyor. */
.menu__s--bu { background: var(--m-vurgu-y); box-shadow: inset 2px 0 0 var(--m-vurgu); }
.menu__s--bu > .menu__bag { color: var(--m-metin); font-weight: 600; }
.menu__bag[aria-current="page"] { color: var(--m-metin); font-weight: 600; }
.acilir__b[aria-current="page"] { background: var(--m-vurgu-y); color: var(--m-metin); font-weight: 600; }

/* Yan sutunda menu tam genislikte ve yapiskan degil. */
.pi-filtre .menu { width: 100%; }

/* Acilir panelin dip dugmesi KENDI BICIMINI tasiyor.
   Once portal.css'teki .dug kuralina guveniyordu; o dosya kategori
   sayfasinda yuklenmiyor ve dugme bicimsiz kaliyordu -- gece modunda
   koyu zemin uzerinde koyu yazi, 1.8:1 (olculdu). Bilesen kendi kendine
   yetmeli: iki sayfada da ayni gorunsun diye buraya alindi. */
.acilir__dip .dug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--m-cizgi-g);
  background: var(--m-yuzey-2);
  color: var(--m-metin);
  font-size: var(--m-o2);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .16s, background .16s, color .16s;
}
.acilir__dip .dug:hover {
  border-color: var(--m-vurgu);
  background: var(--m-vurgu-y);
  color: var(--m-vurgu);
}

/* ---------------- KATLAMA (yalniz CSS) ----------------
   Ana sayfa disindaki iki sayfada liste sekiz satirda kesiliyor. Butun
   kategoriler KAYNAKTA basili; burada yalnizca goruntuden kaldiriliyor.
   Anahtar gizli bir onay kutusu: JavaScript gerekmiyor, klavyeyle
   calisiyor ve betik dusse liste acik kaliyor. */
.menu__anahtar { position: absolute; opacity: 0; width: 0; height: 0; }

/* nth-child ozel degisken kabul etmiyor, esik burada SABIT: dokuzuncu
   satirdan itibaren gizli, yani ilk sekiz gorunuyor. Parcaya baska bir
   deger verilirse bu kural da guncellenmeli. */
.menu__liste--katli > li:nth-child(n + 9) { display: none; }
.menu__anahtar:checked ~ .menu__liste--katli > li:nth-child(n + 9) { display: flex; }

.menu__tumu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border-top: 1px solid var(--m-cizgi);
  color: var(--m-vurgu);
  font-size: var(--m-o2);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .16s;
}
.menu__tumu:hover { background: var(--m-vurgu-y); }
.menu__tumu b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  background: var(--m-vurgu-y);
  border-radius: 99px;
  padding: .1rem .38rem;
  margin-left: 4px;
}
/* Klavye: onay kutusu gizli oldugu icin odak halkasini etiket tasiyor. */
.menu__anahtar:focus-visible ~ .menu__tumu { outline: 2px solid var(--m-vurgu); outline-offset: -2px; }

.menu__tumu-kapa { display: none; }
.menu__anahtar:checked ~ .menu__tumu .menu__tumu-ac { display: none; }
.menu__anahtar:checked ~ .menu__tumu .menu__tumu-kapa { display: inline; }