/*!
Theme Name: Verta Studio
Theme URI: http://underscores.me/
Author: Verta Studio
Author URI: https://vertastudio.id
Description: Verta Studio\'s Theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: verta-studio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Verta Studio is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* -------------------------------------------------
   1. DESIGN TOKENS
   Ganti nilai di sini kalau nanti mau menyesuaikan warna/font secara global.
------------------------------------------------- */
:root {
	--color-primary: #ff6200;
	--color-primary-soft: #ffe8d6;
	--color-ink: #1f1f1d;
	--color-text-secondary: #5c5c58;
	--color-bg: #fafaf8;
	--color-bg-alt: #ffffff;
	--color-border: #e7e5e1;
	--color-wa: #25d366;
	--color-wa-text: #ffffff;

	--font-heading: 'Poppins', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-pill: 999px;

	--max-width: 1120px;
	--section-padding-y: 64px;
	--section-padding-y-mobile: 40px;
}

/* -------------------------------------------------
   2. RESET DASAR
------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------
   3. TIPOGRAFI
------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.5em;
	color: var(--color-ink);
}

h1 { font-size: clamp(28px, 5vw, 42px); }
h2 { font-size: clamp(22px, 3.5vw, 30px); }
h3 { font-size: 18px; }

p {
	margin: 0 0 1em;
	color: var(--color-text-secondary);
}

.eyebrow {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	text-align: center;
	margin-bottom: 20px;
}

/* -------------------------------------------------
   4. LAYOUT UTILITAS
------------------------------------------------- */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.section {
	padding: var(--section-padding-y-mobile) 0;
	border-top: 1px solid var(--color-border);
}

.section:first-of-type {
	border-top: none;
}

.section--alt {
	background: var(--color-bg-alt);
}

.text-center {
	text-align: center;
}

@media (min-width: 768px) {
	.section {
		padding: var(--section-padding-y) 0;
	}
}

/* -------------------------------------------------
   5. TOMBOL / CTA
------------------------------------------------- */
.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
	opacity: 0.9;
}

.btn-primary {
	background: var(--color-primary);
	color: #ffffff;
}

.btn-outline {
	background: transparent;
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.btn-wa {
	background: var(--color-wa);
	color: var(--color-wa-text);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------
   6. HEADER / NAVIGASI
------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	max-width: var(--max-width);
	margin: 0 auto;
}

.site-logo {
	font-family: 'Georgia', serif;
	font-size: 16px;
	letter-spacing: 2px;
}

.site-logo span {
	color: var(--color-primary);
	font-weight: 700;
}

.main-navigation ul {
	display: none;
	gap: 24px;
}

.main-navigation a {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
	color: var(--color-ink);
}

.menu-toggle {
	display: block;
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
}

@media (min-width: 768px) {
	.main-navigation ul {
		display: flex;
	}
	.menu-toggle {
		display: none;
	}
}

/* -------------------------------------------------
   7. HERO
------------------------------------------------- */
.hero {
	text-align: center;
	padding: 56px 0 40px;
}

.hero p {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------
   8. GRID FITUR / KENAPA BUTUH WEBSITE
------------------------------------------------- */
.reason-grid,
.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.reason-grid,
	.service-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.reason-item {
	text-align: center;
}

.reason-item .icon {
	font-size: 24px;
	color: var(--color-primary);
	margin-bottom: 8px;
}

/* -------------------------------------------------
   9. CARD LAYANAN / PAKET
------------------------------------------------- */
.pricing-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
	background: var(--color-bg-alt);
}

.pricing-card--highlight {
	border: 2px solid var(--color-primary);
	position: relative;
}

.pricing-card__badge {
	display: inline-block;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	margin-bottom: 8px;
}

.pricing-card__price {
	font-size: 20px;
	font-weight: 600;
	margin: 8px 0 4px;
}

.pricing-card__features {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
	display: none;
}

.pricing-card__features.is-open {
	display: block;
}

.pricing-card__features li {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin-bottom: 6px;
}

.pricing-card__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

@media (min-width: 768px) {
	.pricing-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		align-items: start;
	}
	/* Di desktop, semua detail paket langsung terbuka (tanpa accordion) */
	.pricing-card__features {
		display: block !important;
	}
	.pricing-card__toggle .pricing-card__chevron {
		display: none;
	}
}

/* -------------------------------------------------
   10. TOMBOL WA MENGAMBANG (STICKY)
------------------------------------------------- */
.wa-float {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-wa);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	z-index: 60;
}

/* -------------------------------------------------
   11. FOOTER
------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--color-border);
	padding: 20px;
	font-size: 12px;
	color: var(--color-text-secondary);
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

@media (min-width: 768px) {
	.site-footer {
		flex-direction: row;
		justify-content: space-between;
		max-width: var(--max-width);
		margin: 0 auto;
	}
}

/* -------------------------------------------------
   12. HALAMAN KONTAK
------------------------------------------------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.contact-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-card--wa {
	background: var(--color-wa);
	color: #fff;
	border: none;
}

.contact-card--wa p {
	color: rgba(255, 255, 255, 0.85);
}