/* Erfa Atelier — PARMAK İZİ KOLYESİ.
 * Ortak dosyalara (atelier.css, personalized.css) DOKUNULMUYOR; hap/çip ve
 * sihirbaz görünümü oradan geliyor. Burada yalnız bu araca ait olan var:
 * form kartları, yükleme kutusu, gizlilik şeridi, ölçü şeridi, denetim.
 */

/* ===================== SAHNE ===================== */
.pi-wrap{max-width:1240px;margin:0 auto;padding:0 20px 90px}
.pi-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:34px;align-items:start}
@media (max-width:980px){.pi-grid{grid-template-columns:1fr;gap:22px}}

.pi-stage{position:relative;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, rgba(217,192,143,.10), transparent 62%),
             linear-gradient(180deg,#141118,#0c0a0e);
  border:1px solid rgba(255,255,255,.07);aspect-ratio:1;width:100%;
  display:flex;align-items:center;justify-content:center}
.pi-stage canvas{width:100%;height:100%;display:block;touch-action:none}
.pi-stage-2d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8%}
.pi-stage-2d>div{width:100%;height:100%}
/* 2B yedek İKİ katman: plaka altta, kazıma üstünde. İkisinin de viewBox'ı
   aynı ve ikisi de kutunun tamamını kaplıyor, dolayısıyla piksel piksel
   hizalanıyorlar. Ölçülmüş hata: sarmalayıcının boyu olmayınca SVG kendi
   MİLİMETRE ölçüsüne düşüyor ve kolye 22 mm'lik minik bir leke oluyordu. */
.pi-2d-yigin{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.pi-2d-ust{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pi-stage-2d svg{width:100%;height:100%;overflow:visible}
.pi-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:300;
  color:rgba(255,255,255,.6);background:rgba(0,0,0,.36);border-radius:9999px;
  padding:6px 13px;pointer-events:none;backdrop-filter:blur(6px)}
.pi-price{position:absolute;right:14px;top:14px;font-size:13px;font-weight:600;
  color:#0d0b10;background:rgba(236,220,180,.94);border-radius:9999px;padding:7px 14px}

/* ÖLÇÜ ŞERİDİ — bu araçta zorunlu. Ekranda 700 piksellik iz gümüşte 19 mm;
   kazıma çizgisinin gerçek genişliği yazmazsa "bu incelikte kazınır mı"
   sorusu cevapsız kalır ve müşteri gelen parçayı beklediğinden başka bulur. */
.pi-olcu{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px;
  font-size:11.5px;font-weight:300;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.pi-olcu b{font-weight:600;color:rgba(255,255,255,.78)}

/* ===================== GİZLİLİK ŞERİDİ ===================== */
/* Parmak izi KVKK'da özel nitelikli veri. Bu cümle sayfada süs değil;
   kodun yaptığı şeyin aynısını söylüyor (bkz. parmak-izi.js başlığı). */
.pi-gizlilik{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;
  font-size:12.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.58);
  background:rgba(143,191,159,.07);border:1px solid rgba(143,191,159,.24);
  border-radius:12px;padding:11px 13px}
.pi-gizlilik svg{flex:none;margin-top:2px}
.pi-gizlilik b{font-weight:600;color:rgba(255,255,255,.82)}

/* ===================== FORM KARTLARI ===================== */
.pi-kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.pi-kartlar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pi-kart{position:relative;display:flex;flex-direction:column;gap:7px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:11px 11px 10px;cursor:pointer;color:inherit;
  text-align:left;transition:border-color .18s ease,background .18s ease;min-height:96px}
.pi-kart:hover{background:rgba(255,255,255,.075)}
.pi-kart:focus-visible{outline:2px solid rgba(236,220,180,.75);outline-offset:2px}
.pi-kart[aria-pressed="true"]{border-color:rgba(236,220,180,.75);background:rgba(236,220,180,.12)}
.pi-kart svg{display:block;width:100%;height:46px}
.pi-kart b{font-size:12.5px;font-weight:600;letter-spacing:.01em}
.pi-kart span{font-size:11px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.35}

/* ===================== YÜKLEME ===================== */
.pi-yukle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:52px;border-radius:12px;cursor:pointer;font-size:13.5px;font-weight:600;
  border:1px dashed rgba(236,220,180,.5);background:rgba(236,220,180,.09);color:#ecdcb4;
  margin-top:10px}
.pi-yukle:hover{background:rgba(236,220,180,.17)}
.pi-yukle:focus-visible{outline:2px solid rgba(236,220,180,.8);outline-offset:2px}
.pi-durum{font-size:12px;font-weight:300;color:rgba(255,255,255,.62);margin:9px 0 0;min-height:34px;line-height:1.5}

.pi-kaydir{display:block;margin-top:14px}
.pi-kaydir label{display:flex;justify-content:space-between;font-size:12px;font-weight:300;
  color:rgba(255,255,255,.6);margin-bottom:7px}
.pi-kaydir input[type=range]{width:100%;accent-color:#ecdcb4}

/* ===================== ÜRETİM DENETİMİ ===================== */
/* İki şiddet GÖRSEL OLARAK AYRI: şampanya "böyle üretilir ama bilesin",
   kırmızı "bu parça üretilemez, sipariş durdu". */
.pi-uyari{font-size:12px;font-weight:300;line-height:1.55;margin:10px 0 0;
  color:var(--ea-accent-strong,#ecdcb4);background:rgba(217,192,143,.08);
  border:1px solid rgba(217,192,143,.22);border-radius:12px;padding:9px 12px}
.pi-uyari.kritik{color:#ffc9d1;background:rgba(255,107,129,.09);border-color:rgba(255,107,129,.38)}
.pi-uyari p{margin:0}

/* ===================== ARKA YÜZ ===================== */
.pi-alan{display:block;margin-top:12px}
.pi-alan label{display:block;font-size:12px;font-weight:300;color:rgba(255,255,255,.6);margin-bottom:6px}
.pi-alan input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:11px;color:#fff;
  padding:12px 14px;font:inherit;font-size:14px}
.pi-alan input:focus{outline:2px solid rgba(236,220,180,.7);outline-offset:1px}
.pi-say{font-size:11px;font-weight:300;color:rgba(255,255,255,.4);margin:6px 0 0}

/* ===================== HERO ===================== */
/* ÜST DOLGU ÖLÇÜLDÜ — ses.css'teki aynı gerekçe: partials/
   personalized-switcher.php sabit konumlu (personalized.css:47), masaüstünde
   alt kenarı 140px, mobilde 130px. 150px alt sınır çubuğun altında 10px hava
   bırakıyor; daha azı başlığın üstüne bindiriyor. */
.pi-hero{max-width:1240px;margin:0 auto;padding:clamp(150px,18vh,178px) 20px 26px}
.pi-hero h1{font-size:clamp(30px,5.2vw,54px);line-height:1.05;margin:0 0 16px;font-weight:300;letter-spacing:-.01em}
.pi-hero h1 b{font-weight:600}
.pi-hero p{max-width:62ch;font-size:15.5px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.66);margin:0 0 10px}
.pi-kicker{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,220,180,.85);margin-bottom:14px}

/* ===================== ANLATIM ===================== */
.pi-bolum{max-width:1240px;margin:0 auto;padding:10px 20px 60px}
.pi-bolum h2{font-size:clamp(22px,3.2vw,32px);font-weight:300;margin:44px 0 14px}
.pi-bolum>p{max-width:70ch;font-size:15px;font-weight:300;line-height:1.75;color:rgba(255,255,255,.66)}
.pi-adimlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
@media (max-width:860px){.pi-adimlar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pi-adim{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px}
.pi-adim b{display:block;font-size:12px;letter-spacing:.14em;color:rgba(236,220,180,.85);margin-bottom:8px}
.pi-adim p{margin:0;font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62)}
.pi-sss{border-top:1px solid rgba(255,255,255,.08);padding:16px 0}
.pi-sss summary{cursor:pointer;font-size:15px;font-weight:400;list-style:none}
.pi-sss summary::-webkit-details-marker{display:none}
.pi-sss p{margin:10px 0 0;font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.62)}

/* ===================== FİNAL PERDESİ ===================== */
/* finale.js'in overlay'inin ZEMİNİ YOK (atelier.css:575 — pointer-events:none,
   arka plan yok); kararma tam ekran kabuktan geliyor ve bu sayfa kabuk
   kullanmıyor. ses.css'te aynı ölçüm yapıldı: final açıkken .ea-finale'in
   hesaplanmış backgroundColor'ı rgba(0,0,0,0) çıkıyor, yani sipariş özeti
   karartılmamış canlı sayfanın üstünde duruyor. Kendi perdemiz finale'in
   ALTINDA (3400 < 3600), sahne ikisinin arasında (3500). */
.pi-perde{position:fixed;inset:0;z-index:3400;background:rgba(10,8,12,.93);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
/* ARTIK YALNIZ KABUK KAPALIYKEN. Sayfaya tam ekran kabuğu kurulunca bu
   perde ÇÖZÜM değil ZARAR olur: sahne kabuğun (z-3000, kendi istifleme
   bağlamını kuran) İÇİNDE duruyor, yani `z-index:3500` gövde seviyesindeki
   perdeye karşı hiçbir şey ifade etmez — 3500 kabuğun içinde geçerlidir,
   dışarıda kabuk hâlâ 3000'dir. Perde açılsaydı kolye onun ARKASINDA
   kalırdı; inceleme modunun tek amacı ise kolyeyi göstermek.
   Kabuk açıkken karartmayı `.hr-fs`in kendi zemini yapıyor, paneli de
   `body.ea-finale-open .hr-fs-panel` kenara süzüyor (atelier.css).
   Koşul silinip kural tümden kaldırılmadı: kabuk herhangi bir sebeple
   açılmazsa (JS hatası, script yüklenmedi) eski davranış aynen geri gelir. */
body.ea-finale-open:not(.hr-fs-open) .pi-perde{opacity:1}
body.ea-finale-open:not(.hr-fs-open) .pi-stage{position:relative;z-index:3500}
body.pi-finale-kilit{overflow:hidden}

/* ===================== TAM EKRAN KABUK ===================== */
/* Sahne kutusunun kabuk içi ölçüleri atelier.css'ten geliyor
   (`.hr-fs-stage .cz-stagebox`); sihirbaz sütununun kabuk içi düzeni ise
   arac-kabuk.css'te — orası /ses ile PAYLAŞILAN katman, iki sayfada da
   birebir aynı kurallar gerekiyordu ve iki kopya birinin unutulması
   demekti. Bu araca özgü bir kabuk kuralı şu an yok. */

@media (prefers-reduced-motion: reduce){
  .pi-kart,.pi-perde{transition:none}
}