@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

 :root{  
   --grad: linear-gradient(135deg, #A789FF 0%, #FF9DAD 100%);   
   --soft:#f5f5f5;   
   --text:#292929;   
   --muted:#707070;   
   --brand:#A789FF;   
   --card: 520px;   
   --gap: 20px;   
   --peek: 280px; }

 html, body { overflow-x: hidden; }

 *{box-sizing:border-box}
 body{   font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;   background:#fff; color:var(--text); }

.btn-grad-navbar{background:var(--grad); color:#fff; border:none;padding:17px 50px; border-radius:999px;font-weight: 400;font-size: 20px;}
.btn-grad-navbar:hover{ opacity:.95; color:#fff; }
.btn-grad{background:var(--grad); color:#fff; border:none;padding:17px 50px !important; border-radius:999px;font-weight: 400;font-size: 20px; margin: 64px 0px 0px;}
.btn-grad:hover{ opacity:.95; color:#fff; }

/* ===== Navbar ===== */
.navbar-brand{ display:flex; align-items:center; gap:.5rem; font-weight:700;font-size: 42px;vertical-align: middle;}
.navbar-brand img{width: 100%;height: 100%;}
.nav-link{ color:#707070 !important;font-weight: 400;font-size: 20px;}
.nav-link.is-active{   color:#292929; font-weight:600; position:relative; }


/* ===== Modal Auth ===== */
.title-grad{background: linear-gradient(135deg, #A789FF 0%, #FF9DAD 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;font-weight:700; text-align: center; margin-bottom: 13px;}
.form-control{border-radius:14px; padding:0.9rem 0.95rem; border-color:#eee; background:#f6f6fb; color: #707070;}
.auth-divider{ display:flex; align-items:center; gap:16px; color:#9aa; }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:#eee; }
.oauth-btn{ border-radius:14px; border:1px solid #eee; padding:.7rem 1rem; width:100%; background:#fff; }
.oauth-btn:hover {background: var(--grad);opacity: 0.8;}
.oauth-btn img{ height: 25px; }
.rounded-2xl{ border-radius: 20px; }
.auth-input input::placeholder {color: rgb(112, 112, 112,.5); }
.modal-bawah{font-weight: 400;font-size: 16px;text-align: center;color: #707070;}

.pager{display:flex;justify-content:center;align-items:center;gap:8px}
.pager a{display:inline-flex;align-items:center;justify-content:center;   height:40px;min-width:40px;padding:0 12px;border:1px solid #e5e7eb;   border-radius:10px;background:#fff;color:#707070;text-decoration:none}
.pager a:hover{background:#f9fafb}
.pager .pager-page.is-active{background: linear-gradient(135deg,#A789FF 0%,#FF9DAD 100%);color:#fff;border-color:transparent}
.pager .is-disabled{opacity:.4;pointer-events:none}
.pager i{font-size:18px;line-height:1}

.auth-input{ position: relative; }
.auth-input .left-ico{   position:absolute; left:12px; top:50%; transform:translateY(-50%);   color:#9aa; font-size:18px; }
.auth-input .form-control{ padding-left:40px; padding-right:40px; }
.auth-input .toggle-pass{   position:absolute; right:10px; top:50%; transform:translateY(-50%);   border:0; background:transparent; color:#9aa; cursor:pointer; padding:6px; }
.auth-input .invalid-tooltip {
  top: 100% !important;  
  left: auto !important;
  right: 0 !important; 
  transform: translateY(6px) !important;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 5;
  background: #fff;
  color: #ff0000a4;
  background: rgb(112, 112, 112,.1);
  border: none;
}

/* ubah posisi panahnya (arrow bubble) */
.auth-input .invalid-tooltip::before {content: "";position: absolute;top: -12px;right: 12px;border-width: 6px;border-style: solid;border-color: transparent transparent rgb(112, 112, 112,.1) transparent;}
.js-auth-link{background: linear-gradient(135deg, #A789FF 0%, #FF9DAD 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;}

/* ===== Hero Section ===== */
.hero-area{ padding: 60px 0px; }
.hero-lead{  max-width: 460px;font-weight: 400;font-size: 20px; padding: 28px 0px 5px; margin: 0px;}
.hero-title { font-weight: 500;font-style: Medium;font-size: 60px;line-height: 5rem; padding-right: 90px;}
.accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Cards layout to mimic the design */
.hero-wrap{position: relative;height: 520px;}
.hero-card{position: absolute;width: 424px;   height: fit-content !important;border-radius: 24px;overflow: hidden;background: #fff;border: 0;box-shadow: 0 24px 60px rgba(18, 7, 58, .12);transform: none;}
.hero-card img{width: 100%;height: 384px;object-fit: cover;display: block;}

.front-card{z-index: 2;left: 0;top: 0;padding: 18px;background: linear-gradient(to right, #A789FF 0%, #FF9DAD 100%);border-radius: 26px;}
.front-card .inner{background:transparent;border-radius: 14px;overflow: hidden;}
.front-card .inner img, .back-card .inner img{border-radius: 14px;}

.back-card{z-index: 1;left: 200px;top: 150px;background:#fff;padding: 18px;border-radius: 20px;box-shadow: 0 16px 48px rgba(0,0,0,.10);}
.card-text{padding-top: 20px;color: #fff; border-radius: 0px;}
.card-text .card-title {display: flex;align-items: center;gap: 4px;font-weight: 600;font-size: 24px;margin: 0;padding-bottom: 12px;color: #707070;}
.card-title .card-name {min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;max-width: 100%;}
.card-title .card-age {flex-shrink: 0;}
.card-text .card-desc{font-weight: 400;font-size: 18px;line-height: 1.5rem;display: -webkit-box;line-clamp: 2;   -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;min-height: calc(1.5rem * 2); }
.tag{padding: .45rem .8rem;border-radius: 8px;background: #f3f0ff50;font-weight: 400;font-size: 16px;margin-top: 12px;}
.card-tags {display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;gap: 10px;margin-top: 8px;width: 100%;}

/* === Tag individual === */
.card-tags .tag {display: inline-flex;justify-content: center;align-items: center;padding: 8px 14px;border-radius: 8px;   background: #f5f5f5;color: #707070;border: 1px solid #eef0f4;box-shadow: 0 6px 18px rgba(168,85,247,.08);white-space:   nowrap;flex: 1 1 auto;min-width: fit-content;max-width: 33%; }

.tilt-front { transform: rotate(3.62deg); }
.tilt-back  { transform: rotate(3.62deg); }

.card-img-wrap {position: relative; width: 100%;height: 390px;overflow: hidden;border-radius: 12px;}
.card-img-wrap img { width: 100%;height: 100%;object-fit: cover;display: block;}
.card-location {   position: absolute;bottom: 14px;left: 14px;color: #fff;font-size: 16px;font-weight: 500;display: flex;align-items: center;   gap: 6px;text-shadow: 0 1px 3px rgba(0,0,0,.6);background: #f3f0ff50;padding: 8px;border-radius: 8px; }
.card-location .dot {width: 8px;height: 8px;border-radius: 50%;background: #fff;display: inline-block;}
.card-actions {position: absolute;right: 14px;top: 50%;transform: translateY(-50%);display: grid;gap: 10px; z-index: 10 !important;}
.card-actions .action {   width: 44px;height: 44px;border-radius: 50%;background: #fff;border: none;display: flex; z-index: 10 !important;   align-items: center;justify-content: center;box-shadow: 0 6px 16px rgba(0,0,0,.15);font-size: 18px;color: #444;cursor: pointer;transition: .2s; }
.card-actions .action img {width: 28px;height: 28px;}
.card-actions .action:hover {background: var(--grad);color: #fff;}

.features-row{padding-top: 90px; margin: 0px;}
.features-row .item .title{font-weight: 500;font-style: Medium;font-size: 22px;line-height: 2rem; max-width: 80px;}
.features-row .item .desc{font-weight: 400;font-style: Regular;font-size: 20px;color: #707070;padding-top: 14px;}

.testi-area{ padding-top: 60px; position: relative; }
.testi-area::before{content:"";position:absolute; inset:0 auto 0 0;width: var(--peek);background: inherit;pointer-events:none; z-index:2;}
.testi-area .owl-stage {padding-right: var(--peek) !important;background: inherit;}
.testi-nav{width: 44px; height: 44px;}
.testi-area .owl-stage-outer {overflow: hidden;padding: 20px 10px !important;background: transparent !important;}
.testi-title{font-weight: 500;font-style: Medium;font-size: 46px;margin: 0px;}
.testi-card-name{font-weight: 500;font-style: Medium;font-size: 24px;color: #292929;}
.testi-card-role{font-weight: 500;font-style: Medium;font-size: 18px;color: #707070;}

.testi-avatar { width: 56px !important;height: 56px !important;border-radius: 50% !important;object-fit: cover;object-position: center;display: block;max-width: none;flex: 0 0 56px;}
.testi-card {background: #fff;border: 0;border-radius: 20px;padding: 22px 22px 18px;width: var(--card);}

.star { font-style: normal; font-size: 24px; line-height: 1; }
.star.full { color: #FFC400; }
.star.empty { color: #E4E6EB; }
.testi-text { font-weight: 400;font-style: Regular;font-size: 18px;color: #919191;}
.testi-text .read-more { color: var(--brand); text-decoration: none; }
.testi-text .read-more:hover { text-decoration: underline; }

/* ===== Layout section promo ===== */
.promo-duo { position: relative; padding: 64px 0; }
.promo-duo .container { position: relative; }

.promo-top{   position: relative;display: grid;grid-template-columns: 1fr 1fr;gap: 24px;align-items: center;padding: 32px 78px;border-radius: 20px;color:#fff;   background: linear-gradient(135deg, #A789FF 0%, #FF9DAD 100%);box-shadow: 0 20px 50px rgba(139,92,246,.25);z-index: 1;margin: 90px 90px 0px;height: 340px; }
.promo-copy-title{ font-weight: 500;font-style: Medium;font-size: 46px;padding-right: 80px;margin: 0px; }
.promo-copy-desc{ font-weight: 400;font-style: Regular;font-size: 20px;margin: 0px;padding-top: 20px; }
.promo-hero-wrap img{ position: absolute; max-width: 630px; left: 0px; top: -100px;}

.promo-cta{position: relative; background:#292929; color:#fff;border-radius:16px; padding:96px 24px; margin-top:-56px; z-index:5; overflow:hidden;}
.promo-cta::before{content:""; position:absolute; inset:0;   background-image:     linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),     linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);   background-size:100px 100px; pointer-events:none; }
.promo-cta .cta-inner{ max-width:860px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.promo-cta .cta-inner-title{ font-weight: 500;font-style: Medium;font-size: 46px;text-align: center;margin: 0px;max-width: 741px;line-height: 4rem;}
.promo-cta .cta-inner-desc{ font-weight: 400;font-style: Regular;font-size: 20px;text-align: left; }

.promo-cta .cta-grid{display: grid;grid-template-columns: 1fr 1fr;align-items: center;justify-content: center; gap: 16px 32px;  margin:0px;padding-top: 46px;opacity: 0.8;}
.promo-cta .cta-grid .btn-gradient{justify-self: center;margin: 0px auto;width: 300px;}

.btn-gradient{   display:inline-flex; align-items:center; justify-content: center; gap:10px;   padding:14px 24px; font-size: 20px;   border-radius:999px;   background: var(--grad);   color:#fff; text-decoration:none; font-weight:400;   box-shadow:0 14px 30px rgba(0,0,0,.18);   transition: transform .15s ease, filter .2s ease; }
.btn-gradient:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-gradient:active{ transform: translateY(0);     filter: brightness(.98); }

/* ===== Footer ===== */
.site-footer{position: relative;background:#262626;color:#fff;padding: 0 0 20px;overflow: hidden;}
.foot-grid{position: relative; z-index:1;display:grid; grid-template-columns: 1.3fr 1fr 1.3fr;gap: 40px 48px; align-items:flex-start;padding: 46px 0 64px;}

.brand-line{ display:flex; align-items:center; gap:10px; color:#fff; padding-bottom: 24px; }
.brand-line svg{ color:#fff; }
.footer-brand{ font-weight:700; font-size: 42px; }
.foot-text{ color:#fff; font-weight: 400;font-size: 18px;margin: 0px;padding-bottom: 46px; }
.socials{ display:flex; gap:12px; }
.socials a{width:60px; height:60px; border-radius:50%;display:grid; place-items:center;color:#fff; text-decoration:none;   background:#343434;box-shadow: 0 6px 14px rgba(0,0,0,.18);transition: transform .15s ease, filter .2s ease; }
.socials i{font-size: 24px !important;}
.socials a:hover{ background: var(--grad); transform: translateY(-1px); }

.foot-title{font-weight: 500;font-style: Medium;font-size: 24px;margin: 0px;padding: 20px 0 39px;}
.foot-addr,.foot-small{font-weight: 400;font-style: Regular;font-size: 20px;line-height: 1.6rem;margin:0;color: #fff; }

.footer-subscribe{   display:flex; align-items:center; gap:10px;   background:#ffffff21; border:1px solid rgba(255,255,255,.1);   border-radius:999px; padding:10px 12px 10px 20px; max-width: 360px; margin-top: 32px; }
.footer-subscribe .ico{ color:#cfcfcf; display:grid; place-items:center; }
.footer-subscribe .ico svg{ width:18px; height:18px; }
.footer-subscribe input{flex:1; background:transparent; border:0; outline:0;color:#fff; font: inherit;}
.footer-subscribe input::placeholder{ color:#ffffff; }
.footer-subscribe .send{width:36px; height:36px; border-radius:50%;border:0; cursor:pointer; color:#fff;   display:grid; place-items:center;background: transparent;box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.footer-subscribe .send svg{ width:18px; height:18px; }

.footer-about{position:relative; z-index:1;font-size: 18px;font-weight: 400;margin:0px;padding-bottom: 64px;max-width: 933px;}
.footer-line{border:0; height:2px; background: #707070;margin: 0 0 24px;}
.footer-copy{font-weight: 400;font-size: 18px;color: #fff;}

.site-footer .brand-line i.bi{font-size: 24px;line-height: 1;color: #fff;}
.site-footer .socials a i.bi{font-size: 16px;line-height: 1;}
.site-footer .footer-subscribe .ico i.bi { font-size: 18px; line-height: 1; color:#cfcfcf; }
.site-footer .footer-subscribe .send i.bi { font-size: 18px; line-height: 1; }
.site-footer .socials a:hover{ background: var(--grad); transform: translateY(-1px); }

/* ===== Navbar (logged-in) ===== */
.app-navbar {position: sticky;top: 0;z-index: 50;background: #fff;font-family: inherit;}
.app-navbar__container{max-width: 1320px;margin: 0 auto;height: 73px;padding: 0 12px;display: flex;align-items: center;justify-content: space-between;}
.app-navbar__menu{display:flex;align-items:center;gap:16px; list-style:none; margin:0; padding:0}
.app-navbar__pill{   --grad1:#A855F7; --grad2:#F472B6;   display:inline-flex;align-items:center;gap:10px;   padding:14px 24px;border-radius:999px;   background: #ffffff;   box-shadow: 0 8px 24px rgba(175,120,250,0.12);   text-decoration:none;color:#707070;font-weight:400;   transition: transform .15s ease, box-shadow .2s ease, color .2s ease, background .2s ease;font-size: 20px; }
.app-navbar__pill:hover{transform: translateY(-1px); color:#4b5563; box-shadow:0 10px 28px rgba(175,120,250,0.16)}
.app-navbar__pill.is-active{   color:#292929;   font-weight: 500;   background: linear-gradient(0deg, rgba(248,244,255,.7), rgba(255,255,255,.9));   box-shadow: 0 10px 30px rgba(168,85,247,.18); }

.app-navbar__pill-ic{width:18px;height:18px;display:inline-flex}
.app-navbar__right{display:flex;align-items:center;gap:16px}
.app-navbar__icon{   width:60px;height:60px;border-radius:999px;border:none;cursor:pointer;   display:inline-flex;align-items:center;justify-content:center;   background: rgba(248,246,255,.8);   box-shadow: inset 0 0 0 1px rgba(168,85,247,.08), 0 8px 24px rgba(168,85,247,.08); }
.app-navbar__icon svg{width:20px;height:20px;fill:#a78bfa;opacity:.95}
.app-navbar__icon:hover{background:#fff;box-shadow:0 10px 30px rgba(168,85,247,.18)}

/* Profile */
.app-navbar__profile{position:relative;display:flex;align-items:center;gap:10px}
.app-navbar__avatar{   width:60px;height:60px;border-radius:50%;object-fit:cover;   box-shadow:0 4px 14px rgba(0,0,0,.08) }
.app-navbar__profile-text{display:flex;flex-direction:column;line-height:1}
.app-navbar__name{font-weight: 600;font-style: SemiBold;font-size: 18px;color: #292929;line-height: 2rem;}
.app-navbar__plan{font-weight: 400;font-size: 14px;color: #707070;}
.app-navbar__caret{   width:28px;height:28px;border-radius:999px;border:none;background:transparent;cursor:pointer;   display:flex;align-items:center;justify-content:center; }
.app-navbar__dropdown{   position:absolute; right:0; top:calc(100% + 10px);   min-width:180px; background:#fff; border-radius:12px;   padding:8px; display:none; }
.app-navbar__dropdown.is-open{display:block}
.app-navbar__dropdown a,
.app-navbar__dropdown button{   display:block; width:100%; text-align:left;   padding:10px 12px; border-radius:10px;   color:#374151; text-decoration:none; background:none; border:0; font:inherit; cursor:pointer; }
.app-navbar__dropdown a:hover,
.app-navbar__dropdown button:hover{background:#f3f4f6}
.app-navbar__auth{display:flex;gap:10px}
.app-navbar .btn{padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.app-navbar .btn-outline{border:1px solid #e5e7eb;color:#374151;background:#fff}
.app-navbar .btn-outline:hover{background:#f9fafb}
.app-navbar .btn-primary{background:linear-gradient(45deg,#A855F7,#F472B6);color:#fff;border:0}
.app-navbar .btn-primary:hover{filter:brightness(.98)}

.hero-card-online{position: relative;width: 424px;   height: fit-content !important;border-radius: 24px;overflow: hidden;background: #fff;border: 0;box-shadow: 0 24px 60px rgba(18, 7, 58, .12);transform: none;}
.back-card-online{z-index: 1;background:#fff;padding: 18px;border-radius: 20px;box-shadow: 0 16px 48px rgba(0,0,0,.10);}

/* ===== FAQ ===== */
.faq-area { padding: 60px 0; }
.title-faq{font-weight: 500;font-style: Medium;font-size: 46px;line-height: 69px;text-align: center;color: #292929;padding-bottom: 24px;margin: 0px;}
.text-faq{font-weight: 400;font-style: Regular;font-size: 20px;text-align: center;color: #707070;max-width: 837px;margin: 0px auto;padding-bottom: 64px;}

.faq-item{border-radius:14px; overflow:hidden;background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06);margin-bottom: 32px;}
.faq-head{   width:100%; border:0; background:transparent; color:#292929;display:flex; align-items:center; justify-content:space-between;gap:14px;   padding:18px 18px 18px 20px;cursor:pointer; text-align:left; font-weight:600; font-size:22px;font-weight: 500;line-height: 32px;}
.faq-body{display:grid;grid-template-rows: 0fr;transition: grid-template-rows .35s ease, opacity .25s ease;opacity: 0;margin: 0;}
.faq-body__inner{overflow:hidden;padding: 0 20px;color:#fff;transition: padding .35s ease;font-weight: 400;font-size: 20px;line-height: 32px;}

.faq-item.is-open{ background:#FF9DAD; border-color:transparent; }
.faq-item.is-open .faq-head{ color:#fff; }
.faq-item.is-open .faq-body{ grid-template-rows: 1fr; opacity:1; }
.faq-item.is-open .faq-body__inner{ padding:16px 20px 18px; }

.faq-ico{   width:32px; height:32px; flex:0 0 32px;border-radius:50%; border:1px solid #e5e7eb;display:inline-flex;   align-items:center; justify-content:center;color:#9aa; position:relative;}
.faq-ico::before, .faq-ico::after{content:""; position:absolute; background: currentColor; border-radius:2px;}
.faq-ico::before{ width:14px; height:2px; }
.faq-ico::after{ width:2px; height:14px; }

.faq-item.is-open .faq-ico{ color:#fff; border-color:rgba(255,255,255,.55); }
.faq-item.is-open .faq-ico::after{ display:none; }

/* ===== Profile (scoped, no conflicts) ===== */
.profile-screen { max-width: 1320px;padding: 60px 12px;   --ov-avatar-w: 180px;   --ov-avatar-h: 240px;   --ov-avatar-raise: 80px;}

.profile-screen .profile-top-grid{display:grid;grid-template-columns: .8fr 1.5fr .8fr;gap:18px;align-items:stretch;}
.profile-screen .profile-bottom-grid{display:grid; grid-template-columns: .8fr 1.5fr .8fr; gap:18px; margin-top:60px;}
.profile-screen .profile-header{ position:relative; border-radius:20px; overflow:visible; }
.profile-screen .profile-top-grid .profile-header{grid-column: 1 / span 2;}
.profile-screen .profile-top-grid .sm-card{grid-column: 3;}
.profile-screen .profile-cover{ position:relative; height:300px; border-radius:20px; overflow:hidden; background:#f5f5f5; box-shadow:0 24px 60px rgba(18,7,58,.12); }
.profile-screen .profile-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.profile-screen .cover-actions{position:absolute; right:12px; top:12px;display:flex; gap:12px; align-items:center;}
.profile-screen .cover-actions.is-pills .cover-pill{   display:inline-flex; align-items:center; gap:10px;background:#fff; color:#2b2b2b; text-decoration:none;padding:8px 20px; border-radius:999px;   border:1px solid #eef0f4;box-shadow:0 10px 24px rgba(0,0,0,.12);font-weight:500; }
.cover-pill.readonly { pointer-events: none; cursor: default; }
.profile-screen .cover-actions.is-pills .cover-pill:hover{transform: translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.16);}
.profile-screen .cover-actions.is-pills .pill-ico{width:28px; height:28px; border-radius:10px;display:inline-grid; place-items:center;background: transparent;}
.profile-screen .cover-actions.is-pills .pill-ico i{color:#fff; font-size:14px; line-height:1;}
.profile-screen .cover-actions.is-pills .pill-text,
.profile-screen .cover-actions.is-pills .js-like-count,
.profile-screen .cover-actions.is-pills .pill-text b{font-weight: 400;font-size: 18px;}
.profile-screen .circle-btn{   width:36px; height:36px; border-radius:50%; border:0; background:#fff; color:#444;   display:inline-grid; place-items:center; box-shadow:0 8px 18px rgba(0,0,0,.15); }
.profile-screen .circle-btn:hover{ background:var(--grad); color:#fff; }

.profile-screen .profile-overlay-wrap{ position:absolute; left:0; right:0; bottom:-36px; padding:0 20px; }
.profile-screen .profile-overlay{position:relative; margin:0;background:#292929; color:#fff; border-radius:14px; padding:40px 20px;z-index:1;overflow: visible; height: 220px;}
.profile-screen .overlay-grid{   display:grid; grid-template-columns:160px 1fr 1.2fr; gap:18px;   align-items: start;grid-template-columns: var(--ov-avatar-w) 1fr 1.2fr; }

.profile-screen .ov-avatar{   position: relative !important;   width: var(--ov-avatar-w) !important;   height: var(--ov-avatar-h) !important;   margin-top: calc(-1 * var(--ov-avatar-raise)) !important;   border-radius: 14px;   background: #fff;   overflow: hidden;   box-shadow: 0 18px 44px rgba(0,0,0,.18); }
.profile-screen .ov-avatar img{   position: absolute !important;   inset: 0 !important;   width: 100% !important;   height: 100% !important;   object-fit: cover !important;   display: block !important;   border-radius: inherit !important;}

.profile-screen .ov-avatar.is-empty .ph-ico{    position: absolute; inset: 0; margin: auto;   width: 60px; height: 60px; border-radius: 50%;   background: var(--grad);   box-shadow: 0 14px 24px rgba(0,0,0,.15); }

/* ===== Overlay: tata letak OV Main | divider | OV About ===== */
.profile-screen .ov-main{   min-width: 0;   position: relative;   padding-right: 24px;   overflow: hidden; }
.profile-screen .ov-main::after{   content: "";   position: absolute;   right: 0; top: 0; bottom: 0;   width: 1px;   background: rgba(255,255,255,.28);border-radius: 1px; }

.profile-screen .ov-location{ font-weight: 400; font-size: 16px; margin-bottom: 32px; background-color: rgb(255, 255, 255,.1); border-radius: 8px; padding: 6px 12px; width: fit-content; }
.profile-screen .ov-name{ margin: 2px 0 6px; font-weight: 500; font-style: Medium; font-size: 24px;  }
.profile-screen .ov-job{    display: -webkit-box;    line-clamp: 2;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2; overflow: hidden;   word-break: break-word; overflow-wrap: anywhere;   opacity: .85; }

/* kolom About di sisi kanan */
.profile-screen .ov-about{   padding-left: 24px;align-self: start; }
.profile-screen .ov-about-title{   color: #fff;   opacity: .9;   margin: 0 0 8px;   font-weight: 500; }
.about-full{   white-space: pre-wrap; font-size: 16px;   line-height: 1.6;   color: #292929; }
/* — About 3 baris + Read More — */
.profile-screen .ov-about-text{   position: relative;   line-height: 1.5;   font-size: 16px;   min-height: calc(3 * 1.5em); display: -webkit-box;   line-clamp: 3;   -webkit-box-orient: vertical;   -webkit-line-clamp: 3;   overflow: hidden;   max-height: calc(3 * 1.5em); }
.profile-screen .ov-about-text.clamp-3::after{   content:"";   position:absolute; left:0; right:0; bottom:0;   height: 1.5em;   background: linear-gradient(to bottom, rgba(41,41,41,0), rgba(41,41,41,.6)); }
.profile-screen .ov-about-text.is-expanded{   line-clamp: 0;   -webkit-line-clamp: unset;   max-height: none; }
.profile-screen .about-read-more{   display: inline-block;   color: #A789FF;   text-decoration: none;   font-weight: 500;   font-size: 16px; }
.profile-screen .about-read-more:hover{ text-decoration: none; }


/* ===== Cards umum (tidak berubah) ===== */
.profile-screen .profile-card{background:#fff;  border-radius:16px; padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.06); display: flex;flex-direction: column;}
.profile-screen .profile-card .card-body{flex: 1;display: flex;}
.profile-screen .sm-card{ min-height:300px; }
.profile-screen .card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.profile-screen .card-head h4{ font-weight: 500;font-style: Medium;font-size: 20px;color: #292929;align-items: center;margin: auto 0; }
.profile-screen .icon-btn{ width:28px; height:28px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#707070; display:inline-grid; place-items:center; }
.profile-screen .icon-btn:hover{ background:#f9fafb; }

.profile-screen .fact-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; width: 100%; }
.profile-screen .fact-list li{   display: grid;   grid-template-columns: 48px 1fr !important;   grid-template-rows: auto auto;   grid-template-areas:     "ico label"     "ico value";   align-items: center;   gap: 4px 12px;   padding: 14px 16px;   box-shadow:0 12px 24px rgba(0,0,0,.03);   border-radius: 8px; }
.profile-screen .fi-ico{   grid-area: ico;width: 48px; height: 48px;border-radius: 999px;display: grid;   place-items: center;background: #f4f6f9;color: inherit;font-size: 24px; }
.profile-screen .fi-label{ grid-area: label;font-size: 14px;line-height: 1.1;color: #707070;margin: 0; }
.profile-screen .fact-list li > b{grid-area: value;display: block;font-weight: 500;font-size: 18px;color: #2d2d2d;margin: 0;}

.profile-screen .album-grid{   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 14px;   width: 100%;   height: 100%;   align-items: stretch;  }
.profile-screen .album-item{ height: 100%;   aspect-ratio: auto !important;   border-radius: 14px;   border: 1px solid #eef0f4;   overflow: hidden;   background: #f5f5f5; }
.profile-screen .album-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-screen .add-tile{ display:grid; place-items:center; }
.profile-screen .add-tile .plus{   width:54px; height:54px; border-radius:999px; background:var(--grad); position:relative; box-shadow:0 12px 24px rgba(0,0,0,.12); }
.profile-screen .add-tile .plus::before,
.profile-screen .add-tile .plus::after{ content:""; position:absolute; inset:0; margin:auto; background:#fff; border-radius:2px; }
.profile-screen .add-tile .plus::before{ width:22px; height:2px; }
.profile-screen .add-tile .plus::after{ width:2px; height:22px; }

/* Social */
.profile-screen .socials-list{ display:grid; gap:10px; }

/* Preferences chips */
.profile-screen .chip-wrap{ display:flex; flex-wrap:wrap; gap:10px !important; align-items: flex-start;height: auto !important;flex: 1 1 auto !important;   align-content: flex-start !important; }
.profile-screen .chip{   display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px;   background:#f5f5f5; border:1px solid #eef0f4; color:#555;white-space: nowrap; }

/* ===== Modal (scoped) ===== */
.modal-backdrop{   position:fixed; inset:0; background:rgba(0,0,0,.35);   display:none; align-items:center; justify-content:center;   z-index:1100 !important; padding:16px; }
.modal-backdrop.is-open{ display:flex; }
.modal-sheet{   width:100%; max-width:520px;   background:#fff; border-radius:16px;   box-shadow:0 30px 80px rgba(0,0,0,.25);   max-height:100%;   display:flex;   flex-direction:column;   overflow: auto;           /* sebelumnya: overflow:hidden */ }
.modal-body {   overflow-y: auto;max-height: calc(90vh - 120px);   padding-right: 8px; }

/* scrollbar halus */
.modal-body::-webkit-scrollbar {   width: 8px; }
.modal-body::-webkit-scrollbar-thumb {   background: #e0e0e0;   border-radius: 8px; }
.modal-body::-webkit-scrollbar-thumb:hover {   background: #cfcfcf; }

.modal-form{  display: flex;   flex-direction: column;padding: 14px; }
.modal-head{   display:flex; align-items:center; justify-content:space-between;   padding:8px 6px 12px 6px; }
.modal-head h5{   margin:0;color:#292929;font-weight: 500; font-size: 20px; }
.modal-close{   width:35px; height:35px; border-radius:999px; border:1px solid #e5e7eb; background:#fff;   display:inline-grid; font-size: 20px; place-items:center; cursor:pointer; color:#707070; }
.modal-close:hover{ background:#f9fafb; }

.modal-body{ display:grid; gap:10px; padding:6px 4px 14px; }
.modal-label{ font-weight: 500; font-style: Medium; font-size: 18px; color: #292929;  }

.modal-foot{ padding-top:6px; }
.w-100{ width:100%; }

/* === Social media: versi compact vertikal (seperti mockup) === */
.profile-screen .socials-list.socials-compact{   display: flex !important;   flex-direction: column;   gap: 12px;    width: 100%; }
.profile-screen .socials-list.socials-compact .soc-card{   display: flex; align-items: center; gap: 10px;   padding: 10px 12px;   border-radius: 12px;   background: #fff;   text-decoration: none;   color: #2b2b2b;   box-shadow: 0 8px 16px rgba(0,0,0,.04);   width: 100%;   box-sizing: border-box;       /* pastikan padding+border dihitung */   display: flex;   }
.profile-screen .socials-list.socials-compact .soc-card:hover{   background: #fafbff;   transform: translateY(-1px);   box-shadow: 0 12px 22px rgba(0,0,0,.06); }
.profile-screen .socials-list.socials-compact .soc-ico{   width: 48px; height: 48px; border-radius: 10px;   display: grid; place-items: center;   background: transparent; color: #fff; }
.profile-screen .socials-list.socials-compact .soc-ico img{   width: 48px; height: 48px; }
.profile-screen .socials-list.socials-compact small{   display: block; color: #9aa3af; margin-bottom: 2px; }
.profile-screen .socials-list.socials-compact .handle{   color: #2b2b2b; font-weight: 500; }

/* ===== Preferences modal (scoped) ===== */
.pref-modal .modal-body{ padding-top: 2px; }
.pref-accordion{ display: grid; gap: 4px; }

/* item */
.pref-item{   border:1px solid #eef0f4; border-radius:14px; background:#fff;   overflow:hidden;   box-shadow: 0 6px 16px rgba(0,0,0,.04); }
.pref-head{   width:100%; text-align:left; background:#fff; border:0; cursor:pointer;   padding:12px 14px; font-weight:600; color:#2d2d2d;   display:flex; align-items:center; justify-content:space-between; font-size: 18px; }
.pref-head .chev{   width:18px; height:18px; border-right:2px solid #9aa3af; border-bottom:2px solid #9aa3af;   transform: rotate(-45deg); transition: transform .2s ease; }
.pref-item.is-open .pref-head .chev{ transform: rotate(135deg); }


/* option (radio yang tampil seperti checkbox) */
.pref-option{   display:flex; align-items:center; gap:10px;   padding:6px 10px;   margin: 0px !important; }
.pref-option input[type="radio"]{   appearance:none; -webkit-appearance:none; -moz-appearance:none;   width:18px; height:18px; border-radius:4px; border:1px solid #cfd6e4;   display:inline-block; position:relative; outline:none; cursor:pointer;   background:#fff; }
.pref-option input[type="radio"]:checked{   border-color: transparent;   background: linear-gradient(135deg,var(--grad-start,#8b5cf6),var(--grad-end,#ec4899));   box-shadow: 0 0 0 3px #fff inset; }
.pref-option span{ color:#2b2b2b; }

/* kedua tombol selalu sama lebar */
.btn-row-eq .btn {   flex: 1 0 0;min-width: 0;border-radius: 30px;   font-weight: 600;   margin-top: 16px; }
.btn-row-eq .btn-outline-secondary  {   background:#fff; color:#555; border:1px solid #ddd; }
.btn-row-eq .btn-apply, .btn-row-eq .btn-reset{   font-size: 16px !important; }

/* === Preferences Modal Accordion (scoped) === */
#pref-modal .pref-panel{   display: grid;   gap: 0px;   box-sizing: border-box;   overflow: hidden;   padding: 0 10px;                        /* no vertical padding saat tertutup */   margin: 0 !important;   transition: max-height .25s ease, padding .2s ease; }

/* saat terbuka – kasih ruang bawah yang cukup */
#pref-modal .pref-item.is-open > .pref-panel {   overflow: auto; }

/* jarak antar option + align rapi */
#pref-modal .pref-option{ display:flex; align-items:center; gap:10px; }
#pref-modal .pref-option + .pref-option{ margin-top:8px; }
/* sentuhan tambahan: sedikit ruang di bawah item terakhir */
#pref-modal .pref-panel .pref-option:last-child{ padding-bottom:12px !important; }

.profile-screen .ov-btn{   width:36px;   height:36px;   border-radius:8px;   border:none;   display:inline-flex;   align-items:center;   justify-content:center;   background:#fff;   color:#444;   box-shadow:0 6px 16px rgba(0,0,0,.15);   cursor:pointer;   transition: all .2s ease;   font-size:18px; }
.profile-screen .ov-btn:hover{   background:var(--grad);   color:#fff;   transform: translateY(-1px); }
.profile-screen .ov-btn-delete:hover{   background: linear-gradient(135deg,#ef4444,#f87171);}
.profile-screen .ov-btn-edit:hover{   background: linear-gradient(135deg,#a78bfa,#ec4899); }

/* Upload box (match modal style) */
.upload-box{   display:block; position:relative; border:1px solid #eef0f4; background:#f6f6fb;   border-radius:14px; padding:14px; cursor:pointer; overflow:hidden;   min-height:64px; }
.upload-box.is-large{ min-height:160px; display:grid; place-items:center; }
.upload-inner{ text-align:center; color:#707070; }
.upload-inner b{ display:block; color:#2b2b2b; margin-top:6px; }
.upload-inner small{ display:block; color:#9aa3af; margin-top:6px; }
.upload-ico{ width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.06) }
.upload-ico i{ color:#a78bfa; font-size:18px; }

.upload-preview{   position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;   border-radius:inherit; }
.upload-box.is-avatar {   height: 250px; }

/* ---- Avatar preview di modal ---- */
.upload-box[data-preview-img="avatar"],
.upload-box[for="avatar-input"],
.upload-box:first-of-type {   height: 240px; width: 180px;  aspect-ratio: 4 / 3; border-radius: 12px;   overflow: hidden;   margin: 0 auto; }

/* Preview image di dalamnya */
.upload-box[for="avatar-input"] .upload-preview {   width: 100%;   height: 100%;   object-fit: cover;display: block;   border-radius: 12px; }
.upload-box[for="avatar-input"] .upload-inner {   width: 100%;   height: 100%;   display: flex;   flex-direction: column;   justify-content: center;   align-items: center; }

.position-relative { position: relative; }
.cursor-pointer { cursor: pointer; }

.stretched-link {   position: absolute; inset: 0; z-index: 5;   background: transparent; border: 0; padding: 0; margin: 0;   text-indent: -9999px; }

.guest-locked .card-visual {   filter: blur(6px);   opacity: .55;   transition: filter .2s ease, opacity .2s ease; }
.guest-locked:hover .card-visual { opacity: .65; }

.lock-badge {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   padding: 12px 22px;   border-radius: 20px;   background: linear-gradient(135deg, rgb(167, 137, 255,.5) 0%, rgb(255, 157, 173,.5) 100%);   backdrop-filter: blur(8px) saturate(160%);   -webkit-backdrop-filter: blur(8px) saturate(160%);   color: #fff;   font-weight: 500;   font-size: 18px;   letter-spacing: 0.3px;   text-align: center;   white-space: nowrap;   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);   border: 1px solid rgba(255, 255, 255, 0.25);   z-index: 6;   opacity: 0;   transform: translate(-50%, -60%) scale(0.9);   transition: all 0.3s ease; }
.guest-locked:hover .lock-badge {   opacity: 1;   transform: translate(-50%, -50%) scale(1); }
.guest-locked:hover .lock-badge {   box-shadow: 0 0 20px rgb(255, 255, 255,.8); }

/* State aktif (setelah like) sama dengan hover */
.card-actions .action.is-liked,
.card-actions .action.is-liked:hover {   background: var(--grad);   color: #fff;   transform: translateY(-1px); }

@keyframes swap-flip-fade-out {   0%   { opacity: 1; transform: scale(1) rotateY(0deg); }   100% { opacity: 0; transform: scale(0.96) rotateY(90deg); } }
@keyframes swap-flip-fade-in {   0%   { opacity: 0; transform: scale(1.04) rotateY(-90deg); }   100% { opacity: 1; transform: scale(1) rotateY(0deg); } }

/* gunakan kelas yang sama seperti JS */
.js-card.is-swapping {   animation: swap-flip-fade-out 320ms ease forwards;   pointer-events: none; }

.js-card.is-entering {   animation: swap-flip-fade-in 360ms ease forwards; }

/* Likes modal */
#likesModal .modal-content{ box-shadow: 0 24px 60px rgba(18,7,58,.12); }
#likesList .like-row:last-child{ border-bottom:0; }

/* === Likes Bubble (sama seperti screenshot) === */
.likes-bubble{position:fixed; z-index:1060;}
.likes-bubble.is-hidden{display:none;}
.likes-bubble__card{   position: relative;   background:#fff;   border-radius:12px;   padding: 12px 0px;   box-shadow:0 12px 40px rgba(22, 26, 29, .15);   width: 340px; overflow: hidden; }

/* tombol close kecil di pojok kanan atas kartu */
.likes-close{   position:absolute;   top:8px; right:10px;   border:none; background:transparent;   font-size:28px; line-height:1; cursor:pointer;   color:#9AA0A6; }
.likes-close:hover{ color:#566074; }
.likes-bubble__arrow{   position:absolute; width:12px; height:12px;   background:#fff; transform:rotate(45deg);   box-shadow:-2px -2px 3px rgba(22,26,29,.06); }

/* list container: tinggi diatur via JS ketika >4 item */
.likes-list{ padding: 8px; border-radius: 8px !important;}
.likes-empty{   color:#9AA0A6; font-size:16px;   text-align:center; padding:24px 8px; }

/* item */
.likes-item{   display:flex; gap:12px;   align-items:center;   background:#fff;   border-radius:12px;   padding:10px 12px;   box-shadow: 0 1px 0 rgba(22,26,29,.06);   margin: 6px 4px; cursor:default; }
.likes-item--link{cursor:pointer;}
.likes-bubble .likes-avatar{   width:60px !important; height:60px !important; border-radius:50%;   object-fit:cover; flex:0 0 60px; }

.likes-main{ flex:1; min-width:0; }
.likes-top{   display:flex; align-items:center; gap:8px; }
.likes-name{   font-weight:500; color:#1F2937; font-size:16px; line-height:1.2; }
.likes-date{   margin-left:auto; color:#292929;   font-size:14px; white-space:nowrap;   font-weight:500; }
.likes-sub{   margin-top:4px; color:#707070;   font-size:14px; }

/* scrollbar halus saat >4 item */
.likes-list{ scrollbar-width:thin; }
.likes-list::-webkit-scrollbar{ width:6px; }
.likes-list::-webkit-scrollbar-thumb{ background:#E5E7EB; border-radius:6px; }

/* ==== Chat UI (namespaced, tidak bentrok) ==== */
.chat-page { max-width: 900px; }
.chat-card { background: #fff; border: 1px solid #eee; overflow: hidden; }

.chat-header {   display: flex; align-items: center; gap: 12px;   padding: 12px 16px; border-bottom: 1px solid #f0f0f0;   background: linear-gradient(135deg, rgba(167,137,255,.06), rgba(255,157,173,.06)); }
.chat-back { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; }
.chat-back:hover { background:#f7f7fb; }
.chat-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.chat-title .name { font-weight:600; color: var(--text); line-height: 1.1; }
.chat-title .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chat-profile-link{text-decoration: none; color: #707070; font-size: 16px;}
.chat-thread {   max-height: 600px;   min-height: 320px;   overflow-y: auto;   padding: 16px;   background: #fafafb;   scroll-behavior: smooth;   border-radius: 0px; }

.chat-thread::-webkit-scrollbar {   width: 6px; }
.chat-thread::-webkit-scrollbar-thumb {   background: rgba(0,0,0,0.15);   border-radius: 4px; }
.chat-thread::-webkit-scrollbar-thumb:hover {   background: rgba(0,0,0,0.3); }

.chat-item .bubble {   padding: 10px 12px;   border-radius: 16px;   font-size: 16px !important;   line-height: 1.35;   word-wrap: break-word;   word-break: break-word;   background: #fff;   border: 1px solid #eee;   color: var(--text); }
.chat-item.is-me .bubble {   background: var(--grad);   color: #fff;   border-color: transparent; }
.chat-item .meta {   font-size: 11px; color: #9aa; margin-top: 6px; }

.chat-form {   position: sticky; bottom: 0;   display: flex; gap: 10px; align-items: center;   padding: 12px; background: #fff; border-top: 1px solid #f0f0f0;   border-radius:  0px 0px 16px 16px; }
.chat-input.form-control {   background:#f6f6fb; border-color:#eee; color: var(--muted);   border-radius: 20px; padding: .75rem 1rem; }
.chat-send.btn {   border-radius: 999px; padding: .65rem .9rem; border: 0;   background: var(--grad); }
.chat-send.btn:disabled { opacity: .6; }

/* ==== Chat Two Columns (scoped) ==== */
.chat-2col {padding: 46px 0px;}
.chat-2col .chat-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }

.chat-sidebar { background:#fff; box-shadow:0 8px 24px rgba(17, 24, 39, 0.07);  border-radius: 16px; overflow: hidden; }
.chat-search { padding: 12px; border-bottom: 1px solid #f1f2f6; }
.chat-conv-list { max-height: 500px; overflow:auto; padding: 6px; }
.chat-conv-item {   width:100%; display:flex; gap:10px; border:1px solid #f1f2f6 ; background:transparent; text-align:left;   padding:10px; border-radius:12px; cursor:pointer; margin-bottom: 4px; }
.chat-conv-item:hover { background:#fafafb; }
.chat-conv-item.active { background:linear-gradient(135deg, rgb(167, 137, 255,.5) 0%, rgb(255, 157, 173, .5) 100%); }
.chat-conv-item .avatar { width:60px; height:60px; border-radius:50%; object-fit:cover; }
.chat-conv-item .meta { display: flex;   flex-direction: column;   justify-content: center; overflow: hidden;flex:1; min-width:0; }
.chat-conv-item .top { display:flex; justify-content:space-between; gap:10px; }
.chat-conv-item .name { font-weight:600; color: #292929; }
.chat-conv-item .time { font-size:12px; color:#292929; }
.chat-conv-item .bottom { display:flex; justify-content:space-between; gap:8px; }
.chat-conv-item .preview { font-size:14px; color:#707070; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
.chat-conv-item .badge {   display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;   font-size:11px; border-radius:999px; padding:0 6px; background:var(--grad); color:#fff; }

/* Right panel (reuse bubble styles dari sebelumnya) */
.chat-main { background:#fff;  box-shadow:0 8px 24px rgba(17, 24, 39, 0.07); border-radius:16px; display:flex; flex-direction:column; height: 600px; }
.chat-main .chat-header {   display:flex; align-items:center; justify-content:space-between; gap:12px;   padding:12px 16px; border-bottom:1px solid #f0f0f0; border-radius: 16px 16px 0px 0px;   background:#fff; }
.chat-main .chat-peer { display:flex; align-items:center; gap:10px; }
.chat-main .chat-avatar { width:55px; height:55px; border-radius:50%; object-fit:cover; }
.chat-main .chat-title .name { font-weight:600; font-size: 20px;}
.chat-main .chat-thread { flex:1; padding:16px; overflow:auto; background:#fafafb; }
.chat-main .chat-form { display:flex; gap:10px; padding:12px; border-top:1px solid #f0f0f0; position:sticky; bottom:0; background:#fff; }
.chat-main .chat-input.form-control { background:#f6f6fb; border-color:#eee; border-radius:20px; }
.chat-main .chat-send.btn { border-radius:999px; background:var(--grad); border:0; }

.chat-item { display:flex; flex-direction:column; margin:8px 0; max-width:70%; }
.chat-item.is-me { margin-left:auto; align-items:flex-end; }
.chat-item.is-them { margin-right:auto; align-items:flex-start; }


/* ==== Avatar inline upload (persis seperti mockup) ==== */
.avatar-inline-upload{   display:flex; align-items:center; gap:12px;   border:1px solid #eef0f4; background:#f6f6fb;   border-radius:14px; padding:10px 12px; cursor:pointer; }
.avatar-thumb{   width:44px; height:44px; border-radius:50%;   position:relative; flex:0 0 44px;   display:grid; place-items:center;   background:#e9e7ff; color:#6f54ff; font-weight:600; }
.avatar-thumb .avatar-img{   position:absolute; inset:0; width:100%; height:100%;   object-fit:cover; border-radius:50%; display:block; }
.avatar-initial{ line-height:1; }
.btn-soft{   border:1px solid #eef0f4; background:#fff; color:#707070;   padding:8px 14px; border-radius:10px; font-weight:500;   display:inline-flex; align-items:center; justify-content:center; }
.btn-soft:hover{ background:#fafafa; }

/* ===== Album grid ===== */
.album-grid{   display:grid;   grid-template-columns: repeat(3, 1fr);   gap:16px; }
.album-card{   background:#f4f5f7;   border:1px solid #eef0f4;   border-radius:16px;   min-height:160px;   display:flex; align-items:center; justify-content:center;   position:relative;   box-shadow:0 8px 24px rgba(17, 24, 39, 0.06) inset;   overflow:hidden; }
.album-img{   width:100%; height:100%; object-fit:cover;   border-radius:16px; display:block; }

/* plus button (gradient bulat dengan bayangan lembut) */
.album-plus{   border:0; background:var(--grad);   width:52px; height:52px; border-radius:50%;   display:flex; align-items:center; justify-content:center;   box-shadow:0 12px 24px rgba(0,0,0,0.08);   cursor:pointer; }
.album-plus span{   color:#fff; font-size:32px; line-height:1; margin-top:0px; }

/* ===== Modal ringan (meniru mockup) ===== */
.modal-lite{ position:fixed; inset:0; display:none; place-items:center; z-index:1100; }
.modal-lite.is-open{ display:grid; }
.modal-lite::before{ content:""; position:absolute; inset:0; background:rgba(17,24,39,.35); backdrop-filter: blur(2px); }
.modal-lite__dialog{   position:relative; width:420px; max-width:92%;   background:#fff; border-radius:16px; padding:16px 16px 18px;   box-shadow:0 24px 60px rgba(0,0,0,.1); }
.modal-lite__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal-lite__head h5{ margin:0; font-weight:600; }
.modal-lite__close{ border:0; background:transparent; font-size:22px; cursor:pointer; line-height:1; }

/* kotak upload di dalam modal */
.upload-box-lg{   display:flex; flex-direction:column; align-items:center; justify-content:center;   border:1px solid #eef0f4; background:#f6f6fb; border-radius:14px;   min-height:160px; padding:20px; text-align:center; cursor:pointer; }
.upload-box-lg .ub-icon{ font-size:24px; margin-bottom:8px; opacity:.8; }
.upload-box-lg .ub-btn{   display:inline-block; padding:8px 14px; border-radius:10px;   border:1px solid #eaeaea; background:#fff; color:#7a7a7a; font-weight:500;   margin-bottom:8px; }
.upload-box-lg small{ color:#9397a1; }
.upload-box-lg .ub-preview{   width:100%; height:180px; object-fit:cover; border-radius:12px; margin-top:10px;   background:#fff; }
.album-actions{   position:absolute; top:10px; right:10px;   display:flex; gap:8px; }
.icon-btn{   width:34px; height:34px; border:0; cursor:pointer;   border-radius:10px; background:#ffffffdd;   display:flex; align-items:center; justify-content:center;   box-shadow:0 6px 16px rgba(0,0,0,.10);   font-size:16px; line-height:1; }
.icon-btn:hover{ background:#fff; }

/* ====== NOTIF BUBBLE (follow Like bubble look) ====== */
.like-bubble-wrap { position: relative; display: inline-block; }

/* Reuse base look dari bubble Like: rounded, shadow, putih */
.like-bubble.notif-bubble{   position: absolute;   right: 0;top: calc(100% + 10px);  width: 500px;   background: #fff;   border-radius: 16px;   box-shadow: 0 20px 40px rgba(18,7,58,.1);   padding: 14px 0px 14px 14px;   z-index: 1200; }
.like-bubble.bubble-filter {   position: absolute;   top: calc(100% + 10px);  width: 350px !important;   background: #fff;   border-radius: 16px;   box-shadow: 0 20px 40px rgba(18,7,58,.1);   padding: 10px;   z-index: 1200; }

/* panah kecil di atas tengah (sama seperti Like bubble) */
.like-bubble.notif-bubble .bubble-arrow{   position:absolute; top:-8px; right:24px;   width:16px; height:16px; background:#fff; transform:rotate(45deg);   box-shadow:-2px -2px 4px rgba(0,0,0,.03); }

/* tombol X kanan atas */
.like-bubble.notif-bubble .bubble-close{   position:absolute; top:8px; right:10px;   border:0; background:transparent; font-size:22px; line-height:1; color:#9aa; cursor:pointer; }

/* section header (Today/Yesterday) */
.notif-sec-head{ font-weight:600; font-size:18px; color:#2b2b2b; padding:0 16px 8px; }

/* daftar notifikasi */
.notif-list{ max-height:320px; overflow:auto; }
.notif-empty{ text-align:center; color:#8a8a8a; padding:22px 10px; }

/* item meniru kartu Like (avatar kiri, text, tanggal kanan) */
.notif-item{   display:flex; align-items:center; gap:15px;   padding:12px 16px; border-radius:12px; text-decoration:none; color:#2b2b2b; }
.notif-item + .notif-item{ border-top:1px solid #f2f2f7; }
.notif-item:hover{ background:#fafaff; }
.notif-item .meta{ flex:1; min-width:0; }
.notif-item .title{ font-weight:600; font-size:16px; color:#292929; padding-bottom: 6px; }
.notif-item .text{ font-size:14px; color:#707070; margin-top:2px; line-height:1.5; padding-bottom: 6px; margin: 0px;}
.notif-item .date{ margin-left:auto; font-size:12px; color:#292929; white-space:nowrap; }

/* badge angka di tombol bell */
.notif-badge{   position:absolute; top:-2px; right:-2px;   min-width:18px; height:18px; padding:0 5px;   border-radius:999px; background:linear-gradient(135deg,#926CFF,#FF7D9E);   color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;   box-shadow:0 0 0 2px #fff; }
/* ikon bulat kecil di kiri item (ganti avatar) */
.notif-bubble .notif-item .ico{   width:55px; height:55px; border-radius:50%;   background:#f7f7f9;   display:flex; align-items:center; justify-content:center;   color:#a78bfa;            /* warna ikon */   flex:0 0 55px; }
.notif-bubble .notif-item .ico i{ font-size:18px; }
.badge-gradient-check{   width: 84px; height: 84px; margin: 0 auto 12px;   border-radius: 9999px;   background: linear-gradient(135deg, #b197fc 0%, #ff87a2 100%);   display: grid; place-items: center; color: #fff;   box-shadow: 0 6px 20px rgba(0,0,0,.08); font-size: 50px !important; }
.deleted-title{   font-weight: 600; font-size: 20px; margin: 6px 0 6px; }
.deleted-desc{   color: #5f6368; margin: 0 auto; max-width: 420px; }
.form-filter{   padding-top: 24px !important; }

/* animasi rotasi chevron */
.pref-head i.bi {   transition: transform .2s ease;   transform-origin: 50% 50%; }
.pref-item:not(.is-open) .pref-head i.bi {   transform: rotate(0deg); }
.pref-item.is-open .pref-head i.bi {   transform: rotate(180deg); }

/* ====== Mobile Navbar (Guest) + Drawer ====== */
.m-navbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #f0f0f0}
.m-navbar .m-container{max-width:1320px;margin:0 auto;height:64px;padding:0 14px;display:flex;align-items:center;justify-content:space-between}
.m-burger{--w:26px;--h:18px;width:var(--w);height:var(--h);display:inline-grid;gap:5px;background:transparent;border:0;padding:6px;cursor:pointer;border-radius:10px}
.m-burger span{display:block;height:2px;border-radius:2px;background:linear-gradient(135deg,#A789FF,#FF9DAD)}
.m-burger:active{transform:scale(.98)}
/* hide burger on desktop */
@media(min-width:992px){.m-burger{display:none}}

.m-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.25s;z-index:70}
.m-backdrop.is-show{opacity:1;pointer-events:auto}

.m-drawer{position:fixed;top:0;right:-100%;height:100dvh;width:min(90vw,360px);background:#fff;box-shadow:-20px 0 60px rgba(18,7,58,.12);z-index:80;display:flex;flex-direction:column;transition:transform .28s ease,right .28s ease}
.m-drawer.is-open{right:0}
.m-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f1f2f6}
.m-drawer__nav{display:flex;flex-direction:column;padding:6px 0}
.m-drawer__nav a{padding:14px 16px;text-decoration:none;color:var(--text);border-bottom:1px solid #f1f2f6}
.m-drawer__nav a:hover{background:#fafaff}
.m-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#9aa}

/* ====== Logged-in: Single Card + Sticky Tabs ====== */
.app-mobile{max-width:480px;margin:0 auto;padding:10px 12px 96px}
/* satu card saja, center, pakai gaya card yang sudah ada */
.single-card{background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.06);overflow:hidden;border:1px solid #eef0f4}
.single-card .card-visual{position:relative}
.single-card .card-visual img{width:100%;height:420px;object-fit:cover;display:block}
.single-card .card-body{padding:14px 14px 18px}
.single-card .card-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:20px;margin:0 0 6px;color:#292929}
.single-card .card-desc{color:#707070;font-size:16px;line-height:1.5;margin:0 0 8px}
.single-card .chip-row{display:flex;gap:10px;flex-wrap:wrap}
.single-card .chip{padding:8px 12px;border-radius:8px;background:#f5f5f5;border:1px solid #eef0f4;color:#707070;font-size:14px}

/* actions vertikal di kanan gambar (reuse .card-actions) */
.single-card .card-actions{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.single-card .action{width:46px;height:46px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.12);cursor:pointer}
.single-card .action:hover{background:var(--grad);color:#fff}

/* Sticky bottom tabs (Discover, Likes, Messages) */
.sticky-tabs{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:8px 12px env(safe-area-inset-bottom);background:transparent;display:flex;justify-content:center}
.sticky-tabs__inner{width:min(520px,94vw);background:#fff;border:1px solid #eef0f4;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.12);padding:8px 10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.sticky-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:#707070;border-radius:12px;padding:10px 0;font-size:12px}
.sticky-tabs a .ico{width:22px;height:22px;display:inline-flex}
.sticky-tabs a.is-active{background:linear-gradient(135deg,rgba(167,137,255,.15),rgba(255,157,173,.15));color:#292929;font-weight:600}


/* ===== Tips Section (scoped; no conflict) ===== */
.tips-area { padding: 0; }
.banner img{ max-width: 100% !important;}
.tips-area .tips-kicker{text-align:center;font-weight: 400;font-size: 20px;text-align: center;margin: 0px;padding:60px 0 10px;}
.tips-area .tips-title{ text-align:center; font-weight:500; font-size:46px; line-height:1.2; margin:0 auto; max-width: 918px; padding-bottom: 60px;}
.tips-area .accent{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tips-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;align-items: stretch;}

/* LEFT list */
.tips-list{ display: flex;flex-direction: column;justify-content: space-between;height: 100%; gap: 10px;}
.tips-card{display:grid; grid-template-columns: 1fr 1fr; gap:12px;background:#fff; border:1px solid #eef0f4; border-radius:16px; overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.06); height: 100%;}
.tips-card img{ width:100%; height:100%; object-fit:cover;border-radius:30px; display:block; padding:18px;}
.tips-meta{ padding:18px 18px 18px 0; display:flex; flex-direction:column; justify-content:center; }
.tips-card-title{ font-weight: 500;font-size: 24px;color: #292929;padding-bottom: 10px;}
.tips-card-desc{ font-weight: 400;font-size: 20px;color: #707070;padding-bottom: 20px; }
.tips-list .btn-tips{padding:14px 32px; font-size:20px; border-radius:999px; width:max-content;}

/* RIGHT featured product */
.tips-feature{background:#fff;  border-radius:20px; overflow:hidden;}
.tips-feature .feat-visual{ position:relative; background:#f6f6fb; border-radius:16px; overflow:hidden; }
.tips-feature .feat-visual img{ width:100%; height:auto; display:block; }

/* Responsiveness fine-tune */
@media(max-width:420px){
  .single-card .card-visual img{height:380px}
  .sticky-tabs__inner{gap:6px}
}

.mobile-drawer{display: none;}
.mobile-bottom-bar{display: none;}
/* =========================================================
   Mobile Responsive Add‑Ons (safe to append at end of style.css)
 */
@media (max-width: 360px) {.hero-area .hero-wrap::after{height: 410px !important;}}
@media (min-width: 361px) and (max-width: 376px) {.hero-area .hero-wrap::after{height: 410px !important;}}
@media (min-width: 377px) and (max-width: 390px) {.hero-area .hero-wrap::after{height: 425px !important;}}
@media (min-width: 391px) and (max-width: 429px) {.hero-area .hero-wrap::after{height: 450px !important;}}
@media (min-width: 430px) and (max-width: 700px) {.hero-area .hero-wrap::after{height: 480px !important;}}
@media (max-width: 700px) {
  .promo-top{width: 90%; margin: 0px auto; padding: 20px 15px;display: block; height: 470px; align-items: center; justify-content: center;}
  .promo-hero-wrap img{margin: 0px auto; top: 40px !important; left: auto; max-width: 100%;}}
  
@media (min-width: 760px) and (max-width: 821px) {
  .promo-top{width: 90%; margin: 0px auto; padding: 20px 15px;display: block; height: 520px; align-items: center; justify-content: center;} 
  .promo-hero-wrap img{max-width: 100% !important; top: 0px;}}

@media (max-width: 900px) {
  html, body { overflow-x: clip; background:#fff !important; } 

  .container > .row { margin-right: 0; margin-left: 0; }
  .row { --bs-gutter-x: 1rem; } 
  .container { padding-left: 12px; padding-right: 12px; }

  [style*="100vw"] { width: 100% !important; }

  :root{--container-pad: 16px;}
  .container { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  .row, .g-5 { --bs-gutter-x: 1rem; }
  .btn, .btn-grad, .btn-grad-navbar {font-size: 16px;line-height: 1.25;padding: 12px 16px;}
  .btn-grad, .btn-primary, .btn-secondary {width: 100%;}

  /* ===== Hero (landing) ===== */
  .hero-area { padding: 28px 0 18px; }
  .hero-title {font-weight: 500;font-size: 42px !important;line-height: 3.5rem;padding: 10px 0px 28px;margin: 0px;}
  .hero-lead{max-width: none;padding: 0px}
  .hero-mob{font-weight: 400;font-size: 18px !important;color: #707070;}
  .btn-grad{margin-top: 46px; font-size: 18px !important;}
  .hero-lead .accent{font-weight: 400;font-size: 18px;}
  .hero-area .hero-card {display: none !important;}
  .back-door{margin-top: 46px;}
  .hero-area .hero-wrap{height: fit-content;}
  .hero-area .hero-wrap::after {content: "";display: block;max-width: 100%;height: 850px;margin-top: 16px;
  background: url("../img/icons/hero-mobile.png") center/cover no-repeat;}
  

  .features-row{padding-top: 0px !important;margin-top: -46px;}
  .features-row .item .title{ max-width: 100%; font-size: 24px;}
  .features-row .item img{ width: 45px;}
  .features-row .item .desc{ padding: 5px 0 15px; font-size: 16px;}

  /* Iklan Banner */
  .tips-area{ padding:40px 0; }
  .tips-area .tips-title{ font-size:28px; line-height:1.3; padding-bottom: 30px; }
  .banner img{height: 100px !important; width: 100%; object-fit: cover;}
  .tips-grid{ grid-template-columns: 1fr; gap:16px; }
  .tips-card {display: flex;flex-direction: column;text-align: center;gap: 5px;}
  .tips-card img {width: 100%;height: auto;}
  .tips-meta {padding: 0px 14px 20px;text-align: left;}
  .tips-meta .btn-tips {margin-top: 8px;}
  .tips-card-title{ font-size: 20px; margin: 0 !important;}
  .tips-card-desc{ font-size: 16px;margin: 0 !important;}
  .tips-list .btn-tips{padding:10px 16px; font-size:16px;}

  /* ===== Cards / Lists ===== */
  .album-card,
  .testi-card,
  .sm-card,
  .profile-card {border-radius: 14px;}
  .testi-area{padding-top: 20px;}
  .testi-title { font-weight: 500; font-size: 28px;padding: 10px 0px; line-height: 2.5rem; }
  .testi-card{padding: 20px;}
  .star{font-size: 18px !important;}

  .promo-duo{padding:46px 0 0;}
  
  .promo-copy-title{font-size: 28px; font-weight: 500;}
  .promo-visual{width: 100%;}
  
  .promo-hero-wrap {display: flex !important;justify-content: center !important;align-items: center !important;text-align: center !important;padding: 0px auto !important;}

  .promo-hero-wrap img{margin: 0px auto; top: 40px !important; left: auto; max-width: 100%;}
  .promo-cta{padding: 40px 20px;}
  .promo-cta .cta-inner-title{font-size: 28px !important; font-weight: 500; line-height: 2.5rem;}

  .promo-cta .cta-grid {display: flex !important;flex-direction: column-reverse !important;align-items: center !important;
    justify-content: center !important;text-align: center !important;gap: 46px !important;padding-top: 28px !important;}
  .cta-grid .btn-gradient,
  .cta-grid a[class*="btn"] {width: 100% !important;max-width: 320px !important;margin: 0 auto !important;display: block !important;}

  /* teks rata tengah */
  .cta-grid .cta-inner-desc,
  .cta-grid p {text-align: center !important;margin: 0 auto !important;}
  .cta-inner-desc{font-size: 18px !important;}
  .cta-inner-title {font-size: 22px !important;line-height: 1.3 !important;text-align: center !important;}

  /* ===== Footer ===== */
  .site-footer { padding-top: 28px; margin-top: 40px; }
  .site-footer .foot-grid {display: grid;grid-template-columns: 1fr;gap: 18px;padding:0 0 32px;}
  .site-footer .foot-title{font-size: 20px; padding: 20px 0px;}
  .site-footer .foot-small,.foot-addr,.foot-text, .footer-about{font-size: 16px;}
  .footer-about{padding-bottom: 32px;}
  .footer-copy{font-size: 14px; text-align: center;}
  .site-footer .footer-subscribe { max-width: 100%; }

  /* Page Free Online Dating */
  .hero-card-online{width: auto;}
  #fdoGrid > .js-card-col { display: none !important; }
  #fdoGrid > .js-card-col:first-child { display: block !important; }
  #fdoGrid { display: block; margin-left: 0; margin-right: 0; }
  #fdoGrid > .js-card-col:first-child {width: 100% !important;max-width: 100% !important;padding-left: 0 !important;padding-right: 0 !important;}
  #fdoGrid.row { --bs-gutter-x: 1rem; }

  /* Page Support */
  .faq-area { padding: 46px 0 0; }
  .faq-area .title-faq{font-size: 42px; text-align: left !important; line-height: 3.5rem;}
  .faq-area .text-faq{font-size: 18px; text-align: left !important;}
  .faq-area .faq-q{font-size: 20px; line-height: 1.5rem;}
  .faq-item.is-open .faq-body__inner{font-size: 16px; line-height: 1.5rem;}

  /* ===== Mobile Navbar Drawer (guest) ===== */
  .app-navbar__toggle{
    width:44px; height:44px; border-radius:12px;
    background:#fff; border:1.5px solid #d9d9d9;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
  }

  .mobile-dim{
    position:fixed; inset:0; background:rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1055;
  }
  .mobile-dim.is-open{ opacity:1; pointer-events:auto; }

  .mobile-drawer{
    position:fixed; top:0; right:0; height:100dvh;
    width:70%; max-width:360px; background:#fff;
    transform:translateX(100%); transition:transform .28s ease-in-out;
    z-index:1060;
    display:flex; flex-direction:column;
  }
  .mobile-drawer.is-open{ transform:translateX(0); }
  .mobile-drawer .drawer-head .brand-line{
    padding: 0px;
  }
  .mobile-drawer .drawer-head .brand-line img{
    width: 100%;height: 100%;
  }
  .mobile-drawer .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid #efefef;
  }
  .mobile-drawer .drawer-close{
    background:transparent; border:0; font-size:28px; line-height:1; padding:0 4px;
  }

  .mobile-drawer .drawer-nav{ padding:8px 0; }
  .mobile-drawer .drawer-link{
    display:block; padding:14px 20px; color:#333; text-decoration:none;
    border-bottom:1px solid #eee; font-weight:400;
  }
  .mobile-drawer .drawer-link:hover{ background:#fafafa; }

  
  /* ===== Navbar (logged-in) ===== */
  .app-navbar__pill[data-nav="discover"],
  .app-navbar__pill[data-nav="likes"],
  .app-navbar__pill[data-nav="messages"] { display: none !important; }
  .app-navbar-search { display: none !important; }

   .mobile-bottom-bar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;
    height: 72px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid #eee;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .mobile-bottom-bar .mbb-item{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-decoration: none;
    color: #666; font-weight: 600; font-size: 12px;
    border-radius: 14px;
    background: #f6f6f6;
    height: 52px;
  }
  .mobile-bottom-bar .mbb-item .ico{
    line-height: 0; display: grid; place-items: center;
  }
  .mobile-bottom-bar .mbb-item .ico img{
    width: 35px; height: 35px; object-fit: contain;
  }

  /* Active state */
  .mobile-bottom-bar .mbb-item.is-active{
    background: #fff;
    box-shadow: 0 6px 6px rgba(0,0,0,.08);
    color: #111;
  }

  .notif-bubble{    position: fixed !important;
    top: calc(var(--navbar-h) + env(safe-area-inset-top) + 8px) !important;
    right: 12px !important;
    left: 12px !important; 
    z-index: 1100 !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  }
  
  .notif-bubble::before {
    content: "";
    position: absolute;
    top: -8px; right: 24px;
    width: 12px; height: 12px; transform: rotate(45deg);
    background: inherit;
  }
  .app-navbar__icon,.app-navbar__icon:hover{background: transparent; box-shadow: none;}
  .app-navbar__icon img{height: 32px; width: 32px;}
  .app-navbar { box-shadow: 0 2px 12px rgba(0,0,0,.04); }
  .app-navbar__container { height: 60px; padding: 0 12px; }
  .navbar-brand img { height: 28px; width: auto; }
  .app-navbar__menu {gap: 10px;overflow-x: auto;-webkit-overflow-scrolling: touch;padding: 6px 0;}
  .app-navbar__pill {padding: 10px 14px;font-size: 14px;white-space: nowrap;}
  .app-navbar__right { gap: 8px; }
  .app-navbar__name { display: none; }
  .app-navbar__profile { padding: 6px 8px; }
  .app-navbar__avatar { width: 32px; height: 32px; }

  /* Profile Akun */
  .profile-screen {--ov-padding: 10px;--ov-avatar-w:100%; padding: 46px 14px 0px !important;}
  .profile-screen .profile-top-grid,
  .profile-screen .profile-bottom-grid {grid-template-columns: 1fr;gap: 12px;margin-top: 16px;}
  .profile-screen .profile-top-grid .profile-header { grid-column: auto; }
  .profile-header .stats { gap: 8px; }
  .profile-cover { height: 180px; }
  .profile-card .title { font-size: 18px; }
  .profile-card .text { font-size: 14px; }

  /* ===== Forms ===== */
  .form-control, .form-select { font-size: 15px; padding: 10px 12px; }
  .input-group-text { padding: 10px 12px; }
   label { font-size: 14px; }

  .profile-header {position: relative !important;background: transparent !important;padding: 0 !important;margin: 0px !important;}
  .profile-cover{height: 100% !important;}
  .profile-cover > img {width: 100% !important;height: 200px !important;display: block !important;border-radius: 16px !important;}
  .profile-cover .ov-btn-edit,
  .profile-cover .ov-btn-delete { z-index: 10;}
  .profile-overlay-wrap {position: relative !important;padding: 0 !important; height: 100%;}
  .profile-overlay {
    background: #1f1f1f !important;
    color: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
    padding: 16px 14px 16px 14px !important;
    overflow: visible !important;
    z-index: 2 !important;
    height: fit-content !important;
    bottom: 100px;
  }

  .overlay-grid {position: relative !important;display: block !important;  justify-content: center !important;align-items: center !important;  }
  .ov-avatar {max-width: 200px !important;align-items: center;;margin: 0 auto 30px !important;}
  .ov-avatar img { width:100%; height:100%; object-fit:cover; display:block; margin: 0px auto; }
  .ov-main { min-width: 0 !important; }
  .ov-main:after{display: none;}
  .ov-location.pill {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 8px 12px !important; margin-bottom: 8px !important;
    border-radius: 8px !important; font-size: 16px !important;
    background: rgba(255,255,255,.10) !important; color: #fff !important;
  }
  .ov-name { font-size: 24px !important; font-weight: 500 !important; color: #fff !important; margin: 0px !important; }
  .ov-job  { font-size: 16px !important; color: #d6d6d6 !important; margin: 0px !important; padding-bottom: 28px !important; }
  .profile-screen .ov-about { padding-left:0px !important ;}
  .profile-screen .ov-about-title { font-size: 16px !important; font-weight: 400;}
  .ov-about-text  { font-size: 14px !important; color: #fff !important; }
  .ov-about-text a { color: #e9a9ff !important; text-decoration: none !important; }

  .cover-actions.is-pills {display: grid !important;grid-template-columns: 1fr 1fr !important;gap: 10px !important;margin: 0 !important;}
  .cover-pill {
    height: 42px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    background: #fff !important; color: #111 !important;
    font-weight: 600 !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.10) !important;
  }
  .cover-pill .pill-ico img { width: 16px; height: 16px; display: block; }
  .icon-btn{z-index: 10;}

  /* ---------- SOCIAL MEDIA ---------- */
  aside.profile-card.sm-card{
    background:#fff !important;
    border-radius:16px !important;
    padding:14px !important;
    box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
    margin-top: -60px;
  }

  .profile-top-grid{display: block !important;margin-top: 12px !important;}
  .profile-top-grid .profile-header{margin-bottom: 14px !important;}
  .profile-top-grid aside.profile-card.sm-card{float: none !important;position: static !important;min-width: 0 !important;width: 100% !important;max-width: 100% !important;}

  /* Rapikan tampilan kartu social (tetap penuh lebar) */
  .profile-top-grid aside.profile-card.sm-card{
    background: #fff !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  }

  /* ===== Chat mobile ===== */
  .chat-2col { padding: 18px; }
  .chat-2col .chat-wrap { grid-template-columns: 1fr; gap: 12px; }
  .chat-sidebar { border-radius: 12px; }
  .chat-conv-list { max-height: 550px; }
  .chat-page { padding-left: 0; padding-right: 0; }
  .chat-card { border-radius: 14px; }
  .chat-header { padding: 10px 12px; gap: 10px; }
  .chat-avatar { width: 36px; height: 36px; }
  .chat-title .name { font-size: 16px; }
  .chat-input { padding: 12px; font-size: 15px; }
  .chat-send.btn { padding: .55rem .75rem; }

  #likesBubble {
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(var(--mbb-h, 64px) + env(safe-area-inset-bottom, 0px) + 8px);
    width: calc(100% - 24px);
    max-width: 520px;
    margin: 0 auto;
    padding: 0px 5px;
    z-index: 9999;               
    transform: translateY(16px); 
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* saat open di mobile */
  #likesBubble.is-mobile-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* panah tidak dipakai saat bottom-sheet */
  #likesBubble .likes-bubble__arrow { display: none !important; }


  /* (opsional) kartu bubble jika perlu shadow/warna */
  .likes-bubble__card {background: #fff;border-radius: 12px;box-shadow: 0 8px 30px rgba(0,0,0,.12); width: 100%;max-width: none;margin: 0;}
  :root {--gap: 14px;--card: 300px;}
  .hero-title { font-size: 28px; }
  .hero-lead { font-size: 15px; }
  .btn, .btn-grad { font-size: 15px; }
  .app-navbar__pill { font-size: 13px; padding: 9px 12px; gap: 8px; }
  .chat-page.container { padding-left: 10px; padding-right: 10px; }
  .chat-thread { padding: 12px; }
  .chat-form { padding: 8px; gap: 8px; }
  .profile-cover { height: 150px; }
  .profile-card .title { font-size: 17px; }

  /* pane kanan / area thread di halaman split */
  #chatSplit .chat-main { display: none !important;}
  #chatSplit .chat-sidebar {width: 100% !important;max-width: 100% !important;flex: 0 0 100% !important;}
  .chat-thread{height: 500px ;}
  .chat-sidebar,
  .chat-list,
  .split-left,
  .users-pane {width: 100% !important;max-width: 100% !important;flex: 0 0 100% !important;}
  .chat-main { display: none !important; }
  .chat-sidebar { width:100%!important; max-width:100%!important; flex:0 0 100%!important; }

  #chatForm.chat-form {display: flex !important;gap: 8px;align-items: center;}
  #chatForm .chat-input {flex: 1 1 auto !important;min-width: 0;width: auto !important; }
  #chatForm .chat-send {flex: 0 0 auto !important;width: 45px; height: 45px;display: inline-flex;align-items: center;justify-content: center;padding: 0;border-radius: 999px;}
  #chatForm .chat-send i.bi {font-size: 20px;}
  #fdoGrid .js-card-col { display: none; }
  #fdoGrid .js-card-col:first-child { display: block; }
}

@media ( max-width: 1050px){
    .app-navbar__profile-text, .app-navbar__plan { display: none; }
}

@media (max-width: 399.98px) {
    .app-navbar__pill { padding: 8px 10px; font-size: 12px; }
    .hero-title { font-size: 24px; }
    .chat-title .name { font-size: 15px; }
}