/* ============================================================
   CAUS — KATALOG PAGE (katalog.html)
   Hero (the catalogue drawn as a two-view technical drawing),
   page viewer (spreads, thumbnails, zoom), contents index and the
   QR / share block. Builds only on the tokens in base.css; nothing
   here is used by any other page.
============================================================ */

body.kat-page{background:var(--navy-950);}

/* current page in the nav */
.nav-links a[aria-current="page"]{color:#fff;}
.nav-links a[aria-current="page"]::after{width:100%;background:var(--cyan);}
#nav.on-light .nav-links a[aria-current="page"]{color:var(--ink);}
#nav.on-light .nav-links a[aria-current="page"]::after{background:var(--blue);}
#mobile-nav a[aria-current="page"]{color:var(--cyan);}

#kat-hero,#incele,#kat-icerik,#kat-paylas{position:relative;z-index:5;}
#incele,#kat-icerik{scroll-margin-top:0;}

/* ============================================================
   01 — HERO
============================================================ */
#kat-hero{
  background:var(--navy-950);color:#fff;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(40px,6vw,96px));
  padding-bottom:clamp(72px,8vw,128px);
}
/* blueprint grid, strongest behind the drawing */
.kh-bg{position:absolute;inset:0;pointer-events:none;}
.kh-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px);
  -webkit-mask-image:radial-gradient(ellipse 58% 78% at 74% 50%, #000 0%, transparent 74%);
  mask-image:radial-gradient(ellipse 58% 78% at 74% 50%, #000 0%, transparent 74%);
}
.kh-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 30% 44% at 72% 52%, rgba(57,195,242,.14), transparent 70%);
}

.kh-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,96px);align-items:center;}
.kh-copy{min-width:0;container-type:inline-size;}

/* The title: same face, width and colour run as the printed cover
   (Archivo expanded black, white -> cyan from top to bottom). Sized
   off the column (cqi) so the longest line always fills it. */
.kh-title{
  margin:26px 0 0;
  font-family:'Archivo','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:900;font-stretch:125%;
  font-size:clamp(40px,5.6vw,100px);
  font-size:clamp(38px,14.1cqi,124px);
  line-height:.96;letter-spacing:-0.035em;
  padding-top:.08em;
  background:linear-gradient(180deg,#ffffff 0%,#f2fbff 26%,#bfe9fb 54%,#6fcdf5 80%,#2fb3ec 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.kh-title span{display:block;white-space:nowrap;}
/* "EQUIPMENT / CATALOGUE" runs ~12% wider than "EKİPMAN / KATALOĞU" */
html[lang="en"] .kh-title{font-size:clamp(36px,5vw,92px);font-size:clamp(34px,12.7cqi,116px);}

.kh-lead{margin-top:28px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.65;color:rgba(255,255,255,.72);max-width:46ch;}
.kh-ctas{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;}
.btn .ic-dl{width:15px;height:15px;}
.btn:hover .ic-dl{transform:translateY(2px);}

.kh-spec{margin:46px 0 0;padding:0;display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);}
.kh-spec div{padding:18px 30px 0 0;margin-right:30px;border-right:1px solid rgba(255,255,255,.12);}
.kh-spec div:last-child{border-right:none;margin-right:0;}
.kh-spec dt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);}
.kh-spec dd{margin:8px 0 0;font-size:15px;font-weight:600;color:#fff;letter-spacing:.01em;white-space:nowrap;}

/* ---------- the drawing ---------- */
.kh-visual{position:relative;display:flex;justify-content:center;min-width:0;}
.kh-dwg{
  --cw:clamp(220px,25vw,400px);            /* front view width  (210 mm) */
  --ch:calc(var(--cw) * 1.41428);          /* front view height (297 mm) */
  --sw:max(5px, calc(var(--cw) * .014));   /* side view: 24 pages */
  --gap:calc(var(--cw) * .11);
  position:relative;display:grid;
  grid-template-columns:var(--cw) var(--gap) var(--sw) 58px;
  grid-template-rows:48px var(--ch) 50px;
  color:rgba(57,195,242,.72);
}
.kd-dim{position:relative;}
.kd-dim span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:0 9px;background:var(--navy-950);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--cyan);
}
.kd-dim i{position:absolute;width:1px;height:12px;background:currentColor;transform:rotate(45deg);}
/* width: dimension line + extension lines down to the sheet */
.kd-dim-w{grid-column:1;grid-row:1;}
.kd-dim-w::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;}
.kd-dim-w::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 8px);bottom:5px;border-left:1px solid currentColor;border-right:1px solid currentColor;opacity:.55;}
.kd-dim-w i{top:calc(50% - 6px);}
.kd-dim-w i:first-of-type{left:-.5px;}
.kd-dim-w i:last-of-type{right:-.5px;}
/* height: measured on the side view */
.kd-dim-h{grid-column:4;grid-row:2;}
.kd-dim-h::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:currentColor;}
.kd-dim-h::after{content:"";position:absolute;top:0;bottom:0;left:5px;right:calc(50% - 8px);border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.55;}
.kd-dim-h i{left:50%;margin-left:-.5px;}
.kd-dim-h i:first-of-type{top:-6px;}
.kd-dim-h i:last-of-type{bottom:-6px;}
.kd-dim-h span{transform:translate(-50%,-50%) rotate(-90deg);}
/* projection lines front -> side */
.kd-proj{grid-column:2;grid-row:2;border-top:1px dashed currentColor;border-bottom:1px dashed currentColor;opacity:.4;margin:0 4px;}
.kd-side{
  grid-column:3;grid-row:2;
  background:
    linear-gradient(90deg,#0a1520 0 1px, transparent 1px calc(100% - 1px), #0a1520 calc(100% - 1px)),
    repeating-linear-gradient(90deg,#c9d0d4 0 1px,#8b949a 1px 2px);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.8);
}
.kd-cap{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46);line-height:1.6;align-self:end;}
.kd-cap-a{grid-column:1;grid-row:3;}
.kd-cap-b{grid-column:3 / 5;grid-row:3;white-space:nowrap;}

.kd-cover{
  grid-column:1;grid-row:2;position:relative;display:block;padding:0;border:0;
  background:#020406;cursor:zoom-in;
  box-shadow:0 46px 80px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.kd-cover img{width:100%;height:100%;object-fit:cover;}
.kd-cover:hover{transform:translateY(-6px);box-shadow:0 64px 96px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(57,195,242,.38);}
.kd-cover:focus-visible{outline:2px solid var(--cyan);outline-offset:5px;}
.kd-zoom{
  position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:rgba(6,10,16,.78);border:1px solid rgba(57,195,242,.45);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.kd-zoom svg{width:13px;height:13px;color:var(--cyan);}
.kd-cover:hover .kd-zoom,.kd-cover:focus-visible .kd-zoom{opacity:1;transform:none;}

@media (max-width:960px){
  .kh-grid{grid-template-columns:minmax(0,1fr);}
  .kh-visual{justify-content:flex-start;}
  .kh-dwg{--cw:clamp(200px,52vw,380px);}
  .kh-bg::before{
    -webkit-mask-image:radial-gradient(ellipse 90% 50% at 40% 72%, #000 0%, transparent 74%);
    mask-image:radial-gradient(ellipse 90% 50% at 40% 72%, #000 0%, transparent 74%);
  }
  .kh-bg::after{background:radial-gradient(ellipse 60% 30% at 34% 74%, rgba(57,195,242,.14), transparent 70%);}
}
@media (max-width:520px){
  .kh-dwg{--cw:min(60vw,260px);grid-template-columns:var(--cw) var(--gap) var(--sw) 50px;}
  .kh-spec div{padding-right:18px;margin-right:18px;}
  .kh-ctas .btn{flex:1 1 auto;justify-content:center;}
}

/* ============================================================
   02 — VIEWER
============================================================ */
#incele{background:var(--navy-900);color:#fff;}
.kv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:34px;}
.kv-head h2{margin-top:14px;font-size:clamp(28px,3.4vw,44px);color:#fff;letter-spacing:-0.02em;line-height:1.12;max-width:20ch;}
.kv-head p{margin-top:14px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.55);max-width:58ch;}

.kv{--kvh:clamp(380px, calc(100vh - 250px), 840px);}
@supports (height:100svh){ .kv{--kvh:clamp(380px, calc(100svh - 250px), 840px);} }

.kv-stage{
  position:relative;height:var(--kvh);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(ellipse 62% 70% at 50% 46%, rgba(57,195,242,.07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px),
    var(--navy-950);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.kv-book{position:relative;width:min(calc(100% - 156px), calc((var(--kvh) - 64px) * 1.41404));aspect-ratio:1588 / 1123;}
.kv.single .kv-book{width:min(calc(100% - 132px), calc((var(--kvh) - 48px) * .70702));aspect-ratio:794 / 1123;}
.kv-leaf{position:absolute;inset:0;}
.kv-pg{
  position:absolute;top:0;bottom:0;width:50%;padding:0;border:0;display:block;
  background:#020406;cursor:zoom-in;overflow:hidden;
  box-shadow:0 34px 60px -24px rgba(0,0,0,.8);
}
.kv-pg.l{left:0;}
.kv-pg.r{left:50%;}
.kv-pg.c{left:25%;}
.kv.single .kv-pg{left:0;width:100%;}
.kv-pg::before{
  content:attr(data-n);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.22);
}
.kv-pg img{position:relative;width:100%;height:100%;object-fit:cover;}
/* the fold: shade both pages towards the spine */
.kv-pg.l::after,.kv-pg.r::after{content:"";position:absolute;top:0;bottom:0;width:10%;pointer-events:none;}
.kv-pg.l::after{right:0;background:linear-gradient(to left, rgba(0,0,0,.46), rgba(0,0,0,.12) 35%, transparent);}
.kv-pg.r::after{left:0;background:linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.14) 35%, transparent);}
.kv-pg:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;z-index:2;}

.kv-btn{
  position:absolute;top:50%;z-index:3;width:54px;height:54px;margin-top:-27px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(6,10,16,.6);border:1px solid rgba(255,255,255,.22);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out);
}
.kv-btn svg{width:20px;height:20px;}
.kv-btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(6,10,16,.8);}
.kv-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.kv-btn[disabled]{opacity:.22;pointer-events:none;}
.kv-btn.prev{left:22px;}
.kv-btn.next{right:22px;}

.kv-noscript{padding:30px;text-align:center;color:rgba(255,255,255,.7);font-size:15px;}
.kv-noscript a{color:var(--cyan);border-bottom:1px solid currentColor;}

.kv-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.kv-count{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.5);white-space:nowrap;min-width:9ch;}
.kv-count b{font-weight:600;color:var(--cyan);}
.kv-title{font-size:14px;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kv-tools{display:flex;gap:8px;}
.kv-tool{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border:1px solid rgba(255,255,255,.2);background:none;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.kv-tool svg{width:15px;height:15px;}
.kv-tool:hover{border-color:var(--cyan);color:var(--cyan);}

.kv-thumbs{display:flex;justify-content:center;gap:5px;overflow-x:auto;padding:18px 2px 6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;}
.kv-th{flex:1 1 0;min-width:44px;max-width:62px;padding:0;border:0;background:none;text-align:left;color:rgba(255,255,255,.42);opacity:.55;transition:opacity .3s var(--ease-out), color .3s var(--ease-out);}
.kv-th.sp{margin-left:9px;}
.kv-th img{width:100%;height:auto;aspect-ratio:794 / 1123;object-fit:cover;outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;background:#020406;}
.kv-th span{display:block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;}
.kv-th:hover{opacity:1;}
.kv-th.on{opacity:1;color:var(--cyan);}
.kv-th.on img{outline:2px solid var(--cyan);outline-offset:-2px;}
.kv-th:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;opacity:1;}

@media (max-width:1180px){ .kv-thumbs{justify-content:flex-start;} }
@media (max-width:899px){
  .kv-book{width:min(calc(100% - 124px), calc((var(--kvh) - 48px) * .70702));}
}
@media (max-width:640px){
  #incele .wrap{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));}
  .kv-head{padding:0 8px;}
  .kv-stage{height:auto;padding:12px 0;}
  .kv.single .kv-book{width:calc(100% - 24px);}
  .kv-btn{width:42px;height:42px;margin-top:-21px;}
  .kv-btn svg{width:17px;height:17px;}
  .kv-btn.prev{left:6px;}
  .kv-btn.next{right:6px;}
  .kv-bar{grid-template-columns:auto minmax(0,1fr);gap:10px 16px;padding:14px 4px;}
  .kv-tools{justify-self:end;}
  .kv-title{grid-column:1 / -1;grid-row:2;white-space:normal;font-size:13.5px;line-height:1.4;}
  .kv-tool{height:36px;padding:0 12px;}
  .kv-thumbs{scroll-snap-type:x proximity;}
  .kv-th{flex:0 0 46px;scroll-snap-align:center;}
}

/* ---------- zoom ---------- */
.kv-lb{
  position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;
  background:rgba(3,6,10,.975);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out), visibility .3s;
}
.kv-lb.open{opacity:1;visibility:visible;}
.kv-lb-top{
  flex:none;display:flex;align-items:center;gap:20px;height:64px;color:#fff;
  padding:0 max(16px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  padding-top:env(safe-area-inset-top);box-sizing:content-box;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kv-lb-count{font-size:12.5px;letter-spacing:.08em;color:var(--cyan);white-space:nowrap;}
.kv-lb-title{flex:1;min-width:0;font-size:14px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kv-lb-close{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;transition:border-color .3s, color .3s;}
.kv-lb-close svg{width:18px;height:18px;}
.kv-lb-close:hover{border-color:var(--cyan);color:var(--cyan);}
.kv-lb-scroll{flex:1;min-height:0;overflow:auto;display:flex;padding:20px 20px calc(20px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;}
.kv-lb.zoomed .kv-lb-scroll{touch-action:auto;}
.kv-lb-scroll img{
  margin:auto;flex:none;width:auto;height:auto;
  max-width:100%;max-height:100%;
  background:#020406;cursor:zoom-in;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.kv-lb.zoomed .kv-lb-scroll img{max-width:none;max-height:none;cursor:zoom-out;}
.kv-lb .kv-btn{margin-top:0;transform:translateY(-50%);top:calc(50% + 32px);}
.kv-lb-hint{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;transition:opacity .4s;}
.kv-lb.zoomed .kv-lb-hint{opacity:0;}
@media (max-width:640px){
  .kv-lb .kv-btn{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:none;}
  .kv-lb-scroll{padding:12px 12px calc(84px + env(safe-area-inset-bottom));}
  .kv-lb-hint{display:none;}
}

/* ============================================================
   03 — CONTENTS (light)
============================================================ */
#kat-icerik{background:var(--paper);color:var(--ink);}
.ki-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px 60px;align-items:end;padding-bottom:44px;margin-bottom:56px;border-bottom:1px solid var(--line);}
.ki-head h2{margin-top:14px;font-size:clamp(28px,3.4vw,44px);letter-spacing:-0.02em;line-height:1.12;}
.ki-head p{font-size:15px;line-height:1.65;color:var(--ink-soft);}
/* 4 columns: [intro][01][02 ——————]  [03][04][05][06]  [07][end ————][PDF] */
.ki-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:60px 40px;align-items:start;}
.ki-ch{min-width:0;}
.ki-ch.wide{grid-column:span 2;}
.ki-ch.wide .ki-list{columns:2;column-gap:40px;}
.ki-ch.wide .ki-list li{break-inside:avoid;}
.ki-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;min-height:94px;padding-bottom:16px;border-bottom:2px solid var(--ink);}
.ki-n{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--blue);}
.ki-n em{font-style:normal;font-weight:500;color:var(--gray-500);margin-left:10px;}
.ki-top h3{margin-top:8px;font-size:18px;font-weight:600;line-height:1.28;letter-spacing:-0.01em;text-wrap:balance;}
.ki-th{flex:none;width:46px;height:auto;aspect-ratio:794 / 1123;object-fit:cover;box-shadow:0 10px 18px -8px rgba(10,14,19,.45);}
.ki-list{list-style:none;margin:0;padding:0;}
.ki-list a{
  position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:baseline;gap:12px;
  padding:12px 4px 12px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.4;color:var(--ink);
  transition:color .25s var(--ease-out), background .25s var(--ease-out);
}
.ki-code{font-size:11px;letter-spacing:.04em;color:var(--gray-500);}
.ki-pg{font-size:12px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:6px;}
.ki-pg::before{
  content:"";width:12px;height:1px;background:currentColor;opacity:0;transform:translateX(-6px);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.ki-list a:hover{color:var(--blue);background:linear-gradient(90deg, rgba(10,111,174,.06), transparent 80%);}
.ki-list a:hover .ki-pg::before{opacity:1;transform:none;}
.ki-list a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
/* the PDF tile closes the grid */
.ki-pdf{
  position:relative;min-width:0;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;
  padding:28px 26px 26px;background:var(--navy-950);color:#fff;overflow:hidden;
}
.ki-pdf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 85% 10%, #000, transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 85% 10%, #000, transparent 70%);
}
.ki-pdf > *{position:relative;}
.ki-pdf-cover{width:64px;height:auto;aspect-ratio:794 / 1123;box-shadow:0 14px 26px -10px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);}
.ki-pdf-meta{margin-top:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
.ki-pdf h3{margin-top:10px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:#fff;max-width:16ch;}
.ki-pdf .btn-line{margin-top:auto;padding-top:22px;color:#fff;}
@media (max-width:1180px){
  .ki-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .ki-head{grid-template-columns:minmax(0,1fr);}
  .ki-grid{grid-template-columns:minmax(0,1fr);gap:44px;}
  .ki-ch.wide{grid-column:auto;}
  .ki-ch.wide .ki-list{columns:1;}
}

/* ============================================================
   04 — QR + SHARE (dark card on paper)
============================================================ */
#kat-paylas{background:var(--paper);color:var(--ink);padding-bottom:clamp(90px,11vw,150px);}
.kp-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding:clamp(28px,4.6vw,68px);background:var(--navy-950);color:#fff;
}
.kp-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 56px);
  -webkit-mask-image:radial-gradient(ellipse 46% 90% at 14% 50%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 46% 90% at 14% 50%, #000 0%, transparent 72%);
}
.kp-qr,.kp-body{position:relative;}
.kp-qr{display:flex;flex-direction:column;align-items:center;gap:16px;}
.kp-qr-box{
  width:clamp(180px,17vw,236px);padding:8px;background:#fff;border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 26px 50px -18px rgba(0,0,0,.8), 0 0 70px rgba(57,195,242,.2);
}
.kp-qr-box img{width:100%;height:auto;}
.kp-qr-cap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;}
.kp-body{min-width:0;}
.kp-body h2{margin-top:14px;font-size:clamp(24px,2.7vw,36px);letter-spacing:-0.015em;line-height:1.16;max-width:21ch;color:#fff;}
.kp-body p{margin-top:14px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.62);max-width:54ch;}
.kp-url{margin-top:18px;font-size:13px;letter-spacing:.04em;color:var(--cyan);word-break:break-all;}
.kp-actions{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:600px;}
.kp-act{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;
  border:1px solid rgba(255,255,255,.18);background:none;color:#fff;text-align:left;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  transition:border-color var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out);
}
.kp-act svg{width:18px;height:18px;flex:none;color:var(--cyan);transition:color var(--dur-s) var(--ease-out);}
.kp-act:hover{border-color:var(--cyan);background:rgba(57,195,242,.07);}
.kp-act:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.kp-act.done{border-color:var(--green);}
.kp-act.done svg{color:var(--green);}
.kp-svg{display:inline-block;margin-top:18px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.25);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .3s, border-color .3s;}
.kp-svg:hover{color:#fff;border-color:#fff;}

.kp-quote{margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;}
.kp-quote h3{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-0.012em;line-height:1.25;}
.kp-quote p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:60ch;}
.kp-quote .btn-primary:hover{background:var(--ink);color:#fff;}

@media (max-width:860px){
  .kp-card{grid-template-columns:minmax(0,1fr);}
  .kp-qr{align-items:flex-start;}
  .kp-card::before{
    -webkit-mask-image:radial-gradient(ellipse 90% 40% at 20% 18%, #000 0%, transparent 72%);
    mask-image:radial-gradient(ellipse 90% 40% at 20% 18%, #000 0%, transparent 72%);
  }
}
@media (max-width:560px){
  .kp-actions{grid-template-columns:minmax(0,1fr);}
  .kp-quote .btn{width:100%;justify-content:center;}
}

@media (prefers-reduced-motion: reduce){
  .kd-cover,.kd-zoom,.kv-lb,.kv-th,.ki-list a{transition:none !important;}
}