/* Ana sayfa vitrin: kartlar, hakkımızda, referans şeridi.
   Paylaşılan fk-* temelleri (renk tokenları, .fk-bolum/.fk-baslik/.fk-aciklama,
   .fk-btn, .fk-vitrin-kart, .fk-etiket, .fk-satir) artık fk-shared.css içinde —
   bu dosya SADECE ana sayfaya özel düzen/süsleme kurallarını taşır. Bu dosyayı
   kullanan her view önce fk-shared.css'i, sonra bunu bağlamalı. */

/* ---------- 0) Hero slayt: kutu 2:1 oranında BÜYÜR, viewport'a sığar, 32rem'in altına düşmez ----------
   1920×1080 monitörde tarayıcı chrome + navbar sonrası kutu 2:1'den daha yatay
   olabilir (~2.4:1). Yüksekliğe sığdırınca 1600×800 solda boşluk bırakır; 3:1
   kaynak o pencereye uyar ama yüksek pencerede şerit gibi durur. object-cover
   her pencerede doldurur; object-position top yüz/sahneyi kesmez, fazla alttan gider.
   2026-09-17: aspect-ratio property'si KALDIRILDI — Safari/iOS'ta aspect-ratio +
   min-height + max-height üçlüsü bir arada varken WebKit kutuyu min-height'tan
   daha kısa hesaplayabiliyor, bu da overflow:hidden ile başlık+görselin üstünün
   kesilmesine yol açıyordu (yalnızca Safari mobil). AMA salt min/max-height'a
   dönmek (ilk deneme) masaüstünde kutuyu hep 32rem'e sabitleyip genişlik arttığında
   büyümesini durdurdu — 2:1 oranının asıl işi buydu. Çözüm: aynı "genişliğin
   yarısı, viewport'a sığ, 32rem'in altına düşme" mantığını aspect-ratio property'si
   yerine height: clamp(min, 50vw, max) ile SAF MATEMATİKLE üret — clamp() tek bir
   kesin height değeri döndürür, aspect-ratio'nun min/max-height ile çakıştığı
   ayrışık (auto-height + aspect-ratio + min/max) çözümleme yoluna hiç girmez. */
.as-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #011632;
    height: clamp(32rem, 50vw, calc(100vh - 4.5rem));
    height: clamp(32rem, 50vw, calc(100svh - 4.5rem));
}
@media (min-width: 768px) {
    /* utility bar h-9 (2.25rem) + hn-bar min-h-[4.5rem] */
    .as-hero { height: clamp(32rem, 50vw, calc(100vh - 6.75rem)); }
    .as-hero { height: clamp(32rem, 50vw, calc(100svh - 6.75rem)); }
}
.as-hero__icerik {
    height: 100%;
}
.as-hero__gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: opacity 1s;
}

/* ---------- 1) Vitrin kartları (ActivitiesFour xl kartı, çocuk dekoru yok) ---------- */
.fk-vitrin-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .fk-vitrin-izgara { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .fk-vitrin-izgara {
        /* 2026-08-20: "Neden Mesvera?" 4'ten 6 karta çıktı — 4'lü sütun son satırda
           2 kart yalnız bırakıyordu; 3 sütun 2x3'e eşit dağılır. */
        grid-template-columns: repeat(3, 1fr);
        gap: 1.125rem;
    }
}

.fk-bolum--vitrin {
    padding-top: 3.25rem;
}

/* ---------- 2) Hakkımızda (AboutThree kompozisyonu) ---------- */
.fk-about {
    position: relative;
    overflow: visible;
    background: #fff;
    padding: 3.5rem 1rem 4rem;
}
@media (min-width: 640px) {
    .fk-about { padding-inline: 2rem; }
}
@media (min-width: 1024px) {
    .fk-about { padding: 4.5rem 4rem 5.5rem; }
}

.fk-about__ic {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .fk-about__ic {
        grid-template-columns: 1.2fr 1fr;
        gap: 3rem;
    }
}

.fk-about-sol {
    position: relative;
    padding: 1.25rem 2.25rem 0 2.5rem;
    align-self: stretch;
    min-height: 100%;
}
@media (max-width: 1023px) {
    .fk-about-sol { padding: 0 0 1.5rem; }
}

.fk-about-blob {
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 4%;
    width: 78%;
    height: 72%;
    background: #EEF1F4;
    border-radius: 58% 42% 48% 52% / 48% 42% 58% 52%;
}

.fk-about-dots {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 18%;
    width: 72px;
    height: 96px;
    background-image: radial-gradient(var(--fk-green-dark) 1.4px, transparent 1.6px);
    background-size: 12px 12px;
    opacity: 0.55;
}
@media (max-width: 1023px) {
    .fk-about-dots { display: none; }
}

.fk-about-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
    height: 100%;
    min-height: 520px;
}
.fk-about-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
}
@media (max-width: 640px) {
    .fk-about-thumb,
    .fk-about-thumb img {
        min-height: 280px;
        height: 280px;
    }
}

.fk-about-rozet {
    position: absolute;
    z-index: 3;
    top: 12%;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 0.85rem 0.95rem;
    background: var(--fk-green-dark);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(3, 78, 50, 0.28);
    animation: fk-about-kaydir 4s ease-in-out infinite alternate;
}
@media (max-width: 1023px) {
    .fk-about-rozet {
        top: auto;
        bottom: auto;
        left: 0.75rem;
        top: 0.75rem;
        animation: none;
    }
}
.fk-about-rozet svg {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}
.fk-about-rozet strong {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.fk-about-rozet small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

@keyframes fk-about-kaydir {
    from { transform: translateX(0); }
    to { transform: translateX(10px); }
}

.fk-about-sprinkle {
    position: absolute;
    top: 1.5rem;
    right: 6%;
    z-index: 0;
    width: 56px;
    height: 56px;
    background-image:
        radial-gradient(circle, var(--fk-green-dark) 1.5px, transparent 1.6px),
        radial-gradient(circle, var(--fk-green) 1.2px, transparent 1.3px);
    background-size: 14px 14px, 18px 18px;
    background-position: 0 0, 7px 9px;
    opacity: 0.35;
    pointer-events: none;
}
@media (max-width: 1023px) {
    .fk-about-sprinkle { display: none; }
}

.fk-about-sag {
    padding-bottom: 0.25rem;
}
.fk-about-sag .fk-baslik {
    text-align: left;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}
@media (min-width: 768px) {
    .fk-about-sag .fk-baslik { font-size: 1.875rem; }
}
.fk-about-sag .fk-aciklama {
    margin: 0 0 1.35rem;
    max-width: none;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
/* .fk-aciklama--tam (fk-shared.css) tek sinif oldugu icin buradaki
   iki-sinifli .fk-about-sag .fk-aciklama kuralini spesifiklikte
   yenemiyor, kirpma geri kaziyordu — burada ayni spesifiklikte iptal edilir. */
.fk-about-sag .fk-aciklama--tam {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* fk-satir (fk-shared.css) burada hover'da ikonu ayna gibi cevirir — About
   bileseninin karakteristik mikro-etkilesimi, genel bilesende yok. */
.fk-satir:hover .fk-satir__ikon svg {
    transform: scaleX(-1);
    transition: transform .3s ease;
}
.fk-satir h3 { white-space: nowrap; }
@media (max-width: 480px) {
    .fk-satir h3 { white-space: normal; }
}

.fk-about-more {
    margin-bottom: 1.35rem;
}

.fk-about-cta-yazi {
    margin: 0 0 1rem;
    color: var(--fk-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.fk-about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: end;
}

/* ---------- 3) Referans şeridi (BrandTwo / it-brand-2) ---------- */
.fk-referans-serit {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #124D2D;
    padding: 1.75rem 0 1.5rem;
}

.fk-referans-ust,
.fk-referans-alt {
    text-align: center;
    padding-inline: 1rem;
}
.fk-referans-ust {
    margin-bottom: 1.125rem;
}
.fk-referans-ust span {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.fk-referans-alt { margin-top: 1.125rem; }
.fk-referans-alt a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.fk-referans-alt a:hover,
.fk-referans-alt a:focus-visible { color: #fff; }
.fk-referans-alt svg { width: 1rem; height: 1rem; }

.fk-referans-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: fk-referans-kaydir 36s linear infinite;
    will-change: transform;
}
.fk-referans-serit:hover .fk-referans-track {
    animation-play-state: paused;
}

/* Az sayıda (10'un altı) gerçek referansta kayan şerit yerine durağan, ortalı sıra —
   1-2 logoyu döndürmek "kayıyor" değil "aynı logo titriyor" gibi görünüyordu. */
.fk-referans-track--static {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 1rem;
}

/* Kurum logoları yuvarlak "mühür" çerçevesinde — kb-avatar/fk-kart__rozet ile aynı dil
   (kurum logoları genelde şeffaf/beyaz zemine göre tasarlanır, beyaz daire hepsini tek
   tipte toplar). Kare imaj artık dairenin İÇİNDE, drop-shadow yerine daire kendi gölgesini taşır. */
.fk-referans-oge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    margin-inline: 18px;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.fk-referans-oge img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

@keyframes fk-referans-kaydir {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .fk-referans-track { animation: none; }
    .fk-about-rozet { animation: none; }
    .fk-about-play span { animation: none; }
}

/* Kategori başlığı — vitrin ile aynı ölçek; alt boşluk şeride yaslansın */
.fk-bolum--kategori {
    padding-bottom: 2.75rem;
}
.fk-bolum--kategori .fk-bolum__bas { margin-bottom: 2rem; }