/* =====================================================
   Doctor Laptop Jogja - Custom Styles
===================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

::selection { background: #ff8012; color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(#175bf5,#ff8012); border-radius: 10px; }

/* grid pattern bg */
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ===== Preloader ===== */
#preloader { transition: opacity .5s ease, visibility .5s ease; }
#preloader.loaded { opacity: 0; visibility: hidden; }

/* ===== Reveal on scroll ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Nav links ===== */
.nav-link { color: inherit; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: linear-gradient(90deg,#175bf5,#ff8012);
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active-link::after { width: 100%; }
.nav-link:hover, .nav-link.active-link { color: #175bf5; }
.dark .nav-link:hover, .dark .nav-link.active-link { color: #59a3ff; }

.mobile-link { display:block; padding: .5rem 0; color: inherit; }
.mobile-link:hover { color: #175bf5; }

/* ===== Service cards ===== */
.service-card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position: relative;
  overflow: hidden;
}
.dark .service-card { background: rgb(15 23 42 / .6); border-color: rgb(51 65 85); }
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(23,91,245,.15);
  border-color: rgb(89 163 255 / .5);
}
.service-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
  transition: transform .35s ease;
}
.service-card:hover .service-icon { transform: rotate(-8deg) scale(1.08); }
.service-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #0f172a;
  margin-bottom: .6rem;
}
.dark .service-card h3 { color: #fff; }
.service-card p {
  font-size: .9rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.dark .service-card p { color: #94a3b8; }
.detail-btn {
  font-size: .85rem;
  font-weight: 600;
  color: #175bf5;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .3s ease;
}
.dark .detail-btn { color: #59a3ff; }
.detail-btn:hover { gap: .7rem; }

/* ===== Tabs (keunggulan) ===== */
.tab-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.25rem;
  border-radius: .9rem;
  color: rgb(203 213 225);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all .3s ease;
  text-align: left;
}
.tab-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tab-btn.active-tab {
  background: linear-gradient(90deg, rgba(23,91,245,.9), rgba(255,128,18,.85));
  color: #fff;
  box-shadow: 0 10px 25px -5px rgba(255,128,18,.35);
}
.tab-content { animation: fadeIn .5s ease; }
.tab-content.hidden { display: none; }
@keyframes fadeIn { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:translateY(0);} }

/* ===== Steps ===== */
.step-card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: transform .3s ease, box-shadow .3s ease;
}
.dark .step-card { background: rgb(15 23 42); border-color: rgb(51 65 85); }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -10px rgba(23,91,245,.18); }
.step-num {
  width: 3rem; height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background: linear-gradient(135deg,#175bf5,#ff8012);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins',sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 8px 20px -4px rgba(23,91,245,.45);
}
.step-card h3 { font-family:'Poppins',sans-serif; font-weight:700; color:#0f172a; margin-bottom:.5rem; }
.dark .step-card h3 { color:#fff; }
.step-card p { font-size:.85rem; color:#64748b; line-height:1.6; }
.dark .step-card p { color:#94a3b8; }

/* ===== Price tabs & table ===== */
.price-tab-btn {
  padding: .7rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid rgb(226 232 240);
  color: #475569;
  background: #fff;
  transition: all .3s ease;
}
.dark .price-tab-btn { background: rgb(15 23 42); border-color: rgb(51 65 85); color:#cbd5e1; }
.price-tab-btn.active-price {
  background: linear-gradient(90deg,#175bf5,#ff8012);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px -6px rgba(23,91,245,.4);
}
.price-panel.hidden { display: none; }
.price-table {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 15px 35px -15px rgba(15,23,42,.1);
}
.dark .price-table { background: rgb(15 23 42); border-color: rgb(51 65 85); }
.price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  font-size: .9rem;
  border-bottom: 1px solid rgb(241 245 249);
}
.dark .price-row { border-color: rgb(30 41 59); color: #cbd5e1; }
.price-row:last-child { border-bottom: none; }
.price-row-head {
  background: rgb(248 250 252);
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
}
.dark .price-row-head { background: rgb(30 41 59); color: #fff; }
.price-row span:last-child { font-weight: 600; color: #175bf5; }
.dark .price-row span:last-child { color: #59a3ff; }

/* ===== Gallery ===== */
.gallery-img {
  width: 100%;
  border-radius: 1rem;
  break-inside: avoid;
  cursor: zoom-in;
  transition: transform .4s ease, filter .4s ease;
  filter: saturate(0.95);
}
.gallery-img:hover { transform: scale(1.03); filter: saturate(1.1) brightness(1.03); }

/* ===== Testimonials ===== */
.testi-slide { min-width: 100%; padding: 0 .5rem; }
.testi-card {
  background: #fff;
  border-radius: 1.75rem;
  padding: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(15,23,42,.12);
  border: 1px solid rgb(226 232 240);
}
.dark .testi-card { background: rgb(15 23 42); border-color: rgb(51 65 85); }
.testi-card p { color:#475569; font-size:1.05rem; line-height:1.75; font-style: italic; }
.dark .testi-card p { color: #cbd5e1; }
.testi-user { display:flex; align-items:center; gap:.9rem; margin-top:1.75rem; }
.testi-avatar {
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: linear-gradient(135deg,#175bf5,#ff8012);
  color: #fff; display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-family:'Poppins',sans-serif;
}
.testi-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: #fff; color: #175bf5;
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 25px -5px rgba(15,23,42,.2);
  transition: all .3s ease;
  z-index: 10;
}
.dark .testi-nav-btn { background: rgb(15 23 42); color:#59a3ff; }
.testi-nav-btn:hover { background: #175bf5; color: #fff; }
.testi-dot { width: .6rem; height: .6rem; border-radius: 9999px; background: rgb(203 213 225); transition: all .3s ease; cursor: pointer; }
.testi-dot.active-dot { width: 1.75rem; background: linear-gradient(90deg,#175bf5,#ff8012); }
.dark .testi-dot { background: rgb(51 65 85); }

/* ===== FAQ ===== */
.faq-item {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  overflow: hidden;
}
.dark .faq-item { background: rgb(15 23 42); border-color: rgb(51 65 85); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  text-align: left;
  color: #0f172a;
}
.dark .faq-question { color: #fff; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
  padding: 0 1.5rem;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.7;
}
.dark .faq-answer { color: #94a3b8; }
.faq-item.open .faq-answer { padding: 0 1.5rem 1.5rem; }
.faq-item.open .faq-question i { transform: rotate(180deg); color: #ff8012; }

/* ===== Contact ===== */
.contact-card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.dark .contact-card { background: rgb(15 23 42); border-color: rgb(51 65 85); }
.contact-card:hover { transform: translateX(4px); box-shadow: 0 15px 30px -12px rgba(15,23,42,.15); }
.contact-icon {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: .85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

.form-label { display:block; font-size:.8rem; font-weight:600; color:#334155; margin-bottom:.4rem; }
.dark .form-label { color: #cbd5e1; }
.form-input {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: .75rem;
  border: 1px solid rgb(226 232 240);
  background: #f8fafc;
  color: #0f172a;
  font-size: .9rem;
  transition: all .25s ease;
}
.dark .form-input { background: rgb(30 41 59); border-color: rgb(51 65 85); color: #fff; }
.form-input:focus {
  outline: none;
  border-color: #175bf5;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(23,91,245,.12);
}
.dark .form-input:focus { background: rgb(15 23 42); }

/* ===== Footer ===== */
.footer-social {
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  display: flex; align-items:center; justify-content:center;
  color: #cbd5e1;
  transition: all .3s ease;
}
.footer-social:hover { background: #ff8012; color: #fff; transform: translateY(-3px); }

/* ===== Service Detail Modal ===== */
#modal-overlay.show { display: flex; }
.service-modal {
  background: #fff;
  border-radius: 1.5rem;
  padding: 2.5rem;
  max-width: 32rem;
  width: 100%;
  position: relative;
  animation: modalPop .35s ease;
}
.dark .service-modal { background: rgb(15 23 42); color: #e2e8f0; }
.service-modal.show { display: block; }
.service-modal h3 { font-family:'Poppins',sans-serif; font-weight: 800; font-size:1.5rem; margin-bottom:1rem; color:#0f172a; }
.dark .service-modal h3 { color: #fff; }
.service-modal p { color:#64748b; line-height:1.7; margin-bottom:1.25rem; }
.dark .service-modal p { color:#94a3b8; }
.service-modal ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.service-modal ul li { display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; color:#334155; }
.dark .service-modal ul li { color:#cbd5e1; }
.service-modal ul li::before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color:#175bf5; margin-top:.2rem; }
@keyframes modalPop { from { opacity:0; transform: scale(.92) translateY(10px);} to {opacity:1; transform: scale(1) translateY(0);} }

/* ===== back to top visible state ===== */
#back-to-top.show { opacity: 1; pointer-events: auto; }

/* ===== navbar scrolled shadow ===== */
#navbar.scrolled { box-shadow: 0 10px 30px -15px rgba(15,23,42,.15); }