/* IWEBS.ID FAQ — Premium Frontend V1 */
.iw-faq-page {
  --faq-navy: #112d52;
  --faq-blue: #2469aa;
  --faq-ink: #182b43;
  --faq-muted: #61728a;
  --faq-line: #e4eaf1;
  --faq-bg: #f7f9fc;
  color: var(--faq-ink);
}
.iw-faq-page * { box-sizing: border-box; }

.iw-faq-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg,#0c2443 0%,#143b65 63%,#22598a 100%);
  color: #fff;
  padding: 92px 0 106px;
  text-align: center;
}
.iw-faq-hero:before,
.iw-faq-hero:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.iw-faq-hero:before {
  width: 500px; height: 500px;
  right: -180px; top: -320px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 0 65px rgba(255,255,255,.025),
              0 0 0 130px rgba(255,255,255,.02);
}
.iw-faq-hero:after {
  width: 300px; height: 300px;
  left: -170px; bottom: -230px;
  background: rgba(91,169,237,.07);
}
.iw-faq-hero .container { position: relative; z-index: 1; }
.iw-faq-eyebrow {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  color: #bedcff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 24px;
}
.iw-faq-hero h1 {
  color: #fff;
  margin: 0 auto 18px;
  max-width: 900px;
  font-size: clamp(32px,4vw,53px);
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -1.7px;
}
.iw-faq-hero p {
  max-width: 690px;
  margin: 0 auto 33px;
  color: #d2e1f0;
  font-size: 16px;
  line-height: 1.85;
}
.iw-faq-search-wrap {
  position: relative;
  max-width: 650px;
  margin: auto;
}
.iw-faq-search-label {
  display: block;
  text-align: left;
  font-size: 12px;
  color: #dceaff;
  font-weight: 600;
  margin-bottom: 9px;
}
#faq-search {
  display: block;
  width: 100%;
  height: 65px;
  padding: 0 26px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 15px;
  background: #fff;
  color: #172d48;
  font: inherit;
  font-size: 15px;
  outline: none;
  box-shadow: 0 16px 45px rgba(4,20,40,.17);
  transition: box-shadow .2s,border-color .2s;
}
#faq-search:focus {
  border-color: #91caff;
  box-shadow: 0 0 0 4px rgba(145,202,255,.2),
              0 16px 45px rgba(4,20,40,.17);
}
.iw-faq-content {
  padding: 72px 0 105px;
  background: var(--faq-bg);
  min-height: 430px;
}
.iw-faq-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.iw-faq-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--faq-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}
.iw-faq-heading h2 {
  margin: 0;
  color: var(--faq-navy);
  font-size: clamp(25px,3vw,35px);
  font-weight: 800;
  letter-spacing: -.7px;
}
.iw-faq-total {
  color: var(--faq-muted);
  font-size: 13px;
  white-space: nowrap;
}
.iw-faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 29px;
}
.iw-faq-filter {
  background: #fff;
  color: #40566f;
  border: 1px solid #dce5ee;
  padding: 12px 18px;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}
.iw-faq-filter:hover {
  border-color: var(--faq-blue);
  color: var(--faq-blue);
}
.iw-faq-filter.is-active {
  color: #fff;
  background: var(--faq-navy);
  border-color: var(--faq-navy);
}
.iw-faq-list {
  display: grid;
  gap: 12px;
}
.iw-faq-item {
  background: #fff;
  border: 1px solid var(--faq-line);
  border-radius: 13px;
  box-shadow: 0 4px 17px rgba(16,43,76,.035);
  overflow: hidden;
}
.iw-faq-item[hidden] { display: none !important; }
.iw-faq-item[open] {
  border-color: #c8d9e9;
  box-shadow: 0 12px 28px rgba(16,43,76,.065);
}
.iw-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  padding: 23px 27px;
  color: var(--faq-ink);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 750;
}
.iw-faq-item summary::-webkit-details-marker { display: none; }
.iw-faq-item summary:hover { color: var(--faq-blue); }
.iw-faq-item summary:focus-visible {
  outline: 3px solid #83bbef;
  outline-offset: -4px;
}
.iw-faq-plus {
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #edf3f9;
  color: var(--faq-blue);
  font-size: 23px;
  font-weight: 400;
  transition: transform .2s;
}
.iw-faq-item[open] .iw-faq-plus {
  transform: rotate(45deg);
  color: #fff;
  background: var(--faq-blue);
}
.iw-faq-answer {
  padding: 0 27px 26px;
  max-width: 970px;
  color: #576b80;
  font-size: 14px;
  line-height: 1.95;
}
.iw-faq-empty,
.iw-faq-no-content {
  border: 1px solid var(--faq-line);
  background: #fff;
  padding: 45px 30px;
  border-radius: 14px;
  text-align: center;
  color: var(--faq-muted);
}
.iw-faq-empty[hidden] { display: none !important; }
.iw-faq-no-content h3 {
  color: var(--faq-navy);
  font-size: 22px;
  margin: 0 0 12px;
}
.iw-faq-no-content p { margin: 0; line-height: 1.8; }
@media(max-width:767px) {
  .iw-faq-hero { padding: 65px 0 75px; }
  .iw-faq-hero h1 { letter-spacing: -.8px; }
  .iw-faq-hero p { font-size: 14px; }
  #faq-search { height: 58px; }
  .iw-faq-content { padding: 47px 0 70px; }
  .iw-faq-heading { display: block; }
  .iw-faq-total { display: block; margin-top: 12px; }
  .iw-faq-filters { gap: 8px; }
  .iw-faq-filter { padding: 10px 13px; font-size: 11px; }
  .iw-faq-item summary { padding: 19px; font-size: 14px; }
  .iw-faq-answer { padding: 0 19px 20px; font-size: 13px; }
}
body.iw-faq-page main .iw-faq-content > .container,body.iw-faq-page main .iw-faq-hero > .container{width:min(1210px,calc(100% - 42px))!important;max-width:1210px!important;margin-inline:auto!important;padding-inline:0!important}

/* IWEBS FAQ PREMIUM CLEAN V6 */
:root{
  --iw-faq-text:#17365f;
  --iw-faq-muted:#5f7694;
  --iw-faq-line:#d8e2ef;
  --iw-faq-card:#ffffff;
  --iw-faq-soft:#f5f8fc;
  --iw-faq-primary:#163d73;
  --iw-faq-primary-2:#1f5ea8;
}

body.iw-faq-page{
  color:var(--iw-faq-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.iw-faq-page .iw-faq-hero{
  padding-top:54px!important;
  padding-bottom:26px!important;
}

body.iw-faq-page .iw-faq-kicker{
  font-size:13px!important;
  letter-spacing:.12em!important;
  font-weight:700!important;
  color:var(--iw-faq-primary-2)!important;
  text-transform:uppercase!important;
}

body.iw-faq-page .iw-faq-heading{
  align-items:flex-end!important;
  gap:18px!important;
}

body.iw-faq-page .iw-faq-heading h2{
  font-size:56px!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
  font-weight:700!important;
  margin:10px 0 0!important;
  color:#143864!important;
}

body.iw-faq-page .iw-faq-total{
  font-size:17px!important;
  line-height:1.5!important;
  font-weight:500!important;
  color:var(--iw-faq-muted)!important;
  white-space:nowrap!important;
}

body.iw-faq-page .iw-faq-content{
  padding-top:8px!important;
  padding-bottom:56px!important;
}

body.iw-faq-page .iw-faq-filters{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin:0 0 28px!important;
}

body.iw-faq-page .iw-faq-filters > *{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:54px!important;
  padding:0 20px 0 18px!important;
  border:1px solid var(--iw-faq-line)!important;
  background:#fff!important;
  color:var(--iw-faq-text)!important;
  border-radius:15px!important;
  font-size:17px!important;
  line-height:1.35!important;
  font-weight:500!important;
  box-shadow:none!important;
  transition:all .18s ease!important;
}

body.iw-faq-page .iw-faq-filters > *::before{
  content:"";
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  background:#e7eef8 center/12px 12px no-repeat!important;
  flex:0 0 18px!important;
}

body.iw-faq-page .iw-faq-filters > *:nth-child(1)::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/></svg>");
}
body.iw-faq-page .iw-faq-filters > *:nth-child(2)::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/><path d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>");
}
body.iw-faq-page .iw-faq-filters > *:nth-child(3)::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3a15 15 0 0 1 0 18'/><path d='M12 3a15 15 0 0 0 0 18'/></svg>");
}
body.iw-faq-page .iw-faq-filters > *:nth-child(4)::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M3 9h18'/><path d='M9 20V9'/></svg>");
}
body.iw-faq-page .iw-faq-filters > *:nth-child(5)::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19h16'/><path d='M7 15l4-4 3 3 4-6'/></svg>");
}
body.iw-faq-page .iw-faq-filters > *:nth-child(6)::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-3.3-6.46'/><path d='M20 4v6h-6'/></svg>");
}

body.iw-faq-page .iw-faq-filters > *.active,
body.iw-faq-page .iw-faq-filters > *[aria-pressed="true"],
body.iw-faq-page .iw-faq-filters > *.is-active{
  background:var(--iw-faq-primary)!important;
  color:#fff!important;
  border-color:var(--iw-faq-primary)!important;
  box-shadow:0 14px 34px rgba(22,61,115,.16)!important;
}
body.iw-faq-page .iw-faq-filters > *.active::before,
body.iw-faq-page .iw-faq-filters > *[aria-pressed="true"]::before,
body.iw-faq-page .iw-faq-filters > *.is-active::before{
  background-color:rgba(255,255,255,.16)!important;
  filter:brightness(0) invert(1)!important;
}
body.iw-faq-page .iw-faq-filters > *:hover{
  transform:translateY(-1px)!important;
  border-color:#c4d3e6!important;
}

body.iw-faq-page .iw-faq-list{
  display:grid!important;
  gap:14px!important;
}

body.iw-faq-page .iw-faq-list > *{
  border:1px solid var(--iw-faq-line)!important;
  background:var(--iw-faq-card)!important;
  border-radius:18px!important;
  box-shadow:0 8px 24px rgba(17,42,79,.04)!important;
  overflow:hidden!important;
}

body.iw-faq-page .iw-faq-list > * > *:first-child,
body.iw-faq-page .iw-faq-list .iw-faq-question{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-height:88px!important;
  padding:0 84px 0 28px!important;
  font-size:30px!important;
  line-height:1.34!important;
  font-weight:600!important;
  color:#17365f!important;
}

body.iw-faq-page .iw-faq-list > * > *:first-child::before,
body.iw-faq-page .iw-faq-list .iw-faq-question::before{
  content:"";
  width:22px!important;
  height:22px!important;
  border-radius:50%!important;
  flex:0 0 22px!important;
  background:#eef4fb center/14px 14px no-repeat!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.09 9a3 3 0 1 1 5.82 1c0 2-3 2-3 4'/><path d='M12 17h.01'/></svg>");
}

body.iw-faq-page .iw-faq-answer,
body.iw-faq-page .iw-faq-list > * > *:not(:first-child){
  padding:0 28px 26px 64px!important;
  margin-top:-6px!important;
  font-size:18px!important;
  line-height:1.78!important;
  font-weight:400!important;
  color:var(--iw-faq-muted)!important;
}

body.iw-faq-page .iw-faq-plus{
  width:40px!important;
  height:40px!important;
  right:24px!important;
  top:24px!important;
  border-radius:50%!important;
  background:#eef4fb!important;
  color:var(--iw-faq-primary)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:26px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
}

body.iw-faq-page .iw-faq-plus::before{
  content:"";
  width:18px!important;
  height:18px!important;
  display:block!important;
  background:center/18px 18px no-repeat!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>");
}
body.iw-faq-page .iw-faq-plus{
  color:transparent!important;
}
body.iw-faq-page .iw-faq-item.is-open .iw-faq-plus::before,
body.iw-faq-page .iw-faq-list .open .iw-faq-plus::before,
body.iw-faq-page .iw-faq-list details[open] .iw-faq-plus::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d73' stroke-width='2.2' stroke-linecap='round'><path d='M5 12h14'/></svg>");
}

body.iw-faq-page .iw-faq-list > *:hover{
  border-color:#c7d6e8!important;
  box-shadow:0 14px 34px rgba(17,42,79,.06)!important;
}

@media (max-width:1100px){
  body.iw-faq-page .iw-faq-heading h2{font-size:46px!important}
  body.iw-faq-page .iw-faq-list > * > *:first-child,
  body.iw-faq-page .iw-faq-list .iw-faq-question{font-size:24px!important}
}

@media (max-width:820px){
  body.iw-faq-page .iw-faq-heading{display:block!important}
  body.iw-faq-page .iw-faq-total{display:block!important;margin-top:10px!important}
  body.iw-faq-page .iw-faq-heading h2{font-size:38px!important}
  body.iw-faq-page .iw-faq-filters > *{font-size:15px!important;min-height:50px!important;padding:0 16px!important}
  body.iw-faq-page .iw-faq-list > * > *:first-child,
  body.iw-faq-page .iw-faq-list .iw-faq-question{
    min-height:78px!important;
    padding:0 70px 0 22px!important;
    font-size:20px!important;
  }
  body.iw-faq-page .iw-faq-answer,
  body.iw-faq-page .iw-faq-list > * > *:not(:first-child){
    padding:0 22px 22px 52px!important;
    font-size:16px!important;
  }
}

@media (max-width:540px){
  body.iw-faq-page .iw-faq-hero{padding-top:38px!important}
  body.iw-faq-page .iw-faq-heading h2{font-size:31px!important}
  body.iw-faq-page .iw-faq-total{font-size:15px!important}
  body.iw-faq-page .iw-faq-filters{gap:10px!important}
  body.iw-faq-page .iw-faq-filters > *{
    width:100%!important;
    justify-content:flex-start!important;
    border-radius:14px!important;
    font-size:15px!important;
  }
  body.iw-faq-page .iw-faq-list > * > *:first-child,
  body.iw-faq-page .iw-faq-list .iw-faq-question{
    font-size:18px!important;
    line-height:1.45!important;
    padding:0 66px 0 18px!important;
  }
  body.iw-faq-page .iw-faq-answer,
  body.iw-faq-page .iw-faq-list > * > *:not(:first-child){
    padding:0 18px 20px 46px!important;
    font-size:15px!important;
    line-height:1.72!important;
  }
  body.iw-faq-page .iw-faq-plus{
    width:36px!important;
    height:36px!important;
    right:18px!important;
    top:20px!important;
  }
}
