/* ===================================
    İmgesel Kitap Dağıtım — marka katmanı
    Crafto e-learning demosu üzerine bindirilir.
    Yükleme sırası: style.css → responsive.css → elearning.css → imgesel.css
====================================== */

:root {
    --base-color: #d25a0e;          /* İmgesel turuncu (Turuncu markasıyla hizalı) */
    --dark-gray: #1d2a3a;           /* koyu lacivert — metin ve koyu zeminler */
    --medium-gray: #5c6675;
    --extra-medium-gray: #e4e2dd;
    --yellow: #d25a0e;              /* şablonun sarı referanslarını turuncuya çevirir */
    --tranquil: #f7f4ef;
}

/* şablonun yeşil gradyanları → İmgesel lacivert/turuncu */
.bg-gradient-aztec-green {
    background-image: linear-gradient(to right top, #1d2a3a, #22303f, #263644, #2b3c4a, #30424f) !important;
}
.bg-gradient-tranquil-white {
    background-image: linear-gradient(to bottom, #f7f4ef, #ffffff) !important;
}
.bg-tranquil { background-color: var(--tranquil) !important; }
.bg-dark-gray { background-color: var(--dark-gray) !important; }

/* Türkçe tipografi: başlıklarda harf aralığını biraz gevşet (İ/Ğ/Ş okunurluğu) */
h1, h2, h3, .alt-font { letter-spacing: -0.01em; }

/* marka duvarı — hero sağ blok */
.imgesel-marka-duvari {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.imgesel-marka-duvari .kutu {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.imgesel-marka-duvari .kutu:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.imgesel-marka-duvari .kutu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imgesel-marka-duvari .kutu .yazi {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: var(--dark-gray);
    text-align: center;
}
@media (max-width: 991px) {
    .imgesel-marka-duvari { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .imgesel-marka-duvari .kutu .yazi { font-size: 12px; }
}
@media (max-width: 575px) {
    .imgesel-marka-duvari { grid-template-columns: repeat(3, 1fr); }
}

/* katalog kartı — logo alanı */
.imgesel-marka-kart .logo-alani {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 26px;
    border-bottom: 1px solid var(--extra-medium-gray);
}
.imgesel-marka-kart .logo-alani img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imgesel-marka-kart .logo-alani .yazi-logo {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 26px;
    color: var(--dark-gray);
    text-align: center;
    letter-spacing: -0.02em;
}

/* kademe rozeti */
.kademe-rozet {
    display: inline-block;
    background: rgba(210, 90, 14, .12);
    color: var(--base-color);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 5px 11px;
    border-radius: 99px;
    margin: 0 5px 5px 0;
}

/* WhatsApp yüzen düğme */
.imgesel-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transition: transform .25s ease;
}
.imgesel-wa:hover { color: #fff; transform: scale(1.08); }

/* hero — şablonun yeşil fotoğrafı yerine İmgesel lacivert gradyanı */
.imgesel-hero {
    background-image: linear-gradient(135deg, #16212e 0%, #1d2a3a 45%, #24354a 100%);
    background-size: cover;
}

/* Türkçe alt uzantılar (ğ, ş, ç, y, j) kırpılmasın */
h1.alt-font, .imgesel-hero h1 { line-height: 1.14 !important; }
h2.alt-font { line-height: 1.2 !important; }
h1, h2, h3, h4, h5 { padding-bottom: 0.04em; }

/* hero içeriği üst menüden nefes alsın */
@media (min-width: 992px) {
    .imgesel-hero > .container { padding-top: 70px; }
}