/* ================================================================
   Sweet Bonanza — enhancement layer (modal, hero overlay, layout)
   Loaded ALONGSIDE styles-Geiz4m.css; no conflicts with existing classes.
   ================================================================ */

/* Header: push logo a bit to the right (visual breathing) */
.site-NwPQit-header { gap: 18px; }
.site-NwPQit-header-logo { margin-left: 24px; }
@media (max-width: 760px){
  .site-NwPQit-header-logo { margin-left: 8px; }
}

/* Hero preview overlay (dark tint + center buttons over preview image) */
.sb-hero-preview {
  position: relative; display: inline-block; width: 100%;
  max-width: 540px; margin: 0 auto;
}
.sb-hero-preview img { width: 100%; height: auto; display: block; border-radius: 22px; }
.sb-hero-preview::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,5,40,.35) 0%, rgba(15,5,40,.72) 100%);
  z-index: 1; pointer-events: none;
}
.sb-hero-preview__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 18px;
}
.sb-hero-preview__title {
  color: #fff; font-weight: 800; font-size: 18px; text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.6); letter-spacing: .3px;
}
.sb-hero-preview__sub {
  color: rgba(255,255,255,.85); font-size: 13px; text-align: center;
  margin-top: -4px; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.sb-hero-preview__btns {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px;
}
.sb-btn-demo, .sb-btn-real {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 99px; font-weight: 800; font-size: 15px;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
  border: 2px solid transparent; cursor: pointer; font-family: inherit;
}
.sb-btn-demo {
  background: rgba(255,255,255,.96); color: #1a0a3a;
  box-shadow: 0 8px 24px rgba(255,255,255,.20);
}
.sb-btn-demo:hover { transform: translateY(-2px); background: #fff; }
.sb-btn-real {
  background: linear-gradient(135deg, #ff5fc8 0%, #b94aff 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,95,200,.45);
}
.sb-btn-real:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,95,200,.55); }

/* DEMO MODAL — popup with iframe */
.sb-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,4,24,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .25s ease;
}
.sb-modal.is-open { display: flex; opacity: 1; }
.sb-modal__panel {
  position: relative; width: 100%; max-width: 1100px;
  background: #0b0420; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  transform: scale(.96); transition: transform .25s ease;
}
.sb-modal.is-open .sb-modal__panel { transform: scale(1); }
.sb-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: linear-gradient(135deg, #1a0a3a, #2a0a4a);
  border-bottom: 1px solid rgba(255,255,255,.08); color: #fff;
}
.sb-modal__title { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.sb-modal__title::before {
  content: "🍬"; font-size: 22px; line-height: 1;
}
.sb-modal__close {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.sb-modal__close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
.sb-modal__body {
  position: relative; background: #000;
  /* 16:10 ratio is comfortable for slot demos; iframe fills */
  aspect-ratio: 16 / 10;
  width: 100%;
}
.sb-modal__body iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.sb-modal__foot {
  padding: 10px 18px; font-size: 11px; color: rgba(255,255,255,.55);
  background: #0b0420; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.sb-modal__foot a {
  color: #ff8ad0; text-decoration: none; font-weight: 700;
}
.sb-modal__foot a:hover { text-decoration: underline; }
body.sb-modal-open { overflow: hidden; }

/* On very small screens — square aspect to fit screen better */
@media (max-width: 540px){
  .sb-modal { padding: 10px; }
  .sb-modal__body { aspect-ratio: 9 / 14; }
  .sb-modal__title { font-size: 14px; }
}

/* Tile play-demo button (in "Diğer Sweet Bonanza oyunları" grid) */
.sb-tile-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding: 9px 16px; border-radius: 99px;
  background: linear-gradient(135deg, #ff5fc8, #b94aff);
  color: #fff !important; font-weight: 700; font-size: 13px;
  text-decoration: none; border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 18px rgba(255,95,200,.30);
  transition: transform .15s, box-shadow .15s;
}
.sb-tile-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,95,200,.45);
}
.sb-tile-cta--outline {
  background: transparent; color: #ffb8e2 !important;
  border: 1.5px solid rgba(255,95,200,.55);
  box-shadow: none;
}
.sb-tile-cta--outline:hover {
  background: rgba(255,95,200,.12); transform: translateY(-2px);
}
.sb-tile-cta-row {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 14px;
}

/* Header nav link for SB1000 highlight (subtle) */
.sb-nav-link--new {
  position: relative;
}
.sb-nav-link--new::after {
  content: "1000";
  position: absolute; top: -6px; right: -28px;
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(135deg, #ff5fc8, #b94aff);
  color: #fff; padding: 2px 6px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(255,95,200,.40);
}

/* ================================================================
   STICKY SIDEBAR — scroll-spy + progress + jump links
   ================================================================ */
.sb-sidebar{
  position:fixed;right:18px;top:88px;z-index:60;
  width:260px;
  background:rgba(20,5,40,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,95,200,.20);border-radius:18px;
  padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);
  color:#fff;display:none;flex-direction:column;
  max-height:calc(100vh - 110px);overflow:hidden;
}
@media(min-width:1340px){.sb-sidebar{display:flex}}

.sb-sidebar__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sb-sidebar__indicator{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,#ff5fc8,#b94aff);
  box-shadow:0 0 0 4px rgba(255,95,200,.15),0 0 12px rgba(255,95,200,.50);
  animation:sbDot 2s ease-in-out infinite;
}
@keyframes sbDot{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2);box-shadow:0 0 0 7px rgba(255,95,200,.10),0 0 14px rgba(255,95,200,.60)}
}
.sb-sidebar__label{
  font-size:10px;color:#ff8ad0;font-weight:700;
  text-transform:uppercase;letter-spacing:.10em;
}
.sb-sidebar__current{
  font-size:14px;font-weight:800;line-height:1.3;color:#fff;
  padding:12px 14px;margin-bottom:12px;
  background:linear-gradient(135deg,rgba(255,95,200,.18),rgba(185,74,255,.10));
  border-radius:10px;border-left:3px solid #ff5fc8;
  min-height:48px;display:flex;align-items:center;
}
.sb-sidebar__progress{
  height:4px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;
  margin-bottom:10px;
}
.sb-sidebar__progress-fill{
  height:100%;width:0;background:linear-gradient(90deg,#ff5fc8,#b94aff);
  transition:width .25s ease;box-shadow:0 0 8px rgba(255,95,200,.45);
}
.sb-sidebar__pct{font-size:10px;color:rgba(255,255,255,.55);text-align:right;margin-bottom:10px;font-family:monospace}
.sb-sidebar__pct b{color:#ff8ad0;font-weight:700}

.sb-sidebar__list{
  list-style:none;padding:0;margin:0;
  flex:1 1 auto;overflow-y:auto;font-size:12px;
}
.sb-sidebar__list::-webkit-scrollbar{width:4px}
.sb-sidebar__list::-webkit-scrollbar-track{background:transparent}
.sb-sidebar__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:99px}
.sb-sidebar__list li{padding:0;margin:1px 0}
.sb-sidebar__list a{
  display:flex;gap:8px;align-items:center;padding:6px 10px;
  color:rgba(255,255,255,.60);text-decoration:none;
  border-radius:6px;transition:all .15s ease;font-size:12px;font-weight:500;
}
.sb-sidebar__list a::before{
  content:"·";color:rgba(255,255,255,.40);width:8px;flex-shrink:0;text-align:center;
}
.sb-sidebar__list a:hover{color:#ff8ad0;background:rgba(255,95,200,.08)}
.sb-sidebar__list a.is-active{
  color:#fff;font-weight:800;background:rgba(255,95,200,.20);
}
.sb-sidebar__list a.is-active::before{content:"▸";color:#ff5fc8;font-weight:800}
.sb-sidebar__list a.sb-sidebar__hot{
  margin-top:8px;background:linear-gradient(135deg,rgba(255,95,200,.18),rgba(185,74,255,.10));
  color:#ff8ad0;font-weight:700;border:1px solid rgba(255,95,200,.25);
}

.sb-sidebar__ctas{
  display:flex;flex-direction:column;gap:8px;margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
}
.sb-sidebar__btn{
  display:block;text-align:center;padding:10px 14px;font-size:12px;font-weight:800;
  border-radius:99px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;
  transition:transform .15s,box-shadow .15s;
}
.sb-sidebar__btn--demo{
  background:rgba(255,255,255,.95);color:#1a0a3a;
}
.sb-sidebar__btn--demo:hover{transform:translateY(-2px);background:#fff}
.sb-sidebar__btn--real{
  background:linear-gradient(135deg,#ff5fc8,#b94aff);color:#fff;
  box-shadow:0 6px 18px rgba(255,95,200,.30);
}
.sb-sidebar__btn--real:hover{transform:translateY(-2px);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(255,95,200,.45)}

/* Hero rating visual */
.sb-hero-rating{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(6px);
  border:1px solid rgba(255,196,0,.30);border-radius:99px;
  padding:7px 14px;margin-bottom:14px;
}
.sb-rating-stars{color:#FFC400;font-size:16px;letter-spacing:1px;line-height:1}
.sb-rating-text{font-size:13px;color:#fff;display:flex;align-items:center;gap:5px}
.sb-rating-text b{font-weight:800;font-size:14px;color:#FFC400}
.sb-rating-text i{font-style:normal;opacity:.5;margin:0 2px}


/* ================================================================
   HERO RESTRUCTURE — centered stacked layout (Batch 2)
   Order: badge → H1 → preview+overlay → rating → buttons → desc
   ================================================================ */
.site-NwPQit-hero { padding-top: 28px; padding-bottom: 28px; }
@media(min-width:760px){ .site-NwPQit-hero { padding-top: 36px; padding-bottom: 36px; } }
.site-NwPQit-hero-inner {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 18px !important;
  max-width: 980px; margin: 0 auto;
}
.site-NwPQit-hero-content {
  width: 100%; max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.site-NwPQit-hero-badge { margin: 0 auto; }
.site-NwPQit-hero-deco-wrap { justify-content: center; margin: 0 auto; }
.site-NwPQit-hero-deco-wrap h1 { text-align: center; }
.site-NwPQit-hero-deco-money, .site-NwPQit-hero-deco-left, .site-NwPQit-hero-deco-right { display: none; }
.site-NwPQit-hero-btns { justify-content: center; flex-wrap: wrap; }
.site-NwPQit-hero-subtitle {
  max-width: 720px; margin: 6px auto 0; text-align: center;
  font-size: 15px; line-height: 1.55;
}
.site-NwPQit-hero-visual {
  width: 100%; max-width: 720px; margin: 0 auto; order: -1;
}
.sb-hero-preview { max-width: 720px !important; margin: 0 auto !important; }
.sb-hero-preview img { width: 100%; max-width: 720px; }
.sb-hero-preview::before {
  background: linear-gradient(180deg, rgba(15,5,40,.30) 0%, rgba(15,5,40,.78) 100%) !important;
}
.sb-hero-preview__title { font-size: 22px; }
.sb-hero-preview__btns { max-width: 360px; }

/* Hide unused right-column glow (was for split layout) */
.site-NwPQit-hero-phone-glow { display: none; }

/* Reorder hero stacking: H1, preview, rating, buttons, subtitle */
.sb-hero-rating { order: 3; }
.site-NwPQit-hero-btns { order: 4; }
.site-NwPQit-hero-subtitle { order: 5; }
.site-NwPQit-hero-badge { order: 0; }
.site-NwPQit-hero-deco-wrap { order: 1; }
.site-NwPQit-hero-visual { order: 2; }

/* ================================================================
   STICKY BANNER — buttons aligned right on desktop
   ================================================================ */
@media(min-width:760px){
  .site-NwPQit-sticky-inner {
    display: flex; align-items: center;
    gap: 16px;
  }
  .site-NwPQit-sticky-cta-row {
    margin-left: auto !important;
    display: flex; gap: 10px; align-items: center;
  }
}

/* ================================================================
   COMPARISON BLOCK (SB vs SB1000) — uniform logos + baseline align
   ================================================================ */
.sb-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 680px;
  margin: 26px auto;
  align-items: stretch;
}
.sb-compare-grid figure {
  margin: 0; padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sb-compare-grid figure.is-new {
  background: linear-gradient(180deg, rgba(255,95,200,.12), rgba(185,74,255,.04));
  border-color: rgba(255,95,200,.30);
  box-shadow: 0 10px 30px rgba(255,95,200,.15);
}
.sb-compare-grid img {
  width: 100%; max-width: 200px; height: 200px; object-fit: contain;
  border-radius: 14px;
  background: rgba(15,5,40,.30); padding: 12px;
}
.sb-compare-grid figcaption {
  font-weight: 800; color: #fff; font-size: 14px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.sb-compare-grid figcaption small {
  display: block; font-size: 11px; color: #ff8ad0; font-weight: 600;
}


/* ================================================================
   FLAT HERO — physical restructure (Batch 3)
   ================================================================ */
.sb-hero-flat{
  position:relative;padding:18px 18px 24px;overflow:hidden;
  background:#0c0226;
}
@media(min-width:760px){.sb-hero-flat{padding:24px 24px 36px}}
.sb-hero-flat__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 400px at 80% -10%,rgba(255,95,200,.22) 0%,transparent 60%),
    radial-gradient(700px 360px at 10% 110%,rgba(185,74,255,.18) 0%,transparent 60%),
    linear-gradient(180deg,#170638 0%,#0c0226 100%);
}
.sb-hero-flat__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:920px;margin:0 auto;text-align:center;
}
.sb-hero-flat .site-NwPQit-hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;
  background:rgba(255,95,200,.12);border:1px solid rgba(255,95,200,.30);
  color:#ff8ad0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.sb-hero-flat .site-NwPQit-hero-badge::before{content:"●";color:#ff5fc8}
.sb-hero-flat h1{
  font-size:38px;font-weight:900;line-height:1.1;margin:4px 0 2px;
  background:linear-gradient(135deg,#fff 0%,#ff8ad0 60%,#b94aff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 4px 24px rgba(255,95,200,.20);
}
@media(min-width:760px){.sb-hero-flat h1{font-size:54px}}
.sb-hero-flat .sb-hero-preview{
  max-width:780px;width:100%;margin:8px auto 4px;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.sb-hero-flat .sb-hero-preview img{aspect-ratio:16/9;object-fit:cover;border-radius:24px}
.sb-hero-flat .sb-hero-preview__title{font-size:22px}
@media(min-width:760px){.sb-hero-flat .sb-hero-preview__title{font-size:28px}}
.sb-hero-flat .sb-hero-preview__btns{max-width:380px;width:100%}
.sb-hero-flat .sb-hero-rating{margin:0 auto}
.sb-hero-flat .site-NwPQit-hero-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sb-hero-flat .site-NwPQit-hero-subtitle{
  max-width:720px;margin:6px auto 0;color:rgba(255,255,255,.78);
  font-size:14px;line-height:1.6;
}


/* ================================================================
   MOBILE — compact preview overlay buttons
   ================================================================ */
@media (max-width: 640px) {
  .sb-hero-preview__title { font-size: 16px; line-height: 1.25; padding: 0 8px; }
  .sb-hero-preview__sub { font-size: 11px; }
  .sb-hero-preview__btns {
    max-width: 260px; width: 100%; gap: 8px;
  }
  .sb-hero-preview__btns .sb-btn-demo,
  .sb-hero-preview__btns .sb-btn-real {
    padding: 10px 14px; font-size: 13px;
  }
  .sb-hero-preview__overlay { gap: 8px; padding: 12px; }
}
@media (max-width: 380px) {
  .sb-hero-preview__title { font-size: 14px; }
  .sb-hero-preview__btns .sb-btn-demo,
  .sb-hero-preview__btns .sb-btn-real {
    padding: 9px 12px; font-size: 12px;
  }
}