/* ============================================================
   SISMe 2026 — Landing Page · Apple-style (v3)
   ============================================================ */
:root{
    --text:#1d1d1f;
    --text2:#6e6e73;
    --text3:#86868b;
    --bg:#ffffff;
    --bg2:#f5f5f7;
    --blue:#0071e3;
    --blue-link:#0066cc;
    --line:#d2d2d7;
    --radius:22px;
    --nav-h:48px;
    --font:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;font-family:var(--font);color:var(--text);
    background:var(--bg);line-height:1.5;letter-spacing:-.01em;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:1000px;margin:0 auto;padding:0 22px;}
.chev{font-weight:400;display:inline-block;transition:transform .2s;}

/* ---------- NAV (frosted) ---------- */
.site-header{
    position:sticky;top:0;z-index:9000;height:var(--nav-h);
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,.09);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);max-width:1000px;margin:0 auto;padding:0 22px;gap:18px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand-logo{width:34px;height:34px;background:var(--text);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;}
.brand-logo img{width:100%;height:100%;object-fit:contain;}
.brand-text .name{color:var(--text);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.1;}
.brand-text .slogan{color:var(--text3);font-size:9.5px;letter-spacing:1.6px;font-weight:500;margin-top:1px;}
.nav{display:flex;gap:32px;align-items:center;}
.nav a{color:var(--text);font-size:13px;font-weight:400;opacity:.85;transition:opacity .2s;}
.nav a:hover{opacity:1;}
.nav a.active{opacity:1;font-weight:500;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--text);margin:5px 0;border-radius:2px;transition:.25s;}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;text-align:center;
    background:linear-gradient(180deg,#fbfbfd 0%,#ffffff 70%);
    padding:88px 22px 76px;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.14;}
.hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;}
.hero-welcome{color:var(--text2);font-size:19px;font-weight:600;letter-spacing:0;margin-bottom:8px;}
.hero-title{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.05;}
.hero-title .l1{display:block;font-size:clamp(46px,8vw,88px);color:var(--text);}
.hero-title .l2{display:block;font-size:clamp(34px,6vw,72px);
    background:linear-gradient(96deg,#0a84ff,#2aa6ff 45%,#7b5bff);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0a84ff;}
.hero-tagline{margin:18px 0 0;font-size:clamp(22px,3vw,30px);font-weight:600;color:var(--text);letter-spacing:-.02em;}
.hero-subtitle{color:var(--text2);font-size:clamp(18px,2.2vw,22px);font-weight:400;max-width:620px;margin:16px auto 30px;letter-spacing:-.01em;}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;}

/* Apple buttons */
.btn-apple{background:var(--blue);color:#fff;font-size:17px;font-weight:400;padding:12px 28px;border-radius:980px;transition:background .2s,transform .15s;}
.btn-apple:hover{background:#0077ed;}
.btn-apple:active{transform:scale(.98);}
.link-apple{color:var(--blue-link);font-size:17px;font-weight:400;display:inline-flex;align-items:center;gap:4px;}
.link-apple:hover{text-decoration:underline;}
.link-apple:hover .chev{transform:translateX(3px);}

/* ---------- FEATURES STRIP ---------- */
.features-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.features{display:flex;justify-content:center;align-items:center;gap:14px 56px;flex-wrap:wrap;padding:26px 22px;}
.feature{display:flex;align-items:center;gap:13px;}
.feature .ic{width:40px;height:40px;flex:none;color:var(--text);background:var(--bg2);border-radius:50%;padding:9px;}
.feature .ic svg{width:100%;height:100%;stroke-width:1.8;}
.feature .txt b{display:block;color:var(--text);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.01em;}
.feature .txt span{color:var(--text2);font-size:13.5px;}

/* ---------- SECTION ---------- */
.section{padding:90px 0 96px;background:var(--bg2);}
.section-eyebrow{text-align:center;color:var(--text2);font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px;}
.section-head{text-align:center;}
.section-title{font-size:clamp(38px,5.2vw,56px);font-weight:700;letter-spacing:-.03em;margin:0;color:var(--text);line-height:1.05;}
.section-subtitle{text-align:center;color:var(--text2);font-size:clamp(18px,2.2vw,21px);font-weight:400;margin:16px auto 54px;max-width:600px;letter-spacing:-.01em;}

/* ---------- KAD (Apple tiles) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card{
    background:#fff;border-radius:var(--radius);overflow:hidden;
    display:flex;flex-direction:column;text-align:center;
    box-shadow:0 4px 24px rgba(0,0,0,.06);
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 44px rgba(0,0,0,.12);}
.card-top{padding:34px 26px 22px;display:flex;flex-direction:column;flex:1;}
.card-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:var(--text);}
.card-subtitle{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;}
.card-desc{color:var(--text2);font-size:15px;font-weight:400;margin:0 0 16px;flex:1;line-height:1.45;}
.card-link{font-size:16px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;gap:4px;}
.card-link:hover{text-decoration:underline;}
.card-link:hover .chev{transform:translateX(3px);}
.card-media{position:relative;height:230px;overflow:hidden;display:block;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.card:hover .card-media img{transform:scale(1.05);}
.card-media .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.95);}
.card-media .placeholder svg{width:78px;height:78px;stroke-width:1.6;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25));}

/* Tema warna — teks aksen + media gradien */
.theme-green  .card-subtitle,.theme-green  .card-link{color:#1a7a3c;}
.theme-green  .card-media{background:linear-gradient(155deg,#9fe6b4,#34b364 55%,#127a3c);}
.theme-purple .card-subtitle,.theme-purple .card-link{color:#5b3fc4;}
.theme-purple .card-media{background:linear-gradient(155deg,#b7a6f5,#7358e0 55%,#3f2ba0);}
.theme-red    .card-subtitle,.theme-red    .card-link{color:#c62f2f;}
.theme-red    .card-media{background:linear-gradient(155deg,#f7a5a5,#e85555 55%,#b81f24);}
.theme-blue   .card-subtitle,.theme-blue   .card-link{color:#0071e3;}
.theme-blue   .card-media{background:linear-gradient(155deg,#8ecbf7,#2e97e0 55%,#0f5aa8);}
.theme-amber  .card-subtitle,.theme-amber  .card-link{color:#b07a10;}
.theme-amber  .card-media{background:linear-gradient(155deg,#f8d98d,#e6ad33 55%,#a06e0a);}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg2);color:var(--text2);padding:34px 0;border-top:1px solid var(--line);}
.footer-inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-brand .brand-text .name{font-size:15px;color:var(--text);}
.footer-divider{width:1px;height:40px;background:var(--line);}
.footer-slogan{font-size:14px;color:var(--text2);flex:1;min-width:220px;letter-spacing:-.01em;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text);transition:background .2s,color .2s;}
.footer-social a:hover{background:var(--text);color:#fff;}
.footer-social svg{width:18px;height:18px;stroke-width:1.8;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
    .cards{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
    .features{gap:16px 32px;}
}
@media(max-width:720px){
    .brand-text .slogan{display:none;}
    .nav{position:absolute;top:var(--nav-h);left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);flex-direction:column;gap:0;padding:6px 0;max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:1px solid var(--line);}
    .nav.open{max-height:300px;}
    .nav a{padding:14px 24px;width:100%;font-size:16px;}
    .nav-toggle{display:block;}
    .footer-divider{display:none;}
    .hero{padding:60px 22px 54px;}
}