.seo-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px;}
  .seo-service-card{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow-soft);transition:.2s ease;}
  .seo-service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .seo-service-card strong{display:block;color:var(--primary);font-size:18px;margin-bottom:6px;}
  .seo-service-card span{display:block;color:var(--muted);font-size:14px;line-height:1.55;}
  .seo-note{margin-top:18px;color:var(--muted);font-size:14px;}
  @media(max-width:900px){.seo-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:560px){.seo-service-grid{grid-template-columns:1fr;}}



    :root{
      --primary:#6D104D;
      --secondary:#8B0A52;
      --accent:#FF5A36;
      --soft:#FBF4F8;
      --white:#FFFFFF;
      --text:#4A1F38;
      --muted:#7A5A6C;
      --line:#E8D8E1;
      --dark:#4D0936;
      --radius:22px;
      --shadow:0 22px 50px rgba(16,42,67,.12);
      --shadow-soft:0 12px 30px rgba(16,42,67,.08);
    }

    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:Inter, Arial, sans-serif;
      color:var(--text);
      background:var(--white);
      line-height:1.65;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    button,
    input,
    textarea,
    select{
      font:inherit;
    }

    .container{
      width:min(1180px, 92%);
      margin:auto;
    }

    .topbar{
      background:var(--dark);
      color:#D9E2EC;
      font-size:14px;
      padding:10px 0;
    }

    .topbar .container{
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }

    .navbar{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(217,226,236,.9);
    }

    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:78px;
      gap:24px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      color:var(--primary);
      letter-spacing:.2px;
    }

    .brand-logo{
      width:64px;
      height:auto;
      display:block;
      object-fit:contain;
    }

    .brand small{
      display:block;
      font-size:12px;
      font-weight:600;
      color:var(--muted);
      margin-top:-4px;
    }

    .nav-menu{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .nav-menu > a,
    .nav-menu > button{
      background:none;
      border:0;
      color:var(--primary);
      padding:12px 14px;
      border-radius:999px;
      cursor:pointer;
      font-weight:700;
      font-size:15px;
    }

    .nav-menu > a:hover,
    .nav-menu > button:hover{
      background:var(--soft);
    }

    .nav-cta{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:0;
      border-radius:999px;
      padding:12px 18px;
      font-weight:800;
      cursor:pointer;
      transition:.2s ease;
      white-space:nowrap;
    }

    .btn-primary{
      background:var(--secondary);
      color:white;
      box-shadow:0 14px 28px rgba(15,118,110,.22);
    }

    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 34px rgba(15,118,110,.28);
    }

    .btn-outline{
      background:white;
      color:var(--primary);
      border:1px solid var(--line);
    }

    .btn-outline:hover{
      border-color:var(--secondary);
      color:var(--secondary);
    }

    .mobile-toggle{
      display:none;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background:white;
      cursor:pointer;
      font-size:22px;
    }

    .mega-menu{
      position:absolute;
      left:50%;
      top:78px;
      transform:translateX(-50%);
      width:min(1120px, 92%);
      background:white;
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:24px;
      display:none;
      grid-template-columns:1.2fr 1.8fr;
      gap:24px;
      z-index:80;
    }

    .mega-menu.active{
      display:grid;
      animation:fadeDrop .22s ease;
    }

    @keyframes fadeDrop{
      from{opacity:0; transform:translate(-50%, -8px);}
      to{opacity:1; transform:translate(-50%, 0);}
    }

    .mega-intro{
      padding:22px;
      border-radius:24px;
      color:white;
      background:
        radial-gradient(circle at top right, rgba(245,158,11,.45), transparent 30%),
        linear-gradient(135deg, var(--primary), var(--secondary));
    }

    .mega-intro h3{
      font-size:24px;
      line-height:1.25;
      margin-bottom:12px;
    }

    .mega-intro p{
      color:#E6FFFA;
      font-size:15px;
      margin-bottom:18px;
    }

    .mega-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
    }

    .mega-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border:1px solid var(--line);
      border-radius:18px;
      cursor:pointer;
      transition:.18s ease;
      background:white;
    }

    .mega-item:hover{
      transform:translateY(-2px);
      border-color:rgba(15,118,110,.45);
      box-shadow:var(--shadow-soft);
    }

    .mega-icon{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:var(--soft);
      color:var(--secondary);
      flex:0 0 auto;
    }

    .mega-item h4{
      color:var(--primary);
      font-size:15px;
      margin-bottom:2px;
    }

    .mega-item p{
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:86px 0 70px;
      background:
        radial-gradient(circle at 10% 10%, rgba(245,158,11,.18), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(15,118,110,.18), transparent 28%),
        linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:48px;
      align-items:center;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:#FCE8F0;
      color:var(--secondary);
      font-weight:800;
      font-size:13px;
      margin-bottom:18px;
    }

    .hero h1{
      color:var(--primary);
      font-size:clamp(40px, 6vw, 68px);
      line-height:1.02;
      letter-spacing:-2.6px;
      margin-bottom:20px;
    }

    .hero p{
      color:var(--muted);
      font-size:18px;
      max-width:640px;
      margin-bottom:28px;
    }

    .search-box{
      display:flex;
      gap:10px;
      background:white;
      border:1px solid var(--line);
      padding:10px;
      border-radius:999px;
      box-shadow:var(--shadow-soft);
      max-width:680px;
      margin-bottom:20px;
    }

    .search-box input{
      border:0;
      outline:0;
      flex:1;
      padding:12px 16px;
      min-width:0;
      color:var(--primary);
    }

    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    /* Hero partner logo strip */
    .hero-partner-strip{
      grid-column:1 / -1;
      justify-self:center;
      margin:28px auto 0;
      width:min(980px, 96%);
      max-width:980px;
      background:rgba(255,255,255,.92);
      border:1px solid var(--line);
      border-radius:24px;
      padding:18px 30px;
      box-shadow:var(--shadow-soft);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      overflow:hidden;
    }

    .hero-partner-strip img{
      width:100%;
      max-width:920px;
      height:auto;
      display:block;
      object-fit:contain;
      margin:0 auto;
    }

    html[data-theme="dark"] .hero-partner-strip{
      background:#fff;
      border-color:rgba(255,255,255,.16);
    }

    @media (max-width:640px){
      .hero-partner-strip{
        width:100%;
        border-radius:18px;
        padding:12px 14px;
        margin-top:18px;
      }
    }

    .hero-panel{
      background:white;
      border:1px solid var(--line);
      border-radius:34px;
      padding:22px;
      box-shadow:var(--shadow);
    }

    .panel-card{
      border-radius:26px;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      color:white;
      padding:24px;
      margin-bottom:16px;
      min-height:220px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
    }

    .panel-card::after{
      content:"";
      position:absolute;
      width:190px;
      height:190px;
      border-radius:50%;
      right:-58px;
      top:-58px;
      background:rgba(245,158,11,.28);
    }

    .panel-card h3{
      font-size:26px;
      max-width:320px;
      position:relative;
      z-index:1;
    }

    .panel-card p{
      color:#D9E2EC;
      font-size:14px;
      position:relative;
      z-index:1;
      margin:0;
    }

    .quick-stats{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
    }

    .stat{
      padding:16px;
      background:var(--soft);
      border-radius:20px;
      border:1px solid #E6ECF2;
    }

    .stat strong{
      display:block;
      color:var(--primary);
      font-size:22px;
    }

    .stat span{
      color:var(--muted);
      font-size:13px;
    }

    .section{
      padding:86px 0;
    }

    .section-soft{
      background:var(--soft);
    }

    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:24px;
      margin-bottom:34px;
    }

    .section-head h2{
      color:var(--primary);
      font-size:clamp(30px,4vw,46px);
      line-height:1.08;
      letter-spacing:-1.2px;
      max-width:720px;
    }

    .section-head p{
      color:var(--muted);
      max-width:520px;
    }

    .category-strip{
      display:flex;
      gap:10px;
      overflow:auto;
      padding-bottom:12px;
      margin-bottom:28px;
    }

    .chip{
      border:1px solid var(--line);
      background:white;
      color:var(--primary);
      padding:10px 15px;
      border-radius:999px;
      cursor:pointer;
      font-weight:800;
      white-space:nowrap;
      transition:.2s;
    }

    .chip.active,
    .chip:hover{
      background:var(--primary);
      color:white;
      border-color:var(--primary);
    }

    .service-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:18px;
    }

    .service-card{
      background:white;
      border:1px solid var(--line);
      border-radius:26px;
      padding:22px;
      box-shadow:0 12px 28px rgba(16,42,67,.06);
      transition:.2s ease;
      display:flex;
      flex-direction:column;
      min-height:330px;
    }

    .service-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
      border-color:rgba(15,118,110,.36);
    }

    .service-card .icon{
      width:54px;
      height:54px;
      border-radius:19px;
      background:#FCE8F0;
      color:var(--secondary);
      display:grid;
      place-items:center;
      font-size:24px;
      margin-bottom:16px;
    }

    .service-card h3{
      color:var(--primary);
      line-height:1.25;
      margin-bottom:10px;
      font-size:21px;
    }

    .service-card p{
      color:var(--muted);
      font-size:15px;
      margin-bottom:16px;
    }

    .sub-list{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
      margin-bottom:18px;
    }

    .sub-list span{
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--soft);
      color:var(--primary);
      font-weight:700;
    }

    .card-action{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:var(--secondary);
      font-weight:800;
      cursor:pointer;
      padding-top:14px;
      border-top:1px solid var(--line);
    }

    .detail-panel{
      position:fixed;
      inset:0;
      background:rgba(11,31,51,.62);
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px;
      z-index:120;
    }

    .detail-panel.active{
      display:flex;
    }

    .modal{
      width:min(880px, 96%);
      max-height:88vh;
      overflow:auto;
      background:white;
      border-radius:30px;
      box-shadow:0 30px 90px rgba(0,0,0,.28);
      padding:26px;
      animation:modalIn .2s ease;
    }

    @keyframes modalIn{
      from{opacity:0; transform:scale(.96);}
      to{opacity:1; transform:scale(1);}
    }

    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:20px;
      margin-bottom:18px;
      padding-bottom:18px;
      border-bottom:1px solid var(--line);
    }

    .modal h3{
      color:var(--primary);
      font-size:30px;
      line-height:1.15;
      margin-bottom:8px;
    }

    .modal p{
      color:var(--muted);
    }

    .close-modal{
      border:0;
      background:var(--soft);
      width:42px;
      height:42px;
      border-radius:14px;
      cursor:pointer;
      font-size:22px;
      color:var(--primary);
      flex:0 0 auto;
    }

    .modal-body{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .modal-box{
      border:1px solid var(--line);
      border-radius:22px;
      padding:18px;
      background:#FBFDFF;
    }

    .modal-box h4{
      color:var(--primary);
      margin-bottom:10px;
    }

    .modal-box ul{
      padding-left:18px;
      color:var(--muted);
    }

    .modal-footer{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:18px;
    }

    .work-flow{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:14px;
      counter-reset:flow;
    }

    .flow-card{
      background:white;
      border:1px solid var(--line);
      border-radius:24px;
      padding:20px;
      position:relative;
      min-height:210px;
    }

    .flow-card::before{
      counter-increment:flow;
      content:"0" counter(flow);
      display:inline-flex;
      width:42px;
      height:42px;
      align-items:center;
      justify-content:center;
      border-radius:15px;
      background:var(--primary);
      color:white;
      font-weight:900;
      margin-bottom:16px;
    }

    .flow-card h3{
      color:var(--primary);
      font-size:17px;
      margin-bottom:8px;
    }

    .flow-card p{
      color:var(--muted);
      font-size:14px;
      line-height:1.55;
    }

    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }

    .portfolio-card{
      border-radius:26px;
      overflow:hidden;
      background:white;
      border:1px solid var(--line);
      box-shadow:0 12px 28px rgba(16,42,67,.06);
      display:none;
    }

    .portfolio-card.show{
      display:block;
      animation:fadeUp .22s ease;
    }

    @keyframes fadeUp{
      from{opacity:0; transform:translateY(8px);}
      to{opacity:1; transform:translateY(0);}
    }

    .portfolio-thumb{
      height:188px;
      background:
        radial-gradient(circle at top right, rgba(245,158,11,.35), transparent 35%),
        linear-gradient(135deg, #102A43, #0F766E);
      display:flex;
      align-items:end;
      color:white;
      padding:18px;
      font-weight:900;
      font-size:22px;
    }

    .portfolio-body{
      padding:18px;
    }

    .portfolio-body h3{
      color:var(--primary);
      margin-bottom:6px;
    }

    .portfolio-body p{
      color:var(--muted);
      font-size:14px;
    }

    .portfolio-thumb-image{
      position:relative;
      height:220px;
      padding:0;
      display:block;
      overflow:hidden;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
    }

    .portfolio-thumb-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform:scale(1.01);
      transition:.28s ease;
    }

    .portfolio-card:hover .portfolio-thumb-image img{
      transform:scale(1.06);
    }

    .portfolio-thumb-image::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.08), rgba(77,9,54,.72));
    }

    .portfolio-thumb-text{
      position:relative;
      height:220px;
      padding:18px;
      display:flex;
      align-items:end;
      background:
        radial-gradient(circle at top right, rgba(255,90,54,.35), transparent 35%),
        linear-gradient(135deg, var(--primary), var(--secondary));
    }

    .portfolio-thumb-label{
      position:absolute;
      left:16px;
      bottom:16px;
      z-index:2;
      color:white;
      font-size:12px;
      font-weight:900;
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.25);
      backdrop-filter:blur(10px);
    }

    .portfolio-meta{
      margin-top:14px;
      display:inline-flex;
      width:fit-content;
      padding:7px 10px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
    }

    .portfolio-gallery-wrap{
      margin-top:34px;
      padding:26px;
      border-radius:30px;
      background:white;
      border:1px solid var(--line);
      box-shadow:0 14px 32px rgba(77,9,54,.08);
    }

    .portfolio-gallery-head{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:flex-end;
      margin-bottom:22px;
    }

    .portfolio-gallery-head h3{
      color:var(--primary);
      font-size:clamp(24px,3vw,34px);
      line-height:1.15;
      letter-spacing:-.6px;
      margin-top:8px;
    }

    .portfolio-gallery-head p{
      color:var(--muted);
      max-width:460px;
      font-size:14px;
    }

    .photo-album-list{
      display:grid;
      gap:22px;
    }

    .photo-album{
      display:none;
      border:1px solid var(--line);
      border-radius:24px;
      padding:18px;
      background:#FBFDFF;
    }

    .photo-album.show{
      display:block;
      animation:fadeUp .22s ease;
    }

    .photo-album-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:18px;
      margin-bottom:16px;
    }

    .photo-album-head h3{
      color:var(--primary);
      font-size:22px;
      margin-bottom:4px;
    }

    .photo-album-head p{
      color:var(--muted);
      font-size:14px;
      max-width:720px;
    }

    .photo-album-head span{
      flex:0 0 auto;
      color:var(--secondary);
      background:var(--soft);
      border-radius:999px;
      padding:8px 11px;
      font-size:12px;
      font-weight:900;
    }

    .photo-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:12px;
    }

    .portfolio-photo{
      display:block;
      border-radius:18px;
      overflow:hidden;
      background:var(--soft);
      border:1px solid var(--line);
      aspect-ratio:4/3;
    }

    .portfolio-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:.22s ease;
    }

    .portfolio-photo:hover img{
      transform:scale(1.06);
    }

    @media (max-width:980px){
      .photo-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
      }
    }

    @media (max-width:640px){
      .portfolio-gallery-wrap{
        padding:18px;
      }

      .portfolio-gallery-head,
      .photo-album-head{
        display:block;
      }

      .photo-album-head span{
        margin-top:12px;
        display:inline-flex;
      }

      .photo-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    .packages{
      display:grid;
      grid-template-columns:.9fr 1.4fr;
      gap:24px;
      align-items:start;
    }

    .package-tabs{
      background:white;
      border:1px solid var(--line);
      border-radius:26px;
      padding:14px;
      box-shadow:var(--shadow-soft);
    }

    .package-tab{
      width:100%;
      text-align:left;
      border:0;
      background:transparent;
      padding:16px;
      border-radius:18px;
      cursor:pointer;
      font-weight:900;
      color:var(--primary);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .package-tab.active{
      background:var(--primary);
      color:white;
    }

    .package-content{
      background:white;
      border:1px solid var(--line);
      border-radius:26px;
      padding:26px;
      box-shadow:var(--shadow-soft);
      min-height:360px;
    }

    .package-content h3{
      color:var(--primary);
      font-size:28px;
      margin-bottom:10px;
    }

    .package-content p{
      color:var(--muted);
      margin-bottom:18px;
    }

    .feature-list{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
    }

    .feature{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:12px;
      background:var(--soft);
      border-radius:16px;
      color:var(--primary);
      font-weight:700;
      font-size:14px;
    }

    .feature b{
      color:var(--secondary);
    }

    .live-package-plans{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
      margin-top:20px;
    }

    .live-package-plan{
      border:1px solid var(--line);
      border-radius:24px;
      overflow:hidden;
      background:white;
      box-shadow:0 12px 28px rgba(77,9,54,.06);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }

    .live-package-plan h4{
      background:var(--secondary);
      color:white;
      text-align:center;
      padding:14px 12px;
      font-size:20px;
      margin:0;
    }

    .live-package-plan-body{
      padding:20px 18px 18px;
      display:flex;
      flex-direction:column;
      flex:1;
      text-align:center;
    }

    .live-package-price{
      color:var(--secondary);
      font-weight:900;
      font-size:18px;
      margin-bottom:18px;
    }

    .live-package-price span{
      color:#C9D6DF;
      font-weight:700;
    }

    .live-package-plan ul{
      list-style:none;
      display:grid;
      gap:10px;
      margin:0 0 22px;
      padding:0;
      color:var(--text);
      font-size:13px;
      line-height:1.45;
      text-transform:uppercase;
    }

    .live-package-plan .btn{
      margin-top:auto;
      align-self:center;
      border-radius:999px;
      border:1px solid var(--secondary);
      color:white;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      padding:8px 14px;
      min-width:132px;
      font-size:12px;
      line-height:1.2;
      font-weight:800;
      box-shadow:0 10px 22px rgba(109,16,77,.16);
    }

    .live-package-plan .btn:hover{
      transform:translateY(-1px);
      background:linear-gradient(135deg, var(--secondary), var(--accent));
      border-color:var(--accent);
      color:white;
      box-shadow:0 12px 26px rgba(109,16,77,.22);
    }

    html[data-theme="dark"] .live-package-plan{
      background:#1E2633;
    }

    html[data-theme="dark"] .live-package-plan .btn{
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      color:white;
      border-color:var(--secondary);
    }

    @media (max-width:980px){
      .live-package-plans{
        grid-template-columns:1fr;
      }
    }

    .quote-box{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:28px;
      align-items:start;
      background:
        radial-gradient(circle at 5% 0%, rgba(245,158,11,.2), transparent 26%),
        linear-gradient(135deg, var(--primary), #164E63);
      border-radius:34px;
      padding:34px;
      color:white;
      box-shadow:var(--shadow);
    }

    .quote-box h2{
      font-size:38px;
      line-height:1.08;
      margin-bottom:14px;
    }

    .quote-box p{
      color:#D9E2EC;
    }

    .quote-form{
      background:white;
      color:var(--text);
      border-radius:26px;
      padding:22px;
    }

    .form-grid{
      display:grid;
      gap:12px;
    }

    .field label{
      display:block;
      color:var(--primary);
      font-weight:800;
      font-size:13px;
      margin-bottom:6px;
    }

    .field input,
    .field select,
    .field textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px 14px;
      outline:0;
      color:var(--primary);
      background:white;
    }

    .field textarea{
      min-height:96px;
      resize:vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus{
      border-color:var(--secondary);
      box-shadow:0 0 0 4px rgba(15,118,110,.1);
    }

    .faq-list{
      max-width:900px;
      margin:auto;
      display:grid;
      gap:12px;
    }

    .faq-item{
      background:white;
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
    }

    .faq-question{
      width:100%;
      border:0;
      background:white;
      padding:18px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      cursor:pointer;
      text-align:left;
      color:var(--primary);
      font-weight:900;
    }

    .faq-answer{
      display:none;
      padding:0 20px 18px;
      color:var(--muted);
    }

    .faq-item.active .faq-answer{
      display:block;
    }

    .faq-item.active .faq-question span{
      transform:rotate(45deg);
    }

    .live-carousel-wrap{
      margin-top:34px;
      padding:24px;
      border-radius:34px;
      background:
        radial-gradient(circle at top left, rgba(255,90,54,.18), transparent 28%),
        linear-gradient(135deg, rgba(109,16,77,.98), rgba(139,10,82,.96));
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .live-carousel-wrap::after{
      content:"";
      position:absolute;
      width:260px;
      height:260px;
      right:-110px;
      top:-110px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
      pointer-events:none;
    }

    .live-carousel-head{
      position:relative;
      z-index:1;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:22px;
      flex-wrap:wrap;
      margin-bottom:22px;
    }

    .live-carousel-head h3{
      color:white;
      font-size:clamp(26px, 3vw, 38px);
      line-height:1.12;
      letter-spacing:-.8px;
      max-width:620px;
      margin-bottom:8px;
    }

    .live-carousel-head p{
      color:#FBE7F0;
      max-width:640px;
      font-size:15px;
    }

    .live-carousel-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .carousel-btn{
      border:1px solid rgba(255,255,255,.22);
      color:white;
      background:rgba(255,255,255,.12);
      width:46px;
      height:46px;
      border-radius:16px;
      cursor:pointer;
      font-size:20px;
      font-weight:900;
      transition:.2s ease;
    }

    .carousel-btn:hover{
      background:white;
      color:var(--primary);
      transform:translateY(-2px);
    }

    .live-counter{
      color:#FBE7F0;
      font-weight:800;
      font-size:14px;
      padding:10px 13px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.1);
    }

    .live-carousel-viewport{
      position:relative;
      z-index:1;
      overflow:hidden;
      border-radius:26px;
    }

    .live-video-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
      transition:.35s ease;
    }

    .live-video-card{
      background:white;
      border:1px solid rgba(255,255,255,.22);
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,.16);
      transform:translateY(0);
      transition:.22s ease;
    }

    .live-video-card:hover{
      transform:translateY(-5px);
      box-shadow:0 24px 52px rgba(0,0,0,.24);
    }

    .custom-thumb{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      overflow:hidden;
      cursor:pointer;
      border:0;
      display:block;
    }

    .custom-thumb img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:.28s ease;
      filter:saturate(1.05) contrast(1.04);
    }

    .custom-thumb:hover img{
      transform:scale(1.06);
    }

    .custom-thumb::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(77,9,54,.12) 0%, rgba(77,9,54,.82) 100%),
        radial-gradient(circle at top right, rgba(255,90,54,.3), transparent 34%);
      z-index:1;
    }

    .play-circle{
      position:absolute;
      z-index:2;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:62px;
      height:62px;
      border-radius:50%;
      background:white;
      color:var(--primary);
      display:grid;
      place-items:center;
      box-shadow:0 16px 34px rgba(0,0,0,.24);
      font-size:22px;
      padding-left:4px;
    }

    .thumb-label{
      position:absolute;
      z-index:2;
      left:14px;
      bottom:14px;
      right:14px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }

    .thumb-label span{
      padding:7px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      color:white;
      background:rgba(255,255,255,.16);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.24);
    }

    .live-video-frame{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      background:#000;
    }

    .live-video-frame iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .live-video-body{
      padding:16px 17px 18px;
    }

    .live-video-body h4{
      color:var(--primary);
      font-size:17px;
      line-height:1.32;
      margin-bottom:8px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:45px;
    }

    .live-video-body p{
      color:var(--muted);
      font-size:13px;
      line-height:1.48;
      margin-bottom:12px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:39px;
    }

    .live-video-meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .live-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-weight:900;
      font-size:11px;
    }

    .live-youtube-link{
      color:var(--secondary);
      font-weight:900;
      font-size:12px;
    }

    .carousel-dots{
      position:relative;
      z-index:1;
      display:flex;
      justify-content:center;
      gap:8px;
      margin-top:18px;
    }

    .carousel-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      border:0;
      cursor:pointer;
      background:rgba(255,255,255,.35);
      transition:.2s ease;
    }

    .carousel-dot.active{
      width:32px;
      background:white;
    }

    .event-video-album{
      margin-top:24px;
    }

    .event-video-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:18px;
    }

    .event-video-card .live-video-body p{
      min-height:auto;
    }

    .event-video-card .live-brand{
      max-width:calc(100% - 28px);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    @media (max-width:980px){
      .event-video-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width:640px){
      .event-video-grid{
        grid-template-columns:1fr;
      }
    }

    .portfolio-live-section{
      display:none !important;
    }

    @media (max-width:980px){
      .live-video-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width:640px){
      .live-carousel-wrap{
        padding:18px;
        border-radius:26px;
      }

      .live-video-grid{
        grid-template-columns:1fr;
      }

      .live-carousel-head{
        align-items:flex-start;
      }
    }

    .portfolio-live-wrap{
      width:min(100%, 1080px);
      margin:36px auto 0;
      padding:30px 28px 0;
      border-top:1px solid var(--line);
    }

    .portfolio-live-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:18px;
    }

    .portfolio-live-head h3{
      color:var(--primary);
      font-size:clamp(24px,3vw,34px);
      line-height:1.15;
      letter-spacing:-.6px;
      margin-bottom:8px;
    }

    .portfolio-live-head p{
      color:var(--muted);
      max-width:620px;
    }

    .live-toolbar{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .live-category-tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:16px;
    }

    .live-category-tab{
      border:1px solid var(--line);
      background:white;
      color:var(--primary);
      padding:10px 15px;
      border-radius:999px;
      cursor:pointer;
      font-weight:900;
      font-size:13px;
      transition:.2s ease;
    }

    .live-category-tab.active,
    .live-category-tab:hover{
      background:var(--primary);
      color:white;
      border-color:var(--primary);
    }

    .live-counter{
      color:var(--muted);
      font-weight:800;
      font-size:14px;
      padding:10px 12px;
      border-radius:999px;
      background:white;
      border:1px solid var(--line);
    }

    .live-carousel{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      padding:4px 2px 8px;
    }

    .live-track{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:18px;
    }

    .live-video-card{
      background:white;
      border:1px solid var(--line);
      border-radius:26px;
      overflow:hidden;
      box-shadow:0 14px 32px rgba(77,9,54,.08);
      transition:.22s ease;
      min-width:0;
      animation:liveFade .28s ease;
    }

    @keyframes liveFade{
      from{opacity:0; transform:translateY(8px);}
      to{opacity:1; transform:translateY(0);}
    }

    .live-video-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 45px rgba(77,9,54,.14);
      border-color:rgba(139,10,82,.35);
    }

    .live-thumb{
      position:relative;
      aspect-ratio:16/9;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      cursor:pointer;
      overflow:hidden;
    }

    .live-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform:scale(1.01);
      transition:.25s ease;
    }

    .live-video-card:hover .live-thumb img{
      transform:scale(1.06);
    }

    .live-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.08), rgba(77,9,54,.72));
    }

    .live-play{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:62px;
      height:62px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:white;
      background:rgba(255,90,54,.94);
      z-index:2;
      font-size:24px;
      box-shadow:0 14px 30px rgba(0,0,0,.28);
    }

    .live-brand{
      position:absolute;
      left:14px;
      bottom:14px;
      z-index:2;
      color:white;
      font-weight:900;
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(10px);
    }

    .live-loading{
      position:absolute;
      right:14px;
      top:14px;
      z-index:2;
      color:white;
      font-size:11px;
      font-weight:900;
      padding:6px 9px;
      border-radius:999px;
      background:rgba(77,9,54,.55);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(8px);
    }

    .live-player{
      position:relative;
      aspect-ratio:16/9;
      background:#000;
      display:none;
    }

    .live-player iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .live-video-card.playing .live-thumb{
      display:none;
    }

    .live-video-card.playing .live-player{
      display:block;
    }

    .live-video-body{
      padding:16px 18px 18px;
    }

    .live-video-body h4{
      color:var(--primary);
      font-size:17px;
      line-height:1.35;
      margin-bottom:8px;
      min-height:46px;
    }

    .live-video-body p{
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
      margin-bottom:14px;
    }

    .live-video-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    .live-tag{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
    }

    .live-youtube{
      color:var(--secondary);
      font-size:13px;
      font-weight:900;
    }

    @media (max-width:980px){
      .portfolio-live-wrap{
        width:min(100%, 760px);
        padding-left:18px;
        padding-right:18px;
      }

      .live-track{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width:640px){
      .portfolio-live-wrap{
        width:100%;
        padding-left:0;
        padding-right:0;
      }

      .portfolio-live-head{
        display:block;
      }

      .live-toolbar{
        margin-top:16px;
        justify-content:flex-start;
      }

      .live-track{
        grid-template-columns:1fr;
      }

      .live-video-body h4{
        min-height:auto;
      }
    }

    .footer{
      background:var(--dark);
      color:#D9E2EC;
      padding:64px 0 26px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr 1fr 1fr 1fr;
      gap:28px;
      margin-bottom:34px;
    }

    .footer h3,
    .footer h4{
      color:white;
      margin-bottom:12px;
    }

    .footer p,
    .footer a{
      color:#BCCCDC;
      font-size:14px;
    }

    .footer a{
      display:block;
      margin:8px 0;
    }

    .footer-bottom{
      padding-top:22px;
      border-top:1px solid rgba(217,226,236,.14);
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      color:#9FB3C8;
      font-size:13px;
    }

    .social-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .social-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      color:white;
      font-weight:700;
      font-size:14px;
    }

    .social-address{
      width:100%;
      max-width:420px;
      border-radius:22px;
      align-items:flex-start;
      line-height:1.5;
      font-weight:600;
      white-space:normal;
    }

    .social-address span{
      display:block;
      white-space:normal;
    }

    .social-address strong{
      display:block;
      margin-bottom:4px;
      font-weight:800;
    }

    .social-link.light{
      background:white;
      border:1px solid var(--line);
      color:var(--primary);
    }

    .contact-links{
      display:grid;
      gap:10px;
      margin-top:18px;
    }

    .contact-link{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:16px;
      background:rgba(255,255,255,.08);
      color:white;
      font-weight:700;
      width:fit-content;
      max-width:100%;
      word-break:break-word;
    }

    .footer-logo-wrap{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }

    .footer-logo{
      width:84px;
      height:auto;
      display:block;
      filter:brightness(0) invert(1);
    }

    .footer-contact-list{
      display:grid;
      gap:11px;
      margin-top:14px;
    }

    .footer-contact-item{
      display:flex !important;
      align-items:center;
      gap:11px;
      color:#BCCCDC !important;
      margin:0 !important;
      line-height:1.35;
      font-size:14px;
    }

    .footer-contact-icon,
    .footer-social-icon{
      width:38px;
      height:38px;
      min-width:38px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      color:#FFFFFF;
      overflow:hidden;
      flex:0 0 38px;
    }

    .footer-contact-icon svg,
    .footer-social-icon svg{
      width:18px;
      height:18px;
      display:block;
      fill:currentColor;
      stroke:currentColor;
      stroke-width:0;
      flex:0 0 auto;
    }

    .footer-contact-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }

    .footer-contact-label{
      color:white;
      font-weight:800;
      font-size:13px;
    }

    .footer-contact-value{
      color:#BCCCDC;
      font-size:14px;
      word-break:break-word;
    }

    .footer-contact-item:hover .footer-contact-icon,
    .social-link:hover .footer-social-icon{
      background:rgba(255,255,255,.22);
    }

    .social-link{
      padding:9px 12px 9px 9px;
    }

    .social-link .footer-social-icon{
      width:30px;
      height:30px;
      min-width:30px;
      flex-basis:30px;
    }

    .social-link .footer-social-icon svg{
      width:15px;
      height:15px;
    }

    .floating-wa{
      position:fixed;
      right:20px;
      bottom:20px;
      z-index:100;
      width:58px;
      height:58px;
      border-radius:50%;
      background:#25D366;
      color:white;
      display:grid;
      place-items:center;
      font-size:28px;
      box-shadow:0 18px 34px rgba(37,211,102,.34);
    }

    .hidden{
      display:none !important;
    }

    @media (max-width:980px){
      .nav-menu,
      .nav-cta{
        display:none;
      }

      .mobile-toggle{
        display:block;
      }

      .nav-menu.mobile-open{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        position:absolute;
        left:4%;
        right:4%;
        top:78px;
        background:white;
        border:1px solid var(--line);
        box-shadow:var(--shadow);
        border-radius:24px;
        padding:14px;
      }

      .nav-menu.mobile-open a,
      .nav-menu.mobile-open button{
        text-align:left;
        border-radius:16px;
      }

      .mega-menu.active{
        display:block;
        top:150px;
        max-height:72vh;
        overflow:auto;
      }

      .mega-intro{
        margin-bottom:16px;
      }

      .mega-grid{
        grid-template-columns:1fr;
      }

      .hero-grid,
      .packages,
      .quote-box{
        grid-template-columns:1fr;
      }

      .service-grid,
      .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .work-flow{
        grid-template-columns:repeat(2,1fr);
      }

      .footer-grid{
        grid-template-columns:1fr 1fr;
      }
    }

    @media (max-width:640px){
      .topbar{
        display:none;
      }

      .hero{
        padding-top:56px;
      }

      .search-box{
        border-radius:24px;
        flex-direction:column;
      }

      .search-box .btn{
        width:100%;
      }

      .section{
        padding:62px 0;
      }

      .section-head{
        display:block;
      }

      .section-head p{
        margin-top:12px;
      }

      .service-grid,
      .portfolio-grid,
      .work-flow,
      .footer-grid,
      .modal-body,
      .feature-list{
        grid-template-columns:1fr;
      }

      .quote-box{
        padding:24px;
      }

      .quote-box h2{
        font-size:30px;
      }

      .hero h1{
        letter-spacing:-1.5px;
      }
    }
  

    /* Penyempurnaan final: layanan ringkas, thumbnail video, dan carousel portfolio */
    .service-grid{
      align-items:stretch;
    }

    .service-link-card{
      width:100%;
      text-align:left;
      cursor:pointer;
      min-height:230px;
      padding:20px;
      border:1px solid var(--line);
      background:white;
    }

    .service-link-card:hover{
      border-color:rgba(139,10,82,.34);
    }

    .service-link-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }

    .service-link-card .icon{
      margin-bottom:0;
      flex:0 0 auto;
    }

    .service-category-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      max-width:160px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-size:11px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .compact-sub-list{
      margin-top:14px;
      margin-bottom:18px;
    }

    .service-link-card .card-action{
      margin-top:auto;
      font-size:13px;
    }

    .portfolio-video-preview{
      position:relative;
      background:var(--soft);
    }

    .portfolio-video-preview img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter:saturate(1.04) contrast(1.04);
    }

    .portfolio-video-preview::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.04), rgba(77,9,54,.72));
      pointer-events:none;
    }

    .portfolio-video-preview .portfolio-thumb-label,
    .portfolio-card-play{
      position:absolute;
      z-index:2;
    }

    .portfolio-card-play{
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:58px;
      height:58px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:white;
      color:var(--primary);
      font-size:22px;
      box-shadow:0 14px 30px rgba(0,0,0,.25);
      padding-left:3px;
    }

    .photo-grid,
    .event-video-grid{
      grid-template-columns:repeat(3, minmax(0,1fr));
    }

    .photo-album-head{
      align-items:flex-end;
    }

    .album-head-main{
      flex:1 1 auto;
    }

    .album-head-side{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:10px;
      flex:0 0 auto;
    }

    .album-carousel-controls{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .album-carousel-btn{
      border:1px solid var(--line);
      background:white;
      color:var(--primary);
      border-radius:999px;
      padding:8px 11px;
      font-size:12px;
      font-weight:900;
      cursor:pointer;
      transition:.18s ease;
    }

    .album-carousel-btn:hover{
      background:var(--primary);
      color:white;
      border-color:var(--primary);
    }

    .album-carousel-counter{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:54px;
      padding:8px 10px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
    }

    .album-hidden{
      display:none !important;
    }

    .photo-album.show .photo-grid,
    .photo-album.show .event-video-grid{
      animation:fadeUp .22s ease;
    }

    @media (max-width:980px){
      .photo-grid,
      .event-video-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width:640px){
      .service-link-card{
        min-height:auto;
      }

      .photo-grid,
      .event-video-grid{
        grid-template-columns:1fr;
      }

      .album-head-side{
        align-items:flex-start;
        margin-top:12px;
      }

      .album-carousel-controls{
        justify-content:flex-start;
      }
    }

  

    /* Revisi menu layanan: dibuat ringkas seperti menu, detail muncul sebagai halaman layanan */
    .service-grid{
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:14px;
    }

    .service-menu-card{
      width:100%;
      min-height:138px;
      text-align:left;
      border:1px solid var(--line);
      background:white;
      border-radius:24px;
      padding:18px;
      cursor:pointer;
      box-shadow:0 10px 26px rgba(77,9,54,.06);
      transition:.22s ease;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:14px;
      color:var(--primary);
    }

    .service-menu-card:hover,
    .service-menu-card.active{
      transform:translateY(-4px);
      border-color:rgba(139,10,82,.38);
      box-shadow:0 18px 44px rgba(77,9,54,.13);
    }

    .service-menu-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .service-menu-icon{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:17px;
      background:#FCE8F0;
      color:var(--secondary);
      font-size:22px;
      flex:0 0 auto;
    }

    .service-menu-card h3{
      font-size:18px;
      line-height:1.28;
      color:var(--primary);
      margin:0;
    }

    .service-menu-card span{
      font-size:12px;
      font-weight:900;
      color:var(--secondary);
    }

    .service-detail-page{
      padding:0 0 86px;
      background:var(--soft);
      margin-top:-36px;
    }

    .service-detail-page[hidden]{
      display:none;
    }

    .service-detail-shell{
      background:white;
      border:1px solid var(--line);
      border-radius:34px;
      padding:30px;
      box-shadow:var(--shadow-soft);
    }

    .service-detail-hero{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:start;
      padding-bottom:24px;
      border-bottom:1px solid var(--line);
      margin-bottom:24px;
    }

    .service-detail-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-weight:900;
      font-size:12px;
      margin-bottom:14px;
    }

    .service-detail-title-wrap{
      display:flex;
      align-items:flex-start;
      gap:16px;
    }

    .service-detail-icon{
      width:62px;
      height:62px;
      display:grid;
      place-items:center;
      border-radius:22px;
      background:#FCE8F0;
      color:var(--secondary);
      font-size:28px;
      flex:0 0 auto;
    }

    .service-detail-page h2{
      color:var(--primary);
      font-size:clamp(30px,4vw,46px);
      line-height:1.08;
      letter-spacing:-1px;
      margin-bottom:10px;
    }

    .service-detail-page p{
      color:var(--muted);
    }

    .service-detail-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .service-detail-boxes{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:16px;
      margin-bottom:28px;
    }

    .service-detail-box{
      border:1px solid var(--line);
      background:#FBFDFF;
      border-radius:24px;
      padding:20px;
    }

    .service-detail-box h3{
      color:var(--primary);
      margin-bottom:12px;
      font-size:20px;
    }

    .detail-chip-list{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
    }

    .detail-chip-list span{
      padding:8px 11px;
      border-radius:999px;
      background:var(--soft);
      color:var(--primary);
      font-weight:800;
      font-size:13px;
    }

    .service-related-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:20px;
      margin-bottom:16px;
    }

    .service-related-head h3{
      color:var(--primary);
      font-size:26px;
      line-height:1.15;
      margin-bottom:6px;
    }

    .service-related-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }

    .service-related-card{
      overflow:hidden;
      border-radius:24px;
      border:1px solid var(--line);
      background:white;
      box-shadow:0 12px 28px rgba(77,9,54,.08);
      transition:.2s ease;
    }

    .service-related-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 38px rgba(77,9,54,.13);
    }

    .service-related-thumb{
      position:relative;
      aspect-ratio:16/9;
      background:var(--soft);
      overflow:hidden;
    }

    .service-related-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .service-related-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.02), rgba(77,9,54,.62));
      pointer-events:none;
    }

    .service-related-play{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:54px;
      height:54px;
      border-radius:50%;
      background:white;
      color:var(--primary);
      display:grid;
      place-items:center;
      z-index:2;
      font-size:20px;
      padding-left:3px;
      box-shadow:0 14px 28px rgba(0,0,0,.22);
    }

    .service-related-body{
      padding:16px;
    }

    .service-related-body h4{
      color:var(--primary);
      font-size:16px;
      line-height:1.35;
      margin-bottom:7px;
    }

    .service-related-body p{
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    .service-detail-empty{
      padding:20px;
      border:1px dashed rgba(139,10,82,.34);
      background:var(--soft);
      border-radius:22px;
      color:var(--muted);
      font-weight:700;
    }

    @media (max-width:980px){
      .service-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }

      .service-detail-hero,
      .service-detail-boxes{
        grid-template-columns:1fr;
      }

      .service-detail-actions{
        justify-content:flex-start;
      }

      .service-related-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width:640px){
      .service-grid,
      .service-related-grid{
        grid-template-columns:1fr;
      }

      .service-detail-shell{
        padding:22px;
        border-radius:26px;
      }

      .service-detail-title-wrap{
        display:block;
      }

      .service-detail-icon{
        margin-bottom:14px;
      }
    }

    /* Revisi detail layanan: klik menu menampilkan halaman detail dua kolom seperti landing page */
    .service-detail-page{
      padding:86px 0;
      background:#FFFFFF;
      margin-top:0;
    }

    .service-detail-shell{
      background:transparent;
      border:0;
      border-radius:0;
      padding:0;
      box-shadow:none;
    }

    .service-detail-backbar{
      display:flex;
      justify-content:flex-start;
      margin-bottom:26px;
    }

    .service-detail-hero{
      display:grid;
      grid-template-columns:minmax(320px, .95fr) minmax(360px, 1.05fr);
      gap:42px;
      align-items:center;
      padding:0 0 42px;
      border-bottom:1px solid var(--line);
      margin-bottom:30px;
    }

    .service-detail-media{
      position:relative;
      min-height:420px;
      border-radius:34px;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 20%, rgba(255,90,54,.16), transparent 28%),
        linear-gradient(135deg, #FBF4F8, #FFFFFF);
      box-shadow:0 24px 55px rgba(77,9,54,.12);
      border:1px solid var(--line);
    }

    .service-detail-media img{
      width:100%;
      height:100%;
      min-height:420px;
      object-fit:cover;
      display:block;
      filter:saturate(1.04) contrast(1.02);
    }

    .service-detail-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,0) 52%, rgba(77,9,54,.62) 100%);
      pointer-events:none;
    }

    .service-detail-media-badge{
      position:absolute;
      left:22px;
      bottom:22px;
      z-index:2;
      padding:9px 13px;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      color:var(--primary);
      font-size:12px;
      font-weight:900;
      box-shadow:0 10px 24px rgba(0,0,0,.13);
    }

    .service-detail-copy{
      max-width:720px;
    }

    .service-detail-title-wrap{
      align-items:flex-start;
    }

    .service-detail-page h2{
      font-size:clamp(34px,4.6vw,56px);
      letter-spacing:-1.4px;
      margin-bottom:14px;
    }

    .service-detail-page p#serviceDetailDesc{
      font-size:17px;
      line-height:1.8;
      max-width:720px;
    }

    .service-detail-actions{
      justify-content:flex-start;
      margin-top:24px;
    }

    .service-detail-boxes{
      grid-template-columns:repeat(2, minmax(0,1fr));
      margin-top:8px;
      margin-bottom:34px;
    }

    .service-detail-box{
      background:#FBFDFF;
      box-shadow:0 10px 25px rgba(77,9,54,.045);
    }

    @media (max-width:980px){
      .service-detail-hero{
        grid-template-columns:1fr;
      }
      .service-detail-media,
      .service-detail-media img{
        min-height:320px;
      }
    }

    @media (max-width:640px){
      .service-detail-page{
        padding:56px 0;
      }
      .service-detail-media,
      .service-detail-media img{
        min-height:245px;
        border-radius:26px;
      }
      .service-detail-page h2{
        font-size:30px;
        letter-spacing:-.8px;
      }
      .service-detail-page p#serviceDetailDesc{
        font-size:15px;
      }
      .service-detail-boxes{
        grid-template-columns:1fr;
      }
    }

  

    /* Revisi layanan: dibuat seperti Paket Unggulan agar lebih ringan */
    #categoryStrip.service-category-hidden{
      display:none !important;
    }

    .service-package-layout{
      display:grid;
      grid-template-columns:.9fr 1.45fr;
      gap:24px;
      align-items:stretch;
    }

    .service-package-tabs{
      background:white;
      border:1px solid var(--line);
      border-radius:26px;
      padding:14px;
      box-shadow:var(--shadow-soft);
      max-height:640px;
      overflow:auto;
    }

    .service-package-tab{
      width:100%;
      text-align:left;
      border:0;
      background:transparent;
      padding:15px 16px;
      border-radius:18px;
      cursor:pointer;
      color:var(--primary);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      transition:.18s ease;
    }

    .service-package-tab strong{
      display:block;
      font-size:15px;
      line-height:1.25;
      margin-bottom:3px;
    }

    .service-package-tab small{
      display:block;
      color:var(--muted);
      font-weight:800;
      font-size:11px;
    }

    .service-package-tab .service-package-arrow{
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      flex:0 0 auto;
      font-weight:900;
    }

    .service-package-tab:hover{
      background:var(--soft);
      transform:translateX(2px);
    }

    .service-package-tab.active{
      background:var(--primary);
      color:white;
      box-shadow:0 14px 28px rgba(77,9,54,.18);
    }

    .service-package-tab.active small{
      color:#FBE7F0;
    }

    .service-package-tab.active .service-package-arrow{
      background:rgba(255,255,255,.18);
      color:white;
    }

    /* Thumbnail layanan sementara dari materi yang tersedia */
    .service-package-tab-main{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }

    .service-package-tab-thumb{
      width:58px;
      height:42px;
      border-radius:14px;
      overflow:hidden;
      background:var(--soft);
      border:1px solid rgba(232,216,225,.85);
      flex:0 0 auto;
      box-shadow:0 8px 18px rgba(77,9,54,.08);
    }

    .service-package-tab-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .service-package-tab.active .service-package-tab-thumb{
      border-color:rgba(255,255,255,.32);
      box-shadow:none;
    }

    .service-package-tab-text{
      min-width:0;
    }

    .service-package-tab .service-package-arrow{
      margin-left:auto;
    }

    @media (max-width:640px){
      .service-package-tab-thumb{
        width:54px;
        height:38px;
        border-radius:12px;
      }
    }

    .service-package-content{
      background:white;
      border:1px solid var(--line);
      border-radius:26px;
      padding:26px;
      box-shadow:var(--shadow-soft);
      min-height:430px;
    }

    .service-summary-content-grid{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:24px;
      align-items:center;
    }

    .service-summary-media{
      position:relative;
      border-radius:26px;
      overflow:hidden;
      aspect-ratio:16/11;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      box-shadow:0 18px 40px rgba(77,9,54,.12);
    }

    .service-summary-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter:saturate(1.03) contrast(1.02);
    }

    .service-summary-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.02), rgba(77,9,54,.42));
      pointer-events:none;
    }

    .service-summary-badge{
      position:absolute;
      left:14px;
      bottom:14px;
      z-index:2;
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
    }

    .service-summary-kicker{
      display:inline-flex;
      padding:8px 12px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
      margin-bottom:14px;
    }

    .service-summary-main h3{
      color:var(--primary);
      font-size:clamp(26px,3vw,36px);
      line-height:1.1;
      letter-spacing:-.7px;
      margin-bottom:12px;
    }

    .service-summary-main p{
      color:var(--muted);
      margin-bottom:18px;
      font-size:15px;
    }

    .service-summary-chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:20px;
    }

    .service-summary-chips span{
      padding:8px 11px;
      border-radius:999px;
      background:var(--soft);
      color:var(--primary);
      font-size:12px;
      font-weight:800;
    }

    .service-summary-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .service-summary-empty{
      min-height:300px;
      display:grid;
      place-items:center;
      color:var(--muted);
      text-align:center;
      border:1px dashed var(--line);
      border-radius:22px;
      padding:24px;
    }

    @media (max-width:980px){
      .service-package-layout,
      .service-summary-content-grid{
        grid-template-columns:1fr;
      }

      .service-package-tabs{
        max-height:none;
      }
    }

    @media (max-width:640px){
      .service-package-content{
        padding:18px;
      }

      .service-package-tab{
        padding:13px 14px;
      }

      .service-summary-media{
        aspect-ratio:16/10;
      }
    }

  

    /* Alignment fix: make Foto Portfolio through Portfolio Live Streaming use the same left-right edge */
    #portfolio .portfolio-gallery-wrap,
    #portfolio .portfolio-live-wrap{
      width:100%;
      max-width:100%;
      margin-left:0;
      margin-right:0;
      box-sizing:border-box;
    }

    #portfolio .portfolio-gallery-wrap{
      padding:26px;
    }

    #portfolio .portfolio-live-wrap{
      margin-top:34px;
      padding:26px;
      border-top:1px solid var(--line);
      border-radius:30px;
      background:white;
      box-shadow:0 14px 32px rgba(77,9,54,.08);
    }

    #portfolio .portfolio-gallery-head,
    #portfolio .portfolio-live-head{
      width:100%;
    }

    #portfolio .photo-grid,
    #portfolio .event-video-grid,
    #portfolio .live-track{
      width:100%;
    }

    @media (max-width:640px){
      #portfolio .portfolio-gallery-wrap,
      #portfolio .portfolio-live-wrap{
        padding:18px;
        border-radius:24px;
      }
    }

  

    /* Portfolio order refinement */
    #portfolio .photo-album-list > .portfolio-live-wrap{
      margin-top:0;
    }

    /* Theme switcher: pilihan tampilan putih / hitam */
    .theme-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-width:104px;
      min-height:42px;
      border:1px solid var(--line);
      border-radius:999px;
      background:var(--white);
      color:var(--primary);
      font-weight:900;
      font-size:13px;
      cursor:pointer;
      box-shadow:var(--shadow-soft);
      transition:.2s ease;
    }

    .theme-toggle:hover{
      transform:translateY(-2px);
      border-color:var(--secondary);
    }

    .topbar-contact,
    .inline-wa-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:800;
    }

    .topbar-contact svg,
    .inline-wa-link svg,
    .floating-wa svg{
      width:20px;
      height:20px;
      display:block;
      fill:currentColor;
      flex:0 0 auto;
    }

    .floating-wa svg{
      width:28px;
      height:28px;
    }

    html[data-theme="dark"]{
      --primary:#F8D7E8;
      --secondary:#FF7A5C;
      --accent:#FF8A65;
      --soft:#26111F;
      --white:#140913;
      --text:#F8EAF1;
      --muted:#D8B8C9;
      --line:#4F263D;
      --dark:#080407;
      --shadow:0 22px 50px rgba(0,0,0,.38);
      --shadow-soft:0 12px 30px rgba(0,0,0,.24);
    }

    html[data-theme="dark"] body{
      background:#140913;
      color:var(--text);
    }

    html[data-theme="dark"] .navbar{
      background:rgba(20,9,19,.92);
      border-bottom-color:rgba(255,255,255,.1);
    }

    html[data-theme="dark"] .hero{
      background:
        radial-gradient(circle at 10% 10%, rgba(255,90,54,.18), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(139,10,82,.28), transparent 28%),
        linear-gradient(180deg,#160A14 0%,#140913 100%);
    }

    html[data-theme="dark"] .section-soft{
      background:#1A0C17;
    }

    html[data-theme="dark"] .search-box,
    html[data-theme="dark"] .hero-panel,
    html[data-theme="dark"] .stat,
    html[data-theme="dark"] .service-card,
    html[data-theme="dark"] .portfolio-card,
    html[data-theme="dark"] .package-tabs,
    html[data-theme="dark"] .package-content,
    html[data-theme="dark"] .quote-form,
    html[data-theme="dark"] .faq-item,
    html[data-theme="dark"] .modal,
    html[data-theme="dark"] .mega-menu,
    html[data-theme="dark"] .mega-item,
    html[data-theme="dark"] .chip,
    html[data-theme="dark"] .live-video-card,
    html[data-theme="dark"] .portfolio-live-wrap,
    html[data-theme="dark"] .service-detail-card,
    html[data-theme="dark"] .service-summary,
    html[data-theme="dark"] .service-detail-panel,
    html[data-theme="dark"] .photo-album-list .portfolio-live-wrap{
      background:#1F0F1B;
      border-color:rgba(255,255,255,.12);
    }

    html[data-theme="dark"] input,
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea{
      background:#160A14;
      color:var(--text);
      border-color:rgba(255,255,255,.14);
    }

    html[data-theme="dark"] .btn-outline,
    html[data-theme="dark"] .theme-toggle{
      background:#1F0F1B;
      color:var(--primary);
      border-color:rgba(255,255,255,.16);
    }

    html[data-theme="dark"] .footer-logo{
      filter:none;
    }

    @media (max-width:980px){
      .theme-toggle{
        min-width:46px;
        padding:9px 12px;
        font-size:0;
      }
      .theme-toggle::before{
        content:"◐";
        font-size:18px;
      }
    }

  

    /* Portfolio split layout: menu kiri, detail portfolio kanan */
    #portfolioFilter,
    #portfolioGrid,
    #portfolioPhotoGallery{
      display:none !important;
    }

    .portfolio-split-layout{
      display:grid;
      grid-template-columns:320px minmax(0,1fr);
      gap:24px;
      align-items:start;
      margin-top:26px;
    }

    .portfolio-split-menu{
      position:sticky;
      top:98px;
      background:var(--white);
      border:1px solid var(--line);
      border-radius:28px;
      padding:14px;
      box-shadow:var(--shadow-soft);
    }

    .portfolio-split-menu-title{
      padding:10px 12px 14px;
      border-bottom:1px solid var(--line);
      margin-bottom:10px;
    }

    .portfolio-split-menu-title h3{
      color:var(--primary);
      font-size:20px;
      line-height:1.2;
      margin-bottom:5px;
    }

    .portfolio-split-menu-title p{
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    .portfolio-split-tab{
      width:100%;
      border:0;
      background:transparent;
      text-align:left;
      padding:14px 14px;
      border-radius:18px;
      cursor:pointer;
      color:var(--primary);
      transition:.18s ease;
      display:flex;
      gap:11px;
      align-items:flex-start;
    }

    .portfolio-split-tab:hover{
      background:var(--soft);
      transform:translateX(2px);
    }

    .portfolio-split-tab.active{
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      color:white;
      box-shadow:0 14px 28px rgba(77,9,54,.18);
    }

    .portfolio-split-number{
      width:30px;
      height:30px;
      border-radius:12px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      background:var(--soft);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
    }

    .portfolio-split-tab.active .portfolio-split-number{
      background:rgba(255,255,255,.2);
      color:white;
    }

    .portfolio-split-tab strong{
      display:block;
      font-size:15px;
      line-height:1.25;
      margin-bottom:4px;
    }

    .portfolio-split-tab span:last-child{
      display:block;
      font-size:12px;
      line-height:1.35;
      color:var(--muted);
    }

    .portfolio-split-tab.active span:last-child{
      color:rgba(255,255,255,.82);
    }

    .portfolio-split-detail{
      min-width:0;
      background:var(--white);
      border:1px solid var(--line);
      border-radius:32px;
      box-shadow:var(--shadow-soft);
      padding:26px;
      overflow:hidden;
    }

    .portfolio-split-hero{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
      align-items:stretch;
      margin-bottom:24px;
      padding-bottom:22px;
      border-bottom:1px solid var(--line);
    }

    .portfolio-split-hero-text{
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .portfolio-split-kicker{
      display:inline-flex;
      width:fit-content;
      padding:8px 12px;
      border-radius:999px;
      background:var(--soft);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
      margin-bottom:12px;
    }

    .portfolio-split-hero h3{
      color:var(--primary);
      font-size:clamp(28px,3vw,42px);
      line-height:1.05;
      letter-spacing:-.9px;
      margin-bottom:12px;
    }

    .portfolio-split-hero p{
      color:var(--muted);
      font-size:15px;
      max-width:720px;
      margin-bottom:16px;
    }

    .portfolio-split-stats{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
    }

    .portfolio-split-stats span{
      padding:8px 11px;
      border-radius:999px;
      background:var(--soft);
      color:var(--primary);
      font-size:12px;
      font-weight:900;
    }

    .portfolio-split-cover{
      position:relative;
      min-height:260px;
      border-radius:26px;
      overflow:hidden;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
    }

    .portfolio-split-cover img{
      width:100%;
      height:100%;
      object-fit:cover;
      position:absolute;
      inset:0;
      display:block;
    }

    .portfolio-split-cover::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.05), rgba(77,9,54,.66));
      pointer-events:none;
    }

    .portfolio-split-cover-label{
      position:absolute;
      left:16px;
      bottom:16px;
      z-index:2;
      color:white;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.24);
      backdrop-filter:blur(10px);
      border-radius:999px;
      padding:8px 11px;
      font-weight:900;
      font-size:12px;
    }

    .portfolio-work-group{
      margin-top:24px;
    }

    .portfolio-work-group:first-of-type{
      margin-top:0;
    }

    .portfolio-work-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:18px;
      margin-bottom:16px;
    }

    .portfolio-work-head h4{
      color:var(--primary);
      font-size:24px;
      line-height:1.15;
      margin-bottom:5px;
    }

    .portfolio-work-head p{
      color:var(--muted);
      font-size:14px;
      max-width:680px;
    }

    .portfolio-work-count{
      white-space:nowrap;
      color:var(--secondary);
      background:var(--soft);
      padding:8px 11px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
    }

    .portfolio-split-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }

    .portfolio-split-card{
      min-width:0;
      background:var(--white);
      border:1px solid var(--line);
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 12px 26px rgba(77,9,54,.07);
      transition:.2s ease;
    }

    .portfolio-split-card:hover{
      transform:translateY(-4px);
      box-shadow:0 20px 42px rgba(77,9,54,.13);
      border-color:rgba(139,10,82,.3);
    }

    .portfolio-split-card-media{
      position:relative;
      display:block;
      aspect-ratio:16/9;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      overflow:hidden;
      cursor:pointer;
      border:0;
      width:100%;
    }

    .portfolio-split-card-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:.24s ease;
    }

    .portfolio-split-card:hover .portfolio-split-card-media img{
      transform:scale(1.05);
    }

    .portfolio-split-card-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(77,9,54,.05), rgba(77,9,54,.62));
      pointer-events:none;
    }

    .portfolio-split-play{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      z-index:2;
      width:54px;
      height:54px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(255,90,54,.96);
      color:white;
      font-size:22px;
      box-shadow:0 14px 30px rgba(0,0,0,.24);
    }

    .portfolio-split-label{
      position:absolute;
      left:12px;
      bottom:12px;
      z-index:2;
      color:white;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(10px);
      padding:7px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
    }

    .portfolio-split-card-body{
      padding:15px 16px 17px;
    }

    .portfolio-split-card-body h5{
      color:var(--primary);
      font-size:16px;
      line-height:1.3;
      margin-bottom:7px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:42px;
    }

    .portfolio-split-card-body p{
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
      margin-bottom:12px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:38px;
    }

    .portfolio-split-link{
      display:inline-flex;
      color:var(--secondary);
      font-weight:900;
      font-size:12px;
    }

    .portfolio-split-player{
      display:none;
      position:relative;
      aspect-ratio:16/9;
      background:#000;
    }

    .portfolio-split-player iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .portfolio-split-card.playing .portfolio-split-card-media{
      display:none;
    }

    .portfolio-split-card.playing .portfolio-split-player{
      display:block;
    }

    html[data-theme="dark"] .portfolio-split-menu,
    html[data-theme="dark"] .portfolio-split-detail,
    html[data-theme="dark"] .portfolio-split-card{
      background:#1F0F1B;
      border-color:rgba(255,255,255,.12);
    }

    @media (max-width:1100px){
      .portfolio-split-layout{
        grid-template-columns:280px minmax(0,1fr);
        gap:18px;
      }
      .portfolio-split-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .portfolio-split-hero{
        grid-template-columns:1fr;
      }
      .portfolio-split-cover{
        min-height:220px;
      }
    }

    @media (max-width:760px){
      .portfolio-split-layout{
        grid-template-columns:1fr;
      }
      .portfolio-split-menu{
        position:relative;
        top:auto;
      }
      .portfolio-split-grid{
        grid-template-columns:1fr;
      }
      .portfolio-work-head{
        display:block;
      }
      .portfolio-work-count{
        display:inline-flex;
        margin-top:10px;
      }
      .portfolio-split-detail{
        padding:18px;
        border-radius:24px;
      }
    }

  
    .portfolio-split-card-media, .portfolio-split-cover{background:linear-gradient(135deg,var(--primary),var(--secondary));}
    .portfolio-split-card-media img, .portfolio-split-cover img{background:linear-gradient(135deg,var(--primary),var(--secondary));}

    .client-section{
      padding:76px 0 84px;
      background:linear-gradient(180deg, var(--white) 0%, var(--soft) 100%);
      overflow:hidden;
    }

    .client-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:24px;
      margin-bottom:24px;
    }

    .client-head h2{
      color:var(--primary);
      font-size:clamp(22px,2.2vw,30px);
      line-height:1.22;
      letter-spacing:-.4px;
      max-width:none;
      white-space:nowrap;
      margin-top:8px;
    }

    .client-head p{
      color:var(--muted);
      max-width:520px;
      font-size:14px;
      line-height:1.55;
    }

    .client-carousel{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:30px;
      background:rgba(255,255,255,.86);
      box-shadow:var(--shadow-soft);
      padding:20px;
    }

    .client-carousel::before,
    .client-carousel::after{
      content:none;
    }

    .client-track{
      display:flex;
      align-items:stretch;
      gap:18px;
      transition:transform .55s ease;
      will-change:transform;
    }

    .client-logo-card{
      flex:0 0 calc((100% - 72px) / 5);
      min-height:130px;
      display:grid;
      place-items:center;
      padding:22px 24px;
      border:1px solid rgba(232,216,225,.9);
      border-radius:24px;
      background:white;
      box-shadow:0 10px 24px rgba(77,9,54,.06);
      overflow:visible;
    }

    .client-logo-card img{
      width:auto;
      height:auto;
      max-width:96%;
      max-height:86px;
      object-fit:contain;
      display:block;
      filter:saturate(1.04) contrast(1.02);
    }

    .client-note{
      margin-top:14px;
      color:var(--muted);
      font-size:13px;
      text-align:center;
    }

    html[data-theme="dark"] .client-section{
      background:linear-gradient(180deg, #120610 0%, #1b0715 100%);
    }

    html[data-theme="dark"] .client-carousel{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.12);
    }

    html[data-theme="dark"] .client-carousel::before{
      background:linear-gradient(90deg, rgba(18,6,16,.92), transparent);
    }

    html[data-theme="dark"] .client-carousel::after{
      background:linear-gradient(270deg, rgba(18,6,16,.92), transparent);
    }

    html[data-theme="dark"] .client-logo-card{
      background:rgba(255,255,255,.94);
      border-color:rgba(255,255,255,.12);
    }

    @media (max-width:980px){
      .client-logo-card{
        flex-basis:calc((100% - 48px) / 4);
      }
    }

    @media (max-width:640px){
      .client-head{
        display:block;
      }

      .client-head h2{
        white-space:normal;
      }

      .client-head p{
        margin-top:12px;
      }

      .client-carousel{
        padding:14px;
        border-radius:24px;
      }

      .client-carousel::before,
      .client-carousel::after{
        width:42px;
      }

      .client-logo-card{
        flex-basis:calc((100% - 18px) / 2);
        min-height:112px;
        padding:18px;
      }
    }

  

    /* Client logo final cleanup */
    .client-head-simple{
      justify-content:center;
      text-align:center;
      margin-bottom:20px;
    }
    .client-head-simple .eyebrow{
      margin-bottom:0;
    }
    .client-carousel{
      padding:18px 20px;
    }
    .client-logo-card{
      min-height:138px;
      padding:18px 22px;
      overflow:visible;
    }
    .client-logo-card img{
      max-width:100%;
      max-height:108px;
      object-fit:contain;
    }
    @media (max-width:640px){
      .client-head-simple{display:flex; justify-content:center;}
      .client-logo-card{min-height:116px; padding:16px;}
      .client-logo-card img{max-height:88px;}
    }

    /* Mobile audit safety patch */
    html,
    body{
      max-width:100%;
      overflow-x:hidden;
    }

    img,
    video,
    iframe{
      max-width:100%;
    }

    .hero-grid,
    .packages,
    .quote-box,
    .service-detail-hero,
    .portfolio-split-layout,
    .portfolio-split-hero,
    .portfolio-split-detail,
    .package-content,
    .client-carousel{
      min-width:0;
    }

    .hero-partner-strip{
      margin-left:auto !important;
      margin-right:auto !important;
      justify-content:center !important;
      max-width:min(920px, 92vw) !important;
    }

    .hero-partner-strip img{
      max-width:100%;
      height:auto;
      object-fit:contain;
    }

    .portfolio-split-card-media img,
    .portfolio-split-cover img,
    .service-detail-media img,
    .service-menu-thumb img{
      max-width:100%;
      height:100%;
      object-fit:cover;
    }

    @media (max-width:980px){
      .hero-grid,
      .packages,
      .quote-box,
      .service-detail-hero,
      .portfolio-split-hero{
        grid-template-columns:1fr !important;
      }

      .service-grid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
      }

      .portfolio-split-layout{
        grid-template-columns:1fr !important;
      }

      .portfolio-split-menu{
        position:relative !important;
        top:auto !important;
      }

      .live-package-plans,
      .portfolio-split-grid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
      }

      .package-content{
        padding:22px !important;
      }

      .package-tabs{
        display:flex;
        gap:8px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }

      .package-tab{
        flex:0 0 auto;
        white-space:nowrap;
      }
    }

    @media (max-width:640px){
      .container{
        width:min(100% - 28px, 1180px) !important;
      }

      .nav-inner{
        min-height:68px;
      }

      .brand-logo{
        width:58px !important;
      }

      .hero{
        padding:42px 0 48px !important;
      }

      .hero h1{
        font-size:clamp(32px, 10vw, 44px) !important;
        letter-spacing:-1px !important;
      }

      .hero p{
        font-size:15px !important;
      }

      .hero-actions .btn,
      .service-detail-actions .btn{
        width:100%;
      }

      .hero-partner-strip{
        width:100% !important;
        padding:14px !important;
        gap:12px !important;
      }

      .hero-partner-strip img{
        max-height:44px !important;
      }

      .service-grid,
      .service-summary-grid,
      .portfolio-split-grid,
      .live-package-plans,
      .feature-list{
        grid-template-columns:1fr !important;
      }

      .package-tabs{
        margin-bottom:14px;
      }

      .package-content h3{
        font-size:23px !important;
      }

      .live-package-card,
      .portfolio-split-detail{
        min-height:auto !important;
        padding:18px !important;
      }

      .client-logo-card{
        flex-basis:calc((100% - 18px) / 2) !important;
      }

      .footer-grid{
        grid-template-columns:1fr !important;
      }
    }

    /* =========================================================
       FINAL MOBILE RESPONSIVE FIX - Abhinaya
       Memastikan tampilan HP tidak memakai pola desktop penuh.
       ========================================================= */
    @media (max-width: 760px){
      html, body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
      }

      body{
        font-size:15px;
      }

      .container{
        width:calc(100% - 28px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
      }

      .topbar{
        display:none !important;
      }

      .navbar{
        top:0;
      }

      .nav-inner{
        min-height:66px !important;
        gap:10px !important;
      }

      .brand{
        min-width:0 !important;
      }

      .brand-logo{
        width:58px !important;
        max-width:58px !important;
      }

      .theme-toggle{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        padding:0 !important;
        border-radius:16px !important;
        font-size:0 !important;
      }

      .theme-toggle::before{
        content:"◐";
        font-size:18px;
      }

      .mobile-toggle{
        display:grid !important;
        place-items:center !important;
        width:44px !important;
        height:44px !important;
      }

      .nav-menu.mobile-open{
        left:14px !important;
        right:14px !important;
        top:72px !important;
        max-height:76vh !important;
        overflow:auto !important;
      }

      .hero{
        padding:34px 0 42px !important;
      }

      .hero-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
      }

      .eyebrow{
        font-size:11px !important;
        padding:7px 10px !important;
        white-space:normal !important;
        line-height:1.25 !important;
      }

      .hero h1{
        font-size:clamp(30px, 9.2vw, 42px) !important;
        line-height:1.08 !important;
        letter-spacing:-1px !important;
        margin-bottom:16px !important;
      }

      .hero p{
        font-size:15px !important;
        line-height:1.7 !important;
        margin-bottom:20px !important;
      }

      .search-box{
        border-radius:24px !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        padding:10px !important;
      }

      .search-box input{
        width:100% !important;
        min-width:0 !important;
        text-align:center !important;
      }

      .hero-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
      }

      .hero-actions .btn,
      .btn{
        min-height:48px;
      }

      .hero-panel{
        border-radius:26px !important;
        padding:16px !important;
      }

      .panel-card{
        min-height:auto !important;
        padding:20px !important;
      }

      .quick-stats{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:10px !important;
      }

      .hero-partner-strip{
        grid-column:1 !important;
        width:100% !important;
        max-width:100% !important;
        padding:12px !important;
        margin:16px auto 0 !important;
        border-radius:18px !important;
      }

      .hero-partner-strip img{
        width:100% !important;
        max-width:100% !important;
        max-height:58px !important;
        object-fit:contain !important;
      }

      .section{
        padding:54px 0 !important;
      }

      .section-head{
        display:block !important;
        margin-bottom:22px !important;
      }

      .section-head h2{
        font-size:clamp(25px, 7vw, 34px) !important;
        line-height:1.16 !important;
        letter-spacing:-.5px !important;
      }

      .section-head p{
        margin-top:10px !important;
        font-size:14px !important;
        line-height:1.65 !important;
      }

      /* Menu layanan dibuat nyaman di HP */
      .service-package-layout{
        display:block !important;
      }

      .service-package-tabs{
        display:flex !important;
        gap:10px !important;
        overflow-x:auto !important;
        padding:6px 2px 12px !important;
        margin:0 -2px 14px !important;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
      }

      .service-package-tabs::-webkit-scrollbar,
      .package-tabs::-webkit-scrollbar,
      .portfolio-split-menu::-webkit-scrollbar,
      #portfolioSplitTabs::-webkit-scrollbar{
        display:none;
      }

      .service-package-tab{
        flex:0 0 82% !important;
        width:82% !important;
        min-width:260px !important;
        padding:12px !important;
        border-radius:20px !important;
        scroll-snap-align:start;
      }

      .service-package-tab-thumb{
        width:70px !important;
        height:54px !important;
        border-radius:14px !important;
        flex:0 0 70px !important;
      }

      .service-package-tab strong{
        font-size:14px !important;
        line-height:1.25 !important;
      }

      .service-package-tab small{
        font-size:11px !important;
      }

      .service-package-content{
        padding:16px !important;
        border-radius:24px !important;
      }

      .service-summary-content-grid,
      .service-detail-hero{
        grid-template-columns:1fr !important;
        gap:16px !important;
      }

      .service-summary-media,
      .service-detail-media{
        min-height:auto !important;
        aspect-ratio:16/9 !important;
        border-radius:22px !important;
      }

      .service-summary-main h3,
      .service-detail-copy h2{
        font-size:24px !important;
        line-height:1.18 !important;
      }

      .service-summary-actions,
      .service-detail-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
      }

      .service-detail-boxes,
      .service-related-grid{
        grid-template-columns:1fr !important;
      }

      /* Paket unggulan */
      .packages{
        grid-template-columns:1fr !important;
        gap:14px !important;
      }

      .package-tabs{
        display:flex !important;
        gap:8px !important;
        overflow-x:auto !important;
        padding:10px !important;
        border-radius:22px !important;
        position:relative !important;
        top:auto !important;
        -webkit-overflow-scrolling:touch;
      }

      .package-tab{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:160px !important;
        max-width:220px !important;
        white-space:normal !important;
        font-size:13px !important;
        padding:12px 14px !important;
      }

      .package-content{
        padding:16px !important;
        border-radius:24px !important;
      }

      .package-content h3{
        font-size:22px !important;
        line-height:1.25 !important;
      }

      .live-package-plans{
        grid-template-columns:1fr !important;
        gap:14px !important;
      }

      .live-package-plan{
        border-radius:22px !important;
      }

      .live-package-plan h4{
        font-size:18px !important;
        padding:13px 14px !important;
      }

      .live-package-plan-body{
        padding:18px 16px !important;
      }

      .live-package-plan .btn{
        width:fit-content !important;
        min-height:40px !important;
        padding:9px 14px !important;
        font-size:12px !important;
      }

      /* Portfolio dibuat benar-benar mobile */
      .portfolio-split-layout{
        grid-template-columns:1fr !important;
        gap:14px !important;
      }

      .portfolio-split-menu{
        position:relative !important;
        top:auto !important;
        padding:12px !important;
        border-radius:24px !important;
      }

      .portfolio-split-menu-title{
        margin-bottom:10px !important;
      }

      .portfolio-split-menu-title h3{
        font-size:18px !important;
      }

      .portfolio-split-menu-title p{
        display:none !important;
      }

      #portfolioSplitTabs{
        display:flex !important;
        gap:10px !important;
        overflow-x:auto !important;
        padding-bottom:4px !important;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
      }

      .portfolio-split-tab{
        flex:0 0 82% !important;
        min-width:250px !important;
        margin:0 !important;
        scroll-snap-align:start;
      }

      .portfolio-split-detail{
        padding:16px !important;
        border-radius:24px !important;
      }

      .portfolio-split-hero{
        grid-template-columns:1fr !important;
        gap:14px !important;
      }

      .portfolio-split-hero h3{
        font-size:24px !important;
      }

      .portfolio-split-cover{
        min-height:auto !important;
        aspect-ratio:16/9 !important;
        border-radius:20px !important;
      }

      .portfolio-split-stats{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
      }

      .portfolio-split-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
      }

      .portfolio-split-card-media,
      .portfolio-split-player{
        aspect-ratio:16/9 !important;
      }

      /* Gallery lama kalau muncul tetap aman */
      .photo-grid,
      .portfolio-grid,
      .feature-list,
      .modal-body,
      .footer-grid{
        grid-template-columns:1fr !important;
      }

      /* Contact dan client */
      .quote-box{
        grid-template-columns:1fr !important;
        padding:20px !important;
        border-radius:26px !important;
      }

      .quote-box h2{
        font-size:28px !important;
      }

      .client-section{
        padding:48px 0 !important;
      }

      .client-carousel{
        padding:12px !important;
        border-radius:22px !important;
        overflow:hidden !important;
      }

      .client-track{
        gap:12px !important;
      }

      .client-logo-card{
        flex:0 0 calc((100% - 12px) / 2) !important;
        min-width:calc((100% - 12px) / 2) !important;
        min-height:104px !important;
        padding:14px !important;
        border-radius:18px !important;
      }

      .client-logo-card img{
        max-height:78px !important;
        width:100% !important;
        object-fit:contain !important;
      }

      .footer{
        padding:44px 0 24px !important;
      }

      .footer-logo-wrap{
        justify-content:flex-start !important;
      }

      .footer-logo{
        width:118px !important;
      }

      .footer-bottom{
        display:block !important;
        text-align:left !important;
      }

      .floating-wa{
        width:52px !important;
        height:52px !important;
        right:14px !important;
        bottom:14px !important;
        z-index:160 !important;
      }
    }

    @media (max-width:420px){
      .container{
        width:calc(100% - 24px) !important;
      }

      .hero h1{
        font-size:32px !important;
      }

      .quick-stats{
        grid-template-columns:1fr 1fr !important;
      }

      .service-package-tab,
      .portfolio-split-tab{
        flex-basis:88% !important;
        min-width:240px !important;
      }

      .client-logo-card{
        min-height:98px !important;
        padding:12px !important;
      }
    }

/* Emergency mobile/desktop visibility fix for dynamic menu sections */
.service-package-tab-thumb.fallback-thumb,
.fallback-service-visual,
.fallback-portfolio-cover,
.fallback-card-media{
  display:grid !important;
  place-items:center !important;
  color:var(--secondary) !important;
  background:linear-gradient(135deg,#FCE8F0,#FFFFFF) !important;
  border:1px solid var(--line) !important;
  font-size:26px !important;
}
.fallback-service-visual{
  min-height:260px;
  border-radius:24px;
  position:relative;
  font-size:72px !important;
}
.fallback-portfolio-cover{
  min-height:220px;
  border-radius:24px;
  font-size:76px !important;
  position:relative;
}
.fallback-card-media{
  aspect-ratio:16/9;
  border-radius:20px 20px 0 0;
  font-size:48px !important;
  position:relative;
}
#serviceGrid:not(:empty), #packageTabs:not(:empty), #portfolioSplitTabs:not(:empty){
  min-height:auto !important;
}
@media (max-width:640px){
  .service-package-tabs,
  .package-tabs,
  #portfolioSplitTabs{
    min-height:72px !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    display:flex !important;
    gap:10px !important;
    padding:12px !important;
    scroll-snap-type:x mandatory !important;
  }
  .service-package-tab,
  .package-tab,
  .portfolio-split-tab{
    flex:0 0 82% !important;
    min-width:260px !important;
    scroll-snap-align:start !important;
    white-space:normal !important;
  }
  .service-package-content,
  .package-content,
  .portfolio-split-detail{
    min-height:auto !important;
  }
  .fallback-service-visual,
  .fallback-portfolio-cover{
    min-height:180px !important;
    font-size:52px !important;
  }
}

/* Native CSS tabs: aman untuk HP dan desktop, tidak bergantung JavaScript */
.ab-native-tabs{width:100%;}
.ab-native-tabs > input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.ab-native-labels{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center;}
.ab-native-labels label{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--primary);font-weight:900;border-radius:999px;padding:11px 16px;cursor:pointer;white-space:nowrap;box-shadow:0 10px 24px rgba(77,9,54,.06);transition:.18s ease;}
.ab-native-labels label:hover{transform:translateY(-1px);border-color:rgba(139,10,82,.35);background:var(--soft);}
.ab-native-panels{background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow-soft);min-height:260px;}
.ab-native-panel{display:none;animation:abFade .18s ease;}
@keyframes abFade{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#ab-service-0:checked ~ .ab-native-labels label[for="ab-service-0"],#ab-service-1:checked ~ .ab-native-labels label[for="ab-service-1"],#ab-service-2:checked ~ .ab-native-labels label[for="ab-service-2"],#ab-service-3:checked ~ .ab-native-labels label[for="ab-service-3"],#ab-service-4:checked ~ .ab-native-labels label[for="ab-service-4"],#ab-service-5:checked ~ .ab-native-labels label[for="ab-service-5"],#ab-package-0:checked ~ .ab-native-labels label[for="ab-package-0"],#ab-package-1:checked ~ .ab-native-labels label[for="ab-package-1"],#ab-package-2:checked ~ .ab-native-labels label[for="ab-package-2"],#ab-package-3:checked ~ .ab-native-labels label[for="ab-package-3"],#ab-package-4:checked ~ .ab-native-labels label[for="ab-package-4"],#ab-package-5:checked ~ .ab-native-labels label[for="ab-package-5"],#ab-package-6:checked ~ .ab-native-labels label[for="ab-package-6"],#ab-portfolio-0:checked ~ .ab-native-labels label[for="ab-portfolio-0"],#ab-portfolio-1:checked ~ .ab-native-labels label[for="ab-portfolio-1"],#ab-portfolio-2:checked ~ .ab-native-labels label[for="ab-portfolio-2"],#ab-portfolio-3:checked ~ .ab-native-labels label[for="ab-portfolio-3"],#ab-portfolio-4:checked ~ .ab-native-labels label[for="ab-portfolio-4"],#ab-portfolio-5:checked ~ .ab-native-labels label[for="ab-portfolio-5"]{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:var(--primary);color:#fff;box-shadow:0 16px 30px rgba(77,9,54,.18);}
#ab-service-0:checked ~ .ab-native-panels .ab-panel-0,#ab-service-1:checked ~ .ab-native-panels .ab-panel-1,#ab-service-2:checked ~ .ab-native-panels .ab-panel-2,#ab-service-3:checked ~ .ab-native-panels .ab-panel-3,#ab-service-4:checked ~ .ab-native-panels .ab-panel-4,#ab-service-5:checked ~ .ab-native-panels .ab-panel-5,#ab-package-0:checked ~ .ab-native-panels .ab-panel-0,#ab-package-1:checked ~ .ab-native-panels .ab-panel-1,#ab-package-2:checked ~ .ab-native-panels .ab-panel-2,#ab-package-3:checked ~ .ab-native-panels .ab-panel-3,#ab-package-4:checked ~ .ab-native-panels .ab-panel-4,#ab-package-5:checked ~ .ab-native-panels .ab-panel-5,#ab-package-6:checked ~ .ab-native-panels .ab-panel-6,#ab-portfolio-0:checked ~ .ab-native-panels .ab-panel-0,#ab-portfolio-1:checked ~ .ab-native-panels .ab-panel-1,#ab-portfolio-2:checked ~ .ab-native-panels .ab-panel-2,#ab-portfolio-3:checked ~ .ab-native-panels .ab-panel-3,#ab-portfolio-4:checked ~ .ab-native-panels .ab-panel-4,#ab-portfolio-5:checked ~ .ab-native-panels .ab-panel-5{display:block;}
.ab-service-detail-card{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:center;}
.ab-native-visual{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--secondary));aspect-ratio:16/10;min-height:250px;display:grid;place-items:center;box-shadow:0 18px 40px rgba(77,9,54,.12);}
.ab-native-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.ab-native-visual-fallback span{font-size:62px;color:#fff;}
.ab-kicker{display:inline-flex;border-radius:999px;background:var(--soft);color:var(--secondary);font-weight:900;font-size:12px;padding:8px 12px;margin-bottom:12px;}
.ab-service-detail-card h3,.ab-panel-head h3{color:var(--primary);font-size:clamp(26px,3vw,38px);line-height:1.1;margin-bottom:12px;}
.ab-service-detail-card p,.ab-panel-head p{color:var(--muted);font-size:16px;line-height:1.7;max-width:820px;}
.ab-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;}
.ab-chip-row span{background:var(--soft);color:var(--primary);font-weight:800;font-size:12px;border-radius:999px;padding:8px 11px;}
.ab-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.ab-panel-head{margin-bottom:22px;}
.ab-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;}
.ab-package-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.ab-plan-card{border:1px solid var(--line);border-radius:24px;background:#fff;padding:0 0 20px;overflow:hidden;box-shadow:0 10px 26px rgba(77,9,54,.06);display:flex;flex-direction:column;}
.ab-plan-card h4{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:15px 16px;text-align:center;font-size:18px;line-height:1.25;}
.ab-price{text-align:center;color:var(--secondary);font-size:18px;font-weight:900;margin:18px 14px 14px;}
.ab-price span{color:#BFA4B4;font-weight:800;}
.ab-plan-card ul{list-style:none;margin:0;padding:0 22px 16px;display:grid;gap:8px;color:var(--text);font-size:14px;line-height:1.4;}
.ab-plan-card li::before{content:'✓';color:var(--secondary);font-weight:900;margin-right:8px;}
.ab-mini-wa{align-self:center;margin-top:auto;display:inline-flex;justify-content:center;align-items:center;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff!important;font-size:12px;font-weight:900;padding:9px 14px;box-shadow:0 10px 22px rgba(77,9,54,.16);}
.ab-subtitle{color:var(--primary);font-size:22px;margin:24px 0 14px;border-top:1px solid var(--line);padding-top:22px;}
.ab-subtitle:first-of-type{border-top:0;margin-top:0;padding-top:0;}
.ab-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.ab-media-card{border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 10px 24px rgba(77,9,54,.06);display:flex;flex-direction:column;min-width:0;}
.ab-media-thumb{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary),var(--secondary));overflow:hidden;color:#fff;}
.ab-media-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ab-video-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(77,9,54,.05),rgba(77,9,54,.55));}
.ab-video-thumb.no-thumb{display:grid;place-items:center;}
.ab-video-thumb.no-thumb::before{content:'Video YouTube';position:absolute;color:#fff;font-weight:900;z-index:2;}
.ab-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--primary);display:grid;place-items:center;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.25);}
.ab-media-label{position:absolute;left:12px;bottom:12px;z-index:3;border-radius:999px;padding:6px 9px;background:rgba(255,255,255,.88);color:var(--secondary);font-size:11px;font-weight:900;}
.ab-media-body{padding:14px 15px 16px;}
.ab-media-body h5{color:var(--primary);font-size:15px;line-height:1.3;margin-bottom:6px;}
.ab-media-body p{color:var(--muted);font-size:13px;line-height:1.45;margin-bottom:8px;}
.ab-media-body a{color:var(--secondary);font-weight:900;font-size:12px;}
.ab-empty-note{color:var(--muted);font-weight:700;}
@media (max-width:1024px){.ab-package-grid,.ab-package-grid.four,.ab-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ab-service-detail-card{grid-template-columns:1fr;}.ab-native-visual{min-height:220px;}}
@media (max-width:640px){.ab-native-labels{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;margin-left:-2px;margin-right:-2px;scroll-snap-type:x proximity;}.ab-native-labels label{font-size:13px;padding:10px 13px;scroll-snap-align:start;}.ab-native-panels{padding:16px;border-radius:24px;}.ab-package-grid,.ab-package-grid.four,.ab-media-grid{grid-template-columns:1fr;}.ab-service-detail-card h3,.ab-panel-head h3{font-size:25px;}.ab-service-detail-card p,.ab-panel-head p{font-size:14px;}.ab-native-visual{min-height:180px;border-radius:20px;}.ab-plan-card h4{font-size:17px;}.ab-action-row .btn{width:100%;}.ab-media-body h5{font-size:14px;}#layanan .section-head h2,#paket .section-head h2,#portfolio .section-head h2{font-size:34px;line-height:1.12;}}

    /* override kontras panel intro menu layanan */
    .mega-intro{
      color:#FFF7F4 !important;
      background:
        radial-gradient(circle at top right, rgba(245,158,11,.20), transparent 34%),
        linear-gradient(135deg, #4a0d2a 0%, #7c2d12 100%) !important;
    }

    .mega-intro h3,
    .mega-intro p,
    .mega-intro .eyebrow,
    .mega-intro strong,
    .mega-intro span{
      color:#FFF7F4 !important;
    }

    .mega-intro .btn,
    .mega-intro .btn-primary{
      background:#ff7a59 !important;
      color:#ffffff !important;
      box-shadow:0 14px 28px rgba(0,0,0,.18) !important;
    }




  /* Final fix: pastikan 3 menu utama terlihat, bisa diklik, dan detailnya tampil di desktop maupun HP */
  #categoryStrip,
  #portfolioFilter,
  #portfolioGrid,
  #portfolioPhotoGallery{
    display:none !important;
  }

  .service-package-layout,
  .packages,
  .portfolio-split-layout{
    align-items:start !important;
  }

  .service-package-tabs,
  .package-tabs,
  .portfolio-split-menu{
    overflow:visible !important;
  }

  .service-package-tab,
  .package-tab,
  .portfolio-split-tab{
    cursor:pointer !important;
    user-select:none;
  }

  .service-package-tab.active,
  .package-tab.active,
  .portfolio-split-tab.active{
    background:var(--primary) !important;
    color:#fff !important;
    border-color:var(--primary) !important;
  }

  .service-package-tab.active small,
  .portfolio-split-tab.active span,
  .portfolio-split-tab.active strong{
    color:#fff !important;
  }

  .service-summary-media.ab-final-visual,
  .portfolio-split-cover.ab-final-visual{
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    min-height:260px;
    border-radius:24px;
    display:grid;
    place-items:center;
    color:white;
    position:relative;
    overflow:hidden;
  }

  .service-summary-media.ab-final-visual span:first-child,
  .portfolio-split-cover.ab-final-visual span:first-child{
    font-size:70px;
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.18));
  }

  .service-summary-media.ab-final-visual:before,
  .portfolio-split-cover.ab-final-visual:before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    right:-70px;
    top:-70px;
  }

  .service-summary-badge,
  .portfolio-split-cover-label{
    position:absolute;
    left:16px;
    bottom:16px;
    z-index:2;
  }

  .ab-final-package-plans{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:20px;
  }

  .ab-final-package-plans.four{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .ab-final-package-plan{
    border:1px solid var(--line);
    border-radius:24px;
    background:white;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(77,9,54,.06);
    display:flex;
    flex-direction:column;
  }

  .ab-final-package-plan h4{
    background:var(--secondary);
    color:white;
    text-align:center;
    padding:14px 12px;
    margin:0;
    font-size:18px;
  }

  .ab-final-package-plan-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
  }

  .ab-final-price{
    color:var(--secondary);
    font-weight:900;
    text-align:center;
  }

  .ab-final-price span{
    color:#C9D6DF;
  }

  .ab-final-package-plan ul{
    margin:0;
    padding-left:18px;
    color:var(--muted);
    font-size:14px;
    line-height:1.55;
  }

  .ab-final-wa-btn{
    margin-top:auto;
    align-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:9px 13px;
    font-size:12px;
    font-weight:900;
    color:#fff !important;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    box-shadow:0 10px 24px rgba(109,16,77,.18);
  }

  .ab-final-portfolio-note{
    color:var(--muted);
    font-size:14px;
    margin-top:8px;
  }

  #portfolioSplitDetail .photo-album{
    display:block !important;
    margin-top:18px;
    background:white;
  }

  #portfolioSplitDetail .photo-grid,
  #portfolioSplitDetail .event-video-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }

  #portfolioSplitDetail .portfolio-photo,
  #portfolioSplitDetail .live-video-card{
    display:block !important;
  }

  @media (max-width:980px){
    .ab-final-package-plans,
    .ab-final-package-plans.four{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #portfolioSplitDetail .photo-grid,
    #portfolioSplitDetail .event-video-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }

  @media (max-width:720px){
    .service-package-layout,
    .packages,
    .portfolio-split-layout{
      display:grid !important;
      grid-template-columns:1fr !important;
      gap:18px !important;
    }

    .service-package-tabs,
    .package-tabs,
    #portfolioSplitTabs{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      gap:10px !important;
      padding:10px !important;
      border-radius:22px !important;
      background:white !important;
      border:1px solid var(--line) !important;
      box-shadow:var(--shadow-soft) !important;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
    }

    .portfolio-split-menu{
      padding:0 !important;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
    }

    .portfolio-split-menu-title{
      background:white;
      border:1px solid var(--line);
      border-radius:22px;
      padding:18px;
      margin-bottom:12px;
    }

    .service-package-tab,
    .package-tab,
    .portfolio-split-tab{
      flex:0 0 auto !important;
      width:auto !important;
      min-width:190px !important;
      max-width:240px !important;
      border:1px solid var(--line) !important;
      background:#fff !important;
      border-radius:18px !important;
      padding:12px 14px !important;
      scroll-snap-align:start;
      color:var(--primary) !important;
    }

    .package-tab{
      min-width:160px !important;
      justify-content:space-between !important;
    }

    .portfolio-split-tab{
      min-width:220px !important;
    }

    .service-package-tab.active,
    .package-tab.active,
    .portfolio-split-tab.active{
      background:var(--primary) !important;
      color:white !important;
    }

    .service-package-content,
    .package-content,
    .portfolio-split-detail{
      min-height:auto !important;
      padding:18px !important;
      border-radius:24px !important;
      overflow:hidden !important;
    }

    .service-summary-content-grid,
    .portfolio-split-hero{
      grid-template-columns:1fr !important;
      gap:18px !important;
    }

    .service-summary-media.ab-final-visual,
    .portfolio-split-cover.ab-final-visual{
      min-height:220px;
    }

    .ab-final-package-plans,
    .ab-final-package-plans.four{
      grid-template-columns:1fr !important;
    }

    #portfolioSplitDetail .photo-grid,
    #portfolioSplitDetail .event-video-grid{
      grid-template-columns:1fr !important;
    }

    #portfolioSplitDetail .photo-album{
      padding:14px !important;
      border-radius:20px !important;
    }

    #portfolioSplitDetail .photo-album-head{
      display:block !important;
    }

    #portfolioSplitDetail .photo-album-head span{
      margin-top:10px;
      display:inline-flex;
    }
  }



  /* FINAL: layanan, paket unggulan, dan portfolio disejajarkan.
     Kategori berada di atas, deskripsi/detail muncul di bawahnya. */
  #layanan .service-package-layout,
  #paket .packages,
  #portfolio .portfolio-split-layout{
    display:block !important;
    grid-template-columns:none !important;
    gap:0 !important;
    width:100% !important;
  }

  #layanan #serviceGrid,
  #paket #packageTabs,
  #portfolio #portfolioSplitTabs{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap:12px !important;
    padding:14px !important;
    margin:0 0 20px !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid var(--line) !important;
    border-radius:28px !important;
    box-shadow:var(--shadow-soft) !important;
    overflow:visible !important;
    max-height:none !important;
  }

  #layanan .service-package-tab,
  #paket .package-tab,
  #portfolio .portfolio-split-tab{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:100% !important;
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:10px !important;
    padding:14px 12px !important;
    border:1px solid rgba(232,216,225,.9) !important;
    border-radius:20px !important;
    background:white !important;
    color:var(--primary) !important;
    box-shadow:none !important;
    transform:none !important;
    white-space:normal !important;
    cursor:pointer !important;
  }

  #layanan .service-package-tab:hover,
  #paket .package-tab:hover,
  #portfolio .portfolio-split-tab:hover{
    transform:translateY(-2px) !important;
    border-color:rgba(139,10,82,.35) !important;
    box-shadow:0 14px 28px rgba(77,9,54,.08) !important;
  }

  #layanan .service-package-tab.active,
  #paket .package-tab.active,
  #portfolio .portfolio-split-tab.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary)) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 18px 36px rgba(77,9,54,.18) !important;
  }

  #layanan .service-package-tab.active small,
  #layanan .service-package-tab.active strong,
  #portfolio .portfolio-split-tab.active strong,
  #portfolio .portfolio-split-tab.active span,
  #paket .package-tab.active span{
    color:#fff !important;
  }

  #layanan .service-package-tab-main{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  #layanan .service-package-tab-thumb{
    width:70px !important;
    height:48px !important;
    border-radius:14px !important;
    flex:0 0 auto !important;
    display:grid !important;
    place-items:center !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  #layanan .service-package-tab-text,
  #portfolio .portfolio-split-tab > span:last-child{
    text-align:center !important;
    min-width:0 !important;
  }

  #layanan .service-package-tab strong,
  #portfolio .portfolio-split-tab strong,
  #paket .package-tab{
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
  }

  #layanan .service-package-arrow,
  #paket .package-tab span,
  #portfolio .portfolio-split-number{
    display:none !important;
  }

  #layanan .service-package-content,
  #paket .package-content,
  #portfolio .portfolio-split-detail{
    width:100% !important;
    margin:0 !important;
    background:white !important;
    border:1px solid var(--line) !important;
    border-radius:30px !important;
    padding:28px !important;
    box-shadow:var(--shadow-soft) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #portfolio .portfolio-split-menu{
    width:100% !important;
    max-width:none !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    position:static !important;
  }

  #portfolio .portfolio-split-menu-title{
    display:block !important;
    background:white !important;
    border:1px solid var(--line) !important;
    border-radius:24px !important;
    padding:20px !important;
    margin-bottom:14px !important;
    box-shadow:var(--shadow-soft) !important;
  }

  #portfolio .portfolio-split-menu-title p{
    margin-top:4px !important;
  }

  #layanan .service-summary-content-grid,
  #portfolio .portfolio-split-hero{
    display:grid !important;
    grid-template-columns:.9fr 1.25fr !important;
    gap:24px !important;
    align-items:center !important;
  }

  #layanan .service-summary-media,
  #portfolio .portfolio-split-cover{
    min-height:250px !important;
    aspect-ratio:16/10 !important;
    border-radius:26px !important;
  }

  #paket .ab-final-package-plans,
  #paket .ab-final-package-plans.four,
  #paket .live-package-plans{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap:18px !important;
    align-items:stretch !important;
  }

  #paket .ab-final-package-plan,
  #paket .live-package-plan{
    height:100% !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #paket .ab-final-wa-btn,
  #paket .live-package-plan .btn,
  #paket .package-content .btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:9px 14px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:900 !important;
    background:linear-gradient(135deg,var(--primary),var(--secondary)) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 12px 24px rgba(77,9,54,.16) !important;
  }

  #portfolio .portfolio-split-grid,
  #portfolio .photo-grid,
  #portfolio .event-video-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:16px !important;
  }

  #portfolio .photo-album,
  #portfolio .portfolio-work-group{
    display:block !important;
    margin-top:22px !important;
  }

  #portfolio .portfolio-photo,
  #portfolio .live-video-card,
  #portfolio .portfolio-split-card{
    min-width:0 !important;
  }

  #portfolio .portfolio-photo img,
  #portfolio .live-thumb img,
  #portfolio .portfolio-split-card-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  #portfolio .portfolio-photo,
  #portfolio .live-thumb,
  #portfolio .portfolio-split-card-media{
    aspect-ratio:16/9 !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  #layanan .section-head,
  #paket .section-head,
  #portfolio .section-head{
    align-items:flex-end !important;
  }

  @media (max-width:980px){
    #layanan #serviceGrid,
    #paket #packageTabs,
    #portfolio #portfolioSplitTabs{
      grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }

    #layanan .service-summary-content-grid,
    #portfolio .portfolio-split-hero{
      grid-template-columns:1fr !important;
    }

    #portfolio .portfolio-split-grid,
    #portfolio .photo-grid,
    #portfolio .event-video-grid{
      grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }
  }

  @media (max-width:640px){
    #layanan #serviceGrid,
    #paket #packageTabs,
    #portfolio #portfolioSplitTabs{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      gap:10px !important;
      padding:10px !important;
      margin-bottom:16px !important;
      scroll-snap-type:x mandatory !important;
      -webkit-overflow-scrolling:touch !important;
    }

    #layanan #serviceGrid::-webkit-scrollbar,
    #paket #packageTabs::-webkit-scrollbar,
    #portfolio #portfolioSplitTabs::-webkit-scrollbar{
      display:none !important;
    }

    #layanan .service-package-tab,
    #paket .package-tab,
    #portfolio .portfolio-split-tab{
      flex:0 0 74% !important;
      min-width:220px !important;
      width:74% !important;
      min-height:72px !important;
      scroll-snap-align:start !important;
    }

    #layanan .service-package-tab-main{
      flex-direction:row !important;
      justify-content:flex-start !important;
      text-align:left !important;
    }

    #layanan .service-package-tab-text,
    #portfolio .portfolio-split-tab > span:last-child{
      text-align:left !important;
    }

    #layanan .service-package-tab-thumb{
      width:58px !important;
      height:42px !important;
    }

    #layanan .service-package-content,
    #paket .package-content,
    #portfolio .portfolio-split-detail{
      padding:18px !important;
      border-radius:24px !important;
    }

    #layanan .service-summary-media,
    #portfolio .portfolio-split-cover{
      min-height:auto !important;
      aspect-ratio:16/9 !important;
    }

    #paket .ab-final-package-plans,
    #paket .ab-final-package-plans.four,
    #paket .live-package-plans{
      grid-template-columns:1fr !important;
    }

    #portfolio .portfolio-split-grid,
    #portfolio .photo-grid,
    #portfolio .event-video-grid{
      grid-template-columns:1fr !important;
    }

    #portfolio .portfolio-split-menu-title{
      padding:16px !important;
      border-radius:22px !important;
    }
  }



  html[data-theme="dark"] #abLiveVideoGridSimple{
    background:linear-gradient(180deg,#1F0F1B,#160A14) !important;
    border-color:rgba(255,255,255,.13) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.34) !important;
  }
  html[data-theme="dark"] .ab-live-grid-head h3,
  html[data-theme="dark"] .ab-live-body h4{
    color:#F8EAF1 !important;
  }
  html[data-theme="dark"] .ab-live-grid-head p,
  html[data-theme="dark"] .ab-live-body p{
    color:#D8B8C9 !important;
  }
  html[data-theme="dark"] .ab-live-count{
    background:rgba(255,122,92,.14) !important;
    color:#FFC4B5 !important;
    border:1px solid rgba(255,122,92,.22) !important;
  }
  html[data-theme="dark"] .ab-live-video-card{
    background:#24111F !important;
    border-color:rgba(255,255,255,.12) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
  }
  html[data-theme="dark"] .ab-live-video-card:hover{
    border-color:rgba(255,122,92,.38) !important;
    box-shadow:0 22px 46px rgba(0,0,0,.42) !important;
  }
  html[data-theme="dark"] .ab-live-thumb{
    background:#080407 !important;
  }
  html[data-theme="dark"] .ab-live-play{
    background:linear-gradient(180deg,rgba(8,4,7,.04),rgba(8,4,7,.48)) !important;
  }
  html[data-theme="dark"] .ab-live-play span{
    background:#F8EAF1 !important;
    color:#B91C1C !important;
  }
  html[data-theme="dark"] .ab-live-actions .primary{
    background:linear-gradient(135deg,#8B0A52,#FF7A5C) !important;
    color:#fff !important;
  }
  html[data-theme="dark"] .ab-live-actions .secondary{
    background:#24111F !important;
    color:#F8EAF1 !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
  html[data-theme="dark"] #portfolio .ab-panel-1 .ab-panel-head h3{
    color:#F8EAF1 !important;
  }
  html[data-theme="dark"] #portfolio .ab-panel-1 .ab-panel-head p{
    color:#D8B8C9 !important;
  }



  html[data-theme="dark"] #layanan #serviceGrid,
  html[data-theme="dark"] #paket #packageTabs,
  html[data-theme="dark"] #portfolio #portfolioSplitTabs{
    background:#1C0D18 !important;
    border-color:rgba(255,255,255,.12) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.26) !important;
  }

  html[data-theme="dark"] #layanan .service-package-tab,
  html[data-theme="dark"] #paket .package-tab,
  html[data-theme="dark"] #portfolio .portfolio-split-tab{
    background:#24111F !important;
    border-color:rgba(255,255,255,.12) !important;
    color:#F6E2EC !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] #layanan .service-package-tab strong,
  html[data-theme="dark"] #layanan .service-package-tab small,
  html[data-theme="dark"] #paket .package-tab,
  html[data-theme="dark"] #paket .package-tab strong,
  html[data-theme="dark"] #paket .package-tab span,
  html[data-theme="dark"] #portfolio .portfolio-split-tab strong,
  html[data-theme="dark"] #portfolio .portfolio-split-tab span:last-child,
  html[data-theme="dark"] #portfolio .portfolio-split-tab{
    color:#F6E2EC !important;
  }

  html[data-theme="dark"] #layanan .service-package-tab:hover,
  html[data-theme="dark"] #paket .package-tab:hover,
  html[data-theme="dark"] #portfolio .portfolio-split-tab:hover{
    border-color:rgba(255,122,92,.35) !important;
    box-shadow:0 14px 28px rgba(0,0,0,.24) !important;
  }

  html[data-theme="dark"] #layanan .service-package-tab.active,
  html[data-theme="dark"] #paket .package-tab.active,
  html[data-theme="dark"] #portfolio .portfolio-split-tab.active{
    background:linear-gradient(135deg,#D96A89,#FF8A65) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 18px 36px rgba(0,0,0,.28) !important;
  }

  html[data-theme="dark"] #layanan .service-package-content,
  html[data-theme="dark"] #paket .package-content,
  html[data-theme="dark"] #portfolio .portfolio-split-detail,
  html[data-theme="dark"] #portfolio .portfolio-split-menu-title{
    background:#1F0F1B !important;
    border-color:rgba(255,255,255,.12) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
  }

  html[data-theme="dark"] #layanan .service-package-content h3,
  html[data-theme="dark"] #paket .package-content h3,
  html[data-theme="dark"] #portfolio .portfolio-split-detail h3,
  html[data-theme="dark"] #portfolio .portfolio-split-menu-title h3,
  html[data-theme="dark"] #portfolio .photo-album-head h3,
  html[data-theme="dark"] #layanan .service-summary-copy h3,
  html[data-theme="dark"] #layanan .service-summary-copy h4{
    color:#F8EAF1 !important;
  }

  html[data-theme="dark"] #layanan .service-package-content p,
  html[data-theme="dark"] #paket .package-content p,
  html[data-theme="dark"] #portfolio .portfolio-split-detail p,
  html[data-theme="dark"] #portfolio .portfolio-split-menu-title p,
  html[data-theme="dark"] #portfolio .photo-album-head p,
  html[data-theme="dark"] #layanan .service-summary-copy p,
  html[data-theme="dark"] #layanan .service-summary-points li,
  html[data-theme="dark"] #portfolio .portfolio-split-meta span,
  html[data-theme="dark"] #portfolio .portfolio-split-card-body p,
  html[data-theme="dark"] #portfolio .ab-final-portfolio-note{
    color:#D8B8C9 !important;
  }

  html[data-theme="dark"] #layanan .service-summary-card,
  html[data-theme="dark"] #layanan .service-summary-point,
  html[data-theme="dark"] #portfolio .portfolio-split-card,
  html[data-theme="dark"] #portfolio .photo-album,
  html[data-theme="dark"] #portfolio .portfolio-work-group{
    background:#24111F !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan,
  html[data-theme="dark"] #paket .live-package-plan{
    background:#24111F !important;
    border-color:rgba(255,255,255,.12) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.30) !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan h4,
  html[data-theme="dark"] #paket .live-package-plan h4{
    background:linear-gradient(135deg,#D96A89,#FF8A65) !important;
    color:#fff !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan-body,
  html[data-theme="dark"] #paket .live-package-plan-body{
    background:#24111F !important;
  }

  html[data-theme="dark"] #paket .ab-final-price,
  html[data-theme="dark"] #paket .live-package-price{
    color:#FF9F84 !important;
  }

  html[data-theme="dark"] #paket .ab-final-price span,
  html[data-theme="dark"] #paket .live-package-price span{
    color:#E6B8CA !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan ul,
  html[data-theme="dark"] #paket .ab-final-package-plan li,
  html[data-theme="dark"] #paket .live-package-plan ul,
  html[data-theme="dark"] #paket .live-package-plan li{
    color:#F2DCE6 !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan li::marker,
  html[data-theme="dark"] #paket .live-package-plan li::marker{
    color:#FF8A65 !important;
  }

  html[data-theme="dark"] #paket .ab-final-wa-btn,
  html[data-theme="dark"] #paket .live-package-plan .btn,
  html[data-theme="dark"] #paket .package-content .btn{
    background:linear-gradient(135deg,#D96A89,#FF8A65) !important;
    color:#fff !important;
    box-shadow:0 12px 24px rgba(0,0,0,.28) !important;
  }

  html[data-theme="dark"] #layanan .service-summary-media,
  html[data-theme="dark"] #portfolio .portfolio-split-cover,
  html[data-theme="dark"] #portfolio .portfolio-photo,
  html[data-theme="dark"] #portfolio .live-thumb,
  html[data-theme="dark"] #portfolio .portfolio-split-card-media{
    background:#140913 !important;
  }

  html[data-theme="dark"] #paket .section-head h2,
  html[data-theme="dark"] #layanan .section-head h2,
  html[data-theme="dark"] #portfolio .section-head h2{
    color:#F8EAF1 !important;
  }

  html[data-theme="dark"] #paket .section-head p,
  html[data-theme="dark"] #layanan .section-head p,
  html[data-theme="dark"] #portfolio .section-head p{
    color:#D8B8C9 !important;
  }



  html[data-theme="dark"]{
    --primary:#FFFFFF !important;
    --text:#FFFFFF !important;
    --muted:#E9D7E2 !important;
    --soft:#160A14 !important;
    --white:#1F0F1B !important;
    --line:rgba(255,255,255,.14) !important;
  }

  html[data-theme="dark"] body,
  html[data-theme="dark"] .section,
  html[data-theme="dark"] .section-soft{
    background:#140913 !important;
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .section h1,
  html[data-theme="dark"] .section h2,
  html[data-theme="dark"] .section h3,
  html[data-theme="dark"] .section h4,
  html[data-theme="dark"] .section h5,
  html[data-theme="dark"] .section strong,
  html[data-theme="dark"] .section-head h2{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .section p,
  html[data-theme="dark"] .section li,
  html[data-theme="dark"] .section-head p,
  html[data-theme="dark"] .faq-answer,
  html[data-theme="dark"] .flow-card p,
  html[data-theme="dark"] .service-summary-copy p,
  html[data-theme="dark"] .portfolio-split-detail p,
  html[data-theme="dark"] .package-content p{
    color:#E9D7E2 !important;
  }

  html[data-theme="dark"] .eyebrow{
    background:#2A1424 !important;
    color:#FFAD98 !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }

  html[data-theme="dark"] .hero-panel,
  html[data-theme="dark"] .stat,
  html[data-theme="dark"] .search-box,
  html[data-theme="dark"] .service-card,
  html[data-theme="dark"] .portfolio-card,
  html[data-theme="dark"] .quote-form,
  html[data-theme="dark"] .faq-item,
  html[data-theme="dark"] .faq-question,
  html[data-theme="dark"] .flow-card,
  html[data-theme="dark"] .modal,
  html[data-theme="dark"] .ab-native-panels,
  html[data-theme="dark"] .ab-native-panel,
  html[data-theme="dark"] .ab-service-detail-card,
  html[data-theme="dark"] .ab-plan-card,
  html[data-theme="dark"] .ab-media-card,
  html[data-theme="dark"] .live-package-plan,
  html[data-theme="dark"] .ab-final-package-plan,
  html[data-theme="dark"] .service-package-content,
  html[data-theme="dark"] .package-content,
  html[data-theme="dark"] .portfolio-split-detail,
  html[data-theme="dark"] .portfolio-split-menu-title,
  html[data-theme="dark"] .portfolio-split-card,
  html[data-theme="dark"] .photo-album,
  html[data-theme="dark"] .portfolio-work-group{
    background:#1F0F1B !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.34) !important;
  }

  html[data-theme="dark"] .faq-question{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .faq-question span{
    color:#FFAD98 !important;
  }

  html[data-theme="dark"] .flow-card::before{
    background:linear-gradient(135deg,#D96A89,#FF8A65) !important;
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .flow-card h3,
  html[data-theme="dark"] .faq-question,
  html[data-theme="dark"] .field label,
  html[data-theme="dark"] .modal-box h4,
  html[data-theme="dark"] .stat strong,
  html[data-theme="dark"] .service-card h3,
  html[data-theme="dark"] .portfolio-card h3,
  html[data-theme="dark"] .ab-plan-card h4,
  html[data-theme="dark"] .ab-media-body h5{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .stat span,
  html[data-theme="dark"] .service-card p,
  html[data-theme="dark"] .portfolio-card p,
  html[data-theme="dark"] .ab-plan-card li,
  html[data-theme="dark"] .ab-media-body p,
  html[data-theme="dark"] .modal-box ul,
  html[data-theme="dark"] .modal-box li{
    color:#E9D7E2 !important;
  }

  html[data-theme="dark"] .field input,
  html[data-theme="dark"] .field select,
  html[data-theme="dark"] .field textarea,
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea{
    background:#160A14 !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  html[data-theme="dark"] .field input::placeholder,
  html[data-theme="dark"] .field textarea::placeholder,
  html[data-theme="dark"] input::placeholder,
  html[data-theme="dark"] textarea::placeholder{
    color:#BFA8B7 !important;
  }

  html[data-theme="dark"] .chip,
  html[data-theme="dark"] .ab-native-labels label,
  html[data-theme="dark"] #layanan .service-package-tab,
  html[data-theme="dark"] #paket .package-tab,
  html[data-theme="dark"] #portfolio .portfolio-split-tab{
    background:#2A1424 !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  html[data-theme="dark"] .chip.active,
  html[data-theme="dark"] .chip:hover,
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(1):checked ~ .ab-native-labels label:nth-of-type(1),
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(2):checked ~ .ab-native-labels label:nth-of-type(2),
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(3):checked ~ .ab-native-labels label:nth-of-type(3),
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(4):checked ~ .ab-native-labels label:nth-of-type(4),
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(5):checked ~ .ab-native-labels label:nth-of-type(5),
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(6):checked ~ .ab-native-labels label:nth-of-type(6),
  html[data-theme="dark"] .ab-native-tabs input:nth-of-type(7):checked ~ .ab-native-labels label:nth-of-type(7),
  html[data-theme="dark"] #layanan .service-package-tab.active,
  html[data-theme="dark"] #paket .package-tab.active,
  html[data-theme="dark"] #portfolio .portfolio-split-tab.active{
    background:linear-gradient(135deg,#D96A89,#FF8A65) !important;
    color:#FFFFFF !important;
    border-color:transparent !important;
  }

  html[data-theme="dark"] #layanan #serviceGrid,
  html[data-theme="dark"] #paket #packageTabs,
  html[data-theme="dark"] #portfolio #portfolioSplitTabs{
    background:#160A14 !important;
    border-color:rgba(255,255,255,.14) !important;
  }

  html[data-theme="dark"] #layanan .service-package-tab strong,
  html[data-theme="dark"] #layanan .service-package-tab small,
  html[data-theme="dark"] #paket .package-tab,
  html[data-theme="dark"] #portfolio .portfolio-split-tab strong,
  html[data-theme="dark"] #portfolio .portfolio-split-tab span{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan h4,
  html[data-theme="dark"] #paket .live-package-plan h4,
  html[data-theme="dark"] .ab-plan-card h4{
    background:linear-gradient(135deg,#D96A89,#FF8A65) !important;
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan-body,
  html[data-theme="dark"] #paket .live-package-plan-body{
    background:#1F0F1B !important;
  }

  html[data-theme="dark"] #paket .ab-final-price,
  html[data-theme="dark"] #paket .live-package-price,
  html[data-theme="dark"] #paket .ab-final-price span,
  html[data-theme="dark"] #paket .live-package-price span{
    color:#FFAD98 !important;
  }

  html[data-theme="dark"] #paket .ab-final-package-plan ul,
  html[data-theme="dark"] #paket .ab-final-package-plan li,
  html[data-theme="dark"] #paket .live-package-plan ul,
  html[data-theme="dark"] #paket .live-package-plan li{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .btn,
  html[data-theme="dark"] .ab-final-wa-btn,
  html[data-theme="dark"] .ab-mini-wa{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .btn-outline{
    background:#2A1424 !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.18) !important;
  }

  html[data-theme="dark"] .service-summary-badge,
  html[data-theme="dark"] .portfolio-split-cover-label,
  html[data-theme="dark"] .portfolio-split-kicker{
    background:#2A1424 !important;
    color:#FFAD98 !important;
    border-color:rgba(255,255,255,.14) !important;
  }

  html[data-theme="dark"] .portfolio-split-cover,
  html[data-theme="dark"] .service-summary-media{
    background:#160A14 !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }



  /* Final dark contrast fix: komponen gradient terang dipaksa kembali gelap. */
  html[data-theme="dark"]{
    --primary:#F8D7E8 !important;
    --secondary:#FF7A5C !important;
    --accent:#FF8A65 !important;
    --text:#FFFFFF !important;
    --muted:#E9D7E2 !important;
    --white:#1F0F1B !important;
    --soft:#160A14 !important;
    --line:rgba(255,255,255,.14) !important;
  }

  html[data-theme="dark"] .hero-panel{
    background:#1F0F1B !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 22px 52px rgba(0,0,0,.42) !important;
  }

  html[data-theme="dark"] .panel-card{
    background:
      radial-gradient(circle at 92% 6%, rgba(255,122,92,.16), transparent 34%),
      linear-gradient(135deg,#24111F 0%,#2D1427 52%,#3A182E 100%) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .panel-card::after{
    background:rgba(255,122,92,.10) !important;
  }

  html[data-theme="dark"] .panel-card h3{
    color:#FFFFFF !important;
    text-shadow:0 2px 10px rgba(0,0,0,.18) !important;
  }

  html[data-theme="dark"] .panel-card p{
    color:#F2E4EC !important;
    text-shadow:0 1px 8px rgba(0,0,0,.18) !important;
  }

  html[data-theme="dark"] .quick-stats .stat{
    background:#24111F !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  html[data-theme="dark"] .quick-stats .stat strong{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .quick-stats .stat span{
    color:#E9D7E2 !important;
  }

  html[data-theme="dark"] .quote-box{
    background:
      radial-gradient(circle at 95% 8%, rgba(255,122,92,.12), transparent 32%),
      linear-gradient(135deg,#1F0F1B 0%,#24111F 55%,#15333A 100%) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:#FFFFFF !important;
    box-shadow:0 24px 60px rgba(0,0,0,.44) !important;
  }

  html[data-theme="dark"] .quote-box h2{
    color:#FFFFFF !important;
    text-shadow:0 2px 12px rgba(0,0,0,.20) !important;
  }

  html[data-theme="dark"] .quote-box p{
    color:#F0E2EA !important;
  }

  html[data-theme="dark"] .quote-box .eyebrow{
    background:#2A1424 !important;
    color:#FFAD98 !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }

  html[data-theme="dark"] .contact-link,
  html[data-theme="dark"] .social-link,
  html[data-theme="dark"] .social-link.light{
    background:#2A1424 !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  html[data-theme="dark"] .contact-link svg,
  html[data-theme="dark"] .social-link svg{
    color:#FFAD98 !important;
    fill:#FFAD98 !important;
  }

  html[data-theme="dark"] .quote-form{
    background:#1F0F1B !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .quote-form h3,
  html[data-theme="dark"] .quote-form h4,
  html[data-theme="dark"] .quote-form label{
    color:#FFFFFF !important;
  }

  html[data-theme="dark"] .quote-form input,
  html[data-theme="dark"] .quote-form select,
  html[data-theme="dark"] .quote-form textarea{
    background:#160A14 !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  html[data-theme="dark"] .quote-form input::placeholder,
  html[data-theme="dark"] .quote-form textarea::placeholder{
    color:#BFA8B7 !important;
  }



  #layanan .service-summary-media,
  #layanan .ab-native-visual{
    background:#140913 !important;
    border:1px solid rgba(77,9,54,.12) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #layanan .service-summary-media{
    aspect-ratio:16/9 !important;
    min-height:260px !important;
  }

  #layanan .service-summary-media img,
  #layanan .ab-native-visual img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
    transition:opacity .25s ease, transform .25s ease, filter .25s ease !important;
    will-change:opacity, transform;
  }

  #layanan .service-summary-media img.ab-thumb-fading{
    opacity:.12 !important;
    transform:scale(1.025);
  }

  #layanan .service-summary-media .ab-thumb-dots{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:4;
    display:flex;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    background:rgba(20,9,19,.62);
    backdrop-filter:blur(8px);
  }

  #layanan .service-summary-media .ab-thumb-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,.42);
  }

  #layanan .service-summary-media .ab-thumb-dot.active{
    width:18px;
    background:#FF8A65;
  }

  html[data-theme="dark"] #layanan .service-summary-media,
  html[data-theme="dark"] #layanan .ab-native-visual{
    background:#160A14 !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  @media (max-width:640px){
    #layanan .service-summary-media{
      min-height:auto !important;
      aspect-ratio:16/10 !important;
      border-radius:22px !important;
    }
  }



  #layanan .service-summary-media{
    position:relative !important;
    overflow:hidden !important;
    background:#140913 !important;
    aspect-ratio:16/9 !important;
    min-height:260px !important;
  }

  #layanan .service-summary-media img.ab-service-slider-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    z-index:1 !important;
    display:block !important;
    transition:opacity .28s ease, transform .28s ease !important;
  }

  #layanan .service-summary-media img.ab-service-slider-img.is-changing{
    opacity:.15 !important;
    transform:scale(1.025);
  }

  #layanan .service-summary-media.ab-final-visual > span:first-child:not(.service-summary-badge){
    display:none !important;
  }

  #layanan .service-summary-media::after{
    z-index:2 !important;
  }

  #layanan .service-summary-badge{
    z-index:4 !important;
  }

  #layanan .ab-service-carousel-dots{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:5;
    display:flex;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    background:rgba(20,9,19,.64);
    backdrop-filter:blur(8px);
  }

  #layanan .ab-service-carousel-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,.42);
  }

  #layanan .ab-service-carousel-dot.active{
    width:18px;
    background:#FF8A65;
  }

  html[data-theme="dark"] #layanan .service-summary-media{
    background:#160A14 !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  @media(max-width:640px){
    #layanan .service-summary-media{
      min-height:auto !important;
      aspect-ratio:16/10 !important;
    }
  }



  #layanan .ab-native-visual.ab-service-slider-ready{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:#140913 !important;
  }

  #layanan .ab-native-visual.ab-service-slider-ready::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(20,9,19,0) 45%, rgba(20,9,19,.52) 100%);
  }

  #layanan .ab-native-visual.ab-service-slider-ready > img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    z-index:1 !important;
    transform:scale(1);
    transition:opacity .32s ease, transform .32s ease, filter .32s ease !important;
  }

  #layanan .ab-native-visual.ab-service-slider-ready > img.is-switching{
    opacity:.18 !important;
    transform:scale(1.035);
    filter:saturate(.9);
  }

  #layanan .ab-service-slider-btn{
    position:absolute;
    top:50%;
    z-index:5;
    width:40px;
    height:40px;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(20,9,19,.58);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    opacity:.9;
    backdrop-filter:blur(8px);
    transition:transform .2s ease, opacity .2s ease, background .2s ease;
  }

  #layanan .ab-service-slider-btn:hover,
  #layanan .ab-service-slider-btn:focus-visible{
    opacity:1;
    background:rgba(255,138,101,.88);
    transform:translateY(-50%) scale(1.05);
    outline:none;
  }

  #layanan .ab-service-slider-prev{left:14px;}
  #layanan .ab-service-slider-next{right:14px;}

  #layanan .ab-service-slider-footer{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    pointer-events:none;
  }

  #layanan .ab-service-slider-dots{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:999px;
    background:rgba(20,9,19,.64);
    backdrop-filter:blur(8px);
    pointer-events:auto;
  }

  #layanan .ab-service-slider-dot{
    width:7px;
    height:7px;
    border:0;
    padding:0;
    border-radius:999px;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:width .2s ease, background .2s ease;
  }

  #layanan .ab-service-slider-dot.active{
    width:19px;
    background:#FF8A65;
  }

  #layanan .ab-service-slider-count{
    padding:7px 10px;
    border-radius:999px;
    background:rgba(20,9,19,.64);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    backdrop-filter:blur(8px);
    pointer-events:none;
  }

  html[data-theme="dark"] #layanan .ab-service-slider-dot.active{
    background:#FFAD98;
  }

  @media (max-width:640px){
    #layanan .ab-service-slider-btn{
      width:34px;
      height:34px;
      font-size:20px;
    }

    #layanan .ab-service-slider-prev{left:10px;}
    #layanan .ab-service-slider-next{right:10px;}

    #layanan .ab-service-slider-footer{
      left:10px;
      right:10px;
      bottom:10px;
    }

    #layanan .ab-service-slider-count{
      font-size:11px;
      padding:6px 8px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    #layanan .ab-native-visual.ab-service-slider-ready > img,
    #layanan .ab-service-slider-btn,
    #layanan .ab-service-slider-dot{
      transition:none !important;
    }
  }

/* WordPress integration */
body.admin-bar .navbar{top:32px}
@media(max-width:782px){body.admin-bar .navbar{top:46px}}
.nav-menu ul{display:flex;align-items:center;gap:20px;margin:0;padding:0}.nav-menu li{list-style:none;margin:0}.nav-menu li a{display:inline-flex}
.ab-empty-state{padding:28px;border:1px dashed var(--line);border-radius:20px;text-align:center;color:var(--muted);background:var(--white)}
.ab-portfolio-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}.ab-portfolio-pagination button{border:1px solid var(--line);background:var(--white);color:var(--primary);border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}.ab-portfolio-pagination button:disabled{opacity:.45;cursor:not-allowed}.ab-portfolio-pagination span{font-weight:800;color:var(--muted)}
.ab-media-card[hidden]{display:none!important}
.ab-page-shell{padding:64px 0}.ab-page-header{padding:74px 0 52px;background:linear-gradient(135deg,#fff,#fbf4f8)}.ab-page-header-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.ab-page-header h1{font-size:clamp(38px,5vw,62px);line-height:1.08;margin:16px 0;color:var(--primary)}.ab-page-header .lead{font-size:18px;color:var(--muted)}.ab-page-hero-img{width:100%;border-radius:28px;box-shadow:var(--shadow);aspect-ratio:16/11;object-fit:cover;background:var(--soft)}
.entry-content{font-size:17px;line-height:1.8}.entry-content h2,.entry-content h3{color:var(--primary);line-height:1.25}.entry-content h2{font-size:clamp(28px,4vw,42px);margin-top:42px}.entry-content h3{font-size:24px}.entry-content img{max-width:100%;height:auto;border-radius:22px}.entry-content .section{padding:42px 0}.entry-content .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.entry-content .split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.entry-content .card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-soft)}.entry-content details{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px;margin:12px 0}.entry-content summary{cursor:pointer;font-weight:900;color:var(--primary)}.entry-content .cta{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border-radius:30px;padding:34px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}.entry-content .cta h2,.entry-content .cta p{color:#fff;margin-top:0}
.ab-service-single-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}.ab-service-single-card{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow-soft)}
.ab-dashboard-edit-link{position:fixed;right:20px;bottom:20px;z-index:9999;background:var(--primary);color:#fff!important;border-radius:999px;padding:12px 18px;box-shadow:var(--shadow);font-weight:800}
html[data-theme="dark"] .ab-page-header{background:linear-gradient(135deg,#1c1119,#29131f)}html[data-theme="dark"] .ab-page-header h1,html[data-theme="dark"] .entry-content h2,html[data-theme="dark"] .entry-content h3{color:#fff}html[data-theme="dark"] .ab-portfolio-pagination button{background:#26141f;color:#fff;border-color:#543044}
@media(max-width:900px){.ab-page-header-grid,.ab-service-single-grid,.entry-content .split{grid-template-columns:1fr}.entry-content .grid{grid-template-columns:1fr}.nav-menu ul{flex-direction:column;align-items:flex-start}}
/* Generic native-tab support up to 20 editable categories. */
.ab-native-tabs > input:nth-of-type(1):checked ~ .ab-native-labels > label:nth-of-type(1),
.ab-native-tabs > input:nth-of-type(2):checked ~ .ab-native-labels > label:nth-of-type(2),
.ab-native-tabs > input:nth-of-type(3):checked ~ .ab-native-labels > label:nth-of-type(3),
.ab-native-tabs > input:nth-of-type(4):checked ~ .ab-native-labels > label:nth-of-type(4),
.ab-native-tabs > input:nth-of-type(5):checked ~ .ab-native-labels > label:nth-of-type(5),
.ab-native-tabs > input:nth-of-type(6):checked ~ .ab-native-labels > label:nth-of-type(6),
.ab-native-tabs > input:nth-of-type(7):checked ~ .ab-native-labels > label:nth-of-type(7),
.ab-native-tabs > input:nth-of-type(8):checked ~ .ab-native-labels > label:nth-of-type(8),
.ab-native-tabs > input:nth-of-type(9):checked ~ .ab-native-labels > label:nth-of-type(9),
.ab-native-tabs > input:nth-of-type(10):checked ~ .ab-native-labels > label:nth-of-type(10),
.ab-native-tabs > input:nth-of-type(11):checked ~ .ab-native-labels > label:nth-of-type(11),
.ab-native-tabs > input:nth-of-type(12):checked ~ .ab-native-labels > label:nth-of-type(12),
.ab-native-tabs > input:nth-of-type(13):checked ~ .ab-native-labels > label:nth-of-type(13),
.ab-native-tabs > input:nth-of-type(14):checked ~ .ab-native-labels > label:nth-of-type(14),
.ab-native-tabs > input:nth-of-type(15):checked ~ .ab-native-labels > label:nth-of-type(15),
.ab-native-tabs > input:nth-of-type(16):checked ~ .ab-native-labels > label:nth-of-type(16),
.ab-native-tabs > input:nth-of-type(17):checked ~ .ab-native-labels > label:nth-of-type(17),
.ab-native-tabs > input:nth-of-type(18):checked ~ .ab-native-labels > label:nth-of-type(18),
.ab-native-tabs > input:nth-of-type(19):checked ~ .ab-native-labels > label:nth-of-type(19),
.ab-native-tabs > input:nth-of-type(20):checked ~ .ab-native-labels > label:nth-of-type(20){background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:var(--primary);color:#fff;box-shadow:0 16px 30px rgba(77,9,54,.18)}
.ab-native-tabs > input:nth-of-type(1):checked ~ .ab-native-panels > .ab-native-panel:nth-child(1),
.ab-native-tabs > input:nth-of-type(2):checked ~ .ab-native-panels > .ab-native-panel:nth-child(2),
.ab-native-tabs > input:nth-of-type(3):checked ~ .ab-native-panels > .ab-native-panel:nth-child(3),
.ab-native-tabs > input:nth-of-type(4):checked ~ .ab-native-panels > .ab-native-panel:nth-child(4),
.ab-native-tabs > input:nth-of-type(5):checked ~ .ab-native-panels > .ab-native-panel:nth-child(5),
.ab-native-tabs > input:nth-of-type(6):checked ~ .ab-native-panels > .ab-native-panel:nth-child(6),
.ab-native-tabs > input:nth-of-type(7):checked ~ .ab-native-panels > .ab-native-panel:nth-child(7),
.ab-native-tabs > input:nth-of-type(8):checked ~ .ab-native-panels > .ab-native-panel:nth-child(8),
.ab-native-tabs > input:nth-of-type(9):checked ~ .ab-native-panels > .ab-native-panel:nth-child(9),
.ab-native-tabs > input:nth-of-type(10):checked ~ .ab-native-panels > .ab-native-panel:nth-child(10),
.ab-native-tabs > input:nth-of-type(11):checked ~ .ab-native-panels > .ab-native-panel:nth-child(11),
.ab-native-tabs > input:nth-of-type(12):checked ~ .ab-native-panels > .ab-native-panel:nth-child(12),
.ab-native-tabs > input:nth-of-type(13):checked ~ .ab-native-panels > .ab-native-panel:nth-child(13),
.ab-native-tabs > input:nth-of-type(14):checked ~ .ab-native-panels > .ab-native-panel:nth-child(14),
.ab-native-tabs > input:nth-of-type(15):checked ~ .ab-native-panels > .ab-native-panel:nth-child(15),
.ab-native-tabs > input:nth-of-type(16):checked ~ .ab-native-panels > .ab-native-panel:nth-child(16),
.ab-native-tabs > input:nth-of-type(17):checked ~ .ab-native-panels > .ab-native-panel:nth-child(17),
.ab-native-tabs > input:nth-of-type(18):checked ~ .ab-native-panels > .ab-native-panel:nth-child(18),
.ab-native-tabs > input:nth-of-type(19):checked ~ .ab-native-panels > .ab-native-panel:nth-child(19),
.ab-native-tabs > input:nth-of-type(20):checked ~ .ab-native-panels > .ab-native-panel:nth-child(20){display:block}

.nav-menu .ab-wp-menu>li>a{background:none;border:0;color:var(--primary);padding:12px 14px;border-radius:999px;font-weight:700;font-size:15px}.nav-menu .ab-wp-menu>li>a:hover,.nav-menu .ab-wp-menu>.current-menu-item>a{background:var(--soft)}
.ab-service-content{font-size:17px;line-height:1.8}.ab-service-content>.section{padding:64px 0}.ab-service-content h2,.ab-service-content h3{color:var(--primary)}
@media(max-width:980px){.nav-menu.mobile-open .ab-wp-menu{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:4px}.nav-menu.mobile-open .ab-wp-menu>li>a{display:block;width:100%}}