/* HomyHunt — navigasi bersih / feed responsif, 25 Oktober 2026.
   Additive: original feed.css and interaction code are not overwritten. */
.feed-header {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px 34px;
  align-items:center;
  gap:clamp(4px,1.7vw,10px);
  padding:calc(env(safe-area-inset-top) + 10px) 10px 13px;
  background:linear-gradient(to bottom,rgba(2,12,21,.85),rgba(2,12,21,.4) 75%,transparent);
}
.feed-header .mini-brand { justify-self:start; min-width:0; }
.feed-header .mini-brand span { width:32px; height:32px; font-size:21px; }
.feed-header .feed-tabs { min-width:0; gap:clamp(10px,2.4vw,22px); justify-content:center; }
.feed-header .feed-tabs button { min-width:0; font-size:clamp(11px,3.65vw,16px); line-height:1.2; color:white; }
.feed-header .header-icon { justify-self:center; width:34px; height:38px; color:white; }
.feed-header .header-icon svg { width:24px; height:24px; }
.hh-global-sound svg { stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hh-global-sound svg path:first-child { fill:currentColor; stroke-width:1.4; }
.hh-global-sound svg .hh-wave { stroke-width:1.7; }
.hh-global-sound svg .hh-slash { display:none; stroke-width:2.5; }
.hh-global-sound[aria-pressed="false"] svg .hh-wave { display:none; }
.hh-global-sound[aria-pressed="false"] svg .hh-slash { display:block; }
/* One audio toggle in the header, not a duplicated button on every slide. */
.property-slide .sound-toggle { visibility:hidden; pointer-events:none; }
/* The caption belongs to the bottom-left, actions have their own lane. */
.listing-copy {
  right:clamp(75px,20%,95px);
  left:clamp(12px,4vw,18px);
  bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px);
  max-height:min(56dvh,470px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding-right:2px;
  pointer-events:auto;
}
.listing-copy::-webkit-scrollbar { display:none; }
.listing-copy h1 { overflow-wrap:anywhere; }
.listing-copy .details { overflow-wrap:anywhere; }
.action-rail {
  right:7px;
  bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 17px);
  width:58px;
  gap:clamp(6px,1.15dvh,12px);
}
.action-rail .rail-action { width:56px; min-height:36px; gap:2px; }
.action-rail .rail-action svg { width:28px; height:28px; }
.action-rail .profile-action { width:52px; height:54px; }
.action-rail .avatar { width:43px; height:43px; }
.action-rail .follow-mark { bottom:0; }
.action-rail .view-count { font-size:10px; padding:2px 4px; border-radius:8px; background:rgba(0,0,0,.28); }
.hh-rail-more { position:relative; width:56px; }
.hh-rail-more>summary { list-style:none; cursor:pointer; display:flex; }
.hh-rail-more>summary::-webkit-details-marker { display:none; }
.hh-rail-more[open]>summary svg { color:#7bedb5; }
.hh-rail-popup {
  position:absolute; z-index:40; right:62px; bottom:0;
  display:flex; flex-direction:column; gap:2px;
  width:min(225px,calc(100vw - 95px));
  padding:8px; border:1px solid rgba(255,255,255,.2); border-radius:14px;
  color:#ecfff7; background:rgba(5,21,29,.97);
  box-shadow:0 12px 40px rgba(0,0,0,.44); backdrop-filter:blur(16px);
  text-shadow:none;
}
.hh-rail-popup>a,.hh-rail-popup>button {
  color:inherit; background:transparent; border:0; border-radius:9px;
  padding:11px; text-align:left; text-decoration:none; font:700 13px/1.3 system-ui,sans-serif;
  cursor:pointer;
}
.hh-rail-popup>a:hover,.hh-rail-popup>button:hover,.hh-rail-popup :focus-visible { background:#155c50; }
.hh-rail-popup>small { opacity:.6; font-size:10px; line-height:1.4; text-align:center; padding:7px 4px 1px; }
/* Video and photo slides may have multiple aspect ratios; don't stretch media. */
.property-media .media-item img,
.property-media .media-item video { object-fit:contain!important; object-position:center center!important; }
.media-position { top:calc(env(safe-area-inset-top) + 63px); right:12px; }
.video-play-toggle { top:calc(env(safe-area-inset-top) + 109px); }
.media-dots-below { bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 7px); top:auto!important; }
.bottom-nav .post-button span { width:46px; height:38px; font-size:29px; }
.bottom-nav [data-hh-open-cart] { color:rgba(255,255,255,.78); }
.bottom-nav a:focus-visible,.bottom-nav button:focus-visible,
.feed-header button:focus-visible,.hh-rail-more summary:focus-visible { outline:2px solid #9afbcb; outline-offset:3px; }
.hh-copyright { display:none; position:absolute; z-index:16; right:16px; bottom:calc(var(--nav-height) + 8px); color:rgba(255,255,255,.55); font-size:10px; pointer-events:none; }
/* Keranjang menampilkan listing tersimpan dari feed yang sedang dimuat. */
.hh-cart-sheet[hidden]{ display:none!important; }
.hh-cart-sheet { position:absolute; z-index:100; inset:0; background:#f3f8f6; color:#163a33; }
.hh-cart-panel { height:100%; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 20px); overflow-y:auto; }
.hh-cart-panel header { display:flex; gap:14px; align-items:center; }
.hh-cart-panel header button { border:0; border-radius:10px; background:#dbeee8; padding:10px; color:#13483e; font:700 14px system-ui; }
.hh-cart-panel h2 { font-size:23px; margin:5px 0; }
.hh-cart-panel>p { color:#56716b; font-size:13px; line-height:1.6; }
.hh-cart-items { display:grid; gap:10px; }
.hh-cart-item { display:flex; gap:12px; min-height:84px; align-items:center; background:#fff; border:1px solid #d4e5df; border-radius:14px; overflow:hidden; padding:9px; text-decoration:none; color:#0c3930; }
.hh-cart-item img { width:72px; height:72px; flex:0 0 72px; object-fit:cover; border-radius:10px; background:#10282d; }
.hh-cart-item span { min-width:0; overflow-wrap:anywhere; }
.hh-cart-item strong { display:block; font-size:14px; line-height:1.3; }
.hh-cart-item small { display:block; margin-top:4px; font-size:12px; color:#0c8f68; }
.hh-cart-empty { padding:24px 16px; border-radius:16px; background:white; text-align:center; line-height:1.6; }
/* Desktop: split media and details instead of stacking both in the same spot. */
@media(min-width:900px) {
  .feed-page { background:radial-gradient(circle at 50% 10%,#16484c 0,#040f16 66%); }
  .feed-page .property-feed { width:min(100%,1120px); max-width:1120px; border-inline:1px solid rgba(255,255,255,.12); }
  .feed-header { grid-template-columns:110px 1fr 45px 45px; padding-inline:22px; }
  .feed-header .feed-tabs button { font-size:16px; }
  .property-slide { background:radial-gradient(circle at 75% 55%,#0c2731,#071822); }
  .property-slide .property-media,.property-slide .property-art {
    top:calc(env(safe-area-inset-top) + 65px); bottom:calc(var(--nav-height) + 16px);
    right:auto; left:16px; width:52%; height:auto;
    border-radius:16px; overflow:hidden; background:#07131c;
  }
  .property-slide .property-media img,.property-slide .property-media video { width:100%; height:100%; object-fit:contain!important; }
  .property-slide .slide-shade { background:linear-gradient(90deg,transparent 48%,rgba(2,13,19,.16) 53%,rgba(2,13,19,.55) 100%); }
  .property-slide .listing-copy {
    left:calc(52% + 44px); right:85px; top:calc(env(safe-area-inset-top) + 105px);
    bottom:calc(var(--nav-height) + 30px); max-height:none;
    display:flex; flex-direction:column; justify-content:center;
    padding:12px 0;
  }
  .property-slide .listing-copy h1 { font-size:clamp(20px,2.3vw,31px); }
  .property-slide .listing-copy .caption:not(.expanded) { -webkit-line-clamp:3; }
  .action-rail { right:14px; bottom:calc(var(--nav-height) + 38px); gap:12px; }
  .action-rail .view-count { background:rgba(0,0,0,.4); }
  .media-position { top:calc(env(safe-area-inset-top) + 82px); right:calc(48% + 14px); }
  .media-dots-below { left:26%; bottom:calc(var(--nav-height) + 20px); }
  .video-play-toggle { right:calc(48% + 18px); top:calc(env(safe-area-inset-top) + 125px); }
  .bottom-nav { justify-content:center; grid-template-columns:repeat(5,minmax(70px,105px)); column-gap:clamp(10px,3vw,35px); }
  .hh-copyright { display:block; left:calc(52% + 43px); right:auto; bottom:calc(var(--nav-height) + 12px); }
  .hh-rail-popup { width:225px; right:66px; }
}
@media(max-width:350px){
  .feed-header { grid-template-columns:30px minmax(0,1fr) 28px 28px; gap:4px; padding-inline:7px; }
  .feed-header .mini-brand span { width:28px;height:28px; }
  .feed-header .feed-tabs { gap:8px; }
  .feed-header .feed-tabs button { font-size:11px; }
  .action-rail { right:4px; gap:5px; }
  .listing-copy { right:66px; }
}

/* HH-CENTER-PLAY-FIX */
.media-position {
  display: none !important;
}

.video-play-toggle {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.video-play-toggle[aria-pressed="true"],
.video-play-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .video-play-toggle {
    left: calc(26% + 16px) !important;
  }
}