/*
Theme Name: CetakKemasan
Theme URI: https://cetakkemasan.co.id
Author: Hanung Jati Purbakusuma
Description: Tema kustom mandiri pengganti Pithree (G5Theme) untuk cetakkemasan.co.id. Identitas visual dari setting tema lama: primary #ffa60a, sekunder #2c3e50, teks #8a8a8a, font Lato, header-2 + topbar.
Version: 1.0.11
Text Domain: cetakkemasan
*/

:root{
  --ck-primary:#ffa60a;
  --ck-secondary:#2c3e50;
  --ck-text:#555;
  --ck-muted:#8a8a8a;
  --ck-dark:#172737;
  --ck-dark2:#19394B;
  --ck-line:#e7e7e7;
  --ck-bgsoft:#f7f8f9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Lato',Arial,sans-serif;color:var(--ck-text);font-size:16px;line-height:1.65;background:#fff}
a{color:var(--ck-secondary);text-decoration:none}
a:hover{color:var(--ck-primary)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:'Lato',Arial,sans-serif;color:var(--ck-secondary);line-height:1.25;margin:0 0 .5em}
.ck-container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- Topbar ---------- */
.ck-topbar{background:var(--ck-secondary);color:#cfd8e0;font-size:13px}
.ck-topbar-in{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px;flex-wrap:wrap}
.ck-tb-item{margin-right:18px;white-space:nowrap}
.ck-tb-item a{color:#cfd8e0}
.ck-tb-item a:hover{color:var(--ck-primary)}
.ck-topbar-right .ck-tb-item{margin-right:0}

/* ---------- Header (background sama dengan footer — arahan Hanung 5 Nov) ---------- */
.ck-header{background:var(--ck-dark);box-shadow:0 1px 6px rgba(0,0,0,.25);position:relative;z-index:50}
.ck-header-in{display:flex;justify-content:space-between;align-items:center;min-height:84px;gap:20px}
.ck-logo img{max-height:62px;width:auto;display:block}
.ck-logo-text{font-size:26px;font-weight:900;color:#fff;letter-spacing:.3px}
.ck-logo-light{color:#fff}
.ck-menu{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.ck-menu li{position:relative}
.ck-menu a{display:block;padding:10px 14px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.4px;color:#dfe7ee}
.ck-menu a:hover,.ck-menu .current-menu-item>a{color:var(--ck-primary)}
.ck-menu ul{position:absolute;left:0;top:100%;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);list-style:none;margin:0;padding:8px 0;min-width:220px;display:none}
.ck-menu li:hover>ul{display:block}
.ck-menu ul a{text-transform:none;font-weight:400;color:var(--ck-secondary)}
.ck-nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.ck-nav-toggle span{display:block;width:26px;height:3px;background:#fff;margin:5px 0}

/* ---------- Hero slider ---------- */
.ck-hero{position:relative;height:560px;max-height:78vh;overflow:hidden;background:var(--ck-dark)}
.ck-hero-track{position:absolute;inset:0}
.ck-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;z-index:0}
.ck-hero-slide.is-active{opacity:1;z-index:1}
.ck-hero-slide.is-entering{z-index:2;animation:ckOverlay .95s cubic-bezier(.22,.61,.21,1) both}
@keyframes ckOverlay{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.ck-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(23,39,55,.45);color:#fff;border:0;width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer;z-index:3}
.ck-hero-arrow:hover{background:var(--ck-primary)}
.ck-hero-prev{left:18px}.ck-hero-next{right:18px}
.ck-hero-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px;z-index:3}
.ck-hero-dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.ck-hero-dots button.is-active{background:var(--ck-primary)}
.ck-hero-caption{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(15,26,38,.45) 0%,rgba(15,26,38,.18) 55%,rgba(15,26,38,0) 80%)}
.ck-hero-caption .ck-container{width:100%}
.ck-hero-line1{display:block;font-family:var(--ff,inherit);font-size:clamp(22px,3.2vw,var(--fs,40px));font-weight:800;color:var(--col,#fff);text-transform:uppercase;letter-spacing:.5px;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.ck-hero-line2{display:block;font-family:var(--ff,inherit);font-size:clamp(19px,2.7vw,var(--fs,35px));font-weight:800;color:var(--col,var(--ck-primary));text-transform:uppercase;line-height:1.2;margin-top:6px;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.ck-hero-caption p{font-family:var(--ff,inherit);color:var(--col,#eef3f6);font-size:var(--fs,16px);max-width:555px;margin:14px 0 22px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ck-hero-btns .ck-btn{font-family:var(--ff,inherit);font-size:var(--fs,13.5px);color:var(--col,#fff)}
.ck-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.ck-btn-ghost{background:transparent;border:2px solid #fff;color:#fff;padding:10px 28px}
.ck-btn-ghost:hover{background:#fff;color:var(--ck-secondary)}
/* Animasi teks hero — replikasi timeline RevSlider lama (masker + geser / huruf bergulir) */
.ck-mask{display:block;overflow:hidden}
.ck-hero-btns .ck-mask{display:inline-block}
.ck-hero-caption .ck-anim{display:block}
.ck-hero-btns .ck-anim{display:inline-block}
.ck-hero-slide [data-anim="slide"]{transform:translateX(calc(var(--dir,1)*110%))}
.ck-hero-slide.is-active [data-anim="slide"]{animation:ckSlideTxt var(--dur,.7s) cubic-bezier(.22,.8,.3,1) var(--delay,0s) both}
@keyframes ckSlideTxt{from{transform:translateX(calc(var(--dir,1)*110%))}to{transform:translateX(0)}}
.ck-hero-line1,.ck-hero-line2{perspective:600px}
.ck-word{display:inline-block;white-space:nowrap}
.ck-ch{display:inline-block;transform:translateX(calc(var(--dir,1)*130%)) rotateX(45deg) rotateZ(calc(var(--dir,1)*90deg));transform-origin:50% 100%}
.ck-hero-slide.is-active [data-anim="chars"] .ck-ch{animation:ckChIn 1.05s cubic-bezier(.77,0,.18,1) both;animation-delay:calc(var(--delay,0s) + var(--i)*45ms)}
@keyframes ckChIn{to{transform:translateX(0) rotateX(0deg) rotateZ(0deg)}}
[data-anim="charsup"] .ck-ch{transform:translateX(calc(var(--dir,1)*130%)) translateY(.65em) rotateX(45deg) rotateZ(calc(var(--dir,1)*90deg))}
.ck-hero-slide.is-active [data-anim="charsup"] .ck-ch{animation:ckChUp 1.05s cubic-bezier(.77,0,.18,1) both;animation-delay:calc(var(--delay,0s) + var(--i)*45ms)}
@keyframes ckChUp{to{transform:translateX(0) translateY(0) rotateX(0deg) rotateZ(0deg)}}
@media (prefers-reduced-motion:reduce){.ck-hero-slide .ck-anim,.ck-hero-slide .ck-ch,.ck-hero-slide.is-entering{transform:none!important;animation:none!important}}

/* ---------- Sections ---------- */
.ck-section{padding:70px 0}
.ck-section-dark{background:var(--ck-dark2);color:#d7dee4}
.ck-section-dark h2{color:#fff}
.ck-section-accent{background:var(--ck-bgsoft)}
.ck-sec-head{margin-bottom:42px}
.ck-align-center{text-align:center}
.ck-align-left{text-align:left}
.ck-sec-en{display:block;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--ck-primary);margin-bottom:6px}
.ck-sec-head h2{font-size:32px;font-weight:900;text-transform:uppercase}
.ck-sec-line{display:block;width:64px;height:3px;background:var(--ck-primary);margin-top:12px}
.ck-align-center .ck-sec-line{margin-left:auto;margin-right:auto}
.ck-center{text-align:center;margin-top:36px}

/* ---------- Grid & cards ---------- */
.ck-grid{display:grid;gap:26px}
.ck-grid-4{grid-template-columns:repeat(4,1fr)}
.ck-grid-3{grid-template-columns:repeat(3,1fr)}
.ck-card{background:#fff;border:1px solid var(--ck-line);display:flex;flex-direction:column}
.ck-card-img{display:block;position:relative;overflow:hidden}
.ck-card-img img{display:block;width:100%;height:210px;object-fit:cover;transition:transform .5s ease}
.ck-card:hover .ck-card-img img{transform:scale(1.06)}
.ck-card-body{padding:18px 20px 22px}
.ck-card-body h3{font-size:18px;margin-bottom:6px}
.ck-card-body p{margin:0;color:var(--ck-muted);font-size:14.5px}
.ck-card-overlay{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(23,39,55,.85));color:#fff;font-weight:700;padding:26px 16px 12px;font-size:15px;opacity:0;transition:opacity .3s}
.ck-card-portfolio .ck-card-img img{height:230px}
.ck-card-portfolio:hover .ck-card-overlay{opacity:1}
.ck-post-date{font-size:12.5px;color:var(--ck-primary);font-weight:700;text-transform:uppercase;letter-spacing:1px}

/* ---------- Buttons ---------- */
.ck-btn{display:inline-block;background:var(--ck-primary);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:13.5px;padding:13px 28px;border:0;cursor:pointer}
.ck-btn:hover{background:var(--ck-secondary);color:#fff}
.ck-btn-outline{background:transparent;color:var(--ck-secondary);border:2px solid var(--ck-secondary)}
.ck-btn-outline:hover{background:var(--ck-secondary);color:#fff}

/* ---------- About + counters ---------- */
.ck-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.ck-counters{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ck-counter{border:1px solid rgba(255,255,255,.25);padding:22px;text-align:center}
.ck-counter-num{display:block;font-size:40px;font-weight:900;color:var(--ck-primary)}
.ck-counter-label{display:block;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#d7dee4;margin-top:4px}

/* ---------- CTA form ---------- */
.ck-cta{max-width:760px}
.ck-cta h2{text-align:center;font-size:26px;margin-bottom:28px}
.ck-cta-form .wpcf7 input[type="text"],.ck-cta-form .wpcf7 input[type="email"],
.ck-cta-form .wpcf7 input[type="tel"],.ck-cta-form .wpcf7 textarea{
  width:100%;padding:12px 14px;border:1px solid #d5dbe0;margin-bottom:14px;font-family:inherit;font-size:15px;background:#fff}
.ck-cta-form .wpcf7 input[type="submit"]{background:var(--ck-primary);color:#fff;border:0;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:13px 34px;cursor:pointer}
.ck-cta-form .wpcf7 input[type="submit"]:hover{background:var(--ck-secondary)}

/* ---------- Partners ---------- */
.ck-partner-row{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;align-items:center}
.ck-partner-row img{max-height:64px;width:auto;filter:grayscale(100%);opacity:.75;transition:.3s}
.ck-partner-row img:hover{filter:none;opacity:1}

/* ---------- Banner & content ---------- */
.ck-banner{background:var(--ck-dark2);padding:52px 0}
.ck-banner h1{color:#fff;font-size:32px;font-weight:900;text-transform:uppercase;margin:0}
.ck-content{max-width:860px}
.ck-content p{margin:0 0 1.1em}
.ck-content img{margin:10px 0}
.ck-single-grid{display:grid;grid-template-columns:1fr 320px;gap:46px;align-items:start}
.ck-single-img{width:100%;margin-bottom:22px}
.ck-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.ck-gallery img{width:100%;height:170px;object-fit:cover;display:block}
.ck-side-box{border:1px solid var(--ck-line);padding:20px 22px;margin-bottom:22px}
.ck-side-box h4{font-size:16px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--ck-primary);padding-bottom:8px}
.ck-side-box ul{list-style:none;margin:0;padding:0}
.ck-side-box li{padding:6px 0;border-bottom:1px solid var(--ck-line)}
.ck-side-box li:last-child{border-bottom:0}
.ck-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.ck-filter a{padding:9px 18px;border:1px solid var(--ck-line);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ck-secondary)}
.ck-filter a:hover{border-color:var(--ck-primary);color:var(--ck-primary)}
.ck-filter a.is-active{background:var(--ck-primary);border-color:var(--ck-primary);color:#fff}
.ck-post-meta{color:var(--ck-muted);font-size:14px}
.ck-post-nav{display:flex;justify-content:space-between;margin-top:36px;border-top:1px solid var(--ck-line);padding-top:18px}
.ck-article{max-width:820px}

/* ---------- Footer ---------- */
.ck-footer{background:var(--ck-dark);color:#b9c4cd;margin-top:0}
.ck-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:60px 20px 44px}
.ck-footer h4{color:#fff;font-size:16px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px}
.ck-footer a{color:#b9c4cd}
.ck-footer a:hover{color:var(--ck-primary)}
.ck-footer-logo{max-height:56px;width:auto;margin-bottom:14px}
.ck-fmenu{list-style:none;margin:0;padding:0}
.ck-fmenu li{padding:5px 0}
.ck-fcontact{list-style:none;margin:0;padding:0}
.ck-fcontact li{padding:5px 0}
.ck-copyright{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:13.5px;text-align:center}

/* ---------- Konten hasil transformasi (T3) ---------- */
.ck-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:30px}
.ck-cols-21{display:grid;grid-template-columns:2fr 1fr;gap:44px;margin-bottom:34px}
.ck-cols h2,.ck-cols-21 h4{margin-top:0}
.ck-showcase{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:10px 0 34px}
.ck-showcase figure{margin:0;border:1px solid var(--ck-line)}
.ck-showcase img{width:100%;height:150px;object-fit:cover;display:block;margin:0}
.ck-showcase figcaption{padding:10px 12px}
.ck-showcase figcaption strong{display:block;color:var(--ck-secondary);font-size:14.5px}
.ck-showcase figcaption span{font-size:12.5px;color:var(--ck-muted)}
.ck-quote{background:var(--ck-dark2);color:#d7dee4;padding:34px 38px;margin:0 0 34px}
.ck-quote h2{color:#fff;margin-top:0}
.ck-quote p{margin:0}
.ck-testis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:10px 0 10px}
.ck-testi{margin:0;border:1px solid var(--ck-line);border-top:3px solid var(--ck-primary);padding:20px 22px;background:#fff}
.ck-testi p{font-style:italic;margin:0 0 12px}
.ck-testi footer{font-size:13.5px;color:var(--ck-muted)}
.ck-testi footer strong{color:var(--ck-secondary)}
.ck-contact-list{list-style:none;margin:0;padding:0}
.ck-contact-list li{padding:8px 0;border-bottom:1px solid var(--ck-line)}
.ck-map iframe{width:100%;display:block}
.ck-spec{list-style:none;margin:0;padding:0}
.ck-spec li{padding:6px 0;border-bottom:1px solid var(--ck-line)}
.ck-spec li:last-child{border-bottom:0}
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 textarea{width:100%;padding:11px 13px;border:1px solid #d5dbe0;margin-bottom:12px;font-family:inherit;font-size:15px}
.wpcf7 input[type="submit"]{background:var(--ck-primary);color:#fff;border:0;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:12px 30px;cursor:pointer}
.wpcf7 input[type="submit"]:hover{background:var(--ck-secondary)}
@media (max-width:991px){.ck-cols,.ck-cols-21{grid-template-columns:1fr}.ck-showcase{grid-template-columns:repeat(2,1fr)}.ck-testis{grid-template-columns:1fr}}

/* ---------- Responsive (breakpoint tema lama: 991px) ---------- */
@media (max-width:991px){
  .ck-grid-4{grid-template-columns:repeat(2,1fr)}
  .ck-grid-3{grid-template-columns:repeat(2,1fr)}
  .ck-about-grid,.ck-single-grid{grid-template-columns:1fr}
  .ck-footer-grid{grid-template-columns:1fr 1fr}
  .ck-hero{height:420px}
  .ck-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ck-dark);box-shadow:0 12px 24px rgba(0,0,0,.3)}
  .ck-nav.is-open{display:block}
  .ck-menu{flex-direction:column;padding:10px 20px 16px}
  .ck-nav-toggle{display:block}
  .ck-header-in{position:relative}
}
@media (max-width:560px){
  .ck-grid-4,.ck-grid-3{grid-template-columns:1fr}
  .ck-footer-grid{grid-template-columns:1fr}
  .ck-counters{grid-template-columns:1fr 1fr}
  .ck-hero{height:320px}
  .ck-hero-caption p{display:none}
  .ck-hero-arrow{width:38px;height:38px;font-size:22px}
  .ck-topbar-in{justify-content:center;text-align:center}
  .ck-section{padding:48px 0}
}