/* ==========================================================================
   Ana sayfa — yalnızca `ana-` ön ekli seçiciler (docs/plan-faz3.md Bölüm 6).
   Ortak kabuk (.hero*, .kicker, .btn, .section-head, .gallery, .instagram)
   assets/style.css'te durur ve buradan yeniden kullanılır, kopyalanmaz.
   ========================================================================== */

/* ---------- etkinlik kategorisi slider'ı ---------- */
/* Aynı anda TEK karo görünür; ok ve noktalarla gezilir.
   Kaynak: kategoriler.cocuklar.etkinlikler, yalnızca `tip: liste` olanlar. */
.ana-kategori-slider{
  position:relative;
  width:100%;
}
.ana-kategori-ray{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.ana-kategori-ray::-webkit-scrollbar{display:none;}
.ana-kategori-karo{
  position:relative;
  display:block;
  flex:0 0 100%;
  scroll-snap-align:start;
  overflow:hidden;
  aspect-ratio:16 / 9;
  /* geniş ekranda karo bandını kısa tutar ki duyurular ilk ekranda kalsın */
  max-height:300px;
  border:1px solid var(--line);
  transition:.25s;
}

/* Oklar ve noktalar: karonun üstünde durur, tek karo varsa gizlenir. */
.ana-kategori-ok{
  position:absolute;top:50%;transform:translateY(-50%);
  /* dokunma hedefi 44×44 (WCAG 2.5.5); ok görünür kutulu bir düğme olduğu için
     görünmez hit-area değil, kutunun kendisi büyütülür */
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(200,162,74,0.45);
  background:rgba(12,17,10,0.72);
  color:#e6c877;
  font-size:1.5rem;line-height:1;
  cursor:pointer;
  transition:.2s;
}
.ana-kategori-ok:hover{border-color:var(--gold);background:rgba(12,17,10,0.95);}
.ana-kategori-ok.geri{left:12px;}
.ana-kategori-ok.ileri{right:12px;}
.ana-kategori-ok.geri::before{content:"‹";}
.ana-kategori-ok.ileri::before{content:"›";}
.ana-kategori-noktalar{
  display:flex;justify-content:center;
  /* Boşluk artık düğmenin kendi şeffaf kutusundan geliyor; gap ve üst marj
     eklenirse noktalar birbirinden kopuk görünür. */
  gap:0;
  margin-top:0;
}
/* Düğme = dokunma hedefi (32×44), görünen elmas ::before'da 8px kalır.
   Görünmez ::after hit-area kullanılmadı: noktalar yan yana durduğu için
   alanlar üst üste biner ve komşu nokta öndekinin tıklamasını çalardı.
   Yatayda 32px: 44px olsaydı noktalar arası mesafe iki katına çıkıp küme
   dağılırdı; 32px hem AA eşiğinin (24px) rahat üstünde hem çakışmasız. */
.ana-kategori-noktalar button{
  width:32px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;
  background:transparent;
  cursor:pointer;
}
.ana-kategori-noktalar button::before{
  content:"";
  width:8px;height:8px;
  border:1px solid rgba(200,162,74,0.55);
  background:transparent;
  transform:rotate(45deg);
  transition:.2s;
}
.ana-kategori-noktalar button.active::before{background:var(--gold);}
.ana-kategori-slider.tek-kart .ana-kategori-ok,
.ana-kategori-slider.tek-kart .ana-kategori-noktalar{display:none;}
.ana-kategori-karo img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:.35s;
}
.ana-kategori-karo:hover{border-color:var(--gold);}
.ana-kategori-karo:hover img{transform:scale(1.04);}

/* Perde koyu fotoğrafın üstünde durur. Karo, çerçevenin AÇIK temasının içinde
   yaşadığı için --gold-bright / --parchment-dark burada koyu tonlara çözülüyor;
   okunur kalması için kök temanın karşılıkları birebir yazıldı (yeni değişken
   tanımlanmadı, bkz. Bölüm 6 kural 4). */
.ana-kategori-perde{
  position:absolute;left:0;right:0;bottom:0;
  display:block;
  padding:16px 18px 14px;
  text-align:left;
  background:linear-gradient(to top, rgba(12,17,10,0.94), rgba(12,17,10,0.5) 60%, rgba(12,17,10,0) 100%);
}
.ana-kategori-perde b{
  display:block;
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.04em;
  line-height:1.25;
  color:#e6c877;
  text-shadow:0 2px 12px rgba(0,0,0,0.85);
}
.ana-kategori-perde > span{
  display:block;margin-top:4px;
  font-family:'Cinzel', serif;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#d8caa2;
}

/* Görselsiz karo: panelden eklenen yeni kategorinin fotoğrafı olmayabilir.
   Bu blok SİLİNMEZ (Bölüm 16). */
.ana-kategori-karo.gorselsiz{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg, var(--forest), var(--forest-2));
}
.ana-kategori-run{
  font-size:2.4rem;line-height:1;
  color:rgba(200,162,74,0.5);
}

/* ---------- duyurular ---------- */
/* Kartlar ortak .hero-duyuru bileşenidir; burada yalnızca yerleşim tanımlanır. */
.ana-duyuru-izgara{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

/* ---------- sağ sütun: Biz Kimiz ---------- */
/* Metni Hakkımızda sayfasından bağımsızdır (bkz. index.njk yorumu). */
.ana-bizkimiz{
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.ana-bizkimiz-metin{
  margin-top:10px;
  font-size:.95rem;
  line-height:1.6;
}

@media (max-width:1080px){
  /* hero-content tek sütuna düşüp ortalanıyor; karo yüksekliği serbest kalsın */
  .ana-kategori-karo{max-height:none;}
}

@media (max-width:820px){
  .ana-duyuru-izgara{grid-template-columns:1fr;}
}