/* Betplay - Betplay Giriş | bet-play.org */
:root{
  --navy-900:#06122e;
  --navy-800:#0a1a3a;
  --navy-700:#0d2150;
  --navy-600:#142a66;
  --gold-500:#f5b800;
  --gold-400:#ffd24d;
  --gold-300:#ffe27a;
  --white:#ffffff;
  --muted:#c4cbe0;
  --line:rgba(255,255,255,.08);
  --success:#22c55e;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1140px;
  --font-head:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --font-body:'Manrope','Segoe UI',Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--navy-900);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-400);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-300);text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:42px;width:auto}
.brand-text{font-family:var(--font-head);letter-spacing:1.5px;font-size:22px;color:var(--white)}
.brand-text span{color:var(--gold-500)}
.menu{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a{
  color:var(--white);padding:8px 14px;border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:.3px;
}
.menu a:hover{background:var(--navy-700);text-decoration:none;color:var(--gold-400)}
.menu a.active{background:var(--navy-700);color:var(--gold-400)}
.cta-btn{
  background:linear-gradient(180deg,var(--gold-400) 0%,var(--gold-500) 100%);
  color:#1a1200 !important;
  font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  padding:11px 20px;border-radius:999px;
  box-shadow:0 6px 18px rgba(245,184,0,.35),inset 0 -2px 0 rgba(0,0,0,.15);
  font-size:14px;
  border:1px solid rgba(0,0,0,.1);
}
.cta-btn:hover{filter:brightness(1.05);text-decoration:none;transform:translateY(-1px)}

/* Hero */
.hero{
  background:
    radial-gradient(900px 400px at 80% -100px,rgba(245,184,0,.18),transparent 60%),
    radial-gradient(700px 350px at 10% 0,rgba(20,42,102,.7),transparent 60%),
    var(--navy-900);
  padding:60px 0 30px;
}
.hero h1{
  font-family:var(--font-head);
  font-size:clamp(36px,5vw,64px);
  line-height:1.05;
  margin:0 0 14px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.hero h1 .accent{color:var(--gold-500)}
.hero .lead{
  font-size:18px;color:var(--muted);max-width:780px;margin-bottom:24px;
}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{
  display:inline-block;
  background:linear-gradient(180deg,var(--gold-400) 0%,var(--gold-500) 100%);
  color:#1a1200;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  padding:16px 28px;border-radius:12px;font-size:16px;
  box-shadow:0 10px 25px rgba(245,184,0,.35),inset 0 -3px 0 rgba(0,0,0,.18);
}
.btn-primary:hover{filter:brightness(1.05);text-decoration:none;transform:translateY(-2px)}
.btn-secondary{
  display:inline-block;border:2px solid var(--gold-500);color:var(--gold-400);
  padding:14px 26px;border-radius:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
}
.btn-secondary:hover{background:rgba(245,184,0,.08);text-decoration:none}

/* Hero gallery (3 images) */
.hero-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;
}
.hero-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--navy-700);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-gallery img{aspect-ratio:1/1;object-fit:cover;width:100%}
.hero-gallery figcaption{padding:10px 14px;font-size:13px;color:var(--muted);background:var(--navy-800);border-top:1px solid var(--line)}
@media (max-width:768px){.hero-gallery{grid-template-columns:1fr}}

/* Sections */
section.block{padding:48px 0;border-bottom:1px solid var(--line)}
section.block h2{
  font-family:var(--font-head);
  font-size:clamp(26px,3vw,38px);
  text-transform:uppercase;letter-spacing:1px;
  margin:0 0 14px;color:var(--white);
}
section.block h2::before{
  content:"";display:inline-block;width:10px;height:24px;background:var(--gold-500);
  vertical-align:-4px;margin-right:12px;border-radius:2px;
}
section.block h3{
  font-family:var(--font-head);letter-spacing:.5px;color:var(--gold-400);
  font-size:22px;margin:24px 0 8px;
}
section.block p{color:#dde2f1;margin:10px 0}
.highlight{background:rgba(245,184,0,.12);padding:2px 6px;border-radius:6px;color:var(--gold-300)}

/* Table */
.table-wrap{overflow-x:auto;margin:18px 0;border-radius:var(--radius);border:1px solid var(--line)}
table.review{
  width:100%;border-collapse:collapse;min-width:520px;background:var(--navy-800);
  font-size:15px;
}
table.review th,table.review td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.review th{background:var(--navy-700);color:var(--gold-400);text-transform:uppercase;letter-spacing:.6px;font-size:13px}
table.review tr:last-child td{border-bottom:none}
table.review td:first-child{font-weight:700;color:var(--white)}

/* Feature list */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}
.features li{
  list-style:none;background:var(--navy-800);border:1px solid var(--line);
  padding:14px 16px;border-radius:12px;display:flex;gap:10px;align-items:flex-start;
}
.features li::before{
  content:"";display:inline-block;width:18px;height:18px;border-radius:50%;
  background:var(--success);flex-shrink:0;margin-top:3px;
  box-shadow:inset 0 0 0 4px var(--navy-800),0 0 0 1px var(--success);
}
.features ul{padding:0;margin:0}
@media (max-width:640px){.features{grid-template-columns:1fr}}

/* FAQ */
.faq details{
  background:var(--navy-800);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin:10px 0;
}
.faq details[open]{border-color:rgba(245,184,0,.4)}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--white);font-size:17px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq summary::after{content:"+";color:var(--gold-500);font-size:24px;font-weight:700;margin-left:12px}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:#dde2f1;margin:10px 0 0}

/* Blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px}
.blog-card{
  background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s;
}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(245,184,0,.35)}
.blog-card .thumb{aspect-ratio:16/9;background:var(--navy-700);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover}
.blog-card .body{padding:18px}
.blog-card h3{margin:0 0 8px;font-family:var(--font-head);letter-spacing:.5px;font-size:22px;color:var(--white)}
.blog-card h3 a{color:var(--white)}
.blog-card h3 a:hover{color:var(--gold-400);text-decoration:none}
.blog-card p{color:var(--muted);font-size:14px;margin:0 0 12px}
.blog-card .meta{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
@media (max-width:768px){.blog-grid{grid-template-columns:1fr}}

/* Article (blog post) */
.article{padding:48px 0}
.article h1{font-family:var(--font-head);font-size:clamp(30px,4vw,48px);text-transform:uppercase;letter-spacing:1px;margin:0 0 12px}
.article .meta{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:18px}
.article .post-image{margin:22px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--navy-800)}
.article .post-image .placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;text-align:center;padding:20px}
.article .post-image img{width:100%;display:block}
.article h2{font-family:var(--font-head);letter-spacing:1px;font-size:28px;text-transform:uppercase;margin:30px 0 10px;color:var(--gold-400)}
.article h3{font-family:var(--font-head);letter-spacing:.5px;font-size:22px;color:var(--white);margin:22px 0 8px}
.article p{color:#dde2f1}
.article ul{padding-left:22px}
.article ul li{margin:8px 0;color:#dde2f1}

/* Inline link emphasis */
.inline-link{
  color:var(--gold-400);font-weight:700;border-bottom:1px dashed rgba(245,184,0,.6);
}
.inline-link:hover{text-decoration:none;color:var(--gold-300)}

/* Callout / CTA box */
.cta-box{
  background:linear-gradient(135deg,var(--navy-700),var(--navy-800));
  border:1px solid rgba(245,184,0,.35);border-radius:var(--radius);
  padding:26px;margin:28px 0;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.cta-box h3{margin:0 0 8px;font-family:var(--font-head);letter-spacing:1px;font-size:26px;color:var(--white)}
.cta-box p{margin:0 0 16px;color:var(--muted)}

/* Footer */
.site-footer{
  background:var(--navy-900);border-top:1px solid var(--line);
  padding:40px 0 20px;margin-top:30px;
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.foot-grid h4{font-family:var(--font-head);letter-spacing:1px;color:var(--gold-400);margin:0 0 10px;font-size:18px;text-transform:uppercase}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid ul li{margin:6px 0}
.foot-grid ul a{color:#cfd5ea}
.foot-grid p{color:#9fa7c2;font-size:14px;margin:8px 0}
.social{display:flex;gap:10px;margin-top:10px}
.social a{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy-700);border:1px solid var(--line);color:var(--gold-400);font-weight:700;
}
.social a:hover{background:var(--gold-500);color:var(--navy-900);text-decoration:none}
.copy{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  color:#7c84a3;font-size:13px;text-align:center;
}
@media (max-width:768px){.foot-grid{grid-template-columns:1fr}}

/* Breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--gold-400)}