/* ==========================================================================
   MODERNISASI TAMPILAN — Posyandu Kabupaten Bengkulu Tengah
   --------------------------------------------------------------------------
   File ini HANYA berisi override di atas tema lama (main.css & style.css).
   Tema asli sama sekali tidak diubah.

   Cara kembali ke tampilan lama:
   hapus satu baris <link ... modern.css> di
   application/views/frontend/index.php
   ========================================================================== */

:root {
    --posy-purple: #6f42c1;
    --posy-purple-deep: #4a2a87;
    --posy-purple-soft: #8b5fd6;
    --posy-accent: #0c039c;
    --posy-accent-soft: #5170fa;

    --ink: #101828;
    --ink-2: #344054;
    --muted: #5c6b82;
    --line: #e4e9f0;
    --surface: #f6f8fb;
    --white: #fff;

    --radius: 14px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, .08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, .1);
    --ease: cubic-bezier(.4, 0, .2, 1);
}


/* --------------------------------------------------------------- dasar --- */

body {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.65;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.32;
}

a { transition: color .2s var(--ease); }
a:hover { text-decoration: none; }

.gray-bg { background: var(--surface) !important; }

/* garis pemisah tipis yang lebih halus */
hr, .separator { border-color: var(--line) !important; }


/* -------------------------------------------------------------- header --- */

/* bar paling atas: sebelumnya ungu #4a2a87 */
.header-top {
    background: var(--posy-purple-deep) !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.header-top .header-info-left ul li,
.header-top .header-info-right ul li {
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
}

.header-top .header-info-left ul li.title { font-weight: 500; }

/* area logo: buang gambar gelombang oranye, ganti aksen gradien tipis */
.header-mid {
    background-image: none !important;
    background-color: var(--white) !important;
    position: relative;
    padding: 14px 0 !important;
}

.header-mid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--posy-purple) 0%, var(--posy-purple-soft) 45%, var(--posy-accent) 100%);
}

/* bar navigasi */
.header-bottom {
    background: var(--posy-purple) !important;
    box-shadow: 0 6px 20px rgba(74, 42, 135, .16) !important;
    border: 0 !important;
}

.main-header .main-menu ul li a {
    color: rgba(255, 255, 255, .9);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    padding: 14px 15px;
    position: relative;
    transition: color .2s var(--ease);
}

.main-header .main-menu ul li a:hover,
.main-menu ul li.active > a { color: #fff; }

/* garis bawah animasi saat hover */
.main-header .main-menu ul li > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--posy-accent-soft);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s var(--ease);
}

.main-header .main-menu ul li:hover > a::after,
.main-menu ul li.active > a::after { transform: scaleX(1); }

/* submenu */
.main-menu ul li .submenu {
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding: 6px 0;
}

.main-menu ul li .submenu li a {
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    padding: 9px 18px;
}

.main-menu ul li .submenu li a::after { display: none; }
.main-menu ul li .submenu li a:hover { background: var(--surface); color: var(--posy-purple); }

/* ikon sosial di kanan nav */
.header-bottom .header-social a,
.header-bottom .header-social i { color: rgba(255, 255, 255, .85); transition: color .2s var(--ease); }
.header-bottom .header-social a:hover i { color: var(--posy-accent-soft); }


/* ----------------------------------------------------- running text ---- */

.trending-area { padding: 12px 0 !important; }

/* pita teal #5170fa dari tema lama -> kartu terang yang netral */
.tickerwrapper {
    background: var(--white) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-2) !important;
    margin-bottom: 0 !important;
    box-shadow: var(--shadow-xs);
}

.tickerwrapper ul.list li span a,
.tickerwrapper ul.list li span { color: var(--ink-2) !important; font-size: .875rem; }

.trending {
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .6875rem !important;
    padding: 7px 14px !important;
}

.trending strong { font-weight: 700; }


/* -------------------------------------------------------------- kartu --- */

.card {
    border: 0 !important;
    border-radius: var(--radius) !important;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .25s var(--ease);
}

.card:hover { box-shadow: var(--shadow-md); }

/* header seksi: dari blok biru penuh -> putih + aksen emas.
   Ketiga bentuk ini dipakai bergantian di view, jadi disamakan. */
.card-header,
.card-header.bg-blue,
.bg-blue.card-header,
.card-title.bg-blue,
.small-tittle.bg-blue {
    background: var(--white) !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 11px;
}

.card-header::before,
.card-title.bg-blue::before,
.small-tittle.bg-blue::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 17px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--posy-accent), var(--posy-accent-soft));
}


/* -------------------------------------------------------------- tombol --- */

.btn {
    border: 0;
    border-radius: var(--radius-sm) !important;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .62rem 1.15rem;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.btn-primary {
    background: var(--posy-purple) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--posy-purple-soft) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-danger { border-radius: var(--radius-sm) !important; }

/* tombol lama bergaya outline merah (#ff2143) -> navy penuh */
.boxed-btn,
.button.boxed-btn,
.button-contactForm {
    background: var(--posy-purple) !important;
    border: 1px solid var(--posy-purple) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: inherit !important;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 14px 34px !important;
    text-transform: uppercase;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.boxed-btn:hover,
.button.boxed-btn:hover,
.button-contactForm:hover {
    background: var(--posy-purple-soft) !important;
    border-color: var(--posy-purple-soft) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}


/* --------------------------------------------------------------- hero --- */

.hero-caption h2,
.hero-caption h1 { font-weight: 700; letter-spacing: -.015em; }

.hero-caption span {
    background: var(--posy-purple) !important;
    border-radius: var(--radius-pill);
    padding: 5px 14px !important;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.slider-area .slick-slide img,
.hero-img img { border-radius: var(--radius); }


/* ------------------------------------------------------------ sidebar --- */

.sidebar .card-header,
.sidebar .card-body { border-radius: 0 !important; }

.sidebar ul li a,
.sidebar .single-follow a {
    color: var(--ink-2);
    font-size: .875rem;
    transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.sidebar ul li a:hover { color: var(--posy-purple); }


/* ------------------------------------------------------------- footer --- */

.footer-area {
    background: var(--posy-purple-deep) !important;
    padding: 58px 0 0 0 !important;
}

.footer-area .footer-tittle h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 18px;
}

.footer-area .footer-pera p,
.footer-area .footer-tittle ul li a,
.footer-area .footer-tittle ul li {
    color: rgba(255, 255, 255, .74);
    font-size: .875rem;
    line-height: 1.8;
}

.footer-area .footer-tittle ul li a:hover { color: var(--posy-accent-soft); }

/* pembungkus footer dibuat solid supaya tidak ada celah putih */
.footer-main,
.footer-main.footer-bg { background: var(--posy-purple-deep) !important; }

.footer-bottom-area,
.footer-bottom,
.footer-bottom-area.footer-bg {
    background: #2e1a57 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.footer-bottom-area .footer-border { padding: 18px 0 !important; }

.footer-bottom-area .footer-copy-right p {
    color: rgba(255, 255, 255, .66) !important;
    font-size: .8125rem;
    margin-bottom: 0;
}

.footer-bottom-area .footer-copy-right p a { color: var(--posy-accent-soft) !important; }


/* -------------------------------------------------------- lain-lain ----- */

.pagination .page-item .page-link {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) !important;
    margin: 0 3px;
    color: var(--ink-2);
    font-size: .875rem;
    transition: all .2s var(--ease);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background: var(--posy-purple);
    border-color: var(--posy-purple);
    color: #fff;
}

.form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    padding: .55rem .85rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.form-control:focus {
    border-color: var(--posy-purple-soft);
    box-shadow: 0 0 0 3px rgba(111, 66, 193, .12);
}

img.rounded,
.whats-news-wrapper img,
.most-recent-img img { border-radius: var(--radius-sm); }


/* ------------------------------------------------------- layar kecil --- */

@media (max-width: 767px) {
    .header-mid::after { height: 2px; }
    .card-header { padding: 13px 16px !important; font-size: .9375rem; }
    .footer-area { padding-top: 40px !important; }
}