/*
 * canik – OFFLINE.Boxes box types (Canik\*). Written via the MCP server.
 * Classes are prefixed "cbx-" so they never clash with the theme.
 */
.cbx-btn{display:inline-block;margin-top:26px;padding:14px 35px 13px;border:2px solid currentColor;font-weight:700;font-size:11px;letter-spacing:.15em;line-height:1;text-transform:uppercase;color:inherit;text-decoration:none;transition:background .3s,color .3s}
.cbx-btn:hover{background:#fff;color:#000}

/* Hero slider */
.cbx-hero{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#000;color:#fff}
.cbx-hero__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s 1.2s}
.cbx-hero__slide.is-active{opacity:1;visibility:visible;z-index:1;transition:opacity 1.2s ease}
.cbx-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 8s ease-out}
.cbx-hero__slide.is-active .cbx-hero__bg{transform:scale(1)}
.cbx-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.65) 100%)}
.cbx-hero__text{position:relative;max-width:780px;padding:0 30px;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .9s ease .4s,transform .9s ease .4s}
.cbx-hero__slide.is-active .cbx-hero__text{opacity:1;transform:none}
.cbx-hero__eyebrow{font-size:12px;letter-spacing:.35em;text-transform:uppercase;opacity:.75}
.cbx-hero__title{margin:14px 0 0;font-family:'Dosis',sans-serif;font-size:clamp(30px,5vw,62px);line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.cbx-hero__line{width:70px;height:4px;margin:18px auto;background:#f57128}
.cbx-hero__lead{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:17px;line-height:1.7;opacity:.9}
.cbx-hero__arrow{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:18px;line-height:46px;text-align:center;text-decoration:none;transition:background .3s,border-color .3s}
.cbx-hero__arrow:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cbx-hero__arrow--prev{left:30px}
.cbx-hero__arrow--next{right:30px}
.cbx-hero__dots{position:absolute;left:0;right:0;bottom:40px;z-index:2;display:flex;justify-content:center;gap:12px}
.cbx-hero__dot{width:34px;height:3px;background:rgba(255,255,255,.35);transition:background .3s}
.cbx-hero__dot.is-active,.cbx-hero__dot:hover{background:#fff}
@media (max-width:767px){.cbx-hero__arrow{display:none}}
@media (prefers-reduced-motion:reduce){.cbx-hero__slide,.cbx-hero__bg,.cbx-hero__text{transition:none}}

/* Steps */
.cbx-steps{padding:90px 0;background:#fff;color:#000}
.cbx-steps__title{font-family:'Dosis',sans-serif;font-size:32px;letter-spacing:.08em;text-transform:uppercase;color:#000}
.cbx-steps .separator{background:#000}
.cbx-steps__intro{max-width:620px;margin:18px auto 0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:16px;color:#666}
.cbx-steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:50px;text-align:left}
.cbx-step{position:relative;padding:36px 26px 28px;background:#f9f9f9;border:1px solid #eee;transition:transform .3s,box-shadow .3s}
.cbx-step:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.cbx-step__num{position:absolute;top:14px;right:18px;font-family:'Dosis',sans-serif;font-size:52px;font-weight:700;line-height:1;color:#e6e6e6}
.cbx-step h4{position:relative;margin:0 0 12px;font-family:'Dosis',sans-serif;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#000}
.cbx-step p{position:relative;margin:0;font-size:14px;line-height:1.7;color:#666}
.cbx-step__code{display:block;margin-top:18px;padding:10px 12px;background:#292929;color:#f57128;font-family:Menlo,Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-word}

/* Call to action */
.cbx-cta{position:relative;overflow:hidden;padding:130px 30px;background:#000;color:#fff;text-align:center}
.cbx-cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-attachment:fixed}
.cbx-cta__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.cbx-cta__inner{position:relative;max-width:720px;margin:0 auto}
.cbx-cta__inner h2{font-family:'Dosis',sans-serif;font-size:clamp(26px,4vw,44px);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.cbx-cta__inner .subtitle{font-size:18px}
@media (max-width:1024px){.cbx-cta__bg{background-attachment:scroll}}