/* Wartek Duren Sawit theme layer.
   Design philosophy: Kampung Digital Duren Sawit — local route motifs,
   leaf green trust, sun yellow direction, terracotta human warmth.
   The base layout remains in css/style.css and css/responsive.css.
*/

:root {
    --primary-dark: #123047;
    --primary: #0f6b55;
    --primary-light: #14b8a6;
    --accent-green: #15803d;
    --accent-green-dark: #166534;
    --gray-50: #f5faf5;
    --gray-100: #e7f2eb;
    --gray-200: #d6e5dc;
    --gray-300: #b7cfc3;
    --gray-600: #50655d;
    --gray-700: #30453e;
    --gray-800: #1c302b;
    --gray-900: #102a2a;
}

body.duren-sawit-theme { background: #fffdf9; }
body.duren-sawit-theme .header { border-bottom-color: #d6e5dc; background: rgba(255,253,249,.95); }
body.duren-sawit-theme .nav-list a:hover,
body.duren-sawit-theme .nav-list a.active { color: var(--primary-dark); background: #e7f2eb; }
body.duren-sawit-theme .hero,
body.duren-sawit-theme .cta-section { background: linear-gradient(120deg, #123047 0%, #0f6b55 59%, #177e62 100%); }
body.duren-sawit-theme .hero-image { border-color: rgba(255,255,255,.14); background: #e7f2eb; }
body.duren-sawit-theme .service-card,
body.duren-sawit-theme .process-step,
body.duren-sawit-theme details { border-radius: 1.15rem .65rem 1.15rem .65rem; }
body.duren-sawit-theme .service-card:hover { border-color: #f6cf58; }
body.duren-sawit-theme .service-icon { background: linear-gradient(135deg, #e36b3f 0%, #b84d2b 100%); }
body.duren-sawit-theme .section-alt { background: #f5faf5; }
body.duren-sawit-theme .footer { background: #143d36; }

.duren-ribbon { position: relative; z-index: 2; padding: 1.4rem 0; background: linear-gradient(90deg, #e7f2eb 0%, #fff8ec 58%, #fff1d1 100%); border-bottom: 1px solid #d6e5dc; }
.duren-ribbon-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.duren-ribbon-copy { max-width: 610px; }
.duren-ribbon-copy .eyebrow { margin-bottom: .38rem; color: #b84d2b; }
.duren-ribbon-copy h2 { color: #123047; margin-bottom: .3rem; font-size: clamp(1.2rem, 2.7vw, 1.72rem); }
.duren-ribbon-copy p { margin: 0; color: #50655d; font-size: .87rem; }
.duren-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.duren-pill { display: inline-flex; align-items: center; padding: .5rem .72rem; background: rgba(255,255,255,.76); border: 1px solid #f0d99a; border-radius: 999px; color: #82511c; font-size: .75rem; font-weight: 800; box-shadow: 0 4px 12px rgba(180,83,9,.07); }
.duren-pill::before { content: ''; width: .38rem; height: .38rem; margin-right: .4rem; border-radius: 50%; background: #e36b3f; }

@media (max-width: 800px) {
    .duren-ribbon { padding: 1.25rem 0; }
    .duren-ribbon-copy h2 { font-size: 1.25rem; }
    .duren-pills { justify-content: flex-start; }
}