/* ========================================================================== LOVJA — AÇILIŞ SAHNESİ Sayfanın ilk ekranı bir sayfa değil, tek bir kapkara sahne: ortada ekranı kaplayan obje, çevresinde dönen yazı, on kelimelik metin. Kaydırınca AŞAĞISI KLASİK devam eder (stil.css) — sahne yalnız kapıdır. LOVJA'nın objesi BRILLIANT KESİM, çünkü markanın kuruluş cümlesi o: "Elmasın pırlantaya dönüşmesi gibi…". Desen amblemin kendisidir. Zemin saf siyah değil (#08090A) — saf siyahta taşın karanlık fasetleri zeminle birleşip kayboluyor, kesim okunmuyor. ── BU DOSYA stil.css'İN ÜSTÜNE YÜKLENİR ────────────────────────────── Ortak olan hiçbir şey burada TEKRAR TANIMLANMAZ: renk değişkenleri, yazı tipleri, gövde sıfırlaması stil.css'te. Burada yalnız sahnenin kendi şeyleri var. Sınıf adları da bilerek ayrıştırıldı — ikisinde de ".sahne" ve ".alt-sag" vardı ve artık AYNI SAYFADALAR: büyük sahne .sahne · diş ışık kutusu .isik-sahne sahnenin sağ altı .sahne-sag · alt bilginin sağı .alt-sag ========================================================================== */ :root{ /* İnce gürültü — gradyanlardaki basamakları kırmak için. Ayrı dosya değil, satır içi SVG: ek ağ isteği yok. */ --gurultu:url("data:image/svg+xml;utf8,"); --kara:#08090A; --sut:#F2F1EC; --gri:#7F868D; } /* ------------------------------------------------------------- üst bar TEK bar — klasik sitenin ayrı bir barı yok. Küçük, işlevsel, hep görünür. Ortadaki saat gerçekten İstanbul saati: süs değil, laboratuvarın nerede olduğunu söyleyen tek satır. */ /* Örtünün ÜSTÜNDE durur (z-index 70 > 60) — yoksa menü açıkken KAPAT düğmesi perdenin altında kalıyor ve çıkış yolu görünmüyordu. */ /* Üç sütunlu ızgara: saat GERÇEKTEN ortada durur. Esnek kutuda otomatik kenar boşluklarıyla ortalanıyordu ve logo ile düğmenin genişliği farklı olduğu için saat sola kayıyordu. */ .tepe{position:fixed;top:0;left:0;right:0;z-index:70;display:grid; grid-template-columns:1fr auto 1fr;align-items:center; padding:24px 32px;pointer-events:none; transition:background .3s,padding .3s,border-color .3s; border-bottom:1px solid transparent} .tepe>*{pointer-events:auto} /* Logo 15 pikselken çok küçük duruyordu: gerçek oranı 2,87 olduğu için genişliği yalnız 43 piksele geliyordu ve barın içinde kayboluyordu. 24 piksel → 69 piksel; ortadaki saat ve sağdaki MENÜ ile dengeli. */ .marka{height:24px;width:auto;filter:invert(1);opacity:.92} .yer{text-align:center;font:500 11.5px/1 var(--sans);letter-spacing:.16em;color:var(--gri)} .yer b{color:var(--sut);font-weight:500} .tepe-sol{display:flex;align-items:center;pointer-events:none} .tepe-sol a{pointer-events:auto} .tepe-sag{display:flex;align-items:center;gap:14px;justify-self:end} /* GERİ tuşu — barın kendi dili. Ayrı bir görünüm kurulmadı: menü tuşuyla aynı punto, aynı harf arası, aynı renk geçişi. Logonun hemen yanında duruyor, çünkü ikisi de "buradan çık" demek. */ .tepe-geri{display:inline-flex;align-items:center;gap:8px;margin-left:22px; text-decoration:none;color:#8B9298;font:600 11.5px/1 var(--sans); letter-spacing:.16em;text-transform:uppercase;transition:color .2s} .tepe-geri:hover{color:var(--pirinc-acik)} body.ortu-acik .tepe-geri{color:#62686F} body.ortu-acik .tepe-geri:hover{color:var(--kara)} @media (max-width:700px){ .tepe-geri{margin-left:14px} .tepe-geri .uz{display:none} } .ortu-tus{background:none;border:0;color:var(--sut);font:600 11.5px/1 var(--sans); letter-spacing:.18em;cursor:pointer;padding:8px 0} .ortu-tus:hover{color:var(--pirinc-acik)} /* Sahne bitince bar zemin kazanır. Aşağıdaki şeritlerin yarısı PORSELEN (açık) — saydam barda beyaz yazı orada tamamen kayboluyordu. */ body.gecti .tepe{background:rgba(12,13,14,.90);border-bottom-color:#24282C; padding:14px 32px; backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px)} /* Örtü açıkken zemin süt beyazı olur — bar da ona göre koyulaşır. */ body.ortu-acik .tepe{background:none;border-bottom-color:transparent} body.ortu-acik .ortu-tus{color:var(--kara)} body.ortu-acik .marka{filter:none;opacity:1} body.ortu-acik .yer{color:#62686F} body.ortu-acik .yer b{color:var(--kara)} body.ortu-acik .dil{color:#62686F} body.ortu-acik .dil a[aria-current]{color:var(--kara);background:#E0DFD8} /* ---------------------------------------------------------- sahne Kap uzun, içindeki sahne yapışık: sayfa kaydıkça sahne yerinde kalır, taş döner ve cümle değişir. Kap bitince klasik şeritler başlar. */ .sahne-kap{height:330vh;position:relative;background:var(--kara);color:var(--sut); --gecis-boy:100px;--toz-derinlik:260px} /* SINIRIN ALTINA TAŞAN TOZ. Sahnenin kendi tuvali .sahne'nin içinde ve orası overflow:hidden ile kırpılıyor, dolayısıyla toz sınırda kesiliyordu. Bu ikinci tuval KABIN DIŞINA sarkıyor ve ilk şeridin üstünü kaplıyor. z-index şeritlerin üstünde olmak zorunda: .serit position:relative ve z-index'i yok, yani belge sırasına göre sahnenin üstünde kalırdı. Tuval yalnız sınırın ALTINI değil, perdenin şeridini de kapsıyor: perde (yukarıdaki ::after) sahnenin son 100 pikselindeki tozu tamamen örtüyor, dolayısıyla arada tozsuz bir boşluk kalırdı. O bölgede toz bu tuvale, perdenin ÜSTÜNE yeniden çiziliyor — ağırlığı da perdenin kendi gücüyle aynı, yani iki kopya toplandığında parlaklık sabit. */ .toz-tasma{position:absolute;left:0;right:0;width:100%; bottom:calc(-1 * var(--toz-derinlik)); height:calc(var(--gecis-boy) + var(--toz-derinlik)); z-index:21;pointer-events:none} /* SAHNEDEN KLASİK ŞERİTLERE GEÇİŞ — KESKİN DEĞİL, SÖNEREK. Perde sahnenin alt kenarını ALTTAKİ ŞERİDİN RENGİNE eritiyor, böylece sınırda basamak kalmıyor. VARIŞ RENGİ ÖNEMLİ. Önce sahnenin kendi karasına (#08090A) eritiliyordu ve bu kusuru BÜYÜTÜYORDU: ölçüldü — sınırın hemen üstünde sahne 10,3, altındaki şerit 12,81 parlaklıkta. Karaya eritmek üstü 8,81'e indirip basamağı 2,5'ten 4'e çıkarıyor. Doğrusu şeridin rengine eritmek. Renk .serit--grafit-2 ile aynı (--grafit-2, #0C0D0E) — o şerit sahnenin hemen altındaki ilk şerit. Şeritlerin sırası değişirse burası da değişmeli. Duraklar düz değil yumuşatılmış: düz geçişte perdenin BAŞLADIĞI yerde eğim birden değişir ve o da ikinci bir çizgi gibi görünür. Yükseklik tek yerden ayarlanıyor — --gecis-boy. */ .sahne-kap::after{content:'';position:absolute;left:0;right:0;bottom:0; height:var(--gecis-boy);z-index:20;pointer-events:none; background:linear-gradient(to bottom, rgba(12,13,14,0) 0%, rgba(12,13,14,.04) 18%, rgba(12,13,14,.16) 34%, rgba(12,13,14,.38) 50%, rgba(12,13,14,.64) 66%, rgba(12,13,14,.86) 82%, rgba(12,13,14,1) 100%)} /* GİRİŞ GÖSTERİSİ BİTENE KADAR KAYDIRMA YOK. Sınıfı tas.js koyup tas.js kaldırıyor; kaldırma anı girişin bittiği satırda, yani süre iki yerde ayrı ayrı yazılmıyor. Bir aksilik olursa güvenlik zamanlayıcısı açıyor, ziyaretçi sayfada mahsur kalmıyor. Sınıf .kilit DEĞİL: menü ve çekmece onu kullanıyor; aynı olsaydı menü kapanınca giriş kilidi de kalkardı. Hem html hem body: kaydırılan öğe tarayıcıya göre değişiyor. overscroll-behavior dokunmatikte lastik gibi esnemeyi de kesiyor. */ html.giris-kilit,html.giris-kilit body{overflow:hidden;overscroll-behavior:none} /* METİN SEÇİMİ KAPALI. Sürüklerken yazının maviye boyanması sahneyi bozuyordu; ayrıca vitrini çevirirken imleç yazının üstünden geçince seçim başlıyordu. Form alanı yok, kopyalanacak bir şey de yok. */ body{-webkit-user-select:none;user-select:none} .sahne{position:sticky;top:0;height:100vh;overflow:hidden; display:grid;place-items:center} /* Tıklayınca disk masada dönen para gibi tur atıp kendi ön konumuna geri oturuyor. Elle çevirme kaldırıldı — disk hep karşıdan görünür. */ #tas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer} /* ------------------------------------------------------------- GİRİŞ Sahne BEYAZ ekranda SİYAH "LOVJA ◈ COM" ile açılır; ortadaki nokta amblemin kendisidir. Sonra zemin beyazdan siyaha döner ve amblem büyüyerek diske dönüşür. Yani marka göz önünde ürüne dönüşüyor. Zemin beyazdan SİYAHA "boyanarak" değil, saydamlaşarak geçiyor: altta zaten siyah sahne var. Yazı, zemin kararmadan ÖNCE çekiliyor — yoksa siyah yazı siyah zeminde kaybolurdu. Zamanlamalar tas.js'teki giriş aralıklarıyla eşleşir; biri değişirse öteki de değişmeli (G_BAS 2,10 · G_SON 4,40 · G_SAP_SON 5,40 sn). */ .giris{position:absolute;inset:0;z-index:15;display:grid;place-items:center; pointer-events:none;background-color:var(--sut); font:600 clamp(20px,4.2vw,54px)/1 var(--sans);letter-spacing:.24em; color:var(--kara); animation:girisZemin 2.1s cubic-bezier(.55,0,.25,1) forwards} /* Yazı ve amblem AYNI ızgara gözünde: ikisi de ekranın tam merkezinde. Amblem daha önce yazının içinde, iki kelimenin arasında duruyordu; ama "LOVJA" ile "COM" farklı genişlikte ve harf aralığı son harften sonra da boşluk bıraktığı için amblemin merkezi ekranın merkezine denk gelmiyordu (ölçüldü: 25 piksel kayık). Disk tam merkezde çizildiği için büyüyen amblem ile beliren disk üst üste oturmuyordu. */ .giris > *{grid-area:1/1} @keyframes girisZemin{ 0%, 44%{background-color:rgba(242,241,236,1)} 72%, 100%{background-color:rgba(242,241,236,0)} } /* İki kelime merkeze göre SİMETRİK yerleştiriliyor — akışa bırakılmıyor. Harf aralığı (.24em) son harften SONRA da boşluk bıraktığı için akışta sol taraf sağdan 0,24em daha geniş çıkıyor ve amblem "A"ya yapışıyordu. Sol kelimenin sağ kenarı o kadar içeri alınarak dengelendi. */ .giris-yazi{position:relative;width:100%;height:1em;white-space:nowrap} /* Kelime yalnız YANA KAYAR; belirme ve silinme harflerin işi (aşağıda). İkisi ayrı katman: kelime taşır, harf canlandırır. */ .giris-yazi span{position:absolute;top:0; animation:girisKelime 2.1s cubic-bezier(.55,0,.25,1) forwards} .giris-yazi span:first-child{--kay:-.5em;right:50%;margin-right:.40em;text-align:right} .giris-yazi span:last-child{--kay:.5em;left:50%;margin-left:.64em} @keyframes girisKelime{ 0%,40%{transform:translateX(0)} 62%,100%{transform:translateX(var(--kay))} } /* HARFLER tek tek gelir ve tek tek silinir. Her harf sıradaki komşusundan 50 ms sonra başlar (--i), yani yazı soldan sağa "yazılır". Gelirken aşağıdan yükselip netleşir, giderken yukarı doğru uzayıp bulanıklaşır — ışığın içinde eriyor gibi. Amblem tam o sırada büyümeye başlıyor. */ /* Doldurma "both" olmalı, "forwards" değil: harflerin sırası gecikmeyle geliyor ve yalnız "forwards" iken bekleyen harf o gecikme boyunca kendi DOĞAL hâlinde — yani tamamen görünür — duruyordu. Ölçüldü: 0,25 sn'de ilk harf %64 belirginken son iki harf %100 açıktı. "both" ile bekleyen harf de %0 keyframe'ini uygular, yani görünmez bekler. */ .giris-yazi i{display:inline-block;font-style:normal; animation:girisHarf 2.1s cubic-bezier(.55,0,.25,1) both; animation-delay:calc(var(--i) * 50ms)} @keyframes girisHarf{ 0%{opacity:0;transform:translateY(.40em) scaleY(1.45);filter:blur(9px)} 10%{opacity:1;transform:none;filter:blur(0)} 40%{opacity:1;transform:none;filter:blur(0)} 62%,100%{opacity:0;transform:translateY(-.26em) scaleY(1.35);filter:blur(11px)} } /* Amblem SİYAH — beyaz zeminde. filter yok; dosya zaten siyah. ── PİKSELLEŞME ────────────────────────────────────────────────────── Amblem SON boyunda yerleştirilir (21em) ve KÜÇÜLTÜLEREK gösterilir; önce 0,62em konup 34 kat BÜYÜTÜLÜYORDU. Satır içi svg olması bunu kurtarmıyor: tarayıcı transform canlandırması için öğeyi bir kez YERLEŞİM BOYUNDA piksel haritasına çevirip o dokuyu ölçekliyor. 25 pikselden 851 piksele gerilen doku ister istemez pikselli görünüyordu (ölçüldü: matrix(-34,...) ve ekranda 851 piksel). Büyük dokuyu küçültmek ise her boyda temiz. Yerleşim kutusu ekrandan taşabilir; .sahne zaten overflow:hidden. */ /* Boyu DİSKİN ÇAPINA eşit; ölçüyü tas.js yazıyor (--amblem-son) çünkü diskin yarıçapı orada belli. Önce yazı puntosuna bağlıydı, yani ekran GENİŞLİĞİNE — disk ise kısa kenara. Masaüstünde tesadüfen yakın duruyorlardı, tablette açıldı: amblem 680 piksele büyürken disk 452'de kalıyordu. Yedek değerler betik çalışmazsa diye. */ .giris-nokta{width:var(--amblem-son,60vmin);height:var(--amblem-son,60vmin); animation:girisNokta 2.1s cubic-bezier(.55,0,.2,1) forwards} /* Amblem büyürken TAM YARIM TUR döner (180°). Sekiz kollu bir desen olduğu için yarım tur sonunda yine kendine oturur; dönüş görülür ama biçim bozulmaz. Ölçekler eskisinin 34'te biri — görüntü birebir aynı, tabanı büyük. */ @keyframes girisNokta{ 0%{opacity:0;transform:scale(calc(var(--amblem-bas,.05) * .6)) rotate(0deg)} 11%{opacity:1;transform:scale(var(--amblem-bas,.05)) rotate(0deg)} 40%{opacity:1;transform:scale(var(--amblem-bas,.05)) rotate(0deg)} 70%{opacity:.24;transform:scale(.5) rotate(112deg)} 100%{opacity:0;transform:scale(1) rotate(180deg)} } /* Sahnenin geri kalanı giriş bitince belirir — yoksa açılış ekranında hepsi hazır durur ve girişin etkisini öldürür. */ .tepe,.bolumler,.sahne-sol,.sahne-sag,.isaret{ animation:uiGel 0.70s ease 0.95s backwards} @keyframes uiGel{from{opacity:0}} /* çember boyunca dönen yazı */ /* İKİ animasyon birlikte yazılmalı: yalnız "don" yazılırsa yukarıdaki uiGel'i eziyor ve halka giriş gösterisi boyunca ekranda duruyor. */ /* Dönme "transform" ile değil, ayrı "rotate" özelliğiyle yapılıyor — böylece "scale" serbest kalıyor ve taş dönerken hava akımı halkayı da geriyor (--gx/--gy'yi tas.js her karede yazıyor): yanlara açılıyor, dikeyde büzülüyor. Aynı transform'a hem animasyon hem betik yazsaydı biri ötekini ezerdi. */ /* overflow:visible ŞART. svg kendi çerçevesinin dışını varsayılan olarak KIRPAR; harfler rüzgârla savrulup 400 birimlik kutunun dışına çıkınca görünmez bir maskeye girmiş gibi yok oluyorlardı. */ /* Boy tas.js'ten geliyor (--halka-boy) — diskten türetiliyor, ikisi birbirine kilitli. Buradaki değer yalnız yedek: betik çalışmazsa. */ .halka{position:absolute; /* HALKA KENDİ KONUMUNU BİLİYOR. Önce hiç left/top yoktu: ortalanması yalnız .sahne'nin 'place-items:center' kuralına bırakılmıştı. Grid'in MUTLAK KONUMLU çocuğunu ortalaması tarayıcıya göre değişir, üstelik .sahne yapışkan — yapıştığı anda yeniden hesaplanabiliyor. iMac'te tam bu oldu: açılışta yerindeydi, ilk kaydırmada halka sol üst köşeye kaçtı ve taşla ilgisi kesildi (ölçüldü: çember merkezi ekranın 411,425 noktasında, oysa taş 1000,565'te). Sahnedeki bütün öğeler kendi köşesini biliyor; artık bu da biliyor. 'translate' ayrı bir özellik, 'rotate' ile çakışmaz — dönme animasyonu öğenin kendi merkezinde dönmeye devam eder. */ left:50%;top:50%;translate:-50% -50%; width:var(--halka-boy,min(96vmin,1040px)); height:var(--halka-boy,min(96vmin,1040px)); pointer-events:none;opacity:.62;overflow:visible; rotate:0deg; animation:don 54s linear infinite, uiGel 0.70s ease 0.95s backwards} .halka text{font:600 12.5px/1 var(--sans);letter-spacing:.42em;fill:var(--sut)} /* Ayırıcı noktalar gövdenin İKİ KATI. Yükseklikleri ELLE ayarlanıyor: "·" karakteri kendi kutusunda taban çizgisinin biraz üstünde durur ve punto iki katına çıkınca o yükseklik de iki katına çıkar. Yanındaki yazı BÜYÜK HARF olduğu için ikisinin görsel ortası tutmuyordu — nokta kelimelerin altına hizalı kalıyordu. translate ile ortaya alındı; dy kullanılmadı çünkü SVG'de dy birikir ve sonraki bütün parçaları kaydırır. */ /* Seçici GÜÇLÜ olmalı (.halka text.halka-nokta). Harfler artık tek tek öğesi olduğu için yukarıdaki '.halka text' kuralı doğrudan onlara değiyor ve daha güçlü; sade '.halka-nokta' yazılınca punto ezilip 12,5'e düşüyordu (ölçüldü). Önce iç öğelerdi, o kural onlara ulaşmıyordu. */ .halka text.halka-nokta{font-size:25px} /* gövdenin iki katı, MUTLAK */ /* Marka cümlesi ürün adı değil — daha ince ve büyük harfsiz dursun ki ürünlerden biri sanılmasın. */ .halka text.halka-ince{font-weight:300;letter-spacing:.30em} /* Ters yön: eksi. Diskin kendi dönüşünün tersine akıyor. */ @keyframes don{to{rotate:-360deg}} /* ------------------------------------------------------------- cümle Ekranda aynı anda TEK cümle durur. Kaydırdıkça değişir. */ .bolumler{position:absolute;left:32px;bottom:104px;right:32px; max-width:min(760px,72vw);pointer-events:none} /* NOT: h1 de .bolum olabiliyor (sayfanın ana başlığı ilk cümledir). Ayrı bir kural GEREKMİYOR — .bolum zaten punto, kalınlık ve boşluğu veriyor ve tarayıcının kendi h1 ölçüsünü eziyor. Bir ara buraya "font-size:inherit" yazılmıştı: özgüllüğü .bolum'dan yüksek olduğu için asıl puntoyu ezdi ve açılış başlığı 74 pikselden gövde puntosuna düştü. */ /* Saydamlık ve geçiş YOK: harfler ekran dışına çıkarak kaybolur, konumlarını tas.js kaydırmaya göre yazar. */ .bolum{position:absolute;bottom:0;left:0;margin:0;color:var(--sut); font-family:var(--serif);font-weight:400;text-transform:uppercase; font-size:clamp(30px,5.4vw,74px);line-height:1.02;letter-spacing:-.02em} .bolum.acik{opacity:1;transform:none} .bolum small{display:block;font-family:var(--sans);font-size:12px; letter-spacing:.2em;color:var(--pirinc-acik);text-transform:uppercase; margin-bottom:20px;font-weight:600} /* alt köşeler. Sol alt bir DÜĞME: sayfaya atlamaz, Hikâyemiz çekmecesini sağdan açar. */ .sahne-sol{position:absolute;left:32px;bottom:36px;display:flex;align-items:center; gap:14px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase; background:none;border:0;color:var(--sut);cursor:pointer;padding:0} .sahne-sol span{width:34px;height:34px;border:1px solid #2E3338;border-radius:50%; display:grid;place-items:center;transition:border-color .2s,background .2s} .sahne-sol:hover span{border-color:var(--pirinc-acik);background:rgba(201,167,107,.1)} .sahne-sol svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8} .sahne-sag{position:absolute;right:32px;bottom:36px;font:500 11px/1 var(--sans); letter-spacing:.16em;color:var(--gri);text-transform:uppercase} /* kaydırma işareti — ilk ekranda ne yapılacağını söyler */ .isaret{position:absolute;left:50%;bottom:36px;transform:translateX(-50%); font:500 10.5px/1 var(--sans);letter-spacing:.24em;color:var(--gri); text-transform:uppercase;animation:nefes 2.8s ease-in-out infinite} @keyframes nefes{0%,100%{opacity:.35}50%{opacity:1}} /* ------------------------------------------------------------ örtü Menü: süt beyazı bir perde, dev harfler. Sahnenin karşıtı. */ /* MENÜ PENCEREYE SIĞMAYABİLİR — sığmazsa İÇİNDE kaydırılır. Eskiden taşma denetimi yoktu: liste pencereden uzun olduğunda (kısa ekran ya da madde eklenince) taşan kısım örtü kapalıyken de sayfanın üstünde görünüyor ve TIKLANABİLİYORDU — görünmez bağlantılar sayfanın üstünde duruyordu. Ölçüldü: 720 piksellik pencerede liste 1021 piksel. Üç şey birden gerekiyordu: taşmayı içeride tutmak, kapalıyken görünürlüğü kapatmak (klavyeyle de gezilemesin) ve ortalamayı "safe" yapmak (yoksa uzun listenin BAŞI erişilemez olur). */ .ortu{position:fixed;inset:0;z-index:60;background:var(--sut);color:var(--kara); transform:translateY(-100%); transition:transform .62s cubic-bezier(.76,0,.24,1),visibility .62s step-end; visibility:hidden; display:flex;flex-direction:column;justify-content:safe center; padding:clamp(18px,4vh,34px) 32px; overflow-y:auto;overscroll-behavior:contain} .ortu.acik{transform:none;visibility:visible; transition:transform .62s cubic-bezier(.76,0,.24,1),visibility 0s} .ortu ol{list-style:none;margin:0;padding:0;max-width:var(--olcu,1180px);width:100%; margin-inline:auto} .ortu li{border-bottom:1px solid #D6D5CE} /* touch-action:pan-y — eskiden 'none' idi: parmak sürtünce tarayıcı bunu kaydırma sanıp olayları kesiyordu. Ama artık menü sığmazsa İÇİNDE kaydırılıyor; 'none' olsaydı parmak menüyü kaydıramazdı. 'pan-y' dikey kaydırmaya izin verir, yatay savrulmayı yine keser. */ .ortu li a{touch-action:pan-y;display:flex;align-items:baseline;gap:22px;padding:18px 0; font-family:var(--serif);text-transform:uppercase;font-size:clamp(28px,5vw,62px); line-height:1.05;letter-spacing:-.022em;color:#22252A;transition:color .2s; text-decoration:none} /* .uzerinde = parmağın altındaki madde. Farede :hover ne yapıyorsa dokunmatikte bu sınıf onu yapıyor. */ .ortu li a:hover,.ortu li a.uzerinde{color:var(--pirinc-acik)} .ortu li i{font-style:normal;font:600 11px/1 var(--sans);letter-spacing:.16em; color:#8A9098;min-width:34px} /* ---- MENÜDEKİ ÜRÜN KÜMESİ ---- Üç ürün, Marka'nın altında bir küme olarak durur: numarasız, girintili ve daha küçük. Düz madde olsalardı menü on iki numaraya çıkar, ürünler 'Felsefe' ve 'Zanaat' ile aynı cinsten görünürdü. Değiller. Girinti, numaraların kapladığı genişlikle aynı (34px + 22px boşluk) — böylece ürün adları ana maddelerin metniyle hizalanır. */ .ortu li.ortu-urun,.ortu li.ortu-hekim{border-bottom-color:#E4E3DC} .ortu li.ortu-urun a,.ortu li.ortu-hekim a{padding:11px 0 11px 56px; font-size:clamp(17px,2.2vw,25px);letter-spacing:.04em;color:#4A5057} .ortu li.ortu-urun a::before,.ortu li.ortu-hekim a::before{content:'';width:16px;height:1px; background:#B9B7AE;margin-left:-28px;margin-right:12px; align-self:center;flex:none} .ortu li.ortu-urun a:hover,.ortu li.ortu-urun a.uzerinde, .ortu li.ortu-hekim a:hover,.ortu li.ortu-hekim a.uzerinde{color:var(--pirinc)} .ortu li.ortu-urun a:hover::before,.ortu li.ortu-urun a.uzerinde::before, .ortu li.ortu-hekim a:hover::before,.ortu li.ortu-hekim a.uzerinde::before{background:var(--pirinc)} .ortu-alt{max-width:var(--olcu,1180px);width:100%;margin:44px auto 0; display:flex;gap:24px;flex-wrap:wrap;font:500 12px/1 var(--sans); letter-spacing:.1em;color:#62686F} .ortu-alt a{text-decoration:none} .ortu-alt a:hover{color:var(--kara)} /* --------------------------------------------------- Hikâyemiz çekmecesi Kurucunun anlatısı sayfanın gidişatını KESMESİN diye klasik akıştan çıkarıldı: sağdan kayan bir panelde durur. İsteyen açar, okur, kapatır. Zemin porselen — sahnenin karşıtı, tıpkı menü örtüsü gibi. Şerit değişkenleri burada elle veriliyor: içerideki .ust, .alinti, p ve .imza stil.css'ten geliyor ve renklerini bu değişkenlerden okuyor. */ .cekmece-perde{position:fixed;inset:0;z-index:80;background:rgba(8,9,10,.62); opacity:0;pointer-events:none;transition:opacity .45s} body.hikaye-acik .cekmece-perde{opacity:1;pointer-events:auto} .cekmece{position:fixed;top:0;right:0;bottom:0;z-index:85; width:min(640px,100%);overflow-y:auto;overscroll-behavior:contain; background:var(--porselen);color:var(--grafit); --zemin:var(--porselen);--yazi:var(--grafit);--ikincil:#454B52; --silik:#62686F;--cizgi:#D3D3CC;--cizgi-2:#E1E1DB;--vurgu:var(--pirinc); transform:translateX(100%);transition:transform .52s cubic-bezier(.76,0,.24,1); visibility:hidden} body.hikaye-acik .cekmece{transform:none;visibility:visible} .cekmece-kapat{position:sticky;top:0;z-index:2;margin-left:auto; display:flex;align-items:center;gap:9px; background:var(--porselen);border:0;cursor:pointer;color:var(--silik); font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase; padding:22px 26px 14px} .cekmece-kapat:hover{color:var(--grafit)} .cekmece-kapat svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8} .cekmece-ic{padding:6px clamp(26px,5vw,52px) clamp(48px,7vw,72px)} .cekmece-ic h2{font-family:var(--serif);font-weight:400; font-size:clamp(29px,3.6vw,46px);line-height:1.08;letter-spacing:-.022em; margin:0 0 26px} .cekmece-foto{margin:34px 0 0} .cekmece-foto img{width:100%;height:auto} /* --------------------------------------------------------- dar ekran */ @media (max-width:720px){ .tepe{padding:18px 20px} .tepe{grid-template-columns:1fr auto} /* saat gizlenince iki sütun kalır */ body.gecti .tepe{padding:12px 20px} .yer{display:none} /* dar ekranda saat yer kaplıyor */ .bolumler{left:20px;right:20px;bottom:118px;max-width:none} .sahne-sol{left:20px} .sahne-sag{display:none} /* "Kaydırın" dar ekranda "Hikâyemiz"in üstüne biniyordu. Dokunmatik ekranda kaydırmayı zaten kimse öğrenmeye ihtiyaç duymuyor. */ .isaret{display:none} .halka{width:104vmin;height:104vmin} } /* Hareket istemeyen ziyaretçi: giriş gösterisi hiç oynamaz, sahne olduğu gibi açılır. Taş tarafında da aynısı yapılıyor (tas.js). */ @media (prefers-reduced-motion:reduce){ .halka{animation:none} .isaret{animation:none} .bolum{transition:none} .ortu,.cekmece,.cekmece-perde{transition:none} .giris{display:none} .tepe,.bolumler,.sahne-sol,.sahne-sag,.isaret{animation:none} } /* ------------------------------------------------ menü harflerinin uçuşması Her harf ayrı bir öğe (arayuz.js bölüyor) ve kendi dönüşümünü taşıyor. inline-block ŞART: satır içi öğeye transform uygulanmaz. perspective bağın üstünde: rotateY'nin gerçek 3B okunması için gerekli — olmadan harf yalnız yassılaşır, dönüyormuş gibi durmaz. will-change yok: 60 harfe birden katman açtırmak belleği şişiriyor. */ .ortu li a{perspective:700px} /* Sarmal, esnek kutunun TEK öğesi; harfler onun içinde normal akışta. white-space:pre — kelime aralarındaki boşluklar korunsun diye. */ .ortu li a .mh-kap{display:inline-block;white-space:pre} .ortu li a .mh{display:inline-block;transform-origin:50% 50%} @media (prefers-reduced-motion:reduce){ .ortu li a .mh{transform:none !important} } /* ====================================================================== ARA BÖLME — sayfanın ortasında açılış sahnesine benzeyen bir nefes. Klasik şeritler arasında kapkara bir alan: toz uçuşuyor, ortada tek bir Ceraface dönüyor. VİDEO NASIL MASKELENİYOR: hiç maskelenmiyor. Çekim saf siyah zeminde yapıldığı için (ölçüldü — dört kenar da 0,0,0) 'screen' karışımı siyahı hiç göstermiyor; yalnız dişin kendisi kalıyor. Alfa kanallı video ne Safari'de ne Chrome'da aynı biçimde çalışıyor; buna hiç girmeye gerek yok. DİŞİN BOYU KÜÇÜK TUTULUYOR. Kaynakta diş 266x394 piksel. Ekranda bundan büyük gösterilirse hem yumuşuyor hem de yüzeydeki mikro çizikler okunmaya başlıyor — ki bu "en düz cila" iddiasıyla çelişir. Tek yerden ayarlanıyor: --dis-boy. ====================================================================== */ /* Bölümün boyu .ara-ic'ten geliyor, ızgaradan değil. Izgara kullanılınca mutlak konumlu video ızgara GÖZÜNE göre yerleşiyor ve yalnız 292 piksel yüksek kalıyordu (ölçüldü); bölümün 900 pikseli min-height'tan geliyordu ama video onu görmüyordu. */ /* VİDEO SABİT BOYDA, ZEMİN GENİŞLER. Önce video 'cover' ile bölümün tamamını kaplıyordu ve ekran genişledikçe ölçek büyüyordu: diş büyüyor, bölümün yüksekliği sabit kaldığı için de alttaki yazının üstüne biniyordu. Artık video sabit boyda duruyor; ekran genişleyince yalnızca ARKASINDAKİ ZEMİN genişliyor. RENK BİREBİR TUTUYOR, çünkü tutturmaya çalışmıyoruz: videonun kenarı ölçüldü, her karede TAM 0 (8640 kenar pikselinin hepsi). 'screen' karışımında sıfır hiçbir şey eklemez — zemin olduğu gibi görünür. Zeminin rengi ne olursa olsun sınır çıkmaz. */ /* overflow GİZLENMİYOR: sönümler bölümün dışına taşıp komşu şeritlerin üstünde sönüyor. Gizlenince kırpılıyorlardı ve geçiş hiç görünmüyordu. */ /* Zemin ürünler şeridiyle AYNI (--grafit-2). Önce sahnenin karasıydı (#08090A) ve aradaki 4 birimlik fark üstte bir sınır yaratıyordu. */ .ara{position:relative;background:var(--grafit-2,#0C0D0E);color:var(--sut); --video-boy:min(86vw,660px); /* BÖLÜMÜN BOYU = VİDEONUN BOYU. Üstünde altında fazladan kara alan kalmıyor. Yazılar videonun üstüne biniyor ama okunurluk sorunu yok: diş karenin ortasındaki %36'lık şeritte duruyor, üstü ve altı saf siyah. */ height:calc(var(--video-boy) * 1.2); /* Tozun ve sönümlerin komşulara taşma payı — tek yerden. */ /* Sönümün (gradyanın) taşma payı. */ /* Üst taşma ÜRÜNLER şeridinin yarısına kadar (o şerit ~1530 piksel). 260 pikselde geçiş hâlâ fark ediliyordu; bu kadar uzun bir yolda 4 birimlik renk farkı gözle seçilemiyor. */ --toz-ust:760px;--toz-alt:470px; /* TOZUN taşma payı AYRI ve daha uzun: zerreler beyaz şeritte fotoğrafa kadar iniyor (ölçüldü — fotoğraf bölümün 641 piksel altında). Gradyanı o kadar uzatmak beyaz şeridi fazla karartırdı. */ --toz-dip:660px} /* VİTRİNDE z-index YOK — bilerek. z-index verilince kendi katmanını yaratıyor ve içindeki video 'screen' ile karışacağı zemini göremiyor: karışım sessizce iptal oluyor, videonun kendi siyahı (0,0,0) zeminden (8,9,10) KOYU olduğu için ortada koyu bir dikdörtgen beliriyor. Katmansız kalınca video doğrudan bölümün zeminiyle karışıyor ve sıfır hiçbir şey eklemediği için sınır tamamen kayboluyor. */ /* ORTALAMA transform İLE YAPILMIYOR — bilerek. transform da (z-index gibi) kendi katmanını yaratıyor ve içindeki video 'screen' ile karışacağı zemini göremez hâle geliyordu. Ölçüldü: zemin kırmızıya çevrildiğinde video alanı KIRMIZI kalması gerekirken siyah kaldı, yani karışım sessizce iptal olmuştu. left/right/margin ile ortalamak katman yaratmıyor. */ .ara-vitrin{position:absolute;top:0;left:0;right:0;margin:0 auto; width:var(--video-boy);height:var(--video-boy); touch-action:pan-y;cursor:grab} .ara-vitrin:active{cursor:grabbing} .ara-video{width:100%;height:100%;display:block; mix-blend-mode:screen;pointer-events:none;user-select:none} /* TOZ KOMŞU BÖLÜMLERE DE TAŞAR. Tuval bölümün dışına, sönümlerin uzandığı kadar sarkıyor: üstte 260, altta 340 piksel. Böylece toz sınırda kesilmiyor, karanlık nerede bitiyorsa orada bitiyor. z-index 6: sönümlerin (5) ÜSTÜNDE — yoksa alt sönüm tozu örterdi. */ .ara-toz{position:absolute;left:0;right:0;width:100%; top:calc(-1 * var(--toz-ust)); height:calc(100% + var(--toz-ust) + var(--toz-dip)); pointer-events:none;z-index:6; /* TERS KARIŞIM. Zerreleri artık iki ayrı renkte çizmiyoruz: karışım bunu kendisi yapıyor. Koyu zeminde beyaz zerre beyaz kalır, beyaz şeritte aynı zerre siyaha döner — tam zeminin döndüğü yerde, ara bir hesap olmadan. */ mix-blend-mode:difference} /* z-index 6: sönümler 5'te; yazı onların da üstünde kalmalı. */ /* Video akışın dışında; yazının üstten boşluğu onun yerini ayırıyor. */ .ara-ic{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column; align-items:center;justify-content:flex-end;gap:6px;text-align:center; pointer-events:none;padding:0 24px 34px} /* GERÇEK ÜRÜN ETİKETİ — dönen dişin yanında, müze etiketi gibi. Dişin sağında duruyor: video karesi kare, diş ortada dar bir şerit, iki yanı boş. Etiket o boşluğu kullanıyor ve dişi hiç örtmüyor. Dar ekranda yan yana sığmıyor — dişin altına iniyor ve ortalanıyor. */ /* DAR EKRAN önce: etiket akışta ve EN ALTTA durur. Başlığın üstüne konmuştu ve oradaki "CERAFACE" etiketiyle çakışıyordu (ölçüldü). Bu bölümde yazılar zaten videonun üstüne biniyor; bir blok daha araya sokmak yerine en sona alındı — bütün bölümün dipnotu gibi okunuyor, hiçbir şeyi örtmüyor. */ .ara-gercek{position:relative;z-index:2;order:2;margin:24px 0 0; max-width:38ch;text-align:center} .ara-yazi{order:1} .ara-gercek b{display:block;font:600 10px/1.5 var(--sans);font-weight:600; letter-spacing:.24em;text-transform:uppercase; color:var(--pirinc-acik,#C9A76B)} .ara-gercek span{display:block;margin-top:10px; font:400 13.5px/1.65 var(--sans);color:#9AA1A8} /* Etiketi dişe bağlayan ince çizgi — müze kartelasının iğnesi. */ /* Etiketi dişe bağlayan ince çizgi — yalnız geniş ekranda, etiket dişin yanındayken anlamlı. */ .ara-gercek b::before{content:'';display:none;position:absolute;left:-30px; top:5px;width:20px;height:1px;background:rgba(201,167,107,.45)} /* GENİŞ EKRAN: etiket akıştan çıkıp dişin SAĞINA geçer. Video karesi kare, diş ortada dar bir şerit — iki yanı boş, etiket o boşlukta. */ @media (min-width:1001px){ .ara-gercek{position:absolute;z-index:8;margin:0;order:0; top:calc(var(--video-boy) * .42); left:50%;margin-left:min(17vw,150px);max-width:min(30vw,240px); text-align:left} .ara-gercek b::before{display:block} } .ara-yazi{position:relative;z-index:2;max-width:46ch} /* Bölüm etiketi EN ÜSTTE, ortalı ve dişin dışında. Önce alttaki yazı bloğunun içindeydi ve dişin üstüne biniyordu. Yanındaki çizgi de yok: ortalanmış tek bir kelimede çizgi dengeyi bozuyor. */ /* 54 pikselde duruyordu ve ÜSTTEKİ SABİT BAR onu örtüyordu (bar ilk ~56 pikseli kaplıyor, z-index 70). 112 piksel barın altında kalıyor. */ /* z-index 7 (ic'ten BIR FAZLA). Video kutusu .ara-ic'in icinde ve o da 6'da; ayni katmanda olunca belge sirasi karar veriyor ve .ara-ic sonra geldigi icin etiketin ustune biniyordu — etiket sayfada vardi, olculdu, ama hic gorunmuyordu. */ .ara-etiket{position:absolute;top:64px;left:0;right:0;z-index:8; text-align:center;pointer-events:none; font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase; color:var(--pirinc-acik,#C9A76B)} /* Etiketin altında, biraz mesafeli ince bir çizgi. Kısa ve ortalı — altını çizmiyor, etiketi sayfanın geri kalanından ayırıyor. */ /* Çizgi DİŞİN GENİŞLİĞİ kadar. Diş, video 'cover' ile ölçeklendiği için ekrana göre 222-276 piksel arasında değişiyor (kaynakta 266/1080); bu yüzden çizgi de sabit değil, ekranla birlikte ölçekleniyor. */ .ara-etiket::after{content:'';display:block;width:min(30vw,250px);height:1px; margin:22px auto 0;background:rgba(201,167,107,.38)} /* ═══ TELEFON — ÜST ÜSTE DEĞİL, ALT ALTA ═══════════════════════ Geniş ekranda yazılar videonun üstüne biniyor ve sorun olmuyor: diş karenin ortasındaki dar şeritte duruyor, üstü altı saf siyah. Telefonda öyle değil — bölümün boyu videodan geliyor (387 px) ama yazılar 200 piksel daha uzun; taşıp dişin üstüne oturuyorlardı. Dar ekranda her şey akışa dönüyor: etiket, diş, yazı, ipucu. Bölüm de içeriği kadar uzuyor. Kimse kimsenin üstüne binmiyor. */ @media (max-width:760px){ .ara{--video-boy:min(74vw,330px);height:auto;padding:146px 0 46px} .ara-vitrin{position:relative;top:auto;left:auto;right:auto;margin:0 auto} .ara-ic{position:static;justify-content:flex-start;padding:18px 24px 0} } .ara-yazi .h2{margin:0 0 14px;font-family:var(--serif);font-weight:400; font-size:clamp(24px,3.2vw,40px);line-height:1.12;letter-spacing:-.02em} .ara-alt{margin:0;color:#9AA1A8;font-size:15px;line-height:1.65} .ara-ipucu{margin:26px 0 0;font:600 10.5px/1 var(--sans);letter-spacing:.2em; text-transform:uppercase;color:#6E757C;display:flex;align-items:center; justify-content:center;gap:10px} /* ÇİFT YÖNLÜ OK — sürüklemenin iki yöne de gittiğini söylüyor. Önce yalnız düz bir çizgiydi ve ok olduğu hiç anlaşılmıyordu. */ .ara-ipucu svg{width:44px;height:8px;flex:none;fill:none;stroke:#7C848C; stroke-width:1;stroke-linecap:round;stroke-linejoin:round} @media (max-width:620px){ .ara{--dis-boy:260px} } /* Hareket istemeyen ziyaretçi: video oynamaz, ilk kare durur. */ @media (prefers-reduced-motion:reduce){ .ara-toz{display:none} } /* İKİ BÖLÜM ARASINDAKİ GEÇİŞ — ÜRETİM ŞERİDİNİN KENDİ ZEMİNİNDE. Önce bu geçiş ara bölmenin üstüne binen ayrı bir katmandı. Saydamken idare ediyordu; iki gerçek renk arasına çevrilince katman TAMAMEN OPAK oldu ve üretim bölümünün üst kısmındaki yazıları, sayıları örttü. Katmanı yukarı almak (z-index) yamaydı: her yeni öğeyi tek tek yukarı almak gerekiyordu ve biri unutulunca kayboluyordu. Doğrusu geçişi KATMAN değil ZEMİN yapmak. Üretim şeridinin kendi arka planı üstte ara bölmenin rengiyle başlıyor ve --gecis kadar mesafede porselene varıyor. Zemin her zaman içeriğin altındadır, dolayısıyla hiçbir şeyi örtemez ve hiçbir z-index gerekmez. Üstte geçiş yok: ara bölmenin zemini ürünler şeridiyle zaten aynı renk. Duraklar elle seçilmedi, iki uç renk arasından hesaplandı — böylece ara tonlar tam doğru üzerinde kalıyor ve bitiş porselenin TA KENDİSİ oluyor (#F1F1EE). Renkler komşu şeritlerle aynı olmak zorunda; şeritlerin sırası değişirse burası da değişmeli. Üst boşluk geçiş kadar açılıyor: yazılar karanlığın içinde başlamasın, porselene çıktıktan sonra başlasın. Böylece şeridin kendi renkleri olduğu gibi kullanılabiliyor. */ #uretim{--gecis:260px; padding-top:200px; background-image:linear-gradient(to bottom, #0C0D0E 0%, #272727 14%, #4C4C4B 28%, #7A7A78 42%, #A5A5A3 56%, #C8C8C5 70%, #E1E1DE 84%, #F1F1EE 100%); background-repeat:no-repeat; background-size:100% var(--gecis)} /* Burada bir zamanlar NEDEN (açık) -> GALERİ (koyu) iniş rampası vardı: galeri ANA SAYFADAYKEN üstündeki açık şeritten koyuya geçiyordu. Galeri kendi sayfasına taşınınca rampa öksüz kaldı — üstünde açık bölüm olmadığı için sayfanın tepesinde sebepsiz bir beyazlık duruyordu. #galeri artık yalnız /galeri/ ve /en/gallery/ sayfalarında ve ikisinde de İLK bölüm; rampanın karşılığı kalmadı, kaldırıldı. Yerine bölümün kendi koyu zemini ve tepesinde amber çizgi var (bölüme .amber-ust sınıfı verildi). */ /* ---- PORTAL SUNUMU — hekimler sayfasında tam ekran hero ---- */ .serit--sunum{padding:0;margin:0;background:var(--gece)} .portal-sunum{display:block;width:100%;height:100vh;border:0; background:var(--gece)} /* ---- PORTAL DAVETİ ve YANDAN AÇILAN SUNUM ---- */ .serit--davet{text-align:center} .serit--davet .k-portal-ad{font:400 clamp(30px,3.4vw,46px)/1 var(--serif); color:var(--sut);margin-bottom:18px} .serit--davet .k-portal-ad i{font-style:normal;color:var(--pirinc)} .btn-portal{appearance:none;cursor:pointer;margin-top:26px; font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase; color:var(--gece);background:var(--pirinc);border:0;border-radius:99px; padding:17px 34px;transition:transform .3s ease,box-shadow .3s ease} .btn-portal:hover{transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(201,167,107,.7)} /* ÖLÇÜLDÜ 05.08.2026: sunum kendi adresinde parmakla kayıyor, çekmecede kaymıyordu. Çalışan hikâye çekmecesiyle karşılaştırınca fark çıktı: orada perde ile panel AYRI kardeşler, panel perdenin içinde değil. Burada çerçeve tam ekran bir kabın çocuğuydu ve parmak ona ulaşmadan o kabın içinden geçiyordu. Kap artık girdi almıyor; perde ve çerçeve alıyor. Görüntü aynı, yapı çalışan örnekle birebir. */ .portal-cekmece{position:fixed;inset:0;z-index:900;pointer-events:none; opacity:0;transition:opacity .5s ease} .portal-perde{position:absolute;inset:0;z-index:0;pointer-events:auto; background:rgba(8,9,10,.72);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)} .portal-cekmece.acik{opacity:1} /* Kayma animasyonu transform ile DEĞİL, konumla yapılıyor. iOS'ta transform uygulanmış bir iframe'de görüntü taşınıyor ama dokunma alanı eski yerinde kalabiliyor — parmak boşluğa değiyor, olay hiç ulaşmıyor. Fare farklı yoldan gittiği için tekerlek çalışıyordu. Hikâye çekmecesi transform kullanıyor ama içeriği iframe değil, sayfanın kendi parçası; orada sorun çıkmıyor. */ .portal-cekmece iframe{position:absolute;top:0;height:100%; width:min(900px,100vw);right:calc(0px - min(900px,100vw)); border:0;background:var(--gece);pointer-events:auto; transition:right .6s cubic-bezier(.22,.9,.28,1); box-shadow:-40px 0 90px -30px rgba(0,0,0,.85); z-index:1;overscroll-behavior:contain} .portal-cekmece.acik iframe{right:0} .portal-kapa{pointer-events:auto;position:absolute;right:calc(min(900px,100vw) - 58px);top:22px; z-index:2;appearance:none;cursor:pointer;width:38px;height:38px; font:300 26px/1 var(--sans);color:var(--sut); background:rgba(8,9,10,.6);border:1px solid rgba(240,240,236,.22); border-radius:50%;transition:background .3s,border-color .3s} .portal-kapa:hover{background:rgba(201,167,107,.22);border-color:var(--pirinc)} @media (max-width:900px){ .portal-cekmece iframe{width:100vw} .portal-kapa{right:14px;top:14px} /* Telefonda tam ekran bulanıklık YOK: sunumun kendi yüküyle üst üste binince iOS sekmeyi öldürüyor. Düz karartı aynı işi görüyor. */ .portal-perde{backdrop-filter:none;-webkit-backdrop-filter:none; background:rgba(8,9,10,.88)} } /* ---- TAM SAYFA FOTOĞRAF: kenardan kenara, yazı görselin üstünde ---- */ .serit--tamfoto{padding:0!important;background:var(--gece)} .tam-foto{position:relative;line-height:0} .tam-foto img{width:100%;height:auto;display:block} /* Yazı iki dişin arasındaki boşluğa oturur: ortada, serif, ferah harf aralığıyla. Altına ince bir karartı — her fotoğrafta okunur kalsın. */ .tam-foto-yazi{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);z-index:2;pointer-events:none; width:min(760px,84vw);text-align:center;line-height:1.35} .tam-foto-yazi p{margin:0; font:400 clamp(22px,2.6vw,38px)/1.35 var(--serif); color:var(--sut);letter-spacing:.01em; text-shadow:0 2px 30px rgba(0,0,0,.9),0 0 90px rgba(0,0,0,.7)} @media (max-width:700px){ .tam-foto-yazi{width:88vw} .tam-foto-yazi p{font-size:clamp(18px,5.2vw,26px)} } .tam-video{width:100%;height:auto;display:block} /* ---- ÜRÜN SAYFASININ KAPAĞI ---- Tam genişlik bir sahne; yazı onun üstünde durur. İçinde video da olabilir, 3B diş de — ikisi de aynı kutuya oturur, sayfa video gelmeden de tam görünür. Perde: yazının okunurluğu videonun ne kadar parlak olduğuna bırakılamaz. Alttan yukarı koyulaşan bir geçiş, hangi görüntü gelirse gelsin kontrastı garantiye alır. */ .urun-kapak{position:relative;min-height:min(88vh,760px); display:grid;place-items:end start;overflow:hidden;background:var(--gece)} .urun-kapak-sahne{position:absolute;inset:0;z-index:0} .urun-kapak-video{width:100%;height:100%;object-fit:cover;display:block} .urun-kapak-dis{position:absolute;inset:0;display:grid;place-items:center} .urun-kapak-dis .isik-sahne{width:min(58vmin,460px);height:min(58vmin,460px)} .urun-kapak-perde{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top, rgba(8,9,10,.94) 0%,rgba(8,9,10,.82) 22%, rgba(8,9,10,.38) 52%,rgba(8,9,10,.10) 78%,transparent 100%)} .urun-kapak-ic{position:relative;z-index:2;width:100%; max-width:var(--olcu);margin:0 auto; padding:0 clamp(20px,5vw,64px) clamp(46px,7vw,88px)} .urun-kapak-ic .ust{color:var(--hat,var(--pirinc-acik))} /* Başlık sitedeki DİĞER BÜTÜN kapaklarla aynı olmalı: serif, ince (400). Ürün kapağı ayrı bir sınıf olarak yazıldığı için '.serit--kapak h1' kuralı buraya hiç uğramıyor, başlık da gövde yazı tipine (Inter, kalın 700) düşüyordu — sitedeki tek istisna buydu. 'em' MUTLAKA düz kalacak: Playfair'in yalnız düz kesimi yükleniyor; italik istenirse tarayıcı harfleri eğip sahte italik uyduruyor. */ .urun-kapak-ic h1{font-family:var(--serif);font-weight:400; font-size:clamp(34px,6.2vw,80px);line-height:1.03;letter-spacing:-.022em; margin:.28em 0 0;max-width:16ch;text-wrap:balance} .urun-kapak-ic h1 em{font-style:normal;color:rgba(240,240,236,.66)} .urun-kapak-ic .lead{margin-top:20px;max-width:52ch} /* Ürün kartındaki "İncele" bağlantısı — kartın kendi hattıyla aynı renk, çünkü hangi ürüne gittiğini renk zaten söylüyor. */ .urun-git{display:inline-flex;align-items:center;gap:8px;margin-top:24px; color:var(--hat);font-weight:600;font-size:15px;letter-spacing:.02em; text-decoration:none;border-bottom:1px solid transparent; padding-bottom:2px;transition:border-color .18s} .urun-git:hover,.urun-git:focus-visible{border-bottom-color:var(--hat)} /* ---- GALERİ VİDEOSU ---- Fotoğraf ızgarasının içinde değil, kendi bandında. Genişliği fotoğraflarla aynı hizada durur ki sayfa iki farklı ölçüye bölünmesin. Köşe yarıçapı sitenin 3px kuralına uyar; gölge yok. */ .galeri-video{margin:0 0 clamp(30px,4vw,54px)} .galeri-video video{width:100%;height:auto;display:block; border-radius:var(--kose);background:#000} .galeri-video figcaption{margin-top:16px;max-width:62ch; color:var(--sis,#9B9FA4);font-size:clamp(15px,1.5vw,17px);line-height:1.55} /* ---- DAVET: iki sütunlu ızgara ---- Panel önce MUTLAK konumdaydı; yazının üstüne biniyor ve ekran daraldıkça ortalamayı bozuyordu. Artık kendi sütununda duruyor: çakışma yok, ortalama dürüst, daralınca küçülüyor. */ .serit--davet{position:relative;overflow:clip} .serit--davet>.ic{display:grid;gap:clamp(24px,4vw,64px); grid-template-columns:minmax(0,1fr) minmax(0,0.92fr); align-items:center;text-align:left;max-width:1320px} .serit--davet .ic .k-portal-ad,.serit--davet .ic h2, .serit--davet .ic .lead,.serit--davet .ic .btn-portal{margin-left:0} .davet-panel{position:relative;width:100%; perspective:clamp(900px,120vw,1800px);perspective-origin:38% 42%; pointer-events:none; /* Radyal maske panelin kenarlarını yiyip kırpılmış gösteriyordu. Kaldırıldı: panel bütün hâlinde duruyor, gölgesi de tam. */ padding:6% 4%} .dp-duzlem{position:relative;transform-style:preserve-3d; transform:rotateX(46deg) rotateZ(-11deg) rotateY(7deg)} .dp-duzlem img{display:block;width:100%;height:auto;border-radius:16px; border:1px solid rgba(201,167,107,.24); box-shadow:0 40px 90px -30px rgba(0,0,0,.9)} /* ALAN DERİNLİĞİ — iki eksenli odak bandı; fiyatların durduğu sağ kenar bulanık katmanda kalır, ayrı maskeye gerek kalmaz. */ .dp-net{position:absolute;inset:0} .dp-net img{filter:none} .dp-duzlem>img{filter:blur(5px) brightness(.72)} .dp-net{ -webkit-mask-image:linear-gradient(to bottom,transparent 8%,#000 34%,#000 72%,transparent 96%), linear-gradient(to right,#000 0 54%,transparent 76%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom,transparent 8%,#000 34%,#000 72%,transparent 96%), linear-gradient(to right,#000 0 54%,transparent 76%); mask-composite:intersect} /* Dar ekran: tek sütun, yazı ortalı, panel altta ve küçük — kaybolmuyor. */ @media (max-width:900px){ .serit--davet>.ic{grid-template-columns:1fr;text-align:center;gap:34px} .davet-panel{width:min(560px,86vw);margin:0 auto; perspective:1100px;perspective-origin:50% 42%} .dp-duzlem{transform:rotateX(40deg) rotateZ(-8deg) rotateY(5deg)} } /* ---- ALTIN TOZU — tuval üzerinde parçacık sistemi ---- Kurallar betiğin başında yazılı. CSS yalnız sahneyi kuruyor. */ .serit--altin-yagmuru{position:relative;overflow:hidden; background:radial-gradient(120% 90% at 50% 0%,#141719 0%,#0B0D0F 62%)} .serit--altin-yagmuru>.ic{position:relative;z-index:2} .serit--altin-yagmuru .ust{color:var(--pirinc)} .toz-tuval{position:absolute;inset:0;z-index:1;pointer-events:none; display:block} /* ---- AMBER ÇİZGİSİ ---- Bölüm kenarındaki ince altın çizgi ve yanındaki yumuşak parıltı. Parıltı HER ZAMAN çizginin iç tarafındadır: çizgi üstteyse aşağı iner, alttaysa yukarı çıkar. Kullanım: bölüme .amber-ust ya da .amber-alt sınıfı. Tuzak: konumlandırma bölümün KENDİSİNE bağlı olmalı; .ic'e göre yapılırsa çizgi bölümün dışına düşer ve kırpılır. */ .amber-ust,.amber-alt{position:relative} .amber-ust::before,.amber-alt::before{content:"";position:absolute; left:0;right:0;height:1px;z-index:3;pointer-events:none; background:linear-gradient(to right,transparent,rgba(201,167,107,.5) 18%, rgba(224,196,140,.85) 50%,rgba(201,167,107,.5) 82%,transparent)} .amber-ust::after,.amber-alt::after{content:"";position:absolute; left:0;right:0;z-index:2;pointer-events:none} .amber-ust::before{top:0} /* Parıltı TEK eliptik geçiş: ortada turkuaz, dışa doğru ambere ve oradan saydama. Her yöne birden söndüğü için keskin sınır kalmaz — önce iki düz katman üst üste bindiriliyordu ve alt kenarda çizgi oluşuyordu. */ .amber-ust::after{top:0;height:clamp(52px,6.4vw,104px); background:radial-gradient(ellipse 104% 100% at 50% 0%, rgba(92,225,215,.14) 0%,rgba(118,220,199,.132) 12%, rgba(140,214,183,.124) 22%,rgba(162,203,163,.118) 31%, rgba(181,189,140,.116) 39%,rgba(195,176,122,.115) 47%, rgba(201,167,107,.112) 48%,rgba(201,167,107,.098) 58%, rgba(201,167,107,.078) 68%,rgba(201,167,107,.055) 78%, rgba(201,167,107,.034) 86%,rgba(201,167,107,.016) 93%, transparent 100%); /* Maske de ELİPTİK: yatay maske yükseklikte hiç incelme yapmıyordu, parıltı şerit gibi duruyordu. Bu maske ortada kalın, kenarlara doğru inceleyerek sivriliyor — mercek biçimi. */ -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%, rgba(0,0,0,.18) 78%,transparent 100%); mask-image:radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%, rgba(0,0,0,.18) 78%,transparent 100%)} .amber-alt::before{bottom:0} .amber-alt::after{bottom:0;height:clamp(52px,6.4vw,104px); background:radial-gradient(ellipse 104% 100% at 50% 100%, rgba(92,225,215,.14) 0%,rgba(118,220,199,.132) 12%, rgba(140,214,183,.124) 22%,rgba(162,203,163,.118) 31%, rgba(181,189,140,.116) 39%,rgba(195,176,122,.115) 47%, rgba(201,167,107,.112) 48%,rgba(201,167,107,.098) 58%, rgba(201,167,107,.078) 68%,rgba(201,167,107,.055) 78%, rgba(201,167,107,.034) 86%,rgba(201,167,107,.016) 93%, transparent 100%); /* Maske de ELİPTİK: yatay maske yükseklikte hiç incelme yapmıyordu, parıltı şerit gibi duruyordu. Bu maske ortada kalın, kenarlara doğru inceleyerek sivriliyor — mercek biçimi. */ -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 100%, #000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%, rgba(0,0,0,.18) 78%,transparent 100%); mask-image:radial-gradient(ellipse 50% 100% at 50% 100%, #000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%, rgba(0,0,0,.18) 78%,transparent 100%)} @media (prefers-reduced-motion:reduce){ .toz-tuval{opacity:.4} } /* ---------------------------------------------- BAŞVURU FORMU Hekimin ilk teması. Hafif tutuldu: diploma ve zorunlu web sitesi portaldaki formda kalıyor, burası konuşmayı başlatıyor. Alanlar sade — lüks bir markanın formu doldurulası olmalı. */ .bf{margin-top:30px} /* İKİŞERLİ ızgara: dört kısa alan üçe bölününce e-posta tek başına alt satırda kalıyordu ve düzen bozuk duruyordu. 2x2 dengeli oturuyor. */ .bf-izgara{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)} .bf-alan{display:flex;flex-direction:column;gap:8px} .bf > .bf-alan{margin-top:20px} .bf-alan label{font:600 10.5px/1 var(--sans);letter-spacing:.16em; text-transform:uppercase;color:var(--gri)} .bf-alan label i{font-style:normal;color:var(--pirinc-acik);margin-left:1px} .bf-alan input,.bf-alan textarea{ appearance:none;width:100%;padding:13px 15px; background:rgba(255,255,255,.03);color:var(--sut); border:1px solid rgba(240,240,236,.16);border-radius:10px; font:400 15px/1.5 var(--sans); transition:border-color .3s,background .3s} .bf-alan textarea{resize:vertical;min-height:96px} .bf-alan input:hover,.bf-alan textarea:hover{border-color:rgba(240,240,236,.3)} .bf-alan input:focus,.bf-alan textarea:focus{outline:0; border-color:var(--pirinc);background:rgba(255,255,255,.05)} /* Bal kabı: ekranda yok ama robot için DOM'da var. */ .bf-kap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cf-turnstile{margin:26px 0 0;min-height:65px} .bf-durum{min-height:22px;margin:10px 0 0;font-size:14.5px;color:var(--gri)} .bf-durum.oldu{color:var(--pirinc-acik)} .bf-durum.yanlis{color:#D98B82} .bf-tus{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px} .bf-not{font-size:12.5px;color:var(--gri)} .bf button[disabled]{opacity:.55;cursor:default} @media (max-width:640px){ .bf-izgara{grid-template-columns:1fr;gap:18px} .bf > .bf-alan{margin-top:18px} } /* AMBER ÇİZGİSİ — ÜSTTE VE ALTTA BİRDEN. .amber-ust ile .amber-alt aynı öğeye verilemez: ikisi de ::before ve ::after kullanıyor, biri diğerini eziyor (ölçüldü — yalnız alttaki çiziliyordu). Bu kalıpta ÇİZGİLER bölümün kendi zemininde iki katman olarak duruyor, ::before ve ::after ise yalnız iki PARILTIYA kalıyor. Kural yine geçerli: üstteki parıltı aşağı iner, alttaki YUKARI çıkar. */ .amber-iki{position:relative; background-image:linear-gradient(to right,transparent,rgba(201,167,107,.5) 18%,rgba(224,196,140,.85) 50%,rgba(201,167,107,.5) 82%,transparent),linear-gradient(to right,transparent,rgba(201,167,107,.5) 18%,rgba(224,196,140,.85) 50%,rgba(201,167,107,.5) 82%,transparent); background-size:100% 1px,100% 1px; background-position:top left,bottom left; background-repeat:no-repeat} .amber-iki::before,.amber-iki::after{content:"";position:absolute; left:0;right:0;z-index:2;pointer-events:none; height:clamp(52px,6.4vw,104px)} .amber-iki::before{top:0; background:radial-gradient(ellipse 104% 100% at 50% 0%,rgba(92,225,215,.14) 0%,rgba(118,220,199,.132) 12%,rgba(140,214,183,.124) 22%,rgba(162,203,163,.118) 31%,rgba(181,189,140,.116) 39%,rgba(195,176,122,.115) 47%,rgba(201,167,107,.112) 48%,rgba(201,167,107,.098) 58%,rgba(201,167,107,.078) 68%,rgba(201,167,107,.055) 78%,rgba(201,167,107,.034) 86%,rgba(201,167,107,.016) 93%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 0%,#000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.18) 78%,transparent 100%); mask-image:radial-gradient(ellipse 50% 100% at 50% 0%,#000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.18) 78%,transparent 100%)} .amber-iki::after{bottom:0; background:radial-gradient(ellipse 104% 100% at 50% 100%,rgba(92,225,215,.14) 0%,rgba(118,220,199,.132) 12%,rgba(140,214,183,.124) 22%,rgba(162,203,163,.118) 31%,rgba(181,189,140,.116) 39%,rgba(195,176,122,.115) 47%,rgba(201,167,107,.112) 48%,rgba(201,167,107,.098) 58%,rgba(201,167,107,.078) 68%,rgba(201,167,107,.055) 78%,rgba(201,167,107,.034) 86%,rgba(201,167,107,.016) 93%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 100%,#000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.18) 78%,transparent 100%); mask-image:radial-gradient(ellipse 50% 100% at 50% 100%,#000 0%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.18) 78%,transparent 100%)} .bolum .kelime{display:inline-block;white-space:nowrap} .bolum .harf{display:inline-block;white-space:pre;will-change:transform} .bolum small{display:block;will-change:transform} .bolumler{overflow:visible}