/* Kartvizit stüdyosu (/kartvizit, 27.10.2026). Kaynak örnek: baskici/marka/elit/kartvizit-studyo.html.
   v2 (27.10.2026) onaylı tasarım: baskici/marka/elit/mobil-secenek/secenek-6.html + mobil-urunler/pages/kartvizit.html.
   Telefon (≤ 1023 px): başlık + boyut notu, ortada kart (yanlarda öteki kâğıtlar, oklar), kâğıt adı + kâğıt sekmeleri; altında beyaz yaprak:
   Baskı / Köşe / Kaplama simgeli kutucuklar tek satırda, adet fiyat kutucukları (seçili ✓, birim fiyat) + amaç satırı, simgeli Hız kutucukları,
   KDV dahil anahtarı; en altta beyaz fiyat çubuğu (toplam + Sepete ekle) ortak sekme çubuğunun (layout .u-tabbar, --u-tabbar-h) üstünde.
   Masaüstü (≥ 1024 px): aynı dil iki sütunda — solda sahne ve kâğıtlar, sağda yaprak beyaz panel, fiyat çubuğu panelin içinde; tek ekran.
   Yalnız kartvizit sayfasında yüklenir (resources/views/products/kartvizit.blade.php). Bütün sınıflar ks- ile başlar.
   html.ks-js: sayfa başında satır içi betik koyar; stüdyo başlatılamazsa kartvizit-studyo.js kaldırır ve sayfa eski haline (product.js fişi) döner.
   JavaScript yoksa stüdyo hiç görünmez; başlık bandı (H1) ve alttaki içerik olduğu gibi kalır.
   Renk: lacivert, kâğıt, beyaz, kurşun, ince çizgiler; kırmızı yalnız aynı gün saatinde. Gradyan yalnız kâğıt ışığında ve kaplama simgesinde. */

/* Parlak selefonun ışık bandı: konumu canlandırılabilsin diye kayıtlı özellik */
@property --ks-sx{syntax:"<percentage>";inherits:true;initial-value:130%}

/* ---------- Stüdyonun yerine geçtiği parçalar: yalnız stüdyo çalışırken gizlenir ----------
   (ortak sahne .u-stage da: kartvizitte sahne stüdyonun kendisi) */
html.ks-js .ppage-slip>.pb-hero,
html.ks-js .ppage-slip>#config,
html.ks-js .ppage-slip .u-stage,
html.ks-js #mbar{display:none!important}
/* Kırıntı ve başlık öteki ürün sayfalarının (urun-v2.css .ppage-u2) hizasında */
html.ks-js .ppage-slip>.crumbs{padding-block:16px 0;align-items:baseline}

/* ---------- Değişkenler ---------- */
.ks,.ks-bar{--ks-serif:"Newsreader",Georgia,"Times New Roman",serif;--ks-sans:var(--f,"Inter Tight",system-ui,sans-serif);--ks-mono:var(--f-mono,"IBM Plex Mono",ui-monospace,monospace);
  --ks-ink:var(--ink,#10263B);--ks-paper:var(--paper,#F5F3EE);--ks-lead:var(--lead,#6B6964);--ks-line:var(--line,#DED9CF);--ks-line2:var(--line-2,#C8C1B4);--ks-soft:var(--soft,#ECE8E0);--ks-red:var(--red,#E3262E);
  --ks-kraft:#BDA382;
  --ks-sh-sm:0 1px 2px rgba(16,38,59,.06),0 4px 12px rgba(16,38,59,.08);
  --ks-sh-md:0 2px 6px rgba(16,38,59,.06),0 12px 32px rgba(16,38,59,.14);
  --ks-ease:cubic-bezier(.2,.7,.15,1);      /* hızlı başlar, yumuşak durur */
  --ks-ease2:cubic-bezier(.45,.05,.2,1);    /* kart çevirme: iki ucu yumuşak */
  --ks-t:420ms}
.ks{--tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .063 0 0 0 0 .149 0 0 0 0 .231 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  --tooth-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .95 0 0 0 0 .93 0 0 0 .7 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .19 0 0 0 0 .10 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --fleck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .15 0 0 0 0 .08 0 0 0 4.6 -2.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5 .04' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .41 0 0 0 0 .39 0 0 0 1.2 -.55'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 1.5' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .41 0 0 0 0 .39 0 0 0 1.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  color:var(--ks-ink);font-family:var(--ks-sans)}

/* ---------- Temel ---------- */
.ks{display:none}
html.ks-js .ks{display:grid}
:where(.ks,.ks-bar) p,:where(.ks) h1{margin:0}
:where(.ks,.ks-bar) button{font:inherit;color:inherit;margin:0}
.ks :focus-visible,.ks-bar :focus-visible{outline:2px solid var(--ks-red);outline-offset:2px}
.ks-it{font-family:var(--ks-serif);font-style:italic;font-weight:400}
.ks-num{font-variant-numeric:tabular-nums lining-nums}
.ks-lbl{font:600 12px/14px var(--ks-sans);letter-spacing:.005em;color:var(--ks-lead)}
.ks-red{color:var(--ks-red);font-style:normal;font-weight:600}
.ks [hidden],.ks-bar [hidden]{display:none!important}
.ks-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ks-link{color:var(--ks-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--ks-line2);transition:text-decoration-color .3s}
.ks-ico{width:18px;height:18px;flex:none;display:block}

/* ---------- Masaüstü yerleşimi (öteki ürün sayfalarıyla aynı ölçüler, urun-v2.css): üstte H1 + boyut notu boydan boya; altında solda sahne ve kâğıtlar,
   sağda 452 px beyaz panel (içeriği kadar, dikeyde ortalı). Yükseklik: pencere − stüdyonun üstü (--ks-top, betik ölçer): hepsi tek ekranda. ---------- */
.ks{--pw:minmax(400px,452px);--py:clamp(4px,1vh,8px);
  grid-template-columns:minmax(0,1fr) var(--pw);grid-template-rows:auto minmax(0,1fr);column-gap:40px;row-gap:clamp(8px,1.6vh,14px);
  height:calc(100vh - var(--ks-top,150px));height:calc(100dvh - var(--ks-top,150px));min-height:560px;max-height:940px;
  padding:var(--py) 0 clamp(14px,2.4vh,24px)}
.ks-head{grid-column:1/-1;grid-row:1;display:flex;align-items:baseline;gap:4px 16px;flex-wrap:wrap;margin-top:2px;min-width:0}
.ks-head h1,.ks-h1ph{font:italic 400 clamp(34px,min(3.2vw,5.2vh),46px)/1.08 var(--ks-serif);letter-spacing:-.015em;color:var(--ks-ink);margin:0;padding:0;max-width:none;text-align:left;text-wrap:balance}
.ks-sub{font-size:13.5px;line-height:1.3;color:var(--ks-lead);white-space:nowrap;font-variant-numeric:tabular-nums}
.ks-view{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:center;min-height:0;min-width:0;container-type:size}
@media (min-width:1280px){.ks{--pw:452px;column-gap:56px}}

/* Sahne. --cw kart genişliği (görünüm alanının eni ve boyuna göre), kart oranı 8 : 5 (5 × 8 cm net kesim).
   --dq: destenin kalınlığı, kart eninin oranı olarak (betik adet seçilince yazar). */
.ks-stage{--cw:min(58cqw,calc((100cqh - 170px) * 1.4),560px);--ch:calc(var(--cw) * .625);--top:26px;--depth:calc(var(--cw) * var(--dq,.026));
  position:relative;flex:none;height:calc(var(--top) + var(--ch) + var(--cw) * .08 + 46px);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.ks-stage:focus-visible{outline-offset:-2px}
.ks-stage.is-drag{cursor:grabbing}
/* Yalnız yanlardan kırpılır: destenin gölgesi altta kesilmez */
.ks-track{position:absolute;inset:0;overflow:hidden;perspective:1700px}
@supports (overflow:clip){.ks-track{overflow:clip visible}}
/* Yandaki kâğıtlar alt kenarlarından küçülür (ortadakiyle aynı hizada durur) */
.ks-slide{position:absolute;left:50%;top:var(--top);width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);perspective:1300px;will-change:transform;transform-origin:50% 100%}
/* tilt: fareyle eğilme (deste ve kart birlikte). lift > flip: kartın kendi 3B dönüşü; deste her zaman altta kalır. */
.ks-tilt,.ks-lift,.ks-flip{position:absolute;inset:0}
.ks-lift{perspective:1300px}
.ks-flip{transform-style:preserve-3d;transition:transform 760ms var(--ks-ease2)}
.ks-tilt{transition:transform 600ms var(--ks-ease)}
.ks-stage.is-hover .ks-tilt{transition:transform 180ms linear}

/* Kâğıt yüzü. Köşe: düz 1,5 px, oval R3 (3 mm / 80 mm). */
.ks-stage{--rad:1.5px}
.ks-stage[data-kose="oval"]{--rad:calc(var(--cw) * .0375)}
/* Işık sol üstten (onaylı tasarımın sahne ışığı): yüz sol üstte açık, sağ altta hafif sıcak gölgeli */
.ks-face{position:absolute;inset:0;overflow:hidden;border-radius:var(--rad);background-color:var(--c,#fff);color:var(--fi);
  background-image:var(--lit,linear-gradient(150deg,rgba(255,255,255,.35),rgba(255,255,255,0) 46%,rgba(74,58,36,.065)));
  backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size;
  box-shadow:0 0 0 .5px rgba(16,38,59,.07),0 1px 2px rgba(16,38,59,.07);transition:border-radius var(--ks-t) var(--ks-ease),box-shadow var(--ks-t) var(--ks-ease)}
.ks-face--back{transform:rotateY(180deg)}
.ks-tex{position:absolute;inset:0;pointer-events:none;background-image:var(--tex,none);opacity:var(--texo,0);transition:opacity var(--ks-t) var(--ks-ease)}
/* Kâğıt renkleri: kuşe parlak beyaz; selefonsuz bristol ve tuale biraz doğal (kırık) beyaz; sıvama (iki kat kuşe, kadife kaplama) yumuşak beyaz */
.ks-slide{--fi:#10263B;--fl:#6B6964;--bb:#10263B;--bf:#F5F3EE;--mk:#10263B;--mk2:#77828C;--bmk:#F5F3EE;--bmk2:#8E979D}
.ks-slide--bristol{--c:#FBF9F2;--tex:var(--tooth);--texo:.22}
.ks-slide--kraft{--c:var(--ks-kraft);--tex:var(--fleck),var(--mottle),var(--tooth);--texo:.7;--fl:#10263B;--bb:transparent;--bf:#10263B;--e1:#B49B79;--e2:#8C7456;--mk2:#5E5547;--bmk:#10263B;--bmk2:#5E5547}
.ks-slide--tuale{--c:#FBF8F0;--tex:var(--linen);--texo:.34}
.ks-slide--kadife{--c:#10263B;--lit:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,0) 48%,rgba(0,0,0,.14));--tex:var(--tooth-light);--texo:.35;--fi:#F5F3EE;--fl:#C8C1B4;--bb:transparent;--e1:#1B3349;--e2:#08131E;--mk:#F5F3EE;--mk2:#8E979D}
.ks-slide--sivama{--c:#FDFCFA;--e1:#FCFBF8;--e2:#DCD5C8;--ep:3px}
/* Yandaki kâğıtlar zeminden ayrılır (onaylı tasarım): sağ alta düşen gölge, dokusu biraz belirgin, işaret soluk.
   Sıvamanın kalın kenarı (iki kat kâğıt) yandayken de görünür. */
.ks-slide:not(.is-cur) .ks-face--front{box-shadow:0 0 0 .5px rgba(16,38,59,.1),0 1px 2px rgba(16,38,59,.08),5px 10px 18px -5px rgba(16,38,59,.26)}
/* geride kalan kâğıt ışıktan biraz uzak: sağ alta doğru sıcak bir gölge (solarak gelir, kart ortaya gelince solarak gider) */
.ks-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,rgba(74,58,36,0) 22%,rgba(74,58,36,.13));opacity:0;transition:opacity var(--ks-t) var(--ks-ease)}
.ks-slide--kadife .ks-face::after{background:linear-gradient(150deg,rgba(0,0,0,0) 22%,rgba(0,0,0,.18))}
.ks-slide:not(.is-cur) .ks-face::after{opacity:1}
.ks-slide:not(.is-cur) .ks-tex{opacity:calc(var(--texo,0) * 1.5)}
.ks-slide--kraft:not(.is-cur) .ks-tex{opacity:var(--texo)}
.ks-slide--sivama:not(.is-cur) .ks-deck{height:calc(var(--rad) + 1px + 3px)}
.ks-mk1{stroke:var(--mk)}.ks-mk2{stroke:var(--mk2)}
.ks-b-print .ks-mk1{stroke:var(--bmk)}.ks-b-print .ks-mk2{stroke:var(--bmk2)}

.ks-f-mark{position:absolute;left:8cqw;top:8cqw;width:9.5cqw;height:9.5cqw;display:block}
.ks-f-name{position:absolute;left:8cqw;bottom:13.5cqw;font:italic 400 7.6cqw/1 var(--ks-serif);letter-spacing:-.012em;white-space:nowrap}
.ks-f-line{position:absolute;left:8.2cqw;bottom:8.2cqw;font:400 3.05cqw/1 var(--ks-sans);letter-spacing:.01em;color:var(--fl);white-space:nowrap}
.ks-f-city{position:absolute;right:8cqw;bottom:8.2cqw;font:500 2.5cqw/1 var(--ks-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fl)}
/* Yandaki kâğıtlarda yazı yok: kenardan yarım ad görünmesin, kâğıt dokusu okunsun */
.ks-f-name,.ks-f-line,.ks-f-city,.ks-f-mark{transition:opacity 300ms var(--ks-ease)}
.ks-slide:not(.is-cur) :is(.ks-f-name,.ks-f-line,.ks-f-city){opacity:0}
.ks-slide:not(.is-cur) .ks-f-mark{opacity:.34}
.ks-b-print{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bb);color:var(--bf);
  opacity:0;transition:opacity var(--ks-t) var(--ks-ease)}
.ks-stage[data-yuz="cift"] .ks-b-print{opacity:1}
.ks-b-mark{width:12.5cqw;height:12.5cqw;margin:0 0 5.5cqw;display:block}
.ks-b-tel{font:500 3.6cqw/1.3 var(--ks-sans);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ks-b-adr{margin-top:1.6cqw;padding:0 6cqw;font:400 2.9cqw/1.3 var(--ks-sans);letter-spacing:.02em;opacity:.78;text-align:center}

/* Kaplama. Mat: yumuşak, dağınık ışık. Parlak: yüzeyde odanın soluk yansıması, seçilince (sonra en çok 12 sn'de bir) bir ışık geçer.
   Kadife ve sıvama: kadifenin yumuşak ışığı. */
.ks-gloss{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--ks-t) var(--ks-ease)}
.ks-gloss::before,.ks-gloss::after{content:"";position:absolute;inset:0}
.ks-stage[data-kap="mat"] .ks-slide.is-cur .ks-gloss{opacity:1;background:radial-gradient(140% 130% at var(--ks-lx,24%) var(--ks-ly,0%),rgba(255,255,255,.14),rgba(255,255,255,0) 62%)}
.ks-stage[data-kap="parlak"] .ks-slide.is-cur .ks-gloss{opacity:1;background:
    linear-gradient(116deg,rgba(16,38,59,0) 50%,rgba(16,38,59,.04) 58%,rgba(16,38,59,.012) 60.5%,rgba(16,38,59,.035) 66%,rgba(16,38,59,0) 82%),
    linear-gradient(180deg,rgba(16,38,59,0) 55%,rgba(16,38,59,.03))}
.ks-stage[data-kap="parlak"] .ks-slide.is-cur .ks-gloss::before{
  background:linear-gradient(104deg,rgba(16,38,59,0) 36%,rgba(16,38,59,.032) 45%,rgba(16,38,59,0) 48.8%,rgba(16,38,59,0) 51.2%,rgba(16,38,59,.028) 55%,rgba(16,38,59,0) 64%) var(--ks-sx) 0/300% 100% no-repeat}
.ks-stage[data-kap="parlak"] .ks-slide.is-cur .ks-gloss::after{mix-blend-mode:soft-light;
  background:
    linear-gradient(104deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.75) 48.6%,#fff 50%,rgba(255,255,255,.75) 51.4%,rgba(255,255,255,0) 56%) var(--ks-sx) 0/300% 100% no-repeat,
    linear-gradient(122deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.3) 47%,rgba(255,255,255,0) 58%)}
.ks-stage[data-kap="parlak"] .ks-slide.is-cur .ks-gloss.is-run{animation:ks-sweep 2.4s cubic-bezier(.35,.1,.25,1) 1}
.ks-stage.is-hover .ks-gloss{animation:none!important}
@keyframes ks-sweep{from{--ks-sx:88%}to{--ks-sx:12%}}
.ks-slide--kadife .ks-gloss{opacity:1;background:radial-gradient(150% 130% at var(--ks-lx,22%) var(--ks-ly,0%),rgba(245,243,238,.11),rgba(245,243,238,0) 58%)}
.ks-slide--sivama .ks-gloss{opacity:1;background:radial-gradient(150% 130% at var(--ks-lx,22%) var(--ks-ly,0%),rgba(255,255,255,.12),rgba(255,255,255,0) 60%)}

/* Deste: seçilen adet kadar kart üst üste, yalnız ortadaki kartta.
   Kenar: soluk katmanlar, düzensiz aralıkla biraz koyu bir çizgi, aşağı doğru koyulaşan bir blok ve koyu bir alt kenar. */
.ks-deck{position:absolute;left:0;right:0;top:calc(100% - var(--rad) - 1px);height:calc(var(--rad) + 1px);border-radius:0 0 var(--rad) var(--rad);
  background:
    linear-gradient(to bottom,rgba(16,38,59,0) 20%,rgba(16,38,59,.07)),
    repeating-linear-gradient(to bottom,transparent 0 6px,rgba(16,38,59,.045) 6px 7px,transparent 7px 11px,rgba(16,38,59,.035) 11px 12px),
    repeating-linear-gradient(to bottom,var(--e1,#FBFAF6) 0 calc(var(--ep,2px) - 1px),var(--e2,#E8E2D7) calc(var(--ep,2px) - 1px) var(--ep,2px));
  box-shadow:inset 0 -1px 0 rgba(16,38,59,.16);transition:border-radius var(--ks-t) var(--ks-ease)}
.ks-slide.is-cur .ks-deck{height:calc(var(--rad) + 1px + var(--depth,0px))}
/* Yerdeki gölge: kartla birlikte dönmez; destenin altında bulanık bir şerit */
.ks-shade{position:absolute;left:4%;right:4%;top:calc(100% - 12px);height:20px;border-radius:50%;background:rgba(16,38,59,.34);filter:blur(10px)}
.ks-slide:not(.is-cur) .ks-shade{opacity:.38}   /* yandaki kâğıdın gölgesi asıl olarak yüzünde (sağ alta) */
.ks-shade{transition:opacity var(--ks-t) var(--ks-ease)}
.ks-slide.is-cur .ks-shade{top:calc(100% + var(--depth,0px) - 12px)}

/* Adet etiketi ve ipucu: kartın altında, ortalı */
.ks-count{position:absolute;left:0;right:0;top:calc(var(--top) + var(--ch) + var(--depth,0px) + 16px);text-align:center;
  font:500 12px/1.3 var(--ks-mono);letter-spacing:.02em;color:var(--ks-lead);pointer-events:none}
.ks-stage.is-anim .ks-deck{transition:height 480ms var(--ks-ease),border-radius var(--ks-t) var(--ks-ease)}
.ks-stage.is-anim .ks-shade{transition:top 480ms var(--ks-ease),opacity var(--ks-t) var(--ks-ease)}
.ks-stage.is-anim .ks-count{transition:top 480ms var(--ks-ease)}
.ks-count__h{display:none;font-family:var(--ks-sans);font-weight:400;letter-spacing:0}
.ks-stage[data-yuz="cift"] .ks-count__h{display:inline}

/* Oklar: beyaz yuvarlak, hafif gölge (onaylı tasarım); 44 px dokunma alanı. Masaüstünde yandaki kâğıdın ortasında
   (yandaki kâğıt alt kenarından küçülür: ortası daha aşağıda), işaretinden uzak; telefonda kartın ortasında. */
.ks-arr{position:absolute;top:calc(var(--top) + var(--ch) * .615 - 22px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;
  border:0;background:transparent;color:var(--ks-ink);cursor:pointer;z-index:30}
.ks-arr::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:var(--ks-sh-sm);transition:box-shadow .3s,transform .3s var(--ks-ease)}
.ks-arr svg{position:relative;width:17px;height:17px;display:block}
.ks-arr--prev{left:6px}
.ks-arr--next{right:6px}

/* Kâğıt bilgisi: bütün kâğıtların yazısı üst üste, yalnız seçili olan görünür. Giden yazı çıkmadan gelen başlamaz. */
.ks-info{display:grid;text-align:center;padding-top:clamp(2px,.8vh,8px)}
.ks-info__i{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity 180ms var(--ks-ease),transform 180ms var(--ks-ease);pointer-events:none}
.ks-info__i.is-cur{opacity:1;transform:none;transition-duration:340ms;transition-delay:180ms;pointer-events:auto}
.ks-info__n{display:flex;align-items:baseline;justify-content:center;gap:8px;white-space:nowrap}
.ks-info__n .ks-it{font-size:clamp(28px,3.8vh,34px);line-height:1.1;letter-spacing:-.01em}
.ks-info__g{font:500 12.5px/1 var(--ks-mono);color:var(--ks-lead)}
.ks-info__d{margin-top:4px;font-size:14px;line-height:1.4;color:var(--ks-lead)}

/* Kâğıt sekmeleri: seçili lacivert, kalın, altı çizgili */
.ks-papers{display:flex;justify-content:center;flex-wrap:wrap;gap:0 6px;padding-top:clamp(6px,1.4vh,14px)}
.ks-papers button{position:relative;min-height:40px;padding:0 10px;border:0;background:none;font-size:14px;color:var(--ks-lead);cursor:pointer;transition:color .3s;white-space:nowrap}
.ks-papers button::before{content:"";position:absolute;inset:-5px 0}  /* görünmez dokunma payı */
.ks-papers button::after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:2px;border-radius:2px;background:var(--ks-ink);transform:scaleX(0);transition:transform var(--ks-t) var(--ks-ease)}
.ks-papers button[aria-pressed="true"]{color:var(--ks-ink);font-weight:600}
.ks-papers button[aria-pressed="true"]::after{transform:none}
.ks-papers .ks-pn-s{display:none}

/* ---------- Beyaz yaprak (masaüstünde sağ panel) ----------
   Blokların yüksekliği seçimle değişmez (not satırları yer ayırır): bir kutucuğa basınca hiçbir şey kaymaz. */
.ks{--th:60px;--qh:70px;--qp:21px;--sh2:48px;--gap2:16px;--tv:28px;--sg:24px}
.ks-panel{grid-column:2;grid-row:2;align-self:center;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;
  padding:20px 24px 14px;background:#fff;border-radius:22px;box-shadow:0 1px 0 var(--ks-soft),0 1px 3px rgba(16,38,59,.05),0 22px 48px -22px rgba(16,38,59,.24)}
.ks-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ks-grp{min-width:0}
.ks-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:8px}
/* Seçenek kutucuğu: simge + ad. Seçili: beyaz, lacivert çerçeve, gölge. */
.ks-tile{position:relative;min-width:0;height:var(--th,64px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 3px;
  border:1.5px solid transparent;border-radius:14px;background:var(--ks-paper);color:var(--ks-lead);font:600 12px/1.1 var(--ks-sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:background-color .3s var(--ks-ease),border-color .3s var(--ks-ease),color .3s var(--ks-ease),box-shadow .3s var(--ks-ease)}
.ks-tile__i{width:32px;height:22px;flex:none;display:block}
.ks-tile[aria-pressed="true"]{background:#fff;border-color:var(--ks-ink);color:var(--ks-ink);box-shadow:var(--ks-sh-sm)}
.ks-tile:disabled{cursor:not-allowed;opacity:.42}
.ks-tile:disabled .ks-sb__l,.ks-tile:disabled .ks-sb__s{text-decoration:line-through;text-decoration-thickness:1px}
.ks-sb__s{display:none}
/* Uzun ad sığmazsa (betik ölçer: .is-short) kısa ad ("Tek" / "Çift"), kısa adı olmayan kutucukta biraz küçük yazı */
.ks-seg.is-short .ks-sb__l.has-s{display:none}
.ks-seg.is-short .ks-sb__s{display:inline}
.ks-seg.is-tight .ks-tile{font-size:11px;letter-spacing:-.02em}
/* Kâğıdın tek kaplaması (seçilemez): iki kutucuk genişliğinde, kâğıt zeminde */
.ks-tile--fix{margin:8px 0 0;cursor:default;color:var(--ks-ink);font-weight:500}

/* "Adet" başlığı ve KDV anahtarı aynı satırda */
.ks-qty{margin-top:var(--gap2,22px)}
.ks-qty__h{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:22px}
.ks-qty__h>span{display:flex;align-items:center}
.ks .vsw{gap:8px;font-size:12.5px;font-weight:400;color:var(--ks-lead);white-space:nowrap}
.ks .switch{width:36px;height:21px;border-radius:11px;background:var(--ks-line2)}
.ks .switch::after{top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ks .switch[aria-checked="true"]{background:var(--ks-ink)}
.ks .switch[aria-checked="true"]::after{transform:translateX(15px)}
.ks .switch::before{content:"";position:absolute;inset:-12px -6px}
/* Adet fiyat kutucukları: üç sütun; üçten çok adette yana kayan satır */
.ks-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;min-height:var(--qh,80px)}
.ks-rows.is-scroll{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--sg,24px) * -1);padding:2px var(--sg,24px) 8px;margin-bottom:-8px;scroll-padding-inline:var(--sg,24px)}
.ks-rows.is-scroll::-webkit-scrollbar{display:none}
.ks-rows.is-scroll .ks-q{flex:none;width:108px}
.ks-q{position:relative;min-width:0;height:var(--qh,80px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 12px;
  border:1.5px solid transparent;border-radius:16px;background:var(--ks-paper);text-align:left;cursor:pointer;
  transition:background-color .3s var(--ks-ease),border-color .3s var(--ks-ease),box-shadow .3s var(--ks-ease)}
.ks-q__a{font-size:12.5px;font-weight:600;line-height:15px;color:var(--ks-lead);white-space:nowrap;transition:color .3s}
.ks-q__p{margin-top:2px;font-size:var(--qp,23px);font-weight:650;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.ks-q__p.is-q{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ks-lead)}
.ks-q__p .plock{font-size:12px}
.ks-q__u{margin-top:1px;font-size:11.5px;line-height:14px;color:var(--ks-lead);white-space:nowrap}
.ks-q__u:empty{display:none}
.ks-q[aria-pressed="true"]{background:#fff;border-color:var(--ks-ink);box-shadow:var(--ks-sh-sm)}
.ks-q[aria-pressed="true"] .ks-q__a{color:var(--ks-ink)}
.ks-q__tick{position:absolute;right:9px;top:9px;width:18px;height:18px;border-radius:50%;background:var(--ks-ink);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);transition:opacity .25s var(--ks-ease),transform .3s var(--ks-ease)}
.ks-q__tick svg{width:10px;height:10px;display:block}
.ks-q[aria-pressed="true"] .ks-q__tick{opacity:1;transform:none}
/* Yalnız tek adetli kâğıt (sıvama 100) ya da bu hızda basılmayan kâğıt: kutucukların yanında not */
.ks-rows__note{grid-column:2/-1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 14px;border-radius:16px;background:var(--ks-paper);
  font-size:12px;line-height:1.35;color:var(--ks-lead)}
.ks-rows__note b{font-weight:600;color:var(--ks-ink)}
.ks-rows:not(:has(.ks-q)) .ks-rows__note{grid-column:1/-1}
/* Seçili adedin amacı: lacivert nokta + bir satır */
.ks-purpose{display:flex;align-items:center;gap:7px;min-height:16px;margin-top:9px;font-size:12.5px;line-height:16px;color:var(--ks-lead);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-purpose::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ks-ink);flex:none}
.ks-purpose.is-empty::before{visibility:hidden}

/* Hız kutucukları: simge + ad + süre; aynı gün saati kırmızı */
.ks-spd{margin-top:var(--gap2,22px)}
.ks-speeds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.ks-s{min-width:0;height:var(--sh2,54px);display:flex;align-items:center;gap:9px;padding:0 11px;border:1.5px solid transparent;border-radius:14px;background:var(--ks-paper);color:var(--ks-ink);text-align:left;cursor:pointer;
  transition:background-color .3s var(--ks-ease),border-color .3s var(--ks-ease),box-shadow .3s var(--ks-ease)}
.ks-s__i{width:18px;height:18px;flex:none;display:block}
.ks-s__t{display:flex;flex-direction:column;min-width:0}
.ks-s__t b{font-size:13.5px;font-weight:600;line-height:16px;white-space:nowrap}
.ks-s__t small{font-size:11.5px;line-height:14px;color:var(--ks-lead);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-s[aria-pressed="true"]{background:#fff;border-color:var(--ks-ink);box-shadow:var(--ks-sh-sm)}
.ks-s:disabled{cursor:not-allowed;opacity:.42}
.ks-spd__note{margin-top:9px;min-height:2.7em;font-size:12.5px;line-height:1.35;color:var(--ks-ink)}  /* iki satır yer ayrılır */

/* Fiyat çubuğu: toplam + KDV notu, altında "250 adet · Standart · 3 Kas Sal"; sağda Sepete ekle (ya da WhatsApp'tan teklif).
   Masaüstünde panelin içinde, ince çizginin altında (öteki ürünlerin #order bölümüyle aynı) */
.ks-buy{margin:16px -16px 0;padding:4px 16px 0;border-top:1px solid var(--ks-soft)}
.ks-dock{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 10px}
.ks-dock__l{display:flex;flex-direction:column;min-width:0;margin:0}
.ks-tot{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap}
.ks-tot__v{font-size:var(--tv,30px);font-weight:650;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.ks-tot__v.is-q{font-size:calc(var(--tv,30px) * .72);letter-spacing:-.01em}
.ks-tot__k{margin-left:6px;font-size:11.5px;font-weight:500;color:var(--ks-lead);letter-spacing:0}
.ks-tot__s{margin-top:3px;font-size:12.5px;line-height:15px;color:var(--ks-lead);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-cta{flex:none;height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 22px;border:0;border-radius:16px;background:var(--ks-ink);color:#fff;
  font:600 15.5px/1 var(--ks-sans);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 6px 16px rgba(16,38,59,.25);transition:background-color .3s,box-shadow .3s}
.ks-cta[hidden]{display:none}
.ks-cta[disabled]{opacity:.6;cursor:progress}
.ks-cta--wa{padding:0 18px;font-size:14.5px;gap:8px}
.ks-links{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;font-size:13px;line-height:18px}
.ks-links a{display:inline-flex;align-items:center;gap:7px;padding:13px 0;margin:-13px 0}  /* dokunma payı 44 px; satır yüksekliği değişmez */
.ks-ask .ks-ico{width:16px;height:16px}
.ks-ask .ks-ico--tel,.ks-ask.is-tel .ks-ico:not(.ks-ico--tel){display:none}
.ks-ask.is-tel .ks-ico--tel{display:block}
.ks-fine{margin-top:8px;padding-bottom:2px;font-size:12px;line-height:1.4;color:var(--ks-lead)}
.ks-fine b{font-weight:600;color:var(--ks-ink)}

/* Telefonda alt çubuk */
.ks-bar{display:none}

@media (hover:hover) and (pointer:fine){
  .ks-tile:not(:disabled):not([aria-pressed="true"]):hover,.ks-q:not([aria-pressed="true"]):hover,.ks-s:not(:disabled):not([aria-pressed="true"]):hover{background:var(--ks-soft)}
  .ks-papers button:hover{color:var(--ks-ink)}
  .ks-arr:hover::before{box-shadow:var(--ks-sh-md);transform:scale(1.06)}
  .ks-cta:hover{background:#1B3349;box-shadow:0 8px 20px rgba(16,38,59,.3)}
  .ks-link:hover{text-decoration-color:var(--ks-ink)}
}

/* Kısa masaüstü ekranı (1366 × 768 gibi, dizüstü): kutucuklar alçalır, panel yine tek ekrana sığar */
@media (min-width:1024px) and (max-height:820px){
  .ks{--th:56px;--qh:66px;--qp:20px;--sh2:46px;--gap2:13px;--tv:26px}
  .ks-info__d{margin-top:2px;font-size:13.5px}
  .ks-papers button{min-height:36px}
  .ks-stage{--top:18px}
  .ks-cta{height:48px}
  .ks-spd__note{margin-top:7px}
}
@media (min-width:1024px) and (max-height:720px){
  .ks{--py:10px;--th:52px;--qh:64px;--qp:19px;--sh2:44px;--gap2:12px;--tv:24px}
  .ks-head h1,.ks-h1ph{font-size:30px}
  .ks-tile{gap:3px}
  .ks-tile__i{width:28px;height:19px}
  .ks-panel{padding-top:14px;padding-bottom:12px}
  .ks-seg,.ks-rows,.ks-speeds{margin-top:6px}
  .ks-purpose{margin-top:6px}
  .ks-spd__note{margin-top:5px;min-height:1.35em}
  .ks-cta{height:44px}
  .ks-fine{margin-top:8px}
  .ks-info__d{display:none}
  .ks-papers{padding-top:2px}
  .ks-papers button{min-height:34px}
  .ks-stage{--top:12px}
}
@media (min-width:1024px) and (max-width:1180px){
  .ks-papers button{padding:0 7px;font-size:13.5px}
  .ks-papers button::after{left:7px;right:7px}
  .ks-s{padding:0 9px;gap:7px}
}

/* ---------- Telefon ve tablet (≤ 1023 px): kart üstte, beyaz yaprak altta, toplam alt çubukta ---------- */
@media (max-width:1023px){
  .ks{--kg:24px;--sg:var(--kg);--th:60px;--qh:70px;--qp:21px;--sh2:48px;--gap2:14px;--tv:23px;display:none;height:auto;min-height:0;max-height:none;padding:0;gap:0}
  html.ks-js .ks{display:flex;flex-direction:column}
  .ks-head{padding:2px 0 0;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0 8px}  /* başlık ölçüyle sığmazsa ölçü alt satıra iner; başlık da sığmazsa iki satır olur */
  .ks-head h1,.ks-h1ph{font-size:28px;line-height:34px;white-space:normal;min-width:0}
  .ks-sub{font-size:12px}
  /* Sahne kenardan kenara: yandaki kâğıtlar ekranın kenarına 14 px kalana dek görünür */
  .ks-view{flex:none;container-type:inline-size;margin-inline:calc(var(--kg) * -1)}
  /* --cw: kart eni (≈ yarım ekran; kısa ekranda küçülür); --top: kartın üstündeki boşluk */
  .ks-stage{--cw:clamp(150px,min(51cqw,calc((100dvh - var(--ks-top,125px) - 545px) * 1.6)),340px);--top:14px;
    height:calc(var(--top) + var(--ch) + var(--depth,0px) + 26px);--depth:calc(var(--cw) * var(--dq,.026) * .62)}
  /* Adet etiketi telefonda yok (onaylı maket): adet fiyat çubuğunda ve seçili adet kutucuğunda yazılı; yeri kâğıt adıyla deste arasındaki boşluk */
  .ks-count{display:none}
  .ks-arr{width:44px;height:44px;top:calc(var(--top) + var(--ch) / 2 - 22px)}
  .ks-arr::before{inset:4px}
  .ks-arr svg{width:16px;height:16px}
  .ks-arr--prev{left:14px}.ks-arr--next{right:14px}
  .ks-info{padding-top:0}
  .ks-info__n{gap:6px}
  .ks-info__n .ks-it{font-size:25px;line-height:28px}
  .ks-info__g{font-size:11.5px}
  .ks-info__d{display:none}
  .ks-papers{gap:4px 0;padding:0;flex-wrap:wrap;justify-content:center}
  .ks-papers button{min-height:24px;padding:0 6px 3px;font-size:13.5px;line-height:21px}
  .ks-papers button::before{inset:-10px 0}
  .ks-papers button::after{left:6px;right:6px;bottom:0}
  /* Beyaz yaprak: kenardan kenara, üst köşeleri yuvarlak */
  .ks-panel{flex:none;align-self:auto;max-height:none;overflow:visible;margin:8px calc(var(--kg) * -1) 0;padding:15px var(--kg) 20px;border-radius:26px 26px 0 0;
    box-shadow:0 -1px 0 var(--ks-soft),0 -8px 28px rgba(16,38,59,.06)}
  .ks-opts{gap:12px}
  .ks-seg{margin-top:7px}
  .ks-tile{font-size:11.5px}
  .ks-tile--fix{margin-top:7px}
  .ks-qty__h{min-height:20px}
  .ks .vsw{min-height:0;padding-block:0;margin-block:0;font-size:12px}
  .ks .switch{width:34px;height:20px;border-radius:10px}
  .ks .switch::after{top:2px;left:2px}
  .ks .switch[aria-checked="true"]::after{transform:translateX(14px)}
  .ks-q{padding:0 11px;border-radius:16px}
  .ks-q__a{font-size:12px}
  .ks-q__u{font-size:11px}
  .ks-purpose{margin-top:8px;font-size:12px}
  .ks-speeds{margin-top:8px}
  .ks-s{gap:8px;padding:0 10px}
  .ks-s__t b{font-size:13px;line-height:15px}
  .ks-s__t small{font-size:11px}
  .ks-spd__note{margin-top:10px;min-height:0;font-size:12.5px}
  .ks-buy{margin:14px 0 0;padding:0;border-top:0}
  .ks-dock{display:none}
  .ks-links{justify-content:flex-start;gap:8px 22px}
  .ks-fine{margin-top:8px}
  /* sayfanın sonu fiyat çubuğunun + sekme çubuğunun altında kalmasın */
  html.ks-js body:has(#ksBar){padding-bottom:calc(var(--u-tabbar-h,0px) + 72px + env(safe-area-inset-bottom,0px))}
  /* Fiyat çubuğu: beyaz, ortak sekme çubuğunun üstünde (sekme çubuğu yoksa en altta) */
  .ks-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:46;background:#fff;border-top:1px solid var(--ks-soft);box-shadow:0 -6px 18px rgba(16,38,59,.05)}
  body:has(.u-tabbar) .ks-bar{bottom:calc(var(--u-tabbar-h,62px) + env(safe-area-inset-bottom,0px))}
  html:not(.ks-js) .ks-bar{display:none}
  .ks-bar__in{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:720px;height:72px;margin:0 auto;padding:0 11px 0 16px}
  body:not(:has(.u-tabbar)) .ks-bar__in{height:calc(72px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
  .ks-bar .ks-tot__v{font-size:23px;line-height:26px}
  .ks-bar .ks-tot__v.is-q{font-size:18px;line-height:22px}
  .ks-bar .ks-tot__k{margin-left:5px;font-size:11px}
  .ks-bar .ks-tot__s{margin-top:2px;font-size:11.5px;line-height:15px}
  .ks-bar .ks-cta{height:50px;padding:0 20px;font-size:15px}
  .ks-bar .ks-cta--wa{padding:0 15px;font-size:14px}
  .ks-bar.is-q .ks-tot__s{font-size:11px}
}
@media (max-width:760px){
  .ks{--kg:16px}
  html.ks-js .ppage-slip>.crumbs{padding-block:9px 0;line-height:16px}
  html.ks-js .ppage-slip>.ks{margin-top:-16px!important}
}
/* Tablet: aynı düzen, ortada 640 px'lik sütun; yaprak dört köşesi yuvarlak bir kart */
@media (min-width:561px) and (max-width:1023px){
  .ks{width:100%;max-width:640px;margin-inline:auto}
  .ks-head{padding-top:0}
  .ks-head h1,.ks-h1ph{font-size:34px;line-height:40px}
  .ks-view{margin-inline:0}
  .ks-stage{--cw:clamp(220px,min(46cqw,calc((100dvh - var(--ks-top,130px) - 600px) * 1.6)),340px);--top:18px}
  .ks-info__n .ks-it{font-size:28px;line-height:32px}
  .ks-papers button{font-size:14px;padding:0 9px 3px}
  .ks-panel{margin:12px 0 0;padding:20px 22px 18px;border-radius:24px;box-shadow:0 0 0 1px var(--ks-soft),var(--ks-sh-md)}
  .ks{--sg:22px;--th:64px;--qh:76px;--qp:23px;--sh2:52px;--gap2:18px}
}
/* Telefon: kâğıt adları kısa ("Kuşe", "Bristol" …): altı kâğıt tek satıra sığar (sığmazsa, ör. Almancada "Kaschiert", alt satıra geçer). Alt satırda deneme baskısı yazmaz (hemen altındaki bantta yazılı). */
@media (max-width:560px){
  .ks-fine__demo{display:none}
  .ks-papers .ks-pn-l{display:none}
  .ks-papers .ks-pn-s{display:inline}
}
/* Kısa telefon (Safari araç çubukları açıkken 390 × 844 ≈ 390 × 664): kart küçülür, kutucuklar biraz alçalır */
@media (max-width:560px) and (max-height:760px){
  .ks{--th:54px;--qh:64px;--qp:19px;--sh2:44px;--gap2:11px}
  .ks-tile{gap:3px}
  .ks-panel{padding-top:12px}
}
@media (max-width:380px){
  .ks-head h1,.ks-h1ph{font-size:25px}
  .ks-papers button{padding:0 5px 3px;font-size:12.5px}
  .ks-papers button::after{left:5px;right:5px}
  .ks-opts{gap:8px}
  .ks-q{padding:0 9px}
  .ks{--qp:19px}
  .ks-s{padding:0 8px;gap:6px}
  .ks-bar .ks-cta{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  .ks *,.ks *::before,.ks *::after,.ks-bar,.ks-bar *{transition:none!important;animation:none!important}
  .ks-stage[data-kap="parlak"] .ks-slide.is-cur .ks-gloss{--ks-sx:58%}  /* ışık durur ama görünür kalır */
}