/* Erfa Atelier — SES KOLYESİ.
 * Ortak dosyalara (atelier.css, personalized.css) DOKUNULMUYOR; bu araca
 * özgü ne varsa burada. Hap/çip/wizard görünümü ortak dosyalardan geliyor,
 * burada yalnız SESE ait olan şeyler var: dalga kartları, kayıt düğmesi,
 * canlı seviye çubuğu, üretim denetimi kutusu.
 */

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

.sk-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}
.sk-stage canvas{width:100%;height:100%;display:block;touch-action:none}
.sk-stage-2d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8%}
.sk-stage-2d svg{width:100%;height:100%;overflow:visible}
.sk-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)}
.sk-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çü şeridi: parçanın gerçek mm'si daima görünür. Ölçü gizliyken
   müşteri ekrandaki büyüklüğü gerçek sanıyor ve gelen parçayı küçük
   buluyor — bu araçta parça 26-35 mm arası değişiyor, fark büyük. */
.sk-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)}
.sk-olcu b{font-weight:600;color:rgba(255,255,255,.78)}

/* ===================== DALGA KARTLARI ===================== */
.sk-kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.sk-kartlar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sk-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:86px}
.sk-kart:hover{background:rgba(255,255,255,.075)}
.sk-kart:focus-visible{outline:2px solid rgba(236,220,180,.75);outline-offset:2px}
.sk-kart[aria-pressed="true"]{border-color:rgba(236,220,180,.75);background:rgba(236,220,180,.12)}
.sk-kart svg{display:block;width:100%;height:34px}
.sk-kart b{font-size:12.5px;font-weight:600;letter-spacing:.01em}
.sk-kart span{font-size:11px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.35}

/* Kaynak düğmeleri (dosya / mikrofon) — kartlarla aynı ailede ama vurgulu. */
.sk-kaynak{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:420px){.sk-kaynak{grid-template-columns:1fr}}
.sk-kaynak button{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:600;
  border:1px solid rgba(236,220,180,.42);background:rgba(236,220,180,.10);color:#ecdcb4}
.sk-kaynak button:hover{background:rgba(236,220,180,.18)}
.sk-kaynak button:focus-visible{outline:2px solid rgba(236,220,180,.8);outline-offset:2px}
.sk-kaynak button.is-kayit{border-color:rgba(255,107,129,.55);background:rgba(255,107,129,.12);color:#ffc9d1}

/* Kayıt sırasında gerçek seviye — "kaydediyor mu?" sorusunu ekran cevaplar. */
/* Çubuk boyu `height` ile DEĞİL `transform:scaleY` ile değişir: ölçer kayıt
   boyunca saniyede ~20 kez güncelleniyor ve `height` her karede yeniden
   yerleşim (layout) tetikliyor. scaleY yalnız birleştirme (compositing)
   aşamasında çalışır, ölçüm sırasında kare düşmez. */
.sk-seviye{display:flex;align-items:flex-end;gap:3px;height:36px;margin-top:11px}
.sk-seviye i{flex:1;background:rgba(236,220,180,.55);border-radius:2px;height:100%;
  transform:scaleY(.08);transform-origin:50% 100%;transition:transform .07s linear;will-change:transform}
.sk-kayitdurum{font-size:12px;font-weight:300;color:rgba(255,255,255,.62);margin:8px 0 0;min-height:17px}

/* ===================== ÜRETİM DENETİMİ ===================== */
/* İki şiddet GÖRSEL OLARAK AYRI olmak zorunda: şampanya "ince ama üretilir",
   kırmızı "bu parça tezgâhta kırılır, sipariş durur". */
.sk-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}
.sk-uyari.kritik{color:#ffc9d1;background:rgba(255,107,129,.09);border-color:rgba(255,107,129,.38)}
.sk-uyari p{margin:0}

/* ===================== ARKA YÜZ ===================== */
.sk-alan{display:block;margin-top:12px}
.sk-alan label{display:block;font-size:12px;font-weight:300;color:rgba(255,255,255,.6);margin-bottom:6px}
.sk-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}
.sk-alan input:focus{outline:2px solid rgba(236,220,180,.7);outline-offset:1px}
.sk-say{font-size:11px;font-weight:300;color:rgba(255,255,255,.4);margin:6px 0 0}

/* ===================== HERO ===================== */
/* ÜST DOLGU KEYFİ DEĞİL — ÖLÇÜLDÜ.
   partials/personalized-switcher.php sabit konumlu (personalized.css:47):
   masaüstünde top:86px, kendi yüksekliği 54px -> alt kenarı 140px.
   Mobilde top:76px -> 130px. İlk sürümde dolgu 52px'ti ve 1280x900'de
   çekilen görüntüde araç çubuğu H1'in ("Sesin de bir şekli var.") tam
   üstüne biniyordu; logo da kicker'ı örtüyordu. Alt sınır 150px, yani
   çubuğun altında 10px hava kalıyor. */
.sk-hero{max-width:1240px;margin:0 auto;padding:clamp(150px,18vh,178px) 20px 26px}
.sk-hero h1{font-size:clamp(30px,5.2vw,54px);line-height:1.05;margin:0 0 16px;font-weight:300;letter-spacing:-.01em}
.sk-hero h1 b{font-weight:600}
.sk-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}
.sk-kicker{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,220,180,.85);margin-bottom:14px}

/* ===================== ANLATIM ===================== */
.sk-bolum{max-width:1240px;margin:0 auto;padding:10px 20px 60px}
.sk-bolum h2{font-size:clamp(22px,3.2vw,32px);font-weight:300;margin:44px 0 14px}
.sk-adimlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
@media (max-width:860px){.sk-adimlar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sk-adim{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px}
.sk-adim b{display:block;font-size:12px;letter-spacing:.14em;color:rgba(236,220,180,.85);margin-bottom:8px}
.sk-adim p{margin:0;font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62)}
.sk-sss{border-top:1px solid rgba(255,255,255,.08);padding:16px 0}
.sk-sss summary{cursor:pointer;font-size:15px;font-weight:400;list-style:none}
.sk-sss summary::-webkit-details-marker{display:none}
.sk-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İ ===================== */
/* NEDEN BU SAYFANIN KENDİ PERDESİ VAR — ÖLÇÜLDÜ.
   finale.js dört araçta ortak ve overlay'i atelier.css:575'te şöyle
   tanımlı: `.ea-finale{position:fixed;inset:0;z-index:3600;
   pointer-events:none;display:none}` — yani ZEMİNİ YOK. Kararma, o
   araçların içinde bulunduğu tam ekran kabuktan (.hr-fs) geliyor ve panel
   `body.ea-finale-open .hr-fs-panel` kuralıyla kenara çekiliyor.
   Bu sayfa kabuk kullanmıyor (araç normal sayfa akışında duruyor), o yüzden
   ölçüm şunu gösterdi: final açıkken .ea-finale'in hesaplanmış
   backgroundColor'ı rgba(0,0,0,0), backdropFilter 'none'. Sipariş özeti
   canlı sayfa içeriğinin üstünde, karartılmamış bir kart olarak duruyordu.
   Çözüm ortak dosyaya DOKUNMADAN burada: kendi perdemiz finale'in altında
   (3400 < 3600), ürün sahnesi ikisinin arasında (3500) — kolye incelenebilir
   kalır, arkadaki her şey söner. */
.sk-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ı zaten `.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) .sk-perde{opacity:1}
body.ea-finale-open:not(.hr-fs-open) .sk-stage{position:relative;z-index:3500}

/* ===================== 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ı /parmak-izi ile PAYLAŞILAN katman, iki sayfada
   da birebir aynı kurallar gerekiyordu ve iki kopya birinin unutulması
   demekti. Burada yalnız SESE özgü olan kalıyor.
   Ölçü şeridi ve gizlilik satırı sahne SÜTUNUNDA kalıyor: kabuğa yalnız
   kutu taşınıyor (/gokyuzu'ndeki gerekçe — sütunun tamamı taşınsaydı kutu
   kardeşlerine yer açmak için küçülürdü). */

/* Kaydırma kilidi final SAHNEYE ODAKLANDIKTAN SONRA veriliyor (ses.js):
   önce kilitlenseydi programatik kaydırma da engellenir, kolye görüş
   alanının dışında kalırdı. */
body.sk-finale-kilit{overflow:hidden}

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

/* SES ÇALAR — "yüklediğim ses bu mu" sorusunun karşılığı.
   Dalga ekranda görünüyordu ama dinlenemiyordu; müşteri doğru kaydı
   seçtiğini doğrulayamıyordu. Şerit, kolyenin kendi dilinde: ince altın
   çizgi üstünde ilerleyen dolgu, dalga formunun ta kendisi gibi. */
.sk-calar{display:flex;align-items:center;gap:11px;margin-top:11px;padding:9px 13px 9px 9px;
  border-radius:9999px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09)}
.sk-calar-btn{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:50%;cursor:pointer;background:#ecdcb4;color:#171310;
  transition:transform .16s ease}
.sk-calar-btn:active{transform:scale(.94)}
.sk-calar-btn:focus-visible{outline:2px solid #ecdcb4;outline-offset:3px}
.sk-calar-cizgi{flex:1 1 auto;height:3px;border-radius:9999px;
  background:rgba(255,255,255,.14);overflow:hidden;cursor:pointer}
/* Dokunma hedefi 3 px'lik çizgiden büyük olsun: şeridin kendisi ince kalır
   ama üstündeki saydam dolgu alanı parmakla yakalanabilir yükseklikte. */
.sk-calar-cizgi::before{content:'';display:block;height:22px;margin-top:-10px}
.sk-calar-cizgi i{display:block;height:100%;width:0;border-radius:9999px;
  background:linear-gradient(90deg,#d9c08f,#ecdcb4)}
.sk-calar-sure{flex:0 0 auto;font-size:11.5px;font-weight:400;letter-spacing:.03em;
  color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
@media (prefers-reduced-motion: reduce){ .sk-calar-btn{transition:none} }

/* ARKA YÜZ SES KODU — önizleme kutusu. */
.sk-qr{margin-top:14px;padding:13px 15px;border-radius:14px;
  background:rgba(217,192,143,.05);border:1px solid rgba(217,192,143,.2)}
.sk-qr-satir{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.sk-qr-satir input{flex:0 0 auto;width:19px;height:19px;margin-top:1px;accent-color:#d9c08f;cursor:pointer}
.sk-qr-satir b{display:block;font-size:13px;font-weight:500;color:#f4f1ea}
.sk-qr-satir i{display:block;margin-top:3px;font-size:12px;font-style:normal;font-weight:300;
  line-height:1.5;color:rgba(244,241,234,.6)}
.sk-qr-not{margin:9px 0 0;font-size:11.5px;font-weight:300;line-height:1.55;
  color:rgba(244,241,234,.5)}