/* Kişiye Özel Kolye — V8 masaüstü tasarımı (referans: references/full-page-reference.png).
   Yalnız kisiye-ozel-kolye.html yükler ve style.css + personalized-necklace-three.css'ten
   SONRA gelir. Sadece görünüm: data-pz-* kancaları, Three.js katmanı, fiyat ve sepet
   mantığı değişmez. Tüm kurallar .pz-main.pz-v8 altında; kaldırılırsa V7 görünümü döner. */

.pz-main.pz-v8{
  --pz-bg:#f6f0e9;
  --pz-card:#fcf9f5;
  --pz-field:#fffdfa;
  --pz-line:rgba(74,45,33,.11);
  --pz-line-strong:rgba(74,45,33,.24);
  --pz-soft-shadow:0 1px 2px rgba(58,39,32,.03),0 14px 34px -26px rgba(58,39,32,.22);
  --pz-r:14px;
  padding:10px 0 36px;
}

/* ---------- ortak: panel içi (tüm ekranlar) ---------- */
.pz-main.pz-v8 .pz-panel{
  background:var(--pz-card);
  border:1px solid rgba(74,45,33,.08);
  border-radius:var(--pz-r);
  box-shadow:var(--pz-soft-shadow);
}
.pz-main.pz-v8 .pz-eyebrow{font-size:11px;font-weight:600;letter-spacing:.3em;color:#7a6255;margin:0 0 8px;}
.pz-main.pz-v8 .pz-title{
  font-family:'Cormorant Garamond','Times New Roman',serif;
  font-weight:500;font-size:clamp(28px,2.3vw,36px);line-height:1.05;letter-spacing:0;color:var(--pz-ink);
}
.pz-main.pz-v8 .pz-sub{font-size:14px;color:#7f6a5d;margin-top:6px;}
.pz-main.pz-v8 .pz-rule{display:block;width:100%;height:1px;background:var(--pz-line);margin:12px 0 0;}
.pz-main.pz-v8 .pz-head{margin-bottom:12px;}

.pz-main.pz-v8 .pz-group{margin-bottom:11px;}
.pz-main.pz-v8 .pz-label{margin-bottom:7px;gap:12px;align-items:baseline;}
.pz-main.pz-v8 .pz-label strong{font-size:14px;font-weight:700;}
.pz-main.pz-v8 .pz-label span{font-size:13px;color:#8d7a6d;}

/* model kartları: yatay, sade */
.pz-main.pz-v8 .pz-models{gap:10px;}
.pz-main.pz-v8 .pz-model-card{
  flex-direction:row;min-height:46px;padding:5px 12px 5px 6px;gap:7px;
  background:var(--pz-field);border:1px solid var(--pz-line);border-radius:8px;
}
.pz-main.pz-v8 .pz-model-img{flex:0 0 34px;width:34px;height:34px;margin:0;border-radius:6px;}
.pz-main.pz-v8 .pz-model-card b{font-size:12.5px;font-weight:600;text-align:left;white-space:nowrap;min-width:0;}
.pz-main.pz-v8 input:checked + .pz-model-card{border:1px solid var(--pz-sel);background:#f8f1ea;}
.pz-main.pz-v8 .pz-check{width:18px;height:18px;top:-6px;right:-6px;box-shadow:0 0 0 2px var(--pz-card);}
.pz-main.pz-v8 .pz-check::after{left:6.5px;top:3.5px;width:4px;height:8px;border-width:0 1.6px 1.6px 0;}

/* kişiselleştirme */
.pz-main.pz-v8 .pz-input input{height:40px;border-radius:8px;background:var(--pz-field);font-size:15px;padding:0 42px 0 14px;}

/* zincir */
.pz-main.pz-v8 .pz3-chains{gap:10px;}
.pz-main.pz-v8 .pz3-chains .pz-chain-card{height:46px;border-radius:8px;}
.pz-main.pz-v8 .pz-chain-card canvas{border-radius:7px;}
.pz-main.pz-v8 input:checked + .pz-chain-card{border:1px solid var(--pz-sel);}
.pz-main.pz-v8 .pz-chain{gap:5px;}
.pz-main.pz-v8 .pz-chain b{font-size:13px;font-weight:500;color:var(--pz-body);}
.pz-main.pz-v8 .pz-chain input:checked ~ b{color:var(--pz-ink);font-weight:700;}

/* renk */
.pz-main.pz-v8 .pz3-colors-only{margin-bottom:11px;}
.pz-main.pz-v8 .pz3-colors-only .pz-colors{gap:30px;justify-content:flex-start;}
.pz-main.pz-v8 .pz-swatch{width:30px;height:30px;outline-offset:3px;}
.pz-main.pz-v8 .pz-color{gap:6px;}
.pz-main.pz-v8 .pz-color em{font-size:12.5px;color:#8d7a6d;}

/* özet not */
.pz-main.pz-v8 .pz-note{position:relative;}
.pz-main.pz-v8 .pz-note textarea{
  display:block;width:100%;height:54px;min-height:54px;resize:none;
  padding:10px 14px 18px;border:1px solid var(--pz-line);border-radius:8px;background:var(--pz-field);
  font:400 13.5px/1.45 'Manrope',sans-serif;color:var(--pz-ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.pz-main.pz-v8 .pz-note textarea::placeholder{color:#a8968a;}
.pz-main.pz-v8 .pz-note textarea:focus{outline:none;border-color:var(--pz-sel);box-shadow:0 0 0 3px rgba(74,45,33,.07);}
.pz-main.pz-v8 .pz-note-count{position:absolute;right:10px;bottom:5px;font-size:11.5px;color:#8d7a6d;pointer-events:none;}

/* satın alma */
.pz-main.pz-v8 .pz-buy{margin:2px 0 14px;}
.pz-main.pz-v8 .pz-qty{height:34px;border-radius:7px;background:var(--pz-field);}
.pz-main.pz-v8 .pz-buy-label{font-size:13px;font-weight:600;}
.pz-main.pz-v8 .pz-total .pz-buy-label{font-weight:500;color:#8a7568;}
.pz-main.pz-v8 .pz-total strong{font-size:24px;font-weight:800;}
.pz-main.pz-v8 .pz-submit{height:46px;border-radius:8px;font-size:15px;box-shadow:0 8px 18px -10px rgba(74,45,33,.55);}

/* alt bilgi bandı */
.pz-main.pz-v8 .pz-perks{background:transparent;border-top:1px solid var(--pz-line);padding:10px 14px;}
.pz-main.pz-v8 .pz-perks svg{color:#7a6255;}

/* ---------- önizleme ---------- */
.pz-main.pz-v8 .pz-stage{border-radius:var(--pz-r);box-shadow:var(--pz-soft-shadow);}
.pz-main.pz-v8 .pz-thumb{border-radius:10px;box-shadow:none;border-color:var(--pz-line);}
.pz-main.pz-v8 .pz-thumb.is-active{border:1.5px solid var(--pz-sel);box-shadow:none;}

/* "Gerçeğe Yakın Görselleştirme": küçük, sade bilgi satırı (rozet değil) */
.pz-main.pz-v8 .pz-live.pz-realistic{
  top:auto;left:16px;bottom:16px;margin:0;max-width:calc(100% - 96px);
  display:flex;align-items:flex-start;gap:7px;padding:6px 10px 6px 8px;
  border-radius:6px;background:rgba(252,249,245,.5);border:1px solid rgba(255,255,255,.45);box-shadow:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-weight:400;color:var(--pz-ink);
}
.pz-main.pz-v8 .pz-realistic svg{flex:0 0 auto;width:13px;height:13px;margin-top:1px;color:#8a6e5f;}
.pz-main.pz-v8 .pz-realistic span{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pz-main.pz-v8 .pz-realistic strong{font-size:11px;font-weight:600;letter-spacing:.04em;color:#4a352b;}
.pz-main.pz-v8 .pz-realistic small{font-size:11px;color:#6f5a4e;line-height:1.35;}
.pz-main.pz-v8 .pz-expand{width:48px;height:48px;right:18px;bottom:18px;box-shadow:0 4px 14px rgba(74,45,33,.1);}

/* ---------- editoryal panel ---------- */
.pz-main.pz-v8 .pz-story{
  position:relative;overflow:hidden;border-radius:var(--pz-r);
  background:#ead9c6;box-shadow:var(--pz-soft-shadow);
  container-type:size;
}
.pz-main.pz-v8 .pz-story-img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:0% 50%; /* sol hizalı: görseldeki "MERT GÜMÜŞ" kırpılmaz */
}
/* Metin, görseldeki "MERT GÜMÜŞ" etiketinin (sol %4.1 · üst %7) hizasından ve
   çizgisinin altından başlar; ölçüler görsel yüksekliğine (cqh) bağlı. */
.pz-main.pz-v8 .pz-story-text{
  position:absolute;left:4.15cqh;right:max(22px,9cqw);top:14.4cqh;
  color:#3f2b22;
}
.pz-main.pz-v8 .pz-story-title{
  margin:0;font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:500;
  font-size:clamp(26px,4.5cqh,40px);line-height:1.06;letter-spacing:0;color:#3f2b22;
}
.pz-main.pz-v8 .pz-story-rule{display:block;width:36px;height:1px;background:rgba(63,43,34,.35);margin:2.4cqh 0 2.2cqh;}
.pz-main.pz-v8 .pz-story-desc{margin:0;font-size:clamp(13px,1.85cqh,15px);line-height:1.6;color:#6b5448;max-width:250px;}

/* ================= Masaüstü: 4 alan tek sırada, aynı yükseklikte ================= */
@media (min-width:1121px){
  .pz-main.pz-v8{
    /* İlk ekrana sığacak ortak yükseklik (header + breadcrumb düşülür). */
    --pz-h:clamp(640px,calc(100svh - 138px),790px);
  }
  .pz-main.pz-v8 .pz-wrap{max-width:1680px;padding:0 clamp(20px,2vw,36px);}
  .pz-main.pz-v8 .pz-breadcrumb{margin:0 0 10px;font-size:12px;}
  .pz-main.pz-v8 .pz-layout{
    grid-template-columns:78px minmax(0,1fr) clamp(380px,29vw,470px) calc(var(--pz-h) * .36);
    grid-auto-rows:minmax(var(--pz-h),auto);
    column-gap:20px;justify-content:stretch;align-items:stretch;
  }
  .pz-main.pz-v8 .pz-thumbs{gap:12px;padding-top:0;justify-content:flex-start;}
  .pz-main.pz-v8 .pz-layout > .pz-stage{aspect-ratio:auto;height:auto;min-height:0;margin-left:0;}
  .pz-main.pz-v8 .pz-panel{
    align-self:stretch;height:auto;display:flex;flex-direction:column;justify-content:space-between; /* uzun ekranda boşluk gruplar arasına dağılır */
    padding:24px 26px 0;
  }
  .pz-main.pz-v8 .pz-perks{margin:0 -26px;padding:10px 12px;}
  .pz-main.pz-v8 .pz-perks li{gap:6px;padding-left:8px;}
  .pz-main.pz-v8 .pz-perks svg{width:22px;height:22px;}
  .pz-main.pz-v8 .pz-perks b{font-size:12px;}
  .pz-main.pz-v8 .pz-perks small{font-size:12px;color:#8d7a6d;}
  .pz-main.pz-v8 .pz-story{align-self:stretch;}
}

/* ================= Tablet + mobil: önizleme → seçenekler → editoryal panel ================= */
@media (max-width:1120px){
  .pz-main.pz-v8 .pz-story{
    order:4;justify-self:center;width:min(100%,340px);aspect-ratio:633/1403;margin-top:6px;
  }
}
@media (max-width:600px){
  .pz-main.pz-v8 .pz-panel{padding:20px 16px 0;}
  .pz-main.pz-v8 .pz-perks{margin:0 -16px;}
  .pz-main.pz-v8 .pz-model-card{flex-direction:column;padding:8px 6px 8px;gap:5px;}
  .pz-main.pz-v8 .pz-model-img{width:calc(100% - 38px);margin:0 auto;flex:0 0 auto;height:36px;}
  .pz-main.pz-v8 .pz-model-card b{text-align:center;}
  /* Mobil: başlık + açıklama tek akışta (en fazla 2 satır), ikon ve iç boşluk küçük */
  .pz-main.pz-v8 .pz-live.pz-realistic{left:10px;bottom:10px;max-width:calc(100% - 72px);padding:5px 8px 5px 7px;gap:5px;align-items:flex-start;}
  .pz-main.pz-v8 .pz-realistic svg{width:11px;height:11px;margin-top:2px;}
  .pz-main.pz-v8 .pz-realistic span{display:block;line-height:1.35;font-size:10.5px;}
  .pz-main.pz-v8 .pz-realistic strong{display:inline;font-size:10.5px;letter-spacing:.02em;}
  .pz-main.pz-v8 .pz-realistic small{display:inline;font-size:10.5px;}
  .pz-main.pz-v8 .pz-realistic small::before{content:" · ";color:#a08c7f;}
  .pz-main.pz-v8 .pz-expand{right:12px;bottom:12px;width:44px;height:44px;}
  /* Hikaye paneli: tam genişlik ve daha kısa. Üst katman (img) görselin üstünü
     gösterir; ::after aynı görselin ALT kısmını (el yazısı) yumuşak geçişle
     üstüne bindirir. Ortadaki düz ipek bölüm kısalır; görsel dosyası aynen kalır. */
  .pz-main.pz-v8 .pz-story{width:100%;aspect-ratio:.61;}
  .pz-main.pz-v8 .pz-story-img{object-position:50% 0;}
  .pz-main.pz-v8 .pz-story::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:36%;z-index:1;pointer-events:none;
    background:url('../images/personalized/senin-hikayen-panel.webp') center bottom/100% auto no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 38%);
  }
  /* Üst katman genişliğe göre ölçeklendiği için konumlar cqw ile: görseldeki
     "MERT GÜMÜŞ" hizası (sol %9.2) ve çizgisinin altı korunur. */
  .pz-main.pz-v8 .pz-story-text{z-index:2;left:9.2cqw;right:max(22px,9cqw);top:31.9cqw;}
  .pz-main.pz-v8 .pz-story-title{font-size:clamp(26px,10cqw,40px);}
  .pz-main.pz-v8 .pz-story-rule{margin:5.2cqw 0 4.8cqw;}
  .pz-main.pz-v8 .pz-story-desc{font-size:clamp(13px,4.1cqw,15px);max-width:none;}
}