
/* ============================================================
   Kartu properti custom (item-v7) - sevibu
   ============================================================ */
.hzc-listing{ height:100%; }
.hzc-card{
    position:relative; display:flex; flex-direction:column;
    height:100%; background:#fff; border:1px solid #e6ebf2;
    border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.06);
    transition:box-shadow .2s ease, transform .2s ease;
}
.hzc-card:hover{ box-shadow:0 10px 28px rgba(15,23,42,.12); transform:translateY(-2px); }
.hzc-stretched{ position:absolute; inset:0; z-index:1; }

/* ---------- Media ---------- */
.hzc-media{ position:relative; background:#eef2f6; }
.hzc-slider{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; }
.hzc-slide{ position:absolute; inset:0; opacity:0; transition:opacity .2s ease; }
.hzc-slide.is-active{ opacity:1; }
.hzc-slide img, .hzc-img{ width:100%; height:100%; object-fit:cover; display:block; }
.hzc-noimg{ width:100%; height:100%; background:#e2e8f0; }

.hzc-badge-type{
    position:absolute; left:12px; top:12px; z-index:3;
    background:#1a73e8; color:#fff; font-size:12.5px; font-weight:700;
    padding:6px 12px; border-radius:8px; line-height:1.3;
    box-shadow:0 2px 8px rgba(26,115,232,.35);
    max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.hzc-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:34px; height:34px; border-radius:50%; border:0;
    background:rgba(15,23,42,.55); color:#fff; font-size:13px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(2px); transition:background .18s ease;
}
.hzc-nav:hover{ background:rgba(15,23,42,.78); }
.hzc-prev{ left:10px; }
.hzc-next{ right:10px; }

.hzc-cert{
    position:absolute; left:12px; bottom:14px; z-index:3;
    background:#0f9d58; color:#fff; font-size:11.5px; font-weight:600;
    padding:5px 10px; border-radius:6px; line-height:1.3;
}

.hzc-counter{
    position:absolute; right:12px; bottom:14px; z-index:3;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(15,23,42,.72); color:#fff;
    font-size:12px; font-weight:600; padding:3px 6px 3px 10px; border-radius:6px;
}
.hzc-expand{
    width:24px; height:24px; border:0; border-radius:4px;
    background:transparent; color:#fff; display:inline-flex;
    align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.hzc-expand svg{ width:14px; height:14px; }

.hzc-progress{
    position:absolute; left:0; right:0; bottom:0; height:3px;
    background:rgba(255,255,255,.35); z-index:3;
}
.hzc-progress-bar{ display:block; height:100%; width:10%; background:#fff; transition:width .2s ease; }

/* ---------- Body ---------- */
.hzc-body{
    display:flex; flex-direction:column; flex:1 1 auto;
    padding:16px 16px 18px;
}
.hzc-price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hzc-price{ font-size:22px; font-weight:800; color:#1a73e8; line-height:1.2; letter-spacing:-.01em; }
.hzc-price-sub{ font-size:12.5px; font-weight:600; color:#94a3b8; }

.hzc-title{
    display:flex; align-items:flex-start; gap:8px;
    font-size:15px; font-weight:700; line-height:1.4; color:#0f172a;
    margin:0 0 8px; min-height:2.8em;
}
.hzc-title-icon{ width:18px; height:18px; flex:0 0 18px; color:#1a73e8; margin-top:2px; }
.hzc-title a{ color:inherit; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.hzc-addr{
    position:relative; z-index:4;
    display:flex; align-items:flex-start; gap:6px;
    font-size:12.5px; color:#475569; line-height:1.5; text-decoration:none !important;
    margin-bottom:12px; min-height:2.9em;
}
.hzc-addr svg{ width:15px; height:15px; flex:0 0 15px; color:#1a73e8; margin-top:1px; }
.hzc-addr span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1 1 auto; }
.hzc-addr-arrow{ width:14px !important; height:14px !important; flex:0 0 14px !important; color:#94a3b8 !important; margin-top:2px; }
.hzc-addr:hover span{ color:#1a73e8; }

.hzc-stats{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr));
    background:#f3f8ff; border-radius:10px; padding:10px 4px; margin-bottom:12px;
}
.hzc-stat{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    text-align:center; padding:0 4px; position:relative; min-width:0;
}
.hzc-stat + .hzc-stat::before{
    content:''; position:absolute; left:0; top:8%; bottom:8%;
    width:1px; background:#dfeafb;
}
.hzc-stat-icon{ color:#1a73e8; line-height:0; }
.hzc-stat-icon svg{ width:20px; height:20px; }
.hzc-stat-value{ font-size:12.5px; font-weight:700; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.hzc-stat-label{ font-size:10.5px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.hzc-feats{
    display:flex; align-items:center; gap:0; flex-wrap:nowrap; overflow:hidden;
    background:#f1f9f4; border-radius:8px; padding:8px 10px; margin-bottom:12px;
    min-height:38px;
}
.hzc-feat{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11.5px; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding:0 10px; position:relative; flex:1 1 0; min-width:0;
}
.hzc-feat:first-child{ padding-left:0; }
.hzc-feat + .hzc-feat::before{
    content:''; position:absolute; left:0; top:15%; bottom:15%;
    width:1px; background:#d6e8dd;
}
.hzc-feat svg{ width:13px; height:13px; flex:0 0 13px; color:#12a150; }

.hzc-actions{ display:flex; gap:10px; margin-top:auto; position:relative; z-index:5; }
.hzc-btn{
    position:relative; z-index:5;
    flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    height:40px; border-radius:8px; font-size:13px; font-weight:700;
    text-decoration:none !important; line-height:1; transition:.18s ease;
}
.hzc-btn svg{ width:16px; height:16px; flex:0 0 16px; }
.hzc-btn-call{ background:#fff; border:1.5px solid #1a73e8; color:#1a73e8; }
.hzc-btn-call:hover{ background:#f2f8ff; }
.hzc-btn-wa{ background:#1a73e8; border:1.5px solid #1a73e8; color:#fff; }
.hzc-btn-wa:hover{ background:#1667d0; border-color:#1667d0; }

/* ---------- Lightbox ---------- */
.hzc-lb{
    position:fixed; inset:0; z-index:100000; display:none;
    align-items:center; justify-content:center; background:rgba(2,6,23,.9);
}
.hzc-lb.is-open{ display:flex; }
.hzc-lb-img{ max-width:88vw; max-height:86vh; border-radius:8px; }
.hzc-lb-close, .hzc-lb-prev, .hzc-lb-next{
    position:absolute; border:0; background:rgba(255,255,255,.14); color:#fff;
    width:42px; height:42px; border-radius:50%; font-size:18px; cursor:pointer;
}
.hzc-lb-close{ top:18px; right:18px; }
.hzc-lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.hzc-lb-next{ right:16px; top:50%; transform:translateY(-50%); }
.hzc-lb-close:hover, .hzc-lb-prev:hover, .hzc-lb-next:hover{ background:rgba(255,255,255,.28); }

@media (max-width:575px){
    .hzc-price{ font-size:19px; }
    .hzc-title{ font-size:14px; }
    .hzc-stat-value{ font-size:11.5px; }
    .hzc-stat-label{ font-size:9.5px; }
}

.hzc-slider > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Harga kecil di single listing */
.hzs-price-sub{
    font-size:13px; font-weight:600; color:#94a3b8;
    line-height:1.4; margin-top:2px;
}
.property-price-wrap{ display:flex; flex-direction:column; }

/* Badge Featured di kanan atas */
.hzc-featured{
    position:absolute; right:12px; top:12px; z-index:3;
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:999px;
    background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
    color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em;
    line-height:1.2; text-transform:uppercase;
    box-shadow:0 4px 14px rgba(245,158,11,.45);
    overflow:hidden; pointer-events:none;
}
.hzc-featured svg{
    width:13px; height:13px; flex:0 0 13px;
    animation:hzc-twinkle 2.4s ease-in-out infinite;
}
.hzc-featured::after{
    content:''; position:absolute; top:0; left:-130%;
    width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-20deg);
    animation:hzc-shine 3.2s ease-in-out infinite;
}
@keyframes hzc-shine{
    0%{ left:-130%; }
    55%{ left:140%; }
    100%{ left:140%; }
}
@keyframes hzc-twinkle{
    0%,100%{ transform:scale(1) rotate(0deg); opacity:1; }
    50%{ transform:scale(1.18) rotate(8deg); opacity:.85; }
}
@media (prefers-reduced-motion: reduce){
    .hzc-featured::after, .hzc-featured svg{ animation:none; }
}
