/* =====================================================
   KazançBox - style.css
   Ana stil dosyası (Mobile-first)
   ===================================================== */

/* ---------- ROOT ---------- */
:root{
--bg:#07090F;
--bg2:#0D1117;
--bg-overlay: rgba(7,9,15,.96);
--card:#111827;
--card2:#1a2235;
--accent:#6C63FF;
--accent2:#8B5CF6;
--green:#10B981;
--text:#F1F5F9;
--muted:#8B949E;
--border:#1E2A3A;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--shadow:0 20px 50px rgba(0,0,0,.55);
--nav-h: 60px;
}

/* ---------- RESET ---------- */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',system-ui,sans-serif;
text-decoration:none;
-webkit-tap-highlight-color: transparent;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
line-height:1.6;
opacity:0; /* FOUC önleme */
transition:opacity .3s;
}

body.loaded{
opacity:1;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{
width:8px;
}
::-webkit-scrollbar-track{
background:var(--bg2);
}
::-webkit-scrollbar-thumb{
background:var(--accent);
border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
background:var(--accent2);
}
/* ---------- NAVBAR ---------- */
nav{
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--nav-h);
  background: rgba(7,9,15,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 900;
  gap: 8px;
}

.logo{
font-size:1.2rem;
font-weight:900;
letter-spacing:-1px;
color:var(--text);
flex-shrink: 0;
}

.logo span{
color:var(--accent);
}

/* Masaüstü linkleri - mobilde gizli */
.nav-center{
display:none;
align-items:center;
gap:2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

.nav-center a{
color:var(--muted);
font-size:.875rem;
font-weight:500;
padding:8px 14px;
border-radius:var(--radius-sm);
transition:.25s;
}

.nav-center a:hover{
background:var(--card);
color:var(--text);
}

/* ---------- DROPDOWN ---------- */
.dropdown{position:relative;}

.dropdown .trigger{
display:flex;
align-items:center;
gap:6px;
padding:7px 12px;
border-radius:var(--radius-sm);
cursor:pointer;
color:var(--muted);
font-size: .875rem;
transition:.25s;
}

.dropdown .trigger:hover,
.dropdown.open .trigger{
background:var(--card);
color:#fff;
}

.drop-menu{
display:none;
position:absolute;
left:0;
top:calc(100% + 8px);
background:var(--card2);
border:1px solid var(--border);
border-radius:var(--radius-md);
min-width:230px;
overflow:hidden;
box-shadow:var(--shadow);
}

.dropdown.open .drop-menu{
display:block;
}

.drop-menu a{
display:flex;
align-items:center;
gap:10px;
padding:13px 18px;
color:#fff;
transition:.25s;
border-bottom:1px solid var(--border);
}

.drop-menu a:last-child{
border-bottom:none;
}

.drop-menu a:hover{
background:var(--accent);
padding-left:24px;
}

/* ---------- RIGHT ---------- */
.nav-right{
display:flex;
align-items:center;
gap:10px;
}

#login-btn{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#fff;
padding:7px 14px;
border-radius:var(--radius-sm);
font-weight:600;
font-size: .82rem;
transition:.25s;
}

#login-btn:hover{
transform:translateY(-2px);
}

/* ---------- PROFILE ---------- */
#profile-wrapper{
display:none;
position:relative;
cursor:pointer;
}

#avatar{
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--accent),var(--accent2));
font-weight:bold;
font-size: .85rem;
border:2px solid var(--border);
}

#profile-menu{
display:none;
position:absolute;
right:0;
top:calc(100% + 10px);
min-width:220px;
background:var(--card2);
border:1px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow);
}

#profile-wrapper.open #profile-menu{
display:block;
}

.pm-head{
padding:12px 16px;
border-bottom:1px solid var(--border);
}

.pm-name{
font-weight:700;
font-size: .86rem;
}

.pm-email{
font-size:.72rem;
color:var(--muted);
}

.pm-balance{
padding:10px 16px;
background:rgba(108,99,255,.12);
color:var(--accent);
font-weight:700;
border-bottom:1px solid var(--border);
}

#profile-menu a{
display:flex;
align-items:center;
gap:10px;
padding:10px 16px;
color:#fff;
transition:.25s;
border-bottom:1px solid var(--border);
}

#profile-menu a:hover{
background:var(--accent);
padding-left:22px;
}

/* ---------- HAMBURGER & MOBİLE MENU ---------- */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
  z-index: 800;
  transform: translateY(-110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-h));
}
.mobile-menu.open { transform: translateY(0); }

.mobile-menu-inner { padding: 12px 0 24px; }
.mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.mobile-link:hover, .mobile-link.active { background: rgba(108,99,255,.1); color: var(--accent); }
.mobile-link:last-child { border-bottom: none; }
.mobile-store { color: var(--accent) !important; font-weight: 700; }
.mobile-section-title {
  padding: 10px 20px 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 799;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.mobile-overlay.visible { display: block; }


/* ---------- HERO ---------- */
.hero{
padding:60px 16px 70px;
text-align:center;
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
left:50%;
top:-200px;
transform:translateX(-50%);
width:100%;
max-width: 800px;
height:800px;
background:radial-gradient(circle,rgba(108,99,255,.13),transparent 70%);
pointer-events:none;
}

.hero h1{
font-size:clamp(2.4rem,5vw,4.2rem);
font-weight:900;
line-height:1.08;
margin-bottom:16px;
letter-spacing: -1.5px;
}

.hero h1 span{
background:linear-gradient(135deg,var(--accent),var(--accent2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
max-width:520px;
margin:auto;
margin-bottom:32px;
font-size: 1rem;
color:var(--muted);
}

.hero-btns{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}

.btn-hero{
padding:14px 32px;
border:none;
border-radius:var(--radius-md);
cursor:pointer;
font-weight:700;
transition:.3s;
}

.btn-hero.primary{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#fff;
}

.btn-hero.primary:hover{
transform:translateY(-3px);
}

.btn-hero.secondary{
background:var(--card);
border:1px solid var(--border);
color:#fff;
}

/* ---------- STATS ---------- */
.stats{
display:flex;
/* Mobil için yatay kaydırma ekle */
overflow-x: auto;
/* Kaydırma çubuğunu gizle */
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
background:var(--bg2);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.stats::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */

.stat{
flex: 0 0 120px; /* Kartların küçülmesini engelle ve genişliğini ayarla */
width: 120px;   /* Her karta sabit genişlik ver */
padding:28px 16px;
text-align:center;
border-right:1px solid var(--border);
}
.stat:last-child{
border-right:none;
}

.stat h3{
font-size:1.8rem;
background:linear-gradient(135deg,var(--accent),var(--accent2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.stat p{
color:var(--muted);
font-size: .8rem;
}

/* ---------- SECTIONS ---------- */
.hub,.how,.trust{
padding:70px 16px;
}

.section-label{
color:var(--accent);
font-size:.8rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:10px;
}

.section-title{
font-size:1.8rem;
font-weight:800;
margin-bottom:12px;
}

.section-sub{
max-width:520px;
color:var(--muted);
margin-bottom:40px;
}

/* ---------- GRID ---------- */
.hub-grid,
.how-grid{
display:grid;
gap:20px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* ---------- HOW SECTION ---------- */
.how-step{
  text-align:center;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px 20px;
  border-radius: var(--radius-lg);
}
.how-num{
  width:50px; height:50px; border-radius:var(--radius-md);
  background:rgba(108,99,255,.1); border:1px solid rgba(108,99,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.1rem; color:var(--accent);
  margin:0 auto 16px;
}
.how-step p{ color:var(--muted); font-size:.85rem; margin-top: 6px; }

/* ---------- CARD ---------- */
.hub-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:24px;
position:relative;
transition:.3s;
cursor:pointer;
overflow:hidden;
}

.hub-card:hover{
transform:translateY(-6px);
border-color:var(--accent);
box-shadow:var(--shadow);
}

.hub-icon{
font-size:2rem;
margin-bottom:14px;
}

.hub-card p{
color:var(--muted);
}

/* ---------- TRUST ---------- */
.trust{
text-align:center;
border-top:1px solid var(--border);
}

.trust-badges{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:30px;
}

.trust-badge{
background:var(--card);
border:1px solid var(--border);
padding:16px 22px;
border-radius:var(--radius-md);
}

/* ---------- FOOTER ---------- */
footer{
padding:50px 16px 24px;
background:var(--bg2);
border-top:1px solid var(--border);
}

.footer-top{
display:grid;
grid-template-columns:1fr;
gap:50px;
margin-bottom:40px;
}

.footer-col h4{
margin-bottom:15px;
}

.footer-col a{
display:block;
margin-bottom:10px;
color:var(--muted);
}

.footer-col a:hover{
color:var(--accent);
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:24px;
border-top:1px solid var(--border);
color:var(--muted);
flex-direction: column;
gap: 10px;
}

/* ═══════════════════════════════════
   TABLET  (≥ 768px)
═══════════════════════════════════ */
@media (min-width: 768px) {
  :root { --nav-h: 64px; }

  nav { padding: 0 24px; }
  .logo { font-size: 1.3rem; }

  .hero { padding: 80px 24px; }
  .hero h1 { letter-spacing: -2px; }
  .hero p { font-size: 1.1rem; }
  .btn-hero { padding: 15px 38px; }

  /* Tablet ve üzeri için stats bölümünü ortala */
  .stats { justify-content: center; }
  .stat { width: auto; flex: 1; max-width: 220px; }
  .stat { padding: 32px 20px; }
  .stat h3 { font-size: 2rem; }

  .hub, .how, .trust { padding: 80px 24px; }
  .section-title { font-size: 2rem; }
  .section-sub { margin-bottom: 50px; }

  .hub-card { padding: 30px; }

  /* Tablet ve üzeri için .how-grid */
  .how-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-top { grid-template-columns: 2fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; }
}

/* ═══════════════════════════════════
   DESKTOP  (≥ 1024px)
═══════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --nav-h: 70px; }

  nav { padding: 0 7%; }
  .logo { font-size: 1.55rem; }

  /* Show desktop nav, hide hamburger */
  .nav-center { display: flex; }
  .hamburger  { display: none; }

  #avatar { width: 38px; height: 38px; }
  #login-btn { padding: 8px 20px; font-size: .875rem; }

  .hero { padding: 110px 7% 90px; }
  .hero h1 { letter-spacing: -2px; }

  .stat { padding: 38px 20px; }
  .stat h3 { font-size: 2.2rem; }

  .hub, .how, .trust { padding: 90px 7%; }
  .section-title { font-size: 2.1rem; }

  .footer-top { gap: 60px; }
}

/* ═══════════════════
   REDUCED MOTION
═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}