@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after{
  box-sizing:border-box;
}

:root{
  --pm-bg:#f7f8fb;
  --pm-surface:#ffffff;
  --pm-text:#172033;
  --pm-muted:#667085;
  --pm-line:#e7eaf0;

  --pm-primary:#6d28d9;
  --pm-primary-dark:#5420ad;
  --pm-accent:#06b6d4;

  --pm-soft:#f3efff;
  --pm-green:#147d4f;

  --pm-radius:18px;
  --pm-shadow:0 10px 30px rgba(15,23,42,.07);

  --pm-width:1180px;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--pm-bg);
  color:var(--pm-text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size:16px;
  line-height:1.65;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

.wrap{
  width:min(
    calc(100% - 40px),
    var(--pm-width)
  );
  margin-inline:auto;
}


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

.rs-site-header{
  position:sticky;
  top:0;
  z-index:100;

  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--pm-line);
  backdrop-filter:blur(14px);
}

.rs-site-header .head{
  min-height:74px;

  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;

  min-width:max-content;
}

.pm-brand-mark{
  width:44px;
  height:44px;

  border-radius:13px;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      135deg,
      var(--pm-primary),
      var(--pm-accent)
    );

  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.5px;

  box-shadow:
    0 8px 20px
    rgba(109,40,217,.22);
}

.brandtext{
  display:flex;
  align-items:baseline;

  color:#111827;

  font-size:24px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.7px;
}

.brandtext > span{
  color:var(--pm-primary);
}

.brandtext small{
  display:none;
}

.rs-main-nav{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:6px;
}

.rs-main-nav > a,
.rs-nav-categories > summary{
  display:flex;
  align-items:center;

  min-height:42px;

  padding:0 13px;

  border-radius:10px;

  color:#344054;

  font-size:14px;
  font-weight:650;

  cursor:pointer;
  list-style:none;
}

.rs-main-nav > a:hover,
.rs-nav-categories > summary:hover{
  background:var(--pm-soft);
  color:var(--pm-primary);
}

.rs-nav-categories{
  position:relative;
}

.rs-nav-categories summary::-webkit-details-marker{
  display:none;
}

.rs-nav-chevron{
  margin-left:6px;
}

.rs-nav-dropdown{
  position:absolute;
  right:0;
  top:48px;

  width:230px;

  padding:8px;

  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:14px;

  box-shadow:var(--pm-shadow);
}

.rs-nav-dropdown a{
  display:block;
  padding:10px 12px;

  border-radius:9px;

  color:#344054;
  font-size:14px;
  font-weight:600;
}

.rs-nav-dropdown a:hover{
  background:var(--pm-soft);
  color:var(--pm-primary);
}

.mobile-menu-btn{
  display:none;

  width:44px;
  height:44px;

  padding:0;

  border:1px solid var(--pm-line);
  border-radius:12px;

  background:#fff;
  color:#202939;

  font-size:24px;
  line-height:1;

  cursor:pointer;
}

.mobile-nav{
  display:none;
}


/* ========================================
   HOME
   ======================================== */

.home-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:28px;

  padding-top:38px;
  padding-bottom:24px;
}

.home-seo-title{
  grid-column:1 / -1;

  max-width:820px;

  margin:0 0 4px;

  color:#101828;

  font-size:clamp(32px,4vw,48px);
  line-height:1.08;
  letter-spacing:-1.5px;
}

.home-main,
.home-side{
  min-width:0;
}

.home-panel,
.sidecard{
  background:var(--pm-surface);
  border:1px solid var(--pm-line);
  border-radius:var(--pm-radius);
  box-shadow:var(--pm-shadow);
}

.home-panel{
  padding:24px;
}

.section-title,
.sidetitle{
  margin:0 0 18px;

  color:#101828;

  font-size:21px;
  line-height:1.3;
  letter-spacing:-.3px;
}

.sidecard{
  padding:20px;
  margin-bottom:18px;
}

.sidecard p{
  margin:0;
  color:var(--pm-muted);
}


/* ========================================
   ARTICLE CARDS
   ======================================== */

.home-grid,
.category-page-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.card{
  overflow:hidden;

  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:16px;

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

.card:hover{
  transform:translateY(-3px);
  border-color:#d8ccff;
  box-shadow:0 14px 32px rgba(15,23,42,.09);
}

.card > a{
  display:block;
}

.card img{
  display:block;

  width:100%;
  aspect-ratio:16 / 9;

  object-fit:cover;

  background:#eef1f5;
}

.cardbody{
  padding:17px;
}

.badge{
  display:inline-flex;
  align-items:center;

  width:auto;
  min-height:30px;

  padding:5px 11px;

  background:var(--pm-soft);
  border-radius:999px;

  color:var(--pm-primary);

  font-size:12px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.2px;
}

.card h3{
  margin:11px 0 7px;

  color:#172033;

  font-size:18px;
  line-height:1.35;
  letter-spacing:-.3px;
}

.card-date{
  display:block;

  margin-bottom:9px;

  color:#98a2b3;
  font-size:12px;
}

.card p{
  margin:0 0 13px;

  color:var(--pm-muted);

  font-size:14px;
  line-height:1.55;
}

.read{
  color:var(--pm-primary);
  font-size:14px;
  font-weight:700;
}

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

  margin-top:20px;

  min-height:46px;

  padding:0 18px;

  border:1px solid #d8ccff;
  border-radius:12px;

  background:#fff;

  color:var(--pm-primary);

  font-size:14px;
  font-weight:700;
}

.all-btn:hover{
  background:var(--pm-primary);
  border-color:var(--pm-primary);
  color:#fff;
}


/* ========================================
   LATEST SIDEBAR
   ======================================== */

.latest{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:12px;
  align-items:center;

  padding:12px 0;

  border-bottom:1px solid var(--pm-line);
}

.latest:last-child{
  border-bottom:0;
}

.latest img{
  width:76px;
  height:58px;

  border-radius:9px;

  object-fit:cover;

  background:#eef1f5;
}

.latest span{
  min-width:0;
}

.latest b{
  display:block;

  color:#344054;

  font-size:13px;
  line-height:1.35;
}

.latest small{
  display:block;

  margin-top:5px;

  color:#98a2b3;
  font-size:11px;
}


/* ========================================
   HOME CATEGORY
   ======================================== */

.rs-home-categories-wrap{
  padding-top:10px;
  padding-bottom:58px;
}

.rs-home-categories{
  padding:26px;

  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:22px;

  box-shadow:var(--pm-shadow);
}

.rs-home-categories-head{
  margin-bottom:20px;
}

.rs-section-kicker{
  display:block;

  margin-bottom:5px;

  color:var(--pm-primary);

  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.rs-home-categories h2{
  margin:0;

  font-size:26px;
  line-height:1.2;
  letter-spacing:-.5px;
}

.rs-home-categories-head p{
  margin:8px 0 0;
  color:var(--pm-muted);
}

.rs-home-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.rs-home-category-card{
  min-height:86px;

  display:flex;
  align-items:center;
  gap:13px;

  padding:15px;

  background:#fff;

  border:1px solid var(--pm-line);
  border-radius:15px;

  color:#344054;

  transition:
    border-color .18s ease,
    transform .18s ease,
    background .18s ease;
}

.rs-home-category-card:hover{
  transform:translateY(-2px);

  background:#faf9ff;
  border-color:#cabdf9;
}

.rs-home-category-icon{
  flex:0 0 42px;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:var(--pm-soft);

  font-size:20px;
}

.rs-home-category-card b{
  display:block;

  color:#202939;

  font-size:14px;
  line-height:1.3;
}

.rs-home-category-card small{
  display:block;

  margin-top:3px;

  color:#98a2b3;

  font-size:12px;
  line-height:1.35;
}


/* ========================================
   EMPTY STATE
   ======================================== */

.pm-empty{
  padding:42px 22px;

  text-align:center;

  background:#fbfbfd;
  border:1px dashed #cfd5df;
  border-radius:16px;
}

.pm-empty strong{
  display:block;

  margin-bottom:7px;

  color:#172033;

  font-size:19px;
}

.pm-empty p{
  margin:0;
  color:var(--pm-muted);
}


/* ========================================
   CATEGORY / ARCHIVE
   ======================================== */

.category-head{
  padding:42px 0 26px;
}

.category-head h1{
  margin:10px 0 8px;

  color:#101828;

  font-size:clamp(31px,4vw,44px);
  line-height:1.1;
  letter-spacing:-1px;
}

.category-head p{
  max-width:650px;

  margin:0;

  color:var(--pm-muted);
}

.category-page-grid{
  padding-bottom:60px;
}


/* ========================================
   ARTICLE
   ======================================== */

.rs-article-page{
  background:#f8fafc;
}

.breadcrumb{
  padding:26px 0 16px;

  color:#7b8494;

  font-size:13px;
  line-height:1.5;

  overflow-wrap:anywhere;
}

.breadcrumb a{
  color:var(--pm-primary);
  font-weight:600;
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,790px) 280px;
  gap:30px;

  align-items:start;

  padding-bottom:60px;
}

.article{
  min-width:0;

  padding:30px;

  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:20px;

  box-shadow:var(--pm-shadow);
}

.article h1{
  margin:16px 0 11px;

  color:#101828;

  font-size:clamp(31px,4vw,46px);
  line-height:1.12;
  letter-spacing:-1.3px;
}

.article .meta{
  margin-bottom:23px;

  color:#98a2b3;

  font-size:13px;
}

.article .lead{
  margin:0 0 24px;

  color:#475467;

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

.article .hero{
  display:block;

  width:100%;
  aspect-ratio:16 / 9;

  margin:0 0 24px;

  object-fit:cover;

  border-radius:16px;

  background:#eef1f5;
}

.article h2{
  margin:34px 0 13px;

  color:#182230;

  font-size:26px;
  line-height:1.3;
  letter-spacing:-.5px;
}

.article h3{
  margin:27px 0 10px;

  color:#182230;

  font-size:21px;
  line-height:1.35;
}

.article p,
.article li{
  color:#344054;

  font-size:17px;
  line-height:1.78;
}

.article p{
  margin:0 0 19px;
}

.article ul,
.article ol{
  padding-left:24px;
  margin:0 0 22px;
}

.article a{
  color:var(--pm-primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.article img:not(.hero){
  display:block;

  max-width:100%;
  height:auto;

  margin:24px auto;

  border-radius:14px;
}

.article table{
  width:100%;
  border-collapse:collapse;
}

.article th,
.article td{
  padding:11px;

  border:1px solid var(--pm-line);

  text-align:left;
}

.introbox{
  display:flex;
  gap:13px;
  align-items:flex-start;

  margin:0 0 27px;

  padding:17px;

  background:#f7faf8;
  border:1px solid #dcebe2;
  border-radius:15px;

  color:#344054;
}

.introicon{
  flex:0 0 35px;

  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#4fae52;
  color:#fff;

  font-weight:800;
}


/* ========================================
   ARTICLE ASIDE
   ======================================== */

.layout > aside{
  min-width:0;
}

.cats{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.cats a{
  display:block;

  padding:10px 12px;

  background:#f8fafc;
  border-radius:9px;

  color:#475467;

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

.cats a:hover{
  background:var(--pm-soft);
  color:var(--pm-primary);
}


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

.rs-article-footer{
  margin-top:30px;

  padding:42px 0 28px;

  background:#fff;
  border-top:1px solid var(--pm-line);
}

.rs-article-footer .wrap{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:start;
}

.rs-article-footer-brand strong{
  display:block;

  color:var(--pm-primary);

  font-size:22px;
  letter-spacing:-.5px;
}

.rs-article-footer-brand span{
  display:block;

  max-width:540px;

  margin-top:7px;

  color:var(--pm-muted);

  font-size:14px;
}

.rs-article-footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.rs-article-footer-links a{
  color:#475467;

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

.rs-article-footer-links a:hover{
  color:var(--pm-primary);
}

.rs-article-footer-copy{
  grid-column:1 / -1;

  padding-top:22px;

  border-top:1px solid var(--pm-line);

  color:#98a2b3;

  font-size:13px;
}


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

@media(max-width:820px){

  .wrap{
    width:min(
      calc(100% - 28px),
      var(--pm-width)
    );
  }

  .rs-site-header .head{
    min-height:66px;
    gap:13px;
  }

  .mobile-menu-btn{
    display:grid;
    place-items:center;
  }

  .rs-main-nav{
    display:none;
  }

  .brand{
    margin-inline:auto;
    padding-right:57px;
  }

  .pm-brand-mark{
    width:40px;
    height:40px;

    border-radius:12px;

    font-size:16px;
  }

  .brandtext{
    font-size:21px;
  }

  .mobile-nav.open{
    display:flex;
    flex-direction:column;

    padding:10px 14px 17px;

    background:#fff;
    border-top:1px solid var(--pm-line);
  }

  .mobile-nav a{
    padding:11px 12px;

    border-radius:9px;

    color:#344054;

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

  .mobile-nav a:hover{
    background:var(--pm-soft);
    color:var(--pm-primary);
  }

  .rs-mobile-nav-label{
    margin-top:7px;
    padding:10px 12px 4px;

    color:#98a2b3;

    font-size:11px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
  }

  .home-layout{
    grid-template-columns:1fr;
    gap:18px;

    padding-top:28px;
  }

  .home-seo-title{
    font-size:33px;
    letter-spacing:-1px;
  }

  .home-panel{
    padding:17px;
  }

  .home-grid,
  .category-page-grid{
    grid-template-columns:1fr;
  }

  .rs-home-categories{
    padding:18px;
  }

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

  .rs-home-category-card{
    min-height:82px;
    padding:13px;
  }

  .rs-home-category-card small{
    display:none;
  }

  .layout{
    grid-template-columns:1fr;
    gap:20px;

    padding-bottom:38px;
  }

  .article{
    padding:21px 18px;

    border-radius:17px;
  }

  .article h1{
    font-size:34px;
    line-height:1.13;
    letter-spacing:-1px;
  }

  .article .lead{
    font-size:17px;
  }

  .article p,
  .article li{
    font-size:16px;
  }

  .article .hero{
    border-radius:13px;
  }

  .rs-article-footer{
    padding-top:32px;
  }

  .rs-article-footer .wrap{
    grid-template-columns:1fr;
  }

  .rs-article-footer-copy{
    grid-column:auto;
  }
}


@media(max-width:430px){

  .wrap{
    width:calc(100% - 24px);
  }

  .brand{
    gap:8px;
    padding-right:52px;
  }

  .brandtext{
    font-size:19px;
  }

  .home-seo-title{
    font-size:30px;
  }

  .rs-home-category-grid{
    grid-template-columns:1fr;
  }

  .rs-home-category-card small{
    display:block;
  }

  .article{
    padding:19px 15px;
  }

  .article h1{
    font-size:31px;
  }
}

/* PUTRA-PM-POLISH-V3-START */

/* Paksa font website, jangan mengikuti font dekoratif HP */
html,
body,
button,
input,
textarea,
select{
  font-family:"Inter",Arial,Helvetica,sans-serif !important;
}

h1,h2,h3,h4,h5,h6,
.brandtext,
.card h3,
.sidetitle,
.section-title,
.rs-home-category-card,
.rs-article-footer,
.mobile-nav{
  font-family:"Inter",Arial,Helvetica,sans-serif !important;
}

body{
  letter-spacing:0 !important;
}

.brandtext{
  font-weight:800;
  letter-spacing:-.7px !important;
}

.home-seo-title{
  max-width:760px;
  font-weight:800;
  letter-spacing:-1.3px !important;
}

.section-title,
.sidetitle{
  font-weight:750;
}

.pm-empty{
  padding:30px 20px;
}

.pm-empty strong{
  font-weight:750;
}

.rs-home-categories-wrap{
  padding-bottom:30px;
}

.rs-article-footer{
  margin-top:0;
}


/* MOBILE */
@media(max-width:820px){

  .rs-site-header .head{
    min-height:64px;
  }

  .mobile-menu-btn{
    width:42px;
    height:42px;
    font-size:22px;
  }

  .pm-brand-mark{
    width:39px;
    height:39px;
  }

  .brandtext{
    font-size:20px;
  }

  /* menu tidak lagi memanjang satu kolom */
  .mobile-nav.open{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:7px;

    padding:
      12px 14px
      15px;
  }

  .mobile-nav a{
    display:flex;
    align-items:center;

    min-height:43px;

    padding:9px 11px;

    background:#f8fafc;
    border:1px solid #edf0f5;
    border-radius:10px;

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

  .rs-mobile-nav-label{
    grid-column:1 / -1;

    margin:4px 0 0;

    padding:
      8px 4px
      3px;

    font-size:10px;
  }

  .home-layout{
    gap:14px;

    padding-top:24px;
    padding-bottom:16px;
  }

  .home-seo-title{
    margin-bottom:5px;

    font-size:29px;
    line-height:1.12;
    letter-spacing:-.9px !important;
  }

  .home-panel{
    padding:16px;

    border-radius:18px;
  }

  .section-title{
    margin-bottom:14px;

    font-size:20px;
  }

  .pm-empty{
    padding:26px 15px;
  }

  .pm-empty strong{
    font-size:17px;
  }

  .pm-empty p{
    font-size:14px;
    line-height:1.6;
  }

  .home-side .sidecard{
    padding:17px;
  }

  .home-side .sidetitle{
    font-size:19px;
  }

  .home-side p{
    font-size:14px;
    line-height:1.65;
  }

  .rs-home-categories-wrap{
    padding-top:0;
    padding-bottom:24px;
  }

  .rs-home-categories{
    padding:16px;

    border-radius:18px;
  }

  .rs-home-categories h2{
    font-size:23px;
  }

  .rs-home-categories-head p{
    font-size:14px;
  }

  /* kategori 2 kolom agar halaman tidak terlalu panjang */
  .rs-home-category-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .rs-home-category-card{
    min-height:72px;

    padding:11px;
    gap:9px;

    border-radius:13px;
  }

  .rs-home-category-icon{
    flex:0 0 38px;

    width:38px;
    height:38px;

    font-size:18px;
  }

  .rs-home-category-card b{
    font-size:13px;
  }

  .rs-home-category-card small{
    display:none;
  }

  .rs-article-footer{
    padding:
      30px 0
      24px;
  }

  .rs-article-footer-brand strong{
    font-size:20px;
  }

  .rs-article-footer-brand span{
    font-size:13px;
    line-height:1.6;
  }

  .rs-article-footer-links{
    gap:15px;
  }

  .rs-article-footer-copy{
    padding-top:17px;
  }
}


/* HP KECIL */
@media(max-width:430px){

  .wrap{
    width:calc(100% - 22px);
  }

  .brand{
    padding-right:48px;
  }

  .brandtext{
    font-size:19px;
  }

  .home-seo-title{
    font-size:28px;
  }

  /* tetap 2 kolom */
  .rs-home-category-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .rs-home-category-card{
    min-height:68px;
  }

  .rs-home-category-card small{
    display:none;
  }

  .article h1{
    font-size:29px;
  }
}

/* PUTRA-PM-POLISH-V3-END */