/* Transcendence Mobile QA Pack v1.0
   Scope: main hub, KLB, Law Firm, Our Home and Auction Space. */
html,body{max-width:100%;}
body{overflow-x:hidden;}
img,video,svg{max-width:100%;}

/* ==========================================================
   KARYA LINTAS BANGSA — desktop header repair + mobile polish
   ========================================================== */
body.tklb-active .tklb-header{
  min-width:0;
  gap:24px;
}
body.tklb-active .tklb-brand{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
}
body.tklb-active .tklb-brand img{
  width:74px;
  height:46px;
  flex:0 0 auto;
}
body.tklb-active .tklb-brand span{
  font-size:15px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.tklb-active .tklb-header-right{
  min-width:0;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(14px,2.2vw,32px);
}
body.tklb-active .tklb-mini{
  min-width:0;
  align-items:center;
  gap:clamp(12px,1.7vw,24px);
  white-space:nowrap;
}
body.tklb-active .tklb-mini span{
  min-width:0;
  font-size:clamp(10px,.72vw,12px);
}
/* MENU label + real 3-line hamburger rather than four items in one row */
body.tklb-active .tklb-menu-toggle{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:auto 30px;
  grid-template-rows:repeat(3,2px);
  column-gap:10px;
  row-gap:5px;
  align-items:center;
  width:auto;
  min-width:76px;
  min-height:44px;
  padding:8px 2px 8px 8px;
}
body.tklb-active .tklb-menu-toggle b{
  grid-column:1;
  grid-row:1 / 4;
  align-self:center;
  line-height:1;
}
body.tklb-active .tklb-menu-toggle i{
  grid-column:2;
  width:30px;
  height:1px;
  margin:0;
}
body.tklb-active .tklb-menu-toggle i:nth-of-type(1){grid-row:1;}
body.tklb-active .tklb-menu-toggle i:nth-of-type(2){grid-row:2;}
body.tklb-active .tklb-menu-toggle i:nth-of-type(3){grid-row:3;}

@media(max-width:1180px){
  body.tklb-active .tklb-header{padding-inline:24px;}
  body.tklb-active .tklb-brand img{width:64px;height:42px;}
  body.tklb-active .tklb-brand span{font-size:13px;}
  body.tklb-active .tklb-mini{gap:13px;}
}

@media(max-width:900px){
  body.tklb-active .tklb-header{
    position:fixed;
    height:68px;
    padding:0 16px;
    background:rgba(255,255,255,.96);
    color:#111;
    box-shadow:0 1px 0 rgba(0,0,0,.08);
    backdrop-filter:blur(12px);
  }
  body.admin-bar.tklb-active .tklb-header{top:46px;}
  body.tklb-active .tklb-header:not(.is-sticky):not(.is-solid) .tklb-brand img{filter:none;}
  body.tklb-active .tklb-brand{gap:9px;max-width:calc(100vw - 86px);}
  body.tklb-active .tklb-brand img{width:52px;height:36px;}
  body.tklb-active .tklb-brand span{
    display:block;
    font-size:12px;
    letter-spacing:.03em;
    max-width:180px;
  }
  body.tklb-active .tklb-mini{display:none;}
  body.tklb-active .tklb-menu-toggle{
    grid-template-columns:28px;
    grid-template-rows:repeat(3,2px);
    min-width:44px;
    width:44px;
    padding:8px;
    column-gap:0;
  }
  body.tklb-active .tklb-menu-toggle b{display:none;}
  body.tklb-active .tklb-menu-toggle i{grid-column:1;width:28px;}
  body.tklb-active .tklb-menu-inner{
    padding:100px 24px 44px;
    justify-content:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.tklb-active .tklb-menu-inner>a{font-size:clamp(34px,10vw,54px);}
  body.tklb-active .tklb-menu-close{right:20px;top:20px;font-size:40px;}
  body.tklb-active .tklb-hero{height:76svh;min-height:520px;}
  body.tklb-active .tklb-slide-copy{top:53%;}
  body.tklb-active .tklb-section{padding:72px 0;}
  body.tklb-active .tklb-company-grid{gap:42px;}
  body.tklb-active .tklb-home-carousel{min-height:500px;}
  body.tklb-active .tklb-contact{padding:78px 0;}
}

@media(max-width:560px){
  body.tklb-active .tklb-header{height:64px;padding-inline:14px;}
  body.admin-bar.tklb-active .tklb-header{top:46px;}
  body.tklb-active .tklb-brand img{width:48px;height:32px;}
  body.tklb-active .tklb-brand span{max-width:145px;font-size:11px;}
  body.tklb-active .tklb-container{width:calc(100% - 32px);}
  body.tklb-active .tklb-hero{height:72svh;min-height:500px;}
  body.tklb-active .tklb-slide-copy{left:20px;right:20px;top:50%;}
  body.tklb-active .tklb-slide-copy h1{font-size:clamp(42px,13vw,62px);}
  body.tklb-active .tklb-slide-copy p{font-size:15px;margin-bottom:28px;}
  body.tklb-active .tklb-slider-nav button{width:48px;height:48px;}
  body.tklb-active .tklb-story h2,
  body.tklb-active .tklb-section-head h2,
  body.tklb-active .tklb-contact h2{font-size:clamp(34px,10vw,48px);}
  body.tklb-active .tklb-year strong{font-size:62px;}
  body.tklb-active .tklb-home-carousel{min-height:430px;}
  body.tklb-active .tklb-home-card>div{padding:24px 20px;}
  body.tklb-active .tklb-home-card h3{font-size:27px;}
  body.tklb-active .tklb-service{padding:27px 22px;grid-template-columns:38px 1fr;gap:14px;}
  body.tklb-active .tklb-project{flex-basis:88vw;}
  body.tklb-active .tklb-project figure{height:245px;}
  body.tklb-active .tklb-track-nav{justify-content:flex-start;}
  body.tklb-active .tklb-gallery-grid{grid-auto-rows:210px;gap:8px;}
  body.tklb-active .tklb-logo-track{gap:42px;}
  body.tklb-active .tklb-logo-track img{width:68px;height:68px;}
  body.tklb-active .tklb-form{padding:22px 17px;}
}

/* ==========================================================
   ARIS SETYO & PARTNERS — mobile QA
   ========================================================== */
@media(max-width:900px){
  body.tlf-legacy-active .tlf-header{
    background:rgba(255,255,255,.97);
    color:#333;
    box-shadow:0 1px 0 rgba(0,0,0,.07);
    backdrop-filter:blur(12px);
  }
  body.tlf-legacy-active .tlf-header-inner{min-height:66px;padding:10px 16px;gap:12px;}
  body.tlf-legacy-active .tlf-logo{min-width:0;gap:8px;}
  body.tlf-legacy-active .tlf-logo img{width:42px;height:42px;}
  body.tlf-legacy-active .tlf-menu-button{display:block;flex:0 0 44px;margin-left:auto;}
  body.tlf-legacy-active .tlf-nav{
    max-height:calc(100svh - 66px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 18px 14px;
  }
  body.tlf-legacy-active .tlf-nav a{font-size:15px;padding:13px 4px;}
  body.tlf-legacy-active .tlf-philosophy{padding-top:96px;}
  body.tlf-legacy-active .tlf-two-col{gap:42px;}
  body.tlf-legacy-active .tlf-parallax-wrap{padding-right:24px;padding-bottom:30px;}
  body.tlf-legacy-active .tlf-over-photo{width:48%;max-width:260px;}
  body.tlf-legacy-active .tlf-pin-copy{padding:22px 18px;}
  body.tlf-legacy-active .tlf-services-grid,
  body.tlf-legacy-active .tlf-team-grid{gap:16px;}
}

@media(max-width:600px){
  body.tlf-legacy-active .tlf-header-inner{min-height:62px;padding-inline:14px;}
  body.tlf-legacy-active .tlf-logo img{width:38px;height:38px;}
  body.tlf-legacy-active .tlf-philosophy{padding-top:88px;}
  body.tlf-legacy-active .tlf-section{padding:68px 0 58px;}
  body.tlf-legacy-active .tlf-container{padding-left:16px;padding-right:16px;}
  body.tlf-legacy-active .tlf-parallax-wrap{padding-right:16px;padding-bottom:24px;}
  body.tlf-legacy-active .tlf-over-photo{width:46%;right:0;bottom:0;}
  body.tlf-legacy-active .tlf-intro h1{font-size:clamp(32px,10vw,44px);}
  body.tlf-legacy-active .tlf-intro p{font-size:16px;}
  body.tlf-legacy-active .tlf-pin-stage{height:125svh;}
  body.tlf-legacy-active .tlf-pin-screen{height:100svh;}
  body.tlf-legacy-active .tlf-pin-copy h2{font-size:clamp(26px,8vw,36px);line-height:1.28;}
  body.tlf-legacy-active .tlf-title-center{margin-bottom:34px;}
  body.tlf-legacy-active .tlf-facilities{gap:0;}
  body.tlf-legacy-active .tlf-facility{padding:24px 6px;}
  body.tlf-legacy-active .tlf-service-card figure{aspect-ratio:1.18/1;}
  body.tlf-legacy-active .tlf-service-card img{padding:20px;}
  body.tlf-legacy-active .tlf-service-card em{left:14px;right:14px;bottom:12px;font-size:11px;padding:10px 12px;}
  body.tlf-legacy-active .tlf-gallery-track{gap:12px;padding-inline:16px;}
  body.tlf-legacy-active .tlf-gallery-item{flex-basis:88vw;height:250px;border-radius:14px;}
  body.tlf-legacy-active .tlf-trust{min-height:500px;}
  body.tlf-legacy-active .tlf-trust-copy h2{font-size:clamp(38px,11vw,54px);}
  body.tlf-legacy-active .tlf-contact h2{font-size:clamp(36px,10vw,48px);}
  body.tlf-legacy-active .tlf-contact-actions{display:grid;grid-template-columns:1fr 1fr;}
  body.tlf-legacy-active .tlf-button{width:100%;}
  body.tlf-legacy-active .tlf-consult-card{padding:22px 17px;}
  body.tlf-legacy-active .tlf-footer-inner{padding-top:55px;padding-bottom:45px;}
}

@media(max-width:390px){
  body.tlf-legacy-active .tlf-contact-actions{grid-template-columns:1fr;}
  body.tlf-legacy-active .tlf-lightbox{grid-template-columns:42px minmax(0,1fr) 42px;padding:8px;}
}

/* ==========================================================
   MAIN HUB / SHARED HEADER — compact mobile navigation
   ========================================================== */
@media(max-width:860px){
  body:not(.tklb-active):not(.tlf-legacy-active) .site-header .header-inner{
    padding:10px 14px;
    grid-template-columns:minmax(0,1fr) 44px;
  }
  body:not(.tklb-active):not(.tlf-legacy-active) .site-header .brand{
    font-size:clamp(20px,6.5vw,27px);
  }
  body:not(.tklb-active):not(.tlf-legacy-active) .site-header .main-nav a{
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:15px;
  }
}

/* ==========================================================
   OUR HOME + AUCTION SPACE — mobile marketplace QA
   ========================================================== */
.tpm-marketplace,.tpm-single{overflow-x:hidden;}
.tpm-marketplace *,.tpm-single *{min-width:0;}

@media(max-width:700px){
  .tpm-wrap,.tpm-results-wrap,.tpm-single-wrap,.tpm-market-hero-inner{width:calc(100% - 28px);}
  .tpm-market-hero{padding:38px 0 24px;}
  .tpm-market-hero h1{font-size:clamp(40px,13vw,56px);margin-bottom:12px;}
  .tpm-market-hero p{font-size:14px;line-height:1.55;}
  .tpm-search{margin-top:22px;border-radius:12px;gap:0;padding:8px;box-shadow:0 12px 32px rgba(0,0,0,.14);}
  .tpm-search label{padding:9px 8px;}
  .tpm-search input,.tpm-search select{font-size:16px;min-height:36px;}
  .tpm-search button{min-height:48px;margin-top:7px;border-radius:9px;font-size:15px;}
  .tpm-filter-strip .tpm-wrap{padding:13px 0;}
  .tpm-chips{width:100%;padding:0 0 4px;scroll-snap-type:x proximity;}
  .tpm-chips a{scroll-snap-align:start;padding:8px 12px;}
  .tpm-results-wrap{padding:26px 0 55px;}
  .tpm-results-head{margin-bottom:14px;gap:8px;}
  .tpm-results-head h2{font-size:26px;}
  /* Keep the map on phones because location is a core feature. */
  .tpm-results-layout .tpm-map-panel{display:block!important;position:relative;top:auto;order:-1;margin-bottom:14px;}
  .tpm-map-panel #tpm-market-map{height:300px;border-radius:12px;}
  .tpm-map-note{font-size:10px;padding:6px 4px 2px;}
  .tpm-card-grid,.tpm-results-layout.list-only .tpm-card-grid{grid-template-columns:1fr;gap:13px;}
  .tpm-card{border-radius:13px;}
  .tpm-card-image{height:215px;}
  .tpm-card-body{padding:15px;}
  .tpm-card h3{font-size:20px;}
  .tpm-card-price{font-size:18px;margin:9px 0;}
  .tpm-specs{gap:8px;font-size:11px;}
  .tpm-single{padding-top:18px;}
  .tpm-breadcrumb{overflow:auto;white-space:nowrap;margin-bottom:20px;padding-bottom:2px;}
  .tpm-single-head{gap:10px;margin-bottom:18px;}
  .tpm-single-head h1{font-size:clamp(34px,10vw,48px);}
  .tpm-single-head p{margin:8px 0 0;}
  .tpm-single-tags{flex-wrap:wrap;}
  .tpm-single-price{font-size:24px;}
  .tpm-photo-main{height:280px;}
  .tpm-photo-grid{gap:6px;}
  .tpm-photo-grid a{height:120px;}
  .tpm-single-columns{gap:18px;}
  .tpm-detail-card,.tpm-contact-card{padding:18px;border-radius:12px;}
  .tpm-detail-grid{gap:7px;}
  .tpm-detail-grid>div{padding:12px;}
  .tpm-property-map #tpm-single-map{height:285px;}
  .tpm-primary-btn,.tpm-secondary-btn{min-height:46px;display:flex;align-items:center;justify-content:center;}
}

@media(max-width:480px){
  .tpm-detail-grid{grid-template-columns:1fr;}
  .tpm-photo-main{height:245px;}
  .tpm-photo-grid a{height:100px;}
  .tpm-card-image{height:195px;}
}

/* Touch-friendly: avoid hover-only meaning on touch screens. */
@media(hover:none),(pointer:coarse){
  body.tklb-active .tklb-project figure span{opacity:0;}
  body.tklb-active .tklb-service:hover{background:#fff;color:inherit;}
  body.tklb-active .tklb-service:hover p{color:#6a6a6a;}
  body.tlf-legacy-active .tlf-service-card:hover img{transform:none;}
  .tpm-card:hover{transform:none;box-shadow:none;}
  .tpm-card:hover .tpm-card-image img{transform:none;}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;}
}


/* ==========================================================
   KLB MENU v1.1 — elegant right drawer instead of giant full-screen links
   ========================================================== */
body.tklb-active .tklb-menu{
  position:fixed;
  inset:0;
  display:block;
  background:rgba(9,9,9,.38);
  opacity:0;
  visibility:hidden;
  transform:none !important;
  transition:opacity .28s ease,visibility .28s ease;
  overflow:hidden;
}
body.tklb-active .tklb-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:none !important;
}
body.tklb-active .tklb-menu .tklb-menu-inner{
  width:min(460px,100%);
  min-height:100%;
  height:100%;
  margin-left:auto;
  padding:105px 48px 42px;
  background:rgba(255,255,255,.99);
  box-shadow:-18px 0 45px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:2px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
body.tklb-active .tklb-menu.is-open .tklb-menu-inner{transform:translateX(0);}
body.tklb-active .tklb-menu-inner>a{
  width:100%;
  padding:10px 0 11px;
  border-bottom:1px solid rgba(0,0,0,.075);
  font-size:clamp(27px,2.6vw,40px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.025em;
  color:#111;
  transform:none;
}
body.tklb-active .tklb-menu-inner>a:hover{
  color:var(--klb-accent,#dd4425);
  transform:translateX(5px);
}
body.tklb-active .tklb-menu-close{
  top:24px;
  right:28px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  font-size:42px;
  line-height:1;
  color:#111;
}
body.tklb-active .tklb-social{
  width:100%;
  margin-top:auto;
  padding-top:28px;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  border-top:1px solid rgba(0,0,0,.075);
}
body.admin-bar.tklb-active .tklb-menu{top:32px;}

@media(max-width:900px){
  body.tklb-active .tklb-menu .tklb-menu-inner{
    width:min(390px,100%);
    padding:92px 28px 30px;
  }
  body.tklb-active .tklb-menu-inner>a{
    font-size:clamp(27px,8vw,38px);
    padding-block:9px 10px;
  }
  body.tklb-active .tklb-menu-close{top:18px;right:18px;}
  body.admin-bar.tklb-active .tklb-menu{top:46px;}
}
@media(max-width:560px){
  body.tklb-active .tklb-menu{background:#fff;}
  body.tklb-active .tklb-menu .tklb-menu-inner{
    width:100%;
    padding:88px 22px 26px;
    box-shadow:none;
  }
  body.tklb-active .tklb-menu-inner>a{
    font-size:clamp(28px,9vw,36px);
    line-height:1.08;
  }
  body.tklb-active .tklb-social{margin-top:24px;}
}