:root{
    --bg:#FFFFFF;
    --bg-deep:#F6F4EF;
    --surface:#FFFFFF;
    --ink:#10201C;
    --ink-dim:#3E534C;
    --muted:#8A8272;
    --line: rgba(18,36,32,0.09);
    --line-strong: rgba(18,36,32,0.24);
    --gold:#FF5B00; --gold-bright:#E64E00;
    --c-poodle:#8C4A2A; --c-corgi:#A9822E; --c-frenchie:#375E86; --c-bully:#5C4E8C; --c-golden:#2F6E64; --c-husky:#3E534C;
    --radius:3px; --maxw:1280px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope', sans-serif; -webkit-font-smoothing:antialiased; }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:'Fraunces', serif; margin:0; font-weight:500; letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono', monospace;}

  /* ---------- Header ---------- */
  /* ---------- Header (sticky, light with black frame) ---------- */
  header.main{ background:#FFFFFF; color:var(--ink); border-bottom:3px solid var(--gold); position:sticky; top:0; z-index:60; }

  /* ---------- Hero-overlay header (homepage only): transparent over
     the hero image at the top, switches to solid+fixed once scrolled ---------- */
  header.main.hero-overlay{ position:absolute; top:0; left:0; right:0; background:transparent; border-bottom:none; color:#fff; z-index:70; }
  header.main.hero-overlay .icon-btn{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); }
  header.main.hero-overlay .icon-btn svg{ stroke:#fff; }
  header.main.hero-overlay .icon-btn:hover{ background:rgba(255,255,255,0.26); }
  header.main.hero-overlay .burger{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); }
  header.main.hero-overlay .burger svg{ stroke:#fff; }
  header.main.hero-overlay .burger:hover{ background:rgba(255,255,255,0.26); }

  .navrow.hero-overlay{ display:none; }
  .navrow.hero-overlay .navlinks a{ color:rgba(255,255,255,0.9); }
  .navrow.hero-overlay .navlinks a:hover{ color:#fff; }

  body.header-scrolled header.main.hero-overlay{ position:fixed; top:0; background:#FFFFFF; border-bottom:3px solid var(--gold); color:var(--ink); }
  body.header-scrolled header.main.hero-overlay .icon-btn{ background:rgba(16,32,28,0.06); border-color:var(--line-strong); }
  body.header-scrolled header.main.hero-overlay .icon-btn svg{ stroke:var(--ink); }
  body.header-scrolled header.main.hero-overlay .icon-btn:hover{ background:rgba(16,32,28,0.12); }
  body.header-scrolled header.main.hero-overlay .burger{ background:rgba(16,32,28,0.06); border-color:var(--line-strong); }
  body.header-scrolled header.main.hero-overlay .burger svg{ stroke:var(--ink); }
  body.header-scrolled header.main.hero-overlay .burger:hover{ background:rgba(16,32,28,0.12); }

  body.header-scrolled .navrow.hero-overlay{ display:block; background:#FFFFFF; border-bottom:1px solid var(--line-strong); }
  body.header-scrolled .navrow.hero-overlay .navlinks a{ color:var(--ink-dim); }
  body.header-scrolled .navrow.hero-overlay .navlinks a:hover{ color:var(--gold-bright); }

  .hero.has-bg-image{ position:relative; padding-top:130px; padding-bottom:60px; border-bottom:none; background-image:linear-gradient(180deg, rgba(16,32,28,0.5), rgba(16,32,28,0.72)), url(/assets/img/hero-bg.webp); background-size:cover; background-position:center; }
  @media (min-width:981px){
    .hero.has-bg-image .wrap{ max-width:100%; padding-left:64px; padding-right:64px; }
  }
  .hero.has-bg-image h1{ color:#fff; }
  .hero.has-bg-image .eyebrow{ color:#fff; }
  .hero.has-bg-image .hero-desc{ color:rgba(255,255,255,0.88); }
  .hero.has-bg-image .hero-join-text{ color:rgba(255,255,255,0.88); }
  .hero.has-bg-image .hero-avatar{ border-color:rgba(255,255,255,0.4); }
  .header-row{ display:flex; align-items:center; gap:20px; padding:16px 32px; }
  .logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; line-height:1; }
  .logo img{ height:38px; width:auto; display:block; }
  .footer-brand .logo img{ height:56px; filter:none; }

  .site-search-bar{ flex:1; display:flex; align-items:center; background:#fff; border:1px solid var(--line-strong); border-radius:100px; height:46px; max-width:600px; position:relative; z-index:5; }
  .search-category{ height:100%; position:relative; flex-shrink:0; }
  .search-cat{ display:flex; align-items:center; gap:7px; padding:0 16px; height:100%; font-size:13px; color:var(--ink); border-right:1px solid var(--line); white-space:nowrap; font-weight:600; border-radius:100px 0 0 100px; background:none; border-top:none; border-bottom:none; border-left:none; cursor:pointer; }
  .search-cat:hover, .search-cat[aria-expanded="true"]{ background:var(--bg-deep); }
  .search-cat svg{ width:11px; height:11px; stroke:var(--muted); flex-shrink:0; transition:transform .2s; }
  .search-cat[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .category-menu{ position:absolute; top:calc(100% + 12px); left:0; width:280px; padding:8px; background:#fff; color:var(--ink); border:1px solid var(--line-strong); box-shadow:0 22px 48px -16px rgba(18,36,32,0.32); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .2s, transform .2s, visibility .2s; z-index:60; }
  .category-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .category-menu-title{ padding:8px 10px 10px; font-family:'Fraunces',serif; font-size:13px; color:var(--muted); }
  .category-option{ display:flex; align-items:center; justify-content:space-between; padding:10px; border-radius:4px; transition:background .2s; }
  .category-option:hover{ background:var(--bg-deep); }
  .category-option b{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .category-arrow{ color:var(--gold-bright); }
  .search-input{ flex:1; border:none; outline:none; padding:0 14px; font-size:14px; color:var(--ink); background:transparent; min-width:0; font-family:'Manrope',sans-serif; }
  .search-input::placeholder{ color:var(--muted); }
  .search-go{ width:38px; height:38px; margin-right:4px; border-radius:50%; background:var(--gold); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; transition:background .2s; }
  .search-go:hover{ background:var(--gold-bright); }
  .search-go svg{ width:15px; height:15px; stroke:#fff; }
  .search-dropdown{ display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--line-strong); box-shadow:0 12px 28px -8px rgba(18,36,32,0.22); max-height:400px; overflow-y:auto; z-index:100; text-align:left; }
  .search-dropdown.open{ display:block; }
  .search-dropdown .sd-group-label{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 14px 6px; font-family:'IBM Plex Mono', monospace; }
  .search-dropdown a.sd-item{ display:block; padding:9px 14px; color:var(--ink); text-decoration:none; }
  .search-dropdown a.sd-item:hover{ background:var(--bg-deep); }
  .search-dropdown a.sd-item .sd-name{ font-size:13.5px; font-weight:600; display:block; }
  .search-dropdown a.sd-item .sd-meta{ font-size:11px; color:var(--muted); display:block; margin-top:1px; }
  .search-dropdown .sd-empty{ padding:16px 14px; font-size:12.5px; color:var(--muted); text-align:center; }
  .search-dropdown .sd-divider{ height:1px; background:var(--line); margin:4px 0; }

  .icon-cluster{ display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
  .icon-btn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(16,32,28,0.06); border:1px solid var(--line-strong); transition:background .2s; flex-shrink:0; }
  .btn-pasang-iklan{ background:var(--gold); color:#fff; font-size:13px; font-weight:700; padding:9px 18px; border-radius:20px; white-space:nowrap; flex-shrink:0; transition:background .2s; }
  .btn-pasang-iklan:hover{ background:var(--gold-bright); }
  .icon-btn:hover{ background:rgba(16,32,28,0.12); }
  .icon-btn svg{ width:16px; height:16px; stroke:var(--ink); }
  .burger{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; flex-shrink:0; background:rgba(16,32,28,0.06); border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; }
  .burger:hover{ background:rgba(16,32,28,0.12); }
  .burger svg{ width:18px; height:18px; stroke:var(--ink); }

  /* ---------- Nav row (positioned via JS, not native sticky — see
     footer.php: sticky kept silently drifting out of sync with the
     header's real height across different pages/contexts, so this
     computes and applies the exact position directly instead) ---------- */
  .navrow{ background:#fff; border-bottom:1px solid var(--line-strong); }
  .navlinks{ display:flex; gap:28px; padding:12px 32px; font-size:13px; font-weight:600; overflow-x:auto; scrollbar-width:none; }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks a{ white-space:nowrap; color:var(--ink-dim); }
  .navlinks a:hover{ color:var(--gold-bright); }
  .navrow.js-fixed{ position:fixed; left:0; right:0; z-index:55; }
  .navrow-spacer{ display:none; }
  .navrow-spacer.show{ display:block; }


  /* ---------- Donut menu ---------- */
  .menu-btn:hover{ border-color:var(--gold); }
  .menu-panel{ position:fixed; width:240px; background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 18px 40px -14px rgba(18,36,32,0.32); padding:8px; display:none; z-index:200; }
  .menu-panel.open{ display:block; }
  .menu-panel a{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; font-weight:500; color:var(--ink-dim); padding:11px 12px; border-radius:2px; }
  .menu-panel a:hover{ background:var(--bg-deep); color:var(--ink); }
  .menu-panel a .n{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--gold-bright); }
  .menu-panel .divider{ height:1px; background:var(--line); margin:6px 4px; }

  /* ---------- Hero ---------- */
  .hero{ padding:52px 0; border-bottom:1px solid var(--line); overflow:hidden; }
  .hero-grid{ display:block; max-width:600px; }
  .hero .eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:12px; font-family:'IBM Plex Mono', monospace; font-weight:700; }
  .hero h1{ font-size:clamp(28px,3.4vw,44px); line-height:1.15; color:var(--ink); margin-bottom:16px; }
  .hero-desc{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; max-width:480px; margin:0 0 26px; }
  .hero-cta-row{ display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap; }
  .hero-join-row{ display:flex; align-items:center; gap:14px; }
  .hero-avatars{ display:flex; }
  .hero-avatar{ width:38px; height:38px; border-radius:50%; border:2.5px solid #fff; background:var(--bg-deep); overflow:hidden; margin-left:-10px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(18,36,32,0.15); }
  .hero-avatar:first-child{ margin-left:0; }
  .hero-avatar img{ width:100%; height:100%; object-fit:cover; }
  .hero-avatar svg{ width:70%; height:70%; }
  .hero-join-text{ font-size:12.5px; color:var(--ink-dim); max-width:220px; line-height:1.4; }

  .dog-hero-slideshow-section{ padding:40px 0 44px; border-bottom:1px solid var(--line); }
  .dog-hero-slideshow{ position:relative; margin-top:18px; height:460px; border-radius:10px; overflow:hidden; background:var(--bg-deep); }
  .dhs-slide{ position:absolute; inset:0; display:block; opacity:0; visibility:hidden; transition:opacity .6s ease; }
  .dhs-slide.active{ opacity:1; visibility:visible; z-index:1; }
  .dhs-slide img{ width:100%; height:100%; object-fit:contain; background:var(--bg-deep); }
  .dhs-badge{ position:absolute; top:16px; right:16px; z-index:2; background:var(--gold); color:#fff; font-size:11px; font-weight:700; letter-spacing:.03em; padding:5px 11px; border-radius:4px; text-transform:uppercase; }
  .dhs-info{ position:absolute; left:0; right:0; bottom:0; padding:28px 32px 26px; background:linear-gradient(0deg, rgba(0,0,0,0.72), rgba(0,0,0,0.15) 65%, transparent); display:flex; flex-direction:column; gap:4px; }
  .dhs-breed{ color:rgba(255,255,255,0.85); font-size:11.5px; font-weight:700; letter-spacing:.06em; }
  .dhs-name{ color:#fff; font-family:"Fraunces",serif; font-size:clamp(22px,3vw,32px); font-weight:600; line-height:1.15; }
  .dhs-meta{ color:rgba(255,255,255,0.85); font-size:13.5px; }
  .dhs-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.4); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
  .dhs-arrow:hover{ background:rgba(0,0,0,0.55); }
  .dhs-arrow svg{ width:20px; height:20px; }
  .dhs-arrow-prev{ left:16px; }
  .dhs-arrow-next{ right:16px; }
  .dhs-dots{ position:absolute; left:0; right:0; bottom:14px; z-index:3; display:flex; justify-content:center; gap:8px; }
  .dhs-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:background .2s, transform .2s; }
  .dhs-dot.active{ background:#fff; transform:scale(1.25); }
  @media (max-width: 640px){ .dog-hero-slideshow{ height:320px; } .dhs-info{ padding:20px 18px 20px; } .dhs-arrow{ width:34px; height:34px; } .dhs-arrow svg{ width:16px; height:16px; } }
  .hero-gallery-track img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:var(--bg-deep); }


  /* ---------- Featured Puppies ---------- */
  .featured-puppies{ padding:36px 0; border-bottom:1px solid var(--line); }
  .featured-puppies-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:18px; }
  .fp-card{ text-decoration:none; color:inherit; display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:border-color .2s ease, transform .2s ease; }
  .fp-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
  .fp-thumb{ position:relative; aspect-ratio:1/1; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:8px; }
  .fp-thumb img{ width:100%; height:100%; object-fit:cover; }
  .fp-thumb svg{ width:52%; height:52%; }
  .fp-badge{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.94); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:20px; color:var(--ink-dim); }
  .fp-info{ padding:12px 15px 14px; display:flex; flex-direction:column; gap:3px; }
  .fp-breed{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
  .fp-name{ font-family:'Fraunces',serif; font-size:16.5px; color:var(--ink); }
  .fp-meta{ font-size:12px; color:var(--muted); }
  .fp-ad-title{ font-size:12.5px; color:var(--ink-dim); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fp-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
  .fp-kennel{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
  .fp-price{ font-size:11.5px; font-weight:700; color:var(--gold-bright); }

  /* ---------- Why Kennel.id ---------- */
  .why-kennelid{ padding:56px 0; background:var(--bg-deep); border-bottom:1px solid var(--line); }
  .why-kennelid .eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:10px; font-family:'IBM Plex Mono', monospace; font-weight:700; }
  .why-panel{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; }
  .why-panel.no-image{ grid-template-columns:1fr; }
  .why-image{ position:relative; min-height:560px; background:var(--bg-deep); }
  .why-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .why-content{ padding:42px 44px; }
  .why-content h2{ font-size:clamp(24px,2.8vw,32px); margin:0 0 14px; max-width:480px; }
  .why-intro{ font-size:13.5px; color:var(--ink-dim); max-width:440px; line-height:1.6; margin:0 0 30px; }
  .why-grid{ display:flex; flex-direction:column; }
  .why-item{ border-top:1px solid var(--line-strong); padding:20px 0; }
  .why-item:last-child{ border-bottom:1px solid var(--line-strong); }
  .why-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-bright); font-weight:700; margin-bottom:8px; }
  .why-title{ font-family:'Fraunces',serif; font-size:17px; color:var(--ink); margin-bottom:6px; }
  .why-desc{ font-size:13px; color:var(--ink-dim); line-height:1.6; max-width:480px; }

  /* ---------- Filter bar ---------- */
  .filter-bar{ position:sticky; top:123px; z-index:50; background:#FFFFFF; border-bottom:1px solid var(--line); padding:16px 0; }
  .filter-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .filter-row2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 0; }
  .filter-row2 select{ font-size:12.5px; color:var(--ink-dim); background:var(--surface); border:1px solid var(--line-strong); padding:8px 12px; font-family:'Manrope',sans-serif; cursor:pointer; }
  .filter-row2 input[type="text"]{ font-size:12.5px; border:1px solid var(--line-strong); padding:8px 12px; font-family:'Manrope',sans-serif; }
  .tabs{ display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ font-size:12.5px; font-weight:600; padding:8px 15px; border:1px solid var(--line-strong); color:var(--ink-dim); cursor:pointer; background:var(--surface); font-family:'Manrope',sans-serif; display:flex; align-items:center; gap:7px; transition:all .18s ease; flex-shrink:0; }
  .tab .sw{ width:7px; height:7px; border-radius:50%; }
  .tab:hover{ border-color:var(--gold); color:var(--ink);}
  .tab.active{ background:var(--gold); color:#FFFFFF; border-color:var(--gold); box-shadow:0 3px 10px rgba(255,91,0,0.28);}
  .tab.active .sw{ background:#FFFFFF !important; }
  .select-group{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .sort-select{ font-size:12.5px; color:var(--ink-dim); background:var(--surface); border:1px solid var(--line-strong); padding:8px 12px; font-family:'Manrope',sans-serif; cursor:pointer; }
  .place-select{ border-color:var(--gold); color:var(--ink); font-weight:600; }

  /* ---------- Trending strip: new puppies this week ---------- */
  .trending{ padding:28px 0; border-bottom:1px solid var(--line);}
  .trending-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .trending-head .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-bright); animation:pulse 1.8s infinite;}
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
  .trending-head span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:'IBM Plex Mono', monospace;}
  .trend-scroll{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
  .trend-scroll::-webkit-scrollbar{ height:5px; }
  .trend-scroll::-webkit-scrollbar-thumb{ background:var(--line-strong); }
  .trend-card{ flex:0 0 auto; width:280px; border:1px solid var(--line); background:var(--surface); padding:14px 16px; display:flex; gap:14px; align-items:center; transition:border-color .2s, transform .2s; }
  .trend-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .trend-thumb{ width:60px; height:60px; flex-shrink:0; border-radius:8px; overflow:hidden; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; }
  .trend-thumb svg{ width:78%; height:78%; }
  .trend-info{ display:flex; flex-direction:column; gap:6px; min-width:0;}
  .trend-card .code{ font-size:10px; letter-spacing:.08em;}
  .trend-card .ttl{ font-size:13.5px; line-height:1.3; color:var(--ink); font-weight:600; font-family:'Manrope',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .trend-card .foot{ display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .trend-card .price{ font-size:12px; color:var(--gold-bright); font-weight:700;}
  .trend-card .kennel{ font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* ---------- Ticket grid: kennel profile cards ---------- */
  .grid-section{ padding:40px 0 80px; }
  .section-title{ font-family:'Fraunces',serif; font-size:1.5em; margin:0 0 22px; }
  .ticket-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  .ticket{ background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; display:flex; flex-direction:column; transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease; box-shadow:0 1px 2px rgba(18,36,32,0.04); }
  .ticket:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(18,36,32,0.28);}

  .ticket-image{ position:relative; height:150px; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-deep); display:flex; align-items:center; justify-content:center; }
  .ticket-image svg{ width:56%; height:56%; opacity:.92; }
  .ticket-image .caption{ position:absolute; left:0; right:0; bottom:0; padding:9px 12px 8px; background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); display:flex; align-items:baseline; gap:7px; }
  .ticket-image .caption .rk{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:#F0D9A0; letter-spacing:.05em;}
  .ticket-image .caption .nm{ font-size:12px; color:#FFFFFF; font-weight:600; }
  .verified-pin{ position:absolute; top:10px; right:10px; }
  .verified-pin img{ height:58px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }

  .ticket-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px dashed var(--line-strong); position:relative; }
  .ticket-top::before, .ticket-top::after{ content:''; position:absolute; bottom:-7px; width:14px; height:14px; border-radius:50%; background:var(--bg); }
  .ticket-top::before{ left:-8px; }
  .ticket-top::after{ right:-8px; }
  .ticket-code{ display:flex; align-items:center; gap:8px;}
  .ticket-code .sw{ width:8px; height:8px; border-radius:50%; }
  .ticket-code .txt{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:'IBM Plex Mono', monospace;}
  .ticket-kid{ display:flex; align-items:baseline; gap:3px; }
  .ticket-kid .num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold-bright); font-weight:600;}

  .ticket-body{ padding:16px 18px 14px; flex:1; display:flex; flex-direction:column;}
  .ticket-region{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-family:'IBM Plex Mono', monospace;}
  .ticket-title{ font-size:18px; line-height:1.28; color:var(--ink); margin-bottom:14px;}

  .preview-list{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px;}
  .preview-item{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-dim);}
  .preview-item .pn{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--gold-bright); flex-shrink:0;}
  .preview-item .pt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .preview-more{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono', monospace; }

  /* ---------- Social proof row ---------- */
  .proof-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .proof-item{ display:flex; flex-direction:column; gap:2px; }
  .proof-item .pv{ font-family:'Fraunces', serif; font-size:15px; color:var(--ink); font-weight:600; display:flex; align-items:center; gap:5px; }
  .proof-item .pv img{ height:34px; width:auto; display:block; }
  .proof-item .pl{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

  .ticket-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
  .ticket-views{ font-size:11px; color:var(--muted); font-family:'IBM Plex Mono', monospace; display:flex; align-items:center; gap:6px;}
  .ticket-views svg{ width:12px; height:12px; stroke:var(--muted);}
  .ticket-cta{ font-size:12px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:5px;}
  .ticket-cta .arrow{ color:var(--gold-bright); transition:margin .2s ease;}
  .ticket:hover .ticket-cta .arrow{ margin-left:4px;}

  .load-more{ display:flex; justify-content:center; margin-top:40px;}
  .load-more button{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); padding:13px 28px; cursor:pointer; transition:border-color .2s, color .2s;}
  .load-more button:hover{ border-color:var(--gold); color:var(--gold-bright);}

  /* ---------- How Verification Works ---------- */
  .method{ padding:64px 0; background:var(--bg-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .method-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
  .method h2{ font-size:28px; margin-bottom:14px; color:var(--ink);}
  .method p{ color:var(--ink-dim); font-size:14px; line-height:1.7; max-width:400px;}
  .method-list{ display:grid; grid-template-columns:1fr 1fr; gap:22px 36px;}
  .method-item .pct{ font-family:'IBM Plex Mono', monospace; color:var(--gold-bright); font-size:13px; margin-bottom:6px; display:flex; align-items:center; gap:6px;}
  .method-item .pct svg{ width:14px; height:14px; }
  .method-item .name{ font-size:14.5px; color:var(--ink); margin-bottom:5px; font-weight:600;}
  .method-item .desc{ font-size:12.5px; color:var(--muted); line-height:1.55;}

  /* ---------- For kennels strip ---------- */
  .kennel-cta{ padding:56px 0; }
  .kennel-cta-inner{ display:grid; grid-template-columns:1fr 0.85fr; gap:0; border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; }
  .kennel-cta-inner.no-image{ grid-template-columns:1fr; }
  .kennel-cta-content{ padding:38px 42px; display:flex; flex-direction:column; justify-content:center; }
  .kennel-cta-image{ position:relative; min-height:340px; background:var(--bg-deep); }
  .kennel-cta-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .kennel-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
  .kennel-cta h2{ font-size:24px; max-width:440px; }
  .kennel-cta p{ color:var(--ink-dim); font-size:13.5px; max-width:380px; margin-top:10px; line-height:1.6;}
  .btn-primary{ background:var(--gold); color:#fff; padding:13px 24px; font-size:13px; font-weight:700; border:1px solid var(--gold); border-radius:8px; }
  .btn-primary:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
  .btn-secondary{ background:transparent; color:var(--ink); padding:13px 24px; font-size:13px; font-weight:700; border:1px solid var(--line-strong); border-radius:8px; }
  .hero.has-bg-image .btn-secondary{ background:#FFFFFF; color:var(--ink); border-color:#FFFFFF; }
  .hero.has-bg-image .btn-secondary:hover{ background:var(--bg-deep); }
  .btn-secondary:hover{ border-color:var(--gold); color:var(--gold-bright); }

  /* ---------- Footer ---------- */
  footer{ padding:50px 0 36px; }
  .footer-wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
  .footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--line);}
  .footer-brand{ max-width:320px; }
  .footer-brand .logo{ margin-bottom:6px; }
  .footer-brand p{ font-size:13px; color:var(--muted); line-height:1.6; margin-top:14px;}
  .footer-cols{ display:flex; gap:56px; flex-wrap:wrap;}
  .footer-col h4{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:400;}
  .footer-col a{ display:block; font-size:13.5px; color:var(--ink-dim); margin-bottom:10px;}
  .footer-col a:hover{ color:var(--gold-bright);}
  .footer-bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted);}

  [data-cat="poodle"] .sw{ background:var(--c-poodle); }
  [data-cat="corgi"] .sw{ background:var(--c-corgi); }
  [data-cat="frenchie"] .sw{ background:var(--c-frenchie); }
  [data-cat="bully"] .sw{ background:var(--c-bully); }
  [data-cat="golden"] .sw{ background:var(--c-golden); }
  [data-cat="husky"] .sw{ background:var(--c-husky); }

  .mobile-search-btn{ display:none; }
  .icon-cluster .mobile-search-btn{ display:none; }
  .mobile-search-panel{ display:none; background:var(--bg-deep); border-bottom:none; padding:0; max-height:0; overflow:hidden; transition:max-height .2s ease, padding .2s ease; }
  .mobile-search-panel.open{ padding:14px 0; max-height:80px; border-bottom:2px solid var(--ink); }
  .mobile-search-panel .wrap svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--muted); }
  .mobile-search-panel input{ width:100%; box-sizing:border-box; border:1px solid var(--line-strong); background:#fff; padding:11px 14px 11px 38px; font-size:13.5px; font-family:'Manrope',sans-serif; color:var(--ink); border-radius:100px; }
  .mobile-search-panel input:focus{ outline:none; border-color:var(--gold); }

  @media (max-width: 980px){
    .site-search-bar{ display:none; }
    .icon-cluster .mobile-search-btn{ display:flex; }
    .mobile-search-panel{ display:block; }
    .icon-cluster .icon-btn:not(.mobile-search-btn){ display:none; }
    .icon-cluster{ gap:6px; }
    .btn-pasang-iklan{ padding:8px 12px; font-size:12px; }
    .ticket-grid{ grid-template-columns:1fr 1fr; }
    .method-grid{ grid-template-columns:1fr;}
    .filter-bar{ padding:12px 0; }
    .filter-row{ flex-wrap:nowrap; }
    .tabs{ flex-wrap:nowrap; }
    .menu-panel{ width:220px; }
    .dog-slideshow{ height:320px; }
    .featured-puppies-grid{ grid-template-columns:1fr 1fr; }
    .why-grid{ grid-template-columns:1fr; gap:24px; }
    .why-panel{ grid-template-columns:1fr; }
    .why-image{ min-height:280px; }
    .why-content{ padding:28px 24px; }
    .kennel-cta-inner{ grid-template-columns:1fr; }
    .kennel-cta-image{ min-height:220px; }
  }
  @media (max-width: 640px){
    .wrap, .footer-wrap{ padding:0 18px; }
    .header-row{ padding:10px 18px; }
    .ticket-grid{ grid-template-columns:1fr; }
    .filter-row{ flex-direction:column; align-items:stretch; gap:10px; flex-wrap:nowrap; }
    .tabs{ flex-wrap:nowrap; margin:0 -18px; padding:0 18px 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
    .tab{ white-space:nowrap; }
    .select-group{ width:100%; }
    #sortSelect{ display:none; }
    .place-select{ width:100%; }
    .header-row{ gap:14px; }
    .logo-word{ font-size:18px; }
    .logo img{ height:30px; }
    .menu-btn{ width:36px; height:36px; }
    .menu-btn .bars{ width:14px; gap:3px; }
    .filter-bar{ top:72px; }
    .kennel-cta-content{ padding:24px; }
  }
  @media (max-width: 460px){
    .featured-puppies-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 360px){
    .header-row{ padding-left:12px; padding-right:12px; }
    .logo img{ height:24px; }
    .btn-pasang-iklan{ padding:7px 9px; font-size:11px; }
    .icon-cluster{ gap:4px; }
  }

/* Iklan Premium highlight — a distinct orange frame + badge for any
   card representing a dog with a currently-active Iklan Premium
   placement. Deliberately generic (not tied to any one card's base
   class like .puppy-card or .ticket) so the same rule applies
   consistently everywhere a listing card shows up — search results,
   breed pages, a kennel's own profile, etc. — without duplicating it
   per page. Intentionally NOT used on the homepage's own "Premium
   Listing" section, since every card there is already premium by
   definition and the highlight would be redundant. */
.premium-highlight{ border:2px solid #E64E00 !important; background:rgba(230,78,0,0.03); position:relative; }
.premium-highlight::before{ content:"Premium"; position:absolute; top:8px; right:8px; z-index:2; background:#E64E00; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.03em; padding:3px 8px; border-radius:4px; text-transform:uppercase; }