/* =====================================================================
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);
}
}
/* ---------------------------------------------------------------------
6) DERLEMEYE GİRMEMİŞ YARDIMCI SINIFLAR — 24.08.2026
Bu projede Tailwind derleme adımı YOK: public/tema/assets/css/style.css
önceden derlenmiş bir dosya. Şablonda geçen ama o dosyada bulunmayan bir
sınıf sessizce hiçbir şey yapmaz; hata da vermez. Tarama sonucu 103 böyle
sınıf bulundu (araclar/eksik-sinif-taramasi.py).
AŞAĞIYA YALNIZCA GÖRÜNÜR ETKİSİ OLANLAR YAZILDI. `prose-*` ailesi bilerek
ATLANDI: ölçüldü, içerik zaten kendi sınıflarını taşıyor (,
), yani prose olmadan da doğru
görünüyor. Gereksiz 300 satır CSS yazmamak için doğrulandı.
Değerler Tailwind'in kendi ölçeğiyle birebir aynı tutuldu; ileride gerçek
bir derleme kurulursa bu blok silinince görünüm değişmez.
--------------------------------------------------------------------- */
/* Kenar çubuğu kartlarının gölgesi — 46 şablonda kullanılıyor, yoktu:
randevu kutusu, test kutusu ve soru kutusu tamamen düz görünüyordu. */
.shadow-\[0_10px_40px_-10px_rgba\(0\,0\,0\,0\.1\)\] { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .10); }
.shadow-\[0_10px_40px_-10px_rgba\(0\,0\,0\,0\.08\)\] { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .08); }
.shadow-\[0_10px_40px_-10px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .50); }
.shadow-\[0_10px_40px_-10px_rgba\(245\,158\,11\,0\.2\)\] { box-shadow: 0 10px 40px -10px rgba(245, 158, 11, .20); }
.shadow-\[0_20px_60px_-10px_rgba\(0\,0\,0\,0\.15\)\] { box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .15); }
.shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.3\)\] { box-shadow: 0 20px 50px rgba(0, 0, 0, .30); }
.shadow-\[0_8px_20px_rgba\(59\,130\,246\,0\.4\)\] { box-shadow: 0 8px 20px rgba(59, 130, 246, .40); }
.shadow-\[0_-5px_20px_-5px_rgba\(0\,0\,0\,0\.05\)\] { box-shadow: 0 -5px 20px -5px rgba(0, 0, 0, .05); }
.hover\:shadow-\[0_20px_40px_-5px_rgba\(76\,123\,229\,0\.15\)\]:hover { box-shadow: 0 20px 40px -5px rgba(76, 123, 229, .15); }
/* Boşluk / ölçü */
.gap-2\.5 { gap: .625rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.mt-2 { margin-top: .5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .625rem; }
.first\:pt-0:first-child { padding-top: 0; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.break-all { word-break: break-all; }
/* Renkler — hata/uyarı metinleri (danışan paneli ve test ekranı) */
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.hover\:text-red-700:hover { color: #b91c1c; }
.border-red-100 { border-color: #fee2e2; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-amber-900 { color: #78350f; }
.text-rose-300 { color: #fda4af; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-slate-300 { background-color: #cbd5e1; }
.border-slate-300 { border-color: #cbd5e1; }
.bg-brand-primary\/50 { background-color: rgba(76, 123, 229, .5); }
/* Odak halkası — klavyeyle gezinen kullanıcı alanın seçili olduğunu görmeli */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(76, 123, 229, .4)); }
.focus\:ring-brand-primary\/40:focus { --tw-ring-color: rgba(76, 123, 229, .4); }
/* Duyarlı boyutlar */
@media (min-width: 768px) {
.md\:text-sm { font-size: .875rem; line-height: 1.25rem; }
}
@media (min-width: 1024px) {
.lg\:p-6 { padding: 1.5rem; }
.lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Açılır öge (SSS akordeonu) — açıkken */
details[open] > summary .group-open\:rotate-45 { transform: rotate(45deg); }
details[open].open\:shadow-md,
details[open] .open\:shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
/* 50/50 "SSS + İlgili sayfalar" bölümü için eksik olanlar (24.08.2026).
Doğrudan alt dizi araması ile doğrulandı; style.css'te yoklar. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
@media (min-width: 768px) {
.md\:p-8 { padding: 2rem; }
.md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
/* Danışan paneli (/hesabim/) — 24.08.2026 yeniden tasarımında gereken,
derlenmiş style.css'te bulunmayan yardımcılar. Her biri doğrudan
alt dizi aramasıyla doğrulandı. */
.border-emerald-200 { border-color: #a7f3d0; }
.opacity-40 { opacity: .4; }
.mt-0\.5 { margin-top: .125rem; }
.mt-5 { margin-top: 1.25rem; }
.from-black\/85 { --tw-gradient-from: rgba(0,0,0,.85); --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,.6), var(--tw-gradient-to); }
.to-black\/30 { --tw-gradient-to: rgba(0,0,0,.3); }
/* Geniş tabloyu kendi içinde kaydır — mobilde sayfa yatay kaymasın. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
.md\:p-5 { padding: 1.25rem; }
.md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
.lg\:col-span-3 { grid-column: span 3 / span 3; }
}
/* ---------------------------------------------------------------------
7) SOHBET BUTONU — MASAÜSTÜNDE YAZI GERİ GELDİ (24.08.2026)
canli-destek.css dosyasında HİÇ @media sorgusu yok (0 eşleşme, hem yerelde
hem canlıda doğrulandı). Dosyanın sonundaki mobil override bloğu
sarmalayıcısını kaybetmiş, bu yüzden
.y360-live-trigger-text { display: none }
her ekran boyutunda çalışıyordu — masaüstünde de buton yalnızca ikon
olarak kalıyordu. Site sahibi "eskiden yazı vardı" diye bildirdi, haklı.
Ortak canli-destek.css'e DOKUNULMUYOR (kardeş sitelerle paylaşılabilir);
düzeltme yalnızca bu siteye ait duzeltmeler.css'te ve yalnızca geniş
ekranda geçerli. Mobilde ikon hâli KORUNUYOR — istenen de buydu.
--------------------------------------------------------------------- */
@media (min-width: 1024px) {
.y360-live-support .y360-live-trigger-text {
display: inline;
}
.y360-live-support .y360-live-trigger {
width: auto;
height: auto;
min-height: 60px;
justify-content: flex-start;
gap: 12px;
padding: 0 12px 0 22px;
border-radius: 999px;
}
/*
İKON: BEYAZ DAİRE + MAVİ SİMGE.
Önceden daire `rgba(255,255,255,.18)` idi — mavi zeminde neredeyse
görünmüyordu, simge de beyazdı; ikisi birbirine karışıyordu. Dolu
beyaz daire simgeyi butondan ayırıyor ve tıklanacak yeri belli ediyor.
Mavi ton butonun degrade bitişiyle (#2563eb) aynı — ayrı bir renk
eklemek yerine mevcut paletten alındı.
*/
.y360-live-support .y360-live-trigger-icon {
/*
42px: mobil override'ı (58px) burada geri alıyoruz. 60px'lik
butonda 58px'lik daire kenarlara yapışıyor, nefes almıyordu.
Ana canli-destek.css'teki masaüstü ölçüsü zaten 42px'ti — o dosya
@media sarmalayıcısını kaybettiği için mobil değeri kazanıyordu.
*/
width: 36px;
height: 36px;
font-size: 15px;
background: #fff;
color: #2563eb;
box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.y360-live-support .y360-live-trigger:hover .y360-live-trigger-icon {
background: #fff;
color: #1d4ed8;
}
}
/* /hesabim/ hero'su — içerik 250px'e sığmıyordu, metin alt kenara yapışıyordu. */
.min-h-\[320px\] { min-height: 320px; }
/* ---------------------------------------------------------------------
BANKA HESABI KARTLARI (Hesabim > Odemelerim)
Bu dort sinif derlenmis style.css'te YOK — sablonda kullanildiklarinda
sessizce hicbir sey yapiyorlardi. IBAN'in tek duzen genislikte yazilmasi
ve karekodun sabit kutuya sigmasi icin gercek CSS ile tanimlaniyorlar.
font-mono ozellikle onemli: IBAN 26 hane ve degisken genislikli yazi
tipinde rakamlar kayiyor, dorderli gruplar hizalanmiyor.
--------------------------------------------------------------------- */
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
}
.w-28 { width: 7rem; }
.h-28 { height: 7rem; }
.object-contain { object-fit: contain; }
/* "Odemeyi yaptim" ve "Gorusmeye katil" dugmeleri — derlenmis style.css'te
emerald-600/700 tonlari yok, sessizce renksiz kaliyorlardi. */
.bg-emerald-600 { background-color: #059669; }
.hover\:bg-emerald-700:hover { background-color: #047857; }
/* ---------------------------------------------------------------------
POP-UP (Hesabim ekrani)
Onaylar tarayicinin confirm() kutusuyla soruluyordu: sitenin tasarimiyla
ilgisi olmayan, mobilde adres cubuguna yapisan bir sistem penceresi.
Odeme gibi bir adimda danisanin guvenini sarsiyordu.
Gercek CSS ozellikleriyle yazildi — derlenmis Tailwind'de bu siniflarin
karsiligi yok ve olmayan sinif sessizce hicbir sey yapmaz.
--------------------------------------------------------------------- */
.y360-popup {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.y360-popup[hidden] { display: none; }
.y360-popup__perde {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
}
.y360-popup__kutu {
position: relative;
width: 100%;
max-width: 440px;
background: #fff;
border-radius: 20px;
padding: 28px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
animation: y360PopupGir 0.18s ease-out;
}
@keyframes y360PopupGir {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.y360-popup__baslik {
margin: 0 0 12px;
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.y360-popup__metin {
font-size: 14.5px;
line-height: 1.65;
color: #475569;
}
.y360-popup__dugmeler {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 24px;
flex-wrap: wrap;
}
.y360-popup__vazgec,
.y360-popup__onay {
border: 0;
cursor: pointer;
padding: 11px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
transition: background-color 0.15s ease;
}
.y360-popup__vazgec {
background: #f1f5f9;
color: #475569;
}
.y360-popup__vazgec:hover { background: #e2e8f0; }
.y360-popup__vazgec[hidden] { display: none; }
.y360-popup__onay {
background: #2563eb;
color: #fff;
}
.y360-popup__onay:hover { background: #1d4ed8; }
@media (max-width: 480px) {
.y360-popup__kutu { padding: 22px; }
.y360-popup__dugmeler button { flex: 1 1 auto; }
}
/* ================================================================
ÜLKE SEÇİMİ — /hesabim/ hesap bilgileri
Açılır liste zorunlu bir alan için fazla sessizdi: kullanıcı hiç
dokunmadan kaydedip randevu ekranında "ülke seçin" uyarısıyla
karşılaşıyordu. Kartlar seçimin yapılıp yapılmadığını bir bakışta
gösteriyor.
Ülke çipleri yalnızca "Yurt dışı" tıklanınca açılıyor — Türkiye'deki
danışanın 21 ülkelik bir listeyle işi yok.
================================================================ */
.ulke-kart {
display: flex;
align-items: center;
margin: 0;
padding: 12px 14px;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
background: #fff;
cursor: pointer;
text-align: left;
font: inherit;
width: 100%;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.ulke-kart:hover { border-color: #4C7BE5; background: #f6faff; }
.ulke-kart input { position: absolute; opacity: 0; pointer-events: none; }
.ulke-kart strong {
display: block;
font-size: 14px;
font-weight: 800;
color: #12305a;
margin-bottom: 1px;
}
.ulke-kart small {
display: block;
font-size: 11px;
font-weight: 600;
color: #6b8099;
line-height: 1.3;
}
/* Seçili kart: renk TEK BAŞINA yeterli değil (renk körlüğü), çerçeve
kalınlığı ve halka da değişiyor. */
.ulke-kart:has(input:checked),
.ulke-kart.is-active {
border-color: #4C7BE5;
background: #eef5ff;
box-shadow: 0 0 0 3px rgba(76, 123, 229, .14);
}
.ulke-kart:has(input:focus-visible),
.ulke-kart--dugme:focus-visible {
outline: 2px solid #4C7BE5;
outline-offset: 2px;
}
.ulke-liste {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 10px;
padding: 13px;
border: 1px dashed #dbe7f6;
border-radius: 12px;
background: #f8fbff;
}
.ulke-liste[hidden] { display: none; }
.ulke-cip {
margin: 0;
padding: 7px 13px;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
background: #fff;
cursor: pointer;
font-size: 12.5px;
font-weight: 700;
color: #40556e;
transition: border-color .15s, background .15s, color .15s;
}
.ulke-cip:hover { border-color: #4C7BE5; color: #12305a; }
.ulke-cip input { position: absolute; opacity: 0; pointer-events: none; }
.ulke-cip:has(input:checked) {
border-color: #4C7BE5;
background: #4C7BE5;
color: #fff;
}
.ulke-cip:has(input:focus-visible) {
outline: 2px solid #4C7BE5;
outline-offset: 2px;
}
/* KVKK onay kutusu — marka rengi. `accent-brand-primary` derlenmiş
Tailwind çıktısında YOK (derleme adımı olmadığı için sessizce hiçbir
şey yapardı); gerçek CSS olarak yazılıyor. */
.kvkk-kutusu { accent-color: #4C7BE5; }
/* ══════════════════════════════════════════════════════════════════
| ALT BİLGİ BAĞLANTILARI — DAR EKRANDA PARMAK PAYI
|
| Ölçüldü (375 px): alt bilgideki bağlantı listeleri 333x18 piksel.
| Yükseklik 18, aralarındaki boşluk 8 — yani iki komşu bağlantının
| merkezi 26 piksel arayla duruyor. Parmak ucu bundan geniş; istenen
| maddenin bir altına basmak kolay.
|
| Yazı boyutu BÜYÜTÜLMÜYOR: tasarımın ölçeği korunsun diye yalnızca
| dikey iç boşluk ekleniyor, hedef 32 piksele çıkıyor. Bağlantılar
| zaten `flex` olduğu için `padding-block` satırı bozmuyor.
|
| Yalnızca 768 px altında: masaüstünde imleç var, sorun yok.
| ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
footer ul > li > a {
padding-block: 7px;
}
/* Boşluk iç boşluğa taşındığı için listenin kendi aralığı azaltılıyor;
aksi hâlde alt bilgi gereksiz uzuyor. */
footer ul.space-y-2 > li + li,
footer ul.space-y-3 > li + li {
margin-top: 0;
}
}
/* ══════════════════════════════════════════════════════════════════════
| UYGULAMA KABUĞU — randevu subdomain'i (başlık + alt bilgi)
|
| NEDEN BURADA, TAILWIND YARDIMCISI OLARAK DEĞİL:
| `style.css` önceden derlenmiş bir çıktı; derleme adımı yok. İçinde
| bulunmayan ya da sırası tutmayan bir yardımcı SESSİZCE hiçbir şey
| yapmıyor. İlk denemede `hidden md:flex` yazıldı ve düğmeler masaüstünde
| de görünmez kaldı (ölçüldü: hesaplanan display = none). Kabuk bu yüzden
| kendi sınıflarıyla, elle yazıldı.
|
| RENKLER SİTENİN KENDİSİ: marka mavisi #4C7BE5, koyu #1E293B, başlık
| yazı tipi Outfit — site sahibinin isteği "aynı tasarım".
| ══════════════════════════════════════════════════════════════════════ */
.y360-uyg-baslik {
background: #4C7BE5;
color: #fff;
box-shadow: 0 6px 20px -8px rgba(30, 41, 59, .35);
position: relative;
z-index: 50;
}
/* GENİŞLİK ilbeyucar.com İLE AYNI (site sahibinin isteği): sitenin başlığı
`max-w-[1920px] mx-auto px-6 lg:px-10` — 1900px ekranda ölçüldü: içerik
40px'ten başlıyor, en fazla 1920px. */
.y360-uyg-baslik__ic {
max-width: 1920px;
margin: 0 auto;
padding: 0 40px;
height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.y360-uyg-marka {
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
text-decoration: none;
line-height: 1;
min-width: 0;
}
.y360-uyg-marka__gorsel { height: 48px; width: auto; object-fit: contain; display: block; }
.y360-uyg-marka__ad {
font-family: Outfit, system-ui, sans-serif;
font-size: 24px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
}
.y360-uyg-marka__alt {
margin-top: 5px;
font-size: 11px;
font-weight: 600;
letter-spacing: .32em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
white-space: nowrap;
}
.y360-uyg-gezinme { display: flex; align-items: center; gap: 10px; }
.y360-uyg-gezinme a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .28);
transition: background .2s, color .2s;
}
.y360-uyg-gezinme a:hover { background: rgba(255, 255, 255, .24); }
/* Hesabım — girişliyken en önemli hedef, beyaz hap olarak öne çıkıyor. */
.y360-uyg-gezinme a.is-hesap { background: #fff; color: #4C7BE5; border-color: #fff; }
.y360-uyg-gezinme a.is-hesap:hover { background: #F1F5FF; }
.y360-uyg-gezinme a:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Telefonda başlıktaki düğmeler gizleniyor: aynı hedefler ekranın altındaki
sabit çubukta, parmağın ulaştığı yerde. İki kopya göstermek yer israfı. */
@media (max-width: 1023px) {
.y360-uyg-gezinme { display: none; }
.y360-uyg-baslik__ic { height: 64px; padding: 0 24px; justify-content: center; }
.y360-uyg-marka { align-items: center; }
.y360-uyg-marka__ad { font-size: 20px; }
}
/* ─────────────────────────── çekmece ───────────────────────────
| Uygulama çekmecesi hesap panelinin satır tasarımını kullanıyor
| (.y360-member-sheet-nav — ikon, etiket, ok). Pazarlama çekmecesindeki
| ortalanmış büyük yazılar bir web sitesi menüsü gibi duruyordu; bu bir
| uygulama. Çıkış satırı form olduğu için düğmenin bağlantıyla aynı
| görünmesi gerekiyor.
*/
.y360-uyg-cekmece .y360-member-sheet-nav button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 62px;
padding: 0 4px;
background: none;
border: 0;
border-bottom: 1px solid #eef2f7;
color: #e11d48;
font: inherit;
font-size: 19px;
font-weight: 700;
cursor: pointer;
text-align: left;
}
.y360-uyg-cekmece .y360-member-sheet-nav button span {
display: flex;
align-items: center;
gap: 14px;
}
.y360-uyg-cekmece__not {
margin-top: 22px;
font-size: 13px;
color: #64748b;
text-align: center;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════════════
| /soru-sor/ — TAM SAYFA SOHBET (uygulama)
|
| Aynı canlı destek bileşeni; yüzen balon yerine sayfanın gövdesinde.
| Balonun kuralları (canli-destek.css) `position: fixed`, 380px genişlik,
| sağ alt köşe. Buradaki kurallar `.is-sayfa` ile daha özgül seçici
| kullanıyor, yani yükleme sırasından bağımsız olarak kazanıyor.
|
| TELEFON ÖNCELİKLİ: sohbet kutusu görünür alanın yüksekliğini dolduruyor
| (100dvh — adres çubuğu açılıp kapanırken zıplamasın), üst başlık ve alt
| gezinme çubuğu kadar pay bırakılıyor. Tablet ve masaüstünde ortalanmış,
| okunabilir genişlikte bir kart.
| ══════════════════════════════════════════════════════════════════════ */
/* TAM GENİŞLİK VE ÇERÇEVESİZ (site sahibinin isteği): sohbet ortalanmış
bir kart değil, başlığın altındaki alanın tamamı — bir mesajlaşma
uygulaması gibi. Etrafta boşluk yok; hizalama içerideki dolguyla
(aşağıda) başlıktaki logoya göre yapılıyor. */
.y360-sohbet-sayfa {
background: #fff;
padding: 0;
}
.y360-sohbet-sayfa__ic {
max-width: none;
margin: 0;
}
/*
| KÖK ID SEÇİCİSİYLE — sınıf seçicisi yetmedi.
|
| Balonun kendi kuralı `.y360-live-support.is-open { width: min(340px, …) }`
| benim `.y360-live-support.is-sayfa` seçicimle AYNI özgüllükte ve
| canli-destek.css bu dosyadan sonra yüklendiği için kazanıyordu: sohbet
| 762px'lik alanda 340px'e sıkışıyordu (ölçüldü). ID seçicisi yükleme
| sırasından bağımsız kazanıyor.
|
| `align-items: stretch` — balon kökü sağa yaslamak için flex-end
| kullanıyor; tam sayfada panelin genişliği doldurması gerekiyor.
*/
#y360-live-support.is-sayfa {
position: static;
bottom: auto;
z-index: auto;
width: 100%;
max-width: none;
align-items: stretch;
transform: none;
}
#y360-live-support.is-sayfa .y360-live-panel {
align-self: stretch;
width: 100%;
}
#y360-live-support.is-sayfa .y360-live-panel {
display: flex;
width: 100%;
margin: 0;
min-height: 0;
height: calc(100dvh - 76px - 68px);
max-height: 820px;
border-radius: 22px;
box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .28);
animation: none;
}
/* Başlıkta kapatma düğmesi yok; sağ iç boşluk onun için ayrılmıştı. */
.y360-live-support.is-sayfa .y360-live-head { padding-right: 22px; }
/* ─── iki adımlı form ─── */
.y360-live-support.is-sayfa .y360-sayfa-adim {
display: flex;
flex-direction: column;
gap: 14px;
}
.y360-live-support.is-sayfa .y360-sayfa-adim[hidden] { display: none; }
.y360-live-support.is-sayfa .y360-sayfa-adim label {
display: flex;
flex-direction: column;
gap: 6px;
}
.y360-live-support.is-sayfa .y360-sayfa-adim label span {
font-size: 13px;
font-weight: 700;
color: #334155;
}
.y360-live-support.is-sayfa .y360-sayfa-adim label em {
font-style: normal;
font-weight: 500;
color: #94A3B8;
}
.y360-live-support.is-sayfa .y360-sayfa-adim input {
width: 100%;
min-height: 48px;
padding: 0 14px;
font: inherit;
font-size: 15px;
color: #0F172A;
background: #fff;
border: 1px solid #CBD5E1;
border-radius: 12px;
transition: border-color .15s, box-shadow .15s;
}
.y360-live-support.is-sayfa .y360-sayfa-adim input:focus {
outline: none;
border-color: #4C7BE5;
box-shadow: 0 0 0 3px rgba(76, 123, 229, .16);
}
.y360-live-support.is-sayfa .y360-sayfa-not {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
color: #1E6B45;
background: #E7F5EC;
border-radius: 10px;
}
@media (max-width: 1023px) {
.y360-sohbet-sayfa { padding: 0; background: #fff; }
.y360-sohbet-sayfa__ic { max-width: none; }
/* Telefonda kart değil, ekranın kendisi: köşe ve gölge yok. Yükseklik
üst başlık (64px) ve alt gezinme çubuğu (64px + güvenli alan) kadar
kısa, böylece mesaj yazma kutusu çubuğun altında kalmıyor. */
#y360-live-support.is-sayfa .y360-live-panel {
height: calc(100dvh - 64px - 64px - env(safe-area-inset-bottom));
max-height: none;
border-radius: 0;
border: 0;
box-shadow: none;
}
/* Sohbet ekranında alt bilgi gereksiz kaydırma yaratıyor. */
body:has(.y360-sohbet-sayfa) footer { display: none; }
}
/* Tam sayfa sohbette alttaki WhatsApp / Hemen Ara satırı gizli: aynı iki
hedef ekranın altındaki sabit gezinme çubuğunda zaten var. Tekrar eden
satır mesaj yazma kutusunu yukarı itip sohbet alanını daraltıyordu. */
#y360-live-support.is-sayfa .y360-live-contact-row { display: none !important; }
/* Giriş yapmış danışanın karşılama kutusu ve misafirin KVKK satırı. */
#y360-live-support.is-sayfa .y360-sayfa-karsilama {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: #EEF3FD;
border-radius: 12px;
}
#y360-live-support.is-sayfa .y360-sayfa-karsilama strong {
font-size: 16px;
color: #1E293B;
}
#y360-live-support.is-sayfa .y360-sayfa-karsilama span {
font-size: 13px;
color: #475569;
line-height: 1.5;
}
#y360-live-support.is-sayfa .y360-sayfa-kvkk {
margin: 0;
font-size: 12px;
line-height: 1.55;
color: #64748B;
}
#y360-live-support.is-sayfa .y360-sayfa-kvkk a {
color: #4C7BE5;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Sohbet derlenemezse gösterilen yedek — boş sayfa yerine iletişim. */
.y360-sohbet-yedek {
text-align: center;
padding: 56px 24px;
background: #fff;
border-radius: 22px;
}
.y360-sohbet-yedek h1 {
font-family: Outfit, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
color: #1E293B;
margin: 0 0 8px;
}
.y360-sohbet-yedek p { color: #475569; margin: 0 0 22px; }
.y360-sohbet-yedek__dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.y360-sohbet-yedek__dugme {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
color: #fff;
background: #4C7BE5;
}
.y360-sohbet-yedek__dugme.is-whatsapp { background: #22A45D; }
/*
| Sohbet tam genişlikte ama FORM ALANLARI değil: 1500px'lik bir ad kutusu
| okunmuyor ve göz satırı takip edemiyor. Kimlik ve mesaj adımları okunur
| bir genişlikte (640px) sola hizalı; mesaj balonları ise alanın tamamını
| kullanıyor (ziyaretçi sağda, klinik solda — mesajlaşma uygulamalarındaki
| gibi).
*/
#y360-live-support.is-sayfa .y360-sayfa-adim { max-width: 640px; }
/* Tam sayfa başlığında marka yerine "Canlı Destek" yazıyor; büyük harf
aralığı marka içindi, ekran adında gereksiz. */
#y360-live-support.is-sayfa .y360-live-brand { letter-spacing: 0; }
/* "Devam et" / "Sohbeti Başlat": balonda kartın altına yayılan tam genişlik
bir şerit (negatif kenar boşluğuyla). Tam sayfada form alanları 640px'e
sınırlı olduğu için şerit alanların iki yanından taşıyordu (ölçüldü:
alan 640px, düğme 668px). Burada alanlarla aynı hizada, yuvarlak bir düğme. */
#y360-live-support.is-sayfa .y360-sayfa-adim .y360-live-submit {
width: 100%;
margin: 4px 0 0;
border-radius: 12px;
position: static;
}
/* ═══════════════════════ ÇERÇEVESİZ SOHBET ═══════════════════════
| Kenarlık, köşe yuvarlaklığı ve gölge yok (site sahibinin isteği:
| "çerçeve olmasın"). Panel başlığın altındaki görünür alanı tamamen
| dolduruyor: 100dvh − üst başlık (76px).
|
| İçerik başlıktaki logoyla AYNI HİZADA: masaüstünde 40px, telefonda
| 20px (bkz. .y360-uyg-baslik__ic). Balonun kendi dolguları (gövde 18px,
| başlık 22px) kart içinde çalışıyordu; kenara dayanınca logo ile sohbet
| başlığı arasında kayma oluşuyordu.
*/
#y360-live-support.is-sayfa .y360-live-panel {
border: 0;
border-radius: 0;
box-shadow: none;
height: calc(100dvh - 76px);
max-height: none;
}
#y360-live-support.is-sayfa .y360-live-head { padding: 18px 40px 16px; }
#y360-live-support.is-sayfa .y360-live-body { padding: 20px 40px; }
#y360-live-support.is-sayfa .y360-live-composer { padding-left: 40px; padding-right: 40px; }
@media (max-width: 1023px) {
#y360-live-support.is-sayfa .y360-live-head { padding: 14px 20px 12px; }
#y360-live-support.is-sayfa .y360-live-body { padding: 16px 20px; }
#y360-live-support.is-sayfa .y360-live-composer { padding-left: 20px; padding-right: 20px; }
}
/* ══════════════════════════════════════════════════════════════════════
| UYGULAMA ALT BİLGİSİ — iki satır, tam genişlik.
|
| 1. satır : adres · telefon · e-posta
| 2. satır : telif · KVKK / Gizlilik / Çerez · LunaX
|
| İki satır AYNI ızgarayı kullanıyor (1fr auto 1fr): adres telifin,
| telefon yasal bağlantıların, e-posta LunaX'in tam üstünde. Yan sütunlar
| eşit olduğu için orta öğeler iki satırda da ekranın tam ortasında.
| Kenar boşluğu başlıkla aynı (40px / telefonda 20px).
|
| Renkler orijinal footer.twig'in paleti: zemin #0b1121, metin #94a3b8.
| ══════════════════════════════════════════════════════════════════════ */
.y360-uyg-altbilgi {
background: #0b1121;
color: #94a3b8;
border-top: 1px solid rgba(255, 255, 255, .05);
font-size: 14px;
}
/* Yatay genişlik ve boşluk sitenin kendi sınıflarından geliyor:
`container mx-auto px-4 lg:px-6` (ilbeyucar.com'un alt bilgisi — 1900px
ekranda ölçüldü: en fazla 1536px, ortalı, iki yanda 24px). Burada
YALNIZCA dikey boşluk; kısaltma (padding:) yazılsaydı yataydakini ezerdi. */
.y360-uyg-altbilgi__ic {
padding-top: 44px;
padding-bottom: 28px;
display: flex;
flex-direction: column;
gap: 36px;
}
.y360-uyg-altbilgi__iletisim,
.y360-uyg-altbilgi__serit {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px 40px;
}
/* 1. satırın öğeleri üstten hizalı: adres iki satır, diğerleri tek. */
.y360-uyg-altbilgi__iletisim { align-items: start; }
.y360-uyg-altbilgi__iletisim > :nth-child(1),
.y360-uyg-altbilgi__serit > :nth-child(1) { justify-self: start; }
.y360-uyg-altbilgi__iletisim > :nth-child(2),
.y360-uyg-altbilgi__serit > :nth-child(2) { justify-self: center; }
.y360-uyg-altbilgi__iletisim > :nth-child(3),
.y360-uyg-altbilgi__serit > :nth-child(3) { justify-self: end; }
.y360-uyg-altbilgi__oge { text-decoration: none; }
.y360-uyg-altbilgi__deger {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: #CBD5E1;
}
.y360-uyg-altbilgi__deger--vurgu {
font-size: 17px;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
white-space: nowrap;
}
.y360-uyg-altbilgi__serit {
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, .05);
}
.y360-uyg-altbilgi__telif { margin: 0; font-size: 12px; color: #475569; }
.y360-uyg-altbilgi__yasal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 14px;
font-size: 13px;
}
.y360-uyg-altbilgi__yasal a { color: #94A3B8; text-decoration: none; font-weight: 500; transition: color .2s; }
.y360-uyg-altbilgi__yasal a:hover { color: #3B82F6; }
.y360-uyg-altbilgi__yasal span { color: #334155; }
.y360-uyg-altbilgi__lunax { display: block; opacity: .5; transition: opacity .2s; }
.y360-uyg-altbilgi__lunax:hover { opacity: 1; }
/* Site sahibinin isteği: logo büyüsün (orijinalde h-5 = 20px). */
.y360-uyg-altbilgi__lunax img { display: block; height: 32px; width: auto; filter: brightness(0) invert(1); }
/* Telefonda alt alta: iletişim öğeleri sola hizalı bir sütun (ikonlar
üst üste dizilsin), şerit ortalı. Sabit alt gezinme çubuğu (64px) son
satırı örtmesin diye alt dolgu geniş. */
@media (max-width: 1023px) {
.y360-uyg-altbilgi__ic { padding-top: 32px; padding-bottom: 104px; gap: 28px; }
.y360-uyg-altbilgi__iletisim {
grid-template-columns: 1fr;
gap: 18px;
}
.y360-uyg-altbilgi__iletisim > * { justify-self: start !important; }
.y360-uyg-altbilgi__serit {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 14px;
}
.y360-uyg-altbilgi__serit > * { justify-self: center !important; }
}
/* ═══════════════════════ SOHBET — MASAÜSTÜ DÜZELTMESİ ═══════════════════════
| Site sahibi: "canlı destek sayfası hâlâ problemli" (ekran görüntüsü, 1900px).
| Ölçülen üç arıza:
|
| 1. MESAJLAR İLE FORM ARASINDA 255px BOŞLUK. Balonun formu
| `margin-top: auto` ile kartın dibine yaslanıyor (ölçüldü: 202px otomatik
| kenar boşluğu). Küçük balonda doğru; tam sayfada kocaman bir delik.
| 2. İÇERİK SOLA YAPIŞIK, SAĞIN ÜÇTE İKİSİ BOŞ. Tam genişlik sohbet 1900px'te
| okunmuyor. Zemin kenardan kenara (çerçevesiz) kalıyor, KONUŞMA SÜTUNU
| ortalanıyor (en fazla 860px) — geniş ekranlı mesajlaşma uygulamalarının
| kalıbı. Telefonda sütun zaten ekranın kendisi.
| 3. SAYFA KAYIYOR, ÜST BAŞLIK KAYBOLUYOR. Sohbet görünür alanı tam
| dolduruyor, alt bilgi hemen altında başlıyordu (y:940). Sohbet ekranında
| alt bilgi gizli: mesajlaşma ekranı sayfa değil, ekranın kendisi.
| KVKK bağlantısı formun içinde duruyor.
|
| Ayrıca panelin altında 131px ölü alan vardı: gövde büyümüyordu.
*/
#y360-live-support.is-sayfa [data-live-form] { margin-top: 0; }
#y360-live-support.is-sayfa .y360-live-body {
flex: 1 1 auto;
min-height: 0;
max-height: none;
}
@media (min-width: 1024px) {
#y360-live-support.is-sayfa .y360-live-head,
#y360-live-support.is-sayfa .y360-live-body,
#y360-live-support.is-sayfa .y360-live-composer {
padding-left: max(40px, calc((100% - 860px) / 2));
padding-right: max(40px, calc((100% - 860px) / 2));
}
}
body:has(.y360-sohbet-sayfa) .y360-uyg-altbilgi { display: none; }
/* Yenileme düğmesi balonda başlığın sağ köşesine MUTLAK konumlanıyor;
tam sayfada ekranın en sağına kaçıyordu. Akışa alınınca başlık (flex,
space-between) onu ortalanmış konuşma sütununun sağ kenarına koyuyor. */
#y360-live-support.is-sayfa .y360-live-head-actions { position: static; }
/* ═══════════════════════ TESTLER — /test/ (uygulama) ═══════════════════════
| Hero kaldırıldı; testler 3 sütunda (tablette 2, telefonda 1). Genişlik
| alt bilgiyle aynı container'dan geliyor, burada yalnızca dikey boşluk
| ve ızgara var.
*/
.y360-uyg-testler-sayfa {
background: #F8FAFC;
padding: 40px 0 64px;
}
.y360-uyg-testler-baslik {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 32px;
}
.y360-uyg-testler-baslik h1 {
margin: 0;
font-family: Outfit, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: #1E293B;
}
.y360-uyg-testler-baslik p {
margin: 0;
max-width: 68ch;
font-size: 15px;
line-height: 1.6;
color: #64748B;
}
.y360-uyg-testler {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 1023px) {
.y360-uyg-testler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.y360-uyg-testler-baslik h1 { font-size: 26px; }
}
@media (max-width: 639px) {
.y360-uyg-testler { grid-template-columns: 1fr; }
.y360-uyg-testler-sayfa { padding: 28px 0 40px; }
}