
/* ===== trhelp_landing — sade tema override'ları ===== */
:root{
  --bg:#0a0a0a;
  --bg-soft:#0f0f0f;
  --bg-card:#111111;
  --bg-card-2:#161616;
  --b1:#1f1f1f;
  --b2:#2a2a2a;
  --b3:#3a3a3a;
  --tx:#fafafa;
  --mt:#a1a1aa;
  --mt2:#71717a;
  --ac:#635bff;
  --ac-hover:#7a73ff;
  --ac-soft:rgba(99,91,255,.10);
  --ac-border:rgba(99,91,255,.25);
  --green:#22c55e;
  --green-soft:rgba(34,197,94,.10);
  --green-border:rgba(34,197,94,.25);
  --red:#ef4444;
  --yellow:#f59e0b;
  --font:'Inter',sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.5);
}

/* ===== ANIMATIONS — sadece 2 ===== */
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.5}}

/* ===== NAV ===== */
.nav{background:rgba(10,10,10,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);height:64px;padding:0 48px;transition:background .15s cubic-bezier(.4,0,.2,1)}
.nav-logo{font-size:18px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none}
.nav-logo-dot{width:8px;height:8px;border-radius:2px;background:var(--ac);animation:pulseDot 2s ease-in-out infinite}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{color:var(--mt);font-size:14px;font-weight:500;padding:8px 14px;border-radius:8px;cursor:pointer;text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1)}
.nav-link:hover{color:var(--tx);background:var(--bg-card)}
.nav-cta{background:var(--ac);color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer;border:none;font-family:var(--font);margin-left:8px;transition:background .15s cubic-bezier(.4,0,.2,1)}
.nav-cta:hover{background:var(--ac-hover)}

/* ===== HERO ===== */
.hero-wrap{position:relative;z-index:1;padding:140px 48px 80px;max-width:1200px;margin:0 auto}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:64px;position:relative}

.hero-left{position:relative;z-index:1;animation:fadeup .6s .1s ease both}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);border:1px solid var(--green-border);border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--green);margin-bottom:24px;animation:fadeup .4s .1s ease both}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseDot 1.5s ease-in-out infinite}
.hero-title{font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-2px;line-height:1.05;margin-bottom:20px;color:var(--tx);animation:fadeup .4s .2s ease both}
.hero-title .grad{color:var(--ac);background:none;-webkit-background-clip:initial;background-clip:initial}
.hero-sub{font-size:17px;color:var(--mt);line-height:1.7;max-width:520px;margin-bottom:32px;animation:fadeup .4s .3s ease both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;animation:fadeup .4s .4s ease both}
.btn-primary{background:var(--ac);color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:8px;cursor:pointer;border:none;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;transition:background .15s cubic-bezier(.4,0,.2,1)}
.btn-primary:hover{background:var(--ac-hover)}
.btn-sec{background:transparent;color:var(--tx);font-size:14px;font-weight:600;padding:13px 24px;border-radius:8px;cursor:pointer;border:1px solid var(--b1);font-family:var(--font);transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.btn-sec:hover{border-color:var(--b2);background:var(--bg-card)}
.hero-social-proof{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--b1);animation:fadeup .4s .5s ease both}
.avatars{display:flex}
.avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-left:-8px;background:var(--bg-card-2);color:var(--mt);transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.avatar:first-child{margin-left:0}
.proof-text{font-size:13px;color:var(--mt);line-height:1.5}
.proof-stars{color:#f59e0b;font-size:13px;letter-spacing:1px;margin-bottom:2px}
.proof-text strong{color:var(--tx);font-weight:700}

/* RIGHT — cards */
.hero-right{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;animation:fadeup .6s .2s ease both}
.float-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fcard{background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;padding:20px;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.fcard:hover{border-color:var(--b2)}
.fcard-label{font-size:11px;font-weight:600;color:var(--mt2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.fcard-value{font-size:22px;font-weight:800;color:var(--tx);letter-spacing:-.5px;line-height:1.1}
.fcard-sub{font-size:12px;color:var(--mt2);margin-top:4px}
.fcard-bar{height:6px;background:var(--bg-soft);border-radius:3px;margin-top:12px;overflow:hidden}
.fcard-bar-fill{height:100%;background:var(--ac);border-radius:3px;width:88%}
.fcard-score{font-size:32px;font-weight:800;color:var(--tx);letter-spacing:-1px;line-height:1}
.fcard-green{background:var(--green-soft);border-color:var(--green-border)}
.fcard-green .fcard-label,.fcard-green .fcard-sub{color:var(--green)}
.fcard-green .fcard-value{color:var(--green)}
.fcard-wide{padding:18px;display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.fcard-wide:hover{border-color:var(--b2)}
.fcard-wide-ico{width:44px;height:44px;border-radius:10px;background:var(--ac-soft);border:1px solid var(--ac-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.fcard-wide:hover .fcard-wide-ico{background:var(--ac-soft);border-color:var(--ac)}
.fcard-wide-title{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:2px}
.fcard-wide-sub{font-size:12px;color:var(--mt2);line-height:1.5}
.fcard-wide-badge{margin-left:auto;background:var(--ac);color:#fff;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;flex-shrink:0}

/* ===== TICKER ===== */
.ticker-section{border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);background:var(--bg-soft);overflow:hidden;height:42px;display:flex;align-items:center;position:relative;z-index:2}
.ticker-inner{white-space:nowrap;animation:tick 30s linear infinite;font-size:12px;font-weight:600;letter-spacing:1.5px;color:var(--mt)}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tsep{display:inline-block;margin:0 18px;color:var(--ac);opacity:.5}

/* ===== SECTIONS COMMON ===== */
.section{padding:96px 48px;max-width:1200px;margin:0 auto;position:relative;z-index:1}
.section-bg{background:var(--bg-soft);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)}
.section-inner{max-width:1200px;margin:0 auto;padding:96px 48px;position:relative;z-index:1}
.eyebrow{font-size:12px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;display:inline-block}
.s-title{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.15;margin-bottom:14px;color:var(--tx)}
.s-title .grad{color:var(--ac)}
.s-sub{font-size:16px;color:var(--mt);line-height:1.7;max-width:560px}
.center{text-align:center;margin:0 auto}
.center .s-sub{margin:0 auto}

/* ===== HOW IT WORKS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.step{background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;padding:32px 24px;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.step:hover{border-color:var(--b2)}
.step-num{font-size:12px;font-weight:700;color:var(--ac);letter-spacing:1px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.step-num::after{content:'';flex:1;height:1px;background:var(--b1)}
.step-ico{width:48px;height:48px;background:var(--ac-soft);border:1px solid var(--ac-border);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.step:hover .step-ico{background:var(--ac-soft);border-color:var(--ac)}
.step-ico svg{width:22px;height:22px;stroke:var(--ac);fill:none;stroke-width:1.8}
.step-title{font-size:17px;font-weight:700;color:var(--tx);margin-bottom:8px;letter-spacing:-.3px}
.step-desc{font-size:14px;color:var(--mt);line-height:1.65}

/* ===== GAMES ===== */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:48px}
.g-chip{background:var(--bg-card);border:1px solid var(--b1);border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:10px;transition:border-color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1)}
.g-chip:hover{border-color:var(--b2);background:var(--bg-card-2)}
.g-chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.g-chip-name{font-size:13px;font-weight:500;color:var(--tx);transition:color .15s cubic-bezier(.4,0,.2,1)}
.g-chip:hover .g-chip-name{color:var(--mt)}
.games-more{text-align:center;margin-top:24px;font-size:14px;color:var(--mt)}
.games-more span{color:var(--ac);font-weight:700}

/* ===== ONLINE ACCESS ===== */
.online-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.online-card{background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;padding:28px;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.online-card:hover{border-color:var(--b2)}
.oc-ico{font-size:28px;margin-bottom:14px;display:inline-block}
.oc-title{font-size:17px;font-weight:700;color:var(--tx);margin-bottom:8px;letter-spacing:-.3px}
.oc-desc{font-size:14px;color:var(--mt);line-height:1.7}
.oc-tag{display:inline-block;margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 10px;border-radius:6px;background:var(--ac-soft);color:var(--ac);border:1px solid var(--ac-border)}

/* ===== REVIEWS ===== */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.review-card{background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;padding:24px;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.review-card:hover{border-color:var(--b2)}
.review-stars{color:#f59e0b;font-size:14px;letter-spacing:1.5px;margin-bottom:12px}
.review-text{font-size:14px;color:var(--mt);line-height:1.7;margin-bottom:16px}
.review-author{display:flex;align-items:center;gap:10px}
.review-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--ac-soft);color:var(--ac);flex-shrink:0}
.review-name{font-size:13px;font-weight:600;color:var(--tx)}
.review-meta{font-size:11px;color:var(--mt2);margin-top:2px}
.reviews-summary{display:flex;align-items:center;justify-content:space-around;margin-top:48px;padding:28px;background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;flex-wrap:wrap;gap:24px}
.rs-item{text-align:center}
.rs-num{font-size:30px;font-weight:800;color:var(--tx);letter-spacing:-1px}
.rs-lbl{font-size:11px;color:var(--mt2);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-weight:600}
.rs-div{width:1px;height:40px;background:var(--b1)}

/* ===== FEATURES ===== */
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.feat{background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;padding:28px;transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.feat:hover{border-color:var(--b2)}
.feat-ico{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--ac-soft);border:1px solid var(--ac-border);transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.feat:hover .feat-ico{background:var(--ac-soft);border-color:var(--ac)}
.feat-ico svg{width:22px;height:22px;fill:none;stroke-width:1.8;stroke:var(--ac)}
.feat-title{font-size:17px;font-weight:700;color:var(--tx);margin-bottom:8px;letter-spacing:-.3px}
.feat-desc{font-size:14px;color:var(--mt);line-height:1.7}
.feat-tag{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 10px;border-radius:6px;background:var(--ac-soft);color:var(--ac);border:1px solid var(--ac-border)}

/* ===== FAQ ===== */
.faq-list{margin-top:48px;background:var(--bg-card);border:1px solid var(--b1);border-radius:12px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--b1)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;color:var(--tx);font-size:15px;font-weight:600;padding:20px 24px;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font);transition:background .15s cubic-bezier(.4,0,.2,1)}
.faq-q:hover{background:var(--bg-soft)}
.faq-icon{width:24px;height:24px;border-radius:6px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);color:var(--mt)}
.faq-item.open .faq-icon{background:var(--ac);color:#fff;transform:rotate(45deg)}
.faq-icon svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5}
.faq-a{font-size:14px;color:var(--mt);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 24px}
.faq-item.open .faq-a{max-height:300px;padding:0 24px 20px}

/* ===== CTA ===== */
.cta-section{padding:96px 48px;text-align:center;position:relative;z-index:1}
.cta-card{max-width:880px;margin:0 auto;background:var(--bg-card);border:1px solid var(--b1);border-radius:16px;padding:64px 48px;position:relative;overflow:hidden}
.cta-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--ac)}
.cta-title{font-size:clamp(32px,4.5vw,48px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:16px;color:var(--tx)}
.cta-title .grad{color:var(--ac)}
.cta-sub{font-size:16px;color:var(--mt);margin-bottom:32px;line-height:1.7;max-width:520px;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--b1);padding:32px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--bg-card);position:relative;z-index:2}
.footer-logo{font-size:14px;font-weight:700;color:var(--tx)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-link{font-size:13px;color:var(--mt);cursor:pointer;text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1)}
.footer-link:hover{color:var(--ac)}
.footer-copy{font-size:12px;color:var(--mt2)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .nav{padding:0 20px}
  .hero-wrap{padding:110px 24px 60px}
  .hero{grid-template-columns:1fr;gap:48px}
  .section,.section-inner,.cta-section{padding:64px 24px}
  .steps,.reviews-grid,.features-grid,.online-grid{grid-template-columns:1fr}
  .float-row{grid-template-columns:1fr}
  .footer{padding:24px 20px;flex-direction:column;text-align:center}
  .nav-links{display:none}
  .cta-card{padding:40px 24px}
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--b3)}
* {scrollbar-color: var(--b2) var(--bg); scrollbar-width: thin}
::selection{background:var(--ac);color:#fff}
