:root {
    --kk-primary: #14532d;
    --kk-primary-dark: #0f3d23;
    --kk-soft: #f4f8f5;
    --kk-accent: #eab308;
    --kk-text: #1f2937;
}
body {
    background: #f5f7fb;
    color: var(--kk-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.kk-navbar {
    background: linear-gradient(135deg, #14532d, #166534 55%, #0f766e);
    box-shadow: 0 8px 25px rgba(20, 83, 45, .18);
}
.kk-sidebar {
    background: #10251a;
    color: #fff;
}
.kk-sidebar .nav-link {
    color: rgba(255,255,255,.78);
    border-radius: 14px;
    padding: .8rem .9rem;
    font-weight: 600;
}
.kk-sidebar .nav-link:hover,
.kk-sidebar .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.kk-sidebar-title {
    color: #bbf7d0;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .78rem;
}
.kk-content {
    min-height: calc(100vh - 56px);
}
.kk-card {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, .07);
}
.kk-stat {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
    position: relative;
}
.kk-stat:after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    background: rgba(20, 83, 45, .08);
}
.kk-stat .icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #dcfce7;
    color: #166534;
    font-size: 1.35rem;
}
.kk-hero {
    background: linear-gradient(135deg, #14532d, #0f766e);
    color: white;
    border-radius: 26px;
    padding: 2rem;
    box-shadow: 0 18px 40px rgba(20, 83, 45, .20);
}
.kk-table th {
    font-size: .8rem;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}
.kk-table td {
    vertical-align: middle;
}
.btn-kk {
    background: var(--kk-primary);
    border-color: var(--kk-primary);
    color: white;
}
.btn-kk:hover {
    background: var(--kk-primary-dark);
    border-color: var(--kk-primary-dark);
    color: white;
}
.form-control, .form-select {
    border-radius: 14px;
    padding: .72rem .9rem;
}
.product-card {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    height: 100%;
}
.product-img {
    height: 190px;
    object-fit: cover;
    background: #e5e7eb;
}
.news-img {
    height: 220px;
    object-fit: cover;
    border-radius: 18px;
}
.avatar-kk {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 999px;
    background: #e5e7eb;
}
.file-link {
    text-decoration: none;
    font-weight: 700;
}
@media (max-width: 991.98px) {
    .kk-hero { padding: 1.4rem; border-radius: 20px; }
    .kk-content { padding-left: 1rem !important; padding-right: 1rem !important; }
    .product-img { height: 170px; }
}

/* Frontend Landing */
.kk-front-body{background:#f6faf8;color:#12372a;}
.kk-front-nav{background:rgba(13,87,62,.92);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.12);}
.kk-front-hero{background:linear-gradient(135deg,rgba(20,83,45,.96),rgba(15,118,110,.92)), radial-gradient(circle at top right,#facc15 0,transparent 35%);position:relative;overflow:hidden;}
.kk-front-hero:after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.08);}
.opacity-90{opacity:.9;}
.kk-front-panel{background:rgba(255,255,255,.96);border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.25);position:relative;z-index:2;}
.kk-front-icon{width:58px;height:58px;border-radius:20px;background:#e8f7ef;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:28px;}
.kk-mini-card{background:#f7fbf9;border:1px solid #e2ece7;border-radius:22px;padding:18px;min-height:135px;display:flex;flex-direction:column;gap:8px;}
.kk-mini-card i{font-size:28px;color:#15803d}.kk-mini-card strong{font-size:16px}.kk-mini-card span{font-size:13px;color:#6b7280;}
.kk-section-label{display:inline-block;color:#15803d;background:#e8f7ef;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;margin-bottom:10px;}
.kk-news-img{height:190px;object-fit:cover}.kk-product-card{border:0;border-radius:24px;box-shadow:0 15px 38px rgba(15,83,55,.08);overflow:hidden}.kk-product-img-wrap{height:190px;background:#eef7f2;overflow:hidden}.kk-product-img{width:100%;height:100%;object-fit:cover;transition:.25s}.kk-product-card:hover .kk-product-img{transform:scale(1.04)}
.kk-front-stat{background:#fff;border-radius:24px;padding:24px;box-shadow:0 15px 38px rgba(15,83,55,.08);height:100%;}.kk-front-stat span{display:block;color:#6b7280;margin-bottom:8px}.kk-front-stat strong{font-size:24px;display:block;}
.kk-dkm-section{background:linear-gradient(135deg,#064e3b,#0f766e);}

/* Iuran Calendar */
.kk-calendar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kk-month-card{border:1px solid #e5e7eb;border-radius:20px;padding:16px;background:#fff;min-height:154px;transition:.2s;position:relative;overflow:hidden;}
.kk-month-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(15,83,55,.08)}
.kk-month-card.lunas{border-color:#bbf7d0;background:linear-gradient(180deg,#f0fdf4,#fff)}
.kk-month-card.pending{border-color:#fde68a;background:linear-gradient(180deg,#fffbeb,#fff)}
.kk-month-card.belum{border-color:#fecaca;background:linear-gradient(180deg,#fef2f2,#fff)}
.kk-month-name{font-weight:800;font-size:17px}.kk-month-amount{font-weight:800;font-size:19px}.kk-payment-method-card{border:1px solid #dbeafe;background:#f8fbff;border-radius:22px}.kk-qris-preview{width:100%;max-width:260px;border-radius:18px;border:1px solid #e5e7eb;background:#fff;padding:8px;}
@media(max-width:991.98px){.kk-calendar-grid{grid-template-columns:repeat(2,1fr)}.kk-front-hero .min-vh-100{min-height:auto!important;padding-top:110px;padding-bottom:50px}}
@media(max-width:575.98px){.kk-calendar-grid{grid-template-columns:1fr}.kk-front-stat strong{font-size:20px}.kk-product-img-wrap{height:145px}}

/* Mobile App Navigation v3 */
.kk-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:1040;background:rgba(255,255,255,.97);
    border-top:1px solid #e5e7eb;box-shadow:0 -10px 30px rgba(15,23,42,.10);display:flex;justify-content:space-around;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(14px);
}
.kk-bottom-nav a{flex:1;text-decoration:none;color:#64748b;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;border-radius:16px;padding:7px 2px;min-width:0;}
.kk-bottom-nav a i{font-size:20px;line-height:1;}.kk-bottom-nav a.active{background:#e8f7ef;color:#14532d;}.kk-bottom-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px;}
.kk-mobile-card-row{border:1px solid #e5e7eb;border-radius:18px;background:#fff;padding:14px;margin-bottom:10px;box-shadow:0 10px 24px rgba(15,23,42,.05)}
@media (max-width: 991.98px){
    body{padding-bottom:82px;}
    .navbar .navbar-brand{font-size:1rem;}
    .navbar .btn-sm{padding:.35rem .55rem;}
    .kk-content{padding-bottom:100px!important;}
    .kk-card{border-radius:18px;}
    .kk-stat{border-radius:18px;}
    .table-responsive{border-radius:18px;}
    .table-responsive table{min-width:760px;}
    .offcanvas.kk-sidebar{width:82%;max-width:340px;}
}
@media (max-width: 575.98px){
    .kk-navbar .container-fluid{gap:6px;}.kk-navbar .badge{display:none;}
    .kk-content{padding-left:.85rem!important;padding-right:.85rem!important;}
    .kk-hero h1{font-size:1.55rem}.kk-hero p{font-size:.92rem;}
    .kk-stat h3{font-size:1.35rem}.kk-stat .icon{width:40px;height:40px;font-size:1.05rem;}
    .btn.rounded-pill{border-radius:14px!important;}
    .product-card{border-radius:18px;}
}