/* ========================================================= PsikoM — Global Styles (Updated) File: /assets/css/style.css ========================================================= */ /* Font akan dipreload di HTML (bukan di sini) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); :root{ /* Brand */ --primary: #2563EB; /* biru */ --secondary:#06B6D4; /* cyan */ --accent: #2563EB; /* selaraskan CTA ke biru brand */ --text: #111827; --muted:#6B7280; --bg: #FFFFFF; --soft: #F9FAFB; --soft2:#F3F4F6; --line: #E5E7EB; --radius: 18px; --shadow: 0 8px 24px rgba(0,0,0,.08); --shadow-lg: 0 16px 40px rgba(0,0,0,.14); --ring: 0 0 0 4px rgba(37,99,235,.25); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:400; color:var(--text); background:var(--bg); line-height:1.6; } img{max-width:100%;display:block} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1120px;margin-inline:auto;padding:20px} /* Focus ring */ :focus-visible{outline:2px solid transparent; box-shadow: var(--ring)} /* Anchor offset untuk sticky header */ [id]{scroll-margin-top:92px} /* ========================================================= Header / Navigation ========================================================= */ .site-header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px); border-bottom:1px solid var(--line); } .nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; } /* Brand */ .brand{display:inline-flex; align-items:center; gap:0; font-weight:600; font-size:22px; text-decoration:none} .brand-psiko{color:var(--primary)} .brand-m{color:var(--secondary)} /* Desktop nav */ .nav-desktop{display:flex; align-items:center; gap:20px} .menu{display:flex; gap:16px; list-style:none; margin:0; padding:0} .menu > li{position:relative} .menu > li > a, .dropdown-toggle{ display:inline-flex; align-items:center; padding:8px 10px; border-radius:10px; color:var(--text); text-decoration:none; border:1px solid transparent; background:none; font: inherit; cursor:pointer; } .menu > li > a:hover, .dropdown-toggle:hover{background:var(--soft)} /* Dropdown: hover + state .open untuk elak 'hilang sebelum klik' */ .dropdown{ position:absolute; left:0; top:calc(100% + 6px); min-width:220px; padding:8px; margin:0; list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); display:none; } .has-dropdown:hover .dropdown, .has-dropdown.open .dropdown{display:block} .dropdown a{ display:block; padding:12px 14px; /* lebih besar (stabil klik) */ border-radius:10px; color:var(--text); } .dropdown a:hover{background:var(--soft)} .nav-cta{display:flex; gap:10px} /* ========================================================= Buttons — SERAGAM TEMA BIRU ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid transparent; text-decoration:none; font-weight:600; transition:.2s box-shadow,.2s transform,.2s background-color,.2s border-color,.2s filter; } .btn:active{transform:translateY(1px)} .btn-primary{ background:var(--accent); color:#fff; /* biru brand */ box-shadow: 0 8px 22px rgba(37,99,235,.25); } .btn-primary:hover{filter:brightness(.97)} .btn-outline{ background:#fff; border-color:var(--line); color:var(--primary); box-shadow:0 6px 18px rgba(0,0,0,.10); } .btn-outline:hover{background:var(--soft)} .is-elevated{box-shadow: var(--shadow-lg)} /* ========================================================= Override: jadikan "Cuba Demo Percuma" di Kenapa & Pain sama seperti Primary (tanpa ubah HTML) ========================================================= */ .why-cta .btn.btn-outline, .pain .btn-row .btn.btn-outline{ background: var(--accent) !important; color:#fff !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(37,99,235,.25) !important; } .why-cta .btn.btn-outline:hover, .pain .btn-row .btn.btn-outline:hover{ filter: brightness(.97); } /* Hamburger (mobile) */ .hamburger{ display:none; background:none; border:0; padding:10px; cursor:pointer; border-radius:10px; } .hamburger-box{display:inline-block; width:26px; height:18px; position:relative} .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{ position:absolute; left:0; width:100%; height:2px; background:var(--text); content:""; transition:.2s transform,.2s opacity; } .hamburger-inner{top:8px} .hamburger-inner::before{top:-8px} .hamburger-inner::after{top:8px} /* Mobile drawer */ .nav-mobile{ display:none; background:#fff; border-top:1px solid var(--line); } .nav-mobile.is-open{display:block} .mobile-menu{list-style:none; margin:0; padding:14px 20px; display:flex; flex-direction:column; gap:10px} .mobile-menu a{display:block; padding:10px 12px; border-radius:10px; color:var(--text)} .mobile-menu a:hover{background:var(--soft)} .mobile-group-title{display:block; font-weight:600; margin-top:8px; color:var(--muted)} .mobile-menu ul{list-style:none; margin:6px 0 0 0; padding-left:10px; display:flex; flex-direction:column; gap:6px} .mobile-cta{padding:12px 20px; display:flex; gap:10px} /* ========================================================= Hero ========================================================= */ .hero{padding:56px 0 24px; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)} .hero-grid{display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:center} .hero-title{font-size:42px; line-height:1.2; margin:0 0 12px; font-weight:600} .u-underline{ text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; } .hero-subtitle{font-size:18px; color:var(--muted); margin:0 0 10px} .hero-subtitle strong{font-weight:600} .hero-desc{font-size:16px; color:#293041; max-width:60ch; margin:0 0 20px} .hero-rotate{ display:inline-block; min-width:5.6ch; /* kekal inline, tak jatuh baris */ font-weight:600; background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px} .hero .btn-outline.is-elevated{ box-shadow: 0 20px 50px rgba(0,0,0,.18); } /* lebih pop di Hero */ .hero-links{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px} .hero-links .dot{opacity:.4} .hero-media{text-align:center} .hero-img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; object-position:center} .img-note{display:block; margin-top:8px; color:var(--muted); font-size:12px} /* ========================================================= Kenapa (Value Proposition) ========================================================= */ .section-head{text-align:center; margin-bottom:24px} .section-head h2{font-size:32px; margin:0 0 8px; font-weight:600} .section-sub{color:var(--muted); margin:0} .brand-psiko{color:var(--primary)} .brand-m{color:var(--secondary)} #why-title .brand-psiko, #why-title .brand-m{white-space:nowrap} .why{padding:42px 0} .why-grid{display:grid; gap:16px; grid-template-columns:repeat(4,1fr)} .card{ background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:.2s transform,.2s box-shadow; } .card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.10)} .card .ico{font-size:24px; line-height:1; margin-bottom:8px} .card h3{margin:0 0 6px; font-size:18px; font-weight:600} .card p{margin:0; color:#374151} .why-cta{display:flex; justify-content:center; margin-top:26px} .why-cta .btn{min-width:240px} /* ========================================================= Produk ========================================================= */ .product{padding:42px 0; background:#fff} .product-grid{display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:start} .bullets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px} .bullets li{background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:12px 14px} .bullets strong{color:#0f172a} .product-domains .domains-title{font-size:18px; font-weight:600; margin:0 0 10px} .domain-badges{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr))} .domain-badges li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:999px; background:linear-gradient(180deg,#fff 0%,#fdfdfd 100%); } .badge-ico{font-size:18px} .badge-text{color:#1f2937} .product-center-note{text-align:center; margin-top:12px} .product-center-note{max-width:820px; margin-inline:auto} /* mudah baca desktop */ .product-note{margin:4px 0; color:var(--muted)} .product-closing{margin:8px 0 0 0} /* ========================================================= Pain Point ========================================================= */ .pain{padding:42px 0; background:linear-gradient(180deg,#fff 0%, #f8fafc 100%)} .pain-list{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px} .pain-list li{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px} .pain-solution{text-align:center; margin:6px 0 12px; font-weight:600} .pain .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} /* ========================================================= Harga / Tawaran ========================================================= */ .pricing{padding:42px 0; background:#fff} .features{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px} .feature-item{background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:12px 14px} .feature-line-1{font-weight:600} .feature-line-2{color:var(--muted); opacity:.95} .price-box{ margin-inline:auto; max-width:640px; text-align:center; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; } .price-amount{font-weight:600; font-size:44px; line-height:1; color:#111827; letter-spacing:.2px} .price-currency{font-size:20px; vertical-align:super; margin-right:2px} .price-note{font-size:18px; margin-left:4px; color:#muted} .price-sub{margin:6px 0 14px; color:var(--muted)} .demo-invite{margin:0 0 12px; padding:10px 12px; border-left:4px solid var(--primary); background:#fff; border-radius:10px} .demo-invite p{margin:0} .pricing .btn-row{display:flex; justify-content:center} .fulfilment-note{margin-top:10px; color:var(--muted); font-size:14px} /* ========================================================= FAQ ========================================================= */ .faq{padding:42px 0; background:#fff} .faq-list{display:flex; flex-direction:column; gap:10px} .faq-item{border:1px solid var(--line); border-radius:14px; background:var(--soft); overflow:hidden} .faq-toggle{ width:100%; text-align:left; padding:16px 18px; background:none; border:0; cursor:pointer; font-weight:600; color:#111827; font-size:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .faq-icon{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:#fff; border:1px solid var(--line); box-shadow: var(--shadow); font-weight:600; } .faq-toggle[aria-expanded="true"] .faq-icon{background:var(--primary); color:#fff; border-color:transparent} .faq-panel{padding:0 18px 16px 18px; background:#fff; border-top:1px solid var(--line)} .faq-panel p{margin:12px 0 0} .faq-item + .faq-item{margin-top:6px} /* ========================================================= Footer ========================================================= */ .site-footer{background:#111827; color:#E5E7EB; padding:32px 0} .footer-grid{display:grid; gap:18px; grid-template-columns:1fr 1fr; align-items:start} .footer-left .brand-psiko{color:#fff} .footer-left .brand-m{color:var(--secondary)} .footer-tagline{margin:6px 0 12px; color:#CBD5E1} .footer-links ul{list-style:none; margin:0; padding:0; display:flex; gap:14px} .footer-links a{color:#D1D5DB; font-weight:600} .footer-links a:hover{color:#fff; text-decoration:underline} .footer-right p{margin:0 0 8px} .footer-right a{color:#E5E7EB; text-decoration:underline} .footer-right a:hover{color:#fff} /* ========================================================= Responsive ========================================================= */ @media (max-width:1180px){ .container{padding:16px} } @media (max-width:1024px){ .hero-grid{grid-template-columns:1.3fr .7fr} .why-grid{grid-template-columns:repeat(2,1fr)} .product-grid{grid-template-columns:1fr} } @media (max-width:860px){ .nav-desktop{display:none} .hamburger{display:inline-block} } @media (max-width:768px){ .hero-grid{grid-template-columns:1fr; gap:20px} .hero-title{font-size:34px} } @media (max-width:520px){ .hero-title{font-size:28px} .why-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} } /* Reduced Motion */ @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }