.toposmanoglu {
  --ts-red: #c9171d;
  --ts-red-dark: #8f0f13;
  --ts-red-soft: #e33a3f;
  --ts-bg: #F9F9F9;
  --ts-ink: #171717;
  --ts-gold: #d8b164;
  --ts-gold-soft: #f0d79f;
  --ts-my: 0;
  --ts-mx: 0;
  position: relative;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 25%, rgba(201,23,29,.10), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(201,23,29,.08), transparent 30%),
    var(--ts-bg);
  color: var(--ts-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.toposmanoglu *, .toposmanoglu *::before, .toposmanoglu *::after { box-sizing: border-box; }

.toposmanoglu__noise {
  position: absolute; inset: 0; z-index: -1; opacity: .22; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.12) .65px, transparent .65px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.toposmanoglu__stage {
  position: relative;
  min-height: 620px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 72px clamp(24px, 5vw, 86px) 84px;
  display: flex;
  align-items: center;
  perspective: 1000px;
}

.toposmanoglu__copy {
  position: relative;
  z-index: 9;
  width: min(620px, 48vw);
  transform: translate3d(calc(var(--ts-mx) * -5px), calc(var(--ts-my) * -5px), 0);
  transition: transform .2s ease-out;
}

.toposmanoglu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .26em;
  font-weight: 800;
  color: var(--ts-red);
  margin-bottom: 20px;
}
.toposmanoglu__eyebrow::before { content:""; width: 34px; height: 2px; background: var(--ts-red); }

.toposmanoglu__title {
  margin: 0;
  font-size: clamp(44px, 6vw, 92px);
  line-height: .93;
  letter-spacing: -.05em;
  font-weight: 850;
}
.toposmanoglu__title em { font-family: Georgia, "Times New Roman", serif; font-weight: 500; color: var(--ts-red); }

.toposmanoglu__text {
  max-width: 540px;
  margin: 24px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: rgba(23,23,23,.68);
}

.toposmanoglu__core {
  position: absolute;
  right: clamp(8%, 11vw, 14%);
  top: 50%;
  width: clamp(280px, 32vw, 500px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotateX(calc(var(--ts-my) * -4deg)) rotateY(calc(var(--ts-mx) * 5deg));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(239,76,81,.98) 0%, rgba(201,23,29,.98) 36%, rgba(143,15,19,.98) 82%);
  box-shadow: 0 45px 100px rgba(201,23,29,.28), inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -30px 70px rgba(0,0,0,.16);
  z-index: 5;
  transition: transform .2s ease-out, box-shadow .35s ease;
  animation: toposmanogluFloat 5s ease-in-out infinite;
}

.toposmanoglu__logo-shell {
  position: relative;
  width: 86%;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 999px;
  background: #F9F9F9;
  box-shadow:
    0 18px 40px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 0 0 10px rgba(255,255,255,.08);
}

.toposmanoglu__logo-shell::before {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border: 1px solid rgba(216,177,100,.38);
  opacity:.9;
}

.toposmanoglu__logo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
  animation: toposmanogluLogoBreath 4.8s ease-in-out infinite;
}

.toposmanoglu__core-ring {
  position: absolute; inset: -24px; border-radius: 50%; border: 1px solid rgba(201,23,29,.34);
  animation: toposmanogluPulse 3.2s ease-out infinite;
}
.toposmanoglu__core-ring--two { inset: -48px; animation-delay: 1.1s; border-color: rgba(201,23,29,.18); }

.toposmanoglu__orbit {
  position: absolute;
  right: clamp(1%, 4vw, 7%);
  top: 50%;
  border: 1px solid rgba(201,23,29,.18);
  border-radius: 50%;
  transform: translateY(-50%) rotateX(68deg) rotateZ(8deg);
  z-index: 3;
  pointer-events: none;
}
.toposmanoglu__orbit--outer { width: clamp(400px, 47vw, 700px); aspect-ratio: 1; animation: toposmanogluSpin 18s linear infinite; }
.toposmanoglu__orbit--mid { width: clamp(330px, 39vw, 580px); aspect-ratio: 1; animation: toposmanogluSpinReverse 13s linear infinite; border-style: dashed; }
.toposmanoglu__orbit--inner { width: clamp(285px, 33vw, 490px); aspect-ratio: 1; animation: toposmanogluSpin 9s linear infinite; }

.toposmanoglu__orbit span {
  position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--ts-red); box-shadow: 0 0 0 7px rgba(201,23,29,.08), 0 0 24px rgba(201,23,29,.55);
}
.toposmanoglu__orbit span:nth-child(2) { top: 50%; right: -5px; left: auto; }
.toposmanoglu__orbit span:nth-child(3) { top: auto; bottom: -5px; }
.toposmanoglu__orbit span:nth-child(4) { top: 50%; left: -5px; }

.toposmanoglu__ribbon {
  position: absolute;
  width: 60vw;
  height: 120px;
  right: -12vw;
  top: 50%;
  border-radius: 50%;
  filter: blur(.1px);
  pointer-events: none;
  z-index: 2;
}
.toposmanoglu__ribbon--a { border-top: 2px solid rgba(201,23,29,.5); transform: translateY(-190px) rotate(-13deg); animation: toposmanogluWave 7s ease-in-out infinite; }
.toposmanoglu__ribbon--b { border-bottom: 9px solid rgba(201,23,29,.08); transform: translateY(75px) rotate(9deg); animation: toposmanogluWave 9s ease-in-out infinite reverse; }
.toposmanoglu__ribbon--c { border-top: 1px dashed rgba(201,23,29,.28); transform: translateY(-40px) rotate(-4deg); animation: toposmanogluWave 11s ease-in-out infinite; }

.toposmanoglu__spark-field { position:absolute; inset:0; pointer-events:none; z-index:4; }
.toposmanoglu__spark-field i {
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%;
  background:var(--ts-red); opacity:.45; box-shadow:0 0 18px rgba(201,23,29,.45);
  animation: toposmanogluSpark 4.2s ease-in-out infinite; animation-delay:var(--d);
}

.toposmanoglu__glow { position:absolute; border-radius:50%; filter:blur(60px); opacity:.16; pointer-events:none; z-index:0; }
.toposmanoglu__glow--one { width:320px; height:320px; background:var(--ts-red); right:13%; top:15%; animation:toposmanogluGlow 6s ease-in-out infinite; }
.toposmanoglu__glow--two { width:220px; height:220px; background:var(--ts-red); left:12%; bottom:10%; animation:toposmanogluGlow 7s ease-in-out infinite reverse; }

.toposmanoglu__scroll-line {
  position:absolute; left:0; bottom:0; width:max-content; min-width:200%; height:44px; display:flex; align-items:center; gap:26px;
  padding:0 30px; background:var(--ts-red); color:#fff; font-weight:800; letter-spacing:.22em; font-size:11px;
  z-index:12; animation:toposmanogluMarquee 18s linear infinite;
}
.toposmanoglu__scroll-line b { opacity:.55; }

.toposmanoglu:hover .toposmanoglu__core {
  box-shadow: 0 55px 120px rgba(201,23,29,.36), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -30px 70px rgba(0,0,0,.16);
}
.toposmanoglu:hover .toposmanoglu__orbit--mid { border-color: rgba(201,23,29,.36); }
.toposmanoglu:hover .toposmanoglu__logo-shell::before { border-color: rgba(216,177,100,.55); }

@keyframes toposmanogluFloat { 0%,100%{ margin-top:0 } 50%{ margin-top:-13px } }
@keyframes toposmanogluPulse { 0%{ transform:scale(.92); opacity:.7 } 75%,100%{ transform:scale(1.18); opacity:0 } }
@keyframes toposmanogluSpin { to { transform:translateY(-50%) rotateX(68deg) rotateZ(368deg) } }
@keyframes toposmanogluSpinReverse { to { transform:translateY(-50%) rotateX(68deg) rotateZ(-352deg) } }
@keyframes toposmanogluWave { 0%,100%{ margin-top:-8px; scale:1 1 } 50%{ margin-top:13px; scale:1.04 .9 } }
@keyframes toposmanogluSpark { 0%,100%{ transform:translateY(0) scale(.65); opacity:.18 } 50%{ transform:translateY(-18px) scale(1.25); opacity:.72 } }
@keyframes toposmanogluGlow { 0%,100%{ transform:scale(.9); opacity:.12 } 50%{ transform:scale(1.25); opacity:.22 } }
@keyframes toposmanogluMarquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes toposmanogluLogoBreath { 0%,100%{ transform:translateY(0) scale(.985) } 50%{ transform:translateY(-2px) scale(1) } }

@media (max-width: 900px) {
  .toposmanoglu { min-height: 700px; }
  .toposmanoglu__stage { min-height:700px; padding:50px 22px 72px; align-items:flex-start; }
  .toposmanoglu__copy { width:100%; max-width:620px; text-align:center; margin:0 auto; }
  .toposmanoglu__eyebrow { justify-content:center; margin-top:4px; }
  .toposmanoglu__text { margin:18px auto 0; max-width:560px; }
  .toposmanoglu__core { right:50%; top:auto; bottom:86px; width:290px; transform:translateX(50%) rotateX(calc(var(--ts-my) * -3deg)) rotateY(calc(var(--ts-mx) * 4deg)); }
  .toposmanoglu__orbit { right:50%; top:auto; bottom:2px; transform:translateX(50%) rotateX(68deg) rotateZ(8deg); }
  .toposmanoglu__orbit--outer { width:440px; animation-name:toposmanogluSpinMobile; }
  .toposmanoglu__orbit--mid { width:365px; animation-name:toposmanogluSpinReverseMobile; }
  .toposmanoglu__orbit--inner { width:310px; animation-name:toposmanogluSpinMobile; }
  .toposmanoglu__ribbon { width:110vw; right:-8vw; top:auto; bottom:180px; }
  .toposmanoglu__logo-shell { width: 90%; padding: 10px; }
}

@media (max-width: 560px) {
  .toposmanoglu { min-height: 650px; }
  .toposmanoglu__stage { min-height:650px; padding:38px 18px 68px; }
  .toposmanoglu__title { font-size:clamp(39px, 13vw, 58px); }
  .toposmanoglu__text { font-size:14px; line-height:1.55; }
  .toposmanoglu__core { width:230px; bottom:74px; }
  .toposmanoglu__orbit--outer { width:350px; }
  .toposmanoglu__orbit--mid { width:295px; }
  .toposmanoglu__orbit--inner { width:245px; }
  .toposmanoglu__spark-field i:nth-child(even) { display:none; }
  .toposmanoglu__ribbon { bottom:145px; }
  .toposmanoglu__scroll-line { height:40px; font-size:10px; gap:20px; }
  .toposmanoglu__logo-shell { width: 92%; padding: 8px; }
}

@keyframes toposmanogluSpinMobile { to { transform:translateX(50%) rotateX(68deg) rotateZ(368deg) } }
@keyframes toposmanogluSpinReverseMobile { to { transform:translateX(50%) rotateX(68deg) rotateZ(-352deg) } }

@media (prefers-reduced-motion: reduce) {
  .toposmanoglu *, .toposmanoglu *::before, .toposmanoglu *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
