/* ===========================================================
   Stoper v0.2 — page formatting
   Reference: ICOMAT (icomat.co.uk, Awwwards-recognised aerospace
   composites manufacturer). Borrowed STRUCTURE, not colour:
     · near-black technical stage sections
     · oversized editorial headline scale
     · before/after comparison split
     · single-metric statement bands
     · numbered end-to-end production chain (O1…On)
   Palette is unchanged Stoper: #005095 blue, white, cool neutrals.
   Chrome (header/footer/drop) comes from chrome.css, identical to v0.1.
   =========================================================== */

:root{
  --deep:#0b1017;          /* near-black, blue-biased (ICOMAT #080808 -> in-scheme) */
  --deep-2:#121a24;
  --mist:#cfd9e0;          /* ICOMAT's cool grey — harmonises with Stoper blue */
  --off:#f7f9fb;
  --hair:rgba(255,255,255,.14);
  --hair-dark:#e3e9f0;
}

/* ---------- rhythm ---------- */
.v2{padding:clamp(64px,9vw,132px) 0}
.v2.tight{padding:clamp(44px,6vw,84px) 0}
.v2-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.stage{background:var(--deep);color:#fff}
.stage-2{background:var(--deep-2);color:#fff}
.paper{background:#fff}
.offset{background:var(--off)}

/* ---------- editorial type scale ---------- */
.label{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:12px;margin-bottom:24px;
}
.label::before{content:"";width:26px;height:1px;background:currentColor;flex-shrink:0}
.stage .label,.stage-2 .label{color:var(--mist)}
.display{
  font-size:clamp(38px,6.6vw,86px);font-weight:800;line-height:.98;
  letter-spacing:-.035em;text-wrap:balance;margin:0;
}
.display em{font-style:normal;color:var(--blue)}
.stage .display em{color:#7fb3e0}
.headline{
  font-size:clamp(28px,4.2vw,54px);font-weight:800;line-height:1.04;
  letter-spacing:-.028em;text-wrap:balance;margin:0 0 18px;
}
.sub{font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;max-width:60ch;color:var(--muted);margin:0}
.stage .sub,.stage-2 .sub{color:rgba(207,217,224,.86)}

/* ---------- hero ---------- */
.v2-hero{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.v2-hero::after{ /* faint blueprint grid, drawn not imported */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,80,149,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,80,149,.16) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,transparent 72%);
}
.v2-hero{min-height:calc(100svh - var(--chrome-h,68px))}
.v2-hero .inner{
  position:relative;z-index:1;max-width:1240px;margin:0 auto;
  /* symmetric block padding — the hero was sitting 30px low */
  padding:clamp(44px,5.5vw,80px) clamp(16px,4vw,40px);
  min-height:calc(100svh - var(--chrome-h,68px));
  display:grid;grid-template-columns:1fr minmax(400px,.92fr);gap:clamp(34px,5vw,64px);
  align-items:center;align-content:center;
}
@media(max-width:980px){.v2-hero .inner{grid-template-columns:1fr;align-items:start;gap:34px}}
.v2-hero .sub{margin-top:22px;max-width:52ch}

/* inline metric row under the headline */
/* grid, not flex — three metrics must never wrap onto a second row */
.metric-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(16px,2vw,32px);margin-top:34px;padding-top:24px;border-top:1px solid var(--hair);
}
.metric-row .m .k{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.metric-row .m .v{font-size:13px;line-height:1.45;color:var(--mist);margin-top:8px;display:block;text-wrap:balance}

/* upload card sitting on the dark stage */
.upload-card{
  background:#fff;color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,36px);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.upload-card h3{font-size:clamp(20px,1.9vw,23px);margin:0 0 5px;letter-spacing:-.015em}
.upload-card .hint{font-size:14px;color:var(--muted);margin:0 0 18px}
/* taller, more confident drop target than the in-page default */
.upload-card .dropzone{padding:clamp(34px,4.4vw,52px) 22px}
.upload-card .dropzone .dz-icon{width:52px;height:52px;margin-bottom:14px}
.upload-card .dropzone .dz-title{font-size:18px}
.upload-card .qb-facts{margin-top:18px}

/* ---------- statement band (ICOMAT's single-claim sections) ---------- */
.statements{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
@media(max-width:860px){.statements{grid-template-columns:1fr}}
.statement{background:var(--deep);padding:clamp(30px,3.4vw,52px) clamp(22px,2.6vw,40px)}
.statement .big{
  font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;
}
.statement .big span{color:#7fb3e0}
.statement h3{font-size:17px;font-weight:700;margin:18px 0 8px;color:#fff}
.statement p{font-size:14.5px;line-height:1.6;color:rgba(207,217,224,.82);margin:0;max-width:34ch}

/* ---------- before / after split ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
@media(max-width:860px){.compare{grid-template-columns:1fr}}
.compare .col{border:1px solid var(--hair-dark);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px);background:#fff}
.compare .col.now{background:var(--blue);border-color:var(--blue);color:#fff}
.compare .col h3{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.015em}
.compare .col .tag{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:block}
.compare .col.now .tag{color:rgba(255,255,255,.72)}
.compare ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:0}
.compare li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:13px 0;border-top:1px solid var(--hair-dark);font-size:15px;line-height:1.5;
}
.compare .col.now li{border-top-color:rgba(255,255,255,.2)}
.compare li::before{content:"—";color:var(--muted);font-weight:700}
.compare .col.now li::before{content:"✓";color:#fff}

/* ---------- numbered production chain (O1…On) ---------- */
.chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border-top:1px solid var(--hair-dark)}
.chain .node{padding:26px clamp(14px,1.6vw,24px) 30px;border-right:1px solid var(--hair-dark);position:relative}
.chain .node:last-child{border-right:0}
@media(max-width:760px){.chain .node{border-right:0;border-bottom:1px solid var(--hair-dark)}.chain .node:last-child{border-bottom:0}}
.chain .no{
  font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--blue);
  display:block;margin-bottom:14px;font-variant-numeric:tabular-nums;
}
.chain h3{font-size:17px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em}
.chain p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
.stage .chain,.stage-2 .chain{border-top-color:var(--hair)}
.stage .chain .node,.stage-2 .chain .node{border-right-color:var(--hair);border-bottom-color:var(--hair)}
.stage .chain h3,.stage-2 .chain h3{color:#fff}
.stage .chain p,.stage-2 .chain p{color:rgba(207,217,224,.8)}
.stage .chain .no,.stage-2 .chain .no{color:#7fb3e0}

/* ---------- method list (hairline rows, big numerals) ---------- */
.methods{border-top:1px solid var(--hair-dark)}
.method{
  display:grid;grid-template-columns:74px 1.1fr 1.3fr auto;gap:clamp(14px,2.4vw,36px);
  align-items:center;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--hair-dark);
  text-decoration:none;color:inherit;transition:background .2s var(--ease),padding .2s var(--ease);
}
.method:hover{background:var(--blue-tint);text-decoration:none;padding-left:16px;padding-right:16px}
.method .idx{font-size:14px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.method h3{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;margin:0}
.method p{font-size:14.5px;color:var(--muted);margin:0}
.method .go{font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap}
/* (2026-09-04) Anında fiyatı henüz açılmamış yöntemler: kart bağlantı DEĞİL,
   düz bir satır. Tıklanmaz, imleç değişmez, hover vurgusu gelmez; sıra
   numarası soluk kalarak satırın henüz etkin olmadığını belli eder. */
.method-pasif{cursor:default}
.method-pasif:hover{background:transparent;padding-left:0;padding-right:0}
.method-pasif .idx{color:var(--muted)}
@media(max-width:860px){
  .method{grid-template-columns:52px 1fr;row-gap:6px}
  .method p{grid-column:2}
  .method .go{grid-column:2;justify-self:start}
}

/* ---------- material ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--hair-dark);padding:18px 0;background:#fff}
.ticker .track{display:flex;gap:14px;width:max-content;animation:slide-left 46s linear infinite}
@keyframes slide-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .track{animation-play-state:paused}
.ticker .chip{
  border:1px solid var(--hair-dark);border-radius:var(--pill);padding:9px 18px;
  font-size:14px;font-weight:600;white-space:nowrap;color:var(--ink);
}

/* ---------- proof band ---------- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--hair)}
.figure-cell{background:var(--deep);padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px)}
.figure-cell .n{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.figure-cell .l{font-size:13.5px;color:var(--mist);margin-top:12px;display:block;max-width:22ch}

/* ---------- guide rows ---------- */
.guides-list{display:grid;gap:0;border-top:1px solid var(--hair-dark)}
.guide-row{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--hair-dark);text-decoration:none;color:inherit;
  transition:background .2s var(--ease),padding .2s var(--ease);
}
.guide-row:hover{background:var(--blue-tint);text-decoration:none;padding-left:16px;padding-right:16px}
.guide-row h3{font-size:18px;font-weight:700;margin:0 0 3px;letter-spacing:-.015em}
.guide-row p{font-size:14px;color:var(--muted);margin:0}
.guide-row .arrow{color:var(--blue);font-weight:700;white-space:nowrap;font-size:14px}

/* ---------- closing CTA ---------- */
.closing{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:980px){.closing{grid-template-columns:1fr}}

/* shared small bits */
.v2 .note{
  background:#fff7ed;border:1px solid #fcd9a8;border-radius:var(--r);
  padding:14px 18px;font-size:14px;color:#7c4a09;max-width:74ch;
}
.stage .note,.stage-2 .note{background:rgba(180,83,9,.16);border-color:rgba(252,217,168,.4);color:#f4d9b4}
.head-block{max-width:66ch;margin-bottom:clamp(28px,3.4vw,46px)}

/* ---------- closing band, single column ----------
   Used when the band has no callback form beside it: one centred column,
   gap:0 so the children's own margins (label 24 / headline 18) still govern. */
.closing.solo{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:0;
  max-width:720px;
  margin-inline:auto;
}
.closing.solo .sub{max-width:54ch}
.closing-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px;
}
@media(max-width:520px){
  .closing-actions{flex-direction:column;align-self:stretch}
  .closing-actions .btn{width:100%;justify-content:center}
}

/* ---------- Nasıl çalışır: three illustrated steps ----------
   The illustrations are the original site's own artwork, and they carry
   their step numeral inside the image — so no number badge here. They are
   RGB PNGs on a solid white ground, hence white cards: on the off-white
   band the image would otherwise read as a pasted white rectangle. */
.how{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,28px);margin-top:clamp(28px,3.4vw,44px);
}
@media(max-width:900px){.how{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.how-card{
  background:#fff;border:1px solid var(--hair-dark);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.how-card:hover{border-color:var(--blue);box-shadow:0 10px 30px -18px rgba(0,58,112,.5)}
.how-card img{
  display:block;width:100%;max-width:300px;height:auto;
  margin:0 auto clamp(16px,2vw,24px);
}
.how-card h3{
  font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.015em;
  margin:0 0 10px;text-wrap:balance;
}
.how-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.how-card .more{
  margin-top:16px;align-self:flex-start;
  font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;
}
.how-card .more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- örnek parçalar (closing band) ----------
   Renders of Stoper's own CAD files. All three are RGBA with a transparent
   ground, so they sit directly on the tinted panel instead of arriving as a
   white rectangle. The three source files have very different aspect ratios
   (675x1115, 675x873, 723x723), so a fixed frame height plus object-fit
   keeps the row even without distorting any part. */
.examples{margin-top:clamp(38px,4.6vw,62px)}
/* Örnek parça sıralarının başlığı: kartlar tıklanınca sihirbaz o parçanın
   hazır dosyasıyla açıldığı için satırın ne işe yaradığını söyler. */
.ex-baslik{
  margin:0 0 clamp(20px,2.2vw,30px);text-align:center;
  font-size:clamp(15.5px,1.5vw,17.5px);font-weight:500;
  color:var(--blue);letter-spacing:-.005em;line-height:1.5;
}
.ex-baslik b{font-weight:700;color:var(--blue-dark)}
.ex-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,24px);
}
@media(max-width:820px){
  .ex-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
}
.ex-card{
  margin:0;background:var(--blue-tint);
  border:1px solid var(--hair-dark);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,24px);
  display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ex-card:hover{border-color:var(--blue);box-shadow:0 12px 30px -20px rgba(0,58,112,.55)}
.ex-card img{
  display:block;width:100%;height:clamp(200px,20vw,264px);
  object-fit:contain;margin-bottom:16px;
  /* these renders have an OPAQUE white ground — they are RGBA, but the alpha
     is 255 throughout, so each one's own white box was showing through the
     tint at its own aspect ratio and the row read as three mismatched
     rectangles. One uniform white plate per card instead, like a drawing
     sheet laid on the tinted board. */
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;
}
.ex-card figcaption{margin-top:auto;text-align:center}
.ex-card figcaption b{
  display:block;font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
}
.ex-card figcaption span{
  display:block;margin-top:4px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- chain: sub-steps under a node ----------
   Analiz and Ayar-ve-fiyat happen INSIDE the upload/quote screen, so they
   nest under Yükleme instead of standing as steps of their own. */
.chain .substep{
  margin-top:14px;padding-left:14px;border-left:2px solid rgba(127,179,224,.35);
}
.chain .substep h4{
  font-size:13.5px;font-weight:700;margin:0 0 4px;letter-spacing:.01em;color:#7fb3e0;
}
.chain .substep p{font-size:13.5px}
/* three wide nodes instead of five narrow ones. Fixed 3 columns, never
   auto-fit: auto-fit let the third step slip alone onto a second row at
   mid widths (2+1). Below the chain breakpoint it stacks to one column. */
.chain-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.chain-3{grid-template-columns:1fr}}

/* ---------- örnek işler bandı ----------
   Self-scrolling marquee. The card set is duplicated once (copy aria-hidden),
   and the track slides exactly half its own width per loop, so the seam is
   invisible. Hover pauses it; reduced-motion turns it into a plain
   hand-scrollable strip. */
.band-sec .v2-wrap .label{color:var(--mist)}
.ex-band{overflow:hidden;margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.ex-track{
  display:flex;gap:18px;width:max-content;padding:4px 0;
  animation:exscroll 42s linear infinite;
}
.ex-band:hover .ex-track{animation-play-state:paused}
@keyframes exscroll{to{transform:translateX(calc(-50% - 9px))}}
.exb-card{
  display:flex;flex-direction:column;
  width:238px;flex-shrink:0;
  /* (2026-09-05) Koyu bölüm üzerinde koyu kart okunmuyordu. Kart rengi,
     içindeki fotoğrafların fonuyla (#f7f7f7) BİREBİR aynı: görsel kartın
     içinde kenarsız kaynaşıyor, ayrı bir dikdörtgen olarak görünmüyor. */
  background:#f7f7f7;border:0;
  border-radius:var(--r-lg);padding:18px 18px 16px;
}
/* bar pinned to the card bottom so it lines up across cards regardless of
   image height or text wrapping */
.exb-card .tbar{margin-top:auto}
.exb-card svg{
  display:block;width:100%;height:96px;margin-bottom:12px;
  fill:none;stroke:#7fb3e0;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
}
.exb-card h3{font-size:15.5px;font-weight:700;margin:0 0 2px;color:var(--ink);letter-spacing:-.01em}
.exb-card .m{font-size:12px;color:var(--muted);margin:0 0 12px}
.exb-card .tbar{background:#e3e9f0}
.tbar{
  height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;
}
.tbar span{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#3c8fd4,#7fb3e0)}
.exb-card .t{
  font-size:12px;color:var(--muted);margin:7px 0 0;
  font-variant-numeric:tabular-nums;
}
.exb-note{margin:18px 0 0;font-size:12.5px;color:rgba(207,217,224,.65)}
@media(prefers-reduced-motion:reduce){
  .ex-track{animation:none}
  .ex-band{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}

/* real part renders in the band: light plates on the dark cards */
.exb-card img{
  display:block;width:100%;height:auto;border-radius:10px;
  margin-bottom:12px;border:0;background:#f7f7f7;
}
.exb-card .t2{margin-top:3px}
.exb-card .t2 b{color:var(--ink);font-weight:700}

/* closing grid with the five real parts */
.ex-grid.ex-grid-5{grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:1080px){.ex-grid.ex-grid-5{grid-template-columns:repeat(3,1fr)}}
/* Dar ekranda kartlar alt alta diziliyor; 10px'lik satir araligi ile
   bir kartin yazisi bir sonraki gorsele yapisik duruyor ve hangi yaziya
   ait oldugu anlasilmiyordu. Satir araligi aciliyor, sutun araligi
   onemsiz (tek sutun). */
@media(max-width:680px){
  .ex-grid.ex-grid-5{
    grid-template-columns:1fr;max-width:340px;margin-inline:auto;
    row-gap:38px;
  }
  .ex-grid-5 .ex-card figcaption{padding-bottom:0}
}
/* closing 5-up grid: white plate, render fills the card.
   object-fit is CONTAIN — cover cropped the wider parts (the 3-arm bracket
   lost its arms) whenever the card was portrait-shaped; the plate is white
   like the renders' own ground, so the fitted area is seamless. */
/* (2026-09-04) Kart kutusu KALDIRILDI: bu beş görsel artık saydam PNG
   x-ray render'ı. Beyaz plaka + çerçeve saydamlığın anlamını götürüyordu;
   render doğrudan bölümün zemininde dursun, kartta yalnız görsel ve
   altındaki yazı kalsın. */
.ex-grid-5 .ex-card{padding:0;overflow:visible;background:transparent;border:0;border-radius:0;position:relative}
/* Kartı baştan başa kaplayan bağlantı: tıklayan kullanıcı dosyayı
   yüklemeden doğrudan sihirbaza, o parçanın ham dosyasıyla girer.
   part-viewer.js karttaki <a> tıklamalarını zaten atlıyor, bu yüzden
   3B önizleme penceresi araya girmiyor. */
.ex-grid-5 .ex-card .ex-ort{position:absolute;inset:0;z-index:2;border-radius:8px}
.ex-grid-5 .ex-card:hover img{transform:translateY(-3px)}
.ex-grid-5 .ex-card img{transition:transform .22s var(--ease)}
.ex-grid-5 .ex-card:hover{border-color:transparent;box-shadow:none}
/* (2026-09-08) Gorseller %80 boyutuna indirildi (kullanici istegi).
   object-fit:contain oldugu icin baglayici olcu yukseklik: kutu kuculunce
   render de ayni oranda kuculuyor. */
.ex-grid-5 .ex-card img{
  width:100%;height:clamp(136px,13.6vw,172px);
  object-fit:contain;
  background:transparent;border:0;border-radius:0;padding:0;margin:0 0 4px;
}
.ex-grid-5 .ex-card figcaption{padding:11px 12px 13px}
.ex-grid-5 .ex-card figcaption b{font-size:14px}
.ex-grid-5 .ex-card figcaption span{font-size:12px;margin-top:3px}

/* band is grabbable */
.ex-band{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ex-band.dragging{cursor:grabbing}
.ex-band.dragging .ex-track{transition:none}

/* the track carries heavy SVG renders — give it its own compositor layer so
   the marquee transform never repaints the polygons */
.ex-track{will-change:transform;transform:translateZ(0)}

/* ============ PART VIEWER (örnek işler — interaktif 3B) ============ */
/* Bant kartları tıklanmaz (yalnızca üzerine gelince akış durur, sürüklenebilir);
   tıklanabilir olan sadece kapanış bölümündeki kartlardır. */
.ex-grid-5 figure{cursor:pointer}
#pvModal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(10,22,38,.62);padding:18px}
#pvModal.on{display:flex}
.pv-panel{background:#fff;border-radius:14px;width:min(880px,100%);max-height:calc(100vh - 36px);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,20,45,.45)}
.pv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 22px 10px}
.pv-head h3{margin:0;font-size:20px;font-weight:700;color:#10233c}
.pv-head p{margin:3px 0 0;font-size:13.5px;color:#5a6a7e}
.pv-close{flex:none;width:38px;height:38px;border:0;border-radius:10px;background:#eef2f6;cursor:pointer;
  display:grid;place-items:center}
.pv-close:hover{background:#e2e9f0}
.pv-close svg{width:18px;height:18px;stroke:#33455c;stroke-width:2.2;fill:none;stroke-linecap:round}
.pv-stage{position:relative;background:#f4f6f8;min-height:280px;aspect-ratio:16/10;touch-action:none;
  cursor:grab;overflow:hidden}
.pv-stage:active{cursor:grabbing}
#pvCanvas{position:absolute;inset:0;width:100%;height:100%}
#pvImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f4f6f8}
.pv-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;
  font-size:12.5px;color:#5a6a7e;background:rgba(255,255,255,.85);padding:5px 12px;border-radius:999px;
  pointer-events:none;transition:opacity .4s}
.pv-hint.off{opacity:0}
.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px 18px}
.pv-foot p{margin:0;font-size:14px;font-weight:600;color:#10233c}
.pv-cta{flex:none;display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  font-weight:700;font-size:15px;padding:12px 22px;border-radius:10px;transition:background .15s}
.pv-cta:hover{background:var(--blue-hover)}
@media (max-width:560px){
  .pv-head h3{font-size:17px}
  .pv-foot{flex-direction:column;align-items:stretch;text-align:center}
  .pv-cta{text-align:center}
}

/* ============ MANUAL-QUOTE SERVICES (lazer markalama, modül kalıp) ============ */
/* auto pricing not live for these yet — badge + notice; quotes come from the team */
/* longer label than the old one: allow it to sit on its own line in a
   narrow card or table cell rather than overflowing */
/* Anında fiyatı henüz açılmamış yöntemin adı: tabloda bağlantı değil,
   soluk düz metin — tıklanacak bir yer olmadığı belli olsun. */
.ad-pasif{color:var(--muted)}
.pill-quote{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;line-height:1.5;
  background:#fff4e0;color:#8a5a00;border:1px solid #f0d9a8;vertical-align:2px}
.qb-note{margin:0 0 12px;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.45;
  background:#fff7e8;border:1px solid #f0ddb0;color:#7a5200}

/* ============ MATERIAL HOVER PANEL (index ticker) ============ */
#matPop{
  position:fixed;z-index:950;display:none;width:300px;
  background:#fff;border-radius:14px;overflow:visible;
  box-shadow:0 18px 48px rgba(0,30,58,.22),0 2px 8px rgba(0,30,58,.10);
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
  pointer-events:auto
}
#matPop.on{opacity:1;transform:none}
#matPop.below{transform:translateY(-8px) scale(.96)}
#matPop.below.on{transform:none}
#matPop img{width:100%;height:132px;object-fit:cover;border-radius:14px 14px 0 0}
#matPop .mp-body{padding:14px 16px 15px}
#matPop .mp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#matPop h4{margin:0;font-size:14.5px;font-weight:700;color:#10233c;line-height:1.3}
#matPop .mp-head span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-tint);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
#matPop p{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#5a6a7e}
#matPop .mp-fact{font-weight:600;color:#33455c;font-size:12px}
#matPop a{display:inline-block;margin-top:10px;font-size:13px;font-weight:600}
#matPop .mp-arrow{
  position:absolute;bottom:-6px;width:12px;height:12px;margin-left:-6px;
  background:#fff;transform:rotate(45deg);border-radius:2px;
  box-shadow:4px 4px 10px rgba(0,30,58,.08)
}
#matPop.below .mp-arrow{bottom:auto;top:-6px;box-shadow:-2px -2px 8px rgba(0,30,58,.06)}
.ticker .chip{cursor:default}

/* ============ BLOG ARTICLE (self-contained ports of the live posts) ============ */
.art{max-width:780px;margin:0 auto;font-size:16.5px;line-height:1.75;color:#243247}
.art-hero{width:100%;border-radius:16px;margin:0 0 30px}
.art h2{font-size:clamp(21px,2.4vw,27px);font-weight:700;color:#10233c;margin:38px 0 12px;line-height:1.3}
.art h3{font-size:clamp(18px,2vw,21px);font-weight:700;color:#10233c;margin:30px 0 10px}
.art p{margin:0 0 16px}
.art ul,.art ol{margin:0 0 18px;padding-left:24px}
.art li{margin-bottom:8px}
.art img{border-radius:12px;margin:10px 0 22px}
.art table{border-collapse:collapse;width:100%;margin:0 0 22px;font-size:15px}
.art td,.art th{border:1px solid var(--line);padding:8px 12px;text-align:left}
.art-lead{font-size:18px;font-weight:600;color:#10233c;margin-bottom:20px}
.art-meta{opacity:.85}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0 8px;
  padding-top:22px;border-top:1px solid var(--line)}
.art-tags span{font-size:13.5px;font-weight:600;color:#5a6a7e}
.art-tags em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--blue);
  background:var(--blue-tint);padding:4px 12px;border-radius:999px}
.art-back{margin-top:26px}
.art-back a{font-weight:600}

/* ============ QUOTE CLOSED (yöntem henüz teklif modülünde yok) ============ */
/* same footprint as .dropzone so the card keeps its rhythm — but inert:
   no pointer cursor, no hover, no file collection */
.dz-closed{
  display:block;border:2px dashed var(--line);border-radius:var(--r);background:#f8fafc;
  padding:clamp(24px,4vw,40px) 20px;text-align:center;color:var(--muted);
}
.dz-closed .dz-icon{width:40px;height:40px;margin:0 auto 12px;color:var(--muted);
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.dz-closed .dz-title{font-weight:700;font-size:16.5px;color:#33455c;margin-bottom:6px}
.dz-closed .dz-sub{font-size:14px;margin:0;max-width:46ch;margin-inline:auto}

/* comparison table: the material cell names the leading options, then links
   the full filtered catalogue rather than listing all 26 */
.mat-more{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;white-space:nowrap}