/* Kişiye Özel Kolye V7 — Three.js önizleme katmanı.
   Yalnızca kisiye-ozel-kolye.html (V7, production) yükler; V6 düzeni (css/style.css .pz-*)
   aynen kullanılır. 3D aktif değilken bu katmanlar görünmez ve V6 önizlemesi
   (fallback) görünür. */
.pz3-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.pz-stage.is-3d .pz3-canvas{opacity:1;pointer-events:auto;cursor:grab;}
.pz-stage.is-3d .pz3-canvas:active{cursor:grabbing;}
.pz-stage.is-3d .pz-stage-canvas{visibility:hidden;}
.pz-stage .pz-live,.pz-stage .pz-expand{z-index:2;}

/* 3D hazırlık durumu (<html data-pz3>, js/personalized-necklace.js MG_pz3State):
   pending  -> V6 tuvalleri (büyük önizleme, küçük görseller, model kartları, modal)
               GİZLİ; yalnız temiz saten zemin + yükleme göstergesi. Eski el yazısı
               "A" tek kare bile görünmez.
   ready    -> ilk başarılı 3D çiziminden sonra; 3D tuval .is-3d ile belirir.
   fallback -> gerçek 3D hatasında V6 önizlemesi (bu kurallar devre dışı). */
html[data-pz3="pending"] .pz-stage-canvas,
html[data-pz3="pending"] canvas[data-pz-thumb-canvas],
html[data-pz3="pending"] canvas[data-pz-model-canvas],
html[data-pz3="pending"] canvas[data-pz-modal-canvas]{visibility:hidden;}
/* 3D ilk başarılı karesi (ready) gelene kadar 3D katmanları da görünmez; fade-in
   ready ile başlar. Saten zemin geçiş boyunca altta kalır (düz renk/boş tuval yok). */
html[data-pz3="pending"] .pz-stage.is-3d .pz3-canvas,
html[data-pz3="pending"] .pz3-thumb.is-on{opacity:0;}
html[data-pz3] .pz-stage,
html[data-pz3] .pz-thumb{background:#ece1d5 url('../images/personalized/v6/scene-satin.webp') center/cover;}
/* 3D küçük görsel açıkken altındaki V6 küçük görseli gizli (fade-in sırasında sızmaz) */
.pz-thumb.pz3-thumb-on canvas[data-pz-thumb-canvas]{visibility:hidden;}
.pz3-thumb{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.pz3-thumb.is-on{opacity:1;}

.pz-modal-card .pz3-canvas{opacity:1;pointer-events:auto;}
.pz-modal.is-3d [data-pz-modal-canvas]{visibility:hidden;}
.pz-modal-card .pz-modal-close{z-index:2;}

/* V7 zincir seçenekleri: yalnızca İnce Hayalet + Singapur (2. aşama) */
.pz3-chains{grid-template-columns:repeat(2,minmax(0,1fr));}
.pz3-card{position:absolute;inset:0;width:100%;height:100%;border-radius:9px;display:block;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.pz3-card.is-on{opacity:1;}
/* 3D açı küçük görseli (kadın model görünümünün yerine) */
.pz3-thumb-angle{background:#e9dccd url('../images/personalized/v6/scene-satin.webp') center/cover;}

/* ================= V7 yerleşim + kompakt panel =================
   Panel artık önizleme yüksekliğine ZORLA uzatılmaz (V6'daki
   align-self:stretch + space-between kaldırıldı); yalnız içeriği kadar.
   Masaüstü oranı: küçük görseller 76 px | önizleme ≤ 740 px | panel 420–448 px. */
.pz-main .pz-panel{align-self:start;justify-content:flex-start;height:auto;min-height:0;padding:15px 20px 0;}
.pz-main .pz-perks{margin:0 -20px;}

@media (min-width:1121px){
  .pz-main .pz-layout{grid-template-columns:76px minmax(520px,740px) minmax(420px,456px);justify-content:center;column-gap:26px;}
  .pz-main .pz-layout > .pz-stage{margin-left:0;}
  .pz-main .pz-thumbs{gap:11px;padding-top:0;}
  .pz-main .pz-thumb{border-radius:10px;}
}

@media (min-width:601px){
  /* başlık */
  .pz-main .pz-head{margin-bottom:6px;}
  .pz-main .pz-eyebrow{font-size:10.5px;letter-spacing:.24em;margin-bottom:2px;}
  .pz-main .pz-title{font-size:24px;}
  .pz-main .pz-sub{font-size:13px;margin-top:1px;}
  .pz-main .pz-title{line-height:1.1;}
  .pz-main .pz-rule{display:none;}
  /* bölümler */
  .pz-main .pz-group{margin-bottom:5px;}
  .pz-main .pz-label{margin-bottom:4px;gap:14px;line-height:1.25;}
  .pz-main .pz-label strong{font-size:14px;}
  .pz-main .pz-label span{font-size:12px;}
  /* model kartları ~48 px */
  .pz-main .pz-models{gap:8px;}
  .pz-main .pz-model-card{min-height:42px;padding:4px 22px 4px 5px;gap:5px;border-radius:9px;} /* sağ 22px: seçim işareti yazıya binmez */
  .pz-main .pz-model-img{flex:0 0 36px;width:36px;height:32px;}
  .pz-main .pz-model-card b{font-size:13px;}
  .pz-main .pz-check{width:20px;height:20px;}
  .pz-main .pz-check::after{left:7px;top:4px;width:4px;height:8.5px;}
  /* kişiselleştirme ~39 px */
  .pz-main .pz-input input{height:36px;font-size:15px;padding:0 40px 0 13px;}
  .pz-main .pz-clear{width:28px;height:28px;}
  /* zincir kartları ~48 px */
  .pz-main .pz3-chains{gap:8px;}
  .pz-main .pz3-chains .pz-chain-card{height:40px;}
  .pz-main .pz-chain{gap:3px;}
  .pz-main .pz-chain b{font-size:12.5px;line-height:1.2;}
  /* renk (33 px) + uzunluk (37 px) yan yana */
  .pz-main .pz-split{grid-template-columns:minmax(0,222px) minmax(0,1fr);margin-bottom:6px;}
  .pz-main .pz-split > .pz-group{margin-bottom:0;}
  .pz-main .pz-split > .pz-group:first-child{padding-right:12px;}
  .pz-main .pz-split > .pz-group:last-child{padding-left:12px;}
  .pz-main .pz-split .pz-label{gap:7px;flex-wrap:nowrap;white-space:nowrap;}
  .pz-main .pz-split .pz-label span{letter-spacing:-.01em;}
  .pz-main .pz-colors{gap:10px;justify-content:space-between;}
  .pz-main .pz-color{gap:5px;flex:0 0 auto;}
  .pz-main .pz-swatch{width:30px;height:30px;outline-offset:3px;}
  .pz-main .pz-color em{font-size:12px;line-height:1.2;white-space:nowrap;letter-spacing:-.01em;}
  .pz-main .pz-lengths{gap:7px;}
  .pz-main .pz-lengths span{height:34px;font-size:13.5px;}
  /* satın alma: adet 34 px, buton 45 px */
  .pz-main .pz-buy{margin:2px 0 9px;}
  .pz-main .pz-qty-block{padding-right:14px;}
  .pz-main .pz-total{padding:0 14px;}
  .pz-main .pz-buy-label{font-size:13px;margin-bottom:4px;}
  .pz-main .pz-total .pz-buy-label{margin-bottom:2px;}
  .pz-main .pz-qty{height:32px;}
  .pz-main .pz-qty button{width:32px;font-size:16px;}
  .pz-main .pz-qty input{width:36px;font-size:14px;}
  .pz-main .pz-total strong{font-size:22px;}
  .pz-main .pz-submit{height:42px;font-size:15px;gap:10px;}
  .pz-main .pz-submit svg{width:19px;height:19px;}
  /* alt bilgi bandı ~48 px */
  .pz-main .pz-perks{padding:7px 12px;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:space-between;align-items:center;}
  .pz-main .pz-perks li{gap:7px;padding:0 0 0 10px;justify-content:flex-start;}
  .pz-main .pz-perks li:first-child{padding-left:0;}
  .pz-main .pz-perks b,.pz-main .pz-perks small{white-space:normal;line-height:1.25;}
  .pz-main .pz-perks svg{width:24px;height:24px;}
  .pz-main .pz-perks b{font-size:12px;}
  .pz-main .pz-perks small{font-size:12px;}
}
@media (max-width:600px){
  .pz-main .pz-panel{padding:18px 16px 0;}
  .pz-main .pz-perks{margin:0 -16px;}
  .pz-main .pz3-chains .pz-chain-card{height:52px;}
}
/* Harf model kartı: V7 harf karakteri (V6 el yazısı A gizlenir) */
.pz-model-img.has-pz3 canvas[data-pz-model-canvas]{visibility:hidden;}
.pz-model-img .pz3-model{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* V7: uzunluk seçimi yok — Renk tek başına, swatch'lar soldan hizalı */
.pz-main .pz3-colors-only{margin-bottom:8px;}
.pz-main .pz3-colors-only .pz-colors{justify-content:flex-start;gap:22px;}

/* Model kartı önizlemeleri: mobilde kart dikey; görsel iki yandan 22 px içeride ->
   sağ üstteki seçim işareti görselin üstüne binmez */
@media (max-width:600px){
  .pz-main .pz-model-img{width:calc(100% - 38px);margin:0 auto;}
}