/* ===================================================
   sube-detay.css — Şube detay sayfası (/subeler/{slug})
   kurumlar.css ile birlikte yüklenir (.btn-branch-call/.btn-branch-map oradan).
   =================================================== */

.sube-detay {
    padding-bottom: 3.5rem;
}

.sube-detay__h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

/* Kapak görsel */
.sube-detay__kapak {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.75rem;
    background: var(--primary-bg);
}
.sube-detay__kapak img {
    width: 100%;
    height: clamp(220px, 42vw, 440px);
    object-fit: cover;
    display: block;
}

/* Açıklama metni */
.sube-detay__aciklama {
    background: var(--white);
    border: 1px solid var(--primary-bg-alt);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.75rem;
}
.sube-detay__metin {
    color: var(--gray-800);
    line-height: 1.8;
    font-size: 1rem;
}

/* Boş içerik durumu */
.sube-detay__bos {
    background: var(--primary-bg);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--gray-600);
    margin-bottom: 1.75rem;
}
.sube-detay__bos i {
    font-size: 2.5rem;
    color: var(--primary-light);
    margin-bottom: .75rem;
    display: block;
}
.sube-detay__bos p { margin: 0; }

/* Galeri */
.sube-detay__galeri {
    background: var(--white);
    border: 1px solid var(--primary-bg-alt);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.sube-galeri-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sube-galeri-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--primary-bg);
    box-shadow: var(--shadow-sm);
}
.sube-galeri-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}
.sube-galeri-item:hover img { transform: scale(1.06); }

/* Sağ yan kart — sticky; viewport'tan uzunsa içeride kaydır (alt kısım kırpılmasın) */
.sube-detay__yan {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.sube-yan-card {
    background: var(--white);
    border: 1px solid var(--primary-bg-alt);
    border-radius: 14px;
    padding: 1.35rem 1.35rem 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.sube-yan-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sube-yan-card__title i { color: var(--primary-light); }

.sube-yan-info {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}
.sube-yan-info li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--primary-bg-alt);
    color: var(--gray-800);
    font-size: .95rem;
    line-height: 1.55;
}
.sube-yan-info li:last-child { border-bottom: none; }
.sube-yan-info li i {
    color: var(--primary);
    margin-top: 3px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.sube-yan-info a { color: var(--primary-dark); font-weight: 600; }
.sube-yan-info a:hover { color: var(--primary); }

.sube-yan-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
/* Sınava Kayıt Ol — birincil CTA, tam genişlik (üst satır) */
.sube-yan-actions .btn-branch-detay { flex: 1 1 100%; justify-content: center; }
/* WhatsApp / Ara / Yol Tarifi — alt satırı paylaşır */
.sube-yan-actions .btn-branch-call,
.sube-yan-actions .btn-branch-wa,
.sube-yan-actions .btn-branch-map { flex: 1 1 auto; justify-content: center; }

/* Gömülü harita */
.sube-harita {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--primary-bg-alt);
    margin-bottom: 1rem;
}
.sube-harita iframe {
    width: 100%;
    height: 240px;
    border: 0;
    display: block;
}

/* Geri linki */
.sube-geri {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--primary);
    font-weight: 600;
    transition: var(--transition);
}
.sube-geri:hover { color: var(--primary-dark); transform: translateX(-3px); }

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .sube-detay__yan { position: static; margin-top: .5rem; max-height: none; overflow: visible; }
}
@media (max-width: 575px) {
    .sube-galeri-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sube-detay__aciklama,
    .sube-detay__galeri { padding: 1.15rem; }
    .sube-detay__h2 { font-size: 1.25rem; }
}
@media (max-width: 360px) {
    .sube-galeri-grid { grid-template-columns: 1fr 1fr; }
}

/* ===================================================
   FAZ 4 — Zengin hero + galeri lightbox + sosyal
   =================================================== */

/* ---- Kapak bandı (16:6) — .page-hero başlığın altında (hero KALDIRILDI 2026-07) ---- */
.sube-kapak__band {
    aspect-ratio: 16 / 6;
    width: 100%;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    background-size: cover;
    background-position: center;
    box-shadow: 0 14px 34px -16px rgba(40, 20, 70, .45);
}
/* kapak yok → mor gradient bandı (fallback) */
.sube-kapak__band--bos { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }

/* kapak bandı ile içerik arası boşluk */
.sube-detay { padding-top: 1.75rem; }

/* ---- Galeri item button reset + zoom rozeti ---- */
.sube-galeri-item { border: 0; padding: 0; cursor: pointer; position: relative; width: 100%; }
.sube-galeri-item__zoom {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem; opacity: 0;
    background: rgba(40, 20, 70, 0);
    transition: opacity .2s, background .2s;
}
.sube-galeri-item:hover .sube-galeri-item__zoom,
.sube-galeri-item:focus-visible .sube-galeri-item__zoom { opacity: 1; background: rgba(40, 20, 70, .38); }

/* ---- WhatsApp butonu ---- */
.btn-branch-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    flex: 1 1 auto;
    background: #25d366; color: #fff; font-weight: 600;
    padding: .6rem 1rem; border-radius: 10px;
    transition: background .15s, transform .15s;
}
.btn-branch-wa:hover { background: #1da851; color: #fff; transform: translateY(-1px); }

/* ---- Sosyal medya ---- */
.sube-social {
    display: flex; gap: .5rem; margin-top: 1rem; padding-top: 1rem;
    border-top: 1px dashed var(--primary-bg-alt);
}
.sube-social a {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-bg); color: var(--primary-dark);
    transition: background .15s, color .15s, transform .15s;
}
.sube-social a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* ---- Lightbox ---- */
body.sube-lightbox-open { overflow: hidden; }
.sube-lightbox {
    position: fixed; inset: 0; z-index: 1080;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 8, 30, .93); padding: 2rem;
}
.sube-lightbox.is-open { display: flex; }
.sube-lightbox__fig {
    margin: 0; max-width: 90vw; max-height: 86vh;
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.sube-lightbox__img {
    max-width: 90vw; max-height: 80vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.sube-lightbox__cap { color: rgba(255, 255, 255, .85); font-size: .9rem; text-align: center; }
.sube-lightbox__close {
    position: absolute; top: 1rem; right: 1.25rem;
    background: transparent; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer;
}
.sube-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, .12); border: 0; color: #fff; font-size: 1.6rem;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer; transition: background .15s;
}
.sube-lightbox__nav:hover { background: rgba(255, 255, 255, .25); }
.sube-lightbox__prev { left: 1rem; }
.sube-lightbox__next { right: 1rem; }
.sube-lightbox--single .sube-lightbox__nav { display: none; }

@media (max-width: 575px) {
    .sube-lightbox { padding: 1rem; }
    .sube-lightbox__nav { width: 40px; height: 40px; font-size: 1.3rem; }
    .sube-lightbox__close { font-size: 2rem; top: .5rem; right: .75rem; }
}

/* ===================================================
   360° SANAL TUR kartı (2026-10-08) — sağ sütunda İletişim kartı ile harita ARASINDA.
   Yalnız kurumlar.mekan360_url geçerli bir https:// adresiyse basılır; yeni sekmede açılır
   (iframe YOK). .reveal ALMAZ (tembel yüklenen rozet gizli kalmasın). Düğme zemini
   --primary-dark: beyaz metinle en düşük kontrast TTA #C24E14 = 4,78:1 (AA).
   =================================================== */
.sube-360 {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: .75rem .9rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--white);
    border: 1px solid var(--primary-bg-alt);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}
.sube-360:hover,
.sube-360:focus-visible {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.sube-360:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sube-360__logo { width: 88px; height: 88px; object-fit: contain; }
.sube-360__metin { min-width: 0; }
.sube-360__baslik { display: block; color: var(--primary-dark); font-weight: 700; line-height: 1.3; }
.sube-360__metin span { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--gray-600); }
.sube-360__btn {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--primary-dark);
    color: var(--white);
    font-weight: 600;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .sube-360 { transition: none; }
    .sube-360:hover,
    .sube-360:focus-visible { transform: none; }
}
/* Kısa ekran (2026-10-08, P08 düzelt): 360 kartı (~177 px) yan sütunu ~810 px'e çıkarır; sticky +
   max-height(100vh - 100px) kısa masaüstü ekranlarda (dizüstü, iç yükseklik < ~950 px) yan sütunda İÇ
   kaydırma çubuğu ve kesik harita üretiyordu. Kart VARKEN ve ekran kısayken yan sütun normal akışta
   kayar (sticky yok, iç kaydırma yok). Kartsız sayfalar ve uzun ekranlar DEĞİŞMEZ. :has desteklemeyen
   tarayıcı eski davranışı (iç kaydırma) sürdürür. */
@media (min-width: 992px) and (max-height: 949.98px) {
    .sube-detay__yan:has(.sube-360) { position: static; max-height: none; overflow: visible; }
}