/* =============================================================
   iFanss Gadget 2026 — Design System
   Direction: authentic, refined "Apple.com" light aesthetic.
   White canvas, Apple gray, SF Pro, generous whitespace, one calm
   Apple-blue accent. Goal: feel official, trustworthy, authorized —
   Kelantan's specialist MacBook repair. Craft = restraint + space.
   Brand logo preserved in nav + footer.
   ============================================================= */

:root{
  --bg:#ffffff;
  --bg-soft:#fbfbfd;        /* Apple near-white */
  --surface:#f5f5f7;        /* Apple light gray */
  --ink:#1d1d1f;            /* near-black — headings + body */
  --body:#1d1d1f;
  --muted:#6e6e73;          /* secondary (5:1 on white) */
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --blue:#0071e3;           /* authentic Apple accent */
  --blue-hover:#0077ed;
  --blue-ink:#06c;          /* link text (darker, AA on white) */
  --wa:#1fc15b;
  --star:#f5a623;
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:28px;
  --maxw:1024px;
  --maxw-wide:1180px;
  --pad:clamp(22px,5vw,40px);
  --space:clamp(80px,12vw,150px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.18,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.05);
  --shadow:0 4px 16px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.09);
  --shadow-product:0 30px 70px rgba(0,0,0,.16);
  --z-nav:100; --z-menu:200;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:clamp(16px,1.05vw,17px);line-height:1.47;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:5px}

/* Typography — Apple display scale */
h1,h2,h3,h4{color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.7rem,1.4rem + 4.6vw,4.5rem);letter-spacing:-.035em;line-height:1.05}
h2{font-size:clamp(2.05rem,1.2rem + 2.8vw,3.3rem);letter-spacing:-.028em}
h3{font-size:clamp(1.22rem,1rem + .7vw,1.5rem);letter-spacing:-.02em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.4;color:var(--ink);font-weight:400;letter-spacing:-.012em;max-width:60ch}
.muted{color:var(--muted)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--wide{max-width:var(--maxw-wide)}
section{padding-block:var(--space);scroll-margin-top:64px;position:relative}
.section--soft{background:var(--surface)}

/* Buttons — Apple pill */
.btn{--btn-bg:var(--blue);--btn-fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.78em 1.45em;border-radius:980px;border:0;cursor:pointer;font-size:1.0rem;font-weight:500;line-height:1;letter-spacing:-.01em;background:var(--btn-bg);color:var(--btn-fg);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s var(--ease-soft);white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:1em 1.9em;font-size:1.06rem}
.btn-wa{--btn-bg:var(--blue);--btn-fg:#fff}
.btn-wa:hover{--btn-bg:var(--blue-hover);box-shadow:0 8px 24px rgba(0,113,227,.32)}
.btn-primary{--btn-bg:var(--blue);--btn-fg:#fff}
.btn-primary:hover{--btn-bg:var(--blue-hover);box-shadow:0 8px 24px rgba(0,113,227,.32)}
.btn-ghost{--btn-bg:var(--surface);--btn-fg:var(--ink)}
.btn-ghost:hover{--btn-bg:#ebebed;transform:translateY(-1px)}
.btn-wa::before{content:"";width:1.15em;height:1.15em;flex:none;background:#fff;-webkit-mask:var(--wa-glyph) center/contain no-repeat;mask:var(--wa-glyph) center/contain no-repeat}
:root{--wa-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l-.999 3.648 3.978-1.041zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/%3E%3C/svg%3E")}

.link{display:inline-flex;align-items:center;gap:.2em;color:var(--blue-ink);font-weight:500}
.link::after{content:"›";font-size:1.25em;line-height:1;transition:transform .3s var(--ease)}
.link:hover{text-decoration:underline}
.link:hover::after{transform:translateX(3px)}

.stars{color:var(--star);letter-spacing:.04em;line-height:1}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* NAV */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line-soft);background:rgba(255,255,255,.85)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:10px}
.nav-logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:1.18rem;letter-spacing:-.03em;color:var(--ink)}
.nav-logo img{height:32px;width:auto}
.nav-logo span{color:var(--muted);font-weight:500}
.nav-links{display:flex;gap:2rem;font-size:.95rem;font-weight:400}
.nav-links a{color:var(--ink);opacity:.85;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1;color:var(--blue-ink)}
.nav-actions{display:flex;align-items:center;gap:.7rem}
.lang-toggle{border:1px solid var(--line);background:transparent;border-radius:980px;padding:.4em .85em;font-size:.85rem;font-weight:500;cursor:pointer;min-width:46px;color:var(--ink);transition:background .2s,border-color .2s}
.lang-toggle:hover{background:var(--surface);border-color:var(--ink)}
.nav-wa{padding:.55em 1.05em;font-size:.9rem}
.nav-burger{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--ink);line-height:1;padding:.2em}
@media (max-width:780px){
  .nav-links{position:fixed;inset:54px 0 auto 0;z-index:var(--z-menu);flex-direction:column;gap:.2rem;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);padding:1rem var(--pad) 1.4rem;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .4s var(--ease);box-shadow:var(--shadow)}
  .nav-links.open{transform:none}
  .nav-links a{padding:.7rem 0;font-size:1.15rem;border-bottom:1px solid var(--line-soft)}
  .nav-burger{display:block}.nav-wa{display:none}
}

/* HERO */
.hero{padding-top:clamp(44px,7vw,84px);overflow:hidden;background:linear-gradient(180deg,var(--bg-soft),var(--bg) 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(28px,5vw,72px)}
.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;color:var(--blue-ink);font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.16)}
.hero h1{margin-bottom:.4em}
.hero .lead{max-width:32ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem;align-items:center}
.hero-trust{margin-top:1.5rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:var(--muted);font-size:.97rem}
.hero-trust strong{color:var(--ink);font-weight:600}
.hero-art{position:relative}
.hero-art img{margin-inline:auto;filter:drop-shadow(var(--shadow-product));animation:floaty 7s var(--ease-soft) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero-art img{animation:none}}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.hero-cta,.hero-trust,.hero-kicker{justify-content:center}.hero-art{order:-1;max-width:520px;margin-inline:auto}}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.about-art img{margin-inline:auto;filter:drop-shadow(0 28px 56px rgba(0,0,0,.14))}
.about .badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.about .badges span{font-size:.9rem;color:var(--ink);background:var(--surface);padding:.5em 1em;border-radius:980px;font-weight:500}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;text-align:center}.about .badges{justify-content:center}.about-art{order:-1;max-width:460px;margin-inline:auto}}

/* WHY — feature list */
.why{background:var(--surface)}
.why-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;margin-top:clamp(2rem,4vw,3rem);box-shadow:var(--shadow-sm)}
.why-card{background:#fff;padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.4rem;transition:background .3s}
.why-card:hover{background:var(--bg-soft)}
.why-card::before{content:"";width:26px;height:26px;margin-bottom:.6rem;background:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.why-card strong{font-size:1.08rem;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.why-card span{color:var(--muted);font-size:.96rem}
@media (max-width:820px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.why-grid{grid-template-columns:1fr}}

/* SERVICES */
.servis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
.servis-card{background:var(--surface);border-radius:var(--radius-xl);padding:clamp(1.6rem,2.2vw,2rem);display:flex;flex-direction:column;gap:.7rem;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.servis-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:#fff}
.servis-card img{height:118px;width:auto;object-fit:contain;margin:.2rem auto 1rem;filter:drop-shadow(0 16px 28px rgba(0,0,0,.13))}
.servis-card h3{color:var(--ink)}
.servis-card p{color:var(--muted);font-size:.98rem;flex:1}
.servis-card .btn{align-self:flex-start;margin-top:.5rem}
.servis-card--list{justify-content:flex-start;background:var(--ink)}
.servis-card--list h3{color:#fff;margin-bottom:.4rem}
.servis-sub{list-style:none;display:grid;gap:.7rem;margin-top:.2rem}
.servis-sub li{padding-left:1.7em;position:relative;color:rgba(255,255,255,.85);font-size:.97rem}
.servis-sub li::before{content:"";position:absolute;left:0;top:.2em;width:1.05em;height:1.05em;background:#0a84ff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:880px){.servis-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.servis-grid{grid-template-columns:1fr}}

/* HOW IT WORKS */
.hiw{background:var(--surface)}
.hiw-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
.hiw-steps li{display:flex;flex-direction:column;gap:.45rem;position:relative;padding-top:.4rem}
.hiw-n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;font-weight:600;font-size:1.05rem;margin-bottom:.7rem;box-shadow:0 8px 20px rgba(0,113,227,.3)}
.hiw-steps li:not(:last-child) .hiw-n::after{content:"";position:absolute;top:23px;left:46px;width:calc(100% - 46px);height:2px;background:linear-gradient(90deg,var(--blue),transparent)}
.hiw-steps strong{font-size:1.1rem;color:var(--ink);font-weight:600}
.hiw-steps li>span:last-child{color:var(--muted);font-size:.96rem}
@media (max-width:820px){.hiw-steps{grid-template-columns:1fr 1fr}.hiw-steps li:not(:last-child) .hiw-n::after{display:none}}
@media (max-width:460px){.hiw-steps{grid-template-columns:1fr}}

/* FAQ */
.faq-wrap{max-width:760px}
.faq-list{margin-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:1.08rem;padding:1.25rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .2s}
.faq-item summary:hover{color:var(--blue-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:20px;height:20px;background:var(--blue);transition:transform .3s var(--ease);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-item p{color:var(--muted);padding-bottom:1.3rem;max-width:64ch;font-size:1rem}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:.8rem;margin-top:clamp(2.4rem,4vw,3.4rem)}
.gallery-grid img,.gallery-grid video{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);transition:transform .6s var(--ease)}
.gallery-grid img:hover{transform:scale(1.04)}
.gallery-video{grid-row:span 2;grid-column:span 2;background:#000}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.gallery-video{grid-column:span 2}}
@media (max-width:460px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:118px}}

/* REVIEWS */
.reviews{background:var(--surface)}
.reviews-head{text-align:center;margin-bottom:clamp(2.4rem,4vw,3.2rem)}
.reviews-rating{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;font-size:1.05rem;background:#fff;padding:.6em 1.2em;border-radius:980px;box-shadow:var(--shadow-sm)}
.reviews-rating img{height:20px;width:auto}
.reviews-rating strong{color:var(--ink);font-weight:700;font-size:1.15rem}
.reviews-rating .stars{font-size:1.05rem}
.reviews-grid{columns:3;column-gap:1.2rem}
.review-card{break-inside:avoid;background:#fff;border-radius:var(--radius-lg);padding:1.6rem;margin-bottom:1.2rem;box-shadow:var(--shadow-sm)}
.review-card blockquote{font-size:1rem;color:var(--ink);line-height:1.55}
.review-card figcaption{margin-top:1rem;font-weight:600;color:var(--ink);font-size:.95rem}
.review-card figcaption::before{content:"— ";color:var(--muted)}
.reviews-cta{text-align:center;margin-top:1.4rem}
@media (max-width:900px){.reviews-grid{columns:2}}
@media (max-width:560px){.reviews-grid{columns:1}}

/* LOCATION */
.lokasi-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,60px);align-items:center}
.lokasi .lead{font-size:1.1rem;color:var(--ink);max-width:42ch;margin-top:.4rem}
.lokasi-meta{list-style:none;display:grid;gap:1.1rem;margin:1.6rem 0 1.9rem}
.lokasi-meta li{display:flex;flex-direction:column;gap:.15rem}
.lokasi-meta strong{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.lokasi-meta a{color:var(--blue-ink)}
.lokasi-meta a:hover{text-decoration:underline}
.lokasi-map iframe{width:100%;aspect-ratio:4/3.4;border:0;border-radius:var(--radius-xl);box-shadow:var(--shadow)}
@media (max-width:860px){.lokasi-grid{grid-template-columns:1fr}.lokasi-map{order:-1}.lokasi-map iframe{aspect-ratio:16/11}}

/* FINAL CTA */
.final-cta{text-align:center;background:var(--surface)}
.final-cta h2{font-size:clamp(2rem,1.2rem + 3vw,3.4rem)}
.final-cta .lead{color:var(--muted);margin:.8rem auto 2rem;max-width:42ch}
.final-cta-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;align-items:center}

/* FOOTER */
.footer{background:#f5f5f7;color:var(--muted);padding-block:clamp(44px,6vw,64px) 26px;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.footer-brand{display:flex;align-items:center;gap:.7rem}
.footer-brand img{height:46px;width:auto}
.footer-logo{font-weight:600;font-size:1.22rem;letter-spacing:-.03em;color:var(--ink);display:inline-flex;align-items:baseline}
.footer-logo span{color:var(--muted);font-weight:500}
.footer-tag{margin-top:.7rem;max-width:34ch;font-size:.92rem;line-height:1.5}
.footer-social{display:flex;gap:1.6rem;font-size:.92rem;font-weight:400}
.footer-social a{color:var(--ink);transition:color .2s}
.footer-social a:hover{color:var(--blue-ink)}
.footer-legal{margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.3rem;border-top:1px solid var(--line);font-size:.82rem;line-height:1.6;color:var(--muted)}
@media (max-width:620px){.footer-inner{flex-direction:column;gap:1.4rem}}