/* ============================================================
   WALL-CRAK PREMIUM KATMANI
   header.php'deki wc-design-system ve sayfa içi stillerin ÜZERİNE
   yüklenir; kaldırmak için header.php'deki tek <link> satırını silin.
   ============================================================ */
:root {
    --pm-bg:          #07090e;
    --pm-surface:     rgba(18, 22, 31, 0.72);
    --pm-surface-2:   rgba(24, 29, 41, 0.85);
    --pm-line:        rgba(148, 163, 184, 0.12);
    --pm-line-strong: rgba(148, 163, 184, 0.22);
    --pm-text:        #eef1f7;
    --pm-dim:         #a3adbf;
    --pm-blue:        #3b82f6;
    --pm-indigo:      #6366f1;
    --pm-cyan:        #38bdf8;
    --pm-gold:        #e8b94a;
    --pm-grad:        linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --pm-grad-text:   linear-gradient(180deg, #ffffff 0%, #c7d2fe 100%);
    --pm-glow:        0 10px 30px -10px rgba(79, 70, 229, 0.55);
    --pm-shadow:      0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.8);
    --pm-radius:      16px;
    --pm-ease:        cubic-bezier(.22, .61, .36, 1);
    --pm-display:     'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ---------- Zemin: derinlik veren yumuşak ışıklar ---------- */
html body, html body.dark-mode {
    background-color: var(--pm-bg) !important;
    color: var(--pm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1100px 600px at 12% -8%, rgba(59,130,246,0.16), transparent 60%),
        radial-gradient(900px 520px at 95% 4%, rgba(99,102,241,0.13), transparent 60%),
        radial-gradient(800px 600px at 50% 110%, rgba(56,189,248,0.07), transparent 60%);
}
html body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(rgba(148,163,184,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 30%, transparent 75%);
}
/* Dekoratif taşmalar yatay kaydırma oluşturmasın (clip, sticky navbar'ı bozmaz) */
html, html body { overflow-x: clip; }
::selection { background: rgba(99,102,241,0.45); color: #fff; }

/* İnce kaydırma çubuğu */
html { scrollbar-color: #2a3242 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232a38; border-radius: 10px; border: 2px solid var(--pm-bg); }
::-webkit-scrollbar-thumb:hover { background: #2f3849; }

/* ---------- Tipografi ---------- */
html body h1, html body h2, html body h3,
html body .stats-head h2, html body .ann-head h2, html body .section-header h2 {
    font-family: var(--pm-display);
    letter-spacing: -0.025em;
}
html body h1, html body h2 { font-weight: 800; }
html body .section-header h2,
html body .stats-head h2,
html body .ann-head h2,
html body .container > .text-center > h2 {
    background: var(--pm-grad-text);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
}
html body .text-secondary { color: var(--pm-dim) !important; }

/* Bölüm etiketleri (eyebrow) */
html body .section-header .section-tag,
html body.dark-mode .section-header .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99,102,241,0.10) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(129,140,248,0.28);
    border-radius: 999px;
    letter-spacing: .14em;
    font-weight: 700;
}

/* ---------- Navbar: cam efekti ---------- */
html body .navbar,
html body.dark-mode .navbar {
    background: rgba(9, 11, 17, 0.62) !important;
    -webkit-backdrop-filter: saturate(160%) blur(16px);
            backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--pm-line) !important;
    box-shadow: none !important;
    transition: background-color .3s var(--pm-ease), box-shadow .3s var(--pm-ease);
}
html body .navbar.pm-scrolled,
html body.dark-mode .navbar.pm-scrolled {
    background: rgba(8, 10, 15, 0.86) !important;
    box-shadow: 0 10px 30px -18px rgba(0,0,0,0.9) !important;
}
html body .navbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.55), rgba(56,189,248,0.45), transparent);
    opacity: .55;
    pointer-events: none;
}
html body .navbar-brand-new .brand-text,
html body.dark-mode .navbar-brand-new .brand-text {
    font-family: var(--pm-display);
    font-weight: 800;
    background: linear-gradient(135deg, #93c5fd 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
html body.dark-mode .nav-btn,
html body .nav-btn {
    color: #aab3c5;
    border: 1px solid transparent;
    transition: color .2s var(--pm-ease), background-color .2s var(--pm-ease), border-color .2s var(--pm-ease);
}
html body.dark-mode .nav-btn:hover,
html body.dark-mode .nav-btn.active,
html body .nav-btn:hover,
html body .nav-btn.active {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .nav-btn.active {
    background: rgba(99,102,241,0.14) !important;
    border-color: rgba(129,140,248,0.35) !important;
    color: #c7d2fe !important;
}
html body .nav-btn-glowing,
html body.dark-mode .nav-btn-glowing {
    color: #c7d2fe !important;
    background: rgba(99,102,241,0.12) !important;
    border: 1px solid rgba(129,140,248,0.35) !important;
}
html body .dropdown-menu-dark-custom {
    background: rgba(14, 17, 25, 0.96) !important;
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border: 1px solid var(--pm-line-strong) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85) !important;
}

/* ---------- Butonlar ---------- */
html body .btn-primary,
html body .prod-btn-primary,
html body .acc-btn-primary,
html body .btn-add-big,
html body .store-search-btn,
html body .hero-carousel .btn-carousel-primary,
html body .package-btn:not([style*="background"]) {
    background: var(--pm-grad) !important;
    border: 1px solid rgba(165,180,252,0.35) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, var(--pm-glow) !important;
    transition: transform .2s var(--pm-ease), box-shadow .2s var(--pm-ease), filter .2s var(--pm-ease) !important;
}
html body .btn-primary:hover,
html body .prod-btn-primary:hover,
html body .acc-btn-primary:hover,
html body .btn-add-big:hover,
html body .store-search-btn:hover,
html body .hero-carousel .btn-carousel-primary:hover,
html body .package-btn:not([style*="background"]):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 16px 34px -12px rgba(79,70,229,0.7) !important;
}
html body .btn-primary:active, html body .package-btn:not([style*="background"]):active { transform: translateY(0) !important; }

html body .btn-outline-secondary,
html body .btn-outline-primary,
html body .hero-carousel .btn-carousel-secondary,
html body .prod-btn-outline {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #e5e9f2 !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: background-color .2s var(--pm-ease), border-color .2s var(--pm-ease) !important;
}
html body .btn-outline-secondary:hover,
html body .btn-outline-primary:hover,
html body .hero-carousel .btn-carousel-secondary:hover,
html body .prod-btn-outline:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: #fff !important;
}

/* ---------- Kartlar: tek premium yüzey dili ---------- */
html body .prod-card,
html body .stat-card,
html body .acc-card,
html body .inv-key-card,
html body .trust-item,
html body .buy-panel,
html body .marketing-card,
html body .proof-card,
html body .ann-card,
html body.dark-mode .prod-card,
html body.dark-mode .inv-key-card,
html body.dark-mode .marketing-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 40%),
        var(--pm-surface) !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow) !important;
    transition: opacity .7s var(--pm-ease), transform .28s var(--pm-ease), border-color .28s var(--pm-ease), box-shadow .28s var(--pm-ease), background-color .28s var(--pm-ease) !important;
}
html body .prod-card:hover,
html body .stat-card:hover,
html body .inv-key-card:hover,
html body .trust-item:hover,
html body .marketing-card:hover,
html body .proof-card:hover,
html body .ann-card:hover,
html body.dark-mode .prod-card:hover,
html body.dark-mode .marketing-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(129,140,248,0.38) !important;
    background:
        linear-gradient(180deg, rgba(129,140,248,0.07), rgba(255,255,255,0) 50%),
        var(--pm-surface-2) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 50px -24px rgba(79,70,229,0.45) !important;
}
html body .prod-card:hover .prod-card-img img { transform: scale(1.03) !important; transition: transform .5s var(--pm-ease); }

/* İkon kutuları */
html body .marketing-card .icon-wrap,
html body.dark-mode .marketing-card .icon-wrap,
html body .trust-icon,
html body .stat-icon,
html body .ann-icon {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.18)) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(129,140,248,0.25);
    box-shadow: 0 8px 20px -10px rgba(79,70,229,0.6);
}
html body .marketing-card:hover .icon-wrap {
    background: var(--pm-grad) !important;
    color: #fff !important;
}
html body .ann-card.is-wa .ann-icon {
    background: rgba(37,211,102,0.12) !important;
    color: #25D366 !important;
    border-color: rgba(37,211,102,0.3);
    box-shadow: none;
}

/* İstatistik rakamları */
html body .stat-number,
html body .sbar-num {
    font-family: var(--pm-display);
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #ffffff 10%, #a5b4fc 120%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Hero ---------- */
html body .hero-carousel .carousel-inner {
    border-radius: 24px !important;
    border: 1px solid var(--pm-line-strong);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
html body .hero-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,9,14,0.88) 0%, rgba(7,9,14,0.55) 42%, rgba(7,9,14,0) 75%),
        linear-gradient(0deg, rgba(7,9,14,0.75) 0%, rgba(7,9,14,0) 35%);
}
html body .hero-carousel .carousel-caption { z-index: 2; }
html body .hero-carousel .carousel-caption h2 {
    font-family: var(--pm-display);
    font-weight: 800 !important;
    letter-spacing: -0.035em;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
html body .hero-carousel .carousel-caption .game-badge {
    background: rgba(99,102,241,0.18) !important;
    border: 1px solid rgba(165,180,252,0.4) !important;
    color: #e0e7ff !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    letter-spacing: .12em;
}
html body .hero-carousel .carousel-control-prev,
html body .hero-carousel .carousel-control-next {
    z-index: 3;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
html body .hero-carousel .carousel-indicators { z-index: 3; }

/* ---------- Geniş bölümler ---------- */
html body .brand-section,
html body .guest-cta,
html body.dark-mode .guest-cta,
html body .download-member-card,
html body .vip-section,
html body .store-hero {
    border-radius: 24px !important;
    border: 1px solid var(--pm-line) !important;
    box-shadow: var(--pm-shadow);
}
html body .guest-cta,
html body.dark-mode .guest-cta {
    background:
        radial-gradient(600px 220px at 50% 0%, rgba(99,102,241,0.18), transparent 70%),
        var(--pm-surface) !important;
}
html body .sponsor-section { border-radius: 24px; }
html body .spon-card { border-radius: 14px !important; }

/* Formlar */
html body .form-control,
html body .form-select,
html body .store-search-input,
html body .payment-form-input {
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--pm-line-strong) !important;
    border-radius: 12px !important;
    color: var(--pm-text) !important;
    transition: border-color .2s var(--pm-ease), box-shadow .2s var(--pm-ease) !important;
}
html body .form-control:focus,
html body .form-select:focus,
html body .store-search-input:focus,
html body .payment-form-input:focus {
    border-color: rgba(129,140,248,0.6) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15) !important;
}

/* ---------- Footer ---------- */
html body footer {
    position: relative;
    background: linear-gradient(180deg, rgba(8,10,16,0.6) 0%, #05070b 100%) !important;
    border-top: 1px solid var(--pm-line);
}
html body footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129,140,248,0.6), transparent);
}

/* ---------- Kaydırınca beliren içerik ---------- */
.pm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--pm-ease), transform .7s var(--pm-ease); }
.pm-reveal.pm-in { opacity: 1; transform: none; }

/* Mobil navbar: menü butonu ekran dışına taşmasın (Giriş/Kayıt mobil menüde de var) */
@media (max-width: 575px) {
    html body .navbar-inner { gap: 6px; }
    html body .navbar-brand-new { margin-right: auto; min-width: 0; gap: 8px; }
    html body .navbar-brand-new img { height: 30px; }
    html body .navbar-brand-new .brand-text { font-size: 1.05rem; }
    html body .navbar-right { gap: 6px; min-width: 0; }
    html body .navbar-right > a.btn-outline-primary { display: none !important; }
    html body .navbar-right > a.btn { padding: 7px 14px !important; font-size: .8rem !important; white-space: nowrap; }
    html body .navbar-toggler-new { flex-shrink: 0; }
    /* Hero okları metnin üstüne binmesin; mobilde kaydırma + noktalar yeterli */
    html body .hero-carousel .carousel-control-prev,
    html body .hero-carousel .carousel-control-next { display: none !important; }
}
@media (max-width: 575px) {
    html body::after { background-size: 44px 44px; }
    html body .hero-carousel .carousel-item::after {
        background: linear-gradient(0deg, rgba(7,9,14,0.92) 0%, rgba(7,9,14,0.45) 60%, rgba(7,9,14,0.2) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html body .prod-card:hover, html body .marketing-card:hover, html body .stat-card:hover { transform: none !important; }
}