/* ═══ Anasayfa — Hakkımızda bölümü ═════════════════════════════════════════
   Referans: aifusionx.vamtam.com/ai-trainers "e225851" — sol sütun birebir; sağ sütun aynı metin
   düzeninin yansısı + en altta soldaki kartla aynı hizada görsel.
   İçerik: Banner Yönetimi → "Anasayfa — Hakkımızda"; aç/kapat + sıra: Anasayfa Yönetimi → "About".
   Font ve renkler SİSTEMDEN (header-hero.css --hx-* değişkenleri ← Ayarlar → Görünüm).
   Bekçi: HeaderHeroGorunumTests. Kırılımlar: tablet ≤1024px, mobil ≤767px.
   ═════════════════════════════════════════════════════════════════════════ */

.hk-bolum {
    margin: 0 0 var(--ab-dikey, 90px);   /* anasayfa dikey ritmi (anasayfa-bolumler.css) */
    padding: 0 30px;
    background: linear-gradient(var(--hx-zemin) 0%, var(--hx-yuzey) 100%);
    color: var(--hx-metin);
    font-family: var(--hx-font);
}
.hk-ic {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--ab-dikey, 90px) 0 60px;
}

/* Izgara: 3 satır × 2 sütun. DOM sütun sırasında (mobilde tek sütuna doğal akar);
   masaüstünde hücreler satırlara yerleştirilir → kart ile görsel AYNI satırda, aynı hizada. */
.hk-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 10px;
}
.hk-sol-ust  { grid-column: 1; grid-row: 1; }
.hk-sol-p    { grid-column: 1; grid-row: 2; }
.hk-sol-kart { grid-column: 1; grid-row: 3; }
.hk-sag-ust  { grid-column: 2; grid-row: 1; }
.hk-sag-p    { grid-column: 2; grid-row: 2; }
.hk-sag-gorsel { grid-column: 2; grid-row: 3; }

.hk-ust { display: flex; flex-direction: column; gap: 10px; }

.hk-etiket {
    margin: 0;
    font-family: var(--hx-font);
    font-size: 12px;
    line-height: 15.6px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hx-metin);
}
.hk-bolum .hk-baslik {
    max-width: 415px;
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 46px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--hx-metin);
}

.hk-aciklama { margin: 0 0 15px; padding: 0 0 16px; }
.hk-aciklama p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--hx-metin);
    white-space: pre-line;
}

/* ─── Sol kart: vurgu tonlu gradyan, sağ altta oyuk "cep" içinde buton ─── */
.hk-kart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 360px;
    max-width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(color-mix(in srgb, var(--hx-vurgu) 18%, var(--hx-yuzey)) 0%, var(--hx-yuzey) 100%);
}
.hk-kart-ust {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 40px 40px 0;
}
.hk-kart-butonsuz .hk-kart-ust { padding-bottom: 40px; }
.hk-kart-deger {
    max-width: 252px;
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--hx-metin);
}
.hk-kart-metin {
    max-width: 252px;
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--hx-metin);
}
/* Oyuk: bölüm zemini renginde, kavisli poligonla kesilmiş katman (referansla aynı eğri). */
.hk-kart-cep {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 -1px -1px 0;
    padding: 58px 1px 1px 105px;
    background: var(--hx-yuzey);
    clip-path: var(--hx-cep-sag-alt);
}

/* ─── Sağ görsel: kartla aynı satır → üst/alt hizası kartla aynı ─── */
.hk-gorsel {
    position: relative;
    min-height: 256px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: color-mix(in srgb, var(--hx-metin) 6%, transparent);
}
/* Görsel satır yüksekliğini BELİRLEMEZ (kart belirler); hücreyi kaplar. */
.hk-gorsel picture,
.hk-gorsel img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Giriş: kart görünür alana girince belirir (Elementor fadeIn .75s) — js/header-hero.js */
@media (prefers-reduced-motion: no-preference) {
    .hx-js .hk-kart[data-hx-gorunce]:not(.hx-gorundu) { opacity: 0; }
    .hk-kart.hx-gorundu { animation: hk-belir .75s ease both; }
}
@keyframes hk-belir { 0% { opacity: 0; } 100% { opacity: 1; } }

@media (max-width: 1024px) {
    .hk-bolum { margin: 0; padding: 0 20px; }
    .hk-ic { padding: 30px 0 60px; }
    .hk-bolum .hk-baslik { max-width: 100%; font-size: 30px; }
    .hk-aciklama { margin: 0; }
    .hk-kart { width: 300px; }
    .hk-kart-ust { padding: 30px 20px 0; }
    .hk-kart-butonsuz .hk-kart-ust { padding-bottom: 30px; }
    .hk-kart-deger { font-size: 20px; }
    .hk-gorsel { min-height: 234px; }
}
@media (max-width: 767px) {
    .hk-ic { padding: 20px 0 40px; }
    .hk-izgara { grid-template-columns: minmax(0, 1fr); }
    .hk-sol-ust, .hk-sol-p, .hk-sol-kart, .hk-sag-ust, .hk-sag-p, .hk-sag-gorsel { grid-column: 1; grid-row: auto; }
    .hk-bolum .hk-baslik { font-size: 23px; }
    .hk-aciklama { padding: 0; }
    .hk-aciklama p { line-height: 24px; }
    /* Referansla aynı: kart mobilde gizli */
    .hk-sol-kart { display: none; }
    .hk-sag-ust { margin-top: 20px; }
    .hk-gorsel { min-height: 0; aspect-ratio: 16 / 10; }
}