
<?php $__env->startSection('title', 'Sertifikat Hak Milik || KLINIK PKP JAWA 3'); ?>

<?php $__env->startSection('content'); ?>
    <style>
        /* Base styles with theme transitions */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        :root {
            --primary-color: #667eea;
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-color: #4facfe;
            --secondary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --accent-color: #f093fb;
            --accent-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-color: #43e97b;
            --warning-color: #ffeaa7;
            --text-dark: #2d3748;
            --text-light: #718096;
            --bg-light: #f7fafc;
            --bg-white: #ffffff;
            --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 15px 35px rgba(0, 0, 0, 0.15);
            --border-light: #e2e8f0;
            --modal-bg: #ffffff;
            --card-bg: #ffffff;
        }

        /* Dark Mode Variables */
        [data-theme="dark"] {
            --text-dark: #f7fafc;
            --text-light: #cbd5e1;
            --bg-light: #0f172a;
            --bg-white: #1e293b;
            --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.3);
            --shadow-medium: 0 15px 35px rgba(0, 0, 0, 0.4);
            --border-light: #334155;
            --modal-bg: #1e293b;
            --card-bg: #1e293b;
        }

        /* Smooth transition for theme changes */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #178ee3 100%);
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 4rem 2rem;
        }

        [data-theme="dark"] .hero-section {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 4rem;
            align-items: center;
            color: white;
        }

        .hero-text {
            max-width: 600px;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            background: linear-gradient(45deg, #ffffff, #e2e8f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        [data-theme="dark"] .hero-title {
            background: linear-gradient(45deg, #f1f5f9, #cbd5e1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-description {
            font-size: 1.25rem;
            line-height: 1.8;
            margin-bottom: 2rem;
            opacity: 0.95;
        }

        [data-theme="dark"] .hero-description {
            color: #e2e8f0;
        }

        .hero-meta {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            font-size: 1.125rem;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .meta-link {
            color: #ffd89b;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s ease;
        }

        .meta-link:hover {
            border-bottom-color: #ffd89b;
            color: #ffd89b;
        }

        [data-theme="dark"] .meta-link {
            color: #fbbf24;
        }

        [data-theme="dark"] .meta-link:hover {
            border-bottom-color: #fbbf24;
            color: #fbbf24;
        }

        .hero-visual {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .certificate-visual {
            width: 300px;
            height: 400px;
            background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
            border-radius: 20px;
            position: relative;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transform: perspective(1000px) rotateY(-10deg);
            transition: transform 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        [data-theme="dark"] .certificate-visual {
            background: linear-gradient(145deg, #667eea, #764ba2);
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
            border-color: rgba(102, 126, 234, 0.3);
        }

        .certificate-visual:hover {
            transform: perspective(1000px) rotateY(0deg) scale(1.05);
        }

        [data-theme="dark"] .certificate-visual:hover {
            box-shadow: 0 25px 50px rgba(102, 126, 234, 0.5);
        }

        .cert-corner {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ffd700;
            border-radius: 50%;
        }

        .cert-corner.top-left {
            top: 20px;
            left: 20px;
        }

        .cert-corner.top-right {
            top: 20px;
            right: 20px;
        }

        .cert-corner.bottom-left {
            bottom: 20px;
            left: 20px;
        }

        .cert-corner.bottom-right {
            bottom: 20px;
            right: 20px;
        }

        .cert-lines {
            position: absolute;
            top: 80px;
            left: 40px;
            right: 40px;
        }

        .cert-line {
            height: 3px;
            background: linear-gradient(90deg, #666, #888);
            margin-bottom: 15px;
            border-radius: 2px;
        }

        .cert-line:nth-child(1) {
            width: 80%;
        }

        .cert-line:nth-child(2) {
            width: 90%;
        }

        .cert-line:nth-child(3) {
            width: 70%;
        }

        .cert-line:nth-child(4) {
            width: 85%;
        }

        .cert-line:nth-child(5) {
            width: 60%;
        }

        .cert-signature {
            position: absolute;
            bottom: 80px;
            left: 40px;
            right: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .signature-line {
            width: 80px;
            height: 2px;
            background: #888;
            position: relative;
        }

        .signature-line::after {
            content: '';
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%;
            height: 20px;
            background: url('data:image/svg+xml,<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"><path d="M5,15 Q25,5 45,10 T85,8" stroke="%23white" stroke-width="2" fill="none"/></svg>');
        }

        .cert-seal {
            width: 50px;
            height: 50px;
            background: radial-gradient(circle, #ffd700, #ff8c00);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            position: relative;
        }

        .cert-seal::before {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            border: 2px solid #fff;
            border-radius: 50%;
        }

        /* Main Content */
        .content-section {
            padding: 6rem 2rem;
            background: var(--bg-light);
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Importance Section */
        .importance-section {
            margin-bottom: 5rem;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--text-dark);
            text-align: center;
            margin-bottom: 3rem;
        }

        .importance-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .importance-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: var(--shadow-soft);
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-light);
        }

        .importance-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-medium);
        }

        [data-theme="dark"] .importance-card:hover {
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
        }

        .importance-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary-gradient);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .importance-card:hover::before {
            transform: scaleX(1);
        }

        .importance-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            margin: 0 auto 1.5rem;
        }

        .importance-icon.legal {
            background: var(--primary-gradient);
        }

        .importance-icon.protection {
            background: var(--secondary-gradient);
        }

        .importance-icon.collateral {
            background: var(--accent-gradient);
        }

        .importance-icon.transaction {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .importance-icon.law {
            background: linear-gradient(135deg, #ffeaa7 0%, #ff6b6b 100%);
        }

        .importance-icon.administration {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        .importance-title {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .importance-description {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-light);
        }

        /* Process Section */
        .process-section {
            margin-bottom: 5rem;
        }

        .process-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 3rem;
        }

        .process-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: var(--shadow-soft);
            position: relative;
            transition: all 0.3s ease;
            border: 1px solid var(--border-light);
        }

        .process-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-medium);
        }

        [data-theme="dark"] .process-card:hover {
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
        }

        .process-number {
            position: absolute;
            top: -15px;
            left: 30px;
            width: 40px;
            height: 40px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: white;
            font-size: 1.125rem;
            box-shadow: var(--shadow-soft);
        }

        .process-icon {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            background: var(--secondary-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1.5rem;
        }

        .process-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .process-description {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-light);
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #667eea 0%, #178ee3 100%);
            border-radius: 30px;
            padding: 4rem 3rem;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        [data-theme="dark"] .cta-section {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(102, 126, 234, 0.3);
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat;
            background-size: cover;
        }

        .cta-content {
            position: relative;
            z-index: 1;
        }

        .cta-title {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        [data-theme="dark"] .cta-title {
            color: #f1f5f9;
        }

        .cta-description {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.95;
        }

        [data-theme="dark"] .cta-description {
            color: #e2e8f0;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-primary,
        .btn-secondary {
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }

        .btn-primary {
            background: var(--bg-white);
            color: var(--primary-color);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: var(--bg-light);
        }

        [data-theme="dark"] .btn-primary {
            background: var(--card-bg);
            border: 1px solid rgba(102, 126, 234, 0.3);
        }

        [data-theme="dark"] .btn-primary:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
        color: var(--primary-color);
        text-decoration: none;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            color: white;
            text-decoration: none;
        }

        /* Chat Widget */
        .chat-widget {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

        .chat-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            border: none;
            cursor: pointer;
            box-shadow: var(--shadow-medium);
            transition: all 0.3s ease;
        }

        .chat-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }

            .certificate-visual {
                width: 250px;
                height: 320px;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-description {
                font-size: 1.125rem;
            }

            .certificate-visual {
                width: 200px;
                height: 260px;
                transform: none;
            }

            .certificate-visual:hover {
                transform: scale(1.05);
            }

            .process-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .cta-section {
                padding: 3rem 2rem;
            }

            .cta-title {
                font-size: 2rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .chat-widget {
                bottom: 1rem;
                right: 1rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.2s;
        }

        .delay-3 {
            animation-delay: 0.3s;
        }

        .delay-4 {
            animation-delay: 0.4s;
        }

        .delay-5 {
            animation-delay: 0.5s;
        }

        .delay-6 {
            animation-delay: 0.6s;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: var(--modal-bg);
            border-radius: 20px;
            padding: 0;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            transform: scale(0.8) translateY(-50px);
            transition: all 0.3s ease;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-light);
        }

        [data-theme="dark"] .modal-content {
            border-color: rgba(102, 126, 234, 0.3);
            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
        }

        .modal-overlay.active .modal-content {
            transform: scale(1) translateY(0);
        }

        .modal-header {
            background: var(--primary-gradient);
            color: white;
            padding: 2rem;
            border-radius: 20px 20px 0 0;
            position: relative;
            text-align: center;
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.25rem;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .modal-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 1rem;
            background: var(--bg-white);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border-light);
        }

        [data-theme="dark"] .modal-logo {
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.1);
        }
        }

        .modal-logo img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        .modal-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .modal-subtitle {
            font-size: 1rem;
            opacity: 0.9;
        }

        .modal-body {
            padding: 2rem;
            background: var(--card-bg);
        }

        .modal-description {
            font-size: 1.125rem;
            line-height: 1.7;
            color: var(--text-light);
            margin-bottom: 2rem;
            text-align: justify;
        }

        [data-theme="dark"] .modal-description {
            color: var(--text-light);
        }

        .modal-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--primary-gradient);
            color: white;
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
            justify-content: center;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
            color: white;
            text-decoration: none;
        }

        /* BPN Logo CSS Art */
        .bpn-logo {
            width: 60px;
            height: 60px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bpn-shield {
            width: 50px;
            height: 60px;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
            border-radius: 8px 8px 50% 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .bpn-shield::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 20px;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border-radius: 4px;
        }

        .bpn-shield::after {
            content: '';
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 16px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 2px;
        }

        /* PPAT Logo CSS Art */
        .ppat-logo {
            width: 60px;
            height: 60px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ppat-document {
            width: 45px;
            height: 55px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 6px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 2px solid #cbd5e1;
        }

        .ppat-document::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            height: 3px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }

        .ppat-document::after {
            content: '';
            position: absolute;
            top: 16px;
            left: 8px;
            right: 12px;
            height: 2px;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 1px;
        }

        .ppat-seal {
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 16px;
            height: 16px;
            background: radial-gradient(circle, #ef4444, #dc2626);
            border-radius: 50%;
            border: 2px solid #fef2f2;
        }

        .ppat-signature {
            position: absolute;
            bottom: 16px;
            left: 8px;
            right: 24px;
            height: 2px;
            background: linear-gradient(90deg, #374151, transparent);
            border-radius: 1px;
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content fade-in-up">
            <div class="hero-text">
                <h1 class="hero-title">Sertifikat Hak Milik</h1>
                <p class="hero-description">
                    Sertifikat Hak Milik (SHM) adalah dokumen resmi yang menunjukkan bahwa seseorang atau sebuah entitas
                    memiliki hak kepemilikan mutlak atas sebuah properti, termasuk tanah dan bangunan yang berdiri di
                    atasnya.
                </p>
                <div class="hero-meta">
                    <div class="meta-item">
                        <i class="fas fa-building" style="color: #ffd89b;"></i>
                        <span>SHM dikeluarkan oleh <a href="#" class="meta-link" onclick="openBPNModal()">Badan
                                Pertanahan Nasional</a></span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-user-tie" style="color: #ffd89b;"></i>
                        <span>melalui <a href="#" class="meta-link" onclick="openPPATModal()">Pejabat Pembuat Akta
                                Tanah</a></span>
                    </div>
                </div>
            </div>
            <div class="hero-visual">
                <div class="certificate-visual">
                    <div class="cert-corner top-left"></div>
                    <div class="cert-corner top-right"></div>
                    <div class="cert-corner bottom-left"></div>
                    <div class="cert-corner bottom-right"></div>

                    <div class="cert-lines">
                        <div class="cert-line"></div>
                        <div class="cert-line"></div>
                        <div class="cert-line"></div>
                        <div class="cert-line"></div>
                        <div class="cert-line"></div>
                    </div>

                    <div class="cert-signature">
                        <div class="signature-line"></div>
                        <div class="cert-seal">
                            <i class="fas fa-certificate"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="content-section">
        <div class="container">
            <!-- Importance Section -->
            <div class="importance-section">
                <h2 class="section-title fade-in-up">Kenapa SHM Penting?</h2>
                <div class="importance-grid">
                    <div class="importance-card fade-in-up delay-1">
                        <div class="importance-icon legal">
                            <i class="fas fa-gavel"></i>
                        </div>
                        <h3 class="importance-title">Memberikan Kepastian Hukum</h3>
                        <p class="importance-description">
                            Memberikan kepastian hukum atas kepemilikan properti dan melindungi dari sengketa kepemilikan.
                        </p>
                    </div>
                    <div class="importance-card fade-in-up delay-2">
                        <div class="importance-icon protection">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="importance-title">Melindungi Hak Pemilik</h3>
                        <p class="importance-description">
                            Melindungi hak pemilik terhadap properti dari pihak lain yang tidak berhak atas tanah tersebut.
                        </p>
                    </div>
                    <div class="importance-card fade-in-up delay-3">
                        <div class="importance-icon collateral">
                            <i class="fas fa-university"></i>
                        </div>
                        <h3 class="importance-title">Jaminan untuk Pinjaman</h3>
                        <p class="importance-description">
                            Memungkinkan pemilik untuk menggunakan properti sebagai jaminan untuk pinjaman atau hipotek.
                        </p>
                    </div>
                    <div class="importance-card fade-in-up delay-4">
                        <div class="importance-icon transaction">
                            <i class="fas fa-exchange-alt"></i>
                        </div>
                        <h3 class="importance-title">Mempermudah Transaksi</h3>
                        <p class="importance-description">
                            Mempermudah proses jual beli properti dan transfer kepemilikan secara legal dan sah.
                        </p>
                    </div>
                    <div class="importance-card fade-in-up delay-5">
                        <div class="importance-icon law">
                            <i class="fas fa-balance-scale"></i>
                        </div>
                        <h3 class="importance-title">Perlindungan Hukum</h3>
                        <p class="importance-description">
                            Menjamin perlindungan hukum terhadap tanah dari klaim atau sengketa lainnya.
                        </p>
                    </div>
                    <div class="importance-card fade-in-up delay-6">
                        <div class="importance-icon administration">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h3 class="importance-title">Administrasi Properti</h3>
                        <p class="importance-description">
                            Membantu dalam proses administrasi dan perpajakan properti sesuai dengan peraturan yang berlaku.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Process Section -->
            <div class="process-section">
                <h2 class="section-title fade-in-up">Prosedur Pengurusan SHM</h2>
                <div class="process-grid">
                    <div class="process-card fade-in-up delay-1">
                        <div class="process-number">1</div>
                        <div class="process-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3 class="process-title">Pemeriksaan Status Tanah</h3>
                        <p class="process-description">
                            Langkah awal adalah memastikan status tanah yang akan diajukan sertifikat hak miliknya. Pastikan
                            tanah tersebut tidak dalam sengketa dan memiliki dokumen yang lengkap.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-2">
                        <div class="process-number">2</div>
                        <div class="process-icon">
                            <i class="fas fa-folder-open"></i>
                        </div>
                        <h3 class="process-title">Persiapan Dokumen</h3>
                        <p class="process-description">
                            Persiapkan dokumen-dokumen yang diperlukan untuk mengajukan sertifikat hak milik sesuai dengan
                            persyaratan dari Badan Pertanahan Nasional.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-3">
                        <div class="process-number">3</div>
                        <div class="process-icon">
                            <i class="fas fa-edit"></i>
                        </div>
                        <h3 class="process-title">Pengisian Formulir</h3>
                        <p class="process-description">
                            Mengisikan formulir yang disediakan oleh Badan Pertanahan Nasional atau instansi terkait dengan
                            data yang akurat dan lengkap.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-4">
                        <div class="process-number">4</div>
                        <div class="process-icon">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h3 class="process-title">Pembayaran Biaya Administrasi</h3>
                        <p class="process-description">
                            Lakukan pembayaran biaya administrasi yang diperlukan untuk pengurusan sertifikat hak milik
                            sesuai dengan tarif yang berlaku.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-5">
                        <div class="process-number">5</div>
                        <div class="process-icon">
                            <i class="fas fa-file-upload"></i>
                        </div>
                        <h3 class="process-title">Pengajuan Dokumen</h3>
                        <p class="process-description">
                            Serahkan dokumen-dokumen yang telah disiapkan beserta formulir aplikasi dan bukti pembayaran ke
                            kantor Badan Pertanahan Nasional atau instansi terkait.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-6">
                        <div class="process-number">6</div>
                        <div class="process-icon">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <h3 class="process-title">Pemeriksaan Lapangan</h3>
                        <p class="process-description">
                            Pihak berwenang akan melakukan pemeriksaan lapangan untuk memastikan bahwa informasi yang
                            disampaikan sesuai dengan kondisi yang sebenarnya.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-1">
                        <div class="process-number">7</div>
                        <div class="process-icon">
                            <i class="fas fa-user-check"></i>
                        </div>
                        <h3 class="process-title">Verifikasi Dokumen</h3>
                        <p class="process-description">
                            Badan Pertanahan Nasional atau instansi terkait akan melakukan verifikasi dokumen dan proses
                            administrasi lainnya untuk memastikan kelengkapan berkas.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-2">
                        <div class="process-number">8</div>
                        <div class="process-icon">
                            <i class="fas fa-certificate"></i>
                        </div>
                        <h3 class="process-title">Penerbitan Sertifikat</h3>
                        <p class="process-description">
                            Setelah semua persyaratan terpenuhi dan diverifikasi, sertifikat hak milik akan diterbitkan oleh
                            Badan Pertanahan Nasional atau instansi terkait.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-3">
                        <div class="process-number">9</div>
                        <div class="process-icon">
                            <i class="fas fa-download"></i>
                        </div>
                        <h3 class="process-title">Pengambilan Sertifikat</h3>
                        <p class="process-description">
                            Pemohon atau kuasanya dapat mengambil sertifikat hak milik yang telah diterbitkan dengan
                            menunjukkan bukti pengajuan dan identitas yang valid.
                        </p>
                    </div>
                    <div class="process-card fade-in-up delay-4">
                        <div class="process-number">10</div>
                        <div class="process-icon">
                            <i class="fas fa-clipboard-check"></i>
                        </div>
                        <h3 class="process-title">Pendaftaran Sertifikat</h3>
                        <p class="process-description">
                            Setelah mendapatkan sertifikat hak milik, pastikan untuk mendaftarkannya di kantor pertanahan
                            setempat agar sertifikat tersebut sah secara hukum.
                        </p>
                    </div>
                </div>
            </div>

            <!-- CTA Section -->
            <div class="cta-section fade-in-up">
                <div class="cta-content">
                    <h2 class="cta-title">Butuh Bantuan Pengurusan SHM?</h2>
                    <p class="cta-description">
                        Tim ahli kami siap membantu Anda dalam proses pengurusan Sertifikat Hak Milik dengan prosedur yang
                        tepat dan efisien.
                    </p>
                    <div class="cta-buttons">
                        <a href="https://wa.me/6281234567890?text=Halo, saya ingin berkonsultasi tentang pengurusan Sertifikat Hak Milik"
                            class="btn-primary">
                            <i class="fab fa-whatsapp"></i>
                            Konsultasi via WhatsApp
                        </a>
                        <a href="tel:+6281234567890" class="btn-secondary">
                            <i class="fas fa-phone"></i>
                            Hubungi Kami
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Chat Widget -->
    <div class="chat-widget">
        <button class="chat-btn" onclick="openWhatsApp()">
            <i class="fab fa-whatsapp"></i>
        </button>
    </div>

    <!-- BPN Modal -->
    <div id="bpnModal" class="modal-overlay" onclick="closeBPNModal(event)">
        <div class="modal-content">
            <div class="modal-header">
                <button class="modal-close" onclick="closeBPNModal()">
                    <i class="fas fa-times"></i>
                </button>
                <div class="modal-logo">
                    <div class="bpn-logo">
                        <div class="bpn-shield"></div>
                    </div>
                </div>
                <h3 class="modal-title">Badan Pertanahan Nasional</h3>
                <p class="modal-subtitle">Kementerian Agraria dan Tata Ruang</p>
            </div>
            <div class="modal-body">
                <p class="modal-description">
                    Badan Pertanahan Nasional (BPN) adalah lembaga pemerintah non-kementerian yang bertugas mengelola dan
                    mengembangkan administrasi pertanahan di Indonesia. BPN bertanggung jawab dalam memberikan kepastian
                    hukum dan perlindungan hukum terhadap hak atas tanah bagi seluruh rakyat Indonesia.
                </p>
                <a href="https://www.atrbpn.go.id/" target="_blank" class="modal-btn">
                    <i class="fas fa-external-link-alt"></i>
                    Pelajari Lebih Banyak
                </a>
            </div>
        </div>
    </div>

    <!-- PPAT Modal -->
    <div id="ppatModal" class="modal-overlay" onclick="closePPATModal(event)">
        <div class="modal-content">
            <div class="modal-header">
                <button class="modal-close" onclick="closePPATModal()">
                    <i class="fas fa-times"></i>
                </button>
                <div class="modal-logo">
                    <div class="ppat-logo">
                        <div class="ppat-document">
                            <div class="ppat-seal"></div>
                            <div class="ppat-signature"></div>
                        </div>
                    </div>
                </div>
                <h3 class="modal-title">Pejabat Pembuat Akta Tanah</h3>
                <p class="modal-subtitle">PPAT - Notaris Tanah</p>
            </div>
            <div class="modal-body">
                <p class="modal-description">
                    Pejabat Pembuat Akta Tanah (PPAT) adalah pejabat umum yang diberi kewenangan untuk membuat akta-akta
                    tanah tertentu. PPAT berperan penting dalam proses peralihan hak atas tanah dan memastikan keabsahan
                    dokumen pertanahan sesuai dengan peraturan yang berlaku.
                </p>
                <a href="https://www.atrbpn.go.id/daftar-ppat" target="_blank" class="modal-btn">
                    <i class="fas fa-external-link-alt"></i>
                    Pelajari Lebih Banyak
                </a>
            </div>
        </div>
    </div>

    <script>
        // WhatsApp function
        function openWhatsApp() {
            window.open('https://wa.me/6281234567890?text=Halo, saya ingin berkonsultasi tentang Sertifikat Hak Milik',
                '_blank');
        }

        // BPN Modal functions
        function openBPNModal() {
            const modal = document.getElementById('bpnModal');
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeBPNModal(event) {
            // Close modal if clicking outside content or close button
            if (!event || event.target === event.currentTarget || event.target.closest('.modal-close')) {
                const modal = document.getElementById('bpnModal');
                modal.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        }

        // PPAT Modal functions
        function openPPATModal() {
            const modal = document.getElementById('ppatModal');
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closePPATModal(event) {
            // Close modal if clicking outside content or close button
            if (!event || event.target === event.currentTarget || event.target.closest('.modal-close')) {
                const modal = document.getElementById('ppatModal');
                modal.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        }

        // Close modal with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeBPNModal();
                closePPATModal();
            }
        });

        // Prevent modal content click from closing modal
        document.querySelectorAll('.modal-content').forEach(content => {
            content.addEventListener('click', function(event) {
                event.stopPropagation();
            });
        });

        // Scroll animations
        function animateOnScroll() {
            const elements = document.querySelectorAll('.fade-in-up');

            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;

                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('animate');
                }
            });
        }

        // Event listeners
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

        // Smooth scrolling for internal links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add loading animation
        document.addEventListener('DOMContentLoaded', function() {
            // Add staggered animation delay to cards
            document.querySelectorAll('.importance-card, .process-card').forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });
    </script>
    <?php if (isset($component)) { $__componentOriginal86ed18220e5516026aef66b347e6e7af = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal86ed18220e5516026aef66b347e6e7af = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.footer_one','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('footer_one'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal86ed18220e5516026aef66b347e6e7af)): ?>
<?php $attributes = $__attributesOriginal86ed18220e5516026aef66b347e6e7af; ?>
<?php unset($__attributesOriginal86ed18220e5516026aef66b347e6e7af); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal86ed18220e5516026aef66b347e6e7af)): ?>
<?php $component = $__componentOriginal86ed18220e5516026aef66b347e6e7af; ?>
<?php unset($__componentOriginal86ed18220e5516026aef66b347e6e7af); ?>
<?php endif; ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.layout1', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laravel\krs-jawa3-template\krs-jawa3-web-template\resources\views/home/sertifikathakmilik.blade.php ENDPATH**/ ?>