:root{
      --bg: #000;
        --card: #0f0f0f;
          --muted: #bdbdbd;
            --text: #fff;
              --accent: #fff;
                --wh: #25D366;
                  --glass: rgba(255,255,255,0.03);
                    --radius: 16px;
                      --maxw: 1100px;
                        --shadow: 0 20px 60px rgba(0,0,0,0.65);
                        }

                        /* Reset & temel */
                        *{box-sizing:border-box}
                        html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
                        a{color:inherit}
                        .container{max-width:var(--maxw);margin:0 auto;padding:28px}

                        /* Intro overlay */
                        #intro{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#000,#060606);z-index:9999}
                        .intro-title{font-size:40px;letter-spacing:6px;font-weight:800;opacity:0;animation:introIn .9s forwards}
                        @keyframes introIn{0%{transform:translateY(18px) scale(.98);opacity:0}60%{transform:translateY(-6px) scale(1.02);opacity:1}100%{transform:none;opacity:1}}
                        #intro.hidden{opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}

                        /* Header */
                        .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));backdrop-filter:blur(6px);z-index:800}
                        .brand{display:flex;align-items:center;gap:12px}
                        .logo-box{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,#0b0b0b,#121212);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
                        .brand-title{font-weight:800;letter-spacing:1px}
                        .nav{display:flex;gap:12px;align-items:center}
                        .nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:10px;font-weight:600}
                        .nav a:hover{color:var(--text);background:rgba(255,255,255,0.02)}

                        /* HERO GRID */
                        .hero{display:grid;gap:20px;margin-top:20px}
                        @media(min-width:980px){.hero{grid-template-columns:1fr 420px;align-items:start}}
                        .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:16px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow)}

                        /* text */
                        .kicker{color:var(--muted);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px}
                        .title{font-size:34px;margin:8px 0 12px;font-weight:900}
                        .lead{color:var(--muted);font-size:15px}

                        /* Slider */
                        .slider{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#060606,#0b0b0b);height:360px;display:flex;align-items:center;justify-content:center}
                        .slides{position:relative;width:100%;height:100%}
                        .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .9s ease,transform .9s ease}
                        .slide.active{opacity:1;transform:scale(1)}
                        .slide img{max-width:92%;max-height:92%;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,0.65)}
                        .dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
                        .dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,0.06);cursor:pointer}
                        .dot.active{background:var(--accent);transform:scale(1.12)}

                        /* card right */
                        .viewer{width:360px;height:320px;border-radius:12px;background:linear-gradient(180deg,#070707,#0d0d0d);display:flex;align-items:center;justify-content:center;perspective:1200px;overflow:hidden;margin-bottom:12px}
                        .inner{width:86%;height:86%;transition:transform .12s linear;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}
                        .inner img{width:100%;height:100%;object-fit:contain;border-radius:10px}

                        /* price & cta */
                        .price{font-size:32px;font-weight:900}
                        .stock{color:var(--muted);font-weight:700;margin-top:6px}
                        .cta{display:inline-block;background:#111;color:#fff;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);font-weight:900;box-shadow:0 16px 40px rgba(0,0,0,0.6)}
                        .cta:hover{transform:translateY(-3px)}

                        /* badges */
                        .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
                        .badge{background:rgba(255,255,255,0.03);padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:800;display:flex;gap:8px;align-items:center;min-width:160px}

                        /* features grid */
                        .features{margin-top:20px}
                        .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
                        .f-box{background:rgba(255,255,255,0.02);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

                        /* reviews */
                        .reviews-wrap{margin-top:20px;overflow:hidden}
                        .reviews{display:flex;gap:12px;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
                        .review{min-width:100%;background:linear-gradient(180deg,#0d0d0d,#0b0b0b);padding:20px;border-radius:12px;color:var(--muted)}

                        /* popup */
                        .modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:1400}
                        .modal{width:min(860px,94%);background:#fff;color:#000;border-radius:12px;padding:18px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
                        .close{position:absolute;right:12px;top:12px;border:0;background:none;font-size:18px;cursor:pointer}

                        /* whatsapp bubble */
                        .wh{position:fixed;right:18px;bottom:18px;width:72px;height:72px;border-radius:999px;background:var(--wh);display:flex;align-items:center;justify-content:center;z-index:1500;box-shadow:0 20px 60px rgba(0,0,0,0.35);border:6px solid rgba(0,0,0,0.1)}
                        .wh svg{width:36px;height:36px}

                        /* footer */
                        footer{margin-top:30px;color:var(--muted);text-align:center;padding-bottom:40px}

                        /* small responsive */
                        @media(max-width:980px){
                          .feature-list{grid-template-columns:1fr}
                            .viewer{width:92%;height:260px}
                              .slider{height:260px}
                              }
}