/*
Theme Name: Mentoring Shopee Affiliate
Theme URI: https://www.belajarcuanonline.net/mentoringshopee
Author: Belajar Cuan Online
Author URI: https://www.belajarcuanonline.net
Description: Landing page one-page theme untuk Mentoring Shopee Affiliate. Font Sora + DM Sans, warna Shopee orange, countdown, social proof popup, sticky bar, dan video YouTube. Upload via Appearance > Themes > Add New > Upload Theme.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mentoring-shopee
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  color: #1e2a44;
  overflow-x: hidden;
}

.font-display { font-family: 'Sora', sans-serif; font-weight: 800; }

:root {
  --brand-orange: #f5751f;
  --brand-orange-light: #fb8c3e;
  --brand-navy: #1e2a44;
  --brand-cream: #fff7f0;
}

.text-brand-orange { color: var(--brand-orange); }
.text-brand-navy { color: var(--brand-navy); }
.bg-brand-orange { background-color: var(--brand-orange); }
.bg-brand-navy { background-color: var(--brand-navy); }

.btn-orange {
  background-image: linear-gradient(180deg, #fb8c3e 0%, #f5751f 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 22px -6px rgba(245, 117, 31, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(245, 117, 31, 0.65); filter: brightness(1.03); }
.btn-orange:active { transform: translateY(0); }

.hero-glow {
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(251, 140, 62, 0.14) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(40% 30% at 85% 10%, rgba(245, 117, 31, 0.10) 0%, rgba(255,255,255,0) 70%);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  background: var(--brand-cream);
  border: 1px solid rgba(245, 117, 31, 0.22);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-floaty { animation: floaty 4s ease-in-out infinite; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.in-view { animation: fadeUp 0.7s ease forwards; }

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(245,117,31,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(245,117,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,117,31,0); }
}
.pulse-ring { animation: pulseRing 2s infinite; }

@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.slide-in-notif { animation: slideInLeft 0.5s ease forwards; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #f5751f; border-radius: 8px; border: 2px solid #fff; }