/* ═══ Anasayfa bölümleri (referans: aifusionx.vamtam.com/ai-trainers) ═════════════════
   Her bölümün ölçüleri: docs/research/aifusionx-<bolum>.spec.md. İçerik: Banner Yönetimi + modüller;
   aç/kapat + sıra: Anasayfa Yönetimi. Font ve renkler SİSTEMDEN (header-hero.css --hx-* değişkenleri ←
   Ayarlar → Görünüm); burada font adı / marka rengi yazılmaz — bekçi: HeaderHeroGorunumTests.
   Kırılımlar: tablet ≤1024px, mobil ≤767px. Giriş animasyonları: data-hx-anim (header-hero.css).
   ═════════════════════════════════════════════════════════════════════════════════ */

/* ─── Ortak ───────────────────────────────────────────────────────────────────── */
/* Bölümler arası dikey ritim: ekran yüksekliğiyle büyür ama 90px'i geçmez (eskiden 12vh — 1080px ekranda
   ardışık iki bölümde ~260px boşluk oluşuyordu). Tablet/mobil kuralları kendi sabit değerlerini kullanır. */
:root { --ab-dikey: clamp(56px, 8vh, 90px); }
.ab-bolum {
    padding: 0 30px;
    font-family: var(--hx-font);
    font-size: 16px;
    line-height: 1.4;
    color: var(--hx-metin);
}
.ab-ic { max-width: 1280px; margin: 0 auto; }
.ab-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);
}
.ab-bolum .ab-baslik {
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 46px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--hx-metin);
}
.ab-aciklama { margin: 0; font-size: 16px; line-height: 1.4; color: var(--hx-metin); }
.ab-bolum p { line-height: 1.4; }
/* Açık (beyaz) hap buton: koyu zeminde / görselli kartta */
.hx-btn.ab-btn-acik,
.hx-btn.ab-btn-acik:hover {
    background: var(--hx-yuzey);
    border-color: color-mix(in srgb, var(--hx-metin) 10%, transparent);
    color: var(--hx-metin);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.hx-btn.ab-btn-acik:hover,
.hx-btn.ab-btn-acik:focus-visible { background: var(--hx-vurgu); border-color: var(--hx-vurgu); color: var(--hx-vurgu-metin); }

@media (max-width: 1024px) {
    .ab-bolum { padding: 0 20px; }
    .ab-bolum .ab-baslik { font-size: 30px; }
}
@media (max-width: 767px) {
    .ab-bolum { line-height: 1.5; }
    .ab-bolum .ab-baslik { font-size: 23px; }
}

/* ─── Referanslar (22f044f) — logo bandı ───────────────────────────────────────── */
.ab-ref { margin: 0 0 var(--ab-dikey); }
.ab-ref .ab-ic { display: flex; flex-direction: column; gap: 10px 20px; }
.ab-ref-ust { display: flex; justify-content: space-between; gap: 10px 20px; margin: 0 0 15px; }
.ab-bolum .ab-ref-sol { margin: 0; font-family: var(--hx-font); font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: normal; color: var(--hx-metin); }
.ab-ref-logolar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ab-ref-karo {
    width: 195px;
    max-width: 195px;
    padding: 2%;
    border-radius: 25px;
    background: color-mix(in srgb, var(--hx-metin) 2.5%, var(--hx-yuzey));
    text-align: center;
}
.ab-ref-karo img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    filter: saturate(0);
}
@media (max-width: 1024px) {
    .ab-ref { margin-bottom: 30px; }
    .ab-ref .ab-ic { gap: 10px 20px; }
    .ab-ref-ust { margin: 0; }
    .ab-ref-ust > * { margin-bottom: 10px; }
    .ab-ref-logolar { gap: 20px; }
    .ab-ref-karo { padding: 10px; border-radius: 20px; }
    .ab-ref-karo img { height: 30px; }
}
@media (max-width: 767px) {
    .ab-ref { margin-bottom: 20px; }
    .ab-ref-ust { flex-direction: column; gap: 0; }
    .ab-ref-ust > .ab-ref-sol { margin-bottom: 0; }
    .ab-ref-logolar { justify-content: space-between; gap: 10px 0; }
    .ab-ref-karo { width: 45%; max-width: 45%; text-align: start; }
    .ab-ref-karo img { width: 80%; }
}

/* ─── CTA (74830bb) — görselli büyük kart, köşelerde zemin renginde oyuklar ───────── */
.ab-cta { margin: 0 0 var(--ab-dikey); }
.ab-cta .ab-ic { position: relative; }
.ab-cta-kart {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: clamp(300px, 45vh, 500px);
    padding: 120px 30px;
    overflow: hidden;
    border-radius: 20px 20px 0 20px;
    background: color-mix(in srgb, var(--hx-vurgu) 18%, var(--hx-yuzey));
    text-align: center;
}
.ab-cta-arka,
.ab-cta-arka img {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ab-cta-icerik { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 900px; }
.ab-bolum .ab-cta-baslik {
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 74px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -3px;
    color: var(--hx-metin);
}
.ab-cta-metin { margin: 0 0 20px; font-size: 16px; line-height: 22.4px; }
/* Oyuklar: sayfa zemini renginde, kavisli poligonla kesilmiş kutular (sol üst = sağ altın 180° dönmüşü). */
.ab-cta-oyuk {
    position: absolute;
    z-index: 2;
    width: 350px;
    height: 105px;
    background: var(--hx-zemin);
    clip-path: var(--hx-cep-sag-alt);
    pointer-events: none;
}
.ab-cta-oyuk-ust { top: 0; left: -1px; transform: rotate(180deg); }
.ab-cta-oyuk-alt { right: -1px; bottom: -1px; }
@media (max-width: 1024px) {
    .ab-cta { margin-bottom: 60px; }
    .ab-bolum .ab-cta-baslik { font-size: 45px; letter-spacing: -2.5px; }
    .ab-cta-oyuk { width: 300px; }
}
@media (max-width: 767px) {
    .ab-cta { margin-bottom: 40px; }
    .ab-cta-kart { padding: 100px 20px; }
    .ab-bolum .ab-cta-baslik { font-size: 30px; letter-spacing: -1.5px; }
    .ab-cta-metin { margin: 10px; line-height: 24px; }
    .ab-cta-oyuk { width: 100%; height: 80px; }
    .ab-cta-oyuk-ust { left: 0; }
    .ab-cta-oyuk-alt { right: 0; }
}

/* ─── Form / vaka kartı (7525476) — görsel + koyu panel + istatistik + cepte buton ─── */
.ab-form { padding-top: var(--ab-dikey); padding-bottom: 0; margin: 0 0 calc(40px + 2vh); }
.ab-form .ab-ic { display: flex; flex-direction: column; gap: 10px; }
.ab-form-ust {
    width: 735px;
    max-width: 100%;
    margin: 0 auto 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.ab-form-ust .ab-aciklama { margin: 0 0 16px; }
.ab-form-kart {
    display: flex;
    gap: 30px;
    min-height: 450px;
    border-radius: 20px;
    background: var(--hx-metin);
    color: var(--hx-yuzey);
}
.ab-form-foto {
    position: relative;
    flex: 0 0 calc(50% - 15px);
    overflow: hidden;
    border-radius: 20px 0 0 20px;
}
.ab-form-foto picture,
.ab-form-foto img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ab-form-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 40px 0 0 40px;
}
.ab-form-panel-ust { display: flex; gap: 20px; }
.ab-form-metin { width: 70%; display: flex; flex-direction: column; gap: 10px; }
.ab-form-rozet {
    align-self: flex-start;
    margin: 0 0 30px;
    padding: 6px 15px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--hx-yuzey) 20%, transparent);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .01);
    font-size: 12px;
    line-height: 15.6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hx-zemin);
}
.ab-bolum .ab-form-kart-baslik {
    margin: 0 0 30px;
    font-family: var(--hx-font-baslik);
    font-size: 34px;
    line-height: 44.2px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--hx-yuzey);
}
.ab-form-kart-metin { margin: 0 0 16px; font-size: 16px; line-height: 22.4px; color: var(--hx-zemin); }
.ab-form-istatistik { display: flex; align-items: stretch; gap: 20px; }
.ab-form-deger {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 34px;
    line-height: 44.2px;
    font-weight: 500;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hx-vurgu) 35%, var(--hx-yuzey)) 0%, var(--hx-yuzey) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.ab-form-ayrac { flex: 0 0 1px; background: color-mix(in srgb, var(--hx-zemin) 40%, transparent); }
.ab-form-etiket {
    width: 250px;
    max-width: 250px;
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 15.6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hx-zemin);
}
.ab-form-logo {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 30px 0 0;
}
.ab-form-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 40px; }
.ab-form-logo-ad { font-family: var(--hx-font-baslik); font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--hx-yuzey); }
.ab-form-cep {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 350px;
    max-width: 100%;
    margin: 0 -1px -1px 0;
    padding: 58px 1px 1px 105px;
    background: var(--hx-zemin);
    clip-path: var(--hx-cep-sag-alt);
}
@media (max-width: 1024px) {
    .ab-form { padding-top: 0; margin-bottom: 15px; }
    .ab-form-ust { margin-bottom: 0; }
    .ab-form-kart { min-height: 300px; margin-bottom: 10px; }
    .ab-form-panel { padding: 60px 0 0; }
    .ab-form-rozet { margin-bottom: 10px; }
    .ab-bolum .ab-form-kart-baslik { margin-bottom: 10px; font-size: 24px; line-height: 31.2px; }
    .ab-form-deger { font-size: 24px; line-height: 31.2px; }
    .ab-form-logo { padding-right: 20px; }
    .ab-form-cep { width: 300px; min-height: 105px; }
}
@media (max-width: 767px) {
    .ab-form-kart { flex-wrap: wrap; margin-bottom: 0; }
    .ab-form-foto { flex-basis: 100%; min-height: 50vw; border-radius: 20px 20px 0 0; }
    .ab-form-panel { flex-basis: 100%; padding: 0; }
    .ab-form-panel-ust { flex-wrap: wrap; padding: 20px; }
    .ab-form-metin, .ab-form-logo { width: 100%; }
    .ab-form-logo { order: -1; justify-content: flex-start; margin-bottom: 5px; padding: 0; }
    .ab-bolum .ab-form-kart-baslik { margin: 1px; font-size: 20px; line-height: 22px; }
    .ab-form-deger { font-size: 20px; line-height: 22px; }
    .ab-form-etiket { width: 65%; max-width: 65%; }
    .ab-form-cep { width: 100%; }
}

/* ─── Hizmetler (3671668) — sabit kart ızgarası (referansta carousel; istemci isteğiyle sabit) ─── */
.ab-hiz { margin: 0 0 var(--ab-dikey); }
.ab-hiz-ust { display: flex; flex-direction: column; gap: 10px; margin: 0 auto 35px; padding-right: 130px; }
.ab-hiz-ust > * { max-width: 630px; }
.ab-hiz-ust .ab-aciklama { margin: 0 0 16px; }
.ab-hiz-kartlar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0 50px;
    list-style: none;
}
/* Geniş ekranda 5 sütun yalnız 5+ kart varken (4 kartlık ızgarada boş sütun kalmasın) */
@media (min-width: 1600px) { .ab-hiz-kartlar:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ab-hiz-kart {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    background-color: color-mix(in srgb, var(--hx-metin) 2.5%, var(--hx-yuzey));
    transition: background-color .4s;
}
/* Hover gradyanı (vurgu tonu → yüzey) — ayrı katman, opaklıkla geçer */
.ab-hiz-kart::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hx-vurgu) 18%, var(--hx-yuzey)) 0%, var(--hx-yuzey) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.ab-hiz-baglanti,
.ab-hiz-baglanti:hover {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0 30px;
    color: var(--hx-metin);
    text-decoration: none !important;
    opacity: 1;
}
.ab-hiz-kart-butonsuz .ab-hiz-baglanti { padding-bottom: 30px; }
.ab-hiz-gorsel { padding: 45px; text-align: center; }
.ab-hiz-gorsel img { display: inline-block; width: 100%; max-width: 165px; height: auto; border-radius: 20px; transition: transform .8s; }
.ab-hiz-gorsel img:hover { transform: scale(1.1); }
.ab-bolum .ab-hiz-kart-baslik {
    margin: 0;
    text-align: center;
    font-family: var(--hx-font-baslik);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--hx-metin);
}
.ab-hiz-ozet { margin: 0; text-align: center; font-size: 14px; line-height: 19.6px; color: color-mix(in srgb, var(--hx-metin) 60%, transparent); }
.ab-hiz-cep {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 280px;
    max-width: 100%;
    min-height: 70px;
    margin: 0 -1px -1px 0;
    padding: 50px 1px 1px 0;
    background: var(--hx-zemin);
    clip-path: var(--hx-cep-sag-alt);
}
.ab-hiz-btn,
.ab-hiz-btn:hover { width: 180px; justify-content: space-between; }
@media (min-width: 1025px) {
    .ab-hiz-btn { opacity: 0; transition: opacity .3s ease-in-out, background-color .3s, border-color .3s; }
    .ab-hiz-kart:hover { background-color: transparent; }
    .ab-hiz-kart:hover::before { opacity: 1; }
    .ab-hiz-kart:hover .ab-hiz-btn,
    .ab-hiz-kart:focus-within .ab-hiz-btn { opacity: 1; }
}
@media (max-width: 1024px) {
    .ab-hiz { margin-bottom: 0; }
    .ab-hiz-ust { margin-bottom: 0; }
    .ab-hiz-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-hiz-baglanti { padding: 0 20px; }
    .ab-hiz-gorsel { padding: 30px; }
    .ab-hiz-gorsel img { max-width: 120px; }
    .ab-bolum .ab-hiz-kart-baslik { font-size: 18px; line-height: 25.2px; }
}
@media (max-width: 767px) {
    .ab-hiz { margin-bottom: 30px; }
    .ab-hiz-ust { padding-right: 0; }
    .ab-hiz-kartlar { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
    .ab-hiz-gorsel { padding: 20px; }
    .ab-hiz-gorsel img { max-width: 100px; }
    .ab-bolum .ab-hiz-kart-baslik { font-size: 17px; line-height: 23.8px; }
    .ab-hiz-cep { width: 100%; }
}

/* ─── Süreç Nasıl İşliyor? (116bc5b) — tek şeritte "sıvı cam" kartlar + paralaks dekor ─── */
.ab-surec { background: color-mix(in srgb, var(--hx-metin) 2%, var(--hx-zemin)); }
.ab-surec-ic {
    max-width: 1420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--ab-dikey) 0;
}
.ab-surec-ust { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 735px; max-width: 100%; margin: 0 0 15px; text-align: center; }
.ab-surec-ust .ab-aciklama { margin: 0 0 16px; }
/* Şerit başlığın 80px altından başlar (negatif üst boşluk): dekor görseli kartların üstüne taşabilir */
.ab-surec-serit { position: relative; width: 100%; margin: -80px 0 30px; padding: 80px 70px 0; }
.ab-surec-dekor-kap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Katman şeridin %140'ı: kaydırma ilerledikçe (0→1) şerit yüksekliğinin %40'ı kadar yukarı süzülür */
.ab-surec-dekor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(calc(var(--ab-ilerleme, 0) * -28.5714%));
    transition: transform 1s cubic-bezier(0, .33, .07, 1.03);
}
.ab-surec-dekor picture { display: block; }
.ab-surec-dekor img { display: block; width: 240px; height: auto; }
.ab-surec-adimlar { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
.ab-surec-kart {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 225px;
    padding: 30px;
    border: 1px solid rgba(9, 9, 9, .2);
    box-shadow: var(--hx-cam-ic);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    backdrop-filter: blur(5px) url(#hx-lg-fx3);
}
.ab-surec-kart::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--hx-yuzey);
    opacity: .6;
    pointer-events: none;
}
/* Kart dikişi: komşu kenarlar + ince ayraç = 2px koyu çizgi */
.ab-surec-kart + .ab-surec-kart { margin-left: -1px; }
.ab-surec-kart + .ab-surec-kart::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 1px;
    background: color-mix(in srgb, var(--hx-metin) 10%, transparent);
}
.ab-surec-kart:first-child { border-radius: 20px 0 0 20px; }
.ab-surec-kart:last-child { border-radius: 0 20px 20px 0; }
.ab-surec-kart:only-child { border-radius: 20px; }
.ab-surec-kart-ust { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.ab-surec-no {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 15.6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--hx-metin) 60%, transparent);
}
.ab-bolum .ab-surec-kart-baslik {
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--hx-metin);
}
.ab-surec-kart-metin { margin: 0 0 16px; color: color-mix(in srgb, var(--hx-metin) 60%, transparent); }
@media (max-width: 1024px) {
    .ab-surec-ic { padding: 30px 0 60px; }
    .ab-surec-ust { position: relative; z-index: 5; width: 100%; margin: 0; }
    .ab-surec-serit { margin: -60px 0 20px; padding: 60px 30px 0; }
    .ab-surec-dekor img { width: 180px; }
    .ab-surec-kart { min-height: 200px; padding: 20px; }
    .ab-surec-kart-ust { margin-bottom: 30px; }
    .ab-surec-no { margin-bottom: 0; }
    .ab-bolum .ab-surec-kart-baslik { font-size: 20px; line-height: 28px; }
}
/* Tablet dikey: dört aşama tek satırda ~150px'e daralıyor → 2×2 (dikişler: üst üste binen 1px kenarlar) */
@media (min-width: 768px) and (max-width: 900px) {
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) > .ab-surec-kart { margin: 0; }
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) > .ab-surec-kart::after { display: none; }
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) > :nth-child(1) { border-radius: 20px 0 0 0; }
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) > :nth-child(2) { margin-left: -1px; border-radius: 0 20px 0 0; }
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) > :nth-child(3) { margin-top: -1px; border-radius: 0 0 0 20px; }
    .ab-surec-adimlar:has(> .ab-surec-kart:nth-child(4):last-child) > :nth-child(4) { margin: -1px 0 0 -1px; border-radius: 0 0 20px 0; }
}
@media (max-width: 767px) {
    .ab-surec { padding: 0; }
    .ab-surec-ic { padding: 20px 0 40px; }
    .ab-surec-ust { padding: 0 20px; }
    .ab-surec-serit { margin: -30px 0 0; padding: 50px 20px 20px; }
    .ab-surec-dekor { align-items: flex-start; padding-right: 5px; }
    .ab-surec-dekor img { width: 160px; }
    .ab-surec-adimlar { flex-direction: column; }
    .ab-surec-kart { min-height: 150px; }
    .ab-surec-kart + .ab-surec-kart { margin: -1px 0 0; }
    .ab-surec-kart + .ab-surec-kart::after { top: -1px; right: -1px; bottom: auto; left: -1px; width: auto; height: 1px; }
    .ab-surec-kart:first-child { border-radius: 20px 20px 0 0; }
    .ab-surec-kart:last-child { border-radius: 0 0 20px 20px; }
    .ab-surec-kart:only-child { border-radius: 20px; }
    .ab-surec-kart-ust { margin-bottom: 20px; }
    .ab-bolum .ab-surec-kart-baslik { font-size: 18px; line-height: 25.2px; }
    .ab-surec-btn { margin: 20px 20px 0; }
}

/* ─── Ortak kaydırıcı okları (Galeri, Yorumlar) — davranış: js/anasayfa-bolumler.js [data-ab-kaydirici] ─── */
.ab-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color .25s, color .25s;
}
.ab-ok svg { display: block; width: 14px; height: 14px; }
.ab-ok:focus-visible { outline: 2px solid var(--hx-vurgu); outline-offset: 2px; }
.ab-kaydirilamaz .ab-ok { visibility: hidden; }
@media (max-width: 1024px) {
    .ab-ok { width: 42px; height: 42px; }
    .ab-ok svg { width: 12px; height: 12px; }
}

/* ─── Galeri / Video (f797f77) — koyu→açık sistem zemini, yatay kart dizisi, pop-up ─────── */
.ab-galeri { position: relative; isolation: isolate; padding: var(--ab-dikey) 30px calc(var(--ab-dikey) + 90px); }
/* Koyu dikey geçiş: metin rengi → vurgu karışımı (referansta siyah → mor) */
.ab-galeri::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, var(--hx-metin) 0%, color-mix(in srgb, var(--hx-vurgu) 70%, var(--hx-metin)) 100%);
}
/* Altta açık zemine yumuşak geçiş: ortada yükselen parıltı + tam genişlik solma (sonraki açık bölüme bağlanır) */
.ab-galeri::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 520px;
    max-height: 70%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 52% 72% at 50% 100%, var(--hx-zemin) 30%, transparent 100%),
        linear-gradient(180deg, transparent 0%, var(--hx-zemin) 100%);
}
.ab-galeri-ic { display: flex; flex-direction: column; gap: 10px; max-width: 1600px; margin: 0 auto; }
.ab-galeri-ust { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 1280px; margin: 0 auto 35px; padding-right: 130px; }
.ab-galeri .ab-etiket,
.ab-galeri .ab-baslik,
.ab-galeri .ab-aciklama { color: var(--hx-zemin); }
.ab-galeri-ust .ab-aciklama { margin: 0 0 16px; }
/* Görünen kart sayısı: masaüstü 2,5 (üçüncü kart yarım — kaydırılabildiği belli olsun). Kart genişliği =
   (alan − görünen aralıklar) / adet; yarım kartlı düzende görünen aralık sayısı tam kart sayısı kadardır. */
.ab-galeri-kayan { position: relative; display: flex; flex-direction: column; --ab-adet: 2.5; --ab-aralik-sayi: 2; --ab-aralik: 20px; }
.ab-galeri-oklar { position: absolute; top: -105px; right: 0; z-index: 2; display: flex; gap: 11px; }
.ab-galeri .ab-ok { background: rgba(0, 0, 0, .6); color: #fff; }
.ab-galeri .ab-ok:hover,
.ab-galeri .ab-ok:focus-visible { background: var(--hx-yuzey); color: var(--hx-metin); }
/* Otomatik akış durdur / başlat (js: data-ab-dur) — durdurulunca oynat ikonu */
.ab-ok-dur svg { width: 16px; height: 16px; }
.ab-ok-dur .ab-ikon-dur,
.ab-ok-dur .ab-ikon-oynat { display: flex; }
.ab-ok-dur .ab-ikon-oynat,
.ab-ok-dur.ab-durduruldu .ab-ikon-dur { display: none; }
.ab-ok-dur.ab-durduruldu .ab-ikon-oynat { display: flex; }
.ab-galeri-liste {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--ab-aralik);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ab-galeri-liste::-webkit-scrollbar { display: none; }
.ab-galeri-oge { display: flex; flex: 0 0 calc((100% - var(--ab-aralik-sayi) * var(--ab-aralik)) / var(--ab-adet)); scroll-snap-align: start; }
.ab-galeri-kart,
.ab-galeri-kart:hover {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    aspect-ratio: 16 / 10;   /* yatay dikdörtgen */
    border-radius: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--hx-vurgu) 25%, var(--hx-metin));
    color: #fff;
    text-decoration: none !important;
    opacity: 1;
    cursor: pointer;
}
.ab-galeri-kart:focus-visible { outline: 2px solid var(--hx-zemin); outline-offset: 3px; }
.ab-galeri-medya { position: absolute; inset: 0; overflow: hidden; }
.ab-galeri-medya picture { display: block; width: 100%; height: 100%; }
.ab-galeri-resim {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(var(--ab-olcek, 1));
    transition: transform 1s cubic-bezier(0, .33, .07, 1.03);
}
/* YouTube hqdefault kapağı: 16:9 görüntü 4:3 karede, bantlar dışarıda kalsın (1 / 0.75) */
.ab-galeri-resim.ab-galeri-yt { transform: scale(calc(var(--ab-olcek, 1) * 1.34)); }
/* Üstten alta %50 koyu perde */
.ab-galeri-medya::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: .5;
    pointer-events: none;
}
/* Video: ortada cam oynat düğmesi (alt yazı panelinden uzak) */
.ab-galeri-oynat {
    position: absolute;
    top: 42%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    transition: background-color .3s, border-color .3s, color .3s, transform .3s;
}
.ab-galeri-oynat svg { display: block; width: 26px; height: 26px; margin-left: 3px; }
.ab-galeri-kart:hover .ab-galeri-oynat,
.ab-galeri-kart:focus-visible .ab-galeri-oynat { background: var(--hx-vurgu); border-color: var(--hx-vurgu); color: var(--hx-vurgu-metin); transform: scale(1.06); }
/* Alt yazı paneli: üstü maskeyle yumuşayan buzlu şerit */
.ab-galeri-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 80px;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}
.ab-galeri-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);
}
.ab-bolum .ab-galeri-kart-baslik {
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
}
.ab-bolum .ab-galeri-ozet { margin: 0; font-size: 14px; line-height: 19.6px; color: rgba(255, 255, 255, .96); transition: opacity .3s ease-in-out; }
.ab-galeri-alt { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 40px; }
/* Masaüstü: özet gizli, üzerine gelince panel büyür ve özet belirir */
@media (min-width: 1025px) {
    .ab-galeri-panel { max-height: 0; }
    .ab-bolum .ab-galeri-ozet { opacity: 0; }
    .ab-galeri-kart:hover .ab-galeri-panel,
    .ab-galeri-kart:focus-visible .ab-galeri-panel { max-height: none; }
    .ab-galeri-kart:hover .ab-galeri-ozet,
    .ab-galeri-kart:focus-visible .ab-galeri-ozet { opacity: 1; }
}
@media (max-width: 1024px) {
    .ab-galeri { padding: 60px 20px 170px; }
    .ab-galeri-ust { max-width: none; margin-bottom: 0; }
    .ab-galeri-oklar { top: -55px; }
    .ab-bolum .ab-galeri-kart-baslik { font-size: 18px; line-height: 25.2px; }
}
@media (max-width: 1023px) { .ab-galeri-kayan { --ab-adet: 1.5; --ab-aralik-sayi: 1; } }
@media (max-width: 767px) {
    .ab-galeri { padding: 40px 20px 150px; }
    .ab-galeri-ust { padding-right: 0; }
    .ab-galeri-kayan { --ab-adet: 1.15; --ab-aralik-sayi: 1; --ab-aralik: 12px; }
    .ab-galeri-oklar { position: static; order: 2; justify-content: flex-end; margin-top: 28px; }
    .ab-galeri-kart,
    .ab-galeri-kart:hover { aspect-ratio: 4 / 3; }
    .ab-galeri-resim { transform: none; }
    .ab-bolum .ab-galeri-kart-baslik { font-size: 17px; line-height: 23.8px; }
    .ab-galeri-alt { margin-top: 30px; }
}

/* ─── Müşteri Yorumları (4ff6035) — ortalanmış tek alıntı, kaydırınca beliren vurgu parıltısı ─── */
.ab-yorum-kutu { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 30vh; }
/* Parıltı: vurgu renginin hafif tonu, elips; kaydırma ilerlemesi %20→%40 arasında 0→1 belirir (JS yoksa hep görünür) */
.ab-yorum-parilti {
    position: absolute;
    inset: 0;
    background: radial-gradient(color-mix(in srgb, var(--hx-vurgu) 13%, transparent) 35%, transparent 70%);
    opacity: clamp(0, calc((var(--ab-ilerleme, 1) - .2) * 5), 1);
    transition: opacity 1s cubic-bezier(0, .33, .07, 1.03);
    pointer-events: none;
}
.ab-yorum-ic {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: var(--ab-dikey) 0;
}
.ab-bolum .ab-yorum-baslik { margin: 0 0 clamp(24px, 4vh, 48px); text-align: center; }
.ab-yorum-kayan { position: relative; width: 100%; }
.ab-yorum-liste {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ab-yorum-liste::-webkit-scrollbar { display: none; }
.ab-yorum-slayt { flex: 0 0 100%; padding: 0 30px; scroll-snap-align: start; scroll-snap-stop: always; }
.ab-yorum-icerik { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.ab-yorum-slayt .ab-yorum-icerik.ab-solarak { animation: hx-fade-in .75s ease .15s both; }
.ab-yorum-metin { width: 90%; margin: 0; padding: 0; border: 0; }
.ab-bolum .ab-yorum-metin p {
    margin: 0 0 1em;
    font-family: var(--hx-font-baslik);
    font-size: 34px;
    line-height: 1.3;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: var(--hx-metin);
}
.ab-yorum-kisi { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 10px; }
.ab-yorum-kisi picture { display: block; flex-shrink: 0; }
.ab-yorum-avatar { display: block; width: 55px; height: 55px; max-width: 55px; border-radius: 50%; object-fit: cover; object-position: center; }
.ab-yorum-ad { display: block; font-size: 16px; line-height: 20.8px; font-weight: 500; text-align: center; color: var(--hx-metin); }
.ab-yorum-unvan {
    display: block;
    font-size: 12px;
    line-height: 15.6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: color-mix(in srgb, var(--hx-metin) 60%, transparent);
}
/* Oklar: masaüstü/tablette kenarlarda, dikey ortanın 15px üstünde; mobilde altta ortalı çift */
.ab-yorum-oklar {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-15px);
    pointer-events: none;
}
.ab-yorum .ab-ok { pointer-events: auto; background: color-mix(in srgb, var(--hx-metin) 2%, var(--hx-zemin)); color: var(--hx-metin); }
.ab-yorum .ab-ok:hover,
.ab-yorum .ab-ok:focus-visible { background: var(--hx-metin); color: var(--hx-zemin); }
@media (max-width: 1024px) {
    .ab-yorum-kutu { min-height: 10vh; }
    .ab-yorum-ic { padding: 30px 0; }
    .ab-bolum .ab-yorum-baslik { margin-bottom: 30px; }
    .ab-yorum-liste { margin: 0 85px; }
    .ab-yorum-slayt { padding: 0 50px; }
    .ab-yorum-metin { width: 100%; }
    .ab-bolum .ab-yorum-metin p { font-size: 24px; }
}
@media (max-width: 767px) {
    .ab-yorum-ic { padding: 20px 0 30px; }
    .ab-bolum .ab-yorum-baslik { margin-bottom: 10px; }
    .ab-yorum-liste { margin: 0; }
    .ab-yorum-slayt { padding: 0; }
    .ab-bolum .ab-yorum-metin p { font-size: 20px; line-height: 1.1; }
    .ab-yorum-avatar { width: 50px; height: 50px; max-width: 50px; }
    .ab-yorum-oklar { position: static; justify-content: center; gap: 16px; margin-top: 11px; transform: none; }
}

/* ─── Sık Sorulan Sorular (bd45213) — solda başlık + oyuklu kart, sağda akordeon ─────────── */
.ab-sss { margin: var(--ab-dikey) 0; }
.ab-sss-satir { display: flex; gap: 10px 20px; }
.ab-sss-sol,
.ab-sss-sag { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.ab-sss-sol { justify-content: space-between; gap: 10px 20px; }
.ab-sss-ust { display: flex; flex-direction: column; gap: 10px; margin: 0 0 15px; padding: 0 0 16px; }
.ab-sss-kart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 360px;
    max-width: 100%;
    border-radius: 20px;
    background: linear-gradient(color-mix(in srgb, var(--hx-vurgu) 18%, var(--hx-yuzey)) 0%, var(--hx-yuzey) 100%);
}
.ab-sss-kart-ic { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 40px 40px 0; }
.ab-bolum .ab-sss-kart-baslik {
    display: flex;
    align-items: center;
    margin: 0 0 24px;
    font-family: var(--hx-font-baslik);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: var(--hx-metin);
}
.ab-sss-kart-ikon { display: inline-flex; flex: none; width: 43.75px; height: 35px; color: var(--hx-metin); }
.ab-sss-kart-ikon svg { display: block; width: 35px; height: 35px; }
.ab-sss-kart-baslik > span + span { padding-left: 5px; }
.ab-sss-kart-metin { margin: 0 0 16px; }
.ab-sss-cep {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 -1px -1px 0;
    padding: 58px 1px 1px 105px;
    background: var(--hx-zemin);
    clip-path: var(--hx-cep-sag-alt);
}
.ab-sss-sag { overflow: hidden; }
.ab-sss-liste { display: flex; flex-direction: column; gap: 10px; }
.ab-sss-oge { position: relative; display: flex; flex-direction: column; margin: 0; }
.ab-sss-soru {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 10px;
    padding: 1.6em;
    border: 1px solid color-mix(in srgb, var(--hx-metin) 10%, transparent);
    border-radius: 20px;
    list-style: none;
    cursor: pointer;
}
.ab-sss-soru::-webkit-details-marker { display: none; }
.ab-sss-soru::marker { content: ""; }
.ab-sss-soru:focus-visible { outline: 2px solid var(--hx-vurgu); outline-offset: 2px; }
.ab-bolum .ab-sss-soru-metin {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--hx-font-baslik);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--hx-metin) 88%, var(--hx-zemin));
}
/* Dolu üçgen ≈10px (ikonun çizim alanı kutunun ~%55'i → 18px kutu) */
.ab-sss-isaret { display: flex; flex: none; width: 18px; height: 18px; margin-right: -4px; color: color-mix(in srgb, var(--hx-metin) 88%, var(--hx-zemin)); }
.ab-sss-isaret svg { display: block; width: 18px; height: 18px; }
.ab-sss-oge[open] .ab-sss-isaret svg { transform: rotate(180deg); }
/* Açık: cevap paneli sorunun alt kenarının üstüne biner, ikisi tek çerçeveli kart gibi okunur */
.ab-sss-oge[open] > .ab-sss-soru { margin-block-end: -1.6em; }
.ab-sss-cevap {
    position: relative;
    padding: .8em 1.6em 1.6em;
    border: solid color-mix(in srgb, var(--hx-metin) 10%, transparent);
    border-width: 0 1px 1px;
    border-radius: 0 0 20px 20px;
    background: var(--hx-zemin);
    font-size: 16px;
    line-height: 22.4px;
    color: var(--hx-metin);
}
.ab-sss-cevap > :last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
    .ab-sss { margin: 0 0 60px; }
    .ab-sss-sol { position: sticky; top: 80px; align-self: flex-start; justify-content: flex-start; }
    .ab-sss-ust { margin: 0; }
    .ab-sss-kart { width: 300px; }
    .ab-sss-kart-ic { padding: 30px 20px 0; }
    .ab-bolum .ab-sss-kart-baslik { margin-bottom: 10px; font-size: 18px; line-height: 25.2px; }
    .ab-sss-soru { padding: 1.4em; }
    .ab-bolum .ab-sss-soru-metin { font-size: 18px; line-height: 25.2px; }
    .ab-sss-oge[open] > .ab-sss-soru { margin-block-end: -1.4em; }
    .ab-sss-cevap { padding: .8em 1.4em 1.4em; }
}
@media (max-width: 767px) {
    .ab-sss { margin: 0 0 40px; }
    .ab-sss-satir { flex-direction: column; }
    .ab-sss-sol { display: contents; }
    .ab-sss-ust { order: 0; padding: 0; }
    .ab-sss-sag { order: 1; flex: none; margin: 0 0 20px; }   /* sütun yönünde 0 tabanla çökmesin */
    .ab-sss-kart { order: 2; width: 100%; }
    .ab-bolum .ab-sss-kart-baslik { font-size: 17px; line-height: 23.8px; }
    .ab-sss-cep { width: 100%; }
    .ab-sss-soru { padding: 1.1em; }
    .ab-bolum .ab-sss-soru-metin { font-size: 17px; line-height: 23.8px; }
    .ab-sss-oge[open] > .ab-sss-soru { margin-block-end: -1.1em; }
    .ab-sss-cevap { padding: .8em 1.1em 1.1em; line-height: 24px; }
}

/* ─── Blog (0366493) — 3'lü ızgara: yazı kartı + ortada tanıtım kartı; sol alt oyuklu kutucuklar ─── */
.ab-blog {
    /* Kutucuk şekli: 20px köşeler + sol altta 94px'lik basamak ve S-eğri (referans vamtam-cp-bot-left-sm) */
    --ab-cep-sol-alt: polygon(calc(100% - 20px) 0px, calc(100% - 14.68px) 0.71px, calc(100% - 9.91px) 2.73px, calc(100% - 5.86px) 5.86px, calc(100% - 2.73px) 9.91px, calc(100% - 0.71px) 14.68px, 100% 20px, 100% calc(100% - 20px), calc(100% - 0.71px) calc(100% - 14.68px), calc(100% - 2.73px) calc(100% - 9.91px), calc(100% - 5.86px) calc(100% - 5.86px), calc(100% - 9.91px) calc(100% - 2.73px), calc(100% - 14.68px) calc(100% - 0.71px), calc(100% - 20px) 100%, 148.96px 100%, 141.74px calc(100% - 0.89px), 135.78px calc(100% - 3.3px), 130.74px calc(100% - 6.86px), 126.31px calc(100% - 11.17px), 122.16px calc(100% - 15.87px), 117.96px calc(100% - 20.57px), 113.39px calc(100% - 24.89px), 108.12px calc(100% - 28.45px), 101.84px calc(100% - 30.86px), 94.22px calc(100% - 31.75px), 22.23px calc(100% - 31.75px), 12.86px calc(100% - 33.1px), 6.59px calc(100% - 36.48px), 2.78px calc(100% - 40.87px), 0.82px calc(100% - 45.27px), 0.1px calc(100% - 48.65px), 0px calc(100% - 50px), 0px 20px, 0.71px 14.68px, 2.73px 9.91px, 5.86px 5.86px, 9.91px 2.73px, 14.68px 0.71px, 20px 0px);
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--hx-metin) 2%, var(--hx-zemin)) 100%);
}
.ab-blog-ic {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    grid-template-areas: "ust tumu" "izgara izgara";
    gap: 30px 20px;
    padding: var(--ab-dikey) 0;
}
.ab-blog-ust { grid-area: ust; display: flex; flex-direction: column; gap: 10px; }
.ab-blog-tumu { grid-area: tumu; display: flex; flex-direction: column; align-items: flex-end; padding-top: 35px; }
.ab-blog .hx-btn.ab-btn-acik:hover,
.ab-blog .hx-btn.ab-btn-acik:focus-visible { background: var(--hx-metin); border-color: var(--hx-metin); color: var(--hx-zemin); }
.ab-blog-izgara {
    grid-area: izgara;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ab-blog-oge { display: flex; flex-direction: column; min-width: 0; }
.ab-blog-kart { display: flex; flex-direction: column; flex: 1 1 auto; }
.ab-blog-gorsel,
.ab-blog-gorsel:hover {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px;
    margin: 0 0 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--hx-metin) 6%, var(--hx-zemin));
    clip-path: var(--ab-cep-sol-alt);
    text-decoration: none !important;
    opacity: 1;
}
.ab-blog-gorsel picture { position: absolute; inset: 0; display: block; }
.ab-blog-resim { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ab-blog-rozet {
    position: relative;
    align-self: flex-start;
    margin: 10px;
    padding: 6px 15px;
    border-radius: 20px;
    background: var(--hx-yuzey);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);
    font-size: 12px;
    line-height: 15.6px;
    text-transform: uppercase;
    color: var(--hx-metin);
}
.ab-blog-alt { display: flex; flex-direction: column; justify-content: space-between; flex: 1 0 auto; gap: 10px 20px; }
.ab-bolum .ab-blog-baslik {
    margin: 0 0 10px;
    font-family: var(--hx-font-baslik);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: normal;
    word-break: break-word;
}
.ab-blog-baslik a,
.ab-blog-baslik a:hover { color: var(--hx-metin); text-decoration: none; transition: color .3s; }
.ab-blog-baslik a:hover,
.ab-blog-baslik a:focus-visible { color: var(--hx-vurgu); }
.ab-blog-devam { padding: 0 0 5px 3px; transition: opacity .3s ease-in-out; }
/* Tanıtım kartı: açık zeminli görsel paralaks katmanda (kutucuğun %140'ı), içerik solda, ok düğmesi sağ altta */
.ab-blog-tanitim {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px;
    padding: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--hx-vurgu) 8%, var(--hx-yuzey));
    clip-path: var(--ab-cep-sol-alt);
}
.ab-blog-tanitim-zemin { position: absolute; inset: 0; overflow: hidden; }
.ab-blog-tanitim-katman {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140%;
    transform: translateY(calc(var(--ab-ilerleme, 0) * -28.5714%));
    transition: transform 1s cubic-bezier(0, .33, .07, 1.03);
}
.ab-blog-tanitim-katman picture { display: block; width: 100%; height: 100%; }
.ab-blog-tanitim-resim { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ab-blog-tanitim-icerik { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px 20px; padding: 20px; }
.ab-blog-tanitim-etiket {
    margin: 0 0 4vh;
    font-size: 12px;
    line-height: 15.6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hx-metin);
}
.ab-bolum .ab-blog-tanitim-baslik {
    margin: 0 0 10px;
    font-family: var(--hx-font-baslik);
    font-size: 34px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--hx-metin);
}
.ab-blog-tanitim-baslik a,
.ab-blog-tanitim-baslik a:hover { color: inherit; text-decoration: none; }
.ab-blog-tanitim-metin { margin: 0 0 16px; color: color-mix(in srgb, var(--hx-metin) 60%, transparent); }
.ab-blog-tanitim-ok,
.ab-blog-tanitim-ok:hover {
    position: relative;
    z-index: 2;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hx-metin);
    border-radius: 60px;
    background: var(--hx-metin);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    color: var(--hx-zemin);
    opacity: 1;
    transition: background-color .3s, border-color .3s, color .3s;
}
.ab-blog-tanitim-ok svg { display: block; width: 14px; height: 14px; }
.ab-blog-tanitim-ok:hover,
.ab-blog-tanitim-ok:focus-visible { background: var(--hx-vurgu); border-color: var(--hx-vurgu); color: var(--hx-vurgu-metin); }
/* Masaüstü: "Devamını oku" yer kaplar ama karta gelince görünür */
@media (min-width: 1025px) {
    .ab-blog-devam { opacity: 0; }
    .ab-blog-oge:hover .ab-blog-devam,
    .ab-blog-oge:focus-within .ab-blog-devam { opacity: 1; }
}
@media (max-width: 1024px) {
    .ab-blog { margin-bottom: 60px; }
    .ab-blog-ic { padding: 30px 0 50px; row-gap: 25px; }
    .ab-blog-gorsel,
    .ab-blog-tanitim { min-height: 30vw; }
    .ab-bolum .ab-blog-baslik { font-size: 18px; line-height: 25.2px; }
    .ab-blog-tanitim-icerik { padding: 10px; }
    .ab-blog-tanitim-etiket { margin-bottom: 20px; }
    .ab-bolum .ab-blog-tanitim-baslik { margin: 0; font-size: 24px; }
}
@media (max-width: 767px) {
    .ab-blog { margin-bottom: 40px; }
    .ab-blog-ic { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ust" "izgara" "tumu"; padding: 20px 0 40px; gap: 10px; }
    .ab-blog-ust { margin-bottom: 15px; }
    .ab-blog-tumu { align-items: flex-start; padding-top: 0; }
    .ab-blog-izgara { grid-template-columns: minmax(0, 1fr); }
    .ab-blog-gorsel,
    .ab-blog-tanitim { min-height: 90vw; }
    .ab-bolum .ab-blog-baslik { font-size: 17px; line-height: 23.8px; }
    .ab-blog-devam { display: none; }
    .ab-blog-tanitim-icerik { padding: 0; }
    .ab-blog-tanitim-etiket { margin-bottom: 10px; }
    .ab-bolum .ab-blog-tanitim-baslik { font-size: 20px; line-height: 1.1; }
    .ab-blog-tanitim-metin { line-height: 24px; }
}