/*
   Wartek Kelapa Gading — theme layer
   The reference CSS files remain intact; this file supplies the local visual identity.
*/
:root {
    --primary-dark: #123b4a;
    --primary: #0f766e;
    --primary-light: #14b8a6;
    --accent-green: #f97316;
    --accent-green-dark: #ea580c;
    --gray-50: #f4fbfa;
}

body {
    background: #fbfefd;
}

.header {
    border-bottom-color: #d7eeeb;
}

.logo-mark {
    background: linear-gradient(135deg, #0f766e 0%, #123b4a 100%);
}

.hero,
.service-hero {
    background: linear-gradient(135deg, #123b4a 0%, #0f766e 60%, #0d9488 100%);
}

.hero::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: -180px;
    border: 2px solid rgba(253, 224, 71, 0.2);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(253, 224, 71, 0.06), 0 0 0 58px rgba(253, 224, 71, 0.04);
}

.hero-content h1 span,
.hero-feature svg {
    color: #fde047;
}

.service-card:hover {
    border-color: #0f766e;
}

.service-icon {
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
}

.feature-icon {
    color: #0f766e;
    border-color: #b9e5df;
    background: #effcf9;
}

.process-step::before {
    background: #f97316;
}

.callout {
    border-left-color: #f97316;
}

.callout strong,
.service-card .read-more,
.sidebar-list a:hover {
    color: #0f766e;
}

.section-alt {
    background: #f4fbfa;
}

.cta-section {
    background: linear-gradient(to right, #1e3a8a, #2563eb);
}

.cta-section .btn-primary {
    background: #f97316;
    border-color: #f97316;
}

.cta-section .btn-primary:hover {
    background: #ea580c;
    border-color: #ea580c;
}

.area-card:hover,
.testimonial-card:hover,
.sidebar-card:hover {
    border-color: #99d9d1;
}

.notice-banner {
    border-left-color: #f97316;
}

@media (max-width: 768px) {
    .nav-list {
        border-top: 2px solid #d7eeeb;
    }
}