/* =========================================================
   MODERN EMERALD FINAL
   Target: mockup putih + emerald yang disepakati
   File ini dimuat SETELAH style.css.
========================================================= */

:root{
    --me-green:#159768;
    --me-green-2:#2cc891;
    --me-green-dark:#064c3d;
    --me-green-deep:#062d29;
    --me-soft:#eff8f4;
    --me-bg:#f7f9f8;
    --me-ink:#101820;
    --me-muted:#69747d;
    --me-line:#e4ebe8;
    --me-white:#fff;
    --me-shadow:0 16px 45px rgba(22,45,37,.08);
}
*{box-sizing:border-box}
body.modern-emerald{
    background:var(--me-bg)!important;
    color:var(--me-ink);
    font-family:"Open Sauce One","Segoe UI",Arial,sans-serif;
}
.me-shell{
    width:min(1210px,calc(100% - 40px));
    margin:0 auto;
}

/* ---------- header / nav ---------- */
.me-site-header,
.result-search .c-header,
.member-area .c-header{
    min-height:0!important;
    background:#fff!important;
    position:relative;
}
.me-site-header .mask,
.result-search .c-header .mask,
.member-area .c-header .mask{display:none!important}
.me-nav{
    min-height:78px;
    padding:0!important;
    background:#fff!important;
    box-shadow:0 1px 0 rgba(15,35,28,.07);
    position:relative;
    z-index:100;
}
.me-nav-inner{
    display:flex;
    align-items:center;
    width:min(1210px,calc(100% - 40px));
    min-height:78px;
}
.me-brand{
    display:flex!important;
    align-items:center;
    color:var(--me-ink)!important;
    margin-right:30px;
}
.me-brand-logo{
    width:42px;height:48px;display:flex;align-items:center;justify-content:center;
    flex:0 0 42px;
}
.me-brand-logo img{max-width:42px;max-height:48px;object-fit:contain}
.me-brand-copy{display:flex;flex-direction:column;line-height:1.08;margin-left:10px}
.me-brand-copy strong{
    color:#111a24;font-size:17px;font-weight:800;max-width:280px;
}
.me-brand-copy small{color:#4b5660;font-size:12px;margin-top:4px}
.me-nav-menu{align-items:center;gap:15px}
.me-nav .nav-link{
    color:#111923!important;
    font-size:14px;
    font-weight:600;
    padding:28px 10px 25px!important;
    position:relative;
    border-radius:0!important;
}
.me-nav .nav-item.active>.nav-link,
.me-nav .nav-link:hover{
    color:var(--me-green)!important;
    background:transparent!important;
}
.me-nav .nav-item.active>.nav-link:after{
    content:"";position:absolute;left:9px;right:9px;bottom:18px;height:2px;
    background:var(--me-green);border-radius:99px;
}
.me-nav .me-login-btn{
    margin-left:12px;
    padding:11px 18px!important;
    background:var(--me-green-dark)!important;
    color:#fff!important;
    border-radius:8px!important;
    box-shadow:0 7px 18px rgba(6,76,61,.14);
}
.me-nav .me-login-btn:hover{background:var(--me-green)!important;color:#fff!important}
.me-nav .me-login-btn:after{display:none!important}
.me-nav .me-basket{padding-left:8px!important;padding-right:8px!important}
.me-basket-count{
    position:absolute;top:17px;right:0;min-width:17px;height:17px;border-radius:20px;
    display:flex;align-items:center;justify-content:center;background:#e14949;color:#fff;font-size:10px
}
.me-language .nav-link{padding-left:6px!important;padding-right:6px!important}
.me-nav .dropdown-menu{
    border:1px solid var(--me-line);border-radius:12px;padding:8px;
    box-shadow:0 18px 40px rgba(20,35,30,.14)
}
.me-nav .dropdown-item{border-radius:7px;padding:9px 12px}
.me-nav-toggler{color:var(--me-green-dark)!important;border:1px solid var(--me-line)!important}

/* ---------- hero ---------- */
.me-hero{
    position:relative;
    min-height:438px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background-color:#17352f;
    background-image:
        url("../images/library-hero.jpg"),
        url("../images/slide1.jpg");
    background-size:cover;
    background-position:center;
}
.me-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(3,31,29,.94) 0%,rgba(4,38,34,.80) 45%,rgba(6,35,30,.28) 100%);
}
.me-hero-grid{
    position:relative;z-index:2;
    display:grid;grid-template-columns:minmax(0,1fr) 255px;
    gap:70px;align-items:center;padding:46px 0 38px;
}
.me-hero-copy{max-width:690px}
.me-eyebrow{display:block;color:#2ed29b;font-weight:600;font-size:14px;margin-bottom:14px}
.me-hero h1{
    color:#fff;font-size:48px;line-height:1.08;font-weight:800;letter-spacing:-1.6px;
    margin:0 0 14px;
}
.me-hero h1 span{color:#29c992}
.me-hero-copy>p{
    color:rgba(255,255,255,.9);font-size:15px;line-height:1.55;margin:0 0 20px;max-width:660px
}
.me-search{margin:0!important;position:relative}
.me-search-form{
    height:58px;display:flex;align-items:center;background:#fff;border-radius:9px;
    padding:5px;box-shadow:0 12px 28px rgba(0,0,0,.15);position:relative
}
.me-search-icon{color:#92a2a0;margin-left:15px;margin-right:11px}
.me-search-form input{
    border:0!important;outline:0!important;background:transparent!important;flex:1;min-width:0;
    font-size:14px;padding:0!important;color:#26332e!important
}
.me-search-form input::placeholder{color:#a5aeb3!important;font-size:14px;font-weight:400}
.me-search-form button{
    height:48px;min-width:105px;border:0;border-radius:8px;background:var(--me-green);
    color:#fff;font-size:14px;font-weight:700;cursor:pointer;padding:0 20px;
}
.me-search-form button:hover{background:#0d8058}
.me-search-suggest{
    position:absolute!important;top:66px!important;left:0!important;right:0!important;
    z-index:1000!important;background:#fff!important;border-radius:12px!important;padding:16px!important;
    box-shadow:0 20px 45px rgba(0,0,0,.18)!important
}
.me-search-suggest-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#34413c}
.me-search-suggest-head i{cursor:pointer;color:#c84d4d}
.me-search-chip{
    display:inline-flex;align-items:center;padding:7px 12px;margin:0 7px 7px 0;border-radius:7px;
    border:1px solid #dbe5e1;color:#52605a!important;font-size:12px;text-decoration:none!important;cursor:pointer
}
.me-search-chip.active,.me-search-chip:hover{background:var(--me-green)!important;border-color:var(--me-green)!important;color:#fff!important}
.me-search-chip-outline{border-color:var(--me-green);color:var(--me-green)!important}
.me-last-label{margin:8px 0 5px;color:#7a8580;font-size:12px}
.me-last-search{display:flex;justify-content:space-between;padding:7px;color:#4e5b56!important;text-decoration:none!important;font-size:12px}
.me-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.me-hero-links a{
    display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.48);
    border-radius:22px;color:#fff!important;font-size:12px;text-decoration:none!important;background:rgba(0,0,0,.08)
}
.me-hero-links a:hover{border-color:#2ed29b;background:rgba(21,151,104,.18)}
.me-hours-card{
    background:rgba(255,255,255,.97);border-radius:10px;padding:22px 22px 18px;color:#17221e;
    box-shadow:0 20px 45px rgba(0,0,0,.22)
}
.me-hours-title{display:flex;align-items:center;gap:11px;color:#0e6048;margin-bottom:13px}
.me-hours-title span{
    width:34px;height:34px;border-radius:50%;background:#e7f7f0;display:flex;align-items:center;justify-content:center;
    color:var(--me-green);font-size:17px
}
.me-hours-title strong{font-size:14px}
.me-hours-row{padding:10px 0;border-bottom:1px dashed #dbe2df}
.me-hours-row strong,.me-hours-row span{display:block;font-size:12px}
.me-hours-row span{margin-top:3px;color:#313d38}
.me-hours-card blockquote{
    margin:16px -22px -18px;padding:15px 22px 19px;border-top:1px solid #e5e9e7;background:#fbfcfb;
    border-radius:0 0 10px 10px
}
.me-hours-card blockquote i{display:block;color:var(--me-green);font-size:20px;margin-bottom:5px}
.me-hours-card blockquote span{font-size:11px;font-style:italic;color:#65716c;line-height:1.45}

/* compact search on internal pages */
.me-compact-search{background:#f4f8f6;padding:22px 0;border-bottom:1px solid var(--me-line);position:relative;z-index:20}
.me-search-form-compact{max-width:850px;margin:0 auto;height:52px;box-shadow:0 8px 20px rgba(19,50,40,.07)}
.me-search-form-compact button{height:42px}
.me-search-suggest-compact{max-width:850px;margin:0 auto;top:80px!important}

/* ---------- benefits ---------- */
.me-home{background:var(--me-bg)}
.me-benefit-wrap{position:relative;z-index:6;margin-top:-1px;padding:0 0 8px}
.me-benefit-grid{
    display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--me-line);
    border-radius:14px;padding:25px 20px;box-shadow:var(--me-shadow);transform:translateY(0)
}
.me-benefit{
    display:flex;align-items:center;gap:14px;padding:0 20px;border-right:1px solid #edf1ef;min-height:70px
}
.me-benefit:last-child{border-right:0}
.me-benefit-icon{
    width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#edf8f3;color:var(--me-green);font-size:21px
}
.me-benefit strong{font-size:13px}
.me-benefit p{font-size:12px;line-height:1.5;color:#69756f;margin:4px 0 0}

/* ---------- sections ---------- */
.me-section{padding:48px 0}
.me-section-tight{padding-top:16px;padding-bottom:28px}
.me-section-heading{
    display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px
}
.me-section-heading h2{
    font-size:20px;font-weight:800;margin:0 0 5px;color:#101922;position:relative;padding-bottom:7px
}
.me-section-heading h2:after{
    content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--me-green)
}
.me-section-heading p{margin:0;color:#68746e;font-size:12px}
.me-outline-btn{
    display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #62c89f;border-radius:7px;
    color:#0c8158!important;background:#fff;text-decoration:none!important;font-size:12px;font-weight:600
}
.me-outline-btn:hover{background:#edf8f3}

/* latest collection rendered by SLiMS */
.me-latest-collection{min-height:180px}
.me-latest-collection .collection{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:18px!important;
}
.me-latest-collection .card{
    position:relative!important;
    border:1px solid #e9eeec!important;border-radius:9px!important;overflow:hidden!important;
    box-shadow:0 9px 24px rgba(26,45,38,.06)!important;background:#fff!important;margin:0!important;
}

/* Pita hijau "BARU" khusus Koleksi Terbaru */
.me-latest-collection .card::before{
    content:"BARU";
    position:absolute;
    top:12px;
    left:0;
    z-index:20;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:52px;
    height:24px;
    padding:0 12px 0 10px;

    background:linear-gradient(135deg,#159768,#21ad7a);
    color:#fff;

    font-size:9px;
    line-height:1;
    font-weight:700;
    letter-spacing:.06em;

    border-radius:0 6px 6px 0;
    box-shadow:0 3px 8px rgba(6,76,61,.16);

    pointer-events:none;
}
.me-latest-collection .card-image{border:0!important;border-radius:0!important}
.me-latest-collection .card-body{padding:11px!important}
.me-latest-collection img{max-width:100%;object-fit:cover}
.me-latest-collection .card-text.title,.me-latest-collection .title{font-weight:700!important;color:#141d19!important}

/* category */
.me-category-panel{
    background:#fff;border:1px solid var(--me-line);border-radius:13px;padding:27px 28px 20px;
    box-shadow:0 8px 26px rgba(25,46,39,.04)
}
.me-category-panel>h2{text-align:center;font-size:20px;font-weight:800;margin:0 0 28px}
.me-category-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:20px 26px;margin-bottom:25px
}
.me-category-grid a{
    display:flex;align-items:center;gap:10px;color:#26322d!important;text-decoration:none!important
}
.me-category-grid a>i{
    width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#edf8f3;color:var(--me-green);font-size:16px
}
.me-category-grid strong{display:block;font-size:12px}
.me-category-grid small{display:block;margin-top:2px;color:#79847f;font-size:10px}

/* stats */
.me-stat-panel{
    min-height:175px;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);
    padding:28px 25px;position:relative;
    background-color:#0a463a;
    background-image:linear-gradient(rgba(5,61,49,.84),rgba(5,61,49,.88)),url("../images/slide1.jpg");
    background-size:cover;background-position:center
}
.me-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;border-right:1px solid rgba(255,255,255,.18)}
.me-stat:last-child{border-right:0}
.me-stat i{
    width:56px;height:56px;border-radius:50%;background:#25c985;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:11px
}
.me-stat strong{font-size:25px;line-height:1}
.me-stat span{font-size:12px;margin-top:8px;color:rgba(255,255,255,.92)}

/* news */
.me-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.me-news-card{
    display:block;background:#fff;border:1px solid var(--me-line);border-radius:10px;overflow:hidden;
    color:inherit!important;text-decoration:none!important;box-shadow:0 8px 24px rgba(25,45,38,.05);transition:.2s
}
.me-news-card:hover{transform:translateY(-3px);box-shadow:0 13px 30px rgba(25,45,38,.09)}
.me-news-image{
    height:145px;background-size:cover;background-position:center;position:relative;display:flex;align-items:end;padding:12px
}
.me-news-image:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,42,34,.44),transparent 65%)}
.me-news-image-1{background-image:url("../images/slide1.jpg")}
.me-news-image-2{background-image:url("../images/slide1.jpg")}
.me-news-image-3{background-image:url("../images/slide1.jpg")}
.me-news-image span{
    position:relative;z-index:1;background:var(--me-green);color:#fff;border-radius:5px;padding:4px 7px;font-size:9px;font-weight:700
}
.me-news-body{padding:14px 15px 17px}
.me-news-body small{font-size:10px;color:#83908a}
.me-news-body h3{font-size:14px;line-height:1.35;margin:6px 0;color:#121b17;font-weight:800}
.me-news-body p{font-size:11px;color:#66736d;line-height:1.5;margin:0}
.me-top-reader-section{background:#fff}

/* ---------- footer ---------- */
.me-footer{
    background:linear-gradient(135deg,#072d29,#071f20 60%,#061b1d);
    color:#d9e4e0;padding-top:54px
}
.me-footer-grid{
    display:grid;grid-template-columns:1.45fr .85fr .9fr .9fr 1.35fr;gap:36px;padding-bottom:46px
}
.me-footer-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:23px}
.me-footer-logo{width:46px;height:54px;display:flex;align-items:center}
.me-footer-logo img{max-width:46px;max-height:54px;object-fit:contain;filter:brightness(1.12)}
.me-footer-logo-row strong{display:block;color:#fff;font-size:17px}
.me-footer-logo-row small{display:block;color:#d3dfdb;margin-top:4px;font-size:12px}
.me-footer-brand p{font-size:12px;line-height:1.75;color:#bdcbc6;max-width:290px}
.me-footer-social{display:flex;gap:10px;margin-top:23px}
.me-footer-social a{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);color:#fff!important;text-decoration:none!important
}
.me-footer h3{
    color:#fff;font-size:14px;font-weight:800;margin:0 0 19px;padding-bottom:10px;position:relative
}
.me-footer h3:after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:#43b982}
.me-footer-col a{
    display:block;color:#c9d6d1!important;text-decoration:none!important;font-size:12px;margin:0 0 14px
}
.me-footer-col a:before{content:"›";color:#42b780;margin-right:8px}
.me-footer-col a:hover{color:#fff!important}
.me-footer-contact>a,.me-footer-contact>div{
    display:flex;gap:10px;align-items:flex-start;color:#c9d6d1!important;text-decoration:none!important;font-size:12px;margin-bottom:14px
}
.me-footer-contact i{
    width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(35,160,109,.13);color:#43bb82
}
.me-footer-contact span{line-height:1.5;padding-top:3px}
.me-footer-bottom{border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12)}
.me-footer-bottom .me-shell{
    min-height:68px;display:flex;align-items:center;gap:24px;justify-content:space-between;color:#b9c7c2;font-size:11px
}
.me-back-top{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#2cc985;color:#fff!important;text-decoration:none!important
}
.me-chat-button{position:fixed;right:18px;bottom:18px;z-index:999}

/* ---------- global emerald overrides ---------- */
.biblioPaging .pagingList b{
    background-color:var(--me-green)!important;border-color:var(--me-green)!important;
    box-shadow:0 0 10px rgba(21,151,104,.25)!important
}
.biblioPaging .pagingList a:hover{color:var(--me-green)!important}
.page-member-area .memberButton,
#loginForm .loginButton{
    background:var(--me-green)!important;border-color:var(--me-green)!important;color:#fff!important
}
.page-member-area .form-control{max-width:100%}
#adv-modal .modal-content:before{opacity:.05!important}
.s-chat::before{background:var(--me-green-dark)!important}
.s-chat-content .btn.btn-block{background:var(--me-green)!important;border-color:var(--me-green)!important}
.highlight{color:#d83d3d}
.navbar-collapse.collapsing,.navbar-collapse.collapse.show{
    background:#fff!important;padding:14px!important;border:1px solid var(--me-line)!important;
    box-shadow:0 12px 30px rgba(20,40,33,.08)!important
}

/* ---------- responsive ---------- */
@media(max-width:1100px){
    .me-latest-collection .collection{grid-template-columns:repeat(4,minmax(0,1fr))!important}
    .me-category-grid{grid-template-columns:repeat(4,1fr)}
    .me-footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}
    .me-footer-contact{grid-column:span 2}
}
@media(max-width:991px){
    .me-nav-inner{min-height:70px}
    .me-nav .navbar-collapse{position:absolute;left:20px;right:20px;top:68px;z-index:999}
    .me-nav-menu{align-items:stretch;gap:0}
    .me-nav .nav-link{padding:11px 12px!important}
    .me-nav .nav-item.active>.nav-link:after{display:none}
    .me-nav .me-login-btn{margin:6px 0}
    .me-hero-grid{grid-template-columns:1fr;gap:25px}
    .me-hours-card{max-width:480px}
    .me-benefit-grid{grid-template-columns:repeat(2,1fr);gap:18px}
    .me-benefit{border-right:0;padding:8px 14px}
    .me-category-grid{grid-template-columns:repeat(3,1fr)}
    .me-news-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
    .me-shell,.me-nav-inner{width:min(100% - 28px,1210px)}
    .me-hero{min-height:auto}
    .me-hero-grid{padding:42px 0}
    .me-hero h1{font-size:37px}
    .me-hero-links{gap:7px}
    .me-benefit-grid{grid-template-columns:1fr;padding:18px}
    .me-benefit{border-bottom:1px solid #edf1ef}
    .me-benefit:last-child{border-bottom:0}
    .me-latest-collection .collection{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .me-category-grid{grid-template-columns:repeat(2,1fr)}
    .me-stat-panel{grid-template-columns:repeat(2,1fr);gap:22px}
    .me-stat{border-right:0}
    .me-news-grid{grid-template-columns:1fr}
    .me-footer-grid{grid-template-columns:1fr 1fr}
    .me-footer-brand{grid-column:1/-1}
    .me-footer-contact{grid-column:1/-1}
    .me-footer-bottom .me-shell{padding:15px 0;align-items:flex-start;flex-direction:column;gap:10px}
}
@media(max-width:520px){
    .me-brand-copy strong{font-size:14px;max-width:180px}
    .me-brand-logo{width:36px;flex-basis:36px}.me-brand-logo img{max-width:36px}
    .me-hero h1{font-size:31px;letter-spacing:-1px}
    .me-hero-copy>p{font-size:13px}
    .me-search-form{height:54px}
    .me-search-form button{min-width:78px;height:44px;padding:0 12px}
    .me-search-form button i{display:none}
    .me-hours-card{padding:18px}
    .me-section-heading{align-items:flex-start;flex-direction:column}
    .me-category-grid{grid-template-columns:1fr}
    .me-footer-grid{grid-template-columns:1fr}
    .me-footer-col,.me-footer-contact{grid-column:auto}
}


/* =========================================================
   FOOTER V2 - lebih dekat dengan mockup
========================================================= */
.me-footer-v2{
    padding-top:58px!important;
    background:
        radial-gradient(circle at 100% 0%,rgba(33,151,105,.12),transparent 28%),
        linear-gradient(135deg,#0b2527,#091d20 55%,#07191c)!important;
}
.me-footer-grid-v2{
    display:grid;
    grid-template-columns:minmax(250px,1.45fr) .85fr .95fr .9fr minmax(250px,1.3fr);
    gap:42px;
    align-items:start;
    padding-bottom:40px;
}
.me-footer-brand-v2{min-width:0}
.me-footer-logo-row-v2{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:25px;
}
.me-footer-logo-v2{
    width:54px;
    height:62px;
    flex:0 0 54px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.me-footer-logo-v2 img{
    display:block;
    max-width:54px;
    max-height:62px;
    object-fit:contain;
}
.me-footer-brand-title{
    min-width:0;
}
.me-footer-brand-title strong{
    display:block;
    max-width:250px;
    color:#fff;
    font-size:20px;
    line-height:1.2;
    font-weight:800;
    word-break:normal;
    overflow-wrap:break-word;
}
.me-footer-brand-title small{
    display:block;
    margin-top:5px;
    color:#d8e1de;
    font-size:14px;
}
.me-footer-about{
    max-width:315px!important;
    margin:0!important;
    color:#becbc7!important;
    font-size:13px!important;
    line-height:1.85!important;
}
.me-footer-social{
    display:flex!important;
    flex-wrap:wrap;
    gap:12px!important;
    margin-top:25px!important;
}
.me-footer-social a,
.me-footer-social .me-social-placeholder{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    border-radius:50%!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
}
.me-footer-social a:hover{
    background:#159768!important;
    transform:translateY(-2px);
}
.me-footer-col-v2 h3,
.me-footer-contact-v2 h3{
    position:relative;
    margin:0 0 24px;
    padding-bottom:12px;
    color:#fff;
    font-size:17px;
    font-weight:800;
}
.me-footer-col-v2 h3:after,
.me-footer-contact-v2 h3:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:31px;
    height:2px;
    border-radius:10px;
    background:#45b985;
}
.me-footer-col-v2 a{
    display:block;
    margin-bottom:16px;
    color:#d2ddda!important;
    text-decoration:none!important;
    font-size:13px;
}
.me-footer-col-v2 a:before{
    content:"›";
    margin-right:10px;
    color:#4bc087;
    font-size:17px;
}
.me-footer-col-v2 a:hover{color:#fff!important}
.me-footer-contact-v2>a,
.me-footer-contact-v2>div{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:16px;
    color:#d2ddda!important;
    text-decoration:none!important;
    font-size:13px;
}
.me-footer-contact-v2 i{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(37,158,108,.13);
    color:#47bb84;
}
.me-footer-contact-v2 span{
    display:block;
    padding-top:8px;
    line-height:1.6;
}
.me-newsletter-v2{
    display:grid;
    grid-template-columns:58px 330px minmax(300px,1fr);
    align-items:center;
    gap:20px;
    margin-bottom:48px;
    padding:22px 28px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;
    background:rgba(255,255,255,.025);
}
.me-newsletter-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(36,159,108,.13);
    color:#59c894;
    font-size:21px;
}
.me-newsletter-copy strong{
    display:block;
    color:#fff;
    font-size:15px;
    margin-bottom:5px;
}
.me-newsletter-copy span{
    display:block;
    color:#bdc9c5;
    font-size:12px;
    line-height:1.6;
}
.me-newsletter-form{
    height:50px;
    display:flex;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    border-radius:9px;
    background:rgba(255,255,255,.025);
}
.me-newsletter-form input{
    flex:1;
    min-width:0;
    border:0!important;
    outline:0!important;
    padding:0 20px!important;
    color:#e9efed!important;
    background:transparent!important;
}
.me-newsletter-form input::placeholder{color:#818e8a!important}
.me-newsletter-form button{
    min-width:165px;
    border:0;
    border-left:1px solid rgba(255,255,255,.10);
    background:#39966c;
    color:#fff;
    font-weight:700;
    cursor:default;
}
.me-footer-bottom-v2{
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.14);
}
.me-footer-bottom-v2>.me-shell{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    color:#bfcac6;
    font-size:12px;
}
.me-footer-copy-v2,
.me-footer-links-v2{
    display:flex;
    align-items:center;
    gap:18px;
}
.me-footer-links-v2 a{
    color:#c6d0cd!important;
    text-decoration:none!important;
}
.me-footer-links-v2 a:hover{color:#fff!important}
.me-footer-links-v2 .me-back-top{
    width:46px;
    height:46px;
    margin-left:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.17);
    color:#fff!important;
}
@media(max-width:1100px){
    .me-footer-grid-v2{
        grid-template-columns:1.4fr 1fr 1fr;
    }
    .me-footer-contact-v2{grid-column:span 2}
    .me-newsletter-v2{
        grid-template-columns:58px 1fr;
    }
    .me-newsletter-form{grid-column:1/-1}
}
@media(max-width:760px){
    .me-footer-grid-v2{
        grid-template-columns:1fr 1fr;
        gap:32px 25px;
    }
    .me-footer-brand-v2,
    .me-footer-contact-v2{
        grid-column:1/-1;
    }
    .me-newsletter-v2{
        grid-template-columns:48px 1fr;
        padding:20px;
    }
    .me-footer-bottom-v2>.me-shell{
        padding:18px 0;
        flex-direction:column;
        align-items:flex-start;
    }
    .me-footer-copy-v2,
    .me-footer-links-v2{
        flex-wrap:wrap;
    }
}
@media(max-width:520px){
    .me-footer-grid-v2{grid-template-columns:1fr}
    .me-footer-brand-v2,
    .me-footer-contact-v2{grid-column:auto}
    .me-newsletter-v2{grid-template-columns:1fr}
    .me-newsletter-icon{display:none}
    .me-newsletter-form{grid-column:auto;height:auto;flex-direction:column;border:0;background:transparent}
    .me-newsletter-form input{
        min-height:48px;border:1px solid rgba(255,255,255,.14)!important;border-radius:8px;
        margin-bottom:9px;
    }
    .me-newsletter-form button{min-height:46px;border-radius:8px}
}


/* =========================================================
   LOGIN PAGE V2
   Background image: assets/images/login-library.jpg
   Diletakkan paling bawah agar meng-override style inline lama.
========================================================= */

.me-login-page{
    min-height:100vh;
    padding:32px;
    background:#f3f8f6;
}

.me-login-stage{
    width:min(1420px,100%);
    min-height:760px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(390px,.75fr);
    overflow:hidden;
    border:1px solid #dfe9e5;
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 60px rgba(16,52,40,.12);
}

.me-login-visual{
    position:relative!important;
    display:flex!important;
    align-items:flex-end!important;
    min-height:760px!important;

    /* Foto login yang sudah di-upload */
    background-image:
        linear-gradient(
            90deg,
            rgba(247,252,249,.14) 0%,
            rgba(247,252,249,.12) 45%,
            rgba(5,57,43,.18) 100%
        ),
        url("../images/login-library.jpg")!important;

    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
}

/* Matikan pseudo-background gradient lama agar foto terlihat */
.me-login-visual::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;

    background:
        linear-gradient(
            90deg,
            rgba(250,253,251,.93) 0%,
            rgba(250,253,251,.82) 39%,
            rgba(250,253,251,.35) 68%,
            rgba(250,253,251,.10) 100%
        )!important;
}

/* Hilangkan dekorasi radial lama yang menutupi foto */
.me-login-visual-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(5,70,53,.06)
        )!important;
}

.me-login-brand{
    position:relative!important;
    z-index:2!important;
    width:100%;
    padding:64px!important;
}

.me-login-brand h1{
    text-shadow:0 1px 1px rgba(255,255,255,.35);
}

.me-login-brand>p{
    max-width:640px!important;
    color:#30463d!important;
}

.me-login-benefits{
    background:rgba(5,83,61,.90)!important;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 34px rgba(5,61,46,.16);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* Card kanan dibuat sedikit lebih hidup */
.me-login-panel{
    position:relative;
    background:
        radial-gradient(circle at 100% 10%,rgba(21,151,104,.08),transparent 27%),
        linear-gradient(145deg,#fff,#f5faf8)!important;
}

.me-login-box{
    border:1px solid #dce8e3!important;
    box-shadow:
        0 18px 50px rgba(20,53,42,.10),
        0 2px 8px rgba(20,53,42,.04)!important;
}

.me-login-lock{
    box-shadow:inset 0 0 0 1px rgba(21,151,104,.06);
}

/* Form bawaan SLiMS */
.me-login-native input[type="text"],
.me-login-native input[type="email"],
.me-login-native input[type="password"]{
    width:100%!important;
    min-height:54px!important;
    padding:0 16px!important;
    border:1px solid #d7e4df!important;
    border-radius:10px!important;
    background:#f8fbfa!important;
}

.me-login-native input[type="text"]:focus,
.me-login-native input[type="email"]:focus,
.me-login-native input[type="password"]:focus{
    border-color:#159768!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(21,151,104,.10)!important;
}

/* Tombol login bawaan SLiMS */
.me-login-native input[type="submit"],
.me-login-native button[type="submit"],
.me-login-native .loginButton,
.me-login-native .memberButton,
.me-login-native .btn-primary{
    min-height:48px!important;
    padding:0 22px!important;
    border:0!important;
    border-radius:9px!important;
    background:linear-gradient(135deg,#0b865a,#159768)!important;
    color:#fff!important;
    font-weight:800!important;
    box-shadow:0 8px 20px rgba(13,124,84,.16)!important;
}

.me-login-native input[type="submit"]:hover,
.me-login-native button[type="submit"]:hover,
.me-login-native .loginButton:hover,
.me-login-native .memberButton:hover,
.me-login-native .btn-primary:hover{
    background:linear-gradient(135deg,#08734d,#11855c)!important;
}

/* Responsive */
@media(max-width:1050px){
    .me-login-stage{
        grid-template-columns:1fr;
    }

    .me-login-visual{
        min-height:500px!important;
        background-position:center!important;
    }

    .me-login-brand{
        padding:46px!important;
    }

    .me-login-panel{
        padding:38px!important;
    }
}

@media(max-width:650px){
    .me-login-page{
        padding:0!important;
        background:#fff!important;
    }

    .me-login-stage{
        min-height:100vh;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .me-login-visual{
        min-height:410px!important;
        background-position:58% center!important;
    }

    .me-login-visual::before{
        background:
            linear-gradient(
                90deg,
                rgba(250,253,251,.94),
                rgba(250,253,251,.70)
            )!important;
    }

    .me-login-brand{
        padding:32px 24px!important;
    }

    .me-login-panel{
        padding:26px 16px!important;
    }
}