. Kapatma: overlay boşluğu, ×, ESC.
* JS: main.js sonu. lity kaldırıldı; youtube embed davranışı native (Kural 12).
* ========================================================================== */
html.lity-active,
html.lity-active body {
overflow: hidden !important;
}
.lity {
z-index: 9990;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
outline: none !important;
white-space: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
transition: opacity 0.3s ease;
display: none;
}
.lity.lity-visible {
display: block;
opacity: 1;
}
.lity * {
box-sizing: border-box;
}
.lity-wrap {
z-index: 9990;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
white-space: normal;
}
.lity-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.lity-container {
z-index: 9992;
position: relative;
text-align: left;
vertical-align: middle;
display: inline-block;
white-space: normal;
max-width: 100%;
max-height: 100%;
outline: none !important;
}
.lity-content {
z-index: 9992;
position: relative;
}
.lity-close {
z-index: 9994;
width: 35px;
height: 35px;
position: fixed;
right: 0;
top: 0;
-webkit-appearance: none;
cursor: pointer;
text-decoration: none;
text-align: center;
padding: 0;
margin: 0;
color: #fff;
font-size: 35px;
line-height: 35px;
font-family: Arial, Baskerville, monospace;
border: 0;
background: none;
box-shadow: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.lity-close:hover,
.lity-close:focus,
.lity-close:active {
color: #fff;
text-decoration: none;
outline: none;
}
/* youtube/iframe — responsive 16:9 */
.lity-iframe .lity-container {
width: 100%;
max-width: 964px;
}
.lity-iframe-container {
width: 100%;
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
.lity-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
border: 0;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}
/* görsel içerik */
.lity-image img {
max-width: 100%;
display: block;
line-height: 0;
border: 0;
}
/* ============================================================================
* Native WOW (scroll-reveal) — wow.js 1.3.0 + animate.css 3.7.1 yerine.
* Markup korunur: .
* JS (main.js sonu) görünüre girince .wow-animated ekler → animasyon oynar.
* Keyframe'ler animate.css 3.7.1 ile birebir (görsel parite, Kural 12).
* ========================================================================== */
.wow-animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.wow-animated.fadeInRight {
animation-name: fadeInRight;
}
.wow-animated.fadeInLeft {
animation-name: fadeInLeft;
}
.wow-animated.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* Bootstrap 5.3 grid — gutter'ı eski BS4 değerine sabitle (görsel parite: 30px toplam = 15px/kenar).
BS5 default 1.5rem (24px) idi → site geneli sütun boşlukları daralmasın. */
.row {
--bs-gutter-x: 30px;
}
/* intlTelInput: telefon input sarmalayıcısı (.iti) vendor'da display:inline-block →
sütunu doldurmuyor, "yarım" duruyordu. Tam genişlik yap (input zaten min-width:100%). */
.form-group-phone .iti {
width: 100%;
display: block;
}
/* Form başarı/hata modalı (.cms_fly-alert) — mail_alerts.blade.php global include ediliyor
ama CSS eskiden yalnızca appointment sayfasında inline'dı → diğer sayfalarda stilsiz,
sayfa altında görünüyordu. Global merkezî overlay stili. */
.cms_fly-alert {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, .4);
z-index: 1060;
}
.cms_fly-alert .content {
padding: 20px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 500px;
border-radius: 5px;
margin: auto;
}
.cms_fly-alert .icon {
width: 80px;
height: 80px;
border: 4px solid;
border-radius: 50%;
margin: 20px 0 30px;
box-sizing: content-box;
cursor: default;
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.cms_fly-alert.success .icon {
border-color: #a5dc86;
color: #a5dc86;
}
.cms_fly-alert.danger .icon {
border-color: #f27474;
color: #f27474;
}
.cms_fly-alert .icon svg {
overflow: visible;
height: 60px;
}
.cms_fly-alert .desc {
color: #595959;
font-size: 30px;
text-align: center;
font-weight: 600;
margin: 0 0 .4em;
word-wrap: break-word;
}
.cms_fly-alert ul.desc {
list-style: none;
padding: 0;
font-size: 18px;
font-weight: 500;
}
.cms_fly-alert .close-btn {
border-radius: 3px;
border: none;
color: #fff;
cursor: pointer;
font-size: 17px;
font-weight: 500;
margin: 15px 5px 0;
padding: 10px 32px;
background-color: #3085d6;
}