/* 2026 homepage visual and WhatsApp art direction */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.18);
  border-top-color: rgba(239,38,52,.9);
  border-right-color: rgba(255,255,255,.05);
  border-bottom-width: 2px;
  border-radius: 50%;
  width: min(34vw, 520px);
  aspect-ratio: 1;
  right: 7vw;
  top: 18%;
  box-shadow: 0 0 34px rgba(239,38,52,.08), inset 0 0 34px rgba(239,38,52,.05);
  animation: hero-ring-spin 13s linear infinite, hero-ring-pulse 3.2s ease-in-out infinite;
}
.hero::after {
  width: min(23vw, 350px);
  right: 12.5vw;
  top: 28%;
  border-color: rgba(239,38,52,.7) transparent rgba(255,255,255,.24) transparent;
  border-width: 2px 1px 1px;
  box-shadow: 0 0 26px rgba(239,38,52,.16);
  animation: hero-ring-spin-reverse 8s linear infinite, hero-ring-pulse 2.2s ease-in-out -1s infinite;
}
.hero-image {
  background-image: url('/brand/yusuf-ercan-hero-studio.jpg') !important;
  background-position: center 44% !important;
  filter: grayscale(.18) contrast(1.08) brightness(.82);
  animation: hero-studio-drift 16s cubic-bezier(.45,0,.55,1) infinite alternate !important;
}
.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 35%, rgba(255,255,255,.07) 48%, transparent 57%);
  transform: translateX(-120%);
  animation: hero-light-pass 9s ease-in-out 2s infinite;
}
.hero-live-stamps {
  z-index: 4;
  position: absolute;
  top: 19%;
  right: 4.5vw;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.75);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .2em;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right top;
}
.hero-live-stamps i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef2634;
  box-shadow: 0 0 16px #ef2634;
  animation: hero-live-pulse 1.5s ease-in-out infinite;
}
.hero-ink-word {
  position: absolute;
  z-index: 2;
  right: -1.2vw;
  bottom: 4%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  font-size: clamp(88px, 15vw, 240px);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.08em;
  pointer-events: none;
  animation: ink-word-breathe 6s ease-in-out infinite;
}

/* Red-black custom WhatsApp control; the icon is drawn in CSS. */
.smart-wa-trigger {
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(145deg,#171717,#090909) !important;
  border: 1px solid rgba(239,38,52,.48) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(239,38,52,.12) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  animation: wa-button-float 3.4s ease-in-out infinite;
}
.smart-wa-trigger:hover,
.smart-wa-trigger:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,92,103,.9) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.5), 0 0 28px rgba(239,38,52,.22) !important;
  outline: none;
}
.wa-icon {
  font-size: 0 !important;
  color: #fff !important;
  background: linear-gradient(145deg,#ef2634,#8e0710) !important;
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 18px rgba(183,13,24,.42);
  transform: rotate(-6deg);
}
.wa-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 49%;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.wa-icon::after {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-18deg);
}
.smart-wa-trigger > i {
  background: #ef2634 !important;
  box-shadow: 0 0 13px #ef2634 !important;
}
.smart-wa-trigger::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7px;
  border: 1px solid rgba(239,38,52,.35);
  border-radius: 8px;
  animation: wa-signal 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes hero-studio-drift { to { transform: scale(1.055) translate3d(-.6%, -.4%, 0); } }
@keyframes hero-ring-spin { to { transform: rotate(360deg); } }
@keyframes hero-ring-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes hero-ring-pulse { 50% { opacity: .38; filter: drop-shadow(0 0 12px rgba(239,38,52,.7)); } }
@keyframes hero-light-pass { 0%,55% { transform: translateX(-120%); } 78%,100% { transform: translateX(120%); } }
@keyframes hero-live-pulse { 50% { opacity: .3; transform: scale(.65); } }
@keyframes ink-word-breathe { 50% { opacity: .42; transform: translateX(-10px); } }
@keyframes wa-button-float { 50% { transform: translateY(-5px); } }
@keyframes wa-signal { 70%,100% { opacity: 0; transform: scale(1.09); } }

@media (max-width: 620px) {
  .hero { min-height: 700px !important; }
  .hero::before { width: 88vw; right: -42vw; top: 108px; opacity: .86; animation-duration: 8s,2.5s; }
  .hero::after { width: 54vw; right: -24vw; top: 158px; opacity: .95; animation-duration: 5s,1.8s; }
  .hero-image {
    inset: 78px 0 auto !important;
    width: 100%;
    height: 342px !important;
    background-size: cover !important;
    background-position: center 35% !important;
    filter: grayscale(.1) contrast(1.06) brightness(.88);
    animation: hero-studio-mobile 13s ease-in-out infinite alternate !important;
  }
  .hero-shade { background: linear-gradient(180deg,rgba(9,9,9,.04) 16%,rgba(9,9,9,.22) 37%,#090909 55%,#090909 100%) !important; }
  .hero-live-stamps { display: none !important; }
  .hero-content { margin-bottom: 72px !important; }
  .hero-actions { display: none !important; }
  .hero-copy { margin-top: 28px !important; }
  .hero-ink-word { right: -5vw; bottom: 7%; font-size: 24vw; opacity: .38; }
  .smart-wa-trigger { box-shadow: 0 13px 34px rgba(0,0,0,.52), 0 0 24px rgba(239,38,52,.18) !important; }
  .smart-wa-trigger::after { border-radius: 50%; }
}
@keyframes hero-studio-mobile { to { transform: scale(1.035) translate3d(0,-3px,0); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before,.hero::after,.hero-image,.hero-shade::after,.hero-live-stamps i,.hero-ink-word,.smart-wa-trigger,.smart-wa-trigger::after { animation: none !important; }
}