/* ============================================================
   pages.css — İç sayfalar · Banner · Galeri · Randevu · Blog
   · Lightbox
   ============================================================ */

/* ---------- SAYFA BANNER (breadcrumb) ---------- */
.breadcrumb-area {
    background: var(--grad-band); position: relative; overflow: hidden;
}
.breadcrumb-area::before {
    content: ""; position: absolute; top: -100px; right: 8%; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(20,194,178,.22), transparent 70%); border-radius: 50%;
}
.breadcrumb-area::after {
    content: ""; position: absolute; bottom: -120px; left: -60px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); border-radius: 50%;
}
.breadcrumb-text { position: relative; z-index: 2; }
.breadcrumb-text h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.breadcrumb-menu { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.breadcrumb-menu li { color: rgba(255,255,255,.65); font-weight: 500; display: flex; gap: 10px; align-items: center; }
.breadcrumb-menu li:not(:last-child)::after { content: "/"; color: rgba(255,255,255,.4); }
.breadcrumb-menu li a { color: rgba(255,255,255,.85); }
.breadcrumb-menu li a:hover { color: #fff; }
.breadcrumb-menu li.active { color: #fff; }

/* ---------- HİZMET DETAY ---------- */
.services-details-thumb img { box-shadow: var(--shadow); }
.services-details-content { color: var(--body); }
.services-details-content h2, .services-details-content h3, .services-details-content h4 { margin-top: 1.4em; }
.services-details-content img { border-radius: var(--r); margin: 1em 0; }
.services-details-content ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.services-details-content ul li { margin-bottom: 8px; }
.services-sidebar { position: sticky; top: 100px; }
.services-widget { box-shadow: var(--shadow-sm); }
.services-category li a { display: flex; align-items: center; transition: var(--t); }
.services-category li a:hover { color: var(--primary); padding-left: 4px; }

/* ---------- İLETİŞİM ---------- */
.contact-area .services-widget-bg p { display: flex; align-items: flex-start; gap: 10px; }
.contact-area .services-widget-bg i { margin-top: 6px; }
.eh-map-wrapper { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.eh-map-wrapper iframe { display: block; }
.contact-area textarea { border-radius: 14px !important; border: 1.5px solid var(--line) !important; padding: 16px 20px !important; }
.contact-area textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-soft); outline: none; }

/* ---------- GALERİ SAYFASI ---------- */
.gallery-box { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-box img { width: 100%; height: 300px; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-box:hover img { transform: scale(1.08); }
.gallery-content {
    position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 24px;
    background: linear-gradient(to top, rgba(10,40,60,.8), transparent 55%);
    opacity: 0; transition: var(--t);
}
.gallery-box:hover .gallery-content { opacity: 1; }
.gallery-content h2 { color: #fff !important; font-size: 1.25rem; margin: 0; }
.popup-image { display: block; cursor: zoom-in; }
.gal-filter { padding: 11px 22px; font-size: 14px; }
.gal-filter:not(.active) { background: #fff; color: var(--primary-deep); box-shadow: var(--shadow-sm); }
.gal-filter:not(.active) span { background: var(--primary-soft); color: var(--primary); }
.gal-item { margin-bottom: 30px; }

/* ---------- BLOG İÇERİK (yazı gövdesi) ---------- */
.blog-text h2, .blog-text h3, .blog-detail-content h2, .blog-detail-content h3 { color: var(--ink); margin: 1.5em 0 .6em; font-size: 1.4rem; }
.blog-text p, .blog-detail-content p { margin-bottom: 1.1em; line-height: 1.85; color: var(--body); }
.blog-text ul, .blog-detail-content ul { list-style: none; padding: 0; margin: 0 0 1.3em; }
.blog-text ul li, .blog-detail-content ul li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--body); line-height: 1.7; }
.blog-text ul li::before, .blog-detail-content ul li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--primary); }
.blog-figure { margin: 1.8em 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.blog-figure img { width: 100%; height: auto; display: block; }
.blog-note { background: var(--bg-soft); border-left: 4px solid var(--primary); padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-top: 28px; }

/* ---------- BLOG LİSTE / SIDEBAR ---------- */
.blog-sidebar .widget { background: #fff; padding: 28px; border-radius: var(--r); box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); }
.widget-title h4 { font-size: 1.2rem; position: relative; padding-bottom: 12px; margin-bottom: 0; }
.widget-title h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--primary); border-radius: 3px; }
.widget-categories ul li { margin-bottom: 8px; }
.widget-categories ul li a { display: block; padding: 11px 16px; color: var(--body); border-radius: 12px; font-weight: 500; transition: var(--t); }
.widget-categories ul li a:hover, .widget-categories ul li a.active { background: var(--primary-soft); color: var(--primary); padding-left: 22px; }
.widget-post-item { display: flex; gap: 14px; align-items: center; }
.widget-post-thumb img { border-radius: 10px; }
.widget-post-content h6 { margin: 0 0 4px; font-size: 14px; line-height: 1.45; }
.widget-post-content h6 a { color: var(--ink); }
.widget-post-content h6 a:hover { color: var(--primary); }
.widget-post-date { font-size: 12px; color: var(--muted); }

/* Sayfalama */
.pagination-wrap { display: flex; justify-content: center; }
.pagination { display: flex; gap: 8px; }
.page-link {
    min-width: 46px; height: 46px; display: grid; place-items: center; padding: 0 14px;
    border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 600; transition: var(--t);
}
.page-link:hover, .page-item.active .page-link { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- RANDEVU SİHİRBAZI ---------- */
.appoinment-area { background: var(--bg-soft) !important; }
.eh-booking {
    background: #fff; border-radius: var(--r); padding: 30px; margin-bottom: 24px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft);
}
.eh-booking h4 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; margin-bottom: 20px; }
.eh-booking h4 small { font-weight: 400; font-size: .85rem; }
.eh-step-num {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--grad-band); color: #fff; display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
/* Takvim */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-head .ml { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.cal-head button { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-deep); display: grid; place-items: center; transition: var(--t); }
.cal-head button:hover { background: var(--primary); color: #fff; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-day {
    aspect-ratio: 1; border-radius: 12px; background: var(--bg-soft); border: 1.5px solid transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--t); font-weight: 600; color: var(--ink); font-size: 15px;
}
.cal-day:hover:not(.disabled) { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); }
.cal-day.selected { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.cal-day.selected .dow { color: rgba(255,255,255,.85) !important; }
.cal-day.disabled { opacity: .4; cursor: default; background: transparent; color: var(--muted); }
.cal-day .dow { font-size: 11px; font-weight: 600; margin-top: 2px; }
/* Slotlar */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.slot {
    padding: 12px 8px; border-radius: 12px; background: var(--bg-soft); border: 1.5px solid var(--line);
    color: var(--ink); font-weight: 600; transition: var(--t);
}
.slot:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.slot.selected { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-primary); }
.slot.full, .slot:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.eh-booking .row [class*="col-"] { margin-bottom: 4px; }
.eh-booking label input[type="checkbox"] { accent-color: var(--primary); width: 18px; height: 18px; }

/* ---------- LIGHTBOX (vanilla) ---------- */
.eh-lightbox {
    position: fixed; inset: 0; z-index: 2000; background: rgba(8,30,46,.92);
    display: flex; align-items: center; justify-content: center; padding: 30px;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease);
}
.eh-lightbox.open { opacity: 1; visibility: visible; }
.eh-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.eh-lightbox-close, .eh-lightbox-prev, .eh-lightbox-next {
    position: absolute; width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    color: #fff; font-size: 20px; display: grid; place-items: center; transition: var(--t); backdrop-filter: blur(6px);
}
.eh-lightbox-close:hover, .eh-lightbox-prev:hover, .eh-lightbox-next:hover { background: #fff; color: var(--ink); }
.eh-lightbox-close { top: 26px; right: 26px; }
.eh-lightbox-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.eh-lightbox-next { right: 26px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .eh-lightbox-prev { left: 12px; } .eh-lightbox-next { right: 12px; } .eh-lightbox-close { top: 14px; right: 14px; } }

/* ---------- KAYAR REVEAL ANİMASYONU ----------
   Sağlam: JS yüklenmese bile her şey görünür kalır.
   .eh-reveal sınıfı yalnızca JS tarafından eklenir; bu yüzden
   JS yoksa içerik asla gizlenmez. */
.eh-reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.eh-reveal.in { opacity: 1; transform: none; }

/* Hero metni: aktif slide'da saf CSS ile sıralı giriş (JS bağımsız) */
.single-slider .hero-slider-caption > *,
.single-slider .hero-slider-btn { opacity: 1; }
.slider-active.is-ready .single-slider.active .hero-slider-caption > * { animation: fadeInUp .9s both; }
.slider-active.is-ready .single-slider.active .hero-slider-caption > *:nth-child(2) { animation-delay: .12s; }
.slider-active.is-ready .single-slider.active .hero-slider-caption > *:nth-child(3) { animation-delay: .24s; }
.slider-active.is-ready .single-slider.active .hero-slider-caption > *:nth-child(4) { animation-delay: .36s; }
.slider-active.is-ready .single-slider.active .hero-slider-btn { animation: fadeInUp .9s .48s both; }
.slider-active.is-ready .single-slider.active .hero-trust { animation: fadeInUp .9s .58s both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* ---------- GENEL BÖLÜM ARALIĞI (yedek) ---------- */
section { scroll-margin-top: 110px; }