/*
Theme Name: Abon Tuna Lande
Theme URI: https://example.com
Author: Studio
Description: Tema WordPress one-page untuk promosi produk Abon Ikan Tuna Lande — gurih, renyah, khas Baubau.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: atl
*/

/* ==========================================================
   DESIGN TOKENS
   ========================================================== */
:root{
	--ocean-deep:   #0E4F63;
	--ocean-mid:    #146685;
	--ocean-bright: #2F8FB0;
	--gold:         #F2A93B;
	--gold-deep:    #D98C1F;
	--ember:        #C1522A;
	--ember-deep:   #9E3F1E;
	--sand:         #FBF3E3;
	--sand-dim:     #F3E6CB;
	--cocoa:        #2B1B12;
	--cocoa-soft:   #5B4536;
	--cream-line:   rgba(251,243,227,0.18);

	--font-display: 'Baloo 2', system-ui, sans-serif;
	--font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
	--font-mono:    'Space Mono', monospace;

	--radius-lg: 28px;
	--radius-md: 16px;
	--radius-sm: 10px;
	--shadow-soft: 0 20px 45px -20px rgba(14,42,55,0.45);
	--container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--cocoa);
	background:var(--sand);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.12; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{
	font-family:var(--font-mono);
	font-size:12.5px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	font-weight:700;
}
.section{ padding:96px 0; }
@media(max-width:780px){ .section{ padding:64px 0; } }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:16px 30px;
	border-radius:999px;
	font-weight:800;
	font-size:16px;
	border:2px solid transparent;
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
	white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{
	background:var(--gold);
	color:var(--cocoa);
	box-shadow:0 14px 30px -12px rgba(242,169,59,0.65);
}
.btn-gold:hover{ background:var(--gold-deep); }
.btn-outline{
	background:transparent;
	border-color:var(--cream-line);
	color:var(--sand);
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-dark{
	background:var(--ocean-deep);
	color:var(--sand);
}
.btn-dark:hover{ background:var(--ocean-mid); }
.btn-sm{ padding:11px 20px; font-size:14px; }

/* ==========================================================
   HEADER / NAV
   ========================================================== */
.site-header{
	position:sticky; top:0; z-index:50;
	background:rgba(14,79,99,0.92);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--cream-line);
}
.site-header .wrap{
	display:flex; align-items:center; justify-content:space-between;
	height:76px;
}
.brand{
	display:flex; align-items:center; gap:10px;
	font-family:var(--font-display); font-weight:800; font-size:22px;
	color:var(--sand);
}
.brand .brand-logo{
	width:40px; height:40px; object-fit:contain;
	flex-shrink:0;
}
.nav-menu{ display:flex; align-items:center; gap:34px; }
.nav-menu a{
	color:var(--sand); font-weight:600; font-size:15px; opacity:.88;
	transition:opacity .15s;
}
.nav-menu a:hover{ opacity:1; color:var(--gold); }
.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
	display:none; background:none; border:none; color:var(--sand); font-size:26px;
}
@media(max-width:900px){
	.nav-menu{
		position:absolute; top:76px; left:0; right:0;
		background:var(--ocean-deep);
		flex-direction:column; align-items:flex-start;
		padding:20px 24px 28px; gap:18px;
		border-bottom:1px solid var(--cream-line);
		display:none;
	}
	.nav-menu.is-open{ display:flex; }
	.nav-toggle{ display:block; }
	.nav-actions .btn span.btn-label-full{ display:none; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
	position:relative;
	background:
		radial-gradient(ellipse at 78% 15%, rgba(242,169,59,0.20), transparent 55%),
		linear-gradient(160deg, var(--ocean-deep) 0%, var(--ocean-mid) 58%, var(--ocean-bright) 100%);
	overflow:hidden;
	padding-top:76px;
}
.hero-grid{
	display:grid;
	grid-template-columns:1.05fr 0.95fr;
	gap:40px;
	align-items:center;
	padding:76px 0 120px;
	position:relative; z-index:2;
}
@media(max-width:900px){
	.hero-grid{ grid-template-columns:1fr; padding:48px 0 90px; text-align:center; }
	.hero-badges{ justify-content:center; }
	.hero-cta{ justify-content:center; }
}
.hero-eyebrow{ color:var(--gold); margin-bottom:18px; display:inline-flex; align-items:center; gap:8px;}
.hero-eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; }
.hero h1{
	color:var(--sand);
	font-size:clamp(40px, 5.4vw, 68px);
	font-weight:800;
	letter-spacing:-0.01em;
}
.hero h1 .accent{ color:var(--gold); }
.hero h1 .accent-ember{ color:#FFB37A; }
.hero p.lede{
	color:rgba(251,243,227,0.86);
	font-size:18px;
	max-width:480px;
	margin-top:22px;
}
.hero-cta{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-badges{
	display:flex; gap:22px; margin-top:44px; flex-wrap:wrap;
}
.hero-badge{
	display:flex; align-items:center; gap:8px;
	color:var(--sand); font-size:13.5px; font-weight:600; opacity:.9;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

.hero-art{ position:relative; }
.hero-art img{
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-soft);
	position:relative; z-index:2;
}
.hero-art .crumb-ring{
	position:absolute; inset:-30px;
	background:radial-gradient(circle, rgba(242,169,59,0.25), transparent 65%);
	z-index:1;
}
.price-chip{
	position:absolute; bottom:-22px; left:-22px; z-index:3;
	background:var(--sand);
	border-radius:var(--radius-md);
	padding:16px 20px;
	box-shadow:var(--shadow-soft);
	display:flex; flex-direction:column; gap:2px;
}
@media(max-width:900px){ .price-chip{ position:static; margin:22px auto 0; width:max-content; } }
.price-chip .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--cocoa-soft); text-transform:uppercase; }
.price-chip .value{ font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--ember-deep); }

/* Crumb-scatter wave divider — signature element */
.crumb-divider{
	position:relative;
	width:100%;
	height:120px;
	margin-top:-2px;
	display:block;
}
.crumb-divider svg{ display:block; width:100%; height:100%; }

/* ==========================================================
   TRUST STRIP
   ========================================================== */
.trust-strip{
	background:var(--sand-dim);
	border-bottom:1px solid rgba(43,27,18,0.06);
}
.trust-strip .wrap{
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:26px;
	padding:26px 24px;
}
.trust-item{
	display:flex; align-items:center; gap:12px;
	font-weight:700; font-size:14.5px; color:var(--cocoa-soft);
}
.trust-item .ic{
	width:36px; height:36px; border-radius:10px;
	background:var(--sand);
	display:flex; align-items:center; justify-content:center;
	color:var(--ember);
	flex-shrink:0;
}

/* ==========================================================
   STORY
   ========================================================== */
.story{ background:var(--sand); }
.story-grid{
	display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
}
@media(max-width:860px){ .story-grid{ grid-template-columns:1fr; gap:36px; } }
.story-art{ position:relative; }
.story-art img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.story-art .tag-float{
	position:absolute; top:20px; right:-18px;
	background:var(--ember);
	color:var(--sand);
	padding:10px 16px;
	border-radius:999px;
	font-family:var(--font-mono);
	font-size:12px; font-weight:700; letter-spacing:.04em;
	box-shadow:0 12px 24px -10px rgba(158,63,30,0.6);
}
@media(max-width:860px){ .story-art .tag-float{ right:10px; } }
.story-copy .eyebrow{ color:var(--ember); }
.story-copy h2{
	font-size:clamp(30px,3.6vw,44px);
	margin-top:14px;
	color:var(--ocean-deep);
}
.story-copy h2 .accent{ color:var(--ember); }
.story-copy p{ margin-top:20px; color:var(--cocoa-soft); font-size:16.5px; max-width:520px; }
.story-copy p + p{ margin-top:14px; }
.story-stats{ display:flex; gap:36px; margin-top:34px; flex-wrap:wrap; }
.story-stat .num{ font-family:var(--font-display); font-size:32px; font-weight:800; color:var(--ocean-deep); }
.story-stat .lbl{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--cocoa-soft); }

/* ==========================================================
   VILLAGE SHOWCASE — Pesona Desa Gerak Makmur
   ========================================================== */
.village{ background:var(--sand-dim); }
.village .section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.village .eyebrow{ color:var(--ember); justify-content:center; }
.village h2{ color:var(--ocean-deep); font-size:clamp(28px,3.4vw,42px); margin-top:14px; }
.village .section-head p{ color:var(--cocoa-soft); margin-top:14px; font-size:16px; }

.village-mosaic{
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr;
	grid-template-rows:1fr 1fr;
	grid-template-areas:
		"big   mid1 mid1"
		"big   mid2 mid3";
	gap:16px;
	height:520px;
}
.v-tile{
	position:relative;
	border-radius:var(--radius-md);
	overflow:hidden;
	box-shadow:var(--shadow-soft);
}
.v-tile img{
	width:100%; height:100%; object-fit:cover;
	transition:transform .5s ease;
}
.v-tile:hover img{ transform:scale(1.06); }
.v-tile .v-cap{
	position:absolute; left:0; right:0; bottom:0;
	background:linear-gradient(0deg, rgba(14,42,55,0.88), transparent 70%);
	color:var(--sand);
	padding:20px 18px 14px;
}
.v-tile .v-cap .v-title{ font-weight:800; font-size:15.5px; }
.v-tile .v-cap .v-sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; opacity:.8; margin-top:2px; }
.v-big{ grid-area:big; }
.v-mid1{ grid-area:mid1; }
.v-mid2{ grid-area:mid2; }
.v-mid3{ grid-area:mid3; }

@media(max-width:860px){
	.village-mosaic{
		grid-template-columns:1fr;
		grid-template-rows:none;
		grid-template-areas:
			"big"
			"mid1"
			"mid2"
			"mid3";
		height:auto;
	}
	.v-tile{ height:220px; }
}

/* ==========================================================
   FEATURES
   ========================================================== */
.features{ background:var(--ocean-deep); position:relative; }
.features .section-head{ max-width:600px; margin-bottom:52px; }
.features .eyebrow{ color:var(--gold); }
.features h2{ color:var(--sand); font-size:clamp(28px,3.4vw,42px); margin-top:14px; }
.features h2 .accent{ color:var(--gold); }
.features p{ color:rgba(251,243,227,0.78); margin-top:16px; font-size:16px; }

.feature-grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media(max-width:900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{
	background:rgba(251,243,227,0.06);
	border:1px solid rgba(251,243,227,0.12);
	border-radius:var(--radius-md);
	padding:30px 26px;
	transition:transform .18s ease, background .18s ease;
}
.feature-card:hover{ transform:translateY(-4px); background:rgba(251,243,227,0.1); }
.feature-card .ic{
	width:48px; height:48px; border-radius:12px;
	background:linear-gradient(145deg,var(--gold),var(--ember));
	display:flex; align-items:center; justify-content:center;
	margin-bottom:18px; color:var(--cocoa); font-weight:800;
}
.feature-card h3{ color:var(--sand); font-size:19px; margin-bottom:8px; }
.feature-card p{ color:rgba(251,243,227,0.72); font-size:14.5px; }

/* ==========================================================
   GALLERY
   ========================================================== */
.gallery{ background:var(--sand); }
.gallery .section-head{ text-align:center; max-width:600px; margin:0 auto 48px; }
.gallery .eyebrow{ color:var(--ember); justify-content:center; }
.gallery h2{ color:var(--ocean-deep); font-size:clamp(28px,3.4vw,42px); margin-top:14px; }
.gallery-strip{
	display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:760px){ .gallery-strip{ grid-template-columns:1fr; } }
.gallery-card{
	border-radius:var(--radius-md);
	overflow:hidden;
	position:relative;
	box-shadow:var(--shadow-soft);
	aspect-ratio:3/4;
}
.gallery-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-card:hover img{ transform:scale(1.06); }
.gallery-card .cap{
	position:absolute; left:0; right:0; bottom:0;
	background:linear-gradient(0deg, rgba(14,42,55,0.85), transparent);
	color:var(--sand);
	padding:20px 16px 14px;
	font-weight:700; font-size:14.5px;
}

/* ==========================================================
   HOW TO ORDER
   ========================================================== */
.order-steps{ background:var(--sand-dim); }
.order-steps .section-head{ max-width:600px; margin-bottom:52px; }
.order-steps .eyebrow{ color:var(--ember); }
.order-steps h2{ color:var(--ocean-deep); font-size:clamp(28px,3.4vw,42px); margin-top:14px; }
.steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
@media(max-width:820px){ .steps-row{ grid-template-columns:1fr; } }
.step-card{
	background:var(--sand);
	border-radius:var(--radius-md);
	padding:32px 26px;
	position:relative;
	border:1px solid rgba(43,27,18,0.07);
}
.step-card .step-num{
	font-family:var(--font-display); font-size:44px; font-weight:800;
	color:var(--gold-deep); opacity:.55; line-height:1;
}
.step-card h3{ margin-top:10px; color:var(--ocean-deep); font-size:19px; }
.step-card p{ margin-top:8px; color:var(--cocoa-soft); font-size:14.5px; }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonials{ background:var(--sand); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:860px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
	background:var(--sand-dim);
	border-radius:var(--radius-md);
	padding:28px 26px;
	border-left:4px solid var(--ember);
}
.testi-card .stars{ color:var(--gold-deep); font-size:15px; letter-spacing:2px; }
.testi-card p.quote{ margin-top:14px; color:var(--cocoa); font-size:15.5px; font-style:italic; }
.testi-card .who{ margin-top:16px; display:flex; align-items:center; gap:10px; }
.testi-card .who .avatar{
	width:36px; height:36px; border-radius:50%;
	background:linear-gradient(145deg,var(--ocean-bright),var(--ocean-deep));
	display:flex; align-items:center; justify-content:center;
	color:var(--sand); font-weight:800; font-size:14px;
}
.testi-card .who .name{ font-weight:700; font-size:14px; }
.testi-card .who .loc{ font-size:12.5px; color:var(--cocoa-soft); }

/* ==========================================================
   FAQ
   ========================================================== */
.faq{ background:var(--sand-dim); }
.faq .wrap{ max-width:820px; }
.faq .section-head{ margin-bottom:40px; }
.faq .eyebrow{ color:var(--ember); }
.faq h2{ color:var(--ocean-deep); font-size:clamp(26px,3.2vw,38px); margin-top:14px; }
.faq-item{
	background:var(--sand);
	border-radius:var(--radius-sm);
	margin-bottom:12px;
	border:1px solid rgba(43,27,18,0.07);
	overflow:hidden;
}
.faq-q{
	width:100%; text-align:left; background:none; border:none;
	padding:20px 22px; display:flex; justify-content:space-between; align-items:center;
	font-weight:700; font-size:15.5px; color:var(--ocean-deep);
}
.faq-q .plus{ font-size:20px; color:var(--ember); transition:transform .2s ease; flex-shrink:0; margin-left:16px; }
.faq-item.is-open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{
	max-height:0; overflow:hidden; transition:max-height .25s ease;
	padding:0 22px;
}
.faq-item.is-open .faq-a{ padding-bottom:20px; }
.faq-a p{ color:var(--cocoa-soft); font-size:14.5px; }

/* ==========================================================
   CTA BANNER
   ========================================================== */
.cta-banner{
	background:linear-gradient(120deg, var(--ember-deep), var(--ember) 55%, var(--gold-deep));
	text-align:center;
}
.cta-banner h2{
	color:var(--sand); font-size:clamp(28px,4vw,44px);
}
.cta-banner p{ color:rgba(251,243,227,0.88); margin-top:14px; font-size:16.5px; }
.cta-banner .hero-cta{ justify-content:center; margin-top:30px; }
.cta-banner .btn-outline{ border-color:rgba(251,243,227,0.5); }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{ background:var(--cocoa); color:var(--sand); }
.footer-grid{
	display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
	padding:64px 0 40px;
}
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-grid h4{ font-size:15px; margin-bottom:16px; color:var(--gold); font-family:var(--font-body); font-weight:700; letter-spacing:.03em; }
.footer-grid .brand{ color:var(--sand); margin-bottom:14px; }
.footer-grid p{ color:rgba(251,243,227,0.65); font-size:14px; max-width:320px; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ color:rgba(251,243,227,0.75); font-size:14.5px; }
.footer-links a:hover{ color:var(--gold); }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
	width:38px; height:38px; border-radius:50%;
	background:rgba(251,243,227,0.08);
	display:flex; align-items:center; justify-content:center;
	font-size:14px;
}
.footer-social a:hover{ background:var(--gold); color:var(--cocoa); }
.footer-bottom{
	border-top:1px solid rgba(251,243,227,0.12);
	padding:22px 0;
	font-size:13px;
	color:rgba(251,243,227,0.55);
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ==========================================================
   FLOATING WHATSAPP BUTTON
   ========================================================== */
.wa-float{
	position:fixed; right:22px; bottom:22px; z-index:60;
	background:#25D366;
	color:#fff;
	width:60px; height:60px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 14px 30px -10px rgba(37,211,102,0.7);
	font-size:28px;
	transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.08); }

/* ==========================================================
   UTILITIES
   ========================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }