/* Healy vitrini — 3B giriş, hareketli kartlar, karşılaştırma, uyku bölümü */

.h-sayfa { --h: var(--hue, 42); overflow-x: clip; }
.h-sayfa .kap { max-width: 1240px; }
.h-sayfa h1, .h-sayfa h2, .h-sayfa h3 { text-wrap: balance; }

/* ---------- belirme ---------- */
[data-belir] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--sira, 0) * 90ms); }
[data-belir].gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-belir] { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---------- giriş ---------- */
.h-giris { position: relative; min-height: min(100svh, 920px); display: grid; align-items: center; isolation: isolate; overflow: hidden; padding: 72px 0 96px;
  background: radial-gradient(70% 60% at 70% 45%, hsl(var(--h) 60% 30% / 0.35), transparent 70%), radial-gradient(60% 80% at 10% 100%, rgba(156,143,208,.18), transparent 60%); }
.h-sahne { position: absolute; inset: 0; z-index: -1; }
.h-sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.h-sahne.hazir canvas { opacity: 1; }
@media (min-width: 900px) { .h-sahne canvas { left: 30%; width: 70%; } }
/* WebGL yoksa ya da yüklenirken: CSS ile ışıyan taş */
.h-yedek { position: absolute; right: 8%; top: 50%; width: min(46vw, 420px); aspect-ratio: 1; transform: translateY(-50%); display: grid; place-items: center; transition: opacity 1s; }
.h-sahne.hazir .h-yedek { opacity: 0; }
.h-yedek span { width: 56%; aspect-ratio: 1.3; border-radius: 50%; background: radial-gradient(60% 50% at 40% 30%, #3a2f5c, #140F24 70%); box-shadow: 0 0 0 3px hsl(var(--h) 75% 60%), 0 30px 80px hsl(var(--h) 70% 50% / .35); }
.h-yedek i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid hsl(var(--h) 75% 62%); animation: h-dalga 4.5s linear infinite; opacity: 0; }
.h-yedek i:nth-of-type(2) { animation-delay: 1.5s; } .h-yedek i:nth-of-type(3) { animation-delay: 3s; }
@keyframes h-dalga { 0% { transform: scale(.8); opacity: 0; } 15% { opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
@media (max-width: 899px) { .h-yedek { right: 50%; transform: translate(50%, -62%); width: 78vw; opacity: .5; } .h-giris { align-items: end; } }

.h-giris-ic { display: grid; gap: 22px; max-width: 1200px; }
.h-giris-ic > * { max-width: 620px; }
.h-ust { font-size: var(--t-xs); color: hsl(var(--h) 70% 70%); letter-spacing: 0.04em; }
.h-baslik { font-family: var(--f-baslik); font-size: clamp(3rem, 11vw, 7.2rem); line-height: 0.92; letter-spacing: -0.035em; font-weight: 500;
  background: linear-gradient(180deg, var(--yazi) 30%, hsl(var(--h) 60% 78%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-urun .h-baslik { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.h-alt { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--yazi-2); line-height: 1.45; }
.h-kelime { display: inline-block; color: hsl(var(--h) 80% 66%); font-weight: 600; transition: transform .38s cubic-bezier(.5,0,.3,1), opacity .38s; min-width: 4ch; }
.h-kelime.cik { transform: translateY(-60%) rotateX(70deg); opacity: 0; }
.h-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.buyuk-d { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.h-cta .dugme.ana { box-shadow: 0 10px 40px hsl(var(--h) 80% 55% / .35); }
.h-artilar { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t-s); color: var(--yazi-2); }
.h-artilar li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--h) 80% 62%); margin-right: 8px; vertical-align: 2px; box-shadow: 0 0 10px hsl(var(--h) 80% 62%); }
.h-asagi { position: absolute; left: 50%; bottom: 24px; width: 26px; height: 42px; border: 1.5px solid var(--cizgi-guclu); border-radius: 14px; transform: translateX(-50%); }
.h-asagi span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px; background: var(--ay); transform: translateX(-50%); animation: h-tekerlek 1.8s ease-in-out infinite; }
@keyframes h-tekerlek { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }

/* ---------- kayan şerit ---------- */
.h-serit { border-block: 1px solid var(--cizgi); overflow: hidden; padding: 18px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.h-serit-ic { display: flex; width: max-content; animation: h-serit 38s linear infinite; }
.h-serit span { font-family: var(--f-baslik); font-size: clamp(1.4rem, 3vw, 2.1rem); padding: 0 28px; color: var(--yazi-3); white-space: nowrap; }
.h-serit span:nth-child(3n+1) { color: var(--yazi); } .h-serit span:nth-child(3n+2) { color: var(--ay); }
.h-serit span::after { content: "✦"; font-size: .5em; margin-left: 56px; color: var(--lavanta); vertical-align: middle; }
.h-serit:hover .h-serit-ic { animation-play-state: paused; }
@keyframes h-serit { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h-serit-ic { animation: none; } }

/* ---------- bölüm başlıkları ---------- */
.h-bolum-baslik { font-family: var(--f-baslik); font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.025em; font-weight: 500; margin-bottom: 18px; }

/* ---------- nasıl çalışır ---------- */
.h-nasil { position: relative; }
.h-adimlar { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; counter-reset: a; }
@media (min-width: 860px) { .h-adimlar { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.h-adimlar li { position: relative; padding: 28px 24px 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--cizgi); display: grid; gap: 10px; align-content: start; overflow: hidden; }
.h-adimlar li::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(hsl(var(--h) 70% 55% / .22), transparent 65%); }
.h-adim-no { font-family: var(--f-baslik); font-size: 4.2rem; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--cizgi-guclu); position: absolute; right: 18px; top: 16px; }
.h-adimlar svg { width: 48px; height: 48px; fill: none; stroke: var(--ay); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.h-adimlar h3 { font-size: var(--t-l); }
.h-adimlar p { color: var(--yazi-2); font-size: var(--t-s); line-height: 1.6; }
.h-adim-cizgi { display: none; }
@media (min-width: 860px) {
  .h-adim-cizgi { display: block; width: 100%; height: 40px; margin-top: 18px; fill: none; stroke: var(--ay); stroke-width: 1.5; opacity: .5; }
  .h-adim-cizgi path { stroke-dasharray: 1100; stroke-dashoffset: 1100; transition: stroke-dashoffset 2.2s ease .3s; }
  .h-adim-cizgi.gorundu path { stroke-dashoffset: 0; }
}

/* ---------- vitrin ---------- */
.h-vitrin-bas { display: grid; gap: 8px; margin-bottom: 26px; }
.h-sekmeler { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--zemin-2); border: 1px solid var(--cizgi); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.h-sekmeler::-webkit-scrollbar { display: none; }
.h-sekmeler button { position: relative; z-index: 1; border: 0; background: none; color: var(--yazi-2); font: inherit; font-size: var(--t-s); padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .3s; }
.h-sekmeler button[aria-selected="true"] { color: var(--zemin-derin); font-weight: 600; }
.h-sekmeler button:focus-visible { outline: 2px solid var(--ay); outline-offset: 2px; }
.h-gosterge { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; border-radius: 999px; background: var(--ay); transition: transform .45s cubic-bezier(.5,0,.2,1), width .45s cubic-bezier(.5,0,.2,1); box-shadow: 0 6px 24px rgba(233,185,73,.35); }
.h-panel-acik { color: var(--yazi-2); margin-bottom: 22px; }
.h-kartlar { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); perspective: 1200px; }

.h-kart { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; position: relative; border-radius: 24px; padding: 1px; isolation: isolate;
  background: linear-gradient(160deg, hsl(var(--hue) 60% 60% / .45), rgba(255,255,255,.06) 40%, rgba(255,255,255,.03));
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .4s; }
.h-kart:hover { box-shadow: 0 30px 60px -20px hsl(var(--hue) 70% 40% / .55); }
.h-kart.one::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--aci, 0deg), transparent 0 70%, hsl(var(--hue) 85% 65%), transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: h-kenar 5s linear infinite; }
@property --aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes h-kenar { to { --aci: 360deg; } }
.h-kart > *:not(.h-kart-isik) { position: relative; }
.h-kart-gorsel, .h-kart-ic { background: var(--zemin); }
.h-kart-gorsel { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 23px 23px 0 0; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 60%, hsl(var(--hue) 55% 32% / .7), var(--zemin-derin) 75%); }
.h-kart-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transform: translateZ(40px); transition: transform .5s; }
.h-kart:hover .h-kart-gorsel img { transform: translateZ(40px) scale(1.05); }
.h-kart-ic { display: grid; gap: 10px; padding: 20px 20px 22px; border-radius: 0 0 23px 23px; align-content: start; }
.h-kart-isik { position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--mx) var(--my), hsl(var(--hue) 90% 75% / .12), transparent 40%); }
.h-kart:hover .h-kart-isik { opacity: 1; }
.h-rozet { justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; color: hsl(var(--hue, 42) 85% 72%); background: hsl(var(--hue, 42) 70% 50% / .15); border: 1px solid hsl(var(--hue, 42) 70% 60% / .35); }
.h-kart h3 { font-family: var(--f-baslik); font-size: 1.5rem; line-height: 1.1; font-weight: 500; }
.h-kart h3 a { color: var(--yazi); text-decoration: none; }
.h-slogan { color: hsl(var(--hue) 60% 75%); font-size: var(--t-s); }
.h-ozet-liste { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 6px; font-size: var(--t-xs); color: var(--yazi-2); }
.h-ozet-liste li::before { content: ""; display: inline-block; width: 12px; height: 1.5px; background: hsl(var(--hue) 70% 62%); margin-right: 8px; vertical-align: 3px; }
.h-fiyat { font-family: var(--f-baslik); font-size: 1.25rem; color: var(--yazi); }
.h-fiyat.buyuk { font-size: 2rem; }
.h-kart-dugmeler { display: flex; gap: 8px; margin-top: 6px; }
.h-kart-dugmeler .dugme { min-height: 42px; padding: 0 18px; font-size: var(--t-s); }

/* fotoğrafsız kartlar için CSS taş */
.h-tas { position: relative; width: 58%; aspect-ratio: 1.3; display: grid; place-items: center; transform: translateZ(50px) rotateX(55deg); transform-style: preserve-3d; transition: transform .6s; }
.h-kart:hover .h-tas { transform: translateZ(60px) rotateX(48deg) rotateZ(8deg); }
.h-tas i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 55% at 40% 30%, #4a3d72, #1b1530 65%); box-shadow: 0 0 0 2.5px hsl(var(--hue) 75% 62%), 0 18px 36px rgba(0,0,0,.5), inset 0 -8px 20px rgba(0,0,0,.4); }
.h-tas i::after { content: ""; position: absolute; left: 50%; top: 38%; width: 9%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #ffe3a3; box-shadow: 0 0 14px 4px hsl(var(--hue) 90% 65% / .8); }
.h-tas b { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid hsl(var(--hue) 80% 65%); opacity: 0; animation: h-dalga 4s linear infinite; }
.h-tas b:nth-of-type(2) { animation-delay: 1.33s; } .h-tas b:nth-of-type(3) { animation-delay: 2.66s; }
@media (prefers-reduced-motion: reduce) { .h-tas b, .h-yedek i, .h-kart.one::before { animation: none; } }

/* ---------- karşılaştırma ---------- */
.h-tablo-kap { overflow-x: auto; border-radius: 24px; border: 1px solid var(--cizgi); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.h-tablo { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--t-s); }
.h-tablo th, .h-tablo td { padding: 16px 14px; text-align: center; border-bottom: 1px solid var(--cizgi); }
.h-tablo tbody th { text-align: left; font-weight: 400; color: var(--yazi-2); min-width: 220px; }
.h-tablo thead th { position: relative; padding-top: 30px; font-family: var(--f-baslik); font-size: 1.25rem; font-weight: 500; }
.h-tablo thead a { color: var(--yazi); text-decoration: none; }
.h-tablo thead a:hover { color: hsl(var(--hue) 80% 70%); }
.h-tablo .onerilen { background: rgba(233,185,73,.07); }
.h-tablo thead th.onerilen { border-radius: 18px 18px 0 0; box-shadow: inset 0 2px 0 var(--ay); }
.h-oneri { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-family: var(--f-arayuz); font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--zemin-derin); background: var(--ay); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.h-tablo tr:last-child td, .h-tablo tr:last-child th { border-bottom: 0; }
.h-var { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--hue, 42) 75% 58%); position: relative; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); vertical-align: middle; }
.h-var::after { content: ""; position: absolute; left: 7.5px; top: 4.5px; width: 5px; height: 10px; border: solid var(--zemin-derin); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gorundu .h-var, .h-ozellikler .gorundu .h-var { transform: scale(1); }
.h-tablo tr:nth-child(2) .h-var { transition-delay: .08s; } .h-tablo tr:nth-child(3) .h-var { transition-delay: .16s; } .h-tablo tr:nth-child(4) .h-var { transition-delay: .24s; } .h-tablo tr:nth-child(5) .h-var { transition-delay: .32s; } .h-tablo tr:nth-child(6) .h-var { transition-delay: .4s; } .h-tablo tr:nth-child(7) .h-var { transition-delay: .48s; }
.h-yok { color: var(--yazi-3); }
.h-tablo-cta .dugme { min-height: 40px; padding: 0 16px; font-size: var(--t-xs); }
.h-not { color: var(--yazi-3); margin-top: 14px; }

/* ---------- uyku ---------- */
.h-uyku { position: relative; overflow: hidden; padding: clamp(72px, 12vw, 140px) 0; isolation: isolate;
  background: radial-gradient(80% 90% at 80% 20%, hsl(var(--hue, 265) 50% 25% / .6), transparent 60%), linear-gradient(180deg, var(--zemin-derin), #07050f); }
.h-uyku { --hue: 265; }
.h-yildizlar { position: absolute; inset: -50%; z-index: -1;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 80px 120px, #e9b949, transparent), radial-gradient(1.2px 1.2px at 160px 60px, #cfc6ff, transparent), radial-gradient(1px 1px at 230px 190px, #fff, transparent), radial-gradient(1.5px 1.5px at 300px 90px, #fff, transparent);
  background-size: 340px 240px; opacity: .55; animation: h-yildiz 120s linear infinite; }
.h-yildizlar::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: 520px 380px; opacity: .6; animation: h-parilti 4s ease-in-out infinite alternate; }
@keyframes h-yildiz { to { transform: translate(-340px, -240px); } }
@keyframes h-parilti { from { opacity: .2; } to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .h-yildizlar, .h-yildizlar::after { animation: none; } }
.h-uyku-ic { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .h-uyku-ic { grid-template-columns: 1.2fr 1fr; } }
.h-uyku-ic > div { display: grid; gap: 16px; }
.h-uyku-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.h-uyku-liste a { display: grid; gap: 2px; padding: 18px 22px; border-radius: 18px; text-decoration: none; color: var(--yazi); border: 1px solid var(--cizgi); background: rgba(20,15,36,.55); backdrop-filter: blur(8px); transition: transform .3s, border-color .3s; }
.h-uyku-liste a:hover { transform: translateX(6px); border-color: var(--lavanta); }
.h-uyku-liste span { color: var(--yazi-2); font-size: var(--t-s); }

/* ---------- bilgi ve SSS ---------- */
.h-bilgi-izgara { display: grid; gap: 16px; margin-bottom: 48px; }
@media (min-width: 860px) { .h-bilgi-izgara { grid-template-columns: repeat(3, 1fr); } }
.h-bilgi-kutu { padding: 22px 22px 24px; border-radius: 20px; border: 1px solid var(--cizgi); background: var(--zemin-2); display: grid; gap: 10px; align-content: start; }
.h-bilgi-kutu h3 { font-size: var(--t-m); }
.h-bilgi-kutu p, .h-bilgi-kutu li { color: var(--yazi-2); font-size: var(--t-s); line-height: 1.6; }
.h-bilgi-kutu ul { margin: 0; padding-left: 1.1em; }
.h-sss { max-width: 820px; }
.h-sss details { border-top: 1px solid var(--cizgi); }
.h-sss details:last-of-type { border-bottom: 1px solid var(--cizgi); }
.h-sss summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-size: var(--t-m); font-weight: 500; }
.h-sss summary::-webkit-details-marker { display: none; }
.h-sss summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 1.4rem; color: var(--ay); transition: transform .3s; }
.h-sss details[open] summary::after { transform: rotate(45deg); }
.h-sss details p { color: var(--yazi-2); padding-bottom: 18px; line-height: 1.6; }

/* ---------- ürün sayfası ---------- */
.h-urun-giris { min-height: min(86svh, 820px); }
.h-urun-ust { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .h-urun-ust { grid-template-columns: 1.05fr 1fr; } }
.h-urun-yazi { display: grid; gap: 16px; max-width: 620px; }
.h-urun-yazi .h-rozet { margin-bottom: -4px; }
.h-urun-foto { --rx: 0deg; --ry: 0deg; position: relative; border-radius: 28px; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s; background: radial-gradient(70% 70% at 50% 55%, hsl(var(--hue) 55% 32% / .7), transparent 75%); }
.h-urun-foto img { width: 100%; height: auto; display: block; }
.h-urun-izgara { display: grid; gap: 40px; }
@media (min-width: 960px) { .h-urun-izgara { grid-template-columns: 1.4fr 1fr; align-items: start; } .h-urun-yan { position: sticky; top: 90px; } }
.h-urun-yan { display: grid; gap: 14px; }
.h-satin-kutu { border-color: hsl(var(--hue) 60% 55% / .5); background: linear-gradient(160deg, hsl(var(--hue) 50% 30% / .35), var(--zemin-2)); }
.h-satin-kutu .dugme { width: 100%; }
.h-ozellikler { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
@media (min-width: 640px) { .h-ozellikler { grid-template-columns: 1fr 1fr; } }
.h-ozellikler li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--cizgi); background: var(--zemin-2); font-size: var(--t-s); }
.h-ozellikler .h-var { flex: none; }
.h-ozellikler li.gorundu .h-var { transform: scale(1); transition-delay: .3s; }
.h-aciklama { max-width: 70ch; }

/* ---------- telefonda alt çubuk ---------- */
.h-cubuk { position: fixed; left: 12px; right: 12px; bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom) + 10px); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 18px; background: rgba(30,23,51,.92); backdrop-filter: blur(12px); border: 1px solid var(--cizgi-guclu);
  transform: translateY(24px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform .45s cubic-bezier(.3,1.3,.5,1), opacity .3s, visibility 0s .3s; font-size: var(--t-s); }
.h-cubuk.acik { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: transform .45s cubic-bezier(.3,1.3,.5,1), opacity .3s, visibility 0s; }
.h-cubuk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-cubuk .dugme { min-height: 42px; flex: none; }
body.calar-var .h-cubuk { bottom: calc(var(--alt-menu) + var(--calar-h) + env(safe-area-inset-bottom) + 10px); }
@media (min-width: 900px) { .h-cubuk { display: none; } }

/* ---------- ürün fotoğrafları ---------- */
/* açık (beyaz) zeminli fotoğraflar: yumuşak ışıklı stüdyo zemini; beyaz, zemine karışır */
.h-kart-gorsel.acik, .h-urun-foto.acik {
  background: radial-gradient(80% 70% at 50% 40%, #ffffff, hsl(var(--hue) 35% 90%) 70%, hsl(var(--hue) 30% 80%));
}
.h-kart-gorsel.acik img, .h-urun-foto.acik img { mix-blend-mode: multiply; }
.h-kart-gorsel.acik img { padding: 6%; }
.h-kart-gorsel.foto img { object-fit: cover; padding: 0; }
.h-kart-gorsel.acik::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, hsl(var(--hue) 40% 50% / .12)); pointer-events: none; }
.h-kart-gorsel { position: relative; }
.h-urun-foto { aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; box-shadow: 0 40px 90px -30px hsl(var(--hue) 70% 45% / .6), 0 0 0 1px rgba(255,255,255,.08); }
.h-urun-foto img { width: 100%; height: 100%; object-fit: contain; }
.h-urun-foto.acik img { padding: 6%; }
.h-kart-gorsel.acik img { object-fit: cover; object-position: 50% 42%; padding: 0; transform: scale(1.22); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.h-kart:hover .h-kart-gorsel.acik img { transform: scale(1.3); }
.h-kart-gorsel.foto img { transform: none; }
.h-kart:hover .h-kart-gorsel.foto img { transform: scale(1.05); }
.h-kart-gorsel.acik { aspect-ratio: 5 / 4; }
.h-kart-gorsel.acik img { object-position: 50% 50%; transform: scale(1); }
.h-kart:hover .h-kart-gorsel.acik img { transform: scale(1.06); }
/* başlıktaki renk geçişi aşağı sarkan harfleri kesmesin */
.h-baslik { padding-bottom: 0.12em; margin-bottom: -0.12em; }

/* alt çubuk, mini oynatıcı açıkken onun üstünde dursun */
body:has(#calar:not([hidden])) .h-cubuk { bottom: calc(var(--alt-menu) + var(--calar-h, 64px) + env(safe-area-inset-bottom) + 10px); }
/* telefonda 3B sahne üst yarıda, yazılar altta: üst üste binmesin */
@media (max-width: 899px) {
  .h-giris:not(.h-urun-giris) { align-items: end; padding-top: 46svh; }
  .h-giris:not(.h-urun-giris) .h-sahne canvas { height: 56%; }
  .h-giris:not(.h-urun-giris) .h-yedek { top: 28%; }
  .h-urun-giris .h-sahne canvas { height: 46%; }
  .h-urun-giris:has(canvas) .h-urun-ust { padding-top: 34svh; }
}