/* =====================================================================
   ZALA ET DÜNYASI — FRONTEND TEMA
   FAZ 7: Frontend Tema Entegrasyonu

   Renk/tipografi kaynağı: mimari rapor madde L — logo paleti + serif
   başlık / sans gövde öneri. Eatzy temasından section KAVRAMLARI
   referans alındı, kod birebir kopyalanmadı (mimari rapor madde K).
   ===================================================================== */

:root {
    --zala-gold: #C9A227;
    --zala-gold-light: #E0C468;
    --zala-dark: #2B2A29;
    --zala-dark-soft: #3D3A37;
    --zala-cream: #FAF6EE;
    --zala-text: #2B2A29;
    --zala-text-muted: #6B655C;

    --font-heading: 'Playfair Display', 'Times New Roman', serif;
    --font-body: 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Arapça (RTL) sayfalarda Latin display fontları Arapça glif içermez;
   madde F kararı gereği burada okunabilir bir sistem fontu stack'ine
   geçilir. Yeni bir web fontu bundle etmeye gerek yok. */
[dir="rtl"] {
    --font-heading: 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--zala-text);
    background: #fff;
}

h1, h2, h3, .zala-display {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--zala-dark);
}

a { color: var(--zala-dark); }
a:hover { color: var(--zala-gold); }

.btn-zala-gold {
    background-color: var(--zala-gold);
    border-color: var(--zala-gold);
    color: var(--zala-dark);
    font-weight: 600;
    padding: 10px 26px;
    border-radius: 4px;
}
.btn-zala-gold:hover {
    background-color: var(--zala-gold-light);
    border-color: var(--zala-gold-light);
    color: var(--zala-dark);
}

.btn-zala-outline {
    border: 1.5px solid #fff;
    color: #fff;
    font-weight: 600;
    padding: 10px 26px;
    border-radius: 4px;
    background: transparent;
}
.btn-zala-outline:hover {
    background: #fff;
    color: var(--zala-dark);
}

.section-eyebrow {
    color: var(--zala-gold);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   TOPBAR (masaüstü) — madde 4 güncellemesi: iletişim solda, sosyal+dil sağda
   --------------------------------------------------------------------- */
.zala-topbar-strip {
    background: var(--zala-dark);
    color: rgba(255,255,255,.75);
    font-size: 13px;
    padding: 8px 0;
}
.zala-topbar-strip .topbar-contact a {
    color: rgba(255,255,255,.75);
    margin-inline-end: 20px;
}
.zala-topbar-strip .topbar-contact a:hover { color: var(--zala-gold); }

.topbar-social a,
.social-icons a {
    color: rgba(255,255,255,.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    margin-inline-end: 6px;
    font-size: 13px;
}
.topbar-social a:hover,
.social-icons a:hover {
    background: var(--zala-gold);
    border-color: var(--zala-gold);
    color: var(--zala-dark);
}
/* Footer'daki sosyal ikonlar zaten koyu zemin üzerinde aynı stille uyumlu çalışır. */

.zala-lang-switch .dropdown-toggle {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 4px 14px;
    background: none;
}
.zala-lang-switch .dropdown-item.active-lang {
    color: var(--zala-gold);
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   ANA NAV BAR — logo menünün tam ortasında (madde güncellemesi:
   ayrı bir "header" katmanı yok, hepsi tek koyu bar içinde)
   --------------------------------------------------------------------- */
.zala-main-nav {
    background: var(--zala-dark);
    padding: 14px 0;
}

.zala-nav-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
}

.zala-nav-left {
    justify-content: flex-end;
}
.zala-nav-right {
    justify-content: flex-start;
}

.zala-main-nav .nav-link,
.offcanvas-body .navbar-nav .nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    padding: 8px 16px !important;
    white-space: nowrap;
}
.zala-main-nav .nav-link {
    color: rgba(255,255,255,.8);
}
.zala-main-nav .nav-link:hover,
.zala-main-nav .nav-link.active {
    color: var(--zala-gold);
}
.zala-main-nav .dropdown-toggle::after { margin-inline-start: 4px; vertical-align: 2px; }

/* Dropdown toggle'ın rengi her durumda (varsayılan/hover/focus/açık) kesin
   olarak tanımlı olsun — Bootstrap'ın kendi link renklerinin araya girip
   "Galeri" yazısını görünmez kılmasını önlemek için (kullanıcı geri bildirimi). */
.zala-main-nav .nav-link.dropdown-toggle {
    position: relative;
    z-index: 3;
    color: rgba(255,255,255,.8);
}
.zala-main-nav .nav-link.dropdown-toggle:hover,
.zala-main-nav .nav-link.dropdown-toggle:focus,
.zala-main-nav .nav-item.dropdown.show > .nav-link.dropdown-toggle {
    color: var(--zala-gold) !important;
}
.zala-nav-dropdown {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    padding: 8px;
    margin-top: 6px;
}
.zala-nav-dropdown .dropdown-item {
    font-family: var(--font-heading);
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--zala-dark);
}
.zala-nav-dropdown .dropdown-item:hover {
    background: rgba(201,162,39,.12);
    color: var(--zala-gold);
}

.zala-logo-badge {
    display: inline-flex;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    flex-shrink: 0;
}
.zala-logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
   MOBİL HEADER — kompakt, hamburger menü
   --------------------------------------------------------------------- */
.zala-mobile-header {
    background: #fff;
    border-bottom: 1px solid #EFEBE0;
    padding: 12px 20px;
}
.zala-mobile-header .navbar-toggler {
    border: none;
    padding: 4px 8px;
}
/* GERÇEK HATA DÜZELTMESİ: Bootstrap'ın .navbar-toggler-icon'u normalde
   --bs-navbar-toggler-icon-bg değişkenini kullanır, ama bu değişken SADECE
   .navbar sınıfının içinde tanımlı. Bizim mobil header'ımız .navbar sınıfını
   kullanmadığı için değişken boştu ve ikon HİÇBİR tarayıcıda görünmüyordu
   (kullanıcı gerçek bir Android telefonda bunu bildirdi). Kendi SVG'mizi
   doğrudan tanımlayarak bu bağımlılığı ortadan kaldırıyoruz. */
.zala-mobile-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43, 42, 41, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------
   HERO (madde: FAZ 18'de tam yönetilebilir olacak — şimdilik statik iskelet)
   --------------------------------------------------------------------- */
.zala-hero {
    background: linear-gradient(180deg, rgba(43,42,41,.35) 0%, rgba(20,19,19,.75) 100%), var(--zala-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 110px 20px;
    text-align: center;
}
.zala-hero h1 {
    color: #fff;
    font-size: 42px;
    margin-bottom: 16px;
}
.zala-hero p {
    max-width: 560px;
    margin: 0 auto 28px;
    color: rgba(255,255,255,.85);
}
.zala-hero .hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.zala-footer {
    background: var(--zala-dark);
    color: rgba(255,255,255,.75);
    padding: 56px 0 24px;
}

/* Kolon aralıkları: 1-2 arası geniş, 2-3 (linkler-iletişim) arası dar
   olacak şekilde asimetrik (madde: kullanıcı geri bildirimi) */
.zala-footer-grid {
    display: flex;
    flex-wrap: wrap;
}
.footer-col-about {
    flex: 0 1 40%;
    margin-inline-end: 8%;
}
.footer-col-about p {
    text-align: justify;
}
.footer-col-links {
    flex: 0 1 16%;
    margin-inline-end: 3%;
}
.footer-col-contact {
    flex: 1 1 26%;
}
@media (max-width: 767.98px) {
    .footer-col-about,
    .footer-col-links,
    .footer-col-contact {
        flex: 1 1 100%;
        margin-inline-end: 0;
        margin-bottom: 28px;
    }
}

.zala-footer h5 {
    color: var(--zala-gold);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}
.zala-footer a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: 14px;
}
.zala-footer a:hover { color: var(--zala-gold); }
.zala-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 36px;
    padding-top: 20px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
    text-align: center;
}
.zala-footer .social-icons a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 8px;
}
.zala-footer .social-icons a:hover {
    background: var(--zala-gold);
    border-color: var(--zala-gold);
    color: var(--zala-dark);
}

/* ---------------------------------------------------------------------
   WHATSAPP FLOATING BUTTON (madde 10)
   --------------------------------------------------------------------- */
.zala-whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 1040;
}
.zala-whatsapp-float:hover { color: #fff; filter: brightness(1.05); }

/* ---------------------------------------------------------------------
   RESPONSIVE (madde 13, 19)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .zala-hero { padding: 70px 16px; }
    .zala-hero h1 { font-size: 30px; }
}

/* =====================================================================
   HAKKIMIZDA SAYFASI (FAZ 8 genişletmesi)
   ===================================================================== */

/* Sayfa üst bar / breadcrumb (Image1 referansı) */
.zala-page-header {
    background: var(--zala-cream, #FAF6EE);
    padding: 40px 20px;
    text-align: center;
    border-bottom: 1px solid #EFEBE0;
}
.zala-page-header h1 {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 22px;
    margin-bottom: 8px;
}
.zala-page-header .breadcrumb-nav {
    font-size: 13px;
    color: var(--zala-text-muted);
}
.zala-page-header .breadcrumb-nav a { color: var(--zala-text-muted); }
.zala-page-header .breadcrumb-nav a:hover { color: var(--zala-gold); }

/* Quill class tabanlı hizalama (xss_clean inline style'ları temizlediği için
   class tabanlı hizalamaya geçildi — admin/pages/about.php JS'inde açıklandı) */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* Zengin metin (Quill) çıktısı için ortak liste/paragraf stilleri */
.zala-about-intro .intro-text ul, .zala-about-intro .intro-text ol,
.zala-quality-split p ~ ul, .zala-quality-split ul, .zala-quality-split ol,
.zala-heritage ul, .zala-heritage ol,
.zala-difference ul, .zala-difference ol,
.zala-closing-box ul, .zala-closing-box ol {
    text-align: start;
    padding-inline-start: 22px;
    margin-bottom: 14px;
}
.zala-about-intro .intro-text p, .zala-quality-split p, .zala-heritage p, .zala-difference p, .zala-closing-box p {
    margin-bottom: 14px;
}
.zala-about-intro .intro-text p:last-child, .zala-quality-split p:last-child,
.zala-heritage p:last-child, .zala-difference p:last-child, .zala-closing-box p:last-child {
    margin-bottom: 0;
}

/* Görsel yer tutucu (henüz görsel yüklenmemişse) */
.zala-img-placeholder {
    background: linear-gradient(135deg, var(--zala-dark) 0%, var(--zala-dark-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
    font-size: 32px;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    min-height: 160px;
}

/* Giriş bölümü + foto grid (Image2 referansı) */
.zala-about-intro { padding: 70px 0 50px; text-align: center; }
.zala-about-intro .intro-text {
    max-width: 720px;
    margin: 0 auto 40px;
    color: var(--zala-text-muted);
    line-height: 1.9;
}
.zala-photo-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}
.zala-photo-grid .photo-main {
    border-radius: 8px;
    overflow: hidden;
    min-height: 340px;
}
.zala-photo-grid .photo-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}
.zala-photo-grid .photo-stack > div {
    border-radius: 8px;
    overflow: hidden;
    min-height: 160px;
}
.zala-photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767.98px) {
    .zala-photo-grid { grid-template-columns: 1fr; }
}

/* Kalite bölümü — koyu split (Image3 referansı, marka renginde) */
.zala-quality-split {
    background: var(--zala-dark);
    color: rgba(255,255,255,.85);
    padding: 70px 0;
}
.zala-quality-split .quality-text-col { padding-right: 20px; }
.zala-quality-split h2 { color: #fff; font-size: 32px; }
.zala-quality-split p { line-height: 1.9; }
.zala-quality-split .quality-image {
    border-radius: 8px;
    overflow: hidden;
    min-height: 320px;
}

/* Miras bölümü */
.zala-heritage {
    padding: 60px 20px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.zala-heritage p { color: var(--zala-text-muted); line-height: 1.9; }

/* Misyon/Vizyon zigzag (Image4 referansı) — GRID tabanlı, içerik uzunluğuna
   göre otomatik yükseklik alır (önceki absolute-positioning tabanlı sürüm
   uzun metinlerde taşıyordu — kullanıcı geri bildirimiyle düzeltildi). */
.zala-mv-section { padding: 20px 0 60px; }
.zala-mv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 0;
    max-width: 980px;
    margin: 0 auto 60px;
}
.zala-mv-row .mv-image {
    border-radius: 8px;
    overflow: hidden;
    min-height: 300px;
    height: 100%;
    position: relative;
    z-index: 1;
}
.zala-mv-row .mv-card {
    background: #fff;
    padding: 28px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    position: relative;
    z-index: 2;
    align-self: center;
}
.zala-mv-row.mv-left .mv-image { grid-column: 1; grid-row: 1; }
.zala-mv-row.mv-left .mv-card { grid-column: 2; grid-row: 1; margin-inline-start: -70px; }

.zala-mv-row.mv-right .mv-image { grid-column: 2; grid-row: 1; }
.zala-mv-row.mv-right .mv-card { grid-column: 1; grid-row: 1; margin-inline-end: -70px; }

.zala-mv-row .mv-card .section-eyebrow { display:block; margin-bottom:6px; }
.zala-mv-row .mv-card h3 { font-size: 20px; margin-bottom: 10px; }
.zala-mv-row .mv-card p { font-size: 14px; color: var(--zala-text-muted); margin: 0 0 10px; line-height: 1.8; }
.zala-mv-row .mv-card p:last-child { margin-bottom: 0; }
.zala-mv-row .mv-card ul, .zala-mv-row .mv-card ol { font-size: 14px; color: var(--zala-text-muted); padding-inline-start: 20px; }

@media (max-width: 767.98px) {
    .zala-mv-row { grid-template-columns: 1fr; }
    .zala-mv-row .mv-image,
    .zala-mv-row.mv-left .mv-image,
    .zala-mv-row.mv-right .mv-image { grid-column: 1; grid-row: 1; }
    .zala-mv-row .mv-card,
    .zala-mv-row.mv-left .mv-card,
    .zala-mv-row.mv-right .mv-card {
        grid-column: 1; grid-row: 2;
        margin-inline: 16px;
        margin-top: -30px;
        margin-inline-start: 16px;
        margin-inline-end: 16px;
    }
}

/* Değerlerimiz grid */
.zala-values { background: var(--zala-cream); padding: 70px 0; }
.zala-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 980px;
    margin: 0 auto;
}
.zala-value-card { text-align: center; padding: 10px; }
.zala-value-card .value-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(201,162,39,.12);
    color: var(--zala-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin: 0 auto 14px;
}
.zala-value-card h3 { font-size: 17px; margin-bottom: 8px; }
.zala-value-card p { font-size: 13px; color: var(--zala-text-muted); line-height: 1.7; margin: 0; }

@media (max-width: 767.98px) {
    .zala-values-grid { grid-template-columns: 1fr; }
}

/* Bizi farklı kılan ne + kapanış */
.zala-difference {
    padding: 60px 20px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.zala-difference p { color: var(--zala-text-muted); line-height: 1.9; }

.zala-closing-box {
    max-width: 820px;
    margin: 0 auto 70px;
    text-align: center;
    padding: 50px 30px;
    border: 1px solid #EFEBE0;
    border-top: 3px solid var(--zala-gold);
    border-radius: 8px;
}
.zala-closing-box p { color: var(--zala-text-muted); line-height: 1.9; }

/* =====================================================================
   FOTOĞRAF GALERİSİ (FAZ 10)
   ===================================================================== */

.zala-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.zala-gallery-filters .filter-pill {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid #E5E3DE;
    color: var(--zala-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.zala-gallery-filters .filter-pill:hover {
    border-color: var(--zala-gold);
    color: var(--zala-gold);
}
.zala-gallery-filters .filter-pill.active {
    background: var(--zala-dark);
    border-color: var(--zala-dark);
    color: #fff;
}

.zala-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.zala-gallery-item {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.zala-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.zala-gallery-item .zoom-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43,42,41,0);
    color: transparent;
    font-size: 22px;
    transition: all .25s ease;
}
.zala-gallery-item:hover img { transform: scale(1.08); }
.zala-gallery-item:hover .zoom-icon {
    background: rgba(43,42,41,.35);
    color: #fff;
}

@media (max-width: 991.98px) {
    .zala-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .zala-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Lightbox */
.zala-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20,19,19,.94);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}
.zala-lightbox.is-open { opacity: 1; visibility: visible; }
.zala-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.zala-lightbox .lightbox-close,
.zala-lightbox .lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}
.zala-lightbox .lightbox-close:hover,
.zala-lightbox .lightbox-nav:hover { background: var(--zala-gold); color: var(--zala-dark); }
.zala-lightbox .lightbox-close { top: 20px; inset-inline-end: 20px; }
.zala-lightbox .lightbox-prev { inset-inline-start: 20px; top: 50%; transform: translateY(-50%); }
.zala-lightbox .lightbox-next { inset-inline-end: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 575.98px) {
    .zala-lightbox .lightbox-prev { inset-inline-start: 8px; }
    .zala-lightbox .lightbox-next { inset-inline-end: 8px; }
}

/* =====================================================================
   VİDEO GALERİSİ (FAZ 11)
   ===================================================================== */

.zala-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.zala-video-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #EFEBE0;
    background: #fff;
}
.zala-video-card .video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--zala-dark);
}
.zala-video-card .video-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.zala-video-card .play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zala-video-card .play-icon i {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--zala-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: transform .2s ease;
}
.zala-video-card:hover .play-icon i { transform: scale(1.1); background: var(--zala-gold); color: #fff; }
.zala-video-card .external-badge {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.zala-video-card .video-caption { padding: 14px 16px; }
.zala-video-card .video-caption h3 { font-size: 15px; margin-bottom: 4px; }
.zala-video-card .video-caption p { font-size: 13px; color: var(--zala-text-muted); margin: 0; }

@media (max-width: 991.98px) {
    .zala-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .zala-video-grid { grid-template-columns: 1fr; }
}

.zala-video-lightbox .video-lightbox-inner {
    width: 90vw;
    max-width: 960px;
    aspect-ratio: 16 / 9;
}
.zala-video-lightbox .video-lightbox-inner iframe,
.zala-video-lightbox .video-lightbox-inner video {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
}
.zala-video-lightbox .video-lightbox-inner.instagram-embed-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360px;      /* Sabit genişlik — "auto" bırakınca Instagram'ın embed
                           script'i kutuyu ölçerken içerik henüz yüklenmediği
                           için yanlış (dar/yatay) bir boyut hesaplıyordu. */
    max-width: 90vw;
    aspect-ratio: auto;
    max-height: 90vh;
    overflow-y: auto;
}
.zala-video-lightbox .video-lightbox-inner.instagram-embed-wrap iframe {
    max-width: 100% !important;
    width: 100% !important;
}
.zala-video-lightbox .video-lightbox-inner.instagram-embed-wrap .instagram-media {
    width: 100% !important;
    min-width: 0 !important;
}

/* =====================================================================
   MÜŞTERİ YORUMLARI (FAZ 12)
   ===================================================================== */
.zala-reviews { background: var(--zala-cream); padding: 70px 0; }
.zala-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.zala-review-card {
    background: #fff;
    border-radius: 8px;
    padding: 28px;
    border: 1px solid #EFEBE0;
}
.zala-review-card .review-stars { color: var(--zala-gold); font-size: 14px; margin-bottom: 14px; }
.zala-review-card .review-comment {
    font-size: 14px;
    color: var(--zala-text);
    line-height: 1.8;
    margin-bottom: 20px;
    min-height: 70px;
}
.zala-review-card .review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #EFEBE0;
    padding-top: 16px;
}
.zala-review-card .review-author img,
.zala-review-card .review-avatar-placeholder {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.zala-review-card .review-avatar-placeholder {
    background: rgba(201,162,39,.15);
    color: var(--zala-gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
}
.zala-review-card .author-name { font-weight: 600; font-size: 14px; color: var(--zala-dark); }

@media (max-width: 991.98px) {
    .zala-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .zala-reviews-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   SSS (FAQ) — FAZ 13
   ===================================================================== */
.zala-faq-item {
    border-bottom: 1px solid #EFEBE0;
}
.zala-faq-item .faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: start;
    padding: 20px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--zala-dark);
    cursor: pointer;
}
.zala-faq-item .faq-question i {
    color: var(--zala-gold);
    transition: transform .2s ease;
    flex-shrink: 0;
    margin-inline-start: 12px;
}
.zala-faq-item .faq-question[aria-expanded="true"] i,
.zala-faq-item .faq-question:not(.collapsed) i {
    transform: rotate(180deg);
}
.zala-faq-item .faq-answer {
    padding: 0 4px 20px;
    color: var(--zala-text-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* =====================================================================
   İLETİŞİM SAYFASI (FAZ 14)
   ===================================================================== */
.zala-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zala-contact-info .info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--zala-text);
}
.zala-contact-info .info-row i {
    color: var(--zala-gold);
    font-size: 17px;
    margin-top: 2px;
    flex-shrink: 0;
}
.zala-contact-info .info-row a { color: var(--zala-text); text-decoration: none; }
.zala-contact-info .info-row a:hover { color: var(--zala-gold); }

.zala-map-embed {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.zala-map-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* =====================================================================
   HERO SLIDER (FAZ 18)
   ===================================================================== */
.zala-hero-carousel .carousel-item,
.zala-hero-carousel .zala-hero {
    min-height: 480px;
}
.zala-hero-carousel .zala-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.zala-hero-carousel .carousel-control-prev,
.zala-hero-carousel .carousel-control-next {
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border-radius: 50%;
}
.zala-hero-carousel .carousel-control-prev { inset-inline-start: 20px; }
.zala-hero-carousel .carousel-control-next { inset-inline-end: 20px; }

@media (max-width: 767.98px) {
    .zala-hero-carousel .carousel-item,
    .zala-hero-carousel .zala-hero { min-height: 360px; }
}