/* ==========================================================================
   PRATAMA TEKNIK INTI PRIMA — DESIGN SYSTEM
   Psikologi Warna:
   - Navy Deep (#0B2545)  → Kepercayaan, stabilitas, keahlian teknik (dominan)
   - Amber/Orange (#F5A623) → Energi listrik, urgensi CTA, presisi (aksen utama)
   - Cyan Electric (#00B4D8) → Teknologi, presisi, modernitas (aksen sekunder)
   - Off-white (#F7F9FC)  → White space bersih, kelegaan mata
   ========================================================================== */

:root{
	--navy-900:#081A33;
	--navy-800:#0B2545;
	--navy-700:#13345E;
	--navy-100:#E7ECF3;
	--amber-500:#F5A623;
	--amber-600:#D98C0F;
	--cyan-500:#00B4D8;
	--white:#FFFFFF;
	--offwhite:#F7F9FC;
	--ink:#1B2430;
	--gray-500:#5B6675;
	--gray-200:#E3E7EE;
	--success:#1E9E5A;
	--danger:#D64545;

	--font-heading:'Poppins', 'Segoe UI', sans-serif;
	--font-body:'Inter', 'Segoe UI', sans-serif;

	--radius-sm:6px;
	--radius-md:12px;
	--radius-lg:20px;
	--shadow-sm:0 2px 8px rgba(11,37,69,.08);
	--shadow-md:0 8px 30px rgba(11,37,69,.12);
	--container:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--ink);
	background:var(--white);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ font-family:var(--font-heading); color:var(--navy-800); line-height:1.25; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2rem,4vw,3rem); font-weight:800; }
h2{ font-size:clamp(1.5rem,3vw,2.25rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; color:var(--gray-500); }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute; left:-9999px; }
.skip-link:focus{ left:16px; top:16px; position:fixed; background:var(--amber-500); color:var(--navy-900); padding:10px 16px; z-index:9999; border-radius:var(--radius-sm); }

/* ===== Buttons / CTA — Focal Point ===== */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:14px 28px; border-radius:var(--radius-sm); font-weight:600;
	font-family:var(--font-heading); font-size:.95rem; cursor:pointer;
	border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background:var(--amber-500); color:var(--navy-900); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--amber-600); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:var(--white); color:var(--white); }
.btn-outline:hover{ background:var(--white); color:var(--navy-800); }
.btn-lg{ padding:16px 34px; font-size:1.05rem; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ===== Top bar ===== */
.pti-topbar{ background:var(--navy-900); color:var(--white); font-size:.82rem; }
.pti-topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:6px; }
.pti-topbar-contact a{ color:var(--white); margin-right:18px; opacity:.9; }
.pti-topbar-contact a:hover{ color:var(--amber-500); }
.pti-topbar-badge{ color:var(--amber-500); font-weight:600; }

/* ===== Header ===== */
.pti-header{ background:var(--white); box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:500; }
.pti-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px; }
.pti-logo-text{ font-family:var(--font-heading); font-weight:800; font-size:1.3rem; color:var(--navy-800); }
.pti-nav{ flex:1; display:flex; justify-content:center; }
.pti-menu{ display:flex; gap:28px; }
.pti-menu a{ font-weight:600; font-size:.95rem; color:var(--navy-800); padding:8px 0; position:relative; }
.pti-menu a::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--amber-500); transition:width .2s; }
.pti-menu a:hover::after{ width:100%; }
.pti-menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.pti-menu-toggle span{ width:24px; height:2px; background:var(--navy-800); display:block; }

/* ===== Hero — Focal Point CTA ===== */
.pti-hero{ background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 100%); color:var(--white); padding:80px 0; overflow:hidden; position:relative; }
.pti-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.pti-eyebrow{ display:inline-block; color:var(--amber-500); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; margin-bottom:14px; }
.pti-hero h1{ color:var(--white); margin-bottom:20px; }
.pti-hero-desc{ color:var(--navy-100); font-size:1.05rem; max-width:560px; }
.pti-hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin:28px 0; }
.pti-hero-trust{ display:flex; gap:24px; flex-wrap:wrap; font-size:.9rem; color:var(--navy-100); }
.pti-hero-graphic{
	width:100%; aspect-ratio:4/3; border-radius:var(--radius-lg);
	background:
		radial-gradient(circle at 30% 30%, rgba(245,166,35,.35), transparent 60%),
		radial-gradient(circle at 70% 70%, rgba(0,180,216,.35), transparent 60%),
		linear-gradient(135deg, var(--navy-700), var(--navy-900));
	border:1px solid rgba(255,255,255,.15);
}

/* ===== Sections — White space & Hierarchy ===== */
.pti-section{ padding:80px 0; }
.pti-section-eyebrow{ color:var(--amber-600); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; margin-bottom:8px; }
.pti-section-desc{ max-width:680px; }

/* ===== Client marquee ===== */
.pti-client-marquee-section{ padding:48px 0; background:var(--offwhite); }
.pti-client-marquee-section .container{ text-align:center; margin-bottom:20px; }
.pti-marquee-wrap{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.pti-marquee-track{ display:flex; gap:56px; width:max-content; animation:pti-marquee 32s linear infinite; }
.pti-marquee-track:hover{ animation-play-state:paused; }
.pti-marquee-item img{ height:56px; width:auto; filter:grayscale(1) opacity(.75); transition:filter .2s; }
.pti-marquee-item:hover img{ filter:grayscale(0) opacity(1); }
@keyframes pti-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== Services grid ===== */
.pti-services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; margin-top:40px; }
.pti-service-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:32px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.pti-service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--amber-500); }
.pti-service-icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:var(--radius-sm); background:var(--navy-100); color:var(--navy-800); font-size:26px !important; margin-bottom:18px; }
.pti-service-link{ color:var(--amber-600); font-weight:700; font-size:.9rem; }

/* ===== Why Us ===== */
.pti-whyus-section{ background:var(--offwhite); }
.pti-whyus-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px; margin-top:40px; }
.pti-whyus-item{ text-align:left; }
.pti-whyus-icon{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--amber-500); color:var(--navy-900); font-size:24px !important; margin-bottom:16px; }

/* ===== Process ===== */
.pti-process-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin-top:40px; }
.pti-process-step{ text-align:center; padding:24px; }
.pti-step-number{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--navy-800); color:var(--white); font-family:var(--font-heading); font-weight:800; margin-bottom:16px; }

/* ===== FAQ Accordion ===== */
.pti-faq-accordion{ max-width:820px; margin-top:32px; }
.pti-faq-item{ border-bottom:1px solid var(--gray-200); }
.pti-faq-question{ width:100%; text-align:left; background:none; border:0; padding:20px 0; font-family:var(--font-heading); font-weight:700; font-size:1rem; color:var(--navy-800); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.pti-faq-icon{ color:var(--amber-500); font-size:1.3rem; transition:transform .2s; }
.pti-faq-question[aria-expanded="true"] .pti-faq-icon{ transform:rotate(45deg); }
.pti-faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.pti-faq-answer-inner{ padding-bottom:20px; color:var(--gray-500); }
.pti-faq-more{ margin-top:20px; }
.pti-faq-more a{ color:var(--amber-600); font-weight:700; }

/* ===== Final CTA ===== */
.pti-final-cta-section{ background:var(--navy-900); color:var(--white); }
.pti-final-cta-section h2{ color:var(--white); }
.pti-final-cta-section p{ color:var(--navy-100); }
.pti-final-cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

/* ===== Contact Form ===== */
.pti-contact-form-card{ background:var(--white); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md); }
.pti-lead-form label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:14px; color:var(--navy-800); }
.pti-lead-form input, .pti-lead-form select, .pti-lead-form textarea{
	width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
	font-family:var(--font-body); font-size:.95rem;
}
.pti-lead-form input:focus, .pti-lead-form select:focus, .pti-lead-form textarea:focus{ outline:none; border-color:var(--amber-500); }
.pti-honeypot{ position:absolute; left:-9999px; }
.pti-form-success{ background:#E9F9EF; color:var(--success); padding:14px; border-radius:var(--radius-sm); margin-bottom:16px; }
.pti-form-error{ background:#FCEAEA; color:var(--danger); padding:14px; border-radius:var(--radius-sm); margin-bottom:16px; }

/* ===== Sticky CTA (mobile) ===== */
.pti-sticky-cta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:600; background:var(--white); box-shadow:0 -4px 20px rgba(0,0,0,.12); }
.pti-sticky-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 8px; font-weight:700; font-family:var(--font-heading); font-size:.85rem; }
.pti-sticky-call{ background:var(--navy-800); color:var(--white); }
.pti-sticky-wa{ background:var(--amber-500); color:var(--navy-900); }

/* ===== Breadcrumb ===== */
.pti-breadcrumb{ padding:18px 0 0; font-size:.85rem; }
.pti-breadcrumb ol{ display:flex; gap:6px; flex-wrap:wrap; }
.pti-breadcrumb li:not(:last-child)::after{ content:'/'; margin-left:6px; color:var(--gray-500); }
.pti-breadcrumb a{ color:var(--gray-500); }
.pti-breadcrumb a:hover{ color:var(--amber-600); }

/* ===== Page generic ===== */
.pti-page-header{ padding:40px 0 0; }
.pti-page-body{ padding:24px 0 40px; max-width:820px; }
.pti-checklist li{ padding:10px 0 10px 30px; position:relative; border-bottom:1px dashed var(--gray-200); }
.pti-checklist li::before{ content:'✔'; position:absolute; left:0; color:var(--success); font-weight:700; }

/* ===== Layanan single ===== */
.pti-layanan-grid{ display:grid; grid-template-columns:2fr 1fr; gap:48px; padding:24px 0 60px; align-items:start; }
.pti-sidebar-card{ background:var(--offwhite); border-radius:var(--radius-md); padding:24px; margin-bottom:20px; }
.pti-sidebar-card ul{ margin-top:12px; }
.pti-sidebar-card li{ padding:8px 0; border-bottom:1px solid var(--gray-200); }
.pti-sidebar-card li a:hover{ color:var(--amber-600); }
.pti-benefit-box{ margin-top:32px; }

/* ===== About stats ===== */
.pti-about-stats{ display:flex; gap:48px; padding:20px 0 50px; flex-wrap:wrap; }
.pti-stat strong{ display:block; font-family:var(--font-heading); font-size:2.2rem; color:var(--navy-800); }
.pti-stat span{ color:var(--gray-500); font-size:.9rem; }
.pti-client-detail-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin-top:32px; }
.pti-client-detail-card{ text-align:center; padding:24px; border:1px solid var(--gray-200); border-radius:var(--radius-md); }
.pti-client-detail-card img{ max-height:60px; margin:0 auto 16px; }

/* ===== Contact page ===== */
.pti-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:24px 0 60px; align-items:start; }
.pti-contact-list li{ padding:8px 0; color:var(--gray-500); }
.pti-map-embed{ margin-top:24px; border-radius:var(--radius-md); overflow:hidden; }

/* ===== Blog ===== */
.pti-blog-list{ padding:40px 0 60px; }
.pti-blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; margin-top:32px; }
.pti-blog-card{ border:1px solid var(--gray-200); border-radius:var(--radius-md); overflow:hidden; }
.pti-blog-card h2{ font-size:1.1rem; padding:16px 20px 0; }
.pti-blog-card p{ padding:0 20px; }
.pti-blog-card .pti-service-link{ display:block; padding:0 20px 20px; }

/* ===== Single post cta ===== */
.pti-single-cta{ background:var(--offwhite); border-radius:var(--radius-md); padding:36px; text-align:center; margin:48px 0; }

/* ===== Footer ===== */
.pti-footer{ background:var(--navy-900); color:var(--navy-100); padding-top:64px; }
.pti-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; }
.footer-widget-title{ color:var(--white); font-size:1rem; margin-bottom:16px; }
.pti-footer-col ul li{ padding:6px 0; }
.pti-footer-col a{ color:var(--navy-100); opacity:.85; }
.pti-footer-col a:hover{ opacity:1; color:var(--amber-500); }
.pti-social-links{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.pti-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0; font-size:.82rem; text-align:center; }
.legal-menu{ display:inline-flex; gap:16px; margin-left:16px; }

/* ===== Responsive ===== */
@media (max-width:960px){
	.pti-hero-grid, .pti-final-cta-grid, .pti-layanan-grid, .pti-contact-grid{ grid-template-columns:1fr; }
	.pti-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); box-shadow:var(--shadow-md); padding:20px; }
	.pti-nav.is-open{ display:block; }
	.pti-menu{ flex-direction:column; gap:12px; }
	.pti-menu-toggle{ display:flex; }
	.pti-header-cta{ display:none; }
	.pti-sticky-cta{ display:flex; }
	.pti-footer-grid{ grid-template-columns:1fr 1fr; }
	main{ padding-bottom:66px; } /* ruang untuk sticky CTA */
}
@media (max-width:600px){
	.pti-footer-grid{ grid-template-columns:1fr; }
	.pti-about-stats{ gap:28px; }
}