RUANGGURU HQ
Gedung Sinarmas MSIG Tower Lt. 33. Jl. Jenderal Sudirman Kav. 21, Karet Kuningan, Setiabudi, Jakarta Selatan, Jakarta 12920
RUANGGURU HQ
Gedung Sinarmas MSIG Tower Lt. 33. Jl. Jenderal Sudirman Kav. 21, Karet Kuningan, Setiabudi, Jakarta Selatan, Jakarta 12920
<!doctype html>
<html lang="id">
<head>
<!-- Basic Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Language" content="id" />
<!-- Site Info -->
<title>Academy of Champions 2025: Final Match Watch Party</title>
<meta name="author" content="Ruangguru Tech Team" />
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta
name="description"
content="Bergabunglah dalam Final Match Watch Party Academy of Champions 2025! Saksikan momen paling dinantikan, mainkan game eksklusif, dan dapatkan berbagai hal spesial di Ruangguru."
/>
<link rel="shortcut icon" href="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/favicon60x60-3.png" />
<link rel="canonical" href="https://www.ruangguru.com/champions/aoc/final/my-ticket" />
<!-- SEO Meta Tags -->
<meta name="robots" content="index, follow" />
<meta name="google-site-verification" content="VJAn1g6wmtTZPpTXh-B4xoSFEkUi5jcV74xQSr6jnOM" />
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Academy of Champions 2025: Final Match Watch Party" />
<meta
property="og:description"
content="Bergabunglah dalam Final Match Watch Party Academy of Champions 2025! Saksikan momen paling dinantikan, mainkan game eksklusif, dan dapatkan berbagai hal spesial di Ruangguru."
/>
<meta property="og:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="350" />
<meta property="og:url" content="https://www.ruangguru.com/champions/aoc/final/my-ticket" />
<!-- Twitter Meta Tags -->
<meta name="twitter:title" content="Academy of Champions 2025: Final Match Watch Party" />
<meta
name="twitter:description"
content="Bergabunglah dalam Final Match Watch Party Academy of Champions 2025! Saksikan momen paling dinantikan, mainkan game eksklusif, dan dapatkan berbagai hal spesial di Ruangguru."
/>
<meta name="twitter:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta name="twitter:card" content="summary_large_image" />
<!-- Styles - DON'T CHANGE THE ORDER -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap');
body {
margin: 0;
-ms-overflow-style: none;
height: 100%;
background:
url('https://cdn-web-2.ruangguru.com/landing-pages/assets/7f1b6589-031e-45cf-85a8-ba985a019864.png?convert=webp') no-repeat,
black;
background-size: 100%;
background-attachment: fixed;
background-repeat: repeat;
--container-width: 1200px;
}
.body-container {
float: none;
margin: auto;
max-width: var(--container-width, 1000px);
}
.body-wrapper {
position: relative;
max-width: var(--container-width, 1000px);
overflow: hidden;
}
@media (max-width: 767px) {
body {
background: #e7dbc6;
}
.body-container {
max-width: 767px;
}
.body-wrapper {
max-width: 767px;
}
}
.page-center {
float: none !important;
margin: 0 auto !important;
max-width: 1200px !important;
width: 90% !important;
}
img {
max-width: 100%;
}
html {
scrollbar-width: none;
}
.web {
display: inherit !important;
}
a,
a:hover,
a:visited {
text-decoration: none !important;
color: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
span {
margin: 0;
}
.display-none {
display: none !important;
}
.cta {
border-radius: var(--size-radius-rad-full, 9999px);
background: var(--prop-action-primary-primary-default, #f26d0f);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
border: 1px solid #f26d0f;
padding: 0.75rem 2.5rem;
}
.secondary-cta {
display: flex;
height: 44px;
padding: 0.3rem 2.5rem;
justify-content: center;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--prop-action-secondary-secondary-default-border, #cfd3db);
background: var(--prop-action-secondary-secondary-default, #fff);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
cursor: pointer;
color: var(--color-text-text-ink, #2c313a);
}
nav.ruangguru-header {
background: #0b0b08;
}
.navig-link-dropdown[aria-expanded='false']:after {
border-top: 0.3em solid #fff;
}
.body-wrapper {
font-family: 'Space Grotesk', 'Inter', sans-serif;
margin-top: 3.375rem;
}
@media (min-width: 321px) {
.body-wrapper {
margin-top: 4.625rem !important;
}
}
@media (min-width: 1025px) {
.body-wrapper {
margin-top: 5.625rem !important;
}
}
.text-countdown-hero {
align-items: center;
display: flex;
flex-direction: row;
gap: 0.25rem;
justify-content: center;
}
.text-countdown-hero div,
.text-countdown-hero span {
color: #fff;
letter-spacing: 0.01em;
margin: 0;
}
.text-countdown-hero div {
grid-gap: 0.25rem;
align-items: center;
display: grid;
grid-template-columns: auto auto;
}
.text-countdown-hero span {
color: #fff;
background: linear-gradient(0deg, #cd1924 0%, #cd1924 100%), linear-gradient(133deg, #ea4952 1.52%, #cd1924 50%, #9a0912 98.48%), rgba(0, 0, 0, 0.25);
border-radius: 8px;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.hero-timer-cta {
align-items: center;
display: flex;
justify-content: center;
padding: 0.1rem 0;
position: relative;
gap: 12px;
}
.hero-timer-cta p {
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
@media (max-width: 767px) {
.hero-timer-cta p {
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 18px;
}
.hero-timer-cta {
justify-content: flex-start;
}
.text-countdown-hero span {
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
}
.slick-disabled {
opacity: 0.2 !important;
}
.slick-arrow:before {
content: none !important;
}
.slick-arrow {
background-size: 100% 100% !important;
border-radius: 50% !important;
box-shadow: 0 12px 16px rgba(26, 29, 34, 0.12);
cursor: pointer !important;
height: 2rem !important;
top: 105% !important;
width: 2rem !important;
z-index: 1 !important;
}
.slick-prev {
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c99d671c-12a9-44ea-ae09-e8a4b233ac2d.svg) !important;
right: 0 !important;
left: auto;
margin-right: 44px;
}
.slick-next {
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c2f137c4-6388-43d0-b6c1-920585b36f3b.svg) !important;
right: 0 !important;
}
.slick-dots {
bottom: -8% !important;
left: 0 !important;
width: fit-content !important;
}
.slick-dots li button:before {
color: #b29e82 !important;
font-size: 12px !important;
opacity: 1 !important;
}
.slick-dots li.slick-active button:before {
color: #ed3737 !important;
font-size: 16px !important;
}
.hero {
position: relative;
}
.hero-section {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
gap: 16rem;
}
.hero-logo {
width: auto;
height: 186px;
}
.hero-bg {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translate(-50%, 0);
z-index: -1;
}
@media (min-width: 767px) {
.hero-bg {
height: auto;
min-height: 100%;
}
.hero-desc {
padding: 1rem 5rem;
}
}
.date-location {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.location {
height: fit-content;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.25rem;
}
.location-title {
color: white;
font-family: 'Space Grotesk';
font-size: 24px;
font-weight: 700;
line-height: 26.4px;
letter-spacing: -0.1600000113248825px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.location-desc {
color: white;
text-align: center;
font-family: 'Space Grotesk';
font-size: 16px;
font-weight: 400;
line-height: 18px;
text-decoration-line: underline;
text-underline-position: from-font;
}
@media (max-width: 767px) {
.hero-section {
gap: 8rem;
}
.location-desc {
font-size: 12px;
}
.location-desc-title {
margin-top: 1.75rem;
}
}
@media (max-width: 450px) {
.location-desc-title {
margin-top: 1.4rem !important;
}
}
@media (max-width: 375px) {
.location-desc {
font-size: 10px !important;
}
}
.location-desc-title {
font-family: 'Space Grotesk';
font-size: 20px;
font-weight: 700;
line-height: 25.52px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: white;
margin-top: 2.5rem;
margin-bottom: 0.5rem;
}
.location-desc-subtitle {
font-family: 'Space Grotesk';
font-size: 16px;
font-weight: 500;
line-height: 18px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: white;
}
@media (max-width: 375px) {
.location-desc-subtitle {
font-size: 14px;
}
}
@media (max-width: 320px) {
.location-desc-subtitle {
font-size: 12px;
}
}
.title-tag {
padding-bottom: 1rem;
}
.text-subtitle {
text-align: center;
font-family: 'Space Grotesk';
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.16px;
}
.text-title {
text-align: center;
font-family: 'Space Grotesk';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: -0.16px;
}
.text-subtitle.text-dark {
color: #575757;
}
.text-title.text-dark {
color: #2c313a;
}
.text-light {
color: #fff;
}
.venue {
padding: 3rem 0 40px;
background: #f1ebe6;
}
@media (max-width: 767px) {
.venue {
padding: 1.5rem 0 0;
}
}
.location-venue {
color: #000;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
max-width: 18rem;
}
.cta-default {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 100%;
border: 1px solid var(--color-border-border-highlight, #cd1924);
background: #fff;
color: var(--color-text-text-highlight, #cd1924);
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.cta-red {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 100%;
border: none;
background: #ac2a2c;
color: #fff;
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.ticket {
background: url(https://cdn-web-2.ruangguru.com/landing-pages/assets/bcc11298-6e92-4e13-8b75-c37d66579e7e.png?convert=webp), #000;
padding: 24px 0;
/* background-repeat: no-repeat;
background-size: 100%, cover;
background-position-y: top, center;
padding: 24px 0; */
}
.placeholder-map {
/* display: grid; */
justify-items: center;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
@media (max-width: 767px) {
.placeholder-map {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.ticket-picks {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
width: 100%;
max-width: 626px;
}
.ticket-price-box {
border-radius: 12px;
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
padding: 12px;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.ticket-type {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px dashed #bec8d0;
padding-bottom: 10px;
}
.ticket-name-tag {
display: flex;
gap: 8px;
align-items: center;
padding-bottom: 8px;
}
.ticket-tag {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #979797;
}
.ticket-name {
color: var(--Cloudy-Cloudy110, #333842);
font-family: 'Space Grotesk';
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
}
@media (max-width: 375px) {
.ticket-name {
font-size: 14px;
}
}
.cta-exclusive {
color: #ac2a2c;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 18px;
display: flex;
align-items: flex-end;
gap: 4px;
}
.ticket-start,
.ticket-pax {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
text-align: right;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.ticket-price {
display: flex;
align-items: center;
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.purchase {
position: relative;
display: none;
}
.purchase-box {
display: flex;
flex-direction: column;
padding: 12px;
gap: 12px;
border-radius: var(--size-radius-rad-lg, 12px);
background: #fff;
}
.purchase-box-title {
display: flex;
align-items: center;
justify-content: space-between;
}
.purchase-title {
color: #2c313a;
font-family: 'Space Grotesk';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 22px;
letter-spacing: -0.1px;
}
.purchase-desc {
color: #2c313a;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.purchase-box-tnc {
border-radius: 8px;
border: 1px solid var(--color-border-border-subtle, #dadfea);
background: var(--prop-pallete-subtle-subtle-blue, #e0eefa);
margin: 12px;
padding: 12px;
width: 100%;
}
.purchase-tnc-title {
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px dashed #bec8d0;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}
.tnc-title,
.tnc-desc {
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.tnc-list {
padding: 0.5rem 1rem 0 1rem;
margin: 0;
}
.tnc-list li {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
margin-bottom: 0.5rem;
}
.purchase-tnc-cta {
display: flex;
justify-content: flex-end;
}
.main-banner {
position: relative;
background: linear-gradient(2deg, rgba(0, 0, 0, 0) 5.09%, #000 100%), url(https://cdn-web-2.ruangguru.com/landing-pages/assets/0b2ccdd9-a006-4460-8990-6d67c10bed0e.jpg?convert=webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Space Grotesk', serif;
padding-block: 1.5rem;
}
.main-content {
position: relative;
overflow: hidden;
background-color: #c8b09d;
display: grid;
grid-template-columns: 3fr;
padding-top: 2.25rem;
padding-bottom: 15rem;
padding-inline: 0.375rem;
}
.main-content * {
z-index: 1;
}
.main-content-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.section-card {
overflow: hidden;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.4);
}
.creator-tag {
display: inline-flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: var(--size-radius-rad-full, 9999px);
border: 1px solid #0fb4bd;
}
.subtitle-section {
color: #fff;
font-family: 'Space Grotesk', serif;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 24px;
margin: 0;
}
.subtitle-section span {
font-weight: 600;
}
.container-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.content-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.info-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.info-title {
color: var(--color-text-text-ink, #d9d9d9);
text-align: center;
font-family: 'Space Grotesk';
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: -0.16px;
}
.main-banner-cta {
color: #fcc41b;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.store-buttons {
display: flex;
align-items: flex-start;
gap: 12px;
}
.store-button {
width: 112px;
}
.social-title {
color: #2c313a;
text-align: center;
font-family: 'Space Grotesk';
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 16px;
}
.logo-hero {
margin-top: 1.5rem;
}
/*COUNTDOWN HEADER*/
.countdown-payment {
background: #e32c36;
padding: 4px 0 6px;
position: fixed;
width: 100%;
max-width: var(--container-width, 1000px);
z-index: 10;
}
.modal .countdown-payment {
position: relative;
}
.countdown-payment-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.countdown-title {
color: #fff;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 18px;
}
.countdown {
display: flex;
border-radius: 9999px;
background: var(--color-background-bgsubtle-bgsubtle-highlight, #f8e1e2);
align-items: center;
padding: 4px 8px 4px 4px;
gap: 2px;
}
.countdown-timer {
color: var(--color-text-text-highlight, #cd1924);
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
.countdown-timer span {
color: var(--color-text-text-highlight, #cd1924);
text-align: center;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px;
}
/*COUNTDOWN HEADER*/
.container-floating-header {
position: fixed;
width: 100%;
z-index: 1000;
}
.breadcrumb {
background: #000;
padding: 1rem 0;
}
.breadcrumb a {
color: #20a4b0;
}
.breadcrumb a:hover {
color: #1c7680;
}
.breadcrumb a:active {
color: #185e66;
}
.breadcrumb .back-button {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 9999px;
width: 32px;
height: 32px;
}
.breadcrumb .back-button:hover {
background-color: #f0f0f0;
}
.breadcrumb .back-button:active {
background-color: #e0e0e0;
}
.breadcrumb p {
color: var(--color-text-text-invert, #fff);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
}
.footer.dark {
background: #1a202c !important;
}
.img-section-bottom-wrapper {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
overflow: hidden;
width: 100%;
height: auto;
margin-bottom: -1px;
}
.img-section-bottom {
width: 100%;
height: auto;
}
@media (max-width: 1024px) {
.img-section-bottom {
width: auto;
}
}
@media (max-width: 767px) {
.main-banner {
background: url(https://cdn-web-2.ruangguru.com/landing-pages/assets/0b2ccdd9-a006-4460-8990-6d67c10bed0e.jpg?convert=webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0.75rem 0 2.5rem 0;
}
.container-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-bottom: 2.5rem;
}
.info-card {
width: 100%;
}
.aoc-logo {
width: 208px;
height: auto;
}
.info-title {
font-size: 14px;
}
.social-title {
font-size: 10px;
}
.countdown-payment {
width: 100%;
}
}
/* Start - Tabs */
.tab-buttons {
position: absolute;
bottom: -1.5rem;
justify-content: center;
padding: 4px;
z-index: 1;
border-radius: 9999px;
background-color: #423d33;
}
.tab-button {
display: flex;
align-items: center;
padding: 10px 24px;
gap: 4px;
border-radius: 9999px;
border: none;
cursor: pointer;
background: transparent;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.tab-button:focus {
outline: none;
}
.tab-button.active {
background-color: #f1bb53;
color: #040c0e;
}
@media (max-width: 767px) {
.tab-pane {
display: none;
}
.tab-pane.active {
display: flex;
flex-direction: column;
}
}
/* End - Tabs */
/* Start - Leaderboard District */
.district-icon-img {
width: 64px;
height: 64px;
}
.district-starchamp-icon {
width: 1.125rem;
height: 1.125rem;
}
.district-starchamps-badge {
position: relative;
display: flex;
padding: 6px 34px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 4.352px;
}
.district-starchamps-badge .district-starchamp-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.district-starchamps-rank-badge {
position: absolute;
left: -1.6rem;
top: 50%;
transform: translateY(-50%) scale(0.4);
}
.district-card-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border: 1px solid #524238;
background: #24160d;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.district-card-container.highlight {
border-radius: 8px;
background: rgba(36, 22, 13, 0.8);
}
.district-view-all-button {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
background: transparent;
padding: 0.5rem 1rem;
gap: 0.5rem;
border-radius: 0;
border: 1px solid #2c313a;
color: #2c313a;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
font-weight: 700;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.district-view-all-button:hover {
background-color: #24160d;
color: #ffffff;
}
.district-view-all-button:active,
.district-view-all-button:focus {
outline: 1px auto #24160d;
border-radius: 0;
background-color: #24160d;
color: #ffffff;
}
.district-view-all-button svg {
transition: color 0.3s ease;
}
.district-view-all-button:hover svg,
.district-view-all-button:active svg,
.district-view-all-button:focus svg {
color: #ffffff;
}
/* End - Leaderboard District */
/* Start - Leaderboard Individual */
.leaderboard-individual-card {
background: radial-gradient(46.78% 63.56% at 100% 89.37%, rgba(255, 144, 47, 0.5) 3.22%, rgba(58, 21, 28, 0.25) 100%),
radial-gradient(57.06% 50.84% at 0% 103.13%, rgba(255, 255, 255, 0.25) 0%, rgba(248, 195, 215, 0) 100%), linear-gradient(180deg, #140a0e 0%, #240f14 25%, #3a151c 50%, #551a23 100%);
}
.player-card-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(252, 247, 245, 0.1);
}
.player-view-all-button {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
background: transparent;
padding: 0.5rem 1rem;
gap: 0.5rem;
border-radius: 0;
border: 1px solid #ffffff;
color: #ffffff;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
font-weight: 700;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.player-view-all-button:hover {
background-color: #3e0a1c;
color: #ffffff;
}
.player-view-all-button:active,
.player-view-all-button:focus {
outline: 1px auto #3e0a1c;
border-radius: 0;
background-color: #3e0a1c;
color: #ffffff;
}
.player-view-all-button svg {
transition: color 0.3s ease;
}
.player-view-all-button:hover svg,
.player-view-all-button:active svg,
.player-view-all-button:focus svg {
color: #ffffff;
}
.rank-badge {
display: flex;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
border-radius: 100%;
background: rgba(255, 255, 255, 0.2);
text-align: center;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 600;
}
.top-rank-badge {
height: 32px;
width: auto;
}
/* End - Leaderboard Individual */
/* Start - Modal */
.modal {
display: none;
position: fixed;
align-items: center;
justify-content: center;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
width: 100%;
height: 100%;
max-width: 500px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.modal-background {
position: absolute;
left: 0;
top: 50%;
width: 100%;
z-index: -1;
transform: translate(0, -50%);
background: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/e06ff3aa-d9bf-4382-a28b-7e4dcfa2198a.png?convert=webp') no-repeat center center;
background-size: cover;
}
.modal-body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 3rem;
gap: 0.75rem;
font-family: 'Space Grotesk', sans-serif;
color: #333331;
border-radius: 16px 16px 0px 0px;
background: #fff;
}
.modal-body ol {
display: flex;
flex-direction: column;
text-align: center;
font-size: 0.875rem;
padding-left: 0;
margin: 0;
list-style-position: inside;
gap: 0.5rem;
}
.modal-icon {
width: 3.125rem;
height: auto;
}
.modal-button {
background: #ac2a2c;
border: 1px solid #fff;
color: #ffffff;
border: none;
padding: 0.75rem 2rem;
border-radius: 0;
font-family: Inter, sans-serif;
font-size: 0.75rem;
font-weight: 700;
text-align: center;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.1s ease;
}
.modal-button:hover {
background: #8b2021;
}
.modal-button:active {
background: #751818;
transform: scale(0.95);
}
.modalt-tile {
color: var(--Cloudy-Cloudy110, #333842);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.modal-description {
color: var(--Cloudy-Cloudy110, #333842);
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal .purchase-box-tnc {
margin: 0;
}
@media (max-width: 425px) {
.modal-body {
padding: 1rem;
}
}
.toast {
visibility: hidden;
background-color: white;
color: black;
text-align: center;
border-radius: 9999px;
padding: 14px 24px;
position: fixed;
z-index: 1000;
left: 50%;
transform: translateX(-50%);
top: 30px;
font-family: Inter, sans-serif;
font-size: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
transition:
visibility 0s,
opacity 0.3s ease-in-out;
opacity: 0;
}
.toast.show {
visibility: visible;
opacity: 1;
}
/* End - Modal */
@media (min-width: 1024px) {
.game-list {
grid-template-columns: repeat(2, 1fr);
}
.leaderboard-section {
min-width: 381px;
}
}
@media (min-width: 1157px) {
.game-list {
grid-template-columns: repeat(3, 1fr);
}
}
.custom-header.ruangguru-header #logout-btn {
position: absolute;
top: 100%;
right: 0;
gap: 0.5rem;
padding: 0.5rem 1rem;
min-width: 100px;
margin-top: 0.5rem;
}
.custom-header.ruangguru-header .navig-link {
font-size: 14px;
}
.custom-header.ruangguru-header .container-user_profile {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
border-radius: 8px !important;
border: 1px solid #959dac !important;
padding: 4px 6px !important;
background: #010101 !important;
}
.custom-header.ruangguru-header .navigation__content {
display: none;
}
.custom-header.ruangguru-header .hamburger-icon {
display: block;
}
.custom-header.ruangguru-header .container-ruangguru-header {
display: block;
}
@media (min-width: 321px) {
.custom-header.ruangguru-header .navigation__right {
top: 12px;
}
}
@media (min-width: 1300px) {
.custom-header.ruangguru-header .container-ruangguru-header {
display: flex;
}
.custom-header.ruangguru-header .navigation__content {
display: grid;
}
.custom-header.ruangguru-header .navigation__right {
top: unset;
}
.custom-header.ruangguru-header .hamburger-icon {
display: none;
}
}
.countdown-label-container {
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center;
}
.countdown-label {
color: #2c313a;
/* font-family: 'Space Grotesk'; */
font-family: Inter !important;
font-size: 8px !important;
font-style: normal;
font-weight: 400;
line-height: 10px !important;
}
.countdown-colon {
color: #cd1924 !important;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
margin-bottom: 1rem;
}
.button-ticket-sold {
background-size: 100% auto;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
color: #ac2a2c;
background-image: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/a7efca3b-cffd-4dde-a6b2-b33fe97ffd80.png');
}
@media (min-width: 767px) {
.event-slick {
margin-left: -2.5rem;
margin-right: -3.5rem;
}
.venue-slick {
margin-left: -1rem;
margin-right: -2rem;
}
.how-to-buy-slick {
margin-left: -1rem;
margin-right: -2rem;
}
}
.venue-slick .slick-slide {
margin-bottom: 1rem;
}
.event-slick .slick-next {
margin-right: 1rem !important;
}
@media (min-width: 767px) {
.event-slick .slick-slide {
margin-right: 1rem;
margin-bottom: 1rem;
}
.event-slick .slick-slide:last-child {
margin-right: 0;
}
.event-slick .slick-prev {
margin-left: 7rem;
}
.venue-slick .slick-slide {
margin-right: 1rem;
}
.venue-slick .slick-slide:last-child {
margin-right: 0;
}
.venue-slick .slick-prev {
margin-left: 7rem;
}
.purchase-box-header {
display: none;
}
}
.venue-map {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 626px;
height: fit-content;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 1rem;
background-color: #fdfcfa;
border-radius: 16px;
gap: 1rem;
}
@media (max-width: 767px) {
.venue-map {
display: grid;
grid-template-columns: 1fr;
}
}
.help {
background: #f1ebe6;
padding-bottom: 4rem;
}
.help p {
font-family: Inter;
font-size: 14px;
font-weight: 700;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #333842;
}
.help span {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #333842;
}
.help-container {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 626px;
display: flex;
margin-top: -4rem;
align-items: center;
background: white;
cursor: pointer;
justify-self: center;
border-radius: 12px;
padding: 0.75rem 1rem;
gap: 0.75rem;
}
@media (max-width: 767px) {
.help-container {
width: 95%;
max-width: 485px;
margin-top: -2rem;
}
}
.supported {
background: #f1ebe6;
}
.modal-seat-benefit {
width: 100%;
padding: 1.5rem;
}
.modal-seat-benefit ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.modal-seat-benefit li {
margin: 10px 0;
padding-left: 30px;
background-image: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/2db07c8a-6292-457c-aebc-4c1d00c29f68.png');
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
color: #333842;
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal-seat-benefit-header {
width: 100%;
display: flex;
align-items: baseline;
}
.modal-seat-benefit-header-title {
flex: 1;
display: grid;
gap: 0.75rem;
}
.modal-seat-benefit-header-title-container {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
}
.modal-seat-benefit-header-title-text {
color: #333842;
font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal-seat-benefit-header-subtitle-text {
color: #333842;
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal-seat-benefit-header-square {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #979797;
}
.modal-seat-benefit-exclusive {
width: 100%;
color: #333842;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin-top: 1rem;
margin-bottom: -0.75rem;
}
.how-to-buy {
padding: 24px 0 40px;
background: #f1ebe6;
}
.how-to-buy-slick p {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
@media (min-width: 767px) {
.how-to-buy-slick .slick-slide {
margin-right: 1rem;
margin-bottom: 1rem;
}
.how-to-buy-slick .slick-slide:last-child {
margin-right: 0;
}
}
.img-section-footer {
margin-top: -10rem;
}
@media (max-width: 767px) {
.img-section-footer {
margin-top: -7rem;
}
}
.body-wrapper {
font-family: Inter, sans-serif;
--ticket-content-width: 500px;
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f1ebe6;
min-height: 600px;
gap: 0.75rem;
padding-block: 1rem;
padding-inline: 0.75rem;
}
.subheader {
color: #ffffff;
background: #000;
padding: 1.125rem 0;
}
.separator {
border: 1px dashed #bec8d0;
width: 100%;
margin: 0;
}
.ticket-title {
color: #5e677b;
}
.ticket-subtitle {
color: #2c313a;
}
.ticket-list-state {
margin-top: 8rem;
width: 16.5rem;
color: #333842;
}
.ticket-list {
max-width: var(--ticket-content-width, 500px);
}
.help-card {
text-decoration: none;
color: inherit !important;
}
.primary-button {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 700;
width: 100%;
padding: 1rem;
border: none;
text-decoration: none;
color: #ffffff;
background: #ac2a2c;
transition: background 0.3s ease;
}
.primary-button:visited {
color: #ffffff;
}
.primary-button:hover {
color: #ffffff;
background: #8b2021;
}
.primary-button:active {
color: #ffffff;
background: #751818;
}
.loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 10rem;
gap: 1rem;
}
.spinner {
width: 48px;
height: 48px;
border: 4px solid #f1ebe6;
border-top: 4px solid #ac2a2c;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-text {
color: #333842;
font-size: 14px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Utility Classes for Layout */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.block {
display: block;
}
.flex {
display: flex;
}
.row-reverse {
flex-direction: row-reverse;
}
.stack {
display: flex;
flex-direction: column;
}
.hidden {
display: none !important;
}
.hstack {
display: flex;
flex-direction: row;
}
.w-full {
width: 100%;
}
.w-auto {
width: auto;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-4 {
flex: 4;
}
.flex-5 {
flex: 5;
}
.flex-6 {
flex: 6;
}
.flex-7 {
flex: 7;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-rows-2 {
grid-template-rows: repeat(2, 1fr);
}
.grid-rows-3 {
grid-template-rows: repeat(3, 1fr);
}
.gap-half {
gap: 0.25rem; /* 4px */
}
.gap-1 {
gap: 0.375rem; /* 6px */
}
.gap-2 {
gap: 0.625rem; /* 10px */
}
.gap-3 {
gap: 0.75rem; /* 12px */
}
.gap-4 {
gap: 1rem; /* 16px */
}
.gap-5 {
gap: 1.25rem; /* 20px */
}
.gap-6 {
gap: 1.5rem; /* 24px */
}
.gap-8 {
gap: 2rem; /* 32px */
}
.p-1 {
padding: 0.375rem; /* 6px */
}
.p-2 {
padding: 0.5rem; /* 8px */
}
.p-3 {
padding: 0.75rem; /* 12px */
}
.p-4 {
padding: 1rem; /* 16px */
}
.p-6 {
padding: 1.5rem; /* 24px */
}
.p-8 {
padding: 2rem; /* 32px */
}
.p-9 {
padding: 2.25rem; /* 36px */
}
.px-1 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-9 {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.py-1 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-9 {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.text-center {
text-align: center;
}
.text-2xs {
font-size: 8px;
}
.text-xs {
font-size: 10px;
}
.text-sm {
font-size: 12px;
}
.text-md {
font-size: 14px;
}
.text-lg {
font-size: 16px;
}
.text-xl {
font-size: 18px;
}
.text-2xl {
font-size: 20px;
}
.text-3xl {
font-size: 24px;
}
.text-4xl {
font-size: 26px;
}
.text-white {
color: white;
}
.text-gray-200 {
color: #d9d9d9;
}
.text-gray-300 {
color: #959dac;
}
.text-gray-900 {
color: #2c313a;
}
.text-teal-500 {
color: #20a4b0;
}
.font-sans {
font-family: 'Space Grotesk', sans-serif;
}
.font-inter {
font-family: Inter, sans-serif;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.font-italic {
font-style: italic;
}
.rotate-180 {
transform: rotate(180deg);
}
.border-none {
border: none;
}
.radius-8 {
border-radius: 8px;
}
.radius-9 {
border-radius: 10px;
}
.radius-10 {
border-radius: 12px;
}
.radius-full {
border-radius: 9999px;
}
.w-32 {
width: 32px;
}
.h-32 {
height: 32px;
}
.bg-white {
background: #fff;
}
.cursor-pointer {
cursor: pointer;
}
/* Responsiveness */
/* Extra Small screens (min-width: 475px) */
@media (min-width: 475px) {
.xs\:flex {
display: flex;
}
.xs\:align-center {
align-items: center;
}
}
/* Small screens (min-width: 640px) */
/* @media (min-width: 640px) {
.sm\:p-9 {
padding: 2.25rem;
}
} */
/* Medium screens (min-width: 768px) */
@media (min-width: 768px) {
.md\:w-auto {
width: auto;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:stack {
display: flex;
flex-direction: column;
}
.md\:gap-3 {
gap: 0.75rem; /* 12px */
}
.md\:gap-4 {
gap: 1rem; /* 16px */
}
.md\:gap-5 {
gap: 1.25rem; /* 20px */
}
.md\:p-9 {
padding: 2.25rem;
}
.md\:hstack {
display: flex;
flex-direction: row;
}
.md\:hidden {
display: none;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.md\:text-xs {
font-size: 10px;
}
.md\:text-sm {
font-size: 12px;
}
.md\:text-md {
font-size: 14px;
}
.md\:text-lg {
font-size: 16px;
}
.md\:text-4xl {
font-size: 26px;
}
}
/* Large screens (min-width: 1024px) */
@media (min-width: 1024px) {
.lg\:p-9 {
padding: 2.25rem;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr); /* 3 columns for desktops */
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, 1fr); /* 3 columns for desktops */
}
}
</style>
<!-- Third Party Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/analytics@0.8.1/dist/analytics.min.js"></script>
<script src="https://unpkg.com/analytics-plugin-trackable/dist/analytics-plugin-trackable.min.js"></script>
<script src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/global-assets/js/cta.js"></script>
<!-- Application Scripts -->
<script type="module" crossorigin src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/event/aoc/final/my-ticket/assets/index-BDFpfS-U.js"></script>
</head>
<body>
<div><style>/*!
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
padding: 0 !important;
}
*,
:after,
:before {
box-sizing: border-box;
}
header,
nav {
display: block;
}
p {
margin-top: 0;
}
a {
background-color: transparent;
color: #007bff;
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]),
a:not([href]):hover {
color: inherit;
text-decoration: none;
}
img {
border-style: none;
}
img,
svg {
vertical-align: middle;
}
svg {
overflow: hidden;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
overflow: visible;
text-transform: none;
}
[type='button'],
button {
-webkit-appearance: button;
}
[type='button']:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
[type='button']::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.navbar {
padding: 0.5rem 1rem;
position: relative;
-ms-flex-align: center;
-ms-flex-pack: justify;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
@-webkit-keyframes progress-bar-stripes {
0% {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
0% {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-webkit-keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@media print {
*,
:after,
:before {
box-shadow: none !important;
text-shadow: none !important;
}
a:not(.btn) {
text-decoration: underline;
}
img {
page-break-inside: avoid;
}
p {
orphans: 3;
widows: 3;
}
@page {
size: a3;
}
.navbar {
display: none;
}
}
.cta {
border-radius: 9999px;
background: var(--k-12-base-light-theme-action-primary-default, #f26d0f);
width: 100%;
border: none;
color: var(--k-12-base-light-theme-text-solid-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
}
.cta.dark,
.cta.dark-green,
.cta.blue-indigo,
.cta.violet,
.cta.roc {
color: #000;
background-color: #fff;
}
@media (max-width: 1024px) {
.navbar {
padding: 0 !important;
}
}
.navig-link a {
background-color: transparent;
color: #474747;
text-decoration: none !important;
}
.navig-link.dark a,
.navig-link.dark-green a,
.navig-link.roc a,
.navig-link.blue-indigo a,
.navig-link.violet a,
.navig-link.home a {
color: #fff !important;
}
.navig-dropdown-area a:hover,
.navig-link a:hover {
background: 0 !important;
color: #3cc4e5 !important;
cursor: pointer;
text-decoration: none !important;
}
.ruangguru-header {
background: #fff;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13);
position: fixed;
top: 0;
width: 100%;
z-index: 100;
padding: 0 !important;
}
.ruangguru-header.dark {
background: #000;
}
.ruangguru-header.dark-green {
background: #022527;
}
.ruangguru-header.roc {
background-color: #1d1110;
}
.ruangguru-header.blue-indigo {
background: #444fb7;
}
.ruangguru-header.home {
background: linear-gradient(257.67deg, #21a5b1 46.16%, #0e9bdf 95.13%);
}
.ruangguru-header .navig-link {
color: #474747 !important;
font-family: Inter;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.ruangguru-header.dark .navig-link,
.ruangguru-header.dark-green .navig-link,
.ruangguru-header.blue-indigo .navig-link,
.ruangguru-header.roc .navig-link {
color: #fff !important;
}
.navigation__left {
display: flex;
}
.logo-header {
padding: 5px 0;
}
.navig-link:hover {
background: 0 !important;
color: #3cc4e5 !important;
cursor: pointer;
}
.navig-link-dropdown {
white-space: nowrap;
}
.navig-link-dropdown:after {
border-bottom: 0;
border-left: 0.3em solid transparent;
border-right: 0.3em solid transparent;
border-top: 0.3em solid;
content: '';
display: inline-block;
margin-left: 0.255em;
transition: 0.7s;
vertical-align: 0.255em;
}
.navig-link-dropdown[aria-expanded='true']:after {
transform: scaleY(-1);
}
.navig-link-dropdown[aria-expanded='false']:after {
transform: scaleY(1);
}
.logo-product {
margin: 0 0 5px !important;
}
.logo-product img {
min-height: 3rem;
object-fit: scale-down;
object-position: left;
width: 100%;
}
#lp_ea {
display: flex;
}
.item-services a,
.item-center a,
.text-product {
font-family: Inter;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotateX(-90deg);
}
50% {
transform: rotateX(20deg);
}
to {
opacity: 1;
transform: rotateX(0deg);
}
}
@media (min-width: 1025px) {
.spacer-rg {
height: 4.5rem;
}
.container-ruangguru-header {
align-items: center;
padding: 18px 10px;
position: relative;
}
.ruangguru-header.home .page-center {
width: 90% !important;
}
.logo-header {
margin-right: 16px;
}
.navigation__right {
position: absolute;
right: 0;
}
#produk_item {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
float: left;
font-size: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
list-style: none;
padding: 0.5rem 10px;
position: absolute;
text-align: left;
top: 70%;
width: 1050px;
z-index: 1000;
left: 7%;
}
.item-product,
.item-services,
.item-center {
padding: 12px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.item-product:hover,
.item-services:hover,
.item-center:hover {
background-color: #eaf8f9 !important;
cursor: pointer;
}
#services_item,
#center_item {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
flex-flow: column;
float: left;
font-size: 1rem;
list-style: none;
margin: 0;
min-width: 10rem;
padding: 0.5rem 0;
position: absolute;
text-align: left;
top: 70%;
z-index: 1000;
}
#services_item {
left: 44rem;
}
#center_item {
left: 14rem;
}
.container-ruangguru-header {
display: flex;
flex-direction: row;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: 100%;
flex-grow: 1;
max-height: 500px;
overflow-y: scroll;
padding-bottom: 20px;
text-align: center;
}
}
@media (min-width: 1078px) {
.hamburger-icon {
display: none;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: auto;
flex-grow: 0;
max-height: unset;
overflow-y: auto;
padding-bottom: 0;
text-align: center;
}
.navigation__content .navig-link {
margin: 0 14px;
padding: 8px 8px 8px 0;
}
.navigation__content {
display: grid;
grid-auto-flow: column;
}
}
@media (min-width: 321px) and (max-width: 767px) {
.spacer-rg {
height: 4rem;
}
.container-ruangguru-header {
align-items: center;
padding: 10px;
position: relative;
}
.navigation__content {
padding-bottom: 20px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-size: 14px;
font-weight: 400;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.hamburger-icon {
align-self: center;
transform: scale(0.8);
}
.navig-dropdown-area {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
font-size: 1rem;
left: 0;
list-style: none;
margin: 10px;
min-width: 10rem;
text-align: left;
top: 100%;
z-index: 1000;
}
#produk,
#program,
#services {
padding: 20px 0 0;
}
#produk_item,
#services_item,
#center_item {
padding: 1rem 20px;
}
.text-product {
margin-bottom: 0;
}
.navigation__right {
position: absolute;
right: 0;
top: 12px;
}
.navig-link {
padding: 28px 0 0;
text-align: center;
}
.item-product {
margin-bottom: 12px;
padding: 0.25rem 0.5rem 0.5rem;
}
.item-services,
.item-center {
margin-bottom: 0.35rem;
padding: 0.5rem 0;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: 100%;
flex-grow: 1;
max-height: 500px;
overflow-y: scroll;
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.container-ruangguru-header {
align-items: center;
padding: 10px;
position: relative;
}
.hamburger-icon {
align-self: center;
transform: scale(0.8);
}
.logo-header {
margin-left: 20px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-size: 16px;
font-weight: 400;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.navig-dropdown-area {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
font-size: 1rem;
left: 0;
list-style: none;
margin: 0 10px;
min-width: 10rem;
text-align: left;
top: 100%;
z-index: 1000;
}
#produk_item,
#services_item,
#center_item {
padding: 1rem 20px;
}
.text-product {
margin-bottom: 0;
}
.navigation__right {
position: absolute;
right: 0;
top: 12px;
}
.navig-link {
padding: 28px 0 0;
text-align: center;
}
.item-product {
margin-bottom: 18px;
padding: 0.25rem 1.5rem;
}
.item-services,
.item-center {
margin-bottom: 18px;
padding: 2px 0;
}
.navigation__content {
display: none;
}
}
@media (max-width: 320px) {
.spacer-rg {
height: 3rem;
}
.container-ruangguru-header {
align-items: center;
position: relative;
}
.navigation__content {
padding-bottom: 20px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-size: 14px;
font-weight: 400;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.hamburger-icon {
align-self: center;
transform: scale(0.8);
}
.logo-header {
margin-left: 10px;
transform: scale(0.8);
}
.navig-dropdown-area {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
font-size: 1rem;
left: 0;
list-style: none;
margin: 10px;
min-width: 10rem;
text-align: left;
top: 100%;
z-index: 1000;
}
#produk,
#program,
#services {
padding: 20px 0 0;
}
#produk_item {
padding: 1rem 20px;
}
#services_item,
#center_item {
padding: 10px 20px;
}
.text-product {
margin-bottom: 0;
}
.navigation__right {
position: absolute;
right: 0;
top: 5px;
transform: scale(0.8);
}
.navig-link {
padding: 28px 0 0;
text-align: center;
}
.item-product {
margin-bottom: 18px;
padding: 0.25rem 1.5rem;
}
.item-services,
.item-center {
margin-bottom: 18px;
padding: 2px 0;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: 100%;
flex-grow: 1;
max-height: 500px;
overflow-y: scroll;
text-align: center;
}
}
.wrapper-profile-login {
position: relative;
}
.container-login_details {
position: relative;
}
.container-user_profile {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: var(--size-radius-rad-full, 9999px);
border: 1px solid var(--K12-Base-Theme-Border-Default, #cfd3db);
background: var(--K12-Base-Theme-Action-Secondary-Default, #fff);
padding: 4px 8px;
cursor: pointer;
position: relative;
}
.profile-picture {
border-radius: 100%;
}
.display-none {
display: none !important;
}
.display-1 {
font-size: 6rem;
}
.display-1,
.display-2 {
font-weight: 300;
line-height: 1.2;
}
.display-2 {
font-size: 5.5rem;
}
.display-3 {
font-size: 4.5rem;
}
.display-3,
.display-4 {
font-weight: 300;
line-height: 1.2;
}
.display-4 {
font-size: 3.5rem;
}
/* Text utility classes */
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-justify {
text-align: justify !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-wrap {
white-space: normal !important;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-white {
color: #fff !important;
}
.text-primary {
color: #007bff !important;
}
.text-secondary {
color: #6c757d !important;
}
/*FLOATING BANNER*/
.floating,
.floating > img {
width: 100%;
}
.hero-cta-wrapper {
align-items: center;
display: flex;
justify-content: center;
padding: 0.1rem 0 0.35rem;
position: relative;
}
.hero-timer-cta p {
color: #fff;
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 24px;
padding-right: 0.5rem;
margin: 0 !important;
}
.text-countdown-hero div,
.text-countdown-hero span {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.text-countdown-hero {
align-items: center;
display: flex;
flex-direction: row;
gap: 0.25rem;
justify-content: center;
}
.text-countdown-hero div,
.text-countdown-hero span {
color: #fff;
letter-spacing: 0.01em;
margin: 0;
}
.text-countdown-hero div {
grid-gap: 0.25rem;
align-items: center;
display: grid;
grid-template-columns: auto auto;
}
.text-countdown-hero span {
color: #fff;
background: linear-gradient(0deg, #cd1924 0%, #cd1924 100%), linear-gradient(133deg, #ea4952 1.52%, #cd1924 50%, #9a0912 98.48%), rgb(0 0 0 / 0.25);
border-radius: 8px;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Floating banner positioning for countdown */
.container-floating-banner,
.floating {
position: relative;
}
/* Override existing hero-timer-cta to position at bottom center of floating banner */
.hero-timer-cta {
position: absolute !important;
bottom: 6% !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: transparent !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 8px !important;
text-align: center !important;
font-size: 14px !important;
z-index: 10 !important;
display: flex;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
}
.hero-timer-cta .countdown-hero {
margin-top: 0 !important;
}
.hero-timer-cta .text-countdown-hero {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
}
.hero-timer-cta .text-countdown-hero div {
display: flex !important;
align-items: center !important;
color: white !important;
}
.hero-cta {
background: #fff;
border: 8px solid #7ac9d0;
border-radius: 96px;
color: #2c313a;
display: inline-block;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
margin: 0;
padding: 0.5rem 1.75rem;
text-align: center;
text-decoration: none;
}
@media (max-width: 767px) {
.hero-cta {
border: 8px solid #7ac9d0;
font-size: 12px;
line-height: 18px;
padding: 0.5rem 1.75rem;
}
.hero-timer-cta p {
font-size: 12px;
line-height: 18px;
}
.text-countdown-hero div,
.text-countdown-hero span {
font-size: 10px;
line-height: 12px;
}
.text-countdown-hero span {
width: 1.25rem;
height: 1.25rem;
border-radius: 4px;
}
.hero-timer-cta {
width: 100% !important;
bottom: 4% !important;
justify-content: flex-start !important;
}
}
</style>
<style>
.header-guest-mark-layout {
position: absolute;
width: 100%;
display: none;
justify-content: flex-end;
}
.header-guest-mark-triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid #f1bb53;
margin-right: 2.25rem;
margin-bottom: -0.5rem;
}
.header-guest-mark-container {
display: flex;
background-color: #f1bb53;
width: fit-content;
border-radius: 12px;
padding: 0.5rem 0.75rem;
gap: 1rem;
justify-items: center;
}
.header-guest-mark-container p {
font-family: Space Grotesk;
font-size: 12px;
font-weight: 700;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
padding: 0;
}
@media (min-width: 1300px) {
.header-guest-mark-layout {
margin-top: 7rem;
}
}
@media (max-width: 1299px) {
.header-guest-mark-layout {
margin-top: 0;
}
}
@media (max-width: 767px) {
.header-guest-mark-triangle {
margin-right: 2.5rem;
}
}
</style>
<nav class="ruangguru-header dark custom-header">
<div class="page-center">
<div class="container-ruangguru-header">
<div class="navigation__left">
<div class="hamburger-icon">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/eed92e13-500e-4cc5-b049-77c60bb3e857.svg"
alt="Dropdown Navigation Icon" loading="lazy" />
</div>
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/","item_type": "image","item_name": "Logo ruangguru","item_category": "cta","item_position": 0,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/">
<div class="logo-header">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3a49e762-3e03-410f-96bf-25d133e49eb1.svg"
alt="Logo ruangguru dark" loading="lazy" />
</div>
</a>
</div>
<div class="navigation__content">
<div class="navig-link navig-link-dropdown dark" id="produk" aria-expanded="false">
<a href="#">Produk</a>
</div>
<div class="navig-dropdown-area closed" id="produk_item">
<!-- ruangbelajar -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruangbelajar","item_type": "link","item_name": "ruangbelajar","item_category": "cta","item_position": 1,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruangbelajar">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/rb.svg"
alt="Logo ruangbelajar" loading="lazy" />
</div>
<p class="text-product">Belajar seru dengan video dan latihan soal, anti remed!</p>
</div>
</a>
<!-- BA -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.brainacademy.id","item_type": "link","item_name": "brainacademy","item_category": "cta","item_position": 1,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.brainacademy.id">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/03%20-%20Homepage%20Brainacademy%202022/Header%20to%20Live%20Teaching/logo_BA.svg"
alt="Logo Brain Academy" loading="lazy" />
</div>
<p class="text-product">Bimbel Tatap Muka & Live Interaktif bersama STAR Master Teacher</p>
</div>
</a>
<!-- mathchamps -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/mathchamps","item_type": "link","item_name": "mathchamps","item_category": "cta","item_position": 2,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.ruangguru.com/mathchamps">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/723d8e19-b594-49cf-a098-07f5379d5d5f.png?convert=webp&h=70"
alt="Logo math champs" loading="lazy" width="104" height="40" />
</div>
<p class="text-product">Kursus matematika dan logika untuk anak 5-14 tahun dengan kurikulum Singapura</p>
</div>
</a>
<!-- mathchamps sempoa -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/mathchamps/sempoa","item_type": "link","item_name": "mathchamps_sempoa","item_category": "cta","item_position": 3,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.ruangguru.com/mathchamps/sempoa">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/9aa7023e-2d40-4e19-9236-4907f5042a3e.png?convert=webp&h=70"
alt="Logo math champs" loading="lazy" width="104" height="40" />
</div>
<p class="text-product">Kursus hitung cepat aritmatika dengan sempoa untuk anak 4-12 tahun</p>
</div>
</a>
<!-- memory champs -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.memoryacademy.id/","item_type": "link","item_name": "memorychamps","item_category": "cta","item_position": 4,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.memoryacademy.id/">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/ac89298a-3fc9-4f35-862c-b027006929e0.png?convert=webp&h=70"
alt="Logo math champs" loading="lazy" width="104" height="40" />
</div>
<p class="text-product">Kursus latihan daya ingat, fokus, dan konsentrasi untuk mendukung prestasi
akademik</p>
</div>
</a>
<!-- EA -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.english-academy.id/","item_type": "link","item_name": "english-academy","item_category": "cta","item_position": 5,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.english-academy.id/">
<div class="item-product">
<div class="logo-product" id="lp_ea">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/English%20Academy/logo-ea-riddle.svg?convert=webp"
alt="Logo English Academy" loading="lazy" />
</div>
<p class="text-product">Kursus Bahasa Inggris dengan Pengajar internasional dan kurikulum berstandar
internasional</p>
</div>
</a>
<!-- ruanguji -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruanguji","item_type": "link","item_name": "ruanguji","item_category": "cta","item_position": 6,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruanguji">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/ruanguji.svg"
alt="Logo ruanguji" loading="lazy" />
</div>
<p class="text-product">Ikut tryout online dan lihat hasilnya di sini!</p>
</div>
</a>
<!-- schoters -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.schoters.com","item_type": "link","item_name": "schoters","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.schoters.com">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3ecc92be-4ee0-475f-bd4c-d1f5e733f012.png?convert=webp&h=120"
alt="Logo Schoters" loading="lazy" height="40" />
</div>
<p class="text-product">Bimbingan kuliah & kerja di luar negeri #1 di Indonesia, dengan kelas bahasa
terlengkap!</p>
</div>
</a>
<!-- rgprivat -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/privat","item_type": "link","item_name": "ruangles","item_category": "cta","item_position": 8,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/privat">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=112&name=logo-ruangguru-privat.png"
alt="Logo ruangles" width="112" loading="lazy" srcset="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=56&name=logo-ruangguru-privat.png 56w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=112&name=logo-ruangguru-privat.png 112w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=168&name=logo-ruangguru-privat.png 168w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=224&name=logo-ruangguru-privat.png 224w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=280&name=logo-ruangguru-privat.png 280w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=336&name=logo-ruangguru-privat.png 336w" sizes="(max-width: 112px) 100vw, 112px" />
</div>
<p class="text-product">Belajar privat dengan guru terbaik pilihan Ruangguru</p>
</div>
</a>
<!-- kalananti -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.kalananti.id/","item_type": "link","item_name": "kalananti","item_category": "cta","item_position": 9,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.kalananti.id/">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/kalananti%202022/Kalananti%20by%20Ruangguru.png"
alt="Logo kalananti" loading="lazy" height="40" />
</div>
<p class="text-product">Kursus coding dan robotic anak usia 5-15 tahun untuk mengasah logika dan
kreativitas</p>
</div>
</a>
<!-- ags -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.altaglobalschool.com/","item_type": "link","item_name": "kalananti","item_category": "cta","item_position": 10,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.altaglobalschool.com/">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/d56be6bf-3717-4da1-9763-438f02340246.png?convert=webp&h=120"
alt="Logo Schoters" loading="lazy" height="30" />
</div>
<p class="text-product">Sekolah blended learning untuk PAUD-SMA, siapkan siswa kuliah di universitas
terbaik, dalam & luar negeri</p>
</div>
</a>
<!-- SA -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://skillacademy.com/","item_type": "link","item_name": "skillacademy","item_category": "cta","item_position": 11,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://skillacademy.com/">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/skillacademy.svg"
alt="Logo Skill Academy" loading="lazy" />
</div>
<p class="text-product">Kursus online untuk meningkatkan technical & soft skill kamu</p>
</div>
</a>
<!-- rg for kids -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/for-kids","item_type": "link","item_name": "ruangguru for kids","item_category": "cta","item_position": 12,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/for-kids">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/00%20-%20Homepage%20Ruangguru%202022/Produk/logo_rgfk.svg?convert=webp"
alt="Logo For Kids" width="100" loading="lazy" />
</div>
<p class="text-product">Kursus online untuk anak 4-7 tahun dengan program calistung, bahasa Inggris, dan
sains</p>
</div>
</a>
<!-- dafalulu -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/dafa-lulu","item_type": "link","item_name": "dafalulu","item_category": "cta","item_position": 13,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/dafa-lulu">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/00%20-%20Homepage%20Ruangguru%202022/logo-dafa-lulu.png?convert=webp&height=44&name=logo-dafa-lulu.png"
height="44" alt="Logo dafa lulu" loading="lazy" />
</div>
<p class="text-product">Belajar bersama Dafa, Lulu, dan teman petualang untuk siswa SD kelas 1 - 6</p>
</div>
</a>
<!-- roboguru -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://roboguru.ruangguru.com/","item_type": "link","item_name": "roboguru","item_category": "cta","item_position": 14,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://roboguru.ruangguru.com/">
<div class="item-product">
<div class="logo-product">
<img
src="https://roboguru-forum-cdn.ruangguru.com/image/20b7b17a-62ba-43ee-bea8-b71c10f5fb0c.png?convert=webp"
alt="Logo roboguru" width="125" loading="lazy" />
</div>
<p class="text-product">Foto dan upload soal susahmu dan dapatkan semua jawabannya di sini!</p>
</div>
</a>
<!-- roboguru plus -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/roboguruplus","item_type": "link","item_name": "roboguruplus","item_category": "cta","item_position": 16,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/roboguruplus">
<div class="item-product">
<div class="logo-product">
<img
src="https://roboguru-forum-cdn.ruangguru.com/image/ea267d76-9d20-45b0-9c2c-88e78c199f5d.png?convert=webp"
width="155" alt="Logo roboguru plus" loading="lazy" />
</div>
<p class="text-product">Konsultasikan soal tersulit kamu sebanyak-banyaknya dengan tutor online terbaik
</p>
</div>
</a>
<!-- ruangkerja -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangkerja.id/","item_type": "link","item_name": "ruangkerja","item_category": "cta","item_position": 17,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.ruangkerja.id/">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/ruangkerja.svg"
alt="Logo ruangkerja" loading="lazy" />
</div>
<p class="text-product">Aplikasi Pelatihan Online #1 untuk Perusahaan & Lembaga</p>
</div>
</a>
<!-- ruangkelas -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruangkelas","item_type": "link","item_name": "ruangkelas","item_category": "cta","item_position": 18,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruangkelas">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/ruangkelas.svg"
alt="Logo ruangkelas" loading="lazy" />
</div>
<p class="text-product">Sistem Kelola Pembelajaran Jarak Jauh GRATIS!</p>
</div>
</a>
</div>
<div class="navig-link navig-link-dropdown dark" id="center" aria-expanded="false">
<a href="#">Offline Centers</a>
</div>
<div class="navig-dropdown-area closed" id="center_item" aria-expanded="false">
<div class="item-center">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/mathchamps/branch","item_type": "link","item_name": "mathchamps branch","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/mathchamps/branch">
Mathchamps
</a>
</div>
<div class="item-center">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.brainacademy.id/branch","item_type": "link","item_name": "brain academy branch","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.brainacademy.id/branch/">
Brain Academy
</a>
</div>
<div class="item-center">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.english-academy.id/center","item_type": "link","item_name": "EA center","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.english-academy.id/center/">
English Academy
</a>
</div>
</div>
<div class="navig-link dark" id="program">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/program","item_type": "link","item_name": "Program","item_category": "cta","item_position": 2,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/program">
Program
</a>
</div>
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/promo","item_type": "link","item_name": "Promo","item_category": "promotion","item_position": 3,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/promo">
Promo
</a>
</div>
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/event","item_type": "link","item_name": "Event","item_category": "cta","item_position": 4,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/event">
Event
</a>
</div>
<!-- <div class="navig-link dark">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/beasiswa","item_type": "link","item_name": "Beasiswa","item_category": "cta","item_position": 5,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/beasiswa"
>
Beasiswa
</a>
</div> -->
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/testimoni","item_type": "link","item_name": "Testimoni","item_category": "cta","item_position": 6,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/testimoni">
Testimoni
</a>
</div>
<!-- <div class="navig-link navig-link-dropdown dark" id="services" aria-expanded="false">
<a href="#">Layanan</a>
</div>
<div class="navig-dropdown-area closed" id="services_item" aria-expanded="false">
<div class="item-services">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruangbelajar/perpanjang-paket","item_type": "link","item_name": "Cara Perpanjang Paket","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruangbelajar/perpanjang-paket"
>
Cara Perpanjang Paket
</a>
</div>
<div class="item-services">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/cara-bayar","item_type": "link","item_name": "Cara Bayar","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/cara-bayar"
>
Cara Bayar
</a>
</div>
<div class="item-services">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/cicilan","item_type": "link","item_name": "Cicilan","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/cicilan"
>
Cicilan
</a>
</div>
</div> -->
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/blog","item_type": "link","item_name": "Ruangbaca","item_category": "cta","item_position": 8,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/blog/">
Ruangbaca
</a>
</div>
</div>
<div class="navigation__right">
<div class="button-langganan-cta" id="btn-header">
<div class="wrapper-profile-login">
<button class="cta dark" id="login-btn">Login</button>
<div id="login-details" class="container-login_details display-none">
<div class="container-user_profile" id="user-profile"></div>
<button class="cta display-none dark" id="logout-btn">
<img width="18px" height="auto" class="logout-icon"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/be30e3a3-7e6f-4a38-b235-eb1296d7e41c.svg" />
Logout
</button>
</div>
</div>
<script>
const loginLink = document.getElementById('login-btn');
const logoutLink = document.getElementById('logout-btn');
const loginDetails = document.getElementById('login-details');
document.addEventListener('DOMContentLoaded', function () {
let profileDetailsEl = document.getElementById('user-profile');
if (authLib.isUserLoggedIn()) {
loginLink.classList.add('display-none');
loginDetails.classList.remove('display-none');
let profileDetails = `<img class="profile-picture" width="32" height="32" src="${decodeURIComponent(getCookie('profpic'))}" />
<p class="profile-name">${decodeURIComponent(getCookie('name')).split('"').join('')}</p>
<img class="arrow-icon" width="20" height="20" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/02a69613-6573-48e8-bae6-b628ab20cd43.svg" />`;
profileDetailsEl.innerHTML = profileDetails;
profileDetailsEl.classList.remove('display-none');
} else {
loginLink.classList.remove('display-none');
loginDetails.classList.add('display-none');
}
loginLink.addEventListener('click', function (event) {
event.preventDefault();
authLib.doLogin();
});
logoutLink.addEventListener('click', function (event) {
event.preventDefault();
authLib.doLogout();
});
});
document.addEventListener('click', e => {
if (!loginDetails.contains(e.target)) {
logoutLink.classList.add('display-none');
}
});
</script>
</div>
</div>
</div>
</div>
</nav></div>
<div class="body-container">
<div class="body-wrapper">
<div class="subheader">
<p class="font-sans font-bold text-center text-md">TIKET SAYA</p>
</div>
<section class="main-content">
<div id="ticket-list-loading" class="loading-spinner">
<div class="spinner"></div>
<p class="loading-text">Memuat tiket...</p>
</div>
<div id="ticket-list-state" class="ticket-list-state stack gap-5 hidden">
<img id="ticket-list-state-icon" alt="Belum ada tiket" width="264" height="148" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/ac03cfc1-67e6-4e7d-8ea4-425f7c5205aa.png" />
<p id="ticket-list-state-message" class="text-sm text-center md:text-md">Belum ada tiket aktif. Jika ada akan ditampilkan di sini.</p>
<button id="ticket-list-state-button" class="primary-button hidden">MASUK/DAFTAR</button>
</div>
<div id="ticket-list" class="ticket-list stack gap-3 w-full hidden">
<a id="ticket-list-help" href="#" target="_blank" class="help-card flex align-center justify-between p-3 radius-10 bg-white">
<div class="flex gap-2 align-center">
<img alt="Layanan Pelanggan" height="48" width="48" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/8c1ed81b-5eb1-48ab-a33c-4b67ec85233a.png" />
<div class="stack gap-1">
<p class="text-md font-bold">Ada kendala?</p>
<p class="text-sm">Temukan solusinya di sini</p>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.8 17.7c-.4-.4-.4-1 0-1.4l4.3-4.3-4.3-4.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l5 5c.2.2.3.5.3.7 0 .3-.1.5-.3.7l-5 5c-.4.4-1 .4-1.4 0Z"
fill="#2C313A"
/>
</svg>
</div>
</a>
</div>
</section>
</div>
<style>.footer__year {
padding-top: 5rem;
}
.ic-new__img {
margin: auto 0;
display: flex;
}
.ic-new__img img {
width: fit-content;
}
.font-base-footer {
font-family: Inter, 'sans-serif';
font-weight: 400;
font-size: 14px !important;
font-style: normal;
letter-spacing: 0;
color: #0a2540;
margin-bottom: 0;
}
.font-bold {
font-weight: 700;
}
.font-white {
color: #fff !important;
}
.font-semi-bold {
font-weight: 600;
}
.center {
text-align: center;
}
.footer {
background: #0a2540;
overflow: hidden;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
Noto Sans,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
}
.footer.roc {
background-color: #1d1110;
color: white;
}
.contact__container {
display: grid;
grid-template-columns: 2fr 11fr;
gap: 0.625rem;
word-break: break-all;
}
.contact__container--text {
margin: auto 0;
}
.group-contact {
display: grid;
row-gap: 0.5rem;
}
.sec-follow__content--socmed {
display: inline-flex;
}
.sec-follow__content--socmed a {
padding-right: 0.25rem;
}
.ic-new {
display: inline-flex;
width: max-content;
gap: 0.25rem;
}
@media (min-width: 1025px) {
.sec-address__detail {
margin: 1rem 0 2rem;
padding-right: 2rem;
}
.sec-follow {
margin-top: -10rem;
}
.title {
font-size: 48px;
line-height: 64px;
}
.subtitle {
font-size: 32px;
line-height: 48px;
text-align: center;
}
.desc-hero {
font-size: 24px;
line-height: 36px;
margin-top: 20px;
}
.desc {
font-size: 16px;
line-height: 24px;
}
.footer {
padding: 5rem 0 1.5rem;
}
.footer__title {
font-size: 1rem;
margin-bottom: 1rem;
min-height: 1.25rem;
}
.footer__title--hq {
font-size: 1rem;
}
.footer__content--top {
display: grid;
grid-template-columns: 3fr 9fr;
}
.sec-menu {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.sec-app__content {
display: grid;
gap: 0.75rem;
}
.footer__content--bottom {
display: grid;
grid-template-columns: 9.75fr 2.25fr;
}
}
@media (max-width: 1024px) {
.sec-address__detail {
margin: 1rem 0 2rem;
}
.sec-app {
margin-bottom: 2.625rem;
text-align: center;
}
.title {
font-size: 24px;
line-height: 36px;
}
.subtitle {
font-size: 20px;
line-height: 30px;
text-align: center;
}
.desc-hero {
font-size: 16px;
line-height: 24px;
margin-top: 1rem;
}
.desc {
font-size: 14px;
line-height: 27px;
}
.footer {
padding: 2rem 0;
}
.sec-app__content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-top: 1rem;
}
.sec-menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.sec-follow {
text-align: center;
}
.footer__title {
padding-bottom: 0.75rem;
}
}
ul.no-space {
padding: 0;
}
ul.no-space li {
margin-bottom: 0.25rem;
}
.contact__container--text a,
ul.no-space a {
text-decoration: none;
}
.contact__container--text a:hover,
ul.no-space a:hover {
color: #2eb5c0 !important;
}
div.sec-address__logo img,
div.ic-new__img img {
display: inline-block;
}
.sec-app__content img {
max-width: 100%;
}
</style>
<section class="footer dark" id="footer">
<div class="page-center">
<div class="footer__content">
<div class="footer__content--top">
<div class="sec-app">
<div class="sec-address">
<div class="sec-address__logo">
<a href="https://www.ruangguru.com/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/logo%20rg.svg" alt="Logo Ruangguru" loading="lazy" />
</a>
</div>
<div class="sec-address__detail">
<p class="font-base-footer font-white font-bold footer__title--hq">RUANGGURU HQ</p>
<p class="font-base-footer font-white footer-address">Gedung Sinarmas MSIG Tower Lt. 33. Jl. Jenderal Sudirman Kav. 21, Karet Kuningan, Setiabudi, Jakarta Selatan, Jakarta 12920</p>
</div>
</div>
<p class="font-base-footer font-white font-bold footer__title">Coba GRATIS Aplikasi Ruangguru</p>
<div class="sec-app__content">
<div class="sec-app__content--gplay">
<a target="_blank" rel="nofollow" href="https://play.google.com/store/apps/details?id=com.ruangguru.livestudents&hl=in">
<img
class="footer-socmed"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/btn_googleplay%20(1).svg"
loading="lazy"
alt="Button Google Play Footer "
/>
</a>
</div>
<div class="sec-app__content--appstore">
<a target="_blank" rel="nofollow" href="https://apps.apple.com/id/app/ruangguru-solusi-belajar/id1099742206?l=id">
<img
class="footer-socmed"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/btn_appstore%20(1).svg"
loading="lazy"
alt="Button App Store Footer "
/>
</a>
</div>
<div class="sec-app__content--huawei">
<a target="_blank" rel="nofollow" href="https://appgallery.huawei.com/#/app/C102352375">
<picture>
<source type="image/webp" srcset="https://roboguru-forum-cdn.ruangguru.com/image/e5df282a-3b96-4af4-8b3c-a4634b511680.png?convert=webp " />
<source type="image/png" srcset="https://roboguru-forum-cdn.ruangguru.com/image/e5df282a-3b96-4af4-8b3c-a4634b511680.png " />
<img class="footer-socmed" src="https://roboguru-forum-cdn.ruangguru.com/image/e5df282a-3b96-4af4-8b3c-a4634b511680.png" alt="Button AppGallery Footer" loading="lazy" width="156" />
</picture>
</a>
</div>
</div>
</div>
<div class="sec-menu">
<div class="sec-menu__rg">
<p class="font-base-footer font-white font-bold footer__title">Produk Ruangguru</p>
<ul type="none" class="no-space">
<li>
<a class="font-base-footer font-white" href="https://roboguru.ruangguru.com" target="_blank">Roboguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/roboguruplus">Roboguru Plus</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/dafa-lulu">Dafa dan Lulu</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/for-kids">Ruangguru for Kids</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/bisnis">Ruangguru for Business</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/ruanguji">Ruanguji</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/blog/">Ruangbaca</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/ruangkelas">Ruangkelas</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/ruangbelajar">Ruangbelajar</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://pengajar.ruangguru.com/">Ruangpengajar</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/privat">Ruangguru Privat</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangpeduli.org/" target="_blank">Ruangpeduli</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/airis">Airis</a>
</li>
</ul>
</div>
<div class="sec-menu__lainnya">
<p class="font-base-footer font-white font-bold footer__title">Produk Lainnya</p>
<ul type="none" class="no-space">
<li>
<a class="font-base-footer font-white" href="https://www.brainacademy.id/" target="_blank">Brain Academy</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.english-academy.id/" target="_blank">English Academy</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://skillacademy.com/" target="_blank">Skill Academy</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangkerja.id/" target="_blank">Ruangkerja</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.schoters.com/id/" target="_blank">Schoters</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.kalananti.id/" target="_blank">Kalananti</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/mathchamps" target="_blank">Math Champs</a>
</li>
</ul>
</div>
<div class="sec-menu__bantuan">
<p class="font-base-footer font-white font-bold footer__title">Bantuan & Panduan</p>
<ul type="none" class="no-space">
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/company-credentials">Company Credentials</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/beasiswa">Beasiswa Ruangguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/cicilan">Cicilan Ruangguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/promo">Promo Ruangguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://ticketing.ruangguru.com/help?request_type_id=459" target="_blank">Vulnerability Report</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/bantuan#layanan">Layanan Pengaduan</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/terms-conditions">Syarat & Ketentuan</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/privacy-policy">Kebijakan Privasi</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/about-us">Tentang Kami</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/contact-us">Kontak Kami</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/press">Press Kit</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/bantuan">Bantuan</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://career.ruangguru.com/">Karier</a>
</li>
</ul>
</div>
<div class="sec-menu__contact">
<p class="font-base-footer font-white font-bold footer__title">Hubungi Kami</p>
<div class="group-contact">
<div class="contact__container">
<div class="contact__container--img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-mail.svg" loading="lazy" alt="Logo Email Footer" />
</div>
<div class="contact__container--text">
<a class="font-base-footer font-white" href="mailto:info@ruangguru.com">info@ruangguru.com</a>
</div>
</div>
<div class="contact__container">
<div class="contact__container--img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-phone.svg" loading="lazy" alt="Logo Phone Footer" />
</div>
<div class="contact__container--text">
<a class="font-base-footer font-white" href="tel:02130930000">02130930000</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer__content--bottom">
<div></div>
<div class="sec-follow">
<p class="font-base-footer font-white font-bold footer__title">Ikuti Kami</p>
<div class="sec-follow__content">
<div class="sec-follow__content--socmed">
<a target="_blank" href="https://www.instagram.com/ruangguru/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-ig.svg?convert=webp" loading="lazy" alt="Logo Instagram Footer" />
</a>
<a target="_blank" href="https://www.facebook.com/ruanggurucom/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-fb.svg?convert=webp" loading="lazy" alt="Logo Facebook Footer" />
</a>
<a target="_blank" href="https://twitter.com/ruangguru/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-twitter.svg?convert=webp" loading="lazy" alt="Logo Twitter Footer" />
</a>
<a target="_blank" href="https://www.youtube.com/ruangguru">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-youtube.svg?convert=webp" loading="lazy" alt="Logo Youtube Footer" />
</a>
<a target="_blank" href="https://www.linkedin.com/company/ruangguru-com">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-linkedin.svg?convert=webp" loading="lazy" alt="Logo LinkedIn Footer" />
</a>
<a target="_blank" href="https://www.tiktok.com/@ruangguru">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/tiktok-ic-white-40.svg?convert=webp" loading="lazy" alt="Logo TikTok Footer" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer__year">
<p class="font-base-footer font-white font-bold center">
©
<span id="full-year"></span>
Ruangguru. All Rights Reserved PT. Ruang Raya Indonesia
</p>
</div>
</div>
</section>
</div>
<style>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400,700&display=swap');
.sticky-bottom {
z-index: 1;
position: sticky;
padding: 0;
bottom: 0;
width: 100%;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
}
.sticky-rows {
width: 100%;
display: flex;
justify-content: center;
background-color: #801e1e;
}
.sticky-menu {
width: 100%;
max-width: 767px;
display: flex;
}
.sticky-menu a {
flex: 1;
cursor: pointer;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: Inter;
font-size: 10px;
color: white;
opacity: 0.5;
gap: 4px;
padding: 0.5rem;
transition: opacity 0.3s ease;
}
.sticky-menu a:visited {
color: white;
}
.sticky-menu a:hover,
.sticky-menu a:active {
color: white;
opacity: 0.8;
}
.sticky-menu a.active {
font-weight: 700;
opacity: 1;
}
.sticky-menu img {
width: auto;
height: 50px;
margin: 0.25rem 0;
}
@media (max-width: 767px) {
.sticky-menu img {
width: auto;
height: 50px;
}
}
.sticky-price {
width: 100%;
max-width: 767px;
display: flex;
align-items: center;
padding: 0.3rem 1rem;
}
.sticky-price p {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.sticky-price span {
font-family: Inter;
font-size: 14px;
font-weight: 700;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #cd1924;
}
</style>
<section class="sticky-bottom">
<div class="sticky-rows" style="background-color: #801e1e">
<div class="sticky-menu">
<a class="" href="https://www.ruangguru.com/champions/aoc/final">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="#fff">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.974 5.982c.35.609.526 1.281.526 2.018v10c0 .725-.175 1.398-.526 2.017A3.953 3.953 0 0 1 17.5 22h-10a4.027 4.027 0 0 1-2.018-.526 4.135 4.135 0 0 1-1.456-1.457A4.027 4.027 0 0 1 3.5 18V8a3.953 3.953 0 0 1 3-3.88V3c0-.28.1-.515.298-.702A.96.96 0 0 1 7.5 2c.28 0 .515.1.702.298A.924.924 0 0 1 8.5 3v1h8V3c0-.28.1-.515.298-.702A.96.96 0 0 1 17.5 2c.28 0 .515.1.702.298A.924.924 0 0 1 18.5 3v1.117c.357.088.696.224 1.017.41.62.35 1.106.836 1.457 1.455Zm-14.948.544C6.377 6.176 6.868 6 7.5 6h10c.632 0 1.123.175 1.474.526.35.351.526.842.526 1.474h-14c0-.632.175-1.123.526-1.474Zm11.315 6.39a1.111 1.111 0 1 0-1.534-1.609L11.14 15.76 9.194 13.9a1.111 1.111 0 1 0-1.536 1.607l2.713 2.593c.43.41 1.105.41 1.535 0l5.435-5.185Z"
fill="currentColor"
/>
</svg>
Event Detail
</a>
<a class="active" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="#fff">
<path
d="M9.22 2.19c-.078.361-.233.758-.46.986-.228.227-.625.382-.986.46.361.077.758.232.986.46.227.227.382.624.46.985.077-.361.232-.758.46-.986.227-.227.624-.382.985-.46-.361-.077-.758-.232-.986-.46-.227-.227-.382-.624-.46-.985Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.201 7.601a.593.593 0 0 1-.456.703 1.95 1.95 0 0 0-1.5 2.31 1.95 1.95 0 0 0 2.31 1.5.593.593 0 0 1 .703.456l.594 2.795a2.183 2.183 0 0 1-1.68 2.586l-15.527 3.3a2.183 2.183 0 0 1-2.586-1.679l-.594-2.795a.593.593 0 0 1 .456-.703 1.95 1.95 0 0 0 1.5-2.31 1.95 1.95 0 0 0-2.31-1.499.593.593 0 0 1-.702-.457l-.594-2.795a2.183 2.183 0 0 1 1.679-2.586l15.527-3.3a2.183 2.183 0 0 1 2.586 1.68l.595 2.794Zm-8.092 2.16L13.07 8.45c-.566-.71-1.206-.573-1.424.303l-.417 1.619a.912.912 0 0 1-.49.56l-1.27.497c-.81.324-.877.978-.144 1.457l1.247.815c.208.14.378.456.371.707l-.022 1.34c-.019 1.056.6 1.33 1.372.619l1.077-1a.891.891 0 0 1 .815-.173l1.39.475c.996.342 1.448-.167 1.002-1.124l-.565-1.214a.92.92 0 0 1 .051-.798l.808-1.25c.474-.742.147-1.312-.724-1.274l-1.362.062c-.23.006-.535-.13-.676-.312Z"
fill="currentColor"
/>
<path
d="M19.096 19.417c-.116.541-.349 1.137-.69 1.478-.34.34-.936.574-1.478.69.542.116 1.137.349 1.478.69.341.34.574.936.69 1.478.116-.542.35-1.137.69-1.478.34-.341.936-.574 1.478-.69-.541-.116-1.137-.35-1.478-.69-.34-.34-.574-.936-.69-1.478ZM3.99 1.18c-.154.722-.465 1.516-.92 1.971-.454.454-1.248.765-1.97.92.722.155 1.516.465 1.97.92.455.454.766 1.248.921 1.97.155-.722.465-1.516.92-1.97.454-.455 1.248-.766 1.97-.92-.722-.155-1.516-.466-1.97-.92-.455-.454-.766-1.249-.92-1.971Z"
fill="currentColor"
/>
</svg>
Tiket Saya
</a>
</div>
</div>
</section>
</body>
</html>