/*
Theme Name: PasarModern Superfast Child
Theme URI: https://pasarmodern.com/
Description: Child theme Superfast untuk PasarModern.com dengan homepage portal UMKM, CSS custom, footer, dan blok affiliate.
Author: PasarModern.com
Template: superfast
Version: 1.0.0
*/

@import url("../superfast/style.css");

/* =========================================================
   PASARMODERN.COM
   HOMEPAGE CSS
   ========================================================= */

.homepage-portal {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;
	box-sizing: border-box;
}

.homepage-portal *,
.homepage-portal *::before,
.homepage-portal *::after {
	box-sizing: border-box;
}

.homepage-portal a { text-decoration: none; }
.homepage-portal img { max-width: 100%; height: auto; }

/* HERO */
.pm-hero {
	position: relative;
	width: 100%;
	margin: 0 0 42px;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg,#f5f8fb 0%,#eef4f8 100%);
	border: 1px solid #e5e9ed;
}
.pm-hero-inner {
	min-height: 330px;
	display: flex;
	align-items: center;
	padding: 58px 60px;
}
.pm-hero-content { max-width: 760px; }
.pm-hero-label,.pm-section-label,.pm-post-label {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #4d6678;
}
.pm-hero h1 {
	margin: 0 0 18px;
	font-size: clamp(32px,4vw,50px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -1px;
	color: #17212b;
}
.pm-hero p {
	max-width: 700px;
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.75;
	color: #596673;
}
.pm-hero-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.pm-btn,.pm-btn-outline {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	padding:11px 22px;
	border-radius:8px;
	font-size:15px;
	font-weight:700;
	transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.pm-btn { background:#1f5f8b; color:#fff!important; border:1px solid #1f5f8b; }
.pm-btn:hover { background:#174b6f; border-color:#174b6f; transform:translateY(-1px); }
.pm-btn-outline { background:transparent; color:#1f5f8b!important; border:1px solid #9bb2c2; }
.pm-btn-outline:hover { background:#fff; border-color:#1f5f8b; transform:translateY(-1px); }

/* SECTIONS */
.pm-home-section { margin:0 0 58px; }
.pm-section-heading { margin-bottom:24px; }
.pm-section-heading h2 { margin:0 0 8px; font-size:28px; line-height:1.25; font-weight:800; color:#1c2730; }
.pm-section-heading p { max-width:720px; margin:0; font-size:15px; line-height:1.7; color:#68747e; }

/* CATEGORY */
.pm-category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pm-category-box {
	display:block; padding:24px 20px; background:#fff; border:1px solid #e4e8ec;
	border-radius:12px; color:#1d2830;
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pm-category-box:hover { transform:translateY(-3px); border-color:#c5d3dc; box-shadow:0 8px 25px rgba(25,45,60,.07); }
.pm-category-icon {
	display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
	margin-bottom:16px; border-radius:10px; background:#eef4f7; color:#1f5f8b;
	font-size:11px; font-weight:800; letter-spacing:.5px;
}
.pm-category-box h3 { margin:0 0 7px; font-size:18px; line-height:1.3; font-weight:750; }
.pm-category-box p { margin:0; font-size:14px; line-height:1.55; color:#71808b; }

/* FEATURED */
.pm-featured-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:22px; }
.pm-featured-main { overflow:hidden; background:#fff; border:1px solid #e4e8ec; border-radius:14px; }
.pm-featured-main>a { display:block; overflow:hidden; aspect-ratio:16/9; background:#edf1f3; }
.pm-featured-main img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.pm-featured-main:hover img { transform:scale(1.02); }
.pm-featured-content { padding:22px 24px 25px; }
.pm-featured-content h3 { margin:0 0 10px; font-size:25px; line-height:1.3; font-weight:800; }
.pm-featured-content h3 a,.pm-featured-small h3 a,.pm-post-card h3 a { color:#1c2730; }
.pm-featured-content h3 a:hover,.pm-featured-small h3 a:hover,.pm-post-card h3 a:hover { color:#1f5f8b; }
.pm-featured-content p { margin:0; font-size:15px; line-height:1.7; color:#68747e; }
.pm-featured-side { display:flex; flex-direction:column; gap:16px; }
.pm-featured-small {
	display:grid; grid-template-columns:125px minmax(0,1fr); gap:15px; align-items:center;
	padding:12px; background:#fff; border:1px solid #e4e8ec; border-radius:12px;
}
.pm-featured-small>a { display:block; width:125px; height:88px; overflow:hidden; border-radius:8px; background:#edf1f3; }
.pm-featured-small img { display:block; width:100%; height:100%; object-fit:cover; }
.pm-small-content h3 { margin:0; font-size:16px; line-height:1.4; font-weight:700; }

/* POSTS */
.pm-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pm-post-card {
	overflow:hidden; background:#fff; border:1px solid #e4e8ec; border-radius:12px;
	transition:transform .2s ease,box-shadow .2s ease;
}
.pm-post-card:hover { transform:translateY(-2px); box-shadow:0 7px 24px rgba(25,45,60,.07); }
.pm-post-card>a { display:block; overflow:hidden; aspect-ratio:16/10; background:#edf1f3; }
.pm-post-card>a img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.pm-post-card:hover>a img { transform:scale(1.02); }
.pm-post-content { padding:18px 19px 20px; }
.pm-post-content h3 { margin:0 0 9px; font-size:18px; line-height:1.4; font-weight:750; }
.pm-post-content p { margin:0; font-size:14px; line-height:1.65; color:#6d7982; }

/* ADS */
.pm-ad-space { width:100%; min-height:90px; margin:5px 0 58px; padding:12px 0; text-align:center; }
.pm-ad-label { font-size:10px; line-height:1; color:#a3abb1; text-transform:uppercase; letter-spacing:.8px; }

/* BUSINESS */
.pm-business-section { padding:34px; background:#f7f9fa; border:1px solid #e5e9ec; border-radius:14px; }
.pm-business-links { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pm-business-link {
	display:flex; flex-direction:column; justify-content:space-between; min-height:105px;
	padding:18px; background:#fff; border:1px solid #e2e7ea; border-radius:10px; color:#1c2730;
	transition:border-color .2s ease,transform .2s ease;
}
.pm-business-link:hover { border-color:#aebfc9; transform:translateY(-2px); }
.pm-business-link strong { font-size:16px; line-height:1.4; }
.pm-business-link span { margin-top:14px; font-size:13px; font-weight:700; color:#1f5f8b; }

/* CTA */
.pm-business-cta { margin:0 0 58px; padding:55px 30px; text-align:center; border-radius:16px; background:#edf4f7; border:1px solid #dce7ec; }
.pm-business-cta-inner { max-width:720px; margin:0 auto; }
.pm-business-cta h2 { margin:0 0 12px; font-size:30px; line-height:1.3; font-weight:800; color:#1b2730; }
.pm-business-cta p { max-width:620px; margin:0 auto 25px; font-size:15px; line-height:1.7; color:#65737d; }

/* ABOUT */
.pm-about-home { max-width:850px; margin:0 auto 55px; padding-top:10px; text-align:center; }
.pm-about-home h2 { margin:0 0 15px; font-size:25px; line-height:1.35; font-weight:800; color:#1c2730; }
.pm-about-home p { margin:0 0 12px; font-size:15px; line-height:1.8; color:#68747e; }

/* ACCESSIBILITY */
.homepage-portal a:focus-visible { outline:3px solid rgba(31,95,139,.25); outline-offset:3px; border-radius:6px; }

/* FOOTER */
.pm-footer { margin-top:50px; background:#f7f8f8; border-top:1px solid #e5e7e7; color:#444; font-size:15px; }
.pm-footer-container { max-width:1180px; margin:0 auto; padding:45px 20px 35px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; }
.pm-footer-column h3 { margin:0 0 16px; font-size:17px; font-weight:700; color:#176b4d; }
.pm-footer-column p { margin:0 0 20px; line-height:1.7; color:#666; }
.pm-footer-column ul { margin:0; padding:0; list-style:none; }
.pm-footer-column li { margin:0 0 10px; }
.pm-footer-column a { color:#555; text-decoration:none; transition:color .2s ease; }
.pm-footer-column a:hover { color:#176b4d; }
.pm-footer-wa { display:inline-block; padding:9px 15px; border-radius:5px; background:#176b4d; color:#fff!important; font-size:14px; font-weight:600; }
.pm-footer-wa:hover { background:#12563e; color:#fff!important; }
.pm-footer-bottom { border-top:1px solid #e2e4e3; background:#fff; }
.pm-footer-bottom-inner { max-width:1180px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; color:#777; }
.pm-footer-bottom-links { display:flex; gap:18px; }
.pm-footer-bottom-links a { color:#777; text-decoration:none; }
.pm-footer-bottom-links a:hover { color:#176b4d; }

/* AFFILIATE */
.pm-affiliate-cta {
	display:flex; gap:18px; align-items:flex-start; margin:35px 0; padding:25px;
	border-radius:10px; background:#f3f7f5; border:1px solid #dfe8e3; box-sizing:border-box;
}
.pm-affiliate-icon {
	width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:#fff; font-size:23px;
}
.pm-affiliate-cta .pm-affiliate-content { flex:1; }
.pm-affiliate-cta .pm-affiliate-label { display:block; margin-bottom:6px; font-size:11px; font-weight:700; letter-spacing:.7px; color:#176b4d; }
.pm-affiliate-cta h3 { margin:0 0 8px; font-size:19px; line-height:1.45; color:#222; }
.pm-affiliate-cta p { margin:0 0 17px; font-size:15px; line-height:1.65; color:#555; }
.pm-affiliate-cta .pm-affiliate-button { display:inline-block; padding:10px 18px; border-radius:6px; background:#176b4d; color:#fff!important; text-decoration:none!important; font-size:14px; font-weight:600; }
.pm-affiliate-cta small { display:block; margin-top:10px; font-size:11px; color:#888; }

/* RESPONSIVE */
@media (max-width:991px) {
	.homepage-portal { padding:0 15px; }
	.pm-hero-inner { min-height:300px; padding:45px 38px; }
	.pm-category-grid { grid-template-columns:repeat(2,1fr); }
	.pm-featured-grid { grid-template-columns:1fr; }
	.pm-featured-side { display:grid; grid-template-columns:repeat(2,1fr); }
	.pm-post-grid { grid-template-columns:repeat(2,1fr); }
	.pm-business-links { grid-template-columns:repeat(2,1fr); }
	.pm-footer-container { grid-template-columns:1.5fr 1fr 1fr; }
}
@media (max-width:767px) {
	.homepage-portal { padding:0 12px; }
	.pm-hero { margin-bottom:32px; border-radius:12px; }
	.pm-hero-inner { min-height:auto; padding:35px 24px; }
	.pm-hero h1 { font-size:31px; line-height:1.18; letter-spacing:-.5px; }
	.pm-hero p { font-size:15px; line-height:1.65; }
	.pm-hero-buttons { display:grid; grid-template-columns:1fr; }
	.pm-btn,.pm-btn-outline { width:100%; }
	.pm-home-section { margin-bottom:42px; }
	.pm-section-heading { margin-bottom:18px; }
	.pm-section-heading h2 { font-size:24px; }
	.pm-category-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
	.pm-category-box { padding:17px 15px; }
	.pm-category-icon { width:42px; height:42px; margin-bottom:11px; }
	.pm-category-box h3 { font-size:16px; }
	.pm-category-box p { font-size:13px; }
	.pm-featured-grid { display:block; }
	.pm-featured-main { margin-bottom:15px; }
	.pm-featured-content { padding:18px; }
	.pm-featured-content h3 { font-size:21px; }
	.pm-featured-side { display:flex; gap:10px; }
	.pm-featured-small { grid-template-columns:95px minmax(0,1fr); padding:9px; gap:12px; }
	.pm-featured-small>a { width:95px; height:70px; }
	.pm-small-content h3 { font-size:15px; }
	.pm-post-grid { grid-template-columns:1fr; gap:14px; }
	.pm-post-content { padding:16px; }
	.pm-post-content h3 { font-size:17px; }
	.pm-business-section { padding:22px 15px; border-radius:12px; }
	.pm-business-links { grid-template-columns:1fr; }
	.pm-business-link { min-height:88px; }
	.pm-business-cta { margin-bottom:42px; padding:38px 20px; border-radius:12px; }
	.pm-business-cta h2 { font-size:25px; }
	.pm-about-home { margin-bottom:40px; }
	.pm-about-home h2 { font-size:22px; }
	.pm-footer-container { grid-template-columns:1fr 1fr; gap:30px 25px; padding:35px 18px 25px; }
	.pm-footer-column:first-child { grid-column:1/-1; }
	.pm-footer-bottom-inner { flex-direction:column; text-align:center; padding:18px; }
	.pm-affiliate-cta { padding:20px; }
	.pm-affiliate-icon { display:none; }
	.pm-affiliate-cta h3 { font-size:18px; }
}
@media (max-width:480px) {
	.pm-category-grid { grid-template-columns:1fr; }
	.pm-hero-inner { padding:30px 20px; }
	.pm-hero h1 { font-size:28px; }
	.pm-featured-small { grid-template-columns:85px minmax(0,1fr); }
	.pm-featured-small>a { width:85px; height:65px; }
	.pm-footer-container { grid-template-columns:1fr; gap:25px; }
	.pm-footer-column:first-child { grid-column:auto; }
	.pm-footer-bottom-links { flex-wrap:wrap; justify-content:center; gap:10px 15px; }
}
@media (max-width:420px) {
	.pm-category-grid { grid-template-columns:1fr; }
	.pm-hero-inner { padding:30px 20px; }
	.pm-hero h1 { font-size:28px; }
	.pm-featured-small { grid-template-columns:85px minmax(0,1fr); }
	.pm-featured-small>a { width:85px; height:65px; }
}