/* ==================================================
   ULTIMATE GOD TIER V4
   PART 1
   HERO + BACKGROUND SYSTEM
================================================== */

/* ==========================================
   RESET
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
"Segoe UI",
sans-serif;

background:#050000;

color:#fff;

overflow-x:hidden;

position:relative;

min-height:100vh;

min-height:100vh;

display:flex;

flex-direction:column;

}
main{

flex:1;

}

/* ==========================================
   BACKGROUND MASTER
========================================== */

.bg-main{

position:fixed;

inset:0;

background-image:
url("assets/bg-main.png");

background-size:cover;
background-position:center;

background-repeat:no-repeat;

z-index:-10;

transform-origin:center;

animation:
bgFloat 40s ease-in-out infinite;

}

@keyframes bgFloat{

0%{
transform:
scale(1);
}

50%{
transform:
scale(1.04);
}

100%{
transform:
scale(1);
}

}

/* ==========================================
   DARK OVERLAY
========================================== */

.bg-overlay{

position:fixed;

inset:0;

background:

linear-gradient(
180deg,
rgba(0,0,0,.25),
rgba(0,0,0,.55)
),

radial-gradient(
circle at center,
rgba(120,0,0,.10),
transparent 70%
);

z-index:-9;

pointer-events:none;

}

/* ==========================================
   BATIK OVERLAY
========================================== */

.batik-overlay{

position:fixed;

inset:0;

background-image:
url("assets/batik-overlay.png");

background-size:cover;

background-repeat:repeat;

opacity:.10;

mix-blend-mode:screen;

z-index:-8;

pointer-events:none;

animation:
batikMove 70s linear infinite;

}

@keyframes batikMove{

0%{

transform:
translateX(0);

}

100%{

transform:
translateX(250px);

}

}

/* ==========================================
   EMBERS
========================================== */

.embers-overlay{

position:fixed;

inset:0;

background-image:
url("assets/embers-overlay.png");

background-size:cover;

background-position:center;

opacity:.45;

pointer-events:none;

z-index:-7;

animation:
embersFloat 20s linear infinite;

}

@keyframes embersFloat{

0%{

transform:
translateY(0);

}

100%{

transform:
translateY(-120px);

}

}

/* ==========================================
   LIGHT SWEEP
========================================== */

.light-sweep{

position:fixed;

inset:0;

background-image:
url("assets/light-sweep.png");

background-size:120%;

background-repeat:no-repeat;

background-position:-40% center;

opacity:.15;

pointer-events:none;

z-index:-6;

animation:
lightSweepMove 10s linear infinite;

}

@keyframes lightSweepMove{

0%{

background-position:
-60% center;

}

100%{

background-position:
160% center;

}

}

/* ==========================================
   HERO
========================================== */

.hero{

position:relative;

height:560px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

padding-top:40px;

padding-bottom:40px;

}

/* ==========================================
   ORNAMENT TOP
========================================== */

.ornament-top{

position:absolute;

pointer-events:none;

user-select:none;

filter:

drop-shadow(
0 0 15px
rgba(255,180,0,.45)
);

}

.ornament-left{

top:20px;

left:0;

width:420px;

animation:
ornamentFloatLeft 8s ease-in-out infinite;

}

.ornament-center{

top:0;

left:50%;

transform:
translateX(-50%);
translateY(50px);

width:500px;

animation:
ornamentCenterFloat 6s ease-in-out infinite;


}

.ornament-right{

top:20px;

right:0;

width:420px;

animation:
ornamentFloatRight 8s ease-in-out infinite;

}

@keyframes ornamentFloatLeft{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(10px);

}

}

@keyframes ornamentFloatRight{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(10px);

}

}

@keyframes ornamentGlow{

0%,100%{

filter:

drop-shadow(
0 0 12px
rgba(255,180,0,.35)
);

}

50%{

filter:

drop-shadow(
0 0 35px
rgba(255,210,0,.85)
);

}

}
@keyframes ornamentCenterFloat{

0%,100%{

transform:
translateX(-50%)
translateY(0)
scale(1);

filter:

drop-shadow(
0 0 15px rgba(255,180,0,.35)
);

}

50%{

transform:
translateX(-50%)
translateY(10px)
scale(1.02);

filter:

drop-shadow(
0 0 45px rgba(255,210,0,.9)
)

drop-shadow(
0 0 90px rgba(255,150,0,.5)
);

}

}

/* ==========================================
   GUNUNGAN
========================================== */

.gunungan{

position:absolute;

bottom:0;

pointer-events:none;

user-select:none;

filter:

drop-shadow(
0 0 30px
rgba(255,120,0,.35)
);

}

.gunungan-left{

left:-30px;

bottom:-40px;

height:300px;

transform:
rotate(-35deg);

transform-origin:
bottom center;

animation: gununganLeftMove 8s ease-in-out infinite;
}

.gunungan-right{

right:-30px;

bottom:-40px;

height:300px;

transform:
rotate(35deg);

transform-origin:
bottom center;

animation: gununganRightMove 8s ease-in-out infinite;

}

@keyframes gununganLeftMove{

0%,100%{
transform:
rotate(-35deg)
translateY(0);
}

50%{
transform:
rotate(-35deg)
translateY(-10px);
}

}

@keyframes gununganRightMove{

0%,100%{
transform:
rotate(35deg)
translateY(0);
}

50%{
transform:
rotate(35deg)
translateY(-10px);
}

}

/* ==========================================
   HERO CONTENT
========================================== */

.hero-content{

position:relative;

z-index:10;

text-align:center;

max-width:1100px;

padding:0 20px;

top:300px;

}

/* ==========================================
   TITLE
========================================== */

.hero-content h1{

position:relative;

 font-family:
'Cinzel Decorative',
serif;

font-size:
clamp(38px,4.2vw,64px);

font-weight:700;

letter-spacing:3px;

line-height:1.15;

text-transform:uppercase;

color:#e7d3a2;

text-shadow:

0 0 8px rgba(0,0,0,.8),

0 0 18px rgba(255,180,90,.15),

0 0 40px rgba(255,120,40,.08);

animation: royalBreath 5s ease-in-out infinite;


}

@keyframes royalBreath{

0%,100%{

transform:
translateY(0)
scale(1);

text-shadow:

0 0 8px rgba(0,0,0,.8),
0 0 18px rgba(255,160,80,.12);

}

50%{

transform:
translateY(-3px)
scale(1.01);

text-shadow:

0 0 10px rgba(0,0,0,.9),
0 0 25px rgba(255,140,60,.18);

}

}


@keyframes titleBreath{

0%,100%{

transform:
scale(1);

}

50%{

transform:
scale(1.02);

}

}

/* ==========================================
   SUBTITLE
========================================== */

.hero-content p{

margin-top:20px;

font-size:18px;

line-height:1.8;

color:#ffd7c8;

text-shadow:
0 0 10px rgba(255,120,0,.3);

}

/* ==========================================
   DIVIDER
========================================== */

.hero-divider{

width:220px;

height:3px;

margin:30px auto;

border-radius:999px;

background:

linear-gradient(
90deg,
transparent,
#ff9900,
transparent
);

box-shadow:

0 0 15px #ff9900,

0 0 35px #ff6600;

}

/* ==========================================
   LOGO GROUP
========================================== */

.hero-logo-group{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

margin-top:80px;

}

/* ==========================================
   FLOWERS
========================================== */

.flower{

width:380px;

filter:

drop-shadow(
0 0 15px
rgba(255,200,0,.4)
);

}

.flower-left{

transform:rotate(30deg);



}

.flower-right{

transform:rotate(-30deg);



}

@keyframes flowerLeftFloat{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-8px);

}

}

@keyframes flowerRightFloat{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-8px);

}

}

/* ==========================================
   HERO LOGO
========================================== */

.hero-logo{

width:320px;

filter:

drop-shadow(
0 0 30px rgba(255,180,0,.8)
)

drop-shadow(
0 0 80px rgba(255,120,0,.4)
);

animation:
logoFloat 5s ease-in-out infinite;

}

@keyframes logoFloat{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-10px);

}

}
/* ==================================================
   ULTIMATE GOD TIER V4
   PART 2
   INPUT PANEL + KPI PREMIUM SYSTEM
================================================== */

/* ==========================================
   CONTAINER
========================================== */

.container{

position:relative;

z-index:20;

width:min(1400px,95%);

margin:0 auto;

padding-bottom:120px;

}

/* ==========================================
   PANEL SYSTEM
========================================== */

.panel{

position:relative;

overflow:hidden;

border-radius:28px;

padding:35px;

margin-bottom:40px;

background:

linear-gradient(
180deg,
rgba(40,0,0,.88),
rgba(10,0,0,.88)
);

backdrop-filter:
blur(18px);

border:
1px solid
rgba(255,180,0,.18);

box-shadow:

0 0 0 1px rgba(255,140,0,.08),

0 15px 60px rgba(0,0,0,.55),

0 0 60px rgba(255,60,0,.08);

}

/* Glow Border */

.panel::before{

content:"";

position:absolute;

inset:0;


background-size:cover;

background-position:center;

opacity:.20;

pointer-events:none;

mix-blend-mode:screen;

}

/* Sweep Effect */

.panel::after{

content:"";

position:absolute;

top:0;

left:-150%;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transform:skewX(-25deg);

animation:
panelSweep 8s linear infinite;

}

@keyframes panelSweep{

100%{

left:180%;

}

}

/* ==========================================
   PANEL HEADER
========================================== */

.panel-header{

position:relative;

text-align:center;

margin-bottom:35px;

}

.panel-input .panel-header h2{

position:relative;

display:inline-block;

font-family:
'Cinzel Decorative',
serif;

font-size:
clamp(24px,2vw,34px);

font-weight:700;

letter-spacing:5px;

text-transform:uppercase;

color:#d8c08b;

line-height:1.3;

padding:0 30px;

margin:0;

text-shadow:

0 0 2px rgba(0,0,0,.9),

0 0 15px rgba(212,170,88,.12);

}
.panel-input .panel-header h2::before,
.panel-input .panel-header h2::after{

content:"❖";

position:absolute;

top:50%;

transform:translateY(-50%);

font-size:14px;

color:rgba(212,170,88,.7);

}
.panel-input .panel-header h2::before{

left:0;

}
.panel-input .panel-header h2::after{

right:0;

}
.panel-input .panel-header{

position:relative;

text-align:center;

padding-bottom:25px;

margin-bottom:30px;

}
.panel-input .panel-header::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:220px;

height:2px;

background:

linear-gradient(
90deg,
transparent,
rgba(212,170,88,.9),
transparent
);

}

.panel-glow{

position:absolute;

top:-120px;

left:50%;

transform:translateX(-50%);

width:400px;

height:200px;

background:

radial-gradient(
circle,
rgba(212,170,88,.08),
transparent 70%
);

pointer-events:none;

}

/* ==========================================
   INPUT GRID
========================================== */

.input-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:25px;

}

/* ==========================================
   INPUT CARD
========================================== */

.input-card{

background:

linear-gradient(
180deg,
rgba(40,0,0,.75),
rgba(10,0,0,.85)
);

border:
1px solid rgba(255,180,90,.15);

box-shadow:

0 0 25px rgba(0,0,0,.5),

inset 0 0 30px rgba(255,120,40,.05);

border-radius:20px;

}

.input-card h3{

font-family:
'Cinzel Decorative',serif;

font-size:14px;

letter-spacing:2px;

color:#e7d3a2;

text-transform:uppercase;

text-shadow:
0 0 10px rgba(255,120,40,.2);

}
.input-card h3::after{

content:"";

display:block;

width:200px;

height:2px;

margin-top:8px;

background:
linear-gradient(
80deg,
transparent,
#ffb347,
transparent
);

}

/* ==========================================
   TEXTAREA
========================================== */

textarea{

width:100%;

height:280px;

padding:20px;

border-radius:18px;

background:

linear-gradient(
180deg,
rgba(20,0,0,.75),
rgba(0,0,0,.65)
);

border:
1px solid rgba(255,180,90,.25);

color:#e7d3a2;

font-family:
'Cormorant Garamond',serif;

font-size:15px;

letter-spacing:1px;

line-height:1.8;

box-shadow:

inset 0 0 25px rgba(0,0,0,.6),

0 0 25px rgba(255,120,40,.08);

backdrop-filter:blur(10px);

}
textarea:focus{

outline:none;

border:
1px solid rgba(255,180,90,.6);

box-shadow:

0 0 20px rgba(255,120,40,.25),

inset 0 0 30px rgba(0,0,0,.8);

}

textarea::placeholder{

color:
rgba(255,255,255,.35);

}

/* ==========================================
   BUTTONS
========================================== */

.button-row{

display:flex;

justify-content:center;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

border:none;

cursor:pointer;

font-weight:800;

letter-spacing:1px;

padding:

16px 34px;

border-radius:999px;

transition:.35s;

}

/* Primary */

.btn-primary{

position:relative;

overflow:hidden;

padding:16px 40px;

border:none;

border-radius:18px;

cursor:pointer;

font-family:
'Cinzel Decorative',
serif;

font-size:16px;

letter-spacing:2px;

text-transform:uppercase;

color:#e7d3a2;

background:

linear-gradient(
180deg,
#5a0d0d,
#240404
);

border:
1px solid rgba(212,170,88,.35);

box-shadow:

0 0 20px rgba(0,0,0,.5),

inset 0 0 12px rgba(212,170,88,.08);

transition:.35s;

}

.btn-primary:hover{

transform:
translateY(-3px);

border-color:
rgba(212,170,88,.7);

box-shadow:

0 0 25px rgba(212,170,88,.15),

0 0 40px rgba(255,120,40,.12);

}
.btn-primary::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

opacity:0;

transition:.4s;

}
.btn-primary:hover::before{

opacity:1;

}

/* Secondary */

.btn-secondary{

background:

linear-gradient(
180deg,
#2b2b2b,
#111
);

border:
1px solid rgba(180,180,180,.18);

color:#cfcfcf;

font-family:
'Cinzel Decorative',
serif;

}

.btn-secondary:hover{

border-color:
rgba(212,170,88,.45);

color:#e7d3a2;

}

/* ==========================================
   KPI GRID
========================================== */

.kpi-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:20px;

margin-bottom:40px;

}

/* ==========================================
   KPI CARD BASE
========================================== */

.kpi-card{

position:relative;

overflow:hidden;

min-height:180px;

padding:35px 25px;

display:flex;

flex-direction:column;

justify-content:center;


border-radius:22px;

backdrop-filter:blur(14px);

transition:.35s ease;

background:

linear-gradient(
180deg,
rgba(45,0,0,.92),
rgba(15,0,0,.95)
);

border:
1px solid rgba(212,170,88,.18);

box-shadow:

0 10px 35px rgba(0,0,0,.45),

inset 0 0 25px rgba(255,180,90,.04);

backdrop-filter:blur(10px);

transition:.35s ease;

}
.kpi-card::before{

content:"";

position:absolute;

inset:8px;

border:

1px solid rgba(212,170,88,.08);

border-radius:14px;

pointer-events:none;

}

.kpi-card:hover{

transform:
translateY(-5px);

box-shadow:

0 15px 40px rgba(0,0,0,.45),

0 0 20px rgba(212,170,88,.08);

}
.kpi-card::before{

content:"";

position:absolute;

inset:8px;

border:

1px solid rgba(212,170,88,.08);

border-radius:16px;

pointer-events:none;

}
.kpi-title{

font-family:
'Cinzel Decorative',
serif;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#cdb37b;

line-height:1.4;

text-align:center;

margin-bottom:14px;

word-break:break-word;

overflow-wrap:break-word;

}
.kpi-title::before{

content:"✦";

display:block;

font-size:12px;

margin-bottom:6px;

color:rgba(212,170,88,.55);

}

/* Label */

.kpi-card span{

display:block;

font-size:12px;

font-weight:800;

letter-spacing:1.5px;

margin-bottom:12px;

opacity:.9;

}

/* Value */

.kpi-card h2{

font-size:42px;

font-weight:900;

line-height:1;

}

/* ==========================================
   KPI RED
========================================== */

.kpi-crimson{

background:

linear-gradient(
180deg,
rgba(75,15,15,.92),
rgba(25,5,5,.96)
);

border:
1px solid rgba(180,90,90,.22);

box-shadow:

0 0 25px rgba(180,90,90,.08),

inset 0 0 20px rgba(220,120,120,.03);

}

.kpi-crimson h2{

color:#d6aaaa;

}

/* ==========================================
   KPI GREEN
========================================== */

.kpi-green{

background:

linear-gradient(
180deg,
rgba(35,55,25,.92),
rgba(10,20,10,.96)
);

border:
1px solid rgba(115,160,95,.25);

box-shadow:

0 0 25px rgba(115,160,95,.08),

inset 0 0 20px rgba(140,190,120,.03);

}

.kpi-green h2{

color:#b9cda4;

}

/* ==========================================
   KPI GOLD
========================================== */

..kpi-gold{

background:

linear-gradient(
180deg,
rgba(85,40,0,.92),
rgba(28,12,0,.96)
);

border:
1px solid rgba(212,170,88,.28);

box-shadow:

0 0 25px rgba(212,170,88,.08),

inset 0 0 20px rgba(255,210,120,.03);

}

.kpi-gold h2{

color:#d9c08c;

}

/* ==========================================
   KPI PURPLE
========================================== */

.kpi-purple{

background:

linear-gradient(
180deg,
rgba(55,20,65,.92),
rgba(18,5,25,.96)
);

border:
1px solid rgba(150,110,180,.22);

box-shadow:

0 0 25px rgba(150,110,180,.08),

inset 0 0 20px rgba(180,120,210,.03);

}

.kpi-purple h2{

color:#c8afd8;

}

/* ==========================================
   KPI BLUE
========================================== */

.kpi-blue{

background:

linear-gradient(
180deg,
rgba(18,40,65,.92),
rgba(5,15,25,.96)
);

border:
1px solid rgba(90,130,170,.22);

box-shadow:

0 0 25px rgba(90,130,170,.08),

inset 0 0 20px rgba(120,170,220,.03);

}

.kpi-blue h2{

color:#adc6db;

}

/* ==========================================
   KPI SHINE
========================================== */

.kpi-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transform:
skewX(-25deg);

animation:
kpiShine 7s linear infinite;

}

@keyframes kpiShine{

100%{

left:180%;

}

}
/* ==================================================
   ULTIMATE GOD TIER V4
   PART 3
   RESULT PANEL + FOOTER + RESPONSIVE
================================================== */

/* ==========================================
   RESULT GRID
========================================== */

.result-grid{

display:grid;

grid-template-columns:
repeat(2,minmax(0,1fr));

gap:25px;

margin-top:10px;

}

/* ==========================================
   RESULT CARD
========================================== */

.result-card{

position:relative;

overflow:hidden;

padding:22px;

border-radius:24px;

background:

linear-gradient(
180deg,
rgba(52,12,12,.97),
rgba(18,4,4,.99)
);

border:
1px solid rgba(212,170,88,.18);

box-shadow:

0 12px 35px rgba(0,0,0,.45);

backdrop-filter:blur(8px);

}
.result-card::before{

content:"";

position:absolute;

inset:10px;

border:

1px solid rgba(212,170,88,.08);

border-radius:18px;

pointer-events:none;

}
.result-card::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:

radial-gradient(
circle at top,
rgba(212,170,88,.05),
transparent 60%
);

pointer-events:none;

}



.result-item:hover{

background:

rgba(255,180,90,.06);

transform:translateX(6px);

}

/* Border Glow */



/* Shine */




/* ==========================================
   RESULT TITLE
========================================== */

.result-title{

position:relative;

display:flex;

align-items:center;
justify-content:center;

height:62px;

margin-bottom:18px;

font-family:'Cinzel Decorative',serif;

font-size:15px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:#d7b46a;

background:
linear-gradient(
180deg,
rgba(70,18,18,.95),
rgba(30,8,8,.98)
);

border:
1px solid rgba(212,170,88,.20);

border-radius:14px;

overflow:hidden;

}
.result-title::before,
.result-title::after{

content:"❖";

position:absolute;

top:50%;

transform:translateY(-50%);

font-size:12px;

color:rgba(212,170,88,.7);

}

.result-title::before{

left:18px;

}

.result-title::after{

right:18px;

}
.result-title::before{

top:0;

}
.result-title::after{

bottom:0;

}

/* ==========================================
   RESULT LIST
========================================== */

.result-list{

min-height:240px;

max-height:500px;

overflow-y:auto;

padding:15px;

background:
rgba(0,0,0,.12);

border-radius:18px;

border:
1px solid rgba(212,170,88,.08);

}

/* Scrollbar */

.result-list::-webkit-scrollbar{

width:8px;

}

.result-list::-webkit-scrollbar-track{

background:
rgba(255,255,255,.04);

border-radius:999px;

}

.result-list::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#ff5500,
#ffb300
);

border-radius:999px;

}



/* ==========================================
   ROYAL USER BOARD
========================================== */

.royal-user{

position:relative;

display:flex;

align-items:center;
justify-content:center;

min-height:38px;

padding:8px 16px;

margin-bottom:8px;

border-radius:10px;

background:

linear-gradient(
180deg,
#6a2417,
#35100d
);

border:
1px solid rgba(212,170,88,.18);

box-shadow:

0 2px 8px rgba(0,0,0,.20),

inset 0 1px 0 rgba(255,220,150,.05);

overflow:hidden;

}
.royal-user::before{

content:"❖";

position:absolute;

left:14px;

color:#d4aa58;

font-size:12px;

}

.royal-user::after{

content:"❖";

position:absolute;

right:14px;

color:#d4aa58;

font-size:12px;

}
.royal-user-name{

font-family:
'Marcellus',
serif;

font-size:13px;

font-weight:600;

letter-spacing:.5px;

color:#e4c98a !important;

line-height:1;

}
.royal-user::before,
.royal-user::after{

font-size:9px;

color:#d4aa58;

}

/* ==========================================
   FOOTER
========================================== */

.footer{

    position:relative;
    overflow:hidden;

}

#embersCanvas{

position:absolute;

inset:0;

width:100%;
height:100%;

z-index:2;

pointer-events:none;

}

.footer-ornament{

position:relative;

z-index:10;

filter:none;

}

@keyframes royalFire{

0%,100%{

opacity:.4;
transform:
translateX(-50%)
scale(1);

}

50%{

opacity:.8;
transform:
translateX(-50%)
scale(1.15);

}

}

/* Ornament */

.footer-ornament{

position:relative;

z-index:10;

width:100%;
height:auto;

max-width:1600px;

display:block;

margin:0;

padding:0;

vertical-align:bottom;

opacity:.95;

filter:

drop-shadow(
0 0 25px
rgba(255,180,0,.25)
);

}


/* Footer Content */

.footer-content{

margin-top:-120px;

position:relative;

z-index:10;

}

.footer-content h3{

font-size:48px;

font-weight:900;

letter-spacing:2px;

text-transform:uppercase;

color:#fff;

text-shadow:

0 0 15px #ff5500,

0 0 35px rgba(255,120,0,.35);

}

.footer-content p{

margin-top:10px;

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

color:

rgba(255,255,255,.65);

}
.royal-footer{

position:relative;

overflow:hidden;

}

@keyframes firePulse{

0%,100%{

opacity:.6;

transform:
translateX(-50%)
scale(1);

}

50%{

opacity:1;

transform:
translateX(-50%)
scale(1.15);

}

}

@keyframes fireMove{

0%{

transform:
translateX(0);

}

50%{

transform:
translateX(20px);

}

100%{

transform:
translateX(0);

}

}
.footer-embers{

position:absolute;

inset:0;

z-index:3;

pointer-events:none;

opacity:.35;

}
@keyframes embersFloat{

from{

transform:
translateY(0);

}

to{

transform:
translateY(-150px);

}

}

@keyframes heatWave{

0%,100%{

transform:
scaleX(1);

}

50%{

transform:
scaleX(1.03);

}

}

@keyframes sweep{

from{

transform:
translateX(-30%);

}

to{

transform:
translateX(30%);

}

}

/* ==========================================
   FLOATING GLOW ORBS
========================================== */

body::before{

content:"";

position:fixed;

width:500px;
height:500px;

left:-250px;
top:20%;

background:

radial-gradient(
circle,
rgba(255,50,0,.10),
transparent 70%
);

pointer-events:none;

z-index:-5;

animation:
orbLeft 14s ease-in-out infinite;

}

body::after{

content:"";

position:fixed;

width:450px;
height:450px;

right:-220px;
bottom:10%;

background:

radial-gradient(
circle,
rgba(255,180,0,.08),
transparent 70%
);

pointer-events:none;

z-index:-5;

animation:
orbRight 18s ease-in-out infinite;

}

@keyframes orbLeft{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-40px);

}

}

@keyframes orbRight{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(40px);

}

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1200px){

.kpi-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:22px;

}

}

@media (max-width:992px){

.hero{

height:auto;

padding-top:180px;

padding-bottom:120px;

}

.gunungan-left,
.gunungan-right{

height:340px;

opacity:.55;

}

.input-grid{

grid-template-columns:
1fr;

}

.result-grid{

grid-template-columns:
1fr;

}

.kpi-grid{

grid-template-columns:
repeat(2,1fr);

}

.hero-content h1{

font-size:52px;

}

}

@media (max-width:768px){

.hero{

padding-top:140px;

}

.ornament-left,
.ornament-right{

width:160px;

}

.ornament-center{

width:220px;

}

.gunungan-left,
.gunungan-right{

height:250px;

opacity:.35;

}

.hero-logo{

width:100px;

}

.flower{

width:80px;

}

.panel{

padding:20px;

}

textarea{

height:220px;

}

.kpi-grid{

grid-template-columns:
1fr;

}

.hero-content h1{

font-size:38px;

line-height:1.15;

}

.hero-content p{

font-size:15px;

}

.footer-content h3{

font-size:22px;

}

}

@media (max-width:480px){

.hero-logo-group{

gap:8px;

}

.flower{

width:60px;

}

.hero-logo{

width:80px;

}

.hero-content h1{

font-size:30px;

}

.panel-header h2{

font-size:26px;

}

.result-title{

font-size:15px;

}

}
img{
max-width:100%;
display:block;
}
.typewriter-text{

font-family:'Cormorant Garamond',serif;

font-size:18px;

line-height:1.8;

color:#e7d3a2;

text-align:center;

min-height:60px;

}