/* Custom styles for the Hygiene Barrier site */
:root{
  --glass-bg: rgba(255,255,255,0.06);
}

.noise-overlay{
  position:absolute; inset:0; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.06"/></svg>');
}

.nav-link{ color: rgba(255,255,255,0.8); transition: color .2s ease; position: relative; }
.nav-link:hover{ color: #fff; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background: linear-gradient(90deg,#0ea5e9,#22d3ee); border-radius:2px; }
.mobile-link{ display:block; padding: .5rem; border-radius:.5rem; color: rgba(255,255,255,0.8); transition: all .2s ease; }
.mobile-link:hover{ color:#fff; background: rgba(255,255,255,0.05); }
.mobile-link.active{ color:#fff; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); }
.btn-primary{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:.75rem; background: linear-gradient(90deg,#0ea5e9,#22d3ee); color:#0f172a; font-weight:600; box-shadow: 0 10px 25px -10px rgba(14,165,233,0.5); transition: filter .2s ease; }
.btn-primary:hover{ filter: brightness(1.1); }
.btn-secondary{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:.75rem; background: rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.15); transition: background .2s ease; }
.btn-secondary:hover{ background: rgba(255,255,255,0.15); }
.btn-link{ color:#7dd3fc; transition: color .2s ease; }
.btn-link:hover{ color:#fff; }

.glass-card{ border-radius:1rem; background: var(--glass-bg); border:1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6); }
/* Form inputs */
.input-modern, .textarea-modern{
  width: 100%;
  padding: .65rem .9rem;
  border-radius: .75rem;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-modern option{ color:#0f172a; background:#ffffff; }
.input-modern optgroup{ color:#0f172a; background:#ffffff; }
.input-modern:disabled{ opacity:.6; cursor:not-allowed; }
.input-modern::placeholder, .textarea-modern::placeholder{ color: rgba(255,255,255,0.5); }
.input-modern:focus, .textarea-modern:focus{
  border-color: rgba(56,189,248,0.6);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.18);
  background: rgba(255,255,255,0.08);
}
.textarea-modern{ min-height: 9rem; resize: vertical; }
/* Hero media card should not show the subtle border */
.hero-media{ border: none; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6); }
.section-title{ font-size: clamp(1.5rem, 2vw + 1rem, 2rem); font-weight:800; }
.section-sub{ color: rgba(255,255,255,0.7); margin-top:.25rem; }

/* Centered page hero heading (e.g., Products) */
.hero-kicker{ display:inline-block; padding:.25rem .6rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#7dd3fc; background: rgba(125,211,252,0.08); border:1px solid rgba(125,211,252,0.2); border-radius:.5rem; }
.title-hero{ text-align:center; font-size: clamp(2rem, 3.5vw + 1rem, 3rem); font-weight:800; line-height:1.1; margin-top:.6rem; letter-spacing:-0.02em; position:relative; }
.title-hero::after{ content:""; display:block; width:96px; height:4px; margin:12px auto 0; border-radius:9999px; background: linear-gradient(90deg,#0ea5e9,#22d3ee); box-shadow: 0 0 0 3px rgba(14,165,233,0.15), 0 6px 22px rgba(34,211,238,0.35); }
.subtitle-center{ text-align:center; color: rgba(255,255,255,0.7); margin-top:.5rem; max-width: 52ch; margin-left:auto; margin-right:auto; }

/* Header logo: turnstile walking man animation */
.logo-anim-host{ position: relative; display:inline-block; }
.turnstile-anim{ position:absolute; top:50%; left:100%; margin-left:0; transform: translateY(-50%); width: 240px; height: 84px; pointer-events:none; overflow:visible; z-index: 0; }
.turnstile-anim svg{ width:100%; height:100%; overflow:visible; }
@media (max-width: 768px){ .turnstile-anim{ display:none; } }

/* Stickman articulated animations */
@keyframes walkAcross{
  0% { transform: translate(140px,0); }
  45% { transform: translate(0,0); }
  100% { transform: translate(-140px,0); }
}
@keyframes dirtyVisible{ 0%,40%{opacity:1} 50%,100%{opacity:0} }
@keyframes cleanVisible{ 0%,50%{opacity:0} 60%,100%{opacity:1} }
@keyframes hipSway{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(1.2px); } }
@keyframes shoulderSway{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1.2px); } }
/* Legs */
@keyframes thighForward { 0%,100%{ transform: rotate(24deg); } 50%{ transform: rotate(-18deg); } }
@keyframes thighBackward { 0%,100%{ transform: rotate(-18deg); } 50%{ transform: rotate(24deg); } }
@keyframes shinSwing { 0%,100%{ transform: rotate(-6deg); } 50%{ transform: rotate(18deg); } }
@keyframes shinSwingOpp { 0%,100%{ transform: rotate(18deg); } 50%{ transform: rotate(-6deg); } }
/* Arms */
@keyframes upperArmForward { 0%,100%{ transform: rotate(-20deg); } 50%{ transform: rotate(24deg); } }
@keyframes upperArmBackward { 0%,100%{ transform: rotate(24deg); } 50%{ transform: rotate(-20deg); } }
@keyframes forearmSwing { 0%,100%{ transform: rotate(6deg); } 50%{ transform: rotate(-12deg); } }
@keyframes forearmSwingOpp { 0%,100%{ transform: rotate(-12deg); } 50%{ transform: rotate(6deg); } }

.walker{ transform-origin:center; animation: walkAcross 5.5s linear infinite; }
.actor-scale{ transform-origin:center; transform: scale(1.22); }
.walker .hip{ animation: hipSway 0.9s ease-in-out infinite; }
.walker .shoulder{ animation: shoulderSway 0.9s ease-in-out infinite; }
.walker .thigh.l{ transform-origin: 0 0; animation: thighForward 0.9s ease-in-out infinite; }
.walker .thigh.r{ transform-origin: 0 0; animation: thighBackward 0.9s ease-in-out infinite; }
.walker .shin.l{ transform-origin: 0 0; animation: shinSwing 0.9s ease-in-out infinite; }
.walker .shin.r{ transform-origin: 0 0; animation: shinSwingOpp 0.9s ease-in-out infinite; }
.walker .uarm.l{ transform-origin: 0 0; animation: upperArmBackward 0.9s ease-in-out infinite; }
.walker .uarm.r{ transform-origin: 0 0; animation: upperArmForward 0.9s ease-in-out infinite; }
.walker .farm.l{ transform-origin: 0 0; animation: forearmSwingOpp 0.9s ease-in-out infinite; }
.walker .farm.r{ transform-origin: 0 0; animation: forearmSwing 0.9s ease-in-out infinite; }
.walker.dirty{ filter: saturate(0.7) sepia(0.6) hue-rotate(320deg) brightness(0.9); animation-name: walkAcross, dirtyVisible; animation-duration: 5.5s, 5.5s; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; }
.walker.clean{ filter: saturate(1.1) brightness(1.1); animation-name: walkAcross, cleanVisible; animation-duration: 5.5s, 5.5s; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; }

/* Gate arms spin around logo area to mimic a turnstile */
@keyframes gateStep{
  0%,40%{ transform: rotate(0deg); }
  45%{ transform: rotate(40deg); }
  55%{ transform: rotate(85deg); }
  62%{ transform: rotate(120deg); }
  100%{ transform: rotate(120deg); }
}
.gate{ transform-box: fill-box; transform-origin: 0px 4px; animation: gateStep 5.5s ease-in-out infinite; }
.gate-arm{ stroke: rgba(255,255,255,0.8); stroke-width: 2; stroke-linecap: round; }
.gate-post{ stroke: rgba(255,255,255,0.5); stroke-width: 3; }
.gate-glow{ filter: drop-shadow(0 0 6px rgba(56,189,248,0.35)); }

/* Make sure logo appears above for turnstile feel */
header a[href$="index.html"], header .site-logo{ position: relative; z-index: 1; }

.product-card{ position:relative; display:block; border-radius:1rem; overflow:hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border:1px solid rgba(148,163,184,0.18); background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(15,23,42,0.6)); box-shadow: 0 20px 50px -20px rgba(2,132,199,0.25); }
.product-card:hover{ transform: translateY(-4px); box-shadow: 0 30px 70px -25px rgba(56,189,248,0.35); border-color: rgba(148,163,184,0.28); }
/* Dekoratif parıltı */
.product-card::before{ content:""; position:absolute; inset:-40% -40% auto auto; width:220px; height:220px; background: radial-gradient(closest-side, rgba(34,211,238,0.18), transparent 70%); filter: blur(12px); transform: translate(40px,-40px) rotate(15deg); pointer-events:none; }
.product-card:hover::before{ background: radial-gradient(closest-side, rgba(56,189,248,0.24), transparent 70%); }
/* Kare görsel alanı */
.product-card .product-thumb{ aspect-ratio: 1 / 1; display:grid; place-items:center; padding: 12px; border-radius:1rem 1rem 0 0; background:
  radial-gradient(80% 80% at 20% 20%, rgba(14,165,233,0.20), transparent 60%),
  radial-gradient(70% 70% at 85% 25%, rgba(99,102,241,0.18), transparent 60%),
  linear-gradient(180deg, rgba(2,6,23,0.85), rgba(15,23,42,0.85));
  position: relative; }
.product-card .product-thumb::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 -30px 60px rgba(0,0,0,0.25); }
.product-card .product-thumb img{ width:100%; height:100%; object-fit:contain; display:block; transition: transform 0.35s ease, filter 0.35s ease; }
.product-card:hover .product-thumb img{ transform: scale(1.06); filter: drop-shadow(0 6px 20px rgba(0,0,0,0.3)); }
.product-card h3{ font-size:1.125rem; font-weight:700; }
.product-card p{ color: rgba(255,255,255,0.7); font-size:.9rem; margin-top:.25rem; }
.product-card .p-5{ padding:1.25rem; }

/* Product card text area styling */
.product-card .p-4{ background:
  linear-gradient(180deg, rgba(2,6,23,0.2), rgba(2,6,23,0.45));
  border-top:1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 1rem 1rem; }

.stat{ text-align:center; background: rgba(255,255,255,0.05); border-radius:.75rem; padding:.75rem; border:1px solid rgba(255,255,255,0.1); }
.stat-value{ font-size:1.125rem; font-weight:800; }
.stat-label{ font-size:.75rem; color: rgba(255,255,255,0.6); }

.avatar{ width:2.25rem; height:2.25rem; border-radius:9999px; border:2px solid #0f172a; background-image: linear-gradient(135deg,#67e8f9,#22d3ee); }

.floating-badge{ position:absolute; right:-10px; bottom:-10px; transform:translateY(0); animation:float 6s ease-in-out infinite; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:.75rem; background: rgba(52,211,153,0.2); color:#d1fae5; border:1px solid rgba(110,231,183,0.3); }
@keyframes float{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-8px)} }

.site-logo {
  height: 28px; /* layout kutusu küçük kalsın */
  width: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: left center;
  transform: scale(1.8); /* görsel büyüt, layout değişmesin */
  will-change: transform;
}
@media (min-width: 768px) { /* md */
  .site-logo { transform: scale(2.1); }
}

/* Swiper - references style */
.swiper{ padding: 6px 4px 20px; }
.ref-card{ height: 7rem; border-radius:.75rem; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); display:grid; place-items:center; color: rgba(255,255,255,0.7); font-size:.9rem; letter-spacing:.06em; }

/* References logos: square background, centered logo */
.ref-logo{
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; /* kare */
  height: auto; /* grid hücresine göre ölçeklenir */
  padding: 12px;
  border-radius: .75rem;
  overflow: hidden; /* taşmayı engelle */
  background: #ffffff; /* beyaz arkaplan */
  border: none;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.05);
}
.ref-logo::before{
  /* Neon kenar animasyonu */
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* çerçeve kalınlığı */
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #22d3ee, #60a5fa, #a78bfa, #22d3ee
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  will-change: transform, filter;
  animation: spin 8s linear infinite, neonHue 18s linear infinite;
  pointer-events: none;
}
.ref-logo::after{
  /* Yumuşak dış parıltı */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  box-shadow: 0 0 30px rgba(34,211,238,0.35), 0 0 48px rgba(96,165,250,0.28);
  pointer-events: none;
}
.ref-logo:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(2,6,23,0.35); }
.ref-logo img{
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 8px rgba(0,0,0,0.25));
}

@keyframes spin{ to { transform: rotate(360deg); } }
@keyframes neonHue{ to { filter: hue-rotate(360deg); } }

/* Kayarak parlayan modern "sheen" efekti */
.ref-logo .sheen{
  content: "";
  position: absolute;
  top: -10%; left: -20%;
  width: 140%; height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-60%) rotate(20deg);
  animation: sheen 3.5s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes sheen{
  0% { transform: translateX(-60%) rotate(20deg); }
  100% { transform: translateX(60%) rotate(20deg); }
}

/* CTA */
.cta{ display:flex; flex-direction:column; gap:1.5rem; align-items:center; justify-content:space-between; padding:1.5rem; border-radius:1rem; background: linear-gradient(135deg, rgba(14,165,233,.1), rgba(34,211,238,.1), rgba(52,211,153,.1)); border:1px solid rgba(255,255,255,0.1); }
@media (min-width: 768px){ .cta{ flex-direction:row; } }

/* Utilities */
.container-narrow{ max-width: 980px; margin-left:auto; margin-right:auto; }

/* Responsive tweaks */
@media (max-width: 420px){
  .section-title{ font-size: 1.5rem; }
}

/* Hero floating orbs (glowing dots/blobs) */
.hero-orbs{ position:absolute; inset:0; pointer-events:none; z-index:-5; overflow:hidden; }
.hero-orbs .orb{
  position:absolute;
  left: var(--x);
  top:  var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 9999px;
  background:
    radial-gradient(closest-side, hsla(var(--h,200), 95%, 65%, var(--a,.55)), transparent 70%),
    radial-gradient(closest-side at 30% 30%, hsla(var(--h,200), 95%, 75%, calc(var(--a,.55) * .9)), transparent 60%);
  filter: blur(1px) saturate(120%);
  box-shadow:
    0 10px 30px rgba(14,165,233,.25),
    0 0 80px rgba(34,211,238,.18) inset;
  animation: orb-move var(--d,14s) ease-in-out infinite alternate,
             orb-pulse 6s ease-in-out infinite;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  opacity: .9;
}

@keyframes orb-move{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(var(--dx,60px), var(--dy,-60px)) scale(1.05); }
  100% { transform: translate(calc(var(--dx,60px) * .2), calc(var(--dy,-60px) * .2)) scale(1.02); }
}
@keyframes orb-pulse{
  0%,100%{ filter: blur(1px) saturate(120%); opacity:.9; }
  50%    { filter: blur(2px) saturate(140%); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .hero-orbs .orb{ animation: none; }
}