/* ===================================================================== ARAYUZ DUZELTMELERI — style.css'e DOKUNMADAN yapilan eklemeler. NEDEN AYRI DOSYA: style.css derlenmis bir Tailwind ciktisi ve projede derleme adimi YOK. Sablona yeni bir Tailwind sinifi (or. w-[86%]) yazmak sessizce hicbir sey yapmaz — cunku o sinif derlemede uretilmedi. Bu yuzden buradaki her kural gercek CSS ozellikleriyle yazildi. Yuklenme sirasi: style.css'ten SONRA (bkz. tema/base.twig ). ===================================================================== */ /* --------------------------------------------------------------------- 1) MOBIL ALT CUBUK — sayfa icerigiyle cakismasi #y360-mobile-bottom-nav `fixed bottom-0` ve 4rem (h-16) yuksekliginde, ama govdede onun icin ayrilmis bir bosluk yoktu (body padding-bottom: 0). Sonuc: sayfa sonundaki bolumler cubugun ALTINA giriyordu. Cubuk `lg:hidden` oldugu icin bosluk da yalnizca lg altinda ayrilir. --------------------------------------------------------------------- */ @media (max-width: 1023.98px) { body { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); } } /* Markup'ta `pb-safe-area` sinifi kullaniliyor ama derlenmis CSS'te karsiligi yok (centikli ekranlarda cubuk ekranin altina yapisiyordu). */ .pb-safe-area { padding-bottom: env(safe-area-inset-bottom, 0px); } /* CUBUGUN USTUNE BINEN KARTLAR — ayni sessiz tuzak. Markup'ta `z-[999]` yaziyor ama o sinif derlemede URETILMEMIS (z-[60] ve z-[70] var, cunku onlar derleme aninda temada vardi; z-[999] sonradan canliya hizalanirken eklenmis). Sinif karsiliksiz kalinca cubugun z-index'i `auto` oluyor ve konumlu/govde-sonrasi ogeler — ornegin danisan yorumlari kartlari — uzerine biniyor. Gercek bir deger vererek yigin sirasini kesinlestiriyoruz: cubuk (999) > sohbet (95) > mobil menu (70) > overlay (60). */ #y360-mobile-bottom-nav { z-index: 999; } /* --------------------------------------------------------------------- 2) MOBIL MENU — tam ekran yerine sagdan cekmece Onceki hâl: `inset-0` => dort kenar 0 => menu ekrani komple kapatiyordu. Istenen: solda siteden bir seritp gorunsun, menu sagda dursun. `inset-0` markup'ta BILEREK BIRAKILDI: bu dosya yuklenemezse menu yine de konumlu (tam ekran) kalir, ekranin ortasinda kaybolmaz. ID + sinif secicisi (1,1,0) `.inset-0` (0,1,0) uzerine yazar. --------------------------------------------------------------------- */ #mobile-menu.y360-mobil-cekmece { top: 0; right: 0; bottom: 0; left: auto; width: 86%; max-width: 400px; box-shadow: -18px 0 50px rgba(15, 23, 42, .28); } /* --------------------------------------------------------------------- 5) HERO BOLUMLERI — bir tik daha yuksek Sablonlarda hero `h-[35vh] min-h-[250px]` olarak yaziliyor ve bu desen ~60 twig dosyasinda TEKRARLIYOR. 60 dosyayi tek tek duzenlemek yerine tek kural: `section.h-[35vh]` seciciligi (0,1,1) Tailwind'in `.h-[35vh]` (0,1,0) kuralini gecer. --------------------------------------------------------------------- */ section.h-\[35vh\] { height: 42vh; min-height: 300px; } /* --------------------------------------------------------------------- 6) CANLI DESTEK BALONU — masaustunde biraz asagi Varsayilan `bottom: 86px` mobil alt cubugun ustunde kalmak icin. Masaustunde (lg+) alt cubuk yok (lg:hidden), o yuzden balon gereksiz yukarida duruyordu; orada 24px'e indiriliyor. Mobilde 86px korunur. ID SECICI SART: canli-destek.css bu dosyadan SONRA yukleniyor, bu yuzden ayni ozgullukteki `.y360-live-support` kurali bizimkini eziyordu. `#y360-live-support` (1,0,0) sinif secicisini (0,1,0) gecer. --------------------------------------------------------------------- */ @media (min-width: 1024px) { #y360-live-support { bottom: 24px; } } /* --------------------------------------------------------------------- 4) BLOG YAN SUTUNU — kaydirmayi takip etsin align-self: start SART: grid ogesi varsayilan olarak satir yuksekligine (3522px) uzuyordu; uzamis bir oge sticky davranmaz. SUTUN EKRANDAN UZUN (~1440px icerik, ~900px ekran). Bunun icin `top` degeri sabit degil, --y360-yan-top degiskeninden geliyor; degeri single.twig'deki kucuk betik hesapliyor: top = min(24, ekranYuksekligi - sutunYuksekligi - 24) Sutun ekrana sigiyorsa 24px (klasik ust sabitleme). Sigmiyorsa deger NEGATIF olur ve sabitlendiginde sutunun ALT kenari ekranin altina hizalanir — yani once sutun bastan sona kaydirilarak gorulur, sonra sabitlenir. "Asagi insin, sonra sabit kalsin" davranisi budur ve Hemen Randevu Alin / Ofis Adresimiz kartlari gorunur kalir. Ic kaydirma cubugu (max-height + overflow) DENENDI VE KALDIRILDI: sutunu gorsel olarak boluyordu. `bottom` sticky de ise yaramaz — o yalnizca dogal konumu ekranin ALTINDA kalan ogeyi yukarida tutar. Yalnizca lg ve ustu: mobilde sutunlar zaten alt alta, sabitleme yok. --------------------------------------------------------------------- */ @media (min-width: 1024px) { .y360-blog-yan { align-self: start; position: sticky; top: var(--y360-yan-top, 24px); } } /* --------------------------------------------------------------------- 3) CANLI DESTEK — "Sohbeti Baslat" dugmesi panelin en altina KOK SEBEP: .y360-live-body `display: block` idi. Icindeki .y360-live-question-flow ve .y360-live-chat-screen ise `flex: 1 1 auto` ve `min-height: 0` ile yazilmis — yani bir FLEX ebeveyn bekliyorlar. Blok ebeveynde bu ozellikler hicbir sey yapmaz, cocuk yalnizca kendi icerigi kadar yer kaplar ve panelin dibinde ~100px olu alan kalirdi (dugmenin altindaki buyuk beyaz bosluk). Govde flex kolona cevrilince mevcut flex kurallari amaclandigi gibi calisir; ayrica sohbet ekrani da ayni duzeltmeden yararlanir. --------------------------------------------------------------------- */ .y360-live-body { display: flex; flex-direction: column; min-height: 0; } .y360-live-question-flow:not([hidden]) > .y360-live-question-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Karsilama balonu ustte kalir, yazma alani + dugme dibe yaslanir. */ .y360-live-question-form > .y360-live-form { margin-top: auto; } /* --------------------------------------------------------------------- 4) ICERIK TIPOGRAFISI (.prose) — yasal sayfalar + DB icerikli sayfalar Sablonlar (page-cerez-politikasi, page-gizlilik-politikasi, page-kvkk, page.twig ve hizmet sayfalarindaki metin bloklari) icerigi `prose` sinifli bir kutuda basiyor. Derlenmis style.css'te ise .prose kurali HIC YOK (0 eslesme) — Tailwind Typography eklentisi temada derlenmemis. Sonuc: sinifsiz h3/p/ul etiketleri reset haliyle, yapisik goruluyordu (canli sitede de ayni kusur vardi; site sahibi duzeltilmesini istedi). OLCEK KURALI: yalnizca SINIFSIZ etiketler hedefleniyor (:not([class])). Boylece ayni kutunun icindeki elle tasarlanmis parcalar (or. cerez sayfasindaki "Zorunlu Cerezler" kartlari, text-lg h4'ler) etkilenmez. --------------------------------------------------------------------- */ .prose { color: #334155; line-height: 1.85; } .prose h2:not([class]), .prose h3:not([class]), .prose h4:not([class]) { font-family: "Outfit", "Plus Jakarta Sans", sans-serif; font-weight: 700; color: #1e293b; line-height: 1.3; } .prose h2:not([class]) { font-size: 1.6rem; margin: 2.1em 0 0.7em; } .prose h3:not([class]) { font-size: 1.35rem; margin: 1.9em 0 0.6em; } .prose h4:not([class]) { font-size: 1.15rem; margin: 1.5em 0 0.5em; } .prose h2:not([class]):first-child, .prose h3:not([class]):first-child { margin-top: 0; } /* Baslik numaralari marka renginde ayrissin diye hafif alt cizgi serit */ .prose h3:not([class]) { padding-bottom: 0.35em; border-bottom: 1px solid #e8eef9; } .prose p:not([class]) { margin: 0 0 1.05em; } .prose p.lead { font-size: 1.125rem; color: #475569; margin-bottom: 1.4em; } .prose ul:not([class]), .prose ol:not([class]) { margin: 0 0 1.25em; padding-left: 1.35em; } .prose ul:not([class]) { list-style: disc; } .prose ol:not([class]) { list-style: decimal; } .prose ul:not([class]) > li, .prose ol:not([class]) > li { margin: 0.45em 0; } .prose li::marker { color: #4c7be5; } .prose strong { color: #1e293b; } .prose a:not([class]) { color: #4c7be5; text-decoration: underline; text-underline-offset: 2px; } .prose a:not([class]):hover { color: #3b6ad4; } .prose blockquote:not([class]) { border-left: 3px solid #4c7be5; padding-left: 1em; color: #475569; font-style: italic; margin: 1.4em 0; } .prose hr:not([class]) { border: 0; border-top: 1px solid #e2e8f0; margin: 2em 0; } /* --------------------------------------------------------------------- 5) CEREZ POPUP'I MOBILDE ALT CUBUGUN USTUNDE #cookie-consent-popup `fixed bottom-6` (24px) — mobil alt cubuk ise 4rem + centik payi yuksekliginde ve z-index olarak ustte. Popup acilinca cubugun ALTINDA kaliyordu (site sahibi: "pop-up cubugun ustunde cikmali"). Cubuk yalnizca lg altinda gorundugu icin kaydirma da yalnizca orada. --------------------------------------------------------------------- */ @media (max-width: 1023.98px) { #cookie-consent-popup { bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 12px); } }