/* ═══════════════════════════════════════════════════════════════════════════
   ÜST DÜZEN — header + mega menü + hero + açılış ekranı
   Kaynak ölçüler referans tasarımdan (1440px referans) getComputedStyle ile alındı.
   Renkler site paletinden türetilir (--accent → Görünüm ayarı), fontlar gövde/başlık
   fontundan gelir (Görünüm font çifti h1-h6 ve body'ye uygulanır). Davranış: js/header-hero.js
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --hh-accent: var(--accent, #0071e3);
    /* referans brown-500 (#35221a) / brown-600 karşılığı: vurgu rengine çalan çok koyu zemin */
    --hh-dark: color-mix(in srgb, var(--hh-accent) 16%, #150d0a);
    --hh-dark-2: color-mix(in srgb, var(--hh-accent) 10%, #0f0906);
    /* referans creme-400 (#e3c1ad) / creme-50 (#fcf3ed) karşılığı: vurguya çalan açık ton */
    --hh-cream: color-mix(in srgb, var(--hh-accent) 9%, #fff);
    --hh-cream-strong: color-mix(in srgb, var(--hh-accent) 4%, #fff);
    --hh-cream-40: color-mix(in srgb, var(--hh-cream) 40%, transparent);
    --hh-cream-30: color-mix(in srgb, var(--hh-cream) 30%, transparent);
    --hh-glass: color-mix(in srgb, var(--hh-dark) 58%, transparent);
    --hh-glass-strong: color-mix(in srgb, var(--hh-dark) 80%, transparent);
    --hh-ease: cubic-bezier(.19, 1, .22, 1);
    --hh-ease-2: cubic-bezier(.215, .61, .355, 1);
    --hh-bar-w: clamp(800px, 705.932px + 24.12vw, 1116px);
    --hh-label: .74rem;            /* 11.84px */
}

.hh-ico { display: inline-block; flex: 0 0 auto; }

/* ─── HEADER ──────────────────────────────────────────────────────────────── */

.hh-header {
    position: fixed;
    top: var(--ann-h, 0px);
    left: 0;
    right: 0;
    z-index: 1040;
    padding: 6px 20px 0;
    pointer-events: none;
    color: var(--hh-cream-strong);
}
.hh-header a, .hh-header button { pointer-events: auto; }

.hh-header-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 94px;
}

.hh-logo {
    display: inline-flex;
    align-items: center;
    height: 64px;
    text-decoration: none !important;
    transition: opacity .4s var(--hh-ease);
}
.hh-logo img { max-height: 110px; width: auto; max-width: 220px; display: block; }
.hh-logo-text { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; color: var(--text, #1d1d1f); }

/* Orta çubuk — Referans: width clamp(800..1116), 46px hap, 20px iç boşluk, öğe aralığı 30.4px */
.hh-nav {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: var(--hh-bar-w);
    max-width: calc(100% - 720px);
    pointer-events: none;
}
.hh-bar {
    position: relative;
    height: 46px;
    margin-top: 24px;
    padding: 0 20px;
    border-radius: 23px;
    background: var(--hh-glass);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.hh-bar-list {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: max(21.2px, 21.2px + .64vw);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity .9s var(--hh-ease), transform .9s var(--hh-ease);
}
.hh-bar-item { position: relative; display: flex; align-items: center; }
.hh-bar-btn, .hh-bar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    font: inherit;
}
.hh-bar-btn::before, .hh-bar-link::before { content: ""; position: absolute; inset: -20px; }
.hh-bar-label {
    font-size: var(--hh-label);
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--hh-cream-strong);
}
.hh-bar-link:hover, .hh-bar-btn:hover { color: var(--hh-cream-strong); opacity: 1; }
.hh-ico-chev { transition: transform .35s var(--hh-ease); }
.hh-bar-item.is-open .hh-ico-chev { transform: rotate(180deg); }

/* Üzerine gelinen öğenin arkasında kayan açık hap (referans: menu-background-hover-border) */
.hh-bar-hover {
    position: absolute;
    top: 50%;
    left: 0;
    height: 34px;
    width: 0;
    border-radius: 17px;
    background: color-mix(in srgb, #fff 14%, transparent);
    transform: translateY(-50%);
    opacity: 0;
    transition: left .35s var(--hh-ease), width .35s var(--hh-ease), opacity .25s ease;
    pointer-events: none;
}
.hh-bar-hover.is-on { opacity: 1; }

/* Mega panel — referans sub-menu: tam çubuk genişliği, 292px, 19px köşe, cam */
.hh-panel {
    /* Genişlik hap menüye bağlı değil: 3'lü kart ızgarası (3×252 + 2×24 aralık + 2×25 iç boşluk) kadar, hap altına ortalanır */
    position: absolute;
    left: 50%;
    width: min(854px, calc(100vw - 40px));
    top: 94px;
    min-height: 292px;
    border-radius: 19px;
    background: var(--hh-glass-strong);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px) scaleY(.5);
    transform-origin: top;
    transition: opacity .5s var(--hh-ease), transform .5s var(--hh-ease), visibility .5s;
    pointer-events: none;
}
.hh-panel.is-open { opacity: 1; visibility: visible; transform: translateX(-50%); pointer-events: auto; }
.hh-panel-top { flex: 1 1 auto; display: grid; padding: 25px 25px 22px; }
.hh-panel-view {
    grid-area: 1 / 1;
    display: flex;
    justify-content: center;
    gap: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.hh-panel-view.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hh-panel-cards {
    /* 3'lü ızgara (satır başına 3 kart), sağa yaslı; kart genişliği = .hh-card-media genişliği */
    display: grid;
    grid-template-columns: repeat(3, clamp(192px, 174.138px + 4.58vw, 252px));
    justify-content: end;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(10px);
    opacity: 0;
    transition: opacity .5s var(--hh-ease), transform .5s var(--hh-ease);
}
.hh-panel-view.is-active .hh-panel-cards { opacity: 1; transform: none; transition-delay: .1s; }
.hh-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--hh-cream-strong);
    text-decoration: none !important;
}
.hh-card:hover { color: var(--hh-cream-strong); opacity: 1; }
.hh-card-media {
    display: block;
    width: clamp(192px, 174.138px + 4.58vw, 252px);
    height: clamp(128px, 117.86px + 2.6vw, 162px);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, #fff 8%, transparent);
    transform: translateZ(0) scale(1);
    transition: transform .75s var(--hh-ease);
}
.hh-card-media img, .hh-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kategori görselleri (saydam zeminli paket) kırpılmaz: contain + küçük iç boşluk */
.hh-card-media img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.hh-card-title {
    font-size: .975rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
    transition: transform .75s var(--hh-ease);
}
.hh-card:hover .hh-card-media { transform: translateZ(0) scale(1.05); }
.hh-card:hover .hh-card-title { transform: translateY(4px); }
.hh-panel-bottom {
    height: 52px;
    padding: 12px 25px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid color-mix(in srgb, var(--hh-cream) 12%, transparent);
    opacity: 0;
    transform: translateY(10px);
    transition: none;
}
.hh-panel.is-open .hh-panel-bottom { opacity: 1; transform: none; transition: opacity .5s var(--hh-ease) .25s, transform .5s var(--hh-ease) .25s; }
.hh-socials { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hh-socials a {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--hh-cream-strong);
    color: var(--hh-dark);
    display: grid;
    place-items: center;
    font-size: 13px;
    opacity: .7;
    text-decoration: none !important;
    transition: opacity .5s var(--hh-ease), transform .5s var(--hh-ease);
}
.hh-socials a:hover { opacity: 1; transform: translateY(-2px); color: var(--hh-dark); }
.hh-trademark { font-size: var(--hh-label); font-weight: 500; letter-spacing: .03em; opacity: .7; white-space: nowrap; }

/* Sağ grup: dil hapı + (mobil) MENÜ */
.hh-right { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.hh-pill {
    height: 44px;
    padding: 0 14px;
    border-radius: 60px;
    border: 0;
    background: var(--hh-glass);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: var(--hh-cream-strong);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: var(--hh-label);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease;
}
.hh-pill:hover { background: color-mix(in srgb, var(--hh-dark) 72%, transparent); color: var(--hh-cream-strong); }
.hh-pill-icon { width: 44px; padding: 0; justify-content: center; }
.hh-lang { position: relative; }
.hh-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 16px;
    background: var(--bg, #fbfbfd);
    color: var(--text, #1d1d1f);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transform: scale(.95) translateY(-10px);
    transform-origin: top right;
    transition: opacity .35s var(--hh-ease), transform .35s var(--hh-ease), visibility .35s;
    z-index: 5;
}
.hh-lang.is-open .hh-lang-menu { opacity: 1; visibility: visible; transform: none; }
.hh-lang.is-open .hh-ico-chev { transform: rotate(180deg); }
.hh-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none !important;
    transition: background .2s ease;
}
.hh-lang-item:hover { background: color-mix(in srgb, var(--hh-accent) 8%, var(--bg, #fff)); color: inherit; opacity: 1; }
.hh-lang-item.is-active { background: color-mix(in srgb, var(--hh-accent) 14%, var(--bg, #fff)); }
.hh-lang-flag { font-size: 1.1rem; line-height: 1; }

.hh-menu-toggle { display: none; min-width: 76px; justify-content: center; }
.hh-menu-toggle-close { display: none; }
.hh-header.is-mobile-open .hh-menu-toggle-open { display: none; }
.hh-header.is-mobile-open .hh-menu-toggle-close { display: inline; }

/* Mobil panel — Referans: inset 12px cam kutu, 52px hap satırlar, 18px kalın büyük harf */
.hh-mobile {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 104px 15px 16px;
    border-radius: 16px;
    background: rgba(10, 10, 10, .4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transform: scale(.8) translateY(-10px);
    transform-origin: top;
    transition: opacity .25s var(--hh-ease), transform .5s var(--hh-ease), visibility .5s;
    pointer-events: none;
    z-index: 0;
}
.hh-header.is-mobile-open .hh-mobile { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hh-header.is-mobile-open .hh-header-row { position: relative; z-index: 2; }
.hh-mobile-list { margin: 0; padding: 28px 0 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hh-mobile-item {
    border-radius: 40px;
    background: rgba(90, 90, 90, .2);
    padding: 0 20px;
}
.hh-mobile-link, .hh-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--hh-cream);
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
}
.hh-mobile-btn .hh-ico { transition: transform .35s var(--hh-ease); }
.hh-mobile-item.is-open .hh-mobile-btn .hh-ico { transform: rotate(90deg); }
.hh-mobile-sub { display: none; margin: 0; padding: 6px 0 16px; list-style: none; flex-direction: column; gap: 6px; }
.hh-mobile-item.is-open .hh-mobile-sub { display: flex; }
.hh-mobile-sublink {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hh-cream);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none !important;
}
.hh-mobile-sublink img { width: 114px; height: 74px; object-fit: cover; border-radius: 4px; }
.hh-mobile-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 0; color: var(--hh-cream); opacity: .6; font-size: 11px; }

/* Masaüstü ↔ mobil (referans: 1290px) */
@media (max-width: 1290px) {
    .hh-nav { display: none; }
    .hh-menu-toggle { display: inline-flex; }
    .hh-header { padding: 0 12px; }
    .hh-header-row { height: 92px; padding: 0 12px; }
    .hh-right { margin-top: 0; }
    .hh-logo { height: 56px; }
    .hh-logo img { max-height: 40px; }
}
@media (max-width: 575px) {
    .hh-logo img { max-width: 150px; }
    .hh-pill { padding: 0 11px; }
}

/* Açılış ekranı oynarken header gizli; bitince menü öğeleri sağdan kayarak gelir (referans: translateX 40→0, .9s) */
html.hh-intro-lock:not(.hh-intro-reveal) .hh-header { visibility: hidden; }
html.hh-intro-lock:not(.hh-intro-reveal) .hh-bar-list { opacity: 0; transform: translateX(40px); transition: none; }
html.hh-intro-lock .hh-logo { opacity: 0; transition: none; }

/* ─── HERO ────────────────────────────────────────────────────────────────── */

.hh-hero {
    position: relative;
    height: calc(95vh - var(--ann-h, 0px));
    height: calc(95dvh - var(--ann-h, 0px));
    min-height: 560px;
    margin-top: calc(-1 * var(--header-h));
    padding: 0; /* tema genel section dolgusunu ez — Referans: içerik en alta yaslı, 95vh tam kullanılır */
    overflow: hidden;
    background: var(--hh-dark);
    color: var(--hh-cream);
}
.hh-hero-bg { position: absolute; inset: 0; z-index: 0; }
.hh-hero-bg::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .3; z-index: 3; pointer-events: none; }
.hh-hero-media { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: grid; }
.hh-hero-media-item {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .9s var(--hh-ease-2), transform .9s var(--hh-ease-2);
    z-index: 1;
    pointer-events: none;
}
.hh-hero-media-item.is-active { opacity: 1; z-index: 2; }
.hh-hero-media-item.is-leaving { opacity: 0; transform: translateY(-40px) scale(1); z-index: 1; }
.hh-hero-media-item > video, .hh-hero-media-item > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hh-hero-content {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    min-width: 0;
}
.hh-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 20px 20px 0;
    min-width: 0;
}
.hh-hero-titles { position: relative; display: grid; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hh-hero-title-item {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 18px;
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity .8s var(--hh-ease-2), transform .8s var(--hh-ease-2);
    z-index: 1;
}
.hh-hero-title-item.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
.hh-hero-title {
    margin: 0;
    font-size: clamp(42px, 28.896px + 3.36vw, 86px);
    line-height: 1;
    letter-spacing: -.02em;
    font-weight: 300;
    color: var(--hh-cream);
    white-space: pre-line;
    max-width: min(100%, 14ch);
    text-wrap: balance;
}
.hh-hero-lead { margin: 0; max-width: 34rem; font-size: 1rem; line-height: 1.4; opacity: .85; }

/* Hap buton (referans data-size=large): 52px, açık hap + 62px koyu ok kutusu */
.hh-btn {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 52px;
    color: var(--hh-dark);
    text-decoration: none !important;
    transition: scale .25s cubic-bezier(.55, .085, .68, .53);
}
.hh-btn:active { scale: .98; }
/* Açık hap zemini: dururken yalnız etiketin altında (sağda 62px ok kutusu dışarıda), üzerine gelince
   tüm genişliğe uzar ve koyu ok kutusu 4px içeri çekilerek hapın İÇİNDE kalır (referans hover) */
.hh-btn::before {
    content: "";
    position: absolute;
    inset: 0 62px 0 0;
    border-radius: 60px;
    background: var(--hh-cream);
    transition: right .325s cubic-bezier(.86, 0, .07, 1);
}
.hh-btn-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 23.4px;
    color: var(--hh-dark);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.2;
    white-space: nowrap;
}
.hh-btn-icon {
    position: relative;
    z-index: 1;
    width: 62px;
    margin: 0;
    display: grid;
    place-items: center;
    border-radius: 48px;
    background: var(--hh-dark);
    color: var(--hh-cream);
    transition: margin .45s cubic-bezier(.68, -.55, .265, 1.55), width .45s cubic-bezier(.68, -.55, .265, 1.55), border-radius .45s cubic-bezier(.68, -.55, .265, 1.55);
}
.hh-btn-icon svg { transition: transform .45s cubic-bezier(.77, 0, .175, 1); }
.hh-btn:hover { color: var(--hh-dark); opacity: 1; }
.hh-btn:hover::before, .hh-btn:focus-visible::before { right: 0; }
.hh-btn:hover .hh-btn-icon, .hh-btn:focus-visible .hh-btn-icon { margin: 4px; width: 54px; border-radius: 44px; }
.hh-btn:hover .hh-btn-icon svg { transform: translateX(2px); }

/* Öne çıkanlar ızgarası — 396×352, 40 sütun × 7 satır, 9px aralık; dört hücre */
.hh-hl { position: relative; flex: 0 0 auto; width: 396px; height: 352px; color: var(--hh-cream); }
.hh-hl-bg, .hh-hl-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(40, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 9px;
}
.hh-hl-bg { z-index: 0; pointer-events: none; }
.hh-hl-grid { z-index: 1; }
/* Referans: brown-700 %40 + blur(12px) (multiply karışımı yerine doğrudan koyu ton — katman yapımızda
   multiply videoyla karışmadığı için açık gri kalıyordu). Ton site paletinden türetilir. */
.hh-hl-bgcell {
    display: block;
    border-radius: 12px;
    background: color-mix(in srgb, var(--hh-dark-2) 46%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
}
.hh-hl-c1 { grid-column: 1 / 19; grid-row: 1 / 2; border-radius: max(23.2px, 23.2px + 1.69vw); }
.hh-hl-c2 { grid-column: 19 / 41; grid-row: 1 / 5; }
.hh-hl-c3 { grid-column: 1 / 19; grid-row: 2 / 5; }
.hh-hl-c4 { grid-column: 1 / 41; grid-row: 5 / 8; }
.hh-hl-cell {
    position: relative;
    display: grid;
    align-items: center;
    min-width: 0;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    padding: 16px;
}
.hh-hl-cell.hh-hl-c1 { padding: 0; }
.hh-hl-cell.hh-hl-c2 { padding: 6px; }
.hh-hl-label { font-size: clamp(12px, 11.415px + .15vw, 14px); font-weight: 400; letter-spacing: .02em; line-height: 1.2; }
.hh-hl-desc { font-size: clamp(12px, 11.415px + .15vw, 14px); letter-spacing: .02em; line-height: 1.2; color: var(--hh-cream-40); }
.hh-hl-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    line-height: 1;
    color: inherit;
    text-decoration: none !important;
}
.hh-hl-cta .hh-hl-label { line-height: 1; }
.hh-hl-cta .hh-ico { display: block; }
.hh-hl-cta .hh-hl-label { transition: transform .25s var(--hh-ease-2); }
.hh-hl-cta:hover { color: inherit; opacity: 1; }
.hh-hl-cta:hover .hh-hl-label { transform: translateX(2px); }
.hh-hl-item {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 6px;
    overflow: hidden;
    color: inherit;
    text-decoration: none !important;
    opacity: 0;
    visibility: hidden;
    transform: scale(.95);
    transition: opacity .5s var(--hh-ease-2), transform .5s var(--hh-ease-2), visibility .5s;
    pointer-events: none;
}
.hh-hl-item.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hh-hl-item.is-leaving { opacity: 0; visibility: hidden; transform: scale(1.2); }
.hh-hl-item:hover { color: inherit; opacity: 1; }
.hh-hl-c2 .hh-hl-item { display: grid; align-items: end; }
.hh-hl-c2 .hh-hl-media { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; transition: transform .5s var(--hh-ease-2); }
.hh-hl-c2 .hh-hl-label { grid-area: 1 / 1; position: relative; padding: 0 0 10px 14px; }
.hh-hl-c2 .hh-hl-item:hover .hh-hl-media { transform: scale(1.025); }
.hh-hl-fixed {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    color: inherit;
    text-decoration: none !important;
}
.hh-hl-fixed:hover { color: inherit; opacity: 1; }
.hh-hl-fixed-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: max(26.8px, 26.8px + 3.6vw);
    border-radius: 4px;
    overflow: hidden;
}
.hh-hl-fixed-media img { height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .5s var(--hh-ease-2); }
.hh-hl-fixed:hover .hh-hl-fixed-media img { transform: scale(1.05); }
.hh-hl-c4 .hh-hl-item { display: flex; gap: 20px; padding: 6px 0; align-items: center; }
.hh-hl-b-media { flex: 0 0 30%; display: flex; align-items: center; justify-content: center; height: 100%; transition: transform .5s var(--hh-ease-2); }
.hh-hl-b-media img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 4px; }
.hh-hl-b-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: max(20.4px, 20.4px + .21vw); transition: transform .5s var(--hh-ease-2); }
.hh-hl-b-content .hh-hl-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hh-hl-b-icon { position: absolute; top: 6px; right: 0; }
.hh-hl-c4 .hh-hl-item:hover .hh-hl-b-content { transform: translateX(2px); }

/* Alt sekmeler (thumbs): 240px öğe, 102×62 görsel, üstte 1px ilerleme çizgisi */
.hh-hero-bottom { padding: 0 0 18px; min-width: 0; }
.hh-thumbs { position: relative; display: flex; gap: 12px; width: 100%; min-width: 0; overflow: clip; }
.hh-thumbs-scroll { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hh-thumbs-scroll::-webkit-scrollbar { display: none; }
.hh-thumbs-list { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0 20px; list-style: none; }
.hh-thumb {
    position: relative;
    flex: 0 0 clamp(200px, 185.102px + 3.82vw, 250px);
    width: clamp(230px, 224.033px + 1.53vw, 250px);
    padding-top: 18px;
}
.hh-thumb-btn {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hh-thumb-progress { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--hh-cream-30); display: block; }
.hh-thumb-bar { display: block; width: 100%; height: 100%; background: var(--hh-cream); transform: scaleX(0); transform-origin: left; }
.hh-thumb.is-passed .hh-thumb-bar { transform: scaleX(1); }
.hh-thumb.is-active .hh-thumb-bar { animation: hhThumbProgress var(--hh-sure, 12s) linear forwards; }
@keyframes hhThumbProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hh-thumb-media { display: block; flex: 0 0 102px; width: 102px; height: 62px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, #000 30%, transparent); }
.hh-thumb-media img, .hh-thumb-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--hh-ease-2); }
.hh-thumb-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 62px;
    min-width: 0;
    transition: transform .5s var(--hh-ease-2);
}
.hh-thumb-no, .hh-thumb-title { font-size: var(--hh-label); font-weight: 500; letter-spacing: .03em; line-height: 1.2; }
.hh-thumb-title { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hh-thumb-btn:hover .hh-thumb-media img, .hh-thumb-btn:hover .hh-thumb-media video { transform: scale(1.1); }
.hh-thumb-btn:hover .hh-thumb-text { transform: translateX(4px); }
.hh-thumbs-line { flex: 1 1 auto; height: 1px; background: var(--hh-cream-30); display: block; }

@media (max-width: 1100px) {
    .hh-hero-title { font-size: clamp(42px, 28.896px + 3.36vw, 64px); }
}
@media (max-width: 743px) {
    .hh-hl { display: none; }
    .hh-hero-title { font-size: 42px; max-width: 100%; }
    .hh-hero-top { padding: 20px 20px 0; }
    .hh-thumbs-line { display: none; }
    .hh-thumb { flex-basis: 200px; width: 200px; }
}

/* ─── AÇILIŞ EKRANI (açılış: "The house [logo] of coffee") ────────────── */

.hh-intro {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--hh-cream);
    transition: opacity .35s ease;
}
html.hh-intro-skip .hh-intro, html.hh-intro-done .hh-intro { display: none; }
html.hh-intro-lock { overflow: hidden; }
/* Perde yarımları: koyu zemin; açılışta (s5) üst yarı yukarı, alt yarı aşağı kayar (.9 sn) */
.hh-intro-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--hh-dark);
    transition: background .6s ease, transform .9s cubic-bezier(.77, 0, .175, 1);
    will-change: transform;
}
.hh-intro-half-top { top: 0; }
.hh-intro-half-bottom { bottom: 0; }
.hh-intro.s-bg2 .hh-intro-half { background: var(--hh-dark-2); }
.hh-intro.s5 .hh-intro-half-top { transform: translateY(-100%); }
.hh-intro.s5 .hh-intro-half-bottom { transform: translateY(100%); }
.hh-intro.s-out { opacity: 0; pointer-events: none; }
.hh-intro-row { position: relative; z-index: 1; }
/* Referans: metin iç kenarı ile logo arasında ≈22px; logo tam ortada (iki yan eşit esner) */
.hh-intro-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: min(1116px, 100% - 40px);
}
.hh-intro-copy { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0; }
.hh-intro-left { justify-content: flex-end; }
.hh-intro-right { justify-content: flex-start; }
.hh-intro-copy p {
    margin: 0;
    font-size: 22.83px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    filter: blur(2px);
    transform: translateX(-10px);
    transition: opacity 1.7s var(--hh-ease), transform 1.7s var(--hh-ease), filter 1.7s var(--hh-ease);
}
.hh-intro-right p { transform: translateX(10px); filter: blur(4px); }
.hh-intro.s2 .hh-intro-left p, .hh-intro.s3 .hh-intro-right p { opacity: 1; transform: none; filter: blur(0); }
.hh-intro.s4 .hh-intro-copy p { opacity: 0; transform: translateX(-5px); transition-duration: .45s; }
.hh-intro.s4 .hh-intro-right p { transform: translateX(5px); }
.hh-intro-logo {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: 110px;
    opacity: 0;
    transform: scale(.95);
    filter: blur(2px) grayscale(1) brightness(1.25);
    transition: opacity 1.6s var(--hh-ease), transform 1.6s var(--hh-ease), filter 1.6s var(--hh-ease);
    will-change: transform;
}
.hh-intro-logo img { height: 110px; width: auto; max-width: 60vw; display: block; }
.hh-intro-logo-text { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.hh-intro.s1 .hh-intro-logo { opacity: 1; transform: none; filter: blur(0) grayscale(1) brightness(1.25); }
.hh-intro.s4 .hh-intro-logo { filter: none; transition: filter .75s cubic-bezier(.77, 0, .175, 1), transform .95s var(--hh-ease), opacity .3s ease; }
.hh-intro.s5.s-mask .hh-intro-logo { opacity: 0; } /* yalnız maske efektinde logo saklanır; perdede header'a uçan logo kalır */
@media (max-width: 743px) {
    .hh-intro-row { flex-direction: column; gap: 22px; }
    .hh-intro-copy { flex: 0 0 auto; padding: 0; }
    .hh-intro-copy p { font-size: 19px; }
    .hh-intro-copy { justify-content: center; }
    .hh-intro-logo { height: 84px; }
    .hh-intro-logo img { height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .hh-hero-media-item, .hh-hero-title-item, .hh-hl-item, .hh-panel, .hh-panel-cards,
    .hh-bar-list, .hh-mobile, .hh-lang-menu, .hh-card-media, .hh-card-title, .hh-thumb-text, .hh-thumb-media img {
        transition: none !important;
    }
    .hh-thumb.is-active .hh-thumb-bar { animation: none; transform: scaleX(1); }
}

/* ─── HERO SAHNESİ — sekme şeridinin sonundaki ek sekmeyle açılan ikinci hero ────────────────
   Referans ölçüler (1440px): başlık 76px/60px kalın, üst satır 16px/700, alt metin 20px/23px,
   ürün paketleri 4 sn süzülme (translateY 15px, %65'te), aksesuarlar 4 sn süzülme ya da 26 sn tam dönüş.
   Zemin rengi panelden (--hh-sahne-bg), yoksa site vurgu rengi; metin rengi zemine göre açık/koyu. */
.hh-hero.is-hidden { display: none; }
.hh-sahne {
    position: relative;
    height: calc(95vh - var(--ann-h, 0px));
    height: calc(95dvh - var(--ann-h, 0px));
    min-height: 560px;
    margin-top: calc(-1 * var(--header-h));
    padding: 0;
    overflow: hidden;
    background: var(--hh-sahne-bg, var(--hh-accent));
    color: var(--hh-sahne-ink, #fff);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hh-sahne[hidden] { display: none; }
/* Görsel sahnesi alttaki sekme şeridinin ÜSTÜYLE sınırlı: yüzdeler bu alana göre, görseller şeride binmez */
.hh-sahne-stage { position: absolute; inset: 0; pointer-events: none; }
/* Sol altta slider'a dönüş hapı — sekme şeridinin durduğu hizada (20px / 18px) */
.hh-sahne-geri { position: absolute; left: 20px; bottom: 18px; z-index: 4; }
.hh-sahne-geri-btn { padding: 0 18px 0 14px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.hh-sahne-geri-btn .hh-ico { transition: transform .35s var(--hh-ease); }
.hh-sahne-geri-btn:hover .hh-ico { transform: translateX(-3px); }
.hh-sahne-item { position: absolute; display: block; will-change: transform; }
.hh-sahne-item img { width: 100%; height: auto; display: block; }
.hh-sahne-urun { z-index: 2; }
.hh-sahne-aksesuar { z-index: 1; }
.hh-move-float { animation: hhFloat var(--hh-dur, 4s) ease-in-out var(--hh-delay, 0s) infinite; }
.hh-move-float-reverse { animation: hhFloatRev var(--hh-dur, 4s) ease-in-out var(--hh-delay, 0s) infinite; }
.hh-move-rotate { animation: hhRotate var(--hh-dur, 26s) linear var(--hh-delay, 0s) infinite; }
@keyframes hhFloat { 0% { transform: translateY(0); } 65% { transform: translateY(15px); } 100% { transform: translateY(0); } }
@keyframes hhFloatRev { 0% { transform: translateY(0); } 65% { transform: translateY(-15px); } 100% { transform: translateY(0); } }
@keyframes hhRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hh-sahne-content {
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    width: min(1200px, 100% - 40px);
    margin: 0 auto;
    padding: calc(var(--header-h) + 16px) 0 16px;
    pointer-events: none;
}
.hh-sahne-text { pointer-events: auto; max-width: 500px; }
.hh-sahne-ust { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; }
.hh-sahne-stars { display: inline-flex; gap: 2px; }
.hh-sahne-stars svg { display: block; }
.hh-sahne-title {
    margin: 0;
    max-width: 24rem;
    font-size: clamp(42px, 5.28vw, 76px);
    line-height: .82;
    font-weight: 800;
    letter-spacing: -.5px;
    color: inherit;
    white-space: pre-line;
}
.hh-sahne-word { white-space: nowrap; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .1em; }
.hh-sahne-cursor { font-weight: 300; margin-left: .04em; animation: hhBlink 1s steps(2, start) infinite; }
@keyframes hhBlink { to { visibility: hidden; } }
.hh-sahne-lead { margin: 24px 0 0; max-width: 19rem; font-size: 20px; line-height: 1.15; }
.hh-sahne .hh-btn { margin-top: 24px; }
/* Sahne yüksekliği ve sekme şeridinin yeri hero/slider ile birebir aynı (alt kavis yok, şerit altı 18px) */
.hh-sahne .hh-hero-bottom { position: relative; z-index: 3; }
.hh-sahne .hh-thumb-progress, .hh-sahne .hh-thumbs-line { background: color-mix(in srgb, var(--hh-sahne-ink, #fff) 30%, transparent); }
.hh-sahne .hh-thumb-bar { background: var(--hh-sahne-ink, #fff); }
.hh-sahne .hh-thumb.is-active .hh-thumb-bar { animation: none; transform: scaleX(1); }
.hh-thumb-sahne.is-active .hh-thumb-bar { animation: none; transform: scaleX(1); }
@media (max-width: 743px) {
    .hh-sahne-content { align-items: flex-start; padding-top: calc(var(--header-h) + 12px); }
    .hh-sahne-stage { top: 48%; }
    .hh-sahne-title { font-size: 42px; }
    .hh-sahne-lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .hh-sahne-item, .hh-sahne-cursor { animation: none !important; }
}

/* ─── ÜRÜN ŞERİDİ — anasayfa "UrunCarousel" bölümü (referans: 263×250 kart, 12px aralık, 8px köşe) ───── */
.hh-uc {
    --hh-uc-w: 263px;
    --hh-uc-h: 161px;
    position: relative;
    padding: 22px 0 36px;
    background: var(--hh-dark);
    color: var(--hh-cream);
    overflow: hidden;
}
.hh-uc-wrap { position: relative; width: 100%; overflow: hidden; }
.hh-uc-track {
    display: flex;
    width: max-content;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
.hh-uc-track.is-drag { cursor: grabbing; }
.hh-uc-list { display: flex; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
/* Sabit kart yüksekliği (referans 250): iki satıra sarkan ürün adı alt boşluğa taşar, şerit uzamaz */
.hh-uc-item { flex: 0 0 auto; width: var(--hh-uc-w); height: calc(var(--hh-uc-h) + 100px); margin: 0; }
.hh-uc-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--hh-cream);
    text-decoration: none !important;
    opacity: 1 !important;
}
.hh-uc-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--hh-uc-h);
    border-radius: 8px;
    background: var(--hh-uc-bg, var(--hh-accent));
}
.hh-uc-media img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: transform 1s var(--hh-ease);
}
.hh-uc-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 6px 4px;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: transform .5s var(--hh-ease), opacity .5s var(--hh-ease);
}
.hh-uc .hh-uc-kat { margin: 0; font-size: 15px; font-weight: 500; font-style: italic; line-height: 1; letter-spacing: 0; color: var(--hh-uc-kat, var(--hh-cream)); }
.hh-uc .hh-uc-ad { margin: 0; font-size: 31px; font-weight: 700; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--hh-cream); }
.hh-uc-arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 26px;
    margin-top: 2px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--hh-cream) 12%, var(--hh-dark));
    color: var(--hh-cream);
}
.hh-uc-arrow svg { width: 12px; height: 12px; transition: transform .45s cubic-bezier(.77, 0, .175, 1); }
.hh-uc-item:hover .hh-uc-title, .hh-uc-item:focus-within .hh-uc-title { opacity: 1; transform: none; }
.hh-uc-item:hover .hh-uc-media img { transform: scale(1.05); }
.hh-uc-item:hover .hh-uc-arrow svg { transform: translateX(2px); }
@media (max-width: 743px) {
    .hh-uc { --hh-uc-w: 200px; --hh-uc-h: 122px; padding: 16px 0 30px; }
    .hh-uc .hh-uc-ad { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hh-uc-wrap { overflow-x: auto; }
    .hh-uc-media img, .hh-uc-title { transition: none; }
}