/* ===========================
   THEME TOKENS
   =========================== */
:root{
  --bg:#0b0c0f;
  --panel:#0e1217;
  --panel2:#151a20;
  --text:#fff;
  --muted:#ebebeb;
  --primary:#16e2c2;
  --stroke:rgba(255,255,255,.11);
}

/* ===========================
   BASE
   =========================== */
*{ box-sizing:border-box; }
html, body{ margin:0; }
body{
  font-family:'Poppins','Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  /* subtle vignette + solid fallback */
  background:
    radial-gradient(1200px 600px at 75% 0%, #0f1e1a 0%, var(--bg) 60%) no-repeat,
    linear-gradient(#0a0d11,#0a0d11);
}
.container{ max-width:1120px; margin-inline:auto; padding:0 24px; margin-top: 20px;}

/* ===========================
   HEADER
   =========================== */
.sitebar{
  position:sticky; top:0; z-index:10;
  background:rgba(8,10,14,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stroke);
}
.sitebar__in{ height:56px; display:flex; align-items:center; justify-content:space-between; }
.brand img{ height:28px; }

/* Header social icons */
.bar-icons{ display:flex; gap:12px; align-items:center; }
.icon-btn{
  width:26px; height:26px;
  display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  backdrop-filter:saturate(120%) blur(4px);
  transition:all .2s ease;
  text-decoration:none; cursor:pointer;
}
.icon-btn img{
  width:58%; height:58%;
  object-fit:contain; display:block;
}
.icon-btn:hover{ border-color:#ffffff; transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0); opacity:.9; }
.icon-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ===========================
   HERO
   =========================== */
.hero{
  position:relative;
  min-height:500px;               /* desktop height */
  display:flex; align-items:center; justify-content:space-between;
  padding:60px 40px;
  background:url('assets/hero.png') no-repeat center center;
  background-size:cover;
  border-radius:12px;
}

/* Back link with icon aligned */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  color:#c0c0c0; text-decoration:none; font-size:16px;
}
.back-link img{ width:16px; height:auto; display:block; }
.back-link:hover{ color:#43FFD2; }

.hero__in{ position:relative; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:56px; align-items:center;
}

/* Eyebrow line (gradient text on desktop) */
.eyebrow{
  width:100%; position:relative;
  font-size:36px; line-height:40px; letter-spacing:-0.02em;
  text-transform:capitalize; font-weight:600;
  font-family:Poppins;
  background:linear-gradient(91.75deg,#009873,#43ffd2 12.5%,#43ffd2 89.42%,#009873), #fff;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-align:left; display:inline-block; margin-bottom:0;
}

/* Headline with gradient (desktop) */
.hero__title{
  width:100%; position:relative;
  font-size:64px; line-height:82px; letter-spacing:-0.02em;
  text-transform:capitalize; font-weight:600; font-family:Poppins;
  background:linear-gradient(78.48deg,#080808,#fff 12.5%,#fff 89.42%,#080808);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-align:left; display:inline-block; margin-top:10px; margin-bottom:16px;
}

.hero__text .hero__sub{
  color:var(--muted); font-size:16px; font-weight:400; margin:0 0 16px;
}

/* Compact TV art container (desktop defaults) */
.hero__art{
  position:relative; display:flex; justify-content:center; align-items:center;
  min-height:260px;
}

/* ===========================
   COUNTDOWN (plain inline text)
   =========================== */
.time-line{
  display:flex; flex-direction:column; gap:8px;
  font-size:18px; font-weight:600; color:#fff;
}
.time-line .label{ color:#8c8c8c; font-size:16px; font-weight:500; margin:20px 0 15px; }
.countdown{ display:flex; gap:24px; }
.countdown span{ white-space:nowrap; }

/* ===========================
   CTA
   =========================== */
.cta {
  display: inline-flex;
  align-items: center;   /* text ve icon aynı hizaya gelsin */
  gap: 8px;              /* araya boşluk */
  background: #0b0c0f;
  border: 2px solid #fff;
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: .2s;
  margin-top: 40px;
}

.cta-arrow img {
  height: auto;
  display: block;
}

.cta:hover{ background:var(--primary); border-color:var(--primary); color:#041614; transform:translateY(-1px); }
.join-now-text {
  	position: relative;
  	font-size: 18px;
  	line-height: 20px;
  	font-weight: 500;
  	font-family: Poppins;
  	color: #fff;
  	text-align: center;
}



/* ===========================
   FILTER CHIPS
   =========================== */
.chips{ display:flex; gap:8px; margin:30px 0; flex-wrap:wrap; }
.chip{
  background:#071E15; color:#43FFD2;
  font-size:12px; padding:6px 10px; border-radius:5px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04);
}
.chip--active{ background:#142433; color:#77C0FF; }

/* ===========================
   AWARDS LIST
   =========================== */
.section-ttl{ font-size:24px; margin:14px 0; }
.awards{ margin-bottom:8px; }
.award{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke); border-radius:14px; padding:18px 16px;
}
.award + .award{ margin-top:20px; }
.award__icon{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
  background:#0c221d; border:1px solid #154a40;
}
.tv-mini{
  width:28px; height:28px; border-radius:9px;
  background:linear-gradient(145deg,#bfffee,#3fd4b4);
  box-shadow:0 6px 14px rgba(18,224,192,.35);
}
.award strong{ color:#fff; }
.reward-item-1{
  position:relative; font-size:16px; line-height:24px; font-weight:600; color:#fff; text-align:left;
}
.reward-item-1-title{
  position: relative;
font-size: 12px;
line-height: 24px;
font-weight: 600;
font-family: Poppins;
color: #42ffd1;
text-align: left;
margin-bottom: 10px;
}
.reward-item-1-container {
  position: relative;
  padding-left: 12px; /* dot ile yazı arasında boşluk */
}

.reward-item-1-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #43FFD2; /* dot rengi */
}
.color-strong{ color:#42ffd1; font-weight:700; }

/* ===========================
   RULES
   =========================== */
.rules{ padding:32px 0 20px; }
.rules__title{
  font-size:22px; line-height:28px; letter-spacing:-0.01em; text-transform:capitalize;
  font-weight:600; font-family:Poppins; color:#ebebeb; text-align:left; margin-top:60px;
}
.rules__panel{ margin:0 auto; }
.rules__list{ list-style:none; margin:0; padding:0; counter-reset:item; }
.rules__list li{
  counter-increment:item; position:relative;
  padding:10px 0 10px 32px; color:#a2a2a2; font-size:16px; line-height:1.6;
}
.rules__list li::before{
  content:counter(item);
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  color:#fff; font-size:14px;
}
@media (max-width:600px){
  .rules__list li{ padding-left:28px; font-size:14px; }
  .rules__list li::before{ font-size:14px; }
}

/* ===========================
   FOOTER
   =========================== */
.footer{
  position:relative; font-size:14px; line-height:16px;
  font-family:Poppins; color:#a2a2a2; text-align:center;
}

/* ===========================
   RESPONSIVE (DESKTOP → TABLET)
   =========================== */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:28px; }
  .hero__title{ font-size:48px; }
  .hero__art{ order:-1; } /* show art before text when stacked */
}

/* ===========================
   RESPONSIVE (MOBILE BASELINE ≤520px)
   — keeps desktop behavior but reduces headline size if needed
   =========================== */
@media (max-width:520px){
  .hero__title{ font-size:38px; }
  .award{ grid-template-columns:1fr; }
  .award__icon{ justify-self:start; }
  .icon-btn{ width:28px; height:28px; }
}

/* =========================================================
   MOBILE FIX PATCH (≤768px) — PLACED AT THE END FOR PRIORITY
   Ensures: full-bleed background, TV logo on top & smaller,
   centered titles, left-aligned countdown, no gradient on H1.
   ========================================================= */
@media (max-width:768px){
  /* Full-bleed background and compact spacing */
  .hero{
    padding:8px 0 16px !important;
    background-image:url('assets/hero-mobile.png') !important; /* replace with your mobile image */
    background-repeat:no-repeat !important;
    background-position:top center !important;
    background-size:cover !important;
    border-radius:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* One-column stack, TV art first */
  .hero__grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:start !important;
  }
  .hero__art{
    order:-1 !important;           /* move logo to top */
    min-height:0 !important;
    padding:0 !important;
    margin:0 auto 6px auto !important;
    display:flex !important; justify-content:center !important;
  }
  .hero__art img{
    display:block !important;
    width:64% !important;          /* shrink logo width */
    max-width:150px !important;    /* absolute cap */
    height:auto !important;
    margin:0 auto !important;
  }

  /* Center headings and remove gradient from H1 */
  .hero__text{ text-align:center !important; padding:0 16px !important; margin-top:0 !important; }
  .eyebrow{ font-size:20px !important; line-height:24px !important; margin:0 0 6px !important; text-align:center !important; }
  .hero__title{
    background:none !important;
    -webkit-background-clip:initial !important;
    -webkit-text-fill-color:initial !important;
    color:#ffffff !important;      /* solid white */
    font-size:32px !important; line-height:38px !important; margin:4px 0 0 !important;
    text-align:center !important;
  }
  .hero__sub{ font-size:14px !important; line-height:20px !important; margin:6px auto 0 !important; }

  /* Left-align countdown */
  .time-line{
    width:100% !important;
    margin:10px 16px 0 !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  .time-line .label{ font-size:13px !important; margin:8px 0 !important; }
  .countdown{ justify-content:flex-start !important; gap:18px !important; font-size:16px !important; }

  /* CTA centered & wider */
  .cta{
    width:100% !important; max-width:320px !important;
    margin:16px auto 0 !important; justify-content:center !important; border-radius:28px !important;
  }
}

:root{
  --flow-inset: 12.5%; /* offsets so that bar starts under step1 and ends under step4 */
}

/* Base flow card */
.award.award--flow{
  grid-template-columns: 56px 1fr;
  padding: 16px 18px;
}

/* Icon */
.award.award--flow .award__icon{
  width:56px; height:56px;
  display:grid; place-items:center;
}
.award.award--flow .award__icon img{ 
  width:34px; height:34px; object-fit:contain;
}

/* Steps */
.flow-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  align-items:end;
  gap:8px;
  margin-bottom:8px;
  text-align:center;
}
.flow-step span{display:block;font-size:13px;font-weight:600;color:#cfd6dc}
.flow-step strong{display:block;font-size:14px;font-weight:700;color:#fff}
.flow-step--emph span,
.flow-step--emph strong{color:#43ffd2}

/* Bar wrapper */
.flow-bar{
  margin-inline: var(--flow-inset); /* keeps alignment with step1 & step4 */
}
.flow-bar picture,
.flow-bar img{
  display:block;
  width:100%;
  height:auto;
}

/* Mobile adjustments */
@media (max-width:640px){
  :root{ --flow-inset: 14%; }
  .flow-step span{ font-size:12px }
  .flow-step strong{ font-size:13px }
}
/* ========== MOBILE VERTICAL FLOW (≤640px) ========== */
@media (max-width:640px){

  /* Card padding & columns */
  .award.award--flow{
    grid-template-columns: 1fr;     /* icon & content stacked */
    padding: 18px 16px 22px;
  }

  /* Icon on top & centered */
  .award.award--flow .award__icon{
    margin: 0 auto 12px auto;
    width: 64px; height: 64px;
  }

    .award.award--flow .award_icon{
    text-align: center;
  }

  /* We'll build a vertical timeline; hide the horizontal bar picture */
  .flow-bar{ display:none; }

  /* Steps container becomes a vertical stage */
  .flow-steps{
    position: relative;
    display: block;           /* no grid here */
    min-height: 420px;        /* overall height of the timeline */
    margin: 0;                /* remove bottom gap used by bar */
  }

  /* Vertical gradient line in the center */
  .flow-steps::before{
    content:"";
    position:absolute;
    left:50%;
    top:6%;
    bottom:6%;
    width:2px;
    transform:translateX(-50%);
    background: linear-gradient(180deg, #3f3f3f 0%, #43ffd2 100%);
    opacity:.85;
  }

  /* Common step text styles */
  .flow-step{
    position:absolute;
    max-width: 44ch;
    line-height:1.25;
  }
  .flow-step span{ display:block; font-size:14px; font-weight:600; color:#e8e8e8; }
  .flow-step strong{ display:block; font-size:18px; font-weight:800; color:#ffffff; }

  /* Dot for each step (default = grey) */
  .flow-step::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:12px; height:12px;
    border-radius:50%;
    background:#cfcfcf;
    box-shadow:0 0 0 3px rgba(255,255,255,.08);
  }

  /* 1) Darkex’e Kayıt Ol  — near top, text on the LEFT */
  .flow-step:nth-child(1){
    top: 14%;
    right: 52%;               /* push to the left side */
    text-align: right;
  }
  .flow-step:nth-child(1)::after{ top: 6px; } /* dot near the line */

  /* 2) 100 USDT Trade Bonusunu Al — text on the RIGHT */
  .flow-step:nth-child(2){
    top: 36%;
    left: 52%;                /* push to the right side */
    text-align: left;
  }
  .flow-step:nth-child(2)::after{ top: 6px; }

  /* 3) Bonusu Vadeli İşlemlerde 1000 USDT’ye Çıkar — LEFT */
  .flow-step:nth-child(3){
    top: 58%;
    right: 52%;
    text-align: right;
  }
  .flow-step:nth-child(3)::after{ top: 6px; }

  /* 4) Çekilebilir 100 USDT Kazan! — RIGHT & EMPHASIZED */
  .flow-step:nth-child(4){
    bottom: 6%;
    left: 52%;
    text-align: left;
  }
  .flow-step:nth-child(4) span,
  .flow-step:nth-child(4) strong{ color:#43ffd2; }
  .flow-step:nth-child(4)::after{
    bottom: -6px;
    background:#43ffd2;       /* teal dot at the bottom */
    box-shadow:0 0 0 4px rgba(67,255,210,.15);
  }

  /* Slightly tighter typography for small screens */
  @media (max-width:420px){
    .flow-step span{ font-size:13px; }
    .flow-step strong{ font-size:17px; }
    .flow-steps{ min-height: 440px; }
  }
}

/* ===== Rewards Table Card ===== */
/* Card shell */
.table-card{
  /* size & spacing */
  max-width: 360px;            /* match the compact card look */
  width: 100%;
  margin: 16px 0;
  padding: 0;

  /* visuals */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) inset;
  overflow: hidden;            /* clip header radius */
}

/* Header row (looks like a caption bar) */
.table-card__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;

  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #cfd6dc;
  font-weight: 600;
  font-size: 14px;
}
.table-card__head .dot{ opacity:.7; font-weight: 800; }

/* Table body */
.reward-table{
  width: 100%;
  border-collapse: collapse;   /* clean, single borders */
}

/* Rows */
.reward-table tr{
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.reward-table tr:last-child{
  border-bottom: 0;
}

/* Cells */
.reward-table td{
  padding: 12px 14px;
  font-size: 14px;
  line-height: 20px;
  color: #e9e9e9;
  white-space: nowrap;
}

/* Right column (reward values) */
.reward-table td.reward{
  text-align: right;
  color: #43FFD2;             /* teal highlight to match the design */
  font-weight: 700;
}

/* Subtle row hover (optional) */
@media (hover:hover){
  .reward-table tr:hover td{
    background: rgba(255,255,255,.03);
  }
}

/* Mobile tweaks */
@media (max-width:480px){
  .table-card{ max-width: 100%; }
  .reward-table td{ padding: 12px 12px; font-size: 13.5px; }
  .table-card__head{ padding: 9px 12px; font-size: 13.5px; }
}