:root{
  --bg:#07080B;--panel:#11141B;--panel2:#171A22;--text:#F8FAFC;--muted:#A9B1BF;
  --gold:#EAC166;--gold2:#FFF1B8;--line:rgba(234,193,102,.20);--whiteLine:rgba(255,255,255,.08);
  --radius:28px;--shadow:0 24px 70px rgba(0,0,0,.34)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:
  radial-gradient(circle at 12% 8%,rgba(234,193,102,.14),transparent 32%),
  radial-gradient(circle at 84% 18%,rgba(234,193,102,.10),transparent 28%),
  linear-gradient(135deg,#050506,#090B10 58%,#060607);
}

a{text-decoration:none;color:inherit}img{max-width:100%;display:block}

.site-container {

  /*
  width: 100%;
  max-width: 1244;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  */

  width:min(1400px,calc(100% - 32px));
  margin:auto;
}

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

  .site-container {

    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }

}


.topbar{border-bottom:1px solid var(--line);background:rgba(234,193,102,.08);font-size:.86rem;color:rgba(255,255,255,.82)}
.topbar .container{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}

.header{position:sticky;top:0;z-index:50;background:rgba(7,8,11,.80);backdrop-filter:blur(16px);border-bottom:1px solid var(--whiteLine)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;flex-direction:column;font-weight:900;letter-spacing:.03em}
.brand strong{font-size:1.5rem;color:var(--gold);line-height:1}
.brand span{font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.76)}
.navlinks{display:flex;align-items:center;gap:4px}
.navlink{display:inline-flex;padding:12px 15px;border-radius:999px;color:rgba(255,255,255,.78);font-weight:800;font-size:.94rem;transition:.25s}
.navlink:hover,.navlink.active{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#07080B}
.dropdown{position:relative}
.dropdown-panel{position:absolute;top:48px;left:0;width:390px;padding:12px;border:1px solid var(--whiteLine);border-radius:24px;background:rgba(12,14,19,.98);box-shadow:var(--shadow);display:none}


.dropdown:hover .dropdown-panel{display:grid}
.dropitem{display:flex;gap:12px;padding:12px;border-radius:16px;color:rgba(255,255,255,.82)}
.dropitem:hover{background:rgba(234,193,102,.09);color:var(--gold2)}
.dropicon{width:38px;height:38px;display:grid;place-items:center;border-radius:14px;background:rgba(234,193,102,.10);font-size:1.15rem;border:1px solid var(--line)}
.dropitem b{display:block;font-size:.95rem}.dropitem small{color:var(--muted);display:block;margin-top:2px}

.navlink.active,
.mobile-panel a.active {
  color: #000;
  font-weight: 700;
  position: relative;
}

.dropitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
}

.dropicon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;

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

  border-radius: 10px;
  background: rgba(255, 215, 120, 0.08);
  border: 1px solid rgba(255, 215, 120, 0.25);

  flex-shrink: 0;
}

.dropitem span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dropitem b {
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
}

.dropitem small {
  font-size: 12px;
  line-height: 1.3;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  opacity: 0.7;
}


.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.brand-logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 230px;
  object-fit: contain;
}

@media screen and (max-width: 640px) {
  .brand-logo {
    height: 39px;
    max-width: 175px;
  }
}

@media screen and (max-width: 380px) {
  .brand-logo {
    height: 36px;
    max-width: 155px;
  }
}



.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 23px;font-weight:900;transition:.25s;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#07080B;box-shadow:0 18px 40px rgba(234,193,102,.18)}
.btn-outline{border-color:var(--line);color:var(--gold2);background:rgba(255,255,255,.02)}
.btn-dark{border-color:var(--whiteLine);background:#11141B;color:white}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--whiteLine);background:rgba(255,255,255,.04);color:white;font-weight:900}
.mobile-panel{display:none;max-height:0;overflow:hidden;transition:max-height .3s ease}
.mobile-panel.open{max-height:900px}
.mobile-panel-inner{padding:0 0 24px;display:grid;gap:10px}
.mobile-panel a{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--whiteLine);font-weight:800}
.hero{position:relative;overflow:hidden;padding:78px 0 54px}

.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(234,193,102,.07),transparent 42%,rgba(234,193,102,.05));pointer-events:none}

.grid-hero,.grid-2,.page-hero-grid,.content-grid,.contact-grid,.article-grid{display:grid;gap:34px;align-items:center}
.grid-hero{grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 200px)}
.grid-2,.page-hero-grid{grid-template-columns:1fr 1fr}
.content-grid{grid-template-columns:1.1fr .9fr}
.contact-grid{grid-template-columns:.92fr 1.08fr}
.article-grid{grid-template-columns:minmax(0,1fr)330px;align-items:start}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;background:rgba(234,193,102,.08);border:1px solid var(--line);color:var(--gold2);font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.display{font-size:clamp(2.25rem,4.4vw,4.75rem);line-height:.96;font-weight:950;margin:18px 0;letter-spacing:-.045em}
.display span,.section-title span,.page-title span{color:var(--gold)}
.lead{font-size:clamp(.98rem,1.18vw,1.08rem);line-height:1.82;color:rgba(255,255,255,.82);max-width:64ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.visual,.panel,.card,.service-tile,.stat,.news-card,.form-card,.package-card,.program-card,.article-content,.side-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));border:1px solid var(--whiteLine);border-radius:var(--radius);box-shadow:var(--shadow)
}
.visual{position:relative;padding:16px;border-radius:36px;background:radial-gradient(circle at 50% 0,rgba(234,193,102,.14),transparent 42%),rgba(255,255,255,.02)}
.visual img{width:100%;height:100%;object-fit:cover;border-radius:26px}
.floating{position:absolute;z-index:3;padding:12px 16px;border-radius:999px;background:rgba(8,9,12,.78);border:1px solid var(--line);backdrop-filter:blur(10px);font-weight:900;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.float-1{top:28px;left:-12px;animation:floatY 5s infinite ease-in-out}.float-2{right:-14px;bottom:30px;animation:floatY 4.4s .4s infinite ease-in-out}
.section{padding:88px 0}.section-sm{padding:60px 0}.page-pad{padding:62px 0 24px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}
.section-title,.page-title{font-weight:950;line-height:1.04;letter-spacing:-.035em}
.section-title{font-size:clamp(1.65rem,2.65vw,2.65rem);margin:12px 0 0}
.page-title{font-size:clamp(2rem,3.45vw,3.75rem);margin:14px 0 16px}
.section-desc{color:rgba(255,255,255,.76);line-height:1.76;max-width:64ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:22px}.stat strong{display:block;font-size:1.52rem;color:var(--gold);margin-bottom:5px}.stat span{color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-tile{position:relative;min-height:300px;padding:22px;overflow:hidden;transition:.25s}
.service-tile:hover,.news-card:hover,.package-card:hover,.program-card:hover{transform:translateY(-5px);border-color:rgba(234,193,102,.28)}
.service-tile:after{content:"";position:absolute;right:-60px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(234,193,102,.20),transparent 70%)}
.iconbox{width:68px;height:68px;border-radius:22px;background:rgba(234,193,102,.09);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px;font-size:2rem}
.service-tile h3,.package-card h3,.program-card h3,.news-card h3{margin:12px 0 10px;font-size:1.22rem;font-weight:900}
.service-tile p,.package-card p,.program-card p,.news-card p{color:rgba(255,255,255,.74);line-height:1.7}
.link{display:inline-flex;gap:8px;color:var(--gold2);font-weight:900}.link:after{content:"→";transition:.25s}.link:hover:after{transform:translateX(5px)}
.flow{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.flow span{display:grid;place-items:center;text-align:center;min-height:88px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-weight:900;color:rgba(255,255,255,.86);padding:10px}
.media-frame{border-radius:32px;overflow:hidden;background:rgba(255,255,255,.02);border:1px solid var(--whiteLine);box-shadow:var(--shadow)}
.media-frame img{width:100%;height:100%;object-fit:cover}
.breadcrumb{display:flex;gap:10px;flex-wrap:wrap;color:rgba(255,255,255,.58);margin-bottom:18px}.breadcrumb a{color:var(--gold2)}
.ticks,.clean-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.ticks li,.clean-list li{display:flex;gap:12px;color:rgba(255,255,255,.82);line-height:1.65}
.ticks li:before,.clean-list li:before{content:"✓";flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(234,193,102,.13);color:var(--gold);font-weight:900;margin-top:2px}
.chip-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.chip{padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:rgba(255,255,255,.82);font-weight:800;font-size:.9rem}
.program-grid,.package-grid,.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.program-grid{grid-template-columns:repeat(4,1fr)}
.program-card,.package-card,.form-card,.side-card{padding:24px}.package-card .price{display:inline-flex;margin:4px 0 12px;color:var(--gold2);font-weight:900;line-height:1.5}
.category{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(234,193,102,.09);border:1px solid var(--line);color:var(--gold2);font-size:.82rem;font-weight:900}
.news-list-section{padding:40px 0 110px}
.news-thumb{height:230px;border-radius:24px 24px 0 0;overflow:hidden}.news-thumb img{height:100%;width:100%;object-fit:cover;transition:.45s}.news-card:hover .news-thumb img{transform:scale(1.04)}
.news-body{padding:22px}.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filterbar button{cursor:pointer;padding:11px 15px;border-radius:999px;border:1px solid var(--whiteLine);background:rgba(255,255,255,.025);color:rgba(255,255,255,.78);font-weight:900}
.filterbar button.active,.filterbar button:hover{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#08090D}
.input,.textarea,.select{width:100%;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--whiteLine);color:white;font:inherit;outline:none}.select option{background:#11141B}.textarea{min-height:150px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:rgba(234,193,102,.4);box-shadow:0 0 0 4px rgba(234,193,102,.08)}
.form-grid{display:grid;gap:14px}.article-content{padding:30px}.article-content p{color:rgba(255,255,255,.82);line-height:1.92;margin:0 0 18px}.article-aside{position:sticky;top:116px}
.contact-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}.contact-mini{padding:18px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.035)}.contact-mini b{display:block;color:var(--gold);margin-bottom:5px}
.footer{position:relative;margin-top:70px;padding:56px 0 24px;background:rgba(255,255,255,.015);border-top:1px solid var(--whiteLine);clear:both}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:32px}.footer h4{margin:0 0 14px}.footer p,.footer a{color:rgba(255,255,255,.72);line-height:1.8}.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.footer a:hover{color:var(--gold2)}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--whiteLine);margin-top:30px;padding-top:20px;color:rgba(255,255,255,.54);font-size:.9rem}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.reveal.show{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}.delay-5{transition-delay:.4s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes aurora{0%{opacity:.55;transform:translateX(-3%)}100%{opacity:1;transform:translateX(3%)}}
@media(max-width:1120px){.service-grid{grid-template-columns:repeat(3,1fr)}.program-grid,.package-grid,.news-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:repeat(4,1fr)}}

@media(max-width:920px){
  .navlinks,.nav .btn{display:none}.menu-btn{display:block}.mobile-panel{display:block}.grid-hero,.grid-2,.page-hero-grid,.content-grid,.contact-grid,.article-grid,.footer-grid{grid-template-columns:1fr}.grid-hero{min-height:auto}.service-grid,.program-grid,.package-grid,.news-grid{grid-template-columns:1fr}.section-head{display:block}.visual{margin-top:20px}

  .topbar .container{flex-direction:column;align-items:flex-start;padding:8px 0}

  .article-aside{position:static}.contact-info-grid{grid-template-columns:1fr
  }
}

@media(max-width:560px){.display{font-size:2.6rem}.page-title{font-size:2.32rem}.hero-actions{flex-direction:column}.btn{width:100%}.stats,.flow{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.brand strong{font-size:1.22rem}}


.home-article-list{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.home-feature-article{padding:28px;display:grid;gap:16px;align-content:end;min-height:410px;background:linear-gradient(180deg,rgba(234,193,102,.10),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.home-feature-article img{border-radius:22px;height:220px;width:100%;object-fit:cover}
.home-small-list{display:grid;gap:14px}
.home-small-article{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid var(--whiteLine);border-radius:22px;background:rgba(255,255,255,.026);transition:.25s}
.home-small-article:hover{transform:translateY(-3px);border-color:var(--line)}
.home-small-article img{width:120px;height:86px;object-fit:cover;border-radius:16px}
.home-small-article h3{font-size:1rem;line-height:1.35;margin:5px 0 4px;font-weight:900}
.home-small-article p{font-size:.9rem;color:rgba(255,255,255,.68);line-height:1.55;margin:0}
.news-simple-hero{padding:58px 0 30px}
.news-simple-layout{display:grid;grid-template-columns:minmax(0,1fr)310px;gap:24px;align-items:start;padding-bottom:110px}
.news-simple-list{display:grid;gap:16px}
.news-simple-card{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:16px;border:1px solid var(--whiteLine);background:rgba(255,255,255,.026);border-radius:24px;transition:.25s}
.news-simple-card:hover{transform:translateY(-3px);border-color:var(--line)}
.news-simple-card img{width:100%;height:160px;object-fit:cover;border-radius:18px}
.news-simple-card h2{font-size:1.25rem;line-height:1.35;margin:10px 0 8px;font-weight:900}
.news-simple-card p{font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 12px}
.news-sidebar{padding:22px;border:1px solid var(--whiteLine);background:rgba(255,255,255,.026);border-radius:24px;position:sticky;top:115px}
.news-sidebar h3{font-size:1.1rem;font-weight:900;margin:0 0 14px}
.news-sidebar a{display:block;padding:11px 12px;border-radius:14px;color:rgba(255,255,255,.76);border:1px solid transparent}
.news-sidebar a:hover{background:rgba(234,193,102,.08);border-color:var(--line);color:var(--gold2)}
.contact-mini a{color:rgba(255,255,255,.86);text-decoration:none}
.contact-mini a:hover{color:var(--gold2)}
@media(max-width:920px){
  .home-article-list,.news-simple-layout{grid-template-columns:1fr}
  .news-sidebar{position:static}
  .news-simple-card{grid-template-columns:1fr}
  .news-simple-card img{height:220px}
}
@media(max-width:560px){
  .display{font-size:2.25rem}
  .page-title{font-size:2rem}
  .section-title{font-size:1.75rem}
  .home-small-article{grid-template-columns:1fr}
  .home-small-article img{width:100%;height:180px}
}



.home-article-list {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: 24px;
  width: 100%;
}

.home-article-list > * {
  min-width: 0;
}


/* Artikel utama */

.home-feature-article {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  align-self: start;
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
  text-decoration: none;
}

.feature-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.feature-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-feature-content {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.home-feature-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.home-feature-excerpt {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}


/* Artikel kecil */

.home-small-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.home-small-article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border-radius: 20px;
  text-decoration: none;
}

.home-small-image {
  width: 150px;
  min-height: 130px;
  overflow: hidden;
  border-radius: 14px;
}

.home-small-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-small-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.home-small-content h3 {
  margin: 7px 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.home-small-content p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* Tablet */

@media screen and (max-width: 920px) {
  .home-article-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .home-small-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-small-article {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-small-image {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}


/* Mobile */

@media screen and (max-width: 640px) {
  .home-articles-section .section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .home-articles-section .section-head-button {
    width: 100%;
    justify-content: center;
  }

  .home-feature-article {
    border-radius: 18px;
  }

  .feature-img {
    aspect-ratio: 16 / 10;
  }

  .home-feature-content {
    padding: 17px;
  }

  .home-feature-title {
    font-size: 1.15rem;
  }

  .home-small-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .home-small-article {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 13px;
    padding: 12px;
    border-radius: 16px;
  }

  .home-small-image {
    width: 104px;
    min-height: 104px;
    aspect-ratio: auto;
    border-radius: 12px;
  }

  .home-small-content h3 {
    margin: 5px 0;
    font-size: 0.94rem;
  }

  .home-small-content p {
    font-size: 0.8rem;
  }
}


/* Mobile kecil */

@media screen and (max-width: 390px) {
  .home-small-article {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
  }

  .home-small-image {
    width: 88px;
    min-height: 92px;
  }

  .home-small-content p {
    display: none;
  }
}