/* ═══════════════════════════════════════════════════════════════════════
   AURORA — ANASAYFA KATEGORİ BÖLÜMÜ (.au-kat)  ·  markup: index.php
   Fotoğraf kartın tamamını kaplar; alttan yükselen lacivert perde üstünde
   kondanse beyaz başlık + ürün sayısı, sağ altta ok düğmesi.
   Masaüstü: tam ızgara (5/4/3 sütun, kesik kart yok).
   Mobil: kenardan kenara scroll-snap rayı, üçüncü kart "peek" eder.
   ═══════════════════════════════════════════════════════════════════════ */
.au-kat-alani{
  --kat-laci:#052a41; --kat-laci-2:#061c2c; --kat-mavi:var(--theme-color,#01a5df);
  --kat-r:20px; --kat-gap:18px;
}

/* ── başlık satırı ── */
.au-kat-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.au-kat-bas .title-area{margin-bottom:0}
.au-kat-bas .sec-title{margin-bottom:0}
.au-kat-hepsi{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:0 8px 0 18px;height:46px;border-radius:999px;
  border:1.5px solid rgba(5,42,65,.16);background:#fff;color:var(--kat-laci);
  font-family:"Barlow Condensed","Jost",sans-serif;font-size:14.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;transition:border-color .3s,box-shadow .3s,transform .3s;
}
.au-kat-hepsi i{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--kat-laci);color:#fff;font-size:12px;transition:background .3s,transform .3s;
}
.au-kat-hepsi:hover{color:var(--kat-laci);border-color:var(--kat-mavi);box-shadow:0 10px 24px -14px rgba(5,42,65,.5);transform:translateY(-2px)}
.au-kat-hepsi:hover i{background:var(--kat-mavi);transform:translateX(2px)}

/* ── ızgara ── */
.au-kat-izgara{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--kat-gap)}
@media (max-width:1199px){ .au-kat-izgara{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:991px){  .au-kat-izgara{grid-template-columns:repeat(3,minmax(0,1fr));--kat-gap:14px} }

/* ── kart ── */
.au-kat{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:1/1;border-radius:var(--kat-r);background:var(--kat-laci-2);
  color:#fff;text-decoration:none;
  box-shadow:0 14px 34px -24px rgba(5,32,49,.6);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;
  transform:translateZ(0);
}
.au-kat:hover,.au-kat:focus-visible{color:#fff;transform:translateY(-6px);box-shadow:0 26px 44px -22px rgba(5,32,49,.55)}
.au-kat:focus-visible{outline:3px solid var(--kat-mavi);outline-offset:3px}

.au-kat__img{position:absolute;inset:0;z-index:0}
.au-kat__img img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;
}
.au-kat:hover .au-kat__img img{transform:scale(1.08);filter:saturate(1.08)}

/* fotoğrafsız yedek: lacivert zemin + soluk büyük ikon */
.au-kat__ikon{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 30% 20%,#0b4a6e,var(--kat-laci-2) 70%);
}
.au-kat__ikon i{font-size:96px;opacity:.28;color:#fff}
.au-kat__ikon img{width:96px;height:96px;opacity:.28;filter:brightness(0) invert(1)}

/* perde: alttan yükselen lacivert, üstte hafif iç ışık */
.au-kat__perde{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,32,49,0) 42%,rgba(5,32,49,.62) 74%,rgba(5,32,49,.92) 100%);
  transition:opacity .45s;
}
.au-kat::after{ /* ince cam kenar — fotoğraf ne kadar açık olursa olsun kart sınırı okunur */
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}

/* alt satır: başlık + sayı | ok */
.au-kat__alt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:16px 16px 16px 18px;
}
.au-kat__baslik{
  margin:0;font-family:"Barlow Condensed","Jost",sans-serif;font-size:22px;font-weight:700;line-height:1.05;
  letter-spacing:.035em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.au-kat__sayi{
  display:block;margin-top:5px;font-family:var(--body-font,"DM Sans",sans-serif);
  font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.78);
}
.au-kat__ok{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--kat-laci);font-size:14px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
  transition:background .3s,color .3s,transform .45s cubic-bezier(.22,1,.36,1);
}
.au-kat__ok i{transition:transform .3s}
.au-kat:hover .au-kat__ok{background:var(--kat-mavi);color:#fff;transform:rotate(-45deg)}

/* ── giriş animasyonu (IntersectionObserver .au-kat--goster ekler) ── */
.au-kat{opacity:0;translate:0 18px}
.au-kat.au-kat--goster{opacity:1;translate:0 0;transition:opacity .6s ease,translate .7s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.no-js .au-kat,.au-kat-izgara.au-kat--hazir .au-kat{opacity:1;translate:0 0}

/* ── mobil: kaydırma rayı ── */
@media (max-width:767px){
  .au-kat-alani{--kat-r:16px}
  .au-kat-bas{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
  .au-kat-bas .title-area{text-align:left!important}
  .au-kat-hepsi{height:42px;font-size:13.5px}
  .au-kat-izgara{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:6px 16px 14px;scroll-padding-inline:16px;
    scrollbar-width:none;
  }
  .au-kat-izgara::-webkit-scrollbar{display:none}
  .au-kat{flex:0 0 44%;scroll-snap-align:start;box-shadow:0 10px 24px -18px rgba(5,32,49,.6)}
  .au-kat:hover{transform:none}
  .au-kat__alt{padding:12px 12px 12px 14px}
  .au-kat__baslik{font-size:18px}
  .au-kat__sayi{font-size:11.5px;margin-top:3px}
  .au-kat__ok{width:34px;height:34px;font-size:12px}
  .au-kat{opacity:1;translate:0 0} /* rayda animasyon yok — ilk kartlar anında görünsün */
}
@media (max-width:400px){ .au-kat{flex-basis:52%} }

@media (prefers-reduced-motion:reduce){
  .au-kat,.au-kat__img img,.au-kat__ok,.au-kat__ok i,.au-kat-hepsi,.au-kat-hepsi i{transition:none}
  .au-kat{opacity:1;translate:0 0}
  .au-kat:hover{transform:none}
  .au-kat:hover .au-kat__img img{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   POPÜLER ÜRÜNLER — KATEGORİ SEKMELERİ (.au-sekme)  ·  markup: index.php
   Beyaz hap ray içinde kondanse büyük harf sekmeler; seçili sekmenin altında
   kayan lacivert "iz" (JS: .au-sekme__iz genişlik + translateX). Sekmeler
   sığmazsa ray yatay kayar (scrollbar gizli), seçili sekme görünüre getirilir.
   ═══════════════════════════════════════════════════════════════════════ */
.au-sekme-kap{display:flex;justify-content:flex-end;max-width:100%;margin-bottom:var(--section-title-space,60px)}
.au-sekme.nav{flex-wrap:nowrap;justify-content:flex-start;padding-left:5px;margin-bottom:0}
.au-sekme{
  position:relative;display:flex;gap:2px;width:max-content;max-width:100%;
  padding:5px;border-radius:999px;background:#fff;
  border:1.5px solid rgba(5,42,65,.10);box-shadow:0 10px 26px -20px rgba(5,32,49,.45);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.au-sekme::-webkit-scrollbar{display:none}
.au-sekme__iz{
  position:absolute;top:5px;left:0;height:40px;width:0;border-radius:999px;z-index:0;
  background:#052a41;opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.au-sekme.au-sekme--hazir .au-sekme__iz{opacity:1}
.au-sekme__btn{
  position:relative;z-index:1;flex:0 0 auto;scroll-snap-align:start;
  height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  font-family:"Barlow Condensed","Jost",sans-serif;font-size:14.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#052a41;white-space:nowrap;cursor:pointer;line-height:1;
  transition:color .3s,background .3s;
}
.au-sekme__btn:hover:not(.active){color:var(--theme-color,#01a5df);background:rgba(1,165,223,.07)}
.au-sekme__btn.active{color:#fff}
.au-sekme__btn:focus-visible{outline:2px solid var(--theme-color,#01a5df);outline-offset:2px}
/* JS yoksa / iz hazır değilse seçili sekme yine okunsun */
.au-sekme:not(.au-sekme--hazir) .au-sekme__btn.active{background:#052a41}

@media (max-width:991px){
  .au-sekme-kap{justify-content:center;margin-top:-18px}
}
@media (max-width:767px){
  .au-sekme-kap{justify-content:flex-start;margin:-14px -16px 34px;padding:0 16px}
  .au-sekme{border-radius:999px;padding:4px}
  .au-sekme__iz{top:4px;height:38px}
  .au-sekme__btn{height:38px;padding:0 15px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){ .au-sekme__iz,.au-sekme__btn{transition:none} }