:root{
  --bg:#05070c;--bg2:#0a0e18;--panel:#111726;--panel2:#161d30;--line:#1f2740;
  --tx:#e9ecf5;--mut:#8b96b0;--mut2:#aab4cc;--blue:#4f8cff;--blue2:#6aa4ff;--yel:#ffc935;--yel2:#ffe566;
  --org:#f0a35a;--grn:#5fe08a;--vio:#7c6cff;--r:18px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:var(--blue2);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---- ust bar (TV ust bilgi cubugu gibi) ---- */
.top{position:sticky;top:0;z-index:50;background:rgba(5,7,12,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:72px}
.top .logo img{height:40px;width:auto}
.top nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.top nav a{color:var(--mut2);font-weight:650;font-size:15px;padding:9px 16px;border-radius:999px;border:1px solid transparent}
.top nav a:hover{text-decoration:none;color:#fff;background:var(--panel)}
.top nav a.on{background:var(--blue);color:#fff;box-shadow:0 0 0 3px rgba(79,140,255,.25)}
.top .cta{background:linear-gradient(135deg,var(--yel),var(--org));color:#1a1300!important;font-weight:800}
@media(max-width:860px){.top nav a:not(.cta){display:none}}

/* ---- dugmeler ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:14px;font-weight:800;font-size:16px;
  border:2px solid transparent;transition:.18s;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn.y{background:linear-gradient(135deg,var(--yel),var(--org));color:#1a1300;box-shadow:0 10px 30px -10px rgba(255,201,53,.6)}
.btn.g{background:var(--panel);color:#fff;border-color:var(--line)}
.btn.g:hover{border-color:var(--blue);box-shadow:0 0 0 4px rgba(79,140,255,.18)}

/* ---- hero ---- */
.hero{position:relative;padding:70px 0 40px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-30% -10% auto;height:120%;
  background:radial-gradient(600px 380px at 78% 30%,rgba(79,140,255,.20),transparent 70%),
             radial-gradient(520px 340px at 12% 70%,rgba(255,201,53,.10),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr}}
.kick{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);color:var(--mut2);
  padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:700}
.kick b{color:var(--yel)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 0 rgba(95,224,138,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(95,224,138,0)}100%{box-shadow:0 0 0 0 rgba(95,224,138,0)}}
h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04;margin:18px 0 18px;letter-spacing:-1.5px;font-weight:900}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--yel),var(--org));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:var(--mut2);max-width:560px}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 22px}
.stats{display:flex;gap:28px;flex-wrap:wrap;color:var(--mut);font-size:14px}
.stats b{display:block;color:#fff;font-size:24px;font-weight:900}

/* ---- TV maketi ---- */
.tv{position:relative;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.tv .bez{background:linear-gradient(180deg,#1b1f2b,#0b0d13);border-radius:22px;padding:12px;border:1px solid #2a3044}
.tv .scr{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;display:flex}
.tv .stand{width:34%;height:16px;margin:0 auto;background:linear-gradient(180deg,#151924,#07080c);border-radius:0 0 14px 14px}
.tv .foot{width:48%;height:8px;margin:0 auto;background:#0d1018;border-radius:8px}
.tv .glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%);pointer-events:none}

.cc{width:41%;background:rgba(6,8,13,.96);border-left:4px solid var(--yel);display:flex;flex-direction:column;font-size:clamp(8px,1.05vw,13px)}
.cc .hd{display:flex;align-items:baseline;gap:8px;padding:.9em 1em .7em;border-bottom:1px solid #1d2233;white-space:nowrap;overflow:hidden}
.cc .hd b{color:var(--yel);font-size:1.35em;letter-spacing:.5px}
.cc .hd span{color:var(--mut);font-size:.85em}
.cc .ls{flex:1;overflow:hidden;padding:.6em .8em;display:flex;flex-direction:column;justify-content:flex-end;gap:.45em}
.cc .lb{font-size:.8em;font-weight:800;color:var(--mut);margin-top:.3em}
.cc .lb.now{color:var(--grn)}
.cc .bb{background:#33363f;color:#f2f4f8;font-weight:750;padding:.5em .7em;border-radius:.45em;line-height:1.3;animation:inb .5s ease}
.cc .bb.n{background:#1d355a}
@keyframes inb{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cc .bb .cur{display:inline-block;width:.45em;height:1em;background:var(--yel);vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.vid{flex:1;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#ffb36b 0%,#f3816b 30%,#7b4f8f 55%,#1f2d55 75%,#0f1830 100%)}
.vid .sun{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;left:56%;top:30%;
  background:radial-gradient(circle,#fff6c8,#ffd36b 55%,rgba(255,180,80,0) 72%);animation:sun 14s ease-in-out infinite alternate}
@keyframes sun{to{transform:translateY(14%)}}
.vid .h1,.vid .h2,.vid .h3{position:absolute;left:-10%;right:-10%;border-radius:50% 50% 0 0}
.vid .h1{bottom:22%;height:30%;background:#3a2f5a;transform:skewY(-4deg)}
.vid .h2{bottom:8%;height:30%;background:#24264a;transform:skewY(5deg)}
.vid .h3{bottom:-8%;height:26%;background:#11152c}
.vid .water{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(120,170,255,.35),rgba(20,30,60,.9))}
.vid .bird{position:absolute;color:#2a1d3a;font-size:clamp(10px,1.4vw,18px);animation:fly 16s linear infinite}
@keyframes fly{from{transform:translateX(-30px)}to{transform:translateX(560px)}}
.vid .osd{position:absolute;left:4%;top:5%;display:flex;gap:6px;align-items:center;font-size:clamp(8px,1vw,12px);font-weight:800}
.vid .osd .live{background:#e5383b;color:#fff;padding:.25em .6em;border-radius:.35em}
.vid .osd .ch{background:rgba(0,0,0,.45);color:#fff;padding:.25em .6em;border-radius:.35em}
.vid .ccb{position:absolute;right:4%;top:5%;background:rgba(0,0,0,.55);border:2px solid var(--yel);color:var(--yel);
  font-weight:900;font-size:clamp(8px,.95vw,12px);padding:.25em .7em;border-radius:.5em}

/* ---- bolumler ---- */
section{padding:84px 0}
.sh{text-align:center;max-width:720px;margin:0 auto 46px}
.sh .tag{color:var(--blue2);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;margin:10px 0 12px;letter-spacing:-.8px}
.sh p{color:var(--mut2);font-size:17.5px;margin:0}

/* TV kutucuklari (kumandayla secilen kartlar gibi) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tiles{grid-template-columns:1fr}}
.tile{background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--line);border-radius:var(--r);padding:26px;
  transition:.2s;position:relative;overflow:hidden}
.tile:hover,.tile:focus-within{border-color:var(--blue);box-shadow:0 0 0 5px rgba(79,140,255,.18),0 24px 50px -24px rgba(79,140,255,.55);transform:translateY(-4px) scale(1.01)}
.tile .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:26px;margin-bottom:16px;
  background:rgba(79,140,255,.14);border:1px solid rgba(79,140,255,.3)}
.tile.y .ic{background:rgba(255,201,53,.13);border-color:rgba(255,201,53,.35)}
.tile.g .ic{background:rgba(95,224,138,.12);border-color:rgba(95,224,138,.3)}
.tile.v .ic{background:rgba(124,108,255,.15);border-color:rgba(124,108,255,.35)}
.tile h3{margin:0 0 8px;font-size:20px}
.tile p{margin:0;color:var(--mut2);font-size:15.5px}
.tile .kb{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:800;color:var(--yel);background:rgba(255,201,53,.1);
  border:1px solid rgba(255,201,53,.3);padding:4px 10px;border-radius:8px}

/* buyuk tanitim satiri */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:22px 0 0}
.checks li{position:relative;padding:0 0 14px 38px;color:var(--mut2);font-size:16.5px}
.checks li:before{content:"✓";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(95,224,138,.14);color:var(--grn);font-weight:900;font-size:14px}
.checks b{color:#fff}

/* kumanda */
.remote{justify-self:center;width:210px;background:linear-gradient(180deg,#1d2130,#0d0f16);border:1px solid #2a3044;border-radius:46px 46px 38px 38px;
  padding:30px 26px 40px;box-shadow:0 40px 70px -30px #000;display:flex;flex-direction:column;align-items:center;gap:20px}
.remote .pw{width:30px;height:30px;border-radius:50%;background:#c0392b;align-self:flex-end}
.pad{position:relative;width:150px;height:150px;border-radius:50%;background:#151925;border:1px solid #2a3044}
.pad span{position:absolute;color:var(--mut);font-size:18px}
.pad .u{top:12px;left:50%;transform:translateX(-50%);color:var(--yel);text-shadow:0 0 12px var(--yel);animation:tap 2.4s infinite}
.pad .d{bottom:12px;left:50%;transform:translateX(-50%)}
.pad .l{left:16px;top:50%;transform:translateY(-50%)}.pad .r{right:16px;top:50%;transform:translateY(-50%)}
.pad .ok{position:absolute;inset:44px;border-radius:50%;background:#232838;display:grid;place-items:center;font-weight:900;color:#fff;
  font-size:15px;animation:okp 2.4s infinite}
@keyframes tap{0%,30%{opacity:1}45%,100%{opacity:.45}}
@keyframes okp{0%,45%{box-shadow:none}55%,75%{box-shadow:0 0 0 5px rgba(79,140,255,.55);background:var(--blue)}100%{box-shadow:none}}
.remote .row{display:flex;gap:12px}.remote .row i{width:40px;height:26px;border-radius:9px;background:#191d29;border:1px solid #2a3044}
.remote .brand{color:#5b6580;font-weight:900;letter-spacing:3px;font-size:12px}

/* adimlar */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:12px;
  background:var(--blue);color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg)}
.step h3{margin:10px 0 8px}.step p{color:var(--mut2);margin:0}
.qr{width:92px;height:92px;border-radius:10px;margin-top:16px;background:#fff;padding:8px;
  background-image:conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0);background-size:16px 16px;border:8px solid #fff}

/* fiyat */
.price{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;border-radius:26px;overflow:hidden;border:2px solid var(--line);
  background:linear-gradient(135deg,#121a30,#0b0f1b)}
@media(max-width:820px){.price{grid-template-columns:1fr}}
.price .l{padding:40px}
.price .r{padding:40px;background:rgba(79,140,255,.07);border-left:1px solid var(--line)}
.amt{font-size:68px;font-weight:900;letter-spacing:-2px;line-height:1}
.amt small{font-size:20px;color:var(--mut);font-weight:700;letter-spacing:0}
.badge{display:inline-block;background:rgba(95,224,138,.12);color:var(--grn);border:1px solid rgba(95,224,138,.3);font-weight:800;
  font-size:13.5px;padding:6px 12px;border-radius:999px;margin-top:14px}
.pays{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.pays span{background:#fff;color:#1a2140;font-weight:900;font-size:12.5px;padding:7px 12px;border-radius:8px;letter-spacing:.5px}
.pays span.p{background:#1d4ed8;color:#fff}

/* sss */
.faq{max-width:860px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0 22px}
.faq details[open]{border-color:var(--blue)}
.faq summary{cursor:pointer;padding:19px 0;font-weight:750;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary:after{content:"+";color:var(--blue2);font-size:22px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--mut2);margin:0 0 20px}

/* not kutusu */
.note{max-width:920px;margin:26px auto 0;background:rgba(255,201,53,.07);border:1px solid rgba(255,201,53,.25);color:#e8dcb5;
  border-radius:14px;padding:16px 20px;font-size:14.5px}

/* alt bilgi */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:56px 0 30px;margin-top:40px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:820px){.fg{grid-template-columns:1fr}}
footer h4{margin:0 0 14px;font-size:15px;color:#fff}
footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:9px}
footer a{color:var(--mut2)}footer p{color:var(--mut);font-size:14px;margin:0 0 8px}
.copy{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;color:var(--mut);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* belge sayfalari */
.doc{max-width:860px;margin:0 auto;padding:56px 24px 30px}
.doc h1{font-size:clamp(30px,4vw,42px);margin:6px 0 8px}
.doc .upd{color:var(--mut);font-size:14px;margin-bottom:30px}
.doc h2{font-size:21px;margin:34px 0 10px;letter-spacing:0}
.doc p,.doc li{color:#c5cde0;font-size:16px}
.doc .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:16px 0}
.doc .box p{margin:4px 0}
.doc table{width:100%;border-collapse:collapse;margin:12px 0}
.doc td{border-bottom:1px solid var(--line);padding:10px 6px;color:#c5cde0;vertical-align:top}
.doc td:first-child{color:var(--mut);width:38%}

.doc .card h1{font-size:21px;margin:34px 0 10px;letter-spacing:0}
.doc .card h1:first-child{font-size:clamp(30px,4vw,42px);margin:6px 0 8px;letter-spacing:-.8px}
.doc .muted{color:var(--mut)}

/* gorunur olunca kayarak gelme */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}