/*
Theme Name: Mafia VIP
Theme URI: https://example.com/mafia-vip
Author: Rose Marketing
Description: پوسته اختصاصی مشکی و طلایی بازی مافیا VIP، سازگار با المنتور و مناسب معرفی سناریوهای بازی.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: mafia-vip
*/

:root {
    --mv-black: #050505;
    --mv-black-soft: #0d0d0d;
    --mv-card: #131313;
    --mv-gold: #d9a928;
    --mv-gold-light: #f6d778;
    --mv-cream: #f7f1df;
    --mv-muted: #b9b3a6;
    --mv-border: rgba(217, 169, 40, .28);
    --mv-radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--mv-black);
    color: var(--mv-cream);
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
    line-height: 1.9;
    perspective: 1200px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.mv-site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(5, 5, 5, .92);
    border-bottom: 1px solid var(--mv-border);
    backdrop-filter: blur(16px);
}
.mv-header-inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 84px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.mv-brand img, .custom-logo { width: 132px; max-height: 70px; object-fit: contain; display: block; }
.mv-menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.mv-menu a { color: #fff; font-size: 14px; transition: .25s ease; }
.mv-menu a:hover, .mv-menu .current-menu-item > a { color: var(--mv-gold-light); }
.mv-header-cta, .mv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 24px;
    border: 1px solid var(--mv-gold);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mv-gold-light), var(--mv-gold));
    color: #090909;
    font-weight: 700;
    transition: transform .25s ease, box-shadow .25s ease;
}
.mv-header-cta:hover, .mv-button:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(217,169,40,.25); color: #090909; }
.mv-menu-toggle { display: none; border: 1px solid var(--mv-border); background: transparent; color: var(--mv-gold-light); border-radius: 10px; width: 44px; height: 44px; font-size: 22px; }

.mv-main { min-height: 60vh; overflow: hidden; }
.mv-content-wrap { width: min(1180px, calc(100% - 32px)); margin: 60px auto; }
.mv-page-title { color: var(--mv-gold-light); }

/* Elementor design classes */
.elementor-section.mv-hero-section {
    min-height: 720px;
    display: flex;
    align-items: center;
    position: relative;
    background-image:
      linear-gradient(90deg, rgba(0,0,0,.50), rgba(0,0,0,.25) 50%, rgba(0,0,0,.50)),
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.45)),
      url('assets/images/mafia-mansion-3d.webp');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    isolation: isolate;
}
.elementor-section.mv-hero-section:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .82;
    background:
      radial-gradient(ellipse at 8% 78%, rgba(220,225,230,.28), transparent 38%),
      radial-gradient(ellipse at 92% 84%, rgba(190,200,210,.24), transparent 36%),
      radial-gradient(ellipse at 50% 0%, rgba(255,211,100,.26), transparent 37%);
    filter: blur(18px);
    animation: mv-smoke 10s ease-in-out infinite alternate;
    pointer-events: none;
}
.elementor-section.mv-hero-section:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .72;
    background:
      radial-gradient(circle at 50% 12%, rgba(255,215,125,.20), transparent 25%),
      linear-gradient(90deg, rgba(0,0,0,.42), transparent 24%, transparent 76%, rgba(0,0,0,.42)),
      linear-gradient(180deg, transparent 58%, rgba(0,0,0,.48));
    pointer-events: none;
}
.elementor-section.mv-hero-section > .elementor-container { position: relative; z-index: 3; }
.elementor-section.mv-hero-section > .elementor-container {
    --hero-rx: 0deg;
    --hero-ry: 0deg;
    transform: perspective(1300px) rotateX(var(--hero-rx)) rotateY(var(--hero-ry)) translateZ(1px);
    transition: transform .25s ease-out;
    transform-style: preserve-3d;
}
.mv-fx-rain,
.mv-fx-lightning,
.mv-fx-rays,
.mv-fx-smoke {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mv-fx-rain { z-index: 2; width: 100%; height: 100%; opacity: .82; }
.mv-fx-lightning {
    z-index: 2;
    opacity: 0;
    mix-blend-mode: screen;
    background:
      radial-gradient(circle at var(--flash-x, 25%) 28%, rgba(218,235,255,.95), rgba(130,176,255,.25) 18%, transparent 43%),
      linear-gradient(rgba(205,225,255,.20), rgba(130,175,255,.08));
}
.mv-fx-lightning.is-flashing { animation: mv-lightning-flash .72s steps(1) both; }
.mv-fx-rays {
    z-index: 2;
    inset: -8% 13% 0;
    opacity: .38;
    transform-origin: 50% 0;
    clip-path: polygon(43% 0, 57% 0, 87% 100%, 13% 100%);
    background: conic-gradient(from 176deg at 50% 0, transparent 0deg, rgba(255,210,105,.20) 4deg, transparent 9deg, rgba(255,230,165,.14) 14deg, transparent 20deg);
    filter: blur(10px);
    mix-blend-mode: screen;
    animation: mv-rays 7s ease-in-out infinite alternate;
}
.mv-fx-smoke {
    z-index: 2;
    inset: auto -15% -20%;
    height: 58%;
    opacity: .62;
    filter: blur(28px);
    background:
      radial-gradient(ellipse at 12% 70%, rgba(208,216,224,.38), transparent 28%),
      radial-gradient(ellipse at 42% 86%, rgba(156,168,182,.23), transparent 29%),
      radial-gradient(ellipse at 74% 72%, rgba(200,210,220,.30), transparent 30%),
      radial-gradient(ellipse at 95% 88%, rgba(142,154,168,.25), transparent 28%);
    animation: mv-smoke-deep 13s ease-in-out infinite alternate;
}
.mv-fx-smoke.mv-smoke-back {
    z-index: 1;
    bottom: 10%;
    height: 38%;
    opacity: .34;
    filter: blur(38px);
    animation-duration: 18s;
    animation-direction: alternate-reverse;
}
.mv-hero-logo img { width: min(330px, 70vw) !important; filter: drop-shadow(0 20px 45px rgba(217,169,40,.16)); }
.mv-hero-logo { animation: mv-float 5s ease-in-out infinite; transform-style: preserve-3d; }
.mv-eyebrow .elementor-heading-title { color: var(--mv-gold-light) !important; letter-spacing: 4px; font-size: 13px !important; }
.mv-hero-title .elementor-heading-title {
    color: #fff !important;
    font-size: clamp(42px, 7vw, 86px) !important;
    line-height: 1.25 !important;
    text-shadow: 0 8px 40px rgba(0,0,0,.7);
}
.mv-hero-title .elementor-heading-title span, .mv-gold { color: var(--mv-gold-light); }
.mv-hero-text { color: var(--mv-muted); max-width: 640px; margin-inline: auto; font-size: 17px; }
.mv-section { padding: 95px 0; background: var(--mv-black); }
.mv-section-alt { padding: 95px 0; background: var(--mv-black-soft); border-block: 1px solid rgba(217,169,40,.12); }
.mv-section-title .elementor-heading-title { color: #fff !important; font-size: clamp(30px, 4vw, 48px) !important; }
.mv-section-title .elementor-heading-title:after { content: ""; display: block; width: 58px; height: 3px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--mv-gold-light), transparent); }
.mv-muted-text { color: var(--mv-muted); }

.mv-card {
    height: 100%;
    margin: 10px;
    padding: 30px 24px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    background: linear-gradient(145deg, #171717, #0c0c0c);
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transition: transform .18s ease, border-color .3s ease, box-shadow .3s ease;
}
.mv-card:before {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,220,130,.15) 48%, transparent 60%);
    transform: translateX(-55%) rotate(8deg);
    transition: transform .65s ease;
    pointer-events: none;
}
.mv-card:hover { --lift: -10px; border-color: var(--mv-gold); box-shadow: 0 28px 65px rgba(0,0,0,.52), 0 0 32px rgba(217,169,40,.10); }
.mv-card:hover:before { transform: translateX(55%) rotate(8deg); }
.mv-card .elementor-widget { transform: translateZ(28px); }
.mv-card-number .elementor-heading-title { color: var(--mv-gold-light) !important; font-size: 42px !important; opacity: .9; }
.mv-card-title .elementor-heading-title { color: #fff !important; font-size: 25px !important; }
.mv-card-text { color: var(--mv-muted); min-height: 105px; }
.mv-card .elementor-button, .mv-gold-button .elementor-button {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--mv-gold-light), var(--mv-gold)) !important;
    color: #090909 !important;
    font-weight: 700 !important;
    padding: 14px 25px !important;
}
.mv-outline-button .elementor-button { border: 1px solid var(--mv-gold) !important; border-radius: 999px !important; background: transparent !important; color: var(--mv-gold-light) !important; }
.mv-feature { padding: 25px 20px; text-align: center; }
.mv-feature-icon .elementor-heading-title { color: var(--mv-gold-light) !important; font-size: 34px !important; }
.mv-feature-title .elementor-heading-title { color: #fff !important; font-size: 20px !important; }
.mv-cta-section { padding: 100px 0; background: radial-gradient(circle at center, rgba(217,169,40,.18), transparent 55%), #080808; }
.mv-cta-section .elementor-heading-title { color: #fff !important; }
.mv-scenario-hero {
    position: relative;
    isolation: isolate;
    padding: 145px 0 105px;
    background-image: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.76)), url('assets/images/mafia-mansion-3d.webp');
    background-position: center 30%;
    background-size: cover;
    background-attachment: fixed;
}
.mv-scenario-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 8%, rgba(255,211,105,.25), transparent 32%);
    animation: mv-light-pulse 4s ease-in-out infinite;
    pointer-events: none;
}
.mv-scenario-label .elementor-heading-title { color: var(--mv-gold-light) !important; font-size: 14px !important; letter-spacing: 3px; }
.mv-scenario-title .elementor-heading-title { color: #fff !important; font-size: clamp(44px, 7vw, 78px) !important; }
.mv-role-box { --rx: 0deg; --ry: 0deg; padding: 26px; margin: 8px; border-radius: 18px; border: 1px solid var(--mv-border); background: linear-gradient(145deg,#171717,#090909); transform-style: preserve-3d; transform: perspective(850px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease, box-shadow .3s ease; }
.mv-role-box:hover { box-shadow: 0 24px 55px rgba(0,0,0,.45), 0 0 25px rgba(217,169,40,.09); }
.mv-role-box .elementor-widget { transform: translateZ(24px); }
.mv-role-box .elementor-heading-title { color: var(--mv-gold-light) !important; }
.mv-faq { padding: 18px 22px; margin-bottom: 14px; border: 1px solid var(--mv-border); border-radius: 16px; background: #101010; }
.mv-faq .elementor-heading-title { color: #fff !important; font-size: 18px !important; }
.mv-faq .elementor-widget-text-editor { color: var(--mv-muted); }

.mv-site-footer { border-top: 1px solid var(--mv-border); background: #030303; padding: 58px 0 20px; }
.mv-footer-inner { width: min(1180px, calc(100% - 32px)); margin: auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 50px; }
.mv-footer-logo { width: 150px; }
.mv-footer-title { color: var(--mv-gold-light); margin-top: 0; }
.mv-footer-text { color: var(--mv-muted); font-size: 14px; }
.mv-footer-links { list-style: none; padding: 0; margin: 0; }
.mv-footer-links li { margin-bottom: 9px; }
.mv-footer-links a:hover { color: var(--mv-gold-light); }
.mv-copyright { width: min(1180px, calc(100% - 32px)); margin: 38px auto 0; padding-top: 20px; text-align: center; color: #777; border-top: 1px solid #191919; font-size: 13px; }

@keyframes mv-rain {
    from { transform: translate3d(-2%, -9%, 0); }
    to { transform: translate3d(2%, 13%, 0); }
}
@keyframes mv-lightning-flash {
    0%, 100% { opacity: 0; }
    8% { opacity: .92; }
    14% { opacity: .14; }
    20% { opacity: .72; }
    28% { opacity: .06; }
    42% { opacity: .34; }
    58% { opacity: 0; }
}
@keyframes mv-rays {
    0% { transform: rotate(-1.2deg) scaleX(.92); opacity: .26; }
    100% { transform: rotate(1.2deg) scaleX(1.08); opacity: .48; }
}
@keyframes mv-smoke-deep {
    0% { transform: translate3d(-5%, 4%, 0) scale(1); opacity: .42; }
    45% { transform: translate3d(2%, -2%, 0) scale(1.08); opacity: .68; }
    100% { transform: translate3d(6%, 1%, 0) scale(1.14); opacity: .54; }
}
@keyframes mv-smoke {
    0% { transform: translate3d(-3%, 2%, 0) scale(1); opacity: .45; }
    100% { transform: translate3d(3%, -1%, 0) scale(1.08); opacity: .72; }
}
@keyframes mv-float {
    0%, 100% { transform: translate3d(0,0,35px) rotateX(0deg); }
    50% { transform: translate3d(0,-12px,55px) rotateX(2deg); }
}
@keyframes mv-light-pulse {
    0%,100% { opacity: .62; }
    50% { opacity: 1; }
}

@media (max-width: 900px) {
    .mv-menu-toggle { display: block; }
    .mv-header-cta { display: none; }
    .mv-navigation { display: none; position: absolute; top: 84px; right: 16px; left: 16px; padding: 18px; border: 1px solid var(--mv-border); border-radius: 16px; background: #090909; }
    .mv-navigation.is-open { display: block; }
    .mv-menu { flex-direction: column; align-items: stretch; gap: 8px; }
    .mv-menu a { display: block; padding: 10px; }
    .mv-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .elementor-section.mv-hero-section { min-height: 620px; }
    .elementor-section.mv-hero-section, .mv-scenario-hero { background-attachment: scroll; }
    .mv-fx-rays { inset-inline: -8%; }
    .mv-fx-smoke { opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 600px) {
    .mv-brand img, .custom-logo { width: 105px; }
    .mv-section, .mv-section-alt { padding: 70px 0; }
    .mv-card { margin: 8px 0; }
    .mv-card-text { min-height: auto; }
}