/*
Theme Name: BisaDi Print
Theme URI: https://bisadiprint.example/
Author: BisaDi Print
Description: Tema WordPress satu halaman yang dikonversi dari preview website BisaDi Print.
Version: 1.0.0
Text Domain: bisadi-print
*/

:root{
      --orange:#ff6a00;
      --orange-dark:#e95700;
      --orange-soft:#fff3e9;
      --ink:#171717;
      --muted:#6b7280;
      --line:#ececec;
      --soft:#fafafa;
    }

    html{scroll-behavior:smooth}
    body{
      font-family:"Inter",sans-serif;
      color:var(--ink);
      background:#fff;
      overflow-x:hidden;
    }
    a{text-decoration:none}
    .text-orange{color:var(--orange)!important}
    .bg-orange{background:var(--orange)!important}
    .section-pad{padding:95px 0}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      background:var(--orange-soft);
      color:var(--orange-dark);
      font-size:.78rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .section-title{
      font-size:clamp(2rem,4vw,3.35rem);
      font-weight:800;
      letter-spacing:-.045em;
      line-height:1.08;
    }
    .section-copy{color:var(--muted);line-height:1.8}

    /* Navbar */
    .navbar{
      transition:.3s ease;
      padding:18px 0;
    }
    .navbar.scrolled{
      background:rgba(255,255,255,.94)!important;
      backdrop-filter:blur(14px);
      box-shadow:0 8px 30px rgba(0,0,0,.07);
      padding:11px 0;
    }
    .brand{
      color:var(--ink);
      font-size:1.45rem;
      font-weight:800;
      letter-spacing:-.06em;
    }
    .brand span{color:var(--orange)}
    .nav-link{
      color:#444!important;
      font-size:.92rem;
      font-weight:600;
      margin:0 7px;
    }
    .nav-link:hover{color:var(--orange)!important}
    .btn-orange{
      background:var(--orange);
      border-color:var(--orange);
      color:#fff;
      font-weight:700;
      border-radius:12px;
      padding:12px 18px;
      transition:.25s;
      box-shadow:0 10px 24px rgba(255,106,0,.22);
    }
    .btn-orange:hover{
      background:var(--orange-dark);
      border-color:var(--orange-dark);
      color:#fff;
      transform:translateY(-2px);
    }
    .btn-outline-dark{
      border-radius:12px;
      padding:12px 18px;
      font-weight:700;
    }

    /* Hero */
    .hero{
      min-height:760px;
      display:flex;
      align-items:center;
      position:relative;
      padding:150px 0 90px;
      background:
        radial-gradient(circle at 82% 20%, rgba(255,106,0,.13), transparent 27%),
        linear-gradient(180deg,#fff 0%,#fffaf6 100%);
    }
    .hero h1{
      font-size:clamp(3rem,6.2vw,6rem);
      line-height:.97;
      letter-spacing:-.065em;
      font-weight:800;
    }
    .hero h1 .accent{color:var(--orange)}
    .hero-copy{
      color:var(--muted);
      font-size:1.08rem;
      line-height:1.8;
      max-width:650px;
    }
    .hero-pills{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:25px;
    }
    .hero-pill{
      border:1px solid #eee;
      background:#fff;
      padding:9px 13px;
      border-radius:999px;
      font-size:.82rem;
      font-weight:600;
      box-shadow:0 8px 20px rgba(0,0,0,.04);
    }
    .hero-visual{
      position:relative;
      min-height:510px;
    }
    .hero-card{
      position:absolute;
      border-radius:28px;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      box-shadow:0 25px 70px rgba(0,0,0,.13);
    }
    .hero-main-card{
      width:min(92%,470px);
      height:440px;
      right:0;
      top:25px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:
        radial-gradient(circle at 20% 20%,rgba(255,152,76,.30),transparent 32%),
        linear-gradient(135deg,#fff7f0 0%,#ffffff 100%);
    }
    .hero-brand-logo{
      width:72%;
      max-width:330px;
      height:auto;
      object-fit:contain;
      display:block;
    }
    .floating-card{
      width:210px;
      padding:18px;
      left:0;
      bottom:10px;
      z-index:2;
    }
    .floating-icon{
      width:44px;height:44px;border-radius:13px;
      display:grid;place-items:center;
      background:var(--orange-soft);color:var(--orange);
      font-size:1.25rem;
    }

    /* Brand logo overlays */
    .banner-brand-logo{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:230px;
      max-width:62%;
      height:auto;
      object-fit:contain;
      z-index:1;
      filter:drop-shadow(0 8px 18px rgba(0,0,0,.16));
      pointer-events:none;
    }
    .branding-image-wrap{
      position:relative;
      overflow:hidden;
    }
    .brand-logo-panel{
      min-height:330px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:
        radial-gradient(circle at 80% 20%,rgba(255,106,0,.08),transparent 30%),
        #fff;
    }
    .brand-logo-main{
      width:min(62%,390px);
      height:auto;
      object-fit:contain;
      display:block;
    }


    /* Stats */
    .stats{
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:#fff;
    }
    .stat{
      padding:25px 15px;
      text-align:center;
      border-right:1px solid var(--line);
    }
    .stat:last-child{border-right:0}
    .stat strong{display:block;font-size:1.55rem;font-weight:800}
    .stat span{font-size:.82rem;color:var(--muted)}

    /* Cards */
    .service-card{
      height:100%;
      border:1px solid var(--line);
      border-radius:22px;
      padding:25px;
      background:#fff;
      transition:.3s;
    }
    .service-card:hover{
      transform:translateY(-7px);
      box-shadow:0 20px 50px rgba(0,0,0,.09);
      border-color:rgba(255,106,0,.25);
    }
    .service-icon{
      width:54px;height:54px;
      border-radius:16px;
      display:grid;place-items:center;
      color:var(--orange);
      background:var(--orange-soft);
      font-size:1.45rem;
      margin-bottom:22px;
    }
    .service-card h5{font-weight:800}
    .service-card p{color:var(--muted);font-size:.9rem;line-height:1.7}
    .service-link{color:var(--orange);font-weight:700;font-size:.88rem}

    /* Solutions */
    .solution{
      min-height:220px;
      padding:26px;
      border-radius:24px;
      color:#fff;
      position:relative;
      overflow:hidden;
      background:var(--ink);
    }
    .solution.orange{background:var(--orange)}
    .solution:after{
      content:"";
      position:absolute;
      width:180px;height:180px;
      border-radius:50%;
      right:-70px;bottom:-90px;
      border:30px solid rgba(255,255,255,.08);
    }
    .solution i{font-size:1.7rem}
    .solution h5{font-weight:800;margin-top:25px}
    .solution p{color:rgba(255,255,255,.76);font-size:.88rem;line-height:1.7}

    /* Additional Printing Solutions */
    .solution-card{
      height:100%;
      border:1px solid var(--line);
      border-radius:22px;
      padding:28px;
      background:#fff;
      transition:.3s;
    }
    .solution-card:hover{
      transform:translateY(-6px);
      box-shadow:0 20px 50px rgba(0,0,0,.08);
      border-color:rgba(255,106,0,.25);
    }
    .solution-card .solution-icon{
      width:58px;height:58px;border-radius:17px;
      display:grid;place-items:center;
      background:var(--orange-soft);
      color:var(--orange);
      font-size:1.55rem;
      margin-bottom:20px;
    }
    .solution-card h5{font-weight:800}
    .solution-card p{color:var(--muted);font-size:.9rem;line-height:1.75}
    .client-card{
      min-height:92px;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      text-align:center;
      font-weight:800;
      color:#333;
      transition:.25s;
    }
    .client-card:hover{
      transform:translateY(-4px);
      box-shadow:0 15px 35px rgba(0,0,0,.07);
      border-color:rgba(255,106,0,.25);
      color:var(--orange-dark);
    }
    .client-note{
      max-width:760px;
      margin:0 auto;
      color:var(--muted);
      line-height:1.8;
    }


    .logo-client-card{
      min-height:130px;
      padding:18px 24px;
      background:#fff;
    }
    .logo-client-card img{
      display:block;
      width:100%;
      height:88px;
      object-fit:contain;
      object-position:center;
      transition:.25s ease;
    }
    .logo-client-card:hover img{
      transform:scale(1.04);
    }

    /* Produk Catalog */
    .catalog-card{
      height:100%;
      background:#fff;
      border:1px solid #ececec;
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 10px 30px rgba(23,23,23,.06);
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
    }
    .catalog-card:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 40px rgba(23,23,23,.11);
      border-color:#ffd7bd;
    }
    .catalog-card-image{
      position:relative;
      aspect-ratio:1/1;
      overflow:hidden;
      background:#f8f8f8;
      cursor:pointer;
    }
    .catalog-card-image img{
      width:100%;height:100%;object-fit:cover;
      display:block;
      transition:transform .35s ease;
    }
    .catalog-card:hover .catalog-card-image img{transform:scale(1.035)}
    .catalog-card-overlay{
      position:absolute;inset:auto 12px 12px 12px;
      display:flex;justify-content:flex-end;
      pointer-events:none;
    }
    .catalog-card-overlay span{
      background:var(--orange);color:#fff;border-radius:999px;
      padding:6px 11px;font-size:.72rem;font-weight:800;
      box-shadow:0 6px 18px rgba(255,106,0,.25);
    }
    .catalog-card-body{padding:18px 18px 20px}
    .catalog-card-body h5{font-weight:800;margin-bottom:7px}
    .catalog-card-body p{color:var(--muted);font-size:.84rem;line-height:1.6;margin-bottom:15px;min-height:54px}
    .catalog-card-btn{
      display:inline-flex;align-items:center;justify-content:center;gap:7px;
      width:100%;padding:10px 14px;border-radius:12px;
      background:var(--orange);color:#fff;font-weight:700;font-size:.84rem;
      transition:.2s ease;
    }
    .catalog-card-btn:hover{background:var(--orange-dark);color:#fff;transform:translateY(-1px)}

    /* Price List */
    .price-list-section{background:#fafafa}
    .price-card{
      height:100%;
      border:1px solid var(--line);
      border-radius:24px;
      padding:14px;
      background:#fff;
      overflow:hidden;
      transition:.3s ease;
      box-shadow:0 8px 25px rgba(0,0,0,.04);
    }
    .price-card:hover{
      transform:translateY(-7px);
      box-shadow:0 22px 55px rgba(0,0,0,.11);
      border-color:rgba(255,106,0,.3);
    }
    .price-card-image{
      position:relative;
      aspect-ratio:3/4;
      border-radius:17px;
      overflow:hidden;
      background:#2b2b2b;
      cursor:pointer;
    }
    .price-card-image img{
      width:100%;height:100%;object-fit:cover;
      display:block;
      transition:.45s ease;
    }
    .price-card:hover .price-card-image img{transform:scale(1.035)}
    .price-card-overlay{
      position:absolute;inset:auto 0 0;
      padding:45px 14px 14px;
      background:linear-gradient(transparent,rgba(0,0,0,.78));
      color:#fff;
      pointer-events:none;
    }
    .price-card-overlay span{
      display:inline-block;
      padding:5px 9px;
      border-radius:999px;
      background:var(--orange);
      font-size:.68rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .price-card-body{padding:16px 4px 3px}
    .price-card-body h5{font-weight:800;margin-bottom:6px}
    .price-card-body p{color:var(--muted);font-size:.84rem;line-height:1.6;margin-bottom:13px}
    .price-card-btn{
      display:flex;align-items:center;justify-content:center;gap:7px;
      width:100%;padding:10px 13px;border-radius:11px;
      background:var(--orange-soft);color:var(--orange-dark);
      font-size:.84rem;font-weight:800;
      transition:.25s ease;
    }
    .price-card-btn:hover{background:var(--orange);color:#fff}
    .price-modal .modal-content{border:0;border-radius:22px;overflow:hidden;background:#111}
    .price-modal .modal-header{border:0;background:#111;color:#fff}
    .price-modal .btn-close{filter:invert(1)}
    .price-modal .modal-body{padding:0;background:#111;text-align:center}
    .price-modal img{max-height:82vh;width:auto;max-width:100%;object-fit:contain}

    /* Portfolio */
    .portfolio-card{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      height:320px;
      background:#eee;
    }
    .portfolio-card img{
      width:100%;height:100%;object-fit:cover;
      transition:.5s;
    }
    .portfolio-card:hover img{transform:scale(1.06)}
    .portfolio-overlay{
      position:absolute;
      left:0;right:0;bottom:0;
      padding:22px;
      color:#fff;
      background:linear-gradient(transparent,rgba(0,0,0,.82));
    }
    .portfolio-overlay small{opacity:.75}

    /* Process */
    .process-item{position:relative;padding-left:72px;min-height:110px}
    .process-number{
      position:absolute;left:0;top:0;
      width:48px;height:48px;border-radius:50%;
      display:grid;place-items:center;
      background:var(--orange);color:#fff;
      font-weight:800;
      box-shadow:0 10px 25px rgba(255,106,0,.25);
    }
    .process-item:not(:last-child):before{
      content:"";
      position:absolute;
      left:23px;top:48px;height:70px;
      border-left:1px dashed #ddd;
    }
    .process-item h5{font-weight:800}
    .process-item p{color:var(--muted);font-size:.9rem;line-height:1.7}

    /* Dark CTA */
    .dark-cta{
      background:#111;
      color:#fff;
      border-radius:32px;
      padding:70px;
      position:relative;
      overflow:hidden;
    }
    .dark-cta:before{
      content:"";
      position:absolute;
      width:480px;height:480px;
      border-radius:50%;
      right:-160px;top:-250px;
      background:rgba(255,106,0,.22);
    }
    .dark-cta > *{position:relative;z-index:1}

    /* FAQ */
    .accordion-item{
      border:1px solid var(--line)!important;
      border-radius:16px!important;
      overflow:hidden;
      margin-bottom:12px;
    }
    .accordion-button{
      font-weight:700;
      padding:20px;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      color:var(--orange-dark);
      background:var(--orange-soft);
    }

    /* Contact */
    .contact-box{
      border:1px solid var(--line);
      border-radius:24px;
      padding:28px;
      height:100%;
      background:#fff;
    }
    .contact-row{
      display:flex;gap:14px;align-items:flex-start;
      margin-bottom:20px;
    }
    .contact-row i{color:var(--orange);font-size:1.2rem}
    .contact-row strong{display:block;font-size:.9rem}
    .contact-row span{color:var(--muted);font-size:.86rem;line-height:1.6}

    footer{
      background:#111;
      color:#fff;
      padding:60px 0 25px;
    }
    footer a{color:#a9a9a9}
    footer a:hover{color:#fff}
    footer p,footer li{color:#9d9d9d;font-size:.88rem;line-height:1.8}
    .footer-title{font-weight:800;margin-bottom:18px}
    .social{
      width:38px;height:38px;border:1px solid #333;border-radius:10px;
      display:inline-grid;place-items:center;margin-right:6px;
    }

    /* Floating WA */
    .wa-float{
      position:fixed;
      right:22px;bottom:22px;
      z-index:999;
      width:58px;height:58px;
      display:grid;place-items:center;
      border-radius:50%;
      background:#20c66a;color:#fff;
      font-size:1.65rem;
      box-shadow:0 15px 35px rgba(0,0,0,.2);
      transition:.25s;
    }
    .wa-float:hover{transform:scale(1.08);color:#fff}

    @media(max-width:991.98px){
      .hero{padding-top:125px}
      .hero-visual{margin-top:55px}
      .navbar .btn-orange{margin-top:10px}
      .stat{border-right:0;border-bottom:1px solid var(--line)}
      .stat:last-child{border-bottom:0}
      .dark-cta{padding:45px 28px}
    }
    @media(max-width:575.98px){
      .section-pad{padding:70px 0}
      .hero h1{font-size:3.25rem}
      .hero-main-card{height:360px}
      .hero-visual{min-height:410px}
      .floating-card{width:190px}
    }