/* ============================================================
   AASP Oyun Rehberi · Sweet Bonanza tek sayfa tema
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  font-size:16px;line-height:1.65;color:#1d1530;
  background:radial-gradient(1200px 600px at 100% -10%,#ffe1f0 0%,transparent 60%),
             radial-gradient(900px 500px at -10% 10%,#e7f0ff 0%,transparent 55%),
             #fbfaff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:#c2185b;text-decoration:none;transition:color .2s}
a:hover{color:#7a0d3a}

.wrap{width:min(1140px,92%);margin-inline:auto}

.skip-link{
  position:absolute;left:-999px;top:0;background:#1d1530;color:#fff;
  padding:.6rem 1rem;border-radius:0 0 .5rem 0;z-index:99
}
.skip-link:focus{left:0}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(29,21,48,.08);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:#1d1530}
.brand-dot{
  width:14px;height:14px;border-radius:50%;
  background:conic-gradient(from 210deg,#ff2e88,#ffb648,#7a3cff,#ff2e88);
  box-shadow:0 0 0 3px rgba(255,46,136,.18);
}
.brand-text em{font-style:normal;color:#7a3cff;font-weight:800}
.topnav{display:flex;gap:1.2rem}
.topnav a{font-weight:600;color:#3a2b59;font-size:.95rem}
.topnav a:hover{color:#c2185b}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:1rem 0 0}
.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;
  font-size:.88rem;color:#6b5e85;
}
.breadcrumb li+li::before{content:"›";margin-right:.5rem;color:#bda6d9}
.breadcrumb a{color:#6b5e85}
.breadcrumb a:hover{color:#c2185b}
.breadcrumb [aria-current]{color:#1d1530;font-weight:600}

/* ---------- Hero ---------- */
.hero{padding:2.5rem 0 1.5rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.hero-copy{min-width:0}
.badge{
  display:inline-block;font-size:.75rem;letter-spacing:.14em;
  padding:.4rem .8rem;border-radius:999px;font-weight:700;
  background:linear-gradient(135deg,#fff0f6,#f1ebff);
  color:#7a0d3a;border:1px solid rgba(122,60,255,.18)
}
h1{
  font-size:clamp(1.9rem,4.2vw,2.85rem);
  line-height:1.15;margin:1rem 0 .8rem;letter-spacing:-.01em;
  background:linear-gradient(120deg,#1d1530 30%,#7a3cff 70%,#ff2e88 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{font-size:1.08rem;color:#3a2b59;margin:0 0 1.4rem}
.cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,#ff2e88 0%,#7a3cff 100%);
  color:#fff;font-weight:800;padding:1rem 1.6rem;border-radius:14px;
  font-size:1.05rem;letter-spacing:.01em;
  box-shadow:0 18px 38px -14px rgba(255,46,136,.55),inset 0 -2px 0 rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .25s ease;
}
.cta:hover{transform:translateY(-2px);color:#fff;box-shadow:0 22px 44px -14px rgba(255,46,136,.7)}
.cta-secondary{
  margin:1.4rem 0 0;
  background:linear-gradient(135deg,#ffb648 0%,#ff2e88 100%);
  box-shadow:0 16px 34px -14px rgba(255,140,40,.55);
}
.hero-meta{
  list-style:none;padding:0;margin:1.6rem 0 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:.7rem
}
.hero-meta li{
  background:#fff;border:1px solid rgba(29,21,48,.08);
  border-radius:12px;padding:.7rem .8rem;text-align:center;
  box-shadow:0 4px 16px -10px rgba(122,60,255,.25)
}
.hero-meta span{display:block;font-size:.75rem;color:#6b5e85;letter-spacing:.06em}
.hero-meta strong{font-size:1.05rem;color:#1d1530}

.hero-visual{
  margin:0;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg,#ffe1f0,#e7d8ff);
  border:1px solid rgba(122,60,255,.15);
  box-shadow:0 30px 60px -28px rgba(122,60,255,.35);
  position:relative
}
.hero-visual img{width:100%;height:auto;display:block}
.hero-visual figcaption{
  font-size:.78rem;color:#6b5e85;padding:.6rem .9rem;background:#fff
}

/* ---------- Content sections ---------- */
.content{padding:1.5rem 0 3rem}
.content section{
  background:#fff;border:1px solid rgba(29,21,48,.07);
  border-radius:20px;padding:1.8rem clamp(1rem,2.5vw,2rem);
  margin:1.2rem 0;
  box-shadow:0 12px 30px -22px rgba(122,60,255,.25)
}
h2{
  font-size:clamp(1.35rem,2.4vw,1.7rem);
  margin:0 0 .8rem;line-height:1.25;color:#1d1530;
  position:relative;padding-left:.9rem
}
h2::before{
  content:"";position:absolute;left:0;top:.4em;bottom:.25em;width:5px;
  border-radius:4px;background:linear-gradient(180deg,#ff2e88,#7a3cff)
}
h3{
  font-size:1.12rem;margin:1.4rem 0 .6rem;color:#3a2b59;
  display:inline-block;border-bottom:2px dashed rgba(122,60,255,.35);padding-bottom:.2rem
}
.content p{margin:.6rem 0 1rem}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;border-radius:14px;margin:1rem 0 1.2rem}
.tbl{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.96rem;
  background:#fff;border:1px solid rgba(29,21,48,.08);border-radius:14px;overflow:hidden;
}
.tbl caption{
  text-align:left;font-weight:700;color:#7a3cff;
  padding:.7rem .9rem;background:#faf5ff;border-bottom:1px solid rgba(122,60,255,.12)
}
.tbl th,.tbl td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid rgba(29,21,48,.06)}
.tbl thead th{
  background:linear-gradient(180deg,#fff0f6,#f1ebff);
  font-size:.85rem;letter-spacing:.04em;color:#3a2b59;text-transform:uppercase
}
.tbl tbody tr:nth-child(even){background:#fbf8ff}
.tbl tbody tr:hover{background:#fff0f6}
.tbl tbody tr:last-child td{border-bottom:0}

/* ---------- Lists ---------- */
.ticklist,.pros,.cons{list-style:none;padding:0;margin:.6rem 0 1rem;display:grid;gap:.5rem}
.ticklist li,.pros li,.cons li{
  padding:.7rem .9rem .7rem 2.4rem;background:#faf6ff;border-radius:12px;
  position:relative;border:1px solid rgba(122,60,255,.08)
}
.ticklist li::before{
  content:"✦";position:absolute;left:.95rem;top:.7rem;color:#7a3cff;font-weight:900
}
.pros li{background:#effdf3;border-color:rgba(34,160,80,.18)}
.pros li::before{
  content:"✓";position:absolute;left:.95rem;top:.65rem;color:#1f9d55;font-weight:900
}
.cons li{background:#fff1f1;border-color:rgba(196,32,32,.18)}
.cons li::before{
  content:"✕";position:absolute;left:.95rem;top:.65rem;color:#c42020;font-weight:900
}

/* ---------- Warnings ---------- */
.warn{
  margin:1rem 0;padding:.95rem 1.1rem;border-radius:14px;
  background:#fff7e6;border:1px solid rgba(255,158,28,.35);color:#5a3d00;
  font-size:.95rem
}
.warn-strong{
  background:#fff0f0;border-color:rgba(196,32,32,.35);color:#7a0d0d
}

/* ---------- FAQ ---------- */
#sss details{
  background:#fbf6ff;border:1px solid rgba(122,60,255,.12);
  border-radius:12px;padding:.85rem 1rem;margin:.55rem 0;transition:background .2s
}
#sss details[open]{background:#fff;border-color:rgba(255,46,136,.4)}
#sss summary{
  cursor:pointer;font-weight:700;color:#3a2b59;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center
}
#sss summary::-webkit-details-marker{display:none}
#sss summary::after{
  content:"+";font-weight:900;color:#ff2e88;font-size:1.4rem;line-height:1;transition:transform .25s
}
#sss details[open] summary::after{transform:rotate(45deg)}
#sss details p{margin:.7rem 0 0;color:#3a2b59}

/* ---------- Footer ---------- */
.foot{
  margin-top:2rem;padding:1.6rem 0;background:#1d1530;color:#d7cfe8;font-size:.9rem
}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.foot-warn{color:#ffb648;font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .hero{padding:1.8rem 0 1rem}
  .hero-grid{grid-template-columns:1fr;gap:1.6rem}
  .hero-meta{grid-template-columns:repeat(2,1fr)}
  .topnav{display:none}
}
@media (max-width: 520px){
  .content section{padding:1.3rem 1rem;border-radius:16px}
  .cta{width:100%;justify-content:center;padding:1rem}
  h1{font-size:1.7rem}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}