/* Ürün sayfası — "teknik föy" (lib/urun.py). Tüm kurallar .pk3 ile başlar; renk/yazı tipi yalnız site.css :root değişkenlerinden. JS yok. */
.pk3{--p3-ink:#3b3b3b;--p3-rule:rgba(59,59,59,.18);--p3-rule2:rgba(59,59,59,.1);--p3-card:rgba(255,255,255,.42);--p3-card2:rgba(255,255,255,.62);--p3-e:cubic-bezier(.22,.9,.28,1);--p3-cc:var(--blue)}
.pk3 .p3-sheet{padding-bottom:96px}
.pk3 .p3-w{position:relative;width:1100px;max-width:calc(100% - 48px);margin:0 auto;padding-top:230px;color:var(--p3-ink)}
.pk3 [id]{scroll-margin-top:110px}
.pk3 h1,.pk3 h2{font-weight:700;letter-spacing:0}
.pk3 a{transition:color .4s ease-in-out,border-color .4s ease-in-out,background-color .4s ease-in-out}
.pk3 a:focus-visible,.pk3 .p3-ts:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.pk3 svg{display:block;flex:none}
.pk3 p{overflow-wrap:anywhere}
.pk3 .ic{width:21px;height:21px}
.pk3 .ic.rope{width:28px;height:11px}

/* ---------- künye ---------- */
.pk3 .p3-hero{display:grid;grid-template-columns:minmax(0,1fr) 470px;grid-template-areas:"top pic" "acts pic" "idx pic" "fill pic";grid-template-rows:auto auto auto 1fr;gap:0 70px;align-items:start}
.pk3 .p3-ht{grid-area:top;min-width:0}
.pk3 .p3-hp{grid-area:pic;display:flex;flex-direction:column;gap:14px;min-width:0}
.pk3 .p3-acts{grid-area:acts}
.pk3 .p3-idx{grid-area:idx}
.pk3 .p3-bc{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--f-din);font-size:14px;line-height:20px;color:var(--ink)}
.pk3 .p3-bc a{color:var(--ink);border-bottom:1px solid transparent}
.pk3 .p3-bc a:hover{color:var(--blue);border-color:var(--blue)}
.pk3 .p3-bs{color:var(--blue)}
.pk3 .p3-bcur{color:var(--p3-ink)}
.pk3 .p3-eb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:28px;font-family:var(--f-dinm);font-size:13px;line-height:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--p3-ink)}
.pk3 .p3-eb .ic{margin-right:-2px}
.pk3 .p3-cat{color:var(--blue)}
.pk3 .p3-cat+.p3-grp{padding-left:14px;border-left:1px solid var(--p3-rule);color:var(--ink);letter-spacing:.1em}
.pk3 h1{margin-top:22px;font-family:var(--f-dinb);font-size:50px;line-height:1.06;letter-spacing:-.012em;color:var(--p3-ink);max-width:560px;overflow-wrap:anywhere;hyphens:manual}
.pk3 .p3-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:30px}
.pk3 .p3-acts .tf-cta{margin-top:0;align-self:auto;border-color:var(--p3-ink);color:var(--p3-ink)}
.pk3 .p3-acts .tf-cta:hover{background-color:var(--p3-card2)}
.pk3 .p3-lnk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-dinm);font-size:16px;color:var(--p3-ink);border-bottom:1px solid var(--p3-rule)}
.pk3 .p3-lnk svg{color:var(--blue);transition:translate .4s ease-in-out}
.pk3 .p3-lnk:hover{color:var(--blue);border-color:var(--blue)}
.pk3 .p3-lnk:hover svg{translate:0 3px}

/* sayfa içi dizin */
.pk3 .p3-idx{margin-top:44px;max-width:560px}
.pk3 .p3-idx>p{font-family:var(--f-dinm);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.pk3 .p3-idx ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--p3-rule)}
.pk3 .p3-idx a{position:relative;display:flex;align-items:baseline;gap:14px;min-height:44px;padding:11px 26px 11px 0;border-bottom:1px solid var(--p3-rule);font-family:var(--f-dinm);font-size:16px;line-height:1.3;color:var(--p3-ink)}
.pk3 .p3-idx a span{flex:none;font-family:var(--f-dinb);font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums}
.pk3 .p3-idx a::after{content:'';position:absolute;right:5px;top:50%;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.45;transition:opacity .4s ease-in-out,translate .4s ease-in-out}
.pk3 .p3-idx a:hover{color:var(--blue)}
.pk3 .p3-idx a:hover::after{opacity:1;translate:0 3px}

/* görsel sahnesi: açık kart, köşe işaretleri, eski sayfadaki mavi dikey çizginin izi (canlıdaki ayna/flip bilerek uygulanmaz: baskı yazıları ters çıkıyordu) */
.pk3 .p3-stage{position:relative;margin:0;aspect-ratio:47/42;border-radius:24px;overflow:hidden;isolation:isolate;background:radial-gradient(70% 60% at 50% 55%,rgba(255,255,255,.7),rgba(255,255,255,0)),var(--p3-card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.pk3 .p3-stage::before{content:'';position:absolute;left:9%;top:10%;bottom:10%;width:1px;background:linear-gradient(transparent,rgba(0,159,227,.5) 20%,rgba(0,159,227,.5) 80%,transparent);z-index:-1}
.pk3 .p3-stage::after{content:'';position:absolute;right:9%;top:10%;bottom:10%;width:1px;background:linear-gradient(transparent,rgba(0,159,227,.5) 20%,rgba(0,159,227,.5) 80%,transparent);z-index:-1}
.pk3 .p3-stage img{position:absolute;left:12%;top:9%;width:76%;height:82%;object-fit:contain;border-radius:12px;   /* kenardan kenara detay fotoğrafları yumuşak köşeli; saydam kesmelerde etkisiz */filter:drop-shadow(0 18px 20px rgba(35,35,35,.22));transition:translate .5s var(--p3-e)}
.pk3 .p3-stage2{aspect-ratio:47/30;border-radius:20px}   /* ikinci görsel çoğunlukla kenardan kenara detay fotoğrafı: büyük kutu, kart içinde baskı gibi durur */
.pk3 .p3-stage2 img{left:8%;top:7%;width:84%;height:86%}
.pk3 .p3-stage2::before,.pk3 .p3-stage2::after{top:14%;bottom:14%;left:4.5%}
.pk3 .p3-stage2::after{left:auto;right:4.5%}
.pk3 .p3-tk{position:absolute;width:16px;height:16px;border:0 solid var(--blue);opacity:.8;transition:opacity .4s ease-in-out}
.pk3 .p3-tk1{left:16px;top:16px;border-left-width:2px;border-top-width:2px}
.pk3 .p3-tk2{right:16px;top:16px;border-right-width:2px;border-top-width:2px}
.pk3 .p3-tk3{left:16px;bottom:16px;border-left-width:2px;border-bottom-width:2px}
.pk3 .p3-tk4{right:16px;bottom:16px;border-right-width:2px;border-bottom-width:2px}
.pk3 .p3-sn{position:absolute;left:44px;bottom:15px;font-family:var(--f-dinm);font-size:12px;letter-spacing:.12em;color:var(--ink);font-variant-numeric:tabular-nums}
.pk3 .p3-phx{position:absolute;inset:16%;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(92,92,97,.4);border-radius:14px;font-family:var(--f-inter);font-size:14px;color:var(--ink)}
@media (hover:hover){
  .pk3 .p3-stage:hover img{translate:0 -6px}
  .pk3 .p3-stage:hover .p3-tk{opacity:1}
}

/* ---------- bölümler ---------- */
.pk3 .p3-body{margin-top:84px;border-top:1px solid var(--p3-rule)}
.pk3 .p3-sec{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px 70px;padding:46px 0 52px;border-bottom:1px solid var(--p3-rule);align-items:start}
.pk3 .p3-sh{display:flex;flex-direction:column;gap:10px;min-width:0}
.pk3 .p3-no{font-family:var(--f-dinb);font-size:13px;letter-spacing:.12em;color:var(--blue);font-variant-numeric:tabular-nums}
.pk3 .p3-no::after{content:'';display:block;width:28px;height:2px;margin-top:10px;background:var(--blue)}
.pk3 .p3-sec h2{font-family:var(--f-dinb);font-size:24px;line-height:1.2;color:var(--p3-ink);overflow-wrap:anywhere}
.pk3 .p3-cnt{font-family:var(--f-din);font-size:14px;color:var(--ink)}
.pk3 .p3-tx{font-family:var(--f-inter);font-size:16.5px;line-height:1.66;color:var(--p3-ink);max-width:680px}
.pk3 .p3-tx p+p,.pk3 .p3-tx ul+p,.pk3 .p3-tx p+ul{margin-top:14px}
.pk3 .p3-tx ul{list-style:none;padding:0;margin:0}
.pk3 .p3-tx li{position:relative;padding-left:22px;margin-top:6px}
.pk3 .p3-tx li::before{content:'';position:absolute;left:2px;top:.72em;width:8px;height:2px;background:var(--blue)}

/* tablolar: her tablo kendi kaydırma kabında, başlıklı; geniş ekranda kaydırma gerekmez */
.pk3 .p3-tabs{grid-template-rows:auto auto}
.pk3 .p3-tabs .p3-sh{grid-column:1/-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:8px 18px}
.pk3 .p3-tabs .p3-no{display:flex;align-items:center;gap:14px}
.pk3 .p3-tabs .p3-no::after{margin-top:0}
.pk3 .p3-tl{grid-column:1/-1;display:flex;flex-direction:column;gap:30px;margin-top:10px;min-width:0}
.pk3 .p3-tc{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px;padding:0 4px}
.pk3 .p3-tn{font-family:var(--f-dinm);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pk3 .p3-sw{display:none;font-family:var(--f-din);font-size:12px;color:var(--ink)}
.pk3 .p3-ts{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--blue) transparent;border-radius:18px;padding-bottom:2px}
.pk3 .p3-ts::-webkit-scrollbar{height:8px}
.pk3 .p3-ts::-webkit-scrollbar-track{background:transparent}
.pk3 .p3-ts::-webkit-scrollbar-thumb{background:var(--blue);border:0;border-radius:4px}
.pk3 .tbl{background:var(--p3-card2);border:1px solid rgba(59,59,59,.22);border-radius:18px;font-size:16px;line-height:1.25;color:var(--p3-ink);min-width:0}
.pk3 .tbl th,.pk3 .tbl td{border-color:rgba(59,59,59,.16);padding:6px 10px}
.pk3 .tbl .h{background:#bce4fa}
.pk3 .tbl .z{background:#eaf6fe}
.pk3 .tbl.dense{font-size:14px}
.pk3 .tbl.dense td{padding:5px 6px}
.pk3 .tbl-side{gap:30px}
.pk3 .p3-ph{display:flex;align-items:center;justify-content:center;min-height:120px;padding:20px;border:2px dashed rgba(92,92,97,.4);border-radius:18px;background:rgba(255,255,255,.22);font-family:var(--f-inter);font-size:14px;color:var(--ink);text-align:center}
.pk3 .p3-ph-d{min-height:280px;font-size:15px}

/* notlar */
.pk3 .p3-nl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0;max-width:760px}
.pk3 .p3-nl li{position:relative;padding-left:20px;font-family:var(--f-inter);font-size:15px;line-height:1.6;color:var(--p3-ink);overflow-wrap:anywhere}
.pk3 .p3-nl li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--blue)}
.pk3 .p3-nl li.p3-long{margin-top:4px;padding:18px 22px 18px 42px;border-radius:16px;background:var(--p3-card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pk3 .p3-nl li.p3-long::before{left:22px;top:calc(18px + .72em)}

/* ---------- koyu teklif bandı ---------- */
.pk3 .p3-band{display:flex;align-items:center;justify-content:space-between;gap:30px 50px;margin-top:70px;padding:44px 52px;border-radius:24px;background:var(--bg);color:var(--g1)}
.pk3 .p3-bi{min-width:0}
.pk3 .p3-beb{display:block;font-family:var(--f-dinm);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.pk3 .p3-bt{margin-top:12px;font-family:var(--f-dinb);font-size:28px;line-height:1.15;color:#fff;overflow-wrap:anywhere}
.pk3 .p3-bx{margin-top:10px;font-family:var(--f-inter);font-size:15px;line-height:1.5;color:var(--g2)}
.pk3 .p3-band .tf-cta{flex:none;margin-top:0;align-self:auto;border-color:rgba(212,212,212,.7);color:#fff}
.pk3 .p3-band .tf-cta:hover{background-color:var(--blue);border-color:var(--blue)}

/* ---------- geniş ekran ---------- */
@media (min-width:1800px){
  .pk3 .p3-w{width:1240px;padding-top:250px}
  .pk3 .p3-hero{grid-template-columns:minmax(0,1fr) 520px;gap:0 90px}
  .pk3 h1{font-size:56px;max-width:620px}
  .pk3 .p3-sec{grid-template-columns:300px minmax(0,1fr);gap:16px 90px}
  .pk3 .p3-tx{max-width:760px;font-size:17px}
}

/* ---------- tablet ---------- */
@media (max-width:1199px){
  .pk3 .p3-w{padding-top:200px}
  .pk3 .p3-hero{grid-template-columns:minmax(0,1fr) 340px;gap:0 40px}
  .pk3 h1{font-size:42px}
  .pk3 .p3-sec{grid-template-columns:200px minmax(0,1fr);gap:14px 40px;padding:40px 0 44px}
  .pk3 .p3-sec h2{font-size:21px}
  .pk3 .p3-sw{display:inline}
  .pk3 .tbl{min-width:900px}
  .pk3 .tbl-side{flex-direction:column;min-width:0}
  .pk3 .p3-band{padding:36px 40px}
}
@media (max-width:860px){
  .pk3 .p3-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "pic" "acts" "idx";grid-template-rows:auto;gap:0}
  .pk3 .p3-hp{margin-top:34px;flex-direction:row;align-items:stretch}
  .pk3 .p3-hp .p3-stage{flex:1 1 0;min-width:0;aspect-ratio:1/1}
  .pk3 .p3-n2 .p3-stage{aspect-ratio:1/1.05}
  .pk3 .p3-stage2{border-radius:24px}
  .pk3 .p3-stage2 img{left:10%;top:8%;width:80%;height:84%}
  .pk3 .p3-stage2::before,.pk3 .p3-stage2::after{top:10%;bottom:10%;left:9%}
  .pk3 .p3-stage2::after{left:auto;right:9%}
  .pk3 .p3-idx{max-width:none}
  .pk3 .p3-sec{grid-template-columns:minmax(0,1fr);gap:18px}
  .pk3 .p3-tx{max-width:none}
  .pk3 .p3-nl{max-width:none}
  .pk3 .p3-band{flex-direction:column;align-items:flex-start}
}

/* ---------- telefon ---------- */
@media (max-width:640px){
  .pk3 .p3-sheet{padding-bottom:70px}
  .pk3 .p3-w{max-width:calc(100% - 32px);padding-top:185px}   /* telefonda dikey logo (85×130 px, üstten 33 px) 165 px’e iner */
  .pk3 .p3-bc{font-size:13px}
  .pk3 .p3-eb{margin-top:20px;font-size:12px;letter-spacing:.12em;gap:6px 10px}
  .pk3 .p3-cat+.p3-grp{padding-left:10px}
  .pk3 h1{margin-top:16px;font-size:34px;line-height:1.1}
  .pk3 .p3-hp{margin-top:26px;flex-direction:column;gap:10px}
  .pk3 .p3-hp .p3-stage{flex:none;aspect-ratio:1/.9;border-radius:20px}
  .pk3 .p3-n2 .p3-stage{aspect-ratio:1/.9}
  .pk3 .p3-n2 .p3-stage2{aspect-ratio:1/.66;border-radius:20px}
  .pk3 .p3-stage2 img{left:8%;top:7%;width:84%;height:86%}
  .pk3 .p3-sn{left:36px}
  .pk3 .p3-tk{width:13px;height:13px}
  .pk3 .p3-tk1,.pk3 .p3-tk3{left:12px}.pk3 .p3-tk2,.pk3 .p3-tk4{right:12px}
  .pk3 .p3-tk1,.pk3 .p3-tk2{top:12px}.pk3 .p3-tk3,.pk3 .p3-tk4{bottom:12px}
  .pk3 .p3-acts{margin-top:24px;gap:10px 22px}
  .pk3 .p3-acts .tf-cta{width:100%;justify-content:center}
  .pk3 .p3-idx{margin-top:34px}
  .pk3 .p3-idx a{font-size:15px;padding:10px 24px 10px 0}
  .pk3 .p3-body{margin-top:56px}
  .pk3 .p3-sec{padding:32px 0 36px;gap:14px}
  .pk3 .p3-sec h2{font-size:20px}
  .pk3 .p3-tx{font-size:16px;line-height:1.6}
  .pk3 .p3-tl{gap:24px}
  .pk3 .p3-ts{border-radius:14px}
  .pk3 .tbl{font-size:14px;border-radius:14px}
  .pk3 .tbl th,.pk3 .tbl td{padding:5px 8px}
  .pk3 .p3-nl li.p3-long{padding:16px 16px 16px 36px}
  .pk3 .p3-nl li.p3-long::before{left:16px;top:calc(16px + .72em)}
  .pk3 .p3-band{margin-top:50px;padding:30px 24px;border-radius:20px;gap:22px}
  .pk3 .p3-bt{font-size:23px}
  .pk3 .p3-band .tf-cta{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .pk3 *,.pk3 *::before,.pk3 *::after{transition:none!important;animation:none!important}
}