di dalam hero-intro-columns (yang juga berada di dalam .hero). Sebelumnya max-width:560px pada ".hero p" membuat kolom pertama hero-intro-columns di index.php jadi lebih sempit dari kolom keduanya, sehingga jaraknya ke garis vertikal jadi tidak 28px seperti kolom lain (~100px, bukan 28px). */ .hero > .container p{ color:var(--text-mid); font-size:1.08rem; max-width:560px; margin:20px auto 0; } .hero-actions{ display:flex; gap:14px; margin-top:34px; justify-content:center; flex-wrap:wrap; } .hero-stats{ display:flex; gap:48px; margin-top:56px; justify-content:center; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; } .hero-stats div{ text-align:center; } .hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--text-hi); } .hero-stats div span{ font-size:.8rem; color:var(--text-low); } /* Panel pembuka hero — dipakai juga di halaman Tentang, Layanan, dan Karya (bukan cuma Beranda) — senada dengan cta-developer-banner (gradasi accent), tapi bentuknya dibedakan: full-width menyentuh navbar, sudut atas siku (bukan rounded penuh seperti cta-developer), dan pill "eyebrow" melayang, supaya terbaca sebagai bagian pembuka, bukan CTA penutup. */ .hero-intro-wrap{ position:relative; margin-bottom:40px; } .hero-intro-panel{ position:relative; overflow:hidden; width:100%; border-radius:0 0 var(--radius-lg) var(--radius-lg); /* Terang: atas putih — tengah oranye — bawah hijau. Gelap: atas hitam — tengah hijau — bawah oranye. Warna atas sengaja disamakan dengan var(--surface) (latar navbar), supaya saat halaman pertama dibuka, panel terlihat menyatu dengan header/navbar di kedua mode. --accent-text & --accent-text-alt otomatis bertukar hijau/oranye mengikuti tema. */ background:linear-gradient(180deg, var(--surface) 0%, var(--accent-text-alt) 50%, var(--accent-text) 100%); border-bottom:1px solid rgba(255,255,255,.3); box-shadow:var(--shadow-card); } .hero-intro-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:56px 40px 48px; text-align:center; } /* Lebar hero-intro-columns disamakan dengan lebar cta-developer-banner di beranda (dibatasi .container, bukan 760px), lalu diterapkan juga di tentang.php, karya.php & layanan.php supaya hero-intro-columns di semua halaman ini selebar hero-intro-columns di index.php. Padding kiri-kanan hero-intro-inner (40px desktop / 24px mobile) sudah sama dengan padding .container, jadi cukup lepas batas max-width 760px. */ .hero .hero-intro-inner, .about-hero .hero-intro-inner, #layanan-intro .hero-intro-inner, #karya .hero-intro-inner{ max-width:none; } .hero-intro-inner .eyebrow{ display:inline-block; color:var(--accent-text); background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:6px 16px; } /* Ukuran teks di dalam panel diseragamkan di semua halaman (Beranda, Tentang, Layanan, Karya) supaya selaras — tidak ada yang lebih besar atau lebih kecil dari yang lain. Ukuran heading = setengah dari ukuran sebelumnya (clamp(2rem,3.8vw,2.75rem), dipakai judul di karya.php). */ .hero-intro-inner .hero-tagline, .hero-intro-inner .about-hero-tagline{ color:#fff; font-size:1.05rem; margin-top:0; } /* Semua
di dalam hero-intro-columns (hero-tagline, about-hero-tagline, about-hero-domain, dst) di-reset margin atas & bawahnya. Sebelumnya hanya margin-top yang di-reset, margin-bottom bawaan browser pada
(1em) masih tersisa sehingga tinggi kolom jadi tidak simetris dan teksnya tidak align middle terhadap garis vertikal pemisah — beda dengan kolom berisi h1/h2 yang margin-nya sudah 0 penuh. */ .hero-intro-columns .hero-intro-col p{ margin:0; } .hero-intro-inner h1{ color:#fff; font-size:clamp(1rem,1.9vw,1.375rem); } /* h2 (dipakai judul di Layanan & Karya) disamakan dengan ukuran teks tagline "Jasa Pembuatan Website Profesional & SEO Bergaransi" di beranda (1.05rem). Jarak atas disamakan dengan jarak eyebrow→konten di beranda (lihat margin-top .hero-intro-columns di bawah: 20px), bukan 0, supaya tidak menempel dengan eyebrow di atasnya. */ .hero-intro-inner h2{ color:#fff; font-size:1.05rem; margin-top:20px; } /* 2 kolom untuk tagline & judul hero beranda, dipisah garis vertikal di tengah */ .hero-intro-columns{ display:flex; align-items:center; margin-top:20px; text-align:left; } .hero-intro-columns .hero-intro-col{ flex:1; min-width:0; position:relative; } /* Garis pemisah vertikal dibuat dengan tinggi tetap (::after), bukan border-right yang tingginya ikut menyesuaikan tinggi konten (baris 1 vs 2 baris teks). Dengan tinggi tetap 32px & diposisikan di tengah (top:50%), panjang garis jadi selalu sama di index.php, tentang.php, karya.php, maupun layanan.php, berapa pun panjang tekstnya. */ .hero-intro-columns .hero-intro-col:first-child{ padding-right:28px; text-align:right; } .hero-intro-columns .hero-intro-col:first-child::after, .hero-intro-columns .hero-intro-col:not(:first-child):not(:last-child)::after{ content:""; position:absolute; top:50%; right:0; transform:translateY(-50%); width:1px; height:32px; background:rgba(255,255,255,.35); } /* Teks "Jasa Pembuatan Website Profesional & SEO Bergaransi" di kolom pertama hero beranda dibuat rata kanan secara eksplisit. */ .hero .hero-intro-col:first-child .hero-tagline{ text-align:right; } .hero-intro-columns .hero-intro-col:last-child{ padding-left:28px; } .hero-intro-columns .hero-tagline, .hero-intro-columns h2{ margin-top:0; } /* Kolom tengah (dipakai saat ada 3 kolom, mis. layanan.php): rata tengah dengan garis pemisah di kanan (::after di atas), tidak memengaruhi tata letak 2 kolom karena :not(:first-child):not(:last-child) tidak match pada 2 elemen. */ /* flex:0 1 auto (bukan flex:1 warisan dari .hero-intro-col) supaya lebar kolom tengah menyesuaikan panjang tekstnya sendiri (+padding), bukan dipaksa sama rata dengan kolom kiri/kanan. Sebelumnya, saat flex:1, kolom tengah selalu selebar 1/3 total lebar, sehingga teks pendek yang di-text-align:center jadi mengambang jauh dari kedua garis vertikal (bisa >100px). Kolom kiri/kanan aman memakai flex:1 karena teksnya rata kanan/kiri sehingga tetap menempel ke garisnya berapa pun lebar kolomnya — sisa lebar yang tidak dipakai kolom tengah otomatis diserap kolom kiri & kanan (flex-grow:1). */ .hero-intro-columns .hero-intro-col:not(:first-child):not(:last-child){ flex:0 1 auto; padding-left:28px; padding-right:28px; text-align:center; } @media (max-width:640px){ .hero-intro-columns{ flex-direction:column; align-items:stretch; text-align:center; } .hero-intro-columns .hero-intro-col:first-child{ padding-right:0; padding-bottom:18px; margin-bottom:18px; text-align:center; border-bottom:1px solid rgba(255,255,255,.35); } /* ".hero .hero-intro-col:first-child .hero-tagline{text-align:right}" di atas berlaku di semua lebar layar dan menyasar langsung ke teksnya, jadi spesifisitasnya lebih tinggi dari text-align:center pada wrapper kolom di mobile (baris di atas) — teks tetap rata kanan di mobile kalau tidak di-override eksplisit di sini. */ .hero .hero-intro-col:first-child .hero-tagline{ text-align:center; } .hero-intro-columns .hero-intro-col:last-child{ padding-left:0; } .hero-intro-columns .hero-intro-col:not(:first-child):not(:last-child){ padding-left:0; padding-right:0; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.35); } /* Garis vertikal (::after) tidak dipakai di layout mobile yang sudah ditumpuk vertikal; digantikan border-bottom horizontal di atas. Selector di bawah harus sama persis (termasuk :first-child & :not(:first-child):not(:last-child)) dengan rule ::after di desktop supaya specificity-nya sama — jika hanya ".hero-intro-col::after" (tanpa pseudo-class tambahan), specificity-nya LEBIH RENDAH dari rule desktop sehingga kalah dan garis vertikal tetap muncul di mobile meski sudah content:none. */ .hero-intro-columns .hero-intro-col:first-child::after, .hero-intro-columns .hero-intro-col:not(:first-child):not(:last-child)::after, .hero-intro-columns .hero-intro-col::after{ content:none; } } .hero-intro-inner h1 .accent{ color:#fff; } .hero-intro-inner .about-hero-domain{ color:rgba(255,255,255,.85); } .hero-intro-inner .about-hero-tagline strong{ color:#fff; } @media (max-width:640px){ .hero-intro-inner{ padding:40px 24px 36px; } .hero-intro-wrap{ margin-bottom:24px; } } /* Section-section yang kini diawali panel pembuka: hilangkan padding atas section supaya panel menyentuh navbar langsung. */ .hero, .about-hero, #layanan-intro, #karya{ padding-top:0; } /* Roket kecil yang melintas pelan tepat di garis border bawah panel hero. Ditaruh di .hero-intro-wrap (bukan di dalam .hero-intro-panel yang overflow:hidden) supaya badan roket tidak ikut terpotong. bottom:0 + translate(-50%,50%) membuat titik tengah roket persis segaris dengan border bawah panel. Rentang kemunculan (40px/24px) disamakan dengan padding .container yang juga dipakai cta-developer-banner, supaya roket muncul & hilang selebar banner tersebut, bukan selebar layar. */ .hero-rocket{ position:absolute; bottom:0; width:56px; height:auto; z-index:2; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); animation:hero-rocket-fly 26s linear infinite; } .hero-rocket svg{ display:block; transform:scaleX(-1); } /* moncong menghadap kanan (arah gerak) */ .hero-rocket-window{ fill:var(--accent-text); } @keyframes hero-rocket-fly{ 0% { left:40px; transform:translate(-50%, 50%); } 100% { left:calc(100% - 40px); transform:translate(-50%, 50%); } } /* Jejak asap di belakang roket (kini di sisi kiri/ekor, karena moncong menghadap kanan) */ .hero-rocket-smoke{ position:absolute; right:100%; top:50%; transform:translateY(-50%); display:flex; flex-direction:row-reverse; align-items:center; gap:5px; } .hero-rocket-smoke span{ display:block; border-radius:50%; background:rgba(255,255,255,.7); filter:blur(1.5px); animation:hero-smoke-puff 2.6s ease-in-out infinite; } .hero-rocket-smoke span:nth-child(1){ width:9px; height:9px; opacity:.55; animation-delay:0s; } .hero-rocket-smoke span:nth-child(2){ width:13px; height:13px; opacity:.38; animation-delay:.3s; } .hero-rocket-smoke span:nth-child(3){ width:17px; height:17px; opacity:.22; animation-delay:.6s; } .hero-rocket-smoke span:nth-child(4){ width:21px; height:21px; opacity:.10; animation-delay:.9s; } @keyframes hero-smoke-puff{ 0%,100%{ transform:translateY(0) scale(1); } 50% { transform:translateY(-4px) scale(1.12); } } @media (max-width:640px){ .hero-rocket{ width:38px; } @keyframes hero-rocket-fly{ 0% { left:24px; transform:translate(-50%, 50%); } 100% { left:calc(100% - 24px); transform:translate(-50%, 50%); } } .hero-rocket-smoke{ gap:3px; } .hero-rocket-smoke span:nth-child(1){ width:6px; height:6px; } .hero-rocket-smoke span:nth-child(2){ width:9px; height:9px; } .hero-rocket-smoke span:nth-child(3){ width:12px; height:12px; } .hero-rocket-smoke span:nth-child(4){ width:15px; height:15px; } } /* About Jananify (ringkas, beranda) */ #about-ringkas{ padding-top:0; } .home-about-info{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; } .home-about-info p{ color:var(--text-mid); } @media (max-width:900px){ .home-about-info{ grid-template-columns:1fr; gap:20px; } } /* Trust strip (berjalan pelan ke kiri) */ .trust-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; } .trust-strip .track{ display:flex; gap:56px; width:max-content; animation:marquee-left 34s linear infinite; } .trust-strip span{ font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--text-low); white-space:nowrap; } @keyframes marquee-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* CTA Buat Website (beranda) */ .cta-banner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; } .cta-banner-visual{ position:relative; aspect-ratio:4/3; width:100%; display:flex; align-items:center; justify-content:center; overflow:visible; } .cta-banner-visual-img{ width:100%; height:100%; object-fit:contain; } .cta-banner-badge{ position:absolute; bottom:-16px; right:16px; display:flex; flex-direction:column; align-items:center; background:var(--accent-2); color:#fff; border-radius:var(--radius-md); padding:10px 18px; box-shadow:var(--shadow-card); } .cta-banner-badge strong{ font-family:var(--font-display); font-size:1.15rem; line-height:1.1; } .cta-banner-badge small{ font-size:.68rem; opacity:.9; } .cta-banner-copy h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); } .cta-banner-lead{ font-weight:700; color:var(--text-hi); margin-top:14px; font-size:1.05rem; } .cta-banner-copy > p:not(.cta-banner-lead){ color:var(--text-mid); margin-top:12px; } .cta-banner-copy .btn svg{ width:17px; height:17px; } @media (max-width:900px){ .cta-banner{ grid-template-columns:1fr; } .cta-banner-visual{ max-width:340px; margin:0 auto; } .cta-banner-copy{ text-align:center; } .cta-banner-copy .btn{ margin-left:auto; margin-right:auto; } } /* Layanan */ .services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .service-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; box-shadow:var(--shadow-card); transition:border-color .2s var(--ease); } .service-card:hover{ border-color:var(--line-strong); } .service-icon{ width:38px; height:38px; margin-bottom:18px; color:var(--accent-text); } .service-card:nth-child(even) .service-icon{ color:var(--accent-text-alt); } .service-card h3{ font-size:1.02rem; margin-bottom:8px; } .service-card p{ color:var(--text-mid); font-size:.9rem; } @media (max-width:980px){ .services-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } } /* Karya */ .work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .work-card{ display:block; border-radius:var(--radius-md); border:1px solid var(--line); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); color:inherit; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; } .work-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover, var(--shadow-card)); } .work-thumb{ height:150px; background:var(--elevated); background-size:cover; background-position:center; position:relative; overflow:hidden; } .thumb-elearning{ background-color:#2F5D50; } .thumb-profile{ background-color:#B5651D; } .thumb-presensi{ background-color:#22636B; } .thumb-quiz{ background-color:#5B4C9E; } .thumb-blog{ background-color:#8A3A5B; } .work-meta{ padding:20px 22px 24px; } .work-meta .tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--accent-text); text-transform:uppercase; } .work-meta .tag-icon{ width:15px; height:15px; flex-shrink:0; } .work-meta h3{ margin-top:8px; font-size:1.02rem; } .work-meta p{ margin-top:6px; color:var(--text-mid); font-size:.88rem; } @media (max-width:980px){ .work-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .work-grid{ grid-template-columns:1fr; } } /* Paket */ .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; } .price-card{ border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); padding:34px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); } .price-card.featured{ border-color:var(--accent-text); position:relative; } .price-name{ font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-low); } .price-amount{ font-family:var(--font-display); font-size:2.1rem; margin:12px 0 4px; } .price-amount small{ font-size:.85rem; color:var(--text-low); font-family:var(--font-body); font-weight:400; } .price-desc{ color:var(--text-mid); font-size:.88rem; margin-bottom:22px; } .price-features{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:11px; flex:1; } .price-features li{ font-size:.88rem; color:var(--text-mid); } @media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; } } /* Layanan intro (modern, centered) */ .intro-modern{ max-width:760px; margin:0 auto; text-align:center; } .intro-modern .eyebrow{ display:inline-block; margin-bottom:16px; } .intro-modern h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); margin:0 0 18px; } .intro-modern p{ color:var(--text-mid); font-size:1.05rem; line-height:1.7; margin:0 auto 30px; max-width:600px; } .intro-modern-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } #paket-website .section-head{ text-align:center; margin-left:auto; margin-right:auto; } /* Konsistensi jarak antar seksi khusus halaman Layanan */ #layanan-intro, #paket-website, #fitur-unggulan{ margin:0; padding:50px 0; } /* Di beranda, #paket-website ikut irama padding seksi lain (.section) supaya jarak atas/bawah antar seksi konsisten; halaman layanan tetap 50px/25px. */ body.page-beranda #paket-website{ padding:40px 0; } /* #layanan-intro diawali panel pembuka (hero-intro-panel) yang harus menyentuh navbar, jadi padding atasnya di-0-kan lagi di sini supaya menang atas aturan padding:50px 0 di atas. */ #layanan-intro{ padding-top:0; } @media (max-width:640px){ #layanan-intro, #paket-website, #fitur-unggulan{ padding:25px 0; } body.page-beranda #paket-website{ padding:24px 0; } #layanan-intro{ padding-top:0; } } .featured-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent-text); color:#fff; font-family:var(--font-display); font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:100px; white-space:nowrap; } .price-badge{ display:inline-flex; align-items:center; gap:10px; font-size:.85rem; font-weight:600; color:var(--text-mid); } .price-badge-icon{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; color:#8891A0; } .price-badge-icon svg{ width:24px; height:24px; stroke-width:1.8; } .price-badge-icon.gold{ color:#C9932F; } .price-badge-icon.diamond{ color:#22B8CF; } .price-badge-icon.platinum{ color:#A6ABB8; } .price-amount-v2{ font-family:var(--font-display); font-size:2.3rem; font-weight:700; color:var(--accent-text); margin:0; } .price-period{ color:var(--text-low); font-size:.8rem; margin:-10px 0 0; } .price-divider{ border:none; border-top:1px solid var(--line); margin:0; width:100%; } .fitur-paket-box{ background:var(--elevated); border-radius:var(--radius-md); text-align:left; overflow:hidden; width:100%; } .fitur-paket-head{ background:var(--accent-text); color:#fff; text-align:center; font-weight:700; padding:13px; font-size:.92rem; } .fitur-paket-list{ list-style:none; padding:18px 20px 6px; margin:0; display:flex; flex-direction:column; gap:12px; } .fitur-paket-list li{ display:flex; align-items:flex-start; gap:9px; font-size:.85rem; color:var(--text-mid); } .fitur-paket-list svg{ width:19px; height:19px; flex-shrink:0; color:var(--accent-text); margin-top:1px; stroke-width:2.4; } .btn-lihat-detail{ display:block; width:calc(100% - 40px); margin:16px auto 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px; font-weight:700; font-size:.88rem; color:var(--accent-text); text-align:center; cursor:pointer; } .btn-lihat-detail:hover{ border-color:var(--accent-text); } /* Testimoni */ .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .testi-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; background:var(--surface); box-shadow:var(--shadow-card); } .testi-quote{ font-size:.98rem; color:var(--text-hi); line-height:1.55; } .testi-who{ display:flex; align-items:center; gap:12px; margin-top:20px; } .testi-avatar{ width:36px; height:36px; border-radius:50%; background:var(--accent-text); flex-shrink:0; } .testi-card:nth-child(even) .testi-avatar{ background:var(--accent-text-alt); } .testi-who strong{ font-size:.86rem; display:block; } .testi-who span{ font-size:.78rem; color:var(--text-low); } @media (max-width:980px){ .testi-grid{ grid-template-columns:1fr; } } /* Tentang */ .about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; padding-top:0; padding-bottom:0; } .about-visual{ aspect-ratio:1/1; width:100%; display:flex; align-items:center; justify-content:center; } .about-visual-logo{ width:100%; height:100%; object-fit:contain; } /* Class .about-visual/.about-visual-logo dipakai bersama di dua halaman untuk 2 gambar berbeda: logo Jananify (tentang.php, persegi — cocok dengan aspect-ratio:1/1 di atas) dan ilustrasi jabat tangan di beranda (index.php, melebar/landscape — TIDAK persegi). Karena dipaksa aspect-ratio:1/1, ilustrasi landscape itu jadi menyisakan ruang kosong besar di atas & bawah (letterboxing) akibat object-fit:contain, baik di desktop maupun mobile. Di sini, khusus untuk section beranda (#about-ringkas), aspect-ratio dilepas supaya tinggi bingkai mengikuti proporsi asli gambarnya — tentang.php tidak terpengaruh & tetap kotak. */ #about-ringkas .about-visual{ aspect-ratio:auto; } #about-ringkas .about-visual-logo{ height:auto; } .about-copy-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .about-copy-head h2{ margin:0; } .about-copy p{ color:var(--text-mid); margin-top:16px; } .about-copy .accent{ font-weight:600; font-size:1.1rem; display:block; margin-bottom:8px; } .about-points{ margin-top:32px; display:flex; flex-direction:column; gap:12px; } .about-points div{ display:flex; align-items:baseline; gap:14px; padding-top:12px; border-top:1px solid var(--line); } .about-points div:first-child{ padding-top:0; border-top:none; } .about-points strong{ font-family:var(--font-display); font-size:.8rem; color:var(--accent-text); } .about-points div:nth-child(even) strong{ color:var(--accent-text-alt); } .about-points span{ font-weight:600; color:var(--text-hi); font-size:.95rem; } @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } .about-visual{ max-width:280px; margin:0 auto; } } /* Tentang — Hero */ .about-hero{ position:relative; overflow:hidden; text-align:center; } .about-hero .container{ max-width:720px; position:relative; z-index:1; } .about-hero-domain{ margin-top:8px; color:var(--text-mid); font-weight:600; font-size:.95rem; } .about-hero-tagline{ margin-top:16px; font-size:1.05rem; color:var(--text-mid); } .about-hero-tagline strong{ color:var(--accent-text); } .about-hero .btn svg{ width:17px; height:17px; } /* Tentang — Panel kutipan */ .quote-panel{ display:flex; align-items:center; gap:28px; border-radius:var(--radius-lg); padding:48px 44px; background:linear-gradient(120deg, var(--accent-text) 0%, var(--accent-text-hover) 55%, var(--surface) 130%); box-shadow:var(--shadow-card); } /* text-align:justify diset langsung di
, bukan di container .quote-panel, supaya tetap berlaku di mobile — container-nya sendiri pakai text-align:left di media query mobile (untuk elemen lain di dalamnya), tapi rule di
ini lebih spesifik jadi menang. */ .quote-panel p{ font-size:1.08rem; line-height:1.8; color:#fff; text-align:justify; } @media (min-width:641px){ .quote-panel{ align-items:center; } } @media (max-width:640px){ .quote-panel{ flex-direction:column; align-items:flex-start; text-align:left; } } /* Tentang — Kenapa Memilih Kami */ .why-us-pill{ display:inline-flex; align-items:center; padding:9px 20px; border-radius:999px; border:1px solid transparent; background:linear-gradient(120deg, var(--accent-dim), var(--accent-2-dim)); font-size:.82rem; font-weight:700; color:var(--accent-text); letter-spacing:.01em; } .why-us-head{ margin-top:8px; } .why-us-head h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); } .why-us-head p{ color:var(--text-mid); margin-top:16px; font-size:1rem; } .why-us-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; text-align:left; } .why-us-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow-card); } .why-us-card .icon-wrap{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--accent-text); transition:transform .25s var(--ease); } .why-us-card .icon-wrap svg{ width:36px; height:36px; stroke-width:1.8; } .why-us-card:hover .icon-wrap{ transform:translateY(-3px) scale(1.05); } .why-us-card h3{ font-size:1.02rem; } .why-us-card p{ color:var(--text-mid); font-size:.9rem; margin-top:16px; } @media (max-width:900px){ .why-us-grid{ grid-template-columns:1fr; } } /* Tentang — Legalitas */ .legality-grid{ display:grid; grid-template-columns:1fr .85fr; gap:44px; align-items:center; } .legality-copy h2{ font-size:clamp(1.6rem,3.2vw,2.1rem); } .legality-copy p{ color:var(--text-mid); margin-top:16px; } .legality-placeholder{ border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; gap:10px; color:var(--text-low); font-size:.85rem; background:var(--elevated); } .legality-placeholder svg{ width:30px; height:30px; color:var(--text-low); } @media (max-width:900px){ .legality-grid{ grid-template-columns:1fr; } } /* Form Pemesanan */ .order-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:48px; box-shadow:var(--shadow-card); } .order-info h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:14px; } .order-info p{ color:var(--text-mid); margin-top:14px; } .order-info-list{ list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:14px; } .order-info-list li{ display:flex; gap:12px; font-size:.9rem; color:var(--text-mid); } .order-info-list svg{ width:22px; height:22px; flex-shrink:0; color:var(--accent-text); stroke-width:2; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-grid .full{ grid-column:1 / -1; } .field label{ display:block; font-size:.82rem; color:var(--text-mid); margin-bottom:6px; } .field input, .field select, .field textarea{ width:100%; padding:12px 14px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); color:var(--text-hi); font-family:inherit; font-size:.9rem; transition:border-color .2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent-text); } .field textarea{ resize:vertical; min-height:100px; } .form-note{ font-size:.78rem; color:var(--text-low); margin-top:12px; } #form-status{ margin-top:14px; font-size:.88rem; padding:11px 14px; border-radius:var(--radius-sm); display:none; } #form-status.ok{ display:block; background:rgba(60,180,120,.1); color:#2f9e63; border:1px solid #2f9e63; } #form-status.err{ display:block; background:rgba(220,80,80,.1); color:#c94040; border:1px solid #c94040; } @media (max-width:980px){ .order-wrap{ grid-template-columns:1fr; padding:30px 22px; gap:32px; } .form-grid{ grid-template-columns:1fr; } } /* Footer */ footer{ border-top:1px solid var(--line); padding:56px 0 26px; } footer.footer-plain{ padding:32px 0; } .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; margin-bottom:44px; } .footer-brand{ flex:0 1 280px; } .footer-col{ flex:0 0 auto; } .footer-brand p{ color:var(--text-mid); font-size:.88rem; margin-top:16px; max-width:280px; } .footer-col h4{ font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-low); margin-bottom:16px; } .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .footer-col a{ font-size:.88rem; color:var(--text-mid); transition:color .2s; } .footer-col a:hover{ color:var(--accent-text); } .footer-contact-list li{ display:flex; align-items:center; gap:10px; } .footer-contact-list svg{ width:16px; height:16px; flex-shrink:0; color:var(--accent-text); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; border-top:1px solid var(--line); font-size:.8rem; color:var(--text-low); flex-wrap:wrap; gap:10px; } @media (max-width:900px){ .footer-top{ justify-content:flex-start; gap:32px 64px; } .footer-brand{ flex-basis:100%; } } @media (max-width:560px){ .footer-top{ flex-direction:column; gap:32px; } .footer-brand, .footer-col{ flex-basis:auto; } /* .footer-bottom (versi beranda/index.php, tanpa "-plain") ditambahkan di sini supaya ikut center di mobile seperti .footer-bottom-plain (versi halaman lain) yang sudah center sebelumnya. */ .footer-bottom, .footer-bottom-plain{ flex-direction:column; justify-content:center; align-items:center; text-align:center; } } .footer-bottom-plain{ border-top:none; padding-top:0; } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ============ PAKET WEBSITE (Silver/Gold/Diamond/Platinum) ============ */ #paket-website .pricing-grid{ grid-template-columns:repeat(4,1fr); } #paket-website .price-card{ text-align:center; align-items:center; gap:14px; } #paket-website .price-desc{ min-height:72px; } @media (max-width:1100px){ #paket-website .pricing-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ #paket-website .pricing-grid{ grid-template-columns:1fr; } } .paket-overlay{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(10,10,14,.55); backdrop-filter:blur(3px); padding:24px; align-items:center; justify-content:center; } .paket-overlay.is-open{ display:flex; } .paket-popup{ display:none; width:100%; max-width:480px; max-height:82vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 20px 60px rgba(0,0,0,.35); padding:36px 30px 30px; position:relative; animation:paket-pop .22s var(--ease); } .paket-popup.is-active{ display:block; } @keyframes paket-pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } } .paket-popup-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border:none; background:transparent; color:var(--text-mid); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s; } .paket-popup-close svg{ width:20px; height:20px; } .paket-popup-close:hover{ color:var(--accent-text); } .paket-popup h3{ font-family:var(--font-display); font-size:1.4rem; margin-bottom:10px; color:var(--text-hi); } .paket-popup-desc{ color:var(--text-mid); font-size:.92rem; margin-bottom:20px; } .paket-popup-features{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px; } .paket-popup-features li{ margin:0; font-size:.9rem; line-height:1.4; color:var(--text-mid); padding-left:22px; position:relative; } .paket-popup-features li::before{ content:"✔"; position:absolute; left:0; top:0; line-height:1.4; color:var(--accent-text); font-size:.82rem; } /* ============ FITUR UNGGULAN ============ */ .fitur-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .fitur-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 24px 28px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; transition:border-color .2s var(--ease); } .fitur-card:hover{ border-color:var(--line-strong); } .fitur-card h3{ font-size:1.02rem; margin-bottom:8px; } .fitur-card p{ color:var(--text-mid); font-size:.9rem; flex:1; margin-bottom:20px; } .fitur-icon{ width:44px; height:44px; color:var(--accent-text); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .25s var(--ease); } .fitur-icon svg{ width:34px; height:34px; stroke-width:1.8; } .fitur-card:hover .fitur-icon{ transform:translateY(-3px) scale(1.05); } @media (max-width:980px){ .fitur-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .fitur-grid{ grid-template-columns:1fr; } } /* ============ HOSTING BANNER (beranda) ============ */ .hosting-banner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; border-radius:var(--radius-lg); padding:40px 48px; background:linear-gradient(120deg, var(--accent-hover) 0%, var(--accent) 55%, #7FD9BE 130%); box-shadow:var(--shadow-card); color:#fff; } .hosting-banner-copy{ max-width:420px; } .hosting-banner-copy h3{ font-size:clamp(1.2rem,2.4vw,1.5rem); line-height:1.35; } .hosting-banner-visual{ flex-shrink:0; } .hosting-banner-visual-img{ width:160px; max-width:30vw; height:auto; object-fit:contain; } .hosting-banner-stats{ display:flex; gap:28px; align-items:center; } .hosting-banner-stats div{ text-align:left; padding-left:28px; border-left:1px solid rgba(255,255,255,.35); } .hosting-banner-stats div:first-child{ border-left:none; padding-left:0; } .hosting-banner-stats strong{ display:block; font-family:var(--font-display); font-size:2.1rem; font-weight:700; line-height:1.1; } .hosting-banner-stats span{ font-size:.82rem; opacity:.9; } @media (max-width:768px){ .hosting-banner{ flex-direction:column; text-align:center; padding:32px 28px; } .hosting-banner-copy{ max-width:100%; } .hosting-banner-stats div{ text-align:center; } } /* ============ OTHER SERVICES (beranda) ============ */ .other-services-grid{ display:grid; grid-template-columns:.6fr 1.4fr; gap:44px; align-items:stretch; } .other-services-intro h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); } .other-services-intro{ display:flex; flex-direction:column; } .other-services-visual{ margin-top:auto; margin-bottom:auto; aspect-ratio:1/1; max-width:280px; display:flex; align-items:center; justify-content:center; } .other-services-visual-img{ width:100%; height:100%; object-fit:contain; } .service-link-list{ display:flex; flex-direction:column; gap:18px; } .service-link-card{ display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--accent-text); color:#fff; border-radius:var(--radius-lg); padding:26px 30px; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), background .2s var(--ease); } .service-link-card:hover{ transform:translateY(-2px); background:var(--accent-text-hover); } .service-link-card h3{ color:#fff; font-size:1.08rem; margin-bottom:8px; } .service-link-card p{ color:rgba(255,255,255,.85); font-size:.88rem; max-width:640px; } .service-link-arrow{ flex-shrink:0; width:52px; height:52px; border-radius:50%; background:#fff; color:var(--accent-text); display:flex; align-items:center; justify-content:center; } .service-link-arrow svg{ width:22px; height:22px; } @media (max-width:900px){ .other-services-grid{ grid-template-columns:1fr; } .other-services-visual{ margin-left:auto; margin-right:auto; } .other-services-intro{ text-align:center; } } @media (max-width:600px){ .service-link-card{ flex-direction:column; align-items:flex-start; text-align:left; gap:16px; } } /* ============ CTA DEVELOPER (beranda) ============ */ .cta-developer-banner{ display:flex; align-items:center; gap:40px; border-radius:var(--radius-lg); padding:64px 56px; background:linear-gradient(180deg, var(--accent) 0%, var(--accent-2-light) 65%, var(--accent-2) 100%); box-shadow:var(--shadow-card); overflow:hidden; } .cta-developer-dots{ flex:0 0 260px; width:260px; display:flex; align-items:center; justify-content:center; } .cta-developer-dots-img{ width:100%; max-width:260px; height:auto; object-fit:contain; } .cta-developer-copy{ flex:1; color:#fff; } .cta-developer-domain{ display:block; font-family:var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.02em; } .cta-developer-copy h2{ margin-top:16px; font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.35; color:#fff; } .btn-outline-light{ margin-top:30px; display:inline-flex; align-items:center; gap:10px; border:1.5px solid rgba(255,255,255,.85); color:#fff; background:transparent; border-radius:999px; padding:12px 24px; font-weight:600; font-size:.92rem; transition:background .2s var(--ease); } .btn-outline-light:hover{ background:rgba(255,255,255,.15); } .btn-outline-light svg{ width:18px; height:18px; } @media (max-width:768px){ .cta-developer-banner{ flex-direction:column; padding:44px 32px; text-align:center; } .cta-developer-dots{ display:none; } .cta-developer-copy{ text-align:center; } }