/* Erfa Atelier — "Size Özel" (cizim.php) sayfa stilleri.
 * Marka dili: styles.css ile aynı palet/tipografi; tüm sınıflar cz- önekiyle.
 */

/* ------------------------------------------------ üst ilerleme çizgisi -- */
.cz-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;background:linear-gradient(90deg,rgba(255,255,255,.25),#e8eaee 60%,#fff);box-shadow:0 0 12px rgba(232,234,238,.5);pointer-events:none}

/* --------------------------------------------------------------- hero -- */
.cz-hero{position:relative;min-height:100dvh;overflow:hidden;display:flex;align-items:center;padding:clamp(110px,14vh,150px) clamp(16px,4vw,80px) clamp(60px,9vh,90px);background:radial-gradient(110% 90% at 78% 12%,#3a332b 0%,#2a251e 40%,#17130e 78%,#120e09 100%)}
.cz-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 70% 38%,rgba(240,235,225,.10),transparent 70%);pointer-events:none}
.cz-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;width:100%;max-width:1300px;margin:0 auto}
@media(max-width:900px){
  .cz-hero-grid{grid-template-columns:1fr;gap:34px}
  .cz-hero{min-height:100svh;padding-top:110px}
  .cz-hero-stage{order:-1;max-width:min(78vw,340px);margin:0 auto}
}

/* Sahne: kağıt + karalama + parçacıklar + kolye */
.cz-hero-stage{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-left:auto}
@media(max-width:900px){.cz-hero-stage{margin:0 auto}}

.cz-paper{position:absolute;inset:6%;border-radius:6px;background:linear-gradient(160deg,#f6f1e7 0%,#efe8da 55%,#e7dfcf 100%);box-shadow:0 30px 70px rgba(0,0,0,.5),0 4px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.8);transform:rotate(-2.5deg);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.cz-paper::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(120,100,70,.028) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,70,.02) 0 1px,transparent 1px 4px);pointer-events:none}
.cz-paper::after{content:"";position:absolute;top:-10px;left:50%;width:92px;height:26px;transform:translateX(-50%) rotate(1.5deg);background:rgba(214,202,178,.55);border-left:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.15)}

.cz-doodle{position:absolute;inset:6%;width:88%;height:88%;margin:auto;overflow:visible}
.cz-pencil{stroke:#43403a;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.cz-pencil-2{stroke:#57534b;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.cz-trace{stroke:url(#czSilverGrad);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:url(#czGlow);opacity:0}
.cz-laser-dot{opacity:0;filter:url(#czGlow)}

/* Parçacıklar */
.cz-particles{position:absolute;inset:0;pointer-events:none}
.cz-particles span{position:absolute;bottom:34%;left:50%;width:4px;height:4px;border-radius:50%;background:linear-gradient(180deg,#fff,#aeb3bb);opacity:0;box-shadow:0 0 8px rgba(240,242,246,.8)}
@keyframes czFloat{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}12%{opacity:.95}70%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx,0),-190px,0) scale(1.05)}}

/* Kolye final sahnesi */
.cz-pendant{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.9);transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1)}
.cz-pendant svg{width:86%;height:86%;overflow:visible}
.cz-sheen{opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes czSheen{0%{transform:translateX(-130%) rotate(18deg);opacity:0}18%{opacity:.55}55%{opacity:.55}100%{transform:translateX(140%) rotate(18deg);opacity:0}}

/* Sahne durum makinesi (JS data-cz-hero üstünde cz-s1..cz-s4 sınıflarını döndürür) */
.cz-s1 .cz-pencil{animation:czDraw 2s cubic-bezier(.4,0,.3,1) forwards}
.cz-s1 .cz-pencil-2{animation:czDraw 1s .45s cubic-bezier(.4,0,.3,1) forwards;animation-delay:1.5s}
.cz-s2 .cz-pencil,.cz-s3 .cz-pencil,.cz-s2 .cz-pencil-2,.cz-s3 .cz-pencil-2{stroke-dashoffset:0}
.cz-s2 .cz-particles span,.cz-s3 .cz-particles span{animation:czFloat 2.6s ease-out infinite;animation-delay:var(--d,0s)}
.cz-s3 .cz-trace{opacity:1;animation:czDraw 2.3s linear forwards}
.cz-s3 .cz-laser-dot{opacity:1}
.cz-s3 .cz-pencil,.cz-s3 .cz-pencil-2{opacity:.25;transition:opacity .8s}
.cz-s4 .cz-paper{opacity:0;transform:rotate(-2.5deg) translateY(26px) scale(.96)}
.cz-s4 .cz-doodle{opacity:0;transition:opacity .7s}
.cz-s4 .cz-particles span{opacity:0}
.cz-s4 .cz-pendant{opacity:1;transform:scale(1)}
.cz-s4 .cz-sheen{animation:czSheen 2.6s .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes czDraw{to{stroke-dashoffset:0}}

/* Sahne alt yazısı */
.cz-stage-caption{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;transition:opacity .5s}

/* Kaydırma ipucu */
.cz-scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.45);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.cz-scroll-hint::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);animation:czHint 2.2s ease-in-out infinite}
@keyframes czHint{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media(max-width:900px){.cz-scroll-hint{display:none}}

/* ------------------------------------------------------------- marquee -- */
.cz-marquee{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:clamp(18px,3vh,28px) 0;background:#141009}
.cz-marquee-track{display:inline-flex;gap:clamp(28px,4vw,64px);animation:marquee 42s linear infinite;will-change:transform}
.cz-marquee-track span{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(20px,2.6vw,32px);color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:clamp(28px,4vw,64px)}
.cz-marquee-track span::after{content:"·";color:rgba(255,255,255,.25)}

/* ------------------------------------------------------------ bölümler -- */
.cz-chapter{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center;max-width:1200px;margin:0 auto;padding:clamp(56px,9vh,110px) 0}
.cz-chapter + .cz-chapter{border-top:1px solid rgba(255,255,255,.07)}
.cz-chapter.cz-flip .cz-chapter-visual{order:2}
@media(max-width:820px){.cz-chapter{grid-template-columns:1fr;gap:26px}.cz-chapter.cz-flip .cz-chapter-visual{order:0}}
.cz-chapter-no{position:absolute;top:clamp(8px,2vh,20px);right:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(90px,14vw,190px);line-height:1;color:rgba(255,255,255,.045);pointer-events:none;user-select:none}
.cz-chapter-visual{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin:0 auto;border-radius:24px;background:radial-gradient(90% 90% at 50% 30%,#2e2822 0%,#1e1a14 70%,#171310 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cz-chapter-visual svg{width:72%;height:72%;overflow:visible}

/* ------------------------------------------------------------- atölye --- */
.cz-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;border-radius:20px;border:1.5px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.03);padding:clamp(28px,4vw,46px) 20px;cursor:pointer;transition:border-color .3s,background .3s;width:100%;color:#fff;font-family:'Barlow',sans-serif}
.cz-drop:hover,.cz-drop:focus-visible,.cz-drop.is-over{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);outline:none}
.cz-drop:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.25)}

.cz-stagebox{position:relative;aspect-ratio:1;width:100%;border-radius:20px;overflow:hidden;background:#14100b;box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}

/* Mobil: önizleme yapışkan kalır, seçenekler altından akar —
   ayar değiştirirken sonuç hep gözünün önünde. */
@media(max-width:900px){
  .cz-builder-card{overflow:visible !important} /* overflow:hidden sticky'yi kırar */
  .cz-stagebox{position:sticky;top:70px;z-index:6;width:min(100%,40vh);margin:0 auto;box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.08)}
  [data-cz-stage-wrap]{scroll-margin-top:78px}
}

/* Fiyat rozeti: tuvalin üstünde, her zaman görünür */
.cz-price{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;flex-direction:column;gap:0;padding:6px 11px;border-radius:11px;background:rgba(10,8,5,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 1px rgba(255,255,255,.14);color:#fff;font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;pointer-events:none}
.cz-price span{font-size:11px;font-weight:400;letter-spacing:.07em;color:rgba(255,255,255,.6);text-transform:uppercase}

/* "Sürükleyip çevirin" ipucu */
.cz-hint{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:9999px;background:rgba(10,8,5,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 1px rgba(255,255,255,.14);color:rgba(255,255,255,.92);font-size:12px;font-weight:400;pointer-events:none;animation:czHintPulse 1.6s ease-in-out infinite}
.cz-hint svg{animation:czHintSwing 1.6s ease-in-out infinite}
@keyframes czHintPulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes czHintSwing{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

/* Renk seçici noktaları */
.cz-dot{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:7px;vertical-align:-2px;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.4)}
.cz-dot-gumus{background:linear-gradient(135deg,#f2f3f5,#9ea3ab)}
.cz-dot-altin{background:linear-gradient(135deg,#f7e8c0,#c8a352)}
.cz-dot-rose{background:linear-gradient(135deg,#f6d9cc,#c98266)}
.cz-stagebox > canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.012);transform-origin:center;
  transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1),filter 1s ease}
.cz-stagebox > canvas:not(.is-active){filter:blur(1.4px)}
.cz-stagebox > canvas.is-active{opacity:1;transform:none;filter:none}

/* 3B gümüş sahnesi: sabit zincir fonu + kalınlığı olan dönen plaka */
.cz-silver{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 1s cubic-bezier(.22,1,.36,1);perspective:1200px;touch-action:none;cursor:grab}
.cz-silver.is-active{opacity:1;pointer-events:auto}
.cz-silver:active{cursor:grabbing}
.cz-chainbg{position:absolute;inset:0;width:100%;height:100%}
/* Gerçek 3D (WebGL) kolye tuvali — gümüş sahnesinde 2B yüzlerin yerini alır */
.cz-3dgl{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:3;
  touch-action:none;cursor:grab;transition:opacity .85s cubic-bezier(.22,1,.36,1)}
.cz-3dgl.is-on{opacity:1;pointer-events:none}
.cz-3dgl:active{cursor:grabbing}
.cz-silver.gl-on .cz-3d{opacity:0!important}
.cz-3d{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.35,0,.25,1)}
.cz-3d.is-dragging{transition:none}
.cz-3d canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cz-3d canvas[data-face]{backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* Gölge dokuya pişirilmez; silüeti takip eden CSS gölgesi her iki yüzde temiz. */
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.42))}
/* Kenar katmanları: ince sokak/dantel kesimlerde 14 katman üst üste binince koyu
   kontur izi bırakıyordu ("arka yüzde siyah çizgiler") → yığın yumuşatıldı. */
.cz-3d .cz-edge{opacity:.34}
/* Lazer aşaması: ışın yukarıdan aşağı süzülürken deseni gerçekten "işler".
   Klip, ışının geçtiği yere kadar deseni açar; altı henüz işlenmemiş görünür. */
.cz-stagebox.is-lasering canvas[data-stage="laser"].is-active{animation:czEtch 2.2s cubic-bezier(.45,0,.15,1) forwards}
@keyframes czEtch{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 -3% 0)}}
/* ışın */
.cz-stagebox .cz-scanline{position:absolute;left:-5%;right:-5%;top:0;height:3px;opacity:0;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(255,190,120,.12) 14%,#fff6ec 46%,#ffd7a3 54%,rgba(255,190,120,.12) 86%,transparent);
  box-shadow:0 0 26px 5px rgba(255,168,88,.75),0 0 70px 14px rgba(255,120,50,.32)}
.cz-stagebox.is-lasering .cz-scanline{animation:czScan 2.2s cubic-bezier(.45,0,.15,1) forwards}
@keyframes czScan{0%{top:1%;opacity:0}5%{opacity:1}92%{opacity:1}100%{top:99%;opacity:0}}
/* işlenirken sıcak atölye parıltısı yükselip söner */
.cz-stagebox.is-lasering::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(130% 55% at 50% 0%,rgba(255,150,70,.14),transparent 62%);animation:czGlow 2.2s ease forwards}
@keyframes czGlow{0%,100%{opacity:0}28%,72%{opacity:1}}
.cz-stagebox-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4);font-size:13px;font-weight:300;text-align:center;padding:20px}


/* Ornek karalamalar KAGIT metaforu tasiyor, o yuzden acik zeminliler ve bu
   dogru. Ama olculdugunde sayfanin EN PARLAK ogesiydiler: koyu panelde uc
   krem kare, birincil eylemden (Devam) daha cok dikkat cekiyordu.
   Metafor korunuyor, luminans kisiliyor — kagit hala kagit, ama artik
   sahnenin onune gecmiyor. */
.cz-sample{cursor:pointer;border:none;padding:0;border-radius:14px;overflow:hidden;background:#e2dac9;filter:brightness(.9) saturate(.95);aspect-ratio:1;width:100%;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.cz-sample:hover,.cz-sample:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35);outline:none}
.cz-sample img{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------------------------------- seçenekler + form --- */
.cz-optrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.cz-optlabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ea-text-soft);min-width:52px;text-align:right}
@media(max-width:900px){
  /* Mobilde seçenekler SARMALANIR — hiçbir seçenek ekran dışında gizlenmez.
     Etiket kendi satırında; dokunma hedefleri 46px. */
  .cz-optrow{flex-wrap:wrap;overflow:visible;justify-content:flex-start;gap:8px;padding:0}
  .cz-optlabel{flex:1 0 100%;min-width:0;text-align:left;margin-bottom:1px}
  .cz-textinput{min-width:0;width:100%;max-width:none}
}
.cz-textinput{width:100%;max-width:340px;padding:11px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font-family:'Barlow',sans-serif;font-size:13px;text-align:center}
.cz-engrave-panel{border-top:1px solid rgba(255,255,255,.08);margin-top:6px;padding-top:14px;display:flex;flex-direction:column;gap:11px}
/* OZGULLUK .cz-pill'in USTUNE cikarildi (0,2,0).
   .cz-pill tabani cizim.css'ten atelier.css'e tasindi; atelier.css
   cizim.css'ten SONRA yuklendigi icin (cizim.php:105 vs 106) esit
   ozgullukteki bu kurallari EZMEYE basladi: dort font onizleme dugmesi
   de Barlow 12px'e dustu — olctum. Font seciciinin tek gorsel ipucu
   hangi fontun nasil gorundugu; o tamamen kaybolmustu.
   Sinifi .cz-pill ile birlestirmek kurali dosya sirasindan bagimsiz
   kilar ve atelier.css'teki mobil medya sorgusuna da dayanir. */
.cz-pill.cz-font-zarif{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:14px}
.cz-pill.cz-font-elyazisi{font-family:'Caveat',cursive;font-size:16px}
.cz-pill.cz-font-imza{font-family:'Great Vibes',cursive;font-size:14px}
.cz-pill.cz-font-modern{font-family:'Barlow',sans-serif;font-weight:500;font-size:12px}
/* Ayni sebep: .cz-pill'in padding:9px 15px + min-height:44px degerleri
   bu kutuyu eziyordu. Dokunma hedefi 44px korunuyor ama kare kaliyor:
   40px yerine 44x44 -> hem WCAG hem ikon oranlari dogru. */
.cz-pill.cz-sym-btn{width:44px;height:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.cz-pill.cz-sym-btn svg{width:20px;height:20px;flex:0 0 auto}
/* Dokunma hedefi: elemanın KUTUSU 44px yüksekliğindedir, ray yalnız çizilir.
   Önceden kutu 3px'ti — parmakla neredeyse tutulamıyordu (WCAG 2.5.5 ve 2.5.8
   ihlali). Kutu şeffaf, ray ::-*-track ile çizilir, görüntü aynı kalır. */
.cz-range{-webkit-appearance:none;appearance:none;width:150px;height:44px;
  background:transparent;outline:none;cursor:pointer}
.cz-range::-webkit-slider-runnable-track{height:3px;border-radius:9999px;background:rgba(255,255,255,.2)}
.cz-range::-moz-range-track{height:3px;border-radius:9999px;background:rgba(255,255,255,.2)}
.cz-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  border-radius:50%;background:#fff;border:none;cursor:pointer;margin-top:-10.5px}
.cz-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:none;cursor:pointer}
.cz-range:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:4px}

.cz-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.cz-form-grid{grid-template-columns:1fr}}
.cz-input{width:100%;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font-family:'Barlow',sans-serif;font-size:14px}
textarea.cz-input{resize:vertical;min-height:88px;border-radius:16px}
.cz-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12px;font-weight:300;color:rgba(255,255,255,.65);line-height:1.5}
.cz-check input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:18px;height:18px;margin-top:1px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:transparent;cursor:pointer;display:grid;place-content:center}
.cz-check input:checked{background:#8fbf9f;border-color:#8fbf9f}
.cz-check input:checked::before{content:"✓";color:#0c1810;font-size:12px;font-weight:700}
.cz-check input:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}
.cz-check a{color:rgba(255,255,255,.85)}

/* ------------------------------------------------------------- galeri --- */
.cz-card{position:relative;display:block;width:100%;border:none;padding:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;cursor:pointer;background:#171310;text-align:left;font-family:'Barlow',sans-serif}
.cz-card:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
.cz-card-before,.cz-card-after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cz-card-before{background:linear-gradient(160deg,#f6f1e7,#e9e1d0)}
.cz-card-before svg{width:62%;height:62%}
.cz-card-after{background:radial-gradient(85% 85% at 50% 32%,#312b24 0%,#1d1913 65%,#15110c 100%);clip-path:circle(0% at 82% 86%);transition:clip-path 1s cubic-bezier(.6,0,.2,1)}
.cz-card-after svg{width:70%;height:70%;overflow:visible}
.cz-card:hover .cz-card-after,.cz-card:focus-visible .cz-card-after,.cz-card.is-on .cz-card-after{clip-path:circle(135% at 82% 86%)}
.cz-card-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.95);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 10px;border-radius:9999px}
.cz-card-hint{position:absolute;right:12px;bottom:12px;z-index:2;width:36px;height:36px;border-radius:9999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .4s}
.cz-card:hover .cz-card-hint{transform:rotate(180deg)}

/* --------------------------------------------------------------- SSS ---- */
.cz-faq-item{border-bottom:1px solid rgba(255,255,255,.1)}
.cz-faq-q{cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;background:none;border:none;color:#fff;font-family:'Barlow',sans-serif;font-size:16px;font-weight:400;text-align:left}
.cz-faq-q:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px;border-radius:6px}
.cz-faq-arrow{flex-shrink:0;font-size:20px;font-weight:300;color:rgba(255,255,255,.5);transition:transform .4s cubic-bezier(.16,1,.3,1);line-height:1}
/* Açılır cevap grid-template-rows ile açılır, max-height ile DEĞİL:
   max-height hem her karede yerleşim hesabı tetikliyor hem de 260px'lik sabit
   bir tavan dayatıyordu — o tavanı aşan bir cevap sessizce kırpılırdı.
   0fr→1fr içeriğin gerçek yüksekliğine göre açılır, kırpma olmaz. */
.cz-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
/* Daralan öğe dolgusuz bir SARMALAYICI olmalı: dolgu doğrudan <p>'de kalırsa
   0fr satırında min-height:0 ile bile kendi alt dolgusu (22px) duruyor ve her
   kapalı soruda 22px boşluk kalıyordu (ölçüldü). */
.cz-faq-a>div{overflow:hidden;min-height:0}
.cz-faq-a p{font-size:14px;font-weight:300;color:rgba(255,255,255,.68);line-height:1.7;padding:0 4px 22px;max-width:64ch}
[data-faq-item].is-open .cz-faq-a{grid-template-rows:1fr}
[data-faq-item].is-open .cz-faq-arrow{transform:rotate(45deg)}

/* ------------------------------------------------- hareket azaltma ------ */
@media (prefers-reduced-motion: reduce){
  .cz-hero *,.cz-marquee-track,.cz-scroll-hint::after{animation:none !important;transition:none !important}
  .cz-pencil,.cz-pencil-2{stroke-dashoffset:0}
  .cz-pendant{opacity:1;transform:none}
  .cz-paper{opacity:0}
  .cz-doodle{opacity:0}
  .cz-marquee-track{white-space:normal;display:block}
  .cz-card-after{transition:none}
  .cz-stagebox canvas{transition:opacity .1s}
  .cz-stagebox.is-lasering .cz-scanline{display:none}
  .cz-stagebox.is-lasering::after{display:none}
  .cz-stagebox.is-lasering canvas[data-stage="laser"].is-active{animation:none;clip-path:none}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ------------------------------------------------ fotoğraf vitrini ------- */
.oz-vitrin-wrap{background:#1a1612;padding:clamp(56px,9vh,100px) clamp(16px,4vw,80px)}
.oz-vitrin-head{max-width:1200px;margin:0 auto clamp(24px,4vh,40px)}
.oz-vitrin-kicker{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:14px}
.oz-vitrin-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(30px,4.5vw,56px);line-height:.95;letter-spacing:-.03em}
.oz-vitrin{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(120px,16vw,220px);gap:clamp(10px,1.4vw,18px)}
.oz-foto{margin:0;border-radius:18px;overflow:hidden;background:#241f19}
.oz-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.oz-foto:hover img{transform:scale(1.04)}
.oz-foto:nth-child(1){grid-column:span 4;grid-row:span 2}
.oz-foto:nth-child(2){grid-column:span 2}
.oz-foto:nth-child(3){grid-column:span 2}
.oz-foto:nth-child(4){grid-column:span 2}
.oz-foto:nth-child(5){grid-column:span 2;grid-row:span 2}
.oz-foto:nth-child(6){grid-column:span 2}
@media(max-width:760px){
  .oz-vitrin{grid-template-columns:repeat(2,1fr);grid-auto-rows:38vw}
  .oz-foto:nth-child(1){grid-column:span 2}
  .oz-foto:nth-child(n+2){grid-column:span 1;grid-row:span 1}
}

/* ===== GIRIS KOLONU ACIKLAMA METINLERI ==================================
   `.cz-entry-col` icindeki iki bilgi satiri PHP'de inline
   `rgba(255,255,255,.45)` ile yaziliyor. Tam ekran kabugu koyulastirildiktan
   SONRA bile olculen degerler esigin altinda kaldi (gercek piksel, /cizim
   1280px):
     "Elinizde cizim yok mu? Birini deneyin"      4,10:1
     "Onizleme tamamen tarayicinizda olusur..."   4,08:1   (esik 4,5)
   Ikisi de guven metni — musteriye "gorseliniz sunucuya gitmiyor" diyen
   satirin okunamamasi anlamsiz. Tek kural ikisini de kapatiyor ve ileride
   eklenecek satirlari da korur. Inline oldugu icin !important sart;
   kalici cozum literalleri PHP'den kaldirmak (rapora yazildi). */
.cz-entry-col div,
.cz-entry-col label span{color:var(--ea-text-soft,rgba(244,241,234,.74)) !important}