/* ============================================
   LINK TEKSTİL — HERO OVERLAY SYSTEM
   Copper Sweep: 3-layer hero enhancement
   ============================================ */

/* ─── BASE OVERLAY ───────────────────────────
   Replaces bg-black/65 and bg-black/75.
   Photo is ~72% visible.
   ─────────────────────────────────────────── */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.28);
}

/* ─── COPPER SWEEP ───────────────────────────
   Top-left copper light → bottom-right dark.
   Adds brand warmth + text readability.
   ─────────────────────────────────────────── */
.hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(184, 149, 90, 0.16) 0%,
    rgba(184, 149, 90, 0.06) 25%,
    transparent 55%,
    rgba(8, 6, 4, 0.52) 100%
  );
}

/* ─── GRAIN TEXTURE ──────────────────────────
   SVG noise for editorial print feel.
   opacity intentionally very low (0.035).
   ─────────────────────────────────────────── */
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ─── HERO SECTION WRAPPER ───────────────────
   Bottom border accent on hero sections.
   ─────────────────────────────────────────── */
.hero-section-wrap {
  border-bottom: 1px solid rgba(184, 149, 90, 0.25);
}

/* ─── GRADIENT VARIANT ───────────────────────
   For hero sections that need bottom-fade
   (text at bottom needs strong readability).
   Use: add both .hero-overlay and .hero-overlay--bottom
   ─────────────────────────────────────────── */
.hero-overlay--bottom::before {
  background: linear-gradient(
    180deg,
    rgba(184, 149, 90, 0.10) 0%,
    transparent 40%,
    rgba(8, 6, 4, 0.65) 100%
  );
}

/* ─── RESPONSIVE ─────────────────────────────
   On mobile grain is less needed.
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-overlay::after {
    opacity: 0.02;
  }
}