/* =========================================================
   Adea Reklam — Hizmet sayfaları için "capcanlı" görünüm
   Mevcut .hero bloğunu CSS değişkeniyle GIF arka plana dönüştürür.
   Sayfa içine: <section class="hero" style="--srv-bg:url('../assets/img/banner/X.gif');">
========================================================= */

/* ----- Hero (alt hizmet sayfaları) ----- */
.hero[style*="--srv-bg"]{
  position:relative;
  min-height:520px;
  display:flex; align-items:center;
  color:#fff;
  background-image: var(--srv-bg);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  isolation:isolate;
}
.hero[style*="--srv-bg"]::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 420px at 85% 18%, rgba(196,181,253,.30), transparent 60%),
    radial-gradient(1100px 500px at 18% 28%, rgba(253,184,19,.20), transparent 60%),
    linear-gradient(180deg, rgba(59,46,110,.55) 0%, rgba(59,46,110,.88) 100%);
  animation:srv-fade .8s ease both;
}
@keyframes srv-fade{ from{ opacity:0; } to{ opacity:1; } }

.hero[style*="--srv-bg"] > .container{
  position:relative; z-index:2;
  width:100%;
  padding-top:5.5rem; padding-bottom:5.5rem;
}
.hero[style*="--srv-bg"] .hero__grid{
  display:block !important;
  grid-template-columns:none !important;
  max-width:820px;
}
.hero[style*="--srv-bg"] .hero__visual{ display:none !important; }

.hero[style*="--srv-bg"] .eyebrow{
  display:inline-block;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#FDE68A !important;
  letter-spacing:.05em;
  padding:.4rem .9rem;
  border-radius:999px;
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
}

.hero[style*="--srv-bg"] .hero__title,
.hero[style*="--srv-bg"] h1{
  color:#fff !important;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  line-height:1.06;
  margin:.9rem 0 1.1rem;
  max-width:22ch;
}
.hero[style*="--srv-bg"] .hero__title em,
.hero[style*="--srv-bg"] h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#FDB813,#F59E0B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero[style*="--srv-bg"] .hero__lead{
  color:rgba(255,255,255,.88) !important;
  font-size:1.06rem;
  line-height:1.6;
  max-width:62ch;
  margin:0 0 1.5rem;
}

.hero[style*="--srv-bg"] .hero__ctas{
  display:flex; gap:.75rem; flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.hero[style*="--srv-bg"] .btn--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  background:transparent;
}
.hero[style*="--srv-bg"] .btn--ghost:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.7);
}

.hero[style*="--srv-bg"] .hero__trust{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  color:rgba(255,255,255,.85) !important;
  font-size:.92rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero[style*="--srv-bg"] .hero__trust span{
  display:inline-flex; align-items:center; gap:.4rem;
}

/* ----- Split media canlandırma ----- */
.split__media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(59,46,110,.14);
  background:#3B2E6E;
}
.split__media img{
  transition:transform .8s ease, filter .5s ease;
}
.split__media:hover img{
  transform:scale(1.05);
  filter:saturate(1.1);
}

/* ----- Why kart hover ----- */
.why__item{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.why__item:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(59,46,110,.10);
  border-color:rgba(253,184,19,.35);
}
.why__icon{ transition:transform .35s ease, background .35s ease; }
.why__item:hover .why__icon{ transform:rotate(-6deg) scale(1.06); }

/* ----- Service grid card hover ----- */
.card{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(59,46,110,.10);
  border-color:rgba(253,184,19,.35);
}

/* ----- Süreç hover ----- */
.process__item{ transition:transform .35s ease, box-shadow .35s ease; }
.process__item:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(59,46,110,.10);
}

/* =========================================================
   Hizmetler ana sayfası — 3 GIF rotasyonlu hero (.srv-hub)
========================================================= */
.srv-hub{
  position:relative;
  min-height:580px;
  display:flex; align-items:center;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.srv-hub__bg{ position:absolute; inset:0; z-index:0; }
.srv-hub__bg-frame{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1.2s ease;
}
.srv-hub__bg-frame.is-active{ opacity:1; }
.srv-hub::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(900px 420px at 15% 80%, rgba(196,181,253,.30), transparent 60%),
    radial-gradient(1100px 500px at 80% 20%, rgba(253,184,19,.20), transparent 60%),
    linear-gradient(180deg, rgba(59,46,110,.5) 0%, rgba(59,46,110,.86) 100%);
}
.srv-hub > .container{
  position:relative; z-index:2; width:100%;
  padding-top:6rem; padding-bottom:6rem;
  text-align:center;
}
.srv-hub__eyebrow{
  display:inline-block;
  padding:.4rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#FDE68A; font-weight:700; letter-spacing:.05em;
  font-size:.78rem; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.srv-hub h1{
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.06; margin:.9rem auto 1.1rem;
  color:#fff; max-width:22ch;
}
.srv-hub h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#FDB813,#F59E0B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.srv-hub p.lead{
  color:rgba(255,255,255,.88);
  font-size:1.06rem; line-height:1.6;
  max-width:62ch; margin:0 auto 1.5rem;
}
.srv-hub__ctas{
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
}
.srv-hub__ctas .btn--ghost{
  color:#fff; border:1px solid rgba(255,255,255,.45); background:transparent;
}
.srv-hub__ctas .btn--ghost:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.7);
}
.srv-hub__chips{
  display:flex; gap:.45rem; flex-wrap:wrap;
  justify-content:center; margin:1.4rem 0 0;
}
.srv-hub__chip{
  font-size:.82rem; padding:.4rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}