:root{
  --text:#ffffff;
  --muted:rgba(255,255,255,.75);
  --line:rgba(255,255,255,.25);
  --red:rgba(175, 35, 35, .78);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#000;
  color:var(--text);
}
a{color:inherit}

/* main flush */
.content--flush{padding:0}

/* ---------------- TOPBAR ---------------- */
.topbar{
  position:fixed;
  left:0; right:0; top:0;
  z-index:50;
  padding:16px 0;
  background:transparent;
}
.topbar__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar__brand{display:flex;align-items:center;text-decoration:none}
.topbar__logo{height:34px;width:auto;display:block}

.topbar__nav{
  display:flex;
  gap:22px;
  align-items:center;
  white-space:nowrap;
}
.topbar__link{
  text-decoration:none;
  font-size:14px;
  letter-spacing:.2px;
  color:rgba(255,255,255,.86);
}
.topbar__link:hover{color:#fff}
.topbar__link.active{color:#fff}

.topbar__right{
  display:flex;
  gap:12px;
  align-items:center;
}
.topbar__lang{
  font-size:13px;
  opacity:.85;
  text-decoration:none;
}
.topbar__cta{
  font-size:13px;
  text-decoration:none;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  white-space:nowrap;
}

/* Burger */
.topbar__burger{
  display:none;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.18);
  cursor:pointer;
}
.topbar__burger span{
  display:block;
  width:18px;height:2px;
  background:#fff;
  margin:4px auto;
  opacity:.9;
}

/* Drawer (mobile menu) */
.drawer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
}
.drawer.is-open{display:block}
.drawer__panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(340px, 88vw);
  background:#0b0b0b;
  border-left:1px solid rgba(255,255,255,.10);
  padding:16px;
}
.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  margin-bottom:14px;
}
.drawer__close{
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
}
.drawer__links{display:grid;gap:10px}
.drawer__link{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  text-decoration:none;
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.10);
}
.drawer__link.active{border-color:rgba(255,255,255,.28);color:#fff}
.drawer__footer{margin-top:14px}
.drawer__btn{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  color:#fff;
}

/* ---------------- FULLSCREEN HERO SLIDER ---------------- */
.heroSlider{
  height:100svh;
  min-height:640px;
  width:100%;
  position:relative;
  overflow:hidden;
}

/* her slide tam ekran */
.heroSlide{
  position:absolute;
  inset:0;
  display:none;
}
.heroSlide.is-active{display:block}

/* background full-bleed */
.heroSlide__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}

/* overlay */
.heroSlide__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 20% 70%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.10) 100%);
}

/* content container */
.heroSlide__content{
  position:absolute;
  inset:0;
  max-width:1200px;
  margin:0 auto;
  padding:clamp(18px, 3vw, 28px);
  padding-top:clamp(88px, 10vh, 110px);
  padding-bottom:clamp(110px, 12vh, 150px);

  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:18px;
  align-items:end;
}

.heroSlide__left{max-width:820px}
.heroSlide__title{
  margin:0 0 10px;
  font-size:clamp(28px, 4.4vw, 60px);
  font-weight:500;
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}
.heroSlide__link{
  text-decoration:none;
  font-size:14px;
  color:rgba(255,255,255,.9);
}
.heroSlide__link:hover{color:#fff;text-decoration:underline}

.heroSlide__right{display:flex;justify-content:flex-end}
.heroSlide__redbox{
  width:min(460px, 100%);
  background:var(--red);
  padding:clamp(14px, 2.2vw, 18px);
}
.heroSlide__redbox p{
  margin:0;
  line-height:1.65;
  font-size:14px;
}

/* bottom bar */
.heroSlide__bottom{
  position:absolute;
  left:0; right:0;
  bottom:clamp(14px, 2.5vh, 24px);

  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(18px, 3vw, 28px);

  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
}
.heroSlide__counter{
  font-size:18px;
  display:flex;
  align-items:baseline;
  gap:6px;
  text-shadow:0 12px 30px rgba(0,0,0,.45);
}
.heroSlide__sep{opacity:.75}

.heroSlide__progress{
  height:2px;
  background:rgba(255,255,255,.22);
  position:relative;
  overflow:hidden;
}
.heroSlide__bar{
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:left;
  background:rgba(255,255,255,.85);
}

.heroSlide__arrows{display:flex;gap:10px}
.heroSlide__arrow{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.heroSlide__arrow:hover{background:rgba(0,0,0,.40)}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px){
  .topbar__nav{display:none;}
  .topbar__burger{display:inline-block;}

  .heroSlide__content{
    grid-template-columns:1fr;
    gap:14px;
    padding-bottom:170px;
  }
  .heroSlide__right{justify-content:flex-start}
  .heroSlide__redbox{width:min(560px, 100%)}
}

@media (max-width: 640px){
  .heroSlider{min-height:560px}

  .topbar__inner{padding:0 14px}
  .heroSlide__content{
    padding:16px;
    padding-top:84px;
    padding-bottom:190px;
  }
  .heroSlide__bottom{padding:0 16px}
  .heroSlide__arrow{width:40px;height:40px;font-size:20px}
}