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

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

html {
    scroll-behavior: auto;
}

:root {
    /* ---- Deep-space palette ---- */
    --space-black: #05060f;
    --space-navy: #0a0e27;
    --space-indigo: #140b33;
    --space-violet: #2a1458;
    --space-magenta: #3a1245;

    --bg-gradient:
        radial-gradient(ellipse 80% 60% at 15% -10%, rgba(76, 41, 158, 0.55), transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 10%, rgba(30, 64, 175, 0.35), transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(76, 15, 89, 0.4), transparent 60%),
        linear-gradient(180deg, var(--space-black) 0%, var(--space-navy) 45%, var(--space-indigo) 100%);

    --blue: #2563eb;
    --blue-hover: #1d4ed8;
    --button-blue: #2864dc;

    --purple: #4f46e5;
    --purple-dark: #4134d4;

    --white: #ffffff;
    --text-dark: #111827;
    --text-gray: #64748b;
    --text-light: #cbd5e1;
}

body {
    min-height: 100vh;
    position: relative;

    background: var(--bg-gradient);
    background-attachment: fixed;
    background-size: cover;

    font-family: sans-serif;

    overflow-x: hidden;
}


/* =========================================================
   FONT
========================================================= */

@font-face {
    font-family: "Garet";
    src: url("fonts/Garet-Heavy.otf")
        format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Cera";
    src: url("fonts/cera-pro-black.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

/* =========================================================
   SPACE BACKGROUND — nebula + starfield + shooting stars
========================================================= */

.space-bg {
    position: fixed;
    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


/* ---- Nebula glows (soft drifting color clouds) ---- */

.nebula-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.55;

    will-change: transform;
}

.nebula-glow-1 {
    top: -10%;
    left: -8%;

    width: 50vw;
    height: 50vw;

    background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 70%);

    animation: nebulaDrift1 40s ease-in-out infinite;
}

.nebula-glow-2 {
    top: 40%;
    right: -12%;

    width: 45vw;
    height: 45vw;

    background: radial-gradient(circle, rgba(37, 99, 235, 0.45), transparent 70%);

    animation: nebulaDrift2 50s ease-in-out infinite;
}

.nebula-glow-3 {
    bottom: -15%;
    left: 30%;

    width: 55vw;
    height: 55vw;

    background: radial-gradient(circle, rgba(190, 24, 93, 0.35), transparent 70%);

    animation: nebulaDrift3 60s ease-in-out infinite;
}

@keyframes nebulaDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4vw, 3vh) scale(1.1); }
}

@keyframes nebulaDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, 4vh) scale(1.08); }
}

@keyframes nebulaDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3vw, -4vh) scale(1.12); }
}


/* ---- Starfield layers (generated star positions) ---- */

#stars-small {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1309px 228px #FFF, 51px 1518px #FFF, 563px 501px #FFF, 457px 285px #FFF, 1508px 209px #FFF, 1385px 1516px #FFF, 1827px 1116px #FFF, 178px 1209px #FFF, 864px 65px #FFF, 61px 191px #FFF, 447px 476px #FFF, 1034px 1232px #FFF, 54px 1149px #FFF, 407px 1466px #FFF, 1330px 1436px #FFF, 1116px 859px #FFF, 451px 919px #FFF, 1206px 569px #FFF, 1657px 1780px #FFF, 13px 1554px #FFF, 1650px 326px #FFF, 1429px 865px #FFF, 696px 569px #FFF, 318px 440px #FFF, 1960px 1563px #FFF, 689px 209px #FFF, 189px 778px #FFF, 198px 735px #FFF, 1735px 704px #FFF, 1236px 541px #FFF, 1652px 88px #FFF, 1494px 940px #FFF, 1098px 255px #FFF, 1992px 1888px #FFF, 775px 161px #FFF, 1130px 600px #FFF, 1698px 1287px #FFF, 1266px 1813px #FFF, 1764px 740px #FFF, 1182px 393px #FFF, 1442px 142px #FFF, 93px 1354px #FFF, 466px 1583px #FFF, 592px 163px #FFF, 1751px 476px #FFF, 1774px 206px #FFF, 778px 569px #FFF, 928px 1301px #FFF, 1708px 747px #FFF, 333px 758px #FFF, 727px 429px #FFF, 1372px 546px #FFF, 1437px 1918px #FFF, 1399px 1327px #FFF, 146px 1247px #FFF, 1300px 350px #FFF, 1093px 1493px #FFF, 501px 334px #FFF, 946px 777px #FFF, 552px 1895px #FFF, 1310px 1409px #FFF, 1140px 449px #FFF, 1402px 664px #FFF, 1726px 1573px #FFF, 1589px 114px #FFF, 469px 1683px #FFF, 65px 1648px #FFF, 646px 821px #FFF, 548px 135px #FFF, 432px 1870px #FFF, 1931px 1161px #FFF, 1794px 1470px #FFF, 644px 435px #FFF, 1342px 1022px #FFF, 810px 1811px #FFF, 1872px 1316px #FFF, 939px 292px #FFF, 542px 285px #FFF, 505px 1525px #FFF, 1149px 1103px #FFF, 538px 1529px #FFF, 1197px 877px #FFF, 1838px 1195px #FFF, 817px 741px #FFF, 449px 283px #FFF, 1043px 1010px #FFF, 186px 1547px #FFF, 96px 1763px #FFF, 224px 313px #FFF, 1285px 327px #FFF, 1622px 1393px #FFF, 864px 1221px #FFF, 130px 788px #FFF, 781px 1220px #FFF, 958px 1083px #FFF, 514px 1988px #FFF, 1133px 1762px #FFF, 1930px 23px #FFF, 1393px 1476px #FFF, 234px 1396px #FFF, 1812px 1099px #FFF, 1537px 546px #FFF, 1574px 1312px #FFF, 696px 228px #FFF, 601px 890px #FFF, 323px 929px #FFF, 6px 1953px #FFF, 1478px 1793px #FFF, 1473px 539px #FFF, 1990px 1025px #FFF, 1560px 365px #FFF, 1039px 1869px #FFF, 217px 1782px #FFF, 1280px 611px #FFF, 1723px 1308px #FFF, 1039px 1247px #FFF, 407px 313px #FFF, 765px 1561px #FFF, 330px 1104px #FFF, 1952px 1594px #FFF, 1889px 1086px #FFF, 1881px 1px #FFF, 1226px 663px #FFF, 1000px 39px #FFF, 229px 1902px #FFF, 743px 1799px #FFF, 1703px 1652px #FFF, 629px 490px #FFF, 118px 493px #FFF, 1798px 1161px #FFF, 1939px 161px #FFF, 175px 1498px #FFF, 995px 1671px #FFF, 141px 1557px #FFF, 1090px 1568px #FFF, 257px 262px #FFF, 1351px 973px #FFF, 1939px 1125px #FFF, 338px 542px #FFF, 1080px 1786px #FFF, 1242px 866px #FFF, 1975px 433px #FFF, 1902px 1104px #FFF, 1546px 1494px #FFF, 1412px 411px #FFF, 1460px 638px #FFF, 817px 1375px #FFF, 1330px 764px #FFF, 897px 1842px #FFF, 1059px 924px #FFF, 247px 507px #FFF, 460px 131px #FFF, 692px 43px #FFF, 1204px 1134px #FFF, 471px 1205px #FFF, 451px 14px #FFF, 145px 1449px #FFF, 1292px 120px #FFF, 468px 138px #FFF, 1854px 64px #FFF, 1760px 676px #FFF, 145px 1052px #FFF, 487px 570px #FFF, 1370px 994px #FFF, 438px 1104px #FFF, 270px 1481px #FFF, 1915px 1807px #FFF, 1169px 1180px #FFF, 968px 497px #FFF, 1606px 968px #FFF, 1653px 833px #FFF, 389px 193px #FFF, 198px 1349px #FFF, 882px 725px #FFF, 867px 841px #FFF, 956px 1769px #FFF, 1493px 110px #FFF, 1379px 1338px #FFF, 1323px 201px #FFF, 124px 824px #FFF;
    animation: none;
}

#stars-small::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1309px 228px #FFF, 51px 1518px #FFF, 563px 501px #FFF, 457px 285px #FFF, 1508px 209px #FFF, 1385px 1516px #FFF, 1827px 1116px #FFF, 178px 1209px #FFF, 864px 65px #FFF, 61px 191px #FFF, 447px 476px #FFF, 1034px 1232px #FFF, 54px 1149px #FFF, 407px 1466px #FFF, 1330px 1436px #FFF, 1116px 859px #FFF, 451px 919px #FFF, 1206px 569px #FFF, 1657px 1780px #FFF, 13px 1554px #FFF, 1650px 326px #FFF, 1429px 865px #FFF, 696px 569px #FFF, 318px 440px #FFF, 1960px 1563px #FFF, 689px 209px #FFF, 189px 778px #FFF, 198px 735px #FFF, 1735px 704px #FFF, 1236px 541px #FFF, 1652px 88px #FFF, 1494px 940px #FFF, 1098px 255px #FFF, 1992px 1888px #FFF, 775px 161px #FFF, 1130px 600px #FFF, 1698px 1287px #FFF, 1266px 1813px #FFF, 1764px 740px #FFF, 1182px 393px #FFF, 1442px 142px #FFF, 93px 1354px #FFF, 466px 1583px #FFF, 592px 163px #FFF, 1751px 476px #FFF, 1774px 206px #FFF, 778px 569px #FFF, 928px 1301px #FFF, 1708px 747px #FFF, 333px 758px #FFF, 727px 429px #FFF, 1372px 546px #FFF, 1437px 1918px #FFF, 1399px 1327px #FFF, 146px 1247px #FFF, 1300px 350px #FFF, 1093px 1493px #FFF, 501px 334px #FFF, 946px 777px #FFF, 552px 1895px #FFF, 1310px 1409px #FFF, 1140px 449px #FFF, 1402px 664px #FFF, 1726px 1573px #FFF, 1589px 114px #FFF, 469px 1683px #FFF, 65px 1648px #FFF, 646px 821px #FFF, 548px 135px #FFF, 432px 1870px #FFF, 1931px 1161px #FFF, 1794px 1470px #FFF, 644px 435px #FFF, 1342px 1022px #FFF, 810px 1811px #FFF, 1872px 1316px #FFF, 939px 292px #FFF, 542px 285px #FFF, 505px 1525px #FFF, 1149px 1103px #FFF, 538px 1529px #FFF, 1197px 877px #FFF, 1838px 1195px #FFF, 817px 741px #FFF, 449px 283px #FFF, 1043px 1010px #FFF, 186px 1547px #FFF, 96px 1763px #FFF, 224px 313px #FFF, 1285px 327px #FFF, 1622px 1393px #FFF, 864px 1221px #FFF, 130px 788px #FFF, 781px 1220px #FFF, 958px 1083px #FFF, 514px 1988px #FFF, 1133px 1762px #FFF, 1930px 23px #FFF, 1393px 1476px #FFF, 234px 1396px #FFF, 1812px 1099px #FFF, 1537px 546px #FFF, 1574px 1312px #FFF, 696px 228px #FFF, 601px 890px #FFF, 323px 929px #FFF, 6px 1953px #FFF, 1478px 1793px #FFF, 1473px 539px #FFF, 1990px 1025px #FFF, 1560px 365px #FFF, 1039px 1869px #FFF, 217px 1782px #FFF, 1280px 611px #FFF, 1723px 1308px #FFF, 1039px 1247px #FFF, 407px 313px #FFF, 765px 1561px #FFF, 330px 1104px #FFF, 1952px 1594px #FFF, 1889px 1086px #FFF, 1881px 1px #FFF, 1226px 663px #FFF, 1000px 39px #FFF, 229px 1902px #FFF, 743px 1799px #FFF, 1703px 1652px #FFF, 629px 490px #FFF, 118px 493px #FFF, 1798px 1161px #FFF, 1939px 161px #FFF, 175px 1498px #FFF, 995px 1671px #FFF, 141px 1557px #FFF, 1090px 1568px #FFF, 257px 262px #FFF, 1351px 973px #FFF, 1939px 1125px #FFF, 338px 542px #FFF, 1080px 1786px #FFF, 1242px 866px #FFF, 1975px 433px #FFF, 1902px 1104px #FFF, 1546px 1494px #FFF, 1412px 411px #FFF, 1460px 638px #FFF, 817px 1375px #FFF, 1330px 764px #FFF, 897px 1842px #FFF, 1059px 924px #FFF, 247px 507px #FFF, 460px 131px #FFF, 692px 43px #FFF, 1204px 1134px #FFF, 471px 1205px #FFF, 451px 14px #FFF, 145px 1449px #FFF, 1292px 120px #FFF, 468px 138px #FFF, 1854px 64px #FFF, 1760px 676px #FFF, 145px 1052px #FFF, 487px 570px #FFF, 1370px 994px #FFF, 438px 1104px #FFF, 270px 1481px #FFF, 1915px 1807px #FFF, 1169px 1180px #FFF, 968px 497px #FFF, 1606px 968px #FFF, 1653px 833px #FFF, 389px 193px #FFF, 198px 1349px #FFF, 882px 725px #FFF, 867px 841px #FFF, 956px 1769px #FFF, 1493px 110px #FFF, 1379px 1338px #FFF, 1323px 201px #FFF, 124px 824px #FFF;
}

#stars-medium {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1491px 694px #FFF, 1639px 1764px #FFF, 223px 509px #FFF, 392px 389px #FFF, 1098px 918px #FFF, 287px 864px #FFF, 375px 570px #FFF, 947px 511px #FFF, 1790px 1890px #FFF, 154px 907px #FFF, 1654px 1764px #FFF, 1753px 1127px #FFF, 200px 103px #FFF, 1335px 1107px #FFF, 1712px 30px #FFF, 1984px 191px #FFF, 1897px 1543px #FFF, 1738px 484px #FFF, 340px 832px #FFF, 994px 985px #FFF, 437px 1770px #FFF, 821px 1848px #FFF, 120px 337px #FFF, 776px 4px #FFF, 799px 543px #FFF, 1897px 1605px #FFF, 1607px 931px #FFF, 584px 866px #FFF, 1426px 1960px #FFF, 1496px 1604px #FFF, 1138px 1355px #FFF, 1471px 996px #FFF, 317px 388px #FFF, 607px 445px #FFF, 1983px 119px #FFF, 1186px 1506px #FFF, 1110px 124px #FFF, 1531px 642px #FFF, 117px 102px #FFF, 1196px 976px #FFF, 1029px 1882px #FFF, 1746px 1087px #FFF, 322px 116px #FFF, 1967px 1040px #FFF, 164px 1743px #FFF, 380px 140px #FFF, 1218px 139px #FFF, 1382px 1765px #FFF, 481px 826px #FFF, 245px 1928px #FFF, 1823px 1166px #FFF, 504px 1185px #FFF, 1217px 81px #FFF, 1268px 167px #FFF, 858px 1346px #FFF, 1195px 1157px #FFF, 1070px 647px #FFF, 1914px 534px #FFF, 418px 1371px #FFF, 1466px 643px #FFF, 488px 543px #FFF, 810px 268px #FFF, 1375px 1321px #FFF, 614px 936px #FFF, 647px 1902px #FFF, 1539px 1916px #FFF, 148px 19px #FFF, 938px 1272px #FFF, 1153px 204px #FFF, 150px 1101px #FFF, 436px 1036px #FFF, 543px 271px #FFF, 1911px 714px #FFF, 1804px 140px #FFF, 1800px 500px #FFF, 756px 583px #FFF, 323px 897px #FFF, 1707px 1112px #FFF, 1440px 619px #FFF, 1252px 1652px #FFF, 1339px 1083px #FFF, 16px 1367px #FFF, 1673px 1135px #FFF, 613px 1908px #FFF, 1358px 212px #FFF, 1922px 1798px #FFF, 275px 541px #FFF, 236px 1822px #FFF, 219px 1520px #FFF, 1133px 318px #FFF, 557px 577px #FFF, 1238px 431px #FFF, 1469px 702px #FFF, 416px 1407px #FFF, 1298px 1746px #FFF, 540px 1035px #FFF, 1000px 514px #FFF, 1854px 1859px #FFF, 1732px 104px #FFF, 189px 1299px #FFF;
    animation: none;
}

#stars-medium::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1491px 694px #FFF, 1639px 1764px #FFF, 223px 509px #FFF, 392px 389px #FFF, 1098px 918px #FFF, 287px 864px #FFF, 375px 570px #FFF, 947px 511px #FFF, 1790px 1890px #FFF, 154px 907px #FFF, 1654px 1764px #FFF, 1753px 1127px #FFF, 200px 103px #FFF, 1335px 1107px #FFF, 1712px 30px #FFF, 1984px 191px #FFF, 1897px 1543px #FFF, 1738px 484px #FFF, 340px 832px #FFF, 994px 985px #FFF, 437px 1770px #FFF, 821px 1848px #FFF, 120px 337px #FFF, 776px 4px #FFF, 799px 543px #FFF, 1897px 1605px #FFF, 1607px 931px #FFF, 584px 866px #FFF, 1426px 1960px #FFF, 1496px 1604px #FFF, 1138px 1355px #FFF, 1471px 996px #FFF, 317px 388px #FFF, 607px 445px #FFF, 1983px 119px #FFF, 1186px 1506px #FFF, 1110px 124px #FFF, 1531px 642px #FFF, 117px 102px #FFF, 1196px 976px #FFF, 1029px 1882px #FFF, 1746px 1087px #FFF, 322px 116px #FFF, 1967px 1040px #FFF, 164px 1743px #FFF, 380px 140px #FFF, 1218px 139px #FFF, 1382px 1765px #FFF, 481px 826px #FFF, 245px 1928px #FFF, 1823px 1166px #FFF, 504px 1185px #FFF, 1217px 81px #FFF, 1268px 167px #FFF, 858px 1346px #FFF, 1195px 1157px #FFF, 1070px 647px #FFF, 1914px 534px #FFF, 418px 1371px #FFF, 1466px 643px #FFF, 488px 543px #FFF, 810px 268px #FFF, 1375px 1321px #FFF, 614px 936px #FFF, 647px 1902px #FFF, 1539px 1916px #FFF, 148px 19px #FFF, 938px 1272px #FFF, 1153px 204px #FFF, 150px 1101px #FFF, 436px 1036px #FFF, 543px 271px #FFF, 1911px 714px #FFF, 1804px 140px #FFF, 1800px 500px #FFF, 756px 583px #FFF, 323px 897px #FFF, 1707px 1112px #FFF, 1440px 619px #FFF, 1252px 1652px #FFF, 1339px 1083px #FFF, 16px 1367px #FFF, 1673px 1135px #FFF, 613px 1908px #FFF, 1358px 212px #FFF, 1922px 1798px #FFF, 275px 541px #FFF, 236px 1822px #FFF, 219px 1520px #FFF, 1133px 318px #FFF, 557px 577px #FFF, 1238px 431px #FFF, 1469px 702px #FFF, 416px 1407px #FFF, 1298px 1746px #FFF, 540px 1035px #FFF, 1000px 514px #FFF, 1854px 1859px #FFF, 1732px 104px #FFF, 189px 1299px #FFF;
}

#stars-large {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 867px 1698px #FFF, 566px 90px #FFF, 7px 683px #FFF, 1579px 267px #FFF, 1304px 536px #FFF, 330px 1518px #FFF, 904px 1129px #FFF, 1445px 875px #FFF, 1148px 19px #FFF, 229px 154px #FFF, 1935px 1808px #FFF, 1415px 1851px #FFF, 305px 1117px #FFF, 73px 1709px #FFF, 756px 1192px #FFF, 1131px 303px #FFF, 880px 261px #FFF, 85px 631px #FFF, 746px 1841px #FFF, 1910px 1630px #FFF, 1991px 1762px #FFF, 81px 1840px #FFF, 732px 430px #FFF, 1396px 511px #FFF, 1365px 210px #FFF, 724px 1597px #FFF, 1146px 1810px #FFF, 1791px 832px #FFF, 1994px 1271px #FFF, 1534px 316px #FFF, 1895px 1904px #FFF, 484px 1770px #FFF, 332px 1999px #FFF, 1638px 1660px #FFF, 362px 1805px #FFF, 844px 50px #FFF, 367px 1508px #FFF, 1893px 680px #FFF, 1602px 1906px #FFF, 843px 1642px #FFF, 1371px 1769px #FFF, 1505px 1660px #FFF, 508px 546px #FFF, 326px 1612px #FFF, 1436px 221px #FFF, 783px 1786px #FFF, 79px 1758px #FFF, 963px 455px #FFF, 408px 1672px #FFF, 1880px 942px #FFF;
    animation: none;
    animation-duration: 80s, 4s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

#stars-large::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 867px 1698px #FFF, 566px 90px #FFF, 7px 683px #FFF, 1579px 267px #FFF, 1304px 536px #FFF, 330px 1518px #FFF, 904px 1129px #FFF, 1445px 875px #FFF, 1148px 19px #FFF, 229px 154px #FFF, 1935px 1808px #FFF, 1415px 1851px #FFF, 305px 1117px #FFF, 73px 1709px #FFF, 756px 1192px #FFF, 1131px 303px #FFF, 880px 261px #FFF, 85px 631px #FFF, 746px 1841px #FFF, 1910px 1630px #FFF, 1991px 1762px #FFF, 81px 1840px #FFF, 732px 430px #FFF, 1396px 511px #FFF, 1365px 210px #FFF, 724px 1597px #FFF, 1146px 1810px #FFF, 1791px 832px #FFF, 1994px 1271px #FFF, 1534px 316px #FFF, 1895px 1904px #FFF, 484px 1770px #FFF, 332px 1999px #FFF, 1638px 1660px #FFF, 362px 1805px #FFF, 844px 50px #FFF, 367px 1508px #FFF, 1893px 680px #FFF, 1602px 1906px #FFF, 843px 1642px #FFF, 1371px 1769px #FFF, 1505px 1660px #FFF, 508px 546px #FFF, 326px 1612px #FFF, 1436px 221px #FFF, 783px 1786px #FFF, 79px 1758px #FFF, 963px 455px #FFF, 408px 1672px #FFF, 1880px 942px #FFF;
}

@keyframes animStarSmall {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

@keyframes animStarMedium {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

@keyframes animStarLarge {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

@keyframes animTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}


/* ---- Shooting stars ---- */

.shooting-star {
    position: absolute;

    width: 2px;
    height: 2px;

    background: white;
    border-radius: 50%;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 8px 2px rgba(255, 255, 255, 0.6);

    opacity: 0;
}

.shooting-star::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 130px;
    height: 1px;

    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);

    transform: translateY(-50%);
}

.shooting-star-1 {
    top: 12%;
    left: 15%;

    animation: none;
    animation-delay: 1s;
}

.shooting-star-2 {
    top: 32%;
    left: 65%;

    animation: none;
    animation-delay: 4s;
}

@keyframes shoot {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-35deg);
    }
    2% {
        opacity: 1;
    }
    12% {
        opacity: 0;
        transform: translate(320px, 220px) rotate(-35deg);
    }
    100% {
        opacity: 0;
        transform: translate(320px, 220px) rotate(-35deg);
    }
}

/* ---- Planet (mengambang naik-turun) ---- */

.planet {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform;
}

.planet-1 {
    top: 14%;
    right: 8%;

    width: 90px;
    height: 90px;

    background: radial-gradient(circle at 35% 30%, #c4b5fd, #7c3aed 55%, #2e1065 100%);

    box-shadow:
        inset -14px -14px 26px rgba(0, 0, 0, 0.55),
        0 0 45px rgba(124, 58, 237, 0.5);

    animation: none;
}

.planet-2 {
    top: 55%;
    left: 6%;

    width: 54px;
    height: 54px;

    background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626 55%, #450a0a 100%);

    box-shadow:
        inset -9px -9px 18px rgba(0, 0, 0, 0.55),
        0 0 32px rgba(220, 38, 38, 0.45);

    animation: none;
}

.planet-3 {
    top: 78%;
    right: 16%;

    width: 42px;
    height: 42px;

    background: radial-gradient(circle at 35% 30%, #7dd3fc, #0369a1 55%, #082f49 100%);

    box-shadow:
        inset -7px -7px 14px rgba(0, 0, 0, 0.55),
        0 0 26px rgba(14, 165, 233, 0.45);

    animation: none;
}

/* CINCIN PLANET-3 */
.planet-3::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 150%;
    height: 24%;

    border: 2px solid rgba(226, 232, 240, 0.5);
    border-radius: 50%;

    transform: translate(-50%, -50%) rotate(-20deg);
}

@keyframes planetFloat1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25px); }
}

@keyframes planetFloat2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}

@keyframes planetFloat3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}


@media (prefers-reduced-motion: reduce) {

    #stars-small,
    #stars-medium,
    #stars-large,
    .nebula-glow,
    .shooting-star,
    .planet {
        animation: none !important;
    }

}


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

@media screen and (max-width: 768px) {

    .planet-1 {
        width: 60px;
        height: 60px;
    }

    .planet-2 {
        width: 38px;
        height: 38px;
    }

    .planet-3 {
        display: none;
    }

}


/* =========================================================
   NAVBAR
========================================================= */

nav {
    height: 64px;
    padding: 0 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(6, 9, 26, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    position: sticky;
    top: 0;
    z-index: 100;

    transition:
        background 0.3s ease,
        backdrop-filter 0.3s ease,
        box-shadow 0.3s ease;
}

nav.scrolled {
    background: rgba(8, 11, 32, 0.85);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}


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

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 155px;
    height: auto;
    display: block;
}

/* =========================================================
   HAMBURGER MOBILE
========================================================= */

.menu-toggle {
    display: none;
    width: 42px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   NAVIGATION MENU
========================================================= */

.ul-navbar {
    display: flex;
    align-items: center;
    gap: 28px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.li-navbar {
    list-style: none;
}

.a-navbar {
    position: relative;

    display: block;

    padding: 10px 0;

    color: white;
    text-decoration: none;

    font-family: "Cera", sans-serif;
    font-size: 18px;

    transition: color 0.3s ease;
}


/* =========================================================
   NAVBAR HOVER
========================================================= */

.a-navbar:hover {
    color: #2864dc;
}


/* =========================================================
   GARIS BAWAH NAVBAR
========================================================= */

.a-navbar::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #2864dc;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.4s ease;
}

.a-navbar:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   ACTIVE NAVBAR
========================================================= */

.a-navbar.active {
    color: #2864dc;
}

.a-navbar.active::after {
    transform: scaleX(1);
}


/* =========================================================
   BERANDA / CONTENT
========================================================= */

.content {
    width: 100%;
    min-height: 90vh;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 70px 100px;

    background: transparent;

    scroll-margin-top: 80px;
}


/* =========================================================
   TEKS BERANDA
========================================================= */

.typing {
    width: 50%;
    margin-left: 30px;

    color: #2864dc;

    font-family: "Garet", sans-serif;
    font-size: 50px;
}

.p-text {
    margin-bottom: 15px;

    color: white;

    font-family: "Garet", sans-serif;
    font-size: 65px;
    line-height: 1.1;
}


/* =========================================================
   TYPING TEXT
========================================================= */

#text {
    color: #2864dc;
}

.cursor {
    color: #4da6ff;
    animation: blink 0.7s infinite;
}


/* =========================================================
   ANIMASI CURSOR
========================================================= */

@keyframes blink {
    50% {
        opacity: 0;
    }
}


/* =========================================================
   MOTIVASI
========================================================= */

.motivasi {
    margin-top: 20px;

    color: white;

    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.7;

    opacity: 0.7;
}


/* =========================================================
   BUTTON GROUP
========================================================= */

.button-group {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 30px;
}


/* =========================================================
   BUTTON
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 58px;
    padding: 0 28px;

    border-radius: 30px;

    font-family: "Garet", sans-serif;
    font-size: 15px;
    font-weight: normal;

    text-decoration: none;

    transition: all 0.3s ease;
}


/* =========================================================
   BUTTON PRIMARY
========================================================= */

.btn-primary {
    color: white;
    background: #2864dc;

    box-shadow:
        0 8px 20px rgba(40, 100, 220, 0.35);
}

.btn-primary:hover {
    background: #1f55c5;
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(40, 100, 220, 0.45);
}


/* =========================================================
   PANAH BUTTON
========================================================= */

.arrow {
    margin-left: 10px;

    font-size: 24px;

    transition: transform 0.3s ease;
}

.btn-primary:hover .arrow {
    transform: translateX(5px);
}


/* =========================================================
   BUTTON SECONDARY
========================================================= */

.btn-secondary {
    color: #7fb2ff;
    background: transparent;

    border: 2px solid #4a7fd6;
}

.btn-secondary:hover {
    color: white;
    background: #2864b9;

    transform: translateY(-3px);
}


/* =========================================================
   GAMBAR BERANDA
========================================================= */

.img-info {
    width: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.satelit {
    width: 530px;
    max-width: 100%;
    height: auto;

    margin-right: 20px;

    border-radius: 80px;

    display: block;

    box-shadow:
        0 0 60px rgba(124, 58, 237, 0.35),
        0 0 120px rgba(37, 99, 235, 0.2);

    animation: float 4s ease-in-out infinite;
}


/* =========================================================
   ANIMASI GAMBAR
========================================================= */

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}


/* =========================================================
   TENTANG KELAS
========================================================= */

.tentang-section {
    width: 100%;
    min-height: 100vh;

    padding: 100px 7%;

    background: transparent;

    color: #111827;

    scroll-margin-top: 80px;
}


/* =========================================================
   HEADER TENTANG
========================================================= */

.tentang-header {
    margin-bottom: 60px;
    text-align: center;
}

.tentang-header h1 {
    margin-bottom: 15px;

    color: white;

    font-family: "Garet", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

.tentang-header h1 span {
    color: #2864dc;
}

.tentang-header p {
    color: #9aa7c7;

    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   CONTAINER CARD TENTANG
========================================================= */

.tentang-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* =========================================================
   CARD TENTANG
========================================================= */

.tentang-card {
    min-height: 350px;
    padding: 38px 32px;

    background: rgba(15, 18, 45, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.tentang-card:hover {
    transform: translateY(-8px);

    border-color: rgba(124, 58, 237, 0.4);

    box-shadow:
        0 15px 35px rgba(76, 41, 158, 0.25);
}


/* =========================================================
   ICON TENTANG
========================================================= */

.tentang-icon {
    width: 60px;
    height: 60px;

    margin-bottom: 25px;

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

    border-radius: 50%;

    background: rgba(76, 41, 158, 0.25);
    color: white;
    border: 1px solid rgba(124, 58, 237, 0.3);

    font-size: 25px;
}


/* =========================================================
   JUDUL CARD
========================================================= */

.tentang-card h2 {
    margin-bottom: 15px;

    color: #f1f5f9;

    font-family: "Garet", sans-serif;
    font-size: 21px;
    line-height: 1.3;
}


/* =========================================================
   NAMA WALI KELAS
========================================================= */

.tentang-card h3 {
    margin-bottom: 12px;

    color: #7fa8ff;

    font-family: sans-serif;
    font-size: 16px;
}


/* =========================================================
   TEXT CARD
========================================================= */

.tentang-card p {
    color: #b8c2dd;

    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

/* =================================================
   GURU TKJ
================================================= */

.guru-tkj {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 50px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Guru menggunakan tampilan card siswa */
.guru-card {
    width: 100%;
}

/* Foto guru */
.guru-image {
    width: 100%;
}

/* Gambar bisa diklik */
.guru-image img {
    cursor: pointer;
}


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

@media (max-width: 900px) {

    .guru-tkj {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .guru-tkj {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

/* =========================================================
   ANGGOTA KELAS
========================================================= */

.anggota-section {
    width: 100%;
    min-height: 100vh;

    padding: 100px 7%;

    background: transparent;

    color: #111827;

    scroll-margin-top: 80px;

    overflow: hidden;
}


/* =========================================================
   HEADER ANGGOTA
========================================================= */

.anggota-header {
    margin-bottom: 70px;
    text-align: center;
}

.anggota-header h1 {
    margin-bottom: 15px;

    color: white;

    font-family: "Garet", sans-serif;
    font-size: 40px;
    line-height: 1.2;
}

.anggota-header h1 span {
    color: #2864dc;
}

.anggota-header p {
    color: #9aa7c7;

    font-family: "Garet", sans-serif;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.anggota-navigation {
    max-width: 1150px;

    margin: 0 auto 30px;

    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.anggota-btn {
    width: 46px;
    height: 46px;

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

    border: none;
    border-radius: 50%;

    background: #4134d4;
    color: white;

    font-size: 22px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow:
        0 8px 20px rgba(65, 52, 212, 0.35);
}

.anggota-btn:hover {
    background: #3025b5;
    transform: translateY(-3px);
}

.anggota-btn:active {
    transform: scale(0.95);
}

.anggota-btn:disabled {
    opacity: 0.35;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}

.anggota-btn:disabled:hover {
    background: #4134d4;
    transform: none;
}


/* =========================================================
   WRAPPER
========================================================= */

.anggota-wrapper {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

    overflow: hidden;
}


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

.anggota-container {
    display: flex;
    gap: 25px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 5px 5px 20px;

    scroll-behavior: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.anggota-container::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   CARD ANGGOTA
========================================================= */

.anggota-card {
    flex: 0 0 calc((100% - 75px) / 4);

    min-width: 0;

    overflow: hidden;

    background: rgba(15, 18, 45, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.35);

    scroll-snap-align: start;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.anggota-card:hover {
    transform: translateY(-8px);

    border-color: rgba(124, 58, 237, 0.4);

    box-shadow:
        0 15px 35px rgba(76, 41, 158, 0.3);
}


/* =========================================================
   FOTO ANGGOTA
========================================================= */

.anggota-image {
    width: 100%;
    height: 250px;

    position: relative;

    overflow: hidden;

    background: #1c2140;
}

.anggota-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.anggota-card:hover .anggota-image img {
    transform: scale(1.05);
}


/* =========================================================
   ABSEN
========================================================= */

.absen {
    position: absolute;
    top: 14px;
    right: 14px;

    padding: 7px 12px;

    border-radius: 20px;

    background: rgba(30, 41, 59, 0.85);
    color: white;

    font-family: "Garet", sans-serif;
    font-size: 12px;

    backdrop-filter: blur(5px);
}


/* =========================================================
   INFO SISWA
========================================================= */

.anggota-info {
    padding: 22px 20px 25px;
}

.anggota-info h2 {
    margin-bottom: 7px;

    color: #f1f5f9;

    font-family: "Garet", sans-serif;
    font-size: 17px;
    line-height: 1.4;
}

.anggota-info .kelas {
    margin-bottom: 10px;

    color: #7fa8ff;

    font-family: "Cera", sans-serif;
    font-size: 14px;
}

.anggota-info .status {
    color: #9aa7c7;

    font-family: sans-serif;
    font-size: 13px;
}


/* =========================================================
   JADWAL PELAJARAN
========================================================= */

.jadwal-section {
    width: 100%;
    min-height: 100vh;

    padding: 100px 8%;

    background: transparent;
}

.jadwal-header {
    margin-bottom: 40px;

    text-align: center;
}

.jadwal-header h1 {
    margin-bottom: 10px;

    color: white;

    font-family: "Garet", sans-serif;
    font-size: 45px;
}

.jadwal-header h1 span {
    color: #2864dc;
}

.jadwal-header p {
    color: #9ca3af;
    font-size: 16px;
}


/* =========================================================
   SLIDER
========================================================= */

.jadwal-slider {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


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

.jadwal-container {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    border-radius: 35px;

    scroll-behavior: auto;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;

    cursor: grab;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);
}

.jadwal-container::-webkit-scrollbar {
    display: none;
}

.jadwal-container:active {
    cursor: grabbing;
}


/* =========================================================
   TABEL
========================================================= */

.jadwal-table {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;

    background: rgba(15, 18, 45, 0.85);
    backdrop-filter: blur(8px);
}


/* =========================================================
   HEADER TABEL
========================================================= */

.jadwal-table thead th {
    padding: 18px 15px;

    background: #4f46e5;
    color: white;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   CELL
========================================================= */

.jadwal-table td {
    padding: 18px 15px;

    text-align: center;

    color: #d6dcf5;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    font-size: 14px;

    white-space: nowrap;
}


/* =========================================================
   ROW SELANG-SELING
========================================================= */

.jadwal-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}


/* =========================================================
   HOVER
========================================================= */

.jadwal-table tbody tr:not(.jadwal-istirahat):hover {
    background: rgba(124, 58, 237, 0.12);
}


/* =========================================================
   ISTIRAHAT
========================================================= */

.jadwal-table .jadwal-istirahat {
    background: rgba(217, 119, 6, 0.25);
    font-weight: 700;
}

.jadwal-table .jadwal-istirahat td {
    color: #fcd34d;
}


/* =========================================================
   BORDER RADIUS
========================================================= */

.jadwal-table thead th:first-child {
    border-top-left-radius: 35px;
}

.jadwal-table thead th:last-child {
    border-top-right-radius: 35px;
}

.jadwal-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 35px;
}

.jadwal-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 35px;
}


/* =========================================================
   INDIKATOR SLIDER
========================================================= */

.jadwal-indicator {
    width: 180px;
    height: 5px;

    margin: 25px auto 0;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.15);

    border-radius: 20px;
}

.jadwal-indicator-bar {
    width: 50%;
    height: 100%;

    background: #4f46e5;

    border-radius: 20px;

    transform: translateX(0);

    transition: transform 0.15s ease;
}


/* =========================================================
   HINT
========================================================= */

.jadwal-hint {
    display: none;
}


/* =========================================================
   GALERI MOMEN
========================================================= */

.galeri-section {
    padding: 100px 8%;

    background: transparent;
}

.galeri-header {
    margin-bottom: 45px;

    text-align: center;
}

.galeri-header h1 {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 800;
}

.galeri-header h1 span:first-child {
    color: #ffffff;
}

.galeri-header h1 .momen {
    color: #2864dc;
}

.galeri-header p {
    max-width: 650px;

    margin: 0 auto;

    color: #9ca3af;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID FOTO
========================================================= */

.galeri-container {
    max-width: 1100px;

    margin: 0 auto;

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

    gap: 20px;
}


/* =========================================================
   CARD FOTO
========================================================= */

.galeri-card {
    width: 100%;
    height: 260px;

    position: relative;

    overflow: hidden;

    background: #1f2937;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.galeri-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.galeri-card:hover img {
    transform: scale(1.08);
    filter: brightness(0.8);
}


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

.galeri-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.35),
        transparent 60%
    );

    opacity: 0;

    transition: 0.3s ease;
}

.galeri-card:hover::after {
    opacity: 1;
}


/* =========================================================
   STATISTIK
========================================================= */

.statistik-section {
    padding: 100px 8%;

    background: transparent;
}

.statistik-header {
    margin-bottom: 50px;

    text-align: center;
}

.statistik-header h1 {
    margin-bottom: 15px;

    color: white;

    font-size: 42px;
    font-weight: 800;
}

.statistik-header h1 span {
    color: #2864dc;
}

.statistik-header p {
    color: #9aa7c7;
    font-size: 16px;
}


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

.statistik-container {
    max-width: 1100px;

    margin: auto;

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

    gap: 25px;
}


/* =========================================================
   CARD STATISTIK
========================================================= */

.statistik-card {
    padding: 35px 20px;

    background: rgba(15, 18, 45, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.statistik-card:hover {
    transform: translateY(-8px);

    border-color: rgba(124, 58, 237, 0.4);

    box-shadow:
        0 15px 35px rgba(76, 41, 158, 0.3);
}


/* =========================================================
   ICON STATISTIK
========================================================= */

.statistik-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

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

    border-radius: 18px;

    background: rgba(37, 99, 235, 0.18);
    color: #7fa8ff;

    font-size: 30px;
}


/* =========================================================
   ANGKA STATISTIK
========================================================= */

.statistik-card h2 {
    margin: 0 0 8px;

    color: #f8fafc;

    font-size: 40px;
    font-weight: 800;
}


/* =========================================================
   JUDUL STATISTIK
========================================================= */

.statistik-card p {
    margin: 0;

    color: #9aa7c7;

    font-size: 15px;
    font-weight: 600;
}


/* =========================================================
   HUBUNGI KAMI
========================================================= */

.contact-section {
    max-width: 700px;

    margin: 0 auto;

    padding: 100px 25px;

    background: transparent;
}


/* =========================================================
   CONTACT HEADER
========================================================= */

.contact-header {
    margin-bottom: 40px;

    text-align: center;
}

.contact-header h1 {
    margin-bottom: 12px;

    color: white;

    font-size: 38px;
    font-weight: 800;
}

.contact-header h1 span {
    color: #2864dc;
}

.contact-header p {
    max-width: 600px;

    margin: 0 auto;

    color: #d1d5db;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-group label {
    color: white;

    font-size: 15px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;

    outline: none;

    background: rgba(8, 10, 28, 0.7);
    color: white;

    font-family: sans-serif;
    font-size: 14px;

    transition: all 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #6b7280;
}

.form-group textarea {
    min-height: 130px;

    resize: vertical;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.contact-button {
    align-self: flex-start;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 24px;

    border: none;
    border-radius: 8px;

    background: #2563eb;
    color: white;

    font-family: sans-serif;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.contact-button:hover {
    background: #1d4ed8;

    transform: translateY(-2px);
}

.contact-button i {
    font-size: 14px;
}


/* =========================================================
   TABLET
   MAX WIDTH 1000px
========================================================= */

@media screen and (max-width: 1000px) {

    /* NAVBAR */

    nav {
        padding: 0 20px;
    }

    .ul-navbar {
        gap: 18px;
    }

    .a-navbar {
        font-size: 15px;
    }


    /* BERANDA */

    .content {
        padding: 70px 50px;
    }

    .typing {
        margin-left: 0;

        font-size: 40px;
    }

    .p-text {
        font-size: 48px;
    }

    .satelit {
        width: 450px;
        border-radius: 50px;
    }


    /* TENTANG */

    .tentang-container {
        grid-template-columns: 1fr;

        max-width: 650px;
    }


    /* ANGGOTA */

    .anggota-section {
        padding: 80px 5%;
    }

    .anggota-card {
        flex: 0 0 calc((100% - 50px) / 3);
    }

    .anggota-image {
        height: 230px;
    }


    /* JADWAL */

    .jadwal-section {
        padding: 80px 5%;
    }

    .jadwal-header h1 {
        font-size: 38px;
    }


    /* GALERI */

    .galeri-section {
        padding: 80px 5%;
    }

    .galeri-container {
        grid-template-columns: repeat(2, 1fr);
    }


    /* STATISTIK */

    .statistik-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   TABLET KECIL
   MAX WIDTH 750px
========================================================= */

@media screen and (max-width: 750px) {

    .anggota-card {
        flex: 0 0 calc((100% - 25px) / 2);
    }

    .anggota-image {
        height: 240px;
    }

    .anggota-header h1 {
        font-size: 32px;
    }

    .anggota-header p {
        font-size: 14px;
    }
}


/* =========================================================
   HP
   MAX WIDTH 700px
========================================================= */

@media screen and (max-width: 700px) {

    /* =====================================================
       NAVBAR HP
       Logo kiri + hamburger kanan, seperti referensi mobile
    ===================================================== */

    nav {
        min-height: 64px;
        height: 64px;

        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        gap: 0;
        padding: 0 18px;

        position: sticky;
        top: 0;
    }

    .logo-img {
        width: 125px;
    }

    .menu-toggle {
        display: flex;
        flex-shrink: 0;
    }

    .ul-navbar {
        position: absolute;
        top: calc(100% + 8px);
        right: 18px;
        left: 18px;

        width: auto;
        padding: 10px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;

        background: rgba(6, 9, 26, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 12px;

        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top right;
        pointer-events: none;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
    }

    .ul-navbar.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .li-navbar {
        width: 100%;
    }

    .a-navbar {
        width: 100%;
        padding: 12px 14px;
        border-radius: 8px;

        font-size: 13px;
        text-align: left;
    }

    .a-navbar:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .a-navbar::after {
        display: none;
    }

    .a-navbar.active {
        background: rgba(37, 99, 235, 0.12);
    }


    /* =====================================================
       BERANDA HP
    ===================================================== */

    .content {
        min-height: auto;

        flex-direction: column;
        justify-content: center;

        gap: 50px;

        padding: 70px 25px;
    }

    .typing {
        width: 100%;

        margin-left: 0;

        text-align: center;

        font-size: 35px;
    }

    .p-text {
        font-size: 40px;
    }

    #text {
        font-size: 38px;
    }

    .motivasi {
        font-size: 13px;
    }

    .button-group {
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        height: 52px;

        padding: 0 20px;

        font-size: 13px;
    }

    .img-info {
        width: 100%;
    }

    .satelit {
        width: 100%;
        max-width: 450px;

        margin-right: 0;

        border-radius: 35px;
    }


    /* =====================================================
       TENTANG HP
    ===================================================== */

    .tentang-section {
        padding: 70px 5%;
    }

    .tentang-header {
        margin-bottom: 40px;
    }

    .tentang-header h1 {
        font-size: 30px;
    }

    .tentang-header p {
        font-size: 14px;
    }

    .tentang-card {
        min-height: auto;

        padding: 30px 25px;
    }

    .tentang-card h2 {
        font-size: 20px;
    }

    .tentang-card p {
        font-size: 14px;
    }


    /* =====================================================
       ANGGOTA HP
    ===================================================== */

    .anggota-section {
        padding: 70px 5%;
    }

    .anggota-header {
        margin-bottom: 40px;
    }

    .anggota-header h1 {
        font-size: 29px;
    }

    .anggota-header p {
        font-size: 13px;
    }

    .anggota-navigation {
        margin-bottom: 20px;
    }

    .anggota-btn {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .anggota-card {
        flex: 0 0 100%;
    }

    .anggota-image {
        height: 300px;
    }


    /* =====================================================
       JADWAL HP
    ===================================================== */

    .jadwal-section {
        padding: 70px 5%;
    }

    .jadwal-header {
        margin-bottom: 25px;
    }

    .jadwal-header h1 {
        font-size: 32px;
    }

    .jadwal-header p {
        font-size: 14px;
    }

    .jadwal-container {
        border-radius: 25px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;
    }

    .jadwal-table {
        min-width: 900px;
    }

    .jadwal-hint {
        display: block;

        margin-bottom: 12px;

        color: #9ca3af;

        text-align: center;

        font-size: 12px;

        opacity: 0.8;
    }

    .jadwal-indicator {
        display: block;

        position: relative;

        width: 180px;
        height: 4px;

        margin: 18px auto 0;

        overflow: hidden;

        background: rgba(255, 255, 255, 0.2);

        border-radius: 10px;
    }

    .jadwal-indicator-bar {
        position: absolute;

        top: 0;
        left: 0;

        width: 90px;
        height: 4px;

        background: #4f46e5;

        border-radius: 10px;

        transform: translateX(0);

        transition: transform 0.15s ease;
    }

    .jadwal-navigation {
        display: none;
    }


    /* =====================================================
       GALERI HP
    ===================================================== */

    .galeri-section {
        padding: 70px 20px;
    }

    .galeri-header {
        margin-bottom: 35px;
    }

    .galeri-header h1 {
        font-size: 32px;
    }

    .galeri-header p {
        font-size: 14px;
    }

    .galeri-container {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .galeri-card {
        height: 230px;
    }


    /* =====================================================
       STATISTIK HP
    ===================================================== */

    .statistik-section {
        padding: 70px 20px;
    }

    .statistik-header h1 {
        font-size: 32px;
    }

    .statistik-container {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       CONTACT HP
    ===================================================== */

    .contact-section {
        padding: 70px 20px;
    }

    .contact-header h1 {
        font-size: 32px;
    }

    .contact-header p {
        font-size: 14px;
    }
}


/* =========================================================
   HP KECIL
   MAX WIDTH 500px
========================================================= */

@media screen and (max-width: 500px) {

    .anggota-card {
        flex: 0 0 100%;
    }

    .anggota-image {
        height: 300px;
    }
}

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

.footer {
    height: 100px;
    position: relative;

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

    background: rgba(20, 8, 73, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
}

/* LOGO KIRI */
.footer-logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.img-footer {
    height: 100px;
    width: auto;
}

/* TEKS TENGAH */
.p-footer {
    color: white;
    text-align: center;
    margin: 0;
    max-width: 50%;
}

/* SOSIAL MEDIA KANAN */
.social-footer {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    gap: 10px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background-color: white;

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

    color: #140849;
    text-decoration: none;
    font-size: 20px;
}

@media (max-width: 600px) {

    .footer {
        height: 80px;
    }

    .footer-logo {
        left: 10px;
    }

    .img-footer {
        height: 80px;
    }

    .p-footer {
        font-size: 10px;
        max-width: 55%;
    }

    .social-footer {
        right: 10px;
        gap: 5px;
    }

    .social-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* =====================================================
   LIGHTBOX FOTO
===================================================== */

.lightbox {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.9);

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

    padding: 30px;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    cursor: zoom-out;
}


/* Saat dibuka */

.lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* Foto besar */

.lightbox img {
    max-width: 90%;
    max-height: 90%;

    object-fit: contain;

    border-radius: 15px;

    transform: scale(0.8);

    transition: transform 0.3s ease;

    cursor: default;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5);
}


/* Animasi foto */

.lightbox.active img {
    transform: scale(1);
}


/* Tombol X */

.lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    color: white;

    font-size: 45px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 2;

    transition: transform 0.2s ease;
}

.lightbox-close:hover {
    transform: scale(1.15);
}


/* =====================================================
   HP
===================================================== */

@media (max-width: 600px) {

    .lightbox {
        padding: 15px;
    }

    .lightbox img {
        max-width: 95%;
        max-height: 85%;

        border-radius: 10px;
    }

    .lightbox-close {
        top: 15px;
        right: 20px;

        font-size: 38px;
    }

}

/* =========================================================================
   OPTIMASI PERFORMA MOBILE
   -------------------------------------------------------------------------
   Desktop mempertahankan efek visual. Touch/mobile memakai versi ringan.
   ========================================================================= */
@media (max-width: 768px), (pointer: coarse) {
    /* Background dekoratif: tetap terlihat, tetapi tidak terus dihitung berat. */
    .nebula-glow {
        filter: none;
        opacity: 0.35;
        animation: none !important;
    }

    .shooting-star {
        display: none;
        animation: none !important;
    }

    #stars-small::after,
    #stars-medium::after,
    #stars-large::after {
        display: none;
    }

    #stars-small,
    #stars-medium,
    #stars-large,
    .planet {
        animation: none !important;
    }

    body {
        background-attachment: scroll;
    }

    /* Hindari backdrop-filter saat scrolling touch. */
    nav,
    nav.scrolled,
    .tentang-card,
    .anggota-card,
    .guru-card,
    .jadwal-table,
    .statistik-card,
    .footer,
    .absen,
    .ul-navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    nav,
    nav.scrolled {
        background: rgba(6, 9, 26, 0.96);
    }

    .tentang-card,
    .statistik-card {
        background: rgba(15, 18, 45, 0.94);
    }

    .anggota-card,
    .guru-card,
    .jadwal-table {
        background: rgba(15, 18, 45, 0.94);
    }

    .footer {
        background: rgba(20, 8, 73, 0.94);
    }

    .absen {
        background: rgba(30, 41, 59, 0.96);
    }

    /* Animasi hero tidak perlu berjalan saat user sedang membaca/scroll. */
    .satelit {
        animation: none;
    }

    .anggota-container,
    .jadwal-container {
        scroll-behavior: auto;
    }

    .anggota-container {
        scroll-snap-type: none;
    }
}

/* -----------------------------------------------------------------------
   6) HORMATI PENGATURAN "REDUCE MOTION" DI HP
   Kalau user mengaktifkan "Kurangi Gerakan" di sistem HP-nya,
   semua animasi dekoratif (bukan animasi fungsional seperti
   slider) dimatikan total demi kenyamanan & performa.
----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nebula-glow,
    #stars-small,
    #stars-medium,
    #stars-large,
    .shooting-star {
        animation: none !important;
    }
}


/* =========================================================================
   PAUSE ANIMASI SAAT HALAMAN TIDAK DILIHAT
   ---------------------------------------------------------------
   Class "page-hidden" ditambahkan/dihapus oleh JS (lewat Page
   Visibility API) di body. Saat user pindah tab / minimize HP /
   kunci layar, semua animasi looping berikut di-PAUSE (bukan
   dihapus!) sehingga tidak makan CPU & baterai saat tidak
   ada yang lihat. Begitu balik ke halaman ini, animasi lanjut
   dari posisi terakhir, TIDAK mulai ulang dari awal.
========================================================================= */

body.page-hidden .nebula-glow,
body.page-hidden #stars-small,
body.page-hidden #stars-medium,
body.page-hidden #stars-large,
body.page-hidden .shooting-star,
body.page-hidden .planet,
body.page-hidden .cursor,
body.page-hidden .satelit {
    animation-play-state: paused !important;
}