/*
Theme Name: Bordir Elegan
Theme URI: https://example.com
Author: Dibuat untuk usaha bordir
Description: Template WordPress elegan & korporat untuk usaha bordir. Warna hijau tua, emas tua, dan maroon, dengan motif garis jahitan sebagai identitas visual. Lengkap dengan Custom Post Type Portofolio dan opsi Customizer untuk kontak & WhatsApp.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bordir-elegan
*/

/* =====================================================
   0. RESET & VARIABEL WARNA / FONT
   ===================================================== */
:root{
	--ink: #10152A;
	--ink-2: #0B0F1E;
	--canvas: #EDE7DA;
	--canvas-2: #E3DBC7;
	--gold: #C6A253;
	--gold-light: #E0C177;
	--maroon: #6B2737;
	--maroon-light: #7D3145;
	--ivory: #E7E3D8;
	--charcoal: #2B2B26;
	--line-dark: rgba(198,162,83,0.35);
	--line-light: rgba(43,43,38,0.16);
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--font-body);
	color: var(--charcoal);
	background: var(--canvas);
	font-size: 16px;
	line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
.container{
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}
h1,h2,h3,h4{
	font-family: var(--font-display);
	font-weight: 600;
	margin: 0;
	line-height: 1.15;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3{ font-size: 1.4rem; }
p{ margin: 0 0 1rem; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* motif jahitan - dipakai sebagai divider di bawah judul section */
.stitch-divider{
	width: 92px;
	height: 3px;
	margin-top: 18px;
	background-image: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px);
}
.stitch-divider.center{ margin-left:auto; margin-right:auto; }
.on-dark .stitch-divider{ background-image: repeating-linear-gradient(90deg, var(--gold-light) 0 10px, transparent 10px 18px); }

.section{ padding: 96px 0; }
.section-light{ background: var(--canvas); color: var(--charcoal); }
.section-dark{ background: var(--ink); color: var(--ivory); }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow-free-note{ display:none; } /* placeholder, no eyebrow labels used by design choice */

.btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding: 14px 28px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--maroon); color: var(--ivory); }
.btn-primary:hover{ background: var(--maroon-light); }
.btn-outline-dark{ border-color: var(--gold-light); color: var(--ivory); }
.btn-outline-dark:hover{ background: rgba(231,227,216,0.08); }
.btn-outline-light{ border-color: var(--charcoal); color: var(--charcoal); }
.btn-outline-light:hover{ background: rgba(43,43,38,0.06); }

/* =====================================================
   1. HEADER
   ===================================================== */
.site-header{
	background: var(--ink);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--line-dark);
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 18px 24px;
	max-width: 1160px;
	margin: 0 auto;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ max-height: 84px; width:auto; }

@media (max-width: 860px){
	.site-branding img{ max-height: 60px; }
}
.site-title{
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--ivory);
	font-weight: 700;
}
.nav-menu{ display:flex; gap: 32px; }
.nav-menu a{
	color: var(--ivory);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, color .2s ease;
}
.nav-menu a:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.header-wa-btn{
	background: var(--gold);
	color: var(--ink);
	padding: 10px 20px;
	border-radius: 3px;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}
.header-wa-btn:hover{ background: var(--gold-light); }
.menu-toggle{
	display:none;
	background:none;
	border: 1px solid var(--line-dark);
	color: var(--ivory);
	padding: 8px 12px;
	border-radius: 3px;
}

@media (max-width: 860px){
	.nav-menu{
		display:none;
		position:absolute;
		top: 100%;
		left:0; right:0;
		background: var(--ink);
		flex-direction:column;
		gap:0;
		border-top: 1px solid var(--line-dark);
		border-bottom: 1px solid var(--line-dark);
	}
	.nav-menu.is-open{ display:flex; }
	.nav-menu a{ display:block; padding: 16px 24px; border-bottom: 1px solid var(--line-dark); }
	.menu-toggle{ display:inline-block; }
	.header-wa-btn{ display:none; }
}

/* =====================================================
   2. HERO
   ===================================================== */
.hero{
	background: var(--ink);
	color: var(--ivory);
	padding: 88px 0 100px;
	position: relative;
}
.hero-frame{
	border: 1.5px dashed var(--line-dark);
	border-radius: 6px;
	padding: 56px 48px;
	max-width: 760px;
	margin: 0 auto;
	text-align:center;
	position: relative;
}
.hero-frame::before,
.hero-frame::after{
	content:"";
	position:absolute;
	width: 22px; height: 22px;
	border: 2px solid var(--gold-light);
}
.hero-frame::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
.hero-frame::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }
.hero p.subtitle{
	font-size: 1.1rem;
	color: rgba(231,227,216,0.82);
	max-width: 560px;
	margin: 22px auto 32px;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: 8px; }

@media (max-width: 600px){
	.hero-frame{ padding: 40px 22px; }
}

/* =====================================================
   2b. SLIDER PROSES BORDIR (gambar berjalan, gaya premium)
   ===================================================== */
.process-slider-section{ padding-bottom: 72px; }
.process-slider{
	position: relative;
	max-width: 1160px;
	margin: 0 auto;
	border: 1px solid var(--line-dark);
}
.process-slider-track{
	position: relative;
	aspect-ratio: 16/8;
	overflow: hidden;
	background: var(--ink-2);
}
.process-slide{
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease;
}
.process-slide.is-active{ opacity: 1; visibility: visible; z-index: 2; }

/* Ken Burns: foto perlahan membesar selama slide tampil */
.process-slide-media{ position:absolute; inset:0; overflow:hidden; }
.process-slide-media img{
	width:100%; height:100%; object-fit: cover;
	transform: scale(1);
	transform-origin: center center;
}
.process-slide-media img.animate{ animation: bordirKenBurns 6000ms ease-out forwards; }
@keyframes bordirKenBurns{ from{ transform: scale(1); } to{ transform: scale(1.08); } }

/* nomor slide, pojok kiri atas */
.slide-counter{
	position:absolute;
	top: 20px; left: 24px;
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--gold-light);
	letter-spacing: 0.02em;
	opacity: 0;
	z-index: 3;
}
.slide-counter.animate{ animation: bordirRevealFade .6s ease forwards; animation-delay: .15s; }
.slide-counter-total{ color: rgba(231,227,216,0.55); font-size: 0.85rem; }

/* keterangan tiap slide, muncul bertahap (judul lalu deskripsi) */
.process-slide figcaption{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 28px 36px 24px;
	background: linear-gradient(180deg, transparent, rgba(11,15,30,0.88) 70%);
	z-index: 3;
}
.process-slide figcaption h3,
.process-slide figcaption p{ opacity: 0; transform: translateY(18px); }
.process-slide figcaption h3{ color: var(--ivory); margin-bottom: 4px; font-size: 1.3rem; }
.process-slide figcaption p{ color: rgba(231,227,216,0.78); font-size: 0.92rem; margin:0; max-width: 460px; }
.process-slide figcaption.animate h3{ animation: bordirRevealUp .7s ease forwards; animation-delay: .3s; }
.process-slide figcaption.animate p{ animation: bordirRevealUp .7s ease forwards; animation-delay: .55s; }

@keyframes bordirRevealUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform: translateY(0); } }
@keyframes bordirRevealFade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
	.process-slide-media img.animate{ animation: none; transform: scale(1); }
	.process-slide figcaption.animate h3,
	.process-slide figcaption.animate p,
	.slide-counter.animate{ animation: none; opacity: 1; transform: none; }
	.slider-progress-fill.animate{ animation: none; width: 100%; }
}

/* progress bar tipis di tepi bawah slider, mengisi seiring waktu autoplay */
.slider-progress{
	position:absolute;
	left:0; right:0; bottom:0;
	height: 3px;
	background: rgba(231,227,216,0.12);
	z-index: 4;
}
.slider-progress-fill{
	height:100%;
	width:0%;
	background: var(--gold);
}
.slider-progress-fill.animate{ animation: bordirProgress var(--slide-duration, 5000ms) linear forwards; }
@keyframes bordirProgress{ from{ width:0%; } to{ width:100%; } }

.slider-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(11,15,30,0.55);
	border: 1px solid var(--line-dark);
	color: var(--ivory);
	width: 44px; height: 44px;
	border-radius: 50%;
	display:flex; align-items:center; justify-content:center;
	font-size: 1.1rem;
	z-index: 5;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.slider-arrow:hover{ background: rgba(11,15,30,0.85); border-color: var(--gold-light); transform: translateY(-50%) scale(1.08); }
.slider-arrow.prev{ left: 18px; }
.slider-arrow.next{ right: 18px; }

.slider-dots{
	display:flex;
	justify-content:center;
	gap: 10px;
	padding: 18px 0;
	background: var(--ink);
}
.slider-dot{
	width: 9px; height: 9px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--line-dark);
	padding: 0;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.slider-dot.is-active{ background: var(--gold); border-color: var(--gold); transform: scale(1.25); }

@media (max-width: 700px){
	.process-slider-track{ aspect-ratio: 4/5; }
	.slider-arrow{ width: 38px; height:38px; font-size: 1rem; }
	.process-slide figcaption{ padding: 20px 20px 18px; }
	.slide-counter{ top: 14px; left: 18px; font-size: 0.95rem; }
}

/* =====================================================
   3. LAYANAN (services grid)
   ===================================================== */
.services-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line-light);
	border: 1px solid var(--line-light);
}
.service-card{
	background: var(--canvas);
	padding: 36px 30px;
	position: relative;
}
.service-icon{ color: var(--gold); margin-bottom: 18px; }
.service-icon svg{ width: 30px; height: 30px; }
.service-card h3{ margin-bottom: 8px; }
.service-card p{ color: rgba(43,43,38,0.75); font-size: 0.95rem; margin:0; }

@media (max-width: 860px){
	.services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
	.services-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   4. PORTOFOLIO
   ===================================================== */
.portfolio-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.portfolio-card{
	background: var(--ink-2);
	border: 1px solid var(--line-dark);
	overflow:hidden;
}
.portfolio-thumb{
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, rgba(198,162,83,0.25), rgba(11,15,30,0.4));
	display:flex;
	align-items:center;
	justify-content:center;
	color: var(--gold-light);
}
.portfolio-thumb img{ width:100%; height:100%; object-fit:cover; }
.portfolio-card-body{ padding: 20px 22px 26px; }
.portfolio-card h3{ font-size: 1.15rem; color: var(--ivory); margin-bottom:6px; }
.portfolio-card p{ color: rgba(231,227,216,0.7); font-size: 0.9rem; margin:0; }
.portfolio-empty{
	border: 1.5px dashed var(--line-dark);
	padding: 48px 24px;
	text-align:center;
	color: rgba(231,227,216,0.75);
	grid-column: 1 / -1;
}
.section-footer-link{ text-align:center; margin-top: 40px; }

@media (max-width: 860px){ .portfolio-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .portfolio-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   5. PROSES PEMESANAN (numbered - genuinely sequential)
   ===================================================== */
.process-list{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.process-step{ position:relative; padding-left: 4px; }
.process-num{
	font-family: var(--font-display);
	font-size: 2.4rem;
	color: var(--gold);
	font-weight: 700;
	line-height:1;
	margin-bottom: 12px;
	display:block;
}
.process-step h3{ margin-bottom: 6px; font-size: 1.15rem; }
.process-step p{ font-size: 0.92rem; color: rgba(43,43,38,0.75); margin:0; }

@media (max-width: 860px){ .process-list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .process-list{ grid-template-columns: 1fr; } }

/* =====================================================
   6. TENTANG KAMI (split layout)
   ===================================================== */
.about-split{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items:center;
}
.about-visual{
	border: 1.5px dashed var(--line-dark);
	aspect-ratio: 1/1;
	display:flex;
	align-items:center;
	justify-content:center;
	color: var(--gold);
	background: var(--canvas-2);
}
.about-visual svg{ width: 40%; height: 40%; }
.about-text p{ font-size: 1.05rem; color: rgba(43,43,38,0.85); }

@media (max-width: 860px){
	.about-split{ grid-template-columns: 1fr; }
	.about-visual{ order:-1; max-width: 320px; margin: 0 auto; }
}

/* =====================================================
   7. TESTIMONI
   ===================================================== */
.testimonial-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.testimonial-card{
	background: var(--canvas);
	border: 1px solid var(--line-light);
	padding: 32px 28px;
}
.testimonial-quote{ font-family: var(--font-display); font-size: 1.15rem; font-style:italic; margin-bottom: 18px; }
.testimonial-name{ font-weight:600; font-size:0.92rem; }
.testimonial-role{ font-size:0.85rem; color: rgba(43,43,38,0.6); }

@media (max-width: 860px){ .testimonial-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   8. CTA STRIP
   ===================================================== */
.cta-strip{
	background: var(--maroon);
	color: var(--ivory);
	padding: 64px 0;
	text-align:center;
}
.cta-strip h2{ margin-bottom: 12px; }
.cta-strip p{ color: rgba(231,227,216,0.85); max-width: 480px; margin: 0 auto 28px; }
.cta-strip .stitch-divider{ background-image: repeating-linear-gradient(90deg, var(--gold-light) 0 10px, transparent 10px 18px); margin: 18px auto 28px; }

/* =====================================================
   9. KONTAK
   ===================================================== */
.contact-grid{
	display:grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
}
.contact-list{ margin-top: 24px; }
.contact-list li{ display:flex; gap:14px; margin-bottom:18px; align-items:flex-start; }
.contact-list svg{ width:20px; height:20px; color: var(--gold-light); flex-shrink:0; margin-top:3px; }
.contact-map{
	border: 1.5px dashed var(--line-dark);
	min-height: 260px;
	position: relative;
	overflow: hidden;
}
.contact-map iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.15) contrast(1.05);
}

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

/* =====================================================
   10. FOOTER
   ===================================================== */
.site-footer{ background: var(--ink-2); color: rgba(231,227,216,0.75); padding: 64px 0 28px; }
.footer-grid{
	display:grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--line-dark);
}
.footer-brand .site-title{ margin-bottom: 12px; }
.footer-brand .site-title img{ max-height: 96px; width:auto; }
.footer-col h4{ color: var(--ivory); font-family: var(--font-body); font-size: 0.95rem; font-weight:600; margin-bottom: 16px; }
.footer-col ul li{ margin-bottom: 10px; font-size: 0.92rem; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-social{ display:flex; gap:14px; margin-top: 18px; }
.footer-social a{
	width: 34px; height:34px;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:16px; height:16px; }
.footer-social a:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.footer-bottom{
	display:flex; justify-content:space-between; align-items:center;
	padding-top: 24px; font-size: 0.85rem; flex-wrap:wrap; gap:12px;
}

/* =====================================================
   11. WHATSAPP FLOAT BUTTON
   ===================================================== */
.wa-float{
	position: fixed;
	bottom: 24px; right: 24px;
	background: var(--maroon);
	color: var(--ivory);
	width: 56px; height:56px;
	border-radius: 50%;
	display:flex; align-items:center; justify-content:center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.3);
	z-index: 200;
	transition: background-color .2s ease, transform .2s ease;
}
.wa-float:hover{ background: var(--maroon-light); transform: translateY(-2px); }
.wa-float svg{ width: 26px; height:26px; }

/* =====================================================
   12. HALAMAN GENERIK (page.php / single.php / 404)
   ===================================================== */
.page-header-simple{
	background: var(--ink);
	color: var(--ivory);
	padding: 64px 0 48px;
	text-align:center;
}
.entry-content{ padding: 64px 0; max-width: 760px; margin: 0 auto; }
.entry-content p{ font-size: 1.05rem; }
.entry-content img{ margin: 24px 0; }
.back-link{ display:inline-block; margin-top: 24px; color: var(--gold); font-weight:600; }
.not-found{ text-align:center; padding: 120px 0; }