:root{
  --bg:#050812;
  --panel:#101622;
  --card:#151c29;
  --acc:#00eaff;
  --text:#e8e8e8;
  --mut:#a5b1c8;
  --text-soft:#a5b1c8;
  --danger:#ff4d4f;
  --ok:#3dd68c;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:radial-gradient(circle at top,#161f35 0,#050812 55%);
  color:var(--text);
  min-height:100vh;
}

a{color:var(--acc);text-decoration:none}

/* Genel kapsayıcı */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding: clamp(14px, 2.5vw, 32px);
}

/* ================= NAVBAR (layout içinden geliyorsa da uyumlu) ================= */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:rgba(16,22,34,.75);
  border:1px solid rgba(0,234,255,.18);
  border-radius:16px;
  backdrop-filter:blur(10px);
}
.brand{font-weight:900;letter-spacing:.3px}
.menu{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.navlink{
  color:var(--text-soft);
  padding:8px 12px;
  border-radius:12px;
}
.navlink:hover{
  color:var(--text);
  background:rgba(0,234,255,.08);
}

/* ================= BUTTON ================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,234,255,.25);
  background:rgba(0,234,255,.12);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{background:rgba(0,234,255,.2);transform:translateY(-1px)}
.btn.primary{
  background:var(--acc);
  color:#000;
  box-shadow:0 0 18px rgba(0,234,255,.35);
}
.btn.primary:hover{box-shadow:0 0 22px rgba(0,234,255,.55)}
.btn.ghost{
  background:transparent;
  color:var(--acc);
  border:1px solid rgba(0,234,255,.25);
}

/* ================= TOP STRIP (Puan + Maç + Saat) ================= */
.top-strip-2{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 14px;
}

.kocaeli-pair{display:flex;gap:12px;align-items:center}

.mini-box{
  background:rgba(16,22,34,.85);
  border-radius:12px;
  padding:8px;
  border:1px solid rgba(0,234,255,.14);
}
.mini-title{
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
.mini-iframe{
  width:260px;
  height:64px;
  border:0;
}

/* mobil */
@media (max-width: 980px){
  .top-strip-2{flex-direction:column;align-items:stretch}
  .kocaeli-pair{flex-wrap:wrap;justify-content:space-between}
  .mini-iframe{width:100%}
}

/* ================= PRINT STATUS (mini) ================= */
.print-status{
  background:rgba(16,22,34,.75);
  border:1px solid rgba(0,234,255,.14);
  border-radius:14px;
  padding:10px 12px;
  max-width:520px;
  width:100%;
  backdrop-filter:blur(10px);
}
.print-status-header{display:flex;gap:8px;align-items:center;color:var(--text-soft);font-size:13px}
.print-dot-separator{opacity:.6}
.print-status-timeline{margin-top:8px}
.print-status-line{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.print-status-progress{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,rgba(0,234,255,.9),rgba(61,214,140,.9))}
.print-status-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--text-soft);opacity:.9}
.print-status-footer{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:12px;color:var(--text-soft)}
.print-status-bullet{width:7px;height:7px;border-radius:50%;background:#f6c453;box-shadow:0 0 8px rgba(246,196,83,.6)}
.print-status-icon{font-size:14px}

/* ================= HERO SLIDER ================= */
.hero-slider{max-width:1200px;margin:18px auto 22px;padding:0 1rem}
.slider-shell{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(0,234,255,.18);box-shadow:0 0 25px rgba(0,234,255,.10);background:rgba(5,8,18,.6)}
.slider-track{display:flex;transition:transform .9s ease-in-out;will-change:transform}
.slide{min-width:100%;flex-shrink:0;display:flex;align-items:stretch;height:60vh;max-height:560px}
.slide-image{flex:1.4;overflow:hidden}
.slide-image img{width:100%;height:100%;object-fit:cover;filter:brightness(72%);transform:scale(1.03)}
.slide-content{flex:1;padding:2.2rem;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(5,8,18,.92),rgba(16,22,34,.92))}
.slide-title{font-size:2rem;color:var(--acc);margin-bottom:.7rem;font-weight:900}
.slide-text{font-size:.98rem;line-height:1.55;color:var(--text-soft);margin-bottom:1.2rem}
.slide-tags{margin-bottom:1.2rem}
.tag-pill{display:inline-block;border-radius:999px;border:1px solid rgba(0,234,255,.18);padding:.3rem .8rem;font-size:.8rem;margin-right:.4rem;margin-bottom:.4rem;color:var(--text);background:rgba(0,234,255,.06)}

.hero-cta{margin-top:.3rem;display:flex;flex-wrap:wrap;gap:10px}

/* oklar */
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:999px;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.6rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  user-select:none;z-index:2;
}
.slider-arrow:hover{background:rgba(0,0,0,.82)}
.slider-arrow.prev{left:14px}
.slider-arrow.next{right:14px}

/* noktalar */
.slider-dots{position:absolute;bottom:14px;left:0;width:100%;text-align:center;z-index:2}
.slider-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 4px;background:rgba(255,255,255,.35);cursor:pointer}
.slider-dot.active{background:var(--acc);transform:scale(1.1)}

/* mini istatistikler */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.2rem;
  margin-top:14px;
}
.stat{
  background:rgba(16,22,34,.75);
  border-radius:14px;
  padding:1rem 1.2rem;
  border:1px solid rgba(0,234,255,.12);
  text-align:center;
}
.stat-number{font-size:1.55rem;color:var(--acc);font-weight:900;margin-bottom:.2rem}
.stat-label{font-size:.85rem;color:var(--text-soft)}

/* ================= SECTIONS / CARDS ================= */
.bm-sec{max-width:1200px;margin:0 auto;padding:36px 1rem}
.bm-sec h2{color:var(--acc);text-align:center;margin-bottom:18px;font-size:1.9rem;font-weight:900}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{
  background:rgba(21,28,41,.82);
  border-radius:16px;
  padding:18px 16px;
  border:1px solid rgba(0,234,255,.14);
  box-shadow:0 0 18px rgba(0,234,255,.06);
}
.card h3{color:var(--acc);margin-bottom:8px;font-size:1.1rem}
.card p{color:var(--text-soft);line-height:1.55}

.why-intro{max-width:760px;margin:0 auto 20px;text-align:center;color:var(--text-soft);line-height:1.6}
.why-icon{font-size:1.9rem;margin-bottom:8px}

.brands-strip{
  background:rgba(16,22,34,.75);
  border:1px solid rgba(0,234,255,.12);
  border-radius:16px;
  padding:18px;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px 18px;
}
.brand-pill{
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:1px solid rgba(165,177,200,.35);
  background:rgba(5,8,18,.45);
  color:var(--text);
  font-size:.9rem;
  opacity:.95;
}

/* süreç */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.step{background:rgba(21,28,41,.82);border:1px solid rgba(0,234,255,.12);border-radius:16px;padding:16px}
.step-number{width:28px;height:28px;border-radius:999px;border:1px solid var(--acc);display:flex;align-items:center;justify-content:center;color:var(--acc);font-weight:800;margin-bottom:10px}
.step-title{color:var(--acc);font-weight:900;margin-bottom:6px}
.step-text{color:var(--text-soft);line-height:1.55}

/* viewer + video */
.viewer-wrapper{
  background:rgba(16,22,34,.75);
  border:1px solid rgba(0,234,255,.12);
  border-radius:16px;
  padding:18px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:16px;
  align-items:center;
}
#viewer3d{width:100%;height:320px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at top,#1f2937,#020617);border:1px solid rgba(0,234,255,.10)}
.viewer-text{color:var(--text-soft);line-height:1.55}
.viewer-text h3{color:var(--acc);margin-bottom:8px}

.video-wrapper{max-width:900px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid rgba(0,234,255,.18);box-shadow:0 0 20px rgba(0,234,255,.10)}
.video-inner{position:relative;padding-bottom:56.25%;height:0}
.video-inner iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-note{text-align:center;margin-top:10px;color:var(--text-soft)}

/* yorumlar */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:10px}
.testimonial-card{
  background:rgba(21,28,41,.82);
  border:1px solid rgba(0,234,255,.12);
  border-radius:16px;
  padding:16px;
  position:relative;
}
.testimonial-card:before{content:"“";position:absolute;top:8px;left:12px;font-size:2.2rem;color:rgba(0,234,255,.18)}
.testimonial-text{margin-top:16px;color:var(--text-soft);line-height:1.6}
.testimonial-name{margin-top:12px;font-weight:900;color:var(--acc)}
.testimonial-role{color:var(--text-soft);font-size:.85rem}

/* responsive */
@media (max-width: 900px){
  .slide{flex-direction:column;height:auto}
  .slide-image{height:38vh;max-height:320px}
  .slide-content{padding:1.4rem}
  .slide-title{font-size:1.55rem}
  .viewer-wrapper{grid-template-columns:1fr}
}