/**
 * Jet Barkod. Hakkımızda sayfası.
 * ============================================================================
 *
 * Bu sayfa satış sayfası. Ziyaretçi buradan karar veriyor, o yüzden görsel
 * dilin tek işi güven vermek.
 *
 * RENK
 * Üç renk var: mürekkep siyahı, sıcak kağıt beyazı ve markanın mavisi
 * (#135bec, logodan geliyor). Kazanç bölümünde bir de soluk altın var.
 * İki renk arasında geçen degrade YOK. Degrade, bir tasarımın en ucuz
 * numarası; kullanılınca sayfa ısmarlama değil hazır şablon gibi duruyor.
 * Zemin gri değil kırık beyaz: mavi vurgunun yanında gri soğuk kalıyor,
 * kırık beyaz kağıt hissi veriyor.
 *
 * KAYMA YOK
 * Görünürlük animasyonlarının tamamı opacity ve transform. Hiçbir kural
 * yükseklik, genişlik, kenar boşluğu ya da yazı boyutu değiştirmiyor.
 * Bölümler daha görünmeden son yerlerini kaplıyor, sayfa boyu okurken
 * hiç oynamıyor.
 *
 * GERİ DÖNÜNCE
 * Sınıf iki yönlü: bölüm görüş alanından çıkınca kaldırılıyor, geri
 * gelince tekrar veriliyor.
 *
 * HAREKET TERCİHİ
 * `prefers-reduced-motion` açıksa bütün geçişler kapanıyor ve her şey
 * doğrudan son hâliyle duruyor. İçerik hiçbir koşulda gizli kalmıyor.
 * ============================================================================
 */

:root {
    /* Mürekkep */
    --hk-murekkep: #0a0d13;
    --hk-murekkep-2: #10151e;
    --hk-murekkep-cizgi: #1e2532;

    /* Kağıt */
    --hk-kagit: #ffffff;
    --hk-kagit-2: #f7f6f2;
    --hk-kagit-3: #f1efe9;
    --hk-cizgi: #e4e1d8;
    --hk-cizgi-koyu: #d6d2c6;

    /* Yazı */
    --hk-yazi: #131720;
    --hk-soluk: #5b6472;
    --hk-cok-soluk: #8b909a;
    --hk-ak: #f2f4f7;
    --hk-ak-soluk: #9aa5b6;

    /* Vurgu */
    --hk-mavi: #135bec;
    --hk-mavi-koyu: #0f47b8;
    --hk-mavi-soft: #eaf1fe;
    --hk-mavi-ak: #7ba7ff;
    --hk-yesil: #0e7c58;
    --hk-kirmizi: #b3231f;
    --hk-altin: #9a7434;

    --hk-en: 1120px;
    --hk-yumusak: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--hk-kagit);
    color: var(--hk-yazi);
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    font-feature-settings: 'kern' 1, 'liga' 1;
    /* Yan yana taşma olursa sayfa yatay kaymasın. */
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

::selection { background: #cddfff; color: var(--hk-yazi); }

/* ==========================================================================
   Ortak yerleşim
   ========================================================================== */

.kesit {
    position: relative;
    padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1.1rem, 4vw, 2rem);
}

.kesit--koyu {
    background: var(--hk-murekkep);
    color: var(--hk-ak);
}

.kesit--yumusak { background: var(--hk-kagit-2); }

/* Aydınlık ve koyu bölümler arasında saç teli kadar ayrım */
.kesit + .kesit:not(.kesit--koyu) { border-top: 1px solid var(--hk-cizgi); }

.ic {
    max-width: var(--hk-en);
    margin: 0 auto;
}

.ic--dar { max-width: 760px; }

/* --- Küçük başlık: önünde kısa bir çizgi var, majüskül, geniş harf arası --- */
.etiket {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    color: var(--hk-mavi-koyu);
    font-size: 0.71rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.etiket::before {
    content: '';
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.kesit--koyu .etiket { color: var(--hk-mavi-ak); }

.baslik {
    margin: 0 0 1rem;
    max-width: 20ch;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    font-weight: 660;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.baslik em {
    font-style: italic;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.baslik--kucuk {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    max-width: 26ch;
}

.giris {
    margin: 0;
    max-width: 58ch;
    color: var(--hk-soluk);
    font-size: 1.06rem;
    line-height: 1.66;
}

.kesit--koyu .giris { color: var(--hk-ak-soluk); }

.ustbosluk { margin-top: clamp(3rem, 6vw, 4.6rem); }

/* ==========================================================================
   Görünürlük animasyonu
   ========================================================================== */

.gir {
    opacity: 1;
    transform: none;
}

.js-hazir .gir {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity 620ms var(--hk-yumusak) calc(var(--sira, 0) * 65ms),
        transform 720ms var(--hk-yumusak) calc(var(--sira, 0) * 65ms);
    will-change: opacity, transform;
}

.js-hazir .gir--sol   { transform: translate3d(-26px, 0, 0); }
.js-hazir .gir--sag   { transform: translate3d(26px, 0, 0); }
.js-hazir .gir--olcek { transform: scale(0.96); }

.js-hazir .gir.gorunur {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Üst şerit
   ========================================================================== */

.ust {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    /* Çentik: bu sayfalar da `viewport-fit=cover` ile açılıyor. */
    padding: calc(0.85rem + env(safe-area-inset-top)) clamp(1.1rem, 4vw, 2rem) 0.85rem;
    background: rgb(255 255 255 / 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, background 200ms ease;
}

.ust.kaydi {
    border-bottom-color: var(--hk-cizgi);
    background: rgb(255 255 255 / 0.94);
}

.ust__marka {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--hk-yazi);
    font-weight: 660;
    font-size: 1rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.ust__logo { width: 26px; height: 26px; border-radius: 7px; }

.ust__bosluk { flex: 1; }

.ust__bag {
    display: none;
    color: var(--hk-soluk);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 160ms ease;
}

.ust__bag:hover { color: var(--hk-yazi); }

.ust__giris {
    padding: 0.48rem 1.05rem;
    border-radius: 999px;
    background: var(--hk-yazi);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 560;
    text-decoration: none;
    transition: background 160ms ease;
}

.ust__giris:hover { background: var(--hk-mavi); }

@media (min-width: 900px) {
    .ust__bag { display: inline; }
}

.ilerleme {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    z-index: 50;
    height: 2px;
    width: 100%;
    background: var(--hk-mavi);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* ==========================================================================
   Kahraman
   ========================================================================== */

.kahraman {
    position: relative;
    padding: clamp(3.4rem, 8vw, 6.5rem) clamp(1.1rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
    background: var(--hk-kagit);
    overflow: hidden;
}

/* Tek renkli, çok soluk bir ışık. İki renk arası geçiş yok. */
.kahraman::before {
    content: '';
    position: absolute;
    inset: -30% 20% auto -10%;
    height: 60%;
    background: radial-gradient(60% 60% at 30% 40%,
                rgb(19 91 236 / 0.055), rgb(19 91 236 / 0) 70%);
    pointer-events: none;
}

.kahraman__ic {
    position: relative;
    max-width: var(--hk-en);
    margin: 0 auto;
    display: grid;
    gap: clamp(2.4rem, 5vw, 3.6rem);
    align-items: center;
}

@media (min-width: 980px) {
    .kahraman__ic {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        gap: clamp(2.6rem, 5vw, 4.4rem);
    }
}

.kahraman__ad {
    margin: 0 0 1.1rem;
    font-size: clamp(2.4rem, 5.6vw, 4.05rem);
    font-weight: 670;
    line-height: 1.03;
    letter-spacing: -0.042em;
}

.kahraman__ad em {
    display: block;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--hk-mavi-koyu);
}

.kahraman__ozet {
    margin: 0 0 1.9rem;
    max-width: 46ch;
    color: var(--hk-soluk);
    font-size: 1.12rem;
    line-height: 1.6;
}

.kunye {
    margin: 0 0 2rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--hk-cizgi);
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.6rem;
}

.kunye > div { min-width: 0; }

.kunye dt {
    color: var(--hk-cok-soluk);
    font-size: 0.68rem;
    font-weight: 620;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.kunye dd {
    margin: 0.28rem 0 0;
    font-size: 0.94rem;
    font-weight: 540;
}

.kunye a { color: var(--hk-yazi); text-decoration: none; border-bottom: 1px solid var(--hk-cizgi-koyu); }
.kunye a:hover { border-bottom-color: var(--hk-mavi); color: var(--hk-mavi-koyu); }

/* Metin içi bağlantı. `.kunye a` ile aynı desen, künyeye bağlı olmadan. */
.bag { color: var(--hk-mavi-koyu); text-decoration: none; border-bottom: 1px solid var(--hk-mavi); }
.bag:hover { color: var(--hk-yazi); border-bottom-color: var(--hk-yazi); }
.kesit--koyu .bag { color: var(--hk-mavi-ak); border-bottom-color: var(--hk-mavi-ak); }
.kesit--koyu .bag:hover { color: var(--hk-ak); border-bottom-color: var(--hk-ak); }

/* --- Düğmeler --- */

.dugmeler { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.97rem;
    font-weight: 570;
    letter-spacing: -0.008em;
    text-decoration: none;
    cursor: pointer;
    transition: background 170ms ease, border-color 170ms ease, transform 170ms ease;
}

.dugme--ana {
    background: var(--hk-yazi);
    color: #fff;
}

.dugme--ana:hover { background: var(--hk-mavi); transform: translateY(-1px); }

.dugme--sade {
    background: transparent;
    border-color: var(--hk-cizgi-koyu);
    color: var(--hk-yazi);
}

.dugme--sade:hover { border-color: var(--hk-yazi); transform: translateY(-1px); }

.dugme:active { transform: translateY(0); }

/* ==========================================================================
   Rakam şeridi
   ========================================================================== */

/* Kutular arası çizgi ızgara boşluğundan geliyor: kenarlık üst üste
   binmiyor, hiçbir ölçü animasyonla oynamıyor. */
.serit {
    max-width: var(--hk-en);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hk-cizgi);
    border: 1px solid var(--hk-cizgi);
    border-radius: 14px;
    overflow: hidden;
}

.serit__kutu {
    padding: 1.4rem 1.3rem;
    background: var(--hk-kagit);
}

@media (min-width: 720px) {
    .serit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.serit__sayi {
    display: block;
    font-size: clamp(1.7rem, 3.4vw, 2.35rem);
    font-weight: 640;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.serit__not {
    display: block;
    margin-top: 0.35rem;
    color: var(--hk-soluk);
    font-size: 0.86rem;
    line-height: 1.45;
}

.seritkap {
    padding: 0 clamp(1.1rem, 4vw, 2rem) clamp(3rem, 6vw, 4.6rem);
    background: var(--hk-kagit);
}

/* ==========================================================================
   Kahraman sahnesi: gerçek arama
   ========================================================================== */

.arama {
    position: relative;
    border: 1px solid var(--hk-cizgi);
    border-radius: 16px;
    background: var(--hk-kagit);
    box-shadow: 0 30px 60px -42px rgb(10 13 19 / 0.4);
    overflow: hidden;
}

.arama__tepe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--hk-cizgi);
    background: var(--hk-kagit-2);
}

.arama__nokta {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hk-cizgi-koyu);
    flex: none;
}

.arama__yol {
    margin-left: 0.4rem;
    color: var(--hk-cok-soluk);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.arama__kutu {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--hk-cizgi);
}

.arama__kutu svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    color: var(--hk-cok-soluk);
}

.arama__yazi {
    flex: 1;
    min-width: 0;
    font-size: 0.98rem;
    color: var(--hk-yazi);
    white-space: nowrap;
    overflow: hidden;
}

.arama__imlec {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    margin-left: 1px;
    background: var(--hk-mavi);
    vertical-align: -0.18em;
    animation: hk-imlec 1.05s steps(2, start) infinite;
}

@keyframes hk-imlec { 50% { opacity: 0; } }

.arama__sayac {
    flex: none;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    background: var(--hk-mavi-soft);
    color: var(--hk-mavi-koyu);
    font-size: 0.74rem;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    /* Sonuç sayısı bir haneden iki haneye çıkınca rozet genişlemesin. */
    min-width: 4.6rem;
    text-align: center;
}

/* Liste yüksekliği sabit: sonuç geldikçe sayfa oynamıyor. */
.arama__liste {
    height: 306px;
    overflow: hidden;
    position: relative;
}

.arama__kaydir {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.arama__kaydir::-webkit-scrollbar { display: none; }

.urun {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.72rem 1.1rem;
    border-bottom: 1px solid var(--hk-kagit-3);
}

.urun:last-child { border-bottom: 0; }

.urun__gorsel {
    width: 54px;
    height: 54px;
    border-radius: 9px;
    border: 1px solid var(--hk-cizgi);
    background: var(--hk-kagit-2);
    object-fit: contain;
    padding: 3px;
}

.urun__ad {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 570;
    letter-spacing: -0.012em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urun__alt {
    margin: 0.16rem 0 0;
    color: var(--hk-cok-soluk);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.urun__kod {
    justify-self: end;
    text-align: right;
}

.urun__kod svg { height: 34px; width: auto; }

.urun__rakam {
    display: block;
    margin-top: 0.1rem;
    color: var(--hk-soluk);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

@media (max-width: 460px) {
    .urun { grid-template-columns: 44px minmax(0, 1fr); }
    .urun__gorsel { width: 44px; height: 44px; }
    .urun__kod { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* ==========================================================================
   SVG sahneler
   ========================================================================== */

.sahne {
    position: relative;
    border: 1px solid var(--hk-cizgi);
    border-radius: 14px;
    background: var(--hk-kagit);
    overflow: hidden;
}

.sahne svg { display: block; width: 100%; height: 100%; }

.kesit--koyu .sahne {
    border-color: var(--hk-murekkep-cizgi);
    background: var(--hk-murekkep-2);
}

.s-kagit { fill: #fff; stroke: var(--hk-cizgi-koyu); stroke-width: 1.2; }
.s-yumusak { fill: var(--hk-kagit-2); }
.s-cizgi { stroke: var(--hk-cizgi); stroke-width: 1; fill: none; }
.s-vurgu { fill: var(--hk-mavi); }
.s-vurgu-soft { fill: var(--hk-mavi-soft); }
.s-iyi { fill: var(--hk-yesil); }
.s-kotu { fill: var(--hk-kirmizi); }
.s-uyari { fill: var(--hk-altin); }
.s-yazi { font-family: inherit; font-size: 7px; fill: var(--hk-soluk); }
.s-yazi--kalin { font-weight: 660; fill: var(--hk-yazi); }
.s-yazi--ak { fill: #fff; font-weight: 600; }
.s-cubuk { fill: var(--hk-yazi); }

/* ==========================================================================
   Akış
   ========================================================================== */

.akis {
    margin-top: 2.8rem;
    display: grid;
    gap: 1px;
    background: var(--hk-cizgi);
    border-top: 1px solid var(--hk-cizgi);
    border-bottom: 1px solid var(--hk-cizgi);
}

@media (min-width: 780px) {
    .akis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.akis__adim {
    padding: 1.5rem 1.3rem 1.6rem;
    background: var(--hk-kagit-2);
}

.akis__no {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--hk-mavi);
    font-size: 0.74rem;
    font-weight: 660;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

.akis__ad {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 610;
    letter-spacing: -0.018em;
}

.akis__not {
    margin: 0;
    color: var(--hk-soluk);
    font-size: 0.87rem;
    line-height: 1.5;
}

.akis__sonuc {
    margin: 1.8rem 0 0;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    max-width: 62ch;
    color: var(--hk-soluk);
    font-size: 0.98rem;
}

.akis__sonuc strong { color: var(--hk-yazi); font-weight: 620; }

.akis__sonuc > span:first-child {
    flex: none;
    color: var(--hk-mavi);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ==========================================================================
   Kartlar
   ========================================================================== */

.izgara {
    margin-top: 2.8rem;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) { .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kart {
    padding: 1.4rem 1.4rem 1.5rem;
    border: 1px solid var(--hk-cizgi);
    border-radius: 14px;
    background: var(--hk-kagit);
    transition: border-color 200ms ease, transform 200ms ease;
}

.kart:hover {
    border-color: var(--hk-cizgi-koyu);
    transform: translateY(-2px);
}

.kesit--koyu .kart {
    border-color: var(--hk-murekkep-cizgi);
    background: var(--hk-murekkep-2);
}

.kesit--koyu .kart:hover { border-color: #2c3546; }

.kart__cizim {
    margin: -0.3rem -0.3rem 1.1rem;
    border-radius: 10px;
    background: var(--hk-kagit-2);
    overflow: hidden;
}

.kesit--koyu .kart__cizim { background: #0d1119; }

.kart__cizim svg { display: block; width: 100%; height: 100%; }

.kart__ad {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    font-weight: 620;
    letter-spacing: -0.02em;
}

.kesit--koyu .kart__ad { color: var(--hk-ak); }

.kart__not {
    margin: 0;
    color: var(--hk-soluk);
    font-size: 0.9rem;
    line-height: 1.55;
}

.kesit--koyu .kart__not { color: var(--hk-ak-soluk); }

/* ==========================================================================
   Eski / yeni karşılaştırma tablosu
   ========================================================================== */

.karsi {
    margin-top: 2.8rem;
    border: 1px solid var(--hk-cizgi);
    border-radius: 14px;
    overflow: hidden;
}

.karsi__bas,
.karsi__satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
    .karsi__bas,
    .karsi__satir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.karsi__bas { background: var(--hk-kagit-2); }

.karsi__basyazi {
    padding: 0.85rem 1.3rem;
    color: var(--hk-cok-soluk);
    font-size: 0.72rem;
    font-weight: 640;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hk-cizgi);
}

.karsi__basyazi + .karsi__basyazi { color: var(--hk-mavi-koyu); }

@media (min-width: 760px) {
    .karsi__basyazi + .karsi__basyazi { border-left: 1px solid var(--hk-cizgi); }
}

.karsi__satir + .karsi__satir { border-top: 1px solid var(--hk-cizgi); }

.karsi__hucre {
    padding: 1.2rem 1.3rem;
    color: var(--hk-soluk);
    font-size: 0.93rem;
    line-height: 1.55;
}

.karsi__hucre--yeni {
    background: #fbfcfe;
    color: var(--hk-yazi);
}

@media (min-width: 760px) {
    .karsi__hucre--yeni { border-left: 1px solid var(--hk-cizgi); }
}

.karsi__im {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    vertical-align: -0.18em;
}

.karsi__im--eski { background: #f7e5e4; color: var(--hk-kirmizi); }
.karsi__im--yeni { background: #dcf1e8; color: var(--hk-yesil); }
.karsi__im svg { width: 0.7rem; height: 0.7rem; }

/* ==========================================================================
   Harf notu merdiveni
   ========================================================================== */

.merdiven {
    margin-top: 2.6rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: end;
    height: 250px;
}

.basamak {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    text-align: center;
}

.basamak__sutun {
    height: 168px;
    border-radius: 5px 5px 0 0;
    background: var(--hk-mavi);
    transform-origin: 50% 100%;
    transform: scaleY(var(--oran, 1));
    transition: transform 900ms var(--hk-yumusak) calc(var(--sira, 0) * 90ms);
}

.js-hazir .basamak__sutun { transform: scaleY(0.05); }

.basamak__sutun--dusuk { background: #3a4353; }
.basamak__sutun--orta { background: #2f6ad6; }
.basamak__sutun--yuksek { background: var(--hk-altin); }

.js-hazir .merdiven.gorunur .basamak__sutun { transform: scaleY(var(--oran, 1)); }

.basamak__harf {
    margin: 0.7rem 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 660;
    letter-spacing: -0.02em;
}

.basamak__not {
    margin: 0;
    color: var(--hk-cok-soluk);
    font-size: 0.74rem;
    line-height: 1.35;
    min-height: 2.7em;
}

.kesit--koyu .basamak__harf { color: var(--hk-ak); }
.kesit--koyu .basamak__not { color: #78818f; }

/* ==========================================================================
   Kazanç cepheleri
   ========================================================================== */

.sayilar {
    margin-top: 2.8rem;
    display: grid;
    gap: 1px;
    background: var(--hk-murekkep-cizgi);
    border-top: 1px solid var(--hk-murekkep-cizgi);
    border-bottom: 1px solid var(--hk-murekkep-cizgi);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) { .sayilar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sayi {
    padding: 1.7rem 1.4rem 1.8rem;
    background: var(--hk-murekkep);
}

.sayi__ust {
    margin: 0 0 0.75rem;
    color: var(--hk-mavi-ak);
    font-size: 0.7rem;
    font-weight: 640;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.sayi__ad {
    margin: 0 0 0.4rem;
    color: var(--hk-ak);
    font-size: 1.28rem;
    font-weight: 640;
    letter-spacing: -0.026em;
}

.sayi__not {
    margin: 0;
    color: var(--hk-ak-soluk);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ==========================================================================
   Modül satırları
   ========================================================================== */

.modul {
    display: flex;
    gap: 0.95rem;
    padding: 1.35rem 1.35rem 1.45rem;
    border: 1px solid var(--hk-cizgi);
    border-radius: 14px;
    background: var(--hk-kagit);
    transition: border-color 200ms ease, transform 200ms ease;
}

.modul:hover { border-color: var(--hk-cizgi-koyu); transform: translateY(-2px); }

.modul__ikon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--ik, #135bec) 24%, transparent);
    background: color-mix(in srgb, var(--ik, #135bec) 8%, #fff);
    color: var(--ik, #135bec);
}

.modul__ikon svg { width: 1.15rem; height: 1.15rem; }

.modul__ad {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 620;
    letter-spacing: -0.02em;
}

.modul__not {
    margin: 0;
    color: var(--hk-soluk);
    font-size: 0.89rem;
    line-height: 1.55;
}

/* ==========================================================================
   Kapanış
   ========================================================================== */

.kapanis {
    padding: clamp(2.8rem, 6vw, 4.4rem) clamp(1.4rem, 4vw, 3rem);
    border-radius: 20px;
    background: var(--hk-murekkep);
    color: var(--hk-ak);
    text-align: center;
}

.kapanis__ad {
    margin: 0 auto 0.9rem;
    max-width: 22ch;
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 660;
    line-height: 1.12;
    letter-spacing: -0.032em;
}

.kapanis__ad em {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--hk-mavi-ak);
}

.kapanis__not {
    margin: 0 auto 1.9rem;
    max-width: 52ch;
    color: var(--hk-ak-soluk);
    font-size: 1rem;
    line-height: 1.6;
}

.kapanis .dugme--ana { background: #fff; color: var(--hk-murekkep); }
.kapanis .dugme--ana:hover { background: var(--hk-mavi); color: #fff; }

.kapanis .dugme--sade {
    border-color: #2b3444;
    color: var(--hk-ak);
}

.kapanis .dugme--sade:hover { border-color: #566173; }

/* ==========================================================================
   Dip
   ========================================================================== */

.dip {
    padding: 2.2rem clamp(1.1rem, 4vw, 2rem);
    border-top: 1px solid var(--hk-cizgi);
    background: var(--hk-kagit-2);
}

.dip__ic {
    max-width: var(--hk-en);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
    color: var(--hk-cok-soluk);
    font-size: 0.85rem;
}

.dip__ic a { color: var(--hk-soluk); text-decoration: none; }
.dip__ic a:hover { color: var(--hk-mavi-koyu); }
.dip__bosluk { flex: 1; }

/* ==========================================================================
   Sahne içi hareketler
   ========================================================================== */

.js-hazir .oynat [class^='c-'],
.js-hazir .oynat [class*=' c-'] { animation-play-state: paused; }

.js-hazir .oynat.gorunur [class^='c-'],
.js-hazir .oynat.gorunur [class*=' c-'] { animation-play-state: running; }

.c-tarayici {
    animation: hk-tara 2.6s var(--hk-yumusak) infinite;
}

@keyframes hk-tara {
    0%, 12% { transform: translateY(0); opacity: 0; }
    18% { opacity: 0.9; }
    68% { transform: translateY(18px); opacity: 0.9; }
    76%, 100% { transform: translateY(18px); opacity: 0; }
}

.c-leke {
    transform-box: fill-box;
    transform-origin: center;
    animation: hk-leke 3.4s ease-in-out infinite;
}

@keyframes hk-leke {
    0%, 100% { transform: scale(0.7); opacity: 0.18; }
    50% { transform: scale(1.05); opacity: 0.4; }
}

.c-kaybolan { animation: hk-kaybol 3s ease-in-out infinite; }
@keyframes hk-kaybol { 0%, 34% { opacity: 1; } 46%, 100% { opacity: 0; } }

.c-bosluk { opacity: 0; animation: hk-bosluk 3s ease-in-out infinite; }
@keyframes hk-bosluk { 0%, 40% { opacity: 0; } 52%, 100% { opacity: 1; } }

.c-uyusmaz {
    animation: hk-uyusmaz 2.8s ease-in-out infinite;
}

@keyframes hk-uyusmaz {
    0%, 30% { opacity: 0; transform: scale(0.7); }
    42%, 88% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.c-donen {
    animation: hk-don 1.1s linear infinite;
}

@keyframes hk-don { to { transform: rotate(360deg); } }

.c-bosSonuc { opacity: 0; animation: hk-bossonuc 3.6s ease-in-out infinite; }
@keyframes hk-bossonuc { 0%, 45% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }

.c-yirtik-sol {
    transform-box: fill-box;
    transform-origin: right center;
    animation: hk-yirtik-sol 3.2s ease-in-out infinite;
}

@keyframes hk-yirtik-sol {
    0%, 30% { transform: none; }
    55%, 90% { transform: translateX(-5px) rotate(-4deg); }
    100% { transform: none; }
}

.c-yirtik-sag {
    transform-box: fill-box;
    transform-origin: left center;
    animation: hk-yirtik-sag 3.2s ease-in-out infinite;
}

@keyframes hk-yirtik-sag {
    0%, 30% { transform: none; }
    55%, 90% { transform: translateX(5px) rotate(4deg); }
    100% { transform: none; }
}

.c-silinen { animation: hk-silin 3.2s ease-in-out infinite; }
@keyframes hk-silin { 0%, 32% { opacity: 1; } 58%, 92% { opacity: 0.22; } 100% { opacity: 1; } }

.c-yuruyen { animation: hk-yuru 4.2s ease-in-out infinite; }
@keyframes hk-yuru {
    0%, 8% { transform: translateX(0); }
    58%, 74% { transform: translateX(118px); }
    100% { transform: translateX(0); }
}

.c-imlec { animation: hk-imlec 1.05s steps(2, start) infinite; }

.c-sonucKart { animation: hk-belir 3.4s ease-in-out infinite; }
@keyframes hk-belir {
    0%, 22% { opacity: 0; }
    34%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================================================
   Hareket tercihi
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .gir,
    .js-hazir .gir {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .basamak__sutun,
    .js-hazir .basamak__sutun {
        transform: scaleY(var(--oran, 1)) !important;
        transition: none !important;
    }

    [class^='c-'],
    [class*=' c-'],
    .arama__imlec { animation: none !important; }
}