/* ===================================================================
FLUID RESPONSIVE SYSTEM v4.0
   
Tek kaynak: fluid container, fluid tipografi, zoom-resilient grid,
ana sayfa hero/slider oranları, editoryal detay, mobil carousel,
breakpoint spacing, fail-safe mobil layout.
   
Yükleme sırası: home-cards-patch.css'ten SONRA, mobile-responsive.css'ten ÖNCE.
Bu dosya aspect-ratio ve fluid clamp kurallarını yönetir.
mobile-responsive.css mobil override'ları yönetir.
   
v4.0: Zoom-resilient, tek-kolon mobil fallback, editoryal detay, premium carousel
=================================================================== */

/* ══════════════════════════════════════════════════════════
   1. FLUID CONTAINER SİSTEMİ
   ══════════════════════════════════════════════════════════ */

.home-wide-container,
.rail-container {
    max-width: 1580px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.5vw, 2rem);
    width: 100%;
}

.container {
    max-width: min(100%, 1320px);
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
    box-sizing: border-box;
}

/* Çok geniş ekranlarda (4K / zoom-out) içerik merkezde kalsın */
@media (min-width: 2000px) {
    .home-wide-container,
    .rail-container {
        max-width: 1620px;
    }
    .container {
        max-width: 1400px;
    }
}

/* ══════════════════════════════════════════════════════════
   2. FLUID TİPOGRAFİ — Desktop baseline
   ══════════════════════════════════════════════════════════ */

.kp-section-title {
    font-size: clamp(1.35rem, 2.5vw, 2rem) !important;
}

.kp-section-subtitle {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
}

.verse-band-quote {
    font-size: clamp(0.85rem, 1.3vw, 1.3rem);
}

/* ══════════════════════════════════════════════════════════
   3. ANA SAYFA HERO / SLIDER / SAĞ BLOK ORAN DÜZELTMESİ
   aspect-ratio tabanlı — sabit px yükseklik yok
   ══════════════════════════════════════════════════════════ */

.rail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: stretch;
    min-height: 0;
}

.rail-left {
    display: flex;
    min-height: 0;
    max-height: none;
    border-radius: 0.85rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.rail-left-vitrin,
.rail-left-vitrin .hero-slider,
.rail-left-vitrin .hero-slider-loading,
.rail-left-vitrin .hero-slider-fallback {
    width: 100%;
    height: 100%;
}

.hero-slider {
    max-height: none;
    height: 100%;
}

.hero-slider-fallback {
    max-height: none;
    height: 100%;
}

.rail-right {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.75rem);
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

.featured-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Desktop: media-frame fills available card space without its own aspect-ratio.
   The card height is determined by rail-left's aspect-ratio via grid stretch.
   An explicit aspect-ratio here would conflict with the flex-constrained height. */
.featured-card .media-frame {
    aspect-ratio: auto;
}

.featured-card .three-col-empty {
    min-height: 140px;
    aspect-ratio: auto;
}

/* ══════════════════════════════════════════════════════════
   4. KP-AREAS-GRID — minmax tabanlı, zoom-resilient
   ══════════════════════════════════════════════════════════ */

.kp-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.kp-area-card {
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: 0.85rem;
    min-height: 0;
}

.kp-area-icon {
    width: clamp(40px, 5vw, 52px);
    height: clamp(40px, 5vw, 52px);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.kp-area-title {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kp-area-text {
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Mobile Card Carousel (mcc) — fail-safe visibility rules ── */
/* Desktop: carousel wrapper hidden, desktop-grid clone visible */
.mcc-wrapper {
    display: none;
}

/* Mobile (≤767px): carousel visible, desktop clone hidden, original grid hidden */
@media (max-width: 767px) {
    .mcc-wrapper {
        display: block;
        overflow: hidden;
    }
    .mcc-desktop-grid {
        display: none !important;
    }
    .mcc-track {
        display: flex;
        transition: transform .35s ease;
    }
    .mcc-track.mcc-dragging {
        transition: none;
    }
    .mcc-slide {
        min-width: 100%;
        flex-shrink: 0;
        padding: 0 clamp(0.25rem, 1vw, 0.5rem);
        box-sizing: border-box;
    }
    .mcc-dots {
        display: flex;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.75rem 0 0.25rem;
    }
    .mcc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,.18);
        cursor: pointer;
        padding: 0;
        transition: background .2s, transform .2s;
    }
    .mcc-dot.active {
        background: var(--primary, #B23A2C);
        transform: scale(1.25);
    }
}

/* Safety: original grid with inline display:none must be overridden on desktop
   if JS ran on mobile and user resizes to desktop */
@media (min-width: 768px) {
    .kp-areas-grid[data-mcc-init] {
        display: grid !important;
    }
    .mcc-wrapper {
        display: none !important;
    }
    .mcc-desktop-grid {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   5. BREAKPOINT GRID DAVRANIŞLARI
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
    .rail-grid {
        max-width: 1580px;
        margin-inline: auto;
    }
    .rail-left {
        aspect-ratio: 16 / 8.5;
    }
}

@media (max-width: 1536px) {
    .rail-left {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 1280px) {
    .rail-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
    .rail-left {
        aspect-ratio: 16 / 9.5;
    }
}

@media (max-width: 991px) {
.rail-grid {
    grid-template-columns: 1fr;
}
.rail-left {
    aspect-ratio: 16 / 8;
    max-height: 380px;
}
.rail-right {
    flex-direction: row;
    height: auto;
    overflow: visible;
}
.rail-right .featured-card {
    flex: 1;
    min-height: 180px;
}
/* Tablet: featured-card media-frame 4:3 — daha dengeli, daha az crop */
.featured-card .media-frame {
    aspect-ratio: 4 / 3;
}
    /* Tablet: kartlar 2 kolon, minimum genişlik korunsun */
    .kp-areas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.75rem, 1.5vw, 1.25rem);
    }
}

@media (max-width: 767px) {
    .rail-left {
        aspect-ratio: 16 / 9;
        max-height: 280px;
    }
    .rail-right {
        flex-direction: column;
        overflow: visible;
    }
    .rail-right .featured-card {
        min-height: auto;
    }
    /* Mobil: featured-card media-frame 4:3 — daha dengeli, daha az crop */
    .featured-card .media-frame {
        aspect-ratio: 4 / 3;
    }
    .featured-card {
        position: relative;
        overflow: hidden;
    }
}

@media (max-width: 575px) {
    .rail-left {
        aspect-ratio: 16 / 10;
        max-height: 220px;
    }
    .rail-right .featured-card {
        min-height: auto;
    }
    /* Küçük telefon: 4:3 devam — 16:10 çok yatay, görsel yarım görünüyor */
    .featured-card .media-frame {
        aspect-ratio: 4 / 3;
    }
}

/* ══════════════════════════════════════════════════════════
   6. SPACING SİSTEMİ — clamp tabanlı, kademeli
   ══════════════════════════════════════════════════════════ */

.kp-content-section {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.home-verse-band {
    padding: clamp(1rem, 2vw, 2rem) 0;
}

.home-feature-rail {
    padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ══════════════════════════════════════════════════════════
   7. FLUID GRIDS — Members, Three-col, News, Board, etc.
   ══════════════════════════════════════════════════════════ */

.kp-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.three-col-grid {
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

.news-list-card-thumb {
    width: clamp(200px, 25vw, 280px);
    height: clamp(140px, 16vw, 180px);
}

@media (max-width: 767px) {
    .news-list-card {
        flex-direction: column;
    }
    .news-list-card-thumb {
        width: 100%;
        height: 200px;
    }
}

.board-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.activity-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.spx-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.th-milestone-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* ══════════════════════════════════════════════════════════
   8. GÖRSEL ASPECT-RATIO
   ══════════════════════════════════════════════════════════ */

.slider-image,
.hero-slider img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.three-col-list-thumbnail {
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
}

.board-card-photo {
    aspect-ratio: 3 / 3.5;
    padding-top: 0;
}

/* ══════════════════════════════════════════════════════════
   9. HOVER-BAND — Mobilde güvenli, absolute ama taşmasız
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* hover-band: max-height:50% + overflow:hidden kırpma riski taşır.
       Bunun yerine line-clamp ile metin sınırlanır,
       band yüksekliğini auto bırakarak içeriğin kesilmesini önleriz. */
    .hover-band {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: clamp(0.4rem, 2vw, 0.65rem) clamp(0.5rem, 2vw, 0.85rem);
        max-height: none;
        overflow: visible;
    }
    .hover-band-title {
        font-size: clamp(0.75rem, 2.5vw, 0.85rem);
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hover-band-text {
        font-size: clamp(0.68rem, 2vw, 0.75rem);
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ══════════════════════════════════════════════════════════
   10. MOBİL TİPOGRAFİ SİSTEMİ
   Tablet ve telefonlarda ayrı type-scale — desktop'tan bağımsız
   ══════════════════════════════════════════════════════════ */

/* Tablet (768-991) */
@media (max-width: 991px) {
    [data-scope="public"] h1 {
        font-size: clamp(1.4rem, 3.5vw, 1.8rem);
        line-height: 1.15;
    }
    [data-scope="public"] h2 {
        font-size: clamp(1.15rem, 2.8vw, 1.5rem);
        line-height: 1.2;
    }
    [data-scope="public"] h3 {
        font-size: clamp(1rem, 2.2vw, 1.2rem);
        line-height: 1.25;
    }
}

/* Phone (≤767px) — Ayrı mobil tipografi sistemi */
@media (max-width: 767px) {
    [data-scope="public"] h1 {
        font-size: clamp(1.25rem, 5vw, 1.6rem);
        line-height: 1.18;
        letter-spacing: -0.01em;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    [data-scope="public"] h2 {
        font-size: clamp(1.05rem, 4vw, 1.3rem);
        line-height: 1.22;
    }
    [data-scope="public"] h3 {
        font-size: clamp(0.92rem, 3.5vw, 1.1rem);
        line-height: 1.28;
    }
    [data-scope="public"] p,
    [data-scope="public"] .kp-area-text,
    [data-scope="public"] .kp-manifesto p {
        font-size: 0.88rem;
        line-height: 1.65;
    }
    .detail-breadcrumb,
    .ref-detail-page .detail-breadcrumb {
        font-size: 0.72rem;
    }
    .ref-detail-page .ref-date {
        font-size: 0.72rem;
    }
    .ref-detail-page .ref-summary {
        font-size: 0.82rem;
        line-height: 1.55;
    }
    .ref-detail-page .aside-title--premium {
        font-size: 0.7rem;
    }
    .ref-detail-page .aside-title-text {
        font-size: 0.82rem;
    }
    .ref-detail-page .aside-excerpt {
        font-size: 0.75rem;
    }
    .ref-detail-page .aside-kicker {
        font-size: 0.7rem;
    }
    /* Buton text — mobil uyumlu */
    .kp-cta-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1.1rem;
        min-height: 44px;
    }
}

/* Small phone (≤575px) */
@media (max-width: 575px) {
    [data-scope="public"] h1 {
        font-size: clamp(1.15rem, 5.5vw, 1.45rem);
    }
    [data-scope="public"] h2 {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
    }
    [data-scope="public"] p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}

/* Very small phone (≤400px) */
@media (max-width: 400px) {
    [data-scope="public"] h1 {
        font-size: clamp(1.1rem, 6vw, 1.35rem);
    }
    [data-scope="public"] p {
        font-size: 0.82rem;
        line-height: 1.55;
    }
}

/* ══════════════════════════════════════════════════════════
   11. EDİTORYAL DETAY SAYFASI STİLİ
   .editorial-body — kart içinde değil, doğal editoryal akış
   ══════════════════════════════════════════════════════════ */

.ref-detail-page .editorial-body {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0.5rem;
    font-size: 1.02rem;
    line-height: 1.85;
    color: #1a1a1a;
    max-width: 72ch;
}

.editorial-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,.08);
}

.editorial-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(0,0,0,.5);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}

.editorial-back-link:hover {
    color: #B23A2C;
}

.editorial-back-link i {
    font-size: 0.75rem;
}

.ref-detail-page .detail-back-btn {
    font-size: 0.78rem;
    padding: 6px 10px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
    color: rgba(0,0,0,.55);
    font-weight: 600;
}

.ref-detail-page .detail-back-btn:hover {
    background: rgba(178,58,44,.08);
    border-color: rgba(178,58,44,.18);
    color: #B23A2C;
}

.ref-detail-page .aside-pill {
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.08);
    color: rgba(0,0,0,.5);
    font-size: 0.65rem;
    padding: 2px 6px;
}

/* ══════════════════════════════════════════════════════════
   12. DETAY SAYFASI MOBİL DÜZEN — FAIL-SAFE
   Görsel-metin çakışmasını kesin çöz, tek kolon akış
   Absolute/overlay kullanmadan güvenli stack
   Sıra: Başlık → Tarih/Özet → Görsel → İçerik → Aside
   ══════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
    .ref-detail-page .detail-grid {
        display: flex !important;
        flex-direction: column;
        gap: 1.25rem;
    }
    .ref-detail-page .lead-text {
        order: 1;
    }
    .ref-detail-page .lead-media {
        order: 2;
    }
    .ref-detail-page .editorial-body,
    .ref-detail-page .detail-body {
        order: 3;
        max-width: 100%;
        grid-column: unset;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .ref-detail-page .lead-aside {
        order: 4;
        position: static;
    }
    .ref-detail-page .ref-detail-container {
        width: calc(100% - 24px);
        padding: 14px 12px 24px;
    }
    .pgp-gallery-main {
        aspect-ratio: 7 / 5;
    }
    .ref-detail-page .lead-media img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    .ref-detail-page .aside-card--feature {
        grid-template-columns: 120px 1fr;
        padding: 12px;
        gap: 12px;
        min-height: auto;
    }
    .ref-detail-page .aside-media {
        width: 120px;
        height: 85px;
        border-radius: 10px;
    }
}

@media (max-width: 767px) {
    .ref-detail-page .editorial-body {
        font-size: 0.92rem;
        line-height: 1.75;
        max-width: 100%;
    }
    .ref-detail-page .editorial-body h2 {
        font-size: 1.1rem;
    }
    .ref-detail-page .editorial-body h3 {
        font-size: 1rem;
    }
    .ref-detail-page .detail-toprow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ref-detail-page .detail-back-btn {
        font-size: 0.75rem;
        padding: 6px 10px;
        background: rgba(0,0,0,.04);
        border: 1px solid rgba(0,0,0,.08);
        color: rgba(0,0,0,.55);
    }
    .editorial-footer {
        margin-top: 1.75rem;
        padding-top: 1.25rem;
    }
    .editorial-back-link {
        font-size: 0.78rem;
    }
    .pgp-gallery-main {
        aspect-ratio: 7 / 5;
    }
    .ref-detail-page .aside-card--feature {
        grid-template-columns: 100px 1fr;
        padding: 10px;
        gap: 10px;
        min-height: auto;
    }
    .ref-detail-page .aside-media {
        width: 100px;
        height: 70px;
        border-radius: 8px;
    }
    .ref-detail-page .aside-pill {
        font-size: 0.6rem;
        padding: 2px 5px;
    }
    .ref-detail-page .aside-title-text {
        font-size: 0.78rem;
        -webkit-line-clamp: 2;
    }
    .ref-detail-page .aside-excerpt {
        display: none;
    }
}

@media (max-width: 575px) {
    .ref-detail-page .aside-card--feature {
        grid-template-columns: 1fr;
    }
    .ref-detail-page .aside-media {
        width: 100%;
        height: 140px;
    }
    .pgp-gallery-main {
        aspect-ratio: 7 / 5;
    }
    .ref-detail-page .ref-detail-container {
        width: calc(100% - 16px);
        padding: 10px 8px 20px;
    }
    .ref-detail-page .editorial-body {
        font-size: 0.88rem;
        line-height: 1.7;
    }
    .ref-detail-page .editorial-body blockquote {
        padding: 0.75rem 1rem;
        margin: 1rem 0;
    }
    .ref-detail-page .editorial-body img {
        margin: 1rem 0;
        border-radius: 0.5rem;
    }
}

/* ══════════════════════════════════════════════════════════
   13. MOBİL KART CAROUSEL SİSTEMİ
   767px altında: kart grid → tek kart slider
   Touch/swipe destekli, dots, auto-play (JS ile)
   ══════════════════════════════════════════════════════════ */

.mcc-wrapper {
    display: none;
}

@media (max-width: 767px) {
    .mcc-desktop-grid {
        display: none !important;
    }
    .mcc-wrapper {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    .mcc-track {
        display: flex;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
    }
    .mcc-track.mcc-dragging {
        transition: none;
    }
    .mcc-slide {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 0.5rem;
        box-sizing: border-box;
    }
    .mcc-slide .kp-area-card {
        width: 100%;
        min-height: 0;
        padding: 1.5rem 1.25rem;
        border-radius: 0.85rem;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 2px 14px rgba(0,0,0,0.06);
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin: 0 auto;
        max-width: 100%;
    }
    .mcc-slide .kp-area-card .kp-area-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .mcc-slide .kp-area-card .kp-area-title {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
        line-height: 1.3;
    }
    .mcc-slide .kp-area-card .kp-area-text {
        font-size: 0.84rem;
        line-height: 1.6;
        -webkit-line-clamp: 4;
        opacity: 0.7;
    }
    .mcc-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.35rem;
        padding: 0.85rem 0 0.25rem;
    }
    .mcc-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.12);
        cursor: pointer;
        padding: 0;
        transition: background 0.25s, width 0.25s;
    }
    .mcc-dot.active {
        background: var(--primary, #B23A2C);
        width: 18px;
        border-radius: 999px;
    }
}

/* ══════════════════════════════════════════════════════════
   14. TABLET DETAY DENEYİMİ
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 991px) {
    .ref-detail-page .editorial-body {
        font-size: 0.95rem;
        line-height: 1.8;
        max-width: 100%;
    }
    .ref-detail-page .aside-card--feature {
        grid-template-columns: 140px 1fr;
    }
    .ref-detail-page .aside-media {
        width: 140px;
        height: 95px;
    }
}

/* ══════════════════════════════════════════════════════════
   15. GENEL TABLET/MOBİL SPACING DÜZENLEME
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .kp-content-section {
        padding: 2.5rem 0;
    }
    [data-scope="public"] .kp-page > .kp-content-section {
        padding: 2.5rem 0;
    }
}

@media (max-width: 767px) {
    .kp-content-section {
        padding: 2rem 0;
    }
    [data-scope="public"] .kp-page > .kp-content-section {
        padding: 2rem 0;
    }
}

@media (max-width: 575px) {
    .kp-content-section {
        padding: 1.75rem 0;
    }
}

/* ══════════════════════════════════════════════════════════
   16. ZOOM DAYANİKLİLİK — GENEL KORUMA
   %67, %80, %100, %110 zoom'da dengeli
   ══════════════════════════════════════════════════════════ */

/* Tüm img elemanları responsive */
[data-scope="public"] img {
    max-width: 100%;
    height: auto;
}

/* Sabit px bağımlılığını azalt: tüm kartlarda min-width sıfır */
.kp-area-card,
.featured-card,
.news-list-card,
.news-card-item,
.board-card,
.aside-card--feature {
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   17. MOBİL FAİL-SAFE — TEK KOLON FALLBACK
   Tüm kart gruplarının mobilde güvenli şekilde
   tek kolon akışa geçmesini garanti et
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Tüm gridlerin mobilde yatay taşma yapmasını önle.
       overflow-x:hidden yatay kaydırmayı engeller;
       overflow-y:visible dikey içerik kırpılmasını önler. */
    .kp-areas-grid,
    .three-col-grid,
    .board-grid,
    .activity-grid,
    .kp-members-grid,
    .spx-grid {
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }
    
    /* Kartların minimum genişliği ile ilgili sorun önleme.
       overflow-x:hidden yatay taşmayı önler;
       overflow-y:visible kart içeriğinin kırpılmasını engeller. */
    .kp-area-card,
    .three-col-card,
    .board-card,
    .activity-card {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }
}

@media (max-width: 575px) {
    /* Küçük telefon: tek kolon fallback.
       auto-fit minmax(240px) 575px altında zaten 1fr'e düşer
       ama bu kuralı açıkça belirterek carousel/JS bağımsız çalışmasını garanti ederiz. */
    .kp-areas-grid:not(.mcc-desktop-grid) {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    
    .activity-grid {
        grid-template-columns: 1fr;
    }

    /* Sponsor grid — tek kolon */
    .spx-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   18. DETAY SAYFALARI — EDİTORYAL VE RESMİ STİL
   Haber/Duyuru detayları kart kutusu YOK,
   doğal editoryal akış, kurumsal ve sade
   ══════════════════════════════════════════════════════════ */

/* Desktop: editoryal body zaten kart-dışı akış */
.ref-detail-page .editorial-body {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* "Tüm Haberlere Dön" / "Tüm Duyurulara Dön" butonu doğal, sakin */
.editorial-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(0,0,0,.45);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}

.editorial-back-link:hover {
    color: #B23A2C;
}

/* News detail gallery: siyah alan yok, görsel tam dolu, hafif aşağı kaydırılmış */
.ref-news .pgp-gallery-main--news {
    aspect-ratio: 3 / 2;
    background: #f0ede8; /* Açık krem — siyah boşluk kalmaz */
    overflow: hidden;
}

.ref-news .pgp-gallery-main--news img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important; /* Hafif aşağı — kötü crop olmaz */
    display: block !important;
}

/* Duyuru detay gallery: haber ile aynı oran + davranış */
.ref-ann .pgp-gallery-main {
    aspect-ratio: 3 / 2;
    background: #f0ede8;
    overflow: hidden;
}

.ref-ann .pgp-gallery-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
}

/* Tüm ref-detail büyük görsel alanları — final kural:
   object-fit:contain kalıntısı varsa cover ile ezmek için (specificity artır) */
.ref-detail-page .lead-media .ref-media img,
.ref-detail-page .detail-col--media .ref-media img {
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   19. NELER YAPIYORUZ — MOBİL GÜVENLİK İZOLASYONU
   visibility:visible/opacity:1/transform:none !important ile
   scroll-reveal (data-rv) gizleme etkilerinden korunur
   ══════════════════════════════════════════════════════════ */

.page-whatwedo .kp-areas-grid,
.page-whatwedo .wwd-band-grid {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 767px) {
    .page-whatwedo .wwd-band-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .page-whatwedo .wwd-visual {
        min-height: 180px;
        max-height: 240px;
        position: relative;
        overflow: hidden;
    }
    .page-whatwedo .wwd-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .page-whatwedo .wwd-text {
        position: relative;
    }
}