/* ==================================================
   RUMAHSIMPEL - TOOL HOMEPAGE
   ================================================== */

.rs-tools-home-wrap{
  padding-top:26px;
  padding-bottom:34px;
}

.rs-tools-home{
  background:#fff;
  border:1px solid #e2e8e2;
  border-radius:18px;
  padding:26px;
  overflow:hidden;
}


/* HEADER */

.rs-tools-home-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.rs-tools-home-logo{
  width:58px;
  height:58px;
  min-width:58px;

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

  border-radius:14px;
  background:#eef8f0;

  font-size:29px;
  line-height:1;
}

.rs-tools-home-title{
  min-width:0;
}

.rs-tools-home-title h2{
  margin:0 0 4px;
  padding:0;

  font-size:27px;
  line-height:1.2;

  color:#151515;
}

.rs-tools-home-title p{
  margin:0;
  padding:0;

  color:#666;
  font-size:15px;
  line-height:1.55;
}


/* GRID */

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


/* CARD */

.rs-tools-home-card{
  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:210px;

  padding:17px;

  border:1px solid #e4e8e4;
  border-radius:14px;

  background:#fafcfa;

  color:#181818;
  text-decoration:none;
}

.rs-tools-home-card:hover{
  border-color:#9fcdaa;
  background:#f7fbf7;
}


/* ICON */

.rs-tools-home-icon{
  width:50px;
  height:50px;

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

  margin-bottom:14px;

  border-radius:12px;

  font-size:25px;
  line-height:1;
}

.rs-tools-home-electric{
  background:#fff4d9;
}

.rs-tools-home-paint{
  background:#eff8ef;
}

.rs-tools-home-ac{
  background:#edf7ff;
}

.rs-tools-home-water{
  background:#eef8ff;
}


/* TEXT */

.rs-tools-home-card h3{
  margin:0 0 8px;
  padding:0;

  font-size:18px;
  line-height:1.3;

  color:#181818;
}

.rs-tools-home-card p{
  margin:0;

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

  color:#666;
}


/* ACTION */

.rs-tools-home-use{
  margin-top:auto;
  padding-top:15px;

  color:#168039;

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


/* BUTTON ALL */

.rs-tools-home-all{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:100%;
  min-height:54px;

  margin-top:17px;

  border-radius:11px;

  background:#258e3d;
  color:#fff;

  text-decoration:none;
  font-size:17px;
  font-weight:700;
}


/* TABLET */

@media(max-width:900px){

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

}


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

@media(max-width:600px){

  .rs-tools-home-wrap{
    padding-top:20px;
    padding-bottom:25px;
  }

  .rs-tools-home{
    padding:15px;
    border-radius:15px;
  }

  .rs-tools-home-head{
    align-items:center;
    gap:11px;
    margin-bottom:16px;
  }

  .rs-tools-home-logo{
    width:47px;
    height:47px;
    min-width:47px;

    border-radius:11px;
    font-size:23px;
  }

  .rs-tools-home-title h2{
    font-size:21px;
  }

  .rs-tools-home-title p{
    margin-top:3px;

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


  .rs-tools-home-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }


  .rs-tools-home-card{
    min-height:0;

    display:grid;

    grid-template-columns:
      48px
      minmax(0,1fr)
      auto;

    grid-template-areas:
      "icon text action";

    align-items:center;

    gap:10px;

    padding:11px 12px;

    border-radius:12px;

    background:#fff;
  }


  .rs-tools-home-icon{
    grid-area:icon;

    width:48px;
    height:48px;

    margin:0;

    border-radius:11px;

    font-size:23px;
  }


  .rs-tools-home-card-content{
    grid-area:text;
    min-width:0;
  }


  .rs-tools-home-card h3{
    margin:0 0 3px;

    font-size:15px;
    line-height:1.25;
  }


  .rs-tools-home-card p{
    margin:0;

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

    color:#6b6b6b;
  }


  .rs-tools-home-use{
    grid-area:action;

    margin:0;
    padding:0;

    white-space:nowrap;

    font-size:12px;
  }


  .rs-tools-home-all{
    min-height:49px;

    margin-top:12px;

    border-radius:9px;

    font-size:15px;
  }

}

/* ===== Target Tool RumahSimpel ===== */

html{
  scroll-behavior:smooth;
}

#kalkulator-listrik,
#kalkulator-cat,
#kalkulator-ac,
#kalkulator-air{
  scroll-margin-top:90px;
}

@media(max-width:600px){

  #kalkulator-listrik,
  #kalkulator-cat,
  #kalkulator-ac,
  #kalkulator-air{
    scroll-margin-top:78px;
  }

}

/* ===== 2 TOOL DI HOMEPAGE ===== */

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

@media(max-width:600px){

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

}



/* =========================================================
   RUMAHSIMPEL-HOME-POLISH-V2
   Kategori + Planner CTA + Tools
   ========================================================= */


/* =========================================================
   1. KATEGORI
   ========================================================= */

.rs-home-categories-wrap{

  margin-top:
    28px;

  margin-bottom:
    24px;

}


.rs-home-categories{

  padding:
    24px;

  background:
    #fff;

  border:
    1px solid #e5ebe6;

  border-radius:
    18px;

  box-shadow:
    0 5px 20px
    rgba(22,50,32,.045);

}


.rs-home-categories-head{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:20px;

  margin-bottom:
    18px;

}


.rs-home-categories-head h2{

  margin:
    3px 0 4px;

  font-size:
    23px;

  line-height:
    1.25;

}


.rs-home-categories-head p{

  margin:0;

  color:#6c746e;

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

  font-size:
    13px;

}


.rs-section-kicker{

  display:block;

  color:#2f8f3a;

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

  font-size:
    10px;

  line-height:1;

  font-weight:
    800;

  letter-spacing:
    .13em;

}


/* Grid lebih teratur */

.rs-home-category-grid{

  display:grid;

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

  gap:
    12px !important;

}


/* kartu kategori */

.rs-home-category-card{

  min-height:
    100px !important;

  padding:
    15px !important;

  border-radius:
    14px !important;

  box-shadow:
    0 3px 10px
    rgba(0,0,0,.065)
    !important;

}


.rs-home-category-card b{

  display:block;

  margin-bottom:
    4px;

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

  font-size:
    14px;

  line-height:
    1.25;

  font-weight:
    800;

}


.rs-home-category-card small{

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

  font-size:
    11px;

  line-height:
    1.42;

}


.rs-home-category-icon{

  flex:
    0 0 45px !important;

  width:
    45px !important;

  height:
    45px !important;

  border-radius:
    11px !important;

  font-size:
    21px !important;

}


/* =========================================================
   2. PLANNER CTA
   ========================================================= */

.rs-planner-home-wrap{

  margin-top:
    24px;

  margin-bottom:
    24px;

}


.rs-planner-home{

  position:relative;

  overflow:hidden;

  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(270px,.65fr);

  gap:
    28px;

  align-items:center;

  padding:
    34px 38px;

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      #164f2d 0%,
      #24733d 55%,
      #32924a 100%
    );

  color:#fff;

  box-shadow:
    0 10px 30px
    rgba(22,79,45,.16);

}


/* subtle decorative shape */

.rs-planner-home::after{

  content:"";

  position:absolute;

  width:
    260px;

  height:
    260px;

  right:
    -95px;

  top:
    -115px;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.07);

  pointer-events:none;

}


.rs-planner-home-content{

  position:relative;

  z-index:2;

}


.rs-planner-kicker{

  display:inline-flex;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(255,255,255,.23);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.10);

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

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .10em;

}


.rs-planner-home h2{

  max-width:
    620px;

  margin:
    13px 0 10px;

  color:#fff;

  font-size:
    29px;

  line-height:
    1.2;

}


.rs-planner-home-content > p{

  max-width:
    650px;

  margin:
    0;

  color:
    rgba(255,255,255,.86);

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

  font-size:
    14px;

  line-height:
    1.65;

}


.rs-planner-features{

  display:flex;

  flex-wrap:wrap;

  gap:
    7px;

  margin-top:
    17px;

}


.rs-planner-features span{

  padding:
    6px 9px;

  border-radius:
    7px;

  background:
    rgba(255,255,255,.10);

  color:
    rgba(255,255,255,.94);

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

  font-size:
    11px;

  line-height:
    1.2;

}


.rs-planner-home-button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:
    8px;

  margin-top:
    20px;

  padding:
    11px 16px;

  border-radius:
    9px;

  background:
    #fff;

  color:
    #1e6c37 !important;

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

  font-size:
    13px;

  font-weight:
    800;

  text-decoration:
    none !important;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.12);

  transition:
    transform .16s ease,
    box-shadow .16s ease;

}


/* Planner visual */

.rs-planner-home-visual{

  position:relative;

  z-index:2;

}


.rs-planner-house{

  padding:
    22px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:
    16px;

  background:
    rgba(255,255,255,.11);

  backdrop-filter:
    blur(4px);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.12);

}


.rs-planner-house-icon{

  display:grid;

  place-items:center;

  width:
    54px;

  height:
    54px;

  margin-bottom:
    13px;

  border-radius:
    14px;

  background:
    rgba(255,255,255,.16);

  font-size:
    27px;

}


.rs-planner-house strong{

  display:block;

  margin-bottom:
    4px;

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

  font-size:
    15px;

}


.rs-planner-house small{

  display:block;

  color:
    rgba(255,255,255,.76);

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

  font-size:
    11px;

  line-height:
    1.45;

}


.rs-planner-mini-grid{

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    6px;

  margin-top:
    15px;

}


.rs-planner-mini-grid span{

  padding:
    8px 6px;

  border-radius:
    7px;

  background:
    rgba(255,255,255,.10);

  text-align:center;

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

  font-size:
    10px;

}


/* =========================================================
   3. TOOLS
   ========================================================= */

.rs-tools-home-wrap{

  margin-top:
    24px;

  margin-bottom:
    28px;

}


.rs-tools-home{

  padding:
    25px !important;

  border:
    1px solid #e5ebe6;

  border-radius:
    18px !important;

  background:
    #fff;

  box-shadow:
    0 5px 20px
    rgba(22,50,32,.045);

}


.rs-tools-home-head{

  margin-bottom:
    18px !important;

}


.rs-tools-home-logo{

  display:grid !important;

  place-items:center !important;

  width:
    48px !important;

  height:
    48px !important;

  border-radius:
    13px !important;

  background:
    #edf7ef !important;

  font-size:
    23px !important;

}


.rs-tools-home-title h2{

  margin:
    0 0 4px !important;

  font-size:
    22px !important;

}


.rs-tools-home-title p{

  margin:0;

  color:
    #6d756f !important;

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

  font-size:
    13px !important;

  line-height:
    1.5;

}


.rs-tools-home-grid{

  gap:
    13px !important;

}


.rs-tools-home-card{

  position:relative;

  border:
    1px solid #e4eae5 !important;

  border-radius:
    14px !important;

  background:
    #fff !important;

  box-shadow:
    0 3px 10px
    rgba(22,50,32,.045);

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

}


.rs-tools-home-card-content h3{

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

  font-weight:
    800 !important;

}


.rs-tools-home-card-content p{

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

  color:
    #687069 !important;

  line-height:
    1.55 !important;

}


.rs-tools-home-use{

  color:
    #2f8f3a !important;

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

  font-weight:
    800 !important;

}


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

@media
(hover:hover)
and
(pointer:fine){

  .rs-planner-home-button:hover{

    transform:
      translateY(-1px);

    box-shadow:
      0 7px 18px
      rgba(0,0,0,.16);

  }


  .rs-tools-home-card:hover{

    transform:
      translateY(-2px);

    border-color:
      #d5dfd7 !important;

    box-shadow:
      0 8px 20px
      rgba(22,50,32,.08);

  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .rs-home-category-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }


  .rs-planner-home{

    grid-template-columns:
      1fr .65fr;

    padding:
      28px;

  }

}


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

@media(max-width:620px){

  .rs-home-categories-wrap{

    margin-top:
      20px;

    margin-bottom:
      18px;

  }


  .rs-home-categories{

    padding:
      18px 14px;

    border-radius:
      15px;

  }


  .rs-home-categories-head{

    margin-bottom:
      14px;

  }


  .rs-home-categories-head h2{

    font-size:
      20px;

  }


  .rs-home-category-grid{

    grid-template-columns:
      1fr 1fr;

    gap:
      8px !important;

  }


  .rs-home-category-card{

    min-height:
      90px !important;

    padding:
      11px !important;

    border-radius:
      11px !important;

  }


  .rs-home-category-icon{

    flex-basis:
      39px !important;

    width:
      39px !important;

    height:
      39px !important;

    border-radius:
      9px !important;

    font-size:
      19px !important;

  }


  .rs-home-category-card b{

    font-size:
      12px;

  }


  .rs-home-category-card small{

    display:none;

  }


  /* Planner */

  .rs-planner-home-wrap{

    margin-top:
      18px;

    margin-bottom:
      18px;

  }


  .rs-planner-home{

    display:block;

    padding:
      24px 19px;

    border-radius:
      16px;

  }


  .rs-planner-home h2{

    font-size:
      23px;

    line-height:
      1.22;

  }


  .rs-planner-home-content > p{

    font-size:
      13px;

    line-height:
      1.58;

  }


  .rs-planner-features{

    gap:
      5px;

  }


  .rs-planner-features span{

    font-size:
      10px;

  }


  .rs-planner-home-button{

    width:100%;

    margin-top:
      17px;

    padding:
      12px 14px;

  }


  .rs-planner-home-visual{

    margin-top:
      18px;

  }


  .rs-planner-house{

    padding:
      15px;

  }


  .rs-planner-house-icon{

    width:
      45px;

    height:
      45px;

    font-size:
      23px;

  }


  /* Tools */

  .rs-tools-home{

    padding:
      18px 14px !important;

    border-radius:
      15px !important;

  }


  .rs-tools-home-logo{

    width:
      42px !important;

    height:
      42px !important;

    font-size:
      20px !important;

  }


  .rs-tools-home-title h2{

    font-size:
      19px !important;

  }


  .rs-tools-home-title p{

    font-size:
      12px !important;

  }


  .rs-tools-home-card{

    border-radius:
      12px !important;

  }

}



/* =========================================================
   RUMAHSIMPEL-PLANNER-HOME-CTA-V2-CSS
   CTA Planner lebih ringkas, tanpa kartu visual palsu
   ========================================================= */

.rs-planner-home.rs-planner-home-v2{

  display:block !important;

  grid-template-columns:none !important;

  max-width:none;

  padding:
    30px 34px !important;

}


.rs-planner-home-v2
.rs-planner-home-content{

  max-width:
    760px;

}


.rs-planner-home-v2 h2{

  max-width:
    680px;

  margin:
    12px 0 9px !important;

}


.rs-planner-home-v2
.rs-planner-home-content > p{

  max-width:
    690px;

}


.rs-planner-home-v2
.rs-planner-features{

  margin-top:
    14px;

}


.rs-planner-home-v2
.rs-planner-home-button{

  margin-top:
    17px;

}


/* visual lama tidak boleh muncul */

.rs-planner-home-v2
.rs-planner-home-visual{

  display:none !important;

}


/* MOBILE */

@media(max-width:620px){

  .rs-planner-home.rs-planner-home-v2{

    padding:
      21px 18px 22px
      !important;

  }


  .rs-planner-home-v2 h2{

    margin-top:
      10px !important;

    font-size:
      22px !important;

    line-height:
      1.25 !important;

  }


  .rs-planner-home-v2
  .rs-planner-home-content > p{

    font-size:
      13px !important;

    line-height:
      1.55 !important;

  }


  .rs-planner-home-v2
  .rs-planner-features{

    margin-top:
      13px;

  }


  .rs-planner-home-v2
  .rs-planner-home-button{

    margin-top:
      15px;

  }

}



/* =========================================================
   RUMAHSIMPEL-RESPONSIVE-GUARD-V1-TOOLS
   ========================================================= */

@media screen and (max-width:850px),
       screen and (pointer:coarse) and (max-width:1100px){

  /* ---------------------------------------------
     KATEGORI
     --------------------------------------------- */

  .rs-home-categories-wrap{
    margin-top:20px !important;
    margin-bottom:18px !important;
  }

  .rs-home-categories{
    padding:
      18px 14px !important;

    border-radius:
      15px !important;
  }

  .rs-home-categories-head{
    margin-bottom:
      14px !important;
  }

  .rs-home-categories-head h2{
    font-size:
      20px !important;
  }

  .rs-home-category-grid{

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;

    gap:
      8px !important;
  }

  .rs-home-category-card{

    min-height:
      86px !important;

    padding:
      11px !important;

    border-radius:
      11px !important;
  }

  .rs-home-category-icon{

    flex:
      0 0 39px !important;

    width:
      39px !important;

    height:
      39px !important;

    font-size:
      19px !important;
  }

  .rs-home-category-card b{

    font-size:
      12px !important;
  }

  .rs-home-category-card small{

    display:none !important;
  }


  /* ---------------------------------------------
     PLANNER CTA
     --------------------------------------------- */

  .rs-planner-home-wrap{

    margin-top:
      18px !important;

    margin-bottom:
      18px !important;
  }

  .rs-planner-home,
  .rs-planner-home.rs-planner-home-v2{

    display:block !important;

    grid-template-columns:
      none !important;

    padding:
      22px 18px !important;

    border-radius:
      16px !important;
  }

  .rs-planner-home h2{

    font-size:
      22px !important;

    line-height:
      1.25 !important;
  }

  .rs-planner-home-content > p{

    font-size:
      13px !important;

    line-height:
      1.55 !important;
  }

  .rs-planner-features{

    gap:
      5px !important;
  }

  .rs-planner-features span{

    font-size:
      10px !important;
  }

  .rs-planner-home-button{

    width:100% !important;

    box-sizing:border-box !important;

    margin-top:
      15px !important;

    padding:
      12px 14px !important;
  }


  /* ---------------------------------------------
     TOOLS
     --------------------------------------------- */

  .rs-tools-home{

    padding:
      18px 14px !important;

    border-radius:
      15px !important;
  }

  .rs-tools-home-grid{

    grid-template-columns:
      1fr !important;
  }

  .rs-tools-home-card{

    width:
      100% !important;

    box-sizing:
      border-box !important;
  }

}