/* ============================================================
   Hacımirzaoğlu — story bandı ve izleyicisi (17.10.2026). Tasarım kararları: docs/TASARIM.md "Story"
   Bant anasayfada başlığın hemen altında, koyu "üst kat" zemininde (hero ile aynı keçe yeşili).
   İmza: halka, tepsideki dilimler gibi story sayısı kadar parçaya bölünür (izlenen dilimler söner).
   Tokenlar hm-kabuk.css'ten gelir (--hm-*). Çekirdek CSS'in küresel kuralları (button reset, h2/p margin,
   button:focus{outline:none!important}) bu bileşende açıkça ezilir.
   ============================================================ */

:root{
	--hm-serbet:#e3a64b;            /* anlık story halkası: şerbet sarısı (dekor; metin değil) */
	--hm-story-izlendi:rgb(248 241 228/.26);
	--hm-sv-zemin:#0b1510;
}

/* ---------- Bant ---------- */
.hm-story{background:var(--hm-kece);color:var(--hm-krem);border-bottom:1px solid rgb(201 169 97/.12);position:relative}
.hm-story__liste{max-width:var(--hm-genislik);margin:0 auto;display:flex;gap:.85rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--hm-kenar);padding:.95rem var(--hm-kenar) .75rem;scrollbar-width:none;list-style:none}
.hm-story__liste::-webkit-scrollbar{display:none}
@media (min-width:64rem){.hm-story__liste{justify-content:safe center;gap:1.25rem;padding-block:1.15rem .9rem}}
.hm-story__oge{flex:none;scroll-snap-align:start;list-style:none}
.hm-story__oge[hidden]{display:none}
.hm-story .hm-story__dugme{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:5.6rem;padding:.15rem 0;background:none;border:0;color:inherit;cursor:pointer;font:inherit;border-radius:var(--hm-r2)}
.hm-story__daire{position:relative;display:block;width:4.5rem;height:4.5rem}
@media (min-width:64rem){.hm-story .hm-story__dugme{width:5.75rem}.hm-story__daire{width:5.25rem;height:5.25rem}}
.hm-story__halka{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hm-story__parca{fill:none;stroke:var(--hm-altin);stroke-width:5;stroke-linecap:round;transition:stroke 300ms ease-out}
.hm-story__oge--anlik .hm-story__parca{stroke:var(--hm-serbet);stroke-width:6}
.hm-story__parca.is-izlendi{stroke:var(--hm-story-izlendi);stroke-width:4}
.hm-story__resim{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:var(--hm-kece-2);box-shadow:0 0 0 2px var(--hm-kece)}
.hm-story__resim img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:filter var(--hm-gecis)}
.hm-story__rozet{position:absolute;left:50%;bottom:-.4rem;translate:-50% 0;padding:.05rem .45rem;border-radius:999px;background:var(--hm-serbet);color:var(--hm-murekkep);box-shadow:0 0 0 2px var(--hm-kece);font-size:.75rem;font-weight:800;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.hm-story__oge.is-izlendi .hm-story__rozet{background:var(--hm-kece-2);color:var(--hm-krem)}
.hm-story__ad{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:700;line-height:1.3;color:color-mix(in srgb,var(--hm-krem) 92%,transparent)}
.hm-story__oge.is-izlendi .hm-story__ad{color:color-mix(in srgb,var(--hm-krem) 62%,transparent)}
@media (hover:hover){.hm-story .hm-story__dugme:hover .hm-story__resim img{filter:brightness(1.1)}}
.hm-story .hm-story__dugme:focus-visible{outline:3px solid var(--hm-fistik-acik)!important;outline-offset:2px!important;box-shadow:none!important}

/* ---------- İzleyici (<dialog>, üst katman) ---------- */
html.hm-sv-acik{overflow:hidden}
body:has(#hm-story-izleyici[open]) .hm-altbar,body:has(#hm-story-izleyici[open]) .hm-wa{translate:0 110%;visibility:hidden}
.hm-sv{--sahne-w:min(100vw,calc(100dvh * 9 / 16),30rem);position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--hm-sv-zemin);color:#fff;overflow:hidden;font-family:var(--hm-sans);font-size:1rem;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior:contain}
.hm-sv::backdrop{background:var(--hm-sv-zemin)}
.hm-sv *,.hm-sv *::before,.hm-sv *::after{box-sizing:border-box}
.hm-sv :where(h2,p,ul,figure){margin:0}
.hm-sv :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:0}
.hm-sv :where(a){color:inherit;text-decoration:none}
.hm-sv :where(img,video,svg){display:block;max-width:none}
.hm-sv:focus,.hm-sv:focus-visible{outline:none}
.hm-sv :is(button,a):focus-visible{outline:3px solid var(--hm-fistik-acik)!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgb(11 21 16/.85)!important}
.hm-sv__zemin{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(36px) brightness(.42) saturate(1.15);pointer-events:none;opacity:.9}
.hm-sv__sahne{container-type:inline-size;position:absolute;top:0;bottom:0;left:50%;width:var(--sahne-w);translate:-50% 0;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media (min-width:48rem){
	.hm-sv{--sahne-w:min(100vw,calc((100dvh - 2.5rem) * 9 / 16),28rem)}
	.hm-sv__sahne{top:1.25rem;bottom:1.25rem;border-radius:var(--hm-r3);box-shadow:0 30px 80px -20px rgb(0 0 0/.8)}
}
.hm-sv__kayan{position:absolute;inset:0}
@media (prefers-reduced-motion:no-preference){
	.hm-sv__kayan.is-ileri{animation:hm-sv-ileri 320ms cubic-bezier(.32,.72,0,1)}
	.hm-sv__kayan.is-geri{animation:hm-sv-geri 320ms cubic-bezier(.32,.72,0,1)}
	.hm-sv__kayan.is-solgun{animation:hm-sv-belir 220ms ease-out}
	@keyframes hm-sv-ileri{from{translate:38% 0;opacity:.2}to{translate:0 0;opacity:1}}
	@keyframes hm-sv-geri{from{translate:-38% 0;opacity:.2}to{translate:0 0;opacity:1}}
	@keyframes hm-sv-belir{from{opacity:.25}to{opacity:1}}
}

/* Medya */
.hm-sv__medya{position:absolute;inset:0;background:#000}
.hm-sv__medya-zemin{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(24px) brightness(.55);pointer-events:none}
.hm-sv__icerik{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--odak,50% 50%);transition:opacity 200ms ease-out}
.hm-sv__sahne img{-webkit-user-drag:none;user-select:none}
.hm-sv__medya--sigdir .hm-sv__icerik{object-fit:contain}
.hm-sv__icerik.is-yukleniyor{opacity:0}
video.hm-sv__icerik.is-yukleniyor[poster]{opacity:1}
.hm-sv__donen{position:absolute;left:50%;top:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;border:3px solid rgb(255 255 255/.25);border-top-color:#fff;animation:hm-sv-don 800ms linear infinite;z-index:2;pointer-events:none}
.hm-sv__donen[hidden]{display:none}
@keyframes hm-sv-don{to{rotate:360deg}}

/* Üst: ilerleme çubukları + başlık satırı */
.hm-sv__ust{position:absolute;inset:0 0 auto 0;z-index:4;padding:calc(.5rem + env(safe-area-inset-top)) .6rem 2.75rem;background:linear-gradient(rgb(0 0 0/.72),rgb(0 0 0/.52) calc(4rem + env(safe-area-inset-top)),rgb(0 0 0/0));pointer-events:none}
.hm-sv__cubuklar{display:flex;gap:.25rem}
.hm-sv__cubuk{flex:1;height:3px;border-radius:2px;background:rgb(255 255 255/.32);overflow:hidden}
.hm-sv__cubuk i{display:block;width:100%;height:100%;background:#fff;transform-origin:left center;transform:scaleX(var(--p,0))}
.hm-sv__satir{display:flex;align-items:center;gap:.6rem;margin-top:.55rem}
.hm-sv__kim{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1}
.hm-sv__avatar{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--hm-krem) center/cover no-repeat;box-shadow:0 0 0 2px var(--hm-altin)}
.hm-sv__adlar{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hm-sv__grup{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgb(0 0 0/.5)}
.hm-sv__zaman{font-size:.8125rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgb(0 0 0/.5)}
.hm-sv__araclar{display:flex;align-items:center;gap:.1rem;pointer-events:auto;position:relative}
.hm-sv__arac{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;color:#fff;transition:background-color var(--hm-gecis)}
.hm-sv__arac:hover{background:rgb(255 255 255/.14)}
.hm-sv__arac svg{width:1.4rem;height:1.4rem}
.hm-sv__arac[hidden]{display:none}
.hm-sv__durdu{position:absolute;top:calc(100% + .3rem);right:.35rem;white-space:nowrap;pointer-events:none;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:rgb(0 0 0/.45)}
.hm-sv__durdu[hidden]{display:none}

/* Yazı katmanı: başlık, alt metin, bağlantı ve ürün etiketi */
.hm-sv__katman{position:absolute;left:0;right:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.25rem 1.1rem;text-align:center;pointer-events:none}
.hm-sv__katman--ust{top:calc(5.25rem + env(safe-area-inset-top))}
.hm-sv__katman--orta{top:50%;translate:0 -50%}
.hm-sv__katman--alt{bottom:0;padding-bottom:calc(1.6rem + env(safe-area-inset-bottom));background:linear-gradient(rgb(0 0 0/0),rgb(0 0 0/.55) 45%)}
.hm-sv__katman[hidden]{display:none}
.hm-sv__baslik{font-family:var(--hm-serif);font-weight:400;font-size:clamp(1.6rem,1.1rem + 2.4vw,2.05rem);font-size:clamp(1.5rem,7.2cqi,2.05rem);line-height:1.32;letter-spacing:-.005em;text-wrap:balance;max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.hm-sv__katman--buyuk .hm-sv__baslik{font-size:clamp(2rem,1.3rem + 3.6vw,2.7rem);font-size:clamp(1.85rem,9.4cqi,2.7rem);line-height:1.25}
.hm-sv__baslik span,.hm-sv__altmetin span{-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.22em}
.hm-sv__baslik span{padding:.04em .34em}
.hm-sv__altmetin{font-size:1rem;font-weight:700;line-height:1.55;text-wrap:balance;max-width:100%;overflow-wrap:anywhere}
.hm-sv__altmetin span{padding:.12em .5em;background:rgb(0 0 0/.55);color:#fff}
/* Yazı stilleri (panelden seçilir) */
.hm-sv__katman--vurgu .hm-sv__baslik span{background:var(--hm-altin);color:var(--hm-murekkep)}
.hm-sv__katman--koyu .hm-sv__baslik span{background:rgb(27 45 36/.9);color:var(--hm-krem)}
.hm-sv__katman--krem .hm-sv__baslik span{background:var(--hm-krem);color:var(--hm-murekkep)}
.hm-sv__katman--sade .hm-sv__baslik span{background:none;color:#fff;padding:0;text-shadow:0 2px 14px rgb(0 0 0/.75),0 0 2px rgb(0 0 0/.6)}
.hm-sv__katman--sade .hm-sv__altmetin span{background:none;padding:0;text-shadow:0 1px 10px rgb(0 0 0/.85)}
.hm-sv__cta{pointer-events:auto;display:inline-flex;align-items:center;gap:.45rem;min-height:3rem;padding:.7rem 1.25rem;border-radius:999px;background:var(--hm-krem);color:var(--hm-murekkep)!important;font-weight:800;font-size:1rem;box-shadow:0 10px 26px -10px rgb(0 0 0/.7);transition:background-color var(--hm-gecis)}
.hm-sv__cta:hover{background:#fff}
.hm-sv__cta svg{width:1.15rem;height:1.15rem}
.hm-sv__urun{pointer-events:auto;display:flex;align-items:center;gap:.75rem;max-width:min(100%,21rem);padding:.5rem .9rem .5rem .5rem;border-radius:var(--hm-r2);background:rgb(255 253 248/.97);color:var(--hm-murekkep)!important;text-align:left;box-shadow:0 12px 30px -12px rgb(0 0 0/.75)}
.hm-sv__urun img{flex:none;width:3.25rem;height:3.25rem;border-radius:.6rem;object-fit:cover;background:var(--hm-krem-2)}
.hm-sv__urun-ad{display:block;font-weight:800;line-height:1.25}
.hm-sv__urun-fiyat{display:block;font-size:.9rem;color:var(--hm-sut);font-variant-numeric:tabular-nums}
.hm-sv__urun-fiyat b{font-family:var(--hm-serif);font-weight:400;font-size:1.15rem;color:var(--hm-murekkep)}
.hm-sv__urun-git{margin-left:auto;padding-left:.4rem;font-weight:800;font-size:.9rem;color:var(--hm-fistik);white-space:nowrap;display:inline-flex;align-items:center;gap:.2rem}
.hm-sv__urun-git svg{width:1rem;height:1rem}
@media (prefers-reduced-motion:no-preference){
	.hm-sv__katman.is-gir>*{animation:hm-sv-yazi 520ms cubic-bezier(.2,.7,.2,1) both}
	.hm-sv__katman.is-gir>:nth-child(2){animation-delay:90ms}
	.hm-sv__katman.is-gir>:nth-child(3){animation-delay:180ms}
	@keyframes hm-sv-yazi{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
}

/* Masaüstü yan oklar ve bilgi notu */
.hm-sv__yan{display:none}
@media (min-width:48rem){
	.hm-sv__yan{position:absolute;top:50%;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin-top:-1.5rem;border-radius:50%;background:rgb(255 255 255/.14);color:#fff;transition:background-color var(--hm-gecis)}
	.hm-sv__yan:hover{background:rgb(255 255 255/.26)}
	.hm-sv__yan:disabled{opacity:.35;cursor:default}
	.hm-sv__yan svg{width:1.5rem;height:1.5rem}
	.hm-sv__yan--onceki{left:calc(50% - var(--sahne-w) / 2 - 4rem)}
	.hm-sv__yan--sonraki{right:calc(50% - var(--sahne-w) / 2 - 4rem)}
}
.hm-sv__bildirim{position:absolute;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));translate:-50% 0;z-index:6;padding:.55rem 1rem;border-radius:999px;background:rgb(0 0 0/.75);color:#fff;font-size:.9rem;font-weight:700;pointer-events:none}
.hm-sv__bildirim[hidden]{display:none}
.hm-sv .hm-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
	.hm-sv *,.hm-story *{transition:none!important}
	.hm-sv__donen{animation-duration:2s}
}
@media (forced-colors:active){
	.hm-story__parca{stroke:CanvasText}
	.hm-story__parca.is-izlendi{stroke:GrayText}
	.hm-sv__cubuk i{background:CanvasText}
}