/* ======================================================
  ROOT VARIABLES
====================================================== */
:root{
  --bg:#070b10;
  --text:#e9eef5;
  --muted:#a5b0bf;
  --g:#ff9035;
  --g2:#ff9035;
}

/* ======================================================
  RESET / BASE
====================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow-x:hidden;
}

/* ======================================================
  UI — SCROLL INDICATOR
====================================================== */
.scroll-indicator{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--g),var(--g2));
  z-index:9999;
}

/* ======================================================
  UI — CURSOR DOT
====================================================== */
.cursor-dot{
  position:fixed;
  width:10px;
  height:10px;
  background:var(--g);
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 16px rgba(255, 167, 53, 0.7);
  transform:translate(-50%,-50%);
  z-index:9998;
}

/* ======================================================
  HERO SECTION
====================================================== */
.hero{
  position:relative;
  width:100%;
  min-height:100vh;

  background-repeat:no-repeat;
  background-size:cover;

  /* 🔑 kritik nokta */
  background-position: center center;
  overflow:hidden;
}

/* HERO IMAGE = FEATURE IMAGE MANTIĞI */
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}


.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      900px 500px at 60% 35%,
      rgba(255, 161, 53, 0.08),
      transparent 60%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.65),
      rgba(0,0,0,.35)
    );
}

.hero-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;

  max-width:1400px;
  margin:0 auto;

  gap:120px;
  padding:180px 40px 0;
}
.hero-left{
  transform:scale(1.08);
  transform-origin:left center;
}

.pill{
  padding:10px 22px;
  border-radius:14px;

  background:linear-gradient(
    135deg,
    rgba(255, 167, 53, 0.35),
    rgba(255, 144, 53, 0.12),
    rgba(215, 139, 25, 0.377)
  );

  font-weight:900;
  font-size:12px;
  letter-spacing:.14em;
  margin-bottom:24px;
}

.hero-title{
  font-size:clamp(64px,7vw,110px);
  font-weight:1000;
  line-height:.95;
  letter-spacing:.02em;
}

.hero-sub{
  margin-top:14px;
  letter-spacing:.18em;
  font-weight:800;
  font-size:14px;
}

.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
  padding:14px 28px;
  border-radius:999px;

  background:transparent;
  border:1px solid rgba(255, 174, 53, 0.55);

  color:#ffffff;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;

  cursor:pointer;
  user-select:none;

  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
.btn-cta:hover{
  background:var(--g);          /* ❗ içi YEŞİL olur /
  color:#04150b;                / yazı SİYAH olur */
  border-color:var(--g);

  box-shadow:0 0 25px rgba(255, 167, 53, 0.6);
}
.partners{
  position:absolute;
  left:24px;
  bottom:-300px;

  display:flex;
  align-items:center;
  gap:28px;

  opacity:.85;
}

.partners img{
  height:55px;
  max-width:130px;
  object-fit:contain;

  opacity:.9;
  transition:opacity .25s ease;
}

.partners img:hover{
  opacity:1;
}

.hero-right{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;

  transform: translateX(110px) scale(1.15);
}

.hero-art{
  max-width:520px;
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
}


.hero-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:90px;

  background:
    radial-gradient(
      120% 140% at 50% -40%,
      transparent 64%,
      var(--g) 65%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      var(--g) 100%
    );
}

/* ======================================================
  HEADER / NAVBAR
====================================================== */
.nav-wrap{
  position:fixed;
  top:0;
  left:0;
  right:0;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:26px 64px;
  z-index:10;

  transition:.3s;
}

/* ===== NAVBAR SCROLLED STATE ===== */
.nav-wrap.scrolled{
  background:rgba(7,11,16,.75);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* ======================================================
  BRAND
====================================================== */
.brand-logo{
  height:34px;
}

/* ======================================================
  MAIN NAV LINKS
====================================================== */
.nav{
  display:flex;
  gap:28px;
}

/* 🔥 BUTON GİBİ NAV ITEM */
.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 6px;
  min-height:40px;

  color:rgba(233,238,245,.85);
  font-weight:800;
  letter-spacing:.04em;
  font-size:13px;
  text-transform:uppercase;

  cursor:pointer;
  user-select:none;

  transition:color .25s ease;
}


/* ======================================================
  NAV LINKS — ACTIVE / HOVER LINE
====================================================== */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:var(--g);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}

.nav a:hover{
  color:var(--g);
}
.nav a:hover::after{
  transform:scaleX(1);
}

.nav a.active{
  color:var(--g);
}
.nav a.active::after{
  transform:scaleX(1);
}

/* ======================================================
  NAVBAR — RIGHT SIDE GROUP
====================================================== */
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ======================================================
  ICON BUTTONS (SEARCH + MENU)
====================================================== */
.icon-btn{
  width:40px;
  height:40px;
  border-radius:12px;

  background:transparent;
  border:1px solid rgba(255, 167, 53, 0.55);

  color:#ffffff;
  font-size:16px;

  display:grid;
  place-items:center;

  cursor:pointer;
  user-select:none;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

/* ICON BUTTON — HOVER */
.icon-btn:hover{
  background:var(--g);     /* içi yeşil /
  color:#04150b;           / ikon siyah */
  border-color:var(--g);
}



/* ======================================================
  STEAM PAGE BUTTON
====================================================== */
.btn-sign{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 18px;
  border-radius:999px;

  background:transparent;
  border:1px solid rgba(255, 161, 53, 0.55);

  color:#ffffff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;

  cursor:pointer;
  user-select:none;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

/* anchor davranışı */
a.btn-sign{
  display:inline-flex;
  text-decoration:none;
}

.btn-sign-icon{
  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  border-radius:6px;
  background:rgba(128, 74, 4, 0.336);
  color:var(--g);

  transition:
    background .25s ease,
    color .25s ease;
}

/* STEAM BUTTON — HOVER */
.btn-sign:hover{
  background:var(--g);
  color:#04150b;
  border-color:var(--g);
}

.btn-sign:hover .btn-sign-icon{
  background:rgba(4,21,11,.2);
  color:#04150b;
}


/* ======================================================
  ABOUT / SERVICES SECTION
====================================================== */
.about-services{
  padding:160px 64px;
  background:
    radial-gradient(
      900px 500px at 70% 40%,
      rgba(255, 167, 53, 0.08),
      transparent 60%
    ),
    #05080d;
}
.about-grid{
  max-width:1200px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:100px;
  align-items:center;
}

.about-tag{
  color:var(--g);
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.about-title{
  margin-top:14px;
  font-size:38px;
  font-weight:1000;
  line-height:1.2;
}

.about-line{
  width:56px;
  height:3px;
  background:var(--g);

  margin:20px 0 46px;
  border-radius:999px;
  box-shadow:0 0 20px rgba(255, 151, 53, 0.8);
}

.about-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 50px;
}

/* FEATURE ITEM */
.feature-item .icon{
  width:36px;
  height:36px;
  border-radius:10px;

  background:rgba(255, 174, 53, 0.15);
  color:var(--g);

  display:grid;
  place-items:center;
  font-size:18px;
  margin-bottom:14px;
}

.feature-item h4{
  font-size:15px;
  font-weight:900;
  margin-bottom:8px;
}

.feature-item p{
  font-size:13px;
  line-height:1.6;
  color:#a5b0bf;
}


.about-right{
  display:flex;
  justify-content:center;
}

.about-image{
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.75);
}

.about-image{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;   /* hero portrait hissi */
  border-radius:26px;
  overflow:hidden;
  background:#0b1118;

  box-shadow:0 40px 100px rgba(0,0,0,.75);
}

.about-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


.about-image-wrap{
  position:relative;
  display:inline-block;
}

.about-arrow{
  position:absolute;
  right:-18px;
  bottom:-18px;

  width:72px;
  height:72px;
  border-radius:50%;

  background:#ffbf1c;
  color:#04150b;

  font-size:28px;
  font-weight:900;

  display:grid;
  place-items:center;
  text-decoration:none;

  box-shadow:0 20px 50px rgba(0,0,0,.55);
  transition:.35s ease;
}

.about-arrow:hover{
  transform:scale(1.08) translateY(-2px);
}


@media(max-width:980px){
  .about-grid{
    grid-template-columns:1fr;
    gap:80px;
  }

  .about-title{
    font-size:32px;
  }
}

/* ======================================================
  MARKET SECTION
====================================================== */
.market-section{
  padding:120px 64px 80px;
  background:#0b0e13;
}

.market-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}

/* ======================================================
  MARKET CARD
====================================================== */
.market-card{
  display:flex;
  align-items:center;
  gap:24px;

  background:linear-gradient(180deg,#0f1620,#090d13);
  border-radius:22px;
  padding:26px;

  min-height:210px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transition:transform .35s ease, box-shadow .35s ease;
}

.market-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 40px 100px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ======================================================
  IMAGE
====================================================== */
.card-img{
  width:160px;
  height:160px;
  border-radius:18px;

  background:#83744e;
  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.card-img.purple{ background:#c27c21 }
.card-img.green{ background:#1c5841 }

.card-img img{
  width:95%;
  height:95%;
  object-fit:contain;
}

/* ======================================================
  INFO
====================================================== */
.card-info{
  flex:1;
  display:flex;
  flex-direction:column;
  padding-right:10px; /* 🔑 yazı duvara yapışmasın */

}


/* TITLE */
.card-info h4{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.25;
  color:#f1f5f9;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.creator{
  font-size:13px;
  line-height:1.6;
  color:#9aa4b2;
  margin-bottom:20px;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;

  -webkit-line-clamp:6; /* default (desktop geniş) */
}
@media (min-width:1200px) and (max-width:1470px){
  .creator{
    -webkit-line-clamp:4; /* 🔥 kritik */
  }
}




.creator span{
  font-size:11px;
  color:var(--g);
  letter-spacing:.4px;
}

/* ======================================================
  BOTTOM
====================================================== */
.card-bottom{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* PRICE */
.price{
  font-size:15px;
  font-weight:800;
}

/* BUTTON */
.bid-btn{
  background:#ffbf1c;
  color:#000;
  border:none;
  border-radius:10px;
  padding:8px 18px;

  font-weight:900;
  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.bid-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}


/* ======================================================
  FEATURE / TOURNAMENT SECTION
====================================================== */
.feature-section{
  padding:140px 64px;
  background:
    radial-gradient(
      1200px 600px at 50% 30%,
      rgba(53,255,156,.06),
      transparent 60%
    ),
    url("assets/placeholder/feature-bg.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.section-title{
  text-align:center;
  font-size:28px;
  font-weight:1000;
  margin-bottom:60px;
}

/* TITLE (OVERRIDE FOR SPACING) */
.section-title{
  text-align:center;
  font-size:28px;
  font-weight:1000;
  margin-bottom:14px;
}

.title-line{
  width:120px;
  height:4px;
  margin:0 auto 80px;

  background:var(--g);
  border-radius:999px;

  filter:blur(2px);
  box-shadow:0 0 20px rgba(255, 147, 24, 0.9);
}

.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;

  max-width:1100px;
  margin:0 auto;
}

.feature-img{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background:#0b1118;

  box-shadow:
    0 40px 90px rgba(0,0,0,.75),
    0 0 0 1px rgba(255, 191, 53, 0.45);
}

.feature-img img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}



.feature-info-box{
  padding:34px 36px;
  border-radius:18px;

  background:rgba(7,11,16,.55);
  backdrop-filter:blur(12px);

  border:1px solid rgba(255, 184, 53, 0.45);
  box-shadow:0 0 40px rgba(255, 167, 53, 0.411);

  max-width:420px;
}

.feature-info-box h3{
  font-size:24px;
  margin-bottom:10px;
}

.rate{
  display:inline-block;
  margin-bottom:16px;

  color:var(--g);
  font-weight:900;
  letter-spacing:.04em;
}

.feature-info-box p{
  font-size:14px;
  line-height:1.6;
  color:#c9d3df;
  margin-bottom:26px;
}

/* VIEW PAGE BUTTON */
.view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 26px;
  border-radius:999px;

  border:1px solid rgba(255, 184, 53, 0.7);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;

 cursor:pointer;        /* 🔴 BUTON HİSSİ */
  user-select:none;      /* 🔴 TEXT SEÇİLEMEZ */

  transition:.35s ease;
}


.view-btn:hover{
  background:var(--g);
  color:#04150b;
  box-shadow:0 0 30px rgba(255, 161, 53, 0.6);
}
.rate{
  display:block;
  margin:12px 0;
  color:var(--g);
  font-weight:800;
}

/* ======================================================
  COMMUNITY SECTION
====================================================== */
.community-section{
  position:relative;
  height:420px;
  margin-top:120px;

  background:
    url("assets/placeholder/community-bg.jpg")
    center / cover
    no-repeat;
}

/* COMMUNITY OVERLAY */
.community-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

/* COMMUNITY CONTENT */
.community-content{
  position:relative;
  z-index:2;

  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.community-content h2{
  font-size:32px;
  font-weight:1000;
}

.play-btn{
  width:80px;
  height:80px;
  border-radius:50%;

  background:rgba(255,255,255,.2);
  display:grid;
  place-items:center;

  font-size:28px;
  margin-bottom:20px;
}

/* CTA LINK FIX */
.btn-cta{
  text-decoration:none;   /* alt çizgiyi kaldırır /
  color:#FFFFFF;             / buton yazı rengi */
}

/* ======================================================
  ITEM / CARD IMAGE (GENERIC)
====================================================== */
.item-image{
  width:100%;
  height:180px;
  border-radius:16px;
  overflow:hidden;
  background:#111;
}

.item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ======================================================
  UI — CUSTOM SCROLLBAR
====================================================== */
::-webkit-scrollbar{
  width:10px;
}

/* TRACK */
::-webkit-scrollbar-track{
  background:#05080d;
}

/* THUMB */
::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    #ff9035,
    #ff9035
  );
  border-radius:999px;
  box-shadow:0 0 12px rgba(255, 151, 53, 0.8);
}

/* THUMB HOVER */
::-webkit-scrollbar-thumb:hover{
  background:#ff9735;
}
#scrollTopBtn{
  position:fixed;
  right:22px;
  bottom:24px;

  width:46px;
  height:46px;
  border-radius:14px;

  background:rgba(7,11,16,.7);
  border:1px solid rgba(255, 151, 53, 0.6);

  color:#ff9035;
  font-size:22px;
  font-weight:900;

  display:grid;
  place-items:center;

  cursor:pointer;
  z-index:999;

  opacity:0;
  pointer-events:none;
  transform:translateY(20px);

  transition:.35s ease;
  box-shadow:0 0 20px rgba(255, 161, 53, 0.25);
}

/* VISIBLE STATE */
#scrollTopBtn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* HOVER */
#scrollTopBtn:hover{
  background:#ff9035;
  color:#04150b;
  box-shadow:0 0 30px rgba(255, 151, 53, 0.8);
}

/* ======================================================
  FOOTER (PROFESSIONAL CENTERED)
====================================================== */
.site-footer{
  background:#05080d;
  padding:110px 64px 36px;
  color:#cbd5e1;
  position:relative;
  font-family:"Inter", system-ui, sans-serif;
}

/* ÜST ALAN – MERKEZ ODAK */
.footer-top{
  max-width:1200px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;

  gap:48px;
}

/* BRAND BLOK */
.footer-col.footer-brand{
  max-width:540px;
}

/* LOGO */
.footer-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  font-size:22px;
  font-weight:700;
  letter-spacing:.02em;
  color:#ffffff;
}

.footer-logo img{
  height:32px;
}

/* AÇIKLAMA */
.footer-desc{
  margin:20px auto 34px;
  font-size:14px;
  line-height:1.75;
  color:#9aa6b2;
  max-width:480px;
}

/* =========================
   LEGAL INFO – GERÇEK ORTALAMA
   ========================= */
.footer-legal{
  margin-top:4px;
  font-size:13px;
  line-height:1.8;

  display:grid;
  justify-content:center;
  row-gap:6px;
}

.footer-legal p{
  display:grid;
  grid-template-columns:auto auto;
  gap:10px;

  justify-content:center;
  align-items:center;

  margin:0;
}

.footer-legal span{
  font-weight:500;
  color:#ffffff;
  white-space:nowrap;
}

.footer-legal p,
.footer-legal a{
  color:#9aa6b2;
  text-decoration:none;
}

.footer-legal a{
  color:var(--g);
}

.footer-legal a:hover{
  opacity:.85;
}

/* SOCIAL */
.footer-social{
  margin-top:42px;
}

.social-title{
  display:block;
  margin-bottom:18px;

  color:var(--g);
  font-weight:700;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* SOCIAL ICONS */
.social-icons{
  display:flex;
  justify-content:center;
  gap:16px;
}

.social-icons a{
  width:40px;
  height:40px;
  border-radius:14px;

  background:#0b1118;
  display:grid;
  place-items:center;

  text-decoration:none;
  cursor:pointer;
  user-select:none;

  transition:background .25s ease,
             box-shadow .25s ease,
             transform .25s ease;
}

.social-icons a img{
  width:20px;
  height:20px;
  pointer-events:none;
  filter:brightness(0) invert(1);
  transition:transform .25s ease, filter .25s ease;
}

.social-icons a:hover{
  background:var(--g);
  box-shadow:0 0 26px rgba(255,174,53,.55);
  transform:translateY(-2px);
}

.social-icons a:hover img{
  transform:scale(1.12);
  filter:none;
}

/* ALT BAR */
.footer-bottom{
  margin-top:96px;
  padding-top:26px;

  border-top:1px solid rgba(255,255,255,.06);

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:12px;
  letter-spacing:.04em;
  color:#7f8a96;
  text-align:center;
}

.footer-bottom strong,
.footer-bottom b{
  color:var(--g);
  font-weight:600;
}


/* ======================================================
  RESPONSIVE
====================================================== */
@media(max-width:768px){
  .site-footer{
    padding:80px 28px 28px;
  }

  .footer-col.brand{
    max-width:100%;
  }

  .footer-col p{
    max-width:100%;
  }
}

/* ======================================================
  DROPDOWN MENU (STORE LIST)
====================================================== */
.menu-dropdown{
  position:relative;
}

/* Panel */
.dropdown-panel{
  position:absolute;
  top:52px;                 /* butonun altı */
  right:0;

  min-width:180px;
  padding:10px;

  background:rgba(7,11,16,.95);
  backdrop-filter:blur(10px);

  border:1px solid rgba(255, 161, 53, 0.45);
  border-radius:14px;

  box-shadow:0 20px 50px rgba(0,0,0,.6);

  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;

  transition:.25s ease;
  z-index:50;
}

/* Açılma */
.menu-dropdown:hover .dropdown-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Linkler */
.dropdown-panel a{
  display:flex;
  align-items:center;
  justify-content:center;

  height:42px;
  margin-bottom:6px;
  border-radius:10px;

  text-decoration:none;
  color:#fff;
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;

  background:rgba(255, 167, 53, 0.08);
  transition:.25s ease;
}

.dropdown-panel a:last-child{
  margin-bottom:0;
}

/* Hover */
.dropdown-panel a:hover{
  background:var(--g);
  color:#04150b;
  box-shadow:0 0 20px rgba(255, 167, 53, 0.6);
}
/* Hover köprüsü (buton ile panel arası) */
.menu-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  width:100%;
  height:14px;          /* 🔴 kritik alan */
}

/* ======================================================
  PAGE LOADER
====================================================== */
#page-loader{
  position:fixed;
  inset:0;
  background:#070b10;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}

/* Kapanma durumu */
#page-loader.loaded{
  opacity:0;
  visibility:hidden;
}

/* İç animasyon */
.loader-inner{
  text-align:center;
  transform:translateY(20px) scale(.95);
  opacity:0;
  animation:loaderEnter .8s ease forwards;
}

@keyframes loaderEnter{
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

.loader-logo{
  font-size:28px;
  letter-spacing:6px;
  color:#ff9035;
  font-weight:600;
  display:block;
  margin-bottom:18px;
}

.loader-bar{
  width:180px;
  height:8px;
  background:rgba(255,255,255,.08);
  border-radius:999px; /* TAM YUVARLAK */
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255, 167, 53, 0.856);
}

.loader-bar::after{
  content:"";
  display:block;
  width:45%;
  height:100%;
  background:linear-gradient(
    90deg,
    #ff9035,
    #ff9035,
    #ff9035
  );
  border-radius:999px;
  animation:loadingMove 1.1s infinite ease-in-out;
  box-shadow:0 0 18px rgba(255, 134, 53, 0.6);
}

@keyframes loadingMove{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(200%)}
}

/* ===== PAGE BLUR EFFECT ===== */
body.loading main{
  filter:blur(18px);
  transform:scale(1.03);
  opacity:0;
}

body main{
  transition:filter .8s ease, transform .8s ease, opacity .8s ease;
}
/* ======================================================
  GAMES SCROLL ANCHOR
====================================================== */
#games-anchor{
  position:relative;
  top:-410px;   /* 🔼 daha yukarı taşır */
  height:1px;
}

#top-rated-anchor{
  position:relative;
  top:-350px;   /* ✅ px ŞART */
  height:1px;
}
#about-anchor{
  position:relative;
  top:-400px;   /* navbar + hero offset */
  height:1px;
}
#community-anchor{
  position:relative;
  top:-800px;   /* navbar + üst boşluk */
  height:1px;
}
#contact-anchor{
  position:relative;
  top:-220px;   /* navbar yüksekliği telafisi */
  height:1px;
}
#home-anchor{
  position:relative;
  top:-300px;   /* navbar yüksekliği */
  height:1px;
}

/* ======================================================
   RESPONSIVE — TABLET & MOBILE (GÜNCEL)
====================================================== */

/* ===== LARGE TABLET / SMALL LAPTOP (≤1200px) ===== */
@media (max-width:1200px){

  .nav-wrap{
    padding:20px 40px;
  }

  .hero-grid{
    gap:80px;
    padding:160px 40px 0;
  }

  .about-services,
  .market-section,
  .feature-section,
  .site-footer{
    padding-left:40px;
    padding-right:40px;
  }

  /* Market 3 kolon yerine 2 kolon */
  .market-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    max-width:1100px;
    margin:0 auto;
  }

  /* Anchor offsetleri biraz azalt (büyük ekranda hâlâ güzel scroll) */
  #games-anchor{ top:-260px; }
  #top-rated-anchor{ top:-260px; }
  #about-anchor{ top:-260px; }
  #community-anchor{ top:-260px; }
  #contact-anchor{ top:-220px; }
  #home-anchor{ top:-260px; }
}

@media (max-width:1024px){

  /* NAV */
  .nav{
    display:none;
  }

  .hero{
    width:100%;
    overflow:hidden;
  }

  /* HERO */
  .hero-grid{
    max-width:100%;
    width:100%;
    margin:0;
    grid-template-columns:1fr;
    gap:48px;
    padding:150px 32px 0;
    text-align:center;
  }

  .hero-left,
  .hero-right{
    transform:none;
  }

  .hero-art{
    width:100%;
    max-width:420px;
    margin:0 auto;
  }

  .partners{
    position:static;
    margin-top:32px;
    justify-content:center;
  }

  /* MARKET */
  .market-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:28px;
  }

  /* FEATURE */
  .feature-row{
    grid-template-columns:1fr;
    max-width:760px;
    margin:0 auto;
  }

  /* COMMUNITY */
  .community-section{
    height:auto;
    padding:80px 0;
    margin-top:80px;
  }

  /* ANCHORS */
  #games-anchor,
  #top-rated-anchor,
  #home-anchor{
    top:-200px;
  }

  #about-anchor,
  #community-anchor{
    top:-220px;
  }

  #contact-anchor{
    top:-180px;
  }
}
@media (max-width:768px){

  /* NAV */
  .nav-wrap{
    padding:14px 18px;
  }

  .btn-sign{
    display:none;
  }

  /* HERO */
  .hero{
    width:100vw;
    overflow:hidden;
  }

  .hero-grid{
    width:100%;
    max-width:100%;
    margin:0;
    padding:130px 20px 0;
    gap:36px;
  }

  .hero-title{
    font-size:38px;
  }

  .hero-sub{
    font-size:11px;
    letter-spacing:.14em;
  }

  .hero-right{
    margin-top:24px;
  }

  .hero-art{
    width:100%;
    max-width:320px;
    margin:0 auto;
  }

  /* ABOUT */
  .about-services{
    padding:100px 20px;
  }

  .about-grid{
    gap:60px;
  }

  /* MARKET */
  .market-section{
    padding:70px 20px;
  }

  .market-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .market-card{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:28px;
  }

  .card-img{
    width:100%;
    height:180px;
  }

  /* FEATURE */
  .feature-section{
    padding:90px 20px;
  }

  .feature-row{
    grid-template-columns:1fr;
    gap:32px;
  }

  /* COMMUNITY */
  .community-section{
    margin-top:70px;
    padding:60px 0;
  }

  /* FOOTER */
  .site-footer{
    padding:70px 20px 26px;
  }

  .footer-bottom{
    font-size:12px;
  }

  /* ANCHORS */
  #games-anchor,
  #top-rated-anchor,
  #about-anchor,
  #community-anchor,
  #home-anchor{
    top:-140px;
  }

  #contact-anchor{
    top:-120px;
  }
}
@media (max-width:480px){

  .hero-title{
    font-size:32px;
  }

  .btn-cta{
    padding:11px 20px;
    font-size:11px;
  }

  .icon-btn{
    width:36px;
    height:36px;
  }

  #scrollTopBtn{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .footer-bottom{
    font-size:11px;
  }
}
/* ======================================================
   ROTATE OVERLAY — SADECE TELEFON / TABLET (KESİN)
   ✅ iPhone / Android / iPad
   ❌ PC / Laptop / Monitor
====================================================== */

#rotate-overlay{
  position:fixed;
  inset:0;
  background:#000;
  z-index:999999;

  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:24px;
}

.rotate-box{
  color:#ff9035;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.rotate-box img{
  width:90px;
  height:auto;
  opacity:.9;

  animation: phoneRotate 2.2s ease-in-out infinite;
  transform-origin:50% 50%;
}

.rotate-box p{
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
}

@keyframes phoneRotate{
  0%{   transform:rotate(90deg); opacity:.6; }
  25%{  transform:rotate(90deg); opacity:.85; }
  50%{  transform:rotate(0deg);  opacity:1; }
  75%{  transform:rotate(0deg);  opacity:.9; }
  100%{ transform:rotate(90deg); opacity:.6; }
}

/* ======================================================
   ✅ KURAL 1 (KESİN): Küçük ekran + YATAY = overlay aç
   (Telefonların hepsini yakalar)
====================================================== */
@media screen and (max-width:1024px) and (orientation:landscape){
  #rotate-overlay{ display:flex; }
  html, body{ overflow:hidden; height:100%; }
}

/* ======================================================
   ❌ KURAL 2: PC/Laptop genelde hover: hover -> overlay kapat
   (DevTools ile küçültüp yatay yapınca da PC’de çıkmasın diye)
====================================================== */
@media (hover:hover) and (pointer:fine){
  #rotate-overlay{ display:none !important; }
  html, body{ overflow:auto !important; height:auto !important; }
}

/* ======================================================
   🍏 iOS blur (opsiyonel)
====================================================== */
@supports (-webkit-touch-callout:none){
  #rotate-overlay{
    backdrop-filter: blur(2px);
  }
}