/* KerjaKu Home — page-scoped mobile marketplace home styles.
   Do not place shared/global rules here. */
.home-marketplace{width:100%;}
.home-marketplace .products-section{padding-top:8px;}
.home-marketplace .products-section .cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  width:100%;
  align-items:start;
}
.home-marketplace .products-section .product-card{
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  overflow:hidden;
  background:var(--kk-surface);
  border:1px solid var(--kk-border);
  border-radius:14px;
}
.home-marketplace .products-section .thumb{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  height:auto;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(135deg,#1e293b,#312e81);
}
.home-marketplace .products-section .thumb.has-image img{
  display:block;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center;
}
.home-marketplace .products-section .thumb.service{background:linear-gradient(135deg,#172554,#7c3aed);}
.home-marketplace .products-section .thumb.digital{background:linear-gradient(135deg,#1e293b,#4338ca);}
.home-marketplace .products-section .product-body{padding:9px;min-width:0;}
.home-marketplace .products-section .product-title{
  font-size:.78rem;
  line-height:1.25;
  margin:7px 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-marketplace .products-section .product-body>.muted{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.3;
  margin:4px 0 5px;
}
.home-marketplace .products-section .price{font-size:.86rem;}
.home-marketplace .products-section .meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--kk-muted);
  font-size:.59rem;
  margin-top:7px;
}
@media(max-width:360px){
  .home-marketplace .products-section .cards{gap:7px;}
  .home-marketplace .products-section .product-body{padding:8px;}
  .home-marketplace .products-section .product-title{font-size:.73rem;}
  .home-marketplace .products-section .price{font-size:.8rem;}
}
.home-marketplace .products-section .product-card{position:relative}
.home-marketplace .products-section .product-card-link{display:block;color:inherit;text-decoration:none}
.home-marketplace .products-section .cart-add-form{position:absolute;right:8px;bottom:8px;z-index:5}
.home-marketplace .products-section .cart-add-link{position:absolute;right:8px;bottom:8px;z-index:5;text-decoration:none}
.home-marketplace .cart-add-btn{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#6366f1;color:#fff;font-size:1.25rem;line-height:1;display:grid;place-items:center;box-shadow:0 5px 14px rgba(0,0,0,.28);padding:0}

/* Cart AJAX feedback — homepage only. */
.home-marketplace .cart-add-btn{transition:transform .16s ease,opacity .16s ease}
.home-marketplace .cart-add-btn.is-loading{opacity:.55;transform:scale(.92);pointer-events:none}
.home-marketplace .cart-add-btn.is-added{transform:scale(1.12)}
.cart-toast{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:120;max-width:min(88vw,360px);padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#182338;color:#f8fafc;box-shadow:0 12px 28px rgba(0,0,0,.35);font-size:.76rem;font-weight:800;text-align:center;transition:opacity .18s ease,transform .18s ease}
.cart-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.cart-toast.is-error{border-color:rgba(239,68,68,.45);background:#2b1720}


/* HOME SHELL LOCK — prevents shared/page CSS from changing the mobile marketplace geometry. */
.home-marketplace{width:100%;max-width:100%;min-width:0;overflow:visible;}
.home-marketplace .products-section .cards{width:100%;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.home-marketplace .products-section .product-card{min-width:0;max-width:none;}



/* Homepage header/profile photo — STRICTLY scoped to the homepage header. */
.home-topbar .home-header-actions .icon-btn{overflow:hidden;min-width:0;}
.home-topbar .home-header-actions .avatar.avatar-photo{
  width:38px;height:38px;min-width:38px;max-width:38px;min-height:38px;max-height:38px;
  flex:0 0 38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  position:relative;background:#6366f1;color:#fff;font-weight:900;
}
.home-topbar .home-header-actions .avatar.avatar-photo img{
  display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;
  object-fit:cover;object-position:center;
}

/* Homepage notification center — logged-in users only. */
.home-topbar .home-header-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.home-topbar .notification-bell-btn{position:relative;font-size:0}
.home-topbar .notification-bell-icon{width:24px;height:24px;display:grid;place-items:center;color:#f8fafc;font-size:18px;line-height:1}
.home-topbar .notification-bell-count{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid var(--kk-bg);display:grid;place-items:center;font-size:.57rem;font-weight:900;line-height:1}
.home-topbar .notification-bell-btn[aria-expanded="true"]{border-color:rgba(99,102,241,.85);background:#202a55}
.notification-center{position:fixed;inset:0;z-index:200;padding:68px 16px 92px;display:flex;justify-content:center;align-items:flex-start}
.notification-center[hidden]{display:none}
.notification-center-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.68);backdrop-filter:blur(3px)}
.notification-center-card{position:relative;width:min(100%,398px);max-height:min(72vh,590px);overflow:hidden;background:#101a2d;border:1px solid #3b4b68;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.5);display:flex;flex-direction:column}
.notification-center-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 15px 12px;border-bottom:1px solid #293752;background:#121d31}
.notification-center-head strong{display:block;font-size:.98rem}
.notification-center-head small{display:block;color:var(--kk-muted);font-size:.68rem;margin-top:2px}
.notification-close{width:34px;height:34px;border:1px solid #334155;border-radius:10px;background:#1b2940;color:#cbd5e1;font-size:1.25rem;line-height:1}
.notification-center-list{overflow:auto;padding:8px}
.notification-center-item{display:grid;grid-template-columns:36px minmax(0,1fr) 7px;gap:10px;align-items:start;padding:10px;border-radius:13px;color:inherit;border:1px solid transparent}
.notification-center-item:hover{background:#17243a}
.notification-center-item.is-unread{background:#182442;border-color:rgba(99,102,241,.35)}
.notification-center-item-icon{width:36px;height:36px;border-radius:11px;background:#202a55;display:grid;place-items:center;font-size:17px}
.notification-center-item-body{min-width:0}
.notification-center-item-body strong{display:block;font-size:.77rem;line-height:1.25}
.notification-center-item-body>span{display:block;color:#cbd5e1;font-size:.69rem;line-height:1.4;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notification-center-item-body small{display:block;color:#7f8da5;font-size:.61rem;margin-top:4px}
.notification-center-item>i{width:7px;height:7px;border-radius:50%;background:#ef4444;margin-top:5px}
.notification-loading,.notification-error-center,.notification-empty-center{padding:24px 14px;text-align:center;color:var(--kk-muted);font-size:.72rem}
.notification-empty-center{display:grid;gap:5px}
.notification-empty-center strong{color:#f8fafc;font-size:.8rem}
.notification-empty-icon{font-size:1.7rem}
.notification-center-actions{display:grid;gap:8px;padding:10px 12px 12px;border-top:1px solid #293752;background:#121d31}
.notification-center-actions button,.notification-center-actions a{min-height:40px;border-radius:11px;font-size:.72rem;font-weight:800;text-align:center;display:flex;align-items:center;justify-content:center}
.notification-read-all{border:1px solid rgba(99,102,241,.6);background:#202a55;color:#e0e7ff}
.notification-read-all:disabled{opacity:.55;cursor:wait}
.notification-center-actions a{background:transparent;color:#a78bfa;border:1px solid #334155}
body.notification-center-open{overflow:hidden}
@media(max-width:360px){
  .home-topbar .home-header-actions{gap:5px}
  .home-topbar .home-header-actions .icon-btn{width:44px;height:44px;flex-basis:44px}
  .notification-center{padding-inline:10px}
}


/* GTM V1 — prominent Top Seller discovery CTA. Page-scoped to homepage. */
.home-marketplace .home-quick-cta{padding-top:2px;padding-bottom:2px;}
.home-marketplace .home-top-seller-cta{display:flex;min-width:0;max-width:100%;align-items:center;gap:10px;padding:12px 13px;border-radius:16px;background:linear-gradient(135deg,rgba(23,105,255,.18),rgba(30,41,59,.96));border:1px solid rgba(96,165,250,.32);color:inherit;text-decoration:none;box-shadow:0 8px 24px rgba(2,6,23,.16);}
.home-marketplace .home-top-seller-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:rgba(37,99,235,.18);font-size:19px;}
.home-marketplace .home-top-seller-cta>span:nth-child(2){min-width:0;flex:1;}
.home-marketplace .home-top-seller-cta strong{display:block;font-size:.79rem;}
.home-marketplace .home-top-seller-cta small{overflow-wrap:anywhere;word-break:normal;display:block;color:#aebbd0;font-size:.62rem;line-height:1.35;margin-top:3px;}
.home-marketplace .home-top-seller-cta>b{color:#93c5fd;font-size:1.25rem;}

/* HOTFIX 2026-09-29 — mobile Top Seller CTA + product image containment.
   This block is intentionally page-scoped to prevent collisions with other pages. */
.home-marketplace .home-quick-cta{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.home-marketplace .home-top-seller-cta{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.home-marketplace .home-top-seller-cta > span:nth-child(2){
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.home-marketplace .home-top-seller-cta strong,
.home-marketplace .home-top-seller-cta small{overflow-wrap:anywhere;word-break:normal;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.home-marketplace .products-section .thumb.has-image{
  width:100%;
  max-width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
}
.home-marketplace .products-section .thumb.has-image img{
  display:block;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center;
}
@media(max-width:360px){
  .home-marketplace .home-top-seller-cta{grid-template-columns:36px minmax(0,1fr) auto;gap:8px;padding:11px 11px;}
  .home-marketplace .home-top-seller-icon{width:36px;height:36px;flex-basis:36px;font-size:17px;}
  .home-marketplace .home-top-seller-cta strong{font-size:.75rem;line-height:1.2;}
  .home-marketplace .home-top-seller-cta small{overflow-wrap:anywhere;word-break:normal;font-size:.59rem;line-height:1.3;}
}


/* HOTFIX 2026-09-30 — homepage product thumbnail containment.
   Prevents product images from expanding the card on mobile when other/global
   rules or intrinsic image dimensions interfere with the 1:1 thumbnail box. */
.home-marketplace .products-section .cards .product-card .thumb.has-image{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:0 !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.home-marketplace .products-section .cards .product-card .thumb.has-image::before{
  content:"";
  display:block;
  width:100%;
  padding-top:100%;
}
.home-marketplace .products-section .cards .product-card .thumb.has-image img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}