/* ═══════════════════════════════════════════════════════════════
   IRAQBET — Homepage (front-page) styles. Namespaced .hp-* and
   scoped under .homepage to avoid collisions with theme CSS.
   ═══════════════════════════════════════════════════════════════ */
/* HP tokens — global so patterns work on any page */
:root{
  --hp-glass:rgba(255,255,255,.045); --hp-glass-2:rgba(255,255,255,.07);
  --hp-line:rgba(255,255,255,.08); --hp-line-2:rgba(255,255,255,.15);
  --hp-text:#f3f5f4; --hp-text-2:rgba(243,245,244,.66); --hp-text-3:rgba(243,245,244,.42);
  --hp-green:color-mix(in srgb, var(--brand-primary) 85%, #fff 15%); --hp-green-2:var(--brand-primary); --hp-teal:color-mix(in srgb, var(--brand-primary) 75%, #000 25%);
  --hp-gold:color-mix(in srgb, var(--brand-accent) 88%, #fff 12%); --hp-gold-2:color-mix(in srgb, var(--brand-accent) 70%, #fff 30%);
  --hp-display:'Space Grotesk','Inter',sans-serif; --hp-body:'Manrope','Inter',sans-serif;
  --hp-r:18px; --hp-ease:cubic-bezier(.22,.61,.36,1);
}
.homepage{font-family:var(--hp-body);color:var(--hp-text);line-height:1.68;padding-inline:var(--gutter)}
/* The homepage wrapper carries the page gutter; let full-width blocks break
   back out to the page edge so any edge-to-edge section background still works.
   Safe technique (negative margin = the gutter, no 100vw → no scrollbar overflow). */
.homepage > .alignfull,
.homepage > [class*="wp-block-"].alignfull{
    margin-inline:calc(-1 * var(--gutter));
    max-width:calc(100% + 2 * var(--gutter));
    width:auto;
}
.homepage::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(700px 480px at 8% -4%,color-mix(in srgb, var(--hp-green) 10%, transparent),transparent 60%),
  radial-gradient(620px 500px at 100% 8%,color-mix(in srgb, var(--hp-teal) 7%, transparent),transparent 58%),
  radial-gradient(680px 600px at 50% 108%,color-mix(in srgb, var(--hp-gold) 5%, transparent),transparent 62%)}
.hp-hero *, .hp-sec *, .hp-cta-trust-sec *{box-sizing:border-box}
.hp-hero h1, .hp-hero h2, .hp-hero h3, .hp-hero .hp-hero-h, .hp-sec h2, .hp-sec h3, .hp-sec .hp-h, .hp-sec .hp-h-sub, .hp-cta-trust-sec h2, .hp-cta-trust-sec .hp-h, .hp-am-title{font-family:var(--hp-display);font-weight:700;
  letter-spacing:-.02em;line-height:1.14;margin:0}
.hp-hero p, .hp-sec p, .hp-cta-trust-sec p { margin: 0 }
.hp-hero a, .hp-sec a, .hp-cta-trust-sec a { text-decoration: none; color: inherit }
.hp-hero img, .hp-sec img, .hp-cta-trust-sec img { display: block; max-width: 100% }
.hp-wrap{max-width:var(--container,1320px);margin:0 auto;padding:0 22px} /* v9.32 m18-F: tek kaynak token */
/* Each .hp-sec is a CSS container — its child grids respond to the
   section's own width, not the viewport. This means a block placed in
   a narrow sidebar page collapses to fewer columns properly, while the
   same block on a full-width page still gets the wide bento layout. */
.hp-sec{padding:74px 0;position:relative;container-type:inline-size}
.hp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#cfcfcf;display:inline-flex;align-items:center;gap:8px}
.hp-eyebrow::before{content:'';width:20px;height:1px;background:var(--hp-green)}
.hp-shead{max-width:640px;margin-bottom:34px}
.hp-shead h2, .hp-shead .hp-h{display:block;font-size:clamp(26px,3.7vw,38px);margin:14px 0 12px}
.hp-lead{color:var(--hp-text-2);font-size:15.5px}
.hp-glass{background:var(--hp-glass);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--hp-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hp-more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;
  color:var(--hp-green);margin-top:26px}
.hp-more svg{width:15px;height:15px;transition:transform .25s var(--hp-ease)}
.hp-more:hover svg{transform:translateX(5px)}
/* The shared `.hp-sec a{color:inherit}` reset (specificity 0,1,1) was
   overriding `.hp-more`/`.hp-am-more` (0,1,0), so in-section links lost
   their brand-green colour in dark mode. These higher-specificity rules
   (0,2,1) restore it via the theme-aware --hp-green token (works in both
   light and dark).
   v9.32 m28 devami: ayni reset, inline_rich'in urettigi .cx-link (0,1,0)
   linklerini de yutuyordu (hero/games/slots/rate lead'leri + about/cta
   govdeleri). Ikizler ayni yesil kimligi geri verir; editor tarafinda WP'nin
   .editor-styles-wrapper on eki iki tarafi da esit yukselttigi icin ayni
   kurallar SSR onizlemede de kazanir. Hover altcizgisi zaten .cx-link:hover
   (0,2,0) ile reset'i yendiginden burada yalniz renk verilir. */
.hp-sec a.hp-more,
.hp-sec a.hp-am-more,
.hp-hero a.cx-link,
.hp-sec a.cx-link,
.hp-cta-trust-sec a.cx-link{color:var(--hp-green)}
/* RTL: the forward arrows must point toward the reading direction. */
[dir="rtl"] .hp-more svg{transform:scaleX(-1)}
[dir="rtl"] .hp-more:hover svg{transform:scaleX(-1) translateX(5px)}
.hp-secfoot{margin-top:24px}

/* buttons — gentle lift only, no magnetic wobble */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--hp-body);font-weight:700;font-size:14px;padding:13px 24px;border-radius:999px;
  border:1px solid transparent;transition:transform .2s var(--hp-ease),box-shadow .25s var(--hp-ease)}
.hp-btn:hover{transform:translateY(-2px)}
.hp-btn-green{background:linear-gradient(135deg,var(--hp-green),var(--hp-green-2));color:#04201a}
.hp-btn-green:hover{box-shadow:0 8px 26px -8px color-mix(in srgb, var(--hp-green) 55%, transparent)}
.hp-btn-gold{background:linear-gradient(135deg,var(--hp-gold-2),var(--hp-gold));color:#231803}
.hp-btn-ghost{background:var(--hp-glass);border-color:var(--hp-line-2);color:var(--hp-text)}
.hp-btn svg{width:15px;height:15px}

.hp-reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--hp-ease),transform .7s var(--hp-ease)}
.hp-reveal.in{opacity:1;transform:none}

/* ─── HERO ─── */
.hp-hero{padding:78px 0 70px;text-align:center;position:relative}
.hp-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform}
.hp-orb-1{width:300px;height:300px;background:color-mix(in srgb, var(--hp-green) 22%, transparent);top:0;inset-inline-start:14%}
.hp-orb-2{width:260px;height:260px;background:color-mix(in srgb, var(--hp-teal) 16%, transparent);top:120px;inset-inline-end:12%}
.hp-orb-3{width:200px;height:200px;background:color-mix(in srgb, var(--hp-gold) 12%, transparent);bottom:-40px;inset-inline-start:46%}
.hp-hero-in{position:relative;z-index:1}
.hp-hero h1, .hp-hero .hp-hero-h{display:block;font-size:clamp(34px,5.6vw,58px);margin:18px auto;max-width:780px}
.hp-hero h1 em, .hp-hero .hp-hero-h em{font-style:normal;background:linear-gradient(120deg,var(--hp-green),var(--hp-teal),var(--hp-green));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hpShine 5s linear infinite}
@keyframes hpShine{to{background-position:200% center}}
.hp-hero p{font-size:clamp(15px,1.9vw,17.5px);color:var(--hp-text-2);max-width:560px;margin:0 auto}
.hp-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hp-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:46px}
.hp-stat{padding:18px 26px;border-radius:16px;min-width:148px}
.hp-stat b{font-family:var(--hp-display);font-size:25px;display:block}
.hp-stat b.g{color:var(--hp-gold)}
.hp-stat span{font-size:12px;color:var(--hp-text-3);font-weight:600}

/* ─── CASINOS section wrapper (cards come from [casino_list]) ─── */
.hp-casinos .casino-list{margin-top:4px}

/* ─── BONUSES — v2 peek rail ─── */
.hp-railwrap{position:relative}
.hp-bonus-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px;margin:-4px;scrollbar-width:none}
.hp-bonus-rail::-webkit-scrollbar{display:none}
.hp-bonus{flex:0 0 318px;scroll-snap-align:start;border-radius:var(--hp-r);padding:24px;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
  transition:transform .3s var(--hp-ease),border-color .3s var(--hp-ease)}
.hp-bonus:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--hp-gold) 40%, transparent)}
.hp-bonus::before{content:'';position:absolute;top:-40%;inset-inline-end:-30%;width:200px;height:200px;
  background:radial-gradient(circle,color-mix(in srgb, var(--hp-gold) 16%, transparent),transparent 70%);pointer-events:none}
.hp-btag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hp-gold);background:color-mix(in srgb, var(--hp-gold) 12%, transparent);padding:5px 11px;border-radius:8px}
.hp-bfor{font-size:12.5px;color:var(--hp-text-3);font-weight:600}
.hp-bonus h3{font-size:23px}
.hp-bonus p{font-size:12.5px;color:var(--hp-text-2);flex:1}
.hp-railnav{position:absolute;top:-54px;inset-inline-end:0;display:flex;gap:8px}
.hp-railbtn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;
  background:var(--hp-glass);border:1px solid var(--hp-line-2);color:var(--hp-text);transition:background .2s}
.hp-railbtn:hover{background:var(--hp-glass-2)}
.hp-railbtn svg{width:16px;height:16px}

/* ─── GAMES ─── */
.hp-games{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-game{padding:24px;border-radius:var(--hp-r);transition:transform .3s var(--hp-ease),border-color .3s}
.hp-game:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--hp-green) 40%, transparent)}
.hp-gic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(140deg,color-mix(in srgb, var(--hp-green) 20%, transparent),color-mix(in srgb, var(--hp-green) 5%, transparent));
  border:1px solid color-mix(in srgb, var(--hp-green) 22%, transparent);transition:transform .35s var(--hp-ease)}
.hp-game:hover .hp-gic{transform:rotate(-8deg) scale(1.08)}
.hp-gic svg{width:24px;height:24px;color:var(--hp-green)}
.hp-game h3{font-size:17px;margin-bottom:7px}
.hp-game p{font-size:13px;color:var(--hp-text-2);margin-bottom:13px}
.hp-game .hp-more{margin-top:0;font-size:13px}

/* ─── TOP SLOTS ─── */
.hp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-slot{border-radius:var(--hp-r);overflow:hidden;transition:transform .3s var(--hp-ease),border-color .3s}
.hp-slot:hover{transform:translateY(-5px);border-color:var(--hp-line-2)}
.hp-slot-img{height:158px;position:relative;overflow:hidden}
.hp-slot-img i{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--hp-ease);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);font-style:normal}
.hp-slot:hover .hp-slot-img i{transform:scale(1.12)}
.hp-slot-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--hp-ease)}
.hp-slot:hover .hp-slot-img img{transform:scale(1.08)}
.hp-slot-rank{position:absolute;top:12px;inset-inline-start:12px;font-family:var(--hp-display);font-weight:700;font-size:12px;
  background:rgba(8,10,9,.78);backdrop-filter:blur(6px);border:1px solid var(--hp-line-2);
  color:var(--hp-gold);padding:4px 10px;border-radius:8px}
.hp-slot-rtp{position:absolute;top:12px;inset-inline-end:12px;font-size:10px;font-weight:700;
  background:color-mix(in srgb, var(--hp-green) 16%, transparent);border:1px solid color-mix(in srgb, var(--hp-green) 30%, transparent);color:var(--hp-green);
  padding:4px 9px;border-radius:8px}
.hp-slot-body{padding:18px}
.hp-slot-body h3{font-size:16px}
.hp-slot-prov{font-size:11.5px;color:var(--hp-text-3);font-weight:600;margin:3px 0 9px}
.hp-slot-body p{font-size:12.5px;color:var(--hp-text-2);margin-bottom:11px}
.hp-slot-body .hp-more{margin-top:0;font-size:13px}

/* ─── PAYMENTS (flip) ─── */
.hp-pays{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.hp-pay{height:128px;perspective:1000px;cursor:pointer}
.hp-pay-inner{position:relative;width:100%;height:100%;transition:transform .6s var(--hp-ease);
  transform-style:preserve-3d}
.hp-pay.flip .hp-pay-inner{transform:rotateY(180deg)}
.hp-pay-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px;text-align:center}
.hp-pay-back{transform:rotateY(180deg);background:linear-gradient(150deg,color-mix(in srgb, var(--hp-green) 14%, transparent),var(--hp-glass));gap:5px}
.hp-pay-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--hp-glass-2);border:1px solid var(--hp-line)}
.hp-pay-ic svg{width:20px;height:20px;color:var(--hp-text-2)}
.hp-pay-face>strong{font-size:13px;font-weight:700}
.hp-pay-hint{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-text-3)}
.hp-pay-back b{font-family:var(--hp-display);font-size:13px;color:var(--hp-green)}
.hp-pay-back .row{font-size:10.5px;color:var(--hp-text-2);font-weight:600}

/* ─── HOW WE RATE ─── */
.hp-rate{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.hp-rate-list{display:flex;flex-direction:column;gap:18px}
.hp-rate-row .top{display:flex;justify-content:space-between;margin-bottom:8px}
.hp-rate-row .top b{font-family:var(--hp-display);font-size:15px}
.hp-rate-row .top span{font-family:var(--hp-display);font-weight:700;color:var(--hp-green);font-size:14px}
.hp-bar{height:8px;border-radius:99px;background:var(--hp-glass-2);overflow:hidden}
.hp-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--hp-green-2),var(--hp-green),var(--hp-teal));
  transition:width 1.3s var(--hp-ease)}
.hp-rate.in .hp-bar i{width:var(--pct)}
/* Container query: collapse the two-column rate layout based on the
   section's own width, so it stacks correctly inside a narrow sidebar
   page (where the viewport is wide but the content column is narrow). */
@container (max-width:860px){
  .hp-rate{grid-template-columns:1fr;gap:26px}
}
.hp-rate-aside{padding:30px;border-radius:var(--hp-r)}
.hp-rate-aside h3, .hp-rate-aside .hp-h-sub{display:block;font-size:18px;margin:10px 0}
.hp-rate-aside p{font-size:13px;color:var(--hp-text-2);margin-bottom:16px}
.hp-check{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0}
.hp-check li{position:relative;padding-inline-start:30px;font-size:13.5px;color:var(--hp-text-2)}
.hp-check li::before{content:'';position:absolute;inset-inline-start:0;top:1px;width:20px;height:20px;border-radius:6px;
  background:color-mix(in srgb, var(--hp-green) 14%, transparent);border:1px solid color-mix(in srgb, var(--hp-green) 30%, transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

/* ─── ABOUT ─── */
.hp-about{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hp-about-img{border-radius:var(--hp-r);overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center;
  background:linear-gradient(150deg,#163024,#0c0f0e);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.hp-about-img img{width:100%;height:100%;object-fit:cover}
.hp-about h2{font-size:clamp(24px,3.4vw,34px);margin:13px 0 14px}
.hp-about p{font-size:14px;color:var(--hp-text-2);margin-bottom:14px}

/* ─── NEWS ─── */
.hp-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-post{border-radius:var(--hp-r);overflow:hidden;transition:transform .3s var(--hp-ease),border-color .3s}
.hp-post:hover{transform:translateY(-5px);border-color:var(--hp-line-2)}
.hp-post-thumb{height:168px;overflow:hidden;position:relative}
.hp-post-thumb i,.hp-post-thumb img{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .5s var(--hp-ease)}
.hp-post-thumb i{display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hp-post-thumb img{object-fit:cover}
.hp-post:hover .hp-post-thumb i,.hp-post:hover .hp-post-thumb img{transform:scale(1.12)}
.hp-post-body{padding:20px}
.hp-post-cat{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-green)}
.hp-post-body h3{font-size:16px;margin:8px 0;line-height:1.3}
.hp-post-body p{font-size:12.5px;color:var(--hp-text-2);margin-bottom:11px}
.hp-post-body .hp-more{margin-top:0;font-size:13px}

/* ─── FAQ ─── */
.hp-faq{max-width:760px;margin:0 auto}
.hp-faq details{border-radius:14px;margin-bottom:11px;overflow:hidden;interpolate-size:allow-keywords}
.hp-faq details::details-content{
  height:0;overflow:hidden;
  transition:height .35s var(--hp-ease),content-visibility .35s allow-discrete}
.hp-faq details[open]::details-content{height:auto}
.hp-faq summary{padding:18px 22px;font-family:var(--hp-display);font-weight:600;font-size:15.5px;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::after{content:'+';font-size:22px;color:var(--hp-green);transition:transform .25s}
.hp-faq details[open] summary::after{transform:rotate(135deg)}
.hp-faq details p{padding:0 22px 20px;color:var(--hp-text-2);font-size:13.5px}

/* ─── CTA ─── */
.hp-cta{text-align:center}
.hp-cta-box{border-radius:26px;padding:54px 32px;position:relative;overflow:hidden}
.hp-cta-box::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 240px at 50% 0%,color-mix(in srgb, var(--hp-green) 18%, transparent),transparent 70%)}
.hp-cta-box h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:12px;position:relative}
.hp-cta-box p{color:var(--hp-text-2);max-width:440px;margin:0 auto 24px;position:relative}

/* ─── MOBILE ─── */
@media(max-width:860px){
  .hp-games,.hp-slots,.hp-news-grid{grid-template-columns:repeat(2,1fr)}
  .hp-pays{grid-template-columns:repeat(3,1fr)}
  .hp-about{grid-template-columns:1fr;gap:26px}
}
@media(max-width:600px){
  .hp-sec{padding:54px 0}
  .hp-games,.hp-slots,.hp-news-grid{grid-template-columns:1fr}
  .hp-bonus{flex:0 0 84%}
  .hp-stats{gap:10px}
  .hp-stat{min-width:calc(50% - 5px);padding:15px}
}
@media(max-width:420px){.hp-pays{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.hp-hero *, .hp-sec *, .hp-cta-trust-sec *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─── EMBEDDED CONTEXT (review / regular pages) ───
   On the front page each .hp-sec is a full-bleed section whose .hp-wrap
   supplies the page's only horizontal gutter. When these blocks are inserted
   into themed content (.entry-content / .post-content) the host already adds a
   gutter via .container, so .hp-wrap doubled it — leaving very little width on
   narrow sidebar columns at mobile. Here we drop the duplicate inner gutter and
   the oversized section padding so embedded blocks sit flush with surrounding
   prose. The front page is unaffected (its sections are not inside these wrappers). */
.entry-content .hp-sec,
.post-content .hp-sec{padding-block:clamp(28px,5vw,48px)}
.entry-content .hp-sec .hp-wrap,
.post-content .hp-sec .hp-wrap{padding-inline:0;max-width:none}
/* Section heading no longer needs the wide front-page rhythm when embedded */
.entry-content .hp-sec .hp-shead,
.post-content .hp-sec .hp-shead{margin-bottom:22px}

/* ═══ LIGHT MODE ═══ */
[data-theme="light"]{
  --hp-glass:rgba(255,255,255,.72); --hp-glass-2:rgba(255,255,255,.9);
  --hp-line:rgba(15,23,42,.1); --hp-line-2:rgba(15,23,42,.17);
  --hp-text:#0f172a; --hp-text-2:rgba(15,23,42,.68); --hp-text-3:rgba(15,23,42,.5);
  --hp-green:color-mix(in srgb, var(--brand-primary) 80%, #000 20%); --hp-green-2:color-mix(in srgb, var(--brand-primary) 65%, #000 35%); --hp-teal:color-mix(in srgb, var(--brand-primary) 65%, #000 35%);
  --hp-gold:color-mix(in srgb, var(--brand-accent) 80%, #000 20%); --hp-gold-2:color-mix(in srgb, var(--brand-accent) 70%, #000 30%);
}
[data-theme="light"] .homepage::before{background:
  radial-gradient(700px 480px at 8% -4%,color-mix(in srgb, var(--hp-green) 7%, transparent),transparent 60%),
  radial-gradient(620px 500px at 100% 8%,color-mix(in srgb, var(--hp-teal) 5%, transparent),transparent 58%),
  radial-gradient(680px 600px at 50% 108%,color-mix(in srgb, var(--hp-gold) 4%, transparent),transparent 62%)}
[data-theme="light"] .hp-glass{
  background:rgba(255,255,255,.66);
  border:1px solid rgba(15,23,42,.1);
  box-shadow:0 6px 22px -10px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.75)}
[data-theme="light"] .hp-orb-1{background:color-mix(in srgb, var(--hp-green) 10%, transparent)}
[data-theme="light"] .hp-orb-2{background:color-mix(in srgb, var(--hp-teal) 8%, transparent)}
[data-theme="light"] .hp-orb-3{background:color-mix(in srgb, var(--hp-gold) 7%, transparent)}
[data-theme="light"] .hp-btn-ghost{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.15)}
[data-theme="light"] .hp-bar{background:rgba(15,23,42,.07)}
[data-theme="light"] .hp-slot-rank{background:rgba(255,255,255,.86);border-color:rgba(15,23,42,.14)}
[data-theme="light"] .hp-slot-rtp{background:rgba(255,255,255,.88);border-color:color-mix(in srgb, var(--hp-green) 35%, transparent);color:var(--hp-green)}
[data-theme="light"] .hp-faq summary::after,
[data-theme="light"] .hp-eyebrow,
[data-theme="light"] .hp-more{color:var(--hp-green)}
[data-theme="light"] .hp-about-img{
  background:linear-gradient(150deg,#dfe9e4,#eef1f4);
  color:rgba(15,23,42,.42)}

/* ════════════════════════════════════════════════════════════════
   v9.5.6 — NEW HOMEPAGE PATTERNS
   .hp-games-spotlight / .hp-slots-bento / .hp-about-manifesto / .hp-cta-trust
   ════════════════════════════════════════════════════════════════ */

/* ─── GAMES SPOTLIGHT (asymmetric) ─── */
/* hp-games-spotlight grid. The dynamic block sets --hp-gs-cols inline
   (column count), and the media queries below override the columns at
   smaller widths. (Originally this relied on native Gutenberg grid
   layout JSON; the server-rendered block owns the grid now.) */
.hp-games-spotlight{
  display:grid;
  grid-template-columns:repeat(var(--hp-gs-cols, 3), 1fr);
  gap:14px;
}
.hp-gs{
  background:var(--hp-glass);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--hp-line);
  border-radius:var(--hp-r);
  padding:24px 24px 22px;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .25s var(--hp-ease),border-color .25s var(--hp-ease);
  position:relative;overflow:hidden;
}
.hp-gs:hover{transform:translateY(-3px);border-color:var(--hp-line-2)}
.hp-gs.is-featured{
  grid-column:span 1;grid-row:span 2;
  padding:34px 32px 30px;
  background:
    radial-gradient(420px 260px at 0% 0%,color-mix(in srgb, var(--hp-green) 16%, transparent),transparent 70%),
    var(--hp-glass);
  border-color:color-mix(in srgb, var(--hp-green) 35%, transparent);
}
.hp-gs.is-featured::before{
  content:'★ MOST POPULAR';
  position:absolute;top:18px;inset-inline-end:18px;
  font-size:9.5px;font-weight:900;letter-spacing:.18em;
  color:var(--hp-gold);
  background:color-mix(in srgb, var(--hp-gold) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--hp-gold) 40%, transparent);
  padding:4px 10px;border-radius:999px;
}
/* ─────────────────────────────────────────────────────────────────────
   .hp-gs-ico — FOREGROUND ICON BOX (top-left)
   Rendered as a <div> in render.php so it's immune to any rule
   targeting <p> inside .hp-gs (description / link wrappers).
   Owns: size, shape, centering, image padding, stacking.
   ─────────────────────────────────────────────────────────────────── */
.hp-gs-ico{
  width:55px;
  height:55px;
  flex:0 0 55px;              /* grow:0 shrink:0 basis:55px — cannot be squeezed by any flex parent */
  box-sizing:border-box;
  padding:0;
  margin:0 0 14px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;
  font-size:38px;line-height:1;
  overflow:hidden;            /* keep uploaded images contained */
  position:relative;z-index:1;/* stay above the background icon */
}
/* Featured card: larger box. Each property mirrors the base rule so
   nothing leaks from outside; flex shorthand is set again, not just basis. */
.hp-gs.is-featured .hp-gs-ico{
  width:78px;
  height:78px;
  flex:0 0 78px;
  font-size:54px;
  border-radius:18px;
  margin-bottom:18px;
}
/* Uploaded image inside the icon box. */
.hp-gs-ico img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:9px;
  box-sizing:border-box;
  border-radius:inherit;
  display:block;
}
.hp-gs.is-featured .hp-gs-ico img{padding:13px}

/* Decorative background icon — large, rotated, faded, bottom-right. */
.hp-gs-bg{
  position:absolute;
  inset-inline-end:-16px;bottom:-24px;
  font-size:150px;line-height:1;
  opacity:.10;
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.hp-gs-bg img{width:150px;height:150px;object-fit:contain;display:block;}
.hp-gs.is-featured .hp-gs-bg{font-size:210px;inset-inline-end:-22px;bottom:-32px;}
.hp-gs.is-featured .hp-gs-bg img{width:210px;height:210px;}
/* Keep all card content above the background icon. */
.hp-gs > h3,
.hp-gs > p{position:relative;z-index:1;}
.hp-gs h3, .hp-gs .hp-h-sub{display:block;font-size:18px;margin:0 0 6px;color:var(--hp-text)}
.hp-gs.is-featured h3{font-size:24px;margin-bottom:10px}
.hp-gs p{color:var(--hp-text-2);font-size:13.5px;line-height:1.6;margin:0}
.hp-gs .hp-gs-text{flex:1}
.hp-gs.is-featured p{font-size:14.5px}
.hp-gs .hp-more{margin-top:14px}
.hp-gs.is-featured .hp-more{margin-top:18px}

/* The rail wraps the non-featured cards. On desktop it's display:contents
   so those cards become direct grid items (original spotlight look). On
   mobile it turns into a horizontal peek-slider under the featured card. */
.hp-games-rail{display:contents}

/* Container queries: the breakpoints below check the section's own
   width, so the layout adapts even inside a narrow sidebar page. */
@container (max-width:900px){
  .hp-games-spotlight{grid-template-columns:repeat(2,1fr)}
  .hp-gs.is-featured{grid-column:span 2;grid-row:auto}
}
@container (max-width:600px){
  /* Featured card full-width on top, rest as a swipeable peek-slider. */
  .hp-games-spotlight{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  /* Tighter card padding on narrow widths: the desktop 32–34px horizontal
     padding eats too much of a phone's width, leaving the copy in a thin
     strip. Scale it down so text starts sooner (applies wherever the block
     is narrow — front page mobile and embedded review/game pages alike). */
  .hp-gs{padding:20px 18px}
  .hp-gs.is-featured{
    grid-column:auto;grid-row:auto;
    width:100%;
    padding:24px 20px 22px;
  }
  /* A touch more breathing room between the icon and the title on mobile. */
  .hp-gs-ico{margin-bottom:18px}
  .hp-gs.is-featured .hp-gs-ico{margin-bottom:20px}
  .hp-games-rail{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    margin-inline:-4px;
    padding-inline:4px;
    scrollbar-width:none;
  }
  .hp-games-rail::-webkit-scrollbar{display:none}
  .hp-games-rail > .hp-gs{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
}


/* ─── TOP SLOTS (bento mixed grid) ─── */
.hp-slots-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:215px;
  gap:14px;
}
.hp-sb{
  position:relative;
  background:var(--hp-glass);
  border:1px solid var(--hp-line);
  border-radius:14px;
  overflow:hidden;
  transition:transform .25s var(--hp-ease),border-color .25s var(--hp-ease);
}
.hp-sb:hover{transform:translateY(-3px);border-color:var(--hp-line-2)}
.hp-sb.is-featured{
  grid-column:span 2;grid-row:span 2;
  border-color:color-mix(in srgb, var(--hp-gold) 35%, transparent);
}
.hp-sb.size-wide{grid-column:span 2}
/* Slot card image area — works for both an <img> element (when the
   game has a featured image) and a fallback <div> (when it doesn't).
   The img variant uses object-fit so the image is cropped consistently
   regardless of card aspect ratio (1×1, 2×1 wide, 2×2 featured). */
.hp-sb-img{
  position:absolute;inset:0;
  width:100%;height:100%;
}
img.hp-sb-img{
  object-fit:cover;
  object-position:center;
  display:block;
}
.hp-sb-img-fallback{
  background:linear-gradient(135deg,#1a3a2e,#0c0f0e);
}
.hp-sb-rank{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  font-size:9px;font-weight:900;letter-spacing:.14em;
  color:#231803;
  background:linear-gradient(135deg,var(--hp-gold-2),var(--hp-gold));
  padding:4px 10px;border-radius:5px;
  box-shadow:0 4px 14px -4px color-mix(in srgb, var(--hp-gold) 50%, transparent);
}
.hp-sb-rtp{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;
  color:var(--hp-green);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--hp-green) 35%, transparent);
  padding:4px 9px;border-radius:6px;
}
.hp-sb-overlay{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.93) 0%,rgba(0,0,0,.8) 24%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.16) 78%,transparent 100%);
}
.hp-sb.is-featured .hp-sb-overlay{padding:56px 24px 24px}
.hp-sb-prov{
  font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hp-green);margin-bottom:4px;
}
.hp-sb-overlay h3, .hp-sb-overlay .hp-h-sub{display:block;font-size:15px;color:#fff;margin:0 0 0;letter-spacing:-.01em;line-height:1.2}
.hp-sb.is-featured .hp-sb-overlay h3, .hp-sb.is-featured .hp-sb-overlay .hp-h-sub{font-size:22px;margin-bottom:10px}
.hp-sb-overlay p{color:rgba(255,255,255,.85);font-size:13px;line-height:1.55;margin:6px 0 0;max-width:380px}
/* Slot overlay links stay GOLD by design. The `a` raises specificity to
   (0,2,1) so this wins over the section-wide green rule .hp-sec a.hp-more
   (also 0,2,1) by source order — without it, slot links turned green. */
.hp-sb-overlay a.hp-more{color:var(--hp-gold-2);margin-top:12px;font-size:13px}

/* Rail wrapper: desktop = display:contents (children flow into grid),
   mobile = horizontal flex scroll with peek */
.hp-sb-rail{display:contents}

@container (max-width:720px){
  .hp-slots-bento{display:flex;flex-direction:column;gap:14px}
  .hp-sb.is-featured{aspect-ratio:auto;min-height:300px;grid-column:auto;grid-row:auto}
  .hp-sb.is-featured .hp-sb-overlay{
    justify-content:flex-end;padding:24px 22px 22px;
  }
  .hp-sb-rail{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline-end:-22px;padding-block:4px;padding-inline-end:22px;
  }
  .hp-sb-rail::-webkit-scrollbar{display:none}
  .hp-sb-rail{scrollbar-width:none}
  .hp-sb-rail .hp-sb{flex:0 0 78%;scroll-snap-align:start;aspect-ratio:4/3;grid-column:auto;grid-row:auto}
}


/* ─── ABOUT MANIFESTO ─── */
.wp-block-group.hp-about-manifesto,
.hp-about-manifesto{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}
.hp-am-eyebrow{
  display:inline-block;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hp-green);margin-bottom:14px;
}
.hp-am-title{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:clamp(28px,3.8vw,42px);
  font-weight:900;letter-spacing:-.025em;line-height:1.12;
  margin:0 0 18px;color:var(--hp-text);
}
.hp-am-title em{
  font-style:italic;
  background:linear-gradient(135deg,var(--hp-green),var(--hp-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 12px color-mix(in srgb, var(--hp-green) 28%, transparent));
}
.hp-am-left.hp-am-left p{color:var(--hp-text-2);font-size:15px;line-height:1.7;margin-bottom:18px} /* m2: cx-flow ritmine karsi sira-bagimsiz galibiyet */
.hp-am-more{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--hp-green);font-weight:700;font-size:14px;
  transition:gap .2s var(--hp-ease);
}
.hp-am-more::after{content:'→';font-size:15px}
[dir="rtl"] .hp-am-more::after{content:'←'}
.hp-am-more:hover{gap:11px}
.hp-am-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.hp-am-stat{
  padding:22px 20px;
  background:var(--hp-glass);
  border:1px solid color-mix(in srgb, var(--hp-green) 22%, transparent);
  border-radius:14px;
  transition:transform .25s var(--hp-ease),border-color .25s var(--hp-ease);
}
.hp-am-stat:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--hp-green) 45%, transparent)}
.hp-am-stat-num{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-size:42px;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--hp-text) 0%,var(--hp-green) 70%,var(--hp-gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 12px color-mix(in srgb, var(--hp-green) 22%, transparent));
  margin-bottom:8px;
}
.hp-am-stat-label{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hp-text-2);
}
/* Container query: collapse the two-column manifesto based on the section's
   own width, so it stacks correctly inside a narrow sidebar page. The
   dynamic block renders `.hp-about-manifesto` (no wp-block-group wrapper),
   so the selector covers both the legacy pattern markup and the block. */
@container (max-width:900px){
  .wp-block-group.hp-about-manifesto,
  .hp-about-manifesto{grid-template-columns:1fr;gap:28px}
}
@media(max-width:480px){
  .hp-am-title{font-size:26px}
  .hp-am-stat{padding:16px 14px}
  .hp-am-stat-num{font-size:32px}
}


/* ─── CTA TRUST STRIP ─── */
.hp-cta-trust-sec{padding-block:64px}
.hp-cta-trust{
  padding:38px 40px;
  background:
    radial-gradient(500px 320px at 50% 0%,color-mix(in srgb, var(--hp-green) 12%, transparent),transparent 70%),
    var(--hp-glass);
  border:1px solid color-mix(in srgb, var(--hp-green) 28%, transparent);
  border-radius:20px;
  text-align:center;
}
.hp-cta-trust-strip{
  display:inline-flex;align-items:center;gap:28px;
  padding:12px 26px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hp-line);
  border-radius:999px;
  margin-bottom:22px;
}
.hp-cta-trust-strip-item{display:flex;align-items:center;gap:8px}
.hp-cta-trust-strip-num{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-size:22px;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--hp-text) 0%,var(--hp-green) 70%,var(--hp-gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hp-cta-trust-strip-label{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hp-text-2);
}
.hp-cta-trust-strip-sep{width:1px;height:18px;background:var(--hp-line-2)}
.hp-cta-trust h2, .hp-cta-trust .hp-h{display:block;font-size:clamp(22px,3vw,30px);margin:0 0 12px;max-width:580px;margin-inline:auto}
.hp-cta-trust.hp-cta-trust p{color:var(--hp-text-2);max-width:500px;margin:0 auto 24px;font-size:14.5px} /* m2: cx-flow ritmine karsi sira-bagimsiz galibiyet */
.hp-cta-trust-actions{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Container query: the trust strip wraps / drops separators based on the
   section's own width, so it behaves correctly inside a narrow sidebar
   page (wide viewport but narrow content column) — not just on mobile. */
@container (max-width:720px){
  .hp-cta-trust{padding:28px 22px}
  .hp-cta-trust-strip{gap:14px;padding:11px 18px;flex-wrap:wrap;justify-content:center;border-radius:16px}
  .hp-cta-trust-strip-sep{display:none}
  .hp-cta-trust-strip-num{font-size:18px}
}


/* ─── LIGHT MODE overrides for new patterns ─── */
[data-theme="light"] .hp-gs.is-featured{
  background:
    radial-gradient(420px 260px at 0% 0%,color-mix(in srgb, var(--hp-green) 10%, transparent),transparent 70%),
    var(--hp-glass);
  border-color:color-mix(in srgb, var(--hp-green) 35%, transparent);
}
[data-theme="light"] .hp-gs-ico{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.1);
}
[data-theme="light"] .hp-gs.is-featured::before{
  background:color-mix(in srgb, var(--hp-gold) 12%, transparent);
  border-color:color-mix(in srgb, var(--hp-gold) 40%, transparent);
  color:var(--hp-gold);
}
[data-theme="light"] .hp-sb-rank{
  background:linear-gradient(135deg,var(--hp-gold-2),var(--hp-gold));
  color:#fff;
}
[data-theme="light"] .hp-sb-rtp{
  background:rgba(255,255,255,.92);
  border-color:color-mix(in srgb, var(--hp-green) 40%, transparent);
  color:var(--hp-green);
}
[data-theme="light"] .hp-sb-overlay{
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.76) 24%,rgba(0,0,0,.46) 52%,rgba(0,0,0,.14) 78%,transparent 100%);
}
/* Slot overlay content always sits on a dark scrim, so its accent should
   stay the bright dark-mode green in light mode too (the light theme's
   darker green washed out over the scrim). */
[data-theme="light"] .hp-sb-overlay .hp-sb-prov{color:var(--hp-green)}
[data-theme="light"] .hp-am-stat{
  border-color:color-mix(in srgb, var(--hp-green) 30%, transparent);
}
[data-theme="light"] .hp-am-stat:hover{border-color:color-mix(in srgb, var(--hp-green) 55%, transparent)}
[data-theme="light"] .hp-am-title em,
[data-theme="light"] .hp-am-stat-num,
[data-theme="light"] .hp-cta-trust-strip-num{
  background:linear-gradient(135deg,#0f172a 0%,var(--hp-green) 70%,var(--hp-gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="light"] .hp-cta-trust{
  background:
    radial-gradient(500px 320px at 50% 0%,color-mix(in srgb, var(--hp-green) 8%, transparent),transparent 70%),
    var(--hp-glass);
  border-color:color-mix(in srgb, var(--hp-green) 30%, transparent);
}
[data-theme="light"] .hp-cta-trust-strip{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.08);
}