/* ===== HERO ===== */
.hero {
  display:flex; align-items:center; justify-content:space-between;
  min-height:60vh; padding:48px 80px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 80% at 15% 50%,rgba(233,30,140,0.13) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 40%,rgba(124,58,237,0.13) 0%,transparent 60%);
}
.hero-bg-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; }
.hero-bg-orb1 { width:500px; height:500px; background:radial-gradient(circle,rgba(233,30,140,0.18),transparent); top:-120px; left:-80px; animation:orbFloat 8s ease-in-out infinite; }
.hero-bg-orb2 { width:400px; height:400px; background:radial-gradient(circle,rgba(124,58,237,0.18),transparent); bottom:-60px; right:80px; animation:orbFloat 10s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-20px)} }

.hero-content { max-width:560px; position:relative; z-index:1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(233,30,140,0.12); border:1px solid rgba(233,30,140,0.3);
  border-radius:30px; padding:6px 16px;
  font-size:11px; font-weight:700; color:var(--primary);
  margin-bottom:18px; letter-spacing:0.5px;
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(233,30,140,0.2)}50%{box-shadow:0 0 0 6px rgba(233,30,140,0)}}
.hero-content h1 { font-size:52px; font-weight:900; line-height:1.15; margin-bottom:16px; letter-spacing:-1px; }
.hero-content h1 .line2 { display:block; }
.hero-content p { font-size:17px; color:var(--text-secondary); margin-bottom:32px; line-height:1.7; max-width:460px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats { display:flex; gap:0; }
.stat { padding:0 24px; border-right:1px solid rgba(255,255,255,0.08); }
.stat:first-child { padding-left:0; }
.stat:last-child { border-right:none; }
.stat span { display:block; font-size:30px; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-1px; }
.stat label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; display:block; }

.hero-visual { flex:1; display:flex; justify-content:center; align-items:center; position:relative; z-index:1; }
.floating-cards { position:relative; width:320px; height:320px; }
.float-card {
  position:absolute;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  animation:float 4s ease-in-out infinite;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transition:var(--transition);
}
.float-card:hover { border-color:rgba(233,30,140,0.5); box-shadow:0 0 30px rgba(233,30,140,0.3); transform:scale(1.1) !important; }
.fc1{width:72px;height:72px;font-size:32px;top:8%;left:18%;animation-delay:0s}
.fc2{width:64px;height:64px;font-size:28px;top:4%;right:12%;animation-delay:0.6s}
.fc3{width:80px;height:80px;font-size:36px;bottom:18%;left:8%;animation-delay:1.2s}
.fc4{width:68px;height:68px;font-size:30px;bottom:8%;right:18%;animation-delay:1.8s}
.fc5{width:76px;height:76px;font-size:34px;top:42%;left:38%;animation-delay:0.9s}
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 33%{transform:translateY(-18px) rotate(3deg) scale(1.05)} 66%{transform:translateY(-8px) rotate(-2deg) scale(0.98)} }

/* ===== MİNİ HERO BANNER ===== */
.mini-hero {
  display:flex;
  align-items:center;
  gap:24px;
  padding:28px 0 24px;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:0;
  position:relative;
}
.mini-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 100% at 0% 50%,rgba(233,30,140,0.08),transparent);
  pointer-events:none;
}
.mini-hero-left { flex:1; min-width:0; }
.mini-hero-title {
  font-size:28px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:6px;
  letter-spacing:-0.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-hero-sub {
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.5;
}
.mini-hero-stats {
  display:flex;
  gap:20px;
  flex-shrink:0;
}
.mini-stat {
  text-align:center;
  padding:0 12px;
  border-right:1px solid rgba(255,255,255,0.08);
}
.mini-stat:last-child { border-right:none; }
.mini-stat span {
  display:block;
  font-size:22px;
  font-weight:900;
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-0.5px;
}
.mini-stat label {
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  display:block;
  margin-top:2px;
}
.mini-hero-btns {
  display:flex;
  gap:8px;
  flex-shrink:0;
}
@media(max-width:768px){
  .mini-hero { padding:20px 0 16px; gap:16px; }
  .mini-hero-title { font-size:20px; white-space:normal; }
  .mini-hero-stats { gap:12px; }
  .mini-stat span { font-size:18px; }
  .mini-hero-btns { width:100%; }
  .mini-hero-btns .btn { flex:1; justify-content:center; }
}

/* ===== KATEGORİLER (section - gizli, navbar'da var) ===== */
.categories { display:none; }
.categories .container {
  display:flex;
  align-items:center;
  gap:16px;
}
.cat-list {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:10px 0;
  scrollbar-width:none;
  align-items:center;
  flex:1;
}
.cat-list::-webkit-scrollbar { display:none; }

/* Arama kutusu kategori ile aynı satırda */
.cat-search {
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:7px 16px;
  min-width:220px;
  flex-shrink:0;
  transition:all 0.2s ease;
}
.cat-search:focus-within {
  border-color:rgba(233,30,140,0.4);
  background:rgba(233,30,140,0.05);
  box-shadow:0 0 0 3px rgba(233,30,140,0.08);
}
.cat-search i { color:rgba(255,255,255,0.3); font-size:13px; flex-shrink:0; }
.cat-search input {
  background:none; border:none; outline:none;
  color:var(--text-primary); font-size:13px;
  font-family:inherit; width:100%;
}
.cat-search input::placeholder { color:rgba(255,255,255,0.3); }
.cat-btn {
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  border-radius:30px;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.6);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  cursor:pointer;
  flex-shrink:0;
  font-family:inherit;
  position:relative;
  overflow:hidden;
}
.cat-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient);
  opacity:0;
  transition:opacity 0.2s ease;
  border-radius:30px;
}
.cat-btn:hover {
  border-color:rgba(233,30,140,0.4);
  color:white;
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(233,30,140,0.2);
}
.cat-btn:hover::before { opacity:0.1; }
.cat-btn.active {
  background:var(--gradient);
  border-color:transparent;
  color:white;
  box-shadow:0 4px 20px rgba(233,30,140,0.4);
  transform:translateY(-1px);
}
.cat-btn.active::before { opacity:0; }
.cat-icon { font-size:15px; line-height:1; }
.cat-label { font-size:13px; font-weight:700; }
.cat-count {
  background:rgba(255,255,255,0.15);
  color:white;
  font-size:10px;
  font-weight:800;
  padding:1px 6px;
  border-radius:10px;
  min-width:18px;
  text-align:center;
  line-height:1.6;
  display:none;
}
.cat-count:not(:empty) { display:inline-block; }
.cat-btn.active .cat-count { background:rgba(255,255,255,0.25); }
/* has-rooms class'ı olan kategoriler daha belirgin */
.cat-btn.has-rooms .cat-count { display:inline-block; }
/* Active btn hover override */
.cat-btn.active:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(233,30,140,0.5); }

/* SECTION HEADER - kategori + arama yan yana */
.live-section-header-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.live-section-search {
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:7px 16px;
  min-width:200px;
  max-width:280px;
  flex:1;
}
.live-section-search i { color:rgba(255,255,255,0.3); font-size:13px; flex-shrink:0; }
.live-section-search input {
  background:none; border:none; outline:none;
  color:var(--text-primary); font-size:13px; font-family:inherit;
  width:100%;
}
.live-section-search input::placeholder { color:rgba(255,255,255,0.3); }



.live-section { padding:60px 0; }
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.room-card { background:var(--bg-card); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-xl); overflow:hidden; cursor:pointer; transition:var(--transition); position:relative; }
.room-card::before { content:''; position:absolute; inset:0; background:var(--gradient); opacity:0; transition:var(--transition); z-index:0; border-radius:var(--radius-xl); }
.room-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(233,30,140,0.25); border-color:rgba(233,30,140,0.3); }
.room-card:hover::before { opacity:0.05; }
.room-thumb { position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#0f0f24,#080814); overflow:hidden; }
.room-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.room-card:hover .room-thumb img { transform:scale(1.05); }
.room-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:52px; background:linear-gradient(135deg,rgba(233,30,140,0.08),rgba(124,58,237,0.08)); }
.room-thumb-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,0.7) 100%); }
.room-live-tag { position:absolute; top:10px; left:10px; z-index:2; }
.room-viewers { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); color:white; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:5px; z-index:2; }
.room-info { padding:16px; position:relative; z-index:1; }
.room-broadcaster { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.room-broadcaster img { width:38px; height:38px; border-radius:50%; border:2px solid var(--primary); object-fit:cover; box-shadow:0 0 12px rgba(233,30,140,0.3); }
.room-broadcaster-name { font-size:13px; font-weight:700; }
.room-broadcaster-status { font-size:11px; color:var(--success); display:flex; align-items:center; gap:4px; }
.room-title { font-size:14px; font-weight:700; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-tags { display:flex; gap:5px; flex-wrap:wrap; }
.room-tag { font-size:10px; padding:3px 9px; background:rgba(233,30,140,0.1); border:1px solid rgba(233,30,140,0.2); border-radius:12px; color:var(--primary); font-weight:600; }
.room-card-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid rgba(255,255,255,0.04); }
.room-gift-count { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:4px; }

.features-section { padding:80px 0; background:linear-gradient(180deg,var(--bg-dark) 0%,rgba(12,10,28,1) 50%,var(--bg-dark) 100%); position:relative; overflow:hidden; }
.features-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(circle,rgba(124,58,237,0.07),transparent 70%); pointer-events:none; }

/* Header */
.features-header { text-align:center; margin-bottom:52px; }
.features-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(233,30,140,0.1); border:1px solid rgba(233,30,140,0.25); border-radius:20px; padding:5px 14px; font-size:11px; font-weight:700; color:var(--primary); letter-spacing:1px; margin-bottom:16px; }
.features-title { font-size:38px; font-weight:900; letter-spacing:-1px; margin-bottom:12px; }
.features-sub { font-size:15px; color:var(--text-secondary); max-width:400px; margin:0 auto; }

/* Grid */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* Kart */
.feature-card { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:20px; padding:26px 22px 22px; text-align:left; transition:all 0.35s cubic-bezier(0.34,1.2,0.64,1); position:relative; overflow:hidden; opacity:0; transform:translateY(28px); }
.feature-card.visible { opacity:1; transform:translateY(0); }
.feature-card-glow { position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 15% 15%,var(--fg,rgba(233,30,140,0.15)),transparent 65%); opacity:0; transition:opacity 0.4s ease; pointer-events:none; border-radius:20px; }
.feature-card:hover { transform:translateY(-7px); border-color:rgba(255,255,255,0.13); box-shadow:0 24px 56px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.04); }
.feature-card:hover .feature-card-glow { opacity:1; }
.feature-card-highlight { background:linear-gradient(135deg,rgba(6,182,212,0.07),rgba(124,58,237,0.07)); border-color:rgba(6,182,212,0.18); }
.feature-card-highlight:hover { border-color:rgba(6,182,212,0.35); }

/* İkon */
.feature-icon-wrap { width:60px; height:60px; border-radius:15px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; transition:all 0.3s ease; }
.feature-card:hover .feature-icon-wrap { transform:scale(1.1) rotate(-4deg); border-color:var(--fc1,rgba(233,30,140,0.4)); box-shadow:0 6px 20px rgba(0,0,0,0.3); }
.feature-icon-ring { position:absolute; inset:-5px; border-radius:20px; border:1.5px dashed var(--fc1,#e91e8c); opacity:0; transition:all 0.4s ease; animation:ringRotate 6s linear infinite; }
.feature-card:hover .feature-icon-ring { opacity:0.35; }
@keyframes ringRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.feature-svg { width:34px; height:34px; position:relative; z-index:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); transition:transform 0.3s ease; }
.feature-card:hover .feature-svg { transform:scale(1.1); }

/* İçerik */
.feature-content h3 { font-size:16px; font-weight:800; margin-bottom:8px; letter-spacing:-0.2px; }
.feature-content p { color:var(--text-secondary); font-size:13px; line-height:1.7; margin-bottom:14px; }
.feature-tag { display:flex; flex-wrap:wrap; gap:5px; }
.feature-tag span { font-size:10px; font-weight:700; color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:2px 8px; letter-spacing:0.3px; transition:all 0.2s ease; }
.feature-card:hover .feature-tag span { color:rgba(255,255,255,0.75); border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.07); }

/* Popüler badge */
.feature-popular-badge { position:absolute; top:14px; right:14px; background:linear-gradient(135deg,#f59e0b,#ef4444); color:white; font-size:10px; font-weight:800; padding:3px 10px; border-radius:10px; box-shadow:0 2px 10px rgba(245,158,11,0.4); letter-spacing:0.3px; animation:badgePop 2s ease-in-out infinite alternate; }
@keyframes badgePop { 0%{transform:scale(1)}100%{transform:scale(1.06)} }

.packages-preview { padding:80px 0; text-align:center; }
.packages-mini { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.pkg-mini-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px; min-width:130px; transition:var(--transition); cursor:pointer; }
.pkg-mini-card:hover,.pkg-mini-card.popular { border-color:var(--primary); background:linear-gradient(135deg,rgba(233,30,140,0.1),rgba(124,58,237,0.1)); }
.pkg-mini-card .pkg-points { font-size:22px; font-weight:800; color:var(--accent); }
.pkg-mini-card .pkg-price { font-size:13px; color:var(--text-secondary); }

@media(max-width:1024px){.hero{padding:40px 24px}.hero-content h1{font-size:38px}.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .hero{flex-direction:column;text-align:center;min-height:auto;padding:40px 20px}
  .hero-visual{display:none}
  .hero-btns{justify-content:center}
  .hero-stats{justify-content:center}
  .rooms-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .features-grid{grid-template-columns:1fr}
  /* Kategori mobil */
  .categories{top:56px}
  .categories .container{flex-wrap:wrap;gap:8px}
  .cat-list{padding:8px 0;width:100%}
  .cat-btn{padding:7px 12px;font-size:11px;gap:4px}
  .cat-icon{font-size:13px}
  .cat-label{font-size:11px}
  .cat-search{min-width:0;width:100%;order:2}
}