{"id":2544,"date":"2026-08-23T03:46:40","date_gmt":"2026-08-23T03:46:40","guid":{"rendered":"https:\/\/sanfai.site\/?page_id=2544"},"modified":"2026-09-09T04:16:33","modified_gmt":"2026-09-09T04:16:33","slug":"portofoliokontraktor","status":"publish","type":"page","link":"https:\/\/sanfai.site\/?page_id=2544","title":{"rendered":"PortofolioKontraktor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2544\" class=\"elementor elementor-2544\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c84df14 e-con e-atomic-element e-flexbox-base e-4c2598c \" data-id=\"c84df14\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c84df14\">\n    \t\t<div class=\"elementor-element elementor-element-cdc81b1 elementor-widget elementor-widget-html\" data-id=\"cdc81b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SanFai Kontraktor \u2014 Hero Section & Brand Partner Widget\r\n     ============================================================ -->\r\n<div class=\"sfk-wrapper\">\r\n\r\n  <!-- ============ HEADER \/ NAVBAR ============ -->\r\n  <header class=\"sfk-header\">\r\n    <div class=\"sfk-header-inner\">\r\n      <a href=\"#\" class=\"sfk-brand\">\r\n        <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/07\/SANFAIKONTRAKTORFIKS.png\" alt=\"SanFai Kontraktor\" class=\"sfk-brand-logo\">\r\n        <span class=\"sfk-brand-text\">\r\n          <strong>SanFai Kontraktor<\/strong>\r\n          <small>by SanFai Property<\/small>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <nav class=\"sfk-nav\">\r\n        <a href=\"https:\/\/sanfai.site\/\">Menu Utama<\/a>\r\n        <a href=\"#portofolio\">Portofolio<\/a>\r\n        <a href=\"#kontak\">Kontak<\/a>\r\n      <\/nav>\r\n\r\n      <button class=\"sfk-burger\" aria-label=\"Menu\" onclick=\"document.querySelector('.sfk-nav').classList.toggle('sfk-nav-open')\">\r\n        <span><\/span><span><\/span><span><\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- ============ HERO ============ -->\r\n  <section class=\"sfk-hero\">\r\n    <div class=\"sfk-hero-bg\" style=\"background-image:url('https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/header.jpg');\"><\/div>\r\n    <div class=\"sfk-hero-overlay\"><\/div>\r\n    <div class=\"sfk-hero-bottom-fade\"><\/div>\r\n\r\n    <div class=\"sfk-hero-content\">\r\n      <h1 class=\"sfk-title\">SanFai Kontraktor<\/h1>\r\n      <p class=\"sfk-subtitle\">by SanFai Property<\/p>\r\n      <div class=\"sfk-underline\"><\/div>\r\n\r\n      <p class=\"sfk-desc\">\r\n        Jasa kontraktor profesional terpercaya di Jabodetabek untuk pembangunan hunian, kantor, dan ruang usaha dari nol hingga serah terima kunci. Mengutamakan standar kualitas tinggi, ketepatan jadwal, serta presisi di setiap detailnya.\r\n      <\/p>\r\n\r\n      <div class=\"sfk-cta-row\">\r\n        <a href=\"#kontak\" class=\"sfk-btn sfk-btn-primary\">\r\n          <span class=\"sfk-btn-text\">Konsultasi Gratis<\/span>\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- ============ FEATURE ROW ============ -->\r\n      <div class=\"sfk-features\">\r\n        <div class=\"sfk-feature\">\r\n          <span class=\"sfk-feature-icon\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z\"><\/path><polyline points=\"9 12 11 14 15 10\"><\/polyline><\/svg>\r\n          <\/span>\r\n          <span class=\"sfk-feature-text\">\r\n            <strong>Kualitas Terjamin<\/strong>\r\n            <small>Material pilihan &amp; standar konstruksi terbaik<\/small>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"sfk-feature\">\r\n          <span class=\"sfk-feature-icon\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n          <\/span>\r\n          <span class=\"sfk-feature-text\">\r\n            <strong>Tepat Waktu<\/strong>\r\n            <small>Manajemen proyek efektif dan efisien<\/small>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"sfk-feature\">\r\n          <span class=\"sfk-feature-icon\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg>\r\n          <\/span>\r\n          <span class=\"sfk-feature-text\">\r\n            <strong>Tim Profesional<\/strong>\r\n            <small>Tenaga ahli berpengalaman di bidangnya<\/small>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"sfk-feature\">\r\n          <span class=\"sfk-feature-icon\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 20a10 10 0 0 1 20 0\"><\/path><path d=\"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z\"><\/path><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"><\/line><\/svg>\r\n          <\/span>\r\n          <span class=\"sfk-feature-text\">\r\n            <strong>Keselamatan Kerja<\/strong>\r\n            <small>Utamakan keselamatan di setiap proyek<\/small>\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  \r\n\r\n<\/div> <!-- Penutup Utama .sfk-wrapper -->\r\n\r\n\r\n<!-- ============ CSS AMAN (ISOLATED) ============ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');\r\n\r\n  \/* Wrapper Utama & Reset Scope *\/\r\n  .sfk-wrapper{\r\n    --sfk-brown-dark:#3B2A1E;\r\n    --sfk-brown:#6B4A32;\r\n    --sfk-brown-light:#F2ECE2;\r\n    --sfk-text:#2B211B;\r\n    --sfk-muted:#8A7B6C;\r\n    --sfk-btn-grad-start:#3B2A1E;\r\n    --sfk-btn-grad-end:#8C7A66;\r\n    font-family:'Plus Jakarta Sans',sans-serif;\r\n    color:var(--sfk-text);\r\n    box-sizing:border-box;\r\n    width:100%;\r\n    display:block;\r\n    scroll-behavior: smooth; \/* Membuat animasi scroll jadi mulus *\/\r\n  }\r\n  .sfk-wrapper *,.sfk-wrapper *::before,.sfk-wrapper *::after{box-sizing:inherit;}\r\n  .sfk-wrapper a{text-decoration:none;color:inherit;}\r\n  .sfk-wrapper img{max-width:100%;display:block;}\r\n\r\n  \/* Header *\/\r\n  .sfk-wrapper .sfk-header{background:#fff;border-bottom:1px solid #efe9e0;position:sticky;top:0;z-index:20;}\r\n  .sfk-wrapper .sfk-header-inner{max-width:1400px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}\r\n  .sfk-wrapper .sfk-brand{display:flex;align-items:center;gap:12px;}\r\n  .sfk-wrapper .sfk-brand-logo{width:42px;height:42px;object-fit:contain;flex-shrink:0;}\r\n  .sfk-wrapper .sfk-brand-text{display:flex;flex-direction:column;line-height:1.2;}\r\n  .sfk-wrapper .sfk-brand-text strong{font-size:19px;color:var(--sfk-brown-dark);font-weight:800;}\r\n  .sfk-wrapper .sfk-brand-text small{font-size:12px;color:var(--sfk-muted);font-weight:500;}\r\n\r\n  .sfk-wrapper .sfk-nav{display:flex;align-items:center;justify-content:flex-end;gap:34px;flex:1;}\r\n  .sfk-wrapper .sfk-nav a{font-size:15px;font-weight:600;color:#3a2f26;transition:color .2s;white-space:nowrap;}\r\n  .sfk-wrapper .sfk-nav a:hover{color:var(--sfk-brown);}\r\n\r\n  .sfk-wrapper .sfk-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}\r\n  .sfk-wrapper .sfk-burger span{width:24px;height:2px;background:var(--sfk-brown-dark);border-radius:2px;}\r\n\r\n  \/* Hero *\/\r\n  .sfk-wrapper .sfk-hero{position:relative;overflow:hidden;padding:70px 32px 60px;}\r\n  .sfk-wrapper .sfk-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}\r\n  .sfk-wrapper .sfk-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 32%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.15) 72%, rgba(255,255,255,0) 100%);z-index:1;}\r\n  .sfk-wrapper .sfk-hero-bottom-fade{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,.92) 70%, rgba(255,255,255,1) 100%);z-index:1;pointer-events:none;}\r\n  .sfk-wrapper .sfk-hero-content{position:relative;z-index:2;max-width:1400px;margin:0 auto;}\r\n\r\n  .sfk-wrapper .sfk-title{font-size:56px;font-weight:800;color:var(--sfk-brown-dark);line-height:1.05;margin:0 0 6px;max-width:680px;}\r\n  .sfk-wrapper .sfk-subtitle{font-size:20px;font-weight:700;color:var(--sfk-brown);margin:0 0 16px;}\r\n  .sfk-wrapper .sfk-underline{width:70px;height:4px;background:var(--sfk-brown);border-radius:4px;margin-bottom:22px;}\r\n  .sfk-wrapper .sfk-desc{font-size:18px;color:#4a3c30;line-height:1.6;max-width:480px;margin:0 0 30px;}\r\n\r\n  .sfk-wrapper .sfk-cta-row{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}\r\n  .sfk-wrapper .sfk-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:10px;font-size:15px;font-weight:700;transition:transform .15s ease, box-shadow .15s ease;}\r\n  .sfk-wrapper .sfk-btn:hover{transform:translateY(-2px);}\r\n  .sfk-wrapper .sfk-btn-primary{background:linear-gradient(90deg, var(--sfk-btn-grad-start) 0%, var(--sfk-btn-grad-end) 100%);box-shadow:0 6px 16px rgba(59,42,30,.3);}\r\n  .sfk-wrapper .sfk-btn-primary, .sfk-wrapper .sfk-btn-primary *, .sfk-wrapper .sfk-btn-primary .sfk-btn-text{color:#ffffff !important;}\r\n  .sfk-wrapper .sfk-btn-secondary{background:#fff;color:var(--sfk-brown-dark);border:1px solid #e4dccf;}\r\n\r\n  \/* Features *\/\r\n  .sfk-wrapper .sfk-features{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:28px;border-top:1px solid rgba(59,42,30,.12);}\r\n  .sfk-wrapper .sfk-feature{display:flex;align-items:flex-start;gap:12px;}\r\n  .sfk-wrapper .sfk-feature-icon{width:42px;height:42px;background:var(--sfk-brown-light);color:var(--sfk-brown);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}\r\n  .sfk-wrapper .sfk-feature-text{display:flex;flex-direction:column;gap:3px;}\r\n  .sfk-wrapper .sfk-feature-text strong{font-size:15px;color:var(--sfk-text);}\r\n  .sfk-wrapper .sfk-feature-text small{font-size:13.5px;color:var(--sfk-muted);line-height:1.4;}\r\n\r\n  \/* Strip Brand Partner *\/\r\n  .sfk-wrapper .sanfai-bank-strip{width:100%;background:#ffffff;padding:30px 0;border-top:1px solid #edf2f7;position:relative;z-index:3;overflow:hidden;}\r\n  .sfk-wrapper .sanfai-bank-strip-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;gap:32px;width:100%;padding:0 50px;}\r\n  .sfk-wrapper .sanfai-banks-label{font-size:16px;font-weight:800;color:#0d2818;line-height:1.3;flex-shrink:0;}\r\n  .sfk-wrapper .sanfai-banks-label span{display:block;font-weight:600;font-size:13px;color:#555555;}\r\n  .sfk-wrapper .sanfai-banks-marquee{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);}\r\n  .sfk-wrapper .sanfai-banks-track{display:flex;align-items:center;gap:48px;width:max-content;animation:sanfaiMarqueeScroll 35s linear infinite;}\r\n  .sfk-wrapper .sanfai-banks-marquee:hover .sanfai-banks-track{animation-play-state:paused;}\r\n  @keyframes sanfaiMarqueeScroll {\r\n    from { transform: translateX(0); }\r\n    to { transform: translateX(-50%); }\r\n  }\r\n  .sfk-wrapper .sanfai-bank-logo{display:flex;align-items:center;flex-shrink:0;}\r\n  .sfk-wrapper .sanfai-bank-logo img{height:64px;width:auto;max-width:200px;object-fit:contain;display:block;}\r\n\r\n  \/* Section Tentang Kami *\/\r\n  .sfk-wrapper .sanfai-about-section{width:100%;display:block;position:relative;z-index:10;box-sizing:border-box;padding:70px 20px;background-color:#ffffff;scroll-margin-top: 80px;}\r\n  .sfk-wrapper .sanfai-about-container{max-width:1200px;margin:0 auto;width:100%;}\r\n  .sfk-wrapper .sanfai-about-grid{display:flex;flex-wrap:wrap;gap:40px;align-items:stretch;}\r\n  .sfk-wrapper .sanfai-about-left{flex:1 1 480px;min-width:280px;display:flex;flex-direction:column;}\r\n  .sfk-wrapper .sanfai-about-badge{display:inline-flex;align-items:center;gap:6px;background:#F2ECE2;color:#3B2A1E;font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:20px;letter-spacing:0.4px;text-transform:uppercase;margin-bottom:14px;width:fit-content;}\r\n  .sfk-wrapper .sanfai-about-title{font-size:clamp(24px, 2.5vw, 30px);font-weight:800;color:#3B2A1E;margin:0 0 16px 0;letter-spacing:-0.3px;line-height:1.25;}\r\n  .sfk-wrapper .sanfai-about-desc{font-size:15px;line-height:1.7;color:#5a4a3c;margin:0;font-weight:500;}\r\n  .sfk-wrapper .sanfai-features-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;margin-top:32px;padding-top:28px;border-top:1px solid #e9ded1;}\r\n  .sfk-wrapper .sanfai-feature-item{display:flex;align-items:center;gap:12px;text-align:left;}\r\n  .sfk-wrapper .sanfai-feature-item .sanfai-feature-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:#F2ECE2;color:#6B4A32;display:flex;align-items:center;justify-content:center;}\r\n  .sfk-wrapper .sanfai-feature-icon svg{width:22px;height:22px;stroke:#6B4A32;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;}\r\n  .sfk-wrapper .sanfai-feature-text{font-size:13px;font-weight:700;color:#3B2A1E;line-height:1.35;}\r\n  .sfk-wrapper .sanfai-about-right{flex:1 1 360px;min-width:280px;position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(135deg, #3B2A1E 0%, #6B4A32 100%);box-shadow:0 20px 45px rgba(59, 42, 30, 0.18);min-height:340px;display:flex;}\r\n  .sfk-wrapper .sanfai-about-right img{width:100%;height:100%;object-fit:cover;display:block;}\r\n  .sfk-wrapper .sanfai-floating-badge{position:absolute;left:20px;bottom:20px;z-index:3;background:rgba(255, 255, 255, 0.95);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);width:fit-content;}\r\n  .sfk-wrapper .sanfai-floating-badge svg{width:20px;height:20px;stroke:#6B4A32;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block;}\r\n  .sfk-wrapper .sanfai-floating-badge span{font-size:12.5px;font-weight:700;color:#3B2A1E;line-height:1.3;white-space:nowrap;}\r\n\r\n  \/* Responsive Media Queries *\/\r\n  @media (max-width:1200px){\r\n    .sfk-wrapper .sfk-title{font-size:48px;}\r\n  }\r\n  @media (max-width:1100px){\r\n    .sfk-wrapper .sfk-title{font-size:42px;}\r\n    .sfk-wrapper .sfk-features{grid-template-columns:repeat(2,1fr);}\r\n    .sfk-wrapper .sfk-nav{gap:22px;}\r\n    .sfk-wrapper .sanfai-bank-strip { padding: 24px 0; }\r\n    .sfk-wrapper .sanfai-bank-strip-inner{ padding: 0 25px; }\r\n    .sfk-wrapper .sanfai-bank-logo img { height: 52px; }\r\n  }\r\n  @media (max-width:880px){\r\n    .sfk-wrapper .sfk-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 16px;box-shadow:0 12px 20px rgba(0,0,0,.08);}\r\n    .sfk-wrapper .sfk-nav.sfk-nav-open{display:flex;}\r\n    .sfk-wrapper .sfk-nav a{padding:12px 0;width:100%;border-bottom:1px solid #f2ede4;}\r\n    .sfk-wrapper .sfk-burger{display:flex;}\r\n    .sfk-wrapper .sfk-hero-overlay{background:rgba(255,255,255,.93);}\r\n    .sfk-wrapper .sfk-title{max-width:100%;}\r\n    .sfk-wrapper .sfk-desc{max-width:100%;}\r\n  }\r\n  @media (max-width: 768px) {\r\n    .sfk-wrapper .sanfai-bank-strip { padding: 22px 0; }\r\n    .sfk-wrapper .sanfai-bank-strip-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 16px; }\r\n    .sfk-wrapper .sanfai-banks-marquee{ width: 100%; }\r\n    .sfk-wrapper .sanfai-banks-track { gap: 32px; }\r\n    .sfk-wrapper .sanfai-bank-logo img { height: 44px; }\r\n    .sfk-wrapper .sanfai-features-grid { grid-template-columns: 1fr; }\r\n    .sfk-wrapper .sanfai-about-right { min-height: 260px; }\r\n  }\r\n  @media (max-width:700px){\r\n    .sfk-wrapper .sfk-header-inner{padding:12px 18px;}\r\n    .sfk-wrapper .sfk-hero{padding:40px 18px 40px;}\r\n    .sfk-wrapper .sfk-title{font-size:34px;}\r\n    .sfk-wrapper .sfk-subtitle{font-size:16px;}\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-3ccaf91 e-con e-atomic-element e-flexbox-base e-6361a77 \" data-id=\"3ccaf91\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3ccaf91\" id=\"portofolio\">\n    \t\t<div class=\"elementor-element elementor-element-872b969 elementor-widget elementor-widget-html\" data-id=\"872b969\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Proyek Unggulan SanFai Kontraktor<\/title>\r\n  \r\n  <!-- Tailwind CSS CDN -->\r\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n  \r\n  <!-- Fonts & Icons -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\r\n\r\n  <style>\r\n    body {\r\n      font-family: 'Plus Jakarta Sans', sans-serif;\r\n      background-color: #ffffff;\r\n      color: #1e1e1e;\r\n    }\r\n    .sfk-slider::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n    .sfk-slider {\r\n      -ms-overflow-style: none;\r\n      scrollbar-width: none;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body class=\"antialiased min-h-screen bg-white py-10 md:py-16\">\r\n\r\n  <!-- Main Section Wrapper -->\r\n  <main class=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n    \r\n    <!-- Section Header -->\r\n    <header class=\"mb-10 text-center sm:text-left\">\r\n      <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#f4eee8] text-[#4a382c] border border-[#e2d5c8] mb-3\">\r\n        <span class=\"w-2 h-2 rounded-full bg-[#4a382c]\"><\/span>\r\n        <span class=\"text-[11px] font-bold tracking-widest uppercase\">Portofolio<\/span>\r\n      <\/div>\r\n\r\n      <h2 class=\"text-2xl sm:text-3xl lg:text-4xl font-extrabold text-[#231b15] tracking-tight\">\r\n        Proyek Unggulan SanFai Kontraktor\r\n      <\/h2>\r\n\r\n      <p class=\"text-sm md:text-base text-stone-500 mt-2 max-w-2xl leading-relaxed\">\r\n        Berbagai proyek pembangunan dan renovasi yang telah kami selesaikan dengan standar kualitas tinggi, ketepatan waktu, dan kepuasan klien.\r\n      <\/p>\r\n    <\/header>\r\n\r\n    <!-- Cards Container: SLIDER GESER di HP, GRID 3 KOLOM di tablet\/desktop -->\r\n    <div class=\"sfk-slider flex overflow-x-auto snap-x snap-mandatory gap-4 -mx-4 px-4 pb-3\r\n                md:grid md:grid-cols-2 md:gap-6 md:mx-0 md:px-0 md:pb-0 md:overflow-visible\r\n                lg:grid-cols-3 lg:gap-8\">\r\n      \r\n      <!-- Card 1 -->\r\n      <article class=\"shrink-0 w-[82%] sm:w-[60%] md:w-auto snap-start bg-[#4a382c] text-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col justify-between\">\r\n        <div>\r\n          <div class=\"relative w-full h-56 overflow-hidden bg-stone-800\">\r\n            <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/09\/mrjnull-1.jpg\" alt=\"Pembangunan Rumah 2 Lantai\" class=\"w-full h-full object-cover\" \/>\r\n            <div class=\"absolute top-3.5 left-3.5 right-3.5 flex flex-wrap gap-1.5\">\r\n              <span class=\"bg-black\/40 backdrop-blur-md text-[11px] font-medium text-white px-3 py-1 rounded-full border border-white\/20\">Rumah Tinggal<\/span>\r\n              <span class=\"bg-[#e5a974]\/90 backdrop-blur-md text-[11px] font-bold text-[#231b15] px-3 py-1 rounded-full border border-white\/20\">Proyek Mr. J<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"p-6\">\r\n            <h3 class=\"font-bold text-lg text-[#fdfbf9] leading-snug\">Pembangunan Rumah 2 Lantai Modern Minimalis<\/h3>\r\n            <p class=\"text-xs text-[#c2b2a3] mt-1.5 flex items-center gap-1.5 font-medium\">\r\n              <i class=\"fa-solid fa-location-dot text-[#e5a974]\"><\/i> Tapos, Depok\r\n            <\/p>\r\n            <p class=\"text-xs text-[#dfd5cb] mt-3.5 leading-relaxed font-normal\">\r\n              Pembangunan rumah 2 lantai bergaya modern minimalis dengan finishing premium dan pencahayaan optimal.\r\n            <\/p>\r\n            <div class=\"grid grid-cols-4 gap-2 bg-white\/5 border border-white\/10 p-3 rounded-xl mt-4\">\r\n              <div class=\"text-center\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LB<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">160 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LT<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">150 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Tahun<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">2023<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Status<\/p>\r\n                <span class=\"inline-block text-[10px] font-bold text-emerald-300 bg-emerald-500\/10 border border-emerald-400\/30 px-1.5 py-0.5 rounded mt-0.5\">Selesai<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"px-6 pb-6 pt-2\">\r\n          <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya%20dari%20website,%20tertarik%20ingin%20konsultasi%20mengenai%20proyek%20seperti%20Pembangunan%20Rumah%202 Lantai%20Modern%20Minimalis Mr. J%20di%20Tapos -%20Depok.\" target=\"_blank\" class=\"w-full py-2.5 px-4 rounded-xl text-xs font-bold text-[#4a382c] bg-[#f8f5f1] hover:bg-white flex items-center justify-center gap-2 transition duration-200 shadow-sm\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> Konsultasikan Proyek\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 2 -->\r\n      <article class=\"shrink-0 w-[82%] sm:w-[60%] md:w-auto snap-start bg-[#4a382c] text-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col justify-between\">\r\n        <div>\r\n          <div class=\"relative w-full h-56 overflow-hidden bg-stone-800\">\r\n            <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/09\/mrmfiksfiks.jpg\" alt=\"Pembangunan Rumah Mr. M\" class=\"w-full h-full object-cover\" \/>\r\n            <div class=\"absolute top-3.5 left-3.5 right-3.5 flex flex-wrap gap-1.5\">\r\n              <span class=\"bg-black\/40 backdrop-blur-md text-[11px] font-medium text-white px-3 py-1 rounded-full border border-white\/20\">Rumah Tinggal<\/span>\r\n              <span class=\"bg-[#e5a974]\/90 backdrop-blur-md text-[11px] font-bold text-[#231b15] px-3 py-1 rounded-full border border-white\/20\">Proyek Mr. M<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"p-6\">\r\n            <h3 class=\"font-bold text-lg text-[#fdfbf9] leading-snug\">Pembangunan Rumah 2 Lantai Modern Minimalis<\/h3>\r\n            <p class=\"text-xs text-[#c2b2a3] mt-1.5 flex items-center gap-1.5 font-medium\">\r\n              <i class=\"fa-solid fa-location-dot text-[#e5a974]\"><\/i> Mekarsari, Depok\r\n            <\/p>\r\n            <p class=\"text-xs text-[#dfd5cb] mt-3.5 leading-relaxed font-normal\">\r\n              Hunian 2 lantai bergaya modern minimalis dengan struktur kokoh, fasad simpel nan elegan, serta sirkulasi udara yang maksimal.\r\n            <\/p>\r\n            <div class=\"grid grid-cols-4 gap-2 bg-white\/5 border border-white\/10 p-3 rounded-xl mt-4\">\r\n              <div class=\"text-center\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LB<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">200 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LT<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">108 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Tahun<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">2024<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Status<\/p>\r\n                <span class=\"inline-block text-[10px] font-bold text-emerald-300 bg-emerald-500\/10 border border-emerald-400\/30 px-1.5 py-0.5 rounded mt-0.5\">Selesai<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"px-6 pb-6 pt-2\">\r\n          <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya%20dari%20website,%20tertarik%20ingin%20konsultasi%20mengenai%20proyek%20seperti%20Pembangunan%20Rumah%202 Lantai%20Modern%20Minimalis Mr. M%20di%20Mekarsari -%20Depok.\" target=\"_blank\" class=\"w-full py-2.5 px-4 rounded-xl text-xs font-bold text-[#4a382c] bg-[#f8f5f1] hover:bg-white flex items-center justify-center gap-2 transition duration-200 shadow-sm\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> Konsultasikan Proyek\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 3 -->\r\n      <article class=\"shrink-0 w-[82%] sm:w-[60%] md:w-auto snap-start bg-[#4a382c] text-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col justify-between\">\r\n        <div>\r\n          <div class=\"relative w-full h-56 overflow-hidden bg-stone-800\">\r\n            <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/09\/mrifiks.jpg\" alt=\"Pembangunan Rumah 2 Lantai Tropis\" class=\"w-full h-full object-cover\" \/>\r\n            <div class=\"absolute top-3.5 left-3.5 right-3.5 flex flex-wrap gap-1.5\">\r\n              <span class=\"bg-black\/40 backdrop-blur-md text-[11px] font-medium text-white px-3 py-1 rounded-full border border-white\/20\">Rumah Tinggal<\/span>\r\n              <span class=\"bg-[#e5a974]\/90 backdrop-blur-md text-[11px] font-bold text-[#231b15] px-3 py-1 rounded-full border border-white\/20\">Proyek Mr. I<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"p-6\">\r\n            <h3 class=\"font-bold text-lg text-[#fdfbf9] leading-snug\">Pembangunan Rumah 2 Lantai Modern Minimalis<\/h3>\r\n            <p class=\"text-xs text-[#c2b2a3] mt-1.5 flex items-center gap-1.5 font-medium\">\r\n              <i class=\"fa-solid fa-location-dot text-[#e5a974]\"><\/i> Sawangan, Depok\r\n            <\/p>\r\n            <p class=\"text-xs text-[#dfd5cb] mt-3.5 leading-relaxed font-normal\">\r\n              Hunian 2 lantai berkonsep modern minimalis yang memaksimalkan efisiensi ruang serta sirkulasi udara alami secara optimal.\r\n            <\/p>\r\n            <div class=\"grid grid-cols-4 gap-2 bg-white\/5 border border-white\/10 p-3 rounded-xl mt-4\">\r\n              <div class=\"text-center\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LB<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">110 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LT<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">60 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Tahun<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">2026<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Status<\/p>\r\n                <span class=\"inline-block text-[10px] font-bold text-emerald-300 bg-emerald-500\/10 border border-emerald-400\/30 px-1.5 py-0.5 rounded mt-0.5\">Selesai<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"px-6 pb-6 pt-2\">\r\n          <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya%20dari%20website,%20tertarik%20ingin%20konsultasi%20mengenai%20proyek%20seperti%20Pembangunan%20Rumah%202 Lantai%20Modern%20Minimalis Mr. I%20di%20Sawangan -%20Depok.\" target=\"_blank\" class=\"w-full py-2.5 px-4 rounded-xl text-xs font-bold text-[#4a382c] bg-[#f8f5f1] hover:bg-white flex items-center justify-center gap-2 transition duration-200 shadow-sm\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> Konsultasikan Proyek\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 4 -->\r\n      <article class=\"shrink-0 w-[82%] sm:w-[60%] md:w-auto snap-start bg-[#4a382c] text-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col justify-between\">\r\n        <div>\r\n          <div class=\"relative w-full h-56 overflow-hidden bg-stone-800\">\r\n            <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/09\/mrsd.jpg\" alt=\"Pembangunan Rumah 2 lantai\" class=\"w-full h-full object-cover\" \/>\r\n            <div class=\"absolute top-3.5 left-3.5 right-3.5 flex flex-wrap gap-1.5\">\r\n              <span class=\"bg-black\/40 backdrop-blur-md text-[11px] font-medium text-white px-3 py-1 rounded-full border border-white\/20\">Rumah Tinggal<\/span>\r\n              <span class=\"bg-[#e5a974]\/90 backdrop-blur-md text-[11px] font-bold text-[#231b15] px-3 py-1 rounded-full border border-white\/20\">Proyek Mrs. D<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"p-6\">\r\n            <h3 class=\"font-bold text-lg text-[#fdfbf9] leading-snug\">Pembangunan Rumah 2 Lantai Modern Minimalis<\/h3>\r\n            <p class=\"text-xs text-[#c2b2a3] mt-1.5 flex items-center gap-1.5 font-medium\">\r\n              <i class=\"fa-solid fa-location-dot text-[#e5a974]\"><\/i> Cibubur, Depok\r\n            <\/p>\r\n            <p class=\"text-xs text-[#dfd5cb] mt-3.5 leading-relaxed font-normal\">\r\n              Desain rumah 2 lantai yang mengintegrasikan fasad modern, sirkulasi udara yang baik, serta area carport yang luas dan fungsional.\r\n            <\/p>\r\n            <div class=\"grid grid-cols-4 gap-2 bg-white\/5 border border-white\/10 p-3 rounded-xl mt-4\">\r\n              <div class=\"text-center\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LB<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">141 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LT<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">72 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Tahun<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">2025<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Status<\/p>\r\n                <span class=\"inline-block text-[10px] font-bold text-emerald-300 bg-emerald-500\/10 border border-emerald-400\/30 px-1.5 py-0.5 rounded mt-0.5\">Selesai<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"px-6 pb-6 pt-2\">\r\n          <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya%20dari%20website,%20tertarik%20ingin%20konsultasi%20mengenai%20proyek%20seperti%20Pembangunan%20Rumah%202 Lantai%20Modern%20Minimalis Mrs. D%20di%20Cibubur -%20Depok.\" target=\"_blank\" class=\"w-full py-2.5 px-4 rounded-xl text-xs font-bold text-[#4a382c] bg-[#f8f5f1] hover:bg-white flex items-center justify-center gap-2 transition duration-200 shadow-sm\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> Konsultasikan Proyek\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 5 -->\r\n      <article class=\"shrink-0 w-[82%] sm:w-[60%] md:w-auto snap-start bg-[#4a382c] text-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col justify-between\">\r\n        <div>\r\n          <div class=\"relative w-full h-56 overflow-hidden bg-stone-800\">\r\n            <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/09\/mryfiks.jpg\" alt=\"Renovasi Interior & Finishing\" class=\"w-full h-full object-cover\" \/>\r\n            <div class=\"absolute top-3.5 left-3.5 right-3.5 flex flex-wrap gap-1.5\">\r\n              <span class=\"bg-black\/40 backdrop-blur-md text-[11px] font-medium text-white px-3 py-1 rounded-full border border-white\/20\">Rumah Tinggal<\/span>\r\n              <span class=\"bg-[#e5a974]\/90 backdrop-blur-md text-[11px] font-bold text-[#231b15] px-3 py-1 rounded-full border border-white\/20\">Proyek Mrs. Y<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"p-6\">\r\n            <h3 class=\"font-bold text-lg text-[#fdfbf9] leading-snug\">Pembangunan Rumah 2 Lantai Modern Minimalis<\/h3>\r\n            <p class=\"text-xs text-[#c2b2a3] mt-1.5 flex items-center gap-1.5 font-medium\">\r\n              <i class=\"fa-solid fa-location-dot text-[#e5a974]\"><\/i> Kaliabang, Bekasi\r\n            <\/p>\r\n            <p class=\"text-xs text-[#dfd5cb] mt-3.5 leading-relaxed font-normal\">\r\n              Transformasi menyeluruh ruang interior lama menjadi tampilan bernuansa hangat, mewah, dan fungsional.\r\n            <\/p>\r\n            <div class=\"grid grid-cols-4 gap-2 bg-white\/5 border border-white\/10 p-3 rounded-xl mt-4\">\r\n              <div class=\"text-center\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LB<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">208 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LT<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">135 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Tahun<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">2025<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Status<\/p>\r\n                <span class=\"inline-block text-[10px] font-bold text-emerald-300 bg-emerald-500\/10 border border-emerald-400\/30 px-1.5 py-0.5 rounded mt-0.5\">Selesai<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"px-6 pb-6 pt-2\">\r\n          <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya%20dari%20website,%20tertarik%20ingin%20konsultasi%20mengenai%20proyek%20seperti%20Pembangunan%20Rumah%202 Lantai%20Modern%20Minimalis Mrs. Y%20di%20Kaliabang -%20Bekasi.\" target=\"_blank\" class=\"w-full py-2.5 px-4 rounded-xl text-xs font-bold text-[#4a382c] bg-[#f8f5f1] hover:bg-white flex items-center justify-center gap-2 transition duration-200 shadow-sm\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> Konsultasikan Proyek\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 6 -->\r\n      <article class=\"shrink-0 w-[82%] sm:w-[60%] md:w-auto snap-start bg-[#4a382c] text-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col justify-between\">\r\n        <div>\r\n          <div class=\"relative w-full h-56 overflow-hidden bg-stone-800\">\r\n            <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/09\/mrffiks.jpg\" alt=\"Pembangunan Rumah Tinggal\" class=\"w-full h-full object-cover\" \/>\r\n            <div class=\"absolute top-3.5 left-3.5 right-3.5 flex flex-wrap gap-1.5\">\r\n              <span class=\"bg-black\/40 backdrop-blur-md text-[11px] font-medium text-white px-3 py-1 rounded-full border border-white\/20\">Rumah Tinggal<\/span>\r\n              <span class=\"bg-[#e5a974]\/90 backdrop-blur-md text-[11px] font-bold text-[#231b15] px-3 py-1 rounded-full border border-white\/20\">Proyek Mr. F<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"p-6\">\r\n            <h3 class=\"font-bold text-lg text-[#fdfbf9] leading-snug\">Pembangunan Rumah Dengan Konsep Scandinavian<\/h3>\r\n            <p class=\"text-xs text-[#c2b2a3] mt-1.5 flex items-center gap-1.5 font-medium\">\r\n              <i class=\"fa-solid fa-location-dot text-[#e5a974]\"><\/i> Cirendeu, Tanggerang Selatan\r\n            <\/p>\r\n            <p class=\"text-xs text-[#dfd5cb] mt-3.5 leading-relaxed font-normal\">\r\n              Konstruksi fasilitas ibadah dan ruang publik warga berarsitektur kubah modern dengan area wudhu higienis.\r\n            <\/p>\r\n            <div class=\"grid grid-cols-4 gap-2 bg-white\/5 border border-white\/10 p-3 rounded-xl mt-4\">\r\n              <div class=\"text-center\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LB<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">80 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">LT<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">84 m\u00b2<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Tahun<\/p>\r\n                <p class=\"text-xs font-extrabold text-[#fdfbf9] mt-0.5\">2026<\/p>\r\n              <\/div>\r\n              <div class=\"text-center border-l border-white\/10\">\r\n                <p class=\"text-[9.5px] text-[#c2b2a3] font-semibold uppercase tracking-wider\">Status<\/p>\r\n                <span class=\"inline-block text-[10px] font-bold text-emerald-300 bg-emerald-500\/10 border border-emerald-400\/30 px-1.5 py-0.5 rounded mt-0.5\">Selesai<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"px-6 pb-6 pt-2\">\r\n          <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya%20dari%20website,%20tertarik%20ingin%20konsultasi%20mengenai%20proyek%20seperti%20Pembangunan%20Rumah%20Dengan%20Konsep%20Scandinavian Mr. F%20di%20Cirendeu -%20Tanggerang Selatan.\" target=\"_blank\" class=\"w-full py-2.5 px-4 rounded-xl text-xs font-bold text-[#4a382c] bg-[#f8f5f1] hover:bg-white flex items-center justify-center gap-2 transition duration-200 shadow-sm\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> Konsultasikan Proyek\r\n          <\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    \r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- CTA Download Portofolio -->\r\n    <div class=\"mt-10 sm:mt-12 w-full\">\r\n      <div class=\"w-full bg-[#fbf9f6] border border-[#e9ded1] rounded-2xl px-6 py-6 sm:px-8 sm:py-7 flex flex-col sm:flex-row items-center gap-5 sm:gap-8 text-center sm:text-left\">\r\n        <div class=\"flex-1 min-w-0\">\r\n          <h3 class=\"text-base sm:text-lg font-extrabold text-[#231b15]\">Lihat Portofolio Lengkap Kami\r\n          <\/h3>\r\n          <p class=\"text-xs sm:text-sm text-stone-500 mt-1 leading-relaxed max-w-3xl\">\r\n            Lihat portofolio lengkap SanFai Kontraktor untuk mengetahui berbagai proyek pembangunan dan renovasi yang telah kami kerjakan.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <a href=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/Portofolio-SanFai-Kontraktor-compressed.pdf\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"shrink-0 inline-flex items-center justify-center gap-2 bg-[#4a382c] hover:bg-[#34271f] text-white text-xs sm:text-sm font-bold py-3 px-6 rounded-xl shadow-md shadow-stone-800\/10 hover:shadow-lg transition-all\">\r\n          <i class=\"fa-solid fa-file-pdf text-sm\"><\/i>\r\n          Lihat Portofolio\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/main>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e782454 e-con e-atomic-element e-flexbox-base e-8bf5fdf \" data-id=\"e782454\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e782454\">\n    \t\t<div class=\"elementor-element elementor-element-c8517da elementor-widget elementor-widget-html\" data-id=\"c8517da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div style=\"width: 100%; background: #3B2A1E; padding: 22px 20px; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif;\">\r\n  \r\n  <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');\r\n\r\n    * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .sanfai-features-wrap {\r\n      width: 100%;\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .sanfai-features-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 0;\r\n      align-items: center;\r\n    }\r\n\r\n    .sanfai-feature-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n      padding: 8px 28px;\r\n      min-width: 0;\r\n    }\r\n\r\n    \/* GARIS PEMISAH *\/\r\n    .sanfai-feature-item:not(:last-child) {\r\n      border-right: 1px solid rgba(225, 196, 157, 0.45);\r\n    }\r\n\r\n    \/* ICON *\/\r\n    .sanfai-feature-icon {\r\n      width: 58px;\r\n      height: 58px;\r\n      min-width: 58px;\r\n      background: #E8CFA9;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #3B2A1E;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\r\n    }\r\n\r\n    .sanfai-feature-icon svg {\r\n      width: 25px;\r\n      height: 25px;\r\n      fill: currentColor;\r\n    }\r\n\r\n    .sanfai-feature-text {\r\n      display: flex;\r\n      flex-direction: column;\r\n      min-width: 0;\r\n    }\r\n\r\n    \/* JUDUL *\/\r\n    .sanfai-feature-title {\r\n      font-size: 15px;\r\n      font-weight: 700;\r\n      color: #FFFFFF;\r\n      margin: 0 0 4px 0;\r\n      line-height: 1.3;\r\n    }\r\n\r\n    \/* DESKRIPSI *\/\r\n    .sanfai-feature-desc {\r\n      font-size: 12.5px;\r\n      font-weight: 500;\r\n      color: #DCC8AF;\r\n      margin: 0;\r\n      line-height: 1.45;\r\n    }\r\n\r\n\r\n    \/* =========================\r\n       TABLET\r\n    ========================= *\/\r\n    @media (max-width: 1024px) {\r\n\r\n      .sanfai-features-wrap {\r\n        padding: 0 10px;\r\n      }\r\n\r\n      .sanfai-features-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 18px 0;\r\n      }\r\n\r\n      .sanfai-feature-item {\r\n        padding: 6px 24px;\r\n      }\r\n\r\n      .sanfai-feature-item:nth-child(2) {\r\n        border-right: none;\r\n      }\r\n\r\n      .sanfai-feature-item:nth-child(1),\r\n      .sanfai-feature-item:nth-child(2) {\r\n        border-bottom: 1px solid rgba(225, 196, 157, 0.35);\r\n        padding-bottom: 18px;\r\n      }\r\n\r\n      .sanfai-feature-item:nth-child(3),\r\n      .sanfai-feature-item:nth-child(4) {\r\n        padding-top: 18px;\r\n      }\r\n    }\r\n\r\n\r\n    \/* =========================\r\n       HP\r\n    ========================= *\/\r\n    @media (max-width: 640px) {\r\n\r\n      .sanfai-features-wrap {\r\n        padding: 0;\r\n      }\r\n\r\n      .sanfai-features-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 0;\r\n      }\r\n\r\n      .sanfai-feature-item {\r\n        padding: 14px 10px;\r\n        border-right: none !important;\r\n        border-bottom: 1px solid rgba(225, 196, 157, 0.35);\r\n      }\r\n\r\n      .sanfai-feature-item:last-child {\r\n        border-bottom: none;\r\n      }\r\n\r\n      .sanfai-feature-icon {\r\n        width: 52px;\r\n        height: 52px;\r\n        min-width: 52px;\r\n      }\r\n\r\n      .sanfai-feature-icon svg {\r\n        width: 23px;\r\n        height: 23px;\r\n      }\r\n\r\n      .sanfai-feature-title {\r\n        font-size: 14px;\r\n      }\r\n\r\n      .sanfai-feature-desc {\r\n        font-size: 12px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n\r\n  <div class=\"sanfai-features-wrap\">\r\n\r\n    <div class=\"sanfai-features-grid\">\r\n\r\n\r\n      <!-- ITEM 1: KUALITAS TERJAMIN (Icon Verified Badge \/ High Quality) -->\r\n      <div class=\"sanfai-feature-item\">\r\n\r\n        <div class=\"sanfai-feature-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.7l-3.61.81.34 3.68L1 12l2.44 2.79-.34 3.7 3.61.82 1.89 3.2 3.4-1.46 3.4 1.46 1.89-3.2 3.61-.82-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"sanfai-feature-text\">\r\n          <h4 class=\"sanfai-feature-title\">\r\n            Kualitas Terjamin\r\n          <\/h4>\r\n\r\n          <p class=\"sanfai-feature-desc\">\r\n            Material pilihan & standar konstruksi terbaik\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- ITEM 2: TEPAT WAKTU (Icon Clock Precision) -->\r\n      <div class=\"sanfai-feature-item\">\r\n\r\n        <div class=\"sanfai-feature-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"sanfai-feature-text\">\r\n          <h4 class=\"sanfai-feature-title\">\r\n            Tepat Waktu\r\n          <\/h4>\r\n\r\n          <p class=\"sanfai-feature-desc\">\r\n            Manajemen proyek efisien & terjadwal\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- ITEM 3 -->\r\n      <div class=\"sanfai-feature-item\">\r\n\r\n        <div class=\"sanfai-feature-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"sanfai-feature-text\">\r\n          <h4 class=\"sanfai-feature-title\">\r\n            Tim Profesional\r\n          <\/h4>\r\n\r\n          <p class=\"sanfai-feature-desc\">\r\n            Tenaga ahli berpengalaman di bidangnya\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- ITEM 4 -->\r\n      <div class=\"sanfai-feature-item\">\r\n\r\n        <div class=\"sanfai-feature-icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"sanfai-feature-text\">\r\n          <h4 class=\"sanfai-feature-title\">\r\n            Garansi Pekerjaan\r\n          <\/h4>\r\n\r\n          <p class=\"sanfai-feature-desc\">\r\n            Garansi mutu untuk setiap hasil pekerjaan\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5a80019 e-con e-atomic-element e-flexbox-base e-6ff612c \" data-id=\"5a80019\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5a80019\" id=\"kontak\">\n    \t\t<div class=\"elementor-element elementor-element-f7debc1 elementor-widget elementor-widget-html\" data-id=\"f7debc1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n\r\n<head>\r\n\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n\r\n  <title>Proyek Unggulan SanFai Kontraktor<\/title>\r\n\r\n  <!-- Tailwind CSS CDN -->\r\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n  <!-- Fonts & Icons -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n  <link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\"\r\n    rel=\"stylesheet\"\r\n  \/>\r\n\r\n  <link\r\n    rel=\"stylesheet\"\r\n    href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"\r\n  \/>\r\n\r\n  <style>\r\n\r\n    html,\r\n    body {\r\n      margin: 0 !important;\r\n      padding: 0 !important;\r\n    }\r\n\r\n    body {\r\n      font-family: 'Plus Jakarta Sans', sans-serif;\r\n      background-color: #ffffff;\r\n      color: #1e1e1e;\r\n    }\r\n\r\n    .custom-scroll::-webkit-scrollbar {\r\n      width: 6px;\r\n    }\r\n\r\n    .custom-scroll::-webkit-scrollbar-track {\r\n      background: transparent;\r\n    }\r\n\r\n    .custom-scroll::-webkit-scrollbar-thumb {\r\n      background: #d6cec7;\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .custom-scroll::-webkit-scrollbar-thumb:hover {\r\n      background: #b8aba0;\r\n    }\r\n\r\n  <\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body class=\"antialiased min-h-screen bg-white m-0 p-0\">\r\n\r\n\r\n  <!-- MAIN SECTION -->\r\n\r\n  <main class=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 m-0\">\r\n\r\n\r\n    <!-- =====================================================\r\n         CTA PREMIUM\r\n         ===================================================== -->\r\n\r\n    <section class=\"w-full m-0\">\r\n\r\n      <div\r\n        class=\"relative w-full overflow-hidden rounded-2xl sm:rounded-3xl bg-[#4a382c] shadow-lg\"\r\n      >\r\n\r\n        <!-- Decorative Background -->\r\n\r\n        <div\r\n          class=\"absolute -top-24 -right-24 w-64 h-64 rounded-full border-[35px] border-white\/5\"\r\n        ><\/div>\r\n\r\n        <div\r\n          class=\"absolute -bottom-28 -left-20 w-56 h-56 rounded-full border-[30px] border-[#e5a974]\/10\"\r\n        ><\/div>\r\n\r\n\r\n        <!-- Decorative Top Line -->\r\n\r\n        <div class=\"absolute top-0 left-0 w-24 h-1 bg-[#e5a974]\"><\/div>\r\n\r\n\r\n        <!-- CTA CONTENT -->\r\n\r\n        <div\r\n          class=\"relative z-10 px-6 py-8 sm:px-10 sm:py-9 lg:px-12\"\r\n        >\r\n\r\n          <div\r\n            class=\"flex flex-col lg:flex-row lg:items-center lg:justify-between gap-7\"\r\n          >\r\n\r\n\r\n            <!-- TEXT -->\r\n\r\n            <div class=\"flex-1\">\r\n\r\n              <!-- Badge -->\r\n\r\n              <div class=\"inline-flex items-center gap-2 mb-3\">\r\n\r\n                <span\r\n                  class=\"w-2 h-2 rounded-full bg-[#e5a974]\"\r\n                ><\/span>\r\n\r\n                <span\r\n                  class=\"text-[10px] sm:text-[11px] font-bold uppercase tracking-[0.18em] text-[#e5a974]\"\r\n                >\r\n                  SanFai Kontraktor\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n              <!-- HEADING -->\r\n\r\n              <h3\r\n                class=\"text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white leading-tight tracking-tight\"\r\n              >\r\n\r\n                Siap Membangun\r\n\r\n                <span class=\"text-[#e5a974]\">\r\n                  Proyek Anda?\r\n                <\/span>\r\n\r\n              <\/h3>\r\n\r\n\r\n              <!-- DESCRIPTION -->\r\n\r\n              <p\r\n                class=\"text-xs sm:text-sm text-[#d8cbc0] mt-2.5 max-w-2xl leading-relaxed\"\r\n              >\r\n\r\n                Wujudkan hunian dan bangunan impian Anda bersama tim profesional\r\n                SanFai Kontraktor dengan kualitas terbaik dan pengerjaan yang\r\n                terpercaya.\r\n\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- RIGHT SIDE -->\r\n\r\n            <div\r\n              class=\"flex flex-col sm:flex-row lg:flex-col xl:flex-row items-stretch sm:items-center lg:items-end xl:items-center gap-3\"\r\n            >\r\n\r\n\r\n              <!-- FREE CONSULTATION -->\r\n\r\n              <div\r\n                class=\"flex items-center gap-3 px-4 py-3 rounded-xl bg-white\/10 border border-white\/10 backdrop-blur-sm\"\r\n              >\r\n\r\n                <div\r\n                  class=\"w-9 h-9 rounded-full bg-[#e5a974] text-[#4a382c] flex items-center justify-center shrink-0\"\r\n                >\r\n\r\n                  <i class=\"fa-solid fa-comments text-xs\"><\/i>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div>\r\n\r\n                  <p\r\n                    class=\"text-[10px] text-[#cdbfb2] uppercase tracking-wider font-semibold\"\r\n                  >\r\n                    Konsultasi\r\n                  <\/p>\r\n\r\n                  <p\r\n                    class=\"text-xs font-bold text-white\"\r\n                  >\r\n                    Gratis & Tanpa Komitmen\r\n                  <\/p>\r\n\r\n                <\/div>\r\n\r\n              <\/div>\r\n\r\n\r\n\r\n              <!-- BUTTON -->\r\n\r\n              <a href=\"https:\/\/wa.me\/628119787220?text=Halo%20SanFai%20Kontraktor%20saya dari Website%20ingin%20konsultasi%20mengenai pembangunan%20proyek%20yang akan saya bangun nanti.\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"group inline-flex items-center justify-center gap-2.5 bg-[#f8f5f1] hover:bg-[#e5a974] text-[#4a382c] hover:text-[#231b15] text-xs sm:text-sm font-bold px-6 py-3.5 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 whitespace-nowrap\">\r\n\r\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i>\r\n\r\n                <span>\r\n                  Konsultasi Sekarang\r\n                <\/span>\r\n\r\n                <i\r\n                  class=\"fa-solid fa-arrow-right text-[10px] group-hover:translate-x-1 transition-transform\"\r\n                ><\/i>\r\n\r\n              <\/a>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- BOTTOM BENEFITS -->\r\n\r\n          <div\r\n            class=\"mt-7 pt-5 border-t border-white\/10\"\r\n          >\r\n\r\n            <div\r\n              class=\"grid grid-cols-3 gap-3 sm:flex sm:items-center sm:gap-8\"\r\n            >\r\n\r\n\r\n              <!-- Benefit 1 -->\r\n\r\n              <div class=\"flex items-center gap-2\">\r\n\r\n                <i\r\n                  class=\"fa-solid fa-circle-check text-[#e5a974] text-xs\"\r\n                ><\/i>\r\n\r\n                <span\r\n                  class=\"text-[9px] sm:text-[11px] font-medium text-[#d8cbc0]\"\r\n                >\r\n                  Kualitas Terjamin\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n\r\n              <!-- Benefit 2 -->\r\n\r\n              <div class=\"flex items-center gap-2\">\r\n\r\n                <i\r\n                  class=\"fa-solid fa-circle-check text-[#e5a974] text-xs\"\r\n                ><\/i>\r\n\r\n                <span\r\n                  class=\"text-[9px] sm:text-[11px] font-medium text-[#d8cbc0]\"\r\n                >\r\n                  Tepat Waktu\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n\r\n              <!-- Benefit 3 -->\r\n\r\n              <div class=\"flex items-center gap-2\">\r\n\r\n                <i\r\n                  class=\"fa-solid fa-circle-check text-[#e5a974] text-xs\"\r\n                ><\/i>\r\n\r\n                <span\r\n                  class=\"text-[9px] sm:text-[11px] font-medium text-[#d8cbc0]\"\r\n                >\r\n                  Tim Profesional\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/section>\r\n\r\n\r\n  <\/main>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       MODAL DETAIL\r\n       ===================================================== -->\r\n\r\n  <div\r\n    id=\"projectModal\"\r\n    class=\"fixed inset-0 z-50 hidden bg-stone-950\/70 backdrop-blur-sm flex items-center justify-center p-3 sm:p-5 lg:p-8 transition-opacity duration-300\"\r\n  >\r\n\r\n\r\n    <div\r\n      class=\"bg-white text-stone-900 rounded-3xl max-w-4xl w-full max-h-[92vh] overflow-y-auto custom-scroll shadow-2xl relative border border-stone-200\/80 flex flex-col\"\r\n    >\r\n\r\n\r\n      <!-- MODAL HEADER -->\r\n\r\n      <div\r\n        class=\"sticky top-0 bg-white\/95 backdrop-blur-md z-30 px-6 sm:px-8 py-4 border-b border-stone-100 flex items-center justify-between\"\r\n      >\r\n\r\n        <div class=\"flex items-center gap-2.5\">\r\n\r\n          <span\r\n            id=\"modalCategory\"\r\n            class=\"inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full bg-[#f4eee8] text-[#4a382c] text-[11px] font-bold\"\r\n          ><\/span>\r\n\r\n\r\n          <span class=\"text-stone-300\">\r\n            |\r\n          <\/span>\r\n\r\n\r\n          <p\r\n            id=\"modalLocation\"\r\n            class=\"text-xs text-stone-500 font-medium flex items-center gap-1\"\r\n          ><\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n          onclick=\"closeModal()\"\r\n          class=\"w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-stone-100 hover:bg-stone-200 text-stone-500 hover:text-stone-800 flex items-center justify-center transition-all shadow-sm\"\r\n        >\r\n\r\n          <i class=\"fa-solid fa-xmark text-sm\"><\/i>\r\n\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- MODAL BODY -->\r\n\r\n      <div class=\"p-6 sm:p-8 space-y-8\">\r\n\r\n\r\n        <!-- HERO -->\r\n\r\n        <div\r\n          class=\"grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-center\"\r\n        >\r\n\r\n\r\n          <!-- LEFT -->\r\n\r\n          <div\r\n            class=\"lg:col-span-6 flex flex-col justify-between space-y-5\"\r\n          >\r\n\r\n            <div>\r\n\r\n              <span\r\n                id=\"modalClientBadge\"\r\n                class=\"inline-block text-[10.5px] font-bold text-[#a06a3a] bg-[#f4eee8] px-2.5 py-0.5 rounded-full mb-2\"\r\n              ><\/span>\r\n\r\n\r\n              <h3\r\n                id=\"modalTitle\"\r\n                class=\"text-xl sm:text-2xl font-extrabold text-[#231b15] tracking-tight leading-snug\"\r\n              ><\/h3>\r\n\r\n\r\n              <p\r\n                id=\"modalSubtitle\"\r\n                class=\"text-xs sm:text-sm text-stone-600 mt-2.5 leading-relaxed\"\r\n              ><\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- METRICS -->\r\n\r\n            <div\r\n              class=\"grid grid-cols-4 gap-2 bg-[#fbf9f6] p-3.5 rounded-2xl border border-[#efe7df]\"\r\n            >\r\n\r\n              <div class=\"text-center\">\r\n\r\n                <p\r\n                  class=\"text-[10px] text-stone-400 font-semibold uppercase tracking-wider\"\r\n                >\r\n                  LB\r\n                <\/p>\r\n\r\n                <p\r\n                  id=\"modalLB\"\r\n                  class=\"text-xs sm:text-sm font-extrabold text-[#4a382c] mt-0.5\"\r\n                >\r\n                  -\r\n                <\/p>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"text-center border-l border-stone-200\">\r\n\r\n                <p\r\n                  class=\"text-[10px] text-stone-400 font-semibold uppercase tracking-wider\"\r\n                >\r\n                  LT\r\n                <\/p>\r\n\r\n                <p\r\n                  id=\"modalLT\"\r\n                  class=\"text-xs sm:text-sm font-extrabold text-[#4a382c] mt-0.5\"\r\n                >\r\n                  -\r\n                <\/p>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"text-center border-l border-stone-200\">\r\n\r\n                <p\r\n                  class=\"text-[10px] text-stone-400 font-semibold uppercase tracking-wider\"\r\n                >\r\n                  Tahun\r\n                <\/p>\r\n\r\n                <p\r\n                  id=\"modalTahun\"\r\n                  class=\"text-xs sm:text-sm font-extrabold text-[#4a382c] mt-0.5\"\r\n                >\r\n                  -\r\n                <\/p>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"text-center border-l border-stone-200\">\r\n\r\n                <p\r\n                  class=\"text-[10px] text-stone-400 font-semibold uppercase tracking-wider\"\r\n                >\r\n                  Status\r\n                <\/p>\r\n\r\n                <span\r\n                  id=\"modalStatus\"\r\n                  class=\"inline-block text-[11px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-200\/80 px-2 py-0.5 rounded-md mt-0.5\"\r\n                >\r\n                  Selesai\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- ACTION -->\r\n\r\n            <div class=\"flex items-center gap-3 pt-1\">\r\n\r\n              <a id=\"modalWaBtn\" href=\"https:\/\/wa.me\/\" target=\"_blank\" class=\"flex-1 bg-[#4a382c] hover:bg-[#34271f] text-white text-xs font-semibold py-3 px-4 rounded-xl text-center shadow-md shadow-stone-800\/10 hover:shadow-lg transition-all flex items-center justify-center gap-2\" rel=\"noopener\">\r\n\r\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i>\r\n\r\n                Konsultasi Proyek Ini\r\n\r\n              <\/a>\r\n\r\n\r\n              <button\r\n                onclick=\"navigator.clipboard.writeText(window.location.href); alert('Tautan disalin!');\"\r\n                class=\"border border-stone-300 hover:bg-stone-50 text-stone-700 text-xs font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-1.5 transition shadow-sm\"\r\n              >\r\n\r\n                <i class=\"fa-regular fa-share-from-square text-xs\"><\/i>\r\n\r\n              <\/button>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- MAIN IMAGE -->\r\n\r\n          <div class=\"lg:col-span-6\">\r\n\r\n            <div\r\n              class=\"relative rounded-2xl overflow-hidden bg-stone-100 border border-stone-200\/80 shadow-sm aspect-[4\/3]\"\r\n            >\r\n\r\n              <img decoding=\"async\"\r\n                id=\"mainPreviewImg\"\r\n                src=\"\"\r\n                alt=\"Detail Proyek\"\r\n                class=\"w-full h-full object-cover\"\r\n              \/>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <hr class=\"border-stone-100\" \/>\r\n\r\n\r\n\r\n        <!-- DESCRIPTION -->\r\n\r\n        <div class=\"space-y-3\">\r\n\r\n          <h4\r\n            class=\"font-bold text-stone-900 text-sm flex items-center gap-2\"\r\n          >\r\n\r\n            <i class=\"fa-solid fa-circle-info text-[#4a382c]\"><\/i>\r\n\r\n            Deskripsi Lengkap Proyek\r\n\r\n          <\/h4>\r\n\r\n\r\n          <div\r\n            class=\"bg-stone-50\/70 p-5 rounded-2xl border border-stone-200\/60 text-xs text-stone-600 leading-relaxed space-y-2.5\"\r\n          >\r\n\r\n            <p id=\"modalDesc1\"><\/p>\r\n\r\n            <p id=\"modalDesc2\"><\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- GALLERY -->\r\n\r\n        <div class=\"space-y-3\">\r\n\r\n          <h4\r\n            class=\"font-bold text-stone-900 text-sm flex items-center gap-2\"\r\n          >\r\n\r\n            <i class=\"fa-solid fa-images text-[#4a382c]\"><\/i>\r\n\r\n            Galeri Foto Proyek\r\n\r\n          <\/h4>\r\n\r\n\r\n          <div\r\n            id=\"modalAllGallery\"\r\n            class=\"grid grid-cols-2 sm:grid-cols-4 gap-3.5\"\r\n          ><\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       JAVASCRIPT\r\n       ===================================================== -->\r\n\r\n  <script>\r\n\r\n    const projectsData = [\r\n\r\n      \/* =========================\r\n         PROYEK 1\r\n      ========================== *\/\r\n\r\n      {\r\n\r\n        category: \"Rumah Tinggal\",\r\n\r\n        categoryIcon: \"fa-house-chimney\",\r\n\r\n        clientName: \"Proyek Mr. J\",\r\n\r\n        location: \"Tapos, Depok\",\r\n\r\n        title: \"Pembangunan Rumah 2 Lantai Modern\",\r\n\r\n        subtitle:\r\n          \"Pembangunan hunian modern minimalis yang memaksimalkan sirkulasi udara dan pencahayaan alami dengan finishing material premium standar tinggi.\",\r\n\r\n        lb: \"160 m\u00b2\",\r\n\r\n        lt: \"150 m\u00b2\",\r\n\r\n        tahun: \"2023\",\r\n\r\n        status: \"Selesai\",\r\n\r\n        desc1:\r\n          \"Proyek rumah 2 lantai ini mengusung konsep modern minimalis dengan tampilan fasad yang clean, elegan, dan tegas. Desainnya memadukan bentuk geometris bertingkat pada bagian atap dan balkon, dengan komposisi garis yang sederhana namun tetap memberikan karakter pada tampilan depan rumah.\",\r\n\r\n        desc2:\r\n          \"Bagian lantai dua dilengkapi balkon terbuka dengan area tanaman yang memberikan kesan lebih hidup dan natural. Bukaan jendela dibuat cukup lebar untuk menghadirkan pencahayaan alami sekaligus memperkuat kesan modern. Area depan dilengkapi carport luas, pagar minimalis, serta akses terpisah menuju pintu utama. Secara keseluruhan, rumah dirancang dengan gaya yang modern, simpel, dan fungsional, namun tetap memiliki tampilan yang berkelas dan nyaman sebagai hunian keluarga.\",\r\n\r\n        images: [\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj10.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj3.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj1.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj4.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj5.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj6.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj7.jpg\",\r\n\r\n          \"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/mrj8.jpg\"\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =========================\r\n         PROYEK 2\r\n      ========================== *\/\r\n\r\n      {\r\n\r\n        category: \"Ruko & Komersial\",\r\n\r\n        categoryIcon: \"fa-shop\",\r\n\r\n        clientName: \"Proyek Bpk. Hendra\",\r\n\r\n        location: \"Cileungsi, Bogor\",\r\n\r\n        title: \"Pembangunan Komplek Ruko 3 Unit\",\r\n\r\n        subtitle:\r\n          \"Proyek pembangunan komersial 3 unit ruko 2 lantai di jalur bisnis strategis dengan konstruksi heavy-duty dan area parkir lega.\",\r\n\r\n        lb: \"360 m\u00b2\",\r\n\r\n        lt: \"6 Bulan\",\r\n\r\n        tahun: \"2024\",\r\n\r\n        status: \"Selesai\",\r\n\r\n        desc1:\r\n          \"Pembangunan unit ruko komersial ini mengutamakan ketahanan struktur bentang lebar tanpa tiang tengah, memudahkan fleksibilitas layout untuk berbagai jenis usaha seperti retail, kantor cabang, maupun kafe.\",\r\n\r\n        desc2:\r\n          \"Setiap unit dilengkapi rolling door elektrik, kamar mandi terpisah di setiap lantai, dan instalasi toren cadangan air mandiri.\",\r\n\r\n        images: [\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1577495508048-b635879837f1?auto=format&fit=crop&w=800&q=80\",\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80\",\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80\",\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=800&q=80\"\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =========================\r\n         PROYEK 3\r\n      ========================== *\/\r\n\r\n      {\r\n\r\n        category: \"Rumah Tinggal\",\r\n\r\n        categoryIcon: \"fa-house\",\r\n\r\n        clientName: \"Proyek Bpk. Rizky\",\r\n\r\n        location: \"Jonggol, Bogor\",\r\n\r\n        title: \"Pembangunan Rumah 1 Lantai Tropis\",\r\n\r\n        subtitle:\r\n          \"Konstruksi rumah tinggal compact 1 lantai yang efisien, asri, dengan sirkulasi udara optimal dan bukaan jendela maksimal.\",\r\n\r\n        lb: \"90 m\u00b2\",\r\n\r\n        lt: \"3.5 Bulan\",\r\n\r\n        tahun: \"2024\",\r\n\r\n        status: \"Selesai\",\r\n\r\n        desc1:\r\n          \"Proyek ini dirancang untuk pasangan muda yang menginginkan hunian efisien namun terasa lega. Menggunakan atap miring tropis tinggi untuk meredam suhu panas khas Jonggol.\",\r\n\r\n        desc2:\r\n          \"Material lantai granit 60x60, kusen aluminium powder coating tahan cuaca, serta taman depan dan belakang terhubung langsung.\",\r\n\r\n        images: [\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1541888946425-d0fbb18086f6?auto=format&fit=crop&w=800&q=80\",\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=800&q=80\",\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1502005229762-cf1b2da7c5d6?auto=format&fit=crop&w=800&q=80\",\r\n\r\n          \"https:\/\/images.unsplash.com\/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=800&q=80\"\r\n\r\n        ]\r\n\r\n      }\r\n\r\n    ];\r\n\r\n\r\n    \/* =====================================================\r\n       MODAL ELEMENT\r\n    ===================================================== *\/\r\n\r\n    const modal =\r\n      document.getElementById('projectModal');\r\n\r\n    const previewImg =\r\n      document.getElementById('mainPreviewImg');\r\n\r\n\r\n    \/* =====================================================\r\n       OPEN PROJECT MODAL\r\n    ===================================================== *\/\r\n\r\n    function openProjectModal(index) {\r\n\r\n      const data = projectsData[index];\r\n\r\n      if (!data) return;\r\n\r\n\r\n      document.getElementById('modalCategory').innerHTML =\r\n        `<i class=\"fa-solid ${data.categoryIcon} text-[10px]\"><\/i> ${data.category}`;\r\n\r\n\r\n      document.getElementById('modalLocation').innerHTML =\r\n        `<i class=\"fa-solid fa-location-dot text-[#c49265]\"><\/i> ${data.location}`;\r\n\r\n\r\n      document.getElementById('modalClientBadge').textContent =\r\n        data.clientName;\r\n\r\n\r\n      document.getElementById('modalTitle').textContent =\r\n        data.title;\r\n\r\n\r\n      document.getElementById('modalSubtitle').textContent =\r\n        data.subtitle;\r\n\r\n\r\n      document.getElementById('modalLB').textContent =\r\n        data.lb;\r\n\r\n\r\n      document.getElementById('modalLT').textContent =\r\n        data.lt;\r\n\r\n\r\n      document.getElementById('modalTahun').textContent =\r\n        data.tahun;\r\n\r\n\r\n      document.getElementById('modalStatus').textContent =\r\n        data.status;\r\n\r\n\r\n      previewImg.src =\r\n        data.images[0];\r\n\r\n\r\n      document.getElementById('modalDesc1').textContent =\r\n        data.desc1;\r\n\r\n\r\n      document.getElementById('modalDesc2').textContent =\r\n        data.desc2;\r\n\r\n\r\n      const waMessage =\r\n        encodeURIComponent(\r\n          `Halo SanFai Kontraktor, saya tertarik ingin konsultasi mengenai proyek \"${data.title}\" di ${data.location}.`\r\n        );\r\n\r\n\r\n      document.getElementById('modalWaBtn').href =\r\n        `https:\/\/wa.me\/6281234567890?text=${waMessage}`;\r\n\r\n\r\n      const galleryContainer =\r\n        document.getElementById('modalAllGallery');\r\n\r\n\r\n      galleryContainer.innerHTML = '';\r\n\r\n\r\n      data.images.forEach((imgSrc) => {\r\n\r\n        const galItem =\r\n          document.createElement('div');\r\n\r\n\r\n        galItem.className =\r\n          'rounded-xl overflow-hidden bg-stone-100 border border-stone-200 aspect-[4\/3] group shadow-sm';\r\n\r\n\r\n        galItem.innerHTML =\r\n          `<img decoding=\"async\" src=\"${imgSrc}\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-300\" \/>`;\r\n\r\n\r\n        galleryContainer.appendChild(galItem);\r\n\r\n      });\r\n\r\n\r\n      modal.classList.remove('hidden');\r\n\r\n      document.body.style.overflow = 'hidden';\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       CLOSE MODAL\r\n    ===================================================== *\/\r\n\r\n    function closeModal() {\r\n\r\n      modal.classList.add('hidden');\r\n\r\n      document.body.style.overflow = 'auto';\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       CLOSE BACKDROP\r\n    ===================================================== *\/\r\n\r\n    modal.addEventListener('click', (e) => {\r\n\r\n      if (e.target === modal) {\r\n\r\n        closeModal();\r\n\r\n      }\r\n\r\n    });\r\n\r\n\r\n    \/* =====================================================\r\n       ESCAPE\r\n    ===================================================== *\/\r\n\r\n    document.addEventListener('keydown', (e) => {\r\n\r\n      if (\r\n        e.key === 'Escape' &&\r\n        !modal.classList.contains('hidden')\r\n      ) {\r\n\r\n        closeModal();\r\n\r\n      }\r\n\r\n    });\r\n\r\n  <\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5692992 e-con e-atomic-element e-flexbox-base e-e9cd7ff \" data-id=\"5692992\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5692992\">\n    \t\t<div class=\"elementor-element elementor-element-cb33ee4 elementor-widget elementor-widget-html\" data-id=\"cb33ee4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n\r\n  \/* RESET & KONSISTENSI UKURAN LEBAR FULL SCREEN *\/\r\n  html, body {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    width: 100% !important;\r\n    overflow-x: hidden !important;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  *, *:before, *:after {\r\n    box-sizing: inherit;\r\n  }\r\n\r\n  \/* WRAPPER UTAMA FOOTER (Gradasi Coklat Gelap ke Coksu) *\/\r\n  .sanfai-footer-wrapper {\r\n    width: 100vw !important;\r\n    position: relative !important;\r\n    left: 50% !important;\r\n    right: 50% !important;\r\n    margin-left: -50vw !important;\r\n    margin-right: -50vw !important;\r\n    background: linear-gradient(135deg, #3B2A1E 0%, #4D3728 50%, #6E533F 100%);\r\n    color: #ffffff;\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    padding: 50px 40px 25px 40px;\r\n    box-shadow: none !important;\r\n    border: none !important;\r\n    border-radius: 0 !important;\r\n  }\r\n\r\n  \/* GRID UTAMA DISESUAIKAN MENJADI 4 KOLOM YANG SEIMBANG *\/\r\n  .sanfai-footer-container {\r\n    display: grid;\r\n    grid-template-columns: 1.4fr 0.9fr 1.3fr 1.6fr;\r\n    gap: 25px;\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    align-items: start;\r\n  }\r\n\r\n  .sanfai-footer-col {\r\n    min-width: 0;\r\n  }\r\n\r\n  \/* Kolom 1: Logo & Deskripsi *\/\r\n  .sanfai-footer-col-brand .sanfai-footer-logo {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .sanfai-footer-logo img {\r\n    height: 34px;\r\n    width: auto;\r\n    object-fit: contain;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .sanfai-footer-logo-text {\r\n    font-size: 17px;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    line-height: 1.1;\r\n  }\r\n\r\n  .sanfai-footer-logo-text span {\r\n    display: block;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    color: #E8DCC4;\r\n  }\r\n\r\n  .sanfai-footer-col-brand p {\r\n    font-size: 11.5px;\r\n    color: #F5EFEB;\r\n    line-height: 1.5;\r\n    margin: 0 0 15px 0;\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* Sosial Media Ikon *\/\r\n  .sanfai-footer-socials {\r\n    display: flex;\r\n    gap: 8px;\r\n  }\r\n\r\n  .sanfai-social-icon {\r\n    width: 28px;\r\n    height: 28px;\r\n    border-radius: 50%;\r\n    background: #ffffff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-decoration: none;\r\n    transition: background 0.2s, transform 0.2s;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .sanfai-social-icon svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    fill: #3B2A1E;\r\n    transition: fill 0.2s;\r\n  }\r\n\r\n  .sanfai-social-icon:hover {\r\n    background: #D9B48A;\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .sanfai-social-icon:hover svg {\r\n    fill: #ffffff;\r\n  }\r\n\r\n  \/* Heading Kolom Lainnya *\/\r\n  .sanfai-footer-col h4 {\r\n    font-size: 13.5px;\r\n    font-weight: 700;\r\n    color: #ffffff;\r\n    margin: 0 0 12px 0;\r\n    letter-spacing: -0.2px;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  \/* List Tautan \/ Menu *\/\r\n  .sanfai-footer-col ul {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n  }\r\n\r\n  .sanfai-footer-col ul li a {\r\n    font-size: 11.5px;\r\n    color: #F5EFEB;\r\n    text-decoration: none;\r\n    transition: color 0.2s;\r\n    font-weight: 400;\r\n    display: block;\r\n  }\r\n\r\n  .sanfai-footer-col ul li a:hover {\r\n    color: #D9B48A;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  \/* Kontak List *\/\r\n  .sanfai-footer-contact-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n\r\n  .sanfai-footer-contact-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 6px;\r\n    font-size: 11.5px;\r\n    color: #F5EFEB;\r\n    line-height: 1.4;\r\n    word-break: break-word;\r\n  }\r\n\r\n  .sanfai-footer-contact-item svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    fill: #D9B48A;\r\n    flex-shrink: 0;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  \/* Kolom Peta Lokasi Kami *\/\r\n  .sanfai-footer-map-box {\r\n    background: #ffffff;\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n    padding: 3px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  .sanfai-footer-map-box iframe {\r\n    width: 100%;\r\n    height: 95px;\r\n    border: 0;\r\n    border-radius: 7px;\r\n    display: block;\r\n  }\r\n\r\n  .sanfai-map-btn-container {\r\n    padding: 5px;\r\n    text-align: center;\r\n  }\r\n\r\n  .sanfai-map-btn {\r\n    background-color: #3B2A1E;\r\n    color: #ffffff;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    padding: 5px 10px;\r\n    border-radius: 5px;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    transition: background 0.2s;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .sanfai-map-btn:hover {\r\n    background-color: #6E533F;\r\n  }\r\n\r\n  \/* Garis Pemisah Bawah *\/\r\n  .sanfai-footer-divider {\r\n    max-width: 1300px;\r\n    margin: 30px auto 15px auto;\r\n    border: none;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.15);\r\n  }\r\n\r\n  \/* Hak Cipta & Link Bawah *\/\r\n  .sanfai-footer-bottom {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    font-size: 11px;\r\n    color: #E8DCC4;\r\n  }\r\n\r\n  .sanfai-footer-bottom-links {\r\n    display: flex;\r\n    gap: 12px;\r\n  }\r\n\r\n  .sanfai-footer-bottom-links a {\r\n    color: #E8DCC4;\r\n    text-decoration: none;\r\n  }\r\n\r\n  .sanfai-footer-bottom-links a:hover {\r\n    color: #ffffff;\r\n  }\r\n\r\n  \/* ========================================================\r\n     RESPONSIF HP\/TABLET: 4 KOLOM TETAP BERJEJER KE SAMPING\r\n     ======================================================== *\/\r\n  @media (max-width: 768px) {\r\n    .sanfai-footer-wrapper {\r\n      padding: 20px 8px 15px 8px;\r\n    }\r\n    .sanfai-footer-container {\r\n      gap: 10px;\r\n    }\r\n    .sanfai-footer-col h4 {\r\n      font-size: 10.5px;\r\n      margin-bottom: 6px;\r\n    }\r\n    .sanfai-footer-logo img {\r\n      height: 26px;\r\n    }\r\n    .sanfai-footer-logo-text {\r\n      font-size: 12px;\r\n    }\r\n    .sanfai-footer-logo-text span {\r\n      font-size: 8.5px;\r\n    }\r\n    .sanfai-footer-col-brand p,\r\n    .sanfai-footer-col ul li a,\r\n    .sanfai-footer-contact-item {\r\n      font-size: 9px;\r\n      line-height: 1.35;\r\n    }\r\n    .sanfai-footer-socials {\r\n      gap: 4px;\r\n    }\r\n    .sanfai-social-icon {\r\n      width: 22px;\r\n      height: 22px;\r\n    }\r\n    .sanfai-social-icon svg {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n    .sanfai-footer-map-box iframe {\r\n      height: 55px;\r\n    }\r\n    .sanfai-map-btn {\r\n      font-size: 8px;\r\n      padding: 3px 6px;\r\n    }\r\n    .sanfai-footer-bottom {\r\n      font-size: 9px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .sanfai-footer-wrapper {\r\n      padding: 15px 5px 10px 5px;\r\n    }\r\n    .sanfai-footer-container {\r\n      gap: 6px;\r\n    }\r\n    .sanfai-footer-col h4 {\r\n      font-size: 9px;\r\n      margin-bottom: 5px;\r\n    }\r\n    .sanfai-footer-logo img {\r\n      height: 22px;\r\n    }\r\n    .sanfai-footer-logo-text {\r\n      font-size: 10.5px;\r\n    }\r\n    .sanfai-footer-col-brand p,\r\n    .sanfai-footer-col ul li a,\r\n    .sanfai-footer-contact-item {\r\n      font-size: 8px;\r\n      line-height: 1.3;\r\n    }\r\n    .sanfai-footer-bottom {\r\n      flex-direction: column;\r\n      gap: 4px;\r\n      text-align: center;\r\n      font-size: 8px;\r\n    }\r\n    .sanfai-footer-divider {\r\n      margin: 12px auto 8px auto;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- STRUKTUR HTML FOOTER -->\r\n<footer class=\"sanfai-footer-wrapper\">\r\n  <div class=\"sanfai-footer-container\">\r\n    \r\n    <!-- Kolom 1: Logo & Tentang -->\r\n    <div class=\"sanfai-footer-col sanfai-footer-col-brand\">\r\n      <div class=\"sanfai-footer-logo\">\r\n        <!-- Logo Putih Baru dari URL -->\r\n        <img decoding=\"async\" src=\"https:\/\/sanfai.co.id\/wp-content\/uploads\/2026\/08\/sanfaifikslogo.png\" alt=\"SanFai Property Logo\">\r\n        <div class=\"sanfai-footer-logo-text\">\r\n          SanFai <span>Kontraktor<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <p>SanFai Kontraktor hadir sebagai solusi jasa konstruksi profesional untuk mewujudkan bangunan berkualitas, dengan layanan terpercaya dan jangkauan pengerjaan di seluruh wilayah Jabodetabek.<\/p>\r\n      \r\n      <!-- Sosial Media dengan Ikon SVG -->\r\n      <div class=\"sanfai-footer-socials\">\r\n        <!-- Facebook -->\r\n        <a href=\"https:\/\/www.facebook.com\/profile.php?id=61561931740780\" class=\"sanfai-social-icon\" title=\"Facebook\" target=\"_blank\" rel=\"noopener\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12c0-5.523-4.477-10-10-10z\"\/><\/svg>\r\n        <\/a>\r\n        <!-- Instagram -->\r\n        <a href=\"https:\/\/www.instagram.com\/sanfai_kontraktor\/\" class=\"sanfai-social-icon\" title=\"Instagram\" target=\"_blank\" rel=\"noopener\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\r\n        <\/a>\r\n        <!-- YouTube -->\r\n        <a href=\"https:\/\/www.youtube.com\/@SanFaiKontraktor\" class=\"sanfai-social-icon\" title=\"YouTube\" target=\"_blank\" rel=\"noopener\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\/><\/svg>\r\n        <\/a>\r\n        <!-- TikTok -->\r\n        <a href=\"https:\/\/www.tiktok.com\/@sanfaikontraktor\" class=\"sanfai-social-icon\" title=\"TikTok\" target=\"_blank\" rel=\"noopener\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Kolom 2: Menu -->\r\n    <div class=\"sanfai-footer-col\">\r\n      <h4>Menu<\/h4>\r\n      <ul>\r\n        <li><a href=\"https:\/\/sanfai.site\/\">Menu Utama<\/a><\/li>\r\n        <li><a href=\"#tentang\">Portofolio<\/a><\/li\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Kolom 3: Kontak -->\r\n    <div class=\"sanfai-footer-col\">\r\n      <h4>Kontak<\/h4>\r\n      <div class=\"sanfai-footer-contact-list\">\r\n        <div class=\"sanfai-footer-contact-item\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n          <span>0811-9787-220<\/span>\r\n        <\/div>\r\n        <div class=\"sanfai-footer-contact-item\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-8V6l8 5 8-5v2z\"\/><\/svg>\r\n          <span>sanfaikontraktor86@gmail.com<\/span>\r\n        <\/div>\r\n        <div class=\"sanfai-footer-contact-item\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\r\n          <span>Jl. Meran Gg. Salpinah No.rt 005\/005, Cilodong, Kota Depok, Jawa Barat 16414<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Kolom 4: Lokasi Kami (Google Maps Embed) -->\r\n    <div class=\"sanfai-footer-col sanfai-footer-col-map\">\r\n      <h4>Lokasi Kami<\/h4>\r\n      <div class=\"sanfai-footer-map-box\">\r\n        <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d574.9676303867442!2d106.83769966140103!3d-6.429755676358177!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ebf4433ba673%3A0x6db4dd5229e8dcd4!2sGriya%20Fairus%20Ar%20Rahman!5e1!3m2!1sid!2sid!4v1785204208002!5m2!1sid!2sid\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\r\n        <div class=\"sanfai-map-btn-container\">\r\n          <a href=\"https:\/\/maps.app.goo.gl\/95bW32N9r47J7H3X9\" target=\"_blank\" class=\"sanfai-map-btn\" rel=\"noopener\">Lihat di Google Maps<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Garis Pemisah -->\r\n  <hr class=\"sanfai-footer-divider\">\r\n\r\n  <!-- Bagian Hak Cipta & Link Privasi -->\r\n  <div class=\"sanfai-footer-bottom\">\r\n    <div class=\"sanfai-footer-copyright\">\r\n      \u00a9 2026 SanFai Property. All Rights Reserved.\r\n    <\/div>\r\n    <div class=\"sanfai-footer-bottom-links\">\r\n      <a href=\"#\">Kebijakan Privasi<\/a>\r\n      <span>|<\/span>\r\n      <a href=\"#\">Syarat & Ketentuan<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/footer>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SanFai Kontraktor by SanFai Property Menu Utama Portofolio Kontak SanFai Kontraktor by SanFai Property Jasa kontraktor profesional terpercaya di Jabodetabek untuk pembangunan hunian, kantor, dan ruang usaha dari nol hingga serah terima kunci. Mengutamakan standar kualitas tinggi, ketepatan jadwal, serta presisi di setiap detailnya. Konsultasi Gratis Kualitas Terjamin Material pilihan &amp; standar konstruksi terbaik Tepat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2544","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sanfai.site\/index.php?rest_route=\/wp\/v2\/pages\/2544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sanfai.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sanfai.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sanfai.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sanfai.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2544"}],"version-history":[{"count":214,"href":"https:\/\/sanfai.site\/index.php?rest_route=\/wp\/v2\/pages\/2544\/revisions"}],"predecessor-version":[{"id":3025,"href":"https:\/\/sanfai.site\/index.php?rest_route=\/wp\/v2\/pages\/2544\/revisions\/3025"}],"wp:attachment":[{"href":"https:\/\/sanfai.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}