/* HANN 3D — 3B model katalogu sayfasi (3d-catalogue.html) icin bicimler. ================================================================================== NEDEN AYRI DOSYA, site.css'e EKLENMEDI: site.css sitedeki TUM sayfalarda "?v=20260614a" ile cagriliyor. Oraya eklemek 89 KB'lik dosyayi yeniden yuklemeyi ve surum etiketini butun sayfalarda degistirmeyi gerektirirdi. Bu dosya YALNIZ 7 yeni sayfada icinde baglaniyor; baska hicbir sayfa etkilenmiyor. NEDEN JS ICINDEN ENJEKTE EDILMEDI (hann-3d.js oyle yapiyor): Kart izgarasi sayfada STATIK duruyor (SEO + .reveal animasyonu + i18n icin). Bicimi "defer" bir betik enjekte etseydi ilk boyamada izgara bicimsiz gorunurdu. Kilit (modal) bicimleri de burada — tek dosya, tek istek. Renkler site.css degiskenlerinden gelir; koyu/acik tema kendiliginden calisir. TEK ISTISNA: 3B sahnenin zemini. Urun detayindaki sahneyle ayni kalsin diye (hann-3d.js .h3d-sahne) her iki temada da ACIK gri degradedir — modeller acik zemin icin isiklandirildi, koyu zeminde metal parcalar kayboluyor. */ /* ========================================================= arama cubugu === */ /* Gorunum sitenin kendi urun aramasindan (catalog-search.css .csearch-bar / .csb-input) alindi: ayni panel, ayni 14 px yaricap, ayni 46 px yukseklik. O dosya bu sayfada YUKLENMIYOR (yalniz catalog-search/catalog-product sayfalarinda var), o yuzden burada yeniden yaziliyor. */ .c3d-ara{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; } .c3d-ara-kutu{ flex:1 1 320px; min-width:0; display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--panel); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 16px 40px -26px rgba(0,0,0,.4); transition:border-color .3s; } .c3d-ara-kutu:focus-within{border-color:var(--hann-2)} .c3d-ara-kutu>svg{width:18px;height:18px;flex:none;color:var(--muted)} .c3d-ara-kutu input{ flex:1; min-width:0; height:46px; background:transparent; border:none; outline:none; font:500 1rem/1 var(--body); color:var(--txt); letter-spacing:.005em; } .c3d-ara-kutu input::placeholder{color:var(--faint);font-weight:400} /* Tarayicinin kendi temizleme carpisi gizleniyor; kendi dugmemiz var. */ .c3d-ara-kutu input::-webkit-search-decoration, .c3d-ara-kutu input::-webkit-search-cancel-button, .c3d-ara-kutu input::-webkit-search-results-button, .c3d-ara-kutu input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none} .c3d-ara-sil{ width:28px;height:28px;flex:none;border-radius:50%;border:0; display:inline-flex;align-items:center;justify-content:center; color:var(--muted);background:transparent;cursor:pointer; transition:background .25s,color .25s; } .c3d-ara-sil[hidden]{display:none} .c3d-ara-sil:hover{background:var(--panel-2);color:var(--txt)} .c3d-ara-sil svg{width:15px;height:15px} /* "16 3D models" — sayac LTR'ye sabit, "3 / 16" RTL'de ters okunmasin. */ .c3d-sayi{ flex:none; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); white-space:nowrap; } .c3d-sayi b{color:var(--hann-2);font-weight:600;direction:ltr;unicode-bidi:isolate} .c3d-bos{ margin-bottom:22px; padding:18px 20px; border:1px dashed var(--line-2); border-radius:12px; color:var(--muted); font-size:.92rem; line-height:1.6; } .c3d-bos[hidden]{display:none} .c3d-bos a{color:var(--hann-2);font-weight:600;border-bottom:1px solid transparent;transition:border-color .3s} .c3d-bos a:hover{border-bottom-color:var(--hann-2)} @media(max-width:520px){ .c3d-ara{gap:10px} .c3d-sayi{font-size:.66rem} } /* ======================================================= kart izgarasi === */ .c3d-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } @media(max-width:1080px){ .c3d-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ .c3d-grid{grid-template-columns:repeat(2,1fr)} } /* Telefonda da IKI sutun: 16 urun tek sutunda cok uzun bir kaydirma oluyor, parcayi ayirt eden zaten kartin altindaki kod. Tek sutuna ancak cok dar ekranlarda dusuluyor. */ @media(max-width:359px){ .c3d-grid{grid-template-columns:1fr} } .c3d-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); color:var(--txt); transition:transform .4s var(--settle), border-color .4s, box-shadow .4s; } .c3d-card:hover{ transform:translateY(-5px); border-color:var(--hann-2); box-shadow:0 18px 40px -24px rgba(181,0,80,.55); } .c3d-card:focus-visible{outline:2px solid var(--glow);outline-offset:3px} /* Suzgecin disinda kalan kart. Acik yazilmasi SART: tarayicinin [hidden] kurali .c3d-card'in display:flex'ini yenemez. */ .c3d-card[hidden]{display:none} .c3d-shot{ position:relative; display:block; aspect-ratio:656/496; /* Onizleme kareleri acik zeminde uretildi; kutu da acik kalsin ki JPEG'in kenarlari koyu temada cerceve gibi durmasin. */ background:radial-gradient(120% 100% at 50% 30%,#fbfbfc 0%,#eceef0 60%,#e0e3e6 100%); } .c3d-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); } .c3d-card:hover .c3d-shot img{transform:scale(1.045)} .c3d-badge{ position:absolute; inset-inline-end:10px; top:10px; padding:3px 7px; border-radius:6px; background:rgba(20,23,26,.72); color:#fff; font-family:var(--mono); font-size:.56rem; font-weight:700; letter-spacing:.14em; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .3s; } .c3d-card:hover .c3d-badge{background:var(--hann)} /* Sahneye girisi anlatan kucuk isaret — yalnizca uzerine gelince. */ .c3d-spin{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; } .c3d-spin svg{width:44px;height:44px;color:var(--hann);filter:drop-shadow(0 2px 10px rgba(255,255,255,.85))} .c3d-card:hover .c3d-spin{opacity:1} .c3d-meta{ display:flex; flex-direction:column; gap:3px; padding:13px 14px 15px; border-top:1px solid var(--line); } .c3d-code{ font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.06em; color:var(--txt); } .c3d-type{font-size:.76rem; line-height:1.35; color:var(--muted)} @media (prefers-reduced-motion:reduce){ .c3d-card,.c3d-shot img,.c3d-badge,.c3d-spin{transition:none} .c3d-card:hover{transform:none} .c3d-card:hover .c3d-shot img{transform:none} } /* =============================================================== kilit === */ /* z-index 100000: WhatsApp dugmesi (99999), imlec (9999) ve grain (9998) dahil her seyin ustunde. Site .cur-dot/.cur-ring ile kendi imlecini ciziyor ve body'de "cursor:none" var; kilit onlarin USTUNDE kaldigi icin burada GERCEK imlec geri veriliyor (sahnede grab/grabbing — 3B icin zaten daha dogru bir isaret). */ .c3d-kilit{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); background:rgba(6,6,9,.78); -webkit-backdrop-filter:blur(9px) saturate(120%); backdrop-filter:blur(9px) saturate(120%); opacity:0; transition:opacity .3s var(--ease); cursor:default; } .c3d-kilit.is-on{opacity:1} .c3d-kilit[hidden]{display:none} /* Sinif HEM HEM uzerine konuyor. site.css'te "html{overflow-x:clip}" var; html kendi overflow'unu belirledigi anda body'ninki artik gorunume TASINMIYOR (CSS overflow yayilma kurali), yani tek basina "body{overflow:hidden}" sayfayi KILITLEMIYORDU — kilit acikken arkadaki izgara kayiyordu. */ html.c3d-acik, body.c3d-acik{overflow:hidden} .c3d-pencere{ position:relative; display:flex; flex-direction:column; width:min(1080px,100%); max-height:100%; border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:var(--panel); color:var(--txt); box-shadow:0 40px 90px -30px rgba(0,0,0,.75); transform:translateY(14px) scale(.985); transition:transform .35s var(--ease); } .c3d-kilit.is-on .c3d-pencere{transform:none} .c3d-bas{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--panel-2); } .c3d-bas-yazi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .c3d-bas-kod{ font-family:var(--mono); font-size:.86rem; font-weight:600; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .c3d-bas-tip{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .c3d-dugme{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; flex:none; height:38px; min-width:38px; padding:0 12px; border:1px solid var(--line-2); border-radius:20px; color:var(--txt); background:none; cursor:pointer; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; transition:border-color .3s,color .3s,background .3s; } .c3d-dugme:hover:not(:disabled){border-color:var(--hann-2);color:var(--hann-2)} .c3d-dugme:disabled{opacity:.35;cursor:default} .c3d-dugme svg{width:16px;height:16px;flex:none} .c3d-kapat svg{width:18px;height:18px} /* Oklar RTL'de de "onceki/sonraki" mantigina uysun. */ [dir="rtl"] .c3d-ok svg{transform:scaleX(-1)} /* flex-basis "auto" SART: masaustunde .c3d-pencere'nin kesin bir yuksekligi yok (yalniz max-height), dolayisiyla "flex:1" (basis 0) sahneyi SIFIR yuksekliginde birakiyordu. basis auto ile sahne asagidaki height'i alir; pencere max-height'i asarsa min-height:0 sayesinde kucululur. Mobilde pencere height:100% oldugu icin height:auto verilip flex-grow bosluğu dolduruyor. */ .c3d-sahne{ position:relative; flex:1 1 auto; min-height:0; height:min(62vh,620px); background:radial-gradient(120% 100% at 50% 30%,#fbfbfc 0%,#eceef0 60%,#e0e3e6 100%); cursor:grab; } .c3d-sahne:active{cursor:grabbing} .c3d-sahne canvas{display:block;width:100%;height:100%;touch-action:none} .c3d-durum{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; padding:20px; text-align:center; font:500 .82rem/1.4 var(--body); color:#6a737d; } .c3d-durum[hidden]{display:none} .c3d-fir{ width:16px;height:16px;flex:none;border:2px solid #d3d8dd;border-top-color:#b50050; border-radius:50%;animation:c3dFir .8s linear infinite; } @keyframes c3dFir{to{transform:rotate(360deg)}} /* site.css'teki reduced-motion blogu "*{animation-duration:.001ms!important}" diyor; halka orada donmuyor, donmus bir cember gibi kaliyor. O yuzden tamamen gizlenip yalniz "yukleniyor" yazisi birakiliyor. */ @media (prefers-reduced-motion:reduce){.c3d-fir{display:none}} .c3d-ipucu{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); max-width:92%; padding:5px 13px; border-radius:999px; background:rgba(255,255,255,.84); border:1px solid #e2e6ea; font:500 .7rem/1.3 var(--body); color:#6a737d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; transition:opacity .35s ease; } .c3d-ipucu.c3d-sus{opacity:0} .c3d-alt{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:13px 16px; border-top:1px solid var(--line); background:var(--panel-2); } /* "5 / 16" sayaci: bolu isareti iki yansiz sayi arasinda kaldigi icin RTL sayfada bidi algoritmasi diziyi "16 / 5" olarak siraliyordu. Kutu icinde yon LTR'ye sabitlenip yalitiliyor; kutunun sayfadaki yeri degismiyor. */ .c3d-sayac{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--faint); direction:ltr;unicode-bidi:isolate} .c3d-detay{ display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:600; color:var(--hann-2); transition:gap .3s var(--ease); } .c3d-detay:hover{gap:.85em} .c3d-detay svg{width:15px;height:15px} [dir="rtl"] .c3d-detay svg{transform:scaleX(-1)} @media(max-width:640px){ .c3d-kilit{padding:0} .c3d-pencere{width:100%;height:100%;max-height:100%;border:0;border-radius:0} .c3d-sahne{height:auto} .c3d-dugme{padding:0 10px} }