:root{
  --er-hero-h: 340px;
  --er-hero-h-lg: 420px;
  --er-hero-overlay: rgba(0,0,0,.45);
  --er-hero-gradient: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}

/* Liste sayfası (hizmetler.php) */
.services-hero{
  min-height: var(--er-hero-h);
  padding: 56px 0;
  color:#fff;
  background:
    var(--er-hero-gradient),
    var(--er-hero-overlay),
    url('/assets/img/headers/services.jpg') center/cover no-repeat;
}
@media (min-width: 992px){
  .services-hero{ min-height: var(--er-hero-h-lg); padding: 72px 0; }
}

/* Detay sayfası (service.php) — arka plan PHP’den geliyor */
.service-hero{
  min-height: 380px;
  padding: 56px 0;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    rgba(0,0,0,.45),
    var(--hero-url) center/cover no-repeat; /* <-- önemli */
}

.service-hero .breadcrumb,
.services-hero .breadcrumb{ --bs-breadcrumb-divider:'›'; }
.service-hero .breadcrumb .breadcrumb-item a,
.services-hero .breadcrumb .breadcrumb-item a{ color:rgba(255,255,255,.95); text-decoration:none; }
.service-hero .breadcrumb .breadcrumb-item.active,
.services-hero .breadcrumb .breadcrumb-item.active{ color:rgba(255,255,255,.85); }
.service-hero .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.services-hero .breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.65); }

.service-hero h1, .service-hero p,
.services-hero h1, .services-hero p{ text-shadow:0 2px 10px rgba(0,0,0,.35); }
:root{
  --er-hero-h: 340px;
  --er-hero-h-lg: 420px;
  --er-hero-overlay: rgba(0,0,0,.45);
  --er-hero-gradient: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}

/* Detay sayfası hero (service.php) — arka plan PHP’den geliyor */
.service-hero{
  min-height: var(--er-hero-h);
  padding: 56px 0;
  color:#fff;
  background:
    var(--er-hero-gradient),
    var(--er-hero-overlay),
    var(--hero-url) center/cover no-repeat;
}
@media (min-width: 992px){
  .service-hero{ min-height: var(--er-hero-h-lg); padding: 72px 0; }
}

.service-hero .breadcrumb{
  --bs-breadcrumb-divider: '›';
}
.service-hero .breadcrumb .breadcrumb-item a{ color:rgba(255,255,255,.95); text-decoration:none; }
.service-hero .breadcrumb .breadcrumb-item.active{ color:rgba(255,255,255,.85); }
.service-hero .breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.65); }

.service-hero h1, .service-hero p{ text-shadow:0 2px 10px rgba(0,0,0,.35); }

.er-header{
  position:sticky; top:0; z-index:9999;
  background:#2d3ddf; /* senin görseldeki maviye yakın */
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.er-header .wrap{
  max-width:1200px; margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.er-brand{ display:flex; align-items:center; gap:8px; }
.er-brand a{ color:#fff; font-weight:700; font-size:20px; text-decoration:none; }

.er-nav{ display:flex; gap:22px; align-items:center; }
.er-nav a{ color:#fff; text-decoration:none; font-weight:500; font-size:14px; }
.er-nav a.active, .er-nav a:hover{ color:#ff4c4c; }

/* Dropdown */
.er-dropdown{ position:relative; }
.er-dropdown > a{ display:flex; align-items:center; gap:4px; }
.er-menu{
  position:absolute; top:100%; left:0;
  min-width:200px; background:#1e2230; border-radius:8px;
  padding:8px; display:none;
}
.er-menu a{ display:block; padding:6px 10px; color:#fff; border-radius:6px; }
.er-menu a:hover{ background:rgba(255,255,255,.1); }
.er-dropdown:hover .er-menu{ display:block; }

/* Mobil */
.er-burger{ display:none; color:#fff; font-size:22px; cursor:pointer; }
@media (max-width:992px){
  .er-burger{ display:block; }
  .er-nav{ display:none; flex-direction:column; gap:10px;
           position:absolute; left:0; right:0; top:60px; background:#1e2230; padding:10px; }
  .er-nav.open{ display:flex; }
  .er-menu{ position:static; display:block; background:transparent; border:none; padding:0; }
}