:root {
--primary-gradient: linear-gradient(120deg, #0d6efd, #6610f2);
--bg-color: #ffffff;
--text-main: #333333;
--text-muted: #666666;
--accent-bg: #f8f9fa;
}
html, body  {
max-width: 100%;
overflow-x: hidden;
margin: 0;
padding: 15px;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
text-align: center;
line-height: 1.6;
cursor:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAACGFjVEwAAAAKAAAAAMP92LEAAAAVUExURQAAAAAAAMDAwACAAICAgP///wD/AOBI6vYAAAABdFJOUwBA5thmAAAAGmZjVEwAAAAAAAAAIAAAACAAAAAAAAAAAAAKAGQAAK++9NEAAABxSURBVDjL1ZBBDoAgDATZAvv/JwvRRCuFTYgXp4TLTtpCSh8AKIFKQRUKWIWCLqxbEPoh8LyEdoo9KUNLmGtgkZBvJgLPIqcCLyVvj2DL+ozlDv3aHSH+Qf1kM54EeS2uMORDqdwZsAjMFowWRUT6DQcf2AO7NkRQhQAAABpmY1RMAAAAAQAAAAgAAAAFAAAADQAAAAwACgBkAAHbmeJkAAAAImZkQVQAAAACOMtjYGNmY2BgZgZiBhBgY0AAZgiPGSbIBgAFkQA3OE3I+AAAABpmY1RMAAAAAwAAAAkAAAAFAAAADAAAAAwACgBkAABXZF6DAAAAImZkQVQAAAAEOMtjYGNmZmYDQQYEixkGgCw2sBBIlo0ZjAASJgC7CqZEHQAAABpmY1RMAAAABQAAAAgAAAAFAAAADAAAAAwACgBkAgBfes4jAAAAH2ZkQVQAAAAGOMtjYGNjYwZCNgYIxcbMwAwFEBFkBgAQLACsRkEbpwAAABpmY1RMAAAABwAAAAcAAAAFAAAADAAAAAwACgBkAAG0QtkQAAAAImZkQVQAAAAIOMtjYGBgY2BmY2AA0wwIABQCCrOBGWzMbAAEcgBDddbmzwAAABpmY1RMAAAACQAAAAkAAAAFAAAADAAAAAwACgBkAgH/epxYAAAAH2ZkQVQAAAAKOMtjYGBjQAAQm42ZARUwM4NEmMEQCAAEBAAoaOeWiAAAABpmY1RMAAAACwAAAAkAAAAFAAAADAAAAAwACgBkAAEg2i0zAAAAJmZkQVQAAAAMOMtjYGZgYGNgAJJgmo2NmY0BCTCDZZiZmaE8oBoABvIAQOtHYisAAAAaZmNUTAAAAA0AAAAIAAAABQAAAAwAAAAMAAoAZAAAbfXvhwAAACFmZEFUAAAADjjLY2BjhkAGOIMZChiY2diYQZgBQjGzAQAO/QCpuQwf5gAAABpmY1RMAAAADwAAAAkAAAAFAAAADAAAAAwACgBkAAEghoygAAAAGWZkQVQAAAAQOMtjYAABNgwSCtiYoRjBBgAEoAA9IY/kWwAAABpmY1RMAAAAEQAAAAkAAAAFAAAADAAAAAwACgBkAAHMhzuwAAAAH2ZkQVQAAAASOMtjYGYAARDJzAxjIQAzG0wezGIDsgAEBAA04c2NZwAAABh0RVh0U29mdHdhcmUAZ2lmMmFwbmcuc2YubmV0lv8TyAAAAABJRU5ErkJggg=='), auto;
}

.container {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center; 
}
.header-text {
font-weight: 700;
margin-bottom: 20px;
display: block;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--bg-color);
}
.logo-img {
max-width: 100%;
height: auto;
margin: 20px 0;
}
h5 {
font-weight: 600;
margin: 15px auto;
color: var(--text-main);
max-width: 600px;
}
.legacy-note {
font-style: italic;
display: block;
margin: 20px auto;
max-width: 750px;
font-size: 0.95em;
color: var(--text-muted);
background: var(--accent-bg);
padding: 15px;
border-radius: 8px;
border-left: 4px solid #6610f2;
border-right: 4px solid #6610f2;
}
.btn-container {
margin: 60px 0;
}
.my-btn {
display: inline-block;
background: var(--primary-gradient);
color: #ffffff;
padding: 18px 45px;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 26px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}
.my-btn:hover {
transform: scale(1.05);
box-shadow: 0 15px 25px rgba(13, 110, 253, 0.3);
background: linear-gradient(120deg, #6610f2, #0d6efd);
}
.footer-info {
font-size: 13px;
color: #888;
padding-top: 20px;
border-top: 1px solid #eee;
}
/* Grid untuk Ikon Browser & Link */
.icon-grid {
display: block;
margin: 10px 0;
}
.icon-grid a {
transition: transform 0.2s;
}
.icon-grid a:hover {
transform: translateY(-5px);
}
.icon-grid img {
max-width: 110px;
height: auto;
}
/* Responsif Mobile */
@media (max-width: 600px) {
.my-btn {
font-size: 22px;
padding: 15px 35px;
}
.icon-grid {
grid-template-columns: repeat(2, 1fr);
}
.header-text {
font-size: 14px;
}
}
.card {
max-width: 600px;
width: 100%;
}
.title {
font-size: 32px;
font-style: italic;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to right, #4a90e2, #9013fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-bottom: 2px solid #ccc;
display: inline-block;
}
.content {
display: flex;
align-items: center;
gap: 20px;
}
/* Ikon Dunia & Mouse */
.main-icon {
width: 180px;
height: auto;
}
/* Bahagian Teks Sebelah Kanan */
.info-section {
display: flex;
flex-direction: column;
}
.sub-title {
font-size: 24px;
color: #555;
font-family: 'Brush Script MT', cursive, sans-serif;
margin-bottom: 15px;
}
.link-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
text-decoration: none;
color: #333;
font-size: 18px;
}
.link-item:hover {
color: #0d6efd;
}
.globe-icon  {
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-bottom: 0px;
}
.globe-icon {
background-image: url("data:image/png;base64,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");
}
/* Responsif untuk Mobile */
@media (max-width: 500px) {
.content {
flex-direction: column;
text-align: center;
}
.title {
font-size: 24px;
}
.link-item {
justify-content: center;
}
}