/* ─── BANNER SECTION ─── */
.section-banner { position:relative; width:100%; overflow:hidden; }
.section-banner a { display:block; width:100%; text-decoration:none; }
.section-banner img { width:100%; height:auto; max-height:280px; object-fit:cover; display:block; }
.section-banner .banner-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:1.5rem; text-align:center; }
.section-banner .banner-overlay h2 { font-size:1.5rem; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.3); margin:0; }
.section-banner .banner-overlay p { font-size:1rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.3); margin-top:.4rem; }

/* ─── TEXT SECTION ─── */
.section-text { padding:1.5rem 0; }
.section-text .text-content { max-width:680px; margin:0 auto; line-height:1.7; font-size:0.95rem; color:var(--foreground); }
.section-text .text-content h2 { font-size:1.25rem; font-weight:700; margin-bottom:.75rem; }

/* ─── CATEGORIES SECTION ─── */
.section-categories { padding:1.5rem 0; }
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.75rem; }
.category-card { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.25rem 1rem; border-radius:var(--radius-md); background:var(--card); border:1px solid var(--border); text-decoration:none; transition:all .2s; text-align:center; }
.category-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px -10px color-mix(in srgb, var(--primary) 22%, rgba(0,0,0,.12)); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.category-card img { width:48px; height:48px; border-radius:var(--radius-sm); object-fit:cover; }
.category-card span { font-weight:600; font-size:.82rem; color:var(--foreground); }

/* ─── SECTION DIVIDER ─── */
.section-divider { height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 30%, var(--border)) 50%, transparent); margin:0; }

/* ─── HERO SECTION (mevcut CSS'i override etmeden ek stiller) ─── */
.hero .container { position:relative; z-index:1; }

/* ─── RESPONSIVE ─── */
@media(max-width:768px) {
  .section-banner img { max-height:180px; }
  .section-banner .banner-overlay h2 { font-size:1.2rem; }
  .categories-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .section-text { padding:1rem 0; }
}