/* ==========================================================================
   Beranda Service Desk | Diskominfo Kota Tasikmalaya
   Semua kelas berawalan "sd-" agar tidak bentrok dengan Bootstrap.
   Urutan: 1 Token | 2 Dasar | 3 Header | 4 Hero | 5 Layanan | 6 Alur | 7 FAQ
           8 Footer | 9 Responsive (1000px, 860px, 700px, 360px)
   ========================================================================== */

/* 1. TOKEN -------------------------------------------------------------- */
.sd {
  --navy: #0B1F5C;
  --blue: #0A57D0;
  --brand: #0750D6;
  --link: #0B7EA8;
  --ink: #0B1F5C;
  --mut: #53627F;
  --soft: #4457B8;
  --line: #DCE8F5;
  --alur: #0A4285;
  --foot: #0A3F7F;
  --pad: clamp(20px, 3.8vw, 72px);
  /* jarak kiri-kanan halaman */
  --max: none;
  /* isi mis. 1760px bila ingin dibatasi di monitor sangat lebar */
  --gap: clamp(40px, 6vw, 72px);
  /* jarak antar bagian */
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: clip;
}

/* 2. DASAR -------------------------------------------------------------- */
.sd *,
.sd *::before,
.sd *::after {
  box-sizing: border-box
}

.sd h1,
.sd h2,
.sd h3,
.sd p,
.sd ul,
.sd ol {
  margin: 0;
  padding: 0
}

.sd ul,
.sd ol {
  list-style: none
}

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

.sd img {
  display: block;
  max-width: 100%;
  height: auto
}

.sd :focus-visible {
  outline: 3px solid #7FB0FF;
  outline-offset: 2px
}

.sd-w {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad)
}

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 28px;
  border: 1.5px solid var(--blue);
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(10, 87, 208, .22)
}

.sd-btn.o {
  background: #fff;
  color: var(--blue);
  box-shadow: none
}

/* 3. HEADER ------------------------------------------------------------- */
.sd-hd {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line)
}

.sd-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: clamp(64px, 7vw, 86px)
}

.sd-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none
}

.sd-brand img {
  width: auto;
  height: clamp(40px, 4.6vw, 60px)
}

.sd-brand strong {
  display: block;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.15;
  font-weight: 800
}

.sd-brand small {
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--soft)
}

.sd-collapse {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 32px
}

.sd-menu {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  margin-inline: auto
}

.sd-menu a {
  position: relative;
  padding: 12px 2px;
  font-weight: 600;
  font-size: 15px
}

.sd-menu a.on {
  color: var(--blue)
}

.sd-menu a.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--blue)
}

.sd-auth {
  display: flex;
  align-items: center;
  gap: 12px
}

.sd-auth form {
  margin: 0
}

.sd-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  place-items: center
}

/* 4. HERO --------------------------------------------------------------- */
.sd-hero {
  background: linear-gradient(180deg, #EAF5FF 0%, #F7FBFF 100%)
}

.sd-hi {
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1fr);
  grid-template-areas: "intro panel" "figure panel" "hours panel";
  column-gap: var(--gap);
  row-gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
  padding-block: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 64px)
}

.sd-intro {
  grid-area: intro
}

.sd-h1 {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.04
}

.sd-h1 .a,
.sd-h1 .c {
  font-size: clamp(26px, 3.6vw, 48px)
}

.sd-h1 .b {
  font-size: clamp(46px, 6.4vw, 88px);
  color: var(--brand);
  letter-spacing: -.04em;
  line-height: 1.02
}

.sd-sub {
  margin-top: 18px;
  max-width: 520px;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.55;
  color: var(--mut)
}

.sd-fig {
  grid-area: figure
}

.sd-fig img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(10, 66, 133, .16)
}

.sd-hours {
  grid-area: hours;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px
}

.sd-hours .ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #D6EAFB;
  color: var(--blue)
}

.sd-hours b {
  display: block;
  font-size: 15px
}

.sd-hours span span {
  color: var(--mut)
}

.sd-cta {
  grid-area: cta;
  display: none;
  gap: 12px
}

.sd-cta .sd-btn {
  flex: 1
}

/* 5. PANEL & KARTU LAYANAN --------------------------------------------- */
.sd-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.sd-ph {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px
}

.sd-ph h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2
}

.sd-ph p {
  margin-top: 6px;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--mut)
}

.sd-track {
  flex: none;
  padding-top: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--blue);
  white-space: nowrap
}

.sd-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  margin: 20px 0;
  padding: 0 16px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--mut)
}

.sd-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px
}

.sd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.sd-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: clamp(170px, 16vw, 230px);
  padding: 18px 10px 14px;
  text-align: center;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(10, 66, 133, .07);
  transition: transform .15s, box-shadow .15s, border-color .15s
}

.sd-card:hover {
  transform: translateY(-3px);
  border-color: #9CC3F0;
  box-shadow: 0 14px 26px rgba(10, 66, 133, .14)
}

.sd-card img {
  width: clamp(56px, 6.2vw, 92px);
  height: clamp(56px, 6.2vw, 92px);
  object-fit: contain
}

.sd-card strong {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.25;
  font-weight: 700
}

.sd-card span {
  font-size: clamp(12px, 1vw, 13.5px);
  font-weight: 700;
  color: var(--link)
}

.sd-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--mut)
}

/* 6. ALUR --------------------------------------------------------------- */
.sd-alur {
  position: relative;
  overflow: hidden;
  background: var(--alur);
  color: #fff
}

.sd-alur .sd-w {
  position: relative;
  padding-block: clamp(32px, 4.5vw, 52px)
}

.sd-alur h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.015em
}

.sd-sky {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(60%, 720px);
  height: 100%;
  opacity: .07;
  color: #fff
}

.sd-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 28px
}

.sd-step {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.sd-sh {
  display: flex;
  align-items: center;
  gap: 14px
}

.sd-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-weight: 800;
  font-size: 17px
}

.sd-sic {
  display: grid;
  flex: none
}

.sd-dots {
  flex: 1;
  min-width: 20px;
  border-top: 2px dotted rgba(255, 255, 255, .4)
}

.sd-step:last-child .sd-dots {
  display: none
}

.sd-st h3 {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700
}

.sd-st p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #D3E3F6;
  max-width: 280px
}

/* 7. FAQ ---------------------------------------------------------------- */
.sd-faq {
  background: #F7FBFF
}

.sd-faq .sd-w {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--gap);
  padding-block: clamp(32px, 5vw, 56px);
  align-items: start
}

.sd-faq h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1
}

.sd-faq .lead {
  margin-top: 10px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--soft);
  line-height: 1.5
}

.sd-qa {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.sd-qa details {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 0 20px
}

.sd-qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none
}

.sd-qa summary::-webkit-details-marker {
  display: none
}

.sd-qa summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .15s
}

.sd-qa details[open] summary::after {
  margin-top: 4px;
  transform: rotate(-135deg)
}

.sd-qa p {
  padding-bottom: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mut)
}

/* 8. FOOTER ------------------------------------------------------------- */
.sd-ft {
  background: var(--foot);
  color: #fff
}

.sd-ft .sd-w {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding-block: clamp(28px, 4vw, 40px) 24px
}

.sd-ft .col {
  padding-inline: clamp(16px, 3vw, 40px);
  border-left: 1px solid #2A5E9E
}

.sd-ft .col:first-child {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 0;
  border: 0
}

.sd-ft img {
  width: auto;
  height: clamp(64px, 8vw, 92px)
}

.sd-ft strong,
.sd-ft h4 {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700
}

.sd-ft p,
.sd-ft li,
.sd-ft a {
  font-size: 13.5px;
  line-height: 1.85;
  color: #D3E3F6
}

.sd-cp {
  border-top: 1px solid #2A5E9E
}

.sd-cp .sd-w {
  display: block;
  padding-block: 16px;
  font-size: 13px;
  color: #D3E3F6
}

.sd-alert {
  max-width: var(--max);
  margin: 16px auto 0;
  padding-inline: var(--pad)
}

/* 9. RESPONSIVE --------------------------------------------------------- */
@media (max-width:1000px) {

  /* tablet: hero satu kolom */
  .sd-hi {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "figure" "hours" "cta" "panel"
  }

  .sd-fig {
    max-width: 560px;
    margin-inline: auto;
    width: 100%
  }

  .sd-hours {
    justify-content: center
  }

  .sd-card {
    min-height: 190px
  }
}

@media (max-width:860px) {

  /* header menjadi menu hamburger */
  .sd-burger {
    display: grid
  }

  .sd-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px var(--pad) 20px;
    background: #fff;
    box-shadow: 0 14px 22px rgba(10, 66, 133, .12)
  }

  .sd-open .sd-collapse {
    display: flex
  }

  .sd-menu {
    flex-direction: column;
    gap: 0;
    margin: 0
  }

  .sd-menu a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
  }

  .sd-menu a.on::after {
    display: none
  }

  .sd-auth {
    flex-direction: column;
    align-items: stretch
  }

  .sd-auth .sd-btn {
    width: 100%
  }

  .sd-cta {
    display: flex
  }

  .sd-hours {
    padding: 12px 16px;
    background: #E0EFFC;
    border-radius: 10px;
    justify-content: flex-start
  }
}

@media (max-width:700px) {

  /* HP */
  .sd-panel {
    display: flex
  }

  .sd-ph {
    display: contents
  }

  .sd-ph>div {
    order: 1
  }

  .sd-search {
    order: 2;
    margin: 16px 0 12px
  }

  .sd-track {
    order: 3;
    padding: 0 0 14px
  }

  .sd-grid {
    order: 4
  }

  .sd-note {
    order: 5
  }

  .sd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .sd-card {
    min-height: 150px
  }

  .sd-steps {
    position: relative;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px
  }

  .sd-steps::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    bottom: 24px;
    border-left: 2px dotted rgba(255, 255, 255, .45)
  }

  .sd-step {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 14px
  }

  .sd-sh {
    flex: none
  }

  .sd-dots {
    display: none
  }

  .sd-st p {
    margin-top: 2px;
    max-width: none
  }

  .sd-faq .sd-w {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .sd-ft .sd-w {
    grid-template-columns: 1fr 1fr;
    gap: 18px 0
  }

  .sd-ft .col:first-child {
    grid-column: 1/-1
  }

  .sd-ft .col {
    padding-inline: 0 12px
  }

  .sd-ft .col:nth-child(3) {
    padding-left: 16px
  }

  .sd-ft .col:nth-child(2) {
    border: 0
  }
}

@media (max-width:360px) {
  .sd-cta {
    flex-direction: column
  }

  .sd-ft .sd-w {
    grid-template-columns: 1fr
  }

  .sd-ft .col:nth-child(3) {
    padding-left: 0;
    border: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .sd * {
    transition: none !important
  }
}

.sd-fig {
  margin: 0;
  width: 100%;
  max-width: 560px
}

.sd-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 390/255;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(10, 66, 133, .16)
}

@media (max-width:1000px) {
  .sd-fig {
    margin-inline: auto
  }
}

.sd-alert {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--pad) 0
}