/* =====================================================================
   Vektörel animasyonlar (includes/animasyon.php)
   🔴 Durgun hâl EKSİKSİZ: hareket yalnız `no-preference` altında eklenir.
   🔴 Ölçü CSS'te: svg'ye width/height verilmezse flex/grid kabını doldurur.
   ===================================================================== */

.cz{display:block;width:100%;height:auto;overflow:visible}
.cz-zemin{fill:#fff;stroke:var(--cizgi);stroke-width:1.5}
.cz-ince{fill:none;stroke:var(--murekkep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.cz-kalin{fill:none;stroke:var(--murekkep);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.cz-beton{fill:#ddd5c3}
.cz-mobilya{fill:var(--kagit-2);stroke:var(--murekkep);stroke-width:2;opacity:.9}
.cz-isik-seridi{fill:none;stroke:var(--isik);stroke-width:5;stroke-linecap:round}
.cz-huzme path,.cz-huzme{fill:rgba(233,196,106,.28)}
path.cz-huzme{fill:rgba(233,196,106,.28)}
.cz-spot,.cz-ampul{fill:#fff3c4;stroke:var(--isik);stroke-width:2}
.cz-gok{fill:#cfe8f7}
.cz-bulut ellipse{fill:#fff}
.cz-b1{transform:translateX(150px)}.cz-b2{transform:translateX(230px)}.cz-b3{transform:translateX(70px)}
.cz-gunes{fill:#ffe08a}
.cz-spot-halka{fill:none;stroke:var(--acik);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10;opacity:.7}
.cz-lamba{fill:var(--zumrut);stroke:var(--murekkep);stroke-width:2}
.cz-yaprak{fill:none;stroke:var(--zumrut);stroke-width:3;stroke-linecap:round}
.cz-duvar{fill:#efe9dc;stroke:var(--murekkep);stroke-width:2}
.cz-ok-yol{fill:none;stroke:var(--zumrut);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cz-levha{fill:#efe9dc;stroke:var(--murekkep);stroke-width:2}
.cz-halka{fill:rgba(0,192,64,.15);stroke:var(--zumrut);stroke-width:2}
.cz-baslik{fill:var(--zumrut)}
.cz-profil{fill:none;stroke:var(--zumrut);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.cz-profil-2{stroke:var(--acik);stroke-width:3}
.cz-duvar-ham{fill:#e8e1d2}
.cz-boya{fill:var(--zumrut);opacity:.9}
.cz-rulo-govde{fill:var(--murekkep)}
.cz-sap{fill:var(--isik);stroke:var(--murekkep);stroke-width:2}
.cz-terazi{fill:var(--isik);stroke:var(--murekkep);stroke-width:2.5}
.cz-tup{fill:#fffbe8;stroke:var(--murekkep);stroke-width:2}
.cz-kabarcik{fill:var(--acik);stroke:var(--zumrut);stroke-width:2}
.cz-ince-nokta{fill:var(--murekkep);opacity:.7}
.cz-karo{fill:#e6efe9;stroke:var(--zumrut);stroke-width:2}
.cz-karo-2{fill:#c9e6d5}
.cz-mantol{fill:rgba(233,196,106,.45);stroke:var(--isik);stroke-width:5;stroke-linejoin:round}
.cz-ince-dolgu{fill:#fff;stroke:var(--murekkep);stroke-width:2;opacity:.9}
.cz-isi{fill:none;stroke:#e0623a;stroke-width:3;stroke-linecap:round;opacity:.85}

/* --- yerleşim: sayfa başında sağ üst köşe --- */
.sayfabasi .kap{position:relative}
.sayfabasi-cizim{width:min(100%,300px);margin:18px 0 0}
@media (min-width:960px){
  .sayfabasi.cizimli .kap{padding-right:380px;min-height:226px}
  /* 340 px = hizmet sayfasındaki yan sütunun genişliği: çizim onunla AYNI sol/sağ çizgide durur */
  .sayfabasi-cizim{position:absolute;right:0;top:0;margin:0;width:340px}
}

/* --- ana sayfa ışık huzmeleri --- */
.kahraman{position:relative;overflow:hidden}
.kahraman-ic{position:relative;z-index:1}
.huzme-arka{position:absolute;right:0;top:0;width:70%;height:100%;pointer-events:none}
.hz path{fill:rgba(233,196,106,.16)}
.hz .hz-2{fill:rgba(0,192,64,.07)}
.hz .hz-3{fill:rgba(233,196,106,.10)}
@media (max-width:959px){ .huzme-arka{width:100%;opacity:.8} }

/* --- adım okları --- */
.adimlar li{position:relative}
.adim-ok{display:none}
@media (min-width:960px){
  .adim-ok{display:block;position:absolute;right:-30px;top:34px;width:34px;height:17px;z-index:2;fill:none;stroke:var(--zumrut);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 5}
}

/* =====================================================================
   HAREKET — yalnız kullanıcı azaltmak istemediyse
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* 1 asma tavan: led nefesi */
  .cz-asma-tavan .cz-isik-seridi{animation:cz-nefes 3.2s ease-in-out infinite}
  .cz-asma-tavan .cz-huzme{animation:cz-nefes 3.2s ease-in-out infinite}
  .cz-asma-tavan .cz-spot{animation:cz-nefes 3.2s ease-in-out infinite .4s}
  @keyframes cz-nefes{0%,100%{opacity:.35}50%{opacity:1}}

  /* 2 gergi tavan: bulutlar süzülür (kare içinde kalır: clipPath) */
  .cz-bulut{animation:cz-sur 26s linear infinite}
  .cz-b1{animation-duration:24s;animation-delay:-8s}
  .cz-b2{animation-duration:34s;animation-delay:-22s}
  .cz-b3{animation-duration:20s;animation-delay:-3s}
  @keyframes cz-sur{from{transform:translateX(-50px)}to{transform:translateX(340px)}}
  .cz-gunes{animation:cz-nabiz 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes cz-nabiz{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

  /* 3 ev dekorasyonu: avize sallanır */
  .cz-salin{transform-box:view-box;transform-origin:160px 22px;animation:cz-salin 5s ease-in-out infinite}
  @keyframes cz-salin{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
  .cz-ev-dekorasyonu .cz-ampul{animation:cz-nefes 2.6s ease-in-out infinite}

  /* 4 bölme duvar: yerden yükselir */
  .cz-duvar-yuksel{transform-box:view-box;transform-origin:160px 168px;animation:cz-yuksel 6s ease-in-out infinite}
  @keyframes cz-yuksel{0%,8%{transform:scaleY(0)}35%,80%{transform:scaleY(1)}100%{transform:scaleY(0)}}
  .cz-bolme-duvar .cz-ok-yol{animation:cz-ok-git 3s ease-in-out infinite}
  @keyframes cz-ok-git{0%,100%{opacity:.25}50%{opacity:1}}

  /* 5 alçıpan: vidalar sırayla çakılır */
  .cz-vida{transform-box:fill-box;transform-origin:center;animation:cz-vida 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
  @keyframes cz-vida{0%,6%{transform:scale(0);opacity:0}16%{transform:scale(1.25);opacity:1}22%,86%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}

  /* 6 kartonpiyer: profil kendini çizer */
  .cz-profil{stroke-dasharray:100;animation:cz-ciz 5.5s ease-in-out infinite}
  .cz-profil-2{animation-delay:.5s}
  @keyframes cz-ciz{0%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}

  /* 7 boya: rulo geçtikçe duvar boyanır */
  .cz-boya{transform-box:fill-box;transform-origin:left center;animation:cz-boya 5.5s ease-in-out infinite}
  .cz-rulo{animation:cz-rulo 5.5s ease-in-out infinite}
  @keyframes cz-boya{0%{transform:scaleX(0)}50%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  @keyframes cz-rulo{0%{transform:translateX(0)}50%,80%{transform:translateX(212px)}100%{transform:translateX(0)}}

  /* 8 tadilat: terazi oynar, kabarcık ortalanır */
  .cz-teraziye{transform-box:view-box;transform-origin:160px 101px;animation:cz-terazi 5s ease-in-out infinite}
  @keyframes cz-terazi{0%{transform:rotate(-4deg)}35%{transform:rotate(3deg)}60%{transform:rotate(-1deg)}80%,100%{transform:rotate(0)}}
  .cz-kabarcik{animation:cz-kabarcik 5s ease-in-out infinite}
  @keyframes cz-kabarcik{0%{transform:translateX(-22px)}35%{transform:translateX(18px)}60%{transform:translateX(-6px)}80%,100%{transform:translateX(0)}}

  /* 9 seramik: karolar yerine oturur */
  .cz-karo{transform-box:fill-box;transform-origin:center;animation:cz-karo 7s ease-in-out infinite;animation-delay:calc(var(--i) * .13s)}
  @keyframes cz-karo{0%,4%{transform:scale(.2);opacity:0}14%,84%{transform:scale(1);opacity:1}100%{transform:scale(.2);opacity:0}}

  /* 10 mantolama: yalıtım nefes alır, ısı içeride yükselir */
  .cz-mantol{animation:cz-nefes 4s ease-in-out infinite}
  .cz-isi{animation:cz-isi 3.2s ease-in infinite}
  .cz-isi-2{animation-delay:-1.1s}.cz-isi-3{animation-delay:-2.1s}
  @keyframes cz-isi{0%{transform:translateY(8px);opacity:0}30%{opacity:.9}100%{transform:translateY(-14px);opacity:0}}

  /* ana sayfa ışık huzmeleri */
  .hz-1{animation:cz-nefes-yumusak 9s ease-in-out infinite}
  .hz-2{animation:cz-nefes-yumusak 12s ease-in-out infinite -4s}
  .hz-3{animation:cz-nefes-yumusak 10s ease-in-out infinite -7s}
  @keyframes cz-nefes-yumusak{0%,100%{opacity:.35}50%{opacity:1}}

  /* adım okları: kesik çizgi akar */
  .adim-ok{animation:cz-akis 1.2s linear infinite}
  @keyframes cz-akis{to{stroke-dashoffset:-18}}
}

/* =====================================================================
   ANA SAYFA EKLERİ: sarkıt avize · mini çizimler · köşe işaretleri · cetvel
   ===================================================================== */
.mini-cizim{width:min(100%,340px);margin:0 0 22px}
.mini-cizim .cz{box-shadow:var(--gol);border-radius:14px}

/* sarkıt avize: yalnız geniş ekranda, iki sütunun arasındaki boşlukta */
.sarkit{display:none}
/* 1200 px altında metin sütunu yukarı yaklaşır ve avize etikete biner: orada gösterilmez */
@media (min-width:1200px){
  /* metin sütununun üstündeki boş alan: içerik sütununun sol kenarından 212 px içeride */
  .sarkit{display:block;position:absolute;z-index:2;top:0;left:calc(max(16px, (100% - 1180px) / 2) + 212px);width:44px;height:auto;pointer-events:none}
}
.sk-ip{fill:none;stroke:var(--murekkep);stroke-width:2;opacity:.55}
.sk-golge{fill:var(--zumrut);stroke:var(--murekkep);stroke-width:1.6}
.sk-huzme{fill:rgba(233,196,106,.32)}
.sk-ampul{fill:#fff3c4;stroke:var(--isik);stroke-width:1.6}

/* 3D tasarım karelerinde köşe işaretleri */
.tasarim-izgara a{position:relative}
.koseler{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linecap:round;pointer-events:none;opacity:.55;transition:opacity .3s}
.tasarim-izgara a:hover .koseler{opacity:1}

/* çağrı bandı cetveli */
.cta-cetvelli{position:relative;overflow:hidden;padding-bottom:clamp(56px,7vw,92px)}
.cetvel{position:absolute;left:0;bottom:0;width:100%;height:18px;stroke:rgba(255,255,255,.55);stroke-width:2;fill:none}

@media (prefers-reduced-motion:no-preference){
  .sarkit-salin{transform-box:view-box;transform-origin:30px 0;animation:cz-salin-lamba 6s ease-in-out infinite}
  @keyframes cz-salin-lamba{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
  .sk-huzme,.sk-ampul{animation:cz-nefes 3.4s ease-in-out infinite}
  .koseler path{stroke-dasharray:60;animation:cz-koseler 5s ease-in-out infinite}
  @keyframes cz-koseler{0%{stroke-dashoffset:60}30%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
  .cetvel pattern{animation:none}
  .cetvel rect{animation:cz-cetvel 9s linear infinite}
  @keyframes cz-cetvel{to{transform:translateX(-48px)}}
}

/* =====================================================================
   TAVAN ATÖLYESİ (includes/atolye.php)
   🔴 Seçim CSS'te: `:has(input:checked)`. Varsayılan (kademeli · sıcak · açık) tabanda yazılı:
   `:has()` yoksa çizim yine eksiksiz, yalnız seçenekler çizimi değiştirmez.
   ===================================================================== */
.bolum-giris-acik{color:var(--soluk)}
.td{--lc:#ffcf6b;display:grid;gap:22px;align-items:stretch;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){ .td{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:36px} }
.td-sahne{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);padding:12px;box-shadow:var(--gol)}
.td-oda{display:block;width:100%;height:auto;flex:1 1 auto;min-height:0;border-radius:10px;background:var(--kagit)}   /* iki sütun AYNI yükseklikte: oda ortada, kalan alan kağıt rengi */
.td-not{font-size:13.5px;color:var(--soluk);padding:10px 4px 2px}

/* oda boyaları */
.td-duvar-sol{fill:#e6dfcf}.td-duvar-sag{fill:#ddd5c2}.td-duvar-arka{fill:#efe9dc}
.td-zemin{fill:#cdb590}.td-tavan{fill:#fbf9f4;stroke:#d8d0bd;stroke-width:1.5}
.td-cerceve{fill:#fff;stroke:#3b3a36;stroke-width:3}.td-resim{fill:#9bb8a5}.td-gunes{fill:#f0c75e}
.td-hali{fill:#d9c9a7}
.td-koltuk{fill:#6f877d}.td-koltuk-sirt{fill:#80988d}.td-koltuk-kol{fill:#5f776d}

/* tavan tipleri */
.td-tavan-tipi{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.td-tavan-tipi.v-kademeli{opacity:1;visibility:visible}
.td:has(input[name=tv]:not([value=kademeli]):checked) .td-tavan-tipi.v-kademeli{opacity:0;visibility:hidden}
.td:has(input[name=tv][value=duz]:checked) .td-tavan-tipi.v-duz,
.td:has(input[name=tv][value=havuz]:checked) .td-tavan-tipi.v-havuz,
.td:has(input[name=tv][value=gergi]:checked) .td-tavan-tipi.v-gergi{opacity:1;visibility:visible}

.td-kademe{fill:#f3eee3;stroke:#cfc6b2;stroke-width:1.5}
.td-kademe-ic{fill:#ebe5d6;stroke:#d8d0bd;stroke-width:1.2}
.td-led{fill:none;stroke:var(--lc);stroke-width:3.5;stroke-linejoin:round;transition:stroke .4s}
.td-led-halo{fill:none;stroke:var(--lc);stroke-width:13;opacity:.28;stroke-linejoin:round;transition:stroke .4s}
.td-spot circle{fill:var(--lc);stroke:#fff;stroke-width:1.5;transition:fill .4s}
.td-spot-ic{fill:var(--lc);stroke:#7a6a3a;stroke-width:1.2}
.td-ip{stroke:#3b3a36;stroke-width:2;fill:none}
.td-avize-govde{fill:#d8b86a;stroke:#6b5420;stroke-width:1.5}
.td-avize-kollar{fill:none;stroke:#6b5420;stroke-width:2;stroke-linecap:round}
.td-gergi-zemin{fill:url(#tg-gok)}
.td-bulut ellipse{fill:#fff;opacity:.95}
.td-b1{transform:translateX(220px)}.td-b2{transform:translateX(340px)}.td-b3{transform:translateX(140px)}
.td-gergi-cerceve{fill:none;stroke:#fff;stroke-width:6;stroke-linejoin:round}

/* ışık */
.td-isik{transition:opacity .5s;pointer-events:none}
.td-koni{fill:url(#tg-koni)}
.td-zemin-isik{fill:url(#tg-zemin)}
.td-karanlik{fill:#0a1420;opacity:0;pointer-events:none;transition:opacity .5s}
.td:has(input[name=li][value=kapali]:checked){--lc:#8a8f98}
.td:has(input[name=li][value=kapali]:checked) .td-isik{opacity:0}
.td:has(input[name=li][value=kapali]:checked) .td-led-halo{opacity:0}
.td:has(input[name=li][value=kapali]:checked) .td-karanlik{opacity:.55}
.td:has(input[name=li][value=acik]:checked):has(input[name=lr][value=notr]:checked){--lc:#fff3da}
.td:has(input[name=li][value=acik]:checked):has(input[name=lr][value=soguk]:checked){--lc:#9fdcff}
.td:has(input[name=li][value=acik]:checked):has(input[name=lr][value=mor]:checked){--lc:#b48cff}

/* denetim paneli */
.td-panel{display:grid;gap:14px;align-content:start;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);padding:clamp(18px,2.5vw,28px)}
.td-grup{border:0;margin:0;padding:0;min-width:0}
.td-grup legend{font:700 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);padding:0;margin-bottom:10px}
.td-secenekler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.td-chip{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 10px;text-align:center;border:1.5px solid #cfc8b8;border-radius:999px;background:#fff;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.td-chip:hover{border-color:var(--zumrut)}
.td-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.td-chip:has(input:checked){background:var(--zumrut);border-color:var(--zumrut);color:#fff}
.td-chip:has(input:focus-visible){outline:3px solid var(--acik);outline-offset:3px}
.td-nokta{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.td-aciklamalar{min-height:4.6em}
/* eş boyutlu seçenekler: ışık rengi 4 sütun (geniş), diğerleri 2 sütun; CTA iki düğme yan yana */
@media (min-width:560px) and (max-width:959px){ .td-grup-lr .td-secenekler{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1180px){ .td-grup-lr .td-secenekler{grid-template-columns:repeat(4,minmax(0,1fr))} }
.td-wa{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
.td-wa .dugme{min-height:46px;padding:0 12px;font-size:15px}
.td-aciklama{display:none;margin:0;color:#2b3b33;font-size:15.5px;line-height:1.55}
.td-aciklama.v-kademeli{display:block}
.td:has(input[name=tv]:not([value=kademeli]):checked) .td-aciklama.v-kademeli{display:none}
.td:has(input[name=tv][value=duz]:checked) .td-aciklama.v-duz,
.td:has(input[name=tv][value=havuz]:checked) .td-aciklama.v-havuz,
.td:has(input[name=tv][value=gergi]:checked) .td-aciklama.v-gergi{display:block}
.td-ozet{padding:10px 14px;border-radius:12px;background:var(--kagit);font-size:15px}
.td-ozet b{margin-right:6px}

@media (prefers-reduced-motion:no-preference){
  .td-avize{transform-box:view-box;transform-origin:320px 44px;animation:cz-salin-lamba 6s ease-in-out infinite}
  .td-bulut{animation:cz-sur 28s linear infinite}
  .td-b1{animation-duration:26s;animation-delay:-8s}.td-b2{animation-duration:36s;animation-delay:-22s}.td-b3{animation-duration:22s;animation-delay:-3s}
  .td-koni,.td-led{animation:td-nabiz 5s ease-in-out infinite}
  @keyframes td-nabiz{0%,100%{opacity:.82}50%{opacity:1}}
}